/* ============ 玻璃输入弹窗 ============ */
#gdMask{
  position:fixed; inset:0; z-index:12000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(4,6,12,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  opacity:0; transition:opacity .22s ease;
}
#gdMask.on{ display:flex; opacity:1; }

.gd{
  width:100%; max-width:380px;
  border-radius:24px;
  padding:26px 22px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 46%, rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.30) inset;
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
#gdMask.on .gd{ transform:translateY(0) scale(1); opacity:1; }

.gd-ico{
  width:52px; height:52px; margin:0 auto 14px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  background:linear-gradient(150deg, rgba(120,170,255,.34), rgba(150,120,255,.22));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 6px 20px rgba(80,120,255,.28), 0 1px 0 rgba(255,255,255,.28) inset;
}

.gd-t{
  font-size:17px; font-weight:650; text-align:center;
  color:#f2f6ff; letter-spacing:.02em; margin-bottom:6px;
}
.gd-d{
  font-size:13px; line-height:1.5; text-align:center;
  color:rgba(220,230,255,.66); margin-bottom:18px;
  padding:0 6px;
}

/* ---- 输入框 ---- */
.gd-field{ position:relative; margin-bottom:14px; }
.gd-field label{
  display:block; font-size:12px; font-weight:600;
  color:rgba(210,225,255,.62); margin-bottom:7px;
  padding-left:2px; letter-spacing:.03em;
}
.gd-inwrap{
  position:relative; display:flex; align-items:center;
  border-radius:14px;
  background:rgba(10,14,24,.52);
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.gd-inwrap:focus-within{
  border-color:rgba(120,170,255,.62);
  background:rgba(10,14,24,.70);
  box-shadow:0 0 0 3px rgba(90,140,255,.16);
}
.gd-input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:0;
  padding:13px 14px;
  font-size:16px; color:#eef3ff;
  font-family:inherit;
  letter-spacing:.04em;
}
.gd-input::placeholder{ color:rgba(200,215,255,.34); }

.gd-eye{
  flex:0 0 auto; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; user-select:none;
  color:rgba(210,225,255,.55);
  transition:color .16s;
}
.gd-eye:active{ color:rgba(150,190,255,.95); }

/* ---- 密码强度条 ---- */
.gd-meter{
  display:flex; gap:5px; margin-top:9px; padding:0 2px;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .2s, max-height .2s;
}
.gd-meter.on{ opacity:1; max-height:20px; }
.gd-meter i{
  flex:1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14);
  transition:background .2s;
}
.gd-meter i.on1{ background:#e05a5a; }
.gd-meter i.on2{ background:#e0a23a; }
.gd-meter i.on3{ background:#4fbf7a; }

/* ---- 按钮 ---- */
.gd-btns{ display:flex; gap:10px; margin-top:20px; }
.gd-btns.stack{ flex-direction:column-reverse; }
.gd-btn{
  flex:1; height:46px;
  border-radius:14px; border:1px solid rgba(255,255,255,.16);
  font-size:15px; font-weight:600; font-family:inherit;
  cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s, filter .16s, background .16s;
  -webkit-tap-highlight-color:transparent;
}
.gd-btn:active{ transform:scale(.97); }
.gd-btn.cancel{
  background:rgba(255,255,255,.07);
  color:rgba(225,235,255,.80);
}
.gd-btn.ok{
  background:linear-gradient(150deg, #5b8cff, #7a5cff);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  box-shadow:0 8px 22px rgba(80,110,255,.36), 0 1px 0 rgba(255,255,255,.30) inset;
}
.gd-btn.ok:active{ filter:brightness(.94); }
.gd-btn.danger{
  background:linear-gradient(150deg, #e05555, #c03c5c);
  border-color:rgba(255,255,255,.24);
  color:#fff;
  box-shadow:0 8px 22px rgba(220,70,90,.32), 0 1px 0 rgba(255,255,255,.24) inset;
}

/* ---- 错误提示 ---- */
.gd-err{
  margin-top:11px; padding:9px 12px;
  border-radius:11px; font-size:12.5px;
  background:rgba(224,80,80,.14);
  border:1px solid rgba(224,80,80,.32);
  color:#ffb3b3;
  display:none;
  animation:gdShake .32s;
}
.gd-err.on{ display:block; }
@keyframes gdShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* ---- 房间码复制行 ---- */
.gd-copy{
  display:flex; align-items:center; gap:10px;
  margin:6px 0 16px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(10,14,24,.60);
  border:1px solid rgba(255,255,255,.16);
}
.gd-copy .code{
  flex:1; font-size:26px; font-weight:750;
  letter-spacing:.14em; color:#cfe0ff;
  font-family:ui-monospace, Menlo, monospace;
  text-align:center;
}
.gd-copy .cpbtn{
  flex:0 0 auto; padding:8px 13px;
  border-radius:10px; font-size:12.5px; font-weight:600;
  background:rgba(120,170,255,.20);
  border:1px solid rgba(140,180,255,.36);
  color:#bcd4ff; cursor:pointer;
  transition:background .16s;
}
.gd-copy .cpbtn:active{ background:rgba(120,170,255,.34); }

@media (max-width:360px){
  .gd{ padding:22px 18px 16px; border-radius:20px; }
  .gd-t{ font-size:16px; }
  .gd-input{ font-size:15px; }
}
@media (orientation:landscape){
  .gd{ max-width:340px; padding:18px 18px 14px; }
  .gd-ico{ width:44px; height:44px; font-size:20px; margin-bottom:10px; }
  .gd-d{ display:none; }
  .gd-btn{ height:42px; }
}