* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
body { background:#f0f4fa; min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:30px 20px; }
.container { max-width:900px; width:100%; background:white; border-radius:24px; padding:35px 40px; box-shadow:0 20px 60px rgba(0,0,0,0.06); }
.login-container { min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
.login-box { background:white; padding:45px 40px; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.08); max-width:420px; width:100%; }
.login-box h1 { font-size:28px; text-align:center; color:#1a2b3e; }
.login-box .slogan { text-align:center; color:#5a6f88; margin-bottom:28px; }
.login-box .form-group { margin-bottom:18px; }
.login-box label { display:block; font-weight:600; color:#2c3e50; font-size:14px; margin-bottom:4px; }
.login-box input { width:100%; padding:12px 16px; border:1px solid #d0ddee; border-radius:12px; font-size:15px; }
.login-box input:focus { outline:none; border-color:#3b7cff; box-shadow:0 0 0 3px rgba(59,124,255,0.15); }
.btn-login { width:100%; padding:14px; background:#1a2b3e; color:white; border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; transition:0.2s; }
.btn-login:hover { background:#2c4058; }
.error-message { background:#fee; color:#c0392b; padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.hint { text-align:center; color:#7a8fa3; font-size:13px; margin-top:16px; }
.header .user-info { display:flex; justify-content:flex-end; gap:16px; font-size:14px; color:#4a5f7a; margin-bottom:10px; }
.header .user-info a { color:#3b7cff; text-decoration:none; }
.header h1 { font-size:32px; color:#1a2b3e; }
.header .slogan { font-size:18px; color:#5a6f88; margin-bottom:12px; }
.instruction { background:#f0f4fa; padding:14px 20px; border-radius:12px; border-left:4px solid #3b7cff; font-size:14px; color:#2c4058; line-height:1.6; }
.main-content { margin-top:25px; }
.query-section label { font-weight:600; color:#1a2b3e; display:block; margin-bottom:6px; }
.query-section textarea { width:100%; min-height:90px; padding:14px 16px; border:1px solid #d0ddee; border-radius:14px; font-size:15px; resize:vertical; font-family:inherit; }
.query-section textarea:focus { outline:none; border-color:#3b7cff; box-shadow:0 0 0 3px rgba(59,124,255,0.12); }
.query-actions { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.btn-send { background:#3b7cff; color:white; border:none; padding:12px 32px; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; transition:0.2s; }
.btn-send:hover { background:#2a66e0; }
.btn-send:disabled { opacity:0.6; cursor:not-allowed; }
.btn-clear { background:transparent; border:1px solid #d0ddee; padding:12px 24px; border-radius:12px; cursor:pointer; }
.response-section { margin-top:24px; background:#f8faff; border-radius:16px; padding:20px 24px; border:1px solid #e6edf5; min-height:80px; }
.response-section .label { display:flex; justify-content:space-between; font-weight:600; color:#1a2b3e; margin-bottom:8px; }
.badge { font-size:12px; background:#e6edf5; padding:2px 14px; border-radius:20px; font-weight:400; color:#4a5f7a; }
.response-content { font-size:15px; line-height:1.7; color:#1e2f41; white-space:pre-wrap; }
.response-content.loading { color:#7a8fa3; font-style:italic; }
.response-content.error { color:#e74c3c; }
.admin-container .admin-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.admin-nav { display:flex; gap:16px; }
.admin-nav a { color:#3b7cff; text-decoration:none; font-weight:500; }
.admin-message { padding:12px 16px; border-radius:10px; background:#e8f5e9; color:#2e7d32; margin-bottom:20px; }
.card { background:#f8faff; padding:24px; border-radius:16px; border:1px solid #e6edf5; margin-bottom:24px; }
.card h3 { margin-bottom:16px; color:#1a2b3e; }
.candidate-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.candidate-form .form-group { margin-bottom:14px; }
.candidate-form label { display:block; font-size:13px; font-weight:600; color:#2c3e50; margin-bottom:4px; }
.candidate-form input { width:100%; padding:10px 14px; border:1px solid #d0ddee; border-radius:10px; font-size:14px; }
.btn-primary { background:#1a2b3e; color:white; border:none; padding:12px 28px; border-radius:10px; font-weight:600; cursor:pointer; }
.btn-danger { background:#e74c3c; color:white; border:none; padding:6px 14px; border-radius:8px; cursor:pointer; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #e6edf5; }
th { background:#f0f4fa; font-weight:600; color:#1a2b3e; }
.expired { color:#e74c3c; }
.badge-admin { background:#e74c3c; color:white; padding:2px 10px; border-radius:12px; font-size:11px; }
.badge-hr { background:#3498db; color:white; padding:2px 10px; border-radius:12px; font-size:11px; }
.badge-active { background:#2ecc71; color:white; padding:2px 10px; border-radius:12px; font-size:11px; }
.badge-inactive { background:#95a5a6; color:white; padding:2px 10px; border-radius:12px; font-size:11px; }
.admin-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-actions button { padding:4px 10px; font-size:12px; border-radius:6px; border:none; cursor:pointer; }
.btn-edit { background:#3498db; color:white; }
.btn-reset { background:#f39c12; color:white; }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:1000; }
.modal.active { display:flex; }
.modal-content { background:white; padding:30px; border-radius:16px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; }
.modal-content h3 { margin-bottom:16px; }
.modal-content .form-group { margin-bottom:12px; }
.modal-content label { display:block; font-weight:600; font-size:13px; margin-bottom:4px; }
.modal-content input { width:100%; padding:8px 12px; border:1px solid #d0ddee; border-radius:8px; }
.modal-actions { display:flex; gap:10px; margin-top:16px; }
.modal-actions button { padding:10px 20px; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
.btn-modal-close { background:#95a5a6; color:white; }
.btn-modal-save { background:#2ecc71; color:white; }
@media (max-width:600px) { .container { padding:20px 16px; } .candidate-form .form-row { grid-template-columns:1fr; } .login-box { padding:30px 20px; } .admin-header { flex-direction:column; align-items:flex-start; } }