/* Must stay the first rule -- @import only works if nothing else precedes it. */
        :root {
            --primary-navy: #0a0f1a;
            --secondary-navy: #111827;
            --accent-blue: #00d4ff;
            --neon-glow: rgba(0, 212, 255, 0.4);
            --glass-bg: rgba(255, 255, 255, 0.03);
            --text-main: #ffffff;
            --text-dim: #94a3b8;
            --danger-neon: #ef4444;
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--primary-navy);
            background-image: 
                linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            display: flex; justify-content: center; align-items: center; 
            min-height: 100vh; margin: 0; color: var(--text-main);
            padding: 20px;
        }

        .login-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            padding: 55px 45px;
            border-radius: 24px;
            border: 1px solid rgba(0, 212, 255, 0.2);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
            width: 100%; max-width: 400px; text-align: center;
            position: relative; animation: fadeIn 0.8s ease-out;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .logo-box {
            width: 100px; height: 100px; margin: 0 auto 25px;
            border: 2px solid var(--accent-blue); border-radius: 25px;
            display: flex; align-items: center; justify-content: center;
            color: var(--accent-blue); font-size: 50px;
            background: rgba(0, 212, 255, 0.05);
            position: relative; overflow: hidden;
            box-shadow: 0 0 20px var(--neon-glow), inset 0 0 15px rgba(0, 212, 255, 0.1);
        }

        .logo-box::before {
            content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.2), var(--accent-blue));
            border-bottom: 3px solid var(--accent-blue); animation: scan-move 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1); z-index: 2;
        }

        @keyframes scan-move { 0% { top: -100%; opacity: 0; } 30% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

        h2 { font-family: 'Orbitron', sans-serif; font-size: 22px; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }
        .subtitle { font-size: 10px; color: var(--accent-blue); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 35px; opacity: 0.8; }
        /* The tenant's own company name. Deliberately NOT given the .subtitle
           treatment: letter-spacing breaks the cursive joining of Arabic
           glyphs, and text-transform is a no-op in Arabic, so a company name
           needs plain type in a way the fixed Latin brand kicker does not. */
        .company-line { font-size: 15px; font-weight: 700; color: #fff; opacity: 0.92; margin: 0 0 6px; word-break: break-word; }

        .input-group { text-align: left; margin-bottom: 22px; position: relative; }
        .input-group label { display: block; font-size: 10px; color: var(--accent-blue); font-family: 'Orbitron'; margin-bottom: 10px; letter-spacing: 1px; }
        .input-group i { position: absolute; left: 15px; bottom: 15px; color: var(--accent-blue); font-size: 16px; opacity: 0.6; }

        input {
            width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 212, 255, 0.2);
            padding: 15px 15px 15px 45px; border-radius: 12px; color: white; outline: none; transition: 0.3s;
            font-size: 14px; box-sizing: border-box;
        }
        input:focus { border-color: var(--accent-blue); box-shadow: 0 0 15px var(--neon-glow); }

        .btn-cyber {
            width: 100%; padding: 18px; background: transparent; color: var(--accent-blue);
            border: 1px solid var(--accent-blue); border-radius: 12px;
            font-family: 'Orbitron'; font-size: 14px; cursor: pointer; transition: 0.4s;
            text-transform: uppercase; letter-spacing: 2px; margin-top: 15px;
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .btn-cyber:hover:not(:disabled) { background: var(--accent-blue); color: var(--primary-navy); box-shadow: 0 0 25px var(--neon-glow); }
        .btn-cyber:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--text-dim); color: var(--text-dim); }

        .error-box {
            background: rgba(239, 68, 68, 0.1); color: var(--danger-neon);
            padding: 14px; border-radius: 12px; font-size: 11px;
            border: 1px solid rgba(239, 68, 68, 0.3); margin-bottom: 25px;
            font-family: 'Orbitron'; letter-spacing: 1px; animation: shake 0.4s ease-in-out;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }

        /* ستايل التايمر المحسّن */
        #timer-display { 
            font-weight: 700; 
            color: #fff; 
            background: rgba(239, 68, 68, 0.25);
            padding: 3px 10px;
            border-radius: 8px;
            border: 1px solid rgba(239, 68, 68, 0.5);
            margin-left: 8px;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
            display: inline-block;
            min-width: 60px;
            text-shadow: 0 0 5px rgba(255,255,255,0.5);
        }

        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

        .footer-text { margin-top: 35px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; }

        input::placeholder { color: rgba(0, 212, 255, 0.35); font-family: 'Inter', sans-serif; letter-spacing: 1.5px; font-style: normal; }
        #password { padding-right: 48px; }
        .pass-toggle { position: absolute; right: 14px; bottom: 13px; background: none; border: none; cursor: pointer; color: var(--accent-blue); opacity: 0.5; padding: 2px; line-height: 1; transition: opacity 0.25s, filter 0.25s; }
        .pass-toggle:hover:not(:disabled) { opacity: 1; filter: drop-shadow(0 0 5px var(--accent-blue)); }
        .pass-toggle:disabled { opacity: 0.2; cursor: not-allowed; }

        .lang-switch-link {
            position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700;
            color: var(--accent-blue); text-decoration: none; letter-spacing: 1px;
            border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 6px 12px;
            display: inline-flex; align-items: center; gap: 6px; transition: 0.25s;
        }
        .lang-switch-link:hover { background: rgba(0, 212, 255, 0.1); }

        /* --- RTL overrides: the icon-inside-input positioning here is
           absolute (not flex), so it does not auto-mirror with dir="rtl"
           and needs an explicit flip; text alignment likewise. --- */
        [dir="rtl"] .input-group { text-align: right; }
        [dir="rtl"] .input-group i { left: auto; right: 15px; }
        [dir="rtl"] input { padding: 15px 45px 15px 15px; }
        [dir="rtl"] #password { padding-right: 45px; padding-left: 48px; }
        [dir="rtl"] .pass-toggle { right: auto; left: 14px; }
        [dir="rtl"] .lang-switch-link { right: auto; left: 18px; }

        /* Arabic font: Orbitron/Inter above have no Arabic glyphs, so
           Arabic text was silently falling back to an unpredictable system
           font with different metrics. html[dir="rtl"] * is deliberately
           higher-specificity than any single class/type selector on this
           page (including the ones marked !important above), so it wins
           regardless of source order, without having to edit every rule. */
        html[dir="rtl"] * {
            font-family: 'Tajawal', 'Inter', sans-serif !important;
        }
        /* Restore Font Awesome's own font on icon elements: the rule above
           also matches the <i class="fas fa-*"> element itself (not just
           text), which would otherwise make its icon glyph render through
           the Arabic font (no glyph at that codepoint = invisible icon).
           This is the root cause of icons disappearing in Arabic mode. */
        html[dir="rtl"] [class*="fa-"] {
            font-family: "Font Awesome 6 Free" !important;
        }