html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}body{background:#0f172a;overflow-x:hidden}#root{width:100%;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial}html,body{width:100%;height:100%}body{margin:0}.layout{width:100%;min-height:100vh;display:flex;position:relative}.sidebar-backdrop{display:none}.sidebar{color:#fff;background:#111827;flex-direction:column;width:220px;height:100vh;padding:20px 20px 20px 0;display:flex;position:sticky;top:0;overflow:auto}.sidebar .logo{color:#38bdf8;margin-bottom:20px}.sidebar nav{flex-direction:column;gap:10px;display:flex}.sidebar a{color:#cbd5e1;border-radius:6px;padding:8px;text-decoration:none}.sidebar a:hover{background:#1f2937}.mainArea{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.header{z-index:2;background:#fff;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;height:60px;padding:0 20px;display:flex;position:sticky;top:0}.content{background:#f3f4f6;flex:1;min-height:0;padding:20px;overflow:auto}@media (width<=900px){.layout{flex-direction:column}.sidebar-backdrop{z-index:140;opacity:0;pointer-events:none;background:#0206178c;transition:opacity .2s;display:block;position:fixed;inset:0}.sidebar-backdrop.active{opacity:1;pointer-events:auto}.header{padding:14px 16px}.content{padding:16px}}@media (width<=640px){.header{height:auto}.content{padding:12px}}.dashboard.accent-blue .refresh-btn,.analyticsPage.accent-blue .refresh-btn,.reportsPage.accent-blue .refresh-btn,.dashboard.accent-blue .badge,.analyticsPage.accent-blue .badge,.reportsPage.accent-blue .badge,.dashboard.accent-blue .hero-badge,.analyticsPage.accent-blue .hero-badge,.reportsPage.accent-blue .hero-badge,.dashboard.accent-blue .token-status,.analyticsPage.accent-blue .token-status,.reportsPage.accent-blue .token-status,.dashboard.accent-blue .panelHeader h3,.analyticsPage.accent-blue .panelHeader h3,.reportsPage.accent-blue .panelHeader h3,.dashboard.accent-blue .panelHeader p,.analyticsPage.accent-blue .panelHeader p,.reportsPage.accent-blue .panelHeader p{border-color:#38bdf833}.dashboard.accent-blue .refresh-btn,.analyticsPage.accent-blue .refresh-btn,.reportsPage.accent-blue .refresh-btn,.dashboard.accent-blue .badge,.analyticsPage.accent-blue .badge,.reportsPage.accent-blue .badge,.dashboard.accent-blue .hero-badge,.analyticsPage.accent-blue .hero-badge,.reportsPage.accent-blue .hero-badge,.dashboard.accent-blue .token-status,.analyticsPage.accent-blue .token-status,.reportsPage.accent-blue .token-status{color:#0f172a;background:linear-gradient(135deg,#38bdf8,#60a5fa)}.dashboard.accent-purple .refresh-btn,.analyticsPage.accent-purple .refresh-btn,.reportsPage.accent-purple .refresh-btn,.dashboard.accent-purple .badge,.analyticsPage.accent-purple .badge,.reportsPage.accent-purple .badge,.dashboard.accent-purple .hero-badge,.analyticsPage.accent-purple .hero-badge,.reportsPage.accent-purple .hero-badge,.dashboard.accent-purple .token-status,.analyticsPage.accent-purple .token-status,.reportsPage.accent-purple .token-status{color:#0f172a;background:linear-gradient(135deg,#a855f7,#c084fc)}.dashboard.accent-orange .refresh-btn,.analyticsPage.accent-orange .refresh-btn,.reportsPage.accent-orange .refresh-btn,.dashboard.accent-orange .badge,.analyticsPage.accent-orange .badge,.reportsPage.accent-orange .badge,.dashboard.accent-orange .hero-badge,.analyticsPage.accent-orange .hero-badge,.reportsPage.accent-orange .hero-badge,.dashboard.accent-orange .token-status,.analyticsPage.accent-orange .token-status,.reportsPage.accent-orange .token-status{color:#0f172a;background:linear-gradient(135deg,#f97316,#fb923c)}.dashboard.accent-teal .refresh-btn,.analyticsPage.accent-teal .refresh-btn,.reportsPage.accent-teal .refresh-btn,.dashboard.accent-teal .badge,.analyticsPage.accent-teal .badge,.reportsPage.accent-teal .badge,.dashboard.accent-teal .hero-badge,.analyticsPage.accent-teal .hero-badge,.reportsPage.accent-teal .hero-badge,.dashboard.accent-teal .token-status,.analyticsPage.accent-teal .token-status,.reportsPage.accent-teal .token-status{color:#0f172a;background:linear-gradient(135deg,#14b8a6,#2dd4bf)}.dashboard.accent-blue .filter-card,.analyticsPage.accent-blue .filter-card,.reportsPage.accent-blue .filter-card,.dashboard.accent-purple .filter-card,.analyticsPage.accent-purple .filter-card,.reportsPage.accent-purple .filter-card,.dashboard.accent-orange .filter-card,.analyticsPage.accent-orange .filter-card,.reportsPage.accent-orange .filter-card,.dashboard.accent-teal .filter-card,.analyticsPage.accent-teal .filter-card,.reportsPage.accent-teal .filter-card{border-color:#94a3b82e}.footer{z-index:2;background:#fff;border-top:1px solid #eee;justify-content:center;align-items:center;height:40px;display:flex;position:sticky;bottom:0}.sidebar{color:#cbd5e1;background:#0b1220;border-right:1px solid #ffffff0d;flex-direction:column;width:270px;height:100vh;padding:18px;display:flex}.sidebar.open{transform:translate(0)}.brand{align-items:center;gap:12px;margin-bottom:20px;padding:10px;display:flex}.logoDot{background:#3b82f6;border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px #3b82f6}.brand h2{color:#fff;font-size:18px}.brand p{color:#64748b;font-size:12px}.menuSection{flex:1}.menuLabel{color:#64748b;margin:10px 0;padding-left:10px;font-size:11px}.menu{flex-direction:column;gap:6px;display:flex}.menuItem{cursor:pointer;color:inherit;text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:12px;width:100%;padding:12px 14px;font-size:14px;transition:all .2s;display:flex}.menuItem:focus-visible{outline-offset:2px;outline:2px solid #3b82f6cc}.menuItem:hover{color:#fff;background:#3b82f614;transform:translate(3px)}.menuItem.active{color:#fff;background:linear-gradient(90deg,#3b82f6,#2563eb);box-shadow:0 4px 15px #3b82f640}.sidebarFooter{border-top:1px solid #ffffff14;padding-top:15px}.userBox{align-items:center;gap:10px;padding:10px;display:flex}.avatar{color:#fff;background:#2563eb;border-radius:50%;justify-content:center;align-items:center;width:35px;height:35px;display:flex}.userName{color:#fff;font-size:13px}.userRole{color:#64748b;font-size:11px}@media (width<=900px){.sidebar{z-index:200;width:min(80vw,280px);transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:0 20px 50px #00000059}}
