:root{--bg:#0b0f17;--card:#141a26;--card2:#1a2232;--tx:#e8edf5;--dim:#8a94a8;--red:#ff6b6b;--amber:#f5b942;--blue:#5aa9ff;--green:#38d39f;--grey:#6b7489}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 30px);max-width:720px;margin:auto}
.top{display:flex;justify-content:space-between;align-items:center}
.eyebrow{color:var(--dim);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
h1{margin:2px 0 0;font-size:30px;letter-spacing:-.02em}
h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:30px 2px 12px}
#refresh{width:48px;height:48px;border-radius:50%;border:0;background:var(--card2);color:var(--tx);font-size:24px}
#refresh.spin{animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.stamp{margin:10px 0 18px;color:var(--dim);font-size:14px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.dot.off{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border-radius:22px;padding:18px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between}
.tile.big{grid-column:1/-1;background:linear-gradient(135deg,#1d3a5f,#16233a);flex-direction:row;align-items:center;justify-content:flex-start;gap:16px}
.tile .n{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1}.tile.big .n{font-size:64px}
.tile .n small{font-size:22px;margin-left:2px;color:var(--dim)}
.tile .l{color:var(--dim);font-size:15px}.tile.big .l{font-size:20px;color:var(--tx)}.tile .l span{font-size:13px}
.tile.red{background:linear-gradient(135deg,#4a1d24,#2a1419)}.tile.red .n{color:var(--red)}
.tile.blue .n{color:var(--blue)}
.kpis{display:grid;gap:12px}
.kpi{background:var(--card);border-radius:22px;padding:16px;display:flex;gap:16px;align-items:center}
.rw{position:relative;width:92px;height:92px;flex:none}.ring{width:92px;height:92px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}.ring .trk{stroke:#232c3e}.ring .arc{stroke-linecap:round}
.pct{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:19px}
.kl{color:var(--dim);font-size:14px}.kv{font-size:26px;font-weight:700}.kv span{font-size:16px;color:var(--dim);font-weight:500}
.badge{display:inline-block;margin:4px 0 6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.s-ontrack{background:#173a2f;color:var(--green)}.s-behind{background:#3e1c20;color:var(--red)}.s-unknown{background:#262d3b;color:#b6bfd0}
.kn{font-size:13px;color:#c3cad8}.kn.dim{color:var(--dim);margin-top:2px}
.card{background:var(--card);border-radius:22px;padding:18px;margin-top:12px;border-left:5px solid var(--grey)}
.card.amber{border-color:var(--amber)}.card.red{border-color:var(--red)}
.sh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:17px}
.pill{font-size:12px;padding:4px 10px;border-radius:99px;white-space:nowrap;font-weight:600}.pill.amber{background:#3d3018;color:var(--amber)}.pill.red{background:#3e1c20;color:var(--red)}
.goal{color:var(--dim);font-size:14px;margin:6px 0 10px}
.sr{display:flex;gap:10px;padding:9px 0;border-top:1px solid #222a3a;font-size:14px;align-items:baseline}.sr span{flex:none;width:110px;color:var(--dim)}.sr em{font-style:normal}
.ic{flex:none;width:9px;height:9px;border-radius:50%;background:var(--grey)}.ic.ok{background:var(--green)}.ic.wait{background:var(--amber)}.ic.bad{background:var(--red)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:0 -18px;padding-left:18px;scrollbar-width:none}
.chip{flex:none;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid #2a3346;background:var(--card);color:var(--tx);font-size:15px}
.chip span{color:var(--dim);margin-left:4px}.chip.on{background:var(--tx);color:#0b0f17;border-color:var(--tx)}.chip.on span{color:#555}
.grp{margin-top:20px}.gh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin:0 2px 10px}
.gh span{background:var(--card2);border-radius:99px;padding:1px 9px;font-size:13px;color:var(--dim)}
.gh::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--grey)}.gh.red::before{background:var(--red)}.gh.amber::before{background:var(--amber)}.gh.blue::before{background:var(--blue)}
.task{background:var(--card);border-radius:18px;padding:16px;margin-bottom:10px;border-left:5px solid var(--grey);min-height:56px;cursor:pointer}
.task.red{border-color:var(--red)}.task.amber{border-color:var(--amber)}.task.blue{border-color:var(--blue)}
.tt{font-size:16px;font-weight:600}.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.meta span{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--card2);color:#b6bfd0}
.due.red{background:#3e1c20!important;color:var(--red)!important}.due.amber{background:#3d3018!important;color:var(--amber)!important}.due.blue{background:#16304d!important;color:var(--blue)!important}
.you{background:#173a2f!important;color:var(--green)!important}
.more{display:none;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #222a3a;font-size:13px}
.more b{display:block;color:var(--dim);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.task.open .more{display:grid}
.track{background:var(--card);border-radius:18px;padding:16px;margin-top:24px}.track summary{font-weight:600;min-height:28px}
footer{color:var(--dim);font-size:12px;text-align:center;margin-top:24px}
