/* Shared customer theme: quiet surfaces, readable text and clear status colors. */
:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --raised: #f0f4f9;
  --border: #e0e6ef;
  --text: #1e293b;
  --muted: #526174;
  --subtle: #68778b;
  --accent: #3659d9;
  --mint: #08765b;
  --amber: #965c09;
  --rose: #b42336;
  --radius: 16px;
}
body, body:not([data-page="home"]) { background: var(--bg); color: var(--text); font-size: 15px; }
body::before, .cosmic-backdrop, body:not([data-page="home"]) .cosmic-backdrop,
.hero-copy::before, .recharge-card::before { display: none; background: none; }
*, *::before, *::after { text-shadow: none !important; }
::selection { background: #dce6ff; color: #203b8c; }
:focus-visible { outline: 3px solid #728be0; outline-offset: 3px; }
.site-header { height: 80px; background: #fff; border-color: var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-inner { max-width: 1280px; padding: 0 40px; gap: 24px; }
.brand { color: var(--text); font-size: 19px; letter-spacing: 0; font-weight: 700; }
.brand-mark { color: #fff; background: var(--accent); border: 0; box-shadow: none; border-radius: 11px; }
.brand-caption, .hero-bottom { display: none; }
.header-inner nav { background: #f5f7fb; border: 1px solid #edf0f5; padding: 4px; border-radius: 12px; }
.header-inner nav .nav-link { color: var(--muted); font-size: 14px; border-radius: 8px; }
.header-inner nav .nav-link.active { color: var(--accent); background: #fff; border-color: var(--border); box-shadow: 0 1px 3px #1e293b08; }
.header-inner nav .nav-link:hover { background: #eaf0fc; color: var(--accent); }
.header-help { color: var(--muted); border-color: var(--border); font-size: 13px; }
main { max-width: 1280px; padding: 0 40px; }
.top-note { color: var(--subtle); background: none; font-size: 13px; letter-spacing: 0; margin-top: 24px; padding: 0; }
.top-note button { color: var(--accent); font-size: 13px; }
.live-dot, .tag .live-dot { background: var(--mint); box-shadow: none; }
.note-divider { background: var(--border); }
.hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 64px; min-height: 490px; margin: 32px 0 48px; }
.hero-copy { padding: 12px 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.hero-copy .eyebrow { font-size: 12px; letter-spacing: .5px; color: var(--accent); background: #eaf0ff; border: 0; padding: 7px 12px; border-radius: 6px; backdrop-filter: none; }
.tiny-spark, .small-stars { color: var(--accent); }
.hero-copy h1 { color: var(--text); font-size: clamp(36px,3.5vw,48px); font-weight: 700; line-height: 1.45; letter-spacing: -1.4px; margin-top: 24px; }
.hero-copy h1>span:not(.title-period) { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
.hero-description { color: var(--muted); font-size: 16px; letter-spacing: 0; line-height: 1.9; }
.benefits { gap: 16px; margin-top: 36px; }
.benefits strong { color: var(--text); font-size: 14px; font-weight: 650; }
.benefits small { color: var(--subtle); font-size: 12px; white-space: normal; }
.benefit-icon { background: #fff; border-color: var(--border); backdrop-filter: none; box-shadow: none; }
.violet { color: var(--accent) !important; }
.mint { color: var(--mint) !important; }
.amber { color: var(--amber) !important; }
.rose { color: var(--rose) !important; }
.panel, .recharge-card, .workspace, .query-form-panel, .query-results-panel, .subscription-panel, dialog {
  color: var(--text); background: #fff; border-color: var(--border); border-radius: var(--radius);
  box-shadow: 0 5px 24px #25355705; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.recharge-card { padding: 30px; }
.panel-title h2, .workspace-heading h2, .section-heading h2 { color: var(--text); font-weight: 700; letter-spacing: 0; }
.panel-title h2 { font-size: 23px; }
.overline { font-size: 10px; color: var(--subtle); letter-spacing: 1.4px; }
.tag, .subtle-label { color: var(--muted); background: #f3f6fa; border-color: var(--border); font-size: 12px; }
.stepper li { color: var(--subtle); font-size: 13px; }
.stepper li>span { color: var(--subtle); background: #f4f6fa; border-color: var(--border); font-size: 12px; }
.stepper li.active { color: var(--accent); font-weight: 650; }
.stepper li.active>span { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
.stepper li.done { color: var(--mint); }
.stepper li.done>span { background: #e9f6f1; color: var(--mint); border-color: #bcded1; }
.stepper li::after, .stepper li.done::after { background: var(--border); }
label { color: var(--text); font-size: 15px; font-weight: 600; }
input, textarea, select { color: var(--text); background: #fff; border-color: #cbd5e1; box-shadow: none; font-size: 15px; border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #718096; font-size: 14px; opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #3659d915; }
.field-hint, .secure-note, .session-availability, .session-account, .account-review-note { color: var(--muted); font-size: 14px; line-height: 1.8; }
.secure-note { color: var(--subtle); border-color: var(--border); font-size: 13px; }
.button { min-height: 44px; border-radius: 10px; font-size: 14px; }
.primary, .primary:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
.primary:hover { background: #294ac1; border-color: #294ac1; }
.secondary, .icon-button { background: #fff; color: var(--muted); border-color: #d6deea; box-shadow: none; }
.secondary:hover, .icon-button:hover { background: #f0f4fc; color: var(--accent); border-color: #b7c7ef; }
.text-button, .sample-link, .quick-services>a, .quick-services>button, .bottom-help button, footer button { color: var(--accent); font-size: 14px; }
.text-button:hover, .sample-link:hover, .quick-services>a:hover, .quick-services>button:hover { color: #2446b8; }
.quick-services, .quick-services>span { color: var(--subtle); background: none; font-size: 13px; padding: 16px 0 0; }
.catalog-intro, .catalog-intro>span:last-child, .section-caption { color: var(--subtle); background: none; font-size: 13px; letter-spacing: .3px; }
.catalog-intro { padding: 0; }
.inventory-section, footer { border-color: var(--border); }
.inventory-section .section-heading h2 { color: var(--text); }
.section-icon, .inventory-section .section-icon, .inventory-section .text-button { color: var(--accent); }
.product-card { background: #fff; border-color: var(--border); border-radius: 12px; backdrop-filter: none; box-shadow: none; }
.product-card:hover { background: #fff; border-color: #b6c5eb; box-shadow: 0 3px 14px #3659d908; }
.product-info strong { color: var(--text); font-size: 14px; font-weight: 650; }
.product-info>small { color: var(--subtle); font-size: 12px; }
.product-symbol { background: #edf7f3; color: var(--mint); border-color: #d5e9df; }
.product-symbol.claude { background: #fff4ed; color: #a85931; border-color: #f0dece; }
.stock-badge { color: var(--mint); font-size: 12px; }
.stock-badge.limited { color: var(--amber); }.stock-badge.soldout { color: var(--rose); }.stock-badge.unknown { color: var(--subtle); }
.workspace-toggle { background: #f9fafc; border-radius: 15px; }
.workspace-toggle strong { color: var(--text); }
.workspace-toggle small, .workspace-heading p { color: var(--muted); font-size: 14px; }
.drawer-hint { color: var(--subtle); }
.workspace-actions .small { font-size: 13px; }
.stats>div { background: #f9fafc; border-color: var(--border) !important; box-shadow: none; border-radius: 12px; }
.stats>div>span:first-child { color: var(--muted); font-size: 13px; }
.stats strong { color: var(--text); font-weight: 650; }
.stats .stat-icon { color: var(--subtle); }
.empty-state h3 { color: var(--text); font-size: 15px; font-weight: 600; }
.empty-state p { color: var(--muted); font-size: 14px; }
.empty-icon { background: #f3f6fa; color: var(--subtle); border-color: var(--border); }
th { color: var(--muted); border-color: var(--border); font-size: 13px; }
td, .workspace td { color: var(--text); border-color: var(--border); font-size: 14px; }
td small { color: var(--subtle); font-size: 12px; }
.status-pill { background: #eaf7f0; color: var(--mint); font-size: 13px; font-weight: 600; }
.status-pill.pending, .status-pill.limited { background: #fff5e5; color: var(--amber); }
.status-pill.failed, .status-pill.invalid, .status-pill.expired, .status-pill.soldout, .status-pill.revoked { background: #fff0f1; color: var(--rose); }
.status-pill.unused { background: #edf1ff; color: var(--accent); }
.status-pill.used { background: #edf3ff; color: #2b579e; }.status-pill.active { background: #eaf7f0; color: var(--mint); }
.order-failure-reason { color: var(--rose) !important; }
.workspace .order-failure-reason, .workspace .order-sync-warning { font-size: 14px; }
.result-state h3 { color: var(--text); }.result-state p { color: var(--muted); font-size: 15px; }
.result-state .order-number { color: var(--subtle); font-size: 13px; }
.result-state>span { background: #eaf7f0; color: var(--mint); }.result-state>span.pending { background: #fff5e5; color: var(--amber); }.result-state>span.failed { background: #fff0f1; color: var(--rose); }
.selected-product, .session-guide, .organization-location, .deep-option, .deep-result, #batch-progress { color: var(--text); background: #f8fafc; border-color: var(--border); }
.selected-product small, .session-guide ol, .organization-location-title, .deep-option small, .deep-result small, .batch-summary>span, .batch-list { color: var(--muted); font-size: 14px; }
.session-guide h3, .session-label strong, .organization-breadcrumb strong { color: var(--text); }
.session-guide a, .session-guide .text-button, .session-guide h3 svg, .organization-location-copy { color: var(--accent); }
.organization-location-row { background: #fff; border-color: #ccd7f2; }
.session-account.is-ready { background: #edf8f3; border-color: #b8ddcc; box-shadow: none; }
.account-review-label { color: var(--mint); }.account-review-email { color: var(--text); }
#redeem-session { font-size: 14px; }.deep-option input { accent-color: var(--accent); }
.deep-result.is-verified { border-color: #b8ddcc; }
.deep-fields, .deep-meta { border-color: var(--border); }.deep-field { background: #fff; border-color: var(--border); }
.deep-field dt { color: var(--muted); font-size: 13px; }.deep-field dd { color: var(--text); font-size: 15px; }
.membership-precheck { background: #f8fafc; border-color: var(--border); }
.membership-precheck p { color: var(--muted); font-size: 14px; }
.membership-precheck.active { background: #fff3f3; border-color: #e4a9ad; box-shadow: none; }
.membership-precheck.active strong, .membership-precheck .remaining-membership { color: var(--rose); }
.membership-precheck.inactive { background: #edf8f3; border-color: #b8ddcc; }
.membership-precheck.error, .membership-precheck.unknown { background: #fff8ec; border-color: #e8c998; }
.membership-precheck.inactive .remaining-membership { color: var(--mint); }
.membership-precheck .text-button { font-size: 14px; }
.batch-list li { border-color: var(--border); }.batch-list small { color: var(--rose); font-size: 13px; }
.form-error { color: var(--rose); font-size: 14px; }
.page-intro { margin-top: 24px; padding: 22px 0 28px; background: none; border-radius: 0; }
.page-intro h1 { color: var(--text); font-size: 38px; letter-spacing: -1px; }
.page-intro h1>span, .page-intro .eyebrow { color: var(--accent); }
.page-intro p, .subscription-explainer>p, .explanation-row p { color: var(--muted); font-size: 15px; }
.subscription-explainer { background: none; border-radius: 0; padding: 26px 0; }
.subscription-explainer>h2, .explanation-row strong { color: var(--text); }
.explanation-row>span, .large-orbit { color: var(--accent); background: #eaf0ff; border-color: #dce5fb; box-shadow: none; }.large-orbit svg { color: var(--accent); }
.mode-tabs button { color: var(--muted); background: #f8fafc; border-color: var(--border); }
.mode-tabs button.active { color: var(--accent); background: #edf2ff; border-color: #8ca4ed; }
.mode-tabs button strong { font-size: 14px; }.mode-tabs button small { color: var(--muted); font-size: 13px; }
.label-row>span { color: var(--subtle); font-size: 13px; }
.card-result { background: #fff; border-color: var(--border); }.card-result summary>span:first-child { color: var(--text); font-size: 14px; }
.card-detail { color: var(--muted); border-color: var(--border); font-size: 14px; }
.subscription-details { color: var(--text); background: #f5faf8; border-color: #cde5da; }
.subscription-details .detail-heading { border-color: #d5e8de; }.detail-row { font-size: 14px; }
.detail-row>span:first-child { color: var(--muted); }.detail-row>span:last-child { color: var(--text); }
.query-summary .query-status-filter.all { color: var(--muted); background: #f0f4f9; }
.query-summary .query-status-filter[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.query-summary .query-status-filter:hover { border-color: #849ce5; }.query-summary .query-status-filter:focus-visible { outline-color: var(--accent); }
.query-filter-empty { color: var(--subtle); }
dialog { color: var(--text); box-shadow: 0 24px 80px #17284026; }
dialog::backdrop { background: #18253d66; }
#modal-content { color: var(--muted); font-size: 15px; }#modal-content strong { color: var(--text); }#modal-content a { color: var(--accent); }#modal-content code { color: var(--accent); background: #edf2ff; }
#modal-content .modal-note { color: var(--amber); background: #fff8ec; border-color: #e8c998; }
#modal-content #save-order-screenshot { color: #fff; text-decoration: none; }
#toast { background: #fff; color: var(--text); border-color: var(--border); box-shadow: 0 6px 24px #1728401a; font-size: 14px; }
.bottom-help { color: var(--muted); background: none; font-size: 13px; padding: 24px 0; }
footer { background: none; color: var(--subtle); border-radius: 0; padding: 24px 0; }
.footer-brand { color: var(--text); }.mini-mark { color: var(--accent); }footer>div>p, footer>span { font-size: 12px; }
.skip-link { color: #fff; background: var(--accent); }
.api-configuration-notice { margin: 18px auto; padding: 16px 22px; max-width: 1280px; border: 1px solid #e8c998; border-radius: 12px; background: #fff8ec; color: var(--amber); line-height: 1.7; }
.order-screenshot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
#order-screenshot-preview { display: block; width: 100%; height: auto; border-radius: 12px; }
.workspace-summary-actions { display: flex; align-items: center; gap: 20px; }.workspace-open-link { white-space: nowrap; }
.workspace-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px 0 6px; }
.workspace-page-heading h1 { color: var(--text); font-size: 32px; line-height: 1.4; margin: 7px 0 10px; }
.workspace-page-heading p { color: var(--muted); font-size: 14px; line-height: 1.8; }.workspace-page-heading>.button { white-space: nowrap; }
body[data-page="workspace"] .site-header, body[data-page="workspace"] .top-note, body[data-page="workspace"] .bottom-help,
body[data-page="workspace"] footer, body[data-page="workspace"] #workspace-drawer>.workspace-toggle { display: none; }
body[data-page="workspace"] main { max-width: 1800px; margin: auto; padding: 0 32px 32px; min-height: 100vh; }
body[data-page="workspace"] #workspace-drawer { margin: 22px 0 0; min-height: calc(100vh - 190px); }
body[data-page="workspace"] .workspace-body { padding: 26px 28px 30px; }
body[data-page="workspace"] .workspace-body #orders-area { max-height: none; overflow: visible; }
body[data-page="workspace"] .workspace .empty-state { min-height: 280px; padding: 40px 16px; }
body[data-page="workspace"] .workspace-heading .overline { display: none; }body[data-page="workspace"] .workspace-heading h2 { margin-top: 0; }
body[data-page="workspace"] .workspace .table-scroll { margin-top: 22px; }
@media(max-width:1080px) {
  .hero-grid { gap: 32px; }.header-inner { gap: 16px; padding: 0 28px; }main { padding: 0 28px; }
}
@media(max-width:760px) {
  .site-header { height: auto; }.header-inner { padding: 18px 20px 12px; }
  .header-inner nav { border-radius: 10px; }.header-inner nav .nav-link { font-size: 13px; padding: 9px 6px; }
  .header-help { font-size: 12px; }main { padding: 0 20px; }
  .top-note { font-size: 12px; flex-wrap: wrap; gap: 7px; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; min-height: 0; margin: 26px 0 32px; }
  .hero-copy { padding: 0; }.hero-copy h1 { font-size: 36px; letter-spacing: -1px; margin-top: 18px; }
  .hero-copy .eyebrow { font-size: 12px; }.hero-description { font-size: 15px; margin-top: 14px; }
  .benefits { gap: 10px; margin-top: 24px; }.benefits>div { grid-template-columns: 1fr; gap: 5px; }
  .benefit-icon { grid-row: auto; }.benefits strong { font-size: 13px; white-space: normal; }.benefits small { font-size: 12px; }
  .recharge-card { padding: 24px 20px; }.panel-title { flex-wrap: wrap; }.panel-title h2 { font-size: 21px; }
  .quick-services { flex-wrap: wrap; justify-content: flex-start; gap: 14px; }.quick-services>span { display: none; }
  .workspace-toggle small { font-size: 13px; }.workspace .workspace-actions button { font-size: 13px; }
  .workspace td:nth-child(1), .workspace td:nth-child(2) { color: var(--muted); font-size: 13px; }
  .workspace td:nth-child(3) { color: var(--text); font-size: 15px; }
  .workspace tr { border-color: var(--border); grid-template-columns: 1fr; }
  .workspace td:nth-child(2) { grid-row: 3; grid-column: 1; }.workspace td:nth-child(4) { grid-row: 4; grid-column: 1; }
  .product-info strong { font-size: 13px; }.product-info>small, .stock-badge { font-size: 12px; }
  .section-heading { flex-wrap: wrap; gap: 10px; }.section-heading>div { flex-wrap: wrap; }.section-caption { font-size: 13px; }
  .page-intro { padding: 12px 0 24px; margin-top: 22px; }.page-intro h1 { font-size: 28px; }.page-intro p { font-size: 15px; }
  .session-actions .button { font-size: 14px; }.bottom-help { font-size: 13px; margin: 18px 0; }
  .deep-field dt { font-size: 13px; }.deep-field dd { font-size: 14px; }footer { padding: 20px 0; }footer>span { font-size: 12px; }
  .workspace-summary-actions { gap: 10px; flex-shrink: 0; }.workspace-open-link { font-size: 12px !important; padding: 8px 10px; min-height: 38px; }
  body[data-page="workspace"] main { padding: 0 16px 24px; }
  .workspace-page-heading { align-items: flex-start; flex-direction: column; gap: 16px; padding-top: 24px; }
  .workspace-page-heading h1 { font-size: 27px; }.workspace-page-heading>.button { align-self: flex-start; }
  body[data-page="workspace"] .workspace-body { padding: 22px 16px; }
  body[data-page="workspace"] .workspace-heading { flex-direction: column; align-items: stretch; }
  body[data-page="workspace"] .workspace .empty-state { min-height: 220px; }
}

/* Card query timestamps remain visible while details are collapsed. */
.card-result summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 10px; }
.card-result summary>span:first-child { grid-column:1; grid-row:1; }
.card-result summary>.status-pill { grid-column:2; grid-row:1; }
.card-result summary::after { grid-column:3; grid-row:1; }
.card-result summary>.card-used-at { grid-column:1 / -1; grid-row:2; color:var(--muted); font-size:12px; line-height:1.6; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

.result-state .recharge-completed-time { margin:12px 0 20px; color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.workspace .order-recharged-at { margin-top:7px; line-height:1.6; font-variant-numeric:tabular-nums; }

.session-file-tools { margin:10px 0 12px; padding:14px; border:1px dashed var(--border); border-radius:10px; background:#f8fafc; }
.session-file-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.session-file-actions .button { min-height:42px; }
.session-file-actions .text-button { min-height:42px; padding:8px 12px; }
.session-file-tools .field-hint { margin:8px 0 0; font-size:13px; }
.session-file-status { margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--accent); overflow-wrap:anywhere; }
.session-file-status:empty { display:none; }
.session-file-status.is-error { color:var(--rose); }
[data-session-drop].is-dragging { outline:2px solid var(--accent); outline-offset:2px; background:#eef3ff; }
.session-input[data-session-drop].is-dragging { border-color:var(--accent); border-style:dashed; background:#eef3ff; box-shadow:0 0 0 4px #3659d915; }
#redeem-account-form, #subscription-form, [data-membership-resume] { position:relative; }
.session-drop-hint { position:absolute; z-index:2; max-width:calc(100% - 24px); margin:12px; padding:10px 14px; border-radius:8px; background:#eaf0ff; color:var(--accent); font-size:14px; font-weight:600; pointer-events:none; }