/* ROASTBOOK — AUTH PREMIUM v2  |  warm amber × blue  |  cinematic */

/* ── DESIGN TOKENS ── */
:root {
    --au-amber:     #f59e0b;
    --au-amber-dim: rgba(245,158,11,0.18);
    --au-orange:    #ea7c2b;
    --au-glow:      rgba(234,124,43,0.28);
    --au-blue:      #3b82f6;
    --au-indigo:    rgba(99,102,241,0.22);
    --au-card-bg:   rgba(9,12,26,0.76);
    --au-border:    rgba(245,158,11,0.14);
    --au-text:      rgba(240,232,218,0.94);
    --au-muted:     rgba(190,178,162,0.68);
    --au-ease:      cubic-bezier(0.4,0,0.2,1);
    --au-spring:    cubic-bezier(0.34,1.56,0.64,1);
}
:root[data-theme='light'] {
    --au-card-bg:   rgba(255,253,248,0.88);
    --au-border:    rgba(234,124,43,0.16);
    --au-text:      #1a1208;
    --au-muted:     #6b5c48;
}

/* ── FONT SMOOTHING ── */
.auth-page * { -webkit-font-smoothing:antialiased; }

/* ── 1. NEBULA BACKGROUND ── */
.auth-page {
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background:
        linear-gradient(160deg,#06080f 0%,#0a0c18 55%,#090a14 100%) !important;
    background-attachment:fixed !important;
    padding:36px 24px 72px !important;
}

/* nebula layer canvas — three slow drifting clouds */
.auth-page::before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 25%, rgba(234,124,43,0.13) 0%, transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 72%, rgba(99,102,241,0.16) 0%, transparent 58%),
        radial-gradient(ellipse 80% 50% at 52% 100%, rgba(245,158,11,0.09) 0%, transparent 55%),
        radial-gradient(ellipse 55% 65% at 90% 12%, rgba(59,130,246,0.10) 0%, transparent 52%);
    animation: nebulaShift 28s ease-in-out infinite alternate;
    filter:blur(0px);
}

/* soft warm glow orb — bottom left */
.auth-page::after {
    content:'';
    position:fixed;
    width:640px;
    height:640px;
    border-radius:50%;
    bottom:-220px;
    left:-180px;
    background:radial-gradient(circle, rgba(245,158,11,0.11) 0%, rgba(234,124,43,0.07) 40%, transparent 72%);
    filter:blur(72px);
    pointer-events:none;
    z-index:0;
    animation:orbWarm 22s ease-in-out infinite alternate;
}

@keyframes nebulaShift {
    0%   { opacity:.7; transform:scale(1)   translate(0,0); }
    30%  { opacity:.9; transform:scale(1.03) translate(18px,12px); }
    65%  { opacity:.75; transform:scale(0.98) translate(-10px,22px); }
    100% { opacity:.85; transform:scale(1.04) translate(24px,-8px); }
}
@keyframes orbWarm {
    0%   { transform:translate(0,0)       scale(1); }
    50%  { transform:translate(40px,-30px) scale(1.08); }
    100% { transform:translate(-20px,20px) scale(0.96); }
}

:root[data-theme='light'] .auth-page {
    background:
        linear-gradient(160deg,#fdf8f1 0%,#f9f4ec 55%,#faf6ef 100%) !important;
}
:root[data-theme='light'] .auth-page::before {
    background:
        radial-gradient(ellipse 70% 55% at 15% 25%, rgba(234,124,43,0.07) 0%, transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 72%, rgba(99,102,241,0.07) 0%, transparent 58%),
        radial-gradient(ellipse 80% 50% at 52% 100%, rgba(245,158,11,0.05) 0%, transparent 55%);
}
:root[data-theme='light'] .auth-page::after {
    background:radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 72%);
}

/* ── 2. AUTH CARD ── */
.auth-card {
    position:relative;
    z-index:2;
    background:var(--au-card-bg) !important;
    backdrop-filter:blur(32px) saturate(170%) !important;
    -webkit-backdrop-filter:blur(32px) saturate(170%) !important;
    border:1px solid var(--au-border) !important;
    border-top:1px solid rgba(245,158,11,0.22) !important;
    border-radius:28px !important;
    padding:40px 38px !important;
    overflow:visible !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.06),
        0 8px 28px rgba(0,0,0,0.38),
        0 28px 64px rgba(3,6,18,0.44),
        inset 0 1px 0 rgba(255,220,150,0.07) !important;
    animation:
        cardEntrance .5s cubic-bezier(0.175,0.885,0.32,1.275) both,
        cardFloat 7s ease-in-out 0.6s infinite !important;
}

/* amber glow ring behind card */
.auth-card::before {
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:30px;
    background:conic-gradient(
        from 0deg,
        rgba(245,158,11,0.40),
        rgba(234,124,43,0.28),
        rgba(99,102,241,0.22),
        rgba(59,130,246,0.18),
        rgba(245,158,11,0.40)
    );
    z-index:-1;
    opacity:.55;
    filter:blur(5px);
    animation:ringRotate 14s linear infinite;
}

/* deep aura glow */
.auth-card::after {
    content:'';
    position:absolute;
    inset:-80px;
    border-radius:50%;
    background:radial-gradient(ellipse 75% 55% at 50% 50%,
        rgba(234,124,43,0.16) 0%,
        rgba(245,158,11,0.08) 38%,
        transparent 68%);
    z-index:-2;
    filter:blur(28px);
    pointer-events:none;
    animation:auraBreath 6s ease-in-out infinite alternate;
}

:root[data-theme='light'] .auth-card {
    background:rgba(255,252,248,0.90) !important;
    border:1px solid rgba(234,124,43,0.16) !important;
    border-top:1px solid rgba(245,158,11,0.26) !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.06),
        0 8px 24px rgba(180,120,40,0.10),
        0 28px 56px rgba(160,100,20,0.07),
        inset 0 1px 0 rgba(255,240,210,0.7) !important;
}
:root[data-theme='light'] .auth-card::before { opacity:.25; }
:root[data-theme='light'] .auth-card::after {
    background:radial-gradient(ellipse 75% 55% at 50% 50%,
        rgba(234,124,43,0.08) 0%, transparent 68%);
}

@keyframes cardEntrance {
    from { opacity:0; transform:translateY(24px) scale(0.97); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes cardFloat {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-6px); }
}
@keyframes ringRotate {
    to { transform:rotate(360deg); }
}
@keyframes auraBreath {
    from { opacity:.55; transform:scale(1); }
    to   { opacity:.90; transform:scale(1.06); }
}

/* ── 3. LOGO ── */
.auth-page .auth-logo { margin-bottom:28px; }

.auth-page .auth-logo-frame {
    filter:drop-shadow(0 4px 20px rgba(234,124,43,0.24)) !important;
    animation:logoBob 5s ease-in-out infinite !important;
}
@keyframes logoBob {
    0%,100% { transform:translateY(0); }
    48%     { transform:translateY(-5px); }
}

.auth-page .auth-logo-tag {
    color:rgba(234,124,43,0.72) !important;
    font-size:10px !important;
    letter-spacing:0.14em !important;
    text-transform:lowercase !important;
}

/* ── 4. TITLE & SUBTITLE ── */
.auth-page .auth-title {
    background:linear-gradient(130deg,#f0e8d8 0%,#e8d5b8 40%,#c9a96e 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-size:clamp(1.9rem,4vw,2.6rem) !important;
    line-height:1.0 !important;
    letter-spacing:-0.04em !important;
    margin-bottom:10px;
}
:root[data-theme='light'] .auth-page .auth-title {
    background:linear-gradient(130deg,#5c3a0a 0%,#a0621a 50%,#c87d2a 100%);
    -webkit-background-clip:text;
    background-clip:text;
}

.auth-page .auth-subtitle {
    color:var(--au-muted) !important;
    font-size:14px !important;
    line-height:1.65 !important;
    margin-bottom:30px !important;
}
.auth-page .auth-subtitle strong { color:rgba(245,195,110,0.88) !important; }

/* ── 5. FORM LABELS ── */
.auth-page .form-label {
    color:rgba(200,172,128,0.72) !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:0.05em;
    text-transform:lowercase;
    transition:color .2s var(--au-ease);
}
.auth-page .form-group:focus-within .form-label {
    color:rgba(245,158,11,0.90) !important;
}
.auth-page .form-group { margin-bottom:22px; }

/* ── 6. INPUTS ── */
.auth-page .form-control {
    background:rgba(8,11,24,0.58) !important;
    border:1px solid rgba(200,155,80,0.16) !important;
    border-bottom-width:1px !important;
    border-radius:14px !important;
    color:rgba(240,228,208,0.92) !important;
    padding:13px 16px !important;
    font-size:14px !important;
    transition:
        border-color .25s var(--au-ease),
        box-shadow   .30s var(--au-ease),
        background   .25s var(--au-ease),
        transform    .20s var(--au-spring) !important;
}
:root[data-theme='light'] .auth-page .form-control {
    background:rgba(255,250,240,0.92) !important;
    border-color:rgba(200,140,60,0.18) !important;
    color:#1a1208 !important;
}

.auth-page .form-control::placeholder {
    color:rgba(160,135,100,0.52) !important;
}
.auth-page .form-control:focus {
    border-color:rgba(245,158,11,0.50) !important;
    background:rgba(12,16,34,0.72) !important;
    box-shadow:
        0 0 0 3px rgba(245,158,11,0.13),
        0 4px 18px rgba(234,124,43,0.10) !important;
    transform:translateY(-1px);
}
:root[data-theme='light'] .auth-page .form-control:focus {
    background:rgba(255,253,248,0.98) !important;
    border-color:rgba(234,124,43,0.40) !important;
    box-shadow:
        0 0 0 3px rgba(245,158,11,0.10),
        0 4px 14px rgba(234,124,43,0.08) !important;
}

.auth-page select.form-control {
    background:rgba(8,11,24,0.58) !important;
    color:rgba(225,205,175,0.90) !important;
}
.auth-page select.form-control option { background:#0f0c1a; color:#e8d8b8; }

/* ── 7. OTP INPUTS ── */
.auth-page .otp-container { gap:10px; margin:26px 0; }

.auth-page .otp-input {
    background:rgba(8,11,24,0.58) !important;
    border:1px solid rgba(200,155,80,0.18) !important;
    border-bottom-width:1px !important;
    border-radius:14px !important;
    color:rgba(240,228,208,0.95) !important;
    width:52px !important; height:62px !important;
    font-size:22px !important;
    transition:
        border-color .22s var(--au-ease),
        box-shadow   .28s var(--au-ease),
        transform    .22s var(--au-spring),
        background   .22s var(--au-ease) !important;
}
.auth-page .otp-input:focus {
    border-color:rgba(245,158,11,0.55) !important;
    background:rgba(18,14,6,0.75) !important;
    box-shadow:
        0 0 0 3px rgba(245,158,11,0.15),
        0 4px 16px rgba(234,124,43,0.14) !important;
    transform:translateY(-3px) scale(1.05) !important;
}
.auth-page .otp-input.filled {
    border-color:rgba(245,158,11,0.45) !important;
    background:rgba(245,158,11,0.08) !important;
}

/* ── 8. PRIMARY BUTTON ── */
.auth-page .btn-primary,
.auth-cta.btn-primary {
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        130deg,
        #c8720a 0%,
        #e8880f 35%,
        #f59e0b 68%,
        #e07b10 100%
    ) !important;
    background-size:220% 220% !important;
    border:1px solid rgba(255,200,100,0.30) !important;
    border-bottom-width:1px !important;
    color:#0f0800 !important;
    font-weight:800 !important;
    letter-spacing:-0.01em;
    box-shadow:
        inset 0 1px 0 rgba(255,240,180,0.25),
        0 6px 22px rgba(234,124,43,0.36),
        0 2px 8px  rgba(0,0,0,0.22) !important;
    transition:
        transform   .24s var(--au-spring),
        box-shadow  .24s var(--au-ease),
        filter      .24s var(--au-ease),
        background-position .7s var(--au-ease) !important;
    animation:btnAmberPulse 7s ease-in-out infinite alternate;
}
@keyframes btnAmberPulse {
    0%   { background-position:0%   60%; }
    50%  { background-position:100% 40%; }
    100% { background-position:0%   60%; }
}

/* shimmer sweep */
.auth-page .btn-primary::before,
.auth-cta.btn-primary::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        108deg,
        transparent 28%,
        rgba(255,255,255,0.22) 50%,
        transparent 72%
    );
    transform:translateX(-110%);
    transition:transform .55s var(--au-ease);
    pointer-events:none;
    z-index:1;
}
.auth-page .btn-primary:hover::before,
.auth-cta.btn-primary:hover::before { transform:translateX(110%); }

.auth-page .btn-primary:hover,
.auth-cta.btn-primary:hover {
    transform:translateY(-3px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,240,180,0.28),
        0 12px 34px rgba(234,124,43,0.46),
        0 4px 14px rgba(0,0,0,0.26) !important;
    filter:brightness(1.07) !important;
}
.auth-page .btn-primary:active,
.auth-cta.btn-primary:active {
    transform:translateY(1px) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.18),
        0 3px 10px rgba(234,124,43,0.24) !important;
    filter:brightness(0.97) !important;
    transition-duration:.08s !important;
}
.auth-page .btn-primary:disabled {
    opacity:.45;
    animation:none !important;
    transform:none !important;
}

/* ── 9. SECONDARY BUTTONS ── */
.auth-page .btn-secondary,
.auth-page .auth-actions-stack .btn-secondary {
    background:rgba(255,255,255,0.03) !important;
    border:1px solid rgba(200,155,80,0.16) !important;
    color:rgba(200,178,148,0.80) !important;
    transition:
        transform  .20s var(--au-spring),
        background .20s var(--au-ease),
        border-color .20s var(--au-ease),
        box-shadow .20s var(--au-ease) !important;
}
.auth-page .btn-secondary:hover {
    background:rgba(245,158,11,0.08) !important;
    border-color:rgba(245,158,11,0.28) !important;
    color:rgba(240,218,180,0.95) !important;
    transform:translateY(-2px) !important;
    box-shadow:0 5px 16px rgba(234,124,43,0.14) !important;
}
.auth-page .btn-secondary:active {
    transform:translateY(0) !important;
    transition-duration:.08s !important;
}

/* ── 10. AUTH ACTIONS STACK ── */
.auth-page .auth-actions-stack { gap:12px; }

/* ── 11. FOOTER LINKS ── */
.auth-page .auth-footer {
    margin-top:28px !important;
    color:rgba(170,148,115,0.68) !important;
    font-size:13px !important;
    line-height:1.9 !important;
}
.auth-page .auth-footer a,
.auth-page .auth-text-link {
    position:relative;
    color:rgba(245,158,11,0.84) !important;
    text-decoration:none !important;
    font-weight:700;
    transition:
        color .20s var(--au-ease),
        letter-spacing .22s var(--au-ease) !important;
}
.auth-page .auth-footer a::after,
.auth-page .auth-text-link::after {
    content:'';
    position:absolute;
    bottom:-1px; left:0;
    width:0; height:1px;
    background:linear-gradient(90deg,#f59e0b,#ea7c2b);
    border-radius:1px;
    transition:width .28s var(--au-ease);
}
.auth-page .auth-footer a:hover::after,
.auth-page .auth-text-link:hover::after { width:100%; }
.auth-page .auth-footer a:hover,
.auth-page .auth-text-link:hover {
    color:rgba(255,200,80,1) !important;
    letter-spacing:.015em;
}

/* ── 12. FORM ERROR ── */
.auth-page .form-error {
    background:rgba(239,68,68,0.08) !important;
    border:1px solid rgba(239,68,68,0.22) !important;
    border-radius:12px !important;
    color:rgba(252,165,130,0.95) !important;
    padding:11px 14px !important;
    margin-bottom:18px;
    animation:errorIn .28s var(--au-spring) !important;
}
@keyframes errorIn {
    from { opacity:0; transform:translateY(-6px) scale(.98); }
    to   { opacity:1; transform:none; }
}

/* ── 13. AVATAR UPLOAD ── */
.auth-page .avatar-upload { margin-bottom:26px; }
.auth-page .avatar-upload-btn {
    background:rgba(245,158,11,0.05) !important;
    border:1px dashed rgba(200,148,60,0.26) !important;
    border-radius:14px !important;
    color:rgba(200,168,110,0.72) !important;
    transition:
        border-color .22s var(--au-ease),
        background   .22s var(--au-ease),
        color        .22s var(--au-ease),
        transform    .22s var(--au-spring) !important;
}
.auth-page .avatar-upload-btn:hover {
    border-color:rgba(245,158,11,0.46) !important;
    background:rgba(245,158,11,0.10) !important;
    color:rgba(240,200,130,0.92) !important;
    transform:translateY(-2px) !important;
}
.auth-page .avatar-preview {
    border:2px solid rgba(245,158,11,0.22) !important;
    border-radius:50% !important;
}

/* ── 14. TWO-COL GRID SPACING ── */
.auth-page .auth-two-col { gap:16px; }

/* ── 15. TOAST ── */
#toast-container { top:22px !important; right:22px !important; }

.toast {
    background:rgba(10,8,20,0.90) !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    border:1px solid rgba(200,155,80,0.16) !important;
    border-radius:16px !important;
    padding:14px 18px !important;
    color:rgba(230,215,190,0.92) !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.06),
        0 8px 30px rgba(0,0,0,0.38),
        0 2px 8px  rgba(0,0,0,0.26) !important;
    animation:toastIn .38s cubic-bezier(0.175,0.885,0.32,1.275) !important;
    transition:transform .18s var(--au-ease), opacity .18s var(--au-ease) !important;
    cursor:pointer;
}
.toast:hover {
    transform:translateY(-2px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.10),
        0 14px 40px rgba(0,0,0,0.46) !important;
}
.toast.exit { animation:toastOut .20s var(--au-ease) forwards !important; }

@keyframes toastIn {
    from { opacity:0; transform:translateX(20px) translateY(-4px) scale(.93); }
    to   { opacity:1; transform:none; }
}
@keyframes toastOut {
    to { opacity:0; transform:translateX(20px) scale(.93); }
}

.toast-success {
    border-left:3px solid rgba(245,158,11,0.80) !important;
    background:rgba(245,158,11,0.08) !important;
}
.toast-error {
    border-left:3px solid rgba(239,68,68,0.80) !important;
    background:rgba(239,68,68,0.07) !important;
    color:rgba(252,165,130,0.95) !important;
}
.toast-info {
    border-left:3px solid rgba(59,130,246,0.75) !important;
    background:rgba(59,130,246,0.07) !important;
    color:rgba(180,210,255,0.90) !important;
}
.toast-warn {
    border-left:3px solid rgba(251,191,36,0.75) !important;
    background:rgba(251,191,36,0.06) !important;
    color:rgba(253,230,138,0.92) !important;
}

/* ── 16. SPINNER ── */
.auth-page .btn .spinner {
    border-color:rgba(20,10,0,0.30) !important;
    border-top-color:rgba(20,10,0,0.85) !important;
}

/* ── 17. NOTE CARD ── */
.auth-page .auth-note-card {
    background:rgba(245,158,11,0.06) !important;
    border:1px solid rgba(200,148,60,0.18) !important;
    color:rgba(200,175,130,0.80) !important;
    border-radius:14px !important;
}

/* ── 18. LOGO TAG PILL ── */
.auth-page .auth-inline-pill {
    background:rgba(245,158,11,0.08) !important;
    border:1px solid rgba(200,148,60,0.20) !important;
    color:rgba(234,168,80,0.88) !important;
}

/* ── 19. SITE SIGNATURE ── */
.site-signature-auth {
    opacity:.50;
    transition:opacity .25s ease;
}
.site-signature-auth:hover { opacity:.78; }

/* ── 20. RESPONSIVE ── */
@media (max-width:520px) {
    .auth-card { padding:32px 24px !important; }
    .auth-page::before { filter:blur(2px); }
    .auth-page::after  { width:360px; height:360px; }
    .auth-page .auth-two-col { grid-template-columns:1fr !important; }
}

@media (max-width:380px) {
    .auth-page .otp-input { width:42px !important; height:52px !important; font-size:18px !important; }
    .auth-page .otp-container { gap:6px; }
}

/* ── 21. REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce) {
    .auth-page, .auth-page::before, .auth-page::after,
    .auth-card, .auth-card::before, .auth-card::after,
    .auth-page .auth-logo-frame,
    .auth-page .btn-primary, .auth-cta.btn-primary {
        animation:none !important;
        transition:none !important;
    }
}