/**
 * استایل ویجت‌های زنده بازار — فاز ۶ (بند ۲۱ سند معماری).
 *
 * پشتوانه مستقل از تم (الگوی rsd-news-tools.css): هر مصرف توکن به‌صورت
 * var(--rsd-X, fallback) نوشته شده — با تم فعال، توکن تم (و دارک‌مودش)
 * برنده می‌شود؛ بدون تم، مقادیر پیوست B سند معماری.
 *
 * دامنه: تیکر (انیمیشن مارکی) · فلش قیمت · «بازار در یک نگاه» ·
 * پرتحرک‌ها · صفحه /markets/ (کارت کلیدی/تب/جستجو/جدول) · مودال نمودار.
 */

/* ── تیکر: حرکت پیوسته با توقف روی هاور (پورت ticker.tsx) ── */
@keyframes rsd-marquee {
        from {
                transform: translateX(0);
        }
        to {
                transform: translateX(-50%);
        }
}
.rsd-ticker-track {
        display: flex;
        width: max-content;
        direction: ltr;
        animation: rsd-marquee 55s linear infinite;
        will-change: transform;
}
.rsd-ticker-track:hover {
        animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
        .rsd-ticker-track {
                animation: none;
        }
        .flash-up,
        .flash-down {
                animation: none;
        }
}

/* ── فلش لحظه‌ای تغییر قیمت (پورت globals.css) ── */
@keyframes flash-up {
        0% {
                background-color: rgb(5 150 105 / 0.18);
        }
        100% {
                background-color: transparent;
        }
}
@keyframes flash-down {
        0% {
                background-color: rgb(220 38 38 / 0.18);
        }
        100% {
                background-color: transparent;
        }
}
.flash-up {
        animation: flash-up 0.9s ease-out;
}
.flash-down {
        animation: flash-down 0.9s ease-out;
}

/* ── قرص تغییر (fallback مستقل — هم‌ارز .rsd-pill تم) ── */
.rsd-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 700;
        direction: ltr;
        unicode-bidi: embed;
}
.rsd-pill-up {
        background: var(--rsd-up-soft, #ecfdf5);
        color: var(--rsd-up, #047857);
}
.rsd-pill-down {
        background: var(--rsd-down-soft, #fef2f2);
        color: var(--rsd-down, #b91c1c);
}
.rsd-up {
        color: var(--rsd-up, #047857);
}
.rsd-down {
        color: var(--rsd-down, #b91c1c);
}

/* ── اسکلتون ── */
@keyframes rsd-shimmer {
        0% {
                opacity: 0.45;
        }
        50% {
                opacity: 0.85;
        }
        100% {
                opacity: 0.45;
        }
}
.rsd-skeleton {
        border-radius: 10px;
        background: var(--rsd-muted-bg, #f3f2ee);
        animation: rsd-shimmer 1.6s ease-in-out infinite;
}
.rsd-hero-skel {
        height: 7rem;
        border-radius: var(--rsd-radius-xl, 16px);
}
.rsd-row-skel {
        height: 2.75rem;
}

/* ── «بازار در یک نگاه» (fallback اگر تم نبود) ── */
.rsd-quote-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.625rem 0.5rem;
        border-radius: var(--rsd-radius-md, 10px);
        text-decoration: none;
        text-align: start;
        transition: background 0.15s;
}
.rsd-quote-row:hover {
        background: var(--rsd-muted-bg, #f3f2ee);
}
.rsd-quote-name {
        display: flex;
        flex-direction: column;
        min-width: 0;
}
.rsd-quote-name b {
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
.rsd-quote-name small {
        font-size: 11px;
        font-weight: 600;
        color: var(--rsd-muted-fg, #6e6a5e);
}
.rsd-quote-side {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
}
.rs-num, .rsd-num {
        font-variant-numeric: tabular-nums;
}
html.dark .rsd-quote-name b {
        color: #f2efe8;
}

/* ── پرتحرک‌ترین‌ها ── */
.rsd-mover-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        text-decoration: none;
        text-align: start;
        transition: background 0.15s;
        border-bottom: 1px solid var(--rsd-border, #e8e5dd);
}
.rsd-mover-row:last-child {
        border-bottom: 0;
}
.rsd-mover-row:hover {
        background: var(--rsd-muted-bg, #f3f2ee);
}
.rsd-mover-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
}
.rsd-mover-side {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex-shrink: 0;
        font-size: 12px;
}
html.dark .rsd-mover-name {
        color: #f2efe8;
}

/* ── یادداشت به‌روزرسانی ── */
.rsd-market-note {
        font-size: 11px;
        line-height: 1.5rem;
}
.rsd-note-status {
        font-weight: 700;
}
.rsd-note-live {
        color: var(--rsd-up, #047857);
}
.rsd-note-delayed {
        color: var(--rsd-brand-600, #9a7225);
}
.rsd-note-stale {
        color: var(--rsd-down, #b91c1c);
}

/* ══════════ صفحه /markets/ ══════════ */
.rs-markets-wrap, .rsd-markets-wrap {
        max-width: 80rem;
        margin-inline: auto;
        padding-inline: 1rem;
}
.rsd-spark-host {
        display: inline-flex;
        align-items: center;
}
.rsd-markets-wrap {
        padding-block: 1.5rem 2.5rem;
}
@media (min-width: 640px) {
        .rsd-markets-wrap {
                padding-block: 2rem 3rem;
        }
}
.rsd-markets-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
}
.rsd-kicker {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 11px;
        font-weight: 600;
        color: var(--rsd-brand-600, #9a7225);
        margin-bottom: 0.25rem;
}
.rsd-kicker-bar {
        display: inline-block;
        width: 0.25rem;
        height: 0.875rem;
        border-radius: 9999px;
        background: var(--rsd-brand-600, #9a7225);
}
html.dark .rsd-kicker {
        color: var(--rsd-brand-300, #dfc57e);
}
html.dark .rsd-kicker-bar {
        background: var(--rsd-brand-300, #dfc57e);
}
.rsd-markets-title {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin: 0;
        color: var(--rsd-fg, #101828);
}
@media (min-width: 640px) {
        .rsd-markets-title {
                font-size: 1.875rem;
        }
}
html.dark .rsd-markets-title {
        color: #f2efe8;
}
.rsd-markets-badges {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}
.rsd-conn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-muted-bg, #f3f2ee);
        font-size: 11px;
        font-weight: 700;
        color: var(--rsd-muted-fg, #6e6a5e);
}
.rsd-conn-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: #d97706;
        flex-shrink: 0;
}
.rsd-conn-ok {
        background: var(--rsd-up-soft, #ecfdf5);
        color: var(--rsd-up, #047857);
}
.rsd-conn-ok .rsd-conn-dot {
        background: var(--rsd-up, #047857);
}
.rsd-source {
        display: none;
        padding: 0.25rem 0.625rem;
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-muted-bg, #f3f2ee);
        font-size: 11px;
        font-weight: 700;
        color: var(--rsd-muted-fg, #6e6a5e);
}
.rsd-source[data-rsd-hydrated] {
        display: inline-block;
}

/* کارت‌های کلیدی (۴) — پورت HeroStat */
.rsd-market-heroes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
        .rsd-market-heroes {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }
}
.rsd-hero-stat {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-xl, 16px);
        background: var(--rsd-card, #ffffff);
        box-shadow: var(--rsd-shadow-card, 0 1px 3px rgb(16 24 40 / 0.04));
        text-decoration: none;
        transition: border-color 0.15s, box-shadow 0.15s;
}
.rsd-hero-stat:hover {
        border-color: var(--rsd-brand-200, #ebdcaa);
        box-shadow: 0 4px 6px -1px rgb(16 24 40 / 0.08);
}
.rsd-hero-stat:focus-visible {
        outline: 2px solid var(--rsd-ring, #cfa954);
        outline-offset: 2px;
}
.rsd-hero-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
}
.rsd-hero-name {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 12px;
        font-weight: 700;
        color: var(--rsd-muted-fg, #6e6a5e);
        min-width: 0;
}
.rsd-hero-name > span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
.rsd-hero-foot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.5rem;
}
.rsd-hero-price {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--rsd-fg, #101828);
        border-radius: var(--rsd-radius-md, 10px);
        padding-inline: 0.25rem;
}
html.dark .rsd-hero-price {
        color: #f2efe8;
}

/* تب‌های گروه */
.rsd-market-tabs {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        margin-bottom: 1rem;
        scrollbar-width: none;
}
.rsd-market-tabs::-webkit-scrollbar {
        display: none;
}
.rsd-market-tabs a {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-card, #ffffff);
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-muted-fg, #6e6a5e);
        text-decoration: none;
        transition: all 0.15s;
}
.rsd-market-tabs a:hover {
        border-color: var(--rsd-brand-200, #ebdcaa);
        color: var(--rsd-fg, #101828);
}
.rsd-market-tabs a.active {
        border-color: var(--rsd-brand-300, #dfc57e);
        background: var(--rsd-brand-50, #fbf8ef);
        color: var(--rsd-brand-700, #7c5b1d);
}
html.dark .rsd-market-tabs a.active {
        border-color: rgb(185 140 51 / 0.4);
        background: rgb(185 140 51 / 0.15);
        color: var(--rsd-brand-300, #dfc57e);
}
.rsd-tab-count {
        padding: 0 0.25rem;
        border-radius: 0.25rem;
        background: var(--rsd-muted-bg, #f3f2ee);
        font-size: 10px;
}
.rsd-market-tabs a.active .rsd-tab-count {
        background: rgb(235 220 170 / 0.7);
}
.rsd-tab-count:empty {
        display: none;
}

/* جستجو */
.rsd-market-search {
        position: relative;
        max-width: 24rem;
        margin-bottom: 1rem;
}
.rsd-market-search svg {
        position: absolute;
        inset-inline-end: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--rsd-muted-fg, #6e6a5e);
        pointer-events: none;
}
.rsd-market-search input {
        width: 100%;
        padding: 0.5rem 0.75rem;
        padding-inline-end: 2.25rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-card, #ffffff);
        color: var(--rsd-fg, #101828);
        font: inherit;
        font-size: 14px;
}
.rsd-market-search input:focus {
        outline: 2px solid var(--rsd-ring, #cfa954);
        outline-offset: 1px;
}

/* جدول بازار — پورت جدول MarketsView */
.rsd-market-table {
        overflow: hidden;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-2xl, 20px);
        background: var(--rsd-card, #ffffff);
        box-shadow: var(--rsd-shadow-card, 0 1px 3px rgb(16 24 40 / 0.04));
}
.rsd-market-table-scroll {
        overflow-x: auto;
}
.rsd-market-table-el {
        width: 100%;
        min-width: 560px;
        border-collapse: collapse;
        font-size: 14px;
}
.rsd-market-table-el thead tr {
        border-bottom: 1px solid var(--rsd-border, #e8e5dd);
        background: rgb(243 242 238 / 0.5);
        color: var(--rsd-muted-fg, #6e6a5e);
        font-size: 11px;
}
html.dark .rsd-market-table-el thead tr {
        background: rgb(255 255 255 / 0.04);
}
.rsd-market-table-el th {
        padding: 0.75rem 1rem;
        text-align: start;
        font-weight: 700;
}
.rsd-market-table-el tbody tr {
        border-bottom: 1px solid rgb(232 229 221 / 0.7);
        cursor: pointer;
        transition: background 0.15s;
}
html.dark .rsd-market-table-el tbody tr {
        border-bottom-color: rgb(255 255 255 / 0.07);
}
.rsd-market-table-el tbody tr:last-child {
        border-bottom: 0;
}
.rsd-market-table-el tbody tr:hover {
        background: rgb(243 242 238 / 0.5);
}
html.dark .rsd-market-table-el tbody tr:hover {
        background: rgb(255 255 255 / 0.04);
}
.rsd-market-table-el td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
}
.rsd-market-row:focus-visible {
        outline: 2px solid var(--rsd-ring, #cfa954);
        outline-offset: -2px;
}
.rsd-sym {
        display: flex;
        align-items: center;
        gap: 0.625rem;
}
.rsd-sym-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-brand-50, #fbf8ef);
        color: var(--rsd-brand-600, #9a7225);
}
html.dark .rsd-sym-icon {
        background: rgb(185 140 51 / 0.15);
        color: var(--rsd-brand-300, #dfc57e);
}
.rsd-sym-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
}
.rsd-sym-text b {
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-sym-text b {
        color: #f2efe8;
}
.rsd-sym-text small {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        color: var(--rsd-muted-fg, #6e6a5e);
        text-align: start;
}
.rsd-change {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
}
.rsd-change-abs {
        font-size: 11px;
        font-weight: 600;
}
@media (max-width: 639px) {
        .rsd-change-abs {
                display: none;
        }
}
.rs-num-muted, .rsd-num-muted {
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        color: var(--rsd-muted-fg, #6e6a5e);
}
@media (max-width: 767px) {
        .rsd-col-md {
                display: none;
        }
}
@media (max-width: 1023px) {
        .rsd-col-lg {
                display: none;
        }
}
.rsd-col-star {
        text-align: center;
        width: 3.5rem;
}
.rsd-star {
        display: inline-flex;
        padding: 0.375rem;
        border-radius: var(--rsd-radius-md, 10px);
        color: rgb(16 24 40 / 0.35);
        transition: color 0.15s;
}
.rsd-star:hover {
        color: var(--rsd-brand-600, #9a7225);
}
html.dark .rsd-star {
        color: rgb(242 239 232 / 0.4);
}
.rsd-empty-row td {
        padding: 3rem 1rem;
        text-align: center;
        color: var(--rsd-muted-fg, #6e6a5e);
}

/* یادداشت + پانوشت صفحه بازار */
.rsd-market-footnote {
        margin-top: 1rem;
        text-align: center;
        font-size: 11px;
        line-height: 1.5rem;
        color: var(--rsd-muted-fg, #6e6a5e);
}

/* جایگاه مهمان دیده‌بان */
.rsd-watchlist-guest {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 4rem 1.5rem;
        border: 1px dashed var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-2xl, 20px);
        background: rgb(243 242 238 / 0.4);
        text-align: center;
        color: rgb(16 24 40 / 0.4);
}
.rsd-watchlist-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
        margin: 0;
}
html.dark .rsd-watchlist-title {
        color: #f2efe8;
}
.rsd-watchlist-text {
        max-width: 24rem;
        font-size: 12px;
        line-height: 1.5rem;
        color: var(--rsd-muted-fg, #6e6a5e);
        margin: 0;
}
.rsd-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1rem;
        border-radius: var(--rsd-radius-md, 10px);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid transparent;
}
.rsd-btn-solid {
        background: var(--rsd-brand-600, #9a7225);
        color: #fff;
}
.rsd-btn-solid:hover {
        background: var(--rsd-brand-700, #7c5b1d);
}

/* ══════════ مودال نمودار ══════════ */
.rsd-modal-open {
        overflow: hidden;
}
.rsd-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgb(16 24 40 / 0.55);
        backdrop-filter: blur(2px);
}
.rsd-modal {
        width: 100%;
        max-width: 42rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        background: var(--rsd-card, #ffffff);
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-2xl, 20px);
        padding: 1.25rem;
        box-shadow: 0 20px 40px -12px rgb(16 24 40 / 0.25);
}
html.dark .rsd-modal {
        background: #17150f;
        border-color: rgb(255 255 255 / 0.08);
}
.rsd-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
}
.rsd-modal-title {
        font-size: 1.125rem;
        font-weight: 800;
        margin: 0;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-modal-title {
        color: #f2efe8;
}
.rsd-modal-close {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-muted-bg, #f3f2ee);
        color: var(--rsd-muted-fg, #6e6a5e);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
}
.rsd-modal-close:hover {
        background: var(--rsd-brand-100, #f5edd5);
        color: var(--rsd-brand-800, #5f4616);
}
.rsd-modal-price {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
}
.rsd-modal-price .rsd-num {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-modal-price .rsd-num {
        color: #f2efe8;
}
.rsd-modal-chart {
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-xl, 16px);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        color: var(--rsd-muted-fg, #6e6a5e);
        min-height: 16rem;
        display: flex;
        align-items: center;
        justify-content: center;
}
html.dark .rsd-modal-chart {
        border-color: rgb(255 255 255 / 0.08);
}
.rsd-big-chart {
        width: 100%;
        height: auto;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-big-chart {
        color: #f2efe8;
}
.rsd-modal-loading {
        font-size: 13px;
}
.rsd-modal-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
        .rsd-modal-stats {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }
}
.rsd-stat-cell {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem;
        border-radius: var(--rsd-radius-md, 10px);
        background: rgb(243 242 238 / 0.6);
}
html.dark .rsd-stat-cell {
        background: rgb(255 255 255 / 0.05);
}
.rsd-stat-label {
        font-size: 10px;
        color: var(--rsd-muted-fg, #6e6a5e);
}
.rsd-stat-value {
        font-size: 13px;
        font-weight: 700;
}
.rsd-stat-symbol {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-stat-symbol {
        color: #f2efe8;
}
.rsd-modal-note {
        margin: 0;
        padding: 0.75rem;
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-brand-50, #fbf8ef);
        color: var(--rsd-brand-800, #5f4616);
        font-size: 11px;
        line-height: 1.5rem;
}
html.dark .rsd-modal-note {
        background: rgb(185 140 51 / 0.1);
        color: var(--rsd-brand-300, #dfc57e);
}

/* ══════════ دیده‌بان کاربر (فاز ۸) ══════════ */

/* ستاره دکمه‌ای — ظاهر هم‌شکل لینک مهمان؛ حالت توپُر عین WatchStar پروتوتایپ */
.rsd-star-btn {
        margin: 0;
        padding: 0.375rem;
        border: none;
        background: none;
        cursor: pointer;
        font: inherit;
}
.rsd-star-btn:disabled {
        opacity: 0.5;
        cursor: wait;
}
.rsd-star-on {
        color: var(--rsd-brand-500, #b98c33);
}
.rsd-star-on svg {
        fill: currentColor;
}
html.dark .rsd-star-on {
        color: var(--rsd-brand-400, #cfa954);
}

/* حالت خالی جدول دیده‌بان (پورت متن پروتوتایپ) */
.rsd-watchlist-empty {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        color: var(--rsd-muted-fg, #6e6a5e);
        font-size: 13px;
}

/* دکمه دیده‌بان سربرگ مودال (پورت دکمه AssetDialog) */
.rsd-modal-watch {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-md, 10px);
        background: var(--rsd-card, #ffffff);
        color: var(--rsd-muted-fg, #6e6a5e);
        font-size: 12px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.rsd-modal-watch:hover {
        color: var(--rsd-brand-600, #9a7225);
        border-color: var(--rsd-brand-200, #ebdcaa);
}
.rsd-modal-watch-on {
        color: var(--rsd-brand-600, #9a7225);
        border-color: var(--rsd-brand-200, #ebdcaa);
        background: var(--rsd-brand-50, #fbf8ef);
}
.rsd-modal-watch:disabled {
        opacity: 0.6;
        cursor: wait;
}
html.dark .rsd-modal-watch {
        background: rgb(242 239 232 / 0.06);
        color: rgb(242 239 232 / 0.75);
        border-color: rgb(242 239 232 / 0.14);
}
html.dark .rsd-modal-watch:hover,
html.dark .rsd-modal-watch-on {
        color: var(--rsd-brand-300, #dfc57e);
        border-color: rgb(207 169 84 / 0.4);
        background: rgb(185 140 51 / 0.12);
}

/* پنل «دیده‌بان من» (پورت WatchListPanel) — تب/پیشخوان حساب */
.rsd-wl-panel {
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-xl, 16px);
        background: var(--rsd-card, #ffffff);
        box-shadow: 0 1px 3px rgb(16 24 40 / 0.04);
        overflow: hidden;
}
html.dark .rsd-wl-panel {
        background: rgb(242 239 232 / 0.04);
        border-color: rgb(242 239 232 / 0.12);
}
.rsd-wl-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--rsd-border, #e8e5dd);
}
html.dark .rsd-wl-head {
        border-bottom-color: rgb(242 239 232 / 0.1);
}
.rsd-wl-title {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin: 0;
        font-size: 14px;
        font-weight: 800;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-wl-title {
        color: #f2efe8;
}
.rsd-wl-title svg {
        color: var(--rsd-brand-500, #b98c33);
}
.rsd-wl-all {
        font-size: 11px;
        font-weight: 700;
        color: var(--rsd-brand-700, #7c5b1d);
        text-decoration: none;
}
.rsd-wl-all:hover {
        text-decoration: underline;
}
html.dark .rsd-wl-all {
        color: var(--rsd-brand-400, #cfa954);
}
.rsd-wl-body {
        display: flex;
        flex-direction: column;
}
.rsd-wl-body > * + * {
        border-top: 1px solid rgb(16 24 40 / 0.07);
}
html.dark .rsd-wl-body > * + * {
        border-top-color: rgb(242 239 232 / 0.08);
}
.rsd-wl-row-skel {
        height: 3rem;
        margin: 0.75rem 1rem;
        border-radius: var(--rsd-radius-md, 10px);
}
.rsd-wl-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
}
.rsd-wl-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
}
.rsd-wl-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-wl-name {
        color: #f2efe8;
}
.rsd-wl-price {
        font-size: 11px;
        color: var(--rsd-muted-fg, #6e6a5e);
}
html.dark .rsd-wl-price {
        color: rgb(242 239 232 / 0.6);
}
.rsd-wl-side {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
}
.rsd-wl-remove {
        display: inline-flex;
        padding: 0.375rem;
        border: none;
        background: none;
        border-radius: 8px;
        color: var(--rsd-brand-500, #b98c33);
        cursor: pointer;
}
.rsd-wl-remove svg {
        fill: currentColor;
}
.rsd-wl-remove:hover {
        color: var(--rsd-down, #b91c1c);
}
.rsd-wl-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 2.5rem 1rem;
        text-align: center;
}
.rsd-wl-empty > svg {
        color: rgb(16 24 40 / 0.35);
}
html.dark .rsd-wl-empty > svg {
        color: rgb(242 239 232 / 0.35);
}
.rsd-wl-empty-title {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-wl-empty-title {
        color: #f2efe8;
}
.rsd-wl-empty-text {
        max-width: 20rem;
        margin: 0;
        font-size: 11px;
        line-height: 1.5rem;
        color: var(--rsd-muted-fg, #6e6a5e);
}
.rsd-wl-empty-cta {
        margin-top: 0.25rem;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-md, 10px);
        font-size: 12px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
        background: var(--rsd-card, #ffffff);
        text-decoration: none;
        transition: border-color 0.15s, background 0.15s;
}
.rsd-wl-empty-cta:hover {
        border-color: var(--rsd-brand-300, #dfc57e);
        background: var(--rsd-brand-50, #fbf8ef);
}
html.dark .rsd-wl-empty-cta {
        background: transparent;
        color: #f2efe8;
}

/* «دوره‌های من» — کارت‌های پیشرفت (تب حساب) */
.rsd-account-section {
        margin-top: 1.5rem;
}
.rsd-courses {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.75rem;
}
.rsd-course-card {
        list-style: none;
}
.rsd-course-link {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-xl, 16px);
        background: var(--rsd-card, #ffffff);
        box-shadow: 0 1px 3px rgb(16 24 40 / 0.04);
        text-decoration: none;
        transition: border-color 0.15s;
}
.rsd-course-link:hover {
        border-color: var(--rsd-brand-300, #dfc57e);
}
html.dark .rsd-course-link {
        background: rgb(242 239 232 / 0.04);
        border-color: rgb(242 239 232 / 0.12);
}
.rsd-course-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
}
.rsd-course-title {
        font-size: 14px;
        font-weight: 800;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-course-title {
        color: #f2efe8;
}
.rsd-course-pct {
        flex-shrink: 0;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 700;
        color: var(--rsd-brand-700, #7c5b1d);
        background: var(--rsd-brand-100, #f5edd5);
}
html.dark .rsd-course-pct {
        color: var(--rsd-brand-300, #dfc57e);
        background: rgb(185 140 51 / 0.18);
}
.rsd-course-done {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 700;
        color: var(--rsd-up, #047857);
        background: var(--rsd-up-soft, #ecfdf5);
}
html.dark .rsd-course-done {
        background: rgb(4 120 87 / 0.15);
}
.rsd-course-track {
        display: block;
        height: 0.375rem;
        border-radius: 9999px;
        background: var(--rsd-muted-bg, #f3f2ee);
        overflow: hidden;
}
html.dark .rsd-course-track {
        background: rgb(242 239 232 / 0.1);
}
.rsd-course-bar {
        display: block;
        height: 100%;
        border-radius: 9999px;
        background: var(--rsd-brand-500, #b98c33);
}
.rsd-course-meta {
        font-size: 11px;
        color: var(--rsd-muted-fg, #6e6a5e);
}
html.dark .rsd-course-meta {
        color: rgb(242 239 232 / 0.6);
}
.rsd-course-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 12px;
        font-weight: 700;
        color: var(--rsd-brand-700, #7c5b1d);
}
html.dark .rsd-course-cta {
        color: var(--rsd-brand-400, #cfa954);
}
.rsd-courses-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 3rem 1.5rem;
        border: 1px dashed var(--rsd-border, #e8e5dd);
        border-radius: var(--rsd-radius-2xl, 20px);
        background: rgb(243 242 238 / 0.4);
        text-align: center;
}
html.dark .rsd-courses-empty {
        background: rgb(242 239 232 / 0.04);
}
.rsd-courses-empty-icon {
        color: rgb(16 24 40 / 0.4);
}
html.dark .rsd-courses-empty-icon {
        color: rgb(242 239 232 / 0.4);
}
.rsd-courses-empty-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--rsd-fg, #101828);
}
html.dark .rsd-courses-empty-title {
        color: #f2efe8;
}
.rsd-courses-empty-text {
        max-width: 26rem;
        margin: 0;
        font-size: 12px;
        line-height: 1.5rem;
        color: var(--rsd-muted-fg, #6e6a5e);
}

/* لینک حساب TopBar — حالت کاربر (شخصی‌سازی سمت کلاینت فاز ۸) */
.rsd-account-user {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
}
@media (prefers-reduced-motion: reduce) {
        .rsd-star-btn,
        .rsd-modal-watch,
        .rsd-course-link,
        .rsd-wl-empty-cta {
                transition: none;
        }
}