/* QuantsFire — Shared app stylesheet for user pages
   Design tokens lifted from index.html so register/login/dashboard/... share the same look. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070b12;--bg2:#0d1220;--bg3:#111827;
  --teal:#00e5c3;--teal2:#00c4a8;
  --amber:#f0a020;--amber2:#d4880a;
  --blue:#4d9fff;--red:#ff4d6d;
  --text:#e8edf5;--text2:#8a97b0;--text3:#4a5568;
  --border:#1e2a3d;--border2:#2a3a55;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;overflow-x:hidden;min-height:100vh;
}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,229,195,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,195,.025) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;width:900px;height:900px;background:radial-gradient(circle,rgba(0,229,195,.045) 0%,transparent 65%);top:-350px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal2)}

/* ── NAV ── */
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:72px;border-bottom:1px solid var(--border);background:rgba(7,11,18,.92);backdrop-filter:blur(20px);position:sticky;top:0;z-index:100}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.5px;color:#fff}
.logo span{color:var(--teal)}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{color:var(--text2);font-size:14px;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-cta{background:var(--teal);color:#070b12;padding:9px 20px;border-radius:8px;font-size:14px;font-weight:700;font-family:'Syne',sans-serif}
.nav-cta:hover{background:var(--teal2);color:#070b12}
.nav-user{display:flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:12px;color:var(--text2)}
.nav-user .pill{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--border2);border-radius:100px;color:var(--text);font-weight:700;letter-spacing:.06em;font-size:11px;transition:all .15s}
.nav-user .pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.nav-user .pill.elite{color:var(--amber);border-color:rgba(240,160,32,.55);background:linear-gradient(135deg,rgba(240,160,32,.18),rgba(240,160,32,.04));box-shadow:0 0 0 1px rgba(240,160,32,.15),0 2px 12px rgba(240,160,32,.18)}
.nav-user .pill.pro{color:var(--blue);border-color:rgba(77,159,255,.5);background:linear-gradient(135deg,rgba(77,159,255,.15),rgba(77,159,255,.03))}
.nav-user .pill.trial{color:var(--teal);border-color:rgba(0,229,195,.4);background:rgba(0,229,195,.06)}

/* ── PAGE LAYOUTS ──
   主布局基准: 1920×1080 (留侧边 5% padding => 内容宽 ~1728px)
   .wrap        — 默认页 (settings/invite 等内容型)
   .wrap-wide   — 宽页 (dashboard/pricing/deposit/withdraw 等表格密集页)
   .wrap-narrow — 窄页 (auth 表单)
*/
.page{position:relative;z-index:1;min-height:calc(100vh - 72px)}
.wrap{max-width:1760px;margin:0 auto;padding:48px 5%}
.wrap-narrow{max-width:480px;margin:0 auto;padding:64px 24px}
.wrap-wide{max-width:1840px;margin:0 auto;padding:32px 4%}

/* ── AUTH CARD (register/login) ── */
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:40px 36px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.auth-title{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;color:#fff;margin-bottom:8px;letter-spacing:-.5px}
.auth-sub{color:var(--text2);font-size:14px;margin-bottom:32px}
.auth-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;display:block}
.auth-foot{margin-top:24px;text-align:center;font-size:13px;color:var(--text2)}
.auth-foot a{font-weight:600}

/* ── FORM ── */
.field{margin-bottom:18px}
.field label{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:10px;
  padding:13px 14px;color:var(--text);font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,229,195,.12)}
.field .hint{margin-top:6px;font-size:12px;color:var(--text3)}
.field .err{margin-top:6px;font-size:12px;color:var(--red)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text2);margin-bottom:18px;cursor:pointer}
.checkbox input{width:16px;height:16px;margin-top:2px;accent-color:var(--teal);flex-shrink:0}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Syne',sans-serif;border:none;cursor:pointer;transition:all .15s;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--teal);color:#070b12}
.btn-primary:hover:not(:disabled){background:var(--teal2);transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,229,195,.22);color:#070b12}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.btn-amber{background:var(--amber);color:#070b12}
.btn-amber:hover:not(:disabled){background:var(--amber2);color:#070b12}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(255,77,109,.4)}
.btn-danger:hover:not(:disabled){background:rgba(255,77,109,.08)}
.btn-block{width:100%}
.btn-sm{padding:8px 16px;font-size:13px}

/* ── TOAST / ALERT ── */
.alert{padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:18px;display:flex;align-items:flex-start;gap:10px}
.alert-error{background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.3);color:#ffb0bb}
.alert-success{background:rgba(0,229,195,.08);border:1px solid rgba(0,229,195,.3);color:#7ff3dd}
.alert-warn{background:rgba(240,160,32,.08);border:1px solid rgba(240,160,32,.3);color:#ffd28a}
.alert-info{background:rgba(77,159,255,.08);border:1px solid rgba(77,159,255,.3);color:#a8cdff}

/* ── DASHBOARD COMPONENTS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px}
.kpi-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.kpi-val{font-family:'Space Mono',monospace;font-size:26px;font-weight:700;color:#fff;line-height:1.1}
.kpi-val.teal{color:var(--teal)}.kpi-val.amber{color:var(--amber)}.kpi-val.red{color:var(--red)}.kpi-val.blue{color:var(--blue)}
.kpi-sub{margin-top:6px;font-size:12px;color:var(--text3);font-family:'Space Mono',monospace}

.panel{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.panel-title{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:#fff}
.panel-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.panel-body{padding:22px}
.panel-body.tight{padding:0}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;padding:12px 22px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.table td{padding:14px 22px;border-bottom:1px solid var(--border);color:var(--text2)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,.02);color:var(--text)}
.mono{font-family:'Space Mono',monospace}
.up{color:var(--teal)}
.dn{color:var(--red)}

.empty{padding:48px 22px;text-align:center;color:var(--text3);font-size:14px}

/* ── TABS ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}
.tab{padding:12px 20px;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-left:none;border-right:none;border-top:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--teal);border-bottom-color:var(--teal)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700}
.badge.success{background:rgba(0,229,195,.12);color:var(--teal)}
.badge.warn{background:rgba(240,160,32,.12);color:var(--amber)}
.badge.danger{background:rgba(255,77,109,.12);color:var(--red)}
.badge.info{background:rgba(77,159,255,.12);color:var(--blue)}
.badge.neutral{background:rgba(255,255,255,.06);color:var(--text2)}

/* ── SPINNER ── */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── ACTIVATION STATUS CARD ── */
.activation{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:24px}
.activation .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.activation .left{display:flex;align-items:center;gap:14px}
.activation .icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,229,195,.1);color:var(--teal);font-size:20px}
.activation .icon.fail{background:rgba(255,77,109,.1);color:var(--red)}
.activation .icon.warn{background:rgba(240,160,32,.1);color:var(--amber)}
.activation h4{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:#fff;margin-bottom:2px}
.activation p{font-size:13px;color:var(--text2)}

/* ── RESPONSIVE ── */
/* ── RESPONSIVE ──
   Z131 #6: 表格统一外包 .table-wrap 实现横向滚动, 防手机端撑爆
*/
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap > .table{min-width:640px}

/* Z131 #2a: 语言切换下拉 (替换原 <a> 文字链, 易点击, 放 nav 最右) */
.lang-select{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:7px 26px 7px 10px;border-radius:8px;
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  cursor:pointer;line-height:1;height:32px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%238a97b0'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}
.lang-select:hover{border-color:var(--teal)}
.lang-select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(0,229,195,.15)}
.lang-select option{background:var(--bg2);color:var(--text)}

@media (max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}
  .nav-links{display:none}
  .wrap{padding:32px 20px}
}
@media (max-width:600px){
  .kpi-grid{grid-template-columns:1fr}
  .wrap-narrow{padding:32px 16px}
  .auth-card{padding:28px 22px}
}

/* ── UTIL ── */
.hidden{display:none!important}
.text-center{text-align:center}
.text-right,.table th.text-right,.table td.text-right{text-align:right}
.gap-2{gap:8px}.gap-4{gap:16px}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}