:root{
  --bg:#0f172a; --panel:#1e293b; --text:#f1f5f9; --muted:#94a3b8;
  --green:#16a34a; --green-d:#15803d; --red:#dc2626; --red-d:#b91c1c;
  --accent:#38bdf8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;-webkit-user-select:none;user-select:none}
body{display:flex;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

.screen{display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:100%;max-width:760px;padding:24px;gap:18px}
.screen.active{display:flex}

h1{font-size:clamp(24px,4.5vw,40px);font-weight:700;margin:0;line-height:1.2}
h2{font-size:clamp(26px,5vw,46px);margin:0}
.hint{color:var(--muted);font-size:clamp(15px,2.5vw,20px);margin:0}
.msg{min-height:28px;font-size:18px;color:var(--accent)}
.msg.error{color:#fca5a5}

#reader{width:min(72vw,420px);aspect-ratio:1;border-radius:24px;overflow:hidden;
  background:#000;border:3px solid var(--panel);box-shadow:0 10px 40px rgba(0,0,0,.4)}
#reader video{width:100%!important;height:100%!important;object-fit:cover}

/* language switch */
#lang-switch{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:18px;display:flex;gap:8px;z-index:30}
#lang-switch a{color:var(--muted);text-decoration:none;font-weight:700;font-size:16px;
  padding:6px 12px;border-radius:10px;background:var(--panel)}
#lang-switch a.active{color:#fff;background:var(--accent)}

/* employee card */
.emp-card{display:flex;flex-direction:column;align-items:center;gap:10px}
.emp-card img{width:170px;height:170px;border-radius:50%;object-fit:cover;
  background:var(--panel);border:4px solid var(--accent)}
#emp-status{color:var(--muted);font-size:20px;margin:0}

/* big action button */
.big-btn{border:none;border-radius:28px;color:#fff;font-weight:800;
  font-size:clamp(34px,7vw,60px);letter-spacing:1px;
  width:min(80vw,560px);height:min(34vh,260px);cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .08s}
.big-btn:active{transform:scale(.97)}
.big-btn.start{background:linear-gradient(180deg,var(--green),var(--green-d))}
.big-btn.stop{background:linear-gradient(180deg,var(--red),var(--red-d))}

.link-btn{background:none;border:none;color:var(--muted);font-size:18px;
  text-decoration:underline;cursor:pointer;padding:10px}

/* result screen */
.result-icon{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:80px;color:#fff}
.result-icon.in{background:var(--green)}
.result-icon.out{background:var(--red)}
.result-icon.flash{background:#475569}
#result-sub{color:var(--muted);font-size:22px}

/* Confirm screen in PIN mode (photo-list fallback) — must fit small phones */
#screen-confirm.with-pin{height:100dvh;max-height:100dvh;overflow-y:auto;
  justify-content:flex-start;padding-top:18px;padding-bottom:24px;gap:12px}
#screen-confirm.with-pin .emp-card img{width:88px;height:88px;border-width:3px}
#screen-confirm.with-pin h2{font-size:24px}
#screen-confirm.with-pin #emp-status{font-size:16px}
#screen-confirm.with-pin .big-btn{height:82px;width:min(86vw,380px);
  font-size:30px;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* PIN pad */
#pinpad{display:flex;flex-direction:column;align-items:center;gap:10px}
#pinpad[hidden]{display:none}   /* ID rule above would otherwise beat [hidden] */
.pin-label{margin:0;font-size:20px;color:var(--muted)}
.pin-display{height:34px;letter-spacing:14px;font-size:40px;line-height:1;min-width:160px;
  text-align:center;color:var(--text)}
.pin-keys{display:grid;grid-template-columns:repeat(3,84px);gap:12px}
.pin-key{height:74px;border:none;border-radius:18px;background:var(--panel);color:var(--text);
  font-size:30px;font-weight:700;cursor:pointer}
.pin-key:active{background:#334155}
.pin-key.alt{background:#0b1220;color:var(--muted)}

/* shorter phones: shrink keypad so the START button stays visible */
@media (max-height:760px){
  .pin-keys{grid-template-columns:repeat(3,68px);gap:8px}
  .pin-key{height:52px;font-size:24px}
  .pin-display{font-size:30px;height:26px}
  .pin-label{font-size:17px}
}

/* roster grid */
#roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;width:100%;max-height:70vh;overflow:auto;padding:4px}
.roster-item{background:var(--panel);border-radius:18px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid transparent}
.roster-item:active{border-color:var(--accent)}
.roster-item img,.roster-ph{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#334155;
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#cbd5e1}
.roster-item .nm{font-size:16px;font-weight:600;line-height:1.15}
.roster-item .st{font-size:13px;color:var(--muted)}
.roster-item .st.in{color:var(--green)}