/* Visual language sampled from the public 12th.ai homepage on 2026-10-29. */
:root {
  color-scheme: dark;
  color: #e2e8f0;
  background: #0d1117;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  --brand-bg: #0d1117;
  --brand-panel: #161b27;
  --brand-card: #1c2336;
  --brand-border: #2e4060;
  --brand-text: #e2e8f0;
  --brand-muted: #9aabc8;
  --brand-blue: #4facfe;
  --brand-green: #4ade80;
}
body { background: var(--brand-bg); color: var(--brand-text); }
.checkout-page { min-height: 100vh; display: flex; flex-direction: column; }
.checkout-page main { flex: 1; }
.skip-link { background: var(--brand-blue); color: #0d1117; }
.preview-bar { background: #172339; color: #9fc8ef; border-bottom: 1px solid #263958; }
.preview-bar[hidden] { display: none; }
.preview-bar a { text-decoration: underline; margin-left: 4px; }
.site-header { background: rgba(13, 17, 23, .94); border-bottom: 1px solid #1e2d44; }
.header-inner { height: 64px; }
.brand { gap: 10px; }
.brand-hex { flex: 0 0 26px; color: var(--brand-blue); }
.brand-word { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.brand-period { color: var(--brand-blue); }
.brand-divider { background: #2e4060; height: 19px; margin: 0 4px; }
.brand-caption { color: var(--brand-muted); font-size: 12px; font-weight: 500; }
.nav-link { color: #8ca0c2; font-size: 12px; }
.nav-link:hover, .nav-link.active { color: var(--brand-text); }
.nav-link.active:after { background: var(--brand-blue); }
.secure-label, .portal-user { color: #8ca0c2; font-size: 12px; }
.secure-dot, .signal-dot { background: var(--brand-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .12); }
.back-link { color: var(--brand-blue); font-weight: 600; }
.back-link:hover { color: #a0d4ff; }
.recharge-intro { padding-top: 72px; padding-bottom: 56px; }
.recharge-intro h1 { font-size: clamp(38px, 4.1vw, 58px); font-weight: 900; letter-spacing: -.045em; line-height: 1.18; margin: 21px 0 15px; }
.recharge-intro h1 em { font-style: normal; background: linear-gradient(135deg, #4facfe 10%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.recharge-intro p { color: var(--brand-muted); font-size: 15px; margin: 0; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 475px;
}
.hero:before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 55% 42% at 27% 53%, rgba(79, 172, 254, .11), transparent 70%),
              radial-gradient(ellipse 31% 40% at 78% 25%, rgba(167, 139, 250, .07), transparent 72%);
  pointer-events: none;
}
.eyebrow, .section-kicker, .checkout-overline, .dialog-kicker { color: var(--brand-blue); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.eyebrow-line { background: var(--brand-blue); }
.hero h1 { font-weight: 900; letter-spacing: -.045em; }
.hero h1 em, .account-intro h1 em {
  color: var(--brand-blue);
  background: linear-gradient(135deg, #4facfe 10%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy>p { color: var(--brand-muted); }
.hero-assurances { color: #96a9c9; }
.hero-assurances b { color: var(--brand-blue); font-family: "JetBrains Mono", ui-monospace, monospace; }
.hero-panel { background: #161b27; border: 1px solid #2e4060; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); }
.hero-panel:before { border-color: rgba(79, 172, 254, .15); }
.panel-top { color: var(--brand-text); }
.route-node { border-color: #415a7d; color: #8fa8ca; }
.route-node.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #08111e; }
.route-line:not(:nth-of-type(4)):before { background: #415a7d; }
.route-line small { color: #8fa5c4; }
.panel-foot { background: #1c2336; color: #9fb4d2; border-top: 1px solid #2e4060; }
.panel-foot .signal-dot { background: var(--brand-green); }

.purchase-section { background: var(--brand-panel); border-color: #1e2d44; }
.section-heading h2, .faq-layout h2 { font-weight: 800; }
.section-heading p, .faq-layout>div:first-child>p { color: var(--brand-muted); }
.heading-note { color: #8fa5c4; }
.heading-note strong { color: var(--brand-text); }
.recharge-form { background: var(--brand-card); border: 1px solid #2a3b59; border-radius: 14px; padding: 32px; }
.recharge-form label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.recharge-form label span { font-size: 11px; color: var(--brand-muted); font-weight: 500; }
.amount-input-wrap { display: flex; align-items: center; gap: 14px; width: 100%; height: 80px; padding: 0 24px; background: #101a29; border: 1px solid #405778; border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.amount-input-wrap:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(79,172,254,.13); }
.amount-input-wrap>span { font-size: 27px; font-weight: 700; color: var(--brand-blue); }
.amount-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--brand-text); font-size: clamp(27px, 3.2vw, 39px); font-weight: 700; letter-spacing: -.04em; }
.amount-input-wrap input::placeholder { color: #627692; font-size: 22px; font-weight: 500; letter-spacing: 0; }
.recharge-form>p { margin: 11px 0 29px; color: #a4b4cb; font-size: 11px; line-height: 1.7; }
.credit-preview { border-top: 1px solid #344361; margin-top: 27px; padding-top: 26px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.credit-preview>div { display: flex; flex-direction: column; gap: 8px; }
.credit-preview>div span { color: var(--brand-muted); font-size: 12px; }
.credit-preview strong { color: var(--brand-blue); font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -.05em; }
.credit-unit { color: #c6d9ed; font-size: 14px; font-weight: 700; padding-bottom: 4px; }
.plan-card { background: var(--brand-card); border-color: #2a3b59; box-shadow: none; border-radius: 14px; }
.plan-card:hover { border-color: var(--brand-blue); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.plan-card.selected { background: #182a40; border-color: var(--brand-blue); box-shadow: 0 0 0 1px rgba(79,172,254,.18), 0 15px 40px rgba(0,0,0,.17); }
.plan-eyebrow, .plan-price, .plan-price span, .plan-note { color: #a3b4cd; }
.plan-name, .plan-price strong { color: var(--brand-text); }
.plan-check { border-color: #52698a; }
.selected .plan-check { background: var(--brand-blue); border-color: var(--brand-blue); color: #07121e; }
.plan-credits { color: var(--brand-blue); }
.plan-feature-list { border-color: #344361; }
.feature-line { color: #b1bfd2; }
.plan-recommended { background: #276ca6; }
.demo-note { color: #92a4be; }
.explain-card { background: #1c2336; border-color: #2a3b59; }
.explain-icon { color: var(--brand-blue); background: #243951; }
.explain-card p { color: #a7b6cd; }
.explain-card a, .account-page-link { color: var(--brand-blue); }

.checkout-card { background: #1c2336; border-color: #344765; box-shadow: 0 20px 50px rgba(0,0,0,.2); border-radius: 14px; }
.checkout-account-link { display: block; text-align: center; color: var(--brand-blue); font-size: 11px; font-weight: 600; margin-top: 20px; }
.checkout-account-link:hover { color: #a0d4ff; }
.lock-icon, .checkout-sub, .account-box span, .summary-detail, .checkout-tip, .terms-consent label { color: #9aabc8; }
.account-box { background: #222e43; border: 1px solid #2e4060; }
.account-avatar { background: #294664; color: var(--brand-blue); }
.summary-detail strong { color: var(--brand-text); }
.summary-divider { border-color: #415272; }
.summary-total, .summary-total div { color: var(--brand-text); }
.primary-button { background: var(--brand-blue); color: #07121e; border-radius: 10px; }
.primary-button:hover { background: #82c4ff; }
.primary-button:focus-visible, .plan-card:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #a78bfa; }
.terms-consent input { accent-color: var(--brand-blue); }
.terms-consent a { color: var(--brand-blue); }

.billing-section { background: var(--brand-bg); }
.api-chip { color: #a3c8f1; border-color: #2e4060; background: #19263a; }
.api-chip span { background: var(--brand-green); }
.metric-card, .records-card { background: var(--brand-card); border-color: #2a3b59; }
.metric-label, .metric-card p, .records-top p, .empty-records p { color: #a4b4cb; }
.metric-label span { color: #719ac7; }
.metric-value { color: var(--brand-blue); }
.record-tabs { background: #111b2a; }
.record-tabs button { color: #9aabc8; }
.record-tabs button[aria-selected="true"] { background: #2b4261; color: #d2eaff; box-shadow: none; }
.record-head { background: #202b40; color: #b2c1d5; border-color: #344361; }
.empty-orbit { border-color: #385678; color: var(--brand-blue); }
.empty-records strong { color: #c2d2e7; }

.faq-section { background: #161b27; }
.faq-list, .faq-list details { border-color: #2e4060; }
.faq-list summary span { color: var(--brand-blue); }
.faq-list details p { color: var(--brand-muted); }
.legal-block { border-color: #2e4060; }
.legal-number { color: var(--brand-blue); font-family: "JetBrains Mono", ui-monospace, monospace; }
.legal-block p { color: var(--brand-muted); }
.site-footer { background: #0b0f16; border-top: 1px solid #1e2d44; }
.footer-brand { font-size: 22px; letter-spacing: .01em; }
.footer-brand span { color: var(--brand-blue); }
.footer-top p, .footer-top span, .footer-bottom { color: #8fa3c2; }
.footer-bottom { border-color: #2e4060; }
.compact-footer { border-top: 0; padding-top: 25px; padding-bottom: 25px; }
.compact-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.compact-footer .footer-meta, .compact-footer .footer-links, .compact-footer .record-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.footer-links[hidden], .record-links[hidden] { display: none !important; }
.footer-links a:hover, .record-links a:hover { text-decoration: underline; }
.record-links[hidden], .record-links [hidden] { display: none; }
.record-links a { color: var(--brand-blue); }
.refund-note { margin: 12px 0 0; color: var(--brand-muted); font-size: 11px; line-height: 1.6; }
.refund-note a, .payment-consent a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.payment-consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; color: var(--brand-muted); font-size: 11px; line-height: 1.8; }
.payment-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #58a6ff; }
.payment-method { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #415272; padding: 17px 0 19px; margin-top: 2px; font-size: 11px; color: var(--brand-muted); }
.payment-method strong { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--brand-text); }
.alipay-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #1677ff; color: white; font-size: 12px; font-weight: 700; }
.payment-guidance { margin: 17px 0 18px !important; }
.order-error { padding: 11px 12px; margin: 0 0 14px; border: 1px solid #785467; border-radius: 8px; background: #3b2832; color: #ffd0d3; font-size: 11px; line-height: 1.6; }
.order-error[hidden] { display: none; }
.primary-button:disabled { opacity: .6; cursor: progress; transform: none; }
.payment-result-main { width: min(700px, calc(100% - 36px)); padding-top: 100px; padding-bottom: 110px; }
.payment-result-main h1 { font-size: clamp(35px, 4vw, 48px); margin: 15px 0 10px; }
.payment-result-main>p { color: var(--brand-muted); line-height: 1.7; font-size: 13px; }
.result-card { margin: 33px 0 24px; padding: 26px; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-card); }
.result-card>div { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid #344361; font-size: 12px; }
.result-card>div:last-child { border: 0; }
.result-card span { color: var(--brand-muted); }
.result-card strong { text-align: right; word-break: break-all; }
.result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 12px; }
.result-actions .primary-button { width: auto; min-width: 180px; }
.result-actions a { color: var(--brand-blue); }
.demo-usage-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 30px 0 18px; }
.demo-usage-form label { display: flex; flex-direction: column; gap: 8px; color: var(--brand-muted); font-size: 12px; }
.demo-usage-form input { width: 100%; border: 1px solid var(--brand-border); background: var(--brand-card); color: var(--brand-text); border-radius: 8px; padding: 12px; }
.demo-usage-form button { grid-column: 1 / -1; }
@media (max-width: 600px) { .demo-usage-form { grid-template-columns: 1fr; } }

.order-dialog { background: #1c2336; color: var(--brand-text); box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.order-dialog::backdrop { background: rgba(3,8,16,.78); }
.dialog-close, .dialog-content>p, .dialog-rows span { color: #a4b4cb; }
.dialog-rows, .dialog-rows>div { border-color: #344361; }
.dialog-rows strong { color: var(--brand-text); }
.dialog-warning { background: #24344c; color: #b4c9e3; }
.disabled-payment, .disabled-payment:hover { background: #476687; color: #d5e3f4; }
.toast { background: #294664; color: #e2e8f0; }

/* The local API-account prototype uses the same palette, while its data flow stays unchanged. */
.account-intro p, .panel-heading p, .source-note, .usage-placeholder p, .key-row small, .key-empty { color: #a4b4cb; }
.account-status { background: #1b2a40; border-color: #344b6b; color: #b9d6f5; }
.account-status.error { background: #3b2832; border-color: #744757; color: #ffd0d3; }
.account-status.success { background: #1a352c; border-color: #366d53; color: #a9f2c7; }
.account-status a { color: var(--brand-blue); text-decoration: underline; }
.account-panel { background: var(--brand-card); border-color: #2a3b59; }
.source-grid div { background: #243149; }
.source-grid span, .create-key-form label, .key-id { color: #9eb2cf; }
.source-grid strong { color: var(--brand-blue); }
.create-key-form input { background: #131e2e; color: var(--brand-text); border-color: #405778; }
.create-key-form input::placeholder { color: #8295b1; }
.create-key-form button { background: var(--brand-blue); border-color: var(--brand-blue); color: #07121e; }
.key-list, .key-row { border-color: #344361; }
.key-row button { background: #422936; border-color: #70465a; color: #ffc8d2; }
.created-key-value { background: #131e2e; border-color: #405778; color: #c8e3fc; }
.ledger-stack { display: grid; gap: 18px; }
.ledger-panel .panel-heading { margin-bottom: 10px; }
.ledger-list { color: var(--brand-muted); font-size: 12px; min-height: 48px; }
.ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-top: 1px solid #344361; color: var(--brand-text); }
.ledger-row strong { display: block; font-size: 13px; }
.ledger-row small { display: block; color: var(--brand-muted); font-size: 11px; line-height: 1.6; margin-top: 5px; }
.ledger-side { text-align: right; flex: 0 0 auto; }
.ledger-side .ledger-positive { color: var(--brand-green); }
.ledger-side .ledger-negative { color: #ffb3a9; }
.ledger-more { border: 1px solid var(--brand-border); border-radius: 8px; background: #243149; color: var(--brand-text); padding: 9px 14px; margin-top: 12px; }
.ledger-more[hidden] { display: none; }
.account-tabs { display: none; gap: 6px; margin: 0 0 24px; padding: 4px; background: #19263a; border: 1px solid var(--brand-border); border-radius: 10px; }
.account-tabs a { flex: 1; text-align: center; padding: 10px 6px; color: var(--brand-muted); font-size: 12px; font-weight: 700; border-radius: 7px; }
.account-tabs a.active { background: #294664; color: var(--brand-text); }
@media (max-width: 800px) { .account-tabs { display: flex; } }
@media (max-width: 600px) { .ledger-row { align-items: flex-start; flex-direction: column; gap: 8px; } .ledger-side { text-align: left; } }

@media (max-width: 800px) {
  .header-inner { height: 64px; }
  .hero { min-height: 0; }
}
@media (max-width: 600px) {
  .brand-word { font-size: 16px; }
  .brand-caption { font-size: 11px; }
  .hero h1 { font-size: 37px; }
  .recharge-intro { padding-top: 52px; padding-bottom: 45px; }
  .recharge-intro h1 { font-size: 37px; }
  .recharge-form { padding: 22px; }
  .amount-input-wrap { height: 70px; padding: 0 17px; }
  .amount-input-wrap input::placeholder { font-size: 17px; }
}