/* CCL Gemini SDK · 蓝白像素风单页控制台
   - 银行卡保持原设计，是视觉重点
   - 像素字体只用于 24px 的标题与大数字；正文用系统字体保证清晰
   - 阶梯圆角像素描边 + 蓝色硬阴影；动效统一用缓出曲线，跟随用户操作 */

@font-face {
  font-family: "Fusion Pixel";
  src: url("/fonts/fusion-pixel-12px-proportional-zh_hans.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #F4F8FF;
  --grid: #E4EDFC;
  --surface: #FFFFFF;
  --tint: #EEF4FF;
  --sky: #DCE8FF;
  --edge: #2A4C9E;
  --ink: #0F2A5C;
  --ink-2: #44608F;
  --ink-3: #8499BD;
  --cobalt: #2F5BFF;
  --cobalt-deep: #1A3BC4;

  --pending: #F0A202;
  --running: #2F8CFF;
  --success: #18B26B;
  --failed: #F04461;

  --pixel: "Fusion Pixel", "PingFang SC", "Microsoft YaHei", monospace;
  --sys: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --din: "DIN Alternate", "DIN Next", Bahnschrift, "Roboto Condensed", "Helvetica Neue", var(--sys);

  --px: 2px;
  --shadow: rgba(42, 76, 158, 0.16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.7 var(--sys);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
[hidden] { display: none !important; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--tint); padding: 1px 5px; color: var(--cobalt-deep); }
.pixel { font-family: var(--pixel); font-weight: 400; -webkit-font-smoothing: none; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
::selection { background: var(--sky); color: var(--ink); }

body[data-state="idle"] .only-active { display: none !important; }
body[data-state="active"] .only-idle { display: none !important; }

/* 阶梯圆角像素描边 */
.panel, .btn, .input, .seg, .plan, .toast, .modal, .endpoint, .code, .lock-msg {
  --o: var(--edge);
  border: 0;
  border-radius: 0;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o);
}

/* ---------- 顶栏 ---------- */
.top { background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-bottom: var(--px) solid var(--edge); position: sticky; top: 0; z-index: 20; }
.top-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--pixel); font-size: 24px; line-height: 24px; color: var(--ink); }
.brand img { transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.top-actions { display: flex; align-items: center; gap: 24px; }
.gw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.gw-dot { position: relative; width: 8px; height: 8px; background: var(--ink-3); }
.gw.is-ok .gw-dot { background: var(--success); }
.gw.is-ok .gw-dot::after { content: ""; position: absolute; inset: 0; background: var(--success); animation: ping 2.4s var(--ease) 1.2s 2; }
.gw.is-bad .gw-dot { background: var(--failed); }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
.top-link { position: relative; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink); text-decoration: none; font-size: 14px; }
.top-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.top-link:hover { color: var(--cobalt); }
.top-link:hover::after { transform: scaleX(1); }

/* ---------- 页面网格与入场 ---------- */
.page {
  max-width: 1200px; margin: 0 auto; padding: 36px 24px 48px;
  display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 36px; align-items: start;
}
.tasks, .docs, .foot { grid-column: 1 / -1; }
.page > * { animation: rise .7s var(--ease) both; }
.page > :nth-child(2) { animation-delay: .08s; }
.page > :nth-child(3) { animation-delay: .16s; }
.page > :nth-child(4) { animation-delay: .24s; }
.page > :nth-child(5) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.panel {
  position: relative; background: var(--surface); padding: 24px; margin: var(--px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    8px 8px 0 0 var(--shadow);
}
.panel > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.h2 { margin: 0; font-family: var(--pixel); font-size: 24px; line-height: 24px; font-weight: 400; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.h2::before { content: ""; width: 8px; height: 8px; background: var(--cobalt); box-shadow: 3px 3px 0 var(--sky); flex: none; }
.note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.optional { color: var(--ink-3); margin-left: 6px; }
.error { margin: 12px 0 0; font-size: 13px; color: var(--failed); animation: shake .4s var(--ease); }
.error:empty { display: none; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ---------- 银行卡（原设计 + 跟随鼠标的立体倾斜） ---------- */
.card-stage { perspective: 1000px; }
.card {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --glare: 0;
  position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 18px; overflow: hidden;
  color: #fff; isolation: isolate; font-family: var(--sys); line-height: 1.4;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  background:
    repeating-radial-gradient(circle at 88% 125%, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at -8% -30%, rgba(255,255,255,.12) 0 1px, transparent 1px 9px),
    linear-gradient(140deg, #B7C1CE 0%, #8D99AB 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 10px 10px 0 0 var(--shadow);
}
.card.is-tilting { transition: transform .08s linear, box-shadow .3s var(--ease); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 14px 16px 0 0 var(--shadow); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s var(--ease);
  background:
    repeating-radial-gradient(circle at 88% 125%, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at -8% -30%, rgba(255,255,255,.09) 0 1px, transparent 1px 9px),
    linear-gradient(140deg, #3158F2 0%, #2346E0 45%, #132A93 100%);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glare); transition: opacity .4s var(--ease);
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.35), transparent 55%);
}
body[data-state="active"] .card::before { opacity: 1; }
.card-shine {
  position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
}
.card.is-activating .card-shine { animation: shine 1.1s var(--ease) .15s both; }
.card.is-activating { animation: card-pop .7s var(--spring); }
@keyframes shine { to { transform: translateX(120%); } }
@keyframes card-pop { 40% { transform: scale(1.03); } }
.card-face { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-issuer { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; opacity: .92; }
.chip { width: 40px; height: 30px; fill: rgba(255,255,255,.22); stroke: rgba(255,255,255,.7); stroke-width: 1.2; }
.card .num { font-family: var(--din); }
.card-code { font-size: 21px; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.card-bottom { align-items: flex-end; }
.card-label { font-size: 12px; opacity: .75; }
.card-balance { font-size: 40px; line-height: 1; margin-top: 4px; }
.card-right { text-align: right; }
.card-frozen { font-size: 20px; line-height: 1; margin-top: 4px; opacity: .9; }

/* ---------- 激活 ---------- */
.activate { margin-top: 36px; animation: rise .5s var(--ease) both; }
.activate-row { display: flex; gap: 14px; padding: 0 var(--px); }
.code-input { letter-spacing: 0.08em; font-family: var(--din); font-size: 16px; }
.check { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.check input { appearance: none; position: relative; width: 16px; height: 16px; margin: 0; background: var(--surface); border: var(--px) solid var(--edge); cursor: pointer; transition: background .2s var(--ease); }
.check input::after { content: ""; position: absolute; inset: 2px; background: var(--surface); transform: scale(0); transition: transform .25s var(--spring); }
.check input:checked { background: var(--cobalt); border-color: var(--cobalt); }
.check input:checked::after { transform: scale(1); background: var(--cobalt); box-shadow: inset 0 0 0 2px #fff; }

/* ---------- 任务概况：24 格血条 ---------- */
.queue { margin-top: 36px; animation: rise .5s var(--ease) both; }
.queue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.queue-bar {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; padding: 5px;
  background: var(--edge); box-shadow: 6px 6px 0 0 var(--shadow);
}
.queue-bar i { height: 14px; background: #3D5FB0; }
.queue-bar i.c-pending { background: var(--pending); }
.queue-bar i.c-running { background: var(--running); }
.queue-bar i.c-success { background: var(--success); }
.queue-bar i.c-failed { background: var(--failed); }
.queue-bar.is-filling i { animation: cell-in .35s var(--spring) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes cell-in { from { transform: scaleY(.2); opacity: .2; } }
.queue-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 0; }
.queue-stats dt { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.queue-stats dd { margin: 4px 0 0; font-family: var(--pixel); font-size: 24px; line-height: 24px; }
.sw { width: 8px; height: 8px; display: inline-block; }
.sw-pending { background: var(--pending); } .sw-running { background: var(--running); }
.sw-success { background: var(--success); } .sw-failed { background: var(--failed); }

/* ---------- 输入 ---------- */
.input {
  display: block; width: 100%; height: 44px; padding: 0 14px; margin: 0;
  background: var(--surface); color: var(--ink); outline: none; font-size: 14px;
  --o: #9DB2DC;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    0 0 0 0 transparent;
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.input:hover { --o: var(--ink-2); }
.input::placeholder { color: var(--ink-3); }
.input:focus {
  --o: var(--cobalt);
  background: #FBFCFF;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    0 0 0 6px rgba(47, 91, 255, .14);
}
.input.is-invalid { --o: var(--failed); animation: shake .4s var(--ease); }
.textarea { height: 216px; padding: 12px 14px; resize: vertical; line-height: 1.8; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 46px; }
.eye { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: color .2s, transform .3s var(--spring); }
.eye:hover { color: var(--cobalt); transform: scale(1.12); }
.eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 var(--px); }
.field { display: block; min-width: 0; }
.span-2 { grid-column: span 2; }

/* ---------- 按钮 ---------- */
.btn {
  --face: var(--surface);
  --lift: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; overflow: hidden;
  height: 44px; padding: 0 20px; margin: 0; cursor: pointer; white-space: nowrap; color: var(--ink); font-size: 14px; font-weight: 600;
  background: var(--face);
  transform: translateY(var(--lift));
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    inset 0 -3px 0 0 rgba(15, 42, 92, .14),
    calc(5px - var(--lift)) calc(5px - var(--lift)) 0 0 var(--shadow);
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background .2s;
}
.btn:hover:not(:disabled) { --lift: -2px; }
.btn:active:not(:disabled) { --lift: 3px; transition-duration: .08s; }
.btn:disabled { cursor: not-allowed; --face: #EDF1F8; --o: #B9C6DF; color: var(--ink-3); }
.btn-primary { --face: var(--cobalt); --o: var(--cobalt-deep); color: #fff; }
.btn-primary:hover:not(:disabled) { --face: #4069FF; }
.btn-ghost { --face: var(--surface); }
.btn-ghost:hover:not(:disabled) { --face: var(--tint); }
.btn-danger { --face: #FFF0F2; --o: #F6A9B6; color: #C5233F; height: 30px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 28px; font-size: 15px; }
.btn.is-done { --face: var(--success); --o: #0E8A50; color: #fff; }
.btn .btn-text { transition: opacity .2s; }
/* 点击涟漪 */
.ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: rgba(255,255,255,.55); pointer-events: none; animation: ripple .55s var(--ease) forwards; }
.btn-ghost .ripple, .btn-danger .ripple { background: rgba(47, 91, 255, .2); }
@keyframes ripple { to { transform: scale(22); opacity: 0; } }

.btn-text-link { position: relative; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--cobalt); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.btn-text-link:hover:not(:disabled)::after { transform: scaleX(1); }
.btn-text-link:disabled { color: var(--ink-3); cursor: not-allowed; }
.btn-text-link.is-muted { color: var(--ink-3); }

.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 分段切换（滑块跟随） ---------- */
.seg { position: relative; display: inline-flex; background: var(--tint); padding: 3px; margin: var(--px); --o: #9DB2DC; }
.seg-ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--cobalt); box-shadow: 2px 2px 0 var(--cobalt-deep); transition: transform .4s var(--spring), width .4s var(--spring); }
.seg button { position: relative; z-index: 1; border: 0; height: 30px; padding: 0 14px; background: none; color: var(--ink-2); font-size: 13px; cursor: pointer; transition: color .25s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { color: #fff; }

.switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 38px; height: 20px; background: var(--tint); box-shadow: 0 0 0 var(--px) #9DB2DC; transition: background .3s var(--ease); }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ink-3); transition: transform .35s var(--spring), background .3s; }
.switch input:checked + .switch-ui { background: var(--cobalt); box-shadow: 0 0 0 var(--px) var(--cobalt-deep); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--cobalt); outline-offset: 4px; }

/* ---------- 提交任务 ---------- */
#form-batch:not([hidden]), #form-single:not([hidden]) { animation: fade-in .35s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
.batch-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.batch-meta b { font-weight: 600; font-size: 15px; color: var(--ink); }
.batch-meta b.is-bad { color: var(--failed); }
.batch-meta b.is-warn { color: #B87800; }
.batch-meta .btn-text-link { margin-left: auto; }
.batch-errors { list-style: none; margin: 8px 0 0; padding: 0; max-height: 120px; overflow: auto; font-size: 13px; color: var(--failed); }
.batch-errors li span { color: var(--ink-3); margin-right: 10px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; padding: 0 var(--px); }
.plan {
  --o: #B4C4E4; --lift: 0px;
  position: relative; display: block; padding: 14px 16px; background: var(--surface); cursor: pointer;
  transform: translateY(var(--lift));
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    calc(4px - var(--lift)) calc(4px - var(--lift)) 0 0 transparent;
  transition: transform .3s var(--spring), box-shadow .3s var(--ease), background .25s;
}
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:hover { --lift: -3px; --o: var(--ink-2); }
.plan.is-on {
  --o: var(--cobalt); background: var(--tint);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    calc(6px - var(--lift)) calc(6px - var(--lift)) 0 0 var(--cobalt);
}
.plan.is-popping { animation: plan-pop .45s var(--spring); }
@keyframes plan-pop { 40% { transform: scale(1.05) translateY(-3px); } }
.plan:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 6px; }
.plan-check { position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; background: var(--cobalt); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--spring); }
.plan-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; }
.plan.is-on .plan-check { transform: scale(1); }
.plan-name { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.plan-name b { font-family: var(--pixel); font-weight: 400; font-size: 36px; line-height: 40px; color: var(--cobalt); }
.plan-desc { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); padding-right: 22px; }

.checkout { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 2px dashed var(--grid); flex-wrap: wrap; }
.checkout-line { margin: 0; color: var(--ink-2); }
.checkout-line b { display: inline-block; font-family: var(--pixel); font-weight: 400; font-size: 24px; line-height: 24px; color: var(--ink); vertical-align: -3px; }
.checkout-line b.is-bump { animation: bump .4s var(--spring); }
.checkout-line .is-over { color: var(--failed); }
@keyframes bump { 40% { transform: scale(1.25); color: var(--cobalt); } }

.lock {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: repeating-linear-gradient(45deg, rgba(238,244,255,.86) 0 8px, rgba(255,255,255,.86) 8px 16px);
  animation: fade-in .4s var(--ease);
}
.lock-msg { background: var(--surface); padding: 10px 18px; color: var(--ink); --o: var(--edge); }

/* ---------- 任务列表 ---------- */
.search { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 var(--px); }
.search .input { flex: 1; min-width: 220px; width: auto; }
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 30px 0 10px; font-size: 13px; color: var(--ink-2); }
.list-bar #list-title { color: var(--ink); font-size: 14px; font-weight: 600; }
.list-actions { display: inline-flex; gap: 22px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.table th { text-align: left; font-weight: 500; font-size: 13px; color: #fff; background: var(--edge); padding: 8px 12px; white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; transition: background .2s; }
.table tbody tr:hover td { background: var(--tint); }
.table.is-entering tbody tr { animation: row-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(-10px); } }
.table .t-mail { font-weight: 500; word-break: break-all; }
.table .t-id { font-family: var(--din); color: var(--ink-2); white-space: nowrap; }
.table .t-nowrap { white-space: nowrap; color: var(--ink-2); }
.table .t-msg { color: var(--ink-2); max-width: 280px; }
.table .t-act { text-align: right; white-space: nowrap; }
.table .t-act > * + * { margin-left: 14px; }
.tasks .table { min-width: 880px; }
.task-count { font-family: var(--sys); font-size: 14px; color: var(--ink-3); }
.tasks-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.poll-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.poll-note .live-dot { position: relative; width: 8px; height: 8px; background: var(--running); }
.poll-note .live-dot::after { content: ""; position: absolute; inset: 0; background: var(--running); animation: ping 1.8s var(--ease) infinite; }
.poll-note.is-live { color: var(--ink-2); }
.pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; font-size: 13px; color: var(--ink-2); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.empty { padding: 40px 12px; text-align: center; color: var(--ink-3); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 1px 8px; }
.status::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.st-pending { color: #B87800; background: #FFF6E0; }
.st-running { color: #1C6FD9; background: #E6F1FF; }
.st-running::before { animation: pulse 1.2s ease-in-out infinite; }
.st-success { color: #0E8A50; background: #E3F7EC; }
.st-failed { color: #D02A48; background: #FFEBEF; }
.st-cancelled, .st-stopped, .st-unknown { color: var(--ink-3); background: var(--tint); }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

/* ---------- 文档 ---------- */
.docs { padding: 0; }
.docs summary { list-style: none; cursor: pointer; padding: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; transition: background .2s; }
.docs summary:hover { background: var(--tint); }
.docs summary::-webkit-details-marker { display: none; }
.docs summary .h2::before { width: 0; height: 0; background: none; box-shadow: none; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--cobalt); transition: transform .3s var(--spring); }
.docs[open] summary .h2::before { transform: rotate(90deg); }
.docs::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.docs[open]::details-content { height: auto; }
.docs-sub { font-size: 13px; color: var(--ink-3); }
.docs-body { padding: 0 24px 30px; max-width: 960px; }
.docs-body > p { color: var(--ink-2); margin: 0 0 24px; max-width: 72ch; }
.endpoint { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--tint); margin: 0 var(--px) 30px; --o: #9DB2DC; }
.endpoint code { background: none; padding: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 14px; }
.method { background: var(--success); color: #fff; padding: 0 8px; font-size: 12px; font-weight: 600; }
.code-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.code-actions { display: inline-flex; gap: 22px; flex-wrap: wrap; }
.code { margin: var(--px); padding: 18px 22px; background: #0F2A5C; color: #DCE6FF; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75; --o: #0F2A5C; }
.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.code.is-swapping { animation: fade-in .3s var(--ease); }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }

/* ---------- 提示与弹窗 ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.toast {
  --o: var(--edge);
  position: relative; overflow: hidden; max-width: 360px; padding: 11px 16px 13px; background: var(--surface); color: var(--ink);
  display: flex; gap: 12px; align-items: center; font-size: 14px;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    6px 6px 0 0 var(--shadow);
  animation: toast-in .5s var(--spring) both;
}
.toast i { width: 9px; height: 9px; flex: none; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .25; transform-origin: left; animation: toast-timer var(--dur, 3s) linear forwards; }
.toast.t-ok i { background: var(--success); } .toast.t-ok::after { background: var(--success); opacity: .6; }
.toast.t-err i { background: var(--failed); } .toast.t-err::after { background: var(--failed); opacity: .6; }
.toast.t-warn i { background: var(--pending); } .toast.t-warn::after { background: var(--pending); opacity: .6; }
.toast.t-info i { background: var(--running); } .toast.t-info::after { background: var(--running); opacity: .6; }
.toast.is-out { animation: toast-out .3s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@keyframes toast-timer { to { transform: scaleX(0); } }

.modal {
  --o: var(--edge);
  width: min(408px, calc(100vw - 48px)); padding: 26px; color: var(--ink); background: var(--surface);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--o), 0 var(--px) 0 0 var(--o),
    calc(var(--px) * -1) 0 0 0 var(--o), var(--px) 0 0 0 var(--o),
    10px 10px 0 0 var(--cobalt);
}
.modal[open] { animation: modal-in .4s var(--spring); }
.modal[open]::backdrop { animation: fade-in .3s var(--ease); }
.modal::backdrop { background: rgba(15, 42, 92, .32); backdrop-filter: blur(3px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.modal h3 { margin: 0 0 12px; font-family: var(--pixel); font-size: 24px; line-height: 30px; font-weight: 400; }
.modal p { margin: 0 0 24px; color: var(--ink-2); white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 16px; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .page { grid-template-columns: 1fr; padding-top: 30px; }
  .wallet { max-width: 456px; width: 100%; justify-self: center; }
}
@media (max-width: 600px) {
  .top-inner { padding: 0 16px; }
  .brand { font-size: 12px; }
  #gw-text { display: none; }
  .top-actions { gap: 18px; }
  .page { padding: 24px 16px 36px; gap: 28px; }
  .panel { padding: 18px 16px; }
  .docs summary { padding: 18px 16px; }
  .docs-body { padding: 0 16px 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .checkout .btn { width: 100%; }
  .card-face { padding: 18px 20px; }
  .card-code { font-size: 18px; }
  .card-balance { font-size: 34px; }
  .search .btn { flex: 1; }
  .toasts { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
  .toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card { transform: none !important; }
}