/* ============ IBO-TS shared page chrome (template.js v20261025c) ============ */

/* Chrome mirrors index's .site-header/.site-footer DNA. One RGB glass system:

   header (top) + floating dock (bottom) share the SAME animated gradient,

   glass surface and living halo — matched, responsive, icon-tap burst. */



/* ─── Self-Hosted Local Vazirmatn Fonts (100% High Availability & Offline) ─── */

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: local('Vazirmatn'),

       url('../assets/fonts/Vazirmatn-Regular.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');

}

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: local('Vazirmatn Medium'),

       url('../assets/fonts/Vazirmatn-Medium.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');

}

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: local('Vazirmatn SemiBold'),

       url('../assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');

}

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: local('Vazirmatn Bold'),

       url('../assets/fonts/Vazirmatn-Bold.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');

}

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 800;

  font-display: swap;

  src: local('Vazirmatn ExtraBold'),

       url('../assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');

}

@font-face {

  font-family: 'Vazirmatn';

  font-style: normal;

  font-weight: 900;

  font-display: swap;

  src: local('Vazirmatn Black'),

       url('../assets/fonts/Vazirmatn-Black.woff2') format('woff2'),

       url('/static/assets/fonts/Vazirmatn-Black.woff2') format('woff2');

}



/* ─────────────── CSS Variables — Light & Dark Themes ─────────────── */

:root {

  /* Light Theme (default) */

  --tpl-bg-primary: #FFFFFF;

  --tpl-bg-secondary: #F8FAFC;

  --tpl-bg-tertiary: #F1F5F9;

  --tpl-text-primary: #0F172A;

  --tpl-text-secondary: #475569;

  --tpl-text-muted: #94A3B8;

  --tpl-border-light: #E2E8F0;

  --tpl-border-medium: #CBD5E1;

  --tpl-accent-primary: #4F46E5;

  --tpl-accent-secondary: #7C3AED;

  --tpl-accent-success: #10B981;

  --tpl-accent-warning: #F59E0B;

  --tpl-accent-danger: #EF4444;

  --tpl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);

  --tpl-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);

  --tpl-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);

  --tpl-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);

  --tpl-glass-bg: rgba(255, 255, 255, 0.82);

  --tpl-glass-border: rgba(255, 255, 255, 0.9);

  --tpl-glass-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.25);

  --tpl-input-bg: #FFFFFF;

  --tpl-input-border: #E2E8F0;

  --tpl-input-focus: #4F46E5;

  --tpl-card-bg: rgba(255, 255, 255, 0.82);

  --tpl-card-border: rgba(255, 255, 255, 0.9);

  --tpl-overlay-bg: rgba(15, 23, 42, 0.35);

  --tpl-splash-bg: #FFFFFF;

  --tpl-splash-text: #0F172A;

  --tpl-splash-sub: #64748B;

  --tpl-toast-success: #047857;

  --tpl-toast-error: #BE123C;

  --tpl-toast-warning: #B45309;

  --tpl-toast-info: #4F46E5;

  --tpl-toast-bg-success: rgba(16, 185, 129, 0.1);

  --tpl-toast-bg-error: rgba(244, 63, 94, 0.1);

  --tpl-toast-bg-warning: rgba(245, 158, 11, 0.1);

  --tpl-toast-bg-info: rgba(79, 70, 229, 0.1);

  --tpl-toast-border-success: rgba(16, 185, 129, 0.35);

  --tpl-toast-border-error: rgba(244, 63, 94, 0.35);

  --tpl-toast-border-warning: rgba(245, 158, 11, 0.45);

  --tpl-toast-border-info: rgba(79, 70, 229, 0.35);

}



/* Dark Theme */

[data-theme="dark"] {

  --tpl-bg-primary: #0F172A;

  --tpl-bg-secondary: #111827;

  --tpl-bg-tertiary: #1F2937;

  --tpl-text-primary: #F8FAFC;

  --tpl-text-secondary: #E2E8F0;

  --tpl-text-muted: #94A3B8;

  --tpl-border-light: #1F2937;

  --tpl-border-medium: #374151;

  --tpl-accent-primary: #6366F1;

  --tpl-accent-secondary: #8B5CF6;

  --tpl-accent-success: #34D399;

  --tpl-accent-warning: #FBBF24;

  --tpl-accent-danger: #F87171;

  --tpl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

  --tpl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

  --tpl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

  --tpl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

  --tpl-glass-bg: rgba(17, 24, 39, 0.85);

  --tpl-glass-border: rgba(55, 65, 81, 0.9);

  --tpl-glass-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);

  --tpl-input-bg: #1F2937;

  --tpl-input-border: #374151;

  --tpl-input-focus: #6366F1;

  --tpl-card-bg: rgba(17, 24, 39, 0.85);

  --tpl-card-border: rgba(55, 65, 81, 0.9);

  --tpl-overlay-bg: rgba(0, 0, 0, 0.6);

  --tpl-splash-bg: #0F172A;

  --tpl-splash-text: #F8FAFC;

  --tpl-splash-sub: #94A3B8;

  --tpl-toast-success: #34D399;

  --tpl-toast-error: #F87171;

  --tpl-toast-warning: #FBBF24;

  --tpl-toast-info: #6366F1;

  --tpl-toast-bg-success: rgba(52, 211, 153, 0.15);

  --tpl-toast-bg-error: rgba(248, 113, 113, 0.15);

  --tpl-toast-bg-warning: rgba(251, 191, 36, 0.15);

  --tpl-toast-bg-info: rgba(99, 102, 241, 0.15);

  --tpl-toast-border-success: rgba(52, 211, 153, 0.4);

  --tpl-toast-border-error: rgba(248, 113, 113, 0.4);

  --tpl-toast-border-warning: rgba(251, 191, 36, 0.4);

  --tpl-toast-border-info: rgba(99, 102, 241, 0.4);

}



/* System preference detection */

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --tpl-bg-primary: #0F172A;

    --tpl-bg-secondary: #111827;

    --tpl-bg-tertiary: #1F2937;

    --tpl-text-primary: #F8FAFC;

    --tpl-text-secondary: #E2E8F0;

    --tpl-text-muted: #94A3B8;

    --tpl-border-light: #1F2937;

    --tpl-border-medium: #374151;

    --tpl-accent-primary: #6366F1;

    --tpl-accent-secondary: #8B5CF6;

    --tpl-accent-success: #34D399;

    --tpl-accent-warning: #FBBF24;

    --tpl-accent-danger: #F87171;

    --tpl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

    --tpl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

    --tpl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    --tpl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

    --tpl-glass-bg: rgba(17, 24, 39, 0.85);

    --tpl-glass-border: rgba(55, 65, 81, 0.9);

    --tpl-glass-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);

    --tpl-input-bg: #1F2937;

    --tpl-input-border: #374151;

    --tpl-input-focus: #6366F1;

    --tpl-card-bg: rgba(17, 24, 39, 0.85);

    --tpl-card-border: rgba(55, 65, 81, 0.9);

    --tpl-overlay-bg: rgba(0, 0, 0, 0.6);

    --tpl-splash-bg: #0F172A;

    --tpl-splash-text: #F8FAFC;

    --tpl-splash-sub: #94A3B8;

    --tpl-toast-success: #34D399;

    --tpl-toast-error: #F87171;

    --tpl-toast-warning: #FBBF24;

    --tpl-toast-info: #6366F1;

    --tpl-toast-bg-success: rgba(52, 211, 153, 0.15);

    --tpl-toast-bg-error: rgba(248, 113, 113, 0.15);

    --tpl-toast-bg-warning: rgba(251, 191, 36, 0.15);

    --tpl-toast-bg-info: rgba(99, 102, 241, 0.15);

    --tpl-toast-border-success: rgba(52, 211, 153, 0.4);

    --tpl-toast-border-error: rgba(248, 113, 113, 0.4);

    --tpl-toast-border-warning: rgba(251, 191, 36, 0.4);

    --tpl-toast-border-info: rgba(99, 102, 241, 0.4);

  }

}



/* Explicit light theme override */

[data-theme="light"] {

  --tpl-bg-primary: #FFFFFF;

  --tpl-bg-secondary: #F8FAFC;

  --tpl-bg-tertiary: #F1F5F9;

  --tpl-text-primary: #0F172A;

  --tpl-text-secondary: #475569;

  --tpl-text-muted: #94A3B8;

  --tpl-border-light: #E2E8F0;

  --tpl-border-medium: #CBD5E1;

  --tpl-accent-primary: #4F46E5;

  --tpl-accent-secondary: #7C3AED;

  --tpl-accent-success: #10B981;

  --tpl-accent-warning: #F59E0B;

  --tpl-accent-danger: #EF4444;

  --tpl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);

  --tpl-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);

  --tpl-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);

  --tpl-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);

  --tpl-glass-bg: rgba(255, 255, 255, 0.82);

  --tpl-glass-border: rgba(255, 255, 255, 0.9);

  --tpl-glass-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.25);

  --tpl-input-bg: #FFFFFF;

  --tpl-input-border: #E2E8F0;

  --tpl-input-focus: #4F46E5;

  --tpl-card-bg: rgba(255, 255, 255, 0.82);

  --tpl-card-border: rgba(255, 255, 255, 0.9);

  --tpl-overlay-bg: rgba(15, 23, 42, 0.35);

  --tpl-splash-bg: #FFFFFF;

  --tpl-splash-text: #0F172A;

  --tpl-splash-sub: #64748B;

  --tpl-toast-success: #047857;

  --tpl-toast-error: #BE123C;

  --tpl-toast-warning: #B45309;

  --tpl-toast-info: #4F46E5;

  --tpl-toast-bg-success: rgba(16, 185, 129, 0.1);

  --tpl-toast-bg-error: rgba(244, 63, 94, 0.1);

  --tpl-toast-bg-warning: rgba(245, 158, 11, 0.1);

  --tpl-toast-bg-info: rgba(79, 70, 229, 0.1);

  --tpl-toast-border-success: rgba(16, 185, 129, 0.35);

  --tpl-toast-border-error: rgba(244, 63, 94, 0.35);

  --tpl-toast-border-warning: rgba(245, 158, 11, 0.45);

  --tpl-toast-border-info: rgba(79, 70, 229, 0.35);

}



/* ─────────────── shared RGB tokens + keyframes ─────────────── */

:root {

  --tpl-rgb-grad: linear-gradient(115deg,

      #181825 0%, #222233 20%, #2a2a38 45%, #323240 65%, #1e1e2a 85%, #151520 100%);

  --tpl-rgb-ink: #a0a0b0;

}



@keyframes tpl-active-ring {

  0%, 100% {

    box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, 0.75), 0 6px 18px -4px rgba(124, 58, 237, 0.65);

    transform: translateY(0);

  }

  50% {

    box-shadow: inset 0 0 0 2.5px rgba(196, 181, 253, 0.95), 0 8px 24px -2px rgba(139, 92, 246, 0.85);

    transform: translateY(-1px);

  }

}



@keyframes tpl-menu-active-pulse {

  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .32); }

  50% { box-shadow: inset 0 0 0 2.5px rgba(124, 58, 237, .55), 0 0 14px -6px rgba(124, 58, 237, .35); }

}



@keyframes tpl-rgb-flow {

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

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

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

}



/* Very subtle dark halo — low intensity, dark/gray/black range */

@keyframes tpl-rgb-halo {

  0%   { box-shadow: 0 10px 28px -14px rgba(30, 30, 45, .35),

                     0 0 10px -8px rgba(30, 30, 45, .25); }

  50%  { box-shadow: 0 10px 28px -14px rgba(20, 20, 35, .40),

                     0 0 10px -8px rgba(20, 20, 35, .20); }

  100% { box-shadow: 0 10px 28px -14px rgba(30, 30, 45, .35),

                     0 0 10px -8px rgba(30, 30, 45, .25); }

}



/* Anime-style burst: icon pops with contrasting hot colours + item flash */

@keyframes tpl-burst-icon {

  0%   { transform: scale(1) rotate(0deg); }

  22%  { transform: scale(1.55) rotate(-12deg); color: #F43F5E;

         filter: drop-shadow(0 0 8px rgba(244, 63, 94, .85)); }

  46%  { transform: scale(.84) rotate(9deg); color: #22D3EE;

         filter: drop-shadow(0 0 10px rgba(34, 211, 238, .9)); }

  72%  { transform: scale(1.2) rotate(-5deg); color: #34D399;

         filter: drop-shadow(0 0 8px rgba(52, 211, 153, .8)); }

  100% { transform: scale(1) rotate(0deg); filter: none; }

}



@keyframes tpl-burst-flash {

  0%   { background-color: rgba(244, 63, 94, 0);

         box-shadow: inset 0 0 0 0 rgba(244, 63, 94, 0); }

  28%  { background-color: rgba(244, 63, 94, .13);

         box-shadow: inset 0 0 0 1.5px rgba(244, 63, 94, .55),

                     0 0 20px -4px rgba(244, 63, 94, .60); }

  58%  { background-color: rgba(34, 211, 238, .13);

         box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, .60),

                     0 0 20px -4px rgba(34, 211, 238, .55); }

  82%  { background-color: rgba(52, 211, 153, .10);

         box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, .45),

                     0 0 16px -6px rgba(52, 211, 153, .45); }

  100% { background-color: transparent;

         box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }

}



.tpl-burst > i,

.tpl-burst .tpl-burger-glyph i { animation: tpl-burst-icon .72s cubic-bezier(.34, 1.56, .64, 1); }

.tpl-burst { animation: tpl-burst-flash .72s ease-out; }



.tpl-burst > i,

.tpl-burst .tpl-burger-glyph i { animation: tpl-burst-icon .72s cubic-bezier(.34, 1.56, .64, 1); }

.tpl-burst { animation: tpl-burst-flash .72s ease-out; }



/* ─────────────── Toast Animations ─────────────── */

@keyframes tpl-toast-in {

  0% { opacity: 0; transform: translateX(100%) translateY(20px) scale(0.9); }

  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }

}

@keyframes tpl-toast-out {

  0% { opacity: 1; transform: translateX(0) scale(1); }

  100% { opacity: 0; transform: translateX(100%) scale(0.9); }

}



/* ─────────────── Onboarding Animations ─────────────── */

@keyframes fadeIn {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes slideUp {

  0% { opacity: 0; transform: translateY(20px) scale(0.95); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes pulse {

  0%, 100% { opacity: 0.5; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.02); }

}



/* ─────────────── Loading Skeleton Animations ─────────────── */

@keyframes skeleton-shimmer {

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

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

}



/* ─────────────── Skeleton Loading Styles ─────────────── */

.tpl-skeleton {

  background: linear-gradient(90deg,

    var(--tpl-bg-tertiary) 25%,

    var(--tpl-border-light) 50%,

    var(--tpl-bg-tertiary) 75%

  );

  background-size: 200% 100%;

  animation: skeleton-shimmer 1.5s ease-in-out infinite;

  border-radius: 8px;

}

.tpl-skeleton-text {

  height: 1rem;

  margin-bottom: 0.5rem;

}

.tpl-skeleton-text:last-child {

  width: 60%;

}

.tpl-skeleton-avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

}

.tpl-skeleton-card {

  border-radius: 16px;

  padding: 1.5rem;

}

.tpl-skeleton-row {

  display: flex;

  gap: 12px;

  margin-bottom: 12px;

  align-items: center;

}

.tpl-skeleton-row .tpl-skeleton {

  flex: 1;

  height: 16px;

}

.tpl-skeleton-row .tpl-skeleton:last-child {

  width: 40%;

}



/* ─────────────── Offline Indicator ─────────────── */

.tpl-offline-indicator {

  position: fixed;

  bottom: 16px;

  left: 50%;

  transform: translateX(-50%) translateY(100px);

  z-index: 9999;

  background: var(--tpl-accent-warning);

  color: #000;

  padding: 8px 16px;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 6px;

  box-shadow: var(--tpl-shadow-lg);

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  opacity: 0;

  pointer-events: none;

}

.tpl-offline-indicator.visible {

  transform: translateX(-50%) translateY(0);

  opacity: 1;

}

.tpl-offline-indicator i {

  font-size: 0.875rem;

}



/* ─────────────── Theme Toggle Button ─────────────── */

.tpl-theme-toggle {

  width: 2.6rem;

  height: 2.6rem;

  border-radius: 13px;

  border: 1.5px solid rgba(226, 232, 240, .95);

  background: rgba(255, 255, 255, .78);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  color: #475569;

  font-size: 1rem;

  transition: background .18s, color .18s, border-color .18s, transform .2s;

  -webkit-tap-highlight-color: transparent;

}

.tpl-theme-toggle:hover {

  background: #2a2a38;

  color: #fff;

  border-color: #2a2a38;

  transform: scale(1.05);

}

.tpl-theme-toggle:focus-visible {

  outline: 2px solid var(--tpl-accent-primary);

  outline-offset: 2px;

}

.tpl-theme-toggle i {

  font-size: 1.1rem;

  transition: transform .3s cubic-bezier(0.34, 1.56, .64, 1);

}

.tpl-theme-toggle[aria-pressed="true"] i {

  transform: rotate(180deg);

}



/* Onboarding Overlay & Tooltip */

#tpl-onboarding-overlay {

  animation: fadeIn 0.3s ease;

}

#tpl-onboarding-tooltip {

  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, .64, 1);

}

#tpl-onboarding-highlight {

  animation: pulse 1.5s ease-in-out infinite;

}

.tpl-onboarding-skip:hover {

  color: var(--tpl-text-primary) !important;

}

.tpl-onboarding-next:hover,

.tpl-onboarding-prev:hover {

  transform: translateY(-1px);

}



/* Skeleton Loading Container */

.tpl-skeleton-container {

  padding: 1.5rem;

}

.site-header.tpl-header {

  position: sticky;

  top: 12px;

  overflow: hidden;

  border-radius: 18px;

  background: rgba(255, 255, 255, .74);

  backdrop-filter: blur(26px) saturate(170%);

  -webkit-backdrop-filter: blur(26px) saturate(170%);

  border: 1.5px solid rgba(255, 255, 255, .85);

  animation: tpl-rgb-halo 7s linear infinite;

}



/* animated RGB gradient skin (behind content, inside the glass card) */

.site-header.tpl-header::before {

  content: "";

  position: absolute;

  inset: 0;

  height: auto;

  z-index: 0;

  border-radius: inherit;

  background: var(--tpl-rgb-grad);

  background-size: 320% 320%;

  animation: tpl-rgb-flow 9s ease-in-out infinite;

  opacity: .06;

  pointer-events: none;

}



.header-container {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 58px;

  min-height: 58px;

  max-height: 58px;

  padding: 0 1.25rem;

  gap: 1.25rem;

}



/* desktop nav = dock-shaped pills (icon + label, same visual family) */

/* ─────────────── header layout: responsive desktop nav vs mobile drawer ─────────────── */
@media (min-width: 1201px) {
  .tpl-main-nav {
    display: flex !important;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tpl-header-signals,
.tpl-header-auth {
  display: none !important;
}

.tpl-burger {
  display: inline-flex !important;
}

.tpl-main-nav {

  display: flex;

  align-items: center;

  gap: .35rem;

  flex-wrap: nowrap;

  white-space: nowrap;

  list-style: none;

  margin: 0;

  padding: 0;

}

.tpl-main-nav .nav-link {

  display: inline-flex;

  align-items: center;

  gap: .35rem;

  padding: .35rem .65rem;

  border-radius: 12px;

  white-space: nowrap;

  font-size: .84rem;

  font-weight: 700;

  text-decoration: none;

  flex-shrink: 0;

  transition: all .2s ease;

}

.tpl-main-nav .nav-link i { color: #64748B; opacity: 0.72; font-size: .95rem; transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1); }

.tpl-main-nav .nav-link:hover { color: var(--tpl-rgb-ink); background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .28), 0 6px 16px -9px rgba(79, 70, 229, .6); }

.tpl-main-nav .nav-link:hover i { transform: scale(1.12); }

.tpl-main-nav .nav-link.tpl-active { background: transparent !important; border: none !important; box-shadow: none !important; }

.tpl-main-nav .nav-link.tpl-active i {
  /* overridden by google palette */
  opacity: 1 !important;
  display: inline-block;
  animation: tpl-heartbeat-glow 1.85s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}



/* header auth cluster + profile chip */

.tpl-header-auth { display: flex; align-items: center; gap: .5rem; }

.tpl-profile-chip {

  position: relative;

  width: 38px; height: 38px;

  flex: none;

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

  overflow: hidden;

  border-radius: 50%;

  text-decoration: none;

  background: var(--tpl-rgb-grad);

  background-size: 220% 220%;

  animation: tpl-rgb-flow 8s ease-in-out infinite;

  box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .7);

}

.tpl-profile-chip img { width: 100%; height: 100%; object-fit: cover; display: none; }

.tpl-chip-initials { color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .02em; }



/* clean hamburger: glass button + 4-dot glyph (morphs to X when open) */

.tpl-burger {

  display: inline-flex !important;

  appearance: none;

  border: 1.5px solid rgba(226, 232, 240, .95);

  background: rgba(255, 255, 255, .78);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  cursor: pointer;

  width: 2.6rem; height: 2.6rem;

  border-radius: 13px;

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

  padding: 0;

  box-shadow: 0 5px 16px -9px rgba(15, 23, 42, .45);

  -webkit-tap-highlight-color: transparent;

  transition: transform .2s ease, background .2s ease;

}

.tpl-burger:hover {

  transform: scale(1.05);

}

.tpl-burger-glyph { position: relative; display: block; width: 20px; height: 20px; }

.tpl-burger-glyph i {

  position: absolute;

  width: 7px; height: 7px;

  border-radius: 2.5px;

  background: var(--tpl-text-primary, #0F172A);

  transition: transform .32s cubic-bezier(.6, -.28, .34, 1.35), background .32s ease, opacity .22s ease;

}

.tpl-burger-glyph i:nth-child(1) { left: 1.5px;  top: 1.5px; }

.tpl-burger-glyph i:nth-child(2) { right: 1.5px; top: 1.5px; }

.tpl-burger-glyph i:nth-child(3) { left: 1.5px;  bottom: 1.5px; }

.tpl-burger-glyph i:nth-child(4) { right: 1.5px; bottom: 1.5px; }

body.tpl-menu-open .tpl-burger-glyph i:nth-child(1) { transform: translate(5px, 5px) rotate(45deg) scale(2.5, .5); background: var(--tpl-text-secondary, #333344); }

body.tpl-menu-open .tpl-burger-glyph i:nth-child(2) { transform: translate(-5px, 5px) rotate(-45deg) scale(2.5, .5); background: var(--tpl-text-secondary, #2a2a38); }

body.tpl-menu-open .tpl-burger-glyph i:nth-child(3),

body.tpl-menu-open .tpl-burger-glyph i:nth-child(4) { transform: scale(0); opacity: 0; }

@media (max-width: 1200px) {

  .tpl-main-nav,
  .main-nav {
    display: none !important;
  }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tpl-header-signals,
.tpl-header-auth {
  display: none !important;
}

.tpl-burger {
  display: inline-flex !important;
}

.tpl-main-nav { display: none !important; }

  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Ensure page content and footer are never obscured by the bottom floating dock on ALL screen sizes */
body {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

.ibots-apk #dlApk,
.ibots-apk .tpl-apkhide {
  display: none !important;
}



/* Header signals button (prominent on mobile / APK) */
.tpl-header-signals {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.85rem;
  height: 2.6rem;
  border-radius: 13px;
  border: 1.5px solid rgba(226, 232, 240, .95);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--tpl-text-primary, #0F172A);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Vazirmatn', var(--font-primary, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px -6px rgba(37, 99, 235, .25);
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.tpl-header-signals i {
  color: #2563EB;
  font-size: 1.1rem;
  transition: transform .25s ease;
}

.tpl-header-signals:hover {
  transform: translateY(-1px) scale(1.02);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px -4px rgba(37, 99, 235, .35);
}

.tpl-header-signals:hover i {
  transform: scale(1.15);
}

.tpl-header-signals.tpl-active {
  background: rgba(37, 99, 235, .08) !important;
  border-color: rgba(37, 99, 235, .35) !important;
  color: #2563EB !important;
}

.tpl-header-signals.tpl-active i {
  animation: tpl-heartbeat-glow 1.85s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

[data-theme="dark"] .tpl-header-signals {
  background: rgba(21, 29, 48, .82);
  border-color: rgba(255, 255, 255, .12);
  color: #F8FAFC;
  box-shadow: 0 4px 14px -6px rgba(56, 189, 248, .3);
}

[data-theme="dark"] .tpl-header-signals i {
  color: #38BDF8;
}

[data-theme="dark"] .tpl-header-signals:hover {
  background: rgba(28, 38, 61, .92);
  border-color: rgba(56, 189, 248, .35);
}

[data-theme="dark"] .tpl-header-signals.tpl-active {
  background: rgba(56, 189, 248, .12) !important;
  border-color: rgba(56, 189, 248, .4) !important;
  color: #38BDF8 !important;
}

@media (max-width: 1200px) {
  .tpl-header-signals {
    display: inline-flex;
  }
}

.ibots-apk .tpl-header-signals {
  display: inline-flex !important;
}

@media (max-width: 360px) {
  .tpl-header-signals span {
    display: none;
  }
  .tpl-header-signals {
    padding: 0;
    width: 2.6rem;
    justify-content: center;
  }
}

/* ─────────────── bottom dock (RGB glass, matched to header) ─────────────── */

.tpl-dock-fixed {

  position: fixed;

  inset-inline: 0;

  bottom: 0;

  z-index: 1200;

  display: flex;

  justify-content: center;

  padding: 0 12px;

  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));

  pointer-events: none;

}



.tpl-dock {

  pointer-events: auto;

  max-width: 580px;

  width: 100%;

  height: 68px;

  min-height: 68px;

  position: relative;

  overflow: visible;

  background: rgba(255, 255, 255, .84);

  backdrop-filter: blur(28px) saturate(185%);

  -webkit-backdrop-filter: blur(28px) saturate(185%);

  border: 1.5px solid rgba(255, 255, 255, .95);

  border-radius: 22px !important;

  animation: tpl-rgb-halo 7s linear infinite;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  gap: 4px;

  padding: 0 8px;

  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.16), 0 0 0 1.5px rgba(255, 255, 255, 0.8) !important;

}



/* same animated RGB skin as the header */

.tpl-dock::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  border-radius: inherit;

  background: var(--tpl-rgb-grad);

  background-size: 320% 320%;

  animation: tpl-rgb-flow 9s ease-in-out infinite;

  opacity: .07;

  pointer-events: none;

}



.tpl-dock-item {

  position: relative;

  z-index: 1;

  flex: 1;

  height: 54px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 4px 6px;

  border-radius: 14px;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  overflow: visible;

  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

  color: inherit;

}

.tpl-dock-item[aria-hidden] { visibility: hidden; }



.tpl-dock-item i {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #64748B !important;
  opacity: 0.68;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}



.tpl-dock-item b {

  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  font-size: 0.78rem !important;

  font-weight: 800 !important;

  color: #0F172A;

  text-align: center;

  line-height: 1.15;

  max-width: 100%;

  white-space: nowrap;

  display: block;

  letter-spacing: -0.2px;

  transition: color 0.18s ease;

}



.tpl-dock-item:hover {

  background: rgba(79, 70, 229, 0.08);

  transform: translateY(-2px);

}

.tpl-dock-item:hover i {
  color: #6366F1 !important;
  opacity: 0.95 !important;
  transform: scale(1.10);
}

.tpl-dock-item:hover b {

  color: #4F46E5 !important;

}



.tpl-dock-item.tpl-active { background: transparent !important; border: none !important; box-shadow: none !important; }

.tpl-dock-item.tpl-active i {
  /* overridden by google palette */
  opacity: 1 !important;
  animation: tpl-heartbeat-glow 1.85s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

.tpl-dock-item.tpl-active b {
  /* overridden by google palette */
  font-weight: 900 !important;
}



/* Unified Dock Item Specification (Home is unified with all dock items) */
.tpl-dock-center {
  /* Inherits standard .tpl-dock-item rules */
}





@media (max-width: 480px) {

  .tpl-dock {

    max-width: calc(100% - 16px);

    height: 64px;

    min-height: 64px;

    padding: 0 4px;

    border-radius: 20px !important;

  }

  .tpl-dock-item {

    height: 50px;

    padding: 2px 3px;

  }

  .tpl-dock-item i {

    font-size: 1.35rem !important;

  }

  .tpl-dock-item b {

    font-size: 0.72rem !important;

  }

  /* Unified dock center in responsive */

}



/* ─────────────── Symmetrical Twin Navbar Glass Themes (Header & Dock) ─────────────── */

/* Unified Twin Frosted Glass for Header and Dock */



/* Light Mode: Crisp pure frosted glass matching light canvas */

[data-theme="light"] .site-header.tpl-header,

:root:not([data-theme="dark"]) .site-header.tpl-header,

[data-theme="light"] .tpl-dock,

:root:not([data-theme="dark"]) .tpl-dock {

  background: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;

  border-radius: 18px !important;

  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04) !important;

}



:root:not([data-theme="dark"]) .site-header.tpl-header .brand-name {

  color: #0F172A !important;

}

:root:not([data-theme="dark"]) .site-header.tpl-header .brand-sub {

  color: #64748B !important;

}

:root:not([data-theme="dark"]) .tpl-main-nav .nav-link {

  color: #475569;

  font-weight: 700;

}

:root:not([data-theme="dark"]) .tpl-main-nav .nav-link i {

  color: #64748B;

}

:root:not([data-theme="dark"]) .tpl-main-nav .nav-link:hover {

  color: #4F46E5;

  background: rgba(79, 70, 229, 0.08);

}

:root:not([data-theme="dark"]) .tpl-dock-item i {

  color: #64748B;

}

:root:not([data-theme="dark"]) .tpl-dock-item b {

  color: #475569;

}

:root:not([data-theme="dark"]) .tpl-dock-item:hover {

  background: rgba(79, 70, 229, 0.08);

}

:root:not([data-theme="dark"]) .tpl-dock-item:hover i,

:root:not([data-theme="dark"]) .tpl-dock-item:hover b {

  color: #4F46E5;

}

:root:not([data-theme="dark"]) .tpl-burger,

:root:not([data-theme="dark"]) .tpl-theme-toggle {

  background: rgba(255, 255, 255, 0.9);

  border: 1.5px solid rgba(226, 232, 240, 0.95);

  color: #0F172A;

}

:root:not([data-theme="dark"]) .tpl-burger-glyph i {

  background: #0F172A;

}



/* Dark Mode: Deep dark luxury frosted glass matching dark canvas */

[data-theme="dark"] .site-header.tpl-header,

[data-theme="dark"] .tpl-dock {

  background: rgba(17, 24, 39, 0.85) !important;

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;

  border-radius: 18px !important;

  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.65) !important;

}



[data-theme="dark"] .site-header.tpl-header .brand-name {

  color: #FFFFFF !important;

}

[data-theme="dark"] .site-header.tpl-header .brand-sub {

  color: #94A3B8 !important;

}

[data-theme="dark"] .tpl-main-nav .nav-link {

  color: #CBD5E1 !important;

  font-weight: 700;

}

[data-theme="dark"] .tpl-main-nav .nav-link i {

  color: #94A3B8 !important;

}

[data-theme="dark"] .tpl-main-nav .nav-link:hover {

  color: #FFFFFF !important;

  background: rgba(255, 255, 255, 0.1) !important;

}

[data-theme="dark"] .tpl-dock {

  background: rgba(15, 23, 42, 0.90) !important;

  backdrop-filter: blur(28px) saturate(185%) !important;

  -webkit-backdrop-filter: blur(28px) saturate(185%) !important;

  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;

  border-radius: 22px !important;

  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;

}

[data-theme="dark"] .tpl-dock-item i {

  color: #F1F5F9 !important;

}

[data-theme="dark"] .tpl-dock-item b {

  font-family: 'Vazirmatn', sans-serif !important;

  color: #F8FAFC !important;

  font-weight: 800 !important;

}

[data-theme="dark"] .tpl-dock-item:hover {

  background: rgba(255, 255, 255, 0.12) !important;

}

[data-theme="dark"] .tpl-dock-item:hover i,

[data-theme="dark"] .tpl-dock-item:hover b {

  color: #FFFFFF !important;

}

/* Unified dock center dark label */

[data-theme="dark"] .tpl-dock-item.tpl-active { background: transparent !important; border: none !important; box-shadow: none !important; }

[data-theme="dark"] .tpl-dock-item.tpl-active i,

[data-theme="dark"] .tpl-dock-item.tpl-active b {

  color: #FFFFFF !important;

  text-shadow: 0 0 10px rgba(216, 180, 254, 0.6) !important;

}



/* Symmetrical active indicator removed — pure icon system */



/* ─────────────── Modal & Purchase Dark Mode Overrides ─────────────── */

#iboBuyModal {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] #iboBuyModal > div {
  background: #151D30 !important;
  color: #F8FAFC !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] #iboBuyModal div[style*="#F8FAFC"],
[data-theme="dark"] #iboBuyModal div[style*="background:#F8FAFC"],
[data-theme="dark"] #iboBuyModal div[style*="var(--canvas-subtle)"],
[data-theme="dark"] #iboBuyModal #pumNetDetail > div {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

/* Myket APK build: strictly isolate payment UI (store policy compliant) */
.ibots-myket .myket-hide { display: none !important; }
.myket-only { display: none; }
.ibots-myket .myket-only { display: block; }
.ibots-myket .usdt-only { display: none !important; }

[data-theme="dark"] #iboBuyModal #pumPlanTitle,
[data-theme="dark"] #iboBuyModal #pumUsdt {
  color: #FFFFFF !important;
}

[data-theme="dark"] #iboBuyModal .pum-method,
[data-theme="dark"] #iboBuyModal .pum-net {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #iboBuyModal .pum-method:hover,
[data-theme="dark"] #iboBuyModal .pum-net:hover {
  background: rgba(45, 60, 85, 0.85) !important;
  border-color: #6366F1 !important;
}

[data-theme="dark"] #iboBuyModal .pum-method b,
[data-theme="dark"] #iboBuyModal .pum-net b {
  color: #FFFFFF !important;
}

[data-theme="dark"] #iboBuyModal .pum-method small,
[data-theme="dark"] #iboBuyModal .pum-net small {
  color: #94A3B8 !important;
}

[data-theme="dark"] #iboBuyModal #pumClose {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #iboBuyModal #pumClose:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] #iboBuyModal #pumAddonNo,
[data-theme="dark"] #iboBuyModal #pumAddonYes {
  background: rgba(30, 41, 59, 0.7) !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] #iboBuyModal #pumAddonNo[style*="gradient"],
[data-theme="dark"] #iboBuyModal #pumAddonYes[style*="gradient"] {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
}

[data-theme="dark"] #iboBuyModal #pumCopy {
  background: rgba(45, 60, 85, 0.9) !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] #iboBuyModal #pumCopy:hover {
  background: rgba(79, 70, 229, 0.4) !important;
  color: #FFFFFF !important;
  border-color: #6366F1 !important;
}

[data-theme="dark"] #iboBuyModal #pumTx {
  background: #0B0E14 !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] #iboBuyModal #pumTx::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] #iboBuyModal button[style*="background:#fff"] {
  background: rgba(30, 41, 59, 0.7) !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}



/* ─────────────── mobile hamburger menu sheet (categorized) ─────────────── */

/* ─────────────── mobile hamburger menu sheet (unified glass card design) ─────────────── */

.tpl-menu-sheet {

  position: fixed;

  top: calc(12px + env(safe-area-inset-top, 0px));

  right: 12px;

  width: min(88vw, 350px);

  z-index: 1500;

  background: rgba(255, 255, 255, .84) !important;

  backdrop-filter: blur(28px) saturate(185%) !important;

  -webkit-backdrop-filter: blur(28px) saturate(185%) !important;

  border: 1.5px solid rgba(255, 255, 255, .95) !important;

  border-radius: 22px !important;

  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.22), 0 0 0 1.5px rgba(255, 255, 255, 0.8) !important;

  animation: tpl-rgb-halo 7s linear infinite !important;

  transform: translateX(calc(100% + 24px));

  transition: transform .34s cubic-bezier(.34, 1.15, .64, 1);

  display: flex;

  flex-direction: column;

  padding: 0;

  overflow: hidden;

}



@media (max-width: 992px) {

  .tpl-menu-sheet {

    bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* leaves floating dock visible and accessible */

  }

}

@media (min-width: 993px) {

  .tpl-menu-sheet {

    bottom: 20px;

  }

}



/* RGB gradient skin inside menu sheet — identical with top header and bottom dock */

.tpl-menu-sheet::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  border-radius: inherit;

  background: var(--tpl-rgb-grad);

  background-size: 320% 320%;

  animation: tpl-rgb-flow 9s ease-in-out infinite;

  opacity: .07;

  pointer-events: none;

}



body.tpl-menu-open .tpl-menu-sheet {

  transform: translateX(0);

}



body.tpl-menu-open::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 1400;

  background: rgba(15, 23, 42, .42);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  opacity: 1;

  transition: opacity .25s ease;

}



.tpl-menu-head {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: .75rem;

  height: 58px;

  min-height: 58px;

  padding: 0 1.15rem;

  border-bottom: 1.5px solid rgba(226, 232, 240, .75);

  background: rgba(255, 255, 255, .35);

  margin: 0;

}



/* RGB accent bar echoes the navbars */

.tpl-menu-head::after {

  content: "";

  position: absolute;

  left: 0; right: 0; bottom: -1.5px;

  height: 2.5px;

  background: var(--tpl-rgb-grad);

  background-size: 320% 320%;

  animation: tpl-rgb-flow 9s ease-in-out infinite;

  opacity: .18;

}



.tpl-menu-head img {

  height: 36px;

  width: 36px;

  object-fit: contain;

}



.tpl-menu-head .brand-name {

  display: block;

  font-weight: 900;

  font-size: 1.15rem;

  letter-spacing: -0.3px;

  color: var(--text-heading, #0F172A);

}



.tpl-menu-head .brand-sub {

  display: block;

  font-size: .62rem;

  font-weight: 800;

  letter-spacing: 0.8px;

  color: #64748B;

}



.tpl-menu-close {

  position: relative;

  z-index: 2;

  margin-inline-start: auto;

  width: 2.25rem;

  height: 2.25rem;

  flex: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  border: 1.5px solid rgba(226, 232, 240, .9);

  background: rgba(255, 255, 255, .7);

  color: var(--text-heading, #0F172A);

  font-size: .95rem;

  cursor: pointer;

  transition: all .2s ease;

}



.tpl-menu-close:hover {

  background: #4F46E5;

  color: #FFFFFF;

  border-color: #4F46E5;

  transform: rotate(90deg) scale(1.08);

}



.tpl-menu-scroll {

  position: relative;

  z-index: 1;

  flex: 1;

  overflow-y: auto;

  overscroll-behavior: contain;

  padding: .85rem 1rem .6rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tpl-menu-group {

  position: relative;

  z-index: 1;

  margin: 0;

}



.tpl-menu-group-title {

  position: relative;

  z-index: 1;

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  margin: 0 0 .45rem .2rem;

  padding: .2rem .65rem;

  font-family: 'Vazirmatn', -apple-system, sans-serif !important;

  font-size: .74rem !important;

  font-weight: 800 !important;

  letter-spacing: -0.2px;

  border-radius: 9999px;

  background: rgba(99, 102, 241, 0.08);

  color: #4F46E5;

  border: 1px solid rgba(99, 102, 241, 0.18);

}



.tpl-menu-group-title i {

  color: #10B981;

  font-size: .85rem;

}



.tpl-menu-group-links {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: .25rem;

}



.tpl-menu-link {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: .75rem;

  padding: .65rem .95rem;

  border-radius: 14px;

  color: var(--text-heading, #0F172A);

  font-family: 'Vazirmatn', -apple-system, sans-serif !important;

  font-weight: 800 !important;

  font-size: .88rem !important;

  text-decoration: none;

  border: 1.5px solid transparent;

  transition: all .2s cubic-bezier(.34, 1.56, .64, 1);

}



.tpl-menu-link i {
  font-size: 1.25rem !important;
  color: #64748B !important;
  opacity: 0.68;
  min-width: 1.5rem;
  text-align: center;
  transition: all .24s cubic-bezier(.34, 1.56, .64, 1);
}



.tpl-menu-link:hover,

.tpl-menu-link:focus {

  background: rgba(79, 70, 229, .08);

  color: #4F46E5;

  border-color: rgba(79, 70, 229, .22);

  transform: translateX(-4px);

}



.tpl-menu-link:hover i {
  color: #6366F1 !important;
  opacity: 0.95 !important;
  transform: scale(1.10);
}



.tpl-menu-link.tpl-menu-active {
  background: rgba(2, 132, 199, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}



.tpl-menu-link.tpl-menu-active i {
  /* overridden by google palette */
  opacity: 1 !important;
  animation: tpl-heartbeat-glow 1.85s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}



.tpl-menu-auth {

  position: relative;

  z-index: 1;

  margin-top: auto;

  border-top: 1.5px solid rgba(226, 232, 240, .75);

  padding: .85rem 1rem;

  background: rgba(255, 255, 255, .5);

}



.tpl-menu-user {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: .25rem;

}



/* ─────────────── responsive header (matched & compact) ─────────────── */

@media (max-width: 768px) {

  .site-header.tpl-header { top: 8px; width: calc(100% - 16px); border-radius: 16px; }

  .header-container { height: 60px; padding: 0 .9rem; gap: .7rem; }

  .brand-logo-img { height: 34px; }

  .brand-name { font-size: 1.1rem; }

  .brand-sub { display: none; }

}



@media (max-width: 576px) {

  .tpl-btn-label { display: none; }        /* buttons collapse to clean icons */

  .tpl-header-auth { gap: .4rem; }

  .tpl-header-auth .btn { padding: .55rem .62rem; }

  .tpl-profile-chip { width: 34px; height: 34px; }

}



/* APK builds: hide download affordances everywhere (the app is already installed) */

.ibots-apk .tpl-apkhide,

.ibots-apk .tpl-menu-apkhide { display: none !important; }



/* ─────────────── user profile view (identity) ─────────────── */

.profile-card {

  background: rgba(255, 255, 255, .82);

  backdrop-filter: blur(20px) saturate(150%);

  -webkit-backdrop-filter: blur(20px) saturate(150%);

  border: 1.5px solid rgba(255, 255, 255, .9);

  border-radius: 20px;

  padding: clamp(1.2rem, 3vw, 2rem);

  animation: tpl-rgb-halo 8s linear infinite;

  position: relative;

  overflow: hidden;

}

.profile-card::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 4px;

  background: var(--tpl-rgb-grad);

  background-size: 320% 320%;

  animation: tpl-rgb-flow 9s ease-in-out infinite;

}



.profile-head {

  display: flex;

  align-items: center;

  gap: 1.1rem;

  flex-wrap: wrap;

  margin-bottom: 1.4rem;

}

.profile-avatar-wrap {

  position: relative;

  width: 84px; height: 84px;

  flex: none;

  border-radius: 50%;

  background: var(--tpl-rgb-grad);

  background-size: 240% 240%;

  animation: tpl-rgb-flow 8s ease-in-out infinite;

  box-shadow: 0 10px 26px -12px rgba(79, 70, 229, .85), inset 0 0 0 2px rgba(255, 255, 255, .75);

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

  overflow: visible;

}

.profile-avatar-wrap img {

  width: 100%; height: 100%;

  object-fit: cover;

  border-radius: 50%;

  display: none;

}

.profile-avatar-initials {

  color: #fff;

  font-weight: 900;

  font-size: 1.6rem;

  letter-spacing: .02em;

  user-select: none;

}

.profile-avatar-cam {

  position: absolute;

  inset: auto -2px -2px auto;

  width: 30px; height: 30px;

  border-radius: 50%;

  background: #0F172A;

  color: #fff;

  font-size: .8rem;

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

  cursor: pointer;

  border: 2px solid #fff;

  box-shadow: 0 4px 12px -5px rgba(15, 23, 42, .7);

  transition: transform .2s, background .2s;

}

.profile-avatar-cam:hover { background: #2a2a38; transform: scale(1.1); }



.profile-head-text { flex: 1; min-width: 200px; }

.profile-head-text h2 { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 900; color: var(--text-heading); }

.profile-email { display: block; font-size: .86rem; color: var(--text-muted); direction: ltr; text-align: right; }

.profile-badge {

  display: inline-flex; align-items: center; gap: .3rem;

  margin-top: .45rem;

  font-size: .72rem; font-weight: 800;

  padding: .25rem .6rem;

  border-radius: 999px;

}

.profile-badge.profile-badge-ok { background: rgba(16, 185, 129, .12); color: #047857; box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .4); }

.profile-badge.profile-badge-wait { background: rgba(245, 158, 11, .12); color: #B45309; box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, .45); }

.profile-back { flex: none; }



.profile-form {

  border-top: 1.5px dashed rgba(226, 232, 240, .95);

  padding-top: 1.25rem;

  margin-top: 1.25rem;

}

.profile-form h3 {

  display: flex; align-items: center; gap: .5rem;

  margin: 0 0 .9rem;

  font-size: .98rem; font-weight: 900;

  color: var(--text-heading);

}

.profile-form h3 i { color: var(--tpl-rgb-ink); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.profile-field { display: block; font-size: .8rem; font-weight: 800; color: var(--text-muted); margin-bottom: .9rem; }

.profile-field .form-input { margin-top: .35rem; font-weight: 600; color: var(--text-heading); }

.profile-field .form-input[readonly] { background: var(--canvas-subtle); color: var(--text-muted); cursor: not-allowed; direction: ltr; text-align: right; }

.profile-actions { display: flex; justify-content: flex-start; gap: .7rem; }



.profile-msg {

  margin-top: 1.1rem;

  padding: .7rem .9rem;

  border-radius: 12px;

  font-size: .85rem;

  font-weight: 800;

}

.profile-msg.profile-msg-ok { background: rgba(16, 185, 129, .1); color: #047857; box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .35); }

.profile-msg.profile-msg-err { background: rgba(244, 63, 94, .1); color: #BE123C; box-shadow: inset 0 0 0 1.5px rgba(244, 63, 94, .35); }



.profile-meta {

  display: flex; flex-wrap: wrap; gap: 1rem;

  border-top: 1.5px dashed rgba(226, 232, 240, .95);

  margin-top: 1.25rem;

  padding-top: 1rem;

  font-size: .8rem; color: var(--text-muted);

}

.profile-meta b { color: var(--text-heading); }

.profile-meta i { color: var(--tpl-rgb-ink); }



/* Eye button for password fields */

.profile-eye {

  position: absolute;

  right: .6rem;

  top: 50%;

  transform: translateY(-50%);

  width: 2rem; height: 2rem;

  border-radius: 50%;

  border: 1.5px solid rgba(226, 232, 240, .95);

  background: rgba(255, 255, 255, .85);

  color: #475569;

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

  cursor: pointer;

  transition: background .18s, color .18s, border-color .18s;

  z-index: 2;

  font-size: .75rem;

}

.profile-eye:hover { background: #2a2a38; color: #fff; border-color: #2a2a38; }

.profile-field { position: relative; }



@media (max-width: 640px) {

  .profile-grid { grid-template-columns: 1fr; gap: 0; }

  .profile-head { gap: .8rem; }

  .profile-avatar-wrap { width: 70px; height: 70px; }

  .profile-avatar-initials { font-size: 1.3rem; }

}



/* ─────────────── Shared Footer System ─────────────── */

.site-footer {

  background: var(--tpl-bg-primary, #FFFFFF);

  border-top: 2px solid var(--tpl-border-light, #E2E8F0);

  padding: 4rem 0 2rem 0;

  color: var(--tpl-text-secondary, #475569);

}



[data-theme="dark"] .site-footer {

  background: #0B0E14 !important;

  border-top-color: #202A3E !important;

}



[data-theme="dark"] .footer-col-title {

  color: #FFFFFF !important;

}



[data-theme="dark"] .footer-links-list a {

  color: #94A3B8 !important;

}



[data-theme="dark"] .footer-links-list a:hover {

  color: #818CF8 !important;

}



[data-theme="dark"] .footer-bottom-bar {

  border-top-color: #202A3E !important;

  color: #94A3B8 !important;

}



.site-footer .brand-logo-img,

.site-footer .brand-wrapper img,

.tpl-footer img {

  height: 28px !important;

  max-height: 28px !important;

  width: auto !important;

  max-width: 110px !important;

  object-fit: contain !important;

  display: inline-block !important;

}



.footer-brand-slogan {

  display: block !important;

  font-size: 0.88rem !important;

  font-weight: 800 !important;

  line-height: 1.85 !important;

  background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;

  background-clip: text !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  color: #A855F7;

  margin: 0.35rem 0 1rem 0 !important;

}





/* ─── Dark Mode Menu Sheet (Unified Glass Luxury) ─── */

[data-theme="dark"] .tpl-menu-sheet {

  background: rgba(15, 23, 42, 0.92) !important;

  backdrop-filter: blur(28px) saturate(120%) !important;

  -webkit-backdrop-filter: blur(28px) saturate(120%) !important;

  border: 1.5px solid rgba(55, 65, 81, 0.85) !important;

  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;

}

[data-theme="dark"] .tpl-menu-head {

  border-bottom-color: rgba(255, 255, 255, 0.08) !important;

  background: rgba(255, 255, 255, 0.02) !important;

}

[data-theme="dark"] .tpl-menu-head .brand-name { color: #F8FAFC !important; }

[data-theme="dark"] .tpl-menu-head .brand-sub { color: #94A3B8 !important; }

[data-theme="dark"] .tpl-menu-group-title {

  background: rgba(99, 102, 241, 0.16) !important;

  color: #A5B4FC !important;

  border-color: rgba(99, 102, 241, 0.3) !important;

}

[data-theme="dark"] .tpl-menu-group-title i { color: #10B981 !important; }

[data-theme="dark"] .tpl-menu-link { color: #E2E8F0 !important; }

[data-theme="dark"] .tpl-menu-link i { color: #A5B4FC !important; }

[data-theme="dark"] .tpl-menu-link:hover,

[data-theme="dark"] .tpl-menu-link:focus {

  background: rgba(99, 102, 241, 0.2) !important;

  color: #FFFFFF !important;

  border-color: rgba(165, 180, 252, 0.3) !important;

}



[data-theme="dark"] .tpl-menu-link.tpl-menu-active {
  background: rgba(2, 132, 199, 0.14) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .tpl-menu-auth {

  background: rgba(15, 23, 42, 0.6) !important;

  border-top-color: rgba(255, 255, 255, 0.08) !important;

}

[data-theme="dark"] .tpl-menu-close {

  background: rgba(30, 41, 59, 0.8) !important;

  border-color: rgba(255, 255, 255, 0.15) !important;

  color: #F8FAFC !important;

}



/* ─── Dark Mode Auth Modal ─── */

[data-theme="dark"] #authModal {

  background: rgba(0,0,0,0.75) !important;

}

[data-theme="dark"] #authModal .modal-content,

[data-theme="dark"] #authModal > div > div,

[data-theme="dark"] .auth-modal-inner {

  background: #151D30 !important;

  color: #F8FAFC !important;

  border: 1.5px solid rgba(255,255,255,0.12) !important;

}

[data-theme="dark"] #authModal input,

[data-theme="dark"] .auth-modal-inner input {

  background: #1C263D !important;

  border-color: #2D3B55 !important;

  color: #F8FAFC !important;

}

[data-theme="dark"] #authModal label,

[data-theme="dark"] .auth-modal-inner label { color: #94A3B8 !important; }

[data-theme="dark"] #authModal h2,

[data-theme="dark"] #authModal h3,

[data-theme="dark"] .auth-modal-inner h2,

[data-theme="dark"] .auth-modal-inner h3 { color: #F8FAFC !important; }



/* ─── Dark Mode Onboarding Popup ─── */

[data-theme="dark"] #tpl-onboarding-overlay {

  background: rgba(0,0,0,0.7) !important;

}

[data-theme="dark"] #tpl-onboarding-tooltip {

  background: #151D30 !important;

  border: 1.5px solid rgba(255,255,255,0.12) !important;

  color: #F8FAFC !important;

}



/* ─── Wide/Desktop: Header matches dock luxury design system ─── */

@media (min-width: 993px) {

  .site-header.tpl-header {

    left: 12px;

    right: 12px;

    top: 12px;

    border-radius: 18px;

    margin: 0 auto;

    max-width: 1400px;

    width: calc(100% - 24px);

  }

  .header-container {

    height: 58px;

    min-height: 58px;

    max-height: 58px;

  }

  /* Floating dock retains its luxury compact rectangular proportions */

  .tpl-dock {

    max-width: 560px;

    border-radius: 18px;

  }

}



/* ─── Mobile: dock and header have identical rectangular dimensions ─── */

@media (max-width: 992px) {

  .site-header.tpl-header {

    width: calc(100% - 24px);

    margin: 0 auto;

    border-radius: 18px;

  }

  .tpl-dock {

    max-width: calc(100% - 24px);

    border-radius: 18px;

  }

  .header-container {

    height: 58px;

  }

}

/* ==========================================================================
   IBO-TS DEFINITIVE MULTI-COLOR VIBRANT ICON & UI SYSTEM
   - Inspired by Google / Bootstrap 5 vibrant joyful palette
   - ZERO square boxes around icons or buttons in any state (NO frame, NO border)
   - Inactive: Bare icon only, opacity 0.52, distinct category color
   - Active: Full opacity 1.0, gentle heartbeat pulse (scale 1 -> 1.15 -> 1), NO box
   - Typography: Vazirmatn + Amiri + JetBrains Mono for numbers
   ========================================================================== */

/* ─── Gentle Heartbeat Pulse (Icon Only, Zero Box) ─── */
@keyframes tpl-icon-beat {
  0%   { transform: scale(1.00); }
  28%  { transform: scale(1.15); }
  55%  { transform: scale(1.00); }
  78%  { transform: scale(1.08); }
  100% { transform: scale(1.00); }
}

/* ─── Global Reset: Wipe all square frames, boxes & borders from nav & dock ─── */
.tpl-main-nav .nav-link,
.tpl-main-nav .nav-link:hover,
.tpl-main-nav .nav-link.tpl-active,
.tpl-dock-item,
.tpl-dock-item:hover,
.tpl-dock-item.tpl-active,
:root:not([data-theme="dark"]) .tpl-main-nav .nav-link.tpl-active,
:root:not([data-theme="dark"]) .tpl-dock-item.tpl-active,
[data-theme="dark"] .tpl-main-nav .nav-link.tpl-active,
[data-theme="dark"] .tpl-dock-item.tpl-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  animation: none !important;
}

/* ─── All Icon Glyphs: Pure symbol, zero background, zero box ─── */
.tpl-dock-icon,
.tpl-menu-icon,
.tpl-main-nav .nav-link i,
.tpl-dock-item i,
[class*="tpl-icon-"],
.tpl-menu-group-icon-badge,
.tpl-menu-group-icon-badge i {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-block;
  transition: color 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. MOBILE / TABLET DOCK (5 Distinct Vibrant Joyful Colors)
   ══════════════════════════════════════════════════════════════════════════ */
.tpl-dock-item i,
.tpl-dock-icon {
  font-size: 1.48rem !important;
  opacity: 0.52;
}

/* 1. کارنامه — Trophy Gold / Google Yellow */
.tpl-icon-perf {
  color: #F59E0B !important;
}
.tpl-dock-item.tpl-active .tpl-icon-perf {
  color: #D97706 !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* 2. داشبورد — Royal Blue / Google Blue */
.tpl-icon-dash {
  color: #2563EB !important;
}
.tpl-dock-item.tpl-active .tpl-icon-dash {
  color: #1D4ED8 !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* 3. خانه — Coral Red / Google Red */
.tpl-icon-home {
  color: #EF4444 !important;
}
.tpl-dock-item.tpl-active .tpl-icon-home {
  color: #DC2626 !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* 4. اشتراک — Emerald Green / Google Green */
.tpl-icon-pricing {
  color: #10B981 !important;
}
.tpl-dock-item.tpl-active .tpl-icon-pricing {
  color: #059669 !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* 5. اپلیکیشن — Vibrant Cyan / Teal */
.tpl-icon-app {
  color: #06B6D4 !important;
}
.tpl-dock-item.tpl-active .tpl-icon-app {
  color: #0891B2 !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* 6. خروج — Crimson Red */
.tpl-icon-logout {
  color: #DC2626 !important;
}
.tpl-dock-item.tpl-active .tpl-icon-logout {
  color: #B91C1C !important;
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* Dock text labels */
.tpl-dock-item b {
  opacity: 0.72;
  font-weight: 500;
  transition: opacity 0.22s ease, font-weight 0.22s ease, color 0.22s ease;
}
.tpl-dock-item.tpl-active b {
  opacity: 1 !important;
  font-weight: 700 !important;
}
.tpl-dock-item-perf.tpl-active b, .tpl-dock-item.tpl-active:has(.tpl-icon-perf) b    { color: #D97706 !important; }
.tpl-dock-item-dash.tpl-active b, .tpl-dock-item.tpl-active:has(.tpl-icon-dash) b    { color: #1D4ED8 !important; }
.tpl-dock-item-home.tpl-active b, .tpl-dock-item.tpl-active:has(.tpl-icon-home) b    { color: #DC2626 !important; }
.tpl-dock-item-pricing.tpl-active b, .tpl-dock-item.tpl-active:has(.tpl-icon-pricing) b { color: #059669 !important; }
.tpl-dock-item-app.tpl-active b, .tpl-dock-item.tpl-active:has(.tpl-icon-app) b     { color: #0891B2 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   2. DESKTOP NAVBAR (7 Distinct Vibrant Colors Side by Side)
   ══════════════════════════════════════════════════════════════════════════ */
.tpl-main-nav .nav-link i {
  font-size: 1.22rem !important;
  opacity: 0.52;
}

/* Unselected idle state: half-lit translucent */
.tpl-main-nav .nav-link i.bi-house-door-fill     { color: #EF4444; } /* Coral Red */
.tpl-main-nav .nav-link i.bi-trophy-fill         { color: #F59E0B; } /* Trophy Gold */
.tpl-main-nav .nav-link i.bi-broadcast-pin       { color: #2563EB; } /* Electric Blue */
.tpl-main-nav .nav-link i.bi-gem                 { color: #10B981; } /* Emerald Green */
.tpl-main-nav .nav-link i.bi-grid-1x2-fill       { color: #8B5CF6; } /* Royal Violet */
.tpl-main-nav .nav-link i.bi-patch-question-fill { color: #06B6D4; } /* Cyan Teal */
.tpl-main-nav .nav-link i.bi-headset             { color: #F97316; } /* Warm Orange */

/* Selected active state: full vibrant color + gentle heartbeat, NO BOX */
.tpl-main-nav .nav-link.tpl-active i {
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}
.tpl-main-nav .nav-link.tpl-active i.bi-house-door-fill     { color: #DC2626 !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-trophy-fill         { color: #D97706 !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-broadcast-pin       { color: #1D4ED8 !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-gem                 { color: #059669 !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-grid-1x2-fill       { color: #7C3AED !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-patch-question-fill { color: #0891B2 !important; }
.tpl-main-nav .nav-link.tpl-active i.bi-headset             { color: #EA580C !important; }

.tpl-main-nav .nav-link.tpl-active span {
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. DRAWER MENU (Harmonized Category Colors)
   ══════════════════════════════════════════════════════════════════════════ */
.tpl-menu-link i.tpl-menu-icon {
  font-size: 1.15rem !important;
  opacity: 0.52;
  min-width: 1.6rem;
  text-align: center;
}

.tpl-menu-group-trading  .tpl-menu-link i { color: #2563EB !important; }
.tpl-menu-group-sub      .tpl-menu-link i { color: #10B981 !important; }
.tpl-menu-group-support  .tpl-menu-link i { color: #F59E0B !important; }
.tpl-menu-group-legal    .tpl-menu-link i { color: #8B5CF6 !important; }
.tpl-menu-link-user      i                { color: #06B6D4 !important; }
.tpl-menu-link-logout    i                { color: #EF4444 !important; }
.tpl-menu-link-login     i                { color: #2563EB !important; }

.tpl-menu-group-trading  .tpl-menu-group-icon-badge i { color: #2563EB !important; opacity: 1; }
.tpl-menu-group-sub      .tpl-menu-group-icon-badge i { color: #10B981 !important; opacity: 1; }
.tpl-menu-group-support  .tpl-menu-group-icon-badge i { color: #F59E0B !important; opacity: 1; }
.tpl-menu-group-legal    .tpl-menu-group-icon-badge i { color: #8B5CF6 !important; opacity: 1; }

.tpl-menu-link:hover i { opacity: 0.88 !important; transform: scale(1.08); }

.tpl-menu-link.tpl-menu-active i {
  opacity: 1 !important;
  animation: tpl-icon-beat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}
.tpl-menu-group-trading  .tpl-menu-link.tpl-menu-active i { color: #1D4ED8 !important; }
.tpl-menu-group-sub      .tpl-menu-link.tpl-menu-active i { color: #059669 !important; }
.tpl-menu-group-support  .tpl-menu-link.tpl-menu-active i { color: #D97706 !important; }
.tpl-menu-group-legal    .tpl-menu-link.tpl-menu-active i { color: #7C3AED !important; }

/* ══════════════════════════════════════════════════════════════════════════
   4. GLASSMORPHISM CARDS & NUMERIC MONOSPACE BOLD
   ══════════════════════════════════════════════════════════════════════════ */
.glass-card,
.pricing-card,
.plan-card,
.exchange-card,
.settings-card,
.feature-card {
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px 0 rgba(31, 38, 135, 0.06) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.glass-card:hover,
.pricing-card:hover,
.plan-card:hover,
.exchange-card:hover,
.feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 38px 0 rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .exchange-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .feature-card {
  background: rgba(15, 23, 42, 0.68) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .glass-card:hover,
[data-theme="dark"] .pricing-card:hover,
[data-theme="dark"] .plan-card:hover,
[data-theme="dark"] .exchange-card:hover,
[data-theme="dark"] .feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 38px 0 rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Numeric values: Bold English JetBrains Mono */
.mono,
.num,
.stat-value,
.price-value,
.pnl-bold-profit,
.pnl-bold-loss,
[data-numeric] {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-weight: 700 !important;
  direction: ltr !important;
  display: inline-block;
}


/* ==========================================================================
   UNIFIED LUXURY PAGE LOADER & SPLASH OVERLAY
   - Pure solid white (#FFFFFF) in light mode
   - Pure solid dark (#0B0E14) in dark mode
   - Centered branding logo with breathing pulse
   - Slim loading track with trailing multi-spectrum light beam runner
   ========================================================================== */

#tpl-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #F8FAFC 65%, #EFF6FF 100%);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
  user-select: none;
  padding: 1.5rem;
  overflow: hidden;
}

[data-theme="dark"] #tpl-page-loader {
  background: radial-gradient(circle at 50% 35%, #111827 0%, #0B0E14 65%, #05070A 100%) !important;
}

#tpl-page-loader.tpl-loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tpl-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 540px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.tpl-loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tpl-loader-logo-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.tpl-loader-logo-halo {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(16, 185, 129, 0.15) 50%, transparent 72%);
  animation: tpl-halo-pulse 3s ease-in-out infinite;
  filter: blur(8px);
}

.tpl-loader-logo {
  position: relative;
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(79, 70, 229, 0.28));
  animation: tpl-logo-breathe 2.4s ease-in-out infinite;
}

.tpl-loader-title {
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #4F46E5 0%, #2563EB 50%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[data-theme="dark"] .tpl-loader-title {
  background: linear-gradient(135deg, #818CF8 0%, #38BDF8 50%, #34D399 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.tpl-loader-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #64748B;
  text-transform: uppercase;
}

[data-theme="dark"] .tpl-loader-sub {
  color: #94A3B8 !important;
}

/* Slogan Container & Animation */
.tpl-loader-slogan-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.1rem 0 1.5rem;
  padding: 0.4rem 1rem;
}

.tpl-loader-slogan {
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  font-size: clamp(0.92rem, 2.5vw, 1.12rem);
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  background: linear-gradient(135deg, #1E293B 0%, #4F46E5 50%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: tpl-slogan-glow 2.8s ease-in-out infinite;
}

[data-theme="dark"] .tpl-loader-slogan {
  background: linear-gradient(135deg, #F8FAFC 0%, #A5B4FC 50%, #6EE7B7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Multi-Spectrum Progress Track */
.tpl-loader-track {
  position: relative;
  width: min(320px, 80vw);
  height: 5px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .tpl-loader-track {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.tpl-loader-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(239, 68, 68, 0) 0%,
    #EF4444 15%,
    #F59E0B 35%,
    #10B981 55%,
    #06B6D4 75%,
    #4F46E5 90%,
    #8B5CF6 100%
  );
  box-shadow: 0 0 16px 2px rgba(79, 70, 229, 0.65);
  animation: tpl-beam-runner 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Animated Interactive Domain Badge */
.tpl-loader-domain-pill {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(79, 70, 229, 0.22);
  box-shadow: 0 6px 18px -4px rgba(79, 70, 229, 0.16);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #4F46E5;
  letter-spacing: 0.5px;
  animation: tpl-pill-float 3s ease-in-out infinite;
}

[data-theme="dark"] .tpl-loader-domain-pill {
  background: rgba(21, 29, 48, 0.85) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #A5B4FC !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 14px rgba(99, 102, 241, 0.2) !important;
}

.tpl-loader-domain-pill .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: tpl-dot-pulse 1.4s ease-in-out infinite;
}

/* Keyframes */
@keyframes tpl-beam-runner {
  0% {
    left: -150px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes tpl-logo-breathe {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 8px 20px rgba(79, 70, 229, 0.25));
  }
  50% {
    transform: scale(1.06) translateY(-3px);
    filter: drop-shadow(0 14px 28px rgba(79, 70, 229, 0.42));
  }
}

@keyframes tpl-halo-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}

@keyframes tpl-slogan-glow {
  0%, 100% {
    filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.12));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.28));
    transform: translateY(-2px);
  }
}

@keyframes tpl-pill-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes tpl-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

/* ==========================================================================
   GLOBAL DARK MODE HARDENING & RICH GRADIENT CARDS
   Eliminates all accidental white/light cards across 100% of pages
   ========================================================================== */
[data-theme="dark"] {
  --canvas-bg: #0B0E14;
  --canvas-subtle: #111726;
  --canvas-card: #151D30;
  --canvas-contrast: #1C263D;
  --border-light: #202A3E;
  --border-medium: #2D3A54;
  --text-heading: #F8FAFC;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --card-bg: #151D30;
}

[data-theme="dark"] .kpi-card,
[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .dl-card,
[data-theme="dark"] .download-card,
[data-theme="dark"] .about-badge-item,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .perf-card,
[data-theme="dark"] .signals-desk-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .review-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .modal-container-box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .exchange-card,
[data-theme="dark"] .terminal-card,
[data-theme="dark"] .executive-terminal {
  background: linear-gradient(145deg, #161F33 0%, #111728 100%) !important;
  border-color: #202A3E !important;
  color: #CBD5E1 !important;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .download-card:hover,
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .plan-card:hover,
[data-theme="dark"] .about-badge-item:hover {
  background: linear-gradient(145deg, #1C2640 0%, #151D30 100%) !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.7), 0 0 18px rgba(79, 70, 229, 0.25) !important;
}

[data-theme="dark"] .badge-spectrum-1 {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), #151D30) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}

[data-theme="dark"] .badge-spectrum-2 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), #151D30) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

[data-theme="dark"] .badge-spectrum-3 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), #151D30) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

[data-theme="dark"] .badge-spectrum-4 {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), #151D30) !important;
  border-color: rgba(236, 72, 153, 0.45) !important;
}

[data-theme="dark"] details {
  background: linear-gradient(145deg, #161F33 0%, #111728 100%) !important;
  border-color: #202A3E !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] summary {
  color: #F8FAFC !important;
}

[data-theme="dark"] .kpi-card h3,
[data-theme="dark"] .card h3,
[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .about-badge-item h4,
[data-theme="dark"] .download-card h3,
[data-theme="dark"] .download-card h4 {
  color: #F8FAFC !important;
}

[data-theme="dark"] .kpi-card p,
[data-theme="dark"] .card p,
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .about-badge-item p,
[data-theme="dark"] .download-card p {
  color: #94A3B8 !important;
}

[data-theme="dark"] .marquee-bar,
[data-theme="dark"] .hero-section {
  background: #0B0E14 !important;
}

/* ─── In-App Floating Glass Offline Banner ─── */
.tpl-offline-banner {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(239, 68, 68, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.35);
  font-size: 0.9rem;
  font-weight: 700;
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.tpl-offline-banner.visible {
  top: 20px;
}

.tpl-offline-banner i {
  font-size: 1.15rem;
  animation: tpl-icon-beat 2s infinite ease-in-out;
}

/* ============ Mobile Nav Drawer — Lite & Dark Mode ============ */

.mobile-nav {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Wide mode for landscape / TV / desktop monitor */
.mobile-nav.wide-mode {
  width: 400px;
  max-width: 100vw;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
}

/* Ultra-wide mode for very wide screens (>= 2560px) */
@media (min-width: 2560px) {
  .mobile-nav.wide-mode {
    width: 520px;
  }
}

/* Large desktop monitors (>= 1920px) */
@media (min-width: 1920px) {
  .mobile-nav.wide-mode {
    width: 480px;
  }
}

/* Smooth expand animation for wide mode */
.mobile-nav.wide-mode.expand-in {
  animation: mobileNavExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mobileNavExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 320px;
    opacity: 1;
  }
}

/* Collapse state - hidden when not expanded (for mobile) */
.mobile-nav.collapse {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Smooth expand animation for wide mode */
.mobile-nav.wide-mode.expand-in {
  animation: mobileNavExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mobileNavExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 400px;
    opacity: 1;
  }
}

/* Minimum width for wide mode (ensures content is readable on large screens) */
@media (max-width: 1400px) {
  .mobile-nav.wide-mode {
    min-width: 400px;
  }
}

@media (max-width: 1024px) {
  .mobile-nav.wide-mode {
    min-width: 360px;
  }
}

@media (max-width: 768px) {
  .mobile-nav.wide-mode {
    min-width: 300px;
  }
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--tpl-border-medium);
  background: var(--tpl-glass-bg);
  backdrop-filter: blur(12px);
}

/* Expand button in drawer header (appears only in wide mode / desktop) */
.mobile-nav-expand-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--tpl-border-medium);
  background: var(--tpl-bg-elevated);
  color: var(--tpl-text-secondary);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.mobile-nav-expand-btn:hover {
  background: var(--tpl-bg-tertiary);
  color: var(--tpl-text-primary);
}

/* Show expand button only in wide mode */
.mobile-nav.wide-mode .mobile-nav-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-brand {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--tpl-text-primary);
  letter-spacing: -0.3px;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav-list li {
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--tpl-text-secondary);
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-item:hover {
  background: var(--tpl-bg-tertiary);
  color: var(--tpl-text-primary);
}

.nav-item.nav-signals {
  border-left: 3px solid var(--tpl-accent-success);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--tpl-text-muted);
}

.nav-item:hover .nav-icon {
  color: var(--tpl-text-primary);
}

.nav-item.nav-signals .nav-icon {
  color: var(--tpl-accent-success);
}

.signal-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--tpl-accent-success);
  color: #FFFFFF;
  margin-left: auto;
}

.mobile-nav-footer {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border-top: 1px solid var(--tpl-border-medium);
  background: var(--tpl-glass-bg);
}

.mobile-nav-footer small {
  font-size: 0.7rem;
  color: var(--tpl-text-muted);
}

/* Dark mode mobile nav overrides */
[data-theme="dark"] .mobile-nav-header {
  border-bottom-color: rgba(55, 65, 81, 0.8);
  background: rgba(17, 24, 39, 0.85);
}

[data-theme="dark"] .mobile-nav-brand {
  color: #F8FAFC;
}

[data-theme="dark"] .nav-item {
  color: #9CA3AF;
}

[data-theme="dark"] .nav-item:hover {
  background: rgba(55, 65, 81, 0.5);
  color: #F8FAFC;
}

[data-theme="dark"] .nav-item.nav-signals {
  border-left-color: #34D399;
}

[data-theme="dark"] .nav-icon {
  color: #6B7280;
}

[data-theme="dark"] .nav-item:hover .nav-icon {
  color: #F8FAFC;
}

[data-theme="dark"] .nav-item.nav-signals .nav-icon {
  color: #34D399;
}

[data-theme="dark"] .mobile-nav-footer {
  border-top-color: rgba(55, 65, 81, 0.8);
  background: rgba(17, 24, 39, 0.85);
}

[data-theme="dark"] .mobile-nav-footer small {
  color: #9CA3AF;
}
/* ================================================================ */