/* Pista Live — product UI (quiet, on Glass) + the Live chain (machinery, on Night).
   Logical properties throughout so ?lang=ar-x mirrors cleanly. */
:root{
  --bar-h:56px; --side-w:208px; --chain-w:400px;
  --ch-bg:#0B1328; --ch-ink:#E9ECF2; --ch-mute:#9AA3B8; --ch-line:rgba(233,236,242,.12); --ch-accent:#8C98FF;
  --ch-ok:#5BC995; --ch-warn:#E3AE55; --ch-bad:#F28B82;
  --fs:14px;
}
html,body{height:100%}
body{font-size:var(--fs);line-height:1.5;display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;overflow:hidden}
button,select,input{font:inherit;color:inherit}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;background:var(--ultra);color:var(--on-ultra);padding:8px 12px;border-radius:var(--r);text-decoration:none}
.skip:focus{inset-block-start:10px}
.boot{padding:40px;color:var(--mute)}
.muted{color:var(--mute)} .sm{font-size:12.5px} .xs{font-size:11.5px}
.k{font-size:10.5px;letter-spacing:.16em}
th{text-align:start}
.num-end{text-align:end}
.neg{color:var(--bad)}

/* ---------- top bar ---------- */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 16px;background:var(--surface);border-block-end:1px solid var(--line);min-block-size:var(--bar-h);position:relative;z-index:30}
.bar .wm{color:var(--ink);gap:10px}
.wm-svg{display:block;block-size:24px;inline-size:auto}
.bar .wm small{border-left:0;border-inline-start:1px solid var(--line-strong);padding-left:0;padding-inline-start:10px}
.ex-badge{font-weight:600}
.bar-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-inline-start:auto}
.sel{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
select,input[type=search],.fld input{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 10px;font-size:13px;color:var(--ink);min-inline-size:0;max-inline-size:100%}
select{padding-inline-end:28px}
.bar-sel select{font-weight:500}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.seg .btn{border-radius:0;background:transparent;color:var(--ink-2);border:0;border-inline-start:1px solid var(--line)}
.seg .btn:first-child{border-inline-start:0}
.seg .btn[aria-pressed="true"]{background:var(--ink);color:var(--glass)}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 10px;color:var(--ink-2)}
.lang summary::-webkit-details-marker{display:none}
.lang-menu{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);inline-size:min(300px,calc(100vw - 32px));max-block-size:70dvh;overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:12px;box-shadow:0 18px 40px rgba(13,20,36,.16);z-index:40}
.lang-menu ul{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:2px}
.lang-menu li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:4px 2px;border-block-end:1px solid var(--line)}
.lang-menu .lg{color:var(--mute)} .lang-menu .lg.on{color:var(--ink);font-weight:600}
.lang-menu .dev a{font-size:13px}

/* buttons */
.btn-sm{padding:8px 12px;font-size:13px}
.btn-xs{padding:6px 9px;font-size:12px}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
@media (hover:hover) and (pointer:fine){.btn-g:hover{color:var(--ink);background:var(--ultra-soft)}}
.btn.wide{inline-size:100%;justify-content:center;margin-block-start:8px}

/* ---------- app grid ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr) var(--chain-w);min-block-size:0;block-size:100%}
.side{border-inline-end:1px solid var(--line);padding:14px 10px;overflow:auto;display:flex;flex-direction:column;gap:4px;background:var(--glass)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side-k{margin:10px 10px 4px}
.side-k:first-child{margin-block-start:2px}
.nv{display:flex;align-items:center;justify-content:space-between;gap:8px;inline-size:100%;text-align:start;background:none;border:0;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);cursor:pointer;font-size:13.5px;transition:background-color 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){.nv:hover{background:var(--surface);color:var(--ink)}}
.nv[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.nv{position:relative}
.nv[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:0;inset-block:9px;inline-size:3px;background:var(--ultra);border-radius:2px}
.nv-c:not(:empty){font-size:11px;font-weight:600;color:var(--on-ultra);background:var(--ultra);border-radius:999px;padding:1px 7px;margin-inline-start:auto}
.side-foot{margin-block-start:auto;padding:10px;font-size:12px;color:var(--mute)}

main{position:relative;min-inline-size:0;min-block-size:0;display:flex;flex-direction:column;container-type:inline-size}
.scroll{overflow:auto;flex:1;min-block-size:0;padding:22px clamp(16px,3cqi,32px) 64px;outline:none}
#view{max-inline-size:1180px;margin-inline:auto}

/* view header */
.vh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 20px;margin-block-end:18px}
.vh h1{font-size:26px;letter-spacing:-.03em;line-height:1.1}
.vh-sub{color:var(--mute);font-size:13px;margin-block-start:4px}
.vh-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:26px 0 10px}
.mt{margin-block-start:18px}
.note-line{font-size:12.5px;color:var(--mute);margin:12px 0}
.rule-line{font-size:13px;color:var(--ink-2);border-inline-start:2px solid var(--ultra);padding:6px 12px;margin-block-end:16px;background:var(--surface)}
.empty{color:var(--mute);font-size:13px;padding:6px 0}
.more{color:var(--mute);font-size:12.5px;margin-block-start:8px}

/* KPI tiles: hairline grid */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-block-end:18px}
.kpis>*{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.kl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.kv,.kpis b{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.kd{font-size:12px;color:var(--mute)}
.kd.up{color:var(--ok)} .kd.down{color:var(--bad)}
@container (max-width:620px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* panels */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
@container (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:16px;min-inline-size:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-inline-size:0}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block-end:8px}
.ph h2{font-size:14px;font-weight:600;letter-spacing:-.005em}
.count{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.att{list-style:none;margin:0;padding:0}
.att li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-block-start:1px solid var(--line)}
.att li:first-child{border-block-start:0}
.at-t{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
@container (max-width:460px){.att li{grid-template-columns:minmax(0,1fr) auto}.att li .pill{grid-column:1/-1;justify-self:start}}
.report p{font-size:13.5px;color:var(--ink-2)}
.todo{margin:10px 0 0;padding-inline-start:20px;display:grid;gap:4px;font-size:13.5px}
.notes{list-style:none;margin:0;padding:0}
.notes li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-block-start:1px solid var(--line);font-size:13px}
.notes li:first-child{border-block-start:0}
.notes li>span:not(.nt):not(.pill){flex:1;min-inline-size:0}
.nt{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}

/* tables */
.tw{border-radius:var(--r);max-inline-size:100%}
.tw table{min-inline-size:680px}
td,th{padding:9px 12px}
td small{display:block;color:var(--mute);font-size:12px}
.row-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){.row-link:hover td{background:var(--ultra-soft)}}
.row-link:focus-visible{outline:2px solid var(--ultra);outline-offset:-2px}
tr.is-off td{color:var(--mute)}
.nm{font-weight:500}
.seats{display:inline-flex;gap:2px;vertical-align:middle}
.seats i{inline-size:7px;block-size:12px;border-radius:2px;background:var(--line)}
.seats i.on{background:var(--ink-2)}

/* toolbars, chips, tabs */
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-block-end:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:12px}
.toolbar .chips{margin:0}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--ink-2);transition:background-color 150ms ease}
.chip:active,.nv:active,.tab:active{transform:scale(.97)}
.chip,.nv,.tab{transition:transform 140ms var(--ease-out),background-color 150ms ease,color 150ms ease}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--glass);border-color:var(--ink)}
.search input{inline-size:min(260px,100%)}
.tabs{display:flex;gap:0;border-block-end:1px solid var(--line);margin-block-end:14px;overflow-x:auto}
.tab{background:none;border:0;border-block-end:2px solid transparent;padding:8px 12px;cursor:pointer;color:var(--mute);font-weight:500;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-block-end-color:var(--ultra)}

/* calendar */
.wknav{display:flex;align-items:center;gap:8px}
.wk{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.cal-scroll,.board-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));min-inline-size:1050px}
.day{border-inline-start:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.day:first-child{border-inline-start:0}
.day h3{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-block-size:24px}
.day.is-today{background:color-mix(in srgb,var(--ultra) 4%,transparent)}
.ses{display:grid;gap:1px;padding:7px 8px;border:1px solid var(--line);border-inline-start:3px solid var(--ultra);border-radius:4px;background:var(--surface);font-size:12px;min-inline-size:0}
.ses.private{border-inline-start-color:var(--ink-2)}
.ses.trial{border-inline-start-color:var(--ok)}
.ses.ext{border-style:dashed;border-inline-start:3px dashed var(--line-strong);background:transparent;color:var(--mute)}
.ses .st{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ses.ext .st{color:var(--mute)}
.ses .sn{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.ses .sm{color:var(--mute);overflow-wrap:anywhere}
.ses .tags{display:flex;flex-wrap:wrap;gap:4px;margin-block-start:3px}
.ses .pill{font-size:10.5px;padding:1px 7px}

/* renewals board */
.board{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));min-inline-size:950px}
.col{padding:10px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.col:first-child{border-inline-start:0}
.col h3{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mute);margin-block-end:4px}
.card{border:1px solid var(--line);border-radius:4px;padding:8px 9px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;font-size:12.5px;background:var(--surface)}
.card b{font-weight:500;overflow-wrap:anywhere}
.card small{grid-column:1/-1;color:var(--mute);font-size:11.5px}

/* agents */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.agent{background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.agent.is-off{background:color-mix(in srgb,var(--surface) 70%,var(--glass))}
.agent.is-off h3,.agent.is-off p{color:var(--mute)}
.ag-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ag-h h3{font-size:14.5px;font-weight:600}
.ag-when{font-size:12px;color:var(--ultra);font-weight:600}
.agent p{font-size:13px;color:var(--ink-2)}
.ag-f{margin-block-start:auto;padding-block-start:8px;border-block-start:1px solid var(--line);display:grid;gap:6px}
.switch{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-size:12px;color:var(--mute);padding:2px}
.switch i{inline-size:30px;block-size:18px;border-radius:999px;background:var(--line-strong);position:relative;transition:background-color 150ms ease}
.switch i::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:14px;block-size:14px;border-radius:50%;background:#fff;transition:transform 180ms var(--ease-out)}
.switch[aria-checked="true"] i{background:var(--ultra)}
.switch[aria-checked="true"] i::after{transform:translateX(12px)}
[dir=rtl] .switch[aria-checked="true"] i::after{transform:translateX(-12px)}
.dql{list-style:none;margin:0;padding:0}
.dq{padding:12px 0;border-block-start:1px solid var(--line);display:grid;gap:6px}
.dq:first-child{border-block-start:0}
.dq-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dq-h b{font-weight:500;font-size:13.5px}
.dq blockquote,.appr blockquote{margin:0;padding:8px 12px;border-inline-start:2px solid var(--line-strong);color:var(--ink-2);font-size:13px;background:var(--glass);border-radius:0 4px 4px 0}
[dir=rtl] .dq blockquote{border-radius:4px 0 0 4px}
.dq-a{display:flex;gap:8px;flex-wrap:wrap}
.hist{margin-block-start:10px}
.hist summary{cursor:pointer;color:var(--mute);font-size:13px}

/* connections */
.methods{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.methods li{background:var(--surface);padding:10px 12px;display:grid;gap:4px;justify-items:start}
.methods b{font-weight:500;font-size:13.5px}
.conns{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.conns li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;padding:10px 14px;border-block-start:1px solid var(--line)}
.conns li:first-child{border-block-start:0}
.cn{display:grid;gap:1px;min-inline-size:0}
.cn b{font-weight:500}
.cb{display:flex;gap:8px;align-items:center}
.when{font-size:11px;font-weight:600;color:var(--mute);border:1px solid var(--line-strong);border-radius:4px;padding:1px 6px;font-variant-numeric:tabular-nums}
.cs{min-inline-size:96px;display:flex;justify-content:flex-end}
@container (max-width:640px){.conns li{grid-template-columns:minmax(0,1fr) auto}.cb{grid-column:1/2;grid-row:2}.cs{grid-row:1/3;grid-column:2}}

/* drawer */
#drawer-host:empty{display:none}
.dr-scrim{position:absolute;inset:0;background:rgba(11,19,40,.18);z-index:5}
.drawer{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(440px,100%);background:var(--surface);border-inline-start:1px solid var(--line-strong);z-index:6;overflow:auto;padding:18px 20px 40px;box-shadow:-18px 0 40px rgba(13,20,36,.10);animation:drIn 220ms var(--ease-out)}
[dir=rtl] .drawer{animation-name:drInR}
@keyframes drIn{from{transform:translateX(24px);opacity:0}}
@keyframes drInR{from{transform:translateX(-24px);opacity:0}}
.dr-head{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-block-end:12px}
.dr-head h2{font-size:22px;letter-spacing:-.02em;overflow-wrap:anywhere}
.drawer h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:18px 0 6px}
.kv{margin:0;display:grid;border-block-start:1px solid var(--line)}
.kv>div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:10px;padding:7px 0;border-block-end:1px solid var(--line);font-size:13px}
.kv dt{color:var(--mute)} .kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.kv dd small{color:var(--mute);margin-inline-start:4px}
.dr-act{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.dots li{font-size:0;inline-size:14px;block-size:14px;border-radius:3px;background:var(--ok-soft);border:1px solid var(--ok)}
.dots li.absent{background:var(--bad-soft);border-color:var(--bad)}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 0;border-block-end:1px solid var(--line);font-size:12.5px}
.mini-list.msgs li{grid-template-columns:auto minmax(0,1fr)}
.ml{color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- phones ---------- */
.who{margin-block-end:14px;display:grid;gap:6px}
.phone-wrap{display:flex;justify-content:center;padding:6px 0 20px}
.phone{inline-size:min(370px,100%);background:var(--surface);color:var(--ink);border-radius:30px;box-shadow:0 0 0 8px #0D1424,0 24px 60px rgba(13,20,36,.22);overflow:hidden;display:flex;flex-direction:column;min-block-size:560px;max-block-size:calc(100dvh - 220px)}
.ph-status{display:flex;justify-content:space-between;gap:12px;padding:10px 20px 6px;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.ph-body{padding:6px 16px 18px;overflow:auto;display:grid;gap:10px;align-content:start}
.ph-hi{font-size:19px;font-weight:600;letter-spacing:-.02em}
.ph-h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-block-start:6px}
.cls{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:6px}
.cls-h{display:flex;gap:10px;align-items:baseline}
.cls-h b{font-size:16px;font-variant-numeric:tabular-nums}
.roster{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.roster li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-block-start:1px solid var(--line)}
.av{inline-size:28px;block-size:28px;border-radius:50%;background:var(--ultra-soft);color:var(--ultra);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.rn{font-size:13.5px;overflow-wrap:anywhere}
.rn small{color:var(--ok);font-weight:600}
.roster .seg .btn{padding:5px 8px;font-size:11.5px}
.roster .seg .btn[aria-pressed="true"]{background:var(--ink);color:var(--glass)}
.roster .seg .btn[data-st="absent"][aria-pressed="true"]{background:var(--bad);color:#fff}
.ph-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px}
.ph-notes li{display:flex;gap:8px;padding:6px 0;border-block-end:1px solid var(--line)}
.appr{border-color:var(--ultra);background:var(--ultra-soft)}
.chat-h{display:flex;gap:10px;align-items:center;padding:8px 14px 10px;border-block-end:1px solid var(--line)}
.chat-h small{display:block;color:var(--mute);font-size:12px}
.thread{list-style:none;margin:0;padding:12px 12px 18px;display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1;background:var(--glass)}
.b{max-inline-size:84%;padding:8px 11px;border-radius:14px;font-size:13.5px;display:grid;gap:3px;align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.b.in{align-self:flex-end;background:var(--ultra-soft);border-color:transparent}
.b.draft{border-style:dashed;border-color:var(--warn);background:transparent}
.bt{overflow-wrap:anywhere;white-space:pre-line}
.bm{font-size:11px;color:var(--mute);justify-self:end}
.sep{align-self:center;font-size:11px;color:var(--mute);padding:4px 0}
.composer{border-block-start:1px solid var(--line);padding:12px 16px;font-size:12px;color:var(--mute);text-align:center}
@media (max-width:420px){.phone{border-radius:22px;box-shadow:0 0 0 5px #0D1424,0 18px 40px rgba(13,20,36,.2)}}

/* ---------- story banner ---------- */
.story{background:var(--ultra);color:#fff;padding:12px clamp(16px,3cqi,32px);z-index:8}
.st-in{max-inline-size:1180px;margin-inline:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center}
.story .k{color:rgba(255,255,255,.8)}
.story p{font-size:15px;font-weight:500;line-height:1.35}
.st-a{display:flex;gap:6px}
.story .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.story .btn-g{color:#fff}
.st-bar{grid-column:1/-1;block-size:2px;background:rgba(255,255,255,.25)}
.st-bar i{display:block;block-size:100%;background:#fff;inline-size:0;transition:inline-size 300ms var(--ease-out)}
@container (max-width:560px){.st-in{grid-template-columns:minmax(0,1fr) auto}.story p{grid-column:1/-1;grid-row:2}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.m-scrim{position:absolute;inset:0;background:rgba(11,19,40,.4)}
.m-card{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:20px;inline-size:min(440px,100%);display:grid;gap:10px;box-shadow:0 30px 80px rgba(5,9,22,.35);animation:mIn 200ms var(--ease-out)}
@keyframes mIn{from{transform:scale(.97);opacity:0}}
.m-card h2{font-size:20px}
.m-steps{list-style:none;margin:4px 0;padding:0;display:grid;gap:8px;font-size:13.5px}
.m-steps li{display:flex;gap:10px;align-items:center}
.m-steps li.cur{font-weight:500}
.fld{display:grid;gap:4px;font-size:12.5px;color:var(--mute)}
.fld input{font-family:var(--mono)}
.m-a{display:flex;gap:8px}

/* ---------- Live chain (Night) ---------- */
.chain{background:var(--ch-bg);color:var(--ch-ink);display:flex;flex-direction:column;min-block-size:0;border-inline-start:1px solid #050916;z-index:20}
.ch-head{border-block-end:1px solid var(--ch-line)}
.ch-toggle{display:flex;align-items:center;gap:10px;inline-size:100%;background:none;border:0;color:inherit;padding:14px 16px;cursor:pointer;text-align:start}
.ch-title{font-size:15px;font-weight:600;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.ch-title::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--ch-ok);box-shadow:0 0 0 3px rgba(91,201,149,.18)}
.ch-clock{font-size:12px;color:var(--ch-mute);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.ch-chev{inline-size:8px;block-size:8px;border-inline-end:1.5px solid var(--ch-mute);border-block-end:1.5px solid var(--ch-mute);transform:rotate(45deg);transition:transform 200ms var(--ease-out);flex:none}
.chain[data-sheet="open"] .ch-chev{transform:rotate(-135deg)}
.ch-body{display:flex;flex-direction:column;min-block-size:0;flex:1}
.ch-ctrl{padding:12px 16px;display:grid;gap:10px;border-block-end:1px solid var(--ch-line)}
.time{display:flex;flex-wrap:wrap;gap:6px}
.chain .btn-s{background:transparent;color:var(--ch-ink);border-color:rgba(233,236,242,.28)}
@media (hover:hover) and (pointer:fine){.chain .btn-s:hover{background:rgba(140,152,255,.14);color:var(--ch-ink)}.chain .btn-g:hover{color:var(--ch-ink);background:rgba(140,152,255,.14)}}
.chain .btn-g{color:var(--ch-mute)}
.chain .btn-p{background:var(--ch-accent);color:#0A0F1C}
.story-btn{justify-content:center}
.scen summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ch-ink);padding:4px 0;list-style:none;display:flex;align-items:center;gap:8px}
.scen summary::-webkit-details-marker{display:none}
.scen summary::after{content:"";inline-size:7px;block-size:7px;border-inline-end:1.5px solid var(--ch-mute);border-block-end:1.5px solid var(--ch-mute);transform:rotate(45deg);margin-inline-start:auto;transition:transform 200ms var(--ease-out)}
.scen[open] summary::after{transform:rotate(-135deg)}
.sc-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-block-size:38dvh;overflow:auto}
.sc{inline-size:100%;block-size:100%;text-align:start;background:rgba(233,236,242,.04);border:1px solid var(--ch-line);border-radius:6px;color:var(--ch-ink);padding:8px 10px;cursor:pointer;display:grid;gap:2px;transition:background-color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.sc b{font-size:12.5px;font-weight:600;line-height:1.3}
.sc small{font-size:11px;color:var(--ch-mute);line-height:1.35}
@media (hover:hover) and (pointer:fine){.sc:hover{background:rgba(140,152,255,.12);border-color:rgba(140,152,255,.5)}}
.sc:active{transform:scale(.98)}
.chain :focus-visible{outline-color:var(--ch-accent)}
.ch-legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 16px;font-size:11px;color:var(--ch-mute);border-block-end:1px solid var(--ch-line)}
.ch-legend span{display:inline-flex;align-items:center;gap:5px}
.ch-legend span::before{content:"";inline-size:8px;block-size:8px;flex:none}
.lg-t::before{border-radius:50%;background:var(--ch-accent)}
.lg-r::before{border:1.5px solid var(--ch-ink);border-radius:1px}
.lg-a::before{border:1.5px solid var(--ch-accent);transform:rotate(45deg) scale(.85)}
.lg-e::before{border-radius:50%;background:var(--ch-mute);transform:scale(.7)}
.lg-d::before{border-radius:50%;border:1.5px dashed var(--ch-warn)}
.ch-tree{overflow:auto;flex:1;min-block-size:0;padding:10px 12px 40px;overscroll-behavior:contain}
.ch-empty{color:var(--ch-mute);font-size:13px;padding:14px 4px;line-height:1.5}
.roots{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.root>details{border:1px solid var(--ch-line);border-radius:8px;background:rgba(233,236,242,.025)}
.root.is-clock>details{background:transparent}
.root summary{list-style:none;cursor:pointer;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.root summary::-webkit-details-marker{display:none}
.ch-n{font-size:10.5px;color:var(--ch-mute);white-space:nowrap;padding-block-start:3px}
.root details>ol{padding:0 10px 10px}
.ch-tree ol ol,.root details>ol{list-style:none;margin:0}
.ch-tree li li>ol{margin-inline-start:4px;padding-inline-start:14px;border-inline-start:1px solid var(--ch-line)}
.root details>ol{padding-inline-start:16px;margin-inline-start:13px;border-inline-start:1px solid var(--ch-line)}
.nd{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;padding:5px 0;align-items:start}
.nd .mk{inline-size:9px;block-size:9px;margin-block-start:5px;justify-self:center;border-radius:50%;background:var(--ch-mute);transform:scale(.75)}
.k-trigger .mk{background:var(--ch-accent);transform:none;box-shadow:0 0 0 3px rgba(140,152,255,.2)}
.k-event .mk{background:transparent;border:1.5px solid var(--ch-accent);transform:none}
.k-rule .mk{background:transparent;border:1.5px solid var(--ch-ink);border-radius:1px;transform:none}
.k-agent .mk{background:transparent;border:1.5px solid var(--ch-accent);border-radius:1px;transform:rotate(45deg) scale(.85)}
.k-draft .mk{background:transparent;border:1.5px dashed var(--ch-warn);transform:none}
.k-approval .mk{background:var(--ch-ok);transform:none}
.k-clock .mk{border-radius:2px;background:var(--ch-ink);inline-size:10px;block-size:3px;margin-block-start:8px;transform:none}
.k-info .mk{background:transparent;border:1px solid var(--ch-mute)}
.nd-b{display:grid;gap:1px;min-inline-size:0}
.nd-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ch-mute);display:flex;gap:8px;flex-wrap:wrap}
.k-trigger .nd-k,.k-agent .nd-k,.k-event .nd-k{color:var(--ch-accent)}
.nd-money{color:var(--ch-warn)}
.nd-t{font-size:13px;line-height:1.4;color:var(--ch-ink);overflow-wrap:anywhere;text-align:start}
button.nd-t{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(233,236,242,.25);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){button.nd-t:hover{color:#fff;text-decoration-color:var(--ch-accent)}}
.k-trigger>.nd-b>.nd-t,.k-clock>.nd-b>.nd-t{font-weight:600}
.t-ok>.nd-b>.nd-t{color:#CFEFDF} .t-ok .mk{background:var(--ch-ok)}
.t-warn>.nd-b>.nd-t{color:#F6DDB2}
.t-bad>.nd-b>.nd-t{color:#F9C6C1} .t-bad.k-effect .mk,.t-bad.k-trigger .mk{background:var(--ch-bad)}
.t-mute>.nd-b>.nd-t{color:var(--ch-mute)}
.nd-m{font-size:11px;color:var(--ch-mute);font-variant-numeric:tabular-nums}
.nd-a{display:flex;gap:6px;margin-block-start:5px;flex-wrap:wrap}
.nd.new{animation:ndIn 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes ndIn{from{opacity:0;transform:translateY(4px)}}
.nd.flash{background:rgba(140,152,255,.16);border-radius:4px}

/* highlight in the product (both visible at once) */
.flash{outline:2px solid var(--ultra)!important;outline-offset:2px;background-color:var(--ultra-soft);animation:flashOut 1.8s var(--ease-out) forwards}
tr.flash{outline-offset:-2px}
tr.flash td{background:var(--ultra-soft)}
@keyframes flashOut{0%,60%{outline-color:var(--ultra)}100%{outline-color:transparent}}

/* rail (desktop collapsed) */
.chain[data-sheet="rail"] .ch-body{display:none}
.chain[data-sheet="rail"] .ch-clock{display:none}
body[data-sheet="rail"] .app{grid-template-columns:var(--side-w) minmax(0,1fr) 190px}

/* ---------- responsive ---------- */
@media (max-width:1279px){:root{--chain-w:360px;--side-w:184px}}
@media (max-width:1099px){
  .app{grid-template-columns:var(--side-w) minmax(0,1fr)}
  body[data-sheet="rail"] .app{grid-template-columns:var(--side-w) minmax(0,1fr)}
  .chain{position:fixed;inset-inline:0;inset-block-end:0;block-size:min(74dvh,680px);border-inline-start:0;border-radius:14px 14px 0 0;box-shadow:0 -20px 50px rgba(5,9,22,.35);transform:translateY(calc(100% - 52px));transition:transform 260ms cubic-bezier(0.32,0.72,0,1)}
  .chain[data-sheet="open"]{transform:none}
  .ch-head{position:relative}
  .ch-head::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:50%;inline-size:36px;block-size:4px;border-radius:2px;background:rgba(233,236,242,.25);transform:translateX(-50%)}
  .ch-toggle{padding-block:16px 14px}
  .scroll{padding-block-end:84px}
  .side{padding-block-end:64px}
  .sc-list{max-block-size:26dvh}
}
@media (max-width:759px){
  body{grid-template-rows:auto auto minmax(0,1fr)}
  .app{display:contents}
  .side{flex-direction:row;align-items:center;border-inline-end:0;border-block-end:1px solid var(--line);padding:6px 10px;overflow-x:auto;scrollbar-width:none;gap:2px}
  .side::-webkit-scrollbar{display:none}
  .side ul{display:flex;gap:2px}
  .side-k,.side-foot{display:none}
  .nv{white-space:nowrap;padding:7px 10px;font-size:13px}
  .nv[aria-current="page"]::before{display:none}
  main{grid-row:3}
  .bar{padding:8px 12px;gap:8px}
  .bar-r{inline-size:100%;margin-inline-start:0}
  .bar-sel{flex:1 1 100%}
  .bar-sel select{inline-size:100%}
  .vh h1{font-size:22px}
  .drawer{inline-size:100%}
  .lang{position:static}
  .lang-menu{position:fixed;inset-inline:16px;inset-block-start:96px;inline-size:auto}
  .sc-list{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.chain{transition:none}.flash{animation:none}}