/* Face ID test sayti — dizayn tizimi (tashqi kutubxonasiz) */
:root{
  --bg:#070b18; --bg2:#0b1124;
  --card:rgba(255,255,255,.045);
  --card-brd:rgba(255,255,255,.10);
  --txt:#eaf0ff; --muted:#9aa8c7; --dim:#728099;
  --acc:#67e8f9; --acc2:#a78bfa;
  --ok:#34d399; --warn:#fbbf24; --err:#fb7185;
  --r:18px; --r-sm:12px;
  --sh:0 18px 48px rgba(2,6,23,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; color:var(--txt); background:var(--bg);
  font:15px/1.55 ui-sans-serif,system-ui,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 12% -10%, #17255a 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #2a1a52 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
}
.glow{position:fixed; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none}
.g1{width:420px;height:420px;left:-140px;top:-120px;background:#0ea5e9}
.g2{width:380px;height:380px;right:-160px;bottom:-140px;background:#8b5cf6}

.wrap{max-width:620px;margin:0 auto;padding:22px 16px 40px}
.hidden{display:none!important}

/* ---------- sarlavha ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,rgba(103,232,249,.16),rgba(167,139,250,.16));
  border:1px solid var(--card-brd)}
h1{font-size:19px;margin:0;letter-spacing:.2px}
.sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  border:1px solid var(--card-brd);border-radius:999px;padding:6px 11px;white-space:nowrap;
  background:var(--card)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 0 rgba(103,232,249,.5)}
.status.up .pulse{background:var(--ok);animation:pulse 2s var(--ease) infinite}
.status.down .pulse{background:var(--err)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* ---------- kartochka ---------- */
.card{position:relative;border:1px solid var(--card-brd);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:var(--sh);backdrop-filter:blur(14px);padding:20px;animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card-head h2,.step-head h2{margin:0;font-size:17px}
.step-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.chip{font-size:12px;color:var(--acc);border:1px solid rgba(103,232,249,.35);
  background:rgba(103,232,249,.08);border-radius:999px;padding:4px 10px;max-width:190px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{margin:22px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.10em;color:var(--dim)}

/* ---------- tablar ---------- */
.tabs{display:flex;gap:6px;padding:4px;margin:16px 0;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--card-brd)}
.tab{flex:1;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);
  font:inherit;font-weight:600;cursor:pointer;transition:.18s var(--ease)}
.tab.active{background:linear-gradient(135deg,rgba(103,232,249,.18),rgba(167,139,250,.18));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* ---------- maydonlar ---------- */
.field{display:block;margin:12px 0}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field small{display:block;margin-top:6px;color:var(--dim);font-size:11.5px}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:12px 13px;border-radius:var(--r-sm);color:var(--txt);
  background:rgba(9,14,30,.75);border:1px solid var(--card-brd);
  font:inherit;transition:.18s var(--ease)}
input::placeholder{color:#5c6a86}
input:focus{outline:none;border-color:rgba(103,232,249,.6);box-shadow:0 0 0 4px rgba(103,232,249,.12)}
input.bad{border-color:rgba(251,113,133,.65);box-shadow:0 0 0 4px rgba(251,113,133,.10)}
code{background:rgba(255,255,255,.07);border-radius:5px;padding:1px 5px;font-size:12px}
.pw{position:relative;display:block}
.pw input{padding-right:88px}
.eye{position:absolute;right:6px;top:6px;bottom:6px;padding:0 11px;border:0;border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.eye:hover{color:#fff}

/* ---------- tugmalar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 16px;margin-top:10px;border-radius:14px;border:1px solid transparent;
  font:inherit;font-weight:650;color:#fff;cursor:pointer;transition:.18s var(--ease)}
.btn.primary{background:linear-gradient(135deg,#0ea5e9,#7c3aed);
  box-shadow:0 12px 30px rgba(56,101,255,.28)}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--card-brd);color:var(--txt)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}
.btn.bio{background:rgba(255,255,255,.05);border-color:rgba(103,232,249,.3)}
.btn.bio:hover{background:rgba(103,232,249,.10)}
.btn.danger{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.42);color:#ffd7de}
.btn.danger:hover{background:rgba(251,113,133,.22)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn:focus-visible,.tab:focus-visible,input:focus-visible{outline:2px solid rgba(167,139,250,.8);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .btn{flex:1 1 150px;width:auto}

.sep{display:flex;align-items:center;gap:12px;margin:16px 0 2px;color:var(--dim);font-size:12px}
.sep::before,.sep::after{content:"";height:1px;flex:1;background:var(--card-brd)}
.foot-note{color:var(--dim);font-size:12px;margin:12px 0 0}
.warn{margin:14px 0 0;padding:11px 12px;border-radius:var(--r-sm);font-size:12px;color:#ffe6b8;
  background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.30)}
.notice{margin:12px 0 0;font-size:12.5px;min-height:18px;color:var(--muted)}
.notice.bad{color:#ffc4cf}
.notice.good{color:#a7f3d0}

/* ---------- kamera ---------- */
.camera{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  background:#05080f;border:1px solid var(--card-brd);box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
.camera video,.camera canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camera video{transform:scaleX(-1)}          /* oyna tasvir: foydalanuvchiga qulay */
.camera canvas{pointer-events:none}
.cam-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  color:var(--muted);font-size:13px;padding:0 20px}
.guide{display:flex;align-items:center;gap:9px;margin:12px 0 0;color:var(--muted);font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 4px rgba(251,191,36,.16)}

/* aktiv tiriklik murabbiy — pastdagi panel; yuz ko'rinib turadi */
.coach{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:7px;text-align:center;padding:0 16px 16px;color:#fff;
  background:linear-gradient(180deg,rgba(4,8,20,.10) 0%,rgba(4,8,20,.30) 46%,rgba(4,8,20,.88) 100%)}
.coach-top{position:absolute;top:11px;left:11px;right:11px;display:flex;
  justify-content:space-between;align-items:center;font-size:11.5px;color:var(--acc)}
.coach-step{border:1px solid rgba(103,232,249,.4);border-radius:999px;padding:3px 10px;
  background:rgba(4,8,20,.6);letter-spacing:.05em}
.coach-kind{color:#dbe6ff;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;
  background:rgba(4,8,20,.55);border-radius:999px;padding:3px 9px}
.coach-icon{color:var(--acc);line-height:0;animation:beat 1.7s var(--ease) infinite;
  filter:drop-shadow(0 6px 18px rgba(103,232,249,.35))}
.coach-icon svg{width:46px;height:46px}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.coach-title{font-size:19px;font-weight:700;letter-spacing:.2px;
  text-shadow:0 3px 14px rgba(0,0,0,.75)}
.coach-hint{font-size:12.5px;color:#c7d3ee;max-width:330px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.coach-bar{width:min(330px,84%);margin:8px auto 2px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.16);overflow:hidden}
.coach-bar i{display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s var(--ease)}
.coach-count{position:absolute;top:46px;right:14px;width:62px;height:62px;display:grid;
  place-items:center;border-radius:50%;font-size:30px;font-weight:800;color:#fff;
  background:rgba(4,8,20,.62);border:1px solid rgba(103,232,249,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:beat .82s var(--ease) infinite}
.coach.done .coach-bar i{background:linear-gradient(90deg,var(--ok),#22d3ee)}
.coach.done .coach-icon{animation:none;color:var(--ok)}

/* kadrlar chizig'i */
.frames{display:flex;gap:6px;margin:12px 0 0;min-height:44px;flex-wrap:wrap}
.frames img{width:44px;height:33px;object-fit:cover;border-radius:9px;
  border:1px solid var(--card-brd);animation:pop .26s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

.meter{margin:12px 0 0;height:5px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.meter i{display:block;height:100%;width:40%;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));animation:slide 1.1s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ---------- natija ---------- */
.ok-wrap{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:16px 0 0;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;overflow-wrap:anywhere}
.creds,.events{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.creds li,.events li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);
  border:1px solid var(--card-brd);font-size:13px}
.events li{color:var(--muted);font-size:12.5px}
.creds .why{color:var(--dim);font-size:11.5px}
.creds time,.events time{color:var(--dim);font-size:11.5px;white-space:nowrap}
.ok{color:var(--ok)}.no{color:var(--err)}.mid{color:var(--warn)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:9;
  max-width:92vw;padding:12px 16px;border-radius:14px;font-size:13.5px;color:#fff;
  background:rgba(12,18,36,.96);border:1px solid var(--card-brd);box-shadow:var(--sh);
  transition:transform .3s var(--ease)}
.toast.show{transform:translate(-50%,0)}
.toast.bad{border-color:rgba(251,113,133,.55)}
.toast.good{border-color:rgba(52,211,153,.55)}

.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;color:var(--dim);font-size:11.5px}
.foot a{color:var(--muted);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.2)}

@media (max-width:440px){
  .wrap{padding:16px 12px 32px}
  .card{padding:16px}
  .coach-title{font-size:18px}
  .logo{width:38px;height:38px}
  h1{font-size:17px;white-space:nowrap}
  .brand .sub{display:none}                 /* tor ekranda sarlavha ikki qatorga bo'linmasin */
  .status{font-size:11px;padding:5px 9px}
  .coach-count{width:54px;height:54px;font-size:26px;top:42px;right:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}