/* PhoenAIx Rebirth design system
 * Warm ivory, phoenix red, lava orange and rebirth gold. The interface stays
 * bright and data-first; fire is reserved for identity and momentum. */
:root {
  --canvas: #eaf1f8;
  --surface: #f8fbff;
  --surface-solid: #fcfdff;
  --surface-soft: #e9f1fa;
  --surface-wash: linear-gradient(145deg, #fcfdff, #edf4fc);
  --ink: #17284c;
  --ink-2: #465c7b;
  --ink-3: #4f6380;
  --line: rgba(36,66,107,.12);
  --line-strong: rgba(36,66,107,.2);
  --coral: #d9472d;
  --coral-deep: #a33a17;
  --amber: #e9a62f;
  --ember: #ed7430;
  --gold: #d7a32f;
  --success: #13755c;
  --info: #245b8c;
  --error: #c9363d;
  --warning: #966212;
  --bg-page: var(--canvas);
  --bg-sidebar: #edf4fc;
  --bg-card: var(--surface-solid);
  --bg-hover: #edf4fc;
  --bg-active: #f9e4d1;
  --bg-table-header: #eaf1fa;
  --accent: #bd461b;
  --accent-dark: var(--coral-deep);
  --accent-hover: #c53b28;
  --accent-pale: #fff0e6;
  --text: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --border: var(--line);
  --border-hover: rgba(217,71,45,.34);
  --border-focus: #346bb3;
  --control-line: #899db7;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --shadow-xs: 0 1px 2px rgba(22,44,79,.045);
  --shadow-sm: 0 4px 16px rgba(26,53,91,.04);
  --shadow-md: 0 24px 64px rgba(26,53,91,.13), 0 3px 12px rgba(22,44,79,.055);
  /* Darker ember/gold stops keep small white button labels readable. */
  --phoenix-flame: linear-gradient(120deg, #bf4a10 0%, #bd461b 46%, #af3e14 100%);
  --phoenix-spectrum: linear-gradient(100deg, #a92f25, #dc4829 34%, #ef7d2f 66%, #e4b33e);
  --workspace-header: 72px;
  --ease: cubic-bezier(.2,.75,.25,1);
  --code-surface: #fffaf5;
  --code-keyword: #802a79;
  --code-string: #176448;
  --code-number: #98411d;
  --code-function: #185c91;
}

html { background: var(--canvas); }
.session-gate { padding:24px; background:radial-gradient(ellipse at 15% 12%,#fce6c6,transparent 65%),linear-gradient(145deg,#f8fbff,#e2edfa); }
.session-gate-card { width:min(100%,360px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.session-brand-mark { border-radius:16px; margin-bottom:16px; }
.session-gate strong { font-size:26px; font-weight:750; letter-spacing:-.025em; }
.session-gate h1 { margin:32px 0 10px; font-size:18px; line-height:1.5; letter-spacing:-.01em; }
.session-gate p { margin:0; color:var(--ink-2); font-size:14px; line-height:1.75; text-wrap:pretty; }
.session-progress { margin-top:28px; width:220px; max-width:100%; height:4px; border-radius:4px; overflow:hidden; background:var(--surface-soft); }
.session-progress span { display:block; width:35%; height:100%; border-radius:inherit; background:var(--phoenix-flame); animation:session-progress 1.8s ease-in-out infinite alternate; }
.session-gate-actions { display:grid; width:100%; gap:12px; margin-top:28px; }
.session-gate-actions .btn { display:flex; justify-content:center; align-items:center; text-decoration:none; }
.session-gate [hidden] { display:none!important; }
.session-gate-card:has(.session-noscript) :is(#sessionGateTitle,#sessionGateHint,#sessionProgress) { display:none; }
.session-gate .session-noscript { margin-top:24px; }
@keyframes session-progress { from { transform:translateX(-100%); } to { transform:translateX(280%); } }
@media(prefers-reduced-motion:reduce) { .session-progress span { animation:none; transform:translateX(90%); } }
::selection { color: var(--ink); background: #f8d9b6; }
body :is(input,textarea) { caret-color: var(--coral-deep); }
body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 4% 8%, rgba(109,157,211,.16), transparent 48%),
    radial-gradient(ellipse at 100% 5%, rgba(238,151,83,.08), transparent 50%),
    linear-gradient(150deg, #f2f7fd, #eaf2fc 52%, #e2edfa);
  isolation: isolate;
}
body::before, body::after { content: none; display: none; }

/* Phoenix color carries identity; warm surfaces support long working sessions. */
.app-header {
  height: var(--workspace-header);
  padding: 0 clamp(16px,2.4vw,36px);
  border: 0;
  border-bottom: 1px solid rgba(36,66,107,.09);
  background: linear-gradient(110deg, #f6faff, #eaf2fc);
  box-shadow: none;
  backdrop-filter: none;
}
.app-header::before {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  opacity: .45;
  background: linear-gradient(90deg, transparent, #a92f25 11%, #dd4b29 27%, #ef7c2e 45%, #e5b33e 63%, transparent 82%);
}
.brand { gap: 11px; }
.brand-mark {
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 14px;
  background: linear-gradient(145deg,#fff,#ffe2b0 56%,#f37654);
  box-shadow: var(--shadow-xs);
}
.brand-mark img { border-radius: 12px; }
.brand-text strong { color: var(--ink); font-size: 21px; font-weight: 760; letter-spacing: -.03em; }
.brand-text > span { color: var(--ink-3) !important; letter-spacing: .12em !important; }
.header-right { gap: 9px; }
#enterpriseReviewNotice { flex:0 0 auto; min-height:44px; gap:7px; }
#enterpriseReviewNotice svg { flex:none; }
#enterpriseReviewNotice[data-review-error="true"] .enterprise-review-label { max-width:200px; white-space:normal; line-height:1.4; }
.enterprise-review-count { display:none; }
.workspace-search-trigger,
.nav-drawer-toggle,
.phx-language-switcher {
  min-height: 44px;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-solid) !important;
  box-shadow: none;
  backdrop-filter: none;
}
.workspace-search-trigger { min-width: clamp(180px,18vw,270px); font-size: 13px; transition: border-color .18s, background .18s; }
.workspace-search-trigger:hover { border-color: var(--line-strong) !important; box-shadow: none; transform: none; }
.workspace-search-trigger kbd { color: #536c8e; background: #eaf1fb; border-color: var(--line); }
.phx-language-switcher select { color: var(--ink-2) !important; background: transparent !important; }
#userBadge {
  min-height: 46px;
  margin-right: 0 !important;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  box-shadow: none;
}
#userAvatar { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: var(--phoenix-flame) !important; box-shadow: none; }
#userName { color: var(--ink) !important; }
#userRole { color: var(--coral-deep) !important; background: #ffeadc !important; }
#logoutBtn { color: #657b98 !important; }

/* The familiar navigation rail remains stable for daily work. */
.layout { height: calc(var(--workspace-viewport-height,100dvh) - var(--workspace-header)); }
.phoenix-workspace main.content { padding-left: 122px; scroll-padding: 28px; }
body.phoenix-workspace #mainSidebar,
body.phoenix-workspace #mainSidebar:is(:hover,:focus-within,.is-open) {
  width: 90px;
  left: 16px;
  top: 88px;
  bottom: 16px;
  padding: 15px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-wash);
  box-shadow: none;
  backdrop-filter: none;
  transform: none !important;
}
body.phoenix-workspace #mainSidebar::before {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--phoenix-spectrum);
}
.workspace-category {
  position: relative;
  width: 72px;
  min-height: 68px;
  padding: 10px 3px 8px;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  transition: color .18s, background .18s;
}
.workspace-category svg { width: 22px; height: 22px; stroke-width: 1.65; }
.workspace-category:hover,
.workspace-category[aria-expanded="true"] { color: var(--coral-deep); background: var(--accent-pale); transform: none; }
.workspace-category.is-current {
  color: #fff;
  border-color: rgba(185,50,37,.17);
  background: var(--phoenix-flame);
  box-shadow: none;
}
.workspace-category.is-current::after { content: none; }
.workspace-flyout {
  top: 88px;
  left: 120px;
  width: 296px;
  max-height: calc(100dvh - 104px);
  padding: 20px 11px 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
  animation: flyout-in .18s var(--ease) both;
}
.workspace-flyout::before { width:42px; height:3px; margin:0 14px 15px; border-radius:99px; background:var(--phoenix-spectrum); }
.guide-code.guide-code-editor { padding:0; overflow:hidden; white-space:normal; word-break:normal; background:var(--code-surface); border-radius:var(--radius-md); }
.guide-code-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 16px; border-bottom:1px solid var(--line); background:var(--surface-soft); color:var(--ink-2); font:500 12px/1.5 var(--font-sans); }
.guide-code-editor .guide-code-copy { position:static; min-height:44px; min-width:52px; font:500 12px/1.5 var(--font-sans); }
.guide-code-editor pre { margin:0; padding:20px; max-width:100%; overflow-x:auto; white-space:pre; tab-size:2; }
.guide-code-editor pre:focus-visible { outline:2px solid var(--coral-deep); outline-offset:-3px; }
.guide-code-editor pre code { display:block; padding:0; background:transparent; color:var(--ink); font:13px/1.75 'SF Mono','Fira Code',Consolas,monospace; }
.guide-code-editor :is(.hljs-keyword,.hljs-literal,.hljs-selector-tag) { color:var(--code-keyword); }
.guide-code-editor :is(.hljs-string,.hljs-regexp) { color:var(--code-string); }
.guide-code-editor .hljs-number { color:var(--code-number); }
.guide-code-editor :is(.hljs-title,.hljs-built_in,.hljs-attr,.hljs-property) { color:var(--code-function); }
.guide-code-editor :is(.hljs-comment,.hljs-meta) { color:var(--ink-3); }
body.phoenix-workspace #mainSidebar .nav-group-title { color:var(--ink-3); font-size:12px; font-weight:700; letter-spacing:.04em; }
body.phoenix-workspace #mainSidebar .nav-item {
  min-height: 49px;
  margin: 3px 0;
  padding: 11px 13px;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: color .18s, background .18s, transform .18s;
}
body.phoenix-workspace #mainSidebar .nav-item:hover { color:var(--coral-deep); background:#edf4fc; transform:none; }
body.phoenix-workspace #mainSidebar .nav-item.active { color:var(--coral-deep); background:linear-gradient(100deg,#ffe9dc,#fff8e9); box-shadow:inset 3px 0 var(--coral); }
body.phoenix-workspace #mainSidebar .nav-ico { color:var(--coral); }

/* The shorter customer menu is direct, using the same role-gated link nodes. */
body.phoenix-workspace.workspace-flat #mainSidebar,
body.phoenix-workspace.workspace-flat #mainSidebar:is(:hover,:focus-within,.is-open) {
  width:216px; padding:24px 12px 16px; overflow-y:auto; scrollbar-width:thin;
}
body.phoenix-workspace.workspace-flat main.content { padding-left:248px; }
body.workspace-flat #mainSidebar .workspace-category,
body.workspace-flat #mainSidebar .nav-group-title { display:none; }
body.workspace-flat #mainSidebar .workspace-flyout {
  position:static; width:auto; max-height:none; padding:0; margin:0; border:0;
  border-radius:0; background:transparent; box-shadow:none; overflow:visible; animation:none;
}
body.workspace-flat #mainSidebar .workspace-flyout::before { display:none; }
body.workspace-flat #mainSidebar .nav-group { margin-bottom:12px; }
body.workspace-flat #mainSidebar .nav-group:last-of-type { padding-top:12px; border-top:1px solid var(--line); }
body.workspace-flat #mainSidebar .nav-item { gap:12px; padding:11px 12px; min-height:48px; font-size:14px; }
body.workspace-flat #mainSidebar .nav-item > span:last-child { min-width:0; white-space:normal; line-height:1.5; }
body.workspace-flat #mainSidebar .nav-item.active { color:var(--coral-deep); font-weight:650; background:linear-gradient(110deg,#fbd9bb,#fff0d7); box-shadow:none; border-color:rgba(184,74,34,.2); }
@media(min-width:761px) { body.workspace-flat #navDrawerToggle { display:none; } }
@media(max-width:760px) {
  body.phoenix-workspace.workspace-flat main.content { padding-left:0; }
  body.phoenix-workspace.workspace-flat #mainSidebar,
  body.phoenix-workspace.workspace-flat #mainSidebar:is(:hover,:focus-within,.is-open) {
    width:min(268px,calc(100vw - 32px)); left:8px; top:77px; bottom:9px; padding:24px 12px 16px;
  }
}

/* Editorial page heading: no banner, no oversized decoration. */
body .page { max-width:1600px; padding:32px clamp(22px,2.7vw,40px) 56px; }
body .page-head {
  position:relative;
  isolation:isolate;
  min-height:0;
  margin-bottom:24px;
  padding:8px 0 24px;
  gap:20px;
  flex-wrap:wrap;
  overflow:visible;
  color:var(--ink);
  border:0;
  border-bottom:1px solid rgba(36,66,107,.1);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body .page-head::before {
  content:'';
  display:block;
  position:absolute;
  inset:auto 0 -1px;
  height:1px;
  width:64px;
  background:var(--phoenix-spectrum);
}
body .page-head::after {
  content:none;
}
body .page-title { color:var(--ink); font-size:1.75rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; text-shadow:none; }
body .page-desc { max-width:75ch; margin:8px 0 0; color:var(--ink-2); font-size:14px; line-height:1.7; }
body .page-head .prototype-note { color:var(--accent-dark); border-color:var(--line); background:var(--accent-pale); }
body .page-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
body .page-head .btn-ghost, body .page-head .btn-secondary, body .page-head .action-btn { color:var(--ink-2); border-color:var(--line); background:rgba(255,255,255,.72); }

/* Surfaces share one calm geometry. */
body .card,
body .ops-metric,
body .stat-card,
body .bill-stat-card,
body .model-card,
body .key-card,
body .uc-info-item {
  position:relative;
  color:var(--ink);
  border:1px solid rgba(36,66,107,.11);
  border-radius:var(--radius-md);
  background:var(--surface-wash);
  box-shadow:none;
}
body .card { min-width:0; overflow:visible; }
body .data-card, body #page-revenue .card, body .topup-card { overflow:hidden; }
body .card::before, body .card::after, body .stat-card::after { content:none; display:none; }
body .card:hover, body .ops-metric:hover, body .stat-card:hover, body .model-card:hover { transform:none!important; border-color:var(--line)!important; box-shadow:none!important; }
body .data-card-toolbar { padding:20px 24px; gap:16px; border-bottom:1px solid var(--line); background:var(--surface-solid); }
body .card-h { color:var(--ink); font-size:17px; font-weight:650; letter-spacing:-.01em; }
body .card-h::before { content:none; }
body .card-b { color:var(--ink-2); font-size:14px; line-height:1.7; }
/* One quiet summary strip rather than a wall of equally prominent cards. */
body .page > .ops-grid { gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--line); }
body .page > .ops-grid > .ops-metric { border:0; border-radius:0; box-shadow:none; background:var(--surface-wash); }
body #page-budgets > .ops-grid { gap:1px; padding:0; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--line); }
body .ops-grid { gap:15px; }
body .ops-metric { min-height:112px; padding:18px 20px; min-width:0; }
body .ops-metric::before, body .ops-metric::after { content:none; }
body .ops-metric .label { color:var(--ink-2); font-size:13px; font-weight:600; letter-spacing:0; }
body .ops-metric .value { color:var(--ink); font-size:28px; font-weight:700; }
body :is(.ops-metric .value,.stat-value,.bill-stat-value,.topup-preview strong) { min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; line-height:1.4; letter-spacing:-.025em; }
body :is(#billBalance,#billHeldBalance,#creditTotalBalance,#ucCredits) { font-size:clamp(18px,1.8vw,26px); }
body #creditTotalBalance { font-size:clamp(18px,1.25vw,22px); }
body .ops-metric .hint, body .bill-stat-sub, body .stat-sub { color:var(--ink-3); font-size:13px; line-height:1.6; }
body .bill-stat-label, body .stat-label { color:var(--ink-2); font-size:13px; }
body :is(.ops-metric .label,.stat-label,.bill-stat-label) { overflow-wrap:anywhere; }
body .ops-deck { border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:none; }
body .ops-deck-item { padding:22px; background:var(--surface-wash); }
body .ops-deck-item::after { content:none; }
body .ops-deck-kicker { color:var(--coral-deep); font-size:12px; letter-spacing:.04em; }
body .ops-deck-item small { color:var(--ink-3); }
body .prototype-note { color:var(--warning); }
body .guide-overview-card > span { font-size:12px; color:var(--ink-2); }
body .guide-error-table :is(th,td) { font-size:13px; padding:12px 16px; line-height:1.6; }

/* Filters and controls */
body input:not([type=checkbox]):not([type=radio]):not([type=range]),
body select,
body textarea,
body .form-control {
  min-height:47px;
  color:var(--ink);
  border:1px solid var(--control-line)!important;
  border-radius:var(--radius-sm)!important;
  background-color:var(--surface-solid)!important;
  box-shadow:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
body input:hover:not(:disabled), body select:hover:not(:disabled), body textarea:hover:not(:disabled) { border-color:var(--border-focus)!important; }
body input:focus, body select:focus, body textarea:focus, body .form-control:focus { border-color:var(--border-focus)!important; background:#fff!important; box-shadow:0 0 0 2px rgba(36,66,107,.08)!important; }
body .chat-input-box textarea, body .chat-input-box textarea:focus { min-height:24px; border:0!important; background:transparent!important; box-shadow:none!important; }
body input::placeholder, body textarea::placeholder { color:var(--ink-3); opacity:1; }
body .field-label, body .form-group>label, .filter-field>label { color:var(--ink-2); font-size:13px; font-weight:600; }
body .field-hint, body .form-hint { color:var(--ink-3); font-size:13px; line-height:1.7; }
body input[readonly] { color:var(--ink-2); background-color:var(--surface-soft)!important; opacity:1; cursor:default; }
body .filter-bar,
body #page-model-mgmt .model-mgmt-toolbar,
body #page-usage .usage-filter-bar {
  padding:13px;
  border:1px solid rgba(36,66,107,.1);
  border-radius:var(--radius-md);
  background:var(--surface-solid)!important;
  box-shadow:none;
}
body .btn {
  min-height:45px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:background .17s,border-color .17s,color .17s;
}
body .btn:hover:not(:disabled), body .btn:active:not(:disabled) { transform:none; }
body .btn:active:not(:disabled) { filter:brightness(.95); }
body .btn:disabled { box-shadow:none; transform:none; filter:none; cursor:not-allowed; }
body .btn-primary, body .btn-primary:disabled, body .modal-footer .btn-primary:disabled { color:#fff; border-color:transparent; background:var(--phoenix-flame); box-shadow:none; }
body .btn-primary::before { content:none; }
body .btn-primary:hover:not(:disabled) { background:var(--coral-deep); box-shadow:none; }
body .btn-ghost, body .btn-secondary, body .action-btn,
body .btn-ghost:disabled, body .btn-secondary:disabled, body .action-btn:disabled,
body .modal-footer .btn-secondary:disabled { color:var(--ink-2); border-color:var(--line); background:var(--surface-solid); }
body .btn-ghost:hover:not(:disabled), body .btn-secondary:hover:not(:disabled), body .action-btn:hover:not(:disabled) { color:var(--coral-deep); border-color:rgba(217,71,45,.26); background:#edf4fc; }
body .btn-danger:disabled { color:var(--error); border-color:var(--error); background:transparent; }
body .modal-footer .btn-danger:disabled { color:#fff; border-color:transparent; background:#c0392b; }
body .action-btn { min-height:44px; }
body .action-btn.danger { color:var(--error); }
body .action-btn.danger:hover:not(:disabled) { background:#fff1f1; }
body :is(.empty-state,.gw-empty-state) { min-height:144px; padding:28px 20px; color:var(--ink-2); background:var(--surface-solid); line-height:1.7; }
body :is(.empty-state,.gw-empty-state)::before { content:none; }
body .gw-empty-state small { color:var(--ink-3); opacity:1; }
body #notificationReadiness { padding:16px 24px; }
body .prototype-note, body .status-badge, body .badge, body .gw-provider-tag, body .model-category-tag { border-radius:999px; font-weight:670; }

/* Tables */
body .table-wrap { border-radius:0 0 var(--radius-md) var(--radius-md); scrollbar-color:#9aacc6 transparent; }
body .data-table { background:var(--surface-solid); }
body .data-table th { position:sticky; top:0; z-index:2; padding:14px 16px; color:var(--ink-2); background:var(--surface-soft); border-bottom:1px solid var(--line); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }
body .data-table td { padding:14px 16px; color:#344d70; border-bottom-color:rgba(36,66,107,.08); font-size:14px; }
body .data-table tbody tr { transition:background .16s,box-shadow .16s; }
body .data-table tbody tr:hover { background:#fff0df; box-shadow:none; }

/* Catalogue */
body .model-catalog-note { border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-solid); box-shadow:none; }
body .model-grid { gap:19px; }
body .model-card { min-height:250px; padding:24px; min-width:0; overflow:hidden; background:var(--surface-solid); transition:border-color .18s; }
body .model-card::before { content:none; }
body .model-card::after { content:none; }
body .model-card-title { color:var(--ink); font-size:18px; font-weight:750; }
body .model-price-summary { border-top-color:var(--line); }

/* Usage */
body #page-usage .usage-source-strip { padding:14px 17px; border-radius:15px; background:rgba(255,255,255,.78); box-shadow:var(--shadow-xs); }
body #page-usage .usage-kpi-grid { gap:15px; }
body #page-usage .usage-latency-grid .ops-metric { background:rgba(255,255,255,.78); }
body .usage-trend-chart { border-radius:var(--radius-md); background:var(--surface-solid); }
body .usage-chart-bar { fill:var(--coral); }

/* Playground: conversation-first reading column and separate creation canvas. */
body #page-playground { padding:22px 26px 28px; background:transparent; }
body .pg-grid { gap:20px; height:calc(100dvh - var(--workspace-header) - 54px); min-height:540px; padding:0; border:0; background:transparent; box-shadow:none; }
body .pg-grid>aside { width:270px; height:100%; padding:0; background:transparent; min-width:0; }
body .cfg-card { color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-solid); box-shadow:none; }
body .cfg-card:hover { transform:none; box-shadow:none; }
body .cfg-card-title { color:var(--ink); font-size:14px; font-weight:650; }
body .cfg-card-title::before { content:none; }
body .pg-grid>aside>.cfg-card:first-child { flex:0 0 auto; max-height:52%; }
body .pg-grid>aside>.conv-card { flex:1; min-height:160px; display:flex; flex-direction:column; }
body .pg-grid .conv-list { min-height:0; overflow:auto; }
body .pg-configuration>summary { cursor:pointer; list-style-position:inside; }
body .pg-configuration>summary::marker { color:var(--ink-3); }
body .pg-configuration:not([open])>summary { margin-bottom:0; }
body .pg-model-retry { width:100%; margin-top:12px; font-size:13px; }
body .pg-configuration #playgroundIdentity { font-size:13px; padding:0; background:transparent; }
body .cfg-card .field-label, body .cfg-card .field-hint, body .cfg-card p { color:var(--ink-2); }
body .cfg-card input, body .cfg-card select { color:var(--ink)!important; border-color:var(--control-line)!important; background-color:var(--surface-solid)!important; }
body .chat-area { height:100%; border:0; border-radius:var(--radius-md); background:var(--surface-solid); box-shadow:none; overflow:hidden; }
body .pg-tabs { padding:6px 16px; gap:8px; border-bottom:1px solid var(--line); background:var(--surface-solid); }
body .pg-tab { min-height:44px; padding:10px 14px; border-radius:10px; font-size:14px; }
body .pg-tab.active { color:var(--accent-dark); background:var(--accent-pale); }
body .pg-tab::after { content:none; }
body .chat-meta-bar { min-height:42px; padding:8px 24px; border:0; background:var(--surface-solid); }
body .chat-meta-bar::before { content:none; }
body .chat-messages { padding:24px max(24px,calc((100% - 760px)/2)); gap:24px; background:var(--surface-solid); }
body #page-playground .message { width:100%; max-width:100%; margin:0; animation:none; }
body #page-playground .message-user { align-self:flex-end; width:auto; max-width:85%; }
body #page-playground .message-user .msg-avatar { display:none; }
body #page-playground .message-assistant .msg-avatar { width:28px; height:28px; margin-top:2px; box-shadow:none; }
body #page-playground .message-assistant .msg-body { flex:1; }
body #page-playground .message .bubble { min-width:0; font-size:16px; line-height:1.8; }
body #page-playground .message-assistant .bubble { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
body #page-playground .message-user .bubble { padding:12px 18px; color:var(--ink); border-radius:20px; background:#e8eff8; }
body #page-playground .message-user .bubble strong { color:inherit; }
body #page-playground .message-meta { margin-top:8px; padding:0; font-size:12px; }
body #page-playground .empty-state { flex:0 0 auto; align-self:center; width:100%; max-width:640px; min-height:240px; margin-block:auto; padding:24px 8px; overflow:visible; }
body .conv-item-open { position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; cursor:pointer; }
body .conv-item { position:relative; padding-right:44px; }
body .conv-item-title,body .conv-icon { pointer-events:none; }
body .conv-item-del { position:relative; z-index:1; min-width:44px; min-height:44px; border:0; background:transparent; }
body .conv-item:focus-within .conv-item-del { opacity:1; }
body .conv-item:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
body #page-playground .empty-logo img { width:56px!important; height:56px!important; border-radius:14px; }
body #page-playground .empty-title { font-size:clamp(24px,2vw,32px); line-height:1.35; letter-spacing:-.02em; }
body #page-playground .empty-state p { font-size:15px; }
body #page-playground .empty-sub { max-width:48ch; margin-top:12px; font-size:13px; }
body #page-playground .empty-quick { width:100%; gap:10px; margin-top:24px; }
body #page-playground .empty-quick button { min-height:72px; padding:12px; border-radius:12px; box-shadow:none; }
body #page-playground .empty-quick button:hover { transform:none; background:var(--surface-soft); box-shadow:none; }
body .chat-input-wrap { padding:16px max(24px,calc((100% - 760px)/2)) 20px; border:0; background:var(--surface-solid); }
body .chat-input-box { padding:14px 16px 10px; border-radius:20px; border-color:var(--control-line); box-shadow:none; }
body #page-playground .chat-input-box textarea { padding:4px 2px; font-size:16px; line-height:1.7; }
body .chat-input-box:focus-within { border-color:var(--border-focus); box-shadow:0 2px 12px rgba(36,66,107,.05); }
body #page-playground .chat-input-hint { flex-wrap:wrap; gap:6px 16px; }
body #page-playground .pg-capability-note { padding:12px 24px; margin:0; color:var(--ink-2); background:var(--surface-soft); font-size:14px; line-height:1.7; }
body .chat-meta-bar>.chip:empty { display:none; }
body .pg-studio { overflow-y:auto; }
body .pg-studio .gen-output-area { display:flex; align-items:center; flex:1 0 auto; overflow:visible; min-height:240px; padding:24px; background:var(--surface-soft); }
body .pg-studio .pg-capability-note { flex-shrink:0; }
body .studio-canvas { display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(100%,620px); min-height:260px; margin:auto; padding:32px 24px; text-align:center; border-radius:16px; background:var(--surface-solid); }
body .studio-canvas-video { aspect-ratio:16/9; }
body .studio-mark { flex-shrink:0; margin-bottom:20px; color:var(--accent-dark); }
body .studio-canvas h2 { margin:0 0 12px; font-size:26px; line-height:1.35; letter-spacing:-.02em; text-wrap:balance; }
body .studio-canvas p { max-width:44ch; color:var(--ink-2); font-size:15px; line-height:1.7; }
body .studio-status { margin-top:20px; padding:5px 12px; border-radius:8px; background:var(--accent-pale); color:var(--accent-dark); font-size:13px; }
body .pg-studio .gen-input-wrap { padding:16px 24px 20px; border-top:0; }
body .studio-prompt-label { color:var(--ink-2); font-size:14px; font-weight:600; }
body .studio-generate-btn { min-height:44px; padding:10px 18px; border:0; border-radius:10px; background:var(--surface-soft); color:var(--ink-2); font-size:14px; cursor:not-allowed; }
body .pg-studio .gen-history-section { margin:0; padding:12px 24px; border-top:1px solid var(--line); background:var(--surface-solid); }
body .gen-hist-open { position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; cursor:pointer; }
body .gen-hist-card:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
body .gen-hist-card:focus-within .gen-hist-del { opacity:1; }
body .gen-hist-info { pointer-events:none; }
body .new-chat-btn { min-height:44px; color:#fff; background:var(--phoenix-flame); box-shadow:none; }
body .new-chat-btn:hover { background:var(--coral-deep); box-shadow:var(--shadow-sm); }

/* Supporting components */
body .route-node { border-color:var(--line); border-radius:15px; background:linear-gradient(145deg,#fff,#eff5fc); }
body .route-node strong { color:var(--ink); }
body .route-arrow { color:var(--coral); font-weight:800; }
body .uc-info-grid { gap:0 28px; }
body .uc-info-item { padding:16px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
body .key-card { border-radius:var(--radius-md); background:var(--surface-solid); }
body .page-outline { width:fit-content; max-width:100%; min-height:44px; margin:-6px 0 20px; padding:0; gap:12px; border:0; border-radius:0; background:transparent; box-shadow:none; }
body .page-outline select { width:auto; max-width:100%; min-height:44px; padding:8px 32px 8px 12px; border:1px solid var(--line)!important; background:var(--surface-solid)!important; }
/* Low-frequency setup remains discoverable without displacing the live list. */
body details.workspace-disclosure { margin-bottom:20px; padding:0!important; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-solid); }
body .workspace-disclosure > summary { display:flex; align-items:center; gap:12px; min-height:60px; padding:14px 20px; color:var(--ink); font-size:14px; font-weight:650; list-style:none; cursor:pointer; }
body .workspace-disclosure > summary::-webkit-details-marker { display:none; }
body .workspace-disclosure > summary::after { content:''; width:8px; height:8px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex:none; transition:transform .18s var(--ease); }
body .workspace-disclosure[open] > summary::after { transform:rotate(225deg); }
body .workspace-disclosure > summary:hover { background:var(--bg-hover); }
body .workspace-disclosure > summary:focus-visible { outline:2px solid var(--border-focus); outline-offset:-3px; }
body .workspace-disclosure > summary .card-h { margin:0; font-size:14px; }
body .disclosure-content { padding:20px; border-top:1px solid var(--line); }
body .disclosure-content > :last-child { margin-bottom:0; }
body #pricingLaunchPanel .disclosure-content { padding:0; }
body #pricingLaunchPanel .ops-deck { grid-template-columns:repeat(4,minmax(0,1fr)); }
body #pricingLaunchPanel .ops-deck-item { padding:16px; }
body #pricingLaunchActions .gw-empty-state { min-height:0; padding:14px 0; align-items:flex-start; text-align:left; }
body .page > .card:has(> .filter-bar) { overflow:hidden; }
body .page > .card > .filter-bar { margin:0; border:0; border-radius:0; border-bottom:1px solid var(--line); }
body .data-table td { max-width:420px; overflow-wrap:anywhere; }
body :is(#page-model-mgmt,#page-providers) .data-table td { max-width:none; }
body .data-table td:first-child { min-width:160px; }
body .data-table :is(th,td):first-child:has(input[type=checkbox]) { min-width:44px; width:44px; max-width:44px; }
body #page-pricing .data-table :is(th,td):nth-child(2) { min-width:180px; }
body #page-pricing .data-table :is(th,td):nth-child(n+3):nth-child(-n+7) { min-width:150px; }
body .data-table :is(th,td) { vertical-align:top; }
body .data-table tbody tr:hover { background:var(--bg-hover); }
body #togglePwBtn { min-width:44px; min-height:44px; }
body .data-table td:has(.action-btn) { min-width:140px; }
body .data-table :is(.action-btn,button) { min-width:44px; min-height:44px; }
@media(max-width:900px) { body #pricingLaunchPanel .ops-deck { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  body .page > .ops-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; }
  body .page > .ops-grid > .ops-metric { padding:16px; }
  body #page-credits .ops-metric:has(#creditTotalBalance) { grid-column:1/-1; }
  body .ops-metric .hint { font-size:12px; }
  body .workspace-disclosure > summary { padding:12px 16px; flex-wrap:wrap; }
  body .disclosure-content { padding:16px; }
  body .page-outline { width:100%; }
  body .page-outline label { flex:none; }
  body .page-outline select { flex:1; min-width:0; }
  body #page-settings .form-group input { font-size:16px; }
  body .data-table :is(.action-btn,button) { min-width:44px; }
}
body #userTypeTabs { flex-wrap:wrap; }
body .ut-tab, body .filter-chip { min-height:44px; padding:8px 16px; font:600 13px/1.5 var(--font-sans); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-solid); color:var(--ink-2); cursor:pointer; }
body .ut-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
body .filter-chip.active { background:var(--accent-pale); border-color:var(--line-strong); color:var(--accent-dark); }
body .ut-tab span { font-size:12px; font-variant-numeric:tabular-nums; }
body #page-team .data-table td button { min-height:44px; padding:8px 4px; }
body .upload-toggle-btn, body .pg-tool-btn, body .pg-send-btn { min-width:44px; min-height:44px; }
body .guide-tab { min-height:44px; font-size:13px; }
body .guide-label, body .chat-input-hint { font-size:12px; color:var(--ink-3); }

/* Dialogs and command palette */
body .modal-overlay { background:rgba(27,20,39,.36); backdrop-filter:blur(12px) saturate(.85); }
body .modal, body .modal-content { border:1px solid var(--line)!important; border-radius:18px!important; box-shadow:var(--shadow-md)!important; animation:modal-in .18s var(--ease) both; }
body .modal-header { color:var(--ink); border-bottom-color:var(--line); background:var(--surface-solid); }
body .modal-header h3, body .modal-header { color:var(--ink); }
body .modal-footer { background:#eaf1fb; }
.workspace-search-dialog { color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-solid); box-shadow:var(--shadow-md); backdrop-filter:none; }
.workspace-search-dialog input { color:var(--ink)!important; background:rgba(247,245,251,.88)!important; }
.workspace-search-result { color:var(--ink); background:transparent; }
.workspace-search-result small { color:var(--ink-3); }
.workspace-search-result:hover,.workspace-search-result:focus-visible { color:var(--coral-deep); background:#eaf3ff; }
.workspace-search-close { color:var(--ink-2); border-color:var(--line); background:#eaf1fb; }

/* Purposeful, restrained motion */
.page.active>* { animation:none; }
@keyframes flyout-in { from{opacity:0} to{opacity:1} }
@keyframes modal-in { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
body :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--ink-2); outline-offset:2px; }
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.form-control):focus-visible { outline:none; }
body .phx-language-switcher select { min-height:0; height:100%; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; outline:none!important; }
body .phx-language-switcher:focus-within { border-color:var(--border-focus)!important; box-shadow:0 0 0 2px rgba(36,66,107,.08); }
body :is(button,a,[role=button],[tabindex]):not(:disabled) { cursor:pointer; touch-action:manipulation; }

/* Billing checkout stays quiet and trustworthy while retaining the phoenix palette. */
.topup-card{overflow:hidden}.topup-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line)}.topup-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:22px;align-items:stretch}.topup-form{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(100px,.55fr) minmax(130px,.7fr);gap:14px;align-items:end}.topup-field label{display:block;margin-bottom:7px;color:var(--text-secondary);font-size:12px;font-weight:750}.topup-field :is(input,select){width:100%;min-height:46px}.topup-preview{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:13px 17px;border:1px solid #f0d3bd;border-radius:15px;background:linear-gradient(120deg,#fff9f3,#eaf1f8);color:var(--text-secondary)}.topup-preview strong{color:var(--coral-deep);font-size:22px;font-variant-numeric:tabular-nums}.topup-submit{min-height:46px}.topup-submit:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}.topup-status{grid-column:1/-1;min-height:20px;margin:0;color:var(--text-secondary);font-size:12px}.topup-status.is-error{color:var(--error)}.topup-status.is-success{color:var(--success)}.topup-safety{display:flex;gap:13px;padding:18px;border:1px solid #f0ddc9;border-radius:17px;background:linear-gradient(145deg,rgba(255,250,241,.92),rgba(255,245,235,.78))}.topup-safety-mark{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#e8f7ef;color:#27885e;font-weight:900}.topup-safety p{margin:6px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.65}.topup-orders-wrap{padding:0!important;border-top:1px solid var(--border)}.topup-orders-title{padding:17px 20px 8px;font-weight:750}.topup-orders-wrap .table-wrap{border:0}.topup-orders-wrap .data-table{margin:0}.topup-orders-wrap .data-table td{font-variant-numeric:tabular-nums}
@media(max-width:980px){.topup-layout{grid-template-columns:1fr}.topup-form{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-preview{grid-column:1/2}.topup-submit{grid-column:2/3}}@media(max-width:620px){.topup-card-head{align-items:flex-start}.topup-form{grid-template-columns:1fr}.topup-preview,.topup-submit{grid-column:1}.topup-preview{align-items:flex-start;flex-direction:column;gap:5px}}

@media(max-width:1180px){
  .phoenix-workspace main.content{padding-left:112px}body.phoenix-workspace #mainSidebar{left:11px}.workspace-flyout{left:115px}
  body .page{padding-inline:24px}body .pg-grid>aside{width:240px}
  body #page-status .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #enterpriseReviewNotice{position:relative;width:44px;padding:8px;overflow:visible}
  #enterpriseReviewNotice .enterprise-review-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #enterpriseReviewNotice .enterprise-review-count{display:block;position:absolute;top:2px;right:2px;min-width:16px;padding:0 3px;border-radius:8px;color:var(--coral-deep);background:#ffeadc;font-size:10px;font-weight:750;line-height:16px;font-variant-numeric:tabular-nums}
}
@media(max-width:1100px){.workspace-search-trigger{min-width:44px}}
/* Keep every header action reachable on tablet and short landscape screens;
   the non-interactive tagline yields space before any controls are compressed. */
@media(max-width:960px){
  .app-header{gap:12px}
  .header-right{gap:8px}
  .app-header .brand-text>span{display:none}
}
@media(max-width:760px){
  :root{--workspace-header:66px}.app-header{padding:0 11px;gap:8px}.brand-mark{width:39px;height:39px}
  .header-right{gap:6px}.nav-drawer-toggle{white-space:nowrap;min-width:44px;flex-shrink:0}
  .phoenix-workspace main.content{padding-left:0}
  body.phoenix-workspace #mainSidebar,body.phoenix-workspace #mainSidebar.is-open{top:77px;left:8px;bottom:9px;width:82px;padding-inline:5px}
  .workspace-flyout{top:77px;left:98px;width:calc(100vw - 108px);max-height:calc(100dvh - 87px)}
  .nav-drawer-backdrop.is-open{inset:var(--workspace-header) 0 0;background:rgba(34,25,48,.25);backdrop-filter:blur(7px)}
  body .page{padding:20px 16px 40px}body .page-head{padding:4px 0 20px;gap:16px}
  body .page-title{font-size:1.5rem}body .page-desc{font-size:14px}
  body .page-actions{width:100%}body .page-actions .btn{flex:1 1 auto}body .btn{white-space:normal}
  body #page-playground{padding:13px}body .pg-grid>aside{width:100%}body .cfg-card,body .chat-area{border-radius:var(--radius-md)}
  body .pg-grid { height:auto; min-height:0; gap:12px; }
  body .pg-grid>aside { height:auto; }
  body .pg-grid>aside>.cfg-card:first-child { max-height:none; }
  body .pg-grid>aside>.conv-card { flex:0 0 auto; min-height:0; }
  body .pg-grid .conv-list { max-height:144px; }
  body .chat-area { height:72dvh; min-height:620px; }
  body .pg-tabs { padding:6px; gap:4px; }
  body .pg-tab { flex:1; min-width:0; padding:10px 6px; font-size:13px; }
  body .pg-tab svg { display:none; }
  body .chat-messages { padding:20px 16px; }
  body .chat-input-wrap { padding:12px 12px 16px; }
  body #page-playground .chat-meta-bar { padding:8px 16px; }
  body #page-playground .message-assistant { gap:8px; }
  body #page-playground .message-user { max-width:92%; }
  body #page-playground .empty-quick { grid-template-columns:1fr; }
  body #page-playground .empty-quick .eq-d { display:none; }
  body #page-playground .empty-quick button { min-height:48px; align-items:center; }
  body #page-playground .pg-capability-note { padding:12px 16px; }
  body .pg-studio .gen-output-area,body .pg-studio .gen-input-wrap,body .pg-studio .gen-history-section { padding:16px; }
  body .studio-canvas { min-height:220px; padding:24px 16px; }
  body .studio-canvas h2 { font-size:24px; }
  body .model-card{min-height:0}
}
@media(max-height:640px) and (min-width:761px){
  body.phoenix-workspace #mainSidebar,body.phoenix-workspace #mainSidebar:is(:hover,:focus-within,.is-open){top:80px;bottom:8px;padding-top:10px}
  /* Legacy sidebar positioning establishes the flyout containing block. The
     smaller top value keeps every category panel inside short landscape viewports. */
  .workspace-flyout{top:48px;max-height:calc(100dvh - 64px)}
  .workspace-category{min-height:48px;padding-block:6px}
}
@media(max-width:640px){
  body :is(.bill-stat-grid,.bill-stat-grid.billing-real){grid-template-columns:minmax(0,1fr)}
  body :is(#page-account,#page-team) .stat-grid{grid-template-columns:minmax(0,1fr)!important}
  body #page-status .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body :is(.stat-card,.bill-stat-card){min-width:0;padding:20px}
  body :is(.bill-stat-value,.stat-value){font-size:28px}
  body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.form-control){font-size:16px}
  body .key-card-actions button{min-height:44px}
}
.billing-statement-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-block:18px}
.billing-statement-filters>div{flex:1 1 180px;min-width:0}
.billing-statement-filters label{display:block;font-size:14px;margin-block-end:8px;color:var(--text-secondary)}
.billing-statement-filters input{width:100%;min-height:44px}
.billing-statement-filters button{min-height:44px;white-space:normal}
.billing-statement-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-block-start:16px}
#billStatementCard .data-table{min-width:1100px}
#billStatementCard .data-table td{font-variant-numeric:tabular-nums;vertical-align:top}
#billStatementCard .data-table td:nth-child(3){min-width:260px;max-width:360px}
#billStatementCard .data-table td:nth-child(3) :is(strong,.table-sub){display:block;max-width:32ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.billing-empty{text-align:center;color:var(--text-tertiary);padding:2rem!important}
@media(max-width:600px){.billing-statement-filters>div{flex-basis:100%}.billing-statement-filters button{flex:1}}
@media(max-width:420px){#userBadge{padding:0;min-height:44px}#navDrawerLabel{display:none}body .ops-metric{min-height:112px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}