/* banli V4 · API 商城。沿用 V3 的色板与字体变量（data/v3/style.css）。 */
:root{
  --term:#0F1E3D;
  --term-line:#1E3160;
  --term-text:#DCE4F4;
  --term-dim:#7F8DAD;
  --mono:"SF Mono",Menlo,Consolas,monospace;
}
#main [hidden],#apiCheckout [hidden]{display:none!important}

/* ---------- 第一屏 ---------- */
.apiHero{padding:64px 0 56px}
.apiHero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.apiHero h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,4vw,50px);line-height:1.25;letter-spacing:-.5px}
.apiHero .lead{margin-top:18px;font-size:17px;color:var(--ink-2);max-width:30em}
.apiHero .hero-cta{margin-top:30px}

.apiStage{position:relative;height:400px}
.apiKey{position:absolute;left:0;top:0;width:min(400px,86%);height:220px;border-radius:20px;padding:24px 26px;color:#fff;transform:rotate(-3deg);transform-origin:20% 100%;
  background:radial-gradient(120% 140% at 100% 0%,#2E5FE0 0%,transparent 55%),linear-gradient(150deg,#16306F 0%,#0C1B44 100%);
  box-shadow:0 30px 60px -24px rgba(12,27,68,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.apiKey .row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(255,255,255,.7)}
.apiKey .row strong{font-size:16px;color:#fff;font-weight:600}
.apiKey .credit{margin-top:30px;font-family:var(--num);font-weight:700;font-size:44px;letter-spacing:-1px;line-height:1}
.apiKey .credit small{font-family:var(--sans);font-weight:400;font-size:13px;color:rgba(255,255,255,.6);margin-left:8px;letter-spacing:0}
.apiKey .secret{position:absolute;left:26px;right:26px;bottom:22px;font-family:var(--mono);font-size:14px;letter-spacing:1px;color:rgba(255,255,255,.75)}

/* ---------- 通用段落 ---------- */
.apiSection{padding:56px 0}

/* ---------- 两个优势 ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;background:var(--sheet);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.why article{padding:32px 34px}
.why article+article{border-left:1px solid var(--line)}
.why h2{font-family:var(--serif);font-size:28px;line-height:1.3}
.why p{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:26em}
.whyNums{margin-top:14px;display:flex;gap:36px;flex-wrap:wrap}
.whyNums strong{display:block;font-family:var(--num);font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-1px;line-height:1.05;color:var(--brand)}
.whyNums span{font-size:14.5px;color:var(--ink-2)}

/* ---------- 我的 API 账户 ---------- */
.accountCard{background:var(--sheet);border:1px solid var(--line);border-radius:20px}
.accountGuest{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 32px}
.accountGuest p{font-size:17px;color:var(--ink)}
.accountLive{display:grid;grid-template-columns:1.1fr 1fr}
.balancePane{padding:30px 32px}
.balanceLine{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
.state{font-style:normal;font-size:13.5px;font-weight:600;padding:2px 10px;border-radius:20px;background:#E5F6F0;color:#0B7A5E}
.state.paused{background:#FFF1DC;color:#8A5300}
.balanceBig{margin-top:8px;font-family:var(--num);font-weight:700;font-size:54px;letter-spacing:-1.5px;line-height:1.05}
.keyLine{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 10px 10px 14px;border-radius:12px;background:#F4F6FA}
.keyLine code{flex:1;min-width:0;font:14.5px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.keyBtns{display:flex;gap:6px}
.keyBtns button{padding:6px 12px;border-radius:8px;background:var(--sheet);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.keyBtns button:hover{color:var(--ink);border-color:#B9C3D6}
.topupPane{padding:30px 32px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.topupLabel{font-size:15px;color:var(--ink-2)}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amounts label{position:relative;cursor:pointer}
.amounts input{position:absolute;opacity:0;pointer-events:none}
.amounts span{display:grid;place-items:center;height:48px;border:1px solid var(--line);border-radius:10px;font-family:var(--num);font-weight:700;font-size:18px}
.amounts label:hover span{border-color:#B9C3D6}
.amounts input:checked+span{border-color:var(--brand);background:#EEF3FE;color:var(--brand-deep)}
.amounts input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
#amtCustom{height:48px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font:15px var(--sans);color:var(--ink)}
#amtCustom:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.topupPane .btn{height:50px;font-size:16px}

/* ---------- 模型价格 ---------- */
.segTabs{display:flex;gap:4px;padding:4px;background:var(--sheet);border:1px solid var(--line);border-radius:10px}
.segTabs button{padding:7px 18px;border-radius:7px;font-size:14.5px;color:var(--ink-2)}
.segTabs button[aria-selected="true"]{background:var(--brand-deep);color:#fff;font-weight:600}
.tableCard{background:var(--sheet);border:1px solid var(--line);border-radius:18px;overflow-x:auto}
.modelTable{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.modelTable th{font-weight:500;font-size:14px;color:var(--ink-3);text-align:left;padding:14px 22px;border-bottom:1px solid var(--line)}
.modelTable td{padding:15px 22px;border-bottom:1px solid var(--line)}
.modelTable tr:last-child td{border-bottom:0}
.modelTable .num{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.modelTable td.num{font-weight:600}
.modelTable .name{font-weight:600}
.modelTable .save{color:#0B7A5E}

/* ---------- 接入 ---------- */
.setup{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:start}
.setupSteps{list-style:none;counter-reset:s;background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:8px 24px}
.setupSteps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:6px;padding:16px 0;border-bottom:1px solid var(--line)}
.setupSteps li:last-child{border-bottom:0}
.setupSteps li::before{content:counter(s);font-family:Georgia,serif;font-style:italic;font-size:24px;color:var(--brand);line-height:1.1}
.setupSteps b{display:block;font-size:15.5px}
.setupSteps span{font-size:14.5px;color:var(--ink-2)}
.codePanel{background:var(--term);border-radius:18px;overflow:hidden;color:var(--term-text)}
.codeTabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--term-line)}
.codeTabs button{padding:7px 14px;border-radius:9px;font-size:14px;color:var(--term-dim)}
.codeTabs button[aria-selected="true"]{background:#1C2E5A;color:#fff;font-weight:600}
.codeBody{position:relative;padding:18px 20px 20px}
.codeBody pre{font:13.5px/1.8 var(--mono);white-space:pre-wrap;word-break:break-all;margin:0 0 14px}
.codeBody pre:last-child{margin-bottom:0}
.codeBody .c{color:var(--term-dim)}
.codeBody .k{color:#8FB3FF}
.copyCode{position:absolute;top:14px;right:14px;font-size:13px;padding:5px 12px;border-radius:8px;border:1px solid var(--term-line);color:var(--term-dim)}
.copyCode:hover{color:#fff;border-color:#36508A}

/* ---------- 使用须知 ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;background:var(--sheet);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.rules>div{padding:22px 26px;border-bottom:1px solid var(--line)}
.rules>div:nth-child(odd){border-right:1px solid var(--line)}
.rules>div:nth-last-child(-n+2){border-bottom:0}
.rules h3{font-size:16px}
.rules p{margin-top:6px;font-size:14.5px;color:var(--ink-2)}
.helpStrip{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;border-radius:16px;background:linear-gradient(160deg,#E3EAF8,#F4F6FB);border:1px solid var(--line)}
.helpStrip p{font-size:15px}

/* ---------- 充值弹窗 ---------- */
#apiCheckout{width:min(440px,calc(100vw - 32px))}
.apiBuyTotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px dashed var(--line);color:var(--ink-2)}
.apiBuyTotal strong{font-family:var(--num);font-size:30px;letter-spacing:-.5px;color:var(--ink)}
.apiQR{margin-top:18px;display:grid;place-items:center;gap:10px;min-height:140px;border-radius:14px;background:#F6F8FB;color:var(--ink-2);font-size:14px;text-align:center;padding:14px}
.apiQR svg{width:200px;height:200px}
.apiQR .paid{font-size:20px;font-weight:700;color:#0B7A5E}
.apiBuyStatus{margin-top:12px;font-size:14px;color:var(--ink-2);text-align:center}
.apiBuyStatus.error{color:#B42318}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .apiHero .wrap,.setup,.accountLive{grid-template-columns:1fr}
  .apiStage{height:380px;max-width:520px}
  .topupPane{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .apiHero{padding:36px 0 32px}
  .apiStage{height:360px}
  .apiKey{height:196px}
  .apiKey .credit{font-size:36px}
  .why{grid-template-columns:1fr}
  .why article+article{border-left:0;border-top:1px solid var(--line)}
  .why article,.balancePane,.topupPane,.accountGuest{padding:22px}
  .balanceBig{font-size:44px}
  .amounts{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:1fr}
  .rules>div{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .rules>div:last-child{border-bottom:0!important}
}


/* 首屏账户概览与账户区共享数据，未登录不展示示例余额。 */
.apiStage{height:270px;display:flex;align-items:center}
.apiKey{position:relative;top:auto;height:250px;width:min(440px,100%)}
.heroAccountFoot{position:absolute;left:26px;right:26px;bottom:25px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.heroAccountFoot div{display:grid;gap:5px}
.heroAccountFoot div>span{font-size:14px;color:#c3d0ee}
.heroAccountFoot strong{font:600 22px var(--num)}
.heroAccountFoot a{font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:4px}
.apiKey .row{font-size:14px}
.modelTable{min-width:740px}
@media(max-width:720px){.apiStage{height:270px}.apiKey{height:245px}.apiKey .credit{font-size:38px}}