/* ===============================
   AUTH – COLLECTORS UI
=============================== */

:root{
    --bg: #000;
    --red: #dc2626;
    --red-2: #ef4444;
    --border: rgba(255,255,255,.14);
    --text: #f5f5f5;
    --muted: #9ca3af;
    --radius: 20px;
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body.auth{
    margin:0;
    background: #000;
    font-family: "Avenir Next Georgian Medium", system-ui;
    color: var(--text);
    overflow:hidden;
}

/* animated glow bg */
.auth-bg{
    position:fixed;
    inset:0;
    background:
            radial-gradient(900px 500px at 15% 10%, rgba(220,38,38,.25), transparent 60%),
            radial-gradient(700px 400px at 85% 30%, rgba(239,68,68,.18), transparent 60%);
    filter: blur(60px);
    pointer-events:none;
}

/* center wrap */
.auth-wrap{
    min-height:100%;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
}

/* card */
.auth-card{
    width:100%;
    max-width:420px;
    padding:32px;
    border-radius: var(--radius);
    background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--border);
    box-shadow: 0 30px 80px rgba(0,0,0,.8);
}

/* brand */
.auth-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
}

.auth-brand .logo{
    width:46px;
    height:46px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    background:
            radial-gradient(circle at 30% 30%, var(--red-2), var(--red));
    box-shadow: 0 0 35px rgba(220,38,38,.45);
}

.auth-brand .name{
    font-family: "Avenir Next Georgian Bold";
    font-size:18px;
}

.auth-brand .sub{
    font-size:12px;
    color: var(--muted);
}

/* headings */
.auth-card h2{
    font-family: "Avenir Next Georgian Bold";
    margin: 10px 0 6px;
}

.auth-hint{
    color: var(--muted);
    font-size:13px;
    margin-bottom:22px;
}

/* fields */
.auth-field{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius: 16px;
    background: rgba(0,0,0,.6);
    border:1px solid var(--border);
    margin-bottom:14px;
}

.auth-field i{
    font-size:18px;
    color: var(--muted);
}

.auth-field input{
    background:none;
    border:0;
    outline:none;
    color:var(--text);
    width:100%;
    font-size:14px;
}

.auth-field:focus-within{
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(220,38,38,.35);
}

/* error */
.auth-error{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color: #fecaca;
    background: rgba(220,38,38,.15);
    border:1px solid rgba(220,38,38,.4);
    border-radius: 14px;
    padding:10px 12px;
    margin-bottom:14px;
}

/* button */
.auth-btn{
    width:100%;
    border:0;
    padding:14px 18px;
    border-radius: 16px;
    background:
            linear-gradient(135deg, var(--red), var(--red-2));
    color:#fff;
    font-family: "Avenir Next Georgian Bold";
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-shadow: 0 10px 40px rgba(220,38,38,.45);
}

.auth-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 50px rgba(220,38,38,.6);
}


.auth-brand img {
    height: 45px;
}