*{box-sizing:border-box}
:root{color-scheme:light;--pip-bg:#f8fafc;--pip-text:#19243a;--pip-muted:#65728b;--pip-line:#dce3ed;--pip-accent:#3169ff}
html[data-theme="dark"]{color-scheme:dark;--pip-bg:#15111f;--pip-text:#f5f3fa;--pip-muted:#b3a9c6;--pip-line:#352c45}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Fonts,Tahoma,sans-serif;background:var(--pip-bg);color:var(--pip-text);direction:rtl}
.pip-player{display:grid;grid-template-rows:36px minmax(64px,1fr) auto;width:100%;height:100%}
.pip-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:8px;font-size:11px}
.pip-header>span{font-family:Arial,sans-serif;font-weight:700;color:var(--pip-accent)}
button{display:grid;place-items:center;padding:0;border:0;border-radius:9px;color:var(--pip-text);background:transparent;font:inherit;cursor:pointer}
button:hover{background:var(--pip-line)}
button:focus-visible,input:focus-visible{outline:2px solid var(--pip-accent);outline-offset:2px}
button:disabled{opacity:.35;cursor:not-allowed}
.pip-header button{min-height:28px;padding:0 7px;font-size:10px}
.pip-artwork{display:grid;min-height:0;overflow:hidden;margin:0 10px;border-radius:12px;background:var(--pip-line)}
.pip-artwork img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.pip-content{min-width:0;padding:12px 16px 10px;text-align:center}
.pip-title,.pip-artist{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pip-title{font-size:16px;line-height:1.6}
.pip-artist{margin-top:2px;color:var(--pip-muted);font-size:12px;line-height:1.6}
.pip-progress{display:block;width:100%;height:16px;margin:8px 0 0;accent-color:var(--pip-accent);direction:ltr;cursor:pointer}
.pip-times{display:flex;justify-content:space-between;color:var(--pip-muted);font-size:10px;direction:ltr}
.pip-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:6px;direction:ltr}
.pip-controls button{width:36px;height:36px}
.pip-controls svg{width:18px;height:18px;fill:currentColor}
.pip-controls .pip-toggle{position:relative;width:44px;height:44px;border-radius:50%;background:var(--pip-accent);color:#fff}
.pip-toggle svg{position:absolute;inset:0;margin:auto}
.pip-pause,.is-playing .pip-play{display:none}
.is-playing .pip-pause{display:block}
@media(max-height:260px){.pip-player{grid-template-columns:88px minmax(0,1fr);grid-template-rows:30px minmax(0,1fr);direction:ltr}.pip-header{grid-column:1/-1;direction:rtl}.pip-artwork{margin:0 0 10px 10px}.pip-content{align-self:center;padding:4px 12px 8px;direction:rtl}.pip-title{font-size:14px}.pip-controls{gap:16px;margin-top:2px}.pip-controls .pip-toggle{width:36px;height:36px}}