/* Livecounts.org — global enhancements layered on top of compiled Tailwind. */
:root { color-scheme: dark; }
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

/* ================================================================
   LIGHT THEME — overrides for hardcoded dark Tailwind utilities.
   Mirrors the mockups in /Maquettes (light variants). We override
   broadly so view files don't need per-class dark: prefixes.
   ================================================================ */
html:not(.dark) body { background:#f8fafc !important; color:#0f172a !important; }

/* Header / surfaces */
html:not(.dark) header.sticky { background: rgba(255,255,255,.9) !important; border-color:#e5e7eb !important; }
html:not(.dark) footer { border-color:#e5e7eb !important; color:#475569; }

/* Generic card */
html:not(.dark) .lc-card {
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
  backdrop-filter: none !important;
}

/* Background grid pattern: very light dots on white */
html:not(.dark) .lc-bg-grid {
  background-image: radial-gradient(rgba(15,23,42,.06) 1px, transparent 1px) !important;
}

/* Glow ring is fine but lower opacity in light */
html:not(.dark) .lc-glow-ring { opacity:.18 !important; }

/* Tailwind opacity-based whites used everywhere on dark theme */
html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10  { background-color:#f1f5f9 !important; }
html:not(.dark) .hover\:bg-white\/5:hover,
html:not(.dark) .hover\:bg-white\/10:hover { background-color:#e2e8f0 !important; }

html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .hover\:border-white\/15:hover { border-color:#e5e7eb !important; }

html:not(.dark) .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color:#e5e7eb !important;
}

/* "white" base text in dark = near-black in light */
html:not(.dark) .text-white            { color:#0f172a !important; }
html:not(.dark) .text-white\/40        { color:#94a3b8 !important; }
html:not(.dark) .text-white\/50        { color:#64748b !important; }
html:not(.dark) .text-white\/60        { color:#475569 !important; }
html:not(.dark) .text-white\/70        { color:#334155 !important; }
html:not(.dark) .text-white\/80        { color:#1e293b !important; }
html:not(.dark) .placeholder-white\/40::placeholder { color:#94a3b8 !important; }
html:not(.dark) .hover\:text-white:hover { color:#0f172a !important; }

/* Hardcoded dark surfaces used in dropdowns / overlays */
html:not(.dark) .bg-\[\#0b0f1a\],
html:not(.dark) .bg-\[\#0f1424\] { background-color:#ffffff !important; }
html:not(.dark) .bg-\[\#0b0f1a\]\/80 { background-color: rgba(255,255,255,.9) !important; }
html:not(.dark) .bg-\[\#0b0f1a\]\/95 { background-color: rgba(255,255,255,.96) !important; }

/* dark slate backgrounds */
html:not(.dark) .bg-slate-100         { background-color:#f1f5f9 !important; }
html:not(.dark) .bg-black\/40         { background-color:#ffffff !important; }
html:not(.dark) .bg-black\/60         { background-color:#f8fafc !important; }
html:not(.dark) pre.text-cyan-50,
html:not(.dark) pre.text-emerald-50,
html:not(.dark) code.text-cyan-100,
html:not(.dark) code.text-white\/75 { color:#0f172a !important; }
html:not(.dark) .text-cyan-200,
html:not(.dark) .text-cyan-300 { color:#0369a1 !important; }
html:not(.dark) .text-emerald-300 { color:#047857 !important; }

/* Avatar border on overlapping avatars (was border-[#0b0f1a]) */
html:not(.dark) .border-\[\#0b0f1a\] { border-color:#ffffff !important; }

/* Inputs / form controls */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  color:#0f172a;
}
html:not(.dark) input.bg-white\/5,
html:not(.dark) input.bg-white\/10,
html:not(.dark) textarea.bg-white\/5,
html:not(.dark) select.bg-white\/5 {
  background-color:#ffffff !important;
  border-color:#e5e7eb !important;
}

/* Brand-glow accent stays the same (purple) */
html:not(.dark) .text-brand-glow { color:#7c3aed !important; }

/* Scrollbars on light */
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(15,23,42,.12); }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.25); }

/* Default (dark) scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.15); }

.lc-card {
  background: rgba(15, 20, 36, .7);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.lc-counter {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.lc-pulse-dot {
  width: 8px; height: 8px; border-radius: 9999px; background:#22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: lc-pulse 1.6s infinite;
}
@keyframes lc-pulse {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.lc-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.lc-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: lc-skeleton 1.35s ease-in-out infinite;
}
@keyframes lc-skeleton {
  100% { transform: translateX(100%); }
}
html:not(.dark) .lc-skeleton {
  background: #e2e8f0;
}
html:not(.dark) .lc-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
}

.lc-glow-ring {
  background: conic-gradient(from 0deg,#3b82f6,#8b5cf6,#ec4899,#3b82f6);
  filter: blur(28px);
  opacity: .35;
}

/* Subtle grid background */
.lc-bg-grid {
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Sparkline svg sizing. Zero-specificity default (:where) so Tailwind
   utility classes on the element (w-20, h-7, ...) keep priority — this
   stylesheet loads after tailwind.css and a plain .lc-spark rule was
   overriding them, blowing 80px sparklines up to full card width and
   overflowing mobile layouts. */
.lc-spark { display:block; }
:where(svg.lc-spark) { width:100%; height:40px; }

/* Tabs underline */
.lc-tab-active { color:#fff; position:relative; }
.lc-tab-active::after {
  content:''; position:absolute; left:0; right:0; bottom:-9px; height:2px;
  background: linear-gradient(90deg,#3b82f6,#8b5cf6);
  border-radius: 2px;
}

/* ==========================================================
   Neon borders / glows (matches Maquettes/home.png)
   ========================================================== */

/* Universal search outer card: subtle cyan/violet neon outline */
.lc-neon-card {
  position: relative;
  border: 1px solid rgba(56,189,248,.35) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.10),
    0 0 24px -2px rgba(56,189,248,.25),
    0 0 60px -10px rgba(139,92,246,.35),
    inset 0 0 24px -8px rgba(56,189,248,.12);
}
html:not(.dark) .lc-neon-card {
  border-color: rgba(56,189,248,.45) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.08),
    0 0 18px -4px rgba(56,189,248,.30),
    0 0 36px -10px rgba(139,92,246,.25);
}

/* Search input: brighter cyan neon ring */
.lc-neon-input {
  border-color: rgba(56,189,248,.55) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.35),
    0 0 14px -2px rgba(56,189,248,.55),
    0 0 28px -4px rgba(139,92,246,.45),
    inset 0 0 12px -4px rgba(56,189,248,.25);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.lc-neon-input:focus {
  border-color: rgba(125,211,252,.85) !important;
  box-shadow:
    0 0 0 2px rgba(56,189,248,.45),
    0 0 20px -2px rgba(56,189,248,.75),
    0 0 36px -4px rgba(139,92,246,.55);
  outline: none;
}

/* Overlay preview frame: cyan neon with corner brackets */
.lc-overlay-frame {
  position: relative;
  border: 1px solid rgba(34,211,238,.55) !important;
  border-radius: 14px;
  background: rgba(0,0,0,.55) !important;
  box-shadow:
    0 0 0 1px rgba(34,211,238,.20),
    0 0 22px -2px rgba(34,211,238,.45),
    0 0 48px -8px rgba(139,92,246,.45),
    inset 0 0 18px -6px rgba(34,211,238,.20);
}
html:not(.dark) .lc-overlay-frame {
  background: #ffffff !important;
  border-color: rgba(14,165,233,.55) !important;
  box-shadow:
    0 0 0 1px rgba(14,165,233,.18),
    0 0 18px -4px rgba(14,165,233,.40),
    0 0 36px -10px rgba(139,92,246,.30);
}
.lc-overlay-frame::before,
.lc-overlay-frame::after,
.lc-overlay-frame > .lc-corner-tl,
.lc-overlay-frame > .lc-corner-tr,
.lc-overlay-frame > .lc-corner-bl,
.lc-overlay-frame > .lc-corner-br {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #67e8f9;
  filter: drop-shadow(0 0 4px rgba(34,211,238,.9));
  pointer-events: none;
}
.lc-overlay-frame > .lc-corner-tl { top:-2px; left:-2px;  border-right:none; border-bottom:none; border-top-left-radius:6px; }
.lc-overlay-frame > .lc-corner-tr { top:-2px; right:-2px; border-left:none;  border-bottom:none; border-top-right-radius:6px; }
.lc-overlay-frame > .lc-corner-bl { bottom:-2px; left:-2px;  border-right:none; border-top:none; border-bottom-left-radius:6px; }
.lc-overlay-frame > .lc-corner-br { bottom:-2px; right:-2px; border-left:none;  border-top:none; border-bottom-right-radius:6px; }
.lc-overlay-frame::before,
.lc-overlay-frame::after { display:none; } /* unused, kept for legacy */

/* Cyberpunk OBS overlay preset, shared by home, creator and builder pages */
.lc-cyber-overlay {
  --cyber-cyan: #22d9ff;
  --cyber-blue: #247eff;
  --cyber-purple: #9a45ff;
  --cyber-green: #8bed36;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.lc-cyber-overlay--home { margin-top: .55rem; }
@media (min-width: 640px) {
  .lc-cyber-overlay--with-options {
    grid-template-columns: minmax(280px, 1fr) minmax(145px, 0.38fr);
  }
  .lc-cyber-overlay--home.lc-cyber-overlay--with-options {
    display: flex;
    align-items: stretch;
  }
  .lc-cyber-overlay--home .lc-cyber-card {
    flex: 1 1 auto;
    max-width: calc(100% - 187px);
    /* Shorter (more landscape) ratio on the home preview to match the marketing mockup. */
    aspect-ratio: 1015 / 360;
  }
  .lc-cyber-overlay--home .lc-cyber-options {
    flex: 0 0 175px;
  }
}
.lc-cyber-overlay--home .lc-cyber-content {
  /* Tighter stack on the home preview, evenly distributed beside the avatar. */
  left: 35.4%;
  right: 3.8%;
  top: 14%;
  bottom: 12%;
  justify-content: flex-start;
  gap: clamp(2px, .8cqw, 8px);
}
.lc-cyber-overlay--home .lc-cyber-growth {
  /* Push the growth row to the bottom of the content area while the
     creator-row stays glued to the count above. */
  margin-top: auto;
  gap: clamp(8px, 2.4cqw, 14px);
  font-size: clamp(12px, 3.2cqw, 17px);
}
.lc-cyber-overlay--home .lc-cyber-creator-row {
  gap: clamp(5px, 1.4cqw, 12px);
}
.lc-cyber-overlay--home .lc-cyber-name {
  max-width: 60%;
  font-size: clamp(13px, 4cqw, 22px);
}
.lc-cyber-overlay--home .lc-cyber-verified {
  width: clamp(16px, 4.4cqw, 26px);
  height: clamp(16px, 4.4cqw, 26px);
}
.lc-cyber-overlay--home .lc-cyber-platform {
  width: clamp(22px, 5cqw, 32px);
  height: clamp(18px, 4cqw, 24px);
}
.lc-cyber-overlay--home .lc-cyber-count {
  font-size: clamp(24px, 8cqw, 42px);
}
.lc-cyber-overlay--home .lc-cyber-metric {
  font-size: clamp(13px, 3.6cqw, 19px);
}
.lc-cyber-overlay--creator.lc-cyber-overlay--with-options {
  grid-template-columns: minmax(0, 1fr);
}
.lc-cyber-card {
  container-type: inline-size;
  position: relative;
  min-width: 0;
  aspect-ratio: 1015 / 510;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 28%, rgba(155,69,255,.18), transparent 28%),
    radial-gradient(circle at 88% 44%, rgba(34,217,255,.15), transparent 24%),
    linear-gradient(180deg, #030817 0%, #050a18 48%, #020714 100%);
  box-shadow:
    0 0 44px -14px rgba(34,217,255,.82),
    0 0 76px -26px rgba(154,69,255,.72),
    inset 0 0 28px -18px rgba(255,255,255,.75);
  overflow: visible;
}
.lc-cyber-card-haze {
  position: absolute;
  inset: 6% 4%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 40%, rgba(154,69,255,.25), transparent 20%),
    radial-gradient(circle at 93% 62%, rgba(34,217,255,.18), transparent 24%);
  filter: blur(18px);
  opacity: .78;
  pointer-events: none;
}
.lc-cyber-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lc-cyber-avatar-ring {
  position: absolute;
  left: 7.1%;
  top: 10.3%;
  width: 25.6%;
  aspect-ratio: 1;
  padding: clamp(3px, .72cqw, 8px);
  border-radius: 50%;
  background:
    conic-gradient(from -32deg, #22d9ff, #e7fbff 14%, #22d9ff 28%, #9a45ff 48%, #f35cff 58%, #22d9ff 78%, #effcff 100%);
  box-shadow:
    0 0 0 clamp(2px, .45cqw, 5px) rgba(34,217,255,.12),
    0 0 clamp(22px, 6cqw, 58px) rgba(34,217,255,.9),
    0 0 clamp(14px, 4cqw, 38px) rgba(154,69,255,.88);
}
.lc-cyber-avatar-ring::before {
  content: '';
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.92) 0 8%, rgba(255,255,255,0) 8% 17%),
    linear-gradient(135deg, rgba(34,217,255,.95), rgba(34,217,255,.35));
  opacity: .48;
}
.lc-cyber-avatar-ring img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #081120;
  border: clamp(1px, .28cqw, 3px) solid rgba(255,255,255,.88);
}
.lc-cyber-content {
  /* Flex column that holds creator-row, count+metric and growth.
     Positioned absolutely on the right of the avatar; vertical layout is
     handled by flex + gap rather than per-element top:% values. */
  position: absolute;
  left: 39.2%;
  right: 6%;
  top: 12%;
  bottom: 10%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(4px, 1.1cqw, 12px);
}
.lc-cyber-stat {
  /* Count and metric stay glued together as one visual block. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .6cqw, 6px);
}
.lc-cyber-creator-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.7cqw, 18px);
  color: #fff;
}
.lc-cyber-verified {
  width: clamp(20px, 5.2cqw, 52px);
  height: clamp(20px, 5.2cqw, 52px);
  flex: 0 0 auto;
  filter: drop-shadow(0 0 9px rgba(116,87,255,.88));
}
.lc-cyber-name {
  min-width: 0;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(15px, 4.35cqw, 45px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,.72);
}
.lc-cyber-platform {
  width: clamp(24px, 5.6cqw, 58px);
  height: clamp(18px, 4.4cqw, 44px);
  border-radius: clamp(5px, 1.2cqw, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--lc-platform-color, #ff0000);
  box-shadow: 0 0 clamp(12px, 3cqw, 30px) color-mix(in srgb, var(--lc-platform-color, #ff0000) 68%, transparent);
}
.lc-cyber-platform svg {
  width: 58%;
  height: 58%;
}
.lc-cyber-count {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(28px, 8.15cqw, 82px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,.85), 0 0 16px rgba(255,255,255,.18);
}
.lc-cyber-metric {
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 4.25cqw, 44px);
  line-height: 1;
  text-transform: capitalize;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}
.lc-cyber-growth {
  display: flex;
  align-items: center;
  gap: clamp(12px, 4cqw, 42px);
  color: var(--cyber-green);
  font-size: clamp(14px, 4cqw, 42px);
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(139,237,54,.45);
}
.lc-cyber-growth.is-negative {
  color: #fb7185;
  text-shadow: 0 0 16px rgba(251,113,133,.45);
}
.lc-cyber-pct {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 1.2cqw, 13px);
}
.lc-cyber-pct svg {
  width: .72em;
  height: .72em;
}
.lc-cyber-options {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(20,27,44,.95), rgba(10,15,28,.92));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 24px 48px -32px rgba(2,6,23,.95);
}
.lc-cyber-option {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(226,232,240,.78);
  font-size: 12px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.lc-cyber-option:last-of-type {
  border-bottom: none;
}
.lc-cyber-option > span:nth-of-type(2) {
  /* Label takes all available room so the check is pushed to the far right. */
  flex: 1 1 auto;
  min-width: 0;
}
.lc-cyber-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(226,232,240,.92);
  filter: drop-shadow(0 0 6px rgba(226,232,240,.14));
}
.lc-cyber-option-icon svg {
  width: 100%;
  height: 100%;
}
.lc-cyber-check {
  width: 20px;
  height: 20px;
  justify-self: end;
  color: #2ea8ff;
  stroke-width: 4;
  filter: drop-shadow(0 0 5px rgba(46,168,255,.35));
}
.lc-cyber-button {
  min-height: 30px;
  margin-top: 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(95deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  box-shadow: 0 16px 34px -18px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.lc-cyber-button:hover { filter: brightness(1.08); }
.lc-overlay-frame--cyber {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.lc-overlay-frame--cyber .lc-cyber-builder-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.lc-overlay-frame--cyber > :not(.lc-cyber-builder-frame) {
  position: relative;
  z-index: 1;
}
.lc-overlay-frame--cyber > .lc-corner-tl,
.lc-overlay-frame--cyber > .lc-corner-tr,
.lc-overlay-frame--cyber > .lc-corner-bl,
.lc-overlay-frame--cyber > .lc-corner-br {
  display: none;
}

/* Neon icon badge (used in feature row & section heads) */
.lc-icon-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(8,145,178,.10);
  border: 1px solid rgba(34,211,238,.35);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.10),
    0 0 14px -2px rgba(34,211,238,.45),
    inset 0 0 10px -4px rgba(34,211,238,.30);
  color: #67e8f9;
}
html:not(.dark) .lc-icon-neon {
  background: #ecfeff;
  border-color: rgba(14,165,233,.45);
  color: #0891b2;
}

/* X / Twitter brand icon: invert per theme so it stays visible */
html.dark    .lc-platform-x { color:#ffffff !important; }
html:not(.dark) .lc-platform-x { color:#0f172a !important; }

/* Locale select: ensure options are readable in dark mode */
html.dark .lc-locale-select option { background:#0b0f1a; color:#fff; }
html:not(.dark) .lc-locale-select option { background:#fff; color:#0f172a; }
.lc-locale-select { background-image:none; }

/* ==========================================================
   Homepage fidelity layer
   ========================================================== */
.lc-home-page {
  background:
    radial-gradient(circle at 0 20%, rgba(139,92,246,.24), transparent 34rem),
    radial-gradient(circle at 100% 10%, rgba(14,165,233,.13), transparent 34rem),
    #070b14;
}
.lc-home-aura {
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(236,72,153,.28));
  filter: blur(44px);
  opacity: .85;
}
.lc-home-pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 18px rgba(34,197,94,.05);
}
.lc-home-mini-signal {
  display: inline-flex;
  align-items: end;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 5px;
  gap: 2px;
  border-radius: 999px;
  color: #22c55e;
  background: rgba(34,197,94,.07);
  border: 1px solid rgba(34,197,94,.16);
}
.lc-home-mini-signal i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}
.lc-home-mini-signal i:nth-child(1) { height: 7px; opacity: .55; }
.lc-home-mini-signal i:nth-child(2) { height: 12px; opacity: .75; }
.lc-home-mini-signal i:nth-child(3) { height: 17px; }
.lc-home-primary-btn,
.lc-home-secondary-btn {
  min-height: 56px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 800;
  color: #fff;
}
.lc-home-primary-btn {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 43%, #d946ef 100%);
  box-shadow: 0 14px 34px -16px rgba(34,211,238,.95);
}
.lc-home-secondary-btn {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.20);
}
.lc-home-secondary-btn:hover { background: rgba(255,255,255,.075); }

.lc-home-search-panel {
  position: relative;
  border-radius: 24px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(10,15,27,.80)) padding-box,
    linear-gradient(135deg, rgba(56,189,248,.58), rgba(139,92,246,.48)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 0 0 1px rgba(125,211,252,.10),
    0 24px 70px -44px rgba(56,189,248,.90),
    inset 0 0 38px -28px rgba(125,211,252,.90);
}
.lc-home-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #38bdf8;
  text-shadow: 0 0 14px rgba(56,189,248,.85);
}
.lc-home-platform-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(2,6,23,.18);
}
.lc-home-platform-tab {
  min-height: 52px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.64);
  border-left: 1px solid rgba(255,255,255,.05);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.lc-home-platform-tab:first-child { border-left: 0; }
.lc-home-platform-tab:hover,
.lc-home-platform-tab.is-active {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.lc-home-platform-tab.is-active {
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.62), 0 0 24px -12px rgba(56,189,248,.95);
}
.lc-home-search-box {
  position: relative;
  border-radius: 13px;
  background: rgba(15,23,42,.64);
  border: 1px solid rgba(56,189,248,.65);
  box-shadow:
    0 0 0 1px rgba(139,92,246,.38),
    0 0 24px -8px rgba(34,211,238,.95),
    0 0 28px -12px rgba(217,70,239,.95),
    inset 0 0 18px -9px rgba(56,189,248,.7);
}
.lc-home-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
}
.lc-home-chip:hover {
  color: #fff;
  border-color: rgba(125,211,252,.24);
}
.lc-home-section-head {
  min-height: 52px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lc-home-creator-card {
  display: block;
  min-height: 152px;
  border-radius: 12px;
  padding: 12px 16px 0;
  background: rgba(15,23,42,.70);
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .18s ease, transform .18s ease;
}
.lc-home-creator-card:hover {
  border-color: rgba(125,211,252,.22);
  transform: translateY(-1px);
}
.lc-home-rank {
  min-width: 28px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #67e8f9;
  background: rgba(14,165,233,.10);
}
.lc-home-platform-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 12px 24px -14px currentColor;
}
.lc-home-panel {
  min-height: 0;
  border-radius: 12px;
}
.lc-home-overlay-panel {
  /* Stack header / subtitle / preview vertically; preview follows naturally without extra space. */
  display: flex;
  flex-direction: column;
}
.lc-home-overlay-panel .lc-cyber-overlay {
  margin-top: 6px;
}
.lc-home-section-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 21px;
  text-shadow: 0 0 14px rgba(96,165,250,.9);
}
.lc-home-battle-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lc-home-overlay-preview {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #050a18 0%, #0a1224 55%, #060b1c 100%) padding-box,
    linear-gradient(135deg, rgba(168,85,247,.85), rgba(34,211,238,1) 50%, rgba(59,130,246,.75)) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    /* tight inner cyan rim */
    0 0 0 1px rgba(34,211,238,.35),
    /* wide cyan halo */
    0 0 40px -4px rgba(34,211,238,.65),
    0 0 80px -10px rgba(34,211,238,.45),
    /* secondary purple glow */
    0 8px 60px -10px rgba(139,92,246,.55),
    /* inner top-edge cyan glow */
    inset 0 1px 0 0 rgba(255,255,255,.06),
    inset 0 0 22px -6px rgba(34,211,238,.55);
  overflow: visible; /* allow brackets to peek outside */
}
/* dotted "tech tag" bottom-right */
.lc-home-overlay-preview::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 84px;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(34,211,238,.85) 0 6px, transparent 6px 11px);
  opacity: .55;
  filter: drop-shadow(0 0 4px rgba(34,211,238,.6));
  pointer-events: none;
}
/* subtle "scanline" near top-left for HUD feel */
.lc-home-overlay-preview::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 10px;
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, rgba(34,211,238,.9), transparent);
  filter: drop-shadow(0 0 4px rgba(34,211,238,.7));
  pointer-events: none;
}
/* Corner brackets: thicker, more prominent L's that sit outside the rounded corners */
.lc-home-overlay-preview > .lc-corner-tl,
.lc-home-overlay-preview > .lc-corner-tr,
.lc-home-overlay-preview > .lc-corner-bl,
.lc-home-overlay-preview > .lc-corner-br {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid #67e8f9;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.95));
  pointer-events: none;
}
.lc-home-overlay-preview > .lc-corner-tl { top: -5px; left: -5px;  border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.lc-home-overlay-preview > .lc-corner-tr { top: -5px; right: -5px; border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.lc-home-overlay-preview > .lc-corner-bl { bottom: -5px; left: -5px;  border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.lc-home-overlay-preview > .lc-corner-br { bottom: -5px; right: -5px; border-left: 0;  border-top: 0; border-bottom-right-radius: 4px; }
.lc-home-overlay-avatar {
  border: 3px solid #22d3ee;
  box-shadow: 0 0 0 4px rgba(34,211,238,.12), 0 0 24px -6px rgba(34,211,238,.9);
}
.lc-home-overlay-platform {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.lc-home-overlay-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lc-home-overlay-option {
  min-height: 25px;
  padding: 0 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
}
.lc-home-option-icon {
  position: relative;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.72);
  flex: 0 0 auto;
}
.lc-home-option-icon::before,
.lc-home-option-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}
.lc-home-option-activity::before { border-radius: 999px; transform: scaleX(.75); }
.lc-home-option-activity::after { inset: 7px 2px; border: 0; border-top: 2px solid currentColor; transform: rotate(25deg); }
.lc-home-option-sliders::before { inset: 2px 7px; border-top: 0; border-bottom: 0; border-radius: 0; }
.lc-home-option-sliders::after { inset: 4px 2px; border-left: 0; border-right: 0; border-radius: 0; }
.lc-home-option-shield::before { border-radius: 4px 4px 8px 8px; transform: perspective(20px) rotateX(-12deg); }
.lc-home-overlay-button {
  margin-top: auto;
  min-height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #22d3ee, #3b82f6 42%, #d946ef);
  box-shadow: 0 12px 28px -18px rgba(34,211,238,1);
}
.lc-home-feature-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: 12px;
  background: rgba(15,23,42,.70);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.lc-home-feature-item {
  min-height: 104px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.lc-home-feature-item:first-child { border-left: 0; }
.lc-home-feature-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--feature-accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--feature-accent) 70%, transparent));
}

html:not(.dark) .lc-home-page {
  background:
    radial-gradient(circle at 0 20%, rgba(59,130,246,.10), transparent 34rem),
    radial-gradient(circle at 100% 10%, rgba(168,85,247,.08), transparent 34rem),
    #f8fafc;
}
html:not(.dark) .lc-home-aura { opacity: .32; }
html:not(.dark) .lc-home-pill,
html:not(.dark) .lc-home-search-panel,
html:not(.dark) .lc-home-creator-card,
html:not(.dark) .lc-home-feature-row {
  background: rgba(255,255,255,.86);
  border-color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 42px -32px rgba(15,23,42,.25);
}
html:not(.dark) .lc-home-search-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) padding-box,
    linear-gradient(135deg, rgba(56,189,248,.48), rgba(168,85,247,.34)) border-box;
  border-color: transparent;
}
html:not(.dark) .lc-home-platform-tabs,
html:not(.dark) .lc-home-search-box {
  background: rgba(255,255,255,.72);
  border-color: rgba(59,130,246,.24);
}
html:not(.dark) .lc-home-platform-tab {
  color: #475569;
  border-left-color: #e5e7eb;
}
html:not(.dark) .lc-home-platform-tab:hover,
html:not(.dark) .lc-home-platform-tab.is-active {
  background: #fff;
  color: #0f172a;
}
html:not(.dark) .lc-home-chip,
html:not(.dark) .lc-home-secondary-btn,
html:not(.dark) .lc-home-overlay-option {
  background: #fff;
  border-color: #e5e7eb;
  color: #475569;
}
html:not(.dark) .lc-home-section-head,
html:not(.dark) .lc-home-feature-item,
html:not(.dark) .lc-home-creator-card .border-white\/5 {
  border-color: #e5e7eb !important;
}
html:not(.dark) .lc-home-overlay-preview {
  background:
    linear-gradient(180deg, #fff, #f8fafc) padding-box,
    linear-gradient(135deg, rgba(168,85,247,.78), rgba(34,211,238,.95), rgba(59,130,246,.65)) border-box;
}
html:not(.dark) .lc-home-feature-row { background: rgba(255,255,255,.92); }

@media (max-width: 1279px) {
  .lc-home-platform-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lc-home-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-home-feature-item:nth-child(odd) { border-left: 0; }
}

@media (max-width: 767px) {
  .lc-home-search-panel { padding: 20px; border-radius: 18px; }
  .lc-home-platform-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-home-feature-row { grid-template-columns: 1fr; }
  .lc-home-feature-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .lc-home-feature-item:first-child { border-top: 0; }
  .lc-home-primary-btn,
  .lc-home-secondary-btn { width: 100%; justify-content: center; }
}

/* ==========================================================
   GLOBAL MOBILE RESPONSIVE LAYER
   Applied via attribute selectors so we don't need to touch
   every view template. Keeps content readable on phones
   (320–640px) without breaking desktop layouts.
   ========================================================== */

html, body { max-width: 100%; overflow-x: hidden; }

.line-clamp-1,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

@media (max-width: 640px) {
  /* Tighten outer page padding from px-6 (1.5rem) -> px-4 (1rem) */
  [class*="max-w-["][class*="mx-auto"][class*="px-6"] { padding-left: 1rem !important; padding-right: 1rem !important; }
  [class*="max-w-["][class*="mx-auto"][class*="px-8"] { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Cap oversized hero/headline typography */
  .text-7xl { font-size: 3rem !important;     line-height: 1 !important; }
  .text-6xl { font-size: 2.5rem !important;   line-height: 1.05 !important; }
  .text-5xl { font-size: 2rem !important;     line-height: 1.1 !important; }
  .text-4xl { font-size: 1.75rem !important;  line-height: 1.15 !important; }
  .text-3xl { font-size: 1.5rem !important;   line-height: 1.2 !important; }

  /* Counter & tabular-nums numbers may still overflow; keep digits grouped. */
  .lc-counter {
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Fluid size for the HERO counter only (creator page + fullscreen).
     A generic .lc-counter clamp was UPSIZING the small card counters
     (text-lg/text-2xl designs) up to 2.75rem and overflowing their cards.
     !important needed to beat the .text-7xl override above. */
  .lc-creator-live-card .lc-counter,
  .lc-fs-counter {
    font-size: clamp(1.35rem, 8vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }

  /* Cards and lc-card paddings reduce on phones */
  .lc-card { border-radius: 12px; }
  .p-8 { padding: 1.25rem !important; }
  .p-7 { padding: 1rem !important; }
  .p-6 { padding: 1rem !important; }
  .p-5 { padding: 0.875rem !important; }

  /* Tables: enable horizontal scroll inside lc-card wrappers */
  .lc-card > table,
  .lc-card table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Generic heavy grids that hard-code wide tracks: let children flow.
     minmax(0,1fr), NOT a bare 1fr: a bare 1fr track has min-width:auto,
     so any child with an intrinsically wide table/preview (min-w-[760px]
     watchlist, overlay frame, ...) blows the track up past the viewport
     instead of letting the child's overflow-x-auto wrapper scroll. */
  [class*="grid-cols-[1fr_"],
  [class*="grid-cols-[auto_1fr]"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Gap reductions for tight phones */
  .gap-6 { gap: 1rem !important; }
  .xl\:gap-6 { gap: 1rem !important; }

  /* Buttons in action rows wrap nicely */
  button, .px-4.py-2, .px-3.py-2 { white-space: normal; }

  /* Avatars/preview ratios: prevent overflow */
  img { max-width: 100%; height: auto; }
  .lc-home-overlay-preview { padding: 12px; min-height: 100px; }
  .lc-home-overlay-preview .w-16 { width: 3rem; height: 3rem; }

  /* Locale select stays compact */
  .lc-locale-select { width: auto; min-width: 0; }

  /* Compare battle: stack everything cleanly */
  [class*="lg:grid-cols-[1fr_360px_1fr]"] { gap: 0.75rem !important; }

  /* Trending table: hide rank column padding excess */
  table thead th, table tbody td { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

  /* Prevent absurd circles on small screens */
  .w-72.h-72, .w-64.h-64 { width: 14rem !important; height: 14rem !important; }
  .w-40.h-40 { width: 10rem !important; height: 10rem !important; }

  /* Sparkline auto-shrinks in small viewports */
  .lc-spark { max-width: 100%; }
}

/* Phones extra small (<400px) */
@media (max-width: 399px) {
  .text-2xl { font-size: 1.25rem !important; }
  .text-3xl { font-size: 1.375rem !important; }
  /* Even tighter card pad */
  .p-5, .p-6 { padding: 0.75rem !important; }
}

/* Tablet: ensure 3-col side-rail layouts don't crush */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Search/trending/dashboard side rails collapse below lg already; just tidy gaps */
  [class*="lg:grid-cols-[240px_1fr_300px]"],
  [class*="lg:grid-cols-[320px_1fr]"],
  [class*="lg:grid-cols-[1fr_460px]"],
  [class*="lg:grid-cols-[1fr_420px]"] { gap: 1rem !important; }
}

/* Tap targets: minimum 40px on mobile for buttons/links inside dense UIs */
@media (max-width: 640px) {
  nav a, .lc-home-platform-tab, [role="button"] { min-height: 40px; }
}

/* Scrollable tab strips (compare/trending/milestones/creator) */
.lc-tabstrip { scrollbar-width: none; }
.lc-tabstrip::-webkit-scrollbar { display: none; }
.lc-tabstrip > * { flex-shrink: 0; white-space: nowrap; }

/* ==================================================================
   Trending — Featured #1 hero card
   ================================================================== */
.lc-trend-hero {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,20,36,.85), rgba(8,12,24,.92)) padding-box,
    linear-gradient(135deg, rgba(168,85,247,.85), rgba(34,211,238,.95) 55%, rgba(59,130,246,.7)) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.2),
    0 30px 80px -30px rgba(124,58,237,.45),
    0 10px 40px -10px rgba(34,211,238,.25);
}
@media (max-width: 768px) {
  .lc-trend-hero { grid-template-columns: 1fr; }
}
.lc-trend-hero-image {
  position: relative;
  display: block;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
}
.lc-trend-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.lc-trend-hero-image:hover img { transform: scale(1.04); }
.lc-trend-hero-rank {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f2433, #0d1124);
  border: 1px solid rgba(139,92,246,.5);
  box-shadow: 0 0 24px rgba(139,92,246,.4);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.lc-trend-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 100%, rgba(139,92,246,.45), transparent 60%);
  mix-blend-mode: screen;
}
.lc-trend-hero-body { padding: 22px 26px; }
.lc-trend-hero-stat {
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  min-width: 110px;
}


/* ==================================================================
   Fullscreen mode (creator + compare)
   ================================================================== */
.lc-fs-only { display: none; }
.lc-fs-target:fullscreen,
.lc-fs-target:-webkit-full-screen {
  background: radial-gradient(circle at 50% 0%, rgba(168,85,247,.18), transparent 60%), #06080f;
  padding: clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.lc-fs-target:fullscreen .lc-fs-only,
.lc-fs-target:-webkit-full-screen .lc-fs-only { display: flex; }
.lc-fs-target:fullscreen .lc-fs-hide,
.lc-fs-target:-webkit-full-screen .lc-fs-hide { display: none !important; }
.lc-fs-target:fullscreen .lc-fs-counter,
.lc-fs-target:-webkit-full-screen .lc-fs-counter {
  /* No 80px floor: on a 375px-wide phone a 10+ digit count at 80px is
     ~550px wide. The vw term keeps it huge on desktop, the rem floor
     keeps it readable on phones while always fitting the screen. */
  font-size: clamp(2.5rem, 13vw, 220px);
  line-height: 1;
  text-align: center;
}
.lc-fs-target:fullscreen .lc-fs-card,
.lc-fs-target:-webkit-full-screen .lc-fs-card {
  width: min(1600px, 100%);
  max-height: 100vh;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.lc-fs-target:fullscreen .lc-fs-vs-grid,
.lc-fs-target:-webkit-full-screen .lc-fs-vs-grid {
  width: min(1800px, 100%);
}
.lc-fs-target.lc-fs-card:fullscreen,
.lc-fs-target.lc-fs-card:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.lc-fs-target.lc-fs-card:fullscreen > .grid,
.lc-fs-target.lc-fs-card:-webkit-full-screen > .grid {
  width: min(1500px, 100%);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lc-fs-target.lc-fs-card:fullscreen > .grid > div,
.lc-fs-target.lc-fs-card:-webkit-full-screen > .grid > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lc-fs-target.lc-fs-card:fullscreen .mt-5.flex,
.lc-fs-target.lc-fs-card:-webkit-full-screen .mt-5.flex {
  justify-content: center;
}
.lc-fs-target.lc-fs-vs-grid:fullscreen,
.lc-fs-target.lc-fs-vs-grid:-webkit-full-screen {
  width: 100vw;
  min-height: 100vh;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) minmax(0, 1fr);
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  .lc-fs-target.lc-fs-vs-grid:fullscreen,
  .lc-fs-target.lc-fs-vs-grid:-webkit-full-screen {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lc-fs-exit { display: none; }
.lc-fs-target:fullscreen .lc-fs-exit,
.lc-fs-target:-webkit-full-screen .lc-fs-exit {
  display: inline-flex;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
}

/* ==================================================================
   LIGHT THEME 2026 — mockup fidelity pass
   Source references: Maquettes/* light theme.png
   ================================================================== */
:root {
  --lc-light-bg: #f8fafc;
  --lc-light-surface: #ffffff;
  --lc-light-surface-2: #f6f9fd;
  --lc-light-border: #dfe7f2;
  --lc-light-border-strong: #cbd7e7;
  --lc-light-text: #0f172a;
  --lc-light-muted: #64748b;
  --lc-light-faint: #94a3b8;
  --lc-light-blue: #1d9bf0;
  --lc-light-purple: #8b5cf6;
  --lc-light-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 50px -42px rgba(15,23,42,.38);
  --lc-light-shadow-strong: 0 1px 2px rgba(15,23,42,.05), 0 24px 70px -46px rgba(30,64,175,.45);
}

html:not(.dark),
html:not(.dark) body {
  color-scheme: light;
  background:
    radial-gradient(circle at 0 8%, rgba(59,130,246,.10), transparent 440px),
    radial-gradient(circle at 100% 0, rgba(168,85,247,.085), transparent 420px),
    linear-gradient(180deg, #ffffff 0, var(--lc-light-bg) 420px, #ffffff 100%) !important;
  color: var(--lc-light-text) !important;
}

html:not(.dark) .tracking-tight,
html:not(.dark) .tracking-tighter,
html:not(.dark) .tracking-wide,
html:not(.dark) .tracking-wider,
html:not(.dark) .tracking-widest {
  letter-spacing: 0 !important;
}

html:not(.dark) header.sticky {
  min-height: 74px;
  background: rgba(255,255,255,.88) !important;
  border-color: var(--lc-light-border) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 18px 50px -42px rgba(15,23,42,.50);
}
html:not(.dark) header .max-w-\[1920px\] {
  min-height: 74px;
}
html:not(.dark) header a[href$="/public/"],
html:not(.dark) header a[href="/"] {
  color: var(--lc-light-text) !important;
}
html:not(.dark) header nav a,
html:not(.dark) header nav button {
  color: #111827 !important;
  border-radius: 10px;
}
html:not(.dark) header nav a:hover,
html:not(.dark) header nav button:hover {
  background: #f1f6fd !important;
  color: #0f172a !important;
}
html:not(.dark) header form input[name="q"] {
  height: 48px;
  border-radius: 13px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--lc-light-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 38px -32px rgba(15,23,42,.65);
}
html:not(.dark) header kbd {
  color: #94a3b8 !important;
  background: #f8fafc;
  border-color: #e5edf7 !important;
}
html:not(.dark) header .bg-grad-brand,
html:not(.dark) .lc-home-primary-btn,
html:not(.dark) .lc-home-overlay-button,
html:not(.dark) a.bg-grad-brand,
html:not(.dark) button.bg-grad-brand {
  background: linear-gradient(135deg, #16b7f2 0%, #347df6 46%, #a855f7 100%) !important;
  box-shadow: 0 18px 36px -24px rgba(59,130,246,.95) !important;
}

html:not(.dark) footer {
  background: rgba(255,255,255,.78);
  border-color: var(--lc-light-border) !important;
}
html:not(.dark) footer a,
html:not(.dark) footer span {
  color: #475569 !important;
}
html:not(.dark) footer a:hover { color: #0f172a !important; }

html:not(.dark) .lc-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  border: 1px solid var(--lc-light-border) !important;
  border-radius: 16px;
  box-shadow: var(--lc-light-shadow) !important;
}
html:not(.dark) .lc-card:hover {
  border-color: var(--lc-light-border-strong) !important;
}

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10 {
  background-color: #f7faff !important;
}
html:not(.dark) .hover\:bg-white\/5:hover,
html:not(.dark) .hover\:bg-white\/10:hover {
  background-color: #eef5ff !important;
}
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .hover\:border-white\/15:hover {
  border-color: var(--lc-light-border) !important;
}
html:not(.dark) .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--lc-light-border) !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  color: var(--lc-light-text) !important;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: rgba(59,130,246,.65) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}

html:not(.dark) .text-white { color: var(--lc-light-text) !important; }
html:not(.dark) .text-white\/30 { color: #cbd5e1 !important; }
html:not(.dark) .text-white\/40 { color: #94a3b8 !important; }
html:not(.dark) .text-white\/45 { color: #7c8ca3 !important; }
html:not(.dark) .text-white\/50,
html:not(.dark) .text-white\/55 { color: var(--lc-light-muted) !important; }
html:not(.dark) .text-white\/60,
html:not(.dark) .text-white\/65,
html:not(.dark) .text-white\/70 { color: #475569 !important; }
html:not(.dark) .text-white\/80 { color: #1f2937 !important; }
html:not(.dark) .placeholder-white\/40::placeholder { color: #94a3b8 !important; }
html:not(.dark) .hover\:text-white:hover { color: #0f172a !important; }

html:not(.dark) .lc-tabstrip {
  background: #ffffff !important;
  border: 1px solid var(--lc-light-border);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
html:not(.dark) .lc-tabstrip a,
html:not(.dark) .lc-tabstrip button {
  color: #475569 !important;
}
html:not(.dark) .lc-tabstrip .bg-grad-brand,
html:not(.dark) .lc-tabstrip .shadow-glow,
html:not(.dark) .lc-tabstrip [class*="bg-grad-brand"] {
  color: #fff !important;
}

/* Home */
html:not(.dark) .lc-home-page {
  background:
    radial-gradient(circle at 6% 12%, rgba(59,130,246,.10), transparent 440px),
    radial-gradient(circle at 90% 14%, rgba(168,85,247,.08), transparent 460px),
    linear-gradient(180deg, #ffffff 0, #f8fafc 100%) !important;
}
html:not(.dark) .lc-home-copy h1 {
  color: #070b16;
}
html:not(.dark) .lc-home-pill {
  background: #ffffff !important;
  border-color: #e6edf6 !important;
}
html:not(.dark) .lc-home-search-panel {
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--lc-light-shadow-strong) !important;
  min-width: 0;
  overflow: hidden;
}
html:not(.dark) .lc-home-platform-tabs {
  border-radius: 11px;
  background: #f8fbff !important;
  grid-template-columns: repeat(8, minmax(72px, 1fr));
  overflow-x: auto;
  scrollbar-width: none;
}
html:not(.dark) .lc-home-platform-tabs::-webkit-scrollbar {
  display: none;
}
html:not(.dark) .lc-home-platform-tab {
  min-height: 56px;
  justify-content: center;
  white-space: nowrap;
  gap: 5px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
}
html:not(.dark) .lc-home-platform-tab.is-active {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.35), 0 12px 28px -24px rgba(59,130,246,.85);
}
html:not(.dark) .lc-home-search-box {
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 1px rgba(168,85,247,.25), 0 14px 38px -30px rgba(59,130,246,.80);
}
html:not(.dark) .lc-home-search-input {
  color: #0f172a !important;
}
html:not(.dark) .lc-home-creator-card {
  min-height: 176px;
  padding: 16px 18px 0;
  border-radius: 14px;
  background: #ffffff !important;
  box-shadow: var(--lc-light-shadow) !important;
}
html:not(.dark) .lc-home-creator-card:hover {
  border-color: rgba(59,130,246,.32) !important;
  transform: translateY(-2px);
}
html:not(.dark) .lc-home-creator-card .grid-cols-\[1fr_130px\] {
  grid-template-columns: minmax(0, 1fr) 88px !important;
}
html:not(.dark) .lc-home-creator-card .lc-counter {
  font-size: clamp(20px, 1.55vw, 22px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
html:not(.dark) .lc-home-rank {
  background: #eef7ff;
  color: #1d9bf0;
}
html:not(.dark) .lc-home-panel {
  background: #ffffff !important;
  border-radius: 14px;
}
html:not(.dark) .lc-home-feature-row {
  background: #ffffff !important;
  border-radius: 14px;
  box-shadow: var(--lc-light-shadow) !important;
}
html:not(.dark) .lc-home-feature-item {
  min-height: 100px;
}
html:not(.dark) .lc-cyber-options {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-color: #e2e8f0;
}
html:not(.dark) .lc-cyber-option {
  color: #475569;
  border-bottom-color: #e8eef7;
}
html:not(.dark) .lc-cyber-option-icon { color: #64748b; }

/* Search */
.lc-autocomplete-root {
  position: relative;
}
.lc-autocomplete-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  max-height: min(420px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: rgba(10, 15, 28, .96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 70px -34px rgba(0,0,0,.85),
    0 0 0 1px rgba(34,211,238,.08),
    0 0 38px -28px rgba(34,211,238,.9);
  backdrop-filter: blur(18px);
}
.lc-autocomplete-panel[hidden] {
  display: none;
}
.lc-autocomplete-item {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  color: #f8fafc;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.lc-autocomplete-item:hover,
.lc-autocomplete-item.is-active {
  background:
    linear-gradient(90deg, rgba(34,211,238,.14), rgba(139,92,246,.13)),
    rgba(255,255,255,.04);
}
.lc-autocomplete-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.32));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 22px -12px rgba(34,211,238,.9);
}
.lc-autocomplete-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.lc-autocomplete-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lc-autocomplete-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  line-height: 1.15;
}
.lc-autocomplete-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(226,232,240,.56);
  font-size: 12px;
  line-height: 1.2;
  text-transform: capitalize;
}
.lc-autocomplete-stat {
  justify-self: end;
  color: rgba(226,232,240,.78);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.lc-autocomplete-badge {
  min-width: 34px;
  justify-self: end;
  padding: 3px 7px;
  border-radius: 999px;
  color: #67e8f9;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.18);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
}
.lc-autocomplete-empty {
  padding: 14px;
  color: rgba(226,232,240,.62);
  font-size: 13px;
}
header .lc-autocomplete-panel {
  min-width: min(520px, calc(100vw - 32px));
}
html:not(.dark) .lc-autocomplete-panel {
  background: rgba(255,255,255,.98);
  border-color: var(--lc-light-border);
  box-shadow: 0 22px 60px -36px rgba(15,23,42,.55), 0 0 0 1px rgba(59,130,246,.08);
}
html:not(.dark) .lc-autocomplete-item {
  color: var(--lc-light-text);
}
html:not(.dark) .lc-autocomplete-item:hover,
html:not(.dark) .lc-autocomplete-item.is-active {
  background: linear-gradient(90deg, rgba(59,130,246,.08), rgba(168,85,247,.08)), #f8fbff;
}
html:not(.dark) .lc-autocomplete-avatar {
  color: #0f172a;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-color: #dbeafe;
  box-shadow: 0 14px 32px -28px rgba(37,99,235,.9);
}
html:not(.dark) .lc-autocomplete-meta,
html:not(.dark) .lc-autocomplete-empty {
  color: #64748b;
}
html:not(.dark) .lc-autocomplete-stat {
  color: #334155;
}
html:not(.dark) .lc-autocomplete-badge {
  color: #2563eb;
  background: #eff6ff;
  border-color: #dbeafe;
}

.lc-follow-active {
  color: #fde68a !important;
  border-color: rgba(250,204,21,.42) !important;
  background: rgba(250,204,21,.12) !important;
}
.lc-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  padding: 11px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15,23,42,.96);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px -28px rgba(0,0,0,.85);
  font-size: 13px;
  font-weight: 700;
  transition: opacity .18s ease, transform .18s ease;
}
.lc-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lc-favorite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.lc-favorite-head h2 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}
.lc-favorite-head a {
  color: #67e8f9;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.lc-favorite-kicker {
  color: rgba(226,232,240,.48);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.lc-favorite-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lc-favorite-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.lc-favorite-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.32));
}
.lc-favorite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lc-favorite-body {
  min-width: 0;
}
.lc-favorite-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
}
.lc-favorite-meta,
.lc-favorite-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(226,232,240,.52);
  font-size: 11px;
  text-transform: capitalize;
}
.lc-favorite-count {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.lc-favorite-sub .is-positive { color: #22c55e; }
.lc-favorite-sub .is-negative { color: #ef4444; }
.lc-favorite-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.lc-favorite-open {
  padding: 6px 9px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.lc-favorite-actions button {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: rgba(226,232,240,.62);
  background: rgba(255,255,255,.05);
}
.lc-favorite-actions button:hover {
  color: #fff;
  background: rgba(239,68,68,.18);
}
.lc-favorite-empty {
  padding: 18px;
  color: rgba(226,232,240,.58);
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  text-align: center;
  font-size: 13px;
}
html:not(.dark) .lc-toast {
  color: #0f172a;
  background: rgba(255,255,255,.98);
  border-color: var(--lc-light-border);
}
html:not(.dark) .lc-favorite-kicker,
html:not(.dark) .lc-favorite-meta,
html:not(.dark) .lc-favorite-sub,
html:not(.dark) .lc-favorite-empty {
  color: #64748b;
}
html:not(.dark) .lc-favorite-card {
  background: #f8fbff;
  border-color: var(--lc-light-border);
}
html:not(.dark) .lc-favorite-open {
  color: #0f172a;
  background: #ffffff;
  border-color: var(--lc-light-border);
}
html:not(.dark) .lc-favorite-actions button {
  color: #64748b;
  background: #eef2f8;
}
@media (max-width: 640px) {
  .lc-autocomplete-panel {
    max-height: min(360px, calc(100vh - 100px));
  }
  .lc-autocomplete-item {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 9px;
  }
  .lc-autocomplete-avatar {
    width: 38px;
    height: 38px;
  }
  .lc-autocomplete-stat {
    display: none;
  }
  .lc-autocomplete-badge {
    min-width: 30px;
  }
  .lc-toast {
    bottom: 16px;
    max-width: calc(100vw - 28px);
    text-align: center;
  }
}

@media (max-width: 1280px) {
  .lc-favorite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .lc-favorite-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .lc-favorite-grid {
    grid-template-columns: 1fr;
  }
  .lc-favorite-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .lc-favorite-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] .lc-card {
  border-radius: 14px;
}
html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] aside .lc-card {
  box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
}
html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] input[name="q"] {
  min-height: 68px;
  background: #ffffff !important;
  border: 1px solid rgba(59,130,246,.52) !important;
  box-shadow: 0 0 0 1px rgba(168,85,247,.16), 0 20px 44px -36px rgba(59,130,246,.85) !important;
}
html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] .lc-card[style*="border-color"] {
  border-color: rgba(59,130,246,.35) !important;
  box-shadow: var(--lc-light-shadow-strong) !important;
}
html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] aside a.bg-white\/10,
html:not(.dark) .lg\:grid-cols-\[240px_1fr_300px\] aside a:hover {
  background: #eef7ff !important;
}

/* Trending */
html:not(.dark) .lc-trend-hero {
  background:
    linear-gradient(180deg, #ffffff, #fbfdff) padding-box,
    linear-gradient(135deg, rgba(139,92,246,.70), rgba(34,211,238,.75) 55%, rgba(59,130,246,.58)) border-box;
  box-shadow: var(--lc-light-shadow-strong);
}
html:not(.dark) .lc-trend-hero-rank {
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}
html:not(.dark) .lc-trend-hero-stat {
  background: #f8fbff;
  border-color: var(--lc-light-border);
}
html:not(.dark) table thead {
  background: #f8fbff !important;
  color: #64748b !important;
}
html:not(.dark) tbody tr:hover {
  background: #f8fbff !important;
}

/* Compare */
html:not(.dark) .lc-fs-vs-grid > .lc-card {
  background:
    radial-gradient(circle at 50% 0, rgba(59,130,246,.07), transparent 280px),
    #ffffff !important;
}
html:not(.dark) .lc-fs-vs-grid > .lc-card:nth-of-type(3) {
  background:
    radial-gradient(circle at 50% 0, rgba(239,68,68,.07), transparent 280px),
    #ffffff !important;
}
html:not(.dark) .lc-fs-vs-grid .border-\[\#0b0f1a\] {
  border-color: #ffffff !important;
}

/* Creator detail */
html:not(.dark) .lc-creator-live-card {
  background:
    radial-gradient(circle at 85% 20%, rgba(139,92,246,.08), transparent 340px),
    linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border-radius: 16px;
}
html:not(.dark) .lc-creator-live-card #lc-main-counter {
  color: #090d1a !important;
}
.lc-creator-live-spark {
  min-height: 210px;
  display: flex;
  align-items: center;
}
html:not(.dark) .lc-creator-live-spark {
  background: linear-gradient(180deg, rgba(59,130,246,.035), rgba(168,85,247,.045));
  border: 1px solid #eef2f8;
  border-radius: 14px;
  padding: 16px;
}

/* Milestones */
html:not(.dark) .bg-\[\#0b0f1c\] {
  background-color: #ffffff !important;
}
html:not(.dark) .border-dashed.border-cyan-400\/60 {
  background: #ffffff !important;
}
html:not(.dark) [style*="radial-gradient(circle, #a855f733"],
html:not(.dark) [style*="radial-gradient(circle, #22d3ee33"] {
  opacity: .58;
}
html:not(.dark) .peer-checked\:bg-cyan-400:checked + span,
html:not(.dark) input.peer:checked + span {
  background-color: #1d9bf0 !important;
}

@media (max-width: 1023px) {
  html:not(.dark) header.sticky { min-height: 64px; }
  html:not(.dark) .lc-home-search-panel { padding: 22px; }
  .lc-creator-live-spark { min-height: 150px; }
}

/* Accessibility: honor the OS "reduce motion" preference. The live counters
   still update their numbers (that's content, not decoration), but the
   infinite shimmer/pulse loops and non-essential transitions are stilled. */
@media (prefers-reduced-motion: reduce) {
  .lc-pulse-dot,
  .lc-skeleton::after {
    animation: none !important;
  }
  .lc-skeleton::after { display: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}