/* GA TokenPlan — color scheme synced to app.gaagent.ai (Apple-style monochrome).
   Light + dark via prefers-color-scheme; class names kept identical to templates. */
:root{
  --primary:#1d1d1f; --onPrimary:#ffffff;
  --bg:#ffffff; --surface:#ffffff; --surface2:#f2f2f4; --surface3:#ededf0;
  --txt:#1d1d1f; --txt2:#6e6e73; --mut:#b8b8bd; --line:#e6e6ea;
  --acc:#1d1d1f; --onAcc:#ffffff; --accSoft:#e8e8ed;
  --ok:#2ba24e; --err:#d70015; --warn:#b25000;
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --elev1:0 1px 2px rgba(0,0,0,.04); --elev2:0 8px 30px rgba(0,0,0,.08);
  --code-bg:#f5f5f7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-family:var(--sans);
}
@media (prefers-color-scheme:dark){
  :root{
    --primary:#f5f5f7; --onPrimary:#1d1d1f;
    --bg:#0a0a0a; --surface:#161616; --surface2:#1f1f1f; --surface3:#262626;
    --txt:#f5f5f7; --txt2:#a1a1a6; --mut:#48484a; --line:#2c2c2e;
    --acc:#f5f5f7; --onAcc:#1d1d1f; --accSoft:#2a2a2c;
    --ok:#32d74b; --err:#ff453a; --warn:#ff9f0a;
    --elev1:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.5); --elev2:var(--elev1);
    --code-bg:#171717;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--txt);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* top bar (app.gaagent.ai frosted) */
.top{
  display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
}
.brand{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--txt);display:flex;align-items:center;gap:10px}
.brand::before{content:"GA";flex:none;width:30px;height:30px;border-radius:9px;background:var(--acc);color:var(--onAcc);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em}
.top nav{display:flex;gap:2px;align-items:center}
.top nav a{color:var(--txt2);font-size:14px;font-weight:550;padding:8px 13px;border-radius:10px;transition:.14s}
.top nav a:hover{color:var(--txt);background:var(--surface2);text-decoration:none}
.top nav a.active{color:var(--txt);background:var(--surface2)}

.wrap{max-width:1000px;margin:0 auto;padding:36px 20px 72px}
h1{font-size:28px;font-weight:680;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:18px;font-weight:650;margin:0 0 10px;letter-spacing:-.01em}
.muted{color:var(--txt2);margin:0 0 18px;line-height:1.6}
.label{color:var(--txt2);font-size:12.5px}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--elev1)}
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}

/* hero balance number */
.hero .label,.hero .value{display:block}
.hero .huge,.value.huge{font-size:clamp(38px,7vw,52px);font-weight:700;letter-spacing:-.03em;margin:6px 0 2px;line-height:1;color:var(--txt)}
.hero .sub{color:var(--txt2);font-size:13px}

/* stat rows */
.stat{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:none}
.stat .value{font-weight:640;font-size:14px}
.plan-trial{color:var(--txt)}.plan-plus{color:var(--ok)}.plan-pro{color:var(--txt)}.plan-max{color:var(--txt)}.plan-none{color:var(--txt2)}
.pill-expire.warn{color:var(--warn)}.pill-expire.err{color:var(--err)}

.actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* buttons — flat mono (OpenAI-style), radius token r-md */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-weight:640;font-size:15px;border-radius:var(--r-md);padding:11px 20px;
  background:var(--acc);color:var(--onAcc);text-align:center;transition:transform .12s,filter .12s;
}
button:hover,.btn:hover{filter:brightness(1.06);text-decoration:none}
button:active,.btn:active{transform:scale(.98)}
.btn.secondary,button.secondary{background:var(--surface);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.secondary:hover,button.secondary:hover{background:var(--surface2)}
.btn.accent{background:var(--acc);color:var(--onAcc)}
.btn.ghost{background:transparent;color:var(--txt2);border:1px solid var(--line);box-shadow:none}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.form>button{width:100%;margin-top:6px}

/* forms */
.form label,form label{display:block;margin-bottom:14px;font-size:13px;color:var(--txt2);font-weight:550}
.form input,form input,input.txt,select.txt{
  display:block;width:100%;margin-top:7px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface2);color:var(--txt);font-size:15px;font-family:var(--sans);transition:.15s;
}
.form input:focus,form input:focus,input.txt:focus,select.txt:focus{outline:none;border-color:var(--acc);background:var(--surface)}
::placeholder{color:var(--mut)}

/* auth pages */
body.auth-page{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb,var(--txt) 4%, transparent), transparent 60%), var(--bg)}
.auth-card{width:100%;max-width:440px;border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px;box-shadow:var(--elev2)}
.auth-card h1{font-size:27px;margin:0 0 6px}
.hint{font-size:13px;color:var(--txt2);margin-top:18px;text-align:center}
.lineup{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:20px}
.chip{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--txt2);background:var(--surface2)}

/* segmented tabs (login: 验证码/密码) */
.seg{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);padding:4px;margin:18px 0 20px}
.seg button{flex:1;background:transparent;color:var(--txt2);border:none;box-shadow:none;font-size:14px;font-weight:600;padding:9px;border-radius:6px}
.seg button.on{background:var(--surface);color:var(--txt);box-shadow:var(--elev1)}
.seg button:hover{filter:none}
.code-row{display:flex;gap:8px;align-items:stretch}
.code-row input{flex:1}
.code-row .btn{white-space:nowrap;flex:none}

/* alerts */
.alert{background:color-mix(in srgb,var(--err) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--err) 35%,var(--line));
  color:var(--err);padding:11px 13px;border-radius:var(--r-sm);margin-bottom:14px;font-size:14px}
.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));
  color:var(--ok);padding:11px 13px;border-radius:var(--r-sm);margin-bottom:14px;font-size:14px}

/* plan cards */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.plan-card{position:relative;overflow:hidden;transition:transform .14s,border-color .14s}
.plan-card:hover{border-color:var(--mut);transform:translateY(-3px)}
.plan-card.feat{border-color:var(--acc)}
.plan-card h2{font-size:22px}
.plan-card .price{font-size:38px;font-weight:720;letter-spacing:-.03em;margin:10px 0 14px;line-height:1}
.plan-card .price span{font-size:14px;color:var(--txt2);font-weight:500}
.plan-card ul{list-style:none;padding:0;color:var(--txt2);margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.plan-card ul li{display:flex;gap:9px;font-size:14px;line-height:1.4}
.plan-card ul li::before{content:"✓";color:var(--ok);font-weight:700;flex:none}
.plan-card .btn,.plan-card button{width:100%}
.plan-card.dim{opacity:.5}
.plan-badge{position:absolute;top:16px;right:16px}

/* usage bars (Cursor-style) */
.usage-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:10px}
.bar{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--acc)}
.usage-fold{margin-top:14px}
.usage-fold summary{cursor:pointer;color:var(--txt2);font-size:13px}

/* key card */
.key-card{margin-bottom:20px}
.key-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.key-value{flex:1 1 240px;padding:12px 14px;border-radius:var(--r-md);background:var(--code-bg);
  border:1px solid var(--line);word-break:break-all;font-family:var(--mono);font-size:13px;color:var(--txt)}
.small{font-size:13px}
.sub{color:var(--txt2);font-size:13px;margin-top:10px}
.hint.err{color:var(--err)}

/* table */
.table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.table th,.table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.table th{color:var(--txt2);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--surface2)}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:.12s}.table tbody tr:hover{background:var(--surface2)}
.badge{padding:3px 10px;border-radius:var(--r-pill);font-size:12px;background:var(--surface3);border:1px solid var(--line);color:var(--txt2)}
.badge-credited{background:color-mix(in srgb,var(--ok) 16%,var(--surface));border-color:color-mix(in srgb,var(--ok) 35%,var(--line));color:var(--ok)}
.badge-paid{background:var(--surface3);color:var(--txt)}
.badge-pending{background:var(--surface3);color:var(--txt2)}
.badge-expired,.badge-failed{background:color-mix(in srgb,var(--err) 10%,var(--surface));border-color:color-mix(in srgb,var(--err) 30%,var(--line));color:var(--err)}

/* lang toggle */
.langbtn{background:var(--surface);border:1px solid var(--line);color:var(--txt2);border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:600;box-shadow:none;cursor:pointer}
.langbtn:hover{background:var(--surface2);filter:none}

#tokenplan-edition{margin-left:6px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--txt);font-family:var(--sans)}

[hidden],button[hidden],.btn[hidden],p[hidden],div[hidden]{display:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:10px}
:focus:not(:focus-visible){outline:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.plan-card,.auth-card,.table{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
.plans .plan-card:nth-child(2){animation-delay:.05s}.plans .plan-card:nth-child(3){animation-delay:.1s}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}