/* ==========================================================
   SMP Labs · Direction A "Best practice" · v2
   Brand layer is isolated at the top so Spot My Photos colors
   and logo can be swapped in one place.
   Type floor: 12px everywhere. Tabular numerals on all numbers.
   ========================================================== */
@font-face{font-family:"Inter";src:url("fonts/Inter.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root{
  /* ---- BRAND ---- */
  --brand-name:"SMP"; --brand-name-accent:"Labs";
  --brand-navy-900:#0A1826; --brand-navy-800:#10233A; --brand-navy-700:#1A3150;
  --brand-teal-400:#2CC4D3; --brand-teal-500:#14A3B3; --brand-teal-600:#0B7F8C; --brand-teal-700:#086570;
  --brand-teal-50:#E8F7F9; --brand-teal-100:#CDEEF2;
  --brand-logo-mark:url("covers/logo-mark.svg");

  --gray-0:#FFFFFF; --gray-25:#FBFCFD; --gray-50:#F5F7FA; --gray-100:#EDF1F5;
  --gray-200:#DFE5EC; --gray-300:#C9D2DC; --gray-400:#94A1B2; --gray-500:#5B6B80;
  --gray-600:#4A5668; --gray-700:#334155; --gray-800:#1E293B; --gray-900:#0F172A;

  --bg-app:var(--gray-50); --bg-surface:#fff; --bg-subtle:var(--gray-25); --bg-muted:var(--gray-100);
  --border:var(--gray-200); --border-strong:var(--gray-300);
  --text:var(--gray-900); --text-2:var(--gray-600); --text-3:var(--gray-500);
  --text-on-dark:#E6EEF6; --text-on-dark-2:#A9B8CA;
  --accent:var(--brand-teal-600); --accent-hover:var(--brand-teal-700); --accent-soft:var(--brand-teal-50);
  --focus:#2CC4D3;

  --success-600:#15803D; --success-700:#166534; --success-50:#ECFDF3; --success-200:#ABEFC6;
  --warning-700:#B54708; --warning-800:#93370D; --warning-50:#FFF7ED; --warning-200:#FED7AA;
  --danger-600:#C0262D; --danger-700:#A11D23; --danger-50:#FEF2F2; --danger-200:#FECACA;
  --info-700:#1D4ED8; --info-50:#EFF6FF; --info-200:#C7D7FE;
  --violet-700:#6D28D9; --violet-50:#F5F3FF; --violet-200:#DDD6FE;

  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px;
  --lh-tight:1.25; --lh:1.5;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(15,23,42,.06);
  --sh-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --sh-md:0 4px 12px -2px rgba(15,23,42,.10),0 2px 4px -2px rgba(15,23,42,.06);
  --sh-lg:0 16px 40px -8px rgba(15,23,42,.22),0 4px 12px -4px rgba(15,23,42,.10);
  --sh-xl:0 24px 64px -12px rgba(15,23,42,.35);
  --ring:0 0 0 3px rgba(44,196,211,.5);
  --sidebar-w:240px; --content-max:1480px; --gutter:clamp(16px,2.2vw,36px);
  --topbar-h:52px; --ribbon-h:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh);color:var(--text);background:var(--bg-app);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
img,svg{display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.num,table,.stat-v,.kpi .v,.count,.n{font-variant-numeric:tabular-nums}
.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:14px;height:14px} .icon-lg{width:20px;height:20px} .icon-xl{width:28px;height:28px}
.muted{color:var(--text-3)} .t2{color:var(--text-2)} .strong{font-weight:600}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--sh-lg)}
.skip:focus{top:8px}
[hidden]{display:none!important}
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-2)}
.push{margin-left:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-5);align-items:start}
.split-l{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--sp-5);align-items:start}

/* ---------- Env ribbon ---------- */
.env-ribbon{position:sticky;top:0;z-index:60;height:var(--ribbon-h);display:flex;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(135deg,#FDE7C2 0 10px,#FCE0AE 10px 20px);color:#7A2E0B;font-size:12px;font-weight:600;border-bottom:1px solid #F5C77E}
.env-ribbon span{font-weight:400}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--ribbon-h))}
.sidebar{position:sticky;top:var(--ribbon-h);height:calc(100vh - var(--ribbon-h));background:var(--brand-navy-900);color:var(--text-on-dark);
  display:flex;flex-direction:column;padding:14px 12px 12px;z-index:30;overflow-y:auto;scrollbar-width:none}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--brand-logo-mark) center/cover no-repeat;flex:none}
.brand-word{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1}
.brand-word::before{content:var(--brand-name)}
.brand-word::after{content:var(--brand-name-accent);color:var(--brand-teal-400)}
.side-search{display:flex;align-items:center;gap:8px;margin:0 2px 12px;padding:0 10px;height:36px;border-radius:var(--r-md);
  background:var(--brand-navy-800);border:1px solid var(--brand-navy-700);color:var(--text-on-dark-2);font-size:var(--fs-sm);cursor:pointer;width:calc(100% - 4px)}
.side-search:hover{border-color:#28456A;color:var(--text-on-dark)}
.kbd{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:12px;font-weight:500;padding:0 6px;height:20px;border-radius:5px;border:1px solid var(--brand-navy-700);color:var(--text-on-dark-2);font-family:var(--font)}
.kbd.light{border-color:var(--border);color:var(--text-3);background:var(--bg-subtle)}
.nav-label{font-size:12px;font-weight:600;color:#8FA3BA;padding:14px 10px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:0 10px;height:36px;border-radius:var(--r-md);color:var(--text-on-dark-2);
  font-weight:500;font-size:var(--fs-base);text-decoration:none;transition:background .15s var(--ease),color .15s}
.nav a:hover{background:var(--brand-navy-800);color:#fff}
.nav a[aria-current="page"]{background:linear-gradient(90deg,rgba(20,163,179,.24),rgba(20,163,179,.08));color:#fff}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-teal-400)}
.nav a[aria-current="page"] .icon{color:var(--brand-teal-400)}
.nav .count{margin-left:auto;font-size:12px;color:var(--text-on-dark-2)}
.nav .attn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#FDBA74;font-weight:600}
.nav .attn::before{content:"";width:7px;height:7px;border-radius:50%;background:#FB923C}
.nav-spacer{flex:1;min-height:16px}
.sidebar-foot{position:relative;padding-top:8px;border-top:1px solid var(--brand-navy-700);margin-top:8px}
.switcher{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-lg);border:1px solid var(--brand-navy-700);
  background:var(--brand-navy-800);cursor:pointer;text-align:left;color:var(--text-on-dark);margin-top:8px}
.switcher:hover{border-color:#2A4870;background:#132A45}
.avatar{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;flex:none;background:var(--brand-teal-600)}
.avatar.sm{width:24px;height:24px;border-radius:6px;font-size:12px}
.avatar.lg{width:48px;height:48px;border-radius:12px;font-size:17px}
.avatar.round{border-radius:50%}
.avatar.neutral{background:var(--bg-muted);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border)}
.switcher .who{min-width:0;flex:1}
.switcher .who b{display:block;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switcher .who span{display:block;font-size:12px;color:var(--text-on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Popovers / menus ---------- */
.menu{position:absolute;z-index:80;min-width:240px;background:var(--bg-surface);color:var(--text);border-radius:var(--r-lg);box-shadow:var(--sh-lg);border:1px solid var(--border);padding:6px;display:none}
.menu.open{display:block;animation:pop .14s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu.up{bottom:calc(100% + 8px);left:0;right:0}
.menu.right{right:0;top:calc(100% + 6px)}
.menu.left{left:0;top:calc(100% + 6px)}
.menu-label{font-size:12px;color:var(--text-3);font-weight:600;padding:8px 10px 4px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;min-height:36px;border-radius:var(--r-md);border:0;background:none;cursor:pointer;text-align:left;font-size:var(--fs-sm);color:var(--text);text-decoration:none}
.menu-item:hover,.menu-item:focus-visible{background:var(--bg-muted);text-decoration:none}
.menu-item .icon{color:var(--text-3)}
.menu-item .meta{display:block;color:var(--text-3);font-size:12px;line-height:1.35}
.menu-item .end{margin-left:auto;color:var(--text-3);font-size:12px;display:flex;align-items:center;gap:6px}
.menu-item .check{margin-left:auto;color:var(--accent)}
.menu-item.danger{color:var(--danger-600)} .menu-item.danger .icon{color:var(--danger-600)}
.menu-item[aria-checked="true"]{font-weight:600}
.menu-sep{height:1px;background:var(--border);margin:6px 4px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
.menu.wide{min-width:560px}
.menu .seg{width:100%}
.menu .seg button{flex:1;justify-content:center}
.menu-row{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:var(--fs-sm)}

/* ---------- Main + topbar ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:var(--ribbon-h);z-index:40;height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--gutter);
  background:rgba(245,247,250,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);min-width:0}
.crumbs a{color:var(--text-2)} .crumbs a:hover{color:var(--text)}
.crumbs .sep{color:var(--gray-400)}
.crumbs [aria-current]{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:2px}
.tb-btn{position:relative;width:36px;height:36px;border-radius:var(--r-md);border:0;background:none;display:grid;place-items:center;color:var(--text-2);cursor:pointer}
.tb-btn:hover{background:var(--bg-muted);color:var(--text)}
.tb-btn .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger-600);box-shadow:0 0 0 2px var(--bg-app)}
.tb-btn.txt{width:auto;padding:0 10px;display:inline-flex;gap:6px;font-size:var(--fs-sm);font-weight:500}
.mobile-bar{display:none}
.page{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--sp-6) var(--gutter) var(--sp-12)}
.page.tight{padding-top:var(--sp-4)}
.page.narrow{max-width:1080px}
.page-head{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:700}
.page-head p{margin-top:6px;color:var(--text-2);font-size:var(--fs-md);max-width:720px}
.page-head .actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:6px}
.section-title{display:flex;align-items:baseline;gap:10px;margin:var(--sp-8) 0 var(--sp-3)}
.section-title:first-child{margin-top:0}
.section-title h2{font-size:var(--fs-lg);font-weight:600}
.section-title .sub{color:var(--text-3);font-size:var(--fs-sm)}
.section-title .push{font-size:var(--fs-sm)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-md);
  border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text);font-weight:500;font-size:var(--fs-base);cursor:pointer;
  box-shadow:var(--sh-xs);white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--bg-subtle);border-color:var(--gray-400);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(8,101,112,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-dark{background:var(--gray-900);border-color:var(--gray-900);color:#fff}
.btn-dark:hover{background:var(--gray-800)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-muted);border-color:transparent;color:var(--text)}
.btn-danger{background:var(--danger-600);border-color:var(--danger-600);color:#fff}
.btn-danger:hover{background:var(--danger-700)}
.btn-danger-soft{color:var(--danger-600);border-color:var(--danger-200)}
.btn-danger-soft:hover{background:var(--danger-50);border-color:#FCA5A5}
.btn-warning{background:#fff;border-color:#FDBA74;color:var(--warning-800)}
.btn-warning:hover{background:#FFEDD5}
.btn-sm{height:32px;padding:0 10px;font-size:var(--fs-sm);gap:6px}
.btn-xs{height:28px;padding:0 9px;font-size:12px;gap:5px;border-radius:7px}
.btn-lg{height:44px;padding:0 18px;font-size:var(--fs-md)}
.btn-icon{width:36px;padding:0}
.btn-icon.btn-sm{width:32px} .btn-icon.btn-xs{width:28px}
.btn-block{width:100%}
.link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:500;font-size:inherit}
.link:hover{text-decoration:underline;text-underline-offset:2px}
.link.danger{color:var(--danger-600)}
.btn .chev{margin-left:-2px;color:var(--text-3)}
.btn-primary .chev{color:rgba(255,255,255,.8)}

/* ---------- Form controls ---------- */
.input{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--border-strong);
  background:var(--bg-surface);color:var(--text-3);box-shadow:var(--sh-xs);min-width:0}
.input:focus-within{border-color:var(--brand-teal-500);box-shadow:var(--ring)}
.input input,.input select{border:0;outline:0;background:none;font:inherit;color:var(--text);width:100%;min-width:0;box-shadow:none}
.input input::placeholder{color:var(--text-3)}
.input .kbd{border-color:var(--border);color:var(--text-3)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field .lbl{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.field .opt{font-weight:400;color:var(--text-3)}
.field .help{font-size:var(--fs-sm);color:var(--text-3);line-height:1.45}
.field .err{font-size:var(--fs-sm);color:var(--danger-600);display:flex;gap:6px;align-items:center}
.ctl{height:38px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--bg-surface);font:inherit;color:var(--text);width:100%;box-shadow:var(--sh-xs);min-width:0}
.ctl:focus{outline:0;border-color:var(--brand-teal-500);box-shadow:var(--ring)}
select.ctl{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px}
textarea.ctl{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
.ctl.invalid{border-color:var(--danger-600)}
.ctl-group{display:flex}
.ctl-group .ctl{border-radius:var(--r-md) 0 0 var(--r-md)}
.ctl-group .btn{border-radius:0 var(--r-md) var(--r-md) 0;margin-left:-1px;height:38px}
.ctl-prefix{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-xs);height:38px;overflow:hidden}
.ctl-prefix span{padding:0 10px;color:var(--text-3);background:var(--bg-subtle);height:100%;display:grid;place-items:center;border-right:1px solid var(--border);font-size:var(--fs-sm)}
.ctl-prefix input{border:0;outline:0;flex:1;height:100%;padding:0 10px;font:inherit;min-width:0}
.ctl-prefix:focus-within{border-color:var(--brand-teal-500);box-shadow:var(--ring)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.form-actions{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-5)}

/* switch: real checkbox, visually styled */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);user-select:none}
.switch input{position:absolute;opacity:0;width:36px;height:20px;margin:0;cursor:pointer}
.switch .track{width:36px;height:20px;border-radius:99px;background:var(--gray-300);position:relative;transition:background .15s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);transition:transform .15s var(--ease)}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px)}
.switch input:focus-visible+.track{box-shadow:var(--ring)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check b{font-weight:600;display:block}
.check span{color:var(--text-3)}
.radio-cards{display:grid;gap:var(--sp-2)}
.radio-cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .radio-cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rcard{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:#fff;cursor:pointer}
.rcard input{margin:3px 0 0;accent-color:var(--accent);flex:none}
.rcard b{display:block;font-size:var(--fs-sm);font-weight:600}
.rcard span{display:block;font-size:var(--fs-sm);color:var(--text-3);line-height:1.4}
.rcard:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.rcard .rec{position:absolute;top:10px;right:12px}

.seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:var(--bg-muted);border:1px solid var(--border);gap:2px;max-width:100%}
.seg button,.seg a{height:28px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--text-2);font-size:var(--fs-sm);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.seg button:hover,.seg a:hover{color:var(--text);text-decoration:none}
.seg [aria-pressed="true"],.seg [aria-current="page"],.seg [aria-checked="true"]{background:var(--bg-surface);color:var(--text);box-shadow:var(--sh-sm)}
.seg .n{color:var(--text-3);font-size:12px}
.seg.icons button{width:30px;padding:0;justify-content:center}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-full);font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1;vertical-align:middle}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-live{background:var(--success-50);color:var(--success-700);border-color:var(--success-200)}
.badge-live .dot{box-shadow:0 0 0 3px rgba(21,128,61,.18);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(21,128,61,.35)}50%{box-shadow:0 0 0 4px rgba(21,128,61,0)}}
.badge-ok{background:var(--success-50);color:var(--success-700);border-color:var(--success-200)}
.badge-upcoming,.badge-info{background:var(--info-50);color:var(--info-700);border-color:var(--info-200)}
.badge-past,.badge-neutral,.badge-muted{background:var(--bg-muted);color:var(--text-2);border-color:var(--border)}
.badge-warn{background:var(--warning-50);color:var(--warning-700);border-color:var(--warning-200)}
.badge-danger{background:var(--danger-50);color:var(--danger-600);border-color:var(--danger-200)}
.badge-test{background:var(--violet-50);color:var(--violet-700);border-color:var(--violet-200)}
.badge-ongoing{background:#F0F9FF;color:#075985;border-color:#BAE6FD}
.badge-on-img{background:rgba(255,255,255,.95);box-shadow:var(--sh-sm)}
.badge-admin{background:var(--violet-50);color:var(--violet-700);border-color:var(--violet-200)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.status.ok{color:var(--success-700)} .status.warn{color:var(--warning-700)} .status.danger{color:var(--danger-600)} .status.info{color:var(--info-700)} .status.muted{color:var(--text-3)}
.status.muted::before{background:var(--gray-300)}

/* ---------- Cards ---------- */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);min-width:0}
.card-pad{padding:var(--sp-5)}
.card-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.card-head h2,.card-head h3{font-size:var(--fs-md);font-weight:600}
.card-head p{color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
.card-head .push{display:flex;gap:8px;align-items:center}
.card-head.flat{border-bottom:0;padding-bottom:0}
.card-body{padding:var(--sp-5)}
.card-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-3)}
.card.hl{border-color:var(--brand-teal-100);background:linear-gradient(180deg,#F3FBFC,#fff)}
.list{list-style:none;margin:0;padding:0}
.list>li{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--sp-5);border-bottom:1px solid var(--border);min-height:56px}
.list>li:last-child{border-bottom:0}
.list .li-main{min-width:0;flex:1}
.list .li-main b{display:block;font-weight:600;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .li-main span{display:block;font-size:var(--fs-sm);color:var(--text-3)}
.list .li-end{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.ico-tile{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.ico-tile.lg{width:44px;height:44px;border-radius:12px}
.ico-tile.warn{background:var(--warning-50);color:var(--warning-700)}
.ico-tile.danger{background:var(--danger-50);color:var(--danger-600)}
.ico-tile.ok{background:var(--success-50);color:var(--success-600)}
.ico-tile.violet{background:var(--violet-50);color:var(--violet-700)}
.ico-tile.gray{background:var(--bg-muted);color:var(--text-2)}
.dl{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px 16px;font-size:var(--fs-sm);margin:0}
.dl dt{color:var(--text-3)} .dl dd{margin:0;color:var(--text)}

/* ---------- Banners ---------- */
.banner{display:flex;align-items:center;gap:var(--sp-3);padding:8px 8px 8px 14px;border-radius:var(--r-lg);border:1px solid var(--warning-200);background:var(--warning-50);color:var(--warning-800);font-size:var(--fs-sm);min-height:44px}
.banner>.icon{color:var(--warning-700)}
.banner b{font-weight:600}
.banner .msg{flex:1;min-width:0}
.banner .acts{display:flex;gap:6px;flex:none}
.banner.info{border-color:var(--brand-teal-100);background:var(--accent-soft);color:#064E56} .banner.info>.icon{color:var(--accent)}
.banner.danger{border-color:var(--danger-200);background:var(--danger-50);color:#7F1D1D} .banner.danger>.icon{color:var(--danger-600)}
.banner.ok{border-color:var(--success-200);background:var(--success-50);color:#14532D} .banner.ok>.icon{color:var(--success-600)}
.banner.neutral{border-color:var(--border);background:var(--bg-surface);color:var(--text-2)} .banner.neutral>.icon{color:var(--text-3)}
.banner.admin{border-color:var(--violet-200);background:var(--violet-50);color:#4C1D95} .banner.admin>.icon{color:var(--violet-700)}
.tip{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);background:var(--bg-subtle);border:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-2)}
.tip>.icon{color:var(--accent);margin-top:2px}
.tip .x{margin-left:auto}

/* ---------- Tabs (sibling pages = underline) ---------- */
.tabs-wrap{position:relative;border-bottom:1px solid var(--border)}
.tabs-wrap::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:40px;background:linear-gradient(90deg,rgba(245,247,250,0),var(--bg-app));pointer-events:none;opacity:0}
.tabs-wrap.overflow::after{opacity:1}
.card .tabs-wrap::after{background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
.tabs{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 12px;height:44px;border:0;background:none;cursor:pointer;
  color:var(--text-2);font-weight:500;font-size:var(--fs-base);white-space:nowrap;text-decoration:none;flex:none}
.tab:hover{color:var(--text);text-decoration:none}
.tab[aria-current="page"],.tab[aria-selected="true"]{color:var(--text);font-weight:600}
.tab[aria-current="page"]::after,.tab[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tab .count{font-size:12px;font-weight:600;padding:1px 7px;border-radius:var(--r-full);background:var(--bg-muted);color:var(--text-2)}
.tab[aria-current="page"] .count{background:var(--accent-soft);color:var(--brand-teal-700)}
.tab .count.warn{background:var(--warning-50);color:var(--warning-700);box-shadow:inset 0 0 0 1px var(--warning-200)}
.tab .icon{color:var(--text-3)}
.tab[aria-current="page"] .icon{color:var(--accent)}

/* ---------- Chips / filters ---------- */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--bg-surface);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;text-decoration:none;flex:none}
.chip:hover{border-color:var(--gray-400);color:var(--text);text-decoration:none}
.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--gray-900);border-color:var(--gray-900);color:#fff}
.chip .n{color:var(--text-3);font-size:12px}
.chip[aria-pressed="true"] .n,.chip[aria-current="true"] .n{color:#CBD5E1}
.chip .icon{width:14px;height:14px;color:var(--text-3)}
.chip[aria-pressed="true"] .icon,.chip[aria-current="true"] .icon{color:#CBD5E1}
.chip.add{border-style:dashed;color:var(--accent)} .chip.add .icon{color:var(--accent)}
.chip.warn{border-color:var(--warning-200);background:var(--warning-50);color:var(--warning-800)}
.chip.warn .n{color:var(--warning-700)}
.rail{position:relative;min-width:0;flex:1}
.rail .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px;mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.rail .chips::-webkit-scrollbar{display:none}
.filterbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.filterbar .input{width:320px}
.filter-btn .badge-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:600}

/* ---------- Tables (stack into row cards under 900px) ---------- */
.table-card{overflow:hidden}
.table-scroll{overflow-x:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.table th{text-align:left;font-size:12px;font-weight:600;color:var(--text-3);padding:10px 16px;background:var(--bg-subtle);border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-2)}
.table tr:last-child td{border-bottom:0}
.table tbody tr{position:relative}
.table tbody tr.clickable:hover td{background:var(--bg-subtle)}
.table .primary{color:var(--text);font-weight:600;font-size:var(--fs-base)}
.table .primary a{color:inherit}
.table .stretch::after{content:"";position:absolute;inset:0}
.table .sub{display:block;color:var(--text-3);font-size:var(--fs-sm);font-weight:400;margin-top:2px}
.table .r{text-align:right}
.table .acts{display:flex;justify-content:flex-end;gap:6px;position:relative;z-index:2}
.table .cell-flex{display:flex;align-items:center;gap:12px}
.table th.cbx,.table td.cbx{width:44px;padding-right:0}
.table input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);position:relative;z-index:2}
.table tr.sel td{background:var(--accent-soft)}
.pager{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-3)}

/* ---------- Stats ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.stat-i{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.stat-i b{font-size:var(--fs-lg);color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats>.stat{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--border);min-width:0}
.stats>.stat:last-child{border-right:0}
.stat-k{font-size:var(--fs-sm);color:var(--text-2);display:flex;align-items:center;gap:6px}
.stat-v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.2}
.stat-d{font-size:12px;color:var(--text-3);margin-top:2px}
.stat-d.up{color:var(--success-700)}
.stat-v.warn{color:var(--warning-700)} .stat-v.good{color:var(--success-700)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3)}
.kpi{padding:var(--sp-4) var(--sp-5)}
.kpi .k{font-size:var(--fs-sm);color:var(--text-2)}
.kpi .v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.2}
.kpi .d{font-size:12px;color:var(--text-3);margin-top:2px}
.kpi.warn .v{color:var(--warning-700)}
.meter{height:8px;border-radius:99px;background:var(--bg-muted);overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand-teal-500);border-radius:99px;min-width:3px}
.meter.warn i{background:#F59E0B}
.meter.sm{height:6px;width:96px}
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:12px;align-items:center;font-size:var(--fs-sm);color:var(--text-2)}
.bar-row .r{text-align:right;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:3px;height:64px}
.spark i{flex:1;background:var(--brand-teal-100);border-radius:3px 3px 0 0;min-height:2px}
.spark i.on{background:var(--brand-teal-500)}
.progress{display:flex;gap:4px}.progress i{flex:1;height:6px;border-radius:99px;background:var(--bg-muted)}.progress i.on{background:var(--brand-teal-500)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2)}
.steps .tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-strong);flex:none}
.steps .done .tick{background:var(--success-600);border-color:var(--success-600);color:#fff}
.steps .done .tick .icon{width:12px;height:12px;stroke-width:3}
.steps .done span.t{text-decoration:line-through;color:var(--text-3)}

/* ---------- Empty ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-12) var(--sp-6);border:1.5px dashed var(--border-strong);border-radius:var(--r-xl);background:var(--bg-surface)}
.empty.solid{border-style:solid;border-width:1px}
.empty .art{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:var(--sp-4);box-shadow:inset 0 0 0 1px var(--brand-teal-100)}
.empty h3,.empty .empty-t{margin:0 0 6px;font-size:var(--fs-xl)}
.empty p{margin:0 0 var(--sp-5);color:var(--text-2);max-width:480px}
.empty .row{justify-content:center}
.empty .hint{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-3)}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,var(--bg-muted) 0%,#F6F8FB 40%,var(--bg-muted) 80%);background-size:300% 100%;animation:sh 1.4s infinite linear;border-radius:8px}
@keyframes sh{from{background-position:100% 0}to{background-position:-50% 0}}

/* ---------- Tooltips ---------- */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--gray-900);color:#fff;font-size:12px;font-weight:500;padding:6px 8px;border-radius:6px;white-space:nowrap;z-index:90;pointer-events:none;box-shadow:var(--sh-md);line-height:1.3}
.help-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:0;background:var(--bg-muted);color:var(--text-3);cursor:help;padding:0;font-size:12px;font-weight:700}
.help-dot .icon{width:12px;height:12px}

/* ---------- Overlays: scrim, drawer, modal, toast, cmdk ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,24,38,.42);z-index:100;display:none;animation:fade .16s}
.scrim.open{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:#fff;z-index:110;box-shadow:var(--sh-xl);display:none;flex-direction:column;animation:slide .2s var(--ease)}
.drawer.open{display:flex}
.drawer.wide{width:min(620px,100vw)}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer-head h2{font-size:var(--fs-lg);font-weight:600}
.drawer-head p{color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
.drawer-body{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:18px}
.drawer-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg-subtle)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);z-index:110;display:none;animation:pop .16s var(--ease)}
.modal.open{display:block}
.modal.wide{width:min(640px,calc(100vw - 32px))}
.modal-body{padding:24px 24px 8px}
.modal-body h2{font-size:var(--fs-lg);font-weight:600;margin:12px 0 6px}
.modal-body p{color:var(--text-2);font-size:var(--fs-base)}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 20px}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--gray-900);color:#fff;box-shadow:var(--sh-lg);font-size:var(--fs-sm);animation:pop .2s var(--ease);min-width:320px}
.toast .icon{color:#5EEAD4}
.toast .grow{flex:1}
.toast .btn{height:28px;background:transparent;border-color:#334155;color:#fff;box-shadow:none;font-size:var(--fs-sm)}
.toast .btn:hover{background:#1E293B}
.toast .x{color:#94A3B8;background:none;border:0;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:6px}
.toast.progress{flex-wrap:wrap}
.toast .tbar{flex-basis:100%;height:4px;border-radius:99px;background:#334155;overflow:hidden;margin-top:2px}
.toast .tbar i{display:block;height:100%;width:62%;background:var(--brand-teal-400)}
.cmdk{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);z-index:110;display:none;overflow:hidden;animation:pop .14s var(--ease)}
.cmdk.open{display:block}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:0 16px;height:56px;border-bottom:1px solid var(--border)}
.cmdk-in input{flex:1;border:0;outline:0;font:inherit;font-size:var(--fs-md);min-width:0}
.cmdk-list{max-height:min(420px,60vh);overflow:auto;padding:6px}
.cmdk-group{font-size:12px;font-weight:600;color:var(--text-3);padding:10px 10px 4px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-md);font-size:var(--fs-sm);cursor:pointer;color:var(--text);text-decoration:none}
.cmdk-item:hover{text-decoration:none;background:var(--bg-muted)}
.cmdk-item[aria-selected="true"]{background:var(--accent-soft)}
.cmdk-item .ico-tile{width:28px;height:28px;border-radius:8px}
.cmdk-item .meta{color:var(--text-3);font-size:12px}
.cmdk-item .end{margin-left:auto;color:var(--text-3);font-size:12px}
.cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--border);background:var(--bg-subtle);font-size:12px;color:var(--text-3)}
.cmdk-foot .kbd{margin:0 4px 0 0}
mark{background:#FEF08A;color:inherit;border-radius:2px;padding:0 1px}
.panel-pop{position:fixed;top:calc(var(--ribbon-h) + var(--topbar-h) + 4px);right:16px;width:400px;max-width:calc(100vw - 24px);background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);border:1px solid var(--border);z-index:110;display:none;overflow:hidden}
.panel-pop.open{display:block;animation:pop .14s var(--ease)}
.panel-pop .ph-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.panel-pop .ph-head h2{font-size:var(--fs-md);font-weight:600}
.notif{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:var(--fs-sm);position:relative}
.notif.unread{background:#F7FCFD}
.notif.unread::before{content:"";position:absolute;left:6px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.notif b{font-weight:600}
.notif .when{color:var(--text-3);font-size:12px;margin-top:2px}
.notif .acts{margin-top:8px;display:flex;gap:6px}
.wn-item{padding:14px 16px;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.wn-item h3{font-size:var(--fs-base);font-weight:600;margin:4px 0 2px}

/* ---------- Event cards ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-4)}
.ev-card{position:relative;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s}
.ev-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--border-strong)}
.ev-card:focus-within{box-shadow:var(--ring)}
.ev-cover{position:relative;aspect-ratio:2/1;background:var(--brand-navy-800);overflow:hidden}
.ev-cover img{width:100%;height:100%;object-fit:contain}
.ev-cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 var(--border)}
.ev-cover .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2}
.ev-card .menu-btn{position:absolute;top:8px;right:8px;z-index:3;background:rgba(255,255,255,.95);border-color:transparent}
.ev-body{padding:14px 16px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.ev-title{font-size:var(--fs-md);font-weight:600;line-height:1.35;color:var(--text)}
.ev-title a{color:inherit;text-decoration:none}
.ev-title a::after{content:"";position:absolute;inset:0;z-index:1}
.ev-title a:focus-visible{box-shadow:none}
.ev-client{color:var(--text-2);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:10px;color:var(--text-2);font-size:var(--fs-sm)}
.ev-meta span{display:inline-flex;align-items:center;gap:6px}
.ev-meta .icon{color:var(--text-3);width:15px;height:15px}
.ev-health{display:flex;align-items:center;gap:8px;padding:9px 16px;border-top:1px solid var(--border);font-size:var(--fs-sm);background:var(--bg-subtle)}
.ev-health .status{font-size:var(--fs-sm)}
.ev-health .push{position:relative;z-index:2}
.fallback-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:20px;color:#fff;
  background:radial-gradient(120% 90% at 20% 0%,#1D4466 0%,var(--brand-navy-900) 70%)}
.fallback-cover .mk{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-weight:700;font-size:18px;flex:none}
.fallback-cover .nm{font-weight:600;font-size:16px;line-height:1.25;max-width:60%}
.fallback-cover .nm small{display:block;font-weight:400;font-size:12px;color:var(--text-on-dark-2);margin-top:4px}
.up-card{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;overflow:hidden;position:relative}
.up-card .ev-cover{aspect-ratio:auto;height:100%;min-height:120px}
.up-card .ev-body{padding:18px 20px;justify-content:center}
.up-card .setup{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 20px;border-left:1px solid var(--border);background:var(--bg-subtle);position:relative;z-index:2}
.ev-list .table td{padding:10px 16px}
.thumb{width:64px;height:32px;border-radius:6px;overflow:hidden;flex:none;background:var(--brand-navy-800);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb .fallback-cover{padding:0;gap:0}.thumb .fallback-cover .mk{width:auto;height:auto;background:none;box-shadow:none;font-size:12px}
.thumb .fallback-cover .nm{display:none}
.footnote{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-3);display:flex;gap:8px;align-items:center}

/* ---------- Event header ---------- */
.ev-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 18px}
.ev-head .cover-sm{width:96px;height:48px;border-radius:8px;overflow:hidden;background:var(--brand-navy-800);position:relative;grid-row:span 2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ev-head .cover-sm img{width:100%;height:100%;object-fit:contain}
.ev-head h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-head .meta{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--text-2);font-size:var(--fs-sm);grid-column:2}
.ev-head .meta span{display:inline-flex;align-items:center;gap:6px}
.ev-head .meta .icon{color:var(--text-3);width:15px;height:15px}
.ev-head .acts{display:flex;gap:8px;align-items:center;grid-row:span 2;grid-column:3}
.ev-strip{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg)}
.ev-strip .live-sig{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:var(--fs-sm)}
.ev-strip a.stat-i:hover{text-decoration:none}
.ev-strip a.stat-i:hover b{color:var(--accent)}
.compact .banner{margin-top:10px}
.ev-tabs{margin-top:8px}
.ev-tabs .tabs-wrap{border-bottom:1px solid var(--border)}

/* ---------- Photo toolbar + grid ---------- */
.ptool{display:flex;align-items:center;gap:var(--sp-2);margin:12px 0 12px;min-width:0}
.ptool .sep{width:1px;height:24px;background:var(--border-strong);flex:none;margin:0 4px}
.ptool .input{width:230px;flex:none}
.ptool .rel{position:relative;flex:none}
.sel-banner{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--r-md);background:var(--accent-soft);border:1px solid var(--brand-teal-100);color:#064E56;font-size:var(--fs-sm);margin-bottom:12px}
.ph-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(var(--tile,220px),1fr))}
.ph-grid[data-size="s"]{--tile:150px;gap:6px}
.ph-grid[data-size="l"]{--tile:320px}
.ph-grid.has-bulk{padding-bottom:88px}
.ph{position:relative;min-width:0;margin:0}
.ph-frame{position:relative;aspect-ratio:3/2;border-radius:var(--r-md);overflow:hidden;background:var(--bg-muted);box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.ph-frame img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.ph-open{position:absolute;inset:0;z-index:1;border-radius:var(--r-md)}
.ph-open:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)}
.ph:hover .ph-frame img{transform:scale(1.025)}
.ph-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,38,.42) 0%,transparent 30%,transparent 60%,rgba(10,24,38,.7) 100%);opacity:0;transition:opacity .15s;pointer-events:none}
.ph:hover .ph-frame::after,.ph.selected .ph-frame::after,.ph:focus-within .ph-frame::after{opacity:1}
.ph .tc{position:absolute;z-index:3;opacity:0;transition:opacity .15s}
.ph:hover .tc,.ph:focus-within .tc,.ph.selected .tc,.selecting .ph .tc.cbx{opacity:1}
.ph .cbx{top:8px;left:8px;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(255,255,255,.95);background:rgba(10,24,38,.3);display:grid;place-items:center;color:#fff;cursor:pointer;padding:0}
.ph.selected .cbx{background:var(--accent);border-color:var(--accent)}
.ph .cbx .icon{width:14px;height:14px;stroke-width:2.6;opacity:0}
.ph.selected .cbx .icon{opacity:1}
.ph.selected .ph-frame{box-shadow:0 0 0 3px var(--brand-teal-500)}
.ph .tr{top:6px;right:6px;display:flex;gap:4px}
.ph .tr button{width:30px;height:30px;border-radius:8px;border:0;background:rgba(10,24,38,.5);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer}
.ph .tr button:hover{background:rgba(10,24,38,.75)}
.ph .tr .on{color:#FCD34D} .ph .tr .on .icon{fill:#FCD34D}
.ph .fname{left:10px;right:10px;bottom:8px;color:#fff;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.ph .persist{position:absolute;z-index:2;bottom:8px;right:8px;display:flex;gap:4px;pointer-events:none}
.ph:hover .persist{opacity:0}
.mini{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:var(--r-full);background:rgba(10,24,38,.6);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600}
.mini .icon{width:12px;height:12px}
.mini.star .icon{fill:#FCD34D;color:#FCD34D}
.mini.hold{background:rgba(180,83,9,.85)}
.ph-cap{display:flex;justify-content:space-between;gap:8px;padding:6px 2px 0;font-size:12px;color:var(--text-2)}
.ph-cap .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-grid:not(.names) .ph-cap{display:none}
.bulkbar{position:fixed;left:calc(var(--sidebar-w) + (100vw - var(--sidebar-w))/2);transform:translateX(-50%);bottom:20px;z-index:50;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 14px;
  background:var(--gray-900);color:#fff;border-radius:14px;box-shadow:var(--sh-lg);max-width:calc(100vw - var(--sidebar-w) - 32px)}
.bulkbar .cnt{font-weight:600;margin-right:6px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.bulkbar .cnt b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:var(--brand-teal-700,#0A5F69);font-size:var(--fs-sm)}
.bulkbar .sep{width:1px;height:20px;background:#334155;margin:0 4px}
.bulkbar .btn{height:34px;background:transparent;border-color:transparent;color:#E2E8F0;box-shadow:none;font-size:var(--fs-sm);padding:0 10px}
.bulkbar .btn:hover{background:#1E293B;color:#fff}
.bulkbar .danger{color:#FCA5A5}
.dropzone{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--sp-5);padding:14px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text-3);font-size:var(--fs-sm)}
.drop-active{position:fixed;inset:0;z-index:105;display:grid;place-items:center;background:rgba(11,127,140,.12);backdrop-filter:blur(2px)}
.drop-active .box{border:2px dashed var(--accent);background:#fff;border-radius:24px;padding:40px 56px;text-align:center;box-shadow:var(--sh-xl)}
.filter-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px;margin-bottom:12px}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:#0B1118;color:#E2E8F0;display:grid;grid-template-rows:56px minmax(0,1fr) 84px;grid-template-columns:minmax(0,1fr) 340px}
.lb-top{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid #1E293B}
.lb-top .t{font-size:var(--fs-sm);color:#94A3B8} .lb-top .t b{color:#fff;font-weight:600}
.lb .btn{background:#151E2A;border-color:#253244;color:#E2E8F0;box-shadow:none}
.lb .btn:hover{background:#1E293B}
.lb .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.lb-stage{position:relative;display:grid;place-items:center;padding:20px 64px;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #253244;background:#151E2A;color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-nav.prev{left:12px}.lb-nav.next{right:12px}
.lb-side{grid-row:2/4;grid-column:2;background:#fff;color:var(--text);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.lb-strip{display:flex;gap:6px;align-items:center;padding:0 16px;overflow:hidden;border-top:1px solid #1E293B}
.lb-strip img{height:56px;width:84px;object-fit:cover;border-radius:4px;opacity:.55;flex:none}
.lb-strip img.cur{opacity:1;box-shadow:0 0 0 2px var(--brand-teal-400)}
.face-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md)}
.face{width:36px;height:36px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#E8C9A6 0 26%,transparent 27%),radial-gradient(ellipse at 50% 100%,#3C5875 0 48%,transparent 49%),#CBD5E1}

/* ---------- Settings template (left rail) ---------- */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-8);align-items:start}
.subnav{position:sticky;top:calc(var(--ribbon-h) + var(--topbar-h) + 20px);display:flex;flex-direction:column;gap:2px}
.subnav .grp{font-size:12px;font-weight:600;color:var(--text-3);padding:14px 10px 4px}
.subnav .grp:first-child{padding-top:0}
.subnav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-sm);font-weight:500;text-decoration:none}
.subnav a:hover{background:var(--bg-muted);color:var(--text)}
.subnav a[aria-current="page"]{background:#fff;color:var(--text);font-weight:600;box-shadow:var(--sh-sm),inset 0 0 0 1px var(--border)}
.subnav a .icon{color:var(--text-3)}
.subnav a[aria-current="page"] .icon{color:var(--accent)}
.subnav a .end{margin-left:auto}
.subnav-select{display:none}
.set-head{margin-bottom:var(--sp-5)}
.set-head h2{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em}
.set-head p{color:var(--text-2);margin-top:4px}
.set-sec{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--sp-6);padding:var(--sp-6) 0;border-top:1px solid var(--border)}
.set-sec:first-of-type{border-top:0;padding-top:0}
.set-sec .about h3{font-size:var(--fs-md);font-weight:600}
.set-sec .about p{color:var(--text-3);font-size:var(--fs-sm);margin-top:4px}
.set-rows .card-body{display:flex;flex-direction:column;gap:18px}
.opt-row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.opt-row .txt b{display:block;font-weight:600;font-size:var(--fs-sm)}
.opt-row .txt span{display:block;color:var(--text-3);font-size:var(--fs-sm);line-height:1.45;max-width:560px}
.opt-row+.opt-row{padding-top:18px;border-top:1px solid var(--border)}
.disclose{border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
.disclose>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:600;font-size:var(--fs-sm)}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary .chev{margin-left:auto;transition:transform .15s;color:var(--text-3)}
.disclose[open]>summary .chev{transform:rotate(180deg)}
.disclose>summary .sum{font-weight:400;color:var(--text-3)}
.disclose .in{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
.savebar{position:sticky;bottom:16px;z-index:45;display:flex;align-items:center;gap:10px;margin-top:var(--sp-6);padding:10px 10px 10px 16px;border-radius:var(--r-lg);background:var(--gray-900);color:#fff;box-shadow:var(--sh-lg);font-size:var(--fs-sm)}
.savebar .btn-ghost{color:#CBD5E1} .savebar .btn-ghost:hover{background:#1E293B;color:#fff}
.preview-card{position:sticky;top:calc(var(--ribbon-h) + var(--topbar-h) + 20px)}

/* ---------- Device + phone mock ---------- */
.phone{width:240px;margin:0 auto;border-radius:32px;background:#0B1118;padding:10px;box-shadow:var(--sh-lg)}
.phone .scr{border-radius:24px;overflow:hidden;background:#fff;height:440px;display:flex;flex-direction:column}
.phone .scr .ghd{position:relative;aspect-ratio:2/1;background:var(--brand-navy-800)}
.phone .scr .ghd img{width:100%;height:100%;object-fit:cover}
.phone .g-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px}
.phone .g-grid img{width:100%;aspect-ratio:1;object-fit:cover}
.qr{width:148px;height:148px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:12px;flex:none}
.qr svg{width:100%;height:100%}

/* ---------- Help / docs ---------- */
.hero-search{padding:32px;border-radius:var(--r-xl);background:radial-gradient(120% 140% at 0% 0%,#0F3B4A 0%,var(--brand-navy-900) 60%);color:#fff;margin-bottom:var(--sp-6)}
.hero-search h1{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.02em}
.hero-search p{color:var(--text-on-dark-2);margin:6px 0 18px}
.hero-search .input{height:48px;max-width:640px;font-size:var(--fs-md);border:0}
.cat-card{position:relative;display:flex;gap:14px;padding:18px;transition:box-shadow .15s,border-color .15s}
.cat-card:hover{box-shadow:var(--sh-md);border-color:var(--border-strong)}
.cat-card h3{font-size:var(--fs-md);font-weight:600}
.cat-card h3 a{color:inherit}
.cat-card h3 a::after{content:"";position:absolute;inset:0}
.cat-card p{color:var(--text-2);font-size:var(--fs-sm);margin-top:2px}
.cat-card .n{color:var(--text-3);font-size:12px;margin-top:6px;display:block}
.article{display:grid;grid-template-columns:minmax(0,720px) 220px;gap:var(--sp-10);justify-content:start}
.prose{font-size:var(--fs-md);line-height:1.7;color:var(--gray-800)}
.prose h1{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.prose h2{font-size:var(--fs-xl);font-weight:600;margin:32px 0 8px}
.prose p{margin:0 0 14px}
.prose ol,.prose ul{padding-left:22px;margin:0 0 14px}
.prose li{margin:6px 0}
.prose .shot{border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;margin:8px 0 20px;background:var(--bg-subtle)}
.toc{position:sticky;top:calc(var(--ribbon-h) + var(--topbar-h) + 24px);font-size:var(--fs-sm)}
.toc b{display:block;font-size:12px;color:var(--text-3);margin-bottom:8px}
.toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--border);color:var(--text-2)}
.toc a.on{border-color:var(--accent);color:var(--text);font-weight:600}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#0B1118;display:grid;place-items:center}
.video .play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--accent);box-shadow:var(--sh-xl);border:0;cursor:pointer}
.video .ctrls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:12px}
.transcript p{display:grid;grid-template-columns:56px 1fr;gap:12px;font-size:var(--fs-sm);margin:0;padding:8px 0;border-bottom:1px solid var(--border)}
.transcript p a{font-variant-numeric:tabular-nums}
.transcript p.on{background:var(--accent-soft);margin:0 -12px;padding:8px 12px;border-radius:8px}

/* ---------- Chat / thread ---------- */
.thread{display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:12px}
.msg .bubble{background:#fff;border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:10px 14px;font-size:var(--fs-sm);max-width:640px}
.msg.me{flex-direction:row-reverse}
.msg.me .bubble{background:var(--accent-soft);border-color:var(--brand-teal-100);border-radius:14px 4px 14px 14px}
.msg .who{font-size:12px;color:var(--text-3);margin-bottom:4px}

/* ---------- Index ---------- */
.idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-3)}
.idx-card{position:relative;display:block;overflow:hidden;transition:box-shadow .15s,transform .15s}
.idx-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.idx-card .shot{aspect-ratio:16/10;background:var(--bg-muted);border-bottom:1px solid var(--border);overflow:hidden}
.idx-card .shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.idx-card .b{padding:10px 12px}
.idx-card h3{font-size:var(--fs-sm);font-weight:600}
.idx-card h3 a{color:inherit}
.idx-card h3 a::after{content:"";position:absolute;inset:0}
.idx-card p{color:var(--text-3);font-size:12px;margin-top:2px}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ph:hover .ph-frame img,.ev-card:hover{transform:none}}

/* ---------- Touch: controls always visible ---------- */
@media (hover:none) and (pointer:coarse){.ph .tc{opacity:1}.ph .tc.tr button{background:rgba(10,24,38,.45)}.ph-frame::after{opacity:.55}.ph .fname{display:none}.ph .persist{opacity:1!important;bottom:8px;right:auto;left:8px;top:auto}}
.touch .ph .tc{opacity:1}.touch .ph-frame::after{opacity:.55}.touch .ph .fname{display:none}.touch .ph .persist{right:auto;left:8px}

/* ---------- Responsive ---------- */
@media (max-width:1280px){.split{grid-template-columns:minmax(0,1fr) 320px}.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.kpi{padding:14px}.kpi .v{font-size:22px}
  .ptool .input{width:190px}.settings{grid-template-columns:200px minmax(0,1fr);gap:24px}.set-sec{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:1100px){
  :root{--sidebar-w:72px}
  .sidebar{padding:12px 10px;align-items:center}
  .sidebar .brand-word,.sidebar .nav-label,.sidebar .txt,.sidebar .count,.sidebar .attn,.side-search .kbd,.switcher .who,.switcher .chev{display:none}
  .sidebar .brand{padding:2px 0 12px}
  .side-search{width:44px;justify-content:center;padding:0}
  .nav a{width:44px;justify-content:center;padding:0}
  .nav a[aria-current="page"]::before{left:-10px}
  .nav-sep{height:1px;background:var(--brand-navy-700);margin:10px 8px;width:32px}
  .switcher{width:44px;justify-content:center;padding:6px}
  .menu.up{left:0;right:auto;width:280px}
  .split,.split-l{grid-template-columns:minmax(0,1fr)}
  .preview-card{position:static}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .up-card{grid-template-columns:200px minmax(0,1fr)}
  .up-card .setup{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);flex-direction:row;align-items:center;flex-wrap:wrap}
  .ev-head{grid-template-columns:auto minmax(0,1fr)}
  .ev-head .acts{grid-column:1/-1;grid-row:auto;justify-content:flex-start}
  .hide-md{display:none!important}
  .ptool{flex-wrap:wrap}.ptool .rail{order:5;flex-basis:100%}.ptool .push{margin-left:auto}
  .settings{grid-template-columns:minmax(0,1fr)}
  .subnav{display:none}.subnav-select{display:block;margin-bottom:16px}
  .set-sec{grid-template-columns:minmax(0,1fr);gap:12px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article{grid-template-columns:minmax(0,1fr)}.toc{display:none}
  .lb{grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) auto}
  .lb-side{grid-row:auto;grid-column:1;max-height:40vh}
  .lb-strip{display:none}
  .menu.wide{min-width:0;width:min(520px,calc(100vw - 32px))}
}
@media (max-width:767px){
  .stack-table thead{display:none}
  .stack-table,.stack-table tbody,.stack-table tr,.stack-table td{display:block;width:100%}
  .stack-table tr{padding:12px 16px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .stack-table td{padding:0;border:0!important;background:none!important}
  .stack-table td[data-l]::before{content:attr(data-l)": ";color:var(--text-3);font-size:12px}
  .stack-table td.first{grid-column:1}
  .stack-table td.acts-cell{grid-column:2;grid-row:1/span 2;align-self:start}
  .stack-table td:not(.first):not(.acts-cell){grid-column:1}
  .stack-table td.cbx{display:none}
  .stack-table .hide-sm{display:none}
}@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .topbar{display:none}
  .mobile-bar{position:sticky;top:var(--ribbon-h);z-index:40;display:flex;align-items:center;gap:4px;height:52px;padding:0 8px;background:var(--brand-navy-900);color:#fff}
  .mobile-bar .tb-btn{color:var(--text-on-dark)}
  .mobile-bar .tb-btn:hover{background:var(--brand-navy-800)}
  .mobile-bar .tb-btn .dot{box-shadow:0 0 0 2px var(--brand-navy-900)}
  .mobile-bar .brand{padding:0 4px}
  .mobile-bar .brand-word{font-size:16px}
  .env-ribbon span{display:none}
  .page{padding:16px 16px 96px}
  .page-head{align-items:flex-start;margin-bottom:16px}
  .page-head h1{font-size:24px}
  .page-head .actions{margin-left:0;width:100%}
  .page-head .actions .btn-primary{flex:1}
  .grid-2,.grid-3,.grid-4,.form-row{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:last-child{grid-column:1/-1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>.stat:nth-child(2){border-right:0}.stats>.stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .filterbar .input{width:100%;flex-basis:100%}
  .hide-sm{display:none!important}
  .show-sm{display:inline-flex!important}
  .ev-grid{grid-template-columns:minmax(0,1fr)}
  .up-card{grid-template-columns:minmax(0,1fr)}
  .up-card .ev-cover{aspect-ratio:2/1}
  .ev-head{padding:12px 14px;grid-template-columns:72px minmax(0,1fr);gap:4px 12px}
  .ev-head .cover-sm{width:72px;height:36px;grid-row:span 1}
  .ev-head h1{font-size:18px}
  .ev-head .meta{grid-column:1/-1}
  .ev-head .acts{display:grid;grid-template-columns:auto auto 1fr;width:100%}
  .ev-strip{padding:10px 14px;gap:4px 16px}
  .ev-strip .live-sig{margin-left:0;flex-basis:100%}
  .ptool .input{width:auto;flex:1}
  .ph-grid{--tile:150px;gap:6px}
  .bulkbar{left:12px;right:12px;transform:none;max-width:none;bottom:calc(var(--tabbar-h) + 10px);justify-content:space-between}
  .toasts{bottom:calc(var(--tabbar-h) + 12px);width:calc(100vw - 24px)}
  .tabbar{display:grid}
  .savebar{bottom:calc(var(--tabbar-h) + 8px)!important}
  .bulkbar .lbl{display:none}
  .split,.split-l{grid-template-columns:minmax(0,1fr)}
  .filter-panel{grid-template-columns:minmax(0,1fr)}
  .hero-search{padding:20px}
  .lb-stage{padding:12px}
  .lb-nav{display:none}
  .drawer{width:100vw}
  .panel-pop{right:12px;left:12px;width:auto;top:calc(var(--ribbon-h) + 56px)}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px}.dl dd{margin-bottom:10px}
  .menu.wide .menu-grid{grid-template-columns:minmax(0,1fr)}
}
.show-sm{display:none}
/* ---- mobile bottom tab bar + More sheet (matches Labs 640px pattern) ---- */
:root{--tabbar-h:64px}
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--tabbar-h);grid-template-columns:repeat(5,minmax(0,1fr));background:var(--brand-navy-900);border-top:1px solid var(--brand-navy-700);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-on-dark-2);font:600 12px/1 var(--font);background:none;border:0;text-decoration:none;min-height:48px}
.tabbar [aria-current="page"]{color:#fff}
.tabbar [aria-current="page"] .icon{color:var(--brand-teal-400)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:112;background:var(--brand-navy-900);color:var(--text-on-dark);border-radius:20px 20px 0 0;box-shadow:var(--sh-xl);display:none;max-height:85vh;overflow:auto;padding-bottom:calc(var(--tabbar-h) + 8px);animation:sheetup .22s var(--ease)}
.sheet.open{display:block}
@keyframes sheetup{from{transform:translateY(30px);opacity:0}}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--brand-navy-700);margin:8px auto 0}
.sheet-head{display:flex;align-items:center;padding:10px 16px 10px 20px;border-bottom:1px solid var(--brand-navy-700)}
.sheet-head h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-dark-2)}
.sheet-head .btn{color:var(--text-on-dark)}
.sheet-body{padding:8px 10px}
.sheet .menu-label{color:var(--text-on-dark-2)}
.sheet .menu-item{color:#fff;min-height:52px;font-size:16px}
.sheet .menu-item .icon{color:var(--brand-teal-400)}
.sheet .menu-item .meta{color:var(--text-on-dark-2)}
.sheet .menu-item:hover,.sheet .menu-item:focus-visible{background:var(--brand-navy-800)}
.sheet .menu-sep{background:var(--brand-navy-700)}
.sheet .end{color:var(--text-on-dark-2)}
/* ---- bare (auth / 404) layout ---- */
body.bare{background:var(--bg-app)}
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.auth-l{display:flex;flex-direction:column;padding:32px clamp(24px,5vw,72px)}
.auth-form{margin:auto 0;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px;padding:32px 0}
.auth-form h1{font-size:28px;letter-spacing:-.02em}
.auth-r{background:var(--brand-navy-900);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:48px;color:#fff}
.auth-r .mosaic{position:absolute;inset:-40px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-6deg);opacity:.5}
.auth-r .mosaic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.auth-r .quote{position:relative;max-width:440px;background:rgba(10,24,38,.78);backdrop-filter:blur(8px);border:1px solid var(--brand-navy-700);border-radius:16px;padding:22px}
.auth-r .quote p{font-size:17px;line-height:1.5}
.auth-foot{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
.auth-foot a{color:var(--text-2)}
.brand.dark .brand-word{color:var(--text)}
.acct-choice{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#fff;text-decoration:none;color:inherit}
.acct-choice:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}
.nf{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
@media (max-width:900px){.auth{grid-template-columns:minmax(0,1fr)}.auth-r{display:none}}
@media (max-width:767px){.tabbar{display:grid}.page-head .actions .input{flex:1 1 100%;width:auto!important}.section-title{margin-top:24px}}
.page>.tabs-wrap+.section-title,.page>.tabs-wrap+.row+.section-title{margin-top:20px}

.seg a .icon,.seg button .icon{margin:0}
.ph-open{background:transparent;border:0;padding:0;cursor:zoom-in}
/* v2.1 vertical budget for the event page */
.page:has(.compact){padding-top:16px}
.ev-head{padding:12px 18px}
.ev-head .meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.ev-strip{padding:7px 18px}
.compact .ev-alert{margin:0;border-radius:0 0 var(--r-lg) var(--r-lg);border-width:1px 0 0;padding:4px 8px 4px 18px;min-height:40px}
.compact .ev-alert .btn{height:30px}
.compact:has(.ev-alert) .ev-strip{border-radius:0}
.ev-tabs{margin-top:8px}
.ev-tabs .tab{padding-top:8px;padding-bottom:10px}
.ptool{margin:10px 0}
@media (max-width:767px){.ev-head .meta{flex-wrap:wrap;white-space:normal}.compact .ev-alert{flex-wrap:wrap;padding:8px 10px 8px 14px}}
.ev-tabs .tab{height:40px;padding-top:0;padding-bottom:0}.ev-tabs{margin-top:4px}.ptool{margin:8px 0}
.ev-head{padding:10px 18px}.ev-strip{padding:5px 18px}
.ev-alert .msg{display:block}
@media (max-width:767px){
 .ev-head .acts{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
 .ev-head .acts>*{min-width:0}.ev-head .acts .rel,.ev-head .acts .rel>.btn{width:100%}
 .ev-head .acts .btn{padding:0 10px;min-width:0;overflow:hidden;white-space:nowrap}
 .compact .ev-alert .acts{flex-basis:100%}
 .ptool .seg{display:none}.ptool .input{min-width:0}
 .ptool{flex-wrap:wrap}
}
body{overflow-x:clip}
.lb-side .btn{background:#fff;color:var(--text);border-color:var(--border-strong)}
.swatch{width:32px;height:32px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--border-strong);cursor:pointer}
.swatch:first-child{box-shadow:0 0 0 2px var(--accent)}
.cover-pick{aspect-ratio:2/1;max-width:420px;border-radius:var(--r-lg);overflow:hidden;background:var(--brand-navy-800)}
.cover-pick img{width:100%;height:100%;object-fit:cover}
.handle{color:var(--text-3);cursor:grab;display:grid}
.pair-code{display:flex;justify-content:center;gap:12px;font:700 40px/1 var(--font);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.pair-code span{padding:14px 18px;border-radius:12px;background:var(--bg-subtle);border:1px solid var(--border)}
.table-card.flat{box-shadow:none;border:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.split .set-sec{grid-template-columns:minmax(0,1fr);gap:12px}
p .icon,.muted>.icon{display:inline-block;vertical-align:-3px}
.stats.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:767px){.stats.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* settings bits */
.bars-v{display:flex;align-items:flex-end;gap:14px;height:150px;padding-top:12px}
.bars-v.sm{height:110px;gap:8px}
.bv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.bv-bar{width:100%;max-width:44px;border-radius:6px 6px 2px 2px;background:var(--brand-teal-500)}
.bv-bar.none{background:var(--bg-muted)}
.bv-v{font-size:12px;font-weight:600;color:var(--text-2)}
.bv-l{font-size:12px;color:var(--text-3)}
.list .tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-strong);flex:none}
.list .tick.done{background:var(--success-600);border-color:var(--success-600);color:#fff}
.list .tick.done .icon{width:13px;height:13px;stroke-width:3}
.bul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--text-2)}
.bul li{display:flex;gap:8px;align-items:center}.bul .icon{color:var(--success-600)}
.cc{display:grid;place-items:center;width:44px;height:30px;border-radius:6px;background:#1A1F71;color:#fff;font:800 11px/1 var(--font);letter-spacing:.06em}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:13px;padding:3px 8px;border-radius:6px;background:var(--bg-subtle);border:1px dashed var(--border-strong)}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card.int{padding:16px;display:flex;flex-direction:column;gap:10px}.card.int p{font-size:13px;margin:0;flex:1}
.brand-tile{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:var(--brand-teal-600);color:#fff;font:700 20px/1 var(--font)}
.sample{position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.sample img{width:100%;height:100%;object-fit:cover}
.sample .btn{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.9);width:24px;height:24px}
.sample.add{display:grid;place-items:center;align-content:center;gap:2px;background:var(--bg-subtle);border:1.5px dashed var(--border-strong);color:var(--text-2);font:500 12px var(--font);cursor:pointer}
.ctl-prefix.sm{height:32px;width:96px;margin-left:auto}
td.c,th.c{text-align:center}
.you{font-style:normal;font-weight:400;color:var(--text-3)}
@media (max-width:767px){.set-head{flex-wrap:wrap;align-items:flex-start!important}.set-head>.row{width:100%}.set-head>.row>.btn{flex:1}.set-head .search{width:100%!important}}
/* support */
.help-hero{text-align:center;padding:32px 16px 28px;display:grid;gap:12px;justify-items:center}
.help-hero h1{font-size:32px;font-weight:700;letter-spacing:-.02em}.help-hero p{color:var(--text-2)}
.help-search{display:flex;align-items:center;gap:10px;width:min(620px,100%);height:52px;padding:0 16px;border:1px solid var(--border-strong);border-radius:14px;background:#fff;box-shadow:var(--sh-sm)}
.help-search input{flex:1;border:0;outline:0;font:inherit;font-size:16px;min-width:0}.help-search:focus-within{box-shadow:var(--ring);border-color:var(--brand-teal-500)}
.help-search kbd{font:600 12px var(--font);padding:2px 7px;border:1px solid var(--border);border-radius:6px;color:var(--text-3)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card.cat{display:flex;gap:12px;align-items:center;padding:16px;color:inherit;text-decoration:none}.card.cat:hover{border-color:var(--brand-teal-500)}
.card.cat>span:last-child{display:grid}.card.cat>span:last-child span{font-size:13px;color:var(--text-3)}
.vid-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.vid-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card.vid{overflow:hidden;color:inherit;text-decoration:none;display:block}
.vid-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;border-radius:0}
.vid-thumb.big{border-radius:var(--r-lg)}
.vid-thumb .play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand-navy-800)}
.vid-thumb .play .icon{width:20px;height:20px;fill:currentColor}
.vid-thumb .dur{position:absolute;right:8px;bottom:8px;font:600 12px var(--font);color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:5px}
.vid-b{padding:12px 14px;display:grid;gap:2px}.vid-b span{font-size:13px;color:var(--text-3)}
.crumbs-in{font-size:13px;color:var(--text-3);margin-bottom:12px}
.article-wrap{display:grid;grid-template-columns:minmax(0,720px) 220px;gap:48px}
.hart h1{font-size:32px;font-weight:700;letter-spacing:-.02em}.hart .lede{font-size:18px;color:var(--text-2);margin:6px 0 10px}
.hart h2{font-size:20px;font-weight:700;margin:28px 0 8px;scroll-margin-top:80px}.hart p{line-height:1.65;color:var(--text-1)}
.shot{margin:16px 0}.shot-art{aspect-ratio:16/8;border-radius:var(--r-lg);border:1px solid var(--border);background:linear-gradient(180deg,#fff,var(--bg-subtle));display:grid;place-items:center;color:var(--text-3)}
.shot figcaption{font-size:13px;color:var(--text-3);margin-top:6px}
.helpful{display:flex;align-items:center;gap:10px;margin-top:28px;padding:14px 16px;border-radius:var(--r-lg);background:var(--bg-subtle)}
.toc{position:sticky;top:88px;align-self:start;display:grid;gap:8px;font-size:13px;border-left:1px solid var(--border);padding-left:16px}
.toc a{color:var(--text-2);text-decoration:none}.toc a[aria-current]{color:var(--brand-teal-700);font-weight:600}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:18px}.timeline>li{padding-left:16px;border-left:2px solid var(--border)}
.thread{display:grid;gap:14px}.thread .msg{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--border)}
.thread .msg.sys{background:var(--bg-subtle)}.thread .msg p{margin-top:4px;line-height:1.55}
details.card>summary{padding:14px 16px}
.seg.sm button{height:26px;font-size:12px;padding:0 8px}
@media (max-width:1100px){.vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-wrap{grid-template-columns:1fr}.toc{display:none}}
@media (max-width:767px){.vid-grid,.vid-grid.cols-2{grid-template-columns:1fr}.help-hero h1{font-size:26px}}
.badge-neutral{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)}
.badge-violet{background:var(--violet-50);color:var(--violet-700);border-color:var(--violet-200)}
.badge-info{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.ico-tile.info{background:#EFF6FF;color:#1D4ED8}
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.dl.sm{grid-template-columns:1fr auto;font-size:13px;row-gap:4px}.dl.sm dd{text-align:right}
.kv-big{margin:14px 0 12px;color:var(--text-3)}.kv-big .num{font-size:32px;font-weight:700;color:var(--text-1);letter-spacing:-.02em}
.card.mt{margin-top:16px}
.email-prev{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-subtle)}
.ep-h{padding:10px 14px;border-bottom:1px solid var(--border);background:#fff;font-size:13px}
.ep-b{max-width:440px;margin:18px auto;background:#fff;border-radius:12px;padding:24px;display:grid;gap:10px;box-shadow:var(--sh-sm);font-size:14px}
.ep-logo{width:36px;height:36px;border-radius:10px;background:var(--brand-teal-500);color:#fff;display:grid;place-items:center}
.trial-meters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}.trial-meters>div{display:grid;gap:3px}
.mk{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:6px;font-weight:700}
.mk.ok{background:var(--success-50);color:var(--success-700)}.mk.warn{background:var(--warning-50);color:var(--warning-700)}.mk.danger{background:var(--danger-50);color:var(--danger-600)}
a.card.kpi{text-decoration:none;color:inherit}a.card.kpi:hover{border-color:var(--brand-teal-500)}
@media (max-width:767px){.trial-meters{grid-template-columns:repeat(2,1fr)}}
/* auth + states */
body.bare{background:var(--bg-subtle)}
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 16px}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-md);padding:32px;display:grid;gap:16px}
.auth-card h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text-1);text-decoration:none}.auth-brand b{color:var(--brand-teal-600,#0B7F8C)}
.logo-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#14B8C4,#0B7F8C);display:grid;place-items:center;color:#fff}
.auth-below{font-size:14px;color:var(--text-2)}
.langs{display:flex;gap:14px;font-size:13px;flex-wrap:wrap;justify-content:center}.langs a{color:var(--text-3);text-decoration:none}.langs a[aria-current]{color:var(--text-1);font-weight:600}
.acct-pick{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.acct-pick a{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;color:inherit;text-decoration:none}.acct-pick a:hover{border-color:var(--brand-teal-500);background:var(--accent-soft)}
.acct-pick b{display:block}.acct-pick span span{font-size:13px;color:var(--text-3)}
.nf{max-width:560px;margin:60px auto}
.welcome{max-width:760px}.welcome h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
.steps-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.steps-list li{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:12px}
.steps-list li b{display:block}.steps-list li span{font-size:13px;color:var(--text-3)}
.steps-list .n{width:28px;height:28px;border-radius:50%;display:grid!important;place-items:center;background:var(--bg-subtle);font-weight:700;color:var(--text-2)!important;flex:none}
.steps-list li.done .n{background:var(--success-50);color:var(--success-700)!important}.steps-list li.next{border-color:var(--brand-teal-500);box-shadow:0 0 0 3px var(--accent-soft)}
.states-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sk{height:12px;border-radius:6px;background:linear-gradient(90deg,#EEF1F5,#F7F9FB,#EEF1F5);background-size:200% 100%;animation:sk 1.4s infinite}.sk.box{height:64px;flex:1}
@keyframes sk{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.toast.static{position:static;transform:none;opacity:1;box-shadow:var(--sh-sm)}
.gg{max-width:760px;margin:0 auto;background:#fff;min-height:100vh}
.gg-head{position:relative}.gg-cover{height:180px;overflow:hidden}.gg-cover>*{width:100%;height:100%;object-fit:cover}
.gg-brand{display:flex;gap:10px;align-items:center;padding:12px 20px;margin-top:-28px;position:relative}.gg-brand .avatar{border:3px solid #fff;width:52px;height:52px}
.gg-brand b{display:block;margin-top:24px}.gg-brand span:not(.avatar){font-size:13px;color:var(--text-3)}
.gg-body{padding:4px 20px 32px}.gg-body h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.gg-acts{margin:16px 0;flex-wrap:wrap}.gg-acts .btn-primary{flex:1;justify-content:center}
.gg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.gg-ph{padding:0;border:0;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--bg-subtle);cursor:pointer}.gg-ph img{width:100%;height:100%;object-fit:cover;display:block}
.gg-foot{margin-top:24px;font-size:12px;color:var(--text-3);text-align:center}
.gg-scrim{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:50}.gg-sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:#fff;border-radius:20px 20px 0 0;padding:20px;box-shadow:var(--sh-xl)}.gg-sheet>div{max-width:520px;margin:0 auto}
.poster-stage{background:repeating-conic-gradient(#EEF1F5 0 25%,#F6F8FA 0 50%) 0 0/20px 20px;border-radius:16px;padding:32px;display:grid;justify-items:center;align-content:start}
.poster{width:300px;aspect-ratio:4/6;background:#fff;border-radius:6px;box-shadow:0 12px 30px rgba(16,24,40,.18);padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.poster.tall{aspect-ratio:11/17}
.p-top{display:flex;gap:8px;align-items:center;font-size:13px}.poster h3{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#0B7F8C}
.p-qr{width:150px}.p-qr svg{width:100%;display:block}.poster p{font-size:13px;color:var(--text-2)}.p-url{margin-top:auto;font:600 13px var(--font);color:var(--text-1)}
.split.wide-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.states-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.states-grid{grid-template-columns:1fr}.auth-card{padding:24px}.split.wide-r{grid-template-columns:1fr}}
.card-body>.field+.field,.card-body>.field+.form-grid,.card-body>.form-grid+.field{margin-top:12px}.card-body>.field+.btn{margin-top:14px}

/* a11y v2: link colour with 4.5:1 on app grey, underlined when it sits inside running text */
:root{--link:#0A6F7B}
a,.link{color:var(--link)}
:where(p,li,dd,small,label,.help,.muted,.t2,.hint,.banner,td,.lede) a:not([class]),:where(p,li,dd,small,label,.help,.muted,.t2,.hint,.banner,.lede) span>a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.empty .empty-t{font-weight:700;line-height:1.3}
@media (max-width:640px){.btn .hide-sm{display:inline!important;position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0}}
/* links inside running text are underlined, not colour-only */
main a:not([class]),.gg a:not([class]),.auth a:not([class]),.drawer a:not([class]),.modal a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
:where(.crumbs,.toc,.nav,.tabs,.subnav,.seg,.menu,.acct-pick,.idx) a:not([class]){text-decoration:none}
.check>input[type=checkbox],.check>input[type=radio]{width:18px;height:18px;margin:3px;flex:none}
:is(main,.gg,.auth,.drawer,.modal) :is(.crumbs,.toc,.nav,.tabs,.subnav,.seg,.menu,.acct-pick,.idx,.cat-grid,.vid-grid,.table,.list,.card-head,h1,h2,h3,h4) a:not([class]){text-decoration:none}
.seg a:not([class]),.tabs a:not([class]){text-decoration:none!important}
@media (max-width:640px){.row.wrap-sm{flex-wrap:wrap!important}.row.wrap-sm>.btn{margin-left:58px}}

/* ===================== v3 (round 3) ===================== */
.only-sm{display:none!important}
@media (max-width:640px){.only-sm{display:revert!important}ul.only-sm{display:block!important}}
.ell{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.ev-head .meta{min-width:0}.ev-head .meta>span{min-width:0;max-width:100%;overflow:hidden}
.ev-head .meta>span .ell{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.ev-head .ev-name{overflow:hidden;text-overflow:ellipsis}
.ev-alert .short{display:none}
@media (max-width:640px){.ev-alert .long{display:none}.ev-alert .short{display:inline}
 .ev-strip .stat-i:not(.key):not(.more-stats):not(.empty-stats){display:none}
 .compact .ev-alert{padding:6px 14px!important;gap:8px!important;flex-wrap:nowrap!important;align-items:center}
 .compact .ev-alert .msg{font-size:13px}
 .compact .ev-alert .acts .btn{height:32px}
}
/* tabs fade when they scroll */
.ev-tabs{position:relative}
.ev-tabs .tabs{overflow-x:auto;scrollbar-width:none}
.ev-tabs .tabs::-webkit-scrollbar{display:none}
@media (max-width:640px){.ev-tabs .tabs-wrap{mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}}
/* 820: header actions get their own row, right-aligned */
@media (min-width:641px) and (max-width:1023px){.ev-head .acts{justify-content:flex-end}}
/* tap targets */
.seg button,.seg a{min-height:28px;min-width:28px}
.ph-open{min-width:24px;min-height:24px}
.ph .tc button,.ph .tc.cbx{min-width:28px;min-height:28px}
.cc{font-size:12px}
@media (hover:none) and (pointer:coarse){
 .seg button,.seg a,.chip,.btn-sm,.btn-icon,.ph .tc button,.ph .tc.cbx,.tab,.link,.menu-item{min-height:44px}
 .seg button,.seg a,.btn-icon,.ph .tc button,.ph .tc.cbx{min-width:44px}
 .chip{height:auto}
 .ph .tc.tr{gap:2px}
}
/* Overlay toggle */
.seg-group{display:inline-flex;gap:6px;align-items:center}
.ov-tog.on{background:var(--accent-soft);border-color:var(--brand-teal-100);color:#064E56}
.ov-note{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--text-2);margin:0 0 10px}
/* checkbox cells */
.check.solo{display:inline-grid;place-items:center;min-width:24px;min-height:24px;margin:0;padding:0}
.check.solo input{width:18px;height:18px;margin:0;accent-color:var(--brand-teal-600)}
th.cb-cell,td.cb-cell{width:44px;padding-right:0!important}
tr.is-sel td{background:var(--accent-soft)}
/* guest phone cards */
.g-cards{list-style:none;margin:0;padding:0}
.g-card{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:12px 14px;border-bottom:1px solid var(--border)}
.g-card:last-child{border-bottom:0}
.g-card .check.solo{margin-top:2px}
.g-l1{display:flex;align-items:center;gap:8px;justify-content:space-between;min-width:0}
.g-l1 a{color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-l1 .status{flex:none;font-size:12px}
.g-l2{font-size:13px;color:var(--text-2);margin-top:2px}
.g-l3{font-size:12px;color:var(--text-3);margin-top:2px}
.g-act{grid-column:2/-1;display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
@media (max-width:640px){.g-card .g-main{min-width:0}}
/* rails fade at narrow desktop */
.rail[data-fade] .chips{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
/* messages */
.var-chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:6px;background:var(--brand-teal-50);border:1px solid var(--brand-teal-100);color:#064E56;font:500 12px/1.6 var(--mono,ui-monospace,Menlo,monospace)}
.var-chip.btn-chip{cursor:pointer;min-height:28px}
.outbox{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:12px 18px;margin-top:16px}
.outbox .ob-items{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;flex:1;min-width:0}
.outbox .stat-i.danger b{color:var(--danger-600)}.outbox .stat-i.warn b{color:var(--warning-700)}
.outbox .ob-sub{font-size:12px;flex-basis:100%}
.log-mark td{background:var(--warning-50);color:var(--warning-800);font-size:13px;font-weight:500}
.reach-box{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle);border:1px solid var(--border);font-size:13px}
.reach-box b{font-size:14px}
.rcard .rec.num{font-weight:600;color:var(--text-2)}
/* report */
.rep-div{display:flex;align-items:baseline;gap:10px;font-size:15px;margin:24px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.rep-div small{font-size:12px;color:var(--text-3);font-weight:500}
.list.plain li{padding:8px 0}
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:13px}
.bar-row b{text-align:right}
@media (max-width:640px){.rep-bar{flex-wrap:wrap}.rep-bar>p{flex-basis:100%}.bar-row{grid-template-columns:120px minmax(0,1fr) 24px}}
/* sales */
.tbl-sum{font-size:13px;color:var(--text-2);padding:10px 16px}
/* branding overlay slots */
.ov-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.ov-slot{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-surface)}
.ov-art{display:grid;place-items:center;background:var(--bg-subtle) repeating-conic-gradient(#eef1f4 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:8px;color:var(--text-3);overflow:hidden}
.ov-land .ov-art{aspect-ratio:3/2}.ov-port .ov-art{aspect-ratio:3/2}
.ov-port .ov-art::before{content:"";display:block;height:86%;aspect-ratio:2/3;border:2px dashed var(--border-strong);border-radius:6px;grid-area:1/1}
.ov-port .ov-art .icon{grid-area:1/1}
.ov-art img{width:100%;height:100%;object-fit:cover}
.ov-meta{display:flex;flex-direction:column;gap:4px;font-size:13px}
.warn-t{color:var(--warning-700);font-size:12px}
@media (max-width:640px){.ov-slots{grid-template-columns:1fr}}
/* trash card actions wrap under the title on phones */
@media (max-width:640px){.card-head:has(.tr-acts){flex-wrap:wrap}.card-head .tr-acts{flex-basis:100%;margin-left:0;display:flex;gap:8px}}
.card-head .tr-acts{display:flex;gap:6px;align-items:center}
/* phone: first photo higher */
@media (max-width:640px){
 .ev-head{padding:10px 14px!important}
 .ev-head .meta{display:none}
 .ev-head .cover-sm{width:44px!important;height:44px!important}
 .ev-head{grid-template-columns:44px minmax(0,1fr)!important}
 .ev-strip{padding:6px 14px!important}
 .ptool{margin:8px 0!important;gap:6px}
 .ptool .input{flex:1 1 0;min-width:0}
 .ptool .rail{order:5;flex-basis:100%}
 .page-crumbs,.crumbs{display:none}
}
@media (max-width:640px){
 .compact .ev-alert>.icon{display:none}
 .compact .ev-alert .msg{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .compact .ev-alert .acts{flex:none}
 .ev-strip .live-sig{display:none!important}
 .ev-head .acts{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)!important;gap:8px}
 .ev-head .acts>a[title="See what guests see"]{width:44px;padding:0;justify-content:center}
 .ev-head .acts>a[title="See what guests see"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (hover:none) and (pointer:coarse){
 .ph-grid:not(.selecting) .ph .tc{display:none}
 .ph-grid.selecting .ph .tc.tr{display:none}
}
@media (min-width:641px) and (max-width:1023px){.ptool .search{max-width:170px}.ptool{gap:6px}}
.help-dot{width:24px;height:24px;background:radial-gradient(circle,var(--bg-muted) 8.5px,transparent 9.5px)}
@media (pointer:coarse){a:not([class]),a.stretch,.g-l1 a{padding-block:4px}.g-l1 a{display:inline-block;padding-block:2px;line-height:20px}}
@media (max-width:1023px) and (min-width:641px){.side-search span:not(.kbd){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.ev-head .meta>span{display:block;flex:0 1 auto}
.ev-head .meta>span .ell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-head .meta>span .ell .icon{display:inline-block;vertical-align:-3px;margin-right:6px}
.only-tab{display:none!important}
@media (max-width:900px){.hide-tab{display:none!important}ul.only-tab{display:block!important}}

/* wide admin tables keep stacking up to 900px */
@media (min-width:768px) and (max-width:900px){
[data-screen^="ops"] .stack-table thead,[data-screen="settings-devices"] .stack-table thead{display:none}
[data-screen^="ops"] .stack-table,[data-screen="settings-devices"] .stack-table,[data-screen^="ops"] .stack-table tbody,[data-screen="settings-devices"] .stack-table tbody,[data-screen^="ops"] .stack-table tr,[data-screen="settings-devices"] .stack-table tr,[data-screen^="ops"] .stack-table td,[data-screen="settings-devices"] .stack-table td{display:block;width:100%}
[data-screen^="ops"] .stack-table tr,[data-screen="settings-devices"] .stack-table tr{padding:12px 16px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
[data-screen^="ops"] .stack-table td,[data-screen="settings-devices"] .stack-table td{padding:0;border:0!important;background:none!important}
[data-screen^="ops"] .stack-table td[data-l]::before,[data-screen="settings-devices"] .stack-table td[data-l]::before{content:attr(data-l)": ";color:var(--text-3);font-size:12px}
[data-screen^="ops"] .stack-table td.first,[data-screen="settings-devices"] .stack-table td.first{grid-column:1}
[data-screen^="ops"] .stack-table td.acts-cell,[data-screen="settings-devices"] .stack-table td.acts-cell{grid-column:2;grid-row:1/span 2;align-self:start}
[data-screen^="ops"] .stack-table td:not(.first):not(.acts-cell),[data-screen="settings-devices"] .stack-table td:not(.first):not(.acts-cell){grid-column:1}
[data-screen^="ops"] .stack-table td.cbx,[data-screen="settings-devices"] .stack-table td.cbx{display:none}
[data-screen^="ops"] .stack-table .hide-sm,[data-screen="settings-devices"] .stack-table .hide-sm{display:none}
}
@media (max-width:640px){.rep-bar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.rep-bar>p{grid-column:1/-1}.rep-bar>.push{display:none}.rep-bar>.btn-primary{grid-column:1/-1;order:-1;justify-content:center}.rep-bar>p{order:-2}.rep-bar>.btn{justify-content:center}}
@media (max-width:640px){.ev-tabs .tabs{padding-right:36px}}

/* ===================== v4 (round 4, lean) ===================== */
/* M1: header meta wraps instead of truncating; filter chips wrap on wide screens instead of hiding */
.ev-head .meta{flex-wrap:wrap!important;white-space:normal!important;overflow:visible!important}
.ev-head .meta>span{overflow:visible;max-width:none}
.ev-head .meta>span .ell{overflow:visible;white-space:nowrap}
.ptool .input{width:170px}
@media (min-width:768px){.rail .chips{flex-wrap:wrap;overflow:visible;mask-image:none}}
.pause-chip{display:none}
/* M4: phone event header, one title row, no separate banner */
@media (max-width:640px){
 .ev-head{grid-template-columns:minmax(0,1fr) auto!important;padding:10px 14px!important;gap:2px 10px!important}
 .ev-head .cover-sm{display:none}
 .ev-head h1{grid-column:1;grid-row:1;font-size:17px;flex-wrap:nowrap;min-width:0}
 .ev-head .acts{grid-column:2!important;grid-row:1!important;display:flex!important;width:auto!important;gap:6px}
 .ev-head .acts .rel,.ev-head .acts .rel>.btn{width:auto!important}
 .ev-head .acts .btn{height:36px;padding:0 10px}
 .ev-head .acts .chev{display:none}
 .ev-head .meta{grid-column:1/-1!important;flex-wrap:nowrap!important;white-space:nowrap!important;overflow:hidden!important}
 .ev-head .meta .m-opt{display:none}
 .ev-head .meta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .ev-strip .live-sig{display:none!important}
 .ev-strip{padding:6px 14px!important;gap:4px 14px!important}
 .pause-chip{display:inline-flex!important;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border-radius:999px;border:1px solid var(--warn-border,#F5C26B);background:var(--warn-bg,#FFF7E6);color:var(--warn-text,#7A4A00);font:inherit;font-size:13px;cursor:pointer}
 .ev-tabs .tab{padding-left:10px!important;padding-right:10px!important}
}
@media (min-width:768px) and (max-width:1439px){
 .ptool .input{width:40px;padding:0 10px;transition:width .15s;cursor:text}
 .ptool .input input::placeholder{color:transparent}
 .ptool .input:focus-within{width:200px}
 .ptool .input:focus-within input::placeholder{color:inherit}
}
@media (max-width:640px){.ev-head .ev-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ev-head h1>.ev-name{flex:0 1 auto}}
@media (max-width:640px){.ev-strip{gap:4px 12px!important}.pause-chip{padding:2px 8px!important;gap:4px!important}}
@media (max-width:640px){.pause-chip .icon{display:none}}
@media (max-width:640px){
 body:has(.ev-head) main.page{padding-top:8px!important}
 .ev-strip .more-stats{min-height:28px!important;height:28px;padding:0 4px}
 .ptool .rail .chips{padding-top:0;padding-bottom:0}
 .ptool{row-gap:6px!important;margin:6px 0!important}
}
.drawer-body{padding-bottom:32px}
@media (max-width:640px){.ev-tabs .tabs{gap:0!important}.ev-tabs .tab{padding-left:7px!important;padding-right:7px!important;font-size:14px}.ev-tabs .tab .icon{display:none}}
@media (max-width:640px){.ev-tabs .tab,.ev-tabs .tab *{font-size:13.5px!important}.ev-tabs .tab{padding-left:6px!important;padding-right:6px!important;gap:4px!important}.ev-tabs .tab .count{font-size:11.5px!important;padding:0 5px!important;margin-left:2px!important}}
@media (max-width:640px){.ev-tabs .tab{padding-left:4px!important;padding-right:4px!important;flex:1 0 auto}}
@media (max-width:640px){.ev-tabs .tabs-wrap{mask-image:none!important}}
@media (min-width:768px) and (max-width:1439px){.ptool .input{position:relative}.ptool .input input{position:absolute;inset:0;width:100%;height:100%;padding-left:34px;background:transparent}.ptool .input:focus-within input{position:static;padding-left:0}}