/* Yuexi full-site editorial control-room theme */
:root {
  --yx-paper: #f3f0e7;
  --yx-paper-2: #e8e3d7;
  --yx-paper-3: #ddd7c9;
  --yx-panel: rgba(247, 244, 236, .94);
  --yx-panel-solid: #f7f4ec;
  --yx-ink: #10110f;
  --yx-ink-soft: #2b2d28;
  --yx-blue: #2647ff;
  --yx-orange: #ff5d32;
  --yx-acid: #d9ff54;
  --yx-muted: #666961;
  --yx-line: rgba(16, 17, 15, .16);
  --yx-line-strong: rgba(16, 17, 15, .38);
  --yx-shadow: rgba(16, 17, 15, .92);
  --yx-success: #178a5a;
  --yx-danger: #c53d25;
  --primary-50: #eef1ff;
  --primary-100: #dfe5ff;
  --primary-200: #c4ceff;
  --primary-300: #9eafff;
  --primary-400: #7189ff;
  --primary-500: #2647ff;
  --primary-600: #1d39df;
  --primary-700: #1730b8;
  --primary-800: #172b91;
  --primary-900: #17276e;
  color-scheme: light;
}
html.dark {
  --yx-paper: #11130f;
  --yx-paper-2: #191c17;
  --yx-paper-3: #232720;
  --yx-panel: rgba(24, 27, 22, .94);
  --yx-panel-solid: #181b16;
  --yx-ink: #f3f0e7;
  --yx-ink-soft: #d9d5ca;
  --yx-blue: #6d8cff;
  --yx-orange: #ff7954;
  --yx-acid: #d9ff54;
  --yx-muted: #a2a69b;
  --yx-line: rgba(243, 240, 231, .14);
  --yx-line-strong: rgba(243, 240, 231, .34);
  --yx-shadow: #030403;
  --yx-success: #71e4b1;
  --yx-danger: #ff856c;
  color-scheme: dark;
}
html { min-height: 100%; background: var(--yx-paper) !important; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--yx-ink) !important;
  background:
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--yx-blue) 10%, transparent), transparent 25rem),
    radial-gradient(circle at 8% 90%, color-mix(in srgb, var(--yx-orange) 8%, transparent), transparent 26rem),
    var(--yx-paper) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(var(--yx-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--yx-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
#app { position: relative; z-index: 1; min-height: 100vh; }
#yx-global-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .46; }
#yx-global-ambient canvas { display: block; width: 100% !important; height: 100% !important; }
body[data-yx-route="login"] #yx-global-ambient { opacity: .82; }
body[data-yx-route="admin"] #yx-global-ambient,
body[data-yx-route="user"] #yx-global-ambient { opacity: .34; }
body[data-yx-route="home"] #yx-global-ambient { opacity: 0; }
::selection { color: #fff; background: var(--yx-blue); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--yx-blue) !important; outline-offset: 3px !important; }
* { scrollbar-width: thin; scrollbar-color: var(--yx-blue) var(--yx-paper-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--yx-paper-2); }
::-webkit-scrollbar-thumb { background: var(--yx-blue); border: 2px solid var(--yx-paper-2); }

/* Login and public auth surfaces */
body[data-yx-route="login"] #app > div.relative.flex.min-h-screen { background: transparent !important; }
body[data-yx-route="login"] #app > div.relative.flex.min-h-screen > .absolute.inset-0.bg-gradient-to-br { opacity: 0 !important; }
body[data-yx-route="login"] #app > div.relative.flex.min-h-screen > .pointer-events-none.absolute.inset-0 { opacity: .18 !important; }
body[data-yx-route="login"] #app::before {
  content: "YUEXI / SECURE ACCESS";
  position: fixed;
  z-index: 3;
  top: 24px;
  left: 30px;
  padding-left: 42px;
  color: var(--yx-ink);
  font: 900 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .17em;
  pointer-events: none;
}
body[data-yx-route="login"] #app::before { background: linear-gradient(var(--yx-orange), var(--yx-orange)) left center / 30px 8px no-repeat; }
body[data-yx-route="login"] #app::after {
  content: "01";
  position: fixed;
  z-index: 0;
  right: 3vw;
  bottom: 1vw;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--yx-ink) 20%, transparent);
  font: 900 clamp(100px, 15vw, 230px)/.8 "Arial Black", "PingFang SC", sans-serif;
  letter-spacing: -.09em;
  pointer-events: none;
}
body[data-yx-route="login"] .mb-8.text-center > .mb-4.inline-flex {
  width: 78px !important;
  height: 78px !important;
  padding: 5px;
  overflow: visible !important;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 2px !important;
  background: var(--yx-acid) !important;
  box-shadow: 7px 7px 0 var(--yx-ink) !important;
  transform: rotate(-3deg);
}
body[data-yx-route="login"] .mb-8.text-center > .mb-4.inline-flex img { border-radius: 0 !important; }
body[data-yx-route="login"] .text-gradient {
  color: var(--yx-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Arial Black", "PingFang SC", sans-serif !important;
  font-size: clamp(36px, 4vw, 48px) !important;
  letter-spacing: -.055em !important;
}
body[data-yx-route="login"] .card-glass {
  position: relative;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 2px !important;
  background: color-mix(in srgb, var(--yx-paper) 91%, transparent) !important;
  box-shadow: 9px 9px 0 var(--yx-blue), 17px 17px 0 var(--yx-orange) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}
body[data-yx-route="login"] .card-glass::before {
  content: "ACCESS FORM / AUTHORIZED ONLY";
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 10px;
  color: var(--yx-paper);
  background: var(--yx-ink);
  font: 800 8px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}
body[data-yx-route="login"] .card-glass h2 {
  color: var(--yx-ink) !important;
  font-family: "Arial Black", "PingFang SC", sans-serif !important;
  font-size: 30px !important;
  letter-spacing: -.045em;
}
body[data-yx-route="login"] .relative:has(> input.input) > .pointer-events-none svg { color: var(--yx-blue) !important; }
body[data-yx-route="login"] .mt-8.text-center.text-xs { color: var(--yx-muted) !important; font: 700 10px/1.6 "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; }

/* Sidebar */
.sidebar {
  color: var(--yx-ink) !important;
  background: color-mix(in srgb, var(--yx-paper) 93%, transparent) !important;
  border-right: 2px solid var(--yx-ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(1.1);
}
.sidebar-header, .sidebar-brand { border-bottom: 1px solid var(--yx-line-strong) !important; }
.sidebar-logo {
  padding: 3px;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 1px !important;
  background: var(--yx-acid) !important;
  box-shadow: 4px 4px 0 var(--yx-ink) !important;
}
.sidebar-brand-title {
  color: var(--yx-ink) !important;
  font-family: "Arial Black", "PingFang SC", sans-serif !important;
  font-size: 17px !important;
  letter-spacing: -.04em !important;
}
.sidebar-section { border-top: 1px solid var(--yx-line) !important; }
.sidebar-section-title, .sidebar-section-title-text {
  color: var(--yx-muted) !important;
  font: 800 9px/1.2 "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .17em !important;
  text-transform: uppercase;
}
.sidebar-link {
  position: relative;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  color: var(--yx-ink-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease !important;
}
.sidebar-link svg { color: var(--yx-blue) !important; }
.sidebar-link:hover {
  color: var(--yx-ink) !important;
  background: var(--yx-acid) !important;
  border-color: var(--yx-ink) !important;
  transform: translateX(4px);
}
.sidebar-link:hover svg { color: var(--yx-ink) !important; }
.sidebar-link.router-link-active,
.sidebar-link.router-link-exact-active,
.sidebar-link[aria-current="page"],
.sidebar-link.bg-primary-50,
.sidebar-link.text-primary-600 {
  color: #fff !important;
  background: var(--yx-blue) !important;
  border-color: var(--yx-ink) !important;
  box-shadow: 3px 3px 0 var(--yx-ink) !important;
}
.sidebar-link.router-link-active svg,
.sidebar-link.router-link-exact-active svg,
.sidebar-link[aria-current="page"] svg,
.sidebar-link.bg-primary-50 svg,
.sidebar-link.text-primary-600 svg { color: var(--yx-acid) !important; }
.sidebar-label { letter-spacing: .015em; }
.footer-left, .footer-right, .footer-shortcuts { color: var(--yx-muted) !important; font-family: "SFMono-Regular", Consolas, monospace; }

/* Top bar and page chrome */
.glass {
  background: color-mix(in srgb, var(--yx-paper) 88%, transparent) !important;
  border-color: var(--yx-ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}
header.glass { border-bottom-width: 2px !important; }
main {
  position: relative;
  color: var(--yx-ink) !important;
  background: transparent !important;
}
main.yx-page-enter { animation: yx-page-in .38s cubic-bezier(.2,.8,.2,1) both; }
main h1, main h2, main h3, .modal-title {
  color: var(--yx-ink) !important;
  font-family: "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.035em;
}
main h1 { font-size: clamp(28px, 3vw, 42px); }
main h2 { letter-spacing: -.03em; }
main p { color: var(--yx-muted); }
main .text-gray-900, main .text-gray-800, main .text-gray-700 { color: var(--yx-ink) !important; }
main .text-gray-600, main .text-gray-500, main .text-gray-400 { color: var(--yx-muted) !important; }
html.dark main .dark\:text-white, html.dark main .dark\:text-gray-300, html.dark main .dark\:text-gray-400, html.dark main .dark\:text-dark-300 { color: var(--yx-ink) !important; }

/* Cards and surfaces */
.card {
  position: relative;
  color: var(--yx-ink) !important;
  background: var(--yx-panel) !important;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 2px !important;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--yx-shadow) 86%, transparent) !important;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 66px;
  height: 4px;
  background: linear-gradient(90deg, var(--yx-blue) 0 40px, var(--yx-orange) 40px 54px, var(--yx-acid) 54px 66px);
  pointer-events: none;
}
.card:hover { box-shadow: 7px 7px 0 color-mix(in srgb, var(--yx-shadow) 92%, transparent) !important; }
.card > .border-b, .card .border-b { border-color: var(--yx-line-strong) !important; }
.bg-white { background-color: var(--yx-panel-solid) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--yx-paper-2) !important; }
html.dark .dark\:bg-dark-800, html.dark .dark\:bg-dark-900, html.dark .dark\:bg-dark-950 { background-color: var(--yx-panel) !important; }
html.dark .dark\:bg-dark-700 { background-color: var(--yx-paper-2) !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .dark\:border-dark-700, .dark\:border-dark-800 { border-color: var(--yx-line-strong) !important; }
.bg-mesh-gradient { background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--yx-blue) 12%, transparent), transparent 35%), radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--yx-orange) 10%, transparent), transparent 30%) !important; }
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 4px 4px 0 color-mix(in srgb, var(--yx-shadow) 35%, transparent) !important; }
.glass.bg-white, .glass.bg-gray-50 { background: color-mix(in srgb, var(--yx-paper) 88%, transparent) !important; }

/* Buttons */
.btn {
  min-height: 38px;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 1px !important;
  color: var(--yx-ink) !important;
  background: var(--yx-paper) !important;
  box-shadow: 3px 3px 0 var(--yx-ink) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease !important;
}
.btn:hover:not(:disabled) { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--yx-ink) !important; }
.btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: none !important; }
.btn-primary { color: #fff !important; background: var(--yx-blue) !important; }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--yx-blue) 86%, var(--yx-ink)) !important; }
.btn-secondary { color: var(--yx-ink) !important; background: var(--yx-acid) !important; }
.btn-ghost { border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
.btn-ghost:hover:not(:disabled) { color: var(--yx-ink) !important; background: var(--yx-acid) !important; border-color: var(--yx-ink) !important; }
.btn-icon { border: 1px solid var(--yx-line-strong) !important; border-radius: 1px !important; box-shadow: none !important; background: color-mix(in srgb, var(--yx-paper) 75%, transparent) !important; }
.btn-icon:hover:not(:disabled) { background: var(--yx-acid) !important; color: var(--yx-ink) !important; }
.btn:disabled { opacity: .42 !important; box-shadow: none !important; }
button.bg-primary-600, a.bg-primary-600, button.bg-primary-500, a.bg-primary-500 {
  color: white !important;
  background: var(--yx-blue) !important;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 1px !important;
  box-shadow: 3px 3px 0 var(--yx-ink) !important;
  font-weight: 800 !important;
}
button.bg-red-600, a.bg-red-600 { border: 2px solid var(--yx-ink) !important; border-radius: 1px !important; box-shadow: 3px 3px 0 var(--yx-ink) !important; }

/* Inputs, selects, toggles */
.input, .select-trigger, .date-picker-trigger,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], textarea, select {
  color: var(--yx-ink) !important;
  background: color-mix(in srgb, var(--yx-paper) 92%, transparent) !important;
  border: 1.5px solid var(--yx-line-strong) !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.input:focus, .select-trigger:focus, .date-picker-trigger:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="url"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
  border-color: var(--yx-blue) !important;
  box-shadow: 3px 3px 0 var(--yx-blue) !important;
  outline: none !important;
  background: var(--yx-paper) !important;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--yx-muted) 72%, transparent) !important; }
input:-webkit-autofill { -webkit-text-fill-color: var(--yx-ink) !important; box-shadow: 0 0 0 1000px var(--yx-paper) inset !important; }
.input-label { color: var(--yx-ink) !important; font: 800 10px/1.4 "SFMono-Regular", Consolas, monospace !important; letter-spacing: .12em; text-transform: uppercase; }
.input-hint, .input-error-text { font-family: "SFMono-Regular", Consolas, monospace; }
.input-error-text { color: var(--yx-danger) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--yx-blue); }
button[role="switch"] { border: 1.5px solid var(--yx-ink) !important; border-radius: 1px !important; box-shadow: 2px 2px 0 var(--yx-ink) !important; }
.select-trigger, .date-picker-trigger { padding-top: 9px !important; padding-bottom: 9px !important; }
.select-icon, .date-picker-icon, .date-picker-chevron { color: var(--yx-blue) !important; }

/* Tables and data display */
main table { border-collapse: collapse !important; color: var(--yx-ink) !important; }
main table thead tr { background: var(--yx-paper-2) !important; border-top: 2px solid var(--yx-ink) !important; border-bottom: 2px solid var(--yx-ink) !important; }
main table th { padding-top: 12px !important; padding-bottom: 12px !important; color: var(--yx-muted) !important; font: 800 9px/1.4 "SFMono-Regular", Consolas, monospace !important; letter-spacing: .11em !important; text-transform: uppercase; }
main table td { padding-top: 12px !important; padding-bottom: 12px !important; border-top: 1px solid var(--yx-line) !important; color: var(--yx-ink-soft); }
main table tbody tr { transition: background .14s ease; }
main table tbody tr:hover { background: color-mix(in srgb, var(--yx-acid) 24%, transparent) !important; }
main table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--yx-paper-2) 45%, transparent); }
main table a { color: var(--yx-blue) !important; font-weight: 700; }
.badge, [class*="badge-"] {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px !important;
  border: 1px solid currentColor !important;
  border-radius: 1px !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--yx-shadow) 28%, transparent);
  font: 800 9px/1.2 "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.empty-state { border: 2px dashed var(--yx-line-strong) !important; background: color-mix(in srgb, var(--yx-paper-2) 60%, transparent) !important; }
.empty-state-icon { color: var(--yx-blue) !important; }
.empty-state-title { color: var(--yx-ink) !important; font-family: "Arial Black", "PingFang SC", sans-serif; }
.empty-state-description { color: var(--yx-muted) !important; }

/* Tabs, navigation and menus */
[role="tab"] { border-radius: 1px !important; font-weight: 700 !important; }
[role="tab"][aria-selected="true"] { color: #fff !important; background: var(--yx-blue) !important; border-color: var(--yx-ink) !important; box-shadow: 3px 3px 0 var(--yx-ink) !important; }
[role="menu"], [role="listbox"], .driver-popover {
  color: var(--yx-ink) !important;
  background: var(--yx-panel-solid) !important;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 1px !important;
  box-shadow: 6px 6px 0 var(--yx-ink) !important;
}
[role="menuitem"]:hover, [role="option"]:hover { background: var(--yx-acid) !important; color: var(--yx-ink) !important; }
.driver-popover-title { font-family: "Arial Black", "PingFang SC", sans-serif; }
.driver-popover-progress-text { color: var(--yx-blue) !important; font-family: "SFMono-Regular", Consolas, monospace; }

/* Modals, drawers and alerts */
.modal-overlay, [class*="modal-overlay"] { background: color-mix(in srgb, var(--yx-ink) 78%, transparent) !important; backdrop-filter: blur(8px) !important; }
.modal-header, .modal-footer { border-color: var(--yx-line-strong) !important; background: var(--yx-paper-2) !important; }
.modal-title { font-family: "Arial Black", "PingFang SC", sans-serif !important; }
.modal-body { background: var(--yx-panel-solid) !important; }
[role="dialog"] { color: var(--yx-ink) !important; }
.modal-content { color: var(--yx-ink) !important; background: var(--yx-panel-solid) !important; border: 2px solid var(--yx-ink) !important; border-radius: 2px !important; box-shadow: 9px 9px 0 var(--yx-blue) !important; overflow: hidden; }
[role="alert"], [role="status"] { border-radius: 1px !important; }
.navigation-progress-bar { background: linear-gradient(90deg, var(--yx-orange), var(--yx-acid), var(--yx-blue)) !important; }

/* Misc surfaces */
.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-lg { border-radius: 2px !important; }
.rounded-full { border-radius: 999px !important; }
code, pre, .font-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; }
.bg-primary-50, .dark\:bg-primary-900\/20, .dark\:bg-primary-900\/30 { background: color-mix(in srgb, var(--yx-blue) 10%, transparent) !important; }
.text-primary-600, .text-primary-700, .dark\:text-primary-300, .dark\:text-primary-400 { color: var(--yx-blue) !important; }
.border-primary-200, .border-primary-300, .dark\:border-primary-800 { border-color: color-mix(in srgb, var(--yx-blue) 45%, var(--yx-line)) !important; }
.text-green-500, .text-green-600, .text-emerald-600, .dark\:text-green-400, .dark\:text-emerald-400 { color: var(--yx-success) !important; }
.text-red-500, .text-red-600, .dark\:text-red-400 { color: var(--yx-danger) !important; }
.shadow-glow { box-shadow: 4px 4px 0 color-mix(in srgb, var(--yx-blue) 55%, transparent) !important; }

/* Route transitions */
@keyframes yx-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1023px) {
  body::before { background-size: 26px 26px; }
  body[data-yx-route="login"] #app::before { top: 16px; left: 16px; }
  body[data-yx-route="login"] #app::after { display: none; }
  body[data-yx-route="login"] .card-glass { box-shadow: 6px 6px 0 var(--yx-blue), 12px 12px 0 var(--yx-orange) !important; }
  .card { box-shadow: 3px 3px 0 color-mix(in srgb, var(--yx-shadow) 80%, transparent) !important; }
}
@media (max-width: 640px) {
  body[data-yx-route="login"] #app::before { content: "YUEXI / ACCESS"; font-size: 8px; }
  body[data-yx-route="login"] .card-glass { box-shadow: 5px 5px 0 var(--yx-blue), 10px 10px 0 var(--yx-orange) !important; }
  main { padding-left: 14px !important; padding-right: 14px !important; }
  .sidebar-link { margin-left: 5px !important; margin-right: 5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Consumer-facing brand cleanup */
.driver-overlay, .driver-popover { display: none !important; }
body.driver-active { overflow: auto !important; }
body.driver-active * { pointer-events: auto !important; }
a[href*="github.com/Wei-Shaw/sub2api"] { display: none !important; }

/* Full-site polish pass */
header.glass > div.flex { min-width: 0 !important; }
header.glass > div.flex > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
}
header.glass > div.flex > div:first-child > div.hidden.lg\:block {
  min-width: 0 !important;
  overflow: hidden !important;
}
header.glass h1,
header.glass p {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
main .table-wrapper,
main .table-scroll-container {
  max-width: 100% !important;
  overscroll-behavior-inline: contain;
}
main .table-wrapper.is-scrollable {
  overflow-x: auto !important;
  scrollbar-gutter: stable;
}
main table .sticky-col,
main table .sticky-col-left,
main table .sticky-col-right {
  background: var(--yx-paper-2) !important;
  border-color: var(--yx-line-strong) !important;
}
main table tbody .sticky-col,
main table tbody .sticky-col-left,
main table tbody .sticky-col-right { background: var(--yx-panel-solid) !important; }
main table tbody tr:hover .sticky-col,
main table tbody tr:hover .sticky-col-left,
main table tbody tr:hover .sticky-col-right {
  background: color-mix(in srgb, var(--yx-acid) 24%, var(--yx-panel-solid)) !important;
}
main button.bg-white,
main button.rounded-md {
  color: var(--yx-ink) !important;
  background: var(--yx-paper) !important;
  border: 1px solid var(--yx-line-strong) !important;
  border-radius: 1px !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--yx-shadow) 38%, transparent) !important;
}
main button.bg-white:hover,
main button.rounded-md:hover { background: var(--yx-acid) !important; }
.settings-tabs-shell {
  background: var(--yx-paper-2) !important;
  border: 2px solid var(--yx-ink) !important;
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--yx-shadow) 72%, transparent) !important;
}
.settings-tabs-shell [role="tab"] {
  border: 1px solid transparent !important;
  border-radius: 1px !important;
}
.settings-tabs-shell [role="tab"][aria-selected="true"] {
  color: #fff !important;
  background: var(--yx-blue) !important;
  border-color: var(--yx-ink) !important;
}

main .table-page-layout,
main .layout-section-scrollable,
main .table-scroll-container {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
main button.bg-gray-50,
main button.bg-gray-100,
main button.bg-gray-200,
main button.bg-blue-100,
main button.bg-blue-500,
main button.bg-blue-600 {
  border: 1px solid var(--yx-line-strong) !important;
  border-radius: 1px !important;
}
main button.bg-blue-500,
main button.bg-blue-600 {
  border-color: var(--yx-ink) !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--yx-shadow) 42%, transparent) !important;
}

/* Light/dark depth and contrast refinement */
body { overflow-x: clip !important; }
header button.bg-gray-100,
aside button.bg-gray-100 {
  border: 1px solid var(--yx-line-strong) !important;
  border-radius: 1px !important;
  box-shadow: none !important;
}
main div.h-6.w-16.rounded-full {
  border: 2px solid var(--yx-ink) !important;
  border-radius: 2px !important;
  background: var(--yx-paper-3) !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--yx-shadow) 45%, transparent) !important;
}
main div.h-6.w-16.rounded-full > span { border-radius: 1px !important; }
main span.inline-flex.items-center.rounded-full {
  border: 1px solid currentColor !important;
  border-radius: 1px !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--yx-shadow) 25%, transparent);
}
html.dark body {
  background:
    radial-gradient(circle at 84% 8%, rgba(109, 140, 255, .13), transparent 26rem),
    radial-gradient(circle at 8% 90%, rgba(255, 121, 84, .08), transparent 27rem),
    #0c0e0b !important;
}
html.dark main {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 28rem),
    transparent !important;
}
html.dark .card {
  background: linear-gradient(145deg, rgba(34, 38, 31, .98), rgba(22, 25, 20, .97)) !important;
  border-color: rgba(243, 240, 231, .72) !important;
  box-shadow: 6px 6px 0 rgba(3, 4, 3, .92) !important;
}
html.dark .card:hover { box-shadow: 8px 8px 0 rgba(3, 4, 3, .98) !important; }
html.dark .sidebar {
  background: rgba(15, 17, 13, .97) !important;
  border-right-color: rgba(243, 240, 231, .72) !important;
}
html.dark header.glass {
  background: rgba(15, 17, 13, .94) !important;
  border-color: rgba(243, 240, 231, .72) !important;
}
html.dark .btn {
  color: var(--yx-ink) !important;
  background: #1d211a !important;
  border-color: rgba(243, 240, 231, .72) !important;
  box-shadow: 3px 3px 0 #030403 !important;
}
html.dark .btn-primary {
  color: #fff !important;
  background: var(--yx-blue) !important;
  border-color: var(--yx-ink) !important;
}
html.dark .btn-secondary {
  color: #10110f !important;
  background: var(--yx-acid) !important;
  border-color: var(--yx-ink) !important;
}
html.dark .input,
html.dark .select-trigger,
html.dark .date-picker-trigger,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  color: var(--yx-ink) !important;
  background: #1c2019 !important;
  border-color: #4c5347 !important;
}
html.dark .input:focus,
html.dark .select-trigger:focus,
html.dark .date-picker-trigger:focus,
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  background: #20251d !important;
  border-color: var(--yx-blue) !important;
  box-shadow: 3px 3px 0 rgba(109, 140, 255, .5) !important;
}
html.dark main table thead tr { background: #22271f !important; }
html.dark main table tbody tr:nth-child(even) { background: rgba(32, 37, 29, .62) !important; }
html.dark main table tbody tr:hover { background: rgba(109, 140, 255, .12) !important; }
html.dark main table td { color: #ddd9ce !important; border-top-color: rgba(243,240,231,.11) !important; }
html.dark main table .sticky-col,
html.dark main table .sticky-col-left,
html.dark main table .sticky-col-right { background: #22271f !important; }
html.dark main table tbody .sticky-col,
html.dark main table tbody .sticky-col-left,
html.dark main table tbody .sticky-col-right { background: #1b1f19 !important; }
html.dark .settings-tabs-shell { background: #20251d !important; }
html.dark .bg-white { background-color: #1c2019 !important; }
html.dark .bg-gray-50,
html.dark .bg-gray-100 { background-color: #22271f !important; }

header.glass > div.flex > div:last-child {
  flex: 0 0 auto !important;
  max-width: none !important;
}