:root { --ink:#11284d; --muted:#5d7191; --line:#dce6f1; --surface:#fff; --bg:#f4f7fb; --teal:#04968e; --blue:#3478f6; --red:#d44e65; font-family: Inter, "Microsoft YaHei", Arial, sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box } body { margin:0; min-width:320px; } button,input,textarea,select { font:inherit } button { cursor:pointer }
.shell { min-height:100vh; padding:20px; background: radial-gradient(circle at 12% 7%, #dff5f3 0, transparent 25%), radial-gradient(circle at 91% 11%, #fff0e7 0, transparent 22%), var(--bg); }
.frame { max-width:1240px; margin:auto; border-radius:24px; background:rgba(255,255,255,.76); box-shadow:0 24px 55px rgba(37,62,99,.13); padding:22px; }
.brand { display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.3px; } .brand-mark { width:29px; height:29px; border-radius:8px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#009f98,#3478f6); box-shadow:0 5px 12px #96d9d5; }
.topbar { height:44px; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.admin-link,.minor { color:var(--muted); text-decoration:none; font-size:13px; border:1px solid var(--line); padding:8px 12px; border-radius:8px; background:white }.admin-link:hover { color:var(--teal); border-color:#a9dcd8 }
.hero { text-align:center; padding:36px 24px 22px; border:1px solid #d9e8eb; border-radius:18px; background:linear-gradient(100deg,rgba(213,244,241,.78),rgba(255,255,255,.9) 46%,rgba(255,239,228,.75)); }.eyebrow { color:var(--teal); font-size:12px; letter-spacing:1.7px; font-weight:800; }.hero h1 { font-size:32px; margin:12px 0 8px; letter-spacing:0; }.hero p { margin:0; color:var(--muted); font-size:14px }
.inventory { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; margin-top:20px; border:1px solid #dce8f0; border-radius:14px; background:rgba(255,255,255,.82); }.stock { padding:9px; border-right:1px solid #e6edf3; }.stock:last-child { border:0 }.stock-name { color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-size:11px; font-weight:800 }.stock-number { font-size:28px; font-weight:800; margin:4px 0 }.stock-caption { color:#7890ae; font-size:12px }
.panel { margin-top:16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.92); padding:22px; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }.section-label { color:var(--teal); font-size:12px; font-weight:800; }.panel h2 { font-size:19px; margin:6px 0; }.panel p { color:var(--muted); font-size:13px; margin:0; }.pills { display:flex; gap:7px; flex-wrap:wrap }.pill { font-size:12px; padding:7px 10px; color:#147b79; background:#f0f9f8; border:1px solid #cfe9e6; border-radius:99px }
label { display:block; font-size:13px; font-weight:650; margin:20px 0 8px; }.textarea { width:100%; min-height:180px; resize:vertical; border:1px solid #cedae6; border-radius:12px; padding:14px; color:var(--ink); outline:none; background:#fbfcfe; line-height:1.7 }.textarea:focus,input:focus,select:focus { border-color:#4e94fa; box-shadow:0 0 0 3px rgba(78,148,250,.12); outline:0 }.action-row { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:16px; }.action-note { display:flex; flex-direction:column; gap:5px; min-width:0 }.action-buttons { display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap }.support-qq { color:#8a9aaf; font-size:11px; line-height:1.2 }.support-link { color:#6f829d; text-decoration:none; overflow-wrap:anywhere }.support-link:hover { color:var(--teal); text-decoration:underline }.check { color:var(--muted); font-size:13px; display:flex; gap:8px; align-items:center }.check input { accent-color:var(--blue) }.primary { border:0; padding:11px 19px; color:white; background:var(--blue); border-radius:9px; box-shadow:0 8px 15px rgba(52,120,246,.22); font-weight:700; }.primary:hover { background:#246be7 }.primary:disabled { opacity:.6; cursor:not-allowed }.results { margin-top:18px; border-top:1px solid var(--line); padding-top:16px }.result-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #eef2f6; font-size:13px }.result-key { font-family:ui-monospace,Consolas,monospace }.status { border-radius:99px; padding:4px 8px; font-size:11px; font-weight:700 }.success { background:#e7f8ef; color:#147a4b }.invalid,.used,.expired,.empty { background:#fff0f2; color:#b93c54 }.download { display:inline-flex; align-items:center; gap:7px; color:white; text-decoration:none; padding:10px 14px; background:var(--teal); border-radius:8px; font-size:13px; font-weight:700 }.download[hidden] { display:none }.action-download { margin:0; white-space:nowrap }
.toast { position:fixed; right:22px; bottom:22px; color:white; padding:12px 15px; background:#17345a; border-radius:9px; box-shadow:0 12px 24px #17345a44; transform:translateY(100px); opacity:0; transition:.25s; z-index:5 }.toast.show { opacity:1; transform:none }.toast.error { background:#b93c54 }
.admin-shell { min-height:100vh; background:#f3f6fb; display:grid; grid-template-columns:244px 1fr; }.sidebar { background:#102a4c; color:#d5e2f3; padding:22px 14px; }.sidebar .brand { color:white; margin:0 8px 33px }.sidebar a { display:flex; gap:10px; align-items:center; padding:11px 12px; color:#c5d5e8; text-decoration:none; border-radius:7px; font-size:14px; margin:4px 0 }.sidebar a.active,.sidebar a:hover { color:#fff; background:#1c416d }.sidebar .logout { margin-top:24px; width:100%; color:#d5e2f3; background:none; border:0; padding:11px 12px; text-align:left }.workspace { padding:30px; max-width:1280px; width:100%; margin:auto }.workspace-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px }.workspace h1 { margin:0; font-size:25px }.workspace-header p { margin:5px 0 0; color:var(--muted); font-size:13px }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }.metric { background:white; border:1px solid #e0e8f1; border-radius:10px; padding:17px }.metric span { color:var(--muted); font-size:13px }.metric b { display:block; font-size:27px; margin-top:8px }.view { display:none }.view.active { display:block }.admin-panel { background:white; border:1px solid #e0e8f1; border-radius:10px; padding:20px; margin-top:16px }.admin-panel h2 { font-size:17px; margin:0 0 5px }.admin-panel p { color:var(--muted); font-size:13px; margin:0 }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px }.field input,.field select { width:100%; border:1px solid #cedae6; border-radius:7px; padding:10px; background:white }.field.full { grid-column:1/-1 }.button-row { margin-top:18px; display:flex; gap:10px; align-items:center }.secondary { padding:10px 14px; color:#2d5f95; background:#f1f7fd; border:1px solid #cce0f5; border-radius:7px; font-weight:650 }.table-wrap { overflow:auto; margin-top:15px }.table { width:100%; border-collapse:collapse; min-width:580px; font-size:13px }.table th { text-align:left; color:#6f8098; background:#f7f9fc; font-weight:650 }.table th,.table td { padding:11px; border-bottom:1px solid #eaf0f5 }.type-card { display:grid; grid-template-columns:1.15fr .8fr 1fr auto; gap:10px; align-items:end; padding:13px 0; border-bottom:1px solid #edf2f6 }.type-card input,.type-card select { width:100%; border:1px solid #cedae6; padding:9px; border-radius:7px }.type-card label { margin:0 0 5px; font-size:11px; color:var(--muted) }.icon-button { height:36px; width:36px; color:var(--red); border:1px solid #f0cbd2; background:#fff5f6; border-radius:7px; font-size:19px }.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 15% 15%,#dff5f3,transparent 30%),#f3f6fb }.login-box { width:min(410px,100%); background:white; padding:32px; border-radius:14px; box-shadow:0 20px 60px #233b6420 }.login-box h1 { font-size:24px; margin:25px 0 5px }.login-box p { color:var(--muted); font-size:13px }.login-box input { width:100%; border:1px solid #cedae6; border-radius:8px; padding:11px; margin-top:8px }.login-box .primary { width:100%; margin-top:20px }.login-error { color:var(--red); font-size:13px; min-height:20px; margin-top:10px }
.list-filter { display:grid; grid-template-columns:1.5fr repeat(3,minmax(120px,.8fr)) auto; gap:0 12px; align-items:end; margin-top:14px; }.list-filter label { margin:0; color:var(--muted); font-size:12px; }.list-filter input,.list-filter select { width:100%; margin-top:6px; border:1px solid #cedae6; border-radius:7px; padding:9px; background:white; }.list-filter .button-row { margin:0; align-self:end; }.list-filter .primary,.list-filter .secondary { padding:9px 13px; white-space:nowrap; }.pager { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; color:var(--muted); font-size:13px; }.pager div { display:flex; align-items:center; gap:10px; }.pager strong { color:var(--ink); min-width:54px; text-align:center; }.pager button:disabled { opacity:.45; cursor:not-allowed; }
.extract-progress { margin-top:16px; padding:12px 0 2px; }.progress-meta { display:flex; justify-content:space-between; gap:12px; color:#627085; font:600 12px/1.4 ui-monospace,Consolas,monospace; }.progress-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.progress-meta strong { color:#1c3049; white-space:nowrap; }.progress-track { height:7px; margin-top:8px; overflow:hidden; border-radius:4px; background:#e6edf5; }.progress-fill { width:0; height:100%; border-radius:inherit; background:#16a085; transition:width .22s ease; }
@media (max-width:760px) { .shell { padding:10px }.frame { padding:14px; border-radius:16px }.hero { padding:26px 14px 15px }.hero h1 { font-size:27px }.inventory { grid-template-columns:1fr }.stock { border-right:0; border-bottom:1px solid #e6edf3 }.panel { padding:16px }.panel-head,.action-row { align-items:stretch; flex-direction:column }.action-buttons { width:100%; flex-direction:column-reverse; align-items:stretch }.action-download { justify-content:center; width:100% }.primary { width:100% }.admin-shell { display:block }.sidebar { padding:14px; display:flex; align-items:center; gap:8px; overflow:auto }.sidebar .brand { margin:0 12px 0 0; white-space:nowrap }.sidebar a { margin:0; white-space:nowrap }.sidebar .logout { margin:0; width:auto; white-space:nowrap }.workspace { padding:20px 14px }.grid { grid-template-columns:1fr }.form-grid,.list-filter { grid-template-columns:1fr }.list-filter { gap:12px }.list-filter .button-row,.pager,.pager div { align-items:stretch; flex-direction:column }.list-filter .primary,.list-filter .secondary,.pager button { width:100% }.type-card { grid-template-columns:1fr 1fr }.type-card .groups { grid-column:1/-1 }.topbar { margin-bottom:8px } }

.mini-json { max-width:520px; max-height:180px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:8px 0 0; padding:8px; border:1px solid #e6edf3; border-radius:7px; background:#f8fafc; color:#5d7191; font:11px/1.45 ui-monospace,Consolas,monospace; }
.muted { color:#7890ae; font-size:12px; margin-top:3px; }

.tab-row { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 4px; }
.tab-button { padding:9px 14px; border:1px solid #cce0f5; border-radius:999px; color:#2d5f95; background:#f1f7fd; font-weight:700; }
.tab-button.active { color:white; background:#3478f6; border-color:#3478f6; box-shadow:0 8px 15px rgba(52,120,246,.18); }
.batch-summary { grid-template-columns:repeat(6,minmax(120px,1fr)); margin-top:14px; }
@media (max-width:900px) { .batch-summary { grid-template-columns:repeat(2,minmax(120px,1fr)); } }
.hidden { display:none !important; }
.field.compact { margin:0; min-width:220px; }
.field .hint { display:block; color:#7890ae; font-size:11px; font-weight:500; margin-top:4px; }
.usage-table { min-width:1420px; table-layout:fixed; }
.usage-table th,.usage-table td { vertical-align:middle; }
.usage-table .col-key { width:150px; }
.usage-table .col-status { width:74px; }
.usage-table .col-account { width:330px; }
.usage-table .col-id { width:82px; }
.usage-table .col-plan { width:72px; }
.usage-table .col-used { width:92px; }
.usage-table .col-window { width:98px; }
.usage-table .col-available { width:96px; }
.usage-table .col-reset { width:150px; }
.usage-table .col-at { width:150px; }
.usage-table .col-detail { width:260px; }
.key-cell code,.account-cell { overflow-wrap:anywhere; word-break:break-word; }
.usage-value { display:inline-flex; min-width:44px; min-height:28px; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; background:#f4f7fb; color:#17345a; font-weight:750; line-height:1.2; text-align:center; }
.usage-value.plan { background:#eef6ff; color:#245f9f; }
.usage-value.used { background:#fff7df; color:#9a6a00; }
.usage-value.window { background:#f2f0ff; color:#5c4ab6; }
.usage-value.ok { background:#e7f8ef; color:#147a4b; }
.usage-value.empty-value { background:transparent; color:#7890ae; }
.time-cell { line-height:1.35; }
.usage-detail { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.usage-message { font-weight:750; color:#17345a; }
.usage-detail details { width:100%; }
.usage-detail summary { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #cce0f5; border-radius:999px; color:#2d5f95; background:#f1f7fd; font-size:12px; font-weight:750; cursor:pointer; }
.usage-detail details[open] summary { border-radius:8px 8px 0 0; }
.usage-detail .mini-json { max-width:100%; max-height:220px; margin-top:0; border-radius:0 8px 8px 8px; }

/* 类型与分组：用卡片和复选标签替代原生多选框，提升可读性和可点选面积。 */
.type-card { grid-template-columns:minmax(170px,1fr) minmax(220px,1.05fr) minmax(120px,.62fr) minmax(360px,1.55fr) 42px; gap:14px; align-items:start; margin:12px 0; padding:16px; border:1px solid #e3ebf5; border-radius:14px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 8px 20px rgba(26,55,94,.04); }
.type-card:hover { border-color:#cddcf0; box-shadow:0 12px 26px rgba(26,55,94,.07); }
.type-card label { margin:0 0 7px; font-size:12px; font-weight:800; color:#647795; }
.type-card input { height:42px; border-radius:10px; background:#fff; }
.type-card .icon-button { margin-top:23px; height:42px; width:42px; border-radius:10px; font-weight:800; }
.group-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; max-height:138px; overflow:auto; padding:9px; border:1px solid #d7e2ee; border-radius:12px; background:#f8fbff; }
.group-option { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"check name" "check stock"; column-gap:8px; row-gap:1px; align-items:center; min-height:46px; margin:0; padding:8px 10px; border:1px solid #e1e9f3; border-radius:10px; background:#fff; color:#17345a; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.group-option:hover { border-color:#bcd3ee; box-shadow:0 4px 12px rgba(52,120,246,.08); }
.group-option.selected { border-color:#8ab8ff; background:#eef6ff; box-shadow:inset 0 0 0 1px rgba(52,120,246,.12); }
.group-option input { grid-area:check; width:15px; height:15px; accent-color:var(--blue); }
.group-option .group-name { grid-area:name; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; font-size:13px; }
.group-option .group-stock { grid-area:stock; color:#7890ae; font-size:12px; font-weight:650; }
.empty-groups { padding:12px; color:#7890ae; font-size:13px; text-align:center; border:1px dashed #ccd9e8; border-radius:10px; background:#fff; }
#group-settings th:last-child,#group-settings td:last-child { width:180px; }
#group-settings select[data-field="liveCheckMode"] { min-width:128px; padding:8px 28px 8px 10px; border:1px solid #cbd8e8; border-radius:9px; background:#fff; color:#17345a; font-weight:750; }
@media (max-width:1040px) { .type-card { grid-template-columns:1fr 1fr 42px; } .type-card .groups,.type-card .type-remark { grid-column:1/-2; } }
@media (max-width:760px) { .type-card { grid-template-columns:1fr; } .type-card .groups { grid-column:auto; } .type-card .icon-button { width:100%; margin-top:0; } .group-picker { grid-template-columns:1fr; max-height:220px; } }

/* 后台登录验证码：题目和输入框并排显示，刷新按钮保持醒目。 */
.captcha-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-top:8px; }
.login-box .captcha-row input { margin-top:0; }
.captcha-refresh { display:inline-flex; align-items:center; gap:8px; min-width:128px; height:42px; justify-content:center; white-space:nowrap; }
#captcha-question { font-weight:800; color:#17345a; }
@media (max-width:420px) { .captcha-row { grid-template-columns:1fr; } .captcha-refresh { width:100%; } }

/* Codex 使用情况：按购买提取码聚合 Sub2API 账号统计，仿 Codex Profile 展示指标和 token 活动热力图。 */
.codex-panel { background:linear-gradient(180deg,#fff,#fbfdff); }
.codex-batch-summary { grid-template-columns:repeat(5,minmax(120px,1fr)); margin-top:14px; }
.codex-card-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:16px; margin-top:16px; }
.codex-card { border:1px solid #e2eaf4; border-radius:18px; padding:18px; background:#fff; box-shadow:0 14px 34px rgba(21,42,73,.06); }
.codex-card.error-card { border-color:#f1cbd3; background:#fff9fa; }
.codex-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.codex-card-head h3,.codex-profile h3 { margin:4px 0; font-size:18px; color:#132b4f; }
.codex-card-head p,.codex-profile p { margin:0; color:#7890ae; font-size:12px; overflow-wrap:anywhere; }
.codex-profile { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center; padding:8px 0 14px; }
.codex-avatar { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; color:white; font-weight:850; font-size:20px; background:linear-gradient(135deg,#4e2e68,#7c5593); box-shadow:0 10px 22px rgba(87,51,111,.18); }
.codex-plan { display:inline-flex; margin-top:7px; padding:3px 9px; border:1px solid #e3e9f0; border-radius:999px; color:#7c8798; font-size:12px; font-weight:750; background:#fff; }
.codex-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:10px 0 14px; border:1px solid #edf1f6; border-radius:15px; overflow:hidden; }
.codex-metric { min-height:70px; display:grid; place-items:center; align-content:center; gap:3px; padding:12px 8px; background:#fff; border-right:1px solid #edf1f6; }
.codex-metric:last-child { border-right:0; }
.codex-metric b { font-size:20px; font-weight:850; color:#1b2637; }
.codex-metric span { color:#7c8798; font-size:12px; font-weight:650; }
.codex-extra { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:8px 0 14px; }
.codex-extra span { padding:5px 9px; border-radius:999px; color:#506783; background:#f4f7fb; font-size:12px; font-weight:750; }
.codex-activity-head { display:flex; justify-content:space-between; align-items:center; margin:12px 0 10px; color:#1b2637; }
.codex-activity-head span { color:#8a95a5; font-size:12px; font-weight:750; }
.codex-heatmap { display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; grid-auto-columns:10px; gap:4px; align-items:center; overflow:visible; padding:5px 2px 12px; }
.codex-day { position:relative; width:10px; height:10px; border-radius:3px; background:#f1f2f4; cursor:help; }
.codex-day:hover { outline:2px solid rgba(35,138,240,.22); outline-offset:2px; z-index:20; }
.codex-day::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); min-width:188px; max-width:260px; padding:9px 11px; border-radius:10px; background:#1f2937; color:#fff; font-size:12px; line-height:1.55; font-weight:650; white-space:pre-line; box-shadow:0 12px 28px rgba(15,23,42,.22); opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.codex-day::before { content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); border:6px solid transparent; border-top-color:#1f2937; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.codex-day:hover::after { opacity:1; transform:translateX(-50%) translateY(-2px); }
.codex-day:hover::before { opacity:1; }
.codex-day.level-1 { background:#cde8ff; }
.codex-day.level-2 { background:#8bc8ff; }
.codex-day.level-3 { background:#4fa7f7; }
.codex-day.level-4 { background:#238af0; }
.codex-raw { margin-top:6px; }
.codex-raw summary { display:inline-flex; padding:6px 10px; border:1px solid #cce0f5; border-radius:999px; color:#2d5f95; background:#f1f7fd; font-size:12px; font-weight:750; cursor:pointer; }
.codex-raw .mini-json { max-width:100%; margin-top:8px; }
.codex-empty { margin-top:14px; padding:24px; text-align:center; color:#7890ae; border:1px dashed #d6e0ec; border-radius:14px; background:#fafcff; }
.codex-message { margin-top:12px !important; color:#b93c54 !important; font-weight:750; }
@media (max-width:980px) { .codex-batch-summary { grid-template-columns:repeat(2,minmax(120px,1fr)); } .codex-card-list { grid-template-columns:1fr; } .codex-stat-grid { grid-template-columns:repeat(2,1fr); } .codex-metric:nth-child(2) { border-right:0; } .codex-metric:nth-child(-n+2) { border-bottom:1px solid #edf1f6; } }
@media (max-width:560px) { .codex-card { padding:14px; } .codex-stat-grid { grid-template-columns:1fr; } .codex-metric { border-right:0; border-bottom:1px solid #edf1f6; } .codex-metric:last-child { border-bottom:0; } }
.codex-limit { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; padding:10px 12px; border:1px solid #e4edf8; border-radius:14px; background:#f8fbff; color:#5c6f89; font-size:12px; font-weight:750; }
.codex-limit span { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:#fff; }
.codex-limit b { color:#183053; }
.codex-limit .ok b { color:#15945d; }
.codex-limit .warning b { color:#a56b00; }
.codex-limit .danger b { color:#c2410c; }
.codex-limit.warning { color:#8a5b00; background:#fff8e6; border-color:#ffe4a3; }