/* The customer cabinet is the visual reference for every live HUB screen.
   Legacy component names resolve to this palette so new features do not
   introduce another theme. Keep product-specific layout in its own sheet. */
:root {
  --ui-bg: #070a0f;
  --ui-panel: #0b1119;
  --ui-raised: #0e1621;
  --ui-line: rgba(137, 181, 224, .18);
  --ui-text: #edf5fc;
  --ui-muted: #9cafc1;
  --ui-subtle: #8e9fb3;
  --ui-accent: #53c6ff;
  --ui-primary: #087cbf;
  --ui-primary-hover: #096ca5;
  --ui-good: #5cd7a6;
  --ui-danger: #ff9da6;
  --ui-radius: 16px;
  --ui-control-radius: 10px;
  --ui-shadow: 0 12px 36px #00000014;
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
[data-theme="light"] {
  --ui-bg: #edf3f8;
  --ui-panel: #fff;
  --ui-raised: #f5f8fb;
  --ui-line: rgba(27, 70, 108, .18);
  --ui-text: #102235;
  --ui-muted: #52677b;
  --ui-subtle: #596f83;
  --ui-accent: #006fae;
  --ui-good: #146d49;
  --ui-danger: #aa293b;
  --ui-shadow: 0 12px 36px #193b5a08;
  color-scheme: light;
}
/* Specificity intentionally matches both dark and light legacy declarations. */
:root :is(.app-frame, .admin-frame, .signin, .auth-page) {
  --app-bg: var(--ui-bg);
  --app-surface: var(--ui-panel);
  --app-surface-2: var(--ui-raised);
  --app-border: var(--ui-line);
  --app-text: var(--ui-text);
  --app-muted: var(--ui-muted);
  --app-subtle: var(--ui-subtle);
  --app-accent: var(--ui-accent);
  --admin-bg: var(--ui-bg);
  --admin-sidebar-bg: var(--ui-panel);
  --admin-panel: var(--ui-panel);
  --admin-panel-2: var(--ui-raised);
  --admin-border: var(--ui-line);
  --admin-text: var(--ui-text);
  --admin-muted: var(--ui-muted);
  --admin-subtle: var(--ui-subtle);
  --admin-input-bg: var(--ui-raised);
  --admin-accent: var(--ui-accent);
  --admin-good: var(--ui-good);
  --admin-red: var(--ui-danger);
  --sign-bg: var(--ui-bg);
  --sign-panel: var(--ui-panel);
  --sign-text: var(--ui-text);
  --sign-muted: var(--ui-muted);
  --sign-line: var(--ui-line);
  --sign-accent: var(--ui-accent);
  background: var(--ui-bg);
  color: var(--ui-text);
  color-scheme: inherit;
}
:root .wallet-page {
  --wallet-line: var(--ui-line);
  --wallet-muted: var(--ui-muted);
  --wallet-panel: var(--ui-panel);
  --wallet-text: var(--ui-text);
}
html :is(.app-frame, .admin-frame) { --ui-accent: #53c6ff; --ui-good: #5cd7a6; --ui-danger: #ff9da6; }
html[data-theme="light"] :is(.app-frame, .admin-frame) { --ui-accent: #006fae; --ui-good: #146d49; --ui-danger: #aa293b; }
body { background: var(--ui-bg); }
html { scrollbar-gutter: stable; }
/* Grids and long customer/model names must shrink before the viewport does. */
:is(.app-content, .admin-content, .wallet-page, .signin-layout) :is(section, article, form, fieldset, label, header, footer) { min-width: 0; }
:is(.app-frame, .admin-frame, .signin, .auth-page) :is(h1, h2, h3, p, label, summary) { overflow-wrap: anywhere; }
:is(.app-frame, .admin-frame) :is(.app-panel, .admin-panel, .wallet-panel, .wallet-summary) { border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
:is(.app-content, .admin-content) { width: calc(100% - 64px); max-width: 1480px; padding-top: 28px; }
.admin-frame { grid-template-columns: 268px minmax(0, 1fr); }
:is(.app-sidebar, .admin-sidebar) { width: 268px; padding: 20px 16px; background: var(--ui-panel); border-color: var(--ui-line); }
:is(.app-sidebar, .admin-sidebar) nav { margin-block: 20px; }
:is(.app-sidebar, .admin-sidebar) nav a { height: auto !important; min-height: 44px; padding: 10px 12px; line-height: 1.4; font-size: 14px; }
html :is(.app-sidebar, .admin-sidebar) nav a.active { color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent); background: color-mix(in srgb, var(--ui-accent) 9%, transparent); }
html :is(.app-sidebar, .admin-sidebar) nav a.active svg { color: inherit; }
:is(.app-brand, .admin-brand > a) { min-width: 0; gap: 10px; }
:is(.app-brand, .admin-brand) img { flex: 0 0 100px; width: 100px; }
:is(.app-brand, .admin-brand) span { font-size: 10px; line-height: 1.5; color: var(--ui-muted); }
.account-chip { padding: 12px 8px; }
.account-chip > span { flex: 0 0 34px; }
.account-chip > div { min-width: 0; }
.account-chip strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.account-chip small, .admin-sidebar-bottom small { color: var(--ui-muted); font-size: 12px; }
.admin-sidebar-bottom strong { font-size: 13px; }
.sidebar-bottom .logout-link, .admin-sidebar-bottom form button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px; border-radius: 9px; color: var(--ui-muted); font-size: 13px; line-height: 1.5; }
.sidebar-bottom .logout-link:hover, .admin-sidebar-bottom form button:hover { background: var(--ui-raised); color: var(--ui-text); }
.sidebar-bottom .logout-link svg, .admin-sidebar-bottom form button svg { flex-shrink: 0; }
.admin-security-chip { padding: 12px; color: var(--ui-accent); background: var(--ui-raised); border-color: var(--ui-line); }
.admin-security-chip strong { font-size: 12px; line-height: 1.5; }
:is(.app-topbar, .admin-topbar) { min-height: 100px; padding: 18px 32px; background: var(--ui-bg); gap: 16px; }
:is(.app-topbar, .admin-topbar) h1 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; }
:is(.app-topbar, .admin-topbar) p { font-size: 13px; color: var(--ui-muted); }
:is(.app-breadcrumb, .admin-breadcrumb) { color: var(--ui-muted); font-size: 11px; }
:is(.app-top-actions, .admin-top-actions) { margin-left: auto; }
:is(.app-frame, .admin-frame) :is(.panel-title, .admin-panel-heading, .page-toolbar) { gap: 16px; flex-wrap: wrap; }
:is(.app-frame, .admin-frame) :is(.panel-title, .admin-panel-heading, .page-toolbar) > div { min-width: 0; }
.admin-frame .admin-metrics { gap: 16px; }
.admin-frame .admin-metrics article { padding: 22px; border-radius: 14px; min-width: 0; }
.admin-frame .admin-metrics strong { font-size: clamp(22px, 2.2vw, 32px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* All actual actions have the same geometry, hierarchy and feedback. */
:root :is(.app-frame, .admin-frame, .signin, .auth-page) :is(.button, .admin-primary-button, .admin-secondary-button, .admin-danger-button) {
  height: auto; min-height: 44px; padding: 11px 16px; border-radius: var(--ui-control-radius);
  font-size: 14px; font-weight: 600; line-height: 1.4; white-space: normal; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color 160ms, border-color 160ms, box-shadow 160ms;
}
:root :is(.app-frame, .admin-frame, .signin, .auth-page) :is(.button-primary, .admin-primary-button) {
  background: var(--ui-primary); border: 1px solid var(--ui-primary); color: #fff; box-shadow: inset 0 1px 0 #ffffff18;
}
:root :is(.app-frame, .admin-frame, .signin, .auth-page) :is(.button-primary, .admin-primary-button):hover:not(:disabled) { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); transform: none; }
html :is(.app-frame, .admin-frame, .signin, .auth-page) :is(.button-secondary, .admin-secondary-button) { background: var(--ui-raised); color: var(--ui-text); border: 1px solid var(--ui-line); }
html :is(.app-frame, .admin-frame, .signin, .auth-page) :is(.button-secondary, .admin-secondary-button):hover:not(:disabled) { border-color: var(--ui-accent); transform: none; }
:is(.button, .admin-primary-button, .admin-secondary-button, .admin-danger-button) > svg { flex-shrink: 0; }
html :is(.app-frame, .admin-frame, .signin, .auth-page) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-control-radius); background: var(--ui-raised); color: var(--ui-text);
  font-size: 14px; line-height: 1.5; transition: border-color 160ms, box-shadow 160ms;
}
/* Icon fields already have their own border; the input must not draw a second. */
html :is(.app-frame, .admin-frame) :is(.cc-search-field, .admin-input, .profile-input-wrap, .buy-tokens-amount) input { border: 0; box-shadow: none; background: transparent; }
:is(.app-frame, .admin-frame, .signin, .auth-page) ::placeholder { color: var(--ui-subtle); opacity: 1; }
html :is(.app-frame, .admin-frame, .signin, .auth-page) :focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px; }
html :is(.app-frame, .admin-frame) :is(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; accent-color: var(--ui-primary); flex-shrink: 0; }
:is(.admin-form-grid, .wallet-form, .model-sale-form, .pricing-basis) { align-items: start; gap: 16px; }
:is(.admin-form-grid, .wallet-form, .model-sale-form, .pricing-basis) label { line-height: 1.5; }
:is(.admin-form-grid, .wallet-form, .model-sale-form, .pricing-basis) > button { align-self: end; }
.wallet-grid { align-items: start; }
.admin-vio-price { grid-column: 2; grid-row: span 2; }
.vio-price-fields { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-raised); }
.vio-price-fields legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.wallet-form small { font-size: 12px; color: var(--ui-muted); line-height: 1.5; }
.vio-import { margin: 20px 0; border-top: 1px solid var(--ui-line); padding-top: 12px; }
.vio-import summary { min-height: 44px; padding: 10px 0; color: var(--ui-accent); cursor: pointer; }
.wallet-page > .wallet-note { padding: 14px 18px; border-left: 3px solid var(--ui-accent); border-radius: 0 10px 10px 0; background: var(--ui-raised); margin: 0; }
.wallet-summary { background: radial-gradient(ellipse at top right, #168fe610, transparent 65%), var(--ui-panel); }
.wallet-summary-compact { padding: 22px 24px; }
.wallet-summary-compact h2 { font-size: 30px; margin: 8px 0; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wallet-capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wallet-capacity article { min-width: 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); box-shadow: var(--ui-shadow); }
.wallet-capacity span { display: block; color: var(--ui-muted); font-size: 13px; line-height: 1.4; }
.wallet-capacity strong { display: block; margin: 8px 0 4px; color: var(--ui-text); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wallet-capacity small { color: var(--ui-muted); line-height: 1.5; overflow-wrap: anywhere; }
.wallet-summary dl { min-width: 0; }
.wallet-page dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.wallet-model { background: var(--ui-raised); }
.wallet-model h3 { font-size: 16px; line-height: 1.5; }
.wallet-estimate { font-variant-numeric: tabular-nums; }
.wallet-page .table-scroll { max-width: 100%; }
.wallet-page table { border-collapse: collapse; }
.wallet-page td { vertical-align: top; }
.wallet-page td form { display: flex; flex-wrap: wrap; gap: 8px; min-width: 220px; }
.wallet-page td form input:not([type="hidden"]) { flex: 1 1 160px; }
.table-scroll { overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ui-muted) transparent; }
:is(.wallet-page, .admin-frame) tbody tr:hover { background: color-mix(in srgb, var(--ui-accent) 4%, transparent); }
/* Authentication shares the cabinet's surfaces, including error/expired states. */
:root .auth-page-simple .auth-card-simple, :root .signin .auth-card { background: var(--ui-panel); border-color: var(--ui-line); border-radius: 20px; box-shadow: var(--ui-shadow); }
:root .auth-page-refined .auth-card { background: var(--ui-panel); border-color: var(--ui-line); color: var(--ui-text); border-radius: 20px; box-shadow: var(--ui-shadow); }
:root .auth-page-refined :is(.auth-story > p, .security-item p) { color: var(--ui-muted); }
html .auth-page-simple :is(.auth-description, .auth-help) { color: var(--ui-muted); }
html .signin .button-primary { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
html .signin .button-primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.signin-orbit { height: auto; min-height: 180px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 24px 0; }
.signin-orbit .orbit-ring { display: none; }
.signin-orbit .orbit-core { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.signin-orbit .orbit-label { position: static; border-radius: 10px; padding: 10px 12px; }
.profile-field.readonly { height: auto; min-height: 48px; flex-wrap: wrap; padding: 12px; }
.profile-field.readonly span { min-width: 0; overflow-wrap: anywhere; }
.profile-field.readonly small { margin-left: auto; }
.profile-session { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--ui-line); }
.profile-session > svg { color: var(--ui-accent); flex-shrink: 0; }
.profile-session > div { flex: 1 1 220px; }
.profile-session p { color: var(--ui-muted); margin-top: 5px; }
/* Fade only: content never travels around the page or shifts on hover. */
@keyframes ui-reveal { from { opacity: .35; } to { opacity: 1; } }
:is(.app-content, .admin-content, .signin .auth-card, .auth-card-simple) { animation: ui-reveal 220ms var(--ui-ease); }
@media (min-width: 761px) and (max-width: 1100px) {
  :is(.app-topbar, .admin-topbar) { flex-wrap: wrap; }
  :is(.app-top-actions, .admin-top-actions) { margin-left: 0; }
}
@media (max-width: 760px) {
  .app-frame, .admin-frame { grid-template-columns: minmax(0, 1fr); }
  :is(.app-sidebar, .admin-sidebar) { width: min(300px, calc(100vw - 32px)); }
  :is(.app-content, .admin-content) { width: calc(100% - 32px); padding-top: 20px; }
  :is(.app-topbar, .admin-topbar) { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; padding: 14px 16px; gap: 12px; }
  :is(.app-menu, .admin-menu) { margin: 0; }
  :is(.app-topbar, .admin-topbar) h1 { font-size: 22px; margin-bottom: 4px; }
  :is(.app-topbar, .admin-topbar) p { display: block; font-size: 12px; }
  :is(.app-top-actions, .admin-top-actions) { margin: 0; }
  :is(.app-top-actions .gateway-state, .admin-top-actions .admin-payment-state) { display: none; }
  .admin-frame .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .admin-frame .admin-metrics article { padding: 16px; }
  html :is(.app-frame, .admin-frame, .signin, .auth-page) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 16px; }
  .profile-session .button { width: 100%; }
  .wallet-summary dl > div { gap: 12px; flex-wrap: wrap; }
  .wallet-capacity { grid-template-columns: minmax(0, 1fr); }
  .admin-vio-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-vio-price { grid-column: auto; grid-row: auto; }
  .admin-frame .admin-row.readiness { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; margin: 0; }
  .admin-frame .admin-row.readiness > span { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  .admin-frame .admin-row.readiness .admin-secondary-button { width: 100%; }
  .wallet-actions > a { flex: 1 1 150px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}