/* ═══════════════════════════════════════════════════════════════════════════
   ui.css — the panel's design layer (2026-09 redesign).

   Loaded LAST, after app.css and shell.css. Those two carry the reasons many
   rules exist (why a tab is a radio input, which selector OpenLiteSpeed needs,
   why a bar width is a class), so they are left in place and this file changes
   how things LOOK on top of them: type, colour, depth, radius, spacing — and it
   owns the page frame outright (every ui-* class is defined only here).

   Two constraints shape everything below:
     - The CSP is `style-src 'self'`: no inline style="" survives, so every
       visual state is a class.
     - Nothing loads from anywhere else. The two typefaces are the panel's own
       files in /assets/fonts (SIL OFL 1.1, Latin subset; licences beside them).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ─────────────────────────────────────────────────────────────────
   The token NAMES are the ones app.css and shell.css already use, so every
   older rule re-colours with these values.

   ⚠ The selectors are the classes the panel actually sets. The previous layer
   switched on [data-theme="dark"], which nothing ever rendered — the panel
   marks a choice as html.theme-dark / html.theme-light — so an explicit Dark
   fell back to the oldest palette, and choosing Light on a computer set to
   dark still drew the dark one. Every block here is (0,2,0) and later than
   those, so it wins cleanly:
     :root, :root.theme-light           light
     @media dark :root:not(.theme-light) dark, following the computer
     :root.theme-dark                   dark, chosen
   /brand.css uses the same three selectors for a reseller's accent, and is
   loaded after this file, so a custom colour still wins.
   ─────────────────────────────────────────────────────────────────────────── */
:root, :root.theme-light {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --line: #e3e8f1;
  --line-soft: #edf1f7;
  --line-strong: #d3dae6;
  --text: #0e1726;
  --dim: #5a6478;
  --faint: #8b95a8;
  --accent: #0d6efd;
  --accent-strong: #0948b3;
  --accent-soft: #e7f0ff;
  --accent-ink: #ffffff;
  --ok: #12a150;
  --ok-soft: #e3f6eb;
  --warn: #b86304;
  --warn-soft: #fff1dc;
  --bad: #d92d20;
  --bad-soft: #fde8e6;
  --info: #0e8da0;

  --side-bg: #0b1324;
  --side-bg-2: #111c33;
  --side-text: #c4cee2;
  --side-text-on: #ffffff;
  --side-muted: #6f7e9c;
  --side-line: rgba(255, 255, 255, .07);
  --side-hover: rgba(255, 255, 255, .05);
  --side-active: rgba(77, 148, 255, .16);
  --side-mark: #5ea2ff;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(14, 23, 38, .05), 0 4px 16px -8px rgba(14, 23, 38, .10);
  --shadow-lift: 0 12px 32px -8px rgba(14, 23, 38, .25), 0 2px 6px rgba(14, 23, 38, .08);
  --scrim: rgba(8, 13, 24, .55);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #0a0f1a;
    --panel: #111a2b;
    --panel-2: #152036;
    --line: #1f2a40;
    --line-soft: #1a2438;
    --line-strong: #2a3752;
    --text: #e6ebf4;
    --dim: #9aa6bd;
    --faint: #6e7b94;
    --accent: #4d94ff;
    --accent-strong: #8ab8ff;
    --accent-soft: #16284a;
    --accent-ink: #06101f;
    --ok: #3ccb7f;
    --ok-soft: #11301f;
    --warn: #f2a33a;
    --warn-soft: #33240d;
    --bad: #ff6b5e;
    --bad-soft: #3a1614;
    --info: #38b6cc;
    --side-bg: #070c16;
    --side-bg-2: #0e1729;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -10px rgba(0, 0, 0, .6);
    --shadow-lift: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root.theme-dark {
  --bg: #0a0f1a;
  --panel: #111a2b;
  --panel-2: #152036;
  --line: #1f2a40;
  --line-soft: #1a2438;
  --line-strong: #2a3752;
  --text: #e6ebf4;
  --dim: #9aa6bd;
  --faint: #6e7b94;
  --accent: #4d94ff;
  --accent-strong: #8ab8ff;
  --accent-soft: #16284a;
  --accent-ink: #06101f;
  --ok: #3ccb7f;
  --ok-soft: #11301f;
  --warn: #f2a33a;
  --warn-soft: #33240d;
  --bad: #ff6b5e;
  --bad-soft: #3a1614;
  --info: #38b6cc;
  --side-bg: #070c16;
  --side-bg-2: #0e1729;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -10px rgba(0, 0, 0, .6);
  --shadow-lift: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ── base ───────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
/* Set by panel.js while the drawer or Jump to page is open, so the page
   behind does not scroll under the finger. */
html.ui-noscroll { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; }
.mono, code, kbd, pre, .joblog {
  font-family: var(--font-mono);
}
.mono { font-size: .86em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-i {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ═════════════════════════════ FRAME ═══════════════════════════════════ */

.ui-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

/* ── sidebar ─────────────────────────────────────────────────────────────
   Sticky and exactly one screen tall, scrolling inside itself, so the menu and
   the card under it never scroll away on a long page. */
.ui-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--side-bg);
  color: var(--side-text);
  min-width: 0;
  z-index: 30;
}
.ui-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid var(--side-line);
  flex: none;
}
.ui-brand-home {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--side-text-on); text-decoration: none;
}
.ui-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  /* From the accent, so a colour theme (or a brand colour) reaches the logo
   * mark too - it was a fixed blue, the one blue thing left on a violet panel.
   * For BH Blue this comes out as the #3a8dff -> #0b5bd3 it always was. */
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 78%, #fff), color-mix(in srgb, var(--accent) 82%, #000));
  color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.ui-brand-logo { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; flex: none; }
.ui-brand-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-tag {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #9cc3ff; background: rgba(77, 148, 255, .14);
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}
.ui-drawer-x, .ui-drawer-me, .ui-drawer-foot { display: none; }

/* The menu and the plan card scroll together in one column; the brand above
   and the version below stay put. */
.ui-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.ui-nav { padding: 12px 10px 4px; }
.ui-sec {
  margin: 16px 10px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--side-muted);
}
.ui-sec:first-child { margin-top: 4px; }
.ui-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--side-text);
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.ui-item::-webkit-details-marker { display: none; }
.ui-item:hover { background: var(--side-hover); color: var(--side-text-on); }
.ui-item .ui-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-link.on { background: var(--side-active); color: var(--side-text-on); }
.ui-link.on .ui-i, .ui-group.here > .ui-item .ui-i { color: var(--side-mark); }
.ui-group.here > .ui-item { color: var(--side-text-on); }
.ui-chev { width: 15px; height: 15px; margin-left: auto; opacity: .55; transition: transform .15s ease; }
.ui-group[open] > .ui-item .ui-chev { transform: rotate(90deg); }
.ui-sub { margin: 2px 0 6px 20px; padding-left: 12px; border-left: 1px solid var(--side-line); }
.ui-sub a {
  position: relative;
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--side-text);
  font-size: 13px;
  opacity: .88;
  text-decoration: none;
}
.ui-sub a:hover { background: var(--side-hover); color: var(--side-text-on); opacity: 1; }
.ui-sub a.on { background: var(--side-active); color: var(--side-text-on); opacity: 1; }
.ui-sub a.on::before {
  content: ""; position: absolute; left: -13px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 2px; background: var(--side-mark);
}
.ui-flyhead { display: none; }

/* The status card at the foot of the sidebar. */
.ui-card {
  flex: none;
  margin: 10px;
  padding: 12px;
  border-radius: 11px;
  background: var(--side-bg-2);
  border: 1px solid var(--side-line);
  display: grid;
  gap: 8px;
}
.ui-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-card-head b {
  color: var(--side-text-on); font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-card-head small { margin-left: auto; color: var(--side-muted); font-size: 11.5px; white-space: nowrap; }
.ui-live {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #3ccb7f; box-shadow: 0 0 0 3px rgba(60, 203, 127, .2);
}
.ui-mm {
  display: grid;
  grid-template-columns: 62px minmax(28px, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--side-muted);
}
.ui-mm b { color: var(--side-text); font-weight: 500; font-size: 11px; text-align: right; white-space: nowrap; }
.ui-mm .bar.none > i { width: 0; }
.ui-io {
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 8px; margin-top: 1px;
  border-top: 1px solid var(--side-line);
  font-size: 11.5px; color: var(--side-muted);
}
.ui-io b { color: var(--side-text); font-weight: 500; }
.ui-mm .bar { min-width: 0; height: 5px; background: rgba(255, 255, 255, .08); border-radius: 99px; }
.ui-mm .bar > i { background: var(--side-mark); border-radius: 99px; }
.ui-mm .bar.warn > i { background: #f2a33a; }
.ui-mm .bar.critical > i { background: #ff6b5e; }

.ui-side-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px 12px 20px;
  font-size: 11px; color: var(--side-muted);
}
.ui-ver { display: grid; line-height: 1.35; min-width: 0; }
.ui-ver .mono { font-size: 11px; }

/* ── compact rail (Sidebar::htmlClass → side-mini) ─────────────────────── */
.ui-shell.side-mini { grid-template-columns: 72px minmax(0, 1fr); }
.side-mini .ui-brand { justify-content: center; padding: 0; }
.side-mini .ui-brand-name, .side-mini .ui-tag, .side-mini .ui-sec,
.side-mini .ui-item .ui-label, .side-mini .ui-item .ui-chev,
.side-mini .ui-card, .side-mini .ui-side-foot { display: none; }
.side-mini .ui-brand-logo { max-width: 40px; }
.side-mini .ui-nav { padding: 12px; }
/* The rail's flyouts sit outside the column, so nothing in it may clip. */
.side-mini .ui-side, .side-mini .ui-side-scroll { overflow: visible; }
.side-mini .ui-item { justify-content: center; padding: 10px 0; }
.side-mini .ui-group { position: relative; }
/* A group's pages as a flyout beside the icon, on hover or keyboard focus.
   The <details> is held open by panel.js in the rail so the list exists to be
   shown; without the script the flyout still appears once a group is clicked. */
.side-mini .ui-sub { display: none; }
.side-mini .ui-group:hover > .ui-sub,
.side-mini .ui-group:focus-within > .ui-sub {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  top: -4px;
  margin: 0;
  padding: 8px;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: var(--shadow-lift);
  z-index: 40;
}
.side-mini .ui-group:hover > .ui-sub::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px;
}
.side-mini .ui-flyhead {
  display: block; padding: 4px 10px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.side-mini .ui-sub a { color: var(--text); opacity: 1; }
.side-mini .ui-sub a:hover { background: var(--panel-2); color: var(--text); }
.side-mini .ui-sub a.on { background: var(--accent-soft); color: var(--accent-strong); }
.side-mini .ui-sub a.on::before { display: none; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.ui-main { min-width: 0; display: flex; flex-direction: column; }
.ui-top {
  position: sticky; top: 0; z-index: 20;
  height: 60px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.ui-top form { margin: 0; }
/* ⚠ Scoped under .ui-top on purpose. .ui-iconbtn sets `display: grid` further
   down this file, and at equal specificity the later rule won — so the
   phone-only ☰ link showed on desktop too, as a second ☰ that did nothing
   (the drawer it opens only exists on a narrow screen). */
.ui-top .ui-burger { display: none; }
.ui-top .ui-burger-desk { display: flex; flex: none; }
/* shell.css still styles `.side-toggle button` flat for the old top bar;
   this one should look like the other top-bar buttons. */
.ui-top .side-toggle .ui-iconbtn {
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
}
.ui-top .side-toggle .ui-iconbtn:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel); }
.ui-crumbs {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  font-size: 13px; color: var(--dim); white-space: nowrap;
}
.ui-crumbs a { display: flex; color: var(--dim); }
.ui-crumbs a:hover { color: var(--text); }
.ui-crumbs .ui-i { width: 16px; height: 16px; }
.ui-crumbs .ui-crumb-sep { width: 13px; height: 13px; opacity: .5; }
.ui-crumbs b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ui-find {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0 auto;
  width: min(340px, 32vw);
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--faint);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.ui-find:hover { border-color: var(--line-strong); color: var(--dim); }
.ui-find-text { flex: 1; }
.ui-kbd {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
  padding: 0 5px; color: var(--dim); background: var(--panel);
}
/* When the script is blocked the Jump button stays hidden, and the status chip
   takes over the job of pushing the right-hand controls to the edge. */
.ui-find[hidden] + .ui-status, .ui-find[hidden] ~ .ui-theme-quick { margin-left: auto; }
.ui-find[hidden] + .ui-status ~ .ui-theme-quick { margin-left: 0; }
.ui-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ui-status small { color: var(--faint); font-weight: 500; font-size: 12px; }
.ui-status .ui-live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ui-iconbtn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--dim);
  cursor: pointer;
}
.ui-iconbtn:hover { color: var(--text); border-color: var(--line-strong); }

/* The user menu. */
.ui-user { position: relative; flex: none; }
.ui-user > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent; border-radius: 12px;
  color: var(--text); font-size: 13px;
  list-style: none; cursor: pointer;
}
.ui-user > summary::-webkit-details-marker { display: none; }
.ui-user > summary:hover, .ui-user[open] > summary { background: var(--panel-2); border-color: var(--line); }
.ui-avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  /* The signed-in person's own avatar follows the colour theme, like the logo
   * mark: a fixed blue-to-purple beside a teal panel read as something the
   * theme had missed (Benjamin, 2026-09-25). The per-account avatars in lists
   * (.acc-av-N) keep their own colours - those tell accounts apart. */
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 72%, #fff), color-mix(in srgb, var(--accent) 80%, #000));
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  position: relative; overflow: hidden;
}
/* The login's picture, laid OVER the initials rather than instead of them: if
 * it fails to load (no Gravatar after all, a network blip), panel.js removes
 * it and the initials were there all along - no broken-image box, no blank. */
.ui-avatar > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: block;
}
/* A picture is certain: no initials and no coloured disc while it loads, just a
 * quiet placeholder the picture fills. */
.ui-avatar.has-pic { color: transparent; background: var(--panel-2); }
.ui-avatar-lg { width: 96px; height: 96px; font-size: 30px; }
/* Profile photo: the three pictures side by side, the chosen one outlined. */
.photo-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.photo-choice {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 16px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.photo-choice:hover { background: var(--panel-2); }
.photo-choice.on, .photo-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.photo-choice input { margin: 0; }
.photo-choice b { font-size: 14px; }
.photo-choice b small { font-weight: 400; color: var(--faint); }
.photo-choice > small { color: var(--faint); font-size: 12px; line-height: 1.35; }
.photo-remove { margin-top: 10px; }
.ui-who { display: grid; line-height: 1.2; text-align: left; }
.ui-who b, .ui-pop-who b { font-size: 13px; }
.ui-who small, .ui-pop-who small { color: var(--faint); font-size: 11.5px; }
.ui-user > summary .ui-chev { width: 14px; height: 14px; margin-left: 0; opacity: 1; color: var(--faint); }
.ui-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 260px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lift);
  z-index: 50;
}
.ui-pop-who {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.ui-pop-who > span:last-child { display: grid; line-height: 1.25; }
.ui-pop > a, .ui-pop .ui-out {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px; margin: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; text-decoration: none;
  cursor: pointer;
}
.ui-pop > a:hover, .ui-pop .ui-out:hover { background: var(--panel-2); border: 0; }
.ui-pop .ui-i { width: 16px; height: 16px; color: var(--dim); }
.ui-pop .ui-out, .ui-pop .ui-out .ui-i { color: var(--bad); }
.ui-pop form { margin: 0; }
.ui-pop-out { padding-top: 2px; }
.ui-theme3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 8px 10px; margin: 6px 0 !important;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ui-theme3-label { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--faint); }
.ui-theme3 button {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 0; margin: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--dim);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ui-theme3 button .ui-i { width: 14px; height: 14px; color: currentColor; }
.ui-theme3 button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* "Back to <admin>" while acting as an account: one amber pill in the top bar,
   right after the breadcrumb, in place of the old full-width bar. */
.ui-back-form { margin: 0 0 0 12px; flex: 0 0 auto; }
.ui-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--warn); border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
}
.ui-back:hover, .ui-back:focus-visible { background: var(--warn); color: #fff; }
.ui-back .ui-i { width: 15px; height: 15px; }
.ui-back-short { display: none; }

/* The page itself. app.css still says `main { max-width: 1080px; margin: auto }`
   from before there was a sidebar; inside this column that would shrink the
   page to its content, so it is undone here. */
main.ui-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px 40px;
  min-width: 0;
}
.panel-support { padding: 12px 28px 20px; color: var(--dim); font-size: 13px; }
.panel-support a { margin-left: .4rem; }

/* The phone's bottom bar and the drawer backdrop do not exist on a wide screen. */
.ui-tabbar, .ui-scrim { display: none; }

/* ── Jump to page (Ctrl K) — shown only by panel.js ────────────────────── */
.ui-jump {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  background: var(--scrim);
}
.ui-jump-box {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.ui-jump-q {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--faint); font-size: 15px;
}
.ui-jump-q input {
  flex: 1; min-width: 0;
  padding: 0; margin: 0;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  background: transparent !important;
  color: var(--text); font: inherit; font-size: 15px;
}
.ui-jump-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.ui-jump-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none;
}
.ui-jump-list a small { margin-left: auto; color: var(--faint); font-size: 12px; }
.ui-jump-list .ui-i { color: var(--dim); }
.ui-jump-list .sel a, .ui-jump-list a:hover { background: var(--accent-soft); }
.ui-jump-list .ui-jump-empty { padding: 18px; text-align: center; color: var(--faint); }
.ui-jump-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint);
}

/* ═════════════════════════ COMPONENTS ═══════════════════════════════════ */

/* Headings: sentence case and the text colour. The previous layer set every
   card title in tiny grey capitals, which is most of why the panel read as
   dated — it made every heading look like a footnote. */
.page-head { margin-bottom: 18px; }
.page-head h1, main > h1 {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  margin: 0 0 4px; color: var(--text);
}
.page-head .sub, .sub { color: var(--dim); font-size: 14px; }
.card h2, .card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: -.005em;
  text-transform: none; color: var(--text);
  margin: 0 0 12px;
}
.card h3 { font-size: 14px; margin-top: 18px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.card > h2:first-child { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
/* A row of cards side by side (.grid) spaces like one card: the same gap
   between them as below them. app.css zeroes the cards' own margin inside a
   grid and gives the grid none, so whatever followed a row of cards sat
   touching it — the customer dashboard's "Email sent this hour" was the
   first place it showed. */
.grid { gap: 18px; }
.grid:has(> .card) { margin-bottom: 18px; }
/* app.css's .tight pulls a hint UP by 8px, which read as "close to its
   heading" in the old flat design. Under a bordered box it overlaps the box. */
.stat-grid + .hint, .stat-grid + .tight { margin-top: 12px; }
.card-head {
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head .count, .tab-bar a .count {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--dim); background: var(--panel-2);
  padding: 1px 8px; border-radius: 99px;
}
.hint, .card > p.hint { color: var(--dim); }
.hint { font-size: 12.5px; }
.muted { color: var(--dim); }

/* Buttons. One shape everywhere; primary is the only filled one. */
button, .btn, .act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
button:hover, .btn:hover, .act:hover { border-color: var(--accent); color: var(--text); }
.act { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
button.primary, .btn.primary, .act.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 2px 6px -2px rgba(13, 110, 253, .45);
}
button.primary:hover, .btn.primary:hover, .act.primary:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink);
}
button.danger, .btn.danger, .act.danger {
  background: transparent; border-color: var(--bad); color: var(--bad);
}
button.danger:hover, .btn.danger:hover, .act.danger:hover { background: var(--bad); color: #fff; }
button.link {
  padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--accent); font-weight: 600;
}
button.link:hover { border: 0; color: var(--accent-strong); }
button:disabled, .act:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Form fields. */
label { color: var(--dim); font-size: 13px; font-weight: 500; }
input:not([type=checkbox]):where(:not(
  [type=radio], [type=submit], [type=button], [type=reset], [type=file],
  [type=range], [type=color], [type=image], [type=hidden]
)),
select, textarea {
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  font: inherit; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* A form marked "row bottom" lines its buttons and checkboxes up with its
   inputs. app.css's `.bottom` says so, but shell.css's
   `form.row:has(> .field) { align-items: flex-start }` is more specific and won,
   so every such form (the account page, mail) had its buttons up at the height
   of the labels. This matches that selector plus one class, and ui.css loads last. */
form.row.bottom, form.row.bottom:has(> .field) { align-items: flex-end; }
/* ...and one height for everything on that line, or bottoms line up while the
   middles do not: measured, an input is 42px, a select 40px, a button 36px and a
   checkbox label 22px. */
form.row.bottom :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, button, .btn) {
  height: 42px; box-sizing: border-box;
}
form.row.bottom label.check { min-height: 42px; align-items: center; margin: 0; }
/* Ends one line of a wrapping form row and starts the next (the mail filter
   form: "If ..." on one line, "Then ..." on the next). */
form.row .row-break { flex: 1 1 100%; height: 0; margin: 0; }
/* A one-line "add" form (New mailbox, New alias): fields side by side, the
   button at the end of the same line. A .field's own bottom margin would
   otherwise sit under its input and push the button 14px low (measured). */
form.row.inline-add > .field { margin-bottom: 0; }
form.row.inline-add > .field.narrow { flex: 0 0 120px; }
form.row.inline-add > .field.narrow input { width: 100%; }
/* The terminal's keyboard catcher must stay a 1px box. The general field rule
   above (and app.css's width: 100%) outranks `.term-input`, and this input is
   absolutely positioned OUTSIDE the terminal box — so "100%" meant the whole
   window plus padding. The page grew wider than the screen, the terminal
   focused the input, and the browser scrolled sideways to show it, pushing
   the sidebar off the left edge. Pinned, and contained by its card. */
.term-card { position: relative; }
/* The page must never anchor its scroll position to a line inside the
   terminal: those lines are replaced wholesale on every redraw. */
.term-screen, .term-screen * { overflow-anchor: none; }
input.term-input {
  position: absolute; left: 0; top: 0;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  box-shadow: none !important;
}

/* Status pills. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel-2); color: var(--dim);
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.pill.ok      { background: var(--ok-soft);     color: var(--ok);   border-color: transparent; }
.pill.warn    { background: var(--warn-soft);   color: var(--warn); border-color: transparent; }
.pill.bad     { background: var(--bad-soft);    color: var(--bad);  border-color: transparent; }
.pill.neutral { background: var(--panel-2);     color: var(--dim); }

/* Tables: sentence-case headers, room to breathe, a hover row. */
table { font-size: 14px; }
thead th, th {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
tbody td, td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
}
tbody tr:hover td { background: var(--panel-2); }

/* Notices. */
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border: 1px solid transparent; border-left-width: 4px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
}
.flash.ok             { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok); }
.flash.warn           { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.flash.error, .flash.bad, .flash.err { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* Counter tiles (dashboards). */
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
a.tile:hover, .tile:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tile-n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.tile-l { font-size: 13px; color: var(--dim); opacity: 1; }
.tile-note { color: var(--faint); opacity: 1; }

/* Meters and bars. */
.meter { background: var(--line); border-radius: 99px; height: 8px; }
.meter .fill { background: var(--accent); border-radius: 99px; }
.meter .fill.hot { background: var(--bad); }
.bar { background: var(--line); border-radius: 99px; height: 7px; }
.bar > i { border-radius: 99px; background: var(--ok); }
.bar.warn > i { background: var(--warn); }
.bar.critical > i { background: var(--bad); }

/* Tabs that are links. */
.tab-bar { gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; width: fit-content; max-width: 100%; }
.tab-bar a, .tab-bar label {
  padding: 6px 13px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  font-size: 13px; font-weight: 600;
}
.tab-bar a:hover, .tab-bar label:hover { color: var(--text); border: 0; }
.tab-bar a.is-on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); border: 0; }

/* ── the dashboard's Tools panel (views/my/dashboard.php) ──────────────────
   One tone per menu group, so a section is found by colour before it is read.
   Tone tokens follow the same three-state theme selectors as the palette. */
:root, :root.theme-light {
  --tone-1-bg: #e7f0ff; --tone-1: #0d6efd;
  --tone-2-bg: #e6f7ee; --tone-2: #12a150;
  --tone-3-bg: #fff1dc; --tone-3: #c26a05;
  --tone-4-bg: #f1eafe; --tone-4: #7a4dd8;
  --tone-5-bg: #e5f6f8; --tone-5: #0e8da0;
  --tone-6-bg: #fde8ef; --tone-6: #c8316b;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --tone-1-bg: #16284a; --tone-1: #6ea8ff;
    --tone-2-bg: #11301f; --tone-2: #3ccb7f;
    --tone-3-bg: #33240d; --tone-3: #f2a33a;
    --tone-4-bg: #24193f; --tone-4: #b393f5;
    --tone-5-bg: #0e2b30; --tone-5: #4fc8dc;
    --tone-6-bg: #3a1426; --tone-6: #f0709c;
  }
}
:root.theme-dark {
  --tone-1-bg: #16284a; --tone-1: #6ea8ff;
  --tone-2-bg: #11301f; --tone-2: #3ccb7f;
  --tone-3-bg: #33240d; --tone-3: #f2a33a;
  --tone-4-bg: #24193f; --tone-4: #b393f5;
  --tone-5-bg: #0e2b30; --tone-5: #4fc8dc;
  --tone-6-bg: #3a1426; --tone-6: #f0709c;
}
.ui-tone { display: grid; place-items: center; flex: none; border-radius: 10px; }
.ui-tone-1 { background: var(--tone-1-bg); color: var(--tone-1); }
.ui-tone-2 { background: var(--tone-2-bg); color: var(--tone-2); }
.ui-tone-3 { background: var(--tone-3-bg); color: var(--tone-3); }
.ui-tone-4 { background: var(--tone-4-bg); color: var(--tone-4); }
.ui-tone-5 { background: var(--tone-5-bg); color: var(--tone-5); }
.ui-tone-6 { background: var(--tone-6-bg); color: var(--tone-6); }
.ui-tools { padding-bottom: 6px; }
.ui-tools .card-head .hint { margin: 0 0 0 auto; }
.ui-tools-sec { padding: 14px 0 16px; border-top: 1px solid var(--line-soft); }
.ui-tools .card-head + .ui-tools-sec { border-top: 0; padding-top: 2px; }
.card h3.ui-tools-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 13.5px;
}
.ui-tools-head .ui-tone { width: 26px; height: 26px; border-radius: 7px; }
.ui-tools-head .ui-i { width: 15px; height: 15px; }
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ui-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.ui-tile:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.ui-tile .ui-tone { width: 40px; height: 40px; }
.ui-tile .ui-i { width: 20px; height: 20px; }
.ui-tile b { display: block; font-size: 13.5px; font-weight: 600; }
.ui-tile small { display: block; color: var(--faint); font-size: 12px; line-height: 1.35; }

/* ── the admin dashboard (views/dashboard.php) ─────────────────────────── */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dash-head .btn-row { margin: 0; }

.dash-health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; }
.dash-health-main { display: flex; align-items: center; gap: 12px; }
.dash-health-main b { display: block; font-size: 15.5px; }
.dash-health-main small { color: var(--dim); font-size: 12.5px; }
.dash-health-ring {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok);
}
.dash-health-ring .ui-i { width: 22px; height: 22px; }
.dash-health.has-issues .dash-health-ring { background: var(--warn-soft); color: var(--warn); }
.dash-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dash-group {
  display: grid; gap: 1px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.dash-group:hover { border-color: var(--accent); color: var(--text); }
.dash-group span { font-size: 12px; font-weight: 600; color: var(--faint); }
.dash-group b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-variant-numeric: tabular-nums; }
.dash-group i, .dash-svc li i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ok); }
.dash-group i.bad, .dash-svc li i.bad { background: var(--bad); }
.dash-svc li i.warn { background: var(--warn); }
.dash-issues { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-issues li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 13.5px; font-weight: 500;
}
.dash-issues li.bad { background: var(--bad-soft); color: var(--bad); }
.dash-issues li a { margin-left: auto; color: inherit; font-weight: 600; text-decoration: underline; }

/* Setup checklist: first on the admin dashboard until every step is done, then
   one folded line (a <details>) that opens to the same list. */
/* .card.setup, not .setup: a phone-width .card rule further down would win. */
.card.setup { padding: 0; overflow: hidden; }
.setup-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.setup-complete > summary { cursor: pointer; list-style: none; }
.setup-complete > summary::-webkit-details-marker { display: none; }
.setup-head h2 { margin: 0; font-size: 16px; }
.setup-head p { margin: 2px 0 0; color: var(--dim); font-size: 12.5px; }
.setup-ring {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.setup-ring.ok { background: var(--ok-soft); color: var(--ok); }
.setup-ring .ui-i { width: 22px; height: 22px; }
.setup-prog { margin-left: auto; min-width: 170px; display: grid; gap: 6px; font-size: 12.5px; color: var(--dim); }
.setup-prog b { color: var(--text); }
.setup-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.setup-list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
}
.setup-list li:last-child { border-bottom: 0; }
.setup-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line-strong); box-sizing: border-box;
}
.setup-dot .ui-i { width: 14px; height: 14px; }
.setup-list li.done .setup-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-list li.done b { color: var(--dim); font-weight: 600; }
.setup-list li.next .setup-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.setup-list b { display: block; font-size: 14px; }
.setup-list small { display: block; color: var(--dim); font-size: 12.5px; }
.btn.setup-go { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
/* The choices on a step: remind me later, not needed, undo. Quiet text
   buttons, so the step's own action stays the one that stands out. */
.setup-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.setup-act button.link { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.setup-act button.link:hover { color: var(--accent-strong); }
.setup-list li.skipped b, .setup-list li.snoozed b { color: var(--dim); font-weight: 600; }
.setup-list li.skipped .setup-dot, .setup-list li.snoozed .setup-dot { color: var(--dim); border-style: dashed; }
.setup-list li.skipped .setup-dot .ui-i, .setup-list li.snoozed .setup-dot .ui-i { width: 12px; height: 12px; }
.setup-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; border-top: 1px solid var(--line); background: var(--panel-2);
  font-size: 12.5px; color: var(--dim);
}
/* Hidden: one line, and a way back. */
.card.setup-min { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.setup-min .setup-ring { width: 32px; height: 32px; border-radius: 9px; }
.setup-min .setup-ring .ui-i { width: 17px; height: 17px; }
.setup-min > span:nth-child(2) { flex: 1; min-width: 0; }
.setup-min b { display: block; font-size: 13.5px; }
.setup-min small { color: var(--dim); font-size: 12.5px; }
@media (max-width: 640px) {
  .setup-prog { margin-left: 0; width: 100%; }
  .setup-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .setup-list li .setup-acts { grid-column: 2; justify-content: flex-start; }
}

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card.dash-kpi {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 14px 16px;
  color: var(--text); text-decoration: none;
}
.card.dash-kpi:hover { border-color: var(--accent); color: var(--text); }
.dash-kpi .ui-tone { width: 40px; height: 40px; }
.dash-kpi b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-kpi small { color: var(--dim); font-size: 12.5px; }

/* ── Customer and reseller dashboards (cd-*), reseller pages (rs-*) ────────
   Built on the admin dashboard's pieces above, so the three read as one
   product; only what they add is here. */
.cd-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── customer home: a task search, the tasks, and the account on the side ── */
.home-ask { margin: 2px 0 20px; }
.home-ask-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.home-ask-top .cd-sub { margin: 0; color: var(--dim); font-size: 13px; }
.home-ask h1 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 14px; text-wrap: balance; }
.home-search {
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; min-height: 54px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.home-search > .ui-i { color: var(--faint); flex: none; }
/* !important on the box only: shell.css styles every input with seven
   :not([type=…]) clauses, specificity 0,7,1, which no sane selector here beats.
   The bar is the box; the input inside it must not draw a second one. */
.home-search input[type=search] {
  flex: 1; min-width: 0; outline: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;
  font: 500 15px var(--font); color: var(--text);
}
.home-search .btn { flex: none; }
.home-found { margin-top: 8px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.home-main, .home-side { display: grid; gap: 18px; min-width: 0; }
.home-main > .card, .home-side > .card { margin: 0; }
/* Masonry, not a grid (Benjamin, 2026-09-26): in a grid every card in a row
   stretched to the tallest, so Email's one link sat on a Domains-sized card.
   Columns stack the cards and balance the two column heights. */
.home-groups { columns: 2 240px; column-gap: 14px; }
.home-group { margin: 0 0 14px; padding: 16px; break-inside: avoid; display: block; }
.home-wide { grid-column: 1 / -1; margin: 0; }
.home-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 14px; }
.home-feat { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px; color: inherit; text-decoration: none; border-color: var(--line-strong, var(--line)); }
.home-feat:hover { border-color: var(--accent); }
.home-feat .ui-tone { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.home-feat .ui-tone svg { width: 22px; height: 22px; }
.home-feat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-feat-body b { font-size: 15px; }
.home-feat-body small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* Mail delivery checks: how a domain's mail leaves, where its DNS lives, and
   the health badges on the Mail domains list and the dashboards. */
.pill.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); border-color: transparent; }
.md-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 12px 0; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.md-facts > div { background: var(--panel-2); padding: 10px 14px; min-width: 0; }
.md-facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 2px; }
.md-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.md-facts dd.hint { font-weight: 400; font-size: 12.5px; }
.md-where { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); }
.md-where p { margin: 0; }
.md-where-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.md-chip { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); background: var(--panel); text-decoration: none; }
.md-chip b { margin-left: 3px; }
.md-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.md-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.md-b { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--line-soft); color: var(--faint); }
.md-b.ok { background: var(--ok-soft); color: var(--ok); }
.md-b.warn { background: var(--warn-soft); color: var(--warn); }
.md-b.bad { background: var(--bad-soft); color: var(--bad); }
.md-b.wait { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.md-b.none { background: var(--line-soft); color: var(--faint); }
.md-why { margin-top: 5px; font-size: 12.5px; color: var(--dim); max-width: 380px; }
.md-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.md-row-wait td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.md-alert { border-left: 4px solid var(--bad); }
.md-alert-list { margin: 6px 0 12px; padding-left: 18px; }
.md-alert-list li { margin: 3px 0; overflow-wrap: anywhere; }
/* Dismissing them (his ask, 2026-10-09): a button per row, one row of actions. */
.md-alert-list { list-style: none; padding-left: 0; }
.md-alert-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.md-alert-list li:first-child { border-top: 0; }
.md-alert-text { flex: 1; min-width: 0; }
.md-alert-x { flex-shrink: 0; min-height: 36px; }
.md-alert-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.md-alert-acts .btn { min-height: 36px; }
.card.md-alert-min .link { font-weight: 600; padding: 8px 4px; }
/* Every kind of alert (views/_alerts.php, alerts.php): a small kind tag in
   the level's colour, the detail under the title. */
.md-alert.warn { border-left-color: var(--warn); }
.al-kind { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px;
  margin-right: 6px; background: var(--warn-soft); color: var(--warn); vertical-align: 1px; }
.al-kind.bad { background: var(--bad-soft); color: var(--bad); }
.al-detail { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.al-status, .al-kinds { margin-bottom: 10px; }
.al-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.al-filter .md-chips { margin: 0 8px 0 0; }
.al-filter input[type=search] { flex: 1 1 200px; min-width: 0; max-width: 320px; }
.al-filter select { max-width: 220px; }
.al-acts { display: flex; gap: 6px; justify-content: flex-end; }
.al-acts .btn, .al-status .md-chip, .al-kinds .md-chip, .al-filter .btn { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .md-alert-list li { flex-wrap: wrap; }
  .al-filter input[type=search], .al-filter select { max-width: none; flex: 1 1 100%; }
}

/* An account's load (_load_panels.php): the account's own limits and the
   work shared services did for it, plus the per-hour chart. */
.ld-why { background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.ld-why p { margin: 0; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ld-grid > .card { margin: 0; }
.ld-where { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
/* A heading row across a form grid (the reseller plan form's Shared services). */
.form-group-head { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.form-group-head h3 { font-size: 14px; margin: 0; }
.form-group-head p { margin: 2px 0 0; }
.ld-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ld-m:last-child, .ld-grid > .ld-m { border-bottom: 0; }
.ld-m .bar { grid-column: 1 / -1; min-width: 0; height: 8px; }
.ld-m small { grid-column: 1 / -1; color: var(--dim); font-size: 12.5px; }
.ld-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-spark { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-top: 6px; }
.ld-spark i { flex: 1; min-width: 0; background: var(--accent); opacity: .55; border-radius: 2px 2px 0 0; height: 2px; }
.ld-spark i.hot { background: var(--warn); opacity: 1; }
.ld-spark i.h0 { height: 2px; } .ld-spark i.h1 { height: 5%; } .ld-spark i.h2 { height: 10%; } .ld-spark i.h3 { height: 15%; }
.ld-spark i.h4 { height: 20%; } .ld-spark i.h5 { height: 25%; } .ld-spark i.h6 { height: 30%; } .ld-spark i.h7 { height: 35%; }
.ld-spark i.h8 { height: 40%; } .ld-spark i.h9 { height: 45%; } .ld-spark i.h10 { height: 50%; } .ld-spark i.h11 { height: 55%; }
.ld-spark i.h12 { height: 60%; } .ld-spark i.h13 { height: 65%; } .ld-spark i.h14 { height: 70%; } .ld-spark i.h15 { height: 75%; }
.ld-spark i.h16 { height: 80%; } .ld-spark i.h17 { height: 85%; } .ld-spark i.h18 { height: 90%; } .ld-spark i.h19 { height: 95%; }
.ld-spark i.h20 { height: 100%; }
.ld-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 3px; }
.ld-pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line-soft); color: var(--dim); }
.ld-pill.warn { background: var(--warn-soft); color: var(--warn); }
.ld-pill.bad { background: var(--bad-soft); color: var(--bad); }
.ld-pill.ok { background: var(--ok-soft); color: var(--ok); }
.ld-tips { margin: 0; padding-left: 18px; }
.ld-tips li { margin: 4px 0; }
.home-group[hidden], .home-group li[hidden], .home-empty[hidden] { display: none !important; }
.home-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 14.5px; }
.home-group h3 .ui-tone { width: 28px; height: 28px; }
.home-group h3 .ui-tone .ui-i { width: 15px; height: 15px; }
.home-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-group a {
  display: grid; gap: 1px; padding: 9px 11px; border-radius: 9px; background: var(--panel-2);
  color: var(--text); text-decoration: none;
}
.home-group a b { font-size: 13.5px; font-weight: 600; }
.home-group a small { font-size: 12px; color: var(--dim); }
.home-group a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.home-empty { padding: 26px; text-align: center; color: var(--dim); }
.home-upgrade { display: grid; gap: 8px; justify-items: start; }
.home-upgrade .card-head { margin: 0; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-kpis.cd-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card.dash-kpi.cd-kpi { flex-direction: column; align-items: stretch; gap: 10px; }
.cd-kpi-top { display: flex; align-items: center; gap: 12px; }
.cd-kpi .bar { min-width: 0; height: 6px; }
.dash-kpi b small.cd-of { display: inline; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.cd-more { color: var(--faint); font-size: 12px; }
.cd-sites { list-style: none; margin: 0; padding: 0; }
.cd-sites li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.cd-sites li:last-child { border-bottom: 0; }
.cd-fav { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim); }
.cd-fav .ui-i { width: 16px; height: 16px; }
.cd-site { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cd-site b { font-size: 14px; overflow-wrap: anywhere; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-site-acts { display: flex; gap: 6px; }
.cd-rr { grid-template-columns: 100px minmax(0, 1fr) 130px; }
.cd-quick { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.rs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card.rs-kpi { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; }
.rs-kpi .ui-tone { width: 40px; height: 40px; }
.rs-kpi b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rs-kpi b small { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.rs-kpi em { display: block; font-style: normal; color: var(--dim); font-size: 12.5px; }
.tbl-scroll { overflow-x: auto; }
.rs-table table { width: 100%; }
.rs-sub { display: block; color: var(--faint); font-size: 12px; font-weight: 400; }
.rs-sub-cell { color: var(--dim); font-size: 12.5px; }
.rs-disk { min-width: 180px; }
.rs-disk .bar { display: inline-block; vertical-align: middle; width: 90px; min-width: 0; margin-right: 8px; }
.rs-disk .mono { font-size: 12px; color: var(--dim); }
.rs-acts { display: flex; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.act.is-off { opacity: .45; cursor: not-allowed; }
.act.is-off:hover { border-color: var(--line); }
.rs-empty { margin: 4px 0; }
.rs-foot { margin: 10px 0 0; }
.card.rs-soon { display: flex; gap: 16px; align-items: flex-start; }
.rs-soon .ui-tone { width: 44px; height: 44px; }
.rs-soon h2 { margin: 0 0 4px; }
/* A reseller and all their customers, summed: a row of figures, not KPI cards. */
/* Reseller home: customer cards, their packages, and their brand as customers see it. */
.rs-find { margin: 0; }
.rs-find .acc-search { min-width: 220px; }
.rs-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.rs-main, .rs-side { display: grid; gap: 14px; min-width: 0; }
.rs-main > .card, .rs-side > .card { margin: 0; }
.rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card.rs-client { padding: 16px; display: grid; gap: 12px; margin: 0; }
.rs-client-top { display: flex; gap: 11px; align-items: flex-start; }
.rs-client-top .ui-avatar { width: 38px; height: 38px; flex: none; }
.rs-client-name { min-width: 0; }
.rs-client-top b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.rs-client-top small { color: var(--dim); font-size: 12.5px; overflow-wrap: anywhere; }
.rs-client-top .pill { margin-left: auto; flex: none; }
.rs-use { display: grid; gap: 5px; font-size: 12.5px; color: var(--dim); }
.rs-client-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-client-acts form { display: flex; flex: 1 1 auto; margin: 0; }
.rs-client-acts .btn { flex: 1 1 auto; justify-content: center; }
.rs-new {
  display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 150px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--dim); text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.rs-new:hover { border-color: var(--accent); color: var(--accent); }
.rs-pk { list-style: none; margin: 0; padding: 0; }
.rs-pk li { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.rs-pk li:last-child { border-bottom: 0; }
.rs-pk li > span:nth-child(2) { min-width: 0; }
.rs-pk b { display: block; font-size: 13.5px; }
.rs-pk small { color: var(--dim); font-size: 12px; }
.rs-pk .n { margin-left: auto; color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.brand-prev { background: var(--side-bg); border-radius: var(--radius-sm); padding: 14px; display: grid; gap: 10px; }
.brand-prev-top { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.brand-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; }
.brand-prev-sup { border-radius: 8px; background: rgba(255, 255, 255, .06); padding: 10px 12px; color: var(--side-text); font-size: 12px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.brand-prev-sup b { color: #fff; font-size: 13px; }
.brand-prev-up { color: var(--side-text); font-size: 12px; }
@media (max-width: 1100px) { .rs-grid { grid-template-columns: minmax(0, 1fr); } }

.rs-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin: 4px 0 14px; }
.rs-tot b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rs-tot small { display: block; color: var(--dim); font-size: 12.5px; }
.rs-tot b small.cd-of { display: inline; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--faint); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Bandwidth page: one bar per month, all on the same scale. */
.bw-bar { display: block; width: 100%; min-width: 0; }
.bw-cell { width: 55%; min-width: 120px; }
.acc-chips.bw-months { margin: 0 0 14px; flex-wrap: wrap; }
/* The bandwidth graph (_bw_graph.php): filters, a server-drawn SVG bar chart
   whose geometry is in attributes (CSP drops inline styles), hover detail from
   each bar's <title>. The SVG scales to the card; nothing here is hover-only. */
.bwg { min-width: 0; }
.bwg-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.bwg-filters label { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; font-size: 12.5px; color: var(--dim); }
.bwg-filters select, .bwg-filters input { width: 100%; min-width: 0; min-height: 36px; }
.bwg-filters .btn { min-height: 36px; flex: 0 0 auto; }
.bwg-head { align-items: center; gap: 8px; }
.bwg-head h2 { flex: 1 1 auto; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.bwg-head .act { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 20px; line-height: 1; }
.bwg-head .act:hover, .bwg-head .act:focus-visible { border-color: var(--accent); color: var(--accent); }
.bwg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin: 4px 0 12px; }
.bwg-stats b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bwg-stats small { display: block; color: var(--dim); font-size: 12.5px; }
.bwg-chart { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.bwg-axis { stroke: var(--line); stroke-width: 1; }
.bwg-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.bwg-tick { fill: var(--faint); font-size: 11px; font-family: inherit; }
.bwg-bar { fill: var(--accent); }
.bwg-bar:hover { fill: var(--accent-strong, var(--accent)); }
.bwg-old { fill: var(--faint); }
.bwg-part { fill: var(--accent); fill-opacity: .55; }  /* partly counted: detail began inside it */
.bwg-none { fill: var(--line); }                       /* not counted: a mark, never a "zero" bar */
.bwg-top .num, .bwg-figures .num { white-space: nowrap; }
/* Every bar as figures: what the bars' hover titles say, for touch screens
   (which show no title) and screen readers. Folded until asked for. */
.bwg-figures { margin: 10px 0 4px; }
.bwg-figures summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--accent); font-size: 13px; }
.bwg-figures .tbl-scroll { position: relative; max-height: 320px; overflow-y: auto; }
@media (max-width: 640px) {
  .bwg-tick { font-size: 22px; }  /* the chart's units shrink with the card; ticks stay readable */
  .bwg-filters .btn { width: 100%; }
}
/* Logs page (D-BP): a console tall enough to read, scrolling in its own box;
   a long request line wraps anywhere rather than widening the page. */
.lg-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.lg-pick label { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.lg-pick label:first-of-type { flex: 1 1 220px; }
.lg-pick select { width: 100%; max-width: 100%; min-height: 36px; }
.lg-pick .btn { min-height: 36px; }
pre.joblog.lg-view { max-height: 70vh; min-height: 8rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
.lg-foot { margin: 6px 0 0; }

/* A row menu's close button (added by panel.js to every open .rowmenu-body). */
.rowmenu-body.has-close { padding-right: 2.4rem; }
.rowmenu-close {
  position: absolute; top: .4rem; right: .4rem;
  width: 26px; height: 26px; padding: 0; box-sizing: border-box;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2); color: var(--dim);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.rowmenu-close:hover, .rowmenu-close:focus-visible { color: var(--text); border-color: var(--line-strong); }

/* ── Create an account (accounts/new.php) ─────────────────────────────────── */
.ca-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ca-main, .ca-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ca-main > .card, .ca-side > .card { margin: 0; }
.ca-side { position: sticky; top: 16px; }
.ca-step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.ca-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ca-plan { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: var(--panel); cursor: pointer; }
.ca-plan > input { position: absolute; opacity: 0; pointer-events: none; }
.ca-plan:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ca-plan:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ca-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid var(--line-strong); }
.ca-plan:has(> input:checked) .ca-tick { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); }
.ca-plan > b { font-size: 15px; padding-right: 26px; }
.ca-big { font-size: 20px; font-weight: 800; margin: 4px 0 6px; letter-spacing: -.02em; }
.ca-big small { font-size: 12.5px; color: var(--faint); font-weight: 600; }
.ca-lines { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--dim); }
.ca-more { margin-top: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 14px; }
.ca-more > summary { cursor: pointer; font-weight: 600; }
.ca-list { margin: 0 0 12px; padding-left: 18px; color: var(--dim); display: grid; gap: 6px; font-size: 13px; }
.btn.ca-go { width: 100%; justify-content: center; padding: 11px 16px; margin-top: 10px; }
.ca-cancel { text-align: center; margin: 8px 0 0; font-size: 13px; }
.ca-cap { margin: 0; }
/* A plan the reseller cannot sell: shown, with the reason, and not choosable. */
.ca-plan.ca-off { opacity: .6; cursor: not-allowed; border-style: dashed; }
.ca-why { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--bad); }
@media (max-width: 900px) { .ca-layout { grid-template-columns: minmax(0, 1fr); } .ca-side { position: static; } }

/* ── Packages (packages.php) ──────────────────────────────────────────────── */
.acc-chips.pk-chips { margin: 0 0 14px; flex-wrap: wrap; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.card.pk-card { display: flex; flex-direction: column; margin: 0; padding: 0; }
.pk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 14px 16px 0; }
.pk-top b { display: block; font-size: 16px; }
.pk-top .mono { display: block; font-size: 12px; }
.pk-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
.pk-figs small { display: block; color: var(--faint); font-size: 11.5px; font-weight: 600; }
.pk-figs b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pk-inc { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.pk-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pk-foot > .hint { margin-right: auto; }
.pk-foot form { margin: 0; }
.pk-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pk-edit-main, .pk-edit-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pk-edit-main > .card, .pk-edit-side > .card { margin: 0; }
.pk-edit-side { position: sticky; top: 16px; }
label.check.pk-opt { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
.pk-opt > span { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 900px) { .pk-edit { grid-template-columns: minmax(0, 1fr); } .pk-edit-side { position: static; } }
.card.ac-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ac-hero .ac-av { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; flex: 0 0 auto; }
.ac-who { flex: 1 1 320px; min-width: 0; }
.ac-who h1 { margin: 0; font-size: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ac-who .sub { margin: 2px 0 0; overflow-wrap: anywhere; }
.ac-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-acts form { margin: 0; }
.ac-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.card.ac-u { padding: 14px 16px; margin: 0; }
.ac-u small { display: block; color: var(--dim); font-size: 12px; font-weight: 600; }
.ac-u b { display: block; font-size: 18px; font-weight: 700; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.ac-u b em { font-style: normal; font-size: 12.5px; color: var(--faint); font-weight: 600; margin-left: 4px; }
.ac-u .bar { display: block; height: 6px; min-width: 0; }
/* The strip's line is an inset shadow, not a border, so the active tab's
   underline can sit on it without leaving the box. It used to be a border plus
   `margin-bottom: -1px` on each tab: that overflowed the strip by one pixel, and
   because overflow-x is auto (it must scroll sideways on a phone) the browser
   makes overflow-y auto as well - so every account page grew a vertical
   scrollbar beside its tabs. overflow-y: hidden says so explicitly too. */
.ac-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); margin: 0 0 16px; overflow-x: auto; overflow-y: hidden; }
.ac-tabs a { padding: 10px 14px; font-weight: 600; color: var(--dim); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.ac-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.ac-tabs a.ac-dz { color: var(--bad); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ac-grid > .card { margin: 0; min-width: 0; }
.ac-plan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.ac-plan b { margin-right: 6px; }
.ac-mt { margin-top: 14px; }
.ac-more { margin-top: 14px; }
.ac-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ac-more > summary::-webkit-details-marker { display: none; }
.ac-more[open] > summary { margin-bottom: 10px; }
/* PHP per site: the dropdown and Apply on one line, the column only as wide as that. */
.ac-shrink { width: 1%; white-space: nowrap; }
.ac-inline { display: flex; gap: 8px; align-items: center; margin: 0; }
.ac-inline select { min-width: 0; width: auto; }
/* Packages: the "this brings plans down" confirmation, and the reseller note. */
.card.pk-confirm { border-color: var(--warn, #b86304); }
.pk-confirm table { width: 100%; }
.pk-reseller-note { border-left: 3px solid var(--accent, #0d6efd); padding-left: 10px; }
.ui-tile.rs-tile-soon { border-style: dashed; }
.ui-tile.rs-tile-soon .pill { margin-left: 4px; }

.dash-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.dash-row > .card { margin: 0; }
.card-head .hint { margin: 0 0 0 auto; }

.dash-res { display: grid; gap: 14px; }
/* The value column fits "323,560 / 500,000" and "2.3 GB (no limit)" on one
   line (~125px in the mono face); the bar takes what is left. */
.dash-rr { display: grid; grid-template-columns: 130px minmax(0, 1fr) 140px; gap: 14px; align-items: center; }
.dash-rr > span:first-child b { display: block; font-size: 13.5px; }
.dash-rr > span:first-child small { color: var(--faint); font-size: 12px; }
.dash-rr .bar { height: 8px; min-width: 0; }
.dash-v { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.dash-v b { display: block; font-family: var(--font); font-size: 15px; color: var(--text); }

/* The capacity bar: three layers of one .bar, drawn widest first. */
.bar.dash-stack { position: relative; height: 14px; min-width: 0; margin: 4px 0 14px; }
.bar.dash-stack > i { position: absolute; left: 0; top: 0; bottom: 0; }
.dash-sold   { background: var(--warn-soft); }
.bar.dash-stack > i.dash-sold { background: var(--warn-soft); box-shadow: inset -2px 0 0 var(--warn); }
.dash-backed, .bar.dash-stack > i.dash-backed { background: var(--accent-soft); }
.dash-used, .bar.dash-stack > i.dash-used { background: var(--accent); }
.dash-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dash-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.dash-legend b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.dash-legend small { grid-column: 2 / -1; color: var(--faint); font-size: 12px; }
.dash-sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.dash-callout {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 9px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 13px; font-weight: 500;
}
.dash-callout.bad { background: var(--bad-soft); color: var(--bad); }

.dash-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 0; }
.dash-svc-group { padding: 0 16px; border-left: 1px solid var(--line-soft); }
.dash-svc-group:first-child { border-left: 0; padding-left: 0; }
.card .dash-svc-group h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .02em; }
.dash-svc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dash-svc-group li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dash-svc-group li small { margin-left: auto; color: var(--warn); font-size: 11px; }

.dash-feed { list-style: none; margin: 0; padding: 0; }
.dash-feed li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.dash-feed li:last-child { border-bottom: 0; }
.dash-feed .ui-tone { width: 32px; height: 32px; border-radius: 9px; }
.dash-feed .ui-tone .ui-i { width: 16px; height: 16px; }
.dash-feed b { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.dash-feed small { color: var(--faint); font-size: 12px; }
.dash-feed time { color: var(--faint); font-size: 12px; white-space: nowrap; }

.dash-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13.5px; }
.dash-kv dt { color: var(--dim); }
.dash-kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.dash-kv dd .hint { display: block; margin: 2px 0 0; font-size: 11.5px; }
.dash-php { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.dash-php span {
  font-family: var(--font-mono); font-size: 11.5px;
  padding: 1px 6px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
}
.dash-php span.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); font-weight: 600; }

/* ── the accounts list (views/accounts/index.php) ─────────────────────── */
.card.dash-kpi.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acc-sum { margin-bottom: 16px; }
.acc-card { padding: 0; overflow: visible; }
.acc-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.acc-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 240px; max-width: 360px; margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--panel); color: var(--faint);
}
.acc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acc-search input[type=search] {
  flex: 1; min-width: 0; width: auto;
  padding: 8px 0; border: 0 !important; box-shadow: none !important; background: transparent;
}
.acc-chips {
  display: flex; gap: 4px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.acc-chips a {
  padding: 5px 11px; border-radius: 7px;
  color: var(--dim); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.acc-chips a:hover { color: var(--text); }
.acc-chips a.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.acc-n { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-left: 5px; }
select.acc-select { width: auto; padding: 8px 10px; font-size: 13px; }
.acc-go { padding: 8px 12px; }
.acc-shown { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.acc-table { overflow-x: auto; }
/* Nine columns in a ~1000px card: the cells are packed tighter than the
   panel's default table so the row fits without a sideways scroll on a normal
   laptop. The scroll stays as the fallback for anything narrower. */
.acc-table table { min-width: 820px; }
.acc-table th, .acc-table td { padding-left: 8px; padding-right: 8px; }
.acc-table th:first-child, .acc-table td:first-child { padding-left: 18px; }
.acc-table th:last-child, .acc-table td:last-child { padding-right: 18px; }
.acc-who { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.acc-who b { display: block; font-weight: 600; }
.acc-who b a { color: var(--text); }
.acc-who b a:hover { color: var(--accent); }
.acc-who small { display: block; color: var(--faint); font-size: 12px; }
.ui-avatar.acc-av-0 { background: linear-gradient(150deg, #3e8bff, #6c5ce7); }
.ui-avatar.acc-av-1 { background: linear-gradient(150deg, #12a150, #0e8da0); }
.ui-avatar.acc-av-2 { background: linear-gradient(150deg, #f2a33a, #e0582c); }
.ui-avatar.acc-av-3 { background: linear-gradient(150deg, #c8316b, #7a4dd8); }
.pill.acc-plan { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.pill.acc-res { background: var(--tone-4-bg); color: var(--tone-4); border-color: transparent; }
.acc-use { min-width: 112px; }
.acc-use small { white-space: nowrap; }
.acc-use .bar { min-width: 0; height: 6px; margin-bottom: 4px; }
.acc-use small { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
/* The files bar under the disk bar, in the same cell. */
.acc-use.acc-use-2 { margin-top: 6px; }
.acc-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.acc-act form { margin: 0; }
.acc-owner { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-iconbtn.warn:hover { color: var(--warn); border-color: var(--warn); }
/* Suspend asks first: an HTML popover, drawn in the top layer (centred by the
   browser), so the table's scrolling cannot clip it. */
.acc-susp-pop {
  width: min(380px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.acc-susp-pop::backdrop { background: rgba(15, 23, 42, .35); }
.acc-susp-pop form { display: grid; gap: 9px; text-align: left; }
.acc-susp-pop b { font-size: 16px; }
.acc-susp-pop small { color: var(--dim); font-size: 13px; }
.acc-susp-pop label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.acc-susp-pop input[type=text] { width: 100%; box-sizing: border-box; }
.acc-susp-pop .btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
/* A small modal for one action on one row (Change password, Set limit,
   Delete): a native popover, so it sits in the top layer, closes on Esc and
   needs no script. Title and a close button along the top, the action at the
   bottom right. */
.ui-modal {
  width: min(420px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 0; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.ui-modal::backdrop { background: rgba(15, 23, 42, .35); }
.ui-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line-soft);
}
.ui-modal-head b { font-size: 16px; }
.ui-modal-head .mono { font-size: 13px; color: var(--dim); display: block; font-weight: 400; margin-top: 2px; word-break: break-all; }
.ui-modal-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--dim); cursor: pointer;
}
.ui-modal-close:hover { color: var(--text); border-color: var(--line); }
.ui-modal-close .ui-i { width: 16px; height: 16px; }
.ui-modal form { margin: 0; }
.ui-modal-body { display: grid; gap: 8px; padding: 16px 20px; text-align: left; }
.ui-modal-body label { font-size: 13px; font-weight: 600; }
.ui-modal-body label.check { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.ui-modal-body input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.ui-modal-body .hint { margin: 0; }
.ui-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px; border-top: 1px solid var(--line-soft);
}
.mb-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mb-acts.one-line { flex-wrap: nowrap; }
/* The same modal, opened by the server (a page loaded with ?view=): an open
   <dialog>, fixed over the page, closed by a link back. */
dialog.ui-modal-fixed[open] {
  position: fixed; top: 8vh; left: 0; right: 0; margin: 0 auto; z-index: 1000;
  width: min(720px, calc(100vw - 32px)); max-height: 84vh; overflow: auto;
}
dialog.ui-modal-fixed pre { max-height: 55vh; overflow: auto; margin: 0; }
/* A small form in a card's heading row (a filter): one line, the select no
   wider than its options (app.css makes selects 100% wide). */
.card-head form.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.card-head form.inline select { width: auto; min-width: 150px; }
/* A filter button showing the filter in force. */
.act.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* A card that opens and closes (a <details>): the heading row is the
   control, with what it holds summarised beside the title. No script. */
.card-fold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.card-fold > summary::-webkit-details-marker { display: none; }
.card-fold > summary h2 { margin: 0; padding: 0; border: 0; }
.card-fold > summary .hint { margin: 0; }
.card-fold-i { margin-left: auto; display: inline-flex; color: var(--dim); transition: transform .15s; }
.card-fold-i .ui-i { width: 18px; height: 18px; }
.card-fold[open] > summary { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.card-fold[open] .card-fold-i { transform: rotate(180deg); }
/* The certificate card folded: which site, what it covers, until when - a
   long line wraps under the title rather than squeezing it. */
.ssl-card > summary { flex-wrap: wrap; row-gap: 4px; }
.ssl-fold-dom { font-size: 13px; font-weight: 500; color: var(--dim); margin-left: 6px; }
.btn.acc-manage { padding: 6px 12px; font-size: 13px; }
.ui-iconbtn.acc-login { width: 32px; height: 32px; border-radius: 8px; }
.ui-iconbtn.acc-login .ui-i { width: 16px; height: 16px; }
.pager.acc-pager { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line-soft); }
.pager.acc-pager .steps a, .pager.acc-pager .steps span { border-color: var(--line); border-radius: 8px; padding: 5px 10px; }
.pager.acc-pager .jump input { width: 5rem; padding: 6px 8px; }
.pager.acc-pager .jump label { margin: 0; }
/* shell.css caps `.card > p.hint` at 46em for line length; this one carries a
   divider, which then stopped two thirds of the way across the card. */
.card > p.acc-foot { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line-soft); max-width: none; }
.acc-card .empty { padding: 36px 20px; }

/* ── Websites: one card per site ─────────────────────────────────────────────
   The card is a <details>: its <summary> is the header plus the facts, so a
   collapsed card still says what matters. Each setting is a row that states
   its current value before it is opened. No script involved anywhere. */
.ws-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--dim); font-size: 13px;
}
.ws-chip b { color: var(--text); font-weight: 600; }
.ws-chip .ui-i { width: 15px; height: 15px; }

.ws-site {
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 80px;
}
.ws-sum { display: block; }
.ws-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 4px; }
.ws-av {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.ws-av .ui-i { width: 21px; height: 21px; }
.ws-name { display: block; min-width: 0; flex: 1 1 auto; }
.ws-dom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-dom a { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ws-dom a:hover { color: var(--accent); }
.pill.ws-main { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 20px 12px 76px; font-size: 12.5px; color: var(--faint); }
.ws-meta .mono { color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.ws-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.btn.ws-btn { padding: 6px 11px; font-size: 13px; }
.ws-btn .ui-i { width: 16px; height: 16px; }

.ws-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px 76px; }
.ws-fact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--panel-2); color: var(--dim);
  font-size: 12.5px; font-weight: 600;
}
.ws-fact .ui-i { width: 14px; height: 14px; }
.ws-fact.ok   { background: var(--ok-soft);   color: var(--ok); }
.ws-fact.warn { background: var(--warn-soft); color: var(--warn); }
.ws-fact.app  { background: var(--tone-4-bg); color: var(--tone-4); }
a.ws-fact:hover { text-decoration: underline; }

.ws-rows { border-top: 1px solid var(--line-soft); }
.ws-row { margin: 0; border-bottom: 1px solid var(--line-soft); }
.ws-row:last-child { border-bottom: 0; }
.ws-row-fixed, .ws-row > summary {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 12px 20px;
}
.ws-row > summary { list-style: none; cursor: pointer; }
.ws-row > summary::-webkit-details-marker { display: none; }
.ws-row > summary:hover, .ws-row[open] > summary { background: var(--panel-2); }
.ws-label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 13.5px; color: var(--text); }
.ws-label .ui-i { width: 17px; height: 17px; color: var(--faint); }
.ws-state { color: var(--dim); font-size: 13.5px; min-width: 0; }
.ws-state .mono { font-size: 12.5px; }
.ws-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ws-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ws-go .ui-i { width: 15px; height: 15px; transition: transform .15s; }
.ws-row[open] > summary .ws-go .ui-i { transform: rotate(90deg); }
.ws-inline { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.ws-inline select { width: auto; padding: 6px 10px; font-size: 13px; }
.ws-body { padding: 6px 20px 18px 236px; background: var(--panel-2); }
.ws-body > .hint:first-child { margin-top: 6px; }
.ws-subh { margin: 14px 0 4px; font-size: 13.5px; }
.ws-subh:first-child { margin-top: 6px; }
.ws-inner { margin-top: 10px; }
.ws-inner > summary { display: inline-block; }
.ws-inner[open] > summary { margin-bottom: 8px; }

/* The ModSecurity switch: a real submit button, drawn as a switch. */
.ws-switch {
  position: relative; flex: none;
  width: 40px; height: 23px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--line-strong); cursor: pointer;
}
.ws-switch.on { background: var(--ok); }
.ws-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-knob {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: left .15s;
}
.ws-switch.on .ws-knob { left: 20px; }
.ws-switch-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.ws-foot {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-2); color: var(--faint); font-size: 12.5px;
}
.ws-foot .ui-i { width: 15px; height: 15px; flex: none; }
details.ws-remove { display: block; }
.ws-remove > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.ws-remove > summary::-webkit-details-marker { display: none; }
.ws-remove > summary > span:first-child { flex: 1 1 auto; }
.ws-remove > summary .act { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ws-remove-form { margin-top: 12px; max-width: 560px; }
.ws-remove-form .hint { color: var(--dim); }

.ws-add {
  margin-top: 4px; padding: 18px 20px;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  background: var(--panel);
  scroll-margin-top: 80px;
}
.ws-add h2 { margin: 0 0 6px; font-size: 15px; }

/* One website's own page (/my/sites?d=), in tabs. The rows reuse .ws-*. */
.site-crumb { margin: 0 0 6px; }
.site-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-hero .ws-av { width: 52px; height: 52px; border-radius: 14px; }
.site-hero-t { min-width: 0; flex: 1 1 280px; }
.site-hero-t h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.site-hero-t h1 .pill { font-size: 12px; }
.site-hero .btn-row form.inline { display: inline-flex; margin: 0; }
.site-tabs { margin-bottom: 18px; }
.site-h { padding: 14px 20px 10px; }
.site-h h2 { margin: 0; font-size: 15px; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.site-grid .card { margin: 0; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; min-width: 0; }
.mini-list li:last-child { border-bottom: 0; }
.mini-list li > .ui-i { width: 16px; height: 16px; flex: none; color: var(--faint); }
.mini-list .mono { font-size: 12.5px; overflow-wrap: anywhere; }
.mini-list .end { margin-left: auto; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.site-dns td { vertical-align: top; }

/* One mail domain's page (/my/mail?d=), in tabs. */
.mb-t td { vertical-align: middle; }
.mb-use { min-width: 160px; }
.mb-use .meter { display: block; margin-top: 5px; max-width: 220px; }
.mail-dns .mail-v { max-width: 380px; }
.mail-dns .mail-v .mono { display: block; font-size: 12px; overflow-wrap: anywhere; }
.mail-dns .mail-v .act { margin-top: 4px; }
.mail-apps dd .mono { font-size: 13px; }
.site-ips { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
/* SSL card (views/_ssl_card.php) and list (views/_ssl_list.php). */
.ssl-names { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ssl-name { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; overflow-wrap: anywhere; }
.ssl-name.is-in { color: var(--ok); }
.ssl-name.is-out { color: var(--bad); font-weight: 600; }
.ssl-actions { gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ssl-confirm { margin-top: 12px; }
.ssl-confirm > form { margin-top: 10px; display: grid; gap: 8px; max-width: 520px; }
.ssl-step { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; display: grid; gap: 10px; }
.ssl-step h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ssl-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 700; flex: none; }
.ssl-step form { display: grid; gap: 10px; }
/* A grid stretches its items, so a lone button would span the whole card. */
.ssl-step form > .btn, .ssl-confirm > form > .btn { justify-self: start; }
.ssl-pem { width: 100%; max-width: none; font-size: 12px; resize: vertical; }
.ssl-csr-names { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ssl-csr-names legend { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.ssl-own-key > summary { margin-bottom: 8px; }
.ssl-list td.r { text-align: right; white-space: nowrap; }
.ssl-list td.r form { margin-right: 6px; }
.ssl-soon { color: var(--bad); font-weight: 600; }
.ssl-labels { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ssl-lbl { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; white-space: nowrap; }
.ssl-lbl.is-in { color: var(--ok); }
.ssl-lbl.is-out { color: var(--bad); font-weight: 600; }
/* "Use a certificate you bought" folds away: the header is the toggle. */
.ssl-bought > summary { cursor: pointer; list-style: none; }
.ssl-bought > summary::-webkit-details-marker { display: none; }
.ssl-bought:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ssl-bought-toggle { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-strong); }
.ssl-bought-toggle::after { content: "Show \25BE"; }
.ssl-bought[open] .ssl-bought-toggle::after { content: "Hide \25B4"; }
.ws-limit { margin: 4px 0 0; }

/* ── Server → Web server (D-BC) ──────────────────────────────────────────── */
.wsv-table { overflow-x: auto; }
.wsv-cur { display: flex; align-items: center; gap: 16px; }
.wsv-cur h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.wsv-big {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--ok-soft); color: var(--ok);
}
.wsv-big .ui-i { width: 26px; height: 26px; }
.wsv-ver { font-size: 14px; font-weight: 500; color: var(--dim); }
.wsv-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.wsv-opt { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.wsv-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.wsv-opt input { margin-top: 3px; flex: none; }
.wsv-opt-body { display: grid; align-content: start; gap: 8px; min-width: 0; }
.wsv-opt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15.5px; }
.wsv-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.wsv-chain > span {
  padding: 4px 9px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-weight: 600;
}
.wsv-chain small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; }
.wsv-li { font-size: 13px; color: var(--dim); }
.wsv-note { margin: 14px 0; font-size: 12.5px; color: var(--faint); }
.wsv-note b { color: var(--dim); }
.wsv-compare td:first-child { font-weight: 600; width: 22%; }
.wsv-steps { margin: 16px 0 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--dim); }
.wsv-steps b { color: var(--text); }
.wsv-steps li.wsv-out, .wsv-steps li.wsv-out b { color: var(--warn); }
.wsv-go {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--line-soft); background: var(--panel-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.wsv-go label { flex: 1 1 320px; display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--dim); margin: 0; }
.wsv-busy { margin: 24px 0 0; }
/* The page opens on the web server that is running. Switching to it is not a
   switch, so the button dims and says what to do instead until the other one
   is picked. */
.wsv-pick { display: none; margin: 0; }
form:has(input[data-current]:checked) .wsv-switch { opacity: .45; pointer-events: none; }
form:has(input[data-current]:checked) .wsv-pick { display: inline; }
.wsv-log { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; display: grid; gap: 3px; }
.wsv-alert {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 16px; padding: 16px 20px;
  border: 1px solid var(--warn); border-radius: 14px; background: var(--warn-soft);
}
.wsv-alert .ui-i { width: 24px; height: 24px; color: var(--warn); flex: none; }
.wsv-alert b { display: block; font-size: 15px; }
.wsv-alert p { margin: 3px 0 0; font-size: 13.5px; color: var(--dim); }
.ws-add:target { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Shown only where the sidebar is a drawer (see the 900px query below). */
.only-narrow { display: none; }

/* Disclosures. */
details > summary { color: var(--dim); }

/* ── The signed-out pages: sign-in, two-step, forgot/reset, first-run ──────
   The form on a white column at the left, the panel's name and what it is for
   on the navy side at the right. On a phone the navy side becomes a band across
   the top. Everything is a class: the CSP allows no style="". */
.ui-auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
/* The brand side is drawn on the LEFT (Benjamin, 2026-09-24) but stays second
   in the markup, so keyboard and screen-reader order still reaches the form first. */
.ui-auth-side { order: -1; }
.ui-auth-main {
  display: flex; flex-direction: column;
  padding: 22px 32px; background: var(--panel);
}
.ui-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.ui-auth-mini { display: none; align-items: center; gap: 10px; font-weight: 700; color: var(--text); }
.ui-auth-theme { margin: 0 0 0 auto; }
.ui-auth-head { display: flex; flex-direction: column; }
.ui-auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 28px; }
.ui-auth-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.ui-auth-form h1 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.ui-auth-form .sub { margin: 6px 0 0; color: var(--dim); font-size: 14px; }
.ui-auth-form .field { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 6px; }
.ui-auth-form label { margin: 0; color: var(--text); font-weight: 600; font-size: 13px; }
.ui-auth-form input:not([type=checkbox]):not([type=hidden]) { width: 100%; height: 44px; font-size: 15px; border-radius: 8px; }
.ui-auth-form input.is-bad { border-color: var(--bad); }
.ui-auth-form .hint { margin: 0; color: var(--faint); }
.ui-auth-form > .flash { margin: 0; }
.ui-auth-fields { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ui-auth-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-auth-link { color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.ui-auth-link:hover { text-decoration: underline; }
.ui-auth-submit { width: 100%; height: 44px; font-size: 14.5px; font-weight: 700; justify-content: center; }
a.ui-auth-submit { display: inline-flex; align-items: center; }
.ui-auth-centre { text-align: center; }
.ui-auth-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.ui-auth-back {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
}
.ui-auth-back:hover { color: var(--text); border: 0; }
.ui-auth-back .ui-i { width: 15px; height: 15px; }

/* Password with a show/hide button over its right edge. The button is only
   revealed by panel.js; without it there is nothing that cannot work. */
.ui-auth-pw { position: relative; }
.ui-auth-pw input:not([type=hidden]) { padding-right: 46px; }
.ui-auth-eye {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--faint);
}
.ui-auth-eye:hover { color: var(--text); border: 0; }
.ui-auth-eye[hidden] { display: none; }

.ui-auth-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.ui-auth-alert .ui-i { margin-top: 1px; }
.ui-auth-alert p { margin: 0; color: var(--text); }
.ui-auth-alert.bad { background: var(--bad-soft); color: var(--bad); }
.ui-auth-alert.ok { background: var(--ok-soft); color: var(--ok); }
.ui-auth-alert.info { background: var(--accent-soft); color: var(--accent-strong); }

.ui-auth-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ui-auth-icon .ui-i { width: 24px; height: 24px; }
.ui-auth-icon.ok { background: var(--ok-soft); color: var(--ok); }
.ui-auth-icon.warn { background: var(--warn-soft); color: var(--warn); }

.ui-auth-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.ui-auth-who small { display: block; color: var(--dim); font-size: 12.5px; }
.ui-auth-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; }

.ui-auth-form input.ui-auth-otp { height: 54px; text-align: center; font: 600 24px/1 var(--font-mono); letter-spacing: .4em; }

.ui-auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ui-auth-meter i { height: 4px; border-radius: 2px; background: var(--line); }
.ui-auth-meter.s1 i:nth-child(-n+1) { background: var(--bad); }
.ui-auth-meter.s2 i:nth-child(-n+2) { background: var(--warn); }
.ui-auth-meter.s3 i:nth-child(-n+3), .ui-auth-meter.s4 i { background: var(--ok); }
.ui-auth-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--faint); }
.ui-auth-checks li::before { content: "\2022"; display: inline-block; width: 16px; }
.ui-auth-checks li.on { color: var(--ok); }
.ui-auth-checks li.on::before { content: "\2713"; }
.ui-auth-form .hint.is-ok { color: var(--ok); }
.ui-auth-form .hint.is-bad { color: var(--bad); }

.ui-auth-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.ui-auth-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ui-auth-foot .ui-i { width: 14px; height: 14px; }

/* Older signed-out pages (setup, the daemon-down page) still carry a card;
   inside this column the column is the card. */
.ui-auth-form .card { border: 0; box-shadow: none; padding: 0; background: transparent; margin: 0; }

/* The brand side. */
.ui-auth-side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 28px 36px; background: var(--side-bg); color: var(--side-text);
}
.ui-auth-side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
  mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
}
.ui-auth-side::after {
  content: ""; position: absolute; width: 440px; height: 440px; left: -150px; bottom: -170px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(94, 162, 255, .28), transparent);
}
.ui-auth-side > * { position: relative; }
.ui-auth-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.ui-auth-logo { display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.ui-auth-pitch h2 { margin: 0; color: #fff; font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; max-width: 17ch; text-wrap: balance; }
.ui-auth-pitch p { margin: 12px 0 0; max-width: 42ch; color: var(--side-text); }
.ui-auth-tiles { list-style: none; margin: 24px 0 0; padding: 0; max-width: 460px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-auth-tiles li {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--side-line); border-radius: 10px; background: rgba(255, 255, 255, .03);
  color: #e6ebf4; font-size: 12.5px; font-weight: 600;
}
.ui-auth-tiles .ui-i { width: 16px; height: 16px; color: var(--side-mark); }
.ui-auth-host { display: flex; align-items: center; gap: 8px; min-height: 18px; font-size: 12px; color: var(--side-muted); }
.ui-auth-host .ui-i { width: 14px; height: 14px; color: #3ccb7f; }
.ui-auth-host .mono { color: var(--side-text); }

@media (max-width: 860px) {
  .ui-auth { grid-template-columns: 1fr; }
  .ui-auth-side { display: none; }
  .ui-auth-main { padding: 16px 18px; }
  .ui-auth-mini { display: inline-flex; }
  .ui-auth-body { align-items: flex-start; padding-block: 24px; }
}
@media (max-width: 420px) {
  .ui-auth-form h1 { font-size: 22px; }
}

/* ═════════════════════════ NARROW SCREENS ══════════════════════════════ */

@media (max-width: 1180px) {
  .ui-status small { display: none; }
}
@media (max-width: 1000px) {
  .ui-find { width: auto; }
  .ui-find-text, .ui-find .ui-kbd { display: none; }
  .ui-who, .ui-user > summary .ui-chev { display: none; }
  .ui-user > summary { padding: 2px; }
  .ui-status { display: none; }
}

/* A phone or a small tablet: the sidebar becomes a drawer, reached from the
   burger or the bottom bar, and the page gets the whole width.
   :target is what opens it with no script — #menu is the sidebar's id — and
   panel.js swaps that for a class so the URL does not change. */
@media (max-width: 900px) {
  .ui-shell, .ui-shell.side-mini { display: block; }
  .ui-side {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(320px, 86vw); height: auto;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 12px 0 32px -8px rgba(0, 0, 0, .45);
    z-index: 90;
  }
  .ui-side:target, .ui-shell.drawer-open .ui-side { transform: none; }
  .ui-side:target ~ .ui-scrim, .ui-shell.drawer-open .ui-scrim {
    display: block; position: fixed; inset: 0; z-index: 80; background: var(--scrim);
  }
  /* The rail and its flyouts are a desktop idea; the drawer is always full. */
  .side-mini .ui-brand { justify-content: flex-start; padding: 0 16px; }
  .side-mini .ui-brand-name, .side-mini .ui-tag, .side-mini .ui-sec,
  .side-mini .ui-item .ui-label, .side-mini .ui-item .ui-chev { display: revert; }
  .side-mini .ui-item { justify-content: flex-start; padding: 10px; }
  .side-mini .ui-nav { padding: 8px 10px; }
  .side-mini .ui-side-scroll { overflow-y: auto; }
  .side-mini .ui-sub { display: block; }
  .side-mini .ui-group:not([open]) > .ui-sub { display: none; }
  .side-mini .ui-group:hover > .ui-sub, .side-mini .ui-group:focus-within > .ui-sub {
    position: static; min-width: 0; padding: 0 0 0 12px; margin: 2px 0 6px 20px;
    border: 0; border-left: 1px solid var(--side-line); border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .side-mini .ui-flyhead { display: none; }
  .side-mini .ui-sub a { color: var(--side-text); }

  .ui-drawer-x {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-left: 8px;
    border: 1px solid var(--side-line); border-radius: 9px;
    color: var(--side-text);
  }
  .ui-drawer-x .ui-i { width: 18px; height: 18px; }
  .ui-drawer-me {
    display: flex; align-items: center; gap: 10px; flex: none;
    margin: 10px 12px 2px; padding: 10px;
    border: 1px solid var(--side-line); border-radius: 11px;
    background: var(--side-bg-2);
  }
  .ui-drawer-me > span:last-child { display: grid; line-height: 1.25; }
  .ui-drawer-me b { color: var(--side-text-on); font-size: 13px; }
  .ui-drawer-me small { color: var(--side-muted); font-size: 11.5px; }
  .ui-item { padding: 10px; font-size: 14.5px; }
  .ui-sub a { padding: 8px 10px; font-size: 14px; }
  .ui-card, .ui-side-foot { display: none; }
  .ui-drawer-foot {
    display: grid; gap: 2px; flex: none;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--side-line);
  }
  .ui-drawer-foot a, .ui-drawer-foot .ui-out {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px; margin: 0;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--side-text);
    font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; text-align: left;
  }
  .ui-drawer-foot a:hover, .ui-drawer-foot .ui-out:hover { background: var(--side-hover); color: #fff; border: 0; }
  .ui-drawer-foot .ui-out { color: #ff8a80; }
  .ui-drawer-foot form { margin: 0; }

  .ui-top { padding: 0 12px; gap: 8px; height: 56px; }
  .ui-top .ui-burger { display: grid; }
  .ui-top .ui-burger-desk { display: none; }
  .ui-crumbs > a, .ui-crumbs > .ui-crumb-sep:first-of-type, .ui-crumbs > span { display: none; }
  .ui-crumbs { font-size: 15px; }
  .ui-crumbs .ui-crumb-sep { display: none; }
  .ui-find { margin-left: auto; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
  .ui-find[hidden] ~ .ui-theme-quick { margin-left: auto; }
  .ui-back-form { margin-left: 8px; }
  .ui-back { padding: 5px 10px 5px 8px; font-size: 12.5px; }
  .ui-back-long { display: none; }
  .ui-back-short { display: inline; }
  main.ui-content { padding: 16px 14px 96px; }
  .panel-support { padding: 8px 14px 90px; }

  .ui-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -12px rgba(14, 23, 38, .25);
  }
  .ui-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 0;
    color: var(--faint); font-size: 10.5px; font-weight: 600; text-decoration: none;
  }
  .ui-tabbar .ui-i { width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 99px; }
  .ui-tabbar a.on { color: var(--accent); }
  .ui-tabbar a.on .ui-i { background: var(--accent-soft); }

  .card { padding: 16px; }
  .card.only-narrow { display: block; }
  .dash-row { grid-template-columns: minmax(0, 1fr); }
  .dash-health { grid-template-columns: minmax(0, 1fr); }
  .dash-rr { grid-template-columns: minmax(0, 1fr) max-content; } /* the bar has its own line here */
  .dash-rr .bar { grid-column: 1 / -1; order: 3; }
  .dash-svc-group { border-left: 0; padding-left: 0; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Accounts: each row becomes a card with labelled fields. */
  .acc-search { max-width: none; }
  .acc-shown { margin-left: 0; }
  .acc-table table { min-width: 0; }
  .acc-table table, .acc-table tbody, .acc-table tr, .acc-table td { display: block; }
  .acc-table thead { display: none; }
  .acc-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
  }
  .acc-table td, .acc-table td:first-child, .acc-table td:last-child { padding: 0; border: 0; }
  .acc-table tbody tr:hover td { background: none; }
  .acc-table td.acc-who-cell, .acc-table td.acc-act-cell { grid-column: 1 / -1; }
  .acc-table td[data-l]::before {
    content: attr(data-l); display: block;
    font-size: 11px; font-weight: 600; color: var(--faint); margin-bottom: 2px;
  }
  .acc-act { justify-content: flex-start; }

  /* Websites: the avatar goes, the button labels shrink to icons, and each
     row's current value drops under its name rather than squeezing beside it. */
  .ws-head { padding: 14px 14px 4px; gap: 10px; }
  .ws-meta { padding: 0 14px 10px; }
  .ws-inline-wide { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .ws-inline-wide select { flex: 1 1 auto; min-width: 0; }
  .ws-av { display: none; }
  .ws-btn span { display: none; }
  .btn.ws-btn { padding: 6px 8px; }
  .ws-facts { padding: 0 14px 14px; }
  .ws-row-fixed, .ws-row > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; }
  .ws-state { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; }
  .ws-body { padding: 6px 14px 16px; }
  .ws-foot { padding: 12px 14px; }
  .ws-remove > summary { flex-wrap: wrap; }
  .wsv-opts { grid-template-columns: minmax(0, 1fr); }
  .wsv-go { margin: 16px -14px -14px; padding: 14px; }
  .ui-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ui-tools .card-head .hint { display: none; }
  .page-head h1, main > h1 { font-size: 21px; }
  .tab-bar { width: auto; overflow-x: auto; flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-side, .ui-chev, button, .btn, .act { transition: none; }
}

/* ── File manager (views/files.php, fx-*) ────────────────────────────────────
   A folder tree beside the list, one toolbar whose tools open as popups, and a
   list where a click ticks a row. files.js adds the selection behaviour; with
   no script the tools expand in place and the page still works. */
/* The account picker you type into (views/_account_pick.php). */
.acc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.acc-pick .acc-search { flex: 1 1 240px; min-width: 200px; }
.acc-pick .btn.is-on { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.fx { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.card.fx-side { margin: 0; padding: 10px 8px; position: sticky; top: 16px; }
.fx-side-head { margin: 8px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.fx-side-head:first-child { margin-top: 2px; }
.fx-tree { display: flex; flex-direction: column; gap: 1px; }
.fx-tree .hint { margin: 2px 8px; }
.fx-tree-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--text); font-size: 13px; text-decoration: none; min-width: 0; }
.fx-tree-item:hover { background: var(--panel-2); color: var(--text); }
.fx-tree-item.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.fx-tree-item.fx-depth-1 { padding-left: 18px; }
.fx-tree-item.fx-depth-2 { padding-left: 28px; }
.fx-tree-item.fx-depth-3 { padding-left: 38px; }
.fx-tree-item.fx-depth-4 { padding-left: 48px; }
.fx-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-quota { margin: 12px 8px 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.fx-quota .hint { margin: 0; }
.fx-quota b { color: var(--text); }
.fx-quota .bar { min-width: 0; height: 6px; }
.fx-trash { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.fx-trash .ui-i { width: 15px; height: 15px; }

/* The file-type marks: drawn, not glyphs, so they look the same everywhere. */
.fx-ico { position: relative; flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 4px; }
.fx-ico-dir { height: 14px; margin-top: 3px; background: #e9a23b; border-radius: 2px 3px 3px 3px; }
.fx-ico-dir::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; background: #e9a23b; border-radius: 2px 2px 0 0; }
.fx-ico-file { background: var(--panel-2); border: 1.5px solid var(--line-strong); }
.fx-ico-code { background: #eee8ff; border: 1.5px solid #8b7cf6; }
.fx-ico-arc  { background: var(--warn-soft); border: 1.5px solid #e9a23b; }
.fx-ico-img  { background: var(--ok-soft); border: 1.5px solid var(--ok); }
.fx-ico-link { background: var(--panel-2); border: 1.5px dashed var(--faint); }

.card.fx-main { margin: 0; padding: 0; overflow: visible; min-width: 0; }
.fx-path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.ui-iconbtn.fx-up { width: 34px; height: 34px; border-radius: 9px; }
/* Show / hide hidden files: pressed reads as the accent. */
.ui-iconbtn.fx-hidden { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.ui-iconbtn.fx-hidden.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.fx-crumbs { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-2); }
.fx-crumb { padding: 2px 6px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
a.fx-crumb:hover { background: var(--panel); }
.fx-crumb.on { font-weight: 700; color: var(--text); }
.fx-sep { color: var(--faint); }
.acc-search.fx-search { flex: 0 1 260px; max-width: none; }

.fx-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line-soft); }
.fx-tb .btn { padding: 6px 10px; font-size: 12.5px; }
.fx-tb .btn .ui-i { width: 15px; height: 15px; }
.fx-tb > details > summary { list-style: none; }
.fx-tb > details > summary::-webkit-details-marker { display: none; }
.fx-gap { width: 1px; height: 24px; background: var(--line-strong); margin: 0 4px; }
.fx-tool.is-off > summary, .fx-tool-link.is-off { opacity: .42; cursor: not-allowed; }
/* Without script a tool expands in place, as a panel under the toolbar. */
.fx-tool[open] { flex-basis: 100%; order: 99; }
.fx-tool[open] > summary { margin-bottom: 8px; }
.fx-tool > form, .fm-act-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; }
.fm-act-body label, .fx-tool > form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.fm-act-body label.check, .fx-tool > form label.check { flex-direction: row; align-items: center; font-weight: 500; }
.fx-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.fx-picked { max-height: 140px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--dim); }
.fx-picked:not(:has(div)) { padding: 8px 10px; }
.fx-picked > div { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.fx-picked > div:last-child { border-bottom: 0; }
.fx-picked small { margin-left: auto; color: var(--faint); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.fx-perm-grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px 10px; align-items: center; font-size: 13px; }
.fx-perm-grid[hidden] { display: none; }
.fm-act-body .fx-perm-grid label { flex-direction: row; justify-content: center; }
.fx-ph { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fx-warn, .fx-bad { margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; }
.fx-warn { background: var(--warn-soft); color: var(--warn); }
.fx-bad { background: var(--bad-soft); color: var(--bad); }
/* A reassurance inside a popup (how an app's first run is closed). */
.fx-note { margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; background: var(--accent-soft); color: var(--accent-strong); }

/* Containers: the app catalogue (my/containers). Cards in a grid that
   steps down to two columns and then one; each card's actions sit at its
   bottom whatever the length of its summary. */
.tpl-cat { margin-bottom: 18px; }
.tpl-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.tpl-cat-head h2 { margin: 0; font-size: 18px; }
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
@media (max-width: 1180px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tpl-grid { grid-template-columns: minmax(0, 1fr); } }
.tpl-grid > .tpl-card { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tpl-top { display: flex; align-items: center; gap: 12px; }
.tpl-top > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tpl-top small { color: var(--dim); font-size: 12px; }
.tpl-mark { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--accent-soft); color: var(--accent-strong); }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chips span { border: 1px solid var(--line); border-radius: 11px; padding: 2px 9px; font-size: 12px; color: var(--dim); }
.tpl-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* The reason a plan cannot run it, on its own line above the buttons; this
   and the button row are pushed to the card's bottom together. */
.tpl-why { margin: auto 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--warn); }
.tpl-card > .tpl-why + .tpl-foot { margin-top: 0; }
.tpl-card > .tpl-chips + .tpl-foot { margin-top: auto; }
/* An application's row carries six buttons and up to three state pills: on
   one line each they made the table 1318px in a 989px card, and Remove,
   Log and Stop sat behind a sideways scroll where nobody found them. */
.ct-apps .acc-act { flex-wrap: wrap; row-gap: 6px; }
.ct-apps td.ct-state { white-space: normal; }
.ct-apps td.ct-state .pill { white-space: nowrap; }
.ct-apps td.ct-state .pill.warn { display: inline-block; margin-top: 4px; }
.ct-apps td.ct-state small { display: block; }
/* The Backups popup of an application (views/_container_backups.php). */
/* A minimum only where it opens in place (no script): in the dialog it was
   wider than the dialog and scrolled sideways, cutting off Back up now. */
.fx-pop > .ct-bk { min-width: min(480px, 90vw); }
.fm-dialog:has(.ct-bk) { width: min(620px, 94vw); }
.ct-bk .empty { padding: 12px 0; }
.fm-dialog-body form.ct-bk-now { flex-direction: row; align-items: center; flex-wrap: wrap; }
.ct-bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ct-bk-row b { display: block; font-size: 13.5px; }
.ct-bk-row small { display: block; color: var(--dim); font-size: 12px; }
.ct-bk-row .acc-act { flex-wrap: wrap; }
.ct-bk-restore > summary { list-style: none; }
.ct-bk-restore > summary::-webkit-details-marker { display: none; }
.ct-bk-restore[open] { flex-basis: 100%; }
.ct-bk-restore form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ct-bk-restore form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.ct-bk-restore form .btn { align-self: flex-end; }
.ct-bk-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* On a phone each application is a card - name, website, state and buttons
   stacked - instead of a table to scroll sideways (Benjamin, 2026-09-27). */
@media (max-width: 640px) {
  .ct-apps .tbl-scroll { overflow: visible; }
  .ct-apps table, .ct-apps tbody, .ct-apps tr, .ct-apps td { display: block; width: 100%; }
  .ct-apps thead { display: none; }
  .ct-apps tr { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .ct-apps td { border: 0; padding: 6px 0; }
  .ct-apps td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 2px; }
  .ct-apps .acc-act { justify-content: flex-start; }
  .ct-bk-row { grid-template-columns: 1fr; }
}
/* The account's own backups (my/backups.php): cards on a phone, the same as
   the container applications above, so the Delete menu is never clipped by a
   sideways-scrolling table. */
@media (max-width: 640px) {
  .ub-own table, .ub-own tbody, .ub-own tr, .ub-own td { display: block; width: 100%; }
  .ub-own thead { display: none; }
  .ub-own tr { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .ub-own td { border: 0; padding: 6px 0; text-align: left; }
  .ub-own td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 2px; }
  .ub-own .acc-act { justify-content: flex-start; flex-wrap: wrap; }
}
.flash.ct-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Skip the Trash: off unless ticked. The popup's form (or the bulk tool's body)
   is what moves into the dialog, so the swap is scoped on those, and it is CSS
   so the button tells the truth without JavaScript too. The general popup
   label rule is a column; this one is a row, and needs the extra class to win. */
.fm-act-body label.fx-skiptrash, form label.fx-skiptrash, label.fx-skiptrash {
  flex-direction: row; align-items: flex-start; gap: 9px; margin: 0; padding: 9px 12px;
  border-radius: 9px; background: var(--bad-soft); color: var(--bad);
  font-size: 12.5px; font-weight: 600; line-height: 1.45; cursor: pointer; display: flex;
}
label.fx-skiptrash input { flex: none; margin: 2px 0 0; accent-color: var(--bad); }
.fx-lbl-purge { display: none; }
:is(form, .fm-act-body):has(.fx-skiptrash input:checked) .fx-lbl-trash,
:is(form, .fm-act-body):has(.fx-skiptrash input:checked) .fx-trash-note { display: none; }
:is(form, .fm-act-body):has(.fx-skiptrash input:checked) .fx-lbl-purge { display: inline; }
.fx-bulk-form { display: none; }

.fx-selbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.fx-selbar[hidden] { display: none; }
.fx-selbar .fx-clear { margin-left: auto; }
.fx-selcount { font-variant-numeric: tabular-nums; }
.fx-upload input[type=file] { padding: 6px; }

.fx-table { width: 100%; }
.fx-table td { padding-top: 8px; padding-bottom: 8px; }
.fx-table th:first-child, .fx-table td:first-child { padding-left: 14px; }
tr.fx-row { cursor: default; }
/* While rows are being drag-selected (files.js), nothing turns into a text
   selection under the pointer. */
html.fm-dragsel, html.fm-dragsel * { -webkit-user-select: none; user-select: none; }
tr.fx-row:hover td { background: var(--panel-2); }
tr.fx-row.on td { background: var(--accent-soft); }
.fx-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-name a { color: var(--text); font-weight: 600; }
.fx-name a:hover { color: var(--accent); }
.fx-fname { overflow-wrap: anywhere; }
.fx-perm { color: var(--dim); font-size: 12px; padding: 1px 5px; border: 1px dashed transparent; border-radius: 6px; }
.fx-perm.is-live { cursor: pointer; }
tr.fx-row:hover .fx-perm.is-live, .fx-perm.is-live:focus-visible { border-color: var(--line-strong); color: var(--text); }
.fx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 12.5px; }
.fx-pages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The popup every file action opens in (panel.js builds it). */
.fm-dialog { width: min(480px, 94vw); min-width: 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
.fm-dialog::backdrop { background: var(--scrim); }
.fm-dialog-head { align-items: center; padding: 14px 18px; }
.fm-dialog-title { font-size: 15px; }
.fm-dialog-body { padding: 16px 18px 18px; }
.fm-dialog-body .fm-act-body { border: 0; padding: 0; background: none; }
.fm-dialog-body form, .fm-dialog-body .fm-act-body { display: flex; flex-direction: column; gap: 10px; }
.fm-dialog-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.fm-dialog-body label.check { flex-direction: row; align-items: center; font-weight: 500; }
.fm-dialog-body .fx-perm-grid label { flex-direction: row; justify-content: center; }
.fm-dialog-body input:not([type=checkbox]):not([type=radio]), .fm-dialog-body select { width: 100%; }
.fm-dialog-body .fx-row2 select { width: auto; }
.fm-dialog-body .fm-act-body > .btn, .fm-dialog-body form > .btn { align-self: flex-end; }

@media (max-width: 980px) {
  .fx { grid-template-columns: 1fr; }
  .card.fx-side { display: none; }
}

/* A button that opens a popup (panel.js) - FTP and Backups use the same
   dialog as the file manager. Without script it expands in place. */
.fx-pop > summary { list-style: none; }
.fx-pop > summary::-webkit-details-marker { display: none; }
.fx-pop[open] > summary { margin-bottom: 8px; }
.fx-pop > form, .fx-pop > .fm-act-body { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-align: left; min-width: min(360px, 90vw); }
.fx-pop > form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.fm-dialog-body form label.bk-check, .fx-pop > form label.bk-check { flex-direction: row; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 500; }
.bk-check b { display: block; font-size: 13px; }
.bk-check small { display: block; color: var(--dim); font-size: 12px; font-weight: 400; }
.bk-check input { margin-top: 3px; }

/* A backup job's editor (views/_backup_config.php): day grids, and each
   destination's own copies. Only the chosen frequency's days show; where
   :has is not supported all three stay, each labelled. */
.bk-days { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; }
.bk-days > legend { padding: 0 4px; font-size: 12.5px; font-weight: 600; }
.bk-daygrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fm-dialog-body form label.bk-day, .fx-pop > form label.bk-day { flex-direction: row; align-items: center; justify-content: center;
  gap: 4px; min-height: 36px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.bk-day:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bk-dest { display: flex; flex-direction: column; gap: 6px; }
.bk-keep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 12px; }
.fm-dialog-body form .bk-keep label, .fx-pop > form .bk-keep label { font-weight: 500; font-size: 12px; }
.bk-keep input { width: 100%; min-width: 0; }
.bk-dest:has(> label input:not(:checked)) .bk-keep { display: none; }
form:has(select[name="frequency"] option[value="daily"]:checked) :is(.bk-f-weekly, .bk-f-monthly),
form:has(select[name="frequency"] option[value="weekly"]:checked) :is(.bk-f-daily, .bk-f-monthly),
form:has(select[name="frequency"] option[value="monthly"]:checked) :is(.bk-f-daily, .bk-f-weekly) { display: none; }
@media (max-width: 420px) {
  .bk-daygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The jobs table: what a job takes and where it goes, as chips. */
.bk-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.bk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 12px; line-height: 1.5;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.bk-chip-dest b { color: var(--accent); font-weight: 600; }

/* ── Fix permissions (views/files_perms.php) ──────────────────────────── */
.fpx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.fpx-main, .fpx-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.fpx-card { margin: 0; padding: 0; overflow: visible; }
.fpx-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.fpx-ch h2 { margin: 0; font-size: 15px; }
.fpx-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.fpx-body > p { margin: 0; }
.fpx-acct { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; max-width: 420px; }
.fpx-acct .acc-search { max-width: none; }
.fpx-scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fpx-scope { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 11px; }
.fpx-scope > input { position: absolute; opacity: 0; pointer-events: none; }
.fpx-scope b { font-size: 13.5px; }
.fpx-scope small { color: var(--dim); font-size: 12px; }
.fpx-scope:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fpx-scope:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fpx-path { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; max-width: 420px; }
.fpx-opts { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.fpx-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; font-weight: 400; }
.fpx-opt:last-child { border-bottom: 0; }
.fpx-opt.fpx-fixed { cursor: default; }
.fpx-opt b { display: block; font-size: 13.5px; }
.fpx-opt small { display: block; color: var(--dim); font-size: 12.5px; }
/* A real checkbox drawn as a switch: it still posts and still works with no
   script, which a script-built toggle would not. */
input.fpx-tg, .fpx-tg { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px;
  margin: 2px 0 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.fpx-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
input.fpx-tg:checked, .fpx-tg.is-locked { background: var(--accent); }
input.fpx-tg:checked::after, .fpx-tg.is-locked::after { left: 18px; }
.fpx-tg.is-locked { display: inline-block; opacity: .6; cursor: default; }
input.fpx-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fpx-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fpx-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fpx-res > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.fpx-res b { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fpx-res small { color: var(--dim); font-size: 12px; }
tr.fpx-skip td { color: var(--dim); }
.fpx-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong);
  font-size: 12.5px; font-weight: 600; }
@media (max-width: 980px) {
  .fpx { grid-template-columns: 1fr; }
}

/* ── Cron jobs (views/cron.php, _cron_form.php) ──────────────────────── */
.card.cj-card { margin: 0 0 16px; padding: 0; overflow: visible; }
.cj-out { max-height: 320px; overflow: auto; margin: 0; }
.cj-table td { vertical-align: top; }
.cj-table tr.cj-off td { opacity: .6; }
.cj-table tr.cj-off td:first-child { opacity: 1; }
.cj-inline { margin: 0; display: inline; }
.cj-when-cell b { display: block; font-size: 13px; }
.cj-when-cell .mono { color: var(--dim); font-size: 11.5px; }
.cj-cmd { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
/* The on/off switch is a real button in a real form: it works with no script. */
.cj-switch { position: relative; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--line-strong); box-sizing: border-box; }
.cj-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.cj-switch.is-on { background: var(--ok); }
.cj-switch.is-on::after { left: 18px; }
.cj-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cj-form { display: flex; flex-direction: column; gap: 12px; }
.cj-form > label, .cj-when, .cj-row2 > label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.cj-form > label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.cj-form .hint { font-weight: 400; }
.cj-preset { width: 100%; }
.cj-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cj-five label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--dim); text-align: center; }
.cj-five input { text-align: center; width: 100%; min-width: 0; }
/* A database's page: ready-to-paste connection snippets. */
.dbd-snip { margin-top: 12px; }
.dbd-snip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.dbd-snip pre { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12.5px; overflow-x: auto; white-space: pre; }

/* Jobs: the last line of a job's log, kept to a readable width. */
.jobs-last { color: var(--dim); font-size: 12.5px; max-width: 420px; overflow-wrap: anywhere; }

/* The next runs, from systemd (cron.js). */
.cj-next {
  padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  background: var(--accent-soft); color: var(--text); overflow-wrap: anywhere;
}
.cj-next b { font-weight: 600; }
.cj-next.bad { background: var(--bad-soft); color: var(--bad); }
.cj-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cj-kind { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 10px; }
.cj-kind > input { position: absolute; opacity: 0; pointer-events: none; }
.cj-kind b { font-size: 13px; }
.cj-kind small { color: var(--dim); font-size: 11.5px; }
.cj-kind:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cj-kind:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cj-kind.is-off { opacity: .5; cursor: not-allowed; border-style: dashed; }
.cj-row2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.cj-when[hidden] { display: none; }
.cj-for-php, .cj-for-url, .cj-for-command { min-width: 0; }
@media (max-width: 600px) {
  .cj-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cj-kinds { grid-template-columns: 1fr; }
}

/* ── FTP (views/ftp.php, views/my/ftp.php) ──────────────────────────────── */
.fp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.fp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fp-side > .card { margin: 0; }
.card.fp-card { margin: 0; padding: 0; overflow: visible; }
.ui-tone.fp-ic { width: 32px; height: 32px; border-radius: 9px; }
.ui-tone.fp-ic .ui-i { width: 16px; height: 16px; }
.fp-conn { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.fp-cf { margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.fp-cf small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fp-cf b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.fp-cf b .act { margin-left: auto; flex: none; }

/* ── Backups (views/backups.php) ───────────────────────────────────────── */
.bk-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 12px 16px;
  border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-weight: 600; font-size: 13px; }
.bk-gap > span { display: inline-flex; align-items: center; gap: 6px; }
.bk-gap .ui-i { width: 16px; height: 16px; }
.bk-gap-one { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.bk-gap-one .mono { padding: 1px 6px; border-radius: 6px; background: var(--panel); color: var(--text); }

@media (max-width: 980px) {
  .fp { grid-template-columns: 1fr; }
}

/* ── Colour themes (Theme::ACCENTS, daemon appearance.go) ─────────────────
 *
 * A class on <html> - accent-<name> - chosen per login on the server, so the
 * page arrives in its colour with no script and no inline style (the CSP has
 * neither). BH Blue has no class: it is what :root already is.
 *
 * Specificity is the whole trick. Each preset's light values are (0,2,0) and
 * come after the base rules, so they win in light mode; its dark values are
 * (0,3,0) - :root.accent-x:not(.theme-light) inside the media query, and
 * :root.accent-x.theme-dark - so they beat both the base dark rules and the
 * preset's own light ones, whichever way dark mode was chosen. The sidebar is
 * navy in both, so its marks are set once, on the light rule, and carry over.
 */
:root.accent-evergreen { --accent: #1f7a4d; --accent-strong: #155a38; --accent-soft: #e2f3e9; --accent-ink: #ffffff;
  --side-active: rgba(63, 191, 128, .16); --side-mark: #3fbf80; }
:root.accent-teal      { --accent: #0e7c86; --accent-strong: #095a61; --accent-soft: #dff2f3; --accent-ink: #ffffff;
  --side-active: rgba(44, 184, 196, .16); --side-mark: #2cb8c4; }
:root.accent-violet    { --accent: #6a45c2; --accent-strong: #4f329a; --accent-soft: #eee8fb; --accent-ink: #ffffff;
  --side-active: rgba(163, 134, 238, .16); --side-mark: #a386ee; }
:root.accent-slate     { --accent: #3f4b5f; --accent-strong: #2a3342; --accent-soft: #e8ecf2; --accent-ink: #ffffff;
  --side-active: rgba(154, 169, 192, .16); --side-mark: #9aa9c0; }
:root.accent-sunset    { --accent: #cf4a10; --accent-strong: #a33a0b; --accent-soft: #fdebe2; --accent-ink: #ffffff;
  --side-active: rgba(255, 138, 76, .16); --side-mark: #ff8a4c; }
@media (prefers-color-scheme: dark) {
  :root.accent-evergreen:not(.theme-light) { --accent: #3fbf80; --accent-strong: #8ee0b6; --accent-soft: #10301f; --accent-ink: #04150c; }
  :root.accent-teal:not(.theme-light)      { --accent: #2cb8c4; --accent-strong: #85dde4; --accent-soft: #0c2f33; --accent-ink: #031416; }
  :root.accent-violet:not(.theme-light)    { --accent: #a386ee; --accent-strong: #cbb9f7; --accent-soft: #241a40; --accent-ink: #120a24; }
  :root.accent-slate:not(.theme-light)     { --accent: #9aa9c0; --accent-strong: #cad4e2; --accent-soft: #1e2533; --accent-ink: #0b0f18; }
  :root.accent-sunset:not(.theme-light)    { --accent: #ff8a4c; --accent-strong: #ffbc94; --accent-soft: #3a1c0d; --accent-ink: #1d0b02; }
}
:root.accent-evergreen.theme-dark { --accent: #3fbf80; --accent-strong: #8ee0b6; --accent-soft: #10301f; --accent-ink: #04150c; }
:root.accent-teal.theme-dark      { --accent: #2cb8c4; --accent-strong: #85dde4; --accent-soft: #0c2f33; --accent-ink: #031416; }
:root.accent-violet.theme-dark    { --accent: #a386ee; --accent-strong: #cbb9f7; --accent-soft: #241a40; --accent-ink: #120a24; }
:root.accent-slate.theme-dark     { --accent: #9aa9c0; --accent-strong: #cad4e2; --accent-soft: #1e2533; --accent-ink: #0b0f18; }
:root.accent-sunset.theme-dark    { --accent: #ff8a4c; --accent-strong: #ffbc94; --accent-soft: #3a1c0d; --accent-ink: #1d0b02; }

/* The palette menu in the top bar - the same <details> pattern as the user menu. */
.ui-accent { position: relative; flex: none; }
.ui-accent > summary { list-style: none; }
.ui-accent > summary::-webkit-details-marker { display: none; }
.ui-accent[open] > summary { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ui-pop.ui-accent-pop { width: 290px; padding: 12px; }
.ui-accent-h { display: block; margin: 0 4px; font-size: 14px; }
.ui-accent-sub { display: block; margin: 2px 4px 10px; color: var(--dim); font-size: 12px; }
.ui-accent-opts { display: grid; gap: 6px; }
.ui-accent-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; margin: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.ui-accent-opt:hover { border-color: var(--line-strong); }
.ui-accent-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-accent-opt small { margin-left: auto; color: var(--faint); font-size: 11px; font-weight: 600; }
.ui-accent-opt .ui-accent-tick { width: 15px; height: 15px; flex: none; color: var(--accent); visibility: hidden; }
.ui-accent-opt.on .ui-accent-tick { visibility: visible; }
.ui-accent-foot { display: block; margin: 10px 4px 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px; }

/* Swatches: the colour and its soft tint side by side. Classes, not inline
 * colours (CSP). A brand colour's swatch, .ui-sw-custom, is set by /brand.css. */
.ui-sw { display: inline-flex; flex: none; width: 28px; height: 18px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 5px; --sw-a: #0d6efd; --sw-b: #e7f0ff; }
.ui-sw::before { content: ""; flex: 1.2; background: var(--sw-a); }
.ui-sw::after  { content: ""; flex: 1;   background: var(--sw-b); }
.ui-sw-blue      { --sw-a: #0d6efd; --sw-b: #e7f0ff; }
.ui-sw-evergreen { --sw-a: #1f7a4d; --sw-b: #e2f3e9; }
.ui-sw-teal      { --sw-a: #0e7c86; --sw-b: #dff2f3; }
.ui-sw-violet    { --sw-a: #6a45c2; --sw-b: #eee8fb; }
.ui-sw-slate     { --sw-a: #3f4b5f; --sw-b: #e8ecf2; }
.ui-sw-sunset    { --sw-a: #cf4a10; --sw-b: #fdebe2; }
.ui-sw-custom    { --sw-a: var(--accent); --sw-b: var(--accent-soft); } /* /brand.css sets the real one */

/* The choosers on Basic setup and Branding: the same swatches, as radio tiles. */
.accent-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
.accent-choice label {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 11px 7px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); font-size: 13px; font-weight: 500; cursor: pointer;
}
.accent-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.accent-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.accent-choice label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.accent-choice .ui-sw { width: 22px; height: 15px; }
.accent-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--dim); }

/* ── DNS (/dns, /my/dns, views/_dns_zone.php) ─────────────────────────────── */
.dz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dz-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.dz-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dz-pick { display: flex; gap: 8px; align-items: center; margin: 0; }
.dz-end { margin-left: auto; }
.dz-sub { color: var(--faint); font-size: 12.5px; }
.dz-where-card { padding: 0; overflow: hidden; }
.dz-where { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-left: 4px solid var(--line-strong); }
.dz-where.good { border-left-color: var(--ok); }
.dz-where.warn { border-left-color: var(--warn); }
.dz-where.bad  { border-left-color: var(--bad); }
.dz-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 700; background: var(--panel-2); color: var(--dim);
}
.dz-where.good .dz-ic { background: var(--ok-soft); color: var(--ok); }
.dz-where.warn .dz-ic { background: var(--warn-soft); color: var(--warn); }
.dz-where.bad .dz-ic  { background: var(--bad-soft); color: var(--bad); }
.dz-where strong { font-size: 14.5px; }
.dz-why { color: var(--dim); font-size: 13px; }
.dz-ns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dz-ns span {
  font-family: var(--font-mono); font-size: 12px; padding: 1px 7px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
}
.dz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.dz-facts > div { padding: 11px 20px; border-left: 1px solid var(--line-soft); min-width: 0; }
.dz-facts > div:first-child { border-left: 0; }
.dz-k { display: block; color: var(--faint); font-size: 12px; }
.dz-v { font-weight: 600; font-size: 13.5px; }
.dz-records .card-head { display: flex; }
.dz-records .card-head h2 { margin: 0; }
.dz-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.dz-bar .acc-chips { flex-wrap: wrap; }
.dz-find { margin: 0 0 0 auto; display: flex; flex: 0 1 280px; }
.dz-find .acc-search { max-width: none; }
.dz-table td { vertical-align: middle; }
.dz-name { font-weight: 500; }
.dz-zone { color: var(--faint); }
.dz-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 5px; color: var(--dim); font-size: 11px; font-weight: 600;
}
.dz-tag-host { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.dz-type { display: inline-block; min-width: 52px; text-align: center; border-radius: 6px; padding: 2px 7px; font-size: 11.5px; font-weight: 700; }
.dz-t-a, .dz-t-aaaa { background: var(--tone-1-bg); color: var(--tone-1); }
.dz-t-cname { background: var(--tone-4-bg); color: var(--tone-4); }
.dz-t-mx    { background: var(--tone-3-bg); color: var(--tone-3); }
.dz-t-txt   { background: var(--tone-5-bg); color: var(--tone-5); }
.dz-t-other { background: var(--panel-2); color: var(--dim); border: 1px solid var(--line); }
.dz-val { max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.dz-pri { color: var(--faint); margin-right: 6px; }
.dz-ttl { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.dz-acts { white-space: nowrap; text-align: right; }
.dz-acts .btn + .dz-del { margin-left: 4px; }
.dz-lock { color: var(--faint); font-size: 12px; }
.dz-del { display: inline-block; position: relative; }
.dz-del > summary { list-style: none; cursor: pointer; }
.dz-del > summary::-webkit-details-marker { display: none; }
.dz-danger { color: var(--bad); }
.dz-del-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: flex; align-items: center; gap: 10px; white-space: normal; width: max-content; max-width: 320px;
  padding: 8px 10px; border-radius: 9px; background: var(--bad-soft); color: var(--bad);
  box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; text-align: left;
}
.btn.dz-danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
tr.dz-editing > td { background: var(--accent-soft); }
tr.dz-edit-row > td { background: var(--panel-2); padding: 14px 16px 16px; }
.dz-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; margin: 0; }
.dz-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-size: 12px; font-weight: 600; color: var(--dim); }
.dz-form label input, .dz-form label select, .dz-form label textarea { width: 100%; }
.dz-c2 { grid-column: span 2; } .dz-c3 { grid-column: span 3; } .dz-c5 { grid-column: span 5; } .dz-c6 { grid-column: span 6; } .dz-c12 { grid-column: span 12; }
.dz-help { color: var(--faint); font-size: 12px; font-weight: 400; }
.dz-warn { grid-column: span 12; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 500; }
.dz-formacts { grid-column: span 12; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dz-note { margin-left: auto; color: var(--dim); font-size: 12.5px; }
.dz-count { margin: 10px 0 0; }
.dz-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.dz-add h3 { margin: 0 0 10px; }
.dz-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dz-types a {
  display: flex; flex-direction: column; min-width: 64px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.dz-types a small { font-weight: 500; font-size: 11px; color: var(--faint); }
.dz-types a.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.dz-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; color: var(--dim); font-size: 12.5px; }
.dz-presets a {
  padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: 999px;
  color: var(--dim); font-size: 12px; text-decoration: none;
}
.dz-presets a:hover { border-color: var(--accent); color: var(--accent-strong); }
.dz-nscard .card-head { display: flex; flex-wrap: wrap; }
.dz-nscard .card-head h2 { margin: 0; }
.dz-nsgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin: 0; }
.dz-nsgrid label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--dim); min-width: 0; }
.dz-nsgrid label input[type=text] { width: 100%; }
.dz-nsgrid label.dz-check { grid-column: span 4; flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 500; font-size: 13px; }
.dz-nsfoot { grid-column: span 4; display: flex; gap: 12px; align-items: center; }
.dz-nsfoot .btn { margin-left: auto; flex: none; }
.dz-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.dz-cols > .card { margin-bottom: 0; }
.dz-main { display: grid; gap: 18px; min-width: 0; }
.dz-main > .card { margin-bottom: 0; }
.dz-zones .card-head { display: flex; }
.dz-zones .card-head h2 { margin: 0; }
.dz-zfind { margin: 0 0 10px; display: flex; }
.dz-zfind .acc-search { max-width: none; }
.dz-zlist { display: grid; margin: 0 -20px; }
.dz-zlist a { display: grid; gap: 1px; padding: 9px 20px; border-left: 3px solid transparent; color: var(--text); text-decoration: none; }
.dz-zlist a:hover { background: var(--panel-2); }
.dz-zlist a.on { background: var(--accent-soft); border-left-color: var(--accent); }
.dz-zn { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-za { color: var(--faint); font-size: 12px; }
.dz-sec .card-head { display: flex; }
.dz-sec .card-head h2 { margin: 0; }
.dz-ds { overflow-wrap: anywhere; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 12px; }
@media (max-width: 1100px) {
  .dz-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .dz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-facts > div:nth-child(3) { border-left: 0; }
  .dz-c2, .dz-c3, .dz-c5 { grid-column: span 6; }
  .dz-nsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-nsgrid label.dz-check, .dz-nsfoot { grid-column: span 2; }
  .dz-tools { margin-left: 0; }
}
@media (max-width: 560px) {
  .dz-hide-sm { display: none; }
  .dz-c2, .dz-c3, .dz-c5, .dz-c6 { grid-column: span 12; }
  .dz-find { flex: 1 1 100%; margin-left: 0; }
  .dz-nsfoot { flex-wrap: wrap; }
  .dz-note { margin-left: 0; }
}

/* ── Security events (/security) ──────────────────────────────────────────── */
.se-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.se-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.se-find { margin: 0; display: flex; }
.se-find .acc-search { min-width: 240px; }
.se-alerts { padding: 14px 0 6px; }
.se-alerts .card-head { display: flex; padding: 0 20px 12px; margin-bottom: 0; }
.se-alerts .card-head h2 { margin: 0; }
.se-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 17px; border-top: 1px solid var(--line-soft);
  border-left: 3px solid var(--warn);
}
.se-alert:first-of-type { border-top: 0; }
.se-alert.bad { border-left-color: var(--bad); }
.se-alert > div { flex: 1; min-width: 0; }
.se-why { color: var(--dim); font-size: 13px; }
.se-alert .btn { flex: none; }
.se-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.se-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 16px 12px; min-width: 0; }
.se-k { color: var(--dim); font-size: 12.5px; }
.se-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.se-d { color: var(--faint); font-size: 12px; }
.se-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-spark { display: block; width: 100%; height: 28px; margin-top: 6px; }
.se-spark rect { fill: var(--accent-soft); }
.se-spark rect.hi { fill: var(--accent); }
.se-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.se-cols > .card, .se-side > .card { margin-bottom: 0; }
.se-side { display: grid; gap: 18px; min-width: 0; }
.se-events .card-head, .se-side .card-head { display: flex; }
.se-events .card-head h2, .se-side .card-head h2 { margin: 0; }
.se-note { margin-left: auto; color: var(--faint); font-size: 12px; }
.se-chips { flex-wrap: wrap; margin: 0 0 12px; }
.se-table td { vertical-align: top; }
.se-t { white-space: nowrap; color: var(--dim); font-family: var(--font-mono); font-size: 12px; }
.se-src { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 1px 7px; }
.se-src-fw    { background: var(--bad-soft);    color: var(--bad); }
.se-src-waf   { background: var(--warn-soft);   color: var(--warn); }
.se-src-login { background: var(--accent-soft); color: var(--accent-strong); }
.se-src-ref   { background: var(--tone-5-bg);   color: var(--tone-5); }
.se-what { font-weight: 500; }
.se-sub { color: var(--faint); font-size: 12px; max-width: 420px; }
.se-more { margin-top: 4px; font-size: 12.5px; }
.se-more summary { cursor: pointer; color: var(--accent-strong); font-weight: 600; }
.se-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 8px 0 0; }
.se-dl dt { color: var(--faint); }
.se-dl dd { margin: 0; }
.se-break { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; }
.se-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.se-ip { white-space: nowrap; font-size: 12.5px; }
.se-cc {
  display: inline-block; margin-left: 5px; padding: 0 4px; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--dim); font-size: 10.5px; font-weight: 600;
}
.se-actor { font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.se-table td.se-hide-sm { max-width: 180px; }
.se-count { margin: 10px 0 0; }
.se-addr { display: grid; gap: 5px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.se-addr:first-of-type { border-top: 0; padding-top: 0; }
.se-addr-top { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.se-addr-n { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
.se-addr-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.se-addr-state { display: flex; align-items: center; gap: 8px; }
.se-addr-state form, .se-addr-state .se-you { margin-left: auto; }
.se-you { color: var(--faint); font-size: 12px; }
.se-keep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 0; font-size: 13px; }
.se-keep dt { color: var(--text); }
.se-keep dd { margin: 0; color: var(--dim); text-align: right; }
@media (max-width: 1100px) {
  .se-cols { grid-template-columns: minmax(0, 1fr); }
  .se-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 860px) {
  .se-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-tools { margin-left: 0; }
}
@media (max-width: 560px) {
  .se-hide-sm { display: none; }
  .se-find, .se-find .acc-search { width: 100%; min-width: 0; max-width: none; }
  .se-alert { flex-wrap: wrap; }
}

/* ── Server → Network (views/network.php, D-BH) ─────────────────────────── */
.nw-page { display: grid; gap: 18px; }
.nw-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.nw-summary { padding: 0; overflow: hidden; }
.nw-summary .dz-facts { border-top: 0; }
.nw-fam { display: inline-block; min-width: 40px; text-align: center; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-right: 4px; }
.nw-fam.v4 { background: var(--accent-soft); color: var(--accent-strong); }
.nw-fam.v6 { background: var(--tone-4-bg); color: var(--tone-4); }
.nw-addr { font-weight: 500; white-space: nowrap; }
.nw-pfx { color: var(--faint); font-weight: 400; }
.nw-why { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; max-width: 48ch; font-weight: 400; }
.nw-bad { color: var(--bad); }
.nw-why-cell { color: var(--dim); font-size: 12.5px; }
.nw-table td { vertical-align: top; }
.nw-table tr.nw-pending td { background: var(--warn-soft); }
.nw-acts { white-space: nowrap; }
.nw-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin: 0; }
.nw-inline .nw-why { margin: 0; }
.nw-own { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-right: 4px; }
.nw-own.res { background: var(--tone-4-bg); color: var(--tone-4); }
.nw-own.acc { background: var(--accent-soft); color: var(--accent-strong); }
.nw-own.free { background: var(--ok-soft); color: var(--ok); }
.nw-table tr.nw-assign-row td { background: var(--panel-2); text-align: left; padding: 14px 20px 16px; }
.nw-assign { display: grid; gap: 12px; margin: 0; }
.nw-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.nw-kinds legend { font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 6px; width: 100%; }
.nw-kinds label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.nw-effects { margin: 0; padding-left: 18px; color: var(--dim); font-size: 12.5px; display: grid; gap: 2px; }
.ac-ip-now { margin: 0 0 10px; font-size: 13px; }
.dz-merge { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; padding: 16px 20px; border-left: 4px solid var(--accent); }
.dz-merge p { margin: 4px 0 0; max-width: 72ch; }
.nw-mail { display: block; margin-top: 5px; font-size: 12px; color: var(--dim); max-width: 60ch; }
.nw-end { margin-left: auto; }
.nw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
.nw-add { padding: 16px 20px 18px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.nw-add h3 { margin: 0; font-size: 14px; }
.nw-v6head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.nw-v6head p { margin: 2px 0 0; max-width: 72ch; }
.nw-use { padding: 16px 20px 18px; }
.nw-look { padding: 16px 20px 18px; display: grid; gap: 12px; }
.nw-look .nw-inline { justify-content: flex-start; }
.nw-look .nw-inline input { flex: 1 1 260px; max-width: 420px; }
.nw-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; padding: 10px 12px; font-size: 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.nw-result dt { color: var(--faint); }
.nw-result dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .nw-tools { margin-left: 0; } }

/* Add a domain: Addon (default) or Subdomain. The panes follow the checked
   radio in CSS alone, so the choice works without JavaScript. */
.add-domain { display: flex; flex-direction: column; gap: 12px; }
.kind-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.kind-choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kind-opt { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 240px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; }
.kind-opt > span { display: flex; flex-direction: column; gap: 2px; }
.kind-opt input { margin-top: 3px; }
.kind-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.add-domain .kind-sub { display: none; }
.add-domain:has(input[name="kind"][value="subdomain"]:checked) .kind-sub { display: flex; }
.add-domain:has(input[name="kind"][value="subdomain"]:checked) .kind-addon { display: none; }
.joined { display: flex; align-items: stretch; min-width: 0; }
.joined input { flex: 1 1 120px; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.joined select { flex: 1 1 180px; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Security Center: a header and one tab strip above every security page.
   Each tab is a link to a page of its own; the dot says whether the tool is
   doing its job and the number is what it holds. */
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.sc-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sc-sub { font-size: 12.5px; color: var(--dim); }
.sc-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 5px; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.sc-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--dim); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.sc-tab:hover { background: var(--panel-2); color: var(--text); }
.sc-tab.on { background: var(--accent-soft); color: var(--accent); }
.sc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.sc-dot.warn { background: var(--warn); }
.sc-dot.bad { background: var(--bad); }
.sc-dot.off { background: var(--faint); opacity: .5; }
.sc-count { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); color: var(--text); }
.sc-tab.on .sc-count { background: var(--panel); }
/* The Firewall's three everyday forms: block, allow, open a port. */
.sc-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; align-items: start; }
@media (max-width: 1000px) { .sc-quick { grid-template-columns: minmax(0, 1fr); } }
.sc-form { display: grid; gap: 10px; margin-top: 10px; }
.sc-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dim); min-width: 0; }
.sc-form input, .sc-form select { width: 100%; min-width: 0; }
.sc-pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
.btn.allow { background: var(--ok); border-color: var(--ok); color: #fff; }
/* The second row under a two-page tab (Web & malware). */
.sc-subtabs { display: flex; gap: 4px; margin: -10px 0 18px; padding-left: 6px; flex-wrap: wrap; }
.sc-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; color: var(--dim); font-weight: 600; font-size: 13px; text-decoration: none; border: 1px solid transparent; }
.sc-subtab:hover { background: var(--panel-2); color: var(--text); }
.sc-subtab.on { background: var(--panel); border-color: var(--line); color: var(--accent); }
/* A select inside a one-line form is as wide as its longest option, not the whole row. */
form.row select { width: auto; min-width: 10rem; max-width: 100%; }
/* Malware scans: two columns - what it is, its options and what it found on the left;
   ONE control panel on the right (switch, run now, schedule). Stacks on a narrow screen. */
.sc-scan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .sc-scan { grid-template-columns: minmax(0, 1fr); } }
.sc-scan-main { min-width: 0; }
.sc-scan-main > .hint:first-child { margin-top: 0; }
.sc-scan-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); min-width: 0; }
.sc-scan-side form { margin: 0; }
.sc-side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-side-lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sc-wide { width: 100%; justify-content: center; }
.sc-sched { display: flex; flex-direction: column; gap: 6px; }
.sc-sched label { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.sc-sched-row { display: flex; gap: 8px; }
.sc-sched-row select { flex: 1 1 auto; width: auto; min-width: 0; }
/* A real on/off switch: the button is the whole control, its state is drawn. */
.sc-switch { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--dim); font: 700 12px var(--font-sans, inherit); cursor: pointer; }
.sc-switch-knob { width: 22px; height: 22px; border-radius: 50%; background: var(--faint); transition: transform .15s; }
.sc-switch-txt { min-width: 2ch; }
.sc-switch.on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.sc-switch.on .sc-switch-knob { background: var(--ok); }
.sc-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; }
.sc-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.sc-opt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-opt .btn { align-self: flex-start; }
/* Findings: one row per thing a scanner reported, each with what can be done about it. */
.sc-finds-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-finds-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sc-finds-head h3 { margin: 0; font-size: 15px; }
.sc-finds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-find { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.sc-find-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sc-find-title { overflow-wrap: anywhere; min-width: 0; }
.sc-find-detail { font-size: 12.5px; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-find-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sc-find-acts form.inline { margin: 0; }
.sc-find-acts .btn { min-height: 36px; }
.sc-finds-more > summary { cursor: pointer; color: var(--dim); font-size: 13px; font-weight: 600; padding: 4px 0; }
.sc-finds-more[open] > summary { margin-bottom: 8px; }
/* Track an IP: three facts side by side, then the actions and the events. */
.sc-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
@media (max-width: 900px) { .sc-track { grid-template-columns: minmax(0, 1fr); } }
.sc-track-i { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; overflow-wrap: anywhere; }
.sc-track-acts { margin: 4px 0 12px; }
.sc-raw { margin-top: 10px; }
.sc-raw summary { cursor: pointer; color: var(--dim); font-size: 13px; }
/* Threat feeds: one row per list; the name cell carries what it is, the last
   cell the buttons, right-aligned so the column reads as one. */
.sc-attn-go { background: var(--accent-soft); margin: 10px 0; }
.sc-feeds { width: 100%; margin-top: 12px; }
.sc-feeds td { vertical-align: top; }
.sc-feed-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 260px; max-width: 520px; }
.sc-feed-name .hint { flex-basis: 100%; margin: 0; }
.sc-feed-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 180px; }
.sc-feed-acts { text-align: right; white-space: nowrap; }
.sc-feed-acts .btn, .sc-feed-acts form.inline { margin-left: 6px; }
/* The popups live inside that cell and would inherit its nowrap and right
   alignment: the terms ran off the edge behind a horizontal scrollbar. */
.sc-feed-acts .ui-modal { white-space: normal; text-align: left; }
.sc-feed-acts .ui-modal .mono { overflow-wrap: anywhere; }
.sc-feed-add { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 160px) auto; align-items: end; }
@media (max-width: 900px) { .sc-feed-add { grid-template-columns: minmax(0, 1fr); } }
.sc-feed-log { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-feed-log h3 { margin: 0 0 8px; }
/* Login protection: one small tile per watched service. */
.sc-svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.sc-svc-i { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
/* DDoS Protection: the templates, one small form each. */
.sc-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.sc-tpl { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 0; }
.sc-tpl.on { border-color: var(--accent); background: var(--accent-soft); }
.sc-tpl .btn { margin-top: auto; }
.sc-attn-list { display: grid; gap: 8px; margin: 0 0 16px; }
.sc-attn { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); }
.sc-attn.bad { background: var(--bad-soft); }
.sc-attn-why { font-size: 13px; color: var(--dim); margin-top: 2px; }
.sc-allgood { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.sc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
@media (max-width: 1000px) { .sc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sc-tools { grid-template-columns: minmax(0, 1fr); } }
.sc-tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-tool-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-tool-top h2 { margin: 0; font-size: 15px; }
.sc-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-lbl { font-size: 12.5px; color: var(--dim); }
.joined-dot { display: grid; place-items: center; padding: 0 8px; border: 1px solid var(--line); border-left: 0; border-right: 0; background: var(--panel-2); font-family: var(--font-mono); color: var(--faint); }

/* "Generate a strong password" under a new-password field (panel.js). Wraps
 * under the field on a narrow screen; the buttons are ordinary text links. */
.pwgen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; }
.pwgen button.link { font-size: 13px; min-height: 28px; }

/* A long unbroken value (a key, a hash) wraps instead of widening the page. */
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }

/* Malware Watch (D-BR): the customer's /my/malware and the administrator's
 * /security/malware. On a phone every finding is a card (label over value)
 * instead of a table to scroll sideways, and the popup's buttons stack. */
.mw-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.mw-head > div { flex: 1 1 320px; min-width: 0; }
.mw-status { flex: none; }
.mw-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mw-info { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--text); border-color: var(--info); }
.mw-foot-note { margin-top: 16px; font-size: 13px; }
.mw-list { position: relative; }
.mw-path .mono { overflow-wrap: anywhere; word-break: break-all; }
.mw-note { display: block; margin-top: 4px; }
.mw-act { text-align: right; white-space: nowrap; }
.mw-act .btn { min-height: 36px; }
.ui-modal.mw-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.mw-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.mw-dl dt { color: var(--dim); }
.mw-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mw-sha { font-size: 12px; word-break: break-all; }
.mw-warn { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: normal; }
/* The popups sit inside the row's last cell: undo its nowrap and alignment. */
.mw-act .ui-modal { white-space: normal; text-align: left; }
.mw-foot { flex-wrap: wrap; justify-content: space-between; }
.mw-foot form { margin: 0; }
.mw-foot .btn { min-height: 40px; }
.btn.mw-del { color: var(--bad); border-color: var(--bad); background: transparent; }
.mw-switch { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.mw-switch-text { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; }
.mw-switch-text h2 { margin: 0; }
.mw-switch form { margin: 0; }
.mw-switch .btn { min-height: 40px; }
.mw-kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mw-kv:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.mw-ok { color: var(--ok); }
.mw-limits { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 10px; }
.mw-limits label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; flex: 1 1 260px; min-width: 0; }
.mw-limits label small { font-weight: 400; }
.mw-cpu { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.mw-cpu input { width: 96px; min-height: 40px; box-sizing: border-box; }
.mw-limits .btn { min-height: 40px; }
.mw-filter-head { flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.mw-filter-head h2 { margin: 0; }
.card-head form.mw-filter { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 0 0 0 auto; }
.mw-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); min-width: 0; }
.mw-filter select { min-height: 40px; max-width: 100%; width: auto; }
.mw-filter .btn { min-height: 40px; }
/* Several at once: a checkbox per row; the bar appears once one is ticked
   (:has, so it works with no script too; panel.js adds the counts and hides
   the actions that fit none of the ticked files). */
.mw-bulk { margin: 0; }
.mw-pick { width: 32px; padding-right: 0; }
.mw-pick input, label.check.mw-all-phone input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.mw-bulk-bar { display: none; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; margin: 0 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px;
  background: var(--accent-soft); position: sticky; top: 0; z-index: 5; }
.mw-wrap:has(.mw-sel:checked) .mw-bulk-bar { display: flex; }
.mw-bulk-bar .btn { min-height: 40px; }
.mw-bulk-bar .btn[hidden] { display: none; }
.mw-bulk-n { margin-right: 4px; }
.mw-bulk-clear { margin-left: auto; }
.mw-bulk-hint { flex-basis: 100%; margin: 0; }
.mw-bulk-list { margin: 0; padding-left: 18px; font-size: 12.5px; max-height: 40vh; overflow-y: auto; overflow-wrap: anywhere; }
.mw-list tr:has(.mw-sel:checked) { background: var(--accent-soft); }
label.check.mw-all-phone { display: none; }
@media (max-width: 640px) {
  .mw-list thead th.mw-pick { display: none; }
  label.check.mw-all-phone { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; font-weight: 400; }
  .mw-list td.mw-pick { width: auto; padding: 0 0 4px; }
  .mw-list td.mw-pick input { width: 22px; height: 22px; }
  /* On a phone the bar sits on the bottom edge of the screen, in reach. */
  .mw-bulk-bar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; border-radius: 0;
    border-width: 1px 0 0; background: var(--panel); box-shadow: 0 -8px 24px rgba(15, 23, 42, .14); z-index: 40;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .mw-bulk-bar .btn { flex: 1 1 40%; min-height: 44px; }
  .mw-bulk-hint { display: none; }
  .mw-wrap:has(.mw-sel:checked) { padding-bottom: 150px; }
}
@media (max-width: 640px) {
  .mw-list { overflow: visible; }
  .mw-list table, .mw-list tbody, .mw-list tr, .mw-list td { display: block; width: 100%; box-sizing: border-box; }
  .mw-list thead { display: none; }
  .mw-list tr { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .mw-list td { border: 0; padding: 5px 0; text-align: left; }
  .mw-list td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 2px; }
  .mw-act { text-align: left; white-space: normal; }
  .mw-act > .btn { width: 100%; min-height: 44px; }
  .mw-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mw-dl dd { margin-bottom: 8px; }
  .mw-foot { flex-direction: column-reverse; align-items: stretch; }
  .mw-foot .btn { width: 100%; min-height: 44px; }
  .card-head form.mw-filter { margin: 0; width: 100%; }
  .mw-filter label { flex: 1 1 140px; }
  .mw-filter select { width: 100%; }
  .mw-switch form, .mw-switch .btn { width: 100%; }
  /* All three tabs in sight rather than one cut off in a sideways strip. */
  .ac-tabs.mw-tabs { flex-wrap: wrap; overflow: visible; box-shadow: none; gap: 6px; }
  .ac-tabs.mw-tabs a { padding: 8px 12px; min-height: 36px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px; }
  .ac-tabs.mw-tabs a.on { border-color: var(--accent); background: var(--accent-soft); }
}

/* ── Services: the installed version of each (2026-10-07) ───────────────────
 * A Version column made the table wider than a phone, so below 640px each
 * service is a card of its own - name on top, the facts in two columns, the
 * buttons along the bottom - rather than a table to scroll sideways. */
.svc-list { overflow-x: auto; position: relative; }
@media (max-width: 640px) {
  .svc-list { overflow: visible; }
  .svc-list table, .svc-list tbody, .svc-list tr { display: block; width: 100%; box-sizing: border-box; }
  .svc-list thead { display: none; }
  .svc-list tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px;
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .svc-list td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .svc-list td.svc-name { grid-column: 1 / -1; font-weight: 600; }
  .svc-list td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 2px; }
  .svc-list td.svc-act { grid-column: 1 / -1; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; }
  .svc-list td.svc-act:has(> .hint:only-child) { display: none; }
  .svc-list td.svc-act .act, .svc-list td.svc-act summary { min-height: 40px; }
}

/* Server -> Leftovers (D-BY). */
.tile-n.warn { color: var(--warn); }
.lo-table { position: relative; }
.lo-what { min-width: 0; }
.lo-what .pill { margin-top: 4px; }
.lo-path { overflow-wrap: anywhere; font-size: 12px; }
.lo-err { color: var(--warn); overflow-wrap: anywhere; margin-top: 4px; }
.lo-err svg { width: 14px; height: 14px; vertical-align: -2px; }
.lo-act { white-space: nowrap; text-align: right; }
.lo-act .btn { min-height: 36px; }
.lo-note { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.lo-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lo-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; min-height: 44px; font-weight: 400; }
.lo-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.lo-opt small { display: block; color: var(--faint); }
.lo-sum { padding: 14px 18px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lo-set { padding: 0 18px 18px; display: grid; gap: 14px; }
.lo-set select { max-width: 220px; }
@media (max-width: 900px) {
  .lo-table table { min-width: 0; }
  .lo-table table, .lo-table tbody, .lo-table tr, .lo-table td { display: block; }
  .lo-table thead { display: none; }
  .lo-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .lo-table td { padding: 0; border: 0; min-width: 0; }
  .lo-table tbody tr:hover td { background: none; }
  .lo-table td.lo-what, .lo-table td.lo-act { grid-column: 1 / -1; }
  .lo-table td.num { text-align: left; }
  .lo-table td[data-l]::before { content: attr(data-l); display: block;
    font-size: 11px; font-weight: 600; color: var(--faint); margin-bottom: 2px; }
  .lo-act { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; }
  .lo-act .btn { flex: 1 1 auto; }
  .lo-opts { grid-template-columns: minmax(0, 1fr); }
}

/* ── Collaborators (D-CA): the owner's page, the popups, the banner a
   collaborator sees on every page, and the sign-in steps. ─────────────── */
.collab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.collab-card { min-width: 0; }
.collab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.collab-meter { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.collab-meter .bar { width: 120px; }
.collab-card .tbl-scroll { position: relative; }
.collab-table td { vertical-align: middle; }
.collab-av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.collab-who { display: flex; flex-direction: column; min-width: 0; }
.collab-who small { color: var(--dim); overflow-wrap: anywhere; }
.collab-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.collab-sub { display: block; margin-top: 2px; }
.collab-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.collab-acts form { margin: 0; }
.collab-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.collab-modal .ui-modal-body { display: flex; flex-direction: column; gap: 12px; }
.collab-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.collab-two > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.collab-fs { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.collab-fs legend { font-weight: 600; padding: 0 6px; }
.collab-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.collab-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 36px; min-width: 0; }
.collab-check input[type] { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.collab-check > span { display: flex; flex-direction: column; min-width: 0; }
.collab-check small { color: var(--dim); }
.collab-doms { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 28px; }
.collab-dom { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; max-width: 100%; }
.collab-dom span { overflow-wrap: anywhere; }
.collab-dom:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.collab-fs:has(input[name="scope"][value="all"]:checked) .collab-doms { opacity: .45; pointer-events: none; }
.collab-never { margin: 0; font-size: 13px; color: var(--dim); }
/* The account's own email address (B1b). */
.profile-card { display: flex; flex-direction: column; gap: 14px; }
.profile-now { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line-soft); }
.profile-label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.profile-email { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.profile-hint { margin: 4px 0 0; line-height: 1.5; }
.profile-pending { margin: 0; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); overflow-wrap: anywhere; }
.collab-made-info { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.collab-made-info small, .collab-check small { overflow-wrap: anywhere; }
.collab-check .mono, .collab-made-info .mono { font-weight: 400; overflow-wrap: anywhere; }
.collab-hint { margin: 0; line-height: 1.5; }
.collab-modal .collab-hint, .collab-fs .collab-hint { margin-top: 2px; }
.collab-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 16px; }
.collab-rule-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; }
.collab-rule-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.4; }
.collab-rule-desc { font-size: 13px; color: var(--dim); line-height: 1.5; }
.collab-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--line-soft); border-radius: var(--radius-sm); font-size: 13px; color: var(--dim); line-height: 1.5; }
.collab-note b { color: var(--text); }
.collab-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.collab-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: 13px; }
.collab-banner-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.collab-banner-who svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.collab-banner-who strong { color: var(--accent-strong); overflow-wrap: anywhere; }
.collab-banner-what { color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
.collab-switch { margin: 0 0 0 auto; display: inline-flex; gap: 6px; align-items: center; }
.collab-switch select { min-height: 36px; max-width: 180px; }
.collab-email { overflow-wrap: anywhere; }
.collab-enrol { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.collab-enrol .secret { overflow-wrap: anywhere; }
.collab-choose { display: flex; flex-direction: column; gap: 8px; }
.collab-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.collab-pick:hover, .collab-pick:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.collab-pick-name { font-weight: 700; }
.collab-access { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.collab-access p { margin: 0; }
.collab-go { display: inline-flex; justify-content: center; text-decoration: none; }
/* API access (D-CC): the address, and a new token shown once. */
.api-card { min-width: 0; }
.api-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.api-end-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.api-k { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.api-url { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
/* The billing modules (D-CN): one row each, the button under the text on a phone. */
.api-mods-card { min-width: 0; }
.api-mods { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.api-mod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.api-mod-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.api-mod .btn { min-height: 44px; }
.api-mod-size { color: var(--dim); font-weight: 400; margin-left: 4px; }
.api-once { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-color: var(--accent); }
.api-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); font-size: 13px; line-height: 1.5; color: var(--text); }
.api-warn svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.api-tok { padding: 14px; border-radius: var(--radius-sm); border: 1px dashed var(--accent); background: var(--line-soft); color: var(--text); font-size: 14px; overflow-wrap: anywhere; word-break: break-all; }
.api-once-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.api-hint { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.api-ips { width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical; }
/* Account import (B3, D-CD). */
.imp-head-text { flex: 1 1 360px; min-width: 0; max-width: 760px; }
.imp-head .btn-row { flex: none; }
.imp-file { overflow-wrap: anywhere; }
.imp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; font-weight: 600; text-decoration: none; }
.imp-back svg { width: 16px; height: 16px; }
.imp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.imp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-width: 0; }
.imp-kpi b { font-size: 22px; font-weight: 700; color: var(--text); }
.imp-kpi small { font-size: 13px; color: var(--dim); }
.imp-kpi .imp-ok { color: var(--ok); }
.imp-kpi .imp-bad { color: var(--bad); }
.imp-acct { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.imp-acct-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; }
.imp-acct-who { min-width: 0; flex: 1 1 260px; }
.imp-acct-who h2 { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.imp-acct-who p { margin: 2px 0 0; overflow-wrap: anywhere; }
.imp-choose { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
.imp-choose label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dim); min-width: 0; }
.imp-choose select { min-height: 40px; max-width: 100%; }
.imp-finds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.imp-find { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); min-width: 0; }
.imp-find.imp-red { background: var(--bad-soft); }
.imp-find.imp-amber { background: var(--warn-soft); }
.imp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.imp-red .imp-dot { background: var(--bad); }
.imp-amber .imp-dot { background: var(--warn); }
.imp-find-text { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.imp-fixes { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-fixes form { margin: 0; }
.imp-fix-hint { font-size: 13px; align-self: center; }
.imp-left { display: flex; flex-direction: column; gap: 6px; }
.imp-left form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.imp-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.imp-go-text { flex: 1 1 300px; font-size: 14px; color: var(--dim); }
.imp-go-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Account > Identity: fields stacked, each action a same-width button with
   its explanation under it (the card is a narrow column even on desktop). */
.ac-id { display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
.ac-id .field { width: 100%; margin: 0; min-width: 0; }
.ac-id .field input { width: 100%; max-width: 100%; }
.ac-id-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-id-row input { flex: 1 1 200px; min-width: 0; }
.ac-id-row .btn { flex: none; }
.ac-id-save { display: flex; }
.ac-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); min-width: 0; }
.ac-act .btn { min-width: 230px; justify-content: center; }
.ac-act .hint { margin: 0; }
@media (max-width: 640px) {
  .ac-act .btn, .ac-id-save .btn, .ac-id-row .btn { width: 100%; min-width: 0; }
}
/* Node.js runtimes: Install/Update left, Remove right; stacked on a phone. */
.node-acts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 4px; }
.node-acts form { margin: 0; }
.node-acts-note { margin: 0; max-width: 420px; }
/* The default runtime: a normal-width select with its button beside it. */
.node-default { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.node-default select { flex: 0 1 300px; width: auto; max-width: 100%; min-height: 40px; }
.node-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .node-acts { flex-direction: column; align-items: stretch; }
  .node-acts .btn { width: 100%; justify-content: center; }
  .node-default { flex-direction: column; align-items: stretch; }
  .node-default select { flex: none; width: 100%; }
  .node-default .btn { width: 100%; justify-content: center; }
}
/* New import: the panel, then how; the section shown follows the two selects
   (CSS :has, no script). Without :has the page is sent back with the choice
   and the server marks the section to show (.imp-on). */
.imp-new { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.imp-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: end; }
.imp-pick label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.imp-pick select { min-height: 44px; max-width: 100%; }
.imp-nojs { margin: 0; }
.imp-sec { display: none; flex-direction: column; gap: 14px; min-width: 0; }
.imp-sec h2 { margin: 0; font-size: 16px; }
.imp-sec.imp-on { display: flex; }
@supports selector(:has(a)) {
  .imp-nojs { display: none; }
  .imp-sec.imp-on { display: none; }
  .imp-new:has(.imp-sel-panel option[value="bhpanel"]:checked):has(.imp-sel-how option[value="live"]:checked) .imp-for-bhpanel.imp-for-live,
  .imp-new:has(.imp-sel-panel option[value="bhpanel"]:checked):has(.imp-sel-how option[value="file"]:checked) .imp-for-bhpanel.imp-for-file,
  .imp-new:has(.imp-sel-panel option[value="cwp"]:checked):has(.imp-sel-how option[value="live"]:checked) .imp-for-cwp.imp-for-live,
  .imp-new:has(.imp-sel-panel option[value="cwp"]:checked):has(.imp-sel-how option[value="file"]:checked) .imp-for-cwp.imp-for-file,
  .imp-new:has(.imp-sel-panel option[value="cpanel"]:checked):has(.imp-sel-how option[value="live"]:checked) .imp-for-cpanel.imp-for-live,
  .imp-new:has(.imp-sel-panel option[value="cpanel"]:checked):has(.imp-sel-how option[value="file"]:checked) .imp-for-cpanel.imp-for-file,
  .imp-new:has(.imp-sel-panel option[value="cyber"]:checked):has(.imp-sel-how option[value="live"]:checked) .imp-for-cyber.imp-for-live,
  .imp-new:has(.imp-sel-panel option[value="cyber"]:checked):has(.imp-sel-how option[value="file"]:checked) .imp-for-cyber.imp-for-file { display: flex; }
}
.imp-form { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.imp-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.imp-form input { min-height: 40px; max-width: 100%; }
.imp-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.imp-actions { display: flex; justify-content: flex-end; }
.imp-keyline { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.imp-keyline-head { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.imp-keyline-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.imp-keyline-row code { flex: 1 1 300px; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 10px 12px; background: var(--panel-2); border: 1px dashed var(--accent); border-radius: var(--radius-sm); }
.imp-srcs { display: flex; flex-direction: column; gap: 10px; }
.imp-src { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.imp-src-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.imp-src-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.imp-src-who b { overflow-wrap: anywhere; }
.imp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-src-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-src-acts form { margin: 0; }
.imp-src-err { margin: 0; font-size: 13px; color: var(--bad); overflow-wrap: anywhere; }
.imp-fp { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.imp-fp code { overflow-wrap: anywhere; font-size: 12px; }
.imp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.imp-filter input { flex: 1 1 240px; min-width: 0; min-height: 40px; }
.imp-tick { width: 44px; text-align: center; }
.imp-pick-table td { vertical-align: middle; }
.imp-newpw { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.imp-newpw td { overflow-wrap: anywhere; }
/* The account boxes the "tick all" box drives (panel.js data-check-all). */
.sc-acct, .pl-pick, .al-pick { cursor: pointer; }
.imp-sum { overflow-wrap: anywhere; } /* an export's SHA-256 on a phone */
/* An import while it runs (views/_import_live.php). */
.il-meter { display: block; margin: 8px 0 12px; }
.il-accts { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.il-accts li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.il-accts li.now { font-weight: 600; }
.il-stages { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.il-stages li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.il-stages li.done { color: var(--dim); }
.il-stages li.now { font-weight: 600; }
.il-log summary { cursor: pointer; padding: 6px 0; min-height: 36px; }
.il-pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px;
  background: var(--line-soft); border-radius: var(--radius-sm); padding: 10px; margin: 0; }
.imp-tick input { width: 18px; height: 18px; }
.imp-acct-name { cursor: pointer; overflow-wrap: anywhere; }
.imp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .imp-head .btn-row, .imp-head .btn-row .btn { width: 100%; justify-content: center; }
  .imp-choose { width: 100%; }
  .imp-choose label { flex: 1 1 100%; }
  .imp-choose select { width: 100%; }
  .imp-choose .btn, .imp-go-acts, .imp-go-acts .btn { width: 100%; justify-content: center; }
  .imp-fixes { width: 100%; }
  .imp-fixes > * { flex: 1 1 100%; }
  .imp-fixes .btn { width: 100%; justify-content: center; }
  .imp-actions .btn, .imp-src-acts, .imp-src-acts > *, .imp-src-acts .btn { width: 100%; justify-content: center; }
  .imp-filter .btn { flex: 1 1 100%; justify-content: center; }
}
/* Title and the Create button on one row; the text keeps a readable width. */
.api-head-text { flex: 1 1 360px; min-width: 0; max-width: 760px; }
.api-head .btn-row { flex: none; }
/* The folded API reference under the address. */
.api-ref { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; min-width: 0; }
.api-ref > summary { display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.api-ref[open] > summary { margin-bottom: 8px; }
.api-ref-scroll { position: relative; }
.api-ref-table { width: 100%; font-size: 13px; }
.api-ref-table td { vertical-align: middle; }
.api-ref-table td:first-child { white-space: nowrap; }
.api-ref .api-hint { margin-top: 10px; }
.api-verb { display: inline-block; min-width: 54px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; letter-spacing: .03em; background: var(--line-soft); color: var(--dim); }
.api-verb-get { color: var(--ok); background: var(--ok-soft); }
.api-verb-post { color: var(--accent); background: var(--accent-soft); }
.api-verb-delete { color: var(--bad); background: var(--bad-soft); }
@media (max-width: 640px) {
  .api-head .btn-row, .api-head .btn-row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .collab-two, .collab-areas { grid-template-columns: minmax(0, 1fr); }
  .collab-meter { margin-left: 0; }
  .collab-switch { margin-left: 0; width: 100%; }
  .collab-switch select { flex: 1 1 auto; max-width: none; }
  .collab-doms { padding-left: 0; }
  /* The list as cards on a phone: the table's rows stack. */
  .collab-table thead { display: none; }
  .collab-table, .collab-table tbody, .collab-table tr, .collab-table td { display: block; width: 100%; }
  .collab-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .collab-table td { padding: 4px 0; border: 0; }
  .collab-acts { justify-content: stretch; }
  .collab-acts > *, .collab-acts form .btn { flex: 1 1 auto; }
  .collab-acts form { display: flex; flex: 1 1 auto; }
}