/* ========== Reset & base ========== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 700;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}


/* ========== Design tokens (root variables) ========== */

.tsgym-has-dropdown .tsgym-link {
    text-decoration: none;
    color: var(--primary-color) !important;
}

.tsgym-connect-server a {
    color: #fff;
}

 :root {
    /* Base colors */
    --primary-color: #2c2c2c;
    --secondary-color: #4d4d4d;
    --text-color: #3B72EC;
    --header-mobile-bg-btn: rgb(226 232 240);
    --box-server: rgba(226, 232, 240, 0.137);
    --text-color-white: #FFFFFF;
    --color-gray: rgb(71 85 105);
    /* Buttons / states */
    --btn-bg-color: rgb(37, 99, 235);
    --btn-telegram-color: rgb(0, 136, 204);
    --btn-bg-dark-light: #F1F5F9;
    --hover-btn-telegram: rgb(0 102 153);
    --connect-plus-color: rgba(255, 255, 255, 0.28);
    --report-btn-color: #FDE68A;
    --h1--text-color: rgb(15 23 42);
    --point: #45CE8C;
    --point-red: #f10e21;
    --success-green: #22c55e;
    /* Scrollbar */
    --scrollbar-width: 6px;
    --scrollbar-radius: 999px;
    --scrollbar-thumb: #1a73e8;
    --scrollbar-thumb-hover: #1666cc;
    /* Typography */
    --tsgym-text-main: #0f172a;
    --tsgym-text-soft: #6b7280;
    /* Radii */
    --tsgym-radius-sm: 8px;
    --tsgym-radius-md: 16px;
    --tsgym-radius-xl: 26px;
    --tsgym-radius-icon: 18px;
    /* Hero / brand */
    --ts-blue: #1a73ff;
    /* Dropdown / server box */
    --drop-menu-bg-top: rgb(230, 241, 255);
    --drop-menu-bg-bottom: rgb(230, 241, 255);
    --drop-menu-bg: #cedff5;
    --server-box-border: rgba(37, 99, 235, 0.15);
    --server-box-shadow-main: 0 18px 45px rgba(37, 99, 235, 0.10);
    --server-box-shadow-border: 0 0 0 1px rgba(148, 163, 184, 0.08);
    --server-copy-icon: #4b5563;
    --server-copy-icon-hover: #111827;
    /* Alert / toast */
    --alert-success-bg: #22c55e;
    --alert-success-text: #ffffff;
    --alert-success-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Header */
    --shadow-header: 0 12px 35px rgba(15, 23, 42, 0.06);
}


/* ========== Dark theme tokens در سطح body.dark ========== */

body.dark {
    --tsgym-text-main: #e5e7eb !important;
    --tsgym-text-soft: #9ca3af !important;
    --primary-color: #e5e7eb !important;
    --secondary-color: #9ca3af !important;
    --text-color: #93c5fd !important;
    --text-color-white: #020617 !important;
    --color-gray: #6b7280 !important;
    --btn-bg-color: #2563eb !important;
    --btn-bg-dark-light: #020b2b !important;
    --header-mobile-bg-btn: rgb(15 23 42) !important;
    --report-btn-color: #facc15 !important;
    --h1--text-color: #e5e7eb !important;
    --point: #22c55e !important;
    --point-red: #f97373 !important;
    --success-green: #22c55e !important;
    --scrollbar-thumb: #1d4ed8 !important;
    --scrollbar-thumb-hover: #2563eb !important;
    --alert-success-bg: #16a34a !important;
    --alert-success-text: #ecfdf5 !important;
    --alert-success-shadow: 0 12px 32px rgba(0, 0, 0, 0.9) !important;
}

.dark {
    background-color: #020617;
}


/* Scrollbar */

body::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

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

body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
    border: 2px solid transparent;
    background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

 ::selection {
    background: var(--scrollbar-thumb);
    color: #ffffff;
}

*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

body {
    background-color: var(--text-color-white);
    color: var(--tsgym-text-main);
    font-family: vazir !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

body.dark {
    background-color: #020617;
}


/* ========== HEADER ========== */

header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
}

.icon-tsgym-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.tsgym-dark-light-mobile {
    margin-left: 0;
}

/* ========== بخش بالا (Top Header) ========== */

.tsgym-header-top {
    position: relative;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: var(--shadow-header);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 51;
}

body.dark .tsgym-header-top {
    background-color: rgba(15, 23, 42, 0.92);
    border-bottom-color: #111827;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.tsgym-header-top-inner {
    width: 88%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 75px;
}

.tsgym-header-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tsgym-header-top-actions a {
    text-decoration: none;
    display: inline-block;
}

.tsgym-header-top-actions .tsgym-li-btn {
    margin: 0;
    display: inline-block;
}

/* ========== بخش پایین (Bottom Navigation) ========== */

.tsgym-header-bottom {
    position: relative;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(229, 231, 235, 0.5);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: background-color 0.25s ease, border-color 0.25s ease;
    z-index: 50;
    margin-top: 0;
}

body.dark .tsgym-header-bottom {
    background-color: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(17, 24, 39, 0.5);
    border-bottom-color: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tsgym-nav-main {
    width: 88%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.tsgym-nav-main .tsgym-ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 8px 56px 8px 0px;

    min-height: 55px;
}


/* logo */

.tsgym-logo-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tsgym-logo-name img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--tsgym-radius-sm);
}

.tsgym-mname {
    color: var(--text-color);
    font-size: 22px;
}

.tsgym-h3-header {
    color: var(--tsgym-text-soft);
    font-size: 13px;
    font-weight: 600;
}


/* nav desktop */

nav.main-nav {
    flex: 1;
}

.tsgym-ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
}

.tsgym-li {
    position: relative;
    cursor: pointer;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 10px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.tsgym-li::after {
    content: "";
    position: absolute;
    inset-inline: 8px;
    bottom: 0;
    height: 2px;
    border-radius: var(--tsgym-radius-sm);
    width: 0;
    background-color: var(--text-color);
    transition: width 0.3s ease;
}

.tsgym-li:hover {
    color: var(--text-color);
}

.tsgym-li:hover::after {
    width: calc(100% - 16px);
}

body.dark .tsgym-li {
    color: #e5e7eb;
}

body.dark .tsgym-li:hover {
    color: #bfdbfe;
}

body.dark .tsgym-li::after {
    background-color: #60a5fa;
}

.tsgym-li-btn {
    cursor: pointer;
}

.tsgym-report {

/* background-color: var(--report-btn-color); */
    border-radius: var(--tsgym-radius-sm);
    padding: 8px 14px;
    font-size: 16px;
}

.tsgym-register {
    padding: 8px 18px;
    border-radius: var(--tsgym-radius-sm);
    background-color: var(--btn-bg-color);
    color: #ffffff;
    font-size: 13px;
    border: 1px solid #0d45be;
    transform: translateY(0);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tsgym-register:hover {
    background-color: #0b3aa0;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.45);
    transform: translateY(-2px);
}

body.dark .tsgym-register {
    background-color: #2563eb;
    border-color: #2563eb;
}

.tsgym-login {
    padding: 8px 18px;
    border-radius: var(--tsgym-radius-sm);
    font-size: 13px;
    color: var(--text-color);
    background-color: transparent;
    border: 1.5px solid var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tsgym-login:hover {
    background-color: #EFF4FF;
    border-color: #1d4ed8;
}

body.dark .tsgym-login {
    color: #bfdbfe;
    border-color: #2563eb;
}

body.dark .tsgym-login:hover {
    background-color: #020617;
}


/* connect + dark/light */

.tsgym-server-darklight {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsgym-connect-server {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--tsgym-radius-sm);
    background-color: #2563eb;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .4);
    transform: translateZ(0);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.tsgym-connect-server i {
    font-size: 14px;
}

.tsgym-connect-server:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .55);
}

body.dark .tsgym-connect-server {
    background-color: #2563eb;
}


/* ========== Dropdown کاربر لاگین شده ========== */

.tsgym-user-dropdown-wrapper {
    position: relative;
}

.tsgym-user-avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--tsgym-radius-sm);
    background: var(--btn-bg-dark-light);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.2);
}

.tsgym-user-avatar:hover {
    background: #dde4f0;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
}

body.dark .tsgym-user-avatar {
    background: #020b2b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

body.dark .tsgym-user-avatar:hover {
    background: #1e293b;
}

.tsgym-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.tsgym-username-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

body.dark .tsgym-username-text {
    color: #e5e7eb;
}

.tsgym-dropdown-arrow {
    font-size: 12px;
    color: var(--tsgym-text-soft);
    transition: transform 0.2s ease;
}

.tsgym-user-dropdown-wrapper:hover .tsgym-dropdown-arrow,
.tsgym-user-dropdown-wrapper.active .tsgym-dropdown-arrow {
    transform: rotate(180deg);
}

.tsgym-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 280px;
    background: #ffffff;
    border-radius: var(--tsgym-radius-md);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 100;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

body.dark .tsgym-user-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.tsgym-user-dropdown-wrapper.active .tsgym-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tsgym-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e5e7eb;
}

body.dark .tsgym-dropdown-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-bottom-color: #334155;
}

.tsgym-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.tsgym-dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.tsgym-dropdown-username {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .tsgym-dropdown-username {
    color: #e5e7eb;
}

.tsgym-dropdown-user-id {
    font-size: 12px;
    color: var(--tsgym-text-soft);
}

.tsgym-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

body.dark .tsgym-dropdown-divider {
    background: #334155;
}

.tsgym-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: right;
    cursor: pointer;
}

.tsgym-dropdown-item:hover {
    background: #f3f4f6;
    color: var(--text-color);
}

body.dark .tsgym-dropdown-item {
    color: #e5e7eb;
}

body.dark .tsgym-dropdown-item:hover {
    background: #0f172a;
    color: #93c5fd;
}

.tsgym-dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--tsgym-text-soft);
}

.tsgym-dropdown-item:hover i {
    color: var(--text-color);
}

body.dark .tsgym-dropdown-item:hover i {
    color: #93c5fd;
}

.tsgym-dropdown-admin {
    color: #fbbf24;
}

.tsgym-dropdown-admin i {
    color: #fbbf24;
}

.tsgym-dropdown-logout {
    color: #f87171;
}

.tsgym-dropdown-logout i {
    color: #f87171;
}

.tsgym-dropdown-logout:hover {
    background: #fee2e2;
    color: #dc2626;
}

body.dark .tsgym-dropdown-logout:hover {
    background: #7f1d1d;
    color: #fca5a5;
}


/* نقطه استاتوس */

@keyframes blinkColors {
    0% {
        background-color: #22c55e;
        transform: scale(1);
    }
    33% {
        background-color: #f59e0b;
        transform: scale(1.06);
    }
    66% {
        background-color: #0ea5e9;
        transform: scale(1.1);
    }
    100% {
        background-color: #22c55e;
        transform: scale(1);
    }
}

.tsgym-point {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: var(--tsgym-radius-sm);
    background-color: var(--point);
    border: 2px solid #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    animation: blinkColors 2.8s linear infinite;
}

body.dark .tsgym-point {
    border-color: #020617;
}

.tsgym-dark-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background-color: var(--btn-bg-dark-light);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.45);
}

.tsgym-dark-light:hover {
    background-color: #dde4f0;
}

body.dark .tsgym-dark-light {
    background-color: #020b2b;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.7);
}

.span_dark_light button {
    background: transparent;
    border: none;
}

.span_dark_light i {
        height: 44px;
    display: flex;
    width: 44px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #000;
}

body.dark .span_dark_light i {
    color: #facc15;
}


/* ========== DROPDOWN زیر منو FAQ ========== */

.tsgym-has-dropdown {
    position: relative;
}

.tsgym-has-dropdown .tsgym-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tsgym-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    width: 100%;
}

.tsgym-dropdown {
    position: fixed;
    inset-inline: 0;
    top: 57px; /* 75px (top header) + 55px (bottom nav) */
    height: 220px;
    background: linear-gradient(to bottom, var(--drop-menu-bg-top), var(--drop-menu-bg-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 30px;
    gap: 8px;
    color: var(--secondary-color);
    font-size: 16px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 49;
    will-change: opacity, visibility;
}

/* فقط در حالت دسکتاپ dropdown را نمایش بده */
@media (min-width: 993px) {
    /* ایجاد یک منطقه نامرئی برای اتصال dropdown به منو (gap filler) */
    .tsgym-has-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 20px;
        background: transparent;
        z-index: 48;
        pointer-events: none;
    }
    
    /* وقتی روی li که dropdown دارد hover می‌شود یا روی gap filler */
    .tsgym-has-dropdown:hover .tsgym-dropdown,
    .tsgym-has-dropdown:hover::after,
    .tsgym-dropdown:hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* فعال کردن pointer events برای gap filler وقتی hover است */
    .tsgym-has-dropdown:hover::after {
        pointer-events: auto;
    }
}

.tsgym-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

/* در حالت موبایل، dropdown را کاملاً مخفی کن */
@media (max-width: 992px) {
    .tsgym-dropdown {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.tsgym-text {
    color: var(--text-color);
    font-size: 24px;
    margin-bottom: 4px;
}

.tsgym-text2 {
    font-size: 16px;
    color: var(--tsgym-text-soft);
    margin-bottom: 18px;
}

.tsgym-server-box {
    align-items: center;
    gap: 10px;
    display: flex;
    padding: 20px;
    width: 40%;
    max-width: 90vw;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: var(--tsgym-radius-sm);
    border: 1px solid var(--server-box-border);
    box-shadow: var(--server-box-shadow-main), var(--server-box-shadow-border);
    justify-content: center;
    flex-direction: row-reverse;
}

.tsgym-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--tsgym-radius-sm);
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tsgym-copy-btn:hover {
    background: #E0EAFF;
    color: var(--server-copy-icon-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

.tsgym-server-link {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ts-blue);
    direction: ltr;
}

.tsgym-server-link:hover {
    text-decoration: underline;
}


/* ========== Responsive برای هدر دسکتاپ ========== */

/* تبلت (768px - 992px) */
@media (max-width: 992px) and (min-width: 769px) {
    .tsgym-header-top-inner {
        width: 95%;
        padding: 10px 16px;
        height: 70px;
    }
    
    .tsgym-header-top-actions {
        gap: 8px;
    }
    
    .tsgym-header-top-actions .tsgym-connect-server {
        padding: 10px 30px;
        font-size: 14px;
    }
    
    .tsgym-header-bottom {
        margin-top: 0;
    }
    
    .tsgym-nav-main {
        width: 95%;
        padding: 0 16px;
    }
    
    .tsgym-nav-main .tsgym-ul {
        gap: 6px;
        flex-wrap: wrap;
        min-height: 50px;
    }
    
    .tsgym-dropdown {
        top: 125px; /* 70px (top header) + 55px (bottom nav) */
    }
}

/* موبایل (کمتر از 768px) */
@media (max-width: 768px) {
    .tsgym-header-top,
    .tsgym-header-bottom {
        display: none !important;
    }
    
    .tsgym-dropdown {
        display: none !important;
    }
}


/* ========== Header موبایل ========== */

.tsgym-header-mobile {
    display: none !important;
    width: 100%;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: var(--shadow-header);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.dark .tsgym-header-mobile {
    background-color: rgba(15, 23, 42, 0.92);
    border-bottom-color: #111827;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* در حالت دسکتاپ و تبلت، هدر موبایل را مخفی کن */
@media (min-width: 769px) {
    .tsgym-header-mobile {
        display: none !important;
    }
}

/* فقط در حالت موبایل (کمتر از 768px)، هدر موبایل را نمایش بده */
@media (max-width: 768px) {
    .tsgym-header-mobile {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    .tsgym-logo-name-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .tsgym-mname-mobile {
        font-size: 20px;
        color: var(--text-color);
    }
    .tsgym-h3-header-mobile {
        font-size: 11px;
        color: var(--tsgym-text-soft);
    }
    .tsgym-dark-light-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        border-radius: var(--tsgym-radius-sm);
        background: var(--header-mobile-bg-btn);
        box-shadow: var(--shadow-header);
        cursor: pointer;
    }
    .menu-ham-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        border-radius: var(--tsgym-radius-sm);
        background: var(--header-mobile-bg-btn);
        box-shadow: var(--shadow-header);
        cursor: pointer;
        border: none;
        color: #111827;
    }
}

/* استایل‌های dark mode برای دکمه‌های موبایل */
body.dark .menu-ham-btn {
    color: #e5e7eb;
}

body.dark .menu-ham-btn i {
    color: #e5e7eb;
}

body.dark .tsgym-dark-light-mobile {
    background: var(--header-mobile-bg-btn);
}

body.dark .tsgym-dark-light-mobile .span_dark_light i {
    color: #facc15;
}


/* وقتی منو بازه، کل محتوا بلور میشه به جز خود منو */

body.menu-open>* {
    filter: blur(6px);
    transition: filter 0.3s ease;
    pointer-events: none;
}

body.menu-open .menu-ham-mobile,
body.menu-open .menu-ham-btn,
body.menu-open .tsgym-header-mobile {
    filter: none;
    pointer-events: auto;
}

/* Backdrop برای منوی همبرگر */
body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

body.dark.menu-open::before {
    background-color: rgba(0, 0, 0, 0.7);
}

/* اطلاعات کاربر در منوی موبایل */
.menu-ham-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
}

body.dark .menu-ham-user-info {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: #334155;
}

.menu-ham-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.menu-ham-user-details {
    flex: 1;
    min-width: 0;
}

.menu-ham-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--h1--text-color);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .menu-ham-user-name {
    color: #e5e7eb;
}

.menu-ham-user-id {
    font-size: 12px;
    color: var(--tsgym-text-soft);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.menu-ham-btn {
    z-index: 10000;
    position: relative;
}

.menu-ham-btn i {
    color: inherit;
}


/* پنل منوی موبایل */

.menu-ham-mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 82%;
    max-width: 380px;
    background-color: var(--faq-bg-page);
    border-radius: 0 0 0 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.45s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    direction: rtl;
    overflow-y: auto;
}

body.dark .menu-ham-mobile {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}

.menu-ham-mobile-active {
    transform: translateX(0) !important;
}

.menu-ham-head {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 10px;
    border-bottom: 1px solid #e5e7eb;
    transition: border-color 0.3s ease;
}

body.dark .menu-ham-head {
    border-bottom-color: #1f2937;
}

.menu-ham-title {
    font-size: 14px;
    font-weight: 700;
    color: #1d4ed8;
}

body.dark .menu-ham-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--h1--text-color);
}

.menu-ham-close {
    border: none;
    background: transparent;
    width: 32px;
    height: 32px;
    color: var(--h1--text-color) !important;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-ham-close i {
    font-size: 18px;
    color: var(--h1--text-color) !important;
}

.menu-ham-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-ham-item i {
    color: var(--h1--text-color) !important;
}

.tsgym-logo-name-mobile img {
    width: 55px;
}

.menu-ham-item {
    width: 100%;
}

.menu-ham-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    flex-direction: row-reverse;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark .menu-ham-link {
    color: #e5e7eb;
}



.menu-ham-icon {
    font-size: 17px;
    color: #111827;
    transition: color 0.2s ease;
}

body.dark .menu-ham-icon {
    color: #e5e7eb;
}

.menu-ham-link:hover {
    background-color: #f3f4ff;
}

body.dark .menu-ham-link:hover {
    background-color: #1f2937;
}

.menu-ham-item-warning .menu-ham-link {
    background-color: #fde68a;
}

body.dark .menu-ham-item-warning .menu-ham-link {
    background-color: #be2b06;
}

.menu-ham-item-warning .menu-ham-icon {
    color: #b45309;
}

body.dark .menu-ham-item-warning .menu-ham-icon {
    color: #fbbf24;
}

.menu-ham-footer {
    margin-top: auto;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-btn {
    width: 100%;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 0;
    cursor: pointer;
}

.menu-btn-primary {
    background-color: #0052ff;
    color: #ffffff;
    border: none;
}

.menu-btn-outline {
    background-color: #ffffff;
    color: #0052ff;
    border: 1.5px solid #0052ff;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.dark .menu-btn-outline {
    background-color: #1f2937;
    color: #60a5fa;
    border-color: #3b82f6;
}

.menu-btn-server {
    background-color: #0052ff;
    color: #ffffff;
    border: none;
    padding-block: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.menu-btn-server-text {
    font-size: 13px;
    font-weight: 600;
}

.menu-btn-server-icon {
    font-size: 15px;
}

.menu-btn-server::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: 10px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    transition: border-color 0.2s ease;
}

body.dark .menu-btn-server::after {
    border-color: #020617;
}


/* ========== Toast alert برای کپی ========== */

.alert2 {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: var(--alert-success-shadow);
    font-size: 16px;
    display: none;
    z-index: 1000;
}

.alert2.active-alert {
    display: block;
    animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
}

/* Move main navigation slightly to the right */
.tsgym-nav-main {
    transform: translateX(16px);
}



/* لینک‌ها و دکمه‌ها خواناتر */
.tsgym-li-btn.tsgym-login{
  color:#0f172a !important;
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
}

.tsgym-li-btn.tsgym-register{
  color:#ffffff !important;
  background:#2563eb !important;
}

/* فوتر: لینک اتصال تیم‌اسپیک */
.tsgym-footer-connect-link{
  color:#0f172a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dark .tsgym-footer-connect-link{
  color:#e5e7eb !important;
}

/* جلوگیری از باز شدن dropdown فقط برای FAQ */
.tsgym-no-dropdown:hover .tsgym-dropdown{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(10px) !important;
}

/* Login button blue outline */
.tsgym-li-btn.tsgym-login{
  background:#ffffff !important;
  color:#0f172a !important;

  border:2px solid #3b82f6 !important;   /* خط آبی */
  border-radius:10px;

  transition:all .18s ease;
}

/* هاور */
.tsgym-li-btn.tsgym-login:hover{
  background:#eff6ff !important;
  border-color:#2563eb !important;
  color:#1d4ed8 !important;
}

/* کلیک */
.tsgym-li-btn.tsgym-login:active{
  transform:translateY(1px);
  background:#dbeafe !important;
  border-color:#1d4ed8 !important;
}

/* فوکوس (برای سئو + دسترسی) */
.tsgym-li-btn.tsgym-login:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
}


/* move main menu 5px to the right */
.tsgym-header-bottom .tsgym-nav-main{
  padding-left: 69px;
}



/* underline hover for FAQ item too */
.tsgym-ul > li.tsgym-no-dropdown > a.tsgym-link-wrapper::after{
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -6px;
  height: 2px;
  background: #2563eb;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .2s ease;
}

.tsgym-ul > li.tsgym-no-dropdown > a.tsgym-link-wrapper{
  position: relative;
}

.tsgym-ul > li.tsgym-no-dropdown > a.tsgym-link-wrapper:hover::after{
  transform: scaleX(1);
}


.tsgym-server-menu{
    position:relative;
}

/* زیرمنو مخفی */
.tsgym-server-submenu{
    position:absolute;
    top:100%;
    right:0;
    background:#0f172a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    min-width:180px;
    padding:6px 0;

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.2s ease;
    z-index:999;
}

/* نمایش با hover */
.tsgym-server-menu:hover .tsgym-server-submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* آیتم‌ها */
.tsgym-server-submenu a{
    display:block;
    padding:10px 14px;
    color:#fff;
    font-size:13px;
    text-decoration:none;
    white-space:nowrap;
}

.tsgym-server-submenu a:hover{
    background:rgba(56,189,248,.15);
    color:#38bdf8;
}




.menu-ham-submenu-icons{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-ham-arrow{
    margin-right:auto;
    transition:.3s;
}

.menu-ham-has-submenu.active .menu-ham-arrow{
    transform:rotate(180deg);
}

.menu-ham-submenu{
    display:none;
    list-style:none;
    padding:0;
    margin-top:8px;
}

.menu-ham-has-submenu.active .menu-ham-submenu{
    display:block;
}

.menu-ham-submenu li{
    margin-top:8px;
}

.menu-ham-sublink{
    display:block;
    padding:10px 14px;
    border-radius:10px;
    text-decoration:none;
    color:var(--text-color);
    background:rgba(255,255,255,.03);
    font-size:14px;
}

.menu-ham-has-submenu.active .menu-ham-arrow {
    transform: rotate(180deg);
}



.menu-ham-submenu-icons{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-ham-submenu{
    display:none;
    list-style:none;
    margin-top:8px;
    padding:0;
}

.menu-ham-has-submenu.active .menu-ham-submenu{
    display:block;
}

.menu-ham-arrow{
    transition:0.3s;
}

.menu-ham-has-submenu.active .menu-ham-arrow{
    transform:rotate(180deg);
}

.menu-ham-link{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-direction:row-reverse;
    padding:10px 12px;
    border-radius:12px;
    font-size:14px;
    font-weight:500;
    color:#111827;
    text-decoration:none;
}
.menu-ham-submenu-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    background:none;
    border:none;
    cursor:pointer;
}
.menu-ham-submenu-icons{
    display:flex;
    align-items:center;
    gap:6px;
}



.tsgym-server-menu .fa-angle-down{
    font-size: 13.5px;   /* متعادل با متن */
    margin-right: 2px; /* فاصله طبیعی‌تر */
    color: var(--text-color);
    opacity: 1;
    transition: transform .2s ease;
    font-weight: 600;  /* کمی بولد، نه خیلی */
}

.tsgym-server-menu:hover .fa-angle-down{
    transform: rotate(180deg);
}



.tsgym-ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.25);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.tsgym-ad-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(239, 68, 68, 0.35);
}

.tsgym-ad-btn i {
    font-size: 15px;
}

/* موبایل: دکمه داخل هدر اصلی نمایش داده نشود که هدر بهم نریزد */
@media (max-width: 768px) {
    .tsgym-ad-btn {
        display: none;
    }
}


/* Speed Test Button */

.tsgym-speedtest-btn {
    display:flex;
    align-items:center;
    gap:8px;

    padding:12px 18px;

    border-radius:12px;

    color:#fff;

background:
linear-gradient(
    135deg,
    rgb(124,58,237),
    rgb(56,189,248)
);
    font-size:14px;

    font-weight:600;

    text-decoration:none;

    box-shadow:
    0 6px 18px rgba(37,99,235,.35);

    transition:.3s ease;

    white-space:nowrap;
}


.tsgym-speedtest-btn i {
    font-size:18px;
}


.tsgym-speedtest-btn:hover {

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(6,182,212,.45);

}




/* IP Lookup Header Button */

.tsgym-iplookup-btn {
    height: 48px;
    min-width: 170px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #0284c7
    );

    color: #fff !important;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none !important;

    border: 1px solid rgba(255,255,255,.12);

    box-sizing: border-box;

    box-shadow:
        0 6px 18px rgba(37,99,235,.25);

    transition:
        .25s ease;
}



.tsgym-iplookup-btn i {

    font-size: 18px;

    width: 20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

}



.tsgym-iplookup-btn span {

    display:flex;
    align-items:center;

    height:100%;

}



.tsgym-iplookup-btn:hover {

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(37,99,235,.35);

}



/* جلوگیری از بهم ریختن هدر در زبان انگلیسی */

.tsgym-header-top-actions {

    align-items:center;

}



.tsgym-header-top-actions > a {

    display:flex;
    align-items:center;

}