/* components/detail.css — بخشی از سیستم سبک سایت عمومی پلاس */
.buybox{margin-block-start:clamp(-190px,-14vw,-120px);
  border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;
  background:var(--bg-elev);box-shadow:0 40px 90px -50px rgba(11,18,38,.75)}
.buybox .bb-media{position:relative;display:block;aspect-ratio:16/10}
.buybox .bb-media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.buybox .bb-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.buybox .bb-play span{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:50%;
  background:rgba(8,14,32,.6);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  transition:transform var(--dur-fast) var(--ease-out)}
.buybox .bb-media:hover .bb-play span{transform:scale(1.08)}
.buybox .bb-play svg{inline-size:20px;block-size:20px;color:#fff;margin-inline-start:3px}
.bb-body{padding:clamp(18px,2.2vw,24px)}
.bb-was{display:flex;align-items:center;gap:10px;margin-block-start:8px}
.bb-was .wasnum{font-size:14.5px;color:var(--fg-muted);
  /* خط روی عدد فارسی ریز خوانا نیست؛ خط نازک‌تر و کم‌رنگ‌تر روی متن درشت‌تر */
  text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklab,var(--fg-muted) 55%,transparent)}
.bb-off{font-family:var(--font-display);font-size:12px;font-weight:800;color:#fff;
  background:var(--teal-600);padding:4px 10px;border-radius:var(--chip-radius);margin-block-end:5px}
.tabs{position:sticky;inset-block-start:var(--nav-height);z-index:20;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin-block-end:clamp(26px,3.4vw,40px);padding-block:12px;
  background:var(--bg);border-block-end:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;font-family:var(--font-display);font-size:13.5px;font-weight:800;
  color:var(--fg-muted);text-decoration:none;padding:10px 18px;border-radius:var(--chip-radius);
  transition:color var(--dur-fast),background-color var(--dur-fast)}
.tabs a:hover{color:var(--fg);background:var(--paper-200)}
.tabs a.on{color:#fff;background:var(--teal-600)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
@media (max-width:1040px){
.buybox{margin-block-start:clamp(-150px,-16vw,-90px)}
}
@media (max-width:820px){
.tabs{inset-block-start:64px}
}
.goals{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px 26px}
.goals li{display:flex;align-items:flex-start;gap:13px;padding-block:9px}
.goals i{font-style:normal;flex:none;display:grid;place-items:center;
  inline-size:30px;block-size:30px;border-radius:10px;
  font-family:var(--font-display);font-size:11.5px;font-weight:900;
  color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 11%,transparent)}
.goals span{font-size:13.5px;line-height:1.95;color:var(--fg-muted)}
.run{display:flex;align-items:center;gap:12px;inline-size:100%;cursor:pointer;text-align:start;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line-strong);background:transparent;
  transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.run:hover{border-color:var(--accent)}
.run.on{border-color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 7%,transparent)}
.run.on .rdot{border-color:var(--teal-600);box-shadow:inset 0 0 0 3px var(--teal-600)}
.run.full{opacity:.62}
.bb-was.off{display:none}
.brochure{display:flex;align-items:center;gap:14px;margin-block-start:14px;text-decoration:none;
  padding:16px 18px;border-radius:var(--card-radius);border:1px solid var(--line);
  background:var(--surface);
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.brochure:hover{border-color:var(--teal-600);transform:translateY(-2px)}
.brochure .bi{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;
  border-radius:13px;color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 11%,transparent)}
.brochure .bi svg{inline-size:22px;block-size:22px}
.brochure .bt{min-inline-size:0}
.brochure .bt b{display:block;font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--fg)}
.brochure .bt span{display:block;font-size:11.5px;color:var(--fg-muted);margin-block-start:4px}
.brochure .bg{margin-inline-start:auto;flex:none;color:var(--fg-muted)}
.brochure .bg svg{inline-size:18px;block-size:18px}
.brochure:hover .bg{color:var(--teal-600)}
.orbit-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.otag{position:absolute;top:0;left:0;right:auto;white-space:nowrap;
  font-family:var(--font-display);font-size:11.5px;font-weight:800;color:#CBDAEC;
  padding:7px 13px;border-radius:var(--chip-radius);max-inline-size:190px;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line-strong);background:rgba(8,14,32,.68);backdrop-filter:blur(8px)}
.otag:empty{display:none}
.inst-grid{display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start}
.inst-photo{position:relative}
.inst-copy h3{font-family:var(--font-display);font-size:clamp(22px,2.8vw,30px);font-weight:900;color:#fff}
.inst-copy .role{font-size:13px;color:var(--accent-soft);margin-block:8px 16px}
.inst-copy .bio{font-size:14px;line-height:2.15;color:#B9C9E2;max-inline-size:56ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.inst-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px 34px;margin-block-start:26px}
.ic-h{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  color:#7E93B0;margin-block-end:11px}
.ic-l{list-style:none;display:flex;flex-direction:column;gap:9px}
.ic-l li{position:relative;padding-inline-start:16px;font-size:13px;line-height:1.9;color:#B9C9E2}
.ic-l li::before{content:"";position:absolute;top:11px;right:0;
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent);opacity:.8}
/* زمینه‌های کاری کارت مدرس: چیپ کنار هم، نه فهرست بلند */
.ic-chips{flex-direction:row;flex-wrap:wrap;gap:8px}
.ic-chips li{padding:6px 13px;font-size:12.5px;line-height:1.6;border-radius:var(--chip-radius);
  border:1px solid var(--line-strong);background:rgba(11,18,38,.5)}
.ic-chips li::before{content:none}
.inst-stats{display:flex;gap:14px;flex-wrap:wrap;margin-block-start:28px}
.inst-stats div{flex:1 1 120px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line-strong);background:rgba(11,18,38,.5);backdrop-filter:blur(8px);
  font-size:11.5px;color:#93A5C6}
.inst-stats b{display:block;font-family:var(--font-display);font-size:22px;font-weight:900;
  color:#fff;margin-block-end:4px}
.inst-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-block-start:26px}
.ilink{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;text-decoration:none;
  color:var(--accent-soft)}
.ilink svg{inline-size:16px;block-size:16px}
.ilink:hover{color:#fff}
.isoc{display:flex;gap:8px;margin-inline-start:auto}
.isoc a{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;
  color:#9FB3CE;border:1px solid var(--line-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.isoc a:hover{color:#fff;border-color:var(--accent)}
.isoc svg{inline-size:17px;block-size:17px}
.inst-switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-block-start:clamp(28px,3.6vw,44px);padding-block-start:22px;
  border-block-start:1px solid var(--line-strong)}
.inst-switch .lbl{font-family:var(--font-display);font-size:11.5px;font-weight:800;
  letter-spacing:1.2px;color:#7E93B0;margin-inline-end:6px}
.ipick{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--font-display);font-size:13px;font-weight:800;color:#B9C9E2;
  padding:7px 16px 7px 7px;border-radius:var(--chip-radius);
  border:1px solid var(--line-strong);background:rgba(11,18,38,.5);
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.ipick:hover{color:#fff;border-color:var(--accent)}
.ipick.on{color:#fff;border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 40%,transparent)}
.rboard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
.rb-bars{list-style:none;display:flex;flex-direction:column;gap:9px}
.rb-bars li{display:flex;align-items:center;gap:12px}
.rb-bars .rn{flex:none;inline-size:2ch;font-family:var(--font-display);font-size:12.5px;
  font-weight:800;color:var(--fg-muted);text-align:center}
.rb-bars .tr{flex:1 1 auto;block-size:9px;border-radius:99px;background:var(--paper-200);overflow:hidden}
.rb-bars .tr i{display:block;block-size:100%;inline-size:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
  transition:inline-size 1.1s var(--ease-out)}
.rb-bars.in .tr i{inline-size:var(--w)}
.rb-bars .c{flex:none;min-inline-size:4ch;font-size:12px;color:var(--fg-muted);text-align:start}
@media (max-width:1040px){
.inst-grid{grid-template-columns:1fr}
.rboard{grid-template-columns:1fr}
/* در چیدمان تک‌ستونی مدارِ دور عکس از روی تیتر بخش رد می‌شد و برچسب‌ها
   روی متن می‌افتادند. همین مهارت‌ها در فهرست «زمینه‌های کاری» هم هست. */
.orbit-tags{display:none}
}
@media (max-width:820px){
.isoc{margin-inline-start:0}
}
.paymode{display:flex;gap:4px;padding:4px;margin-block-end:16px;
  border-radius:var(--chip-radius);border:1px solid var(--line-strong);background:var(--bg)}
.pm-b{flex:1 1 0;cursor:pointer;background:transparent;border:0;border-radius:var(--chip-radius);
  padding:9px 10px;font-family:var(--font-display);font-size:12.5px;font-weight:800;
  color:var(--fg-muted);transition:color var(--dur-fast),background-color var(--dur-fast)}
.pm-b:hover{color:var(--fg)}
.pm-b.on{color:#fff;background:var(--teal-600)}
.inst-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-block-end:clamp(28px,3.6vw,46px)}
.inst-nav{display:flex;align-items:center;gap:12px}
.inst-nav.off{display:none}
.iarrow{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;
  cursor:pointer;color:#9FB3CE;background:rgba(11,18,38,.55);border:1px solid var(--line-strong);
  backdrop-filter:blur(8px);
  transition:color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.iarrow:hover{color:#fff;border-color:var(--accent);transform:scale(1.06)}
.iarrow svg{inline-size:18px;block-size:18px}
.idots{display:flex;align-items:center;gap:7px}
.idots button{cursor:pointer;background:none;border:0;padding:0;
  inline-size:8px;block-size:8px;border-radius:50%;
  background-color:var(--line-strong);transition:background-color var(--dur-fast),inline-size var(--dur-fast)}
.idots button.on{inline-size:22px;border-radius:99px;background-color:var(--accent)}
.inst-copy{transition:opacity .34s var(--ease-soft),transform .46s var(--ease-out)}
.inst-copy.swap{opacity:0;transform:translateX(-26px)}
.inst-badge{position:absolute;inset-block-end:14px;inset-inline-start:14px;z-index:3;
  font-family:var(--font-display);font-size:11px;font-weight:800;color:#fff;
  padding:7px 13px;border-radius:var(--chip-radius);
  background:rgba(8,14,32,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  transition:opacity .3s var(--ease-soft)}
.inst-photo.swap .inst-badge{opacity:0}
.iauto{margin-inline-start:auto;display:block;inline-size:64px;block-size:3px;
  border-radius:99px;background:var(--line-strong);overflow:hidden}
.iauto i{display:block;block-size:100%;inline-size:0;border-radius:99px;background:var(--accent)}
.iauto.run i{animation:iprog 7s linear forwards}
.iauto.off{display:none}
@media (max-width:820px){
.inst-head{flex-direction:column;align-items:stretch}
.inst-nav{justify-content:space-between}
.iauto{display:none}
}
.bb-h{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--fg);
  margin-block-end:14px}
.binfo{list-style:none;margin-block-start:18px;border-block-start:1px solid var(--line)}
.binfo li{display:flex;align-items:center;gap:12px;padding-block:12px;
  border-block-end:1px solid var(--line);font-size:12.5px}
.binfo li:last-child{border-block-end:0}
.bi-k{display:inline-flex;align-items:center;gap:9px;color:var(--fg-muted);white-space:nowrap}
.bi-k svg{inline-size:17px;block-size:17px;color:var(--teal-600);flex:none}
.binfo b{margin-inline-start:auto;font-family:var(--font-display);font-size:13px;font-weight:800;
  color:var(--fg);text-align:end}
.binfo b.rg-open{color:var(--teal-700,#0e6b57)}
.binfo b.rg-soon{color:var(--gold-700,#8a6206)}
.binfo b.rg-blocked{color:#a8471f}
.binfo b.rg-done{color:var(--navy-700,#2d3d63)}
.binfo b.rg-muted{color:var(--navy-400,#8894b3)}
.purchase{margin-block-start:20px;padding:18px;border-radius:18px;
  border:1px solid color-mix(in oklab,var(--teal-600) 22%,transparent);
  background:color-mix(in oklab,var(--teal-600) 5%,transparent)}
.pu-k{font-size:11.5px;color:var(--fg-muted);margin-block-end:6px}
.pu-price{display:flex;align-items:flex-end;gap:9px}
.pu-price b{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:900;color:var(--fg)}
.pu-price span{font-size:12.5px;color:var(--fg-muted);padding-block-end:5px}
.pu-hint{font-size:11.5px;line-height:1.9;color:var(--fg-muted);margin-block-start:9px}
.bb-submit{justify-content:center;inline-size:100%;margin-block-start:12px}
.bb-submit svg{inline-size:18px;block-size:18px}

/* کادر خرید در حالت بسته: نه قیمت، نه نوع پرداخت، نه دکمه — فقط یک جمله.
   لحن عمدا خنثی و آرام است، نه قرمزِ خطا: دوره‌ی تمام‌شده خبر بد نیست. */
.pu-closed{display:grid;justify-items:center;gap:10px;padding-block:8px;text-align:center}
.pu-closed-ic{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:50%;
  color:var(--navy-400,#8894b3);background:color-mix(in oklab,var(--navy-400,#8894b3) 12%,transparent)}
.pu-closed-ic svg{inline-size:22px;block-size:22px}
.pu-closed-h{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--fg)}
.pu-closed .pu-note{margin:0;font-size:11.5px;line-height:1.9;color:var(--fg-muted)}

/* شمارنده‌ی مهلت و ظرفیت باقی‌مانده — عمدا بالای نوار پرداخت و تو چشم. */
.pu-urge{display:grid;gap:10px;margin-block-end:16px}
.pu-urge-k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--fg-muted)}
.pu-urge-k svg{inline-size:14px;block-size:14px;flex:none}
.pu-timer,.pu-seats{padding:12px 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--surface)}
.pu-clock{display:flex;gap:6px;margin-block-start:9px}
.pu-clock .cd{flex:1 1 0;display:grid;justify-items:center;gap:2px;padding-block:7px;
  border-radius:10px;background:color-mix(in oklab,var(--teal-600) 9%,transparent)}
.pu-clock .cd b{font-family:var(--font-display);font-size:19px;font-weight:900;line-height:1;
  color:var(--teal-700,#0e6b57);font-variant-numeric:tabular-nums}
.pu-clock .cd i{font-style:normal;font-size:10px;color:var(--fg-muted)}
.pu-timer.is-soon .cd{background:color-mix(in oklab,#a8471f 10%,transparent)}
.pu-timer.is-soon .cd b{color:#a8471f}
.pu-seats{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pu-seats-n{font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--teal-700,#0e6b57)}
.pu-seats-n span{margin-inline-start:5px;font-family:var(--font-body);font-size:11.5px;
  font-weight:600;color:var(--fg-muted)}
.pu-seats.low{border-color:color-mix(in oklab,#a8471f 45%,transparent);
  background:color-mix(in oklab,#a8471f 6%,transparent)}
.pu-seats.low .pu-seats-n{color:#a8471f}

/* گذارِ پرداخت کامل ↔ اقساطی.
 *
 * قاعده‌ی این بخش: **یک تغییرِ حالت، نه یک زنجیره‌ی حرکت.** هر دو حالت
 * هم‌زمان در صفحه‌اند و روی هم می‌نشینند؛ تعویض فقط کلاس `to-inst` روی
 * کادر است و مرورگر همه‌ی عنصرها را با یک زمان و یک منحنی می‌برد. هیچ
 * متنی با جاوااسکریپت عوض نمی‌شود و هیچ تایمری بین مرحله‌ها نیست —
 * نسخه‌ی قبلی سه حرکتِ جدا را پشت سر هم اجرا می‌کرد و پله‌پله دیده می‌شد.
 *
 * حرکت فقط روی transform و opacity است تا روی کارت گرافیک اجرا شود و
 * هیچ‌جا نلرزد؛ عرض و ارتفاع و فونت وسطِ کار دست‌کاری نمی‌شوند.
 */
:root{--pu-ease:cubic-bezier(.32,.72,.24,1);--pu-dur:.52s}

/* برچسب و توضیح: دو متن روی هم، یکی می‌رود یکی می‌آید */
.pu-swap{position:relative;display:grid}
.pu-swap > span{grid-area:1/1;transition:opacity var(--pu-dur) var(--pu-ease),
  transform var(--pu-dur) var(--pu-ease)}
.pu-swap .sw-b{opacity:0;transform:translateY(6px)}
.purchase.to-inst .pu-swap .sw-a{opacity:0;transform:translateY(-6px)}
.purchase.to-inst .pu-swap .sw-b{opacity:1;transform:none}

/* دو قیمت روی هم. در حالت یک‌جا ارتفاع فقط به اندازه‌ی خودِ عدد است تا زیر
   «مبلغ قابل پرداخت» جای خالی نماند؛ در حالت اقساطی به اندازه‌ی خطِ کوچکِ
   بالایی بلند می‌شود، هم‌زمان و با همان منحنیِ بقیه‌ی حرکت. */
.pu-stack{position:relative;display:grid;align-items:end;
  --pu-big:clamp(24px,3vw,32px);--pu-gap:20px;
  height:calc(var(--pu-big) * 1.12);transition:height var(--pu-dur) var(--pu-ease)}
.purchase.to-inst .pu-stack{height:calc(var(--pu-big) * 1.12 + var(--pu-gap))}
.pu-line{grid-area:1/1;display:flex;align-items:flex-end;gap:9px;
  inline-size:fit-content;transform-origin:right bottom;
  transition:transform var(--pu-dur) var(--pu-ease),opacity var(--pu-dur) var(--pu-ease)}
.pu-line b{font-family:var(--font-display);font-size:var(--pu-big);font-weight:900;
  line-height:1.05;color:var(--fg)}
.pu-line span{font-size:12.5px;color:var(--fg-muted);padding-block-end:4px}
/* قیمت یکجا: در حالت کامل پایین و بزرگ، در حالت اقساطی بالا و کوچک */
.pu-line--a{align-self:end;transform:translateY(0) scale(1)}
.purchase.to-inst .pu-line--a{opacity:.62;
  transform:translateY(calc(-1 * var(--pu-big) - 6px)) scale(.46)}
/* قیمت قسط اول: از پایین می‌آید و جای قیمت بزرگ می‌نشیند */
.pu-line--b{align-self:end;opacity:0;transform:translateY(16px) scale(.92)}
.purchase.to-inst .pu-line--b{opacity:1;transform:none}
/* خطِ روی قیمت یکجا هم‌زمان با همان حرکت کشیده می‌شود */
.pu-cut{position:absolute;inset-block-start:52%;inset-inline-start:0;inline-size:0;
  block-size:3px;border-radius:3px;background:currentColor;opacity:.7;
  transition:inline-size var(--pu-dur) var(--pu-ease)}
.purchase.to-inst .pu-cut{inline-size:100%}

/* جدول اقساط: تنها چیزی که ارتفاعش عوض می‌شود */
.pu-fold{display:block;overflow:hidden;max-height:0;
  transition:max-height var(--pu-dur) var(--pu-ease),opacity var(--pu-dur) var(--pu-ease)}
.pu-plan{opacity:0}
.purchase.to-inst .pu-plan{opacity:1}
.pu-plan-k{font-size:11px;font-weight:700;color:var(--fg-muted);margin-block:14px 7px}
.pu-plan-l{list-style:none;margin:0;display:grid;gap:1px;border-radius:12px;
  overflow:hidden;background:var(--line)}
.pu-plan-l li{display:grid;grid-template-columns:5.4em 1fr auto;align-items:center;
  gap:10px;padding:10px 12px;background:var(--surface);font-size:11.5px}
.pu-plan-l .pl-n{font-weight:800;color:var(--fg);white-space:nowrap}
.pu-plan-l .pl-d{color:var(--fg-muted);white-space:nowrap}
.pu-plan-l .pl-a{font-family:var(--font-display);font-size:12.5px;font-weight:800;
  color:var(--fg);text-align:end;white-space:nowrap}

/* پایانِ مهلت: شمارنده جایش را به یک جمله می‌دهد */
.pu-timer.is-ended{display:grid;place-items:center;padding-block:16px}
.pu-ended{font-family:var(--font-display);font-size:13px;font-weight:800;color:#a8471f}

@media (prefers-reduced-motion:reduce){
  .pu-swap > span,.pu-stack,.pu-line,.pu-cut,.pu-fold{transition:none}
}
.sharebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:14px;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--surface)}
.sh-k{font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--fg-muted)}
.sh-l{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.sh-l a{display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;
  color:var(--fg-muted);border:1px solid var(--line-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.sh-l a:hover{color:var(--teal-600);border-color:var(--teal-600)}
.sh-l svg{inline-size:16px;block-size:16px}
.sh-copy{cursor:pointer;font-family:var(--font-body);font-size:12px;color:var(--teal-600);
  background:none;border:0;text-decoration:underline;text-underline-offset:4px}
.rv-head{text-align:center;margin-block-end:clamp(26px,3.4vw,38px)}
.rv-kick{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:1.2px;
  color:var(--gold-600);margin-block-end:14px}
.rv-kick svg{inline-size:15px;block-size:15px;color:var(--gold-400)}
.rv-head h2{font-family:var(--font-display);font-size:clamp(24px,3.2vw,38px);font-weight:900;
  color:var(--fg);line-height:1.4}
.rv-sub{max-inline-size:56ch;margin:12px auto 0;font-size:14px;line-height:2;color:var(--fg-muted)}
.rboard{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(18px,2.6vw,28px);
  align-items:stretch;border:0;padding:0;background:none}
.rb-panel{position:relative;overflow:hidden;padding:clamp(22px,2.8vw,30px);
  border-radius:var(--card-radius);background:var(--navy-900);text-align:center;
  box-shadow:0 40px 80px -50px rgba(11,18,38,.8)}
.rb-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(34,211,238,.16),transparent 62%)}
.rb-panel > *{position:relative;z-index:2}
.rb-badge{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:800;
  letter-spacing:1px;color:var(--accent-soft);padding:6px 13px;border-radius:var(--chip-radius);
  border:1px solid var(--line-strong);background:rgba(11,18,38,.5);margin-block-end:18px}
.rb-avg{display:block;font-family:var(--font-display);font-size:clamp(46px,6vw,64px);
  font-weight:900;color:#fff;line-height:1}
.rb-panel .stars{justify-content:center;margin-block:12px 10px}
.rb-count{display:block;font-size:12.5px;color:#9FB3CE}
.rb-panel .rb-bars{margin-block-start:22px;padding-block-start:20px;
  border-block-start:1px solid var(--line-strong)}
.rb-panel .rb-bars .rn{color:#B9C9E2}
.rb-panel .rb-bars .tr{background:rgba(148,178,214,.16)}
.rb-panel .rb-bars .c{color:#9FB3CE}
.rb-slider{position:relative;display:flex;flex-direction:column}
.rvs-track{position:relative;flex:1 1 auto;min-block-size:clamp(240px,30vw,286px);
  contain:layout paint}
.rvs{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translate3d(-30px,0,0) scale(.984);
  padding:clamp(22px,2.8vw,32px);border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--surface);backface-visibility:hidden;
  transition:opacity .42s var(--ease-soft),transform .58s var(--ease-out),visibility .42s}
.rvs.on,.rvs.out{will-change:opacity,transform}
.rvs.on{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1)}
.rvs.out{transform:translate3d(30px,0,0) scale(.984)}
.rvs-q{display:block;color:var(--teal-600);opacity:.5;margin-block-end:14px}
.rvs-q svg{inline-size:32px;block-size:32px}
.rvs p{font-size:clamp(14px,1.7vw,16px);line-height:2.15;color:var(--fg);max-inline-size:58ch}
.rvs footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:22px}
.rvs footer i{font-style:normal;flex:none;display:grid;place-items:center;
  inline-size:42px;block-size:42px;border-radius:50%;
  font-family:var(--font-display);font-size:13px;font-weight:900;
  color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 12%,transparent)}
.rvs footer b{display:block;font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--fg)}
.rvs footer > div span{font-size:11.5px;color:var(--fg-muted)}
.rvs footer .stars{margin-inline-start:auto}
.rvs-nav{display:flex;align-items:center;gap:12px;margin-block-start:16px}
.rvs-nav .iarrow{color:var(--fg-muted);background:var(--surface);border-color:var(--line-strong)}
.rvs-nav .iarrow:hover{color:var(--teal-600);border-color:var(--teal-600)}
.rvs-nav .idots button{background-color:var(--line-strong)}
.rvs-nav .idots button.on{background-color:var(--teal-600)}
.rvs-count{margin-inline-start:auto;font-size:12px;color:var(--fg-muted)}
@media (max-width:1040px){
.rboard{grid-template-columns:1fr}
.rvs{position:static;opacity:1;visibility:visible;transform:none;display:none}
.rvs.on{display:block}
.rvs-track{min-block-size:0}
}
@media (max-width:820px){
.binfo b{font-size:12.5px}
.sh-l{margin-inline-start:0}
}
.poster{position:relative;display:block;overflow:hidden;border-radius:var(--card-radius);
  aspect-ratio:21/9;margin-block-end:clamp(20px,2.6vw,28px);
  box-shadow:0 40px 80px -54px rgba(11,18,38,.75)}
.poster img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.po-tag{position:absolute;inset-block-end:14px;inset-inline-start:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:12px;font-weight:800;color:#fff;
  padding:8px 14px;border-radius:var(--chip-radius);
  background:rgba(8,14,32,.6);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.po-tag svg{inline-size:15px;block-size:15px}
@media (max-width:820px){
.poster{aspect-ratio:16/9}
}