@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   Asia MTA UCP — رابط کاربری نسخه‌ی ۲
   - همه‌ی نام کلاس‌ها و متغیرهای قبلی حفظ شده‌اند (صفحه‌ها و سیستم تم دست‌نخورده کار می‌کنند)
   - فقط از ویژگی‌های منطقی (inline-start/end) استفاده شده؛ پس RTL و LTR بدون ltr.css هم درست‌اند
   - رنگ‌های کم‌رنگ از --text ساخته می‌شوند؛ پس در حالت روشن و تم‌های سفارشی هم درست دیده می‌شوند
   ========================================================================== */

:root{
  /* سطوح */
  --bg:#080a12; --bg-alt:#0d1019; --card:#121520; --card-2:#171b28;
  --border:#262c40; --border-soft:#1b2031; --text:#eceef6; --muted:#8f96ae;
  /* رنگ‌ها */
  --primary:#7b61ff; --primary-2:#5b3fe8; --accent:#38d6e8; --accent-2:#13a9c0;
  --success:#2fd07a; --danger:#f2495f; --warning:#f5a623;
  /* شکل */
  --radius:16px; --radius-sm:10px; --radius-md:calc(var(--radius-sm) + 2px); --radius-lg:calc(var(--radius) + 6px);
  --shadow:0 24px 48px -14px rgba(0,0,0,.6);
  --shadow-sm:0 8px 22px -8px rgba(0,0,0,.45);
  --glow-primary:0 0 26px color-mix(in srgb,var(--primary) 38%,transparent);
  /* سایه‌های رنگی کم‌رنگ که با --text تغییر می‌کنند */
  --tint-1:color-mix(in srgb,var(--text) 4%,transparent);
  --tint-2:color-mix(in srgb,var(--text) 8%,transparent);
  --tint-3:color-mix(in srgb,var(--text) 13%,transparent);
  --primary-soft:color-mix(in srgb,var(--primary) 16%,transparent);
  --ring:0 0 0 3px color-mix(in srgb,var(--primary) 26%,transparent);
  /* حرکت */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.14s; --t-base:.24s; --t-slow:.42s;
  /* ابعاد قاب */
  --sidebar-w:268px; --sidebar-w-rail:84px; --gap-shell:12px;
  --dx:-1;                         /* جهت: RTL = -1 ، LTR = +1 */
  color-scheme:dark;
}
html[dir=ltr]{--dx:1}

/* حالت روشن (دکمه‌ی تغییر تم در نوار بالا) — با اولویت بیشتر از :root تا بر تم‌های ادمین هم غلبه کند */
html[data-ui="light"]{
  --bg:#f3f4fa; --bg-alt:#eaecf5; --card:#ffffff; --card-2:#f7f8fc;
  --border:#d7dbea; --border-soft:#e4e7f1; --text:#141829; --muted:#586080;
  --primary:#5b3fe8; --primary-2:#4527cf; --accent:#0b8fa5; --accent-2:#087488;
  --success:#12945a; --danger:#d62f47; --warning:#b86e00;
  --shadow:0 24px 48px -16px rgba(30,36,80,.22);
  --shadow-sm:0 8px 22px -10px rgba(30,36,80,.18);
  --glow-primary:none;
  color-scheme:light;
}
html[data-ui="light"] body{
  background:
    radial-gradient(1000px 520px at 88% -10%, rgba(91,63,232,.10), transparent 60%),
    radial-gradient(800px 460px at -8% 6%, rgba(11,143,165,.08), transparent 55%),
    var(--bg);
}
html[data-ui="dark"]{
  --bg:#080a12; --bg-alt:#0d1019; --card:#121520; --card-2:#171b28;
  --border:#262c40; --border-soft:#1b2031; --text:#eceef6; --muted:#8f96ae;
  --primary:#7b61ff; --primary-2:#5b3fe8; --accent:#38d6e8; --accent-2:#13a9c0;
  --success:#2fd07a; --danger:#f2495f; --warning:#f5a623;
  --shadow:0 24px 48px -14px rgba(0,0,0,.6); --shadow-sm:0 8px 22px -8px rgba(0,0,0,.45);
  color-scheme:dark;
}
html[data-ui="dark"] body{
  background:
    radial-gradient(1100px 560px at 88% -10%, rgba(123,97,255,.17), transparent 60%),
    radial-gradient(900px 500px at -8% 6%, rgba(56,214,232,.09), transparent 55%),
    var(--bg);
}

*{box-sizing:border-box}
html{height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  background:
    radial-gradient(1100px 560px at 88% -10%, rgba(123,97,255,.17), transparent 60%),
    radial-gradient(900px 500px at -8% 6%, rgba(56,214,232,.09), transparent 55%),
    var(--bg);
  color:var(--text); font-family:'Vazirmatn',Tahoma,sans-serif; font-size:14.5px; line-height:1.75;
  direction:rtl; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
html[dir=ltr] body{direction:ltr}
a{color:inherit; text-decoration:none}
.container{max-width:1180px; margin-inline:auto; padding-inline:18px}
:is(h1,h2,h3,h4){line-height:1.45; font-weight:800}
:is(h1,h2,h3,h4):where(:not(.pb-root *)){margin-block:0 .5em}
h3:where(:not(.pb-root *)){font-size:16px; font-weight:700}
::selection{background:color-mix(in srgb,var(--primary) 40%,transparent); color:inherit}

/* نوار اسکرول */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--primary); background-clip:content-box}
*{scrollbar-width:thin; scrollbar-color:var(--border) transparent}

/* ---------- دسترسی‌پذیری ---------- */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.form-control:focus-visible,.btn:focus-visible{outline-offset:1px}
.skip-link{
  position:fixed; inset-block-start:-60px; inset-inline-start:16px; z-index:2000;
  background:var(--primary); color:#fff; padding:10px 18px; border-radius:var(--radius-md); font-weight:700;
  transition:inset-block-start var(--t-base) var(--ease-out);
}
.skip-link:focus{inset-block-start:14px}
.sr-only{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}
@media (prefers-contrast:more){
  :root{--border:#4a5272; --muted:#b4bad0}
  .card{border-width:2px}
}

/* ---------- جابه‌جایی نرم بین صفحه‌ها (View Transitions — مرورگرهای پشتیبان) ---------- */
@view-transition{navigation:auto}
.sidebar{view-transition-name:ucp-sidebar}
.topbar{view-transition-name:ucp-topbar}
::view-transition-group(ucp-sidebar),::view-transition-group(ucp-topbar){animation-duration:0s}
::view-transition-old(root){animation:vt-out .16s var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in .34s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ==========================================================================
   قاب اصلی
   ========================================================================== */
.app{display:flex; min-height:100vh; gap:var(--gap-shell); padding:var(--gap-shell) var(--gap-shell) 0}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.content{
  padding:26px 14px; width:100%; max-width:1400px; margin-inline:auto; flex:1;
  outline:none; scroll-margin-top:90px;
}

/* ---------- سایدبار (پنل شناور) ---------- */
.sidebar{
  width:var(--sidebar-w); flex:none; position:sticky; top:var(--gap-shell);
  height:calc(100vh - var(--gap-shell)*2); margin:0; border:0!important;
  background:color-mix(in srgb,var(--card) 82%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border-radius:var(--radius-lg); box-shadow:0 0 0 1px var(--border-soft), var(--shadow-sm);
  padding:18px 12px 10px; z-index:60; display:flex; flex-direction:column;
  transition:width var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.sidebar .brand{display:flex; align-items:center; justify-content:center; padding:4px 10px 18px; position:relative}
.brand-logo{width:100%; max-width:190px; height:auto; display:block; transition:max-width var(--t-slow) var(--ease-out); filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--primary) 40%,transparent))}
html[data-ui="light"] .brand-logo{filter:invert(1) hue-rotate(180deg) drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.sidebar-scroll{flex:1; overflow-y:auto; overflow-x:hidden; margin-top:6px; padding-inline-end:2px; position:relative; overscroll-behavior:contain}
.nav-group{margin-bottom:18px}
.nav-title{font-size:11.5px; color:var(--muted); margin:0 12px 8px; opacity:.75; font-weight:600; white-space:nowrap}

/* پایین سایدبار: دکمه‌ی جمع‌کردن منو (دسکتاپ) */
.sidebar-foot{padding-top:8px; margin-top:6px; border-top:1px solid var(--border-soft)}
.sidebar-collapse{
  display:flex; align-items:center; gap:12px; width:100%; padding:7px 12px; border:none; border-radius:var(--radius-md); background:none;
  color:var(--muted); font-family:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast);
}
.sidebar-collapse:hover{background:var(--tint-2); color:var(--text)}
.sidebar-collapse .nav-ico svg{width:16px; height:16px; transition:transform var(--t-slow) var(--ease-out)}
html[dir=rtl] .sidebar-collapse .nav-ico svg{transform:scaleX(-1)}
html[data-nav="rail"] .sidebar-collapse .nav-ico svg{transform:scaleX(-1)}
html[dir=rtl][data-nav="rail"] .sidebar-collapse .nav-ico svg{transform:none}

/* لینک‌های ناوبری */
.nav-link{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--radius-md);
  color:var(--muted); font-weight:500; font-size:14px; margin-bottom:2px; position:relative; z-index:1;
  transition:color var(--t-fast), background var(--t-fast);
  white-space:nowrap;
}
.nav-ico{
  width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; border-radius:9px; background:var(--tint-1);
  transition:background var(--t-base), transform var(--t-base) var(--ease-spring);
}
.nav-txt{overflow:hidden; text-overflow:ellipsis; min-width:0; transition:opacity var(--t-base)}
.nav-link:hover{color:var(--text)}
.nav-link:hover .nav-ico{transform:scale(1.08)}
.nav-link.active{color:var(--text); font-weight:700; background:linear-gradient(90deg,transparent,var(--primary-soft))}
html[dir=ltr] .nav-link.active{background:linear-gradient(270deg,transparent,var(--primary-soft))}
.nav-link.active .nav-ico{background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 6px 16px -4px color-mix(in srgb,var(--primary) 60%,transparent); filter:none}
.nav-link.active::before{
  content:''; position:absolute; inset-inline-start:0; top:50%; translate:0 -50%;
  width:3px; height:52%; border-radius:4px; background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
/* لکه‌ی هاور که نرم بین لینک‌ها می‌لغزد (با JS موقعیت می‌گیرد) */
.nav-glide{
  position:absolute; inset-inline:0; top:0; height:40px; border-radius:var(--radius-md); background:var(--tint-2);
  opacity:0; pointer-events:none; z-index:0; will-change:transform;
  transition:transform var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.nav-glide.on{opacity:1}

/* حالت باریک (rail) — فقط دسکتاپ */
@media (min-width:901px){
html[data-nav="rail"] .sidebar{width:var(--sidebar-w-rail)}
html[data-nav="rail"] .nav-txt,html[data-nav="rail"] .sidebar-collapse .nav-txt,html[data-nav="rail"] .side-profile-name,html[data-nav="rail"] .side-profile-role,
html[data-nav="rail"] .side-profile-stats{display:none}
html[data-nav="rail"] .nav-title{height:1px; margin:10px 14px; font-size:0; background:var(--border-soft); opacity:1}
html[data-nav="rail"] .nav-link,html[data-nav="rail"] .sidebar-collapse{justify-content:center; padding-inline:0}
html[data-nav="rail"] .brand-logo{max-width:46px}
html[data-nav="rail"] .side-profile{padding:10px 4px}
html[data-nav="rail"] .side-profile-avatar{width:48px; height:48px; margin:0 auto}
}

/* ---------- کارت پروفایل داخل سایدبار ---------- */
.side-profile{
  text-align:center; padding:16px 10px 16px; margin-bottom:8px; border-radius:18px;
  background:linear-gradient(160deg,var(--primary-soft),var(--tint-1));
  box-shadow:inset 0 0 0 1px var(--border-soft); position:relative; overflow:hidden;
  transition:padding var(--t-base) var(--ease-out);
}
.side-profile::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(140px 90px at 50% 0%, color-mix(in srgb,var(--primary) 40%,transparent), transparent 70%);
}
.side-profile-avatar{
  width:104px; height:104px; border-radius:9999px; overflow:hidden; margin:0 auto 10px;
  border:2px solid color-mix(in srgb,var(--primary) 60%,transparent); box-shadow:var(--glow-primary); background:var(--bg-alt);
  position:relative; z-index:1; transition:width var(--t-slow) var(--ease-out), height var(--t-slow) var(--ease-out);
}
.side-profile-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.side-profile-name{font-weight:800; font-size:15px; position:relative; z-index:1}
.side-profile-role{margin-top:6px; position:relative; z-index:1}
.side-profile-stats{display:flex; margin-top:14px; position:relative; z-index:1; border-top:1px solid var(--border-soft); padding-top:10px}
.side-profile-stats > div{flex:1; text-align:center; border-inline-start:1px solid var(--border-soft); min-width:0}
.side-profile-stats > div:first-child{border-inline-start:none}
.side-profile-stats b{display:block; font-size:14px; font-weight:800; color:var(--text)}
.side-profile-stats span{display:block; font-size:10.5px; color:var(--muted); margin-top:1px}

/* پرده‌ی پشت سایدبار در موبایل */
.sidebar-backdrop{
  position:fixed; inset:0; z-index:55; background:rgba(4,5,10,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.sidebar-backdrop.on{opacity:1; visibility:visible; transition-delay:0s}

/* ---------- نوار بالا ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0;
  padding-block:9px; padding-inline:18px 12px;
  background:color-mix(in srgb,var(--card) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border-radius:var(--radius); box-shadow:0 0 0 1px var(--border-soft);
  position:sticky; top:var(--gap-shell); z-index:45;
  transition:box-shadow var(--t-base);
}
.topbar.is-scrolled{box-shadow:0 0 0 1px var(--border-soft), var(--shadow-sm)}
.topbar-title{margin:0; font-size:16px; font-weight:800; line-height:1.4; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; align-items:center; gap:8px}
.hamburger{
  display:none; background:var(--tint-1); border:1px solid var(--border-soft); border-radius:11px; width:40px; height:40px;
  color:var(--text); font-size:18px; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.icon-btn{
  position:relative; font-size:15px; width:40px; height:40px; border-radius:var(--radius-md); flex:none;
  background:var(--tint-1); border:1px solid var(--border-soft); color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-base) var(--ease-spring);
}
.icon-btn:hover{background:var(--tint-2); border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:18px; height:18px}
.icon-btn-badge{
  position:absolute; top:-5px; inset-inline-start:-5px; min-width:18px; text-align:center; background:var(--danger); color:#fff;
  font-size:10px; font-weight:800; padding:1px 5px; border-radius:10px; box-shadow:0 0 0 2px var(--card); line-height:1.5;
  animation:badge-pop .5s var(--ease-spring) both;
}
@keyframes badge-pop{from{transform:scale(0)}}
/* دکمه‌ی جست‌وجوی سریع */
.search-pill{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding-block:0; padding-inline:14px 8px;
  border-radius:var(--radius-md); background:var(--tint-1); border:1px solid var(--border-soft); color:var(--muted);
  font-family:inherit; font-size:13px; cursor:pointer; min-width:190px;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.search-pill:hover{background:var(--tint-2); color:var(--text); border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.search-pill svg{width:16px; height:16px; flex:none}
.search-pill .kbd{margin-inline-start:auto}
.kbd{
  display:inline-block; min-width:22px; padding:1px 7px; border-radius:7px; font:600 11px/1.7 ui-monospace,Menlo,Consolas,monospace;
  color:var(--muted); background:var(--tint-1); border:1px solid var(--border); border-bottom-width:2px; text-align:center; direction:ltr;
}
/* آیکون خورشید/ماه */
.ui-theme .i-sun{display:none}
html[data-ui="light"] .ui-theme .i-sun{display:block}
html[data-ui="light"] .ui-theme .i-moon{display:none}

/* ---------- سرتیتر صفحه (برای صفحه‌های جدید) ---------- */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.page-head h2{margin:0; font-size:22px}
.page-head p{margin:2px 0 0; color:var(--muted); font-size:13.5px}
.welcome-header{margin-bottom:22px}
.welcome-header h2{font-size:22px; margin:0 0 4px; font-weight:800}
.welcome-header p{color:var(--muted); margin:0; font-size:14px}

/* ==========================================================================
   کارت‌ها و شبکه
   ========================================================================== */
.grid{display:grid; gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--tint-1);
  transition:border-color var(--t-base), transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
a.card:hover,.stat-card:hover,.pkg-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); box-shadow:var(--shadow)}
.stat-card{position:relative; overflow:hidden}
.stat-card .label{color:var(--muted); font-size:12.5px; margin-bottom:6px; font-weight:500}
.stat-card .value{font-size:27px; font-weight:800; line-height:1.3}
.stat-card .icon{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:19px}
.icon-purple{background:color-mix(in srgb,var(--primary) 16%,transparent); color:var(--primary)}
.icon-cyan{background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent)}
.icon-green{background:color-mix(in srgb,var(--success) 15%,transparent); color:var(--success)}
.icon-orange{background:color-mix(in srgb,var(--warning) 15%,transparent); color:var(--warning)}

/* کارت‌های رنگی داشبورد */
.card.vivid-card{position:relative; overflow:hidden; padding:20px; border:none; color:#fff; isolation:isolate; box-shadow:var(--shadow-sm)}
.vivid-card::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(180px 120px at 100% 0%, rgba(255,255,255,.28), transparent 70%);
}
html[dir=rtl] .vivid-card::after{background:radial-gradient(180px 120px at 0% 0%, rgba(255,255,255,.28), transparent 70%)}
.vivid-card .label{opacity:.88; font-size:12.5px; margin-bottom:6px}
.vivid-card .value{font-size:27px; font-weight:800; line-height:1.3}
.vivid-card .icon{width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:18px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.card.vivid-1{background:linear-gradient(135deg,#7b61ff,#4b2fd0)}
.card.vivid-2{background:linear-gradient(135deg,#13a9c0,#0b6577)}
.card.vivid-3{background:linear-gradient(135deg,#f5a623,#b86e0a)}
.card.vivid-4{background:linear-gradient(135deg,#64748b,#2f3b4f)}
/* ورود پله‌ای فقط برای ردیف کارت‌های آماری (یک لحظه‌ی هماهنگ، نه روی همه‌چیز) */
.grid-4 > .vivid-card,.grid-4 > .stat-card,.grid-3 > .stat-card{animation:rise var(--t-slow) var(--ease-out) both}
.grid-4 > :nth-child(2),.grid-3 > :nth-child(2){animation-delay:.06s}
.grid-4 > :nth-child(3),.grid-3 > :nth-child(3){animation-delay:.12s}
.grid-4 > :nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}

/* کارت بازیکن */
.player-card{
  display:flex; gap:22px; align-items:center; padding:24px;
  background:linear-gradient(120deg,var(--primary-soft),var(--card) 45%); position:relative; overflow:hidden;
}
.player-card::after{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(320px 200px at 90% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%)}
.player-card-avatar{width:100px; height:100px; border-radius:20px; overflow:hidden; flex-shrink:0; border:2px solid color-mix(in srgb,var(--primary) 55%,transparent); box-shadow:var(--glow-primary); background:var(--bg-alt); position:relative; z-index:1}
.player-card-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.player-card-info{flex:1; min-width:200px; position:relative; z-index:1}
.player-card-stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:14px; color:var(--muted)}
.player-card-stats b{color:var(--text); font-weight:700}

/* بسته‌های Gold */
.pkg-card{position:relative; text-align:center; padding:26px 18px; overflow:hidden}
.pkg-card::before{content:''; position:absolute; inset:0; opacity:0; transition:opacity var(--t-base); background:radial-gradient(200px 140px at 50% -10%, color-mix(in srgb,var(--primary) 28%,transparent), transparent 70%)}
.pkg-card:hover::before{opacity:1}
.pkg-card .gold-amount{font-size:27px; font-weight:800; margin:12px 0 4px; position:relative}
.pkg-card .price-old{color:var(--muted); text-decoration:line-through; font-size:13px; position:relative}
.pkg-card .price-final{font-size:21px; font-weight:800; color:var(--accent); margin-top:2px; position:relative}
.badge-discount{position:absolute; top:14px; inset-inline-end:14px; background:linear-gradient(135deg,var(--danger),#b52a42); color:#fff; font-size:11.5px; padding:4px 11px; border-radius:20px; font-weight:800; box-shadow:0 4px 14px rgba(240,69,90,.4); z-index:1}

/* ==========================================================================
   دکمه‌ها و فرم‌ها
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),var(--primary); color:#fff; border:none;
  padding:10px 22px; border-radius:var(--radius-md); font-weight:700; cursor:pointer; font-family:inherit; font-size:14px; line-height:1.4;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--primary) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), filter var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  position:relative; overflow:hidden; user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn:hover{filter:brightness(1.1); transform:translateY(-1.5px); box-shadow:0 12px 24px -6px color-mix(in srgb,var(--primary) 75%,transparent), inset 0 1px 0 rgba(255,255,255,.22)}
.btn:active{transform:translateY(0) scale(.97); filter:brightness(.96)}
.btn.btn-outline{background:var(--tint-1); border:1px solid var(--border); box-shadow:none; color:var(--text)}
.btn.btn-outline:hover{background:var(--tint-2); border-color:color-mix(in srgb,var(--primary) 60%,transparent); filter:none}
.btn.btn-danger{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),var(--danger); box-shadow:0 8px 20px -6px color-mix(in srgb,var(--danger) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.2)}
.btn.btn-sm{padding:7px 15px; font-size:13px; border-radius:10px; min-height:36px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none; filter:none}
.btn.is-loading{pointer-events:none; color:transparent}
.btn.is-loading::after{content:''; position:absolute; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}

.form-group{margin-bottom:17px}
.form-label{display:block; margin-bottom:7px; font-size:13px; color:var(--muted); font-weight:600}
.form-control{
  width:100%; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); min-height:44px;
  padding:10px 15px; color:var(--text); font-family:inherit; font-size:14px;
  transition:border-color var(--t-fast), box-shadow var(--t-base), background var(--t-fast);
}
.form-control:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.form-control:focus{outline:none; border-color:var(--primary); box-shadow:var(--ring); background:color-mix(in srgb,var(--bg-alt) 60%,var(--card))}
.form-control::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
textarea.form-control{resize:vertical; min-height:96px; line-height:1.8}
.form-control:user-invalid{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--primary)}
input[type=checkbox],input[type=radio]{width:17px; height:17px; vertical-align:middle}
.form-hint{font-size:12px; color:var(--muted); margin-top:5px; line-height:1.8}
/* کلید روشن/خاموش: <label class="switch"><input type="checkbox"><span></span></label> */
.switch{position:relative; display:inline-block; width:44px; height:26px; flex:none}
.switch input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1}
.switch span{position:absolute; inset:0; border-radius:99px; background:var(--border); transition:background var(--t-base)}
.switch span::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transition:inset-inline-start var(--t-base) var(--ease-spring)}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{inset-inline-start:21px}
.switch input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

/* لیست باز شدنِ select */
select.form-control,select.opt-select{color-scheme:dark; background-color:var(--bg-alt); color:var(--text)}
html[data-ui="light"] select.form-control,html[data-ui="light"] select.opt-select{color-scheme:light}
select.form-control option,select.opt-select option,select option{background-color:var(--card); color:var(--text)}
select option:checked{background-color:var(--card-2); color:var(--text)}

/* ==========================================================================
   صفحه‌ی ورود
   ========================================================================== */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch; justify-content:center; padding:16px}
.auth-shell{
  display:flex; width:100%; max-width:960px; margin:auto; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px var(--border-soft); min-height:560px; animation:rise .6s var(--ease-out) both;
}
.auth-brand-panel{
  flex:1; min-width:280px; padding:44px; position:relative; overflow:hidden;
  background:radial-gradient(400px 300px at 20% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(155deg,var(--primary-2),var(--primary) 50%,var(--accent-2));
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
}
.auth-brand-panel .mark{width:52px; height:52px; border-radius:15px; background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.auth-brand-panel h2{font-size:26px; margin:22px 0 10px; line-height:1.5}
.auth-brand-panel p{opacity:.88; font-size:14.5px; line-height:1.9; max-width:320px}
.auth-brand-panel .deco{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px)}
.auth-form-panel{flex:1; min-width:300px; background:var(--card); padding:46px 40px; display:flex; flex-direction:column; justify-content:center}
.auth-form-panel h1{font-size:23px; margin:0 0 6px}
.auth-form-panel p.sub{color:var(--muted); margin:0 0 28px; font-size:14px}
@media (max-width:760px){
  .auth-shell{flex-direction:column; max-width:440px; min-height:0}
  .auth-brand-panel{padding:30px}
  .auth-form-panel{padding:32px 24px}
}

/* ==========================================================================
   جدول و نشان‌ها
   ========================================================================== */
table.data-table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.data-table th{text-align:start; color:var(--muted); font-weight:600; font-size:12.5px; padding:11px 13px; border-bottom:1px solid var(--border); background:var(--tint-1); white-space:nowrap}
.data-table th:first-child{border-start-start-radius:10px}
.data-table th:last-child{border-start-end-radius:10px}
.data-table td{padding:13px; border-bottom:1px solid var(--border-soft); transition:background var(--t-fast)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--tint-1)}
.table-wrap{overflow-x:auto; border-radius:var(--radius-sm); -webkit-overflow-scrolling:touch}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; line-height:1.7}
.badge-success{background:color-mix(in srgb,var(--success) 15%,transparent); color:var(--success)}
.badge-danger{background:color-mix(in srgb,var(--danger) 15%,transparent); color:var(--danger)}
.badge-warning{background:color-mix(in srgb,var(--warning) 16%,transparent); color:var(--warning)}
.badge-muted{background:color-mix(in srgb,var(--muted) 16%,transparent); color:var(--muted)}
.badge-info{background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent)}
.badge.dot::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}

/* ==========================================================================
   اعلان‌ها (Toast)
   ========================================================================== */
#toast-root{position:fixed; top:18px; inset-inline-end:18px; z-index:3000; display:flex; flex-direction:column; gap:10px; width:min(380px,calc(100vw - 36px)); pointer-events:none}
.toast{
  pointer-events:auto; position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:11px;
  background:color-mix(in srgb,var(--card-2) 92%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; min-width:250px; box-shadow:var(--shadow);
  animation:toast-in .5s var(--ease-spring) both; --tc:var(--primary);
}
.toast.success{--tc:var(--success)}
.toast.error{--tc:var(--danger)}
.toast.info{--tc:var(--accent)}
.toast.warning{--tc:var(--warning)}
.toast .t-ico{flex:none; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--tc) 18%,transparent); color:var(--tc); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900}
.toast .t-msg{flex:1; font-size:13.5px; line-height:1.7; padding-top:2px; word-break:break-word}
.toast .t-x{flex:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:4px; border-radius:6px; font-family:inherit}
.toast .t-x:hover{color:var(--text); background:var(--tint-2)}
.toast .t-bar{position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--tc); transform-origin:inline-start; animation:t-bar linear both; opacity:.8}
.toast:hover .t-bar{animation-play-state:paused}
.toast.leaving{animation:toast-out .28s var(--ease-in-out) both}
@keyframes toast-in{from{opacity:0; transform:translateY(-14px) scale(.94)}}
@keyframes toast-out{to{opacity:0; transform:translateX(calc(var(--dx) * -24px)) scale(.96)}}
@keyframes t-bar{from{transform:scaleX(1)} to{transform:scaleX(0)}}

/* ==========================================================================
   پنجره (Modal) — هم برای کامپوننت جدید، هم برای پنجره‌های inline قدیمی صفحه‌ها
   ========================================================================== */
.ui-modal-bg{
  position:fixed; inset:0; z-index:2500; background:rgba(4,5,10,.62); display:flex; align-items:center; justify-content:center; padding:16px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade-in var(--t-base) var(--ease-out) both;
}
.ui-modal{
  width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow);
  animation:pop-in .38s var(--ease-spring) both;
}
.ui-modal h3{margin:0 0 8px; font-size:17px}
.ui-modal .ui-modal-body{color:var(--muted); line-height:1.9; margin-bottom:18px}
.ui-modal .ui-modal-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
/* پنجره‌های قدیمی که با style="position:fixed;inset:0" ساخته شده‌اند، بدون دست‌زدن به صفحه‌ها زیباتر می‌شوند */
div[style*="position:fixed"][style*="inset:0"],div[style*="position: fixed"][style*="inset: 0"],div[style*="position: fixed"][style*="inset:0"],div[style*="position:fixed"][style*="inset: 0"]{
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:fade-in var(--t-base) var(--ease-out) both;
}
div[style*="position:fixed"][style*="inset:0"] > div,div[style*="position: fixed"][style*="inset: 0"] > div,div[style*="position: fixed"][style*="inset:0"] > div,div[style*="position:fixed"][style*="inset: 0"] > div{
  animation:pop-in .38s var(--ease-spring) both; border-radius:var(--radius-lg)!important;
}
@keyframes fade-in{from{opacity:0}}
@keyframes pop-in{from{opacity:0; transform:translateY(14px) scale(.95)}}

/* ==========================================================================
   جست‌وجوی سریع (Ctrl+K)
   ========================================================================== */
.cmdk-bg{
  position:fixed; inset:0; z-index:2800; display:flex; align-items:flex-start; justify-content:center; padding:min(14vh,120px) 16px 16px;
  background:rgba(4,5,10,.6); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:fade-in .2s var(--ease-out) both;
}
.cmdk{
  width:100%; max-width:620px; background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px var(--tint-1); animation:pop-in .34s var(--ease-spring) both; display:flex; flex-direction:column; max-height:min(560px,80vh);
}
.cmdk-head{display:flex; align-items:center; gap:12px; padding:6px 18px; border-bottom:1px solid var(--border-soft)}
.cmdk-head svg{width:19px; height:19px; flex:none; color:var(--muted)}
.cmdk-input{flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:16px; padding:15px 0; min-width:0}
.cmdk-input::placeholder{color:var(--muted)}
.cmdk-list{overflow-y:auto; padding:8px; overscroll-behavior:contain}
.cmdk-group{font-size:11.5px; color:var(--muted); font-weight:700; padding:10px 12px 5px}
.cmdk-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-md); cursor:pointer; color:var(--text);
  transition:background var(--t-fast);
}
.cmdk-item .ci-ico{width:34px; height:34px; border-radius:10px; background:var(--tint-1); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none}
.cmdk-item .ci-t{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size:14px}
.cmdk-item .ci-h{font-size:12px; color:var(--muted); flex:none}
.cmdk-item[aria-selected="true"]{background:var(--primary-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 40%,transparent)}
.cmdk-item[aria-selected="true"] .ci-ico{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.cmdk-empty{padding:34px 16px; text-align:center; color:var(--muted); font-size:14px}
.cmdk-foot{display:flex; gap:16px; align-items:center; padding:9px 16px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--muted); background:var(--tint-1)}
.cmdk-foot span{display:inline-flex; align-items:center; gap:6px}

/* ==========================================================================
   وضعیت خالی / بارگذاری
   ========================================================================== */
.empty-state{text-align:center; padding:54px 20px; color:var(--muted); font-size:14px}
.spinner{width:20px; height:20px; border:3px solid var(--tint-3); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--tint-1) 25%,var(--tint-2) 50%,var(--tint-1) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:10px; min-height:14px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ==========================================================================
   اجزای کمکی جدید (برای ساخت سریع امکانات تازه)
   ========================================================================== */
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:12px}
.spacer{flex:1}
.divider{height:1px; background:var(--border-soft); margin:16px 0; border:0}
.muted{color:var(--muted)}
.tabs{display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:var(--tint-1); box-shadow:inset 0 0 0 1px var(--border-soft); max-width:100%; overflow-x:auto}
.tab{padding:8px 16px; border-radius:10px; border:none; background:none; color:var(--muted); font-weight:600; font-size:13.5px; line-height:1.4; font-family:inherit; cursor:pointer; white-space:nowrap; transition:background var(--t-fast), color var(--t-fast)}
.tab:hover{color:var(--text)}
.tab.active,.tab[aria-selected="true"]{background:var(--card-2); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px var(--border)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; background:var(--tint-1); border:1px solid var(--border-soft); color:var(--text)}
.alert{display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-radius:var(--radius-sm); font-size:13.5px; line-height:1.9; background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.alert.warning{background:color-mix(in srgb,var(--warning) 10%,transparent); border-color:color-mix(in srgb,var(--warning) 32%,transparent)}
.alert.danger{background:color-mix(in srgb,var(--danger) 10%,transparent); border-color:color-mix(in srgb,var(--danger) 32%,transparent)}
.alert.success{background:color-mix(in srgb,var(--success) 10%,transparent); border-color:color-mix(in srgb,var(--success) 32%,transparent)}
.progress{height:8px; border-radius:99px; background:var(--tint-2); overflow:hidden}
.progress > i{display:block; height:100%; width:var(--v,0%); border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width var(--t-slow) var(--ease-out)}
.avatar{width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--bg-alt); border:1px solid var(--border); flex:none}
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip); position:absolute; inset-block-end:calc(100% + 8px); inset-inline-start:50%; translate:-50% 4px; white-space:nowrap;
  background:var(--card-2); color:var(--text); border:1px solid var(--border); padding:4px 10px; border-radius:8px; font-size:12px; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast), translate var(--t-base) var(--ease-out); z-index:80; box-shadow:var(--shadow-sm)
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1; translate:-50% 0}

/* ==========================================================================
   محتوای قوانین، لیست قوانین و ادیتور متن (بدون تغییر در رفتار)
   ========================================================================== */
.rule-content{line-height:2; font-size:14.5px}
.rule-content p{margin:0 0 10px}
.rule-content ul,.rule-content ol{margin:0 0 10px; padding-inline-start:22px}
.rule-content li{margin-bottom:4px}
.rule-content table,.rte-editor table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:14px; overflow:hidden; border-radius:8px}
.rule-content th,.rule-content td,.rte-editor th,.rte-editor td{border:1px solid var(--border); padding:9px 12px; text-align:start; vertical-align:top}
.rule-content th,.rte-editor th{background:var(--bg-alt); font-weight:700}
.rule-content tr:nth-child(even) td,.rte-editor tr:nth-child(even) td{background:var(--tint-1)}
.rule-content,.rte-editor{overflow-x:auto}

.rule-list-item{display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:var(--radius-md); border-bottom:1px solid var(--border-soft); transition:background var(--t-fast), transform var(--t-base) var(--ease-out); color:var(--text)}
.rule-list-item:last-child{border-bottom:none}
.rule-list-item:hover{background:var(--primary-soft); transform:translateX(calc(var(--dx) * 3px))}
.rule-list-icon{width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--border)}
.rule-list-icon-fallback{display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--primary-soft); color:var(--primary)}
.rule-list-title{flex:1; font-weight:600; font-size:14.5px}
.rule-list-arrow{color:var(--muted); font-size:20px}

.rte-toolbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:10px; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px 10px 0 0; border-bottom:none}
.rte-toolbar button{width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; font-size:13px; font-weight:700; transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast)}
.rte-toolbar button:hover{border-color:var(--primary); color:var(--primary)}
.rte-toolbar button.active{background:var(--primary); border-color:var(--primary); color:#fff}
.rte-toolbar select,.rte-toolbar input[type=color]{height:34px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:12.5px}
.rte-size-box{display:flex; align-items:center; height:34px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--card)}
.rte-size-box button{width:28px; height:100%; border:none; border-radius:0; background:transparent; color:var(--text); cursor:pointer; font-size:15px; font-weight:700; line-height:1}
.rte-size-box button:hover{background:var(--primary); color:#fff}
.rte-size-box input[type=number]{width:44px; height:100%; border:none; border-inline:1px solid var(--border); background:transparent; color:var(--text); text-align:center; font-size:12.5px; -moz-appearance:textfield}
.rte-size-box input[type=number]::-webkit-outer-spin-button,.rte-size-box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.rte-editor{min-height:180px; border:1px solid var(--border); border-radius:0 0 10px 10px; padding:14px; background:var(--bg-alt); font-size:14px; line-height:1.9; outline:none; transition:border-color var(--t-fast), box-shadow var(--t-base)}
.rte-editor:focus{border-color:var(--primary); box-shadow:var(--ring)}

/* ---------- تغییر زبان ---------- */
.lang-switch{display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--tint-1); border:1px solid var(--border-soft)}
.lang-switch .lang-opt{display:inline-block; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; transition:background var(--t-fast), color var(--t-fast)}
.lang-switch .lang-opt:hover{color:var(--text)}
.lang-switch .lang-opt.active{background:linear-gradient(135deg,var(--primary-2),var(--primary)); color:#fff}
.lang-switch-auth{align-self:flex-end; margin-bottom:14px}

/* ==========================================================================
   واکنش‌گرا
   ========================================================================== */
@media (max-width:1100px){
  .search-pill{min-width:0}
  .search-pill .search-label,.search-pill .kbd{display:none}
  .search-pill{padding-inline:12px}
}
@media (max-width:900px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar{
    position:fixed; top:0; bottom:0; inset-inline-start:0; margin:0; height:100vh; height:100dvh; width:min(300px,86vw);
    border-radius:0; box-shadow:var(--shadow); transform:translateX(calc(var(--dx) * -105%)); visibility:hidden;
    transition:transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  }
  .sidebar.open{transform:translateX(0); visibility:visible; transition-delay:0s}
  .app{padding:0; gap:0}
  .topbar{margin:var(--gap-shell) var(--gap-shell) 0; padding-inline:12px}
  .hamburger{display:inline-flex}
  .sidebar-foot{display:none}
  .content{padding:16px 14px}
  .page-head{align-items:flex-start}
}
@media (max-width:560px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .grid-4 > .vivid-card,.grid-4 > .stat-card{padding:14px}
  .grid-4 .vivid-card .value,.grid-4 .stat-card .value{font-size:21px}
  .grid-4 .vivid-card .icon,.grid-4 .stat-card .icon{width:36px; height:36px; margin-bottom:8px}
  .content{padding:16px 12px}
  .player-card{padding:18px; flex-wrap:wrap}
  .topbar-actions{gap:6px}
  .topbar-actions .btn{display:none}
  .lang-switch .lang-opt{padding:5px 8px; font-size:11.5px}
  .toast{min-width:0}
  .cmdk-bg{padding-top:16px}
  .cmdk-foot{display:none}
}


/* ==========================================================================
   بنر همگانی زمان‌دار
   ========================================================================== */
.site-banners{display:flex; flex-direction:column; gap:8px}
.main > .site-banners{margin-bottom:12px}
body > .site-banners{padding:10px 12px 0; max-width:1200px; margin-inline:auto}
.site-banner{
  --bc:var(--accent); display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:var(--radius); font-size:13.5px; line-height:1.9; color:var(--text);
  background:color-mix(in srgb,var(--bc) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--bc) 40%,transparent);
  box-shadow:inset 3px 0 0 var(--bc); animation:banner-in .5s var(--ease-out) both; position:relative;
}
html[dir=rtl] .site-banner{box-shadow:inset -3px 0 0 var(--bc)}
.site-banner-success{--bc:var(--success)}
.site-banner-warning{--bc:var(--warning)}
.site-banner-danger{--bc:var(--danger)}
.site-banner .sb-ico{flex:none; font-size:17px}
.site-banner .sb-msg{flex:1; min-width:0; word-break:break-word}
.site-banner .sb-link{font-weight:800; color:var(--bc); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.site-banner .sb-count{flex:none; padding:2px 11px; border-radius:99px; background:var(--tint-2); font:700 12.5px/1.8 ui-monospace,Menlo,Consolas,monospace}
.site-banner .sb-x{flex:none; width:28px; height:28px; border:none; border-radius:8px; background:transparent; color:var(--muted); font-size:19px; line-height:1; cursor:pointer}
.site-banner .sb-x:hover{background:var(--tint-2); color:var(--text)}
.site-banner.leaving{animation:banner-out .26s var(--ease-in-out) both}
@keyframes banner-in{from{opacity:0; transform:translateY(-10px)}}
@keyframes banner-out{to{opacity:0; transform:translateY(-8px) scale(.98)}}
@media (max-width:560px){.site-banner{flex-wrap:wrap}.site-banner .sb-msg{flex-basis:100%;order:2}}

@media print{
  .sidebar,.topbar,.sidebar-backdrop,#toast-root,.skip-link{display:none!important}
  body{background:#fff; color:#000}
  .card{box-shadow:none; border-color:#ccc}
}

/* ---- سوییچر آیتم‌ها (بیلبوردهای من، درخواست‌های تبلیغ، سفارش‌ها، ...) ---- */
.sw-bar{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.sw-bar button{flex:0 0 auto;height:32px;min-width:32px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--card-2);color:var(--text);cursor:pointer;font:inherit;font-size:14px}
.sw-bar button:hover:not(:disabled){border-color:var(--primary)}
.sw-bar button:disabled{opacity:.35;cursor:default}
.sw-bar button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.sw-tabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.sw-tabs::-webkit-scrollbar{display:none}
.sw-tabs button{height:28px;font-size:12px;font-family:monospace;white-space:nowrap}
.sw-count{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap}
[data-switcher] > .sw-hide{display:none !important}
[data-switcher].sw-all{display:grid;gap:14px}