:root{--bg-body:#0f0f12;--text-main:#e6e6ec;--accent:#6a5acd;--panel-bg:#00000080;--btn-bg:#00000061}*{box-sizing:border-box}html,body,#app{min-height:100vh;margin:0}body{background:var(--bg-body);color:var(--text-main);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.player-shell{justify-content:center;align-items:center;min-height:100vh;display:flex}.player-ovr{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:hidden}.player-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:16px;flex-direction:column;justify-content:space-between;width:min(100vw,56.25vh);height:min(100vh,177.78vw);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000008c}.background-layer{z-index:0;background:radial-gradient(circle at 30% 20%,#6a5acd66,#0000 42%),radial-gradient(circle at 75% 65%,#4378ee52,#0000 45%),#121218;position:absolute;inset:0;overflow:hidden}.background-cover{background-image:var(--player-cover-image);filter:none;pointer-events:none;background-position:50%;background-size:cover;position:absolute;inset:0;transform:none}.background-overlay{background:0 0;position:absolute;inset:0}.background-layer--with-cover{background:#101018}.loading-overlay{z-index:4;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#08080cc7;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-overlay p{letter-spacing:.02em;margin:0;font-size:.95rem}.info-strip{text-align:center;background:var(--panel-bg);z-index:2;width:100%;padding:8px 12px 6px;position:absolute;top:0;left:0}.info-strip h2{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.7rem;font-weight:600;line-height:1.15;overflow:hidden}.info-strip p{opacity:.78;white-space:nowrap;text-overflow:ellipsis;margin:2px 0 0;font-size:.575rem;line-height:1.15;overflow:hidden}.state-panel{z-index:2;text-align:center;background:#0e0e12ad;border:1px solid #ffffff29;border-radius:14px;width:min(86%,360px);padding:14px 16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.state-player{background:0 0;border:0}.state-title{margin:0;font-size:1rem;font-weight:600}.state-subtitle{opacity:.82;margin:8px 0 0;font-size:.9rem}.action-ghost{color:var(--text-main);cursor:pointer;background:#ffffff14;border:1px solid #ffffff40;border-radius:10px;margin-top:12px;padding:9px 12px}.bottom-bar{z-index:3;justify-content:space-between;align-items:center;gap:6px;padding:0 14px;display:flex;position:absolute;bottom:16px;left:0;right:0}.bottom-bar__group{flex-shrink:0;align-items:center;gap:8px;display:flex;position:relative}.bottom-bar__group--filters{margin-right:0}.bottom-bar__group--actions{margin-left:0}.side-actions{z-index:4;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.share-action{z-index:3;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.controls-row{flex-shrink:0;align-items:center;gap:20px;display:flex}.ctrl-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.ctrl-btn--main{width:56px;height:56px}.ctrl-btn-icon{filter:drop-shadow(0 1px 1.5px #0000006b);backface-visibility:hidden;justify-content:center;align-items:center;width:35px;height:35px;font-size:24px;font-weight:700;line-height:1;display:inline-flex;transform:translateZ(0)}.ctrl-btn-icon--main{width:35px;height:35px;font-size:26px}.filter-panel{overscroll-behavior:contain;z-index:4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:thin;scrollbar-color:#ffffff47 transparent;background:#08080cf0;border:1px solid #ffffff29;border-radius:12px;flex-direction:column;gap:5px;min-width:132px;max-width:168px;max-height:min(46vh,260px);padding:8px 6px 8px 8px;display:flex;position:absolute;bottom:calc(100% + 8px);overflow:hidden auto}.filter-panel::-webkit-scrollbar{width:5px}.filter-panel::-webkit-scrollbar-track{background:0 0;margin:4px 0}.filter-panel::-webkit-scrollbar-thumb{background:#ffffff38 padding-box padding-box;border:1px solid #0000;border-radius:999px}.filter-panel::-webkit-scrollbar-thumb:hover{background:#ffffff57 padding-box padding-box}.filter-panel--genres{min-width:188px;max-width:220px;max-height:min(52vh,300px);padding-right:4px}.filter-panel--bottom-left{left:0}.filter-panel--bottom-right{right:0}.filter-chip{color:#f4f4fa;letter-spacing:.01em;cursor:pointer;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:break-word;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:10px;flex-shrink:0;width:100%;min-height:34px;padding:7px 10px;font-size:.8125rem;font-weight:500;line-height:1.35}.filter-chip--active{background:#6a5acd59;border-color:#6a5acdd9}.side-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.side-btn--share .side-btn-icon,.side-btn-icon{filter:drop-shadow(0 1px 1.5px #0000006b);backface-visibility:hidden;justify-content:center;align-items:center;width:35px;height:35px;font-size:24px;font-weight:700;line-height:1;display:inline-flex;transform:translateZ(0)}.side-btn-icon--filter{width:35px;height:35px}.side-btn-icon--genres{width:40px;height:40px;font-size:24px}.side-btn-icon--share{width:35px;height:35px;font-size:22px}.side-btn-icon--marker{width:35px;height:35px;font-size:26px}.side-btn-svg{filter:drop-shadow(0 1px 1.5px #0000006b);backface-visibility:hidden;display:block;transform:translateZ(0)}.side-btn-svg--genres{width:40px;height:40px}.side-btn--like.side-btn--liked{color:#fff}.side-btn--share .share-icon{width:20px;height:20px;display:block}.side-btn:disabled{opacity:.45;cursor:not-allowed}.side-btn--debug{letter-spacing:.01em;border-radius:10px;width:auto;min-height:34px;padding:0 10px;font-size:.78rem}.debug-export-status{text-align:right;background:#08080cb8;border:1px solid #fff3;border-radius:8px;max-width:180px;padding:6px 8px;font-size:.72rem;line-height:1.2}.debug-export-status[data-state=success]{border-color:#54c88cb3}.debug-export-status[data-state=failed]{border-color:#ff7777bf}.share-toast{z-index:5;color:#f0f0f6;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0c0c12d1;border:1px solid #ffffff2e;border-radius:10px;padding:8px 12px;font-size:.82rem;position:absolute;bottom:92px;left:50%;transform:translate(-50%)}button:disabled{opacity:.5;cursor:default}audio{display:none}