/* ============================================================
   Chekava · style.css — страница авторизації (тёмна тема)
   ============================================================ */

*{ box-sizing:border-box; }

:root{
    --bg:#262629;
    --header:#111010;
    --card:#2f2f33;
    --text:#ffffff;
    --muted:#CBCBCB;
    --border:#3a3a40;
    --accent:#EA6A29;
    --accent-dark:#cf5a20;
}

html, body{ height:100%; overflow-x:hidden; }

body.auth{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(1200px 600px at 50% -10%, #2f2017 0%, var(--bg) 55%);
    color:var(--text);
    font-family:-apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    padding:24px;
    position:relative;
    overflow-x:hidden;
    overflow-y:auto;
}

/* декоративні «орби» на фоні */
body.auth .orb{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5;
    z-index:0;
}
.orb.o1{ width:340px; height:340px; background:#6e3c18; top:-90px; left:-60px; }
.orb.o2{ width:300px; height:300px; background:#3a2412; bottom:-80px; right:-50px; }

/* ---------- картка ---------- */
.auth-card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:420px;
    background:rgba(34,34,38,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border);
    border-radius:22px;
    padding:38px 34px;
    box-shadow:0 30px 70px rgba(0,0,0,.55);
}

.auth-logo{ display:flex; justify-content:center; margin-bottom:18px; }
.auth-logo img{ height:64px; width:auto; }

.auth-card h1{ font-size:23px; text-align:center; margin:0 0 6px; color:#fff; }
.auth-card .sub{
    text-align:center;
    color:var(--muted);
    font-size:14px;
    margin:0 0 26px;
    line-height:1.5;
}

/* ---------- поля вводу ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:7px; }
.field input{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    background:#1c1c1f;
    border:1px solid var(--border);
    color:#fff;
    font-size:16px;
    transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#7e7e85; }
.field input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(234,106,41,.25);
}

/* ---------- основна кнопка ---------- */
.btn{
    width:100%;
    padding:14px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    background:linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:transform .12s, box-shadow .2s, opacity .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(234,106,41,.3); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- поле вводу коду (OTP) ---------- */
.otp{ display:flex; gap:10px; justify-content:center; margin:8px 0 20px; }
.otp input{
    width:48px;
    height:58px;
    text-align:center;
    font-size:24px;
    font-weight:700;
    border-radius:12px;
    background:#1c1c1f;
    border:1px solid var(--border);
    color:#fff;
    transition:border-color .2s, box-shadow .2s, transform .1s;
}
.otp input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(234,106,41,.25);
    transform:translateY(-2px);
}

/* ---------- повідомлення ---------- */
.msg{ text-align:center; font-size:14px; margin-top:14px; min-height:18px; }
.msg.error{ color:#ff7a6b; }
.msg.success{ color:#7CE3A0; }

/* ---------- повторна відправка ---------- */
.resend{ text-align:center; margin-top:16px; font-size:14px; color:var(--muted); }
.resend button{
    width:auto;
    background:none;
    border:0;
    color:var(--accent);
    cursor:pointer;
    font-weight:600;
    padding:0;
}
.resend button:disabled{ color:var(--muted); cursor:not-allowed; }

/* ---------- посилання «назад» ---------- */
.back-link{
    display:block;
    margin:18px auto 0;
    color:var(--muted);
    font-size:14px;
    background:none;
    border:0;
    cursor:pointer;
    width:auto;
}
.back-link:hover{ color:#fff; }

/* ---------- кроки / анімація ---------- */
.step{ animation:fadeIn .35s ease; }
@keyframes fadeIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:none; }
}
.hidden{ display:none; }

/* ---------- мобільні ---------- */
@media (max-width:480px){
    body.auth{ align-items:flex-start; padding:28px 16px; }
    .auth-card{ padding:30px 22px; }
    .auth-logo img{ height:54px; }
    .otp{ gap:8px; }
    .otp input{ width:42px; height:52px; font-size:20px; }
}