/* ============================================================
   极优网 · 账号体系样式（注册/登录 + 用户中心）
   ============================================================ */

.auth-body{
  min-height:100vh;display:flex;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(224,179,76,.10), transparent 60%),
    radial-gradient(800px 500px at 92% 92%, rgba(91,157,255,.06), transparent 60%),
    var(--bg);
}
.auth-wrap{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh;width:100%}

/* ---------- 左侧品牌 ---------- */
.auth-brand{
  padding:48px 56px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);position:relative;overflow:hidden
}
.auth-brand::after{
  content:'';position:absolute;width:520px;height:520px;bottom:-260px;left:-160px;
  background:radial-gradient(circle,rgba(224,179,76,.09),transparent 65%);pointer-events:none
}
.ab-logo{display:flex;align-items:center;gap:11px;position:relative;z-index:2}
.ab-main{margin:auto 0;position:relative;z-index:2;max-width:460px}
.ab-main h1{font-size:44px;font-weight:900;letter-spacing:-1.2px;line-height:1.22;margin-bottom:26px}
.ab-main>p{font-size:16px;color:var(--txt-2);margin-bottom:34px}
.ab-list{list-style:none;display:flex;flex-direction:column;gap:22px}
.ab-list li{display:flex;gap:16px;align-items:flex-start}
.ab-ico{
  width:40px;height:40px;border-radius:11px;background:var(--gold-dim);color:var(--gold);
  display:grid;place-items:center;font-size:17px;flex-shrink:0
}
.ab-list b{display:block;font-size:16px;margin-bottom:4px}
.ab-list p{font-size:14px;color:var(--txt-3);line-height:1.65}
.ab-trust{
  display:flex;gap:20px;flex-wrap:wrap;position:relative;z-index:2;
  font-size:12.5px;color:var(--txt-3)
}
.ab-trust span{display:flex;align-items:center;gap:6px}
.ab-trust span::before{content:'✓';color:var(--green);font-weight:700}

/* ---------- 右侧表单 ---------- */
.auth-main{display:grid;place-items:center;padding:48px 40px}
.auth-card{width:100%;max-width:460px}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-bottom:1px solid var(--line);margin-bottom:34px}
.tab{
  background:none;border:0;color:var(--txt-3);font-size:17px;font-weight:700;
  padding:14px 0;cursor:pointer;transition:.24s
}
.tab.on{color:var(--txt)}
.tab-slider{
  position:absolute;bottom:-1px;left:0;width:50%;height:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transition:transform .3s cubic-bezier(.4,0,.2,1)
}
.tabs[data-tab="register"] .tab-slider{transform:translateX(100%)}

.auth-form{display:none;animation:fadeUp .34s ease}
.auth-form.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.auth-form h2{font-size:27px;font-weight:800;margin-bottom:8px;letter-spacing:-.5px}
.form-sub{font-size:14.5px;color:var(--txt-3);margin-bottom:30px}
.form-sub a{color:var(--gold);font-weight:600}
.form-sub a:hover{text-decoration:underline}

.field{margin-bottom:20px;flex:1;min-width:0}
.field label{display:block;font-size:13.5px;color:var(--txt-2);margin-bottom:8px;font-weight:500}
.field label em{font-style:normal;color:var(--gold);font-size:11px;margin-left:4px}
.field label em.opt{color:var(--txt-3)}
.field input{
  width:100%;padding:13px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--txt);outline:none;transition:.2s;
  font-size:15px
}
.field input::placeholder{color:var(--txt-3);opacity:.65}
.field input:focus{border-color:var(--gold);background:var(--card-hi);
  box-shadow:0 0 0 3px rgba(224,179,76,.1)}
.field input.bad{border-color:var(--red)}
.field-row{display:flex;gap:16px}
.hint{display:block;font-size:11.5px;color:var(--txt-3);margin-top:6px;line-height:1.5}
.hint.err{color:var(--red)}
.hint.ok{color:var(--green)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;background:none;cursor:pointer;
  color:var(--txt-3);font-size:15px;border-radius:8px;transition:.2s
}
.pw-toggle:hover{color:var(--gold);background:rgba(255,255,255,.05)}

.pw-meter{height:4px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:9px;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;border-radius:4px;transition:width .3s,background .3s}

.agree{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px;cursor:pointer}
.agree input{width:17px;height:17px;accent-color:var(--gold);margin-top:2px;flex-shrink:0}
.agree span{font-size:13.5px;color:var(--txt-2);line-height:1.65}
.agree a{color:var(--gold);text-decoration:underline}

.form-err{
  display:none;font-size:13.5px;color:var(--red);background:rgba(240,87,106,.1);
  border:1px solid rgba(240,87,106,.28);border-radius:var(--radius-sm);
  padding:11px 15px;margin-bottom:18px;line-height:1.6
}
.form-err.on{display:block;animation:shake .3s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.btn-lg{padding:16px;font-size:16px}
.auth-foot{text-align:center;margin-top:28px;font-size:13.5px}
.auth-foot a{color:var(--txt-3);transition:.2s}
.auth-foot a:hover{color:var(--gold)}

/* ============================================================
   用户中心
   ============================================================ */
.acc-body{background:var(--bg)}
.acc-wrap{max-width:1160px;margin:0 auto;padding:0 28px 80px}

.acc-head{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px 0 34px;flex-wrap:wrap
}
.acc-user{display:flex;align-items:center;gap:16px}
.avatar{
  width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#1a1400;display:grid;place-items:center;font-size:22px;font-weight:900;flex-shrink:0
}
.acc-user h1{font-size:23px;font-weight:800;margin-bottom:3px}
.acc-user p{font-size:13.5px;color:var(--txt-3)}
.acc-actions{display:flex;gap:11px;flex-wrap:wrap}

.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:.24s
}
.stat:hover{border-color:var(--gold)}
.stat b{display:block;font-size:30px;font-weight:900;color:var(--gold);letter-spacing:-1px;margin-bottom:5px}
.stat span{font-size:13px;color:var(--txt-3)}

.acc-section{margin-bottom:44px}
.acc-section-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;gap:16px;flex-wrap:wrap}
.acc-section-head h2{font-size:20px;font-weight:800}
.sec-tabs{display:flex;gap:8px;flex-wrap:wrap}
.sec-tab{padding:7px 16px;border-radius:100px;border:1px solid var(--line);
  background:none;color:var(--txt-3);cursor:pointer;font-size:13px;transition:.2s}
.sec-tab.on{background:var(--gold);border-color:var(--gold);color:#1a1400;font-weight:700}

.acard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-bottom:16px;transition:.24s
}
.acard:hover{border-color:var(--line-str)}
.acard-top{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:17px;flex-wrap:wrap}
.acard-title{font-size:17px;font-weight:700;margin-bottom:5px}
.acard-meta{font-size:12.5px;color:var(--txt-3);font-family:ui-monospace,Menlo,monospace}
.acard-body{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.acard-items{font-size:14px;color:var(--txt-2);line-height:1.8;flex:1;min-width:200px}
.acard-amt{font-size:22px;font-weight:900;color:var(--gold);white-space:nowrap}
.acard-ops{display:flex;gap:10px;margin-top:17px;padding-top:17px;border-top:1px solid var(--line);flex-wrap:wrap}

.txn-table{width:100%;border-collapse:collapse;font-size:13.5px}
.txn-table th{text-align:left;padding:12px 10px;color:var(--txt-3);font-weight:500;
  font-size:12.5px;border-bottom:1px solid var(--line)}
.txn-table td{padding:13px 10px;border-bottom:1px solid var(--line);color:var(--txt-2)}
.txn-table tr:last-child td{border:0}
.txn-table .amt{font-family:ui-monospace,Menlo,monospace;color:var(--txt);font-weight:600}
.txn-no{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--txt-3)}
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow-x:auto}

.empty{
  text-align:center;padding:70px 24px;color:var(--txt-3);
  background:var(--card);border:1px dashed var(--line-str);border-radius:var(--radius)
}
.empty div{font-size:42px;margin-bottom:14px;opacity:.4}
.empty p{font-size:14.5px;margin-bottom:20px}

.pw-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.pw-panel h3{font-size:17px;font-weight:700;margin-bottom:22px}
.pw-panel .field{max-width:420px}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-main{padding:44px 22px}
  .acc-stats{grid-template-columns:repeat(2,1fr)}
  .field-row{flex-direction:column;gap:0}
}
@media(max-width:560px){
  .acc-stats{grid-template-columns:1fr}
  .acc-wrap{padding:0 18px 60px}
}