/* ============================================================
   DACHOST panel — 1. tokens. Do not add a token without adding it here.
   ============================================================ */
@font-face{font-family:"Inter";src:url("/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ground + surfaces (brand) */
  --bg:#F0EEEA;            /* page ground */
  --bg-2:#E8E5DF;          /* hover rows, active nav, segmented track, inset areas */
  --bg-3:#DFDBD3;          /* skeleton shimmer high, disabled tracks */
  --surface:#FFFFFF;       /* panels, tables, top bar, nav, menus, modals */
  --surface-2:#FAF9F7;     /* table header, row hover, code, kbd */
  --line:#DDD9D1;          /* every border */
  --line-2:#CFCABF;        /* stronger: focused-hover borders, chart baseline, drag handle */
  --line-soft:#ECE9E3;     /* row separators, kv separators */

  /* ink + text */
  --ink:#17160F; --ink-2:#26241B;
  --text:#17160F; --text-2:#5F5B52; --text-3:#8A857A; --text-4:#B3AEA2;
  --on-ink:#F2EDE4; --on-ink-2:#B9B3A6;

  /* accent — see rule 1 for the allowed uses */
  --accent:#E07A1F; --accent-hover:#C96A14; --accent-ink:#B8600F;
  --accent-soft:rgba(224,122,31,.12);   /* selected rows/radio rows, chart primary fill */
  --accent-line:rgba(224,122,31,.35);   /* selected row inset border */

  /* semantic: solid (dots, bars), text (on soft bg), soft (chip/notice bg), line (notice border) */
  --ok:#1F9D55;   --ok-text:#157A43;   --ok-soft:rgba(31,157,85,.11);   --ok-line:rgba(31,157,85,.30);
  --warn:#D9A21B; --warn-text:#8A6410; --warn-soft:rgba(217,162,27,.14); --warn-line:rgba(217,162,27,.40);
  --bad:#C93B2B;  --bad-text:#A82E20;  --bad-soft:rgba(201,59,43,.10);  --bad-line:rgba(201,59,43,.30);
  --info:#2F6BD8; --info-text:#24549F; --info-soft:rgba(47,107,216,.10); --info-line:rgba(47,107,216,.30);
  --neutral:#8A857A;

  /* charts */
  --ch-1:#17160F; --ch-2:#E07A1F; --ch-3:#8A857A; --ch-4:#2F6BD8; --ch-grid:#E9E6E0; --ch-area:.08;

  /* focus: ink ring on everything; accent ring only on .btn-primary and selected .opt */
  --focus:0 0 0 3px rgba(23,22,15,.18);
  --focus-accent:0 0 0 3px rgba(224,122,31,.35);

  /* type */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-11:11px; --fs-12:12px; --fs-125:12.5px; --fs-13:13px; --fs-135:13.5px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-28:28px;
  --lh-tight:1.2; --lh:1.45; --lh-loose:1.6;
  --ls-tight:-.02em; --ls-caps:.08em;

  /* spacing (4-base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* radii — the brand family. r-xs only for kbd, tooltips, checkboxes, sparkline masks */
  --r-xs:5px; --r-sm:9px; --r:12px; --r-lg:18px; --pill:999px;

  /* elevation — flat by default; shadow only on floating layers */
  --sh-1:0 1px 2px rgba(23,22,15,.06);                                   /* panels, tables */
  --sh-2:0 4px 14px rgba(23,22,15,.10),0 1px 2px rgba(23,22,15,.06);     /* menus, popovers, toasts */
  --sh-3:0 20px 48px rgba(23,22,15,.20);                                 /* modals, drawers */
  --scrim:rgba(23,22,15,.50);

  /* layout */
  --top-h:52px; --nav-w:232px; --rail-w:56px; --banner-h:0px;
  --content-max:1280px; --content-wide:1440px; --content-pad:32px;
  --tab-h:40px; --toolbar-h:40px;
  --row-h:44px; --row-h-dense:40px; --row-h-touch:48px; --th-h:36px;
  --ctl-lg:44px; --ctl-md:36px; --ctl-sm:30px; --input-h:36px;
  --modal-sm:420px; --modal-md:560px; --modal-lg:760px;
  --drawer-w:480px; --drawer-w-lg:640px; --palette-w:600px; --pop-w:360px; --menu-w:220px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:120ms; --t:180ms; --t-slow:240ms;

  /* z-index */
  --z-sticky:30; --z-nav:40; --z-drawer:50; --z-modal:60; --z-toast:70; --z-tip:80;

  color-scheme:light;
}

/* Dark theme. The block is duplicated once for data-theme="system" under the media query
   so the server-rendered first paint is correct with no inline script (CSP default-src 'self'). */
:root[data-theme="dark"]{
  --bg:#17160F; --bg-2:#211F17; --bg-3:#2A281E;
  --surface:#1F1D15; --surface-2:#252319;
  --line:#2F2C23; --line-2:#3C392E; --line-soft:#292619;
  --ink:#F2EDE4; --ink-2:#E6E0D3;
  --text:#F2EDE4; --text-2:#B9B3A6; --text-3:#8A857A; --text-4:#5F5B52;
  --on-ink:#17160F; --on-ink-2:#5F5B52;
  --accent:#E8863A; --accent-hover:#F09A46; --accent-ink:#F09A46;
  --accent-soft:rgba(232,134,58,.16); --accent-line:rgba(232,134,58,.40);
  --ok:#3DB874;   --ok-text:#6FD39A;   --ok-soft:rgba(61,184,116,.14);  --ok-line:rgba(61,184,116,.35);
  --warn:#E2B23A; --warn-text:#F0CA6A; --warn-soft:rgba(226,178,58,.16); --warn-line:rgba(226,178,58,.40);
  --bad:#E25A4A;  --bad-text:#F28B7F;  --bad-soft:rgba(226,90,74,.14);   --bad-line:rgba(226,90,74,.35);
  --info:#5A8FE6; --info-text:#8FB3F0; --info-soft:rgba(90,143,230,.14); --info-line:rgba(90,143,230,.35);
  --ch-1:#F2EDE4; --ch-2:#E8863A; --ch-3:#8A857A; --ch-4:#5A8FE6; --ch-grid:#2A2720; --ch-area:.12;
  --focus:0 0 0 3px rgba(242,237,228,.22); --focus-accent:0 0 0 3px rgba(232,134,58,.40);
  --sh-1:0 1px 2px rgba(0,0,0,.40); --sh-2:0 4px 14px rgba(0,0,0,.50); --sh-3:0 20px 48px rgba(0,0,0,.60);
  --scrim:rgba(0,0,0,.60);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{ /* identical to the dark block above — copy it verbatim, keep both in sync */
    --bg:#17160F; --bg-2:#211F17; --bg-3:#2A281E;
    --surface:#1F1D15; --surface-2:#252319;
    --line:#2F2C23; --line-2:#3C392E; --line-soft:#292619;
    --ink:#F2EDE4; --ink-2:#E6E0D3;
    --text:#F2EDE4; --text-2:#B9B3A6; --text-3:#8A857A; --text-4:#5F5B52;
    --on-ink:#17160F; --on-ink-2:#5F5B52;
    --accent:#E8863A; --accent-hover:#F09A46; --accent-ink:#F09A46;
    --accent-soft:rgba(232,134,58,.16); --accent-line:rgba(232,134,58,.40);
    --ok:#3DB874;   --ok-text:#6FD39A;   --ok-soft:rgba(61,184,116,.14);  --ok-line:rgba(61,184,116,.35);
    --warn:#E2B23A; --warn-text:#F0CA6A; --warn-soft:rgba(226,178,58,.16); --warn-line:rgba(226,178,58,.40);
    --bad:#E25A4A;  --bad-text:#F28B7F;  --bad-soft:rgba(226,90,74,.14);   --bad-line:rgba(226,90,74,.35);
    --info:#5A8FE6; --info-text:#8FB3F0; --info-soft:rgba(90,143,230,.14); --info-line:rgba(90,143,230,.35);
    --ch-1:#F2EDE4; --ch-2:#E8863A; --ch-3:#8A857A; --ch-4:#5A8FE6; --ch-grid:#2A2720; --ch-area:.12;
    --focus:0 0 0 3px rgba(242,237,228,.22); --focus-accent:0 0 0 3px rgba(232,134,58,.40);
    --sh-1:0 1px 2px rgba(0,0,0,.40); --sh-2:0 4px 14px rgba(0,0,0,.50); --sh-3:0 20px 48px rgba(0,0,0,.60);
    --scrim:rgba(0,0,0,.60);
    color-scheme:dark;
  }
}

/* A banner row, when the layout renders one, raises the sticky offsets of the top bar and nav (no inline style needed). */
:root:has(body > .banner){--banner-h:36px}

/* ============================================================
   2. base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-135)/var(--lh) var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
a{color:inherit;text-decoration:none}
a.link{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}a.link:hover{text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:var(--fs-22);font-weight:600;letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin:0}
h2{font-size:var(--fs-16);font-weight:600;letter-spacing:-.01em;line-height:var(--lh-tight);margin:0}   /* section title */
h3{font-size:var(--fs-14);font-weight:600;margin:0}                                                       /* panel title */
.kpi{font-size:var(--fs-28);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.kpi-sm{font-size:var(--fs-22);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.meta{font-size:var(--fs-13);color:var(--text-3)}
.eyebrow{font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3)}
.tnum,td.num,.money{font-variant-numeric:tabular-nums}
code,.mono{font-family:var(--mono);font-size:var(--fs-125)}
kbd{font:600 11px/1 var(--mono);padding:3px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--text-2)}
:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary:focus-visible,.opt.is-selected:focus-visible{box-shadow:var(--focus-accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Type usage map — nothing in the app is larger than 28px:
   11 eyebrow, kbd, kv label, count chips · 12 captions, crumbs(12.5), chip text, cell secondary line, hints(12.5)
   13 nav, meta, buttons-sm, table cells in dense tables · 13.5 body, table cells, inputs, menu items, tabs
   14 name cells, panel h3, inputs on desktop · 15 empty-state title · 16 section h2, modal title
   20 mobile h1, chart current value · 22 h1, customer KPI · 28 admin KPI */

/* base extras — things every page relies on; nobody redefines these in a page file */
[hidden]{display:none!important}
.sprite,body > svg[aria-hidden="true"]{display:none}
p{margin:0}
p + p{margin-top:8px}
hr{border:0;border-top:1px solid var(--line-soft);margin:16px 0}
ul,ol{margin:0;padding:0 0 0 20px}
strong,b{font-weight:600}
small{font-size:var(--fs-125)}
img,svg{vertical-align:middle}
svg.i{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
h1 + p,h2 + p,h3 + p{margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--text-3)}
.small{font-size:var(--fs-125)}
.ok-text{color:var(--ok-text)}.warn-text{color:var(--warn-text)}.bad-text{color:var(--bad-text)}.info-text{color:var(--info-text)}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-7{margin-top:28px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.ml-auto{margin-left:auto}
.w-full{width:100%}
.max-form{max-width:560px}
.max-text{max-width:64ch}
::selection{background:var(--accent-soft)}
::placeholder{color:var(--text-4);opacity:1}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--pill);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
[inert]{pointer-events:none;user-select:none}
.live.is-stale{opacity:.55}
.updated{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--text-3);white-space:nowrap}
.updated .iconbtn{width:24px;height:24px}

/* ============================================================
   3. shell — body grid, banner, top bar, nav (wide + rail), scrim, main, page header
   ============================================================ */
/* body = rows [banner][top bar][1fr]; the third row is columns [nav][content].
   Works with .nav and .main as direct children of body, or wrapped in .app (a full-width subgrid). */
body{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);min-height:100vh;min-height:100dvh;align-content:start}
body > .banner,body > .topbar,body > .app{grid-column:1/-1}
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:0}
.nav{grid-column:1}
.main{grid-column:2;min-width:0}
html[data-nav="rail"]{--nav-w:var(--rail-w)}

/* --- banners (row above the top bar; never overlay content) --- */
.banner{height:var(--banner-h);min-height:36px;display:flex;align-items:center;gap:12px;padding:0 16px;font-size:var(--fs-13);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden}
.banner > span,.banner > div{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.banner .btn-sm,.banner .iconbtn{flex:0 0 auto}
.banner.is-imp{background:var(--accent);color:#fff}
.banner.is-imp .btn{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.banner.is-imp .btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.banner.is-maint{background:var(--ink);color:var(--on-ink)}
.banner.is-maint .iconbtn{color:var(--on-ink)}
.banner.is-maint .iconbtn:hover{background:rgba(255,255,255,.12)}
.banner.is-susp{background:var(--bad-soft);color:var(--bad-text);border-bottom:1px solid var(--bad-line)}
.banner .link{text-decoration-color:currentColor}

/* --- top bar --- */
.topbar{position:sticky;top:var(--banner-h);z-index:var(--z-nav);height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar.is-admin,html[data-scope="admin"] .topbar{border-bottom:2px solid var(--accent)}
.topbar #burger{display:none}
.brand{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 4px;border-radius:var(--r-sm);color:var(--ink);flex:0 0 auto}
.brand svg{width:22px;height:22px;flex:0 0 auto}
.brand b,.brand span{font-size:var(--fs-13);font-weight:700;letter-spacing:.10em;text-transform:uppercase;line-height:1}
.brand:focus-visible{box-shadow:var(--focus)}
.topbar .seg.scope{margin-left:4px}
.topbar .seg.scope .is-on{background:var(--ink);color:var(--on-ink);box-shadow:none}
.gsearch{flex:0 1 380px;min-width:0;margin-left:8px;height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--text-3);font-size:var(--fs-13);cursor:text;text-align:left;transition:border-color var(--t-fast),background var(--t-fast)}
.gsearch:hover{border-color:var(--line-2)}
.gsearch svg{width:16px;height:16px;flex:0 0 auto}
.gsearch span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsearch kbd{flex:0 0 auto;padding:2px 5px;border-bottom-width:1px;color:var(--text-3);background:var(--surface)}
.topbar .spacer{flex:1 1 auto}
.topbar-right{display:flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto}
.topbar-right .iconbtn{width:36px;height:36px}
.topbar-right .iconbtn svg{width:20px;height:20px}
.topbar-right #search-btn,.topbar-right .iconbtn.search-m{display:none}
.iconbtn.has-unread{position:relative}
.iconbtn.has-unread::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:var(--fs-11);font-weight:600;letter-spacing:.02em;text-transform:uppercase;flex:0 0 auto;user-select:none}
.avatar.avatar-lg{width:32px;height:32px;font-size:var(--fs-12)}
.topbar .avatar-btn,.topbar button.avatar-wrap{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 4px 0 4px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;color:var(--text-3)}
.topbar .avatar-btn:hover,.topbar button.avatar-wrap:hover{background:var(--bg-2)}
.topbar .avatar-btn svg{width:14px;height:14px}

/* --- left nav --- */
.nav{position:sticky;top:calc(var(--banner-h) + var(--top-h));height:calc(100vh - var(--banner-h) - var(--top-h));height:calc(100dvh - var(--banner-h) - var(--top-h));overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;display:flex;flex-direction:column;padding:12px 10px;background:var(--surface);border-right:1px solid var(--line);width:var(--nav-w);z-index:var(--z-sticky)}
.nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-135);font-weight:500;color:var(--text-2);white-space:nowrap;flex:0 0 auto;transition:background var(--t-fast),color var(--t-fast)}
.nav a svg{width:18px;height:18px;flex:0 0 auto;opacity:.8;stroke-width:1.75}
.nav a > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--bg-2)}
.nav a.is-active{background:var(--bg-2);color:var(--text);font-weight:600}
.nav a.is-active svg{opacity:1}
.nav a.is-disabled,.nav a[aria-disabled="true"]{color:var(--text-3);cursor:default;pointer-events:none}
.nav a.is-disabled svg,.nav a[aria-disabled="true"] svg{opacity:.5}
.nav a + a{margin-top:2px}
.nav .count{margin-left:auto;font-size:var(--fs-11);font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.nav .tag{margin-left:auto}
.nav h6{margin:16px 10px 6px;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);white-space:nowrap;flex:0 0 auto}
.nav .seg{margin:0 0 10px}
.nav .seg.scope{display:none}

/* nav footer: pinned to the bottom, credit widget (customer) or cluster line (admin) */
.nav-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line);display:grid;gap:8px;flex:0 0 auto}
.nav-foot a{height:auto;padding:0;border-radius:0;font-size:var(--fs-12);font-weight:500;color:var(--text-3)}
.nav-foot a:hover{background:transparent;color:var(--text)}
.nav-foot a.nav-settings{height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-135);color:var(--text-2);margin:0 -10px 4px}
.nav-foot a.nav-settings:hover,.nav-foot a.nav-settings.is-active{background:var(--bg-2);color:var(--text)}
.nav-foot a.nav-settings.is-active{font-weight:600}
.nav-foot .links{display:flex;gap:12px;flex-wrap:wrap}
.nav-foot .links a{display:inline-flex;align-items:center;gap:4px}
.nav-foot .links a svg{width:12px;height:12px;opacity:.8}
.credit{display:block;padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm);color:var(--text)}
.credit:hover{background:var(--bg-2)}
.credit .label{display:block;font-size:var(--fs-11);color:var(--text-3);font-weight:500}
.credit .amount{display:block;font-size:var(--fs-15);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;margin-top:2px}
.credit .days{display:block;font-size:var(--fs-12);color:var(--text-3);line-height:1.3}
.credit .bar{height:4px;margin-top:8px}
.credit.is-warn .days,.credit.is-warn .amount{color:var(--warn-text)}
.credit.is-bad .days,.credit.is-bad .amount{color:var(--bad-text)}
.credit.is-bad .bar i{background:var(--bad)}
.credit .link{font-size:var(--fs-12);text-decoration-color:currentColor}
.cluster{display:flex;align-items:center;gap:6px;font:500 var(--fs-11)/1.3 var(--mono);color:var(--text-3);white-space:nowrap}
.cluster .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.cluster .dot.is-bad{background:var(--bad)}
#nav-rail{width:32px;height:32px;margin:4px 0 0 auto;color:var(--text-3)}
#nav-rail svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}

/* rail mode (user pinned, or auto between 960 and 1099px when nothing is pinned) */
html[data-nav="rail"] .nav{padding:12px 8px;overflow:visible}
html[data-nav="rail"] .nav a{justify-content:center;padding:0;width:40px;height:40px;margin:0 auto}
html[data-nav="rail"] .nav a > span,html[data-nav="rail"] .nav .count,html[data-nav="rail"] .nav a .tag{display:none}
html[data-nav="rail"] .nav a svg{width:20px;height:20px}
html[data-nav="rail"] .nav h6{height:1px;margin:10px 4px;padding:0;font-size:0;background:var(--line);overflow:hidden}
html[data-nav="rail"] .nav-foot{padding:12px 0 0;justify-items:center}
html[data-nav="rail"] .nav-foot .links,html[data-nav="rail"] .credit .label,html[data-nav="rail"] .credit .amount,html[data-nav="rail"] .credit .days,html[data-nav="rail"] .credit .bar,html[data-nav="rail"] .credit .link,html[data-nav="rail"] .cluster span{display:none}
html[data-nav="rail"] .credit{width:36px;height:36px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-13);font-weight:600;border-radius:var(--pill);border:1px solid var(--line)}
html[data-nav="rail"] .credit::before{content:"\20AC"}
html[data-nav="rail"] .credit.is-warn{color:var(--warn-text)}
html[data-nav="rail"] .credit.is-bad{color:var(--bad-text);border-color:var(--bad-line)}
html[data-nav="rail"] .cluster{width:36px;height:36px;justify-content:center;border:1px solid var(--line);border-radius:var(--pill)}
html[data-nav="rail"] .nav-foot a.nav-settings{width:40px;height:40px;padding:0;margin:0;justify-content:center}
html[data-nav="rail"] #nav-rail{margin:4px auto 0}
html[data-nav="rail"] #nav-rail svg{transform:rotate(180deg)}
@media (min-width:960px) and (max-width:1099px){
  html:not([data-nav="wide"]){--nav-w:var(--rail-w)}
  html:not([data-nav="wide"]) .nav{padding:12px 8px;overflow:visible}
  html:not([data-nav="wide"]) .nav a{justify-content:center;padding:0;width:40px;height:40px;margin:0 auto}
  html:not([data-nav="wide"]) .nav a > span,html:not([data-nav="wide"]) .nav .count,html:not([data-nav="wide"]) .nav a .tag{display:none}
  html:not([data-nav="wide"]) .nav a svg{width:20px;height:20px}
  html:not([data-nav="wide"]) .nav h6{height:1px;margin:10px 4px;padding:0;font-size:0;background:var(--line);overflow:hidden}
  html:not([data-nav="wide"]) .nav-foot{padding:12px 0 0;justify-items:center}
  html:not([data-nav="wide"]) .nav-foot .links,html:not([data-nav="wide"]) .credit .label,html:not([data-nav="wide"]) .credit .amount,html:not([data-nav="wide"]) .credit .days,html:not([data-nav="wide"]) .credit .bar,html:not([data-nav="wide"]) .credit .link,html:not([data-nav="wide"]) .cluster span{display:none}
  html:not([data-nav="wide"]) .credit{width:36px;height:36px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-13);font-weight:600;border-radius:var(--pill);border:1px solid var(--line)}
  html:not([data-nav="wide"]) .credit::before{content:"\20AC"}
  html:not([data-nav="wide"]) .cluster{width:36px;height:36px;justify-content:center;border:1px solid var(--line);border-radius:var(--pill)}
  html:not([data-nav="wide"]) .nav-foot a.nav-settings{width:40px;height:40px;padding:0;margin:0;justify-content:center}
  html:not([data-nav="wide"]) #nav-rail{margin:4px auto 0}
  html:not([data-nav="wide"]) #nav-rail svg{transform:rotate(180deg)}
}

/* scrim behind the off-canvas nav and drawers */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:calc(var(--z-drawer) - 1);opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.scrim.is-open{opacity:1;pointer-events:auto}

/* --- content --- */
.main{padding:24px var(--content-pad) 64px;width:100%;max-width:calc(var(--content-max) + 2 * var(--content-pad));margin:0 auto;min-height:calc(100vh - var(--banner-h) - var(--top-h))}
.main.wide{max-width:calc(var(--content-wide) + 2 * var(--content-pad))}
.main > * + *{margin-top:28px}
.main > .ph + *{margin-top:0}
.main > .notice + .notice{margin-top:8px}
.main > .notice + *:not(.notice){margin-top:20px}
.main > .tbl-toolbar + .tblwrap,.main > .tbl-toolbar + .bulkbar,.main > .bulkbar + .tblwrap{margin-top:0}

/* --- page header: crumbs → title row → subtitle → tabs --- */
.ph{margin-bottom:20px}
.crumbs{display:flex;align-items:center;gap:0;height:20px;margin-bottom:6px;font-size:var(--fs-125);color:var(--text-3);white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.crumbs > * + *::before{content:"/";margin:0 8px;color:var(--text-4)}
.crumbs > .sep{display:none}
.crumbs .back{display:none;align-items:center;gap:4px;font-size:var(--fs-13);color:var(--text-2)}
.crumbs .back svg{width:14px;height:14px}
.ph-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:36px}
.ph-row h1{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.ph-row h1 .trunc{max-width:48vw}
.ph-row h1 .st{font-size:var(--fs-125);margin-left:2px}
.ph-row h1 .st-box{margin-left:2px}
.ph-row h1 .tag{margin-left:2px}
.ph-row h1 .iconbtn{color:var(--text-3)}
.ph-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;flex-wrap:wrap}
.ph-sub{margin-top:4px;font-size:var(--fs-13);color:var(--text-3);display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;line-height:1.5}
.ph-sub .mono,.ph-sub code{color:var(--text-2)}
.ph-sub .copy{width:24px;height:24px;margin-left:-2px}
.ph-sub .sep::before,.ph-sub > span + span::before{content:"\00B7";margin:0 4px;color:var(--text-4)}
.ph-sub > span + span.no-sep::before{content:none;margin:0}
.ph .tabs{margin-top:16px}
/* sticky resource header (server, customer, ticket): title row + tabs stay under the top bar */
.ph.is-sticky,.ph[data-sticky]{position:sticky;top:calc(var(--banner-h) + var(--top-h));z-index:var(--z-sticky);background:var(--bg);margin:-24px calc(-1 * var(--content-pad)) 20px;padding:12px var(--content-pad) 0;box-shadow:inset 0 -1px var(--line)}
.ph.is-sticky .crumbs,.ph[data-sticky] .crumbs{height:16px;margin-bottom:4px}
.ph.is-sticky .tabs,.ph[data-sticky] .tabs{border-bottom:0;margin-top:10px}
/* while a long task runs: 2px indeterminate bar under the sticky header */
.ph.is-sticky.is-busy::after,.ph.is-busy::after{content:"";display:block;height:2px;margin:0 calc(-1 * var(--content-pad));background:linear-gradient(90deg,transparent 0,var(--accent) 40%,var(--accent) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:indet 1.4s var(--ease) infinite}
@keyframes indet{0%{background-position:-40% 0}100%{background-position:140% 0}}

/* ============================================================
   4. buttons — pills, one primary per view, no transform ever
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-md);padding:0 16px;border:1px solid transparent;border-radius:var(--pill);background:transparent;color:var(--text);font-size:var(--fs-135);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-sm{height:var(--ctl-sm);padding:0 12px;font-size:var(--fs-13);gap:6px}
.btn-sm svg{width:14px;height:14px}
.btn-lg{height:var(--ctl-lg);padding:0 22px;font-size:var(--fs-14)}
.btn-lg svg{width:18px;height:18px}
.btn-block{width:100%}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-line:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-2);color:var(--text)}
.btn-danger{background:var(--surface);border-color:var(--line);color:var(--bad-text)}
.btn-danger:hover{background:var(--bad-soft);border-color:var(--bad-line)}
.btn-danger-solid{background:var(--bad);color:#fff}
.btn-danger-solid:hover{background:var(--bad-text)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.btn[aria-disabled="true"]{pointer-events:auto}
.btn[aria-disabled="true"]:hover{background:inherit}
.btn-line[aria-disabled="true"]:hover{background:var(--surface);border-color:var(--line)}
.btn-primary[aria-disabled="true"]:hover{background:var(--accent)}
.btn .count,.btn .kbd{margin-left:2px;font-size:var(--fs-11);color:inherit;opacity:.7}
.btn kbd{margin-left:4px;margin-right:-6px;opacity:.8}
.btn-ink kbd,.btn-primary kbd{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:inherit}
/* working state: label kept, spinner prepended, width locked by JS (min-width), no clicks */
.btn[aria-busy="true"],.iconbtn[aria-busy="true"]{pointer-events:none;position:relative}
.btn[aria-busy="true"] > svg:first-child{display:none}
.btn[aria-busy="true"]::before,.iconbtn[aria-busy="true"]::before{content:"";width:14px;height:14px;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.iconbtn[aria-busy="true"] > svg{display:none}
.btn-sm[aria-busy="true"]::before{width:12px;height:12px}
@keyframes spin{to{transform:rotate(360deg)}}
/* icon-only */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-md);height:var(--ctl-md);padding:0;border:1px solid transparent;border-radius:var(--pill);background:transparent;color:var(--text-2);cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast),color var(--t-fast)}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{background:var(--bg-2);color:var(--text)}
.iconbtn.btn-sm{width:var(--ctl-sm);height:var(--ctl-sm)}
.iconbtn.btn-sm svg{width:16px;height:16px}
.iconbtn.btn-lg{width:var(--ctl-lg);height:var(--ctl-lg)}
.iconbtn.btn-lg svg{width:20px;height:20px}
.iconbtn.btn-line{background:var(--surface);border-color:var(--line)}
.iconbtn.btn-line:hover{border-color:var(--line-2);background:var(--surface-2)}
.iconbtn.btn-ink{background:var(--ink);color:var(--on-ink)}
.iconbtn.btn-ink:hover{background:var(--ink-2)}
.iconbtn:disabled,.iconbtn[aria-disabled="true"]{opacity:.45;cursor:default}
.iconbtn:disabled:hover{background:transparent}
.iconbtn[aria-expanded="true"]{background:var(--bg-2);color:var(--text)}
.iconbtn.is-ok{color:var(--ok)}
/* split button: main segment + 32px chevron sharing one pill */
.split{display:inline-flex;align-items:stretch;flex:0 0 auto}
.split > .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:14px}
.split > .btn.split-chev{border-top-left-radius:0;border-bottom-left-radius:0;width:32px;padding:0;margin-left:-1px;border-left-color:var(--line)}
.split > .btn.split-chev svg{width:14px;height:14px}
.split > .btn-ink + .btn-ink.split-chev,.split > .btn-primary + .btn-primary.split-chev{box-shadow:inset 1px 0 rgba(255,255,255,.2);border-left-color:transparent}
.split > .btn-line + .btn-line.split-chev{border-left-color:var(--line)}
.split > .btn-line + .btn-line.split-chev:hover{border-left-color:var(--line-2)}
.split > .btn-sm.split-chev{width:28px}
/* segmented control */
.seg{display:inline-flex;align-items:center;gap:0;height:var(--ctl-sm);padding:2px;border-radius:var(--pill);background:var(--bg-2);flex:0 0 auto;max-width:100%}
.seg > a,.seg > button,.seg > label{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:100%;padding:0 12px;border:0;border-radius:var(--pill);background:transparent;color:var(--text-2);font-size:var(--fs-13);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.seg > a:hover,.seg > button:hover,.seg > label:hover{color:var(--text)}
.seg > .is-on,.seg > label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.seg > label input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg > [disabled],.seg > [aria-disabled="true"],.seg > .is-disabled{opacity:.45;cursor:default;pointer-events:none}
.seg > * .tag{margin-left:2px}
.seg svg{width:14px;height:14px}
.seg.seg-lg{height:var(--ctl-md)}
.seg.seg-block{display:flex}
.seg.seg-block > *{flex:1 1 0}
.seg > a:focus-visible,.seg > button:focus-visible,.seg > label:focus-within{box-shadow:var(--focus);z-index:1}
/* button groups */
.btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btns.end{justify-content:flex-end}

/* ============================================================
   5. forms
   ============================================================ */
form{margin:0}
.f{display:grid;gap:6px;font-size:var(--fs-13);font-weight:600;color:var(--text-2);align-content:start;min-width:0}
.f > span:first-child,.f > .lbl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.f > .lbl .link,.f > span:first-child a{font-size:var(--fs-125);font-weight:500;color:var(--text-3)}
.f .opt-mark{font-weight:400;color:var(--text-3)}
.f.is-inline{grid-template-columns:auto 1fr;align-items:center;gap:10px}
.in{display:block;width:100%;height:var(--input-h);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:var(--fs-14);font-weight:400;line-height:1.3;outline:none;-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.in:hover{border-color:var(--line-2)}
.in:focus,.in:focus-visible{border-color:var(--ink);box-shadow:var(--focus)}
.in:user-invalid:not(:focus),.in[aria-invalid="true"],.in.is-invalid{border-color:var(--bad)}
.in[aria-invalid="true"]:focus,.in.is-invalid:focus{box-shadow:0 0 0 3px var(--bad-soft)}
.in:read-only:not(select),.in[readonly]{background:var(--bg);color:var(--text-2);cursor:text}
.in:disabled{background:var(--bg);color:var(--text-3);opacity:.7;cursor:default}
.in::placeholder{color:var(--text-4)}
.in.in-sm{height:32px;font-size:var(--fs-13);padding:0 10px}
.in.in-lg{height:var(--ctl-lg);padding:0 14px}
.in.in-pill{border-radius:var(--pill)}
.in.mono,.in.in-mono{font-family:var(--mono);font-size:var(--fs-125)}
.in.w-short{width:200px;max-width:100%}
.in.w-num,.in[type="number"]{width:140px;max-width:100%;text-align:right;font-variant-numeric:tabular-nums}
.in[type="number"].w-full{width:100%}
.in[type="number"]::-webkit-inner-spin-button,.in[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.in[type="number"]{-moz-appearance:textfield}
.in[type="search"]::-webkit-search-decoration,.in[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
textarea.in{height:auto;min-height:96px;padding:10px 12px;line-height:var(--lh);resize:vertical}
textarea.in.mono{font-size:var(--fs-125);line-height:1.5}
textarea.in.in-tall{min-height:160px}
select.in{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%238A857A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;cursor:pointer}
select.in.in-sm{padding-right:30px;background-position:right 8px center;background-size:14px}
select.in.w-auto{width:auto;display:inline-block}
select.in:read-only{background-color:var(--surface);color:var(--text)}
.hint{font-size:var(--fs-125);font-weight:400;color:var(--text-3);line-height:1.45}
.hint code{font-size:var(--fs-12)}
.err{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-125);font-weight:500;color:var(--bad-text);line-height:1.4}
.err svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.f:has(.err) .hint{display:none}
.f:has(.err) .in{border-color:var(--bad)}
/* prefix / suffix */
.in-group{position:relative;display:flex;align-items:center;width:100%;min-width:0}
.in-group > i,.in-group > .affix{position:absolute;top:0;bottom:0;display:inline-flex;align-items:center;padding:0 12px;font-size:var(--fs-125);font-style:normal;color:var(--text-3);pointer-events:none;white-space:nowrap}
.in-group > i:first-child,.in-group > .affix:first-child{left:0}
.in-group > i:last-child,.in-group > .affix:last-child{right:0}
.in-group > i:first-child + .in,.in-group > .affix:first-child + .in{padding-left:30px}
.in-group > .in:has(+ i),.in-group > .in:has(+ .affix){padding-right:44px}
.in-group > svg{position:absolute;left:10px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.in-group > svg + .in{padding-left:32px}
.in-group > .iconbtn{position:absolute;right:3px;top:50%;transform:translateY(-50%);color:var(--text-3)}
.in-group > .in:has(+ .iconbtn){padding-right:40px}
.in-group .in{width:100%}
/* checkbox / radio */
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;margin:0;accent-color:var(--ink);flex:0 0 auto;cursor:pointer;vertical-align:-3px}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{cursor:default;opacity:.5}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-135);font-weight:400;color:var(--text);cursor:pointer;line-height:1.4}
.check input{margin-top:2px}
.check .hint{display:block}
.check.is-disabled{color:var(--text-3);cursor:default}
/* checkbox / radio rows (keys, firewall groups, plan rows) */
.checkrow{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.checkrow:last-child{border-bottom:0}
.checkrow > div{flex:1 1 auto;min-width:0}
.checkrow .name{font-size:var(--fs-135);font-weight:500}
.checkrow .desc{font-size:var(--fs-12);color:var(--text-3)}
.checkrow .mono{margin-left:auto;color:var(--text-3);flex:0 0 auto}
.checkrow.is-disabled{cursor:default;color:var(--text-3)}
/* switch: 36x20, knob 16, on = ink (never orange) */
.sw{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-135);font-weight:400;color:var(--text);cursor:pointer;vertical-align:middle}
.sw input{position:absolute;opacity:0;width:0;height:0;margin:0}
.sw i{position:relative;display:inline-block;width:36px;height:20px;border-radius:var(--pill);background:var(--bg-3);flex:0 0 auto;transition:background var(--t) var(--ease)}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(23,22,15,.25);transition:transform var(--t) var(--ease)}
.sw input:checked + i{background:var(--ink)}
.sw input:checked + i::after{transform:translateX(16px)}
.sw input:focus-visible + i{box-shadow:var(--focus)}
.sw input:disabled + i{opacity:.45}
.sw input:disabled ~ *{color:var(--text-3)}
.sw:has(input:disabled){cursor:default}
.sw .tag{margin-left:-4px}
/* option tile */
.opt{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:400;min-width:0;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.opt:hover{border-color:var(--line-2)}
.opt input[type="radio"],.opt input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;margin:0}
.opt .name,.opt b{font-size:var(--fs-135);font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.opt .name svg,.opt b svg{width:18px;height:18px;color:var(--text-2)}
.opt .desc,.opt .meta{font-size:var(--fs-125);color:var(--text-3)}
.opt .price{font-size:var(--fs-135);font-weight:600;font-variant-numeric:tabular-nums;margin-top:auto}
.opt select.in{margin-top:6px;height:30px;font-size:var(--fs-13);padding:0 28px 0 10px;background-position:right 8px center;background-size:14px}
.opt.is-selected,.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.is-selected::after,.opt:has(input:checked)::after{content:"";position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
:root[data-theme="dark"] .opt.is-selected::after,:root[data-theme="dark"] .opt:has(input:checked)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317160F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .opt.is-selected::after,:root[data-theme="system"] .opt:has(input:checked)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317160F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}}
.opt.is-selected:focus-within,.opt:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--ink),var(--focus-accent)}
.opt:has(input:focus-visible):not(.is-selected):not(:has(input:checked)){box-shadow:var(--focus)}
.opt.is-disabled,.opt:has(input:disabled){opacity:.5;cursor:default;pointer-events:none}
.opt .tag{position:absolute;top:10px;right:10px}
.opt.is-selected .tag,.opt:has(input:checked) .tag{right:32px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.opts .opt{min-height:76px}
.opts-amount{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.opts-amount .opt{align-items:center;justify-content:center;min-height:56px}
/* copy row and inline copy button */
.copyrow{position:relative;display:flex;align-items:center;width:100%}
.copyrow .in{padding-right:88px;font-family:var(--mono);font-size:var(--fs-125);text-overflow:ellipsis}
.copyrow .copy{position:absolute;right:3px;top:50%;transform:translateY(-50%);height:30px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--pill);background:transparent;color:var(--text-2);font-size:var(--fs-125);font-weight:600;cursor:pointer;white-space:nowrap}
.copyrow .copy:hover{background:var(--bg-2);color:var(--text)}
.copyrow .copy svg{width:14px;height:14px}
.copyrow .copy.is-copied{color:var(--ok-text)}
.copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:24px;height:24px;padding:0;border:0;border-radius:var(--pill);background:transparent;color:var(--text-3);cursor:pointer;vertical-align:middle;flex:0 0 auto;transition:background var(--t-fast),color var(--t-fast)}
.copy svg{width:14px;height:14px}
.copy:hover{background:var(--bg-2);color:var(--text)}
.copy.is-copied,.copy.is-copied:hover{color:var(--ok)}
.copy[data-label],.copy.btn{width:auto;height:30px;padding:0 10px;font-size:var(--fs-125);font-weight:600;color:var(--text-2)}
.copy .copied{display:none}
.copy.is-copied .copied{display:inline}
.copy.is-copied .idle{display:none}
/* credential sheet (one-time secrets) */
.cred{display:grid;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);overflow:hidden}
.cred > header,.cred > .cred-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-125);color:var(--text-3)}
.cred > div{display:grid;grid-template-columns:100px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-bottom:1px solid var(--line-soft)}
.cred > div:last-child{border-bottom:0}
.cred > div > span:first-child{font-size:var(--fs-12);font-weight:500;color:var(--text-3)}
.cred code,.cred .val{font-family:var(--mono);font-size:var(--fs-13);color:var(--text);overflow-wrap:anywhere;user-select:all;display:flex;align-items:center;gap:8px;min-width:0}
.cred code .btn-sm,.cred .val .btn-sm{margin-left:auto;flex:0 0 auto;user-select:none}
.cred .copy{width:28px;height:28px;justify-self:end}
.cred .masked{letter-spacing:.15em}
.cred + .btns,.cred + .hint{margin-top:12px}
/* grids of fields */
.fields{display:grid;gap:16px;max-width:560px;align-items:start}
.fields.fields-wide{max-width:none}
.fields-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.fields > .fields-2{grid-column:1/-1}
.fields .full{grid-column:1/-1}
.fieldset{border:0;padding:0;margin:0;min-width:0}
.fieldset > legend{padding:0;margin:0 0 8px;font-size:var(--fs-13);font-weight:600;color:var(--text-2)}
.form-actions{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.form-actions.end{justify-content:flex-end}
/* dirty-form footer: appears only when JS marks the form dirty */
.sticky-save{position:sticky;bottom:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:8px;margin:24px calc(-1 * var(--content-pad)) calc(-1 * 64px);padding:12px var(--content-pad);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(23,22,15,.06)}
.sticky-save > span{font-size:var(--fs-13);color:var(--text-2);flex:1 1 auto}
.sticky-save .btn-primary{order:3}
.sticky-save .btn-ghost{order:2}
.sticky-save[hidden]{display:none}
/* password strength: 4 segments */
.strength{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:4px;margin-top:2px}
.strength i{display:block;border-radius:var(--pill);background:var(--bg-3)}
.strength[data-score="1"] i:nth-child(-n+1){background:var(--bad)}
.strength[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.strength[data-score="3"] i:nth-child(-n+3){background:var(--ok)}
.strength[data-score="4"] i{background:var(--ok)}
/* live parse of a public key, name check result */
.parse{display:flex;align-items:center;gap:8px;font-size:var(--fs-125);color:var(--text-3);min-height:20px}
.parse.is-ok{color:var(--ok-text)}
.parse.is-bad{color:var(--bad-text)}
.parse svg{width:14px;height:14px}

/* ============================================================
   6. chips — lifecycle .st (dot, no bg), document .st-box (soft bg), neutral .tag
   ============================================================ */
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-125);font-weight:600;color:var(--text-2);white-space:nowrap;line-height:1.2;vertical-align:middle}
.st i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-4);flex:0 0 auto}
.st svg{width:12px;height:12px;flex:0 0 auto}
.st-running i{background:var(--ok)}
.st-stopped{color:var(--text-3)}
.st-stopped i{background:var(--text-4)}
.st-creating i,.st-starting i,.st-stopping i,.st-rebooting i,.st-resizing i,.st-migrating i,.st-restoring i,.st-backing-up i,.st-reinstalling i,.st-pending i,.st-queued i,.st-running-task i{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.st-error i,.st-failed i{background:var(--bad)}
.st-error,.st-failed{color:var(--bad-text)}
.st-suspended,.st-locked{color:var(--bad-text)}
.st-suspended i,.st-locked i{width:12px;height:12px;border-radius:0;background:var(--bad-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.st-rescue i{background:var(--info)}
.st-rescue{color:var(--info-text)}
.st-missing,.st-unknown,.st-deleted{color:var(--text-3)}
.st-missing i,.st-unknown i,.st-deleted i{background:transparent;border:1.5px solid var(--text-3)}
.st-online i,.st-ok i,.st-done i{background:var(--ok)}
.st-offline i,.st-down i{background:var(--bad)}
.st-maintenance i,.st-degraded i{background:var(--warn)}
.st-sm{font-size:var(--fs-12)}
/* document / record states */
.st-box{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--pill);font-size:var(--fs-12);font-weight:600;line-height:1;white-space:nowrap;background:var(--bg-2);color:var(--text-2);vertical-align:middle}
.st-box.is-ok{background:var(--ok-soft);color:var(--ok-text)}
.st-box.is-warn{background:var(--warn-soft);color:var(--warn-text)}
.st-box.is-bad{background:var(--bad-soft);color:var(--bad-text)}
.st-box.is-info{background:var(--info-soft);color:var(--info-text)}
.st-box.is-neutral{background:var(--bg-2);color:var(--text-2)}
.st-box svg{width:12px;height:12px}
/* neutral tag */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:var(--pill);background:var(--bg-2);color:var(--text-2);font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.tag.is-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-text)}
.tag.is-bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-text)}
.tag.is-ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok-text)}
.tag.is-info{background:var(--info-soft);border-color:var(--info-line);color:var(--info-text)}
.tag svg{width:12px;height:12px}
.tag.is-x{padding-right:2px;height:24px;font-weight:500}
.tag .x,.tag button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:var(--text-3);cursor:pointer;padding:0;margin-left:2px}
.tag .x:hover,.tag button:hover{background:var(--bg-3);color:var(--text)}
.tag .x svg,.tag button svg{width:11px;height:11px}
.tags{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-4);vertical-align:middle}
.dot.is-ok{background:var(--ok)}.dot.is-bad{background:var(--bad)}.dot.is-warn{background:var(--warn)}.dot.is-info{background:var(--info)}

/* ============================================================
   7. tables — the primary surface of the product
   ============================================================ */
/* overflow:clip (not hidden) keeps the rounded corners without creating a scroll container, so sticky <th> still works;
   tables declared data-mobile="scroll" (wide admin lists) get a real horizontal scroller instead */
.tblwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:clip;overflow:hidden;overflow:clip}
.tblwrap:has(> .tbl[data-mobile="scroll"]),.tblwrap.is-scroll,.tblwrap .scroll,.tblwrap > .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap:has(> .tbl[data-mobile="scroll"]) thead th,.tblwrap.is-scroll thead th{top:0}
.panel > .tblwrap{border:0;border-radius:0;box-shadow:none}
.tbl{width:100%;border-collapse:collapse;border-spacing:0;font-size:var(--fs-135);table-layout:auto}
.tbl caption{text-align:left;padding:12px 16px;font-size:var(--fs-13);color:var(--text-3)}
.tbl thead th{height:var(--th-h);padding:0 12px;text-align:left;font-size:var(--fs-12);font-weight:500;color:var(--text-2);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;position:sticky;top:calc(var(--banner-h) + var(--top-h));z-index:2}
.tbl thead th:first-child{padding-left:16px}
.tbl thead th:last-child{padding-right:16px}
.tbl thead th.num,.tbl thead th[data-align="right"]{text-align:right}
.tbl thead th[data-sort]{cursor:pointer;user-select:none}
.tbl thead th[data-sort] > span,.tbl thead th[data-sort] > a{display:inline-flex;align-items:center;gap:4px;color:inherit}
.tbl thead th[data-sort]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-2px;opacity:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;transition:opacity var(--t-fast),transform var(--t-fast)}
.tbl thead th[data-sort]:hover::after{opacity:.5}
.tbl thead th[data-sort][aria-sort="ascending"]::after,.tbl thead th[data-sort][aria-sort="descending"]::after,.tbl thead th[data-sort].is-asc::after,.tbl thead th[data-sort].is-desc::after{opacity:1;color:var(--text)}
.tbl thead th[data-sort][aria-sort="descending"]::after,.tbl thead th[data-sort].is-desc::after{transform:rotate(180deg)}
.tbl thead th[data-sort][aria-sort]{color:var(--text)}
.tbl thead th.c-check,.tbl tbody td.c-check{width:40px;padding:0 0 0 16px}
.tbl tbody td{height:var(--row-h);padding:0 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap;line-height:1.35}
.tbl tbody td:first-child{padding-left:16px}
.tbl tbody td:last-child{padding-right:16px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tbody tr.is-selected td,.tbl tbody tr:has(> td.c-check input:checked) td{background:var(--accent-soft)}
.tbl tbody tr.is-selected td:first-child,.tbl tbody tr:has(> td.c-check input:checked) td:first-child{box-shadow:inset 3px 0 var(--accent)}
.tbl tbody tr[data-href]{cursor:pointer}
.tbl tbody tr.is-focus td{background:var(--bg-2)}
.tbl tbody tr.is-focus td:first-child{box-shadow:inset 3px 0 var(--ink)}
.tbl tbody tr.is-muted td,.tbl tbody tr.is-disabled td{color:var(--text-3)}
.tbl tbody tr.is-disabled .iconbtn{opacity:.45;pointer-events:none}
.tbl tbody tr.is-failed td:first-child{box-shadow:inset 3px 0 var(--bad)}
.tbl tbody tr.is-total td{font-weight:600;border-top:1px solid var(--line);background:var(--surface-2)}
.tbl.dense tbody td,.tbl[data-density="dense"] tbody td,.main.wide .tbl tbody td{height:var(--row-h-dense);font-size:var(--fs-13)}
.tbl.dense .c-name a,.main.wide .tbl .c-name a{font-size:var(--fs-135)}
.tbl.tbl-flat{font-size:var(--fs-13)}
/* cell types */
.tbl .c-name{max-width:320px;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.tbl .c-name a,.tbl .c-name > b{font-size:var(--fs-14);font-weight:600;color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .c-name a:hover{text-decoration:underline;text-underline-offset:2px}
.tbl .c-name small,.tbl .c-name .sub,.tbl td .sub{display:block;font-size:var(--fs-12);font-weight:400;color:var(--text-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .c-name .avatar{float:left;margin:2px 10px 0 0}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.num .sub{text-align:right}
.tbl td.mono,.tbl td .mono,.tbl td code{font-family:var(--mono);font-size:var(--fs-125)}
.tbl td.c-meta{color:var(--text-3)}
.tbl td.c-chip{white-space:nowrap}
.tbl td.c-time{color:var(--text-2);font-variant-numeric:tabular-nums}
.tbl td.c-wrap{white-space:normal;min-width:200px}
.tbl td .copy{opacity:0;margin-left:2px;transition:opacity var(--t-fast)}
.tbl tr:hover td .copy,.tbl td .copy:focus-visible,.tbl td .copy.is-copied{opacity:1}
.tbl td .ok-text{color:var(--ok-text)}
.tbl td .bad-text{color:var(--bad-text)}
.tbl td .st{vertical-align:middle}
.tbl td .spark{display:inline-block;width:80px;height:24px;vertical-align:middle;margin-right:8px}
.tbl td .bar{display:inline-block;width:72px;vertical-align:middle;margin:0 0 0 10px}
.tbl td .bar + span,.tbl td span + .bar{margin-left:10px}
.tbl td .bar + span{font-variant-numeric:tabular-nums}
/* actions column: hover-reveal ghost buttons + the row menu */
.tbl td.c-actions,.tbl th.c-actions{width:40px;text-align:right;padding-right:12px;white-space:nowrap}
.tbl td.c-actions .row-actions{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.tbl td.c-actions .iconbtn{vertical-align:middle;color:var(--text-3)}
.tbl td.c-actions .iconbtn:hover{color:var(--text)}
.tbl td.c-actions .iconbtn:not([data-menu]){opacity:0;transition:opacity var(--t-fast)}
.tbl tr:hover td.c-actions .iconbtn,.tbl td.c-actions .iconbtn:focus-visible,.tbl tr.is-focus td.c-actions .iconbtn{opacity:1}
.tbl td.c-actions .btn-sm{vertical-align:middle}
.tbl td.c-actions .iconbtn[aria-expanded="true"]{opacity:1}
/* radio table (plan picker, resize) */
.tbl.tbl-radio tbody tr{cursor:pointer}
.tbl.tbl-radio tbody tr.is-selected td,.tbl.tbl-radio tbody tr:has(input:checked) td{background:var(--accent-soft)}
.tbl.tbl-radio tbody tr.is-selected td:first-child,.tbl.tbl-radio tbody tr:has(input:checked) td:first-child{box-shadow:inset 3px 0 var(--accent)}
.tbl.tbl-radio tbody tr.is-disabled,.tbl.tbl-radio tbody tr:has(input:disabled){cursor:default}
.tbl.tbl-radio tbody tr.is-disabled td,.tbl.tbl-radio tbody tr:has(input:disabled) td{color:var(--text-3)}
.tbl.tbl-radio tbody tr.is-disabled:hover td,.tbl.tbl-radio tbody tr:has(input:disabled):hover td{background:transparent}
.tbl.tbl-radio td.c-check{width:40px}
.tbl.tbl-radio td.c-plan,.tbl.tbl-radio td.c-price{font-size:var(--fs-14);font-weight:600}
/* toolbar above the wrapper */
.tbl-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:var(--toolbar-h);margin-bottom:12px}
.tbl-toolbar .filter,.tbl-toolbar .in-group.filter{position:relative;width:260px;max-width:100%;flex:0 1 260px}
.tbl-toolbar .filter .in{height:32px;padding-left:32px;border-radius:var(--pill);font-size:var(--fs-13)}
.tbl-toolbar .filter > svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-3);pointer-events:none}
.tbl-toolbar .filter kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-4);border-bottom-width:1px}
.tbl-toolbar .filter .in:focus ~ kbd,.tbl-toolbar .filter .in:not(:placeholder-shown) ~ kbd{display:none}
.tbl-toolbar .btn-line.btn-sm svg:last-child{width:12px;height:12px;color:var(--text-3);margin-right:-2px}
.tbl-toolbar .btn-line.btn-sm.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tbl-toolbar .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbl-toolbar .count{font-size:var(--fs-13);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-toolbar select.in{height:30px;width:auto;font-size:var(--fs-13);padding:0 28px 0 10px;border-radius:var(--pill);background-position:right 9px center;background-size:14px}
.tbl-toolbar .tag.is-x{height:24px}
.tbl-toolbar .seg{height:30px}
.tbl-toolbar + .tblwrap{margin-top:0}
.tbl-toolbar.is-hidden{display:none}
/* filter popover body */
.pop.filter-pop{width:264px;padding:8px}
.pop.filter-pop .check{padding:6px 8px;border-radius:var(--r-sm);margin:0}
.pop.filter-pop .check:hover{background:var(--bg-2)}
.pop.filter-pop .foot{display:flex;justify-content:flex-end;gap:6px;padding:8px 0 0;margin-top:6px;border-top:1px solid var(--line-soft)}
/* bulk bar: swaps in place of the toolbar (same height, no jump) */
.bulkbar{display:flex;align-items:center;gap:6px;height:var(--toolbar-h);margin-bottom:12px;padding:0 6px 0 14px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);font-size:var(--fs-13);font-weight:600;overflow-x:auto;white-space:nowrap}
.bulkbar[hidden]{display:none}
.bulkbar .sel,.bulkbar [data-bulk-count]{margin-right:8px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.bulkbar .btn{height:30px;padding:0 10px;color:var(--on-ink);background:transparent;border-color:transparent;font-size:var(--fs-13)}
.bulkbar .btn:hover{background:rgba(255,255,255,.12)}
.bulkbar .btn.is-danger,.bulkbar .btn-danger{color:#F5A899;background:transparent;border-color:transparent}
.bulkbar .btn.is-danger:hover,.bulkbar .btn-danger:hover{background:rgba(226,90,74,.22)}
.bulkbar .iconbtn{color:var(--on-ink);margin-left:auto;width:30px;height:30px}
.bulkbar .iconbtn:hover{background:rgba(255,255,255,.12);color:var(--on-ink)}
.bulkbar .sep{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 4px;flex:0 0 auto}
.tbl-toolbar.is-bulk{display:none}
/* footer inside the wrapper */
.tbl-foot{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-top:1px solid var(--line);font-size:var(--fs-125);color:var(--text-3);background:var(--surface)}
.tbl-foot .range,.tbl-foot > span:first-child{font-variant-numeric:tabular-nums}
.tbl-foot .right{margin-left:auto;display:flex;align-items:center;gap:4px}
.tbl-foot select.in{height:28px;width:auto;font-size:var(--fs-125);padding:0 26px 0 8px;background-position:right 7px center;background-size:13px;color:var(--text-2)}
.tbl-foot .iconbtn{width:30px;height:30px;color:var(--text-2)}
.tbl-foot .iconbtn svg{width:16px;height:16px}
.tbl-foot .iconbtn:disabled{opacity:.35}
.tbl-foot .btn-ghost{margin:0 auto}
.tbl-foot .sum{margin-left:auto;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.tbl-foot.is-center{justify-content:center}
.load-older{display:flex;justify-content:center;padding:8px 0}
/* empty and loading states inside the wrapper */
.tblwrap .empty{border:0}
.tblwrap .notice{margin:12px 16px}
/* simple lists that look like table rows (activity feed, needs attention, checklist) */
.list{margin:0;padding:0;list-style:none}
.list > li{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 20px;border-bottom:1px solid var(--line-soft);font-size:var(--fs-135)}
.list > li:last-child{border-bottom:0}
.list > li .time{flex:0 0 auto;width:64px;font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums}
.list > li .time.wide{width:120px}
.list > li .text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list > li .text .link,.list > li .text a{font-weight:500}
.list > li .age{font-size:var(--fs-12);color:var(--text-3);flex:0 0 auto}
.list > li .btn-sm,.list > li .iconbtn{flex:0 0 auto;margin-left:auto}
.list > li:hover{background:var(--surface-2)}
.list.dense > li{min-height:40px;padding:6px 16px;font-size:var(--fs-13)}
.list.is-flat > li:hover{background:transparent}
.list > li.is-bad{box-shadow:inset 3px 0 var(--bad)}
.list > li.is-unread{box-shadow:inset 3px 0 var(--accent)}
/* onboarding checklist */
.checklist{margin:0;padding:0;list-style:none}
.checklist > li{display:flex;align-items:center;gap:12px;height:44px;padding:0 20px;border-bottom:1px solid var(--line-soft);font-size:var(--fs-135)}
.checklist > li:last-child{border-bottom:0}
.checklist > li a{flex:1 1 auto;display:flex;align-items:center;gap:12px;height:100%}
.checklist .circle{width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent}
.checklist .circle svg{width:12px;height:12px}
.checklist > li.is-done{color:var(--ok-text)}
.checklist > li.is-done .label{text-decoration:line-through;text-decoration-color:currentColor}
.checklist > li.is-done .circle{background:var(--ok);border-color:var(--ok);color:#fff}
.checklist .chev{margin-left:auto;color:var(--text-3);width:16px;height:16px}

/* ============================================================
   8. panels · sections · key/value · stat strip · bars · progress · rails · grids
   ============================================================ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);min-width:0}
.panel > header,.panel > .panel-head{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--line-soft)}
.panel > header h3,.panel > .panel-head h3{font-size:var(--fs-14);font-weight:600;white-space:nowrap}
.panel > header h3 .tag,.panel > header h3 .st-box,.panel > header h3 .count{margin-left:6px;vertical-align:middle}
.panel > header p,.panel > .panel-head p{font-size:var(--fs-125);color:var(--text-3);margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel > header .panel-actions,.panel > .panel-head .panel-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.panel > header .panel-actions a.link,.panel > header .panel-actions .meta{font-size:var(--fs-13)}
.panel > header .cur{margin-left:auto;font-size:var(--fs-20);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.panel > header .legend{margin-left:auto}
.panel-body{padding:20px}
.panel-body.is-tight{padding:12px 20px}
.panel-body > * + *{margin-top:16px}
.panel-body > .kv{margin-top:0}
.panel-body .fields{max-width:none}
.panel > footer,.panel > .panel-foot{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 20px;border-top:1px solid var(--line-soft);font-size:var(--fs-125);color:var(--text-3)}
.panel > footer .btns,.panel > footer .right{margin-left:auto}
.panel > footer.is-sticky,.panel > .panel-foot.is-sticky{position:sticky;bottom:0;background:var(--surface);z-index:1;border-radius:0 0 var(--r) var(--r)}
.panel > .tbl,.panel > .tbl-scroll,.panel > .scroll{border:0}
.panel > .tbl thead th{top:0}
.panel > .tbl-foot,.panel .tbl-foot{border-radius:0 0 var(--r) var(--r)}
.panel > .empty{border:0}
.panel.is-lg{border-radius:var(--r-lg)}
.panel.is-lg > .panel-body{padding:20px}
.panel + .panel{margin-top:16px}
.panels{display:grid;gap:16px}
.panel .notice{margin:12px 20px 0}
.panel > .notice:last-child{margin-bottom:12px}
/* section: no box */
.section{min-width:0}
.section > h2{font-size:var(--fs-16);font-weight:600}
.section > h2 .tag,.section > h2 .st-box{margin-left:8px;vertical-align:middle}
.section > h2 + p,.section > .meta,.section > .desc{margin-top:4px;font-size:var(--fs-13);color:var(--text-3);max-width:64ch}
.section > .content,.section > h2 + p + *,.section > h2 + *:not(p){margin-top:12px}
.section + .section{margin-top:28px}
.section > .btns{margin-top:12px}
.section.is-danger > .btn,.section.is-danger > .btns{margin-top:12px}
.section > .panel,.section > .tblwrap{margin-top:12px}
/* numbered sections (create server) */
.section.is-step{position:relative;padding-left:40px}
.section.is-step > .step{position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:var(--bg-2);color:var(--ink);font-size:var(--fs-12);font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.section.is-step.is-set > .step,.section.is-step.has-value > .step{background:var(--ink);color:var(--on-ink)}
/* key/value */
.kv{display:grid;grid-template-columns:200px minmax(0,1fr);margin:0;min-width:0}
.kv dt,.kv dd{margin:0;min-height:36px;padding:8px 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.kv dt{font-size:var(--fs-13);color:var(--text-3);padding-right:16px}
.kv dd{font-size:var(--fs-135);color:var(--text);overflow-wrap:anywhere}
.kv dt:nth-last-of-type(1),.kv dd:last-of-type{border-bottom:0}
.kv dd .mono,.kv dd code{font-family:var(--mono);font-size:var(--fs-125)}
.kv dd .meta{font-size:var(--fs-125)}
.kv dd .link,.kv dd a.link{font-size:var(--fs-13);color:var(--text-2)}
.kv dd .copy{margin-left:-2px}
.kv dd .iconbtn.btn-sm{width:24px;height:24px;color:var(--text-3)}
.kv dd .iconbtn.btn-sm svg{width:14px;height:14px}
.kv dd .kpi-sm{line-height:1.1}
.kv.kv-tight dt,.kv.kv-tight dd{min-height:32px;padding:6px 0}
.kv.kv-tight dt{font-size:var(--fs-125)}
.kv.kv-inline{display:flex;flex-wrap:wrap;gap:4px 16px}
.kv.kv-inline dt,.kv.kv-inline dd{border:0;min-height:0;padding:0;display:inline}
.kv-2{display:grid;grid-template-columns:1fr;gap:0 32px}
.kv-title{font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);margin:0 0 4px;grid-column:1/-1}
.kv .kv-title{padding:12px 0 0;min-height:0;border-bottom:0}
/* stat strip: one panel divided by 1px rules */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.stats.stats-6{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;padding:14px 16px;background:var(--surface);min-width:0}
.stat .label{grid-column:1;font-size:var(--fs-125);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .kpi,.stat .kpi-sm,.stat > b{grid-column:1;display:block;margin-top:6px;color:var(--text);white-space:nowrap}
.stat .meta,.stat > span:not(.label):not(.spark){grid-column:1;display:block;margin-top:6px;font-size:var(--fs-125);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .meta.up,.stat .up{color:var(--ok-text)}
.stat .meta.down,.stat .down{color:var(--bad-text)}
.stat .meta.warn{color:var(--warn-text)}
.stat .meta.bad{color:var(--bad-text)}
.stat .spark{grid-column:2;grid-row:1/4;align-self:end;width:96px;height:32px}
.stat .spark svg{width:100%;height:100%;display:block}
.stat .bar{grid-column:1;margin-top:8px;height:4px}
.stat .bars{grid-column:1;display:grid;gap:4px;margin-top:8px}
.stat .bars .bar{margin:0}
.stat.is-link{cursor:pointer}
.stat.is-link:hover{background:var(--surface-2)}
.stat .st-box{justify-self:start;margin-top:8px}
/* bars: 6px track, ink fill, warn > 75, bad > 90 (JS copies data-pct into --pct) */
.bar{position:relative;display:block;height:6px;border-radius:var(--pill);background:var(--bg-2);overflow:hidden;min-width:0;--pct:0}
.bar i,.bar > span{display:block;height:100%;width:calc(var(--pct) * 1%);max-width:100%;border-radius:var(--pill);background:var(--ink);transition:width var(--t-slow) var(--ease)}
.bar.is-warn i,.bar.is-warn > span{background:var(--warn)}
.bar.is-bad i,.bar.is-bad > span{background:var(--bad)}
.bar.is-ok i{background:var(--ok)}
.bar.is-accent i{background:var(--accent)}
.bar.bar-4{height:4px}
.bar.bar-thin{height:2px}
.bar.is-over{background:var(--bad-soft)}
.bar-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-125);color:var(--text-3);font-variant-numeric:tabular-nums}
.bar-row .bar{flex:1 1 auto}
.bar-row .val{flex:0 0 auto;color:var(--text)}
.bar-caption{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:var(--fs-125);color:var(--text-3);font-variant-numeric:tabular-nums}
/* task progress list */
.progress{margin:0;padding:0;list-style:none;counter-reset:step}
.progress > li{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-135);color:var(--text-3)}
.progress > li:last-child{border-bottom:0}
.progress > li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:0 0 auto;box-sizing:border-box}
.progress > li .label,.progress > li > span:first-of-type{flex:1 1 auto;min-width:0}
.progress > li .secs,.progress > li .time{font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.progress > li.is-done{color:var(--text-2)}
.progress > li.is-done::before{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.progress > li.is-running{color:var(--text);font-weight:500}
.progress > li.is-running::before{border:2px solid var(--text-2);border-right-color:transparent;animation:spin .8s linear infinite}
.progress > li.is-failed{color:var(--bad-text)}
.progress > li.is-failed::before{border-color:var(--bad);background:var(--bad)}
.progress > li.is-pending{color:var(--text-4)}
.progress-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font-size:var(--fs-135);font-weight:600}
.progress-head .meta{font-weight:400}
.progress-err{margin-top:12px}
/* right rail and column grids */
.rail{width:300px;flex:0 0 300px;min-width:0}
.rail.rail-320{width:320px;flex-basis:320px}
.rail.rail-380{width:380px;flex-basis:380px}
.rail.is-sticky{position:sticky;top:calc(var(--banner-h) + var(--top-h) + 16px);align-self:start}
.rail > * + *{margin-top:16px}
.with-rail{display:flex;gap:32px;align-items:flex-start}
.with-rail > .col,.with-rail > .content{flex:1 1 auto;min-width:0}
.with-rail > .col > * + *,.with-rail > .content > * + *{margin-top:28px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.grid-2 > *{min-width:0}
.cols-2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cols-2 > *{min-width:0}
.cols-3{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.grid-380{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.grid-320{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.grid-300{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1100px){
  .grid-2{grid-template-columns:2fr 1fr;gap:24px}
  .cols-2{grid-template-columns:1fr 1fr;gap:24px}
  .cols-3{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .grid-380{grid-template-columns:minmax(0,1fr) 380px;gap:24px}
  .grid-320{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
  .grid-300{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
  .kv-2{grid-template-columns:1fr 1fr}
}
@media (max-width:1099px){
  .with-rail{display:block}
  .with-rail > .rail{width:auto;flex-basis:auto;margin-top:24px;position:static}
}
/* price block in the create rail */
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:var(--fs-22);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{font-size:var(--fs-13);color:var(--text-3)}
.price + .hint{margin-top:2px}
/* diff line (resize) */
.diff{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-135);font-variant-numeric:tabular-nums}
.diff .arrow{color:var(--text-3)}
.diff .up{color:var(--ok-text)}
.diff .down{color:var(--bad-text)}
/* threads (tickets) */
.thread{display:grid;gap:20px}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.msg .avatar{width:32px;height:32px;font-size:var(--fs-12)}
.msg .who{display:flex;align-items:center;gap:8px;font-size:var(--fs-125);color:var(--text-3)}
.msg .who b{font-size:var(--fs-135);color:var(--text)}
.msg .body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:var(--lh-loose)}
.msg.is-staff{box-shadow:inset 3px 0 var(--accent);padding-left:12px}
.msg.is-note .body{background:var(--warn-soft);border-radius:var(--r-sm);padding:10px 12px;margin-top:6px}
.composer{position:sticky;bottom:0;margin-top:24px;padding:12px 0 16px;background:var(--bg);border-top:1px solid var(--line)}
.composer textarea.in{min-height:88px}
.composer .btns{margin-top:8px}

/* ============================================================
   9. tabs · segmented (segmented itself lives in section 4 with the buttons)
   ============================================================ */
.tabs{position:relative;display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)}
.tabs::-webkit-scrollbar{display:none}
.tabs.at-end{-webkit-mask-image:none;mask-image:none}
.tabs > a,.tabs > button{display:inline-flex;align-items:center;gap:6px;height:var(--tab-h);padding:0 4px;margin-right:20px;border:0;background:transparent;font-size:var(--fs-135);font-weight:500;color:var(--text-2);white-space:nowrap;flex:0 0 auto;cursor:pointer;transition:color var(--t-fast),box-shadow var(--t-fast)}
.tabs > a:last-child,.tabs > button:last-child{margin-right:24px}
.tabs > a:hover,.tabs > button:hover{color:var(--text)}
.tabs > .is-active,.tabs > [aria-current="page"]{color:var(--text);font-weight:600;box-shadow:inset 0 -2px var(--accent)}
.tabs > a .count,.tabs > button .count{font:500 var(--fs-11)/1 var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums}
.tabs > .is-disabled,.tabs > [aria-disabled="true"]{color:var(--text-4);pointer-events:none}
.tabs > a:focus-visible,.tabs > button:focus-visible{box-shadow:var(--focus);border-radius:var(--r-xs)}
.tabs > .is-active:focus-visible{box-shadow:inset 0 -2px var(--accent),var(--focus)}
.tabs > a svg,.tabs > button svg{width:14px;height:14px;color:var(--text-3)}
.tabs.is-sticky{position:sticky;top:calc(var(--banner-h) + var(--top-h));background:var(--bg);z-index:var(--z-sticky)}
.tabs + *{margin-top:20px}
.tab-toolbar{display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:16px;flex-wrap:wrap}
.tab-toolbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ============================================================
   10. menus · popovers (positioned by JS; moved to body; open = 120ms fade + scale .98→1)
   ============================================================ */
.menu,.pop{position:fixed;z-index:var(--z-drawer);min-width:var(--menu-w);max-width:calc(100vw - 16px);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);opacity:0;transform:scale(.98);transform-origin:top left;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);outline:none}
.menu.is-open,.pop.is-open{opacity:1;transform:scale(1)}
.menu[data-side="top"],.pop[data-side="top"]{transform-origin:bottom left}
.menu[data-align="end"],.pop[data-align="end"]{transform-origin:top right}
.menu[data-side="top"][data-align="end"],.pop[data-side="top"][data-align="end"]{transform-origin:bottom right}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:var(--fs-135);font-weight:400;text-align:left;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--t-fast)}
.menu-item svg{width:16px;height:16px;color:var(--text-3);flex:0 0 auto}
.menu-item:hover,.menu-item:focus-visible,.menu-item.is-active,.menu-item[aria-selected="true"]{background:var(--bg-2);box-shadow:none;outline:none}
.menu-item:hover svg,.menu-item.is-active svg{color:var(--text-2)}
.menu-item kbd{margin-left:auto;padding:2px 4px;border-bottom-width:1px;color:var(--text-3);font-size:10.5px}
.menu-item .hint,.menu-item .right{margin-left:auto;font-size:var(--fs-12);color:var(--text-4);font-weight:400}
.menu-item .tag{margin-left:auto}
.menu-item.is-danger{color:var(--bad-text)}
.menu-item.is-danger svg{color:var(--bad-text)}
.menu-item.is-danger:hover{background:var(--bad-soft)}
.menu-item:disabled,.menu-item[aria-disabled="true"],.menu-item.is-disabled{opacity:.45;cursor:default;pointer-events:none}
.menu-item .st{font-weight:500}
.menu-sep{height:1px;margin:6px -6px;background:var(--line-soft)}
.menu-label{padding:8px 10px 4px;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3)}
.menu-item.is-check::before{content:"";width:16px;height:16px;flex:0 0 auto;opacity:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.menu-item.is-check.is-on::before,.menu-item.is-check[aria-checked="true"]::before{opacity:1}
.menu .seg{margin:0}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 10px;font-size:var(--fs-135)}
.menu-row .seg{height:28px}
.menu-row .seg > *{padding:0 10px;font-size:var(--fs-12)}
.menu form{margin:0;display:contents}
/* popovers: same skin, wider */
.pop{width:var(--pop-w);padding:0;max-height:70vh;display:flex;flex-direction:column}
.pop.is-open{display:flex}
.pop[hidden]{display:none}
.pop > header,.pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 8px 0 16px;border-bottom:1px solid var(--line-soft);font-size:var(--fs-135);font-weight:600;flex:0 0 auto}
.pop > header .btn-ghost{font-weight:500;font-size:var(--fs-125)}
.pop-body,.pop > .body{overflow-y:auto;padding:6px;min-height:0;flex:1 1 auto}
.pop > footer,.pop-foot{padding:8px 16px;border-top:1px solid var(--line-soft);font-size:var(--fs-125);flex:0 0 auto}
.pop > footer a{color:var(--text-2)}
.pop > footer a:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.pop.pop-account{width:300px}
.pop.pop-account .who{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.pop.pop-account .who b{font-size:var(--fs-135);font-weight:600;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop.pop-account .who span{font-size:var(--fs-125);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop.pop-account .menu-item{height:34px}
.pop.pop-account .pop-user{align-items:flex-start;gap:10px;padding:12px 12px 12px 16px}
.pop.pop-account .pop-user .avatar{flex:0 0 auto;margin-top:2px}
.pop.pop-account .pop-user-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pop.pop-account .pop-user-txt b{font-size:var(--fs-135);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop.pop-account .pop-user-txt .meta{font-size:var(--fs-125);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop.pop-account .pop-user > .tag{flex:0 0 auto;align-self:center}
.pop.pop-account .pop-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 16px;margin:0}
.pop.pop-account .pop-row > span{font-size:var(--fs-12);font-weight:600;color:var(--text-3)}
.pop.pop-account .pop-row .seg{display:flex;width:100%;max-width:100%}
.pop.pop-account .pop-row .seg > *{flex:1 1 0;padding:0 6px;font-size:var(--fs-125);min-width:0}
.pop.pop-help{width:240px}
/* notification rows */
.notif{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 12px 8px 14px;border-radius:var(--r-sm);text-decoration:none;color:var(--text);position:relative}
.notif:hover{background:var(--bg-2)}
.notif .time{font-size:var(--fs-12);color:var(--text-3)}
.notif .text{font-size:var(--fs-13);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif.is-unread{box-shadow:inset 3px 0 var(--accent)}
.notif.is-unread .text{font-weight:500}
.pop .empty{padding:32px 16px;text-align:center}
.pop .empty h3{font-size:var(--fs-135)}

/* ============================================================
   11. modals · drawers · sheets
   ============================================================ */
dialog{color:inherit}
dialog::backdrop{background:var(--scrim)}
dialog.modal{position:fixed;inset:0;margin:auto;width:var(--modal-md);max-width:calc(100vw - 32px);max-height:90vh;max-height:90dvh;padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),overlay var(--t) allow-discrete,display var(--t) allow-discrete}
dialog.modal:not([open]){display:none}
dialog.modal[open]{opacity:1;transform:translateY(0)}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(8px)}}
dialog.modal.modal-sm{width:var(--modal-sm)}
dialog.modal.modal-md{width:var(--modal-md)}
dialog.modal.modal-lg{width:var(--modal-lg)}
dialog.modal > form{display:contents}
dialog.modal > form.is-block{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.modal-head{position:relative;padding:20px 56px 0 24px;flex:0 0 auto}
.modal-head h2{font-size:var(--fs-16);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.modal-head h2 .mono{font-size:var(--fs-14)}
.modal-head p{margin-top:4px;font-size:var(--fs-13);color:var(--text-3)}
.modal-head .st-box,.modal-head .tag{vertical-align:middle;margin-left:6px}
.modal-close,.modal-head > .iconbtn,.modal-head > [data-close]{position:absolute;top:16px;right:16px;width:32px;height:32px;color:var(--text-3)}
.modal-close svg,.modal-head > .iconbtn svg{width:18px;height:18px}
.modal-body{padding:16px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;font-size:var(--fs-135);line-height:var(--lh)}
.modal-body > * + *{margin-top:16px}
.modal-body > p + p{margin-top:8px}
.modal-body .fields{max-width:none}
.modal-body .notice{margin-top:12px}
.modal-body p.consequence,.modal-body .consequence{color:var(--text-2)}
.modal-body .kv{grid-template-columns:140px minmax(0,1fr)}
.modal-body .tbl tbody td{height:40px;font-size:var(--fs-13)}
.modal-body .tblwrap{box-shadow:none}
.modal-body .opts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px 24px 20px;border-top:1px solid var(--line-soft);flex:0 0 auto;flex-wrap:wrap}
.modal-foot .left,.modal-foot .meta{margin-right:auto;font-size:var(--fs-125);color:var(--text-3)}
.modal-foot .sw{margin-right:auto}
.modal-foot .btn-danger-solid,.modal-foot .btn-ink,.modal-foot .btn-primary{order:2}
.modal-foot .btn-ghost{order:1}
.modal-body .cred + .copyrow{margin-top:12px}
dialog.modal[data-strict] .modal-close{display:none}
dialog.modal .sheet-handle{display:none}
/* shortcuts modal: two columns of kbd rows */
.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px}
.shortcuts > div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;font-size:var(--fs-13);color:var(--text-2)}
.shortcuts kbd + kbd{margin-left:3px}
.shortcuts h4{grid-column:1/-1;margin:12px 0 4px;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3)}
.shortcuts h4:first-child{margin-top:0}
/* drawers: right side, under the top bar */
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:var(--drawer-w);max-width:100vw;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-3);transform:translateX(100%);transition:transform var(--t-slow) var(--ease);outline:none}
.drawer.is-open{transform:translateX(0)}
.drawer.drawer-lg,.drawer[data-size="lg"]{width:var(--drawer-w-lg)}
.drawer > form{display:contents}
.drawer-head{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px 0 24px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.drawer-head h2{font-size:var(--fs-16);font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-head h2 .tag,.drawer-head h2 .st-box{margin-left:8px;vertical-align:middle}
.drawer-head p{font-size:var(--fs-125);color:var(--text-3)}
.drawer-head .iconbtn,.drawer-head [data-close]{color:var(--text-3);flex:0 0 auto}
.drawer-head .btn-cancel,.drawer-head .btn-save{display:none}
.drawer-body{padding:20px 24px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.drawer-body > * + *{margin-top:16px}
.drawer-body .fields{max-width:none}
.drawer-body .kv{grid-template-columns:150px minmax(0,1fr)}
.drawer-body .tblwrap{box-shadow:none}
.drawer-body .tbl tbody td{height:40px;font-size:var(--fs-13)}
.drawer-body .section + .section{margin-top:24px}
.drawer-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 24px;border-top:1px solid var(--line-soft);background:var(--surface);flex:0 0 auto}
.drawer-foot .meta{margin-right:auto}
.drawer-foot .btn-ink,.drawer-foot .btn-primary{order:2}
.drawer-foot .btn-ghost{order:1}
.drawer-foot .btn-danger{margin-right:auto;order:0}
/* before/after diff (audit drawer) */
.diff2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.diff2 > div{min-width:0}
.diff2 h4{margin:0 0 6px;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3)}
.diff2 .kv{grid-template-columns:110px minmax(0,1fr)}
.diff2 .kv dt,.diff2 .kv dd{min-height:28px;padding:4px 0;font-size:var(--fs-125)}
.diff2 .kv dd{font-family:var(--mono);font-size:var(--fs-12)}
.diff2 .kv dd.is-changed,.kv dd.is-changed{background:var(--warn-soft);border-radius:var(--r-xs);padding-left:6px;padding-right:6px}
pre.json,pre.raw{margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font:400 var(--fs-12)/1.5 var(--mono);color:var(--text-2);overflow:auto;max-height:320px;white-space:pre;tab-size:2}
details.raw > summary{cursor:pointer;font-size:var(--fs-13);color:var(--text-2);list-style:none;display:inline-flex;align-items:center;gap:6px;user-select:none}
details.raw > summary::-webkit-details-marker{display:none}
details.raw > summary::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t-fast)}
details.raw[open] > summary::before{transform:rotate(90deg)}
details.raw > pre{margin-top:8px}
/* sticky bottom action bars (mobile server detail, create summary) — hidden on desktop */
.sticky-actions{display:none}

/* ============================================================
   12. toasts · notices
   ============================================================ */
.toasts{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:8px;width:360px;max-width:calc(100vw - 32px);pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);background:var(--ink);color:var(--on-ink);font-size:var(--fs-135);line-height:1.4;box-shadow:var(--sh-2);pointer-events:auto;opacity:0;transform:translateY(12px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.toast.is-in{opacity:1;transform:translateY(0)}
.toast.is-out{opacity:0;transform:translateY(6px)}
.toast > svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--on-ink-2)}
.toast.is-ok > svg{color:var(--ok)}
.toast.is-bad > svg{color:var(--bad)}
.toast.is-info > svg{color:var(--info)}
.toast > div,.toast > span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.toast a,.toast button.link{color:var(--on-ink);text-decoration:underline;text-underline-offset:2px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;margin-left:8px;white-space:nowrap;font:inherit;font-weight:600}
.toast .iconbtn{width:24px;height:24px;margin:-2px -6px -2px 0;color:var(--on-ink-2)}
.toast .iconbtn:hover{background:rgba(255,255,255,.12);color:var(--on-ink)}
.toast .iconbtn svg{width:14px;height:14px}
.notice{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--info-line);border-radius:var(--r-sm);background:var(--info-soft);color:var(--info-text);font-size:var(--fs-13);line-height:1.45}
.notice > svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.notice > div,.notice > p,.notice > span{flex:1 1 auto;min-width:0}
.notice > div b{font-weight:600}
.notice .link,.notice a,.notice > .btn{flex:0 0 auto;color:inherit;font-weight:600;text-decoration-color:currentColor;margin-left:auto;white-space:nowrap}
.notice > .btn-sm{margin:-4px 0 -4px auto}
.notice .mono{font-size:var(--fs-12);opacity:.85}
.notice.is-info{border-color:var(--info-line);background:var(--info-soft);color:var(--info-text)}
.notice.is-ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok-text)}
.notice.is-warn,.notice.warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn-text)}
.notice.is-bad,.notice.bad{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad-text)}
.notice.is-neutral{border-color:var(--line);background:var(--surface-2);color:var(--text-2)}
.notice + .notice{margin-top:8px}
.notice .iconbtn{width:24px;height:24px;color:inherit;margin:-4px -4px -4px 0}
noscript .notice{margin-bottom:16px}

/* ============================================================
   13. charts — server-side SVG, HTML labels, JS hover
   ============================================================ */
/* markup: <div class="chart"><div class="chart-head">…</div> <svg>…</svg> | <div class="plot">[.chart-y][.chart-x]<svg/></div> <script class="chart-data"></div>
   The wrapper stacks head + plot; the plot rect is 200px (160 mobile, 120 mini, 32 spark). Chart.php may also emit <svg class="chart"> directly. */
.chart{position:relative;display:flex;flex-direction:column;min-width:0;--plot-h:200px}
.chart.is-mini,.chart.chart-mini{--plot-h:120px}
.chart.chart-sm{--plot-h:160px}
.chart.chart-spark{--plot-h:32px}
.chart > svg,.chart > .plot{display:block;width:100%;height:var(--plot-h);flex:0 0 auto;box-sizing:border-box}
.chart > svg{padding:12px 16px 8px 8px;overflow:visible}
.chart > .plot{position:relative;padding:12px 16px 0 8px}
.chart > .plot > svg{position:absolute;left:52px;right:16px;top:12px;bottom:20px;width:auto;height:auto;overflow:visible}
svg.chart{display:block;width:100%;height:200px;padding:12px 16px 8px 8px;box-sizing:border-box;overflow:visible}
.panel > svg.chart,.panel-body > svg.chart{height:200px}
.chart-head{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.chart-head h3{font-size:var(--fs-14);font-weight:600;white-space:nowrap}
.chart-head .cur{margin-left:auto;font-size:var(--fs-20);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chart-head .avg,.chart-head .meta{font-size:var(--fs-125);color:var(--text-3);font-variant-numeric:tabular-nums}
.chart-head .legend{margin-left:auto}
.chart-head .cur + .avg{margin-left:0}
.chart-head .seg{margin-left:auto}
.chart-head .updated{margin-left:auto}
.chart.is-mini .chart-head{min-height:40px;padding:0 16px}
.chart.is-mini .chart-head .cur{font-size:var(--fs-18)}
/* HTML label layers inside .plot: y left 44px, x bottom 20px; the svg fills the remaining plot rect */
.chart .chart-y{position:absolute;left:8px;top:12px;bottom:20px;width:44px;pointer-events:none}
.chart .chart-y span{position:absolute;right:8px;transform:translateY(-50%);font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.chart .chart-x{position:absolute;left:52px;right:16px;bottom:0;height:20px;pointer-events:none}
.chart .chart-x span{position:absolute;bottom:2px;transform:translateX(-50%);font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.chart .chart-x span:first-child{transform:none}
.chart .chart-x span:last-child{transform:translateX(-100%)}
/* svg internals: Chart.php emits class="grid" lines and class="tick" text; single-series fill uses --ch-2 */
.chart svg .grid,svg.chart .grid{stroke:var(--ch-grid);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.chart svg .grid.base,.chart svg .baseline,svg.chart .baseline{stroke:var(--line-2)}
.chart svg .tick,svg.chart .tick{fill:var(--text-3);font-family:var(--font);font-size:11px;font-variant-numeric:tabular-nums}
.chart svg .tick.y,svg.chart .tick.y{text-anchor:end}
.chart svg path.line,.chart svg .s1 path.line{stroke:var(--ch-2);stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart svg path.area,.chart svg .s1 path.area{fill:var(--ch-2);fill-opacity:var(--ch-area);stroke:none}
.chart svg .s2 path.line{stroke:var(--ch-2)}
.chart svg .s1.in path.line,.chart svg .two .s1 path.line{stroke:var(--ch-1)}
.chart svg .two path.area{display:none}
.chart svg .total,.chart svg path.dashed{stroke:var(--ch-3);stroke-width:1;stroke-dasharray:4 3;fill:none;vector-effect:non-scaling-stroke}
.chart svg rect.bar{fill:var(--ch-1)}
.chart svg rect.bar.is-today,.chart svg rect.bar:hover,.chart svg rect.bar.is-hover{fill:var(--ch-2)}
.chart svg rect.bar.s2{fill:var(--ch-3)}
.chart svg .s3 path.line{stroke:var(--ch-3)}
.chart svg .s4 path.line{stroke:var(--ch-4)}
svg.chart text{fill:var(--text-3);font-family:var(--font);font-size:11px}
/* hover layer (JS) */
.chart .xhair{position:absolute;top:0;bottom:20px;width:1px;background:var(--line-2);pointer-events:none;display:none}
.chart .xdot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ch-2);border:1.5px solid var(--surface);pointer-events:none;display:none}
.chart .xdot.s1{background:var(--ch-1)}
.chart .tipbox{position:absolute;z-index:2;min-width:120px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--sh-2);font-size:var(--fs-125);line-height:1.4;pointer-events:none;display:none;white-space:nowrap}
.chart .tipbox .t{color:var(--text-3);font-size:var(--fs-12);margin-bottom:2px}
.chart .tipbox .v{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.chart .tipbox .v i{width:10px;height:2px;background:var(--ch-2);border-radius:1px}
.chart .tipbox .v i.s1{background:var(--ch-1)}
.chart.is-hover .xhair,.chart.is-hover .xdot,.chart.is-hover .tipbox{display:block}
.chart.is-stale{opacity:.6}
/* legend: 10x2 swatch + 12.5 text + current value */
.legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--fs-125);color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{width:10px;height:2px;border-radius:1px;background:var(--ch-2);flex:0 0 auto}
.legend span:first-child i{background:var(--ch-1)}
.legend span:nth-child(2) i{background:var(--ch-2)}
.legend span:nth-child(3) i{background:var(--ch-3)}
.legend span:nth-child(4) i{background:var(--ch-4)}
.legend i.dashed{background:repeating-linear-gradient(90deg,var(--ch-3) 0 3px,transparent 3px 5px)}
.legend b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.chart + .legend,svg.chart + .legend{margin-top:8px;padding:0 16px 12px}
/* sparklines */
.spark{display:inline-block;width:80px;height:24px;vertical-align:middle}
.spark svg{display:block;width:100%;height:100%;overflow:visible}
.spark svg path{fill:none;stroke:var(--ch-1);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark.is-warn svg path{stroke:var(--warn)}
.spark.is-bad svg path{stroke:var(--bad)}
/* chart panel states */
.chart-empty{display:flex;align-items:center;justify-content:center;height:200px;padding:24px;font-size:var(--fs-13);color:var(--text-3);text-align:center}
.chart-empty.is-mini{height:120px}
.chart-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1100px){.chart-grid{grid-template-columns:1fr 1fr}}
.chart-grid .panel{min-width:0}
.live-charts{display:grid;gap:0}
.live-charts .chart{--plot-h:120px}
.live-charts .chart + .chart{border-top:1px solid var(--line-soft)}
.live-charts .chart-head{min-height:40px;padding:0 16px;border-bottom:0}
.live-charts .chart-head .cur{font-size:var(--fs-18)}
.live-charts .chart:hover .chart-head h3{text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   14. empty states · skeletons
   ============================================================ */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:48px 24px;max-width:420px;min-width:0}
.empty > svg{width:24px;height:24px;color:var(--text-3);margin-bottom:12px}
.empty h3{font-size:var(--fs-15);font-weight:600}
.empty p{margin-top:4px;font-size:var(--fs-135);color:var(--text-3)}
.empty .btn{margin-top:16px}
.empty .btns{margin-top:16px}
.empty .link,.empty > a.link{margin-top:12px;font-size:var(--fs-125);color:var(--text-3)}
.empty.is-center{align-items:center;text-align:center;margin:0 auto}
.empty.is-sm{padding:24px 16px}
.empty.is-sm h3{font-size:var(--fs-14)}
.empty.is-inline{padding:20px 0;max-width:none}
.tblwrap > .empty,.panel > .empty{margin:0}
.sk{display:block;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 37%,var(--bg-2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;height:12px}
.sk.sk-text{height:12px;width:60%}
.sk.sk-row-text{height:16px;width:80%}
.sk.sk-row{height:36px;width:100%;border-radius:var(--r-sm)}
.sk.sk-chart{height:160px;width:100%;border-radius:var(--r-sm)}
.sk.sk-kpi{height:22px;width:96px}
.sk.sk-circle{width:28px;height:28px;border-radius:50%}
.sk + .sk{margin-top:8px}
.sk-list{display:grid;gap:8px;padding:12px 16px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
[aria-busy="true"].region{position:relative;min-height:80px}

/* ============================================================
   15. command palette · kbd · tooltips
   ============================================================ */
dialog.palette{position:fixed;inset:0;margin:12vh auto auto;width:var(--palette-w);max-width:calc(100vw - 32px);padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--sh-3);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
dialog.palette:not([open]){display:none}
dialog.palette[open]{opacity:1;transform:translateY(0)}
@starting-style{dialog.palette[open]{opacity:0;transform:translateY(8px)}}
.palette-in{position:relative;display:flex;align-items:center;flex:0 0 auto;border-bottom:1px solid var(--line-soft)}
.palette-in > svg{position:absolute;left:16px;width:18px;height:18px;color:var(--text-3);pointer-events:none}
.palette-in input{width:100%;height:48px;padding:0 48px 0 44px;border:0;background:transparent;color:var(--text);font-size:var(--fs-16);outline:none}
.palette-in input::placeholder{color:var(--text-4)}
.palette-in kbd{position:absolute;right:16px;color:var(--text-3);border-bottom-width:1px}
.palette-res{max-height:50vh;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.palette-res .menu-label{padding:10px 10px 4px}
.palette-res .menu-item{height:40px;padding:0 10px}
.palette-res .menu-item .name{font-weight:500;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-res .menu-item .mono{color:var(--text-3);font-size:var(--fs-12)}
.palette-res .menu-item .st{margin-left:4px}
.palette-res .menu-item .hint{font-size:var(--fs-12);color:var(--text-4)}
.palette-res .empty{padding:32px 16px;align-items:center;text-align:center;max-width:none}
.palette-foot{display:flex;align-items:center;gap:14px;padding:8px 16px;border-top:1px solid var(--line-soft);font-size:var(--fs-12);color:var(--text-3);flex:0 0 auto}
.palette-foot span{display:inline-flex;align-items:center;gap:4px}
.palette-foot kbd{border-bottom-width:1px;padding:2px 4px}
/* tooltips (JS-positioned from data-tip) */
.tip{position:fixed;z-index:var(--z-tip);max-width:280px;padding:4px 8px;border-radius:var(--r-xs);background:var(--ink);color:var(--on-ink);font-size:var(--fs-12);font-weight:500;line-height:1.4;pointer-events:none;opacity:0;transition:opacity var(--t-fast);white-space:normal;overflow-wrap:anywhere}
.tip.is-open{opacity:1}
.tip kbd{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:inherit;margin-left:6px}
.kbd-hint{display:inline-flex;align-items:center;gap:3px;color:var(--text-3);font-size:var(--fs-12)}
[data-tip]{-webkit-tap-highlight-color:transparent}

/* ============================================================
   16. pages — shell-level page overrides only; page owners add public/css/p-*.css
   ============================================================ */
/* auth shell (layout-auth.php): centred column 400px, panel radius 18, no shadow */
body.auth,.auth{display:block;min-height:100vh;min-height:100dvh}
.auth{display:grid;grid-template-rows:1fr auto;justify-items:center;padding:40px 16px 24px}
.auth .box{width:100%;max-width:400px;align-self:center}
.auth .brand{display:flex;align-items:center;justify-content:center;gap:10px;height:auto;margin:0 0 20px;padding:0}
.auth .brand svg{width:28px;height:28px}
.auth .brand b,.auth .brand span{font-size:var(--fs-14)}
.auth .panel{border-radius:var(--r-lg);padding:28px;box-shadow:none}
.auth .panel > * + *{margin-top:16px}
.auth h1{font-size:var(--fs-20);margin-bottom:4px}
.auth h1 + p{color:var(--text-3);font-size:var(--fs-13)}
.auth form{display:grid;gap:14px}
.auth form .fields{max-width:none;gap:14px}
.auth .in{height:var(--ctl-lg);font-size:var(--fs-14)}
.auth .btn-lg{width:100%}
.auth .or{display:flex;align-items:center;gap:12px;font-size:var(--fs-12);color:var(--text-3);text-transform:lowercase}
.auth .or::before,.auth .or::after{content:"";flex:1 1 auto;height:1px;background:var(--line-soft)}
.auth .social{display:grid;gap:8px}
.auth .social .btn{width:100%;gap:10px}
.auth .social .btn svg{width:18px;height:18px}
.auth .social .btn[aria-disabled="true"]{opacity:.55;pointer-events:auto;cursor:default}
.auth .note,.auth .box > p{margin-top:16px;text-align:center;font-size:var(--fs-13);color:var(--text-3)}
.auth .box > .notice{margin-bottom:16px}
.auth .foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.auth .foot .seg{height:30px}
.auth .foot form{display:contents}
.auth .check{font-size:var(--fs-13)}
.auth .f > span:first-child .link{font-size:var(--fs-125)}
/* create server page */
.p-create .form-col{max-width:760px;min-width:0;flex:1 1 auto}
.p-create .section.is-step + .section.is-step{margin-top:28px}
.p-create .opts{margin-top:12px}
.p-create .tbl-radio{margin-top:12px}
.p-create .rail .panel{border-radius:var(--r-lg)}
.p-create .rail .panel-body{padding:20px}
.p-create .rail .kv{grid-template-columns:96px minmax(0,1fr)}
.p-create .rail .kv dt,.p-create .rail .kv dd{min-height:30px;padding:5px 0;font-size:var(--fs-13)}
.p-create .rail .price{margin-top:16px}
.p-create .rail .btn-lg{width:100%;margin-top:16px}
.p-create .rail .btn-lg + .hint{margin-top:8px;text-align:center}
.p-create details.adv > summary{cursor:pointer;font-size:var(--fs-13);font-weight:600;color:var(--text-2);list-style:none;display:inline-flex;align-items:center;gap:6px;user-select:none}
.p-create details.adv > summary::-webkit-details-marker{display:none}
.p-create details.adv > summary::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t-fast)}
.p-create details.adv[open] > summary::after{transform:rotate(180deg)}
.p-create details.adv > *:not(summary){margin-top:12px}
/* server detail */
.p-server .ph-actions .split{flex:0 0 auto}
.p-server .danger{margin-top:28px}
/* invoice detail: a document-like panel */
.invoice-doc{max-width:800px;padding:32px}
.invoice-doc .head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.invoice-doc .head .brand{padding:0}
.invoice-doc .totals{display:grid;grid-template-columns:1fr auto;gap:4px 24px;justify-content:end;margin-top:16px;margin-left:auto;max-width:320px;font-variant-numeric:tabular-nums}
.invoice-doc .totals dt{color:var(--text-3);text-align:right}
.invoice-doc .totals dd{margin:0;text-align:right}
.invoice-doc .totals .grand{font-weight:600;font-size:var(--fs-16);border-top:1px solid var(--line);padding-top:8px}
/* admin dashboards: needs-attention rows */
.attn > li .tag{width:64px;justify-content:center;flex:0 0 auto}
/* legal pages */
.legal{max-width:72ch;font-size:var(--fs-14);line-height:var(--lh-loose)}
.legal h2{margin-top:28px}
.legal p + p{margin-top:12px}
/* impersonation strip inside admin server view */
.admin-strip{margin-bottom:20px}

/* ============================================================
   17. mobile — a layout, not a squeeze (≤640 phone, <960 nav collapse, <1100 secondary columns stack)
   ============================================================ */
@media (max-width:1099px){
  .main{padding-left:24px;padding-right:24px;--content-pad:24px}
  .kv-2{gap:0}
}
@media (max-width:959px){
  :root{--nav-w:0px}
  body{grid-template-columns:minmax(0,1fr)}
  .app{grid-template-columns:minmax(0,1fr)}
  .main{grid-column:1}
  .topbar{padding:0 12px;gap:8px}
  .topbar #burger{display:inline-flex;width:36px;height:36px;margin-left:-4px}
  .topbar #burger svg{width:20px;height:20px}
  .topbar .seg.scope{display:none}
  .gsearch{display:none}
  .topbar-right #search-btn,.topbar-right .iconbtn.search-m{display:inline-flex}
  .topbar .avatar-btn svg,.topbar .avatar-btn > svg{display:none}
  /* off-canvas nav */
  .nav{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;width:min(300px,86vw);z-index:var(--z-drawer);padding:12px 12px calc(12px + env(safe-area-inset-bottom));border-right:1px solid var(--line);box-shadow:var(--sh-3);transform:translateX(-100%);transition:transform var(--t-slow) var(--ease);overflow-y:auto;grid-column:auto}
  .nav.is-open{transform:translateX(0)}
  .nav .seg.scope{display:flex;margin:4px 0 12px}
  .nav .seg.scope > *{flex:1 1 0}
  .nav .nav-close{display:inline-flex;align-self:flex-end;margin:-4px -4px 4px 0}
  .nav a{height:40px}
  .nav-foot{padding-top:12px}
  .nav-foot .account{display:grid;gap:10px;padding:4px 0 8px}
  .nav-foot .account .who{display:flex;align-items:center;gap:10px;min-width:0}
  .nav-foot .account .who b{display:block;font-size:var(--fs-135);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-foot .account .who span{display:block;font-size:var(--fs-12);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-foot .account .seg{display:flex}
  .nav-foot .account .seg > *{flex:1 1 0}
  .nav-foot .account .row-between{font-size:var(--fs-13);color:var(--text-2)}
  .nav-foot .account form{display:contents}
  .nav-foot .account .btn{width:100%;justify-content:flex-start}
  #nav-rail{display:none}
  html[data-nav="rail"] .nav{width:min(300px,86vw);padding:12px}
  html[data-nav="rail"] .nav a{justify-content:flex-start;width:auto;height:40px;padding:0 10px;margin:0}
  html[data-nav="rail"] .nav a > span,html[data-nav="rail"] .nav .count,html[data-nav="rail"] .nav a .tag{display:initial}
  html[data-nav="rail"] .nav .count{display:inline;margin-left:auto}
  html[data-nav="rail"] .nav a svg{width:18px;height:18px}
  html[data-nav="rail"] .nav h6{height:auto;margin:16px 10px 6px;font-size:var(--fs-11);background:none}
  html[data-nav="rail"] .nav-foot{padding:12px 10px 0;justify-items:stretch}
  html[data-nav="rail"] .credit{width:auto;height:auto;margin:0 -10px;padding:8px 10px;display:block;border:0;border-radius:var(--r-sm);font-size:inherit;font-weight:inherit}
  html[data-nav="rail"] .credit::before{content:none}
  html[data-nav="rail"] .nav-foot .links,html[data-nav="rail"] .credit .label,html[data-nav="rail"] .credit .amount,html[data-nav="rail"] .credit .days,html[data-nav="rail"] .credit .bar,html[data-nav="rail"] .credit .link{display:block}
  html[data-nav="rail"] .nav-foot .links{display:flex}
  html[data-nav="rail"] .cluster{width:auto;height:auto;border:0;justify-content:flex-start}
  html[data-nav="rail"] .cluster span{display:inline}
  html[data-nav="rail"] .nav-foot a.nav-settings{width:auto;height:36px;padding:0 10px;margin:0 -10px 4px;justify-content:flex-start}
  .main{padding:16px 16px calc(96px + env(safe-area-inset-bottom));--content-pad:16px;min-height:0}
  .main > * + *{margin-top:24px}
  .ph.is-sticky,.ph[data-sticky]{margin:-16px -16px 16px;padding:8px 16px 0}
  .ph-row h1{font-size:var(--fs-20)}
  .rail.is-sticky{position:static}
  .with-rail{display:block}
  .with-rail > .rail{width:auto;flex-basis:auto;margin-top:24px}
  .drawer{width:100vw;max-width:100vw;border-left:0}
  .drawer.drawer-lg,.drawer[data-size="lg"]{width:100vw}
  .drawer-head{height:52px;padding:0 8px;gap:4px}
  .drawer-head h2{text-align:center;font-size:var(--fs-15)}
  .drawer-head .iconbtn[data-close]{display:none}
  .drawer-head .btn-cancel,.drawer-head .btn-save{display:inline-flex}
  .drawer-head .btn-cancel{order:-1}
  .drawer-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .drawer-body{padding:16px}
  .sticky-save{margin:24px -16px calc(-1 * (96px + env(safe-area-inset-bottom)));padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .panel-body{padding:16px}
  .panel > header,.panel > .panel-head,.panel > footer{padding-left:16px;padding-right:16px}
  .chart-head{padding:0 16px}
  .list > li{padding:8px 16px}
  .checklist > li{padding:0 16px}
  .tbl-toolbar .filter{flex:1 1 200px;width:auto}
  .tbl-toolbar .right{width:100%;margin-left:0}
  .tbl-toolbar .right .count{margin-right:auto}
  /* sticky bottom action bars */
  .sticky-actions{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:8px;height:calc(56px + env(safe-area-inset-bottom));padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .sticky-actions .btn,.sticky-actions .split{flex:1 1 0;min-width:0}
  .sticky-actions .split > .btn:first-child{flex:1 1 auto}
  .sticky-actions .btn-sm{height:40px;font-size:var(--fs-135)}
  .sticky-actions .iconbtn{flex:0 0 auto;width:40px;height:40px}
  .sticky-actions .summary{flex:1 1 auto;min-width:0;display:grid;gap:1px}
  .sticky-actions .summary b{font-size:var(--fs-135);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sticky-actions .summary span{font-size:var(--fs-12);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sticky-actions .summary + .btn{flex:0 0 auto;padding:0 20px}
  .sticky-actions .btn-primary{flex:0 0 auto;height:40px}
  .sticky-actions[hidden]{display:none}
  .composer{bottom:calc(56px + env(safe-area-inset-bottom))}
  .toasts{left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;align-items:stretch}
  .toast{width:100%}
  .empty{align-items:center;text-align:center;margin:0 auto;padding:40px 16px}
  .shortcuts{grid-template-columns:1fr}
  .diff2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .stat{padding:12px 14px}
  .stat .spark{width:64px}
  .kv{grid-template-columns:1fr}
  .kv dt{min-height:0;padding:8px 0 0;border-bottom:0;font-size:var(--fs-12)}
  .kv dd{min-height:0;padding:2px 0 8px}
  .kv.kv-tight dt{padding-top:6px}
  .modal-body .kv,.drawer-body .kv{grid-template-columns:1fr}
  .invoice-doc{padding:20px}
  .composer{position:static}
}
@media (max-width:759px){
  .gsearch{display:none}
}
@media (max-width:640px){
  .brand b,.brand span{font-size:var(--fs-13)}
  .crumbs > *:not(.back){display:none}
  .crumbs .back{display:inline-flex}
  .crumbs{height:24px;margin-bottom:4px;overflow:visible}
  .ph-row{gap:10px}
  .ph-row h1{flex-wrap:wrap}
  .ph-row h1 .trunc{max-width:100%}
  .ph-actions{width:100%;margin-left:0;flex-wrap:wrap}
  .ph-actions .btn-primary{flex:1 1 100%;order:-1}
  .ph-actions .btn-line,.ph-actions .btn-ink,.ph-actions .split{flex:1 1 auto}
  .ph-sub{gap:0 4px}
  .ph .tabs{margin-top:12px;margin-left:-16px;margin-right:-16px;padding-left:16px}
  .tabs > a,.tabs > button{margin-right:16px}
  /* 16px inputs stop iOS zoom; tap targets 40px */
  .in,select.in,textarea.in{font-size:16px}
  .in{height:40px}
  .in.in-sm{height:36px;font-size:15px}
  .tbl-toolbar .filter .in{height:36px;font-size:15px}
  .tbl-toolbar select.in{height:36px;font-size:14px}
  .btn{height:40px}
  .btn-sm{height:36px}
  .iconbtn{width:40px;height:40px}
  .iconbtn.btn-sm{width:36px;height:36px}
  .seg{height:34px}
  .fields-2{grid-template-columns:1fr}
  .opts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .opts-amount{grid-template-columns:1fr 1fr}
  .cred > div{grid-template-columns:1fr 28px;gap:2px 8px;padding:8px 12px}
  .cred > div > span:first-child{grid-column:1/-1}
  .cred .copy{grid-row:2}
  .copyrow .copy{height:34px}
  /* modals become bottom sheets */
  dialog.modal{width:100%;max-width:100%;margin:auto 0 0;max-height:92vh;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(24px)}
  dialog.modal[open]{transform:translateY(0)}
  @starting-style{dialog.modal[open]{transform:translateY(24px)}}
  dialog.modal.modal-sm,dialog.modal.modal-md,dialog.modal.modal-lg{width:100%}
  dialog.modal .sheet-handle,dialog.modal::before{content:"";display:block;width:36px;height:4px;margin:8px auto 0;border-radius:var(--pill);background:var(--line-2);flex:0 0 auto}
  .modal-head{padding:12px 56px 0 20px}
  .modal-close,.modal-head > .iconbtn{top:8px;right:12px}
  .modal-body{padding:16px 20px}
  .modal-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom));flex-direction:column-reverse;align-items:stretch}
  .modal-foot .btn{width:100%;height:44px}
  .modal-foot .left,.modal-foot .meta,.modal-foot .sw{margin:0 0 4px}
  .modal-foot .btn-ghost{order:1}
  .modal-foot .btn-ink,.modal-foot .btn-primary,.modal-foot .btn-danger-solid{order:2}
  /* command palette: full-screen sheet, input pinned top */
  dialog.palette{width:100%;max-width:100%;max-height:100vh;max-height:100dvh;height:100dvh;margin:0;border-radius:0}
  .palette-in input{height:52px;font-size:16px}
  .palette-res{max-height:none;flex:1 1 auto}
  .palette-foot{display:none}
  /* stat strip: 2 per row */
  .stats{grid-template-columns:1fr 1fr}
  .stats.stats-6{grid-template-columns:1fr 1fr}
  .stat .spark{display:none}
  .stat .kpi{font-size:var(--fs-22)}
  /* chart: shorter, 3 x labels */
  .chart{--plot-h:160px}
  .chart.is-mini{--plot-h:120px}
  .chart .chart-x span:nth-child(2),.chart .chart-x span:nth-child(4){display:none}
  .chart .tipbox{top:8px!important;left:52px!important;right:16px;white-space:normal}
  .chart-head{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .chart-head .cur{font-size:var(--fs-18)}
  .chart-empty{height:160px}
  .section.is-step{padding-left:34px}
  .section.is-step > .step{width:24px;height:24px}
  .notice{flex-wrap:wrap}
  .notice .link,.notice > .btn{margin-left:26px}
  .bulkbar{padding-left:10px}
  .bulkbar .btn{padding:0 8px}
  .tbl-foot{height:auto;min-height:48px;padding:8px 16px;flex-wrap:wrap}
  .banner{font-size:var(--fs-12);padding:0 12px}
  .invoice-doc .totals{max-width:none}
  .msg{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .msg .avatar{width:28px;height:28px}
  /* --- row-cards: every <tr> becomes a flex block. Line 1 = td[data-k=1] cells (first left 14/600, others right);
     line 2 = td[data-k=2] cells dot-separated; every other cell = label:value in two columns via td::before{content:attr(data-label)};
     the checkbox and the row menu are absolutely positioned; ::before/::after pseudo-elements act as line breaks. --- */
  .tbl[data-mobile="cards"],.tbl[data-mobile="cards"] tbody{display:block;width:100%}
  .tbl[data-mobile="cards"] thead{display:none}
  .tbl[data-mobile="cards"] tbody tr{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
  .tbl[data-mobile="cards"] tbody tr::before,.tbl[data-mobile="cards"] tbody tr::after{content:"";display:block;flex:0 0 100%;height:0}
  .tbl[data-mobile="cards"] tbody tr::before{order:2}
  .tbl[data-mobile="cards"] tbody tr::after{order:4}
  .tbl[data-mobile="cards"] tbody tr:last-child{border-bottom:0}
  .tbl[data-mobile="cards"] tbody tr:hover td{background:transparent}
  .tbl[data-mobile="cards"] tbody tr:has(> td.c-actions){padding-right:56px}
  .tbl[data-mobile="cards"] tbody tr:has(> td.c-check){padding-left:44px}
  .tbl[data-mobile="cards"] tbody tr.is-selected,.tbl[data-mobile="cards"] tbody tr:has(> td.c-check input:checked){background:var(--accent-soft)}
  .tbl[data-mobile="cards"] tbody tr.is-selected td:first-child,.tbl[data-mobile="cards"] tbody tr:has(> td.c-check input:checked) td:first-child,.tbl[data-mobile="cards"] tbody tr.is-focus td:first-child{box-shadow:none}
  .tbl[data-mobile="cards"] tbody td{display:block;height:auto;min-height:0;padding:0;border:0;white-space:normal;line-height:1.4;min-width:0;order:5;flex:0 0 calc(50% - 4px);margin-top:4px;font-size:var(--fs-13)}
  .tbl[data-mobile="cards"] tbody td::before{content:attr(data-label);display:block;font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);margin-bottom:1px;white-space:nowrap}
  .tbl[data-mobile="cards"] tbody td.full,.tbl[data-mobile="cards"] tbody td.c-wrap{flex-basis:100%}
  .tbl[data-mobile="cards"] tbody td[data-k="1"]{order:1;flex:1 1 auto;margin-top:0;font-size:var(--fs-14);font-weight:600;color:var(--text)}
  .tbl[data-mobile="cards"] tbody td[data-k="1"] ~ td[data-k="1"]{flex:0 0 auto;margin-left:auto;font-size:var(--fs-125)}
  .tbl[data-mobile="cards"] tbody td[data-k="1"]::before{content:none}
  .tbl[data-mobile="cards"] tbody td[data-k="1"].c-name{max-width:none;overflow:visible}
  .tbl[data-mobile="cards"] tbody td[data-k="1"].c-name a,.tbl[data-mobile="cards"] tbody td[data-k="1"].c-name > b{white-space:normal;overflow-wrap:anywhere}
  .tbl[data-mobile="cards"] tbody td[data-k="1"] .sub{display:none}
  .tbl[data-mobile="cards"] tbody td[data-k="2"]{order:3;flex:0 0 auto;margin-top:0;font-size:var(--fs-13);color:var(--text-3);font-weight:400}
  .tbl[data-mobile="cards"] tbody td[data-k="2"]::before{content:none}
  .tbl[data-mobile="cards"] tbody td[data-k="2"] ~ td[data-k="2"]::before{content:"\00B7";display:inline;margin:0 8px 0 0;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--text-4)}
  .tbl[data-mobile="cards"] tbody td[data-k="2"] .sub{display:inline;margin:0 0 0 4px;font-size:inherit}
  .tbl[data-mobile="cards"] tbody td[data-k="2"] .copy{margin-left:0}
  .tbl[data-mobile="cards"] tbody td.c-check{position:absolute;left:16px;top:13px;width:auto;margin:0;padding:0;flex:none}
  .tbl[data-mobile="cards"] tbody td.c-check::before{content:none}
  .tbl[data-mobile="cards"] tbody td.c-actions{position:absolute;right:8px;top:8px;width:40px;height:40px;margin:0;padding:0;flex:none;display:flex;align-items:center;justify-content:center}
  .tbl[data-mobile="cards"] tbody td.c-actions::before{content:none}
  .tbl[data-mobile="cards"] tbody td.c-actions .row-actions,.tbl[data-mobile="cards"] tbody td.c-actions .iconbtn:not([data-menu]){display:none}
  .tbl[data-mobile="cards"] tbody td.c-actions .iconbtn{opacity:1;width:40px;height:40px}
  .tbl[data-mobile="cards"] tbody td.num{text-align:left}
  .tbl[data-mobile="cards"] tbody td .copy{opacity:1}
  .tbl[data-mobile="cards"] tbody td .spark{display:none}
  .tbl[data-mobile="cards"] tbody td .bar{width:100%;margin:4px 0 0}
  .tbl[data-mobile="cards"] tbody td.c-hide-m,.tbl[data-mobile="cards"] tbody td[data-label=""]:not([data-k]){display:none}
  .tbl[data-mobile="cards"] tbody td .sub{display:block;white-space:normal}
  .tbl[data-mobile="cards"] tbody tr.is-total{display:flex;justify-content:space-between}
  .tbl[data-mobile="cards"] tbody tr.is-total td{flex:0 0 auto;margin-top:0}
  .tbl[data-mobile="cards"] tbody tr.is-total td::before{content:none}
  .tbl[data-mobile="cards"] tbody tr.is-total::before,.tbl[data-mobile="cards"] tbody tr.is-total::after{content:none}
  .tbl[data-mobile="cards"] tbody tr.is-failed{box-shadow:inset 3px 0 var(--bad)}
  /* scroll tables: sticky first column */
  .tblwrap:has(> .tbl[data-mobile="scroll"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl[data-mobile="scroll"]{min-width:640px}
  .tbl[data-mobile="scroll"] thead th:first-child,.tbl[data-mobile="scroll"] tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
  .tbl[data-mobile="scroll"] thead th:first-child{z-index:3;background:var(--surface-2)}
  .tbl[data-mobile="scroll"] tbody tr:hover td:first-child{background:var(--surface-2)}
  .tbl[data-mobile="scroll"] tbody tr.is-selected td:first-child{background:#FBEFE3}
  .tbl[data-mobile="scroll"] tbody td{height:var(--row-h-touch)}
}
@media (max-width:379px){
  .brand b,.brand span{display:none}
  .topbar{gap:4px}
}
@media (pointer:coarse){
  .btn-sm{height:40px;padding:0 14px}
  .iconbtn.btn-sm{width:40px;height:40px}
  .tbl tbody td{height:var(--row-h-touch)}
  .tbl td .copy,.tbl td.c-actions .iconbtn:not([data-menu]){opacity:1}
  .tabs > a,.tabs > button{height:44px}
  .menu-item{height:40px}
  .nav a{height:40px}
  .sw i{transform:scale(1.1);transform-origin:left center}
  .copy{width:32px;height:32px}
  .tbl td .copy{width:32px;height:32px;margin:-4px 0}
}
@media (hover:none){
  .tip{display:none}
}

/* ============================================================
   18. print — invoice detail and the Access tab
   ============================================================ */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--text:#000;--text-2:#222;--text-3:#555;--line:#bbb;--line-soft:#ddd;--banner-h:0px;--top-h:0px;--nav-w:0px}
  html{background:#fff}
  body{display:block;background:#fff;color:#000;font-size:12px}
  .banner,.topbar,.nav,.scrim,.toasts,.tip,.menu,.pop,.tbl-toolbar,.bulkbar,.tbl-foot,.sticky-actions,.sticky-save,.ph-actions,.tabs,.btn,.iconbtn,.copy,.crumbs,.c-actions,.composer,.cookie,#nav-rail,dialog:not([open]),.notice.is-info,.updated,.skip,.chart .tipbox,.chart .xhair,.chart .xdot{display:none!important}
  .app{display:block}
  .main{max-width:none;padding:0;margin:0;min-height:0}
  .main > * + *{margin-top:16px}
  .ph{margin-bottom:12px}
  .ph.is-sticky,.ph[data-sticky]{position:static;margin:0 0 12px;padding:0;box-shadow:none}
  .panel,.tblwrap,.stats,.cred{box-shadow:none;border:1px solid #bbb;border-radius:4px;break-inside:avoid}
  .panel + .panel{margin-top:12px}
  .tbl thead th{position:static;background:#f4f4f4;color:#000;border-bottom:1px solid #bbb}
  .tbl tbody td{border-bottom:1px solid #ddd;height:auto;padding:6px 10px;white-space:normal}
  .tbl tbody tr:hover td{background:transparent}
  .tbl[data-mobile="cards"] tbody td::before{content:none}
  .kv{grid-template-columns:160px 1fr}
  .kv dt,.kv dd{min-height:0;padding:4px 0;border-bottom:1px solid #ddd}
  .st i{border:1px solid #000;background:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .st-box,.tag{border:1px solid #999;background:transparent!important;color:#000!important}
  .cred code{user-select:text}
  .cred .masked{letter-spacing:0}
  .invoice-doc{padding:0;max-width:none;border:0}
  .grid-2,.cols-2,.grid-380,.grid-320,.grid-300{display:block}
  .grid-2 > * + *,.cols-2 > * + *{margin-top:12px}
  .chart svg .grid{stroke:#ddd}
  .chart svg path.area{fill-opacity:.1}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
  .brand::after{content:none}
  @page{margin:16mm}
}

/* ============================================================
   19. integrare: blocurile mobile din nav (antet cu logo, comutator de scope, contul) - doar in off-canvas
   ============================================================ */
.nav-head{display:none;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.nav-head .brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.10em;font-size:var(--fs-13);color:var(--ink)}
.nav-head .brand svg{width:22px;height:22px}
.nav-scope{display:none}
.nav-account{display:none;flex-direction:column;gap:10px;padding:12px 6px 0;margin-top:8px;border-top:1px solid var(--line)}
.nav-account-user{display:flex;align-items:center;gap:10px;min-width:0}
.nav-account-user div{min-width:0;display:grid}
.nav-account-user b{font-size:var(--fs-135);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-user .meta{font-size:var(--fs-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account .pop-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:var(--fs-13)}
.nav-account .pop-row > span{font-size:var(--fs-12);font-weight:600;color:var(--text-3)}
.nav-account .pop-row .seg{display:flex;width:100%}
.nav-account .pop-row .seg > *{flex:1 1 0;padding:0 6px}
@media (max-width:959px){
  .nav-head{display:flex}
  .nav-scope{display:block}
  .nav-account{display:flex}
  .nav .nav-foot .credit,.nav .nav-foot .rail-toggle,#nav-rail{display:none}
}
/* etichetele graficelor vin fara pozitie inline (CSP): le asezam cu flex, egal distantate */
.chart .chart-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.chart .chart-y span{position:static;transform:none}
.chart .chart-x{display:flex;justify-content:space-between;align-items:flex-end}
.chart .chart-x span{position:static;transform:none}
.chart .chart-x span:first-child,.chart .chart-x span:last-child{transform:none}
/* aliasuri intre partial-uri si paginile scrise dupa contract */
.tbl-toolbar-left{display:contents}
.tbl-toolbar-right,.tbl-toolbar .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbl-foot .tbl-pager{margin-left:auto;display:flex;align-items:center;gap:4px}
.tbl-foot .tbl-per{display:inline-flex;align-items:center}
.tbl td .c-sub,.tbl .c-name .c-sub{display:block;font-size:var(--fs-12);font-weight:400;color:var(--text-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl td.c-meta,.tbl .c-meta{color:var(--text-3)}
.tbl .copy{opacity:0;transition:opacity var(--t-fast)}
.tbl tr:hover .copy,.tbl .copy:focus-visible{opacity:1}
@media (hover:none){.tbl .copy{opacity:1}}
.tbl-dense td{height:var(--row-h-dense)}
.checks{display:grid;gap:8px}
.check-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.check-row:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.check-row input{width:16px;height:16px;accent-color:var(--ink);flex:0 0 auto}
.check-row > span{display:grid;min-width:0;flex:1 1 auto}
.check-row > span > b{font-size:var(--fs-135);font-weight:500}
.check-row > code{margin-left:auto;font-size:var(--fs-12);color:var(--text-3);white-space:nowrap}
.sw-row{display:flex;align-items:center;gap:12px;cursor:pointer}
.sw-row > span:last-child{display:grid}
.sw-row .c-meta{font-size:var(--fs-12);color:var(--text-3)}
.panel-actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-actions-row .hint{flex-basis:100%}
.panel-link{display:block;padding:10px 20px;border-top:1px solid var(--line-soft);font-size:var(--fs-13);color:var(--text-2)}
.panel-link:hover{color:var(--text);background:var(--surface-2)}
.feed{list-style:none;margin:0;padding:0 20px}
.feed li{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;min-height:40px;border-bottom:1px solid var(--line-soft);font-size:var(--fs-135)}
.feed li:last-child{border-bottom:0}
.empty-sm{padding:28px 20px}
.empty-sm p{margin:0;color:var(--text-3);font-size:var(--fs-13)}
.section.danger .btn-danger{margin-top:12px}
.section.step{position:relative;padding-left:44px}
.step-n{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--bg-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-12);font-weight:600}
.step-n.is-set{background:var(--ink);color:var(--on-ink)}
.section.step h2{margin-bottom:12px}
.create{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.create-main{display:grid;gap:28px;max-width:760px}
.create-rail{position:sticky;top:calc(var(--banner-h) + var(--top-h) + 16px)}
.rail-summary .panel-body{padding:20px}
.rail-summary h3{margin-bottom:12px}
.rail-summary .price{margin:14px 0 6px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.rail-summary .price .price-h{flex-basis:100%;font-size:var(--fs-125)}
.rail-summary .btn-lg{width:100%;margin-top:14px}
.rail-summary .hint{margin-top:10px}
.kv-tight{grid-template-columns:120px 1fr}
.kv-tight dt,.kv-tight dd{min-height:30px;padding:4px 0}
.opts-img .opt,.opts-loc .opt{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.opts-img .opt svg,.opts-loc .opt svg{grid-row:span 2;color:var(--text-2)}
.opts .opt .meta{grid-column:2;font-size:var(--fs-12)}
.opt.is-disabled{opacity:.55;cursor:default}
.tbl-radio tr{cursor:pointer}
.tbl-radio tr.is-selected td{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.tbl-radio tr.is-current td{background:var(--surface-2)}
.tbl-radio tr.is-disabled td{opacity:.5}
.tbl-radio input[type=radio]{width:16px;height:16px;accent-color:var(--ink)}
.plan-table{margin-top:4px}
.fw-foot{justify-content:space-between;height:auto;min-height:48px;padding:10px 16px;gap:12px;flex-wrap:wrap}
.fw-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.resize-foot{flex-wrap:wrap}
.create-sticky,.detail-sticky{display:none}
.live-charts .chart-mini{padding:12px 16px 4px}
.live-charts .chart-head h3{font-size:var(--fs-125);color:var(--text-3);font-weight:600}
.chart-wide{grid-column:1/-1}
.chart-grid .panel.chart{padding:14px 16px 8px}
.metrics-toolbar{margin-top:4px}
.overview-grid .rail-col .panel{position:sticky;top:calc(var(--banner-h) + var(--top-h) + 100px)}
.access-grid .rail-col .panel{margin-top:0}
.detail-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.has-admin-rail .detail-body{grid-template-columns:minmax(0,1fr) 320px}
.tblwrap-inner{overflow-x:auto}
.progress-panel{margin-bottom:20px}
@media (max-width:1099px){.create{grid-template-columns:1fr}.create-rail{position:static}.create-sticky{display:flex}.has-admin-rail .detail-body{grid-template-columns:1fr}}
@media (max-width:959px){.detail-sticky{display:flex}.section.step{padding-left:0}.step-n{position:static;margin-bottom:8px}}
.crumbs .crumbs-sep:last-child{display:none}
.ph-back{display:none;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--text-3);margin-bottom:6px}
@media (max-width:959px){.crumbs{display:none}.ph-back{display:inline-flex}}
.tbl-radio tr.is-selected td{box-shadow:none}
.tbl-radio tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.plan-table .tbl td,.plan-table .tbl th{padding-left:10px;padding-right:10px}
@media (max-width:1400px){.create .plan-table th:nth-child(6),.create .plan-table td:nth-child(6){display:none}}
.notes{list-style:none;margin:0;padding:0 20px}
.notes li{padding:12px 0;border-bottom:1px solid var(--line-soft);display:grid;gap:6px}
.notes li:last-child{border-bottom:0}
.notes li p{margin:0;white-space:pre-wrap}
.notes li.is-pinned{background:var(--warn-soft);margin:0 -20px;padding:12px 20px}
.notes li form{justify-self:end}
.feed-tight li{grid-template-columns:70px 1fr auto;min-height:32px;font-size:var(--fs-13)}
.admin-panel .raw pre{font-size:var(--fs-11);white-space:pre-wrap;word-break:break-all;max-height:240px;overflow:auto;margin:8px 0 0;padding:10px;background:var(--surface-2);border-radius:var(--r-sm)}
.admin-panel .raw summary{cursor:pointer}
form.inline{display:inline}
.is-credit{color:var(--ok-text)}
.is-bad{color:var(--bad-text)}
.is-warn{color:var(--warn-text)}
.tbl tr.is-failed td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.opts-method{grid-template-columns:1fr;gap:8px}
.modal-body .opts-method{grid-template-columns:1fr;gap:8px}
.opts-method .opt{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:center;min-height:56px}
.opts-method .opt svg{grid-column:1;grid-row:1 / span 2;color:var(--text-2)}
.opts-method .opt b{grid-column:2;grid-row:1;min-width:0}
.opts-method .opt .meta{grid-column:2 / -1;grid-row:2}
.opts-method .opt .tag{position:static;grid-column:3;grid-row:1;justify-self:end;align-self:center}
.opts-amount .opt{text-align:center;padding:12px 8px}
.bank-details{margin-top:4px}
.inv{max-width:720px}
.inv-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:20px}
.inv-brand{font-weight:700;letter-spacing:.1em;display:block;margin-bottom:6px}
.inv-to{text-align:right}
.kv-inline{grid-template-columns:140px 1fr;margin-bottom:16px}
.inv-lines tfoot td{border-top:1px solid var(--line);font-weight:500}
.inv-total td{font-size:var(--fs-15)}
@media print{.topbar,.nav,.ph-actions,.tabs,.crumbs,.ph-back,.toasts,.scrim{display:none!important}body{display:block}.main{max-width:none;padding:0}.panel{border:0;box-shadow:none}}
/* graficele din panouri (.panel.chart): zona de desen are mereu inaltime fixa si svg-ul umple dreptunghiul */
.chart .plot{position:relative;display:block;width:100%;height:var(--plot-h);padding:12px 16px 0 8px;box-sizing:border-box;overflow:hidden}
.chart .plot > svg{position:absolute;left:52px;right:16px;top:12px;bottom:20px;width:auto;height:auto;overflow:visible;display:block}
.chart .plot > .chart-y{position:absolute;left:8px;top:12px;bottom:20px;width:44px}
.chart .plot > .chart-x{position:absolute;left:52px;right:16px;bottom:0;height:20px}
.panel.chart{display:flex;flex-direction:column;padding:0}
.panel.chart .chart-head{padding:0 20px;min-height:48px;border-bottom:1px solid var(--line-soft)}
.panel.chart .legend{padding:6px 16px 10px}
/* SVG e element inlocuit: cu left/right nu se intinde singur, ii dam latimea/inaltimea explicit */
.chart .plot > svg,.chart > .plot > svg{left:52px;top:12px;right:auto;bottom:auto;width:calc(100% - 68px);height:calc(100% - 32px)}
.tbl-x{overflow-x:auto}
.stats{min-width:0}
.grid-2 > *{min-width:0}
.p-admin .stats-6 .stat{padding:12px 14px}
.p-admin .attention td:first-child{width:110px}
/* subsolul paginilor de autentificare: limba + tema pe un singur rand, centrate */
.auth-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.auth-foot form{display:inline-flex}
.auth-foot .seg{width:auto}
.auth-foot .seg button{flex:0 0 auto}
/* ============================================================
   20. simetrie: panourile de pe acelasi rand au aceeasi inaltime, coloanele egale
   ============================================================ */
.grid-2,.cols-2{align-items:stretch}
.grid-2 > .panel,.cols-2 > .panel,.grid-2 > div > .panel:only-child{display:flex;flex-direction:column;min-height:100%}
.grid-2 > .panel > .tbl,.grid-2 > .panel > .feed,.grid-2 > .panel > .kv,.grid-2 > .panel > .tblwrap-inner{flex:1 1 auto}
.panel.chart > .plot{flex:1 1 auto;min-height:var(--plot-h)}
.p-admin .grid-2,.p-billing .grid-2,.p-settings.grid-2,.overview-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.p-admin .stats-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.p-admin .stat .kpi-sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel > header{flex:0 0 auto}
.panel .empty-sm{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
@media (max-width:1099px){.p-admin .grid-2,.p-billing .grid-2,.overview-grid{grid-template-columns:minmax(0,1fr)}.p-admin .stats-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.p-admin .stats-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-2 + .grid-2,.grid-2 + .panel,.panel + .grid-2{margin-top:16px}
.grid-2 > .panel > .tbl,.grid-2 > .panel > .feed,.grid-2 > .panel > .kv{flex:0 0 auto}
.grid-2 > .panel::after{content:"";flex:1 1 auto}
.stack{display:flex;flex-direction:column;gap:16px;min-height:100%}
.stack > .panel{flex:1 1 auto;display:flex;flex-direction:column}
.stack .tbl td{white-space:nowrap}
.stack .tbl .c-name{max-width:170px}
@media (max-width:640px){.feed li{grid-template-columns:64px minmax(0,1fr)}.feed li > :nth-child(3){display:none}.feed li > :nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}}
/* kv in panou: aer la stanga/dreapta, ca la tabele (16px in celule) */
.panel > .kv{padding:0 20px}
.panel > .kv dt,.panel > .kv dd{padding-top:8px;padding-bottom:8px}
.panel > .kv dd{padding-left:8px}
.panel > .kv-tight{padding:0 20px}
.overview-grid,.access-grid{align-items:start}
.overview-grid .rail-col .panel,.access-grid .rail-col .panel{min-height:0;position:static}
.chart .plot > .legend{position:absolute;top:2px;right:16px;z-index:1;display:flex;gap:10px;font-size:var(--fs-11);color:var(--text-3);background:var(--surface);padding:2px 6px;border-radius:var(--r-xs)}
.chart .plot > .legend .sw{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:4px;background:var(--ch-1)}
.chart .plot > .legend .sw.s2{background:var(--ch-2)}
.section.danger{margin-top:28px}
.panel + .section{margin-top:28px}

/* 21. QA fixes */
/* mobile cards: the checkbox and the row action stay visible (they were caught by the empty-label hide rule) */
@media (max-width:640px){
  .tbl[data-mobile="cards"] tbody td.c-check[data-label=""]:not([data-k]){display:block}
  .tbl[data-mobile="cards"] tbody td.c-actions[data-label=""]:not([data-k]){display:flex}
  .tbl[data-mobile="cards"] tbody td.c-actions .btn-sm{height:32px;padding:0 10px;white-space:nowrap}
  .tbl[data-mobile="cards"] tbody tr:has(> td.c-actions .btn){padding-right:88px}
  /* selected row: one tint for the whole card, not one box per cell */
  .tbl[data-mobile="cards"] tbody tr.is-selected td,.tbl[data-mobile="cards"] tbody tr:has(> td.c-check input:checked) td{background:transparent}
  .tbl[data-mobile="cards"] tbody tr.is-selected,.tbl[data-mobile="cards"] tbody tr:has(> td.c-check input:checked){box-shadow:inset 3px 0 var(--accent)}
}
/* admin KPI strip: six columns are narrow, the meta line wraps instead of truncating */
.p-admin .stats-6 .stat .meta{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
/* nav footer: the Settings item is a normal nav item (same pill as the ones above) */
.nav-foot a.nav-item{height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-135);font-weight:500;color:var(--text-2);margin:0 0 4px}
.nav-foot a.nav-item:hover,.nav-foot a.nav-item.is-active{background:var(--bg-2);color:var(--text)}
.nav-foot a.nav-item.is-active{font-weight:600}
html[data-nav="rail"] .nav-foot a.nav-item{width:40px;height:40px;padding:0;margin:0;justify-content:center}
/* create: the key fingerprint in a check row truncates instead of pushing the page wider */
.check-row > span > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* admin rail under 1100px: the single column may shrink below its min-content (long mono values) */
@media (max-width:1099px){.has-admin-rail .detail-body{grid-template-columns:minmax(0,1fr)}.admin-rail .kv dd,.admin-rail .mono{overflow-wrap:anywhere}}
/* panel header description: wrap onto a second line instead of truncating (the header grows; min-height stays 48px) */
.panel > header p,.panel > .panel-head p{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;padding:6px 0}
/* panels laid out by a grid get their spacing from the gap, not from the sibling margin */
.chart-grid > .panel + .panel,.grid-2 > .panel + .panel,.grid-3 > .panel + .panel,.stats > .panel + .panel{margin-top:0}
/* a table inside its own scroller (tblwrap-inner) sticks its header to the scroller, not to the page top bar */
.tblwrap-inner .tbl thead th{top:0}
/* toolbar inputs (dates, small text fields) size to content instead of the full row */
.tbl-toolbar > .in,.tbl-toolbar-left > .in,.tbl-toolbar-left > .in-group{width:auto;flex:0 0 auto}
.tbl-toolbar input.in[type="date"],.tbl-toolbar input.in[type="datetime-local"]{width:150px;height:30px;font-size:var(--fs-13);border-radius:var(--pill)}
.tbl-toolbar input.in[type="text"],.tbl-toolbar input.in[type="search"]{width:200px;height:30px;font-size:var(--fs-13);border-radius:var(--pill)}
@media (max-width:640px){.tbl-toolbar input.in[type="date"]{width:calc(50% - 4px)}}
/* eyebrow above an inline control (segmented): own line, small gap */
.fields > div > .eyebrow + .seg,.fields > div > .eyebrow + .in,.fields > div > .eyebrow + .opts,.fields > div > .eyebrow + .checks{margin-top:8px}
.fields > div > .eyebrow{display:block}
/* notifications list: the kind icon floats beside the title like an avatar; the title link stays a block */
.tbl .c-name .notif-kind{float:left;width:16px;height:16px;margin:2px 10px 0 0;color:var(--text-3)}
.tbl .c-name .notif-kind svg{display:block;width:16px;height:16px}
.tbl .c-name .notif-title{font-size:var(--fs-14);font-weight:600;color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .c-name .notif-kind ~ a,.tbl .c-name .notif-kind ~ .notif-title,.tbl .c-name .notif-kind ~ .c-sub{margin-left:26px}
.tbl .c-name .notif-kind ~ a,.tbl .c-name .notif-kind ~ .notif-title{display:block}
/* admin customer overview: two kv panels stacked in the left column (a 2x2 nesting left 40px for the values) */
.p-admin .grid-2 > .cols-2{grid-template-columns:minmax(0,1fr);gap:16px}
.p-admin .grid-2 > .cols-2 > .panel{min-height:0}
/* a plain section after a table gets the section gap */
.tblwrap + .section,.tbl-toolbar + .section,.grid-2 + .section,.stats + .section{margin-top:28px}
/* server page with the admin rail: the main column stacks Details and Live (three columns at 1280px left 40px for values) */
.has-admin-rail .overview-grid{grid-template-columns:minmax(0,1fr)}
.admin-rail .kv{grid-template-columns:96px minmax(0,1fr)}
.admin-rail .kv dd{font-size:var(--fs-13)}
.admin-rail .panel-actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-rail .panel-actions-row form{display:contents}
/* a bar placed after its value in a cell keeps a gap on the left, none on the right */
.tbl td span + .bar,.tbl td .c-meta + .bar{margin-left:8px;margin-right:0}
.cols-2 .tbl .c-name,.grid-2 .tbl .c-name{max-width:220px}
/* server page on mobile: the sticky action bar carries the actions; the header keeps only the title (no duplicate buttons) */
@media (max-width:959px){#server-head .ph-actions{display:none}}
/* "Soon" tag in the nav is a direct-child span: keep it a pill, not a stretched label */
.nav a > span.tag{flex:0 0 auto;margin-left:auto;overflow:visible}
.sw-row > span:last-child > .tag{justify-self:start}
/* a drawer body that is itself the .fields grid: rows pack at the top instead of stretching over the drawer height */
.drawer-body.fields,.drawer-body > .fields{align-content:start}
/* mobile cards: the "·" between meta cells trails the previous cell, so a wrapped line never starts with a dot */
@media (max-width:640px){
  .tbl[data-mobile="cards"] tbody td[data-k="2"] ~ td[data-k="2"]::before{content:none;margin:0}
  .tbl[data-mobile="cards"] tbody td[data-k="2"]:empty{display:none}
  .tbl[data-mobile="cards"] tbody td[data-k="2"]:has(~ td[data-k="2"]:not(:empty))::after{content:"\00B7";display:inline;margin:0 0 0 8px;color:var(--text-4)}
}
/* feed on narrow screens: the time column fits "12 min ago" without wrapping */
@media (max-width:640px){.feed li{grid-template-columns:76px minmax(0,1fr)}}
/* settings pages: the two-column grid collapses on narrow screens like the other areas */
@media (max-width:1099px){.p-settings.grid-2,.p-settings .grid-2{grid-template-columns:minmax(0,1fr)}}
/* panel header action that is a long label: let it wrap instead of spilling out of the panel */
@media (max-width:640px){.panel > header{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}.panel > header .panel-actions{margin-left:0;width:100%}}
/* health: a long error line truncates in its cell (it keeps the full text in the title) */
.au-msg{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 22. firewall: incape pe orice ecran, fara scroll orizontal */
.fw-intro{margin-bottom:16px}
.fw-groups .check-row{grid-template-columns:auto minmax(0,1fr) minmax(0,auto) auto;gap:12px;align-items:center;flex-wrap:wrap}
.fw-groups .check-row > span:nth-child(2){min-width:140px}
.fw-groups .fw-ports{font-size:var(--fs-12);color:var(--text-3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word}
.fw-groups .fw-view{flex:0 0 auto}
.fw-groups .check-row.is-danger-row:has(input:checked){border-color:var(--bad-line);box-shadow:inset 0 0 0 1px var(--bad-line)}
.rule-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rule-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.rule-list li:last-child{border:0}
.rule-list li .c-meta{flex:1 1 auto;min-width:0}
@media (max-width:760px){.fw-groups .check-row{grid-template-columns:auto 1fr auto}.fw-groups .fw-ports{grid-column:2/-1;text-align:left}}
.fw-list{display:flex;flex-direction:column}
.fw-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) auto auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line-soft)}
.fw-item:first-child{border-top:0}
.fw-item-main{display:grid;gap:2px;min-width:0}
.fw-item-main b{font-size:var(--fs-135);font-weight:600}
.fw-item-ports{font-size:var(--fs-125);color:var(--text-3);min-width:0;word-break:break-word}
.fw-item-used{white-space:nowrap;text-align:right}
@media (max-width:760px){.fw-item{grid-template-columns:1fr auto;gap:8px 12px}.fw-item-ports{grid-column:1/-1}.fw-item-used{grid-column:1;text-align:left}.fw-item .btn{grid-column:2;grid-row:3}}
/* popover notificari: lista se deruleaza in interior, nu iese din ecran */
.pop .notif-list{list-style:none;margin:0;padding:6px;flex:1 1 auto;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.pop-notif{max-height:min(70vh,560px)}
.pop-notif .pop-foot,.pop-notif > footer{flex:0 0 auto;border-top:1px solid var(--line-soft)}

/* Custom Solutions (produs nou): lista de exemple din aside */
.p-solutions .sol-aside{align-self:start}
.sol-ex{list-style:none;margin:0;padding:6px 0 10px}
.sol-ex li{display:flex;gap:12px;padding:12px 20px;align-items:flex-start}
.sol-ex li + li{border-top:1px solid var(--line-soft)}
.sol-ex-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--text-2)}
.sol-ex-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.sol-ex-tx b{font-size:var(--fs-135);font-weight:600}

/* Storage Box (produs nou) */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:stretch}
.sb-card{display:flex;flex-direction:column;gap:0;padding:0;margin:0;height:100%;text-decoration:none;color:inherit;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.sb-grid > .panel + .panel{margin-top:0}
.sb-card:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.sb-card-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.sb-card-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--text-2)}
.sb-card-tt{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto}
.sb-card-tt b{font-size:var(--fs-14);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-card-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:16px}
.sb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.sb-foot-plan{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--fs-13)}
.sb-foot-plan svg{color:var(--text-3)}
.sb-usage{display:flex;flex-direction:column;gap:8px}
.sb-usage-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--fs-125)}
.sb-usage-bot{font-size:var(--fs-12)}
.sb-usage-lg .sb-usage-top b{font-size:var(--fs-18)}
.sb-bar{height:8px;background:var(--line-2)}
.cred-flat{border:0;border-radius:0;background:transparent}
.cred-flat > div{padding-left:20px;padding-right:20px}
.opts-plan .opt{min-height:74px}

/* Overview — panoul de cheltuieli: grafic mai inalt, despartit clar de detalii (Balance/rate/next) */
.ov-spend .ov-chart{--plot-h:150px;height:150px!important;flex:0 0 auto;overflow:visible;margin-bottom:22px}
.ov-spend .ov-chart .plot{height:150px!important}
.ov-spend .panel-body{border-top:1px solid var(--line-soft)}
.ov-spend .ov-chart-empty{padding:36px 16px;text-align:center;color:var(--text-3);font-size:var(--fs-13);border-bottom:1px solid var(--line-soft)}
.ov-spend .panel-body{padding-top:18px}
.ov-spend .panel-body .kv{row-gap:6px}

/* Firewall add-rule drawer: colored direction + AWS-style quick-fill chips */
.seg-dir label{gap:6px}
.seg-dir label svg{width:14px;height:14px}
.seg-dir label.dir-in:has(input:checked){color:var(--ok-text)}
.seg-dir label.dir-out:has(input:checked){color:var(--warn-text)}
.fw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fw-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:var(--pill);background:var(--bg-2);color:var(--text-2);font-size:var(--fs-12);font-weight:600;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast)}
.fw-chip:hover{border-color:var(--accent);color:var(--accent)}
.fw-chip svg{width:13px;height:13px;color:var(--accent)}