/* Redis Panel - the prototype's stylesheet, ported unchanged (docs/prototype/redis-panel-prototype.html).
   The design source of truth: change the prototype and this file together. */
:root{
/* Ground: warm off-white. A blue-grey ground fights amber and rose;
   this one lets the semantic colours sit on it cleanly. */
--bg:#fbfbfa;
--panel:#ffffff;
--panel2:#f6f6f4;
--line:#e6e5e1;
--line2:#d2d1cb;

/* Ink: three real steps, not one grey at three opacities. */
--fg:#1a1d21;
--fg2:#5c6670;
--fg3:#79838c;

/* The one hue the interface spends on itself. */
--accent:#3b4ab8;
--accentT:rgba(59,74,184,.09);
--accentT2:rgba(59,74,184,.16);

/* Semantic, darkened for a white ground so 11px text still reads.
   Tints are 8-14% here; the dark theme's 10-16% washed out on white. */
--green:#15803d;--greenT:rgba(21,128,61,.10);
--amber:#b45309;--amberT:rgba(180,83,9,.09);--amberT2:rgba(180,83,9,.15);
--red:#be123c;--redT:rgba(190,18,60,.08);

/* Diagram/chart hues, same family as the semantics. */
--dgRed:#be123c;--dgBlue:#3b4ab8;--dgGreen:#15803d;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:400 13px/1.45 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1{margin:0;font-size:16px;font-weight:600}
h1,h2{text-wrap:balance}
[data-act]:focus-visible,.btn:focus-visible,.chip:focus-visible,.ib:focus-visible,.radio:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
input,select,button{font:inherit;color:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.ico{font-family:'Material Symbols Outlined';font-size:18px;line-height:1;user-select:none;font-weight:400}
.muted{color:var(--fg2)}.dim{color:var(--fg3)}
.app{display:flex;min-height:100vh}

aside{width:210px;flex:0 0 210px;border-right:1px solid var(--line);background:var(--panel2);position:sticky;top:env(safe-area-inset-top,0px);height:100vh;display:flex;flex-direction:column}
.brand{padding:14px 15px;border-bottom:1px solid var(--line)}
.brand b{font-weight:600;letter-spacing:-.01em}
.brand div{font-size:11px;color:var(--fg3);margin-top:2px}
nav{padding:8px;display:flex;flex-direction:column;gap:2px}
.navitem{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:4px;cursor:pointer;color:var(--fg2)}
.navitem:hover{background:var(--accentT)}
.navitem.on{background:var(--accentT);color:var(--accent);font-weight:500;
box-shadow:inset 2px 0 0 var(--accent)}
.navitem .n{margin-left:auto;font-size:11px;color:var(--fg3)}
.foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.foot .v{font-size:11px;color:var(--fg3)}

main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:44px;flex:0 0 44px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;align-items:center;padding:0 20px;gap:8px}
.top .crumb{font-size:12px;color:var(--fg3)}
.top .user{margin-left:auto;font-size:12px;color:var(--fg2)}
.wrap{padding:20px;max-width:1360px;width:100%}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{border:1px solid var(--line);background:var(--panel);padding:13px 14px}
.lbl{font-size:11px;color:var(--fg3);letter-spacing:.02em}
.figs{display:flex;align-items:baseline;gap:6px;margin-top:6px;white-space:nowrap}
.big{font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:500}
.sub{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fg3)}
.meter{height:4px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.meter i{display:block;height:4px;background:var(--accent);border-radius:2px;
transition:width .55s cubic-bezier(.22,.61,.36,1),background-color .3s}
.meter i.hot{background:var(--amber)}

.bar{display:flex;align-items:center;gap:8px;margin-top:20px}
.bar .right{margin-left:auto;display:flex;gap:8px}
.tbl{margin-top:12px;border:1px solid var(--line);background:var(--panel);overflow-x:auto}
.tr{min-width:1080px;display:grid;
grid-template-columns:minmax(0,1.5fr) 92px 172px 62px 80px 100px 58px 212px;
gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.tr.head{padding:9px 14px;background:var(--panel2);border-bottom:1px solid var(--line2);
font-size:11px;color:var(--fg2);letter-spacing:.04em;font-weight:500;text-transform:uppercase}
.tr.stale{background:var(--amberT);box-shadow:inset 3px 0 0 var(--amber)}
.tr:last-child{border-bottom:0}
.tbl .tr:not(.head):hover{background:var(--panel2)}
.plist .prow:not(.head):hover{background:var(--panel2)}
.tr .r{text-align:right}
.iname{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlink{color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--line2)}
.nlink:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}
.iport{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3);margin-top:1px}
.memtext{font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:5px;color:var(--fg2)}
.memtext.hot{color:var(--amber)}
.num{font-family:'JetBrains Mono',monospace;text-align:right;color:var(--fg2)}
.num.hot{color:var(--amber)}
.badge{display:inline-block;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:500}
.badge.running{background:var(--greenT);color:var(--green);box-shadow:inset 0 0 0 1px rgba(21,128,61,.18)}
.badge.stopped{background:var(--panel2);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line2)}
.badge.stalecfg{background:var(--amberT2);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(180,83,9,.24)}
.acts{display:flex;gap:2px;justify-content:flex-end}
.ib{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line2);border-radius:3px;cursor:pointer;color:var(--fg2);padding:0}
.ib:hover{color:var(--fg);border-color:var(--fg3)}
.ib .ico{font-size:17px}
.ib.hi{background:var(--amberT2);border-color:var(--amber);color:var(--amber)}
.ib.dan:hover{color:var(--red);border-color:var(--red)}
.note{margin-top:9px;font-size:11px;color:var(--fg3)}

.in{padding:6px 9px;background:var(--panel);border:1px solid var(--line2);border-radius:4px;
font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg)}
.in::placeholder{color:var(--fg3)}
.in:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.in.chg{border-color:var(--accent)}
.in.bad{border-color:var(--red)}
.in.good{border-color:var(--green)}
select.in{padding:5px 8px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;background:var(--panel);border:1px solid var(--line2);border-radius:3px;cursor:pointer;font-size:12px;color:var(--fg2);white-space:nowrap}
.btn:hover{color:var(--fg)}
.btn .ico{font-size:16px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500;
box-shadow:0 1px 2px rgba(59,74,184,.24)}
.btn.pri:hover{background:#333fa3;border-color:#333fa3;color:#fff}
.btn.dan{background:var(--red);border-color:var(--red);color:#fff;font-weight:500;
box-shadow:0 1px 2px rgba(190,18,60,.24)}
.btn.dan:hover{background:#a10f33;border-color:#a10f33;color:#fff}
.btn:disabled{cursor:not-allowed;opacity:.5}
.btn.pri:disabled{background:var(--line);border-color:var(--line);color:var(--fg3);opacity:1}
.lnk{color:var(--accent);cursor:pointer;font-size:11px}
.back{font-size:19px;color:var(--fg3);cursor:pointer}
.hrow{display:flex;align-items:center;gap:10px}

.sec{margin-top:16px;border:1px solid var(--line);background:var(--panel)}
.sec .hd{padding:8px 13px;border-bottom:1px solid var(--line);background:var(--panel2);display:flex;align-items:center;gap:16px;font-size:12px;font-weight:500}
.sec .hd .path{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3);margin-left:auto;font-weight:400}
.sec .hd .key{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--fg3);font-weight:400}
.dot{width:7px;height:7px;border-radius:50%}
.body{padding:16px}
pre{margin:0;padding:13px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.65;color:var(--fg2);overflow-x:auto;white-space:pre}
.grid2{display:grid;grid-template-columns:150px 1fr;gap:12px 14px;align-items:start}
.grid2 label{font-family:'JetBrains Mono',monospace;font-size:12px;padding-top:6px;color:var(--fg2)}
.hint{font-size:11px;margin-top:4px;color:var(--fg3)}
.hint.bad{color:var(--red)}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.pcard{border:1px solid var(--line2);background:var(--panel2);padding:11px 12px;cursor:pointer}
.pcard.on{border-color:var(--accent);background:var(--accentT)}
.pcard b{font-weight:500}
.pcard .m{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg2);margin-top:4px}
.pcard .d{font-size:11px;color:var(--fg3);margin-top:5px}
.portrow{display:flex;align-items:center;gap:9px;min-height:31px}
.ro{font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 9px;border:1px solid var(--line);background:var(--panel2);color:var(--fg2);border-radius:3px}

.guard{margin-top:16px;border:1px solid var(--line);background:var(--panel);padding:13px 14px}
.guard.block{border-color:var(--red);background:var(--redT)}
.guard .gh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.guard.block .gh,.guard.block .gh .ico{color:var(--red)}
.gnums{display:grid;grid-template-columns:repeat(3,max-content);gap:26px;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px}
.gnums .k{font-size:11px;color:var(--fg3);font-family:'IBM Plex Sans',sans-serif}
.gmsg{font-size:12px;margin-top:10px;color:var(--fg2)}
.guard.block .gmsg,.guard.block .after{color:var(--red)}

.frow{display:grid;grid-template-columns:180px 1fr 132px;gap:14px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.frow label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg2)}
.tag{display:inline-block;padding:2px 7px;border-radius:3px;font-size:11px}
.tag.live{background:var(--greenT);color:var(--green)}
.tag.restart{background:var(--amberT2);color:var(--amber)}
.tag.none{color:var(--fg3)}
.pend{margin-left:auto;padding:3px 9px;border-radius:3px;font-size:11px;font-weight:500;background:var(--accentT);color:var(--accent)}
.pend.zero{background:var(--line);color:var(--fg2)}
.diff{padding:11px 0;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.7;overflow-x:auto}
.diff div{padding:0 13px;white-space:pre;color:var(--fg3)}
.diff div.add{background:var(--greenT);color:var(--green)}
.diff div.del{background:var(--redT);color:var(--red)}
.cmds{padding:11px 13px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.75;overflow-x:auto}
.cmds div{white-space:pre;color:var(--fg)}
.cmds div.c{color:var(--fg3)}
.cmds div.gap{margin-top:14px}
.warnbox{margin-top:16px;border:1px solid var(--amber);background:var(--amberT);padding:12px 14px;display:flex;gap:10px;font-size:12px;color:var(--fg2)}
.warnbox .ico{color:var(--amber)}
.warnbox b{color:var(--amber);font-weight:500;display:block}
.actions{display:flex;gap:8px;margin-top:16px;padding-bottom:24px}
.actions .right{margin-left:auto;display:flex;gap:8px}

/* ===== refresh spinner ===== */
/* Fixed width: the icon swaps between refresh and progress_activity, and any
   width change here reflows every control to its right on each 5s cycle. */
.btn.busy{color:var(--fg3);cursor:default}
.btn[data-act="refresh"]{min-width:104px;justify-content:center}
.btn[data-act="refresh"] .ico{width:16px;text-align:center;flex:0 0 16px}
/* Same reasoning for the other two variable-label controls in this toolbar:
   the sort label changes with the chosen sort ("CPU" vs "Memory pressure"),
   and the auto label toggles between "Auto" and an interval. */
/* Sized for the longest label each can show - "Needs attention" and "Auto" -
   so the widest state still fits and the button never grows. */
.sortbtn{min-width:176px;justify-content:flex-start}
.autobtn{min-width:96px;justify-content:center}
/* The direction arrow swaps glyphs; reserve its box so it cannot nudge. */
.dirbtn .ico,.autobtn .ico:first-of-type{width:16px;text-align:center;flex:0 0 16px}
.ico.spin{display:inline-block;animation:spin .9s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ico.spin{animation:none;opacity:.6}}

/* ===== elastic memory ===== */
/* Anything carrying data-k glides from its last painted size to the new one:
   render() paints the previous width/left, forces layout, then sets the
   target. The page re-renders from scratch, so without this it would snap. */
[data-k]{transition:width .75s cubic-bezier(.22,.61,.36,1),left .75s cubic-bezier(.22,.61,.36,1),
background-color .3s}

/* A resized row announces itself, then settles back to its own background.
   Only a "from" frame, so rows that are already tinted do not snap at the end. */
@keyframes flashGrow{from{background-color:rgba(21,128,61,.20)}}
@keyframes flashShrink{from{background-color:rgba(59,74,184,.17)}}
.tr.grew,.prow.grew{animation:flashGrow 2.2s ease-out}
.tr.shrank,.prow.shrank{animation:flashShrink 2.2s ease-out}
.limitchip{display:inline-flex;align-items:center;gap:1px;margin-left:6px;padding:0 5px 0 3px;
border-radius:3px;font:500 10px/16px 'JetBrains Mono',monospace;vertical-align:1px;white-space:nowrap;
animation:chipIn .4s cubic-bezier(.22,.61,.36,1)}
.limitchip.up{background:var(--greenT);color:var(--green)}
.limitchip.down{background:var(--accentT);color:var(--accent)}
.limitchip .ico{font-size:12px}
@keyframes chipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Instances live bar: memory is managed on Capacity; this only points there */
.memlink{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 9px;
background:var(--panel);border:1px solid var(--line2);border-radius:12px;cursor:pointer;
font:inherit;font-size:11px;color:var(--fg2)}
.memlink:hover{border-color:var(--accent);color:var(--accent)}
.memlink.on{border-color:rgba(59,74,184,.38);background:var(--accentT);color:var(--accent)}
.memlink .ico{font-size:14px}
.memlink .go{margin-left:-3px;opacity:.7}
.memlink .el-cd{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
display:inline-block;min-width:34px}
.memlink:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the preview table */
.mvtbl{margin-top:14px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.mvrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 70px 18px 70px 70px;
gap:10px;padding:9px 12px;align-items:center;border-bottom:1px solid var(--line);font-size:12px}
.mvrow:last-child{border-bottom:0}
.mvrow.head{background:var(--panel2);border-bottom:1px solid var(--line2);font-size:10.5px;
color:var(--fg2);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.mvn{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvw{font-size:11px;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvf{text-align:right;color:var(--fg3)}
.mva{text-align:center;font-size:14px;color:var(--fg3)}
.mvt{text-align:right;font-weight:500}
.mvd{text-align:right;font-size:11px}
.mvt.expand,.mvd.expand{color:var(--green)}
.mvt.shrink,.mvd.shrink{color:var(--accent)}
.r{text-align:right}

@media (prefers-reduced-motion:reduce){
  .meter i,[data-k],.prog i{transition:none}
  .tr.grew,.tr.shrank,.prow.grew,.prow.shrank,.limitchip,.fe.fresh,.scan i{animation:none}
}

/* ===== sampler settings ===== */
.modal.wide{width:680px;max-width:calc(100vw - 48px)}
/* the settings dialog scrolls inside itself; render() keeps its position */

.mhsub{margin-left:auto;font-size:11px;font-weight:400;color:var(--fg3)}
.setsec{display:flex;align-items:flex-start;gap:10px;padding:16px 0 4px;margin-top:18px;
border-top:1px solid var(--line2);scroll-margin-top:4px}
.setsec:first-child{margin-top:0;border-top:0;padding-top:0}
.setsec > .ico{font-size:19px;color:var(--accent);margin-top:1px}
.setsec b{font-size:13px;font-weight:600}
.setsec .grow{flex:1;min-width:0}
.setstate{padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:500;
background:var(--line);color:var(--fg2);white-space:nowrap}
.setstate.on{background:var(--accentT2);color:var(--accent)}
.radio.off{opacity:.38;cursor:not-allowed}
.setrow{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:14px;
align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.setrow:last-of-type{border-bottom:0}
.sk{font-size:12.5px;font-weight:500;color:var(--fg)}
.sh{font-size:11px;color:var(--fg3);margin-top:3px;line-height:1.5}
.setsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;
margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.setsum > div{display:flex;flex-direction:column;gap:2px}
.setsum .k{font-size:10.5px;color:var(--fg3);letter-spacing:.02em}
.setsum .v{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--fg2);
font-variant-numeric:tabular-nums}
.setsum .v.hi{color:var(--fg)}
.setsum .d{font-size:10.5px;color:var(--fg3)}
.inlink{background:none;border:0;padding:0;font:inherit;color:var(--accent);
cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.inlink:hover{color:var(--fg)}
.inlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== log retention control ===== */
.cardfoot{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:11px;color:var(--fg2)}
.retbtn{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;
background:var(--panel2);border:1px solid var(--line2);border-radius:3px;
cursor:pointer;font:inherit;font-size:11px;color:var(--fg2)}
.retbtn:hover{color:var(--fg);border-color:var(--fg3)}
.retbtn .ico{font-size:14px}
.retbtn .caret{font-size:14px;opacity:.7;margin-left:-2px}
.retbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ===== sorting ===== */
.sortbtn{gap:4px}
.dirbtn{padding:6px 8px}
.dirbtn .ico{font-size:16px}
.menu.wide{min-width:196px}
.colsort{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;
font:inherit;font-size:11px;letter-spacing:.03em;color:var(--fg3);cursor:pointer}
.colsort:hover{color:var(--fg2)}
.colsort.on{color:var(--fg)}
.colsort .ca{font-size:14px;margin-left:-1px}
.colsort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tr.head .r .colsort{justify-content:flex-end;width:100%}

/* ===== auto refresh ===== */
.autowrap{position:relative;display:flex;gap:6px}
.autobtn{gap:4px}
.autobtn.on{border-color:var(--green);color:var(--green)}
.autobtn .caret{font-size:15px;margin-left:-2px;opacity:.7}
.menu{position:absolute;top:calc(100% + 4px);right:0;z-index:40;min-width:168px;
background:var(--panel);border:1px solid var(--line2);border-radius:4px;
box-shadow:0 8px 24px rgba(26,29,33,.10),0 2px 6px rgba(26,29,33,.06);overflow:hidden}
.mi{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12px;
color:var(--fg2);cursor:pointer}
.mi:hover{background:var(--accentT);color:var(--fg)}
.mi.on{color:var(--fg)}
.mi .mh{margin-left:auto;font-size:10px;color:var(--fg3)}
.mi .tick{margin-left:auto;font-size:15px;color:var(--green)}
.mi.on .mh{margin-left:0}

.livebar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 12px;
border:1px solid var(--line);background:var(--panel2);font-size:11.5px;color:var(--fg2)}
.livebar .lb-r{margin-left:auto;color:var(--fg3);font-size:11px}
.dotlive,.dotidle{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dotlive{background:var(--green);animation:pulse 2s ease-in-out infinite}
.dotidle{background:var(--fg3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dotlive{animation:none}}

/* ===== instance detail / analytics ===== */
.spark{width:100%;height:34px;display:block}
.band{width:100%;height:104px;display:block}

/* hover: dot + crosshair appear only under the cursor's column */
.hv circle,.hv line{opacity:0;transition:opacity .08s}
.hv:hover circle{opacity:1}
.hv:hover line{opacity:.35}
.hv rect{cursor:crosshair}

.rangebar{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.rangebar .rl{font-size:11px;color:var(--fg3);margin-right:2px;letter-spacing:.02em}
.rangebar .rn{font-size:11px;color:var(--fg3);margin-left:auto}

.chartrow{display:flex;gap:8px;align-items:stretch}
.yax{display:flex;flex-direction:column;justify-content:space-between;
flex:0 0 auto;padding:1px 0 16px;font-family:'JetBrains Mono',monospace;
font-size:10px;color:var(--fg3);text-align:right;min-width:46px;font-variant-numeric:tabular-nums}
.plot{flex:1;min-width:0}

.legend{display:flex;gap:14px;margin:-3px 0 8px;font-size:10.5px;color:var(--fg3)}
.legend span{display:flex;align-items:center;gap:5px}
.sw{width:9px;height:9px;flex:0 0 auto;border-radius:1px;text-decoration:none}
.sw.band{background:var(--fg3);opacity:.32}

.mmm{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;
margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.mmm > div{display:flex;flex-direction:column;gap:2px}
.mmm .k{font-size:10px;color:var(--fg3);letter-spacing:.02em}
.mmm .v{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg2);
font-variant-numeric:tabular-nums}
.mmm .v.hi{color:var(--fg)}
.mmm .v.crit{color:var(--red)}
.chartbox{border:1px solid var(--line);background:var(--panel);padding:13px 14px}
.chartbox .ct{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.chartbox .ct b{font-size:12px;font-weight:600}
.chartbox .ct .now{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg)}
.chartbox .cx{display:flex;justify-content:space-between;margin-top:5px;
font-size:10.5px;color:var(--fg3);font-family:'JetBrains Mono',monospace}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-top:12px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
.stat{border:1px solid var(--line);background:var(--panel);padding:11px 13px}
.stat .k{font-size:11px;color:var(--fg3)}
.stat .v{font-family:'JetBrains Mono',monospace;font-size:18px;margin-top:4px;
font-variant-numeric:tabular-nums}
.stat .d{font-size:11px;color:var(--fg3);margin-top:3px;line-height:1.4}
.stat .v.warn{color:var(--amber)}
.stat .v.good{color:var(--green)}
.stat .v.crit{color:var(--red)}
.slowtbl{margin-top:12px;border:1px solid var(--line);background:var(--panel);overflow-x:auto}
.slowrow{min-width:640px;display:grid;grid-template-columns:minmax(0,1fr) 80px 78px 86px 96px;
gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);align-items:center;font-size:12px}
.slowrow.head{background:var(--panel2);font-size:11px;color:var(--fg3);letter-spacing:.03em}
.slowrow:last-child{border-bottom:0}
.slowcmd{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--fg2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:2px;margin-top:14px;border-bottom:1px solid var(--line)}
.tab{padding:7px 13px;cursor:pointer;font-size:12.5px;color:var(--fg2);
border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg);border-bottom-color:var(--accent)}

/* ===== two-column editor: form left, live config right ===== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);
gap:16px;align-items:start;margin-top:16px}
.split .left{min-width:0}
.split > .rail{min-width:0;position:sticky;top:16px}
.split .sec{margin-top:0}
.split .left .sec + .sec,
.split .left .guard,
.split .left .warnline,
.split .left .dangerline{margin-top:14px}
/* the rendered file needs its own scroll so the rail never grows past the viewport */
.split > .rail pre,
.split > .rail .diff{max-height:calc(100vh - 190px);overflow:auto}
.split > .rail .cmds{max-height:38vh;overflow:auto}
@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split > .rail{position:static}
  .split > .rail pre,.split > .rail .diff{max-height:none}
}
.railstack{display:flex;flex-direction:column;gap:14px}

/* ===== profile badge, log toggle, chips ===== */
.prof{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:3px;font-size:10px;
font-weight:500;vertical-align:1px;letter-spacing:.02em}
.prof.cache{background:var(--panel2);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line2)}
.prof.dur{background:var(--accentT);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(59,74,184,.22)}

.logcell{display:flex;align-items:center;gap:8px}
.tgl{position:relative;width:30px;height:17px;flex:0 0 auto;padding:0;cursor:pointer;
border:1px solid var(--line2);background:var(--panel2);border-radius:9px}
.tgl .knob{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
background:var(--fg3);transition:left .12s,background .12s}
.tgl.on{border-color:var(--green);background:var(--greenT)}
.tgl.on .knob{left:15px;background:var(--green)}
.tgl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.logsz{font-size:11px;color:var(--fg3)}

.ib.off{opacity:.35;pointer-events:none}

.chip{padding:4px 9px;border:1px solid var(--line2);background:var(--panel);border-radius:3px;
font-size:11.5px;color:var(--fg2);cursor:pointer}
.chip.on{border-color:var(--accent);background:var(--accentT);color:var(--fg)}

.credrow{display:grid;grid-template-columns:96px 1fr;gap:10px 12px;align-items:center;
font-size:12px;margin-top:4px}
.credrow .k{color:var(--fg3)}
.credval{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px}
.fixednote{font-size:11px;color:var(--fg3);margin-top:2px}
.warnline{margin-top:12px;padding:9px 11px;border:1px solid var(--amber);background:var(--amberT);
font-size:11.5px;color:var(--fg2);line-height:1.5}
.warnline b{color:var(--amber);font-weight:500}
.dangerline{margin-top:12px;padding:9px 11px;border:1px solid var(--red);background:var(--redT);
font-size:11.5px;color:var(--fg2);line-height:1.5}
.dangerline b{color:var(--red);font-weight:500}
.radios{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.radio{padding:7px 10px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;
font-size:12px;border-radius:3px}
.radio.on{border-color:var(--accent);background:var(--accentT);color:var(--fg)}
.radio .d{display:block;font-size:10.5px;color:var(--fg3);margin-top:2px}
.bulklist{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
color:var(--fg2);line-height:1.6;max-height:130px;overflow-y:auto}

/* ===== capacity: where memory is managed ===== */
.caphead .lbl{margin-top:5px;font-size:12px;color:var(--fg2)}

/* Fixed | Elastic. One thumb element glides between the two halves. */
.seg{position:relative;display:inline-flex;padding:3px;border:1px solid var(--line2);
border-radius:7px;background:var(--panel2);flex:0 0 auto}
.segrail{position:absolute;inset:3px;pointer-events:none}
.segrail .thumb{position:absolute;top:0;bottom:0;width:50%;border-radius:5px;background:var(--panel);
box-shadow:0 1px 3px rgba(26,29,33,.14),0 0 0 1px var(--line)}
.seg button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
width:108px;padding:6px 0;border:0;background:none;border-radius:5px;cursor:pointer;
font:inherit;font-size:12px;color:var(--fg2);transition:color .3s}
.seg button:hover{color:var(--fg)}
.seg button.on{color:var(--fg);font-weight:500}
.seg button.on.el{color:var(--accent)}
.seg button .ico{font-size:16px}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.elcard{margin-top:14px;border:1px solid var(--line);background:var(--panel);padding:16px 18px;
transition:border-color .4s,box-shadow .4s}
.elcard.on{border-color:rgba(59,74,184,.30);box-shadow:inset 0 3px 0 var(--accent),0 1px 3px rgba(59,74,184,.06)}
.elhead{display:flex;align-items:flex-start;gap:13px}
.elico{width:38px;height:38px;flex:0 0 38px;border-radius:9px;display:flex;align-items:center;
justify-content:center;background:var(--panel2);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line)}
.elcard.on .elico{background:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(59,74,184,.28)}
.elico .ico{font-size:21px}
.elhead .tx{flex:1;min-width:0}
.eltitle{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.elsub{font-size:12px;color:var(--fg2);margin-top:3px;line-height:1.55;max-width:86ch}
.elbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;
margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
@media (max-width:1080px){.elbody{grid-template-columns:minmax(0,1fr)}}

.cdrow{display:flex;align-items:flex-end;gap:12px}
.cd{display:flex;flex-direction:column;gap:2px;min-width:112px}
.cd .k,.bk{font-size:10.5px;color:var(--fg3);letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.cd .v{font:500 24px/30px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;color:var(--fg)}
.cd .v.busy{display:flex;align-items:center;gap:7px;font:500 13px/30px 'IBM Plex Sans',sans-serif;
color:var(--accent);white-space:nowrap}
.cd .v.done{color:var(--green)}
.cd .v .ico{font-size:18px}
.elbtns{display:flex;gap:8px;margin-left:auto;padding-bottom:2px}
.prog{position:relative;height:6px;margin-top:10px;background:var(--line);border-radius:3px;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px;
transition:width 1s linear}
.prog.busy i{width:100%!important;transition:none;
background:linear-gradient(90deg,var(--accentT2) 0%,var(--accent) 50%,var(--accentT2) 100%);
background-size:200% 100%;animation:sweep 1.1s linear infinite}
.prog.done i{width:100%!important;transition:none;background:var(--green)}
@keyframes sweep{from{background-position:100% 0}to{background-position:-100% 0}}
.lastpass{margin-top:11px;font-size:11.5px;color:var(--fg2);line-height:1.55}
.lastpass b{font-weight:500;color:var(--fg)}

/* the band: where each share of the limit sends an instance */
.bk{display:flex;align-items:center;margin-bottom:6px}
.bk .inlink{margin-left:auto;font-size:11px;text-transform:none;letter-spacing:0;font-weight:400}
.bvt{position:relative;z-index:2;height:19px}
.bvt span{position:absolute;bottom:5px;transform:translateX(-50%);white-space:nowrap;
font:500 10.5px 'JetBrains Mono',monospace;color:var(--green)}
/* a notch from the label into the top of the bar - short enough to clear the zone text */
.bvt span::after{content:"";position:absolute;left:50%;top:100%;margin-left:-1px;width:2px;height:11px;
background:var(--green);border-radius:1px}
.bv{position:relative;display:flex;height:32px;border-radius:5px;overflow:hidden;font-size:11px;font-weight:500}
.bv .z{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;
white-space:nowrap;overflow:hidden;min-width:0}
.bv .z.s{background:var(--accentT);color:var(--accent)}
.bv .z.k{background:var(--greenT);color:var(--green)}
.bv .z.e{background:var(--amberT);color:var(--amber)}
.bv .z .ico{font-size:14px}
.bvx{position:relative;height:16px;margin-top:5px;font:10px 'JetBrains Mono',monospace;color:var(--fg3)}
.bvx span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.bvx span.a0{transform:none}
.bvx span.a1{transform:translateX(-100%)}
.rules{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11px;color:var(--fg2)}
.rules span{display:inline-flex;align-items:center;gap:5px}
.rules .ico{font-size:14px;color:var(--fg3)}

.fixsum{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
border-top:1px solid var(--line)}
.fixsum .n{display:flex;flex-direction:column;gap:2px}
.fixsum .n .k{font-size:10.5px;color:var(--fg3);letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.fixsum .n .v{font:500 18px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.fixsum .n .v.free{color:var(--accent)}
.fixsum .n .v.need{color:var(--amber)}
.fixsum .btn{margin-left:auto}

/* host bar */
.hero{margin-top:12px;border:1px solid var(--line);background:var(--panel);padding:16px 18px}
.hero .hl{font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.hero .hl b.free{color:var(--accent)}
.hero .hl b.need{color:var(--amber)}
.hero .hl b.grow{color:var(--green)}
.hero .hs{font-size:12px;color:var(--fg2);margin-top:6px;max-width:86ch;line-height:1.6}
.hero .hs b{font-weight:500;color:var(--fg)}
.hbar{position:relative;height:10px;margin-top:32px}
.hbar .hbin{position:absolute;inset:0;display:flex;background:var(--line);border-radius:5px;overflow:hidden}
.hbar .hbin i{flex:0 0 auto;height:100%}
.hbar .hbin i.u{background:var(--accent)}
.hbar .hbin i.r{background:repeating-linear-gradient(135deg,rgba(59,74,184,.30) 0 4px,rgba(59,74,184,.15) 4px 8px)}
.hbar .gd{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;background:var(--red);border-radius:1px}
.hbar .gd span{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
font:500 10px 'JetBrains Mono',monospace;color:var(--red);white-space:nowrap}
.hbar .nx{position:absolute;top:-5px;bottom:-5px;width:0;margin-left:-1px;border-left:2px dashed var(--green);
transition:width .75s cubic-bezier(.22,.61,.36,1),left .75s cubic-bezier(.22,.61,.36,1),opacity .4s}
.hbar .nx.down{border-left-color:var(--accent)}
.hbar .nx span{position:absolute;top:calc(100% + 3px);left:0;transform:translateX(-50%);
font:500 10px 'JetBrains Mono',monospace;color:var(--green);white-space:nowrap}
.hbar .nx.down span{color:var(--accent)}
.hbar .nx.none{opacity:0}
.hleg{display:flex;gap:18px;margin-top:28px;font-size:11px;color:var(--fg3);flex-wrap:wrap;align-items:center}
.hleg span{display:flex;align-items:center;gap:6px}
.hleg s{width:10px;height:10px;text-decoration:none;flex:0 0 auto;border-radius:2px}
.hleg s.r{background:repeating-linear-gradient(135deg,rgba(59,74,184,.30) 0 3px,rgba(59,74,184,.15) 3px 6px)}

.cap3{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-top:12px}

/* per instance */
.ptool{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.ptool h2,.feedhd h2{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.ptool .cnt,.feedhd .cnt{font-size:11.5px;color:var(--fg3)}
.ptool .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.ptool2{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.ptool2 .lb{font-size:11px;color:var(--fg3);margin-right:2px}
.ptool2 .sp{flex:1 1 12px}
/* the arrow keeps its box on every chip, so choosing one never shifts the rest */
.chip .ca{display:inline-block;width:13px;font-size:13px;margin-left:2px;vertical-align:-2px}
.chip .ca.off{visibility:hidden}
.plegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:11px;color:var(--fg3)}
.plegend span{display:inline-flex;align-items:center;gap:6px}
.plegend .lg{display:inline-block;width:18px;height:10px;border-radius:2px;flex:0 0 auto}
.lg.use{background:var(--accent);height:6px}
.lg.res{background:var(--accentT);box-shadow:inset -2px 0 0 var(--accent)}
.lg.pk{width:2px;height:12px;background:var(--fg)}
.lg.bd{height:3px;background:var(--green);opacity:.55}
.lg.gg{border:1.5px dashed var(--green);background:repeating-linear-gradient(135deg,rgba(21,128,61,.22) 0 3px,transparent 3px 6px)}
.lg.gs{border:1.5px dashed var(--accent);background:repeating-linear-gradient(135deg,rgba(59,74,184,.22) 0 3px,transparent 3px 6px)}

.plist{position:relative;margin-top:10px;border:1px solid var(--line);background:var(--panel);overflow-x:auto}
.prow{min-width:880px;display:grid;grid-template-columns:minmax(0,200px) minmax(320px,1fr) minmax(0,270px);
gap:20px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center;background-color:var(--panel)}
.prow.head{padding:9px 16px;background:var(--panel2);border-bottom:1px solid var(--line2);
font-size:11px;color:var(--fg2);letter-spacing:.04em;font-weight:500;text-transform:uppercase}
.prow:last-child{border-bottom:0}
/* tints are an image over an opaque colour, so a row gliding past another is not see-through */
.prow.act,.prow.room{background-image:linear-gradient(var(--amberT),var(--amberT));box-shadow:inset 3px 0 0 var(--amber)}
.prow.sav{background-image:linear-gradient(var(--accentT),var(--accentT));box-shadow:inset 3px 0 0 var(--accent)}
.pn{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3);margin-top:3px;white-space:nowrap;
overflow:hidden}
.pp .pc{color:var(--fg2)}
.pp .pc.hot{color:var(--amber)}
.pp .pc.crit{color:var(--red)}
.scan{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;z-index:3;pointer-events:none}
.scan i{position:absolute;top:0;bottom:0;left:-30%;width:30%;
background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scanx 1.1s ease-in-out infinite}
@keyframes scanx{from{left:-30%}to{left:100%}}

.track{position:relative;height:26px;background:var(--panel2);border-radius:4px;overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line)}
.track i{position:absolute;display:block}
.track .res{left:0;top:0;bottom:0;background:var(--accentT);box-shadow:inset -2px 0 0 var(--accent);
border-radius:4px 0 0 4px}
.track .res.dur{background:rgba(92,102,112,.09);box-shadow:inset -2px 0 0 var(--fg2)}
.track .bnd{bottom:0;height:3px;background:var(--green);opacity:.5}
.track .use{left:0;top:7px;bottom:7px;background:var(--accent);border-radius:0 3px 3px 0}
.track .use.hot{background:var(--amber)}
.track .use.crit{background:var(--red)}
.track .pk{top:3px;bottom:3px;width:2px;margin-left:-1px;background:var(--fg);border-radius:1px}
.track .pk.over{background:var(--red)}
.track .gh{top:0;bottom:0;border:0 dashed transparent;border-radius:0 4px 4px 0}
.track .gh.up{border-width:1.5px;border-color:var(--green);
background:repeating-linear-gradient(135deg,rgba(21,128,61,.22) 0 5px,rgba(21,128,61,.07) 5px 10px)}
.track .gh.down{border-width:1.5px;border-color:var(--accent);border-radius:0;
background:repeating-linear-gradient(135deg,rgba(255,255,255,.85) 0 5px,rgba(255,255,255,.45) 5px 10px)}
.tlabels{display:flex;justify-content:space-between;gap:10px;margin-top:6px;white-space:nowrap;
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3);font-variant-numeric:tabular-nums}
.tlabels b{color:var(--fg2);font-weight:400}
.tlabels .nx{font-weight:500}
.tlabels .nx.up{color:var(--green)}
.tlabels .nx.down{color:var(--accent)}

.rec{display:flex;flex-direction:column;gap:5px;min-width:0}
.recline{display:flex;align-items:center;gap:8px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:12px;
font-size:11.5px;font-weight:500;white-space:nowrap}
.pill .ico{font-size:14px}
.pill.act,.pill.room{background:var(--amberT2);color:var(--amber)}
.pill.sav,.pill.give{background:var(--accentT2);color:var(--accent)}
.pill.ok,.pill.grow{background:var(--greenT);color:var(--green)}
.pill.wait,.pill.cool,.pill.neu{background:var(--line);color:var(--fg2)}
.pill.bal{background:var(--panel);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line2)}
.recto{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.recto.up{color:var(--green)}
.recto.down{color:var(--accent)}
.recwhy{font-size:11.5px;color:var(--fg3);line-height:1.45}
.recline .mini{margin-left:auto}
.mini{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line2);
background:var(--panel);border-radius:4px;cursor:pointer;font:inherit;font-size:11px;color:var(--fg2);
white-space:nowrap;flex:0 0 auto}
.mini:hover{color:var(--fg);border-color:var(--fg3)}
.mini .ico{font-size:14px}
.mini.go{border-color:var(--accent);color:var(--accent)}
.mini.go:hover{background:var(--accent);color:#fff}
.mini.pin{padding:3px 5px}
.mini.pin.on{background:var(--fg);border-color:var(--fg);color:#fff}
.mini:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* memory changes feed */
.feedhd{display:flex;align-items:baseline;gap:10px;margin-top:26px;flex-wrap:wrap}
.feed{margin-top:10px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.fe{display:grid;grid-template-columns:140px 160px minmax(0,1fr) minmax(0,150px);gap:14px;
padding:10px 16px;border-bottom:1px solid var(--line);align-items:center;font-size:12px}
.fe:last-child{border-bottom:0}
.fe .ts{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3)}
.fe .kd{display:inline-flex;align-items:center;gap:6px;color:var(--fg2);white-space:nowrap}
.fe .kd .ico{font-size:16px;color:var(--fg3)}
.fe .kd.auto,.fe .kd.auto .ico{color:var(--accent)}
.fe .mv{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.fe .mv span{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:10px;
font:500 11px/18px 'JetBrains Mono',monospace;white-space:nowrap}
.fe .mv span b{font:500 11.5px 'IBM Plex Sans',sans-serif;color:var(--fg)}
.fe .mv span.up{background:var(--greenT);color:var(--green)}
.fe .mv span.down{background:var(--accentT);color:var(--accent)}
.fe .mv span.none{padding:0;font:11.5px 'IBM Plex Sans',sans-serif;color:var(--fg3)}
.fe .tot{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg2);text-align:right;white-space:nowrap}
.fe.fresh{animation:feedIn .7s cubic-bezier(.22,.61,.36,1)}
@keyframes feedIn{from{opacity:0;transform:translateY(-8px);background-color:var(--accentT)}}
.feedempty{padding:16px;font-size:12px;color:var(--fg3)}
@media (max-width:900px){.fe{grid-template-columns:minmax(0,1fr);gap:6px}.fe .tot{text-align:left}}

.explain{margin-top:14px;border:1px solid var(--line);background:var(--panel2);padding:12px 15px;
font-size:11.5px;color:var(--fg2);line-height:1.65}
.explain code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg)}

.arow{display:grid;grid-template-columns:170px 130px 130px 150px 1fr;gap:14px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px}
.arow.head{background:var(--panel2);border-bottom:1px solid var(--line2);font-size:11px;
color:var(--fg2);letter-spacing:.04em;font-weight:500;text-transform:uppercase}
.arow:last-child{border-bottom:0}
.arow .fail{color:var(--red)}

.overlay{position:fixed;inset:0;background:rgba(26,29,33,.38);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.modal{width:520px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;
box-shadow:0 16px 48px rgba(26,29,33,.16),0 4px 12px rgba(26,29,33,.08)}
.modal .mh{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;font-weight:600}
.modal .mh .ico{color:var(--red)}
.modal .mf{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
/* A dialog never grows past the window: header and buttons stay put, the body scrolls. */
.modal{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column}
.modal .mh,.modal .mf{flex:0 0 auto}
.modal .body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.rmlist{margin-top:9px;display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11.5px}
.rmlist div{display:flex;gap:8px}
.rmlist span.k{color:var(--fg3);width:34px;flex:0 0 34px}
.rmlist .kill{color:var(--red)}
.chk{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:10px 11px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer}
.chk.on{border-color:var(--red);background:var(--redT)}
.chk input{margin:2px 0 0;accent-color:var(--red)}
.chk .t{font-size:12px}
.chk .p{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg3);margin-top:3px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;
padding:10px 15px;border:1px solid var(--line2);background:var(--fg);color:#fff;
border-radius:5px;font-size:12px;box-shadow:0 8px 24px rgba(26,29,33,.18);max-width:min(560px,calc(100vw - 32px))}
/* the retention menu opens rightward from its button - on a phone the card sits at the left edge */
.cardfoot .menu{left:0;right:auto}

/* ===== phone ===== */
/* Same screens, stacked. Wide tables keep their own sideways scroll inside
   their container; the page itself never scrolls sideways. */
@media (max-width:760px){
  .app{flex-direction:column}
  aside{position:static;width:auto;flex:none;height:auto;border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;align-items:center}
  .brand{flex:1 1 auto;border-bottom:0;padding:10px 16px}
  nav{order:3;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 12px 8px}
  .foot{margin-top:0;border-top:0;padding:8px 16px;flex-direction:row;align-items:center}
  .foot .v{display:none}
  .top{padding:0 16px}
  .wrap{padding:16px}
  .bar,.bar .right,.livebar,.hrow,.ptool .right,.caphead,.actions,.actions .right,.cdrow{flex-wrap:wrap}
  .bar .right,.livebar .lb-r,.actions .right,.elbtns,.fixsum .btn{margin-left:0}
  #filter{width:100%!important}
  .in{max-width:100%}
  .elhead{flex-wrap:wrap}
  .elhead .seg{width:100%}
  .seg button{flex:1 1 0;width:auto}
  .frow{grid-template-columns:minmax(0,1fr);gap:6px}
  .frow .r{text-align:left!important}
  .grid2{grid-template-columns:minmax(0,1fr);gap:6px}
  .grid2 label{padding-top:8px}
  .pcards,.setrow{grid-template-columns:minmax(0,1fr)}
  .gnums{grid-template-columns:repeat(2,max-content)}
  .charts{grid-template-columns:minmax(0,1fr)}
  .modal{max-width:calc(100vw - 32px)}
  .overlay{padding:16px}
  .sec{overflow-x:auto}
  .arow{min-width:720px}
  .mvtbl{overflow-x:auto}
  .mvrow{min-width:540px}
}