body{margin:0}.app-layout{color:#f4f0ff;box-sizing:border-box;background-color:#100d1c;grid-template-rows:72px minmax(0,1fr) auto;grid-template-columns:220px 1fr;gap:12px;height:100vh;min-height:100vh;padding:12px;display:grid}.app-header{box-sizing:border-box;background-color:#292142;grid-column:1/-1;height:72px;padding:16px 24px;font-size:24px;font-weight:700}.app-sidebar{box-sizing:border-box;color:#f4f0ff;background-color:#211936;width:220px;padding:24px 16px}.app-sidebar ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style-type:none;display:flex}.app-sidebar ul li{border-radius:8px;margin:0;padding:10px 12px}.app-sidebar li a{color:#f4f0ff;font-weight:500;text-decoration:none}.app-sidebar li:hover{background-color:#382a56}.app-main{color:#f4f0ff;box-sizing:border-box;background-color:#19152b;border-radius:12px;min-height:0;padding:24px;overflow-y:auto}.main-toolbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.main-toolbar h1{margin:0;font-size:28px}.logout-button{color:#fff;cursor:pointer;background-color:#8b5cf6;border:none;border-radius:8px;padding:10px 18px;font-weight:600;transition:background-color .2s ease-in-out}.logout-button:hover{background-color:#a78bfa}.library-preview{margin-top:32px}.library-preview h2{margin:0 0 16px;font-size:22px}.recording-count{color:#c4b5fd;background-color:#382a56;border-radius:20px;padding:4px 10px;font-size:14px;font-weight:600}.library-message{color:#b6accd;background-color:#292142;border-radius:8px;padding:16px}.library-error{color:#fca5a5}.recordings-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style-type:none;display:flex}.recording-item{background-color:#292142;border-radius:8px;align-items:center;padding:0;transition:background-color .2s ease-in-out;display:flex}.recording-item:hover{background-color:#382a56}.recording-selected{outline-offset:-2px;background-color:#382a56;outline:2px solid #8b5cf6}.recording-button{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;flex:1;width:auto;padding:16px}.favorite-button{color:#f4f0ff;cursor:pointer;background-color:#514467;border:none;border-radius:8px;padding:8px 12px}.favorite-button:hover{background-color:#6b5a85}.favorite-active{background-color:#8b5cf6}.player-bar{color:#f4f0ff;box-sizing:border-box;background-color:#292142;border-radius:12px;grid-column:1/-1;justify-content:space-between;align-items:center;gap:16px;min-height:84px;padding:16px;display:flex}.player-bar p{margin:0}.player-track{min-width:180px;font-weight:600}.player-seek{flex:1;min-width:160px}.player-volume{width:120px}.player-seek:not(:disabled),.player-volume:not(:disabled){cursor:pointer}.player-seek:disabled,.player-volume:disabled{cursor:not-allowed;opacity:.5}.player-seek,.player-volume{accent-color:#8b5cf6}.player-mute{color:#f4f0ff;cursor:pointer;background-color:#514467;border:none;border-radius:8px;padding:10px 14px}.player-mute:hover:not(:disabled){background-color:#6b5a85}.player-mute:disabled{opacity:.5;cursor:not-allowed}.player-current-time,.player-duration{text-align:center;font-variant-numeric:tabular-nums;min-width:45px}.player-error{margin:0;font-size:.9rem;font-weight:600}.player-toggle{color:#fff;cursor:pointer;background-color:#8b5cf6;border:none;border-radius:8px;padding:10px 18px;font-weight:600;transition:background-color .2s ease-in-out}.player-toggle:hover:not(:disabled){background-color:#a78bfa}.player-toggle:disabled{color:#b6accd;cursor:not-allowed;background-color:#514467}@media screen and (width<=700px){.app-layout{grid-template-rows:72px auto minmax(0,1fr) auto;grid-template-columns:1fr}.app-sidebar{width:100%}.main-toolbar{flex-direction:column;align-items:flex-start;gap:16px}.player-bar{flex-flow:column wrap;align-items:stretch}.player-track{overflow-wrap:anywhere;min-width:0}.player-seek{flex:none;width:100%;min-width:0}.player-volume{width:100%}}