:root { 
            --bg-dark: #0f0f0f; 
            --card-dark: #1a1a1a; 
            --accent: #2196f3; 
            --text-primary: #e0e0e0; 
            --border: #333; 
            --input-bg: #252525;
        }

        [data-theme="light"] {
            --bg-dark: #f5f7fa;
            --card-dark: #ffffff;
            --text-primary: #1a1a1a;
            --border: #ddd;
            --input-bg: #fff;
        }

        body { 
            background-color: var(--bg-dark); 
            color: var(--text-primary); 
            font-family: 'Segoe UI', system-ui, sans-serif; 
            margin: 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            overflow: hidden; 
            transition: background-color 0.3s, color 0.3s;
        }
        
        .login-card { 
            background-color: var(--card-dark); 
            padding: 40px; 
            border-radius: 16px; 
            border: 1px solid var(--border); 
            width: 100%; 
            max-width: 400px; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
            text-align: center; 
            position: relative;
        }
        
        .theme-toggle-login { position: absolute; top: 15px; right: 15px; }
        .theme-switch { display: inline-block; height: 18px; position: relative; width: 36px; }
        .theme-switch input { display:none; }
        .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
        .slider:before { background-color: white; bottom: 3px; content: ""; height: 12px; left: 4px; position: absolute; transition: .4s; width: 12px; border-radius: 50%; }
        input:checked + .slider { background-color: var(--accent); }
        input:checked + .slider:before { transform: translateX(16px); }

        .logo-text { font-size: 2.2em; font-weight: 800; margin-bottom: 5px; letter-spacing: -1px; }
        .logo-sub { color: var(--accent); font-size: 0.9em; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; display: block; }
        
        .office-name { color: #888; font-size: 0.85em; margin-bottom: 40px; }
        
        .form-group { text-align: left; margin-bottom: 20px; }
        label { display: block; font-size: 0.85em; color: #aaa; margin-bottom: 8px; font-weight: 600; }
        input { background-color: var(--input-bg); color: var(--text-primary); border: 1px solid var(--border); padding: 14px; border-radius: 8px; width: 100%; box-sizing: border-box; font-size: 1em; transition: 0.3s; }
        input:focus { border-color: var(--accent); outline: none; }
        
        button { background-color: var(--accent); color: white; border: none; padding: 16px; border-radius: 8px; width: 100%; font-weight: bold; font-size: 1.1em; cursor: pointer; margin-top: 10px; transition: 0.3s; }
        button:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3); }
        
        .error-msg { background-color: rgba(244, 67, 54, 0.1); color: #f44336; padding: 12px; border-radius: 8px; font-size: 0.9em; margin-bottom: 20px; border: 1px solid rgba(244, 67, 54, 0.3); }
        
        .footer-login { margin-top: 40px; color: #555; font-size: 0.75em; }