/* ===== AUTH PAGES CSS ===== */

:root {
    --dark: #0a1428;
    --navy: #1a2744;
    --gold: #c9a84c;
    --gold-light: #e0c070;
}

* { box-sizing: border-box; }

body { margin: 0; font-family: 'Outfit', sans-serif; }

/* Auth Wrapper */
.auth-body { min-height: 100vh; background: var(--dark); display: flex; align-items: stretch; }
.auth-wrapper { display: flex; width: 100%; min-height: 100vh; }

/* Left Panel */
.auth-left {
    flex: 0 0 45%;
    background: linear-gradient(160deg, var(--navy) 0%, var(--dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.auth-left::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(201,168,76,.15) 0%, transparent 70%);
    top: -100px; right: -100px;
    border-radius: 50%;
}
.auth-left::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%);
    bottom: -80px; left: -80px;
    border-radius: 50%;
}
.auth-left-content { position: relative; z-index: 1; text-align: center; color: #fff; }

/* Brand */
.auth-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 3rem; }
.auth-brand-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem; font-weight: 700;
    color: var(--dark);
}
.auth-brand-text { text-align: left; }
.auth-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; font-weight: 700;
    color: #fff; display: block; line-height: 1;
}
.auth-brand-sub { font-size: .7rem; color: var(--gold); letter-spacing: 3px; text-transform: uppercase; }

/* Left Panel Content */
.auth-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; font-weight: 700;
    color: #fff; line-height: 1.25;
    margin-bottom: 1rem;
}
.auth-tagline span { color: var(--gold); }
.auth-desc { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.7; max-width: 320px; margin: 0 auto 2.5rem; }

.auth-stats { display: flex; gap: 2rem; justify-content: center; margin-top: 2rem; }
.auth-stat { text-align: center; }
.auth-stat-number { font-family: 'Cormorant Garamond',serif; font-size: 1.8rem; font-weight: 700; color: var(--gold); display: block; line-height: 1; }
.auth-stat-label { font-size: .7rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; }

.auth-divider { width: 60px; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 1.5rem auto; }

/* Right Panel */
.auth-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: #fff;
}
.auth-form-container { width: 100%; max-width: 400px; }
.auth-form-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; font-weight: 700;
    color: var(--dark); margin-bottom: .25rem;
}
.auth-form-sub { color: #888; font-size: .9rem; margin-bottom: 2rem; }

/* Form Styling */
.auth-form .form-label { font-weight: 500; color: #444; font-size: .85rem; margin-bottom: .4rem; }
.auth-form .form-control {
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    padding: .7rem 1rem;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
}
.auth-form .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.15);
    outline: none;
}
.auth-input-group { position: relative; }
.auth-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #bbb; pointer-events: none;
}
.auth-input-group .form-control { padding-left: 2.5rem; }
.auth-toggle-pw {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #bbb; cursor: pointer; background: none; border: none; padding: 0;
}

.btn-auth {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--dark);
    border: none; border-radius: 8px;
    padding: .75rem 1rem; font-weight: 700; font-size: .95rem;
    width: 100%; transition: transform .2s, box-shadow .2s;
}
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.35); color: var(--dark); }
.btn-auth:active { transform: translateY(0); }

.auth-footer-link { display: block; text-align: center; margin-top: 1.5rem; font-size: .85rem; color: #888; }
.auth-footer-link a { color: var(--gold); text-decoration: none; font-weight: 500; }

/* Lang switcher on auth page */
.auth-lang { position: absolute; top: 1rem; right: 1rem; }
.auth-lang a { font-size: .78rem; color: rgba(255,255,255,.5); text-decoration: none; border: 1px solid rgba(255,255,255,.2); padding: 2px 10px; border-radius: 20px; transition: .2s; }
.auth-lang a:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* Error alert */
.auth-alert { border-radius: 8px; font-size: .88rem; }

/* ===== LOCK SCREEN ===== */
.lock-body { background: var(--dark); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.lock-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    color: #fff;
    max-width: 380px;
    width: 100%;
}
.lock-clock { font-family: 'Cormorant Garamond',serif; font-size: 4rem; font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: 2px; }
.lock-date { font-size: .85rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem; }
.lock-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: var(--dark); font-weight: 700; }
.lock-username { font-size: 1.1rem; font-weight: 600; }
.lock-hint { font-size: .82rem; color: rgba(255,255,255,.45); margin-bottom: 1.5rem; }
.lock-form .form-control { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; text-align: center; letter-spacing: 2px; font-size: 1rem; padding: .75rem; }
.lock-form .form-control::placeholder { color: rgba(255,255,255,.3); letter-spacing: normal; }
.lock-form .form-control:focus { background: rgba(255,255,255,.15); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.2); outline: none; color: #fff; }

/* Responsive */
@media (max-width: 768px) {
    .auth-left { display: none; }
    .auth-right { padding: 2rem 1.5rem; }
}