*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}
body{background:#f0f2f5;color:#1a1a2e}
.login-screen{width:min(400px,calc(100% - 32px));max-width:400px;margin:80px auto;padding:30px;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.login-brand{width:100%;margin:0 0 18px;display:grid;place-items:center;text-align:center;overflow:visible}
.login-logo{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center center;margin-left:auto;margin-right:auto}
#loginForm,#mfaLoginForm,#registerForm,#recoverForm,#emailRequiredForm,#legalRequiredForm{width:100%}
@media(max-width:480px){.login-screen{margin:24px auto;padding:22px 20px}.login-brand{margin-bottom:14px}}
.login-screen h1{text-align:center;margin-bottom:20px;font-size:22px;color:#16213e}
.login-screen input,.login-screen select{width:100%;padding:10px 12px;margin:6px 0;border:1px solid #ddd;border-radius:6px;font-size:14px}
.login-screen button{width:100%;padding:12px;margin:8px 0;border:none;border-radius:6px;font-size:14px;cursor:pointer}
.login-screen .btn-primary{background:#0f3460;color:#fff}
.login-screen .btn-primary:hover{background:#16213e}
.login-screen .btn-link{background:transparent;color:#0f3460;text-decoration:underline}
.login-screen .error{color:#e74c3c;font-size:13px;margin:6px 0;text-align:center}
.login-screen .success{color:#27ae60;font-size:13px;margin:6px 0;text-align:center}
.login-screen .links{text-align:center;margin-top:15px}
.login-screen .links a{color:#0f3460;cursor:pointer;font-size:13px;margin:0 8px}
.app-wrapper{display:none}
header{background:#0f3460;color:#fff;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
@media(max-width:768px){header{flex-direction:column;text-align:center;padding:10px 12px}header h1{font-size:16px}header .user-info{flex-direction:column;gap:6px;font-size:13px}.tabs{overflow-x:auto;flex-wrap:nowrap;padding:0 8px;-webkit-overflow-scrolling:touch}.tab-btn{padding:10px 12px;font-size:13px;white-space:nowrap}.modal{max-width:95vw;max-height:90vh;overflow-y:auto}}
header h1{font-size:18px}
header .user-info{display:flex;align-items:center;gap:12px;font-size:14px}
header button{background:rgba(255,255,255,0.15);color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px}
header button:hover{background:rgba(255,255,255,0.25)}
.tabs{display:flex;background:#fff;border-bottom:2px solid #e0e0e0;padding:0 20px}
.tab-btn{padding:12px 20px;border:none;background:transparent;cursor:pointer;font-size:14px;color:#666;border-bottom:3px solid transparent}
.tab-btn.active{color:#0f3460;border-bottom-color:#0f3460;font-weight:600}
.tab-btn:hover{color:#0f3460}
.tab-content{display:none;padding:20px;max-width:1400px;margin:0 auto}
.tab-content.active{display:block}
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:13px;color:#555;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:150px}
button.btn{padding:8px 18px;border:none;border-radius:6px;cursor:pointer;font-size:14px}
.btn-blue{background:#0f3460;color:#fff}.btn-blue:hover{background:#16213e}
.btn-red{background:#e74c3c;color:#fff}.btn-red:hover{background:#c0392b}
.btn-green{background:#27ae60;color:#fff}.btn-green:hover{background:#229954}
.btn-gray{background:#95a5a6;color:#fff}.btn-gray:hover{background:#7f8c8d}
.btn-sm{padding:4px 10px;font-size:12px}
table{width:100%;border-collapse:collapse;margin:10px 0}
table th,table td{padding:8px 10px;text-align:left;border-bottom:1px solid #eee;font-size:13px}
table th{background:#f8f9fa;font-weight:600;color:#333}
table tr:hover{background:#f5f6fa}
.salary-card{background:#fff;border-radius:10px;padding:16px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer;transition:0.2s}
.salary-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.salary-card .name{font-size:16px;font-weight:600;color:#16213e}
.salary-card .stats{display:flex;gap:20px;margin-top:8px;font-size:13px;color:#666}
.salary-card .stat span{font-weight:600;color:#0f3460}
.salary-detail{display:none;margin-top:10px}
.salary-detail.show{display:block}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:100;justify-content:center;align-items:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:85vh;overflow-y:auto}
.modal h2{font-size:18px;margin-bottom:16px;color:#16213e}
.modal-close{float:right;cursor:pointer;font-size:24px;color:#999;border:none;background:none}
.autocomplete-list{position:absolute;z-index:50;background:#fff;border:1px solid #ddd;border-radius:6px;max-height:200px;overflow-y:auto;display:none}
.autocomplete-list.show{display:block}
.autocomplete-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0}
.autocomplete-item:hover,.autocomplete-item.active{background:#e8f0fe}
.autocomplete-item .sub{font-size:11px;color:#999}
.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;color:#fff;z-index:200;font-size:14px;animation:slideIn 0.3s}
.toast.success{background:#27ae60}.toast.error{background:#e74c3c}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.badge-blue{background:#e3f2fd;color:#1565c0}
.badge-green{background:#e8f5e9;color:#2e7d32}
.badge-orange{background:#fff3e0;color:#e65100}
.badge-purple{background:#f3e5f5;color:#7b1fa2}
@media (max-width: 768px) {
  .login-screen {
    max-width: 100% !important;
    margin: 20px auto !important;
    padding: 20px 15px !important;
  }
  .login-screen h1 {
    font-size: 18px !important;
  }
  .login-screen input, .login-screen select {
    min-height: 44px;
    font-size: 16px;
  }
  .login-screen button {
    min-height: 44px;
    font-size: 16px;
  }
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}