/* ═══════════════════════════════════════════════════════════════════════════
 *  v435 · استوری خودم، تم روشن — شیت بینندگان، سه دکمهٔ پایین (بازدید/هایلایت/حذف) و منوی «⋯» (126)
 *  درخواست مالک: «بخش بازدید مثل گرافیک موزیک عالی بشه (الان دارک)، سه دکمه و منو قدرتمند و حرفه‌ای».
 *  همان زبان 358: کاغذ #FBFAFD، جوهر #1b1029، اقدام = گرادیان صورتی←بنفش، انتخاب = سرمه‌ای-بنفش؛ پشت شیت پردهٔ روشن.
 *   • دکمه‌های پایین روی عکس: قرص سفید با تراشهٔ رنگی (مثل ابزارهای #sc426)؛ «بازدید» عکس سه بینندهٔ آخر را دارد (.on435).
 *   • شیت‌ها (#svv109 بینندگان، #svm109 منو، #hlp109 افزودن به هایلایت، #cf109 تأیید): کاغذ روشن، کاشی‌های رنگی.
 *  شیت‌ها در 126 هنوز کلاس dark دارند؛ این‌جا با id رو می‌شوند. بی @keyframes تازه، بی :has، بی backdrop-filter تازه.
 * ═══════════════════════════════════════════════════════════════════════════ */

#sv109, #svv109, #svm109, #hlp109, #cf109{
  --ink:#1b1029; --ink2:#3E3553; --mute:#6B6480; --faint:#8A82A0;
  --paper:#FBFAFD; --fill:#F1EEF5; --fill2:#E6E1EE; --line:#ECE8F2;
  --veil:rgba(243,241,248,.95);
  --acc:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%);
  --acc-shd:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(70,10,90,.24), 0 10px 22px -10px rgba(171,48,178,.75);
  --sel:linear-gradient(135deg,#1F1433 0%,#4C1D95 100%);
  --gold:linear-gradient(135deg,#FBBF24 0%,#F97316 100%);
  --rose:linear-gradient(135deg,#F43F5E 0%,#BE123C 100%);
  --rose-shd:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(120,10,40,.25), 0 10px 22px -10px rgba(225,29,72,.75);
}

/* ═══════════════ ۱) سه دکمهٔ پایین استوری خودم (و «ویرایش هایلایت») ═══════════════ */
#sv109 .sv109-fb.views, #sv109 .sv109-fb.hl, #sv109 .sv109-fb.del, #sv109 .sv109-fb.hle{
  position:relative; flex:0 1 auto; min-width:0; height:44px; padding:0 5px; padding-inline-end:15px; gap:8px;
  border:0; border-radius:99px; background:#fff; color:var(--ink); font-size:13.5px; font-weight:900; white-space:nowrap;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent; transition:transform .12s;
}
#sv109 .sv109-fb.views > svg, #sv109 .sv109-fb.hl > svg, #sv109 .sv109-fb.del > svg, #sv109 .sv109-fb.hle > svg{
  box-sizing:border-box; flex:0 0 auto; width:34px; height:34px; padding:8px; border-radius:50%; color:#fff;
  background:var(--acc); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px -5px rgba(171,48,178,.8);
}
#sv109 .sv109-fb.hl > svg{ background:var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px -5px rgba(234,88,12,.8) }
#sv109 .sv109-fb.del > svg{ background:var(--rose); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px -5px rgba(225,29,72,.8) }
#sv109 .sv109-fb.hl{ color:var(--ink) }
#sv109 .sv109-fb.del{ color:#BE123C }
#sv109 .sv109-fb.views > b{ font-size:14.5px; font-variant-numeric:tabular-nums }
#sv109 .sv109-fb.views > b:empty{ display:none }
#sv109 .sv109-fb.views span:last-child{ font-weight:800; color:var(--ink2) }
#sv109 .sv109-fb:active{ transform:scale(.96) }
/* عکس سه بینندهٔ آخر به‌جای تراشهٔ چشم */
#sv109 .fc435{ display:none }
#sv109 .sv109-fb.views.on435 > svg{ display:none }
#sv109 .sv109-fb.views.on435 .fc435{ display:flex; align-items:center }
#sv109 .fc435 i{
  position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  font-style:normal; background:var(--acc); box-shadow:0 0 0 2px #fff;
}
#sv109 .fc435 i + i{ margin-inline-start:-10px }
#sv109 .fc435 i b{ color:#fff; font-size:12px; font-weight:900 }
#sv109 .fc435 i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* جای تنگ — از پهنای خودِ نوار پایین (container query؛ قاب دسکتاپ 216 هم باریک است)، نه پهنای صفحه:
   ≤۳۹۹ (انگلیسی ≤۴۱۳): با عکس بینندگان واژهٔ «بازدید» پنهان (چهره‌ها و شمار بس است)؛ ≤۳۲۰ (انگلیسی ≤۳۳۵): هایلایت و حذف فقط تراشه.
   نام‌های پنهان برای صفحه‌خوان می‌ماند. مرورگر بی container query: همان پله‌ها با پهنای صفحه، و سه‌نقطه به‌جای بیرون‌زدن. */
#sv109 .sv109-foot{ container-type:inline-size }
#sv109 .sv109-fb.views > span:last-child, #sv109 .sv109-fb.hl > span, #sv109 .sv109-fb.del > span, #sv109 .sv109-fb.hle > span{ min-width:0; overflow:hidden; text-overflow:ellipsis }
@container (max-width:399px){
  #sv109 .sv109-foot > .sv109-fb{ gap:6px; padding-inline-end:12px; font-size:13px }
  #sv109 .sv109-fb.views.on435 > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@container (max-width:413px){
  [dir=ltr] #sv109 .sv109-fb.views.on435 > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@container (max-width:320px){
  #sv109 .sv109-foot > .sv109-fb.hl, #sv109 .sv109-foot > .sv109-fb.del{ padding:0 5px }
  #sv109 .sv109-fb.hl > span, #sv109 .sv109-fb.del > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@container (max-width:335px){
  [dir=ltr] #sv109 .sv109-foot > .sv109-fb.hl, [dir=ltr] #sv109 .sv109-foot > .sv109-fb.del{ padding:0 5px }
  [dir=ltr] #sv109 .sv109-fb.hl > span, [dir=ltr] #sv109 .sv109-fb.del > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@supports not (container-type:inline-size){
  @media (max-width:399px){
    #sv109 .sv109-fb.views.on435 > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  }
  @media (max-width:340px){
    #sv109 .sv109-fb.hl, #sv109 .sv109-fb.del{ padding:0 5px }
    #sv109 .sv109-fb.hl > span, #sv109 .sv109-fb.del > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  }
}

/* ═══════════════ ۲) قاب مشترک شیت‌ها ═══════════════ */
#svv109.sh109, #svm109.sh109, #hlp109.sh109, #cf109.sh109{ background:var(--veil) }
#svv109 .sh109-p, #svm109 .sh109-p, #hlp109 .sh109-p, #cf109 .sh109-p{
  color:var(--ink); border-radius:28px 28px 0 0; padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  background:radial-gradient(70% 34% at 50% 0, rgba(219,39,119,.08), transparent 72%),
             radial-gradient(60% 32% at 50% 12%, rgba(124,58,237,.08), transparent 72%), var(--paper);
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -8px 28px -12px rgba(27,16,41,.2);
}
#svv109 .sh109-grab, #svm109 .sh109-grab, #hlp109 .sh109-grab, #cf109 .sh109-grab{ width:36px; height:5px; background:#DAD5E2; margin:0 auto 16px }
#svv109 .sh109-t, #hlp109 .sh109-t{ gap:11px; margin:0 2px 16px; font-size:20px; font-weight:900; line-height:1.3; color:var(--ink) }
#svv109 .sh109-t svg, #hlp109 .sh109-t svg{
  box-sizing:border-box; flex:0 0 auto; width:36px; height:36px; padding:8px; border-radius:12px; color:#fff;
  background:var(--acc); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(171,48,178,.8);
}
#hlp109 .sh109-t svg{ background:var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -6px rgba(234,88,12,.8) }
#svv109 .sv109-spin, #hlp109 .sv109-spin{ border-color:#EDE7F3; border-top-color:#A21CAF }

/* ═══════════════ ۳) بینندگان (#svv109) ═══════════════ */
#svv109 .sh109-t em{
  display:inline-grid; place-items:center; min-width:30px; height:26px; padding:0 10px; border-radius:99px;
  background:var(--sel); color:#fff; font-size:13px; font-weight:900; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 12px -8px rgba(76,29,149,.85);
}
/* فقط فهرست اسکرول می‌خورد؛ عنوان و شمار بالای شیت می‌مانند */
#svv109 .sh109-p{ display:flex; flex-direction:column; overflow:hidden }
#svv109 .sh109-grab, #svv109 .sh109-t{ flex:0 0 auto }
#svv109 .sh109-list{ flex:0 1 auto; gap:2px; min-height:96px; margin:0 -8px; padding-bottom:4px; overflow-y:auto; overscroll-behavior:contain }
#svv109 .sh109-u{ gap:12px; padding:8px; border-radius:18px; color:var(--ink); transition:background-color .12s }
#svv109 .sh109-u:active{ background:var(--fill) }
#svv109 .sh109-u .a{ flex:0 0 48px; width:48px; height:48px; background:var(--acc); box-shadow:0 0 0 1px rgba(27,16,41,.06) }
#svv109 .sh109-u .a b{ font-size:17px }
#svv109 .sh109-u .n{ font-size:15px; font-weight:800; color:var(--ink) }
#svv109 .sh109-u small{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--mute); opacity:1 }
/* نام لاتین در رابط فارسی (و برعکس) از سرِ درست کوتاه شود */
#svv109 .sh109-u .n, #hlp109 .hl109-i small{ unicode-bidi:plaintext }
[dir=rtl] #svv109 .sh109-u .n{ text-align:right }
[dir=ltr] #svv109 .sh109-u .n{ text-align:left }
#svv109 .sh109-u:focus-visible{ outline-offset:-3px }
#svv109 .sh109-none{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 16px 24px; opacity:1;
  color:var(--mute); font-size:13.5px;
}
#svv109 .sh109-none svg{
  box-sizing:border-box; width:76px; height:76px; padding:22px; margin-bottom:10px; border-radius:26px; color:#A21CAF;
  background:linear-gradient(135deg,#FCE7F3 0%,#EDE9FE 100%); box-shadow:inset 0 0 0 1px rgba(162,28,175,.08), 0 16px 30px -18px rgba(124,58,237,.55);
}
#svv109 .sh109-none b{ font-size:17px; font-weight:900; color:var(--ink) }
#svv109 .sh109-none small{ max-width:260px; font-size:13px; font-weight:700; line-height:1.8; color:var(--mute) }

/* ═══════════════ ۴) منوی «⋯» (#svm109) ═══════════════ */
#svm109 .sh109-p{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) }
#svm109 .sh109-row{
  position:relative; gap:14px; min-height:62px; padding:10px; border-radius:18px; color:var(--ink);
  font-size:15px; font-weight:800; transition:background-color .12s, transform .12s;
}
#svm109 .sh109-row span{ flex:1; min-width:0 }
#svm109 .sh109-row > svg{
  box-sizing:border-box; flex:0 0 auto; width:42px; height:42px; padding:11px; border-radius:14px;
  color:#6D28D9; background:#F1EBFF;
}
#svm109 .sh109-row[data-a="hl"] > svg{ color:#B45309; background:#FFF3D6 }
#svm109 .sh109-row[data-a="new"] > svg{ padding:10px; color:#fff; background:var(--acc); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(171,48,178,.8) }
#svm109 .sh109-row.danger{ color:#BE123C }
#svm109 .sh109-row.danger > svg{ color:#E11D48; background:#FDEEF1 }
#svm109 .sh109-row:not(.danger)::after{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-inline-end:6px; border:solid var(--faint); border-width:2px 2px 0 0;
  border-radius:1px; transform:rotate(45deg);
}
[dir=rtl] #svm109 .sh109-row:not(.danger)::after{ transform:rotate(-135deg) }
#svm109 .sh109-row:not(.danger) + .danger{ margin-top:9px }
#svm109 .sh109-row:not(.danger) + .danger::before{
  content:""; position:absolute; top:-5px; left:10px; right:10px; height:1px; background:var(--line);
}
#svm109 .sh109-row:active{ background:var(--fill); transform:scale(.99) }
#svm109 .sh109-row.danger:active{ background:#FDEEF1 }

/* ═══════════════ ۵) افزودن به هایلایت (#hlp109) ═══════════════ */
#hlp109 .hlp109-g{ gap:16px 14px; padding:2px 2px 8px }
#hlp109 .hl109-i small{ color:var(--ink2); font-size:11.5px }
#hlp109 .hl109-i:not(.new) .hl109-o{ background:var(--acc) }
#hlp109 .hl109-c{ background:var(--fill); color:var(--faint) }
#hlp109 .hl109-c b{ color:var(--mute) }
#hlp109 .hl109-i.new .hl109-o{ border:2px dashed #D9CBEA }
#hlp109 .hl109-i.new .hl109-c{ background:#F6F0FC; color:#A21CAF }
#hlp109 .hl109-o{ transition:transform .12s }

/* ═══════════════ ۶) تأیید حذف (#cf109) ═══════════════ */
/* کلاس سراسری .cf ِ استودیو (246: ستونی، وسط‌چین) شیت تأیید را وسط صفحه با گوشه‌های پایینِ تیز می‌انداخت ← برگشت به شیت پایین */
#cf109.sh109{ flex-direction:row; align-items:flex-end; gap:0; text-align:start }
#cf109 .sh109-p{ padding:10px 20px calc(20px + env(safe-area-inset-bottom)) }
#cf109 .cf109-t{ margin:4px 0 8px; font-size:18px; font-weight:900; line-height:1.45; color:var(--ink) }
#cf109 .cf109-s{ margin:0 8px 20px; font-size:13.5px; font-weight:600; color:var(--mute) }
#cf109 .cf109-b button{ height:52px; padding:0 14px; border-radius:18px; font-size:15px; transition:transform .12s, background-color .12s }
#cf109 .cf109-b .no{ background:var(--fill); color:var(--ink) }
#cf109 .cf109-b .yes{ background:var(--acc); color:#fff; box-shadow:var(--acc-shd) }
#cf109 .cf109-b .yes.danger{ background:var(--rose); box-shadow:var(--rose-shd) }
#cf109 .cf109-b button:active{ transform:scale(.97) }

/* ═══════════════ ۷) صفحه‌کلید، ماوس، دسکتاپ، حرکت کم ═══════════════ */
#sv109 .sv109-fb.views:focus-visible, #sv109 .sv109-fb.hl:focus-visible, #sv109 .sv109-fb.del:focus-visible, #sv109 .sv109-fb.hle:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
#svv109 button:focus-visible, #svm109 button:focus-visible, #hlp109 button:focus-visible, #cf109 button:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px }
@media (hover:hover){
  #svv109 .sh109-u:hover, #svm109 .sh109-row:not(.danger):hover, #cf109 .cf109-b .no:hover{ background:var(--fill) }
  #svm109 .sh109-row.danger:hover{ background:#FDEEF1 }
  #cf109 .cf109-b .yes:hover{ filter:brightness(1.06) saturate(1.06) }
}
@media (min-width:600px){
  #svv109.sh109, #svm109.sh109, #hlp109.sh109, #cf109.sh109{ align-items:center; background:rgba(246,244,250,.96) }
  #svv109 .sh109-p, #svm109 .sh109-p, #hlp109 .sh109-p, #cf109 .sh109-p{
    max-width:420px; border-radius:28px; padding-bottom:20px; box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 30px 70px -24px rgba(27,16,41,.35);
  }
}
@media (prefers-reduced-motion:reduce){
  #sv109 .sv109-fb, #svv109 *, #svm109 *, #hlp109 *, #cf109 *{ transition:none !important }
}