/* ═══════════════════ Reset & Base ═══════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI','Microsoft YaHei',sans-serif;background:#0a0a1a;color:#ccc;min-height:100vh;overflow-x:hidden}

/* ═══════════════════ Header ═══════════════════ */
.header{background:#12122a;border-bottom:1px solid #2a2a4a;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.header .logo{font-size:20px;font-weight:bold;color:#4cc9f0;white-space:nowrap}
.header .logo span{color:#888;font-size:13px;margin-left:8px}
.header .nav{display:flex;gap:4px;margin-left:24px}
.header .user{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px}
.header .user .dot{width:8px;height:8px;border-radius:50%}
.header .user .dot.ok{background:#238636;box-shadow:0 0 4px rgba(35,134,54,.5)}
.header .user .dot.no{background:#da3633;box-shadow:0 0 4px rgba(218,54,51,.5)}
.btn-logout{background:transparent;border:1px solid #3a3a5a;color:#888;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:11px;transition:.2s}
.btn-logout:hover{color:#f85149;border-color:#f85149}

/* ═══════════════════ Tabs ═══════════════════ */
.tabs{display:flex;gap:0;background:#0e0e24;border-bottom:1px solid #2a2a4a;padding:0 24px;overflow-x:auto}
.tabs::-webkit-scrollbar{height:0}
.tab{padding:14px 22px;cursor:pointer;font-size:14px;color:#777;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;user-select:none}
.tab:hover{color:#aaa}
.tab.active{color:#4cc9f0;border-bottom-color:#4cc9f0}

/* ═══════════════════ Main ═══════════════════ */
.main{max-width:960px;margin:0 auto;padding:24px}
.panel{display:none}
.panel.active{display:block}

/* ═══════════════════ Card ═══════════════════ */
.card{background:#1a1a2e;border:1px solid #3a3a5a;border-radius:12px;padding:24px;margin-bottom:16px}
.card h2{font-size:18px;color:#e0e0e0;margin-bottom:6px}
.card .hint{font-size:12px;color:#666;margin-bottom:16px}
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ═══════════════════ Form ═══════════════════ */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;color:#999;margin-bottom:4px}
.form-group input,.form-group select{width:100%;padding:10px 14px;background:#0e0e24;border:1px solid #3a3a5a;border-radius:8px;color:#e0e0e0;font-size:14px;outline:none;transition:.2s}
.form-group input:focus,.form-group select:focus{border-color:#4cc9f0}
.form-group select option{background:#1a1a2e;color:#e0e0e0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ═══════════════════ Buttons ═══════════════════ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;text-decoration:none}
.btn-primary{background:#4cc9f0;color:#0a0a1a}
.btn-primary:hover{background:#3ab8e0}
.btn-danger{background:#da3633;color:#fff}
.btn-danger:hover{background:#c42e2b}
.btn-outline{background:transparent;border:1px solid #4cc9f0;color:#4cc9f0}
.btn-outline:hover{background:rgba(76,201,240,.1)}
.btn-outline-danger{background:transparent;border:1px solid #da3633;color:#da3633}
.btn-outline-danger:hover{background:rgba(218,54,51,.1)}
.btn-caution{background:rgba(210,153,34,.08);border:1px solid #d29922;color:#d29922}
.btn-caution:hover{background:rgba(210,153,34,.18);border-color:#e8b730;color:#e8b730}
.btn-sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════════ Alert ═══════════════════ */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none}
.alert.success{background:rgba(35,134,54,.15);border:1px solid #238636;color:#3fb950;display:block}
.alert.error{background:rgba(218,54,51,.15);border:1px solid #da3633;color:#f85149;display:block}
.alert.info{background:rgba(76,201,240,.1);border:1px solid #4cc9f0;color:#4cc9f0;display:block}
.alert.warn{background:rgba(210,153,34,.1);border:1px solid #d29922;color:#d29922;display:block}

/* ═══════════════════ Token/Code Box ═══════════════════ */
.token-box{background:#0e0e24;border:1px solid #3a3a5a;border-radius:8px;padding:14px;margin:12px 0;font-family:'Cascadia Code','Fira Code','Consolas',monospace;font-size:13px;color:#4cc9f0;word-break:break-all;user-select:all}

/* ═══════════════════ Table ═══════════════════ */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #2a2a4a}
th{color:#888;font-weight:600;font-size:12px;text-transform:uppercase}
td{color:#ccc}
tr:hover td{background:rgba(76,201,240,.03)}
.empty-row td{text-align:center;color:#666;padding:24px}

/* ═══════════════════ Badges ═══════════════════ */
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.badge.ok{background:rgba(35,134,54,.2);color:#3fb950}
.badge.err{background:rgba(218,54,51,.15);color:#f85149}
.badge.warn{background:rgba(210,153,34,.15);color:#d29922}
.badge.new{background:rgba(76,201,240,.15);color:#4cc9f0;border:1px solid rgba(76,201,240,.4);animation:pulseNew 2s ease-in-out infinite}
.badge.free{background:rgba(76,201,240,.1);color:#4cc9f0}
@keyframes pulseNew{0%,100%{box-shadow:0 0 0 0 rgba(76,201,240,.3)}50%{box-shadow:0 0 0 6px rgba(76,201,240,0)}}
.badge.basic{background:rgba(210,153,34,.15);color:#d29922}
.badge.pro{background:rgba(163,113,247,.15);color:#a371f7}
.badge.ent{background:rgba(218,54,51,.15);color:#f85149}

/* ═══════════════════ Balance ═══════════════════ */
.balance-hero{text-align:center;padding:10px}
.balance-hero .amount{font-size:52px;font-weight:bold;color:#4cc9f0;line-height:1.1}
.balance-hero .label{font-size:13px;color:#888;margin-top:6px}
.balance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.stat-box{text-align:center;padding:14px 8px;background:#0e0e24;border-radius:10px}
.stat-box .val{font-size:20px;font-weight:bold;color:#e0e0e0}
.stat-box .lbl{font-size:11px;color:#888;margin-top:2px}

/* ═══════════════════ Plan Cards ═══════════════════ */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.plan-card{padding:16px 12px;background:#0e0e24;border:2px solid #2a2a4a;border-radius:12px;text-align:center;transition:.2s}
.plan-card.current{border-color:#4cc9f0;background:rgba(76,201,240,.06)}
.plan-card:hover{border-color:#4cc9f0}
.plan-card .picon{font-size:28px;margin-bottom:6px}
.plan-card .pname{font-size:16px;font-weight:bold;color:#e0e0e0}
.plan-card .pprice{font-size:22px;font-weight:bold;color:#4cc9f0;margin:6px 0}
.plan-card .pcredits{font-size:12px;color:#888}
.plan-card .ptag{margin-top:8px}
.plan-card .pcta{margin-top:10px}
.plan-card .pcta button{width:100%}

/* ═══════════════════ Modal ═══════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal{background:#1a1a2e;border:1px solid #3a3a5a;border-radius:16px;padding:32px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.modal h2{font-size:22px;color:#e0e0e0;margin-bottom:4px}
.modal .sub{font-size:13px;color:#888;margin-bottom:20px}
.modal .close-btn{position:absolute;right:16px;top:16px;background:none;border:none;color:#666;font-size:20px;cursor:pointer;transition:.2s}
.modal .close-btn:hover{color:#aaa}
.modal-header{position:relative;margin-bottom:20px}
.modal-footer{display:flex;gap:10px;margin-top:20px}
.modal-footer .btn{flex:1;justify-content:center}

/* ═══════════════════ Captcha ═══════════════════ */
	.captcha-img-wrap{text-align:center;margin:12px 0;position:relative;display:block;width:100%}
	.captcha-status{text-align:center;font-size:13px;color:#888;margin:8px 0;min-height:20px;transition:color .3s}
	.captcha-status.ok{color:#3fb950}
	.captcha-status.err{color:#f85149}
	.slider-wrap{position:relative;width:100%;height:40px;background:#0e0e24;border-radius:20px;margin:16px 0 8px 0;overflow:hidden;user-select:none;-webkit-user-select:none}
	.slider-track{position:absolute;left:0;top:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#4cc9f0,#3ab8e0);width:0}
	.slider-btn{position:absolute;top:0;left:0;width:48px;height:40px;background:#1a1a2e;border:2px solid #4cc9f0;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#4cc9f0;transition:background .2s,border-color .3s;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.3)}
	.slider-btn:hover{background:#252540}
	.slider-btn.dragging{background:#2a2a4a;border-color:#3ab8e0;box-shadow:0 4px 12px rgba(76,201,240,.3)}
	.slider-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#666;pointer-events:none;transition:opacity .3s}

	/* ═══════════════════ Welcome (no key) ═══════════════════ */
.welcome{text-align:center;padding:40px 20px}
.welcome .hero-icon{font-size:72px;margin-bottom:16px}
.welcome h2{font-size:26px;color:#e0e0e0;margin-bottom:8px}
.welcome .desc{font-size:14px;color:#888;max-width:500px;margin:0 auto 28px;line-height:1.6}
.welcome-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.welcome-actions .btn{padding:14px 32px;font-size:16px}

/* ═══════════════════ API Key Login ═══════════════════ */
.key-login{max-width:500px;margin:40px auto;text-align:center}
.key-login .kl-icon{font-size:48px;margin-bottom:12px}
.key-login h3{font-size:18px;color:#e0e0e0;margin-bottom:8px}
.key-login .kl-hint{font-size:12px;color:#666;margin-bottom:20px}

/* ═══════════════════ Loading ═══════════════════ */
.loading{text-align:center;padding:24px;color:#888}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid #3a3a5a;border-top-color:#4cc9f0;border-radius:50%;animation:spin .6s linear infinite;margin-right:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════ Ref ═══════════════════ */
.code-ref{background:#0e0e24;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:12px;color:#4cc9f0}

/* ═══════════════════ Responsive ═══════════════════ */
@media(max-width:768px){
  .header{padding:10px 16px}
  .header .logo{font-size:17px}
  .header .nav{margin-left:0;order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs{padding:0 8px;-webkit-overflow-scrolling:touch}
  .tab{padding:10px 14px;font-size:12px}
  .main{padding:16px 12px}
  .card{padding:16px}
  .card-row{grid-template-columns:1fr}
  .balance-grid{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .welcome-actions{flex-direction:column;align-items:center}
  .modal{padding:24px;max-width:95vw}
}
@media(max-width:480px){
  .plan-grid{grid-template-columns:1fr}
  .balance-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .tab{padding:8px 10px;font-size:11px}
  .tabs{padding:0 4px}
}

/* ═══════════════════ 支付FM 弹窗 ═══════════════════ */
.pay-channel-btn {
  flex:1; padding:10px 16px; border:2px solid #3a3a5a; border-radius:10px;
  background:#12122a; color:#888; cursor:pointer; font-size:14px; font-weight:500;
  transition:.2s; text-align:center;
}
.pay-channel-btn:hover { border-color:#4cc9f0; color:#ccc; }
.pay-channel-btn.active { border-color:#4cc9f0; color:#4cc9f0; background:rgba(76,201,240,.08); }
#paymentQrWrap img { display:block; margin:0 auto; }