.kiosk{height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(900px 500px at 50% 0%,#10241a,#050806 70%)}
.k-head{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid var(--line)}
.k-head .logo{width:40px;height:40px}
.k-clock{font-size:26px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.k-main{flex:1;display:flex;gap:20px;padding:20px 28px;min-height:0}

.k-cam{position:relative;flex:1;border-radius:20px;overflow:hidden;background:#050806;border:1px solid var(--line2);
  display:grid;place-items:center}
.k-cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.k-frame{position:absolute;inset:14%;border-radius:18px;pointer-events:none}
.k-frame span{position:absolute;width:46px;height:46px;border:3px solid var(--mint)}
.k-frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.k-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.k-frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 18px}
.k-frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 18px 0}
.scanline{position:absolute;left:6%;right:6%;height:3px;top:0;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);box-shadow:0 0 16px var(--mint);opacity:0}
.scanning .scanline{opacity:1;animation:scan 1.1s ease-in-out infinite}
.scanning .k-frame span{border-color:var(--gold);animation:pulse .6s infinite alternate}
@keyframes scan{0%{top:2%}100%{top:96%}}
@keyframes pulse{to{opacity:.4}}
.k-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--mint-soft);
  font-size:18px;font-weight:600;letter-spacing:.5px;text-shadow:0 2px 8px #000}

.k-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;backdrop-filter:blur(6px);animation:fade .25s}
.k-result.ok{background:radial-gradient(circle at 50% 40%,rgba(26,165,100,.55),rgba(5,8,6,.92))}
.k-result.no{background:radial-gradient(circle at 50% 40%,rgba(220,60,60,.5),rgba(5,8,6,.92))}
@keyframes fade{from{opacity:0}to{opacity:1}}
.k-photo{width:140px;height:140px;border-radius:50%;border:4px solid #fff;object-fit:cover;background:#13261d;
  display:grid;place-items:center;font-size:44px;font-weight:800;color:#fff;overflow:hidden}
.k-photo img{width:100%;height:100%;object-fit:cover}
.k-badge{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;margin-top:-34px;
  background:var(--green);border:3px solid #fff}
.k-result.no .k-badge{background:var(--danger)}
.k-title{font-size:34px;font-weight:800;color:#fff;letter-spacing:1px;margin-top:6px}
.k-name{font-size:24px;color:#fff;font-weight:600}
.k-meta{display:flex;gap:8px}

.k-side{width:300px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;overflow:auto}
.k-side .row{padding:10px 0}

.k-ctrl{position:fixed;bottom:18px;right:18px;z-index:40}
.k-gear{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:#13261d;color:var(--mint-soft);
  font-size:20px;cursor:pointer}
.k-panel{position:absolute;bottom:56px;right:0;width:260px;background:var(--card2);border:1px solid var(--line2);
  border-radius:14px;padding:16px;box-shadow:var(--shadow)}
@media(max-width:820px){.k-side{display:none}}