/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f4f7fc; color: #1e2a3e; line-height: 1.5; }
h1, h2, h3 { font-weight: 600; color: #1e3c72; }
h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.4rem; margin-bottom: 1rem; border-left: 4px solid #146b9e; padding-left: 1rem; }
button, .btn { display: inline-block; background: linear-gradient(105deg, #146b9e, #0f5883); color: white; border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; text-decoration: none; text-align: center; }
button:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,107,158,0.3); background: linear-gradient(105deg, #0f5b87, #0a4263); }
.btn-delete { background: #dc2626; background: linear-gradient(105deg, #dc2626, #b91c1c); }
.btn-delete:hover { background: linear-gradient(105deg, #b91c1c, #991b1b); }
.card, .admin-container, .user-form-container, .login-card, .landing-container { background: white; border-radius: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02); padding: 2rem; margin-bottom: 2rem; }
.admin-container { max-width: 1400px; margin: 2rem auto; padding: 2rem; }
.user-form-container { max-width: 700px; margin: 2rem auto; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #e2e9f2; }
.admin-nav a { background: #f0f4f8; color: #1e4663; padding: 8px 20px; border-radius: 40px; text-decoration: none; font-weight: 500; transition: 0.2s; }
.admin-nav a:hover { background: #146b9e; color: white; }
.form-group { margin-bottom: 1.5rem; }
label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #1e4663; font-size: 0.9rem; }
input, textarea, select { width: 100%; padding: 12px 16px; border: 1.5px solid #e2e9f2; border-radius: 16px; font-size: 0.95rem; transition: all 0.2s; font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #146b9e; box-shadow: 0 0 0 3px rgba(20,107,158,0.1); }
small { color: #6c8dae; font-size: 0.7rem; display: block; margin-top: 5px; }
.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: 20px; overflow: hidden; margin: 1rem 0; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.data-table th { background: #f8fafc; font-weight: 600; color: #1e4663; }
.data-table tr:hover { background: #f8fafc; }
.table-wrapper { overflow-x: auto; border-radius: 20px; }
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 16px; background: white; border: 1px solid #e2e9f2; border-radius: 40px; text-decoration: none; color: #1e4663; font-weight: 500; }
.pagination a:hover { background: #146b9e; color: white; border-color: #146b9e; }
.message, .error-message, .success-message { padding: 14px 20px; border-radius: 16px; margin-bottom: 1.5rem; font-size: 0.9rem; }
.error-message, .error { background: #fee2e2; color: #b91c1c; border-left: 4px solid #dc2626; }
.success-message, .success { background: #e6f7e6; color: #1e5a1e; border-left: 4px solid #2e7d32; }
.login-page { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-container { width: 100%; max-width: 440px; animation: fadeInUp 0.5s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.login-card { background: rgba(255,255,255,0.98); border-radius: 32px; padding: 2rem 2rem 2.5rem; box-shadow: 0 25px 45px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.05); backdrop-filter: blur(2px); }
.logo-area { text-align: center; margin-bottom: 1.5rem; }
.logo-area h1 { font-size: 1.8rem; font-weight: 700; background: linear-gradient(120deg, #146b9e, #0f5883); -webkit-background-clip: text; background-clip: text; color: transparent; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper input { width: 100%; padding: 12px 16px; padding-right: 45px; border: 1.5px solid #e2e9f2; border-radius: 28px; }
.toggle-password { position: absolute; right: 16px; background: none; border: none; cursor: pointer; font-size: 1.2rem; }
.btn-login { width: 100%; background: linear-gradient(105deg, #146b9e, #0f5883); color: white; border: none; padding: 12px; font-size: 1rem; font-weight: 700; border-radius: 40px; cursor: pointer; margin-top: 0.5rem; }
@media (max-width: 768px) { .admin-container, .user-form-container, .card, .login-card { padding: 1.5rem; margin: 1rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } .admin-nav a { padding: 6px 14px; font-size: 0.8rem; } .data-table th, .data-table td { padding: 8px 12px; font-size: 0.8rem; } }