/* GENERATED by tools/redesign/import_demo.mjs from the approved demo (Vendigoose-redesign/demo/src). Do not edit:
   live-only rules belong in styles/vendigoose-ui-app.css. */

/* ===== demo/src/00-tokens.css ===== */
/* ========================================================================================
   VENDIGOOSE FLOW - design tokens (light + dark). One set of values for the whole app.
   Brand blue sampled from the logo (rgb 2,115,251). Accent gradient: brand blue -> cyan.
   ======================================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format("woff2")}
:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* LIGHT */
  --bg:#eef3fb;--surface:#ffffff;--surface-2:#f5f8fe;--surface-3:#ffffff;--surface-inv:#0b1530;
  --line:#e0e8f6;--line-2:#cbd7ee;--text:#0a1430;--muted:#506088;--faint:#8593b4;
  --brand:#0273fb;--brand-2:#14b8e6;--brand-ink:#ffffff;
  --accent:var(--brand);--accent-2:var(--brand-2);
  --ok:#0e9f6e;--warn:#d97706;--bad:#e0344b;--info:#0a8bd6;--violet:#7c5cf2;--teal:#0d9488;
  --glow:0 0 0 1px color-mix(in srgb,var(--brand) 32%,transparent),0 10px 34px color-mix(in srgb,var(--brand) 20%,transparent);
  --sh1:0 1px 2px rgba(15,35,90,.06),0 4px 14px rgba(15,35,90,.05);
  --sh2:0 24px 70px rgba(15,35,90,.24);
  --grid:rgba(2,115,251,.06);--mesh1:rgba(20,184,230,.15);--mesh2:rgba(2,115,251,.15);--mesh3:rgba(124,92,242,.08);
  --r1:8px;--r2:12px;--r3:18px;--rail:62px;--rail-open:230px;--top:56px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#050a18;--surface:#0b1330;--surface-2:#101a3b;--surface-3:#162247;--surface-inv:#eaf1ff;
  --line:#1b2750;--line-2:#2a3b72;--text:#e9f0ff;--muted:#9aabd6;--faint:#6677a8;
  --brand:#2f8cff;--brand-2:#2fd2f5;--brand-ink:#04102a;
  --ok:#2ee59d;--warn:#ffb42e;--bad:#ff5d73;--info:#4cc3ff;--violet:#a58bff;--teal:#2dd4bf;
  --glow:0 0 0 1px color-mix(in srgb,var(--brand) 45%,transparent),0 10px 40px color-mix(in srgb,var(--brand) 24%,transparent);
  --sh1:0 1px 2px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.28);
  --sh2:0 28px 80px rgba(0,0,0,.7);
  --grid:rgba(47,140,255,.07);--mesh1:rgba(47,210,245,.15);--mesh2:rgba(47,140,255,.2);--mesh3:rgba(165,139,255,.1);
  color-scheme:dark;
}
:root{--tone:var(--brand)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:13px/1.45 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(1000px 520px at 90% -14%,var(--mesh1),transparent 62%),
 radial-gradient(900px 480px at 4% -10%,var(--mesh2),transparent 62%),
 radial-gradient(700px 400px at 52% 112%,var(--mesh3),transparent 60%),
 linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px;
 -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.3))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}.faint{color:var(--faint)}.bad{color:var(--bad)}.ok{color:var(--ok)}.warn{color:var(--warn)}
.mono{font-family:var(--mono);font-size:12px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
svg:not([width]){width:16px;height:16px;flex:0 0 auto}
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:2px solid transparent;background-clip:content-box}
/* tones: every coloured thing reads --tone */
.t-brand{--tone:var(--brand)}.t-ok{--tone:var(--ok)}.t-warn{--tone:var(--warn)}.t-bad{--tone:var(--bad)}.t-info{--tone:var(--info)}.t-violet{--tone:var(--violet)}.t-teal{--tone:var(--teal)}.t-flat{--tone:var(--faint)}

/* ===== demo/src/10-shell.css ===== */
/* ===== shell: rail + top bar + page skeleton (identical on every page) ===== */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;transition:grid-template-columns .18s var(--ease)}
.app.pinned{grid-template-columns:var(--rail-open) 1fr}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(18px);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 11px;transition:width .18s var(--ease),box-shadow .18s;overflow:hidden}
.rail:hover,.rail.pin{width:var(--rail-open)}
.rail:hover:not(.pin){box-shadow:var(--sh2)}
.brand{display:flex;align-items:center;gap:12px;height:42px;padding:0 3px;margin-bottom:12px;white-space:nowrap;border:0;background:none;width:100%;text-align:left}
.brand .goose{width:34px;height:34px;flex:0 0 34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 14%,var(--surface)),color-mix(in srgb,var(--brand-2) 10%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));box-shadow:0 0 22px color-mix(in srgb,var(--brand) 22%,transparent)}
.brand .goose img{height:25px;width:auto;display:block}
.brand .wm{height:22px;width:auto;display:block;opacity:1}
.rail-sec{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:14px 12px 5px;white-space:nowrap;height:32px}
.nav{display:flex;align-items:center;gap:13px;height:38px;padding:0 11px;margin-bottom:2px;border-radius:11px;color:var(--muted);white-space:nowrap;position:relative;border:0;background:transparent;text-align:left;width:100%;transition:background .12s,color .12s;font-weight:560}
.nav:hover{background:var(--surface-2);color:var(--text)}
.nav svg{flex:0 0 18px;width:18px;height:18px}
.nav.on{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 20%,transparent),color-mix(in srgb,var(--brand) 5%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 28%,transparent)}
.nav.on svg{color:var(--brand)}
.nav.on::before{content:"";position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--brand),var(--brand-2));box-shadow:0 0 12px var(--brand)}
.nav .cnt{margin-left:auto;min-width:19px;height:19px;border-radius:10px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.nav .cnt.soft{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand);box-shadow:none}
.rail .grow{flex:1}
.rail-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.rail-ver{font-size:10px;color:var(--faint);padding:8px 12px 2px;white-space:nowrap;letter-spacing:.02em}
.rail:not(:hover):not(.pin) .nav>span:not(.cnt),.rail:not(:hover):not(.pin) .brand .wm,.rail:not(:hover):not(.pin) .rail-sec,.rail:not(:hover):not(.pin) .rail-ver{opacity:0}
.nav>span,.brand .wm,.rail-sec,.rail-ver{transition:opacity .12s}
.rail:not(:hover):not(.pin) .nav .cnt{position:absolute;right:6px;top:3px;min-width:15px;height:15px;font-size:9px}
.pinbtn{margin-left:auto;width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--faint);display:grid;place-items:center;flex:0 0 26px}
.pinbtn:hover{background:var(--surface-2);color:var(--text)}.pinbtn.on{color:var(--brand)}
.rail:not(:hover):not(.pin) .pinbtn{opacity:0}
.main{grid-column:2;min-width:0;display:flex;flex-direction:column}
/* top bar: global context lives here, once */
.top{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 22px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;white-space:nowrap;min-width:0}
.crumb b{color:var(--text);font-weight:650}
.crumb .sep{color:var(--faint)}
.demo-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:6px;padding:2px 7px;font-weight:700}
.search{margin-left:12px;flex:0 1 380px;display:flex;align-items:center;gap:9px;height:34px;padding:0 11px;border:1px solid var(--line);background:var(--surface);border-radius:11px;color:var(--faint);box-shadow:var(--sh1);text-align:left}
.search:hover{border-color:var(--line-2)}
.search span:first-of-type{flex:0 0 auto;display:grid;place-items:center}.search span:nth-of-type(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.kbd{font:600 10.5px var(--mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--muted);background:var(--surface-2);white-space:nowrap}
.spacer{flex:1}
.ctx{display:flex;align-items:center;gap:8px}
.ibtn{width:34px;height:34px;border-radius:11px;border:1px solid transparent;background:transparent;display:grid;place-items:center;color:var(--muted);position:relative;flex:0 0 34px}
.ibtn:hover{background:var(--surface);border-color:var(--line);color:var(--text)}
.ibtn.on{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.ibtn .badge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:8px;background:var(--bad);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.ibtn .dotp{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:11px;display:grid;place-items:center;border:0;box-shadow:0 0 0 2px var(--bg),0 0 0 3px color-mix(in srgb,var(--brand) 50%,transparent);flex:0 0 30px}
.avatar.sm{width:24px;height:24px;font-size:9.5px;flex-basis:24px;box-shadow:none}
.avatar.lg{width:40px;height:40px;font-size:14px;flex-basis:40px}
.avatar.g2{background:linear-gradient(135deg,#7c5cf2,#ec4899)}.avatar.g3{background:linear-gradient(135deg,#0d9488,#22c55e)}.avatar.g4{background:linear-gradient(135deg,#f59e0b,#ef4444)}.avatar.g5{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
/* banner (update / offline / env notices): impossible to miss, never in the way */
.banner{display:flex;align-items:center;gap:12px;padding:8px 22px;font-size:12.5px;background:color-mix(in srgb,var(--tone) 12%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--tone) 30%,var(--line));color:var(--text)}
.banner .ico{color:var(--tone)}.banner b{font-weight:650}.banner .acts{margin-left:auto;display:flex;gap:8px}
/* page skeleton: header -> band -> tabs -> panels */
.page{padding:20px 22px 56px;max-width:1600px;width:100%;margin:0 auto;animation:rise .22s var(--ease)}
@keyframes rise{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ph .ico{width:42px;height:42px;flex:0 0 42px;border-radius:14px}
.ph h1{margin:0;font-size:23px;letter-spacing:-.025em;line-height:1.15;font-weight:750}
.ph .sub{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ph .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.back{margin-right:-4px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.s12{grid-column:span 12}.s9{grid-column:span 9}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.ml-auto{margin-left:auto}.grow1{flex:1;min-width:0}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:1100px){.s8,.s9,.s7,.s6,.s5,.s4,.s3{grid-column:span 12}.search{display:none}}
@media (max-width:760px){.app,.app.pinned{grid-template-columns:1fr}.rail{transform:translateX(-100%);width:var(--rail-open)}.rail.open{transform:none;box-shadow:var(--sh2)}.main{grid-column:1}.page{padding:14px 12px 80px}.top{padding:0 12px}.crumb .hide-s{display:none}}

/* ===== demo/src/20-components.css ===== */
/* ===== components: the ONLY building blocks pages use ===== */
.ico{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;place-items:center;color:var(--tone);background:color-mix(in srgb,var(--tone) 14%,transparent);border:1px solid color-mix(in srgb,var(--tone) 22%,transparent)}
.ico svg{width:16px;height:16px}
.ph .ico svg{width:20px;height:20px}
/* chips / status / badges: one family */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
button.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip.tone,.chip[class*=" t-"]{background:color-mix(in srgb,var(--tone) 13%,transparent);color:var(--tone);border-color:color-mix(in srgb,var(--tone) 24%,transparent)}
.chip.sq{border-radius:8px;height:22px;font-size:11px;padding:0 8px}
.chip.on{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 32%,transparent)}
.chip .x{margin-left:2px;border:0;background:none;color:inherit;opacity:.65;padding:0;display:grid;place-items:center}.chip .x:hover{opacity:1}
.dot{width:7px;height:7px;border-radius:50%;background:var(--tone,currentColor);display:inline-block;box-shadow:0 0 8px var(--tone,currentColor);flex:0 0 7px}
.status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:650;color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent);white-space:nowrap}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tone)}
.status.plain::before{display:none}
/* segmented + tabs */
.seg{display:inline-flex;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;gap:2px}
.seg button{border:0;background:transparent;height:26px;padding:0 11px;border-radius:8px;font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--surface-3);color:var(--text);box-shadow:var(--sh1),inset 0 0 0 1px var(--line-2)}
.seg button .n{margin-left:5px;font-size:10.5px;color:var(--faint)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;height:38px;padding:0 14px;color:var(--muted);font-weight:600;font-size:13px;position:relative;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text)}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 10px var(--brand)}
.tabs .n{margin-left:6px;font-size:10.5px;padding:1px 6px;border-radius:8px;background:var(--surface-2);color:var(--muted)}
/* buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-weight:600;font-size:12.5px;white-space:nowrap;transition:background .12s,border-color .12s,box-shadow .12s,transform .08s}
.btn:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2));background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:0 0 15px}
.btn.pri{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--brand-2)));border-color:transparent;color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--brand) 32%,transparent)}
.btn.pri:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--brand-2)))}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}.btn.ghost:hover{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line-2))}.btn.danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn.danger.pri{background:linear-gradient(135deg,var(--bad),color-mix(in srgb,var(--bad) 60%,#f97316));color:#fff;border-color:transparent}
.btn.ok-b{background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 55%,var(--brand-2)));color:#fff;border-color:transparent;box-shadow:0 6px 20px color-mix(in srgb,var(--ok) 28%,transparent)}
.btn.sm{height:26px;padding:0 9px;font-size:12px;border-radius:8px}
.btn.lg{height:38px;padding:0 18px;font-size:13.5px;border-radius:12px}
.btn[disabled]{opacity:.5;pointer-events:none}
.inp,.sel,.txa{height:32px;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:0 11px;min-width:0;color:var(--text);transition:border-color .12s,box-shadow .12s}
.txa{height:auto;padding:9px 11px;resize:vertical;min-height:70px;line-height:1.45;width:100%}
.inp:hover,.sel:hover,.txa:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line-2))}
.inp:focus,.sel:focus,.txa:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.inp::placeholder,.txa::placeholder{color:var(--faint)}
.sel{padding-right:26px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238593b4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sel.sm,.inp.sm{height:28px;font-size:12px;border-radius:9px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label,.lbl{font-size:11.5px;font-weight:650;color:var(--muted)}
.field .hint{font-size:11.5px;color:var(--faint)}
.field.err .inp,.field.err .sel{border-color:var(--bad)}.field .errt{font-size:11.5px;color:var(--bad)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}.form-grid .full{grid-column:1/-1}
.sw{position:relative;width:34px;height:20px;border-radius:10px;background:var(--line-2);border:0;transition:background .15s;flex:0 0 34px;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s var(--ease)}
.sw.on{background:linear-gradient(135deg,var(--brand),var(--brand-2))}.sw.on::after{transform:translateX(14px)}
.cb{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-2);background:var(--surface);display:inline-grid;place-items:center;flex:0 0 16px;padding:0;color:#fff}
.cb.on{background:var(--brand);border-color:var(--brand)}.cb.mid{background:var(--brand);border-color:var(--brand)}
.cb svg{width:11px;height:11px}
.searchbox{position:relative;display:flex;align-items:center}
.searchbox svg{position:absolute;left:10px;color:var(--faint);width:15px;height:15px;pointer-events:none}
.searchbox .inp{padding-left:32px;min-width:220px}
/* panels: one container; sections divided by hairlines, never nested boxes */
.panel{position:relative;background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);min-width:0;display:flex;flex-direction:column}
.panel::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tone) 70%,transparent),transparent)}
.ph2{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);min-height:54px}
.ph2 h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em}
.ph2 .sub{color:var(--muted);font-size:12px;margin-top:1px}
.ph2 .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pb{padding:16px 18px;flex:1;min-width:0}.pb.flush{padding:0}.pb.tight{padding:10px 18px}
.pf{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;gap:8px;padding:11px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sect{padding:14px 18px;border-top:1px solid var(--line)}.sect:first-child{border-top:0}
.sect-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}.kv>span:first-child{color:var(--muted);display:flex;align-items:center;gap:7px}.kv b{font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.kv .edit{opacity:0;border:0;background:none;color:var(--brand);font-size:11.5px;font-weight:650;margin-left:8px}.kv:hover .edit{opacity:1}
/* metric strip: one card, hairline cells (replaces a row of separate stat cards) */
.strip{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r3);background:color-mix(in srgb,var(--surface) 93%,transparent);box-shadow:var(--sh1);margin-bottom:16px;overflow:hidden;position:relative}
.strip::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2),transparent 80%)}
.cell{padding:13px 16px 12px;border-left:1px solid var(--line);min-width:0;text-align:left;border-top:0;border-right:0;border-bottom:0;background:none;position:relative;display:block}
.cell:first-child{border-left:0}
button.cell{cursor:pointer;transition:background .12s}
button.cell:hover{background:color-mix(in srgb,var(--tone) 7%,transparent)}
button.cell.on{background:color-mix(in srgb,var(--tone) 11%,transparent);box-shadow:inset 0 -2px 0 var(--tone)}
.cell .lbl{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.cell .val{font-size:23px;font-weight:750;letter-spacing:-.03em;line-height:1.12;margin-top:5px;font-variant-numeric:tabular-nums}
.cell .meta{font-size:11.5px;color:var(--faint);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cell .val.t{color:var(--tone)}
.delta{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:6px}
.delta.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}.delta.dn{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}.delta.flat{color:var(--faint);background:var(--surface-2)}
@media (max-width:900px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.cell:nth-child(odd){border-left:0}.cell{border-top:1px solid var(--line)}}
.hero{font-size:32px;font-weight:760;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.grad{background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
/* tables: one implementation */
.tw{overflow:auto;max-width:100%}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.t th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--surface-2) 94%,transparent);color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:0 14px;height:34px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
table.t th.sortable{cursor:pointer}table.t th.sortable:hover{color:var(--text)}
table.t th .arr{margin-left:4px;opacity:.5}table.t th.sorted{color:var(--brand)}table.t th.sorted .arr{opacity:1}
table.t td{padding:0 14px;height:38px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .1s}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
table.t tbody tr.sel{background:color-mix(in srgb,var(--brand) 11%,transparent)}
table.t td.r,table.t th.r{text-align:right}
table.t td.c,table.t th.c{text-align:center}
table.t td .rowact{opacity:0;transition:opacity .1s}table.t tr:hover td .rowact{opacity:1}
table.t td.cbx,table.t th.cbx{width:34px;padding-right:0}
table.t.dense td{height:32px}
.pager{display:flex;align-items:center;gap:10px;padding:9px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.pager .pg{display:flex;gap:4px;margin-left:auto;align-items:center}
.pager .pg button{min-width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:600;color:var(--muted)}
.pager .pg button.on{background:var(--brand);color:#fff;border-color:transparent}
.pager .pg button[disabled]{opacity:.4}
.cellmain{display:flex;align-items:center;gap:10px;min-width:0}
.cellmain b{font-weight:650}.cellmain small{display:block;color:var(--faint);font-size:11px;margin-top:-1px}
.initial{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:11px;color:var(--tone);background:color-mix(in srgb,var(--tone) 15%,transparent);flex:0 0 28px}
.bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;min-width:60px}.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--tone,var(--brand)),color-mix(in srgb,var(--tone,var(--brand)) 60%,var(--brand-2)))}
/* applied-filter chips row */
.chiprow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand) 3%,transparent)}
/* empty / skeleton */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 20px;color:var(--muted)}
.empty .ico{width:52px;height:52px;border-radius:16px;margin-bottom:6px}.empty .ico svg{width:24px;height:24px}
.empty b{color:var(--text);font-size:14px}.empty p{margin:0;max-width:340px;font-size:12.5px}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:8px;height:12px}
@keyframes sk{to{background-position:-200% 0}}
/* timeline */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl .it{position:relative;padding:0 0 14px}.tl .it:last-child{padding-bottom:0}
.tl .it::before{content:"";position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--tone,var(--brand));box-shadow:0 0 0 3px var(--surface),0 0 10px var(--tone,var(--brand))}
.tl .it b{font-weight:650}.tl .it small{color:var(--faint);display:block;font-size:11.5px;margin-top:1px}
/* tooltip */
.q{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);font-size:9px;color:var(--faint);font-weight:700;cursor:help}
.tip{position:relative}
.tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);z-index:80;width:max-content;max-width:260px;background:var(--surface-3);color:var(--text);border:1px solid var(--line-2);font-size:11.5px;font-weight:500;line-height:1.4;padding:7px 10px;border-radius:9px;box-shadow:var(--sh2);white-space:normal;text-transform:none;letter-spacing:0}
/* overlays: three kinds only - drawer, dialog, popover/menu - same surface, same header */
.scrim{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,#020817 55%,transparent);backdrop-filter:blur(3px);animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ov{position:fixed;z-index:91;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line-2);box-shadow:var(--sh2);display:flex;flex-direction:column}
.drawer{top:0;right:0;bottom:0;width:min(560px,100vw);border-radius:var(--r3) 0 0 var(--r3);border-right:0;animation:slidein .22s var(--ease)}
.drawer.wide{width:min(980px,100vw)}.drawer.xl{width:min(1280px,100vw)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.dialog{top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 40px);border-radius:var(--r3);animation:pop .18s var(--ease)}
.dialog.md{width:min(680px,calc(100vw - 24px))}.dialog.lg{width:min(880px,calc(100vw - 24px))}
@keyframes pop{from{transform:translate(-50%,-47%) scale(.97);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.ovh{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:58px;flex:0 0 auto}
.ovh h2{margin:0;font-size:16px;font-weight:720;letter-spacing:-.015em}
.ovh .sub{color:var(--muted);font-size:12px;margin-top:1px}
.ovh .acts{margin-left:auto;display:flex;gap:6px;align-items:center}
.ovb{padding:16px 18px;overflow:auto;flex:1;min-height:0}.ovb.flush{padding:0}
.ovf{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);justify-content:flex-end;flex:0 0 auto}
.ovf .left{margin-right:auto;color:var(--muted);font-size:12px}
.pop{position:fixed;z-index:95;min-width:200px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--sh2);padding:6px;animation:pop2 .12s var(--ease);max-height:70vh;overflow:auto}
@keyframes pop2{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop .mi{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;background:none;border-radius:9px;color:var(--text);text-align:left;font-weight:560;font-size:12.5px}
.pop .mi svg{width:16px;height:16px;color:var(--muted);flex:0 0 16px}
.pop .mi:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.pop .mi.danger{color:var(--bad)}.pop .mi.danger svg{color:var(--bad)}
.pop .mi .kbd{margin-left:auto}
.pop .mi.on::after{content:"✓";margin-left:auto;color:var(--brand);font-weight:800}
.pop hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.pop .mh{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px;font-weight:700}
.pop.form{padding:14px;min-width:300px}
/* command palette */
.palette{top:11vh;left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));border-radius:var(--r3);animation:pop3 .15s var(--ease);overflow:hidden}
@keyframes pop3{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.palette .pin{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-bottom:1px solid var(--line)}
.palette .pin input{flex:1;border:0;background:none;outline:0;font-size:15px}
.palette .list{max-height:52vh;overflow:auto;padding:6px}
.palette .grp{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px;font-weight:700}
.palette .it{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:10px;border:0;background:none;width:100%;text-align:left}
.palette .it.on{background:color-mix(in srgb,var(--brand) 13%,transparent)}
.palette .it small{margin-left:auto;color:var(--faint)}
.palette .foot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px}
/* toasts + bell panel */
.toasts{position:fixed;top:66px;right:18px;z-index:120;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 24px))}
.toast{position:relative;display:flex;gap:11px;padding:12px 14px;border-radius:14px;background:var(--surface-3);border:1px solid color-mix(in srgb,var(--tone) 35%,var(--line-2));box-shadow:var(--sh2);animation:slidein .22s var(--ease);overflow:hidden}
.toast .ico{margin-top:1px}.toast b{display:block;font-weight:680}.toast p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.toast .acts{display:flex;gap:6px;margin-top:8px}
.toast .cd{position:absolute;left:0;bottom:0;height:2px;background:var(--tone);animation:cd 5s linear forwards}
@keyframes cd{from{width:100%}to{width:0}}
/* document viewer mock + pdf paper */
.docview{background:color-mix(in srgb,var(--surface-2) 70%,var(--bg));border-radius:14px;border:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.docbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.paper{background:#fff;color:#1b2440;border-radius:6px;box-shadow:0 12px 40px rgba(10,20,60,.28);padding:34px 38px;margin:18px auto;width:min(560px,calc(100% - 28px));font-size:11px;line-height:1.5}
.paper h4{margin:0;font-size:20px;letter-spacing:.02em}.paper .ln{display:flex;justify-content:space-between;border-bottom:1px solid #e6eaf5;padding:5px 0}
.paper .hl{background:color-mix(in srgb,#0273fb 18%,transparent);outline:1.5px solid #0273fb;border-radius:3px;padding:0 3px}
/* progress / meter */
.meter{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-2);gap:2px}.meter i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:6px}
.sparkline{display:block}
/* alert box inside panels */
.note{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--tone) 25%,transparent);color:var(--text);font-size:12.5px}
.note .ico{width:22px;height:22px;flex-basis:22px;border-radius:7px;background:none;border:0}
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:26px;text-align:center;color:var(--muted);background:color-mix(in srgb,var(--brand) 3%,transparent);transition:all .15s}
.drop:hover,.drop.over{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--text)}

/* ===== demo/src/25-extras.css ===== */
/* role gating: elements tagged data-needs="edit|approve|admin" hide when the viewing role lacks it */
body[data-role=viewer] [data-needs=edit],body[data-role=viewer] [data-needs=approve],body[data-role=viewer] [data-needs=admin],body[data-role=member] [data-needs=approve],body[data-role=member] [data-needs=admin]{display:none!important}
/* docked panels (chat, assistant): beside the page, no scrim */
.dock{position:fixed;z-index:60;top:calc(var(--top) + 10px);right:12px;bottom:12px;width:min(410px,calc(100vw - 24px));background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--sh2);display:flex;flex-direction:column;animation:slidein .22s var(--ease)}
.dock .ovb{padding:0}.dock .dockb{display:flex;flex-direction:column}
.dock.wide{width:min(720px,calc(100vw - 24px))}
@media (min-width:1500px){body.docked .main{padding-right:422px;transition:padding .2s}}
/* chat */
.chatlist{border-bottom:1px solid var(--line);max-height:34%;overflow:auto}
.thread{display:flex;gap:11px;align-items:center;padding:10px 16px;border:0;background:none;width:100%;text-align:left;border-bottom:1px solid var(--line)}
.thread:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}.thread.on{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.thread .tm{flex:1;min-width:0}.thread .tm b{display:block;font-weight:650}.thread .tm small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .un{min-width:18px;height:18px;border-radius:9px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:82%;padding:9px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;font-size:12.5px;line-height:1.45}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,var(--brand-2)));color:#fff;border-color:transparent}
.bub small{display:block;opacity:.65;margin-top:3px;font-size:10.5px}
.bub.card{background:var(--surface);width:100%;max-width:100%;align-self:stretch}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.composer .txa{min-height:38px;height:38px;border-radius:12px;resize:none}
/* assistant */
.ai-hero{background:radial-gradient(400px 160px at 20% 0%,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent 70%),radial-gradient(300px 140px at 90% 10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%)}
.suggest{display:flex;flex-wrap:wrap;gap:6px}
.suggest button{border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:6px 11px;font-size:12px;font-weight:560;color:var(--text)}
.suggest button:hover{border-color:var(--brand);color:var(--brand)}
.typing{display:inline-flex;gap:3px}.typing i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* auth / boot screens */
.authwrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:var(--bg)}
.authwrap::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 80% 0%,var(--mesh1),transparent 60%),radial-gradient(800px 500px at 10% 100%,var(--mesh2),transparent 60%)}
.authcard{position:relative;width:min(400px,100%);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--sh2);padding:30px 28px}
.authcard .logo{display:block;height:34px;margin:0 auto 20px}
/* utility */
.scroll-y{overflow:auto}.nowrap{white-space:nowrap}.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.right{text-align:right}.center{text-align:center}
.hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.pill-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:650;font-size:12.5px;border:0;background:none;padding:0}
.pill-link:hover{text-decoration:underline}
.matrix{display:grid;grid-template-columns:1.4fr repeat(3,70px);align-items:center;font-size:12.5px}
.matrix>div{padding:8px 10px;border-bottom:1px solid var(--line)}.matrix .hd{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}.matrix .rl{font-weight:600}.matrix .c{display:grid;place-items:center}

/* phone layout (<=760px): menu button, compact top bar, wrapping panel headers */
@media (max-width:760px){
 #menuBtn{display:grid!important}
 .crumb{display:none}
 .top{gap:6px;padding:0 10px}
 .ctx .chip{padding:0 8px}.ctx .chip svg:first-child{display:none}
 #envLbl{max-width:92px;overflow:hidden;text-overflow:ellipsis}
 .ph2{flex-wrap:wrap}.ph2 .acts{margin-left:0;width:100%;justify-content:flex-start}
 .ph .acts{margin-left:0;width:100%}
 .toolbar{padding:10px 12px}.searchbox .inp{min-width:0;width:100%}.searchbox{flex:1 1 100%}
 .drawer,.drawer.wide,.drawer.xl{width:100vw;border-radius:0}
 .split{grid-template-columns:1fr}
}

/* ===== top bar carries the page's actions; no separate page header row ===== */
.topacts{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.topacts .btn{height:30px}.topacts .chip{height:28px}
.topacts:empty{display:none}
.crumb{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1.2;min-width:0;flex:0 1 auto}
.crumbmain{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:14px}
.crumbmain b{font-size:14.5px}
.crumbsub{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(240px,34vw,560px);display:flex;gap:6px;align-items:center}
.crumbsub .chip{height:20px;font-size:11px}
body.has-topacts .search{flex:0 0 34px;width:34px;padding:0;justify-content:center;margin-left:6px}
body.has-topacts .search span:nth-of-type(2),body.has-topacts .search .kbd{display:none}
.page{padding-top:16px}
.ph.slim{margin-bottom:12px}.ph.slim .ico{width:34px;height:34px;flex-basis:34px;border-radius:11px}.ph.slim .ico svg{width:17px;height:17px}.ph.slim h1{font-size:19px}
@media (max-width:1280px){
 .top{flex-wrap:wrap;height:auto;min-height:var(--top);padding:8px 14px;row-gap:6px}
 .topacts{order:9;flex:1 1 100%;flex-wrap:wrap}
}
@media (max-width:760px){.crumbsub{max-width:46vw}}

/* ===== resizable columns (45-tables.js): fixed layout, grips on header borders, slider on top ===== */
.tw{position:relative}
.twtop{overflow-x:auto;overflow-y:hidden;height:13px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.twtop>div{height:1px}
.tw.has-top::-webkit-scrollbar:horizontal{height:0}
table.t.fixed{table-layout:fixed}
table.t.fixed th,table.t.fixed td{overflow:hidden;text-overflow:ellipsis}
table.t.fixed td .sel,table.t.fixed td select{width:100%;min-width:0}
table.t.fixed td .cellmain{min-width:0;overflow:hidden}
table.t.fixed td .cellmain>div{min-width:0;overflow:hidden;text-overflow:ellipsis}
table.t th{position:sticky}
.grip{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:col-resize;z-index:3;touch-action:none}
.grip::after{content:"";position:absolute;right:3px;top:9px;bottom:9px;width:1px;background:var(--line-2);transition:background .1s}
.grip:hover::after,.grip.on::after{background:var(--brand);width:2px;right:2px}
body.col-resizing{cursor:col-resize;user-select:none}body.col-resizing *{cursor:col-resize!important}
table.t.cp th,table.t.cp td{padding-left:7px;padding-right:7px}
table.t.cp th.cbx,table.t.cp td.cbx{padding-right:0}

/* ===== profile dock: avatar + name + environment in ONE control ===== */
.dockbtn{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px 0 5px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--sh1);text-align:left;min-width:0;flex:0 0 auto;transition:border-color .12s,box-shadow .12s,transform .08s}
.dockbtn:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line-2));box-shadow:var(--glow)}
.dockbtn:active{transform:translateY(1px)}
.dockbtn .avatar{width:30px;height:30px;flex:0 0 30px;box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent);background-size:cover}
.dockbtn .dk{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dockbtn .dk b{font-size:12.5px;font-weight:700;white-space:nowrap}
.dockbtn .dk small{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}
.dockbtn svg{color:var(--faint);width:14px;height:14px}
.edot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--c,#64748b);box-shadow:0 0 8px color-mix(in srgb,var(--c,#64748b) 60%,transparent)}
.pop .mi .edot{margin:0 4px}
#envLbl{max-width:130px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.dockbtn .dk,.dockbtn svg{display:none}.dockbtn{padding:0 4px;border-radius:50%;width:40px;justify-content:center}}

/* ===== demo/src/61-style.css ===== */
/* ===== module 61: small token-based helpers for Overview + invoice workspace (no new component styles) ===== */
.chip.on61,.btn.on61,.ibtn.on61{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 32%,transparent)}
.ibtn.danger61:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.only-view{display:none}body[data-role=viewer] .only-view{display:contents}
span[data-needs]{display:contents}
.pop .mi .cb svg{width:11px;height:11px;color:#fff}
.ovh h2 .dot{margin-right:7px;vertical-align:middle}
.spin61 svg{animation:spin61 1s linear infinite}@keyframes spin61{to{transform:rotate(360deg)}}
.cnt61{min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.ph .sub .chip{height:24px}
/* overview table */
table.t td:has(>.rail61){position:relative}
.rail61{position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--tone)}
.envtag61{display:inline-flex;align-items:center;gap:5px;margin-left:6px;color:var(--faint);font-size:11px}
table.t .sel.sm{min-width:132px;max-width:170px}
.toolbar .sel{max-width:190px}
.rpp{margin-left:auto;display:inline-flex;align-items:center;gap:8px}.pager .rpp+.pg{margin-left:12px}
td .ibtn{width:28px;height:28px;flex-basis:28px;border-radius:9px}
.warn{color:var(--warn)}
/* date popover */
.pset61{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pset61 .chip{cursor:pointer}
.cal61 .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal61 .wd,.cal61 .dg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal61 .wd span{font-size:10.5px;color:var(--faint);font-weight:700;padding:4px 0}
.cal61 .dg button{height:30px;border:0;background:none;border-radius:8px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text)}
.cal61 .dg button:hover{background:var(--surface-2)}
.cal61 .dg .is-in{background:color-mix(in srgb,var(--brand) 14%,transparent);border-radius:0}
.cal61 .dg .is-from,.cal61 .dg .is-to{background:var(--brand);color:#fff}
.cal61 .dg .is-today{box-shadow:inset 0 0 0 1px var(--brand)}
.pfoot61{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.pop .mi .cb{pointer-events:none}
/* inline notice bar (C 10.1) */
.inline-notice{display:flex;align-items:center;gap:10px;margin:10px 22px 0;padding:9px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tone) 30%,var(--line-2));background:color-mix(in srgb,var(--tone) 10%,var(--surface));font-size:12.5px;animation:rise .2s var(--ease)}
.inline-notice>span{flex:1}.inline-notice svg{color:var(--tone)}
.inline-notice.t-good{--tone:var(--ok)}.inline-notice.t-danger{--tone:var(--bad)}.inline-notice.t-neutral{--tone:var(--faint)}
/* invoice workspace */
.drawer.max{width:100vw!important;border-radius:0}
.ov .ovh .acts{flex-wrap:nowrap}
.iv61{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);height:100%;min-height:0}
.ivdoc{padding:14px;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.ivdoc .docview{flex:1;min-height:0}
.docscroll{overflow:auto;flex:1;min-height:0}
.paperwrap.nohl .hl{background:none;outline:0;padding:0}
.paper .hl{display:inline-block}
.ivside{display:flex;flex-direction:column;min-height:0;min-width:0}
.facts61{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;padding:14px 18px 4px}
.facts61.f3{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.f61{min-width:0}
.f61 span{display:block;font-size:10.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.f61 b{display:block;font-weight:650;font-variant-numeric:tabular-nums;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips61{display:flex;gap:6px;flex-wrap:wrap;padding:8px 18px 6px;align-items:center}
.asg61{display:flex;gap:8px;align-items:center;padding:4px 18px 10px;flex-wrap:wrap}
.ivtabs{padding:0 18px;flex:0 0 auto;border-top:1px solid var(--line)}.ivtabs .tabs{margin-bottom:0}
.ivtab{flex:1;overflow:auto;min-height:0}
.savebar61{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.payrow61{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.payrow61:last-child{border-bottom:0}
.rowbtns{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.stages61{list-style:none;margin:0;padding:0}.stages61 li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.stages61 li:last-child{border-bottom:0}
.alert61{margin-bottom:8px;align-items:flex-start}
.msg61{border-bottom:1px solid var(--line)}.msg61>summary{display:flex;align-items:center;gap:9px;padding:9px 0;cursor:pointer;list-style:none}.msg61>summary::-webkit-details-marker{display:none}.msgb61{padding:0 0 12px 38px;font-size:12.5px}
.convlist61{display:flex;flex-direction:column;gap:2px}.convlist61 .thread{border:0;border-radius:10px;padding:8px 10px}
.rem61{display:flex;align-items:center;gap:10px;padding:11px 4px 11px 14px;border-bottom:1px solid var(--line);position:relative}.rem61:last-child{border-bottom:0}
.rem61::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--tone)}
.filepill61{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.aigrid61{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aicard61{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);position:relative}
.aicard61:hover{border-color:var(--brand)}.aicard61.busy{border-color:var(--violet)}.aicard61 .spin61{position:absolute;right:10px;top:10px}
.inst61{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-top:1px solid var(--line);margin-top:8px}
.sub61>span:first-child{padding-left:16px;color:var(--faint)}
.left61{margin-right:auto}
.ovf .left{display:inline-flex;align-items:center;gap:6px}
.kv.linkrow61{cursor:pointer;text-align:left}
@media (max-width:1100px){.iv61{grid-template-columns:1fr;overflow:auto;height:auto}.ivdoc{border-right:0;border-bottom:1px solid var(--line);max-height:380px}.ivtab{overflow:visible}.facts61{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.inline-notice{margin:8px 12px 0}.aigrid61{grid-template-columns:1fr}}

/* ===== invoice workspace v2: action bar on top, one key-facts strip, one routing row, compact summary grid ===== */
.hd61{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.chips61i{display:inline-flex;gap:6px;margin-left:6px;align-items:center}
.actbar61{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;flex:0 0 auto;background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.actbar61 .left{margin-right:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;min-width:0}
.actbar61 .left svg{width:15px;height:15px}
.ivside .strip{margin:12px 16px 0;--cols:4}
.ivside .strip .cell{padding:10px 13px 9px}.ivside .strip .cell .val{font-size:19px;margin-top:3px}.ivside .strip .cell .meta{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.route61{display:flex;align-items:flex-end;gap:16px;padding:12px 16px 4px;flex-wrap:wrap}
.rf{min-width:0}.rf>span{display:block;font-size:10.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.rf b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.rf small{display:block;color:var(--faint);font-size:11px}
.rf.asg .sel{min-width:130px}
.attn61{display:flex;align-items:center;gap:9px;width:calc(100% - 32px);margin:10px 16px 0;padding:8px 12px;border-radius:11px;text-align:left;border:1px solid color-mix(in srgb,var(--tone) 30%,var(--line-2));background:color-mix(in srgb,var(--tone) 9%,transparent);font-size:12.5px;color:var(--text)}
.attn61:hover{background:color-mix(in srgb,var(--tone) 14%,transparent)}.attn61 svg{color:var(--tone);flex:0 0 16px}.attn61 .go{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--tone);font-weight:700;white-space:nowrap}.attn61 .ellip{color:var(--muted);min-width:0}
.ivside .ivtabs{margin-top:10px}.ivside .ivtabs .tabs button{height:34px;padding:0 11px;font-size:12.5px}
.kvg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.kvc{padding:9px 0;border-bottom:1px solid var(--line);min-width:0}.kvc>span{display:block;font-size:11px;color:var(--faint);font-weight:650}.kvc b{display:block;font-weight:650;font-variant-numeric:tabular-nums;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.ivside .strip{--cols:2}}

.asgh{display:flex;align-items:center;gap:7px;font-size:12px;margin-right:4px}.asgh .sel{min-width:140px}

/* ===== demo/src/62-style.css ===== */
/* ===== module 62 (companies + vendors): small, token-based helpers. No component is redefined. ===== */
.ibtn.xs{width:28px;height:28px;flex-basis:28px;border-radius:9px;display:inline-grid;vertical-align:middle}
.ibtn.xs svg{width:15px;height:15px}
table.t td .rowact{display:inline-flex;vertical-align:middle;gap:2px}
table.t tr:has(.cv-rail){position:relative}
.cv-rail{position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--tone);box-shadow:0 0 10px var(--tone)}
.initial.lg{width:44px;height:44px;flex-basis:44px;font-size:14px;border-radius:13px}
.cv-ident{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cv-ident b{font-size:15px;font-weight:720;letter-spacing:-.01em}
.cv-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px}
.cv-bulk b{font-weight:700;margin-right:4px}
.cv-toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);height:32px;padding:0 6px}
.cv-toggle>span{cursor:pointer;white-space:nowrap}
.cv-toggle:hover>span{color:var(--text)}
.cv-mute{opacity:.5}
.cv-check{align-items:center;font-size:12.5px;color:var(--text);cursor:pointer}
.cv-check input{width:15px;height:15px;accent-color:var(--brand)}
.cv-convlist{display:flex;flex-direction:column}
.cv-conv{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;padding:12px 18px;border:0;border-bottom:1px solid var(--line);background:none}
.cv-conv:last-child{border-bottom:0}
.cv-conv:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.cv-conv-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cv-conv-top b{font-weight:650;display:flex;align-items:center;gap:7px;min-width:0}
.cv-conv-top .mut{font-size:12px;white-space:nowrap}
.cv-conv-sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.cv-conv-pre{font-size:12.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-prev{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:16px;align-items:start}
.cv-prev .docview{min-height:540px;max-height:calc(100vh - 150px)}
.cv-paperwrap{overflow:auto;flex:1;padding:4px 0 18px}
.cv-paperscale{transform-origin:top center;transition:transform .15s var(--ease)}
.cv-prev-side{min-width:0;max-height:calc(100vh - 150px);overflow:auto;border:1px solid var(--line);border-radius:14px}
@media (max-width:900px){.cv-prev{grid-template-columns:1fr}.cv-prev .docview,.cv-prev-side{max-height:none}}
.cv-notif{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .12s,background .12s}
.cv-notif:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.cv-notif b{font-weight:650}
.cv-notif svg:last-child{color:var(--faint)}
.chip .ellip{display:inline-block;vertical-align:middle}
.cv-mb .kv span:first-child{flex:0 0 auto}
.panel .toolbar .searchbox .inp{min-width:210px}
.strip button.cell{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.pager{border-top:0}
.panel>.pb.flush>.tw+.pager{border-top:1px solid var(--line)}
.cv-list table.t th,.cv-list table.t td{padding-left:9px;padding-right:9px}.cv-list table.t th{letter-spacing:.05em}.cv-list table.t td.cbx,.cv-list table.t th.cbx{padding-left:14px;padding-right:0}

/* ===== demo/src/63-style.css ===== */
/* ===== module 63: mailbox / settings / people. Token-based; extends the foundation, never redefines it ===== */
/* two-pane mailbox */
.mb{display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);height:clamp(460px,calc(100vh - 330px),780px)}
.mb-list{border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;min-width:0}
.mb-lh{padding:8px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--surface-2) 94%,transparent);backdrop-filter:blur(6px)}
.mb-lh b{color:var(--text);font-weight:650}
.mb-grp{padding:8px 14px 5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.mb-grp .n{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:8px;background:var(--surface-2);color:var(--muted);letter-spacing:0}
.cv{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:none;padding:10px 14px 10px 12px;position:relative}
.cv:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.cv.on{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.cv.unread{border-left-color:var(--info)}.cv.await{border-left-color:var(--warn)}
.cv .l1{display:flex;align-items:center;gap:7px;min-width:0}
.cv .snd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cv.unread .snd{font-weight:780}
.cv .when{font-size:11px;color:var(--faint);white-space:nowrap}
.cv .subj{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:6px;align-items:center}
.cv.unread .subj{font-weight:650}
.cv .subj svg{width:13px;height:13px;color:var(--faint)}
.cv .snip{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.cv .aw{font-size:11px;font-weight:650;color:var(--warn);margin-top:3px}
.cv .udot{width:8px;height:8px;border-radius:50%;background:var(--info);box-shadow:0 0 8px var(--info);flex:0 0 8px}
.pill{font-size:10.5px;font-weight:700;padding:0 6px;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.mb-read{display:flex;flex-direction:column;min-width:0;min-height:0}
.mb-rh{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.mb-rh h3{margin:0;font-size:15px;font-weight:720;letter-spacing:-.01em}
.mb-rh .meta{color:var(--muted);font-size:12px;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mb-rh .acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.mb-thread{flex:1;overflow:auto;padding:14px 18px;min-height:0}
.mb-note{color:var(--faint);font-size:11.5px;margin:0 0 8px}
.msg{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--surface)}
.msg[open]{box-shadow:var(--sh1)}
.msg>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;min-width:0}
.msg>summary::-webkit-details-marker{display:none}
.msg .who{flex:0 0 auto;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .who small{color:var(--faint);margin-left:6px;font-size:11px}
.msg .dirtag{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.msg .snipl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
.msg[open] .snipl{display:none}
.msg .dt{font-size:11px;color:var(--faint);white-space:nowrap;margin-left:auto}
.msg .mbody{padding:2px 14px 12px 46px;font-size:12.5px;line-height:1.55}
.msg .mbody .hdrs{color:var(--muted);font-size:12px;margin-bottom:8px}
.msg .mbody .hdrs b{color:var(--faint);font-weight:650;display:inline-block;width:54px}
.msg .mbody pre{margin:0;white-space:pre-wrap;font:inherit}
.msg details.qt{margin-top:8px;color:var(--muted)}
.msg details.qt summary{cursor:pointer;font-size:11.5px;font-weight:650;color:var(--faint)}
.msg details.qt pre{margin-top:6px;padding-left:10px;border-left:2px solid var(--line-2)}
.attrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.att{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 12px;text-align:left;min-width:220px;max-width:340px}
.att:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.att .ext{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);flex:0 0 34px}
.att b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.att small{color:var(--faint);font-size:11px}
.attwrap{display:flex;align-items:center;gap:6px}
.mb-reply{border-top:1px solid var(--line);padding:10px 18px 12px;display:flex;flex-direction:column;gap:8px}
.mb-reply .rrow{display:flex;gap:8px;align-items:center}
.mb-reply .rrow label{font-size:11.5px;font-weight:650;color:var(--muted);width:24px}
.linkbanner{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--info) 10%,transparent);border:1px solid color-mix(in srgb,var(--info) 26%,transparent)}
.linkbanner b{display:block;font-weight:680}.linkbanner span.s{color:var(--muted);font-size:12px}
.mbconf table.t td{height:auto;padding-top:10px;padding-bottom:10px;vertical-align:top}
.mbconf .why{white-space:normal;max-width:360px;color:var(--muted);font-size:12px;line-height:1.45;margin:6px 0 8px}
.mbconf .btns{display:flex;gap:6px;flex-wrap:wrap}
.mbgrow{flex:1 1 240px;min-width:190px}.mbgrow .searchbox .inp{width:100%;min-width:0}
.sub2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 18px;border-bottom:1px solid var(--line)}
.paperdoc{min-height:300px}
@media (max-width:900px){.mb{grid-template-columns:1fr;height:auto}.mb-list{max-height:300px;border-right:0;border-bottom:1px solid var(--line)}.mb-read{min-height:420px}}
/* settings */
.stg-sw{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.stg-sw:last-child{border-bottom:0}.stg-sw>div{flex:1;min-width:0}.stg-sw b{display:block;font-weight:650}.stg-sw small{color:var(--muted);font-size:12px}
.stg-sw.sub{padding-left:18px}
.steps{counter-reset:s}
.stepn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);font-size:11px;font-weight:800;letter-spacing:0}
.rowsel{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.rowsel:last-child{border-bottom:0}.rowsel small{color:var(--faint);margin-left:6px}
.tierrow{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;gap:10px;align-items:center;padding:5px 0}
details.adv{margin-top:12px}details.adv>summary{cursor:pointer;font-weight:650;font-size:12.5px;color:var(--muted);padding:6px 0}
details.adv[open]>summary{color:var(--text)}
.prev ol{margin:8px 0 8px 18px;padding:0;display:flex;flex-direction:column;gap:5px}
.prev p{margin:6px 0}
.revealkey{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);display:flex;flex-direction:column;gap:8px}
.revealkey code{font:600 12.5px var(--mono);word-break:break-all;background:var(--surface);border:1px solid var(--line);padding:8px 10px;border-radius:9px}
code.k{font:600 12px var(--mono);color:var(--muted)}
tr.revoked td{opacity:.55}
.pickl{border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-width:0;background:var(--surface)}
.pickl .ph3{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:680}
.pickl .ph3 span{font-weight:600;font-size:11.5px;color:var(--faint)}
.pickl .pk-t{display:flex;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line)}
.pickl .pk-t .inp{flex:1}
.pickl .pk-l{max-height:170px;overflow:auto;padding:4px 6px}
.pickl label.opt{display:flex;gap:9px;align-items:center;padding:6px;border-radius:8px;cursor:pointer}
.pickl label.opt:hover{background:var(--surface-2)}
.pickl label.opt small{color:var(--faint)}
.pickl .none{padding:14px;text-align:center;color:var(--faint);font-size:12px}
/* people */
.envcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.chk{display:flex;gap:9px;align-items:center;padding:5px 2px}
.chk.dis{opacity:.55}.chk em{color:var(--faint);font-size:11.5px}
.chklist{max-height:150px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--surface-2)}
.monolist{font:12px var(--mono);color:var(--muted);max-height:120px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface-2);line-height:1.6}
.wsrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wsrow:last-child{border-bottom:0}.wsrow .grow1 small{display:block;color:var(--faint)}
.photo{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2)) center/cover;color:#fff;display:grid;place-items:center;font-weight:750;font-size:19px;flex:0 0 56px}
.matrix small{display:block;font-weight:500;color:var(--faint);font-size:11px;margin-top:1px}
.matrix.dim{opacity:.5;pointer-events:none}
.sect-h .acts{margin-left:auto;display:flex;gap:6px}
.mini{height:24px;padding:0 9px;font-size:11.5px;border-radius:8px}
.stk{display:flex;flex-direction:column;gap:10px}

.matrix{align-items:stretch}
input[type=file].inp{padding:3px 6px;height:auto;min-height:32px}
input[type=file]::file-selector-button{border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);border-radius:8px;height:24px;padding:0 10px;margin-right:10px;font:600 12px var(--font);cursor:pointer}
.mbconf table.t td{white-space:normal}
.mbconf table.t td .num,.mbconf .btns,.mbconf .row.wrap{white-space:nowrap}
.mbconf table.t td:last-child{min-width:300px}
.mbconf table.t td:nth-child(2){white-space:nowrap}
.mbconf .why{min-width:260px}
.mbconf table.t th,.mbconf table.t td{padding-left:10px;padding-right:10px}
.mbconf table.t th{white-space:normal;line-height:1.2;height:auto;padding-top:8px;padding-bottom:8px;vertical-align:bottom}
.mbconf table.t td:nth-child(2){white-space:normal;min-width:92px}
.mbconf table.t td:last-child{min-width:280px}
.mbconf .why{min-width:0;max-width:340px}

/* ===== combined People & environments panel ===== */
.acctabs{padding:0 18px;border-bottom:1px solid var(--line);flex:0 0 auto;background:color-mix(in srgb,var(--surface-2) 45%,transparent)}.acctabs .tabs{margin-bottom:0;border-bottom:0}
.accbody .toolbar{border-bottom:1px solid var(--line)}
.accbody #profTeam table.t td,.accbody #profTeam table.t th{white-space:nowrap}
.envppl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}.envppl .avs{display:inline-flex}.envppl .avs .avatar{margin-left:-3px;box-shadow:0 0 0 2px var(--surface)}.envppl .avs .avatar:first-child{margin-left:0}

.accbody .stk:has(> .envcard){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.accbody .stk:has(> .envcard){grid-template-columns:1fr}}

/* ===== demo/src/64-style.css ===== */
/* ===== module 64 styles: only small token-based additions; no component is redefined ===== */
/* toasts must sit above the full-screen auth layer (z 200) */
.toasts{z-index:260}
.spin{display:inline-block;width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--brand);animation:spin64 .8s linear infinite}
@keyframes spin64{to{transform:rotate(360deg)}}
/* ---- auth / boot ---- */
.authwrap.auth-splash,.authwrap.auth-crash,.authwrap.auth-booterror{z-index:210}
.authcard{animation:pop64 .32s var(--ease)}
@keyframes pop64{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.authcard.wide{width:min(440px,100%)}
.authcard.center{text-align:center}
.authcard h1{margin:0 0 4px;font-size:19px;font-weight:750;letter-spacing:-.02em;text-align:center}
.authcard .lead{margin:0 0 18px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5}
.authcard .logo{height:38px;max-width:100%;object-fit:contain}
.authcard form{display:flex;flex-direction:column;gap:12px}
.authcard .inp{height:38px;border-radius:12px;width:100%}
.authcard .btn.lg.block{width:100%;margin-top:4px}
.authcard .autherr{margin-bottom:12px}
.authcard .autherr[hidden]{display:none}
.authcard .bigico{width:52px;height:52px;border-radius:16px;margin:0 auto 12px}.authcard .bigico svg{width:24px;height:24px}
.authcard .form-grid{gap:12px}
.pwrap{position:relative;display:block}.pwrap .inp{padding-right:40px}
.pwrap .eye{position:absolute;right:2px;top:2px;width:34px;height:34px}
.authlinks{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.authbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.authfoot{display:flex;justify-content:center;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.authlight{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--faint);font-size:11.5px;letter-spacing:.04em}
.authlight:hover{color:var(--text)}
.demohint{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:14px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--info) 9%,transparent);border:1px dashed color-mix(in srgb,var(--info) 35%,var(--line-2));color:var(--muted);font-size:11.5px}
.demohint b{color:var(--text);font-weight:650}
.splash{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.splash img{width:min(330px,72vw);height:auto;display:block}
.splash-track{position:relative;width:160px;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.splash-track i{position:absolute;top:0;bottom:0;left:0;width:46%;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));animation:boot64 1.1s ease-in-out infinite alternate}
@keyframes boot64{to{left:54%}}
.skrow{display:grid;grid-template-columns:2fr 1.2fr 1.2fr .6fr;gap:18px;align-items:center;padding:0 18px;height:42px;border-top:1px solid var(--line)}
.skrow .skel{height:11px}
.skwrap{border-top:1px solid var(--line)}.skwrap .skrow:first-child{border-top:0}
.nc-tone{display:inline-flex;vertical-align:middle;margin-right:4px}
/* ---- notification centre ---- */
.pop.notifpop{width:min(400px,calc(100vw - 16px));padding:0;max-height:min(620px,80vh);display:flex;flex-direction:column;overflow:hidden}
.nhead{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.nlist{overflow:auto;flex:1;min-height:90px}
.nitem{position:relative;display:flex;align-items:flex-start;gap:4px;border-bottom:1px solid var(--line)}
.nitem.unread{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.nitem:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.nmain{flex:1;min-width:0;display:flex;gap:11px;align-items:flex-start;text-align:left;border:0;background:none;padding:11px 14px}
.nmain .tm{flex:1;min-width:0}.nmain .tm b{display:block;font-weight:650;line-height:1.3}
.nmain .tm small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
.nmain .tm em{display:block;font-style:normal;color:var(--faint);font-size:11px;margin-top:3px}
.nmain .dot{margin-top:6px}
.nact{position:absolute;right:8px;top:8px;display:flex;gap:2px;opacity:0;transition:opacity .1s;background:var(--surface-3);border-radius:9px}
.nitem:hover .nact,.nitem:focus-within .nact{opacity:1}
.nfoot{padding:9px 14px;border-top:1px solid var(--line)}
.nfoot .pill-link svg{width:14px;height:14px}
/* ---- chat / assistant docks ---- */
.dock .dockf{padding:0;border-top:0;display:block}
.dock .dockf .composer{border-top:1px solid var(--line)}
.dock .ovh .acts .ibtn{width:30px;height:30px;flex-basis:30px}
.chatdock .chatlist{max-height:42%;flex:0 0 auto}
.thread{padding:8px 16px}
.thread .tm b{display:flex}
.thrhead{display:flex;align-items:center;gap:9px;padding:9px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 70%,transparent);flex:0 0 auto}
.thrhead b{font-weight:680}
.chatdock .msgs,.asstdock .msgs{min-height:0}
.bub.me small{opacity:.8}
.bub .pill-link{color:inherit;text-decoration:underline;font-size:inherit}
.bub.me .pill-link{color:#fff}
.bub.bot{max-width:92%}.bub.bot .md{white-space:pre-wrap}
.bub.bot.card{max-width:100%;align-self:stretch}
.bub.fmsg{display:flex;flex-direction:column;gap:3px;min-width:200px}
.bub.fmsg .frow{display:flex;align-items:center;gap:8px}.bub.fmsg .frow svg{flex:0 0 16px;width:16px;height:16px}
.bub.fmsg .fname{word-break:break-all;font-weight:650}
.fstatus{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:6px}.fstatus.loading{font-style:italic}.fstatus.bad{color:var(--bad)}
.bub.me .fstatus.bad{color:#fff}
.bub.fmsg.me .btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.bub.apr{border-left:3px solid var(--warn);padding:11px 13px}
.aprt{display:flex;align-items:center;gap:9px}.aprt .ico{width:26px;height:26px;flex-basis:26px;border-radius:8px}.aprt b{font-weight:680}
.aprd{margin:7px 0 9px;color:var(--text)}
.aprf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.aprd+.aprf{margin-top:0}
.noperm,.ro-only{display:none}
body[data-role=member] .noperm,body[data-role=viewer] .noperm{display:inline}
body[data-role=viewer] .ro-only{display:block}
.composer .ibtn{flex:0 0 38px;height:38px;width:38px}
.composer .btn{height:38px}
.suggest{margin:2px 0 0}
.aicards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.aicard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 13px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface)}
.aicard:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.aicard.busy{border-color:var(--brand);box-shadow:var(--glow)}
.aicard b{font-weight:680}.aicard span{color:var(--muted);font-size:12px;line-height:1.4}
.aiload{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--brand) 8%,transparent);color:var(--muted)}
.aires{margin-top:12px}
details.teach{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
details.teach summary{cursor:pointer;font-weight:650;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px}
details.teach summary::before{content:"›";display:inline-block;transition:transform .15s;color:var(--faint)}
details.teach[open] summary::before{transform:rotate(90deg)}
details.teach .teachbox{margin-top:10px}
@media (max-width:560px){.aicards{grid-template-columns:1fr}}
/* ---- vendor portal (separate simplified shell) ---- */
body.portal-mode #app,body.portal-mode .dock{display:none!important}
.pv{position:fixed;inset:0;z-index:70;overflow:auto}
.pv-top{position:sticky;top:0;z-index:5;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 22px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.pv-logo{height:28px;width:auto;display:block}
.pv-who{color:var(--muted);font-size:12.5px;margin:0 4px}
.pvpage{max-width:960px}
.pv .tw{overflow:auto}
.pv .toolbar .lbl{margin-left:2px}
.pv .toolbar .inp,.pv .toolbar .sel{height:30px}
@media (max-width:760px){.pv-top{padding:0 12px;flex-wrap:nowrap;overflow:auto;gap:8px}.pv-who{display:none}.pv-top .seg{flex:0 0 auto}.skrow{grid-template-columns:2fr 1fr}.skrow .skel:nth-child(n+3){display:none}}

.asttools{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.asttools .ibtn{width:30px;height:30px;flex-basis:30px}
#asInput{height:52px;min-height:52px}

@media (min-width:900px){body.docked .toasts{right:436px}}
.thrhead b,.thrhead .mut{white-space:nowrap}
.thrhead .em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pv-top .demo-tag{white-space:nowrap}

/* ===== demo/src/65-style.css ===== */
/* ===== module 65 · polish: small token-based helpers (no component redefined) ===== */
[data-failnote]{margin-bottom:12px}
.attwrap .attx{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:6px;vertical-align:middle}
.ov .acts .btn.sm{white-space:nowrap}