/* SuperDRM Portal — Carbon-flavoured design system (g100 dark, IBM Plex). */

:root{
  --bg:#161616; --layer:#1c1c1c; --layer2:#262626; --layer3:#2e2e2e; --field:#121212;
  --border:#393939; --bsub:#2a2a2a; --bstrong:#525252;
  --text:#f4f4f4; --t2:#c6c6c6; --t3:#8d8d8d; --tinv:#161616;
  --blue:#0f62fe; --blue-h:#0353e9; --blue-a:#002d9c; --link:#78a9ff;
  --green:#42be65; --green-bg:#1c2b20; --yellow:#f1c21b; --yellow-bg:#302a12;
  --red:#fa4d56; --red-h:#da1e28; --red-bg:#331c1e; --purple:#be95ff; --teal:#3ddbd9;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --rail-w:280px; --header-h:48px;
  --shadow:0 6px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0}
html{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:.875rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100%}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
::selection{background:var(--blue);color:#fff}

/* ── typography ── */
.h1{font-weight:300;font-size:1.75rem;line-height:1.2;letter-spacing:-.01em}
.h2{font-weight:400;font-size:1.25rem;line-height:1.3}
.h3{font-weight:600;font-size:.95rem}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.sub{color:var(--t3);font-size:.8rem}
.mono{font-family:var(--mono)} .num{font-variant-numeric:tabular-nums}

/* ── header ── */
.hdr{position:sticky;top:0;height:var(--header-h);z-index:40;background:#161616;border-bottom:1px solid var(--bsub)}
.hdr .wrap{display:flex;align-items:center;height:var(--header-h);gap:1rem}.wrap{width:min(1120px,100% - 2rem);margin:0 auto}
.hdr .brand{font-weight:300;font-size:1rem;white-space:nowrap}
.hdr .brand b{font-weight:600}.hdr .brand span{font-weight:300}
.hdr .brand em{font-style:normal;color:var(--t3);font-weight:300;margin-left:.5rem;font-size:.8rem}
.hdr .ctx{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--t2);min-width:0}
.hdr .ctx .crumb{color:var(--t3)} .hdr .ctx b{font-weight:600;color:var(--text);white-space:nowrap}
.hdr .spacer{flex:1}
.hdr #super-nav{display:flex;align-items:center;margin:0 .5rem 0 .25rem;min-height:32px}
.hdr .hlink{color:var(--t2);font-size:.8rem;padding:.3rem .6rem}
.hdr .hlink:hover{color:#fff;text-decoration:none}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:600;cursor:pointer;border:none;flex:none}
.hdr .smenu{position:relative}.hdr .smenu summary{list-style:none;cursor:pointer;display:flex;width:28px;height:28px}.hdr .smenu summary::-webkit-details-marker{display:none}.hdr .smenu .avatar{overflow:hidden}.hdr .smenu .avatar img{width:100%;height:100%;object-fit:cover}
.hdr .smenu .menu{position:absolute;right:0;top:36px;min-width:250px;background:var(--layer);border:1px solid var(--bsub);box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:50;display:flex;flex-direction:column;padding:.4rem 0}
.smenu .menu a,.smenu .menu button{display:block;width:100%;text-align:left;padding:.5rem 1rem;font-size:.84rem;color:var(--text);background:none;border:none;cursor:pointer;font-family:var(--sans)}.smenu .menu a:hover,.smenu .menu button:hover{background:var(--layer2);text-decoration:none}
.smenu .menu .who{padding:.6rem 1rem .7rem;border-bottom:1px solid var(--bsub);margin-bottom:.3rem;font-size:.8rem;color:var(--t2);display:block}.smenu .menu .who b{display:block;color:var(--text);font-weight:600}.smenu .menu .av{display:inline-grid;place-items:center;border-radius:50%;background:var(--layer2);color:var(--text);font-weight:600;overflow:hidden}

/* ── shell layout ── */
.shell{display:none;min-height:100vh;flex-direction:column}
.shell.on{display:flex}.shell .wrap.acct{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:3rem;padding:2.5rem 0 4rem;flex:1;align-items:start}.shell .wrap.acct>*{min-width:0}
.rail .sideme .me{display:flex;align-items:center;gap:.8rem;padding:0 0 1.2rem;border-bottom:1px solid var(--bsub);margin-bottom:.8rem;position:relative}.rail .sideme .me .av{width:44px;height:44px;font-size:1rem;display:inline-grid;place-items:center;border-radius:50%;background:var(--layer2);font-weight:600;overflow:hidden}.rail .sideme .me .av img{width:100%;height:100%;object-fit:cover}.rail .sideme .me b{display:block;font-weight:600}.rail .sideme .me span{font-size:.78rem;color:var(--t2);font-family:var(--mono)}
.pfoot{border-top:1px solid var(--bsub);padding:1.4rem 0;color:var(--t3);font-size:.75rem}.pfoot .wrap{display:flex;gap:1.5rem;flex-wrap:wrap}.pfoot a{color:var(--t2)}
.rail{position:static;width:auto;background:transparent;
  border-right:1px solid var(--bsub);display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.rail .rhead{padding:1rem 1rem .6rem;border-bottom:1px solid var(--bsub)}
.rail .rhead .h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .back{display:block;padding:.55rem 1rem;font-size:.75rem;color:var(--t3);border-bottom:1px solid var(--bsub)}
.rail .back:hover{color:#fff;text-decoration:none}
.rail nav{padding:.5rem 0;flex:1}
.rail nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;font-size:.83rem;color:var(--t2);
  border-left:3px solid transparent}
.rail nav a:hover{color:#fff;background:var(--layer);text-decoration:none}
.rail nav a.on{color:#fff;background:var(--layer);border-left-color:var(--blue)}
.rail nav .sect{padding:.9rem 1rem .3rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t3)}
.rail .rfoot{padding:.8rem 1rem;border-top:1px solid var(--bsub);font-size:.7rem;color:var(--t3)}
.main{margin:0;padding:0;max-width:none}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-h .h1{margin-top:.2rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}

@media(max-width:880px){
  .rail{position:static;width:auto;border-right:none;border-bottom:1px solid var(--bsub);flex-direction:row;
    align-items:center;overflow-x:auto;top:auto}
  .rail .rhead,.rail .rfoot{display:none}
  .rail .back{border:none;white-space:nowrap}
  .rail nav{display:flex;padding:0;flex:1}
  .rail nav .sect{display:none}
  .rail nav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap}
  .rail nav a.on{border-bottom-color:var(--blue)}
  .main{margin-left:0;padding:1.2rem 1rem 3rem}
  .hdr .ctx{display:none}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.82rem;
  padding:.62rem 1rem;border:none;cursor:pointer;background:var(--blue);color:#fff;white-space:nowrap}
.btn:hover{background:var(--blue-h)} .btn:active{background:var(--blue-a)}
.btn.sec{background:var(--layer3);color:var(--text)} .btn.sec:hover{background:#3a3a3a}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--bstrong)}
.btn.ghost:hover{background:#f4f4f414}
.btn.danger{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--bstrong)}
.btn.danger:hover{background:var(--red-h);color:#fff;box-shadow:none}
.btn.sm{padding:.32rem .65rem;font-size:.75rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.iconbtn{background:none;border:none;color:var(--t3);cursor:pointer;padding:.2rem .35rem;font-size:.8rem}
.iconbtn:hover{color:#fff}

/* ── fields ── */
.fld{margin-bottom:1rem}
.fld label{display:block;font-size:.73rem;color:var(--t2);margin-bottom:.35rem}
.fld .help{font-size:.7rem;color:var(--t3);margin-top:.3rem}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:.62rem .75rem;background:var(--field);border:none;border-bottom:1px solid var(--bstrong);
  color:var(--text);font-size:.85rem;font-family:var(--sans)}
input::placeholder{color:#6f6f6f}
select{cursor:pointer}
.inline-fields{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.inline-fields .fld{margin-bottom:0;flex:1;min-width:150px}
.check{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem 0;cursor:pointer;font-size:.8rem;color:var(--t2)}
.check input{width:auto;margin-top:.2rem;accent-color:var(--blue)}
.check .mono{font-size:.72rem;color:var(--text)}

/* ── tiles & stat cards ── */
.grid{display:grid;gap:1px;background:var(--bsub);border:1px solid var(--bsub)}
.grid>*{background:var(--layer)}
.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1.6rem}
.stat{padding:1.1rem 1.2rem}
.stat .k{font-size:.7rem;color:var(--t3)}
.stat b{display:block;font-weight:300;font-size:1.9rem;line-height:1.15;font-variant-numeric:tabular-nums}
.stat .s{font-size:.72rem;color:var(--t3)}
.tilegrid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tile{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem}
.tile.click{cursor:pointer;transition:background .1s}
.tile.click:hover{background:var(--layer2)}
.tile .trow{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.panelbox{background:var(--layer);border:1px solid var(--bsub);padding:1.2rem 1.3rem;margin-bottom:1.4rem}

/* ── meter ── */
.meter{height:6px;background:var(--layer3);margin-top:.5rem}
.meter i{display:block;height:100%;background:var(--blue);transition:width .3s}
.meter i.warn{background:var(--yellow)} .meter i.over{background:var(--red)}

/* ── tables ── */
.tblwrap{overflow-x:auto;border:1px solid var(--bsub)}
table{border-collapse:collapse;width:100%;font-size:.8rem;background:var(--layer)}
thead th{text-align:left;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);
  padding:.6rem .9rem;background:var(--layer2);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:.55rem .9rem;border-bottom:1px solid var(--bsub);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#1f1f1f}
td.dim{color:var(--t3)} td .mono{font-size:.72rem}

/* ── pills ── */
.pill{display:inline-block;font-family:var(--mono);font-size:.64rem;padding:.14em .55em;border-radius:999px;
  background:var(--layer3);color:var(--t2);white-space:nowrap}
.pill.g{background:var(--green-bg);color:var(--green)} .pill.y{background:var(--yellow-bg);color:var(--yellow)}
.pill.r{background:var(--red-bg);color:var(--red)} .pill.b{background:#16233f;color:var(--link)}

/* ── notifications ── */
.note{font-size:.78rem;color:var(--t3);margin-top:.7rem}
.banner{padding:.75rem 1rem;font-size:.82rem;margin-bottom:1.2rem;border-left:3px solid}
.banner.err{background:var(--red-bg);border-color:var(--red);color:#ffd7d9}
.banner.ok{background:var(--green-bg);border-color:var(--green);color:#defbe6}
.banner.warn{background:var(--yellow-bg);border-color:var(--yellow);color:#fdf0c0}
#toasts{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.toast{background:var(--layer2);border-left:3px solid var(--blue);box-shadow:var(--shadow);padding:.7rem 1rem;
  font-size:.8rem;animation:tin .18s ease}
.toast.err{border-color:var(--red)} .toast.ok{border-color:var(--green)}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ── reveal / code ── */
.reveal{background:var(--field);border:1px solid var(--border);border-left:3px solid var(--yellow);
  padding:.9rem 1rem;font-family:var(--mono);font-size:.74rem;word-break:break-all;margin:1rem 0;position:relative}
.reveal .rk{display:block;font-size:.62rem;letter-spacing:.12em;color:var(--t3);margin-bottom:.4rem;font-family:var(--mono)}
.codebox{background:var(--field);border:1px solid var(--bsub);font-family:var(--mono);font-size:.72rem;
  padding:.8rem 1rem;overflow-x:auto;position:relative;white-space:pre}
.copybtn{position:absolute;top:.4rem;right:.4rem}

/* ── side panel ── */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:none}
#scrim.open{display:block}
#spanel{position:fixed;top:0;right:-460px;bottom:0;width:440px;max-width:94vw;background:var(--layer);
  border-left:1px solid var(--border);z-index:70;transition:right .22s ease;display:flex;flex-direction:column}
#spanel.open{right:0}
#spanel .sp-h{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;
  border-bottom:1px solid var(--bsub)}
#spanel .sp-b{padding:1.2rem;overflow-y:auto;flex:1}
#spanel .sp-f{padding:1rem 1.2rem;border-top:1px solid var(--bsub);display:flex;gap:.5rem;justify-content:flex-end}

/* ── modal (confirmations) ── */
#modal{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
#modal.open{display:flex}
#modal .m-box{background:var(--layer);border:1px solid var(--border);max-width:430px;width:92vw;box-shadow:var(--shadow)}
#modal .m-b{padding:1.4rem 1.4rem 1rem}
#modal .m-f{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.4rem 1.2rem}

/* ── charts ── */
.bars{display:flex;align-items:flex-end;gap:3px;height:110px;border-bottom:1px solid var(--border);padding-top:.4rem}
.bars i{flex:1;background:var(--blue);min-height:2px;position:relative}
.bars i.f{background:var(--red)}
.bars i:hover{background:var(--link)}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--t3);margin-top:.3rem}

/* ── skeleton / empty ── */
.skel{background:linear-gradient(90deg,var(--layer) 25%,var(--layer2) 50%,var(--layer) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;height:1em;border-radius:2px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.empty{border:1px dashed var(--border);padding:2.2rem 1.5rem;text-align:center;color:var(--t3);font-size:.82rem}
.empty b{display:block;color:var(--t2);font-weight:600;margin-bottom:.3rem}

/* ── auth screens ── */
.authwrap{min-height:100vh;display:none;align-items:center;justify-content:center;padding:2rem;
  background:radial-gradient(60rem 30rem at 70% -10%, #1c2333 0%, var(--bg) 55%)}
.authwrap.on{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}.authwrap .wrap{width:min(1120px,100% - 2rem);margin:0 auto}.authwrap .idtop{height:48px;border-bottom:1px solid var(--bsub);flex:none}.authwrap .idtop .wrap{display:flex;align-items:center;height:48px;gap:1rem}.authwrap .idtop .brand{font-weight:300;font-size:1rem;color:var(--text);text-decoration:none}.authwrap .idtop .brand b{font-weight:600}.authwrap .idtop .sp{flex:1}.authwrap .idtop .lnk{color:var(--t2);font-size:.82rem;text-decoration:none}.authwrap .authmid{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem 4rem}.authwrap .idfoot{border-top:1px solid var(--bsub);padding:1.4rem 0;color:var(--t3);font-size:.75rem}.authwrap .idfoot .wrap{display:flex;gap:1.5rem;flex-wrap:wrap}.authwrap .idfoot a{color:var(--t2);text-decoration:none}.brand .tail{color:var(--t3);font-weight:300;font-size:.85rem}
.auth{width:100%;max-width:420px;background:var(--layer);border:1px solid var(--bsub);padding:2.2rem}
.auth .brand{font-weight:600;font-size:.95rem}.auth .brand span{font-weight:300}
.auth .h1{margin:.9rem 0 .25rem;font-size:1.6rem}
.auth .lead{color:var(--t3);font-size:.82rem;margin-bottom:1.3rem}
.auth .btn{width:100%;justify-content:center;margin-top:1.1rem;padding:.8rem}
.auth .alt{margin-top:1.3rem;font-size:.78rem;color:var(--t3)}

/* ── workspace live canvas (ported from live.superdrm.com) ── */
.canvas{position:relative;height:56vh;min-height:380px;border:1px solid var(--bsub);background:var(--bg);overflow:hidden;cursor:grab;margin-bottom:1.4rem}
.canvas svg.graph{width:100%;height:100%;display:block}
.canvas svg.dragging{cursor:grabbing}
.group{fill:rgba(255,255,255,.02);stroke:var(--border);stroke-dasharray:4 4}
.group-l{fill:var(--t3);font-size:11px;letter-spacing:.32px;text-transform:uppercase}
.edge{fill:none;stroke:#4c4c4c;stroke-width:1.2;transition:stroke .2s,stroke-width .2s}
.edge.dashed{stroke-dasharray:5 4}.edge.hot{stroke:var(--link);stroke-width:2}.edge:hover{stroke:var(--text)}
#ah path{fill:var(--bstrong)}
.elabel{fill:var(--t3);font-family:var(--mono);font-size:9.5px;pointer-events:none}
.node{cursor:default}
.node .box{fill:var(--layer);stroke:var(--border);transition:fill .2s}.node:hover .box{fill:var(--layer2)}
.node .rule{fill:var(--bstrong)}.node.svc .rule{fill:var(--blue)}.node.hard .rule{fill:var(--purple)}.node.state .rule{fill:var(--teal)}.node.ext .rule{fill:var(--t3)}.node.tenant .rule{fill:#33b1ff}
.node.ext .box{stroke-dasharray:4 3}
.node .nl{fill:var(--text);font-size:13px;font-weight:600}.node .ns{fill:var(--t2);font-size:10px}
.node .nc{fill:var(--t3);font-family:var(--mono);font-size:10px}
.node .dot{fill:var(--bstrong)}.node.s-ok .dot{fill:var(--green)}
.node .lock{fill:var(--purple)}
.node.pulse .box{fill:#2a3550;stroke:var(--link)}
.badge rect{fill:var(--green-bg);stroke:var(--green)}.badge text{fill:var(--green);font-size:9px;font-weight:600;letter-spacing:.4px;font-family:var(--mono)}
.packet circle{fill:var(--link)}.packet.fail circle{fill:var(--red)}.packet.sys-clearkey circle{fill:var(--t2)}.packet.sys-fairplay circle{fill:var(--purple)}
.packet.hw .shield{fill:var(--green)}.packet.key circle{fill:var(--teal)}.packet.key .keyglyph{fill:#000}.packet.att circle{fill:var(--green)}
.packet.done{opacity:0;transition:opacity .35s}
.packet.burst circle{animation:pburst .5s ease}
@keyframes pburst{0%{r:6}50%{r:14;opacity:.5}100%{r:6}}
.fail-label{fill:var(--red);font-family:var(--mono);font-size:11px;font-weight:500;animation:prise 1.8s ease forwards}
@keyframes prise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}
.gtip{position:absolute;z-index:5;background:var(--layer2);border:1px solid var(--border);padding:8px 11px;font-size:12px;max-width:240px;pointer-events:none;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.gtip b{font-weight:600}.gtip span{color:var(--t2)}.gtip .mono{color:var(--t3);font-size:.68rem}

/* ── phones (≤640px) ─────────────────────────────────────────────────────────
   Nothing may be wider than the screen. Tables and code scroll INSIDE their box
   instead of cropping (the API-keys table lost its last three columns on an
   iPhone); the workspace rail is a swipeable strip; inputs are 16px so iOS does
   not zoom the page on focus; the slide-in panel is the whole screen. */
@media(max-width:640px){
  html{-webkit-text-size-adjust:100%}
  .main{padding:1rem .9rem 3rem;overflow-x:hidden}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tblwrap table{white-space:nowrap}
  pre,code,.mono{max-width:100%}
  pre{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre}
  .rail{overflow-x:auto;scrollbar-width:none;max-width:100vw}.rail::-webkit-scrollbar{display:none}
  .rail nav{max-width:100%;width:auto;margin:0;overflow-x:auto;scrollbar-width:none}.rail nav::-webkit-scrollbar{display:none}
  .rail nav a{padding:.8rem .7rem;font-size:.9rem}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .btn{min-height:44px}
  .auth{padding:1.4rem 1.1rem;max-width:calc(100vw - 2rem)}
  #spanel{width:100vw;max-width:100vw;right:-100vw}
  #spanel.open{right:0}
  #modal .m-box{width:calc(100vw - 1.5rem)}
  thead th{font-size:.7rem}
  td .mono,.dim,.small,.sub{font-size:.78rem}
  .hdr h1,.h1{font-size:1.5rem}
  .stats,.cards,.grid{grid-template-columns:1fr!important}
  .field-row,.row2{flex-direction:column;align-items:stretch}
  /* a code box with a copy button: the button no longer sits on the text; long URLs break */
  .main :has(> .copybtn){padding-right:4.8rem;word-break:break-all;white-space:normal}
}

/* sign-in alternatives under the password form */
.ssorow{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--bsub)}
.ssorow .btn{justify-content:center;width:100%}
/* SuperID first: the primary identity sits above the email form, same button system */
.idrow{display:flex;flex-direction:column;gap:.5rem}
.idrow .btn{justify-content:center;width:100%;font-size:.9rem;padding:.8rem 1rem}
.ssosub{color:var(--t3);font-size:.76rem;text-align:center;margin:-.1rem 0 .3rem}
.orline{display:flex;align-items:center;gap:.6rem;color:var(--t3);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin:-.3rem 0 .2rem}
.orline::before,.orline::after{content:"";flex:1;border-top:1px solid var(--bsub)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

.supmark{font-weight:600;letter-spacing:-.01em;margin-right:.35rem}

/* phones (≤880px): the container becomes one column — the rail turns into a tab strip above the page, the page header stacks,
   buttons and cards go full width, 16px fields so iOS does not zoom. (2026-09-15) */
@media(max-width:880px){
  .shell .wrap.acct{display:block;padding:.6rem 0 3rem}
  .rail{position:static;width:auto;display:block;border:0;overflow:visible;top:auto}
  .rail .sideme .me{padding:.6rem 0 .8rem}
  .rail nav{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:.1rem;margin:0 -1rem 1rem;padding:0 1rem;border-bottom:1px solid var(--bsub);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail nav::-webkit-scrollbar{display:none}
  .rail nav a{flex:none;border-left:0;border-bottom:3px solid transparent;padding:.7rem .8rem;font-size:.9rem}
  .rail nav a.on{border-bottom-color:var(--blue);background:transparent}
  .rail nav .sect,.rail .rhead,.rail .rfoot{display:none}
  .main{margin:0;padding:.4rem 0 0;max-width:none;overflow-x:hidden}
  .page-h{flex-direction:column;align-items:stretch;gap:.8rem}
  .page-h .h1,.h1{font-size:1.5rem}
  .actions{width:100%}.actions .btn{flex:1 1 auto;min-width:0;justify-content:space-between}
  .btn{min-width:0;max-width:100%}
  .stats,.cards,.grid,.tiles{grid-template-columns:1fr!important}
  .inline-fields{flex-direction:column;align-items:stretch}.inline-fields .fld{width:100%}
  .fld,.fld input,.fld select,.fld textarea{max-width:100%}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .tblwrap{max-width:100%;overflow-x:auto}.tblwrap table{white-space:nowrap}
  .main table:not(.tblwrap table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .hdr .wrap{gap:.6rem}.hdr .hlink{display:none}.hdr .brand em,.hdr .brand .tail{display:none}
  .pfoot .wrap{gap:.5rem 1rem}
  pre,code{max-width:100%;overflow-x:auto}
}
/* header = superengine.com: brand · products grid · account. No breadcrumb, no side links (2026-09-15) */
.hdr .ctx{display:none}.hdr .wrap{gap:.6rem}
/* account type pill, left of the products grid — same as superengine.com */
.hdr .pill.atype{align-self:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--bstrong,#6f6f6f);padding:.3em .6em;color:var(--t2);text-decoration:none;line-height:1.2;margin:0 .4rem 0 .2rem;white-space:nowrap}.hdr .pill.atype:hover{color:var(--text);border-color:var(--text)}@media(max-width:760px){.hdr .pill.atype{display:none}}

.si-ask form{display:flex;gap:.5rem;margin:.6rem 0}.si-ask input{flex:1;min-width:0;background:var(--field);border:0;border-bottom:1px solid var(--bstrong);color:var(--text);padding:.6rem .7rem;font:.88rem var(--sans)}.si-ask input:focus{outline:2px solid var(--blue);outline-offset:-2px}.si-a{white-space:pre-wrap;line-height:1.55;margin:.4rem 0;font-size:.9rem}
.si-link{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 .3rem}.si-link input{flex:1;min-width:160px;background:var(--field);border:0;border-bottom:1px solid var(--bstrong);color:var(--text);padding:.5rem .6rem;font:.85rem var(--sans);text-transform:uppercase;letter-spacing:.08em}.si-codeout{font-family:var(--mono);font-size:1rem;letter-spacing:.2em}

/* ── workspace monitor (Live) ─────────────────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--bsub)}.seg button{background:transparent;color:var(--t2);border:0;height:30px;padding:0 .8rem;font:inherit;font-size:.78rem;cursor:pointer}.seg button.on{background:var(--text,#f4f4f4);color:var(--bg,#161616)}.seg button:hover:not(.on){background:var(--layer)}
.mon{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.2rem;align-items:start}.mon-main,.mon-rail{min-width:0}
.mon-rail{border:1px solid var(--bsub);background:var(--layer);position:sticky;top:1rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column}
.mon-rail input{margin:.6rem;width:calc(100% - 1.2rem)}
#mon-rail{overflow:auto;flex:1;min-height:0}
.vrow{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:.6rem;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-left:3px solid transparent;color:var(--t1,#f4f4f4);padding:.5rem .8rem .5rem .6rem;font:inherit;cursor:pointer}
.vrow:hover{background:var(--bg)}.vrow.on{background:var(--bg);border-left-color:var(--blue)}
.vrow i{width:7px;height:7px;border-radius:50%;background:var(--bsub)}.vrow.live i{background:var(--green,#42be65);box-shadow:0 0 0 2px rgba(66,190,101,.25)}
.vrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.vrow .nm small{display:block;color:var(--t3);font-size:.66rem;font-family:var(--font,inherit)}.vrow .nm.anon{color:var(--t2);font-style:italic}
.vrow b{font-weight:400;font-variant-numeric:tabular-nums;font-size:.85rem}.vrow.all{border-bottom:1px solid var(--bsub)}.vrow.all .nm{font-weight:600}
.vrow.warn .nm{color:#ffe8a3}.vrow .rd{color:var(--red)}
.mon-stats.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:1rem}
.mon-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:end;margin-bottom:.8rem}
.mon-bars.bars{height:70px}.mon-bysys{display:flex;gap:1rem;font-size:.78rem;color:var(--t2);padding-bottom:.3rem;white-space:nowrap}.mon-bysys b{color:var(--t1,#f4f4f4)}.mon-bysys em{font-style:normal;color:var(--red)}
.mon-chips{display:flex;gap:.4rem;align-items:center;overflow-x:auto;white-space:nowrap;font-size:.76rem;padding:.35rem 0;min-height:0}.mon-chips:empty{display:none}.mon-chips .k{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-right:.3rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--layer);border:1px solid var(--bsub);padding:.2rem .55rem;color:var(--t1,#f4f4f4);font:inherit;font-size:.76rem;max-width:260px}.chip .nm{overflow:hidden;text-overflow:ellipsis}.chip b{font-weight:600;color:var(--t2)}.chip em{font-style:normal;color:var(--red);font-size:.7rem}
.mon-chips.red .chip{background:#2d0709;border-color:#5a1116;color:#ffd7d9}.mon-chips.red .chip b{color:var(--red)}
.mon-chips.amber .chip{background:#3a2a05;border-color:#6b4f0b;color:#ffe8a3}.mon-chips.amber .chip b{color:#f1c21b}.chip.click{cursor:pointer}.chip.click:hover{filter:brightness(1.2)}
.mon .canvas{height:46vh;min-height:320px;margin:.6rem 0 1rem}
@media (max-width:880px){.mon{grid-template-columns:minmax(0,1fr)}.mon-rail{position:static;max-height:34vh}.mon-row{grid-template-columns:minmax(0,1fr)}.mon-bysys{flex-wrap:wrap;white-space:normal}.mon-chips{max-width:100%}.mon .canvas{height:40vh;min-height:260px}}
.badge.lab rect{fill:#3a2a05;stroke:#f1c21b}.badge.lab text{fill:#ffe8a3}.packet.sys-playready circle{fill:#08bdba}