/**
 * Sub2API — Console theme overlay v32 (forest-green hardcode purge)
 * All matrix/forest panel rgba/hex remapped to obsidian neutrals.
 * Brand cyan + semantic success emerald preserved (palette B).
 * Brand accent = cyan #5EEAD4. Semantic success = emerald (not matrix neon).
 * Goal: no white/light surfaces; high-contrast text everywhere.
 * Palette remapped from matrix green → obsidian + cyan (#050505 / #5EEAD4).
 * Injected via index.html; reversible.
 * v12: VersionBadge — raise .sidebar-header (z-30) above .sidebar-nav (z-1).
 * v17: 账号管理 ⋯ — raised main column above .sidebar on lg+ (REGRESSED VersionBadge).
 * v18: home 「控制台」pill — light text on dark-green shell (was black blob).
 * v19: country flags (flag-icons img + locale emoji) — no dark plate / filter.
 * v20: VersionBadge — undo v17 demotion; sidebar stays z-40 so version popup
 *      can overflow over main. Body-teleported ⋯ menus keep z-99999.
 * v26: 「添加账号」左侧「更多操作」下拉 (account-tools) — surface styles.
 *      Stacking fixed by ht-account-tools.js (absolute→fixed + high z).
 * v27: 渠道监控「正常」pill — drop .relative.inline-flex.items-center from the
 *      pagination surface rule; it painted a near-black plate behind every
 *      HelpTooltip trigger wrapper (rounded badge corners exposed it as a
 *      black frame). nav button already covers pagination.
 * v28: 新手引导 driver.js popover — SPA onboarding.css loads after this
 *      overlay and restored a white shell; the old `.driver-popover *`
 *      blanket painted children black (footer black boxes). Full tour
 *      restyle via html.dark + higher specificity; no child-bg blanket.
 */

/* JetBrains Mono import removed — colder luxury uses system sans */

:root {
  /* 0xNyx colder luxury (console brand) — was matrix green terminal */
  --ht-bg: #050505;
  --ht-elevated: #0a0c0d;
  --ht-panel: #0f1416;
  --ht-panel-2: #141a1c;
  --ht-input: #0a0c0d;
  --ht-border: rgba(94, 234, 212, 0.22);
  --ht-border-soft: rgba(226, 232, 240, 0.10);
  --ht-green: #5eead4;
  --ht-green-bright: #99f6e4;
  --ht-green-dim: #14b8a6;
  --ht-text: #e2e8f0;
  --ht-text-bright: #f8fafc;
  --ht-text-muted: #94a3b8;
  --ht-danger: #fb7185;
  --ht-warning: #fbbf24;
  --ht-info: #7dd3fc;
  --ht-purple: #c4b5fd;
  --ht-orange: #fdba74;
  --ht-ink-on-accent: #042f2e;
  --ht-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --ht-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                        */
/* -------------------------------------------------------------------------- */

html,
html.dark {
  color-scheme: dark !important;
  background: var(--ht-bg) !important;
}

html body,
html.dark body {
  background: transparent !important;
  color: var(--ht-text) !important;
  font-family: var(--ht-font) !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow: none !important;
  position: relative !important;
  min-height: 100% !important;
}

/*
 * CRITICAL stacking model (v15):
 * Previously #app { z-index: 1 } created a single stacking context that trapped
 * the fixed sidebar (z-40) and ALL main-column UI. Body-teleported menus
 * (AccountActionMenu) should theoretically sit above that context, but Chromium
 * + sidebar backdrop-filter often still composites the nav over the ⋯ menu.
 *
 * New model: rain/vignette use negative z-index (behind everything). #app does
 * NOT create a z-index stacking context, so sidebar (z-40) and body portals
 * (z-[9999] / 2147483646) compare in the root context — menus win.
 */
#app {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
  background: rgba(5, 5, 5, 0.12) !important;
  color: var(--ht-text) !important;
  font-family: var(--ht-font) !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow: none !important;
  /* do not trap fixed descendants / body teleports */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

/* Code stream canvas — behind all UI (no CSS filter; GPU/battery) */
#ht-code-rain {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;
  background: var(--ht-bg) !important;
  opacity: 0.85 !important;
  filter: none !important;
  will-change: auto !important;
  contain: strict !important;
}

/* Light edge vignette — also behind UI */
html body::after {
  content: "" !important;
  display: block !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(5, 5, 5, 0.55) 100%
  ) !important;
  opacity: 1 !important;
}

html body::before {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #ht-code-rain {
    display: none !important;
  }
  html body,
  #app {
    background: var(--ht-bg) !important;
  }
  html body::after {
    display: none !important;
  }
}

::selection {
  background: rgba(94, 234, 212, 0.35) !important;
  color: var(--ht-ink-on-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* KILL ALL LIGHT / WHITE SURFACES                                             */
/* -------------------------------------------------------------------------- */

/* Any utility that starts with a light wash */
[class*="bg-white"],
[class*="bg-gray-50"],
[class*="bg-gray-100"],
[class*="bg-gray-200"],
[class*="bg-slate-50"],
[class*="bg-slate-100"],
[class*="bg-slate-200"],
[class*="bg-zinc-50"],
[class*="bg-zinc-100"],
[class*="bg-zinc-200"],
[class*="bg-neutral-50"],
[class*="bg-neutral-100"],
[class*="bg-neutral-200"],
[class*="bg-stone-50"],
[class*="bg-stone-100"],
[class*="bg-stone-200"],
[class*="bg-red-50"],
[class*="bg-red-100"],
[class*="bg-orange-50"],
[class*="bg-orange-100"],
[class*="bg-amber-50"],
[class*="bg-amber-100"],
[class*="bg-yellow-50"],
[class*="bg-yellow-100"],
[class*="bg-lime-50"],
[class*="bg-lime-100"],
[class*="bg-green-50"],
[class*="bg-green-100"],
[class*="bg-emerald-50"],
[class*="bg-emerald-100"],
[class*="bg-teal-50"],
[class*="bg-teal-100"],
[class*="bg-cyan-50"],
[class*="bg-cyan-100"],
[class*="bg-sky-50"],
[class*="bg-sky-100"],
[class*="bg-blue-50"],
[class*="bg-blue-100"],
[class*="bg-indigo-50"],
[class*="bg-indigo-100"],
[class*="bg-violet-50"],
[class*="bg-violet-100"],
[class*="bg-purple-50"],
[class*="bg-purple-100"],
[class*="bg-fuchsia-50"],
[class*="bg-fuchsia-100"],
[class*="bg-pink-50"],
[class*="bg-pink-100"],
[class*="bg-rose-50"],
[class*="bg-rose-100"],
[class*="bg-primary-50"],
[class*="bg-primary-100"],
[class*="bg-primary-200"],
/* dark-mode “surface” slates that read as pale panels in this theme */
[class*="bg-dark-50"],
[class*="bg-dark-100"],
[class*="bg-dark-200"],
[class*="bg-dark-700"],
[class*="bg-dark-800"],
[class*="bg-dark-900"],
[class*="bg-dark-950"],
[class*="bg-gray-700"],
[class*="bg-gray-800"],
[class*="bg-gray-900"],
[class*="bg-slate-700"],
[class*="bg-slate-800"],
[class*="bg-slate-900"] {
  background-color: rgba(15, 20, 22, 0.92) !important;
  background-image: none !important;
}

/* Semi-transparent light washes (not modal scrims) */
[class*="bg-white/"],
[class*="bg-gray-"][class*="/"],
[class*="bg-primary-900/"],
[class*="bg-emerald-900/"],
[class*="bg-green-900/"],
[class*="bg-orange-900/"],
[class*="bg-amber-900/"],
[class*="bg-blue-900/"],
[class*="bg-purple-900/"],
[class*="bg-red-900/"],
[class*="bg-yellow-900/"],
[class*="bg-violet-900/"],
[class*="bg-sky-900/"],
[class*="bg-fuchsia-900/"] {
  background-color: rgba(20, 26, 28, 0.75) !important;
  background-image: none !important;
}

/* Modal/drawer scrims ONLY — do NOT match badge chips like bg-black/10
   (that was painting solid black boxes around text labels) */
.fixed.inset-0.bg-black\/40,
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black\/70,
.fixed.inset-0.bg-black\/80,
.modal-overlay,
div.fixed.inset-0[class*="bg-black"] {
  background-color: rgba(0, 0, 0, 0.62) !important;
  background-image: none !important;
}

/* Tiny black/white translucent chips (GroupBadge rate labels etc.) */
.bg-black\/5,
.bg-black\/10,
.bg-black\/20,
.dark\:bg-white\/5,
.dark\:bg-white\/10,
.dark\:bg-white\/20,
[class*="bg-black/5"],
[class*="bg-black/10"],
[class*="bg-black/20"],
[class*="dark:bg-white/5"],
[class*="dark:bg-white/10"],
[class*="dark:bg-white/20"] {
  background-color: rgba(94, 234, 212, 0.12) !important;
  background-image: none !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid rgba(94, 234, 212, 0.2) !important;
}

/* App shell — more transparent so code rain is clearly visible */
aside,
nav,
header,
footer,
main {
  background-color: rgba(10, 12, 13, 0.42) !important;
  background-image: none !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border-soft) !important;
  backdrop-filter: blur(1px);
}

/* Content panels: semi-solid — rain still peeks through slightly.
   IMPORTANT: do NOT paint .table-wrapper / thead / tbody here.
   TablePageLayout stretches .table-scroll-container + .table-wrapper to full
   remaining viewport height; a solid fill turns the empty area under short
   lists (用户管理 / 分组管理 / 账号管理 …) into a visible “half box”. */
.card,
.glass,
.glass-card,
.card-glass,
.stat-card,
.panel,
.modal,
.dropdown,
[role="menu"],
[role="listbox"] {
  background-color: rgba(15, 20, 22, 0.82) !important;
  background-image: none !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border-soft) !important;
}

/* Table scroll shell: keep a light frame, but leave empty height transparent */
.table-scroll-container,
.card.table-scroll-container,
[class*="table-scroll"] {
  background-color: rgba(15, 20, 22, 0.22) !important;
  background-image: none !important;
  border-color: rgba(94, 234, 212, 0.14) !important;
  box-shadow: none !important;
}

/* Scroll body must stay transparent so unused flex height is invisible */
.table-wrapper,
.table-body,
thead,
tbody {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ht-text) !important;
}

/* Only real data rows / header cells get a solid surface */
tbody tr,
.table-wrapper tbody tr {
  background-color: var(--ht-panel) !important;
}
tbody tr:hover,
.table-wrapper tbody tr:hover,
tbody tr:hover > td,
.table-wrapper tbody tr:hover > td {
  background-color: rgba(94, 234, 212, 0.06) !important;
}

/* Sticky columns / headers (hardcoded white/slate in DataTable) */
.sticky-col,
.sticky-header-cell,
.table-header,
.dark .sticky-col,
.dark .sticky-header-cell,
.dark .table-header,
.dark tbody .sticky-col,
tbody .sticky-col,
tbody tr:hover .sticky-col,
.dark tbody tr:hover .sticky-col {
  background-color: var(--ht-panel) !important;
  color: var(--ht-text) !important;
}
tbody tr:hover .sticky-col,
.dark tbody tr:hover .sticky-col {
  background-color: rgba(94, 234, 212, 0.06) !important;
}
th,
.sticky-header-cell,
.table-header th {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-green-bright) !important;
  border-bottom: 1px solid var(--ht-border) !important;
}

/* Virtual spacer rows (height padding) must not paint a solid slab */
tr[aria-hidden="true"],
tr[aria-hidden="true"] > td {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* TEXT — always bright                                                        */
/* -------------------------------------------------------------------------- */

[class*="text-gray"],
[class*="text-slate"],
[class*="text-zinc"],
[class*="text-neutral"],
[class*="text-stone"],
[class*="text-dark-"],
.text-white,
.dark\:text-white {
  color: var(--ht-text) !important;
}

/* Muted but still readable */
[class*="text-gray-400"],
[class*="text-gray-500"],
[class*="text-gray-600"],
[class*="text-dark-400"],
[class*="text-dark-500"],
[class*="text-slate-400"],
[class*="text-slate-500"] {
  color: var(--ht-text-muted) !important;
}

h1, h2, h3, h4, h5, h6,
.font-bold, .font-semibold, .font-medium {
  color: var(--ht-text-bright) !important;
  text-shadow: none !important;
}

p, span, label, li, td, th, div, a, button {
  text-shadow: none !important;
}

a {
  color: var(--ht-green) !important;
}
a:hover {
  color: var(--ht-green-bright) !important;
}

/* Brand text accents — cyan */
[class*="text-primary"],
[class*="text-teal"],
[class*="text-cyan-"] {
  color: var(--ht-green) !important;
}
/* Semantic success text — emerald (option B) */
[class*="text-emerald"],
[class*="text-green-"] {
  color: #34d399 !important;
}
[class*="text-red"] {
  color: var(--ht-danger) !important;
}
[class*="text-amber"],
[class*="text-yellow"],
[class*="text-orange"] {
  color: var(--ht-warning) !important;
}
[class*="text-blue"],
[class*="text-sky"],
[class*="text-cyan"] {
  color: var(--ht-info) !important;
}
[class*="text-purple"],
[class*="text-violet"],
[class*="text-fuchsia"] {
  color: var(--ht-purple) !important;
}

/* -------------------------------------------------------------------------- */
/* BORDERS                                                                     */
/* -------------------------------------------------------------------------- */

[class*="border-gray"],
[class*="border-slate"],
[class*="border-zinc"],
[class*="border-dark"],
[class*="border-white"],
[class*="divide-gray"],
[class*="divide-dark"],
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ht-border-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* FORMS / SELECTS                                                             */
/* -------------------------------------------------------------------------- */

.input,
input,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"] {
  background-color: var(--ht-input) !important;
  color: var(--ht-text-bright) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 2px !important;
  caret-color: var(--ht-green) !important;
}

input::placeholder,
textarea::placeholder,
.input::placeholder {
  color: #8fd9a8 !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus {
  border-color: var(--ht-green-dim) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2) !important;
  outline: none !important;
}

/* Select component (全部平台 / 全部类型) */
.select-trigger,
button.select-trigger,
[class*="select-trigger"] {
  background-color: var(--ht-input) !important;
  color: var(--ht-text-bright) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.select-trigger:hover {
  background-color: var(--ht-panel-2) !important;
  border-color: var(--ht-green-dim) !important;
}
.select-trigger-open {
  border-color: var(--ht-green) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25) !important;
}
.select-value,
.select-icon,
.select-clear,
.select-trigger * {
  color: var(--ht-text-bright) !important;
}

.select-dropdown-portal,
[class*="select-dropdown"] {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-text-bright) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
}
.select-dropdown-portal .select-search {
  background-color: var(--ht-input) !important;
  border-bottom: 1px solid var(--ht-border-soft) !important;
}
.select-dropdown-portal .select-search-input {
  color: var(--ht-text-bright) !important;
  background: transparent !important;
}
.select-dropdown-portal .select-option {
  color: var(--ht-text) !important;
  background: transparent !important;
}
.select-dropdown-portal .select-option:hover,
.select-dropdown-portal .select-option-focused,
.select-dropdown-portal .select-option-selected {
  background-color: rgba(94, 234, 212, 0.16) !important;
  color: var(--ht-text-bright) !important;
}
.select-dropdown-portal .select-option-group {
  background-color: var(--ht-input) !important;
  color: var(--ht-text-muted) !important;
}
.select-dropdown-portal .select-option-label,
.select-dropdown-portal * {
  color: inherit !important;
}

select option {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-text-bright) !important;
}

/* -------------------------------------------------------------------------- */
/* BUTTONS                                                                     */
/* -------------------------------------------------------------------------- */

.btn,
button.btn {
  border-radius: 2px !important;
  font-family: var(--ht-font) !important;
}

.btn-primary,
[class*="bg-primary-500"],
[class*="bg-primary-600"],
[class*="bg-primary-700"],
[class*="from-primary-500"] {
  background-color: var(--ht-green) !important;
  background-image: none !important;
  color: var(--ht-ink-on-accent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-primary *,
[class*="bg-primary-500"] *,
[class*="bg-primary-600"] * {
  color: var(--ht-ink-on-accent) !important;
}
/* Semantic success — emerald (option B), not brand cyan */
.btn-success {
  background-color: #059669 !important;
  background-image: none !important;
  color: #ecfdf5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-success * {
  color: #ecfdf5 !important;
}

.btn-secondary,
.btn-ghost {
  background-color: var(--ht-panel-2) !important;
  color: var(--ht-green) !important;
  border: 1px solid var(--ht-border) !important;
  box-shadow: none !important;
}
.btn-secondary *,
.btn-ghost * {
  color: inherit !important;
}

.btn-danger {
  background-color: #8b1e2d !important;
  color: #ffffff !important;
}
.btn-danger * {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* CAPSULE / PILL / BADGE TAGS — never pale                                    */
/* -------------------------------------------------------------------------- */

.badge,
.badge-primary,
.badge-success,
.badge-warning,
.badge-danger,
.badge-gray,
.badge-purple,
.badge-neutral {
  background-color: var(--ht-panel-2) !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid rgba(226, 232, 240, 0.12) !important;
  text-shadow: none !important;
}
.badge *,
.badge-primary *,
.badge-success *,
.badge-warning *,
.badge-danger * {
  color: inherit !important;
}
.badge-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}
.badge-warning {
  background-color: #3a2e08 !important;
  color: #ffe08a !important;
  border-color: rgba(255, 224, 138, 0.45) !important;
}
.badge-danger {
  background-color: #3a1018 !important;
  color: #ff8a9a !important;
  border-color: rgba(255, 138, 154, 0.45) !important;
}
.badge-gray {
  background-color: #141a1c !important;
  color: #e2e8f0 !important;
}
.badge-purple {
  background-color: #2a1240 !important;
  color: #d2b4ff !important;
  border-color: rgba(210, 180, 255, 0.45) !important;
}

/* Text pills: rounded-full + padding */
[class*="rounded-full"][class*="px-1"],
[class*="rounded-full"][class*="px-1.5"],
[class*="rounded-full"][class*="px-2"],
[class*="rounded-full"][class*="px-2.5"],
[class*="rounded-full"][class*="px-3"] {
  background-color: #141a1c !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
}
[class*="rounded-full"][class*="px-1"] *,
[class*="rounded-full"][class*="px-1.5"] *,
[class*="rounded-full"][class*="px-2"] *,
[class*="rounded-full"][class*="px-2.5"] *,
[class*="rounded-full"][class*="px-3"] * {
  color: inherit !important;
}

/* -------------------------------------------------------------------------- */
/* PLATFORM TYPE BADGES — solid colored chips                                  */
/* -------------------------------------------------------------------------- */

/* Nested inherit */
[class*="bg-orange-"] span,
[class*="bg-amber-"] span,
[class*="bg-emerald-"] span,
[class*="bg-green-"] span,
[class*="bg-blue-"] span,
[class*="bg-sky-"] span,
[class*="bg-purple-"] span,
[class*="bg-violet-"] span,
[class*="bg-fuchsia-"] span,
[class*="bg-zinc-"] span,
[class*="bg-red-"] span,
[class*="bg-yellow-"] span,
[class*="bg-primary-"] span,
[class*="bg-orange-"] svg,
[class*="bg-amber-"] svg,
[class*="bg-emerald-"] svg,
[class*="bg-green-"] svg,
[class*="bg-blue-"] svg,
[class*="bg-sky-"] svg,
[class*="bg-purple-"] svg,
[class*="bg-violet-"] svg,
[class*="bg-fuchsia-"] svg,
[class*="bg-zinc-"] svg,
[class*="bg-red-"] svg,
[class*="bg-yellow-"] svg,
[class*="bg-primary-"] svg {
  color: inherit !important;
}

/* Orange / Anthropic */
[class*="bg-orange-"],
[class*="bg-amber-"] {
  background-color: #3a2208 !important;
  color: #ffb86b !important;
  border: 1px solid rgba(255, 184, 107, 0.35) !important;
}
[class*="text-orange"],
[class*="text-amber"] {
  color: #ffb86b !important;
}

/* Green / OpenAI */
[class*="bg-emerald-"],
[class*="bg-green-"] {
  background-color: #0f1416 !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(110, 231, 183, 0.35) !important;
}
[class*="text-emerald"],
[class*="text-green-"] {
  color: #6ee7b7 !important;
}

/* Blue / Gemini */
[class*="bg-blue-"],
[class*="bg-sky-"],
[class*="bg-cyan-"] {
  background-color: #0a2740 !important;
  color: #8ad4ff !important;
  border: 1px solid rgba(138, 212, 255, 0.35) !important;
}
[class*="text-blue"],
[class*="text-sky"],
[class*="text-cyan"] {
  color: #8ad4ff !important;
}

/* Purple / Antigravity */
[class*="bg-purple-"],
[class*="bg-violet-"],
[class*="bg-fuchsia-"],
[class*="bg-indigo-"] {
  background-color: #2a1240 !important;
  color: #d2b4ff !important;
  border: 1px solid rgba(210, 180, 255, 0.35) !important;
}
[class*="text-purple"],
[class*="text-violet"],
[class*="text-fuchsia"],
[class*="text-indigo"] {
  color: #d2b4ff !important;
}

/* Zinc / Grok */
[class*="bg-zinc-"] {
  background-color: #1a1f24 !important;
  color: #e8eef2 !important;
  border: 1px solid rgba(200, 210, 220, 0.3) !important;
}
[class*="text-zinc"] {
  color: #e8eef2 !important;
}

/* Red */
[class*="bg-red-"] {
  background-color: #3a1018 !important;
  color: #ff8a9a !important;
  border: 1px solid rgba(255, 138, 154, 0.35) !important;
}
[class*="text-red"] {
  color: #ff8a9a !important;
}

/* Yellow */
[class*="bg-yellow-"] {
  background-color: #3a2e08 !important;
  color: #ffe08a !important;
  border: 1px solid rgba(255, 224, 138, 0.35) !important;
}
[class*="text-yellow"] {
  color: #ffe08a !important;
}

/* Primary chips — brand cyan wash */
[class*="bg-primary-"] {
  background-color: rgba(94, 234, 212, 0.12) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
}

/* Solid primary buttons + progress fills (override chip rule) */
.btn-primary,
button.btn-primary,
[class*="bg-primary-500"],
[class*="bg-primary-600"],
[class*="bg-primary-700"] {
  background-color: var(--ht-green) !important;
  background-image: none !important;
  color: var(--ht-ink-on-accent) !important;
  border-color: transparent !important;
}
.btn-primary *,
[class*="bg-primary-500"] *,
[class*="bg-primary-600"] *,
[class*="bg-primary-700"] * {
  color: var(--ht-ink-on-accent) !important;
}
.btn-success,
button.btn-success {
  background-color: #059669 !important;
  background-image: none !important;
  color: #ecfdf5 !important;
  border-color: transparent !important;
}
.btn-success *,
button.btn-success * {
  color: #ecfdf5 !important;
}

/* Progress bar fill segments */
div[class*="h-1"][class*="bg-primary"],
div[class*="h-1.5"][class*="bg-primary"],
div[class*="h-2"][class*="bg-primary"],
div[class*="rounded-full"][class*="bg-primary-5"],
div[class*="rounded-full"][class*="bg-primary-6"] {
  background-color: var(--ht-green) !important;
  background-image: none !important;
  border: none !important;
  color: transparent !important;
}
/* Success / health bars — emerald */
div[class*="rounded-full"][class*="bg-emerald-5"],
div[class*="rounded-full"][class*="bg-green-5"],
div[class*="h-1"][class*="bg-emerald"],
div[class*="h-1.5"][class*="bg-emerald"],
div[class*="h-2"][class*="bg-emerald"],
div[class*="h-1"][class*="bg-green"],
div[class*="h-2"][class*="bg-green"] {
  background-color: #34d399 !important;
  background-image: none !important;
  border: none !important;
  color: transparent !important;
}

/* Solid 500-level status colors that are NOT chips (dots / bars) */
.bg-green-500,
.bg-emerald-500,
.bg-red-500,
.bg-yellow-500,
.bg-amber-500,
.bg-blue-500,
.bg-gray-400,
.bg-gray-500 {
  border: none !important;
}

/* -------------------------------------------------------------------------- */
/* TOGGLE KNOBS / STATUS DOTS / PROGRESS (exceptions)                          */
/* -------------------------------------------------------------------------- */

/* Toggle knobs stay light so they remain visible on green tracks */
.rounded-full.bg-white.shadow,
span.rounded-full.bg-white,
.h-4.w-4.rounded-full.bg-white,
.h-5.w-5.rounded-full.bg-white,
.pointer-events-none.inline-block.h-4.w-4,
.pointer-events-none.inline-block.h-5.w-5 {
  background-color: #e2e8f0 !important;
  color: var(--ht-ink-on-accent) !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* Status dots */
span.inline-block.h-2.w-2.rounded-full,
span.h-2.w-2.rounded-full,
span.h-1\.5.w-1\.5.rounded-full {
  border: none !important;
  padding: 0 !important;
}
span.h-2.w-2.rounded-full[class*="bg-green"],
span.inline-block.h-2.w-2.rounded-full.bg-green-500,
span.h-2.w-2.rounded-full[class*="bg-emerald"] {
  background-color: #34d399 !important; /* semantic success emerald */
}
span.h-2.w-2.rounded-full[class*="bg-yellow"] {
  background-color: #eab308 !important;
}
span.h-2.w-2.rounded-full[class*="bg-red"] {
  background-color: #ef4444 !important;
}
span.h-2.w-2.rounded-full[class*="bg-gray"] {
  background-color: #6b7280 !important;
}

/* Progress tracks */
div.h-1\.5.rounded-full,
div.h-2.rounded-full,
div.h-1.rounded-full,
div.overflow-hidden.rounded-full.bg-gray-200,
[class*="h-1.5"][class*="rounded-full"][class*="bg-"],
[class*="h-2"][class*="rounded-full"][class*="bg-gray"] {
  background-color: #1a1f22 !important;
  border: none !important;
}

/* -------------------------------------------------------------------------- */
/* MENUS / POPOVERS / TELEPORTED                                               */
/* -------------------------------------------------------------------------- */

/* Only solid menus — never force styles on opacity-0 hover tooltips */
body > .select-dropdown-portal,
.select-dropdown-portal,
.date-picker-dropdown,
[role="menu"],
[role="listbox"] {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
}

/* Hover tooltips (shown via group-hover:opacity-100) get dark solid surface when visible */
.group:hover .opacity-0.group-hover\:opacity-100,
.group:hover .group-hover\:opacity-100,
.group\/ex:hover .opacity-0,
.group\/pub:hover .opacity-0,
.group\/usage:hover .opacity-0,
.group\/error:hover .opacity-0,
.group\/endpoint:hover .opacity-0 {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
}

/* Pagination */
nav button,
nav a,
nav span {
  background-color: var(--ht-panel) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border-soft) !important;
}

/* Code blocks only — never paint background on .font-mono spans (capacity numbers etc.) */
code,
pre {
  background-color: var(--ht-input) !important;
  color: var(--ht-green) !important;
  border-color: var(--ht-border-soft) !important;
}
.font-mono {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
/* Real code chips may still use font-mono on code elements */
code.font-mono,
pre.font-mono {
  background-color: var(--ht-input) !important;
  color: var(--ht-green) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 234, 212, 0.35) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(94, 234, 212, 0.35);
  border-radius: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Soften washed-out decorative opacity — never touch opacity-0 (hover tooltips) */
.opacity-40:not(.opacity-0),
.opacity-50:not(.opacity-0),
.opacity-60:not(.opacity-0) {
  opacity: 0.85 !important;
}
:disabled,
.disabled\:opacity-50:disabled {
  opacity: 0.55 !important;
}

/* -------------------------------------------------------------------------- */
/* HOVER TOOLTIPS — restore opacity-0 until group-hover / focus                */
/* -------------------------------------------------------------------------- */

/* Base hidden state must win over any earlier color rules */
.opacity-0 {
  opacity: 0 !important;
}

/* Keep invisible/hidden utilities working */
.invisible {
  visibility: hidden !important;
}
.hidden {
  display: none !important;
}

/* Responsive display utilities must still beat the blanket `.hidden !important`
   above, otherwise Tailwind's `hidden sm:flex` pattern collapses (the account
   list pagination uses exactly that for its desktop bar). Declared AFTER
   `.hidden` so equal-specificity !important rules win by source order. */
@media (min-width: 640px) {
  .sm\:flex { display: flex !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:block { display: block !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:inline { display: inline !important; }
  .sm\:grid { display: grid !important; }
  .sm\:table { display: table !important; }
  .sm\:hidden { display: none !important; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:block { display: block !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:inline { display: inline !important; }
  .md\:grid { display: grid !important; }
  .md\:table { display: table !important; }
  .md\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:block { display: block !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:inline { display: inline !important; }
  .lg\:grid { display: grid !important; }
  .lg\:table { display: table !important; }
  .lg\:hidden { display: none !important; }
}

/* When parent .group is hovered, show standard group-hover:opacity-100 tooltips */
.group:hover .group-hover\:opacity-100,
.group:focus-within .group-hover\:opacity-100,
.group:hover .opacity-0.group-hover\:opacity-100,
.group:focus-within .opacity-0.group-hover\:opacity-100 {
  opacity: 1 !important;
}

/* Named group variants: group/ex, group/pub, group/usage, group/error, group/endpoint, group/img, group/dropdown */
.group\/ex:hover .group-hover\/ex\:opacity-100,
.group\/pub:hover .group-hover\/pub\:opacity-100,
.group\/usage:hover .group-hover\/usage\:opacity-100,
.group\/error:hover .group-hover\/error\:opacity-100,
.group\/endpoint:hover .group-hover\/endpoint\:opacity-100,
.group\/img:hover .group-hover\/img\:opacity-100,
.group\/dropdown:hover .group-hover\/dropdown\:opacity-100,
.group\/ex:hover .opacity-0,
.group\/pub:hover .opacity-0,
.group\/usage:hover .opacity-0,
.group\/error:hover .opacity-0,
.group\/endpoint:hover .opacity-0,
.group\/img:hover .opacity-0,
.group\/dropdown:hover .opacity-0 {
  opacity: 1 !important;
}

/* group-hover:visible */
.group:hover .group-hover\:visible,
.group\/error:hover .group-hover\/error\:visible {
  visibility: visible !important;
}

/* group-hover:block (AppHeader subscription popover) */
.group:hover .group-hover\:block {
  display: block !important;
}

/* pointer-events restore on hover tooltips */
.group:hover .group-hover\:pointer-events-auto,
.group\/endpoint:hover .group-hover\/endpoint\:pointer-events-auto,
.group\/endpoint:focus-within .group-hover\/endpoint\:pointer-events-auto {
  pointer-events: auto !important;
}

/* HelpTooltip / SupportedModelChip (role=tooltip + Teleport + fixed top/left).
   Surface colors only — NEVER override inset/top/left/width/display/transform.
   Components position via inline style; stylesheet !important would win over them
   and park the popover at body static position (off-screen / below the fold). */
[role="tooltip"] {
  background-color: var(--ht-elevated) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  /* above #app { z-index: 1 } stacking context for body-level teleports */
  z-index: 99999 !important;
}

/* Do NOT force background/visibility on all absolute z-50 (many are hover tips).
   Override the earlier broad z-50 surface rule for opacity-0 tips. */
.opacity-0.absolute,
.opacity-0[class*="absolute"],
.pointer-events-none.absolute.opacity-0,
.invisible.absolute {
  /* keep them out of the way when hidden */
  pointer-events: none !important;
}


/* Rounded corners → terminal-ish */
.rounded-2xl,
.rounded-xl,
.rounded-3xl {
  border-radius: 4px !important;
}

/* ==========================================================================
   DATE RANGE PICKER — scoped classes, not Tailwind utilities on the element
   ========================================================================== */

.date-picker-trigger,
button.date-picker-trigger,
[class*="date-picker-trigger"] {
  background-color: var(--ht-input) !important;
  background-image: none !important;
  color: var(--ht-text) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.date-picker-trigger:hover,
button.date-picker-trigger:hover {
  background-color: var(--ht-panel-2) !important;
  border-color: var(--ht-green-dim) !important;
}
.date-picker-trigger-open,
.date-picker-trigger.date-picker-trigger-open {
  border-color: var(--ht-green) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25) !important;
}

.date-picker-icon,
.date-picker-chevron,
.date-picker-value,
.date-picker-trigger * {
  color: var(--ht-text) !important;
}

.date-picker-dropdown,
[class*="date-picker-dropdown"] {
  background-color: var(--ht-elevated) !important;
  background-image: none !important;
  color: var(--ht-text) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75) !important;
}

.date-picker-presets,
.date-picker-custom,
.date-picker-actions,
.date-picker-field,
.date-picker-separator {
  background-color: transparent !important;
  color: var(--ht-text) !important;
}

.date-picker-preset {
  background-color: var(--ht-panel) !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid var(--ht-border-soft) !important;
  border-radius: 2px !important;
}
.date-picker-preset:hover {
  background-color: rgba(94, 234, 212, 0.06) !important;
  color: #ffffff !important;
}
.date-picker-preset-active,
.date-picker-preset.date-picker-preset-active {
  background-color: #141a1c !important;
  color: var(--ht-green-bright) !important;
  border-color: var(--ht-green) !important;
}

.date-picker-divider {
  border-color: var(--ht-border-soft) !important;
  background: transparent !important;
}

.date-picker-label {
  color: var(--ht-text-muted) !important;
}

.date-picker-input,
input.date-picker-input {
  background-color: var(--ht-input) !important;
  color: #ffffff !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 2px !important;
  color-scheme: dark !important;
}
.date-picker-input:focus,
input.date-picker-input:focus {
  border-color: var(--ht-green) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2) !important;
  outline: none !important;
}

/* Native calendar icon on date inputs */
.date-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.4) saturate(2) hue-rotate(130deg) !important; /* cyan-ish */
  cursor: pointer !important;
}

.date-picker-apply,
button.date-picker-apply {
  background-color: var(--ht-green-dim) !important;
  background-image: none !important;
  color: var(--ht-ink-on-accent) !important;
  border: none !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
}
.date-picker-apply:hover,
button.date-picker-apply:hover {
  filter: brightness(1.08) !important;
  color: var(--ht-ink-on-accent) !important;
}

/* If native date popup is system-themed, at least field stays dark */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  background-color: var(--ht-input) !important;
  color: #ffffff !important;
  border: 1px solid var(--ht-border) !important;
  color-scheme: dark !important;
}

/* ==========================================================================
   SIDEBAR — terminal panel, fits code-stream theme
   ========================================================================== */

aside.sidebar,
.sidebar {
  background:
    linear-gradient(180deg, rgba(15, 20, 22, 0.72) 0%, rgba(8, 10, 11, 0.88) 40%, rgba(6, 7, 8, 0.92) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(94, 234, 212, 0.015) 2px,
      rgba(94, 234, 212, 0.015) 3px
    ) !important;
  /* more opaque — compensates for dropping backdrop-filter (stacking bug) */
  background-color: rgba(8, 9, 10, 0.92) !important;
  border-right: 1px solid rgba(94, 234, 212, 0.28) !important;
  box-shadow:
    inset -1px 0 0 rgba(94, 234, 212, 0.06),
    8px 0 32px rgba(0, 0, 0, 0.45) !important;
  /*
   * NO backdrop-filter: Chromium often composites filtered layers above
   * higher-z fixed body portals (AccountActionMenu), so ⋯ appears under nav.
   */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ht-text-muted) !important;
}

/*
 * Stacking contract (v20):
 *
 * VersionBadge dropdown is position:absolute inside .sidebar-header (NOT
 * teleported). It must paint over the main column when it expands rightward.
 * App default: .sidebar { fixed; z-40 }. Keep that.
 *
 * Inside the sidebar only (v12):
 *   .sidebar-header { z-index: 30 }  above  .sidebar-nav { z-index: 1 }
 */
aside.sidebar,
.sidebar {
  z-index: 40 !important;
  /* allow VersionBadge panel to overflow the sidebar box into the main area */
  overflow: visible !important;
  /*
   * NO backdrop-filter: Chromium often composites filtered layers above
   * higher-z fixed body portals.
   */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Main column must NOT create a stacking context above the sidebar */
#app > .min-h-screen > .relative.min-h-screen,
#app > div.min-h-screen > div.relative.min-h-screen,
#app .min-h-screen > div.relative[class*="ml-"],
#app .min-h-screen > div.relative[class*="lg:ml-"] {
  z-index: auto !important;
}

/* Decorative full-screen mesh under app chrome — never compete with portals */
#app .pointer-events-none.fixed.inset-0,
#app .fixed.inset-0.pointer-events-none,
#app .bg-mesh-gradient {
  z-index: 0 !important;
}

/* Left edge terminal accent bar */
aside.sidebar::before,
.sidebar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(
    180deg,
    rgba(94, 234, 212, 0.15) 0%,
    rgba(94, 234, 212, 0.85) 30%,
    rgba(94, 234, 212, 0.9) 70%,
    rgba(94, 234, 212, 0.15) 100%
  ) !important;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.45) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Soft top highlight */
aside.sidebar::after,
.sidebar::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 64px !important;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.08), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sidebar-header {
  background: rgba(10, 12, 13, 0.45) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.2) !important;
  /* Above .sidebar-nav: VersionBadge dropdown is absolute inside header.
     Equal z-index with later nav sibling paints the menu over the popup. */
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
  /* brand max-width must not clip the absolute version panel */
  flex-shrink: 0 !important;
}

/* VersionBadge root + brand wrappers — keep overflow open for the panel */
.sidebar-header .sidebar-brand,
.sidebar-header .relative {
  position: relative !important;
  z-index: 31 !important;
  overflow: visible !important;
}

/* VersionBadge dropdown (absolute left-0 z-50 mt-2 under header) */
.sidebar-header .absolute.z-50,
.sidebar-header .absolute[class*="z-50"],
.sidebar-header .absolute.mt-2,
.sidebar-header .absolute.left-0.mt-2 {
  z-index: 60 !important;
  /* Panel surface (VersionBadge uses white/dark-800 by default) */
  background-color: rgba(10, 12, 13, 0.98) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(94, 234, 212, 0.08) !important;
  color: #e2e8f0 !important;
  /* ensure the panel is a discrete layer above sticky header bleed */
  isolation: isolate !important;
  pointer-events: auto !important;
}

.sidebar-brand-title,
.sidebar-header a,
.sidebar-header span {
  color: #e2e8f0 !important;
  text-shadow: 0 0 10px rgba(94, 234, 212, 0.25) !important;
  font-family: var(--ht-font-mono) !important;
}

.sidebar-logo {
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
  box-shadow: 0 0 14px rgba(94, 234, 212, 0.25) !important;
  background: rgba(15, 20, 22, 0.6) !important;
  border-radius: 4px !important;
}

.sidebar-nav {
  /* Must stay BELOW .sidebar-header so version check popup is clickable */
  position: relative !important;
  z-index: 1 !important;
}

.sidebar-section-title,
.sidebar-section-title-text {
  color: var(--ht-green) !important;
  letter-spacing: 0.12em !important;
  font-family: var(--ht-font-mono) !important;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.2) !important;
}

.dark .sidebar-section-title::after,
.sidebar-section-title::after {
  background: rgba(94, 234, 212, 0.25) !important;
}

/* Nav links — terminal rows */
.sidebar-link {
  color: #b8ffce !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  font-family: var(--ht-font) !important;
}

.sidebar-link:hover {
  background: rgba(94, 234, 212, 0.1) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 12px rgba(94, 234, 212, 0.06) !important;
}

.sidebar-link-active,
.sidebar-link.sidebar-link-active {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.22), rgba(94, 234, 212, 0.06)) !important;
  border-color: rgba(94, 234, 212, 0.4) !important;
  color: var(--ht-green-bright) !important;
  box-shadow:
    inset 3px 0 0 #00ff66,
    0 0 16px rgba(94, 234, 212, 0.12) !important;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.35) !important;
}

.sidebar-link-active:hover {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.28), rgba(94, 234, 212, 0.1)) !important;
  color: #e2e8f0 !important;
}

.sidebar-label,
.sidebar-link span {
  color: inherit !important;
}

/* Icons in sidebar */
.sidebar-link svg,
.sidebar-svg-icon {
  color: var(--ht-green) !important;
  filter: drop-shadow(0 0 3px rgba(94, 234, 212, 0.35));
}

.sidebar-link-active svg,
.sidebar-link-active .sidebar-svg-icon {
  color: var(--ht-green-bright) !important;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.55));
}

/* Nested group children border */
.sidebar .border-l,
.sidebar .ml-4.border-l {
  border-left-color: rgba(94, 234, 212, 0.25) !important;
}

/* Footer area / collapse controls inside sidebar */
.sidebar > div:last-child,
.sidebar .mt-auto {
  border-top: 1px solid rgba(94, 234, 212, 0.15) !important;
  background: rgba(5, 5, 5, 0.35) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   DEEP WHITE KILL v18 — exhaustive pass after full codebase scan
   Covers utilities, hover/focus, scoped components, hardcoded #fff surfaces
   ========================================================================== */

/* ---- Core light utilities (all variants) ---- */
.bg-white,
.bg-white\/5,
.bg-white\/10,
.bg-white\/20,
.bg-white\/30,
.bg-white\/40,
.bg-white\/50,
.bg-white\/60,
.bg-white\/70,
.bg-white\/80,
.bg-white\/85,
.bg-white\/90,
.bg-white\/95,
.hover\:bg-white:hover,
.focus\:bg-white:focus,
.focus\:bg-white:focus-visible,
.after\:bg-white:after,
.before\:bg-white:before,
.dark\:bg-white,
.dark\:hover\:bg-white:hover,
[class*="bg-white"],
[class*="hover:bg-white"],
[class*="focus:bg-white"],
[class*="from-white"],
[class*="to-white"],
[class*="via-white"] {
  background-color: rgba(15, 20, 22, 0.92) !important;
  background-image: none !important;
}

/* Tailwind gray / slate / zinc light scales */
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200,
.bg-zinc-50,
.bg-zinc-100,
.bg-zinc-200,
.bg-neutral-50,
.bg-neutral-100,
.bg-stone-50,
.bg-stone-100,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover,
.focus\:bg-gray-50:focus,
.focus\:bg-white:focus,
.dark\:hover\:bg-gray-700:hover,
[class*="bg-gray-50"],
[class*="bg-gray-100"],
[class*="bg-gray-200"],
[class*="bg-slate-50"],
[class*="bg-slate-100"],
[class*="bg-zinc-50"],
[class*="bg-zinc-100"],
[class*="hover:bg-gray-50"],
[class*="hover:bg-gray-100"],
[class*="hover:bg-slate"] {
  background-color: rgba(15, 20, 22, 0.88) !important;
  background-image: none !important;
}

/* Dark-mode surface classes that still look pale under our palette */
.dark\:bg-dark-700,
.dark\:bg-dark-800,
.dark\:bg-dark-900,
.dark\:bg-dark-950,
.dark\:bg-gray-700,
.dark\:bg-gray-800,
.dark\:bg-gray-900,
.dark\:bg-slate-700,
.dark\:bg-slate-800,
.dark\:bg-slate-900,
[class*="dark:bg-dark-"],
[class*="dark:bg-gray-"],
[class*="dark:bg-slate-"] {
  background-color: rgba(15, 20, 22, 0.9) !important;
  background-image: none !important;
}

/* Design-system components from style.css */
.btn-secondary,
.btn-secondary:hover,
.btn-ghost:hover,
.input,
.input:disabled,
.card,
.card-header,
.card-body,
.card-footer,
.stat-card,
.glass,
.glass-card,
.card-glass,
.dropdown,
.dropdown-item:hover,
.modal,
.modal-content,
.modal-backdrop + *,
.toast,
.toast-info,
.tab-active,
.tabs,
.code,
.page-header,
.table-container,
.table th,
.table td,
.badge-gray {
  background-color: rgba(15, 20, 22, 0.92) !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.18) !important;
}

.btn-secondary,
.btn-ghost {
  color: #6ee7b7 !important;
}

/* ---- Scoped component classes found in production CSS chunks ---- */
/* Settings */
.settings-tabs-shell,
.settings-tab-active,
.settings-tab,
[class*="settings-tab"] {
  background-color: rgba(15, 20, 22, 0.92) !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.25) !important;
}
.settings-tab-active {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.18), rgba(94, 234, 212, 0.06)) !important;
  color: var(--ht-green-bright) !important;
  border-color: rgba(94, 234, 212, 0.4) !important;
}

/* Custom page / TOC */
.toc-toggle-btn,
.copy-btn,
.copy-btn:hover,
.toc-item,
.toc-item:hover,
[class*="toc-"] {
  background-color: rgba(15, 20, 22, 0.9) !important;
  color: var(--ht-text-muted) !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
}

/* Proxy selector (scoped select clone) */
.proxy-selector .select-trigger,
.proxy-selector .select-dropdown,
[class*="proxy"] .select-trigger,
[class*="proxy"] .select-dropdown {
  background-color: var(--ht-input) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
}

/* Table page layout — see earlier block for transparent empty-height rules.
   Only restate sticky/header surfaces here (not the full-height wrapper). */
.table-wrapper .table-header,
.table-wrapper .sticky-header-cell,
.table-wrapper tbody .sticky-col,
tbody .sticky-col,
.dark tbody .sticky-col,
.dark .table-wrapper .table-header,
.dark .sticky-header-cell {
  background-color: rgba(15, 20, 22, 0.95) !important;
  color: #e2e8f0 !important;
}

/* Pagination bar under lists: strip the second “orphan panel” look */
.table-page-layout .layout-section-fixed > div,
.table-page-layout .layout-section-fixed > nav,
.table-page-layout .layout-section-fixed [class*="border-t"] {
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(94, 234, 212, 0.12) !important;
  box-shadow: none !important;
}

/*
 * Onboarding / driver.js popovers (「欢迎使用 Sub2API」引导)
 *
 * SPA onboarding.css ships light shell (#fff) + light footer (#f9fafb) and
 * loads AFTER this overlay link, so equal-specificity !important rules lose.
 * Prefix with html.dark (nginx injects class="dark") for higher specificity.
 * Do NOT paint `.driver-popover *` — that made nested black boxes in the
 * footer while the outer shell stayed white.
 */
html.dark .driver-popover.theme-tour-popover,
html.dark .driver-popover.theme-tour-popover.driver-popover,
html.dark body .driver-popover.theme-tour-popover {
  background-color: var(--ht-elevated) !important;
  background-image: none !important;
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
  color: #e2e8f0 !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(94, 234, 212, 0.12),
    0 0 24px rgba(94, 234, 212, 0.08) !important;
}

html.dark .theme-tour-popover .driver-popover-title,
html.dark .theme-tour-popover .driver-popover-title-text,
html.dark .driver-popover-title-text {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

html.dark .theme-tour-popover .driver-popover-description,
html.dark .theme-tour-popover .driver-popover-description p,
html.dark .theme-tour-popover .driver-popover-description li,
html.dark .theme-tour-popover .driver-popover-description b,
html.dark .theme-tour-popover .driver-popover-description span {
  background-color: transparent !important;
  color: var(--ht-text-muted) !important;
}

html.dark .theme-tour-popover .driver-popover-description-hint,
html.dark .theme-tour-popover .driver-popover-description-hint * {
  background-color: transparent !important;
  color: #7dffb0 !important;
}

html.dark .theme-tour-popover .driver-popover-close-btn {
  background-color: transparent !important;
  color: #7dffb0 !important;
  border: none !important;
}
html.dark .theme-tour-popover .driver-popover-close-btn:hover {
  background-color: rgba(94, 234, 212, 0.12) !important;
  color: #e2e8f0 !important;
}

/* Footer strip — one surface, no nested black plates */
html.dark .theme-tour-popover .driver-popover-footer,
html.dark .theme-tour-popover .driver-popover-footer.reorganized {
  background-color: var(--ht-panel) !important;
  border-top: 1px solid rgba(94, 234, 212, 0.18) !important;
  color: var(--ht-text-muted) !important;
}

html.dark .theme-tour-popover .footer-left,
html.dark .theme-tour-popover .footer-right,
html.dark .theme-tour-popover .footer-shortcuts,
html.dark .theme-tour-popover .shortcut-item {
  background-color: transparent !important;
  color: var(--ht-green-bright) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
}

html.dark .theme-tour-popover .footer-shortcuts {
  border-left: 1px solid rgba(94, 234, 212, 0.22) !important;
}

html.dark .theme-tour-popover .driver-popover-progress-text {
  background-color: transparent !important;
  color: #7dffb0 !important;
}

html.dark .theme-tour-popover .shortcut-item kbd,
html.dark .theme-tour-popover kbd {
  background-color: var(--ht-panel-2) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  box-shadow: none !important;
}

html.dark .theme-tour-popover button,
html.dark .theme-tour-popover .driver-popover-prev-btn,
html.dark .theme-tour-popover .driver-popover-prev-btn:hover {
  background-color: var(--ht-panel-2) !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  box-shadow: none !important;
}

html.dark .theme-tour-popover .driver-popover-next-btn,
html.dark .theme-tour-popover .driver-popover-done-btn,
html.dark .theme-tour-popover .driver-popover-next-btn:hover,
html.dark .theme-tour-popover .driver-popover-done-btn:hover {
  background-color: #141a1c !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(93, 255, 154, 0.55) !important;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.15) !important;
}

/* Arrow tip must match panel, not leftover white from onboarding.css */
html.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow,
html.dark .theme-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: var(--ht-elevated) !important;
}
html.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow,
html.dark .theme-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: var(--ht-elevated) !important;
}
html.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow,
html.dark .theme-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: var(--ht-elevated) !important;
}
html.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow,
html.dark .theme-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: var(--ht-elevated) !important;
}

/* Highlight ring around the guided element */
html.dark .driver-active-element {
  outline-color: rgba(93, 255, 154, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25) !important;
}

/* App header kbd chips */
.shortcut-item kbd,
kbd {
  background-color: var(--ht-panel-2) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
}

/* Header bar */
header,
.page-header,
[class*="AppHeader"],
.sticky.top-0 {
  background-color: rgba(10, 12, 13, 0.82) !important;
  border-color: rgba(94, 234, 212, 0.15) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(8px);
}

/*
 * AccountActionMenu / UsersView ⋯ — SURFACE + z-index ONLY.
 * Component owns: position:fixed, top/left (inline). Never set inset/top/left/
 * transform/margin here (v16 bug: inset:auto !important pinned menu under nav).
 * Teleported to body; z-99999 beats sidebar z-40.
 */
.action-menu-content,
[class*="action-menu-content"],
.batch-prompt-popover {
  background-color: rgba(10, 12, 13, 0.98) !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(94, 234, 212, 0.12) !important;
  z-index: 99999 !important;
}
/* AccountActionMenu full-screen click-catcher (sibling under panel) */
.fixed.inset-0.z-\[9998\] {
  z-index: 99998 !important;
}
/* Do NOT target all .fixed.z-* — breaks JS-positioned popovers/menus */

/* Announcement / dialog shells */
[class*="rounded-3xl"][class*="shadow-2xl"],
[class*="rounded-xl"][class*="shadow-lg"][class*="ring-1"],
[class*="rounded-2xl"][class*="border"][class*="bg-white"],
.ring-1.ring-black\/5,
.ring-1.ring-black\/5.bg-white {
  background-color: rgba(10, 12, 13, 0.96) !important;
  color: #e2e8f0 !important;
}

/* Charts / empty panels / skeleton */
[class*="skeleton"],
[class*="Skeleton"],
.animate-pulse {
  background-color: rgba(15, 20, 22, 0.35) !important;
}

/* Model whitelist / multi select panels */
[class*="whitelist"],
[class*="Whitelist"],
[class*="ModelWhitelist"] {
  background-color: rgba(15, 20, 22, 0.92) !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
}

/* Pagination */
.pagination,
nav[aria-label*="age" i],
nav[aria-label*="Pagination" i] {
  background-color: transparent !important;
}
/* v27: no bare .relative.inline-flex.items-center here — it also matched the
   HelpTooltip trigger wrapper (channel-monitor 「正常」 pill) and painted a
   black plate behind rounded badges. Mobile pagination buttons carry
   bg-white/border-gray-300 and are already restyled by the kill rules. */
nav button,
nav a.relative {
  background-color: rgba(15, 20, 22, 0.9) !important;
  color: var(--ht-text-muted) !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
}

/* Inputs that force white on focus (GroupsView pattern) */
.input.focus\:bg-white:focus,
.input:focus,
input:focus,
textarea:focus,
select:focus,
.focus\:bg-white:focus,
.dark\:focus\:bg-dark-900:focus {
  background-color: var(--ht-input) !important;
  color: #ffffff !important;
}

/* Progress tracks that used bg-white */
.h-1\.5.bg-white,
.h-1\.5.overflow-hidden.rounded-full.bg-white,
div.mt-3.h-1\.5.overflow-hidden.rounded-full {
  background-color: #1a1f22 !important;
}

/* Ring accents that flash white */
.ring-white,
.ring-white\/10,
.ring-white\/70,
.dark\:ring-white\/10,
[class*="ring-white"] {
  --tw-ring-color: rgba(94, 234, 212, 0.25) !important;
}

/* Gradients from light gray to white */
.from-gray-50,
.to-white,
.from-white,
.via-white,
[class*="from-gray-50"],
[class*="to-white"],
[class*="from-white"] {
  --tw-gradient-from: rgba(15, 20, 22, 0.95) !important;
  --tw-gradient-to: rgba(10, 12, 13, 0.95) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  background-color: rgba(15, 20, 22, 0.92) !important;
}

/* Home / marketing cards often pure white in light utilities */
.min-h-screen.bg-gray-50,
.bg-gray-50.min-h-screen,
.min-h-screen {
  background-color: transparent !important;
}

/* removed layout-breaking dialog panel rule */


/* Toggle track residual light */
.bg-gray-200.peer,
.peer.bg-gray-200,
input:checked + * {
  /* leave checked green tracks alone */
}

/* Ensure text on forced surfaces is readable */
.card *,
.modal-content *,
.dropdown *,
.toast *,
.action-menu-content *,
.settings-tabs-shell * {
  border-color: rgba(94, 234, 212, 0.12);
}

/* Exception: toggle knobs stay light */
.rounded-full.bg-white.shadow,
span.rounded-full.bg-white,
.h-4.w-4.rounded-full.bg-white,
.h-5.w-5.rounded-full.bg-white,
.pointer-events-none.inline-block.h-4.w-4,
.pointer-events-none.inline-block.h-5.w-5,
.after\:bg-white:after {
  /* after:bg-white is often toggle knob pseudo — keep pale green-white */
  background-color: #e2e8f0 !important;
  color: var(--ht-ink-on-accent) !important;
  border: none !important;
}

/* Re-assert toggle after-element knobs for peer switches */
.peer:checked ~ .peer-checked\:after\:bg-white:after,
.peer::after {
  /* no-op safety */
}

/* Charts tooltips / legend often white */
.chartjs-tooltip,
[class*="chart"] [class*="tooltip"] {
  background-color: var(--ht-elevated) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
}

/* removed layout-breaking dialog panel rule */


/* Legal / docs surfaces */
.legal-document-content,
.prose,
.prose * {
  color: #d4ffe4 !important;
}
.prose pre,
.prose code {
  background-color: var(--ht-input) !important;
  color: #6ee7b7 !important;
}

/* ==========================================================================
   ICON WRAPPERS — white/pale icon circles & squares → terminal chips
   ========================================================================== */

/* Common avatar / icon box sizes used across the app */
.flex.h-4.w-4.items-center.justify-center,
.flex.h-5.w-5.items-center.justify-center,
.flex.h-6.w-6.items-center.justify-center,
.flex.h-7.w-7.items-center.justify-center,
.flex.h-8.w-8.items-center.justify-center,
.flex.h-9.w-9.items-center.justify-center,
.flex.h-10.w-10.items-center.justify-center,
.flex.h-12.w-12.items-center.justify-center,
.flex.h-14.w-14.items-center.justify-center,
.flex.h-16.w-16.items-center.justify-center,
.flex.h-20.w-20.items-center.justify-center,
.inline-flex.h-5.w-5.items-center.justify-center,
.inline-flex.h-6.w-6.items-center.justify-center,
.inline-flex.h-8.w-8.items-center.justify-center,
.inline-flex.h-9.w-9.items-center.justify-center,
.inline-flex.h-10.w-10.items-center.justify-center,
.inline-flex.h-12.w-12.items-center.justify-center,
.inline-flex.h-16.w-16.items-center.justify-center,
/* partial class order variations */
[class*="h-8"][class*="w-8"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-9"][class*="w-9"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-10"][class*="w-10"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-12"][class*="w-12"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-14"][class*="w-14"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-16"][class*="w-16"][class*="items-center"][class*="justify-center"][class*="rounded"],
[class*="h-20"][class*="w-20"][class*="items-center"][class*="justify-center"][class*="rounded"] {
  background-color: rgba(15, 20, 22, 0.85) !important;
  background-image: none !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
  color: var(--ht-green-bright) !important;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.12) !important;
}

/* stat-icon family */
.stat-icon,
.stat-icon-primary,
.stat-icon-success,
.stat-icon-warning,
.stat-icon-danger {
  background-color: rgba(15, 20, 22, 0.95) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.12) !important;
}
.stat-icon-warning {
  background-color: rgba(58, 46, 8, 0.9) !important;
  color: #ffe08a !important;
  border-color: rgba(255, 224, 138, 0.35) !important;
}
.stat-icon-danger {
  background-color: rgba(58, 16, 24, 0.9) !important;
  color: #ff8a9a !important;
  border-color: rgba(255, 138, 154, 0.35) !important;
}

/* Primary/gray pale icon chips that still look white */
[class*="rounded-full"][class*="bg-primary"],
[class*="rounded-xl"][class*="bg-primary"],
[class*="rounded-2xl"][class*="bg-primary"],
[class*="rounded-lg"][class*="bg-primary"],
[class*="rounded-md"][class*="bg-primary"],
[class*="rounded-full"][class*="bg-gray"],
[class*="rounded-xl"][class*="bg-gray"],
[class*="rounded-2xl"][class*="bg-gray"],
[class*="rounded-lg"][class*="bg-gray"],
[class*="rounded-md"][class*="bg-gray"],
[class*="rounded-full"][class*="bg-white"],
[class*="rounded-xl"][class*="bg-white"],
[class*="rounded-2xl"][class*="bg-white"],
[class*="rounded-lg"][class*="bg-white"] {
  background-color: rgba(15, 20, 22, 0.95) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
}

/* Empty state big icons */
.mb-5.flex.h-20.w-20,
.mb-4.flex.h-16.w-16,
.mb-4.inline-flex.h-16.w-16 {
  background-color: rgba(15, 20, 22, 0.85) !important;
  border: 1px solid rgba(94, 234, 212, 0.25) !important;
  color: #6ee7b7 !important;
}

/* SVG icons: force light green for black logos (OpenAI mono etc.) */
svg.model-icon path[fill="#000"],
svg.model-icon path[fill="#000000"],
svg.model-icon path[fill="black"],
.model-icon path[fill="#000"],
.model-icon path[fill="#000000"] {
  fill: var(--ht-green-bright) !important;
}

/* SVG white fills that read as white blobs on dark */
svg [fill="#fff"],
svg [fill="#ffffff"],
svg [fill="#FFF"],
svg [fill="#FFFFFF"],
svg [fill="white"],
svg [fill="White"] {
  fill: #141a1c !important;
}

/* Prefer currentColor for monochrome icons in dark UI */
.sidebar svg,
.sidebar-link svg,
button svg,
.icon-button svg,
[class*="icon"] > svg {
  color: inherit;
}

/* Icon buttons */
.icon-button,
button.icon-button,
[class*="icon-button"] {
  background-color: rgba(15, 20, 22, 0.92) !important;
  border: 1px solid rgba(94, 234, 212, 0.25) !important;
  color: var(--ht-green-bright) !important;
}

/* Header action icon buttons */
header button,
header .rounded-lg,
header .rounded-xl {
  /* don't blanket — only when looking like icon chips */
}

header button.flex.h-8.w-8,
header button.flex.h-9.w-9,
header .flex.h-8.w-8.items-center.justify-center,
header .flex.h-9.w-9.items-center.justify-center {
  background-color: rgba(15, 20, 22, 0.92) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.25) !important;
}

/* model-icon fallback letter chip */
.model-icon-fallback {
  background-color: rgba(15, 20, 22, 0.95) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

/* Uploaded / img logos sitting on white — NOT country flags */
.sidebar-logo,
.sidebar-logo img,
img[class*="logo"]:not([src*="flag"]),
.brand img {
  background-color: rgba(10, 12, 13, 0.7) !important;
  border-radius: 4px !important;
}

/* Soften pure white img backgrounds — exclude flags */
img.rounded-full:not([src*="flag"]),
img.rounded-xl:not([src*="flag"]),
img.rounded-lg:not([src*="flag"]) {
  background-color: rgba(15, 20, 22, 0.9) !important;
}

/*
 * Country flags — ProxiesView uses:
 *   <img class="h-4 w-6 rounded-sm" src="…/flag-icons/flags/4x3/xx.svg">
 * Global dark-surface rules + color-scheme:dark make transparent flag SVGs
 * sit on a black/near-black plate. Keep flags natural.
 */
img[src*="flag-icons"],
img[src*="/flags/4x3/"],
img[src*="/flags/1x1/"],
img[src*="flagcdn"],
img[src*="countryflags"],
img.h-4.w-6,
img.h-4.w-6.rounded-sm,
img.rounded-sm[class*="h-4"],
img.rounded-sm[class*="w-6"],
td img.h-4,
td img[class*="h-4"][class*="w-6"],
.table-wrapper img.h-4,
.table-wrapper img[src*="flag"],
.table-wrapper img[src*="/flags/"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  /* prevent dark color-scheme from tinting embedded SVG decode */
  color-scheme: light !important;
}

/* LocaleSwitcher emoji flags (🇨🇳 / 🇺🇸) — no dark fill plate */
header button > span.text-base,
header .relative > button span.text-base,
button.flex.items-center.gap-1\.5 > span.text-base {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Keep toggle knobs / tiny status dots out of icon-wrapper rules:
   they are h-4/h-5 rounded-full bg-white without items-center flex icon pattern */
span.pointer-events-none.inline-block.h-4,
span.pointer-events-none.inline-block.h-5,
span.h-1\.5.w-1\.5.rounded-full,
span.h-2.w-2.rounded-full {
  border: none !important;
  box-shadow: none !important;
}
span.pointer-events-none.inline-block.h-4.w-4.rounded-full.bg-white,
span.pointer-events-none.inline-block.h-5.w-5.rounded-full.bg-white {
  background-color: #e2e8f0 !important;
  border: none !important;
}

/* ==========================================================================
   SIDEBAR CLICK / FOCUS — kill black focus box on labels
   ========================================================================== */

aside.sidebar,
.sidebar,
.sidebar * {
  -webkit-tap-highlight-color: transparent !important;
}

/* Link itself: focus / active / focus-visible → green terminal, never black */
.sidebar-link:focus,
.sidebar-link:focus-visible,
.sidebar-link:active,
.sidebar a:focus,
.sidebar a:focus-visible,
.sidebar a:active,
.sidebar button:focus,
.sidebar button:focus-visible,
.sidebar button:active,
aside.sidebar a:focus,
aside.sidebar a:focus-visible,
aside.sidebar a:active,
aside.sidebar button:focus,
aside.sidebar button:focus-visible,
aside.sidebar button:active {
  outline: none !important;
  outline-offset: 0 !important;
  background-color: rgba(94, 234, 212, 0.14) !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
  box-shadow:
    inset 3px 0 0 #00ff66,
    0 0 0 1px rgba(94, 234, 212, 0.25) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Active route + focus combined */
.sidebar-link-active:focus,
.sidebar-link-active:focus-visible,
.sidebar-link-active:active,
.sidebar-link.sidebar-link-active:focus,
.sidebar-link.sidebar-link-active:focus-visible,
.sidebar-link.sidebar-link-active:active {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.26), rgba(94, 234, 212, 0.1)) !important;
  color: var(--ht-green-bright) !important;
  box-shadow:
    inset 3px 0 0 #00ff66,
    0 0 16px rgba(94, 234, 212, 0.15) !important;
}

/* Text / label never gets its own black/gray box */
.sidebar-label,
.sidebar-label:focus,
.sidebar-label:active,
.sidebar-link span,
.sidebar-link span:focus,
.sidebar-link span:active,
.sidebar-link:focus span,
.sidebar-link:active span,
.sidebar-link:focus-visible span,
.sidebar-brand-title:focus,
.sidebar a span,
.sidebar button span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Kill browser / UA focus ring that can look like a black frame */
.sidebar-link:focus-visible,
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  outline: 1px solid rgba(94, 234, 212, 0.45) !important;
  outline-offset: 0 !important;
}

/* ring-offset often paints a dark slab behind focused controls */
.sidebar-link,
.sidebar a,
.sidebar button {
  --tw-ring-offset-width: 0px !important;
  --tw-ring-offset-color: transparent !important;
  --tw-ring-color: rgba(94, 234, 212, 0.35) !important;
}

.sidebar-link:focus,
.sidebar-link:focus-visible,
.sidebar a:focus,
.sidebar a:focus-visible {
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* Selection while clicking shouldn't flash black */
.sidebar ::selection,
.sidebar-link ::selection,
.sidebar-label ::selection {
  background: rgba(94, 234, 212, 0.35) !important;
  color: var(--ht-ink-on-accent) !important;
}

/* ==========================================================================
   MODAL / OVERLAY — surface only where possible
   NEVER force z-index / transform / inset on generic full-screen overlays:
   - BaseDialog uses :z-index prop (inline style) for nesting (40/60/80)
   - LoginAgreementPrompt uses z-[140]
   - PaymentView image preview uses z-[60]
   - AccountTestModal uses z-[100]
   stylesheet !important would pin them all to 50 and break stacking.
   NEVER force transform:none on overlays/menus — kills enter animations and
   CSS translate positioning (HelpTooltip -translate-x/y, UsageTable tooltips).
   ========================================================================== */

/* BaseDialog overlay class only — safe to restate full-screen flex layout */
.modal-overlay,
div.modal-overlay,
[role="dialog"].modal-overlay,
[role="dialog"][class*="modal-overlay"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 1rem !important;
  filter: none !important;
  border: none !important;
  box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.62) !important;
  background-image: none !important;
  color: inherit !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  overflow: auto !important;
  /* DO NOT set z-index — BaseDialog / callers own stacking */
  pointer-events: auto !important;
}

/* Generic fixed full-screen scrims (hand-rolled modals) — colors only.
   Leave display/flex/align/z-index/transform to the component classes. */
.fixed.inset-0.bg-black\/40,
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black\/70,
.fixed.inset-0.bg-black\/80,
div.fixed.inset-0[class*="bg-black"],
.fixed.inset-0.flex.items-center.justify-center {
  background-color: rgba(0, 0, 0, 0.62) !important;
  background-image: none !important;
  /* never: z-index, transform, inset, width, display */
}

/* Actual dialog panel — surface + flex column; keep width/max-height flexible */
.modal-content,
.modal-overlay > .modal-content,
[role="dialog"] > .modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  /* do not force width:100% — max-w-* utilities control size */
  max-height: 90vh !important;
  margin: auto !important;
  /* allow enter/leave scale animation — do not force transform */
  background-color: rgba(10, 12, 13, 0.97) !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(94, 234, 212, 0.08) !important;
}

.modal-header,
.modal-footer {
  background-color: transparent !important;
  border-color: rgba(94, 234, 212, 0.18) !important;
  color: #e2e8f0 !important;
}

.modal-body {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

.modal-title {
  color: #ffffff !important;
}

/* role=tooltip: surface only (see earlier block). Layout must stay under component control.
   v-show uses inline display:none — do not force display:block here. */
[role="tooltip"] {
  align-items: initial !important;
  justify-content: initial !important;
  backdrop-filter: none !important;
}

/* Hidden tooltips: if some older rule forced display:block, re-hide when v-show is off */
[role="tooltip"][style*="display: none"],
[role="tooltip"][style*="display:none"] {
  display: none !important;
}

/* Fixed JS-positioned menus / selects / date pickers — surface only for portals
   that already set inline z-index (Select). Action menus: see stacking block above.
   Components set top/left via inline style; enter animations use transform. */
.action-menu-content,
.batch-prompt-popover,
.select-dropdown-portal,
.date-picker-dropdown {
  background-color: rgba(10, 12, 13, 0.96) !important;
  color: #e2e8f0 !important;
  border-color: rgba(94, 234, 212, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65) !important;
  /* never: transform, inset, top, left, width — Select owns those via inline style */
}
/* Select already uses inline zIndex 100000020; reinforce for theme-consistency */
.select-dropdown-portal {
  z-index: 100000020 !important;
}

/* body/html must not create a containing block that traps position:fixed */
html,
body {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}
/* canvas rain keeps its own filter */
#ht-code-rain {
  filter: none !important; /* battery: never re-enable CSS filter on full-screen canvas */
}

/* ==========================================================================
   CHANNEL STATUS — provider icon tiles (MonitorCard)
   Uses bg-gradient-to-br from-*-50 to-*-100 + grid place-items-center
   (not flex items-center — previous icon rules missed these)
   ========================================================================== */

/* Provider icon square on channel status cards */
.w-9.h-9.rounded-xl.grid.place-items-center,
.w-9.h-9.rounded-xl,
[class*="w-9"][class*="h-9"][class*="rounded-xl"][class*="place-items-center"],
[class*="w-9"][class*="h-9"][class*="rounded-xl"][class*="ring-1"],
.grid.place-items-center.rounded-xl.w-9,
.grid.place-items-center.rounded-xl.h-9 {
  background-color: rgba(15, 20, 22, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.12) !important;
  color: var(--ht-green-bright) !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent, transparent !important;
  --tw-ring-color: rgba(94, 234, 212, 0.25) !important;
}

/* Kill light gradient fills used by providerGradient() */
.bg-gradient-to-br,
[class*="bg-gradient-to-br"],
[class*="bg-gradient-to-"] {
  background-image: none !important;
}

[class*="from-emerald-50"],
[class*="from-emerald-100"],
[class*="from-orange-50"],
[class*="from-amber-50"],
[class*="from-amber-100"],
[class*="from-sky-50"],
[class*="from-indigo-50"],
[class*="from-indigo-100"],
[class*="from-zinc-50"],
[class*="from-neutral-50"],
[class*="from-neutral-100"],
[class*="from-neutral-200"],
[class*="from-gray-100"],
[class*="from-gray-200"],
[class*="to-emerald-100"],
[class*="to-amber-100"],
[class*="to-indigo-100"],
[class*="to-neutral-200"],
[class*="to-gray-200"],
[class*="dark:from-emerald"],
[class*="dark:to-emerald"],
[class*="dark:from-orange"],
[class*="dark:to-amber"],
[class*="dark:from-sky"],
[class*="dark:to-indigo"],
[class*="dark:from-zinc"],
[class*="dark:to-neutral"],
[class*="dark:from-dark"],
[class*="dark:to-dark"] {
  --tw-gradient-from: rgba(15, 20, 22, 0.95) !important;
  --tw-gradient-to: rgba(12, 14, 16, 0.95) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  background-color: rgba(15, 20, 22, 0.92) !important;
  background-image: none !important;
}

/* Provider-colored icon tiles (keep brand tint, dark solid base) */
[class*="from-emerald-50"],
[class*="to-emerald-100"],
[class*="dark:from-emerald-500"],
.text-emerald-600.dark\:text-emerald-300,
[class*="text-emerald-600"] {
  /* base handled above */
}
span[class*="from-emerald"],
span[class*="to-emerald"],
span.w-9.h-9[class*="emerald"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}
span[class*="from-orange"],
span[class*="to-amber"],
span.w-9.h-9[class*="orange"],
span.w-9.h-9[class*="amber"] {
  background-color: rgba(50, 28, 8, 0.95) !important;
  color: #ffb86b !important;
}
span[class*="from-sky"],
span[class*="to-indigo"],
span.w-9.h-9[class*="sky"],
span.w-9.h-9[class*="indigo"] {
  background-color: rgba(8, 30, 50, 0.95) !important;
  color: #8ad4ff !important;
}
span[class*="from-zinc"],
span[class*="to-neutral"],
span.w-9.h-9[class*="zinc"],
span.w-9.h-9[class*="neutral"] {
  background-color: rgba(24, 28, 32, 0.95) !important;
  color: #e8eef2 !important;
}

/* ProviderIcon SVG uses currentColor — ensure readable */
.w-9.h-9 svg,
[class*="w-9"][class*="h-9"] svg,
.w-9.h-9.rounded-xl svg {
  color: inherit !important;
  fill: currentColor !important;
}
.w-9.h-9 svg path,
[class*="w-9"][class*="h-9"] svg path {
  fill: currentColor !important;
}

/* Status / provider badges on the same page */
[class*="bg-emerald-100"],
[class*="bg-emerald-500/15"],
[class*="dark:bg-emerald-500/15"],
.bg-emerald-100,
.dark\:bg-emerald-500\/15 {
  background-color: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(125, 255, 168, 0.3) !important;
}
[class*="bg-amber-100"],
[class*="bg-amber-500/15"],
.bg-amber-100 {
  background-color: rgba(50, 40, 8, 0.9) !important;
  color: #ffe08a !important;
  border: 1px solid rgba(255, 224, 138, 0.3) !important;
}
[class*="bg-orange-100"],
[class*="bg-orange-500/15"],
.bg-orange-100 {
  background-color: rgba(50, 28, 8, 0.9) !important;
  color: #ffb86b !important;
  border: 1px solid rgba(255, 184, 107, 0.3) !important;
}
[class*="bg-sky-100"],
[class*="bg-sky-500/15"],
.bg-sky-100 {
  background-color: rgba(8, 30, 50, 0.9) !important;
  color: #8ad4ff !important;
  border: 1px solid rgba(138, 212, 255, 0.3) !important;
}
[class*="bg-zinc-100"],
[class*="bg-zinc-500/15"],
.bg-zinc-100 {
  background-color: rgba(24, 28, 32, 0.9) !important;
  color: #e8eef2 !important;
  border: 1px solid rgba(200, 210, 220, 0.25) !important;
}
[class*="bg-red-100"],
[class*="bg-red-500/15"],
.bg-red-100 {
  background-color: rgba(50, 12, 18, 0.9) !important;
  color: #ff8a9a !important;
  border: 1px solid rgba(255, 138, 154, 0.3) !important;
}

/* Channel status cards themselves (bg-white/70) */
.rounded-2xl.min-h-\[280px\],
button.rounded-2xl.min-h-\[280px\],
.bg-white\/70.backdrop-blur-xl,
[class*="bg-white/70"],
[class*="min-h-[280px]"] {
  background-color: rgba(10, 12, 13, 0.88) !important;
  background-image: none !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
  color: #e2e8f0 !important;
}

/* Metric tiles under the icon */
.rounded-xl.p-3.bg-gray-50\/80,
[class*="bg-gray-50/80"],
[class*="dark:bg-dark-900/40"] {
  background-color: rgba(15, 20, 22, 0.75) !important;
  border-color: rgba(94, 234, 212, 0.12) !important;
  color: var(--ht-text-muted) !important;
}

/* Hero segmented control on channel status page */
.inline-flex.p-0\.5.rounded-xl.bg-gray-100,
[class*="rounded-xl"][class*="bg-gray-100"] {
  background-color: rgba(12, 14, 16, 0.9) !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
}

/* ==========================================================================
   GLOBAL: kill black focus / active text boxes everywhere
   ========================================================================== */

html, body, #app, #app * {
  -webkit-tap-highlight-color: transparent !important;
}

/* Tailwind ring-offset paints a dark slab (looks like a black frame) */
*,
*::before,
*::after {
  --tw-ring-offset-width: 0px !important;
  --tw-ring-offset-color: transparent !important;
}

/* Prefer green focus ring, never black outline plate */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
.btn:focus,
.btn:focus-visible,
input:focus,
textarea:focus,
select:focus,
.input:focus,
summary:focus,
summary:focus-visible {
  outline: 1px solid rgba(94, 234, 212, 0.4) !important;
  outline-offset: 1px !important;
}

/* Active/pressed: green tint, not black */
a:active,
button:active,
[role="button"]:active,
.btn:active {
  background-image: none !important;
}

/* Text nodes must not grow their own solid black chip on click */
span:focus,
span:active,
span:focus-visible,
label:focus,
label:active,
p:focus,
p:active,
td:focus,
th:focus,
strong:focus,
em:focus,
code:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* When a parent is focused, keep inner text transparent-bg */
button:focus > span,
button:active > span,
a:focus > span,
a:active > span,
.btn:focus > span,
.btn:active > span,
button:focus-visible > span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* dark:bg-dark-800/900 hover-focus looking near-black → deep green instead */
.dark\:bg-dark-800,
.dark\:bg-dark-900,
.dark\:hover\:bg-dark-700:hover,
.dark\:hover\:bg-dark-800:hover,
.dark\:focus\:bg-dark-800:focus,
.dark\:focus\:bg-dark-900:focus,
.dark\:focus-visible\:ring-offset-dark-800,
.dark\:focus-visible\:ring-offset-dark-900,
[class*="dark:bg-dark-800"],
[class*="dark:bg-dark-900"],
[class*="dark:hover:bg-dark-7"],
[class*="dark:hover:bg-dark-8"],
[class*="dark:focus:bg-dark"] {
  /* surface already handled; ensure offset vars stay clear */
  --tw-ring-offset-color: transparent !important;
}

/* GroupBadge rate label: bg-black/10 was forced solid black — reaffirm soft green */
span.px-1\.5.py-0\.5.rounded.text-\[10px\],
span[class*="px-1.5"][class*="py-0.5"][class*="rounded"][class*="text-[10px]"],
span[class*="bg-black/10"],
span[class*="dark:bg-white/10"] {
  background-color: rgba(94, 234, 212, 0.12) !important;
  color: var(--ht-text-muted) !important;
  border: 1px solid rgba(94, 234, 212, 0.2) !important;
  box-shadow: none !important;
}

/* Selection highlight */
::selection {
  background: rgba(94, 234, 212, 0.35) !important;
  color: var(--ht-ink-on-accent) !important;
}

/* active:bg-black (platform picker) → deep green */
.active\:bg-black:active,
[class*="active:bg-black"] {
  background-color: #141a1c !important;
  color: var(--ht-green-bright) !important;
}

/* ==========================================================================
   /home LANDING PAGE — terminal-themed polish
   Targets default HomeView layout (not admin-custom home_content iframe)
   ========================================================================== */

/* Page shell: transparent so code rain shows; soft green wash */
.min-h-screen.flex.flex-col.overflow-hidden,
.min-h-screen.relative.flex.flex-col.overflow-hidden,
div.relative.flex.min-h-screen.flex-col.overflow-hidden {
  background: transparent !important;
  background-image: none !important;
}

/* Decorative blurs → green terminal glow orbs */
.min-h-screen .pointer-events-none.absolute.inset-0 .rounded-full.blur-3xl,
.min-h-screen .absolute.rounded-full.blur-3xl {
  background: radial-gradient(circle, rgba(94, 234, 212, 0.18), transparent 70%) !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.85 !important;
}

/* Grid overlay → CRT-ish green grid */
.min-h-screen .absolute.inset-0[class*="bg-\\[linear-gradient"],
.min-h-screen .absolute.inset-0[class*="bg-[linear-gradient"] {
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.05) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: 0.7 !important;
}

/* ---- Header bar ---- */
.min-h-screen > header.relative.z-20,
.min-h-screen header.relative.z-20 {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.75) 0%,
    rgba(5, 5, 5, 0.35) 100%
  ) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.min-h-screen > header .h-10.w-10,
.min-h-screen header .h-10.w-10 {
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.25) !important;
  background: rgba(15, 20, 22, 0.9) !important;
  border-radius: 6px !important;
}

.min-h-screen > header button,
.min-h-screen > header a.rounded-lg {
  color: var(--ht-green-bright) !important;
  border-radius: 4px !important;
}
.min-h-screen > header button:hover,
.min-h-screen > header a.rounded-lg:hover {
  background: rgba(94, 234, 212, 0.12) !important;
  color: #e2e8f0 !important;
}

/*
 * Header 「控制台 / 登录」pill (HomeView).
 * Was: color var(--ht-ink-on-accent) (near-black) on a green gradient that global
 * [class*="bg-gray-900"] / [class*="dark:bg-gray-"] often wipe → black blob.
 * Fix: solid dark-green shell + bright green/white text (always readable).
 */
.min-h-screen > header a.rounded-full,
.min-h-screen > header a.inline-flex.rounded-full,
.min-h-screen header a.rounded-full,
.min-h-screen header a.inline-flex.rounded-full,
.min-h-screen header a.inline-flex[class*="bg-gray"],
.min-h-screen header a.rounded-full[class*="bg-gray"] {
  background: rgba(10, 12, 13, 0.95) !important;
  background-color: rgba(10, 12, 13, 0.95) !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(94, 234, 212, 0.45) !important;
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.22) !important;
  font-family: var(--ht-font-mono) !important;
}
.min-h-screen > header a.rounded-full span,
.min-h-screen > header a.rounded-full .text-white,
.min-h-screen > header a.rounded-full .font-medium,
.min-h-screen header a.rounded-full span,
.min-h-screen header a.rounded-full .text-white,
.min-h-screen header a.rounded-full .font-medium,
.min-h-screen header a.rounded-full svg {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
/* Avatar chip inside 控制台 pill — keep green disc, dark initial */
.min-h-screen header a.rounded-full > span.flex.h-5.w-5,
.min-h-screen header a.rounded-full > span.rounded-full.h-5,
.min-h-screen header a.rounded-full span.h-5.w-5 {
  background: var(--ht-green) !important;
  background-image: none !important;
  background-color: var(--ht-green-dim) !important;
  color: var(--ht-ink-on-accent) !important;
  -webkit-text-fill-color: var(--ht-ink-on-accent) !important;
  border: 1px solid rgba(94, 234, 212, 0.5) !important;
}
.min-h-screen > header a.rounded-full:hover,
.min-h-screen header a.rounded-full:hover {
  background: rgba(15, 20, 22, 0.98) !important;
  background-image: none !important;
  border-color: rgba(94, 234, 212, 0.65) !important;
  color: #ffffff !important;
  filter: none !important;
}

/* CTA 「进入控制台 / 立即开始」— solid green, dark text, force both layers */
.min-h-screen main .btn-primary,
.min-h-screen main a.btn-primary,
.min-h-screen main a.btn.btn-primary {
  background-color: var(--ht-green) !important;
  background-image: none !important;
  color: var(--ht-ink-on-accent) !important;
  -webkit-text-fill-color: var(--ht-ink-on-accent) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.min-h-screen main .btn-primary *,
.min-h-screen main a.btn-primary *,
.min-h-screen main a.btn.btn-primary * {
  color: var(--ht-ink-on-accent) !important;
  -webkit-text-fill-color: var(--ht-ink-on-accent) !important;
}

/* ---- Hero ---- */
.min-h-screen main h1 {
  color: #e2e8f0 !important;
  text-shadow:
    0 0 20px rgba(94, 234, 212, 0.35),
    0 0 40px rgba(94, 234, 212, 0.15) !important;
  font-family: var(--ht-font) !important;
  letter-spacing: -0.02em !important;
}

.min-h-screen main h1::after {
  content: "_" !important;
  color: #00ff66 !important;
  animation: ht-home-blink 1s step-end infinite !important;
  margin-left: 2px !important;
  text-shadow: 0 0 10px #00ff66 !important;
}

@keyframes ht-home-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.min-h-screen main > div > div > div > p,
.min-h-screen main .text-lg,
.min-h-screen main .md\:text-xl {
  color: var(--ht-green-bright) !important;
  font-family: var(--ht-font) !important;
}

/* CTA primary already green — reinforce glow */
.min-h-screen main .btn-primary {
  box-shadow: 0 0 24px rgba(94, 234, 212, 0.4) !important;
  border-radius: 4px !important;
  font-family: var(--ht-font-mono) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
}

/* ---- Terminal showcase (right side) ---- */
.terminal-container {
  filter: drop-shadow(0 0 28px rgba(94, 234, 212, 0.2)) !important;
}

.terminal-window {
  background: linear-gradient(160deg, #050505 0%, var(--ht-bg) 55%, #0a0c0d 100%) !important;
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.08),
    0 25px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(94, 234, 212, 0.08),
    0 0 40px rgba(94, 234, 212, 0.12) !important;
  transform: none !important; /* flat terminal, more “real” */
}

.terminal-window:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.2),
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(94, 234, 212, 0.18) !important;
}

.terminal-header {
  background: rgba(15, 20, 22, 0.9) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.2) !important;
}

.terminal-title {
  color: var(--ht-green) !important;
  font-family: var(--ht-font-mono) !important;
  letter-spacing: 0.08em !important;
}

.terminal-title::before {
  content: "root@0xnyx ~ " !important;
  color: #3dbe6a !important;
  opacity: 0.8 !important;
}

.terminal-body {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(94, 234, 212, 0.02) 2px,
      rgba(94, 234, 212, 0.02) 3px
    ) !important;
}

.code-prompt {
  color: #00ff66 !important;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.5) !important;
}
.code-cmd {
  color: #7ecbff !important;
}
.code-flag {
  color: #c4a7ff !important;
}
.code-url {
  color: var(--ht-green) !important;
}
.code-comment {
  color: #3d8f5a !important;
}
.code-success {
  color: #00ff66 !important;
  background: rgba(94, 234, 212, 0.15) !important;
  border: 1px solid rgba(94, 234, 212, 0.25) !important;
}
.code-response {
  color: #ffe08a !important;
}
.cursor {
  background: #00ff66 !important;
  box-shadow: 0 0 8px #00ff66 !important;
}

/* ---- Feature tags (pills under hero) ---- */
.min-h-screen main .inline-flex.items-center.gap-2\.5.rounded-full,
.min-h-screen main .rounded-full.border.bg-white\/80,
.min-h-screen main .inline-flex.rounded-full.border {
  background: rgba(15, 20, 22, 0.75) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  color: var(--ht-text-muted) !important;
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.08) !important;
  border-radius: 4px !important; /* less pill, more terminal chip */
  font-family: var(--ht-font-mono) !important;
}
.min-h-screen main .inline-flex.rounded-full span,
.min-h-screen main .rounded-full.border span {
  color: var(--ht-text-muted) !important;
}
.min-h-screen main .inline-flex.rounded-full .text-primary-500,
.min-h-screen main .rounded-full .text-primary-500 {
  color: #00ff66 !important;
  filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.4));
}

/* ---- Feature cards (3-col grid) ---- */
.min-h-screen main .grid.md\:grid-cols-3 > .group.rounded-2xl,
.min-h-screen main .group.rounded-2xl.border.bg-white\/60,
.min-h-screen main .group.rounded-2xl.border.p-6 {
  background: rgba(10, 12, 13, 0.82) !important;
  border: 1px solid rgba(94, 234, 212, 0.22) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px) !important;
}
.min-h-screen main .group.rounded-2xl:hover {
  border-color: rgba(94, 234, 212, 0.45) !important;
  box-shadow:
    0 0 24px rgba(94, 234, 212, 0.15),
    0 16px 40px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.min-h-screen main .group.rounded-2xl h3 {
  color: #e2e8f0 !important;
  font-family: var(--ht-font) !important;
}
.min-h-screen main .group.rounded-2xl p {
  color: #8fd9a8 !important;
}

/* Feature card icon tiles */
.min-h-screen main .group.rounded-2xl .h-12.w-12,
.min-h-screen main .group .mb-4.flex.h-12.w-12 {
  background: var(--ht-green) !important;
  background-image: none !important;
  border: 1px solid rgba(94, 234, 212, 0.4) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.35) !important;
  color: var(--ht-ink-on-accent) !important;
}
.min-h-screen main .group.rounded-2xl .h-12.w-12 svg,
.min-h-screen main .group .h-12.w-12 .text-white {
  color: var(--ht-ink-on-accent) !important;
}

/* ---- Providers section ---- */
.min-h-screen main h2 {
  color: #e2e8f0 !important;
  text-shadow: 0 0 16px rgba(94, 234, 212, 0.25) !important;
  font-family: var(--ht-font) !important;
}

.min-h-screen main .flex.flex-wrap.items-center.justify-center.gap-4 > div {
  background: rgba(10, 12, 13, 0.85) !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.08) !important;
  backdrop-filter: blur(4px) !important;
}
.min-h-screen main .flex.flex-wrap.gap-4 > div span {
  color: var(--ht-text-muted) !important;
}
.min-h-screen main .flex.flex-wrap.gap-4 > div .h-8.w-8 {
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.min-h-screen main .flex.flex-wrap.gap-4 .rounded.bg-primary-100,
.min-h-screen main .flex.flex-wrap.gap-4 [class*="bg-primary-100"] {
  background: rgba(94, 234, 212, 0.15) !important;
  color: #00ff66 !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  border-radius: 3px !important;
  font-family: var(--ht-font-mono) !important;
}

/* ---- Footer ---- */
.min-h-screen > footer {
  background: rgba(8, 10, 11, 0.7) !important;
  border-top: 1px solid rgba(94, 234, 212, 0.18) !important;
  backdrop-filter: blur(6px) !important;
}
.min-h-screen > footer p,
.min-h-screen > footer a {
  color: #6fd992 !important;
  font-family: var(--ht-font-mono) !important;
  font-size: 0.8rem !important;
}
.min-h-screen > footer a:hover {
  color: #00ff66 !important;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.4) !important;
}

/* Top nav on home should sit above rain */
.min-h-screen > header {
  z-index: 20 !important;
}
.min-h-screen > main,
.min-h-screen > footer {
  z-index: 10 !important;
}

@media (prefers-reduced-motion: reduce) {
  .min-h-screen main h1::after {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Group capacity numbers (GroupsView capacity column)
   Numbers use span.font-mono — must NOT get code-block dark background.
   Outer chips: bg-gray-100 / yellow-100 / red-100 / dark:bg-gray-800
   ========================================================================== */

/* Never black box on mono digits */
.font-mono,
span.font-mono,
td .font-mono,
.table-wrapper .font-mono {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Capacity chip outer shell */
.inline-flex.items-center.gap-1.rounded-md.px-1\.5.py-0\.5.text-\[10px\].font-medium,
span.inline-flex.items-center.gap-1.rounded-md.px-1\.5.py-0\.5.text-\[10px\] {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Idle capacity: was dark:bg-gray-800 → looked black */
.bg-gray-100.text-gray-600,
.dark\:bg-gray-800.dark\:text-gray-400,
span.bg-gray-100,
span[class*="bg-gray-100"][class*="text-[10px]"],
span[class*="dark:bg-gray-800"][class*="text-[10px]"] {
  background-color: rgba(15, 20, 22, 0.75) !important;
  color: var(--ht-green-bright) !important;
  border: 1px solid rgba(94, 234, 212, 0.22) !important;
}

/* In-use (yellow) capacity */
span[class*="bg-yellow-100"],
span[class*="dark:bg-yellow-900"] {
  background-color: rgba(50, 40, 8, 0.9) !important;
  color: #ffe08a !important;
  border: 1px solid rgba(255, 224, 138, 0.3) !important;
}

/* Full (red) capacity */
span[class*="bg-red-100"][class*="text-[10px]"],
span[class*="dark:bg-red-900"][class*="text-[10px]"] {
  background-color: rgba(50, 12, 18, 0.9) !important;
  color: #ff8a9a !important;
  border: 1px solid rgba(255, 138, 154, 0.3) !important;
}

/* Slash separator in capacity */
.inline-flex.items-center.gap-1 .text-gray-400,
.inline-flex.items-center.gap-1 .dark\:text-gray-500 {
  background: transparent !important;
  color: #5a9a6e !important;
  border: none !important;
  padding: 0 !important;
}

/* Inner mono numbers inherit chip color, no own box */
.inline-flex.items-center.gap-1.rounded-md span.font-mono,
.inline-flex.items-center.gap-1 > span.font-mono {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* ==========================================================================
   v26 — 「添加账号」左侧「更多操作」下拉
   JS: ht-account-tools.js 贴按钮 + fixed 高层级；打开时压低搜索筛选区
   ========================================================================== */
html[data-ht-tools-open] .table-page-layout .layout-section-fixed {
  position: relative !important;
}
html[data-ht-tools-open] .table-page-layout input.input,
html[data-ht-tools-open] .table-page-layout .input,
html[data-ht-tools-open] .table-page-layout input[type="text"],
html[data-ht-tools-open] .table-page-layout .relative:has(> input.input),
html[data-ht-tools-open] .table-page-layout .relative:has(> input) {
  z-index: 0 !important;
  position: relative !important;
}

/* The rule above promotes the input to position:relative;z-index:0, which lifts
   its background over the leading search icon (an absolutely-positioned sibling
   painted earlier in DOM order) and hides the icon. Keep the icon container
   above the input inside the wrapper's stacking context. */
html[data-ht-tools-open] .table-page-layout .relative:has(> input.input) > .pointer-events-none.absolute,
html[data-ht-tools-open] .table-page-layout .relative:has(> input) > .pointer-events-none.absolute {
  z-index: 1 !important;
}

.account-tools-menu-item {
  color: #e2e8f0 !important;
  background: transparent !important;
}
.account-tools-menu-item:hover {
  background-color: rgba(94, 234, 212, 0.08) !important;
  color: #f8fafc !important;
}
.account-tools-menu-icon {
  border: 1px solid rgba(226, 232, 240, 0.12) !important;
  background-image: none !important;
}

[data-ht-account-tools-fixed="1"] {
  position: fixed !important;
  z-index: 2147483646 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
  background: #0a0c0d !important;
  background-color: #0a0c0d !important;
  background-image: none !important;
  border: 1px solid rgba(226, 232, 240, 0.12) !important;
  border-color: rgba(226, 232, 240, 0.12) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  color: #e2e8f0 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
[data-ht-account-tools-fixed="1"] * {
  text-shadow: none !important;
}
[data-ht-account-tools-fixed="1"] .account-tools-menu-item {
  border-radius: 0 !important;
}