/* ============================================================================
   plan-studio.css — ظاهرِ «نمای برنامه» (#scrPlanStudio) و «ویرایش برنامه»
   (#scrPlanStudioEdit).

   ── بازطراحیِ چهارم (۱۷ سپتامبر ۲۰۲۶): «ردیف، نه نشان» ─────────────────────
   شهاب گفت صفحه «خیلی گیج‌کننده و شلوغ و تو‌هم» است. سه ریشه پیدا شد و هر
   سه این‌جا حل شده‌اند:

     ۱. **فاز با رنگِ ردیف گفته می‌شود، نه با چیپِ نشان.** قبلاً هر ستون
        چهار قرصِ رنگیِ «کاردیو / گرم‌کردن / حرکاتِ اصلی / سردکردن» داشت که
        بینِ ردیف‌ها می‌نشستند و چشم را می‌کشیدند. حالا هر حرکت *یک ردیف*
        است: حرکاتِ اصلی ردیفِ کامل با زمینهٔ آبیِ خیلی‌خیلی روشن، و
        گرم‌کردن/کاردیو/سردکردن ردیفِ نازک با زمینهٔ سبز/قرمز/آبیِ خیلی
        ملایم. یک خطِ عنوانِ ریز (بی‌قاب) بالای هر دسته نام و مدت را
        می‌گوید، و همین.
     ۲. **ویرایش در پاپ‌آپ است، نه روی ردیف.** استپرهای − و + روی هر ردیف
        در حالتِ ویرایش، ردیف را سه‌خطه و شلوغ می‌کردند. حالا ردیفِ ویرایش و
        ردیفِ نما یکی‌اند؛ کلیک روی حرکت یک پنجرهٔ منظم باز می‌کند که همهٔ
        تنظیم‌ها را یک‌جا دارد (`.pg-modal`).
     ۳. **سربرگ خلوت است.** شناسنامهٔ برنامه (شاگرد، هدف، سطح، ساختار،
        آمارِ هفته) پشتِ یک چیپِ «شاگرد» رفت که با کلیک باز می‌شود. عنوان
        کوچک شد، آیکنِ اشتراک‌گذاری از ستون‌ها برداشته شد، و دکمه‌های
        فرعی به منوی «⋯» رفتند.

   ── زبانِ بصری ────────────────────────────────────────────────────────────
   همان قراردادِ `tokens.css`: شعاع از `--myo-r-*`، کارت = خطِ روشن + سایهٔ
   کم‌جان (`--myo-el-card`). زمینهٔ تخته یک پله *تیره‌تر* از کارت است تا
   ستون‌ها از پشتشان جدا شوند — خواستهٔ صریحِ شهاب.

   همهٔ کلاس‌ها پیشوندِ یکتای `pg-` دارند.
   ============================================================================ */

/* توکن‌ها روی `:root` می‌نشینند، نه روی `.sitpg` — کشوها، پاپ‌آپ و شبحِ کشیدن
   مستقیم به `document.body` وصل می‌شوند و بیرونِ `.sitpg`اند. */
:root {
    --pg-gap: 14px;

    /* مقیاسِ قلمِ محلی. کف ۱۱ است؛ پایین‌تر نرو. */
    --pg-fs-name: var(--myo-fs-md);    /* ۱۴ — نامِ حرکتِ اصلی */
    --pg-fs-row: var(--myo-fs-base);   /* ۱۳ — نامِ پروتکل، مقدارِ ست×تکرار */
    --pg-fs-sub: var(--myo-fs-sm);     /* ۱۲ — مشخصات */
    --pg-fs-min: var(--myo-fs-xs);     /* ۱۱ — کفِ مطلق */

    --pg-paper: var(--myo-paper);
    /* تخته یک پله تیره‌تر از کارت: ستونِ سفید روی آن جدا دیده می‌شود. */
    --pg-canvas: var(--myo-canvas);
    --pg-soft: var(--myo-surface);
    --pg-soft-2: var(--myo-surface-2);
    --pg-line: var(--myo-line);
    --pg-line-2: var(--myo-line-2);

    --pg-ink: var(--myo-ink);
    --pg-ink-2: var(--myo-ink-2);
    --pg-muted: var(--myo-ink-muted);
    --pg-faint: var(--myo-ink-faint);

    --pg-acc: var(--myo-brand);
    --pg-acc-ink: var(--myo-brand-ink);
    --pg-acc-soft: var(--myo-brand-soft);
    --pg-acc-soft-2: var(--myo-brand-soft-2);
    --pg-acc-line: var(--myo-brand-line);
    --pg-acc-line-2: var(--myo-brand-line-strong);
    --pg-acc-icon: var(--myo-brand-icon);

    --pg-ok: var(--myo-ok);
    --pg-ok-icon: var(--myo-ok-icon);
    --pg-ok-soft: var(--myo-ok-soft);
    --pg-ok-line: var(--myo-ok-line);
    --pg-warn: var(--myo-warn);
    --pg-warn-icon: var(--myo-warn-icon);
    --pg-warn-soft: var(--myo-warn-soft);
    --pg-warn-line: var(--myo-warn-line);
    --pg-bad: var(--myo-danger);
    --pg-bad-icon: var(--myo-danger-icon);
    --pg-bad-soft: var(--myo-danger-soft);
    --pg-bad-line: var(--myo-danger-line);

    --pg-r: var(--myo-r-md);
    --pg-r-sm: var(--myo-r-sm);
    --pg-r-lg: var(--myo-r-xl);
    --pg-ez: var(--myo-ez);

    /* ── چهار فاز: زمینهٔ تقریباً سفید + یک ریلِ اشباع ───────────────────
       دورِ قبل زمینه‌ها از پلهٔ ۱۰۰ می‌آمدند و شهاب گفت «هم پررنگ‌اند هم از
       هم جدا نمی‌شوند». این دو با هم حل نمی‌شوند اگر *فقط* زمینه کار کند:
       هرچه زمینه را کم‌رنگ‌تر کنی، تفاوتِ سبز و قرمزِ کم‌رنگ هم کمتر می‌شود.

       پس کار دو تکه شد: **زمینه از پلهٔ ۵۰ می‌آید** (تقریباً سفید، فقط یک
       ته‌رنگ) و **ریلِ ۳پیکسلیِ لبهٔ شروع از پلهٔ ۳۰۰**.
       رنگ کم شد ولی تفکیک بیشتر — چون تفکیک را حالا ریل می‌گوید، نه زمینه.

       ریل اولش پلهٔ ۴۰۰ بود و شهاب گفت هنوز تیره است. ۳۰۰ پاستلی‌ست ولی
       چهار رنگ در ۳ پیکسل هنوز از هم تشخیص داده می‌شوند؛ پایین‌تر از این
       (۲۰۰) دیگر با خطِ خاکستری اشتباه می‌شود. در تمِ تیره ریل روی ۴۰۰
       می‌ماند: آن‌جا پلهٔ کوچک‌تر یعنی تیره‌تر، یعنی ناپیدا.

         اصلی    آبیِ برند   — کارِ جلسه
         گرم‌کردن سبز        — شروع
         کاردیو  قرمز        — ضربان
         سردکردن آبی‌ـ‌فیروزه — آرام‌شدن

       نگاشت یک‌جاست؛ اگر شهاب جای سبز و قرمز را بخواهد عوض کند همین‌جاست. */
    --pg-main-bg: color-mix(in srgb, var(--myo-brand-50) 55%, var(--myo-paper));
    --pg-main-bg-2: color-mix(in srgb, var(--myo-brand-100) 55%, var(--myo-paper));
    --pg-main-line: color-mix(in srgb, var(--myo-brand-200) 40%, var(--myo-paper));
    --pg-main-rail: var(--myo-brand-300);
    --pg-main-ink: var(--myo-brand-ink);

    --pg-warm-bg: color-mix(in srgb, var(--myo-ok-50) 50%, var(--myo-paper));
    --pg-warm-line: color-mix(in srgb, var(--myo-ok-200) 34%, var(--myo-paper));
    --pg-warm-rail: var(--myo-ok-300);
    --pg-warm-ink: var(--myo-ok-ink);

    --pg-cardio-bg: color-mix(in srgb, var(--myo-danger-50) 46%, var(--myo-paper));
    --pg-cardio-line: color-mix(in srgb, var(--myo-danger-200) 34%, var(--myo-paper));
    --pg-cardio-rail: var(--myo-danger-300);
    --pg-cardio-ink: var(--myo-danger-ink);

    --pg-cool-bg: color-mix(in srgb, var(--myo-info-50) 50%, var(--myo-paper));
    --pg-cool-line: color-mix(in srgb, var(--myo-info-200) 34%, var(--myo-paper));
    --pg-cool-rail: var(--myo-info-300);
    --pg-cool-ink: var(--myo-info-ink);
}

/* در تمِ تیره چشم کروما را بیشتر می‌بیند (زمینه بی‌رنگ است)، پس همان نسبت‌ها
   یک ردیفِ کاردیوی شرابی می‌ساختند. زمینه رقیق‌تر می‌شود؛ ریل دست نمی‌خورد،
   چون کارِ *آن* دیده‌شدن است. */
html[data-theme="dark"] {
    --pg-main-bg: color-mix(in srgb, var(--myo-brand-50) 45%, var(--myo-paper));
    --pg-main-bg-2: color-mix(in srgb, var(--myo-brand-100) 40%, var(--myo-paper));
    --pg-main-line: color-mix(in srgb, var(--myo-brand-200) 32%, var(--myo-paper));
    --pg-warm-bg: color-mix(in srgb, var(--myo-ok-50) 40%, var(--myo-paper));
    --pg-warm-line: color-mix(in srgb, var(--myo-ok-200) 26%, var(--myo-paper));
    --pg-cardio-bg: color-mix(in srgb, var(--myo-danger-50) 36%, var(--myo-paper));
    --pg-cardio-line: color-mix(in srgb, var(--myo-danger-200) 24%, var(--myo-paper));
    --pg-cool-bg: color-mix(in srgb, var(--myo-info-50) 40%, var(--myo-paper));
    --pg-cool-line: color-mix(in srgb, var(--myo-info-200) 26%, var(--myo-paper));
    --pg-main-rail: var(--myo-brand-line-strong);
    --pg-warm-rail: var(--myo-ok-line-strong);
    --pg-cardio-rail: var(--myo-danger-line-strong);
    --pg-cool-rail: var(--myo-info-line-strong);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --pg-main-bg: color-mix(in srgb, var(--myo-brand-50) 45%, var(--myo-paper));
        --pg-main-bg-2: color-mix(in srgb, var(--myo-brand-100) 40%, var(--myo-paper));
        --pg-main-line: color-mix(in srgb, var(--myo-brand-200) 32%, var(--myo-paper));
        --pg-warm-bg: color-mix(in srgb, var(--myo-ok-50) 40%, var(--myo-paper));
        --pg-warm-line: color-mix(in srgb, var(--myo-ok-200) 26%, var(--myo-paper));
        --pg-cardio-bg: color-mix(in srgb, var(--myo-danger-50) 36%, var(--myo-paper));
        --pg-cardio-line: color-mix(in srgb, var(--myo-danger-200) 24%, var(--myo-paper));
        --pg-cool-bg: color-mix(in srgb, var(--myo-info-50) 40%, var(--myo-paper));
        --pg-cool-line: color-mix(in srgb, var(--myo-info-200) 26%, var(--myo-paper));
        --pg-main-rail: var(--myo-brand-line-strong);
        --pg-warm-rail: var(--myo-ok-line-strong);
        --pg-cardio-rail: var(--myo-danger-line-strong);
        --pg-cool-rail: var(--myo-info-line-strong);
    }
}

/* عرضِ کفِ ستون. ردیف‌ها در نما و ویرایش یک شکل‌اند، پس یک عدد کافی است. */
.sitpg { --pg-colw: minmax(248px, 1fr); }

@media (max-width: 1280px) {
    :root { --pg-gap: 12px; }
    .sitpg { --pg-colw: minmax(236px, 1fr); }
}

/* ══ قابِ صفحه ════════════════════════════════════════════════════════════
   این دو صفحه تنها جاهایی در اپ‌اند که *نباید* خودِ سند را اسکرول کنند. */
#scrPlanStudio.on,
#scrPlanStudioEdit.on {
    display: flex;
    height: calc(100dvh - var(--sx-topbar-h, 58px));
    overflow: hidden;
}
/* `min-width: 0` تزیینی نیست: آیتمِ فلکس زیرِ min-contentِ محتوایش جمع
   نمی‌شود و سربرگِ بی‌شکست کلِ قاب را پهن می‌کرد. */
#scrPlanStudio > .sitpg,
#scrPlanStudioEdit > .sitpg {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.sitpg {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: var(--pg-canvas);
    color: var(--pg-ink);
    font-family: var(--myo-font);
}

.sitpg *,
.sitpg *::before,
.sitpg *::after,
.pg-drawer *,
.pg-drawer *::before,
.pg-drawer *::after,
.pg-modal *,
.pg-modal *::before,
.pg-modal *::after { box-sizing: border-box; }

.pg-drawer,
.pg-modal,
#pgGhost { font-family: var(--myo-font); color: var(--pg-ink); }

.pg-num,
.sitpg .pg-num,
.pg-drawer .pg-num,
.pg-modal .pg-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   ۱. سربرگ — یک خط، خلوت.
   چپ به راستِ منطقی: بازگشت · (ویرایش) · عنوانِ کوچک · چیپِ شاگرد
   ··· وضعیتِ کیفیت ··· دو دکمهٔ اصلی + منو
   ══════════════════════════════════════════════════════════════════════════ */
.pg-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 50px;
    padding: 0 14px 0 12px;
    background: var(--pg-paper);
    border-bottom: 1px solid var(--pg-line);
    z-index: 4;
}
.sitpg.is-dirty .pg-bar { box-shadow: inset 0 -2px 0 var(--pg-acc); }

.pg-bar-start {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 0;
}
.pg-bar-mid { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pg-bar-end { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.pg-mode {
    flex: 0 0 auto;
    font-size: var(--pg-fs-min);
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--myo-r-pill);
    color: var(--pg-acc-ink);
    background: var(--pg-acc-soft-2);
}

/* عنوان: کوچک، کم‌رنگ، بریده‌شونده. عنوان جای تصمیم نیست. */
.pg-h1 {
    margin: 0;
    min-width: 0;
    font-size: var(--pg-fs-row);
    font-weight: 700;
    color: var(--pg-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30ch;
}

/* چیپِ شاگرد — تنها چیزی از شناسنامه که در سربرگ می‌ماند؛ کلیک، بقیه را
   در یک کارتِ بازشونده نشان می‌دهد. */
.pg-who {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--pg-line);
    border-radius: var(--myo-r-pill);
    background: var(--pg-paper);
    color: var(--pg-ink-2);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    max-width: 24ch;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez);
}
.pg-who svg { width: 14px; height: 14px; color: var(--pg-faint); flex: 0 0 auto; }
.pg-who svg.pg-who-cv { width: 11px; height: 11px; }
.pg-who-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-who:hover { background: var(--pg-soft); border-color: var(--pg-line-2); }
.pg-more.is-open .pg-who { background: var(--pg-acc-soft); border-color: var(--pg-acc-line); color: var(--pg-acc-ink); }

/* کارتِ شناسنامه — زیرِ چیپِ شاگرد */
.pg-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: 340px;
    padding: 14px;
    background: var(--pg-paper);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-lg);
    box-shadow: var(--myo-el-3);
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 30;
    cursor: default;
}
.pg-more.is-open .pg-pop { display: flex; animation: pgPop var(--myo-d-2) var(--pg-ez); }
.pg-pop-h { display: flex; align-items: center; gap: 8px; }
.pg-pop-h b { font-size: var(--myo-fs-md); font-weight: 800; color: var(--pg-ink); }
.pg-pop-h span { font-size: var(--pg-fs-min); color: var(--pg-faint); }
.pg-pop-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pg-pop-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border-radius: var(--pg-r);
    background: var(--pg-soft);
}
.pg-pop-stat b { font-size: var(--myo-fs-md); font-weight: 800; color: var(--pg-ink); font-variant-numeric: tabular-nums; }
.pg-pop-stat span { font-size: var(--pg-fs-min); color: var(--pg-faint); }
.pg-pop dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.pg-pop dt { font-size: var(--pg-fs-min); color: var(--pg-faint); white-space: nowrap; }
.pg-pop dd { margin: 0; font-size: var(--pg-fs-sub); color: var(--pg-ink-2); font-weight: 600; }

/* وضعیتِ کیفیت — کوتاه. متنش دو کلمه است. */
.pg-q {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--pg-ok-line);
    border-radius: var(--myo-r-pill);
    background: var(--pg-ok-soft);
    color: var(--pg-ok);
    font: inherit;
    font-size: var(--pg-fs-min);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.pg-q svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pg-q.is-warn { border-color: var(--pg-warn-line); background: var(--pg-warn-soft); color: var(--pg-warn); }
.pg-q.is-bad { border-color: var(--pg-bad-line); background: var(--pg-bad-soft); color: var(--pg-bad); }
.pg-q:hover { filter: brightness(.97); }

/* ── دکمه‌ها ─────────────────────────────────────────────────────────────── */
.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pg-line-2);
    border-radius: var(--myo-r-md);
    background: var(--pg-paper);
    color: var(--pg-ink-2);
    font: inherit;
    font-size: var(--pg-fs-row);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez),
                box-shadow var(--myo-d-1) var(--pg-ez);
}
.pg-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pg-btn:hover { background: var(--pg-soft); box-shadow: var(--myo-el-1); }
.pg-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.pg-btn.is-icon { width: 34px; padding: 0; justify-content: center; }
.pg-btn.is-ghost { background: transparent; border-color: transparent; color: var(--pg-muted); }
.pg-btn.is-ghost:hover { background: var(--pg-soft-2); box-shadow: none; }

/* همان قاعدهٔ `myo-ds.css`: پُرِ آبی = ویرایش/بردن، پُرِ سبز = ثبت/تأیید. */
.pg-btn.is-primary { background: var(--pg-acc); border-color: transparent; color: var(--myo-on-brand); }
.pg-btn.is-primary:hover { background: var(--pg-acc-ink); box-shadow: var(--myo-el-brand); }
.pg-btn.is-go { background: var(--myo-ok-fill); border-color: transparent; color: var(--myo-on-fill); }
.pg-btn.is-go:hover { background: var(--pg-ok); box-shadow: var(--myo-el-1); }
.pg-btn.is-go.is-clean { background: var(--pg-paper); color: var(--pg-muted); border-color: var(--pg-line-2); }
.pg-btn.is-go.is-busy { opacity: .7; }
.pg-btn.is-danger { color: var(--pg-bad); border-color: var(--pg-bad-line); }
.pg-btn.is-danger:hover { background: var(--pg-bad-soft); }

.pg-badge {
    font-style: normal;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--myo-r-pill);
    background: rgba(255, 255, 255, .28);
    font-size: var(--pg-fs-min);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pg-btn.is-clean .pg-badge { background: var(--pg-soft-2); }

/* منوها */
.pg-more { position: relative; display: inline-flex; }
.pg-more-pop {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 236px;
    padding: 5px;
    background: var(--pg-paper);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-lg);
    box-shadow: var(--myo-el-3);
    display: none;
    flex-direction: column;
    gap: 1px;
    z-index: 30;
}
.pg-more.is-open .pg-more-pop { display: flex; animation: pgPop var(--myo-d-2) var(--pg-ez); }
@keyframes pgPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pg-more-pop hr { border: 0; border-top: 1px solid var(--pg-line); margin: 4px 6px; }
.pg-more-pop button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: var(--pg-r-sm);
    background: transparent;
    color: var(--pg-ink-2);
    font: inherit;
    font-size: var(--pg-fs-row);
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}
.pg-more-pop button svg { width: 16px; height: 16px; color: var(--pg-faint); flex: 0 0 auto; }
.pg-more-pop button:hover { background: var(--pg-soft-2); color: var(--pg-ink); }
.pg-more-pop button.is-on { color: var(--pg-acc-ink); }
.pg-more-pop button.is-on svg { color: var(--pg-acc-icon); }

/* ══════════════════════════════════════════════════════════════════════════
   ۲. تخته و ستون
   ══════════════════════════════════════════════════════════════════════════ */
.pg-board {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: var(--pg-gap) 16px 16px;
}
.pg-grid {
    display: grid;
    gap: var(--pg-gap);
    height: 100%;
    align-items: stretch;
}

/* کارتِ ستون: سفید روی زمینهٔ خاکستری‌ـ‌آبیِ تخته، خطِ روشن + سایهٔ نرم.
   جداشدنِ ستون از پشتش همین دو چیز است — نه رنگ، نه قابِ ضخیم. */
.pg-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--pg-paper);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-lg);
    box-shadow: var(--myo-el-2);
    overflow: hidden;
    animation: pgCol var(--myo-d-3) var(--pg-ez) both;
}
@keyframes pgCol { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pg-col:nth-child(2) { animation-delay: 30ms; }
.pg-col:nth-child(3) { animation-delay: 60ms; }
.pg-col:nth-child(4) { animation-delay: 90ms; }
.pg-col:nth-child(5) { animation-delay: 120ms; }
.pg-col:nth-child(6) { animation-delay: 150ms; }
.pg-col:nth-child(7) { animation-delay: 180ms; }

/* ── سربرگِ ستون: دو خط، سه بخش ──────────────────────────────────────────
   «دوشنبه» سرِ راست، «Full Body A» سرِ چپ، هر دو هم‌اندازه و درشت؛ شمارشِ
   جلسه خطِ بعد و وسط‌چین. (خواستهٔ شهاب، ۱۷ سپتامبر ۲۰۲۶.) پیش از این نام
   یک زیرنویسِ کم‌رنگِ چسبیده به روز بود و در نگاهِ اول دیده نمی‌شد.

   **چرا دو خط و نه سه‌بخشِ یک‌خطی:** در یک ستونِ ۲۴۸پیکسلی (هفتهٔ شش‌روزه
   روی ۱۴۴۰) مجموعِ «چهارشنبه» + «تمام‌بدن ۴» + «۸ حرکت · ۲۴ ست · ۵۵ دقیقه»
   حدودِ ۲۶۰ پیکسل است. یک‌خطی‌کردنش یعنی نامِ جلسه سه‌نقطه بخورد — همان
   چیزی که قرار بود درست شود. `flex: 1 1 100%` روی شمارش کاری می‌کند که
   *همیشه* خطِ خودش را بگیرد، پس چیدمان در ۳ روز و ۶ روز یکی است. */
.pg-ch {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    padding: 10px 14px 9px;
    border-bottom: 1px solid var(--pg-line);
}
.pg-ch-wd,
.pg-ch-name {
    min-width: 0;
    font-size: var(--myo-fs-md);
    font-weight: 800;
    color: var(--pg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-ch-wd { flex: 0 1 auto; }
/* نام کلِ فضای باقی‌مانده را می‌گیرد تا `text-align: left` واقعاً به لبهٔ
   چپ برساندش. `plaintext` جهت را از اولین حرفِ *خودِ نام* می‌گیرد:
   «Full Body A» چپ‌به‌راست و «سینه و پشت‌بازو» راست‌به‌چپ. */
.pg-ch-name { flex: 1 1 auto; unicode-bidi: plaintext; text-align: left; }
.pg-ch-nums {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--pg-fs-min);
    color: var(--pg-faint);
    white-space: nowrap;
    overflow: hidden;
}
.pg-ch-nums b { font-weight: 700; color: var(--pg-muted); font-variant-numeric: tabular-nums; }
.pg-ch-nums i { font-style: normal; opacity: .4; margin: 0 2px; }
.pg-ch-todo {
    font-style: normal;
    margin-inline-start: 4px;
    padding: 1px 7px;
    border-radius: var(--myo-r-pill);
    background: var(--pg-warn-soft);
    color: var(--pg-warn);
    font-weight: 700;
}

/* بدنهٔ ستون: تنها اسکرولرِ عمودیِ صفحه */
.pg-clist {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── نوارِ اسکرول: فقط وقتی اسکرول می‌شود ─────────────────────────────────
   خواستهٔ شهاب: «اسکرول‌ها اگر اسکرول انجام شد دیده بشوند، نه دائم». پس
   رنگِ نوار پیش‌فرض شفاف است و `plan-studio.js` هنگامِ اسکرول کلاسِ
   `is-scrolling` را می‌گذارد و ۷۰۰ms بعد برمی‌دارد.

   **جا همیشه رزرو است** (`scrollbar-width: thin` جای خودش را می‌گیرد)، پس
   پیدا و ناپیداشدنِ نوار چیدمان را تکان نمی‌دهد — که خودش یک نوع پرش بود.

   دو نسخه لازم است: کرومیومِ ۱۲۱ به بعد `scrollbar-color` را می‌فهمد و آن
   وقت شبه‌المان‌های `-webkit-` را *نادیده* می‌گیرد؛ نسخه‌های قدیمی‌تر
   برعکس. هر دو نوشته شده‌اند و هیچ‌وقت هم‌زمان اثر نمی‌کنند. */
.pg-board,
.pg-clist {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--myo-d-2) linear;
}
.pg-board.is-scrolling,
.pg-clist.is-scrolling { scrollbar-color: var(--pg-line-2) transparent; }
.pg-board::-webkit-scrollbar,
.pg-clist::-webkit-scrollbar { width: 8px; height: 8px; }
.pg-board::-webkit-scrollbar-track,
.pg-clist::-webkit-scrollbar-track { background: transparent; }
.pg-board::-webkit-scrollbar-thumb,
.pg-clist::-webkit-scrollbar-thumb { background: transparent; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.pg-board.is-scrolling::-webkit-scrollbar-thumb,
.pg-clist.is-scrolling::-webkit-scrollbar-thumb { background: var(--pg-line-2); background-clip: padding-box; }

/* ══════════════════════════════════════════════════════════════════════════
   ۳. دسته‌ها — یک خطِ عنوانِ ریز (بی‌قاب) و زیرش ردیف‌ها
   ══════════════════════════════════════════════════════════════════════════ */
.pg-grp { display: flex; flex-direction: column; gap: 6px; --gc: var(--pg-main-ink);
    transition: row-gap var(--myo-d-2) var(--pg-ez); }
.pg-grp.is-warm { --gc: var(--pg-warm-ink); }
.pg-grp.is-cardio { --gc: var(--pg-cardio-ink); }
.pg-grp.is-cool { --gc: var(--pg-cool-ink); }
.pg-grp.is-main { gap: 7px; }

.pg-grp-h { display: flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 2px; }
.pg-grp-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gc);
    font: inherit;
    font-size: var(--pg-fs-min);
    font-weight: 800;
    letter-spacing: .1px;
    cursor: pointer;
    text-align: start;
}
.pg-grp-cap.is-static { cursor: default; }
/* نام سرِ راست، شمارش سرِ چپ — خواستهٔ شهاب، برای هر چهار فاز. `auto` روی
   لبهٔ *منطقیِ* شروع است، پس در RTL شمارش می‌رود سمتِ چپ. */
.pg-grp-t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-grp-n {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 8px;
    color: var(--pg-faint);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* همان قراردادِ `.pg-ch-nums` در سربرگِ روز: عدد پررنگ، جداکننده کم‌رنگ و
   فاصله‌دار. بدونِ `margin` روی `i`، نقطه به رقمِ فارسی می‌چسبد و «۵ حرکت ·
   ۵ دقیقه» را «۵۰ دقیقه» می‌خوانی. */
.pg-grp-n b { font-weight: 700; color: var(--pg-muted); font-variant-numeric: tabular-nums; }
.pg-grp-n i { font-style: normal; opacity: .4; margin: 0 5px; }
.pg-grp-cap .pg-chev {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: var(--pg-faint);
    opacity: 0;
    transition: transform var(--myo-d-2) var(--pg-ez), opacity var(--myo-d-1);
}
.pg-grp-h:hover .pg-chev,
.pg-grp.is-folded .pg-chev { opacity: 1; }
.pg-grp.is-folded .pg-chev { transform: rotate(-90deg); }
.pg-grp.is-folded { row-gap: 0; }

/* ── جمع‌شدن: ارتفاع را گرید می‌بندد، نه حذفِ محتوا ───────────────────────
   قبلاً بدنه اصلاً رندر نمی‌شد و جمع/بازکردن یک `renderBoard()` کامل بود:
   کلِ هفته دوباره ساخته می‌شد، انیمیشنِ ورودِ ستون‌ها دوباره پخش می‌شد، و
   چشم یک پرش می‌دید. حالا بدنه همیشه در DOM است و فقط یک کلاس عوض می‌شود.

   `grid-template-rows: 1fr → 0fr` تنها راهِ انیمیشنِ ارتفاعِ *نامعلوم* است
   بدون اندازه‌گیری با JS؛ `height: auto` انیمیشن نمی‌گیرد و `max-height`ِ
   حدسی یا می‌بُرد یا کُند بود. */
.pg-grp-fold {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--myo-d-2) var(--pg-ez);
}
.pg-grp-fold > .pg-grp-b {
    min-height: 0;
    overflow: hidden;
    transition: opacity var(--myo-d-2) var(--pg-ez);
}
.pg-grp.is-folded > .pg-grp-fold { grid-template-rows: 0fr; }
.pg-grp.is-folded > .pg-grp-fold > .pg-grp-b { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .pg-grp, .pg-grp-fold, .pg-grp-fold > .pg-grp-b { transition: none; }
}
.pg-grp-b { display: flex; flex-direction: column; gap: 5px; }
.pg-grp.is-main .pg-grp-b { gap: 7px; }

/* دکمهٔ ریزِ افزودن در عنوانِ دسته — فقط ویرایش */
.pg-ic {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--pg-r-sm);
    background: transparent;
    color: var(--pg-faint);
    cursor: pointer;
    opacity: .45;
    transition: background var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez), opacity var(--myo-d-1);
}
.pg-ic svg { width: 13px; height: 13px; }
.pg-grp-h:hover .pg-ic { opacity: 1; }
.pg-ic:hover { background: var(--pg-acc-soft); color: var(--pg-acc-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   ۴. ردیفِ پروتکل — یک خطِ نازک با ریلِ رنگی
   ══════════════════════════════════════════════════════════════════════════ */
/* ریل روی لبهٔ *منطقیِ* شروع می‌نشیند (`border-inline-start`)، پس در RTL
   سمتِ راست است. با `box-shadow: inset` همین کار جهت‌آگاه نبود و ریل
   می‌افتاد سمتِ چپ. */
.pg-prow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--pg-r-sm);
    border: 1px solid transparent;
    border-inline-start: 3px solid transparent;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez);
}
.pg-prow.is-warm { background: var(--pg-warm-bg); border-color: var(--pg-warm-line); border-inline-start-color: var(--pg-warm-rail); }
.pg-prow.is-cardio { background: var(--pg-cardio-bg); border-color: var(--pg-cardio-line); border-inline-start-color: var(--pg-cardio-rail); }
.pg-prow.is-cool { background: var(--pg-cool-bg); border-color: var(--pg-cool-line); border-inline-start-color: var(--pg-cool-rail); }
.pg-prow:hover { background: var(--pg-soft-2); }
.pg-prow-n {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--pg-fs-sub);
    font-weight: 600;
    color: var(--pg-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-prow-v {
    flex: 0 0 auto;
    font-size: var(--pg-fs-min);
    font-weight: 700;
    color: var(--pg-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   ۵. ردیفِ حرکتِ اصلی — یک خط، برجسته

   سه تصمیم، هر سه خواستهٔ صریحِ شهاب (۱۷ سپتامبر ۲۰۲۶):

     • **یک خط، نه دو.** خطِ دومِ مشخصات («جلو پا · ۹۰ ثانیه · RIR ۲») حذف
       شد — «کارایی فعلاً ندارد». مانده: شماره، نام، و نسخه. ردیف از ۵۰ به
       ۳۸ پیکسل رسید و یک ستون حالا تقریباً دو برابرِ قبل حرکت نشان می‌دهد.
     • **برجسته.** ردیف یک کارتِ کوچکِ بالاآمده است: زمینهٔ تقریباً سفید،
       خطِ مویی، و سایهٔ دولایه. روی هاور یک پیکسل بالاتر می‌آید.
     • **رنگ کمتر، تفکیک بیشتر.** ته‌رنگِ زمینه از پلهٔ ۵۰ می‌آید (تقریباً
       سفید) و ریلِ ۳پیکسلی از پلهٔ ۴۰۰ (اشباع). پیش از این هر دو کار را
       زمینه می‌کرد و نتیجه‌اش «هم پررنگ، هم مبهم» بود.
   ══════════════════════════════════════════════════════════════════════════ */
.pg-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 5px 11px 5px 8px;
    border: 1px solid var(--pg-main-line);
    border-inline-start: 3px solid var(--pg-main-rail);
    border-radius: var(--pg-r);
    background: var(--pg-main-bg);
    box-shadow: var(--myo-el-card);
    cursor: pointer;
    transition: border-color var(--myo-d-1) var(--pg-ez), box-shadow var(--myo-d-1) var(--pg-ez),
                background var(--myo-d-1) var(--pg-ez), transform var(--myo-d-1) var(--pg-ez);
}
.pg-row:hover {
    background: var(--pg-main-bg-2);
    border-color: var(--pg-acc-line);
    border-inline-start-color: var(--pg-acc);
    box-shadow: var(--myo-el-2);
    transform: translateY(-1px);
}
.pg-row.is-open {
    border-color: var(--pg-acc);
    border-inline-start-color: var(--pg-acc);
    box-shadow: 0 0 0 2px var(--pg-acc-soft-2), var(--myo-el-2);
    transform: none;
}
/* ناقص: ریل کهربایی می‌شود. یک نشانهٔ اضافه لازم نیست — خودِ عددِ نسخه هم
   کهربایی و «—» است. */
.pg-row.is-todo { border-inline-start-color: var(--myo-warn-line-strong); border-color: var(--pg-warn-line); }
.pg-row.is-flash,
.pg-prow.is-flash { animation: pgFlash 1.4s var(--pg-ez); }
@keyframes pgFlash { 22% { box-shadow: 0 0 0 3px var(--pg-acc-line); } }

/* پررنگ‌کردنِ عضله از کشوی حجم: بقیه کم‌رنگ می‌شوند. */
.sitpg.pg-hot .pg-row { opacity: .3; box-shadow: none; }
.sitpg.pg-hot .pg-row.is-hot {
    opacity: 1;
    border-color: var(--pg-acc);
    box-shadow: 0 0 0 2px var(--pg-acc-soft-2), var(--myo-el-2);
}

/* شمارهٔ ردیف عمداً *خنثی* است، نه هم‌رنگِ ریل: ریل پلهٔ ۴۰۰ است و برای یک
   نوارِ تزیینی بس است، ولی همین رنگ روی یک رقم کنتراستِ ~۲.۱ می‌دهد. یک
   لهجهٔ رنگی در هر ردیف کافی است و آن عددِ نسخه است. */
.pg-rn {
    flex: 0 0 auto;
    min-width: 16px;
    text-align: center;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    color: var(--pg-faint);
    font-variant-numeric: tabular-nums;
}
.pg-row.is-todo .pg-rn { color: var(--pg-warn); }
.pg-rname {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--pg-fs-name);
    font-weight: 700;
    color: var(--pg-ink);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* نشانه‌های حالت — فقط آن‌هایی که *تصمیم* را عوض می‌کنند. عضله و استراحت و
   RIR در پاپ‌آپ‌اند؛ سوپرست و «ناقص» باید در نگاهِ اول دیده شوند. */
.pg-rflags { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.pg-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    padding: 0 6px;
    border-radius: var(--myo-r-pill);
    font-size: var(--pg-fs-min);
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.pg-flag svg { width: 10px; height: 10px; }
.pg-flag.is-ss { background: var(--pg-acc-soft-2); color: var(--pg-acc-ink); padding: 0 5px; }
.pg-flag.is-todo { background: var(--pg-warn-soft); color: var(--pg-warn); }

/* «۳ × ۱۰–۱۲» تنها عددِ نسخه است و حالا تنها عددِ ردیف — باید از دور خوانده
   شود. */
.pg-rset {
    flex: 0 0 auto;
    font-size: var(--pg-fs-row);
    font-weight: 800;
    color: var(--pg-main-ink);
    letter-spacing: .2px;
    white-space: nowrap;
}
.pg-rset i { font-style: normal; opacity: .4; margin: 0 2px; font-weight: 600; }
.pg-rset.is-none { color: var(--pg-warn); }

/* ابزارهای ویرایشِ روی ردیف — فقط دو تا: دستگیرهٔ کشیدن و حذف. بقیهٔ کارها
   در پاپ‌آپ‌اند. تا هاور کم‌رنگ‌اند («پیدا ولی ساکت»). */
.pg-grip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 10px;
    height: 24px;
    margin-inline-end: -3px;
    color: var(--pg-faint);
    opacity: .35;
    cursor: grab;
    touch-action: none;
}
.pg-row:hover .pg-grip { opacity: 1; }
.pg-grip:hover { color: var(--pg-acc-icon); }
.pg-grip svg { width: 6px; height: 15px; }

.pg-xs {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pg-muted);
    cursor: pointer;
    opacity: 0;
    transition: background var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez), opacity var(--myo-d-1);
}
.pg-xs svg { width: 12px; height: 12px; }
.pg-row:hover .pg-xs,
.pg-prow:hover .pg-xs { opacity: .7; }
.pg-xs:hover { opacity: 1 !important; background: var(--pg-bad-soft); color: var(--pg-bad); }

/* افزودن — دعوتِ صریح، یک بار در تهِ حرکاتِ اصلی */
.pg-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    margin-top: 2px;
    border: 1px dashed var(--pg-acc-line-2);
    border-radius: var(--pg-r);
    background: transparent;
    color: var(--pg-acc-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez);
}
.pg-add svg { width: 14px; height: 14px; }
.pg-add:hover { border-style: solid; background: var(--pg-acc-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   ۶. بلوکِ سیستمِ تمرینی — چند ردیفِ پیاپی که *یک* کارند
   ══════════════════════════════════════════════════════════════════════════ */
.pg-tt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 6px 6px 8px;
    border: 1px solid var(--pg-line);
    border-inline-start: 3px solid var(--tt-c, var(--pg-acc));
    border-radius: var(--pg-r);
    background: var(--pg-paper);
}
.pg-tt-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 2px 3px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--pg-fs-min);
    color: var(--pg-muted);
    cursor: pointer;
    text-align: start;
}
.pg-tt-hd b { font-weight: 800; color: var(--tt-c, var(--pg-acc-ink)); }
.pg-tt-hd:hover b { text-decoration: underline; }
.pg-tt-i { font-size: 12px; line-height: 1; }
.pg-tt-rounds { margin-inline-start: auto; font-weight: 700; color: var(--pg-faint); }
.pg-tt-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-start: 22px;
    font-size: var(--pg-fs-min);
    color: var(--pg-faint);
}
.pg-tt-link::before { content: ""; width: 10px; border-top: 1px dashed var(--pg-line-2); }
.pg-tt-foot { padding: 3px 2px 0; font-size: var(--pg-fs-min); color: var(--pg-faint); }
.pg-tt-foot b { color: var(--pg-ink-2); font-variant-numeric: tabular-nums; }

.pg-empty { padding: 18px 10px; text-align: center; font-size: var(--pg-fs-sub); color: var(--pg-faint); line-height: 1.9; }

/* ══════════════════════════════════════════════════════════════════════════
   ۷. کشیدن
   ══════════════════════════════════════════════════════════════════════════ */
body.pg-dragging { cursor: grabbing; user-select: none; }
.pg-row.is-dragging { opacity: .35; }
.pg-mainbody.is-drop { outline: 2px dashed var(--pg-acc-line-2); outline-offset: 3px; border-radius: var(--pg-r-sm); }
.pg-dropline { height: 3px; border-radius: 3px; background: var(--pg-acc); box-shadow: 0 0 0 3px var(--pg-acc-soft); margin: 1px 0; }
#pgGhost {
    position: fixed;
    z-index: 90;
    /* جا را فقط `transform` می‌دهد. پیش از این `inset-inline-start` بود که در
       RTL به `right: 0` ترجمه می‌شد و با `left`ی که JS می‌نوشت جمع می‌بست:
       قرص از زیرِ نشانگر تا لبهٔ صفحه کش می‌آمد و یک نوارِ تیرهٔ بی‌معنا
       کنارِ دست می‌ماند. */
    left: 0;
    top: 0;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
    padding: 5px 11px;
    border-radius: var(--myo-r-pill);
    background: var(--myo-deep, var(--pg-ink));
    color: var(--myo-on-deep, #fff);
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    box-shadow: var(--myo-el-3);
    white-space: nowrap;
}
#pgGhost.is-on { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   ۸. پاپ‌آپِ حرکت — کارتِ حرکت در نما، و میزِ کارِ زبانه‌دار در ویرایش

   روی `.sx-modal` سوار است (رفتارِ Esc / پس‌زمینه / تلهٔ فوکوس از modal.js).

   سه تصمیمِ این دور:

     • **زمینهٔ بدنه تخته‌ای است و هر بخش یک کارتِ سفید.** همان قاعدهٔ
       ستون‌های تخته. پیش از این همه‌چیز روی یک سطحِ سفید بود و فقط یک
       تیترِ ریزِ خاکستری بخش‌ها را از هم جدا می‌کرد — یعنی عملاً هیچ.
     • **سربرگ رنگِ فازِ همان ردیف را می‌گیرد.** پاپ‌آپ باید *همان ردیفی*
       به نظر برسد که مربی رویش زد، نه پنجره‌ای غریبه.
     • **در ویرایش، چهار زبانه.** پیش از این نسخه و جابه‌جایی و تعویض و
       «چرا» پشتِ هم در یک ستونِ ۸۴۰پیکسلی می‌آمدند و هم‌وزن بودند.
   ══════════════════════════════════════════════════════════════════════════ */
.pg-modal .sx-modal-box {
    width: min(100%, 640px);
    max-height: calc(100dvh - 40px);
    /* سربرگِ رنگی وگرنه گوشه‌های گردِ کادر را چهارگوش می‌کند. */
    overflow: hidden;
}

/* ── سربرگ ────────────────────────────────────────────────────────────── */
.pg-mhead {
    flex: 0 0 auto;
    --mb: var(--pg-main-bg);
    --ml: var(--pg-main-line);
    --mr: var(--pg-main-rail);
    --mc: var(--pg-main-ink);
    padding: 13px 18px 14px;
    background: var(--mb);
    border-bottom: 1px solid var(--ml);
    border-inline-start: 4px solid var(--mr);
}
.pg-mhead.is-warm { --mb: var(--pg-warm-bg); --ml: var(--pg-warm-line); --mr: var(--pg-warm-rail); --mc: var(--pg-warm-ink); }
.pg-mhead.is-cardio { --mb: var(--pg-cardio-bg); --ml: var(--pg-cardio-line); --mr: var(--pg-cardio-rail); --mc: var(--pg-cardio-ink); }
.pg-mhead.is-cool { --mb: var(--pg-cool-bg); --ml: var(--pg-cool-line); --mr: var(--pg-cool-rail); --mc: var(--pg-cool-ink); }

.pg-mtop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pg-mtop .pg-sp { flex: 1 1 auto; }
.pg-mphase {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--myo-r-pill);
    border: 1px solid var(--ml);
    background: var(--pg-paper);
    color: var(--mc);
    font-size: var(--pg-fs-min);
    font-weight: 800;
    letter-spacing: .1px;
}
.pg-mpos { font-size: var(--pg-fs-min); font-weight: 700; color: var(--pg-muted); }
.pg-mhead h2 {
    margin: 0;
    font-size: var(--myo-fs-xl);
    font-weight: 800;
    color: var(--pg-ink);
    letter-spacing: -.3px;
    line-height: 1.35;
}
.pg-mwhere {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: var(--pg-fs-sub);
    color: var(--pg-muted);
}
.pg-mwhere i { font-style: normal; opacity: .4; }
.pg-mx {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin: -3px -6px -3px 0;
    border: 0;
    border-radius: var(--pg-r-sm);
    background: transparent;
    color: var(--pg-muted);
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez);
}
.pg-mx svg { width: 16px; height: 16px; }
.pg-mx:hover { background: var(--pg-paper); color: var(--pg-ink); }

/* ── زبانه‌ها (فقط ویرایش) ─────────────────────────────────────────────── */
.pg-mtabs {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 5px 8px 0;
    background: var(--pg-paper);
    border-bottom: 1px solid var(--pg-line);
}
.pg-mtab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 6px 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--pg-muted);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: color var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez);
}
.pg-mtab svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }
.pg-mtab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-mtab i {
    flex: 0 0 auto;
    font-style: normal;
    min-width: 17px;
    padding: 0 4px;
    border-radius: var(--myo-r-pill);
    background: var(--pg-soft-2);
    color: var(--pg-muted);
    font-size: var(--pg-fs-min);
    font-weight: 800;
}
.pg-mtab:hover { color: var(--pg-ink); }
.pg-mtab.is-on { color: var(--pg-acc-ink); border-bottom-color: var(--pg-acc); }
.pg-mtab.is-on svg { color: var(--pg-acc-icon); opacity: 1; }
.pg-mtab.is-on i { background: var(--pg-acc-soft-2); color: var(--pg-acc-ink); }

/* ── بدنه ─────────────────────────────────────────────────────────────── */
.pg-mbody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--pg-canvas);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--myo-d-2) linear;
}
.pg-mbody.is-scrolling { scrollbar-color: var(--pg-line-2) transparent; }
.pg-mbody::-webkit-scrollbar { width: 8px; }
.pg-mbody::-webkit-scrollbar-track { background: transparent; }
.pg-mbody::-webkit-scrollbar-thumb { background: transparent; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.pg-mbody.is-scrolling::-webkit-scrollbar-thumb { background: var(--pg-line-2); background-clip: padding-box; }

/* هر بخش یک کارت. */
.pg-modal .pg-msec {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 13px;
    background: var(--pg-paper);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    box-shadow: var(--myo-el-card);
}
.pg-modal .pg-msec-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pg-fs-min);
    font-weight: 800;
    color: var(--pg-muted);
    letter-spacing: .1px;
}
.pg-modal .pg-msec-h svg { width: 13px; height: 13px; color: var(--pg-faint); flex: 0 0 auto; }
.pg-modal .pg-msec-h em { font-style: normal; font-weight: 600; color: var(--pg-faint); }
/* سه بخشِ «گفتنی» با ریلِ رنگی از بخش‌های «کارکردی» جدا می‌شوند. */
.pg-modal .pg-msec.is-why { border-inline-start: 3px solid var(--pg-acc-line); }
.pg-modal .pg-msec.is-why .pg-msec-h svg { color: var(--pg-acc-icon); }
.pg-modal .pg-msec.is-note { border-inline-start: 3px solid var(--pg-warn-line); background: color-mix(in srgb, var(--pg-warn-soft) 45%, var(--pg-paper)); }
.pg-modal .pg-msec.is-note .pg-msec-h svg { color: var(--pg-warn-icon); }
.pg-modal .pg-msec.is-tt { border-inline-start: 3px solid var(--tt-c, var(--pg-acc)); }
.pg-tt-em { font-size: 13px; line-height: 1; }

.pg-mhint { margin: 0; font-size: var(--pg-fs-min); color: var(--pg-faint); line-height: 1.85; }
.pg-mhint svg { width: 12px; height: 12px; vertical-align: -2px; margin-inline-end: 4px; color: var(--pg-acc-icon); }

/* ── کارتِ نسخه ───────────────────────────────────────────────────────── */
.pg-dose {
    --db: var(--pg-main-bg);
    --dl: var(--pg-main-line);
    --dr: var(--pg-main-rail);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 11px;
    background: var(--db);
    border: 1px solid var(--dl);
    border-inline-start: 3px solid var(--dr);
    border-radius: var(--pg-r);
    box-shadow: var(--myo-el-card);
}
.pg-dose.is-warm { --db: var(--pg-warm-bg); --dl: var(--pg-warm-line); --dr: var(--pg-warm-rail); }
.pg-dose.is-cardio { --db: var(--pg-cardio-bg); --dl: var(--pg-cardio-line); --dr: var(--pg-cardio-rail); }
.pg-dose.is-cool { --db: var(--pg-cool-bg); --dl: var(--pg-cool-line); --dr: var(--pg-cool-rail); }

.pg-dhero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pg-dv { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.pg-dv b {
    font-size: 27px;
    font-weight: 800;
    color: var(--pg-ink);
    letter-spacing: -.6px;
    line-height: 1.1;
}
.pg-dv.is-wide b { font-size: var(--myo-fs-lg); letter-spacing: -.2px; }
.pg-dv b.is-none { color: var(--pg-warn); }
.pg-dv em { font-style: normal; font-size: var(--pg-fs-sub); font-weight: 700; color: var(--pg-muted); }
.pg-dx { font-style: normal; font-size: var(--myo-fs-lg); font-weight: 600; color: var(--pg-faint); }
.pg-dsum {
    margin: 0;
    margin-inline-start: auto;
    font-size: var(--pg-fs-min);
    font-weight: 700;
    color: var(--pg-muted);
    white-space: nowrap;
}
/* خلاصهٔ زندهٔ زیرِ استپرها: خطِ جدا، وگرنه با خودِ فیلدها قاطی می‌شود. */
.pg-dsum.is-live {
    margin: 0;
    padding-top: 9px;
    border-top: 1px solid var(--pg-line);
    text-align: start;
}

.pg-dcells { display: flex; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--dl); }
.pg-dc {
    flex: 1 1 0;
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 8px;
    border-inline-start: 1px solid var(--dl);
    text-align: center;
}
.pg-dc:first-child { border-inline-start: 0; }
.pg-dc b { font-size: var(--myo-fs-md); font-weight: 800; color: var(--pg-ink); }
.pg-dc > span { font-size: var(--pg-fs-min); color: var(--pg-muted); }
.pg-dc em { font-style: normal; font-size: var(--pg-fs-min); color: var(--pg-faint); }

.pg-dnote {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--pg-fs-min);
    font-weight: 600;
    color: var(--pg-ink-2);
}
.pg-dnote svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--pg-acc-icon); }
.pg-dnote.is-plain { font-weight: 600; color: var(--pg-muted); }
.pg-dnote.is-plain::before { content: ''; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--pg-faint); opacity: .6; }

/* ── فهرستِ مشخصات: برچسب ← مقدار ─────────────────────────────────────── */
.pg-defs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pg-def {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 6px 0;
    border-top: 1px solid var(--pg-line);
}
.pg-def:nth-child(1),
.pg-def:nth-child(2) { border-top: 0; padding-top: 0; }
.pg-def dt { flex: 0 0 auto; font-size: var(--pg-fs-min); font-weight: 700; color: var(--pg-faint); }
.pg-def dd {
    margin: 0;
    min-width: 0;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    color: var(--pg-ink);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .pg-defs { grid-template-columns: 1fr; }
    .pg-def:nth-child(2) { border-top: 1px solid var(--pg-line); padding-top: 6px; }
}

/* ── چهار فیلدِ عددی ──────────────────────────────────────────────────── */
.pg-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pg-fields.is-two { grid-template-columns: 2fr 1fr; }
.pg-fld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 8px 8px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    background: var(--pg-soft);
}
.pg-fld > span { font-size: var(--pg-fs-min); font-weight: 700; color: var(--pg-faint); text-align: center; }
.pg-fld > span b { color: var(--pg-ink-2); }
.pg-fld.is-text > span { text-align: start; }
.pg-stp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 34px;
    padding: 0 3px;
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    transition: border-color var(--myo-d-1) var(--pg-ez), box-shadow var(--myo-d-1) var(--pg-ez);
}
.pg-stp:focus-within { border-color: var(--pg-acc); box-shadow: 0 0 0 3px var(--pg-acc-soft-2); }
.pg-stp-b {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--pg-r-sm);
    background: transparent;
    color: var(--pg-muted);
    font: inherit;
    font-size: var(--myo-fs-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez);
}
.pg-stp-b:hover { background: var(--pg-acc-soft-2); color: var(--pg-acc-ink); }
.pg-stp-v {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--pg-ink);
    font: inherit;
    font-size: var(--pg-fs-row);
    font-weight: 800;
    text-align: center;
    outline: none;
}
.pg-stp-v::placeholder { color: var(--pg-line-2); font-weight: 700; }
.pg-stp-v.is-none { color: var(--pg-warn); }
.pg-stp-v[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pg-stp-v::-webkit-outer-spin-button,
.pg-stp-v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pg-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    color: var(--pg-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    line-height: 1.8;
    resize: vertical;
    outline: none;
    transition: border-color var(--myo-d-1) var(--pg-ez), box-shadow var(--myo-d-1) var(--pg-ez);
}
.pg-input:focus { border-color: var(--pg-acc); box-shadow: 0 0 0 3px var(--pg-acc-soft-2); }
.pg-input::placeholder { color: var(--pg-faint); }

/* ── کلیدِ سوپرست ─────────────────────────────────────────────────────── */
.pg-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    background: var(--pg-soft);
    cursor: pointer;
    transition: border-color var(--myo-d-1) var(--pg-ez), background var(--myo-d-1) var(--pg-ez);
}
.pg-switch:hover { border-color: var(--pg-line-2); }
.pg-switch.is-on { border-color: var(--pg-acc-line); background: var(--pg-acc-soft); }
.pg-switch.is-off { opacity: .55; cursor: default; }
.pg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-switch-k {
    flex: 0 0 auto;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: var(--myo-r-pill);
    background: var(--pg-line-2);
    transition: background var(--myo-d-2) var(--pg-ez);
}
.pg-switch-k::after {
    content: '';
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--myo-el-1);
    transition: transform var(--myo-d-2) var(--pg-ez);
}
.pg-switch.is-on .pg-switch-k { background: var(--pg-acc); }
/* در RTL دستهٔ کلید باید به *چپ* برود، پس منفی. */
.pg-switch.is-on .pg-switch-k::after { transform: translateX(-16px); }
.pg-switch-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-switch-t b { font-size: var(--pg-fs-row); font-weight: 700; color: var(--pg-ink); }
.pg-switch-t span { font-size: var(--pg-fs-min); color: var(--pg-faint); line-height: 1.7; }

/* ── دکمه‌های ریز و روزها ─────────────────────────────────────────────── */
.pg-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pg-mrow > span { font-size: var(--pg-fs-min); color: var(--pg-faint); margin-inline-end: 2px; }
.pg-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    color: var(--pg-ink-2);
    font: inherit;
    font-size: var(--pg-fs-min);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez);
}
.pg-mini svg { width: 13px; height: 13px; }
.pg-mini:hover { background: var(--pg-soft-2); }
.pg-mini:disabled { opacity: .4; cursor: default; }
.pg-mini.is-on { background: var(--pg-acc-soft); border-color: var(--pg-acc-line); color: var(--pg-acc-ink); }
.pg-modal .pg-mini:hover:not(:disabled) { border-color: var(--pg-acc-line); background: var(--pg-acc-soft); color: var(--pg-acc-ink); }

.pg-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.pg-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez);
}
.pg-day b { font-size: var(--pg-fs-row); font-weight: 800; color: var(--pg-ink); }
.pg-day span {
    max-width: 100%;
    font-size: var(--pg-fs-min);
    color: var(--pg-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pg-day:hover { border-color: var(--pg-acc-line); background: var(--pg-acc-soft); }
.pg-day:hover b { color: var(--pg-acc-ink); }

/* ── تعویضِ هوشمند ────────────────────────────────────────────────────── */
.pg-swaps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pg-swap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    color: var(--pg-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--pg-ez), border-color var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez);
}
.pg-swap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-swap:hover { border-color: var(--pg-acc); background: var(--pg-acc-soft); color: var(--pg-acc-ink); }
/* عنوانِ ستونِ فهرستِ جایگزین‌ها — جانشینِ نشانی که روی تک‌تکِ دکمه‌ها بود. */
.pg-swaps-cap { margin: 0 0 6px; font-size: var(--pg-fs-min); font-weight: 700; color: var(--pg-faint); }
.pg-swaps > .pg-mini { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 560px) { .pg-swaps { grid-template-columns: 1fr; } }

/* ── متن ──────────────────────────────────────────────────────────────── */
.pg-mtxt { font-size: var(--pg-fs-sub); line-height: 1.9; color: var(--pg-ink-2); margin: 0; }
.pg-mtxt.is-faint { color: var(--pg-muted); }
.pg-msteps {
    margin: 0;
    padding-inline-start: 18px;
    font-size: var(--pg-fs-sub);
    line-height: 1.9;
    color: var(--pg-ink-2);
}
.pg-msteps li::marker { color: var(--pg-faint); font-weight: 700; }

/* در عرضِ گوشی چهار فیلدِ عددی هرکدام ۶۰ پیکسل می‌شوند و استپر جا نمی‌شود؛
   و بینِ آیکن و واژهٔ زبانه، واژه می‌ماند. */
@media (max-width: 560px) {
    .pg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-mtab { gap: 4px; padding: 0 4px 7px; font-size: var(--pg-fs-min); }
    .pg-mtab svg { display: none; }
    .pg-dv b { font-size: 23px; }
    .pg-dsum { margin-inline-start: 0; }
}

/* ── پاصفحه ───────────────────────────────────────────────────────────── */
.pg-mfoot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--pg-paper);
    border-top: 1px solid var(--pg-line);
}
.pg-mfoot .pg-sp { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   ۹. کشوها — بانکِ حرکات، «پشتِ برنامه»، روایتِ AI، تحلیلِ علمی
   ══════════════════════════════════════════════════════════════════════════ */
.pg-scrim {
    position: fixed;
    inset: 0;
    background: var(--myo-veil);
    -webkit-backdrop-filter: blur(var(--myo-veil-blur));
    backdrop-filter: blur(var(--myo-veil-blur));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--myo-d-2) var(--pg-ez);
    z-index: 60;
}
.pg-scrim.is-on { opacity: 1; pointer-events: auto; }

/* لبهٔ *فیزیکیِ* چپ: سند RTL است ولی `translateX` جهت‌آگاه نیست. */
.pg-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(420px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--pg-paper);
    /* کشو *فیزیکی* از چپ می‌آید (در هر دو جهت)، پس لبهٔ داخلی‌اش هم فیزیکی
       است: با `border-inline-end` در RTL خط روی لبهٔ بیرونی می‌افتاد —
       جایی که به لبهٔ صفحه می‌چسبد و دیده نمی‌شود. */
    border-right: 1px solid var(--pg-line);
    box-shadow: var(--myo-el-3);
    transform: translateX(-100%);
    transition: transform var(--myo-d-3) var(--pg-ez);
    z-index: 61;
}
.pg-drawer.is-on { transform: none; }
.pg-drawer.is-analysis { width: min(760px, 96vw); }
.pg-drawer.is-ai { width: min(520px, 94vw); }

.pg-drawer-hd {
    flex: 0 0 auto;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--pg-line);
    background: var(--pg-paper);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pg-drawer-top { display: flex; align-items: flex-start; gap: 10px; }
.pg-drawer-top > div { flex: 1 1 auto; min-width: 0; }
.pg-drawer-top h3 { margin: 0 0 3px; font-size: var(--myo-fs-lg); font-weight: 800; color: var(--pg-ink); }
.pg-drawer-top p { margin: 0; font-size: var(--pg-fs-sub); color: var(--pg-muted); line-height: 1.75; }
.pg-drawer-top p b { color: var(--pg-ink-2); font-weight: 700; }
.pg-drawer-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-paper);
    color: var(--pg-muted);
    cursor: pointer;
}
.pg-drawer-x svg { width: 16px; height: 16px; }
.pg-drawer-x:hover { background: var(--pg-soft-2); color: var(--pg-ink); }

.pg-drawer-b {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pg-drawer-ft {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--pg-line);
    background: var(--pg-soft);
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    color: var(--pg-ok);
}

.pg-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-tab {
    height: var(--myo-h-sm);
    padding: 0 11px;
    border: 1px solid var(--pg-line);
    border-radius: var(--myo-r-pill);
    background: var(--pg-paper);
    color: var(--pg-muted);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--myo-d-1) var(--pg-ez);
}
.pg-tab:hover:not(:disabled) { background: var(--pg-soft-2); color: var(--pg-ink); }
.pg-tab.is-on { background: var(--pg-acc); border-color: transparent; color: var(--myo-on-brand); }
.pg-tab:disabled { opacity: .4; cursor: default; }
.pg-tab:disabled.is-on { opacity: 1; }

.pg-daytabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: var(--pg-fs-min); color: var(--pg-faint); }
.pg-tab.is-day { height: 26px; padding: 0 10px; font-size: var(--pg-fs-min); }

.pg-search {
    display: flex;
    align-items: center;
    gap: 7px;
    height: var(--myo-h-lg);
    padding: 0 11px;
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-r);
    background: var(--pg-paper);
}
.pg-search svg { width: 15px; height: 15px; color: var(--pg-faint); flex: 0 0 auto; }
.pg-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pg-ink);
    font: inherit;
    font-size: var(--myo-fs-sm);
}
.pg-search:focus-within { border-color: var(--pg-acc); box-shadow: 0 0 0 3px var(--pg-acc-soft-2); }

.pg-regions { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-rg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--pg-line);
    border-radius: var(--myo-r-pill);
    background: var(--pg-paper);
    color: var(--pg-ink-2);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--myo-d-1) var(--pg-ez);
}
.pg-rg b { font-size: var(--pg-fs-min); font-weight: 700; color: var(--pg-faint); font-variant-numeric: tabular-nums; }
.pg-rg:hover { border-color: var(--pg-acc-line); background: var(--pg-acc-soft); }
.pg-rg.is-on { background: var(--pg-acc); border-color: transparent; color: var(--myo-on-brand); }
.pg-rg.is-on b { color: var(--myo-on-brand); opacity: .75; }

.pg-bcount { font-size: var(--pg-fs-min); color: var(--pg-faint); padding-bottom: 2px; }
.pg-bcard {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    background: var(--pg-paper);
    transition: all var(--myo-d-1) var(--pg-ez);
}
.pg-bcard:hover { border-color: var(--pg-line-2); box-shadow: var(--myo-el-1); }
.pg-bcard.is-here { background: var(--pg-soft); }
.pg-bcard-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-bcard-n {
    font-size: var(--pg-fs-row);
    font-weight: 700;
    color: var(--pg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-bcard-n em {
    font-style: normal;
    margin-inline-start: 6px;
    font-size: var(--pg-fs-min);
    font-weight: 700;
    color: var(--pg-ok);
    background: var(--pg-ok-soft);
    border-radius: var(--myo-r-pill);
    padding: 1px 6px;
}
.pg-bcard-m { display: flex; flex-wrap: wrap; gap: 3px; }
.pg-bt { font-size: var(--pg-fs-min); color: var(--pg-muted); background: var(--pg-soft-2); border-radius: 5px; padding: 1px 6px; }
.pg-bt.is-reg { background: var(--pg-acc-soft); color: var(--pg-acc-ink); font-weight: 700; }
.pg-badd {
    flex: 0 0 auto;
    height: var(--myo-h-sm);
    padding: 0 12px;
    border: 1px solid var(--pg-acc-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-acc-soft);
    color: var(--pg-acc-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--myo-d-1) var(--pg-ez);
}
.pg-badd:hover { background: var(--pg-acc); color: var(--myo-on-brand); border-color: transparent; }

.pg-blank { padding: 34px 16px; text-align: center; font-size: var(--pg-fs-sub); color: var(--pg-faint); line-height: 2; }

/* ── کارت‌های «پشتِ برنامه» ──────────────────────────────────────────────── */
.pg-scard {
    padding: 12px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-lg);
    background: var(--pg-paper);
    box-shadow: var(--myo-el-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pg-scard-hd { display: flex; align-items: center; gap: 7px; }
.pg-scard-hd svg { width: 16px; height: 16px; color: var(--pg-faint); flex: 0 0 auto; }
.pg-scard-hd h3 { margin: 0; font-size: var(--myo-fs-base); font-weight: 800; color: var(--pg-ink); }
.pg-scard-n {
    margin-inline-start: auto;
    font-size: var(--pg-fs-min);
    font-weight: 800;
    color: var(--pg-muted);
    background: var(--pg-soft-2);
    border-radius: var(--myo-r-pill);
    padding: 1px 7px;
}
.pg-scard-p { margin: 0; font-size: var(--pg-fs-sub); line-height: 1.85; color: var(--pg-muted); }
.pg-scard-foot { margin: 0; font-size: var(--pg-fs-min); line-height: 1.85; color: var(--pg-faint); }
.pg-scard.is-ok { border-color: var(--pg-ok-line); background: var(--pg-ok-soft); }
.pg-scard.is-ok .pg-scard-hd svg { color: var(--pg-ok-icon); }
.pg-scard.is-warn { border-color: var(--pg-warn-line); background: var(--pg-warn-soft); }
.pg-scard.is-warn .pg-scard-hd svg { color: var(--pg-warn-icon); }
.pg-scard.is-bad { border-color: var(--pg-bad-line); background: var(--pg-bad-soft); }
.pg-scard.is-bad .pg-scard-hd svg { color: var(--pg-bad-icon); }

.pg-ilist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-ilist li { display: flex; gap: 7px; font-size: var(--pg-fs-sub); line-height: 1.85; color: var(--pg-ink-2); }
.pg-ilist li i { flex: 0 0 auto; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: currentColor; opacity: .45; }
.pg-ilist em { font-style: normal; color: var(--pg-faint); }
.pg-scard-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--pg-acc-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.pg-scard-more svg { width: 13px; height: 13px; }
.pg-scard-btn {
    height: var(--myo-h-md);
    border: 1px solid var(--pg-acc-line);
    border-radius: var(--pg-r-sm);
    background: var(--pg-acc-soft);
    color: var(--pg-acc-ink);
    font: inherit;
    font-size: var(--pg-fs-sub);
    font-weight: 700;
    cursor: pointer;
}
.pg-scard-btn:disabled { opacity: .5; cursor: default; }

.pg-vlist { display: flex; flex-direction: column; gap: 3px; }
.pg-vrow {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--pg-r-sm);
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: start;
    transition: all var(--myo-d-1) var(--pg-ez);
}
.pg-vrow:hover { background: var(--pg-soft); }
.pg-vrow.is-on { background: var(--pg-acc-soft); border-color: var(--pg-acc-line); }
.pg-vrow-n { font-size: var(--pg-fs-sub); color: var(--pg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-vbar { height: 6px; border-radius: 3px; background: var(--pg-soft-2); overflow: hidden; }
.pg-vbar i { display: block; height: 100%; border-radius: 3px; background: var(--myo-bar); }
.pg-vrow.is-on .pg-vbar i { background: var(--pg-acc); }
.pg-vrow-v { font-size: var(--pg-fs-sub); font-weight: 800; color: var(--pg-ink); display: inline-flex; gap: 3px; align-items: baseline; }
.pg-vd { font-size: var(--pg-fs-min); font-weight: 700; }
.pg-vd.is-up { color: var(--pg-ok); }
.pg-vd.is-dn { color: var(--pg-bad); }

.pg-brief { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.pg-brief dt { font-size: var(--pg-fs-min); color: var(--pg-faint); }
.pg-brief dd { margin: 0; font-size: var(--pg-fs-sub); color: var(--pg-ink-2); font-weight: 600; }

.pg-lglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pg-lg { display: flex; gap: 7px; font-size: var(--pg-fs-sub); line-height: 1.8; color: var(--pg-ink-2); }
.pg-lg i { flex: 0 0 auto; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--pg-acc-icon); }
.pg-lg.is-del i { background: var(--pg-bad-icon); }
.pg-lg.is-add i { background: var(--pg-ok-icon); }
.pg-lg.is-swap i { background: var(--pg-warn-icon); }
.pg-lg b { font-weight: 700; color: var(--pg-ink); }

.pg-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 9px 11px;
    border-radius: var(--pg-r-sm);
    background: var(--pg-acc-soft);
    color: var(--pg-acc-ink);
    font-size: var(--pg-fs-min);
    line-height: 1.85;
}
.pg-ai-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.pg-ai-text { font-size: var(--pg-fs-row); line-height: 2.1; color: var(--pg-ink-2); white-space: pre-wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ۱۰. کوچک‌شدن
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .pg-h1 { display: none; }
}
@media (max-width: 960px) {
    .pg-bar { height: auto; min-height: 50px; flex-wrap: wrap; gap: 8px; padding-block: 8px; }
    .pg-grid { grid-template-columns: minmax(0, 1fr) !important; height: auto; }
    .pg-board { padding: 10px; }
    .pg-col { min-height: 320px; }
    .pg-clist { overflow-y: visible; }
    .pg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-swaps { grid-template-columns: 1fr; }
    .pg-mstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ ریلِ روز — فقط وقتی تخته تک‌ستونی است ═════════════════════════════════
   بالای ۹۶۰ روزها ستون‌های کنارِ هم‌اند و ریل حرفِ اضافه است؛ از ۹۶۰ به
   پایین زیرِ هم می‌نشینند و یک هفتهٔ چهارروزه ~۵۰۰۰ پیکسل می‌شود. ریل
   بیرونِ `.pg-board` است تا با محتوا بالا نرود.
   ══════════════════════════════════════════════════════════════════════════ */

.pg-dayrail { display: none; }

@media (max-width: 960px) {
    .pg-dayrail {
        flex: 0 0 auto;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 7px 12px;
        background: var(--pg-paper);
        border-bottom: 1px solid var(--pg-line);
        scroll-padding-inline: 12px;
        z-index: 3;
    }
    .pg-dayrail::-webkit-scrollbar { display: none; }

    .pg-dr-b {
        flex: 0 0 auto;
        min-height: 36px;
        padding-inline: 13px;
        border: 1px solid var(--pg-line-2);
        border-radius: 999px;
        background: var(--pg-paper);
        color: var(--pg-muted);
        font: inherit;
        font-size: var(--pg-fs-row);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--myo-d-1) var(--pg-ez), color var(--myo-d-1) var(--pg-ez),
                    border-color var(--myo-d-1) var(--pg-ez);
    }
    .pg-dr-b.is-on {
        background: var(--pg-acc);
        border-color: transparent;
        color: var(--myo-on-brand);
    }

    /* سرِ ستون می‌چسبد: در یک ستونِ بلند باید همیشه معلوم باشد داخلِ کدام
       روزی. `.pg-col` خودش `overflow: hidden` دارد و چسبندگی را می‌کُشد،
       پس فقط در همین نما برداشته می‌شود — و چون گوشهٔ گردِ ستون را همان
       `overflow` می‌بُرید، سرِ ستون گردیِ خودش را می‌گیرد. */
    .pg-col { overflow: visible; }
    .pg-ch {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        /* سربرگِ چسبان بی زمینه، متنِ زیرش را از خودش رد می‌کند. */
        background: var(--pg-paper);
        border-start-start-radius: var(--pg-r-lg);
        border-start-end-radius: var(--pg-r-lg);
    }
}

@media (max-width: 640px) {
    .pg-dr-b { min-height: 40px; }

    /* ── ردیفِ حرکت ───────────────────────────────────────────────────
       ردیف یک‌خطی است و نامِ حرکت با «…» جمع می‌شود. در ستونِ ۹۰۰پیکسلیِ
       دسکتاپ این هزینه‌ای ندارد؛ در ۳۹۰ پیکسل — و به‌ویژه داخلِ بلوکِ
       سوپرست که پدینگِ خودش را هم دارد — سهمِ نام به ۸۲ پیکسل می‌رسید و
       «قفسه سینه دستگاه (پک‌دک)» به «قفسه سینه …» می‌رسید. یعنی مربی در
       فهرستِ خودش نمی‌فهمید کدام حرکت است.

       دو خط مجاز است. ردیف بلندتر می‌شود و همان بلندی هدفِ لمس را هم
       درست می‌کند. */
    .pg-rname {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.45;
    }
    .pg-row { min-height: 44px; padding-block: 8px; }

    /* ابزارهای ردیف روی لمس همیشه دیده می‌شوند (بندِ `hover: none` پایین)،
       ولی ۲۲ و ۱۰ پیکسل هنوز هدفِ انگشت نیستند. */
    .pg-xs { width: 34px; height: 34px; }
    .pg-xs svg { width: 15px; height: 15px; }
    .pg-ic { width: 32px; height: 32px; }
    .pg-grip { width: 22px; height: 34px; margin-inline-end: -5px; }
    .pg-grip svg { width: 8px; height: 18px; }

    /* سرِ فاز و سرِ بلوکِ سیستمِ تمرینی هر دو دکمه‌اند (جمع/باز) و هر دو
       زیرِ ۲۲ پیکسل بودند. */
    .pg-grp-cap { min-height: 36px; }
    .pg-tt-hd { min-height: 36px; }

    /* ── دکمه‌های نوارِ بالا ───────────────────────────────────────────
       پاسِ قبلی ابزارهای *داخلِ* تخته را بزرگ کرد (`.pg-xs`، `.pg-ic`،
       شمارندهٔ ست) ولی خودِ `.pg-btn` را جا انداخت — یعنی «ویرایش
       برنامه» و «تأیید و فعال‌سازی»، دو کنشِ اصلیِ کلِ صفحه، روی گوشی
       ۳۴ پیکسل قد داشتند. بقیهٔ اپ ۴۴ است. */
    .pg-btn { min-height: 44px; padding-inline: 14px; }
    .pg-btn.is-icon { width: 44px; min-width: 44px; }
    .pg-q { min-height: 40px; }

    /* ردیفِ گرم‌کردن/کاردیو هم زدنی است (پاپ‌آپِ حرکت را باز می‌کند) و
       ۲۸ پیکسل کفِ قدش بود. */
    .pg-prow { min-height: 40px; padding-block: 7px; }

    /* ── نوارِ بالا ───────────────────────────────────────────────────
       از ۹۶۰ به پایین دو سطر می‌شود؛ این‌جا فقط جلوی بریده‌شدنِ نامِ شاگرد
       و چسبیدنِ دکمه‌ها به لبه را می‌گیریم. */
    .pg-bar { padding-inline: 10px; }
    .pg-who { min-height: 36px; max-width: 100%; }

    /* ── کشوها: تمامِ عرض ─────────────────────────────────────────────
       بانکِ حرکات، روایت و تحلیل همه `94vw`/`96vw` بودند — یعنی یک نوارِ
       ۲۴پیکسلیِ صفحهٔ زیرین سمتِ راست می‌ماند. آن نوار روی دسکتاپ می‌گوید
       «این یک لایه است، پشتش صفحه هست»؛ روی گوشی فقط عرضِ مفید را می‌خورد
       و لمسِ تصادفی‌اش کشو را می‌بندد. */
    .pg-drawer,
    .pg-drawer.is-analysis,
    .pg-drawer.is-ai { width: 100%; border-right: 0; }

    /* ── پاپ‌آپِ حرکت: برگهٔ پایین ─────────────────────────────────────
       همان قاعدهٔ مودال‌های اپ (myo-ds.css). این‌جا تکرار می‌شود چون
       `.pg-modal .sx-modal-box` عرض و بیشینه‌ارتفاعِ خودش را می‌نویسد و
       از قاعدهٔ عمومی قوی‌تر است. */
    .pg-modal .sx-modal-box {
        width: 100%;
        max-height: calc(100dvh - 40px);
        border-radius: var(--myo-r-2xl) var(--myo-r-2xl) 0 0;
    }
    .pg-mfoot { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }

    /* چهار زبانهٔ پاپ‌آپ و ریلِ روزِ بانک: ریلِ افقیِ لغزنده، نه ردیفی که
       می‌شکند. */
    .pg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pg-tabs::-webkit-scrollbar { display: none; }
    .pg-tab { flex: 0 0 auto; min-height: 36px; }
    .pg-tab.is-day { height: 32px; }
    .pg-rg { min-height: 34px; }

    /* چهار عددِ خلاصهٔ پاپ‌آپ در ۳۹۰ پیکسل به چهار ستونِ ۷۰پیکسلی می‌رسند. */
    .pg-pop-stats { grid-template-columns: repeat(2, 1fr); }

    /* ── شمارندهٔ ست ──────────────────────────────────────────────────
       پرکاربردترین کنترلِ کلِ ویرایش، و کوچک‌ترینش: دو دکمهٔ ۲۶پیکسلی با
       ۲ پیکسل فاصله. روی موس دقیق است، روی انگشت یعنی «منها» و «به‌علاوه»
       عملاً یک هدف‌اند. */
    .pg-stp { height: 44px; padding-inline: 4px; }
    .pg-stp-b { width: 38px; height: 38px; font-size: var(--myo-fs-lg); }

    .pg-mx { width: 38px; height: 38px; }
    .pg-mx svg { width: 18px; height: 18px; }

    /* نامِ حرکت در ردیفِ سیستمِ تمرینی و در کارتِ بانک — هر دو با «…» جمع
       می‌شدند و هر دو فقط چند پیکسل کم داشتند. دو خط، مثلِ `.pg-rname`. */
    .pg-prow-n,
    .pg-bcard-n { white-space: normal; overflow: visible; text-overflow: clip; }

}

/* روی لمس هاوری در کار نیست؛ ابزارهای «پیدا ولی ساکت» باید پیدا باشند. */
@media (hover: none) {
    .pg-grip, .pg-xs, .pg-ic, .pg-grp-cap .pg-chev { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-col, .pg-more.is-open .pg-more-pop, .pg-more.is-open .pg-pop, .pg-row.is-flash, .pg-prow.is-flash { animation: none; }
}

/* ── گوشیِ چرخیده ─────────────────────────────────────────────────────────
   هر بندِ موبایلِ این فایل به *عرض* بسته است، و گوشیِ چرخیده ۸۴۴ پیکسل عرض
   دارد — یعنی در ۸۴۴×۳۹۰ هیچ‌کدامشان نمی‌گیرند و کنترل‌ها به اندازهٔ
   دسکتاپ برمی‌گردند، در حالی که انگشت همان انگشت است. (اندازه گرفته شد:
   چیپِ شاگرد ۳۰، چیپِ کیفیت ۲۸، و سرِ فاز ۱۸ پیکسل.)

   شرط سه‌تایی است و عمداً: `pointer: coarse` یعنی انگشت، و `max-height`
   یعنی گوشی — تبلت در حالتِ افقی دست‌کم ۷۶۸ پیکسل قد دارد و از این بند
   بیرون می‌ماند. (بندِ بی‌قیدِ ارتفاع، بودجهٔ ارتفاعِ تبلت را می‌شکند —
   همان دلیلی که بندِ `myo-ds.css` کوچک نگه داشته شده.)

   فقط کفِ هدفِ لمس این‌جاست، نه چیدمان: در ۸۴۴ پیکسلِ عرض، ستون‌ها باید
   همان ستون‌های عریض بمانند.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) and (max-height: 520px) {
    .pg-btn { min-height: 44px; }
    .pg-btn.is-icon { width: 44px; min-width: 44px; }
    .pg-who { min-height: 40px; }
    .pg-q { min-height: 40px; }
    .pg-grp-cap { min-height: 36px; }
    .pg-tt-hd { min-height: 36px; }
    .pg-xs { width: 34px; height: 34px; }
    .pg-prow { min-height: 40px; }
}