/* ============================================================
   DupeForums —— 账户中心 / 认证页样式
   依赖 assets/site.css 的设计变量与基础组件
   ============================================================ */

/* ============================ 登录 / 注册 ============================ */
.authwrap{
  display:grid;grid-template-columns:1fr 1fr;max-width:960px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);
}
.authbrand{
  position:relative;overflow:hidden;padding:clamp(26px,3.4vw,44px);color:#fff;display:flex;flex-direction:column;
  background:
    linear-gradient(180deg,rgba(10,55,130,.82) 0%,rgba(21,101,192,.62) 42%,rgba(10,55,130,.88) 100%),
    url('auth-bg.png') center bottom / cover no-repeat,
    linear-gradient(150deg,#0D47A1,#1565C0 52%,#2E7BE0);
}
.authbrand::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.2) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 88% 8%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 85% 80% at 88% 8%,#000,transparent 72%);
}
.authbrand>*{position:relative;z-index:1}
.authbrand .lb{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.authbrand h2{color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.16;margin-top:12px}
.authbrand p{margin:12px 0 0;font-size:.86rem;color:rgba(255,255,255,.85);line-height:1.7;max-width:26em}
.authfeat{list-style:none;margin:auto 0 0;padding:22px 0 0;display:grid;gap:12px}
.authfeat li{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:rgba(255,255,255,.92)}
.authfeat svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:#8BE3A6}
.authform{padding:clamp(24px,3.2vw,40px)}
.authform h1{font-size:1.45rem}
.authform .sub{margin:8px 0 16px;color:var(--dim);font-size:.86rem}
.aform{display:grid;gap:14px}
.alabel{display:block;font-size:.79rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.alabel .req{color:var(--hot)}
.ainput{
  width:100%;height:44px;padding:0 14px;border-radius:12px;font-size:.89rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);outline:none;transition:.2s;
}
.ainput::placeholder{color:var(--faint)}
.ainput:focus{border-color:var(--brand);background:var(--card);box-shadow:0 0 0 4px var(--brand-tint)}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem}
.arow label{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer}
.arow input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand)}
.arow a{color:var(--brand);font-weight:600}
.aerr{font-size:.75rem;color:var(--hot);margin:6px 0 0}
.ahint{font-size:.75rem;color:var(--faint);margin:7px 0 0}
.authfoot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.84rem;color:var(--dim);text-align:center}
.authfoot a{color:var(--brand);font-weight:600}
/* Minecraft 工作台风格验证按钮 */
.mcbtn{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;background:#6B6B6B;color:#fff;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;cursor:pointer;
  border:3px solid;border-color:#A0A0A0 #373737 #373737 #A0A0A0;text-shadow:2px 2px 0 #3F3F3F;transition:.15s;
}
.mcbtn:hover{background:#7B7B7B;color:#FFFF55}
.mcbtn img{width:20px;height:20px;image-rendering:pixelated}
.mcbtn--ok{background:#4CAF50;border-color:#81C784 #2E7D32 #2E7D32 #81C784;color:#fff;text-shadow:1px 1px 0 #1B5E20}

/* 登录 / 注册卡片等高 */
@media (min-width:1001px){
  .authwrap{min-height:520px}
}

/* ============================ 账户中心布局 ============================ */
.acct{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;align-items:start}
.acct>*{min-width:0}
.acctnav{position:sticky;top:86px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-sm)}
.acctnav__u{display:flex;align-items:center;gap:11px;padding:6px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.acctnav__u b{display:block;font-size:.88rem;font-weight:600}
.acctnav__u em{font-style:normal;font-size:.71rem;color:var(--faint)}
.acctnav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:.845rem;color:var(--ink-2);transition:.18s}
.acctnav a:hover{background:var(--paper);color:var(--ink)}
.acctnav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.acctnav a svg{width:15px;height:15px;flex-shrink:0}
.acctnav a .n{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;font-weight:700;background:var(--hot);color:#fff;padding:1px 6px;border-radius:99px}
.acctnav .sep{height:1px;background:var(--line);margin:8px 6px}

/* ============================ 资料头 ============================ */
.phero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--card);margin-bottom:16px}
.phero__bg{height:180px;background:linear-gradient(120deg,#0D47A1,#1565C0 48%,#2E7BE0)}
.phero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.phero__in{padding:0 26px 24px;margin-top:-48px}
.phero__row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.phero__ava{
  width:96px;height:96px;border-radius:24px;border:4px solid var(--card);overflow:hidden;flex-shrink:0;
  background:var(--brand-soft);display:grid;place-items:center;box-shadow:var(--shadow);
}
.phero__ava img{width:100%;height:100%;object-fit:cover}
.phero__ava b{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--brand)}
.phero__who{flex:1;min-width:0;padding-bottom:4px}
.phero__who h1{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.phero__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.phero__act{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:4px}
.phero__bio{margin:14px 0 0;font-size:.87rem;color:var(--dim);line-height:1.7;max-width:48em}
.phero__facts{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:.79rem;color:var(--faint)}
.phero__facts span{display:inline-flex;align-items:center;gap:6px}
.phero__facts svg{width:13px;height:13px}

/* ============================ 统计块 ============================ */
.st4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st4>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 19px;box-shadow:var(--shadow-sm)}
.st4 .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;margin-bottom:11px}
.st4 .ico svg{width:15px;height:15px}
.st4 b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st4 span{font-size:.74rem;color:var(--faint)}

/* ============================ 余额 ============================ */
.bal2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.bal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.bal .lb{font-family:var(--font-mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.bal .v{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin:9px 0 0}
.bal .v img{width:26px;height:26px;image-rendering:pixelated}
.bal.gold .v{color:var(--gold)}
.bal.iron .v{color:var(--iron)}
.bal .note{margin:8px 0 0;font-size:.78rem;color:var(--faint)}
.bal .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ============================ 动态列表（通知 / 流水） ============================ */
.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:14px;align-items:flex-start;padding:15px 4px;border-top:1px solid var(--line)}
.fitem:first-child{border-top:0}
.fitem--unread{background:var(--brand-soft);border-radius:12px;padding-inline:14px}
.fitem__i{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:grid;place-items:center}
.fitem__i svg{width:17px;height:17px}
.fitem__b{flex:1;min-width:0}
.fitem__b b{display:block;font-size:.88rem;font-weight:600}
.fitem__b p{margin:4px 0 0;font-size:.8rem;color:var(--dim)}
.fitem__b em{font-style:normal;font-size:.73rem;color:var(--faint);display:block;margin-top:4px}
.fitem__r{flex-shrink:0;text-align:right;font-family:var(--font-mono);font-size:.83rem;font-weight:700;white-space:nowrap}
.fitem__r.up{color:var(--java)}
.fitem__r.down{color:var(--hot)}
.fitem__r em{display:block;font-style:normal;font-size:.7rem;font-weight:400;color:var(--faint);margin-top:3px}

/* ============================ 设置行 / 开关 ============================ */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fblock{display:flex;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.fblock:first-of-type{border-top:0}
.fblock>div{flex:1;min-width:0}
.fblock b{display:block;font-size:.87rem;font-weight:600}
.fblock span{font-size:.77rem;color:var(--faint)}
.sw{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:.79rem;color:var(--ink-2);cursor:pointer;flex-shrink:0}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;transition:.22s;flex-shrink:0}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+i{background:var(--brand)}
.sw input:checked+i::after{transform:translateX(16px)}

/* ============================ 等级进度 ============================ */
.lvbar{height:9px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin:12px 0 8px}
.lvbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),#4E97EC);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.lvn{display:flex;justify-content:space-between;font-size:.76rem;color:var(--faint)}

/* ============================ 私信 ============================ */
.msgbubbles{display:flex;flex-direction:column;gap:14px}
.bub{display:flex;gap:11px;align-items:flex-start;max-width:76%}
.bub__a{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.8rem}
.bub__c{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 15px;font-size:.85rem;line-height:1.65;color:var(--ink-2)}
.bub__c em{display:block;font-style:normal;font-size:.7rem;color:var(--faint);margin-top:6px}
.bub--me{align-self:flex-end;flex-direction:row-reverse}
.bub--me .bub__a{background:var(--brand);color:#fff}
.bub--me .bub__c{background:var(--brand);border-color:var(--brand);color:#fff}
.bub--me .bub__c em{color:rgba(255,255,255,.72)}

/* ============================ 订单表列宽 ============================ */
.orow{grid-template-columns:116px minmax(0,1.8fr) 90px 92px 92px 130px auto}
.orow .c-detail{justify-self:end}
@media (max-width:1000px){
  .orow{grid-template-columns:minmax(0,1fr) auto auto}
  .orow .c-no,.orow .c-seller,.orow .c-time{display:none}
  .orow .c-detail{grid-column:1 / -1;justify-self:start;margin-top:8px}
}

/* ============================ 响应式 ============================ */
@media (max-width:1000px){
  .authwrap{grid-template-columns:1fr;max-width:540px}
  .authbrand{padding-bottom:26px}
  .authfeat{display:none}
  .acct{grid-template-columns:1fr;gap:16px}
  .acctnav{position:static;display:flex;flex-wrap:wrap;gap:6px;padding:10px}
  .acctnav__u,.acctnav .sep{display:none}
  .acctnav a{flex:1 1 auto;justify-content:center;white-space:nowrap;padding:8px 13px}
  .acctnav a .n{margin-left:6px}
}
@media (max-width:760px){
  .st4{grid-template-columns:repeat(2,1fr)}
  .bal2{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .phero__bg{height:140px}
  .phero__in{padding:0 18px 20px;margin-top:-38px}
  .phero__ava{width:76px;height:76px;border-radius:20px}
  .bub{max-width:92%}
}
@media (max-width:640px){
  .phero__facts{gap:14px}
}