/* Furiosa Backstage. Tokens lifted from crm/assets/css/style.css. Light only. */
/* ── Tokens lifted from crm/assets/css/style.css ─────────────── */
:root{
  color-scheme: light;
  --teal:#00b0c6; --teal-hover:#009aaa; --teal-light:#e0f7f8;
  --navy:#1C2434; --navy-hover:#2c3440;
  --gradient-dark:linear-gradient(to bottom right,#082f3c,#0f3e47,#082f3c);
  --text-primary:#1a1a2e; --text-secondary:#43516b; --text-muted:#6b7280;
  --text-label:#4b5563; --text-placeholder:#9ca3af;
  --bg-page:#f8f9fb; --bg-card:#ffffff; --bg-table-head:#f8f9fb; --bg-hover:#f8f9fb;
  --bg-sunk:#f3f5f8;
  --border:#e5e7eb; --border-soft:#eef0f3;
  --radius-card:12px; --radius-input:8px; --radius-btn:.5rem; --radius-badge:12px;
  --shadow-card:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-pop:0 10px 25px rgba(0,176,198,.15), 0 4px 10px rgba(0,0,0,.06);
  --good:#059669; --good-bg:#ecfdf5;
  --warn:#d97706; --warn-bg:#fffbeb;
  --crit:#dc2626; --crit-bg:#fef2f2;
  --info:#2563eb; --info-bg:#eff6ff;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#4a3aa7;
  --grid:#eef0f3;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* Links.
   Every link in this app is a navigational control: a nav tab, a sidebar row, a stage card,
   a table row, a back link. None of them is prose, so none of them wants an underline.
   Affordance comes from colour, background and the pointer instead. */
a{color:inherit; text-decoration:none}

.crumb{
  display:inline-flex; align-items:center; gap:6px;
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--teal);
}
.crumb:hover{color:var(--teal-hover)}
.crumb:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px}

/* ── top bar ─────────────────────────────────────────────────── */
.topbar{background:var(--bg-card); color:var(--text-primary); border-bottom:1px solid var(--border)}
.topbar-in{max-width:1280px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; letter-spacing:-.01em}
.logo .dot{width:22px; height:22px; border-radius:6px; background:var(--teal); display:grid; place-items:center; font-size:12px; color:#06272e; font-weight:800}
.logo .sub{font-weight:500; color:var(--text-muted)}
.acct{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  background:var(--bg-page); border:1px solid var(--border);
  border-radius:var(--radius-badge); padding:5px 12px 5px 8px; font-size:13px;
}
.acct .av{width:22px; height:22px; border-radius:50%; background:var(--teal); color:#06272e; display:grid; place-items:center; font-weight:800; font-size:11px}
.acct .who{font-weight:600}
.acct .uid{color:var(--text-muted); font-size:12px}

/* ── nav ─────────────────────────────────────────────────────── */
.navwrap{background:var(--bg-card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30}
.nav{max-width:1280px; margin:0 auto; padding:0 22px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.tab{
  appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--text-muted);
  padding:14px 15px; border-bottom:2px solid transparent;
}
.tab:hover{color:var(--text-secondary)}
.tab[aria-selected="true"]{color:var(--teal); border-bottom-color:var(--teal)}
.tab:focus-visible{outline:2px solid var(--teal); outline-offset:-3px; border-radius:6px}

.wrap{max-width:1280px; margin:0 auto; padding:22px 22px 70px}
.section{margin-bottom:20px}
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:10px;
}

/* ── cards ───────────────────────────────────────────────────── */
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card)}
.card-h{display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:15px 18px; border-bottom:1px solid var(--border-soft)}
.card-h h2{font-size:16px}
.card-h .sub{font-size:13px; color:var(--text-muted)}
.card-h .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.card-b{padding:18px}

/* ── stat cards (CRM s-card pattern) ─────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.s-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:17px 18px 18px; position:relative; overflow:hidden;
  transition:box-shadow .2s;
}
.s-card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--teal)}
.s-card:nth-child(2)::before{background:var(--s6)}
.s-card:nth-child(3)::before{background:var(--s4)}
.s-card:nth-child(4)::before{background:var(--s3)}
.s-card:nth-child(5)::before{background:var(--s5)}
.s-card:hover{box-shadow:var(--shadow-pop)}
.s-card .lab{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); display:flex; align-items:center; gap:7px; margin-bottom:9px; min-height:16px;
}
.s-card .val{font-size:31px; font-weight:800; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.s-card .val small{font-size:20px; font-weight:700; color:var(--text-secondary)}
.s-card .meta{font-size:12.5px; color:var(--text-muted); margin-top:7px}
.s-card .meta b{color:var(--text-secondary); font-weight:600}
.s-card.empty .val{color:var(--text-placeholder)}

/* ── badges ──────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px; border-radius:var(--radius-badge);
  font-size:11px; font-weight:600; padding:3px 9px; white-space:nowrap; line-height:1.5;
}
.badge.good{background:var(--good-bg); color:var(--good)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.crit{background:var(--crit-bg); color:var(--crit)}
.badge.info{background:var(--info-bg); color:var(--info)}
.badge.teal{background:var(--teal-light); color:var(--teal-hover)}
.badge.flat{background:var(--bg-sunk); color:var(--text-muted)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.dot.pulse{animation:sp 1.6s infinite}
@keyframes sp{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.dot.pulse{animation:none}}

.freshbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:18px; font-size:12.5px; color:var(--text-muted)}

/* ── tables ──────────────────────────────────────────────────── */
.tw{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; background:var(--bg-table-head); color:var(--text-label);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
td{padding:11px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--bg-hover)}
.r{text-align:right; font-variant-numeric:tabular-nums}
.nm{font-weight:600; white-space:nowrap}
.sm{font-size:12px; color:var(--text-muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--text-muted)}
.zero{color:var(--text-placeholder)}
.bar-cell{width:140px; min-width:110px}
.trk{height:6px; background:var(--bg-sunk); border-radius:3px; overflow:hidden}
.fil{height:100%; border-radius:3px; background:var(--teal); display:block}

/* ── live strip ──────────────────────────────────────────────── */
.live{display:flex; flex-wrap:wrap; align-items:stretch; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden}
.live-hero{padding:17px 22px; border-right:1px solid var(--border-soft); min-width:200px; background:var(--teal-light); color:var(--text-primary)}
.live-hero .n{font-size:44px; font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--teal-hover)}
.live-hero .t{font-size:13px; color:var(--text-secondary); margin-top:6px}
.live-list{display:flex; align-items:center; gap:26px; padding:17px 22px; flex-wrap:wrap; flex:1}
.live-item .a{font-size:23px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.live-item .b{font-size:12px; color:var(--text-muted); margin-top:3px}
.live-item.off .a{color:var(--text-placeholder)}

/* ── funnel ──────────────────────────────────────────────────── */
.funnel{display:flex; flex-direction:column; gap:2px}
.fstep{display:grid; grid-template-columns:minmax(130px,180px) 1fr 84px; gap:14px; align-items:center}
.fstep .fl{font-size:13.5px; font-weight:600}
.fstep .fl .sub{font-size:11.5px; color:var(--text-muted); font-weight:400; font-family:ui-monospace,Menlo,monospace}
.fbar{height:28px; background:var(--bg-sunk); border-radius:6px; overflow:hidden}
.ffil{height:100%; border-radius:6px; display:block}
.fstep .fn{font-size:19px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.fdrop{display:grid; grid-template-columns:minmax(130px,180px) 1fr 84px; gap:14px; font-size:11.5px; color:var(--text-muted); padding:2px 0 4px}

.syncrow{margin-top:13px}
.syncrow .btn{width:100%; padding:8px 12px}
.syncnote{
  margin-top:9px; font-size:12px; line-height:1.5; color:var(--text-muted);
  border-left:2px solid var(--border); padding-left:9px;
}
.s-card.empty .syncrow .btn{opacity:.5; cursor:not-allowed}

/* ── hint bar ────────────────────────────────────────────────────
   An explanatory note attached to a panel: how a number is derived, what the
   screen will not show, a flash message after a save. Referenced from six views
   and, until now, styled from none of them. */
.hintbar{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--bg-sunk); border:1px solid var(--border-soft);
  border-radius:var(--radius-card); padding:12px 15px;
  font-size:13px; color:var(--text-secondary); line-height:1.55;
}
.hintbar .hi{flex:none; margin-top:2px; color:var(--text-muted)}
.hintbar b{color:var(--text-primary); font-weight:700}
.hintbar code{white-space:normal}

/* ── callouts ────────────────────────────────────────────────── */
.calls{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.call{background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--teal); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:15px 17px}
.call.w{border-left-color:var(--warn)} .call.c{border-left-color:var(--crit)}
.call .h{font-size:15px; font-weight:700; margin-bottom:6px; line-height:1.3}
.call .p{font-size:13px; color:var(--text-secondary); line-height:1.55}
.call .p b{color:var(--text-primary); font-weight:700}

/* ── charts ──────────────────────────────────────────────────── */
.chartbox{position:relative}
svg.chart{display:block; width:100%; height:auto; overflow:visible}
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .1s; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-input); box-shadow:var(--shadow-pop); padding:9px 12px; font-size:12.5px; z-index:20; min-width:136px}
.tip .td{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px}
.tip .tr{display:flex; justify-content:space-between; gap:18px; line-height:1.7}
.tip .tr .k{color:var(--text-secondary)}
.tip .tr .v{font-weight:700; font-variant-numeric:tabular-nums}
.sw{width:10px; height:10px; border-radius:3px; flex:none; display:inline-block}

/* ── controls ────────────────────────────────────────────────── */
.seg{display:inline-flex; background:var(--bg-sunk); border-radius:var(--radius-input); padding:3px}
.seg button{appearance:none; border:0; background:none; cursor:pointer; border-radius:6px; font-family:inherit; font-size:13px; font-weight:600; color:var(--text-muted); padding:6px 13px}
.seg button[aria-pressed="true"]{background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-card)}
.seg button:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
.btn{appearance:none; cursor:pointer; font-family:inherit; border-radius:var(--radius-btn); padding:9px 16px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); transition:all .2s}
.btn:hover{background:var(--bg-hover)}
.btn.primary{background:var(--gradient-dark); color:#fff; border-color:transparent}
.btn.primary:hover{box-shadow:0 4px 14px rgba(0,176,198,.35); filter:brightness(1.15)}
.btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.notice{border:1px dashed var(--border); border-radius:var(--radius-card); background:var(--bg-sunk); padding:16px 18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.notice .t{flex:1; min-width:220px}
.notice .t .h{font-size:15px; font-weight:700; margin-bottom:4px}
.notice .t .p{font-size:13px; color:var(--text-muted); line-height:1.55}

/* ── source health ───────────────────────────────────────────── */
.src{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
.srccard{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden}
.srccard .hd{padding:14px 17px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:10px}
.srccard .hd .nm2{font-weight:700; font-size:15px}
.srccard .hd .badge{margin-left:auto}
.srccard .bd{padding:0}
.kv{display:flex; justify-content:space-between; gap:14px; padding:9px 17px; border-bottom:1px solid var(--border-soft); font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-muted)}
.kv .v{font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.kv .v.bad{color:var(--crit)} .kv .v.ok{color:var(--good)} .kv .v.warnv{color:var(--warn)}

.todo{display:flex; flex-direction:column}
.ti{display:grid; grid-template-columns:24px 1fr auto; gap:13px; padding:14px 0; border-bottom:1px solid var(--border-soft); align-items:flex-start}
.ti:last-child{border-bottom:0}
.tic{width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; margin-top:2px}
.tic.d{background:var(--good-bg); color:var(--good)}
.tic.t{background:var(--warn-bg); color:var(--warn)}
.tic.b{background:var(--crit-bg); color:var(--crit)}
.ti .tt{font-weight:700; font-size:14.5px; line-height:1.35}
.ti .tp{font-size:13px; color:var(--text-secondary); margin-top:4px; line-height:1.55; max-width:70ch}
.ti .tp code{font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--bg-sunk); padding:1px 6px; border-radius:5px; color:var(--text-primary); white-space:nowrap}
/* A pick-one-or-many row: a checkbox or radio beside a name and its context. */
.pickrow{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-input); margin-bottom:6px; background:var(--bg-card)}
.pickrow:hover{background:var(--bg-page)}
.pickrow:has(input:checked){border-color:var(--teal); background:var(--teal-light)}
.pickrow input{margin-top:2px; accent-color:var(--teal); width:16px; height:16px; flex:none}
.pickrow .nm{display:block; font-weight:600; font-size:13.5px}
.pickrow .sm{display:block; margin-top:2px}

.fld select{
  font-family:inherit; font-size:13.5px; color:var(--text-primary); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius-input); padding:9px 32px 9px 11px;
  width:100%; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.fld select:focus{outline:2px solid var(--teal); outline-offset:-1px; background-color:var(--bg-card)}

.hidden{display:none !important}
footer.fn{margin-top:30px; padding-top:18px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--text-muted); line-height:1.65; max-width:80ch}
footer.fn b{color:var(--text-secondary); font-weight:700}
@media (max-width:640px){
  .s-card .val{font-size:26px}
  .fstep,.fdrop{grid-template-columns:104px 1fr 66px}
  .live-hero .n{font-size:36px}
}

/* ── app shell: fixed sidebar + main ── */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);align-items:start;max-width:1440px;margin:0 auto}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--border);background:var(--bg-card);display:flex;flex-direction:column;min-width:0}
.sidehead{padding:14px 14px 11px;border-bottom:1px solid var(--border-soft)}
.searchwrap{position:relative}
.search{width:100%;font-family:inherit;font-size:13.5px;color:var(--text-primary);background:var(--bg-page);
  border:1px solid var(--border);border-radius:var(--radius-input);padding:9px 11px 9px 32px}
.search::placeholder{color:var(--text-placeholder)}
.search:focus{outline:2px solid var(--teal);outline-offset:-1px;background:var(--bg-card)}
.searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.sidecount{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-placeholder);margin-top:10px}
.proplist{overflow-y:auto;flex:1;padding:7px 8px 20px}
.pitem{display:block;width:100%;text-align:left;appearance:none;border:0;background:none;cursor:pointer;font-family:inherit;
  border-radius:var(--radius-input);padding:8px 10px;margin-bottom:1px}
.pitem:hover{background:var(--bg-page)}
.pitem[aria-current="true"]{background:var(--teal-light)}
.pitem[aria-current="true"] .pn{color:var(--teal-hover)}
.pitem:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pitem .pn{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:7px;line-height:1.3}
.pitem .pd{width:7px;height:7px;border-radius:50%;flex:none}
.pitem .pm{font-size:11.5px;color:var(--text-muted);margin-top:2px;margin-left:14px;font-variant-numeric:tabular-nums}
.pitem.dim .pn{color:var(--text-placeholder)}
.sidefoot{border-top:1px solid var(--border-soft);padding:10px 12px;font-size:11.5px;color:var(--text-placeholder)}
.main{padding:22px 24px 70px;min-width:0}
.grouphead{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-placeholder);padding:11px 10px 5px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}
  .proplist{max-height:230px}
  .main{padding:18px 16px 60px}
}

/* ── stage tabs: the three lifecycle stages ── */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:16px 0 0}
.stg{appearance:none;font-family:inherit;text-align:left;cursor:pointer;background:var(--bg-card);
  border:1px solid var(--border);border-top:3px solid var(--border);border-radius:var(--radius-card);
  padding:13px 15px 14px;box-shadow:var(--shadow-card);transition:all .16s;min-width:0}
.stg:hover:not(:disabled){box-shadow:var(--shadow-pop)}
.stg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.stg:disabled{cursor:not-allowed;opacity:.55}
.stg .sk{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-placeholder);
  display:flex;align-items:center;gap:7px;margin-bottom:5px}
.stg .sname{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-placeholder);line-height:1.15}
.stg .sdate{font-size:11.5px;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.stg .smeas{font-size:11.5px;color:var(--text-placeholder);margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-soft)}
.stg[aria-pressed="true"]{box-shadow:var(--shadow-pop)}
/* 'Everything' is the default view: neutral, so the three lifecycle stages keep their colours. */
.stg.g0[aria-pressed="true"]{border-top-color:var(--navy);background:var(--bg-sunk)}
.stg.g0[aria-pressed="true"] .sname,.stg.g0[aria-pressed="true"] .sk{color:var(--navy)}
.stg.g1[aria-pressed="true"]{border-top-color:var(--teal);background:var(--teal-light)}
.stg.g1[aria-pressed="true"] .sname,.stg.g1[aria-pressed="true"] .sk{color:var(--teal-hover)}
.stg.g2[aria-pressed="true"]{border-top-color:var(--s6);background:#eeecfb}
.stg.g2[aria-pressed="true"] .sname,.stg.g2[aria-pressed="true"] .sk{color:var(--s6)}
.stg.g3[aria-pressed="true"]{border-top-color:var(--good);background:var(--good-bg)}
.stg.g3[aria-pressed="true"] .sname,.stg.g3[aria-pressed="true"] .sk{color:var(--good)}
.stg[aria-pressed="true"] .sdate,.stg[aria-pressed="true"] .smeas{color:var(--text-secondary)}
@media (max-width:1100px){.stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.stages{grid-template-columns:1fr}}

/* stage banner: unmissable "you are looking at X" */
.stagebanner{display:flex;align-items:center;gap:13px;flex-wrap:wrap;border-radius:var(--radius-card);
  padding:13px 17px;margin:16px 0 18px;border:1px solid var(--border);border-left:5px solid var(--teal);background:var(--teal-light)}
.stagebanner.g0{border-left-color:var(--navy);background:var(--bg-sunk)}
.stagebanner.g2{border-left-color:var(--s6);background:#eeecfb}
.stagebanner.g3{border-left-color:var(--good);background:var(--good-bg)}
.stagebanner .bt{font-size:15px;font-weight:800;letter-spacing:-.01em}
.stagebanner .bd{font-size:13px;color:var(--text-secondary)}
.stagebanner .bw{margin-left:auto;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}

/* date config */
/* Form fields. Standalone, because forms appear on the settings and login screens too,
   not only inside the stage-date panel where these rules first lived. */
.fld{display:flex; flex-direction:column; gap:5px}
.fld label{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-label)}
.fld input[type=date], .fld input[type=text], .fld input[type=number],
.fld input[type=email], .fld input[type=password], .fld input[type=search]{
  font-family:inherit; font-size:13.5px; color:var(--text-primary); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius-input); padding:9px 11px; width:100%;
}
.fld input:focus{outline:2px solid var(--teal); outline-offset:-1px; background:var(--bg-card)}
.fld input:disabled{opacity:.6; cursor:not-allowed}
.fld .sm{font-weight:400; line-height:1.45; max-width:44ch}
.hint{font-size:12px; color:var(--text-muted); max-width:44ch; line-height:1.45}

/* An event name, a column, a UTM parameter. Appears in prose all over this app. */
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
  background:var(--bg-sunk); padding:1px 6px; border-radius:5px;
  color:var(--text-primary); white-space:nowrap;
}

/* The stage-date panel is now layout only. */
.datecfg{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-card); padding:14px 17px;
  box-shadow:var(--shadow-card);
}

/* A pick-one-or-many row: a checkbox or radio beside a name and its context. */
.pickrow{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-input); margin-bottom:6px; background:var(--bg-card)}
.pickrow:hover{background:var(--bg-page)}
.pickrow:has(input:checked){border-color:var(--teal); background:var(--teal-light)}
.pickrow input{margin-top:2px; accent-color:var(--teal); width:16px; height:16px; flex:none}
.pickrow .nm{display:block; font-weight:600; font-size:13.5px}
.pickrow .sm{display:block; margin-top:2px}

.fld select{
  font-family:inherit; font-size:13.5px; color:var(--text-primary); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius-input); padding:9px 32px 9px 11px;
  width:100%; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.fld select:focus{outline:2px solid var(--teal); outline-offset:-1px; background-color:var(--bg-card)}

.hidden{display:none !important}
footer.fn{margin-top:30px; padding-top:18px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--text-muted); line-height:1.65; max-width:80ch}
footer.fn b{color:var(--text-secondary); font-weight:700}
@media (max-width:640px){
  .s-card .val{font-size:26px}
  .fstep,.fdrop{grid-template-columns:104px 1fr 66px}
  .live-hero .n{font-size:36px}
}

/* ── app shell: fixed sidebar + main ── */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);align-items:start;max-width:1440px;margin:0 auto}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--border);background:var(--bg-card);display:flex;flex-direction:column;min-width:0}
.sidehead{padding:14px 14px 11px;border-bottom:1px solid var(--border-soft)}
.searchwrap{position:relative}
.search{width:100%;font-family:inherit;font-size:13.5px;color:var(--text-primary);background:var(--bg-page);
  border:1px solid var(--border);border-radius:var(--radius-input);padding:9px 11px 9px 32px}
.search::placeholder{color:var(--text-placeholder)}
.search:focus{outline:2px solid var(--teal);outline-offset:-1px;background:var(--bg-card)}
.searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.sidecount{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-placeholder);margin-top:10px}
.proplist{overflow-y:auto;flex:1;padding:7px 8px 20px}
.pitem{display:block;width:100%;text-align:left;appearance:none;border:0;background:none;cursor:pointer;font-family:inherit;
  border-radius:var(--radius-input);padding:8px 10px;margin-bottom:1px}
.pitem:hover{background:var(--bg-page)}
.pitem[aria-current="true"]{background:var(--teal-light)}
.pitem[aria-current="true"] .pn{color:var(--teal-hover)}
.pitem:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pitem .pn{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:7px;line-height:1.3}
.pitem .pd{width:7px;height:7px;border-radius:50%;flex:none}
.pitem .pm{font-size:11.5px;color:var(--text-muted);margin-top:2px;margin-left:14px;font-variant-numeric:tabular-nums}
.pitem.dim .pn{color:var(--text-placeholder)}
.sidefoot{border-top:1px solid var(--border-soft);padding:10px 12px;font-size:11.5px;color:var(--text-placeholder)}
.main{padding:22px 24px 70px;min-width:0}
.grouphead{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-placeholder);padding:11px 10px 5px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}
  .proplist{max-height:230px}
  .main{padding:18px 16px 60px}
}

/* ── stage tabs: the three lifecycle stages ── */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:16px 0 0}
.stg{appearance:none;font-family:inherit;text-align:left;cursor:pointer;background:var(--bg-card);
  border:1px solid var(--border);border-top:3px solid var(--border);border-radius:var(--radius-card);
  padding:13px 15px 14px;box-shadow:var(--shadow-card);transition:all .16s;min-width:0}
.stg:hover:not(:disabled){box-shadow:var(--shadow-pop)}
.stg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.stg:disabled{cursor:not-allowed;opacity:.55}
.stg .sk{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-placeholder);
  display:flex;align-items:center;gap:7px;margin-bottom:5px}
.stg .sname{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-placeholder);line-height:1.15}
.stg .sdate{font-size:11.5px;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.stg .smeas{font-size:11.5px;color:var(--text-placeholder);margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-soft)}
.stg[aria-pressed="true"]{box-shadow:var(--shadow-pop)}
/* 'Everything' is the default view: neutral, so the three lifecycle stages keep their colours. */
.stg.g0[aria-pressed="true"]{border-top-color:var(--navy);background:var(--bg-sunk)}
.stg.g0[aria-pressed="true"] .sname,.stg.g0[aria-pressed="true"] .sk{color:var(--navy)}
.stg.g1[aria-pressed="true"]{border-top-color:var(--teal);background:var(--teal-light)}
.stg.g1[aria-pressed="true"] .sname,.stg.g1[aria-pressed="true"] .sk{color:var(--teal-hover)}
.stg.g2[aria-pressed="true"]{border-top-color:var(--s6);background:#eeecfb}
.stg.g2[aria-pressed="true"] .sname,.stg.g2[aria-pressed="true"] .sk{color:var(--s6)}
.stg.g3[aria-pressed="true"]{border-top-color:var(--good);background:var(--good-bg)}
.stg.g3[aria-pressed="true"] .sname,.stg.g3[aria-pressed="true"] .sk{color:var(--good)}
.stg[aria-pressed="true"] .sdate,.stg[aria-pressed="true"] .smeas{color:var(--text-secondary)}
@media (max-width:1100px){.stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.stages{grid-template-columns:1fr}}

/* stage banner: unmissable "you are looking at X" */
.stagebanner{display:flex;align-items:center;gap:13px;flex-wrap:wrap;border-radius:var(--radius-card);
  padding:13px 17px;margin:16px 0 18px;border:1px solid var(--border);border-left:5px solid var(--teal);background:var(--teal-light)}
.stagebanner.g0{border-left-color:var(--navy);background:var(--bg-sunk)}
.stagebanner.g2{border-left-color:var(--s6);background:#eeecfb}
.stagebanner.g3{border-left-color:var(--good);background:var(--good-bg)}
.stagebanner .bt{font-size:15px;font-weight:800;letter-spacing:-.01em}
.stagebanner .bd{font-size:13px;color:var(--text-secondary)}
.stagebanner .bw{margin-left:auto;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}

/* date config */
.datecfg{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:14px 17px;box-shadow:var(--shadow-card)}
.datecfg .fld{display:flex;flex-direction:column;gap:5px}
.datecfg label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-label)}
.datecfg input[type=date]{font-family:inherit;font-size:13.5px;color:var(--text-primary);background:var(--bg-page);
  border:1px solid var(--border);border-radius:var(--radius-input);padding:8px 10px}
.datecfg input[type=date]:focus{outline:2px solid var(--teal);outline-offset:-1px}
.datecfg .hint{font-size:12px;color:var(--text-muted);max-width:40ch;line-height:1.45}
/* A pick-one-or-many row: a checkbox or radio beside a name and its context. */
.pickrow{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-input); margin-bottom:6px; background:var(--bg-card)}
.pickrow:hover{background:var(--bg-page)}
.pickrow:has(input:checked){border-color:var(--teal); background:var(--teal-light)}
.pickrow input{margin-top:2px; accent-color:var(--teal); width:16px; height:16px; flex:none}
.pickrow .nm{display:block; font-weight:600; font-size:13.5px}
.pickrow .sm{display:block; margin-top:2px}

.fld select{
  font-family:inherit; font-size:13.5px; color:var(--text-primary); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius-input); padding:9px 32px 9px 11px;
  width:100%; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.fld select:focus{outline:2px solid var(--teal); outline-offset:-1px; background-color:var(--bg-card)}

.hidden{display:none !important}