/* ChainEx V06 · Signal design system (pairs with Website V05: navy + blue, brighter). Tokens, shell, components. See /workspace/chainex/v06-design-system.md */
:root{--bg:#F7F9FC;--bg-2:#EEF3FA;--s1:#FFFFFF;--s2:#F3F6FB;--s3:#E7EDF6;--line:rgba(22,48,80,.10);--line-2:rgba(22,48,80,.18);--t1:#0F2440;--t2:#4E6280;--t3:#8495AD;
--acc:#2E74E6;--acc-2:rgba(46,116,230,.10);--acc-t:#fff;--ok:#12976A;--warn:#B7700A;--bad:#D9343D;--vio:#6E4FE0;--cyan:#1B9DC2;
--okb:rgba(18,151,106,.11);--warnb:rgba(183,112,10,.12);--badb:rgba(217,52,61,.10);--viob:rgba(110,79,224,.11);--cyanb:rgba(27,157,194,.11);
--sh:0 18px 50px -24px rgba(46,116,230,.35),0 2px 6px rgba(21,37,60,.06);--glass:rgba(255,255,255,.76);
--f:"Geist","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fm:"Geist Mono",ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
--e:cubic-bezier(.2,.8,.2,1);--rail:56px;--top:48px;color-scheme:light}
html[data-v5=night]{--bg:#08111C;--bg-2:#060D16;--s1:#0D1828;--s2:#122036;--s3:#192A43;--line:rgba(140,175,220,.11);--line-2:rgba(140,175,220,.20);--t1:#E7EEFA;--t2:#9AACC4;--t3:#677B96;
--acc:#3B82F6;--acc-2:rgba(59,130,246,.18);--ok:#3DD68C;--warn:#F5B544;--bad:#FF5C64;--vio:#A48BFF;--cyan:#5EC8E8;
--okb:rgba(61,214,140,.13);--warnb:rgba(245,181,68,.13);--badb:rgba(255,92,100,.13);--viob:rgba(164,139,255,.14);--cyanb:rgba(94,200,232,.13);
--sh:0 18px 50px -16px rgba(0,0,0,.6),0 0 0 1px rgba(140,175,220,.08);--glass:rgba(13,24,40,.74);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}
body.v5{background:var(--bg);color:var(--t1);font:400 14px/22px var(--f);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";min-height:100vh}
:where(.v5) :is(button,input,select,textarea){font:inherit;color:inherit}
.v5 button{cursor:pointer}.v5 a{color:inherit}
.v5 :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.v5 ::selection{background:var(--acc-2)}
.mono,.v5 .num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tnum{font-variant-numeric:tabular-nums}
.t2{color:var(--t2)}.t3{color:var(--t3)}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.acc{color:var(--acc)}
.micro{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.small{font-size:13px;line-height:18px}
h1.v5h{font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.02em;margin:0}
.disp{font-size:32px;line-height:36px;font-weight:650;letter-spacing:-.025em}
/* ---------- shell ---------- */
.x-shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.x-rail{position:sticky;top:0;height:100vh;background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:8px;gap:2px;z-index:40;width:var(--rail);transition:width .2s var(--e);overflow:hidden}
.x-rail:hover,.x-rail.pin{width:220px;box-shadow:var(--sh)}
.x-logo{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:6px;text-decoration:none;white-space:nowrap}
.x-mark{width:28px;height:28px;flex:none;border-radius:8px;background:var(--t1);color:var(--bg);display:grid;place-items:center;font:700 12px/1 var(--f);letter-spacing:-.04em;position:relative}
.x-mark:after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--bg-2)}
.x-word{font-weight:650;letter-spacing:-.02em;font-size:15px}.x-word b{color:var(--acc);font-weight:650}
.x-grp{margin:10px 6px 4px;white-space:nowrap;opacity:0;transition:opacity .15s}.x-rail:hover .x-grp,.x-rail.pin .x-grp{opacity:1}
.x-ni{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:8px;color:var(--t2);text-decoration:none;white-space:nowrap;font-weight:500;border:0;background:none;width:100%;text-align:left;position:relative}
.x-ni:hover{background:var(--s2);color:var(--t1)}.x-ni.on{background:var(--s3);color:var(--t1)}
.x-ni.on:before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--acc)}
.x-ni svg{flex:none}.x-ni .bdg{margin-left:auto;font:600 11px/18px var(--fm);min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;text-align:center}
.x-rail:not(:hover):not(.pin) .x-ni .bdg{position:absolute;left:24px;top:3px;margin:0;min-width:14px;height:14px;line-height:14px;font-size:9px;padding:0 3px}
.x-sp{flex:1}
.x-main{min-width:0;display:flex;flex-direction:column}
.x-top{height:var(--top);display:flex;align-items:center;gap:10px;padding:0 16px 0 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);z-index:30}
.x-crumb{display:flex;align-items:center;gap:8px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.x-crumb span{color:var(--t3);font-weight:450}
.x-k{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--s1);color:var(--t3);min-width:260px;margin-left:auto;font-size:13px}
.x-k:hover{border-color:var(--line-2);color:var(--t2)}
kbd,.kbd{font:500 11px/16px var(--fm);padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;color:var(--t2);background:var(--s2)}
.x-k kbd{margin-left:auto}
.x-ib{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;display:grid;place-items:center;color:var(--t2);flex:none;text-decoration:none}
.x-ib:hover{background:var(--s2);color:var(--t1);border-color:var(--line)}
.x-clock{font:500 12px/1 var(--fm);color:var(--t3);white-space:nowrap}
.x-live{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f);color:var(--ok);letter-spacing:.04em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.dot.live{box-shadow:0 0 0 0 currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.x-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--f);color:#fff;flex:none;letter-spacing:.02em}
.x-role{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--s1);padding:0 8px;font-size:13px;max-width:150px}
.x-page{padding:24px;max-width:1440px;width:100%}
.x-tabs{display:none}
/* ---------- components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--s1);color:var(--t1);font-weight:550;font-size:13px;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,transform .12s}
.btn:hover{background:var(--s2)}.btn:active{transform:scale(.98)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}.btn.pri:hover{filter:brightness(1.08)}
.btn.inv{background:var(--t1);border-color:var(--t1);color:var(--bg)}
.btn.ghost{border-color:transparent;background:none;color:var(--t2)}.btn.ghost:hover{background:var(--s2);color:var(--t1)}
.btn.danger{color:var(--bad)}.btn.okb{background:var(--ok);border-color:var(--ok);color:#fff}
html[data-v5=night] .btn.okb{color:#05140c}
.btn.sm{height:28px;padding:0 9px;font-size:12.5px}.btn.lg{height:44px;padding:0 18px;font-size:15px;border-radius:10px}.btn.xl{height:56px;padding:0 22px;font-size:17px;border-radius:14px;font-weight:600}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:550;background:var(--s3);color:var(--t2);white-space:nowrap}
.chip.ok{background:var(--okb);color:var(--ok)}.chip.warn{background:var(--warnb);color:var(--warn)}.chip.bad{background:var(--badb);color:var(--bad)}.chip.acc{background:var(--acc-2);color:var(--acc)}.chip.vio{background:var(--viob);color:var(--vio)}.chip.cyan{background:var(--cyanb);color:var(--cyan)}
.seg{display:inline-flex;padding:2px;border-radius:8px;background:var(--s3);gap:2px}
.seg button{height:28px;border:0;background:none;border-radius:6px;padding:0 10px;font-size:12.5px;font-weight:550;color:var(--t2)}
.seg button.on{background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line)}
.card{background:var(--s1);border:1px solid var(--line);border-radius:12px}
.pad{padding:16px}
.grid{display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kpi{background:var(--s1);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0;border:0;text-align:left;color:var(--t1)}
button.kpi:hover{background:var(--s2)}
.kpi .l{font-size:12.5px;color:var(--t2);font-weight:500;display:flex;align-items:center;gap:6px}
.kpi .v{font:600 24px/30px var(--fm);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--t3)}
.kpi svg{display:block;margin-top:2px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--s1);text-align:left;font-weight:550;color:var(--t3);font-size:12px;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.tbl td{padding:0 12px;height:38px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:hover td{background:var(--s2)}.tbl tr.sel td{background:var(--acc-2)}
.tbl td.num,.tbl th.num{text-align:right}
.row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--t1);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.row:hover{background:var(--s2)}.row.sel{background:var(--acc-2)}
.row .grow{flex:1;min-width:0}.row .ttl{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .sub{font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:4px;border-radius:4px;background:var(--s3);overflow:hidden}.bar i{display:block;height:100%;background:var(--acc);border-radius:4px}
.bar.ok i{background:var(--ok)}
.sec-h{display:flex;align-items:center;gap:8px;padding:12px 12px 6px}
.in{height:36px;border:1px solid var(--line-2);border-radius:8px;background:var(--s1);padding:0 10px;width:100%;outline:none}
.in:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-2)}
textarea.in{height:auto;padding:8px 10px}
.empty{padding:32px 16px;text-align:center;color:var(--t3);font-size:13px}
/* overlays */
.x-scrim{position:fixed;inset:0;background:rgba(0,0,0,.36);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.x-scrim.on{opacity:1;pointer-events:auto}
.x-panel{position:fixed;top:8px;right:8px;bottom:8px;width:min(440px,calc(100vw - 16px));background:var(--s1);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);transform:translateX(calc(100% + 16px));transition:transform .22s var(--e);z-index:90;display:flex;flex-direction:column;overflow:hidden}
.x-panel.wide{width:min(760px,calc(100vw - 16px))}
.x-panel.on{transform:none}
.x-ph{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);flex:none}
.x-ph h2{margin:0;font-size:15px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-pb{padding:16px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.x-pf{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex:none}
.x-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--t1);color:var(--bg);padding:9px 14px;border-radius:10px;font-size:13px;font-weight:550;opacity:0;transition:.2s var(--e);z-index:120;pointer-events:none;display:flex;gap:8px;align-items:center;max-width:92vw;box-shadow:var(--sh)}
.x-toast.on{opacity:1;transform:translate(-50%,0)}
.x-cmd{position:fixed;inset:0;z-index:110;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(0,0,0,.4);backdrop-filter:blur(2px)}
.x-cmd.on{display:flex}
.x-cmdb{width:min(640px,94vw);background:var(--s1);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.x-cmdb input{width:100%;height:52px;border:0;border-bottom:1px solid var(--line);background:none;padding:0 18px;font-size:16px;outline:none}
.x-cmdl{max-height:56vh;overflow:auto;padding:6px}
.x-ci{display:flex;align-items:center;gap:10px;width:100%;height:40px;border:0;background:none;border-radius:8px;padding:0 10px;text-align:left;color:var(--t1);font-size:14px}
.x-ci small{margin-left:auto;color:var(--t3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.x-ci.on{background:var(--s3)}.x-ci svg{color:var(--t3);flex:none}
.x-cg{padding:8px 10px 4px}
.x-cf{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--t3)}
/* charts */
.spark path.a{fill:var(--acc-2)}.spark path.l{fill:none;stroke:var(--acc);stroke-width:1.6}
/* map */
.x-map{position:relative;background:var(--s2);overflow:hidden}
.x-map .maplibregl-ctrl-attrib{font-size:10px;background:var(--glass)!important;color:var(--t3)}
.x-map .maplibregl-ctrl-attrib a{color:var(--t3)}
.mk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--fm);color:#fff;border:2px solid var(--s1);box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer}
.mk.drv{width:14px;height:14px;border:2px solid #fff}.mk.drv.live{animation:pulse 2s infinite;color:inherit}
.mk.sel{transform:scale(1.35);z-index:3}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line)}
.x-themeseg button{min-width:56px}
/* phone shell */
@media (max-width:899px){
 body.v5{font-size:15px}
 .x-shell{display:block}
 .x-rail{display:none}
 .x-top{padding:0 10px 0 14px;height:52px;padding-top:env(safe-area-inset-top);height:calc(52px + env(safe-area-inset-top))}
 .x-k{min-width:0;width:36px;height:36px;padding:0;justify-content:center;margin-left:auto;border-color:transparent;background:none}
 .x-k span,.x-k kbd{display:none}
 .x-clock,.x-role,.x-hide-m{display:none!important}
 .x-page{padding:16px 14px 96px}
 .x-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--s1) 90%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
 .x-tab{flex:1;height:52px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:550;color:var(--t3);position:relative;text-decoration:none;border-radius:10px}
 .x-tab.on{color:var(--t1)}.x-tab.on svg{color:var(--acc)}
 .x-tab .bdg{position:absolute;top:4px;left:calc(50% + 6px);font:600 9.5px/15px var(--fm);min-width:15px;padding:0 4px;border-radius:8px;background:var(--bad);color:#fff}
 .x-panel,.x-panel.wide{top:auto;left:0;right:0;bottom:0;width:100%;max-height:90vh;height:auto;min-height:40vh;border-radius:20px 20px 0 0;transform:translateY(105%);padding-bottom:env(safe-area-inset-bottom)}
 .x-panel.on{transform:none}
 .x-panel:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0;flex:none}
 .x-toast{bottom:84px}
 .btn{height:40px;padding:0 14px;font-size:14px}.btn.sm{height:36px}
 .kpis{grid-template-columns:1fr 1fr}
 .x-show-d{display:none!important}
}
@media (min-width:900px){.x-show-m{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.mk.u{width:9px;height:9px;border:1.5px solid var(--s1);box-shadow:none;opacity:.85}
.mk.drv{width:16px;height:16px}
.x-tab span:not(.bdg){white-space:nowrap}
.v5 .x-tab{font:550 10.5px/1.2 var(--f)}
@media (max-width:899px){.db5-ch .db5-leg{display:none}}
.x-pb>*{flex:none}
/* V06 brand mark pairs with Website V05 (navy → blue) */
.x-mark{background:linear-gradient(135deg,#1E3860,#2E74E6);color:#fff}
html[data-v5=night] .x-mark{background:linear-gradient(135deg,#25486F,#3B82F6)}
.dv-wel .mark{background:linear-gradient(135deg,#1E3860,#2E74E6)!important;color:#fff!important}
.x-ni>span:not(.bdg),.x-logo .x-word{transition:opacity .15s}.x-rail:not(:hover):not(.pin) .x-ni>span:not(.bdg),.x-rail:not(:hover):not(.pin) .x-word{opacity:0}

/* V06 access + workspace chrome */

.x-locked,.x-locked.btn,.x-ni.x-locked{opacity:.48;filter:saturate(.3);cursor:not-allowed;position:relative}
.x-locked .x-lk{margin-left:auto;display:inline-flex;opacity:.85}
.x-topx{display:flex;align-items:center;gap:8px;flex:none}
.x-hub{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--s1);padding:0 8px;font-size:12.5px;max-width:170px;color:inherit}
.x-hubpill{font:600 11px/28px var(--fm);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:8px;padding:0 8px;color:var(--t2)}
.x-ws{display:flex;flex-direction:column;gap:4px}
.x-wsi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit;border:1px solid var(--line)}
.x-wsi:hover{background:var(--s2)}.x-wsi.on{border-color:var(--acc);background:var(--acc-2)}
.x-wsi b{font-weight:600;font-size:14px}.x-wsi span{font-size:12px;color:var(--t3)}
.x-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.x-ctx{position:fixed;z-index:80;min-width:220px;background:var(--s1);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:6px;display:none}
.x-ctx.on{display:block}
.x-ctx button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:inherit;font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;text-align:left;cursor:pointer}
.x-ctx button:hover{background:var(--s2)}
.x-ctx .sep{height:1px;background:var(--line);margin:4px 6px}
.x-ctx .x-locked{opacity:.45}
@media (max-width:899px){.x-hub{max-width:110px}.x-topx .x-hide-m{display:none}}

/* aligned shell top */
.x-top{align-items:center}
.x-top .x-k{height:36px;box-sizing:border-box}
.x-top > .x-ib{width:36px;height:36px}
.x-clock{height:36px;display:inline-flex;align-items:center}
.x-topx{display:flex;align-items:center;gap:6px;height:36px;flex:none}
.x-topx .x-ib{width:36px;height:36px;box-sizing:border-box}
.x-topx .x-ib:has(span){width:auto;padding:0 10px;display:inline-flex;align-items:center;gap:6px;flex-direction:row}
.x-topx .x-ib:has(span) span{margin:0;font-size:12.5px;font-weight:550;line-height:1;color:inherit}
.x-hub{height:36px;border-radius:8px;font-size:12.5px}
.x-hubpill{height:36px;line-height:34px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:8px}
.x-av{width:36px;height:36px}
@media (max-width:899px){
  .x-topx{height:36px}
  .x-topx .x-ib{width:36px;height:36px}
}