/* ═══════════════════════════════════════════════════════════════
   CỬA QUÉT

   Giao diện ở đây là bản gốc của theme sinh trắc, giữ nguyên từng
   giá trị: màu, kích thước, nhịp xoay, khoảng cách. Đừng "dọn dẹp"
   những con số trông lẻ — chúng là thứ làm nên hình.

   Khác bản gốc đúng một chỗ: không còn thẻ đăng nhập. Quét xong thì
   trang cổng mở ra, và việc đó do máy chủ quyết.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --cyan:#5fd9ff;
  --cyan-bright:#c7f4ff;
  --violet:#9b7bff;
  --gold:#ffd479;
  --text:#e3f4ff;
  --text-dim:#5c85ab;
  --glow:0.25;
}

*{box-sizing:border-box}

html,body{
  margin:0;padding:0;height:100%;
  background:#02060f;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

#stage{
  position:relative;width:100%;min-height:100vh;overflow:hidden;background:#04102a;
  cursor:none;display:flex;align-items:center;justify-content:center;
}

#bgcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.frameCorner{position:absolute;width:34px;height:34px;border:1.5px solid #4a9fd8;opacity:0.6;pointer-events:none;z-index:3}
.frameCorner.tl{top:22px;left:22px;border-right:none;border-bottom:none}
.frameCorner.tr{top:22px;right:22px;border-left:none;border-bottom:none}
.frameCorner.bl{bottom:22px;left:22px;border-right:none;border-top:none}
.frameCorner.br{bottom:22px;right:22px;border-left:none;border-top:none}

.readout{position:absolute;font-size:10px;letter-spacing:2px;color:var(--text-dim);pointer-events:none;z-index:3}
.readout.rtl{top:32px;left:46px}
.readout.rtr{top:32px;right:46px;text-align:right}
.readout.rbl{bottom:32px;left:46px}
.readout.rbr{bottom:32px;right:46px;text-align:right}
.readout .cursor{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:0.4}50%{opacity:1}}

#topLabel{position:absolute;top:28px;left:50%;transform:translateX(-50%);color:var(--text-dim);font-size:12px;letter-spacing:4px;text-transform:uppercase;z-index:3}

#hint{
  position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  color:var(--text-dim);font-size:12px;letter-spacing:1px;text-align:center;
  transition:opacity 0.5s ease;z-index:3;margin:0;
  max-width:min(90vw,460px);line-height:1.5;
}
/* Câu máy chủ trả về khi không cho vào — vẫn đúng chỗ dòng gợi ý cũ
   đứng, chỉ đổi màu. Không thêm một thành phần nào mới lên trang. */
#hint.refused{color:#ff8fa3;letter-spacing:0.6px}

#coreWrap{display:flex;flex-direction:column;align-items:center;gap:56px;position:relative;z-index:2}

#core{
  position:relative;width:260px;height:260px;
  filter:drop-shadow(0 0 calc(8px + var(--glow) * 30px) rgba(95,217,255,0.6));
  transition:filter 0.12s linear;
}
#core.surge{animation:coreSurge 0.85s ease}
@keyframes coreSurge{
  0%{filter:drop-shadow(0 0 55px var(--cyan-bright))}
  100%{filter:drop-shadow(0 0 8px rgba(95,217,255,0.6))}
}

.ring-halo{fill:none;stroke:#5fd9ff;stroke-width:11;opacity:0.14}
.ring-main{fill:none;stroke:#cdf3ff;stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(95,217,255,0.95)) drop-shadow(0 0 14px rgba(95,217,255,0.5))}
.ring-thin{fill:none;stroke:#4a9fd8;stroke-width:1.1;opacity:0.85}
.ring-seg{fill:none;stroke:#7fe3ff;stroke-width:2.4;opacity:0.9;stroke-linecap:butt;filter:drop-shadow(0 0 3px rgba(95,217,255,0.7))}
.ring-spin{transform-origin:130px 130px;animation:spin 44s linear infinite}
.ring-spin-rev{transform-origin:130px 130px;animation:spinRev 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
.tick{stroke:#7fc8ef;stroke-width:1.3;opacity:0.7}
.rband{fill:none;stroke:#6fd0f5;stroke-width:1;opacity:0.55}

#progressRing{fill:none;stroke:var(--cyan-bright);stroke-width:3.4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:130px 130px;filter:drop-shadow(0 0 5px rgba(199,244,255,0.9))}
#coreGlowDot{fill:url(#glowGrad);opacity:0.85}

.hud-hand{fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;filter:brightness(calc(1 + var(--glow) * 0.9));opacity:0.95}

#statusText{font-size:12px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;height:16px;font-weight:600;transition:color 0.2s ease}
#statusText.scanning{color:#33e59a;font-weight:700;text-shadow:0 0 10px rgba(51,229,154,0.65)}
#statusText.failed{color:#ff5a5a;font-weight:700;text-shadow:0 0 10px rgba(255,90,90,0.6)}

#cursorHand{position:fixed;top:0;left:0;width:152px;height:180px;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:60}
#cursorHand svg{width:100%;height:100%;overflow:visible}

/* Bàn tay dùng chung cho vòng quét và con trỏ. Kích thước ở đây phải
   khớp với phép dời trong setCursorAt (public/js/scan.js): con trỏ được
   đặt sao cho gốc toạ độ của hình rơi đúng vào đầu con trỏ, nên đổi
   width/height hay viewBox ở đây thì phải sửa cả hai số bên đó. */
.hand-silhouette{
  fill:url(#handFill);
  stroke:#e3faff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(95,217,255,0.45));
}
#cursorHand .hand-silhouette{fill-opacity:0.75}

#vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center, transparent 36%, rgba(1,5,14,0.62) 100%)}

/* Quét đạt: sân mờ đi rồi trang cổng thế chỗ. Ở bản gốc đây là lúc
   thẻ đăng nhập hiện lên. */
#stage.verified{opacity:0;transition:opacity 0.45s ease;pointer-events:none}

/* Máy cảm ứng: vẫn là kéo bàn tay cho khớp vòng, nên bàn tay phải
   HIỆN chứ không giấu đi như trước.

   touch-action:none để trình duyệt đừng hiểu cú kéo thành cuộn trang
   — thiếu dòng này thì ngón vừa nhích là màn hình trượt, không kéo
   được bàn tay đi đâu cả. */
#stage.touch{cursor:default;touch-action:none}
#stage.touch #core{cursor:pointer}

/* Tắt JavaScript thì không có vòng quét nào chạy được. Một cái nút
   thật, chỉ hiện đúng trong trường hợp đó. */
#nojs{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);z-index:5;margin:0}
#nojs button{
  background:rgba(95,217,255,0.06);border:1px solid #4a9fd8;color:var(--text);
  font-family:inherit;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  padding:10px 22px;cursor:pointer;
}
#nojs button:hover{background:var(--cyan);color:#03121f}

@media (max-width:760px){
  .readout{font-size:9px;letter-spacing:1.2px;line-height:1.35}
  .readout.rtl{top:34px;left:42px}
  .readout.rtr{top:34px;right:42px}
  #topLabel{top:76px;font-size:10px;letter-spacing:3px;white-space:nowrap;opacity:0.72}
  #hint{bottom:78px;width:min(320px,82vw);font-size:11px;line-height:1.35}
  #statusText{font-size:11px;letter-spacing:2.2px}
}

@media (prefers-reduced-motion: reduce){
  .ring-spin,.ring-spin-rev,.readout .cursor{animation:none}
}