/* Staff login page (standalone, split layout). Extracted from templates/auth/staff/staff_login.html. */

        :root {
            --g:         #00e676;
            --g-dark:    #00c853;
            --g-glow:    rgba(0,230,118,0.15);
            --g-glow-md: rgba(0,230,118,0.25);
            --g-glow-lg: rgba(0,230,118,0.40);
            --ink:       #030303;
            --ink-1:     #0b0b0b;
            --ink-2:     #111213;
            --ink-3:     #1a1b1c;
            --ink-4:     #242526;
            --border:    rgba(255,255,255,0.06);
            --border-g:  rgba(0,230,118,0.22);
            --text-1:    #f2f2f2;
            --text-2:    #9a9a9a;
            --text-3:    #555;
            --r-sm:      8px;
            --r-md:      14px;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: var(--ink);
            color: var(--text-1);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--ink); }
        ::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; }

        /* ── Page loader ── */
        .page-loader {
            position: fixed; inset: 0; background: var(--ink);
            z-index: 9999; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 22px;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        .page-loader.pl-out { opacity: 0; visibility: hidden; pointer-events: none; }
        .pl-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.2rem; font-weight: 700; letter-spacing: 6px; color: var(--g);
            animation: pl-breathe 1.8s ease-in-out infinite;
        }
        @keyframes pl-breathe {
            0%,100%{opacity:1;filter:drop-shadow(0 0 16px rgba(0,230,118,.45))}
            50%{opacity:.5;filter:drop-shadow(0 0 4px rgba(0,230,118,.1))}
        }
        .pl-track { width:160px;height:2px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;position:relative; }
        .pl-fill { position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,var(--g),transparent);animation:pl-scan 1.3s ease-in-out infinite; }
        @keyframes pl-scan{0%{left:-40%}100%{left:100%}}

        /* ── Toast ── */
        .toast-container {
            position: fixed; top: 16px; right: 16px;
            width: min(360px, calc(100vw - 32px));
            z-index: 2000; display: flex; flex-direction: column; gap: 10px;
            pointer-events: none;
        }
        .toast {
            pointer-events: auto;
            display: flex; align-items: flex-start; gap: 12px;
            padding: 13px 14px; border-radius: var(--r-md);
            border: 1px solid var(--border); background: rgba(17,18,19,0.97);
            box-shadow: 0 8px 32px rgba(0,0,0,0.55);
            transform: translateX(110%); opacity: 0;
            transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
        }
        .toast.toast-in  { transform: translateX(0); opacity: 1; }
        .toast.toast-out { transform: translateX(110%); opacity: 0; }
        .toast-icon-wrap { width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.78rem; }
        .toast-body { flex: 1; }
        .toast-title { font-size:.82rem;font-weight:700;color:var(--text-1);margin-bottom:1px; }
        .toast-msg   { font-size:.76rem;color:var(--text-2);line-height:1.5; }
        .toast-close { border:none;background:none;color:var(--text-3);cursor:pointer;padding:3px;font-size:.72rem; }
        .toast.is-success .toast-icon-wrap{background:rgba(0,230,118,.12);color:var(--g)}
        .toast.is-success{border-color:rgba(0,230,118,.2)}
        .toast.is-error   .toast-icon-wrap{background:rgba(239,68,68,.12);color:#f87171}
        .toast.is-error  {border-color:rgba(239,68,68,.22)}
        .toast.is-warning .toast-icon-wrap{background:rgba(245,158,11,.12);color:#fbbf24}
        .toast.is-warning{border-color:rgba(245,158,11,.22)}
        .toast.is-info    .toast-icon-wrap{background:rgba(96,165,250,.12);color:#60a5fa}
        .toast.is-info   {border-color:rgba(96,165,250,.2)}

        /* Django messages */
        .msgs{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;width:100%;}
        .msg{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;border:1px solid;font-size:.84rem;line-height:1.5;animation:msg-in .28s ease;}
        @keyframes msg-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
        .msg>i:first-child{flex-shrink:0;font-size:.82rem;}
        .msg>span{flex:1;min-width:0;}
        .msg>button{background:none;border:none;padding:5px;cursor:pointer;flex-shrink:0;opacity:.4;transition:opacity .15s,background .15s;border-radius:4px;line-height:1;font-size:.78rem;color:inherit;display:flex;align-items:center;justify-content:center;}
        .msg>button:hover{opacity:1;background:rgba(255,255,255,.06);}
        .msg-success{background:rgba(0,230,118,.08);border-color:rgba(0,230,118,.28);color:#d4fbea;}
        .msg-success>i:first-child{color:#00e676;}
        .msg-error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.28);color:#fecaca;}
        .msg-error>i:first-child{color:#f87171;}
        .msg-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.28);color:#fef3c7;}
        .msg-warning>i:first-child{color:#fbbf24;}
        .msg-info{background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.28);color:#dbeafe;}
        .msg-info>i:first-child{color:#60a5fa;}

        /* ── Layout ── */
        .split-wrap { display: flex; min-height: 100vh; }

        /* Left panel */
        .split-left {
            width: 420px; flex-shrink: 0;
            background: var(--ink-1);
            border-right: 1px solid var(--border);
            padding: 48px 40px;
            display: flex; flex-direction: column; justify-content: center;
            position: relative; overflow: hidden;
        }
        .split-left::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,230,118,0.07) 0%, transparent 70%);
            pointer-events: none;
        }
        /* dot grid */
        .split-left::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(0,230,118,0.12) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none; opacity: 0.5;
        }
        .sl-content { position: relative; z-index: 1; }
        .sl-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.1rem; font-weight: 700; letter-spacing: 5px; color: var(--g);
            text-shadow: 0 0 20px var(--g-glow-md);
            margin-bottom: 48px;
            display: flex; align-items: center; gap: 10px;
        }
        .sl-staff-badge {
            font-size: 0.6rem; font-weight: 700; letter-spacing: 2px;
            text-transform: uppercase; color: #000; background: var(--g);
            padding: 2px 8px; border-radius: 100px;
        }
        .sl-eyebrow {
            font-size: 0.68rem; font-weight: 700; letter-spacing: 3px;
            text-transform: uppercase; color: var(--g); margin-bottom: 12px;
        }
        .sl-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.75rem; font-weight: 700; line-height: 1.25;
            color: var(--text-1); margin-bottom: 16px;
        }
        .sl-desc {
            font-size: 0.85rem; color: var(--text-2); line-height: 1.7;
            margin-bottom: 36px;
        }
        .sl-bullet {
            display: flex; align-items: flex-start; gap: 12px;
            margin-bottom: 16px;
        }
        .sl-bullet-icon {
            width: 28px; height: 28px; flex-shrink: 0;
            border-radius: 7px; background: var(--g-glow);
            border: 1px solid var(--border-g);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem; color: var(--g);
        }
        .sl-bullet-text { font-size: 0.83rem; color: var(--text-2); line-height: 1.5; }
        .sl-bullet-text strong { color: var(--text-1); }
        .sl-footer {
            margin-top: 40px; padding-top: 20px;
            border-top: 1px solid var(--border);
            font-size: 0.72rem; color: var(--text-3);
        }

        /* Right panel */
        .split-right {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column;
            background: var(--ink);
        }
        .sr-topbar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 32px;
        }
        .sr-topbar a {
            font-size: 0.8rem; color: var(--text-3); text-decoration: none;
            display: flex; align-items: center; gap: 7px;
            transition: color 0.2s;
        }
        .sr-topbar a:hover { color: var(--text-2); }
        .sr-topbar-right { font-size: 0.8rem; color: var(--text-3); }
        .sr-topbar-right a { color: var(--g); text-decoration: none; font-weight: 600; }

        .sr-body {
            flex: 1; display: flex; align-items: center; justify-content: center;
            padding: 32px 24px;
        }
        .auth-card {
            width: 100%; max-width: 440px;
            background: var(--ink-2);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: 32px 32px 28px;
            position: relative; overflow: hidden;
        }
        .auth-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent 5%, rgba(0,200,83,0.5) 50%, transparent 95%);
        }
        .card-icon {
            width: 44px; height: 44px; border-radius: 11px;
            background: rgba(0,230,118,0.1); border: 1px solid var(--border-g);
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem; color: var(--g); margin-bottom: 16px;
        }
        .card-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.3rem; font-weight: 700; color: var(--text-1);
            margin-bottom: 5px;
        }
        .card-sub { font-size: 0.82rem; color: var(--text-3); margin-bottom: 24px; line-height: 1.5; }

        /* Alert */
        .alert-box {
            display: none; align-items: center; gap: 10px;
            padding: 10px 13px; border-radius: var(--r-sm);
            font-size: 0.8rem; margin-bottom: 16px;
            background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
            color: #fca5a5;
        }
        .alert-box.show { display: flex; }

        /* Fields */
        .field { margin-bottom: 16px; }
        .label { display:block;font-size:.75rem;font-weight:600;color:var(--text-2);letter-spacing:.4px;margin-bottom:7px; }
        .input-wrap { position: relative; }
        .input-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.78rem;pointer-events:none;transition:color .2s; }
        .inp {
            width:100%;padding:10px 12px 10px 34px;
            background:var(--ink-3);border:1px solid var(--border);
            border-radius:var(--r-sm);color:var(--text-1);
            font-family:'Inter',sans-serif;font-size:.86rem;outline:none;
            transition:border-color .2s,box-shadow .2s,background .2s;
        }
        .inp::placeholder { color:var(--text-3); }
        .inp:focus { border-color:var(--border-g);box-shadow:0 0 0 3px var(--g-glow);background:var(--ink-4); }
        .input-wrap:focus-within .input-icon { color:var(--g); }
        .pw-toggle { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;font-size:.75rem;transition:color .2s; }
        .pw-toggle:hover { color:var(--text-2); }

        /* Submit */
        .btn-submit {
            width:100%;padding:11px 18px;
            background:var(--g);border:none;border-radius:var(--r-sm);
            color:#000;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;
            cursor:pointer;letter-spacing:.2px;
            box-shadow:0 0 20px var(--g-glow);
            transition:background .2s,box-shadow .2s,transform .15s;
            display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;
        }
        .btn-submit:hover:not(:disabled) { background:#fff;box-shadow:0 0 36px var(--g-glow-lg);transform:translateY(-1px); }
        .btn-submit:disabled { opacity:.6;cursor:not-allowed; }

        @media (max-width: 991px) {
            .split-left { display: none; }
            .sr-topbar { padding: 16px 20px; }
            .sr-body { padding: 24px 16px; }
            .auth-card { padding: 24px 20px; }
        }
        @media (max-width: 560px) {
            .sr-body { padding: 16px 0 40px; }
            .auth-card { padding: 24px 18px 22px; border-radius: 0; border-left: none; border-right: none; max-width: 100%; }
            .sr-topbar { padding: 16px 18px; flex-wrap: wrap; gap: 6px; }
        }
        @media (max-width: 400px) {
            .card-title { font-size: 1.15rem; }
            .card-sub { font-size: 0.78rem; }
            .sr-topbar { padding: 14px 16px; }
            .sr-topbar-right { font-size: 0.75rem; }
        }

        /* ── Theme toggle ── */
        .theme-toggle{position:fixed;bottom:24px;right:24px;z-index:9999;width:64px;height:34px;padding:0;border-radius:100px;border:1px solid rgba(255,255,255,0.08);background:rgba(22,24,28,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,0.45),0 1px 4px rgba(0,0,0,0.3);transition:box-shadow .25s,border-color .25s;}
        .theme-toggle:hover{box-shadow:0 6px 32px rgba(0,0,0,0.55),0 1px 6px rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.14);}
        .tt-track{display:block;width:100%;height:100%;position:relative;}
        .tt-thumb{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.4,0,.2,1),background .25s;color:#c8ccd4;}
        .tt-moon,.tt-sun{width:12px;height:12px;position:absolute;transition:opacity .2s;}
        .tt-moon{opacity:1;}.tt-sun{opacity:0;}
        html[data-theme="light"] .theme-toggle{background:rgba(240,241,245,0.94)!important;border-color:rgba(0,0,0,0.10)!important;box-shadow:0 4px 24px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.08)!important;}
        html[data-theme="light"] .tt-thumb{transform:translateX(32px);background:rgba(0,0,0,0.07)!important;color:#555!important;}
        html[data-theme="light"] .tt-moon{opacity:0;}html[data-theme="light"] .tt-sun{opacity:1;}

        /* ── Light mode ── */
        html[data-theme="light"]{
            --ink:      #f4f5f7;
            --ink-1:    #ffffff;
            --ink-2:    #ffffff;
            --ink-3:    #f0f1f3;
            --ink-4:    #e3e5e8;
            --border:   rgba(0,0,0,0.09);
            --border-g: rgba(0,170,85,0.32);
            --text-1:   #111111;
            --text-2:   #555555;
            --text-3:   #999999;
        }
        html[data-theme="light"] .split-right{background:var(--ink)!important;}
        html[data-theme="light"] .toast{background:rgba(255,255,255,0.98)!important;box-shadow:0 8px 24px rgba(0,0,0,.10)!important;}
        html[data-theme="light"] .pl-track{background:rgba(0,0,0,0.08)!important;}
        html[data-theme="light"] .alert-box.show{color:#b91c1c!important;}
        html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c0c3c8!important;}

        /* ── Smooth theme switch ── */
        html.is-switching *{transition:background-color .32s ease,color .22s ease,border-color .25s ease,box-shadow .25s ease!important;}