:root { color-scheme: dark; --bg:#090f19; --panel:#111b2a; --panel2:#172338; --line:#29394e; --text:#ecf3fb; --muted:#91a4ba; --active:#4ade80; --flex:#67c8ff; --sleep:#c8a7ff; font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 85% 0%,#172a42 0,transparent 36%),linear-gradient(180deg,#0b1421,var(--bg) 45%); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
.shell { max-width:1480px; margin:auto; padding:0 26px 60px; }
.site-header { display:flex; justify-content:space-between; align-items:center; min-height:76px; border-bottom:1px solid #ffffff18; }
.brand { display:flex; gap:12px; align-items:center; letter-spacing:.12em; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; border:1px solid #6dd3ff88; border-radius:10px; color:#9ce4ff; background:#0c3345; font-weight:900; letter-spacing:-.06em; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:12px; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; letter-spacing:.03em; }
.account { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:12px; }
.account b { color:var(--text); }
.account button,.week-nav button,.admin-card button:not(.primary) { border:1px solid var(--line); border-radius:7px; padding:7px 11px; color:var(--text); background:#172438; }
.eyebrow { color:#7dd3fc; font-size:10px; font-weight:800; letter-spacing:.18em; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(25px,3vw,38px); letter-spacing:-.04em; line-height:1.1; }
h2 { font-size:19px; letter-spacing:-.02em; }
.intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:32px 0 24px; }
.intro h1 { margin:8px 0 10px; }
.intro p { max-width:720px; color:var(--muted); margin:0; }
.live-clock { min-width:145px; text-align:right; }
.live-clock span,.live-clock small { display:block; color:var(--muted); font-size:10px; letter-spacing:.12em; }
.live-clock strong { display:block; font-size:30px; line-height:1.15; font-variant-numeric:tabular-nums; }
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.summary-card,.card,.board-card,.auth-card { border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,#142033,#101926); box-shadow:0 12px 30px #0002; }
.summary-card { padding:15px 18px; }
.summary-card span { display:block; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.summary-card strong { display:block; margin-top:5px; font-size:27px; line-height:1.1; font-variant-numeric:tabular-nums; }
.summary-card small { color:var(--muted); }
.summary-card.active strong { color:var(--active); }.summary-card.flex strong { color:var(--flex); }.summary-card.sleep strong { color:var(--sleep); }
.board-card { overflow:hidden; }
.board-head { display:flex; justify-content:space-between; align-items:center; padding:18px 20px 12px; gap:12px; }
.board-head h2 { margin:4px 0 0; }
.week-nav { display:flex; gap:5px; }.week-nav button { min-width:35px; }
.day-tabs { display:flex; gap:4px; padding:0 16px 13px; overflow-x:auto; }
.day-tabs button { min-width:99px; padding:8px 11px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); text-align:left; }
.day-tabs button b,.day-tabs button small { display:block; }.day-tabs button small { font-size:10px; }
.day-tabs button.selected { border-color:#4bbfee66; background:#16405b; color:#e9f9ff; }.day-tabs button.today b::after { content:' · NOW'; color:#7dd3fc; font-size:9px; }
.board-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff12; background:#0d1827; }
.board-tools p { margin:0; color:var(--muted); font-size:11px; }
.brushes { display:flex; flex-wrap:wrap; gap:5px; }
.brush { padding:6px 9px; border:1px solid var(--line); border-radius:6px; background:#172438; color:#c5d3e1; font-size:11px; }
.brush[data-brush=active] { color:var(--active); }.brush[data-brush=flex] { color:var(--flex); }.brush[data-brush=sleep] { color:var(--sleep); }
.brush.selected { border-color:currentColor; background:#26384d; box-shadow:0 0 0 1px currentColor inset; }
.grid-scroll { overflow-x:auto; scrollbar-gutter:stable; }
.schedule-grid { display:grid; grid-template-columns:170px repeat(24,minmax(38px,1fr)); min-width:1110px; padding:0 14px 12px; }
.hour,.member-name,.coverage-label,.coverage-cell,.slot { border-bottom:1px solid #ffffff10; }
.hour { padding:8px 0; color:var(--muted); font-size:10px; text-align:center; font-variant-numeric:tabular-nums; }
.corner { position:sticky; left:0; z-index:3; padding:8px 9px; background:#111b2a; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.member-name,.coverage-label { position:sticky; left:0; z-index:2; display:flex; align-items:center; gap:6px; padding:0 9px; min-height:40px; background:#111b2a; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.member-name.self { color:#9ce4ff; }.member-name small { margin-left:auto; color:var(--muted); font-size:9px; }
.slot { display:block; width:100%; min-height:40px; padding:0; border-top:0; border-left:2px solid #111b2a; border-right:2px solid #111b2a; border-radius:5px; background:#1d2939; touch-action:pan-x; }
.slot:hover:not(:disabled),.slot:focus-visible { outline:2px solid #e2e8f0; outline-offset:-2px; }
.slot.active { background:#15553f; }.slot.flex { background:#15526c; }.slot.sleep { background:#563d78; }
.slot.now,.hour.now { box-shadow:inset 2px 0 #facc15; }
.slot:disabled { opacity:.8; }.slot.editable { cursor:crosshair; }
.coverage-label { color:var(--muted); font-size:10px; text-transform:uppercase; }
.coverage-cell { display:grid; place-items:center; min-height:30px; color:#bdebcf; font-size:11px; font-variant-numeric:tabular-nums; }
.coverage-cell.gap { background:#6e2a2a70; color:#ffb4b4; }
.grid-footer { display:flex; justify-content:space-between; gap:12px; padding:8px 20px 13px; color:var(--muted); font-size:11px; }
#save-status { color:#a9e9c1; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.card { padding:19px 20px; }.card h2 { margin:4px 0 14px; }
form label { display:block; color:#c7d5e4; font-size:12px; font-weight:700; }
input,select { width:100%; margin-top:5px; padding:9px 10px; border:1px solid #40536c; border-radius:6px; outline:none; background:#0c1726; color:var(--text); }
input:focus,select:focus { border-color:#7dd3fc; }
.range-card form { display:grid; gap:11px; }.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.primary { border:1px solid #38bdf8; border-radius:7px; padding:10px 14px; background:#0b5d85; color:white; font-weight:800; }
.guide-item { display:flex; align-items:flex-start; gap:10px; margin:14px 0; }.guide-item strong,.guide-item span { display:block; }.guide-item span { color:var(--muted); font-size:12px; }
.dot { flex:none; width:10px; height:10px; margin-top:6px; border-radius:50%; }.dot.active { background:var(--active); }.dot.flex { background:var(--flex); }.dot.sleep { background:var(--sleep); }
.muted { color:var(--muted); font-size:12px; }
.admin-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; }.admin-card h2 { margin:4px 0 5px; }.admin-card p { margin:0; color:var(--muted); font-size:12px; }
.members-card { margin-top:12px; }.members-card h2 { margin:4px 0 5px; }.members-card p { color:var(--muted); font-size:12px; }.member-list { display:flex; flex-wrap:wrap; gap:8px; }.member-pill { display:flex; align-items:center; gap:8px; padding:6px 7px 6px 10px; border:1px solid var(--line); border-radius:7px; background:#0d1827; font-size:12px; }.member-pill.inactive { opacity:.65; }.member-pill small { color:var(--muted); }.member-pill button { border:1px solid var(--line); border-radius:5px; padding:4px 7px; color:var(--text); background:#172438; font-size:11px; }
.invite-result { display:flex; gap:6px; margin-top:8px; }.invite-result input { min-width:260px; margin:0; }
.auth-card { max-width:620px; margin:65px auto; padding:28px; }.auth-card h1 { margin:8px 0; }.auth-card p { color:var(--muted); }.auth-card form { display:grid; gap:14px; }.auth-card button { width:100%; }
.key-help { margin:15px 0 18px; font-size:12px; }.key-help a { color:#7dd3fc; }.key-disclosure { border-top:1px solid var(--line); padding-top:15px; font-size:11px; }.key-disclosure strong { display:block; margin-bottom:8px; }.key-disclosure table { width:100%; border-collapse:collapse; color:var(--muted); }.key-disclosure th,.key-disclosure td { padding:5px 6px; border-bottom:1px solid #ffffff12; text-align:left; vertical-align:top; }.key-disclosure th { min-width:115px; color:#c7d5e4; }
.error { color:#ffaaaa !important; margin-top:12px; }
@media(max-width:760px) { .shell { padding:0 12px 30px; }.site-header { min-height:64px; }.brand small { display:none; }.intro { align-items:flex-start; }.intro p { display:none; }.live-clock strong { font-size:21px; }.summary { grid-template-columns:repeat(2,1fr); }.lower-grid { grid-template-columns:1fr; }.admin-card { display:block; }.day-tabs button { min-width:88px; }.board-head { padding:13px; }.board-tools { padding:9px; } }