/* JayLex Studio — production contrast and geometry corrections, 2026-10-09.
   Application visibility, selection classes and event handlers stay native. */

html body.light-theme {
  --studio-bg: #e9edf6;
  --studio-sidebar: #fcfcff;
  --studio-surface: #ffffff;
  --studio-raised: #eae4f7;
  --studio-input: #f1f3fa;
  --studio-ink: #1c2438;
  --studio-secondary: #4b5873;
  --studio-muted: #59657e;
  --studio-accent: #6238b6;
  --studio-accent-soft: #e9e0fa;
  --studio-line: #bac3d6;
  --studio-line-strong: #8c6abf;
  --studio-shadow: 0 12px 32px rgba(36,42,72,.12);
  --studio-glow: 0 8px 26px rgba(89,56,145,.15);
}
html:has(body.light-theme .app-shell) { background: #e9edf6; }
html body.light-theme .main-content {
  background: radial-gradient(ellipse 75% 45% at 100% 0,rgba(122,88,183,.08),transparent 70%),var(--studio-bg) !important;
}
html body.light-theme .main-content :is(.service-card,.sub-item,.stat-card,.neon-stat-card,.settings-section,.channel-option,.sc-info-card,.neon-chart-container,.category-chart-card) {
  box-shadow: 0 4px 16px rgba(37,45,75,.075) !important;
  border-color: var(--studio-line) !important;
}
html body.light-theme .main-content :is(.service-card,.sub-item):hover,
html body.light-theme .main-content .sub-item.expanded {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 0 0 1px var(--studio-accent),0 7px 22px rgba(89,56,145,.14) !important;
}

/* The old sticky catalogue header extended a blur/white mask over the new
   workspace heading. The page now has one scroll container and normal flow. */
html body .main-content .services-header {
  position: relative !important; top: auto !important; z-index: auto !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 4px 0 23px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .main-content .services-header::before,
html body .main-content .services-header::after {
  content: none !important; display: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .studio-view-head { position: relative; overflow: visible; }
html body .studio-view-head h1 { line-height: 1.2 !important; }
html body .main-content .service-card-info :is(h3,h4) {
  color: var(--studio-ink) !important;
}
html body .main-content .service-card-price small {
  color: var(--studio-secondary) !important; line-height: 1.5;
}
html body .main-content .service-card-arrow {
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid var(--studio-line-strong) !important;
}

/* Give every active control a filled surface and a visible outline. */
html body.light-theme .sidebar .nav-item.active,
html body.light-theme .main-content :is(.filter-chip.active,.category-filter-btn.active,.country-btn.active,.analytics-tab.active,.trend-btn.active,.font-chip.active),
html body.light-theme #modal :is(.tag-chip,.tag-selector-item,.tag-selector-btn).selected {
  background: #e4d8fa !important; color: #51289d !important;
  border-color: #8056bc !important;
  box-shadow: inset 0 0 0 1px #8056bc !important;
}
html body .modal-content .plan-item {
  position: relative; padding-inline-start: 42px !important;
  color: var(--studio-ink) !important; gap: 12px;
}
html body .modal-content .plan-item::before {
  content: ""; position: absolute; inset-inline-start: 14px; top: 18px;
  width: 17px; height: 17px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--studio-line-strong); background: var(--studio-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
}
html body #service-detail-modal .modal-content .plan-item.selected {
  background: var(--studio-accent-soft) !important; border-color: var(--studio-accent) !important;
  box-shadow: inset 0 0 0 1px var(--studio-accent) !important;
}
html body .modal-content .plan-item.selected::before {
  content: "\2713"; background: var(--studio-accent); color: #fff; border-color: var(--studio-accent);
}
html body.light-theme #service-detail-modal .modal-content .plan-item.selected {
  background: #e4d8fa !important; border-color: #8056bc !important;
  box-shadow: inset 0 0 0 1px #8056bc !important;
}
html body .modal-content .plan-item-info h4 { overflow-wrap: anywhere; line-height: 1.45; }
html body .modal-content .plan-item-price .amount {
  color: #59dec9 !important; background: none !important;
  -webkit-text-fill-color: currentColor !important; line-height: 1.35;
}
html body.light-theme .modal-content .plan-item-price .amount { color: #007064 !important; }
html body.light-theme #service-detail-modal .modal-content {
  background: #fff !important; border-color: var(--studio-line-strong) !important;
  box-shadow: 0 20px 70px rgba(35,30,65,.23) !important;
}
/* service-detail-modal is also the fullscreen .modal overlay, not a card. */
html body #service-detail-modal.modal {
  background: rgba(5,10,25,.62) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
html body.light-theme #service-detail-modal.modal { background: rgba(36,43,64,.34) !important; }

/* Setting dimensions alone left the original inline icon at the corner. */
html body .main-content :is(.stat-icon,.stat-icon-wrapper) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 38px; padding: 0 !important; box-sizing: border-box;
  line-height: 1 !important; text-align: center !important; opacity: 1 !important;
}
html body .main-content :is(.stat-icon,.stat-icon-wrapper) > i {
  display: block !important; margin: 0 !important; padding: 0 !important;
  width: 1em; height: 1em; line-height: 1 !important;
}
html body .main-content :is(.stat-icon,.stat-icon-wrapper) > i::before {
  display: block; line-height: 1 !important;
}

/* The collapsed rail uses two independent rows for its toggle and J mark. */
@media(min-width:901px) {
  html body .app-shell .sidebar.collapsed { padding-top: 18px !important; }
  html body .app-shell .sidebar.collapsed .collapse-sidebar-btn {
    position: relative !important; inset: auto !important; transform: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 38px; width: 38px !important; height: 38px !important;
    margin: 0 auto 14px !important; padding: 0 !important;
  }
  html body .app-shell .sidebar.collapsed .collapse-sidebar-btn > i {
    display: block !important; line-height: 1 !important; transform: rotate(180deg);
  }
  html body .app-shell .sidebar.collapsed .brand {
    min-height: 44px; flex: none; width: 100%; margin: 0 0 24px !important;
    padding: 0 !important; justify-content: center !important;
  }
  html body .app-shell .sidebar.collapsed .brand .logo-icon { margin: 0 !important; }
}
@media(max-width:600px) {
  html body .modal-content .plan-item { gap: 8px; padding-inline-start: 38px !important; }
  html body .modal-content .plan-item::before { inset-inline-start: 12px; width: 16px; height: 16px; }
  html body .modal-content .plan-item-price .amount { font-size: 19px !important; white-space: nowrap; }
}
@media(max-width:900px) {
  html body .main-content .stat-icon.desktop-only { display: none !important; }
  html body .app-shell { background: var(--studio-bg) !important; }
  html body .app-shell .main-content { background: var(--studio-bg) !important; }
  html body .main-content .mobile-header { background: var(--studio-sidebar) !important; }
  html body .main-content .mobile-header::before,
  html body .main-content .mobile-header::after { content: none !important; display: none !important; }
  html body .brand-mobile .brand-text-gradient {
    color: var(--studio-ink) !important; -webkit-text-fill-color: var(--studio-ink) !important;
    background: none !important; filter: none !important; text-shadow: none !important;
    font-weight: 750 !important; letter-spacing: -.04em !important; direction: ltr;
  }
  html body .brand-mobile .brand-text-gradient::after {
    content: "."; color: #db5fa2; -webkit-text-fill-color: #db5fa2;
  }
}
html body .studio-provider-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 14px; margin-block: 12px;
  color: var(--studio-secondary); background: var(--studio-accent-soft);
  border: 1px solid var(--studio-line-strong); border-radius: 12px;
  font-size: 12px; line-height: 1.65;
}
html body .studio-provider-note > span { flex: 1 1 200px; min-width: 0; }
html body .studio-provider-note > button { flex: none; }
html body .studio-provider-note > button[hidden] { display: none !important; }
@media(forced-colors:active) {
  html body .modal-content .plan-item.selected { outline: 2px solid Highlight !important; }
}