:root{
  /* ── v18 Stacks · widget-gallery palette ──
     Deep slate canvas, coral as the single accent.
     Lineage: iOS widget gallery × Apple Sports × Watch Modular × Arc cards. */

  --bg:#0B0F14;
  --surface:#151A22;
  --surface-2:#1D2330;
  --surface-3:#252B3A;

  --text:#F3F4F6;
  --text-2:#9CA3AF;
  --text-3:#6B7280;
  --text-4:#4B5563;

  --ink:#0B0F14;
  --on-ink:#F3F4F6;

  /* Single coral accent — first v1–v18 version to use coral as primary */
  --coral:#FF6B35;
  --coral-hover:#FF8550;
  --coral-pressed:#E5552A;
  --coral-soft:rgba(255,107,53,0.16);
  --coral-soft-2:rgba(255,107,53,0.08);
  --coral-glow:rgba(255,107,53,0.32);
  --coral-deep:#B84418;

  --emerald:#22C55E;
  --emerald-soft:rgba(34,197,94,0.16);
  --emerald-deep:#16A34A;
  --amber:#F59E0B;
  --amber-soft:rgba(245,158,11,0.16);
  --slate-blue:#60A5FA;
  --slate-blue-soft:rgba(96,165,250,0.16);
  --red:#EF4444;

  --line:rgba(255,255,255,0.06);
  --line-2:rgba(255,255,255,0.10);
  --line-strong:rgba(255,255,255,0.18);
  --hairline:rgba(255,255,255,0.04);

  /* Tile shape — distinctive 28px squircle */
  --r-tile:28px;
  --r-nested:16px;
  --r-chip:10px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:9999px;

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --tile-shadow:none;
  --tile-glow:none;
}

/* ── Reset ── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-feature-settings:'tnum','ss01','cv11';
  background:#050507;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
}
svg{display:inline-block;flex:0 0 auto;vertical-align:middle;width:18px;height:18px}
button{font-family:inherit;background:none;border:none;color:inherit;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}

.mono{font-family:var(--font-mono);font-feature-settings:'tnum','ss01','zero'}

/* ── Demo page chrome ── */
.page{max-width:1240px;margin:0 auto;padding:28px 24px 56px}
.page-h h1{font-size:32px;font-weight:700;margin:0 0 6px;letter-spacing:-0.025em;color:var(--text)}
.page-h p{color:var(--text-2);font-size:13.5px;line-height:1.55;margin:0 0 4px;max-width:820px}
.page-h .note{font-size:12px;color:var(--text-3);margin:6px 0 0}
.page-h code{font-family:var(--font-mono);font-size:0.92em;background:var(--surface);padding:1px 6px;border-radius:4px;color:var(--coral);border:1px solid var(--line)}
.page-h kbd{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 6px;border-radius:4px;color:var(--coral)}
.page-h b{color:var(--text);font-weight:600}

.vsw,.msw{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:5px 7px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);width:max-content;font-size:12px}
.vsw{margin:0 0 12px}
.msw{margin:0 0 20px}
.vsw .vlabel,.msw .mlabel{color:var(--text-3);padding:0 8px 0 6px;letter-spacing:0.08em;text-transform:uppercase;font-size:10px;font-weight:700}
.vsw a,.msw button{padding:5px 10px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:12px;font-family:var(--font-mono)}
.vsw a:hover,.msw button:hover{background:var(--surface-2);color:var(--text)}
.vsw a[aria-current],.msw button[aria-current]{background:var(--coral);color:var(--ink);font-weight:700}

.user-row{display:flex;gap:0;align-items:center;margin:18px 0 22px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.user-row .ur-l{flex:1}
.user-row .ur-name{font-weight:700;font-size:14.5px;color:var(--text);letter-spacing:-0.005em}
.user-row .ur-sub{font-size:12px;color:var(--text-2);margin-top:2px;font-weight:500;font-family:var(--font-mono)}
.user-row .ur-tag{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);background:var(--coral);padding:5px 11px;border-radius:var(--r-sm);font-family:var(--font-mono)}

.stage{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:start;margin-top:8px}
@media (max-width:900px){.stage{grid-template-columns:1fr}}

.info{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.info h2{font-size:11px;font-weight:700;margin:0 0 6px;color:var(--coral);letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-mono)}
.info ul{margin:0;padding:0 0 0 18px;color:var(--text-2);font-size:13px;line-height:1.6}
.info ul li{margin-bottom:4px}
.info b{color:var(--text);font-weight:600}
.info kbd{font-family:var(--font-mono);font-size:11px;background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:4px;color:var(--coral)}
.info code{font-family:var(--font-mono);font-size:0.92em;color:var(--coral)}

/* ── Phone frame ── */
.phone{
  width:340px;height:736px;border-radius:42px;border:6px solid #000;
  box-shadow:0 24px 56px rgba(0,0,0,0.50),0 4px 12px rgba(0,0,0,0.30),0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;position:relative;margin:0 auto;background:var(--bg);
}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#000;border-radius:16px;z-index:60}

.statusbar{position:absolute;top:0;left:0;right:0;height:34px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 22px 0;font-size:12px;font-weight:600;color:var(--text);font-feature-settings:'tnum';font-family:var(--font-mono)}
.statusbar .sb-r{display:flex;gap:5px;align-items:center;color:var(--text)}
.statusbar .sb-r svg{width:14px;height:14px}

/* Nav header */
.nav{
  position:absolute;top:34px;left:0;right:0;height:52px;
  display:flex;align-items:center;gap:8px;padding:0 14px;
  background:var(--bg);z-index:40;
}

/* Org switcher */
.nav-switcher{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:5px 10px 5px 6px;min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-nested);cursor:pointer;
  height:40px;
  transition:background .15s, border-color .15s;
}
.nav-switcher:hover{background:var(--surface-2);border-color:var(--line-2)}
.nav-switcher .ns-logo{
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--coral);
  font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;font-family:var(--font-mono);
}
.nav-switcher .ns-l{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.18}
.nav-switcher .ns-co{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-switcher .ns-br{font-size:10.5px;color:var(--text-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;display:flex;align-items:center;gap:4px;font-family:var(--font-mono)}
.nav-switcher .ns-br svg{width:9px;height:9px;color:var(--text-3);flex:0 0 auto;stroke-width:2.4}
.nav-switcher .ns-caret{flex:0 0 auto;color:var(--text-3);align-self:center}
.nav-switcher .ns-caret svg{width:13px;height:13px;stroke-width:2.4}

/* State cycler chip — prototype-only */
.nav-state-chip{
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 11px;
  background:var(--coral-soft);
  border:1px solid var(--coral-soft);
  border-radius:var(--r-chip);
  color:var(--coral);
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.nav-state-chip:hover{background:var(--coral-soft);border-color:var(--coral)}
.nav-state-chip .dot{
  width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 2px rgba(255,107,53,0.18);
}
.nav-state-chip[data-state="mid"] .dot{
  background:var(--emerald);
  box-shadow:0 0 0 2px rgba(34,197,94,0.18);
  animation:pulse-dot 1.5s ease-in-out infinite;
}
.nav-state-chip[data-state="post"] .dot{
  background:var(--text-3);
  box-shadow:0 0 0 2px rgba(107,114,128,0.18);
}

@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,0.18)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,0.32)}
}

/* Bell */
.nav-bell{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-nested);position:relative;cursor:pointer;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);
  transition:background .15s, color .15s;
}
.nav-bell:hover{background:var(--surface-2);color:var(--text)}
.nav-bell svg{width:18px;height:18px}
.nav-bell-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--coral);color:var(--ink);
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);font-family:var(--font-mono);
}

/* Body */
.body{
  position:absolute;top:86px;bottom:64px;left:0;right:0;overflow-y:auto;
  background:var(--bg);
  padding:14px 14px 24px;
}
.body::-webkit-scrollbar{width:0;display:none}

/* Tab bar */
.tabs{
  position:absolute;bottom:0;left:0;right:0;height:64px;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(11,15,20,0.92);
  backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--line);z-index:40;
}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);font-size:9.5px;font-weight:600;letter-spacing:0.04em;cursor:pointer;position:relative;font-family:var(--font-mono);text-transform:uppercase}
.tab svg{width:20px;height:20px;color:var(--text-3);stroke-width:2}
.tab.active{color:var(--coral)}
.tab.active svg{color:var(--coral);stroke-width:2.4}
.tab.punch-tab.active svg{color:var(--coral)}
.tab.punch-tab.active span{color:var(--coral)}
.tab:active{transform:scale(0.94);transition:transform .05s}

/* ── TILES (the heart of v18) ── */
.tile{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-tile);
  padding:18px 18px 18px;
  overflow:hidden;
  margin-bottom:12px;
  transition:background .2s ease, border-color .2s ease;
}
/* Inner top highlight — the depth trick on dark mode tiles */
.tile::before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 50%, transparent);
  pointer-events:none;
}
.tile-head{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.tile-title{
  font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-3);font-family:var(--font-mono);flex:1;
}
.tile-action{
  font-size:11px;font-weight:600;color:var(--coral);
  display:flex;align-items:center;gap:3px;cursor:pointer;
}
.tile-action svg{width:13px;height:13px;stroke-width:2.4}

/* ── HERO TILE ── */
.hero{
  background:var(--surface);
  border:1px solid var(--line-2);
  position:relative;
  padding:22px 20px 20px;
}
.hero::after{
  content:"";position:absolute;inset:-2px;
  border-radius:calc(var(--r-tile) + 2px);
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, var(--coral-soft-2) 0%, transparent 55%);
  z-index:0;
}
.hero > *{position:relative;z-index:1}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  background:var(--coral-soft);
  color:var(--coral);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
}
.hero-tag .dot{
  width:6px;height:6px;border-radius:50%;background:var(--coral);
}
.hero-tag.live{background:var(--emerald-soft);color:var(--emerald)}
.hero-tag.live .dot{background:var(--emerald);animation:pulse-dot-em 1.5s ease-in-out infinite}
.hero-tag.done{background:var(--slate-blue-soft);color:var(--slate-blue)}
.hero-tag.done .dot{background:var(--slate-blue)}
@keyframes pulse-dot-em{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}
}

.hero-num{
  font-family:var(--font-mono);font-feature-settings:'tnum','zero';
  font-size:56px;font-weight:700;letter-spacing:-0.04em;line-height:1.05;
  color:var(--text);margin:14px 0 4px;
}
.hero-num.post{font-size:48px;letter-spacing:-0.035em}
.hero-sub{
  font-size:13px;color:var(--text-2);font-weight:500;margin:0 0 2px;
}
.hero-sub .mono{font-family:var(--font-mono);color:var(--text);font-weight:600}
.hero-meta{
  font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px;
  font-family:var(--font-mono);
}

/* Pre-punch CTA */
.btn-punch-in{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:18px;
  height:62px;
  background:var(--coral);color:var(--ink);
  border-radius:18px;
  font-size:16px;font-weight:700;letter-spacing:-0.005em;
  cursor:pointer;
  box-shadow:
    0 0 0 1px var(--coral),
    0 8px 24px var(--coral-glow),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .12s ease, box-shadow .2s ease, background .15s ease;
}
.btn-punch-in svg{width:20px;height:20px}
.btn-punch-in:hover{background:var(--coral-hover);box-shadow:0 0 0 1px var(--coral-hover),0 10px 28px var(--coral-glow),inset 0 1px 0 rgba(255,255,255,0.22)}
.btn-punch-in:active{transform:scale(0.98)}

.hero-context{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-3);font-weight:500;
  margin-top:14px;font-family:var(--font-mono);
  justify-content:center;
}
.hero-context svg{width:13px;height:13px;color:var(--text-3);stroke-width:2}

/* Mid-shift action row */
.hero-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.btn-secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:50px;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  color:var(--text);
  border-radius:var(--r-nested);
  font-size:13.5px;font-weight:600;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn-secondary svg{width:16px;height:16px}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--line-strong)}
.btn-secondary:active{transform:scale(0.98)}
.btn-secondary.coral{
  background:var(--coral);color:var(--ink);border-color:var(--coral);
  box-shadow:0 4px 14px var(--coral-glow);
}
.btn-secondary.coral:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn-secondary.outline-coral{
  background:transparent;color:var(--coral);border-color:var(--coral);
}
.btn-secondary.outline-coral:hover{background:var(--coral-soft)}

.hero-times{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:14px;font-family:var(--font-mono);
  padding-top:12px;border-top:1px solid var(--line);
}
.hero-time{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero-time .tv{font-size:14px;font-weight:700;color:var(--text)}
.hero-time .tl{font-size:9.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)}
.hero-time-sep{color:var(--text-4);font-size:12px}

/* ── 2-UP ROW (location + hours) ── */
.row-2up{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;
}
.row-2up .tile{margin-bottom:0;padding:16px 14px 14px}
.row-2up .tile-title{font-size:9.5px;letter-spacing:0.12em}

/* Location tile */
.loc-map{
  height:78px;border-radius:var(--r-nested);
  background:var(--surface-2);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:14px 14px;
  position:relative;overflow:hidden;
  border:1px solid var(--line);
}
.loc-geofence{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  background:var(--emerald-soft);
  border:1.5px dashed var(--emerald);
}
.loc-geofence.out{background:var(--amber-soft);border-color:var(--amber)}
.loc-dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--emerald);
  border:2.5px solid var(--bg);
  z-index:2;
  box-shadow:0 0 0 4px rgba(34,197,94,0.28);
}
.loc-dot.out{
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(245,158,11,0.28);
  left:78%;top:30%;
}
.loc-dot.faded{
  background:var(--text-3);box-shadow:none;opacity:0.5;
}
.loc-status{
  display:flex;align-items:center;gap:6px;margin-top:10px;
}
.loc-status .badge{
  font-size:10px;font-weight:700;letter-spacing:0.04em;
  padding:3px 7px;border-radius:var(--r-sm);
  background:var(--emerald-soft);color:var(--emerald);
  font-family:var(--font-mono);
}
.loc-status .badge.warn{background:var(--amber-soft);color:var(--amber)}
.loc-status .badge.faded{background:var(--surface-3);color:var(--text-3)}
.loc-sub{
  font-size:11px;color:var(--text-3);margin-top:4px;
  font-family:var(--font-mono);
}

/* Hours ring tile */
.ring-wrap{
  display:flex;align-items:center;justify-content:center;
  position:relative;height:96px;
}
.ring-svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--surface-3);stroke-width:8}
.ring-fill{fill:none;stroke:var(--coral);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.ring-fill.done{stroke:var(--emerald)}
.ring-overtime{fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round}
.ring-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.ring-num{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.ring-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)}
.ring-target{
  font-size:11px;color:var(--text-3);text-align:center;margin-top:8px;
  font-family:var(--font-mono);font-weight:500;
}
.ring-target .val{color:var(--text-2);font-weight:600}

/* ── TIMELINE TILE ── */
.timeline-tile{padding:18px 18px 16px}
.timeline-axis{
  position:relative;height:42px;margin:8px 0 4px;
}
.timeline-track{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:6px;border-radius:3px;
  background:var(--surface-2);
}
.timeline-planned{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 10px);
  border-radius:3px;
}
.timeline-filled{
  position:absolute;top:0;bottom:0;
  background:linear-gradient(90deg, var(--coral) 0%, var(--coral-hover) 100%);
  border-radius:3px;
  box-shadow:0 0 12px var(--coral-glow);
}
.timeline-filled.done{background:linear-gradient(90deg, var(--emerald) 0%, var(--emerald-deep) 100%);box-shadow:0 0 12px rgba(34,197,94,0.32)}
.timeline-projected{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(90deg, var(--coral-soft) 0 4px, transparent 4px 8px);
  border-radius:3px;
}
.timeline-node{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--surface);
  border:2.5px solid var(--coral);
  z-index:2;
}
.timeline-node.in{background:var(--coral)}
.timeline-node.now{
  background:var(--bg);border-color:var(--emerald);
  box-shadow:0 0 0 4px rgba(34,197,94,0.24);
  animation:node-pulse 1.6s ease-in-out infinite;
}
.timeline-node.break{
  width:10px;height:10px;background:var(--surface);border-color:var(--amber);
}
.timeline-node.out-planned{background:var(--bg);border-color:var(--text-3);border-style:dashed}
.timeline-node.done{background:var(--emerald);border-color:var(--emerald)}
@keyframes node-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,0.24)}
  50%{box-shadow:0 0 0 7px rgba(34,197,94,0.10)}
}

.timeline-ticks{
  display:flex;justify-content:space-between;
  margin-top:6px;font-family:var(--font-mono);
  font-size:10px;color:var(--text-3);font-weight:500;
}
.timeline-ticks span.now{color:var(--emerald);font-weight:700}

.timeline-legend{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--text-3);
}
.timeline-legend-item{display:flex;align-items:center;gap:5px}
.timeline-legend-dot{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.timeline-legend-dot.break{background:transparent;border:1.5px solid var(--amber)}
.timeline-legend-dot.future{background:transparent;border:1.5px dashed var(--text-3)}

/* ── TEAM TILE ── */
.team-row{display:flex;align-items:center;gap:14px;margin-top:6px}
.team-avatars{display:flex;align-items:center}
.team-av{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  border:2px solid var(--bg);
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text);
  margin-left:-8px;
}
.team-av:first-child{margin-left:0}
.team-av.c0{background:#4F46E5;color:#fff}
.team-av.c1{background:#0EA5E9;color:#fff}
.team-av.c2{background:#10B981;color:#fff}
.team-av.c3{background:#F59E0B;color:#1F1300}
.team-av.c4{background:#EC4899;color:#fff}
.team-av.more{background:var(--surface-3);color:var(--text-2);font-size:10px}
.team-meta{flex:1}
.team-stat{
  font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.005em;
  display:flex;align-items:baseline;gap:4px;
}
.team-stat .num{font-family:var(--font-mono);color:var(--emerald)}
.team-stat .sep{color:var(--text-3);font-weight:500}
.team-stat .num.leave{color:var(--amber)}
.team-sub{font-size:11px;color:var(--text-3);margin-top:2px;font-family:var(--font-mono)}

/* ── UP NEXT TILE ── */
.upn-list{display:flex;flex-direction:column;gap:10px}
.upn-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-nested);
}
.upn-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--coral-soft);color:var(--coral);
}
.upn-icon.lunch{background:var(--amber-soft);color:var(--amber)}
.upn-icon.meet{background:var(--slate-blue-soft);color:var(--slate-blue)}
.upn-icon.close{background:var(--emerald-soft);color:var(--emerald)}
.upn-icon svg{width:16px;height:16px;stroke-width:2}
.upn-body{flex:1;min-width:0}
.upn-when{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:0.06em;color:var(--coral);text-transform:uppercase;
}
.upn-row.dim .upn-when{color:var(--amber)}
.upn-row.future .upn-when{color:var(--slate-blue)}
.upn-row.close-row .upn-when{color:var(--emerald)}
.upn-title{font-size:13.5px;font-weight:600;color:var(--text);margin-top:2px;letter-spacing:-0.005em}
.upn-sub{font-size:11px;color:var(--text-3);margin-top:1px;font-family:var(--font-mono)}

/* ── SHEET (modal slide-up) ── */
.sheet-backdrop{
  position:absolute;inset:0;z-index:90;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:100;
  background:var(--surface);
  border-radius:28px 28px 0 0;
  padding:18px 18px 24px;
  transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  border-top:1px solid var(--line-2);
  max-height:88%;overflow-y:auto;
}
.sheet.open{transform:translateY(0)}
.sheet::-webkit-scrollbar{display:none}
.sheet-grab{
  width:36px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:0 auto 14px;
}
.sheet-title{
  font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--text);
  margin:0 0 4px;text-align:center;
}
.sheet-sub{
  font-size:12.5px;color:var(--text-2);text-align:center;
  margin:0 0 18px;font-family:var(--font-mono);
}

.viewfinder{
  width:160px;height:160px;border-radius:50%;
  margin:0 auto 16px;
  background:var(--surface-2);
  border:2px dashed var(--coral);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.viewfinder::before{
  content:"";position:absolute;inset:14px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, var(--surface-3) 0%, var(--surface-2) 70%);
}
.viewfinder svg{position:relative;width:60px;height:60px;color:var(--text-3);stroke-width:1.4}
.viewfinder .scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--coral), transparent);
  top:0;
  animation:scan 2.2s ease-in-out infinite;
  box-shadow:0 0 12px var(--coral-glow);
}
@keyframes scan{
  0%{top:14%}
  50%{top:86%}
  100%{top:14%}
}

.sheet-check-row{
  display:flex;align-items:center;gap:12px;
  padding:14px;background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-nested);
  margin-bottom:8px;
}
.sheet-check-row .ic{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--emerald-soft);color:var(--emerald);flex:0 0 auto;
}
.sheet-check-row .ic svg{width:16px;height:16px;stroke-width:3}
.sheet-check-row .lbl{flex:1;font-size:13.5px;color:var(--text);font-weight:600}
.sheet-check-row .val{font-size:11.5px;color:var(--text-3);margin-top:1px;font-family:var(--font-mono);font-weight:500}

.sheet-confirm{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:54px;
  background:var(--coral);color:var(--ink);
  border-radius:16px;font-size:15px;font-weight:700;
  margin-top:14px;cursor:pointer;
  box-shadow:0 6px 20px var(--coral-glow);
  transition:transform .12s ease, background .15s ease;
}
.sheet-confirm:hover{background:var(--coral-hover)}
.sheet-confirm:active{transform:scale(0.98)}
.sheet-cancel{
  display:block;width:100%;text-align:center;
  margin-top:10px;padding:14px;color:var(--text-2);
  font-size:13px;font-weight:600;cursor:pointer;
}
.sheet-cancel:hover{color:var(--text)}

/* Break sheet specifics */
.break-timer{
  font-family:var(--font-mono);font-size:48px;font-weight:700;
  letter-spacing:-0.04em;text-align:center;
  color:var(--amber);margin:8px 0 4px;
}
.break-since{
  text-align:center;font-size:12px;color:var(--text-3);
  font-family:var(--font-mono);margin-bottom:18px;
}

/* Toast (decorative, unused but reserved) */
.toast{
  position:absolute;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);
  background:var(--surface-3);border:1px solid var(--line-2);
  color:var(--text);font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:var(--r-pill);z-index:120;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── LIGHT MODE ──
   Flip canvas to FAFAFA, tiles to FFFFFF with hairline + faint shadow.
   Coral accent stays. */
body.light{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --surface-2:#F4F5F7;
  --surface-3:#E5E7EB;
  --text:#0B0F14;
  --text-2:#4B5563;
  --text-3:#6B7280;
  --text-4:#9CA3AF;
  --ink:#FAFAFA;
  --on-ink:#0B0F14;
  --line:rgba(0,0,0,0.06);
  --line-2:rgba(0,0,0,0.10);
  --line-strong:rgba(0,0,0,0.20);
  --hairline:rgba(0,0,0,0.04);
}
body.light{background:#F0F0F2}
body.light .phone{background:var(--bg);box-shadow:0 24px 56px rgba(0,0,0,0.18),0 4px 12px rgba(0,0,0,0.10),0 0 0 1px rgba(0,0,0,0.06)}
body.light .tile{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,15,20,0.04),0 8px 24px rgba(11,15,20,0.04);
}
body.light .tile::before{display:none}
body.light .tabs{background:rgba(255,255,255,0.92)}
body.light .nav-bell{background:var(--surface);border-color:var(--line)}
body.light .nav-bell:hover{background:var(--surface-2)}
body.light .nav-bell-badge{border-color:var(--surface)}
body.light .nav-switcher{background:var(--surface)}
body.light .nav-switcher:hover{background:var(--surface-2)}
body.light .nav-switcher .ns-logo{color:#fff}
body.light .user-row{background:var(--surface);border-color:var(--line)}
body.light .vsw,body.light .msw{background:var(--surface);border-color:var(--line)}
body.light .page-h h1,body.light .page-h b{color:var(--text)}
body.light .page-h p{color:var(--text-2)}
body.light .page-h code{background:var(--surface);color:var(--coral-pressed);border-color:var(--line)}
body.light .info b{color:var(--text)}
body.light .ring-track{stroke:var(--surface-3)}
body.light .timeline-track{background:var(--surface-2)}
body.light .timeline-planned{background:repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 10px)}
body.light .loc-map{
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
body.light .timeline-node.now{background:#fff}
body.light .timeline-node.out-planned{background:#fff}
body.light .team-av{border-color:var(--surface)}
body.light .upn-row{background:var(--surface-2);border-color:var(--line)}
body.light .btn-secondary{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
body.light .sheet{background:var(--surface);border-top-color:var(--line-2)}
body.light .sheet-check-row{background:var(--surface-2);border-color:var(--line)}
body.light .sheet-backdrop{background:rgba(11,15,20,0.42)}
body.light .nav-state-chip{background:var(--coral-soft);border-color:transparent;color:var(--coral-pressed)}
body.light .nav-state-chip .dot{background:var(--coral-pressed)}
body.light .statusbar{color:var(--text)}
body.light .body{background:var(--bg)}
body.light .nav{background:var(--bg);border-bottom:1px solid var(--line)}
body.light .hero{border-color:var(--line-2)}

/* Disabled scroll handle on dark body */
body.light .body::-webkit-scrollbar{display:none}