:root {
  --navy: #070E1A; --navy-2: #0E1A2E; --card-bg: #101D33;
  --border: rgba(255,255,255,.08); --border-bright: rgba(255,255,255,.16);
  --yellow: #f5c518; --yellow-soft: #B8860B; --blue: #3B82F6; --cyan: #22D3EE;
  /* Text tokens synced with app.html (v4): same body font, same greys —
     the admin console reads as the same product, not a sibling app. */
  --text: #ECF1FA; --text-secondary: #B7C3DC; --text-caption: #A6B3CB;
  --crit: #EF6A63; --warn: #F5C518; --ok: #34D399;
  --row-zebra: rgba(255,255,255,.022);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Light-theme overrides (convention B: --text, --crit/--warn/--ok pills) */
[data-theme="light"] {
  --navy:           #F5F7FA;
  --navy-2:         #EEF1F6;
  --card-bg:        #FFFFFF;
  --border:         #D8DEE8;
  --text:           #0A1628;
  --text-secondary: #3C4A60;   /* synced with app.html light */
  --text-caption:   #51607A;
  --crit:           #B71C1C;
  --warn:           #B45309;
  --ok:             #1F7A34;
  --row-zebra:      rgba(15,23,42,.025);
}
[data-theme="light"] .topbar,
[data-theme="light"] .card,
[data-theme="light"] .modal { box-shadow: 0 1px 3px rgba(10,22,40,.06); }
[data-theme="light"] .product-tag { color: var(--text-secondary); }
[data-theme="light"] .brand-fallback .q,
[data-theme="light"] .eyebrow { color: var(--gold); }
[data-theme="light"] .btn-quiet:hover,
[data-theme="light"] .act:hover,
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus { border-color: var(--yellow-soft); }
[data-theme="light"] .pill.crit { border-color: rgba(183,28,28,.5); }
[data-theme="light"] .pill.warn { border-color: rgba(180,83,9,.5); }
[data-theme="light"] .pill.ok   { border-color: rgba(31,122,52,.5); }
[data-theme="light"] .error-box { background: rgba(183,28,28,.06); border-color: rgba(183,28,28,.30); }
[data-theme="light"] .cred { background: var(--navy-2); border-color: var(--ok); }

/* Theme toggle (shared widget) */
.theme-toggle {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
}
[data-theme="light"] .theme-toggle { background: rgba(10,22,40,.04); }
.theme-toggle button {
  background: transparent; border: none;
  padding: 4px 9px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  font-family: inherit;
}
.theme-toggle button:hover { color: var(--text); }
/* Active state comes from trust-slate.css (blue wash). */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--text);
  background:
    radial-gradient(ellipse 80% 55% at 78% -10%, rgba(47,111,228,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 8% 4%, rgba(34,211,238,.08) 0%, transparent 60%),
    var(--navy);
  -webkit-font-smoothing: antialiased;   /* dark default = light-on-dark */
  font-weight: 420;
}
/* Light theme is dark-on-white — grayscale smoothing thins it. */
[data-theme="light"] body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
[data-theme="light"] body { background: radial-gradient(ellipse 80% 55% at 78% -10%, rgba(47,111,228,.06) 0%, transparent 60%), var(--navy); }
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: rgba(7,14,26,.66); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20;
}
[data-theme="light"] .topbar { background: rgba(255,255,255,.82); }
.logo-img { height: 36px; display: block; }
.product-tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); letter-spacing: .08em; border-left: 1px solid var(--border); padding-left: 12px; }
.brand-fallback { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.brand-fallback .tri { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--gold); }
.brand-fallback .q { color: var(--gold); }
.spacer { flex: 1; }
.btn-quiet { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 13px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-quiet:hover { border-color: var(--yellow); }
.wrap { padding: 32px 24px; max-width: 1440px; margin: 0 auto; }
.head { margin-bottom: 20px; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow); letter-spacing: .14em; margin-bottom: 8px; }
.title { font-size: 24px; font-weight: 600; }
.meta { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.meta code { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 22px; box-shadow: 0 12px 40px -24px rgba(0,0,0,.6); }
[data-theme="light"] .card { background: var(--card-bg); }
.card h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
.help { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.help code { font-family: var(--font-mono); font-size: 12px; color: var(--text); background: var(--navy-2); padding: 1px 6px; border-radius: 5px; }
.help ol { margin: 10px 0 0; padding-left: 20px; }
.row-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-primary { background: var(--yellow); color: #1a1300; border: none; font-weight: 600; border-radius: 8px; padding: 9px 15px; font-size: 13px; cursor: pointer; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-danger { background: var(--crit); color: #fff; border: none; font-weight: 600; border-radius: 8px; padding: 9px 15px; font-size: 13px; cursor: pointer; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); }
.danger-zone { border: 1px solid rgba(220,60,60,.45); background: rgba(220,60,60,.08); border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
.danger-zone strong { color: var(--crit); }
.radio-row { display: flex; gap: 16px; margin-top: 6px; }
.radio-row label { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text); cursor: pointer; }
.radio-row label input { margin-top: 3px; }
.radio-row .hint { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.status-msg { font-size: 13px; color: var(--text-secondary); }
.status-msg.ok { color: var(--ok); } .status-msg.err { color: var(--crit); }
/* A failed read rendered INSIDE a table body. Two panels wrote their error
   into a `.help` cell -- the same muted colour as the "Loading…" row it had
   just replaced -- so a dead panel was indistinguishable from a slow one.
   The console already made this distinction everywhere it used `.status-msg`;
   these two were the cells that could not. Mirrors `.status-msg.cs-error`. */
.cell-err { color: var(--crit); }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.t th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-secondary); text-transform: uppercase; }
table.t td { color: var(--text-secondary); }
table.t td.name { color: var(--text); font-weight: 600; }
table.t thead th { position: sticky; top: 0; background: var(--navy-2); z-index: 1; border-bottom: 1px solid var(--border-bright); }
tr.row-hidden { display: none; }
/* Premium polish: zebra + row hover + crisper inline plan select */
table.t tbody tr { transition: background .12s ease; }
table.t tbody tr:nth-child(2n) > td { background: var(--row-zebra); }
table.t tbody tr:hover > td { background: var(--navy-2); }
table.t td select { padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 12px; font-family: var(--font-sans); cursor: pointer; transition: border-color .15s; }
table.t td select:hover { border-color: var(--border-bright); }
table.t td select:focus { outline: none; border-color: var(--yellow); }
.scroll-x { border: 1px solid var(--border); border-radius: 12px; }

/* Top-level admin tabs (Tenants / Add tenant) — a segmented pill bar */
.admin-tabs { display: inline-flex; gap: 6px; margin: 4px 0 18px; padding: 5px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; }
.atab { background: transparent; border: 1px solid transparent; color: var(--text-secondary); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.atab:hover { color: var(--text); background: var(--navy-2); }
.atab.is-active { color: var(--navy); background: var(--yellow); border-color: var(--yellow); }
[data-theme="light"] .atab.is-active { color: #fff; background: var(--yellow-soft); border-color: var(--yellow-soft); }
.admin-panel[hidden] { display: none; }

/* Greeting + role chip */
.role-chip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); border: 1px solid var(--yellow); border-radius: 999px; padding: 2px 9px; margin-left: 10px; vertical-align: middle; }
[data-theme="light"] .role-chip { color: var(--yellow-soft); border-color: var(--yellow-soft); }

/* Tenant search / filter controls */
.tenant-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; }
.tenant-controls input, .tenant-controls select { padding: 8px 11px; border-radius: 7px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 13px; font-family: var(--font-sans); }
.tenant-controls input:focus, .tenant-controls select:focus { outline: none; border-color: var(--yellow); }
.tenant-search { flex: 1 1 240px; min-width: 180px; }
.summary-counts { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.summary-counts b { color: var(--text); font-weight: 600; }
.summary-counts .sep { color: var(--border); margin: 0 6px; }
/* Tenant tabs (quick status presets) */
.tenant-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 4px; border-bottom: 1px solid var(--border); }
.ttab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 13px; margin-bottom: -1px; cursor: pointer; border-radius: 8px 8px 0 0;
  transition: color .15s, border-color .15s, background .15s;
}
.ttab:hover { color: var(--text); background: var(--navy-2); }
.ttab.is-active { color: var(--yellow); border-bottom-color: var(--yellow); }
/* Premium per-row action cluster + "More" popover */
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.act-primary { border-color: var(--blue-bd); color: var(--text); font-weight: 600; }
.act-primary:hover { background: var(--blue-wash); }
.act-more { font-weight: 600; }
.row-menu {
  position: fixed; z-index: 70; min-width: 196px; padding: 7px;
  background: var(--card-bg); border: 1px solid var(--border-bright); border-radius: 12px;
  box-shadow: 0 22px 60px -22px rgba(0,0,0,.7); display: none; flex-direction: column; gap: 2px;
  /* Last-resort safety: if a menu is still taller than the viewport (tiny
     window / many actions), keep every item reachable by scrolling inside it. */
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.row-menu.open { display: flex; }
.row-menu .act {
  display: flex; align-items: center; width: 100%; margin: 0; border: 0; border-radius: 8px;
  background: transparent; padding: 8px 11px; font-size: 12.5px; text-align: left;
}
.row-menu .act:hover { background: var(--navy-2); border-color: transparent; }
.row-menu .act[data-act="erase"] { color: var(--crit); }
.row-menu .act[data-act="erase"]:hover { background: rgba(220,60,60,.1); }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.pill.ok { color: var(--ok); border-color: rgba(95,200,143,.5); }
.pill.off { color: var(--text-secondary); }
.pill.crit { color: var(--crit); border-color: rgba(220,60,60,.5); }
.pill.warn { color: var(--warn); border-color: rgba(233,185,73,.5); }
.act { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; margin-right: 4px; }
.act:hover { border-color: var(--yellow); }
.error-box { display: none; background: rgba(220,60,60,.12); border: 1px solid rgba(220,60,60,.4); color: var(--crit); font-size: 13px; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
/* modal */
.overlay { display: none; position: fixed; inset: 0; background: rgba(4,9,18,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 50; }
.overlay.open { display: flex; animation: ov-fade .16s ease; }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--card-bg); border: 1px solid var(--border-bright); border-radius: 16px; padding: 26px; width: 100%; max-width: 560px; max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 32px 80px -24px rgba(0,0,0,.7); animation: modal-pop .18s cubic-bezier(.2,.7,.3,1); }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
#users-list { max-height: 38vh; overflow-y: auto; }
/* Always-visible scrollbars: macOS overlay scrollbars otherwise hide, leaving
   no cue that horizontally-clipped content (e.g. the Actions column) scrolls.
   `scroll` (not `auto`) makes the track render even when no scroll is needed —
   so the affordance is consistent regardless of viewport width. */
/* `.table-scroll` is app.css's scroller class. admin.html uses it in 7 places
   (Component health, HA/Infra, Acquisition, …) but loads ONLY admin.css, where
   it had no definition at all — so every one of those wrappers was an inert
   <div> and its table overflowed the card and pushed the whole page sideways.
   Folded into `.scroll-x` rather than reimplemented, so the admin console has
   one scroller behaviour and not two that drift. */
.scroll-x, .table-scroll { overflow-x: auto; padding-bottom: 2px; position: relative; }
/* Right-edge fade + chevron affordance. macOS hides overlay scrollbars, so a
   too-wide table (Tenants) gives NO cue that columns are clipped to the right.
   The fade must live on a NON-scrolling .sxwrap parent: a ::after inside the
   scroller scrolls away and — being after a <table> — renders below it, which
   is why the previous sticky version never appeared. scrollAffordance() (JS,
   before </body>) toggles [data-more] when content is hidden to the right.
   Fades to the opaque, theme-defined --card-bg, so it is invisible-until-
   needed and correct in both light and dark. */
.sxwrap { position: relative; }
.sxwrap::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px;
  pointer-events: none; border-radius: 0 12px 12px 0;
  background: linear-gradient(to right, transparent, var(--card-bg));
  opacity: 0; transition: opacity .15s ease;
}
.sxwrap[data-more="1"]::after { opacity: 1; }
/* Custom, ALWAYS-VISIBLE horizontal scrollbar for the wide Tenants table.
   macOS overlay scrollbars hide at rest and can't be forced visible via CSS
   (a styled ::-webkit-scrollbar still renders as a 0-space overlay here), so
   hide the native bar inside .sxwrap and render our own — positioned, sized
   and made draggable by scrollAffordance(). Shown whenever the table
   overflows; theme-correct via --surface-sub / --border / --text-secondary. */
.sxwrap > .scroll-x { scrollbar-width: none; }
.sxwrap > .scroll-x::-webkit-scrollbar { display: none; }
.sx-bar {
  position: relative; height: 12px; margin: 6px 2px 0; border-radius: 7px;
  background: var(--surface-sub, rgba(255,255,255,.05));
  border: 1px solid var(--border); cursor: pointer; touch-action: none;
}
.sx-bar[hidden] { display: none; }
.sx-thumb {
  position: absolute; top: 1px; bottom: 1px; left: 0; min-width: 36px; width: 40px;
  border-radius: 6px; background: var(--text-secondary, #94A3B8); opacity: .5;
  transition: opacity .12s ease; will-change: transform;
}
.sx-bar:hover .sx-thumb, .sx-thumb.dragging { opacity: .85; }
/* Let the Actions column wrap to multiple lines on narrow viewports. The
   default <td> shrink-to-fit makes 8 buttons in one row push the table out
   horizontally — wrapping keeps every action visible without scrolling. */
.t td.actions { white-space: normal; min-width: 0; }
.t td.actions .act { margin-bottom: 4px; }
.scroll-x, .table-scroll, .modal, #users-list { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.scroll-x::-webkit-scrollbar, .table-scroll::-webkit-scrollbar, .modal::-webkit-scrollbar, #users-list::-webkit-scrollbar { -webkit-appearance: none; height: 10px; width: 10px; }
.scroll-x::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, #users-list::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, #users-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* Sticky horizontal scrollbar for every admin scroller (ported from app.css +
   app-main.js initTableScrollHbars). The native bar is not enough here for two
   reasons: macOS overlay-fades it to nothing when the OS pref is "Automatic",
   and on a long table it sits below the fold — so a wide table (Staff activity
   is the worst: five columns plus a free-text Details blob) reads as *clipped*
   rather than scrollable, and the columns off the right edge are simply lost.
   This bar is always visible while the content overflows and stays pinned just
   above the viewport bottom. Same defect class as the `.table-scroll` note
   above: the customer app got the affordance, the admin console never did. */
.custom-hbar {
  position: relative;
  height: 12px; margin: 8px 4px 4px 4px;
  background: var(--navy-2); border-radius: 6px;
  display: none;  /* JS un-hides only when the content actually overflows */
  cursor: pointer;
}
.custom-hbar.has-overflow { display: block; }
.custom-hbar-thumb {
  position: absolute; top: 1px; bottom: 1px;
  background: var(--yellow); border-radius: 5px;
  min-width: 24px;
  transition: background .12s;
}
.custom-hbar:hover .custom-hbar-thumb,
.custom-hbar.dragging .custom-hbar-thumb { background: var(--blue); }
.custom-hbar.hbar-sticky {
  position: sticky; bottom: 8px; z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
[data-theme="light"] .custom-hbar.hbar-sticky { box-shadow: 0 1px 4px rgba(10,22,40,.12); }
.scroll-x::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, #users-list::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
.modal h3 { margin: 0 0 4px; font-size: 17px; }
.modal .sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
.field input, .field select { width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 13px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--yellow); }
/* Initial hiding is the `hidden` attribute's job, not this class's — when both
   hid the element, JS that revealed it by clearing only one left it invisible
   (that is why #wz-cred never showed the generated password). */
.cred { margin-top: 14px; background: var(--navy-2); border: 1px solid var(--ok); border-radius: 8px; padding: 12px 14px; font-size: 13px; }
.cred code { font-family: var(--font-mono); color: var(--text); }
.cred .warn-note { color: var(--warn); font-size: 12px; margin-top: 8px; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; }

/* ── Premium Add-ons modal ─────────────────────────────────────────────────── */
.ao-section-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-soft); font-weight: 700; margin: 2px 0 10px; }
[data-theme="light"] .ao-section-label { color: var(--yellow-soft); }
.ao-addon { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; margin-bottom: 11px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); cursor: pointer; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
[data-theme="light"] .ao-addon { background: var(--card-bg); }
.ao-addon:hover { border-color: var(--border-bright); }
.ao-addon::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--yellow), var(--cyan)); opacity: 0; transition: opacity .15s ease; }
.ao-addon:has(input:checked) { border-color: var(--blue-bd); background: var(--blue-wash); }
.ao-addon:has(input:checked)::before { opacity: .9; }
.ao-gem { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--blue); background: var(--blue-wash); border: 1px solid var(--blue-bd); }
.ao-addon input[type="checkbox"], .ao-qty input[type="checkbox"] { width: 18px; height: 18px; flex: none; align-self: center; accent-color: var(--yellow); margin: 0; cursor: pointer; }
.ao-body { flex: 1; min-width: 0; }
.ao-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ao-slug { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); background: var(--navy-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-weight: 400; }
[data-theme="light"] .ao-slug { background: #EEF2F8; }
.ao-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.ao-grants { margin: 8px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.ao-grants li { margin-bottom: 2px; }
.ao-divider { height: 1px; background: var(--border); margin: 20px 0 14px; border: 0; }
.ao-qty { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 11px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); }
[data-theme="light"] .ao-qty { background: var(--card-bg); }
.ao-qty .ao-body { align-self: center; }
.ao-qty input[type="number"] { width: 92px; flex: none; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 13px; text-align: right; }
.ao-qty input[type="number"]:focus { outline: none; border-color: var(--yellow); }
.userline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.userline .em { color: var(--text); font-weight: 600; }
.userline .sp { flex: 1; }

/* ── Create-tenant wizard ─────────────────────────────────────────────────── */
.wiz-modal { max-width: 640px; }
.wiz-steps { display: flex; gap: 6px; margin: 6px 0 20px; flex-wrap: wrap; }
.wiz-steps .st { flex: 1 1 80px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); padding-bottom: 8px; border-bottom: 2px solid var(--border); text-align: center; transition: color .15s, border-color .15s; }
.wiz-steps .st.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.wiz-steps .st.done { color: var(--ok); border-bottom-color: var(--ok); }
.wiz-step { display: none; }
.wiz-step.show { display: block; }
.wiz-hint { font-size: 12px; color: var(--text-secondary); margin: -2px 0 16px; line-height: 1.55; }
.field .fhint { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.field input.bad, .field select.bad { border-color: var(--crit); }
.wiz-row { display: flex; gap: 12px; }
.wiz-row .field { flex: 1; }
.wiz-plan { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 9px; cursor: pointer; transition: border-color .15s, background .15s; }
.wiz-plan:hover { border-color: var(--border-bright); }
.wiz-plan:has(input:checked) { border-color: var(--blue-bd); background: var(--blue-wash); }
.wiz-plan input { accent-color: var(--yellow); margin-top: 3px; flex: none; }
.wiz-plan .pn { font-weight: 600; color: var(--text); }
.wiz-plan .pd { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.wiz-review .rrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wiz-review .rk { color: var(--text-secondary); }
.wiz-review .rv { color: var(--text); text-align: right; word-break: break-word; }
textarea.wiz-domains { width: 100%; min-height: 110px; padding: 10px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 13px; font-family: var(--font-mono); resize: vertical; }
textarea.wiz-domains:focus { outline: none; border-color: var(--yellow); }
.wiz-result { text-align: center; padding: 8px 0 4px; }
.wiz-result .ic { font-size: 34px; line-height: 1; }
.wiz-result.ok .ic { color: var(--ok); }
.wiz-result.err .ic { color: var(--crit); }
.wiz-result h4 { margin: 12px 0 6px; font-size: 16px; color: var(--text); }
.wiz-result p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 auto; max-width: 420px; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM REFRESH (2026-07-14) — ports the app.html v4 treatment to the
   admin console. Additive: keyed only to existing selectors.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px;
  --glass: rgba(255,255,255,.045);
  --card-bd: rgba(255,255,255,.14);
  --card-bd-hover: rgba(255,255,255,.26);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 14px 44px -22px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.28);
}
[data-theme="light"] {
  --glass: rgba(10,22,40,.04);
  --card-bd: #C3CDDC;
  --card-bd-hover: #9FAFC6;
  --shadow-1: 0 1px 2px rgba(10,22,40,.05);
  --shadow-2: 0 12px 36px -20px rgba(10,22,40,.18), 0 1px 3px rgba(10,22,40,.06);
}

/* Cards: visible premium border + top highlight, matching the dashboard. */
.card {
  border-color: var(--card-bd);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(10,22,40,.07), 0 10px 28px -20px rgba(10,22,40,.14);
}

/* Tab bars: crisper pills with a subtle glass base + hover lift. */
.admin-tabs { border-color: var(--card-bd); box-shadow: var(--shadow-1); }
.atab { border-radius: var(--radius-sm); }
.ttab:hover { border-radius: 8px 8px 0 0; }

/* Filter/search inputs share the system-blue focus ring convention. */
.tenant-controls input:focus, .tenant-controls select:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Brand-gold checkboxes, matching the dashboard. */
input[type="checkbox"] { accent-color: var(--yellow); }

/* ════════════════════════════════════════════════════════════════════════
   TRUST SLATE v2 (2026-07-14) — the dashboard's premium layer, ported.
   Token-level, so every admin panel inherits it. Same rules: Inter for all
   chrome, mono for DATA only, card meta on --text-2 (never the faint
   caption grey), soft-tint status pills, one accent per view.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --gold: #E7B54A;
  --blue: #4C9BE8;
  --blue-700: #2F7CC7;
  --navy: #0A101C;
  --navy-2: #111A2B;
  --card-bg: #121C2E;
  --surface-sub: #16213504;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --border: var(--line);
  --border-bright: rgba(255,255,255,.20);
  --card-bd: var(--line);
  --card-bd-hover: var(--border-bright);
  --text-1: #F2F6FC; --text-2: #C2CDDE; --text-3: #8494A8;
  --text: var(--text-1);
  --text-secondary: var(--text-2);
  --text-caption: var(--text-3);
  --ok: #4ADE80;   --ok-bg:   rgba(74,222,128,.12);  --ok-bd:   rgba(74,222,128,.30);
  --warn: #E9B949; --warn-bg: rgba(233,185,73,.12);  --warn-bd: rgba(233,185,73,.30);
  /* Amber splits by job: --warn = TEXT on a pale tint (needs contrast),
     --warn-strong/-bold = the pronounced graphic + numeral gold. Dark mode's
     --warn is already vivid, so both alias to it; light mode overrides. */
  --warn-strong: var(--warn);
  --warn-bold:   var(--warn);
  --crit: #F87171; --crit-bg: rgba(248,113,113,.12); --crit-bd: rgba(248,113,113,.30);
  --neutral: #C2CDDE;
  --neutral-bg: rgba(255,255,255,.07); --neutral-bd: rgba(255,255,255,.14);
  --row-zebra: rgba(255,255,255,.018);
  --radius-card: 16px; --radius-ctl: 10px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 12px 30px -10px rgba(0,0,0,.55);
  --shadow-pop:  0 1px 2px rgba(0,0,0,.35), 0 20px 44px -14px rgba(0,0,0,.70);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="light"] {
  --gold: #B98A22; --blue: #0E6FBF; --blue-700: #0A5596;
  --yellow: #E0A81E;      /* gold as a FILL (carries dark text) — vivid */
  --yellow-soft: #8A6A00;
  --warn-strong: #E0A81E; /* graphic gold (non-text) */
  --warn-bold:   #BE8A12; /* large numerals (~3:1 on white) */
  --canvas-top: #EEF3F9; --canvas-bot: #E7EDF4;
  --navy: var(--canvas-top); --navy-2: #F1F5FA;
  --card-bg: #FFFFFF; --surface-sub: #FAFCFE;
  --line: #E4EAF1; --line-soft: #EEF2F7;
  --border: var(--line); --border-bright: #CBD6E3;
  --card-bd: var(--line); --card-bd-hover: #CBD6E3;
  --text-1: #0A1320; --text-2: #333F50; --text-3: #586576;
  --ok: #15803D;   --ok-bg:   #E9F6EE;  --ok-bd:   #C8E9D4;
  --warn: #8A5B00; --warn-bg: #FBF1DD;  --warn-bd: #F0DFB6;
  --crit: #B42318; --crit-bg: #FDECEA;  --crit-bd: #F6D2CD;
  --neutral: #334155;
  --neutral-bg: #EEF2F7; --neutral-bd: #DCE3EC;
  --row-zebra: rgba(15,23,42,.018);
  --shadow-card: 0 1px 2px rgba(14,27,46,.04), 0 10px 28px -8px rgba(14,27,46,.10);
  --shadow-pop:  0 1px 2px rgba(14,27,46,.06), 0 18px 40px -12px rgba(14,27,46,.22);
}

body {
  background:
    radial-gradient(1200px 520px at 78% -8%, rgba(76,155,232,.10), transparent 60%),
    linear-gradient(180deg, #0A101C 0%, #070C15 100%);
  background-attachment: fixed;
  font-size: 14.5px; line-height: 1.6;
}
[data-theme="light"] body {
  background:
    radial-gradient(1200px 520px at 78% -8%, rgba(14,111,191,.08), transparent 60%),
    linear-gradient(180deg, var(--canvas-top), var(--canvas-bot));
  background-attachment: fixed;
}

/* Chrome in Inter; mono reserved for data (ids, counts, timestamps). */
.product-tag, .role-chip, .summary-counts { font-family: var(--font-sans); }
.title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text-1); }
.card h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
/* Readability: helper + meta copy on --text-2 at weight 500, never --text-3. */
.help, .meta, .status-msg { color: var(--text-2); font-weight: 500; font-size: 13.5px; line-height: 1.6; }
.summary-counts { color: var(--text-3); font-size: 12.5px; }
.summary-counts b { font-family: var(--font-mono); color: var(--text-1); }

.card {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 24px;
  box-shadow: var(--shadow-card);
}
.topbar {
  min-height: 64px; padding: 0 24px;
  background: rgba(10,16,28,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .topbar { background: rgba(244,247,251,.72); border-bottom: 1px solid var(--line); }

/* Tables: mono uppercase heads, roomy rows, soft dividers. */
table.t th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 12px 16px;
}
table.t td { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-size: 13.5px; }
table.t td.name { color: var(--text-1); font-weight: 600; font-family: var(--font-mono); }
table.t tbody tr:hover > td { background: var(--surface-sub); }

/* Status pills: soft tint + same-family line + darker text + leading dot. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--neutral-bg); border: 1px solid var(--neutral-bd); color: var(--neutral);
}
.pill.ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok); }
.pill.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.pill.crit { background: var(--crit-bg); border-color: var(--crit-bd); color: var(--crit); }
/* A coverage gap is not a posture result (#171, and the .unmeasured precedent
   in the NIS2 PDF from #165): deliberately neither green nor red. It keeps the
   leading dot because it IS a state we observed — unlike `.off`, which means
   the thing never ran at all. */
.pill.unmeasured { background: var(--neutral-bg); border-color: var(--neutral-bd); color: var(--neutral); }
.pill.ok::before, .pill.warn::before, .pill.crit::before, .pill.unmeasured::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none;
}

/* Buttons: secondary by default (surface + hairline + blue label); gold is
   reserved for the one primary action. */
.btn-quiet {
  background: var(--card-bg); border: 1px solid var(--line); color: var(--blue);
  font-weight: 600; border-radius: var(--radius-ctl);
  box-shadow: 0 1px 2px rgba(14,27,46,.04);
  transition: border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.btn-quiet:hover { border-color: var(--card-bd-hover); color: var(--blue-700); box-shadow: var(--shadow-card); }
/* The one gold action per screen (v3): flat gold fill, dark ink, no glow. */
.btn-primary,
[data-theme="light"] .btn-primary {
  background: var(--gold-fill); color: var(--cta-on); border: 1px solid transparent;
  border-radius: var(--radius-ctl); font-weight: 600;
  box-shadow: none;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }

/* Tab bars: pill filters, active = soft gold tint. */
.admin-tabs { background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-card); }
.atab { border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.atab:hover { color: var(--text-1); background: var(--surface-sub); }
.atab.is-active,
[data-theme="light"] .atab.is-active {
  background: var(--blue-wash); border-color: var(--blue-bd); color: var(--blue);
}
.ttab { font-weight: 500; color: var(--text-2); }
.ttab.is-active { color: var(--text-1); border-bottom-color: var(--blue); font-weight: 600; }
.role-chip { color: var(--blue); border-color: var(--blue-bd); background: var(--blue-wash); font-weight: 600; }

/* Quality floor. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  .card { padding: 18px; border-radius: 14px; }
  .title { font-size: 23px; }
  table.t th, table.t td { padding: 12px; }
}

/* Inline-style migration (toward dropping style-src 'unsafe-inline').
   Elements whose hidden state is toggled by JS via `.style.display=''`
   now use the native `hidden` attribute (see js/admin-2.js); everything
   else carries one of these utility classes. */
.lg-a1 { border-color:var(--yellow); background:var(--navy-2); }
.lg-dflex-aicenter-gap14 { display:flex; align-items:center; gap:14px; }
.lg-a2 { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--yellow); border:1px solid var(--yellow); border-radius:999px; padding:3px 10px; }
.lg-a3 { color:var(--text-secondary); font-size:13px; line-height:1.6; }
.lg-a4 { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-dflex-aicenter-gap12 { display:flex; align-items:center; gap:12px; }
.lg-m0 { margin:0; }
.lg-mlauto-dflex-aicenter-gap10 { margin-left:auto; display:flex; align-items:center; gap:10px; }
.lg-mt10 { margin-top:10px; }
.lg-dnone { display:none; }
.lg-mt12 { margin-top:12px; }
.lg-a5 { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.lg-mt6 { margin-top:6px; }
.lg-mt14 { margin-top:14px; }
.lg-m0-0-4 { margin:0 0 4px; }
.lg-a6 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.lg-a7 { width:120px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); font-size:13px; }
.lg-a8 { color:var(--text-secondary); font-size:13px; }
.lg-mt8 { margin-top:8px; }
.lg-a9 { border:0; border-top:1px solid var(--border); margin:18px 0; }
.lg-a10 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lg-mlauto { margin-left:auto; }
.lg-mt16 { margin-top:16px; }
.lg-a11 { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:16px; }
.lg-dflex-fdcolumn-gap4-fs13 { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.lg-minw240-p8-10 { min-width:240px; padding:8px 10px; }
.lg-minw180-p8-10 { min-width:180px; padding:8px 10px; }
.lg-a12 { font-size:13px; color:var(--text-secondary); }
.lg-a13 { height:8px; border-radius:999px; background:var(--navy-2); border:1px solid var(--border); overflow:hidden; margin-top:12px; max-width:480px; }
.lg-a14 { height:100%; width:0; background:var(--yellow); border-radius:999px; transition:width .2s; }
.lg-a15 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.lg-a16 { font-size:12px; color:var(--text-secondary); }
.lg-a17 { display:block; width:100%; margin-top:4px; padding:8px 10px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); }
.lg-a18 { display:block; font-size:12px; color:var(--text-secondary); margin-top:12px; }
.lg-a19 { display:block; width:100%; margin-top:4px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); font-size:13px; }
.lg-a20 { display:block; width:100%; margin-top:4px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); font-size:13px; resize:vertical; }
.lg-a21 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.lg-a22 { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; }
.lg-a23 { font-size:13px; color:var(--text); }
.lg-a24 { font-weight:400; color:var(--text-secondary); font-size:.85em; }
.lg-a25 { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-top:14px; }
.lg-dflex-fdcolumn-gap4 { display:flex; flex-direction:column; gap:4px; }
.lg-w90 { width:90px; }
.lg-mt20 { margin-top:20px; }
.lg-mt18 { margin-top:18px; }
.lg-mlauto-minw260 { margin-left:auto; min-width:260px; }
.lg-a26 { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.lg-a27 { accent-color:var(--yellow); }
.lg-ml8 { margin-left:8px; }
.lg-dflex-gap8-aicenter { display:flex; gap:8px; align-items:center; }
.lg-ml10 { margin-left:10px; }
.lg-mb14 { margin-bottom:14px; }
.lg-dflex-gap10 { display:flex; gap:10px; }
.lg-mb12 { margin-bottom:12px; }
.lg-a28 { display:none; margin:10px 0 14px; padding:10px 12px; border:1px solid var(--warn,#e0a23a); border-radius:8px; background:rgba(224,162,58,.12); font-size:13px; line-height:1.5; }
.lg-ml6-p4-10-fs12 { margin-left:6px; padding:4px 10px; font-size:12px; }
.lg-mb16 { margin-bottom:16px; }
.lg-dflex-aibaseline-gap8-mb6 { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.lg-fs13 { font-size:13px; }
.lg-a29 { overflow-x:auto; }
.lg-w100pc-bccollapse-fs12 { width:100%; border-collapse:collapse; font-size:12px; }
.lg-a30 { text-align:left; color:var(--text-secondary); }
.lg-p4-8-4-0-fw600 { padding:4px 8px 4px 0; font-weight:600; }
.lg-p4-8-fw600 { padding:4px 8px; font-weight:600; }
.lg-p6-0 { padding:6px 0; }
.lg-a31 { display:flex; align-items:baseline; gap:8px; margin:4px 0 4px; }
.lg-curpointer-dlist-item { cursor:pointer; display:list-item; }
.lg-a32 { overflow-x:auto; margin-top:6px; }
.lg-dnone-mt4 { display:none; margin-top:4px; }
.lg-a33 { color:var(--text-secondary); font-weight:400; }
.lg-a34 { color:var(--text-secondary); margin-top:10px; }
.lg-a35 { display:flex; align-items:center; gap:16px; min-height:96px; }
.lg-a36 { width:160px; height:96px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; border-radius:4px; overflow:hidden; }
.lg-a37 { color:var(--text-secondary); font-size:12px; }
.lg-a38 { display:none; max-width:100%; max-height:100%; object-fit:contain; }
.lg-a39 { color:var(--text-secondary); font-size:13px; line-height:1.5; }

/* `hidden` must win over author class rules that set `display` (.btn-quiet and
   .role-chip both set display:inline-block, which outranks the UA [hidden]
   rule). Without this, an element carrying the hidden attribute still renders —
   which is how #nt-cancel-edit came to be permanently visible. The semantics of
   `hidden` are absolute, so !important is correct here rather than a specificity
   race against every future display rule. */
[hidden] { display: none !important; }

/* phase-5 de-inline (admin-2.js) */
.lg-ax1 { vertical-align:top; }
.lg-ax2 { padding:6px 12px 6px 0; white-space:nowrap; }
.lg-ax3 { padding:6px 12px 6px 0; color:var(--text-secondary); white-space:nowrap; }
.lg-ax4 { padding:6px 12px 6px 0; }
.lg-ax5 { padding:6px 0; color:var(--text-secondary); }
.lg-ax6 { margin-top:8px; font-size:12.5px; }
.lg-ax7 { cursor:pointer; color:var(--text-secondary); user-select:none; }
.lg-ax8 { border-collapse:collapse; margin-top:8px; width:100%; line-height:1.45; }
.lg-ax9 { text-align:left; color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.lg-ax10 { padding:0 12px 4px 0; }
.lg-ax11 { padding:0 0 4px 0; }
.lg-ax12 { color:var(--text); font-weight:600; }
.lg-ax13 { color:var(--text-secondary); }
.lg-ax14 { font-size:10px; margin:2px 4px 0 0; }
.lg-ax15 { margin-top:5px; line-height:1.9; }
.lg-ax16 { font-size:10px; }
.lg-ax17 { font-weight:400; color:var(--text-secondary); font-family:var(--font-mono); font-size:11px; }
.lg-ax18 { cursor:default; }
.lg-ax19 { padding:6px 8px; }
.lg-ax20 { font-size:11px; color:var(--yellow); }
.lg-ax21 { white-space:nowrap; }
.lg-ax22 { font-size:9.5px; color:var(--blue,#3B82F6); border-color:var(--blue,#3B82F6); }
.lg-ax23 { margin:9px 0; }
.lg-ax24 { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:4px; }
.lg-ax25 { color:var(--text-secondary); font-family:var(--font-mono); }
.lg-ax26 { height:8px; border-radius:5px; background:var(--navy-2); overflow:hidden; }
.lg-ax27 { color:var(--warn,#F5C518); }
.lg-ax28 { padding:9px 0; border-top:1px solid var(--border); font-size:13px; }
.lg-ax29 { color:var(--crit,#F26B62); }
.lg-ax30 { opacity:.6; font-size:12px; }
.lg-ax31 { font-size:9.5px; color:var(--yellow); border-color:var(--yellow); }
.lg-ax32 { font-size:9.5px; color:var(--text-secondary); border-color:var(--border); }
.lg-ax33 { font-size:11px; color:var(--text-secondary); margin-top:4px; }
.lg-ax34 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-ax35 { font-weight:600; font-size:13px; color:var(--text); }
.lg-ax36 { font-size:10.5px; color:var(--text-secondary); }
.lg-ax37 { margin-top:4px; }
.lg-ax38 { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin-top:8px; cursor:pointer; }
.lg-ax39 { font-size:9.5px; color:var(--ok); border-color:var(--ok); }
.lg-ax40 { font-size:9.5px; color:var(--crit); border-color:var(--crit); }
.lg-ax41 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.lg-ax42 { flex:1; min-width:220px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); font-size:13px; font-family:var(--font-mono); }
.lg-ax43 { flex:1; min-width:220px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--navy-2); color:var(--text); font-size:13px; }
.lg-ax44 { padding:14px 0; border-bottom:1px solid var(--border); }
.lg-ax45 { margin-top:8px; color:var(--warn,#D97706); }
.lg-ax46 { margin-top:18px; }
.lg-ax47 { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.lg-ax48 { color:var(--text); }
.lg-ax49 { min-width:104px; padding:12px 16px; border:1px solid var(--border); border-radius:10px; background:rgba(14,26,46,.35); }
.lg-ax50 { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.lg-ax51 { display:flex; gap:12px; flex-wrap:wrap; }
.lg-ax52 { color:var(--ok); }
.lg-ax53 { color:var(--warn); }
.lg-ax54 { margin-bottom:10px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
.lg-ax55 { cursor:pointer; font-weight:600; }
.lg-ax56 { margin-top:10px; }
.lg-ax57 { margin-top:12px; display:flex; gap:24px; flex-wrap:wrap; color:var(--text-secondary); }
.lg-ax58 { color:var(--text-primary); }
.lg-ax59 { font-family:monospace; }
.lg-ax60 { color:var(--text-secondary); font-size:.9em; }
.lg-ax61 { margin-top:8px; color:var(--crit); }
.lg-ax62 { font-size:11px; color:var(--text-secondary); }
/* Component health "Last error". `table.t td` sets white-space:nowrap globally,
   which made BOTH the max-width here and the word-break below dead letters — a
   nowrap cell cannot break, so a 200-char CTSourceUnavailable message stretched
   the column and pushed the page sideways. Resetting white-space is what makes
   the width cap real (same fix as `.t td.actions` above).
   NB the selector MUST stay `table.t td.lg-ax63`: a bare `.lg-ax63` is
   specificity (0,1,0) and loses to `table.t td` (0,1,2), so white-space:normal
   would be silently ignored — measured, not theorised. */
table.t td.lg-ax63 { max-width:340px; min-width:0; white-space:normal; }
.lg-ax64 { font-size:10.5px; word-break:break-word; overflow-wrap:anywhere; }
.lg-ax65 { font-weight:600; margin-bottom:10px; }
.lg-ax66 { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lg-ax67 { width:120px; font-size:13px; color:var(--text-secondary); }
.lg-ax68 { flex:1; background:rgba(14,26,46,.5); border-radius:6px; overflow:hidden; height:22px; }
.lg-ax69 { width:96px; text-align:right; font-size:13px; }
.lg-ax70 { font-weight:600; margin:4px 0 10px; }
.lg-ax71 { color:var(--text-secondary); font-weight:400; }
.lg-ax72 { color:var(--ok); font-size:13px; }
.lg-ax73 { color:#30A46C; font-weight:600; }
.lg-ax74 { border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:10px; }
.lg-ax75 { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); }
.lg-ax76 { margin-left:auto; font-size:12px; }
.lg-ax77 { margin-top:6px; color:var(--text); font-size:13px; }
.lg-ax78 { margin-top:6px; color:var(--text-secondary); font-size:12px; }
.lg-ax79 { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.lg-ax80 { color:var(--crit); }
.lg-ax81 { color:var(--text-secondary); font-size:12px; }
.lg-ax82 { padding:6px 0; }
.lg-ax83 { color:var(--warn,#e0a23a); }
.lg-ax84 { padding:4px 8px 4px 0; }
.lg-ax85 { padding:4px 8px; }


/* ════════════════════════════════════════════════════════════════════════
   Trust Slate: Chrome (2026-08-27) — the admin console shares the app's
   indigo frame: one 54px chrome-900 band — the same navy as the app rail,
   with solid chrome-800 interactive wells (owner call 2026-08-27; the
   two-tone chrome-600 band is retired). Appended at EOF so these rules
   win same-specificity collisions with the sections above; token values
   come from trust-slate.css (linked after this sheet).
   ════════════════════════════════════════════════════════════════════════ */
.topbar, [data-theme="light"] .topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; height: 54px; padding: 0 16px;
  background: var(--chrome-900); border-bottom: none;
  box-shadow: none;
}
.topbar .logo-img { height: 20px; }
.topbar .product-tag {
  color: var(--chrome-on); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-transform: none;
}
.topbar .theme-toggle,
[data-theme="light"] .topbar .theme-toggle {
  background: var(--chrome-800); border: 1px solid rgba(255,255,255,.14);
}
.topbar .theme-toggle button { color: var(--chrome-on); opacity: .7; }
.topbar .theme-toggle button.active,
[data-theme="light"] .topbar .theme-toggle button.active {
  background: var(--chrome-500); color: var(--chrome-on); opacity: 1;
}
.topbar .btn-quiet,
[data-theme="light"] .topbar .btn-quiet {
  background: var(--chrome-800); border: 1px solid rgba(255,255,255,.14);
  color: var(--chrome-on);
}
.topbar .btn-quiet:hover,
[data-theme="light"] .topbar .btn-quiet:hover {
  border-color: rgba(255,255,255,.45); color: var(--chrome-on);
}
.topbar :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Page title voice (Chrome spec §3): light weight against dense mono. */
.title {
  font-size: 38px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15;
}
@media (max-width: 720px) { .title { font-size: 27px; } }

/* ════════════════════════════════════════════════════════════════════════
   Trust Slate: Console (2026-08-28) — the clustered admin rail.
   The 15-pill strip is retired; #admin-tabs is now the chrome-900 rail on
   the left of the .shell grid, rows generated by js/admin-rail.js from
   ADMIN_NAV. Chrome tokens are theme-invariant (trust-slate.css), so this
   zone needs no [data-theme] forks except where it must out-rank earlier
   light-theme .atab rules. Appended at EOF: order wins the collisions.
   ════════════════════════════════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: stretch; }
/* `.wrap` centres itself with `margin: 0 auto`, and auto side margins make a
   grid item SHRINK-TO-FIT: its width floors at its min-content, so one long
   unbreakable string inside a `.table-scroll` (a 76-character CT log URL,
   2026-09-15) widened <main> past its minmax(0,1fr) track and pushed the whole
   console sideways instead of scrolling inside the table. An explicit width
   pins the item to its track; max-width + auto margins still centre it. */
.shell > .wrap { width: 100%; min-width: 0; box-sizing: border-box; }
.admin-rail {
  background: var(--chrome-900);
  position: sticky; top: 54px; height: calc(100vh - 54px);
  overflow-y: auto; padding: 10px 8px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.tb-context { color: var(--chrome-on-muted); font-size: 12.5px; }
.tb-context::before { content: "/"; margin-right: 12px; opacity: .45; }

.rail-group[hidden] { display: none; }
.rail-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--chrome-on-muted); font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; padding: 8px 10px; border-radius: var(--radius-ctl);
}
.rail-head:hover { background: var(--chrome-800); color: var(--chrome-on); }
.rail-head.is-current-parent { background: var(--chrome-800); color: var(--chrome-on); }
.rail-chev {
  margin-left: auto; font-size: 14px; line-height: 1; opacity: .95;
  color: var(--chrome-on); transition: transform .15s;
}
.rail-group.open .rail-chev { transform: rotate(90deg); }
.rail-kids { display: none; }
.rail-group.open .rail-kids { display: block; padding: 2px 0 6px; }

/* Child rows: override every earlier .atab layer (pill styles are dead with
   the strip, but the base .atab rules still cascade onto these buttons). */
.admin-rail .atab,
[data-theme="light"] .admin-rail .atab {
  display: block; width: 100%; text-align: left; box-shadow: none;
  background: transparent; border: 0; border-radius: var(--radius-ctl);
  color: var(--chrome-on-muted); font-size: 13px; font-weight: 500;
  padding: 7px 10px 7px 24px; position: relative; cursor: pointer;
}
.admin-rail .atab:hover,
[data-theme="light"] .admin-rail .atab:hover {
  background: var(--chrome-800); color: var(--chrome-on);
}
.admin-rail .atab.is-active,
[data-theme="light"] .admin-rail .atab.is-active {
  background: var(--chrome-600); color: var(--chrome-on); border: 0;
}
.admin-rail .atab.is-active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--gold);
}
.admin-rail :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The one action in the frame — gold, pinned at the rail foot. */
.admin-rail .rail-cta,
[data-theme="light"] .admin-rail .rail-cta {
  margin-top: auto; text-align: center; padding: 9px 10px;
  background: var(--gold-fill); color: var(--cta-on); font-weight: 650;
  border-radius: var(--radius-ctl);
}
.admin-rail .rail-cta:hover,
[data-theme="light"] .admin-rail .rail-cta:hover { filter: brightness(1.06); background: var(--gold-fill); color: var(--cta-on); }
.admin-rail .rail-cta.is-active,
[data-theme="light"] .admin-rail .rail-cta.is-active { background: var(--gold-fill); color: var(--cta-on); }
.admin-rail .rail-cta.is-active::before { display: none; }

/* Infrastructure status dot — green ONLY on a measured all-clear. */
.rail-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rail-dot.dot-ok { background: var(--ok); }
.rail-dot.dot-warn { background: var(--warn); }
.rail-dot.dot-crit { background: var(--crit); }
.rail-dot.dot-unknown { background: transparent; border: 1px solid var(--chrome-on-muted); }

/* ⌘K — the console map. */
.apal-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(10,13,31,.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.apal-overlay[hidden] { display: none; }
.apal-box {
  width: min(520px, 92vw); background: var(--card-bg);
  border: 1px solid var(--line, var(--border)); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(10,13,31,.45); overflow: hidden;
}
.apal-input {
  width: 100%; box-sizing: border-box; padding: 13px 16px; border: 0;
  border-bottom: 1px solid var(--line, var(--border));
  background: transparent; color: var(--text); font: inherit; font-size: 14.5px;
}
.apal-input:focus { outline: none; }
.apal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.apal-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--radius-ctl);
  padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px;
}
.apal-item:hover { background: var(--surface-sub, var(--navy-2)); }
.apal-item.is-hilite { background: var(--chrome-600); color: var(--chrome-on); }
.apal-group {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary); flex: none; min-width: 104px;
}
.apal-item.is-hilite .apal-group { color: var(--chrome-on-muted); }

/* The drawer handle. Hidden on desktop, where the rail is always present. */
.rail-toggle {
  display: none;
  background: transparent; border: 1px solid var(--chrome-on-muted);
  color: var(--chrome-on); padding: 5px 9px; border-radius: var(--radius-ctl);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.rail-toggle:hover { background: var(--chrome-800); }

/* Narrow screens: a real off-canvas drawer, not a rail stacked above the
   content. Stacking pushed every panel ~9 rows down the page and put the
   console's whole map between the reader and the thing they navigated to.
   Same mechanism as the customer app's <720px sidebar (.is-open + a document
   click to dismiss), so the two consoles behave the same way on a phone.
   Transitions are already neutralised globally under prefers-reduced-motion. */
@media (max-width: 940px) {
  .shell { display: block; }
  .rail-toggle { display: inline-flex; align-items: center; }
  .admin-rail {
    position: fixed; left: 0; top: 0; z-index: 40;
    width: 232px; height: 100vh; padding-top: 14px;
    transform: translateX(-100%); transition: transform .2s ease-out;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .admin-rail.is-open { transform: translateX(0); box-shadow: 18px 0 42px rgba(10,13,31,.45); }
}

/* ── Console home (2026-09-03) ────────────────────────────────────────────
   The landing panel. Colours come from the console's existing tokens only —
   both themes are covered because every value below is a var(), so a token
   change moves this with it instead of leaving a hard-coded orphan behind.
   (The DORA Publish button is the cautionary tale: one pinned hex measured
   2.69:1 in light theme for as long as it shipped.) */
.rail-home { margin-bottom: 6px; }

.ah-lede { margin-bottom: 14px; }

.ah-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ah-stat {
  flex: 1 1 120px; min-width: 110px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--navy-2);
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
}
.ah-stat-n {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 600; line-height: 1.1;
  color: var(--text-1, var(--text));
}
/* An unmeasured cell must not read like a measured zero. */
.ah-stat-n.is-unmeasured { color: var(--text-3, var(--text-caption)); font-weight: 500; }
/* --text-2, not --text-3: admin.css's readability rule reserves the faint tier
   for de-emphasis, and below .is-unmeasured is the only thing that earns it. */
.ah-stat-l {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2, var(--text-secondary));
}
.ah-strip-note { margin-top: 10px; }
.ah-strip-note.warn { color: var(--warn); }

.ah-dot {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  vertical-align: middle; margin-top: 5px;
}
.ah-dot.dot-ok      { background: var(--ok); }
.ah-dot.dot-warn    { background: var(--warn); }
.ah-dot.dot-crit    { background: var(--crit); }
.ah-dot.dot-unknown { background: transparent; border: 2px solid var(--text-3, var(--text-caption)); }

.ah-map {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ah-cluster {
  padding: 14px 16px;
  background: var(--navy-2);
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
}
.ah-cluster-h {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2, var(--text-secondary));
  margin-bottom: 8px;
}
.ah-cluster-b {
  font-size: 13px; line-height: 1.6; font-weight: 500;
  color: var(--text-2, var(--text-secondary));
  margin-bottom: 12px;
}
.ah-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-link {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--card-bg);
  border: 1px solid var(--line, var(--border));
  color: var(--blue);
}
.ah-link:hover { border-color: var(--border-bright); color: var(--text-1, var(--text)); }

.ah-kbd {
  font-family: var(--font-mono); font-size: 11.5px;
  padding: 1px 6px; border-radius: 5px;
  background: var(--navy-2); border: 1px solid var(--line, var(--border));
  color: var(--text-2, var(--text-secondary));
}

/* ── Free scan panel (#216) — the operator's own run of /check ───────────── */
.fs-head { display: flex; align-items: flex-start; gap: 14px; }
.fs-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.fs-grade { font-size: 15px; font-weight: 700; min-width: 34px; text-align: center; padding: 6px 0; flex: 0 0 auto; }
.fs-score { font-family: var(--font-mono); font-size: 34px; font-weight: 700; line-height: 1; min-width: 64px; text-align: center; padding: 8px 0; border-radius: 12px; border: 1px solid var(--border); flex: 0 0 auto; }
.fs-score.ok   { color: var(--ok); }
.fs-score.warn { color: var(--warn); }
.fs-score.crit { color: var(--crit); }
.fs-score.unmeasured { color: var(--text-secondary); }
.fs-section { padding: 16px 18px; margin-bottom: 12px; }
.fs-findings { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
div.fs-findings { padding-left: 0; }
.fs-findings li { margin: 2px 0; }
.fs-unmeasured { color: var(--warn); }

/* CT monitoring log names are long hostnames + shard paths; let them wrap so
   the table fits the card at normal widths (nowrap is the table.t default). */
table.t td.ctm-log { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* ── Phone-width topbar (2026-09-16) ──────────────────────────────────────
   The topbar is a fixed-height flex row that never wraps, so at phone widths
   its contents simply ran past the edge: measured 491px of content in a 375px
   bar, 116px over. That put Sign out — the one control a stuck operator
   reaches for — off-screen, and gave EVERY panel a horizontal page scroll,
   because the overflowing bar widened the document, not just itself.

   Nothing is removed here, only shortened: both labels dropped below are
   stated again within the page (the <h1> reads "Admin console"; the context
   crumb repeats the panel's own heading), and the Back link keeps its
   accessible name from the aria-label on the anchor, so a screen reader is
   unaffected by hiding the visible text. Breakpoint is 600px, below the
   940px one that turns the rail into a drawer, so the two do not interact. */
@media (max-width: 600px) {
  /* height:auto + wrap is the safety net, and it is why this does not need a
     second breakpoint guessed per device: the row still fits on one line at
     375px, and only wraps where it genuinely cannot (measured 320px, where
     hiding the labels alone still left 55px over). A future button added to
     this bar wraps instead of pushing Sign out off the screen again. The fixed
     `height: 54px` above had to go with it, or the second row would be clipped
     by the bar's own box. */
  .topbar {
    gap: 6px; padding: 6px 10px;
    flex-wrap: wrap; height: auto; min-height: 54px;
  }
  .topbar .product-tag,
  .topbar .tb-context { display: none; }
  .topbar .tb-label { display: none; }
  /* The spacer is `flex: 1` so the right-hand controls sit at the right edge.
     With wrapping enabled it greedily eats the whole remainder of the first
     line, which GUARANTEES the last control wraps — measured: at 375px it took
     78px and pushed Sign out to a second row that was not needed. Left to pack
     naturally, everything fits one line at 375 and wraps only at 320. */
  .topbar .spacer { flex: 0 0 0; }
  /* 16px keeps the wordmark legible while giving the single row ~14px of
     headroom at 375px, so a rounding difference between engines does not
     decide whether the bar is one row or two. */
  .topbar .logo-img { height: 16px; }
  /* Buttons size to their own content rather than being squeezed to illegible
     slivers by the flex row. */
  .topbar .btn-quiet { flex: 0 0 auto; }
}

/* Admin Console → Agent sandbox (2026-09-19) */
.asa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.asa-kpi { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.asa-kpi .v { font-size: 20px; font-weight: 600; }
.asa-kpi .k { font-size: 12px; color: var(--text-secondary); }
.asa-input { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--navy-2); color: var(--text); font-size: 13px; }
.asa-input:focus { outline: none; border-color: var(--yellow); }
.asa-num { width: 80px; }
.asa-mono { font-family: var(--font-mono, monospace); font-size: 12px; word-break: break-all; }