:root{--primary-blue: #1977F3;--primary-light-blue: #00C7F3;--background-light: #FAFBFC;--white: #FFFFFF;--text-dark: #1C1C1C;--text-gray: #6B7280;--border-light: #E2E8F0;--nav-hover: #F3F4F6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background-color:var(--background-light);color:var(--text-dark);line-height:1.6;margin:0;padding:0;overflow-x:hidden}button,input,select,textarea{font-family:Poppins,sans-serif}html{margin:0;padding:0}.app-layout{display:flex;min-height:100vh;background-color:var(--background-light);font-family:Poppins,sans-serif}.sidebar{width:280px;background:var(--white);border-right:1px solid var(--border-light);display:flex;flex-direction:column;padding:24px 0;position:fixed;height:100vh;overflow-y:auto}.sidebar .logo-section{display:flex;align-items:center;padding:0 24px;margin-bottom:32px}.sidebar .logo-section .logo-icon{margin-right:12px}.sidebar .logo-section .logo-icon svg{width:28px;height:28px}.sidebar .logo-section .logo-text{font-size:20px;font-weight:600;color:var(--text-dark)}.sidebar .nav-menu{flex:1;padding:0 16px}.sidebar .nav-menu .nav-item{display:flex;align-items:center;padding:12px 16px;margin-bottom:4px;border-radius:8px;cursor:pointer;transition:all .2s ease}.sidebar .nav-menu .nav-item:hover{background-color:var(--nav-hover)}.sidebar .nav-menu .nav-item.active{background-color:#e3f2fd;color:var(--primary-blue)}.sidebar .nav-menu .nav-item.active .nav-icon svg{color:var(--primary-blue)}.sidebar .nav-menu .nav-item .nav-icon{margin-right:12px;display:flex;align-items:center}.sidebar .nav-menu .nav-item .nav-icon svg{width:20px;height:20px;color:var(--text-gray)}.sidebar .nav-menu .nav-item .nav-label{font-size:14px;font-weight:500;color:var(--text-dark)}.sidebar .user-profile{padding:16px 24px;border-top:1px solid var(--border-light);display:flex;align-items:center}.sidebar .user-profile .user-avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-light-blue),var(--primary-blue));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px;margin-right:12px}.sidebar .user-profile .user-info{flex:1}.sidebar .user-profile .user-info .user-name{font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:2px}.sidebar .user-profile .user-info .user-email{font-size:12px;color:var(--text-gray)}.sidebar .user-profile .user-actions .user-menu-btn{background:none;border:none;padding:8px;cursor:pointer;border-radius:4px;color:var(--text-gray)}.sidebar .user-profile .user-actions .user-menu-btn:hover{background-color:var(--nav-hover)}.sidebar .user-profile .user-actions .user-menu-btn svg{width:16px;height:16px}.main-content{flex:1;margin-left:280px;background-color:var(--background-light)}.top-bar{background:var(--white);padding:24px 32px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between}.top-bar .breadcrumb h1{font-size:28px;font-weight:600;color:var(--text-dark);margin:0}.top-bar .top-actions{display:flex;gap:16px}.top-bar .top-actions .filter-select{padding:10px 16px;border:1px solid var(--border-light);border-radius:8px;background:var(--white);font-size:14px;color:var(--text-dark);cursor:pointer;min-width:120px}.top-bar .top-actions .filter-select:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #1977f31a}.dashboard-content{padding:32px}.chart-container{background:var(--white);border-radius:16px;padding:32px;border:1px solid var(--border-light)}.chart-container .chart-area .chart-timeline{display:flex;flex-direction:column;width:60px;position:absolute;margin-left:-20px}.chart-container .chart-area .chart-timeline .timeline-item{font-size:12px;color:var(--text-gray);margin-bottom:43px;text-align:right;padding-right:16px}.chart-container .chart-area .chart-graph{margin-left:60px;margin-bottom:16px}.chart-container .chart-area .chart-graph svg{width:100%;height:300px}.chart-container .chart-area .chart-graph svg path{vector-effect:non-scaling-stroke}.chart-container .chart-area .chart-graph svg circle{filter:drop-shadow(0 2px 8px rgba(25,119,243,.3))}.chart-container .chart-area .x-axis-labels{display:flex;justify-content:space-between;margin-left:60px;margin-top:8px}.chart-container .chart-area .x-axis-labels span{font-size:12px;color:var(--text-gray);text-align:center;flex:1}@media (max-width: 1024px){.sidebar{width:240px}.main-content{margin-left:240px}}@media (max-width: 768px){.sidebar{width:100%;position:fixed;transform:translate(-100%);z-index:1000;transition:transform .3s ease}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.top-bar{padding:16px 20px}.top-bar .breadcrumb h1{font-size:24px}.top-bar .top-actions{gap:8px}.top-bar .top-actions .filter-select{min-width:100px;font-size:12px;padding:8px 12px}.dashboard-content,.chart-container{padding:20px}.chart-container .chart-area .chart-timeline{width:40px;margin-left:-10px}.chart-container .chart-area .chart-timeline .timeline-item{padding-right:8px}.chart-container .chart-area .chart-graph,.chart-container .chart-area .x-axis-labels{margin-left:40px}}