/* ==========================================================================
   Luxee Helps — Soft Theme (v2)
   Light lavender palette with faint gradients. Loaded after main/layout/
   components.css, so it only overrides tokens and a few shared surfaces.
   Brand tokens keep their old names (--color-gold*) so every existing
   article picks up the new accent without edits.
   ========================================================================== */

[data-theme="light"] {
  --color-gold: #6355e0;
  --color-gold-light: #a59cf3;
  --color-gold-dark: #4f41c9;

  --color-accent-blue: #3f7cf4;
  --color-accent-orange: #ef8a4a;

  --color-bg: #f7f7fc;
  --color-bg-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f3f2fb;
  --color-surface-3: #e9e7f7;

  --color-text-main: #4a4e69;
  --color-text-bold: #1c1d3a;
  --color-text-muted: #7c809f;
  --color-border: #e8e6f4;

  --shadow-sm: 0 1px 2px rgba(40, 35, 110, 0.05);
  --shadow-md: 0 6px 18px -8px rgba(40, 35, 110, 0.14);
  --shadow-lg: 0 18px 40px -18px rgba(40, 35, 110, 0.22);

  --color-success: #16a37b;
  --color-warning: #e09a1a;
  --color-danger: #e05561;

  --color-header-bg: rgba(255, 255, 255, 0.78);
  --color-card-hover-bg: rgba(99, 85, 224, 0.04);

  --soft-tint: #efedfd;
  --soft-gradient:
    radial-gradient(900px 420px at 12% -10%, rgba(165, 156, 243, 0.28), transparent 70%),
    radial-gradient(800px 380px at 92% 0%, rgba(120, 180, 255, 0.22), transparent 70%),
    radial-gradient(700px 360px at 60% 110%, rgba(255, 190, 160, 0.14), transparent 70%);
}

[data-theme="dark"] {
  --color-gold: #9d93ff;
  --color-gold-light: #c4beff;
  --color-gold-dark: #8378f5;
  --color-accent-blue: #7aa6ff;

  --color-bg: #0e0f1d;
  --color-bg-white: #15162a;
  --color-surface: #15162a;
  --color-surface-2: #1d1f38;
  --color-surface-3: #262947;

  --color-text-main: #a9adcb;
  --color-text-bold: #f2f2fb;
  --color-text-muted: #6f7397;
  --color-border: #262947;

  --color-header-bg: rgba(14, 15, 29, 0.8);
  --color-card-hover-bg: rgba(157, 147, 255, 0.06);

  --soft-tint: #22234a;
  --soft-gradient:
    radial-gradient(900px 420px at 12% -10%, rgba(125, 110, 255, 0.18), transparent 70%),
    radial-gradient(800px 380px at 92% 0%, rgba(80, 140, 255, 0.12), transparent 70%);
}

/* ---- Global surfaces ---------------------------------------------------- */
body {
  background: var(--soft-gradient), var(--color-bg);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.site-header {
  background: var(--color-header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-logo { color: var(--color-text-bold); letter-spacing: 0.02em; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-member-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-bold);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.header-member-link:hover { border-color: var(--color-gold); color: var(--color-gold-dark); }

.search-input {
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.search-input:focus {
  background: var(--color-surface);
  border-color: var(--color-gold-light);
  box-shadow: 0 0 0 4px rgba(99, 85, 224, 0.12);
}
.search-results {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* Cards & callouts used across category pages and articles */
.category-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.category-card:hover {
  border-color: var(--color-gold-light);
  box-shadow: var(--shadow-md);
}
.category-icon {
  background: var(--soft-tint);
  color: var(--color-gold);
  border: 0;
}

.alert-info {
  background: var(--soft-tint);
  border-color: rgba(99, 85, 224, 0.18);
}

.hero-section {
  background: transparent;
  border-bottom: 0;
}

/* Footer */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* ---- Telegram info modal (shared, triggered by [data-open-telegram]) ---- */
.lx-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(28, 29, 58, 0.36);
  backdrop-filter: blur(4px);
}
.lx-modal.is-open { display: flex; }
.lx-modal-box {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.lx-modal-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #e8f4fd;
  color: #2a9fd8;
}
.lx-modal-box h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--color-text-bold); }
.lx-modal-box p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.6; color: var(--color-text-main); }
.lx-modal-steps {
  margin: 0 0 20px;
  padding: 14px 16px 14px 34px;
  border-radius: 12px;
  background: var(--color-surface-2);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-main);
}
.lx-modal-actions { display: flex; gap: 10px; }
.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.lx-btn-primary { background: var(--color-gold); color: #fff; }
.lx-btn-primary:hover { background: var(--color-gold-dark); color: #fff; }
.lx-btn-ghost { background: transparent; color: var(--color-text-bold); border-color: var(--color-border); }
.lx-btn-ghost:hover { border-color: var(--color-gold-light); }

@media (max-width: 768px) {
  .header-member-link { display: none; }
}

/* Product sidebar card on category pages: readable outline button */
.btn-sidebar-sales { color: var(--color-gold-dark) !important; border-color: var(--color-gold-light); background-color: transparent; }
.btn-sidebar-sales:hover { background-color: var(--soft-tint); color: var(--color-gold-dark) !important; }

/* ==========================================================================
   Article reading layout (all docs pages)
   ========================================================================== */
.docs-content {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 22px;
  box-shadow: none;
}
.article-content { font-size: 1rem; line-height: 1.75; color: var(--color-text-main); }
.article-content > * + * { margin-top: 1rem; }
.article-content h1 {
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text-bold);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
.article-content h2 {
  margin-top: 2.75rem;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.35rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-bold);
}
.article-content h3 {
  margin-top: 1.75rem;
  font-size: 1.08rem;
  color: var(--color-text-bold);
}
.article-content p,
.article-content li { font-size: 1rem; }
.article-content ul,
.article-content ol { padding-left: 1.3rem; }
.article-content li + li { margin-top: 0.4rem; }
.article-content .lead {
  font-size: 1.08rem;
  color: var(--color-text-bold);
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--color-surface-2);
}

/* Steps: numbered cards */
.article-content ol.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 10px; }
.article-content ol.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 14px 16px 14px 56px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}
.article-content ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soft-tint);
  color: var(--color-gold-dark);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Callouts */
.article-content .alert { border-radius: 14px; padding: 1rem 1.25rem; }
.article-content .alert p,
.article-content .alert li { font-size: 0.95rem; }
.alert-warning-soft {
  display: flex;
  gap: 12px;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: #fff7ea;
  border: 1px solid #f6dfb5;
  color: #6b4d12;
}
[data-theme="dark"] .alert-warning-soft { background: #2a2414; border-color: #4a3d1c; color: #f0d9a4; }

/* Screenshots */
.image-zoom-container { margin: 1.75rem 0; }
.image-zoom-container img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-2);
}
.image-zoom-container.is-phone img {
  width: auto;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 28px;
  border: 6px solid #1c1d3a;
}
.image-zoom-container.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.image-zoom-container.is-pair img { max-width: 100%; }
.image-zoom-container.is-pair .img-caption { grid-column: 1 / -1; }
.img-caption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; font-style: normal; }

/* Tables: let text wrap instead of forcing a wide scroll */
.article-content .table-responsive { border-radius: 14px; }
.article-content .data-table { min-width: 0 !important; width: 100%; }
.article-content .data-table th,
.article-content .data-table td { font-size: 0.92rem; vertical-align: top; }

/* Next chapter + FAQ spacing */
.next-chapter-box { border-radius: 18px; }
.faq-section { margin-top: 3rem; }

@media (max-width: 640px) {
  .image-zoom-container.is-pair { grid-template-columns: 1fr; }
  .image-zoom-container.is-phone img { max-width: 240px; }
}

/* Category hub: numbered article list */
.hub-list { display: grid; gap: 10px; margin-top: 1.5rem; }
.hub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hub-card:hover { border-color: var(--color-gold-light); box-shadow: var(--shadow-md); }
.hub-num {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--soft-tint);
  color: var(--color-gold-dark);
  font-size: 0.85rem;
  font-weight: 700;
}
.hub-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hub-title { font-weight: 600; color: var(--color-text-bold); }
.hub-desc { font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); }
.hub-arrow { color: var(--color-text-muted); }
.hub-card:hover .hub-arrow { color: var(--color-gold); }
.product-card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }