/* ============================================================
   PIXELFANTASIA · account.css
   登录 / 账户 / 后台三页共用。复用 base.css 的 token，不新造配色。
   ============================================================ */

/* ---------- 通用 ---------- */
.auth-wrap{max-width:1060px;margin:0 auto;padding:40px var(--gutter) 96px}
.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text);
  padding:9px 14px;font-size:13px;box-shadow:var(--sh-2);max-width:520px}
.toast--err{border-color:var(--danger);color:var(--danger)}
.toast--ok{border-color:var(--mint-line);color:var(--mint)}
.lnk2{color:var(--mint);cursor:pointer;background:none;border:0;padding:0;font:inherit;
  border-bottom:1px dashed var(--mint-line)}
.lnk2:hover{color:var(--mint-hover)}

/* ---------- 登录页 ---------- */
.auth{
  min-height:calc(100vh - var(--nav-h));display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:center;max-width:1180px;margin:0 auto;
  padding:clamp(32px,6vh,72px) var(--gutter) clamp(48px,8vh,96px);
  position:relative;
}
.auth__bg{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(900px 460px at 18% 26%,rgba(108,255,181,.09),transparent 70%),
    radial-gradient(700px 420px at 88% 78%,rgba(107,168,255,.07),transparent 72%);
}
.auth__kicker{font-size:11px;letter-spacing:.18em;color:var(--mint)}
.auth__tt{font-size:clamp(30px,3.4vw,46px);line-height:1.24;margin-top:12px;font-weight:700;letter-spacing:-.01em}
.auth__bd{margin-top:16px;color:var(--text-muted);font-size:15px;line-height:1.8;max-width:46ch}

.auth__prices{margin-top:28px;border-top:1px solid var(--line)}
.pr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.pr__n{font-size:14px;color:var(--text)}
.pr__v{font-family:var(--font-mono);font-size:20px;color:var(--mint);font-weight:600;white-space:nowrap}
.pr__v small{font-size:11px;color:var(--text-faint);margin-left:5px;font-weight:400}
.auth__note{margin-top:14px;font-size:11px;line-height:1.7;color:var(--text-faint)}

/* 表单卡 */
.acard{
  background:var(--panel);border:1px solid var(--line-strong);
  padding:0 0 24px;box-shadow:var(--sh-4);position:relative;
}
.acard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--mint),transparent 70%)}
.acard__tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.acard__tab{
  height:58px;font-size:15px;color:var(--text-faint);font-weight:500;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s;
}
.acard__tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--mint)}
.acard__tab:hover{color:var(--text-muted)}
.acard__form{padding:26px 26px 0;display:flex;flex-direction:column;gap:17px}
.acard__sub{margin-top:6px;width:100%;height:46px;font-size:15px}
.acard__ft{margin:18px 26px 0;font-size:12.5px;color:var(--text-faint);text-align:center;line-height:1.8}
.acard__tip{margin:10px 26px 0;font-size:11px;color:var(--text-faint);text-align:center;line-height:1.6}

.fld{display:block}
.fld__lb{display:block;font-size:11px;letter-spacing:.08em;color:var(--text-faint);margin-bottom:6px}
.fld__lb em{font-style:normal;color:var(--text-faint);opacity:.7;margin-left:3px}
.fld__wrap{position:relative;display:block}
.fld__wrap .input{padding-right:40px;width:100%}
.fld__eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;color:var(--text-faint)}
.fld__eye:hover{color:var(--text)}
.fld__err{font-size:12px;color:var(--danger);line-height:1.5;margin:0}
.fld__hint{font-size:11px;line-height:1.5;color:var(--mint);margin:5px 0 0;min-height:0}
.fld__hint:empty{display:none}
/* 验证码：输入框 + 发送按钮并排，按钮不吃 flex 空间，输入框自适应 */
.codewrap{display:flex;gap:6px;align-items:stretch}
.codewrap .input{flex:1 1 auto;min-width:0}
.codesend{flex:0 0 auto;height:36px;padding:0 12px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em}
.codesend:disabled{opacity:.55;cursor:default}
#fCode{font-family:var(--font-mono);font-size:15px;letter-spacing:.22em}
.acard__ft2{margin:6px 26px 0;font-size:12px;color:var(--text-faint);text-align:center}
.acard__ft2 .lnk2{font-size:12px}

/* ---------- 账户页 ---------- */
.acc-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.acc-hd__tt{font-size:26px;font-weight:700;letter-spacing:-.01em}
.acc-hd__sub{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin-top:6px}

.balance{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  margin-top:24px;padding:24px;background:var(--panel);border:1px solid var(--line-strong);
  position:relative;overflow:hidden;
}
.balance::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(108,255,181,.10),transparent 68%);pointer-events:none}
.balance__n{font-family:var(--font-mono);font-size:44px;line-height:1;color:var(--mint);font-weight:600}
.balance__lb{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-faint);margin-top:6px}
.balance__ops{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.sec{margin-top:36px}
.sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec__tt{font-size:16px;font-weight:600}
.sec__hint{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}

/* 充值档位 */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.pack{
  text-align:left;padding:16px;background:var(--panel);border:1px solid var(--line);
  cursor:pointer;transition:border-color .12s,background .12s;
}
.pack:hover{border-color:var(--line-ui);background:var(--panel-2)}
.pack[aria-pressed="true"]{border-color:var(--mint-line);background:var(--mint-dim)}
.pack__y{font-family:var(--font-mono);font-size:22px;color:var(--text);font-weight:600}
.pack__y small{font-size:12px;color:var(--text-faint);font-weight:400;margin-left:2px}
.pack__c{font-family:var(--font-mono);font-size:11px;color:var(--mint);margin-top:6px}
.pack__c em{font-style:normal;color:var(--gold);font-weight:600}
.pack__b{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin-top:3px}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--text-faint);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--text-muted);vertical-align:middle}
.tbl tr:hover td{background:rgba(232,238,252,.02)}
.tbl .num{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.tbl .pos{color:var(--mint)}
.tbl .neg{color:var(--gold)}
.tbl__empty{padding:28px 10px;text-align:center;color:var(--text-faint);font-size:13px}
.tbl-scroll{overflow-x:auto}

.tag{display:inline-block;font-family:var(--font-mono);font-size:10px;padding:2px 6px;
  border:1px solid var(--line-strong);color:var(--text-faint);white-space:nowrap}
.tag--ok{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.tag--bad{color:var(--danger);border-color:var(--danger)}
.tag--wait{color:var(--gold);border-color:var(--gold)}
.tag--warn{color:var(--danger);border-color:var(--danger);background:rgba(255,107,107,.08)}
.tag--dim{color:var(--text-faint);border-style:dashed}
/* 不可逆的批量操作按钮：红边框，跟普通按钮区分开，防误点 */
.btn--danger{color:var(--danger);border-color:var(--danger)}
.btn--danger:hover{background:rgba(255,107,107,.1);border-color:var(--danger);color:var(--danger)}

/* ---------- 后台 ---------- */
.adm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-top:24px;overflow-x:auto}
.adm-tab{padding:11px 16px;font-size:13px;color:var(--text-faint);border-bottom:2px solid transparent;white-space:nowrap}
.adm-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--mint)}
.adm-tab:hover{color:var(--text-muted)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.kpi{padding:16px;background:var(--panel);border:1px solid var(--line)}
.kpi__v{font-family:var(--font-mono);font-size:26px;color:var(--text);font-weight:600;line-height:1.1}
.kpi__v.is-good{color:var(--mint)}
.kpi__v.is-warn{color:var(--gold)}
.kpi__v.is-bad{color:var(--danger)}
.kpi__lb{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-faint);margin-top:7px}
.kpi__sub{font-size:11px;color:var(--text-faint);margin-top:4px;line-height:1.5}

.adm-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.adm-bar .input{max-width:240px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:12px;color:var(--text-faint)}

/* 成本提示条 */
.warnbar{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-top:20px;
  background:rgba(255,209,102,.07);border-left:2px solid var(--gold);font-size:12.5px;line-height:1.65;color:var(--text-muted)}
.warnbar b{color:var(--gold)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .auth{grid-template-columns:1fr;gap:36px;padding-top:28px}
  .auth__pitch{order:2}
  .auth__form{order:1}
  .auth__tt{font-size:26px}
  .balance{grid-template-columns:1fr;gap:16px}
  .balance__ops{justify-content:flex-start}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .auth-wrap{padding-top:24px}
  .acc-hd__tt{font-size:21px}
  .balance__n{font-size:34px}
  .packs{grid-template-columns:repeat(2,1fr)}
}