/* =========================================================
   ui.css  —  ظاهر جدید MyBalaban (مرحله ۱: فونت، پس‌زمینه، منو، هدر)
   این فایل باید بعد از site.css و Responsive.css لود شود
   ========================================================= */

/* ---------- فونت وزیرمتن ---------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ---------- رنگ‌ها و متغیرها (هم‌رنگ با games.css) ---------- */
:root {
    --ui-p: #5b5bd6;
    --ui-p2: #9b5de5;
    --ui-pink: #f15bb5;
    --ui-bg: #f4f5fb;
    --ui-card: #ffffff;
    --ui-text: #1f2340;
    --ui-muted: #7a7f9a;
    --ui-border: #e6e8f2;
    --ui-soft: #eef0fb;
    --ui-green: #12b886;
    --ui-red: #f0506e;
    --ui-orange: #ff922b;
    --ui-blue: #339af0;
    --ui-radius: 18px;
    --ui-shadow: 0 6px 24px rgba(31, 35, 64, .08);
    --ui-shadow-hover: 0 14px 34px rgba(31, 35, 64, .16);
    --ui-grad: linear-gradient(135deg, var(--ui-p), var(--ui-p2));
}

/** {
    font-family: 'Vazirmatn', 'IranSans', tahoma, arial;
}*/

html, body {
    background-color: var(--ui-bg) !important;
}

/* اسکرول‌بار ظریف */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c9cce3;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
   منوی کناری
   ========================================================= */
.MainSidebar {
    background: var(--ui-card);
    box-shadow: -4px 0 24px rgba(31, 35, 64, .06);
    padding: 14px 0 30px;
    overflow-y: auto;
}

/* کارت پروفایل بالای منو */
.MainSidebarAvatar {
    background: var(--ui-grad);
    margin: 4px 14px 14px;
    padding: 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
    box-shadow: 0 10px 24px rgba(91, 91, 214, .30);
    position: relative;
    overflow: hidden;
}

    .MainSidebarAvatar::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        left: -40px;
        top: -50px;
    }

    .MainSidebarAvatar a {
        flex-shrink: 0;
    }

    .MainSidebarAvatar .Dimg {
        width: 3.4em;
        height: 3.4em;
        margin: 0;
        border: 3px solid rgba(255, 255, 255, .85);
        position: relative;
    }

        .MainSidebarAvatar .Dimg::after { /* نقطه سبز آنلاین */
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #2ee59d;
            border: 2px solid #fff;
        }

    .MainSidebarAvatar h2 {
        color: #fff !important;
        font-size: 1em;
        font-weight: 700;
        text-align: right;
        padding: 0;
        margin: 0;
        line-height: 1.6;
    }

    .MainSidebarAvatar .sb-role {
        display: block;
        color: rgba(255, 255, 255, .85) !important;
        font-size: .78em;
        font-weight: 400;
    }

/* آیتم‌های منو */
.MainSidebarNav .mud-expansion-panels {
    background: transparent;
}

.MainSidebarNav .mud-expand-panel {
    background: transparent !important;
    margin: 2px 12px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

    .MainSidebarNav .mud-expand-panel::before {
        display: none;
    }

.MainSidebarNav .mud-expand-panel-header {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px;
    transition: background .2s;
}

    .MainSidebarNav .mud-expand-panel-header:hover {
        background: var(--ui-soft);
    }

    .MainSidebarNav .mud-expand-panel-header a,
    .MainSidebarNav .mud-expand-panel-text {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        color: var(--ui-text) !important;
        font-weight: 500;
        font-size: .95em;
        text-decoration: none !important;
    }

        /* لینک فعال (صفحه‌ای که الان بازه) */
        .MainSidebarNav .mud-expand-panel-header a.active {
            color: var(--ui-p) !important;
            font-weight: 700;
        }

.MainSidebarNav .mud-expand-panel:has(> .mud-expand-panel-header a.active) {
    background: var(--ui-soft) !important;
}

/* آیکون مربعی رنگی کنار هر آیتم */
.sb-ic {
    --c1: #5b5bd6;
    --c2: #9b5de5;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px -2px var(--c1);
    transition: transform .2s, box-shadow .2s;
}

    .sb-ic::before { /* برق شیشه‌ای روی آیکون */
        content: "";
        position: absolute;
        inset: 0 0 50% 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
    }

    .sb-ic .mud-icon-root {
        fill: #fff !important;
        color: #fff !important;
        width: 20px;
        height: 20px;
        font-size: 20px;
        position: relative;
    }

.MainSidebarNav .mud-expand-panel-header:hover .sb-ic {
    transform: translateY(-2px) rotate(-6deg);
}

.MainSidebarNav a.active .sb-ic {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c1), 0 8px 18px -4px var(--c1);
}

/* رنگ هر آیکون */
.ic-purple {
    --c1: #5b5bd6;
    --c2: #9b5de5;
}

.ic-blue {
    --c1: #1c7ed6;
    --c2: #22b8cf;
}

.ic-red {
    --c1: #f03e3e;
    --c2: #f783ac;
}

.ic-teal {
    --c1: #0ca678;
    --c2: #38d9a9;
}

.ic-orange {
    --c1: #f76707;
    --c2: #ffa94d;
}

.ic-indigo {
    --c1: #3b5bdb;
    --c2: #748ffc;
}

.ic-green {
    --c1: #2b8a3e;
    --c2: #69db7c;
}

.ic-pink {
    --c1: #ae3ec9;
    --c2: #f06595;
}

.ic-cyan {
    --c1: #0b7285;
    --c2: #3bc9db;
}

.ic-gold {
    --c1: #f59f00;
    --c2: #ffd43b;
}

/* پنل باز شده */
.MainSidebarNav .mud-panel-expanded {
    background: var(--ui-soft) !important;
}

    .MainSidebarNav .mud-panel-expanded .mud-expand-panel-text {
        color: var(--ui-p) !important;
        font-weight: 700;
    }

.MainSidebarNav .mud-expand-panel-content {
    padding: 0 8px 8px !important;
}

    .MainSidebarNav .mud-expand-panel-content a {
        display: block;
        padding: 8px 14px 8px 8px;
        margin: 2px 0;
        border-radius: 10px;
        color: var(--ui-muted) !important;
        font-size: .9em;
        position: relative;
        transition: .2s;
    }

        .MainSidebarNav .mud-expand-panel-content a::before { /* نقطه کوچک کنار زیرمنو */
            content: "";
            position: absolute;
            right: 2px;
            top: 50%;
            width: 6px;
            height: 6px;
            margin-top: -3px;
            border-radius: 50%;
            background: #c9cce3;
        }

        .MainSidebarNav .mud-expand-panel-content a:hover {
            background: var(--ui-card);
            color: var(--ui-text) !important;
            font-weight: 500;
        }

        .MainSidebarNav .mud-expand-panel-content a.active {
            background: var(--ui-card);
            color: var(--ui-p) !important;
            font-weight: 700;
            box-shadow: var(--ui-shadow);
        }

            .MainSidebarNav .mud-expand-panel-content a.active::before {
                background: var(--ui-p);
            }

.MainSidebarNav .mud-expand-panel-icon {
    fill: var(--ui-muted) !important;
}

/* =========================================================
   هدر بالا
   ========================================================= */
.HeaderMainNavbar {
    background: rgba(244, 245, 251, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0;
    padding-bottom: .6em;
}

    .HeaderMainNavbar .mud-icon-button {
        background: var(--ui-card);
        border-radius: 12px !important;
        box-shadow: var(--ui-shadow);
        margin: 0 3px;
        padding: 8px !important;
        transition: .2s;
    }

        .HeaderMainNavbar .mud-icon-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--ui-shadow-hover);
        }

        .HeaderMainNavbar .mud-icon-button svg {
            fill: var(--ui-p) !important;
        }

    .HeaderMainNavbar .DateShow {
        background: var(--ui-card);
        box-shadow: var(--ui-shadow);
        border-radius: 12px;
        padding: 2px 4px 2px 14px;
        color: var(--ui-text);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .HeaderMainNavbar .DateShow .mud-icon-button {
            box-shadow: none;
            background: var(--ui-soft);
            transform: scale(.85);
        }

/* پنجره‌های کشویی هدر (پیام‌ها، اعلانات، پروفایل) */
.DropMenu {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(31, 35, 64, .18);
    border: 1px solid var(--ui-border);
}

    .DropMenu a {
        border-radius: 10px;
        transition: .2s;
    }

        .DropMenu a:hover {
            background: var(--ui-soft);
        }

.BeforCircle:before {
    background-color: var(--ui-red) !important;
    width: .45em !important;
    height: .45em !important;
}


/* =========================================================
   مرحله ۲: بنر خوش‌آمد داشبورد
   ========================================================= */
.dh-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    flex: 0 0 calc(100% - 2em); /* داخل WindowsBox کل عرض را بگیرد */
    margin: 1em 1em 0;
    border-radius: 24px;
    background: linear-gradient(120deg, #5b5bd6 0%, #9b5de5 55%, #f15bb5 100%);
    box-shadow: 0 16px 36px -12px rgba(91, 91, 214, .55);
    animation: dh-in .5s ease-out;
}

    .dh-hero::before, .dh-hero::after { /* دایره‌های تزئینی */
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        pointer-events: none;
    }

    .dh-hero::before {
        width: 280px;
        height: 280px;
        left: -70px;
        top: -120px;
    }

    .dh-hero::after {
        width: 170px;
        height: 170px;
        left: 200px;
        bottom: -100px;
    }

    .dh-hero * {
        color: #fff;
    }

.dh-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.dh-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85em;
    opacity: .9;
    margin-bottom: 6px;
}

    .dh-date .mud-icon-root {
        fill: #fff;
    }

.dh-hero h1 {
    font-size: 1.75em;
    font-weight: 900;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh-greet-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd43b, #ff922b);
    display: inline-grid;
    place-items: center;
    box-shadow: 0 6px 14px rgba(255, 146, 43, .45);
    animation: dh-spin 6s linear infinite;
}

    .dh-greet-ic .mud-icon-root {
        fill: #fff;
    }

.dh-hero p {
    margin: 8px 0 0;
    opacity: .92;
    font-size: 1em;
}

.dh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.dh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: .85em;
    font-weight: 500;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    text-decoration: none !important;
    transition: .2s;
}

    .dh-chip .mud-icon-root {
        fill: #fff;
        width: 18px;
        height: 18px;
    }

a.dh-chip:hover {
    background: rgba(255, 255, 255, .32);
    color: #fff;
}

.dh-chip-hot {
    background: rgba(255, 80, 80, .35);
    border-color: rgba(255, 200, 200, .5);
}

/* حلقه پیشرفت */
.dh-ring-box {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.dh-ring {
    --pct: 0;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: conic-gradient(#ffd43b calc(var(--pct) * 1%), rgba(255, 255, 255, .22) 0);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
}

.dh-ring-in {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #7b5ce0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

    .dh-ring-in b {
        font-size: 1.6em;
        font-weight: 900;
    }

    .dh-ring-in small {
        font-size: .72em;
        opacity: .9;
    }

@keyframes dh-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes dh-spin {
    0%, 85% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 600px) {
    .dh-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 16px;
        margin: .5em 0 0;
        flex-basis: 100%;
    }

        .dh-hero h1 {
            font-size: 1.35em;
        }

    .dh-ring-box {
        align-self: center;
    }
}


/* =========================================================
   مرحله ۳: کارت‌های آمار داشبورد
   ========================================================= */
.kpi-grid {
    flex: 0 0 calc(100% - 2em);
    margin: 18px 1em 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.kpi-card {
    --c1: #5b5bd6;
    --c2: #9b5de5;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    background: var(--ui-card);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    text-decoration: none !important;
    transition: transform .25s, box-shadow .25s;
    animation: dh-in .5s ease-out both;
}

    .kpi-card:nth-child(2) {
        animation-delay: .07s;
    }

    .kpi-card:nth-child(3) {
        animation-delay: .14s;
    }

    .kpi-card:nth-child(4) {
        animation-delay: .21s;
    }

    .kpi-card::after { /* هاله رنگی گوشه کارت */
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        left: -45px;
        top: -55px;
        background: linear-gradient(135deg, var(--c1), var(--c2));
        opacity: .08;
        transition: .3s;
    }

    .kpi-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--ui-shadow-hover);
    }

        .kpi-card:hover::after {
            opacity: .16;
            transform: scale(1.15);
        }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kpi-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

    .kpi-ic .mud-icon-root {
        width: 24px;
        height: 24px;
    }

.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .8em;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

    .kpi-trend .mud-icon-root {
        width: 16px;
        height: 16px;
    }

    .kpi-trend.up {
        background: #e6fcf5;
        color: var(--ui-green) !important;
    }

        .kpi-trend.up .mud-icon-root {
            fill: var(--ui-green);
        }

    .kpi-trend.down {
        background: #fff0f3;
        color: var(--ui-red) !important;
    }

        .kpi-trend.down .mud-icon-root {
            fill: var(--ui-red);
        }

.kpi-value {
    font-size: 2em;
    font-weight: 900;
    color: var(--ui-text) !important;
    line-height: 1.2;
}

    .kpi-value small {
        font-size: .45em;
        font-weight: 500;
        color: var(--ui-muted) !important;
    }

.kpi-title {
    color: var(--ui-muted) !important;
    font-weight: 500;
}

.kpi-bars {
    height: 38px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 10px;
}

    .kpi-bars i {
        flex: 1;
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient(180deg, var(--c2), var(--c1));
        opacity: .35;
        transition: .3s;
    }

        .kpi-bars i:last-child {
            opacity: 1;
        }

.kpi-card:hover .kpi-bars i {
    opacity: .8;
}

.kpi-progress {
    height: 8px;
    border-radius: 10px;
    background: var(--ui-soft);
    margin-top: 14px;
    overflow: hidden;
}

    .kpi-progress i {
        display: block;
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--c2), var(--c1));
    }

.kpi-foot {
    font-size: .78em;
    color: var(--ui-muted) !important;
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kpi-grid {
        flex-basis: 100%;
        margin: 14px 0 0;
        gap: 12px;
    }

    .kpi-card {
        padding: 14px;
    }

    .kpi-value {
        font-size: 1.6em;
    }

    .kpi-bars {
        display: none;
    }
}

/* =========================================================
   مرحله ۴: دسترسی سریع
   ========================================================= */
.qa-box {
    flex: 0 0 calc(100% - 2em);
    margin: 18px 1em 0;
    padding: 18px 20px 20px;
    background: var(--ui-card);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    animation: dh-in .5s ease-out both;
}

.qa-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .qa-head h3 {
        margin: 0;
        font-size: 1.05em;
        font-weight: 900;
        color: var(--ui-text) !important;
    }

.qa-head-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

    .qa-head-ic .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.qa-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.qa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 6px 12px;
    border-radius: 16px;
    text-decoration: none !important;
    transition: background .2s, transform .2s;
}

    .qa-item:hover {
        background: var(--ui-soft);
        transform: translateY(-3px);
    }

.qa-ic {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    box-shadow: 0 10px 20px -6px var(--c1);
}

    .qa-ic .mud-icon-root {
        width: 28px;
        height: 28px;
    }

.qa-item:hover .qa-ic {
    transform: scale(1.08) rotate(-6deg);
}

.qa-txt {
    font-size: .85em;
    font-weight: 500;
    color: var(--ui-text) !important;
    text-align: center !important;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .qa-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .qa-box {
        flex-basis: 100%;
        margin: 14px 0 0;
        padding: 14px;
    }

    .qa-grid {
        gap: 6px;
    }

    .qa-ic {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

        .qa-ic .mud-icon-root {
            width: 24px;
            height: 24px;
        }

    .qa-txt {
        font-size: .75em;
    }
}

/* =========================================================
   مرحله ۵: وظایف من به شکل کارت
   ========================================================= */
.tk-box {
    flex: 0 0 calc(100% - 2em);
    margin: 18px 1em 0;
    padding: 18px 20px 14px;
    background: var(--ui-card);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    animation: dh-in .5s ease-out both;
}

.tk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tk-head-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

    .tk-head-ic .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.tk-head-txt h3 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 900;
    color: var(--ui-text) !important;
}

.tk-head-txt small {
    color: var(--ui-muted) !important;
    font-size: .78em;
}

.tk-tabs {
    margin-right: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tk-tab {
    cursor: pointer;
    user-select: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ui-soft);
    color: var(--ui-muted) !important;
    font-size: .8em;
    font-weight: 500;
    transition: background .2s, color .2s;
}

    .tk-tab b {
        display: inline-block;
        min-width: 20px;
        padding: 0 5px;
        margin-right: 4px;
        border-radius: 999px;
        background: #fff;
        color: var(--ui-text) !important;
        text-align: center;
        font-size: .9em;
    }

    .tk-tab:hover {
        color: var(--ui-p) !important;
    }

    .tk-tab.on {
        background: var(--ui-grad);
        color: #fff !important;
    }

        .tk-tab.on b {
            background: rgba(255,255,255,.25);
            color: #fff !important;
        }

.tk-tab-hot:not(.on) {
    background: #fff4e6;
    color: #e8590c !important;
}

/* رنگ اولویت‌ها */
.pr-3 {
    --pr: var(--ui-red);
    --pr-bg: #fff0f3;
}

.pr-2 {
    --pr: var(--ui-orange);
    --pr-bg: #fff4e6;
}

.pr-1 {
    --pr: var(--ui-blue);
    --pr-bg: #e7f5ff;
}

.tk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tk-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 10px;
    background: #f8f9fd;
    border-radius: 14px;
    border-right: 4px solid var(--pr);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
    animation: dh-in .4s ease-out both;
}

    .tk-item:hover {
        background: #fff;
        transform: translateX(-3px);
        box-shadow: var(--ui-shadow-hover);
    }

.tk-late {
    background: #fff5f6;
}

.tk-ok {
    opacity: .75;
}

    .tk-ok .tk-name {
        text-decoration: line-through;
        color: var(--ui-muted) !important;
    }

.tk-main {
    flex: 1;
    min-width: 0;
}

.tk-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tk-name {
    font-weight: 700;
    color: var(--ui-text) !important;
    font-size: .95em;
}

.tk-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px 2px 10px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    color: var(--pr) !important;
    background: var(--pr-bg);
}

    .tk-pill .mud-icon-root {
        width: 15px;
        height: 15px;
        fill: var(--pr) !important;
    }

.tk-pill-late .mud-icon-root {
    fill: #fff !important;
}

.tk-pill-late {
    color: #fff !important;
    background: var(--ui-red);
    animation: tk-pulse 1.6s ease-in-out infinite;
}

@keyframes tk-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(240,80,110,.45);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(240,80,110,0);
    }
}

.tk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
}

    .tk-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .78em;
        color: var(--ui-muted) !important;
    }

    .tk-meta .mud-icon-root {
        width: 15px;
        height: 15px;
        opacity: .8;
    }

.tk-late .tk-meta span:first-child {
    color: var(--ui-red) !important;
    font-weight: 700;
}

.tk-meta .tk-msg {
    color: var(--ui-p) !important;
}

.tk-msg .mud-icon-root {
    fill: var(--ui-p) !important;
}

/* سه مرحله: ثبت ← انجام شد ← تایید */
.tk-steps {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .tk-steps i {
        width: 18px;
        height: 3px;
        background: var(--ui-border);
        border-radius: 3px;
    }

        .tk-steps i.on {
            background: var(--ui-green);
        }

.tk-step {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ui-border);
    color: #fff !important;
}

    .tk-step .mud-icon-root {
        width: 15px;
        height: 15px;
        fill: #fff !important;
        color: #fff !important;
    }

    .tk-step.on {
        background: var(--ui-green);
        box-shadow: 0 4px 10px -3px var(--ui-green);
    }

.tk-go {
    color: #b8bcd6 !important;
    display: grid;
    place-items: center;
    transition: transform .2s, color .2s;
}

.tk-item:hover .tk-go {
    color: var(--ui-p) !important;
    transform: translateX(-3px);
}

.tk-more {
    margin-top: 10px;
    text-align: center !important;
    cursor: pointer;
    color: var(--ui-p) !important;
    font-size: .85em;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.tk-empty {
    text-align: center !important;
    padding: 20px 0 14px;
}

.tk-empty-ic {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    margin: 0 auto 10px;
}

    .tk-empty-ic .mud-icon-root {
        width: 28px;
        height: 28px;
    }

.tk-empty p {
    color: var(--ui-muted) !important;
    margin: 0;
}

@media (max-width: 600px) {
    .tk-box {
        flex-basis: 100%;
        margin: 14px 0 0;
        padding: 14px 12px;
    }

    .tk-tabs {
        margin-right: 0;
        width: 100%;
    }

    .tk-item {
        padding: 10px 12px 10px 6px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .tk-steps {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        padding-right: 2px;
    }

    .tk-go {
        display: none;
    }
}

/* =========================================================
   مرحله ۶: اعلانات، همکاران، نقشه کارکرد
   ========================================================= */

/* چیدمان: وظایف سمت راست، ستون کناری سمت چپ */
.dash-row {
    flex: 0 0 calc(100% - 2em);
    margin: 18px 1em 0;
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

    .dash-row .tk-box {
        margin: 0;
    }

.dash-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* قاب مشترک باکس‌های کناری */
.side-box, .wm-box {
    padding: 18px 18px 16px;
    background: var(--ui-card);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    animation: dh-in .5s ease-out both;
}

.wm-box {
    flex: 0 0 calc(100% - 2em);
    margin: 18px 1em 0;
}

.side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .side-head h3 {
        margin: 0;
        font-size: 1em;
        font-weight: 900;
        color: var(--ui-text) !important;
    }

.side-head-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

    .side-head-ic .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.side-badge {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--ui-red);
    color: #fff !important;
    font-size: .72em;
    font-weight: 700;
}

.side-all {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--ui-soft);
    color: var(--ui-p) !important;
    font-size: .78em;
    font-weight: 700;
    text-decoration: none !important;
}

    .side-all .mud-icon-root {
        width: 18px;
        height: 18px;
        fill: var(--ui-p) !important;
    }

    .side-all:hover {
        background: var(--ui-p);
        color: #fff !important;
    }

        .side-all:hover .mud-icon-root {
            fill: #fff !important;
        }

.side-empty {
    text-align: center !important;
    padding: 10px 0 4px;
    color: var(--ui-muted) !important;
}

    .side-empty .mud-icon-root {
        width: 34px;
        height: 34px;
        fill: #c9cce3 !important;
    }

    .side-empty p {
        margin: 4px 0 0;
        font-size: .85em;
        color: var(--ui-muted) !important;
    }

.side-more {
    display: block;
    margin-top: 10px;
    text-align: center !important;
    font-size: .8em;
    font-weight: 700;
    color: var(--ui-p) !important;
}

/* ---------- اعلانات ---------- */
.el-list {
    display: flex;
    flex-direction: column;
}

.el-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ui-border);
}

    .el-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .el-item:first-child {
        padding-top: 0;
    }

.el-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.el-body {
    flex: 1;
    min-width: 0;
}

    .el-body b {
        display: block;
        font-size: .9em;
        color: var(--ui-text) !important;
    }

    .el-body p {
        margin: 2px 0 0;
        font-size: .8em;
        color: var(--ui-muted) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .el-body small {
        display: block;
        margin-top: 3px;
        font-size: .72em;
        color: #a3a7c2 !important;
    }

.el-acts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .el-acts a, .el-acts span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: var(--ui-soft);
        cursor: pointer;
        transition: background .2s;
    }

    .el-acts .mud-icon-root {
        width: 17px;
        height: 17px;
        fill: var(--ui-muted) !important;
    }

    .el-acts span:hover {
        background: var(--ui-green);
    }

    .el-acts a:hover {
        background: var(--ui-p);
    }

        .el-acts span:hover .mud-icon-root, .el-acts a:hover .mud-icon-root {
            fill: #fff !important;
        }

/* ---------- همکاران ---------- */
.tm-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78em;
    color: var(--ui-muted) !important;
}

    .tm-count .tm-dot {
        position: static;
        border: 0;
    }

.tm-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 6px;
}

.tm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
}

    .tm-item small {
        font-size: .72em;
        color: var(--ui-muted) !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.tm-av {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff !important;
    font-weight: 700;
    font-size: .9em;
    box-shadow: 0 6px 14px -6px var(--c1);
    transition: transform .2s;
}

    .tm-av img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
    }

    .tm-av .tm-dot {
        z-index: 1;
    }

.tm-item:hover .tm-av {
    transform: translateY(-3px) scale(1.05);
}

.tm-more {
    --c1: #c9cce3;
    --c2: #dee1f0;
    color: var(--ui-text) !important;
}

.tm-dot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #adb5bd;
}

    .tm-dot.st-1 {
        background: var(--ui-green);
    }

    .tm-dot.st-2 {
        background: var(--ui-orange);
    }

/* ---------- نقشه کارکرد ---------- */
.wm-wrap {
    display: flex;
    gap: 8px;
}

.wm-days {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 5px;
}

    .wm-days small {
        font-size: .72em;
        color: var(--ui-muted) !important;
        display: flex;
        align-items: center;
    }

.wm-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.wm-col {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 5px;
}

.wm-cell {
    display: block;
    height: 22px;
    border-radius: 6px;
    background: #eef0f7;
    transition: transform .15s;
}

    .wm-cell:not(.wm-future):hover {
        transform: scale(1.15);
    }

    .wm-cell.lv-1 {
        background: #d0d0f7;
    }

    .wm-cell.lv-2 {
        background: #a5a5ee;
    }

    .wm-cell.lv-3 {
        background: #7b7be2;
    }

    .wm-cell.lv-4 {
        background: var(--ui-p);
    }

    .wm-cell.wm-future {
        background: transparent;
        border: 1px dashed var(--ui-border);
    }

    .wm-cell.wm-today {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ui-orange);
    }

.wm-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.wm-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .wm-stats span {
        font-size: .8em;
        color: var(--ui-muted) !important;
    }

    .wm-stats b {
        color: var(--ui-text) !important;
        font-size: 1.1em;
    }

.wm-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72em;
    color: var(--ui-muted) !important;
}

    .wm-legend .wm-cell {
        width: 14px;
        height: 14px;
        border-radius: 4px;
    }

@media (max-width: 1100px) {
    .dash-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dash-row {
        flex-basis: 100%;
        margin: 14px 0 0;
        gap: 14px;
    }

    .dash-side {
        gap: 14px;
    }

    .wm-box {
        flex-basis: 100%;
        margin: 14px 0 0;
        padding: 14px 12px;
    }

    .tm-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .wm-cell {
        height: 18px;
    }
}

/* ---------- وظایف: فلش ماه، لیست/تقویم ---------- */
.tk-month {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .tk-month b {
        min-width: 92px;
        text-align: center !important;
        font-size: .9em;
        color: var(--ui-text) !important;
    }

.tk-nav {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--ui-soft);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

    .tk-nav .mud-icon-root {
        width: 20px;
        height: 20px;
        fill: var(--ui-p) !important;
    }

    .tk-nav:hover {
        background: var(--ui-p);
        transform: scale(1.06);
    }

        .tk-nav:hover .mud-icon-root {
            fill: #fff !important;
        }

.tk-now {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff4e6;
    color: #e8590c !important;
    font-size: .75em;
    font-weight: 700;
}

.tk-view {
    display: flex;
    padding: 3px;
    border-radius: 12px;
    background: var(--ui-soft);
}

    .tk-view span {
        width: 32px;
        height: 28px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background .2s;
    }

    .tk-view .mud-icon-root {
        width: 18px;
        height: 18px;
        fill: var(--ui-muted) !important;
    }

    .tk-view span.on {
        background: #fff;
        box-shadow: 0 2px 6px rgba(31,35,64,.12);
    }

        .tk-view span.on .mud-icon-root {
            fill: var(--ui-p) !important;
        }

.tk-tabs-row {
    margin-bottom: 14px;
}

    .tk-tabs-row .tk-tabs {
        margin-right: 0;
    }

/* تقویم ماه */
.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.cal-dn {
    text-align: center !important;
    font-size: .75em;
    font-weight: 700;
    color: var(--ui-muted) !important;
    padding-bottom: 2px;
}

.cal-day {
    min-height: 96px;
    padding: 6px;
    border-radius: 12px;
    background: #f8f9fd;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cal-blank {
    background: transparent;
}

.cal-fri {
    background: #fff6f6;
}

    .cal-fri .cal-num {
        color: var(--ui-red) !important;
    }

.cal-today {
    background: #fff;
    box-shadow: 0 0 0 2px var(--ui-p);
}

    .cal-today .cal-num {
        background: var(--ui-grad);
        color: #fff !important;
    }

.cal-num {
    align-self: flex-start;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .8em;
    font-weight: 700;
    color: var(--ui-text) !important;
}

.cal-chip {
    border-right: 3px solid var(--pr);
    border-radius: 7px;
    padding: 3px 6px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(31,35,64,.08);
    transition: transform .15s, box-shadow .15s;
    min-width: 0;
}

    .cal-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(31,35,64,.14);
    }

    .cal-chip small {
        display: block;
        font-size: .65em;
        color: var(--ui-muted) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cal-chip span {
        display: block;
        font-size: .75em;
        font-weight: 500;
        color: var(--ui-text) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cal-chip.cal-v1 {
        background: #e6fcf5;
    }

    .cal-chip.cal-v2 {
        background: #ebfbee;
        opacity: .7;
    }

        .cal-chip.cal-v2 span {
            text-decoration: line-through;
        }

.cal-more {
    font-size: .7em;
    font-weight: 700;
    color: var(--ui-p) !important;
    cursor: pointer;
    padding-right: 2px;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: .75em;
    color: var(--ui-muted) !important;
}

    .cal-legend span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .cal-legend i {
        width: 14px;
        height: 14px;
        border-radius: 4px;
        border: 1px solid var(--ui-border);
        background: #fff;
    }

        .cal-legend i.cal-v1 {
            background: #e6fcf5;
        }

        .cal-legend i.cal-v2 {
            background: #ebfbee;
        }

.cal-legend-sep {
    margin-right: auto;
}

@media (max-width: 600px) {
    .tk-month {
        margin-right: 0;
        order: 3;
    }

    .tk-view {
        order: 2;
        margin-right: auto;
    }

    .cal {
        gap: 3px;
    }

    .cal-dn {
        font-size: .6em;
    }

    .cal-day {
        min-height: 54px;
        padding: 3px;
        border-radius: 8px;
    }

    .cal-chip {
        padding: 2px 3px;
    }

        .cal-chip small {
            display: none;
        }

        .cal-chip span {
            font-size: .6em;
        }
}

/* ---------- ویجت مسابقات من (ظاهر جدید) ---------- */
.dash-row-2 {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

    .dash-row-2 .wm-box {
        margin: 0;
    }

.gw-box {
    padding: 18px 18px 16px;
    background: var(--ui-card);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    animation: dh-in .5s ease-out both;
}

.gw-practice {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: auto;
    padding: 4px 10px 4px 12px;
    border-radius: 999px;
    background: #fff9db;
    color: #e67700 !important;
    font-size: .78em;
    font-weight: 700;
    text-decoration: none !important;
}

    .gw-practice .mud-icon-root {
        width: 17px;
        height: 17px;
        fill: #f59f00 !important;
    }

    .gw-practice + .side-all {
        margin-right: 0;
    }

/* کارت بازی امروز */
.gw-today {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 14px 16px 16px;
    margin-bottom: 14px;
    color: #fff !important;
    background: linear-gradient(120deg, #ff512f, #dd2476 55%, #5b5bd6);
    box-shadow: 0 12px 26px -8px rgba(221, 36, 118, .55);
}

    .gw-today::before, .gw-today::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
    }

    .gw-today::before {
        width: 150px;
        height: 150px;
        left: -40px;
        top: -60px;
    }

    .gw-today::after {
        width: 90px;
        height: 90px;
        right: 30%;
        bottom: -50px;
    }

.gw-today-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-weight: 900;
    font-size: .9em;
    color: #fff !important;
}

    .gw-today-label > .mud-icon-root {
        width: 20px;
        height: 20px;
        fill: #ffd43b !important;
        animation: tk-pulse-ic 1.2s ease-in-out infinite;
    }

.gw-league {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: .8em;
    font-weight: 500;
    color: #fff !important;
}

    .gw-league .mud-icon-root {
        width: 15px;
        height: 15px;
        fill: #fff !important;
    }

@keyframes tk-pulse-ic {
    50% {
        transform: scale(1.25);
    }
}

.gw-today-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gw-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .gw-player .gm-avatar {
        border: 3px solid rgba(255, 255, 255, .9);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    }

    .gw-player small {
        color: #fff !important;
        font-weight: 700;
        font-size: .78em;
        max-width: 90px;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.gw-vs {
    font-weight: 900;
    font-size: .9em;
    letter-spacing: 1px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    border: 2px solid rgba(255, 255, 255, .5);
    color: #fff !important;
    margin-bottom: 20px;
    animation: gw-vs 1.4s ease-in-out infinite;
}

@keyframes gw-vs {
    50% {
        transform: scale(1.15) rotate(-6deg);
    }
}

.gw-btn {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 14px;
    background: #fff;
    color: var(--ui-p) !important;
    font-family: inherit;
    font-weight: 900;
    font-size: .9em;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35);
    transition: transform .2s;
}

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

    .gw-btn .mud-icon-root {
        width: 20px;
        height: 20px;
    }

.gw-btn-play {
    background: linear-gradient(135deg, #ffd43b, #f59f00);
    color: #5c3c00 !important;
    animation: gw-glow 2s ease-in-out infinite;
}

    .gw-btn-play .mud-icon-root {
        fill: #5c3c00 !important;
    }

@keyframes gw-glow {
    0%, 100% {
        box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 212, 59, .7);
    }

    50% {
        box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35), 0 0 0 8px rgba(255, 212, 59, 0);
    }
}

/* دو ستون: بعدی و نتایج */
.gw-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.gw-col-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-weight: 900;
    font-size: .82em;
    color: var(--ui-muted) !important;
}

    .gw-col-title .mud-icon-root {
        width: 17px;
        height: 17px;
        fill: var(--ui-p) !important;
    }

.gw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: #f8f9fd;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

    .gw-row:hover {
        background: var(--ui-soft);
        transform: translateX(-3px);
    }

.gw-row-main {
    flex: 1;
    min-width: 0;
}

    .gw-row-main b {
        display: block;
        font-size: .82em;
        color: var(--ui-text) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gw-row-main small {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: .7em;
        color: var(--ui-muted) !important;
        white-space: nowrap;
        overflow: hidden;
    }

        .gw-row-main small .mud-icon-root {
            width: 13px;
            height: 13px;
            fill: var(--ui-muted) !important;
        }

.gw-date {
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--ui-p) !important;
    font-size: .7em;
    font-weight: 700;
    white-space: nowrap;
}

.gw-res {
    min-width: 44px;
    padding: 5px 6px;
    border-radius: 10px;
    text-align: center !important;
    font-size: .7em;
    font-weight: 900;
}

.gw-res-W {
    background: linear-gradient(135deg, #2b8a3e, #69db7c);
    color: #fff !important;
}

.gw-res-D {
    background: linear-gradient(135deg, #f59f00, #ffd43b);
    color: #5c3c00 !important;
}

.gw-res-L {
    background: linear-gradient(135deg, #f03e3e, #f783ac);
    color: #fff !important;
}

.gw-score {
    font-weight: 900;
    font-size: .95em;
    color: var(--ui-text) !important;
    white-space: nowrap;
    direction: ltr;
}

.gw-none {
    padding: 10px;
    border-radius: 12px;
    background: #f8f9fd;
    text-align: center !important;
    font-size: .78em;
    color: var(--ui-muted) !important;
}

/* بدون مسابقه */
.gw-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5b5bd6, #9b5de5);
    color: #fff !important;
    cursor: pointer;
    transition: transform .2s;
}

    .gw-empty:hover {
        transform: translateY(-2px);
    }

    .gw-empty b {
        color: #fff !important;
    }

    .gw-empty p {
        margin: 2px 0 0;
        font-size: .8em;
        color: rgba(255, 255, 255, .85) !important;
    }

.gw-empty-dots {
    display: grid;
    grid-template-columns: repeat(3, 8px);
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .15);
}

    .gw-empty-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
    }

        .gw-empty-dots span:nth-child(odd) {
            background: #ffd43b;
        }

.gw-go {
    margin-right: auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #ffd43b;
}

    .gw-go .mud-icon-root {
        fill: #5c3c00 !important;
    }

@media (max-width: 600px) {
    .dash-row-2 {
        grid-template-columns: 1fr;
    }

    .gw-box {
        padding: 14px 12px;
    }

    .gw-cols {
        grid-template-columns: 1fr;
    }

    .gw-btn {
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   مرحله ۷: داشبورد مشتری
   ========================================================= */
.cu-hero {
    background: linear-gradient(120deg, #0ca678 0%, #1c7ed6 55%, #5b5bd6 100%);
    box-shadow: 0 16px 36px -12px rgba(28, 126, 214, .55);
}

.cu-cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cu-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 26px;
    border-radius: 18px;
    background: #fff;
    color: var(--ui-p) !important;
    font-size: 1.1em;
    font-weight: 900;
    text-decoration: none !important;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
    transition: transform .2s, box-shadow .2s;
    animation: cu-float 3s ease-in-out infinite;
}

.cu-hero .cu-cta-btn, .cu-hero .cu-cta-btn * {
    color: var(--ui-p) !important;
}

.cu-cta-btn .mud-icon-root {
    width: 26px;
    height: 26px;
    fill: var(--ui-p) !important;
}

.cu-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
}

.cu-cta-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82em;
    opacity: .9;
    text-decoration: none !important;
}

    .cu-cta-sub:hover {
        opacity: 1;
        text-decoration: underline !important;
    }

    .cu-cta-sub .mud-icon-root {
        fill: #fff;
    }

@keyframes cu-float {
    50% {
        transform: translateY(-4px);
    }
}

.cu-section {
    flex: 0 0 calc(100% - 2em);
    margin: 22px 1em 0;
}

.cu-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cu-prod {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 200px;
    padding: 18px;
    border-radius: var(--ui-radius);
    text-decoration: none !important;
    transition: transform .25s, box-shadow .25s;
    animation: dh-in .5s ease-out both;
}

    .cu-prod:hover {
        transform: translateY(-4px);
    }

    .cu-prod b {
        margin-top: 12px;
        font-size: 1.25em;
        font-weight: 900;
    }

    .cu-prod small {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .8em;
    }

        .cu-prod small .tm-dot {
            position: static;
            border: 0;
            width: 9px;
            height: 9px;
        }

/* محصول فعال: کارت رنگی */
.cu-owned {
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 16px 30px -14px var(--c1);
}

    .cu-owned::after {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        left: -50px;
        bottom: -70px;
        background: rgba(255, 255, 255, .14);
    }

    .cu-owned b, .cu-owned small {
        color: #fff !important;
    }

    .cu-owned:hover {
        box-shadow: 0 22px 36px -14px var(--c1);
    }

.cu-prod-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
}

    .cu-prod-ic .mud-icon-root {
        width: 28px;
        height: 28px;
        fill: #fff !important;
    }

.cu-prod-btn {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: .85em;
    font-weight: 700;
}

    .cu-prod-btn .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.cu-owned .cu-prod-btn {
    background: #fff;
    color: var(--c1) !important;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.3);
}

    .cu-owned .cu-prod-btn .mud-icon-root {
        fill: var(--c1) !important;
    }

/* محصولی که ندارد: کارت روشن با خط‌چین */
.cu-not {
    background: var(--ui-card);
    border: 2px dashed var(--ui-border);
}

    .cu-not:hover {
        border-color: var(--c1);
        box-shadow: var(--ui-shadow);
    }

.cu-prod-ic2 {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    opacity: .85;
}

    .cu-prod-ic2 .mud-icon-root {
        width: 28px;
        height: 28px;
    }

.cu-not b {
    color: var(--ui-text) !important;
}

.cu-not small {
    color: var(--ui-muted) !important;
}

.cu-not .cu-prod-btn {
    background: var(--ui-soft);
    color: var(--ui-p) !important;
}

    .cu-not .cu-prod-btn .mud-icon-root {
        fill: var(--ui-p) !important;
    }

.cu-not:hover .cu-prod-btn {
    background: var(--ui-grad);
    color: #fff !important;
}

    .cu-not:hover .cu-prod-btn .mud-icon-root {
        fill: #fff !important;
    }

/* پیگیری تیکت */
.ct-item {
    display: block;
    padding: 14px 16px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: #f8f9fd;
    text-decoration: none !important;
    transition: background .2s, box-shadow .2s;
}

    .ct-item:last-child {
        margin-bottom: 0;
    }

    .ct-item:hover {
        background: #fff;
        box-shadow: var(--ui-shadow-hover);
    }

.ct-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .ct-top b {
        font-size: .95em;
        color: var(--ui-text) !important;
    }

    .ct-top small {
        margin-right: auto;
        color: #a3a7c2 !important;
        font-size: .78em;
        direction: ltr;
    }

.ct-st {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
}

.ct-st-0 {
    background: #e7f5ff;
    color: var(--ui-blue) !important;
}

.ct-st-1 {
    background: #fff4e6;
    color: #e8590c !important;
}

.ct-st-2 {
    background: #e6fcf5;
    color: var(--ui-green) !important;
}

.ct-st-3 {
    background: #f1f3f5;
    color: var(--ui-muted) !important;
}

.ct-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

    .ct-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .75em;
        color: var(--ui-muted) !important;
    }

    .ct-meta .mud-icon-root {
        width: 14px;
        height: 14px;
        fill: var(--ui-muted) !important;
    }

.ct-steps {
    display: flex;
    align-items: flex-start;
    margin-top: 14px;
}

    .ct-steps > i {
        flex: 1;
        height: 3px;
        margin-top: 13px;
        border-radius: 3px;
        background: var(--ui-border);
    }

        .ct-steps > i.done {
            background: var(--ui-green);
        }

.ct-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 74px;
    flex-shrink: 0;
}

    .ct-step > span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--ui-border);
        color: var(--ui-muted) !important;
        font-size: .78em;
        font-weight: 700;
    }

        .ct-step > span .mud-icon-root {
            width: 17px;
            height: 17px;
            fill: #fff !important;
        }

    .ct-step small {
        font-size: .7em;
        color: var(--ui-muted) !important;
        white-space: nowrap;
    }

    .ct-step.done > span {
        background: var(--ui-green);
        box-shadow: 0 4px 10px -3px var(--ui-green);
    }

    .ct-step.now > span {
        background: var(--ui-orange);
        color: #fff !important;
        box-shadow: 0 0 0 4px #fff4e6;
        animation: tk-pulse 1.6s ease-in-out infinite;
    }

    .ct-step.now small {
        color: #e8590c !important;
        font-weight: 700;
    }

/* تازه‌ها */
.nw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ui-border);
    text-decoration: none !important;
}

    .nw-item:first-of-type {
        padding-top: 0;
    }

    .nw-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .nw-item b {
        display: block;
        font-size: .88em;
        line-height: 1.6;
        color: var(--ui-text) !important;
    }

    .nw-item small {
        font-size: .72em;
        color: var(--ui-muted) !important;
    }

    .nw-item:hover b {
        color: var(--ui-p) !important;
    }

.nw-pic {
    width: 64px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ui-soft);
}

@media (max-width: 1100px) {
    .cu-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cu-cta {
        align-self: stretch;
    }

    .cu-cta-btn {
        justify-content: center;
        width: 100%;
    }

    .cu-section {
        flex-basis: 100%;
        margin: 18px 0 0;
    }

    .cu-products {
        gap: 12px;
    }

    .cu-prod {
        min-height: 170px;
        padding: 14px;
    }

    .ct-step {
        width: 56px;
    }

        .ct-step small {
            font-size: .62em;
        }
}


/* =========================================================
   مرحله ۷: داشبورد مشتری
   ========================================================= */
.cu-hero {
    background: linear-gradient(120deg, #0ca678 0%, #1c7ed6 55%, #5b5bd6 100%);
    box-shadow: 0 16px 36px -12px rgba(28, 126, 214, .55);
}

.cu-cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cu-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 26px;
    border-radius: 18px;
    background: #fff;
    color: var(--ui-p) !important;
    font-size: 1.1em;
    font-weight: 900;
    text-decoration: none !important;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
    transition: transform .2s, box-shadow .2s;
    animation: cu-float 3s ease-in-out infinite;
}

.cu-hero .cu-cta-btn, .cu-hero .cu-cta-btn * {
    color: var(--ui-p) !important;
}

.cu-cta-btn .mud-icon-root {
    width: 26px;
    height: 26px;
    fill: var(--ui-p) !important;
}

.cu-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
}

.cu-cta-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82em;
    opacity: .9;
    text-decoration: none !important;
}

    .cu-cta-sub:hover {
        opacity: 1;
        text-decoration: underline !important;
    }

    .cu-cta-sub .mud-icon-root {
        fill: #fff;
    }

@keyframes cu-float {
    50% {
        transform: translateY(-4px);
    }
}

.cu-section {
    flex: 0 0 calc(100% - 2em);
    margin: 22px 1em 0;
}

.cu-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cu-prod {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 200px;
    padding: 18px;
    border-radius: var(--ui-radius);
    text-decoration: none !important;
    transition: transform .25s, box-shadow .25s;
    animation: dh-in .5s ease-out both;
}

    .cu-prod:hover {
        transform: translateY(-4px);
    }

    .cu-prod b {
        margin-top: 12px;
        font-size: 1.25em;
        font-weight: 900;
    }

    .cu-prod small {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .8em;
    }

        .cu-prod small .tm-dot {
            position: static;
            border: 0;
            width: 9px;
            height: 9px;
        }

/* محصول فعال: کارت رنگی */
.cu-owned {
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 16px 30px -14px var(--c1);
}

    .cu-owned::after {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        left: -50px;
        bottom: -70px;
        background: rgba(255, 255, 255, .14);
    }

    .cu-owned b, .cu-owned small {
        color: #fff !important;
    }

    .cu-owned:hover {
        box-shadow: 0 22px 36px -14px var(--c1);
    }

.cu-prod-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
}

    .cu-prod-ic .mud-icon-root {
        width: 28px;
        height: 28px;
        fill: #fff !important;
    }

.cu-prod-btn {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: .85em;
    font-weight: 700;
}

    .cu-prod-btn .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.cu-owned .cu-prod-btn {
    background: #fff;
    color: var(--c1) !important;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.3);
}

    .cu-owned .cu-prod-btn .mud-icon-root {
        fill: var(--c1) !important;
    }

/* محصولی که ندارد: کارت روشن با خط‌چین */
.cu-not {
    background: var(--ui-card);
    border: 2px dashed var(--ui-border);
}

    .cu-not:hover {
        border-color: var(--c1);
        box-shadow: var(--ui-shadow);
    }

.cu-prod-ic2 {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    opacity: .85;
}

    .cu-prod-ic2 .mud-icon-root {
        width: 28px;
        height: 28px;
    }

.cu-not b {
    color: var(--ui-text) !important;
}

.cu-not small {
    color: var(--ui-muted) !important;
}

.cu-not .cu-prod-btn {
    background: var(--ui-soft);
    color: var(--ui-p) !important;
}

    .cu-not .cu-prod-btn .mud-icon-root {
        fill: var(--ui-p) !important;
    }

.cu-not:hover .cu-prod-btn {
    background: var(--ui-grad);
    color: #fff !important;
}

    .cu-not:hover .cu-prod-btn .mud-icon-root {
        fill: #fff !important;
    }

/* پیگیری تیکت */
.ct-item {
    display: block;
    padding: 14px 16px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: #f8f9fd;
    text-decoration: none !important;
    transition: background .2s, box-shadow .2s;
}

    .ct-item:last-child {
        margin-bottom: 0;
    }

    .ct-item:hover {
        background: #fff;
        box-shadow: var(--ui-shadow-hover);
    }

.ct-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .ct-top b {
        font-size: .95em;
        color: var(--ui-text) !important;
    }

    .ct-top small {
        margin-right: auto;
        color: #a3a7c2 !important;
        font-size: .78em;
        direction: ltr;
    }

.ct-st {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
}

.ct-st-0 {
    background: #e7f5ff;
    color: var(--ui-blue) !important;
}

.ct-st-1 {
    background: #fff4e6;
    color: #e8590c !important;
}

.ct-st-2 {
    background: #e6fcf5;
    color: var(--ui-green) !important;
}

.ct-st-3 {
    background: #f1f3f5;
    color: var(--ui-muted) !important;
}

.ct-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

    .ct-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .75em;
        color: var(--ui-muted) !important;
    }

    .ct-meta .mud-icon-root {
        width: 14px;
        height: 14px;
        fill: var(--ui-muted) !important;
    }

.ct-steps {
    display: flex;
    align-items: flex-start;
    margin-top: 14px;
}

    .ct-steps > i {
        flex: 1;
        height: 3px;
        margin-top: 13px;
        border-radius: 3px;
        background: var(--ui-border);
    }

        .ct-steps > i.done {
            background: var(--ui-green);
        }

.ct-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 74px;
    flex-shrink: 0;
}

    .ct-step > span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--ui-border);
        color: var(--ui-muted) !important;
        font-size: .78em;
        font-weight: 700;
    }

        .ct-step > span .mud-icon-root {
            width: 17px;
            height: 17px;
            fill: #fff !important;
        }

    .ct-step small {
        font-size: .7em;
        color: var(--ui-muted) !important;
        white-space: nowrap;
    }

    .ct-step.done > span {
        background: var(--ui-green);
        box-shadow: 0 4px 10px -3px var(--ui-green);
    }

    .ct-step.now > span {
        background: var(--ui-orange);
        color: #fff !important;
        box-shadow: 0 0 0 4px #fff4e6;
        animation: tk-pulse 1.6s ease-in-out infinite;
    }

    .ct-step.now small {
        color: #e8590c !important;
        font-weight: 700;
    }

/* تازه‌ها */
.nw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ui-border);
    text-decoration: none !important;
}

    .nw-item:first-of-type {
        padding-top: 0;
    }

    .nw-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .nw-item b {
        display: block;
        font-size: .88em;
        line-height: 1.6;
        color: var(--ui-text) !important;
    }

    .nw-item small {
        font-size: .72em;
        color: var(--ui-muted) !important;
    }

    .nw-item:hover b {
        color: var(--ui-p) !important;
    }

.nw-pic {
    width: 64px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ui-soft);
}

@media (max-width: 1100px) {
    .cu-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cu-cta {
        align-self: stretch;
    }

    .cu-cta-btn {
        justify-content: center;
        width: 100%;
    }

    .cu-section {
        flex-basis: 100%;
        margin: 18px 0 0;
    }

    .cu-products {
        gap: 12px;
    }

    .cu-prod {
        min-height: 170px;
        padding: 14px;
    }

    .ct-step {
        width: 56px;
    }

        .ct-step small {
            font-size: .62em;
        }
}