* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background: #f4f6f8; padding: 20px; color: #333; }
.container { max-width: 480px; margin: 50px auto; background: #fff; padding: 30px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.container.wide { max-width: 960px; margin: 30px auto; }
h2 { text-align: center; margin-bottom: 25px; color: #1a202c; }
input, select, textarea { width: 100%; padding: 12px; margin: 8px 0 16px; border: 1px solid #cbd5e0; border-radius: 8px; font-size: 15px; transition: 0.2s; }
input:focus, select:focus, textarea:focus { border-color: #3182ce; outline: none; box-shadow: 0 0 0 3px rgba(49,130,206,0.2); }
textarea { height: 100px; resize: vertical; }
button { width: 100%; padding: 13px; background: #3182ce; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500; transition: 0.2s; }
button:hover { background: #2b6cb0; }
.error, .success { text-align: center; margin-bottom: 12px; padding: 8px; border-radius: 6px; font-size: 14px; }
.error { background: #fed7d7; color: #c53030; }
.success { background: #c6f6d5; color: #2f855a; }
.toggle { text-align: center; margin-top: 15px; color: #3182ce; cursor: pointer; font-size: 14px; }
.toggle:hover { text-decoration: underline; }
.links { text-align: center; margin-top: 20px; }
.links a { color: #3182ce; text-decoration: none; margin: 0 12px; font-size: 14px; font-weight: 500; }
.links a:hover { text-decoration: underline; }
.table-wrapper { overflow-x: auto; margin-top: 15px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: 600px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 14px; }
th { background: #edf2f7; font-weight: 600; color: #4a5568; }
tr:last-child td { border-bottom: none; }
tr:hover { background: #f7fafc; }
/* Tambahkan di akhir file style.css */
.container.wide { max-width: 1200px; margin: 20px auto; padding: 20px; }
.back-link { display: inline-block; margin-bottom: 20px; color: #3182ce; text-decoration: none; font-weight: 500; }
.back-link:hover { text-decoration: underline; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .container.wide { padding: 10px; }
    .stats-grid { grid-template-columns: 1fr; }
    .charts-grid { grid-template-columns: 1fr; }
    table { font-size: 12px; }
    th, td { padding: 8px; }
}