:root{--daw-bg-level-1: #1a1a1a;--daw-bg-level-2: #2b2b2b;--daw-bg-level-3: #383838;--daw-bg-level-4: #454545;--daw-accent-active: #ff9d00;--daw-accent-info: #0aeff7;--daw-accent-selected: #0aeff7;--daw-accent-success: #00ff5d;--daw-accent-ready: #00ff5d;--daw-warning:#fc0505;--daw-text-main: #b0b0b0;--daw-text-dim: #888888;--daw-text-bright: #efefef;--daw-border-color: #222222;--daw-font-ui: "Inter", system-ui, sans-serif;--daw-radius-sm: 2px}.layout-container{display:flex;flex-direction:column;gap:1rem}.component-a{order:1}.component-b{order:2}.component-c{order:3}.cursor-pointer{cursor:pointer}.sgb-home-logo{display:flex;color:#000;font-size:20px;font-weight:700;background-color:#d3f800;height:50px;align-items:center;text-align:center}.sgb-songapp-container{height:100vh;width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;background-color:bisque;overflow:hidden}.sgb-songappp-header{height:60px;width:100%;display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;background-color:var(--daw-bg-level-1);color:var(--daw-text-bright)}.sgb-songapp-footer{height:60px;width:100%;display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;background-color:var(--daw-bg-level-1)}.sgb-songapp-main{flex-grow:1;width:100%;overflow-y:auto;background-color:#997878}p{margin:0}.sgb-container{background-color:var(--daw-bg-level-2);padding:12px;border:1px solid var(--daw-bg-level-1);font-family:var(--daw-font-ui)}.sgb-list-container{display:flex;justify-content:space-between;background-color:var(--daw-bg-level-2);padding:2px;border:1px solid var(--daw-bg-level-1);font-family:var(--daw-font-ui)}.sgb-pad,.sgb-pad-footer{background-color:var(--daw-bg-level-3);border:1px solid var(--daw-border-color);color:var(--daw-text-dim);min-height:40px;min-width:100px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background .1s}.sgb-pad-footer :hover{background-color:var(--daw-bg-level-4);color:var(--daw-text-bright)}.sgb-pad-footer :active{background-color:var(--daw-accent-active);color:var(--daw-text-bright)}.sgb-pad-content{display:flex;flex-direction:row;justify-content:space-around}.sgb-list-pad{background-color:var(--daw-bg-level-3);border:1px solid var(--daw-border-color);color:var(--daw-text-dim);padding:2px;display:flex;flex-direction:line;justify-content:space-between;cursor:pointer;transition:background .1s}.sgb-list-pad-selected{background-color:var(--daw-bg-level-3);border:1px solid var(--daw-border-color);color:var(--daw-accent-info);padding:2px;display:flex;flex-direction:line;justify-content:space-between;cursor:pointer;transition:background .1s}.sgb-pad:hover{color:var(--daw-text-bright)}.sgb-pad:active{background-color:var(--daw-accent-active);color:#000}.sgb-text-info{font-size:10px;color:var(--daw-text-dim);-webkit-user-select:none;user-select:none}.sgb-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--daw-text-dim);-webkit-user-select:none;user-select:none}.sgb-label-warning{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--daw-warning);-webkit-user-select:none;user-select:none}.sgb-file-button{background-color:var(--daw-bg-level-3);border:1px solid var(--daw-border-color);color:var(--daw-text-main);padding:6px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:all .1s}.sgb-file-button:hover{background-color:var(--daw-bg-level-4);color:var(--daw-text-bright)}.sgb-file-button:active{background-color:var(--daw-accent-active);color:#000}.sgb-indicator{height:3px;width:20px;background-color:#555;transition:all .2s}.sgb-indicator-selected{background-color:var(--daw-accent-selected);box-shadow:0 0 4px var(--daw-accent-selected)}.sgb-indicator-selected{background-color:var(--daw-accent-ready);box-shadow:0 0 4px var(--daw-accent-ready)}.sgb-indicator.active{background-color:var(--daw-accent-info);box-shadow:0 0 4px var(--daw-accent-info)}.sgb-info-container{background:var(--daw-bg-level-1);border-radius:var(--daw-radius-sm);padding:2px 6px}.sgb-info-content{font-size:10px;color:var(--daw-text-dim)}.sgb-app-menu{display:flex;width:100%;padding:2px;gap:2px}@media(min-width:768px){.layout-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}.component-b{grid-column:1 / 2;order:initial}.component-a{grid-column:2 / 3;order:initial}.component-c{grid-column:3 / 4;order:initial}}