@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Black.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --bg:#070605; --cream:#f7f0e4; --muted:#9a9086;
  --chili:#c45c48; --gold:#e4c48a; --line:rgba(255,255,255,.1);
  --t:max(12px,env(safe-area-inset-top));
  --dock:92px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);font-family:"Vazirmatn",system-ui,sans-serif}
body{overflow:hidden;min-height:100dvh;background:#070605}
button,input{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
.nosb{scrollbar-width:none;-ms-overflow-style:none}
.nosb::-webkit-scrollbar{width:0;height:0;display:none}

.app{
  width:min(430px,100%); height:100dvh; margin:0 auto;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:var(--t) 16px var(--dock);
}
.app.hidden{visibility:hidden;pointer-events:none}

.topbar{display:flex;align-items:center;gap:8px;min-height:40px;flex:none;margin-bottom:8px}
.icon{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  display:grid;place-items:center; cursor:pointer; flex:none;
  padding:0; color:#eee;
}
.icon[disabled]{opacity:.25;pointer-events:none}
.brand{flex:1;text-align:center;font-size:12px;font-weight:700;color:#c4bbb0}
.progress{display:flex;gap:5px;direction:ltr;margin-bottom:10px;flex:none}
.progress i{height:3px;flex:1;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.progress i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--chili),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.progress i.on::after{transform:scaleX(1)}

.stage-wrap{flex:1;min-height:0;position:relative}
.stage{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0; transform:translateX(18px);
  pointer-events:none; visibility:hidden; z-index:0;
  transition:opacity .38s ease, transform .38s ease, visibility 0s .38s;
}
.stage.back{transform:translateX(-18px)}
.stage.active{
  opacity:1; transform:none; pointer-events:auto;
  visibility:visible; z-index:2;
  transition:opacity .38s ease, transform .38s ease, visibility 0s 0s;
}
.stage.fit{justify-content:flex-start}
.stage.media{justify-content:stretch}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:26px;
  padding:22px 18px 18px; max-height:100%; overflow:auto;
}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(28px,8.4vw,42px);line-height:1.35;font-weight:900;letter-spacing:-.035em;margin-bottom:18px}
h2{font-size:clamp(22px,6.4vw,32px);line-height:1.3;font-weight:800;margin-bottom:12px}
.btn{
  width:100%;border:0;border-radius:16px;padding:15px;
  font-weight:800;cursor:pointer;touch-action:manipulation;
}
.btn:active{transform:scale(.985)}
.primary{background:linear-gradient(135deg,#e8c48a,#c45c48);color:#1a120e}
.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#eee6dc}
.danger{background:rgba(196,92,72,.16);border:1px solid rgba(196,92,72,.35);color:#ffd4c8}
.btn[disabled]{filter:saturate(.4);opacity:.4;pointer-events:none}
.stack{display:grid;gap:8px;margin-top:12px;flex:none}

.chat-card{display:flex;flex-direction:column;height:100%;max-height:100%;overflow:hidden}
.chat-card h2{flex:none}
.chat-fade{
  flex:1; min-height:0; overflow:auto;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
  padding-top:10px;
}
.bubbles{display:grid;gap:8px;margin:2px 0 8px}
.bub{
  max-width:92%;padding:8px 11px;border-radius:16px;font-size:13px;line-height:1.7;white-space:pre-line;
  opacity:0; transform:translateY(-18px);
  animation:chatIn .7s cubic-bezier(.22,.8,.2,1) forwards;
}
@keyframes chatIn{to{opacity:1;transform:none}}
.bub.him{background:#1b1714;border:1px solid var(--line);justify-self:end}
.bub.her{background:#24181a;border:1px solid rgba(196,92,72,.22);justify-self:start}
.bub small{display:block;color:#8a8074;font-size:10px;margin-bottom:3px}
.bub .reply{
  display:block; margin:0 0 8px; padding:6px 8px;
  border-right:2px solid var(--gold); background:rgba(255,255,255,.04);
  color:#b8aea4; font-size:11.5px; line-height:1.6; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.clock-card{text-align:center}
.clock-kicker{color:var(--muted);font-size:13px;font-weight:700;margin-bottom:10px}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr;margin:4px 0 16px}
.tbox{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:12px 4px;text-align:center}
.tnum{font-weight:900;font-size:24px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tlbl{font-size:10px;color:var(--muted);margin-top:4px;direction:rtl}
.alts-kicker{font-size:12px;color:#c4bbb0;font-weight:700;margin:0 0 8px}
.alts{display:grid;gap:7px}
.alt{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  text-align:right;
}
.alt b{font-size:18px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;direction:ltr}
.alt i{font-style:normal;font-size:11px;color:var(--muted);font-weight:700}
.alt.live b{color:#e8c48a}

.qzone{
  position:relative; min-height:240px; margin-top:8px; border-radius:22px;
  background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.12);
  overflow:hidden; padding:14px;
}
.yes-btn,.no-btn{position:absolute;height:52px;border:0;border-radius:16px;font-weight:900;cursor:pointer}
.yes-btn{right:14px;left:14px;bottom:14px;background:linear-gradient(135deg,#e8c48a,#c45c48);color:#25121a}
.no-btn{
  top:16px;left:16px;width:108px;z-index:2;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:#ddd4da;
  transition:left .15s ease, top .15s ease, transform .2s, opacity .2s;
}
.toast{position:absolute;top:16px;right:16px;max-width:160px;font-size:12px;color:#a99fa7;line-height:1.6}

.vid-box{display:flex;flex-direction:column;align-items:center;text-align:center}
.round-wrap{position:relative;width:min(62vw,240px);aspect-ratio:1;margin:8px auto 12px}
.ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:3.2}
.ring .track{stroke:rgba(255,255,255,.12)}
.ring .prog{stroke:#e8c48a;stroke-linecap:round;stroke-dasharray:295.31;stroke-dashoffset:295.31}
.round{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#111;
  -webkit-mask-image:-webkit-radial-gradient(white,black); transform:translateZ(0);
}
.round video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.play{
  position:absolute;inset:0;border:0;background:rgba(10,9,8,.28);
  display:grid;place-items:center;cursor:pointer;border-radius:50%;
}
.play.hide{opacity:0;pointer-events:none}
.tri{width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
.sugar{
  font-size:clamp(22px,6.5vw,30px); font-weight:900; letter-spacing:-.03em; margin-top:6px;
  background:linear-gradient(90deg,#fff,var(--gold),var(--chili));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subs{min-height:2.6em;font-size:15px;line-height:1.85;font-weight:700;margin-top:8px}
.subs .w{opacity:.3}
.subs .w.on{opacity:1;color:#fff}
.quote{
  color:#e8dfd4; font-size:14.5px; line-height:2; font-weight:600;
  padding:12px 14px; margin:8px 0 14px; border-radius:16px;
  background:rgba(255,255,255,.04); border-right:3px solid var(--gold);
}
.close{font-size:16px;line-height:1.9;font-weight:800;margin-bottom:10px}

.dock{
  position:absolute; left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom));
  height:68px; z-index:40; direction:ltr;
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px; border-radius:999px;
  background:rgba(16,12,10,.55);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(28px) saturate(1.45);
  -webkit-backdrop-filter:blur(28px) saturate(1.45);
}
.dock button{
  width:58px;height:54px;border:0;background:transparent;color:#b7ada4;
  display:grid;place-items:center;border-radius:22px;cursor:pointer;
}
.dock button svg{width:25px;height:25px;display:block}
.dock button.on{color:#fff; background:rgba(255,255,255,.06)}
.dock .heart{
  width:66px;height:66px;margin-top:-26px;
  background:linear-gradient(160deg,#f3d6a6,#c45c48); color:#2a140f;
  box-shadow:0 14px 32px rgba(196,92,72,.48), 0 0 0 6px rgba(196,92,72,.12);
}
.dock .heart.on{transform:scale(1.05); color:#2a140f; background:linear-gradient(160deg,#f3d6a6,#c45c48)}
.dock .heart svg{width:28px;height:28px}

.media-stage{display:flex;flex-direction:column;height:100%;min-height:0}
.media-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px;flex:none}
.media-head h3{font-size:20px;font-weight:800}
.media-head small{display:block;color:var(--muted);font-size:11px;margin-top:3px;font-weight:600}
.gcount{
  flex:none; font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.gview{
  position:relative; flex:1; min-height:0; border-radius:28px; overflow:hidden;
  background:#110e0c; border:1px solid var(--line);
  touch-action:pan-y;
}
.gview img{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
.gempty{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;
  color:#c4bbb0;font-weight:700;line-height:1.9;cursor:pointer;
}
.gempty.show{display:grid}
.gempty b{display:block;font-size:42px;color:var(--gold)}
.garrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(10,8,7,.46);color:#fff;z-index:3;cursor:pointer;
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
}
.garrow.l{left:10px} .garrow.r{right:10px}
.gdel{
  position:absolute;top:12px;right:12px;z-index:3;
  border:0;border-radius:999px;padding:6px 10px;
  background:rgba(0,0,0,.45);color:#ffd4c8;font-size:12px;font-weight:700;
  backdrop-filter:blur(8px);
}
.strip{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;direction:ltr;flex:none}
.tile{
  width:62px;height:62px;flex:none;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1); background:#161210;
  position:relative; cursor:grab; touch-action:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.tile img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.tile.on{outline:2px solid var(--gold); outline-offset:2px}
.tile.add{display:grid;place-items:center;color:var(--gold);font-size:22px;border-style:dashed;font-weight:800;cursor:pointer}
.tile.dragging{opacity:.95;z-index:8;box-shadow:0 14px 28px rgba(0,0,0,.45); transform:scale(1.06); cursor:grabbing}
.tile.flip{transition:transform .28s cubic-bezier(.2,.8,.2,1)}

.player{position:relative;overflow:hidden}
.pbg{
  position:absolute;inset:-40px;background-size:cover;background-position:center;
  filter:blur(46px) saturate(1.35); opacity:.38; transform:scale(1.18);
}
.player-inner{
  position:relative; z-index:1; flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.now{display:flex;flex-direction:column;align-items:center;flex:none}
.art{
  width:min(42vw,168px); aspect-ratio:1; border-radius:24px; overflow:hidden;
  margin:0 0 10px; background:#161210;
  box-shadow:0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.art img{width:100%;height:100%;object-fit:cover}
.art.go{animation:artpulse 2.8s ease-in-out infinite}
@keyframes artpulse{50%{transform:scale(1.02)}}
.now h3{font-size:20px;margin:0;text-align:center;font-weight:800}
.now > small{color:var(--muted);margin-top:3px}

.seek{
  position:relative; width:100%; height:28px; margin-top:12px;
  touch-action:none; cursor:pointer;
}
.seek i, .vol i{
  position:absolute; left:0; top:50%; height:6px; border-radius:99px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,#c45c48,#e8c48a);
  width:0; pointer-events:none;
}
.seek::before, .vol::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:6px;
  border-radius:99px; transform:translateY(-50%);
  background:rgba(255,255,255,.14);
}
.seek b{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(232,196,138,.2);
  left:0; pointer-events:none;
}
.times{display:flex;justify-content:space-between;width:100%;font-size:11px;color:#b8aea4;margin-top:2px;direction:ltr}
.ctrls{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 6px;direction:ltr}
.ctrls button{
  position:relative; border:0;background:transparent;color:#fff;cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
}
.ctrls .go{
  width:64px;height:64px;
  background:linear-gradient(160deg,#f0d2a0,#c45c48); color:#2a140f;
  box-shadow:0 12px 26px rgba(196,92,72,.36);
}
.ctrls .dim{color:#8f857c}
.ctrls .dim.on{color:var(--gold)}
.ctrls em{
  display:none; position:absolute; right:6px; bottom:4px;
  font-size:9px; font-style:normal; font-weight:900; color:var(--gold);
}
.ctrls .one em{display:block}
.vol{
  position:relative; height:22px; margin:0 18px 8px;
  touch-action:none; cursor:pointer;
}
.queue{flex:1;min-height:0;overflow:auto}
.qhead{font-size:11px;color:#8f857c;font-weight:700;margin:0 2px 8px}
.qrow{
  display:flex;align-items:center;gap:10px; direction:rtl;
  padding:8px;border-radius:16px;margin-bottom:6px;
  background:rgba(255,255,255,.04); border:1px solid transparent;
  touch-action:none; transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.qrow.on{border-color:rgba(232,196,138,.35);background:rgba(232,196,138,.1)}
.qrow.dragging{z-index:8; box-shadow:0 12px 28px rgba(0,0,0,.4); transform:scale(1.02)}
.qrow img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
.qrow .t{flex:1;min-width:0}
.qrow .t strong{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .t small{color:var(--muted);font-size:11px}
.handle{
  width:32px;height:40px;display:grid;place-items:center;color:#8a8074;
  cursor:grab; flex:none; letter-spacing:-2px; font-size:16px;
}
.qmore{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#c4bbb0;cursor:pointer}
.add-song{
  width:100%;border:1px dashed rgba(232,196,138,.35); background:rgba(232,196,138,.07);
  color:var(--gold); border-radius:16px; padding:12px; font-weight:800; cursor:pointer;
  margin-bottom:6px;
}

.sheet{position:fixed;inset:0;z-index:50;display:none;background:rgba(0,0,0,.55)}
.sheet.show{display:grid;place-items:end center}
.sheet .box{
  width:min(430px,100%); background:#161311; border:1px solid var(--line);
  border-radius:24px 24px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom));
}
.sheet h3{margin:0 0 10px;font-size:18px}
.field{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:14px;padding:12px 14px;margin:8px 0}
.sheet .preview{width:72px;height:72px;border-radius:20px;object-fit:cover;margin:0 auto 10px;background:#1b1714}
.pick{text-align:center;font-size:12px;color:var(--gold);cursor:pointer;margin-bottom:8px}

.upbar{
  position:absolute; left:16px; right:16px; top:calc(var(--t) + 52px);
  z-index:50; display:none;
}
.upbar.show{display:block}
.up-card{
  border-radius:18px; padding:12px 14px;
  background:rgba(20,16,14,.88); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 32px rgba(0,0,0,.4);
}
.up-card strong{display:block;font-size:13px}
.up-card span{display:block;color:#e8c48a;font-weight:800;font-size:12px;margin:2px 0 8px}
.up-track{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.up-track i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#c45c48,#e8c48a,#fff6e8);
  transition:width .12s linear;
}

.spark{position:fixed;z-index:40;pointer-events:none;font-size:16px;animation:fly 1.1s ease-out forwards}
@keyframes fly{
  0%{opacity:0;transform:translate(0,0) scale(.6) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.25) rotate(220deg)}
}
.toastbar{
  position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px); opacity:0; pointer-events:none;
  background:#2a211c; border:1px solid var(--line); color:#fff;
  padding:10px 14px; border-radius:14px; font-size:13px; z-index:60;
  transition:.25s ease;
}
.toastbar.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-height:740px){
  h1{font-size:26px} h2{font-size:22px}
  .round-wrap{width:min(50vw,196px)}
  .qzone{min-height:200px}
  .art{width:min(36vw,132px);border-radius:20px}
  .tnum{font-size:20px}
  .alt b{font-size:16px}
}