:root{--color-fg: #ffffff;--color-bg: #111111;--color-highlight: #f1661b;--color-highlight-fg: #ffffff;--color-danger: #c34848;--fg-3: color-mix(in srgb, var(--color-fg), transparent 97%);--fg-5: color-mix(in srgb, var(--color-fg), transparent 95%);--fg-10: color-mix(in srgb, var(--color-fg), transparent 90%);--fg-20: color-mix(in srgb, var(--color-fg), transparent 80%);--fg-30: color-mix(in srgb, var(--color-fg), transparent 70%);--fg-50: color-mix(in srgb, var(--color-fg), transparent 50%);--fg-70: color-mix(in srgb, var(--color-fg), transparent 30%);--footer-height: 84px;--sidebar-width: 21.5rem}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);color:var(--color-fg);font:13px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;height:100%}#app{height:100vh;display:flex;flex-direction:column;overflow:hidden}a,.link{color:var(--color-highlight);cursor:pointer;text-decoration:none}.text-secondary{color:var(--fg-50)}button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:999px;background:var(--fg-10);color:var(--color-fg);font-weight:500;transition:background .2s}.btn:hover{background:var(--fg-20)}.btn.highlight{background:var(--color-highlight);color:var(--color-highlight-fg)}.btn.highlight:hover{filter:brightness(1.1)}.btn:disabled{opacity:.4;cursor:default}input[type=text],input[type=password],input[type=search],input:not([type]),select{background:var(--fg-10);border:0;border-radius:6px;color:var(--color-fg);padding:9px 12px;width:100%;font:inherit}input:focus,select:focus{outline:1.5px solid color-mix(in srgb,var(--color-highlight),transparent 40%)}input::placeholder{color:var(--fg-50)}select option{background:#1c1c1c}.login-wrapper{flex:1;display:flex;align-items:center;justify-content:center}.login-form{width:300px;display:flex;flex-direction:column;gap:12px;padding:1.8rem;background:#ffffff14;border-radius:8px}.login-form.wide{width:380px}.login-form .logo{text-align:center;margin-bottom:8px;font-size:28px;font-weight:200}.login-form .logo b{color:var(--color-highlight);font-weight:700}.error{color:#ff7676;font-size:12px}.mnemonic-box{background:var(--color-bg);border:1px dashed color-mix(in srgb,var(--color-highlight),transparent 40%);border-radius:8px;padding:12px;font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.9}.notice{background:var(--fg-5);border-left:3px solid var(--color-highlight);border-radius:4px;padding:10px 12px;font-size:12.5px}.main-wrapper{flex:1;display:flex;min-height:0}nav.sidebar{width:var(--sidebar-width);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.home-search-block{padding:1.5rem;display:flex;gap:8px;align-items:center}.home-btn{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--fg-10);color:var(--fg-70);font-size:15px}.home-btn:hover,.home-btn.active{color:var(--color-fg);background:var(--fg-20)}.home-search-block input{border-radius:999px;padding:9px 16px}.sidebar-scroll{flex:1;overflow-y:auto;padding:.5rem 0 2.5rem;display:flex;flex-direction:column;gap:2rem}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;margin-bottom:.25rem;color:var(--fg-50);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.sidebar-section-header .action{color:var(--fg-50);font-size:13px;text-transform:none}.sidebar-section-header .action:hover{color:var(--color-fg)}ul.menu{list-style:none}ul.menu li{position:relative;padding:0 1.5rem}ul.menu li a{display:flex;align-items:center;gap:12px;height:44px;color:var(--fg-70);overflow:hidden;white-space:nowrap}ul.menu li a:hover{color:var(--color-fg)}ul.menu li .icon{width:16px;text-align:center;font-style:normal;flex-shrink:0}ul.menu li.active a{color:var(--color-fg)}ul.menu li.active:before{content:"";position:absolute;right:0;top:25%;height:50%;width:4px;border-radius:999px 0 0 999px;background:var(--color-highlight);box-shadow:0 0 12px var(--color-highlight)}.sidebar-new-playlist{padding:4px 1.5rem 0}.sidebar-new-playlist input{font-size:12.5px;padding:6px 12px;background:var(--fg-5)}.sidebar-footer{padding:1rem 1.5rem;color:var(--fg-50);font-size:12px;display:flex;justify-content:space-between}.sidebar-footer .link{color:var(--fg-50)}.sidebar-footer .link:hover{color:var(--color-fg)}main.content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.screen-header{display:flex;align-items:flex-end;gap:1rem;padding:1.5rem;border-bottom:1px solid var(--fg-5);flex-shrink:0}.screen-header .thumbnail-wrapper{width:144px;height:144px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--fg-5)}.screen-header .thumbnail-wrapper img{width:100%;height:100%;object-fit:cover}.screen-header .head-main{flex:1;min-width:0}.screen-header h1.name{font-size:2.6rem;font-weight:700;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.screen-header .meta{color:var(--fg-50);font-size:.9rem;line-height:2;display:block}.screen-header .controls{display:flex;gap:8px;align-items:center;flex-shrink:0}.screen-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem 2.5rem}.song-list-header,.song-item{display:grid;grid-template-columns:48px 48px minmax(0,4fr) minmax(0,3fr) 72px 36px;gap:12px;align-items:center}.song-list-header{color:var(--fg-50);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;border-bottom:1px solid var(--fg-5)}.song-item{padding:6px 12px;border-radius:5px;cursor:default;-webkit-user-select:none;user-select:none}.song-item:hover{background:var(--fg-5)}.song-item.playing .title,.song-item.playing .track-number{color:var(--color-highlight)}.song-item .track-number{color:var(--fg-50);text-align:center}.song-item .thumbnail{position:relative;width:48px;height:48px}.song-item .thumbnail img,.song-item .thumbnail .ph{width:48px;height:48px;border-radius:4px;object-fit:cover}.song-item .thumbnail .ph{background:var(--fg-10);display:flex;align-items:center;justify-content:center;color:var(--fg-50)}.song-item .thumbnail .play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#0000008c;border-radius:4px;font-size:16px;color:#fff;cursor:pointer}.song-item:hover .play-overlay{display:flex}.song-item .title-artist{display:flex;flex-direction:column;gap:2px;min-width:0}.song-item .title{color:var(--color-fg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song-item .artist,.song-item .album,.song-item .time{color:var(--fg-50);font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song-item .time{text-align:right;font-variant-numeric:tabular-nums}.song-item .row-action{opacity:0;text-align:center;color:var(--fg-50);position:relative}.song-item:hover .row-action{opacity:1}.song-item .row-action:hover{color:var(--color-fg)}.empty-state{color:var(--fg-50);padding:2rem .5rem}.picker{position:absolute;right:0;top:24px;z-index:30;background:#1c1c1c;border:1px solid var(--fg-10);border-radius:8px;min-width:160px;padding:6px;box-shadow:0 12px 34px #0009;text-align:left}.picker div{padding:7px 10px;border-radius:5px;color:var(--fg-70);white-space:nowrap}.picker div:hover{background:var(--fg-10);color:var(--color-fg)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem 1rem}.item-card{cursor:pointer;min-width:0}.item-card .cover{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:var(--fg-10);margin-bottom:8px;display:block}.item-card .cover.ph{display:flex;align-items:center;justify-content:center;color:var(--fg-50);font-size:30px}.item-card .cover.round{border-radius:999px}.item-card:hover .name{color:var(--color-highlight)}.item-card .name{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.item-card .sub{color:var(--fg-50);font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.home-greeting{font-size:2.4rem;font-weight:200;margin-bottom:.4rem}.home-greeting b{color:var(--color-highlight);font-weight:600}.home-section-title{font-size:1.4rem;font-weight:200;margin:1.6rem 0 .9rem}footer.app-footer{height:var(--footer-height);margin:1rem;margin-top:0;border-radius:12px;border:1px solid var(--fg-5);background:var(--fg-3);display:flex;flex-direction:column;flex-shrink:0;position:relative}.seek-strip{position:absolute;top:-6px;left:12px;right:12px;height:12px;display:flex;align-items:center;z-index:5}.footer-zones{flex:1;display:flex;align-items:stretch}.footer-song-info{width:420px;display:flex;align-items:center;gap:1.25rem;padding:0 1.5rem;min-width:0}.footer-song-info .album-thumb{height:75%;aspect-ratio:1;border-radius:999px;background-size:cover;background-position:center;background-color:var(--fg-10);flex-shrink:0}.footer-song-info .album-thumb.playing{animation:vinyl-spin 30s linear infinite}@keyframes vinyl-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer-song-info .meta{min-width:0}.footer-song-info .title{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.footer-song-info .artist{color:var(--fg-50);font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.playback-controls{flex:1;display:flex;align-items:center;justify-content:center;gap:3rem}.footer-btn{color:var(--fg-70);font-size:1.4rem;transition:color .2s}.footer-btn:hover{color:var(--color-fg)}.footer-btn.small{font-size:.95rem}.footer-btn.active{color:var(--color-highlight)}.play-btn{width:50px;height:50px;border-radius:999px;border:1px solid var(--fg-20);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--color-fg);transition:transform .2s,border-color .2s,color .2s}.play-btn:hover{transform:scale(1.06);border-color:var(--color-highlight);color:var(--color-highlight)}.extra-controls{width:420px;display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;padding:0 2rem}.time-label{color:var(--fg-50);font-size:.8rem;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(to right,var(--color-highlight) 0%,var(--color-highlight) var(--fill, 0%),var(--fg-20) var(--fill, 0%),var(--fg-20) 100%);cursor:pointer;width:100%;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:999px;background:var(--color-fg);opacity:0;transition:opacity .2s}input[type=range]:hover::-webkit-slider-thumb{opacity:1}.volume-wrapper{display:flex;align-items:center;gap:8px;width:140px}.form-stack{display:flex;flex-direction:column;gap:12px;max-width:420px}table.plain{width:100%;border-collapse:collapse}table.plain th{text-align:left;color:var(--fg-50);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--fg-5)}table.plain td{padding:9px 10px;border-bottom:1px solid var(--fg-5)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.stat{background:var(--fg-5);border-radius:10px;padding:14px 16px}.stat-label{color:var(--fg-50);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.stat-value{font-size:20px;font-weight:700}input.qty{width:72px;padding:5px 8px}button.mini{background:var(--fg-10);border-radius:5px;padding:3px 10px;font-size:12px;color:var(--fg-70)}button.mini:hover{color:var(--color-fg);background:var(--fg-20)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#000c;display:flex;align-items:center;justify-content:center}.theater{width:min(960px,94vw);background:#1a1a1a;border:1px solid var(--fg-10);border-radius:12px;overflow:hidden}.theater-bar{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--fg-10);font-weight:600}.theater video{width:100%;display:block;background:#000}
