/* ===== DESIGN TOKENS ===== */
:root {
  --gold:          #D4AF37;
  --gold-dark:     #B8960C;
  --gold-light:    #E6C76A;
  --gold-pale:     #F5E199;
  --gold-soft:     rgba(212,175,55,0.13);
  --gold-glow:     rgba(212,175,55,0.22);
  --bg:            #050505;
  --surface:       #0e0e0e;
  --surface-soft:  #181818;
  --border:        rgba(255,255,255,0.07);
  --border-gold:   rgba(212,175,55,0.30);
  --text:          #f4f4f4;
  --text-secondary:#9a9a9a;
  --text-muted:    #555;
  --shadow-gold:   0 16px 48px rgba(212,175,55,0.22);
  --shadow-dark:   0 24px 80px rgba(0,0,0,0.52);
  --container:     1200px;
  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     26px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: 72px;
}

/* ── Global scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(212,175,55,0.22); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(212,175,55,0.50); }
* { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.22) transparent; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px),
    radial-gradient(ellipse 100% 60% at 50% -8%, rgba(212,175,55,0.18), transparent 62%),
    radial-gradient(ellipse 55% 35% at 92% 108%, rgba(212,175,55,0.07), transparent 55%),
    var(--bg);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  min-width: 320px;
  overflow-x: hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::selection { background: rgba(212,175,55,0.28); color: #fff; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

input, select, textarea {
  color: var(--text);
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(212,175,55,0.72) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.09);
}
select option { background: #111; color: var(--text); }

/* ===== TYPOGRAPHY ===== */
.gold-text {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== BUTTONS ===== */
.btn-gold {
  min-height: 46px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), var(--shadow-gold);
  position: relative; overflow: hidden;
}
.btn-gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 50%);
  pointer-events: none;
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 22px 60px rgba(212,175,55,0.32); }
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
  min-height: 42px; border-radius: 100px;
  background: transparent; border: 1px solid var(--border-gold);
  color: var(--gold-light); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: all 0.22s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 20px;
}
.btn-outline-gold:hover {
  background: var(--gold-soft); border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.14), 0 8px 24px rgba(212,175,55,0.10);
}

/* ===== GLASS MORPHISM ===== */
.liquid-glass {
  position: relative;
  background: linear-gradient(160deg, rgba(28,28,28,0.90) 0%, rgba(10,10,10,0.82) 100%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 52px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.30s cubic-bezier(0.22,1,0.36,1), border-color 0.30s, box-shadow 0.30s;
  overflow: hidden;
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 38%, rgba(212,175,55,0.05) 100%);
  opacity: 0.65;
}
.liquid-glass::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
.liquid-glass:hover {
  border-color: rgba(212,175,55,0.32);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.12), 0 32px 72px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.09);
  transform: translateY(-3px);
}
.liquid-glass > * { position: relative; z-index: 1; }

/* ===== LANGUAGE DROPDOWN ===== */
.lang-menu {
  transform-origin: top left;
  animation: langFadeIn .18s ease forwards;
}
@keyframes langFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
.lang-item { border-inline-start: 2px solid transparent; }
.lang-item:hover { background: rgba(255,255,255,0.04); }
.lang-item.is-active {
  background: rgba(212,175,55,0.08);
  border-inline-start-color: #D4AF37;
}
.lang-item.is-active .lang-check { opacity: 1; }
.lang-item.is-active .flex-1 { color: #E6C76A; }
.lang-item.is-active .lang-abbr { color: #FFE080; }

/* ===== HEADER ===== */
#header {
  background: rgba(3,3,3,0.85) !important;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.28);
}
#header .max-w-7xl,
#home, #categories,
footer .max-w-7xl { max-width: var(--container); }

.site-logo {
  height: 42px; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.30));
  transition: filter 0.3s;
}
.site-logo:hover { filter: drop-shadow(0 0 22px rgba(212,175,55,0.55)); }

/* Social icon buttons — 40×40 identical containers, pixel-perfect centering */
.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.social-icon-link:hover {
  background: rgba(212,175,55,0.10);
  border-color: rgba(212,175,55,0.30);
  color: #D4AF37;
}
.social-icon-link svg { display: block; }

/* ── Desktop nav: always visible on ≥768px, hidden below ───────────────── */
/* These selectors have higher specificity than Tailwind utilities, so we    */
/* own visibility entirely in CSS — no Tailwind dependency for nav toggle.   */
#desktopNav {
  display: none;                 /* hidden on mobile (default) */
}
@media (min-width: 768px) {
  #desktopNav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
}

/* ── Hamburger button: hidden on desktop, flex on mobile ─────────────────── */
#mobileMenuBtn {
  display: none;                 /* hidden on desktop (default / desktop-first) */
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); transition: background 0.2s, border-color 0.2s;
}
@media (max-width: 767px) {
  #mobileMenuBtn { display: flex; }   /* only appears on mobile */
}
#mobileMenuBtn:hover { background: rgba(255,255,255,0.08); border-color: rgba(212,175,55,0.30); }

/* ===== HERO SLIDER ===== */
#home { padding: 16px 16px 0; }

#home > div {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(145deg, rgba(18,18,18,0.96), rgba(5,5,5,0.98));
  box-shadow: 0 32px 100px rgba(0,0,0,0.56);
  overflow: hidden;
}

/* ── Hamburger → X ─────────────────────────────────────────────────── */
.ham-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; width: 20px; height: 20px;
}
.ham-line {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 1px; transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.20s ease;
}
#mobileMenuBtn[aria-expanded="true"] .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobileMenuBtn[aria-expanded="true"] .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#mobileMenuBtn[aria-expanded="true"] .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav: completely absent on desktop ────────────────────────── */
@media (min-width: 768px) {
  #mobileNav { display: none; }
}

/* ── Mobile nav slide-in/out ─────────────────────────────────────────── */
@media (max-width: 767px) {
  #mobileNav {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      max-height  0.40s cubic-bezier(0.22, 1, 0.36, 1),
      opacity     0.28s ease,
      transform   0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility  0s   linear 0.40s;
  }
  #mobileNav.nav-open {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: all;
    transition:
      max-height  0.40s cubic-bezier(0.22, 1, 0.36, 1),
      opacity     0.28s ease,
      transform   0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility  0s   linear 0s;
  }
  /* Staggered item entrance */
  #mobileNav a {
    opacity: 0;
    transform: translateX(-10px);
    transition:
      opacity   0.26s ease,
      transform 0.26s cubic-bezier(0.22,1,0.36,1),
      background 0.2s, color 0.2s;
  }
  #mobileNav.nav-open a:nth-child(1) { opacity:1; transform:none; transition-delay: 0.08s; }
  #mobileNav.nav-open a:nth-child(2) { opacity:1; transform:none; transition-delay: 0.15s; }
  #mobileNav.nav-open a:nth-child(3) { opacity:1; transform:none; transition-delay: 0.22s; }
}

#sliderTrack { position: relative; overflow: hidden; }

/* ── Slide state machine (transform-based, JS drives transitions) ──── */
.hero-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
  /* transform and transition are set by slider.js */
}
.hero-slide.s-active {
  pointer-events: all;
  z-index: 2;
}
/* Content entrance — fires on every s-active add */
.hero-slide.s-active .slide-content-inner {
  animation: slideIn 0.72s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none !important; }
  .hero-slide.s-active .slide-content-inner { animation: none !important; }
  .ham-line { transition: none !important; }
  #mobileNav, #mobileNav a { transition: none !important; }
}

.slide-visual {
  position: relative; overflow: hidden;
}
.slide-visual::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(212,175,55,0.09) 0%, transparent 55%),
              repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 18px);
}
.slide-visual::after {
  content: ''; position: absolute; inset: 18px;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 22px; pointer-events: none;
}

.slide-icon-wrap {
  width: 108px; height: 108px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(0,0,0,0.40));
  border: 1px solid rgba(212,175,55,0.24);
  box-shadow: 0 0 48px rgba(212,175,55,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}

.slide-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(212,175,55,0.09); border: 1px solid rgba(212,175,55,0.20);
  font-size: 0.75rem; color: var(--gold-light); font-weight: 500;
}
.slide-stat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold);
}

/* ── Slider dots (pill shape on active) ─────────────────────────────── */
.slider-dot {
  width: 8px; height: 8px; border-radius: 100px;
  background: rgba(255,255,255,0.20);
  transition: background 0.32s, width 0.32s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer; border: none;
}
.slider-dot.s-active {
  background: var(--gold) !important;
  width: 28px !important;
  box-shadow: 0 0 10px rgba(212,175,55,0.55);
}

/* Slider nav */
#sliderPrev, #sliderNext {
  width: 44px; height: 44px;
  border-color: rgba(255,255,255,0.12); background: rgba(0,0,0,0.62);
  backdrop-filter: blur(14px);
  transition: background 0.22s, border-color 0.22s;
}
#sliderPrev:hover, #sliderNext:hover {
  background: rgba(212,175,55,0.16); border-color: rgba(212,175,55,0.48);
}

/* Progress bar */
#progressBar { background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }

/* Slide headings */
#sliderTrack h1 {
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: 1.0; letter-spacing: -0.02em;
}
#sliderTrack p { font-size: clamp(0.9rem, 1.2vw, 1.04rem); line-height: 1.80; }

/* ===== DETAIL STRIP ===== */
.detail-strip { max-width: var(--container); margin: 22px auto 0; padding: 0 16px; }
.detail-strip-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px;
  background: rgba(255,255,255,0.07);
}
.detail-item { background: rgba(8,8,8,0.90); padding: 16px 22px; transition: background 0.2s; }
.detail-item:hover { background: rgba(18,18,18,0.98); }
.detail-item strong { display: block; color: var(--gold-light); font-size: 0.94rem; font-weight: 600; line-height: 1.2; }
.detail-item span { display: block; color: var(--text-secondary); font-size: 0.74rem; margin-top: 4px; }

/* ===== CATEGORIES — LUXURY CARDS ===== */
#categories { padding-top: 90px; padding-bottom: 90px; }

/* Premium category card base */
.cat-card {
  position: relative; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(26,26,26,0.92) 0%, rgba(8,8,8,0.88) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, border-color 0.35s;
  padding: 28px;
  min-height: 350px;
  cursor: pointer;
}
/* Metallic top sheen */
.cat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, transparent 100%);
  border-radius: 22px 22px 0 0; pointer-events: none;
}
/* Diagonal gold accent line */
.cat-card::after {
  content: ""; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.10) 0%, transparent 70%);
  pointer-events: none; transition: opacity 0.35s;
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.005);
  border-color: rgba(212,175,55,0.38);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.18),
    0 36px 80px rgba(0,0,0,0.60),
    0 8px 24px rgba(212,175,55,0.12),
    inset 0 1px 0 rgba(255,255,255,0.09);
}
.cat-card:hover::after { opacity: 2; }

/* Gold-variant card */
.cat-card-gold .cat-card-icon { background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05)); border-color: rgba(212,175,55,0.25); }
.cat-card-gold:hover { border-color: rgba(212,175,55,0.45); }

/* Icon container */
.cat-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  position: relative; overflow: hidden;
}
.cat-card-icon::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 60%);
}

/* Stats bar */
.cat-stat-bar { height: 3px; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,0.06); margin-top: 4px; }
.cat-stat-bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }

/* ===== PANELS ===== */
.panel {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 48px; transition: opacity 0.3s;
}
.panel.hidden { display: none; }
.panel h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; }

/* Item cards inside panels */
.item-card {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, rgba(22,22,22,0.90), rgba(8,8,8,0.84));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 20px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(12px);
}
.item-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.item-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 0 1px rgba(212,175,55,0.10);
}
.item-card-featured { border-color: rgba(212,175,55,0.24) !important; }
.item-card-featured::after {
  content: "Featured"; position: absolute; top: 12px; right: 12px;
  padding: 2px 8px; border-radius: 100px; font-size: 0.65rem; font-weight: 700;
  background: rgba(212,175,55,0.14); color: var(--gold); border: 1px solid rgba(212,175,55,0.25);
}

/* ===== CONTACT ===== */
#contact { max-width: 800px; padding-top: 90px; padding-bottom: 96px; }
#contactForm label { font-weight: 600; color: rgba(244,244,244,0.72); }

/* ===== MODALS ===== */
#purchaseModal > div,
#verifyModal > div,
#ratingModal > div,
#deploymentOverlay > div {
  border-radius: 24px !important;
  width: min(calc(100vw - 32px), 460px);
}

/* ===== STAR RATING ===== */
.star-btn { font-size: 2.5rem; color: #252525; cursor: pointer; transition: color 0.18s, transform 0.18s; background: none; border: none; padding: 4px; }
.star-btn:hover, .star-btn.text-gold { color: var(--gold); transform: scale(1.12); }

/* ===== TOAST ===== */
.toast {
  padding: 12px 20px; border-radius: var(--radius-sm);
  background: rgba(16,16,16,0.97); border: 1px solid rgba(255,255,255,0.08);
  color: #fff; font-size: 0.86rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.58);
  animation: toastSlideIn 0.32s cubic-bezier(0.22,1,0.36,1);
  backdrop-filter: blur(14px);
}
.toast.success { border-left: 3px solid #4ade80; }
.toast.error   { border-left: 3px solid #f87171; }
.toast.info    { border-left: 3px solid var(--gold); }
@keyframes toastSlideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== SKELETON ===== */
.skeleton-shimmer {
  background: linear-gradient(90deg, #131313 25%, #1f1f1f 50%, #131313 75%);
  background-size: 200% 100%; animation: shimmer 1.8s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.68s cubic-bezier(0.22,1,0.36,1), transform 0.68s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.17s; }
.reveal-delay-3 { transition-delay: 0.26s; }

/* ═════════════════════════════════════════════════════════════════
   INDICATOR PANEL — Two-section accordion (Indicators / Oscillators)
   Each section is independently collapsible; open state = --open class.
   Visibility uses max-height + opacity transition (no display:none).
═════════════════════════════════════════════════════════════════ */
.indicator-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.accord-section {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.accord-section:hover        { border-color: rgba(255,255,255,0.12); }
.accord-section--open        { background: rgba(255,255,255,0.025); }

.accord-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
}
.accord-header:hover { background: rgba(255,255,255,0.028); }

.accord-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.accord-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accord-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.accord-sublabel {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 3px;
}

.accord-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.accord-count {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.accord-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.accord-section--open .accord-chevron { transform: rotate(180deg); }

/* Body — animates via max-height + opacity; no display:none */
.accord-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.22,1,0.36,1),
              opacity    0.28s ease;
}
.accord-section--open .accord-body {
  max-height: 2400px;
  opacity: 1;
}

/* Grid inside each accordion section */
.accord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 4px 20px 20px;
  max-height: 500px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.accord-grid::-webkit-scrollbar              { width: 4px; }
.accord-grid::-webkit-scrollbar-track       { background: transparent; }
.accord-grid::-webkit-scrollbar-thumb       { background: rgba(212,175,55,0.30); border-radius: 2px; }
.accord-grid::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.55); }

.accord-empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.30);
}

@media (prefers-reduced-motion: reduce) {
  .accord-body   { transition: none; }
  .accord-chevron { transition: none; }
}

/* ===== ANIMATIONS ===== */
.animate-fadeIn { animation: fadeIn 0.45s cubic-bezier(0.22,1,0.36,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@keyframes spin       { from { transform: rotate(0deg); }        to { transform: rotate(360deg); } }
@keyframes barGrow    { 0%,100% { transform: scaleY(0.7); }       50% { transform: scaleY(1); } }
@keyframes floatY     { 0%,100% { transform: translateY(0); }     50% { transform: translateY(-7px); } }
@keyframes goldPulse  { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 0 8px rgba(212,175,55,0.07); } }

/* ═══════════════════════════════════════════════════════════════════
   DYNAMIC CATEGORY PANELS  —  Indicators & Oscillators
   ═══════════════════════════════════════════════════════════════════ */

/* Section wrapper */
#strategy-tools {
  padding: 80px 16px;
  max-width: var(--container);
  margin-inline: auto;
}
#strategy-tools .section-sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
#strategy-tools .section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
}
#strategy-tools .section-lead {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 560px;
  margin-inline: auto;
}

/* Loading skeleton */
.dyn-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.dyn-skel-card {
  height: 140px;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Panel mount container */
#dynCatMount {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 36px;
}

/* Glass panel card */
.glass-cat-panel {
  background: rgba(255,255,255,0.030);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  position: relative;
  overflow: hidden;
}
.glass-cat-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 75% 55% at 10% 0%,
    rgba(212,175,55,0.055) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Panel header ───────────────────────────────────────────────── */
.cat-panel-hd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-icon--gold {
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.25);
  color: #D4AF37;
}
.cat-icon--green {
  background: rgba(74,222,128,0.09);
  border: 1px solid rgba(74,222,128,0.22);
  color: #4ade80;
}
.cat-hd-text { flex: 1; min-width: 0; }
.cat-panel-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cat-panel-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.cat-layout-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  align-self: flex-start;
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────
   INDICATORS  —  grid cards
   ───────────────────────────────────────────────────────────────── */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.ind-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  position: relative;
  cursor: default;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.ind-card:hover {
  border-color: rgba(212,175,55,0.28);
  background: rgba(212,175,55,0.04);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.12) inset,
              0 8px 32px rgba(212,175,55,0.08);
}
.ind-spark {
  display: block;
  width: 100%;
  height: 32px;
  margin-bottom: 10px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.ind-card:hover .ind-spark { opacity: 1; }
.ind-name {
  font-size: 0.90rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
}
.ind-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.ind-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ind-tag {
  font-size: 0.60rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.18);
  color: rgba(212,175,55,0.85);
}

/* ─────────────────────────────────────────────────────────────────
   OSCILLATORS  —  accordion
   ───────────────────────────────────────────────────────────────── */
.osc-list { display: flex; flex-direction: column; gap: 8px; }

.osc-item {
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.020);
  overflow: hidden;
  transition: border-color 0.22s;
}
.osc-item.is-open {
  border-color: rgba(74,222,128,0.22);
  background: rgba(74,222,128,0.025);
}

.osc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.18s;
}
.osc-trigger:hover { background: rgba(255,255,255,0.025); }
.osc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.18);
  color: #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, background .2s, border-color .2s;
}
.osc-trigger[aria-expanded="true"] .osc-icon {
  background: rgba(212,175,55,0.16);
  border-color: rgba(212,175,55,0.38);
  transform: scale(1.06) rotate(-4deg);
}
.osc-item-name { flex: 1; }
.osc-range {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.osc-abbr-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(74,222,128,0.09);
  border: 1px solid rgba(74,222,128,0.18);
  color: #4ade80;
  flex-shrink: 0;
}
.osc-chv {
  color: var(--text-muted);
  display: flex; align-items: center;
  transition: transform 0.28s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.osc-item.is-open .osc-chv { transform: rotate(180deg); }

/* Collapsible body */
.osc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(.22,1,.36,1);
}
.osc-item.is-open .osc-body { max-height: 260px; }
.osc-body-inner { padding: 0 16px 16px; }
.osc-desc {
  font-size: 0.80rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Gauge */
.osc-gauge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.osc-gauge-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  width: 48px;
  flex-shrink: 0;
}
.osc-gauge-track {
  flex: 1;
  height: 5px;
  border-radius: 100px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  position: relative;
}
.osc-gauge-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #4ade80 0%, #D4AF37 45%, #ef4444 100%);
  transition: width 0.8s cubic-bezier(.22,1,.36,1);
}
.osc-zone-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.60rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.zone-red   { color: rgba(239,68,68,0.65); }
.zone-green { color: rgba(74,222,128,0.65); }

/* ─────────────────────────────────────────────────────────────────
   SHARED small button
   ───────────────────────────────────────────────────────────────── */
.btn-gold-sm {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #000;
  font-size: 0.80rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.18s, transform 0.18s;
  white-space: nowrap;
}
.btn-gold-sm:hover { opacity: 0.88; transform: translateY(-1px); }

/* extra icon classes */
.cat-icon--blue   { background:rgba(96,165,250,0.12); border:1px solid rgba(96,165,250,0.25); color:#60a5fa; }
.cat-icon--purple { background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.25); color:#a78bfa; }

/* ─────────────────────────────────────────────────────────────────
   VPN PANEL
   ───────────────────────────────────────────────────────────────── */
.vpn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.vpn-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.vpn-card:hover {
  border-color: rgba(96,165,250,0.28);
  background: rgba(96,165,250,0.04);
}
.vpn-card-top {
  display: flex; align-items: center; gap: 10px;
}
.vpn-flag { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.vpn-card-info { flex: 1; }
.vpn-country { font-size: 0.92rem; font-weight: 700; }
.vpn-city    { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.vpn-ping {
  font-size: 0.65rem; font-weight: 600; padding: 2px 7px;
  border-radius: 100px;
  background: rgba(74,222,128,0.09); border: 1px solid rgba(74,222,128,0.18);
  color: #4ade80; white-space: nowrap;
}
.vpn-protos { display: flex; flex-wrap: wrap; gap: 4px; }
.vpn-proto-badge {
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(96,165,250,0.09); border: 1px solid rgba(96,165,250,0.18);
  color: #60a5fa; text-transform: uppercase;
}
.vpn-vol-list {
  display: flex; flex-direction: column; gap: 5px;
}
.vpn-vol-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  cursor: pointer; font-size: 0.78rem;
  transition: border-color 0.15s, background 0.15s;
}
.vpn-vol-item:has(input:checked) {
  border-color: rgba(96,165,250,0.40);
  background: rgba(96,165,250,0.07);
}
.vpn-vol-item input { accent-color: #60a5fa; flex-shrink: 0; }
.vpn-vol-label { flex: 1; }
.vpn-vol-price { color: var(--gold); font-weight: 700; font-size: 0.80rem; }
.vpn-price-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.vpn-price-cur {
  font-size: 1.05rem; font-weight: 800; color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────
   BOT PLANS
   ───────────────────────────────────────────────────────────────── */
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.bot-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.bot-card--featured {
  border-color: rgba(167,139,250,0.30);
  background: rgba(167,139,250,0.05);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.12) inset;
}
.bot-featured-ribbon {
  position: absolute; top: 12px; right: -22px;
  background: rgba(167,139,250,0.85);
  color: #fff; font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 28px; transform: rotate(35deg);
}
.bot-card-top { display: flex; align-items: center; justify-content: space-between; }
.bot-type-badge {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22);
  color: #a78bfa; text-transform: uppercase;
}
.bot-risk { display: flex; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--text-secondary); }
.bot-risk-dots { display: inline-flex; align-items: center; gap: 3px; }
.risk-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.risk-low { background: #4ade80; }
.risk-med { background: #fbbf24; }
.risk-hi  { background: #ef4444; }
.risk-off { background: rgba(255,255,255,0.12); }
.bot-name { font-size: 1.05rem; font-weight: 700; margin: 0; }
.bot-exchanges { display: flex; flex-wrap: wrap; gap: 4px; }
.bot-exch-badge {
  font-size: 0.60rem; font-weight: 600; padding: 2px 7px;
  border-radius: 6px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary);
}
.bot-price {
  font-size: 1.30rem; font-weight: 800; color: var(--gold);
  line-height: 1.1;
}
.bot-period { font-size: 0.72rem; font-weight: 400; color: var(--text-secondary); }
.bot-feat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.bot-feat-item { font-size: 0.76rem; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.bot-feat-item svg { flex-shrink: 0; margin-top: 2px; }
.bot-cta-btn { align-self: flex-start; margin-top: auto; }

/* ─────────────────────────────────────────────────────────────────
   TOOL PLANS (tiered pricing)
   ───────────────────────────────────────────────────────────────── */
.tplan-grid { display: flex; flex-direction: column; gap: 20px; }
.tplan-card {
  background: rgba(255,255,255,0.020);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
}
.tplan-card-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.tplan-icon    { flex-shrink: 0; }
.tplan-tool-name { font-size: 1.00rem; font-weight: 700; }
.tplan-tool-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.tplan-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tplan-tier {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s;
}
.tplan-tier--popular {
  border-color: rgba(52,211,153,0.30);
  background: rgba(52,211,153,0.04);
}
.tplan-popular-badge {
  position: absolute; top: 8px; right: -18px;
  background: rgba(52,211,153,0.80);
  color: #000; font-size: 0.52rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 24px; transform: rotate(35deg);
}
.tplan-tier-name { font-size: 0.70rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); }
.tplan-price { font-size: 1.20rem; font-weight: 800; color: var(--gold); }
.tplan-period { font-size: 0.65rem; font-weight: 400; color: var(--text-secondary); }
.tplan-feat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tplan-feat { font-size: 0.72rem; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 5px; line-height: 1.4; }
.tplan-feat svg { flex-shrink: 0; margin-top: 2px; }
.tplan-cta { width: 100%; margin-top: auto; }

/* Admin extras */
.checkbox-row    { display: flex; flex-wrap: wrap; gap: 10px; }
.check-label     { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; cursor: pointer; color: var(--text-secondary); }
.check-label input { accent-color: var(--gold); }
.form-hint-inline { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.sort-order-badge { font-size: 0.78rem; color: var(--text-muted); }
.badge--gold { background: rgba(212,175,55,0.15); color: var(--gold); border: 1px solid rgba(212,175,55,0.25); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) { #sliderTrack { height: auto !important; } }

@media (max-width: 768px) {
  .detail-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
}

@media (max-width: 640px) {
  body { background-size: 30px 30px, 30px 30px, auto, auto, auto; }
  #header .max-w-7xl { height: 58px; padding-inline: 12px; }
  #langName { display: none; }
  #home { padding-inline: 10px; }
  #home > div { border-radius: 18px; }
  .slide-visual { min-height: 190px !important; }
  #sliderTrack h1 { font-size: 1.9rem; }
  #sliderPrev, #sliderNext { width: 38px; height: 38px; }
  .detail-strip { margin-top: 12px; padding-inline: 10px; }
  .detail-item { padding: 12px 14px; }
  #categories, #contact { padding: 60px 14px; }
  .cat-card { min-height: auto; padding: 20px; }
  .panel { margin-top: 42px !important; padding-top: 28px; }
  .panel .flex.space-x-4,
  #vpnPanel .mt-6.flex { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel .flex.space-x-4 > *,
  #vpnPanel .mt-6.flex > * { margin-left: 0 !important; width: 100%; }
  .star-btn { font-size: 2rem; }
  #toastContainer { left: 10px; right: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   INDICATORS — Premium Product Cards (Purchase UI)
   ════════════════════════════════════════════════════════════════ */

.ind-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.ind-card:hover {
  border-color: rgba(212,175,55,0.30);
  box-shadow: 0 8px 32px rgba(212,175,55,0.10);
  transform: translateY(-2px);
}
.ind-card--featured {
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.15), 0 12px 40px rgba(212,175,55,0.12);
}
.ind-spark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 68px;
  height: 36px;
  pointer-events: none;
}
.ind-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ind-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.25);
  color: #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, background .2s, border-color .2s;
}
.ind-card:hover .ind-icon {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(212,175,55,0.16);
  border-color: rgba(212,175,55,0.4);
}
.ind-card--featured .ind-icon {
  background: rgba(212,175,55,0.15);
  border-color: rgba(212,175,55,0.38);
}
.ind-price-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #D4AF37;
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap;
}
.ind-price-period { font-size: 0.7rem; font-weight: 400; opacity: .7; }
.price-orig {
  font-size: .75em;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .5;
  margin-left: 4px;
}
.price-disc-badge {
  display: inline-block;
  background: rgba(239,68,68,.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 4px;
  font-size: .65em;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: .03em;
  vertical-align: middle;
}
.ind-price-orig { font-size: .72rem; }
.ind-price-badge--contact {
  color: #94a3b8;
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.2);
}
.ind-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  padding-right: 40px;
}
.ind-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
  margin-bottom: 10px;
}
.ind-inc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ind-inc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
}
.ind-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.ind-plats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ind-plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.ind-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ind-btn-detail {
  flex: 1;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: rgba(255,255,255,0.72);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ind-btn-detail:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ind-btn-buy { flex: 2; font-size: 0.8rem; padding: 8px 14px; }

/* ════════════════════════════════════════════════════════════════
   OSCILLATORS — Enhanced Accordion with Purchase UI
   ════════════════════════════════════════════════════════════════ */

.osc-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.osc-price-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #D4AF37;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 100px;
  padding: 2px 10px;
  margin-left: auto;
  white-space: nowrap;
}
.osc-inc-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.osc-inc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
}
.osc-plats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.osc-plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 5px;
  padding: 3px 8px;
}
.osc-range-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.osc-range-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.4);
}
.osc-range-val {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.osc-body-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.osc-buy-btn { font-size: 0.82rem; }

/* Tricolor gauge */
.osc-gauge-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.osc-gauge-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.45); white-space: nowrap; font-weight: 600; letter-spacing: .04em; }
.osc-gauge-track {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  display: flex;
  overflow: hidden;
}
.osc-gauge-os      { flex: 1; background: rgba(239,68,68,0.55); }
.osc-gauge-neutral { flex: 2; background: rgba(212,175,55,0.30); }
.osc-gauge-ob      { flex: 1; background: rgba(239,68,68,0.55); }

/* ════════════════════════════════════════════════════════════════
   PURCHASE MODAL
   ════════════════════════════════════════════════════════════════ */

.pm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .24s ease;
}
.pm-overlay--open { opacity: 1; }
.pm-box {
  background: rgba(14,16,24,0.97);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 22px;
  padding: 30px 28px 24px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,175,55,0.08);
  transform: scale(.96) translateY(14px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.3) transparent;
}
.pm-overlay--open .pm-box { transform: scale(1) translateY(0); }
.pm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pm-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pm-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-right: 36px;
  margin-bottom: 16px;
}
.pm-icon-circle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: rgba(212,175,55,0.11);
  border: 1px solid rgba(212,175,55,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
}
.pm-header-text { flex: 1; }
.pm-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.25;
}
.pm-price-display {
  font-size: 1.05rem;
  font-weight: 700;
  color: #D4AF37;
}
.pm-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0 0 18px;
}
.pm-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.62;
  margin: 0 0 18px;
}
.pm-section { margin-bottom: 18px; }
.pm-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(212,175,55,0.75);
  margin-bottom: 10px;
}
.pm-inc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pm-inc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
}
.pm-plats { display: flex; gap: 7px; flex-wrap: wrap; }
.pm-plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 5px 11px;
}
.pm-access-note {
  background: rgba(212,175,55,0.04);
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.pm-access-text {
  font-size: 0.81rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  margin: 0;
}
.pm-buy-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px 24px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  display: block;
  text-align: center;
}

/* ── Modal responsive ─────────────────────────────── */
@media (max-width: 540px) {
  .pm-box { padding: 22px 16px 18px; border-radius: 18px; }
  .pm-inc-list { grid-template-columns: 1fr; }
  .pm-header { flex-direction: column; gap: 10px; }
  .pm-price-display { font-size: 0.95rem; }
}

/* ── Overrides for purchase-UI additions ── */
.ind-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.osc-item.is-open .osc-body { max-height: 520px; }
.osc-item-name { min-width: 0; }

/* ── Modal shared elements (VPN / Bot / Tools) ────────────────── */
.pm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 5px;
  padding: 4px 10px;
  border: 1px solid transparent;
}
.pm-badge--blue {
  color: #60a5fa;
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.22);
}
.pm-badge--purple {
  color: #a78bfa;
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.22);
}

/* Plan summary table inside modal */
.pm-plan-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 14px;
}
.pm-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pm-plan-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.pm-plan-value {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  text-align: right;
}
.pm-plan-value--gold { color: #D4AF37; }

/* ── Category Tab Strip ─────────────────────────────────────────────── */
.cat-tab-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
  margin: 36px auto 28px;
  max-width: 820px;
}
.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 90px;
  max-width: 180px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.42);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .22s, background .22s, border-color .22s, box-shadow .22s;
  white-space: nowrap;
  justify-content: center;
  text-align: center;
}
.cat-tab:hover {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06);
}
.cat-tab--active {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.40);
  color: #D4AF37;
  box-shadow: 0 0 14px rgba(212,175,55,0.15), inset 0 0 10px rgba(212,175,55,0.04);
}
.cat-tab-icon { display: inline-flex; align-items: center; opacity: 0.8; }
.cat-tab-label { white-space: nowrap; }

/* ── Mobile: horizontal pill scroll bar ─────────────────────────────── */
@media (max-width: 640px) {
  .cat-tab-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    border-radius: 20px;
    padding: 5px 6px;
    margin: 24px 0 20px;
    max-width: 100%;
    gap: 4px;
    /* hide scrollbar visually but keep functional */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-tab-strip::-webkit-scrollbar { display: none; }
  .cat-tab {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
    padding: 9px 15px;
    font-size: 0.78rem;
    gap: 5px;
    border-radius: 999px;
  }
  .cat-tab-icon {
    display: inline-flex;
    opacity: 0.75;
    flex-shrink: 0;
  }
  .cat-tab-icon svg { width: 14px; height: 14px; }
  .cat-tab--active {
    box-shadow: 0 0 10px rgba(212,175,55,0.20), inset 0 0 8px rgba(212,175,55,0.06);
  }
}

/* ── Payment method selector ──────────────────────────────────────────── */
.pm-method-btn {
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 8px;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 72px;
  justify-content: center;
}
.pm-method-btn:hover {
  border-color: rgba(212,175,55,0.30);
  background: rgba(212,175,55,0.04);
}
.pm-method-btn.active-method {
  border-color: rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.20) inset;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLS SECTION — Paid tool plan cards
   ═══════════════════════════════════════════════════════════════════════ */

/* Section divider heading */
.tp-section-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.tp-section-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.tp-section-label{font-size:.68rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}

/* Paid tool grid */
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:12px}

/* Paid tool card */
.tp-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:22px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  position:relative;
  overflow:hidden;
}
.tp-card::after{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at top left,rgba(52,211,153,.05) 0%,transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.tp-card:hover{border-color:rgba(52,211,153,.3);box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 1px rgba(52,211,153,.08);transform:translateY(-3px)}
.tp-card:hover::after{opacity:1}

/* Card top: icon + info */
.tp-card-top{display:flex;align-items:flex-start;gap:14px}
.tp-card-icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);
  color:#34d399;display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.tp-card:hover .tp-card-icon{transform:scale(1.08) rotate(-4deg)}
.tp-card-info{flex:1;min-width:0}
.tp-title{font-size:.95rem;font-weight:700;color:#f0f0f0;margin:0 0 5px;line-height:1.3}
.tp-desc{font-size:.77rem;color:#6b7280;margin:0;line-height:1.55}

/* Plan pills */
.tp-plans{display:flex;flex-wrap:wrap;gap:7px}
.tp-plan-pill{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:#9ca3af;font-size:.76rem;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
  position:relative;
}
.tp-plan-pill--sel{
  border-color:rgba(52,211,153,.5);
  background:rgba(52,211,153,.1);
  color:#f0f0f0;
}
.tp-plan-name{font-weight:600}
.tp-plan-price{font-weight:700;color:#34d399;margin-left:2px}
.tp-plan-pill--sel .tp-plan-price{color:#34d399}
.tp-plan-orig{font-size:.68rem;color:#6b7280;text-decoration:line-through;margin-left:2px}
.tp-pop-badge{
  font-size:.6rem;font-weight:800;background:#D4AF37;color:#000;
  border-radius:4px;padding:1px 5px;letter-spacing:.04em;margin-right:2px;
}

/* Feature list */
.tp-feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tp-feat-item{display:flex;align-items:center;gap:7px;font-size:.77rem;color:#9ca3af}
.tp-chk{flex-shrink:0}

/* CTA */
.tp-cta-btn{
  align-self:flex-start;margin-top:auto;
  background:linear-gradient(135deg,#E6C76A,#D4AF37);color:#000;
  font-weight:700;font-size:.8rem;border:none;cursor:pointer;
  border-radius:10px;padding:9px 20px;
  letter-spacing:.03em;transition:opacity .18s,transform .1s;
}
.tp-cta-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLS SECTION — Free calculator cards (ftc)
   ═══════════════════════════════════════════════════════════════════════ */

/* Free calculators notice */
.ftc-notice{
  display:flex;align-items:center;gap:8px;
  font-size:.8rem;color:#9ca3af;
  background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);
  border-radius:10px;padding:10px 14px;margin-bottom:22px;
}
.ftc-notice strong{color:#4ade80}

/* Grid */
.ftc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}

/* Card */
.ftc-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  position:relative;
}
.ftc-card:hover{
  border-color:rgba(255,255,255,.15);
  box-shadow:0 10px 36px rgba(0,0,0,.3);
  transform:translateY(-2px);
}

/* Colored accent stripe at top */
.ftc-accent{
  height:3px;
  width:100%;
  background:var(--ftc-clr,#D4AF37);
  opacity:.8;
}

/* FREE badge */
.ftc-badge-free{
  position:absolute;top:16px;right:14px;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;
  background:rgba(74,222,128,.15);color:#4ade80;
  border:1px solid rgba(74,222,128,.3);border-radius:5px;
  padding:2px 7px;text-transform:uppercase;
}

/* Card header: icon + text row */
.ftc-header{display:flex;align-items:flex-start;gap:14px;padding:18px 18px 0}
.ftc-icon{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  border:1px solid;display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.ftc-card:hover .ftc-icon{transform:scale(1.08) rotate(-3deg)}
.ftc-header-text{flex:1;min-width:0}
.ftc-title{font-size:.93rem;font-weight:700;color:#f0f0f0;margin:0 0 5px;line-height:1.3}
.ftc-desc{font-size:.76rem;color:#6b7280;margin:0;line-height:1.5}

/* Divider inside card */
.ftc-divider{height:1px;background:rgba(255,255,255,.07);margin:14px 18px 0}

/* Input fields area */
.ftc-inputs{display:flex;flex-direction:column;gap:10px;padding:14px 18px 0}
.ftc-field{display:flex;flex-direction:column;gap:5px}
.ftc-label{
  font-size:.66rem;font-weight:600;color:#6b7280;
  text-transform:uppercase;letter-spacing:.1em;
}
.ftc-input,.ftc-select{
  width:100%;background:rgba(0,0,0,.35);
  border:1.5px solid rgba(255,255,255,.09);border-radius:10px;
  padding:10px 13px;color:#e8e8e8;font-size:.83rem;
  font-family:inherit;outline:none;box-sizing:border-box;
  transition:border-color .18s,box-shadow .18s;
  appearance:none;-webkit-appearance:none;
}
.ftc-input::placeholder{color:#3d3d3d}
.ftc-input:focus,.ftc-select:focus{
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 3px rgba(212,175,55,.08);
}
.ftc-select option{background:#111}

/* ── Custom icon dropdown (currency pair / account currency) ── */
.ftc-cdd{position:relative}
.ftc-cdd-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.09);border-radius:10px;
  padding:9px 12px;color:#e8e8e8;font-size:.83rem;font-family:inherit;
  cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s;
}
.ftc-cdd-btn:hover,.ftc-cdd--open .ftc-cdd-btn{
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 3px rgba(212,175,55,.08);
}
.ftc-cdd-icon{flex-shrink:0;display:flex;align-items:center}
.ftc-cdd-icon img,.ftc-cdd-icon svg{border-radius:50%;display:block}
.ftc-cdd-label{flex:1;font-size:.83rem;color:#e8e8e8;text-align:left}
.ftc-cdd-chv{flex-shrink:0;color:rgba(255,255,255,.4);transition:transform .2s}
.ftc-cdd--open .ftc-cdd-chv{transform:rotate(180deg)}

.ftc-cdd-list{
  position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:200;
  background:#161616;border:1px solid rgba(212,175,55,.22);border-radius:12px;
  overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.7);
  animation:ftc-cdd-in .15s ease;
}
@keyframes ftc-cdd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.ftc-cdd-opt{
  display:flex;align-items:center;gap:11px;padding:10px 14px;
  cursor:pointer;transition:background .14s;
}
.ftc-cdd-opt:hover{background:rgba(255,255,255,.06)}
.ftc-cdd-opt--sel{background:rgba(212,175,55,.08)}
.ftc-cdd-opt--sel .ftc-cdd-opt-label{color:#D4AF37}
.ftc-cdd-opt-icon{flex-shrink:0;display:flex;align-items:center}
.ftc-cdd-opt-icon img,.ftc-cdd-opt-icon svg{border-radius:50%;display:block}
.ftc-cdd-opt-label{font-size:.82rem;color:#c8c8c8}

/* ── Number inputs with prefix badge ($ / % / lots) ── */
.ftc-input-wrap{
  display:flex;align-items:center;
  background:rgba(0,0,0,.35);
  border:1.5px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.ftc-input-wrap:focus-within{
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 3px rgba(212,175,55,.08);
}
.ftc-input-pfx{
  padding:0 8px 0 12px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:rgba(212,175,55,.65);flex-shrink:0;line-height:1;
  border-right:1px solid rgba(255,255,255,.07);
  white-space:nowrap;
}
.ftc-input--pfx{
  border:none!important;background:transparent!important;
  box-shadow:none!important;padding-left:10px!important;flex:1;
}
.ftc-input--pfx:focus{border-color:transparent!important;box-shadow:none!important}

/* Calculate button */
.ftc-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:14px 18px 0;
  padding:11px 0;border-radius:11px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ftc-clr,#D4AF37) 70%,#fff 30%),var(--ftc-clr,#D4AF37));
  color:#000;font-size:.83rem;font-weight:700;
  border:none;cursor:pointer;letter-spacing:.03em;
  transition:opacity .18s,transform .15s;
}
.ftc-btn:hover{opacity:.88;transform:scale(1.02)}

/* Result display */
.ftc-result{
  margin:12px 18px 18px;
  padding:12px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:.85rem;font-weight:600;color:#e0e0e0;
  text-align:center;min-height:42px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.ftc-result:not(.ftc-result--empty){
  background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.2);
}
.ftc-result-placeholder{color:#3a3a3a;font-size:.75rem;font-weight:400}
.ftc-result-value{color:#e0e0e0}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.co-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:960;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s}
.co-overlay--open{opacity:1}
.co-box{background:linear-gradient(160deg,#111114,#0c0c0f);border:1px solid rgba(212,175,55,.22);border-radius:20px;width:100%;max-width:490px;max-height:92vh;overflow-y:auto;padding:28px 26px 22px;position:relative;transform:scale(.96) translateY(12px);transition:transform .3s cubic-bezier(.22,1,.36,1);scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.2) transparent}
.co-overlay--open .co-box{transform:scale(1) translateY(0)}
.co-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.co-close:hover{background:rgba(255,255,255,.14);color:#fff}

/* product strip */
.co-product-strip{display:flex;align-items:center;justify-content:space-between;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.13);border-radius:12px;padding:11px 14px;margin-bottom:18px}
.co-product-label{font-size:.68rem;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.co-product-name{font-size:.88rem;font-weight:700;color:#fff}
.co-product-price{font-size:1.15rem;font-weight:900;color:#D4AF37;white-space:nowrap}
.co-product-price span{font-size:.7rem;font-weight:400;color:#9ca3af}

/* step indicator */
.co-steps{display:flex;align-items:center;margin-bottom:22px;padding:0 2px}
.co-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.co-step-dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#6b7280;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s,color .3s}
.co-step--active .co-step-dot{border-color:#D4AF37;background:rgba(212,175,55,.14);color:#D4AF37}
.co-step--done .co-step-dot{border-color:#4ade80;background:rgba(74,222,128,.12);color:#4ade80}
.co-step-lbl{font-size:.62rem;color:#6b7280;white-space:nowrap}
.co-step--active .co-step-lbl{color:#D4AF37}
.co-step--done .co-step-lbl{color:#4ade80}
.co-step-line{flex:1;height:1px;background:rgba(255,255,255,.1);margin:0 6px;margin-bottom:14px;transition:background .3s}
.co-step-line--done{background:rgba(74,222,128,.4)}

/* ── Checkout form fields ─────────────────────────────────────── */
.co-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:480px){.co-field-row{grid-template-columns:1fr}}
.co-field{display:flex;flex-direction:column;gap:0}

/* Label */
.co-label{
  display:block;
  font-size:.67rem;
  font-weight:600;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:7px;
  transition:color .2s;
}
.co-field:focus-within .co-label,
.co-coupon-row:focus-within .co-label{color:#D4AF37}

.co-optional{font-weight:400;color:#4b5563;text-transform:none;letter-spacing:0}

/* Input wrapper (provides icon + border in one container) */
.co-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.co-input-wrap:focus-within{
  border-color:rgba(212,175,55,.55);
  background:rgba(212,175,55,.035);
  box-shadow:0 0 0 3px rgba(212,175,55,.1), inset 0 1px 0 rgba(212,175,55,.06);
}
.co-input-wrap--error{
  border-color:rgba(239,68,68,.6) !important;
  background:rgba(239,68,68,.04) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.1) !important;
  animation:co-shake .35s ease;
}
.co-input-wrap--coupon{border-radius:12px 0 0 12px;border-right:none}
@keyframes co-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}

/* Prefix icon inside wrapper */
.co-input-icon{
  flex-shrink:0;
  margin-left:13px;
  color:#4b5563;
  transition:color .2s;
  pointer-events:none;
}
.co-input-wrap:focus-within .co-input-icon{color:#D4AF37}
.co-input-wrap--error .co-input-icon{color:#ef4444}

/* The actual input */
.co-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#f3f4f6;
  font-size:.875rem;
  font-weight:500;
  font-family:inherit;
  padding:13px 14px 13px 10px;
  width:100%;
  box-sizing:border-box;
  caret-color:#D4AF37;
}
.co-input::placeholder{color:#4b5563;font-weight:400}
.co-input:-webkit-autofill,
.co-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0e0e11 inset;
  -webkit-text-fill-color:#f3f4f6;
  caret-color:#D4AF37;
}

/* Inline field error message */
.co-field-err{
  font-size:.7rem;
  color:#ef4444;
  margin-top:5px;
  padding-left:2px;
  display:flex;
  align-items:center;
  gap:4px;
  animation:co-fadein .15s ease;
}
.co-field-err::before{content:'';width:3px;height:3px;border-radius:50%;background:#ef4444;display:inline-block;flex-shrink:0}
@keyframes co-fadein{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

/* Coupon row */
.co-coupon-row{margin-bottom:16px}
.co-coupon-wrap{display:flex;gap:0;align-items:stretch}
.co-coupon-btn{
  background:rgba(212,175,55,.08);
  border:1.5px solid rgba(212,175,55,.25);
  border-left:none;
  color:#D4AF37;
  padding:0 18px;
  border-radius:0 12px 12px 0;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  letter-spacing:.04em;
  transition:background .15s,color .15s,border-color .15s;
  flex-shrink:0;
}
.co-coupon-btn:hover{background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.45)}
.co-coupon-wrap:focus-within .co-coupon-btn{border-color:rgba(212,175,55,.55)}
.co-coupon-ok{color:#4ade80;font-size:.72rem;margin-top:5px;display:flex;align-items:center;gap:4px}
.co-coupon-ok::before{content:'✓';font-weight:700}
.co-coupon-checking{color:#D4AF37;font-size:.72rem;margin-top:5px;display:block}

/* gateways */
.co-gw-section{margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.co-gw-lbl{font-size:.67rem;color:#6b7280;margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.co-gateways{display:flex;gap:10px;flex-wrap:wrap}
.co-gw-opt{cursor:pointer}
.co-gw-opt input[type=radio]{display:none}
.co-gw-card{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(255,255,255,.035);transition:border-color .2s,background .2s;min-width:140px;cursor:pointer;position:relative}
.co-gw-opt input:checked+.co-gw-card{border-color:rgba(212,175,55,.6);background:rgba(212,175,55,.09)}
.co-gw-name{font-size:.82rem;font-weight:600;color:#e5e7eb;flex:1}
.co-gw-check{opacity:0;transition:opacity .2s;flex-shrink:0}
.co-gw-opt input:checked+.co-gw-card .co-gw-check{opacity:1}
.co-empty-gw{font-size:.82rem;color:#9ca3af;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:9px;text-align:center}

/* footer */
.co-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.co-footer--center{justify-content:center;flex-wrap:wrap;gap:10px}
.co-secure{font-size:.67rem;color:#6b7280;display:flex;align-items:center;gap:5px}
.co-continue{background:linear-gradient(135deg,#E6C76A,#D4AF37);color:#000;font-weight:800;font-size:.85rem;padding:.62rem 1.5rem;border-radius:.65rem;border:none;cursor:pointer;transition:opacity .2s,transform .1s;letter-spacing:.02em}
.co-continue:hover:not(:disabled){opacity:.9;transform:scale(1.02)}
.co-continue:disabled,.co-continue--disabled{opacity:.35;cursor:not-allowed}
.co-continue--done{background:linear-gradient(135deg,#4ade80,#22c55e)}
.co-back{background:none;border:none;color:#9ca3af;font-size:.82rem;cursor:pointer;padding:.4rem .8rem;transition:color .15s}
.co-back:hover{color:#fff}

/* verify step */
.co-verify-body{text-align:center;padding:12px 0 4px}
.co-verify-icon{font-size:2.8rem;margin-bottom:10px;line-height:1}
.co-verify-title{font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 6px}
.co-verify-sub{font-size:.82rem;color:#9ca3af;margin:0 0 22px}
.co-code-wrap{margin:0 auto 12px;max-width:220px}
.co-code-input{width:100%;text-align:center;font-size:2rem;font-weight:900;letter-spacing:.45em;background:rgba(255,255,255,.04);border:2px solid rgba(212,175,55,.3);border-radius:12px;color:#D4AF37;padding:14px 8px;transition:border-color .2s;box-sizing:border-box}
.co-code-input:focus{border-color:#D4AF37;outline:none;box-shadow:0 0 0 3px rgba(212,175,55,.1)}
.co-verify-msg{min-height:18px;font-size:.78rem;margin-top:4px}
.co-msg-err{color:#ef4444}
.co-msg-info{color:#60a5fa}
.co-resend{background:none;border:none;color:#6b7280;font-size:.75rem;cursor:pointer;padding:6px 0;display:block;margin:8px auto 0;transition:color .15s}
.co-resend:hover{color:#D4AF37}

/* crypto step */
.co-crypto-header{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.12);border-radius:12px;margin-bottom:14px}
.co-crypto-amt{font-size:1.4rem;font-weight:900;color:#D4AF37}
.co-crypto-net{font-size:.72rem;color:#9ca3af;margin-top:3px}
.co-crypto-warning{font-size:.76rem;color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:8px;padding:10px 12px;margin-bottom:14px;line-height:1.5}
.co-wallet-section{margin-bottom:12px}
.co-wallet-label{font-size:.69rem;color:#9ca3af;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.co-wallet-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px}
.co-wallet-addr{font-size:.76rem;color:#e5e7eb;font-family:monospace;word-break:break-all;flex:1;line-height:1.5}
.co-copy-btn{background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.25);color:#D4AF37;padding:5px 12px;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.co-copy-btn:hover{background:rgba(212,175,55,.25)}
.co-invoice-ref{font-size:.71rem;color:#6b7280;text-align:center;margin-bottom:14px}
.co-crypto-steps{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.co-cs-item{display:flex;align-items:flex-start;gap:10px;font-size:.79rem;color:#9ca3af;line-height:1.5}
.co-cs-num{min-width:22px;height:22px;border-radius:50%;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.28);color:#D4AF37;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}

/* error / loading */
.co-error-banner{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:8px;color:#ef4444;font-size:.8rem;padding:10px 12px;margin-bottom:12px}
.co-loading{text-align:center;padding:44px 20px}
.co-spin{width:32px;height:32px;border:2px solid rgba(212,175,55,.2);border-top-color:#D4AF37;border-radius:50%;animation:co-spin .65s linear infinite;margin:0 auto 14px}
@keyframes co-spin{to{transform:rotate(360deg)}}
.co-loading p{color:#6b7280;font-size:.82rem}

/* ═══════════════════════════════════════════════════════════════════════
   ENHANCED CRYPTO CONVERTER
   ═══════════════════════════════════════════════════════════════════════ */
.xconv-wrap{background:linear-gradient(150deg,rgba(212,175,55,.07),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.18);border-radius:20px;padding:28px 26px 22px;margin-bottom:28px}
.xconv-title{font-size:1rem;font-weight:800;color:#fff;margin:0 0 4px}
.xconv-sub{font-size:.75rem;color:#9ca3af;margin:0 0 20px}
.xconv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin-bottom:14px}
@media(max-width:520px){.xconv-row{grid-template-columns:1fr;gap:8px}}
.xconv-col{display:flex;flex-direction:column;gap:5px}
.xconv-col label{font-size:.68rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.xconv-picker{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 11px;transition:border-color .2s}
.xconv-picker:focus-within{border-color:rgba(212,175,55,.4)}
.xconv-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;overflow:hidden}
.xconv-select{flex:1;background:none;border:none;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}
.xconv-select option{background:#141414;color:#fff}
.xconv-amount{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 11px;color:#fff;font-size:1rem;font-weight:700;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}
.xconv-amount:focus{border-color:rgba(212,175,55,.4)}
.xconv-swap-col{display:flex;align-items:center;justify-content:center;padding-bottom:0}
.xconv-swap{width:38px;height:38px;border-radius:50%;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.25);color:#D4AF37;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .3s;flex-shrink:0}
.xconv-swap:hover{background:rgba(212,175,55,.2);transform:rotate(180deg)}
.xconv-btn{width:100%;padding:.7rem 1rem;background:linear-gradient(135deg,#E6C76A,#D4AF37);color:#000;font-weight:800;font-size:.85rem;border:none;border-radius:10px;cursor:pointer;transition:opacity .2s,transform .1s;margin-top:4px;letter-spacing:.02em}
.xconv-btn:hover{opacity:.9;transform:scale(1.01)}
.xconv-result{margin-top:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;min-height:56px;display:flex;align-items:center;gap:12px}
.xconv-result-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.xconv-result-val{font-size:1.35rem;font-weight:900;color:#D4AF37;line-height:1}
.xconv-result-sub{font-size:.7rem;color:#6b7280;margin-top:3px}
.xconv-result-empty{color:#6b7280;font-size:.82rem;width:100%}
.xconv-rates{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.xconv-rate-chip{font-size:.68rem;color:#9ca3af;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:4px 10px}
.xconv-rate-chip strong{color:#D4AF37}

/* ══════════════════════════════════════════════════════════════
   XCC — Custom icon dropdown for Currency Converter
   ══════════════════════════════════════════════════════════════ */
.xcc-cdd{position:relative}
.xcc-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:9px 11px;color:#fff;
  cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .2s,box-shadow .2s;
}
.xcc-btn:hover,.xcc-open .xcc-btn{
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 3px rgba(212,175,55,.07);
}
.xcc-btn-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.xcc-btn-icon img,.xcc-btn-icon svg{border-radius:50%;display:block}
.xcc-btn-text{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
.xcc-btn-code{font-size:.87rem;font-weight:700;color:#fff;line-height:1.2}
.xcc-btn-name{font-size:.66rem;color:#9ca3af;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcc-chv{flex-shrink:0;color:rgba(255,255,255,.35);transition:transform .2s}
.xcc-open .xcc-chv{transform:rotate(180deg)}

.xcc-list{
  position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:300;
  background:#161616;border:1px solid rgba(212,175,55,.22);border-radius:14px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.75);
  animation:xcc-in .14s ease;
}
@keyframes xcc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.xcc-search-wrap{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.3);flex-shrink:0;
}
.xcc-search{
  flex:1;background:none;border:none;outline:none;
  color:#fff;font-size:.83rem;font-family:inherit;
}
.xcc-search::placeholder{color:rgba(255,255,255,.28)}

.xcc-opts{
  max-height:260px;overflow-y:auto;overscroll-behavior:contain;
}
.xcc-opts::-webkit-scrollbar{width:4px}
.xcc-opts::-webkit-scrollbar-track{background:transparent}
.xcc-opts::-webkit-scrollbar-thumb{background:rgba(212,175,55,.25);border-radius:4px}

.xcc-group-label{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.28);padding:10px 12px 4px;
}
.xcc-opt{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  cursor:pointer;transition:background .12s;
}
.xcc-opt:hover{background:rgba(255,255,255,.06)}
.xcc-opt--sel{background:rgba(212,175,55,.08)}
.xcc-opt-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.xcc-opt-icon img,.xcc-opt-icon svg{border-radius:50%;display:block}
.xcc-opt-code{font-size:.78rem;font-weight:700;color:#e8e8e8;width:44px;flex-shrink:0}
.xcc-opt--sel .xcc-opt-code{color:#D4AF37}
.xcc-opt-name{font-size:.74rem;color:#9ca3af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}