*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#f4efe4;background:#0f0e0c;min-height:100vh;font-family:Inter,sans-serif}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2e2a20;border-radius:3px}.app-layout{min-height:100vh;display:flex}.app-main{flex:1;min-height:100vh;margin-left:230px}.sidebar{z-index:200;background:#161410;border-right:1px solid #f4efe412;flex-direction:column;flex-shrink:0;width:230px;height:100vh;transition:transform .25s;display:flex;position:fixed;top:0;left:0}.sidebar-overlay,.mobile-header{display:none}.page-content{max-width:1140px;padding:36px 44px}.page-tecnica,.page-acordes{padding:32px 40px}.metrics-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;display:grid}.two-col{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;display:grid}.tools-grid{grid-template-columns:1fr 1fr;align-items:start;gap:18px;margin-bottom:18px;display:grid}.teoria-layout{align-items:flex-start;gap:24px;padding-top:32px;display:flex}.teoria-aside{flex-shrink:0;width:220px}.teoria-unit-list{flex-direction:column;gap:3px;display:flex}.teoria-unit-btn{text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;width:100%;padding:9px 12px;transition:all .15s;display:flex}.teoria-unit-btn.active{background:#c9923a26;border-color:#c9923a4d}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px;display:grid}.eval-config-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.eval-config-3col{grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.progress-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;display:grid}.levels-wrap{flex-wrap:wrap;gap:10px;margin-bottom:22px;display:flex}.beat-boxes{gap:10px;margin-bottom:16px;display:flex}.verify-results-grid{gap:8px;margin-bottom:10px;display:grid}@media (max-width:768px){.app-layout{flex-direction:column}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{z-index:199;background:#0009;display:block;position:fixed;inset:0}.sidebar-overlay.hidden{display:none}.mobile-header{z-index:100;background:#161410;border-bottom:1px solid #f4efe412;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;display:flex;position:sticky;top:0}.app-main{margin-left:0}.page-content,.page-tecnica,.page-acordes{padding:20px 16px}.metrics-grid{grid-template-columns:repeat(2,1fr);gap:10px}.two-col{grid-template-columns:1fr;gap:12px}.tools-grid{grid-template-columns:1fr;gap:14px}.teoria-layout{flex-direction:column;gap:16px;padding-top:16px}.teoria-aside{width:100%!important;position:static!important}.teoria-unit-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-flow:row;gap:6px;padding-bottom:4px;overflow-x:auto}.teoria-unit-list::-webkit-scrollbar{display:none}.teoria-unit-btn{white-space:nowrap;flex-shrink:0;width:auto;padding:7px 12px}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.eval-config-grid,.eval-config-3col{grid-template-columns:1fr}.progress-grid{grid-template-columns:1fr;gap:10px}.levels-wrap{gap:6px}.levels-wrap>div{min-width:60px!important;padding:8px 10px!important}.levels-wrap>div>div:last-child{font-size:13px!important}.beat-boxes{flex-wrap:wrap;gap:6px}.beat-boxes>div{flex:80px;min-width:80px}.dash-hero{border-radius:14px!important;padding:20px!important}.dash-hero-name{font-size:24px!important}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.quick-btns{flex-direction:column}.quick-btns button{width:100%}}@media (max-width:480px){.metrics-grid{grid-template-columns:1fr 1fr;gap:8px}.page-content,.page-tecnica,.page-acordes{padding:14px 12px}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}.levels-wrap>div{min-width:50px!important;padding:6px 8px!important}}