/* VLC product skin — legacy Admin (平台超级管理员 / 企业管理) view. 0.102.4.

   Companion to design/vlc-skin.css. That file is scoped to .mx-next and so
   never reaches #view-admin, which is still the pre-redesign markup rendered
   by world.js renderAdminConsole + platform-admin-governance-ui.mjs and
   painted by the 25 .platform-admin-* blocks in matrix-light-glass.css (light
   glass: 18-22px radii, card shadows, a 1480px column floating in gutters).

   This file is the same shape pass for that page: the VLCode IDE frame — a
   34px title bar instead of a hero, flush full-bleed panes separated by 1px
   rules, 6-8px radii, no elevation, no hover motion, 10-12px chrome type —
   quoting the same numbers as vlc-skin.css §0-3 and VLCode-2.0
   public/index.html (:root, .hdr-btn, .file-tree, tables).

   Scope + tokens. Every selector is under #view-admin and purely
   presentational: no markup or data-* hook is invented or depended on beyond
   the classes the two renderers already emit. The --mx-* palette is declared
   on .mx-next only (tokens.css header explains why), so it cannot be read
   here, and the legacy :root tokens (--bg/--panel/--ink …) are swapped to a
   light set by html[data-theme="light"], which this page must NOT follow:
   every redesigned view stays GitHub-dark under either theme because
   components.css pins the palette as literals on .mx-next. The --pa-* set
   below pins the same literals on #view-admin — same numbers as
   components.css .mx-next and VLCode :root — so Admin matches the other
   pages instead of flipping light when the legacy shell does.

   Specificity. #view-admin outranks every html[data-theme="light"] element
   rule in matrix-light-glass.css / index.html, so plain ID-scoped rules win
   without help. The light theme does force a handful of declarations with
   !important (.page background, .sect/.card/.stat/.log surfaces, .meta colour,
   input/select/textarea chrome, .btn-primary / .btn-danger, pre, the late
   ".platform-admin-hero … { background: #fff !important }" and
   ".platform-admin-tabs … { background: #fff !important }" blocks at ~:3488,
   and the tab buttons' colour/border/bg); only
   those exact properties carry !important here, at higher specificity, so
   the dark surface is authoritative under either theme. */

#view-admin {
  --pa-bg: #0d1117;
  --pa-panel: #161b22;
  --pa-raised: #21262d;
  --pa-hover: #1b2129;
  --pa-line: #30363d;
  --pa-line-strong: #3d444d;
  --pa-ink: #e6edf3;
  --pa-dim: #8b949e;
  --pa-faint: #6e7681;
  --pa-accent: #58a6ff;
  --pa-ok: #3fb950;
  --pa-warn: #d29922;
  --pa-danger: #f85149;
  --pa-mono: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
  --pa-bar-h: 34px;
  --pa-r: 6px;
  --pa-r-lg: 8px;
}

/* --- 1. Shell: full-bleed, flat canvas ------------------------------------
   .page paints a radial glow and 1.4rem gutters; .page .wrap caps at 1140px
   and .platform-admin-shell re-caps at 1480px !important. All of that goes. */
#view-admin.page {
  padding: 0;
  background: var(--pa-bg) !important;
  color: var(--pa-ink);
}
#view-admin .wrap.platform-admin-shell {
  width: auto;
  max-width: none !important;
  min-height: 100%;
  margin: 0;
  padding: 0 0 40px;
}
#view-admin h1, #view-admin h2, #view-admin h3, #view-admin h4,
#view-admin b, #view-admin strong { color: var(--pa-ink); }
#view-admin ::-webkit-scrollbar-thumb { background: var(--pa-line-strong); border-radius: 4px; }

/* --- 2. Hero → 34px title bar ----------------------------------------------
   VLCode's app header is one flat row: kicker, title, a status chip on the
   right. The 24px-padded radial hero becomes that row. */
#view-admin .platform-admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--pa-bar-h);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--pa-line);
  border-radius: 0 !important;
  background: linear-gradient(180deg, #151b23 0%, #111720 100%) !important;
  box-shadow: none !important;
}
#view-admin .platform-admin-hero > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
#view-admin .platform-admin-kicker {
  margin: 0;
  color: var(--pa-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
#view-admin .platform-admin-hero .page-h {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pa-ink) !important;
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
#view-admin .platform-admin-hero .page-sub {
  overflow: hidden;
  margin: 0;
  color: var(--pa-dim);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-admin .pill {
  margin-left: 0;
  padding: 1px 6px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-raised);
  color: var(--pa-dim);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
}
#view-admin .platform-admin-integrity {
  min-height: 22px;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-raised);
  color: var(--pa-dim);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
#view-admin .platform-admin-integrity[data-state="ok"] {
  color: var(--pa-ok);
  border-color: rgba(63, 185, 80, .35);
  background: rgba(63, 185, 80, .1);
}
#view-admin .platform-admin-integrity[data-state="error"] {
  color: var(--pa-danger);
  border-color: rgba(248, 81, 73, .35);
  background: rgba(248, 81, 73, .1);
}
#view-admin .platform-admin-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
  opacity: 1;
}

/* --- 3. Stats → compact tiles ----------------------------------------------
   One flush strip of tiles separated by 1px rules, 20px numerals, 10px
   uppercase labels — vlc-skin §3 .mx-stat proportions. */
#view-admin .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--pa-line);
  background: var(--pa-panel);
}
#view-admin .stats:empty { display: none; }
#view-admin .stat {
  padding: 9px 12px;
  border: 0;
  border-right: 1px solid var(--pa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-ink);
}
#view-admin .stat:last-child { border-right: 0 !important; }
#view-admin .stat .n {
  color: var(--pa-ink);
  font-family: var(--pa-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.15;
}
#view-admin .stat .l {
  margin-top: 2px;
  color: var(--pa-dim);
  font-size: 10px;
  letter-spacing: .06em;
}
#view-admin .stat.iris .n { color: var(--pa-accent); }
#view-admin .stat.ok .n { color: var(--pa-ok); }
#view-admin .stat.gold .n { color: var(--pa-warn); }
#view-admin .stats > .card.meta {
  grid-column: 1 / -1;
  padding: 8px 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-dim);
  font-size: 11px;
}

/* --- 4. Tab nav → VLC tab strip ---------------------------------------------
   The 7-column boxed grid of boxed groups becomes one horizontal strip: group
   labels as 9px uppercase dividers, tabs as 10.5px / 6px-radius buttons, the
   active one carrying the accent as a solid fill (VLC .hdr-btn-primary). The
   !important flags mirror the ones matrix-light-glass.css already applies at
   lower specificity to the same buttons. */
#view-admin .platform-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--pa-line) !important;
  border-radius: 0;
  background: var(--pa-panel) !important;
  box-shadow: none !important;
}
#view-admin .platform-admin-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 0;
  margin-right: 6px;
  border: 0;
  border-right: 1px solid var(--pa-line);
  border-radius: 0;
  background: transparent;
}
#view-admin .platform-admin-tab-group:last-of-type { border-right: 0; margin-right: 0; }
#view-admin .platform-admin-tab-group[hidden] { display: none; }
#view-admin .platform-admin-tab-group__label {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 0 2px;
  color: var(--pa-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  user-select: none;
}
#view-admin .platform-admin-tabs button.mini {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 24px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid transparent !important;
  border-radius: var(--pa-r);
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-dim) !important;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
#view-admin .platform-admin-tabs .mini:hover {
  transform: none;
  color: var(--pa-ink) !important;
  background: var(--pa-hover) !important;
}
#view-admin .platform-admin-tabs .mini:active { transform: none; }
#view-admin #padm-tabs .mini.active {
  color: #fff !important;
  border-color: var(--pa-accent) !important;
  background: var(--pa-accent) !important;
}
#view-admin .platform-admin-tabs .mini[hidden] { display: none; }

/* --- 5. Panel + the two-column footer ---------------------------------------
   The panel is the editor pane: flat, flush, padded 12px. The .cols grid
   below it becomes two panes separated by a 1px rule, the .sect cards losing
   their gradient, radius and shadow. */
#view-admin .platform-admin-panel {
  min-height: 320px;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: var(--pa-bg);
  box-shadow: none;
}
#view-admin .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0;
  margin: 0 !important;
  border-top: 1px solid var(--pa-line);
  background: var(--pa-panel);
}
#view-admin .cols > .sect { border-right: 1px solid var(--pa-line); }
#view-admin .cols > .sect:last-child { border-right: 0; }
#view-admin .sect {
  padding: 10px 12px;
  border: 0;
  border-color: var(--pa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-ink);
}
#view-admin .platform-admin-panel .sect {
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r-lg) !important;
  background: var(--pa-panel) !important;
}
#view-admin .platform-admin-panel .sect + .sect { margin-top: 10px; }
#view-admin .sect h2 {
  margin: 0 0 8px;
  color: var(--pa-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#view-admin .card {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--pa-line);
  border-color: var(--pa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-ink);
  font-size: 11.5px;
}
#view-admin .card:last-child { border-bottom: 0; }
#view-admin .meta,
#view-admin .card .meta { color: var(--pa-dim) !important; font-size: 10.5px; }
#view-admin .log {
  border-color: var(--pa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pa-dim);
  font-size: 11px;
  line-height: 1.55;
}
#view-admin .log div { padding: 3px 0; border-bottom: 1px solid var(--pa-line); color: var(--pa-dim); }
#view-admin .log div:last-child { border-bottom: 0; }
#view-admin .log b { color: var(--pa-ink); }

/* --- 6. Controls: buttons, inputs, selects ----------------------------------
   VLC .tb-btn / .hdr-btn: 24px tall, 10px type, raised surface, 1px line,
   6px radius, colour-only hover. Inputs: #0d1117 well, #30363d line, 6px
   radius, accent ring on focus. Covers .mini / .btn / .sm emitted by both
   renderers and the inputs in toolbars, commandbar and operation forms. */
#view-admin button.mini,
#view-admin .btn,
#view-admin button.sm {
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-raised);
  box-shadow: none;
  color: var(--pa-dim);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
#view-admin button.mini:hover,
#view-admin .btn:hover,
#view-admin button.sm:hover {
  transform: none;
  filter: none;
  background: var(--pa-line);
  border-color: var(--pa-line-strong);
  color: var(--pa-ink);
}
#view-admin button.mini:active,
#view-admin .btn:active { transform: none; }
#view-admin button.mini:disabled,
#view-admin .btn:disabled { opacity: .45; }
#view-admin .btn-primary {
  background: var(--pa-accent) !important;
  border-color: var(--pa-accent) !important;
  color: #fff !important;
  font-weight: 600;
}
#view-admin .btn-primary:hover { background: #4595f0 !important; border-color: #4595f0 !important; }
#view-admin button.mini.danger,
#view-admin button.danger,
#view-admin .btn-danger {
  color: #ffd7d5 !important;
  border-color: rgba(248, 81, 73, .45) !important;
  background: rgba(248, 81, 73, .12) !important;
}
#view-admin button.mini.danger:hover,
#view-admin button.danger:hover,
#view-admin .btn-danger:hover { background: rgba(248, 81, 73, .22) !important; border-color: var(--pa-danger) !important; color: #fff !important; }
#view-admin .btn:not(.btn-primary):not(.btn-danger) { color: var(--pa-ink); }

#view-admin input:not([type="checkbox"]):not([type="radio"]),
#view-admin select,
#view-admin textarea {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--pa-line) !important;
  border-radius: var(--pa-r) !important;
  background: var(--pa-bg) !important;
  box-shadow: none;
  color: var(--pa-ink) !important;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  transition: border-color .14s, box-shadow .14s;
}
#view-admin textarea { min-height: 64px; line-height: 1.45; }
#view-admin input::placeholder,
#view-admin textarea::placeholder { color: var(--pa-faint); }
#view-admin input:focus-visible,
#view-admin select:focus-visible,
#view-admin textarea:focus-visible,
#view-admin button:focus-visible {
  outline: none;
  border-color: var(--pa-accent) !important;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, .55);
}
#view-admin label { color: var(--pa-dim); font-size: 10.5px; }
#view-admin input[type="checkbox"] { accent-color: var(--pa-accent); }

/* --- 7. Toolbar / commandbar -------------------------------------------------
   The glass commandbar (14px radius + shadow) becomes a 1px-ruled toolbar row. */
#view-admin .platform-admin-toolbar {
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--pa-line);
}
#view-admin .platform-admin-toolbar > input,
#view-admin .platform-admin-toolbar > select { flex: 1 1 180px; }
#view-admin .platform-admin-commandbar {
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--pa-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#view-admin .platform-admin-commandbar__search,
#view-admin .platform-admin-commandbar__views { gap: 6px; }
#view-admin .platform-admin-search-results {
  top: calc(100% + 4px);
  padding: 6px;
  border: 1px solid var(--pa-line-strong);
  border-radius: var(--pa-r-lg);
  background: var(--pa-panel);
  box-shadow: none;
}
#view-admin .platform-admin-search-results__list { display: grid; gap: 0; }

/* --- 8. Lists, rows, grids, cards --------------------------------------------
   Rows are VLC table rows: 11px, 1px rule between, no border-radius, hover
   tint only. Grids of runtime/governance cards keep a 6px radius and 1px line. */
#view-admin .platform-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
#view-admin .platform-admin-list {
  gap: 0;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-panel);
  overflow: hidden;
}
#view-admin .platform-admin-list > .platform-admin-row { border-bottom: 1px solid var(--pa-line); }
#view-admin .platform-admin-list > .platform-admin-row:last-child { border-bottom: 0; }
#view-admin .platform-admin-row {
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pa-ink);
  font-size: 11px;
  transition: background .12s;
}
#view-admin .platform-admin-row:hover { background: var(--pa-hover); }
#view-admin .platform-admin-row__title { color: var(--pa-ink); font-size: 11.5px; font-weight: 600; }
#view-admin .platform-admin-row__meta { margin-top: 1px; color: var(--pa-dim); font-size: 10.5px; line-height: 1.4; }
#view-admin .platform-admin-row__actions { gap: 4px; }
#view-admin .platform-admin-row__chips { gap: 4px; margin-top: 4px; }
#view-admin .platform-admin-section-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pa-line);
  color: var(--pa-ink);
  font-size: 12px;
  font-weight: 700;
}
#view-admin .platform-admin-code {
  color: var(--pa-dim);
  font-family: var(--pa-mono);
  font-size: 10.5px;
}
#view-admin .platform-admin-object-link { color: var(--pa-accent); }
#view-admin .platform-admin-chip {
  min-height: 18px;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid var(--pa-line-strong);
  border-radius: var(--pa-r);
  background: var(--pa-raised);
  color: var(--pa-dim);
  font-size: 9.5px;
  font-weight: 600;
}
#view-admin .platform-admin-chip.is-ok { color: var(--pa-ok); border-color: rgba(63, 185, 80, .35); background: rgba(63, 185, 80, .1); }
#view-admin .platform-admin-chip.is-warn { color: var(--pa-warn); border-color: rgba(210, 153, 34, .35); background: rgba(210, 153, 34, .1); }
#view-admin .platform-admin-chip.is-danger { color: var(--pa-danger); border-color: rgba(248, 81, 73, .35); background: rgba(248, 81, 73, .1); }

#view-admin .platform-admin-empty,
#view-admin .platform-admin-loading,
#view-admin .platform-admin-error {
  min-height: 120px;
  padding: 16px;
  border: 1px dashed var(--pa-line-strong);
  border-radius: var(--pa-r-lg);
  background: var(--pa-panel);
  color: var(--pa-dim);
  font-size: 11px;
}
#view-admin .platform-admin-error {
  color: var(--pa-danger);
  border-color: rgba(248, 81, 73, .4);
  background: rgba(248, 81, 73, .08);
}

#view-admin .platform-admin-gate-grid { gap: 8px; }
#view-admin .platform-admin-gate,
#view-admin .platform-admin-runtime-card,
#view-admin .platform-admin-governance-metric,
#view-admin .platform-admin-operation-preview,
#view-admin .platform-admin-operation-status,
#view-admin .platform-admin-enrollment-secret,
#view-admin .platform-admin-recovery-codes {
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-panel);
  box-shadow: none;
}
#view-admin .platform-admin-gate { padding: 10px 12px; }
#view-admin .platform-admin-gate[data-state="closed"] { border-color: rgba(248, 81, 73, .4); }
#view-admin .platform-admin-runtime-card { gap: 8px; padding: 10px 12px; }
#view-admin .platform-admin-runtime-axis-grid { gap: 4px; }
#view-admin .platform-admin-runtime-axis {
  padding: 6px 8px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-bg);
}
#view-admin .platform-admin-runtime-axis span { color: var(--pa-faint); font-size: 9.5px; }
#view-admin .platform-admin-runtime-axis strong { color: var(--pa-ink); font-size: 11px; }
#view-admin .platform-admin-runtime-axis strong.is-ok { color: var(--pa-ok); }
#view-admin .platform-admin-runtime-axis strong.is-warn { color: var(--pa-warn); }
#view-admin .platform-admin-runtime-axis strong.is-danger { color: var(--pa-danger); }

/* --- 9. Governance UI (platform-admin-governance-ui.mjs) ---------------------
   Boundary note → a quiet accent-tinted strip; secondary nav → same tab
   strip as §4; metrics → stat tiles; detail lists → 1px-ruled key/value
   rows; operation forms → VLC form density. */
#view-admin .platform-admin-governance { gap: 10px; }
#view-admin .platform-admin-boundary-note {
  gap: 6px 12px;
  padding: 6px 10px;
  border: 1px solid rgba(88, 166, 255, .3);
  border-radius: var(--pa-r);
  background: rgba(88, 166, 255, .08);
  color: var(--pa-dim);
  font-size: 10.5px;
  line-height: 1.45;
}
#view-admin .platform-admin-boundary-note strong { color: var(--pa-accent); }
#view-admin .platform-admin-governance-nav {
  gap: 2px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--pa-line);
  border-radius: 0;
  background: transparent;
}
#view-admin .platform-admin-governance-nav .mini {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--pa-dim) !important;
}
#view-admin .platform-admin-governance-nav .mini:hover { background: var(--pa-hover) !important; color: var(--pa-ink) !important; }
#view-admin .platform-admin-governance-nav .mini.active {
  color: #fff !important;
  border-color: var(--pa-accent) !important;
  background: var(--pa-accent) !important;
}
#view-admin .platform-admin-governance-content { min-height: 200px; }
#view-admin .platform-admin-governance-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
#view-admin .platform-admin-governance-section {
  padding: 10px 12px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r-lg);
  background: var(--pa-panel);
}
#view-admin .platform-admin-governance-summary {
  gap: 0;
  margin-bottom: 10px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-panel);
  overflow: hidden;
}
#view-admin .platform-admin-governance-metric {
  gap: 2px;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid var(--pa-line);
  border-radius: 0;
  background: transparent;
}
#view-admin .platform-admin-governance-metric:last-child { border-right: 0; }
#view-admin .platform-admin-governance-metric strong { color: var(--pa-ink); font-family: var(--pa-mono); font-size: 18px; }
#view-admin .platform-admin-governance-metric span { color: var(--pa-dim); font-size: 10px; }
#view-admin .platform-admin-governance-metric.is-ok strong { color: var(--pa-ok); }
#view-admin .platform-admin-governance-metric.is-warn strong { color: var(--pa-warn); }
#view-admin .platform-admin-governance-metric.is-danger strong { color: var(--pa-danger); }

#view-admin .platform-admin-detail-list { gap: 0; }
#view-admin .platform-admin-detail-list > div {
  grid-template-columns: minmax(110px, .38fr) minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--pa-line);
}
#view-admin .platform-admin-detail-list > div:last-child { border-bottom: 0; }
#view-admin .platform-admin-detail-list dt { color: var(--pa-faint); font-size: 10.5px; }
#view-admin .platform-admin-detail-list dd { color: var(--pa-ink); font-size: 11px; }
#view-admin .platform-admin-relationship + .platform-admin-relationship { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--pa-line); }

#view-admin .platform-admin-operation-control,
#view-admin .platform-admin-operation-fields,
#view-admin .platform-admin-operation-preview,
#view-admin .platform-admin-operation-status { gap: 8px; }
#view-admin .platform-admin-operation-control { padding-top: 10px; border-top: 1px solid var(--pa-line); }
#view-admin .platform-admin-operation-fields > label { gap: 3px; }
#view-admin .platform-admin-operation-preview,
#view-admin .platform-admin-operation-status { padding: 8px 10px; font-size: 11px; }
#view-admin .platform-admin-action-sheet { display: grid; gap: 8px; }

/* --- 10. Drawer + session gate -----------------------------------------------
   The drawer is VLC's detail panel: flush right, full height, a 1px left rule
   instead of an 18px-radius floating sheet with a 70px shadow. */
#view-admin .platform-admin-drawer-backdrop { background: rgba(1, 4, 9, .55); }
#view-admin .platform-admin-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, calc(100vw - 24px));
  border: 0;
  border-left: 1px solid var(--pa-line-strong);
  border-radius: 0;
  background: var(--pa-panel);
  box-shadow: none;
  color: var(--pa-ink);
}
#view-admin .platform-admin-drawer__head {
  gap: 10px;
  align-items: center;
  min-height: var(--pa-bar-h);
  padding: 6px 12px;
  border-bottom: 1px solid var(--pa-line);
  background: linear-gradient(180deg, #151b23 0%, #111720 100%);
}
#view-admin .platform-admin-drawer__head h2 { color: var(--pa-ink); font-size: 12.5px; font-weight: 700; }
#view-admin .platform-admin-drawer__body { gap: 10px; padding: 12px; }
#view-admin .platform-admin-drawer > .platform-admin-loading,
#view-admin .platform-admin-drawer > .platform-admin-error { margin: 12px; }

#view-admin .platform-admin-session-gate {
  gap: 10px;
  max-width: 640px;
  margin: 32px auto;
  padding: 16px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r-lg);
  background: var(--pa-panel);
  box-shadow: none;
  color: var(--pa-ink);
}
#view-admin .platform-admin-session-gate h2 { font-size: 13px; font-weight: 700; }
#view-admin .platform-admin-session-gate p { color: var(--pa-dim); font-size: 11.5px; line-height: 1.55; }
#view-admin .platform-admin-session-gate .platform-admin-kicker { font-size: 9px; }
#view-admin .platform-admin-enrollment-secret,
#view-admin .platform-admin-recovery-codes { gap: 6px; margin: 8px 0; padding: 8px 10px; color: var(--pa-dim); }
#view-admin .platform-admin-enrollment-secret code,
#view-admin .platform-admin-recovery-codes code {
  padding: 6px 8px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-bg);
  color: var(--pa-ink);
  font-family: var(--pa-mono);
  font-size: 10.5px;
  line-height: 1.5;
}

/* --- 11. Tables -------------------------------------------------------------
   Any <table> either renderer emits: VLC data table — 11px, 1px row rules,
   sticky 10px uppercase header, no zebra, hover tint only. */
#view-admin table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-panel);
  color: var(--pa-ink);
  font-size: 11px;
  overflow: hidden;
}
#view-admin th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 10px;
  border-bottom: 1px solid var(--pa-line);
  background: var(--pa-raised);
  color: var(--pa-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
#view-admin td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--pa-line);
  color: var(--pa-ink);
  vertical-align: middle;
}
#view-admin tr:last-child > td { border-bottom: 0; }
#view-admin tbody tr:hover > td { background: var(--pa-hover); }
#view-admin pre, #view-admin code { font-family: var(--pa-mono); font-size: 10.5px; }
#view-admin pre {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-r);
  background: var(--pa-bg) !important;
  color: var(--pa-dim);
  overflow: auto;
}

/* --- 12. Narrow screens ------------------------------------------------------ */
@media (max-width: 1100px) {
  #view-admin .platform-admin-tabs { grid-template-columns: none; }
  #view-admin .platform-admin-hero > div:first-child { flex-wrap: wrap; row-gap: 0; }
  #view-admin .platform-admin-hero .page-sub { display: none; }
}
@media (max-width: 780px) {
  #view-admin .platform-admin-hero { flex-wrap: wrap; min-height: 0; padding: 6px 10px; }
  #view-admin .cols > .sect { border-right: 0; border-bottom: 1px solid var(--pa-line); }
}