/* Sub2API custom UI theme v8 for api.lyhyun.top
   Direction: quieter Apple/iOS-inspired monochrome minimalism.
   Notes: CSS overlay only; no Sub2API binary changes. */

:root {
  --ios-bg: #f5f5f7;
  --ios-surface: #ffffff;
  --ios-surface-soft: rgba(255,255,255,.72);
  --ios-text: #111111;
  --ios-muted: #6b6b6f;
  --ios-subtle: #9b9ba1;
  --ios-line: #e5e5e7;
  --ios-line-strong: #d8d8dc;
  --ios-fill: #f2f2f4;
  --ios-fill-2: #ececef;
  --ios-black: #111111;
  --ios-radius: 20px;
  --ios-radius-sm: 12px;
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app {
  background: var(--ios-bg) !important;
  color: var(--ios-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}

html:not(.dark) body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:not(.dark) body::before,
html:not(.dark) body::after {
  content: none !important;
  display: none !important;
}

html:not(.dark) .min-h-screen,
html:not(.dark) .bg-gradient-to-br,
html:not(.dark) .relative.flex.min-h-screen,
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-gray-100 {
  background: transparent !important;
}

html:not(.dark) .pointer-events-none.absolute.inset-0.overflow-hidden {
  display: none !important;
}

/* Header: less SaaS pill, more iOS toolbar. */
html:not(.dark) header,
html:not(.dark) .relative.z-20.px-6.py-4 {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 28px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(229,229,231,.72) !important;
  border-radius: 0 !important;
  background: rgba(245,245,247,.78) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: none !important;
}

html:not(.dark) header nav,
html:not(.dark) .mx-auto.flex.max-w-6xl.items-center.justify-between {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html:not(.dark) .h-10.w-10.overflow-hidden.rounded-xl.shadow-md {
  width: 30px !important;
  height: 30px !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) .h-10.w-10.overflow-hidden.rounded-xl.shadow-md img,
html:not(.dark) .h-10.w-10.overflow-hidden.rounded-xl.shadow-md svg {
  filter: grayscale(1) contrast(1.08) !important;
  opacity: .88 !important;
}

html:not(.dark) header button,
html:not(.dark) header a,
html:not(.dark) .relative.z-20 button,
html:not(.dark) .relative.z-20 a {
  border-radius: 999px !important;
  color: var(--ios-text) !important;
  box-shadow: none !important;
}

/* Make top Login a text control so the hero CTA remains primary. */
html:not(.dark) header a[href="/login"],
html:not(.dark) .relative.z-20 a[href="/login"] {
  border: 0 !important;
  background: transparent !important;
  color: var(--ios-text) !important;
  padding: 6px 2px !important;
  font-size: 14px !important;
  font-weight: 520 !important;
  box-shadow: none !important;
}

html:not(.dark) header button:hover,
html:not(.dark) header a:hover {
  background: transparent !important;
  color: #000 !important;
  opacity: .62 !important;
  transform: none !important;
}

html:not(.dark) header button,
html:not(.dark) .relative.z-20 button {
  background: transparent !important;
  border: 0 !important;
}

html:not(.dark) header button img,
html:not(.dark) header button svg {
  filter: grayscale(1) !important;
  opacity: .72 !important;
}

/* Hero */
html:not(.dark) main.relative.z-10,
html:not(.dark) .relative.z-10.flex-1.px-6.py-16 {
  padding-top: clamp(58px, 7vw, 96px) !important;
  padding-bottom: 70px !important;
}

html:not(.dark) .mx-auto.max-w-6xl {
  max-width: 1080px !important;
}

html:not(.dark) h1,
html:not(.dark) .mb-4.text-4xl.font-bold.text-gray-900 {
  max-width: 520px !important;
  color: var(--ios-text) !important;
  font-size: clamp(38px, 4.1vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  font-weight: 650 !important;
}

html:not(.dark) h1::after,
html:not(.dark) .mb-4.text-4xl.font-bold.text-gray-900::after {
  content: none !important;
  display: none !important;
}

html:not(.dark) p,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-dark-400 {
  color: var(--ios-muted) !important;
}

html:not(.dark) .mb-8.text-lg.text-gray-600 {
  max-width: 500px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  letter-spacing: -.01em !important;
  margin-bottom: 26px !important;
}

/* Primary controls: one quiet black CTA. */
html:not(.dark) .btn.btn-primary,
html:not(.dark) a[href="/login"].btn,
html:not(.dark) a[href="/dashboard"].btn,
html:not(.dark) a[href="/admin/dashboard"].btn,
html:not(.dark) .btn-primary,
html:not(.dark) .bg-primary-600,
html:not(.dark) .bg-primary-500,
html:not(.dark) button[type="submit"],
html:not(.dark) .n-button--primary-type,
html:not(.dark) .el-button--primary,
html:not(.dark) .ant-btn-primary {
  min-height: 40px !important;
  border: 1px solid var(--ios-black) !important;
  border-radius: 999px !important;
  background: var(--ios-black) !important;
  color: #fff !important;
  padding: 9px 19px !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  letter-spacing: -.005em !important;
  box-shadow: none !important;
  transition: opacity .14s ease, background .14s ease !important;
}

html:not(.dark) .btn.btn-primary:hover,
html:not(.dark) .btn-primary:hover,
html:not(.dark) button[type="submit"]:hover {
  background: #000 !important;
  border-color: #000 !important;
  transform: none !important;
  opacity: .88 !important;
}

html:not(.dark) .btn-secondary,
html:not(.dark) .bg-white {
  border-color: var(--ios-line) !important;
  background: var(--ios-surface) !important;
  color: var(--ios-text) !important;
  box-shadow: none !important;
}

/* Terminal visual: keep the product feel, remove decorative color and heavy depth. */
html:not(.dark) .terminal-container {
  filter: none !important;
}

html:not(.dark) .terminal-window {
  width: min(390px, 88vw) !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: var(--ios-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:not(.dark) .terminal-window:hover {
  transform: none !important;
}

html:not(.dark) .terminal-header {
  padding: 11px 14px !important;
  background: #fafafa !important;
  border-bottom: 1px solid var(--ios-line) !important;
}

html:not(.dark) .terminal-header * {
  filter: grayscale(1) !important;
}

html:not(.dark) .terminal-title {
  color: var(--ios-subtle) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html:not(.dark) .terminal-body {
  padding: 18px 20px !important;
  font-size: 13px !important;
  line-height: 1.82 !important;
  background: #fff !important;
}

html:not(.dark) .code-cmd,
html:not(.dark) .code-url,
html:not(.dark) .code-flag,
html:not(.dark) .code-response,
html:not(.dark) .code-prompt,
html:not(.dark) .code-success {
  color: #222 !important;
}

html:not(.dark) .code-success {
  background: var(--ios-fill) !important;
  border-radius: 6px !important;
}

html:not(.dark) .cursor {
  background: #111 !important;
}

/* Feature chips: make them text-like, not pills. */
html:not(.dark) .mb-12.flex.flex-wrap.items-center.justify-center.gap-4 {
  gap: 18px !important;
  margin-top: 18px !important;
  margin-bottom: 40px !important;
}

html:not(.dark) .mb-12.flex.flex-wrap.items-center.justify-center.gap-4 > div,
html:not(.dark) .inline-flex.items-center.gap-2\.5.rounded-full {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--ios-muted) !important;
  font-size: 14px !important;
}

html:not(.dark) .inline-flex.items-center.gap-2\.5.rounded-full svg,
html:not(.dark) .text-primary-500 {
  color: var(--ios-muted) !important;
  opacity: .86 !important;
}

/* Feature cards: fewer boxes, more spacing. */
html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 {
  gap: 38px !important;
  margin-bottom: 72px !important;
}

html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 > div,
html:not(.dark) .group.rounded-2xl.border.border-gray-200\/50.bg-white\/60,
html:not(.dark) .group.rounded-2xl,
html:not(.dark) .card,
html:not(.dark) [class~="card"],
html:not(.dark) .n-card,
html:not(.dark) .el-card,
html:not(.dark) .ant-card {
  position: relative;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 > div::before,
html:not(.dark) .group.rounded-2xl::before {
  content: none !important;
}

html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 > div:hover,
html:not(.dark) .group.rounded-2xl:hover,
html:not(.dark) .card:hover {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) .mb-4.flex.h-12.w-12,
html:not(.dark) .h-12.w-12 {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ios-subtle) !important;
  box-shadow: none !important;
}

html:not(.dark) .mb-4.flex.h-12.w-12 svg,
html:not(.dark) .h-12.w-12 svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--ios-muted) !important;
  opacity: .82 !important;
}

html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) .text-lg.font-semibold,
html:not(.dark) .mb-3.text-2xl.font-bold {
  color: var(--ios-text) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}

html:not(.dark) .text-lg.font-semibold {
  font-size: 16px !important;
}

html:not(.dark) .text-sm.leading-relaxed {
  font-size: 14px !important;
  line-height: 1.68 !important;
}

/* Model section: text chips, no repeated badges. */
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 {
  gap: 24px !important;
  margin-bottom: 56px !important;
}

html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 > div,
html:not(.dark) .rounded-xl.border.border-primary-200,
html:not(.dark) .rounded-xl.border.border-gray-200\/50 {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--ios-muted) !important;
}

html:not(.dark) .rounded.bg-primary-100,
html:not(.dark) .rounded.bg-gray-100 {
  display: none !important;
}

/* Footer */
html:not(.dark) footer,
html:not(.dark) .relative.z-10.border-t {
  border-top: 1px solid var(--ios-line) !important;
  background: transparent !important;
  color: var(--ios-subtle) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark) footer a {
  color: var(--ios-muted) !important;
  text-decoration: none !important;
}

/* Console / dashboard: Apple Settings-like, monochrome. */
html:not(.dark) aside,
html:not(.dark) [class*="sidebar"],
html:not(.dark) [class*="Sidebar"],
html:not(.dark) .fixed.inset-y-0,
html:not(.dark) .w-64,
html:not(.dark) .w-72 {
  border-color: var(--ios-line) !important;
  background: rgba(245,245,247,.82) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  box-shadow: none !important;
}

html:not(.dark) .border-r,
html:not(.dark) .border-b,
html:not(.dark) .border-t,
html:not(.dark) .border,
html:not(.dark) .border-gray-100,
html:not(.dark) .border-gray-200,
html:not(.dark) .border-gray-300,
html:not(.dark) .border-slate-200 {
  border-color: var(--ios-line) !important;
}

html:not(.dark) .sticky.top-0,
html:not(.dark) .h-16.border-b,
html:not(.dark) .topbar,
html:not(.dark) [class*="Topbar"],
html:not(.dark) [class*="Header"] {
  background: rgba(245,245,247,.82) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border-color: var(--ios-line) !important;
  box-shadow: none !important;
}

html:not(.dark) .text-gray-900,
html:not(.dark) .text-slate-900,
html:not(.dark) .text-zinc-900 {
  color: var(--ios-text) !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600,
html:not(.dark) .text-zinc-500,
html:not(.dark) .text-zinc-600 {
  color: var(--ios-muted) !important;
}

html:not(.dark) .bg-blue-50,
html:not(.dark) .bg-blue-100,
html:not(.dark) .bg-primary-50,
html:not(.dark) .bg-primary-100,
html:not(.dark) .bg-green-50,
html:not(.dark) .bg-green-100,
html:not(.dark) .bg-emerald-50,
html:not(.dark) .bg-emerald-100,
html:not(.dark) .bg-purple-50,
html:not(.dark) .bg-purple-100,
html:not(.dark) .bg-violet-50,
html:not(.dark) .bg-violet-100,
html:not(.dark) .bg-indigo-50,
html:not(.dark) .bg-indigo-100,
html:not(.dark) .bg-amber-50,
html:not(.dark) .bg-amber-100,
html:not(.dark) .bg-yellow-50,
html:not(.dark) .bg-yellow-100 {
  background-color: var(--ios-fill) !important;
  color: var(--ios-text) !important;
}

html:not(.dark) .bg-red-50,
html:not(.dark) .bg-red-100 {
  background-color: var(--ios-fill-2) !important;
  color: #111 !important;
}

html:not(.dark) .text-emerald-600,
html:not(.dark) .text-green-600,
html:not(.dark) .text-blue-600,
html:not(.dark) .text-primary-600,
html:not(.dark) .text-primary-500,
html:not(.dark) .text-indigo-600,
html:not(.dark) .text-purple-600,
html:not(.dark) .text-violet-600,
html:not(.dark) .text-amber-600 {
  color: var(--ios-text) !important;
}

html:not(.dark) .router-link-active,
html:not(.dark) a.router-link-active,
html:not(.dark) [aria-current="page"] {
  background-color: rgba(0,0,0,.055) !important;
  color: var(--ios-text) !important;
}

html:not(.dark) aside a,
html:not(.dark) aside button,
html:not(.dark) [class*="sidebar"] a,
html:not(.dark) [class*="sidebar"] button {
  border-radius: 10px !important;
  color: var(--ios-muted) !important;
}

html:not(.dark) aside a:hover,
html:not(.dark) aside button:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="sidebar"] button:hover {
  background: rgba(0,0,0,.045) !important;
  color: var(--ios-text) !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .select-trigger,
html:not(.dark) [role="combobox"],
html:not(.dark) .n-base-selection,
html:not(.dark) .n-input,
html:not(.dark) .n-input-wrapper,
html:not(.dark) .el-input__wrapper,
html:not(.dark) .ant-input,
html:not(.dark) .ant-input-affix-wrapper {
  border-radius: 10px !important;
  border-color: var(--ios-line-strong) !important;
  background: #fff !important;
  color: var(--ios-text) !important;
  box-shadow: none !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: var(--ios-subtle) !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .n-input--focus,
html:not(.dark) .n-input:focus-within,
html:not(.dark) .el-input__wrapper.is-focus,
html:not(.dark) .ant-input:focus,
html:not(.dark) .ant-input-affix-wrapper-focused {
  border-color: #999 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.055) !important;
}

html:not(.dark) .btn,
html:not(.dark) button,
html:not(.dark) [role="button"] {
  border-radius: 10px !important;
  box-shadow: none !important;
}

html:not(.dark) .table-page-layout,
html:not(.dark) .table-scroll-container,
html:not(.dark) .table-wrapper,
html:not(.dark) table,
html:not(.dark) .n-data-table,
html:not(.dark) .el-table,
html:not(.dark) .ant-table {
  border-color: var(--ios-line) !important;
  background: #fff !important;
}

html:not(.dark) .table-scroll-container {
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark) thead,
html:not(.dark) th,
html:not(.dark) .n-data-table-th,
html:not(.dark) .el-table th,
html:not(.dark) .ant-table-thead > tr > th {
  background: #fafafa !important;
  color: #444 !important;
  font-weight: 600 !important;
}

html:not(.dark) td,
html:not(.dark) .n-data-table-td {
  color: var(--ios-text) !important;
  border-color: var(--ios-line) !important;
}

html:not(.dark) tbody tr:hover,
html:not(.dark) tbody tr:hover td {
  background: #fafafa !important;
}

html:not(.dark) .rounded-full,
html:not(.dark) .badge,
html:not(.dark) [class*="badge"],
html:not(.dark) [class*="Badge"],
html:not(.dark) [class*="tag"],
html:not(.dark) [class*="Tag"] {
  border-radius: 999px !important;
}

html:not(.dark) [role="dialog"],
html:not(.dark) .modal,
html:not(.dark) [class*="Modal"],
html:not(.dark) [class*="Dropdown"],
html:not(.dark) .dropdown-menu {
  border: 1px solid var(--ios-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--ios-text) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

html:not(.dark) .text-red-500,
html:not(.dark) .text-red-600 {
  color: #111 !important;
}

html:not(.dark) .bg-red-500,
html:not(.dark) .bg-red-600 {
  background: #111 !important;
  color: #fff !important;
}

html:not(.dark) button:hover,
html:not(.dark) .n-button:hover,
html:not(.dark) .el-button:hover,
html:not(.dark) .ant-btn:hover,
html:not(.dark) [role="button"]:hover {
  transform: none !important;
}

html:not(.dark) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:not(.dark) ::-webkit-scrollbar-track { background: transparent; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.20); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); border: 3px solid transparent; background-clip: content-box; }

@media (max-width: 1024px) {
  html:not(.dark) h1,
  html:not(.dark) .mb-4.text-4xl.font-bold.text-gray-900,
  html:not(.dark) .mb-8.text-lg.text-gray-600 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 {
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  html:not(.dark) header,
  html:not(.dark) .relative.z-20.px-6.py-4 {
    padding: 14px 18px !important;
  }
  html:not(.dark) main.relative.z-10,
  html:not(.dark) .relative.z-10.flex-1.px-6.py-16 {
    padding-top: 44px !important;
  }
  html:not(.dark) h1,
  html:not(.dark) .mb-4.text-4xl.font-bold.text-gray-900 {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.08 !important;
  }
  html:not(.dark) .terminal-window {
    width: min(354px, 92vw) !important;
  }
}

/* v9: reduce decorative graphics while preserving core information. */

/* Hide non-essential icon imagery in the hero feature hints. Text remains. */
html:not(.dark) .mb-12.flex.flex-wrap.items-center.justify-center.gap-4 img,
html:not(.dark) .mb-12.flex.flex-wrap.items-center.justify-center.gap-4 svg,
html:not(.dark) .inline-flex.items-center.gap-2\.5.rounded-full img,
html:not(.dark) .inline-flex.items-center.gap-2\.5.rounded-full svg {
  display: none !important;
}

/* De-emphasize the terminal demo: keep a small API hint, remove window-dressing. */
html:not(.dark) .terminal-window {
  width: min(330px, 82vw) !important;
  opacity: .72 !important;
  border-color: #ededee !important;
  background: transparent !important;
}

html:not(.dark) .terminal-header {
  display: none !important;
}

html:not(.dark) .terminal-body {
  padding: 16px 18px !important;
  background: transparent !important;
  color: var(--ios-muted) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}

html:not(.dark) .terminal-body *,
html:not(.dark) .code-cmd,
html:not(.dark) .code-url,
html:not(.dark) .code-flag,
html:not(.dark) .code-response,
html:not(.dark) .code-prompt,
html:not(.dark) .code-success {
  color: var(--ios-muted) !important;
}

html:not(.dark) .code-success {
  background: transparent !important;
  border-radius: 0 !important;
}

html:not(.dark) .cursor {
  display: none !important;
}

/* Remove decorative icon boxes from the three feature descriptions. */
html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 .mb-4.flex.h-12.w-12,
html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 .h-12.w-12,
html:not(.dark) .group.rounded-2xl .mb-4.flex.h-12.w-12,
html:not(.dark) .group.rounded-2xl .h-12.w-12 {
  display: none !important;
}

/* Reduce feature section to clean text columns. */
html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 {
  gap: 48px !important;
  margin-top: 10px !important;
  margin-bottom: 78px !important;
}

html:not(.dark) .mb-12.grid.gap-6.md\:grid-cols-3 > div,
html:not(.dark) .group.rounded-2xl {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove model initials/icons and repeated badge-like decoration; keep model names. */
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 img,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 svg,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 .rounded,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="icon"],
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="Icon"] {
  display: none !important;
}

html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 > div {
  gap: 0 !important;
  color: var(--ios-muted) !important;
}

/* Reduce remaining non-essential logo/flag visual weight without removing navigation. */
html:not(.dark) header button:first-of-type img,
html:not(.dark) header button:first-of-type svg {
  display: none !important;
}

html:not(.dark) header button,
html:not(.dark) header a {
  font-size: 14px !important;
}

/* Make GitHub/footer less visually loud. */
html:not(.dark) footer,
html:not(.dark) footer a {
  color: var(--ios-subtle) !important;
}

@media (max-width: 1024px) {
  html:not(.dark) .terminal-container,
  html:not(.dark) .terminal-window {
    display: none !important;
  }
}

/* v9.1: remove the hero placeholder look and remaining decorative marks. */
html:not(.dark) .terminal-container,
html:not(.dark) .terminal-window {
  display: none !important;
}

/* With the hero visual removed, keep the hero copy calm and centered on medium layouts. */
html:not(.dark) main.relative.z-10 .grid,
html:not(.dark) .relative.z-10.flex-1.px-6.py-16 .grid {
  align-items: center !important;
}

/* Hide tiny model initials/symbols when they are inside avatar-like blocks; keep model names. */
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="rounded-full"],
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="avatar"],
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="Avatar"] {
  display: none !important;
}

/* Remove flag image/color from the language switch; text remains. */
html:not(.dark) header button img,
html:not(.dark) header button picture,
html:not(.dark) header button [class*="flag"],
html:not(.dark) header button [class*="Flag"] {
  display: none !important;
}

/* v10: strict monochrome base with restrained red accents; remove blue/cool color cast. */
:root {
  --ios-bg: #f4f4f4;
  --ios-surface: #ffffff;
  --ios-surface-soft: rgba(255,255,255,.76);
  --ios-text: #111111;
  --ios-muted: #666666;
  --ios-subtle: #9a9a9a;
  --ios-line: #e1e1e1;
  --ios-line-strong: #d1d1d1;
  --ios-fill: #eeeeee;
  --ios-fill-2: #e8e8e8;
  --ios-black: #111111;
  --ios-red: #d11f1f;
  --ios-red-soft: #fff1f1;
  --ios-red-line: #f1c9c9;
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app {
  background: #f4f4f4 !important;
}

html:not(.dark) header,
html:not(.dark) .relative.z-20.px-6.py-4,
html:not(.dark) .sticky.top-0,
html:not(.dark) .h-16.border-b,
html:not(.dark) .topbar,
html:not(.dark) [class*="Topbar"],
html:not(.dark) [class*="Header"],
html:not(.dark) aside,
html:not(.dark) [class*="sidebar"],
html:not(.dark) [class*="Sidebar"] {
  background: rgba(244,244,244,.82) !important;
  border-color: #e1e1e1 !important;
}

/* Strip blue/purple/green/yellow semantic tints into grayscale, except destructive red. */
html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500,
html:not(.dark) .text-blue-600,
html:not(.dark) .text-sky-400,
html:not(.dark) .text-sky-500,
html:not(.dark) .text-sky-600,
html:not(.dark) .text-cyan-400,
html:not(.dark) .text-cyan-500,
html:not(.dark) .text-cyan-600,
html:not(.dark) .text-primary-400,
html:not(.dark) .text-primary-500,
html:not(.dark) .text-primary-600,
html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-500,
html:not(.dark) .text-indigo-600,
html:not(.dark) .text-purple-400,
html:not(.dark) .text-purple-500,
html:not(.dark) .text-purple-600,
html:not(.dark) .text-violet-400,
html:not(.dark) .text-violet-500,
html:not(.dark) .text-violet-600,
html:not(.dark) .text-green-500,
html:not(.dark) .text-green-600,
html:not(.dark) .text-emerald-500,
html:not(.dark) .text-emerald-600,
html:not(.dark) .text-amber-500,
html:not(.dark) .text-amber-600,
html:not(.dark) .text-yellow-500,
html:not(.dark) .text-yellow-600 {
  color: #111111 !important;
}

html:not(.dark) .bg-blue-50,
html:not(.dark) .bg-blue-100,
html:not(.dark) .bg-sky-50,
html:not(.dark) .bg-sky-100,
html:not(.dark) .bg-cyan-50,
html:not(.dark) .bg-cyan-100,
html:not(.dark) .bg-primary-50,
html:not(.dark) .bg-primary-100,
html:not(.dark) .bg-indigo-50,
html:not(.dark) .bg-indigo-100,
html:not(.dark) .bg-purple-50,
html:not(.dark) .bg-purple-100,
html:not(.dark) .bg-violet-50,
html:not(.dark) .bg-violet-100,
html:not(.dark) .bg-green-50,
html:not(.dark) .bg-green-100,
html:not(.dark) .bg-emerald-50,
html:not(.dark) .bg-emerald-100,
html:not(.dark) .bg-amber-50,
html:not(.dark) .bg-amber-100,
html:not(.dark) .bg-yellow-50,
html:not(.dark) .bg-yellow-100 {
  background-color: #eeeeee !important;
  color: #111111 !important;
}

html:not(.dark) .border-blue-100,
html:not(.dark) .border-blue-200,
html:not(.dark) .border-sky-100,
html:not(.dark) .border-sky-200,
html:not(.dark) .border-primary-100,
html:not(.dark) .border-primary-200,
html:not(.dark) .border-indigo-100,
html:not(.dark) .border-indigo-200,
html:not(.dark) .border-purple-100,
html:not(.dark) .border-purple-200,
html:not(.dark) .border-green-100,
html:not(.dark) .border-green-200,
html:not(.dark) .border-emerald-100,
html:not(.dark) .border-emerald-200 {
  border-color: #e1e1e1 !important;
}

/* Red is allowed only as a sparse accent: focus, active/hover details, destructive/status. */
html:not(.dark) a:not([href="/login"]):hover,
html:not(.dark) footer a:hover,
html:not(.dark) .router-link-active,
html:not(.dark) a.router-link-active,
html:not(.dark) [aria-current="page"] {
  color: var(--ios-red) !important;
}

html:not(.dark) .router-link-active,
html:not(.dark) a.router-link-active,
html:not(.dark) [aria-current="page"] {
  background-color: var(--ios-red-soft) !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .n-input--focus,
html:not(.dark) .n-input:focus-within,
html:not(.dark) .el-input__wrapper.is-focus,
html:not(.dark) .ant-input:focus,
html:not(.dark) .ant-input-affix-wrapper-focused {
  border-color: var(--ios-red) !important;
  box-shadow: 0 0 0 3px rgba(209,31,31,.10) !important;
}

html:not(.dark) .text-red-400,
html:not(.dark) .text-red-500,
html:not(.dark) .text-red-600,
html:not(.dark) .text-rose-400,
html:not(.dark) .text-rose-500,
html:not(.dark) .text-rose-600 {
  color: var(--ios-red) !important;
}

html:not(.dark) .bg-red-50,
html:not(.dark) .bg-red-100,
html:not(.dark) .bg-rose-50,
html:not(.dark) .bg-rose-100 {
  background-color: var(--ios-red-soft) !important;
  color: var(--ios-red) !important;
}

html:not(.dark) .border-red-100,
html:not(.dark) .border-red-200,
html:not(.dark) .border-rose-100,
html:not(.dark) .border-rose-200 {
  border-color: var(--ios-red-line) !important;
}

html:not(.dark) .bg-red-500,
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-rose-500,
html:not(.dark) .bg-rose-600 {
  background: var(--ios-red) !important;
  color: #fff !important;
}

/* Keep main CTA black; no blue buttons. */
html:not(.dark) .btn.btn-primary,
html:not(.dark) a[href="/login"].btn,
html:not(.dark) a[href="/dashboard"].btn,
html:not(.dark) a[href="/admin/dashboard"].btn,
html:not(.dark) .btn-primary,
html:not(.dark) .bg-primary-600,
html:not(.dark) .bg-primary-500,
html:not(.dark) button[type="submit"],
html:not(.dark) .n-button--primary-type,
html:not(.dark) .el-button--primary,
html:not(.dark) .ant-btn-primary {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

/* Grayscale any remaining embedded images/icons; keep red CSS accents above. */
html:not(.dark) img,
html:not(.dark) svg {
  filter: grayscale(1) !important;
}

/* v10.1 hotfix: restore account-management usage/cost badges.
   Earlier homepage simplification hid generic .rounded.bg-primary-100/.bg-gray-100 globally,
   which also hid the per-account dollar usage labels in admin/account tables. */
html:not(.dark) .rounded.bg-primary-100,
html:not(.dark) .rounded.bg-gray-100 {
  display: inline-flex !important;
}

/* Keep only the homepage Supported AI Models decorative badges hidden. */
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 .rounded.bg-primary-100,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 .rounded.bg-gray-100,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 .rounded,
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="rounded-full"],
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="avatar"],
html:not(.dark) .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 [class*="Avatar"] {
  display: none !important;
}

/* Make restored account cost badges readable and iOS-like. */
html:not(.dark) .table-scroll-container .rounded.bg-primary-100,
html:not(.dark) .table-wrapper .rounded.bg-primary-100,
html:not(.dark) table .rounded.bg-primary-100,
html:not(.dark) .n-data-table .rounded.bg-primary-100,
html:not(.dark) .table-scroll-container .rounded.bg-gray-100,
html:not(.dark) .table-wrapper .rounded.bg-gray-100,
html:not(.dark) table .rounded.bg-gray-100,
html:not(.dark) .n-data-table .rounded.bg-gray-100 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(0,122,255,.10) !important;
  color: #0066cc !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* v12: hide brand/logo icon in login and console/sidebar headers only.
   Keep functional icons such as email/password/eye/sign-in visible. */
html:not(.dark) img[alt="Logo"],
html:not(.dark) .mb-4.inline-flex.h-16.w-16.items-center.justify-center.overflow-hidden.rounded-2xl,
html:not(.dark) .h-10.w-10.overflow-hidden.rounded-xl.shadow-md,
html:not(.dark) aside img[alt="Logo"],
html:not(.dark) aside .h-10.w-10,
html:not(.dark) aside .h-8.w-8,
html:not(.dark) [class*="sidebar"] img[alt="Logo"],
html:not(.dark) [class*="Sidebar"] img[alt="Logo"] {
  display: none !important;
}

/* Remove empty spacing left by hidden login logo. */
html:not(.dark) .mb-8.text-center > .mb-4.inline-flex.h-16.w-16.items-center.justify-center.overflow-hidden.rounded-2xl {
  margin: 0 !important;
}

/* If a sidebar brand row only contained the logo, keep the text aligned cleanly. */
html:not(.dark) aside a:has(img[alt="Logo"]),
html:not(.dark) aside div:has(> img[alt="Logo"]),
html:not(.dark) header a:has(img[alt="Logo"]),
html:not(.dark) header div:has(> img[alt="Logo"]) {
  gap: 0 !important;
}

/* v13: dashboard chart frames and top-clipping fix.
   Token usage trend points were clipped at the top because chart wrappers/cards were too tight. */
html:not(.dark) .recharts-wrapper,
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .echarts-for-react,
html:not(.dark) [class*="chart"],
html:not(.dark) [class*="Chart"],
html:not(.dark) canvas {
  overflow: visible !important;
}

/* Add a subtle iOS-like border/frame around all chart areas. */
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .echarts-for-react,
html:not(.dark) [class*="chart-container"],
html:not(.dark) [class*="ChartContainer"],
html:not(.dark) [class*="chart-wrapper"],
html:not(.dark) [class*="ChartWrapper"],
html:not(.dark) [class*="chart-card"],
html:not(.dark) [class*="ChartCard"] {
  box-sizing: border-box !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
  padding: 18px 16px 14px !important;
  overflow: visible !important;
}

/* If the chart library renders only a bare SVG inside a dashboard card, frame the direct chart SVG too. */
html:not(.dark) .recharts-wrapper > svg,
html:not(.dark) svg.recharts-surface,
html:not(.dark) .echarts-for-react > div > canvas {
  overflow: visible !important;
}

/* Ensure dots/lines near the top have breathing room. */
html:not(.dark) .recharts-wrapper {
  margin-top: 10px !important;
  padding-top: 8px !important;
}

html:not(.dark) .recharts-surface {
  overflow: visible !important;
}

html:not(.dark) .recharts-dot,
html:not(.dark) .recharts-active-dot,
html:not(.dark) .recharts-line-dot,
html:not(.dark) .recharts-scatter-symbol {
  overflow: visible !important;
}

/* Give dashboard cards that contain charts extra inner top space, without affecting tables. */
html:not(.dark) .card:has(.recharts-wrapper),
html:not(.dark) .card:has(.echarts-for-react),
html:not(.dark) .n-card:has(.recharts-wrapper),
html:not(.dark) .n-card:has(.echarts-for-react),
html:not(.dark) [class~="card"]:has(.recharts-wrapper),
html:not(.dark) [class~="card"]:has(.echarts-for-react) {
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.78) !important;
  padding-top: 18px !important;
  overflow: visible !important;
}

/* v14: stronger dashboard chart clipping fix.
   If SVG markers are clipped by the chart's own viewBox, overflow alone is not enough.
   Add real breathing room above every chart by shifting the plotting surface down and
   increasing the wrapper height. */
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .recharts-wrapper {
  min-height: 280px !important;
  height: calc(100% + 28px) !important;
  overflow: visible !important;
}

html:not(.dark) .recharts-wrapper {
  transform: translateY(12px) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

html:not(.dark) .recharts-wrapper > svg,
html:not(.dark) svg.recharts-surface {
  overflow: visible !important;
  transform: translateY(8px) !important;
}

/* Lower the actual plotted series/points so top dots are inside the SVG viewport. */
html:not(.dark) .recharts-layer.recharts-line,
html:not(.dark) .recharts-layer.recharts-area,
html:not(.dark) .recharts-line-dots,
html:not(.dark) .recharts-active-dot,
html:not(.dark) .recharts-scatter-symbols,
html:not(.dark) .recharts-reference-line,
html:not(.dark) .recharts-cartesian-grid,
html:not(.dark) .recharts-xAxis,
html:not(.dark) .recharts-yAxis {
  transform: translateY(10px) !important;
}

/* Preserve tooltip/cursor usability after plot shift. */
html:not(.dark) .recharts-tooltip-wrapper,
html:not(.dark) .recharts-legend-wrapper {
  transform: translateY(8px) !important;
}

/* Chart frames need extra top padding; previous v13 padding was not enough. */
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .echarts-for-react,
html:not(.dark) [class*="chart-container"],
html:not(.dark) [class*="ChartContainer"],
html:not(.dark) [class*="chart-wrapper"],
html:not(.dark) [class*="ChartWrapper"],
html:not(.dark) [class*="chart-card"],
html:not(.dark) [class*="ChartCard"] {
  padding-top: 34px !important;
  padding-bottom: 18px !important;
  min-height: 300px !important;
}

html:not(.dark) .card:has(.recharts-wrapper),
html:not(.dark) .card:has(.echarts-for-react),
html:not(.dark) .n-card:has(.recharts-wrapper),
html:not(.dark) .n-card:has(.echarts-for-react),
html:not(.dark) [class~="card"]:has(.recharts-wrapper),
html:not(.dark) [class~="card"]:has(.echarts-for-react) {
  padding-top: 30px !important;
  overflow: visible !important;
}

/* Extra safety for SVG clipping paths used by chart libraries. */
html:not(.dark) .recharts-wrapper clipPath rect,
html:not(.dark) .recharts-wrapper defs clipPath rect {
  x: -24px !important;
  y: -24px !important;
  width: 9999px !important;
  height: 9999px !important;
}

/* v15: Token usage trend Chart.js top clipping fix */
html:not(.dark) .sub2api-token-trend-card,
html:not(.dark) .sub2api-token-trend-card.card {
  overflow: visible !important;
}
.sub2api-token-trend-holder,
.sub2api-token-trend-card .h-48 {
  height: 15.5rem !important;
  min-height: 15.5rem !important;
  padding-top: 1.25rem !important;
  overflow: visible !important;
}
.sub2api-token-trend-holder canvas,
.sub2api-token-trend-card canvas {
  display: block !important;
  max-height: none !important;
}

/* v16: keep percent axis max label at 100; clipping is handled by chart padding/grace, not by showing 108%. */

/* v17: hidden headroom above 100 for Token usage trend; axis labels still stop at 100. */
.sub2api-token-trend-holder,
.sub2api-token-trend-card .h-48 {
  height: 17rem !important;
  min-height: 17rem !important;
  padding-top: 1.75rem !important;
}

/* v18: dashboard sidebar selected state returns to restrained grayscale iOS/macOS style. */
html:not(.dark) aside .router-link-active,
html:not(.dark) aside a.router-link-active,
html:not(.dark) aside [aria-current="page"],
html:not(.dark) [class*="sidebar"] .router-link-active,
html:not(.dark) [class*="sidebar"] a.router-link-active,
html:not(.dark) [class*="Sidebar"] .router-link-active,
html:not(.dark) [class*="Sidebar"] a.router-link-active {
  color: #111111 !important;
  background: rgba(0, 0, 0, .055) !important;
  border-color: rgba(0, 0, 0, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .045) !important;
}

html:not(.dark) aside .router-link-active svg,
html:not(.dark) aside a.router-link-active svg,
html:not(.dark) aside [aria-current="page"] svg,
html:not(.dark) [class*="sidebar"] .router-link-active svg,
html:not(.dark) [class*="sidebar"] a.router-link-active svg,
html:not(.dark) [class*="Sidebar"] .router-link-active svg,
html:not(.dark) [class*="Sidebar"] a.router-link-active svg {
  color: #111111 !important;
  stroke: currentColor !important;
  opacity: .9 !important;
  filter: grayscale(1) saturate(0) !important;
}

html:not(.dark) aside a:hover,
html:not(.dark) aside button:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="sidebar"] button:hover,
html:not(.dark) [class*="Sidebar"] a:hover,
html:not(.dark) [class*="Sidebar"] button:hover {
  color: #111111 !important;
  background: rgba(0, 0, 0, .04) !important;
}

/* Keep destructive/status red available outside navigation; sidebar nav itself should stay monochrome. */
html:not(.dark) aside .text-red-400,
html:not(.dark) aside .text-red-500,
html:not(.dark) aside .text-red-600,
html:not(.dark) [class*="sidebar"] .text-red-400,
html:not(.dark) [class*="sidebar"] .text-red-500,
html:not(.dark) [class*="sidebar"] .text-red-600 {
  color: #111111 !important;
}

/* v19: make every page background pure white; keep depth through card borders, not tinted page fills. */
:root {
  --ios-bg: #ffffff;
  --ios-surface: #ffffff;
  --ios-fill: #f5f5f5;
  --ios-fill-2: #eeeeee;
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app,
html:not(.dark) .min-h-screen,
html:not(.dark) .relative.flex.min-h-screen,
html:not(.dark) main,
html:not(.dark) main.relative,
html:not(.dark) main.relative.z-10,
html:not(.dark) [class*="bg-gradient"],
html:not(.dark) .bg-gradient-to-br,
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-zinc-50,
html:not(.dark) .bg-neutral-50 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

html:not(.dark) body::before,
html:not(.dark) body::after,
html:not(.dark) #app::before,
html:not(.dark) #app::after,
html:not(.dark) .min-h-screen::before,
html:not(.dark) .min-h-screen::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

html:not(.dark) header,
html:not(.dark) header nav,
html:not(.dark) aside,
html:not(.dark) [class*="sidebar"],
html:not(.dark) [class*="Sidebar"] {
  background: rgba(255, 255, 255, .86) !important;
  background-color: rgba(255, 255, 255, .86) !important;
  background-image: none !important;
}

/* Cards remain visible on white pages via subtle outlines/shadows instead of colored page background. */
html:not(.dark) .card,
html:not(.dark) .n-card,
html:not(.dark) [class~="card"],
html:not(.dark) .rounded-xl.border,
html:not(.dark) .rounded-2xl.border,
html:not(.dark) .rounded-3xl.border {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, .075) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .025) !important;
}

/* v20: add a clear but subtle border around the Dashboard model distribution table. */
html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs),
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) {
  border: 1px solid rgba(0, 0, 0, .095) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: auto !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs) table,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto table,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs) thead,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto thead,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) thead {
  background: #fafafa !important;
}

html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs) th,
html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs) td,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto th,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto td,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) th,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) td {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  padding-left: .55rem !important;
  padding-right: .55rem !important;
}

html:not(.dark) .card:has(h3) .max-h-48.flex-1.overflow-y-auto:has(table.w-full.text-xs) tr + tr,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto tr + tr,
html:not(.dark) .card:has(canvas) .max-h-48.flex-1.overflow-y-auto:has(table) tr + tr {
  border-top: 1px solid rgba(0, 0, 0, .055) !important;
}

/* v21: add a matching subtle border around the Token usage trend chart area. */
html:not(.dark) .sub2api-token-trend-holder,
html:not(.dark) .sub2api-token-trend-card .h-48 {
  border: 1px solid rgba(0, 0, 0, .095) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  padding: 1.75rem .85rem .7rem .85rem !important;
  overflow: visible !important;
}

html:not(.dark) .sub2api-token-trend-holder canvas,
html:not(.dark) .sub2api-token-trend-card .h-48 canvas {
  border-radius: 10px !important;
}

/* v22: BeaverAPI brand lockup with a small restrained beaver mark. */
.beaverapi-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
}

.beaverapi-brand-lockup .beaverapi-mark {
  width: 1.25em !important;
  height: 1.25em !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: -0.18em !important;
  filter: saturate(.82) contrast(.98) !important;
}

h1.beaverapi-brand-lockup .beaverapi-mark {
  width: .95em !important;
  height: .95em !important;
}

aside .beaverapi-brand-lockup .beaverapi-mark,
header .beaverapi-brand-lockup .beaverapi-mark,
[class*="sidebar"] .beaverapi-brand-lockup .beaverapi-mark,
[class*="Sidebar"] .beaverapi-brand-lockup .beaverapi-mark {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

/* v23 emergency: disable v22 observer by restoring JS; keep site responsive. */

/* v23 safe BeaverAPI: brand script is throttled/idempotent; avoids full-page observer loops. */

/* v24: restore real avatar colors and make avatar upload/edit control visible on white pages. */
html:not(.dark) img[src*="avatar"],
html:not(.dark) img[alt*="avatar" i],
html:not(.dark) img[alt*="头像"],
html:not(.dark) img[class*="avatar" i],
html:not(.dark) [class*="avatar" i] img,
html:not(.dark) .rounded-full img,
html:not(.dark) img.rounded-full,
html:not(.dark) .h-20.w-20 img,
html:not(.dark) .h-24.w-24 img,
html:not(.dark) .h-32.w-32 img,
html:not(.dark) [class*="profile" i] img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Keep only the tiny decorative homepage model badges hidden/grayscaled; user avatars should remain original color. */
html:not(.dark) [class*="avatar" i]:not(.mb-16 *),
html:not(.dark) [class*="Avatar" i]:not(.mb-16 *) {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Avatar upload/edit button: avoid white-on-white in the top-right corner of the avatar. */
html:not(.dark) .rounded-full + button,
html:not(.dark) .relative:has(img.rounded-full) > button,
html:not(.dark) .relative:has(.rounded-full img) > button,
html:not(.dark) [class*="avatar" i] button,
html:not(.dark) [class*="Avatar" i] button,
html:not(.dark) [class*="profile" i] button:has(svg),
html:not(.dark) label:has(input[type="file"]),
html:not(.dark) button:has(+ input[type="file"]),
html:not(.dark) input[type="file"] + button {
  background: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
}

html:not(.dark) .rounded-full + button svg,
html:not(.dark) .relative:has(img.rounded-full) > button svg,
html:not(.dark) .relative:has(.rounded-full img) > button svg,
html:not(.dark) [class*="avatar" i] button svg,
html:not(.dark) [class*="Avatar" i] button svg,
html:not(.dark) [class*="profile" i] button:has(svg) svg,
html:not(.dark) label:has(input[type="file"]) svg,
html:not(.dark) button:has(+ input[type="file"]) svg,
html:not(.dark) input[type="file"] + button svg {
  color: #ffffff !important;
  stroke: currentColor !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* v25: top-right console user avatar should not become a white block. */
html:not(.dark) header button[aria-label="User Menu"] > div.flex.h-8.w-8,
html:not(.dark) header button[aria-label="User Menu"] > div[class*="h-8"][class*="w-8"],
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8.overflow-hidden,
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8 {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html:not(.dark) header button[aria-label="User Menu"] img,
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8 img,
html:not(.dark) header button[aria-label="User Menu"] img.object-cover {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8 span,
html:not(.dark) header button[aria-label="User Menu"] > div.flex.h-8.w-8 span {
  color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Do not let broad white/card overrides restyle the compact user-menu avatar. */
html:not(.dark) header button[aria-label="User Menu"] > div:first-child {
  background-color: #111827 !important;
}

/* v26: top-right user avatar should be visible but not a solid black block. */
html:not(.dark) header button[aria-label="User Menu"] > div.flex.h-8.w-8,
html:not(.dark) header button[aria-label="User Menu"] > div[class*="h-8"][class*="w-8"],
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8.overflow-hidden,
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8,
html:not(.dark) header button[aria-label="User Menu"] > div:first-child {
  background: #f2f2f2 !important;
  background-color: #f2f2f2 !important;
  background-image: none !important;
  color: #333333 !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 0, 0, .08) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8 span,
html:not(.dark) header button[aria-label="User Menu"] > div.flex.h-8.w-8 span,
html:not(.dark) header button[aria-label="User Menu"] > div:first-child span {
  color: #333333 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}

html:not(.dark) header button[aria-label="User Menu"] img,
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8 img,
html:not(.dark) header button[aria-label="User Menu"] img.object-cover {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* v27: real header avatar image wins over fallback initials/background. */
html:not(.dark) header button[aria-label="User Menu"] .beaverapi-header-avatar-box:has(img),
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8:has(img) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}

html:not(.dark) header button[aria-label="User Menu"] img.beaverapi-header-avatar-img,
html:not(.dark) header button[aria-label="User Menu"] .beaverapi-header-avatar-box img,
html:not(.dark) header button[aria-label="User Menu"] .h-8.w-8:has(img) img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  border-radius: inherit !important;
}

/* v28: fix admin account scheduling switch.
   The broad .bg-primary-500 CTA rule was turning tiny toggle switches into black pills/circles.
   Keep switches compact and neutral while preserving clear on/off state. */
html:not(.dark) button.relative.inline-flex.h-5.w-9.rounded-full,
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"],
html:not(.dark) table button.relative.inline-flex.h-5.w-9,
html:not(.dark) .table-wrapper button.relative.inline-flex.h-5.w-9,
html:not(.dark) .table-scroll-container button.relative.inline-flex.h-5.w-9 {
  min-height: 20px !important;
  width: 36px !important;
  height: 20px !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  color: inherit !important;
}

/* On/schedulable: restrained dark-gray track, not solid black. */
html:not(.dark) button.relative.inline-flex.h-5.w-9.rounded-full:has(span.translate-x-4),
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"]:has(span.translate-x-4),
html:not(.dark) table button.relative.inline-flex.h-5.w-9:has(span.translate-x-4) {
  background: #6b7280 !important;
  background-color: #6b7280 !important;
  background-image: none !important;
}

/* Off/not schedulable: light gray track. */
html:not(.dark) button.relative.inline-flex.h-5.w-9.rounded-full:not(:has(span.translate-x-4)),
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"]:not(:has(span.translate-x-4)),
html:not(.dark) table button.relative.inline-flex.h-5.w-9:not(:has(span.translate-x-4)) {
  background: #e5e7eb !important;
  background-color: #e5e7eb !important;
  background-image: none !important;
}

/* The knob must stay visible; do not let global bg-white/card rules reshape it. */
html:not(.dark) button.relative.inline-flex.h-5.w-9.rounded-full > span,
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"] > span,
html:not(.dark) table button.relative.inline-flex.h-5.w-9 > span {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html:not(.dark) button.relative.inline-flex.h-5.w-9.rounded-full:focus,
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important;
}

/* v29: softer sidebar selected state; remove the white text-chip/patch feeling. */
html:not(.dark) aside .sidebar-link,
html:not(.dark) [class*="sidebar"] .sidebar-link,
html:not(.dark) [class*="Sidebar"] .sidebar-link {
  border-radius: 12px !important;
  background-clip: border-box !important;
}

html:not(.dark) aside .sidebar-link-active,
html:not(.dark) aside .router-link-active,
html:not(.dark) aside a.router-link-active,
html:not(.dark) aside [aria-current="page"],
html:not(.dark) [class*="sidebar"] .sidebar-link-active,
html:not(.dark) [class*="sidebar"] .router-link-active,
html:not(.dark) [class*="sidebar"] a.router-link-active,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active,
html:not(.dark) [class*="Sidebar"] .router-link-active,
html:not(.dark) [class*="Sidebar"] a.router-link-active {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  background-image: none !important;
  color: #202124 !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  box-shadow: none !important;
}

/* Make the selected item's inner text area transparent, not a separate white capsule. */
html:not(.dark) aside .sidebar-link-active span,
html:not(.dark) aside .router-link-active span,
html:not(.dark) aside [aria-current="page"] span,
html:not(.dark) [class*="sidebar"] .sidebar-link-active span,
html:not(.dark) [class*="sidebar"] .router-link-active span,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active span,
html:not(.dark) [class*="Sidebar"] .router-link-active span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html:not(.dark) aside .sidebar-link-active svg,
html:not(.dark) aside .router-link-active svg,
html:not(.dark) aside [aria-current="page"] svg,
html:not(.dark) [class*="sidebar"] .sidebar-link-active svg,
html:not(.dark) [class*="sidebar"] .router-link-active svg,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active svg,
html:not(.dark) [class*="Sidebar"] .router-link-active svg {
  color: #202124 !important;
  stroke: currentColor !important;
  opacity: .86 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html:not(.dark) aside .sidebar-link:hover,
html:not(.dark) [class*="sidebar"] .sidebar-link:hover,
html:not(.dark) [class*="Sidebar"] .sidebar-link:hover,
html:not(.dark) aside a:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="Sidebar"] a:hover {
  background: #f7f7f8 !important;
  color: #202124 !important;
}

/* v30: reduce eye strain with a warm off-white canvas while keeping cards clean. */
:root {
  --ios-bg: #f7f6f3;
  --ios-surface: #fffefa;
  --ios-fill: #f1f0ed;
  --ios-fill-2: #e8e6e1;
  --ios-line: rgba(31, 35, 40, .105);
  --ios-line-strong: rgba(31, 35, 40, .16);
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app,
html:not(.dark) .min-h-screen,
html:not(.dark) .relative.flex.min-h-screen,
html:not(.dark) main,
html:not(.dark) main.relative,
html:not(.dark) [class*="bg-gradient"],
html:not(.dark) .bg-gradient-to-br,
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-slate-50 {
  background: #f7f6f3 !important;
  background-color: #f7f6f3 !important;
  background-image: none !important;
}

html:not(.dark) header,
html:not(.dark) .app-header,
html:not(.dark) [class*="header"],
html:not(.dark) aside,
html:not(.dark) .sidebar,
html:not(.dark) [class*="sidebar"],
html:not(.dark) [class*="Sidebar"] {
  background: rgba(250, 249, 246, .92) !important;
  background-color: rgba(250, 249, 246, .92) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) .modal,
html:not(.dark) .dropdown,
html:not(.dark) .table-page-layout,
html:not(.dark) .table-scroll-container,
html:not(.dark) .table-wrapper,
html:not(.dark) table,
html:not(.dark) .bg-white,
html:not(.dark) .bg-white\/60,
html:not(.dark) .bg-white\/70,
html:not(.dark) .bg-white\/80,
html:not(.dark) .bg-white\/90,
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .input,
html:not(.dark) .select-trigger,
html:not(.dark) [role="combobox"] {
  background: #fffefa !important;
  background-color: #fffefa !important;
  border-color: rgba(31,35,40,.105) !important;
}

html:not(.dark) thead,
html:not(.dark) th,
html:not(.dark) .bg-gray-100,
html:not(.dark) .bg-gray-200,
html:not(.dark) .bg-slate-100 {
  background-color: #f1f0ed !important;
}

html:not(.dark) aside .sidebar-link-active,
html:not(.dark) aside .router-link-active,
html:not(.dark) aside a.router-link-active,
html:not(.dark) aside [aria-current="page"],
html:not(.dark) [class*="sidebar"] .sidebar-link-active,
html:not(.dark) [class*="sidebar"] .router-link-active,
html:not(.dark) [class*="sidebar"] a.router-link-active,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active,
html:not(.dark) [class*="Sidebar"] .router-link-active,
html:not(.dark) [class*="Sidebar"] a.router-link-active {
  background: #ebe9e4 !important;
  background-color: #ebe9e4 !important;
  border-color: rgba(31,35,40,.07) !important;
}

html:not(.dark) aside .sidebar-link:hover,
html:not(.dark) [class*="sidebar"] .sidebar-link:hover,
html:not(.dark) [class*="Sidebar"] .sidebar-link:hover,
html:not(.dark) aside a:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="Sidebar"] a:hover {
  background: #f0eee9 !important;
  color: #202124 !important;
}

html:not(.dark) .sub2api-token-trend-holder,
html:not(.dark) .sub2api-token-trend-card .h-48,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto {
  background: #fffefa !important;
  border-color: rgba(31,35,40,.12) !important;
}

/* v31: ensure homepage/root main canvas also uses the warmer off-white, not stark white. */
html:not(.dark) main,
html:not(.dark) main.relative,
html:not(.dark) #app > div,
html:not(.dark) .relative.overflow-hidden,
html:not(.dark) .relative.flex.min-h-screen main {
  background: #f7f6f3 !important;
  background-color: #f7f6f3 !important;
  background-image: none !important;
}

html:not(.dark) section,
html:not(.dark) .container,
html:not(.dark) .mx-auto {
  background-color: transparent !important;
}

/* v32: rounder, smoother iOS-like corners across bordered UI surfaces. */
:root {
  --ios-radius-sm: 12px;
  --ios-radius-md: 16px;
  --ios-radius-lg: 20px;
  --ios-radius-xl: 24px;
}

html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) .modal,
html:not(.dark) .dropdown,
html:not(.dark) .popover,
html:not(.dark) [role="dialog"],
html:not(.dark) .table-page-layout,
html:not(.dark) .table-scroll-container,
html:not(.dark) .table-wrapper,
html:not(.dark) .overflow-hidden.rounded-xl,
html:not(.dark) .overflow-hidden.rounded-2xl,
html:not(.dark) .rounded-xl,
html:not(.dark) .rounded-2xl {
  border-radius: var(--ios-radius-lg) !important;
}

html:not(.dark) table {
  border-radius: var(--ios-radius-lg) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .input,
html:not(.dark) .select-trigger,
html:not(.dark) [role="combobox"],
html:not(.dark) .n-base-selection,
html:not(.dark) .n-input,
html:not(.dark) .n-input-wrapper,
html:not(.dark) .el-input__wrapper,
html:not(.dark) .ant-input,
html:not(.dark) .ant-input-affix-wrapper {
  border-radius: var(--ios-radius-md) !important;
}

html:not(.dark) .btn,
html:not(.dark) button:not(.relative.inline-flex.h-5.w-9):not([aria-label="User Menu"]),
html:not(.dark) [role="button"] {
  border-radius: var(--ios-radius-md) !important;
}

html:not(.dark) aside .sidebar-link,
html:not(.dark) [class*="sidebar"] .sidebar-link,
html:not(.dark) [class*="Sidebar"] .sidebar-link,
html:not(.dark) aside a,
html:not(.dark) [class*="sidebar"] a,
html:not(.dark) [class*="Sidebar"] a {
  border-radius: 14px !important;
}

html:not(.dark) .sub2api-token-trend-holder,
html:not(.dark) .sub2api-token-trend-card .h-48,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto,
html:not(.dark) .recharts-wrapper,
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .echarts-for-react,
html:not(.dark) canvas {
  border-radius: var(--ios-radius-lg) !important;
}

html:not(.dark) .badge,
html:not(.dark) [class*="badge"],
html:not(.dark) .rounded,
html:not(.dark) .rounded-md,
html:not(.dark) .rounded-lg {
  border-radius: var(--ios-radius-sm) !important;
}

/* Keep switches and avatars naturally round; do not square them into cards. */
html:not(.dark) button.relative.inline-flex.h-5.w-9,
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"],
html:not(.dark) .rounded-full,
html:not(.dark) button.relative.inline-flex.h-5.w-9 > span,
html:not(.dark) button[class*="h-5"][class*="w-9"][class*="rounded-full"] > span {
  border-radius: 999px !important;
}

/* v33: softer eye-care paper theme; lower brightness and contrast for long sessions. */
:root {
  --ios-bg: #efeee9;
  --ios-surface: #f7f5ef;
  --ios-surface-2: #f1efe8;
  --ios-fill: #e8e5dc;
  --ios-fill-2: #dedad0;
  --ios-line: rgba(50, 47, 40, .12);
  --ios-line-strong: rgba(50, 47, 40, .18);
  --ios-text: #24231f;
  --ios-muted: #6f6a60;
  --ios-subtle: #928c80;
}

html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app,
html:not(.dark) .min-h-screen,
html:not(.dark) .relative.flex.min-h-screen,
html:not(.dark) main,
html:not(.dark) main.relative,
html:not(.dark) #app > div,
html:not(.dark) .relative.overflow-hidden,
html:not(.dark) .relative.flex.min-h-screen main,
html:not(.dark) [class*="bg-gradient"],
html:not(.dark) .bg-gradient-to-br,
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-slate-50 {
  background: #efeee9 !important;
  background-color: #efeee9 !important;
  background-image: none !important;
  color: #24231f !important;
}

html:not(.dark) header,
html:not(.dark) .app-header,
html:not(.dark) [class*="header"],
html:not(.dark) aside,
html:not(.dark) .sidebar,
html:not(.dark) [class*="sidebar"],
html:not(.dark) [class*="Sidebar"] {
  background: rgba(242, 240, 233, .94) !important;
  background-color: rgba(242, 240, 233, .94) !important;
  border-color: rgba(50,47,40,.10) !important;
  backdrop-filter: blur(16px) saturate(.98) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.98) !important;
}

html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) .modal,
html:not(.dark) .dropdown,
html:not(.dark) .popover,
html:not(.dark) [role="dialog"],
html:not(.dark) .table-page-layout,
html:not(.dark) .table-scroll-container,
html:not(.dark) .table-wrapper,
html:not(.dark) table,
html:not(.dark) .bg-white,
html:not(.dark) .bg-white\/60,
html:not(.dark) .bg-white\/70,
html:not(.dark) .bg-white\/80,
html:not(.dark) .bg-white\/90,
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .input,
html:not(.dark) .select-trigger,
html:not(.dark) [role="combobox"],
html:not(.dark) .n-base-selection,
html:not(.dark) .n-input,
html:not(.dark) .n-input-wrapper,
html:not(.dark) .el-input__wrapper,
html:not(.dark) .ant-input,
html:not(.dark) .ant-input-affix-wrapper {
  background: #f7f5ef !important;
  background-color: #f7f5ef !important;
  border-color: rgba(50,47,40,.12) !important;
  color: #24231f !important;
}

html:not(.dark) thead,
html:not(.dark) th,
html:not(.dark) .bg-gray-100,
html:not(.dark) .bg-gray-200,
html:not(.dark) .bg-slate-100,
html:not(.dark) .bg-primary-50,
html:not(.dark) .bg-primary-100,
html:not(.dark) .bg-blue-50,
html:not(.dark) .bg-blue-100,
html:not(.dark) .bg-green-50,
html:not(.dark) .bg-green-100,
html:not(.dark) .bg-emerald-50,
html:not(.dark) .bg-emerald-100,
html:not(.dark) .bg-yellow-50,
html:not(.dark) .bg-yellow-100,
html:not(.dark) .bg-amber-50,
html:not(.dark) .bg-amber-100,
html:not(.dark) .bg-purple-50,
html:not(.dark) .bg-purple-100,
html:not(.dark) .bg-indigo-50,
html:not(.dark) .bg-indigo-100 {
  background-color: #e8e5dc !important;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) .text-gray-900,
html:not(.dark) .text-slate-900,
html:not(.dark) .text-black {
  color: #24231f !important;
}

html:not(.dark) p,
html:not(.dark) .text-gray-700,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-slate-600,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-dark-400 {
  color: #6f6a60 !important;
}

html:not(.dark) .btn.btn-primary,
html:not(.dark) .btn-primary,
html:not(.dark) a[href="/login"].btn,
html:not(.dark) a[href="/dashboard"].btn,
html:not(.dark) a[href="/admin/dashboard"].btn,
html:not(.dark) button[type="submit"] {
  background: #2f2d29 !important;
  border-color: #2f2d29 !important;
  color: #f7f5ef !important;
}

html:not(.dark) .btn.btn-primary:hover,
html:not(.dark) .btn-primary:hover,
html:not(.dark) button[type="submit"]:hover {
  background: #24231f !important;
  border-color: #24231f !important;
}

html:not(.dark) .btn-secondary,
html:not(.dark) button:not(.relative.inline-flex.h-5.w-9):not([aria-label="User Menu"]):not([type="submit"]),
html:not(.dark) [role="button"] {
  background-color: #f1efe8 !important;
  border-color: rgba(50,47,40,.13) !important;
  color: #34322d !important;
}

html:not(.dark) aside .sidebar-link-active,
html:not(.dark) aside .router-link-active,
html:not(.dark) aside a.router-link-active,
html:not(.dark) aside [aria-current="page"],
html:not(.dark) [class*="sidebar"] .sidebar-link-active,
html:not(.dark) [class*="sidebar"] .router-link-active,
html:not(.dark) [class*="sidebar"] a.router-link-active,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active,
html:not(.dark) [class*="Sidebar"] .router-link-active,
html:not(.dark) [class*="Sidebar"] a.router-link-active {
  background: #dedad0 !important;
  background-color: #dedad0 !important;
  color: #24231f !important;
  border-color: rgba(50,47,40,.10) !important;
}

html:not(.dark) aside .sidebar-link:hover,
html:not(.dark) [class*="sidebar"] .sidebar-link:hover,
html:not(.dark) [class*="Sidebar"] .sidebar-link:hover,
html:not(.dark) aside a:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="Sidebar"] a:hover {
  background: #e8e5dc !important;
  color: #24231f !important;
}

html:not(.dark) .sub2api-token-trend-holder,
html:not(.dark) .sub2api-token-trend-card .h-48,
html:not(.dark) .card:has(.h-48.w-48) .max-h-48.flex-1.overflow-y-auto,
html:not(.dark) .recharts-wrapper,
html:not(.dark) .recharts-responsive-container,
html:not(.dark) .echarts-for-react {
  background: #f7f5ef !important;
  border-color: rgba(50,47,40,.14) !important;
}

html:not(.dark) ::selection {
  background: rgba(80, 74, 63, .20) !important;
  color: #24231f !important;
}

/* v34: remove white inner text/background patches on sidebar hover. */
html:not(.dark) aside a:hover,
html:not(.dark) aside button:hover,
html:not(.dark) aside .sidebar-link:hover,
html:not(.dark) [class*="sidebar"] a:hover,
html:not(.dark) [class*="sidebar"] button:hover,
html:not(.dark) [class*="sidebar"] .sidebar-link:hover,
html:not(.dark) [class*="Sidebar"] a:hover,
html:not(.dark) [class*="Sidebar"] button:hover,
html:not(.dark) [class*="Sidebar"] .sidebar-link:hover {
  background: #e8e5dc !important;
  background-color: #e8e5dc !important;
  background-image: none !important;
  color: #24231f !important;
  box-shadow: none !important;
}

/* Some nav labels/icons are nested spans/divs with bg-white or hover:bg-white classes.
   Make every inner layer transparent so the hover is one unified warm-gray pill. */
html:not(.dark) aside a:hover *,
html:not(.dark) aside button:hover *,
html:not(.dark) aside .sidebar-link:hover *,
html:not(.dark) [class*="sidebar"] a:hover *,
html:not(.dark) [class*="sidebar"] button:hover *,
html:not(.dark) [class*="sidebar"] .sidebar-link:hover *,
html:not(.dark) [class*="Sidebar"] a:hover *,
html:not(.dark) [class*="Sidebar"] button:hover *,
html:not(.dark) [class*="Sidebar"] .sidebar-link:hover * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  border-color: transparent !important;
}

html:not(.dark) aside a:hover svg,
html:not(.dark) aside button:hover svg,
html:not(.dark) [class*="sidebar"] a:hover svg,
html:not(.dark) [class*="sidebar"] button:hover svg,
html:not(.dark) [class*="Sidebar"] a:hover svg,
html:not(.dark) [class*="Sidebar"] button:hover svg {
  color: #24231f !important;
  stroke: currentColor !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: .86 !important;
}

/* Keep active + hover close to the same warm-gray family, avoiding a white flash. */
html:not(.dark) aside .sidebar-link-active:hover,
html:not(.dark) aside .router-link-active:hover,
html:not(.dark) aside [aria-current="page"]:hover,
html:not(.dark) [class*="sidebar"] .sidebar-link-active:hover,
html:not(.dark) [class*="sidebar"] .router-link-active:hover,
html:not(.dark) [class*="Sidebar"] .sidebar-link-active:hover,
html:not(.dark) [class*="Sidebar"] .router-link-active:hover {
  background: #dedad0 !important;
  background-color: #dedad0 !important;
}