:root { --ink:#1b1f24; --muted:#5b6470; --line:#dfe3e8; --navy:#1f3a5f; --late:#b42318; --soon:#a37a00; --ok:#1f7a4d; --bg:#f6f7f9; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
header { background:#fff; border-bottom:1px solid var(--line); }
.bar { display:flex; justify-content:space-between; align-items:center; height:52px; gap:12px; }
.brand { font-weight:700; color:var(--navy); }
.muted { color:var(--muted); }
.small { font-size:12px; padding:20px 16px; }
.hidden { display:none !important; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; margin:16px 0; }
h2 { margin:0 0 6px; font-size:17px; color:var(--navy); }
h3 { margin:14px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:16px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; }
.tile b { display:block; font-size:24px; }
.tile.late b { color:var(--late); } .tile.soon b { color:var(--soon); }
.item { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; }
.item .main { flex:1; min-width:0; }
.item .meta { color:var(--muted); font-size:13px; }
.badge { font-size:11px; padding:2px 7px; border-radius:10px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; margin-top:3px; }
.badge.late { color:var(--late); border-color:var(--late); }
.badge.soon { color:var(--soon); border-color:var(--soon); }
.badge.ok { color:var(--ok); border-color:var(--ok); }
button, select, input { font:inherit; }
button { background:var(--navy); color:#fff; border:0; border-radius:6px; padding:7px 12px; cursor:pointer; }
button.quiet { background:#fff; color:var(--navy); border:1px solid var(--navy); padding:5px 10px; font-size:13px; }
button.link { background:none; color:var(--navy); border:0; padding:0; text-decoration:underline; font-size:13px; }
input, select { border:1px solid var(--line); border-radius:6px; padding:7px 9px; min-width:0; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.row input[type=text], .row input:not([type]) { flex:1; min-width:180px; }
#loginForm { display:flex; gap:8px; flex-wrap:wrap; }
#loginForm input { flex:1; min-width:220px; }
a { color:var(--navy); }
.done { color:var(--muted); text-decoration:line-through; }
.actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
@media (max-width:600px) { .item { flex-wrap:wrap; } .actions { width:100%; } }