/* ============================================================
   متغیرهای مشترک
   ============================================================ */
.myst-btn.rz-button,
.myst-icon-wrapper,
.myst-ic {
    --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-btn.rz-button {
    --c: var(--rz-primary);
    --c-hi: var(--rz-primary-light, var(--rz-primary));
    --c-lo: var(--rz-primary-dark, var(--rz-primary));
    --c-on: var(--rz-on-primary, #fff);
    --c-fg: var(--rz-primary-dark, var(--rz-primary));
    --myst-surface: var(--rz-base-background-color, #fff);
    --myst-hi: color-mix(in srgb, var(--myst-surface) 55%, white 45%);
    --myst-lo: color-mix(in srgb, var(--myst-surface) 55%, black 45%);
    --myst-neu-bg: color-mix(in srgb, var(--myst-surface) 94%, var(--c) 6%);
    --m3-ease: cubic-bezier(0.2, 0, 0, 1);
    --m3-dur: 0.32s;
    --m3-perspective: 700px;
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 44px;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-family: inherit;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    color: var(--c-fg) !important;
    transform: none;
    contain: layout style;
    transition: transform var(--m3-dur) var(--myst-ease-pop), color 0.2s ease, box-shadow var(--m3-dur) var(--m3-ease);
}

    .myst-btn.rz-button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.2s var(--m3-ease);
    }

    .myst-btn.rz-button::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        box-shadow: 0 18px 32px -10px color-mix(in srgb, var(--c) 55%, transparent), 0 8px 12px -4px color-mix(in srgb, var(--c-lo) 30%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--m3-dur) var(--m3-ease);
    }

    .myst-btn.rz-button:hover:not(.rz-state-disabled) {
        transform: perspective(var(--m3-perspective)) translate3d(0, -3px, 0) rotateX(7deg);
    }

        .myst-btn.rz-button:hover:not(.rz-state-disabled)::before {
            opacity: 0.08;
        }

        .myst-btn.rz-button:hover:not(.rz-state-disabled)::after {
            opacity: 1;
        }

    .myst-btn.rz-button:focus-visible:not(.rz-state-disabled)::before {
        opacity: 0.12;
    }

    .myst-btn.rz-button:active:not(.rz-state-disabled) {
        transform: perspective(var(--m3-perspective)) translate3d(0, 1px, 0) scale(0.965);
        transition-duration: 0.1s;
    }

        .myst-btn.rz-button:active:not(.rz-state-disabled)::before {
            opacity: 0.14;
        }

        .myst-btn.rz-button:active:not(.rz-state-disabled)::after {
            opacity: 0.35;
        }

    .myst-btn.rz-button:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent) !important;
        outline-offset: 3px;
    }

.myst-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

    .myst-sheen::before {
        content: "";
        position: absolute;
        top: -20%;
        bottom: -20%;
        left: 0;
        width: 45%;
        background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / 0.4) 50%, transparent 100%);
        transform: translate(-180%, 0) skewX(-20deg);
        transition: transform 0.65s var(--m3-ease);
    }

.myst-btn.rz-button:hover:not(.rz-state-disabled) .myst-sheen::before {
    transform: translate(320%, 0) skewX(-20deg);
}

.myst-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.55) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.myst-btn.rz-button:active:not(.rz-state-disabled) .myst-ripple {
    animation: myst-ripple 0.55s var(--m3-ease) forwards;
}

@keyframes myst-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(4.5);
        opacity: 0;
    }
}

.myst-spinner {
    width: 1.1em;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: myst-spin 0.7s linear infinite;
}

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

.myst-btn.is-busy {
    cursor: progress !important;
}

.myst-btn .myst-icon {
    font-size: 1.25em !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: inherit !important;
}

.myst-btn .myst-label {
    pointer-events: none;
}

.myst-btn.tone-secondary {
    --c: var(--rz-secondary);
    --c-hi: var(--rz-secondary-light, var(--rz-secondary));
    --c-lo: var(--rz-secondary-dark, var(--rz-secondary));
    --c-on: var(--rz-on-secondary, #fff);
    --c-fg: var(--rz-secondary-dark, var(--rz-secondary));
}

.myst-btn.tone-success {
    --c: var(--rz-success);
    --c-hi: var(--rz-success-light, var(--rz-success));
    --c-lo: var(--rz-success-dark, var(--rz-success));
    --c-on: var(--rz-on-success, #fff);
    --c-fg: var(--rz-success-dark, var(--rz-success));
}

.myst-btn.tone-info {
    --c: var(--rz-info);
    --c-hi: var(--rz-info-light, var(--rz-info));
    --c-lo: var(--rz-info-dark, var(--rz-info));
    --c-on: var(--rz-on-info, #fff);
    --c-fg: var(--rz-info-dark, var(--rz-info));
}

.myst-btn.tone-warning {
    --c: var(--rz-warning);
    --c-hi: var(--rz-warning-light, var(--rz-warning));
    --c-lo: var(--rz-warning-dark, var(--rz-warning));
    --c-on: var(--rz-on-warning, #1f1f1f);
    --c-fg: var(--rz-warning-dark, var(--rz-warning));
}

.myst-btn.tone-danger {
    --c: var(--rz-danger);
    --c-hi: var(--rz-danger-light, var(--rz-danger));
    --c-lo: var(--rz-danger-dark, var(--rz-danger));
    --c-on: var(--rz-on-danger, #fff);
    --c-fg: var(--rz-danger-dark, var(--rz-danger));
}

.myst-btn.tone-light {
    --c: var(--rz-light, var(--rz-base-200));
    --c-hi: var(--rz-base-100, var(--rz-light));
    --c-lo: var(--rz-base-300, var(--rz-light));
    --c-on: var(--rz-on-light, var(--rz-text-color));
    --c-fg: var(--rz-text-color);
}

.myst-btn.tone-base {
    --c: var(--rz-base, var(--rz-base-300));
    --c-hi: var(--rz-base-light, var(--rz-base-200));
    --c-lo: var(--rz-base-dark, var(--rz-base-400));
    --c-on: var(--rz-on-base, var(--rz-text-color));
    --c-fg: var(--rz-text-color);
}

.myst-btn.tone-dark {
    --c: var(--rz-dark, var(--rz-base-800));
    --c-hi: var(--rz-base-700, var(--rz-dark));
    --c-lo: var(--rz-base-900, var(--rz-dark));
    --c-on: var(--rz-on-dark, #fff);
    --c-fg: var(--rz-text-color);
}

.myst-btn.v-filled.rz-button {
    color: var(--c-on) !important;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 52%), linear-gradient(145deg, var(--c-hi) 0%, var(--c) 52%, var(--c-lo) 100%) !important;
    background-color: var(--c) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 4px rgb(0 0 0 / 0.18), 0 2px 4px color-mix(in srgb, var(--c-lo) 35%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--c) 50%, transparent) !important;
}

.myst-btn.v-flat.rz-button {
    color: var(--c-fg) !important;
    background-color: var(--myst-neu-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: -5px -5px 12px var(--myst-hi), 5px 5px 12px var(--myst-lo) !important;
}

    .myst-btn.v-flat.rz-button:hover:not(.rz-state-disabled) {
        box-shadow: -7px -7px 16px var(--myst-hi), 7px 7px 16px var(--myst-lo) !important;
    }

    .myst-btn.v-flat.rz-button:active:not(.rz-state-disabled) {
        box-shadow: inset -4px -4px 8px var(--myst-hi), inset 4px 4px 8px var(--myst-lo) !important;
    }

.myst-btn.v-outlined.rz-button {
    background-image: none !important;
    background-color: color-mix(in srgb, var(--c) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--c) 50%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--myst-hi) 70%, transparent), 0 2px 8px rgb(0 0 0 / 0.08) !important;
}

@media (hover: hover) and (pointer: fine) {
    .myst-btn.v-outlined.rz-button:hover:not(.rz-state-disabled) {
        backdrop-filter: blur(14px) saturate(170%);
        -webkit-backdrop-filter: blur(14px) saturate(170%);
    }
}

.myst-btn.v-text.rz-button {
    background: transparent !important;
    box-shadow: none !important;
}

    .myst-btn.v-text.rz-button::after,
    .myst-btn.v-outlined.rz-button::after,
    .myst-btn.v-flat.rz-button::after {
        display: none;
    }

.myst-btn.rz-button.rz-state-disabled {
    cursor: not-allowed !important;
    transform: none !important;
    color: color-mix(in srgb, var(--rz-text-color, #000) 38%, transparent) !important;
    background-image: none !important;
    background-color: color-mix(in srgb, var(--rz-text-color, #000) 12%, transparent) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    backdrop-filter: none;
}

.myst-btn.rz-state-disabled::before,
.myst-btn.rz-state-disabled::after,
.myst-btn.rz-state-disabled .myst-sheen,
.myst-btn.rz-state-disabled .myst-ripple {
    display: none;
}

.myst-btn.size-extrasmall {
    padding: 0.2rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-height: 28px;
}

.myst-btn.size-small {
    padding: 0.4rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 36px;
}

.myst-btn.size-medium {
    padding: 0.6rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 44px;
}

.myst-btn.size-large {
    padding: 0.8rem 2rem !important;
    font-size: 1.125rem !important;
    min-height: 52px;
}

.myst-btn.icon-only.rz-button {
    padding: 0 !important;
    aspect-ratio: 1 / 1;
}

.myst-btn.icon-only.size-extrasmall {
    width: 28px;
}

.myst-btn.icon-only.size-small {
    width: 36px;
}

.myst-btn.icon-only.size-medium {
    width: 44px;
}

.myst-btn.icon-only.size-large {
    width: 52px;
}

@media (max-width: 768px) {
    .myst-btn.size-medium {
        padding: 0.5rem 1.25rem !important;
        font-size: 0.9rem !important;
        min-height: 40px;
    }

    .myst-btn.rz-button:hover:not(.rz-state-disabled) {
        transform: perspective(var(--m3-perspective)) translate3d(0, -1px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .myst-btn.rz-button,
    .myst-btn.rz-button::before,
    .myst-btn.rz-button::after,
    .myst-sheen::before,
    .myst-spinner {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   MystIcon — نسخه جدید تک‌المنتی (۱ تگ <i> به‌جای ۴ تگ)
   box/glow/shine با ::before و ::after؛ hover فقط transform/opacity/background-position
   ============================================================ */
i.myst-ic {
    --myst-icon-src: var(--myst-auto, var(--rz-primary));
    --myst-hl: 38%;
    --myst-hi: rgb(255 255 255 / 0.35);
    --myst-ao: rgb(0 0 0 / 0.45);
    --myst-light-x: 30%;
    --myst-light-y: 22%;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: visible;
    line-height: 1;
    contain: layout style;
    color: color-mix(in srgb, var(--myst-icon-src) 85%, var(--rz-text-color));
    font-variation-settings: 'FILL' var(--myst-fill, 1);
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.10), 0 3px 6px rgb(0 0 0 / 0.08);
    transform: none;
    transition: transform var(--myst-duration) var(--myst-ease-pop);
}

    /* جعبه: پس‌زمینه + هایلایت + بوردر + شاین */
    i.myst-ic::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        box-sizing: border-box;
        border-radius: inherit;
        pointer-events: none;
        border: 1px solid color-mix(in srgb, var(--myst-icon-src) 30%, transparent);
        background: linear-gradient(75deg, transparent 38%, color-mix(in srgb, var(--myst-icon-src) 20%, white) 50%, transparent 62%) 0% 0% / 300% 100% no-repeat, radial-gradient(120% 120% at var(--myst-light-x) var(--myst-light-y), color-mix(in srgb, color-mix(in srgb, var(--myst-icon-src) 15%, white) var(--myst-hl), transparent) 0%, color-mix(in srgb, var(--myst-icon-src) calc(var(--myst-hl) * 0.36), transparent) 28%, transparent 55%), color-mix(in srgb, var(--myst-icon-src) 14%, transparent);
        box-shadow: inset 0 1px 1px var(--myst-hi), inset 0 -2px 3px var(--myst-ao);
        transition: background-position 0.6s var(--myst-ease);
    }

    /* درخشش بیرونی — فقط opacity انیمیت می‌شود */
    i.myst-ic::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: 0 10px 18px rgb(0 0 0 / 0.16), 0 0 20px color-mix(in srgb, var(--myst-icon-src) 38%, transparent);
        opacity: 0;
        transition: opacity var(--myst-duration) var(--myst-ease);
    }

/* تم تیره */
.rz-dark i.myst-ic,
[data-theme="dark"] i.myst-ic {
    --myst-hl: 24%;
    --myst-hi: rgb(255 255 255 / 0.14);
    --myst-ao: rgb(0 0 0 / 0.60);
}

/* hover فقط روی دستگاه‌های دارای hover */
@media (hover: hover) {
    .myst-card--clickable:hover i.myst-ic,
    i.myst-ic:hover {
        transform: perspective(600px) translate3d(0, -3px, 14px) rotateX(8deg) rotateY(-10deg) scale(1.08);
    }

        .myst-card--clickable:hover i.myst-ic::after,
        i.myst-ic:hover::after {
            opacity: 1;
        }

        .myst-card--clickable:hover i.myst-ic::before,
        i.myst-ic:hover::before {
            background-position: 100% 0, 0 0, 0 0;
        }
}

@media (max-width: 768px) {
    i.myst-ic {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}

/* دستگاه‌های لمسی: بدون لایه شاین */
@media (hover: none) {
    i.myst-ic::before {
        background-image: radial-gradient(120% 120% at var(--myst-light-x) var(--myst-light-y), color-mix(in srgb, color-mix(in srgb, var(--myst-icon-src) 15%, white) var(--myst-hl), transparent) 0%, color-mix(in srgb, var(--myst-icon-src) calc(var(--myst-hl) * 0.36), transparent) 28%, transparent 55%);
        background-size: auto;
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    i.myst-ic,
    i.myst-ic::before,
    i.myst-ic::after {
        transition: none !important;
        animation: none !important;
    }

        i.myst-ic:hover {
            transform: scale(1.04);
        }
}

/* ============================================================
   رنگ‌های Variant (مشترک بین ساختار جدید و قدیمی)
   ============================================================ */
.myst-icon--primary {
    --myst-icon-src: var(--rz-primary);
}

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

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

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

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

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

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

.myst-icon--base {
    --myst-icon-src: var(--rz-base-400);
}

/* ============================================================
   رنگ خودکار گروهی (مشترک بین ساختار جدید و قدیمی)
   ============================================================ */
:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+1) {
    --myst-auto: var(--rz-primary);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+2) {
    --myst-auto: var(--rz-warning);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+3) {
    --myst-auto: var(--rz-success);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+4) {
    --myst-auto: var(--rz-danger);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+5) {
    --myst-auto: var(--rz-secondary);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+6) {
    --myst-auto: var(--rz-info);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+7) {
    --myst-auto: var(--rz-base-600);
}

:where(.myst-icon-group:not(.single-color) > .myst-icon-wrapper, .myst-icon-group:not(.single-color) > .myst-ic, .shortcut-tile:not(.single-color)):nth-child(8n+8) {
    --myst-auto: var(--rz-base-400);
}

/* ============================================================
   سازگاری با ساختار قدیمی (div.myst-icon-wrapper + span.myst-icon-glow +
   span.myst-icon-box + i.myst-icon-element) در صفحاتی که دستی نوشته‌اند.
   اگر هیچ صفحه‌ای از این ساختار استفاده نمی‌کند، کل این بخش را حذف کنید.
   ============================================================ */
.myst-icon-wrapper,
.rz-stack.myst-icon-wrapper {
    --myst-icon-src: var(--myst-auto, var(--rz-primary));
    --myst-icon-color: color-mix(in srgb, var(--myst-icon-src) 85%, var(--rz-text-color));
    --myst-icon-bg: color-mix(in srgb, var(--myst-icon-src) 14%, transparent);
    --myst-icon-border: color-mix(in srgb, var(--myst-icon-src) 30%, transparent);
    --myst-icon-glow: color-mix(in srgb, var(--myst-icon-src) 38%, transparent);
    --myst-icon-highlight: color-mix(in srgb, var(--myst-icon-src) 15%, white);
    --myst-icon-shine: color-mix(in srgb, var(--myst-icon-src) 20%, white);
    --myst-icon-hi: rgb(255 255 255 / 0.35);
    --myst-icon-ao: rgb(0 0 0 / 0.45);
    --myst-icon-radius: 12px;
    --myst-light-x: 30%;
    --myst-light-y: 22%;
    --myst-highlight-strength: 0.55;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--myst-icon-radius);
    color: var(--myst-icon-color);
    isolation: isolate;
    contain: layout style;
    overflow: visible;
    transform: none;
    transition: transform var(--myst-duration) var(--myst-ease-pop);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.10), 0 3px 6px rgb(0 0 0 / 0.08);
}

.myst-icon-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 10px 18px rgb(0 0 0 / 0.16), 0 0 20px var(--myst-icon-glow);
    opacity: 0;
    transition: opacity var(--myst-duration) var(--myst-ease);
}

.myst-icon-box {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: var(--myst-icon-bg);
    border: 1px solid var(--myst-icon-border);
    box-shadow: inset 0 1px 1px var(--myst-icon-hi), inset 0 -2px 3px var(--myst-icon-ao);
    pointer-events: none;
}

    .myst-icon-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(120% 120% at var(--myst-light-x) var(--myst-light-y), color-mix(in srgb, var(--myst-icon-highlight) 70%, transparent) 0%, color-mix(in srgb, var(--myst-icon-src) 25%, transparent) 28%, transparent 55%);
        opacity: var(--myst-highlight-strength);
        transition: opacity var(--myst-duration) var(--myst-ease);
    }

    .myst-icon-box::after {
        content: "";
        position: absolute;
        inset: -1px;
        background: linear-gradient(75deg, transparent 0%, var(--myst-icon-shine) 45%, transparent 60%);
        opacity: 0;
        transform: rotate(20deg) translate(-140%, 0);
        transition: opacity var(--myst-duration) var(--myst-ease), transform 0.6s var(--myst-ease);
    }

.myst-icon-element {
    position: relative;
    z-index: 1;
    color: inherit;
    font-size: inherit;
    font-variation-settings: 'FILL' var(--myst-fill, 1);
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
    transition: transform var(--myst-duration) var(--myst-ease-pop);
}

.rz-dark .myst-icon-wrapper,
[data-theme="dark"] .myst-icon-wrapper {
    --myst-icon-hi: rgb(255 255 255 / 0.14);
    --myst-icon-ao: rgb(0 0 0 / 0.60);
    --myst-highlight-strength: 0.35;
}

@media (hover: hover) {
    .myst-card--clickable:hover .myst-icon-wrapper,
    .myst-icon-wrapper:hover {
        transform-style: preserve-3d;
        transform: perspective(600px) translate3d(0, -3px, 14px) rotateX(8deg) rotateY(-10deg) scale(1.08);
    }

        .myst-card--clickable:hover .myst-icon-glow,
        .myst-icon-wrapper:hover .myst-icon-glow {
            opacity: 1;
        }

        .myst-card--clickable:hover .myst-icon-box::before,
        .myst-icon-wrapper:hover .myst-icon-box::before {
            opacity: calc(var(--myst-highlight-strength) + 0.35);
        }

        .myst-card--clickable:hover .myst-icon-box::after,
        .myst-icon-wrapper:hover .myst-icon-box::after {
            opacity: 1;
            transform: rotate(20deg) translate(140%, 0);
        }

        .myst-card--clickable:hover .myst-icon-element,
        .myst-icon-wrapper:hover .myst-icon-element {
            transform: translate3d(0, -1px, 4px) scale(1.12);
        }
}

@media (max-width: 768px) {
    .myst-icon-wrapper,
    .rz-stack.myst-icon-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}

@media (hover: none) {
    .myst-icon-box::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .myst-icon-wrapper,
    .myst-icon-element,
    .myst-icon-box::before,
    .myst-icon-box::after,
    .myst-icon-glow {
        transition: none !important;
        animation: none !important;
    }

        .myst-icon-wrapper:hover {
            transform: scale(1.04);
        }
}

/* ============================================================
   shortcut-tile (بدون تغییر)
   ============================================================ */
.shortcut-tile:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.shortcut-tile:hover,
.shortcut-tile:active {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.shortcut-tile:focus-visible {
    outline: 2px solid var(--rz-primary) !important;
    outline-offset: 3px !important;
    border-radius: 12px;
}