/**
 * FitLab Exercise Library — theme design system.
 * RTL-first, mobile-first, Vazirmatn, emerald primary.
 * All tokens live in :root — change here, everything follows.
 *
 * Breakpoints verified: 375 / 390 / 768 / 1440.
 */

/* ------------------------------------------------------------------
 * 1. Tokens & base
 * ------------------------------------------------------------------ */
:root {
        --ge-primary: #059669;
        --ge-primary-strong: #047857;
        --ge-primary-soft: #ecfdf5;
        --ge-primary-ring: rgba(5, 150, 105, 0.35);

        --ge-ink: #0f172a;
        --ge-ink-2: #334155;
        --ge-body: #475569;
        --ge-muted: #94a3b8;
        --ge-border: #e2e8f0;
        --ge-surface: #f8fafc;
        --ge-card: #ffffff;

        --ge-amber: #d97706;
        --ge-amber-soft: #fffbeb;
        --ge-rose: #e11d48;
        --ge-rose-soft: #fff1f2;

        --ge-radius: 1rem;
        --ge-radius-sm: 0.75rem;
        --ge-radius-pill: 999px;
        --ge-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
        --ge-shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, 0.18);
        --ge-container: 1200px;

        --ge-font: "Vazirmatn", "Vazirmatn FD", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

*,
*::before,
*::after {
        box-sizing: border-box;
}

html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
}

body {
        margin: 0;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        background: #fff;
        color: var(--ge-body);
        font-family: var(--ge-font);
        font-size: 15px;
        line-height: 1.8;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
        color: var(--ge-ink);
        line-height: 1.4;
        margin: 0 0 0.5em;
        font-weight: 800;
}

p { margin: 0 0 1em; }
a { color: var(--ge-primary); text-decoration: none; }
a:hover { color: var(--ge-primary-strong); }
ul, ol { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
        outline: 2px solid var(--ge-primary);
        outline-offset: 2px;
        border-radius: 4px;
}

::selection {
        background: var(--ge-primary);
        color: #fff;
}

.ge-main {
        flex: 1 0 auto;
        width: 100%;
}

.ge-container {
        width: 100%;
        max-width: var(--ge-container);
        margin-inline: auto;
        padding-inline: 1rem;
}

.ge-ltr { direction: ltr; unicode-bidi: isolate; }

.screen-reader-text {
        border: 0; clip-path: inset(50%); height: 1px; width: 1px;
        margin: -1px; overflow: hidden; padding: 0; position: absolute;
        word-wrap: normal !important;
}

.skip-link {
        position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100000;
        background: var(--ge-ink); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 0.5rem 0.5rem;
}
.skip-link:focus { inset-inline-start: 0.5rem; }

/* ------------------------------------------------------------------
 * 2. Buttons, chips, pills
 * ------------------------------------------------------------------ */
.ge-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        min-height: 44px; padding: 0.55rem 1.25rem;
        border: 1px solid transparent; border-radius: var(--ge-radius-sm);
        background: var(--ge-surface); color: var(--ge-ink);
        font: inherit; font-weight: 700; font-size: 0.9rem;
        cursor: pointer; text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ge-btn:hover { background: #f1f5f9; color: var(--ge-ink); }
.ge-btn:active { transform: translateY(1px); }
.ge-btn svg { width: 18px; height: 18px; flex: none; }

.ge-btn--primary { background: var(--ge-primary); color: #fff; box-shadow: 0 1px 2px rgba(5, 150, 105, 0.35); }
.ge-btn--primary:hover { background: var(--ge-primary-strong); color: #fff; }

.ge-btn--outline { background: #fff; border-color: var(--ge-border); }
.ge-btn--outline:hover { border-color: var(--ge-primary); color: var(--ge-primary); background: var(--ge-primary-soft); }

.ge-btn--ghost { background: transparent; }
.ge-btn--ghost:hover { background: var(--ge-surface); }

.ge-btn--sm { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.ge-btn--xl { min-height: 52px; padding: 0.8rem 2rem; font-size: 1rem; }

.ge-chip {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.3rem 0.8rem; min-height: 34px;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-pill);
        background: #fff; color: var(--ge-ink-2);
        font-size: 0.8rem; font-weight: 600; cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ge-chip:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-chip svg { width: 14px; height: 14px; }

.ge-chip--soft { background: var(--ge-surface); border-color: transparent; }
.ge-chip--outline { background: #fff; }
.ge-chip--active {
        background: var(--ge-primary-soft); border-color: var(--ge-primary);
        color: var(--ge-primary-strong);
}
.ge-chip--active:hover { background: #d1fae5; color: var(--ge-primary-strong); border-color: var(--ge-primary); }

.ge-pill {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.18rem 0.65rem; border-radius: var(--ge-radius-pill);
        font-size: 0.72rem; font-weight: 700; line-height: 1.6;
        background: var(--ge-surface); color: var(--ge-ink-2);
}
.ge-pill--beginner { background: var(--ge-primary-soft); color: var(--ge-primary-strong); }
.ge-pill--intermediate { background: var(--ge-amber-soft); color: var(--ge-amber); }
.ge-pill--advanced { background: var(--ge-rose-soft); color: var(--ge-rose); }

/* ------------------------------------------------------------------
 * 3. Header & nav
 * ------------------------------------------------------------------ */
.ge-header {
        position: sticky; top: 0; z-index: 50;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--ge-border);
}
.ge-header__inner {
        display: flex; align-items: center; gap: 1rem;
        min-height: 64px;
}
.ge-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.ge-brand__link { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ge-ink); }
.ge-brand__mark {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 0.8rem;
        background: linear-gradient(135deg, var(--ge-primary), #10b981);
        color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}
.ge-brand__mark svg { width: 22px; height: 22px; }
.ge-brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.ge-brand__name { font-weight: 800; font-size: 1.05rem; color: var(--ge-ink); }
.ge-brand__alt { font-size: 0.68rem; color: var(--ge-muted); letter-spacing: 0.08em; }

.ge-nav { display: none; }
.ge-nav__list { display: flex; gap: 0.25rem; list-style: none; }
.ge-nav__link {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
        border-radius: var(--ge-radius-sm); color: var(--ge-ink-2); font-weight: 600; font-size: 0.9rem;
}
.ge-nav__link:hover { background: var(--ge-surface); color: var(--ge-primary); }
.ge-nav__link.is-active { color: var(--ge-primary-strong); background: var(--ge-primary-soft); }

.ge-header__actions {
        display: flex; align-items: center; gap: 0.5rem;
        margin-inline-start: auto;
}
.ge-header__search--desktop { display: none; flex: 0 1 320px; }
.ge-header__search--mobile { flex: 1 1 100%; order: 3; padding-bottom: 0.75rem; }
.ge-header__toggle { display: inline-flex; }

@media (min-width: 768px) {
        .ge-nav { display: block; }
        .ge-header__inner { flex-wrap: nowrap; }
        .ge-header__search--desktop { display: block; }
        .ge-header__search--mobile { display: none; }
        .ge-header__toggle { display: none; }
}

@media (max-width: 767.98px) {
        .ge-header__inner { flex-wrap: wrap; }
        .ge-header__inner:not(.is-open) .ge-header__search--mobile { display: none; }
}

/* ------------------------------------------------------------------
 * 4. Search (hero + header variants)
 * ------------------------------------------------------------------ */
.ge-search { position: relative; width: 100%; }
.ge-search__input {
        width: 100%; min-height: 48px; padding: 0.6rem 2.6rem 0.6rem 3rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: #fff; color: var(--ge-ink);
        font: inherit; font-size: 0.95rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ge-search__input::placeholder { color: var(--ge-muted); }
.ge-search__input:focus {
        outline: none; border-color: var(--ge-primary);
        box-shadow: 0 0 0 3px var(--ge-primary-ring);
}
.ge-search__icon {
        position: absolute; inset-inline-end: 0.9rem; top: 50%; transform: translateY(-50%);
        width: 20px; height: 20px; color: var(--ge-muted); pointer-events: none;
}
.ge-search__submit {
        position: absolute; inset-inline-start: 0.45rem; top: 50%; transform: translateY(-50%);
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border: 0; border-radius: 0.6rem;
        background: var(--ge-primary); color: #fff; cursor: pointer;
}
.ge-search__submit svg { width: 18px; height: 18px; }
.ge-search__submit:hover { background: var(--ge-primary-strong); }
.ge-search__status {
        position: absolute; inset-inline: 0; top: calc(100% + 4px);
        font-size: 0.75rem; color: var(--ge-muted); padding: 0.25rem 0.75rem;
        background: #fff; border: 1px solid var(--ge-border); border-radius: 0.6rem;
}
.ge-search__panel {
        position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 8px);
        background: #fff; border: 1px solid var(--ge-border); border-radius: var(--ge-radius);
        box-shadow: var(--ge-shadow-lg); overflow: hidden;
}
.ge-search__list { list-style: none; max-height: 320px; overflow-y: auto; padding: 0.35rem; }
.ge-search__item {
        display: flex; align-items: center; gap: 0.75rem; width: 100%;
        padding: 0.45rem 0.6rem; border: 0; border-radius: 0.65rem;
        background: transparent; cursor: pointer; text-align: start;
        font: inherit; min-height: 44px;
}
.ge-search__item:hover,
.ge-search__item[aria-selected="true"] { background: var(--ge-primary-soft); }
.ge-search__item img,
.ge-search__thumb {
        width: 52px; height: 40px; object-fit: cover; border-radius: 0.5rem;
        background: var(--ge-surface); flex: none;
}
.ge-search__item-name { display: block; color: var(--ge-ink); font-weight: 700; font-size: 0.88rem; line-height: 1.5; }
.ge-search__item-alt { display: block; color: var(--ge-muted); font-size: 0.75rem; }

/* ------------------------------------------------------------------
 * 5. Hero
 * ------------------------------------------------------------------ */
.ge-hero {
        background:
                radial-gradient(60% 120% at 85% 0%, rgba(5, 150, 105, 0.10), transparent 60%),
                radial-gradient(40% 100% at 10% 100%, rgba(16, 185, 129, 0.08), transparent 55%),
                linear-gradient(180deg, var(--ge-surface), #fff 90%);
        border-bottom: 1px solid var(--ge-border);
        padding: 2.5rem 0 2rem;
}
.ge-hero--single { padding: 2rem 0 1.75rem; }
.ge-hero__kicker {
        display: inline-flex; align-items: center; gap: 0.4rem;
        font-size: 0.78rem; font-weight: 700; color: var(--ge-primary-strong);
        background: var(--ge-primary-soft); border-radius: var(--ge-radius-pill);
        padding: 0.2rem 0.8rem; margin-bottom: 0.9rem;
}
.ge-hero__title {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 0.4rem;
}
.ge-hero__count { color: var(--ge-muted); font-size: 0.95rem; margin-bottom: 1.25rem; }
.ge-hero__count-num { color: var(--ge-primary-strong); font-weight: 800; font-size: 1.05em; }
.ge-hero__desc { max-width: 62ch; color: var(--ge-body); }
.ge-hero__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ge-hero__fav { margin-top: 1rem; }
.ge-hero__aka { margin-top: 0.9rem; }
.ge-hero__aka-label {
        font-size: 0.78rem; font-weight: 700; color: var(--ge-muted);
        display: inline-block; margin-inline-end: 0.5rem;
}

/* Taxonomy hero */
.ge-tax-hero { padding: 2.25rem 0 2rem; }
.ge-tax-hero__inner {
        display: flex; align-items: center; gap: 1.25rem;
}
.ge-tax-hero__kicker {
        font-size: 0.78rem; font-weight: 700; color: var(--ge-primary-strong);
        background: var(--ge-primary-soft); padding: 0.2rem 0.8rem;
        border-radius: var(--ge-radius-pill); display: inline-block; margin-bottom: 0.75rem;
}
.ge-tax-hero__title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.35rem; }
.ge-tax-hero__count { color: var(--ge-primary-strong); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.ge-tax-hero__desc { color: var(--ge-body); max-width: 65ch; }
.ge-tax-hero__media {
        flex: none; width: 132px; height: 132px; border-radius: var(--ge-radius);
        object-fit: cover; border: 1px solid var(--ge-border); background: var(--ge-surface);
}
@media (max-width: 639.98px) {
        .ge-tax-hero__media { width: 92px; height: 92px; }
}

/* ------------------------------------------------------------------
 * 6. Listing layout: popular, filters, results
 * ------------------------------------------------------------------ */
.ge-listing { padding: 1.75rem 0 3rem; }
.ge-listing-search { max-width: 640px; margin-bottom: 1rem; }

.ge-popular { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.ge-popular__label { font-size: 0.82rem; font-weight: 700; color: var(--ge-muted); }
.ge-popular__list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }

.ge-listing__layout { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 768px) {
        .ge-listing__layout {
                grid-template-columns: 260px minmax(0, 1fr);
        }
}

/* Sidebar filters */
.ge-filters {
        display: none;
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius); padding: 1.1rem 1.15rem;
        position: sticky; top: 84px;
        max-height: calc(100svh - 108px); overflow-y: auto;
}
@media (min-width: 768px) { .ge-filters { display: block; } }

.ge-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.ge-filters__title { font-size: 1rem; margin: 0; }
.ge-filters__clear { font-size: 0.78rem; font-weight: 700; }
.ge-filters__group { border-top: 1px solid var(--ge-border); padding: 0.85rem 0; }
.ge-filters__group-title { font-size: 0.85rem; margin: 0 0 0.55rem; color: var(--ge-ink); }
.ge-filters__options { display: flex; flex-direction: column; gap: 0.15rem; list-style: none; }
.ge-filter {
        display: flex; align-items: center; gap: 0.55rem; width: 100%;
        padding: 0.35rem 0.45rem; min-height: 40px;
        border: 0; border-radius: 0.55rem; background: transparent;
        color: var(--ge-ink-2); font: inherit; font-size: 0.85rem; cursor: pointer;
        text-align: start; text-decoration: none;
}
.ge-filter:hover { background: var(--ge-surface); }
.ge-filter.is-active { color: var(--ge-primary-strong); font-weight: 700; background: var(--ge-primary-soft); }
.ge-filter__count { margin-inline-start: auto; font-size: 0.72rem; color: var(--ge-muted); }

/* Filters toggle (mobile) */
.ge-filters-toggle { display: inline-flex; }
@media (min-width: 768px) { .ge-filters-toggle { display: none; } }

/* Drawer (mobile bottom sheet) */
.ge-drawer { position: relative; z-index: 60; }
.ge-drawer[hidden] { display: none; }
/* Author display rules below would otherwise beat the UA `[hidden]`
 * rule — the overlay/panel must really disappear when hidden. */
.ge-drawer__overlay[hidden],
.ge-drawer__panel[hidden] { display: none !important; }
.ge-drawer__overlay {
        position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(2px);
}
.ge-drawer__panel {
        position: fixed; inset-inline: 0; bottom: 0; z-index: 61;
        max-height: 82svh; display: flex; flex-direction: column;
        background: #fff; border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.22);
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: ge-drawer-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ge-drawer-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
}
.ge-drawer__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--ge-border);
}
.ge-drawer__title { font-size: 1rem; margin: 0; }
.ge-drawer__close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 0.65rem;
        background: var(--ge-surface); color: var(--ge-ink); cursor: pointer;
}
.ge-drawer__body { overflow-y: auto; padding: 0.5rem 1.25rem; flex: 1; }
.ge-drawer__foot {
        display: flex; gap: 0.75rem; padding: 0.9rem 1.25rem;
        border-top: 1px solid var(--ge-border); background: #fff;
}
.ge-drawer__foot .ge-btn { flex: 1; }

/* Thin scrollbars for the scrollable filter containers
 * (desktop sidebar + mobile bottom-sheet body). */
.ge-filters,
.ge-drawer__body {
        scrollbar-width: thin;
        scrollbar-color: #e2e8f0 transparent; /* slate-200 thumb / transparent track */
}
.ge-filters::-webkit-scrollbar,
.ge-drawer__body::-webkit-scrollbar { width: 6px; height: 6px; }
.ge-filters::-webkit-scrollbar-track,
.ge-drawer__body::-webkit-scrollbar-track { background: transparent; }
.ge-filters::-webkit-scrollbar-thumb,
.ge-drawer__body::-webkit-scrollbar-thumb {
        background: #e2e8f0; border-radius: 999px;
}
.ge-filters::-webkit-scrollbar-thumb:hover,
.ge-drawer__body::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* Active filters */
.ge-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.ge-active-filters__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ge-active-filters__clear { font-size: 0.8rem; font-weight: 700; color: var(--ge-rose); }
.ge-active-filters__clear:hover { text-decoration: underline; }

/* Results head */
.ge-results-head {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.1rem;
}
.ge-results-count { font-size: 0.88rem; color: var(--ge-ink-2); font-weight: 600; margin: 0; }
.ge-sort { display: flex; align-items: center; gap: 0.5rem; }
.ge-sort__label { font-size: 0.82rem; color: var(--ge-muted); font-weight: 600; }
.ge-sort__select {
        min-height: 40px; padding: 0.3rem 0.8rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: #fff; font: inherit; font-size: 0.85rem; color: var(--ge-ink);
        cursor: pointer;
}
.ge-sort__apply { display: none; }

/* ------------------------------------------------------------------
 * 7. Grid, cards, skeleton
 * ------------------------------------------------------------------ */
.ge-grid {
        display: grid; gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        list-style: none;
}
@media (min-width: 768px) { .ge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } }
@media (min-width: 1280px) { .ge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ge-grid--compact { gap: 0.8rem; }

.ge-card {
        position: relative; display: flex; flex-direction: column;
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius); overflow: hidden;
        box-shadow: var(--ge-shadow);
        transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ge-card:hover {
        box-shadow: var(--ge-shadow-lg);
        transform: translateY(-2px);
        border-color: #d3dce6;
}
.ge-card__media {
        position: relative; aspect-ratio: 4 / 3; overflow: hidden;
        background:
                linear-gradient(135deg, var(--ge-surface), #eef2f7);
}
.ge-card__img {
        width: 100%; height: 100%; object-fit: cover;
        opacity: 0; transform: scale(1.02);
        transition: opacity 0.45s ease, transform 0.45s ease;
}
.ge-card__img.is-revealed { opacity: 1; transform: scale(1); }
.ge-card__placeholder {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        color: #cbd5e1;
}
.ge-card__placeholder svg { width: 44px; height: 44px; }
.ge-card__fav {
        position: absolute; top: 0.55rem; inset-inline-start: 0.55rem; z-index: 2;
}

/* Card media overlays: difficulty pill (bottom-start) + views badge (top-end,
 * mirrored of the favorite heart). */
.ge-card__media .ge-pill {
        position: absolute; bottom: 0.55rem; inset-inline-start: 0.55rem; z-index: 2;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
}
.ge-card-views {
        position: absolute; top: 0.55rem; inset-inline-end: 0.55rem; z-index: 2;
        display: inline-flex; align-items: center; gap: 4px;
        padding: 0.14rem 0.55rem; border-radius: var(--ge-radius-pill);
        background: rgba(255, 255, 255, 0.92); color: var(--ge-muted);
        font-size: 12px; font-weight: 700; line-height: 1.7;
        border: 1px solid rgba(148, 163, 184, 0.28);
        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}
.ge-card-views svg { width: 13px; height: 13px; flex: none; opacity: 0.85; }
.ge-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 0.95rem 1rem; flex: 1; }
.ge-card__title { font-size: 0.92rem; margin: 0; line-height: 1.55; }
.ge-card__title a {
        color: var(--ge-ink); display: block;
}
.ge-card__title a::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
}
.ge-card:hover .ge-card__title a { color: var(--ge-primary-strong); }
.ge-card__latin {
        direction: ltr; unicode-bidi: isolate; text-align: end;
        font-size: 0.72rem; color: var(--ge-muted); letter-spacing: 0.01em;
}
.ge-card__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.45rem; }

/* Skeleton */
.ge-skeleton { border-radius: var(--ge-radius); overflow: hidden; border: 1px solid var(--ge-border); background: #fff; }
.ge-skeleton__media { aspect-ratio: 4 / 3; }
.ge-skeleton__body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ge-skeleton__line { height: 0.75rem; border-radius: 4px; }
.ge-skeleton__line--title { width: 75%; height: 0.9rem; }
.ge-skeleton__line--short { width: 45%; }
.ge-skeleton__media,
.ge-skeleton__line {
        background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 45%, #eef2f7 65%);
        background-size: 200% 100%;
        animation: ge-shimmer 1.4s ease-in-out infinite;
}
@keyframes ge-shimmer {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
}

/* ------------------------------------------------------------------
 * 8. Pagination & load more
 * ------------------------------------------------------------------ */
.ge-pagination { margin-top: 1.75rem; display: flex; justify-content: center; }
.ge-pagination .page-numbers {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 42px; min-height: 42px; padding: 0 0.6rem; margin-inline: 0.15rem;
        border: 1px solid var(--ge-border); border-radius: 0.7rem;
        background: #fff; color: var(--ge-ink-2); font-weight: 700; font-size: 0.88rem;
}
.ge-pagination .page-numbers:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-pagination .page-numbers.current {
        background: var(--ge-primary); border-color: var(--ge-primary); color: #fff;
}
.ge-pagination .page-numbers.dots { border: 0; background: none; }

.ge-load-more { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1.6rem; }
.ge-load-more__spinner {
        display: none; width: 28px; height: 28px;
        border: 3px solid var(--ge-border); border-top-color: var(--ge-primary);
        border-radius: 50%; animation: ge-spin 0.8s linear infinite;
}
.ge-load-more.is-loading .ge-load-more__spinner { display: block; }
.ge-load-more.is-loading [data-ge-load-more-trigger] { opacity: 0.6; pointer-events: none; }
.ge-load-more__status { font-size: 0.8rem; color: var(--ge-muted); margin: 0; min-height: 1.2em; }
@keyframes ge-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
 * 9. Sections (single page)
 * ------------------------------------------------------------------ */
.ge-section { padding: 1.5rem 0; }
.ge-section__head { margin-bottom: 1rem; }
.ge-section__title {
        font-size: clamp(1.1rem, 2.2vw, 1.35rem);
        display: flex; align-items: center; gap: 0.55rem; margin: 0;
}
.ge-section__title svg { width: 22px; height: 22px; color: var(--ge-primary); flex: none; }

.ge-prose { color: var(--ge-body); max-width: 70ch; }
.ge-subtitle { color: var(--ge-muted); font-size: 0.9rem; }

/* Quick info grid */
.ge-quick-info__grid {
        display: grid; gap: 0.7rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .ge-quick-info__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ge-quick-info__cell {
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius-sm); padding: 0.75rem 0.9rem;
        display: flex; flex-direction: column; gap: 0.25rem;
}
.ge-quick-info__label { font-size: 0.72rem; color: var(--ge-muted); font-weight: 700; }
.ge-quick-info__value { font-size: 0.88rem; color: var(--ge-ink); font-weight: 700; }
.ge-quick-info__value--pill {
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        border-radius: var(--ge-radius-pill); padding: 0.1rem 0.7rem; width: fit-content;
}

/* Structured lists */
.ge-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ge-list li { position: relative; padding-inline-start: 1.9rem; }
.ge-list li svg {
        position: absolute; inset-inline-start: 0; top: 0.2rem;
        width: 18px; height: 18px;
}
.ge-list--steps { counter-reset: ge-step; }
.ge-list--steps li {
        counter-increment: ge-step; padding-inline-start: 2.4rem;
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: 0.8rem; padding-block: 0.65rem 0.65rem;
}
.ge-list--steps li::before {
        content: counter(ge-step);
        position: absolute; inset-inline-start: 0.65rem; top: 0.7rem;
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 50%;
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.78rem; font-weight: 800;
}
.ge-list--setup li svg { color: var(--ge-primary); }
.ge-list--tips li svg { color: var(--ge-amber); }
.ge-list--benefits li svg { color: var(--ge-primary); }
.ge-list--mistakes li svg { color: var(--ge-rose); }
.ge-list--plain { padding-inline-start: 1.2rem; list-style: disc; }
.ge-list--plain li { padding-inline-start: 0; }

/* Callouts */
.ge-callout {
        display: flex; gap: 0.9rem; align-items: flex-start;
        background: var(--ge-surface); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius); padding: 1rem 1.15rem;
}
.ge-callout__icon {
        flex: none; display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 0.7rem; background: #fff;
        color: var(--ge-primary); border: 1px solid var(--ge-border);
}
.ge-callout__icon svg { width: 20px; height: 20px; }
.ge-callout__title { font-size: 0.95rem; margin: 0 0 0.25rem; }
.ge-callout__body { margin: 0; color: var(--ge-body); font-size: 0.92rem; }
.ge-callout--breathing { background: var(--ge-primary-soft); border-color: #a7f3d0; }
.ge-callout--tempo { background: #f0f9ff00; background: var(--ge-surface); }
.ge-callout--safety { background: var(--ge-amber-soft); border-color: #fde68a; }
.ge-callout--safety .ge-callout__icon { color: var(--ge-amber); }
.ge-callout--danger { background: var(--ge-rose-soft); border-color: #fecdd3; }
.ge-callout--danger .ge-callout__icon { color: var(--ge-rose); }

/* Progressions & regressions */
.ge-progressions__grid {
        display: grid; gap: 0.8rem;
        grid-template-columns: 1fr;
}
@media (min-width: 768px) {
        .ge-progressions__grid { grid-template-columns: 1fr 1fr; }
}
.ge-callout--progress { background: var(--ge-primary-soft); border-color: #a7f3d0; }
.ge-callout--progress .ge-callout__title { color: var(--ge-primary-strong); }
.ge-callout--regress { background: #f0f9ff; border-color: #bae6fd; }
.ge-callout--regress .ge-callout__title { color: #0369a1; }
.ge-progressions__list li { background: transparent !important; border: 0 !important; padding-inline-start: 2rem !important; }

/* Copy exercise_id button */
.ge-copy-id { min-height: 36px; gap: 0.35rem; font-size: 0.75rem; color: var(--ge-body); }
.ge-copy-id.is-copied { border-color: var(--ge-primary); color: var(--ge-primary-strong); background: var(--ge-primary-soft); }
.ge-copy-id svg { width: 14px; height: 14px; }

/* Muscles */
.ge-muscles__rows { display: flex; flex-direction: column; gap: 0.85rem; }
.ge-muscles__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.ge-muscles__label { font-size: 0.82rem; font-weight: 700; color: var(--ge-muted); min-width: 110px; }
.ge-muscles__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Variations */
.ge-variation-grid {
        display: grid; gap: 0.8rem;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ge-variation-card {
        display: flex; flex-direction: column; gap: 0.2rem;
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius-sm); padding: 0.85rem 1rem;
        color: var(--ge-ink); font-weight: 700; font-size: 0.88rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ge-variation-card:hover { border-color: var(--ge-primary); box-shadow: var(--ge-shadow); }
.ge-variation-card small { color: var(--ge-muted); font-weight: 400; direction: ltr; unicode-bidi: isolate; text-align: end; }

/* Related / categories / popular */
.ge-related-cats, .ge-cat-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ge-cat-card {
        display: inline-flex; align-items: center; gap: 0.5rem;
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius-pill); padding: 0.4rem 1rem;
        color: var(--ge-ink-2); font-weight: 700; font-size: 0.85rem;
        transition: border-color 0.15s ease, color 0.15s ease;
}
.ge-cat-card:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-cat-card__count { font-size: 0.72rem; color: var(--ge-muted); font-weight: 400; }

/* CTA */
.ge-cta { padding: 2rem 0 2.5rem; }
.ge-cta__inner {
        position: relative; overflow: hidden;
        background: linear-gradient(135deg, #065f46, var(--ge-primary) 55%, #10b981);
        border-radius: calc(var(--ge-radius) + 0.25rem);
        color: #fff; padding: 2.25rem 1.5rem;
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem;
}
.ge-cta__title { color: #fff; font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin: 0; }
.ge-cta__text { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 55ch; }
.ge-cta__body .ge-btn { background: #fff; color: var(--ge-primary-strong); min-height: 48px; padding-inline: 2rem; }
.ge-cta__body .ge-btn:hover { background: #ecfdf5; }

/* SEO content */
.ge-seo-content {
        background: var(--ge-surface); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius); padding: 1.5rem;
}
.ge-seo-content .ge-prose { max-width: none; }

/* Media viewer */
.ge-media { margin: 0; }
.ge-media__stage {
        position: relative; aspect-ratio: 16 / 10;
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius);
        overflow: hidden;
}
.ge-media__video, .ge-media__img { width: 100%; height: 100%; object-fit: cover; }
.ge-media__video { background: #000; }
.ge-media__placeholder {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 0.6rem; color: var(--ge-muted);
}
.ge-media__placeholder svg { width: 56px; height: 56px; opacity: 0.55; }
.ge-media__placeholder-text { font-size: 0.85rem; font-weight: 600; }
.ge-media--empty .ge-media__stage { aspect-ratio: auto; min-height: 220px; }
.ge-media__caption { font-size: 0.78rem; color: var(--ge-muted); margin-top: 0.5rem; text-align: center; }

/* Accordion (FAQ) */
.ge-accordion { display: flex; flex-direction: column; gap: 0.6rem; }
.ge-accordion__item {
        background: var(--ge-card); border: 1px solid var(--ge-border);
        border-radius: var(--ge-radius-sm); overflow: hidden;
}
.ge-accordion__trigger {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        width: 100%; padding: 0.95rem 1.1rem; min-height: 52px;
        background: transparent; border: 0; cursor: pointer;
        color: var(--ge-ink); font: inherit; font-weight: 700; font-size: 0.92rem;
        text-align: start;
}
.ge-accordion__trigger:hover { background: var(--ge-surface); }
.ge-accordion__chevron {
        flex: none; width: 20px; height: 20px; color: var(--ge-muted);
        transition: transform 0.25s ease;
}
.ge-accordion__trigger[aria-expanded="true"] { color: var(--ge-primary-strong); }
.ge-accordion__trigger[aria-expanded="true"] .ge-accordion__chevron { transform: rotate(180deg); color: var(--ge-primary); }
.ge-accordion__panel {
        overflow: hidden; max-height: 0;
        transition: max-height 0.3s ease;
}
.ge-accordion__content { padding: 0 1.1rem 1rem; color: var(--ge-body); font-size: 0.9rem; }

/* Empty / 404 / notices */
.ge-empty {
        text-align: center; padding: 3.5rem 1rem;
        background: var(--ge-card); border: 1px dashed var(--ge-border);
        border-radius: var(--ge-radius);
}
.ge-empty__icon { color: var(--ge-muted); margin-bottom: 0.75rem; }
.ge-empty__icon svg { width: 52px; height: 52px; }
.ge-empty__title { font-size: 1.15rem; margin-bottom: 0.35rem; }
.ge-empty__message { color: var(--ge-muted); max-width: 46ch; margin-inline: auto; }
.ge-empty__search { max-width: 420px; margin: 1.25rem auto 0; }
.ge-empty--404 { border-style: solid; }

.ge-notice {
        border: 1px solid var(--ge-border); border-inline-start: 4px solid var(--ge-amber);
        background: var(--ge-amber-soft); border-radius: 0.8rem;
        padding: 0.85rem 1rem; font-size: 0.88rem; color: var(--ge-ink-2);
}
.ge-notice--warning { border-inline-start-color: var(--ge-rose); background: var(--ge-rose-soft); }

/* Breadcrumb */
.ge-breadcrumb { padding: 0.9rem 0 0; }
.ge-breadcrumb__list {
        list-style: none; display: flex; flex-wrap: wrap; align-items: center;
        gap: 0.15rem; font-size: 0.78rem; color: var(--ge-muted); margin: 0;
}
.ge-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.15rem; }
.ge-breadcrumb__item + .ge-breadcrumb__item::before {
        content: "›"; margin-inline: 0.35rem; color: #cbd5e1;
}
.ge-breadcrumb__link { color: var(--ge-muted); }
.ge-breadcrumb__link:hover { color: var(--ge-primary); }
.ge-breadcrumb__current { color: var(--ge-ink-2); font-weight: 600; }

/* Favorite button */
.ge-fav {
        display: inline-flex; align-items: center; gap: 0.45rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-pill);
        background: #fff; color: var(--ge-ink-2);
        min-height: 42px; padding: 0.35rem 1rem;
        font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ge-fav svg { width: 19px; height: 19px; }
.ge-fav:hover { border-color: var(--ge-rose); color: var(--ge-rose); }
.ge-fav.is-active {
        background: var(--ge-rose-soft); border-color: var(--ge-rose); color: var(--ge-rose);
}
.ge-fav.is-active .ge-fav__icon { fill: currentColor; }
.ge-fav.is-loading { opacity: 0.65; pointer-events: none; }
.ge-fav--icon {
        min-height: 38px; width: 38px; padding: 0; justify-content: center;
        border-radius: 50%; background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px); box-shadow: var(--ge-shadow);
}
.ge-fav--icon svg { width: 18px; height: 18px; }
.ge-fav__label { font-size: 0.78rem; }

/* Back to top */
.ge-back-to-top {
        position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 45;
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 50%;
        background: var(--ge-ink); color: #fff; border: 0; cursor: pointer;
        box-shadow: var(--ge-shadow-lg); opacity: 0; visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.ge-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ge-back-to-top svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------
 * 10. Footer (sticky bottom)
 * ------------------------------------------------------------------ */
.ge-footer {
        margin-top: auto;
        background: var(--ge-ink); color: #cbd5e1;
        padding-bottom: env(safe-area-inset-bottom, 0);
}
.ge-footer a { color: #cbd5e1; }
.ge-footer a:hover { color: #fff; }
.ge-footer__grid {
        display: grid; gap: 1.75rem; padding: 2.5rem 0 1.75rem;
        grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ge-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.ge-footer__brand .ge-brand__name { color: #fff; }
.ge-footer__brand .ge-brand__alt { color: #64748b; }
.ge-footer__about { font-size: 0.85rem; color: #94a3b8; margin-top: 0.75rem; max-width: 42ch; }
.ge-footer__count { font-size: 0.8rem; color: #64748b; margin-top: 0.75rem; }
.ge-footer__title { color: #fff; font-size: 0.9rem; margin: 0 0 0.85rem; }
.ge-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.ge-footer__social { display: flex; gap: 0.5rem; }
.ge-footer__social-link {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 0.7rem;
        background: rgba(255, 255, 255, 0.06); color: #cbd5e1;
}
.ge-footer__social-link:hover { background: var(--ge-primary); color: #fff; }
.ge-footer__social-link svg { width: 18px; height: 18px; }
.ge-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ge-footer__bottom-inner {
        padding: 1rem 0; font-size: 0.78rem; color: #64748b;
        display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between;
}

/* ------------------------------------------------------------------
 * 11. Index page / prose fallbacks
 * ------------------------------------------------------------------ */
.ge-index-list { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 1rem 0; }
.ge-index-item__title a { font-weight: 700; color: var(--ge-ink); }
.ge-index-item__excerpt { font-size: 0.88rem; color: var(--ge-muted); }

/* ------------------------------------------------------------------
 * 12. Motion preferences & misc
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }
        .ge-card__img { opacity: 1; transform: none; }
}

@media print {
        .ge-header, .ge-footer, .ge-back-to-top, .ge-load-more, .ge-filters, .ge-filters-toggle { display: none !important; }
        body { color: #000; }
}

/* ==================================================================
 * 13. Compare exercises — card toggle, floating tray, bottom sheet
 * (parity with the preview compare feature). Emerald palette, logical
 * properties only; shells ship from template-parts/compare-bar.php.
 * ================================================================== */

/* [hidden] guards: the author display rules below would otherwise beat
 * the UA `[hidden] { display: none }`. */
.ge-cmp-bar[hidden],
.ge-cmp-sheet[hidden] { display: none !important; }

/* Two icon buttons (favorite + compare) now share the media overlay slot. */
.ge-card__fav { display: flex; align-items: flex-start; gap: 0.35rem; }

/* Card toggle (Scale icon) — mirrors .ge-fav--icon, emerald when active. */
.ge-cmp-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 38px; width: 38px; padding: 0; flex: none;
        border: 1px solid var(--ge-border); border-radius: 50%;
        background: rgba(255, 255, 255, 0.92); color: var(--ge-ink-2);
        cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        box-shadow: var(--ge-shadow);
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ge-cmp-toggle svg { width: 17px; height: 17px; }
.ge-cmp-toggle:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-cmp-toggle.is-active { background: var(--ge-primary); border-color: var(--ge-primary); color: #fff; }

/* Floating tray (bottom pill bar) */
.ge-cmp-bar {
        position: fixed; inset-inline: 0;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
        z-index: 44; display: flex; justify-content: center; padding-inline: 1rem;
}
.ge-cmp-bar__tray {
        display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 42rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #a7f3d0; /* emerald-200 */
        border-radius: var(--ge-radius);
        box-shadow: var(--ge-shadow-lg);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        animation: ge-cmp-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ge-cmp-up {
        from { transform: translateY(12px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
}
.ge-cmp-bar__icon {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 36px; height: 36px; border-radius: var(--ge-radius-sm);
        background: var(--ge-primary); color: #fff;
}
.ge-cmp-bar__icon svg { width: 18px; height: 18px; }
.ge-cmp-bar__chips {
        display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0;
        overflow-x: auto; padding-block: 0.1rem; scrollbar-width: none;
}
.ge-cmp-bar__chips::-webkit-scrollbar { display: none; }
.ge-cmp-chip {
        display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
        padding: 0.18rem 0.5rem;
        border: 1px solid #a7f3d0; border-radius: var(--ge-radius-pill);
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.72rem; font-weight: 700; line-height: 1.7;
}
.ge-cmp-chip__id { font-size: 0.7rem; font-weight: 800; }
.ge-cmp-chip__remove {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
        background: transparent; color: var(--ge-primary); cursor: pointer;
}
.ge-cmp-chip__remove:hover { background: #d1fae5; color: var(--ge-primary-strong); }
.ge-cmp-chip__remove svg { width: 11px; height: 11px; }
.ge-cmp-chip--empty {
        border-style: dashed; border-color: var(--ge-border);
        background: transparent; color: var(--ge-muted); font-weight: 600;
}
.ge-cmp-bar__clear {
        flex: none; border: 0; background: none; padding: 0.25rem 0.35rem;
        color: var(--ge-muted); font: inherit; font-size: 0.75rem; font-weight: 700;
        cursor: pointer; border-radius: 0.5rem;
}
.ge-cmp-bar__clear:hover { color: var(--ge-ink-2); background: var(--ge-surface); }
.ge-cmp-bar__cta {
        flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
        min-height: 38px; padding: 0.35rem 0.9rem; border: 0;
        border-radius: var(--ge-radius-sm);
        background: var(--ge-primary); color: #fff;
        font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer;
        box-shadow: 0 1px 2px rgba(5, 150, 105, 0.35);
        transition: background 0.15s ease;
}
.ge-cmp-bar__cta:hover:not(:disabled) { background: var(--ge-primary-strong); }
.ge-cmp-bar__cta:disabled { background: var(--ge-border); color: var(--ge-muted); box-shadow: none; cursor: not-allowed; }

/* Bottom sheet */
.ge-cmp-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.ge-cmp-sheet__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.ge-cmp-sheet__panel {
        position: relative; width: 100%; max-width: 900px; max-height: 88vh; max-height: 88svh;
        display: flex; flex-direction: column; overflow: hidden;
        background: #fff; border-radius: 1.5rem 1.5rem 0 0;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.22);
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: ge-drawer-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ge-cmp-sheet__head {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--ge-border);
        background: linear-gradient(270deg, rgba(236, 253, 245, 0.65), transparent);
}
.ge-cmp-sheet__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; }
.ge-cmp-sheet__badge {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 32px; height: 32px; border-radius: 0.65rem;
        background: var(--ge-primary); color: #fff;
}
.ge-cmp-sheet__badge svg { width: 16px; height: 16px; }
.ge-cmp-sheet__count { font-size: 0.75rem; font-weight: 500; color: var(--ge-muted); }
.ge-cmp-sheet__close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 0.65rem;
        background: var(--ge-surface); color: var(--ge-ink); cursor: pointer;
}
.ge-cmp-sheet__close svg { width: 18px; height: 18px; }
.ge-cmp-sheet__close:hover { background: #f1f5f9; }
.ge-cmp-sheet__body { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
.ge-cmp-sheet__body::-webkit-scrollbar { width: 6px; height: 6px; }
.ge-cmp-sheet__body::-webkit-scrollbar-track { background: transparent; }
.ge-cmp-sheet__body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 999px; }

/* Comparison table — horizontally scrollable, sticky first (label) column.
 * inset-inline-start resolves to the RIGHT edge in this RTL theme. */
.ge-cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ge-cmp-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.ge-cmp-table th, .ge-cmp-table td { padding: 0.6rem 0.5rem; text-align: center; vertical-align: middle; }
.ge-cmp-table thead th { border-bottom: 1px solid var(--ge-border); vertical-align: bottom; }
.ge-cmp-table tbody tr { border-top: 1px solid #f1f5f9; }
.ge-cmp-table tbody tr:first-child { border-top: 0; }
.ge-cmp-diff > td { background: #fffbeb; } /* amber tint for differing rows */
.ge-cmp-row-label {
        position: sticky; inset-inline-start: 0; z-index: 2; background: #fff;
        text-align: start; white-space: nowrap;
        font-size: 0.72rem; font-weight: 700; color: var(--ge-ink-2);
}
.ge-cmp-row-label--head { color: var(--ge-muted); font-weight: 500; }
.ge-cmp-col { min-width: 150px; }
.ge-cmp-col__card {
        display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
        padding: 0.6rem 0.5rem; border: 1px solid #d1fae5; border-radius: 1rem;
        background: rgba(236, 253, 245, 0.4);
}
.ge-cmp-col__name { margin: 0; font-size: 0.8rem; font-weight: 800; color: var(--ge-ink); line-height: 1.5; }
.ge-cmp-col__latin { margin: 0 0 0 auto; font-size: 0.65rem; color: var(--ge-muted); }
.ge-cmp-col__id { font-size: 0.62rem; color: var(--ge-muted); font-weight: 600; }
.ge-cmp-col__remove {
        display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.3rem;
        padding: 0.2rem 0.55rem; border: 1px solid var(--ge-border); border-radius: 0.55rem;
        background: #fff; color: var(--ge-muted);
        font: inherit; font-size: 0.68rem; font-weight: 700; cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
}
.ge-cmp-col__remove:hover { border-color: #fecdd3; color: var(--ge-rose); }
.ge-cmp-col__remove svg { width: 11px; height: 11px; }
.ge-cmp-chip-val {
        display: inline-flex; align-items: center; padding: 0.14rem 0.5rem;
        border-radius: 0.55rem; background: var(--ge-surface);
        color: var(--ge-ink-2); font-size: 0.7rem; font-weight: 700;
}
.ge-cmp-chip-val--emerald { background: var(--ge-primary-soft); color: var(--ge-primary-strong); }
.ge-cmp-chip-val--outline { background: #fff; border: 1px solid var(--ge-border); color: var(--ge-body); font-weight: 600; }
.ge-cmp-strong { font-size: 0.75rem; font-weight: 800; color: var(--ge-ink-2); }
.ge-cmp-tempo {
        display: inline-block; padding: 0.14rem 0.5rem; border-radius: 0.55rem;
        background: var(--ge-surface); font-size: 0.7rem; font-weight: 700; color: var(--ge-ink-2);
}
.ge-cmp-none { color: #cbd5e1; font-size: 0.75rem; }
.ge-cmp-table .ge-pill { font-size: 0.7rem; }
.ge-cmp-actions .ge-btn { min-height: 34px; padding: 0.25rem 0.7rem; font-size: 0.72rem; }
.ge-cmp-view { white-space: nowrap; }

.ge-cmp-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.8rem; }
.ge-cmp-legend { margin: 0; font-size: 0.7rem; color: var(--ge-muted); line-height: 1.6; }
.ge-cmp-legend strong { color: var(--ge-amber); font-weight: 800; }
.ge-cmp-clear-all {
        border: 0; background: none; padding: 0.3rem 0.4rem; border-radius: 0.5rem;
        color: var(--ge-muted); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.ge-cmp-clear-all:hover { color: var(--ge-rose); }

.ge-cmp-loading { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 3rem 0; color: var(--ge-muted); font-size: 0.85rem; }
.ge-cmp-loading__dot {
        width: 18px; height: 18px; border-radius: 50%; flex: none;
        border: 2px solid #d1fae5; border-top-color: var(--ge-primary);
        animation: ge-cmp-spin 0.8s linear infinite;
}
@keyframes ge-cmp-spin { to { transform: rotate(360deg); } }
.ge-cmp-error {
        border: 1px solid #fecdd3; background: var(--ge-rose-soft); color: var(--ge-rose);
        padding: 0.9rem; border-radius: var(--ge-radius-sm);
        text-align: center; font-size: 0.82rem; font-weight: 700;
}

@media (max-width: 639px) {
        .ge-cmp-bar__tray { gap: 0.4rem; padding: 0.4rem; }
        .ge-cmp-bar__cta { min-height: 34px; padding: 0.3rem 0.6rem; font-size: 0.75rem; }
        .ge-cmp-sheet__body { padding: 0.85rem 0.9rem 1rem; }
}

@media print {
        .ge-cmp-bar, .ge-cmp-sheet, .ge-cmp-toggle { display: none !important; }
}

/* ==================================================================
 * 14. Muscle map — interactive anatomical filter (front/back view)
 * (parity with the preview muscle-map.tsx; SVG geometry is ported 1:1).
 * Region states are transitions only — the global reduced-motion block
 * neutralises them. Chips mirror .ge-chip with an emerald active state.
 * ================================================================== */

.ge-map {
        margin-block: 1.75rem 0.5rem;
        overflow: hidden;
        border: 1px solid var(--ge-border); /* slate-200 */
        border-radius: calc(var(--ge-radius) + 0.25rem);
        background: linear-gradient(180deg, var(--ge-surface), #fff);
        box-shadow: var(--ge-shadow);
}

.ge-map__head {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        background: rgba(255, 255, 255, 0.6);
}
.ge-map__title {
        display: flex; align-items: center; gap: 0.5rem;
        margin: 0; font-size: 0.9rem; font-weight: 800; color: var(--ge-ink);
}
.ge-map__title svg { width: 18px; height: 18px; color: var(--ge-primary); flex: none; }
.ge-map__hint { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ge-muted); }

/* Front / back segmented toggle */
.ge-map__views {
        display: inline-flex; align-items: center; gap: 0.15rem;
        padding: 0.15rem; border: 1px solid var(--ge-border); border-radius: 0.75rem;
        background: #fff;
}
.ge-map__view {
        min-height: 32px; padding: 0.2rem 0.75rem; border: 0;
        border-radius: 0.55rem; background: transparent;
        font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--ge-muted);
        cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.ge-map__view:hover { color: var(--ge-ink-2); }
.ge-map__view.is-active { background: var(--ge-primary); color: #fff; box-shadow: 0 1px 2px rgba(5, 150, 105, 0.35); }
.ge-map__view:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }

.ge-map__body {
        display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
        padding: 1.25rem 1rem 1.4rem;
}
@media (min-width: 640px) {
        .ge-map__body { flex-direction: row; align-items: stretch; gap: 1.75rem; padding: 1.4rem 1.5rem 1.6rem; }
}

/* Figure */
.ge-map__figure {
        position: relative; flex: none; padding: 0.5rem;
        border: 1px solid #f1f5f9; border-radius: 1rem;
        background: #fff; box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ge-map__svg { height: 16rem; width: auto; display: block; } /* h-64 */
@media (min-width: 640px) { .ge-map__svg { height: 18rem; } } /* sm:h-72 */
/* Author display:block above would beat the UA [hidden] rule — the view
   swap relies on the hidden attribute, so re-assert it. */
.ge-map__svg[hidden] { display: none; }

/* Spine hint (back view only, toggled with the view) */
.ge-map__spine {
        position: absolute; left: 50%; top: 68px; height: 160px; width: 1px;
        background: var(--ge-border); transform: translateX(-50%);
        pointer-events: none;
}

/* Regions — idle / hover / active / focus (stroke-width in user units) */
.ge-map-region { cursor: pointer; outline: none; }
.ge-map-region .ge-map-region-shape {
        fill: #e2e8f0; stroke: #cbd5e1; stroke-width: 1.5;
        transition: fill 0.2s ease, stroke 0.2s ease;
}
.ge-map-region:hover .ge-map-region-shape,
.ge-map-region:focus-visible .ge-map-region-shape { fill: #a7f3d0; stroke: #34d399; }
.ge-map-region.is-active .ge-map-region-shape,
.ge-map-region[aria-pressed="true"] .ge-map-region-shape {
        fill: var(--ge-primary); stroke: var(--ge-primary-strong);
}
.ge-map-region:focus-visible { stroke: var(--ge-primary); stroke-width: 2.5; }

/* Visual-only abs segment lines stay light in every state */
.ge-map-region .ge-map-lines { pointer-events: none; }

/* Chips (one row per view) */
.ge-map__side { min-width: 0; flex: 1; align-self: center; }
.ge-map__chips-label { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--ge-muted); }
.ge-map__chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ge-map__chips[hidden] { display: none; }

.ge-map-chip {
        display: inline-flex; align-items: center; gap: 0.4rem;
        min-height: 36px; padding: 0.3rem 0.75rem;
        border: 1px solid var(--ge-border); border-radius: 0.75rem;
        background: #fff; color: var(--ge-ink-2);
        font: inherit; font-size: 0.75rem; font-weight: 700;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}
.ge-map-chip:hover:not(:disabled) {
        border-color: #6ee7b7; color: var(--ge-primary-strong);
        box-shadow: var(--ge-shadow); transform: translateY(-1px);
}
.ge-map-chip:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-map-chip.is-active {
        border-color: var(--ge-primary-strong); background: var(--ge-primary);
        color: #fff; box-shadow: 0 1px 2px rgba(5, 150, 105, 0.35);
}
.ge-map-chip:disabled { border-color: #f1f5f9; background: var(--ge-surface); color: #cbd5e1; cursor: not-allowed; }
.ge-map-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex: none; }
.ge-map-chip.is-active .ge-map-chip__dot { background: #fff; }
.ge-map-chip:disabled .ge-map-chip__dot { background: #e2e8f0; }
.ge-map-chip__count {
        padding: 0 0.35rem; border-radius: 0.4rem;
        background: #f1f5f9; color: var(--ge-muted);
        font-size: 0.65rem; font-weight: 800;
}
.ge-map-chip.is-active .ge-map-chip__count { background: #10b981; color: #ecfdf5; }

/* Active-muscles summary line */
.ge-map__active { margin: 0.75rem 0 0; font-size: 0.7rem; color: var(--ge-muted); }
.ge-map__active[hidden] { display: none; }
.ge-map__active-names { font-weight: 700; color: var(--ge-primary-strong); }

@media (max-width: 639.98px) {
        .ge-map__head { flex-direction: column; align-items: flex-start; }
}

/* ==================================================================
 * 15. Workout drawer («تمرین من») — card toggle, header button,
 * right-side sheet (RTL: inset-inline-start = physical right), rows
 * with 44px thumbs, sets stepper, sticky footer. Emerald palette,
 * z-index stack consistent with the compare sheet (overlay 70).
 * ================================================================== */

/* [hidden] guards: author display rules below would otherwise beat the UA. */
.ge-workout[hidden] { display: none !important; }

/* Card toggle (Bookmark-plus icon) — mirrors .ge-cmp-toggle */
.ge-workout-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 38px; width: 38px; padding: 0; flex: none;
        border: 1px solid var(--ge-border); border-radius: 50%;
        background: rgba(255, 255, 255, 0.92); color: var(--ge-ink-2);
        cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        box-shadow: var(--ge-shadow);
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ge-workout-toggle svg { width: 17px; height: 17px; }
.ge-workout-toggle:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-workout-toggle.is-active { background: var(--ge-primary); border-color: var(--ge-primary); color: #fff; }

/* Header button (clipboard-list + count badge) */
.ge-workout-btn {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; width: 40px; padding: 0;
        border: 1px solid var(--ge-border); border-radius: 0.7rem;
        background: #fff; color: var(--ge-ink-2); cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
}
.ge-workout-btn:hover { border-color: var(--ge-primary); color: var(--ge-primary); }
.ge-workout-btn:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-workout-btn svg { width: 20px; height: 20px; }
.ge-workout-btn__count {
        position: absolute; top: -6px; inset-inline-end: -6px;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 4px;
        border-radius: var(--ge-radius-pill);
        background: var(--ge-primary); color: #fff;
        font-size: 0.62rem; font-weight: 800; line-height: 1;
        box-shadow: 0 1px 3px rgba(5, 150, 105, 0.4);
}
.ge-workout-btn__count[hidden] { display: none; }

/* Drawer shell — overlay + right-side panel */
.ge-workout { position: fixed; inset: 0; z-index: 70; }
.ge-workout__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.ge-workout__panel {
        position: absolute; inset-block: 0; inset-inline-start: 0;
        display: flex; flex-direction: column; width: 100%; max-width: 420px;
        background: #fff;
        box-shadow: calc(12px * -1) 0 32px rgba(15, 23, 42, 0.22); /* shadow falls to the left of the RTL sheet */
        animation: ge-workout-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ge-workout-in {
        from { transform: translateX(24px); opacity: 0.6; }
        to { transform: translateX(0); opacity: 1; }
}
.ge-workout__head {
        position: relative;
        display: flex; flex-direction: column; gap: 0.15rem;
        padding: 1rem 3.4rem 1rem 1.25rem; /* reserves the close-button zone (RTL) */
        border-bottom: 1px solid var(--ge-border);
        background: linear-gradient(270deg, rgba(236, 253, 245, 0.65), transparent);
}
.ge-workout__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; }
.ge-workout__badge {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 32px; height: 32px; border-radius: 0.65rem;
        background: var(--ge-primary); color: #fff;
}
.ge-workout__badge svg { width: 16px; height: 16px; }
.ge-workout__desc { margin: 0; font-size: 0.72rem; color: var(--ge-muted); }
.ge-workout__close {
        position: absolute; top: 0.9rem; inset-inline-end: 0.9rem;
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 0.65rem;
        background: var(--ge-surface); color: var(--ge-ink); cursor: pointer;
}
.ge-workout__close svg { width: 18px; height: 18px; }
.ge-workout__close:hover { background: #f1f5f9; }

/* Stats strip (حرکت / ست کل / دقیقه تقریبی) */
.ge-workout__stats {
        display: flex; align-items: center; justify-content: space-around;
        margin: 0.9rem 1rem 0; padding: 0.6rem 0.75rem;
        border: 1px solid #a7f3d0; border-radius: 0.75rem;
        background: rgba(236, 253, 245, 0.6); text-align: center;
}
.ge-workout__stats[hidden] { display: none; }
.ge-workout__stat { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.ge-workout__stat-num {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
        font-size: 0.95rem; font-weight: 800; color: var(--ge-primary-strong);
}
.ge-workout__stat-label { font-size: 0.62rem; font-weight: 700; color: rgba(4, 120, 87, 0.7); }
.ge-workout__stat-sep { width: 1px; height: 28px; background: #a7f3d0; }

/* Body */
.ge-workout__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.85rem 1rem 1rem; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
.ge-workout__body::-webkit-scrollbar { width: 6px; }
.ge-workout__body::-webkit-scrollbar-track { background: transparent; }
.ge-workout__body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 999px; }

.ge-workout__list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; }

/* Row (zebra-free, emerald hover border) */
.ge-workout-row {
        padding: 0.6rem; border: 1px solid var(--ge-border); border-radius: 0.75rem;
        background: #fff; transition: border-color 0.15s ease;
}
.ge-workout-row:hover { border-color: #6ee7b7; }
.ge-workout-row__main { display: flex; align-items: center; gap: 0.6rem; }
.ge-workout-row__num {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 24px; height: 24px; border-radius: 0.5rem;
        background: #f1f5f9; color: var(--ge-muted);
        font-size: 0.68rem; font-weight: 800;
}
.ge-workout-row__thumb {
        position: relative; flex: none; width: 44px; height: 44px; overflow: hidden;
        border: 1px solid #f1f5f9; border-radius: 0.55rem;
        background: var(--ge-surface); color: #cbd5e1;
}
.ge-workout-row__thumb svg {
        position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
}
.ge-workout-row__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ge-workout-row__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.ge-workout-row__name {
        display: block; width: 100%; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
        text-align: start; font-size: 0.8rem; font-weight: 700; color: var(--ge-ink);
}
a.ge-workout-row__name:hover { color: var(--ge-primary-strong); }
.ge-workout-row__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.ge-workout-row__tags .ge-pill { font-size: 0.62rem; }
.ge-workout-row__muscle { font-size: 0.62rem; color: var(--ge-muted); }
.ge-workout-row__ops { display: flex; flex-direction: column; gap: 0.1rem; flex: none; }
.ge-workout-row__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 24px; padding: 0; border: 0; border-radius: 0.5rem;
        background: transparent; color: var(--ge-muted); cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
}
.ge-workout-row__icon svg { width: 14px; height: 14px; }
.ge-workout-row__icon:hover:not(:disabled) { background: #f1f5f9; color: var(--ge-ink-2); }
.ge-workout-row__icon:disabled { opacity: 0.3; cursor: not-allowed; }
.ge-workout-row__icon--remove:hover { background: var(--ge-rose-soft); color: var(--ge-rose); }

/* Sets stepper + reps select */
.ge-workout-row__controls {
        display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
        margin-top: 0.5rem; padding-top: 0.5rem;
        border-top: 1px dashed #f1f5f9;
}
.ge-workout-row__ctl-label { font-size: 0.68rem; font-weight: 700; color: var(--ge-muted); }
.ge-workout-row__stepper {
        display: inline-flex; align-items: center;
        border: 1px solid var(--ge-border); border-radius: 0.5rem; overflow: hidden;
}
.ge-workout-row__stepper button {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; padding: 0; border: 0;
        background: #fff; color: var(--ge-ink-2);
        font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
        transition: color 0.15s ease;
}
.ge-workout-row__stepper button:hover:not(:disabled) { color: var(--ge-primary-strong); background: var(--ge-primary-soft); }
.ge-workout-row__stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.ge-workout-row__stepper span {
        width: 26px; text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--ge-ink-2);
}
.ge-workout-row__reps {
        min-height: 28px; padding: 0 0.4rem;
        border: 1px solid var(--ge-border); border-radius: 0.5rem;
        background: #fff; font: inherit; font-size: 0.7rem; font-weight: 700; color: var(--ge-ink-2);
        cursor: pointer;
}
.ge-workout-row__reps:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 1px; }

/* Empty state */
.ge-workout__empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 0.6rem; padding: 2.5rem 1rem; text-align: center;
}
.ge-workout__empty-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; border-radius: 1rem;
        background: var(--ge-surface); color: #cbd5e1;
}
.ge-workout__empty-icon svg { width: 28px; height: 28px; }
.ge-workout__empty-title { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--ge-ink-2); }
.ge-workout__empty-desc { margin: 0; max-width: 22ch; font-size: 0.72rem; color: var(--ge-muted); line-height: 1.8; }
.ge-workout__empty-btn { min-height: 38px; margin-top: 0.3rem; }

/* Error */
.ge-workout__error {
        border: 1px solid #fecdd3; background: var(--ge-rose-soft); color: var(--ge-rose);
        padding: 0.9rem; border-radius: var(--ge-radius-sm);
        text-align: center; font-size: 0.82rem; font-weight: 700;
}

/* Sticky footer actions (safe-area aware) */
.ge-workout__foot {
        position: sticky; bottom: 0; z-index: 1;
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--ge-border); background: #fff;
}
.ge-workout__foot[hidden] { display: none; }
.ge-workout__foot .ge-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 42px; font-size: 0.8rem; font-weight: 800; }
.ge-workout__foot .ge-btn svg { width: 16px; height: 16px; }
.ge-workout__clear:not(:hover):not(:focus-visible) { color: var(--ge-rose); border-color: #fecdd3; }
.ge-workout__clear:hover { background: var(--ge-rose-soft); border-color: #fecdd3; color: var(--ge-rose); }

/* Persian toast (add/remove/copy/clear feedback) */
.ge-toast {
        position: fixed; inset-inline: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
        z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
        width: max-content; max-width: calc(100vw - 2rem); margin-inline: auto;
        padding: 0.6rem 1.1rem;
        border: 1px solid #a7f3d0; border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.97); box-shadow: var(--ge-shadow-lg);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.ge-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ge-toast__title { font-size: 0.8rem; font-weight: 800; color: var(--ge-ink); }
.ge-toast__desc { font-size: 0.68rem; color: var(--ge-muted); }

@media (max-width: 639.98px) {
        .ge-workout__stats { margin-inline: 0.85rem; }
        .ge-workout__body { padding-inline: 0.85rem; }
}

@media print {
        .ge-workout, .ge-workout-toggle, .ge-workout-btn { display: none !important; }
}

/* ==================================================================
 * 16. Print stylesheet — single exercise page prints as a clean
 * document: everything outside #ge-print-root is hidden (visibility
 * trick keeps the layout width), interactive/secondary blocks are
 * dropped with .ge-print-hide, A4 with 12mm margins, sections and
 * list items avoid page breaks.
 * ================================================================== */
@page { size: A4; margin: 12mm; }

@media print {
        /* Hide everything, then re-show only the print root subtree. */
        body * { visibility: hidden; }
        .ge-print-root,
        .ge-print-root * { visibility: visible; }
        .ge-print-root {
                position: absolute;
                inset-inline-start: 0;
                top: 0;
                width: 100%;
                max-width: none;
                padding: 0;
                margin: 0;
        }

        /* Non-content blocks inside the print root. */
        .ge-print-hide { display: none !important; }
        [data-print-hide] { display: none !important; }

        /* The body flex column would offset the absolutely positioned root. */
        body { display: block; background: #fff; color: #000; }
        .ge-main { display: block; overflow: visible; }

        /* Quiet, document-like typography + page-break hygiene. */
        .ge-print-root a { color: inherit; text-decoration: none; }
        .ge-print-root .ge-section,
        .ge-print-root .ge-callout,
        .ge-print-root li,
        .ge-print-root .ge-quick-info__cell,
        .ge-print-root .ge-variation-card,
        .ge-print-root .ge-accordion__item { break-inside: avoid; page-break-inside: avoid; }
        .ge-print-root .ge-hero,
        .ge-print-root .ge-media__stage { border: 0; background: none; box-shadow: none; }
        .ge-print-root .ge-section__title svg,
        .ge-print-root .ge-list li svg { color: #000; }
        .ge-print-root .ge-list--steps li { background: none; border: 0; }
        .ge-print-root .ge-quick-info__cell,
        .ge-print-root .ge-variation-card { border-color: #cbd5e1; }

        /* Existing chrome rules stay effective (header/footer/filters/…). */
        .ge-header, .ge-footer, .ge-back-to-top, .ge-load-more,
        .ge-filters, .ge-filters-toggle, .ge-map,
        .ge-cmp-bar, .ge-cmp-sheet, .ge-cmp-toggle,
        .ge-toast { display: none !important; }
}

/* ==================================================================
 * 17. Recent views — «بازدیدهای اخیر» strip (parity with the preview
 * recent-views strip). The server-rendered shell starts [hidden]; the
 * JS section fills the 96px chips (56px thumbs) from localStorage
 * "ge:recent-views" + gym/v1 details, then reveals the section.
 * ================================================================== */

/* [hidden] guard: keep the shell from flashing before the first render. */
.ge-recent[hidden] { display: none; }

.ge-recent { margin-block: 0.35rem 1.6rem; }

.ge-recent__head {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        margin-bottom: 0.65rem;
}
.ge-recent__title {
        display: inline-flex; align-items: center; gap: 0.45rem;
        margin: 0; font-size: 0.9rem; font-weight: 800; color: var(--ge-ink);
}
.ge-recent__icon { display: inline-flex; color: var(--ge-primary); }
.ge-recent__icon svg { width: 17px; height: 17px; }
.ge-recent__count {
        min-width: 22px; padding: 0 0.45rem;
        border-radius: var(--ge-radius-pill);
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.64rem; font-weight: 800; line-height: 1.7; text-align: center;
}
.ge-recent__clear {
        min-height: 30px; padding: 0.1rem 0.6rem;
        border: 0; border-radius: 0.5rem; background: transparent;
        color: var(--ge-muted); font: inherit; font-size: 0.7rem; font-weight: 800;
        cursor: pointer;
        transition: color 0.15s ease, background 0.15s ease;
}
.ge-recent__clear:hover { color: var(--ge-rose); background: var(--ge-rose-soft); }
.ge-recent__clear:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }

/* RTL horizontal strip — direction-aware via logical properties, slim
 * scrollbar, per-chip snap points. */
.ge-recent__list {
        display: flex; gap: 0.65rem; list-style: none;
        margin-inline: -0.25rem; padding: 0 0.25rem 0.45rem;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--ge-border) transparent;
}
.ge-recent__list::-webkit-scrollbar { height: 6px; }
.ge-recent__list::-webkit-scrollbar-track { background: transparent; }
.ge-recent__list::-webkit-scrollbar-thumb { background: var(--ge-border); border-radius: var(--ge-radius-pill); }
.ge-recent__list::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
.ge-recent__list > li { flex: none; scroll-snap-align: start; }

/* Chip card (96px) — hover lift + emerald border like the exercise cards. */
.ge-recent-chip { position: relative; }
.ge-recent-chip__link {
        display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
        width: 96px; padding: 0.5rem 0.4rem 0.55rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: var(--ge-card); color: inherit;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ge-recent-chip__link:hover {
        transform: translateY(-2px);
        border-color: #a7f3d0;
        box-shadow: var(--ge-shadow);
        color: inherit;
}
.ge-recent-chip__thumb {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; overflow: hidden;
        border: 1px solid var(--ge-border); border-radius: 0.65rem;
        background: linear-gradient(135deg, var(--ge-primary-soft), rgba(204, 251, 241, 0.7));
        color: #34d399;
}
.ge-recent-chip__thumb svg { width: 20px; height: 20px; }
.ge-recent-chip__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ge-recent-chip__name {
        max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font-size: 0.68rem; font-weight: 800; color: var(--ge-ink-2);
        transition: color 0.15s ease;
}
.ge-recent-chip__link:hover .ge-recent-chip__name { color: var(--ge-primary-strong); }
.ge-recent-chip__link .ge-pill { padding-block: 0.05rem; font-size: 0.6rem; line-height: 1.6; }

/* Per-chip ✕ — revealed on hover/focus, always visible on touch. */
.ge-recent-chip__remove {
        position: absolute; top: -0.4rem; inset-inline-end: -0.4rem; z-index: 1;
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; padding: 0;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-pill);
        background: #fff; color: var(--ge-muted); cursor: pointer;
        box-shadow: var(--ge-shadow);
        opacity: 0; visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, background 0.15s ease;
}
.ge-recent-chip__remove svg { width: 11px; height: 11px; }
.ge-recent-chip:hover .ge-recent-chip__remove,
.ge-recent-chip:focus-within .ge-recent-chip__remove { opacity: 1; visibility: visible; }
.ge-recent-chip__remove:hover { color: var(--ge-rose); border-color: #fecdd3; background: var(--ge-rose-soft); }
.ge-recent-chip__remove:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
@media (hover: none) {
        .ge-recent-chip__remove { opacity: 1; visibility: visible; }
}

/* Skeleton while the gym/v1 details load. */
.ge-recent-chip--skeleton {
        display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
        width: 96px; padding: 0.5rem 0.4rem 0.55rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: var(--ge-surface);
        animation: ge-recent-pulse 1.4s ease-in-out infinite;
}
.ge-recent-chip--skeleton::before { content: ''; width: 56px; height: 56px; border-radius: 0.65rem; background: var(--ge-border); }
.ge-recent-chip--skeleton::after { content: ''; width: 72%; height: 0.6rem; border-radius: 0.35rem; background: var(--ge-border); }
@keyframes ge-recent-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
        .ge-recent-chip--skeleton { animation: none; }
        .ge-recent-chip__link { transition: none; }
}

/* ==================================================================
 * 18. AI Coach («مربی هوشمند») — emerald→teal gradient banner + modal
 * (parity with the preview coach-banner/coach-dialog). The banner CTA
 * opens the centered modal; form chips, staggered loading skeleton and
 * the plan view all reuse the emerald tokens. Overlay z-index matches
 * the compare/workout stack (70).
 * ================================================================== */

/* Banner (gradient + decorative blurred blobs, like the preview). */
.ge-coach-banner {
        position: relative; overflow: hidden;
        margin-block: 0.35rem 1.6rem;
        padding: 1.25rem;
        border: 1px solid rgba(167, 243, 208, 0.55); border-radius: var(--ge-radius);
        background: linear-gradient(270deg, #059669, #0d9488);
        box-shadow: var(--ge-shadow);
}
.ge-coach-banner__blob {
        position: absolute; pointer-events: none; border-radius: 50%;
}
.ge-coach-banner__blob--one {
        width: 128px; height: 128px; top: -32px; inset-inline-start: -24px;
        background: rgba(255, 255, 255, 0.12); filter: blur(28px);
}
.ge-coach-banner__blob--two {
        width: 80px; height: 80px; bottom: 0; inset-inline-start: 33%;
        background: rgba(153, 246, 228, 0.28); filter: blur(20px);
}
.ge-coach-banner__inner {
        position: relative;
        display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.ge-coach-banner__icon {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 56px; height: 56px;
        border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--ge-radius);
        background: rgba(255, 255, 255, 0.15); color: #fff;
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ge-coach-banner__icon svg { width: 28px; height: 28px; }
.ge-coach-banner__text { min-width: 0; flex: 1; }
.ge-coach-banner__title { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.ge-coach-banner__desc { margin: 0.25rem 0 0; color: rgba(236, 253, 245, 0.9); font-size: 0.72rem; line-height: 1.8; }
.ge-coach-banner__cta {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
        width: 100%; min-height: 48px; padding: 0 1.1rem;
        border: 0; border-radius: var(--ge-radius-sm);
        background: #fff; color: #047857;
        font: inherit; font-size: 0.82rem; font-weight: 800;
        cursor: pointer; box-shadow: var(--ge-shadow-lg);
        transition: background 0.15s ease, transform 0.15s ease;
}
.ge-coach-banner__cta svg { width: 18px; height: 18px; }
.ge-coach-banner__cta:hover { background: var(--ge-primary-soft); }
.ge-coach-banner__cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; }
@media (min-width: 640px) {
        .ge-coach-banner__inner { flex-direction: row; align-items: center; }
        .ge-coach-banner__cta { width: auto; }
        .ge-coach-banner__cta:hover { transform: translateY(-1px); }
}

/* Modal shell — centered panel, overlay identical to the workout drawer. */
.ge-coach[hidden] { display: none !important; }
.ge-coach {
        position: fixed; inset: 0; z-index: 70;
        display: flex; align-items: center; justify-content: center;
        padding: 1rem;
}
.ge-coach__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.ge-coach__panel {
        position: relative; z-index: 1;
        display: flex; flex-direction: column;
        width: 100%; max-width: 512px; max-height: min(88vh, 88svh);
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius);
        background: #fff; overflow: hidden;
        box-shadow: var(--ge-shadow-lg);
        animation: ge-coach-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ge-coach-in {
        from { transform: translateY(14px); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
}
.ge-coach__head {
        position: relative; flex: none;
        display: flex; flex-direction: column; gap: 0.15rem;
        padding: 1rem 3.4rem 1rem 1.25rem; /* reserves the close-button zone (RTL) */
        border-bottom: 1px solid var(--ge-border);
        background: linear-gradient(270deg, rgba(236, 253, 245, 0.65), transparent);
}
.ge-coach__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; }
.ge-coach__badge {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 32px; height: 32px; border-radius: 0.65rem;
        background: linear-gradient(135deg, #10b981, #0d9488); color: #fff;
}
.ge-coach__badge svg { width: 16px; height: 16px; }
.ge-coach__desc { margin: 0; font-size: 0.72rem; color: var(--ge-muted); }
.ge-coach__close {
        position: absolute; top: 0.9rem; inset-inline-end: 0.9rem;
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 0.65rem;
        background: var(--ge-surface); color: var(--ge-ink); cursor: pointer;
}
.ge-coach__close svg { width: 18px; height: 18px; }
.ge-coach__close:hover { background: #f1f5f9; }
.ge-coach__body {
        flex: 1; min-height: 0; overflow-y: auto;
        padding: 1.1rem 1.25rem 1.25rem;
        scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
.ge-coach__body::-webkit-scrollbar { width: 6px; }
.ge-coach__body::-webkit-scrollbar-track { background: transparent; }
.ge-coach__body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 999px; }

/* Form: goal chips / level segmented / minutes + equipment chips. */
.ge-coach-fieldset { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.ge-coach__legend { margin: 0 0 0.5rem; padding: 0; font-size: 0.72rem; font-weight: 800; color: var(--ge-ink-2); }
.ge-coach-goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.ge-coach-level-row { display: flex; gap: 0.5rem; }
.ge-coach-level-row .ge-coach-chip { flex: 1; min-height: 38px; font-size: 0.72rem; }
.ge-coach-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ge-coach-chip {
        display: inline-flex; align-items: center; gap: 0.4rem;
        min-height: 40px; padding: 0 0.8rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: #fff; color: var(--ge-body);
        font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ge-coach-chip:hover { border-color: #6ee7b7; }
.ge-coach-chip:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-coach-chip.is-active {
        border-color: var(--ge-primary); background: var(--ge-primary-soft);
        color: var(--ge-primary-strong); box-shadow: var(--ge-shadow);
}
.ge-coach-chip__emoji { font-size: 0.95rem; line-height: 1; }
/* Minutes + equipment chips follow the preview's solid-emerald active state. */
.ge-coach-chip-row .ge-coach-chip.is-active {
        background: var(--ge-primary); color: #fff;
}

.ge-coach__error {
        display: flex; align-items: center; gap: 0.4rem;
        margin: 0 0 1.1rem; padding: 0.55rem 0.8rem;
        border: 1px solid #fecdd3; border-radius: var(--ge-radius-sm);
        background: var(--ge-rose-soft); color: var(--ge-rose);
        font-size: 0.72rem; font-weight: 700;
}
.ge-coach__generate {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        width: 100%; min-height: 48px;
        border: 0; border-radius: var(--ge-radius-sm);
        background: linear-gradient(270deg, #059669, #0d9488); color: #fff;
        font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer;
        box-shadow: var(--ge-shadow);
        transition: filter 0.15s ease;
}
.ge-coach__generate svg { width: 18px; height: 18px; }
.ge-coach__generate:hover { filter: brightness(1.06); }
.ge-coach__generate:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-coach__note { margin: 0.7rem 0 0; text-align: center; font-size: 0.62rem; line-height: 1.7; color: var(--ge-muted); }

/* Special-request textarea (optional free text → gym/v1/coach `notes`). */
.ge-coach-notes {
        width: 100%;
        box-sizing: border-box;
        resize: vertical;
        min-height: 58px;
        padding: 0.6rem 0.8rem;
        border: 1.5px solid var(--ge-border, #e2e8f0);
        border-radius: 10px;
        background: #f8fafc;
        color: var(--ge-ink, #0f172a);
        font: inherit;
        font-size: 0.78rem;
        line-height: 1.8;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ge-coach-notes::placeholder { color: var(--ge-muted, #94a3b8); opacity: 1; }
.ge-coach-notes:focus {
        outline: none;
        background: #fff;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.ge-coach-plan__note {
        margin: 0.6rem 0 0;
        padding: 0.5rem 0.7rem;
        border-inline-start: 3px solid #10b981;
        border-radius: 8px;
        background: rgba(16, 185, 129, 0.07);
        font-size: 0.68rem;
        line-height: 1.8;
        color: var(--ge-ink, #0f172a);
        word-break: break-word;
}
.ge-coach-plan__note strong { font-weight: 700; }

/* Loading: spinner + 3 staggered skeleton steps (screen-reader announced). */
.ge-coach-loading { padding-block: 0.5rem; }
.ge-coach-loading__head {
        display: flex; align-items: center; justify-content: center; gap: 0.75rem;
        padding: 1rem 0 1.4rem;
}
.ge-coach-loading__spinner {
        position: relative; display: inline-flex; flex: none;
        width: 48px; height: 48px; border-radius: var(--ge-radius);
        background: linear-gradient(135deg, #10b981, #0d9488);
}
.ge-coach-loading__spinner::after {
        content: ''; position: absolute; inset: 9px;
        border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
        border-radius: 50%;
        animation: ge-coach-spin 0.9s linear infinite;
}
@keyframes ge-coach-spin { to { transform: rotate(360deg); } }
.ge-coach-loading__title { margin: 0; font-size: 0.82rem; font-weight: 800; color: var(--ge-body); }
.ge-coach-loading__steps { display: flex; flex-direction: column; gap: 0.65rem; }
.ge-coach-skeleton { display: flex; align-items: center; gap: 0.65rem; }
.ge-coach-skeleton__icon { flex: none; width: 32px; height: 32px; border-radius: 0.55rem; background: var(--ge-border); }
.ge-coach-skeleton__bar { flex: 1; height: 14px; border-radius: 999px; background: var(--ge-border); }

/* Plan view: emerald header card + numbered rows + import actions. */
.ge-coach-plan { display: flex; flex-direction: column; gap: 0.9rem; }
.ge-coach-plan__card {
        padding: 0.9rem;
        border: 1px solid #a7f3d0; border-radius: var(--ge-radius);
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.7), #fff);
}
.ge-coach-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ge-coach-plan__title { margin: 0; font-size: 0.85rem; font-weight: 800; color: var(--ge-ink); }
.ge-coach-plan__source {
        flex: none; padding: 0.1rem 0.55rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-pill);
        background: var(--ge-surface); color: var(--ge-muted);
        font-size: 0.62rem; font-weight: 800;
}
.ge-coach-plan__source--ai {
        border-color: #99f6e4; background: #f0fdfa; color: #0f766e;
}
/* Source badge + cached badge share the plan card's top row. */
.ge-coach-plan__badges {
        display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
        gap: 0.3rem; flex: none;
}
/* Cached-plan badge (plugin coach cache: cached + cached_at). */
.ge-coach-plan__cached {
        display: inline-flex; align-items: center; gap: 0.25rem;
        padding: 0.1rem 0.55rem;
        border: 1px solid #99f6e4; border-radius: var(--ge-radius-pill);
        background: #f0fdfa; color: #0f766e;
        font-size: 0.62rem; font-weight: 800;
}
.ge-coach-plan__cached svg { width: 11px; height: 11px; flex: none; }
/* Shimmer sweep (1.8s linear infinite) — reduced-motion disables it. */
.ge-shimmer {
        background-image: linear-gradient(110deg, #f0fdfa 0%, #f0fdfa 42%, #ccfbf1 50%, #f0fdfa 58%, #f0fdfa 100%);
        background-size: 200% 100%;
        animation: ge-shimmer-sweep 1.8s linear infinite;
}
@keyframes ge-shimmer-sweep {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
}
.ge-coach-plan__focus { margin: 0.4rem 0 0; font-size: 0.72rem; line-height: 1.8; color: var(--ge-muted); }
.ge-coach-plan__stats {
        display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem;
        margin-top: 0.7rem;
        font-size: 0.68rem; font-weight: 800; color: var(--ge-ink-2);
}
.ge-coach-plan__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; }
.ge-coach-row {
        padding: 0.6rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: #fff;
        transition: border-color 0.15s ease;
}
.ge-coach-row:hover { border-color: #6ee7b7; }
.ge-coach-row__main { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ge-coach-row__num {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 24px; height: 24px; border-radius: 0.5rem;
        background: var(--ge-primary-soft); color: var(--ge-primary);
        font-size: 0.68rem; font-weight: 800;
}
.ge-coach-row__name {
        min-width: 0; flex: 1;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        text-align: start; font-size: 0.8rem; font-weight: 700; color: var(--ge-ink);
}
a.ge-coach-row__name:hover { color: var(--ge-primary-strong); }
.ge-coach-row__pill {
        flex: none; padding: 0.2rem 0.5rem;
        border: 1px solid #a7f3d0; border-radius: 0.5rem;
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.62rem; font-weight: 800;
}
.ge-coach-row__note { margin: 0.4rem 0 0; padding-inline-start: 2.05rem; font-size: 0.68rem; line-height: 1.7; color: var(--ge-muted); }
.ge-coach-plan__actions { display: flex; align-items: center; gap: 0.5rem; }
.ge-coach-plan__actions .ge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; font-size: 0.8rem; font-weight: 800; }
.ge-coach-plan__actions .ge-btn svg { width: 16px; height: 16px; }
.ge-coach-plan__import { flex: 1; }
.ge-coach-plan__back { color: var(--ge-body); }

@media (prefers-reduced-motion: reduce) {
        .ge-coach__panel { animation: none; }
        .ge-coach-loading__spinner::after { animation: none; }
        .ge-coach-banner__cta { transition: none; }
        .ge-shimmer { animation: none; }
}

@media print {
        .ge-coach-banner, .ge-coach { display: none !important; }
}

/* ==================================================================
 * 19. Trending strip — «داغ‌ترین‌های این هفته» (parity with the preview
 * trending strip). Server-driven: the JS section fetches
 * ?trending=<max> and fills the 96px chips (56px thumbs, corner rank
 * medals, flame on #1, Persian view counts). Same [hidden] guard +
 * slim-scrollbar pattern as section 17; pulses/transitions are killed
 * under prefers-reduced-motion.
 * ================================================================== */

/* [hidden] guard: keep the shell from flashing before the first render. */
.ge-trending[hidden] { display: none; }

.ge-trending { margin-block: 0.35rem 1.6rem; }

.ge-trending__head {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        margin-bottom: 0.65rem;
}
.ge-trending__title {
        display: inline-flex; align-items: center; gap: 0.45rem;
        margin: 0; font-size: 0.9rem; font-weight: 800; color: var(--ge-ink);
}
.ge-trending__icon { display: inline-flex; color: var(--ge-primary); }
.ge-trending__icon svg { width: 17px; height: 17px; }
.ge-trending__count {
        min-width: 22px; padding: 0 0.45rem;
        border-radius: var(--ge-radius-pill);
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.64rem; font-weight: 800; line-height: 1.7; text-align: center;
}

/* Live indicator: pulsing emerald dot + «زنده» (aria-hidden decorative). */
.ge-trending__live {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.05rem 0.55rem;
        border: 1px solid #a7f3d0; border-radius: var(--ge-radius-pill);
        background: var(--ge-primary-soft); color: var(--ge-primary-strong);
        font-size: 0.6rem; font-weight: 800; line-height: 1.7;
}
.ge-trending__live-dot {
        flex: none; width: 7px; height: 7px; border-radius: 50%;
        background: #10b981;
        animation: ge-trending-live-pulse 2s ease-in-out infinite;
}
@keyframes ge-trending-live-pulse {
        0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
        50% { opacity: 0.75; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); }
}

/* Refresh icon-button (Persian aria-label from the PHP shell). */
.ge-trending__refresh {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 30px; height: 30px; padding: 0;
        border: 1px solid var(--ge-border); border-radius: 0.5rem;
        background: transparent; color: var(--ge-muted); cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.3s ease;
}
.ge-trending__refresh svg { width: 14px; height: 14px; }
.ge-trending__refresh:hover {
        color: var(--ge-primary-strong); border-color: #a7f3d0;
        background: var(--ge-primary-soft); transform: rotate(180deg);
}
.ge-trending__refresh:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }

/* RTL horizontal strip — direction-aware via logical properties, slim
 * scrollbar, per-chip snap points. Top padding gives the corner rank
 * badges (negative offset) room inside the scroll container. */
.ge-trending__list {
        display: flex; gap: 0.65rem; list-style: none;
        margin-inline: -0.25rem; padding: 0.55rem 0.25rem 0.45rem;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--ge-border) transparent;
}
.ge-trending__list::-webkit-scrollbar { height: 6px; }
.ge-trending__list::-webkit-scrollbar-track { background: transparent; }
.ge-trending__list::-webkit-scrollbar-thumb { background: var(--ge-border); border-radius: var(--ge-radius-pill); }
.ge-trending__list::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
.ge-trending__list > li { flex: none; scroll-snap-align: start; }

/* Chip card (96px) — hover lift + emerald border like the other cards. */
.ge-trending-chip { position: relative; }
.ge-trending-chip__link {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
        width: 96px; padding: 0.5rem 0.4rem 0.55rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: var(--ge-card); color: inherit;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ge-trending-chip__link:hover {
        transform: translateY(-2px);
        border-color: #a7f3d0;
        box-shadow: var(--ge-shadow);
        color: inherit;
}
.ge-trending-chip__thumb {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; overflow: hidden;
        border: 1px solid var(--ge-border); border-radius: 0.65rem;
        background: linear-gradient(135deg, var(--ge-primary-soft), rgba(204, 251, 241, 0.7));
        color: #34d399;
}
.ge-trending-chip__thumb svg { width: 20px; height: 20px; }
.ge-trending-chip__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ge-trending-chip__name {
        max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font-size: 0.68rem; font-weight: 800; color: var(--ge-ink-2);
        transition: color 0.15s ease;
}
.ge-trending-chip__link:hover .ge-trending-chip__name { color: var(--ge-primary-strong); }

/* Persian view count + tiny eye glyph. */
.ge-trending-chip__views {
        display: inline-flex; align-items: center; gap: 0.25rem;
        font-size: 0.6rem; font-weight: 800; color: var(--ge-muted);
}
.ge-trending-chip__views svg { width: 11px; height: 11px; }

/* Corner rank badge: ۱ gold / ۲ silver / ۳ bronze / ۴+ slate. */
.ge-trending-chip__rank {
        position: absolute; top: -0.45rem; inset-inline-start: -0.45rem; z-index: 1;
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px;
        border-radius: var(--ge-radius-pill);
        color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1;
        box-shadow: var(--ge-shadow);
}
.ge-trending-chip__rank--1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.ge-trending-chip__rank--2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.ge-trending-chip__rank--3 { background: linear-gradient(135deg, #b45309, #d97706); }
.ge-trending-chip__rank--n { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* Flame on the #1 chip — 2s ease-in-out pulse, scale 1 ↔ 1.15. */
.ge-trending-chip__flame {
        position: absolute; top: -0.55rem; inset-inline-end: -0.5rem; z-index: 1;
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px;
        border-radius: var(--ge-radius-pill);
        background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff;
        box-shadow: var(--ge-shadow);
        animation: ge-trending-flame-pulse 2s ease-in-out infinite;
}
.ge-trending-chip__flame svg { width: 12px; height: 12px; }
@keyframes ge-trending-flame-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
}

/* Skeleton while the strip loads (copy of the section-17 pattern). */
.ge-trending-chip--skeleton {
        display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
        width: 96px; padding: 0.5rem 0.4rem 0.55rem;
        border: 1px solid var(--ge-border); border-radius: var(--ge-radius-sm);
        background: var(--ge-surface);
        animation: ge-trending-pulse 1.4s ease-in-out infinite;
}
.ge-trending-chip--skeleton::before { content: ''; width: 56px; height: 56px; border-radius: 0.65rem; background: var(--ge-border); }
.ge-trending-chip--skeleton::after { content: ''; width: 72%; height: 0.6rem; border-radius: 0.35rem; background: var(--ge-border); }
@keyframes ge-trending-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
}

@media (hover: none) {
        .ge-trending-chip__link { transition: none; }
        .ge-trending__refresh { transition: none; }
        .ge-trending__refresh:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
        .ge-trending-chip--skeleton { animation: none; }
        .ge-trending-chip__link { transition: none; }
        .ge-trending-chip__name { transition: none; }
        .ge-trending__live-dot { animation: none; }
        .ge-trending-chip__flame { animation: none; }
        .ge-trending__refresh { transition: none; }
        .ge-trending__refresh:hover { transform: none; }
}

@media print {
        .ge-trending { display: none !important; }
}
/* ==================================================================
 * 20. Round 12 polish — gradient stat numbers, favorite ring-ping,
 * workout session tracker («پیشرفت جلسه»: ticks, counter, progressbar,
 * «از نو» reset, «آفرین!» celebration) and the row done-state. Mirrors
 * the preview's "Round 12 — styling polish" globals block; every
 * pulse/transition below is disabled under prefers-reduced-motion
 * (local guard at the end of this section).
 * ================================================================== */

/* Gradient stat numbers: tabular digits + emerald→teal clipped text.
 * (The preview's JS count-up hero chips are preview-only — the WP hero
 * has no JS stats chips — but the class ships for parity/reuse; see the
 * theme README.) */
.ge-stat-number {
        font-variant-numeric: tabular-nums;
        background: linear-gradient(120deg, #059669, #0d9488);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

/* Favorite ring-ping: one expanding emerald ring the moment a heart is
 * activated — the "saved!" ack next to the existing heart-pop bounce.
 * The span is JS-managed (created on activate, removed on deactivate,
 * aria-hidden) and anchors to the button itself. */
.ge-fav { position: relative; }
.ge-ring-ping {
        position: absolute; inset: -4px;
        border-radius: 9999px;
        border: 2px solid rgba(16, 185, 129, 0.55);
        animation: ge-ring-ping 0.7s cubic-bezier(0, 0, 0.2, 1) 1 forwards;
        pointer-events: none;
}
@keyframes ge-ring-ping {
        0% { transform: scale(0.6); opacity: 0.9; }
        100% { transform: scale(1.5); opacity: 0; }
}

/* Session progress tracker — hidden shell from workout-drawer.php,
 * filled + unhidden by the Workout JS once the plan has rows. */
.ge-workout__session {
        margin: 0.6rem 1rem 0; padding: 0.6rem 0.75rem;
        border: 1px solid var(--ge-border); border-radius: 0.75rem;
        background: #fff;
        transition: border-color 0.2s ease, background 0.2s ease;
}
.ge-workout__session[hidden] { display: none; }
.ge-workout__session.is-done {
        border-color: #6ee7b7;
        background: var(--ge-primary-soft);
}
.ge-workout__session-head {
        display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
        font-size: 0.68rem; font-weight: 800;
}
.ge-workout__session-label { color: var(--ge-muted); }
.ge-workout__session.is-done .ge-workout__session-label { color: var(--ge-primary-strong); }
.ge-workout__session-meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.ge-workout__session-count { color: var(--ge-primary-strong); }
.ge-workout__session-reset {
        display: inline-flex; align-items: center; gap: 0.25rem;
        padding: 0; border: 0; background: transparent; cursor: pointer;
        font: inherit; font-size: 0.62rem; font-weight: 700; color: var(--ge-muted);
        transition: color 0.15s ease;
}
.ge-workout__session-reset svg { width: 11px; height: 11px; }
.ge-workout__session-reset:hover { color: var(--ge-ink-2); }
.ge-workout__session-reset:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-workout__session-reset[hidden] { display: none; }
.ge-workout__session-bar {
        height: 6px; margin-top: 0.4rem; overflow: hidden;
        border-radius: 9999px; background: #f1f5f9;
}
.ge-workout__session-fill {
        display: block; width: 0; height: 100%;
        border-radius: inherit; background: var(--ge-primary);
        transition: width 0.5s ease-out;
}
.ge-workout__session.is-done .ge-workout__session-fill { background: linear-gradient(to left, #10b981, #84cc16); }

/* All-done glow on the bar fill (the «آفرین!» celebration state). */
.ge-progress-done { animation: ge-progress-glow 1.6s ease-in-out infinite; }
@keyframes ge-progress-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        50% { box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.35); }
}

/* Row done state: 24px tick (filled emerald when checked), emerald
 * border + tinted row, slate struck-through title. */
.ge-workout-row__tick {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 24px; height: 24px; padding: 0;
        border: 2px solid #cbd5e1; border-radius: 9999px;
        background: #fff; color: transparent; cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ge-workout-row__tick svg { width: 13px; height: 13px; }
.ge-workout-row__tick:hover { border-color: #34d399; }
.ge-workout-row__tick:active { transform: scale(0.9); }
.ge-workout-row__tick:focus-visible { outline: 2px solid var(--ge-primary); outline-offset: 2px; }
.ge-workout-row__tick[aria-checked="true"] {
        border-color: #10b981; background: #10b981; color: #fff;
}
.ge-workout-row.ge-done { border-color: #6ee7b7; background: rgba(236, 253, 245, 0.5); }
.ge-workout-row.ge-done:hover { border-color: #6ee7b7; }
.ge-workout-row.ge-done .ge-workout-row__num { background: #d1fae5; color: #059669; }
.ge-workout-row a.ge-workout-row__name.ge-done-title,
.ge-workout-row .ge-workout-row__name.ge-done-title {
        color: #94a3b8;
        text-decoration: line-through;
        text-decoration-color: rgba(52, 211, 153, 0.6);
}

@media (prefers-reduced-motion: reduce) {
        .ge-ring-ping,
        .ge-progress-done { animation: none; }
        .ge-workout__session-fill { transition: none; }
        .ge-workout-row__tick { transition: none; }
        .ge-workout-row__tick:active { transform: none; }
}