:root{
    color-scheme:light dark;
    --bg:#f6f7f9;
    --surface:rgba(255,255,255,.86);
    --surface-solid:#fff;
    --text:#111318;
    --muted:#6f7480;
    --line:rgba(17,19,24,.09);
    --input:#f3f4f6;
    --primary:#111318;
    --primary-text:#fff;
    --danger:#b42318;
    --danger-bg:#fef3f2;
    --success:#087443;
    --shadow:0 24px 70px rgba(17,19,24,.10),0 3px 14px rgba(17,19,24,.05);
    --radius-xl:28px;
    --radius-lg:18px;
    --radius-md:14px;
}

*{box-sizing:border-box}

html{min-height:100%}

body{
    min-height:100vh;
    margin:0;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 10%,rgba(255,255,255,.95),transparent 30%),
        radial-gradient(circle at 88% 88%,rgba(223,227,236,.75),transparent 34%),
        var(--bg);
    -webkit-font-smoothing:antialiased;
}

.auth-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:28px 18px;
}

.auth-wrap{
    width:min(100%,560px);
}

.brand-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 4px 18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:760;
    letter-spacing:-.025em;
}

.brand-mark{
    width:38px;
    height:38px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(145deg,#111318,#343842);
    box-shadow:0 10px 22px rgba(17,19,24,.18);
}

.lang-switch{
    display:flex;
    padding:4px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(16px);
}

.lang-switch button{
    border:0;
    background:transparent;
    color:var(--muted);
    min-width:46px;
    height:34px;
    border-radius:999px;
    cursor:pointer;
    font-weight:650;
}

.lang-switch button.is-active{
    color:var(--text);
    background:var(--surface-solid);
    box-shadow:0 3px 10px rgba(17,19,24,.08);
}

.auth-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-xl);
    background:var(--surface);
    backdrop-filter:blur(26px);
    box-shadow:var(--shadow);
    padding:38px;
}

.auth-card:before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-110px;
    top:-140px;
    background:radial-gradient(circle,rgba(17,19,24,.075),transparent 68%);
    pointer-events:none;
}

.eyebrow{
    margin:0 0 9px;
    color:var(--muted);
    font-size:.84rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

h1{
    margin:0;
    font-size:clamp(2rem,7vw,3.2rem);
    line-height:1.02;
    letter-spacing:-.055em;
    font-weight:780;
}

.lead{
    margin:16px 0 30px;
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.6;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.field{margin:0 0 14px}

.field.full{grid-column:1/-1}

label{
    display:block;
    margin:0 0 8px;
    font-size:.86rem;
    font-weight:700;
}

.input-wrap{position:relative}

input,select{
    width:100%;
    height:54px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    outline:none;
    background:var(--input);
    color:var(--text);
    padding:0 16px;
    font:inherit;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}

input:focus,select:focus{
    border-color:rgba(17,19,24,.55);
    background:var(--surface-solid);
    box-shadow:0 0 0 4px rgba(17,19,24,.07);
}

.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    padding:8px;
    border-radius:10px;
}

.primary-button{
    width:100%;
    height:56px;
    margin-top:8px;
    border:0;
    border-radius:var(--radius-md);
    background:var(--primary);
    color:var(--primary-text);
    font:inherit;
    font-weight:750;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(17,19,24,.18);
    transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}

.primary-button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 34px rgba(17,19,24,.22);
}

.primary-button:active{transform:translateY(0)}

.primary-button:disabled{
    cursor:wait;
    opacity:.72;
}

.alert{
    margin:0 0 20px;
    padding:13px 15px;
    border-radius:13px;
    font-size:.93rem;
    line-height:1.45;
}

.alert.error{
    color:var(--danger);
    background:var(--danger-bg);
    border:1px solid rgba(180,35,24,.12);
}

.status-row{
    display:flex;
    flex-wrap:wrap;
    gap:9px 15px;
    margin-top:24px;
    color:var(--muted);
    font-size:.82rem;
}

.status-row span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#12a66a;
    box-shadow:0 0 0 4px rgba(18,166,106,.10);
}

.auth-footer{
    text-align:center;
    margin-top:18px;
    color:var(--muted);
    font-size:.8rem;
}

.login-card{width:min(100%,500px)}

.login-card .auth-card{padding:42px}

.login-card .primary-button{margin-top:14px}

@media(max-width:620px){
    .auth-shell{padding:18px 12px}
    .auth-card,.login-card .auth-card{padding:27px 20px;border-radius:22px}
    .form-grid{grid-template-columns:1fr;gap:0}
    .field.full{grid-column:auto}
    .brand-row{margin-bottom:14px}
    .lead{margin-bottom:24px}
}

@media(prefers-color-scheme:dark){
    :root{
        --bg:#0d0f13;
        --surface:rgba(23,25,31,.86);
        --surface-solid:#181b21;
        --text:#f3f5f7;
        --muted:#9a9faa;
        --line:rgba(255,255,255,.10);
        --input:#20232a;
        --primary:#f4f5f7;
        --primary-text:#111318;
        --danger:#ffb4ab;
        --danger-bg:rgba(180,35,24,.18);
        --shadow:0 28px 80px rgba(0,0,0,.38),0 3px 18px rgba(0,0,0,.25);
    }

    body{
        background:
            radial-gradient(circle at 15% 10%,rgba(44,48,58,.5),transparent 30%),
            radial-gradient(circle at 88% 88%,rgba(28,31,38,.65),transparent 34%),
            var(--bg);
    }

    .lang-switch{background:rgba(23,25,31,.66)}
    .auth-card{border-color:rgba(255,255,255,.07)}
    .brand-mark{background:linear-gradient(145deg,#f4f5f7,#9ca2af);color:#111318}
}