/* ================================================================
   OMNI PROPS — SITE-WIDE PREMIUM VISUAL SYSTEM
   Extends the Compare-page visual language across the main site.
   Intentional: preserve existing headers + hero artwork.
   ================================================================ */
:root {
  --omni-gold: #e0b25c;
  --omni-gold-hot: #f2cc78;
  --omni-gold-rgb: 224, 178, 92;
  --omni-surface: #0b1220;
  --omni-surface-2: #0f1929;
  --omni-surface-3: #131f32;
  --omni-line: rgba(148, 163, 184, 0.16);
  --omni-line-strong: rgba(148, 163, 184, 0.25);
  --omni-shadow: 0 18px 42px rgba(0,0,0,.26);
  --omni-shadow-hover:
    0 0 0 1px rgba(var(--omni-gold-rgb), .30),
    0 0 26px -7px rgba(var(--omni-gold-rgb), .56),
    0 22px 48px -22px rgba(0,0,0,.78);
  --omni-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Keep the site background calm. Depth belongs to content surfaces. */
html { background: var(--bg); }
body { min-height: 100vh; }
::selection { background: rgba(var(--omni-gold-rgb), .28); color: #fff; }

/* Quiet background layer: the Compare-page treatment is the site baseline.
   Hero artwork remains on the hero itself; there is no full-page image wash. */
body::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--royal-rgb), .045), transparent 34%),
    radial-gradient(circle at 15% 28%, rgba(var(--amber-rgb), .038), transparent 38%),
    radial-gradient(circle at 86% 20%, rgba(var(--royal-rgb), .032), transparent 34%),
    var(--bg) !important;
}

/* The existing cursor spotlight is retained, but its highlight is harmonized
   with the gold hover language instead of competing with it in cyan. */
.propfirm-card::before, .discount-card::before, .path-card::before,
.podium-card::before, .offer-tile::before, .firm-card::before, .quick-compare-card::before {
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--omni-gold-rgb), .11),
    rgba(var(--omni-gold-rgb), .035) 40%,
    transparent 68%) !important;
}

/* ----------------------------------------------------------------
   CORE PANEL FAMILY
   The header and hero are intentionally excluded so existing branding
   and hero artwork remain untouched.
   ---------------------------------------------------------------- */
.path-card,
.propfirm-card,
.stat-item,
.podium-card,
.carousel-card,
.value-item,
.discount-card,
.firm-card,
.cc-inputs,
.cc-result-panel,
.cc-bulk-panel,
.cc-calc,
.cc-cta,
.filter-bar,
.offers-panel,
.offer-tile,
.code-box,
.rule-card,
.rules-table-wrap,
.rules-jump-nav,
.faq-item,
.email-capture,
.launch-card,
.yt-card,
.leaderboard-row,
.quick-compare-card,
.mini-stat-card,
.breakdown-panel,
.earnings-panel,
.earnings-card,
.matchup-header,
.matchup-picker-pill,
.ninjatrader-banner,
.variant-group,
.reset-card,
.auth-form {
  position: relative;
  transition:
    transform .28s var(--omni-ease),
    border-color .22s ease,
    box-shadow .28s ease,
    background-color .22s ease;
}

/* More opaque surfaces, less frosted-glass dependency. */
.path-card,
.propfirm-card,
.stat-item,
.podium-card,
.carousel-card,
.value-item,
.discount-card,
.firm-card,
.cc-inputs,
.cc-result-panel,
.cc-bulk-panel,
.cc-calc,
.cc-cta,
.offers-panel,
.offer-tile,
.rule-card,
.rules-table-wrap,
.rules-jump-nav,
.email-capture,
.launch-card,
.yt-card,
.leaderboard-row,
.reset-card,
.auth-form {
  background-color: var(--omni-surface) !important;
  border-color: var(--omni-line) !important;
  box-shadow: var(--omni-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ----------------------------------------------------------------
   THE GOLD HOVER LANGUAGE — same bounce-up feel as the Compare page,
   applied to every panel/card site-wide (not just Discounts/Compare).
   ---------------------------------------------------------------- */
.path-card,
.propfirm-card,
.stat-item,
.podium-card,
.carousel-card,
.value-item,
.discount-card,
.firm-card,
.cc-inputs,
.cc-result-panel,
.cc-bulk-panel,
.cc-calc,
.cc-cta,
.filter-bar,
.offers-panel,
.offer-tile,
.rule-card,
.rules-table-wrap,
.rules-jump-nav,
.email-capture,
.launch-card,
.yt-card,
.leaderboard-row,
.quick-compare-card,
.mini-stat-card,
.breakdown-panel,
.earnings-panel,
.earnings-card,
.matchup-header,
.matchup-picker-pill,
.ninjatrader-banner,
.variant-group,
.reset-card,
.auth-form {
  position: relative;
  isolation: isolate;
  transition:
    transform .28s var(--omni-ease),
    border-color .22s ease,
    box-shadow .28s ease,
    background-color .22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .path-card:hover,
  .propfirm-card:hover,
  .stat-item:hover,
  .podium-card:hover,
  .carousel-card:hover,
  .value-item:hover,
  .discount-card:hover,
  .firm-card:hover,
  .cc-inputs:hover,
  .cc-result-panel:hover,
  .cc-bulk-panel:hover,
  .cc-calc:hover,
  .cc-cta:hover,
  .filter-bar:hover,
  .offers-panel:hover,
  .offer-tile:hover,
  .rule-card:hover,
  .rules-table-wrap:hover,
  .rules-jump-nav:hover,
  .email-capture:hover,
  .launch-card:hover,
  .yt-card:hover,
  .leaderboard-row:hover,
  .quick-compare-card:hover,
  .mini-stat-card:hover,
  .breakdown-panel:hover,
  .earnings-panel:hover,
  .earnings-card:hover,
  .matchup-header:hover,
  .matchup-picker-pill:hover,
  .ninjatrader-banner:hover,
  .variant-group:hover,
  .reset-card:hover,
  .auth-form:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--omni-gold-rgb), .82) !important;
    box-shadow: var(--omni-shadow-hover) !important;
  }

  /* Bigger/wider panels get a smaller lift so they don't feel like
     they're jumping — matches the Compare page's own scaling. */
  .matchup-header:hover,
  .breakdown-panel:hover,
  .earnings-panel:hover,
  .ninjatrader-banner:hover,
  .rules-table-wrap:hover,
  .offers-panel:hover {
    transform: translateY(-2px);
  }

  .stat-item:hover,
  .carousel-card:hover,
  .value-item:hover,
  .leaderboard-row:hover {
    transform: translateY(-3px);
  }
}

/* A soft inner-edge glow on hover — a lit edge rather than a big neon
   aura, matching the Compare page's treatment. */
.path-card::before,
.propfirm-card::before,
.podium-card::before,
.carousel-card::before,
.value-item::before,
.discount-card::before,
.firm-card::before,
.offer-tile::before,
.rule-card::before,
.launch-card::before,
.yt-card::before,
.quick-compare-card::before,
.mini-stat-card::before,
.breakdown-panel::before,
.earnings-panel::before,
.earnings-card::before,
.matchup-header::before,
.matchup-picker-pill::before,
.ninjatrader-banner::before,
.variant-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  z-index: -1;
}

/* Strong panels get the beveled inner edge used by the best sale cards. */
.propfirm-card,
.discount-card,
.firm-card,
.rule-card,
.quick-compare-card,
.podium-card,
.offers-panel,
.earnings-card,
.cc-result-panel,
.cc-inputs,
.path-card,
.launch-card,
.yt-card {
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.035),
    inset -1px -1px 0 rgba(0,0,0,.22),
    var(--omni-shadow);
}

/* Make the first interaction feel tactile without changing dimensions. */
button,
a.button,
.btn,
.btn-app,
.btn-app-blue,
.copy-btn,
.cc-cta-btn,
.nav-login,
.nav-signup,
.carousel-arrow,
.mobile-menu-btn {
  transition:
    transform .18s var(--omni-ease),
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background-color .18s ease;
}

button:hover,
a.button:hover,
.btn:hover,
.btn-app:hover,
.btn-app-blue:hover,
.copy-btn:hover,
.cc-cta-btn:hover,
.carousel-arrow:hover {
  transform: translateY(-1px);
}

/* Gold-focused interaction for secondary controls; primary branding colors stay intact. */
.copy-btn:hover,
.carousel-arrow:hover,
.cc-cta-btn.cc-cta-btn-dark:hover,
.btn-ghost:hover,
.nav-login:hover {
  border-color: rgba(var(--omni-gold-rgb), .80) !important;
  box-shadow: 0 0 18px -7px rgba(var(--omni-gold-rgb), .58);
}

/* ----------------------------------------------------------------
   SECTION HEADINGS — cleaner editorial rhythm without touching heroes.
   ---------------------------------------------------------------- */
.section-head {
  position: relative;
  margin-bottom: 22px;
}
.section-head h2 {
  letter-spacing: -.018em;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--omni-gold-hot), transparent);
  box-shadow: 0 0 12px -3px rgba(var(--omni-gold-rgb), .7);
}
.section-head .hint {
  opacity: .82;
}

/* ----------------------------------------------------------------
   FIRM / OFFER CARDS — sharper hierarchy and better scanability.
   ---------------------------------------------------------------- */
.firm-card .firm-name,
.propfirm-card .propfirm-name,
.discount-card .firm,
.podium-name,
.carousel-card .c-name {
  letter-spacing: -.01em;
}

.propfirm-card .propfirm-score-value,
.firm-card .score,
.discount-card .pct,
.leaderboard-score {
  text-shadow: 0 0 16px rgba(var(--omni-gold-rgb), .10);
}

.discount-card:hover .code-box,
.firm-card:hover .code-box {
  border-color: rgba(var(--omni-gold-rgb), .62);
}

/* Featured/high-value items retain their own accent, but the hover edge is gold. */
.propfirm-card.featured:hover,
.podium-card.gold:hover {
  border-color: rgba(var(--omni-gold-rgb), .88) !important;
}

/* ----------------------------------------------------------------
   FILTERS / SEARCH / INPUTS — make tools feel like a trading terminal.
   ---------------------------------------------------------------- */
.filter-bar {
  padding: 10px;
  border: 1px solid var(--omni-line);
  border-radius: 14px;
}
.filter-bar select,
.filter-bar input,
input,
select,
textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.filter-bar select:hover,
.filter-bar input:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: rgba(var(--omni-gold-rgb), .46) !important;
}
.filter-bar select:focus,
.filter-bar input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--omni-gold-rgb), .78) !important;
  box-shadow: 0 0 0 3px rgba(var(--omni-gold-rgb), .08), 0 8px 20px -14px rgba(var(--omni-gold-rgb), .65) !important;
}

/* ----------------------------------------------------------------
   TABLES — subtle row motion + gold hover, stronger readability.
   ---------------------------------------------------------------- */
.rules-table-wrap,
.breakdown-panel,
.ledger-wrap {
  overflow-x: auto;
}
.rules-table tbody tr,
.breakdown-table tbody tr,
table.ledger tbody tr {
  transition: transform .16s ease, background-color .16s ease;
}
.rules-table tbody tr:hover,
.breakdown-table tbody tr:hover,
table.ledger tbody tr:hover {
  transform: translateX(2px);
}
.rules-table tbody tr:hover td,
.breakdown-table tbody tr:hover td,
table.ledger tbody tr:hover td {
  background: rgba(var(--omni-gold-rgb), .035) !important;
}

/* ----------------------------------------------------------------
   FAQ / SMALL INFORMATION PANELS — quietly interactive.
   ---------------------------------------------------------------- */
.faq-item:hover {
  padding-left: 6px;
  border-bottom-color: rgba(var(--omni-gold-rgb), .45) !important;
}
.faq-question:hover { color: #fff; }

/* ----------------------------------------------------------------
   REQUESTED PAGE-SPECIFIC POPUP INTERACTION
   Keep the existing card appearance at rest; only Discounts and Rules
   get the stronger lift/scale + gold edge interaction requested.
   ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body.page-discounts .discount-card,
  body.page-discounts .email-capture,
  body.page-rules .rule-card,
  body.page-rules .rules-jump-nav,
  body.page-rules .rules-table-wrap,
  body.page-rules .faq-item {
    transition:
      transform .28s var(--omni-ease),
      border-color .22s ease,
      box-shadow .28s ease,
      background-color .22s ease !important;
  }

  body.page-discounts .discount-card:hover,
  body.page-discounts .email-capture:hover,
  body.page-rules .rule-card:hover,
  body.page-rules .rules-jump-nav:hover,
  body.page-rules .rules-table-wrap:hover,
  body.page-rules .faq-item:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(var(--omni-gold-rgb), .82) !important;
    box-shadow:
      0 0 0 1px rgba(var(--omni-gold-rgb), .24),
      0 0 24px -8px rgba(var(--omni-gold-rgb), .46),
      0 20px 44px -22px rgba(0,0,0,.78) !important;
  }

  body.page-rules .rules-table-wrap:hover {
    transform: translateY(-3px) scale(1.006);
  }
}

/* Home: center the existing heading across the full panel width, while
   keeping the badge and action pinned to their original sides. */
.offers-panel-header.home-offers-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.offers-panel-header.home-offers-header .offers-panel-badge { justify-self: start; }
.offers-panel-header.home-offers-header .offers-panel-title { justify-self: center; }
.offers-panel-header.home-offers-header .btn { justify-self: end; }

@media (max-width: 700px) {
  .offers-panel-header.home-offers-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .offers-panel-header.home-offers-header .offers-panel-badge,
  .offers-panel-header.home-offers-header .offers-panel-title,
  .offers-panel-header.home-offers-header .btn {
    justify-self: center;
  }
}

/* ----------------------------------------------------------------
   EMAIL CAPTURE / CTA BANDS — premium callout treatment.
   ---------------------------------------------------------------- */
.email-capture,
.cc-cta,
.ninjatrader-banner {
  overflow: hidden;
}
.email-capture::before,
.cc-cta::before,
.ninjatrader-banner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--omni-gold-rgb), .72), transparent);
  opacity: .55;
  pointer-events: none;
}
.ninjatrader-banner::before { opacity: .05; }

/* ----------------------------------------------------------------
   NOTE: card entrance motion is intentionally NOT handled here.
   The site already has a scroll-triggered reveal system (fade + rise
   as each card scrolls into view — see [data-reveal] in style.css and
   initScrollReveal() in app.js). An earlier version of this file added
   its own "omni-panel-enter" animation on the same cards, which played
   automatically the instant each card was created (on page load),
   completing in ~0.5s regardless of scroll position. Because a CSS
   `animation` takes precedence over the plain opacity/transform
   declarations the reveal system relies on, that animation silently
   finished the reveal for every card immediately — including cards
   still off-screen — so nothing appeared to happen when actually
   scrolling. Removed for that reason; do not re-add a duplicate
   entrance animation on these classes.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   COMPARISON-PAGE COMPATIBILITY
   Keep the existing compare page's stronger hero and V3 design intact.
   These only reinforce global surface behavior.
   ---------------------------------------------------------------- */
.compare-page .quick-compare-card:hover,
.compare-page .mini-stat-card:hover,
.compare-page .breakdown-panel:hover,
.compare-page .earnings-panel:hover,
.compare-page .earnings-card:hover {
  border-color: rgba(var(--omni-gold-rgb), .82) !important;
}

/* ----------------------------------------------------------------
   SCROLLBAR / FOCUS POLISH
   ---------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--omni-gold-rgb), .38) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(var(--omni-gold-rgb), .30);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--omni-gold-rgb), .58); }
*:focus-visible {
  outline-color: var(--omni-gold-hot) !important;
  box-shadow: 0 0 0 3px rgba(var(--omni-gold-rgb), .10);
}

/* No hero/header selectors here: their existing artwork and structure stay as-is. */

/* Better long-table usability: the column header stays visible while scrolling. */
table.rules-table thead th,
table.ledger thead th,
.breakdown-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Active filters fit the premium gold language while keeping inactive chips quiet. */
.filter-chip.active {
  color: var(--omni-gold-hot) !important;
  border-color: rgba(var(--omni-gold-rgb), .70) !important;
  background: rgba(var(--omni-gold-rgb), .09) !important;
  box-shadow: 0 0 18px -9px rgba(var(--omni-gold-rgb), .55);
}

/* Small icon/badge lift on hover makes dense pages feel more responsive. */
@media (hover: hover) and (pointer: fine) {
  .firm-card .firm-logo,
  .propfirm-card .propfirm-logo,
  .podium-logo,
  .carousel-card .c-logo,
  .mini-stat-icon,
  .qc-logo {
    transition: transform .22s var(--omni-ease), box-shadow .22s ease;
  }
  .firm-card:hover .firm-logo,
  .propfirm-card:hover .propfirm-logo,
  .podium-card:hover .podium-logo,
  .carousel-card:hover .c-logo,
  .mini-stat-card:hover .mini-stat-icon,
  .quick-compare-card:hover .qc-logo {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 8px 20px -8px rgba(var(--omni-gold-rgb), .45);
  }
}


/* ----------------------------------------------------------------
   HOMEPAGE SOCIALS + SUB-NAV SHARE TICKET
   ---------------------------------------------------------------- */
.site-share-ticket {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 30px;
  padding: 0;
  border: 0;
  clip-path: polygon(0 0,100% 0,100% 20%,94% 25%,100% 30%,100% 70%,94% 75%,100% 80%,100% 100%,0 100%,0 80%,6% 75%,0 70%,0 30%,6% 25%,0 20%);
  color: #241904;
  background: linear-gradient(180deg, #fff0a0 0%, #f4c94f 48%, #d79a20 100%);
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 205, 65, .72)) drop-shadow(0 0 12px rgba(255, 190, 35, .34));
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 30px;
  text-align: center;
  z-index: 2;
  animation: omni-share-ticket-pulse 2.1s ease-in-out infinite;
  transition: transform .2s ease, filter .2s ease;
}
.site-share-ticket:hover {
  transform: translateY(-50%) scale(1.06);
  filter: drop-shadow(0 0 7px rgba(255, 225, 105, .9)) drop-shadow(0 0 17px rgba(255, 190, 35, .5));
}
.site-share-ticket:active { transform: translateY(-50%) scale(.98); }
@keyframes omni-share-ticket-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 205, 65, .62)) drop-shadow(0 0 10px rgba(255, 190, 35, .28)); }
  50% { filter: drop-shadow(0 0 7px rgba(255, 220, 90, .95)) drop-shadow(0 0 17px rgba(255, 190, 35, .48)); }
}

.home-socials {
  width: min(100%, 930px);
  margin: 25px auto 2px;
  padding: 16px 0 0;
  text-align: center;
}
.home-socials-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 12px;
}
.home-socials-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--text-faint);
  white-space: nowrap;
}
.home-socials-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--omni-gold-rgb), 0), rgba(var(--omni-gold-rgb), .5), rgba(var(--omni-gold-rgb), 0));
}
.home-socials-links {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}
.home-social-link {
  flex: 1 1 0;
  max-width: 270px;
  min-width: 185px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(16,24,42,.78), rgba(8,13,26,.72));
  color: var(--text);
  text-align: left;
  text-decoration: none !important;
  box-shadow: 0 10px 28px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.home-social-link:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--omni-gold-rgb), .48);
  background: linear-gradient(180deg, rgba(22,32,54,.92), rgba(9,14,27,.84));
  box-shadow: 0 15px 34px -20px rgba(53,216,255,.35), 0 0 22px -12px rgba(var(--omni-gold-rgb), .55);
}
.home-social-icon {
  width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 0 15px rgba(255,255,255,.025);
}
.home-social-icon img { width: 20px; height: 20px; display: block; }
.home-social-link > span:last-child { display: grid; gap: 2px; min-width: 0; }
.home-social-link strong { font-family: var(--font-display); font-size: 13px; color: var(--text); }
.home-social-link small { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-x .home-social-icon { background: rgba(255,255,255,.08); }
.social-discord .home-social-icon { background: rgba(88,101,242,.18); border-color: rgba(88,101,242,.34); }
.social-facebook .home-social-icon { background: rgba(24,119,242,.18); border-color: rgba(24,119,242,.34); }

@media (max-width: 1180px) {
  .site-share-ticket { right: -8px; }
}
@media (max-width: 700px) {
  .home-socials { margin-top: 20px; }
  .home-socials-links { flex-direction: column; align-items: center; }
  .home-social-link { width: min(100%, 330px); max-width: 330px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-share-ticket { animation: none; transition: none; }
  .home-social-link { transition: none; }
}

/* ----------------------------------------------------------------
   Omni Props image + link sharing modal
   ---------------------------------------------------------------- */
.codes-share-trigger { cursor: pointer; user-select: none; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.codes-share-trigger:hover { filter: drop-shadow(0 0 7px rgba(255,215,90,.8)); transform: translateY(-1px); }
.codes-share-trigger.is-sharing { animation: omni-share-spin-pulse .7s ease-in-out infinite alternate; }
@keyframes omni-share-spin-pulse { from { filter: drop-shadow(0 0 5px rgba(79,209,255,.6)); } to { filter: drop-shadow(0 0 15px rgba(255,205,70,1)); } }
.omni-share-modal { position: fixed; inset: 0; z-index: 10000; display:grid; place-items:center; padding:20px; background:rgba(2,7,15,.78); backdrop-filter:blur(8px); }
.omni-share-modal[hidden] { display:none; }
.omni-share-dialog { width:min(760px,100%); max-height:min(92vh,820px); overflow:auto; padding:18px; border:1px solid rgba(224,178,92,.45); border-radius:18px; background:linear-gradient(180deg,#0c1728,#060c17); box-shadow:0 25px 80px rgba(0,0,0,.62),0 0 40px rgba(224,178,92,.13),inset 0 1px 0 rgba(255,255,255,.05); }
.omni-share-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.omni-share-top h3 { margin:0; font-family:var(--font-display); font-size:19px; color:var(--text); }
.omni-share-close { width:34px; height:34px; border-radius:9px; border:1px solid var(--border-soft); background:rgba(255,255,255,.04); color:var(--text-muted); font-size:22px; cursor:pointer; }
.omni-share-close:hover { color:var(--text); border-color:rgba(224,178,92,.55); }
.omni-share-preview { border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; background:#050b14; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.omni-share-image-wrap { background:#020711; border-bottom:1px solid rgba(255,255,255,.07); }
.omni-share-image { display:block; width:100%; height:auto; max-height:58vh; object-fit:contain; }
.omni-share-preview-body { padding:14px 16px 15px; }
.omni-share-site { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); }
.omni-share-site img { width:24px; height:24px; object-fit:contain; border-radius:6px; }
.omni-share-preview-body h4 { margin:0 0 6px; font-family:var(--font-display); font-size:20px; color:var(--text); }
.omni-share-preview-body p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.omni-share-actions { display:flex; gap:10px; margin-top:14px; }
.omni-share-action { flex:1; min-height:44px; border-radius:10px; border:1px solid var(--border-soft); background:rgba(255,255,255,.045); color:var(--text); cursor:pointer; font-family:var(--font-mono); font-size:12px; font-weight:700; transition:transform .18s ease, filter .18s ease, border-color .18s ease; }
.omni-share-action.primary { color:#171717; background:#e0b25c; border-color:#e0b25c; }
.omni-share-action.primary:hover { color:#171717; background:#f0c978; border-color:#f0c978; }
.omni-share-action:not(.primary):hover { border-color:rgba(224,178,92,.6); background:rgba(224,178,92,.08); }
.omni-share-action:hover { transform:translateY(-2px); filter:brightness(1.06); }
body.omni-share-open { overflow:hidden; }
@media(max-width:600px) { .omni-share-modal { padding:10px; } .omni-share-dialog { padding:12px; border-radius:15px; } .omni-share-image { max-height:48vh; } }

/* v38 share reliability: make the Top Codes lightning control visibly interactive. */
.codes-share-trigger[role="button"]{outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.codes-share-trigger[role="button"]:focus-visible{box-shadow:0 0 0 2px rgba(245,196,81,.75),0 0 18px rgba(245,196,81,.35)}