@font-face{font-family:Vazirmatn;src:url('/vazirmatn.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Vazirmatn;src:url('/vazirmatn-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
:root{--navy:#14243b;--soft:#f5f5f7;--muted:#687180;--line:#14243b17;--radius:22px;--shadow:0 12px 38px #14243b0e}
*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--navy);font:15px/1.85 Vazirmatn,Tahoma,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #6d9fd2;outline-offset:3px}
header{background:#ffffffde;border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}
.header-inner{max-width:1120px;margin:auto;padding:11px 24px;display:flex;justify-content:space-between;align-items:center}
.header-inner img{object-fit:contain}
.secondary,.primary{border:1px solid var(--line);border-radius:100px;background:#fff;padding:8px 17px;color:var(--navy)}
.primary{background:var(--navy);color:#fff}
main{max-width:1120px;padding:42px 24px 28px;margin:auto}
.heading,.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.heading{margin-bottom:24px}.branch,.date,.panel-head span{color:var(--muted);margin:0}
h1{font-size:clamp(29px,5vw,48px);margin:0;font-weight:800;line-height:1.35}h2{margin:0;font-size:21px}
.layout{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}
.player,.panel{border-radius:var(--radius);padding:26px;min-height:485px}
.player{background:linear-gradient(145deg,#213b57,#14243b 62%);color:white;text-align:center;display:grid;justify-items:center;align-content:center;gap:12px}
.mode{display:flex;align-items:center;gap:8px;padding:4px 14px;border-radius:100px;background:#ffffff15;font-size:13px}
.dot{width:7px;height:7px;background:#a5c7e9;border-radius:50%}
.cover{padding:9px;margin:6px 0}.record{width:155px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#13253a 0px,#13253a 4px,#2c4562 6px,#13253a 7px);box-shadow:0 14px 42px #080e1b88,inset 0 0 20px #b7d4ff36;border:1px solid #799ac267}
.record div{width:58px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#172c45 0 6%,#8faed0 8%,#dbe6f2 10% 43%,#b9cee4 45%);border:1px solid #8ba6c4}
.reason{margin:0;color:#d5e0ed;font-size:13px;min-height:24px}
.transport,.volume{display:flex;align-items:center;justify-content:center;gap:12px}.round,.play{border:0;border-radius:100px;color:var(--navy);background:#fff;height:43px;padding:0 18px}.round{background:#ffffff19;color:#fff;font-size:25px;width:43px;padding:0}.volume input{accent-color:#b8cce1;width:130px}.volume{font-size:13px;color:#d5e0ed;margin-top:5px}
.panel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:17px 0;background:var(--soft);border-radius:100px;padding:4px}
.segmented button{border:0;border-radius:100px;background:transparent;color:var(--muted);padding:7px 9px}
.segmented button[aria-pressed=true]{background:var(--navy);color:#fff}
#queue{margin:0;padding:0;list-style:none;max-height:310px;overflow:auto}
#queue li{border-bottom:1px solid var(--line);padding:8px 10px;display:flex;gap:12px;align-items:center;overflow-wrap:anywhere}
#queue li[aria-current=true]{background:#eef3f8;border-radius:10px;font-weight:700}#queue small,.empty,.notice{color:var(--muted)}.empty{margin:24px 0;text-align:center}
@media(max-width:720px){main{padding:26px 15px}.layout{grid-template-columns:1fr}.player{min-height:400px}.panel{min-height:265px}.heading{align-items:end}.date{font-size:12px}.header-inner{padding-inline:16px}}
[hidden]{display:none!important}