/* v257 · Hartly Stars — صفحهٔ رتبه‌بندی روشن با سه پالت اختصاصی */
.st257{
  --a:#FF9F1C; --b:#E8590C; --c:#FFD166; --ink:#4A1D06; --mut:#9A6B4F; --soft:#FFF4E2; --line:#FBE3C4; --bg1:#FFF8EE; --bg2:#FFFFFF;
  --o1:rgba(255,190,80,.55); --o2:rgba(255,120,150,.35); --o3:rgba(255,220,140,.6);
  position:fixed; inset:0; z-index:2147482000; display:flex; flex-direction:column; color:var(--ink); font-family:inherit;
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 60%); opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.9,.3,1.1) }
.st257.in{ opacity:1; transform:none }
.st257.out{ opacity:0; transform:translateY(14px) scale(.985) }
.st257 button{ font-family:inherit }
.st257.k-charm{ --a:#F0449A; --b:#9D2CF0; --c:#FFB3D9; --ink:#4A0D35; --mut:#9B5C84; --soft:#FFEFF7; --line:#F8D3E8; --bg1:#FFF2F8;
  --o1:rgba(255,120,190,.5); --o2:rgba(160,90,255,.35); --o3:rgba(255,190,225,.6) }
.st257.k-room{ --a:#0EA5B7; --b:#5B5BF0; --c:#8BE9F0; --ink:#0B2848; --mut:#58799A; --soft:#EAF9FC; --line:#CDEFF5; --bg1:#EEFBFE;
  --o1:rgba(40,200,220,.45); --o2:rgba(110,110,255,.32); --o3:rgba(150,235,245,.6) }

/* پس‌زمینهٔ شفق */
.bg257{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.bg257 i{ position:absolute; border-radius:50%; filter:blur(40px); animation:or257 14s ease-in-out infinite alternate }
.bg257 .o1{ width:70vw; height:70vw; max-width:420px; max-height:420px; top:-12%; inset-inline-start:-18%; background:var(--o1) }
.bg257 .o2{ width:60vw; height:60vw; max-width:360px; max-height:360px; top:6%; inset-inline-end:-22%; background:var(--o2); animation-duration:18s }
.bg257 .o3{ width:80vw; height:50vw; max-width:480px; top:38%; left:10%; background:var(--o3); opacity:.6; animation-duration:22s }
@keyframes or257{ to{ transform:translate(6%,8%) scale(1.08) } }

/* سربرگ */
.hd257{ position:relative; z-index:3; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 12px 8px; transition:background .2s, box-shadow .2s }
.st257.scd .hd257{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 10px 24px -18px rgba(0,0,0,.35) }
.ib257{ flex:none; width:40px; height:40px; border:0; border-radius:14px; display:grid; place-items:center; cursor:pointer; color:var(--ink);
  background:rgba(255,255,255,.85); box-shadow:0 6px 16px -10px rgba(0,0,0,.35), inset 0 0 0 1.5px var(--line) }
.ib257 svg{ width:22px; height:22px }
[dir=rtl] .ib257[data-x=back] svg{ transform:scaleX(-1) }
.tt257{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; justify-content:center }
.tt257 > div{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.tt257 b{ font-size:19px; font-weight:900; letter-spacing:.2px; direction:ltr; text-align:start;
  background:linear-gradient(100deg,var(--b),var(--a) 45%,#FF4D8D 70%,var(--b)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:tx257 6s linear infinite }
@keyframes tx257{ to{ background-position:220% 0 } }
.tt257 small{ font-size:10.5px; font-weight:800; color:var(--mut) }
.lg257{ width:38px; height:38px; flex:none; filter:drop-shadow(0 6px 10px rgba(232,89,12,.35)) }
.lg257 .st, .lg257 .cr{ transform-origin:24px 24px; animation:lg257 4s ease-in-out infinite }
@keyframes lg257{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(-6deg) scale(1.04) } }
.lg257 .sp, .rh257 svg .sp, .es257 .sp, .rk257i svg .sp{ animation:tw257 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.lg257 .sp.b, .rk257i svg .sp.b{ animation-delay:.7s } .lg257 .sp.c, .rk257i svg .sp.c{ animation-delay:1.3s }
@keyframes tw257{ 0%,100%{ opacity:.25; transform:scale(.6) } 50%{ opacity:1; transform:scale(1.15) } }

/* بدنه */
.sc257{ position:relative; z-index:1; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 12px calc(120px + env(safe-area-inset-bottom)); scrollbar-width:none }
.sc257::-webkit-scrollbar{ display:none }
.sc257 > *{ max-width:640px; margin-inline:auto }

/* سه میدان */
.kd257{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px }
.kd257 button{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px 9px; border:0; border-radius:18px; cursor:pointer; color:var(--mut);
  background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1.5px var(--line); transition:transform .2s, box-shadow .25s, color .2s, background .25s; overflow:hidden }
.kd257 button:active{ transform:scale(.97) }
.ki257{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--a); transition:background .25s, color .25s }
.ki257 svg{ width:20px; height:20px }
.kd257 b{ font-size:13px; font-weight:900; color:var(--ink) }
.kd257 small{ font-size:9.5px; font-weight:700; line-height:1.3; text-align:center }
.kd257 button.on{ color:rgba(255,255,255,.9); background:linear-gradient(140deg,var(--a),var(--b)); box-shadow:0 12px 24px -12px var(--b), inset 0 1px 0 rgba(255,255,255,.4) }
.kd257 button.on b{ color:#fff }
.kd257 button.on .ki257{ background:rgba(255,255,255,.25); color:#fff }
.kd257 button.on::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:sh256 3.4s ease-in-out infinite }

/* دوره + شمارش معکوس */
.pr257{ display:flex; align-items:center; gap:8px; margin-top:10px }
.pd257{ flex:1; min-width:0; display:flex; gap:2px; padding:3px; border-radius:14px; background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1.5px var(--line) }
.pd257 button{ flex:1; height:32px; border:0; border-radius:11px; background:none; cursor:pointer; font-size:12px; font-weight:800; color:var(--mut); transition:background .2s, color .2s }
.pd257 button.on{ color:#fff; background:linear-gradient(140deg,var(--a),var(--b)); box-shadow:0 6px 12px -8px var(--b) }
.cd257{ flex:none; position:relative; display:flex; align-items:center; gap:5px; height:38px; padding:0 10px 0 5px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink) }
[dir=rtl] .cd257{ padding:0 5px 0 10px }
.cd257 svg:first-child{ width:28px; height:28px; transform:rotate(-90deg) }
.cd257 svg:first-child circle{ fill:none; stroke-width:3.4 }
.cd257 .t{ stroke:var(--soft) } .cd257 .f{ stroke:var(--a); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s linear }
.cd257 > svg:nth-child(2){ position:absolute; width:14px; height:14px; inset-inline-start:12px; color:var(--b) }
.cd257 bdi{ font-size:12.5px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.3px }
.cd257.hot bdi{ color:#E11D48; animation:bl256 1s ease-in-out infinite }

/* صحنهٔ سکو */
.sg257{ position:relative; margin-top:12px; padding:30px 4px 0; border-radius:26px; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,.35) 70%), linear-gradient(180deg,var(--soft),rgba(255,255,255,.4));
  box-shadow:0 20px 40px -28px var(--b), inset 0 0 0 1.5px rgba(255,255,255,.9) }
.ry257{ position:absolute; left:50%; top:-40%; width:160%; aspect-ratio:1; transform:translateX(-50%); pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg, var(--c) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 72%); mask:radial-gradient(closest-side,#000 10%,transparent 72%); animation:ry257 40s linear infinite }
@keyframes ry257{ to{ transform:translateX(-50%) rotate(360deg) } }
.po257{ position:relative; display:grid; grid-template-columns:1fr 1.18fr 1fr; align-items:end; gap:6px }
.pp257{ display:flex; flex-direction:column; align-items:center; min-width:0; cursor:pointer; animation:pu257 .55s cubic-bezier(.2,.9,.3,1.25) both }
.pp257.r1{ animation-delay:.12s } .pp257.r3{ animation-delay:.06s } .pp257.q{ animation:none }
@keyframes pu257{ from{ opacity:0; transform:translateY(26px) scale(.9) } }
.pa257{ position:relative; width:74px; height:74px; margin-bottom:12px }
.pp257.r1 .pa257{ width:96px; height:96px; margin-top:22px }
.pa257 .av257{ position:absolute; inset:0; border-radius:50%; padding:3px; background:conic-gradient(from 210deg,#E2DCF7,#FFFFFF,#A79BD8,#FFFFFF,#E2DCF7); box-shadow:0 10px 22px -10px rgba(80,60,160,.55) }
.pp257.r1 .av257{ padding:4px; background:conic-gradient(from 200deg,#FFE58A,#FFF7D1,#FFB020,#E8590C,#FFE58A); box-shadow:0 14px 30px -10px rgba(232,89,12,.65) }
.pp257.r3 .av257{ background:conic-gradient(from 210deg,#FFD1BD,#FFF1EA,#F08A65,#B9472A,#FFD1BD); box-shadow:0 10px 22px -10px rgba(185,71,42,.55) }
.pa257 .av257 img, .pa257 .av257 em{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; border:2.5px solid #fff; background:var(--soft); font-style:normal; font-weight:900; font-size:26px; color:var(--b) }
.pa257 .av257.q em{ color:var(--mut); opacity:.6 }
.hl257{ position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(closest-side,var(--o3),transparent); animation:hl257 2.6s ease-in-out infinite }
.pp257.r1 .hl257{ inset:-16px; background:radial-gradient(closest-side,rgba(255,200,60,.75),transparent) }
@keyframes hl257{ 50%{ transform:scale(1.08); opacity:.7 } }
.cw257{ position:absolute; z-index:2; left:50%; top:-30px; width:58px; transform:translateX(-50%) rotate(-8deg); filter:drop-shadow(0 6px 8px rgba(194,65,12,.4)); animation:cw257 3s ease-in-out infinite }
@keyframes cw257{ 50%{ transform:translateX(-50%) translateY(-4px) rotate(-3deg) } }
.md257{ position:absolute; z-index:2; left:50%; bottom:-11px; width:26px; height:26px; transform:translateX(-50%); filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)) }
.pp257.r1 .md257{ width:30px; height:30px; bottom:-13px }
.lv257{ position:absolute; z-index:3; top:-4px; inset-inline-end:-6px; display:flex; align-items:center; gap:3px; padding:2px 6px; border-radius:99px; font-size:8.5px; font-weight:900; letter-spacing:.4px; color:#fff;
  background:linear-gradient(90deg,#FF2D6B,#FF6A3D); box-shadow:0 4px 8px -4px #FF2D6B, 0 0 0 2px #fff }
.lv257 i{ width:5px; height:5px; border-radius:50%; background:#fff; animation:bl256 1s infinite }
.pn257{ max-width:100%; padding:0 2px; font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink) }
.pp257.r1 .pn257{ font-size:14px }
.pm257{ display:flex; align-items:center; gap:4px; min-height:16px; margin-top:1px }
.pm257 em{ font-style:normal; font-size:12px }
.pv257{ display:flex; align-items:center; gap:3px; margin:4px 0 8px; padding:3px 9px 3px 4px; border-radius:99px; background:#fff; box-shadow:0 6px 14px -10px var(--b), inset 0 0 0 1.5px var(--line) }
[dir=rtl] .pv257{ padding:3px 4px 3px 9px }
.pv257 b{ font-size:12.5px; font-weight:900; font-variant-numeric:tabular-nums; direction:ltr }
.pp257.r1 .pv257{ background:linear-gradient(140deg,var(--a),var(--b)); color:#fff; box-shadow:0 10px 18px -10px var(--b) }
.cn257{ width:16px; height:16px; flex:none }
.bs257{ position:relative; width:100%; height:58px; border-radius:16px 16px 0 0; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#EEE9FB); box-shadow:inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(167,155,216,.35) }
.pp257.r1 .bs257{ height:84px; background:linear-gradient(180deg,#FFF6D6,#FFD87A 70%,#FFC14D); box-shadow:inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(232,89,12,.3) }
.pp257.r3 .bs257{ height:44px; background:linear-gradient(180deg,#FFFFFF,#FFE6DA); box-shadow:inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(185,71,42,.25) }
.bs257 span{ font-size:30px; font-weight:900; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(124,111,176,.55); text-shadow:0 2px 0 rgba(255,255,255,.8) }
.pp257.r1 .bs257 span{ font-size:42px; -webkit-text-stroke:1.8px rgba(194,65,12,.55) }
.pp257.r3 .bs257 span{ font-size:24px; -webkit-text-stroke:1.5px rgba(185,71,42,.5) }
.bs257::after{ content:""; position:absolute; top:0; bottom:0; width:35%; left:-50%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation:sh256 4.5s ease-in-out infinite }
.pp257.ld .pa257 .av257{ animation:ldP145 1s ease-in-out infinite alternate }

/* حرکت رتبه */
.mv257{ display:inline-flex; align-items:center; gap:1px; height:16px; padding:0 5px; border-radius:99px; font-size:9.5px; font-weight:900; line-height:1; direction:ltr; vertical-align:middle }
.mv257 svg{ width:9px; height:9px }
.mv257.up{ color:#047857; background:#D1FAE5 } .mv257.dn{ color:#BE123C; background:#FFE4E6 } .mv257.eq{ color:var(--mut); background:rgba(0,0,0,.05) }
.mv257.nw{ color:#fff; background:linear-gradient(90deg,#7C5CFF,#FF4D8D); letter-spacing:.3px }

/* آمار + قهرمانان */
.ss257{ margin-top:12px; display:flex; flex-direction:column; gap:8px }
.sx257{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.sx257:empty{ display:none }
.sb257{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:16px; background:rgba(255,255,255,.85); box-shadow:inset 0 0 0 1.5px var(--line) }
.si257{ flex:none; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#fff }
.si257 svg{ width:20px; height:20px }
.si257.g{ background:linear-gradient(140deg,var(--a),var(--b)) } .si257.u{ background:linear-gradient(140deg,#7C5CFF,#22C1C3) }
.sb257 div{ min-width:0; display:flex; flex-direction:column }
.sb257 small{ font-size:10.5px; font-weight:800; color:var(--mut) }
.sb257 b{ display:flex; align-items:center; gap:4px; font-size:15px; font-weight:900; font-variant-numeric:tabular-nums }
.ch257{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:16px;
  background:linear-gradient(100deg,rgba(255,255,255,.9),var(--soft)); box-shadow:inset 0 0 0 1.5px var(--line) }
.cl257{ display:flex; align-items:center; gap:6px; color:var(--b) }
.cl257 svg{ width:22px; height:22px }
.cl257 b{ font-size:12px; font-weight:900; color:var(--ink) }
.cm257{ display:flex; gap:6px }
.cc257{ position:relative; width:36px; height:36px; cursor:pointer }
.cc257 .av257{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; border:2px solid #fff; box-shadow:0 4px 10px -4px rgba(0,0,0,.35); background:var(--soft) }
.cc257 .av257 img{ width:100%; height:100%; object-fit:cover } .cc257 .av257 em{ font-style:normal; font-weight:900; color:var(--b) }
.cc257 .md257{ width:16px; height:16px; bottom:-6px }

/* فهرست */
.ls257{ margin-top:12px; display:flex; flex-direction:column; gap:7px }
.rw257{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:18px; cursor:pointer; background:rgba(255,255,255,.9);
  box-shadow:0 8px 18px -16px rgba(0,0,0,.4), inset 0 0 0 1.5px var(--line); animation:ri257 .4s cubic-bezier(.2,.9,.3,1.1) both; animation-delay:var(--d,0ms); transition:transform .15s }
.rw257:active{ transform:scale(.985) }
@keyframes ri257{ from{ opacity:0; transform:translateY(10px) } }
.rw257.me{ background:linear-gradient(100deg,#fff,var(--soft)); box-shadow:0 0 0 2px var(--a), 0 10px 20px -14px var(--b) }
.rn257{ flex:none; width:34px; display:flex; flex-direction:column; align-items:center; gap:2px }
.rn257 b{ font-size:15px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums }
.ra257{ position:relative; flex:none; width:44px; height:44px }
.ra257 .av257{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--soft); border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line) }
.ra257.on .av257{ box-shadow:0 0 0 2px #FF2D6B }
.ra257 .av257 img{ width:100%; height:100%; object-fit:cover } .ra257 .av257 em{ font-style:normal; font-weight:900; font-size:17px; color:var(--b) }
.ra257 .lv257{ top:auto; bottom:-5px; inset-inline-end:auto; left:50%; transform:translateX(-50%); font-size:7.5px; padding:1px 5px }
.rt257{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.rt257 > b{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rt257 > b em{ font-style:normal }
.rc257{ display:flex; gap:4px; min-height:0; overflow:hidden }
.rc257:empty{ display:none }
.rb257{ display:block; height:5px; border-radius:99px; background:var(--soft); overflow:hidden }
.rb257 i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--c),var(--a),var(--b)); animation:rb257 .9s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--d,0ms) + 150ms) }
[dir=rtl] .rb257 i{ margin-inline-start:0 }
@keyframes rb257{ from{ width:0 } }
.rv257{ flex:none; display:flex; align-items:center; gap:3px }
.rv257 b{ font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; direction:ltr }
.rw257.sk{ height:62px; cursor:default; animation:ldP145 1s ease-in-out infinite alternate }
.rw257.sk i{ display:none }
.ft257{ margin:6px 0 0; text-align:center; font-size:11px; font-weight:700; color:var(--mut) }
.em257{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 12px; text-align:center }
.es257{ width:72px; height:72px; filter:drop-shadow(0 10px 14px rgba(232,89,12,.3)); animation:fl145 3s ease-in-out infinite }
.em257 b{ font-size:14.5px; font-weight:900 } .em257 small{ font-size:12px; font-weight:700; color:var(--mut) }

/* نوار من */
.me257{ position:absolute; z-index:4; left:0; right:0; bottom:0; padding:0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events:none }
.mb257{ pointer-events:auto; max-width:640px; margin:0 auto; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:22px;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 36px -16px rgba(0,0,0,.35), inset 0 0 0 1.5px var(--line); animation:pu257 .45s .2s cubic-bezier(.2,.9,.3,1.2) both }
.mr257{ flex:none; min-width:34px; height:34px; padding:0 6px; border-radius:12px; display:grid; place-items:center; font-size:13px; font-weight:900; color:var(--ink); background:var(--soft) }
.mr257.t1{ color:#fff; background:linear-gradient(140deg,#FFC233,#E8590C) } .mr257.t2{ color:#fff; background:linear-gradient(140deg,#B9AEE8,#6F62A8) } .mr257.t3{ color:#fff; background:linear-gradient(140deg,#F5A37E,#B9472A) }
.mb257 > .av257{ flex:none; width:38px; height:38px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--soft); border:2px solid #fff; box-shadow:0 0 0 1.5px var(--a) }
.mb257 > .av257 img{ width:100%; height:100%; object-fit:cover } .mb257 > .av257 em{ font-style:normal; font-weight:900; color:var(--b) }
.mt257{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.mt257 > b{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mg257{ display:flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mg257 b{ color:var(--b); font-weight:900 }
.mg257 .cn257{ width:13px; height:13px }
.mg257.win{ color:#B45309 }
.ma257{ flex:none; display:flex; align-items:center; gap:3px }
.ma257 b{ font-size:12.5px; font-weight:900; direction:ltr }
.ct257{ flex:none; display:flex; align-items:center; gap:4px; height:36px; padding:0 11px; border:0; border-radius:13px; cursor:pointer; color:#fff; font-size:12px; font-weight:900; white-space:nowrap;
  background:linear-gradient(140deg,var(--a),var(--b)); box-shadow:0 8px 16px -8px var(--b) }
.ct257 svg{ width:16px; height:16px }
@media (max-width:370px){ .ma257{ display:none } .ct257{ padding:0 9px } }

/* قوانین */
.ru257{ position:absolute; z-index:6; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(30,15,40,.35); animation:fd257 .2s ease both }
@keyframes fd257{ from{ opacity:0 } }
.rc2257{ position:relative; width:100%; max-width:520px; max-height:82vh; overflow-y:auto; padding:18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fff; animation:su257 .3s cubic-bezier(.2,.9,.3,1.1) both }
@keyframes su257{ from{ transform:translateY(40px); opacity:0 } }
.gr257{ display:block; width:42px; height:5px; margin:0 auto 12px; border-radius:99px; background:var(--line) }
.rh257{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px }
.rh257 svg{ width:36px; height:36px }
.rh257 b{ font-size:16px; font-weight:900 }
.rl257{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--soft) }
.rl257 > span{ flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:var(--b); background:var(--soft) }
.rl257 > span svg{ width:18px; height:18px }
.rl257 div{ display:flex; flex-direction:column; gap:2px } .rl257 b{ font-size:13px; font-weight:900 } .rl257 small{ font-size:12px; font-weight:600; line-height:1.8; color:var(--mut) }
.rc2257 p{ margin:12px 0; font-size:11.5px; font-weight:700; line-height:1.9; color:var(--mut) }
.rc2257 > button{ width:100%; height:46px; border:0; border-radius:15px; cursor:pointer; color:#fff; font-size:14px; font-weight:900; background:linear-gradient(140deg,var(--a),var(--b)) }

@media (prefers-reduced-motion:reduce){ .st257 *{ animation:none !important; transition:none !important } }

/* ═══ دکمهٔ داک صفحهٔ لایو: «ستاره‌ها» با نشان تازه ═══ */
.rk256.s257{ color:#7A2E0E; background:linear-gradient(150deg,#FFF9EC,#FFE7C2 55%,#FFD3E6); box-shadow:0 6px 16px -8px rgba(232,89,12,.55), inset 0 0 0 1.5px rgba(255,166,77,.55) }
.rk257i{ width:32px; height:32px; display:grid; place-items:center }
.rk257i svg{ width:32px; height:32px; filter:drop-shadow(0 3px 5px rgba(232,89,12,.4)) }
.rk257i svg .st, .rk257i svg .cr{ transform-origin:24px 24px; animation:lg257 4s ease-in-out infinite }
.rk256.s257 b{ font-size:12.5px; background:linear-gradient(90deg,#C2410C,#BE185D); -webkit-background-clip:text; background-clip:text; color:transparent }
.pv257.no{ visibility:hidden }
.ls257 .em257{ padding:14px 12px 4px } .ls257 .es257{ width:56px; height:56px }

/* ═══ v258 · پالت برند Hartly (صورتی ← بنفش، زمینهٔ یاس و مروارید) برای هر سه میدان ═══
   طلا فقط برای معنا می‌ماند: تاج، مدال‌ها و سکه. */
.st257{ --a:#FF3D7F; --b:#8B5CF6; --c:#F5C2FF; --ink:#2E1065; --mut:#7C6A9E; --soft:#F5EEFF; --line:#EADDFB; --bg1:#F7F2FF; --bg2:#FFFFFF;
  --o1:rgba(255,61,127,.32); --o2:rgba(139,92,246,.38); --o3:rgba(221,200,255,.65) }
.st257.k-charm{ --a:#F472B6; --b:#C026D3; --c:#FBCFE8; --ink:#3B0A45; --mut:#8E5F99; --soft:#FCEFFA; --line:#F3D6F0; --bg1:#FDF4FB;
  --o1:rgba(244,114,182,.38); --o2:rgba(192,38,211,.3); --o3:rgba(251,207,232,.65) }
.st257.k-room{ --a:#A78BFA; --b:#6D28D9; --c:#DDD6FE; --ink:#2E1065; --mut:#6F65A0; --soft:#F1EDFF; --line:#E2DAFB; --bg1:#F4F1FF;
  --o1:rgba(167,139,250,.45); --o2:rgba(109,40,217,.28); --o3:rgba(221,214,254,.7) }
.tt257 b{ background:linear-gradient(100deg,#FF3D7F,#C026D3 45%,#8B5CF6 70%,#FF3D7F); background-size:220% 100%; -webkit-background-clip:text; background-clip:text }
.lg257{ filter:drop-shadow(0 6px 10px rgba(139,92,246,.35)) }
/* سکوی نفر اول به رنگ برند؛ تاج طلایی روی آن */
.pp257.r1 .bs257{ background:linear-gradient(180deg,#FFF0F7,#F9C9E4 55%,#D8B9FF); box-shadow:inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(139,92,246,.3) }
.pp257.r1 .bs257 span{ -webkit-text-stroke:1.8px rgba(139,92,246,.6) }
.pp257.r1 .hl257{ background:radial-gradient(closest-side,rgba(255,61,127,.35),rgba(139,92,246,.2),transparent) }
.si257.u{ background:linear-gradient(140deg,#C084FC,#6D28D9) }
.mv257.nw{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6) }
/* دکمهٔ «ستاره‌ها» در داک: یاس و مروارید */
.rk256.s257{ color:#5B21B6; background:linear-gradient(150deg,#FFFFFF,#F5EEFF 55%,#FCE7F3); box-shadow:0 6px 16px -8px rgba(139,92,246,.55), inset 0 0 0 1.5px #E4D6FF }
.rk256.s257 b{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent }
.rk257i svg{ filter:drop-shadow(0 3px 5px rgba(139,92,246,.4)) }

/* ═══ v258 · دسکتاپ/تبلت: صفحه به‌صورت قاب وسط (هم‌عرض اپ) با پس‌زمینهٔ تار، نه تمام‌عرض ═══ */
@media (min-width:600px){
  .st257{ left:0; right:0; margin:0 auto; max-width:480px; overflow:hidden;
    box-shadow:0 0 0 100vmax rgba(46,16,101,.28), 0 30px 80px -20px rgba(46,16,101,.45) }
  .st257 .sc257{ padding-inline:14px }
  .st257 .ru257{ align-items:flex-end }
  .st257 .rc2257{ max-width:none }
}
@media (min-width:600px) and (min-height:760px){
  .st257{ top:20px; bottom:20px; border-radius:28px }
  .hd257{ padding-top:12px }
  .me257{ padding-bottom:12px }
}