*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--font-notion-sans);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh);color:var(--color-charcoal);background:var(--color-canvas);-webkit-font-smoothing:antialiased}
#root{min-height:100%}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:var(--color-link-blue);text-decoration:none}a:hover{color:var(--color-link-blue-pressed)}
h1,h2,h3,h4{margin:0;color:var(--color-ink)}.mono{font-family:var(--font-mono);font-size:13px}.strong{font-weight:600;color:var(--color-ink)}.mute{color:var(--color-steel)}.red{color:var(--color-semantic-error)}.num{text-align:right}.small{font-size:13px}.grow{flex:1}
.kicker{font-size:var(--type-micro-upper-size);font-weight:var(--type-micro-upper-weight);letter-spacing:var(--type-micro-upper-ls);text-transform:uppercase;color:var(--color-steel)}
.wordmark{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--color-ink)}.wm-mark{width:24px;height:24px;border-radius:var(--radius-sm);background:var(--color-ink-deep);color:#fff;display:inline-grid;place-items:center;font-size:14px;font-weight:700}
/* shell */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.has-demo{padding-top:52px}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--color-surface);border-right:1px solid var(--color-hairline)}.has-demo .side{top:52px;height:calc(100vh - 52px)}
.side-top{height:56px;display:flex;align-items:center;padding:0 20px}
.side-nav{display:flex;flex-direction:column;gap:1px;padding:4px 10px}.side-nav button{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--radius-sm);font-weight:500;color:var(--color-slate);transition:background 100ms}.side-nav button:hover{background:rgba(0,0,0,.05)}.side-nav button.on{background:rgba(0,0,0,.07);color:var(--color-ink)}.side-nav button .cnt{margin-left:auto}
.side-sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 20px}.side-sub button{height:30px;font-size:13px;color:var(--color-steel)}.side-sub button.on{color:var(--color-ink);background:transparent;font-weight:600}
.side-bot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--color-hairline);display:flex;flex-direction:column;gap:2px}.side-user{display:flex;gap:10px;align-items:center;padding:8px 10px}.side-user span{display:flex;flex-direction:column;font-size:13px;line-height:1.3}.side-user b{font-weight:600;color:var(--color-ink)}
.side-link{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--color-slate)}.side-link:hover{background:rgba(0,0,0,.05);color:var(--color-ink)}.seg-sm{margin:6px 10px;height:30px}.seg-sm button{padding:0 12px;font-size:12px}
.main{min-width:0}.top{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;gap:16px;padding:0 28px;background:var(--color-canvas);border-bottom:1px solid var(--color-hairline)}.has-demo .top{top:52px}
.search{flex:1;max-width:440px;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-md);color:var(--color-steel);transition:border-color 100ms,background 100ms}.search:focus-within{background:var(--color-canvas);border-color:var(--color-primary)}.search input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--color-ink);min-width:0}.search button{display:grid;place-items:center;color:var(--color-steel)}
.top-note{flex:1;color:var(--color-steel);font-size:13px}.top-role{margin-left:auto;display:flex;align-items:center;gap:10px}.top-role .sel select{height:34px;font-size:13px}
.page{padding:28px 28px 72px;display:flex;flex-direction:column;gap:20px;max-width:1360px}.page-live{max-width:none;--live-radius:12px}.page-live .live-h h1{color:#fff;font-size:30px}.live-side{display:flex;flex-direction:column;gap:14px}.page-tail{padding-top:0;margin-top:-52px}
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.ph-t{display:flex;flex-direction:column;gap:4px}.ph h1{font-size:var(--type-h2-size);font-weight:var(--type-h2-weight);line-height:var(--type-h2-lh);letter-spacing:var(--type-h2-ls);display:flex;align-items:center;gap:12px}.ph h1 .mono{font-size:28px;font-weight:600;letter-spacing:-.5px}.ph-a{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-md);font-weight:500;font-size:14px;white-space:nowrap;transition:background 100ms,border-color 100ms,opacity 100ms}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-pressed)}.btn-dark{background:var(--color-ink-deep);color:#fff}.btn-dark:hover:not(:disabled){opacity:.85}.btn-outline{background:var(--color-canvas);border:1px solid var(--color-hairline-strong);color:var(--color-ink)}.btn-outline:hover:not(:disabled){background:var(--color-surface)}.btn-on-dark{background:#fff;color:var(--color-ink)}.btn-on-dark:hover{background:#eee}.btn-danger{color:var(--color-semantic-error);border-color:var(--color-semantic-error)}
.btn-sm{height:30px;padding:0 10px;font-size:13px}.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--color-hairline);display:inline-grid;place-items:center;flex-shrink:0}.btn-icon:hover:not(:disabled){background:var(--color-surface)}
.btn:focus-visible,.chip:focus-visible,.inp:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:11px;font-weight:600}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 18px;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);text-align:left;transition:box-shadow 150ms}.stat:hover{box-shadow:var(--shadow-1)}.stat-l{font-size:13px;color:var(--color-steel)}.stat-v{font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.5px;margin-top:4px;color:var(--color-ink)}.stat-s{font-size:12px;color:var(--color-stone)}.stat-warn .stat-v{color:var(--color-brand-orange)}.stat-red .stat-v{color:var(--color-semantic-error)}
/* cards */
.card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);overflow:hidden}.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--color-hairline-soft)}.card-h h4{font-size:15px;font-weight:600}.card-b{padding:20px}.card-b>.field+.field{margin-top:14px}.card-b>.btn{margin-top:14px}
.card-action{background:var(--color-card-tint-yellow)}.card-bill{background:var(--color-card-tint-rose)}.card-bill .card-h{border-bottom-color:rgba(0,0,0,.06)}.page-alerts{padding-bottom:0}.page-alerts+.page{padding-top:20px}
.aging{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.aging-b{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;padding:12px;border-radius:var(--radius-md);border:1px solid var(--color-hairline);transition:background 100ms}.aging-b:hover{background:var(--color-surface)}.aging-l{font-size:13px;font-weight:500}.aging-t{height:8px;background:var(--color-surface);border-radius:4px;overflow:hidden}.aging-f{height:100%;border-radius:4px}.aging-f.ok{background:var(--color-brand-green)}.aging-f.warn{background:var(--color-brand-orange)}.aging-f.bad{background:var(--color-semantic-error)}
.inv{display:flex;flex-direction:column;gap:16px}.inv-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.inv-s{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.pay-form{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius-md);background:var(--color-surface)}.inv .t{font-size:13px}
@media (max-width:820px){.aging{grid-template-columns:repeat(2,1fr)}}.card-action .card-h{border-bottom-color:rgba(0,0,0,.06)}.card-admin{background:var(--color-card-tint-lavender)}.card-admin .card-h{border-bottom-color:rgba(0,0,0,.06)}.card-split .card-b{background:var(--color-surface)}
.two{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}.two-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.two-detail{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}.stack{display:flex;flex-direction:column;gap:20px;min-width:0}.stack-sm{display:flex;flex-direction:column;gap:14px}.admin-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* tables */
.tw{overflow-x:auto}.t{width:100%;border-collapse:collapse;font-size:14px}.t th{text-align:left;font-weight:500;font-size:12px;color:var(--color-steel);padding:9px 16px;border-bottom:1px solid var(--color-hairline);white-space:nowrap}.t th.num{text-align:right}.t td{padding:11px 16px;border-bottom:1px solid var(--color-hairline-soft);vertical-align:middle;white-space:nowrap}.t tr:last-child td{border-bottom:0}.t td.td-desc{white-space:normal;min-width:200px;max-width:360px}.t tfoot td{font-weight:600;border-top:1px solid var(--color-hairline);background:var(--color-surface-soft)}
.t-tight td,.t-tight th{padding:10px 20px}.row{cursor:pointer;transition:background 100ms}.row:hover{background:var(--color-surface-soft)}.row-warn td:first-child{box-shadow:inset 3px 0 0 var(--color-brand-orange)}.row-high td:first-child{box-shadow:inset 3px 0 0 var(--color-semantic-error)}.row-off td{opacity:.5}
.t td .pill{margin-left:8px}.t-edit td{padding:8px 8px}.t-edit td:first-child{padding-left:16px;min-width:260px}.t-edit .inp{height:36px;padding:0 10px}.inp-n{width:110px;text-align:right;font-family:var(--font-mono);font-size:13px}.inp-n.wide{width:100%;text-align:left}
/* status & pills */
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap}.st i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}.st-mute{color:var(--color-stone)}.st-ink{color:var(--color-charcoal)}.st-blue{color:var(--color-link-blue)}.st-green{color:var(--color-brand-green)}.st-red{color:var(--color-semantic-error)}.st-amber{color:var(--color-brand-orange)}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;white-space:nowrap}.pill-tag{background:var(--color-card-tint-gray);color:var(--color-slate)}.pill-green{background:var(--color-card-tint-mint);color:#0f6b25}.pill-red{background:#fde3e3;color:#a31f1f}.pill-amber{background:var(--color-card-tint-peach);color:var(--color-brand-orange-deep)}.pill-purple{background:var(--color-card-tint-lavender);color:var(--color-brand-purple-800)}.pill-rush{background:var(--color-ink-deep);color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:.06em;font-weight:600}
/* lists */
.al{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.al li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.07);cursor:pointer}.al li:last-child{border-bottom:0}.al li:hover .al-a{color:var(--color-ink)}.al-i{width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.08);flex-shrink:0;color:var(--color-steel)}.al-i.warn{color:var(--color-brand-orange)}.al-i.red{color:var(--color-semantic-error)}.al-i.ink{color:var(--color-ink)}.al-t{flex:1;min-width:0;font-size:14px}.al-t b{font-family:var(--font-mono);font-weight:600;font-size:13px}.al-a{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:13px;color:var(--color-steel);white-space:nowrap;transition:color 100ms}
.sl{list-style:none;margin:0;padding:0}.sl li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--color-hairline-soft);font-size:14px}.sl li:last-child{border-bottom:0}.sl li.row{margin:0 -20px;padding:11px 20px}
.inbox{list-style:none;margin:0;padding:0}.inbox li{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--color-hairline-soft);cursor:pointer;color:var(--color-steel)}.inbox li:hover{background:var(--color-surface-soft)}.inbox li.unread{background:var(--color-card-tint-sky)}.inbox li .al-i{background:#fff}.inbox-t{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--color-charcoal);min-width:0}.inbox-h{display:flex;gap:10px;align-items:center;font-size:13px}
/* filters & chips */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{height:32px;padding:0 12px;border-radius:var(--radius-full);border:1px solid var(--color-hairline);background:transparent;font-size:13px;font-weight:500;color:var(--color-steel);transition:border-color 100ms,background 100ms}.chip:hover{border-color:var(--color-hairline-strong);color:var(--color-ink)}.chip.on{background:var(--color-ink-deep);color:#fff;border-color:var(--color-ink-deep)}.chip-x{font-size:13px;color:var(--color-steel);padding:0 8px}.chip-x:hover{color:var(--color-ink)}
.sel{position:relative;display:inline-flex;align-items:center}.sel select{appearance:none;height:36px;padding:0 32px 0 12px;border-radius:var(--radius-md);border:1px solid var(--color-hairline-strong);background:var(--color-canvas);font:inherit;font-size:14px;color:var(--color-ink);outline:0;cursor:pointer;max-width:100%;transition:border-color 100ms}.sel select:hover{background:var(--color-surface-soft)}.sel select:focus{border-color:var(--color-primary)}.sel select:disabled{opacity:.6;cursor:default}.sel svg{position:absolute;right:10px;pointer-events:none;color:var(--color-steel)}.sel.bad select{border-color:var(--color-semantic-error)}
.inline-sel{display:block;margin-top:8px}.inline-sel-sm .sel select{height:30px;font-size:13px}.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--color-ink)}.lnk:hover .mono{text-decoration:underline}
/* forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field-l{font-size:13px;font-weight:500;color:var(--color-slate)}.field-l em{color:var(--color-semantic-error);font-style:normal;margin-left:2px}.field-hint{font-size:12px;color:var(--color-stone)}.field .sel,.field .sel select{width:100%}
.inp{height:40px;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-hairline-strong);background:var(--color-canvas);font:inherit;font-size:14px;color:var(--color-ink);outline:0;width:100%;transition:border-color 100ms,box-shadow 100ms}.inp:focus{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.inp.bad{border-color:var(--color-semantic-error)}.inp:disabled{background:var(--color-surface);color:var(--color-steel)}textarea.inp{height:auto;padding:10px 12px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.seg{display:inline-flex;border:1px solid var(--color-hairline);border-radius:var(--radius-md);padding:3px;background:var(--color-canvas);height:36px}.seg button{padding:0 14px;border-radius:var(--radius-sm);font-weight:500;font-size:13px;color:var(--color-steel)}.seg button.on{background:var(--color-ink-deep);color:#fff}.seg-dark{border-color:rgba(255,255,255,.25);background:transparent;height:30px}.seg-dark button{color:rgba(255,255,255,.7);padding:0 10px;font-size:12px}.seg-dark button.on{background:#fff;color:var(--color-ink)}
.range{display:flex;align-items:center;gap:12px;height:40px}.range input{flex:1;accent-color:var(--color-primary)}.range b{min-width:32px;text-align:right}
.note{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-md);font-size:14px}.note-warn{background:var(--color-card-tint-peach);color:var(--color-brand-orange-deep)}.note-red{background:#fde3e3;color:#a31f1f}
.dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0;font-size:14px}.dl dt{color:var(--color-steel)}.dl dd{margin:0;min-width:0}
.empty{padding:28px 20px;text-align:center;color:var(--color-stone);font-size:14px}
.perm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.perm div{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--radius-md);background:var(--color-surface);font-size:13px;color:var(--color-slate)}.perm b{color:var(--color-ink)}
/* status flow */
.flow{display:flex;flex-wrap:wrap;gap:4px}.flow-s{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;color:var(--color-stone)}.flow-s.done{color:var(--color-ink);background:var(--color-surface)}.flow-s.cur{background:var(--color-ink-deep);color:#fff}.flow-s.cur.bad{background:var(--color-semantic-error)}
/* split */
.split{display:flex;flex-direction:column;gap:10px}.split-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}.split-row .mono{font-size:16px}.split-row:first-child .mono{font-size:22px}.split-bar{height:10px;border-radius:var(--radius-full);background:var(--color-primary);overflow:hidden}.split-bar i{display:block;height:100%;background:var(--color-ink-deep);transition:width 300ms ease-out}.split-foot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-stone);padding-top:6px;border-top:1px solid var(--color-hairline)}
.pay-state{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:13px;align-items:flex-start}.split-edit{display:flex;flex-direction:column;gap:14px}
/* timeline */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.tl li{display:grid;grid-template-columns:96px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--color-hairline-soft);font-size:13px;align-items:baseline}.tl li:last-child{border-bottom:0}.tl-d{color:var(--color-steel);font-family:var(--font-mono);font-size:12px}.tl-e{color:var(--color-charcoal);white-space:normal}.tl-b{color:var(--color-stone);font-size:12px}
/* client container cards */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.ccard{display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-lg);transition:box-shadow 150ms}.ccard:hover{box-shadow:var(--shadow-2)}.ccard-h{display:flex;justify-content:space-between;gap:8px;align-items:center}.ccard-r{font-size:13px;color:var(--color-slate)}.ccard-m{display:flex;justify-content:space-between;font-size:12px;color:var(--color-steel)}.ccard-m b{font-weight:600;color:var(--color-ink)}.ccard-n{font-size:13px;color:var(--color-slate);font-style:italic}
/* charts */
.bars{display:flex;align-items:flex-end;gap:10px;padding-top:20px}.bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}.bar{width:100%;max-width:72px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:2px;transition:height 300ms}.bar-v{font-size:11px;color:var(--color-steel);font-family:var(--font-mono)}.bar-l{font-size:12px;color:var(--color-slate)}
.hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.hbars li{display:grid;grid-template-columns:130px 1fr 70px;gap:10px;align-items:center;font-size:13px}.hb-l{color:var(--color-slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hb-t{height:12px;background:var(--color-surface);border-radius:var(--radius-xs);overflow:hidden}.hb{height:100%;border-radius:var(--radius-xs);transition:width 300ms}.hb-v{text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--color-ink)}
.donut{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.donut-i{width:96px;height:96px;border-radius:50%;background:var(--color-canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.donut-i b{font-size:24px;color:var(--color-ink)}.donut-i span{font-size:11px;color:var(--color-steel)}
.delay-wrap{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:12px;color:var(--color-steel)}.legend b{color:var(--color-ink);font-weight:600}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,15,15,.4);display:grid;place-items:center;z-index:60;padding:16px}.modal{width:100%;background:var(--color-canvas);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);max-height:calc(100vh - 32px);display:flex;flex-direction:column}.modal-b{overflow:auto}.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-hairline)}.modal-h h4{font-size:16px}.modal-b{padding:20px}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--color-ink-deep);color:#fff;border-radius:var(--radius-md);font-size:14px;font-weight:500;z-index:50;box-shadow:var(--shadow-4);animation:tin 200ms ease-out}@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.login-brand{background:var(--color-brand-navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}.login-brand .wordmark{color:#fff;font-size:20px}.login-brand .wm-mark{background:#fff;color:var(--color-brand-navy)}.login-brand h1{color:#fff;font-size:var(--type-h1-size);font-weight:600;line-height:1.1;letter-spacing:-1px;max-width:600px;margin-bottom:16px}.login-brand p{font-size:18px;color:var(--color-on-dark-muted);max-width:520px;margin:0;line-height:1.5}
.demo-cta{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--color-primary);color:#fff;text-align:left;max-width:520px;transition:background 100ms}.demo-cta:hover{background:var(--color-primary-pressed)}.demo-cta>span{flex:1;display:flex;flex-direction:column;gap:2px}.demo-cta b{font-size:15px}.demo-cta span span{font-size:13px;opacity:.85}
.login-card{display:flex;flex-direction:column;gap:16px;padding:48px;max-width:440px;width:100%;margin:auto}.login-card h2{font-size:var(--type-h3-size);font-weight:600;letter-spacing:-.3px}.login-demo{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:20px;border-top:1px solid var(--color-hairline)}.login-demo button{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--color-hairline);background:var(--color-canvas);font-size:13px;font-weight:500;text-align:left;transition:background 100ms}.login-demo button:hover{background:var(--color-surface)}.login-demo button .mono{font-weight:400;font-size:11px}.login-demo .kicker{margin-bottom:6px}
/* demo */
.demo-bar{position:fixed;top:0;left:0;right:0;height:52px;z-index:40;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--color-brand-navy);color:#fff}.demo-tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--color-brand-yellow)}
.demo-roles{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}.demo-roles::-webkit-scrollbar{display:none}.demo-roles .sm{display:none}@media (max-width:1100px){.demo-roles .lg{display:none}.demo-roles .sm{display:inline}}.demo-roles button{height:30px;padding:0 12px;border-radius:var(--radius-md);font-size:13px;color:rgba(255,255,255,.75);white-space:nowrap;transition:background 100ms}.demo-roles button:hover{background:rgba(255,255,255,.1)}.demo-roles button.on{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.demo-acts{display:flex;gap:8px;align-items:center}.demo-x{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-md);color:rgba(255,255,255,.7)}.demo-x:hover{background:rgba(255,255,255,.1);color:#fff}
.spot{position:fixed;z-index:70;border-radius:var(--radius-lg);box-shadow:0 0 0 9999px rgba(10,21,48,.55);pointer-events:none;transition:all 300ms ease}
.tour-tip{position:fixed;z-index:71;width:360px;max-width:calc(100vw - 32px);background:var(--color-canvas);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);padding:18px 20px;display:flex;flex-direction:column;gap:8px;transition:top 300ms ease,left 300ms ease}.tour-tip h4{font-size:16px}.tour-tip p{margin:0;font-size:14px;color:var(--color-slate);line-height:1.5}.tour-a{display:flex;gap:8px;align-items:center;margin-top:6px}
.tour-bottom{left:50%;bottom:24px;top:auto;transform:translateX(-50%);width:720px}.ap-top{display:flex;align-items:center;gap:14px}.ap-prog{flex:1;height:4px;border-radius:2px;background:var(--color-hairline)}.ap-prog i{display:block;height:100%;border-radius:2px;background:var(--color-primary);transition:width 300ms}.ap-cap{font-size:16px!important;color:var(--color-ink)!important;min-height:48px}.ap-speed{display:flex;align-items:center;gap:8px;font-size:12px}.ap-speed input{width:90px;accent-color:var(--color-primary)}
.jm{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start}.jm-col{border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:14px}.jm-col header{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.jm-col h4{font-size:16px}.jm-col ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.jm-col li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.75);border-radius:var(--radius-md);cursor:pointer;color:var(--color-steel);transition:background 100ms,box-shadow 150ms}.jm-col li:hover{background:#fff;box-shadow:var(--shadow-1)}.jm-n{width:24px;height:24px;border-radius:50%;background:var(--color-ink-deep);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex-shrink:0}.jm-t{flex:1;display:flex;flex-direction:column;font-size:13px;color:var(--color-slate)}.jm-t b{color:var(--color-ink);font-weight:600;font-size:14px}
.tint-sky{background:var(--color-card-tint-sky)}.tint-mint{background:var(--color-card-tint-mint)}.tint-yellow{background:var(--color-card-tint-yellow)}.tint-lavender{background:var(--color-card-tint-lavender)}
/* responsive */
@media (max-width:1100px){.two-split,.two-detail{grid-template-columns:minmax(0,1fr)}.tour-bottom{width:calc(100vw - 32px)}}
@media (max-width:820px){.shell{grid-template-columns:minmax(0,1fr)}.side{position:fixed;top:auto!important;bottom:0;left:0;right:0;height:auto!important;border-right:0;border-top:1px solid var(--color-hairline);z-index:20;flex-direction:row;align-items:center}.side-top,.side-bot,.side-sub{display:none}.side-nav{flex-direction:row;width:100%;justify-content:space-around;padding:6px}.side-nav button{flex-direction:column;gap:3px;height:auto;padding:6px 8px;font-size:11px}.side-nav button .cnt{position:absolute;margin:0;transform:translate(14px,-6px)}.side-nav button{position:relative}
.top{padding:0 16px;gap:10px}.top-role .kicker{display:none}.top-role .sel select{max-width:150px}.page{padding:16px 16px 96px;gap:14px}.ph h1{font-size:26px}.ph h1 .mono{font-size:22px}.ph-a{margin-left:0;width:100%}.login{grid-template-columns:1fr}.login-brand{padding:28px;gap:24px}.login-brand h1{font-size:30px}.login-card{padding:28px}.dl{grid-template-columns:1fr;gap:4px}.dl dt{margin-top:10px}.tl li{grid-template-columns:80px 1fr}.tl-b{display:none}.stat-v{font-size:26px}
.demo-bar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}.has-demo{padding-top:96px}.has-demo .top{top:96px}.demo-roles{order:3;width:100%;flex:none}.demo-acts .btn span{display:none}.delay-wrap{grid-template-columns:1fr}.hbars li{grid-template-columns:100px 1fr 60px}}