/* ================= tokens ================= */
:root{
  --bg:#0E0E10; --surface:#1C1F22; --surface-2:#24282C;
  --accent:#F5C518; --on-accent:#0E0E10;
  --text:#D7DADF; --muted:#8B9199;
  --hairline:rgba(215,218,223,.11);
  --ok:#3FBF6A; --warn:#E08A2E; --danger:#E5484D; --off:#5C636B;
  /* три роли красного: индикатор/подложка --danger, текст --danger-text, заливка кнопки --danger-fill */
  --danger-text:oklch(.755 .155 22); --danger-fill:oklch(.455 .175 24);
  --radius-card:16px; --radius-el:14px; --btn-h:56px; --tap:44px;
  --f-head:'Unbounded',system-ui,sans-serif;
  --f-text:'Onest',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* светлая тема бренда — только токены, экран не рисуется */
[data-theme="light"]{
  --bg:#FAF7F4; --surface:#FFFFFF; --surface-2:#F1ECE6;
  --accent:#E8604C; --on-accent:#FFFFFF;
  --text:#26241F; --muted:#6F6A62; --hairline:rgba(38,36,31,.12);
  --off:#A8A29A;
  --danger-text:oklch(.50 .19 24); --danger-fill:oklch(.50 .19 24);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-text); font-size:15px; line-height:1.35;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--text)}
button,input,textarea,select{font:inherit;color:inherit}
.mono{font-family:var(--f-mono);font-variant-ligatures:none;font-feature-settings:"tnum"}
.head{font-family:var(--f-head);font-weight:500;letter-spacing:-.01em}
.mut{color:var(--muted)}
.hl{border-bottom:1px solid var(--hairline)}

/* ================= stage / viewports ================= */
#stage{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;justify-content:safe center;padding:0;overflow-x:auto}
#app{position:relative;width:100%;flex:0 0 auto;background:var(--bg);overflow:hidden}
body:not(.framed) #app{flex:1 1 auto}
body.framed #app{border:1px solid var(--hairline);border-radius:22px}
body.framed.mode-phone #app{width:390px;height:844px}
body.framed.mode-laptop #app{width:1280px;height:800px}
body.fill #stage{min-height:0;height:100vh;height:100dvh;overflow:hidden}
body.fill #app{height:100%;min-height:0;overflow:hidden}
.frame-tag{position:absolute;left:0;top:-22px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
body:not(.framed) .frame-tag{display:none}

/* ================= shell ================= */
#shell{display:none;height:100%;flex-direction:column}
body.signed #shell{display:flex}
.mode-laptop #shell{flex-direction:row}

.hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:52px;
  border-bottom:1px solid var(--hairline);background:var(--bg);position:relative;z-index:5}
.brand{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-family:var(--f-head);font-weight:700;font-size:13px;display:grid;place-items:center;flex:0 0 auto}
.hdr-title{font-family:var(--f-head);font-size:15px;font-weight:500;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.pd-chip,.sess{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--surface);font-size:12px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.mode-phone .pd-chip,.mode-phone .sess{font-size:11.5px;padding:0 9px;gap:5px}
.mode-phone .hdr{padding:10px 12px;gap:8px}
.mode-phone .hdr-title{font-size:14px}
.mode-phone .brand{width:28px;height:28px;border-radius:8px;font-size:11px}
.pd-chip.on{border-color:color-mix(in oklab,var(--warn) 55%,transparent);color:var(--warn)}
.sess{cursor:default;font-family:var(--f-mono);color:var(--muted)}
.sess.warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 55%,transparent)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--off);flex:0 0 auto}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.danger{background:var(--danger)}

/* system line */
.sysline{display:flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--f-mono);font-size:12px;
  color:var(--muted);border-bottom:1px solid var(--hairline);background:var(--bg);cursor:pointer;
  min-height:36px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.sysline::-webkit-scrollbar{display:none}
.sysline.alarm{color:var(--danger-text);background:color-mix(in oklab,var(--danger) 10%,var(--bg))}

/* main */
.body-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#main{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 24px}
.mode-phone #main{padding-bottom:calc(68px + 24px)}
.mode-laptop #main{padding:20px 28px 40px}
.wrap{max-width:1100px;margin:0 auto}

/* bottom nav (phone) */
.bnav{display:flex;border-top:1px solid var(--hairline);background:var(--bg);
  position:absolute;left:0;right:0;bottom:0;z-index:6}
.mode-laptop .bnav{display:none}
.bnav button{flex:1;min-height:64px;background:none;border:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer;position:relative}
.bnav button:active{transform:scale(.97)}
.bnav button.sel{color:var(--accent)}
.bnav .gl{width:20px;height:20px;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px}
.badge{position:absolute;top:10px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--danger-fill);color:#fff;font-family:var(--f-mono);font-size:10px;
  display:grid;place-items:center;line-height:1}
.badge.n{background:var(--surface-2);color:var(--text)}

/* rail (laptop) */
.rail{display:none;width:236px;flex:0 0 236px;border-right:1px solid var(--hairline);
  padding:14px 10px;overflow-y:auto;background:var(--bg)}
.mode-laptop .rail{display:block}
.rail-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.rail-brand b{font-family:var(--f-head);font-weight:500;font-size:15px}
.rail button{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;
  border:0;background:none;border-radius:var(--radius-el);color:var(--muted);cursor:pointer;text-align:left;font-size:14px}
.rail button:hover{background:var(--surface)}
.rail button.sel{background:var(--surface);color:var(--accent)}
.rail button:active{transform:scale(.97)}
.rail .rb{margin-left:auto;font-family:var(--f-mono);font-size:11px;background:var(--surface-2);
  color:var(--text);border-radius:999px;padding:2px 7px}
.rail .rb.red{background:var(--danger-fill);color:#fff}
.rail-sep{height:1px;background:var(--hairline);margin:10px 8px}

/* ================= primitives ================= */
.card{background:var(--surface);border-radius:var(--radius-card);padding:14px}
.card.flat{background:none;border:1px solid var(--hairline)}
.sect-h{display:flex;align-items:baseline;gap:10px;margin:22px 2px 10px}
.sect-h h2{font-family:var(--f-head);font-size:12px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);margin:0}
.sect-h .r{margin-left:auto;font-size:12px;color:var(--muted);font-family:var(--f-mono)}

.big{font-family:var(--f-head);font-weight:500;font-size:30px;line-height:1;letter-spacing:-.02em}
.mode-laptop .big{font-size:34px}
.lab{font-size:12px;color:var(--muted);margin-top:6px}
.state-lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}

.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:999px;
  background:var(--surface-2);font-family:var(--f-mono);font-size:11.5px;color:var(--text);white-space:nowrap}
.chip.ok{color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,var(--surface))}
.chip.warn{color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,var(--surface))}
.chip.danger{color:var(--danger-text);background:color-mix(in oklab,var(--danger) 16%,var(--surface))}
.chip.off{color:var(--muted)}
.chip.acc{background:var(--accent);color:var(--on-accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:0 16px;border-radius:var(--radius-el);border:1px solid var(--hairline);background:var(--surface);
  color:var(--text);cursor:pointer;font-size:14px}
.btn:active{transform:scale(.97)}
.btn.pri{height:var(--btn-h);background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600}
.btn.dgr{height:var(--btn-h);background:var(--danger-fill);color:#fff;border-color:transparent;font-weight:600}
.btn.ghost{background:none}
.btn.sm{min-height:36px;padding:0 11px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.w{width:100%}

.inp{width:100%;height:var(--tap);padding:0 12px;border-radius:var(--radius-el);
  border:1px solid var(--hairline);background:var(--surface-2);color:var(--text);outline:none}
.inp:focus{border-color:color-mix(in oklab,var(--accent) 60%,transparent)}
textarea.inp{height:auto;min-height:76px;padding:11px 12px;resize:vertical;line-height:1.4}

/* toggle */
/* тап-зона 44 без роста визуального размера */
.sw::after{content:'';position:absolute;inset:-8px -4px}
.ico::after,.step::after{content:'';position:absolute;inset:-4px}
.btn.sm::after,.fchip::after{content:'';position:absolute;inset:-4px 0}
.seg button::after{content:'';position:absolute;inset:-4px 0}
.btn.sm,.fchip,.seg button{position:relative}

.sw{width:48px;height:28px;border-radius:999px;background:var(--surface-2);border:1px solid var(--hairline);
  position:relative;cursor:pointer;flex:0 0 auto;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--off);
  transition:left .13s ease,background .13s ease}
.sw[aria-checked="true"]{background:color-mix(in oklab,var(--accent) 26%,var(--surface-2));
  border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.sw[aria-checked="true"] i{left:23px;background:var(--accent)}
.sw:active{transform:scale(.97)}

/* bar */
.bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar i.warn{background:var(--warn)}.bar i.danger{background:var(--danger)}

/* skeleton */
.sk{background:var(--surface-2);border-radius:8px;height:12px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.85}}

/* grids */
.g{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}
.mode-laptop .g3{grid-template-columns:repeat(3,1fr)}
.mode-laptop .sp2{grid-column:span 2}
.row{display:flex;align-items:center;gap:10px}
.rowg{display:flex;flex-wrap:wrap;gap:8px}
.col{display:flex;flex-direction:column;gap:10px}

/* ================= login ================= */
#screen-login{display:none;min-height:100%;padding:0 22px;flex-direction:column;justify-content:center;gap:18px}
body:not(.signed) #screen-login{display:flex}
body.framed.mode-phone #screen-login,body.framed.mode-laptop #screen-login{height:100%}
.login-box{width:100%;max-width:340px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.login-mark{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
.login-mark .brand{width:56px;height:56px;border-radius:15px;font-size:20px}
.login-mark b{font-family:var(--f-head);font-size:22px;font-weight:500;letter-spacing:-.01em}
.err{color:var(--danger-text);font-size:13px;min-height:18px}
.code-in{display:flex;gap:8px;justify-content:space-between}
.code-in input{width:46px;height:56px;text-align:center;font-family:var(--f-mono);font-size:20px;
  border-radius:var(--radius-el);border:1px solid var(--hairline);background:var(--surface-2);outline:none}
.code-in input:focus{border-color:color-mix(in oklab,var(--accent) 60%,transparent)}

/* ================= controls rows ================= */
.grp{border-radius:var(--radius-card);background:var(--surface);margin-bottom:10px;overflow:hidden}
.grp-h{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;cursor:pointer;background:none;border:0;width:100%;text-align:left}
.grp-h:active{transform:scale(.995)}
.grp-h b{font-family:var(--f-head);font-weight:500;font-size:14px;flex:1}
.grp-h .cnt{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.grp-h .arw{color:var(--muted);font-family:var(--f-mono);font-size:12px;width:14px;text-align:center}
.grp-b{border-top:1px solid var(--hairline)}
.grp.closed .grp-b{display:none}

.ctl{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:60px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.ctl:last-child{border-bottom:0}
.ctl-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.ctl-chips{display:flex;flex-wrap:wrap;gap:6px;flex:0 1 auto}
.ctl-chips:empty{display:none}
/* телефон: состояние — строкой над подписью, контрол — в своей колонке */
.mode-phone .ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"chips chips" "lab ctl" "key key";gap:8px 10px;align-items:center}
.mode-phone .ctl-l{grid-area:lab}
.mode-phone .ctl-chips{grid-area:chips}
.mode-phone .ctl-r{grid-area:ctl;margin-left:0}
.mode-phone .ctl-key{grid-area:key;margin-top:0;font-size:11.5px}
/* строка с широким кластером контролов — кластеру своя строка */
.mode-phone .ctl.wide{grid-template-areas:"chips chips" "lab lab" "ctl ctl" "key key"}
.mode-phone .ctl.wide .ctl-r{grid-area:ctl;justify-content:flex-end}
.ctl-lab{font-size:14px}
.ctl-key{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:clip;width:100%;flex-basis:100%;order:9;margin-top:2px}
.ctl-help{font-size:12px;color:var(--muted)}
.ctl-r{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.ctl.dirty{background:color-mix(in oklab,var(--accent) 6%,var(--surface))}
.ctl.dgr .ctl-lab{}
.val{font-family:var(--f-mono);font-size:15px;min-width:46px;text-align:right}
.step{width:36px;height:36px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface-2);
  cursor:pointer;font-family:var(--f-mono);font-size:15px;display:grid;place-items:center;position:relative}
.step:active{transform:scale(.97)}
.unit{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ico{width:36px;height:36px;min-width:36px;border-radius:10px;border:1px solid var(--hairline);background:none;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;position:relative}
.ico:hover{color:var(--text)}
.ico:active{transform:scale(.97)}
.seg{display:inline-flex;border:1px solid var(--hairline);border-radius:12px;overflow:visible;background:var(--surface-2)}
.seg button:first-child{border-radius:11px 0 0 11px}
.seg button:last-child{border-radius:0 11px 11px 0}
.seg button:only-child{border-radius:11px}
.seg button{min-height:36px;padding:0 12px;border:0;background:none;color:var(--muted);cursor:pointer;
  font-family:var(--f-mono);font-size:12.5px;white-space:nowrap;flex:0 0 auto}
.seg button.sel{background:var(--accent);color:var(--on-accent)}
.seg button:active{transform:scale(.97)}
.listv{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:60%}
.jsonv{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* filters */
.filters{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.searchbox{position:relative}
.searchbox .inp{padding-left:36px;font-family:var(--f-mono);font-size:13px}
.searchbox span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
.fchip{height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--hairline);background:none;
  color:var(--muted);cursor:pointer;font-size:13px;white-space:nowrap}
.fchip.sel{background:var(--accent);color:var(--on-accent);border-color:transparent}
.fchip:active{transform:scale(.97)}
.scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 6px}
.scroller::-webkit-scrollbar{display:none}

/* table */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--hairline);position:sticky;top:0;background:var(--surface)}
table.tbl td{padding:10px;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.m{font-family:var(--f-mono)}

/* sticky save panel */
.stick{position:absolute;z-index:9;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:10px;display:none;align-items:center;gap:10px}
.stick.on{display:flex}
.mode-phone .stick{left:12px;right:12px;bottom:80px}
.mode-laptop .stick{right:28px;bottom:24px;width:340px}
.stick .n{font-family:var(--f-mono);font-size:12.5px;flex:1}

/* drawer */
.scrim{position:absolute;inset:0;background:rgba(8,8,10,.66);z-index:20;display:none}
.scrim.on{display:block}
.drawer{position:absolute;z-index:21;background:var(--surface);display:none;flex-direction:column;overflow:hidden}
.drawer.on{display:flex}
.mode-phone .drawer{left:0;right:0;bottom:0;max-height:92%;border-radius:var(--radius-card) var(--radius-card) 0 0}
.mode-laptop .drawer{top:0;right:0;bottom:0;width:520px;border-left:1px solid var(--hairline)}
.dr-h{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--hairline)}
.dr-h b{font-family:var(--f-head);font-weight:500;font-size:15px;flex:1}
.dr-b{padding:14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.dr-f{padding:14px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px}
.grab{width:34px;height:4px;border-radius:999px;background:var(--surface-2);margin:8px auto 0}
.mode-laptop .grab{display:none}

.diff{background:var(--surface-2);border-radius:var(--radius-el);padding:12px;font-family:var(--f-mono);font-size:12.5px;
  display:flex;flex-direction:column;gap:8px}
.diff .k{color:var(--muted);font-size:11px;word-break:break-all}
.diff .v{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.diff .old{color:var(--muted);text-decoration:line-through}
.diff .new{color:var(--accent)}

.jed{position:relative;border-radius:var(--radius-el);border:1px solid var(--hairline);background:var(--surface-2);overflow:hidden}
.jed pre,.jed textarea{margin:0;padding:12px;font-family:var(--f-mono);font-size:12.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;border:0;background:none;outline:none}
.jed pre{min-height:180px;pointer-events:none}
.jed textarea{position:absolute;inset:0;color:transparent;caret-color:var(--accent);resize:none;overflow:hidden}
.jt-k{color:#8FB8E8}.jt-s{color:#9CD6A0}.jt-n{color:var(--accent)}.jt-b{color:#D08BE0}.jt-p{color:var(--muted)}

/* feed layout */
.feed{display:flex;flex-direction:column;gap:0}
.fev{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.fev-m{width:3px;border-radius:2px;background:var(--off);flex:0 0 auto}
.fev-m.ok{background:var(--ok)}.fev-m.warn{background:var(--warn)}.fev-m.danger{background:var(--danger)}
.fev-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.fev-t{display:flex;align-items:baseline;gap:8px}
.fev-t b{font-family:var(--f-head);font-weight:500;font-size:14px}
.fev-t .tm{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.fev-n{font-family:var(--f-mono);font-size:13px}
.fev-n .u{color:var(--muted)}

/* bars chart */
.spark{display:flex;align-items:flex-end;gap:6px;height:56px}
.spark div{flex:1;background:var(--surface-2);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.spark div.hi{background:color-mix(in oklab,var(--accent) 60%,var(--surface-2))}
.spark-x{display:flex;gap:6px;margin-top:6px}
.spark-x span{flex:1;text-align:center;font-family:var(--f-mono);font-size:9.5px;color:var(--muted)}

/* misc */
.banner{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-el);
  font-size:13px;margin-bottom:12px}
.banner.warn{background:color-mix(in oklab,var(--warn) 14%,var(--surface));color:var(--warn)}
.banner.danger{background:color-mix(in oklab,var(--danger) 16%,var(--surface));color:var(--danger-text)}
.banner.mut{background:var(--surface);color:var(--muted)}
.empty{padding:38px 14px;text-align:center;color:var(--muted);font-size:14px}
#toasts{position:absolute;z-index:30;left:12px;right:12px;bottom:88px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.mode-laptop #toasts{left:auto;right:28px;bottom:24px;width:360px}
.toast{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-el);
  padding:12px;display:flex;align-items:center;gap:10px;font-size:13px;pointer-events:auto}
.toast .btn{margin-left:auto}
.pwa{position:absolute;left:12px;right:12px;bottom:80px;z-index:12;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--radius-card);padding:14px;display:none;gap:12px;align-items:center}
.pwa.on{display:flex}

/* ================= production (рубка v1) ================= */
html,body{height:100%}
body{height:100dvh;overflow:hidden}
body.fill #stage{min-height:0;height:100dvh;overflow:hidden}
body.fill #app{height:100%;min-height:0;overflow:hidden}
.frame-tag{display:none}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tbl-wrap{overflow:auto;border-radius:var(--radius-card);background:var(--surface);max-height:70vh}
.tbl-wrap table.tbl th{white-space:nowrap}
.tbl-wrap table.tbl td{white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-mono);font-size:12.5px}
.tbl-wrap table.tbl th.sort{color:var(--accent);cursor:pointer}
.tbl-wrap table.tbl th{cursor:pointer}
.rowcard{background:var(--surface);border-radius:var(--radius-el);padding:10px 12px;margin-bottom:8px}
.kv{display:flex;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--hairline)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);font-family:var(--f-mono);font-size:11.5px;min-width:96px;flex:0 0 auto}
.kv .v{font-family:var(--f-mono);word-break:break-word;min-width:0}
.pre{font-family:var(--f-mono);font-size:12px;white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border-radius:var(--radius-el);padding:10px;margin:0}
.aud{display:flex;flex-direction:column;gap:6px;padding:11px 0;border-bottom:1px solid var(--hairline)}
.aud:last-child{border-bottom:0}
.aud .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.aud .k{font-family:var(--f-mono);font-size:12.5px;word-break:break-all}
.aud .v{font-family:var(--f-mono);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aud .old{color:var(--muted);text-decoration:line-through}
.aud .new{color:var(--accent)}
.aud .why{font-size:13px}
textarea.sql{font-family:var(--f-mono);font-size:13px;min-height:110px}
.mode-phone .listv{max-width:100%}
.sel-inp{height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface-2);color:var(--text);font-size:13px}
.fab{position:absolute;right:14px;bottom:80px;z-index:8}
.mode-laptop .fab{bottom:24px;right:28px}