/* ============================================================
   MASJIDOS AUTH THEME (Login & Register)
   ============================================================ */

:root[data-theme="light"] {
    --bg: #F8FAF9;
    --card: #ffffff;
    --card2: #f1f5f3;
    --ink: #1B4332;
    --ink2: #2D6A4F;
    --ink3: #6B7C74;
    --bord: rgba(45,106,79,0.12);
    --gold: #C9A84C;
    --green: #2D6A4F;
    --red: #e74c3c;
}

:root[data-theme="dark"] {
    --bg: #09120c;
    --card: #0f1e14;
    --card2: #162a1d;
    --ink: #f0f4f2;
    --ink2: #d1d9d5;
    --ink3: #8da398;
    --bord: rgba(255,255,255,0.08);
    --gold: #C9A84C;
    --green: #40916C;
    --red: #ff6b6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Tajawal', sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    transition: background 0.3s;
}

/* COSMIC BACKGROUND */
.cosmic {
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, #09120c, #1B4332);
    overflow: hidden;
}

[data-theme="light"] .cosmic {
    background: linear-gradient(to bottom, #e8f5e9, #c8e6c9);
}

.stars { position: absolute; inset: 0; }
.star {
    position: absolute; background: #fff; border-radius: 50%;
    opacity: var(--lo);
    animation: twinkle var(--d) ease-in-out var(--dl) infinite alternate;
}

@keyframes twinkle { 
    from { opacity: var(--lo); transform: scale(1); }
    to { opacity: var(--hi); transform: scale(1.2); }
}

.moon {
    position: absolute; top: 10%; right: 10%;
    width: 80px; height: 80px;
    background: #fdf6e3; border-radius: 50%;
    box-shadow: 0 0 40px rgba(253,246,227,0.2);
}

.masjid-bg {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 800px;
    opacity: 0.15; fill: var(--gold);
}

/* AUTH WRAPPER */
.auth-wrap {
    width: 1000px; max-width: 95vw;
    background: var(--card);
    border-radius: 24px;
    display: flex;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    border: 1px solid var(--bord);
    position: relative; z-index: 10;
}

.auth-left {
    flex: 1; padding: 60px;
    background: linear-gradient(135deg, #1B4332 0%, #09120c 100%);
    color: #fff;
    display: flex; flex-direction: column;
    justify-content: space-between;
}

.left-brand { display: flex; align-items: center; gap: 15px; }
.lb-icon { font-size: 30px; background: var(--gold); padding: 10px; border-radius: 12px; }
.lb-name { font-family: 'Amiri', serif; font-size: 24px; color: var(--gold); }
.lb-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.6; }

.left-middle h2 { font-family: 'Amiri', serif; font-size: 38px; line-height: 1.2; margin-bottom: 20px; }
.left-middle h2 span { color: var(--gold); }
.left-middle p { opacity: 0.8; line-height: 1.6; margin-bottom: 30px; }

.features { display: grid; gap: 15px; }
.feat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.feat-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; }

.auth-right { flex: 1.2; padding: 50px 60px; background: var(--card); }
.ar-title { font-size: 24px; font-weight: 800; color: var(--ink); }
.ar-sub { font-size: 14px; color: var(--ink3); margin-top: 5px; margin-bottom: 30px; }

/* FORMS */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.field input {
    width: 100%; padding: 12px 16px;
    background: var(--card2);
    border: 1.5px solid var(--bord);
    border-radius: 12px; color: var(--ink);
    font-family: inherit; transition: all 0.2s;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,76,0.1); }

.pass-wrap { position: relative; }
.pass-eye {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--ink3);
}

.submit-btn {
    width: 100%; padding: 14px;
    background: var(--gold); color: #000;
    border: none; border-radius: 12px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: all 0.3s;
    margin-top: 10px;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,168,76,0.3); }

.alert { padding: 12px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.alert-error { background: rgba(231,76,60,0.1); color: var(--red); border: 1px solid rgba(231,76,60,0.2); }
.alert-success { background: rgba(39,174,96,0.1); color: var(--green); border: 1px solid rgba(39,174,96,0.2); }

.register-link { text-align: center; margin-top: 25px; font-size: 14px; color: var(--ink3); }
.register-link a { color: var(--gold); text-decoration: none; font-weight: 700; }

.theme-toggle {
    position: fixed; top: 20px; right: 20px;
    padding: 8px 16px; border-radius: 99px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--bord); cursor: pointer; z-index: 100;
}

@media (max-width: 850px) {
    .auth-left { display: none; }
    .auth-wrap { width: 450px; }
}