:root{--sidebar-width: 280px;--header-height: 60px;color-scheme:light dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;min-height:100vh;display:flex;flex-direction:column;transition:background-color .3s,color .3s;background-color:#f5f5f5;color:#333}header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background:linear-gradient(to right,#00c853,#1e88e5);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:1000;transition:background .3s}html.dark-mode header{background:linear-gradient(to right,#005a2c,#0d47a1)}.logo{font-size:1.5rem;color:#fff}.user-section{position:relative;display:flex;align-items:center}.user-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;color:#fff;font:inherit}.username{color:#fff}.avatar-circle{width:32px;height:32px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 32px}.avatar-circle img{width:100%;height:100%;object-fit:cover;display:block}.menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 6px #0003;z-index:1100;min-width:220px;transition:background-color .3s,border-color .3s,color .3s}.menu[hidden]{display:none}html.dark-mode .menu{background:#2c2c2c;border-color:#444;color:#ccc}.menu ul{list-style:none}.menu li button{width:100%;padding:10px 15px;background:none;border:0;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background-color .3s,color .3s;font:inherit;color:inherit}.menu li button:hover{background:#f5f5f5}html.dark-mode .menu li button:hover{background:#3a3a3a}.switch{position:relative;display:inline-block;width:42px;height:24px}.switch input{display:none}.slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:#ccc;transition:.2s}.slider:before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+.slider{background:#4caf50}.switch input:checked+.slider:before{transform:translate(18px)}.sidebar{position:fixed;top:var(--header-height);left:0;width:var(--sidebar-width);height:calc(100dvh - var(--header-height));background:#fff;border-right:1px solid #ddd;padding:20px 10px;display:flex;flex-direction:column;transition:background-color .3s,border-color .3s;z-index:500}html.dark-mode .sidebar{background:#2c2c2c;border-color:#444;color:#e0e0e0}.sidebar.hidden{display:none}.sidebar-header{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:15px}.sidebar-header h3{margin:0}.main-content{margin-top:var(--header-height);margin-left:var(--sidebar-width);padding:20px;max-width:1200px;width:calc(100% - var(--sidebar-width));transition:margin-left .3s,width .3s}.sidebar.hidden~.main-content{margin-left:0;width:auto}.content{max-width:100%;margin:0 auto;transition:background-color .3s,color .3s}html.dark-mode{background:#121212;color:#e0e0e0;color-scheme:dark}html.dark-mode body{background-color:#121212;color:#e0e0e0}.chart-placeholder{width:100%;max-width:800px;height:400px;background:repeating-linear-gradient(135deg,#eee,#eee 20px,#f5f5f5 20px,#f5f5f5 40px);display:flex;align-items:center;justify-content:center;color:#aaa;font-size:2rem;border:1px solid #ddd;border-radius:8px;margin:20px auto;transition:background-color .3s,border-color .3s}html.dark-mode .chart-placeholder{background:repeating-linear-gradient(135deg,#2a2a2a,#2a2a2a 20px,#333 20px,#333 40px);border-color:#555;color:#bbb}canvas{display:block;margin:20px auto;max-width:100%;transition:background-color .3s,border-color .3s}select,button{transition:background-color .3s,color .3s,border-color .3s}html.dark-mode select{background-color:#444;color:#e0e0e0;border-color:#666}html.dark-mode select option{background-color:#444;color:#e0e0e0}#creators-list{flex:1;list-style:none}#creators-list li{padding:8px 0;color:#666}html.dark-mode #creators-list li{color:#bbb}