:root{--primary-white:#ffffff;--off-white:#fafbfc;--soft-white:#f8f9fa;--subtle-gray:#f1f3f5;--light-gray:#e9ecef;--border-gray:#dee2e6;--medium-gray:#adb5bd;--text-gray:#495057;--dark-text:#212529;--darker-text:#0c0e10;--accent-blue:#0b76ff;--accent-blue-light:#3aa0ff;--accent-blue-dark:#0a5ecc;--accent-green:#00d26a;--accent-orange:#ff9500;--accent-red:#ff3b30;--accent-purple:#8b5cf6;--gradient-blue:linear-gradient(135deg, #0b76ff 0%, #3aa0ff 100%);--gradient-green:linear-gradient(135deg, #00d26a 0%, #00ff87 100%);--gradient-red:linear-gradient(135deg, #ff3b30 0%, #ff6b5f 100%);--gradient-subtle:linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.04);--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.06);--shadow-md:0 3px 8px rgba(0, 0, 0, 0.08);--shadow-lg:0 6px 16px rgba(0, 0, 0, 0.10);--shadow-xl:0 12px 32px rgba(0, 0, 0, 0.12);--shadow-accent:0 4px 12px rgba(11, 118, 255, 0.16);--font-primary:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;--font-mono:'Menlo', 'Monaco', 'Courier New', monospace;--space-xs:4px;--space-sm:6px;--space-md:10px;--space-lg:14px;--space-xl:18px;--space-2xl:24px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-full:9999px;--timing-fast:0.15s cubic-bezier(0.4, 0, 0.2, 1);--timing-normal:0.2s cubic-bezier(0.4, 0, 0.2, 1);--timing-smooth:0.3s cubic-bezier(0.4, 0, 0.2, 1);--header-height:30px;--sidebar-width:280px;--sidebar-collapsed:60px}.settings-main{margin-left:var(--sidebar-width);margin-top:calc(var(--header-height) + 3px);padding:var(--space-xl) var(--space-lg);min-height:calc(100vh - var(--header-height));background:var(--off-white);transition:margin-left var(--timing-smooth);max-width:calc(100vw - var(--sidebar-width));overflow-x:hidden}.main-nav.collapsed~.settings-main{margin-left:var(--sidebar-collapsed);max-width:calc(100vw - var(--sidebar-collapsed))}.settings-main h2{font-size:1.5rem;font-weight:800;color:var(--darker-text);margin:0 0 var(--space-2xl) 0;padding:var(--space-xl);background:var(--primary-white);border:1px solid var(--border-gray);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;letter-spacing:-.02em}.settings-main h2::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-blue)}.security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl);margin-bottom:var(--space-2xl)}.form-section{background:var(--primary-white);border:1px solid var(--border-gray);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);transition:all var(--timing-normal);position:relative;overflow:hidden}.form-section::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gradient-blue);opacity:0;transition:opacity var(--timing-normal)}.form-section:hover{box-shadow:var(--shadow-md);border-color:var(--accent-blue-light)}.form-section:hover::before{opacity:1}.form-section.full-width{grid-column:1 / -1}.form-section h3{font-size:1rem;font-weight:800;color:var(--darker-text);margin:0 0 var(--space-xl) 0;padding-bottom:var(--space-md);border-bottom:2px solid var(--light-gray);text-transform:uppercase;letter-spacing:.04em;font-size:.875rem}#change-password-form{display:flex;flex-direction:column;gap:var(--space-lg)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-weight:700;color:var(--darker-text);font-size:.75rem;letter-spacing:.02em;text-transform:uppercase}.form-group input[type="password"],.form-group input[type="text"]{width:100%;padding:var(--space-md) var(--space-lg);border:1.5px solid var(--border-gray);border-radius:var(--radius-md);background:var(--soft-white);font-size:.875rem;font-weight:600;color:var(--dark-text);transition:all var(--timing-normal);font-family:var(--font-primary);min-height:42px}.form-group input:focus{outline:none;border-color:var(--accent-blue);background:var(--primary-white);box-shadow:0 0 0 3px rgb(11 118 255 / .1);transform:translateY(-1px)}.form-group input::placeholder{color:var(--medium-gray);font-weight:500}.password-strength{height:3px;background:var(--light-gray);border-radius:var(--radius-full);margin-top:var(--space-xs);overflow:hidden}.password-strength-bar{height:100%;width:0;background:var(--gradient-green);border-radius:var(--radius-full);transition:width var(--timing-smooth),background var(--timing-smooth)}#change-password-form button[type="submit"]{margin-top:var(--space-md);padding:var(--space-md) var(--space-2xl);background:var(--gradient-blue);color:var(--primary-white);border:none;border-radius:var(--radius-md);font-weight:800;font-size:.875rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all var(--timing-normal);box-shadow:var(--shadow-accent);min-height:44px}#change-password-form button[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(11 118 255 / .3)}#change-password-form button[type="submit"]:active{transform:translateY(0)}.active-sessions{display:flex;flex-direction:column;gap:var(--space-md);max-height:450px;overflow-y:auto;padding-right:var(--space-xs)}.session-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);background:var(--soft-white);border:1px solid var(--border-gray);border-radius:var(--radius-md);transition:all var(--timing-normal);position:relative;overflow:hidden}.session-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-blue);opacity:0;transition:opacity var(--timing-normal)}.session-card:hover{background:var(--primary-white);border-color:var(--accent-blue-light);box-shadow:var(--shadow-sm);transform:translateX(4px)}.session-card:hover::before{opacity:1}.session-info{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.session-info h4{font-size:.875rem;font-weight:800;color:var(--darker-text);margin:0;display:flex;align-items:center;gap:var(--space-sm)}.session-info h4 span{font-size:.75rem;font-weight:600;color:var(--text-gray)}.current-badge{display:inline-flex;align-items:center;padding:2px 8px;background:var(--gradient-green);color:var(--primary-white);font-size:.625rem;font-weight:800;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;box-shadow:var(--shadow-xs)}.session-info p{font-size:.75rem;font-weight:600;color:var(--text-gray);margin:0}.session-info p b{color:var(--darker-text);font-weight:800}.session-info small{font-size:.6875rem;color:var(--medium-gray);font-weight:600}.revoke-btn{padding:var(--space-sm) var(--space-lg);background:var(--gradient-red);color:var(--primary-white);border:none;border-radius:var(--radius-md);font-weight:800;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all var(--timing-normal);box-shadow:var(--shadow-xs);white-space:nowrap;min-height:32px}.revoke-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(255 59 48 / .3)}.revoke-btn:active{transform:translateY(0)}.active-sessions p{text-align:center;padding:var(--space-2xl);color:var(--text-gray);font-size:.875rem;font-weight:600}.active-sessions::-webkit-scrollbar{width:4px}.active-sessions::-webkit-scrollbar-track{background:var(--subtle-gray);border-radius:var(--radius-full)}.active-sessions::-webkit-scrollbar-thumb{background:var(--medium-gray);border-radius:var(--radius-full)}.active-sessions::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}.two-factor-status{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl);background:var(--soft-white);border:1px solid var(--border-gray);border-radius:var(--radius-md);transition:all var(--timing-normal)}.two-factor-status:hover{background:var(--primary-white);border-color:var(--accent-blue-light);box-shadow:var(--shadow-sm)}.two-factor-status span{font-size:.9375rem;font-weight:700;color:var(--darker-text);display:flex;align-items:center;gap:var(--space-md)}.two-factor-status span::before{content:'';width:10px;height:10px;border-radius:var(--radius-full);background:var(--medium-gray);box-shadow:0 0 8px rgb(173 181 189 / .4)}.two-factor-status span.enabled::before{background:var(--accent-green);box-shadow:0 0 12px rgb(0 210 106 / .5)}#toggle-two-factor{padding:var(--space-md) var(--space-2xl);background:var(--gradient-blue);color:var(--primary-white);border:none;border-radius:var(--radius-md);font-weight:800;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all var(--timing-normal);box-shadow:var(--shadow-accent);min-height:40px;min-width:140px}#toggle-two-factor:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(11 118 255 / .3)}#toggle-two-factor:active{transform:translateY(0)}#toggle-two-factor.disable{background:var(--gradient-red)}#toggle-two-factor.disable:hover{box-shadow:0 6px 20px rgb(255 59 48 / .3)}.otp-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgb(15 23 42 / .7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--space-lg);animation:fadeIn 0.2s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.otp-content{background:var(--primary-white);border:1px solid var(--border-gray);border-radius:var(--radius-xl);padding:var(--space-2xl);max-width:420px;width:100%;box-shadow:var(--shadow-xl);animation:slideUp 0.3s ease-out;position:relative}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.otp-content h3{font-size:1.125rem;font-weight:800;color:var(--darker-text);margin:0 0 var(--space-sm) 0;text-align:center}.otp-content p{font-size:.875rem;color:var(--text-gray);margin:0 0 var(--space-xl) 0;text-align:center;font-weight:600}#otp-input{width:100%;padding:var(--space-lg);border:2px solid var(--border-gray);border-radius:var(--radius-md);background:var(--soft-white);font-size:1.5rem;font-weight:800;color:var(--darker-text);text-align:center;letter-spacing:.5em;font-family:var(--font-mono);transition:all var(--timing-normal);margin-bottom:var(--space-xl)}#otp-input:focus{outline:none;border-color:var(--accent-blue);background:var(--primary-white);box-shadow:0 0 0 4px rgb(11 118 255 / .1)}.otp-actions{display:flex;gap:var(--space-md)}.otp-actions button{flex:1;padding:var(--space-md) var(--space-xl);border:none;border-radius:var(--radius-md);font-weight:800;font-size:.875rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all var(--timing-normal);min-height:44px}#otp-submit{background:var(--gradient-blue);color:var(--primary-white);box-shadow:var(--shadow-accent)}#otp-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(11 118 255 / .3)}#otp-cancel{background:var(--soft-white);color:var(--text-gray);border:1px solid var(--border-gray);box-shadow:var(--shadow-xs)}#otp-cancel:hover{background:var(--subtle-gray);color:var(--darker-text);border-color:var(--medium-gray)}.loading-spinner{width:32px;height:32px;border:3px solid var(--light-gray);border-top:3px solid var(--accent-blue);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1200px){.settings-main{margin-left:var(--sidebar-collapsed);max-width:calc(100vw - var(--sidebar-collapsed))}.security-grid{grid-template-columns:1fr}}@media (max-width:768px){.settings-main{margin-left:0;max-width:100vw;padding:var(--space-md)}.settings-main h2{font-size:1.25rem;padding:var(--space-md);margin-bottom:var(--space-lg)}.security-grid{gap:var(--space-md)}.form-section{padding:var(--space-md)}.session-card{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.revoke-btn{width:100%}.two-factor-status{flex-direction:column;align-items:flex-start;gap:var(--space-md)}#toggle-two-factor{width:100%}.otp-content{padding:var(--space-xl)}.otp-actions{flex-direction:column}}@media (max-width:480px){.settings-main{padding:var(--space-sm)}.settings-main h2{font-size:1.125rem;padding:var(--space-sm)}.form-section{padding:var(--space-sm)}.form-section h3{font-size:.8125rem}.form-group input[type="password"],.form-group input[type="text"]{font-size:.8125rem;padding:var(--space-sm) var(--space-md)}#otp-input{font-size:1.25rem;padding:var(--space-md)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}::selection{background:rgb(11 118 255 / .15);color:var(--darker-text)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.d-none{display:none}.d-flex{display:flex}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.w-full{width:100%}.mt-md{margin-top:var(--space-md)}.mb-md{margin-bottom:var(--space-md)}.settings-main,.form-section,.session-card,button{will-change:transform;transform:translateZ(0);backface-visibility:hidden}@media print{.settings-main{margin-left:0!important;padding:0!important}button,.revoke-btn,.otp-modal{display:none!important}.form-section{box-shadow:none;border:1px solid var(--border-gray)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}.shake{animation:shake 0.5s ease-in-out}.form-section:focus-within{border-color:var(--accent-blue-light);box-shadow:var(--shadow-md)}.status-indicator{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--soft-white);border:1px solid var(--border-gray);border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.status-indicator::before{content:'';width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}.status-indicator.success{color:var(--accent-green);border-color:var(--accent-green);background:rgb(0 210 106 / .08)}.status-indicator.warning{color:var(--accent-orange);border-color:var(--accent-orange);background:rgb(255 149 0 / .08)}.status-indicator.error{color:var(--accent-red);border-color:var(--accent-red);background:rgb(255 59 48 / .08)}body{display:flex;flex-direction:row}.settings-main{width:100%;min-height:100vh;box-sizing:border-box}.main-nav.collapsed~.settings-main{margin-left:var(--sidebar-collapsed)!important;max-width:calc(100vw - var(--sidebar-collapsed))!important}.settings-main{margin-top:var(--header-height);padding-top:20px}.cancel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .45);display:flex;justify-content:center;align-items:center;z-index:999999;animation:fadeIn 0.2s ease}.modal-box{background:#fff;width:350px;padding:25px;border-radius:10px;box-shadow:var(--shadow-lg);text-align:center;animation:scaleUp 0.2s ease;color:#212529}.modal-box h2,.modal-box p{color:#212529!important}.modal-actions{display:flex;justify-content:space-between;margin-top:20px}.btn-secondary{background:#e9ecef;border:1px solid #ced4da;padding:8px 18px;border-radius:6px;cursor:pointer;font-weight:700;color:#212529!important}.btn-danger{background:var(--accent-red);color:#fff!important;padding:8px 18px;border-radius:6px;cursor:pointer;font-weight:700}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleUp{from{transform:scale(.85)}to{transform:scale(1)}}.password-field{position:relative}.password-field .toggle-eye{position:absolute;right:12px;top:38px;cursor:pointer;font-size:18px;opacity:.6;user-select:none}.password-field .toggle-eye:hover{opacity:1}.password-strength{margin-top:8px;height:6px;background:#ddd;border-radius:4px;overflow:hidden}.password-strength .bar{height:100%;width:0%;transition:0.3s}.password-rules{margin-top:10px;margin-left:5px;list-style:none;padding:0;font-size:13px;color:#666}.password-rules li.valid{color:green;font-weight:600}.password-rules li.invalid{color:red}.form-section.sessions-card{max-height:500px;height:100%;display:flex;flex-direction:column;overflow:hidden}.form-section.sessions-card h3{flex-shrink:0;margin-bottom:10px}.form-section.sessions-card .active-sessions{flex:1;overflow-y:auto;padding-right:5px;margin-top:5px}.sessions-card{position:relative;width:100%}.active-sessions{overflow-y:auto!important;overflow-x:hidden!important;max-height:100%}.session-card{width:100%;box-sizing:border-box;min-height:90px}.active-sessions::-webkit-scrollbar{width:6px}.session-card{width:100%;padding:10px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:flex-start;box-sizing:border-box}.session-info h4{font-size:14px;margin:0 0 4px 0}.session-info span{font-size:12px;color:#6b7280}.session-info p{font-size:13px;margin:2px 0}.session-info small{font-size:11px;color:#6b7280}.current-badge{background:#10b981;color:#fff;padding:2px 6px;font-size:10px;border-radius:4px;margin-left:6px}.revoke-btn{padding:6px 10px;font-size:12px;border-radius:6px}.password-wrapper{position:relative;width:100%}.toggle-eye{position:absolute;top:50%;right:12px;transform:translateY(-38%);cursor:pointer;font-size:18px;color:var(--medium-gray);user-select:none}.toggle-eye:hover{color:var(--accent-blue)}body{padding-top:34px!important}