/* ============================================================================
   DENTURA PARTNER PORTAL — v3, on the CRM redesign rules (Jaya, 9 Oct 2026)
   TWO LAYERS: content = porcelain canvas + frosted white cards (data never on glass);
               controls = navy liquid glass (sidebar) + light liquid glass (toolbar, sheets, tab bar).
   BRAND: General Sans 400/500/550/600, navy ink, ONE teal accent, platinum on the
          brand mark, active marker, avatar and primary actions (Dentura's silver dots).
   COPY:  1–2 word verb buttons, data subtitles, ⋯ menus, alerts only when it can't be undone.
   MOTION: 110 / 220 / 420 ms + one spring; transform + opacity only; nothing loops forever.
   ========================================================================== */
:root{
  --canvas:#F2F5F8; --surface:#fff; --surface-2:#F7F9FB; --tint:#EDF2F6;
  --ink:#162239; --body:#46546A; --muted:#5B6779; --faint:#8C97A7;
  --line:rgba(22,34,57,.07); --line-2:rgba(22,34,57,.12);
  --midnight:#0F1828; --teal:#2AB9CA; --teal-ink:#0E6B77; --teal-soft:#E3F6F8;
  --plat:linear-gradient(101deg,#8B95A3 0%,#C7CED7 13%,#FFFFFF 30%,#D3D9E1 44%,#97A1AE 60%,#F1F4F7 78%,#B3BCC7 92%,#8B95A3 100%);
  --green:#177346; --green-soft:#E6F5ED; --amber:#8A5A10; --amber-soft:#FBF1DF; --red:#B4342A; --red-soft:#FBE9E7;
  --glass-blur:blur(26px) saturate(170%);
  --r-window:30px; --r-panel:22px; --r-card:18px; --r-ctl:12px;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,34,57,.04),0 10px 28px -14px rgba(22,34,57,.14);
  --shadow-float:0 1px 0 rgba(255,255,255,.6) inset,0 20px 50px -18px rgba(22,34,57,.28),0 2px 8px rgba(22,34,57,.06);
  --d1:110ms; --d2:220ms; --d3:420ms;
  --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.25,1.25,.4,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:'General Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);color:var(--ink);font-weight:400;background:#E9EEF4}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hide{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(14,107,119,.55);outline-offset:2px}

/* ============================================================== THE APP */
html,body{height:100%}body{overflow:hidden;background:var(--canvas)}
.app{position:fixed;inset:0;background:var(--canvas);overflow:hidden;overflow:clip}
.main{overflow:clip}
/* a living ground — cool light only, drifting slower than 20 s, paused when nobody can see it */
.aurora{position:absolute;inset:-10%;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);animation:drift 36s ease-in-out infinite alternate}
.aurora .a1{width:52%;height:60%;left:58%;top:-8%;background:radial-gradient(closest-side,rgba(42,185,202,.30),rgba(42,185,202,0))}
.aurora .a2{width:58%;height:62%;left:-10%;top:-16%;background:radial-gradient(closest-side,rgba(150,178,240,.34),rgba(150,178,240,0));animation-duration:44s;animation-delay:-12s}
.aurora .a3{width:50%;height:56%;left:30%;top:58%;background:radial-gradient(closest-side,rgba(42,185,202,.20),rgba(42,185,202,0));animation-duration:40s;animation-delay:-20s}
.aurora .a4{width:40%;height:44%;left:74%;top:62%;background:radial-gradient(closest-side,rgba(126,150,226,.24),rgba(126,150,226,0));animation-duration:48s;animation-delay:-6s}
.aurora .a5{width:36%;height:40%;left:6%;top:60%;background:radial-gradient(closest-side,rgba(22,34,57,.12),rgba(22,34,57,0));animation-duration:52s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,5%) scale(1.08)}66%{transform:translate(-5%,8%) scale(.95)}100%{transform:translate(4%,-6%) scale(1.05)}}
.paused *{animation-play-state:paused!important}

/* platinum rim, reused */
.rim{position:relative;isolation:isolate}
.rim::after,.mark::after,.side::after,.who .av::after,.ptab.on::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;background:var(--plat);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* ---- floating navy liquid-glass sidebar ---- */
.side{position:absolute;top:14px;left:14px;bottom:14px;width:252px;z-index:5;border-radius:var(--r-panel);color:#E9EEF7;display:flex;flex-direction:column;padding:16px 12px 12px;
  background:radial-gradient(140% 60% at 0% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(170deg,rgba(30,46,78,.84) 0%,rgba(22,34,57,.88) 55%,rgba(15,24,40,.92) 100%);
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 24px rgba(255,255,255,.04),0 30px 60px -24px rgba(8,14,26,.55)}
.side::after{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(200,210,222,.14) 30%,rgba(255,255,255,.05) 60%,rgba(42,185,202,.35))}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 16px}
.brand img{height:24px;display:block}
.brand .tag{margin-left:auto;font-size:10.5px;font-weight:550;letter-spacing:.08em;text-transform:uppercase;color:#AAB6C8;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 8px}
.nav{flex:1;overflow-y:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#8794AD;font-weight:550;padding:14px 10px 6px}
.navitem{position:relative;display:flex;align-items:center;gap:11px;width:100%;color:#C9D2E3;font-size:13.5px;font-weight:500;padding:9px 10px;border-radius:11px;text-align:left;transition:background var(--d2),color var(--d2),transform var(--d3) var(--spring)}
.navitem:active{transform:scale(.97)}
.navitem svg{width:18px;height:18px;flex:none}
.navitem:hover{background:rgba(255,255,255,.06);color:#fff}
.navitem.on{background:linear-gradient(100deg,rgba(42,185,202,.16),rgba(255,255,255,.06));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.10) inset}
.navitem.on::before{content:"";position:absolute;left:-2px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--teal)}
.navitem.on svg{color:var(--teal)}
.navlabel{flex:1;white-space:nowrap}
.count{font-size:11px;font-weight:600;color:var(--ink);background:var(--teal);border-radius:999px;padding:1px 7px}
.who{display:flex;align-items:center;gap:10px;padding:10px 8px 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px;width:100%;text-align:left;border-radius:12px}
.who:hover{background:rgba(255,255,255,.05)}
.who .av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:12px;font-weight:550;flex:none;position:relative}
.who .av::after{inset:-2px;padding:1.5px}
.who-text{font-size:12.5px;line-height:1.3;white-space:nowrap;flex:1;min-width:0}
.who-text small{display:block;color:#8794AD;font-size:11px}
.ud{width:8px;height:12px;flex:none;position:relative}
.ud::before,.ud::after{content:"";position:absolute;left:1px;width:5px;height:5px;border-left:1.5px solid #8794AD;border-top:1.5px solid #8794AD}
.ud::before{top:1px;transform:rotate(45deg)}.ud::after{bottom:1px;transform:rotate(225deg)}

/* ---- main + light liquid-glass toolbar ---- */
.main{position:absolute;top:0;bottom:0;left:280px;right:0;z-index:1;transition:transform var(--d3) var(--ease),opacity var(--d3) var(--ease);transform-origin:50% 30%}
.app.receded .main,.app.receded .side{transform:scale(.985);opacity:.82}
.side{transition:transform var(--d3) var(--ease),opacity var(--d3) var(--ease)}
.scroller{position:absolute;inset:0;overflow-y:auto;padding:96px 28px 40px 14px;scrollbar-width:thin}
.main::after{content:"";position:absolute;left:0;right:0;top:0;height:92px;pointer-events:none;z-index:3;background:linear-gradient(180deg,rgba(242,245,248,.85) 20%,rgba(242,245,248,0))}
.toolbar{position:absolute;top:14px;left:14px;right:28px;height:64px;z-index:4;display:flex;align-items:center;gap:12px;padding:0 12px 0 22px;border-radius:20px}
.liquid,.toolbar,.dsheet,.ptabs,.psearch,.popmenu,.cmdk{
  background:linear-gradient(140deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.46) 46%,rgba(255,255,255,.60) 100%);
  backdrop-filter:blur(28px) saturate(190%) brightness(1.04);-webkit-backdrop-filter:blur(28px) saturate(190%) brightness(1.04);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 1px 0 0 rgba(255,255,255,.45),inset 0 0 18px rgba(255,255,255,.35),0 18px 40px -18px rgba(22,34,57,.30),0 2px 6px rgba(22,34,57,.05)}
.toolbar::before,.dsheet::before,.ptabs::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.toolbar::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(42,185,202,0),rgba(42,185,202,.45) 30%,rgba(255,255,255,.95) 50%,rgba(42,185,202,.45) 70%,rgba(42,185,202,0))}
.toolbar>*{position:relative}
.ttl{display:flex;flex-direction:column;min-width:0}
.ttl h1{font-size:21px;font-weight:550;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl p{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tb-space{flex:1}
.search{display:flex;align-items:center;gap:8px;width:290px;height:40px;padding:0 14px;border-radius:999px;background:rgba(22,34,57,.05);color:var(--muted);font-size:13px;transition:background var(--d2)}
.search:hover{background:rgba(22,34,57,.08)}
.search svg{width:16px;height:16px}
.search kbd{margin-left:auto;font-family:inherit;font-size:11px;border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--muted)}
.iconbtn{width:40px;height:40px;border-radius:999px;background:rgba(22,34,57,.05);display:grid;place-items:center;position:relative;flex:none;transition:background var(--d2),transform var(--d3) var(--spring)}
.iconbtn:hover{background:rgba(22,34,57,.09)}
.iconbtn:active{transform:scale(.94);transition-duration:var(--d1)}
.iconbtn svg{width:18px;height:18px}
.iconbtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
.iconbtn.sm{width:32px;height:32px}.iconbtn.sm svg{width:16px;height:16px}

/* ---- buttons: Apple's four styles ----
   prominent = filled (the one main action) · bordered = grey tint fill + tint label
   plain = tint label only · destructive = red label. Capsules, no rims, no gradients.
   Busy = Apple's spoked activity indicator in place of the label; no "done" button state. */
:root{--tintc:#0E6B77;--fill:rgba(118,118,128,.12);--fill-2:rgba(118,118,128,.2);--fill-3:rgba(118,118,128,.28);--label3:rgba(60,60,67,.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:999px;border:none;background:var(--fill);color:var(--tintc);font-size:14px;font-weight:550;letter-spacing:-.005em;white-space:nowrap;position:relative;
  transition:transform var(--d3) var(--spring),background var(--d2),color var(--d2),opacity var(--d2)}
.btn:hover{background:var(--fill-2)}
.btn:active{transform:scale(.96);background:var(--fill-3);transition-duration:var(--d1)}
.btn svg{width:16px;height:16px;flex:none}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#25375F}
.btn.primary:active{background:#0F1828}
.btn.ghost{background:transparent;padding:0 10px}
.btn.ghost:hover{background:var(--fill)}
.btn.red{color:var(--red)}
.btn.sm{height:30px;padding:0 14px;font-size:13px;font-weight:600}
.btn.lg{height:50px;padding:0 24px;font-size:16px}
.btn.wide{width:100%}
.btn[disabled]{pointer-events:none;color:var(--label3)}
.btn.primary[disabled]{background:var(--fill);color:var(--label3)}
.btn.busy{pointer-events:none}
.btn.busy.primary{background:var(--ink)}
.btn.busy:not(.primary){color:var(--muted)}
.btn.settled{background:transparent;color:var(--muted);pointer-events:none}
.btn.settled svg{color:var(--green)}
/* Apple activity indicator: 8 spokes, stepped rotation */
.aspin{width:18px;height:18px;animation:aspin .9s steps(8) infinite;flex:none}
@keyframes aspin{to{transform:rotate(360deg)}}

/* ---- content primitives: frosted white cards ---- */
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.card{background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-card);border-radius:var(--r-card);position:relative}
.card.pad{padding:20px 22px}
.card h3{font-size:15px;font-weight:550;letter-spacing:-.005em}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 10px}
.big{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.tile .eyebrow{display:block}
.tile .big{margin:8px 0 2px}
.tile p{font-size:12.5px;color:var(--muted)}
.tile.amber .big{color:var(--amber)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:550;background:var(--tint);color:var(--body);white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.red{background:var(--red-soft);color:var(--red)}
.pill.teal{background:var(--teal-soft);color:var(--teal-ink)}
.pill.navy{background:var(--midnight);color:#fff}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:550;flex:none;background:var(--tint);color:var(--ink)}
.av.lg{width:48px;height:48px;font-size:15px}
.av.sm{width:28px;height:28px;font-size:11px}
.row{display:flex;align-items:center;gap:12px}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);transition:background var(--d2);width:100%;text-align:left;font-size:13.5px}
.list-row:first-child{border-top:none}
button.list-row:hover,a.list-row:hover{background:rgba(247,249,251,.9)}
button.list-row:active{background:var(--tint)}
.list-row .nm{font-size:14px;font-weight:550;display:flex;align-items:center;gap:8px}
.list-row .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .grow{flex:1;min-width:0}
.list-row .t{font-size:12px;color:var(--muted);white-space:nowrap}
.chev{width:7px;height:7px;border-right:1.6px solid var(--faint);border-top:1.6px solid var(--faint);transform:rotate(45deg);display:inline-block;flex:none;margin-left:2px}
.list-row.fresh{animation:rowGlow 1.6s var(--ease) 1}
@keyframes rowGlow{0%{background:rgba(42,185,202,.16)}100%{background:transparent}}
.list-row.leaving{animation:leave .42s var(--ease) forwards}
@keyframes leave{to{opacity:0;transform:translateX(24px);max-height:0;padding-top:0;padding-bottom:0}}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:550;padding:10px 14px;border-bottom:1px solid var(--line)}
table.t td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr{cursor:pointer;transition:background var(--d2)}
table.t tbody tr:hover td{background:rgba(247,249,251,.9)}
table.t .nm{font-weight:550}

/* segmented control — the selection slides */
.seg{display:inline-flex;position:relative;isolation:isolate;background:rgba(22,34,57,.05);border-radius:999px;padding:3px}
.seg button{font-size:12.5px;font-weight:550;color:var(--muted);padding:6px 14px;border-radius:999px;white-space:nowrap;transition:color var(--d2),transform var(--d3) var(--spring)}
.seg button:active{transform:scale(.96)}
.seg button.on{color:var(--ink)}
.seg .thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:0;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(22,34,57,.12),0 0 0 .5px rgba(22,34,57,.04);transition:transform var(--d3) var(--spring),width var(--d3) var(--spring);pointer-events:none}
.seg.wide{display:flex}.seg.wide button{flex:1}

/* grouped list rows — label left, value right, chevron = tappable */
.glabel{font-size:12px;font-weight:550;color:var(--muted);margin:18px 0 8px 2px}
.glabel:first-child{margin-top:4px}
.glist{border-radius:14px;background:rgba(247,249,251,.9);border:1px solid var(--line);overflow:hidden}
.glist>*{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 14px;border-top:1px solid var(--line);background:transparent;font:500 13.5px var(--sans);color:var(--ink);text-align:left}
.glist>*:first-child{border-top:none}
.glist>button{cursor:pointer;transition:background var(--d2)}
.glist>button:hover{background:rgba(22,34,57,.035)}
.glist>button:active{background:rgba(22,34,57,.06)}
.glist .k{color:var(--muted);font-weight:500;flex:1}
.glist .v{text-align:right;font-weight:550;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.glist .tintc{color:var(--teal-ink)}
.glist .red{color:var(--red)}
.glist svg{width:16px;height:16px;color:var(--muted)}
.glist.plain{background:transparent;border:none;border-radius:0}
.glist.plain>*{padding:0 2px}
.glist.radio>button{min-height:54px}
.glist .rd{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;transition:border-width var(--d3) var(--spring),border-color var(--d2)}
.glist.radio>button.on .rd{border:6px solid var(--ink)}
.glist .ck{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px #C3CCD6;transition:background var(--d2),box-shadow var(--d2)}
.glist .ck svg{width:13px;height:13px;color:#fff;transform:scale(0);transition:transform var(--d3) var(--spring)}
.glist .on .ck{background:var(--green);box-shadow:none}
.glist .on .ck svg{transform:scale(1)}
.glist .bounce{animation:bounceOnce .5s var(--spring) 1}
@keyframes bounceOnce{30%{transform:scale(1.18)}60%{transform:scale(.94)}}
.vfield{border:none;background:transparent;text-align:right;font:550 13.5px var(--sans);color:var(--ink);padding:4px 6px;border-radius:8px;min-width:60px;field-sizing:content}
.vfield:hover{background:rgba(22,34,57,.05)}
.vfield:focus{background:#fff;box-shadow:0 0 0 3px var(--teal-soft),inset 0 0 0 1px var(--line-2)}
.ta{width:100%;min-height:90px;border-radius:14px;border:1px solid var(--line);background:rgba(247,249,251,.9);padding:12px 14px;font:400 13.5px/1.5 var(--sans);resize:vertical}
.ta:focus{background:#fff;box-shadow:0 0 0 3px var(--teal-soft);border-color:rgba(42,185,202,.5)}
.toggle{width:51px;height:31px;border-radius:999px;background:rgba(120,120,128,.16);position:relative;flex:none;transition:background var(--d2)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform var(--d3) var(--spring),width var(--d2)}
.toggle:active::after{width:33px}
.toggle.on{background:#34C759}
.toggle.on::after{transform:translateX(20px)}
.toggle.on:active::after{transform:translateX(14px)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* Apple stepper: one rounded control split in two */
.stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:9px;overflow:hidden;flex:none}
.stepper button{width:46px;height:32px;font-size:19px;line-height:1;color:var(--ink);transition:background var(--d2)}
.stepper button:active{background:var(--fill-2)}
.stepper button+button{border-left:1px solid rgba(60,60,67,.18)}
/* selection lists: a trailing checkmark marks what's chosen (Settings pattern) */
.glist.checks>button .tk{margin-left:auto;flex:none;width:17px;height:17px;color:var(--tintc);opacity:0;transform:scale(.6);transition:opacity var(--d2),transform var(--d3) var(--spring)}
.glist.checks>button.on .tk{opacity:1;transform:none}
.glist.checks .v+.tk{margin-left:0}

/* date tile */
.dtile{width:44px;height:48px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;align-content:center;flex:none}
.dtile small{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--red);line-height:1}
.dtile b{font-size:19px;font-weight:550;line-height:1.1}

/* arc (Dentura's five dots) + day ring */
.arcm{display:inline-flex;gap:5px;align-items:center}
.arcm i{width:8px;height:8px;border-radius:50%;background:#D3DAE2}
.arcm i.done{background:var(--ink)}
.arcm i.now{background:var(--teal);box-shadow:0 0 0 3px rgba(42,185,202,.22)}
.arcm i.amb{background:#C98A1E;box-shadow:0 0 0 3px rgba(201,138,30,.2)}
.ring{width:38px;height:38px;display:block;flex:none}
.ring circle{fill:none;stroke-width:3.5}
.ring .bgc{stroke:rgba(22,34,57,.08)}
.ring .fg{stroke:var(--teal);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s var(--ease) .15s}
.ring.late .fg{stroke:#C98A1E}.ring.done .fg{stroke:var(--ink)}
.ring text{font:600 10px var(--sans);fill:var(--ink);text-anchor:middle}

/* hero tracker */
.track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:22px}
.track .line,.track .fill{position:absolute;top:13px;left:10%;height:3px;border-radius:3px}
.track .line{right:10%;background:rgba(22,34,57,.08)}
.track .fill{width:80%;transform-origin:left;transform:scaleX(var(--p,0));background:var(--ink);transition:transform 1s var(--ease) .15s}
.track .n{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.track .n i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px #D3DAE2;z-index:1;transition:background var(--d3) .5s,box-shadow var(--d3) .5s}
.track .n i svg{width:14px;height:14px;color:#fff;transform:scale(0);transition:transform var(--d3) var(--spring) .6s}
.track .n.done i{background:var(--ink);box-shadow:none}
.track .n.done i svg{transform:scale(1)}
.track .n.now i{background:var(--teal);box-shadow:0 0 0 6px rgba(42,185,202,.2);animation:nowPulse 2.4s var(--ease) 3 .8s}
@keyframes nowPulse{0%{box-shadow:0 0 0 6px rgba(42,185,202,.2)}50%{box-shadow:0 0 0 12px rgba(42,185,202,0)}100%{box-shadow:0 0 0 6px rgba(42,185,202,.2)}}
.track .n b{font-size:13px;font-weight:550}
.track .n small{font-size:11.5px;color:var(--muted);margin-top:-6px}
.track .n.later b{color:var(--muted);font-weight:500}

/* timeline */
.tl{list-style:none}
.tl li{position:relative;padding:0 0 14px 24px;font-size:13.5px}
.tl li::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:1.5px;background:rgba(22,34,57,.08)}
.tl li:last-child::before{display:none}
.tl li>i{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.tl li.now>i{background:var(--teal);box-shadow:0 0 0 4px rgba(42,185,202,.2)}
.tl li.next>i{background:#fff;box-shadow:inset 0 0 0 1.5px #C3CCD6}
.tl b{font-weight:550}
.tl small{display:block;color:var(--muted);font-size:12px}

/* thread */
.thread{display:flex;flex-direction:column;gap:8px;padding:6px 18px 12px}
.bub{max-width:78%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.45}
.bub small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.bub.in{align-self:flex-start;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px var(--line);border-radius:4px 16px 16px 16px}
.bub.out{align-self:flex-end;color:#fff;background:linear-gradient(165deg,#25375F 0%,#162239 55%,#0F1828 100%);border-radius:16px 4px 16px 16px;box-shadow:inset 0 1px 0 rgba(42,185,202,.35)}
.bub.out small{color:#AAB6C8}
.composer{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.composer input{flex:1;height:40px;border-radius:999px;border:none;background:rgba(22,34,57,.05);padding:0 16px;font-size:13.5px}
.composer input:focus{background:#fff;box-shadow:0 0 0 3px var(--teal-soft)}

/* viewer */
.viewer{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#FFFFFF 0%,#EEF2F6 55%,#DCE3EA 100%);box-shadow:inset 0 0 0 1px var(--line)}
.viewer canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.viewer canvas:active{cursor:grabbing}
.viewer .vt{position:absolute;left:10px;top:10px;z-index:2}
.viewer .vt.seg{background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.viewer .vm{position:absolute;left:12px;bottom:10px;font-size:11.5px;color:var(--muted);z-index:2}

/* board lanes */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.lane{border-radius:var(--r-card);padding:10px;background:rgba(255,255,255,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);min-height:300px}
.lane-h{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-size:13px;font-weight:550}
.lane-h span{color:var(--muted);font-weight:500;display:inline-block}
.kcard{display:block;width:100%;text-align:left;padding:12px 13px;margin-bottom:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 4px 14px -10px rgba(22,34,57,.3);transition:transform var(--d3) var(--spring),box-shadow var(--d2)}
.kcard:hover{box-shadow:0 0 0 1px var(--line-2),0 8px 20px -12px rgba(22,34,57,.4)}
.kcard:active{transform:scale(.98);transition-duration:var(--d1)}
.kcard b{display:block;font-size:13.5px;font-weight:550}
.kcard .m{font-size:12px;color:var(--muted);margin-top:1px}
.kcard .f{display:flex;justify-content:space-between;align-items:center;margin-top:9px}
.kcard.late{box-shadow:0 0 0 1.5px rgba(201,138,30,.45),0 6px 18px -12px rgba(201,138,30,.6);background:#FFFBF3}
.kcard.landed{animation:landed .5s var(--spring) 1}
@keyframes landed{0%{transform:scale(1.05)}100%{transform:none}}
.bump{animation:bounceOnce .5s var(--spring) 1}

/* bars */
.bars{display:flex;flex-direction:column;gap:10px;padding:4px 22px 20px}
.bar{display:grid;grid-template-columns:104px 1fr 26px;align-items:center;gap:12px;font-size:13px}
.bar span:first-child{color:var(--muted)}
.bar .tr{height:8px;border-radius:8px;background:rgba(22,34,57,.06);overflow:hidden}
.bar .tr i{display:block;height:100%;width:100%;border-radius:8px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.bar .tr i.amb{background:#C98A1E}
.bar b{font-weight:550;text-align:right}

/* rolling numbers */
.roll{display:inline-flex;overflow:hidden;height:1.12em;line-height:1.12;vertical-align:bottom}
.roll>span{display:flex;flex-direction:column;transition:transform .8s var(--spring)}

/* view transition: settle in, cascade */
.view{display:none}
.view.on{display:block;animation:settle .42s var(--ease-out) both}
.view.on .cascade>*{animation:rise .5s var(--ease-out) both}
.view.on .cascade>*:nth-child(2){animation-delay:.04s}.view.on .cascade>*:nth-child(3){animation-delay:.08s}
.view.on .cascade>*:nth-child(4){animation-delay:.12s}.view.on .cascade>*:nth-child(5){animation-delay:.16s}
.view.on .cascade>*:nth-child(n+6){animation-delay:.2s}
@keyframes settle{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}}

/* split view (review queue) */
.split{display:grid;grid-template-columns:330px minmax(0,1fr) 340px;gap:16px;align-items:start}
.split .listcol{position:sticky;top:0}
.split .lr{position:relative}
.split .lr.on{background:var(--tint)}
.split .lr.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ink)}
.floathead{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:16px}
.floathead .nm{font-weight:550;font-size:14px}
.floathead .meta{font-size:12px;color:var(--muted)}
.floathead .nm,.floathead .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;display:flex;gap:6px;padding:6px;border-radius:999px}
.dock.seg{background:linear-gradient(140deg,rgba(255,255,255,.82),rgba(255,255,255,.55));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 #fff,0 10px 24px -12px rgba(22,34,57,.35)}

/* ---- sheets (desktop: right; phone: bottom), alerts, menus, toast, ⌘K, tooltip ---- */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(15,24,40,.26);animation:fadein var(--d2) ease both}
.scrim.closing,.alertwrap.closing,.cmdk-wrap.closing{animation:fadeout var(--d2) ease forwards}
@keyframes fadeout{to{opacity:0}}
.dsheet{position:absolute;top:14px;right:14px;bottom:14px;width:460px;z-index:21;border-radius:var(--r-panel);display:flex;flex-direction:column;animation:slidein var(--d3) var(--spring) both;background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.84))}
.dsheet.wide{width:560px}
.dsheet.closing{animation:slideout .32s var(--ease) forwards}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideout{to{transform:translateX(48px);opacity:0}}
.dsheet>*{position:relative}
/* sheet bar: close on the left, title in the middle, the one action on the right */
.sh-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 12px 10px}
.sh-h .ttl{align-items:center;text-align:center;max-width:280px}
.sh-h .ttl h1{font-size:16px;font-weight:600}
.sh-h .ttl p{font-size:12px}
.sh-h .l{display:flex;justify-content:flex-start}.sh-h .r{display:flex;justify-content:flex-end;gap:6px}
.sh-h .btn{height:34px;padding:0 16px}
.sh-b{flex:1;overflow-y:auto;padding:4px 22px 18px}
.sh-f{display:flex;align-items:center;gap:8px;padding:12px 22px 14px;border-top:1px solid var(--line)}
.sh-f .price{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.sh-f .price small{font-size:11px;color:var(--muted);font-weight:550;letter-spacing:.06em;text-transform:uppercase}
.sh-f .price b{font-size:21px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grabber{display:none}
.sv{display:none}.sv.on{display:block;animation:rise var(--d3) var(--ease-out) both}
.upl{position:relative;overflow:hidden}
.upl .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);transition:width 1s var(--ease)}
.wa{background:#EFEAE2;border-radius:14px;padding:12px}
.wa .bb{background:#fff;border-radius:4px 12px 12px 12px;padding:9px 12px;font-size:13px;line-height:1.45;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa .bb small{display:block;text-align:right;font-size:10.5px;color:#8696A0;margin-top:3px}
.note{border-radius:14px;padding:12px 14px;background:var(--teal-soft);font-size:13.5px;line-height:1.45}
.note .eyebrow{display:block;color:var(--teal-ink);margin-bottom:3px}

.popmenu{position:absolute;z-index:60;min-width:220px;padding:6px;border-radius:16px;animation:menuin var(--d2) var(--spring) both;transform-origin:top right;background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.82))}
@keyframes menuin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.popmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;font:500 13.5px var(--sans);color:var(--ink);text-align:left}
.popmenu button:hover{background:rgba(22,34,57,.06)}
.popmenu button svg{width:16px;height:16px;color:var(--muted)}
.popmenu button.red,.popmenu button.red svg{color:var(--red)}
.popmenu .ck{width:16px;text-align:center;color:var(--teal-ink);font-weight:600}
.popmenu hr{border:none;border-top:1px solid var(--line);margin:5px 8px}
.popmenu .hd{font-size:11px;font-weight:550;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.popmenu .nt{display:flex;gap:10px;padding:8px 10px;font-size:13px;line-height:1.35;border-radius:10px}
.popmenu .nt small{display:block;color:var(--muted);font-size:11.5px}
.popmenu .nt i{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:5px;flex:none}
.popmenu .nt.read i{background:transparent}
.alertwrap{position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:rgba(15,24,40,.28);animation:fadein var(--d2) ease both}
.alertbox{width:300px;border-radius:30px;padding:6px 14px 14px;background:rgba(255,255,255,.92);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-float);text-align:center;overflow:hidden;animation:menuin .25s var(--spring) both}
.alertbox .t{font-weight:600;font-size:16px;padding:16px 8px 4px}
.alertbox .m{font-size:13.5px;color:var(--body);padding:0 8px 16px;line-height:1.4}
.alertbox .b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.alertbox .b button{height:44px;border-radius:999px;background:var(--fill);font:550 15px var(--sans);color:var(--ink);transition:background var(--d2),transform var(--d3) var(--spring)}
.alertbox .b button:active{transform:scale(.96)}
.alertbox .b button.ok{background:var(--ink);color:#fff}
.alertbox .b button.red{color:var(--red)}
.toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;background:rgba(15,24,40,.92);color:#fff;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-float);animation:menuin .3s var(--spring) both;transition:opacity .3s,transform .3s;white-space:nowrap}
.toast svg{width:16px;height:16px;color:#7EE2A8}
.toast button{background:rgba(255,255,255,.12);color:#fff;font:550 13px var(--sans);height:30px;padding:0 12px;border-radius:999px}
.toast.solo{padding-right:16px}
.toast.out{opacity:0;transform:translateX(-50%) translateY(8px)}
.gtip{position:absolute;z-index:95;padding:6px 10px;border-radius:10px;background:rgba(15,24,40,.9);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-float);animation:tipIn .18s var(--ease) both}
@keyframes tipIn{from{opacity:0;transform:translateY(3px)}}
.cmdk-wrap{position:absolute;inset:0;z-index:85;background:rgba(15,24,40,.22);display:grid;justify-items:center;align-items:start;padding-top:110px;animation:fadein var(--d2) ease both}
.cmdk{width:600px;max-width:calc(100% - 24px);border-radius:22px;overflow:hidden;animation:menuin .28s var(--spring) both;transform-origin:top center;background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,255,255,.86))}
.cmdk .q{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmdk .q svg{width:18px;height:18px;color:var(--muted)}
.cmdk .q input{flex:1;border:none;outline:none;background:transparent;font:400 16px var(--sans)}
.cmdk .res{max-height:360px;overflow:auto;padding:6px}
.cmdk .res .hd{font-size:11px;font-weight:550;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.cmdk .res button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:12px;font-size:14px;text-align:left}
.cmdk .res button small{color:var(--muted);margin-left:auto;font-size:12px}
.cmdk .res button.on{background:var(--midnight);color:#fff}
.cmdk .res button.on small{color:#AAB6C8}

/* public join page: no shell */
.app.public .side,.app.public .toolbar,.app.public .main::after,.app.public .ptabs,.app.public .psearch{display:none}
.app.public .main{left:0}
.app.public .scroller{padding:40px 20px}
.joinwrap{max-width:560px;margin:0 auto}
.joinwrap .logo{height:30px;display:block;margin:0 auto 22px}
.joinwrap h1{font-size:34px;font-weight:500;letter-spacing:-.02em;text-align:center}
.joinwrap h1 em{font-style:normal;color:var(--teal)}
.joinwrap>p{text-align:center;color:var(--muted);margin:6px 0 20px;font-size:14px}

/* phone tab bar (hidden on desktop) */
.ptabs,.psearch{display:none}

/* ============================================================== PHONE */
@media (max-width:760px){
  .side{display:none}
  .main{left:0}
  .main::after{display:none}
  .scroller{padding:176px 14px 120px}
  .toolbar{top:0;left:0;right:0;height:auto;min-height:120px;padding:50px 16px 12px;border-radius:0 0 22px 22px;flex-wrap:wrap;align-content:flex-end;row-gap:4px;gap:8px;background:transparent;box-shadow:none;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:min-height var(--d3) var(--ease),padding var(--d3) var(--ease),background var(--d2)}
  .toolbar .ttl{order:9;flex-basis:100%}
  .toolbar.compact{min-height:0;align-content:center}
  .toolbar.compact .ttl{order:0;flex:1 1 0;flex-basis:0}
  .toolbar.compact .tb-space{display:none}
  .toolbar:has([data-back]) [data-menu=bell]{display:none}
  .toolbar::before,.toolbar::after{opacity:0;transition:opacity var(--d2)}
  .toolbar .ttl h1{font-size:30px;font-weight:550;letter-spacing:-.02em;transition:font-size var(--d3) var(--ease)}
  .toolbar.compact{padding:50px 16px 10px;background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.66));backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 10px 30px -18px rgba(22,34,57,.35)}
  .toolbar.compact::after{opacity:1}
  .toolbar.compact .ttl h1{font-size:17px}
  .toolbar.compact .ttl p{display:none}
  .search,.toolbar .seg,.toolbar .pill{display:none}
  .toolbar .btn.primary:has(svg) .lbl{display:none}
  .toolbar .btn.primary:has(svg){width:40px;padding:0}
  .grid{grid-template-columns:1fr!important}
  .grid.k4{grid-template-columns:1fr 1fr!important}
  .big{font-size:28px}
  .split{grid-template-columns:1fr}
  .split .viewcol,.split .infocol{display:none}
  .split.open .listcol{display:none}
  .split.open .viewcol,.split.open .infocol{display:block}
  .board{grid-auto-columns:78%}
  .dsheet,.dsheet.wide{top:auto;left:0;right:0;bottom:0;width:auto;max-height:90%;border-radius:28px 28px 0 0;animation:sheetup var(--d3) var(--ease) both}
  .dsheet.closing{animation:sheetdown .32s var(--ease) forwards}
  @keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
  @keyframes sheetdown{to{transform:translateY(100%)}}
  .grabber{display:block;width:36px;height:5px;border-radius:5px;background:rgba(22,34,57,.18);margin:8px auto 0}
  .sh-f{padding-bottom:28px}
  .ptabs{display:flex;position:absolute;left:14px;bottom:22px;z-index:10;padding:5px;border-radius:999px;gap:2px}
  .ptabs::before{border-radius:999px}
  .ptab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;min-width:64px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:550;color:var(--muted);transition:background var(--d2),color var(--d2),transform var(--d3) var(--spring)}
  .ptab svg{width:22px;height:22px}
  .ptab:active{transform:scale(.93)}
  .ptab.on{color:var(--ink);background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 2px 8px -2px rgba(22,34,57,.18)}
  .ptab.on svg{color:var(--teal-ink)}
  .ptab .count{position:absolute;top:4px;right:12px;font-size:9.5px;padding:0 5px}
  .psearch{display:grid;place-items:center;position:absolute;right:14px;bottom:22px;z-index:10;width:62px;height:62px;border-radius:50%}
  .psearch svg{width:22px;height:22px}
  .toast{bottom:100px}
  .hero-grid{grid-template-columns:1fr!important}
  .track .n small{display:none}
  .phone-hide{display:none!important}
}

/* accessibility: motion is optional; glass has a solid fallback */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .aurora i{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .liquid,.toolbar,.dsheet,.ptabs,.psearch,.popmenu,.cmdk,.card,.lane{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}
  .side{background:#162239!important;backdrop-filter:none!important}
}
.still *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}