:root{--color-bg: #f5f7fa;--color-surface: #ffffff;--color-primary: #3f51b5;--color-primary-light: #5c6bc0;--color-primary-dark: #303f9f;--color-text: #222;--color-text-light: #666;--color-border: #e1e4ea;--radius: 12px;--shadow: 0 2px 8px rgba(0, 0, 0, .08);--transition: .25s ease;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--color-bg);font-family:Inter,Segoe UI,sans-serif;color:var(--color-text);line-height:1.6}a{text-decoration:none;color:var(--color-primary);transition:var(--transition)}a:hover{color:var(--color-primary-dark)}.topbar{width:100%;height:60px;background:var(--color-primary);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-5);box-shadow:var(--shadow);position:sticky;top:0;z-index:1000}.topbar .brand{font-size:1.3rem;font-weight:600;letter-spacing:.5px}.topbar .nav-links{display:flex;gap:var(--space-4)}.topbar .nav-links a{color:#fff;font-weight:500;opacity:.9;transition:var(--transition)}.topbar .nav-links a:hover{opacity:1}.page-container{max-width:1400px;margin:0 auto;padding:var(--space-6) var(--space-4)}.card,.chart-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow);transition:var(--transition)}.card.hoverable:hover,.hoverable.chart-card:hover{transform:translateY(-3px);box-shadow:0 5px 16px #00000026}.login-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(#3f51b5d9,#3f51b5d9)}.login-box{width:380px;background:var(--color-surface);padding:var(--space-5);border-radius:var(--radius);box-shadow:var(--shadow)}.login-box h2{text-align:center;margin-bottom:var(--space-4);color:var(--color-primary)}.login-box .input-group{display:flex;flex-direction:column;margin-bottom:var(--space-4)}.login-box .input-group label{font-size:.9rem;margin-bottom:var(--space-1);color:var(--color-text-light)}.login-box .input-group input{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);transition:var(--transition)}.login-box .input-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #3f51b540;outline:none}.login-box .btn{width:100%;padding:var(--space-3);border:none;border-radius:var(--radius);background:var(--color-primary);color:#fff;font-size:1rem;cursor:pointer;transition:var(--transition)}.login-box .btn:hover{background:var(--color-primary-dark)}.chart-card canvas{width:100%!important;height:360px!important}