:root { color-scheme: dark; --bg: #0c0d1d; --panel: #141528; --panel-raised: #1a1b31; --line: #2a2d48; --text: #f6f4ff; --muted: #989ab2; --purple: #7c3aed; --purple-soft: #a78bfa; --orange: #ff7818; --danger: #e95661; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--purple-soft); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 0 max(18px, calc((100% - 1120px) / 2)); border-bottom: 1px solid #202239; background: #0d0e20; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--purple-soft); font-size: 17px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #555074; border-radius: 50%; color: #fff; font-size: 10px; letter-spacing: 0; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.main-nav a { padding: 18px 10px 15px; border-bottom: 2px solid transparent; color: #d8d6e7; text-decoration: none; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { border-bottom-color: var(--purple); color: #fff; }
.service-main { width: min(760px, calc(100% - 32px)); margin: 0 auto; }
.page-section { padding: 58px 0 72px; }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { margin: 0 0 5px; font-size: clamp(28px, 4vw, 36px); letter-spacing: 0; }
.page-heading p, .panel-copy, .field-hint { margin: 0; color: var(--muted); }
.panel { margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2, .credential-form h2, .paths-panel h2 { margin: 0; font-size: 16px; }
.panel-kicker { color: var(--muted); font-size: 12px; font-weight: 500; }
.health-badge, .status-pill { padding: 4px 9px; border: 1px solid #413b65; border-radius: 999px; color: var(--purple-soft); font-size: 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-card { display: grid; min-height: 124px; grid-template-rows: auto auto auto 1fr; gap: 1px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-raised); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.plan-card:hover, .plan-card.selected { border-color: var(--purple); box-shadow: 0 0 0 1px rgba(124, 58, 237, .24); }
.plan-card strong { font-size: 13px; font-weight: 600; }
.plan-card span { font-size: 23px; font-weight: 800; line-height: 1.25; }
.plan-card b { color: var(--orange); font-size: 15px; }
.plan-card small { align-self: end; color: var(--muted); }
.purchase-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.purchase-bar div { display: grid; gap: 2px; } .purchase-bar strong { font-size: 16px; } .purchase-bar small { color: var(--muted); }
label { display: grid; gap: 7px; margin: 16px 0; color: #dedbec; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #343751; border-radius: 10px; padding: 12px 13px; background: #17182b; color: var(--text); font: inherit; }
input { min-height: 46px; } textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #6f718a; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(167, 139, 250, .45); border-color: var(--purple-soft); }
button { min-height: 44px; border: 0; border-radius: 9px; padding: 10px 17px; background: var(--purple); color: #fff; cursor: pointer; font: inherit; font-weight: 750; }
button:hover { background: #6d28d9; } button:disabled { cursor: not-allowed; opacity: .45; }
.credential-form button[type="submit"], .recharge-panel > button { width: 100%; }
.result { display: block; min-height: 1.6em; margin-top: 14px; white-space: pre-wrap; color: #c4b5fd; } .result.error { color: #ff8d94; }
.credential-panel { margin-top: 16px; padding: 16px; border: 1px solid #4c3f83; border-radius: 10px; background: #1b1934; }
.credential-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--purple-soft); font-weight: 750; } .credential-heading small { color: var(--muted); font-weight: 500; }
.credential-value { display: block; margin: 11px 0 14px; padding: 11px; overflow-wrap: anywhere; border: 1px solid #40385f; border-radius: 7px; background: #101122; color: #fff; font-size: 13px; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .secondary-button { background: #4c3e8b; } .secondary-button:hover { background: #5b4aae; }
.button-link { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 15px; border: 1px solid #554b79; border-radius: 9px; color: #e7ddff; font-weight: 750; text-decoration: none; }
.account-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #252740; }
.how-it-works { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; margin-top: 18px; padding: 15px 2px; color: var(--muted); }
.how-it-works strong { color: var(--text); } .how-it-works a { font-weight: 700; text-decoration: none; } .step-number { color: var(--orange); font-weight: 800; }
.heading-note { margin-top: 4px !important; color: #e7a5aa !important; font-size: 12px; }
.purchase-guide { border-color: #403568; background: #17152b; }
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.channel-card { display: grid; gap: 4px; min-height: 98px; padding: 14px; border: 1px solid var(--line); background: var(--panel-raised); text-align: left; }
.channel-card strong { color: var(--text); } .channel-card span { color: var(--muted); font-size: 12px; font-weight: 500; }
.channel-card:hover { border-color: var(--purple-soft); background: #211d3b; }
.account-panel, .usage-panel, .model-panel, .config-workspace, .paths-panel { margin-top: 18px; }
.account-title { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .account-title h2 { margin: 0; font-size: 17px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.metric { display: grid; gap: 3px; place-items: center; min-height: 92px; border: 1px solid var(--line); border-radius: 11px; background: #191a2d; } .metric span { color: var(--muted); } .metric strong { font-size: 21px; } .metric-used strong { color: var(--orange); } .metric-left { border-color: #42356d; background: #201b3c; } .metric-left strong { color: var(--purple-soft); }
.account-meta { margin: 18px 0 0; } .account-meta div, .path-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #252740; } .account-meta div:last-child { border-bottom: 0; }
.account-meta dt, .account-meta dd { margin: 0; } .account-meta dt { color: var(--muted); } .account-meta dd { text-align: right; }
.usage-table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; white-space: nowrap; } th, td { padding: 11px 8px; border-bottom: 1px solid #252740; text-align: left; } th { color: var(--muted); font-size: 12px; font-weight: 500; } td:last-child { color: var(--orange); text-align: right; } th:nth-child(n+3), td:nth-child(n+3) { text-align: right; }
.pagination { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 16px; color: var(--muted); } .pagination div { display: flex; align-items: center; gap: 10px; } .page-button { min-height: 34px; padding: 5px 10px; border: 1px solid var(--line); background: transparent; color: #ddd9ed; font-size: 12px; font-weight: 500; }
.config-readiness { margin-top: 18px; padding: 12px 14px; border: 1px solid #393259; border-radius: 10px; background: #17162b; color: #c7bdf0; font-size: 13px; }
.endpoint-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: #1d1e30; } .endpoint-tab { min-height: 40px; background: transparent; color: var(--muted); } .endpoint-tab.active { background: #f7f7fb; color: #151525; } .endpoint-tab:disabled { cursor: not-allowed; opacity: .38; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; } .light-button { background: #f5f4fa; color: #161626; } .light-button:hover { background: #ddd9ec; } .dark-button { background: #2b2156; color: #cabdff; } .dark-button:hover { background: #3d2d75; }
.light-button:disabled, .dark-button:disabled { background: #2a2b3b; color: #77798b; }
.config-preview { max-height: 340px; overflow: auto; margin: 0; padding: 16px; border: 1px solid #262941; border-radius: 9px; background: #080912; color: #d9d5eb; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .model-item { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); } .model-item-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .model-item strong { font-size: 13px; } .model-item code { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; } .model-detail { color: var(--muted); font-size: 11px; }
.install-tip { display: grid; gap: 2px; margin-top: 14px; padding: 11px 12px; border: 1px solid #4b3d7e; border-radius: 8px; background: #211c40; color: #cfc5f7; font-size: 12px; }
.input-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.text-button { min-height: auto; padding: 0; background: transparent; color: #b7b9cc; font-size: 12px; font-weight: 600; } .text-button:hover { background: transparent; color: #fff; } .danger-text { color: #ff9299; }
.check-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #d5d3e4; font-size: 12px; font-weight: 500; } .check-label input { width: auto; min-height: auto; accent-color: var(--purple); }
.freeze-results .panel-heading { align-items: flex-start; } .freeze-results .panel-heading > div:first-child { display: grid; gap: 3px; }
.freeze-list { display: grid; gap: 10px; }
.freeze-item { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); } .freeze-item.selected { border-color: #5443a0; background: #1d1a36; }
.freeze-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .freeze-item-title { display: flex; align-items: flex-start; gap: 9px; min-width: 0; } .freeze-item-title input { width: auto; min-height: auto; margin-top: 3px; accent-color: var(--purple); } .freeze-item-title code { overflow-wrap: anywhere; color: #e9e5f8; font-size: 12px; }
.freeze-status { flex: 0 0 auto; padding: 2px 7px; border: 1px solid #3d4160; border-radius: 999px; color: #adb0c2; font-size: 11px; } .freeze-status.active { border-color: #38795a; color: #8ae0ae; } .freeze-status.frozen { border-color: #55596e; color: #a2a5b4; } .freeze-status.expired { border-color: #82532f; color: #f4ad71; }
.freeze-item-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; } .freeze-metric { display: grid; gap: 2px; padding: 9px; border: 1px solid #2b2e48; border-radius: 8px; background: #111222; text-align: center; } .freeze-metric span { color: var(--muted); font-size: 11px; } .freeze-metric strong { font-size: 15px; } .freeze-meta { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.path-row span { color: var(--muted); } .path-row code { color: #ddd7f4; text-align: right; overflow-wrap: anywhere; }
.danger-button { background: var(--danger); } .danger-button:hover { background: #c9404d; }
.admin-section { border-top: 1px solid var(--line); } .two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .dashboard-result { max-height: 300px; overflow: auto; margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #080912; color: #d9d5eb; font-size: 12px; white-space: pre-wrap; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 35px; border-top: 1px solid #202239; color: var(--muted); font-size: 12px; } .site-footer a { text-decoration: none; }
.hidden { display: none !important; }

/* The documentation keeps a quieter Yuque-like paper treatment. */
.docs-body { color-scheme: light; background: #f4f7f5; color: #172126; }
.docs-body .topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px max(24px, calc((100vw - 1120px) / 2)); background: #102b2b; color: #f6fbf8; }
.docs-body .brand { display: block; color: inherit; } .docs-body .topbar-right { display: flex; align-items: center; gap: 16px; } .docs-body .status { padding: 6px 10px; border: 1px solid #4b7772; border-radius: 999px; color: #c8f1e6; font-size: 13px; } .docs-body .main-nav a { padding: 6px 8px; border: 0; color: #d6f3ec; font-size: 13px; }
.docs-body .eyebrow { margin: 0 0 6px; color: #84d8c6; font-size: 12px; } .docs-body .dark-eyebrow { color: #08685f; font-weight: 750; }
.docs-body h1, .docs-body h2, .docs-body h3, .docs-body p { margin-top: 0; } .docs-body h1 { margin-bottom: 0; font-size: clamp(24px, 4vw, 38px); } .docs-body h2 { margin-bottom: 8px; font-size: 22px; } .docs-body h3 { margin-bottom: 16px; font-size: 17px; }
.docs-body .docs-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: 42px; align-items: start; width: min(1050px, calc(100% - 32px)); margin: 0 auto; } .docs-body .docs-index { position: sticky; top: 24px; display: grid; gap: 8px; padding: 18px 0; } .docs-body .docs-index a { color: #08685f; font-size: 14px; text-decoration: none; } .docs-body .docs-index a:hover { text-decoration: underline; } .docs-body .docs-article { min-width: 0; }
.docs-body .doc-section { padding: 36px 0; border-bottom: 1px solid #dce4e3; scroll-margin-top: 20px; } .docs-body .doc-section h2 { font-size: 25px; } .docs-body .doc-section h3 { margin: 24px 0 6px; } .docs-body .doc-section li { margin: 7px 0; } .docs-body .callout { margin-top: 18px; padding: 14px 16px; border-left: 3px solid #f2b544; background: #fffdf5; } .docs-body .muted { color: #6b777b; } .docs-body .doc-footer { padding: 28px 0 50px; color: #6b777b; font-size: 13px; }
.docs-body code { padding: 1px 4px; border-radius: 4px; background: #e8efec; color: #29433f; font-size: .92em; }

@media (max-width: 760px) { .site-header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 14px 16px 0; } .main-nav { justify-content: flex-start; width: 100%; } .main-nav a { padding: 8px 8px 11px; } .page-section { padding-top: 40px; } .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .model-list { grid-template-columns: 1fr; } .channel-grid { grid-template-columns: 1fr; } .how-it-works { grid-template-columns: auto auto; } .how-it-works span:nth-child(3) { grid-column: 1 / -1; } .how-it-works a { grid-column: 1 / -1; } .two-column { grid-template-columns: 1fr; } .docs-body .topbar { align-items: flex-start; flex-direction: column; padding: 22px 16px; } .docs-body .topbar-right { align-items: flex-start; flex-direction: column; } .docs-body .docs-layout { grid-template-columns: 1fr; gap: 0; } .docs-body .docs-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 20px; } .docs-body .docs-index strong { grid-column: 1 / -1; } }
@media (max-width: 480px) { .service-main { width: min(100% - 24px, 760px); } .panel { padding: 18px; } .plan-card { padding: 12px; } .purchase-bar, .pagination { align-items: flex-start; flex-direction: column; } .purchase-bar button { width: 100%; } .metric-grid { gap: 6px; } .metric { min-height: 82px; } .metric strong { font-size: 17px; } .metric span { font-size: 12px; } .action-grid { grid-template-columns: 1fr; } .path-row { align-items: flex-start; flex-direction: column; gap: 4px; } .path-row code { text-align: left; } .site-footer { align-items: flex-start; flex-direction: column; } }