@font-face {
    font-family: "1";
    src: url("Vazir-Medium.ttf");
    font-display: swap;
}
*{font-family:"1",Vazirmatn,Tahoma,system-ui,sans-serif}
:root{--h1:#8b5cf6;--h2:#22d3ee;--h3:#f472b6;--pa:.5;--z:1;--bg:#0a0816}
[data-theme="1"]{--h1:#14b8a6;--h2:#38bdf8;--h3:#a3e635}
[data-theme="2"]{--h1:#ec4899;--h2:#f97316;--h3:#a855f7}
[data-theme="3"]{--h1:#3b82f6;--h2:#22d3ee;--h3:#8b5cf6}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:#f4f2ff;font-family:Vazirmatn,Tahoma,system-ui,sans-serif}
.bg{position:fixed;inset:0;background:radial-gradient(40% 40% at 20% 20%,var(--h1),transparent),radial-gradient(40% 40% at 80% 30%,var(--h2),transparent),radial-gradient(45% 45% at 50% 90%,var(--h3),transparent);opacity:.35;filter:blur(60px);background-size:200% 200%;animation:fl 18s ease-in-out infinite alternate}
body.cin .bg{opacity:0}
@keyframes fl{to{background-position:100% 100%;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.bg{animation:none}}
.pl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:transparent}
.pl:fullscreen{background:#000}
video{width:100%;height:100%;object-fit:contain;background:#000}
.brand{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-start:14px;font:600 12px system-ui;letter-spacing:.08em;opacity:.7;z-index:3;transition:opacity .3s}
.cue{position:absolute;left:5%;right:5%;bottom:calc(var(--sp,8) * 1%);text-align:center;pointer-events:none;z-index:2;transition:bottom .25s}
.cue span{display:inline-block;padding:.15em .6em;border-radius:8px;white-space:pre-wrap;line-height:1.7;font-size:calc(var(--ss,26) * 1px);color:var(--sc,#fff);background:rgba(var(--sb,0,0,0),var(--so,.6));text-shadow:0 1px 3px #000}
.pl.show .cue{bottom:calc(var(--sp,8) * 1% + 130px * var(--z))}
.st{position:absolute;z-index:6;display:none;max-width:min(92%,420px);padding:18px 22px;border-radius:18px;text-align:center;background:rgba(15,12,30,var(--pa));backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.15)}
.st.on{display:block}.st.err{border-color:var(--h3)}
.st .acts{margin-top:12px}
.big{position:absolute;z-index:5;width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:linear-gradient(135deg,var(--h1),var(--h2));color:#fff;font-size:34px;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.ctl{position:absolute;left:0;right:0;bottom:0;z-index:4;margin:0 auto 10px;width:min(980px,calc(100% - 16px));padding:calc(10px*var(--z));border-radius:20px;background:rgba(15,12,30,var(--pa));backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.14);transition:opacity .3s,transform .3s}
.pl:not(.show) .ctl,.pl:not(.show) .lk,.pl:not(.show) .brand{opacity:0;pointer-events:none}
.pl:not(.show){cursor:none}
.pl:not(.show) .ctl{transform:translateY(12px)}
.pl.lock .ctl{display:none}
.bar{display:flex;align-items:center;gap:10px;font:12px/1 system-ui;margin-bottom:6px}
.sk{position:relative;flex:1;height:calc(22px*var(--z));display:flex;align-items:center;cursor:pointer;touch-action:none}
.sk::before{content:"";position:absolute;left:0;right:0;height:5px;border-radius:5px;background:rgba(255,255,255,.18)}
.sk i{position:absolute;left:0;height:5px;border-radius:5px;width:0}
#bf{background:rgba(255,255,255,.3)}#pr{background:linear-gradient(90deg,var(--h1),var(--h2))}
#pr::after{content:"";position:absolute;right:-7px;top:-4px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--h2)}
#tip{position:absolute;bottom:26px;transform:translateX(-50%);padding:2px 8px;border-radius:8px;background:#000c;font:12px system-ui;display:none}
.sk:hover #tip,.sk.dr #tip{display:block}
.row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sp{flex:1}
button,select,input[type=text],input:not([type]),input[type=url]{font:inherit}
.ctl button{min-width:calc(38px*var(--z));height:calc(38px*var(--z));padding:0 8px;border:0;border-radius:12px;background:transparent;color:#fff;font-size:calc(17px*var(--z));cursor:pointer}
.ctl button:hover,.ctl button:focus-visible{background:rgba(255,255,255,.14);outline:0}
.ctl button.main{background:linear-gradient(135deg,var(--h1),var(--h2))}
.ctl button.on{color:var(--h2)}
#vol{width:70px;accent-color:var(--h2)}
.lk{position:absolute;z-index:5;top:calc(10px + env(safe-area-inset-top));inset-inline-end:14px;border:0;background:rgba(15,12,30,.5);border-radius:12px;width:40px;height:40px;cursor:pointer;transition:opacity .3s}
dialog{margin:auto;border:0;background:transparent;color:#fff;max-width:calc(100% - 20px);width:440px;max-height:92vh}
dialog::backdrop{background:rgba(5,3,15,.7);backdrop-filter:blur(6px)}
.box{padding:20px;border-radius:22px;background:rgba(25,20,48,.82);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(24px);display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:auto}
h2{font-size:18px}h3{font-size:13px;color:var(--h2);margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
label.ck{justify-content:flex-start}
.box input:not([type=checkbox]):not([type=range]):not([type=color]),.box select{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:7px 10px;min-width:0;max-width:60%}
#url{max-width:100%!important;width:100%}
select option{color:#000}
.box input[type=range]{accent-color:var(--h2);max-width:55%}
.acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.box button,.st button{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.box button.pri{background:linear-gradient(135deg,var(--h1),var(--h2));border:0}
.dl{display:flex;gap:8px;align-items:center}
.info{font-size:13px;opacity:.8}
@media(max-width:560px){#vol{display:none}.ctl{margin-bottom:6px}}
@media(max-height:420px){.ctl{padding:6px}.bar{margin-bottom:2px}}
.lk:hover,.lk:focus-visible{background:rgba(255,255,255,.2);outline:0}

.tb{
    position:absolute;
    z-index:5;
    top:calc(10px + env(safe-area-inset-top));
    inset-inline-end:12px;
    display:flex;
    gap:8px;
    align-items:center;
    transition:opacity .3s}



.tb .lk{position:static}
.pl:not(.show) .tb{opacity:0;pointer-events:none}
.pl.lock .chip{display:none}
.chip{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 6px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(15,12,30,var(--pa));backdrop-filter:blur(14px);color:#fff;font:600 13px Vazirmatn,Tahoma,sans-serif;cursor:pointer;transition:transform .2s,border-color .2s}
.chip svg{width:30px;height:30px;padding:6px;border-radius:50%;background:linear-gradient(135deg,var(--h1),var(--h2));transform:rotate(-8deg);box-shadow:0 3px 10px rgba(0,0,0,.45);transition:transform .25s}
.dn svg{background:linear-gradient(135deg,var(--h3),var(--h1))}
.chip:hover,.chip:focus-visible{transform:translateY(-2px);border-color:var(--h2);outline:0}
.chip:hover svg{transform:rotate(8deg) scale(1.1)}
@media(max-width:560px){.chip span{display:none}.chip{padding:0 6px}}
a.chip{text-decoration:none}
.xp{position:absolute;z-index:5;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(15,12,30,var(--pa));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);font:600 12px Vazirmatn,Tahoma,sans-serif;cursor:pointer;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}


/* Zeroein Player — refined, Apple-inspired visual layer (behavior unchanged) */
:root {
  --h1: #d9d9df;
  --h2: #ffffff;
  --h3: #a6a6ad;
  --pa: .58;
  --bg: #08090b;
  --glass: rgba(24, 25, 29, .68);
  --line: rgba(255,255,255,.14);
  --muted: rgba(255,255,255,.66);
}
[data-theme="1"] { --h1:#b8e8e0; --h2:#f4fffc; --h3:#8acfc4; }
[data-theme="2"] { --h1:#f1c7d8; --h2:#fff7fb; --h3:#d9a5bb; }
[data-theme="3"] { --h1:#c3d8ff; --h2:#f5f8ff; --h3:#9cbcff; }

html, body { color:#f5f5f7; }
.bg {
  opacity:.2;
  filter:blur(85px);
  background-size:180% 180%;
}
.pl { isolation:isolate; }
.brand {
  color:rgba(255,255,255,.78);
  letter-spacing:.025em;
  font-size:12px;
  text-shadow:0 1px 12px #000;
}
.ctl {
  width:min(1040px, calc(100% - 28px));
  margin-bottom:max(14px, env(safe-area-inset-bottom));
  padding:calc(14px*var(--z)) calc(18px*var(--z)) calc(12px*var(--z));
  border-radius:22px;
  background:rgba(23,24,28,var(--pa));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(32px) saturate(1.55);
  backdrop-filter:blur(32px) saturate(1.55);
}
.bar {
  gap:12px;
  margin-bottom:8px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.sk { height:calc(24px*var(--z)); }
.sk::before, .sk i { height:4px; }
#bf { background:rgba(255,255,255,.2); }
#pr { background:linear-gradient(90deg,#f7f7fa,#bfc1c8); }
#pr::after {
  right:-5px; top:-4px; width:12px; height:12px;
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.row { gap:6px; }
.ctl button {
  min-width:calc(38px*var(--z));
  height:calc(38px*var(--z));
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:calc(14px*var(--z));
  font-weight:500;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.ctl button svg {
  width:calc(19px*var(--z)); height:calc(19px*var(--z));
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.ctl button svg path:first-child { }
.ctl button.skip svg { fill:currentColor; stroke:none; }
.ctl button#pp svg { width:calc(21px*var(--z)); height:calc(21px*var(--z)); fill:currentColor; stroke:none; }
.ctl button#pip .icon-fill { fill:currentColor; stroke:none; }
.ctl button:hover, .ctl button:focus-visible {
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.07);
  outline:none;
}
.ctl button:active { transform:scale(.94); }
.ctl button.main {
  width:calc(44px*var(--z)); height:calc(44px*var(--z));
  min-width:calc(44px*var(--z));
  border-radius:50%;
  color:#111216;
  background:#f5f5f7;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
}
.ctl button.main:hover { background:#fff; transform:scale(1.04); }
.ctl button.on { color:#fff; background:rgba(255,255,255,.12); }
#vol { width:76px; accent-color:#f5f5f7; }
.sp { min-width:8px; }
.tb {
  top:calc(14px + env(safe-area-inset-top));
  inset-inline-end:14px;
  gap:9px;
}
.chip {
  height:40px;
  padding:0 15px;
  gap:9px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(25,26,30,var(--pa));
  color:#f5f5f7;
  font:500 13px "1", Vazirmatn, Tahoma, sans-serif;
  box-shadow:0 5px 20px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  backdrop-filter:blur(24px) saturate(1.5);
}
.chip svg {
  width:24px; height:24px;
  padding:5px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
  transform:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.dn svg { background:rgba(255,255,255,.12); }
.chip:hover, .chip:focus-visible {
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.3);
  background:rgba(42,43,48,.84);
}
.chip:hover svg { transform:none; }
.lk {
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#f5f5f7;
  background:rgba(25,26,30,var(--pa));
  font-size:17px;
  box-shadow:0 5px 20px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
}
.xp {
  border-color:rgba(255,255,255,.15);
  background:rgba(25,26,30,calc(var(--pa) + .28));
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.big {
  width:76px; height:76px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(245,245,247,.92);
  color:#111216;
  font-size:28px;
  box-shadow:0 8px 40px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(12px); }
.box {
  padding:24px;
  gap:13px;
  border-radius:26px;
  background:rgba(29,30,34,.92);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 80px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(34px) saturate(1.35);
  backdrop-filter:blur(34px) saturate(1.35);
}
h2 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
h3 {
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:600;
  margin-top:10px;
  border-top-color:rgba(255,255,255,.1);
}
label { color:rgba(255,255,255,.88); font-size:13px; }
.box input:not([type=checkbox]):not([type=range]):not([type=color]),
.box select {
  background:rgba(255,255,255,.075);
  color:#f5f5f7;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  padding:9px 11px;
  outline:none;
}
.box input:focus, .box select:focus { border-color:rgba(255,255,255,.42); }
.box input[type=range] { accent-color:#f5f5f7; }
.box input[type=checkbox] { accent-color:#f5f5f7; }
.box button, .st button {
  padding:9px 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#f5f5f7;
  font-size:13px;
  transition:background .18s ease, transform .18s ease;
}
.box button:hover, .st button:hover { background:rgba(255,255,255,.14); }
.box button:active, .st button:active { transform:scale(.97); }
.box button.pri {
  color:#17181b;
  background:#f5f5f7;
  border:1px solid #f5f5f7;
  font-weight:600;
}
.info { color:rgba(255,255,255,.62); }
.st {
  background:rgba(27,28,32,calc(var(--pa) + .3));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 45px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(30px);
  backdrop-filter:blur(30px);
}
.st.err { border-color:rgba(255,150,150,.45); }
@media(max-width:560px) {
  .ctl { width:calc(100% - 16px); padding:10px 10px 9px; border-radius:18px; }
  .row { gap:2px; }
  .ctl button { min-width:calc(34px*var(--z)); height:calc(36px*var(--z)); padding:0 6px; border-radius:10px; }
  .ctl button.main { min-width:calc(40px*var(--z)); width:calc(40px*var(--z)); height:calc(40px*var(--z)); }
  .tb { gap:6px; inset-inline-end:9px; }
  .chip { height:38px; padding:0 8px; }
  .box { padding:19px; border-radius:22px; }
}
@media(max-height:420px) {
  .ctl { padding:7px 12px; }
  .ctl button { height:32px; }
  .ctl button.main { height:36px; width:36px; min-width:36px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ===== Lite / mobile layer (v2) ===== */
.bg{display:none}
.cue{transition:transform .2s}
.cue span,.pv span{unicode-bidi:plaintext}
.pl.show .cue{bottom:calc(var(--sp,8)*1%);transform:translateY(calc(-118px*var(--z,1)))}
.pl:not(.show) .ctl,.pl:not(.show) .tb,.pl:not(.show) .lk,.pl:not(.show) .brand{visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.pv{display:flex;justify-content:center;padding:14px 8px;border-radius:14px;background:linear-gradient(135deg,#3a3b40,#18191c)}
.pv span{display:inline-block;padding:.15em .6em;border-radius:8px;white-space:pre-wrap;line-height:1.7;font-size:calc(var(--ss,26)*1px);color:var(--sc,#fff);background:rgba(var(--sb,0,0,0),var(--so,.6));text-shadow:0 1px 3px #000}
.i-pause,.i-x,.i-o{display:none}
.pl.playing .i-play{display:none}.pl.playing .i-pause{display:inline}
.pl.muted .i-w{display:none}.pl.muted .i-x{display:inline}
.pl.lock .i-c{display:none}.pl.lock .i-o{display:inline}
.lk{display:inline-flex;align-items:center;justify-content:center;padding:0}
.lk svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx{position:absolute;top:50%;z-index:5;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:rgba(20,21,25,.72);color:#fff;font:600 17px system-ui;opacity:0;pointer-events:none}
.fx.go{animation:fxp .6s ease-out}
@keyframes fxp{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
details{display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
details:first-of-type{border-top:0;padding-top:0}
summary{display:flex;justify-content:space-between;align-items:center;min-height:38px;cursor:pointer;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"‹";font-size:18px;transition:transform .2s}
details[open]>summary::after{transform:rotate(-90deg)}
#dv{cursor:pointer;min-width:44px;text-align:center}
html[data-gl="0"] :is(.ctl,.chip,.lk,.xp,.st,.big,.box),html[data-gl="1"] :is(.chip,.lk,.xp,.st,.big,.box){-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-gl="0"] dialog::backdrop,html[data-gl="1"] dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.66)}
html[data-gl="1"] .ctl{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-gl="0"] .ctl,html[data-gl="1"] .ctl{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03)),rgba(20,21,25,.7)}
html[data-gl="0"] :is(.chip,.lk,.xp),html[data-gl="1"] :is(.chip,.lk,.xp){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(20,21,25,.72)}
html[data-gl="0"] .st,html[data-gl="1"] .st{background:rgba(24,25,29,.9)}
html[data-gl="0"] .box,html[data-gl="1"] .box{background:rgba(29,30,34,.97)}
@media(hover:none){
 .ctl button{min-width:calc(44px*var(--z));height:calc(44px*var(--z))}
 .ctl button.main{width:calc(52px*var(--z));height:calc(52px*var(--z));min-width:calc(52px*var(--z))}
 .sk{height:calc(34px*var(--z))}
 #pr::after{width:16px;height:16px;right:-8px;top:-6px}
 .sk.dr #pr::after{transform:scale(1.35)}
 .chip{height:44px}.lk{width:44px;height:44px}
 .ctl button:hover{background:transparent}
}
@media(max-width:560px){
 #mu,#pip{display:none}
 .cue span,.pv span{font-size:calc(var(--ss,26)*.75px)}
 dialog{margin:auto auto 0;width:100%;max-width:100%}
 .box{border-radius:24px 24px 0 0;max-height:84vh;max-height:84dvh;padding-bottom:max(19px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.fx.go{opacity:1}}

.box a.ab{padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#f5f5f7;text-decoration:none;font-size:13px}
.box a.ab:active{transform:scale(.97)}