/* =====================================================================
 * Sign-in screen — deliberately self-contained.
 * It carries its own tokens so it renders correctly even if the main
 * stylesheet is missing, stale, or still being edited.
 * ===================================================================== */

:root {
    --ink-900: #0A0B0F;
    --ink-800: #12141B;
    --ink-700: #171A23;
    --ink-600: #1D212C;
    --ink-500: #262B38;
    --line: #242938;

    --text: #EDEFF5;
    --text-2: #A5ADBF;
    --text-3: #6B7385;

    --accent: #FFB020;
    --accent-2: #FF7A45;
    --accent-soft: rgba(255, 176, 32, .12);
    --accent-line: rgba(255, 176, 32, .28);
    --violet: #8B7CF6;
    --teal: #2DD4BF;
    --rose: #FB6E6E;
    --rose-soft: rgba(251, 110, 110, .13);

    --grad: linear-gradient(135deg, #FFB020 0%, #FF7A45 100%);
    --ease: cubic-bezier(.22,.61,.36,1);
    --shadow-3: 0 24px 60px -12px rgba(0,0,0,.75);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--ink-900);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------------- ambient background ---------------------------- */

.auth-orbs { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    animation: drift 22s var(--ease) infinite alternate;
}
.orb.o1 { width: 420px; height: 420px; background: #FFB020; top: -150px; right: -110px; }
.orb.o2 { width: 380px; height: 380px; background: #8B7CF6; bottom: -170px; left: -130px; animation-delay: -7s; }
.orb.o3 { width: 300px; height: 300px; background: #FF7A45; top: 48%; left: 58%; opacity: .26; animation-delay: -14s; }

@keyframes drift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.15); }
}

/* ---------------- card ------------------------------------------ */

.auth-wrap {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.auth-card {
    width: 100%; max-width: 420px;
    background: rgba(18, 20, 27, .84);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px 24px 24px;
    box-shadow: var(--shadow-3);
    animation: cardIn .45s var(--ease);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }

.brand-mark {
    width: 46px; height: 46px; flex: none;
    border-radius: 14px;
    background: var(--grad);
    display: grid; place-items: center;
    color: #1A1206; font-size: 19px;
    box-shadow: 0 4px 16px -4px rgba(255,140,32,.6);
}

.auth-brand h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.auth-brand small { color: var(--text-3); font-size: 12.5px; }

.auth-lead {
    font-size: 13px; color: var(--text-2);
    line-height: 1.55; margin: 0 0 20px;
    padding: 12px;
    border-left: 2px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 8px 8px 0;
}

.auth-error {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--rose-soft);
    border: 1px solid rgba(251,110,110,.3);
    color: var(--rose);
    border-radius: 12px;
    padding: 12px;
    font-size: 13px;
    margin-bottom: 16px;
    animation: shake .4s var(--ease);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ---------------- fields ---------------------------------------- */

.field { margin-bottom: 14px; }

.field label {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-3);
    margin-bottom: 6px;
}

.input-icon { position: relative; display: flex; align-items: center; }

.input-icon > i:first-child {
    position: absolute; left: 13px;
    color: var(--text-3); font-size: 13px;
    pointer-events: none; transition: color .18s var(--ease);
}

.input-icon input {
    font: inherit;
    width: 100%; height: 48px;
    padding: 0 42px 0 38px;
    background: var(--ink-600);
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 11px;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.input-icon input::placeholder { color: var(--text-3); }
.input-icon input:focus {
    outline: none;
    border-color: var(--accent-line);
    background: var(--ink-500);
}
.input-icon:focus-within > i:first-child { color: var(--accent); }

.peek {
    position: absolute; right: 6px;
    background: none; border: 0; cursor: pointer;
    color: var(--text-3); font-size: 13px;
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
    transition: color .16s var(--ease), background .16s var(--ease);
}
.peek:hover { color: var(--text); background: var(--ink-700); }

/* ---------------- submit ---------------------------------------- */

.auth-submit {
    font: inherit; font-size: 14.5px; font-weight: 700;
    width: 100%; height: 50px;
    margin-top: 18px;
    border: 0; border-radius: 12px;
    background: var(--grad);
    color: #1A1206;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 6px 20px -8px rgba(255,140,32,.7);
    transition: filter .18s var(--ease), transform .12s var(--ease);
}
.auth-submit:hover { filter: brightness(1.07); }
.auth-submit:active { transform: scale(.985); }
.auth-submit i { transition: transform .18s var(--ease); }
.auth-submit:hover i { transform: translateX(3px); }

.auth-foot {
    margin: 20px 0 0;
    font-size: 11.5px; color: var(--text-3);
    display: flex; align-items: flex-start; gap: 7px;
    line-height: 1.5;
}
.auth-foot i { color: var(--teal); margin-top: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}