:root {
    --primary-color: #1a5632;
    --primary-dark: #0d3b1e;
    --accent-color: #f9a825;
    --sidebar-width: 260px;
    --topbar-height: 64px;
}
* { font-family: 'Roboto', sans-serif; }
body { background-color: #f5f7f5; }
.card { border: none; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: box-shadow .3s, transform .3s; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: translateY(-2px); }
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }
.sidebar {
    width: var(--sidebar-width); background: var(--primary-color); color: #fff;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    display: flex; flex-direction: column; transition: transform .3s;
}
.sidebar .nav-link { color: rgba(255,255,255,.75); padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.15); color: #fff; border-left-color: var(--accent-color); font-weight: 500; }
.main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-height); background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 900; }
.page-content { padding: 24px; flex: 1; }
.live-dot { display: inline-block; width: 8px; height: 8px; background-color: #4caf50; border-radius: 50%; margin-right: 4px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(76,175,80,.5);} 70%{box-shadow:0 0 0 8px rgba(76,175,80,0);} 100%{box-shadow:0 0 0 0 rgba(76,175,80,0);} }
.hamburger { display: none; background: none; border: none; font-size: 1.5rem; }
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .hamburger { display: block; }
}
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a5632 0%, #0d3b1e 40%, #1b6e3a 100%); padding: 20px; }
.login-card { background: #fff; border-radius: 20px; padding: 40px 32px; width: 100%; max-width: 420px; box-shadow: 0 16px 40px rgba(0,0,0,0.2); }