/* ============================================================
   梦影 · 视觉升级 V4 — NOCTURNE
   暗夜电影感：墨黑 + 灰玫瑰 + 冷墨蓝
   覆盖 V1/V2/V3 的绿紫配色与玻璃质感，只改观感不改布局
   ============================================================ */

:root{
  --bg0:#05060a; --bg1:#0a0b12; --bg2:#12141c;
  --gold1:#f0e2e4; --gold2:#d6949e; --gold3:#c98a95; --gold4:#3d272c;
  --cy:#93a6dc; --cy2:#bcc9f0;
  --txt:#f2f3f7; --txt2:rgba(242,243,247,.66); --txt3:rgba(242,243,247,.40);
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.065);
  --ok:#7fe0b0; --warn:#e0b48c; --err:#e0838d; --blue:#93a6dc;
  --goldgrad:linear-gradient(135deg,#f0e2e4,#d6949e 46%,#93a6dc);
  --rose:#d6949e; --rose-d:rgba(214,148,158,.42); --rose-f:rgba(214,148,158,.09);
  --r:20px;
}

/* ── 全局背景：去掉绿紫极光，换暗夜氛围 ── */
.bg{background:
  radial-gradient(110% 70% at 8% 4%,rgba(147,166,220,.13) 0%,transparent 56%),
  radial-gradient(90% 62% at 96% 92%,rgba(214,148,158,.12) 0%,transparent 58%),
  linear-gradient(178deg,#05060a 0%,#090a11 52%,#05060a 100%)}
.bg .aurora{opacity:.30;filter:blur(84px)}
.bg .a1{background:radial-gradient(circle,#93a6dc,transparent 68%)}
.bg .a2{background:radial-gradient(circle,#d6949e,transparent 70%)}
.bg .a3{background:radial-gradient(circle,#6b78a8,transparent 72%)}
.bg .grid{opacity:.028}

/* ── 卡片：去掉重投影和磨砂，改细边 + 极淡填充 ── */
.card,.rows,.result,.search,.fn,.idbox{
  background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 62%,rgba(214,148,158,.028));
  border:1px solid var(--line);
  box-shadow:0 16px 40px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
}
.sec-title::before{background:linear-gradient(180deg,var(--rose),var(--cy));box-shadow:none}
.btn{
  background:var(--goldgrad);color:#0a0b10;
  box-shadow:0 14px 30px -18px rgba(214,148,158,.8),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:active{box-shadow:0 6px 16px -10px rgba(214,148,158,.6)}
.btn.ghost{
  background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line2);
}
.btn .spin{border:2px solid rgba(10,11,16,.22);border-top-color:#0a0b10}

/* ── 头像环：绿紫彩环 → 玫瑰↔墨蓝 ── */
.avaWrap{
  background:conic-gradient(from 200deg,#93a6dc,#d6949e 40%,#f0e2e4 62%,#93a6dc);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 26px -14px rgba(214,148,158,.7);
}
.ava.ph{background:linear-gradient(150deg,#2a1f24,#1a1c26 52%,#231d2a);color:#f0e2e4}

/* ── 登录页 ── */
.login-card{
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 58%,rgba(147,166,220,.05));
  border:1px solid var(--line2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.09);
}
.idbox{background:var(--rose-f);border:1px solid var(--rose-d)}
.idbox b{color:#f0e2e4}
.idbox svg{stroke:var(--rose)}

/* ══════════════════════════════════════════════
   等待页 / 门禁页 —— 整页重做
   ══════════════════════════════════════════════ */
#gate{padding-top:calc(var(--safe-t) + 18px)}

/* 背景人像层（仅等待页渲染，随 innerHTML 一起销毁）
   —— 上半屏做人像，人像下方渐隐到纯黑，卡片压在人像下沿 */
.gate-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gate-bg .gb-pic{
  position:absolute;left:0;right:0;top:0;height:50vh;min-height:300px;
  background:url(brand/bg-muse.jpg?v=2) 54% 22%/cover no-repeat;
  opacity:.88;
  animation:gbIn 1.8s cubic-bezier(.22,.7,.24,1) both;
}
@keyframes gbIn{from{opacity:0;transform:scale(1.05)}to{opacity:.88;transform:none}}
.gate-bg .gb-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,
    rgba(5,6,10,.42) 0%,
    rgba(5,6,10,.10) 15%,
    rgba(5,6,10,.14) 34%,
    rgba(5,6,10,.74) 47%,
    rgba(5,6,10,.95) 55%,
    #05060a 63%,
    #05060a 100%),
  radial-gradient(130% 50% at 10% 6%,rgba(147,166,220,.18),transparent 62%),
  radial-gradient(100% 44% at 92% 40%,rgba(214,148,158,.18),transparent 64%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.85) 74%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.85) 74%,transparent 100%)}
.gate-bg .gb-grain{position:absolute;inset:0;height:58vh;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.lockWrap{position:relative;z-index:2;width:100%;max-width:430px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center}

/* 顶部状态条 */
.lockPill{
  display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);
  font-size:11px;font-weight:500;color:rgba(242,243,247,.82);letter-spacing:.2em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lockPill .pdot{width:5px;height:5px;border-radius:50%;background:#7fe0b0;
  box-shadow:0 0 0 0 rgba(127,224,176,.55);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,224,176,.5)}70%{box-shadow:0 0 0 9px rgba(127,224,176,0)}100%{box-shadow:0 0 0 0 rgba(127,224,176,0)}}

/* 主卡：细边玻璃，弱投影 */
.lockCard{
  margin-top:clamp(110px,calc(50vh - 152px),380px);
  width:100%;padding:32px 24px 26px;border-radius:28px;text-align:center;
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.062),rgba(255,255,255,.016) 56%,rgba(214,148,158,.035));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 80px -44px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%)}
.lockCard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.lockCard::after{content:"";position:absolute;left:50%;top:-120px;transform:translateX(-50%);
  width:280px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,148,158,.20),transparent 68%)}
.lockCard>*{position:relative;z-index:1}

.lockCard .eyebrow{color:var(--rose);letter-spacing:.42em;font-weight:500;font-size:10px}
.lockTitle{margin:14px 0 0;font-size:25px;font-weight:300;letter-spacing:.01em;line-height:1.34;color:#fff;
  background:none;-webkit-text-fill-color:currentColor}
.lockHead{margin:12px 0 0;font-size:13px;color:rgba(242,243,247,.56);letter-spacing:.04em}

/* 倒计时：细线分隔的列，不用方块 */
.count{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:30px 0 0}
.count .c{
  flex:1 1 0;min-width:0;padding:0 4px;border-radius:0;
  background:none;border:none;box-shadow:none;position:relative}
.count .c+.c::before{content:"";position:absolute;left:0;top:6px;bottom:16px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.count .c b{
  display:block;font-size:34px;font-weight:200;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.06;
  background:linear-gradient(180deg,#ffffff 12%,#e3ccd0 58%,#93a6dc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.count .c span{display:block;margin-top:9px;font-size:10px;
  color:rgba(242,243,247,.40);letter-spacing:.24em}

/* 进度条：细，走玫瑰→墨蓝 */
.lockBar{margin:30px auto 0;width:100%;max-width:280px;height:2px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.lockBar i{display:block;height:100%;width:34%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--rose) 40%,var(--cy) 78%,transparent);
  animation:slide 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes slide{0%{transform:translateX(-115%)}100%{transform:translateX(330%)}}

.lockNote{margin:24px 0 0;font-size:12.5px;line-height:2.05;color:rgba(242,243,247,.42)}
.lockNote br+*{margin-top:2px}

/* 待接入通道列表 */
.chn{width:100%;margin-top:26px;text-align:left}
.chn .r{border-radius:16px;padding:14px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.10)}
.chn .r .no{background:var(--rose-f);border:1px solid var(--rose-d);
  color:var(--rose);border-radius:9px;font-weight:500}
.chn .r .nm{font-weight:500}
.chn .r .ds{color:rgba(242,243,247,.40)}

.lockFoot{margin-top:26px;font-size:10.5px;color:rgba(242,243,247,.24);letter-spacing:.24em}

/* 门禁页里的按钮统一成细边风 */
#gate .btn{background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.022));
  color:var(--txt);border:1px solid var(--line2);box-shadow:none}
#gate .btn:active{background:rgba(255,255,255,.10)}

/* ── 移动端微调 ── */
@media (max-width:360px){
  .count .c b{font-size:28px}
  .lockTitle{font-size:22px}
  .lockCard{padding:28px 18px 24px}
}
@media (min-height:800px){
  #gate{padding-top:calc(var(--safe-t) + 62px)}
}

/* ── 降级动效偏好 ── */
@media (prefers-reduced-motion:reduce){
  .bg .aurora,.lockBar i,.lockPill .pdot{animation:none!important}
  .gate-bg .gb-pic{animation:none;opacity:.66}
}