* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f4f6f9; color: #333; }
a { text-decoration: none; }

/* LOGIN */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#667eea,#764ba2); }
.login-box { background:#fff; padding:40px; border-radius:12px; width:360px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-box h2 { text-align:center; margin-bottom:20px; }
.login-box label { display:block; margin-top:12px; font-weight:600; }
.login-box input { width:100%; padding:10px; margin-top:6px; border:1px solid #ccc; border-radius:6px; }
.login-box .hint { text-align:center; font-size:12px; color:#888; margin-top:15px; }

/* LAYOUT */
.sidebar {
    position: fixed; left:0; top:0; bottom:0; width:220px;
    background:#2c3e50; color:#fff; padding:20px 0;
}
.sidebar h3 { text-align:center; padding:0 20px 20px; border-bottom:1px solid #34495e; }
.sidebar a { display:block; padding:12px 20px; color:#bdc3c7; }
.sidebar a:hover, .sidebar a.active { background:#34495e; color:#fff; border-left:4px solid #3498db; }
.main { margin-left:220px; padding:25px; }
.topbar { background:#fff; padding:15px 25px; border-radius:8px; margin-bottom:20px;
          display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 5px rgba(0,0,0,.05); }

/* CARDS */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:25px; }
.card { background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.card h4 { color:#7f8c8d; font-size:13px; text-transform:uppercase; margin-bottom:8px; }
.card .value { font-size:22px; font-weight:700; }
.card.green .value { color:#27ae60; }
.card.red .value { color:#e74c3c; }
.card.blue .value { color:#2980b9; }

/* TABLE */
table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); }
th, td { padding:12px 15px; text-align:left; border-bottom:1px solid #ecf0f1; }
th { background:#34495e; color:#fff; font-size:13px; text-transform:uppercase; }
tr:hover td { background:#f8f9fa; }

/* BUTTONS */
.btn { display:inline-block; padding:8px 16px; border-radius:6px; border:none; cursor:pointer; font-size:14px; }
.btn-primary { background:#3498db; color:#fff; }
.btn-success { background:#27ae60; color:#fff; }
.btn-danger  { background:#e74c3c; color:#fff; }
.btn-warning { background:#f39c12; color:#fff; }
.btn-sm { padding:5px 10px; font-size:12px; }

/* FORM */
.form-box { background:#fff; padding:25px; border-radius:8px; max-width:650px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:6px; font-weight:600; font-size:14px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}
.alert { padding:12px; background:#f8d7da; color:#721c24; border-radius:6px; margin-bottom:15px; }
.alert-success { background:#d4edda; color:#155724; }