:root{--ink:#1e2528;--muted:#778083;--line:#e6e9e7;--paper:#f7f8f5;--panel:#ffffff;--accent:#b7ef65;--accent-deep:#233b18;--shadow:0 18px 60px rgba(35,44,37,.09)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;border-bottom:1px solid rgba(34,43,38,.08);background:rgba(247,248,245,.82);backdrop-filter:blur(15px);position:sticky;top:0;z-index:4}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.04em;text-decoration:none}.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--accent);font-family:Georgia,serif;font-size:20px;font-style:italic}.topbar-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-family:"DM Mono",monospace}.status-dot,.footer-dot{width:7px;height:7px;border-radius:50%;background:#86c84b;box-shadow:0 0 0 4px rgba(134,200,75,.12)}.divider{width:1px;height:16px;background:var(--line);margin:0 3px}.icon-button{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;max-width:1420px;margin:0 auto;padding:64px 5.5vw}.player-wrap{position:relative;aspect-ratio:16/9;background:#dfe5e1;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}video{width:100%;height:100%;display:block;background:#202827}.empty-player{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;background:radial-gradient(circle at 50% 45%,#eef8df 0,#dfe9df 48%,#ccd8d1 100%)}.empty-player.hidden{display:none}.empty-icon{display:grid;place-items:center;width:76px;height:76px;margin-bottom:22px;border:1px solid rgba(35,59,24,.2);border-radius:50%;color:var(--accent-deep);font-size:23px;padding-left:4px}.empty-player h2{font-size:23px;letter-spacing:-.04em;margin:0 0 8px}.empty-player p{color:#64706b;font-size:13px;margin:0 0 23px}.primary-button,.upload-button{border:0;border-radius:9px;background:var(--ink);color:#fff;font-family:inherit;font-weight:700;cursor:pointer;transition:.2s}.primary-button{padding:11px 18px;font-size:13px}.primary-button:hover,.upload-button:hover{transform:translateY(-2px);background:#384246}.now-playing{display:flex;justify-content:space-between;align-items:flex-end;padding:27px 2px 24px;border-bottom:1px solid var(--line)}.eyebrow{display:block;color:#8d9795;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}.now-playing h1{font-size:25px;line-height:1.2;letter-spacing:-.05em;margin:0 0 8px}.now-playing p{font-size:12px;color:var(--muted);margin:0}.player-actions{display:flex;gap:17px;align-items:center}.text-button{border:0;background:none;color:#68716f;font:600 12px Manrope;cursor:pointer}.text-button:disabled{opacity:.35;cursor:not-allowed}.round-button{border:1px solid var(--line);background:#fff;border-radius:50%;height:34px;width:34px;color:#68716f;cursor:pointer}.progress-note{display:flex;align-items:center;gap:13px;padding:18px 2px;color:#98a19e;font:11px "DM Mono",monospace}.progress-note span:first-child{color:#859b65}.playlist-panel{background:var(--panel);border-radius:18px;padding:27px 24px 18px;box-shadow:0 10px 42px rgba(35,44,37,.05);display:flex;flex-direction:column;min-height:574px}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between}.panel-heading h2{font-size:25px;letter-spacing:-.055em;margin:0}.count-badge{display:grid;place-items:center;min-width:27px;height:27px;border-radius:8px;background:#eef2ed;color:#6d7773;font:12px "DM Mono",monospace}.playlist-tools{display:flex;gap:9px;margin:27px 0 18px}.search-box{display:flex;align-items:center;gap:8px;flex:1;border:1px solid var(--line);border-radius:9px;padding:0 11px;color:#9aa39e}.search-box input{width:100%;border:0;outline:0;background:none;padding:10px 0;font:12px Manrope;color:var(--ink)}.upload-button{padding:0 14px;font-size:12px;background:var(--accent-deep);color:var(--accent)}.playlist{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:430px;padding-right:4px;scrollbar-width:thin;scrollbar-color:#c7cfca transparent}.playlist::-webkit-scrollbar{width:6px}.playlist::-webkit-scrollbar-thumb{background:#c7cfca;border-radius:999px}.playlist::-webkit-scrollbar-track{background:transparent}body.dark .playlist{scrollbar-color:#44514a transparent}body.dark .playlist::-webkit-scrollbar-thumb{background:#44514a}.playlist-item{display:grid;grid-template-columns:74px 1fr 20px;gap:12px;align-items:center;border:0;background:transparent;border-radius:10px;padding:8px 6px;text-align:left;cursor:pointer;width:100%;transition:.18s}.playlist-item:hover{background:#f5f7f4}.playlist-item.active{background:#edf7df}.thumbnail{position:relative;display:block;height:48px;border-radius:7px;background:linear-gradient(135deg,#89938d,#c3d2c2);overflow:hidden;background-size:cover;background-position:center}.thumbnail:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(18,31,27,.25),transparent)}.play-overlay{position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:white;font-size:12px;opacity:0;transition:.2s}.playlist-item.active .play-overlay,.playlist-item:hover .play-overlay{opacity:1}.item-copy{min-width:0;display:flex;flex-direction:column;gap:5px}.item-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-subtitle{color:#929b98;font:10px "DM Mono",monospace}.item-more{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;color:#a4adaa;letter-spacing:1px;cursor:pointer;transition:color .18s,background .18s}.item-more:hover{color:#c2603f;background:rgba(194,96,63,.12)}.playlist-empty{text-align:center;margin:auto;color:#75807b}.playlist-empty.hidden{display:none}.folder-icon{font:35px Georgia,serif;color:#c0cec0;margin-bottom:10px}.playlist-empty p{font-size:13px;font-weight:700;margin:0 0 7px}.playlist-empty span{font-size:11px;color:#a0aaa5}.panel-footer{border-top:1px solid var(--line);padding-top:17px;margin-top:20px;color:#a0aaa5;font:10px "DM Mono",monospace;display:flex;gap:9px;align-items:center}.footer-dot{width:5px;height:5px;box-shadow:none;background:#bac4be}@media(max-width:900px){.app-shell{grid-template-columns:1fr;gap:28px;padding-top:35px}.playlist-panel{min-height:360px}.playlist{max-height:330px}}@media(max-width:600px){.topbar{padding:0 20px}.topbar-meta{display:none}.app-shell{padding:28px 20px}.player-wrap{border-radius:13px}.empty-player h2{font-size:18px}.empty-player p{font-size:11px}.now-playing{display:block;padding-top:21px}.now-playing h1{font-size:21px}.player-actions{margin-top:18px;justify-content:space-between}.playlist-panel{padding:22px 17px}}body.dark{--ink:#edf2ed;--muted:#a5b0aa;--line:#344039;--paper:#151b19;--panel:#202824;--accent:#b7ef65;--accent-deep:#b7ef65}body.dark .topbar{background:rgba(21,27,25,.86);border-color:var(--line)}body.dark .brand-mark{background:var(--accent);color:#1d2d17}body.dark .round-button,body.dark .search-box{background:#29332e;border-color:var(--line);color:var(--muted)}body.dark .search-box input{color:var(--ink)}body.dark .playlist-item:hover{background:#2b3731}body.dark .playlist-item.active{background:#304528}body.dark .item-more:hover{color:#e08a63;background:rgba(224,138,99,.16)}body.dark .empty-player{background:radial-gradient(circle at 50% 45%,#30432d 0,#263530 48%,#202a27 100%)}body.dark .empty-player h2,body.dark .empty-player p{color:var(--ink)}body.dark .upload-button{background:var(--accent);color:#1d2d17}