/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Admin — design system migration
   ─────────────────────────────────────
   Overrides the admin modal's visual styling to align with nx-system.
   The admin modal has TWO style sources:
     1. .admin-* classes in nexus.css (legacy form widgets)
     2. .at-* classes in inline <style> in index.html (tab redesign)
   Plus inline styles on individual elements.
   
   This file overrides both class systems, plus quiets emoji-prefixed
   tab labels via CSS so the bar reads as clean text.
   
   Load order: ... → views-system.css → admin-system.css (this file)
                  → home.css → chat.css
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ MODAL SHELL ═══ */

.admin-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 100 !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 60px 16px 16px !important;
  overflow-y: auto !important;
}
.admin-overlay.open { display: flex !important; }

/* v18.32 — Modal surface uses --nx-surface-solid per design system.
   Was --nx-surface-1 (translucent layer in the surface stack), which
   read as "glass" stacked over the page background. Modals are the
   canonical example of "needs opacity" — solid is the right call. */
.admin-box {
  background: var(--nx-surface-solid) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-card) !important;
  padding: var(--nx-space-6) !important;
  width: 92% !important;
  max-width: 480px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Modal title */
.admin-title {
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-xl) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--nx-text) !important;
  margin-bottom: var(--nx-space-4) !important;
  text-transform: none !important;
}


/* ═══ USER INFO HEADER (top of modal) ═══ */

.admin-user-info {
  display: flex !important;
  align-items: center !important;
  gap: var(--nx-space-3) !important;
  margin-bottom: var(--nx-space-4) !important;
  padding-bottom: var(--nx-space-3) !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
}
.admin-user-name {
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-md) !important;
  font-weight: 500 !important;
  color: var(--nx-text) !important;
}
.admin-user-role {
  font-family: var(--nx-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  font-weight: 600 !important;
  color: var(--nx-gold) !important;
  padding: 4px 10px !important;
  border: 1px solid var(--nx-gold-line-2) !important;
  border-radius: var(--nx-radius-pill) !important;
  background: var(--nx-gold-faint) !important;
  text-transform: uppercase;
}

/* Other-user list (below current admin info) */
.admin-user-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--nx-space-2) !important;
  margin-bottom: var(--nx-space-3) !important;
}
.admin-user-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--nx-space-2) !important;
  padding: 10px 12px !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-highlight-tint) !important;
  border-radius: var(--nx-radius-tight) !important;
  font-size: var(--nx-text-sm) !important;
}
.admin-user-name-sm {
  flex: 1 !important;
  font-weight: 500 !important;
  color: var(--nx-text) !important;
}
.admin-user-role-sm {
  font-family: var(--nx-font-mono) !important;
  font-size: 9.5px !important;
  color: var(--nx-gold) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.admin-user-loc-sm,
.admin-user-pin-sm {
  font-family: var(--nx-font-mono) !important;
  font-size: 10px !important;
  color: var(--nx-faint) !important;
  letter-spacing: 0.4px;
}


/* ═══ TAB BAR ═══
   Quiet the inline-styled tab bar and turn it into a system pill row.
   Hide the emoji prefixes via font-size:0 + ::before content swap. */

.admin-tab-bar {
  display: flex !important;
  gap: var(--nx-space-1) !important;
  margin: var(--nx-space-3) 0 var(--nx-space-4) !important;
  background: var(--nx-surface-2) !important;
  border-radius: var(--nx-radius-pill) !important;
  padding: 4px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}
.admin-tab-bar::-webkit-scrollbar { display: none; }

.at-tab {
  flex: 1 !important;
  min-width: 80px !important;
  padding: 9px 10px !important;
  background: transparent !important;
  border: none !important;
  color: var(--nx-faint) !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--nx-radius-pill) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--nx-press), color var(--nx-press) !important;
  letter-spacing: 0.3px !important;
}
.at-tab:active { transform: scale(0.96); }
.at-tab.active {
  background: var(--nx-gold-soft) !important;
  color: var(--nx-gold) !important;
  font-weight: 600 !important;
}

/* Quiet emoji-prefixed labels — replace via ::before, hide original */
.at-tab[data-tab="overview"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.at-tab[data-tab="overview"]::before {
  content: 'Overview';
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: inherit;
  letter-spacing: 0.3px;
}
.at-tab[data-tab="configure"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.at-tab[data-tab="configure"]::before {
  content: 'Configure';
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: inherit;
  letter-spacing: 0.3px;
}
.at-tab[data-tab="actions"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.at-tab[data-tab="actions"]::before {
  content: 'Actions';
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: inherit;
  letter-spacing: 0.3px;
}
.at-tab[data-tab="logs"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.at-tab[data-tab="logs"]::before {
  content: 'Logs';
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: inherit;
  letter-spacing: 0.3px;
}


/* ═══ OVERVIEW: STATS GRID ═══ */

.at-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--nx-space-2) !important;
  margin: var(--nx-space-2) 0 var(--nx-space-5) !important;
}
.at-stat-card {
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-highlight-faint) !important;
  border-radius: var(--nx-radius-card) !important;
  padding: 12px 6px !important;
  text-align: center !important;
  transition: border-color var(--nx-press) !important;
  box-shadow: var(--nx-shadow-soft);
}
.at-stat-card .at-stat-icon {
  font-size: 16px !important;
  margin-bottom: 3px !important;
  line-height: 1 !important;
  opacity: 0.7;
}
.at-stat-card .at-stat-num {
  font-family: var(--nx-font-mono) !important;
  font-size: var(--nx-text-lg) !important;
  font-weight: 600 !important;
  color: var(--nx-text) !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.at-stat-card .at-stat-label {
  font-family: var(--nx-font-mono) !important;
  font-size: 9px !important;
  color: var(--nx-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin-top: 4px !important;
  font-weight: 600 !important;
}
.at-stat-card.alert {
  background: var(--nx-red-soft) !important;
  border-color: var(--nx-red-line) !important;
}
.at-stat-card.alert .at-stat-num { color: var(--nx-red) !important; }


/* ═══ INTEGRATIONS CHIPS ═══ */

.at-integrations {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--nx-space-2) !important;
  margin: var(--nx-space-2) 0 var(--nx-space-5) !important;
}
.at-int-chip {
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-xs) !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: var(--nx-radius-pill) !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-highlight-faint) !important;
  color: var(--nx-muted) !important;
  letter-spacing: 0.2px;
}
.at-int-chip.ok {
  border-color: rgba(91, 186, 95, 0.30) !important;
  color: var(--nx-green) !important;
  background: rgba(91, 186, 95, 0.08) !important;
}
.at-int-chip.off {
  border-color: var(--nx-red-line) !important;
  color: var(--nx-red) !important;
  background: var(--nx-red-soft) !important;
}


/* ═══ SECTION TITLES ═══ */

.at-section-title {
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-base) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  color: var(--nx-text) !important;
  margin: var(--nx-space-5) 0 var(--nx-space-3) !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Legacy admin-section-label — used inside Configure tab */
.admin-section-label {
  font-family: var(--nx-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  color: var(--nx-faint) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: var(--nx-space-4) 0 var(--nx-space-2) !important;
}


/* ═══ ATTENTION ROWS ═══ */

.at-attn-item {
  font-size: var(--nx-text-sm) !important;
  padding: 10px 14px !important;
  margin-bottom: var(--nx-space-1) !important;
  border-radius: var(--nx-radius-tight) !important;
  background: rgba(232, 168, 48, 0.08) !important;
  border: 1px solid rgba(232, 168, 48, 0.20) !important;
  color: var(--nx-text) !important;
  line-height: 1.45 !important;
}
.at-attn-item.ok {
  background: rgba(91, 186, 95, 0.06) !important;
  border-color: rgba(91, 186, 95, 0.18) !important;
  color: var(--nx-green) !important;
}
.at-attn-item.danger {
  background: var(--nx-red-soft) !important;
  border-color: var(--nx-red-line) !important;
  color: var(--nx-red) !important;
}


/* ═══ ACTIVITY FEED ═══ */

.at-activity {
  max-height: 200px !important;
  overflow-y: auto !important;
  border-radius: var(--nx-radius-tight) !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-highlight-tint) !important;
  padding: 4px 0 !important;
}
.at-activity-row {
  display: flex !important;
  gap: var(--nx-space-2) !important;
  padding: 8px 12px !important;
  font-size: var(--nx-text-xs) !important;
  border-bottom: 1px solid var(--nx-highlight-tint) !important;
}
.at-activity-row:last-child { border-bottom: none; }
.at-activity-time {
  font-family: var(--nx-font-mono) !important;
  font-size: 10px !important;
  color: var(--nx-faint) !important;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.at-activity-msg {
  color: var(--nx-text) !important;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.at-activity-empty {
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-sm) !important;
  padding: 16px 12px !important;
  text-align: center;
  color: var(--nx-faint) !important;
}


/* ═══ FORM FIELDS — admin-field, admin-field-sm, admin-divider ═══ */

.admin-field,
.admin-field-sm {
  width: 100% !important;
  padding: 12px 14px !important;
  min-height: var(--nx-touch-min) !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: var(--nx-radius-tight) !important;
  color: var(--nx-text) !important;
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-sm) !important;
  margin-bottom: var(--nx-space-2) !important;
  outline: none !important;
  transition: border-color var(--nx-press) !important;
}
.admin-field:focus,
.admin-field-sm:focus { border-color: var(--nx-gold-line-3) !important; }
.admin-field::placeholder,
.admin-field-sm::placeholder { color: var(--nx-faint) !important; }

.admin-field-sm {
  font-size: var(--nx-text-sm) !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
}

.admin-divider {
  border: none !important;
  border-top: 1px solid var(--nx-gold-line) !important;
  margin: var(--nx-space-4) 0 !important;
}


/* ═══ BUTTONS ═══ */

.admin-save-btn {
  width: 100% !important;
  padding: 13px 16px !important;
  min-height: var(--nx-touch-min) !important;
  border-radius: var(--nx-radius-pill) !important;
  border: none !important;
  background: linear-gradient(180deg, var(--nx-gold) 0%, var(--nx-gold-deep) 100%) !important;
  color: var(--nx-gold-on) !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  margin-top: var(--nx-space-2) !important;
  box-shadow: var(--nx-shadow-pill) !important;
  transition: background var(--nx-press), transform var(--nx-press) !important;
}
.admin-save-btn:active {
  background: linear-gradient(180deg, var(--nx-gold-deep) 0%, var(--nx-gold-darker) 100%) !important;
  transform: scale(0.985);
}

/* Secondary / quiet save buttons (admin uses inline style overrides
   for "background:transparent" — match those by detecting and
   re-styling. The cascade lets inline win over us, BUT the inline
   uses old colors that need updating. We can't override inline
   without !important on individual properties. */
.admin-save-btn[style*="transparent"] {
  background: transparent !important;
  color: var(--nx-faint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  box-shadow: none !important;
}
.admin-save-btn[style*="transparent"]:active {
  background: var(--nx-gold-faint) !important;
  color: var(--nx-gold) !important;
}

/* The "Open Activity Log" gold-gradient button uses inline style
   "background:linear-gradient(135deg,var(--accent),#d4b86a);color:#101626;"
   — that's already gold-on-dark, so just round it correctly. */
#adminOpenLog,
#adminReviewPmLogs,
#adminBroadcastSend {
  /* inline gradient stays — we just ensure shape + interactivity */
  border-radius: var(--nx-radius-pill) !important;
  font-family: var(--nx-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  min-height: var(--nx-touch-min) !important;
  box-shadow: var(--nx-shadow-pill) !important;
}

/* Drive sync row */
.admin-drive-row {
  display: flex !important;
  gap: var(--nx-space-2) !important;
  margin-top: var(--nx-space-2) !important;
}
.admin-drive-btn {
  flex: 1 !important;
  padding: 10px 8px !important;
  min-height: 40px !important;
  border-radius: var(--nx-radius-pill) !important;
  border: 1px solid var(--nx-gold-line) !important;
  background: var(--nx-surface-2) !important;
  color: var(--nx-muted) !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: border-color var(--nx-press), color var(--nx-press) !important;
}
.admin-drive-btn:hover {
  border-color: var(--nx-gold-line-2) !important;
  color: var(--nx-gold) !important;
}

/* Voice row */
.admin-voice-row {
  display: flex !important;
  gap: var(--nx-space-2) !important;
  align-items: center !important;
}
.admin-test-voice-btn {
  padding: 10px 16px !important;
  min-height: 40px !important;
  border-radius: var(--nx-radius-pill) !important;
  border: 1px solid var(--nx-gold-line-2) !important;
  background: var(--nx-gold-faint) !important;
  color: var(--nx-gold) !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-xs) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--nx-press) !important;
}
.admin-test-voice-btn:hover { background: var(--nx-gold-soft) !important; }

/* Active voice picker — segmented control: Providentia · Trajan · System.
   Token-driven so it reads correctly in both dark and light themes. */
.admin-voice-pick-label {
  font-family: var(--nx-font-mono) !important;
  font-size: var(--nx-text-xs) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--nx-muted) !important;
  margin: 4px 2px 8px !important;
}
.admin-voice-picker {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--nx-space-2) !important;
  margin-bottom: 8px !important;
}
.admin-voice-pick {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 12px 8px !important;
  min-height: 58px !important;
  border-radius: var(--nx-radius-tight) !important;
  border: 1px solid var(--nx-highlight-faint) !important;
  background: var(--nx-surface-2) !important;
  color: var(--nx-text) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press) !important;
}
.admin-voice-pick:hover { border-color: var(--nx-gold-line-2) !important; }
.admin-voice-pick:active { transform: scale(0.98) !important; }
.admin-voice-pick .avp-name {
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-sm) !important;
  font-weight: 650 !important;
  color: var(--nx-text) !important;
}
.admin-voice-pick .avp-sub {
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  color: var(--nx-muted) !important;
}
.admin-voice-pick.is-active {
  border-color: var(--nx-gold) !important;
  background: var(--nx-gold-faint) !important;
  box-shadow: 0 0 0 1px var(--nx-gold-line-2) inset !important;
}
.admin-voice-pick.is-active .avp-name { color: var(--nx-gold) !important; }

/* Live Clippy activity panel — nodes, in-flight jobs, recent feed. */
.clippy-activity { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.clippy-act-empty { font-size: 11px; color: var(--nx-muted); padding: 8px 0; }
.clippy-act-head {
  font-family: var(--nx-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nx-gold); margin: 4px 2px 0;
}
.clippy-act-node {
  border: 1px solid var(--nx-highlight-faint); border-radius: 10px;
  background: var(--nx-surface-2); padding: 8px 10px;
}
.clippy-act-node.is-busy { border-color: var(--nx-gold-line-2); background: var(--nx-gold-faint); }
.clippy-act-node-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--nx-text); }
.clippy-act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-muted); flex-shrink: 0; }
.clippy-act-node.is-busy .clippy-act-dot { background: var(--nx-green); box-shadow: 0 0 6px var(--nx-green); }
.clippy-act-badge {
  margin-left: auto; font-size: 9.5px; font-family: var(--nx-font-mono);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--nx-muted);
}
.clippy-act-node.is-busy .clippy-act-badge { color: var(--nx-green); }
.clippy-act-cur { font-size: 11.5px; color: var(--nx-text); margin-top: 3px; }
.clippy-act-tele { font-family: var(--nx-font-mono); font-size: 10px; color: var(--nx-faint); margin-top: 3px; }
.clippy-act-job {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; color: var(--nx-text);
  border: 1px solid var(--nx-highlight-tint); border-radius: 8px; padding: 6px 8px;
}
.clippy-act-jk {
  font-family: var(--nx-font-mono); font-size: 9px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--nx-gold-line);
  color: var(--nx-gold);
}
.clippy-act-jk-vision { color: var(--nx-purple); border-color: var(--nx-purple); }
.clippy-act-jk-cmd    { color: var(--nx-red); border-color: var(--nx-red-line); }
.clippy-act-js   { color: var(--nx-muted); }
.clippy-act-jage { margin-left: auto; font-family: var(--nx-font-mono); font-size: 10px; color: var(--nx-faint); }
.clippy-act-tail {
  flex-basis: 100%; font-family: var(--nx-font-mono); font-size: 10px;
  color: var(--nx-faint); white-space: pre-wrap; word-break: break-word;
  background: var(--nx-surface-1); border-radius: 6px; padding: 4px 6px; margin-top: 2px;
}
.clippy-act-feed { font-size: 11px; color: var(--nx-muted); display: flex; gap: 6px; }
.clippy-act-fage { font-family: var(--nx-font-mono); font-size: 10px; color: var(--nx-faint); flex-shrink: 0; min-width: 28px; }
.clippy-act-fmsg { color: var(--nx-text); }

/* Voice speed slider — sits below the voice row, controls TTS rate */
.admin-voice-speed-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--nx-space-3) !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: var(--nx-gold-tint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: 14px !important;
}
.admin-voice-speed-label {
  font-family: var(--nx-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--nx-faint) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}
.admin-voice-speed-slider {
  flex: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 4px !important;
  background: var(--nx-highlight-soft) !important;
  border-radius: 2px !important;
  outline: none !important;
  cursor: pointer !important;
}
.admin-voice-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-deep));
  border: 2px solid var(--nx-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.admin-voice-speed-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-deep));
  border: 2px solid var(--nx-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.admin-voice-speed-val {
  font-family: var(--nx-font-mono) !important;
  font-size: 12px !important;
  color: var(--nx-gold) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  min-width: 48px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}


/* ═══ THE TWO VOICES OF NEXUS ═════════════════════════════════════════
   Providentia and Trajan — the figures on the coin. Each gets a card
   with a copy-prompt block, voice ID input, and Bring-to-life button.
   Visual hierarchy: the section reads as a deliberate creative act,
   not a generic settings panel. */

.admin-voices-of-nexus {
  margin-top: 14px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at top right, var(--nx-gold-faint), transparent 60%),
    var(--nx-gold-tint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: 18px !important;
}

.admin-voices-intro {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
}
.admin-voices-title {
  font-family: var(--nx-font-display) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--nx-text) !important;
  line-height: 1.3 !important;
}
.admin-voices-sub {
  font-family: var(--nx-font-body) !important;
  font-size: 12px !important;
  color: var(--nx-muted) !important;
  margin-top: 4px !important;
  line-height: 1.55 !important;
}
.admin-voices-sub a {
  color: var(--nx-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
}

/* ─── Character card ──────────────────────────────────────────────── */
.admin-voice-character {
  margin-bottom: 12px !important;
  padding: 14px !important;
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-highlight-faint) !important;
  border-radius: 16px !important;
  transition: border-color var(--nx-press) !important;
}
.admin-voice-character:hover {
  border-color: var(--nx-gold-line-2) !important;
}
.admin-voice-character:last-of-type {
  margin-bottom: 14px !important;
}

.admin-voice-char-head {
  margin-bottom: 8px !important;
}
.admin-voice-char-name {
  font-family: var(--nx-font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--nx-gold) !important;
  line-height: 1.25 !important;
}
.admin-voice-char-tagline {
  font-family: var(--nx-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--nx-faint) !important;
  margin-top: 4px !important;
}

.admin-voice-char-body {
  font-family: var(--nx-font-body) !important;
  font-size: 12.5px !important;
  color: var(--nx-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
  font-style: italic !important;
}
.admin-voice-char-body em {
  font-style: italic !important;
  color: var(--nx-text) !important;
  font-family: 'Times New Roman', serif !important;
  letter-spacing: 0.2px !important;
}

/* ─── Voice Design prompt block ───────────────────────────────────── */
.admin-voice-prompt-block {
  margin-bottom: 10px !important;
}
.admin-voice-prompt-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--nx-font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--nx-faint) !important;
  margin-bottom: 6px !important;
}
.admin-voice-prompt-copy {
  padding: 4px 10px !important;
  border-radius: var(--nx-radius-pill) !important;
  border: 1px solid var(--nx-gold-line) !important;
  background: transparent !important;
  color: var(--nx-gold) !important;
  font-family: var(--nx-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  text-transform: none !important;
  transition: background var(--nx-press), border-color var(--nx-press) !important;
}
.admin-voice-prompt-copy:hover {
  background: var(--nx-gold-faint) !important;
  border-color: var(--nx-gold-line-2) !important;
}
.admin-voice-prompt-text {
  width: 100% !important;
  min-height: 70px !important;
  padding: 10px 12px !important;
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-highlight-tint) !important;
  border-radius: 12px !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  font-size: 12.5px !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  color: var(--nx-muted) !important;
  resize: vertical !important;
  outline: none !important;
  box-sizing: border-box !important;
  cursor: text !important;
}

/* ─── Voice ID input row ──────────────────────────────────────────── */
.admin-voice-id-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.admin-voice-id-input {
  flex: 1 !important;
  min-width: 180px !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: 14px !important;
  color: var(--nx-text) !important;
  font-family: var(--nx-font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px !important;
  outline: none !important;
  transition: border-color var(--nx-press) !important;
}
.admin-voice-id-input:focus {
  border-color: var(--nx-gold-line-3) !important;
  background: var(--nx-surface-3) !important;
}
.admin-voice-id-input::placeholder {
  color: var(--nx-faint) !important;
  font-style: italic !important;
}

.admin-voice-test-btn {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--nx-gold-line-2) !important;
  background: transparent !important;
  color: var(--nx-gold) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background var(--nx-press), border-color var(--nx-press) !important;
}
.admin-voice-test-btn:hover {
  background: var(--nx-gold-faint) !important;
  border-color: var(--nx-gold-line-3) !important;
}

.admin-voice-activate-btn {
  flex-shrink: 0 !important;
  padding: 10px 18px !important;
  min-height: 40px !important;
  border-radius: var(--nx-radius-pill) !important;
  border: none !important;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  color: var(--nx-gold-on) !important;
  font-family: var(--nx-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  box-shadow: var(--nx-shadow-pill) !important;
  transition: transform var(--nx-press), background var(--nx-press) !important;
}
.admin-voice-activate-btn:active {
  transform: scale(0.97) !important;
  background: linear-gradient(180deg, var(--nx-gold-deep), var(--nx-gold-darker)) !important;
}

/* ─── Status line ─────────────────────────────────────────────────── */
.admin-voice-status {
  margin-top: 10px !important;
  font-family: var(--nx-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.4px !important;
  min-height: 14px !important;
  line-height: 1.4 !important;
}
.admin-voice-status:empty {
  display: none !important;
}
.admin-voice-status-active {
  color: var(--nx-gold) !important;
  font-weight: 600 !important;
}
.admin-voice-status-ready {
  color: var(--nx-muted) !important;
  font-style: italic !important;
}

/* ─── How-to footer ───────────────────────────────────────────────── */
.admin-voices-howto {
  font-family: var(--nx-font-body) !important;
  font-size: 11.5px !important;
  color: var(--nx-faint) !important;
  line-height: 1.6 !important;
  padding: 10px 12px !important;
  background: var(--nx-surface-1) !important;
  border-radius: 12px !important;
  border: 1px dashed var(--nx-highlight-tint) !important;
}
.admin-voices-howto strong {
  color: var(--nx-gold) !important;
  font-weight: 600 !important;
}

/* Status text */
.admin-key-status {
  text-align: center !important;
  padding: var(--nx-space-2) !important;
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-xs) !important;
  color: var(--nx-muted) !important;
  line-height: 1.5;
}

/* Bottom action row (Enter / Cancel) */
.admin-actions {
  display: flex !important;
  gap: var(--nx-space-2) !important;
  margin-top: var(--nx-space-4) !important;
}
.admin-enter,
.admin-cancel {
  flex: 1 !important;
  padding: 13px !important;
  min-height: var(--nx-touch-min) !important;
  border-radius: var(--nx-radius-pill) !important;
  border: none !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: background var(--nx-press), transform var(--nx-press) !important;
}
.admin-enter {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  color: var(--nx-gold-on) !important;
  box-shadow: var(--nx-shadow-pill) !important;
}
.admin-enter:active {
  background: linear-gradient(180deg, var(--nx-gold-deep), var(--nx-gold-darker)) !important;
  transform: scale(0.985);
}
.admin-cancel {
  background: transparent !important;
  color: var(--nx-faint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  font-weight: 500 !important;
}
.admin-cancel:active { background: var(--nx-gold-faint) !important; }


/* ═══ TOGGLE ROW (PIN cache, etc.) ═══ */

.admin-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: var(--nx-radius-tight) !important;
  cursor: pointer !important;
  margin-top: var(--nx-space-2) !important;
}
.admin-toggle-row input[type="checkbox"] {
  accent-color: var(--nx-gold) !important;
}


/* ═══ ONBOARDING ═══ */

.onboard-overlay {
  background: rgba(14, 19, 32, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.onboard-box {
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-highlight-faint) !important;
  border-radius: var(--nx-radius-card) !important;
  padding: var(--nx-space-7) var(--nx-space-6) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6) !important;
}
.onboard-dot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 24px var(--nx-gold-glow) !important;
}
.onboard-title {
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-2xl) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--nx-text) !important;
  text-transform: none !important;
}
.onboard-desc {
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-base) !important;
  color: var(--nx-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--nx-space-6) !important;
}
.onboard-step {
  font-size: var(--nx-text-sm) !important;
  color: var(--nx-text) !important;
  line-height: 1.55 !important;
}
.onboard-step b { color: var(--nx-gold) !important; font-weight: 600 !important; }
.onboard-num {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--nx-gold-line-2) !important;
  background: var(--nx-gold-faint) !important;
  color: var(--nx-gold) !important;
  font-family: var(--nx-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.onboard-btn {
  width: 100% !important;
  padding: 14px !important;
  min-height: var(--nx-touch-min) !important;
  border-radius: var(--nx-radius-pill) !important;
  border: none !important;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  color: var(--nx-gold-on) !important;
  font-family: var(--nx-font-display) !important;
  font-size: var(--nx-text-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  box-shadow: var(--nx-shadow-pill) !important;
}


/* ═══ UTILITY TRAY (drops down from top nav) ═══
   v18.32 — Stripped the legacy glass effect (backdrop-filter blur +
   saturate) per the new design system. Glass treatments are a v1-era
   look that competes with the editorial × terminal aesthetic — surfaces
   should be clean and warm, not surgical. Replaced with a solid surface
   from the design tokens. */

.util-tray {
  background: var(--nx-surface-solid) !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
  box-shadow: var(--nx-shadow-card) !important;
}
.util-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--nx-faint) !important;
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-xs) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: var(--nx-radius-tight) !important;
  transition: color var(--nx-press), background var(--nx-press) !important;
  min-height: 56px !important;
}
.util-btn:hover {
  color: var(--nx-gold) !important;
  background: var(--nx-gold-faint) !important;
}
.util-btn .util-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.7 !important;
}


/* ═══ ALERT BANNERS ═══ */

.api-banner {
  background: var(--nx-red) !important;
  color: #fff !important;
  font-family: var(--nx-font-body) !important;
  font-size: var(--nx-text-sm) !important;
}
.api-banner button {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: var(--nx-radius-pill) !important;
  font-size: var(--nx-text-xs) !important;
  font-weight: 600 !important;
}