:root {
    --myst-radius-lg: 28px;
    --myst-duration: 0.3s;
    --myst-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --myst-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --myst-blur: 16px;
}

.rz-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

    .rz-row > .rz-col {
        display: flex;
        align-items: stretch;
    }

/* ===== پایه ===== */
.myst-card {
    /* همه رنگ‌ها فقط از توکن‌های تم Radzen ساخته می‌شوند */
    --myst-text: var(--rz-text-color);
    --myst-surface: var(--rz-card-background-color, var(--rz-base-background-color));
    --myst-line: color-mix(in srgb, var(--rz-text-color) 12%, transparent);
    --myst-card-hi: color-mix(in srgb, var(--rz-white) 20%, transparent);
    --myst-card-src: var(--rz-primary);
    --myst-ink-15: color-mix(in srgb, var(--rz-base-900) 15%, transparent);
    --myst-ink-30: color-mix(in srgb, var(--rz-base-900) 30%, transparent);
    --myst-ink-10: color-mix(in srgb, var(--rz-base-900) 10%, transparent);
    --myst-ink-08: color-mix(in srgb, var(--rz-base-900) 8%, transparent);
    --myst-shadow-1: 0 1px 3px 1px var(--myst-ink-15), 0 1px 2px var(--myst-ink-30);
    --myst-shadow-2: 0 4px 8px 3px var(--myst-ink-15), 0 1px 3px var(--myst-ink-30);
    --myst-glow-off: 0 0 0 transparent;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box !important;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 140px;
    padding: var(--myst-padding, 1.5rem);
    border-radius: var(--myst-radius, var(--myst-radius-lg));
    font-family: inherit;
    direction: rtl;
    text-align: center;
    contain: layout paint;
    /* overflow:hidden کارت را «قابل اسکرول» می‌کند؛ clip هرگز اسکرول نمی‌شود */
    overflow: hidden;
    overflow: clip;
    background-color: var(--myst-surface);
    border: 1px solid var(--myst-card-border-custom, var(--myst-line));
    color: var(--myst-text);
    transition: transform var(--myst-duration) var(--myst-ease-pop), box-shadow var(--myst-duration) var(--myst-ease), border-color var(--myst-duration) var(--myst-ease);
}

/* ===== پس‌زمینه‌ها ===== */
.myst-card--bg-glass,
.myst-card--bg-surface {
    background-color: color-mix(in srgb, var(--myst-surface) 85%, transparent);
    -webkit-backdrop-filter: blur(var(--myst-blur));
    backdrop-filter: blur(var(--myst-blur));
    box-shadow: var(--myst-shadow-1), var(--myst-glow-off), inset 0 1px 1px var(--myst-card-hi);
}

.myst-card--bg-primary {
    --myst-card-src: var(--rz-primary);
}

.myst-card--bg-secondary {
    --myst-card-src: var(--rz-secondary);
}

.myst-card--bg-tertiary {
    --myst-card-src: var(--rz-series-3);
}

.myst-card--bg-info {
    --myst-card-src: var(--rz-info);
}

.myst-card--bg-success {
    --myst-card-src: var(--rz-success);
}

.myst-card--bg-warning {
    --myst-card-src: var(--rz-warning);
}

.myst-card--bg-danger,
.myst-card--bg-error {
    --myst-card-src: var(--rz-danger);
}

.myst-card--bg-neutral {
    --myst-card-src: var(--rz-base-500);
}

.myst-card--bg-primary,
.myst-card--bg-secondary,
.myst-card--bg-tertiary,
.myst-card--bg-info,
.myst-card--bg-success,
.myst-card--bg-warning,
.myst-card--bg-danger,
.myst-card--bg-error,
.myst-card--bg-neutral {
    background-color: color-mix(in srgb, var(--myst-card-src) 14%, var(--myst-surface));
    border-color: var(--myst-card-border-custom, color-mix(in srgb, var(--myst-card-src), transparent 70%));
    box-shadow: 0 1px 2px var(--myst-ink-10), 0 3px 6px var(--myst-ink-08), var(--myst-glow-off), inset 0 1px 1px var(--myst-card-hi);
}

/* ===== گرادیان ===== */
.myst-card--grad-primary {
    --myst-grad-src: var(--rz-primary);
}

.myst-card--grad-secondary {
    --myst-grad-src: var(--rz-secondary);
}

.myst-card--grad-tertiary {
    --myst-grad-src: var(--rz-series-3);
}

.myst-card--grad-info {
    --myst-grad-src: var(--rz-info);
}

.myst-card--grad-success {
    --myst-grad-src: var(--rz-success);
}

.myst-card--grad-warning {
    --myst-grad-src: var(--rz-warning);
}

.myst-card--grad-danger,
.myst-card--grad-error {
    --myst-grad-src: var(--rz-danger);
}

.myst-card[class*="myst-card--grad-"] {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--myst-grad-src), transparent 82%) 0%, color-mix(in srgb, var(--myst-grad-src), transparent 96%) 55%, transparent 100%);
}

/* ===== حالات خاص ===== */
.myst-card--emphasize {
    border-color: var(--myst-card-border-custom, color-mix(in srgb, var(--myst-card-src), transparent 45%));
}

.myst-card--no-blur {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ===== تعاملات ===== */
.myst-card--clickable {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.myst-card--hover-fx {
    touch-action: manipulation;
}

.myst-card--clickable:focus {
    outline: none;
}

.myst-card--clickable:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 3px;
}

.myst-card--clickable:active {
    transform: translate3d(0, 0, 0) scale(0.97);
    transition-duration: 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .myst-card--hover-fx:hover {
        will-change: transform;
        transform: translate3d(0, -4px, 0);
        border-color: var(--myst-card-border-custom, color-mix(in srgb, var(--myst-card-src), transparent 60%));
        box-shadow: var(--myst-shadow-2), 0 0 28px color-mix(in srgb, var(--myst-card-src), transparent 82%), inset 0 1px 1px var(--myst-card-hi);
        z-index: 10;
    }

        .myst-card--hover-fx:hover .myst-spotlight,
        .myst-card--clickable:hover .myst-spotlight,
        .myst-card--hoverable:hover .myst-spotlight {
            opacity: 1;
        }
}

/* ===== Spotlight =====
   قبلاً: عنصر ۵۰۰×۵۰۰ که با transform جابه‌جا می‌شد و از کارت بیرون می‌زد.
   چون کارت overflow:hidden داشت، آن بخش بیرون‌زده «اسکرول‌پذیر» بود و با کلیک/فوکوس
   محتوا به بالا اسکرول می‌شد و پایین کارت خالی و بی‌انتها دیده می‌شد.
   حالا: عنصر دقیقاً هم‌اندازهٔ کارت است (inset:0) و فقط مرکز گرادیان با --sx/--sy حرکت می‌کند.
   JS فعلی بدون تغییر کار می‌کند. */
.myst-spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle 250px at calc(50% + var(--sx, 0px)) calc(50% + var(--sy, 0px)), color-mix(in srgb, var(--myst-card-src) 18%, transparent), transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ===== چیدمان داخلی ===== */
.myst-card__body {
    order: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    position: relative;
    z-index: 1;
    color: var(--myst-content-color, inherit);
    font-size: var(--myst-content-font-size, inherit);
}

.myst-card__header {
    order: 2;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: var(--myst-title-font-size, 1.1rem);
    color: var(--myst-title-color, inherit);
    line-height: 1.4;
    z-index: 1;
}

.myst-card__footer {
    order: 3;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: var(--myst-footer-font-size, 0.85rem);
    color: var(--myst-footer-color, var(--rz-text-secondary-color, color-mix(in srgb, currentColor 72%, transparent)));
    z-index: 1;
}

/* ===== نشانگرها ===== */
.myst-event-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-panel-background-color, var(--myst-surface));
}

.myst-spin-ring {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--myst-line);
    border-top-color: var(--rz-primary);
    animation: myst-spin 1s linear infinite;
}

@keyframes myst-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== موبایل / لمسی ===== */
@media (max-width: 768px) {
    .myst-card {
        --myst-blur: 8px;
        padding: 1rem;
        border-radius: 20px;
    }
}

@media (max-width: 768px), (hover: none) {
    .myst-spotlight {
        display: none;
    }
}

/* ===== ترجیحات کاربر ===== */
@media (prefers-reduced-transparency: reduce) {
    .myst-card--bg-glass,
    .myst-card--bg-surface {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--myst-surface);
    }
}

@media (prefers-reduced-motion: reduce) {
    .myst-card {
        transition: none !important;
    }

    .myst-card--hover-fx:hover,
    .myst-card--clickable:active {
        transform: none;
    }

    .myst-spotlight {
        transition: none;
    }

    .myst-spin-ring {
        animation-duration: 2.5s;
    }
}