:root{--o:#EB8A2C;--o2:#C96F14;--k:#0e0e0e;--g:#1E9E5A;--b:#2F6FDE;--r:#D64545;--a:#E5A100}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:#fff;background:radial-gradient(1200px 700px at 50% -10%,#3a2410 0%,#151515 45%,#0b0b0b 100%);overflow-x:hidden}
.k-wrap{min-height:100%;display:flex;flex-direction:column;max-width:760px;margin:auto;padding:0 18px}
.k-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.k-brand{display:flex;align-items:center;gap:12px}
.k-brand img{width:46px;height:46px;border-radius:50%}
.k-brand b{display:block;font-size:17px;letter-spacing:.3px}
.k-brand small{color:var(--o);font-size:12px}
.k-where{font-size:13px;color:#bbb;text-align:right}
.k-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 0 30px}
.k-clock{text-align:center}
#clock{font-size:clamp(48px,14vw,92px);font-weight:700;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1}
#date{color:var(--o);font-size:clamp(14px,3.6vw,18px);margin-top:6px}
#date::first-letter{text-transform:uppercase}
.k-scan{position:relative;width:min(58vw,230px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;margin:14px 0 4px;color:#fff;background:radial-gradient(circle at 35% 30%,#ffa94d,var(--o) 45%,var(--o2));box-shadow:0 14px 50px rgba(235,138,44,.45),inset 0 -8px 20px rgba(0,0,0,.25);display:grid;place-items:center;transition:transform .15s}
.k-scan:active{transform:scale(.96)}
.k-scan svg{position:relative;z-index:2}
.k-scan .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--o);opacity:0;animation:pulse 2.8s infinite}
.k-scan .r2{animation-delay:.9s}.k-scan .r3{animation-delay:1.8s}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}
.k-scan.busy{background:radial-gradient(circle at 35% 30%,#fff,#ffd9b0 40%,var(--o));animation:glow 1s infinite alternate;color:var(--o2)}
@keyframes glow{to{box-shadow:0 0 90px rgba(235,138,44,.9)}}
.k-scan.off{filter:grayscale(1);opacity:.4}
.k-hint{color:#cfcfcf;font-size:15px;text-align:center;max-width:320px}
.k-err{color:#ff8d8d;text-align:center;max-width:360px;font-size:14px}
.k-link{background:none;border:0;color:var(--o);text-decoration:underline;font-size:14px;cursor:pointer;margin-top:4px}
.k-pin{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.k-pin input{padding:12px 14px;border-radius:10px;border:1px solid #444;background:#1b1b1b;color:#fff;font-size:16px;width:150px}
.k-btn{padding:12px 20px;border:0;border-radius:10px;background:var(--o);color:#111;font-weight:700;font-size:16px;cursor:pointer}
.k-recent{width:100%;max-width:430px;margin-top:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px}
.k-recent h4{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#999;margin-bottom:6px}
.k-recent ul{list-style:none;font-size:14px}
.k-recent li{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.k-recent li:last-child{border:0}
.k-recent em{margin-left:auto;color:#aaa;font-style:normal;font-variant-numeric:tabular-nums}
.k-recent .u{color:#4ade80}.k-recent .d{color:#60a5fa}.k-recent .none{color:#777}
.k-lock{text-align:center;max-width:420px;display:flex;flex-direction:column;gap:12px}
.k-lock h2{color:var(--o)}.k-small{color:#aaa;font-size:14px}
.k-result{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:20;animation:fade .2s}
.k-result[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.k-card{width:min(92vw,430px);border-radius:26px;padding:28px 22px 26px;text-align:center;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.85)}}
.k-card.up{background:linear-gradient(160deg,#25b56b,#12804a)}
.k-card.down{background:linear-gradient(160deg,#4a86f0,#2553b3)}
.k-card.late{background:linear-gradient(160deg,#f0b429,#c47f00)}
.k-card.dup{background:linear-gradient(160deg,#6b7280,#374151)}
.k-card.err{background:linear-gradient(160deg,#e45b5b,#a52a2a)}
.k-av{width:112px;height:112px;border-radius:50%;margin:0 auto 12px;border:4px solid rgba(255,255,255,.85);overflow:hidden;background:rgba(0,0,0,.25);display:grid;place-items:center;font-size:40px;font-weight:700}
.k-av img{width:100%;height:100%;object-fit:cover}
.k-tag{display:inline-block;background:rgba(0,0,0,.28);padding:5px 14px;border-radius:99px;font-weight:700;letter-spacing:1.2px;font-size:13px}
.k-card h2{font-size:24px;margin:12px 0 2px;line-height:1.2}
.k-time{font-size:54px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.k-card p{margin-top:8px;font-size:16px;opacity:.95}
@media (max-height:640px){.k-main{gap:8px}.k-scan{width:150px}}