/* ==========================================================================
   Scolv API Console (Sub2API) — Official Hermes Agent Skin
   Theme: Stark Technical (Nous Portal Inspired) x Clean Luxury (Hermès Accent)
   ========================================================================== */

/* ── 官方正版 Web Fonts 注入 ── */
@font-face {
  font-family: 'zpixFont';
  src: url('/fonts/zpix.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'mondwestFont';
  src: url('/fonts/Mondwest_Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'mondwestFont Fallback';
  src: local('Arial');
  ascent-override: 902.41%;
  descent-override: 270.78%;
  line-gap-override: 45.18%;
  size-adjust: 8.86%;
}

@font-face {
  font-family: 'rulesCompressed';
  src: url('/fonts/RulesCompressed_Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'rulesCompressed';
  src: url('/fonts/RulesCompressed_Medium.woff2') format('woff2');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'rulesCompressed Fallback';
  src: local('Arial');
  ascent-override: 230.57%;
  descent-override: 67.31%;
  line-gap-override: 0.0%;
  size-adjust: 46.8%;
}

@font-face {
  font-family: 'rulesExpanded';
  src: url('/fonts/RulesExpanded_Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'rulesExpanded';
  src: url('/fonts/RulesExpanded_Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'rulesExpanded Fallback';
  src: local('Arial');
  ascent-override: 74.9%;
  descent-override: 21.87%;
  line-gap-override: 0.0%;
  size-adjust: 144.06%;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('/fonts/CourierPrime_Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('/fonts/CourierPrime_Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Courier Prime Fallback';
  src: local('Arial');
  ascent-override: 58.08%;
  descent-override: 25.41%;
  line-gap-override: 0.0%;
  size-adjust: 134.5%;
}

:root {
  color-scheme: light;
  
  /* Day mode palette (Hermes Day Teal) */
  --api-bg: #e8f0ec;                 /* Solid warm mint gray base */
  --api-bg-soft: #d4e4da;            /* Solid soft gray-green container */
  --api-surface: rgba(212, 228, 218, 0.45); /* Translucent cards (glassy effect) */
  --api-surface-solid: #d4e4da;      /* Solid container surface */
  --api-surface-muted: #c8d4c8;
  --api-elevated: #d4e4da;           /* Solid surface for dialogs/dropdowns */
  --api-text: #1a3a2a;               /* Deep forest green text */
  --api-muted: #2d503b;              /* Secondary gray-green - enhanced contrast */
  --api-faint: #a8c4b0;              /* Faint separator/border */
  
  --api-line: rgba(26, 58, 42, 0.16);       
  --api-line-strong: rgba(26, 58, 42, 0.35);
  --api-accent: #1a3a2a;             /* Deep green primary accent */
  --api-accent-hover: #2a5a3a;
  --api-accent-soft: rgba(26, 58, 42, 0.08);
  --api-accent-contrast: #e8f0ec;    /* Contrast text for active state */
  
  --api-success: #2f7d4c;            
  --api-warning: #b7791f;            
  --api-danger: #b45353;             
  --api-blue: #416072;               
  
  --api-radius: 0px;                 /* Pure straight corners */
  --api-radius-sm: 0px;
  
  --api-shadow: none;
  --api-shadow-soft: none;
  
  --api-transition: all 0.16s ease;
  --api-transition-fast: all 0.1s ease;

  /* Element Plus Day Mode Overrides */
  --el-text-color-primary: var(--api-text) !important;
  --el-text-color-regular: var(--api-text) !important;
  --el-text-color-secondary: var(--api-muted) !important;
  --el-text-color-placeholder: var(--api-muted) !important;
  --el-bg-color: var(--api-bg) !important;
  --el-bg-color-overlay: var(--api-surface-solid) !important;
  --el-fill-color-blank: var(--api-surface-solid) !important;
  --el-border-color: var(--api-line) !important;
  --el-border-color-light: var(--api-line) !important;
  --el-border-color-lighter: var(--api-line) !important;
}

html.dark,
.dark {
  color-scheme: dark;
  
  /* Night mode palette (Official Hermes Teal) */
  --api-bg: #041c1c;                 /* Solid deep teal black */
  --api-bg-soft: #092828;            /* Solid container */
  --api-surface: rgba(4, 28, 28, 0.45); /* Translucent cards (glassy effect) */
  --api-surface-solid: #092828;
  --api-surface-muted: #031111;
  --api-elevated: #0c2b2b;           /* Solid surface for dialogs/dropdowns */
  --api-text: #c8d4c8;               /* Minty gray text */
  --api-muted: #a3bca3;              /* Muted teal gray - enhanced contrast */
  --api-faint: #1a3a3a;              /* Dark borders */
  
  --api-line: rgba(200, 212, 200, 0.05);     
  --api-line-strong: rgba(200, 212, 200, 0.12);
  --api-accent: #ffe6cb;             /* Cream-warm primary accent */
  --api-accent-hover: #ffd4a8;
  --api-accent-soft: rgba(255, 230, 203, 0.08);
  --api-accent-contrast: #041c1c;    /* Contrast text for active state */
  
  --api-success: #a3bca3;
  --api-warning: #ffd4a8;
  --api-danger: #f87171;
  --api-blue: #60a5fa;
  
  --api-radius: 0px;                 /* Pure straight corners */
  --api-radius-sm: 0px;
  
  --api-shadow: none;
  --api-shadow-soft: none;

  /* Element Plus Dark Mode Overrides */
  --el-text-color-primary: var(--api-text) !important;
  --el-text-color-regular: var(--api-text) !important;
  --el-text-color-secondary: var(--api-muted) !important;
  --el-text-color-placeholder: var(--api-muted) !important;
  --el-bg-color: var(--api-bg) !important;
  --el-bg-color-overlay: var(--api-surface-solid) !important;
  --el-fill-color-blank: var(--api-surface-solid) !important;
  --el-border-color: var(--api-line) !important;
  --el-border-color-light: var(--api-line) !important;
  --el-border-color-lighter: var(--api-line) !important;
}

/* ==========================================================================
   Global Layout & Resets
   ========================================================================== */

html,
body,
#app {
  min-height: 100%;
  width: 100%;
  background-color: #000000 !important; /* Pure black base background for difference blend */
  color: var(--api-text) !important;
  font-family: mondwestFont, zpixFont, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em !important;
}

body {
  overflow-x: hidden;
}

/* ── Global Straight Corners Overwrites ── */
*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

svg { filter: none !important; }
a { color: inherit; text-decoration: none !important; }

/* ── WebGL & Noise overlays ── */
.pointer-events-none.absolute.inset-0.overflow-hidden,
.absolute.-right-40.-top-40,
.absolute.-bottom-40.-left-40,
.bg-\[linear-gradient\(rgba\(20\2c 184\2c 166\2c 0\.03\)_1px\2c transparent_1px\)\2c linear-gradient\(90deg\2c rgba\(20\2c 184\2c 166\2c 0\.03\)_1px\2c transparent_1px\)\] {
  display: none !important;
}

/* z-0: Solid Dark Teal overlay with Difference Blend Mode */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #041c1c !important;
  mix-blend-mode: difference !important;
}

/* z-1: Topography image with Difference Blend Mode */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image: url('/filler-bg0.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  mix-blend-mode: difference !important;
  opacity: 0.033 !important;
  filter: invert(1) !important;
}

/* z-99: Golden Gradient Glow overlay with Lighten Blend Mode */
#app::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 0% 0%, rgba(255,189,56,0) 60%, rgba(255,189,56,0.35) 100%) !important;
  mix-blend-mode: lighten !important;
  opacity: 0.22 !important;
}

/* z-100: Noise Grain with Color-Dodge Blend Mode */
#app::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23eaeaea' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E") !important;
  background-size: 512px 512px !important;
  mix-blend-mode: color-dodge !important;
  opacity: 0.55 !important;
}

/* ── Day Mode Overlays Overrides ── */
html:not(.dark) body {
  background-color: #e8f0ec !important;
}
html:not(.dark) body::before {
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}
html:not(.dark) body::after {
  background-image: url('/filler-bg0.jpg') !important;
  mix-blend-mode: multiply !important;
  opacity: 0.015 !important;
  filter: none !important;
}
html:not(.dark) #app::before {
  background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(54, 86, 58, 0.08) 100%) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.15 !important;
}
html:not(.dark) #app::after {
  mix-blend-mode: multiply !important;
  opacity: 0.035 !important;
}

/* ==========================================================================
   Typography & Technical Monospace Numbers
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.page-title, .sidebar-brand, .sidebar-link,
button, .btn, .el-button,
.input-label, label, th,
.badge, [class*="badge"], .el-tag,
.el-switch__label {
  font-family: mondwestFont, zpixFont, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
}

code, pre, kbd, samp, .font-mono, input, textarea, select,
.metric-value, .token-value, .number-col, td .font-mono, td code, table td,
.el-input__inner, .el-textarea__inner {
  font-family: 'Courier Prime', Menlo, Monaco, Consolas, "Courier New", monospace !important;
  text-transform: none !important;
  letter-spacing: 0em !important;
}

.font-bold {
  font-weight: 700 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-medium {
  font-weight: 500 !important;
}

.input-label,
label,
.text-xs.font-medium {
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--api-muted) !important;
}

/* ==========================================================================
   Clear solid container backgrounds to show body topography/noise texture
   ========================================================================== */

#app,
.el-container,
.el-main,
.layout-container,
.app-layout,
.app-container,
.page-container,
.main-content,
.router-view-wrapper,
main {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================================
   Seamless borderless headers & sidebars
   ========================================================================== */

header,
.sticky,
.fixed.top-0 {
  background: var(--api-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--api-line) !important;
}

header.relative.z-20 { padding-top: 14px !important; padding-bottom: 14px !important; }

aside,
.sidebar {
  background-color: var(--api-bg) !important;
  border-right: 1px solid var(--api-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure inner elements do not inherit sidebar container styles */
.sidebar-link,
.sidebar-label,
.sidebar-brand,
.sidebar-logo {
  background-color: transparent !important;
  border-right: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Sidebar navigation links (Flat capsules) */
.sidebar-link {
  position: relative !important;
  padding: 8px 12px !important;
  margin: 2px 8px !important;
  border: 1px solid transparent !important; /* Prevent layout shift when border is added on active state */
  background: transparent !important;
  color: var(--api-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.sidebar-link:hover {
  background-color: var(--api-bg-soft) !important;
}

.sidebar-link:hover,
.sidebar-link:hover * {
  color: var(--api-text) !important;
  fill: var(--api-text) !important;
}

/* Active navigation item - Retro Reverse Video styling (Scoped strictly to sidebar to prevent layout leaks) */
.sidebar-link.sidebar-link-active,
.sidebar-link.router-link-active,
.sidebar-link.router-link-exact-active {
  background-color: var(--api-accent) !important;
  font-weight: 700 !important;
  border: 1px solid var(--api-accent) !important;
}

.sidebar-link.sidebar-link-active,
.sidebar-link.sidebar-link-active *,
.sidebar-link.router-link-active,
.sidebar-link.router-link-active *,
.sidebar-link.router-link-exact-active,
.sidebar-link.router-link-exact-active * {
  color: var(--api-accent-contrast) !important;
  fill: var(--api-accent-contrast) !important;
}

.sidebar-link.sidebar-link-active::before,
.sidebar-link.router-link-active::before,
.sidebar-link.router-link-exact-active::before {
  content: none !important;
  display: none !important;
}

.sidebar-link svg {
  transition: transform 0.16s ease !important;
}
.sidebar-link:hover svg {
  transform: scale(1.05) translateZ(0) !important;
}

.sidebar-link-collapsed {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 4px auto !important;
  justify-content: center !important;
}

/* Logo container overrides */
img[src*='scolv-logo'] {
  object-fit: cover !important;
  background: transparent !important;
}

header img[src*='scolv-logo'],
aside img[src*='scolv-logo'] {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

/* ==========================================================================
   Flat Minimal Cards & Tables (Solid borders, no roundness, no shadows)
   ========================================================================== */

.bg-gray-50,
.bg-gray-100,
.dark\:bg-dark-900:is(.dark *),
.dark\:bg-dark-950:is(.dark *),
.dark\:bg-dark-800:is(.dark *) {
  background-color: transparent !important;
}

.bg-white,
.card,
.el-card,
.dark\:bg-dark-800:is(.dark *),
.dark\:bg-dark-700:is(.dark *),
.dark\:bg-gray-800:is(.dark *),
.bg-white\/60,
.bg-white\/80,
.bg-white\/90 {
  background: var(--api-surface) !important;
  border: 1px solid var(--api-line-strong) !important;
  transform: none !important;
  transition: border-color 0.16s ease !important;
}

.bg-white:hover,
.card:hover,
.el-card:hover {
  border-color: var(--api-text) !important;
  transform: none !important;
}

/* Reflective visual border tweak for dark mode cards */
.dark .card,
.dark .el-card,
.dark .bg-white {
  border-top: 1px solid var(--api-line-strong) !important;
}

.border,
.border-t,
.border-b,
.border-l,
.border-r,
aside,
header,
nav,
.fixed,
.sticky { border-color: var(--api-line) !important; }

/* Table design: flat solid divider lists with transitions */
table,
thead,
tbody,
tr,
td,
th { border-color: var(--api-line) !important; }

.dark table,
.dark thead,
.dark tbody,
.dark tr,
.dark td,
.dark th { border-color: var(--api-line) !important; }
.dark th { border-bottom: 1px solid var(--api-line-strong) !important; }

tr, td {
  transition: background-color 0.16s ease !important;
}
table td,
table th {
  padding: 10px 14px !important;
  vertical-align: middle !important;
}

thead,
.bg-gray-50 {
  background: var(--api-bg-soft) !important;
}
.dark thead {
  background: var(--api-surface-muted) !important;
}

th {
  color: var(--api-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--api-line-strong) !important;
}

tr:hover,
tbody tr:hover {
  background: var(--api-accent-soft) !important;
}

/* Selected row highlighted backdrops */
.el-table__row.current-row > td.el-table__cell,
.el-table__row.is-hovering > td.el-table__cell,
.el-table__row.hover-row > td.el-table__cell {
  background-color: var(--api-bg-soft) !important;
}

/* ==========================================================================
   Minimalist Switches & Inputs
   ========================================================================== */

/* Flat Switches Overrides */
.el-switch__core {
  width: 44px !important;
  height: 22px !important;
  background-color: var(--api-bg-soft) !important;
  border: 1px solid var(--api-faint) !important;
  transition: all 0.2s !important;
}
.el-switch__core .el-switch__action {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--api-muted) !important;
  top: 2px !important;
  left: 2px !important;
}
.el-switch.is-checked .el-switch__core {
  background-color: var(--api-bg-soft) !important;
  border-color: var(--api-accent) !important;
}
.el-switch.is-checked .el-switch__core .el-switch__action {
  background-color: var(--api-accent) !important;
  left: calc(100% - 18px) !important;
}

/* Form Inputs */
.input,
input,
textarea,
select,
.el-input__inner,
.el-textarea__inner {
  background: var(--api-surface-solid) !important;
  border: 1px solid var(--api-faint) !important;
  color: var(--api-text) !important;
  outline: none !important;
  transition: border-color 0.16s ease !important;
}

.input:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: var(--api-text) !important;
}

.input:focus,
input:focus,
textarea:focus,
select:focus,
.el-input__inner:focus {
  border-color: var(--api-accent) !important;
}

::placeholder { color: var(--api-muted) !important; opacity: .5 !important; }

/* ==========================================================================
   Buttons (Understated Monochrome & Primary Hermes Accents)
   ========================================================================== */

.btn,
button,
.el-button,
a[role='button'] {
  box-shadow: none !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

/* Primary buttons carry the Hermes brand accent focus */
.btn-primary,
.bg-primary-600,
.hover\:bg-primary-700:hover,
.dark\:bg-primary-600:is(.dark *),
.el-button--primary {
  background: var(--api-accent) !important;
  color: var(--api-bg) !important;
  border: 1px solid var(--api-accent) !important;
}
.btn-primary:hover,
.bg-primary-600:hover,
.el-button--primary:hover {
  background: var(--api-accent-hover) !important;
  border-color: var(--api-accent-hover) !important;
  transform: none !important;
}

.dark .btn-primary,
.dark .bg-primary-600,
.dark .el-button--primary {
  background: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
  color: #041c1c !important;
}

/* Secondary buttons are strictly monochrome */
.btn-secondary,
.btn-ghost,
.bg-gray-100,
.hover\:bg-gray-200:hover,
.el-button--default {
  background: transparent !important;
  color: var(--api-text) !important;
  border: 1px solid var(--api-faint) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.el-button--default:hover {
  background: var(--api-bg-soft) !important;
  border-color: var(--api-text) !important;
  color: var(--api-text) !important;
}

.btn-danger { background: var(--api-danger) !important; color: #fff !important; }
.btn-success { background: var(--api-success) !important; color: #fff !important; }
.btn-warning { background: var(--api-warning) !important; color: #fff !important; }

/* ==========================================================================
   Badges, Dropdowns & Dialogs
   ========================================================================== */

/* Flat solid badges */
.badge,
[class*="badge"],
.el-tag {
  background-color: transparent !important;
  border: 1px solid var(--api-faint) !important;
  color: var(--api-muted) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 1px 5px !important;
}

/* Overlays, Dialogs and Popovers */
.el-overlay,
.fixed.inset-0:has([role="dialog"]),
.modal-backdrop {
  background-color: rgba(4, 28, 28, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:not(.dark) .el-overlay,
html:not(.dark) .fixed.inset-0:has([role="dialog"]),
html:not(.dark) .modal-backdrop {
  background-color: rgba(232, 240, 236, 0.45) !important;
}

[role='dialog'],
.el-dialog,
.el-message-box,
.el-dropdown-menu,
.el-select-dropdown,
.el-popper,
.el-popover,
.el-tooltip__popper {
  background-color: var(--api-bg) !important;
  border: 1px solid var(--api-faint) !important;
  box-shadow: none !important;
}

.el-popper__arrow::before {
  background-color: var(--api-bg) !important;
  border: 1px solid var(--api-faint) !important;
}

.el-dropdown-menu__item,
.el-select-dropdown__item {
  font-family: mondwestFont, zpixFont, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif !important;
  text-transform: uppercase !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.el-dropdown-menu__item:hover,
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item:hover {
  background-color: var(--api-bg-soft) !important;
  color: var(--api-text) !important;
}

.el-select-dropdown__item.is-selected {
  background-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}

.el-tabs__item.is-active {
  color: var(--api-accent) !important;
  font-weight: 700 !important;
}
.el-tabs__active-bar {
  background-color: var(--api-accent) !important;
}

/* Code highlight panel with premium warm gray left vertical bar */
pre,
code.hljs,
.font-mono-panel {
  border: 1px solid var(--api-faint) !important;
  border-left: 2px solid var(--api-muted) !important; 
  background: var(--api-bg-soft) !important;
  padding: 8px 12px !important;
  color: var(--api-text) !important;
}

/* ==========================================================================
   Tactile Scrollbars
   ========================================================================== */

* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--api-faint) transparent !important;
}

::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: var(--api-faint) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--api-muted) !important; }

/* ==========================================================================
   User Profile Pill & Sidebar Version Badge
   ========================================================================== */

button[aria-label="User Menu"] {
  background-color: transparent !important;
  border: 1px solid var(--api-faint) !important;
  padding: 4px 10px 4px 6px !important;
  gap: 8px !important;
  color: var(--api-text) !important;
}
button[aria-label="User Menu"]:hover {
  background-color: var(--api-bg-soft) !important;
}

button[aria-label="User Menu"] > div:first-child {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border: 1px solid var(--api-faint) !important;
}

button[aria-label="User Menu"] [class*="text-left"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0px !important;
  line-height: 1.1 !important;
}

button[aria-label="User Menu"] [class*="text-sm"] {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
button[aria-label="User Menu"] [class*="text-xs"] {
  font-size: 0.6rem !important;
  font-family: 'Courier Prime', monospace !important;
  color: var(--api-muted) !important;
}

/* Version badge */
.sidebar-brand .relative span.text-xs {
  color: var(--api-muted) !important;
  background-color: var(--api-bg-soft) !important;
  border: 1px solid var(--api-faint) !important;
  padding: 1px 4px !important;
  font-size: 0.65rem !important;
  font-family: 'Courier Prime', monospace !important;
  font-weight: 500 !important;
  margin-left: 6px !important;
}

/* ==========================================================================
   Public Home Terminal (Stark contrast code panel)
   ========================================================================== */

main h1.text-4xl, main h1.md\:text-5xl, main h1.lg\:text-6xl {
  font-size: clamp(36px, 5.0vw, 62px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  color: var(--api-text) !important;
  font-family: mondwestFont, zpixFont, monospace !important;
  text-transform: uppercase !important;
}

.terminal-container[data-v-e82cde1f] {
  width: min(440px, 100%) !important;
  background: #000000 !important;
  border: 1px solid #27272A !important;
}
.terminal-window[data-v-e82cde1f] {
  width: 100% !important;
  background: #000000 !important;
  border: none !important; /* Eliminate double border */
}

.terminal-header[data-v-e82cde1f] {
  background: #09090b !important;
  border-bottom: 1px solid #18181b !important;
}

.code-prompt[data-v-e82cde1f], .cursor[data-v-e82cde1f] {
  color: var(--api-accent) !important;
  background-color: var(--api-accent) !important;
}
.code-cmd[data-v-e82cde1f], .code-url[data-v-e82cde1f] { color: #FFFFFF !important; }
.code-comment[data-v-e82cde1f] { color: #52525B !important; font-style: normal !important; }

/* ==========================================================================
   Mobile Ergonomics & Responsive Adjustments
   ========================================================================== */

@media (max-width: 1023px) {
  .terminal-container[data-v-e82cde1f],
  .terminal-window[data-v-e82cde1f] { width: min(420px, calc(100vw - 48px)) !important; }
}

@media (max-width: 768px) {
  body { background-image: none !important; }
}

/* ==========================================================================
   Checkbox Elements Plus Overwrites (Hermes Straight Checkbox)
   ========================================================================== */

input[type="checkbox"]:not(.el-checkbox__original) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid var(--api-faint) !important;
  background-color: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  vertical-align: middle !important;
}

input[type="checkbox"]:not(.el-checkbox__original):hover {
  border-color: var(--api-text) !important;
}

input[type="checkbox"]:not(.el-checkbox__original):checked {
  background-color: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
}

input[type="checkbox"]:not(.el-checkbox__original)::after {
  content: '' !important;
  position: absolute !important;
  width: 3px !important;
  height: 6px !important;
  border: solid transparent !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(45deg) translate(-0.5px, -1.2px) !important;
  opacity: 0 !important;
}

input[type="checkbox"]:not(.el-checkbox__original):checked::after {
  opacity: 1 !important;
  border-color: var(--api-bg) !important;
}

.el-checkbox__inner {
  border: 1px solid var(--api-faint) !important;
  background-color: transparent !important;
  width: 14px !important;
  height: 14px !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: var(--api-bg) !important;
}
.el-checkbox:hover .el-checkbox__inner,
.el-checkbox__input:hover .el-checkbox__inner {
  border-color: var(--api-text) !important;
}

.el-radio__inner {
  border: 1px solid var(--api-faint) !important;
  background-color: transparent !important;
  width: 14px !important;
  height: 14px !important;
}
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
}
.el-radio__input.is-checked .el-radio__inner::after {
  background-color: var(--api-bg) !important;
  width: 4px !important;
  height: 4px !important;
}
.el-radio:hover .el-radio__inner,
.el-radio__input:hover .el-radio__inner {
  border-color: var(--api-text) !important;
}

.el-card__header,
.card-header {
  border-bottom: 1px solid var(--api-line) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}
.el-card__body,
.card-body {
  padding: 16px !important;
}

/* Force text colors to match our theme and prevent black-on-black text in dark mode */
.dark #app,
.dark #app *,
.dark .el-card,
.dark .el-table,
.dark .el-dialog,
.dark .el-select-dropdown {
  color: var(--api-text);
}

.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-zinc-900,
.dark .text-zinc-800,
.dark .text-zinc-700,
.dark .text-zinc-600 {
  color: var(--api-text) !important;
}

.dark .text-gray-500,
.dark .text-gray-400,
.dark .text-zinc-500,
.dark .text-zinc-400 {
  color: var(--api-muted) !important;
}

/* ── Dark Mode Custom Page Container Wrapper Resets ── */
.dark div[class*="bg-slate-"],
.dark div[class*="bg-zinc-"],
.dark div[class*="bg-gray-"],
.dark div[class*="bg-neutral-"],
.dark div[class*="bg-dark-"],
.dark div.min-h-screen {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Primary High-Contrast Text Color Reset ── */
[class*="bg-teal-"],
[class*="bg-cyan-"],
[class*="bg-primary-"],
.bg-teal-600,
.bg-teal-500,
.bg-cyan-600,
.bg-primary-600,
.el-button--primary {
  color: var(--api-bg) !important;
}
[class*="bg-teal-"] *,
[class*="bg-cyan-"] *,
[class*="bg-primary-"] *,
.bg-teal-600 *,
.bg-teal-500 *,
.bg-cyan-600 *,
.bg-primary-600 * {
  color: var(--api-bg) !important;
}

/* ── Light Mode Dark-Background Text Contrast Reset ── */
html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-zinc-900,
html:not(.dark) .bg-neutral-900,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-black {
  color: var(--api-bg) !important;
}
html:not(.dark) .bg-gray-900 *,
html:not(.dark) .bg-zinc-900 *,
html:not(.dark) .bg-neutral-900 *,
html:not(.dark) .bg-slate-900 *,
html:not(.dark) .bg-black * {
  color: var(--api-bg) !important;
}

/* ── Typography Class Overrides for Tailwind Components ── */
.font-sans {
  font-family: mondwestFont, zpixFont, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif !important;
}
.font-mono {
  font-family: 'Courier Prime', Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

/* ── Day Mode Retro Hard-Edge Shadow Interactions ── */
html:not(.dark) .btn-primary:hover,
html:not(.dark) .el-button--primary:hover,
html:not(.dark) .card:hover,
html:not(.dark) .el-card:hover {
  box-shadow: 2px 2px 0px var(--api-accent) !important;
}
html:not(.dark) .input:focus,
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .el-input__inner:focus {
  box-shadow: 2px 2px 0px var(--api-accent) !important;
}

/* ── Dark Mode Neon Glow Interactions ── */
.dark .btn-primary:hover,
.dark .el-button--primary:hover,
.dark .card:hover,
.dark .el-card:hover {
  box-shadow: 0 0 10px var(--api-accent) !important;
}
.dark .input:focus,
.dark input:focus,
.dark textarea:focus,
.dark .el-input__inner:focus {
  box-shadow: 0 0 8px var(--api-accent) !important;
}

/* ── Retro CRT Terminal Scanline Overlay ── */
.terminal-window[data-v-e82cde1f] {
  position: relative !important;
  overflow: hidden !important;
}
.terminal-window[data-v-e82cde1f]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.15) 50%
  ) !important;
  background-size: 100% 4px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ── Auth / Login Glass Card Styles & Contrast Resets ── */
.card-glass {
  background: var(--api-surface-solid) !important;
  border: 1px solid var(--api-line-strong) !important;
}
.card-glass label {
  color: var(--api-muted) !important;
}
.card-glass h2,
.card-glass p {
  color: var(--api-text) !important;
}
.card-glass a {
  color: var(--api-accent) !important;
}
.card-glass a:hover {
  color: var(--api-accent-hover) !important;
}
/* Ensure login inputs are high contrast against the card background */
.card-glass input {
  background: var(--api-bg) !important;
  border: 1px solid var(--api-faint) !important;
  color: var(--api-text) !important;
}
.card-glass input:focus {
  border-color: var(--api-accent) !important;
}

/* ── Toasts & Notification Box Contrast Resets ── */
div[class*="toast-progress"],
.toast-progress {
  background-color: var(--api-accent) !important;
}
div[class*="toast"]:not([class*="toast-progress"]),
div[class*="notification"],
.toast:not(.toast-progress),
.notification,
.el-notification,
.el-message {
  background-color: var(--api-surface-solid) !important;
  border: 1px solid var(--api-line-strong) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 99999 !important;
}
.dark div[class*="toast"]:not([class*="toast-progress"]),
.dark div[class*="notification"],
.dark .toast:not(.toast-progress),
.dark .notification,
.dark .el-notification,
.dark .el-message {
  background-color: var(--api-bg-soft) !important;
  z-index: 99999 !important;
}
/* Force toast texts to follow theme colors */
div[class*="toast"] p,
div[class*="notification"] p,
.toast p,
.notification p,
.el-notification__content,
.el-message__content {
  color: var(--api-text) !important;
}

/* ==========================================================================
   余额与高亮处 (Tailwind Primary) 颜色覆盖修正
   ========================================================================== */

/* 1. 统一重载所有余额与高亮文字处的 Tailwind Primary 类名，使其跟随主题高亮色 */
.text-primary-50, .text-primary-100, .text-primary-200, .text-primary-300, 
.text-primary-400, .text-primary-500, .text-primary-600, .text-primary-700, 
.text-primary-800, .text-primary-900, .text-primary-950,
[class*="text-primary-"] {
  color: var(--api-accent) !important;
}

/* 2. 重载高亮背景处的 Tailwind Primary 类名，使其跟随主题高亮背景 */

/* 2a. 浅色高亮背景（如警示、轻微高亮背景）- 统一使用浅柔和主色背景 */
.bg-primary-50, .bg-primary-100, .bg-primary-200, .bg-primary-300, .bg-primary-400 {
  background-color: var(--api-accent-soft) !important;
  color: var(--api-text) !important;
}

/* 2b. 深色高亮背景（如余额卡片、重要高亮底色）- 亮色下为深绿底，暗色下为金底 */
.bg-primary-500, .bg-primary-600, .bg-primary-700, .bg-primary-800, .bg-primary-900, .bg-primary-950,
[class*="bg-primary-"] {
  background-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}

/* 2c. 确保深色卡片内部的所有常规子元素文字能看清（强行设为高对比字色） */
.bg-primary-500 *, .bg-primary-600 *, .bg-primary-700 *, .bg-primary-800 *, .bg-primary-900 *, .bg-primary-950 *,
[class*="bg-primary-"] * {
  color: var(--api-accent-contrast) !important;
}

/* 2d. 核心防重叠机制：当 text-primary 类名位于 bg-primary- 深色卡片容器内部时，强制转为高对比字色，防止前背景字色重合 */
[class*="bg-primary-"] [class*="text-primary-"],
[class*="bg-primary-"] .text-primary-50,
[class*="bg-primary-"] .text-primary-100,
[class*="bg-primary-"] .text-primary-200,
[class*="bg-primary-"] .text-primary-300,
[class*="bg-primary-"] .text-primary-400,
[class*="bg-primary-"] .text-primary-500,
[class*="bg-primary-"] .text-primary-600,
[class*="bg-primary-"] .text-primary-700 {
  color: var(--api-accent-contrast) !important;
}

/* 3. 语言切换等选中高亮项的特定前景色与背景色融合 */
div.relative > div.absolute.right-0.z-50.w-32 button.bg-primary-50,
div.relative > div.absolute.right-0.z-50.w-32 button[class*="bg-primary"] {
  background-color: var(--api-accent-soft) !important;
  color: var(--api-accent) !important;
}

/* ==========================================================================
   全站细节打磨：Element Plus 隐藏视觉 Bug 定向修复
   ========================================================================== */

/* 1. 开关组件 (Switch) 极致直角规范 */
.el-switch__core,
.el-switch__core .el-switch__action {
  border-radius: 0px !important;
}

/* 2. 分页组件 (Pagination) 全状态极客化 */
.el-pagination button,
.el-pager li {
  background-color: transparent !important;
  border: 1px solid var(--api-faint) !important;
  color: var(--api-text) !important;
  font-family: mondwestFont, zpixFont, monospace !important;
  border-radius: 0px !important;
}
.el-pager li.is-active,
.el-pager li.active {
  background-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
  border-color: var(--api-accent) !important;
}
.el-pager li:hover,
.el-pagination button:hover {
  border-color: var(--api-accent) !important;
  color: var(--api-accent) !important;
}
.el-pager li.is-active:hover {
  color: var(--api-accent-contrast) !important;
}

/* 3. 标签页组件 (Tabs) hover 交互纠正 */
.el-tabs__item:hover {
  color: var(--api-accent-hover) !important;
}

/* 4. 滑块组件 (Slider) 极致直角与主题高亮 */
.el-slider__runway {
  background-color: var(--api-bg-soft) !important;
  border: 1px solid var(--api-faint) !important;
  height: 6px !important;
  border-radius: 0px !important;
}
.el-slider__bar {
  background-color: var(--api-accent) !important;
  height: 6px !important;
  border-radius: 0px !important;
}
.el-slider__button {
  width: 12px !important;
  height: 12px !important;
  border: 1px solid var(--api-accent) !important;
  background-color: var(--api-bg) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  transition: transform 0.1s ease !important;
}
.el-slider__button:hover,
.el-slider__button.dragging {
  transform: scale(1.2) !important;
  background-color: var(--api-accent) !important;
}

/* 5. 加载遮罩与动画圈 (Loading) 主色纠正 */
.el-loading-mask {
  background-color: rgba(4, 28, 28, 0.45) !important;
}
.dark .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.el-loading-spinner .path {
  stroke: var(--api-accent) !important;
}
.el-loading-spinner .el-loading-text {
  color: var(--api-accent) !important;
  font-family: mondwestFont, zpixFont, monospace !important;
}

/* 6. 全局原生及输入控件焦点 (Focus Ring) 亮蓝色清除 */
*:focus-visible {
  outline: 1px solid var(--api-accent) !important;
  outline-offset: -1px !important;
}
.el-textarea__inner:focus,
.el-input__inner:focus {
  border-color: var(--api-accent) !important;
}/* ==========================================================================
   全站悬浮/弹出容器半透明及边框视觉 Bug 根治补丁
   ========================================================================== */

/* ── 1. 全站弹出与悬浮层组件透明透光 Bug 根治 ── */
div.relative > div.absolute.right-0.z-50.w-32, /* 语言切换面板 */
.el-drawer,
.el-picker-panel,
.el-date-picker,
.el-date-range-picker,
.el-autocomplete-suggestion,
.el-image-viewer__actions,
.el-popper.is-light,
.el-popper.is-dark,
.el-popper__arrow::before,
.el-table__expanded-cell, /* 数据表格展开明细行 */
div.absolute.z-50, /* 确保所有绝对定位的高 z-index 悬浮框实心化 */
div.fixed.z-50:not(.inset-0) {
  background-color: var(--api-bg) !important;
  background: var(--api-bg) !important;
  opacity: 1 !important;
  border: 1px solid var(--api-line-strong) !important;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.dark div.relative > div.absolute.right-0.z-50.w-32,
.dark .el-drawer,
.dark .el-picker-panel,
.dark .el-date-picker,
.dark .el-date-range-picker,
.dark .el-autocomplete-suggestion,
.dark .el-image-viewer__actions,
.dark .el-popper.is-light,
.dark .el-popper.is-dark,
.dark .el-popper__arrow::before,
.dark .el-table__expanded-cell,
.dark div.absolute.z-50,
.dark div.fixed.z-50:not(.inset-0) {
  background-color: var(--api-bg) !important;
  background: var(--api-bg) !important;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.55) !important;
}

/* ── 2. 边框与细节 Bug 定向修复 ── */
.el-collapse,
.el-collapse-item__header,
.el-collapse-item__wrap,
.el-dropdown-menu__item--divided {
  border-color: var(--api-line) !important;
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
  border-color: var(--api-faint) !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
}

/* ── 3. 代码复制面板及骨架屏背景实心与对比度 ── */
.copy-btn,
.code-lang-tag {
  background-color: var(--api-bg-soft) !important;
  border: 1px solid var(--api-faint) !important;
}

.el-skeleton__item {
  background-color: var(--api-surface-muted) !important;
}

/* ==========================================================================
   Stark Technical 工业细节打磨 (CRT Retro Micro-Interactions Polish)
   ========================================================================== */

/* 1. 表格数据行 (Table Rows) 悬停打磨 ── 行内文字高亮为主色，增强导向焦点 */
.el-table__row {
  transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.el-table__row:hover td {
  color: var(--api-accent) !important;
  transition: color 0.15s ease !important;
}

/* 2. 卡片 (Cards) 悬停打磨 ── 像素化立体抬起 (Pixel Press) 触觉交互 */
.el-card, .card {
  position: relative !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.el-card:hover, .card:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 1px 1px 0px var(--api-accent) !important;
  border-color: var(--api-accent) !important;
}

/* 3. 按钮 (Buttons) 悬停打磨 ── CRT 显像管荧光字效与微平移动效 */
.btn, button, .el-button {
  position: relative !important;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn:hover, button:hover, .el-button:hover {
  transform: translateY(-1px) !important;
}
.btn:active, button:active, .el-button:active {
  transform: translateY(0px) !important;
}
.btn-primary:hover, .el-button--primary:hover {
  text-shadow: 0 0 3px currentColor !important;
}

/* 4. 显像管背景光栅细线 (CRT Horizontal Grille Lines) 缓慢融入 ── 提升背景物理拟真感 */
body::after {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(26, 58, 42, 0.02) 50%),
    url('/filler-bg0.jpg') !important;
  background-size: 100% 4px, cover !important;
}
.dark body::after {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(255, 230, 203, 0.015) 50%),
    url('/filler-bg0.jpg') !important;
  background-size: 100% 4px, cover !important;
}

/* 5. 输入框/文本域聚焦打磨 ── 脉冲柔和高光 */
input:focus, textarea:focus, .el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--api-accent) !important;
  box-shadow: 0 0 6px var(--api-accent-soft) !important;
}

/* ==========================================================================
   Stark Technical V2 高阶打磨 (Technical CRT Glow & Selection Polish)
   ========================================================================== */

/* 1. 全局文本选中 (Text Selection) ── 消除系统亮蓝，融入主题高对比金/绿底色 */
::selection {
  background-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}
::-moz-selection {
  background-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}

/* 2. 状态彩色标签 (LED Glow Tags) ── 增加本色 LED 发光感，宛如物理二极管指示灯 */
.el-tag {
  box-shadow: 0 0 4px currentColor !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

/* 3. 全局 SVG / 图标悬停 (Icon Glow) ── 悬停时图标亮起主色微光滤镜 */
.sidebar-link:hover i,
.sidebar-link:hover svg,
.el-button:hover i,
.el-button:hover svg {
  filter: drop-shadow(0 0 1.5px var(--api-accent)) !important;
  transition: filter 0.15s ease !important;
}

/* 4. 折叠面板激活态 (Active Collapse Head) ── 开启时标题高亮，且左侧亮起主色物理指示线 */
.el-collapse-item__header {
  border-left: 3px solid transparent !important;
  padding-left: 0px !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.el-collapse-item__header.is-active {
  color: var(--api-accent) !important;
  border-left-color: var(--api-accent) !important;
  padding-left: 10px !important;
}

/* 5. 顶部全局加载条 (NProgress) ── 加载条转为主题色并自带发光头部 */
#nprogress .bar {
  background: var(--api-accent) !important;
  height: 3px !important;
  box-shadow: 0 0 8px var(--api-accent) !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--api-accent), 0 0 5px var(--api-accent) !important;
}

/* ==========================================================================
   Stark Technical V3 调试手感与速度优化 (Production Tweak & Text Sharpening)
   ========================================================================== */

/* 1. 闪电级微交互调速 ── 将过渡延迟由 0.16s 压缩为 0.08s，消除粘滞肉感 */
.btn, button, .el-button,
input, textarea, select, .el-input__inner, .el-textarea__inner,
.el-table__row, .sidebar-link, .el-tabs__item, .el-dropdown-menu__item,
.el-select-dropdown__item {
  transition: all 0.08s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}

/* 2. 等宽文本亚像素极致锐化 ── 优化调试代码与 JSON 响应的字符清晰度 */
code, pre, kbd, samp, .font-mono, td code, table td {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-smooth: always !important;
  letter-spacing: -0.01em !important;
}

/* 3. 输入聚焦瞬间硬核亮起 ── 参数配置与 Header 输入体验提速 */
input:focus, textarea:focus, .el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--api-accent) !important;
  box-shadow: 0 0 0 2px var(--api-accent-soft) !important;
  transition: border-color 0.05s ease, box-shadow 0.05s ease !important;
}

/* 4. 输入光标 (Caret Color) 主题化 ── 闪烁光标自适应金/绿主色，提供精准焦点指引 */
input, textarea, .el-input__inner, .el-textarea__inner {
  caret-color: var(--api-accent) !important;
}

/* 5. 复制按钮 (Copy Button) 物理瞬时回弹 ── 鼠标点击时产生微小偏振与高亮 */
.copy-btn:active, .code-lang-tag:active {
  transform: scale(0.94) !important;
  filter: brightness(1.25) !important;
  transition: transform 0.05s ease !important;
}

/* ==========================================================================
   Day Mode 亮色主题专项 ── 文字隐形与颜色不协调完美覆盖补丁
   ========================================================================== */
html:not(.dark) {
  /* ── A. 亮色输入聚焦立体硬边缘阴影纠正与发光强化 ── */
  --api-accent-soft: rgba(26, 58, 42, 0.22) !important; /* 加深呼吸光圈透明度 */
}

/* 亮色模式下优先保留复古硬边缘立体投影，防止被全局 V3 柔和发光样式覆盖 */
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .el-input__inner:focus,
html:not(.dark) .el-card:hover,
html:not(.dark) .card:hover {
  box-shadow: 2px 2px 0px var(--api-accent) !important;
}

/* ── B. 亮色模式代码高亮文字颜色注入（彻底解决文字隐形 bug） ── */
html:not(.dark) pre code.hljs {
  color: var(--api-text) !important;
}
html:not(.dark) .hljs-comment,
html:not(.dark) .hljs-quote {
  color: #5c7c64 !important; /* 淡墨绿注释 */
  font-style: italic !important;
}
html:not(.dark) .hljs-keyword,
html:not(.dark) .hljs-selector-tag,
html:not(.dark) .hljs-addition {
  color: #0b4f30 !important; /* 经典深墨绿关键字 */
  font-weight: 700 !important;
}
html:not(.dark) .hljs-number,
html:not(.dark) .hljs-string,
html:not(.dark) .hljs-meta,
html:not(.dark) .hljs-special {
  color: #a62626 !important; /* 复古砖红色 */
}
html:not(.dark) .hljs-literal,
html:not(.dark) .hljs-type,
html:not(.dark) .hljs-built_in {
  color: #2b5c8f !important; /* 稳重深蓝色 */
}
html:not(.dark) .hljs-attr,
html:not(.dark) .hljs-variable,
html:not(.dark) .hljs-template-variable {
  color: #8c520a !important; /* 深黄褐色 */
}

/* ── C. 亮色模式 Tailwind 弱提示文字对比度强制补偿 ── */
html:not(.dark) .text-gray-400,
html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-500,
html:not(.dark) .text-gray-500 {
  color: var(--api-muted) !important; /* 统一映射为足够对比度的次级深色 */
}

/* ── D. 亮色模式表单占位符（Placeholder）可见性提升 ── */
html:not(.dark) ::placeholder {
  color: var(--api-muted) !important;
  opacity: 0.72 !important; /* 提升可见性 */
}

/* ── E. 亮色模式加载遮罩（Loading）颜色重载 ── */
html:not(.dark) .el-loading-mask {
  background-color: rgba(232, 240, 236, 0.65) !important; /* 变更为浅灰绿半透明 */
}

/* ── F. 亮色模式地形背景图彻底清空，保障卡片内部纯净无脏污 ── */
html:not(.dark) body::after {
  background-image: none !important; /* 彻底移除等高线，只留背景噪声与柔和网格 */
}

/* ── G. 亮色模式代码块复制/语言标签提升物理立体层次 ── */
html:not(.dark) .copy-btn,
html:not(.dark) .code-lang-tag {
  background-color: var(--api-bg) !important; /* 用较浅的纯底色，与背景 soft 产生层级差 */
  border: 1px solid var(--api-line-strong) !important;
  color: var(--api-text) !important;
}

/* ── H. 亮色模式滚动条可视度微调 ── */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: var(--api-muted) !important;
  opacity: 0.4 !important;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: var(--api-accent) !important;
}

/* ==========================================================================
   Light/Dark Alignment Layer - 2026-06-09
   Goal: make light mode use the same technical structure as dark mode.
   Sources: Nous-style terminal grid, hard borders, restrained monochrome labels.
   ========================================================================== */

:root {
  color-scheme: light;
  --api-bg: #f0f3ee;
  --api-bg-soft: #e4ebe3;
  --api-surface: rgba(248, 250, 246, 0.76);
  --api-surface-solid: #f8faf6;
  --api-surface-muted: #d9e1d8;
  --api-elevated: #ffffff;
  --api-text: #13231f;
  --api-muted: #415b52;
  --api-faint: #b8c4b5;
  --api-line: rgba(19, 35, 31, 0.16);
  --api-line-strong: rgba(19, 35, 31, 0.34);
  --api-accent: #13231f;
  --api-accent-hover: #2b463e;
  --api-accent-soft: rgba(19, 35, 31, 0.08);
  --api-accent-contrast: #f0f3ee;
  --api-success: #287047;
  --api-warning: #8f5b16;
  --api-danger: #a64242;
  --api-blue: #315f7a;
  --api-hermes-field: url('/filler-bg0.jpg');
  --api-terminal-grid: url('/scolv-light-grid.svg?v=2026060901');
  --api-terminal-noise: url('/scolv-light-noise.svg?v=2026060901');
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app {
  background-color: var(--api-bg) !important;
  color: var(--api-text) !important;
}

html:not(.dark) body::before {
  background:
    linear-gradient(90deg, rgba(19, 35, 31, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(19, 35, 31, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 243, 238, 0.86), rgba(240, 243, 238, 0.78)),
    var(--api-hermes-field),
    var(--api-terminal-grid) !important;
  background-size: 80px 80px, 80px 80px, cover, cover, 320px 320px !important;
  background-position: 0 0, 0 0, center, center, 0 0 !important;
  mix-blend-mode: multiply !important;
  opacity: 0.68 !important;
  filter: grayscale(1) contrast(0.84) brightness(1.12) !important;
}

html:not(.dark) body::after {
  background:
    linear-gradient(180deg, rgba(19, 35, 31, 0.035) 1px, transparent 1px),
    var(--api-hermes-field),
    var(--api-terminal-noise) !important;
  background-size: 100% 5px, cover, 256px 256px !important;
  background-position: 0 0, center, 0 0 !important;
  mix-blend-mode: multiply !important;
  opacity: 0.13 !important;
  filter: grayscale(1) contrast(0.92) brightness(1.06) !important;
}

html:not(.dark) #app::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(19, 35, 31, 0.09), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(49, 95, 122, 0.08), transparent 34%) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.58 !important;
}

html:not(.dark) #app::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(19, 35, 31, 0.045) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(19, 35, 31, 0.08) 79px 80px) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.28 !important;
}

html:not(.dark) .app-layout,
html:not(.dark) .el-main,
html:not(.dark) main,
html:not(.dark) .main-content,
html:not(.dark) [class*="dashboard"] {
  background: transparent !important;
}

html:not(.dark) .card,
html:not(.dark) .el-card,
html:not(.dark) .bg-white,
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-zinc-50,
html:not(.dark) .bg-slate-50 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), var(--api-surface)) !important;
  border: 1px solid var(--api-line-strong) !important;
  box-shadow:
    1px 1px 0 rgba(19, 35, 31, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(8px) saturate(0.96) !important;
}

html:not(.dark) .card:hover,
html:not(.dark) .el-card:hover {
  border-color: var(--api-accent) !important;
  box-shadow:
    2px 2px 0 var(--api-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  transform: translate(-1px, -1px) !important;
}

html:not(.dark) .el-header,
html:not(.dark) header,
html:not(.dark) .topbar,
html:not(.dark) .navbar {
  background: rgba(240, 243, 238, 0.88) !important;
  border-bottom: 1px solid var(--api-line-strong) !important;
  backdrop-filter: blur(12px) saturate(0.94) !important;
}

html:not(.dark) .el-aside,
html:not(.dark) aside,
html:not(.dark) .sidebar {
  background:
    linear-gradient(180deg, rgba(248, 250, 246, 0.86), rgba(228, 235, 227, 0.82)) !important;
  border-right: 1px solid var(--api-line-strong) !important;
}

html:not(.dark) .sidebar-link,
html:not(.dark) .menu-item,
html:not(.dark) .el-menu-item {
  color: var(--api-muted) !important;
  border: 1px solid transparent !important;
}

html:not(.dark) .sidebar-link:hover,
html:not(.dark) .menu-item:hover,
html:not(.dark) .el-menu-item:hover {
  color: var(--api-text) !important;
  background: var(--api-accent-soft) !important;
  border-color: var(--api-line) !important;
}

html:not(.dark) .sidebar-link.active,
html:not(.dark) .router-link-active,
html:not(.dark) .el-menu-item.is-active {
  color: var(--api-accent-contrast) !important;
  background: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
}

html:not(.dark) table,
html:not(.dark) .el-table,
html:not(.dark) .el-table__inner-wrapper,
html:not(.dark) .el-table__body-wrapper,
html:not(.dark) .el-table__header-wrapper {
  background: transparent !important;
  color: var(--api-text) !important;
}

html:not(.dark) thead,
html:not(.dark) .el-table th,
html:not(.dark) .el-table__header th {
  background: var(--api-surface-muted) !important;
  color: var(--api-text) !important;
  border-bottom: 1px solid var(--api-line-strong) !important;
}

html:not(.dark) tbody tr,
html:not(.dark) .el-table tr {
  background: rgba(248, 250, 246, 0.52) !important;
}

html:not(.dark) tbody tr:hover,
html:not(.dark) .el-table__body tr:hover > td {
  background: var(--api-accent-soft) !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .el-input__wrapper,
html:not(.dark) .el-textarea__inner,
html:not(.dark) .el-select__wrapper {
  background: rgba(248, 250, 246, 0.92) !important;
  border: 1px solid var(--api-line-strong) !important;
  color: var(--api-text) !important;
  box-shadow: inset 1px 1px 0 rgba(19, 35, 31, 0.08) !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .el-input__wrapper.is-focus,
html:not(.dark) .el-select__wrapper.is-focused {
  border-color: var(--api-accent) !important;
  box-shadow:
    0 0 0 1px var(--api-accent),
    2px 2px 0 rgba(19, 35, 31, 0.18) !important;
}

html:not(.dark) .el-button,
html:not(.dark) button {
  border-radius: 0 !important;
}

html:not(.dark) .el-button--primary,
html:not(.dark) .btn-primary,
html:not(.dark) .bg-primary-600 {
  background: var(--api-accent) !important;
  border-color: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}

html:not(.dark) .el-button--primary:hover,
html:not(.dark) .btn-primary:hover {
  background: var(--api-accent-hover) !important;
  border-color: var(--api-accent-hover) !important;
}

html:not(.dark) .el-tag,
html:not(.dark) .badge,
html:not(.dark) [class*="tag"] {
  background: rgba(248, 250, 246, 0.72) !important;
  border: 1px solid var(--api-line-strong) !important;
  color: var(--api-text) !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-500,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500,
html:not(.dark) .el-text,
html:not(.dark) .el-form-item__label {
  color: var(--api-muted) !important;
}

html:not(.dark) pre,
html:not(.dark) code,
html:not(.dark) .code-block,
html:not(.dark) .hljs {
  background: #eef3ec !important;
  color: var(--api-text) !important;
  border-color: var(--api-line-strong) !important;
}

html:not(.dark) .el-dialog,
html:not(.dark) .el-drawer,
html:not(.dark) .el-popover,
html:not(.dark) .el-popper,
html:not(.dark) .el-dropdown__popper {
  background: var(--api-elevated) !important;
  border: 1px solid var(--api-line-strong) !important;
  box-shadow: 3px 3px 0 rgba(19, 35, 31, 0.18) !important;
}

html:not(.dark) ::selection {
  background: var(--api-accent) !important;
  color: var(--api-accent-contrast) !important;
}

html:not(.dark) #app::before,
html:not(.dark) #app::after {
  z-index: 0 !important;
}

html:not(.dark) #app > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  html:not(.dark) body::before {
    background-size: 64px 64px, 64px 64px, 320px 320px !important;
    opacity: 0.34 !important;
  }

  html:not(.dark) #app::after {
    opacity: 0.16 !important;
  }
}