/* ============================================================
   梦影 · 视觉升级 V3 —— 液态玻璃(Liquid Glass)
   叠加在 v2 之上,只做质感强化,不改布局
   ============================================================ */

/* ── 全局:玻璃面 ── */
.card{
  background:linear-gradient(158deg,rgba(255,255,255,.115),rgba(255,255,255,.028) 52%,rgba(139,108,255,.055));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 48px -26px rgba(2,4,14,1),
             inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 -1px 0 rgba(255,255,255,.045);
  position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(128% 74% at 10% -16%,rgba(255,255,255,.24),transparent 56%);
}
.card>*{position:relative;z-index:1}

/* ── 头像:彩环玻璃 ── */
.avaWrap{
  border-radius:50%;padding:2.6px;
  background:conic-gradient(from 200deg,#5ee7ff,#12b483 42%,#ff7ec4 70%,#5ee7ff);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),
             0 12px 26px -12px rgba(92,110,255,.95),
             0 0 24px -6px rgba(139,108,255,.55);
  position:relative;
}
.avaWrap::after{
  content:"";position:absolute;inset:2.6px;border-radius:50%;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(255,255,255,.30),transparent 46%);
  mix-blend-mode:screen;
}
.avaWrap .ava{border-radius:50%;box-shadow:inset 0 0 0 1px rgba(8,10,24,.9)}
.ava.ph{
  background:linear-gradient(150deg,#12463a,#123129 52%,#0d3a30);
  color:#d9f5ec;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -14px 26px -16px rgba(0,0,0,.9);
}

/* ── 登录页 ── */
.login-card{
  background:linear-gradient(158deg,rgba(255,255,255,.115),rgba(255,255,255,.026) 56%,rgba(139,108,255,.06));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 28px 60px -28px rgba(2,4,14,1),inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);
}
.login-mark{border-radius:26px;
  box-shadow:0 22px 48px -18px rgba(110,110,255,.9),inset 0 0 0 1px rgba(255,255,255,.18)}
.field{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* ── 搜索 / 分类 / 功能条 ── */
.search{
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.chip{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
}
.fn{
  background:linear-gradient(158deg,rgba(255,255,255,.095),rgba(255,255,255,.026));
  border:1px solid rgba(255,255,255,.115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 10px 24px -18px rgba(0,0,0,.95);
}
.fn .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -12px rgba(0,0,0,.9)}

/* ── 底部导航:悬浮玻璃 ── */
.nav .in{
  background:linear-gradient(158deg,rgba(255,255,255,.115),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 -10px 40px -16px rgba(2,4,14,1),inset 0 1px 0 rgba(255,255,255,.26);
}

/* ── 门禁:未授权 ── */
.gate-ic{
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,107,107,.06));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 22px 46px -20px rgba(255,107,107,.7),inset 0 1px 0 rgba(255,255,255,.24);
}
.idbox{
  background:linear-gradient(158deg,rgba(255,255,255,.11),rgba(139,108,255,.09));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -18px rgba(111,84,255,.9);
}

/* ── 门禁:倒计时(液态玻璃重做) ── */
.lockCard{
  background:linear-gradient(158deg,rgba(255,255,255,.125),rgba(255,255,255,.028) 52%,rgba(139,108,255,.075));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 34px 70px -30px rgba(2,4,14,1),
             inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);
}
.lockCard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(125% 70% at 12% -18%,rgba(255,255,255,.30),transparent 56%);
}
.lockCard::after{z-index:0;opacity:.9}
.lockCard>*{position:relative;z-index:1}
.lockTitle{
  background:linear-gradient(112deg,#ffffff,#d4f2e8 46%,#8fe6ff 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px rgba(139,108,255,.35);
}
.count{gap:10px}
.count .c{
  width:72px;padding:15px 0 12px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.145),rgba(255,255,255,.032) 55%,rgba(139,108,255,.10));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(255,255,255,.05),
             0 16px 32px -20px rgba(70,90,255,.95);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
}
.count .c::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 66% at 22% -22%,rgba(255,255,255,.34),transparent 62%);
}
.count .c b{
  background:linear-gradient(150deg,#ffffff,#9fe9d0 58%,#8fe6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(120,120,255,.45));
}
.count .c span{color:rgba(236,241,255,.52);letter-spacing:2.4px}
.lockBar{
  height:6px;background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.lockBar i{
  background:linear-gradient(90deg,#4fd8ff,#12b483 55%,#ff6fae);
  box-shadow:0 0 14px rgba(139,108,255,.8);
}
.lockPill{
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(139,108,255,.10));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.chn .r{
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* ── 结果卡 / 其他玻璃面 ── */
.result{
  background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.026));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 40px -26px rgba(0,0,0,.95);
}
.rows{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
}
.row+.row{border-top:1px solid rgba(255,255,255,.07)}
.iconbtn{
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
#toast{
  background:linear-gradient(158deg,rgba(28,34,66,.92),rgba(14,18,40,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 44px -20px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.20);
}

/* ── 液态玻璃棱边(真正的玻璃感:高光边 + 折射色) ── */
.card,.lockCard,.login-card,.result,.search,.rows,.fn,.idbox,.count .c{
  border:1px solid transparent !important;
  background-origin:border-box;
  background-clip:padding-box,border-box;
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.125),rgba(255,255,255,.028) 52%,rgba(139,108,255,.075)),
    linear-gradient(150deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,.02) 58%,rgba(150,130,255,.50) 100%);
}
.fn{
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.095),rgba(255,255,255,.026)),
    linear-gradient(150deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.06) 36%,rgba(255,255,255,.02) 60%,rgba(150,130,255,.34) 100%);
}
.rows{
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022)),
    linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.05) 36%,rgba(255,255,255,.02) 60%,rgba(150,130,255,.28) 100%);
}
.search{
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
    linear-gradient(150deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.06) 36%,rgba(255,255,255,.02) 60%,rgba(150,130,255,.30) 100%);
}
.count .c{
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.15),rgba(255,255,255,.032) 55%,rgba(139,108,255,.10)),
    linear-gradient(150deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,.03) 60%,rgba(160,140,255,.60) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             0 18px 34px -20px rgba(70,90,255,1),
             0 0 22px -10px rgba(139,108,255,.65) !important;
}
.lockCard{
  box-shadow:0 36px 74px -32px rgba(2,4,14,1),
             inset 0 1px 0 rgba(255,255,255,.22),
             0 0 46px -18px rgba(120,110,255,.55) !important;
}
.idbox{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -18px rgba(111,84,255,.95) !important}