/* Dashboard palette follows PromptCore's charcoal, paper, and peach identity. */
:root {
 color-scheme:dark; --bg:#171717; --panel:#202020; --raised:#292827; --line:#3a3734; --muted:#aaa49d; --text:#f2f0e5; --accent:#f2976f; --green:#a3c4ae; --font:"Avenir Next",Avenir,"Segoe UI",sans-serif;
 --wash:#f2976f09; --surface:#242322; --hover:#33302d; --on-accent:#281d17; --accent-soft:#f2976f1a; --accent-ink:#f3ad8e; --nav:#1b1b1b; --nav-text:#c4beb6; --balance:#2e2521; --balance-text:#f2d6c6; --success-bg:#24312a; --success-line:#3b5343; --danger:#efaa9d; --danger-bg:#392724; --danger-line:#674238; --notice-bg:#2e2822; --notice-text:#d7bea7; --shadow:#00000014;
}
:root[data-theme="light"] {
 color-scheme:light; --bg:#ede9df; --panel:#f8f6ef; --raised:#eeeae1; --line:#d9d3c9; --muted:#71685f; --text:#292623; --accent:#bd5834; --green:#396b4d;
 --wash:#f2976f19; --surface:#fcfaf5; --hover:#e7e0d6; --on-accent:#fff9f2; --accent-soft:#f2976f25; --accent-ink:#a64626; --nav:#e8e3d9; --nav-text:#655d55; --balance:#f0d5c3; --balance-text:#68422e; --success-bg:#e6eee5; --success-line:#c8d9c9; --danger:#a43d2c; --danger-bg:#f8e4dd; --danger-line:#e2b9aa; --notice-bg:#f3e8d9; --notice-text:#73593c; --shadow:#44362a08;
}
body {
  background: radial-gradient(ellipse at 24% 0%, var(--wash), transparent 46%),
    radial-gradient(ellipse at 94% 20%, var(--wash), transparent 44%), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { border-radius: 999px; background: var(--raised); padding: 10px 17px; transition: background .18s, box-shadow .18s, transform .18s; }
button:hover { background: var(--hover); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 4px 16px var(--shadow); }
button.danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1 { font-size: clamp(26px, 2.35vw, 35px); font-weight: 550; letter-spacing: -1.4px; }
h2 { font-weight: 600; font-size: 15px; }
.sidebar { background: var(--nav); color: var(--text); border: 0; border-right: 1px solid var(--line); padding: 28px 15px 20px; }
.brand { font-size: 20px; gap: 9px; padding-left: 9px; padding-right: 5px; }
.brandmark { border: 0; background: var(--accent); color: var(--on-accent); border-radius: 12px; width: 32px; height: 32px; font-size: 23px; }
.brandmark.brand-logo { display:block; flex:none; object-fit:contain; border-radius:0; background:none; }
.panel.keys-panel { border-radius:12px; }
.keys-panel .key-actions { justify-content:flex-end; gap:12px; }
.keys-panel .key-actions button { background:transparent; border:0; border-radius:0; padding:10px 4px; min-height:44px; box-shadow:none; font-size:14px; }
.keys-panel .key-actions button:hover { color:var(--accent); text-decoration:underline; text-underline-offset:4px; background:transparent; }
.keys-panel .key-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.keys-panel .key-status .badge { border:0; border-radius:0; padding:0; background:transparent; font-size:13px; }
.keys-panel .key-status .badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.brand small { border-color: var(--line); color: var(--muted); font-size: 8px; }
.workspace { display:block; border:0; background:transparent; border-radius:0; padding:0 9px; margin:0 0 24px; box-shadow:none; }
.workspace .workspace-icon { display:none; }
.workspace strong { display:block; white-space:nowrap; font-weight:500; line-height:1.5; }
.workspace span { margin-top:3px; line-height:1.5; }
.sidebar .brand { align-items:center; min-width:0; }
.sidebar .brand-name { min-width:0; line-height:1.2; }
.sidebar .brand-name small { display:block; width:fit-content; border:0; padding:0; margin:4px 0 0; font-size:9px; line-height:1; letter-spacing:1.2px; }
.workspace-icon, .avatar { border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.workspace span, .sidebar small { color: var(--muted); }
.sidebar .eyebrow { color: var(--muted); font-size: 9px; letter-spacing: 1.8px; }
.nav a { color: var(--nav-text); padding: 12px; border-radius: 14px; transition: background .18s, color .18s; }
.nav a:hover { background: var(--hover); color: var(--text); }
.nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; box-shadow: 0 3px 12px var(--shadow); }
.nav .count { border-color: var(--line); color: inherit; border-radius: 20px; padding: 0 6px; }
.connection { border-color: var(--line); color: var(--muted); border-radius: 15px; font-size: 10px; padding: 13px 12px; }
.connection strong { color: var(--text); font-size: 11px; }
.dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.account { border-color: var(--line); }
.account button { color: var(--text); }
.account button:hover { background: var(--hover); }
.topbar { background: var(--bg); border-color: var(--line); height: 75px; }
.breadcrumb b { color: var(--text); font-weight: 550; }
.top-right { font-size: 11px; }
.badge { background: var(--accent-soft); border-color: var(--line); color: var(--accent-ink); border-radius: 999px; font-size: 9px; padding: 4px 9px; }
.badge.green { color: var(--green); background: var(--success-bg); border-color: var(--success-line); }
.badge.gray { color: var(--muted); background: var(--raised); border-color: var(--line); }
.badge.red { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.content { padding-top: 34px; }
.page-head { margin-bottom: 24px; }
.page-head p { font-size: 12px; line-height: 1.7; }
.page-head .actions { flex-shrink: 0; }
.demo-note { border: 0; border-radius: 12px; background: var(--panel); color: var(--muted); padding: 11px 14px; margin-bottom: 22px; }
.demo-note a { color: var(--accent-ink); }
.stats { gap: 15px; }
.stat { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: 0 7px 20px var(--shadow); transition: transform .2s, box-shadow .2s; }
a.stat:hover { transform: translateY(-3px); box-shadow: 0 12px 25px var(--shadow); }
.stat-label { color: var(--muted); font-size: 11px; }
.stat-label svg { width: 29px; height: 29px; padding: 6px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.stat-value { font-size: 34px; font-weight: 550; margin: 16px 0 12px; letter-spacing: -1.6px; }
.stat-foot { font-size: 10px; }
.stat-foot .icon, .table-link .icon, .demo-note a .icon {
  width:13px; height:13px; display:inline-block; vertical-align:-2px;
}
.overview-stats .stat:first-child { background: var(--balance); color: var(--text); border-color: var(--line); position: relative; overflow: hidden; }
.overview-stats .stat:first-child::after { content: ""; width: 40px; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; position: absolute; left: 22px; top: 0; pointer-events: none; }
.overview-stats .stat:first-child .stat-label, .overview-stats .stat:first-child .stat-foot { color: var(--balance-text); }
.overview-stats .stat:first-child svg { color: var(--accent); border-color: var(--line); }
.panel, .plan-card { border: 1px solid var(--line); border-radius: 25px; background: var(--panel); box-shadow: 0 10px 32px var(--shadow); }
.panel-head { padding: 23px 23px 20px; }
.panel-head .eyebrow { display: block; font-size: 8px; letter-spacing: 1.6px; margin-bottom: 7px; }
.panel-head p { line-height: 1.6; }
.panel-body, .docs-block { padding: 24px; }
.chart-layout { grid-template-columns: minmax(0, 1.85fr) minmax(270px, 1fr); gap: 20px; }
.segmented { background: var(--raised); border: 0; padding: 4px; border-radius: 999px; flex-shrink: 0; }
.segmented button { padding: 6px 10px; border-radius: 999px; color: var(--muted); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 5px var(--shadow); }
.activity-summary { padding: 0 23px 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.activity-summary strong { display: block; font-size: 32px; line-height: 1.3; font-weight: 550; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.activity-summary span { font-size: 10px; color: var(--muted); }
.metric-control { display: flex; gap: 4px; }
.metric-control button { padding: 5px 9px; border-color: transparent; background: transparent; font-size: 10px; color: var(--muted); }
.metric-control button:hover { background: var(--hover); }
.metric-control button.active { background: var(--accent-soft); color: var(--accent-ink); }
.chart-wrap { padding: 4px 20px 5px; overflow: hidden; }
.chart { height: 220px; overflow: visible; }
.chart text { fill: var(--muted); font-size: 9px; }
.chart .gridline { stroke: var(--line); stroke-dasharray: 3 5; }
.chart-day { cursor: crosshair; outline: none; }
.chart-day circle { opacity: 0; transition: opacity .15s; }
.chart-day:last-child circle, .chart-day:hover circle, .chart-day:focus circle { opacity: 1; }
.chart-crosshair { stroke: var(--accent); stroke-dasharray: 3 4; opacity: 0; pointer-events: none; }
.chart-day:hover .chart-crosshair, .chart-day:focus .chart-crosshair { opacity: .6; }
.chart-day:focus circle { stroke: var(--text); stroke-width: 3px; }
.chart-footer { padding: 8px 23px 21px; font-size: 9px; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.chart-footer span:last-child { margin-left: auto; }
.legend-dot { border-radius: 50%; background: var(--accent); }
.icon-link { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; transition: background .2s; }
.icon-link svg { transform: rotate(-40deg); }
.icon-link:hover { background: var(--hover); }
.model-breakdown { padding: 0 23px 20px; }
.mix-bar { display: flex; height: 35px; gap: 4px; margin: 10px 0 25px; border-radius: 11px; overflow: hidden; background: var(--raised); }
.mix-bar span { min-width: 0; border-radius: 7px; }
.family-row { margin: 17px 0; }
.family-top { font-size: 11px; }
.track { background: var(--raised); height: 4px; }
.fill { transition: width .35s; }
.family-note { font-size: 10px; line-height: 1.6; margin-top: 22px; padding-top: 14px; }
th { background: var(--raised); color: var(--muted); font-size: 9px; padding-top: 12px; padding-bottom: 12px; }
td { border-color: var(--line); padding-top: 16px; padding-bottom: 16px; font-size: 11px; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--hover); }
.table-footer { font-size: 9px; padding: 14px 22px; }
.table-link { color: var(--accent-ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; white-space: nowrap; }
.bottom-note { color: var(--muted); line-height: 1.7; gap: 20px; }
.notice { background: var(--notice-bg); border-color: var(--line); color: var(--notice-text); border-radius: 14px; line-height: 1.7; }
.field label { color: var(--text); }
input, select { background: var(--surface); border-color: var(--line); border-radius: 11px; color: var(--text); }
input::placeholder { color: var(--muted); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.checkbox-list { border-radius: 13px; background: var(--raised); gap: 12px; }
.error { color: var(--danger); }
dialog { background: var(--panel); border-color: var(--text); border-radius: 25px; box-shadow: 0 30px 120px var(--shadow); max-height: calc(100dvh - 30px); }
dialog::backdrop { background: #00000080; backdrop-filter: blur(7px); }
.modal-head { padding: 23px 25px; }
.modal-body { padding: 24px 25px; }
.secret, .docs-block pre { background: var(--raised); border-radius: 12px; color: var(--text); }
.model-card .rates strong { color: var(--text); }
.plan-card { padding: 25px; }
.admin-tabs { gap: 7px; padding: 4px; border-radius: 22px; width: fit-content; background: var(--raised); }
.admin-tabs button { background: transparent; border-color: transparent; }
.admin-tabs button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#recharge-summary { background: var(--raised); border-radius: 14px; }
.quick-amounts button { border-radius: 14px; }
.login-story { background: radial-gradient(ellipse at 10% 90%, var(--wash), transparent 65%), var(--nav); color: var(--text); }
.login-story p, .login-story .eyebrow { color: var(--muted); }
.login-story h1 span { color: var(--accent); }
.login-form-wrap { background: var(--panel); }
.login-form h2 { letter-spacing: -1px; }
.google-signin { width:100%; min-height:48px; background:var(--raised); color:var(--text); gap:12px; }
.google-signin:disabled { cursor:not-allowed; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:13px; }
.auth-divider::before, .auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:20px; }
.auth-links button { border:0; background:none; padding:8px 0; color:var(--accent); }
.auth-hint, .auth-feedback { font-size:14px; line-height:1.6; color:var(--muted); margin:16px 0; }
.auth-feedback:empty { display:none; }
.auth-feedback:not(:empty) { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--raised); }
#toast { background: var(--nav); color: var(--text); border-radius: 18px; box-shadow: 0 10px 35px var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  .content { animation: arrive .3s ease-out; }
  @keyframes arrive { from { opacity: .4; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}
@media (min-width: 1500px) { .chart { height: 250px; } }
@media (max-width: 1150px) { .stat { padding: 18px; } .stat-value { font-size: 29px; } .chart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(235px, 1fr); } }
@media (max-width: 850px) { .chart-layout { grid-template-columns: 1fr; } .page-head .actions { flex-wrap: wrap; } }
@media (max-width: 640px) {
  .topbar { height: 62px; }
  .content { padding: 25px 16px; }
  .page-head h1 { font-size: 29px; letter-spacing: -1.1px; }
  .page-head .actions { width: 100%; }
  .page-head .actions button { flex: 1; font-size: 12px; padding: 10px 12px; }
  .stat { border-radius: 20px; padding: 17px 14px; }
  .stat-value { font-size: 29px; margin: 13px 0 10px; }
  .stat-foot { font-size: 9px; }
  .stat-label { font-size: 10px; }
  .stat-label svg { width: 25px; height: 25px; }
  .panel { border-radius: 22px; }
  .panel-head { padding: 20px 17px 16px; }
  .activity-summary { padding: 0 17px 12px; }
  .chart-wrap { padding: 0 12px; }
  .chart { height: auto; min-height: 155px; }
  .chart-footer { padding: 10px 17px 18px; }
  .chart-footer #chart-detail { order: 3; width: 100%; }
  .model-breakdown { padding: 0 17px 20px; }
  .bottom-note { flex-direction: column; gap: 4px; }
  .admin-tabs { border-radius: 17px; width: 100%; }
  .admin-tabs button { padding: 8px 12px; font-size: 12px; }
  .actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.theme-toggle { padding:8px 12px; gap:7px; font-size:11px; white-space:nowrap; }
.key-providers { padding:0; margin:0 0 22px; border:0; min-width:0; }
.key-providers legend { padding:0; margin-bottom:10px; font-size:13px; color:var(--text); }
.provider-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.provider-option { position:relative; min-width:0; cursor:pointer; }
.provider-option input { position:absolute; opacity:0; width:1px; height:1px; }
.provider-card { position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:8px; min-height:116px; padding:14px 5px 12px; border:1px solid var(--line); border-radius:16px; background:var(--raised); transition:border-color .18s,background .18s,transform .18s; }
.provider-marks { display:flex; align-items:center; justify-content:center; gap:7px; height:28px; color:var(--muted); }
.provider-marks svg { width:25px; height:25px; }
.provider-name { font-size:12px; font-weight:650; color:var(--text); }
.provider-status { font-size:10px; color:var(--muted); white-space:nowrap; }
.provider-check { position:absolute; top:7px; right:7px; display:none; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:11px; }
.provider-option input:checked + .provider-card { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.provider-option input:checked + .provider-card .provider-marks { color:var(--accent-ink); }
.provider-option input:checked + .provider-card .provider-check { display:flex; }
.provider-option input:focus-visible + .provider-card { outline:2px solid var(--accent); outline-offset:3px; }
.provider-option:has(input:disabled) { cursor:not-allowed; }
.provider-option input:disabled + .provider-card { background:var(--panel); }
.provider-option input:disabled + .provider-card .provider-marks { opacity:.65; }
.provider-help { margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--muted); }
.model-count { margin-left:5px; font-size:11px; color:var(--muted); font-weight:400; }
.supported-models .checkbox-list { max-height:175px; overflow:auto; }
.supported-models .checkbox-list label { overflow-wrap:anywhere; }
.supported-models .checkbox-list p { margin:0; font-size:12px; }
@media(max-width:480px) { .provider-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .provider-card { min-height:104px; } }
.theme-toggle .icon { width:15px; height:15px; }
.login-theme { position:fixed; top:20px; right:24px; z-index:20; }
.login-theme .theme-toggle { background:var(--panel); box-shadow:0 3px 15px var(--shadow); }
.chart .activity-line { stroke:var(--accent); }
.chart .activity-stop { stop-color:var(--accent); }
.chart-day circle { fill:var(--accent); stroke:var(--panel); }
input[type="checkbox"], input[type="radio"] { accent-color:var(--accent); }
#toast { background:var(--surface); border:1px solid var(--line); }
@media(max-width:640px) { .topbar { padding:0 16px; gap:8px; } .top-right { gap:8px; } .top-right .theme-toggle { display:inline-flex; padding:8px; } .theme-toggle .theme-label { display:none; } }

/* Readable type across the workspace, including compact cards and mobile views. */
.mix-explorer { display:grid; gap:12px; }
.mix-visual { position:relative; width:164px; margin:0 auto 4px; padding-bottom:24px; }
.mix-visual svg { display:block; width:164px; height:164px; transform:rotate(-90deg); overflow:visible; }
.mix-ring-track, .mix-arc { fill:none; stroke-width:15; }
.mix-ring-track { stroke:var(--raised); }
.mix-arc { transition:opacity .2s,stroke-width .2s; }
.mix-center { position:absolute; inset:0 0 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; pointer-events:none; }
.mix-center strong { font-size:27px; font-weight:500; letter-spacing:-.7px; line-height:1.25; font-variant-numeric:tabular-nums; }
.mix-center span { font-size:13px; color:var(--muted); margin-top:4px; }
.mix-period { position:absolute; bottom:0; width:100%; text-align:center; font:10px var(--font); letter-spacing:1.5px; color:var(--muted); }
.mix-list { display:grid; gap:3px; }
.mix-choice { width:100%; display:flex; justify-content:initial; gap:11px; text-align:left; padding:7px 11px; border:1px solid transparent; border-radius:13px; background:transparent; }
.mix-choice:hover { background:var(--hover); }
.mix-choice[aria-pressed="true"] { background:var(--raised); border-color:var(--line); }
.mix-choice:focus-visible { outline:2px solid var(--accent); }
.mix-swatch { width:8px; height:29px; background:var(--family-color); border-radius:5px; flex:none; }
.mix-model { font-size:14px; font-weight:550; }
.mix-model small { display:block; font-size:12px; font-weight:400; margin-top:1px; }
.mix-choice > strong { margin-left:auto; font-size:19px; font-weight:500; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.mix-choice > strong small { font-size:12px; margin-left:2px; font-weight:400; }
.has-selection .mix-arc { opacity:.2; }
.has-selection .mix-arc.is-selected { opacity:1; stroke-width:20; }
.mix-insight { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; border-top:1px solid var(--line); padding-top:15px; color:var(--muted); font-size:12px; }
@media(min-width:641px) and (max-width:900px) { .mix-explorer { grid-template-columns:200px 1fr; align-items:center; } .mix-insight { grid-column:1 / -1; } }
body { font-size:16px; line-height:1.55; }
h1, .page-head h1 { font-size:clamp(30px,2.5vw,38px); }
h2 { font-size:18px; }
h3 { font-size:16px; }
.modal-head h2 { font-size:22px; }
.page-head p, .docs-block p, .docs-block ol { font-size:15px; }
.nav a { font-size:15px; }
.workspace strong, .account strong { font-size:14px; }
.workspace span, .account small, .connection, .connection strong { font-size:12px; }
.brand small, .sidebar .eyebrow, .eyebrow, .panel-head .eyebrow { font-size:11px; letter-spacing:1.2px; }
.topbar, .top-right, .theme-toggle { font-size:13px; }
.badge, .nav .count { font-size:12px; }
.stat-label { font-size:14px; }
.stat-foot, .panel-head p, .activity-summary span, .family-note,
.chart-footer, .table-footer, .bottom-note, .demo-note, .demo-accounts p { font-size:13px; }
.family-top { font-size:14px; }
.segmented button, .metric-control button, button.small,
.page-head .actions button, .admin-tabs button { font-size:14px; }
.chart text { font-size:12px; }
th { font-size:12px; }
td, .model-cell, .table-link { font-size:14px; }
.mono, code, .secret, .docs-block pre { font-size:14px; }
.plan-card p, .model-card .rates, .notice, .settings-summary,
.status-row, .field label, .key-providers legend, .error { font-size:14px; }
.model-card h3 { font-size:14px; overflow-wrap:anywhere; }
.model-card .rates strong { font-size:18px; }
.field small, .provider-help, .model-count { font-size:13px; }
.checkbox-list label { font-size:13px; line-height:1.6; }
.provider-name { font-size:14px; }
.provider-status { font-size:12px; }
.supported-models .checkbox-list p { font-size:14px; }
.provider-card { min-height:126px; }
dialog { width:620px; }
.stat { min-width:0; }
.stat > * { position:relative; z-index:1; }
.stat-label { gap:8px; }
.panel-head { flex-wrap:wrap; }
/* Paint the canvas and workspace explicitly, including mobile browsers that
   apply their own dark appearance to transparent page containers. */
html { min-height:100%; background-color:var(--bg); }
:root[data-theme="light"] { color-scheme:only light; }
:root[data-theme="light"] body,
:root[data-theme="light"] .app-shell,
:root[data-theme="light"] .main,
:root[data-theme="light"] .content {
  background-color:#ede9df;
  color:#292623;
}
:root[data-theme="light"] .page-head h1 { color:#292623; }
:root[data-theme="light"] .page-head p { color:#71685f; }
/* Give small screens their own composition, rather than shrinking desktop cards. */
@media(max-width:640px) {
  body { background:var(--bg); }
  .topbar { height:64px; padding:0 20px; }
  .sidebar { box-shadow:none; height:100dvh; overflow-y:auto; }
  .sidebar.open { box-shadow:20px 0 60px #0008; }
  .mobile-menu { min-width:44px; min-height:44px; }
  .breadcrumb { gap:10px; min-width:0; }
  .breadcrumb > span { display:none; }
  .top-right > .badge { display:none; }
  .top-right .theme-toggle { min-width:44px; min-height:44px; }
  .content { padding:28px 20px 40px; }
  .page-head { gap:20px; margin-bottom:24px; }
  .page-head h1 { font-size:28px; line-height:1.2; letter-spacing:-.8px; }
  .page-head p { font-size:15px; line-height:1.65; margin-top:12px; }
  .page-head .actions { gap:10px; }
  .page-head .actions button { min-height:48px; }
  .demo-note { padding:16px; line-height:1.65; margin-bottom:22px; }
  .stats { grid-template-columns:1fr; gap:12px; }
  .stat { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; row-gap:8px; padding:20px; border-radius:18px; }
  .stat-label { grid-column:1; font-size:14px; justify-content:flex-start; }
  .stat-label svg { display:none; }
  .stat-value { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; font-size:30px; letter-spacing:-1px; }
  .stat-foot { grid-column:1; font-size:12px; line-height:1.5; }
  .chart-layout { gap:20px; margin-top:24px; }
  .panel { border-radius:20px; }
  .panel-head { gap:16px; padding:22px 20px 16px; }
  .panel-head h2 { font-size:18px; }
  .segmented button, .metric-control button { min-height:40px; }
  .two-col, .model-grid, .plan-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .filter-row { gap:12px; }
  .filter-row input, .filter-row select { width:100%; min-height:46px; }
  .table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px; min-height:48px; }
  .field { margin-bottom:22px; }
  .login-shell { min-height:100svh; background:var(--bg); padding:0 24px 32px; }
  .login-story { padding:32px 0 0; background:none; border:0; }
  .login-story .brand { margin:0; padding:0; font-size:21px; }
  .login-story h1, .login-story p, .login-story .eyebrow { display:none; }
  .login-theme { position:absolute; top:26px; right:24px; }
  .login-theme .theme-toggle { min-height:44px; min-width:44px; box-shadow:none; }
  .login-form-wrap { padding:56px 0 0; background:none; display:block; }
  .login-form { width:100%; max-width:440px; margin:0 auto; }
  .login-form h2 { font-size:32px; line-height:1.2; }
  .login-form > p { font-size:15px; line-height:1.65; margin:12px 0 32px; }
  .login-form .field input { background:var(--panel); border-radius:14px; padding:15px; min-height:54px; }
  .login-form .primary { min-height:54px; font-size:16px; }
  .demo-accounts { margin-top:32px; }
  .demo-accounts .actions { flex-direction:column; }
  .demo-accounts button { min-height:48px; }
  dialog { width:calc(100% - 24px); max-height:calc(100svh - 24px); border-radius:20px; }
  .modal-body { overflow-wrap:anywhere; }
  .modal-body .form-row { grid-template-columns:1fr; }
  .modal-actions { flex-wrap:wrap; gap:10px; }
  .modal-actions button { min-height:46px; }
  .bottom-note { margin-top:28px; line-height:1.65; }
}
@media(max-width:640px) {
  .brand small { font-size:10px; }
  .modal-head, .modal-body { padding:20px; }
  .chart text { font-size:13px; }
}

/* Account access: shared sizing and spacing across all authentication states. */
.login-shell { min-height:100svh; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.login-story { padding:64px clamp(32px,6vw,96px); }
.login-story .brand { gap:14px; font-size:27px; margin-bottom:64px; }
.login-story .brand-logo { width:48px; height:48px; border:0; }
.login-form-wrap { padding:88px 40px 56px; }
.login-form { width:100%; max-width:420px; min-width:0; }
.login-form h2 { font-size:32px; line-height:1.2; letter-spacing:-1px; margin-bottom:12px; }
.login-form > p { font-size:16px; line-height:1.65; margin-bottom:28px; }
.login-form .field { margin-bottom:20px; }
.login-form .field label { font-size:14px; margin-bottom:8px; color:var(--text); }
.login-form .field input { min-height:52px; font-size:16px; padding:13px 15px; border-radius:12px; background:var(--raised); }
.login-form input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.login-form button.primary, .login-form .google-signin { min-height:52px; width:100%; border-radius:12px; font-size:16px; padding:12px 16px; }
.login-form .google-signin { flex-wrap:wrap; gap:8px; line-height:1.4; }
.login-form .google-signin svg { flex:none; }
.login-form .auth-back { display:flex; width:100%; min-height:44px; padding:10px 8px; margin-top:12px; background:transparent; border:0; border-radius:8px; color:var(--muted); font-size:14px; }
.login-form .auth-back:hover { color:var(--text); background:var(--raised); }
.login-form .auth-links { margin-top:20px; gap:8px 20px; }
.login-form .auth-links button { min-height:44px; font-size:14px; }
.login-form .auth-hint { margin:8px 0 24px; font-size:14px; }
.login-form .auth-feedback { color:var(--text); margin:24px 0; line-height:1.65; overflow-wrap:anywhere; }
.login-form .error:empty { display:none; }
.login-form .error:not(:empty) { padding:14px 16px; margin-top:20px; border-radius:12px; border:1px solid currentColor; line-height:1.6; }
.auth-password { position:relative; }
.login-form .auth-password input { padding-right:70px; }
.login-form .password-toggle { position:absolute; right:5px; top:4px; bottom:4px; min-width:56px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; padding:6px; }
.login-form .password-toggle:hover { color:var(--text); background:var(--panel); }
.auth-sent-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--wash); color:var(--accent); margin-bottom:24px; }
.auth-sent-icon .icon { width:26px; height:26px; }
.login-form strong { overflow-wrap:anywhere; }
@media(max-width:800px) {
  .login-shell { display:block; padding:0 24px 40px; }
  .login-story { padding:28px 0 0; background:none; border:0; }
  .login-story .brand { font-size:23px; gap:10px; margin:0; padding:0; }
  .login-story .brand-logo { width:40px; height:40px; }
  .login-story h1, .login-story p, .login-story .eyebrow { display:none; }
  .login-theme { position:absolute; top:26px; right:24px; }
  .login-theme .theme-toggle { min-width:44px; min-height:44px; }
  .login-theme .theme-toggle span { display:none; }
  .login-form-wrap { display:block; padding:48px 0 0; background:none; }
  .login-form h2 { font-size:30px; }
  .login-form .field { margin-bottom:18px; }
}
/* USDT payment instructions remain readable on narrow screens. */
.crypto-topup { padding: 24px; min-width: 0; }
.crypto-topup .panel-head { padding: 0; gap: 12px; }
.crypto-topup p { margin: 12px 0; overflow-wrap: anywhere; }
.crypto-topup form { max-width: 460px; margin-top: 20px; }
.crypto-topup input { width: 100%; min-width: 0; }
.crypto-topup > button { margin: 8px 8px 0 0; }
@media (max-width: 600px) { .crypto-topup { padding: 20px; } .crypto-topup .panel-head { flex-wrap: wrap; gap: 12px; padding: 0; } }

/* Wallet: a focused funding form and a compact, expandable payment ledger. */
.wallet-layout { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); margin-bottom:40px; }
.wallet-overview { padding:32px; background:var(--balance); min-width:0; }
.wallet-balance { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-top:18px; font-size:clamp(32px,3.5vw,48px); letter-spacing:-1.8px; line-height:1.2; font-variant-numeric:tabular-nums; }
.wallet-balance > span { font-size:12px; letter-spacing:.6px; color:var(--muted); }
.wallet-overview > p { color:var(--muted); margin-top:10px; }
.wallet-spending { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; }
.wallet-spending > span { color:var(--muted); }
.wallet-how { margin-top:38px; }
.wallet-how h2 { font-size:14px; }
.wallet-how ol { margin:16px 0; padding-left:20px; color:var(--muted); font-size:13px; }
.wallet-how li { padding:4px 0 4px 4px; }
.wallet-how p { font-size:12px; color:var(--muted); }
.wallet-funding { padding:32px; min-width:0; }
.wallet-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.wallet-section-title h2 { font-size:18px; letter-spacing:-.4px; }
.wallet-section-title > span { font-size:12px; }
.wallet-networks { margin:0 0 24px; padding:0; border:0; min-width:0; }
.wallet-networks legend { font-size:13px; margin-bottom:10px; }
.wallet-networks > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wallet-networks label { position:relative; cursor:pointer; min-width:0; }
.wallet-networks input { position:absolute; opacity:0; width:1px; height:1px; }
.wallet-networks label > span { display:grid; grid-template-columns:1fr auto; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.wallet-networks strong { font-size:14px; font-weight:600; }
.wallet-networks small { grid-column:1; font-size:11px; margin-top:3px; }
.wallet-networks svg { grid-column:2; grid-row:1 / 3; align-self:center; opacity:0; width:16px; }
.wallet-networks input:checked + span { border-color:var(--accent); background:var(--accent-soft); }
.wallet-networks input:checked + span svg { opacity:1; color:var(--accent-ink); }
.wallet-networks input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; }
.wallet-funding .field { margin-bottom:16px; }
.wallet-amount-input { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:0 16px; }
.wallet-amount-input:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.wallet-amount-input > span { color:var(--muted); font-size:13px; flex:none; }
.wallet-amount-input input { width:100%; min-width:0; border:0; border-radius:0; background:transparent; box-shadow:none; padding:14px 0; font-size:22px; outline:none; }
.wallet-funding .field small { display:block; font-size:12px; line-height:1.6; margin-top:9px; }
.wallet-quote-note { font-size:12px; color:var(--muted); line-height:1.7; margin:0 0 22px; }
.wallet-funding button.primary { width:100%; border-radius:10px; min-height:46px; justify-content:space-between; padding:12px 16px; }
.wallet-funding .error:empty { display:none; }
.wallet-funding .error { margin-top:16px; font-size:13px; line-height:1.6; }
.wallet-history { margin:0 0 36px; min-width:0; }
.wallet-history .wallet-section-title { margin-bottom:14px; }
.wallet-payments { border-top:1px solid var(--line); }
.wallet-payment { border-bottom:1px solid var(--line); }
.wallet-payment summary { display:flex; align-items:center; gap:16px; padding:20px 0; cursor:pointer; list-style:none; }
.wallet-payment summary::-webkit-details-marker { display:none; }
.wallet-payment-title { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.wallet-payment-title > svg { color:var(--muted); width:18px; }
.wallet-payment-title strong { font-size:15px; font-weight:600; }
.wallet-payment-title strong small { font-weight:400; font-size:12px; margin-left:4px; }
.wallet-payment-title .muted { display:block; font-size:12px; margin-top:3px; }
.wallet-payment-status { font-size:12px; color:var(--muted); text-transform:capitalize; white-space:nowrap; }
.wallet-payment-status::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:7px; vertical-align:middle; }
.wallet-payment-status.is-credited { color:var(--green); }
.wallet-expand { font-size:20px; color:var(--muted); width:14px; text-align:center; }
.wallet-payment[open] .wallet-expand { transform:rotate(45deg); }
.wallet-payment-body { padding:0 0 22px 32px; min-width:0; }
.wallet-instructions { display:flex; flex-wrap:wrap; gap:24px 48px; background:var(--panel); padding:20px; border-radius:10px; }
.wallet-instructions .eyebrow { font-size:10px; display:block; margin-bottom:7px; }
.wallet-send-amount { font-size:23px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.wallet-send-amount small { font-size:12px; }
.wallet-instructions strong { font-size:14px; font-weight:500; display:block; padding-top:5px; }
.wallet-payment-note { font-size:13px; color:var(--muted); line-height:1.7; margin:16px 0; }
.wallet-payment-note a { text-decoration:underline; text-underline-offset:3px; }
.wallet-address-label { display:block; font-size:12px; margin-bottom:8px; }
.wallet-address { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }
.wallet-address input { flex:1; width:100%; min-width:0; border:0; border-radius:0; background:transparent; font:12px/1.5 ui-monospace,monospace; padding:12px; }
.wallet-address button { flex:none; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; font-size:12px; }
.wallet-network-note { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.6; }
.wallet-payment-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.wallet-payment-footer > span { font-size:11px; color:var(--muted); min-width:0; }
.wallet-payment-footer code { display:block; font-size:10px; overflow-wrap:anywhere; margin-top:3px; }
.wallet-text-button { border:0; border-radius:0; background:transparent; padding:10px 0; font-size:12px; color:var(--text); }
.wallet-text-button:hover { background:transparent; color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; }
.wallet-empty { padding:28px 0; font-size:14px; }
.wallet-empty span { display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.wallet-ledger { border-top:1px solid var(--line); }
.wallet-ledger table { min-width:0; width:100%; }
.wallet-ledger th:first-child,.wallet-ledger td:first-child { padding-left:0; }
.wallet-ledger th:last-child,.wallet-ledger td:last-child { padding-right:0; }
@media (max-width:900px) {
 .wallet-layout { grid-template-columns:1fr; }
 .wallet-overview { padding:24px; }
 .wallet-how { display:none; }
 .wallet-spending { margin-top:22px; }
 .wallet-funding { padding:24px; }
}
@media (max-width:600px) {
 .wallet-layout { border-radius:12px; margin-bottom:28px; }
 .wallet-funding,.wallet-overview { padding:20px; }
 .wallet-payment summary { gap:10px; padding:18px 0; }
 .wallet-payment-title { gap:10px; }
 .wallet-payment-title > svg { display:none; }
 .wallet-payment-title strong small { display:none; }
 .wallet-payment-title .muted { font-size:11px; }
 .wallet-payment-body { padding-left:0; }
 .wallet-instructions { gap:18px; padding:16px; }
 .wallet-section-title h2 { font-size:17px; }
 .wallet-networks label > span { padding:12px; }
 .wallet-address button { padding:12px; }
 .wallet-address button span { display:none; }
 .wallet-balance { font-size:36px; }
 .wallet-ledger th,.wallet-ledger td { padding:14px 8px; font-size:11px; }
 .wallet-ledger td:first-child { width:42%; overflow-wrap:anywhere; }
 .wallet-ledger td:nth-child(2) { white-space:normal; }
 .wallet-ledger td:last-child { white-space:nowrap; }
}