:root{
    --bg: #0B0F1A;
    --surface: #0F172A;
    --surface2: #111B2E;
    --border: rgba(255,255,255,.08);
  
    --text: #E5E7EB;
    --muted: #94A3B8;
  
    --primary: #F0B90B;     /* Binance-ish gold */
    --primary2: #F59E0B;
    --blue: #3B82F6;
  
    --shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  
  html, body{
    background: var(--bg);
    color: var(--text);
  }
  
  a{ color: inherit; text-decoration: none; }
  a:hover{ color: var(--primary); }
  /* ===== CHIPS / PARTNER TABS (ALPHA LABS, etc) ===== */
.chips-2026{
  max-width: 1180px;
  margin: 14px auto 0 auto;
  padding: 0 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip-2026{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 10px;                 /* sharper */
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  color: rgba(229,231,235,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);

  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;

  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.chip-2026::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(240,185,11,.14), rgba(240,185,11,0) 70%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .18s ease;
  z-index: -1;
}

.chip-2026:hover{
 transform: translateY(-2px);
 color: rgba(229,231,235,.95);
 border-color: rgba(240,185,11,.55);
 background: linear-gradient(145deg, rgba(240,185,11,.10), rgba(255,255,255,.02));
 box-shadow: 0 10px 30px rgba(0,0,0,.30);

  
}

.chip-2026:hover::before{
  opacity: 1;
}
/* Active/Selected chip */
.chip-2026.active{
  color: rgba(229,231,235,.98);
  border-color: rgba(240,185,11,.85);
  background: linear-gradient(145deg, rgba(240,185,11,.16), rgba(255,255,255,.03));
  box-shadow: 0 0 22px rgba(240,185,11,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.chip-2026.active::before{
  opacity: 1;
}

  /* ===== NAVBAR (2026) ===== */
  /* Ensure Bootstrap collapse area lays out correctly inside our nav */
  .navbar-collapse{
    display: flex !important;
    align-items: center;
  }
  @media (max-width: 991.98px){
    .navbar-collapse{
      display: block !important;
    }

    .nav-links-2026{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;          
  overflow-x: auto;           /* ✅ allow horizontal scroll instead of clipping */
  overflow-y: visible;        /* ✅ don't clip popups */
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox hide scrollbar */
}
.nav-links-2026::-webkit-scrollbar{
  display:none;               /* Chrome hide scrollbar */
}

        
    .nav-link-2026.active{
        color: var(--text);
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.10);
      }
        
  }
  .navbar-2026{
    position: sticky !important;
    top: 0;
    z-index: 3000 !important;
    width: 100%;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    min-height: 56px;
    background: rgba(11, 15, 26, 0.85); /* Slightly transparent dark bg */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
  }
  
  .nav-inner-2026{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
    padding: 14px 18px;
    max-width: 1180px;
    margin: 0 auto;
  }
  
  .nav-link-2026{
    position: relative;
    padding: 10px 14px;
    border-radius: 6px;                 /* sharper edges */
    color: rgba(229,231,235,.82);
    font-weight: 750;
    font-size: 14px;
  
    background: rgba(255,255,255,.02);  /* darker */
    border: 1px solid rgba(255,255,255,.10);
  
    transition: transform .12s ease, border-color .15s ease, color .15s ease, background .15s ease;
  }
  
  /* soft backlight layer */
  .nav-link-2026::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius: 14px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(240,185,11,.18), rgba(240,185,11,0) 70%);
    opacity: 0;
    filter: blur(6px);
    transition: opacity .18s ease;
    z-index: -1;
  }
  
  .nav-link-2026:hover{
    color: var(--text);
    border-color: rgba(240,185,11,.35);
    background: rgba(240,185,11,.06);
    transform: translateY(-1px);
  }
  
  .nav-link-2026:hover::before{
    opacity: 1;
  }
  
  /* active tab */
  .nav-link-2026.active{
    color: var(--text);
    border-color: rgba(240,185,11,.50);
    background: rgba(240,185,11,.10);
  }
  
  .nav-link-2026.active::before{
    opacity: 1;
  }
  
  /* Make tabs match the "View All Plans" glow pill vibe */
/* ===== NAV LINKS: make them look like premium tabs ===== */
.nav-link-2026{
  position: relative;
  padding: 10px 14px;
  border-radius: 10px;               /* sharper rectangle */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(229,231,235,.78);
  font-weight: 750;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.nav-link-2026::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(240,185,11,.16),
    rgba(240,185,11,0) 70%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity .18s ease;
  z-index: -1;
}

.nav-link-2026:hover{
  transform: translateY(-1px);
  color: rgba(229,231,235,.95);
  border-color: rgba(240,185,11,.35);
  background: rgba(240,185,11,.06);
}

.nav-link-2026:hover::before{
  opacity: 1;
}

  
  
  .brand-2026{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .brand-text-2026{
    font-weight: 850;
    letter-spacing: -0.01em;
    color: var(--text);
    font-size: 18px;
  }
  
  .nav-right-2026{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-left: auto;
    padding: 6px 0;
  }
  #userMenu.btn-2026{
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
  }
  /* Notifications dropdown = KPI glass */
.notif-menu-2026{
  width: 300px;
  max-width: 92vw;

  background: rgba(12, 21, 44, .82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.02);

  color: var(--text) !important;
  padding: 10px;
  z-index: 3005 !important;   /* ensure above hero */
}
.notif-menu-2026 .dropdown-item{
  border-radius: 12px;
  color: var(--text);
}
.notif-menu-2026 .dropdown-item:hover{
  background: rgba(255,255,255,.08);
}
.notif-dropdown,
.user-dropdown {
  width: 240px;  
  padding: 10px;               /* tighten */
  max-width: calc(100vw - 24px);
  right: 0;
  left: auto;
}

@media (max-width: 520px) {
  .notif-dropdown,
  .user-dropdown {
    left: 12px;
    right: 12px;
    width: auto;
  }
}


  
  /* ===== BUTTONS ===== */
  .btn-2026{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 750;
    border: 1px solid var(--border);
    transition: transform .08s ease, background .15s ease;
  }
  .btn-2026:active{ transform: translateY(1px); }
  
  .btn-primary-2026{
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: #0B0F1A;
    border: 0;
    box-shadow: var(--shadow);
  }
  
  .btn-ghost-2026{
    background: rgba(255,255,255,.06);
    color: var(--text);
  }
  .btn-ghost-2026:hover{
    background: rgba(255,255,255,.10);
  }
  /* ===== GLOW BUTTON (used for navbar tabs + CTA) ===== */
.btn-glow-2026{
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(229,231,235,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.btn-glow-2026::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(240,185,11,.18),
    rgba(240,185,11,0) 70%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity .18s ease;
  z-index: -1;
}

.btn-glow-2026:hover{
  background: rgba(240,185,11,.06);
  border-color: rgba(240,185,11,.35);
  color: rgba(229,231,235,.98);
}

.btn-glow-2026:hover::before{
  opacity: 1;
}

  /* ===== GLOW PILL (reuse View All Plans vibe) ===== */
.glow-pill-2026{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.glow-pill-2026::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(240,185,11,.16), rgba(240,185,11,0) 70%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity .18s ease;
  z-index: -1;
}

.glow-pill-2026:hover{
  border-color: rgba(240,185,11,.30);
  background: rgba(240,185,11,.06);
}

.glow-pill-2026:hover::before{
  opacity: 1;
}
 
  /* ===== HERO ===== */
  .hero-2026{
    padding: 52px 0 26px 0;
    background:
      radial-gradient(900px 420px at 20% 15%, rgba(59,130,246,.22), transparent 60%),
      radial-gradient(760px 340px at 70% 20%, rgba(240,185,11,.18), transparent 60%);
  }
  
  .hero-wrap-2026{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
    text-align: center;
  }
  
  .badge-2026{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    font-weight: 650;
    color: var(--text);
  }
  
  .hero-title-2026{
    margin-top: 18px;
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.06;
    font-weight: 850;
    letter-spacing: -0.02em;
  }
  
  .hero-sub-2026{
    margin: 14px auto 0 auto;
    max-width: 72ch;
    font-size: 16px;
    color: var(--muted);
  }
  
  .hero-ctas-2026{
    margin-top: 26px;
    display:flex;
    justify-content:center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .hero-trust-2026{
    margin-top: 16px;
    display:flex;
    justify-content:center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--muted);
    font-weight: 600;
  }
  
  .hero-trust-2026 span{
    display:inline-flex;
    gap: 8px;
    align-items:center;
  }
  
  .brand-text-2026{
    font-weight: 850;
    letter-spacing: -0.01em;
    color: var(--text);
    font-size: 18px;
    position: relative;
  }
  
  .signal-dot-wrap{
    position: relative;
    display: inline-block;
  }
  
  .signal-dot{
    position: absolute;
    right: -10px;      /* move dot to the right of "a" */
    top: 2px;          /* align vertically */
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(240,185,11,1);
    box-shadow: 0 0 0 0 rgba(240,185,11,.0);
    animation: signalPulse 1.8s ease-in-out infinite;
  }
  
  /* pulse: grow + glow then calm (not too fast) */
  @keyframes signalPulse{
    0%   { transform: scale(0.85); opacity: .55; box-shadow: 0 0 0 0 rgba(240,185,11,.0); }
    35%  { transform: scale(1.25); opacity: 1;   box-shadow: 0 0 0 8px rgba(240,185,11,.14); }
    60%  { transform: scale(0.95); opacity: .85; box-shadow: 0 0 0 14px rgba(240,185,11,.05); }
    100% { transform: scale(0.85); opacity: .55; box-shadow: 0 0 0 0 rgba(240,185,11,.0); }
  }
  
/* ===== KPI CARDS (HOME) ===== */
.kpi-grid-2026{
  max-width: 1180px;
  margin: 22px auto 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

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

.kpi-card-2026{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55);
  padding: 16px 16px 14px 16px;
  overflow: hidden;
}

.kpi-card-2026::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(40% 40% at 20% 20%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(40% 40% at 70% 30%, rgba(240,185,11,.14), transparent 60%);
  opacity: .9;
  filter: blur(18px);
  z-index: 0;
}

.kpi-top-2026{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(229,231,235,.85);
  font-weight: 700;
  font-size: 13px;
}

.kpi-value-2026{
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kpi-sub-2026{
  position: relative;
  z-index: 1;
  margin-top: 6px;
  color: rgba(148,163,184,.95);
  font-size: 12px;
}
/* Force all navbar dropdowns above page layers */
.navbar-2026{ z-index: 3000; }

.navbar-2026 .dropdown-menu{
  z-index: 3010 !important;
}
/* User menu dropdown = KPI glass */
.nav-right-2026 .dropdown-menu{
  background: rgba(12, 21, 44, .82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.02);

  padding: 10px;
  min-width: 220px;
}

.nav-right-2026 .dropdown-menu .dropdown-item{
  color: var(--text) !important;
  border-radius: 12px;
  padding: 10px 12px;
}

.nav-right-2026 .dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.08) !important;
}

.nav-right-2026 .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
/* ===== NAV DROPDOWNS (Notifications + User) — KPI GLASS ===== */
:root{
  --glass-bg: rgba(12, 21, 44, 0.82);  /* same vibe as KPI */
  --glass-border: rgba(255,255,255,.08);
  --glass-shadow: 0 20px 50px rgba(0,0,0,.45);
}
#navbarMain,
.navbar-collapse{
  overflow: visible !important;  /* ✅ allow Shepherd to breathe */
}


/* Notifications dropdown container */
.notif-dropdown-2026,
.notif-list-2026{
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;

  border-radius: 16px !important;
  overflow: hidden !important;

  min-width: 280px !important;      /* tighter */
  max-width: 340px !important;
  padding: 10px 10px !important;    /* tighter */
}

/* Username dropdown (Bootstrap dropdown-menu) */
.navbar-2026 .dropdown-menu{
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;

  border-radius: 16px !important;
  overflow: hidden !important;

  min-width: 240px !important;      /* tighter */
  padding: 10px !important;
}

/* Dropdown items */
.navbar-2026 .dropdown-menu .dropdown-item,
.notif-dropdown-2026 a,
.notif-list-2026 a{
  color: rgba(229,231,235,.90) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;    /* tighter */
  font-size: 14px !important;
}

.navbar-2026 .dropdown-menu .dropdown-item:hover,
.notif-dropdown-2026 a:hover,
.notif-list-2026 a:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Optional: make "No notifications" text match */
.notif-dropdown-2026,
.notif-list-2026{
  color: rgba(148,163,184,.95) !important;
}

/* Ensure dropdowns render above hero but below Shepherd */
.navbar-2026 .dropdown-menu,
.notif-dropdown-2026,
.notif-list-2026{
  z-index: 1500 !important;
}
/* =========================================================
   HOME: FAQ + IMPLEMENTATION PROCESS (2026 GLASS OVERRIDES)
   Put at VERY BOTTOM of theme-2026-v2.css (or your boss file)
   ========================================================= */

/* ---------- FAQ SECTION (Bootstrap accordion -> KPI Glass) ---------- */
.features-section.section-alt .accordion-item{
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  margin-bottom: 12px;
}

.features-section.section-alt .accordion-button{
  background: rgba(15,23,42,.40) !important;
  color: rgba(229,231,235,.92) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  border: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}

.features-section.section-alt .accordion-button:hover{
  background: rgba(240,185,11,.06) !important;
  color: rgba(229,231,235,.98) !important;
}

.features-section.section-alt .accordion-button:focus{
  box-shadow: 0 0 0 3px rgba(240,185,11,.18) !important;
  outline: none !important;
}

/* Remove Bootstrap "active blue" look */
.features-section.section-alt .accordion-button:not(.collapsed){
  background: rgba(15,23,42,.55) !important;
  color: rgba(229,231,235,.98) !important;
}

/* Body text */
.features-section.section-alt .accordion-body{
  background: rgba(15,23,42,.35) !important;
  color: rgba(148,163,184,.95) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 14px 18px 18px !important;
}

/* Accordion arrow icon */
.features-section.section-alt .accordion-button::after{
  filter: invert(1) opacity(.85);
}

/* ---------- IMPLEMENTATION PROCESS buttons (force consistent 2026 look) ---------- */

/* Make the container feel like it belongs to theme */
.how-section{
  background: transparent; /* keep your dark page background */
}

/* Primary CTA: Go to Dashboard / Start Free Trial */
.how-section .home-cta-btn{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 850 !important;

  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color: #0B0F1A !important;
  border: 0 !important;

  box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
}

.how-section .home-cta-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.45) !important;
}

/* Secondary CTA: Upgrade Plan / View All Plans -> KPI glass pill */
.how-section .home-cta-btn.secondary{
  background: rgba(15,23,42,.55) !important;
  color: rgba(229,231,235,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

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

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.how-section .home-cta-btn.secondary:hover{
  border-color: rgba(240,185,11,.35) !important;
  background: rgba(240,185,11,.06) !important;
  color: rgba(229,231,235,.98) !important;
}
/* ===== Reusable KPI-Glass Card (for all home sections) ===== */
.glass-card-2026{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55); /* KPI vibe */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

.glass-card-2026::before{
  content:"";
  position:absolute;
  inset:-50px;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(40% 40% at 70% 30%, rgba(240,185,11,.14), transparent 60%);
  opacity: .95;
  filter: blur(18px);
  z-index: 0;
}

.glass-card-2026 > *{
  position: relative;
  z-index: 1;
}

/* Keep your hover pop, but make it premium */
.glass-card-2026{
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.glass-card-2026:hover{
  transform: translateY(-3px);
  border-color: rgba(240,185,11,.25);
  background: rgba(15,23,42,.62);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Text readability on glass */
.glass-card-2026 p{
  color: rgba(148,163,184,.95);
}
/* ===== Implementation Process: make each step look like a real glass card ===== */
.implementation-process .glass-card-2026,
.how-step.glass-card-2026,
.implementation-steps .glass-card-2026{
  padding: 18px 18px;
  text-align: center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.implementation-process .glass-card-2026 img,
.how-step.glass-card-2026 img,
.implementation-steps .glass-card-2026 img{
  width: 34px;
  height: 34px;
  margin: 0 auto;
  opacity: .95;
}

.implementation-process .glass-card-2026 h4,
.how-step.glass-card-2026 h4,
.implementation-steps .glass-card-2026 h4{
  margin: 0;
  font-weight: 600;
}
/* ===== Unique Premium Badge for Bots Page ===== */
.premium-badge-bots{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.3px;
  border:1px solid rgba(240,185,11,.35);
  background:linear-gradient(135deg, rgba(240,185,11,.15), rgba(59,130,246,.12));
  box-shadow:0 0 18px rgba(240,185,11,.18);
}
/* ===== Bots Empty Glass Card ===== */
.bots-empty-state{
  max-width:650px;
  margin:2.5em auto;
  padding:35px 28px;
  text-align:center;
}
.bots-empty-state .empty-icon{
  font-size:40px;
  margin-bottom:10px;
  opacity:.85;
}
.bots-empty-state h4{
  margin-bottom:6px;
}
/* ===== Bots Grid Layout ===== */
.bots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  max-width:1100px;
  margin:2.5em auto;
}

.bot-card{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bot-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.premium-lock{
  font-size:12px;
  color:#f0b90b;
}

.bot-desc{
  font-size:.95em;
  opacity:.9;
}

.bot-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.8em;
  opacity:.75;
}

.bot-files{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.bot-actions{
  margin-top: 4px;
}
/* ===== Bots Page Messages ===== */
.bots-messages{
  list-style:none;
  max-width:650px;
  margin: 1.2em auto 2em auto;
  padding:0;
}
.bots-messages .alert{
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.22);
  color: rgba(226,232,240,.92);
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ===== Bots Page Links ===== */
.bot-link{
  text-decoration:none;
  color: inherit;
}
.bot-link:hover{
  text-decoration: underline;
}

.bot-title{
  margin:0;
}

.bot-plans{
  font-size:.82em;
  opacity:.8;
  margin-top:2px;
}

.bot-plan{
  opacity:.95;
}

.bot-muted{
  opacity:.7;
  font-size:.9em;
}
/* ===== EA Detail Premium Styling ===== */
.ea-premium-banner{
  margin: 14px auto 0 auto;
  max-width: 620px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ea-premium-icon{
  font-size: 18px;
  opacity: .95;
}

.ea-section{
  padding: 18px 18px;
}

.ea-tile{
  padding: 18px 18px;
}

.ea-tile-label{
  display:block;
  opacity:.75;
  margin-bottom:6px;
}

.ea-tile-value{
  font-weight:700;
  font-size: 1.1rem;
}

.ea-tile-sub{
  margin-top:6px;
  opacity:.8;
  font-size:.92em;
}

.ea-muted{
  opacity:.78;
}

.ea-h3{
  margin-bottom: 12px;
}

.ea-h5{
  font-size: 1rem;
  margin-bottom: 10px;
}

.ea-ul{
  padding-left: 1.1rem;
  margin: 0;
}
.ea-ul li{
  margin-bottom: 8px;
}

.ea-plan-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ea-plan-pill{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.35);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .85em;
  opacity: .95;
}

.ea-versions{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ea-version-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(2,6,23,.20);
}

.ea-version-title{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

@media (max-width: 576px){
  .bot-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .bot-files{
    flex-direction: column;
  }

  .bot-files a,
  .bot-actions a{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ea-request-btn-premium{
    width: 100%;
  }

  .ea-version-left,
  .ea-version-right{
    width: 100%;
  }

  .ea-version-right a{
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .ss-billing-toggle--glass{
    width: 100%;
    flex-wrap: wrap;
  }

  .ss-billing-toggle--glass .ss-billing-option{
    flex: 1 1 auto;
    text-align: center;
  }

  .ss-auth .display-5{
    font-size: 2rem;
  }

  .ss-auth .ss-panel__head{
    padding: 14px 14px;
  }

  .ss-auth .ss-panel__body{
    padding: 16px;
  }
}
/* ===== Premium EA Request Button ===== */
.ea-request-btn-premium{
  position: relative;
  border: 1px solid rgba(240,185,11,.25) !important;
  background: rgba(15,23,42,.55) !important;
  color: rgba(226,232,240,.95) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ea-request-btn-premium::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(240,185,11,.22), transparent 60%),
    radial-gradient(40% 40% at 70% 40%, rgba(59,130,246,.18), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  z-index: 0;
}

.ea-request-btn-premium > *{
  position: relative;
  z-index: 1;
}

.ea-request-btn-premium:hover{
  transform: translateY(-2px);
  border-color: rgba(240,185,11,.38) !important;
  background: rgba(15,23,42,.62) !important;
  box-shadow:
    0 22px 55px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.ea-request-btn-premium:active{
  transform: translateY(0px);
}
/* ===================== PLANS PAGE (Premium 2026) ===================== */

/* Hero */
.plans-hero{
  padding: 46px 26px;
  max-width: 980px;
  margin: 0 auto;
  color: rgba(226,232,240,.95);
}
.plans-hero .section-divider{
  opacity: .7;
}
.plans-trial-badge{
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plans-hero .lead{
  color: rgba(148,163,184,.95) !important;
}

/* Toggle card */
.plans-toggle-card{
  padding: 12px 14px;
  max-width: 640px;
  margin: 0 auto;
}

/* Plan card base */
.plan-card{
  padding: 0;
}
.plan-card-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.plan-card .card-body{
  padding: 20px 20px;
}
.plan-card .text-muted{
  color: rgba(148,163,184,.92) !important;
}

/* Plan tier accents */
.plan-basic .plan-card-header{
  background: rgba(15,23,42,.20);
}
.plan-pro .plan-card-header{
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(240,185,11,.12));
}
.plan-premium .plan-card-header{
  background: linear-gradient(135deg, rgba(2,6,23,.25), rgba(240,185,11,.10));
}

/* Hover polish */
.hover-shadow:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 55px rgba(0,0,0,.40) !important;
}

/* “Most Popular” badge positioning polish */
.plan-card .badge{
  border: 1px solid rgba(255,255,255,.14);
}

/* Plan status glass */
.plan-status-glass{
  padding: 14px 14px;
  text-align: center;
}
.plan-status-glass h5, .plan-status-glass h6{
  margin-bottom: 4px;
}

/* Comparison section */
.plans-section-card{
  padding: 0;
}
.plans-section-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.plans-section-header h3{
  margin: 0;
}

/* Make tables match dark theme */
.plans-section-card table{
  color: rgba(226,232,240,.95);
}
.plans-section-card .table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.plans-section-card thead th{
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(226,232,240,.95);
}
.plans-section-card tbody td{
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(148,163,184,.95);
}

/* FAQ glass */
.faq-glass .accordion-button{
  background: transparent !important;
  color: rgba(226,232,240,.95) !important;
  border: none;
  box-shadow: none !important;
}
.faq-glass .accordion-button.collapsed{
  color: rgba(226,232,240,.92) !important;
}
.faq-glass .accordion-body{
  color: rgba(148,163,184,.95);
}
.faq-glass .accordion-collapse{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* List */
.faq-glass .list-group-item{
  background: transparent !important;
  color: rgba(226,232,240,.92);
}

/* Testimonials */
.testimonial-glass{
  padding: 18px 18px;
}
.testimonial-glass .card-text{
  color: rgba(148,163,184,.95);
}

/* CTA */
.plans-cta{
  padding: 44px 26px;
  text-align: center;
}
.plans-cta .lead{
  color: rgba(148,163,184,.95) !important;
}

/* Pulse button – keep your behavior but match theme */
.pulse-button{
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
@keyframes pulse{
  0% { box-shadow: 0 0 0 0 rgba(240,185,11, 0.22); }
  70% { box-shadow: 0 0 0 10px rgba(240,185,11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240,185,11, 0); }
}
/* ===================== Bootstrap Button Normalization (Scoped to Plans) ===================== */
.ss-plans .btn{
  border-radius: 14px;
  padding: .78rem 1.15rem;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.50);
  color: rgba(226,232,240,.95);
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ss-plans .btn:hover{
  transform: translateY(-2px);
  border-color: rgba(240,185,11,.28);
  background: rgba(15,23,42,.62);
  box-shadow:
    0 22px 55px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.ss-plans .btn:active{
  transform: translateY(0px);
}

.ss-plans .btn:focus{
  box-shadow:
    0 22px 55px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px rgba(240,185,11,.16) !important;
}

/* Bigger buttons still look premium */
.ss-plans .btn.btn-lg{
  padding: .9rem 1.25rem;
  border-radius: 16px;
}

/* ===================== Variant Mapping ===================== */

/* GOLD Primary (btn-warning, btn-primary) */
.ss-plans .btn.btn-warning,
.ss-plans .btn.btn-primary{
  border-color: rgba(240,185,11,.35);
  background: linear-gradient(135deg, rgba(240,185,11,.22), rgba(59,130,246,.12));
  color: rgba(226,232,240,.98);
}
.ss-plans .btn.btn-warning:hover,
.ss-plans .btn.btn-primary:hover{
  border-color: rgba(240,185,11,.48);
}

/* Dark Premium (btn-dark) */
.ss-plans .btn.btn-dark{
  border-color: rgba(255,255,255,.12);
  background: rgba(2,6,23,.60);
  color: rgba(226,232,240,.95);
}
.ss-plans .btn.btn-dark:hover{
  border-color: rgba(240,185,11,.22);
}

/* Success (btn-success) */
.ss-plans .btn.btn-success{
  border-color: rgba(16,185,129,.30);
  background: rgba(16,185,129,.12);
  color: rgba(226,232,240,.95);
}

/* Light (btn-light) - still dark-theme friendly */
.ss-plans .btn.btn-light{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(226,232,240,.95);
}

/* Outlines */
.ss-plans .btn.btn-outline-light,
.ss-plans .btn.btn-outline-secondary,
.ss-plans .btn.btn-outline-primary,
.ss-plans .btn.btn-outline-danger{
  background: rgba(15,23,42,.40);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(226,232,240,.92);
}

.ss-plans .btn.btn-outline-danger{
  border-color: rgba(239,68,68,.28);
}
.ss-plans .btn.btn-outline-danger:hover{
  border-color: rgba(239,68,68,.40);
}

/* Disable state */
.ss-plans .btn:disabled,
.ss-plans .btn.disabled{
  opacity: .55;
  transform: none !important;
  cursor: not-allowed;
}

/* Make icons align nicely */
.ss-plans .btn i{
  opacity: .95;
}
/* ===================== HOME FAQ (match Plans FAQ) ===================== */
.home-faq .accordion-item.glass-card-2026{
  padding: 0;                 /* keep accordion tight */
  overflow: hidden;           /* rounded corners clean */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55);
}

/* Header button */
.home-faq .accordion-button{
  background: transparent !important;
  color: rgba(226,232,240,.95) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 18px;
  font-weight: 600;
}

/* When collapsed */
.home-faq .accordion-button.collapsed{
  color: rgba(226,232,240,.92) !important;
}

/* Body */
.home-faq .accordion-body{
  color: rgba(148,163,184,.95);
  padding: 16px 18px 18px 18px;
}

/* Divider line between header and body */
.home-faq .accordion-collapse{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Nice spacing between items */
.home-faq .accordion-item + .accordion-item{
  margin-top: 14px;
}

/* Keep the caret subtle on dark */
.home-faq .accordion-button::after{
  opacity: .9;
  filter: brightness(1.6);
}
/* ===== Plans: fix JS-injected info alert (make it glass) ===== */
.ss-plans .alert.alert-info{
  background: rgba(15,23,42,.55) !important;
  color: rgba(226,232,240,.95) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.ss-plans .alert.alert-info a{
  color: rgba(240,185,11,.92) !important;
  text-decoration: none;
}
.ss-plans .alert.alert-info a:hover{
  text-decoration: underline;
}
/* ===== Plans: kill bg-light white strip inside comparison table ===== */
.ss-plans .plans-section-card .bg-light{
  background: transparent !important;
  color: rgba(148,163,184,.95) !important;
}

/* Make the table fully dark-glass */
.ss-plans .plans-section-card .table{
  background: transparent !important;
}
/* Optional: subtle Pro column highlight without turning white */
.ss-plans .plans-section-card td.bg-light,
.ss-plans .plans-section-card th.bg-light{
  background: rgba(240,185,11,.06) !important;
}
/* ===== Plans: Premium Glass Toggle (Monthly/Annual) ===== */
.ss-plans .form-switch{
  display:flex;
  align-items:center;
  gap: 12px;
}

.ss-plans .form-switch .form-check-input{
  width: 56px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  background-color: rgba(15,23,42,.55) !important;
  background-image: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 35px rgba(0,0,0,.35);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* The knob */
.ss-plans .form-switch .form-check-input::before{
  content:"";
  position: relative;
  display:block;

  width: 22px;
  height: 22px;
  margin: 2px;

  border-radius: 999px;
  background: rgba(226,232,240,.92);
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.40);
  transform: translateX(0);
  transition: transform .18s ease, background .18s ease;
}

/* Checked state = premium gold glow */
.ss-plans .form-switch .form-check-input:checked{
  border-color: rgba(240,185,11,.35) !important;
  background-color: rgba(240,185,11,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 45px rgba(0,0,0,.40),
    0 0 0 3px rgba(240,185,11,.10);
}

/* Move knob right when checked */
.ss-plans .form-switch .form-check-input:checked::before{
  transform: translateX(28px);
  background: rgba(240,185,11,.95);
}

/* Focus ring */
.ss-plans .form-switch .form-check-input:focus{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 45px rgba(0,0,0,.40),
    0 0 0 3px rgba(59,130,246,.14) !important;
}
/* ===== HERO MAIN CTA (Homepage Browse Bots) ===== */
.hero-main-cta{
  position: relative;
  border-radius: 14px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 1.05rem;

  background: linear-gradient(135deg, rgba(240,185,11,.92), rgba(251,191,36,.85));
  color: #0b1220 !important;

  border: 1px solid rgba(240,185,11,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(240,185,11,.20),
    0 0 35px rgba(240,185,11,.25);

  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover = stronger glow */
.hero-main-cta:hover{
  transform: translateY(-3px);
  box-shadow:
    0 25px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(240,185,11,.35),
    0 0 50px rgba(240,185,11,.35);
}

/* Subtle pulse to indicate primary action */
.hero-main-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow: 0 0 0 0 rgba(240,185,11,.5);
  animation: heroPulse 3s infinite;
  z-index: -1;
}

@keyframes heroPulse{
  0% { box-shadow: 0 0 0 0 rgba(240,185,11,.45); }
  70% { box-shadow: 0 0 0 25px rgba(240,185,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,185,11,0); }
}
/* ===== HERO CTA ROW LAYOUT ===== */
.hero-ctas-2026{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Normalize size for ALL hero buttons */
.hero-ctas-2026 a{
  min-height: 54px;
  padding: 14px 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 14px;
  line-height: 1;
}

/* ===== MAIN HERO BUTTON (Browse Bots) ===== */
.hero-main-cta{
  min-width: 210px;
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  color: #0b1220 !important;
  background: linear-gradient(135deg, rgba(240,185,11,.92), rgba(251,191,36,.85)) !important;
  border: 1px solid rgba(240,185,11,.35) !important;
}

/* Ensure pulse/glow never hides content */
.hero-main-cta,
.hero-main-cta *{
  position: relative;
  z-index: 3;
}

/* Pulse effect layer behind */
.hero-main-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow: 0 0 0 0 rgba(240,185,11,.5);
  animation: heroPulse 3s infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes heroPulse{
  0% { box-shadow: 0 0 0 0 rgba(240,185,11,.45); }
  70% { box-shadow: 0 0 0 25px rgba(240,185,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,185,11,0); }
}

/* ===== Secondary button alignment fix ===== */
.hero-ctas-2026 .btn-2026,
.hero-ctas-2026 .btn-secondary-2026{
  min-width: 210px;
}

/* Keep Upgrade Plan subtle compared to main CTA */
.hero-ctas-2026 .btn-secondary-2026{
  box-shadow: none !important;
}
/* ===== Bumble Bee Bot Wiggle (Hero Browse Bots icon) ===== */
.bot-wiggle{
  display:inline-block;
  transform-origin: 50% 60%;
  transition: transform .2s ease;
}

/* Idle micro-movement */
.hero-main-cta:hover .bot-wiggle{
  animation: botWiggle .8s ease-in-out;
}

@keyframes botWiggle{
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-10deg); }
  40%  { transform: rotate(8deg); }
  60%  { transform: rotate(-6deg); }
  80%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
/* ===== Fix Hero CTA Vertical Alignment ===== */
.hero-ctas-2026{
  display:flex;
  justify-content:center;
  align-items:center;   /* force same vertical center */
  gap: 14px;
}

/* Ensure all hero buttons share same layout model */
.hero-ctas-2026 a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  vertical-align: middle;
}

/* Robot icon shouldn't affect baseline */
.bot-wiggle{
  vertical-align: middle;
}

/* Secondary button (Upgrade Plan) exact same box model */
.hero-ctas-2026 .btn-secondary-2026{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* ===== HARD ALIGN FIX: make BOTH hero CTAs identical height ===== */
.hero-ctas-2026{
  display:flex;
  justify-content:center;
  align-items:stretch;     /* important: same height */
  gap: 14px;
}

/* target ONLY the direct buttons inside the row */
.hero-ctas-2026 > a{
  height: 54px;            /* lock */
  min-height: 54px;
  padding: 0 28px !important;  /* remove class differences */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  line-height: 1 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Make icons not add extra baseline spacing */
.hero-ctas-2026 > a i{
  display:inline-block;
  line-height: 1 !important;
}

/* Your wiggle icon stays clean */
.bot-wiggle{ transform-origin: 50% 60%; }
/* ===========================
   My Plan Selections (Premium)
   =========================== */
.myplans-2026 .muted{ color: rgba(255,255,255,.68); }
.myplans-2026 .strong{ font-weight: 700; color: rgba(255,255,255,.92); }
.myplans-2026 .warning{ color: rgba(245, 200, 90, .95); }

.myplans-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 22px 22px;
}
.myplans-title{
  margin:0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: .2px;
}
.myplans-subtitle{ margin: 6px 0 0 0; }

.myplans-top-btn{
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Card grid */
.plan-selection-card{ padding:0; overflow:hidden; }
.plan-selection-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.plan-selection-head__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.plan-selection-head h6{ color: rgba(255,255,255,.92); font-weight: 800; }

.plan-selection-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.85);
}

/* Status accents (subtle, premium) */
.plan-selection-head.status-approved{ box-shadow: inset 0 0 0 1px rgba(0, 255, 180, .14); }
.plan-selection-head.status-pending{  box-shadow: inset 0 0 0 1px rgba(255, 210, 70, .16); }
.plan-selection-head.status-rejected{ box-shadow: inset 0 0 0 1px rgba(255, 90, 120, .16); }
.plan-selection-head.status-completed{box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .16); }
.plan-selection-head.status-cancelled{box-shadow: inset 0 0 0 1px rgba(200, 200, 200, .12); }

.plan-selection-body{ padding: 16px; }
.plan-selection-body .text-sm{ color: rgba(255,255,255,.78); }

.plan-selection-footer{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

/* Notes (replace bootstrap alerts) */
.plan-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.82);
}
.plan-note i{ margin-top: 2px; opacity: .95; }
.note-success{ border-color: rgba(0,255,180,.18); }
.note-warn{    border-color: rgba(255,210,70,.18); }
.note-danger{  border-color: rgba(255,90,120,.18); }
.note-info{    border-color: rgba(120,160,255,.18); }

/* Chips (premium badges) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}
.chip-success{ border-color: rgba(0,255,180,.18); }
.chip-warn{    border-color: rgba(255,210,70,.18); }
.chip-danger{  border-color: rgba(255,90,120,.18); }
.chip-info{    border-color: rgba(120,160,255,.18); }
.chip-muted{   border-color: rgba(200,200,200,.14); }

/* Empty state */
.myplans-empty{ padding: 42px 22px; }
.myplans-empty__icon{
  width: 68px; height: 68px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: 28px;
}

/* Help section */
.myplans-help{ padding: 18px 18px; }
.myplans-help__head{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.myplans-checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin: 10px 0;
  color: rgba(255,255,255,.78);
}
.myplans-checklist i{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(0,255,180,.85);
}

/* Button sizing safety: make all myplans buttons align */
.myplans-2026 .btn-2026{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.myplans-2026 .btn-sm-2026{
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 14px;
}
/* ===========================
   Support Ticket — Premium 2026 (scoped)
   =========================== */

.support-2026 .premium-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 16, 28, .72);
  backdrop-filter: blur(14px);
}

.support-2026 .premium-card-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(12, 22, 45, .9), rgba(12, 18, 30, .5));
  padding: 16px 18px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.support-2026 .premium-card-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 14px 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.support-2026 .premium-surface{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

/* Conversation bubbles */
.support-2026 .message-content{
  line-height: 1.6;
}

/* Badges (keep your status_color logic but make them premium) */
.support-2026 .badge{
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

/* Category chips/cards */
.support-2026 .premium-chip{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.support-2026 .premium-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  border-color: rgba(255,215,90,.22);
}

.support-2026 .category-card.border-primary{
  border-color: rgba(255,215,90,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,215,90,.10);
}

/* Inputs */
.support-2026 .form-control,
.support-2026 .form-select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
}

.support-2026 .form-control:focus,
.support-2026 .form-select:focus{
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.35);
}

.support-2026 .input-group-text{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  border-radius: 14px;
}

/* Alerts -> premium dark */
.support-2026 .alert{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.90) !important;
}

/* Accordion */
.support-2026 .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

.support-2026 .accordion-button{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  border: none;
}

.support-2026 .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.95);
  box-shadow: none;
}

.support-2026 .accordion-body{
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.86);
}

/* Modal premium */
.support-2026 .modal-content{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10, 16, 28, .92);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92);
}

.support-2026 .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.support-2026 .modal-footer{
  border-top: 1px solid rgba(255,255,255,.10);
}
.support-2026 .btn{
  border-radius: 14px;
  padding: .65rem 1.15rem;
  font-weight: 600;
}

.support-2026 .btn-primary{
  background: linear-gradient(135deg, rgba(255,215,90,.95), rgba(255,185,60,.92));
  border: 1px solid rgba(255,215,90,.45);
  color: #0b1220;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.support-2026 .btn-primary:hover{
  transform: translateY(-1px);
}

.support-2026 .btn-outline-secondary,
.support-2026 .btn-outline-danger,
.support-2026 .btn-outline-primary{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
/* =========================
   Support Ticket - Premium Upload
   ========================= */
.ss-upload { width: 100%; }

.ss-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ss-upload__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:14px 14px;
  border-radius:16px;

  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 35px rgba(0,0,0,0.25);

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

.ss-upload__label:hover{
  transform: translateY(-1px);
  border-color: rgba(255,200,60,0.35);
  background: rgba(255,255,255,0.055);
}

.ss-upload__icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,200,60,0.10);
  border:1px solid rgba(255,200,60,0.25);
  color:#ffd27a;
  flex: 0 0 auto;
}

.ss-upload__text{
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
  flex: 1 1 auto;
}

.ss-upload__text small{
  color: rgba(255,255,255,0.55);
  margin-top:4px;
}

.ss-upload__cta{
  padding:10px 14px;
  border-radius:14px;
  font-weight:600;

  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  flex: 0 0 auto;
}

.ss-upload__list{
  margin-top:10px;
  color: rgba(255,255,255,0.70);
  font-size: 0.92rem;
}

.ss-upload__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  margin:6px 8px 0 0;

  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
}

.ss-upload__chip i{
  color: rgba(255,200,60,0.85);
}

/* =========================
   Premium Submit Button helper
   ========================= */
.ss-btn-premium{
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.ss-btn-premium__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  margin-right: 10px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.ss-btn-premium__text{
  font-weight: 700;
  letter-spacing: .2px;
}
/* =========================
   Dashboard premium panels
   ========================= */
.ss-panel{
  border-radius: 22px;
  overflow: hidden;
}

.ss-panel__head{
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.ss-panel__body{
  padding: 22px;
}

/* =========================
   Premium callouts (alerts)
   ========================= */
.ss-glass-callout{
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10, 18, 35, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.ss-glass-callout--success{
  border-color: rgba(0, 255, 170, .18);
  box-shadow: 0 18px 55px rgba(0, 255, 170, .08), 0 14px 40px rgba(0,0,0,.28);
}

.ss-glass-callout .badge{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0, 255, 170, .12) !important;
  color: rgba(230,255,248,.95);
}

.ss-glass-callout a{
  text-decoration: none;
}
/* ===== Dashboard: Share panel ===== */
.ss-share {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-muted {
  color: rgba(255,255,255,.72) !important;
}

.ss-share__ok{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: rgba(255,255,255,.92);
  width: fit-content;
}
/* ===== Dashboard: mini cards inside premium panels ===== */
.ss-mini-card{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.ss-mini-card__body{
  padding: 16px;
  color: rgba(255,255,255,.85);
}

.ss-mini-card .text-muted{
  color: rgba(255,255,255,.65) !important;
}
/* ===== Dashboard action cards ===== */
.ss-action-card{
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-action-card__icon{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ss-action-card__icon i{
  font-size: 28px;
  color: rgba(255,255,255,.92);
}

.ss-action-card__title{
  margin: 6px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.ss-action-card__desc{
  margin: 0;
  color: rgba(148,163,184,.92);
  line-height: 1.45;
}

.ss-action-card__btn{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
/* ===== Onboarding modal ===== */
.ss-onboard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}

.ss-onboard__head{
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(240,185,11,.12));
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
}

#onboarding-modal .list-group-item{
  background: transparent !important;
  color: rgba(255,255,255,.88);
}
#onboarding-modal .text-muted{
  color: rgba(148,163,184,.85) !important;
}
/* ===== Dashboard panel body helper ===== */
.ss-panel .ss-panel__body{
  padding: 18px 18px 16px;
}
.ss-panel .ss-panel__head{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

/* ===== KPI tiles ===== */
.ss-kpi{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
}
.ss-kpi__label{
  font-size: .85rem;
  color: rgba(148,163,184,.92);
  margin-bottom: 6px;
}
.ss-kpi__value{
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1.1;
  color: rgba(255,255,255,.95);
}

/* ===== Chart container ===== */
.ss-chart{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 14px;
  height: 320px;
}
.ss-chart canvas{
  width: 100% !important;
  height: 100% !important;
}

/* ===== Premium dropdown menu ===== */
.ss-dd__menu{
  background: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  border-radius: 14px !important;
  padding: 8px !important;
}
.ss-dd__item{
  border-radius: 10px !important;
  color: rgba(226,232,240,.92) !important;
}
.ss-dd__item:hover{
  background: rgba(255,255,255,.06) !important;
}
.ss-dd__item.active{
  background: rgba(59,130,246,.18) !important;
  color: rgba(255,255,255,.95) !important;
}
/* ===== Referral: premium input group ===== */
.ss-input-group{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ss-input{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.20) !important;
  color: rgba(255,255,255,.92) !important;
}
.ss-input:focus{
  box-shadow: 0 0 0 4px rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
}
.ss-input__btn{
  border-radius: 14px !important;
  white-space: nowrap;
}

/* ===== Share buttons grid ===== */
.ss-share-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 992px){
  .ss-share-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ss-share{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
}

/* ===== Stats tile ===== */
.ss-stat{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ss-stat__icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.22);
  color: rgba(255,255,255,.92);
}
.ss-stat__label{
  font-size: .85rem;
  color: rgba(148,163,184,.92);
}
.ss-stat__value{
  font-size: 1.6rem;
  font-weight: 850;
  line-height: 1.1;
  color: rgba(255,255,255,.95);
}

/* ===== Premium table style ===== */
.ss-table{
  border-collapse: separate;
  border-spacing: 0 10px;
  margin: 0;
}
.ss-table thead th{
  color: rgba(148,163,184,.92);
  font-weight: 700;
  border: none !important;
}
.ss-table tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}
.ss-table tbody td{
  border: none !important;
  padding: 12px 14px;
  color: rgba(226,232,240,.92);
}
.ss-table tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.ss-table tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Make badges look less “bootstrap default” on glass */
.ss-badge{
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* ===== XP + Badges (premium) ===== */
.ss-xp{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ss-xp__top{
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.ss-xp__level{
  min-width: 120px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}

.ss-xp__label{
  font-size: .8rem;
  color: rgba(148,163,184,.9);
}
.ss-xp__value{
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  line-height: 1.0;
  margin-top: 6px;
}

.ss-xp__meta{
  flex: 1;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.ss-xp__line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(226,232,240,.92);
  font-size: .95rem;
  margin-bottom: 10px;
}
.ss-xp__streak{
  color: rgba(251,191,36,.95);
  font-weight: 700;
  white-space: nowrap;
}

.ss-xp__bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ss-xp__barFill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(251,191,36,.95));
  box-shadow: 0 10px 30px rgba(59,130,246,.18);
}

.ss-xp__badges{
  padding-top: 4px;
}

.ss-xp__title{
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.92);
}

.ss-badgeGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 992px){
  .ss-badgeGrid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.ss-badge{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.ss-badge__icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.22);
  color: rgba(255,255,255,.92);
  flex-shrink: 0;
}

.ss-badge__name{
  font-weight: 850;
  color: rgba(255,255,255,.92);
  line-height: 1.1;
}
.ss-badge__desc{
  margin-top: 4px;
  font-size: .85rem;
  color: rgba(148,163,184,.92);
}

.ss-muted{
  color: rgba(148,163,184,.92);
}
/* ===== Share & Earn (premium) ===== */
.ss-share{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-share .ss-btn-premium{
  width: fit-content;
  margin-top: 6px;
}

.ss-share__ok{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.12);
  color: rgba(226,232,240,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ss-xp__barFill{
  width: var(--xp, 0%);
  transition: width .6s ease;
}
/* Badge-like premium tone for ghost buttons (color only) */
.ss-badge-tone{
  border-color: rgba(245, 158, 11, .55) !important;
  color: rgba(255, 255, 255, .92) !important;
  background: rgba(245, 158, 11, .10) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .10) inset;
}

.ss-badge-tone:hover{
  background: rgba(245, 158, 11, .16) !important;
  border-color: rgba(245, 158, 11, .75) !important;
  transform: translateY(-1px);
}
/* ===== Premium Persona Toggle ===== */
.persona-toggle{
  display:inline-flex;
  gap:10px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Base button look */
.persona-toggle button{
  border:none;
  border-radius:999px;
  padding:8px 18px;
  font-weight:600;
  font-size:0.95rem;
  color:rgba(255,255,255,0.75);
  background:transparent;
  transition:all .25s ease;
  position:relative;
}

/* Hover glow */
.persona-toggle button:hover{
  color:white;
  background:rgba(245,158,11,0.08);
}

/* ACTIVE = premium gold glass */
.persona-toggle button.active{
  color:#fff;
  background:linear-gradient(
    135deg,
    rgba(245,158,11,0.55),
    rgba(234,88,12,0.55)
  );
  box-shadow:
    0 4px 14px rgba(245,158,11,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* soft shine effect */
.persona-toggle button.active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
  mix-blend-mode:overlay;
  pointer-events:none;
}
/* ===== Premium CTA for home section links ===== */
.dashboard-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 18px;
  min-height:44px;

  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;

  color:#eaf2ff;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.dashboard-btn:hover{
  transform: translateY(-2px);
  background:rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.35);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}

.dashboard-btn:active{
  transform: translateY(0px);
}

.dashboard-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.28), 0 14px 34px rgba(0,0,0,0.45);
}

/* PRIMARY variant you already use */
.dashboard-btn.primary{
  color:#0b1220;
  background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(234,88,12,0.95));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(245,158,11,0.20), 0 10px 26px rgba(0,0,0,0.35);
}

.dashboard-btn.primary:hover{
  background: linear-gradient(135deg, rgba(255,186,46,0.98), rgba(245,99,12,0.98));
  box-shadow: 0 18px 40px rgba(245,158,11,0.25), 0 14px 34px rgba(0,0,0,0.45);
}

/* Input group prefix/suffix should match dark glass forms */
.input-group-text{
  background: rgba(30,41,59,.65) !important;
  border: 1px solid rgba(71,85,105,.45) !important;
  color: rgba(229,231,235,.88) !important;
}
.ss-toast-stack{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.ss-toast{
  pointer-events: auto;
  width: min(420px, calc(100vw - 36px));
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
}

.ss-toast__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ss-toast__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: .95rem;
  margin: 0;
}

.ss-toast__close{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.75);
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.ss-toast__close:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}

.ss-toast__body{
  padding: 10px 12px 12px;
  color: rgba(255,255,255,.82);
}

.ss-toast--success{ border-color: rgba(34,197,94,.25); }
.ss-toast--success .ss-toast__title i{ color: rgb(34,197,94); }

.ss-toast--danger{ border-color: rgba(239,68,68,.25); }
.ss-toast--danger .ss-toast__title i{ color: rgb(239,68,68); }

.ss-toast--info{ border-color: rgba(59,130,246,.25); }
.ss-toast--info .ss-toast__title i{ color: rgb(59,130,246); }
/* ===== Fix: Support ticket button text fade on hover ===== */
.ss-action__btn{
  opacity: 1 !important;     /* prevent any inherited opacity tricks */
  filter: none !important;
  color: #0b0f17 !important; /* dark text on yellow */
  font-weight: 800;
  letter-spacing: .2px;
}

.ss-action__btn:hover,
.ss-action__btn:focus{
  opacity: 1 !important;     /* keep text strong */
  color: #0b0f17 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* If your btn system sets icon separately, keep it aligned */
.ss-action__btn i{
  opacity: 1 !important;
}
/* =========================
   Trading Analytics Premium
   (theme-2026-v2.css)
========================= */

.ss-analytics .ss-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.ss-analytics .ss-subtitle{
  color: rgba(255,255,255,.65);
  font-size: .95rem;
}

/* Reusable panel */
.ss-panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow: hidden;
}
.ss-panel__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ss-panel__title{
  font-weight: 800;
  color: rgba(255,255,255,.92);
}
.ss-panel__body{
  padding: 14px 16px 16px;
}

/* Stat cards */
.ss-stat-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  padding: 16px;
  height: 100%;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ss-stat-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
}

.ss-stat-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ss-stat-card__label{
  color: rgba(255,255,255,.65);
  font-weight: 700;
  font-size: .9rem;
}
.ss-stat-card__value{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

/* Pills */
.ss-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.ss-pill--success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); }
.ss-pill--info{ border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }
.ss-pill--neutral{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

/* Profit colors keep your existing classes but make them pop */
.profit-positive{ color: rgb(34,197,94) !important; }
.profit-negative{ color: rgb(239,68,68) !important; }

/* Premium table */
.ss-table{
  color: rgba(255,255,255,.86);
}
.ss-table thead th{
  color: rgba(255,255,255,.70);
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}
.ss-table tbody td{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.ss-table tbody tr:hover{
  background: rgba(255,255,255,.04);
}

/* Fix bootstrap striped tables inside glass */
.table-striped > tbody > tr:nth-of-type(odd){
  --bs-table-accent-bg: rgba(255,255,255,.03);
}

/* Chart canvas looks more “embedded” */
.ss-panel canvas{
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.08);
}
/* Charts: consistent height inside glass panels */
.ss-chart-wrap{
  position: relative;
  height: 260px; /* feel free to tweak */
}
.ss-chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
}
/* Premium chart entrance */
.ss-chart-wrap canvas{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.ss-chart-wrap canvas.ss-chart--ready{
  opacity: 1;
  transform: translateY(0);
}
/* Mini KPI badges in panel headers */
.ss-panel__head--kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.ss-kpis{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.ss-kpi{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.ss-kpi__label{
  color: rgba(255,255,255,.62);
  font-weight: 800;
}

.ss-kpi--good{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); }
.ss-kpi--bad{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.10); }
.ss-kpi--info{ border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }
.ss-kpi--neutral{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.ss-kpi--gold{ border-color: rgba(234,179,8,.25); background: rgba(234,179,8,.10); }

/* Timeframe switch */
.ss-range{
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ss-range__btn{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  font-size: .85rem;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ss-range__btn:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  transform: translateY(-1px);
}

.ss-range__btn.is-active{
  background: rgba(96,165,250,.18);
  border: 1px solid rgba(96,165,250,.25);
  color: rgba(255,255,255,.92);
}
/* =========================
   Premium Empty State
========================= */

.ss-empty-state{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 60px 20px;
}

.ss-empty-state__card{
  max-width: 520px;
  text-align:center;
  border-radius: 22px;
  padding: 32px 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.ss-empty-state__icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
  color: rgba(255,255,255,.85);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(96,165,250,.35),
    rgba(96,165,250,.08) 60%
  );
  border: 1px solid rgba(96,165,250,.35);
}

.ss-empty-state__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}

.ss-empty-state__text{
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  margin-bottom: 22px;
}

.ss-empty-state__actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}
/* =========================
   Trade History Premium
========================= */

.ss-trades .ss-label{
  color: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: .85rem;
  margin-bottom: 6px;
}

.ss-select{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
  padding: 10px 12px;
}

.ss-select:focus{
  outline: none !important;
  border-color: rgba(96,165,250,.35) !important;
  box-shadow: 0 0 0 .2rem rgba(96,165,250,.12) !important;
}

.ss-select option{
  color: #0b0f17; /* dropdown list (browser native) */
}

.ss-filter-btn{
  border-radius: 14px;
  font-weight: 900;
}

/* Small pill tag for type/strategy */
.ss-tag{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: .82rem;
  font-weight: 800;
}

/* Monospace for numbers/times */
.ss-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
}

/* Inline empty state */
.ss-empty-inline{
  padding: 42px 18px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.ss-empty-inline__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.22);
  color: rgba(255,255,255,.88);
  font-size: 22px;
}
.ss-empty-inline__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}
.ss-empty-inline__text{
  color: rgba(255,255,255,.65);
  font-size: .95rem;
}
.profit-positive{ color: rgb(34,197,94) !important; }
.profit-negative{ color: rgb(239,68,68) !important; }
/* =========================
   Learning Center Premium
========================= */

.ss-hero{
  padding: 64px 0 26px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.ss-hero--learning{
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(96,165,250,.35), transparent 60%),
    radial-gradient(700px 420px at 85% 30%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.90), rgba(2,6,23,.75));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-hero__kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}
.ss-hero__kicker-text{
  color: rgba(255,255,255,.65);
  font-weight: 800;
}
.ss-hero__title{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 950;
  color: rgba(255,255,255,.95);
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.ss-hero__lead{
  color: rgba(255,255,255,.74);
  font-size: 1.05rem;
  max-width: 54ch;
  margin-bottom: 18px;
}
.ss-hero__art{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

/* Resource cards */
.ss-resource-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-resource-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 62px rgba(0,0,0,.40);
}
.ss-resource-card__body{ padding: 16px; }
.ss-resource-card__title{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  margin: 6px 0 8px;
}
.ss-resource-card__text{
  color: rgba(255,255,255,.65);
  margin: 0;
}
.ss-resource-card__foot{
  padding: 0 16px 16px;
}

/* Corner badge */
.ss-corner-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}
.ss-corner-badge--premium{
  border-color: rgba(234,179,8,.28);
  background: rgba(234,179,8,.12);
}

/* Resource icon */
.ss-resource-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  flex: 0 0 auto;
}
.ss-resource-icon i{ font-size: 18px; }

.ss-resource-icon--primary{ border-color: rgba(96,165,250,.25); background: rgba(96,165,250,.12); }
.ss-resource-icon--success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.12); }
.ss-resource-icon--gold{ border-color: rgba(234,179,8,.25); background: rgba(234,179,8,.12); }
.ss-resource-icon--danger{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); }
.ss-resource-icon--info{ border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.12); }

/* Progress mini */
.ss-progress-mini{
  min-width: 84px;
  text-align: right;
}
.ss-progress-mini__bar{
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.ss-progress-mini__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(34,197,94,.75);
  transition: width .6s ease;
}
.ss-progress-mini__text{
  margin-top: 6px;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  font-weight: 900;
}

/* Category cards */
.ss-category-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  padding: 18px;
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-category-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 62px rgba(0,0,0,.40);
}
.ss-category-card__icon{
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(96,165,250,.25);
  background: rgba(96,165,250,.12);
  color: rgba(255,255,255,.92);
  font-size: 26px;
}
.ss-category-card__title{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  margin-bottom: 8px;
}
.ss-category-card__text{
  color: rgba(255,255,255,.65);
  margin-bottom: 14px;
}

/* Accent panel variant (upsell) */
.ss-panel--accent{
  background:
    radial-gradient(650px 420px at 20% 30%, rgba(234,179,8,.22), transparent 60%),
    radial-gradient(650px 420px at 80% 30%, rgba(96,165,250,.20), transparent 60%),
    rgba(15,23,42,.65);
}
/* =========================
   Pricing Premium
========================= */

.ss-hero--pricing{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(800px 520px at 85% 30%, rgba(96,165,250,.22), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.90), rgba(2,6,23,.72));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ss-section{ padding: 22px 0; }

.ss-billing-toggle{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ss-billing-option{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: all .16s ease;
}
.ss-billing-option.active{
  background: rgba(96,165,250,.18);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(96,165,250,.25);
}

.ss-save-badge{
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.22);
  color: rgba(255,255,255,.90);
}

/* Plan card */
.ss-plan-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  padding: 18px;
  height: 100%;
  display:flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-plan-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 62px rgba(0,0,0,.40);
}

.ss-plan-card.is-featured{
  border-color: rgba(234,179,8,.30);
  box-shadow: 0 24px 70px rgba(234,179,8,.06), 0 22px 62px rgba(0,0,0,.42);
}

.ss-plan-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
  border: 1px solid rgba(234,179,8,.28);
  background: rgba(234,179,8,.12);
  color: rgba(255,255,255,.92);
}

.ss-plan-name{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: 1.15rem;
}
.ss-plan-price{
  color: rgba(255,255,255,.95);
  font-weight: 950;
  font-size: 2.2rem;
  line-height: 1.1;
}
.ss-plan-currency{
  font-size: 1.1rem;
  opacity: .85;
  vertical-align: top;
}
.ss-plan-period{
  font-size: .95rem;
  color: rgba(255,255,255,.60);
  font-weight: 800;
  margin-left: 6px;
}
.ss-plan-desc{
  color: rgba(255,255,255,.70);
}
.ss-plan-note{
  color: rgba(255,255,255,.62);
  font-size: .92rem;
}

.ss-plan-features{
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ss-plan-features li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}
.ss-plan-features li:first-child{
  border-top: 0;
  padding-top: 0;
}
.ss-plan-features i{
  margin-top: 2px;
  color: rgba(34,197,94,.9);
}

/* Addon card */
.ss-addon-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  padding: 18px;
  height: 100%;
}
.ss-addon-name{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.ss-addon-price{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.ss-addon-price span{
  font-size: .95rem;
  font-weight: 800;
  color: rgba(255,255,255,.60);
  margin-left: 6px;
}
.ss-addon-desc{
  color: rgba(255,255,255,.68);
  margin-bottom: 12px;
}
.ss-addon-features{
  list-style:none;
  padding: 0;
  margin: 0 0 14px 0;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.ss-addon-features li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(255,255,255,.72);
}
.ss-addon-features i{
  margin-top: 2px;
  color: rgba(34,197,94,.9);
}

/* FAQ */
.ss-faq-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  margin-bottom: 12px;
}
.ss-faq-q{
  width: 100%;
  text-align:left;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.90);
  font-weight: 900;
  padding: 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
}

/* When collapsed */
.ss-faq-q.collapsed{
  color: rgba(255,255,255,.88);
}

/* Answer */
.ss-faq-a{
  display:none;
  padding: 14px 16px 18px;
  color: rgba(255,255,255,.70);
}

/* OPEN state – this is the missing “home glow” */
.ss-faq-item.open{
  border-color: rgba(96,165,250,.28);
  box-shadow:
    0 26px 70px rgba(0,0,0,.46),
    0 0 0 1px rgba(96,165,250,.08) inset,
    0 0 40px rgba(96,165,250,.10);
}

.ss-faq-item.open .ss-faq-q{
  color: rgba(255,255,255,.95);
}

/* Optional: glow wrapper (if you want the whole FAQ stack to have aura) */
.ss-faq-glow{
  position: relative;
}

.ss-faq-glow::before{
  content:"";
  position:absolute;
  inset:-24px -16px;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 30%, rgba(168,85,247,.08), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
  z-index: 0;
}

.ss-faq-glow > *{
  position: relative;
  z-index: 1;
}
/* =========================
   Pricing Glass (Home-like, legit)
   Targets only the pricing hero + pricing components
========================= */

/* HERO: glassy, not neon */
.ss-hero--pricing{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 18% 22%, rgba(96,165,250,.10), transparent 62%),
    radial-gradient(900px 420px at 85% 26%, rgba(168,85,247,.08), transparent 65%),
    linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.78));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Add a true glass “pane” inside hero (subtle) */
.ss-hero--pricing .container{
  position: relative;
}
.ss-hero--pricing .container::before{
  /* keep the effect, but move it BEHIND text */
  z-index: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: .55;
}

/* Force hero content above the blur layer */
.ss-hero--pricing > .container{
  position: relative;
  z-index: 2;
}

/* PANELS: home-style glass surface */
.ss-hero--pricing + .ss-section .ss-panel,
.ss-section .ss-panel{
  background: rgba(15,23,42,.50);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* PLAN CARDS: make them feel like home glass cards */
.ss-plan-card{
  background: rgba(15,23,42,.46);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 56px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ss-plan-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 26px 78px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

/* Featured: NOT neon, just premium highlight */
.ss-plan-card.is-featured{
  border-color: rgba(234,179,8,.30);
  box-shadow:
    0 26px 78px rgba(0,0,0,.58),
    0 0 0 1px rgba(234,179,8,.08) inset;
}

.ss-plan-badge{
  background: rgba(234,179,8,.14);
  border: 1px solid rgba(234,179,8,.28);
  color: rgba(255,255,255,.92);
}

/* Billing toggle: glass pill like home */
.ss-billing-toggle{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.36);
}

.ss-billing-option{
  border-radius: 999px;
}

.ss-billing-option.active{
  background: rgba(96,165,250,.18);
  border: 1px solid rgba(96,165,250,.20);
  box-shadow:
    0 10px 26px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* FAQ: keep it clean glass (no extra glow) */
.ss-faq-item{
  background: rgba(15,23,42,.42);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ss-faq-item.open{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 52px rgba(0,0,0,.40);
}
/* =========================
   Premium Scrollbar (Chrome/Edge + Firefox)
========================= */

/* Webkit (Chrome/Edge/Safari) */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background: rgba(2,6,23,.85);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(96,165,250,.35), rgba(168,85,247,.25));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(96,165,250,.50), rgba(168,85,247,.34));
}

/* Firefox */
*{
  scrollbar-color: rgba(96,165,250,.40) rgba(2,6,23,.85);
  scrollbar-width: thin;
}
/* =========================
   Notifications (Premium Glass)
   Put in theme-2026-v2.css
========================= */

.ss-notifications .ss-panel__foot{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 18px;
}

/* Filter tabs */
.ss-filter-tabs{
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ss-filter-tab{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ss-filter-tab:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.ss-filter-tab.active{
  background: rgba(96,165,250,.18);
  border: 1px solid rgba(96,165,250,.22);
  color: rgba(255,255,255,.95);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* Notifications list */
.ss-notes{
  display: grid;
  gap: 12px;
}
.ss-note{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(15,23,42,.48);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 44px rgba(0,0,0,.34);
}
.ss-note.is-unread{
  border-color: rgba(96,165,250,.28);
  box-shadow: 0 18px 52px rgba(0,0,0,.42);
}
.ss-note.is-read{
  opacity: .88;
}

/* Icon bubble */
.ss-note__icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}
.ss-note.is-unread .ss-note__icon{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.22);
}

/* Title/meta/message */
.ss-note__title{
  font-weight: 800;
  color: rgba(255,255,255,.94);
  margin-bottom: 2px;
}
.ss-note.is-read .ss-note__title{
  font-weight: 700;
  color: rgba(255,255,255,.86);
}
.ss-note__meta{
  font-size: .85rem;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}
.ss-note__msg{
  color: rgba(255,255,255,.76);
  line-height: 1.55;
}

/* Empty state */
.ss-empty{
  padding: 36px 18px;
  border-radius: 22px;
  background: rgba(15,23,42,.40);
  border: 1px dashed rgba(255,255,255,.18);
  text-align: center;
}
.ss-empty__icon{
  width: 72px;
  height: 72px;
  border-radius: 22px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  font-size: 28px;
}
.ss-empty__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  font-size: 1.2rem;
}
.ss-empty__sub{
  color: rgba(255,255,255,.64);
  margin-top: 6px;
}

/* Premium HR inside modal */
.ss-hr{
  border-color: rgba(255,255,255,.12) !important;
  opacity: 1 !important;
}

/* Make bootstrap switches fit dark glass */
.ss-modal-glass .form-check-label{
  color: rgba(255,255,255,.80);
}
.ss-modal-glass .form-check-input{
  background-color: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.ss-modal-glass .form-check-input:checked{
  background-color: rgba(96,165,250,.55);
  border-color: rgba(96,165,250,.55);
}
/* CONTACT: premium input groups */
.ss-inputgroup .input-group-text{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
}
.ss-inputgroup .form-control,
.ss-inputgroup .form-select{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.ss-inputgroup .form-control::placeholder{
  color: rgba(255,255,255,0.45);
}
.ss-inputgroup .form-control:focus,
.ss-inputgroup .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.35);
}

.ss-inputgroup .input-group-text{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
/* =========================
   Premium Glass: make ss-panel match glass-card-2026
================================ */
.ss-panel{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(14, 20, 36, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.ss-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.16), transparent 60%),
    radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  opacity: 1;
}

.ss-panel__head{
  position: relative;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.ss-panel__body{
  position: relative;
  padding: 20px;
}

/* Titles inside panels */
.ss-panel__title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* ================================
   Inputs: make them premium-glass
================================ */
.ss-inputgroup .input-group-text{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}

.ss-panel .form-control,
.ss-panel .form-select,
.ss-panel textarea{
  background: rgba(8, 12, 22, 0.45);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}

.ss-panel .form-control::placeholder,
.ss-panel textarea::placeholder{
  color: rgba(255,255,255,0.45);
}

.ss-panel .form-control:focus,
.ss-panel .form-select:focus,
.ss-panel textarea:focus{
  outline: none;
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
}

/* icon chips on the right column */
.ss-icon-chip{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ================================
   Scrollbar: kill the white track
================================ */
html, body{
  scrollbar-color: rgba(255,255,255,0.20) rgba(255,255,255,0.06); /* Firefox */
  scrollbar-width: thin;
}

body::-webkit-scrollbar{
  width: 10px;
}
body::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
}
body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(245,158,11,0.55), rgba(59,130,246,0.55));
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.25);
}
body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(245,158,11,0.75), rgba(59,130,246,0.75));
}
/* Force glass panels on analytics page (beats dashboard.css) */
.ss-analytics .ss-panel{
  background: rgba(14, 20, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.ss-analytics .ss-panel::before{ content:"" !important; }
.ss-analytics .ss-panel__head{
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.ss-stat-card{
  border-radius: 22px;
  background: rgba(14, 20, 36, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 18px 20px;
}
/* ================================
   Trading Analytics: force same glass as ss-panel
================================= */
.ss-analytics .ss-stat-card,
.ss-analytics .ss-empty-state__card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(14, 20, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

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

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.ss-analytics .ss-stat-card::before,
.ss-analytics .ss-empty-state__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.16), transparent 60%),
    radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
}

/* keep content above the glow layer */
.ss-analytics .ss-stat-card > *,
.ss-analytics .ss-empty-state__card > *{
  position: relative;
  z-index: 1;
}

/* Optional: make stat card spacing feel like panels */
.ss-analytics .ss-stat-card{ padding: 18px 18px; }
.ss-analytics .ss-empty-state__card{ padding: 28px 22px; }
.ss-hero-icon{
  width: 140px;
  height: 140px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(14,20,36,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
  color: rgba(255,255,255,.92);
  font-size: 42px;
}
/* ================================
   MOBILE DISCIPLINE – QUICK WIN
   ================================ */
@media (max-width: 768px) {

  /* ---------- GLOBAL SPACING ---------- */
  body {
    font-size: 15px;
  }

  section {
    padding: 32px 16px !important;
  }

  /* ---------- NAVBAR ---------- */
  .navbar,
  header {
    height: 56px !important;
    padding: 0 12px !important;
  }

  .navbar .nav-links {
    display: none !important; /* hide desktop links */
  }

  .navbar .btn,
  .navbar button {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* ---------- HERO ---------- */
  .hero-title,
  h1 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.2 !important;
  }

  .hero-description,
  .hero p {
    font-size: 15px !important;
    line-height: 1.5 !important;

    /* HARD LIMIT: 5 lines */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;

/* future / standards */
line-clamp: 5;

overflow: hidden;

  }

  /* ---------- CTA BUTTONS ---------- */
  .hero-actions,
  .cta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hero-actions button,
  .cta-group button {
    width: 100% !important;
  }

  /* ---------- CARDS / PRODUCTS ---------- */
  .card,
  .pricing-card,
  .product-card {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .card p,
  .product-description {
    font-size: 14px !important;
    line-height: 1.4 !important;

    /* HARD LIMIT: 5 lines */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;

/* future / standards */
line-clamp: 5;

overflow: hidden;

  }

  /* ---------- HEADINGS ---------- */
  h2 {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  h3 {
    font-size: 17px !important;
  }

  /* ---------- FOOTER ---------- */
  footer {
    padding: 20px 16px !important;
  }

  footer .footer-links {
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 13px !important;
  }
}
/* MOBILE: collapsible card text */
@media (max-width: 768px) {
  .card-text,
  .product-description,
  .resource-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .card-text.is-expanded,
  .product-description.is-expanded,
  .resource-description.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
  }

  .tap-hint {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.25rem;
  }
}
/* ===== MOBILE NAV 2026 ===== */
.desktop-nav {
  display: flex;
}

.mobile-drawer-2026 {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 20, 0.65);
  backdrop-filter: blur(14px);
  z-index: 9999;
  display: none;
}

.mobile-drawer-2026.active {
  display: block;
}

.mobile-drawer-inner {
  margin: 1rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: rgba(15, 20, 40, 0.85);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-drawer-inner a,
.mobile-drawer-inner button {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 12px;
}

.mobile-drawer-inner a:hover {
  background: rgba(255,255,255,0.08);
}

.drawer-primary {
  background: linear-gradient(135deg,#f6c000,#ffb300);
  color: #000;
}

.drawer-logout {
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  color: #ff6b6b;
}

/* Mobile only */
@media (max-width: 991px) {
  .desktop-nav {
    display: none;
  }
}
/* MOBILE NAV ACTIONS */
.mobile-actions-2026 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile bell spacing */
.mobile-actions-2026 .notif-2026 {
  font-size: 1.05rem;
  position: relative;
}

/* Ensure dropdown works on small screens */
@media (max-width: 991px) {
  .notif-menu-2026 {
    min-width: 260px;
    max-width: calc(100vw - 24px);
  }
}
/* FEATURED EA – GLASS 2026 */
.featured-ea-card {
  padding: 1.75rem 2rem;
}

.featured-ea-title {
  font-weight: 800;
  letter-spacing: -0.3px;
}

.featured-ea-desc {
  color: var(--text-muted-2026);
  max-width: 560px;
}

/* Meta line */
.featured-ea-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: #9aa3b2;
  margin-top: 0.25rem;
}

/* Plans */
.featured-ea-plans {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: #8f98a7;
}

.plan-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 6px;
  background: rgba(255, 215, 120, 0.12);
  border: 1px solid rgba(255, 215, 120, 0.35);
  color: #ffd978;
  font-weight: 600;
}

/* Actions */
.featured-ea-actions {
  white-space: nowrap;
}
/* ===============================
   NAVBAR HEIGHT TIGHTEN (≈20%)
   Safe + premium
================================ */

/* main navbar container */
.navbar,
.ss-navbar,
.main-nav{
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  min-height: unset;
}

/* nav links / pills */
.navbar .nav-link,
.ss-navbar .nav-link{
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  line-height: 1.2;
}

/* logo sizing */
.navbar-brand img,
.ss-navbar__logo img{
  max-height: 32px; /* was likely ~40 */
}

/* pills / buttons inside navbar */
.navbar .btn,
.navbar .ss-pill{
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* dropdown menus still align nicely */
.navbar .dropdown-menu{
  margin-top: .4rem;
}
/* =========================================
   SURGICAL NAV TIGHTENING (requires .ss-nav-tight)
   ~20% shorter without killing the vibe
========================================= */

.ss-nav-tight{
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  min-height: 56px !important;          /* keeps it consistent */
  display: flex;
  align-items: center;
}

/* if your navbar has an inner container/row */
.ss-nav-tight .container,
.ss-nav-tight .container-fluid{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* nav links / pills (most height comes from here) */
.ss-nav-tight a,
.ss-nav-tight .nav-link,
.ss-nav-tight .btn{
  line-height: 1.15 !important;
}

/* tighten link padding */
.ss-nav-tight .nav-link{
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
}

/* brand/logo height */
.ss-nav-tight .navbar-brand,
.ss-nav-tight .brand,
.ss-nav-tight .logo{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ss-nav-tight .navbar-brand img,
.ss-nav-tight img{
  max-height: 32px !important;          /* reduce if yours is huge */
  height: auto;
}
/* =========================================
   NAVBAR 2026 — DESKTOP TIGHTEN & SPACING
   Safe • Premium • Glass-friendly
========================================= */

/* MAIN NAV WRAPPER */
.navbar-2026 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000 !important;
  width: 100%;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  min-height: 72px; /* Fixed height to match body padding */
  background: rgba(11, 15, 26, 0.85); /* Slightly transparent dark bg */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* Add padding to body to prevent content hiding behind fixed nav */
body {
  padding-top: 72px;
}

/* INNER CONTAINER */
.nav-inner-2026 {
  display: flex;
  align-items: center;
  gap: 1.5rem;                      /* space between brand / links / right */
}

/* =========================
   DESKTOP NAV LINKS (CENTER)
========================= */
.nav-links-2026 {
  display: flex;
  align-items: center;
  gap: 1.2rem;                      /* spacing BETWEEN links */
}

/* individual nav links */
.nav-link-2026 {
  padding: 0.4rem 0.55rem;          /* shrink clickable area */
  font-size: 0.88rem;               /* slightly smaller text */
  line-height: 1.15;
}

/* active link stays premium */
.nav-link-2026.active {
  font-weight: 600;
}

/* =========================
   RIGHT SIDE (AUTH / USER)
========================= */
.nav-right-2026 {
  display: flex;
  align-items: center;
  gap: 0.75rem;                     /* space between buttons / icons */
}

/* buttons on right */
.nav-right-2026 .btn-2026 {
  padding: 0.38rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.1;
}

/* user avatar / dropdown trigger */
.nav-right-2026 .user-trigger,
.nav-right-2026 .dropdown-toggle {
  padding: 0.35rem 0.45rem;
  line-height: 1.1;
}

/* =========================
   BRAND / LOGO
========================= */
.brand-2026 img {
  max-height: 32px;                 /* tighter logo */
  height: auto;
}

.brand-text-2026 {
  font-size: 1rem;
  line-height: 1.1;
}

/* =========================
   DROPDOWN ALIGNMENT
========================= */
.navbar-2026 .dropdown-menu {
  margin-top: 0.45rem;              /* avoids floating too low */
}

/* =========================
   DESKTOP ONLY (GUARD)
========================= */
@media (max-width: 991px) {
  .nav-links-2026,
  .nav-right-2026 {
    gap: unset;
  }
}
/* =========================================
   NAVBAR 2026 — MOBILE SAFETY LOCK
   Prevent desktop nav leakage
========================================= */

/* 🔒 HARD STOP: desktop nav NEVER shows on mobile */
@media (max-width: 991px) {
  .desktop-nav,
  .nav-links-2026 {
    display: none !important;
  }
}

/* =========================================
   DESKTOP-ONLY TIGHTENING (GUARDED)
========================================= */
@media (min-width: 992px) {

  .navbar-2026 {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    min-height: 72px; /* Match mobile fixed height */
  }

  .nav-links-2026 {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .nav-link-2026 {
    padding: 0.4rem 0.55rem;
    font-size: 0.88rem;
    line-height: 1.15;
  }

  .nav-right-2026 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .nav-right-2026 .btn-2026 {
    padding: 0.38rem 0.75rem;
    font-size: 0.85rem;
  }
}
/* =========================================
   MOBILE NOTIFICATION CLICK FIX
========================================= */

/* ensure nav top layer always clickable */
/* .navbar-2026 rule removed to avoid conflict with sticky positioning */

/* notification button must sit above drawer */
.nav-notification-btn,
#notifDropdownToggle {
  position: relative;
  z-index: 1100;
  pointer-events: auto;
}

/* mobile drawer must NOT block clicks when closed */
.mobile-drawer-2026 {
  pointer-events: none;
}

.mobile-drawer-2026.open {
  pointer-events: auto;
}
/* =========================================
   MOBILE DRAWER — OPTION 3 (CSS-FIRST)
========================================= */

.mobile-drawer-2026 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: block;

  background: rgba(0, 0, 0, 0.35); /* overlay */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;
}

/* ACTIVE */
.mobile-drawer-2026.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* PANEL */
.mobile-drawer-inner {
  width: 280px;
  max-width: 85%;
  height: 100%;

  background: rgba(15, 17, 22, 0.94);
  backdrop-filter: blur(18px);

  transform: translateX(-100%);
  transition: transform .3s ease;

  pointer-events: auto;
}

/* SLIDE IN */
.mobile-drawer-2026.open .mobile-drawer-inner {
  transform: translateX(0);
}

/* LINKS */
.mobile-drawer-inner a,
.mobile-drawer-inner button {
  cursor: pointer;
}

/* LOCK BACKGROUND */
body.drawer-open {
  overflow: hidden;
}

.glass-dropdown {
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ss-select-plan .breadcrumb{
  margin-bottom: 0;
}

.ss-select-plan .breadcrumb-item,
.ss-select-plan .breadcrumb-item a{
  color: rgba(226,232,240,.82);
}

.ss-select-plan .breadcrumb-item.active{
  color: rgba(226,232,240,.92);
}

.ss-select-plan .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(148,163,184,.65);
}

.ss-select-plan .text-muted,
.ss-select-plan .form-text{
  color: rgba(148,163,184,.90) !important;
}

.ss-select-plan .card{
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
  color: rgba(226,232,240,.92);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.ss-select-plan .card-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.ss-select-plan .card-header.bg-light{
  background: rgba(255,255,255,.04) !important;
  color: rgba(226,232,240,.92) !important;
}

.ss-select-plan .bg-light{
  background: rgba(255,255,255,.04) !important;
}

.ss-select-plan .alert{
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(226,232,240,.92) !important;
}

.ss-select-plan .alert-info{
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.22) !important;
}

.ss-select-plan .alert-warning{
  background: rgba(240,185,11,.10) !important;
  border-color: rgba(240,185,11,.22) !important;
}

.ss-select-plan .alert a{
  color: rgba(226,232,240,.95);
}

.ss-select-plan .form-label{
  color: rgba(226,232,240,.88);
}

.ss-select-plan .form-control{
  background: rgba(2,6,23,.55);
  border-color: rgba(255,255,255,.14);
  color: rgba(226,232,240,.92);
}

.ss-select-plan .form-control:focus{
  background: rgba(2,6,23,.65);
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
  color: rgba(226,232,240,.95);
}

.ss-select-plan .form-control::placeholder{
  color: rgba(148,163,184,.72);
}

.ss-select-plan .btn-outline-secondary{
  border-color: rgba(255,255,255,.20) !important;
  color: rgba(226,232,240,.88) !important;
}

.ss-select-plan .btn-outline-secondary:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: rgba(226,232,240,.95) !important;
}

@media (min-width: 992px) {
  .mobile-drawer-2026 {
    display: none !important;
  }
}
/* =========================================
   GLOBAL SIGNALSOLID PURE BLACK BASE
========================================= */

html,
body {
  background-color: #050505 !important;
  background-image: none !important;
}

/* Kill Bootstrap body background variable */
:root {
  --bs-body-bg: #050505 !important;
}

/* If dark-mode exists, override it too */
body.dark-mode {
  background-color: #050505 !important;
  background-image: none !important;
}