@import url(https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css);
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

   /* STANDALONE LOGIN */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input, select, textarea, button {
    color: inherit;
    font: inherit;
}
::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

:root {
    /* --- brand core: semi orange-brown --- */
    --primary: #C1682F;
    --primary-light: #D98342;
    --primary-dark: #8C4A1F;
    --primary-pale: #FBEADC;

    --accent: #C1682F;
    --accent-dark: #96501F;
    --accent-pale: #FBEADC;

    --black: #16130F;
    --white: #ffffff;

    --bg: #F6F4F1;
    --bg-soft: #EFEBE5;
    --surface: #ffffff;
    --sidebar-bg: #FAF8F5;

    --text: #16130F;
    --text2: #16130F;
    --text-muted: #7A7168;

    --light-border: #EAE4DC;
    --border-strong: #D9D0C4;

    --danger: #C4453B;
    --danger-bg: #FBE9E7;
    --success: #2F7A4D;
    --success-bg: #E6F4EA;
    --warning-text: #92600E;
    --warning-bg: #FDF0DC;

    --font-display: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(22,19,15,0.05);
    --shadow: 0 8px 24px rgba(22,19,15,0.08);
    --shadow-lg: 0 24px 50px rgba(22,19,15,0.16);
    --ease: cubic-bezier(.4,0,.2,1);
    --text-shadow: rgba(0, 0, 0, 1);
}

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

/* =========================================
   Keyframes for login page
   ========================================= */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

body {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--text);
    animation: fadeIn .35s var(--ease);
}

/* =========================================
   Theme toggle button
   ========================================= */
.dropdown-btn {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--light-border);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s var(--ease);
}
.dropdown-btn:hover,
.dropdown-btn.active {
    background: var(--primary-pale);
    border-color: var(--primary);
    color: var(--primary-dark);
}

/* =========================================
   Login — big split-screen
   ========================================= */
.body-login {
    font-family: var(--font-body);
    background-color: var(--bg);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.login-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1400px;
    min-height: 88vh;
    background-color: var(--white);
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.login-theme-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.login-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 4.5rem;
    animation: fadeInUp .5s var(--ease);
}

.login-form {
    width: 100%;
    max-width: 420px;
}

.login-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--black);
    letter-spacing: -1px;
}

.login-description {
    font-size: 0.98rem;
    color: var(--text-muted);
    margin-bottom: 2.6rem;
}

.login-box {
    position: relative;
    border: 1.5px solid var(--light-border);
    background-color: var(--white);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.login-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(193,104,47,0.16);
}

.login-icon {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-right: 0.75rem;
}

.login-box-input {
    position: relative;
    width: 100%;
}

.login-input {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding-top: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text);
    z-index: 1;
}
.login-input:focus + .login-label,
.login-input:not(:placeholder-shown) + .login-label {
    top: -6px;
    font-size: 0.75rem;
    color: var(--primary);
}

.toggle-password {
    position: absolute;
    right: .001px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    z-index: 10;
    padding: 5px;
    background: var(--white);
    transition: color .2s var(--ease);
}
.toggle-password:hover {
    color: var(--primary);
}

.login-label {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: .25s var(--ease);
    pointer-events: none;
}

.login-forgot {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
    font-size: 0.85rem;
}
.login-forgot a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: .2s var(--ease);
}
.login-forgot a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.login-register {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}
.login-register a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.book-login {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.error-msg {
    background-color: var(--danger-bg);
    color: var(--danger);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid rgba(196,69,59,0.25);
    animation: popIn .3s var(--ease);
}

.login-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.login-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(193,104,47,0.1), rgba(22,19,15,0.55));
}
.login-img img {
    border-radius: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: fadeIn .8s var(--ease);
}

.login-button {
    display: block;
    width: 100%;
    padding: 1.05rem;
    border-radius: 50px;
    background-color: var(--black);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: .25s var(--ease);
    box-shadow: var(--shadow);
}
.login-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.login-button:active {
    transform: translateY(0) scale(.98);
}

/* =========================================================
   DARK MODE
   ========================================================= */
[data-theme="dark"] {
    --bg: #17130f;
    --bg-soft: #211a14;
    --surface: #1f1912;
    --sidebar-bg: #14100c;

    --text: #f3ede6;
    --text2: #f3ede6;
    --text-muted: #b3a99c;
    --black: #f3ede6;
    --white: #241d15;
    --light-border: #33291f;
    --border-strong: #4a3c2c;

    --primary-pale: #3a2a1a;
    --success-bg: #1c3324;
    --warning-bg: #3a2c15;
    --danger-bg: #3a201d;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow: 0 8px 24px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 50px rgba(0,0,0,0.6);
    --text-shadow: rgba(0, 0, 0, 1);
}

[data-theme="dark"] .body-login {
    background-color: var(--bg);
}

/* =========================================
   Mobile (≤1024px)
   ========================================= */
@media (max-width: 1024px) {
    .login-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .login-img {
        display: none;
    }
    .login-content {
        padding: 3rem 1.5rem 2.5rem;
    }
    .login-title {
        font-size: 2.1rem;
    }
    .login-theme-btn {
        top: 16px;
        left: auto;
        right: 16px;
        width: 36px;
        height: 36px;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .login-title {
        font-size: 1.7rem;
    }
}