/* Shared visual system for the local console preview. Layout and interaction
   contracts remain in each feature's stylesheet. */
:root {
  --glass-ink: #171717;
  --glass-muted: #737373;
  --glass-accent: rgba(89,104,206,.92);
  --glass-accent-hover: #4d5bc0;
  --glass-accent-soft: rgba(238,240,255,.72);
  --glass-accent-line: rgba(173,181,229,.85);
  --glass-surface: #fff;
  --glass-surface-accent: #fff;
  --glass-inset: #fafafa;
  --glass-line: #e5e7eb;
  --glass-radius: 16px;
  --glass-blur: none;
  --glass-shadow: 0 1px 2px rgba(16,24,40,.025);
  --glass-shadow-hover: 0 12px 28px -18px rgba(15,23,42,.28);
  --glass-shadow-sm: 0 1px 2px rgba(16,24,40,.025);
  --glass-control-shadow: none;
  --glass-background: #f7f8fa;
}
body,
body:has(.app-shell:not([hidden])) { background: var(--glass-background); }
.app-shell {
  --ink: var(--glass-ink);
  --muted: var(--glass-muted);
  --faint: #a3a3a3;
  --accent: var(--glass-accent);
  --line: var(--glass-line);
  --line-strong: #d4d4d4;
  --panel: var(--glass-surface);
  color: var(--glass-ink);
  background: var(--glass-background);
}
.app-shell .console-main { background: var(--glass-background); }
.app-shell .topbar {
  --ink: #171717;
  --muted: #737373;
  --faint: #a3a3a3;
  color: var(--ink);
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255,255,255,.96);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-shell .sidebar {
  border-right: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Brand colors stay independent of the content palette. */
.app-shell .console-brand { --ink: #171717; --faint: #a3a3a3; color: var(--ink); }
.auth-shell .auth-home-logo { color: #0a0a0a; }
.app-shell .new-chat-button { border: 1px solid #171717; border-radius: 10px; background: #171717; box-shadow: none; }
.app-shell .new-chat-button:hover { border-color: #262626; background: #262626; }
.app-shell .console-nav :is(button,a) { border-radius: 8px; color: #525252; transition: background .18s ease,color .18s ease; }
.app-shell .console-nav :is(button,a):hover { background: #f5f5f5; color: #171717; }
.app-shell .console-nav button.active { background: #f5f5f5; color: #171717; box-shadow: none; font-weight: 600; }
.app-shell .console-nav button.active svg { color: #171717; }
.app-shell .console-nav .admin-subnav button { border-radius: 7px; }
.app-shell .admin-subnav { border-left-color: #e5e7eb; }
.app-shell .sidebar-status { border-top-color: #ededed; }
.app-shell .sidebar-community-link { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; box-shadow: none; }
.app-shell :is(.balance-chip,.announcement-trigger,.sidebar-collapse-button,.menu-button,.sidebar-mobile-close) { border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #525252; box-shadow: none; }
.app-shell .topbar-actions { gap: 10px; }
.app-shell :is(.balance-chip,.announcement-trigger):hover { border-color: #d4d4d4; background: #fafafa; color: #171717; }
.app-shell .user-button > span { background: #f0f0f0; color: #171717; }
.app-shell .user-menu { border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px; background: #fff; box-shadow: 0 16px 36px -16px rgba(15,23,42,.25); }
.app-shell .user-menu button { border-radius: 8px; min-height: 38px; }
.app-shell .user-menu button:hover { background: #f5f5f5; }
.app-shell .pico-language-button,
.auth-shell .pico-language-button { border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #525252; box-shadow: none; }
.app-shell .pico-language-menu,
.auth-shell .pico-language-menu { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 36px -16px rgba(15,23,42,.25); }
.app-shell .pico-language-option,
.auth-shell .pico-language-option { border-radius: 8px; }
.app-shell .pico-language-option.active,
.auth-shell .pico-language-option.active { background: #f0f0f0; color: #171717; }
.app-shell .content-shell { padding: 32px 28px 64px; }
.app-shell .view { width: 100%; min-width: 0; max-width: none; margin-inline: 0; }
.app-shell [data-view-panel="admin"] .global-settings-form { width: 100%; max-width: none; }
.app-shell :is(.view-heading,.workspace-heading) { margin-bottom: 24px; }
.app-shell :is(.view-heading,.workspace-heading) h1 { color: var(--glass-ink); font-size: 30px; font-weight: 650; letter-spacing: -.035em; }
.app-shell :is(.view-heading,.workspace-heading) p:not(.eyebrow) { color: var(--glass-muted); font-size: 14px; line-height: 1.65; }
.app-shell .eyebrow { color: #8a8a8a; letter-spacing: .06em; }
.app-shell .data-section,
.app-shell .metrics-grid article,
.app-shell .usage-metrics-grid article,
.app-shell .usage-filter-bar,
.app-shell .user-settings-sidebar,
.app-shell .user-settings-toolbar,
.app-shell .user-settings-module,
.app-shell .user-settings-pagination,
.app-shell .user-settings-actions,
.app-shell .user-settings-empty,
.app-shell .console-announcements {
  min-width: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
}
.app-shell .view:not([data-view-panel="admin"]) > .data-section,
.app-shell .view:not([data-view-panel="admin"]) .usage-chart-card,
.app-shell .metrics-grid article,
.app-shell .usage-metrics-grid article,
.app-shell .user-settings-module {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.app-shell .metrics-grid article:nth-child(n) { border-top: 1px solid var(--glass-line); }
.app-shell .metrics-grid strong { letter-spacing: -.03em; }
.app-shell .data-section { margin-bottom: 20px; }
.app-shell .section-title { border-bottom: 1px solid #ededed; padding: 20px 22px; }
.app-shell .section-title h2 { color: var(--glass-ink); font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.app-shell .section-title p { color: var(--glass-muted); font-size: 12px; line-height: 1.65; }
.app-shell .notice { border: 1px solid #e1e8f0; border-radius: 12px; padding: 14px 18px; background: #f5f8fb; color: #52657a; box-shadow: none; }
.app-shell .notice strong { color: #34495e; }
.app-shell .table-wrap { scrollbar-color: #d4d4d4 transparent; }
.app-shell th { border: 0; background: #fafafa; color: #737373; font-size: 11px; font-weight: 600; }
.app-shell td { border-bottom-color: #f0f0f0; color: #525252; }
.app-shell tbody tr:hover td { background: #fafafa; }
.app-shell td strong { color: var(--glass-ink); }
.app-shell td code { color: #404040; }
.app-shell .empty-row td { color: var(--glass-muted); padding-block: 32px; }
.app-shell .admin-table-pagination { border-top-color: #ededed; background: #fff; }
.app-shell :is(.status-pill,.capability-pill,.usage-mode-badge) { border-radius: 6px; }
.app-shell .base-url-row { padding: 18px 22px; }
.app-shell .base-url-value { color: #404040; }
.app-shell :is(.base-url-value,.byok-help code,.gift-credit-funds > div) { background: #fff; }
dialog :is(.gift-credit-funds > div,.channel-catalog-footer,.channel-supplier-mappings-heading) { background: #fff; }
.app-shell .login-security-policy-card,
.app-shell .global-sidebar-settings-toolbar,
.app-shell .global-sidebar-group > header,
.app-shell .global-settings-form .announcement-admin-enable,
dialog :is(.group-model-policy-controls,.account-security-dialog pre,.routing-trace-empty,.routing-trace-notice) { background: #fff; }
.app-shell :is(.primary-button,.secondary-button,.icon-button,.row-button),
dialog :is(.primary-button,.secondary-button,.icon-button,.row-button) {
  border-radius: 9px;
  transition: background .18s ease,border-color .18s ease,color .18s ease;
}
.app-shell .primary-button,
dialog .primary-button { border-color: #171717; background: #171717; color: #fff; box-shadow: none; }
.app-shell .primary-button:hover,
dialog .primary-button:hover { border-color: #262626; background: #262626; }
.app-shell .secondary-button,
dialog .secondary-button { border-color: #e5e7eb; background: #fff; color: #525252; box-shadow: none; }
.app-shell .secondary-button:hover,
dialog .secondary-button:hover { border-color: #d4d4d4; background: #f5f5f5; color: #171717; }
.app-shell .icon-button,
dialog .icon-button { border-color: #e5e7eb; background: #fff; color: #737373; box-shadow: none; }
.app-shell .icon-button:hover,
dialog .icon-button:hover { border-color: #d4d4d4; background: #f5f5f5; color: #171717; }
.app-shell .row-button { border-color: #e5e7eb; background: #fafafa; color: #525252; }
.app-shell .row-button:hover { border-color: #d4d4d4; background: #f0f0f0; color: #171717; }
.app-shell .management-token-revoke { color: #b42318; background: #fff4f2; }
.app-shell .management-token-revoke:hover { color: #912018; background: #ffe9e5; }
.app-shell .view :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),select,textarea),
dialog :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),select,textarea) {
  border-color: #dfe3e8;
  border-radius: 9px;
  background-color: #fff;
  color: var(--glass-ink);
  box-shadow: none;
}
.app-shell :is(input,select,textarea):focus,
dialog :is(input,select,textarea):focus { border-color: #a3a3a3; box-shadow: 0 0 0 3px rgba(15,23,42,.07); }
.app-shell :is(button,a,summary,input,select,textarea):focus-visible,
dialog :is(button,a,summary,input,select,textarea):focus-visible { outline: 2px solid #525252; outline-offset: 3px; }
.app-shell :is(button,input,select,textarea):disabled,
dialog :is(button,input,select,textarea):disabled { box-shadow: none; }
.app-shell .segmented { border: 1px solid #e5e7eb; padding: 3px; border-radius: 10px; background: #f5f5f5; }
.app-shell .segmented button { border-radius: 7px; }
.app-shell .segmented button.active,
.app-shell .segmented button.active:hover { background: #fff; color: #171717; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
dialog .dialog-body { border-color: #e5e7eb; border-radius: 16px; box-shadow: 0 24px 70px -20px rgba(15,23,42,.3); }
dialog :is(.dialog-heading,.provider-editor-header,.customer-group-drawer-header) { border-bottom-color: #ededed; }
dialog :is(.dialog-heading h2,.provider-editor-header h2,.customer-group-drawer-header h2) { color: #171717; letter-spacing: -.02em; }
/* Usage keeps dense data on quiet, neutral surfaces. */
.app-shell .usage-filter-bar { padding: 16px; gap: 12px; margin: 0; border: 0; border-bottom: 1px solid #e5e7eb; box-shadow: none; }
.app-shell .usage-metrics-grid { gap: 16px; margin-bottom: 22px; }
.app-shell .usage-metrics-grid article { padding: 20px; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.app-shell .usage-metric-icon { border: 1px solid #ededed; border-radius: 10px; background: #fafafa; color: #525252; }
.app-shell [data-view-panel="usage"] .data-section { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.app-shell .usage-chart-grid { gap: 22px; }
.app-shell .usage-chart-card .section-title { border-bottom: 0; }
.app-shell .usage-analytics-chart { background: transparent; }
.app-shell .usage-chart-readout { background: #fff; }
.app-shell .usage-chart-plot { border-bottom-color: #e5e7eb; }
/* Wallet and subscription cards share the overview balance surface. */
.app-shell .billing-balance-band { padding: 28px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass-surface-accent); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.app-shell .billing-balance-copy span { color: #737373; }
.app-shell .billing-balance-copy strong { color: #171717; letter-spacing: -.05em; overflow-wrap: anywhere; }
.app-shell .billing-balance-copy small { color: var(--glass-muted); }
.app-shell .billing-balance-actions :is(.billing-recharge-trigger,.billing-redeem-trigger) { border: 1px solid #e5e7eb; border-radius: 9px; box-shadow: none; }
.app-shell .billing-balance-actions .billing-recharge-trigger { border-color: #171717; background: #171717; color: #fff; }
.app-shell .billing-balance-actions .billing-redeem-trigger { background: #fff; color: #525252; }
.app-shell .billing-balance-actions .billing-recharge-trigger:hover { background: #262626; }
.app-shell .billing-balance-actions .billing-redeem-trigger:hover { background: #f5f5f5; }
.app-shell .billing-balance-actions button span { color: inherit; }
.app-shell :is(.billing-credit-line,.gift-credit-funds) { border: 1px solid var(--glass-line); border-radius: 14px; background: #fff; }
.app-shell .billing-ledger-filter-bar { border-color: var(--glass-line); background: #fff; }
.app-shell :is(.subscription-card,.subscription-plan-card) { min-width: 0; border: 1px solid var(--glass-line); border-radius: 16px; padding: 22px; background: var(--glass-surface); box-shadow: var(--glass-shadow-sm); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.app-shell :is(.subscription-grid,.subscription-plan-grid) { gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.app-shell .subscription-quota-bar { background: #ededed; }
.app-shell .subscription-quota-bar span { background: #525252; }
/* Preferences use individual floating modules rather than extra nested frames. */
.app-shell .user-settings-sidebar { border-radius: 16px; }
.app-shell .user-settings-sidebar button { border: 0; border-radius: 8px; }
.app-shell .user-settings-sidebar button.active { background: #f0f0f0; color: #171717; box-shadow: none; }
.app-shell .user-settings-toolbar { padding: 18px 22px; }
.app-shell .user-settings-module-list { gap: 16px; }
.app-shell .user-settings-module-heading > span { border: 1px solid rgba(173,181,229,.7); border-radius: 10px; background: rgba(238,240,255,.72); color: #5968ce; }
.app-shell :is(.user-settings-callout,.management-token-identity,.management-token-create-panel,.management-token-row,.oauth-binding-card) { border-color: var(--glass-line); border-radius: 12px; background: #fff; }
.app-shell .oauth-bind-list { background: #fff; }
.app-shell .management-token-create-panel > summary { border-radius: 12px; }
.app-shell .management-token-permissions > label { border-radius: 9px; }
.app-shell .management-token-permissions > label:has(input:checked) { background: #f5f5f5; border-color: #a3a3a3; }
.app-shell .user-settings-actions { padding-inline: 20px; }
/* Conversation canvas shares the white console surface. */
.app-shell [data-view-panel="playground"] { --workspace-border: var(--glass-line); --workspace-muted: var(--glass-muted); --workspace-blue: var(--glass-accent); }
.app-shell [data-view-panel="playground"] :is(.workspace-model-search,.model-picker select,.secondary-button) { border-color: #e5e7eb; border-radius: 9px; background-color: #fff; box-shadow: none; }
.app-shell [data-view-panel="playground"] .workspace-model-search input { border: 0; background: transparent; box-shadow: none; }
.app-shell [data-view-panel="playground"] .playground-split-workspace { border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass-surface); box-shadow: var(--glass-shadow); }
.app-shell [data-view-panel="playground"] :is(.playground-conversation,.chat-stage,.composer-shell) { background: transparent; }
.app-shell [data-view-panel="playground"] .playground-conversation-toolbar { background: #fff; border-bottom-color: var(--glass-line); }
.app-shell [data-view-panel="playground"] .welcome-mark { border: 1px solid #e5e7eb; border-radius: 14px; background: #fafafa; color: #525252; box-shadow: none; }
.app-shell [data-view-panel="playground"] .prompt-suggestions button { border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; box-shadow: none; }
.app-shell [data-view-panel="playground"] .prompt-suggestions button:hover { background: #f5f5f5; }
.app-shell [data-view-panel="playground"] .composer-row { border-color: #dfe3e8; border-radius: 12px; background: #fff; box-shadow: none; }
.app-shell [data-view-panel="playground"] .composer-row textarea { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell [data-view-panel="playground"] .send-button { border-radius: 9px; background: #171717; }
.app-shell [data-view-panel="playground"] .chat-message.user .message-content { border: 1px solid #e5e7eb; border-radius: 14px 4px 14px 14px; background: #f0f0f0; }
.app-shell [data-view-panel="playground"] .message-content pre { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
.app-shell [data-view-panel="playground"] .playground-parameters { background: #fff; }
.app-shell [data-view-panel="playground"] .playground-parameter-section :is(input,select,textarea) { border-radius: 9px; background-color: #fff; }
/* Dialogs use opaque white surfaces for long forms and dense content. */
dialog { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; color: var(--glass-ink); box-shadow: 0 24px 70px -20px rgba(15,23,42,.3); }
dialog::backdrop { background: rgba(15,23,42,.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog .dialog-body { background: transparent; }
dialog .dialog-heading { border-bottom-color: var(--glass-line); }
dialog .dialog-heading h2 { color: var(--glass-ink); }
dialog .dialog-heading > button { border-color: #e5e7eb; border-radius: 9px; background: #fff; color: #737373; }
dialog .dialog-actions { border-top-color: var(--glass-line); }
dialog :is(.secret-key,.recharge-summary,.recharge-order-summary,.account-security-summary,.authenticator-enrollment) { border-color: var(--glass-line); border-radius: 12px; background: #fff; }
dialog .recharge-method { border-radius: 10px; }
dialog.announcement-dialog { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.announcement-dialog :is(.announcement-dialog-heading,.announcement-dialog-footer) { background: #fff; border-color: var(--glass-line); }
.announcement-dialog :is(.announcement-dialog-icon,.announcement-acknowledge) { border-radius: 10px; }
.app-shell .console-announcements { background: var(--glass-surface); }
.app-shell .announcement-banner-icon { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
#key-dialog { border: 1px solid #e5e7eb; border-radius: 16px; }
#key-dialog .key-budget-dialog { border: 0; border-radius: inherit; background: #fff; }
#key-dialog .key-editor-header { border-bottom: 1px solid #ededed; }
#key-dialog .key-editor-header h2 { color: var(--glass-ink); }
#key-dialog .key-editor-icon { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; color: #525252; }
#key-dialog :is(.key-editor-close,.key-expiry-presets button) { border-color: #e5e7eb; border-radius: 8px; background: #fff; color: #525252; }
#key-dialog .key-expiry-presets button[aria-pressed="true"] { background: #f0f0f0; color: #171717; box-shadow: inset 0 0 0 1px #a3a3a3; }
#key-dialog :is(input:not([type="checkbox"]),textarea) { border-color: #dfe3e8; border-radius: 9px; background: #fff; }
#key-dialog .key-settings-section { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: none; }
#key-dialog .key-settings-section[open] > summary { background: #fafafa; border-bottom: 1px solid #ededed; }
#key-dialog .key-settings-section > summary:hover { background: #f5f5f5; }
#key-dialog .key-settings-icon { border-radius: 8px; background: #f0f0f0; color: #525252; }
#key-dialog .key-editor-footer { border-top: 1px solid var(--glass-line); background: #fff; }
#key-dialog .dialog-actions button { border-radius: 9px; }
/* Authentication is part of the same visual system without changing its flow. */
.auth-shell { --auth-blue: #171717; --auth-ink: #171717; --auth-muted: #737373; --auth-line: var(--glass-line); background: var(--glass-background); }
.auth-shell .auth-header { border-bottom: 1px solid #e5e7eb; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.auth-shell .auth-nav { width: calc(100% - 64px); max-width: none; }
.auth-shell .auth-layout { width: 100%; max-width: none; min-height: calc(100dvh - 64px); margin-inline: auto; padding: 32px; gap: 32px; grid-template-columns: minmax(0,1fr) minmax(440px,1fr); }
.auth-shell .auth-aside { min-height: 640px; padding: clamp(32px,4vw,64px); border: 1px solid #e5e7eb; border-radius: 20px; background: var(--glass-surface-accent); box-shadow: var(--glass-shadow); color: var(--glass-ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.auth-shell .auth-aside::before { display: none; }
.auth-shell .auth-aside::after { display: none; }
.auth-shell .auth-aside-copy h1 { color: #171717; font-size: clamp(38px,4vw,58px); line-height: 1.15; }
.auth-shell .auth-aside-copy .eyebrow { color: #737373; }
.auth-shell .auth-aside-copy > p:last-child { color: #737373; font-size: 15px; }
.auth-shell .auth-route-map { margin-top: 56px; }
.auth-shell .auth-route-map :is(span,strong) { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #525252; box-shadow: none; }
.auth-shell .auth-route-map strong { border-color: #171717; background: #171717; color: #fff; }
.auth-shell .auth-route-map i { background: #d4d4d4; }
.auth-shell .auth-aside-status { margin-top: auto; padding-top: 20px; color: #525252; }
.auth-shell .auth-aside-status > i { background: #2e9b76; box-shadow: 0 0 0 4px rgba(46,155,118,.1); }
.auth-shell .auth-aside-status small { color: #737373; }
.auth-shell .auth-main { min-width: 0; min-height: 0; padding: 24px; background: transparent; }
.auth-shell .auth-panel { width: min(500px,100%); padding: 32px; border: 1px solid #e5e7eb; border-radius: 16px; background: var(--glass-surface); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth-shell .auth-panel-header h2 { font-size: 30px; letter-spacing: -.04em; }
.auth-shell .auth-tabs { border: 1px solid #e5e7eb; border-radius: 10px; background: #f5f5f5; }
.auth-shell .auth-tabs button { border-radius: 7px; }
.auth-shell .auth-tabs button.active,
.auth-shell .auth-tabs button.active:hover { background: #fff; color: #171717; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.auth-shell .auth-panel .auth-input-wrap > input { border-color: #dfe3e8; border-radius: 9px; background: #fff; }
.auth-shell .auth-panel .auth-input-wrap > input:user-invalid { border-color: #dc6262; background: #fffafa; }
.auth-shell .auth-panel .primary-button { border-radius: 9px; background: #171717; box-shadow: none; }
.auth-shell .auth-panel .primary-button:hover { background: #262626; }
.auth-shell .oauth-button { border-color: #e5e7eb; border-radius: 9px; background: #fff; box-shadow: none; }
.auth-shell .oauth-button:hover { background: #f5f5f5; }
.auth-shell .auth-availability-note { border: 1px solid #e1e8f0; border-radius: 10px; background: #f5f8fb; }
.auth-shell :is(button,a,input):focus-visible { outline: 2px solid #525252; outline-offset: 3px; }
.toast { border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 30px -14px rgba(15,23,42,.25); }
@media (max-width:1100px) {
  .auth-shell .auth-nav { width: calc(100% - 48px); }
  .auth-shell .auth-layout { grid-template-columns: minmax(0,.85fr) minmax(400px,1fr); gap: 20px; padding: 24px; }
  .auth-shell .auth-main { padding: 0; }
  .auth-shell .auth-aside { padding: 32px; }
  .auth-shell .auth-panel { padding: 30px; }
}
@media (max-width:820px) {
  .app-shell .sidebar { background: #fff; }
  .app-shell .view-heading h1 { font-size: 27px; }
  .app-shell .view-heading p:not(.eyebrow) { font-size: 13px; }
  .app-shell :is(.data-section,.usage-filter-bar,.user-settings-toolbar,.user-settings-module,.user-settings-actions,.user-settings-pagination,.console-announcements) { border-radius: 14px; }
  .app-shell .section-title { padding: 20px 18px; }
  .app-shell .usage-metrics-grid { gap: 12px; }
  .app-shell .usage-metrics-grid article { padding: 16px; border-radius: 14px; }
  .app-shell .usage-filter-bar { padding: 16px; border-radius: 0; }
  .app-shell .billing-balance-band { padding: 24px 20px; }
  .app-shell .user-settings-toolbar { padding: 16px; }
  .app-shell [data-view-panel="playground"] .playground-split-workspace { border-radius: 14px; }
}
@media (max-width:780px) {
  .auth-shell .auth-nav { width: calc(100% - 36px); }
  .auth-shell .auth-layout { display: block; padding: 28px 18px; }
  .auth-shell .auth-aside { display: none; }
  .auth-shell .auth-main { min-height: calc(100dvh - 120px); padding: 0; }
  .auth-shell .auth-panel { margin: auto 0; }
}
@media (max-width:560px) {
  .auth-shell .auth-nav { width: calc(100% - 24px); }
  .app-shell .data-section { margin-bottom: 16px; }
  .app-shell :is(.user-settings-module,.usage-filter-bar) { padding: 18px 16px; }
  .app-shell .usage-chart-grid { gap: 16px; }
  .app-shell .billing-balance-band { border-radius: 14px; }
  .app-shell .billing-balance-actions { flex-wrap: wrap; }
  .app-shell :is(.subscription-card,.subscription-plan-card) { padding: 18px; }
  dialog { border-radius: 14px; }
  #key-dialog { border-radius: 14px; }
  .auth-shell .auth-layout { padding: 24px 12px; }
  .auth-shell .auth-panel { padding: 26px 20px; border-radius: 14px; }
  .auth-shell .auth-panel-header h2 { font-size: 30px; }
  .auth-shell .auth-panel-header p:last-child { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-shell :is(.primary-button,.secondary-button,.icon-button,.row-button,.console-nav button,.console-nav a),
  dialog :is(.primary-button,.secondary-button,.icon-button,.row-button) { transition: none; }
}
@media (forced-colors:active) {
  .app-shell :is(.data-section,.usage-filter-bar,.user-settings-module,.metrics-grid article,.usage-metrics-grid article),
  dialog,
  .auth-shell .auth-panel { outline: 1px solid CanvasText; }
  .app-shell .console-nav button.active,
  .auth-shell .auth-tabs button.active { outline: 2px solid Highlight; }
}
.app-shell .console-nav button.active { background: var(--glass-accent-soft); color: #4d5bc0; }
.app-shell .console-nav button.active::before { background: #5968ce; }
.app-shell .console-nav button.active svg { color: var(--glass-accent); }
.app-shell .new-chat-button { border-color: var(--glass-accent); background: var(--glass-accent); }
.app-shell .new-chat-button:hover { border-color: var(--glass-accent-hover); background: var(--glass-accent-hover); }
.app-shell .primary-button,
dialog .primary-button,
.auth-shell .auth-panel .primary-button,
.auth-shell .auth-route-map strong,
.app-shell .billing-balance-actions .billing-recharge-trigger,
.app-shell [data-view-panel="playground"] .send-button { border-color: var(--glass-accent); background: var(--glass-accent); }
.app-shell .primary-button:hover,
dialog .primary-button:hover,
.auth-shell .auth-panel .primary-button:hover,
.app-shell .billing-balance-actions .billing-recharge-trigger:hover { border-color: var(--glass-accent-hover); background: var(--glass-accent-hover); }
.app-shell .user-button > span { background: var(--glass-accent-soft); color: var(--glass-accent); }
.app-shell .pico-language-option.active,
.auth-shell .pico-language-option.active { background: var(--glass-accent-soft); color: #4d5bc0; }
.app-shell :is(input,select,textarea):focus,
dialog :is(input,select,textarea):focus { border-color: #adb5e5; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.app-shell :is(button,a,summary,input,select,textarea):focus-visible,
dialog :is(button,a,summary,input,select,textarea):focus-visible,
.auth-shell :is(button,a,input):focus-visible { outline-color: #5968ce; }
.app-shell .segmented button.active,
.app-shell .segmented button.active:hover,
.auth-shell .auth-tabs button.active,
.auth-shell .auth-tabs button.active:hover { background: #fff; color: var(--glass-accent); }
.app-shell :is(.text-button,.icon-text-button) { color: var(--glass-accent); }
.app-shell :is(.text-button,.icon-text-button):hover { color: var(--glass-accent-hover); }
.app-shell .user-settings-sidebar button.active { background: var(--glass-accent-soft); color: #4d5bc0; }
.app-shell .management-token-permissions > label:has(input:checked) { border-color: var(--glass-accent-line); background: var(--glass-accent-soft); }
.app-shell [data-view-panel="playground"] .composer-row:focus-within { border-color: #adb5e5; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
#key-dialog .key-expiry-presets button[aria-pressed="true"] { border-color: var(--glass-accent-line); background: var(--glass-accent-soft); color: #4d5bc0; box-shadow: inset 0 0 0 1px var(--glass-accent-line); }