/* #region admin.css */

/* =========================
   Admin Page Layout
   ========================= */

.admin-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
}

.admin-card {
    width: 100%;
    max-width: 880px;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0 auto;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Cards spacing */
.admin-header-card,
.admin-filter-card {
    margin-bottom: 0.75rem;
}

/* =========================
   Tabs (Users / Tickets)
   ========================= */

.admin-top-switch {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-tab-full {
    flex: 0 0 100%;
}

.admin-tab {
    flex: 1 1 0;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    justify-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="dark"] .admin-tab {
    background-color: #0f172a;
    color: var(--color-text-muted);
}

.admin-tab-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.65);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

/* =========================
   Filter Bar
   ========================= */

.admin-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-search-box {
    max-width: 320px;
}

.admin-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.admin-filter-btn {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

    .admin-filter-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-soft);
    }

[data-theme="dark"] .admin-filter-btn {
    background-color: #0f172a;
    color: var(--color-text-muted);
}

.admin-filter-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    color: #0f172a;
}

[data-theme="dark"] .admin-filter-active {
    color: #f9fafb;
}

.admin-phone-input {
    flex: 0 0 70%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

/* Apply button */
.admin-apply-btn {
    margin-inline-start: auto;
    border-radius: 999px !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 600;
    border: none !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: #fff !important;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

    .admin-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
    }

.admin-filter-row .admin-apply-btn {
    flex: 0 0 30%;
}

/* =========================
   List Area (IMPORTANT)
   One definition only.
   ========================= */

.admin-list-area {
    margin-top: 0.5rem;
    /* make list scroll stable on desktop */
    flex: 1 1 auto;
    min-height: 0; /* critical for flex + overflow */
    max-height: calc(100vh - 230px);
    overflow-y: auto; /* scroll here */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Empty/Loading states */
.admin-loading,
.admin-empty,
.admin-loading-more {
    padding: 0.9rem 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* =========================
   List Item (Card)
   ========================= */

.admin-item-card {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
}

.admin-item-main {
    flex: 1 1 auto;
    text-align: right;
    min-width: 0;
}

.admin-item-title {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-item-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.admin-item-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-details-btn {
    font-size: 0.8rem;
    padding-inline: 0.8rem;
}

/* =========================
   BANNED STYLE (NO layout shift)
   Use ring via box-shadow, not border: 3px
   ========================= */

.admin-item-banned {
    /* keep existing 1px border, add neon ring */
    padding-top: 1.3rem; /* more air above content */
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 1), 0 0 12px rgba(239, 68, 68, 0.45), 0 0 26px rgba(239, 68, 68, 0.25);
}

    /* Badge on every banned card */
    /* Floating badge – top right, NOT glued */
    .admin-item-banned::before {
        content: "مسدود";
        position: absolute;
        /* move it inward and upward gently */
        top: -12px; /* lift it into the air */
        right: 18px; /* pull away from border */

        z-index: 50;
        pointer-events: none;
        font-size: 0.7rem;
        padding: 5px 12px; /* more internal air */
        line-height: 1;
        border-radius: 999px;
        background: rgba(239, 68, 68, 0.22);
        border: 1px solid rgba(239, 68, 68, 0.9);
        color: #ff4d4d;
        font-weight: 800;
        /* stronger separation from card */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(239, 68, 68, 0.45), 0 0 22px rgba(239, 68, 68, 0.25);
        backdrop-filter: blur(8px);
    }

/* ================================
   NEON ADMIN ACTION BUTTONS
   ================================ */

.neon-btn {
    position: relative;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.neon-btn-red {
    color: #ff4d4d;
    border-color: #ff4d4d;
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.55), 0 0 14px rgba(255, 77, 77, 0.35), inset 0 0 6px rgba(255, 77, 77, 0.25);
}

    .neon-btn-red:hover {
        background: rgba(255, 77, 77, 0.12);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.85), 0 0 22px rgba(255, 77, 77, 0.55), inset 0 0 10px rgba(255, 77, 77, 0.45);
        transform: translateY(-1px);
    }

.neon-btn-green {
    color: #2dff9a;
    border-color: #2dff9a;
    box-shadow: 0 0 6px rgba(45, 255, 154, 0.55), 0 0 14px rgba(45, 255, 154, 0.35), inset 0 0 6px rgba(45, 255, 154, 0.25);
}

    .neon-btn-green:hover {
        background: rgba(45, 255, 154, 0.12);
        box-shadow: 0 0 10px rgba(45, 255, 154, 0.85), 0 0 22px rgba(45, 255, 154, 0.55), inset 0 0 10px rgba(45, 255, 154, 0.45);
        transform: translateY(-1px);
    }

.neon-btn:active {
    transform: scale(0.96);
}

/* =========================
   Mobile tweaks
   ========================= */

@media (max-width: 640px) {
    .admin-search-box {
        max-width: none;
    }

    .admin-filter-buttons {
        justify-content: flex-start;
    }

    .admin-item-card {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-item-actions {
        width: 100%;
        justify-content: flex-start; /* RTL: right side */
        margin-top: 0.5rem;
    }
}

.ticket-user-banned {
    color: #ef4444;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(239, 68, 68, 0.9);
    opacity: 0.9;
}

    .ticket-user-banned:hover {
        text-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
    }
/* #endregion admin.css */


/* #region Admin Tournaments (CRUD + SHELL + LAZY) */

/* ---------- Shell tokens ---------- */
:root {
    --adm-maxw: 1200px;
    --adm-pad: clamp(12px, 1.8vw, 20px);
    --adm-gap: clamp(10px, 1.2vw, 14px);
}

/* ---------- Page shell ---------- */
.admT-root {
    min-height: 100dvh;
    padding: clamp(12px, 2vw, 22px);
    direction: rtl;
    background: var(--color-bg);
}

.admT-card {
    width: min(var(--adm-maxw), 100%);
    margin: 0 auto;
    border-radius: var(--radius-xl);
    padding: var(--adm-pad);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(12px);
}

/* Sticky area (tabs + header) */
.admT-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.10) 60%, transparent);
    backdrop-filter: blur(10px);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Header row */
.admT-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--color-border-soft);
}

.admT-head__title {
    font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem);
    font-weight: 950;
    color: var(--color-text);
}

.admT-refresh {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

    .admT-refresh:hover {
        transform: translateY(-1px);
        border-color: rgba(34,211,238,.35);
        background: rgba(34,211,238,.08);
    }

    .admT-refresh:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* Sections */
.admT-section {
    margin-top: 14px;
}

.admT-section__title {
    font-weight: 900;
    color: var(--color-text);
    opacity: .95;
    margin: 14px 0 10px;
    font-size: .95rem;
    letter-spacing: .2px;
}

/* ---------- Create form (your existing) ---------- */
.adm-form {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.adm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.adm-field label {
    display: block;
    font-size: .82rem;
    opacity: .85;
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

.adm-inp {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10, 18, 34, .45);
    color: rgba(255,255,255,.92);
    outline: none;
}

    .adm-inp:focus {
        border-color: rgba(99,102,241,.45);
        box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    }

.adm-area {
    height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

.adm-span-2 {
    grid-column: span 2;
}

.adm-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-check {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: .9rem;
    opacity: .9;
    user-select: none;
    color: var(--color-text);
}

    .adm-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }

.adm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.adm-btn {
    height: 40px;
    border-radius: 999px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    white-space: nowrap;
}

    .adm-btn:hover {
        transform: translateY(-1px);
    }

    .adm-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.adm-btn-primary {
    border-color: rgba(99,102,241,.35);
    background: linear-gradient(90deg, rgba(34,211,238,.75), rgba(99,102,241,.75));
}

.adm-btn-danger {
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.12);
}

.adm-btn-ghost {
    background: rgba(255,255,255,.04);
}

/* ---------- List (scroll root for lazy-load) ---------- */
.adm-list {
    margin-top: 14px;
    display: grid;
    gap: 12px;
    /* CRITICAL: this is the scroll container for IntersectionObserver root */
    max-height: calc(100dvh - 150px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,.55) rgba(255,255,255,.06);
    /* mask fade can cause “invisible clicks” on some Android/Edge versions;
     keep it but soften and only when supported */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

@supports not (mask-image: linear-gradient(#000,#000)) {
    .adm-list {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* WebKit scrollbar */
.adm-list::-webkit-scrollbar {
    width: 12px;
}

.adm-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.adm-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.55));
    box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
}

    .adm-list::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(34,211,238,.92), rgba(168,85,247,.72));
        box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.24);
    }

    .adm-list::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg, rgba(34,211,238,1), rgba(168,85,247,.85));
    }

/* Lazy bits */
.admT-sentinel {
    height: 1px;
}

.admT-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    opacity: .9;
}

/* ---------- List items ---------- */
.adm-item {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.adm-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.adm-title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--color-text);
}

.adm-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.adm-badge {
    font-size: .72rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    opacity: .95;
    color: rgba(226,232,240,.92);
}

.adm-badge--on {
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.10);
}

.adm-badge--off {
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
}

.adm-badge--info {
    border-color: rgba(34,211,238,.25);
    background: rgba(34,211,238,.08);
}

.adm-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: .9rem;
    opacity: .92;
    color: var(--color-text-muted);
}

    .adm-meta span {
        font-weight: 800;
        color: var(--color-text);
        opacity: .95;
    }

.adm-item-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.adm-edit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* ---------- Tabs (FIXED vars + positioning) ---------- */
.adm-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.adm-tab {
    position: relative;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: var(--color-text-muted); /* FIX: was --text-muted */
    text-decoration: none;
    font-weight: 700;
    transition: all .2s ease;
    border: 1px solid rgba(255,255,255,.08);
}

    .adm-tab:hover {
        background: rgba(255,255,255,.08);
        color: var(--color-text); /* FIX: was --text-main */
    }

    .adm-tab.active,
    .adm-tab--active,
    .adm-tabs .active.adm-tab {
        color: rgba(255,255,255,.95);
        border-color: rgba(255,153,51,.35);
        background: linear-gradient(135deg, rgba(255,153,51,.22), rgba(0,255,255,.10));
    }

        .adm-tab.active::after,
        .adm-tab--active::after {
            content: "";
            position: absolute;
            inset-inline: 10px;
            bottom: -6px;
            height: 2px;
            border-radius: 999px;
            background: rgba(0,255,255,.55);
            opacity: .9;
        }

/* Responsive */
@media (max-width: 900px) {
    .adm-grid {
        grid-template-columns: 1fr;
    }

    .adm-span-2 {
        grid-column: auto;
    }

    .adm-meta {
        grid-template-columns: 1fr;
    }

    .adm-actions {
        justify-content: stretch;
    }

        .adm-actions .adm-btn {
            width: 100%;
        }

    /* improve scroll height on mobile so list is usable */
    .adm-list {
        max-height: calc(100dvh - 150px);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .adm-btn, .admT-refresh {
        transition: none !important;
    }
}

/* #endregion Admin Tournaments (CRUD + SHELL + LAZY) */


/* #region Admin PendingList (Tabs + Toolbar + Lazy + Theme Scroll) */

/* Make list scrollable (root for IntersectionObserver) */
.pending-scroll {
    margin-top: 12px;
    max-height: calc(100dvh - 150px); /* tune if needed (tabs+head+toolbar height) */
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,.55) rgba(255,255,255,.06);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

@supports not (mask-image: linear-gradient(#000,#000)) {
    .pending-scroll {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* WebKit scrollbar */
.pending-scroll::-webkit-scrollbar {
    width: 12px;
}

.pending-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.pending-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.55));
    box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
}

    .pending-scroll::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(34,211,238,.92), rgba(168,85,247,.72));
        box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.24);
    }

    .pending-scroll::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg, rgba(34,211,238,1), rgba(168,85,247,.85));
    }

/* ===== Tabs ===== */
.adm-tabs {
    position: sticky;
    top: 12px;
    z-index: 60;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.adm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: .92rem;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .adm-tab:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.06);
        border-color: rgba(34,211,238,.16);
        box-shadow: 0 10px 20px rgba(0,0,0,.18);
    }

    /* IMPORTANT: NavLink uses ActiveClass="active" */
    .adm-tab.active {
        color: #fff;
        border-color: rgba(34,211,238,.30);
        background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(99,102,241,.35));
        box-shadow: 0 12px 26px rgba(0,0,0,.22);
    }

        .adm-tab.active::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: -6px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(99,102,241,.9));
            box-shadow: 0 0 14px rgba(34,211,238,.25);
        }

.adm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 900;
    color: rgba(250,204,21,.95);
    border: 1px solid rgba(250,204,21,.25);
    background: rgba(250,204,21,.08);
    box-shadow: 0 0 10px rgba(250,204,21,.12);
}

/* ===== Toolbar ===== */
.pending-toolbar {
    position: sticky;
    top: 84px; /* below tabs */
    z-index: 55;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.pending-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.pf-input,
.pf-select {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10, 18, 34, .35);
    color: rgba(255,255,255,.92);
    min-width: 190px;
    outline: none;
}

    .pf-input:focus,
    .pf-select:focus {
        border-color: rgba(34,211,238,.35);
        box-shadow: 0 0 0 3px rgba(34,211,238,.10);
    }

.pending-summary {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(34,211,238,.20);
    background: rgba(34,211,238,.06);
    color: rgba(255,255,255,.86);
    font-size: .85rem;
    white-space: nowrap;
}

.pending-refresh {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .pending-refresh:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.08);
    }

/* ===== List ===== */
.pending-list {
    display: grid;
    gap: 12px;
}

.pending-empty {
    padding: 16px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.78);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Cards */
.pending-card {
    display: grid;
    grid-template-columns: 92px 1fr 280px;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

    .pending-card:hover {
        transform: translateY(-1px);
        border-color: rgba(34,211,238,.16);
        background: rgba(255,255,255,.035);
    }

.pending-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-thumb {
    width: 92px;
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    display: block;
}

    .pending-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(1.05) contrast(1.02);
        transform: scale(1.02);
    }

.pending-mid {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pending-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pending-name {
    font-weight: 900;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-pill {
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    white-space: nowrap;
}

.pending-pill--confirmed {
    border-color: rgba(34,197,94,.40);
    background: rgba(34,197,94,.12);
}

.pending-pill--pending {
    border-color: rgba(250,204,21,.25);
    background: rgba(245,158,11,.12);
    color: rgba(250,204,21,.95);
}

.pending-pill--rejected {
    border-color: rgba(239,68,68,.48);
    background: rgba(239,68,68,.14);
    color: rgba(254,226,226,.95);
}

.pending-row2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.70);
    font-size: .88rem;
}

.pending-dot {
    opacity: .5;
}

.pending-sub {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-row3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.82);
    font-size: .88rem;
}

.pending-money b {
    font-weight: 900;
}

.pending-time {
    opacity: .72;
    white-space: nowrap;
}

.pending-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.pending-link {
    text-decoration: none;
    font-weight: 800;
    color: var(--color-primary);
}

    .pending-link:hover {
        text-decoration: underline;
    }

.pending-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Buttons */
.t-btn-success {
    background: rgba(34,197,94,.15);
    border: 1px solid rgba(34,197,94,.35);
    color: #22c55e;
}

.t-btn-warning {
    background: rgba(245,158,11,.16); /* amber-500 */
    border: 1px solid rgba(245,158,11,.38);
    color: #f59e0b;
}

.t-btn-danger {
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.35);
    color: #ef4444;
}

/* Lazy */
.admT-sentinel {
    height: 1px;
}

.admT-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    opacity: .9;
}

/* Make thumb/link behave like buttons */
.pending-thumb-btn {
    padding: 0;
    cursor: pointer;
}

.pending-link-btn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: right;
}

/* Tablet */
@media (max-width: 980px) {
    .pending-card {
        grid-template-columns: 84px 1fr;
        grid-template-areas:
            "thumb mid"
            "right right";
    }

    .pending-left {
        grid-area: thumb;
    }

    .pending-mid {
        grid-area: mid;
    }

    .pending-right {
        grid-area: right;
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .adm-tabs {
        position: static;
    }

    .pending-toolbar {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .pf-input, .pf-select {
        min-width: 0;
        width: 100%;
    }

    .pending-actions {
        flex-wrap: wrap;
        align-items: stretch;
    }

        .pending-actions .t-btn-success,
        .pending-actions .t-btn-danger {
            flex: 1 1 calc(50% - 10px);
            min-width: 0;
        }

        .pending-actions .t-btn-ghost {
            flex: 0 0 100%;
            width: 100%;
            margin-top: 2px;
        }

    .pending-right {
        flex-direction: column;
        align-items: stretch;
    }

    /* scroll height on small screens */
    .pending-scroll {
        max-height: calc(100dvh - 150px);
    }
}

/* #endregion Admin PendingList (Tabs + Toolbar + Lazy + Theme Scroll) */




/* #region Admin Receipt Info Modal */

.adm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999; /* higher than your other overlays */
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.adm-modal {
    width: min(720px, 96vw);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10, 18, 34, .92);
    box-shadow: 0 18px 60px rgba(0,0,0,.50);
    overflow: hidden;
    direction: rtl;
    text-align: right;
}

.adm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.adm-modal-title {
    font-weight: 900;
    font-size: 1rem;
    color: rgba(255,255,255,.92);
}

.adm-modal-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    cursor: pointer;
}

    .adm-modal-x:hover {
        background: rgba(255,255,255,.08);
    }

.adm-modal-body {
    padding: 14px 16px 10px;
}

.adm-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.adm-modal-span2 {
    grid-column: span 2;
}

.adm-modal-field {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.adm-modal-label {
    font-size: .78rem;
    opacity: .78;
    margin-bottom: 8px;
}

.adm-modal-value {
    font-weight: 900;
    font-size: .95rem;
    color: rgba(255,255,255,.92);
}

.adm-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.adm-modal-mono {
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    word-break: break-word;
}

.adm-modal-copy {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(34,211,238,.35);
    background: rgba(34,211,238,.10);
    color: rgba(34,211,238,.95);
    font-weight: 900;
    cursor: pointer;
}

    .adm-modal-copy:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.adm-modal-hint {
    margin-top: 8px;
    font-size: .78rem;
    color: rgba(250,204,21,.95);
    opacity: .9;
}

.adm-modal-textarea {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: .92rem;
    color: rgba(255,255,255,.88);
    opacity: .95;
    min-height: 62px;
}

.adm-modal-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

@media (max-width: 640px) {
    .adm-modal-grid {
        grid-template-columns: 1fr;
    }

    .adm-modal-span2 {
        grid-column: auto;
    }
}

/* #endregion Admin Receipt Info Modal */

/* #region Admin Receipt Preview Modal (Receipt Image) */

.adm-rmodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.70);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.adm-rmodal {
    width: min(980px, 96vw);
    max-height: min(86vh, 860px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10, 18, 34, .94);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    overflow: hidden;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.adm-rmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.adm-rmodal-title {
    font-weight: 900;
    font-size: 1rem;
    color: rgba(255,255,255,.92);
}

.adm-rmodal-x {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .adm-rmodal-x:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(34,211,238,.18);
    }

.adm-rmodal-body {
    padding: 12px 14px 14px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-rmodal-stage {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    overflow: auto; /* allows zoom scroll on big receipts */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.adm-rmodal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.adm-rmodal-actions {
    display: flex;
    justify-content: flex-start;
}

.adm-rmodal-link {
    text-decoration: none;
    font-weight: 900;
    color: var(--color-primary);
}

    .adm-rmodal-link:hover {
        text-decoration: underline;
    }

.adm-rmodal-empty {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.16);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.80);
    text-align: center;
}

/* Mobile: modal becomes near full-screen */
@media (max-width: 640px) {
    .adm-rmodal {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px;
    }

    .adm-rmodal-overlay {
        padding: 10px;
    }
}

/* #endregion Admin Receipt Preview Modal (Receipt Image) */



/* #region  Admin AdminPredictions*/
/* Container & Root */
.pred-admin-root {
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
}

/* Expander Style for Create Box */
.expander-header {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .expander-header:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 15px var(--color-primary-soft);
    }

.expander-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

    .expander-content.is-open {
        max-height: 1000px;
        transition: max-height 0.4s ease-in-out;
        margin-bottom: 2rem;
    }

/* Match Card Custom UI */
.match-item-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}

.match-team-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.team-flag-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
}

/* Filter Bar */
.filter-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 5px;
}

.filter-chip {
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    transition: 0.2s;
}

    .filter-chip.active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: #fff;
        border-color: transparent;
    }

/* Edit Box UI - Two Boxes for Results */
.edit-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: rgba(255,255,255,0.02);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.result-box {
    text-align: center;
}

    .result-box label {
        display: block;
        font-size: 0.8rem;
        margin-bottom: 5px;
        color: var(--color-primary);
    }

.result-input {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    border-radius: 12px;
    border: 2px solid var(--color-border);
}

/* استایل‌های اختصاصی و محدود شده فقط برای همین صفحه (جلوگیری از تداخل با صفحات دیگر) */
.pred-admin-root .team-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pred-admin-root .team-side.away-side {
        flex-direction: row-reverse;
    }

/* ریسپانسیو اختصاصی موبایل */
@media (max-width: 768px) {
    .pred-admin-root .match-item-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pred-admin-root .adm-item-top {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    /* نمایش تیم‌ها به صورت 50/50 مقابل هم */
    .pred-admin-root .match-team-display {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .pred-admin-root .team-side,
    .pred-admin-root .team-side.away-side {
        flex-direction: column;
        text-align: center;
    }

        .pred-admin-root .team-side .team-flag-img {
            width: 55px;
            height: 55px;
        }

        .pred-admin-root .team-side span {
            font-size: 0.85rem;
            font-weight: 800;
        }

    .pred-admin-root .vs-badge {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pred-admin-root .adm-badges {
        justify-content: center;
        width: 100%;
        margin-top: 5px;
    }

    .pred-admin-root .adm-meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(128, 128, 128, 0.05);
        padding: 10px;
        border-radius: var(--radius-md);
        margin-top: 5px;
        gap: 5px;
    }

    .pred-admin-root .adm-item-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        margin-top: 10px;
    }

        .pred-admin-root .adm-item-actions .adm-btn {
            flex: 1;
            padding: 0 4px;
            font-size: 0.75rem;
            text-align: center;
            min-width: 0;
        }

    /* --- استایل جدید برای کوچک کردن فیلترها در موبایل --- */
    .pred-admin-root .filter-wrapper {
        gap: 0.35rem;
        margin-bottom: 1rem;
    }

    .pred-admin-root .filter-chip {
        padding: 0.35rem 0.8rem;
        font-size: 0.75rem;
    }
}


/* --- تنظیمات فیلترها در موبایل --- */
.pred-admin-root .filter-wrapper {
    gap: 0.35rem; /* فاصله بین دکمه‌های فیلتر کمتر می‌شود */
    margin-bottom: 1rem;
}

.pred-admin-root .filter-chip {
    padding: 0.35rem 0.8rem; /* پدینگ (فضای داخلی) دکمه کمتر می‌شود */
    font-size: 0.75rem; /* سایز فونت کوچک‌تر می‌شود */
}

/*.pred-admin-root .admT-list,
.pred-admin-root .adm-list {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;*/ /* از بین بردن اسکرول دوم */
/*}*/

/* 🌟 استایل کاملاً ایزوله مخصوص صفحه ادمین مسابقات 🌟 */

/* 🌟 استایل هوشمند و کاملاً ایزوله مخصوص صفحه ادمین مسابقات 🌟 */
.pred-admin-root .admT-list,
.pred-admin-root .adm-list {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; /* حذف اسکرول داخلی برای یکپارچگی با اسکرول کل سایت */
}

/* کانتینر اصلی هدر شناور ادمین */
.pred-admin-root .admin-sticky-header {
    position: sticky;
    z-index: 10;
    background: var(--color-bg, #eef1f5); /* همرنگ پس‌زمینه سایت برای مخفی شدن کارت‌های زیرین */
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    transition: top 0.2s ease; /* انیمیشن نرم هنگام تغییر سایز صفحه */
}

/* 📱 استایل مخصوص موبایل (صفحه‌های کوچک‌تر از 641 پیکسل) */
@media (max-width: 640.98px) {
    .pred-admin-root .admin-sticky-header {
        top: 0 !important; /* در موبایل بدون هیچ فاصله‌ای کاملاً به سقف می‌چسبد */
        padding-top: 15px;
    }
}

/* 💻 استایل مخصوص ویندوز/دسکتاپ (صفحه‌های بزرگ‌تر از 641 پیکسل) */
@media (min-width: 641px) {
    .pred-admin-root .admin-sticky-header {
        top: 3.5rem !important; /* در دسکتاپ دقیقاً زیر تاپ‌بار 3.5rem شما قرار می‌گیرد */
        padding-top: 35px;
    }
}

/* #endregion  Admin AdminPredictions*/


/* #region   Cafe Admin — modern menu manager */


/* ==========================================================================
   Cafe Admin — modern menu manager (scoped)
   Reuses the global theme tokens from main.css (--color-primary, etc.)
   so it adapts automatically to light / dark (data-theme="dark").
   ========================================================================== */

.ca-root {
    direction: rtl;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem) clamp(.75rem, 3vw, 2rem);
    color: var(--color-text);
    /* local, cafe-tuned aliases layered on the global theme */
    --ca-grad: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    background: radial-gradient(1100px 560px at 100% -10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%), radial-gradient(820px 460px at -10% 110%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 60%), var(--color-bg);
}

.ca-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* -------------------------------------------------- Header -------------- */
.ca-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: clamp(1.4rem, 3.4vw, 2.3rem);
    color: #fff;
    background: radial-gradient(560px 280px at 88% -50%, color-mix(in srgb, var(--color-secondary) 45%, transparent), transparent 70%), var(--ca-grad);
    box-shadow: var(--shadow-strong);
}

    .ca-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 42%);
        pointer-events: none;
    }

.ca-header__deco {
    position: absolute;
    inset-inline-start: clamp(-18px, -2vw, -8px);
    bottom: -34px;
    font-size: clamp(7rem, 16vw, 12rem);
    line-height: 1;
    opacity: .12;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

.ca-header__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.01em;
    font-size: clamp(1.45rem, 3.6vw, 2.05rem);
    display: flex;
    align-items: center;
    gap: .55rem;
}

.ca-header__sub {
    margin: .5rem 0 0;
    font-weight: 500;
    opacity: .92;
    font-size: clamp(.85rem, 2vw, 1rem);
}

.ca-header__stats {
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.ca-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

    .ca-chip b {
        font-size: 1.02rem;
        font-weight: 900;
    }

/* -------------------------------------------------- Tabs ---------------- */
.ca-tabs {
    align-self: center;
    display: inline-flex;
    gap: .25rem;
    padding: .35rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.ca-tab {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-text-muted);
    background: transparent;
    padding: .6rem 1.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

    .ca-tab:hover {
        color: var(--color-text);
    }

.ca-tab--active {
    color: #fff;
    background: var(--ca-grad);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* -------------------------------------------------- Section / layout ---- */
.ca-section {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    animation: ca-fade-up .35s ease both;
}

@media (max-width: 860px) {
    .ca-section {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------- Cards --------------- */
.ca-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
}

.ca-form {
    position: sticky;
    top: 1rem;
}

@media (max-width: 860px) {
    .ca-form {
        position: static;
    }
}

.ca-card__title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .ca-card__title::before {
        content: "";
        width: 4px;
        height: 18px;
        border-radius: 4px;
        background: var(--ca-grad);
    }

/* -------------------------------------------------- Fields -------------- */
.ca-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .9rem;
}

.ca-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.ca-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

@media (max-width: 520px) {
    .ca-grid-2 {
        grid-template-columns: 1fr;
    }
}

.ca-input,
.ca-select,
.ca-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: .95rem;
    color: var(--color-text);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .7rem .85rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

    .ca-input::placeholder,
    .ca-textarea::placeholder {
        color: var(--color-text-muted);
    }

    .ca-input:focus,
    .ca-select:focus,
    .ca-textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        background: var(--color-surface);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.ca-select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-start: 2.2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: left .85rem center;
}

.ca-textarea {
    resize: vertical;
    min-height: 46px;
}

/* -------------------------------------------------- Buttons ------------- */
.ca-actions {
    display: flex;
    gap: .6rem;
    margin-top: .3rem;
    flex-wrap: wrap;
}

.ca-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-family: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .72rem 1.2rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.ca-btn--primary {
    color: #fff;
    background: var(--ca-grad);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

    .ca-btn--primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px color-mix(in srgb, var(--color-primary) 50%, transparent);
    }

.ca-btn--ghost {
    flex: 0 0 auto;
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

    .ca-btn--ghost:hover {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
    }

.ca-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* -------------------------------------------------- Image upload -------- */
.ca-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

.ca-upload__btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 55%, transparent);
    border-radius: var(--radius-md);
    padding: .62rem 1rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .ca-upload__btn:hover {
        background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    }

.ca-upload__preview {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
}

    .ca-upload__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* -------------------------------------------------- List head ----------- */
.ca-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
}

    .ca-list-head h3 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
    }

.ca-count-badge {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: .25rem .7rem;
    border-radius: 999px;
}

/* -------------------------------------------------- Category grid ------- */
.ca-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .8rem;
}

.ca-cat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    animation: ca-fade-up .35s ease both;
}

    .ca-cat-card::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: 4px;
        background: var(--ca-grad);
    }

    .ca-cat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-strong);
        border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-soft));
    }

.ca-cat-card__title {
    font-weight: 800;
    font-size: 1rem;
}

.ca-cat-card__order {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------- Icon buttons -------- */
.ca-actions-mini {
    display: flex;
    gap: .4rem;
    flex: 0 0 auto;
}

.ca-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .ca-icon-btn img {
        width: 16px;
        height: 16px;
        filter: var(--icon-filter-base);
    }

    .ca-icon-btn:hover {
        transform: translateY(-2px);
    }

.ca-icon-btn--edit:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.ca-icon-btn--delete:hover {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 15%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-error) 30%, transparent);
}

/* -------------------------------------------------- Product groups ------ */
.ca-group {
    margin-bottom: 1.4rem;
    animation: ca-fade-up .35s ease both;
}

    .ca-group:last-child {
        margin-bottom: 0;
    }

.ca-group__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.ca-group__bar {
    width: 6px;
    height: 22px;
    border-radius: 6px;
    background: var(--ca-grad);
}

.ca-group__name {
    font-weight: 800;
    font-size: 1.05rem;
}

.ca-group__count {
    margin-inline-start: auto;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: .2rem .6rem;
    border-radius: 999px;
}

.ca-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .8rem;
}

.ca-prod-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

    .ca-prod-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-strong);
        border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-soft));
    }

.ca-prod-card__img {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

    .ca-prod-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ca-prod-card__info {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-prod-card__name {
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-prod-card__desc {
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-prod-card__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.ca-price {
    white-space: nowrap;
    font-weight: 800;
    font-size: .9rem;
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    padding: .25rem .6rem;
    border-radius: 999px;
}

    .ca-price small {
        font-weight: 600;
        opacity: .85;
        margin-inline-start: 3px;
    }

/* -------------------------------------------------- Empty / loading ----- */
.ca-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
}

.ca-empty__icon {
    display: block;
    margin-bottom: .5rem;
    font-size: 2.4rem;
    opacity: .5;
}

.ca-empty-sm {
    padding: .6rem;
    font-size: .85rem;
    color: var(--color-text-muted);
}

.ca-loading {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ca-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: ca-spin .7s linear infinite;
}

.ca-btn--primary .ca-spinner {
    border-color: rgba(255, 255, 255, .45);
    border-top-color: #fff;
}

/* -------------------------------------------------- Motion -------------- */
@keyframes ca-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ca-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* gentle stagger for grids */
.ca-cat-grid > *:nth-child(2) {
    animation-delay: .04s;
}

.ca-cat-grid > *:nth-child(3) {
    animation-delay: .08s;
}

.ca-cat-grid > *:nth-child(4) {
    animation-delay: .12s;
}

.ca-cat-grid > *:nth-child(5) {
    animation-delay: .16s;
}

.ca-cat-grid > *:nth-child(6) {
    animation-delay: .20s;
}

@media (prefers-reduced-motion: reduce) {
    .ca-section,
    .ca-cat-card,
    .ca-group {
        animation: none !important;
    }

    .ca-spinner {
        animation-duration: 1.4s;
    }
}
/* #endregion  Cafe Admin — modern menu manager */

/* #region  Cafe Menu — modern menu manager */

/* ==========================================================================
   Cafe Menu — customer-facing storefront (scoped)
   Reuses the global theme tokens from main.css (--color-primary, etc.)
   so it adapts automatically to light / dark (data-theme="dark").
   ========================================================================== */

.cm-root {
    direction: rtl;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem) clamp(.75rem, 3vw, 2rem);
    color: var(--color-text);
    --cm-grad: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    background: radial-gradient(1100px 560px at 100% -10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%), radial-gradient(820px 460px at -10% 110%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 60%), var(--color-bg);
}

.cm-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* -------------------------------------------------- Header -------------- */
.cm-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3.6vw, 2.5rem);
    color: #fff;
    text-align: center;
    background: radial-gradient(560px 280px at 88% -50%, color-mix(in srgb, var(--color-secondary) 45%, transparent), transparent 70%), var(--cm-grad);
    box-shadow: var(--shadow-strong);
}

    .cm-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 42%);
        pointer-events: none;
    }

.cm-header__deco {
    position: absolute;
    inset-inline-start: clamp(-18px, -2vw, -8px);
    bottom: -34px;
    font-size: clamp(7rem, 16vw, 12rem);
    line-height: 1;
    opacity: .12;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

.cm-header__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.01em;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.cm-header__sub {
    margin: .55rem 0 0;
    font-weight: 500;
    opacity: .92;
    font-size: clamp(.9rem, 2vw, 1.05rem);
}

.cm-header__stats {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

    .cm-chip b {
        font-size: 1.02rem;
        font-weight: 900;
    }

/* -------------------------------------------------- Category section ---- */
.cm-section {
    animation: cm-fade-up .4s ease both;
}

.cm-cat-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.cm-cat-bar {
    width: 6px;
    height: 24px;
    border-radius: 6px;
    background: var(--cm-grad);
}

.cm-cat-title {
    font-weight: 900;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
}

.cm-cat-count {
    margin-inline-start: auto;
    font-size: .76rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: .25rem .7rem;
    border-radius: 999px;
}

/* -------------------------------------------------- Product grid -------- */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(.8rem, 1.5vw, 1.1rem);
}

.cm-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    animation: cm-fade-up .4s ease both;
}

    .cm-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-strong);
        border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-soft));
    }

.cm-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-surface-soft);
}

    .cm-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .45s ease;
    }

.cm-card:hover .cm-card__media img {
    transform: scale(1.06);
}

.cm-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .85rem .9rem 1rem;
}

.cm-card__name {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
}

.cm-card__desc {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cm-price {
    margin-top: auto;
    align-self: flex-start;
    white-space: nowrap;
    font-weight: 900;
    font-size: 1rem;
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    padding: .3rem .7rem;
    border-radius: 999px;
}

    .cm-price small {
        font-weight: 600;
        font-size: .72rem;
        opacity: .85;
        margin-inline-start: 3px;
    }

/* -------------------------------------------------- Out of stock -------- */
.cm-badge {
    position: absolute;
    top: .6rem;
    inset-inline-start: .6rem;
    z-index: 2;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: var(--color-error);
    padding: .25rem .6rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-error) 45%, transparent);
}

.cm-card--out .cm-card__media img {
    filter: grayscale(.7);
    opacity: .55;
}

.cm-card--out:hover .cm-card__media img {
    transform: none;
}

/* -------------------------------------------------- Empty / loading ----- */
.cm-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    font-size: .95rem;
}

.cm-empty__icon {
    display: block;
    margin-bottom: .6rem;
    font-size: 2.6rem;
    opacity: .5;
}

.cm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 3rem 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.cm-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-top-color: var(--color-primary);
    animation: cm-spin .7s linear infinite;
}

/* -------------------------------------------------- Motion -------------- */
@keyframes cm-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cm-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* gentle stagger across the first cards in each grid */
.cm-grid > *:nth-child(2) {
    animation-delay: .04s;
}

.cm-grid > *:nth-child(3) {
    animation-delay: .08s;
}

.cm-grid > *:nth-child(4) {
    animation-delay: .12s;
}

.cm-grid > *:nth-child(5) {
    animation-delay: .16s;
}

.cm-grid > *:nth-child(6) {
    animation-delay: .20s;
}

.cm-grid > *:nth-child(7) {
    animation-delay: .24s;
}

.cm-grid > *:nth-child(8) {
    animation-delay: .28s;
}

@media (prefers-reduced-motion: reduce) {
    .cm-section,
    .cm-card {
        animation: none !important;
    }

        .cm-card:hover .cm-card__media img {
            transform: none;
        }

    .cm-spinner {
        animation-duration: 1.4s;
    }
}
/* #endregion  Cafe Admin — modern menu manager */


/* #region admin comments */
.cmm-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
}

.cmm-shell {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HERO */
.cmm-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(236,72,153,.5), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(245,158,11,.5), transparent 70%), linear-gradient(135deg, #0f172a 0%, #312e81 55%, #831843 100%);
    box-shadow: var(--shadow-strong);
}

    .cmm-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.cmm-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.cmm-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s ease, transform .15s ease;
}

    .cmm-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .cmm-hero__btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .cmm-hero__btn svg {
        width: 16px;
        height: 16px;
    }

    .cmm-hero__btn.is-busy svg {
        animation: cmm-spin .9s linear infinite;
    }

.cmm-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.cmm-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    flex: 0 0 44px;
}

    .cmm-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.cmm-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.cmm-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

/* Filter tiles */
.cmm-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.cmm-tile {
    cursor: pointer;
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
}

    .cmm-tile:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.16);
    }

    .cmm-tile.is-active {
        background: rgba(255,255,255,.94);
        color: #0f172a;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        transform: translateY(-2px);
    }

.cmm-tile__num {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.cmm-tile__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

.cmm-tile.is-active .cmm-tile__lbl {
    opacity: .65;
}

@media (max-width: 420px) {
    .cmm-tiles {
        grid-template-columns: repeat(2,1fr);
        gap: .45rem;
    }
}

/* Search */
.cmm-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .cmm-search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

    .cmm-search svg {
        width: 16px;
        height: 16px;
        color: var(--color-text-muted);
        flex: 0 0 16px;
    }

    .cmm-search input {
        flex: 1 1 auto;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--color-text);
        font: inherit;
        padding: .15rem 0;
    }

        .cmm-search input::placeholder {
            color: var(--color-text-muted);
        }

/* List */
.cmm-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.cmm-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    padding: .95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    animation: cmm-fade .35s ease both;
}

    .cmm-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
        border-color: color-mix(in srgb, var(--cmm-accent, var(--color-primary)) 35%, var(--color-border-soft));
    }

    .cmm-card::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--cmm-accent, var(--color-primary)), transparent);
    }

    .cmm-card[data-status="pending"] {
        --cmm-accent: #f59e0b;
    }

    .cmm-card[data-status="approved"] {
        --cmm-accent: #10b981;
    }

    .cmm-card[data-status="rejected"] {
        --cmm-accent: #ef4444;
    }

.cmm-card__head {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.cmm-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--cmm-accent, var(--color-primary)), color-mix(in srgb, var(--cmm-accent, var(--color-secondary)) 50%, var(--color-secondary)));
    flex: 0 0 44px;
    border: 2px solid color-mix(in srgb, var(--cmm-accent) 30%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cmm-accent) 30%, transparent);
}

.cmm-id {
    flex: 1 1 auto;
    min-width: 0;
}

.cmm-name {
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmm-sub {
    font-size: .73rem;
    color: var(--color-text-muted);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    align-items: center;
}

.cmm-sub__date {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .cmm-sub__date svg {
        width: 12px;
        height: 12px;
    }

.cmm-sub__dot {
    opacity: .5;
}

.cmm-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.cmm-star {
    color: rgba(148,163,184,.35);
}

    .cmm-star.is-on {
        color: #f59e0b;
        filter: drop-shadow(0 0 4px rgba(245,158,11,.45));
    }

.cmm-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cmm-status--pending {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #f59e0b;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
}

.cmm-status--approved {
    background: color-mix(in srgb, #10b981 16%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
}

.cmm-status--rejected {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #ef4444;
    border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
}

.cmm-status svg {
    width: 12px;
    height: 12px;
}

.cmm-text {
    font-size: .9rem;
    line-height: 1.85;
    color: var(--color-text);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: .75rem .9rem .8rem 1.7rem;
    position: relative;
}

    .cmm-text::before {
        content: '”';
        position: absolute;
        top: -8px;
        right: 10px;
        font-size: 2.4rem;
        font-weight: 900;
        color: var(--cmm-accent, var(--color-primary));
        opacity: .35;
        line-height: 1;
    }

.cmm-reject {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .6rem .8rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #ef4444 9%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 32%, transparent);
    color: #ef4444;
    font-size: .82rem;
    line-height: 1.6;
}

    .cmm-reject svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin-top: 3px;
    }

    .cmm-reject b {
        display: block;
        margin-bottom: 2px;
        font-weight: 800;
    }

.cmm-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 2px;
}

.cmm-btn {
    flex: 1 1 0;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem .95rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

    .cmm-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .cmm-btn svg {
        width: 14px;
        height: 14px;
    }

.cmm-btn--approve {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16,185,129,.35);
}

    .cmm-btn--approve:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(16,185,129,.5);
    }

.cmm-btn--reject {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.5);
}

    .cmm-btn--reject:hover:not(:disabled) {
        background: rgba(239,68,68,.16);
        transform: translateY(-1px);
    }

/* states */
.cmm-loader, .cmm-empty {
    text-align: center;
    padding: 2.4rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

    .cmm-loader svg, .cmm-empty svg {
        width: 40px;
        height: 40px;
        margin-bottom: .6rem;
        opacity: .6;
    }

.cmm-loader__sp {
    animation: cmm-spin .9s linear infinite;
}

.cmm-empty__title {
    font-weight: 800;
    font-size: .98rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

[data-theme="dark"] .cmm-card {
    background: rgba(15,23,42,.85);
}

[data-theme="dark"] .cmm-search {
    background: rgba(15,23,42,.85);
}

[data-theme="dark"] .cmm-text {
    background: rgba(15,23,42,.55);
}

[data-theme="dark"] .cmm-loader, [data-theme="dark"] .cmm-empty {
    background: rgba(15,23,42,.85);
}

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

@keyframes cmm-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 480px) {
    .cmm-root {
        padding: .85rem .65rem 5rem;
    }

    .cmm-hero {
        padding: .9rem .95rem 1rem;
        border-radius: var(--radius-lg);
    }

    .cmm-actions .cmm-btn {
        min-width: 0;
        flex: 1 1 calc(50% - .25rem);
        font-size: .8rem;
        padding: .55rem .65rem;
    }

    .cmm-card__head {
        flex-wrap: wrap;
    }

    .cmm-status {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmm-card, .cmm-btn, .cmm-tile {
        transition: none;
        animation: none;
    }
}




.skeleton-card {
    background: var(--surface-color, #1e1e1e);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #333;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.skeleton-line {
    height: 12px;
    background: #333;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

    .skeleton-line.short {
        width: 30%;
    }

    .skeleton-line.mini {
        width: 15%;
    }

    .skeleton-line.long {
        width: 100%;
    }

.skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.skeleton-btn {
    height: 36px;
    width: 100px;
    background: #333;
    border-radius: 8px;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}
/* #endregion  admin comments */

/* #region  admin panel */
/* ===== Layout shell ===== */
.adm2-root {
    min-height: 100vh;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
    direction: rtl;
}

.adm2-shell {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== Hero (profile + greeting + stat strip) ===== */
.adm2-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.1rem 1.2rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(168,85,247,.55), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(34,211,238,.55), transparent 70%), linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    box-shadow: var(--shadow-strong);
}

    .adm2-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.adm2-hero__top {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.adm2-hero__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 56px;
    border: 2px solid rgba(255,255,255,.35);
    box-shadow: 0 0 0 3px rgba(34,211,238,.22);
    background: rgba(255,255,255,.08);
}

    .adm2-hero__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.adm2-hero__id {
    flex: 1 1 auto;
    min-width: 0;
}

.adm2-hero__name {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm2-hero__role {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 800;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
}

.adm2-hero__greeting {
    margin-top: .9rem;
    font-size: .86rem;
    opacity: .9;
    line-height: 1.55;
}

/* Stat strip */
.adm2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.adm2-stat {
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
}

.adm2-stat__num {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
}

.adm2-stat__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

@media (max-width: 420px) {
    .adm2-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: .45rem;
    }
}

/* ===== Section heads ===== */
.adm2-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 .25rem;
    margin: .35rem 0 -.25rem;
}

.adm2-sec-head__bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}

.adm2-sec-head__title {
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
}

.adm2-sec-head__hint {
    margin-inline-start: auto;
    font-size: .72rem;
    color: var(--color-text-muted);
}

/* ===== Quick actions ===== */
.adm2-quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

.adm2-quick__btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .9rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    cursor: pointer;
    color: var(--color-text);
    font-weight: 700;
    font-size: .9rem;
    text-align: right;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

    .adm2-quick__btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft);
        border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-soft));
    }

    .adm2-quick__btn:active {
        transform: scale(.97);
    }

.adm2-quick__ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary-soft), color-mix(in srgb, var(--color-secondary) 18%, transparent));
    color: var(--color-primary);
    flex: 0 0 38px;
}

    .adm2-quick__ico svg {
        width: 18px;
        height: 18px;
    }

/* ===== Module grid ===== */
.adm2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}

@media (min-width: 640px) {
    .adm2-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .9rem;
    }
}

@media (min-width: 900px) {
    .adm2-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.adm2-mod {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem .9rem 1.05rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
    cursor: pointer;
    text-align: right;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 138px;
    animation: adm2-fade-up .35s ease both;
}

    .adm2-mod:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-strong);
        border-color: color-mix(in srgb, var(--mod-color, var(--color-primary)) 55%, var(--color-border-soft));
    }

    .adm2-mod:active {
        transform: scale(.985);
    }

    .adm2-mod::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(140px 90px at 100% 0%, color-mix(in srgb, var(--mod-color, var(--color-primary)) 26%, transparent), transparent 70%);
        pointer-events: none;
        z-index: -1;
    }

.adm2-mod__bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 40%;
    background: linear-gradient(180deg, var(--mod-color, var(--color-primary)), transparent);
    border-radius: 0 0 0 4px;
}

.adm2-mod__ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mod-color, var(--color-primary));
    background: color-mix(in srgb, var(--mod-color, var(--color-primary)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mod-color, var(--color-primary)) 32%, transparent);
}

    .adm2-mod__ico svg {
        width: 22px;
        height: 22px;
    }

.adm2-mod__title {
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.25;
}

.adm2-mod__sub {
    font-size: .76rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.adm2-mod__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .45rem;
}

.adm2-mod__count {
    font-weight: 900;
    color: var(--mod-color, var(--color-primary));
    font-size: .92rem;
}

.adm2-mod__arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.adm2-mod:hover .adm2-mod__arrow {
    transform: translateX(-3px);
    background: var(--mod-color, var(--color-primary));
    color: #fff;
    border-color: transparent;
}

.adm2-mod__arrow svg {
    width: 12px;
    height: 12px;
}

/* per-module accent colors */
.adm2-mod--slides {
    --mod-color: #06b6d4;
}

.adm2-mod--blogs {
    --mod-color: #ec4899;
}

.adm2-mod--comments {
    --mod-color: #f59e0b;
}

.adm2-mod--preds {
    --mod-color: #10b981;
}

.adm2-mod--menu {
    --mod-color: #f97316;
}

.adm2-mod--users {
    --mod-color: #6366f1;
}

.adm2-mod--tour {
    --mod-color: #a855f7;
}

.adm2-mod--banned {
    --mod-color: #ef4444;
}

[data-theme="dark"] .adm2-mod {
    background: rgba(15,23,42,.85);
}

[data-theme="dark"] .adm2-quick__btn {
    background: rgba(15,23,42,.85);
}

/* loading shimmer for stat numbers */
.adm2-stat__num.is-loading,
.adm2-mod__count.is-loading {
    display: inline-block;
    min-width: 1.2em;
    background: linear-gradient(90deg, rgba(255,255,255,.18) 25%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.18) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    color: transparent !important;
    animation: adm2-shimmer 1.1s linear infinite;
}

.adm2-mod__count.is-loading {
    background: linear-gradient(90deg, var(--color-surface-soft) 25%, color-mix(in srgb, var(--mod-color, var(--color-primary)) 18%, transparent) 50%, var(--color-surface-soft) 75%);
    background-size: 200% 100%;
}

@keyframes adm2-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* entrance stagger */
.adm2-grid > *:nth-child(1) {
    animation-delay: 0s;
}

.adm2-grid > *:nth-child(2) {
    animation-delay: .04s;
}

.adm2-grid > *:nth-child(3) {
    animation-delay: .08s;
}

.adm2-grid > *:nth-child(4) {
    animation-delay: .12s;
}

.adm2-grid > *:nth-child(5) {
    animation-delay: .16s;
}

.adm2-grid > *:nth-child(6) {
    animation-delay: .20s;
}

.adm2-grid > *:nth-child(7) {
    animation-delay: .24s;
}

.adm2-grid > *:nth-child(8) {
    animation-delay: .28s;
}

@keyframes adm2-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Mobile fine-tune */
@media (max-width: 480px) {
    .adm2-root {
        padding: .85rem .7rem 5rem;
    }

    .adm2-hero {
        padding: 1rem;
        border-radius: var(--radius-lg);
    }

    .adm2-hero__name {
        font-size: 1rem;
    }

    .adm2-mod {
        padding: .9rem .8rem .95rem;
        min-height: 128px;
    }

    .adm2-mod__ico {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

        .adm2-mod__ico svg {
            width: 20px;
            height: 20px;
        }

    .adm2-mod__title {
        font-size: .9rem;
    }

    .adm2-quick {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adm2-mod, .adm2-quick__btn {
        transition: none;
        animation: none;
    }

    .adm2-stat__num.is-loading, .adm2-mod__count.is-loading {
        animation: none;
    }
}

/* #endregion admin panel */

/* #region Admin Wheel panel */
.wha-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 6rem;
    display: flex;
    justify-content: center;
}

.wha-shell {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ───── HERO ───── */
.wha-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(168,85,247,.55), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(34,211,238,.55), transparent 70%), linear-gradient(135deg, #0f172a 0%, #4c1d95 55%, #831843 100%);
    box-shadow: var(--shadow-strong);
}

    .wha-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.wha-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.wha-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s ease, transform .15s ease;
}

    .wha-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .wha-hero__btn svg {
        width: 16px;
        height: 16px;
    }

.wha-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.wha-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .wha-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.wha-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.wha-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

/* wheel selector tabs */
.wha-wheels-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.wha-wheel-tab {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .wha-wheel-tab:hover {
        background: rgba(255,255,255,.18);
        transform: translateY(-1px);
    }

    .wha-wheel-tab.is-active {
        background: rgba(255,255,255,.95);
        color: #0f172a;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
    }

.wha-wheel-tab__chip {
    font-size: .68rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
}

.wha-wheel-tab.is-active .wha-wheel-tab__chip {
    background: rgba(15,23,42,.1);
    border-color: rgba(15,23,42,.18);
}

.wha-wheel-tab--add {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(236,72,153,.35);
}

    .wha-wheel-tab--add:hover {
        background: linear-gradient(135deg, #fbbf24, #f472b6);
    }

/* ───── SECTIONS (cards) ───── */
.wha-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.05rem 1.1rem;
}

[data-theme="dark"] .wha-section {
    background: rgba(15,23,42,.85);
}

.wha-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
}

.wha-sec-head__bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}

.wha-sec-head__title {
    font-weight: 800;
    font-size: .98rem;
    color: var(--color-text);
}

.wha-sec-head__hint {
    margin-inline-start: auto;
    font-size: .72rem;
    color: var(--color-text-muted);
}

/* ───── PREVIEW + spin ───── */
.wha-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 880px) {
    .wha-stage {
        grid-template-columns: 360px 1fr;
    }
}

.wha-preview {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: radial-gradient(420px 220px at 50% 0%, rgba(168,85,247,.18), transparent 70%), radial-gradient(380px 220px at 50% 100%, rgba(34,211,238,.14), transparent 70%), #0b1228;
    color: #fff;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,.4);
}

.wha-preview__stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,.5), transparent);
    opacity: .6;
    pointer-events: none;
}

.wha-wheel-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 320px;
    margin: .25rem auto .6rem;
}

.wha-wheel-svg {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transition: transform 4.6s cubic-bezier(.17, .67, .32, 1.05);
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}

.wha-wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid #ef4444;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
    z-index: 5;
}

.wha-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #d1d5db 50%, #6b7280);
    box-shadow: 0 0 0 4px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.4);
    z-index: 4;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #4c1d95;
    font-size: 1.05rem;
}

.wha-spin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: .95rem;
    border: 0;
    background: linear-gradient(135deg, #f59e0b, #ec4899, #a855f7);
    background-size: 200% 200%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(236,72,153,.4);
    animation: wha-shimmer 3s ease infinite;
    transition: transform .15s ease, opacity .15s ease;
}

    .wha-spin-btn:hover {
        transform: translateY(-2px);
    }

    .wha-spin-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        animation: none;
    }

    .wha-spin-btn svg {
        width: 18px;
        height: 18px;
    }

@keyframes wha-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.wha-winner {
    margin-top: .75rem;
    padding: .6rem .85rem;
    border-radius: var(--radius-md);
    background: rgba(16,185,129,.16);
    border: 1px solid rgba(16,185,129,.4);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    text-align: center;
    animation: wha-pop .35s ease both;
}

@keyframes wha-pop {
    from {
        transform: scale(.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* probability sum bar */
.wha-prob-sum {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
}

.wha-prob-sum__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .wha-prob-sum__row b {
        font-weight: 900;
        font-size: .95rem;
    }

.wha-prob-sum__bar {
    height: 8px;
    border-radius: 99px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
    position: relative;
}

.wha-prob-sum__fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    transition: width .25s ease;
}

.wha-prob-sum.is-off .wha-prob-sum__fill {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.wha-prob-sum.is-off {
    color: #fca5a5;
}

/* ───── WHEEL SETTINGS ───── */
.wha-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
}

@media (min-width: 640px) {
    .wha-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .wha-grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.wha-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.wha-field__lbl {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.wha-input, .wha-select, .wha-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font: inherit;
    font-size: .88rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .wha-input:focus, .wha-select:focus, .wha-textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.wha-textarea {
    resize: vertical;
    min-height: 64px;
}

/* switch */
.wha-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 700;
}

    .wha-switch input {
        display: none;
    }

.wha-switch__track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    position: relative;
    transition: background-color .2s ease, border-color .2s ease;
}

    .wha-switch__track::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

.wha-switch input:checked + .wha-switch__track {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
}

    .wha-switch input:checked + .wha-switch__track::after {
        transform: translateX(-16px);
    }

/* promo codes */
.wha-codes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .4rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-soft);
    background: var(--color-surface-soft);
    min-height: 44px;
}

.wha-code-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem .25rem .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 800;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.wha-code-chip__x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.1);
    cursor: pointer;
    border: 0;
    color: inherit;
    font-size: 11px;
    line-height: 1;
}

    .wha-code-chip__x:hover {
        background: rgba(0,0,0,.2);
    }

.wha-code-row {
    display: flex;
    gap: .4rem;
}

    .wha-code-row .wha-input {
        font-family: ui-monospace, monospace;
        text-transform: uppercase;
    }

/* ───── ITEM CARDS ───── */
.wha-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}

@media (min-width: 760px) {
    .wha-items {
        grid-template-columns: 1fr 1fr;
    }
}

.wha-item {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: .85rem .9rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .wha-item::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 5px;
        background: var(--wha-color, var(--color-primary));
    }

    .wha-item:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-soft);
        border-color: color-mix(in srgb, var(--wha-color) 40%, var(--color-border-soft));
    }

[data-theme="dark"] .wha-item {
    background: rgba(15,23,42,.55);
}

.wha-item__head {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.wha-item__swatch {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--wha-color, #999);
    border: 2px solid rgba(255,255,255,.6);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wha-color) 50%, transparent);
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 40px;
}

    .wha-item__swatch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wha-item__swatch input[type="color"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

.wha-item__title-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--color-text);
    font: inherit;
    font-size: .98rem;
    font-weight: 800;
    padding: .2rem .1rem;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s ease;
}

    .wha-item__title-input:focus {
        border-bottom-color: var(--wha-color, var(--color-primary));
    }

.wha-item__del {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: #ef4444;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    flex: 0 0 30px;
}

    .wha-item__del:hover {
        background: rgba(239,68,68,.15);
        border-color: rgba(239,68,68,.45);
    }

    .wha-item__del svg {
        width: 14px;
        height: 14px;
    }

.wha-item__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.wha-item__row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.wha-item__field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.wha-item__field-lbl {
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.wha-item__field-in {
    width: 100%;
    box-sizing: border-box;
    padding: .4rem .55rem;
    border-radius: 8px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: .82rem;
}

[data-theme="dark"] .wha-item__field-in {
    background: rgba(15,23,42,.7);
}

.wha-item__field-in:focus {
    outline: none;
    border-color: var(--wha-color, var(--color-primary));
}

.wha-item__prob {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wha-item__prob-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.wha-item__prob-val {
    color: var(--wha-color, var(--color-primary));
    font-weight: 900;
    font-size: .85rem;
}

.wha-item__prob input[type="range"] {
    width: 100%;
    accent-color: var(--wha-color, var(--color-primary));
}

.wha-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .9rem;
}

.wha-add-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 6px 18px rgba(34,211,238,.3);
    transition: transform .15s ease;
}

    .wha-add-item:hover {
        transform: translateY(-1px);
    }

    .wha-add-item svg {
        width: 14px;
        height: 14px;
    }

/* sticky save bar */
.wha-savebar {
    position: sticky;
    bottom: .6rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    border: 1px solid rgba(168,85,247,.4);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    color: #fff;
    animation: wha-rise .25s ease both;
}

.wha-savebar__msg {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 700;
}

.wha-savebar__btn {
    padding: .45rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 6px 16px rgba(16,185,129,.45);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .wha-savebar__btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .wha-savebar__btn svg {
        width: 13px;
        height: 13px;
    }

.wha-savebar__discard {
    background: transparent;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.25);
    padding: .4rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .8rem;
}

    .wha-savebar__discard:hover {
        background: rgba(255,255,255,.08);
    }

@keyframes wha-rise {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

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

/* empty wheel */
.wha-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
}

    .wha-empty svg {
        width: 42px;
        height: 42px;
        opacity: .55;
        margin-bottom: .55rem;
    }

.wha-empty__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .98rem;
    margin-bottom: 4px;
}

.wha-icon-thumb {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
    background: rgba(255,255,255,.05);
}

.wha-icon-row {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .wha-icon-row .wha-item__field-in {
        flex: 1 1 auto;
    }

@media (max-width: 480px) {
    .wha-root {
        padding: .85rem .65rem 6rem;
    }

    .wha-hero {
        padding: .9rem .95rem 1rem;
        border-radius: var(--radius-lg);
    }

    .wha-section {
        padding: .9rem .85rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wha-wheel-svg {
        transition: none !important;
    }

    .wha-spin-btn {
        animation: none;
    }
}
/* #endregion  Admin Wheel panel */

/* #region  Admin Predictions */
.mtc-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
}

.mtc-shell {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HERO */
.mtc-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(34,211,238,.5), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(99,102,241,.55), transparent 70%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #064e3b 100%);
    box-shadow: var(--shadow-strong);
}

    .mtc-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.mtc-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.mtc-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s, transform .15s;
}

    .mtc-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .mtc-hero__btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .mtc-hero__btn svg {
        width: 16px;
        height: 16px;
    }

    .mtc-hero__btn.is-busy svg {
        animation: mtc-spin .9s linear infinite;
    }

.mtc-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.mtc-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .mtc-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.mtc-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.mtc-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

/* Filter tiles */
.mtc-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.mtc-tile {
    cursor: pointer;
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: transform .15s, background-color .15s;
    user-select: none;
}

    .mtc-tile:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.16);
    }

    .mtc-tile.is-active {
        background: rgba(255,255,255,.94);
        color: #0f172a;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        transform: translateY(-2px);
    }

.mtc-tile__num {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.mtc-tile__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

.mtc-tile.is-active .mtc-tile__lbl {
    opacity: .65;
}

@media (max-width: 420px) {
    .mtc-tiles {
        grid-template-columns: repeat(2,1fr);
        gap: .45rem;
    }
}

/* CREATE EXPANDER */
.mtc-create-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

[data-theme="dark"] .mtc-create-card {
    background: rgba(15,23,42,.85);
}

.mtc-create-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s;
}

    .mtc-create-head:hover {
        background: var(--color-surface-soft);
    }

.mtc-create-head__ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 10px rgba(16,185,129,.35);
}

    .mtc-create-head__ico svg {
        width: 16px;
        height: 16px;
    }

.mtc-create-head__title {
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
    flex: 1;
}

.mtc-create-head__chev {
    color: var(--color-text-muted);
    transition: transform .25s ease;
}

    .mtc-create-head__chev svg {
        width: 14px;
        height: 14px;
        display: block;
    }

.mtc-create-head.is-open .mtc-create-head__chev {
    transform: rotate(180deg);
}

.mtc-create-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 1rem;
}

    .mtc-create-body.is-open {
        max-height: 1200px;
        padding: .25rem 1rem 1.05rem;
    }

/* FORM */
.mtc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}

@media (min-width: 640px) {
    .mtc-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .mtc-grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.mtc-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.mtc-field__lbl {
    font-size: .76rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.mtc-input, .mtc-select {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font: inherit;
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
}

    .mtc-input:focus, .mtc-select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

    .mtc-input[readonly] {
        cursor: pointer;
    }

.mtc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .25rem;
}

.mtc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, box-shadow .12s, background-color .12s;
}

    .mtc-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .mtc-btn svg {
        width: 14px;
        height: 14px;
    }

.mtc-btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 6px 16px var(--color-primary-soft);
}

    .mtc-btn--primary:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.mtc-btn--success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16,185,129,.35);
}

    .mtc-btn--success:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.mtc-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-soft);
}

    .mtc-btn--ghost:hover:not(:disabled) {
        background: var(--color-surface-soft);
    }

.mtc-btn--danger {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.5);
}

    .mtc-btn--danger:hover:not(:disabled) {
        background: rgba(239,68,68,.16);
    }

/* LIST */
.mtc-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.mtc-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: .95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: mtc-fade .35s ease both;
}

[data-theme="dark"] .mtc-card {
    background: rgba(15,23,42,.85);
}

.mtc-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-strong);
}

.mtc-card::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mtc-accent, var(--color-primary)), transparent);
}

.mtc-card[data-status="upcoming"] {
    --mtc-accent: #3b82f6;
}

.mtc-card[data-status="running"] {
    --mtc-accent: #10b981;
}

.mtc-card[data-status="finished"] {
    --mtc-accent: #94a3b8;
}

.mtc-card.is-editing {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border-soft));
}

/* Team-vs-Team display */
.mtc-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
}

.mtc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    text-align: center;
    padding: .4rem .25rem;
    border-radius: var(--radius-md);
}

.mtc-team__flag {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-soft);
    border: 2px solid var(--color-border-soft);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.mtc-team__name {
    font-weight: 800;
    font-size: .88rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mtc-vs {
    min-width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: .55rem .65rem;
    border-radius: 14px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
}

.mtc-vs__lbl {
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.mtc-vs__score {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-text);
    font-feature-settings: "tnum";
    line-height: 1;
}

    .mtc-vs__score span {
        color: var(--mtc-accent, var(--color-primary));
    }

.mtc-vs__sep {
    color: var(--color-text-muted);
    margin: 0 .15rem;
}

.mtc-vs__vs {
    font-weight: 900;
    opacity: .55;
    font-size: .95rem;
    letter-spacing: 1px;
}

/* badges row */
.mtc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mtc-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

    .mtc-badge svg {
        width: 11px;
        height: 11px;
    }

.mtc-badge--upcoming {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
    color: #3b82f6;
    border: 1px solid color-mix(in srgb, #3b82f6 45%, transparent);
}

.mtc-badge--running {
    background: color-mix(in srgb, #10b981 16%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
}

.mtc-badge--finished {
    background: color-mix(in srgb, #94a3b8 18%, transparent);
    color: var(--color-text-muted);
    border: 1px solid color-mix(in srgb, #94a3b8 45%, transparent);
}

.mtc-badge--mult {
    background: color-mix(in srgb, #a855f7 14%, transparent);
    color: #a855f7;
    border: 1px solid color-mix(in srgb, #a855f7 40%, transparent);
}

.mtc-badge--type {
    background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
    color: var(--color-secondary);
    border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
}

/* meta */
.mtc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .76rem;
    color: var(--color-text-muted);
}

    .mtc-meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .mtc-meta svg {
        width: 12px;
        height: 12px;
    }

.mtc-edit-panel {
    margin-top: .35rem;
    padding: .85rem .9rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, var(--color-border-soft));
    animation: mtc-fade .25s ease both;
}

.mtc-edit-panel__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: .7rem;
}

    .mtc-edit-panel__title svg {
        width: 14px;
        height: 14px;
    }

.mtc-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.mtc-score-box {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
    padding: .75rem .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

    .mtc-score-box label {
        font-size: .78rem;
        font-weight: 700;
        color: var(--color-text-muted);
        text-align: center;
    }

.mtc-score-input {
    width: 90px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    padding: .35rem .25rem;
    border-radius: 12px;
    border: 2px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-feature-settings: "tnum";
}

    .mtc-score-input:focus {
        outline: none;
        border-color: var(--color-primary);
    }

.mtc-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .15rem;
}

    .mtc-card-actions .mtc-btn {
        flex: 1 1 auto;
        min-width: 110px;
    }

/* states */
.mtc-loader, .mtc-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

[data-theme="dark"] .mtc-loader, [data-theme="dark"] .mtc-empty {
    background: rgba(15,23,42,.85);
}

.mtc-loader svg, .mtc-empty svg {
    width: 38px;
    height: 38px;
    opacity: .55;
    margin-bottom: .55rem;
}

.mtc-loader__sp {
    animation: mtc-spin .9s linear infinite;
}

.mtc-empty__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .95rem;
    margin-bottom: 4px;
}

.mtc-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: .85rem;
}

    .mtc-loadmore svg {
        width: 18px;
        height: 18px;
        animation: mtc-spin .9s linear infinite;
    }

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

@keyframes mtc-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 540px) {
    .mtc-match {
        grid-template-columns: 1fr auto 1fr;
        gap: .35rem;
    }

    .mtc-team__flag {
        width: 46px;
        height: 46px;
    }

    .mtc-team__name {
        font-size: .8rem;
    }

    .mtc-vs {
        min-width: 72px;
        padding: .45rem .5rem;
    }

    .mtc-vs__score {
        font-size: 1.2rem;
    }

    .mtc-card-actions .mtc-btn {
        min-width: 0;
        flex: 1 1 calc(50% - .25rem);
        font-size: .8rem;
        padding: .5rem .65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mtc-card, .mtc-btn, .mtc-tile {
        transition: none;
        animation: none;
    }
}
/* #endregion  Admin Predictions */

/* #region Admin Blogs */
.blg-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
}

.blg-shell {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HERO */
.blg-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(244,114,182,.5), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(34,211,238,.5), transparent 70%), linear-gradient(135deg, #0f172a 0%, #0c4a6e 55%, #831843 100%);
    box-shadow: var(--shadow-strong);
}

    .blg-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.blg-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.blg-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s, transform .15s;
}

    .blg-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .blg-hero__btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .blg-hero__btn svg {
        width: 16px;
        height: 16px;
    }

    .blg-hero__btn.is-busy svg {
        animation: blg-spin .9s linear infinite;
    }

.blg-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.blg-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .blg-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.blg-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.blg-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

.blg-hero__new {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 6px 18px rgba(236,72,153,.35);
    transition: transform .15s;
    white-space: nowrap;
}

    .blg-hero__new:hover {
        transform: translateY(-1px);
    }

    .blg-hero__new svg {
        width: 14px;
        height: 14px;
    }

/* Stat tiles (filters) */
.blg-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.blg-tile {
    cursor: pointer;
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: transform .15s, background-color .15s;
    user-select: none;
}

    .blg-tile:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.16);
    }

    .blg-tile.is-active {
        background: rgba(255,255,255,.94);
        color: #0f172a;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        transform: translateY(-2px);
    }

.blg-tile__num {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.blg-tile__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

.blg-tile.is-active .blg-tile__lbl {
    opacity: .65;
}

@media (max-width: 420px) {
    .blg-tiles {
        grid-template-columns: repeat(2,1fr);
        gap: .45rem;
    }
}

/* Search */
.blg-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}

    .blg-search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

    .blg-search svg {
        width: 16px;
        height: 16px;
        color: var(--color-text-muted);
        flex: 0 0 16px;
    }

    .blg-search input {
        flex: 1 1 auto;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--color-text);
        font: inherit;
        padding: .15rem 0;
    }

        .blg-search input::placeholder {
            color: var(--color-text-muted);
        }

/* List */
.blg-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
}

@media (min-width: 720px) {
    .blg-list {
        grid-template-columns: 1fr 1fr;
    }
}

.blg-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: blg-fade .35s ease both;
}

[data-theme="dark"] .blg-card {
    background: rgba(15,23,42,.85);
}

.blg-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border-soft));
}

.blg-card.is-deleted {
    opacity: .55;
    filter: saturate(.6);
}

.blg-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    overflow: hidden;
    cursor: pointer;
}

.blg-cover__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.55);
    background: linear-gradient(135deg, #0c4a6e, #831843);
}

    .blg-cover__empty svg {
        width: 38px;
        height: 38px;
        opacity: .65;
    }

.blg-cover__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .85rem .9rem .65rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blg-cover__title {
    font-weight: 900;
    font-size: .98rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.blg-cover__sub {
    font-size: .76rem;
    opacity: .82;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.blg-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .68rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .blg-status svg {
        width: 11px;
        height: 11px;
    }

.blg-status--pub {
    background: rgba(16,185,129,.75);
    color: #fff;
}

.blg-status--draft {
    background: rgba(245,158,11,.8);
    color: #fff;
}

.blg-status--del {
    background: rgba(239,68,68,.8);
    color: #fff;
}

.blg-views {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: .68rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .blg-views svg {
        width: 11px;
        height: 11px;
    }

.blg-body {
    padding: .8rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}

.blg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    font-size: .73rem;
    color: var(--color-text-muted);
}

    .blg-meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .blg-meta svg {
        width: 12px;
        height: 12px;
    }

.blg-meta__slug {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    direction: ltr;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: auto;
    padding-top: .25rem;
}

.blg-btn {
    flex: 1 1 0;
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .45rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, background-color .12s;
}

    .blg-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .blg-btn svg {
        width: 12px;
        height: 12px;
    }

.blg-btn--edit {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 5px 14px var(--color-primary-soft);
}

    .blg-btn--edit:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.blg-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-soft);
}

    .blg-btn--ghost:hover:not(:disabled) {
        background: var(--color-surface-soft);
    }

.blg-btn--danger {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.5);
}

    .blg-btn--danger:hover:not(:disabled) {
        background: rgba(239,68,68,.16);
    }

/* states */
.blg-loader, .blg-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    grid-column: 1 / -1;
}

[data-theme="dark"] .blg-loader, [data-theme="dark"] .blg-empty {
    background: rgba(15,23,42,.85);
}

.blg-loader svg, .blg-empty svg {
    width: 38px;
    height: 38px;
    opacity: .55;
    margin-bottom: .55rem;
}

.blg-loader__sp {
    animation: blg-spin .9s linear infinite;
}

.blg-empty__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .95rem;
    margin-bottom: 4px;
}

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

@keyframes blg-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blg-card {
        transition: none;
        animation: none;
    }
}




.skeleton-card {
    background: var(--surface-color, #1e1e1e); /* رنگ پس‌زمینه کارتت را تنظیم کن */
    border-radius: 12px;
    overflow: hidden;
}

.skeleton-cover {
    height: 180px;
    background: #333; /* رنگ خاکستری تیره برای تم دارک */
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-line {
    height: 14px;
    background: #333;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
}

    .skeleton-line.short {
        width: 40%;
    }

    .skeleton-line.long {
        width: 80%;
    }

.skeleton-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.skeleton-btn {
    height: 36px;
    width: 80px;
    background: #333;
    border-radius: 8px;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* #endregion Admin Blogs */

/* #region Admin Blog Edit */
.bed-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 6rem;
    display: flex;
    justify-content: center;
}

.bed-shell {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HERO */
.bed-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: .85rem 1.05rem;
    color: #fff;
    background: radial-gradient(420px 200px at 92% -40%, rgba(168,85,247,.5), transparent 65%), radial-gradient(360px 180px at -10% 110%, rgba(34,211,238,.5), transparent 70%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #4c1d95 100%);
    box-shadow: var(--shadow-strong);
    display: flex;
    align-items: center;
    gap: .65rem;
}

.bed-hero__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 36px;
    transition: background-color .15s;
}

    .bed-hero__btn:hover {
        background: rgba(255,255,255,.22);
    }

    .bed-hero__btn svg {
        width: 14px;
        height: 14px;
    }

.bed-hero__id {
    flex: 1 1 auto;
    min-width: 0;
}

.bed-hero__title {
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.2;
}

.bed-hero__sub {
    font-size: .73rem;
    opacity: .85;
    margin-top: 2px;
}

.bed-hero__chip {
    font-size: .68rem;
    font-weight: 800;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
}

    .bed-hero__chip.is-pub {
        background: rgba(16,185,129,.7);
        border-color: transparent;
    }

    .bed-hero__chip.is-draft {
        background: rgba(245,158,11,.7);
        border-color: transparent;
    }

/* Mobile tab switcher */
.bed-tabs {
    display: none;
    padding: 4px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
}

.bed-tab {
    flex: 1;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .85rem;
    color: var(--color-text-muted);
    transition: background-color .15s, color .15s;
}

    .bed-tab.is-active {
        background: var(--color-surface);
        color: var(--color-primary);
        box-shadow: var(--shadow-soft);
    }

@media (max-width: 1023px) {
    .bed-tabs {
        display: flex;
    }
}

/* Stage */
.bed-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .bed-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .bed-pane {
        display: none;
    }

        .bed-pane.is-active {
            display: flex;
        }
}

.bed-pane {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 0;
}

/* Section card */
.bed-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.05rem 1.1rem;
}

[data-theme="dark"] .bed-section {
    background: rgba(15,23,42,.85);
}

.bed-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .85rem;
}

.bed-sec-head__bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}

.bed-sec-head__title {
    font-weight: 800;
    font-size: .98rem;
    color: var(--color-text);
    flex: 1;
}

.bed-sec-head__chip {
    font-size: .72rem;
    color: var(--color-text-muted);
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
}

/* Form fields */
.bed-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .85rem;
}

    .bed-field:last-child {
        margin-bottom: 0;
    }

.bed-field__lbl {
    font-size: .76rem;
    font-weight: 800;
    color: var(--color-text-muted);
    display: flex;
    gap: .35rem;
    align-items: center;
}

.bed-field__hint {
    margin-inline-start: auto;
    font-weight: 600;
    opacity: .8;
    font-size: .7rem;
}

.bed-input, .bed-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font: inherit;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.55;
}


.bed-input--big {
    font-size: 1.2rem;
    font-weight: 800;
    padding: .8rem 1rem;
}

.bed-input:focus, .bed-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.bed-input--mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    direction: ltr;
    text-align: left;
}

.bed-textarea {
    min-height: 360px;
    resize: vertical;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    line-height: 1.65;
    font-size: .88rem;
}

.bed-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

@media (max-width: 600px) {
    .bed-row {
        grid-template-columns: 1fr;
    }
}

/* image preview */
.bed-img {
    width: 100%;
    aspect-ratio: 16/9;
    margin-top: .45rem;
    border-radius: var(--radius-md);
    background-color: #0b1228;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--color-border-soft);
    position: relative;
    overflow: hidden;
}

.bed-img__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.55);
    background: linear-gradient(135deg, #1e293b, #4c1d95);
    font-size: .82rem;
}

    .bed-img__empty svg {
        width: 36px;
        height: 36px;
        opacity: .55;
        margin-bottom: .4rem;
    }

/* switch */
.bed-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
}

    .bed-switch input {
        display: none;
    }

.bed-switch__track {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    position: relative;
    transition: background-color .2s, border-color .2s;
}

    .bed-switch__track::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

.bed-switch input:checked + .bed-switch__track {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}

    .bed-switch input:checked + .bed-switch__track::after {
        transform: translateX(-18px);
    }

/* content toolbar */
.bed-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .35rem;
    margin-bottom: .35rem;
    background: var(--color-surface-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
}

.bed-tbtn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .65rem;
    border-radius: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: .76rem;
    font-weight: 800;
    transition: background-color .12s, color .12s;
}

    .bed-tbtn:hover {
        background: var(--color-surface);
        color: var(--color-text);
    }

    .bed-tbtn svg {
        width: 12px;
        height: 12px;
    }

/* word stats */
.bed-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
}

.bed-stat {
    text-align: center;
    padding: .55rem .35rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
}

.bed-stat__num {
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.bed-stat__lbl {
    font-size: .65rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ── PREVIEW PANE (Magazine-style) ── */
.bed-prev-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

[data-theme="dark"] .bed-prev-card {
    background: rgba(15,23,42,.85);
}

.bed-prev-cover {
    width: 100%;
    aspect-ratio: 21/9;
    background-size: cover;
    background-position: center;
    background-color: #0b1228;
    position: relative;
}

.bed-prev-cover__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.55);
    background: linear-gradient(135deg, #1e3a8a, #831843);
}

    .bed-prev-cover__empty svg {
        width: 46px;
        height: 46px;
        opacity: .55;
    }

.bed-prev-body {
    padding: 1.4rem 1.5rem 1.6rem;
}

@media (max-width: 480px) {
    .bed-prev-body {
        padding: 1.1rem 1.1rem 1.2rem;
    }
}

.bed-prev-title {
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.35;
    color: var(--color-text);
    margin: 0 0 .55rem;
    letter-spacing: -.01em;
}

.bed-prev-sub {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0 0 1.1rem;
    font-weight: 500;
}

.bed-prev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .82rem;
    color: var(--color-text-muted);
    padding: .65rem 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: 1.2rem;
}

    .bed-prev-meta span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    .bed-prev-meta svg {
        width: 13px;
        height: 13px;
    }

.bed-prev-readtime {
    color: var(--color-primary);
    font-weight: 800;
}

/* rendered content */
.bed-prev-content {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--color-text);
    word-break: break-word;
}

    .bed-prev-content :first-child {
        margin-top: 0;
    }

    .bed-prev-content :last-child {
        margin-bottom: 0;
    }

    .bed-prev-content h1, .bed-prev-content h2, .bed-prev-content h3 {
        font-weight: 900;
        line-height: 1.35;
        margin: 1.6em 0 .55em;
        color: var(--color-text);
        letter-spacing: -.005em;
    }

    .bed-prev-content h2 {
        font-size: 1.3rem;
    }

    .bed-prev-content h3 {
        font-size: 1.1rem;
    }

    .bed-prev-content p {
        margin: 0 0 1em;
    }

    .bed-prev-content a {
        color: var(--color-primary);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
        text-underline-offset: 3px;
    }

    .bed-prev-content blockquote {
        margin: 1.2em 0;
        padding: .6rem 1rem;
        border-right: 4px solid var(--color-primary);
        background: var(--color-surface-soft);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        color: var(--color-text-muted);
        font-style: italic;
    }

    .bed-prev-content ul, .bed-prev-content ol {
        padding-inline-start: 1.4rem;
        margin: 0 0 1em;
    }

        .bed-prev-content ul li, .bed-prev-content ol li {
            margin-bottom: .35em;
        }

    .bed-prev-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        margin: 1em 0;
        display: block;
    }

    .bed-prev-content code {
        font-family: ui-monospace, monospace;
        background: var(--color-surface-soft);
        padding: .15em .4em;
        border-radius: 5px;
        font-size: .9em;
    }

    .bed-prev-content strong {
        font-weight: 800;
    }

.bed-prev-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-soft);
    font-size: .9rem;
}

/* ── SEO + Social cards ── */
.bed-seo {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.bed-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-text);
}

.bed-check__ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
}

    .bed-check__ico svg {
        width: 12px;
        height: 12px;
    }

.bed-check.is-ok .bed-check__ico {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.bed-check.is-fail .bed-check__ico {
    background: rgba(239,68,68,.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.4);
}

.bed-check__detail {
    margin-inline-start: auto;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bed-score {
    position: relative;
    text-align: center;
    padding: 1.2rem .85rem 1.05rem;
    border-radius: var(--radius-lg);
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8px 22px rgba(16,185,129,.3);
    margin-bottom: .85rem;
}

    .bed-score.is-warn {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 8px 22px rgba(245,158,11,.3);
    }

    .bed-score.is-bad {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        box-shadow: 0 8px 22px rgba(239,68,68,.3);
    }

.bed-score__num {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
}

    .bed-score__num span {
        font-size: 1.2rem;
        opacity: .75;
        font-weight: 700;
    }

.bed-score__lbl {
    font-size: .76rem;
    opacity: .9;
    margin-top: .35rem;
    font-weight: 700;
}

/* Google snippet */
.bed-snippet {
    font-family: Arial, sans-serif;
    padding: .8rem 1rem;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #dadce0;
    color: #202124;
}

.bed-snippet__url {
    font-size: .76rem;
    color: #006621;
    direction: ltr;
    text-align: left;
}

.bed-snippet__title {
    font-size: 1.1rem;
    color: #1a0dab;
    margin: 2px 0 4px;
    font-weight: 500;
    line-height: 1.3;
}

.bed-snippet__desc {
    font-size: .82rem;
    color: #4d5156;
    line-height: 1.5;
}

/* Twitter card */
.bed-tweet {
    border-radius: 16px;
    background: #fff;
    border: 1px solid #cfd9de;
    overflow: hidden;
    color: #0f1419;
}

.bed-tweet__img {
    width: 100%;
    aspect-ratio: 1.91/1;
    background-size: cover;
    background-position: center;
    background-color: #eff3f4;
}

.bed-tweet__body {
    padding: .55rem .85rem .75rem;
}

.bed-tweet__domain {
    font-size: .76rem;
    color: #536471;
    direction: ltr;
    text-align: left;
}

.bed-tweet__title {
    font-size: .92rem;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bed-tweet__sub {
    font-size: .82rem;
    color: #536471;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* sticky save bar */
.bed-savebar {
    position: sticky;
    bottom: .6rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #4c1d95);
    border: 1px solid rgba(168,85,247,.4);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    color: #fff;
    animation: bed-rise .25s ease both;
}

.bed-savebar__msg {
    flex: 1 1 auto;
    font-size: .82rem;
    font-weight: 700;
    min-width: 0;
}

.bed-savebar__btn {
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
}

    .bed-savebar__btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .bed-savebar__btn svg {
        width: 13px;
        height: 13px;
    }

.bed-savebar__btn--draft {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.25);
}

    .bed-savebar__btn--draft:hover:not(:disabled) {
        background: rgba(255,255,255,.24);
    }

.bed-savebar__btn--pub {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 16px rgba(16,185,129,.45);
}

    .bed-savebar__btn--pub:hover:not(:disabled) {
        transform: translateY(-1px);
    }

@keyframes bed-rise {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .bed-root {
        padding: .85rem .65rem 6rem;
    }

    .bed-section {
        padding: .9rem .85rem 1rem;
    }

    .bed-prev-title {
        font-size: 1.35rem;
    }

    .bed-prev-sub {
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bed-section, .bed-savebar {
        animation: none;
    }
}
@keyframes bed-spin {
    to {
        transform: rotate(360deg);
    }
}
/* #endregion Admin Blog Edit */

/* #region Admin Hero Slides*/

.hsl-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 6rem;
    display: flex;
    justify-content: center;
}

.hsl-shell {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── HERO ── */
.hsl-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(251,191,36,.5), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(244,114,182,.5), transparent 70%), linear-gradient(135deg, #0f172a 0%, #7c2d12 50%, #831843 100%);
    box-shadow: var(--shadow-strong);
}

    .hsl-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.hsl-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.hsl-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s, transform .15s;
}

    .hsl-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .hsl-hero__btn svg {
        width: 16px;
        height: 16px;
    }

.hsl-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.hsl-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .hsl-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.hsl-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.hsl-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

.hsl-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}

.hsl-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    font-size: .76rem;
    font-weight: 700;
}

    .hsl-hero__chip b {
        font-weight: 900;
        font-size: .85rem;
    }

/* ── LIVE PREVIEW CAROUSEL ── */
.hsl-preview {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0b1228;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    aspect-ratio: 21 / 9;
    max-height: 460px;
}

@media (max-width: 720px) {
    .hsl-preview {
        aspect-ratio: 16 / 11;
    }
}

.hsl-prev-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
}

    .hsl-prev-slide.is-current {
        opacity: 1;
    }

    .hsl-prev-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,.7) 100%);
    }

.hsl-prev-overlay {
    position: absolute;
    inset: auto 1rem 1.1rem 1rem;
    color: #fff;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.hsl-prev-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    background: rgba(0,0,0,.4);
    padding: .3rem .65rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .hsl-prev-link svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

.hsl-prev-order {
    font-size: .68rem;
    font-weight: 700;
    align-self: flex-start;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(168,85,247,.7);
}

.hsl-prev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background-color .15s, transform .15s;
}

    .hsl-prev-arrow:hover {
        background: rgba(0,0,0,.65);
        transform: translateY(-50%) scale(1.06);
    }

    .hsl-prev-arrow svg {
        width: 16px;
        height: 16px;
    }

.hsl-prev-arrow--prev {
    right: 12px;
}

.hsl-prev-arrow--next {
    left: 12px;
}

.hsl-prev-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 6px;
}

.hsl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width .25s, background-color .25s;
}

    .hsl-dot.is-current {
        width: 22px;
        border-radius: 99px;
        background: #fff;
    }

.hsl-prev-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.6);
    font-weight: 800;
    font-size: .95rem;
    text-align: center;
    padding: 1rem;
}

    .hsl-prev-empty svg {
        width: 46px;
        height: 46px;
        opacity: .5;
        margin-bottom: .55rem;
    }

.hsl-prev-playbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
    z-index: 4;
    overflow: hidden;
}

.hsl-prev-playbar__fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #ec4899);
    animation: hsl-progress 4s linear infinite;
}

.hsl-prev-playbar.is-paused .hsl-prev-playbar__fill {
    animation-play-state: paused;
}

@keyframes hsl-progress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* preview toolbar */
.hsl-prev-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .65rem;
    font-size: .78rem;
    color: var(--color-text-muted);
}

.hsl-prev-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}

    .hsl-prev-toolbar__btn:hover {
        background: var(--color-surface-soft);
    }

    .hsl-prev-toolbar__btn svg {
        width: 12px;
        height: 12px;
    }

    .hsl-prev-toolbar__btn.is-on {
        color: var(--color-primary);
        border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

/* ── Section card ── */
.hsl-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.05rem 1.1rem;
}

[data-theme="dark"] .hsl-section {
    background: rgba(15,23,42,.85);
}

.hsl-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
}

.hsl-sec-head__bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f59e0b, #ec4899);
}

.hsl-sec-head__title {
    font-weight: 800;
    font-size: .98rem;
    color: var(--color-text);
}

.hsl-add {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 6px 18px rgba(236,72,153,.35);
    transition: transform .15s;
}

    .hsl-add:hover {
        transform: translateY(-1px);
    }

    .hsl-add svg {
        width: 14px;
        height: 14px;
    }

/* ── Slide cards ── */
.hsl-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

@media (min-width: 820px) {
    .hsl-list {
        grid-template-columns: 1fr 1fr;
    }
}

.hsl-slide {
    position: relative;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: .85rem .9rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    transition: transform .15s, box-shadow .15s, border-color .15s, opacity .25s;
    animation: hsl-fade .35s ease both;
}

[data-theme="dark"] .hsl-slide {
    background: rgba(15,23,42,.55);
}

.hsl-slide:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.hsl-slide.is-inactive {
    opacity: .55;
}

.hsl-slide.is-current {
    border-color: color-mix(in srgb, #ec4899 60%, var(--color-border-soft));
    box-shadow: 0 8px 22px color-mix(in srgb, #ec4899 22%, transparent);
}

    .hsl-slide.is-current::before {
        content: "نمایش‌داده‌شده";
        position: absolute;
        top: -10px;
        right: 12px;
        font-size: .65rem;
        font-weight: 800;
        padding: .15rem .55rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #f59e0b, #ec4899);
        color: #fff;
        box-shadow: 0 4px 10px rgba(236,72,153,.35);
    }

.hsl-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-md);
    background-color: #0b1228;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-border-soft);
}

.hsl-thumb__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.55);
    font-size: .78rem;
}

    .hsl-thumb__empty svg {
        width: 32px;
        height: 32px;
        opacity: .6;
    }

.hsl-thumb__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%);
    opacity: 0;
    transition: opacity .15s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .6rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.hsl-thumb:hover .hsl-thumb__overlay {
    opacity: 1;
}

.hsl-thumb__order {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: .72rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    backdrop-filter: blur(8px);
}

.hsl-thumb__active {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: .68rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(16,185,129,.85);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .hsl-thumb__active.is-off {
        background: rgba(148,163,184,.7);
    }

    .hsl-thumb__active svg {
        width: 11px;
        height: 11px;
    }

.hsl-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.hsl-field__lbl {
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.hsl-input {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .7rem;
    border-radius: 10px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: .84rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    direction: ltr;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

[data-theme="dark"] .hsl-input {
    background: rgba(15,23,42,.7);
}

.hsl-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.hsl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.hsl-toolbar {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.hsl-iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

    .hsl-iconbtn:hover {
        background: var(--color-surface-soft);
        color: var(--color-text);
    }

    .hsl-iconbtn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

    .hsl-iconbtn svg {
        width: 14px;
        height: 14px;
    }

.hsl-iconbtn--danger {
    color: #ef4444;
    border-color: rgba(239,68,68,.45);
}

    .hsl-iconbtn--danger:hover {
        background: rgba(239,68,68,.14);
    }

/* switch (reused style) */
.hsl-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    margin-inline-start: auto;
}

    .hsl-switch input {
        display: none;
    }

.hsl-switch__track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    position: relative;
    transition: background-color .2s, border-color .2s;
}

    .hsl-switch__track::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

.hsl-switch input:checked + .hsl-switch__track {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}

    .hsl-switch input:checked + .hsl-switch__track::after {
        transform: translateX(-16px);
    }

/* sticky save bar (shared style with wha-) */
.hsl-savebar {
    position: sticky;
    bottom: .6rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #4c1d95);
    border: 1px solid rgba(236,72,153,.4);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    color: #fff;
    animation: hsl-rise .25s ease both;
}

.hsl-savebar__msg {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 700;
}

.hsl-savebar__btn {
    padding: .45rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 6px 16px rgba(16,185,129,.45);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .hsl-savebar__btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .hsl-savebar__btn svg {
        width: 13px;
        height: 13px;
    }

.hsl-savebar__discard {
    background: transparent;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.25);
    padding: .4rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .8rem;
}

    .hsl-savebar__discard:hover {
        background: rgba(255,255,255,.08);
    }

/* states */
.hsl-loader, .hsl-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

[data-theme="dark"] .hsl-loader, [data-theme="dark"] .hsl-empty {
    background: rgba(15,23,42,.85);
}

.hsl-loader svg, .hsl-empty svg {
    width: 38px;
    height: 38px;
    opacity: .55;
    margin-bottom: .55rem;
}

.hsl-loader__sp {
    animation: hsl-spin .9s linear infinite;
}

.hsl-empty__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .95rem;
    margin-bottom: 4px;
}

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

@keyframes hsl-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hsl-rise {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .hsl-root {
        padding: .85rem .65rem 6rem;
    }

    .hsl-hero {
        padding: .9rem .95rem 1rem;
        border-radius: var(--radius-lg);
    }

    .hsl-section {
        padding: .9rem .85rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hsl-prev-slide {
        transition: none;
    }

    .hsl-prev-playbar__fill {
        animation: none;
    }

    .hsl-slide {
        transition: none;
        animation: none;
    }
}

/* #endregion Admin Hero Slides */

/* #region Admin User*/
.usr-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
}

.usr-shell {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HERO */
.usr-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(34,211,238,.5), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(168,85,247,.55), transparent 70%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #4c1d95 100%);
    box-shadow: var(--shadow-strong);
}

    .usr-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.usr-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.usr-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s, transform .15s;
}

    .usr-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .usr-hero__btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .usr-hero__btn svg {
        width: 16px;
        height: 16px;
    }

    .usr-hero__btn.is-busy svg {
        animation: usr-spin .9s linear infinite;
    }

.usr-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.usr-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .usr-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.usr-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.usr-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

/* Filter tiles */
.usr-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.usr-tile {
    cursor: pointer;
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: transform .15s, background-color .15s;
    user-select: none;
}

    .usr-tile:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.16);
    }

    .usr-tile.is-active {
        background: rgba(255,255,255,.94);
        color: #0f172a;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        transform: translateY(-2px);
    }

.usr-tile__num {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.usr-tile__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

.usr-tile.is-active .usr-tile__lbl {
    opacity: .65;
}

@media (max-width: 420px) {
    .usr-tiles {
        grid-template-columns: repeat(2,1fr);
        gap: .45rem;
    }
}

/* Search */
.usr-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}

    .usr-search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

    .usr-search svg {
        width: 16px;
        height: 16px;
        color: var(--color-text-muted);
        flex: 0 0 16px;
    }

    .usr-search input {
        flex: 1 1 auto;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--color-text);
        font: inherit;
        padding: .15rem 0;
    }

        .usr-search input::placeholder {
            color: var(--color-text-muted);
        }

/* List */
.usr-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}

@media (min-width: 720px) {
    .usr-list {
        grid-template-columns: 1fr 1fr;
    }
}

.usr-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: usr-fade .35s ease both;
}

[data-theme="dark"] .usr-card {
    background: rgba(15,23,42,.85);
}

.usr-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--usr-accent, var(--color-primary)) 35%, var(--color-border-soft));
}

.usr-card::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--usr-accent, var(--color-primary)), transparent);
}

.usr-card[data-state="admin"] {
    --usr-accent: #f59e0b;
}

.usr-card[data-state="banned"] {
    --usr-accent: #ef4444;
}

.usr-card[data-state="active"] {
    --usr-accent: #10b981;
}

.usr-card.is-banned .usr-avatar {
    filter: grayscale(.65);
}

.usr-card__head {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.usr-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--usr-accent, var(--color-primary)), color-mix(in srgb, var(--usr-accent, var(--color-secondary)) 50%, var(--color-secondary)));
    flex: 0 0 50px;
    border: 2px solid color-mix(in srgb, var(--usr-accent) 30%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--usr-accent) 30%, transparent);
    overflow: hidden;
    position: relative;
}

    .usr-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.usr-avatar__dot {
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--usr-accent, #10b981);
    border: 2px solid var(--color-surface);
}

.usr-id {
    flex: 1 1 auto;
    min-width: 0;
}

.usr-id__name {
    font-weight: 800;
    font-size: .96rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usr-id__meta {
    font-size: .72rem;
    color: var(--color-text-muted);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .65rem;
}

    .usr-id__meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .usr-id__meta svg {
        width: 11px;
        height: 11px;
    }

.usr-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.usr-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

    .usr-pill svg {
        width: 11px;
        height: 11px;
    }

.usr-pill--admin {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #f59e0b;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
}

.usr-pill--banned {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #ef4444;
    border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
}

.usr-pill--active {
    background: color-mix(in srgb, #10b981 16%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
}

.usr-pill--count {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.usr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.usr-btn {
    flex: 1 1 0;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .7rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, background-color .12s;
}

    .usr-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .usr-btn svg {
        width: 13px;
        height: 13px;
    }

.usr-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-soft);
}

    .usr-btn--ghost:hover:not(:disabled) {
        background: var(--color-surface-soft);
        transform: translateY(-1px);
    }

.usr-btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 6px 16px var(--color-primary-soft);
}

    .usr-btn--primary:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.usr-btn--ban {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.5);
}

    .usr-btn--ban:hover:not(:disabled) {
        background: rgba(239,68,68,.16);
        transform: translateY(-1px);
    }

.usr-btn--unban {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16,185,129,.35);
}

    .usr-btn--unban:hover:not(:disabled) {
        transform: translateY(-1px);
    }

/* states */
.usr-loader, .usr-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    grid-column: 1 / -1;
}

[data-theme="dark"] .usr-loader, [data-theme="dark"] .usr-empty {
    background: rgba(15,23,42,.85);
}

.usr-loader svg, .usr-empty svg {
    width: 38px;
    height: 38px;
    opacity: .55;
    margin-bottom: .55rem;
}

.usr-loader__sp {
    animation: usr-spin .9s linear infinite;
}

.usr-empty__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .95rem;
    margin-bottom: 4px;
}

.usr-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: .85rem;
    grid-column: 1 / -1;
}

    .usr-loadmore svg {
        width: 18px;
        height: 18px;
        animation: usr-spin .9s linear infinite;
    }

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

@keyframes usr-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 480px) {
    .usr-actions .usr-btn {
        min-width: 0;
        flex: 1 1 calc(50% - .2rem);
        font-size: .76rem;
        padding: .45rem .55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .usr-card, .usr-btn, .usr-tile {
        transition: none;
        animation: none;
    }
}
/* #endregion Admin User*/


/* #region Admin shop*/
.ashp-root {
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 6rem;
    display: flex;
    justify-content: center;
}

.ashp-shell {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── HERO ── */
.ashp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    background: radial-gradient(520px 240px at 92% -40%, rgba(236,72,153,.55), transparent 65%), radial-gradient(420px 200px at -10% 110%, rgba(99,102,241,.55), transparent 70%), linear-gradient(135deg, #0f172a 0%, #6366f1 45%, #ec4899 100%);
    box-shadow: var(--shadow-strong);
}

    .ashp-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
        pointer-events: none;
    }

.ashp-hero__top {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.ashp-hero__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex: 0 0 38px;
    transition: background-color .15s, transform .15s;
}

    .ashp-hero__btn:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .ashp-hero__btn svg {
        width: 16px;
        height: 16px;
    }

.ashp-hero__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.ashp-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

    .ashp-hero__ico svg {
        width: 22px;
        height: 22px;
    }

.ashp-hero__title {
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.2;
}

.ashp-hero__sub {
    font-size: .76rem;
    opacity: .85;
    margin-top: 3px;
}

.ashp-hero__new {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 6px 18px rgba(251,191,36,.4);
    transition: transform .15s;
    white-space: nowrap;
}

    .ashp-hero__new:hover {
        transform: translateY(-1px);
    }

    .ashp-hero__new svg {
        width: 14px;
        height: 14px;
    }

/* Stats tiles */
.ashp-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.ashp-tile {
    cursor: pointer;
    text-align: center;
    padding: .65rem .35rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: transform .15s, background-color .15s;
    user-select: none;
}

    .ashp-tile:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.16);
    }

    .ashp-tile.is-active {
        background: rgba(255,255,255,.94);
        color: #0f172a;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        transform: translateY(-2px);
    }

.ashp-tile__num {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.ashp-tile__lbl {
    font-size: .68rem;
    opacity: .85;
    margin-top: .35rem;
}

.ashp-tile.is-active .ashp-tile__lbl {
    opacity: .65;
}

@media (max-width: 480px) {
    .ashp-tiles {
        grid-template-columns: repeat(2,1fr);
        gap: .45rem;
    }
}

/* Search */
.ashp-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}

    .ashp-search:focus-within {
        border-color: #ec4899;
        box-shadow: 0 0 0 3px rgba(236,72,153,.18);
    }

    .ashp-search svg {
        width: 16px;
        height: 16px;
        color: var(--color-text-muted);
        flex: 0 0 16px;
    }

    .ashp-search input {
        flex: 1 1 auto;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--color-text);
        font: inherit;
        padding: .15rem 0;
    }

        .ashp-search input::placeholder {
            color: var(--color-text-muted);
        }

/* ── LIST ── */
.ashp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}

@media (min-width: 700px) {
    .ashp-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .ashp-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.ashp-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: ashp-fade .35s ease both;
}

[data-theme="dark"] .ashp-card {
    background: rgba(15,23,42,.85);
}

.ashp-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}

.ashp-card.is-hidden {
    opacity: .55;
    filter: saturate(.6);
}

.ashp-card.is-out {
    border-color: color-mix(in srgb, #ef4444 40%, var(--color-border-soft));
}

.ashp-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    overflow: hidden;
}

.ashp-card__img-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.45);
    background: linear-gradient(135deg, #6366f1, #ec4899);
}

    .ashp-card__img-empty svg {
        width: 36px;
        height: 36px;
    }

.ashp-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.ashp-card__badges--right {
    left: auto;
    right: 8px;
}

.ashp-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

    .ashp-badge svg {
        width: 10px;
        height: 10px;
    }

.ashp-badge--disc {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.ashp-badge--feat {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
}

.ashp-badge--out {
    background: rgba(15,23,42,.85);
    color: #fff;
}

.ashp-badge--hid {
    background: rgba(148,163,184,.85);
    color: #fff;
}

.ashp-card__body {
    padding: .8rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.ashp-card__name {
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.ashp-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    font-size: .72rem;
    color: var(--color-text-muted);
}

    .ashp-card__meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .ashp-card__meta svg {
        width: 11px;
        height: 11px;
    }

    .ashp-card__meta b {
        color: var(--color-text);
        font-weight: 800;
    }

    .ashp-card__meta .is-low {
        color: #f59e0b;
    }

    .ashp-card__meta .is-out {
        color: #ef4444;
    }

.ashp-card__price-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem 0;
    border-top: 1px dashed var(--color-border-soft);
    font-feature-settings: "tnum";
}

.ashp-card__price-now {
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-text);
}

    .ashp-card__price-now small {
        font-size: .65rem;
        font-weight: 700;
        color: var(--color-text-muted);
        margin-inline-start: 2px;
    }

.ashp-card__price-old {
    font-size: .75rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.ashp-card__price-disc {
    color: #ef4444;
}

.ashp-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: auto;
    padding-top: .35rem;
}

.ashp-btn {
    flex: 1 1 0;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .45rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, background-color .12s;
}

    .ashp-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .ashp-btn svg {
        width: 12px;
        height: 12px;
    }

.ashp-btn--edit {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    box-shadow: 0 4px 12px rgba(236,72,153,.3);
}

    .ashp-btn--edit:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.ashp-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-soft);
}

    .ashp-btn--ghost:hover:not(:disabled) {
        background: var(--color-surface-soft);
    }

.ashp-btn--danger {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.5);
}

    .ashp-btn--danger:hover:not(:disabled) {
        background: rgba(239,68,68,.16);
    }

/* ── EDITOR (full-screen overlay) ── */
.ashp-editor-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    animation: ashp-fade .2s ease both;
}

.ashp-editor {
    position: fixed;
    inset: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    z-index: 101;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ashp-pop .25s cubic-bezier(.16,1,.3,1) both;
    box-shadow: 0 28px 60px rgba(0,0,0,.5);
}

[data-theme="dark"] .ashp-editor {
    background: #0f172a;
}

.ashp-editor__head {
    position: relative;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    gap: .65rem;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
}

.ashp-editor__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
}

    .ashp-editor__close svg {
        width: 16px;
        height: 16px;
    }

.ashp-editor__title {
    font-weight: 900;
    font-size: 1rem;
    flex: 1;
}

.ashp-editor__chip {
    font-size: .68rem;
    font-weight: 800;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
}

.ashp-editor__tabs {
    display: none;
    gap: .35rem;
    padding: .55rem .85rem 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
}

[data-theme="dark"] .ashp-editor__tabs {
    background: #0f172a;
}

.ashp-editor__tab {
    flex: 1;
    padding: .55rem .85rem;
    border-radius: 8px 8px 0 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .85rem;
    color: var(--color-text-muted);
}

    .ashp-editor__tab.is-active {
        background: var(--color-surface-soft);
        color: #ec4899;
        border-bottom: 2px solid #ec4899;
    }

@media (max-width: 1023px) {
    .ashp-editor__tabs {
        display: flex;
    }
}

.ashp-editor__stage {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .ashp-editor__stage {
        grid-template-columns: minmax(0, 1fr) 380px;
    }
}

@media (max-width: 1023px) {
    .ashp-editor__pane {
        display: none;
    }

        .ashp-editor__pane.is-active {
            display: block;
        }
}

.ashp-editor__pane {
    padding: 1rem 1.1rem 1.2rem;
}

.ashp-editor__pane--preview {
    border-inline-start: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
}

[data-theme="dark"] .ashp-editor__pane--preview {
    background: rgba(15,23,42,.5);
}

/* ── PAGE MODE (صفحه‌ی افزودن/ویرایش، نه مودال) ──────────────── */
/* تب‌ها در حالت صفحه همیشه نمایش داده می‌شوند و کارتی استایل می‌گیرند. */
.ashp-editor__tabs {
    display: flex;
    margin-top: .9rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--color-border-soft);
    border-bottom: none;
    overflow: hidden;
}

/* stage صفحه‌ای: کارت معمولی با حاشیه و گوشه‌ی گرد (نه overlay ثابت) */
.ashp-editor__stage--page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
}

[data-theme="dark"] .ashp-editor__stage--page {
    background: #0f172a;
}

@media (min-width: 1024px) {
    .ashp-editor__stage--page {
        grid-template-columns: minmax(0, 1fr) 380px;
    }
    /* در دسکتاپ هر دو پنل با هم دیده می‌شوند، پس تب‌های موبایلی پنهان */
    .ashp-editor__tabs--page {
        display: none;
    }

    .ashp-editor__stage--page .ashp-editor__pane {
        display: block !important;
    }
}

@media (max-width: 1023px) {
    .ashp-editor__stage--page .ashp-editor__pane {
        display: none;
    }

        .ashp-editor__stage--page .ashp-editor__pane.is-active {
            display: block;
        }
}

.ashp-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .85rem;
}

.ashp-sec-head__bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, #ec4899, #a855f7);
}

.ashp-sec-head__title {
    font-weight: 800;
    font-size: .98rem;
    color: var(--color-text);
    flex: 1;
}

.ashp-sec-head__chip {
    font-size: .72rem;
    color: var(--color-text-muted);
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
}

/* Form */
.ashp-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .85rem;
}

.ashp-field__lbl {
    font-size: .76rem;
    font-weight: 800;
    color: var(--color-text-muted);
    display: flex;
    gap: .35rem;
    align-items: center;
}

.ashp-field__hint {
    margin-inline-start: auto;
    font-weight: 600;
    opacity: .8;
    font-size: .7rem;
}

.ashp-input, .ashp-select, .ashp-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font: inherit;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}

    .ashp-input:focus, .ashp-select:focus, .ashp-textarea:focus {
        outline: none;
        border-color: #ec4899;
        box-shadow: 0 0 0 3px rgba(236,72,153,.18);
    }

.ashp-input--mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    direction: ltr;
    text-align: left;
}

.ashp-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.65;
}

.ashp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

@media (max-width: 600px) {
    .ashp-row {
        grid-template-columns: 1fr;
    }
}

.ashp-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
    .ashp-row--3 {
        grid-template-columns: 1fr;
    }
}

/* image preview */
.ashp-img-prev {
    width: 100%;
    aspect-ratio: 16/10;
    margin-top: .45rem;
    border-radius: var(--radius-md);
    background-color: #0b1228;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--color-border-soft);
    position: relative;
    overflow: hidden;
}

.ashp-img-prev__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.55);
    background: linear-gradient(135deg, #6366f1, #ec4899);
    font-size: .82rem;
}

    .ashp-img-prev__empty svg {
        width: 36px;
        height: 36px;
        opacity: .65;
        margin-bottom: .4rem;
    }

/* switch */
.ashp-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
}

    .ashp-switch input {
        display: none;
    }

.ashp-switch__track {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    position: relative;
    transition: background-color .2s, border-color .2s;
}

    .ashp-switch__track::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

.ashp-switch input:checked + .ashp-switch__track {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}

.ashp-switch input:checked + .ashp-switch__track--feat {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.ashp-switch input:checked + .ashp-switch__track::after {
    transform: translateX(-18px);
}

/* discount preview chip */
.ashp-disc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    margin-top: .4rem;
    box-shadow: 0 4px 12px rgba(239,68,68,.3);
}

    .ashp-disc-chip svg {
        width: 12px;
        height: 12px;
    }

/* ── LIVE PREVIEW CARD (right pane) ── */
.ashp-preview-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    max-width: 320px;
    margin: 0 auto;
}

[data-theme="dark"] .ashp-preview-card {
    background: rgba(15,23,42,.85);
}

.ashp-preview-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
}

.ashp-preview-card__img-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.45);
    background: linear-gradient(135deg, #4c1d95, #831843);
}

    .ashp-preview-card__img-empty svg {
        width: 38px;
        height: 38px;
    }

.ashp-preview-card__body {
    padding: .8rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ashp-preview-card__name {
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
    line-height: 1.4;
}

.ashp-preview-card__desc {
    font-size: .75rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ashp-preview-card__price-row {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: 4px;
    font-feature-settings: "tnum";
}

.ashp-preview-card__price-now {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--color-text);
}

    .ashp-preview-card__price-now small {
        font-size: .65rem;
        color: var(--color-text-muted);
        margin-inline-start: 2px;
    }

.ashp-preview-card__price-old {
    font-size: .72rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.ashp-preview-card__price-now.is-disc {
    color: #ef4444;
}

.ashp-preview-card__stock {
    font-size: .68rem;
    font-weight: 800;
}

    .ashp-preview-card__stock.is-low {
        color: #f59e0b;
    }

    .ashp-preview-card__stock.is-out {
        color: #ef4444;
    }

    .ashp-preview-card__stock.is-ok {
        color: #10b981;
    }

.ashp-preview-banner {
    text-align: center;
    font-size: .76rem;
    font-weight: 800;
    color: var(--color-text-muted);
    margin-bottom: .85rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-soft);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: center;
}

    .ashp-preview-banner svg {
        width: 13px;
        height: 13px;
    }

/* sticky save bar */
.ashp-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    border-top: 1px solid var(--color-border-soft);
    background: linear-gradient(135deg, #0f172a, #4c1d95);
    color: #fff;
    margin: 0 -1.1rem -1.2rem;
}

.ashp-savebar__msg {
    flex: 1 1 auto;
    font-size: .82rem;
    font-weight: 700;
}

.ashp-savebar__btn {
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
}

    .ashp-savebar__btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .ashp-savebar__btn svg {
        width: 13px;
        height: 13px;
    }

.ashp-savebar__btn--ghost {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.25);
}

.ashp-savebar__btn--save {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 16px rgba(16,185,129,.45);
}

    .ashp-savebar__btn--save:hover:not(:disabled) {
        transform: translateY(-1px);
    }

/* states */
.ashp-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    grid-column: 1 / -1;
}

[data-theme="dark"] .ashp-state {
    background: rgba(15,23,42,.85);
}

.ashp-state svg {
    width: 38px;
    height: 38px;
    opacity: .55;
    margin-bottom: .55rem;
}

.ashp-state__title {
    font-weight: 800;
    color: var(--color-text);
    font-size: .95rem;
    margin-bottom: 4px;
}

.ashp-state__sp {
    animation: ashp-spin .9s linear infinite;
}

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

@keyframes ashp-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ashp-pop {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .ashp-root {
        padding: .85rem .65rem 6rem;
    }

    .ashp-hero {
        padding: .9rem .95rem 1rem;
    }

    .ashp-editor {
        inset: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ashp-card, .ashp-btn, .ashp-tile {
        transition: none;
        animation: none;
    }
}


/* ── ADMIN ITEM PREVIEW (مستقل از کدهای کاربر) ── */
.ashp-item-preview {
    position: relative;
    aspect-ratio: 4/3;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 60%), linear-gradient(135deg, #1e293b, #0f172a);
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
}

    /* بک‌گراندهای اختصاصی بر اساس کمیابی در ادمین */
    .ashp-item-preview[data-rarity="normal"] {
        background: radial-gradient(ellipse at 30% 20%, rgba(148,163,184,.18), transparent 60%), linear-gradient(135deg, #334155, #0f172a);
    }

    .ashp-item-preview[data-rarity="bronze"] {
        background: radial-gradient(ellipse at 25% 15%, rgba(251,146,60,.4), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(120,53,15,.5), transparent 60%), linear-gradient(135deg, #9a3412, #431407);
    }

    .ashp-item-preview[data-rarity="silver"] {
        background: radial-gradient(ellipse at 25% 15%, rgba(226,232,240,.45), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(100,116,139,.4), transparent 60%), linear-gradient(135deg, #64748b, #1e293b);
    }

    .ashp-item-preview[data-rarity="gold"] {
        background: linear-gradient(135deg, #fbbf24 10%, #f59e0b 50%, #d97706 80%, #b45309 100%);
    }

        /* افکت درخشش کارت طلایی در ادمین */
        .ashp-item-preview[data-rarity="gold"]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%);
            transform: translateX(-100%);
            animation: ashp-shine 3.5s ease-in-out infinite;
            pointer-events: none;
        }

@keyframes ashp-shine {
    0%, 70% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ── SHAPES (اشکال داخلی آواتار، بنر و فریم در ادمین) ── */
.ashp-shape-avatar {
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.08);
}

.ashp-shape-banner {
    width: 88%;
    aspect-ratio: 3/1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.ashp-shape-frame {
    position: relative;
    width: 58%;
    aspect-ratio: 1;
}

.ashp-shape-frame__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* متغیر --frame-grad به صورت اینلاین در HTML مقداردهی می‌شود */
    background: var(--frame-grad, conic-gradient(from 0deg, #a855f7, #ec4899, #fbbf24, #a855f7));
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 44%);
    mask: radial-gradient(circle, transparent 40%, #000 44%);
    animation: ashp-frame-rot 8s linear infinite;
}

    .ashp-shape-frame__ring.has-img {
        background: var(--frame-img-bg) center/cover no-repeat;
        -webkit-mask: none;
        mask: none;
        animation: none;
    }

.ashp-shape-frame__inner {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    background: #475569 center/cover no-repeat;
    /*background-image: url('https://api.dicebear.com/7.x/adventurer/svg?seed=admin-preview');*/
}

@keyframes ashp-frame-rot {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ashp-shape-frame__ring, .ashp-item-preview[data-rarity="gold"]::after {
        animation: none;
    }
}

    .ap-shp-card__rarity[data-rarity="normal"] {
        background: linear-gradient(135deg, #64748b, #475569);
    }

    .ap-shp-card__rarity[data-rarity="bronze"] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

    .ap-shp-card__rarity[data-rarity="silver"] {
        background: linear-gradient(135deg, #cbd5e1, #94a3b8);
        color: #1e293b;
    }

    .ap-shp-card__rarity[data-rarity="gold"] {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #422006;
    }
/* ── 1. دکمه فروشگاه (تم نئونی بنفش) ── */
.adm2-mod--shop {
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.08) 0%, rgba(126, 34, 206, 0.08) 100%) !important;
    box-shadow: none !important; /* حذف هرگونه سایه پیش‌فرض کادر */
}

    .adm2-mod--shop .adm2-mod__bar {
        background: linear-gradient(to bottom, #a855f7, #7e22ce) !important;
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.6) !important;
    }

    .adm2-mod--shop .adm2-mod__ico {
        background: rgba(168, 85, 247, 0.15) !important;
        color: #c084fc !important;
        box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25) !important;
    }

    .adm2-mod--shop .adm2-mod__title {
        color: #ffffff !important;
    }

    .adm2-mod--shop .adm2-mod__sub {
        color: rgba(192, 132, 252, 0.75) !important;
    }

    .adm2-mod--shop .adm2-mod__count,
    .adm2-mod--shop .adm2-mod__arrow {
        color: rgba(168, 85, 247, 0.8) !important;
        transition: all 0.3s ease;
    }

    /* تغییرات در حالت هاور و فوکوس */
    .adm2-mod--shop:hover,
    .adm2-mod--shop:focus {
        background: linear-gradient(145deg, rgba(168, 85, 247, 0.15) 0%, rgba(126, 34, 206, 0.15) 100%) !important;
        border-color: rgba(168, 85, 247, 0.6) !important;
        box-shadow: none !important; /* حذف شدو (سایه) دکمه در زمان هاور مانند بقیه المان‌ها */
        transform: translateY(-2px);
        outline: none;
    }

        /* روشن‌تر شدن عدد و فلش در حالت هاور و فوکوس */
        .adm2-mod--shop:hover .adm2-mod__count,
        .adm2-mod--shop:hover .adm2-mod__arrow,
        .adm2-mod--shop:focus .adm2-mod__count,
        .adm2-mod--shop:focus .adm2-mod__arrow {
            color: #c084fc !important;
            text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
        }


/* ── 2. دکمه رسید پرداخت (تم نئونی صورتی) ── */
.adm2-mod--receipt {
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
    background: linear-gradient(145deg, rgba(236, 72, 153, 0.08) 0%, rgba(190, 24, 93, 0.08) 100%) !important;
    box-shadow: none !important; /* حذف هرگونه سایه پیش‌فرض کادر */
}

    .adm2-mod--receipt .adm2-mod__bar {
        background: linear-gradient(to bottom, #ec4899, #be185d) !important;
        box-shadow: 0 0 12px rgba(236, 72, 153, 0.6) !important;
    }

    .adm2-mod--receipt .adm2-mod__ico {
        background: rgba(236, 72, 153, 0.15) !important;
        color: #f472b6 !important;
        box-shadow: 0 4px 15px rgba(236, 72, 153, 0.25) !important;
    }

    .adm2-mod--receipt .adm2-mod__title {
        color: #ffffff !important;
    }

    .adm2-mod--receipt .adm2-mod__sub {
        color: rgba(244, 114, 182, 0.75) !important;
    }

    .adm2-mod--receipt .adm2-mod__count,
    .adm2-mod--receipt .adm2-mod__arrow {
        color: rgba(236, 72, 153, 0.8) !important;
        transition: all 0.3s ease;
    }

    /* تغییرات در حالت هاور و فوکوس */
    .adm2-mod--receipt:hover,
    .adm2-mod--receipt:focus {
        background: linear-gradient(145deg, rgba(236, 72, 153, 0.15) 0%, rgba(190, 24, 93, 0.15) 100%) !important;
        border-color: rgba(236, 72, 153, 0.6) !important;
        box-shadow: none !important; /* حذف شدو (سایه) دکمه در زمان هاور مانند بقیه المان‌ها */
        transform: translateY(-2px);
        outline: none;
    }

        /* روشن‌تر شدن عدد و فلش در حالت هاور و فوکوس */
        .adm2-mod--receipt:hover .adm2-mod__count,
        .adm2-mod--receipt:hover .adm2-mod__arrow,
        .adm2-mod--receipt:focus .adm2-mod__count,
        .adm2-mod--receipt:focus .adm2-mod__arrow {
            color: #f472b6 !important;
            text-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
        }

/* #endregion Admin shop*/

/* --- Add-on to existing Button component system --- */

/* Xbox/Sale Pack Primary Variant */
.adm-btn-xbox {
    /* استفاده از سبزهای نئونی هماهنگ با تم دارک شما */
    border-color: rgba(34, 197, 94, 0.45);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.20), rgba(21, 128, 61, 0.35));
    color: #4ade80;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.15);
}

    .adm-btn-xbox:hover:not(:disabled) {
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.30), rgba(21, 128, 61, 0.45));
        border-color: rgba(34, 197, 94, 0.65);
        color: #fff;
        box-shadow: 0 6px 18px rgba(34, 197, 94, 0.25);
    }

/* Accessibility: Focus state fallback if not globally defined */
.adm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.4); /* استفاده از رنگ Primary سایت برای فریم فوکوس */
}








/* =========================================
   کادر دور آواتار (Frame) برای تمام بخش‌ها
   ========================================= */
.avatar-frame-overlay {
    position: absolute;
    top: -16%; /* تنظیم بیرون‌زدگی کادر از عکس */
    left: -16%;
    width: 132%; /* پوشش کامل عکس به علاوه حاشیه */
    height: 132%;
    background-image: var(--user-frame);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none; /* تا مزاحم کلیک روی عکس کاربر نشود */
    z-index: 5;
}