/* ===== IT REPOS Touchless Lab — shared styles ===== */
:root{
  --bg:#070b14; --panel:rgba(18,26,44,.72); --line:rgba(255,255,255,.09);
  --accent:#2dd4bf; --accent2:#6366f1; --warn:#f59e0b; --bad:#ef4444;
  --text:#e6edf7; --muted:#7e8eac;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,sans-serif;color:var(--text);
  background:radial-gradient(circle at 30% 15%,#13203c,var(--bg));
  overflow:hidden;-webkit-user-select:none;user-select:none;
}
a{color:inherit;text-decoration:none}

/* camera + overlay.  NOTE: only the VIDEO is CSS-mirrored.
   The overlay canvas is mirrored in JS math instead — mirroring it here too
   would double-flip the skeleton onto the wrong side. */
#stage{position:fixed;inset:0;z-index:0}
#cam,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cam{transform:scaleX(-1);filter:brightness(.4) saturate(.8)}

/* brand */
.logo{font-weight:800;letter-spacing:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
header.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 20px 14px 84px}
header.bar .tag{color:var(--muted);font-size:13px}

/* panels */
.panel{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px}

/* hand cursor */
#handcursor{position:fixed;z-index:60;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid var(--accent);background:rgba(45,212,191,.18);pointer-events:none;
  box-shadow:0 0 16px var(--accent);transition:transform .05s linear,opacity .2s}
#handcursor.pinch{background:var(--accent);transform:scale(.6)}
#handcursor .ring{position:absolute;inset:-9px;border:2px solid rgba(45,212,191,.35);border-radius:50%}
#handcursor .dwell{position:absolute;inset:-12px;width:54px;height:54px;display:none;transform:rotate(-90deg)}
#handcursor.dwellmode .dwell{display:block}
#handcursor .dwell circle{fill:none;stroke:var(--accent);stroke-width:3}

/* clickable hover/active states (generic) */
[data-click]{transition:transform .14s,box-shadow .14s,border-color .14s,background .14s}
[data-click].hover{border-color:var(--accent)!important;box-shadow:0 0 26px rgba(45,212,191,.3)}
[data-click].active{transform:scale(.97)}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:40;
  background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:11px 22px;border-radius:30px;font-size:14px;opacity:0;transition:opacity .3s;text-align:center;max-width:90vw}
#toast.show{opacity:1}

/* back button */
.backbtn{position:fixed;top:12px;left:14px;z-index:50;padding:9px 16px;border-radius:30px;font-size:14px;
  background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line)}

/* start gate */
.gate{position:fixed;inset:0;z-index:100;background:rgba(4,7,13,.94);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.gate-card{max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.gate-card .logo{font-size:26px}
.gate-card h1{font-size:clamp(24px,6vw,30px)}
.gate-body{color:var(--muted);line-height:1.65;font-size:15px}
.gate-body b{color:var(--text)}
button.go{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#04121a;font-weight:700;
  font-size:16px;border:none;border-radius:12px;padding:15px 34px;cursor:pointer}
button.go:disabled{opacity:.6;cursor:default}
.gate-err{color:var(--bad);font-size:13px;min-height:16px}
.fine{font-size:12px;color:var(--muted)}

/* HUD readouts */
.hud{position:fixed;z-index:10;font-size:13px}
.hud .row{display:flex;justify-content:space-between;gap:20px;margin:4px 0}
.hud .val{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.hint{position:fixed;bottom:20px;left:16px;right:16px;z-index:10;color:var(--muted);font-size:13px;max-width:360px;line-height:1.5}
.kbd{display:inline-block;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--text);font-size:12px}
.hidden{display:none!important}

/* ===== mobile ===== */
@media(max-width:760px){
  header.bar{padding:12px 16px 12px 72px;font-size:14px}
  header.bar .tag{display:none}
  .hud{font-size:12px}
  .hud .row{gap:10px;margin:3px 0}
  .hint{font-size:12px;bottom:14px}
}