/* =====================================================================
   scan.css — หน้าสแกนใบหน้า (ธีมเข้ม กล้องเป็นพระเอก + วงสแกน HUD)
   Display: Bai Jamjuree | Body: IBM Plex Sans Thai | Data: IBM Plex Mono
   ===================================================================== */
:root{
  --ink:#0B1221;          /* พื้นหลังหลัก */
  --ink-2:#0E1830;
  --surface:#16203A;      /* การ์ด */
  --surface-2:#1C2845;
  --line:rgba(148,163,184,.16);
  --text:#EAF0FB;
  --muted:#8DA0C0;
  --cyan:#38BDF8;         /* สถานะกำลังค้นหา */
  --green:#22C55E;        /* สำเร็จ / เข้างาน */
  --amber:#FB923C;        /* ออกงาน */
  --red:#F87171;          /* ไม่พบ / ผิดพลาด */
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  background:
     radial-gradient(1200px 600px at 50% -10%, #142244 0%, transparent 60%),
     radial-gradient(900px 500px at 90% 110%, #0c1b3a 0%, transparent 55%),
     var(--ink);
  color:var(--text);
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%;max-width:560px;padding:22px 18px 34px;display:flex;flex-direction:column;gap:18px;flex:1}

/* ---------- หัว: นาฬิกา + วันที่ ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--cyan),#6366F1);color:#06101f;
}
.brand .logo svg{width:22px;height:22px}
.brand b{font-family:"Bai Jamjuree",sans-serif;font-weight:600;font-size:15px;letter-spacing:.2px}
.brand span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.admin-link{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--line);
  padding:7px 11px;border-radius:9px;transition:.2s}
.admin-link:hover{color:var(--text);border-color:var(--cyan)}

.clock{text-align:center;margin-top:2px}
.clock .time{
  font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:clamp(40px,12vw,58px);line-height:1;letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#9fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.clock .date{color:var(--muted);font-size:14px;margin-top:6px}

/* ---------- กล้อง + วง HUD ---------- */
.stage{position:relative;width:100%;aspect-ratio:1/1;max-width:420px;margin:2px auto 0}
.camera-frame{
  position:absolute;inset:0;border-radius:28px;overflow:hidden;
  background:#05080f;box-shadow:var(--shadow), inset 0 0 0 1px var(--line);
}
#video,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#video{transform:scaleX(-1)}            /* สะท้อนเหมือนกระจก */
#overlay{transform:scaleX(-1);pointer-events:none}

/* วงแหวนสแกน */
.ring{position:absolute;inset:-3px;pointer-events:none}
.ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.ring .track{stroke:rgba(255,255,255,.08)}
.ring .scan{stroke:var(--cyan);stroke-dasharray:90 220;
  filter:drop-shadow(0 0 6px var(--cyan));
  transform-origin:50% 50%;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* มุมเล็ง (reticle) */
.reticle{position:absolute;inset:14px;pointer-events:none}
.reticle i{position:absolute;width:30px;height:30px;border:3px solid rgba(255,255,255,.55);border-radius:5px}
.reticle i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* สถานะของวง */
.stage[data-state="found"] .ring .scan{stroke:var(--green);animation:none;stroke-dasharray:0;
  stroke-dashoffset:0;filter:drop-shadow(0 0 8px var(--green))}
.stage[data-state="found"] .ring .full{stroke:var(--green);filter:drop-shadow(0 0 10px var(--green))}
.stage[data-state="error"] .ring .full{stroke:var(--red);filter:drop-shadow(0 0 10px var(--red))}
.ring .full{stroke:transparent}

/* ป้ายสถานะกลางจอ */
.cam-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;
  max-width:90%;text-align:center;font-size:13px;line-height:1.35;font-weight:500;color:#eaf2ff;
  background:rgba(8,14,28,.86);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.5)}

/* ---------- แถบสถานะ ---------- */
.status{
  display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-height:64px;
  transition:.25s;
}
.status .dot{width:11px;height:11px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 4px rgba(56,189,248,.18);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.status .msg{font-size:15px;font-weight:500}
.status .sub{font-size:12px;color:var(--muted);margin-top:1px}
.status.is-ok{border-color:rgba(34,197,94,.5);background:linear-gradient(180deg,rgba(34,197,94,.12),var(--surface))}
.status.is-ok .dot{background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:none}
.status.is-err{border-color:rgba(248,113,113,.5);background:linear-gradient(180deg,rgba(248,113,113,.12),var(--surface))}
.status.is-err .dot{background:var(--red);box-shadow:0 0 0 4px rgba(248,113,113,.2);animation:none}

/* ชิป GPS */
.gps-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  font-family:"IBM Plex Mono",monospace}
.gps-chip svg{width:14px;height:14px}
.gps-chip.ok{color:var(--green)}
.gps-chip.bad{color:var(--amber)}

/* ---------- ปุ่มเลือกโหมด ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  padding:13px 8px;border-radius:14px;font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:.18s;text-align:center
}
.mode:hover{color:var(--text)}
.mode.active{color:#06101f;border-color:transparent}
.mode[data-mode="auto"].active{background:linear-gradient(140deg,var(--cyan),#6366F1)}
.mode[data-mode="in"].active{background:var(--green)}
.mode[data-mode="out"].active{background:var(--amber)}
.mode small{display:block;font-weight:400;font-size:11px;opacity:.8;margin-top:2px}

/* ---------- หน้าจอสำเร็จ (overlay) ---------- */
.result{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:24px;
  background:rgba(6,12,28,.86);backdrop-filter:blur(8px)}
.result.show{display:grid;animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.result .card{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:26px;padding:30px 26px;text-align:center;box-shadow:var(--shadow);
  animation:pop .35s cubic-bezier(.2,.9,.3,1.3)
}
@keyframes pop{from{transform:scale(.9) translateY(12px);opacity:0}}
.result .badge{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;position:relative}
.result .badge svg{width:54px;height:54px}
.result.in  .badge{background:rgba(34,197,94,.16)}
.result.out .badge{background:rgba(251,146,60,.16)}
.result.in  .badge svg{color:var(--green)}
.result.out .badge svg{color:var(--amber)}
.result .photo{width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:2px solid var(--line)}
.result h2{font-family:"Bai Jamjuree",sans-serif;font-size:24px;font-weight:600}
.result .pos{color:var(--muted);font-size:14px;margin-top:2px}
.result .type-pill{display:inline-block;margin-top:14px;padding:6px 16px;border-radius:999px;font-weight:600;font-size:15px}
.result.in  .type-pill{background:rgba(34,197,94,.18);color:var(--green)}
.result.out .type-pill{background:rgba(251,146,60,.18);color:var(--amber)}
.result .big-time{font-family:"IBM Plex Mono",monospace;font-size:40px;font-weight:600;margin-top:10px;font-variant-numeric:tabular-nums}
.result .meta{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.result .meta .late{color:var(--amber);font-weight:600}
.result .countdown{margin-top:18px;font-size:12px;color:var(--muted)}

/* ---------- โหลดโมเดล ---------- */
.loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--ink);text-align:center;gap:0}
.loader.hide{display:none}
.loader .spin{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--cyan);
  animation:spin .8s linear infinite;margin:0 auto 16px}
.loader p{color:var(--muted);font-size:14px}
.loader b{display:block;font-family:"Bai Jamjuree",sans-serif;color:var(--text);font-size:17px;margin-bottom:4px}

@media (prefers-reduced-motion:reduce){
  .ring .scan,.status .dot,.loader .spin{animation:none}
}

/* ---------- นับถอยหลังก่อนถ่าย ---------- */
.count-num{position:absolute;inset:0;display:none;place-items:center;z-index:3;
  font-family:"Bai Jamjuree",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(86px,30vw,150px);line-height:1;
  text-shadow:0 4px 30px rgba(0,0,0,.55);pointer-events:none}
.count-num.show{display:grid;animation:cd-pop .45s ease}
@keyframes cd-pop{from{opacity:.2;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.stage[data-state="count"] .ring .scan{stroke:var(--cyan);animation:none;stroke-dasharray:0;
  stroke-dashoffset:0;opacity:.9}
.stage[data-state="count"] .ring .full{stroke:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan))}
@media (prefers-reduced-motion: reduce){ .count-num.show{animation:none} }

/* ---------- ขั้นยืนยันตัวตน (liveness / กระพริบตา) ---------- */
.stage[data-state="live"] .ring .full{stroke:var(--amber);filter:drop-shadow(0 0 8px var(--amber))}
.stage[data-state="live"] .ring .scan{stroke:var(--amber);animation:none;stroke-dasharray:0;stroke-dashoffset:0;opacity:.85}
.stage[data-state="live"] .cam-hint{background:rgba(40,28,8,.86);border-color:rgba(245,158,11,.55);color:#fde68a}

/* ---------- การ์ด "ลงเวลาไปแล้ว" (กันสแกนซ้ำ) + ป้ายสำเร็จ ---------- */
.result .meta .ok-note{color:var(--green);font-weight:700;font-size:14px}
.result .meta .dup-note{color:var(--amber);font-weight:700;font-size:14px}
.result.already .badge{background:rgba(251,191,36,.18)}
.result.already .badge svg{color:var(--amber)}
.result.already .big-time{color:#fde68a}