/* ============================================================
   梦影 · 视觉升级 V2  —— 午夜靛蓝 + 紫青渐变
   ============================================================ */

/* ── 基础质感 ── */
body{letter-spacing:.1px}
.card{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 62%,rgba(139,108,255,.05));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 14px 34px -18px rgba(6,8,20,.9),inset 0 1px 0 rgba(255,255,255,.055);
}
.sec-title::before{background:var(--goldgrad);box-shadow:0 0 12px rgba(139,108,255,.7)}
.h1,.login-name,.bal .v,.count .c b{letter-spacing:0}

/* ── 按钮 ── */
.btn{
  height:52px;border-radius:16px;font-size:15px;font-weight:700;letter-spacing:1.6px;
  background:var(--goldgrad);color:#080c10;
  box-shadow:0 14px 30px -12px rgba(111,84,255,.75),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:active{transform:scale(.975);box-shadow:0 6px 16px -8px rgba(111,84,255,.6)}
.btn.ghost{
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  color:var(--txt);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn .spin{border:2px solid rgba(10,13,28,.25);border-top-color:#080c10}

/* ── 登录页 ── */
#login{gap:0}
.login-mark{
  filter:drop-shadow(0 18px 40px rgba(111,84,255,.45));
}
.login-name{font-weight:800}
.login-sub{color:rgba(236,241,255,.42)}
.login-card{
  margin-top:30px;padding:20px;border-radius:22px;
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 44px -22px rgba(4,6,16,.95),inset 0 1px 0 rgba(255,255,255,.06);
}
.field{background:rgba(9,12,26,.55);border:1px solid var(--line2);border-radius:14px}
.field:focus-within{border-color:rgba(139,108,255,.75);background:rgba(139,108,255,.08);
  box-shadow:0 0 0 4px rgba(139,108,255,.12)}
.field input{letter-spacing:2px}
.login-card .btn{margin-top:18px}
.hint b{color:var(--gold2)}

/* ── 顶栏 ── */
.iconbtn{background:linear-gradient(158deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:13px}
.topbar .t h1{letter-spacing:.4px}

/* ── 用户卡 ── */
.ucard{padding:20px 18px 18px}
.ucard::after{background:radial-gradient(circle,rgba(139,108,255,.20),transparent 66%)}
.ucard::before{content:"";position:absolute;left:-30px;bottom:-60px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(62,200,255,.13),transparent 68%)}
.ucard .row{gap:14px}
.avaWrap{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;padding:2.5px;
  background:var(--goldgrad);
  box-shadow:0 10px 24px -10px rgba(111,84,255,.85);
}
.avaWrap .ava{width:100%;height:100%;border-radius:50%;object-fit:cover;border:0;
  background:rgba(9,12,26,.9)}
.ava.ph{
  width:100%;height:100%;border-radius:50%;border:0;
  background:linear-gradient(140deg,#0d3a30,#121a1d);
  color:#d5f2e9;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.ucard .nm{font-size:18px;font-weight:800}
.ucard .id{background:rgba(139,108,255,.13);border:1px solid rgba(139,108,255,.3);color:#9fe9d0;
  border-radius:9px;font-weight:600}
.ucard .id svg{stroke:#9fe9d0}
.bal .v{font-size:27px;font-weight:800;letter-spacing:-.5px}
.stats .s b{font-size:17px;font-weight:800}
.stats .s span{letter-spacing:.6px}

/* ── 搜索 / 分类 ── */
.search{border-radius:15px;background:rgba(9,12,26,.5);border:1px solid var(--line2);padding:13px 16px}
.search:focus-within{border-color:rgba(139,108,255,.6);box-shadow:0 0 0 4px rgba(139,108,255,.1)}
.chip{border-radius:12px;padding:8px 16px}
.chip.on{background:var(--goldgrad);color:#080c10;box-shadow:0 8px 20px -8px rgba(111,84,255,.8)}
.chip.on b{opacity:.75}

/* ── 功能列表 ── */
.fn{border-radius:17px;padding:15px}
.fn::after{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(139,108,255,.75),transparent);opacity:0;transition:.2s}
.fn:active::after{opacity:1}
.fn .ic{background:linear-gradient(150deg,rgba(139,108,255,.22),rgba(62,200,255,.10));
  border:1px solid rgba(139,108,255,.26);border-radius:14px}
.fn .ic svg{stroke:#8ce2c8}
.fn .tx b{font-size:15px}
.fn .cost{border-radius:9px;letter-spacing:.3px}
.fn .cost.free{color:var(--ok);background:rgba(63,224,160,.1);border-color:rgba(63,224,160,.22)}

/* ── 表单 ── */
.costbar .dot{background:var(--gold2);box-shadow:0 0 10px rgba(139,108,255,.9)}

/* ── 结果卡 ── */
.result{border-radius:var(--r);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.02))}
.pill.ok{background:rgba(63,224,160,.12);border-color:rgba(63,224,160,.26)}
.body code{color:#95e5cc}
.body blockquote{border-left-color:rgba(139,108,255,.6);background:rgba(139,108,255,.07)}

/* ── 加载 ── */
.ring{border-color:rgba(139,108,255,.22);border-top-color:#6ddcbb}
.loading{letter-spacing:.5px}

/* ── 底部导航 ── */
.nav .in{background:rgba(11,15,32,.82);border:1px solid var(--line2);
  box-shadow:0 -6px 30px -12px rgba(4,6,16,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.nav .it.on{color:#d8f5ec;background:linear-gradient(180deg,rgba(139,108,255,.22),rgba(139,108,255,.08))}
.nav .it.on svg{filter:drop-shadow(0 0 8px rgba(139,108,255,.85))}

/* ── 门禁:未授权 ── */
.gate-ic{background:linear-gradient(150deg,rgba(255,107,107,.14),rgba(255,107,107,.04));
  border:1px solid rgba(255,107,107,.3);border-radius:28px;
  box-shadow:0 18px 40px -20px rgba(255,107,107,.6)}
#gate h2{font-size:21px;font-weight:800;letter-spacing:.5px}
.idbox{background:rgba(139,108,255,.13);border:1px solid rgba(139,108,255,.32);
  border-radius:15px;padding:13px 20px}
.idbox b{color:#9fe9d0;font-size:20px}
.idbox svg{stroke:#9fe9d0}

/* ── 门禁:倒计时(重做) ── */
#gate{padding-top:calc(var(--safe-t) + 26px)}
.lockWrap{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}
.lockPill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:linear-gradient(140deg,rgba(139,108,255,.20),rgba(62,200,255,.10));
  border:1px solid rgba(139,108,255,.32);font-size:12px;font-weight:700;color:#d4f2e8;letter-spacing:1.5px}
.lockPill .pdot{width:7px;height:7px;border-radius:50%;background:#57e08d;
  box-shadow:0 0 0 0 rgba(87,224,141,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,224,141,.55)}70%{box-shadow:0 0 0 9px rgba(87,224,141,0)}100%{box-shadow:0 0 0 0 rgba(87,224,141,0)}}
.lockCard{margin-top:22px;width:100%;padding:26px 20px 22px;border-radius:26px;text-align:center;
  background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 60%,rgba(139,108,255,.06));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 60px -28px rgba(4,6,16,1),inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;overflow:hidden}
.lockCard::after{content:"";position:absolute;left:50%;top:-90px;transform:translateX(-50%);
  width:230px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(139,108,255,.28),transparent 68%)}
.lockCard .eyebrow{position:relative;z-index:1;color:rgba(200,188,255,.8);letter-spacing:7px;font-weight:700}
.lockTitle{position:relative;z-index:1;margin:10px 0 0;font-size:24px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(120deg,#ffffff,#7fe3c4 55%,#7fe6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lockHead{position:relative;z-index:1;margin:8px 0 0;font-size:13.5px;color:var(--txt2)}
.count{position:relative;z-index:1;display:flex;gap:9px;margin:24px 0 0;justify-content:center}
.count .c{width:70px;padding:14px 0 11px;border-radius:18px;
  background:linear-gradient(160deg,rgba(139,108,255,.16),rgba(255,255,255,.03));
  border:1px solid rgba(139,108,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -18px rgba(111,84,255,.9)}
.count .c b{font-size:27px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,#ffffff,#82dfc3 60%,#7fe6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15}
.count .c span{display:block;margin-top:3px;font-size:10.5px;color:rgba(236,241,255,.45);letter-spacing:2px}
.lockBar{position:relative;z-index:1;margin:20px auto 0;width:100%;max-width:300px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.07);overflow:hidden}
.lockBar i{display:block;height:100%;width:38%;border-radius:99px;background:var(--goldgrad);
  animation:slide 1.9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.lockNote{position:relative;z-index:1;font-size:12.5px;line-height:1.9;margin:18px 0 0;color:var(--txt3)}
.chn{width:100%;margin-top:24px;text-align:left}
.chn .r{border-radius:15px;padding:13px 15px;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line)}
.chn .r .no{background:linear-gradient(150deg,rgba(139,108,255,.22),rgba(62,200,255,.12));
  border:1px solid rgba(139,108,255,.28);color:#9fe9d0;border-radius:9px}
.lockFoot{margin-top:20px;font-size:11.5px;color:rgba(236,241,255,.28);letter-spacing:.6px}

/* ── 列表行 / 空态 / toast ── */
.rows{border-radius:var(--r)}
.row:active{background:rgba(139,108,255,.08)}
.empty svg{stroke:rgba(236,241,255,.3)}
#toast{border-radius:14px;backdrop-filter:blur(14px)}