/* =========================================================
   GEM CSS SPLIT FROM index.html
   Source preserved in original order.
   ========================================================= */



/* ===== GEM CSS BLOCK 1 ===== */
:root {
      --gem-bg-0: #061a22;
      --gem-bg-1: #073540;
      --gem-bg-2: #0a5360;
      --gem-ink: #0b2630;
      --gem-panel: rgba(235, 247, 249, 0.94);
      --gem-line: rgba(151, 230, 241, 0.78);
      --gem-line-dark: rgba(202, 250, 255, 0.22);
      --gem-search-h: clamp(3.05rem, 5.2vw, 3.75rem);
      --gem-shell-w: min(46rem, calc(100vw - 1.5rem));
      --gem-footer-w: min(43rem, calc(100vw - 1.25rem));
      --gem-ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
      --gem-search-font: clamp(0.92rem, 2.2vw, 1.16rem);
      --gem-footer-font: clamp(0.56rem, 1.25vw, 0.78rem);
      --gem-body-font: clamp(0.82rem, 1.25vw, 0.98rem);
      --gem-title-font: clamp(1.18rem, 2.7vw, 1.85rem);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 52% 48%, rgba(34, 124, 135, 0.58), transparent 36rem),
        radial-gradient(circle at 15% 8%, rgba(14, 64, 76, 0.92), transparent 30rem),
        linear-gradient(145deg, var(--gem-bg-0), var(--gem-bg-1) 52%, var(--gem-bg-2));
      color: var(--gem-ink);
      font-family: var(--gem-ui-font);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    body {
      min-height: 100svh;
    }

    button,
    input {
      font-family: inherit;
    }

    .gem-app {
      position: relative;
      width: min(100vw, 1240px);
      min-height: 100svh;
      margin: 0 auto;
      padding: clamp(1rem, 3vw, 2rem) clamp(0.65rem, 2vw, 2rem) clamp(6.75rem, 11vh, 8rem);
      overflow: hidden;
    }

    .gem-search-shell {
      position: relative;
      z-index: 70;
      width: var(--gem-shell-w);
      max-width: var(--gem-shell-w);
      margin: 0 auto;
      padding: 0;
    }

    .gem-search-bar {
      position: relative;
      width: 100%;
      height: var(--gem-search-h);
      display: grid;
      grid-template-columns: auto 0 minmax(0, 1fr) 0;
      align-items: center;
      gap: 0;
      padding: clamp(0.22rem, 0.8vw, 0.35rem);
      border: 1px solid rgba(206, 253, 255, 0.82);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(249, 254, 255, 0.97), rgba(224, 240, 244, 0.95));
      box-shadow:
        0 0 0 1px rgba(151, 230, 241, 0.25) inset,
        0 1.15rem 3rem rgba(0, 8, 12, 0.2);
      overflow: hidden;
    }

    body.gem-role-locked .gem-search-bar {
      grid-template-columns: auto clamp(2rem, 5.6vw, 2.6rem) minmax(0, 1fr) clamp(2rem, 5.6vw, 2.6rem);
      gap: clamp(0.18rem, 1vw, 0.34rem);
    }

    .stone-button {
      width: calc(var(--gem-search-h) - 0.52rem);
      height: calc(var(--gem-search-h) - 0.52rem);
      min-width: calc(var(--gem-search-h) - 0.52rem);
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(130, 218, 231, 0.95);
      border-radius: 999px;
      background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.96), rgba(219,249,252,0.78) 58%, rgba(188,240,246,0.86));
      color: #092933;
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.58) inset,
        0 0 0.85rem rgba(147,245,255,0.32);
    }

    .stone-button:hover,
    .stone-button:focus-visible {
      outline: none;
      border-color: rgba(101, 213, 231, 1);
      filter: brightness(1.04);
    }

    .stone-mark {
      display: block;
      font-size: clamp(1.35rem, 3vw, 1.85rem);
      line-height: 1;
      transform: translateY(-0.02em);
    }

    .search-nav-arrow {
      display: none;
      width: clamp(2rem, 5.6vw, 2.6rem);
      height: clamp(2rem, 5.6vw, 2.6rem);
      min-width: clamp(2rem, 5.6vw, 2.6rem);
      padding: 0;
      border: 1px solid rgba(202, 250, 255, 0.72);
      border-radius: 999px;
      align-items: center;
      justify-content: center;
      background: rgba(236, 250, 252, 0.84);
      color: #0b2630;
      font-size: clamp(1.35rem, 4.7vw, 1.85rem);
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      box-shadow:
        inset 0 0 0 1px rgba(118, 208, 220, 0.42),
        0 0.45rem 1rem rgba(3, 22, 28, 0.14);
    }

    body.gem-role-locked .search-nav-arrow {
      display: inline-flex;
    }

    .search-input {
      width: 100%;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      padding: 0 clamp(0.3rem, 1.4vw, 0.72rem);
      background: transparent;
      color: #102f39;
      font-size: var(--gem-search-font);
      font-weight: 850;
      letter-spacing: -0.055em;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.gem-role-locked .search-input {
      text-align: center;
      font-weight: 900;
    }

    .search-input::placeholder {
      color: rgba(40, 69, 80, 0.48);
      opacity: 1;
    }

    .search-input::-webkit-search-cancel-button,
    .search-input::-webkit-search-decoration {
      display: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .dropdown {
      position: absolute;
      z-index: 65;
      top: calc(clamp(1rem, 3vw, 2rem) + var(--gem-search-h) + 0.75rem);
      left: 50%;
      transform: translateX(-50%);
      width: min(36rem, calc(100vw - 1.5rem));
      max-height: min(62svh, 620px);
      display: none;
      padding: clamp(0.65rem, 1.8vw, 1rem);
      border: 1px solid var(--gem-line-dark);
      border-radius: 1.25rem;
      background:
        linear-gradient(180deg, rgba(9, 38, 47, 0.96), rgba(7, 31, 39, 0.94));
      box-shadow:
        0 1.6rem 5rem rgba(0, 5, 8, 0.38),
        inset 0 0 0 1px rgba(204, 250, 255, 0.08);
      backdrop-filter: blur(18px);
      overflow: auto;
    }

    .dropdown.open {
      display: grid;
      gap: clamp(0.55rem, 1.3vw, 0.8rem);
    }

    .dropdown-row {
      width: 100%;
      min-height: clamp(4.25rem, 7.5vw, 5.65rem);
      display: grid;
      grid-template-columns: clamp(2.8rem, 6vw, 4.15rem) minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(0.65rem, 2vw, 1rem);
      padding: clamp(0.65rem, 1.9vw, 0.95rem) clamp(0.78rem, 2.2vw, 1.2rem);
      border: 1px solid rgba(203, 250, 255, 0.18);
      border-radius: 1.1rem;
      background: rgba(16, 48, 58, 0.78);
      color: rgba(239, 252, 255, 0.97);
      cursor: pointer;
      text-align: left;
      font: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    }

    .dropdown-row:hover,
    .dropdown-row:focus-visible {
      outline: none;
      border-color: rgba(153, 234, 244, 0.48);
      background: rgba(19, 62, 73, 0.9);
    }

    .row-icon {
      display: grid;
      place-items: center;
      width: clamp(1.9rem, 4vw, 2.45rem);
      height: clamp(1.9rem, 4vw, 2.45rem);
      font-size: clamp(1.25rem, 2.8vw, 1.85rem);
      line-height: 1;
    }

    .row-title {
      display: block;
      color: #f7feff;
      font-size: clamp(0.98rem, 2.2vw, 1.28rem);
      font-weight: 900;
      letter-spacing: -0.045em;
      line-height: 1.02;
    }

    .row-sub {
      display: block;
      margin-top: 0.22rem;
      color: rgba(226, 240, 244, 0.72);
      font-size: clamp(0.72rem, 1.55vw, 0.9rem);
      font-weight: 750;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }

    .row-count {
      color: rgba(233, 246, 250, 0.78);
      font-size: clamp(0.78rem, 1.75vw, 0.98rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      white-space: nowrap;
    }

    .dropdown-empty {
      padding: 1rem;
      color: rgba(237, 252, 255, 0.82);
      font-size: var(--gem-body-font);
      font-weight: 800;
      text-align: center;
    }

    #stonePanel.dropdown.open {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(4.15rem, auto);
      gap: 0.72rem;
      width: min(92vw, 42rem);
      max-width: calc(100vw - 1.75rem);
      max-height: none;
      overflow: visible;
      padding: 0.82rem;
      align-items: stretch;
    }

    #stonePanel .dropdown-row {
      min-height: 4.15rem;
      grid-template-columns: 2rem minmax(0, 1fr) auto;
      column-gap: 0.78rem;
      padding: 0.72rem 0.82rem;
      border-radius: 1rem;
      overflow: hidden;
    }

    #stonePanel .row-title,
    #stonePanel .row-sub {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .browse-label,
    .browse-arrow {
      display: none !important;
    }

    .diamond-stage {
      position: relative;
      z-index: 10;
      width: min(43rem, calc(100vw - 1.75rem));
      height: clamp(26rem, 58svh, 38rem);
      margin: clamp(1.35rem, 4svh, 2.8rem) auto 0;
      padding-bottom: 7rem;
      overflow: visible;
    }

    .diamond-dot {
      position: absolute;
      width: clamp(1.05rem, 2.55vw, 1.52rem);
      height: clamp(1.05rem, 2.55vw, 1.52rem);
      min-width: clamp(1.05rem, 2.55vw, 1.52rem);
      min-height: clamp(1.05rem, 2.55vw, 1.52rem);
      transform: translate(-50%, -50%);
      border: 1px solid rgba(213, 255, 255, 0.86);
      border-radius: 999px;
      background:
        radial-gradient(circle at 31% 25%, rgba(255,255,255,1) 0%, rgba(245,255,255,0.98) 18%, rgba(213,248,251,0.95) 58%, rgba(170,226,231,0.9) 100%);
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.46) inset,
        0 0.16rem 0.28rem rgba(2,28,36,0.16),
        0 0 0.78rem rgba(168,248,255,0.56),
        0 0 1.7rem rgba(145,238,248,0.22);
      animation: gemPulse 6.8s ease-in-out infinite;
    }

    .diamond-dot::before {
      content: "";
      position: absolute;
      inset: -52%;
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle, rgba(163,248,255,0.28), rgba(163,248,255,0.09) 42%, transparent 72%);
      filter: blur(0.08rem);
      animation: gemHalo 7.8s ease-in-out infinite;
    }

    .diamond-dot:hover,
    .diamond-dot:focus-visible {
      outline: none;
      filter: brightness(1.08) saturate(1.08);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.58) inset,
        0 0.16rem 0.28rem rgba(2,28,36,0.16),
        0 0 1rem rgba(189,252,255,0.72),
        0 0 2.05rem rgba(145,238,248,0.32);
    }

    @keyframes gemPulse {
      0%, 100% { filter: brightness(1) saturate(1); }
      50% { filter: brightness(1.045) saturate(1.04); }
    }

    @keyframes gemHalo {
      0%, 100% { opacity: 0.52; transform: scale(0.96); }
      50% { opacity: 0.82; transform: scale(1.04); }
    }

    .footer-strip {
      position: fixed;
      left: 50%;
      bottom: max(0.64rem, env(safe-area-inset-bottom));
      z-index: 80;
      width: var(--gem-footer-w);
      max-width: var(--gem-footer-w);
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(0.28rem, 0.72vw, 0.54rem) clamp(0.34rem, 0.92vw, 0.72rem);
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .footer-chip {
      width: 100%;
      min-width: 0;
      height: clamp(1.12rem, 2.3vw, 1.58rem);
      min-height: clamp(1.12rem, 2.3vw, 1.58rem);
      padding: 0 clamp(0.18rem, 0.52vw, 0.42rem);
      border-radius: 999px;
      border: 1px solid rgba(212, 252, 255, 0.78);
      background:
        linear-gradient(180deg, rgba(244,254,255,0.97), rgba(211,244,248,0.91));
      color: #07313d;
      font-size: var(--gem-footer-font);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.055em;
      text-align: center;
      text-transform: lowercase;
      white-space: nowrap;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.52) inset,
        0 0.2rem 0.48rem rgba(5,38,48,0.18);
    }

    .footer-chip:hover,
    .footer-chip:focus-visible {
      filter: brightness(1.04);
      outline: none;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(5.5rem, 12vh, 7.25rem) 1rem clamp(6.25rem, 14vh, 8rem);
      background: rgba(2, 18, 24, 0.38);
      backdrop-filter: blur(7px);
      overflow-y: auto;
    }

    .modal.open {
      display: flex;
    }

    .modal .card {
      width: min(35rem, calc(100vw - 1.5rem));
      max-height: min(66svh, 620px);
      overflow-y: auto;
      padding: clamp(1.1rem, 2.6vw, 1.55rem);
      border-radius: 1.25rem;
      margin: 0 auto;
      background: rgba(239, 249, 251, 0.96);
      color: #102f39;
      box-shadow:
        0 1.6rem 4.5rem rgba(0, 6, 10, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .modal .kicker {
      margin: 0 0 0.35rem;
      color: rgba(16, 47, 57, 0.62);
      font-size: 0.68rem;
      font-weight: 950;
      letter-spacing: 0.28em;
      line-height: 1;
      text-transform: uppercase;
    }

    .modal .kicker:empty {
      display: none;
    }

    .modal .title {
      margin: 0 0 0.42rem;
      color: #102f39;
      font-size: var(--gem-title-font);
      font-weight: 950;
      letter-spacing: -0.055em;
      line-height: 0.98;
    }

    .modal .meta {
      margin: 0 0 0.85rem;
      color: rgba(16, 47, 57, 0.66);
      font-size: clamp(0.86rem, 1.8vw, 1rem);
      font-weight: 850;
      line-height: 1.2;
    }

    .modal p,
    .modal li {
      color: #102f39;
      font-size: var(--gem-body-font);
      line-height: 1.32;
    }

    .modal ul {
      margin: 0.7rem 0 0;
      padding-left: 1.15rem;
    }

    @media (max-width: 740px) {
      :root {
        --gem-search-h: clamp(3.05rem, 11.6vw, 3.75rem);
        --gem-shell-w: calc(100vw - 1.25rem);
        --gem-footer-w: calc(100vw - 1.1rem);
        --gem-footer-font: clamp(0.52rem, 2.36vw, 0.66rem);
        --gem-body-font: clamp(0.76rem, 2.55vw, 0.92rem);
        --gem-title-font: clamp(1.02rem, 4.2vw, 1.32rem);
        --gem-search-font: clamp(0.9rem, 3.65vw, 1.18rem);
      }

      .gem-app {
        width: 100vw;
        padding: max(1rem, env(safe-area-inset-top)) 0.62rem calc(7rem + env(safe-area-inset-bottom));
      }

      .gem-search-bar {
        padding: 0.24rem;
      }

      body.gem-role-locked .gem-search-bar {
        grid-template-columns: auto 2rem minmax(0, 1fr) 2rem;
        gap: 0.16rem;
      }

      .stone-button {
        width: calc(var(--gem-search-h) - 0.48rem);
        height: calc(var(--gem-search-h) - 0.48rem);
        min-width: calc(var(--gem-search-h) - 0.48rem);
      }

      .search-nav-arrow {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
      }

      .dropdown {
        top: calc(max(1rem, env(safe-area-inset-top)) + var(--gem-search-h) + 0.75rem);
        width: calc(100vw - 1.25rem);
        max-height: min(58svh, 520px);
        border-radius: 1.25rem;
        padding: 0.65rem;
      }

      .dropdown-row {
        min-height: 4.15rem;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.64rem 0.75rem;
      }

      #stonePanel.dropdown.open {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        gap: 0.55rem;
        padding: 0.65rem;
      }

      #stonePanel .dropdown-row {
        grid-template-columns: 1.55rem minmax(0, 1fr) auto;
        column-gap: 0.45rem;
        padding: 0.58rem 0.5rem;
      }

      .diamond-stage {
        width: 100%;
        height: calc(100svh - var(--gem-search-h) - 9rem - env(safe-area-inset-bottom));
        min-height: 25rem;
        max-height: 35rem;
        margin-top: 1.45rem;
      }

      .diamond-dot {
        width: clamp(1.18rem, 6.05vw, 1.52rem);
        height: clamp(1.18rem, 6.05vw, 1.52rem);
      }

      .footer-strip {
        bottom: max(0.42rem, env(safe-area-inset-bottom));
        gap: 0.38rem 0.42rem;
      }

      .footer-chip {
        height: clamp(1.26rem, 5.2vw, 1.55rem);
        min-height: clamp(1.26rem, 5.2vw, 1.55rem);
        padding-left: 0.12rem;
        padding-right: 0.12rem;
        letter-spacing: -0.075em;
      }

      .modal {
        padding: calc(var(--gem-search-h) + 2rem) 0.75rem calc(5.7rem + env(safe-area-inset-bottom));
      }

      .modal .card {
        width: calc(100vw - 1.5rem);
        max-height: 58svh;
        padding: 1rem;
        border-radius: 1.15rem;
      }
    }

    @media (max-width: 740px) and (orientation: landscape) {
      :root {
        --gem-search-font: clamp(0.62rem, 1.72vw, 0.86rem);
        --gem-footer-font: clamp(0.48rem, 1.42vw, 0.58rem);
      }

      .gem-app {
        padding-top: 0.7rem;
        padding-bottom: 4.7rem;
      }

      .gem-search-bar {
        height: clamp(1.72rem, 6.2vh, 2.28rem);
        padding: 0.14rem;
      }

      .stone-button {
        width: clamp(1.44rem, 5.5vh, 1.92rem);
        height: clamp(1.44rem, 5.5vh, 1.92rem);
        min-width: clamp(1.44rem, 5.5vh, 1.92rem);
      }

      .diamond-stage {
        height: 25rem;
        margin-top: 0.8rem;
      }

      .diamond-dot {
        width: clamp(0.78rem, 3.7vh, 1.08rem);
        height: clamp(0.78rem, 3.7vh, 1.08rem);
      }

      .footer-strip {
        width: min(36rem, calc(100vw - 1.75rem));
        gap: 0.22rem 0.34rem;
        bottom: max(0.32rem, env(safe-area-inset-bottom));
      }

      .footer-chip {
        height: clamp(0.88rem, 4.2vh, 1.12rem);
        min-height: clamp(0.88rem, 4.2vh, 1.12rem);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diamond-dot,
      .diamond-dot::before {
        animation: none;
      }
    }
  /* GEM SEARCH INPUT FLEX FIX */
.gem-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: .34rem !important;
}

.search-input,
#searchInput {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  position: relative !important;
  z-index: 5 !important;
}

.search-nav-arrow {
  flex: 0 0 clamp(2rem, 5.6vw, 2.6rem) !important;
}

body:not(.gem-role-locked):not(.gem-stone-selected) .search-nav-arrow {
  display: none !important;
}

body.gem-role-locked .search-nav-arrow {
  display: inline-flex !important;
}


/* GEM FINAL SEARCH LAYOUT SEAL */
.gem-search-shell {
  position: relative !important;
  z-index: 999 !important;
  width: min(46rem, calc(100vw - 1.25rem)) !important;
  margin: 0 auto !important;
}

.gem-search-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: clamp(3.05rem, 11vw, 3.75rem) !important;
  gap: 0.34rem !important;
  overflow: hidden !important;
}

#stoneButton {
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

#searchInput {
  flex: 1 1 auto !important;
  min-width: 4rem !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  position: relative !important;
  z-index: 1000 !important;
}

#searchPrevRole,
#searchNextRole {
  flex: 0 0 clamp(2rem, 5.6vw, 2.6rem) !important;
  display: none !important;
}

body.gem-role-locked #searchPrevRole,
body.gem-role-locked #searchNextRole {
  display: inline-flex !important;
}


/* GEM ORDER LIST BEHAVIOR SEAL */
#searchPrevRole,
#searchNextRole {
  display: none !important;
}

body.gem-role-locked #searchPrevRole,
body.gem-role-locked #searchNextRole {
  display: inline-flex !important;
}


/* GEM FINAL ICON SYSTEM */
.gem-stone-svg {
  display: block !important;
  width: 1.42em !important;
  height: 1.42em !important;
  color: currentColor !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

.gem-stone-svg path,
.gem-stone-svg circle,
.gem-stone-svg ellipse {
  vector-effect: non-scaling-stroke;
}

.row-icon {
  width: 2.2rem !important;
  min-width: 2.2rem !important;
  height: 2.2rem !important;
  display: grid !important;
  place-items: center !important;
  margin-right: .32rem !important;
  color: rgba(235, 252, 255, .98) !important;
}

.row-icon .gem-stone-svg {
  width: 1.62rem !important;
  height: 1.62rem !important;
  filter:
    drop-shadow(0 .07rem .06rem rgba(0, 0, 0, .18))
    drop-shadow(0 -.035rem .035rem rgba(255, 255, 255, .22)) !important;
}

.stone-mark {
  display: grid !important;
  place-items: center !important;
  color: var(--gem-selected-icon, #14323a) !important;
}

.stone-mark .gem-stone-svg {
  width: 80% !important;
  height: 80% !important;
  filter:
    drop-shadow(0 .08rem .06rem rgba(0, 0, 0, .20))
    drop-shadow(0 -.04rem .04rem rgba(255, 255, 255, .34)) !important;
}

.gem-stone-svg path[fill="currentColor"],
.gem-stone-svg ellipse[fill="currentColor"],
.gem-stone-svg circle[fill="currentColor"] {
  opacity: .96;
}


/* GEM ONE STONE CONTRACT FINAL */
:root {
  --gem-diamond-rgb: 128, 238, 248;
  --gem-sapphire-rgb: 28, 118, 255;
  --gem-emerald-rgb: 22, 202, 138;
  --gem-ruby-rgb: 255, 38, 82;
  --gem-obsidian-rgb: 8, 15, 22;
  --gem-opal-rgb: 208, 126, 255;
  --gem-quartz-rgb: 185, 244, 255;
  --gem-all-rgb: 88, 238, 238;

  --active-rgb: var(--gem-all-rgb);
  --active-bg-0: #05292d;
  --active-bg-1: #0b6e72;
  --active-bg-2: #0aa9ad;
  --active-panel: rgba(7, 28, 34, .88);
  --active-card: rgba(16, 39, 48, .78);
  --active-text: #eefcff;
  --active-muted: rgba(238, 252, 255, .70);
}

html[data-gem-theme="diamond"],
body[data-gem-theme="diamond"] {
  --active-rgb: var(--gem-diamond-rgb);
  --active-bg-0: #dffcff;
  --active-bg-1: #a7edf4;
  --active-bg-2: #f8ffff;
  --active-panel: rgba(238, 254, 255, .86);
  --active-card: rgba(255, 255, 255, .68);
  --active-text: #14323a;
  --active-muted: rgba(20, 50, 58, .68);
}

html[data-gem-theme="sapphire"],
body[data-gem-theme="sapphire"] {
  --active-rgb: var(--gem-sapphire-rgb);
  --active-bg-0: #06112a;
  --active-bg-1: #083d8e;
  --active-bg-2: #1179ff;
  --active-panel: rgba(7, 20, 48, .88);
  --active-card: rgba(16, 34, 68, .78);
  --active-text: #eef6ff;
  --active-muted: rgba(238, 246, 255, .70);
}

html[data-gem-theme="emerald"],
body[data-gem-theme="emerald"] {
  --active-rgb: var(--gem-emerald-rgb);
  --active-bg-0: #052619;
  --active-bg-1: #087948;
  --active-bg-2: #18c889;
  --active-panel: rgba(5, 35, 24, .88);
  --active-card: rgba(13, 58, 40, .78);
  --active-text: #effff8;
  --active-muted: rgba(239, 255, 248, .70);
}

html[data-gem-theme="ruby"],
body[data-gem-theme="ruby"] {
  --active-rgb: var(--gem-ruby-rgb);
  --active-bg-0: #310711;
  --active-bg-1: #9d0c2b;
  --active-bg-2: #ff244f;
  --active-panel: rgba(50, 8, 18, .90);
  --active-card: rgba(84, 16, 32, .78);
  --active-text: #fff3f6;
  --active-muted: rgba(255, 243, 246, .72);
}

html[data-gem-theme="obsidian"],
body[data-gem-theme="obsidian"] {
  --active-rgb: var(--gem-obsidian-rgb);
  --active-bg-0: #020509;
  --active-bg-1: #07111a;
  --active-bg-2: #142333;
  --active-panel: rgba(4, 8, 13, .92);
  --active-card: rgba(12, 18, 26, .82);
  --active-text: #eef8ff;
  --active-muted: rgba(238, 248, 255, .68);
}

html[data-gem-theme="opal"],
body[data-gem-theme="opal"] {
  --active-rgb: var(--gem-opal-rgb);
  --active-bg-0: #f9fbff;
  --active-bg-1: #d8f6ff;
  --active-bg-2: #f4ccff;
  --active-panel: rgba(247, 253, 255, .86);
  --active-card: rgba(255, 255, 255, .68);
  --active-text: #273344;
  --active-muted: rgba(39, 51, 68, .68);
}

html[data-gem-theme="quartz"],
body[data-gem-theme="quartz"] {
  --active-rgb: var(--gem-quartz-rgb);
  --active-bg-0: #eafbff;
  --active-bg-1: #b8f1ff;
  --active-bg-2: #ffffff;
  --active-panel: rgba(239, 254, 255, .86);
  --active-card: rgba(255, 255, 255, .66);
  --active-text: #15313a;
  --active-muted: rgba(21, 49, 58, .68);
}

html[data-gem-theme="all"],
body[data-gem-theme="all"],
html[data-gem-theme="all stones"],
body[data-gem-theme="all stones"] {
  --active-rgb: var(--gem-all-rgb);
  --active-bg-0: #05292d;
  --active-bg-1: #0b6e72;
  --active-bg-2: #0aa9ad;
  --active-panel: rgba(7, 28, 34, .88);
  --active-card: rgba(16, 39, 48, .78);
  --active-text: #eefcff;
  --active-muted: rgba(238, 252, 255, .70);
}

html,
body {
  background:
    radial-gradient(circle at 50% 16%, rgba(var(--active-rgb), .30), transparent 28rem),
    linear-gradient(145deg, var(--active-bg-0), var(--active-bg-1) 52%, var(--active-bg-2)) !important;
  color: var(--active-text) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 42% 24%, rgba(255,255,255,.28), transparent 12rem),
    radial-gradient(circle at 70% 72%, rgba(var(--active-rgb), .22), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%) !important;
  opacity: .85 !important;
}

.gem-search-bar {
  background: rgba(244, 252, 255, .92) !important;
  border: 1px solid rgba(var(--active-rgb), .44) !important;
  box-shadow:
    0 1.2rem 3rem rgba(0,0,0,.22),
    0 0 0 .16rem rgba(var(--active-rgb), .12) !important;
}

.stone-mark {
  color: rgb(var(--active-rgb)) !important;
  background: rgba(var(--active-rgb), .16) !important;
  border: 1px solid rgba(var(--active-rgb), .36) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.46),
    0 0 1.1rem rgba(var(--active-rgb), .32) !important;
}

html[data-gem-theme="obsidian"] .stone-mark,
body[data-gem-theme="obsidian"] .stone-mark {
  color: #071017 !important;
  background: rgba(222, 248, 255, .82) !important;
  border-color: rgba(222, 248, 255, .72) !important;
}

.dropdown {
  background:
    linear-gradient(135deg, rgba(var(--active-rgb), .16), transparent 42%),
    var(--active-panel) !important;
  border: 1px solid rgba(var(--active-rgb), .42) !important;
  box-shadow:
    0 1.25rem 3.2rem rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

.dropdown-row {
  background:
    linear-gradient(90deg, rgba(var(--row-rgb, var(--active-rgb)), .16), transparent 38%),
    var(--active-card) !important;
  color: var(--active-text) !important;
  border: 1px solid rgba(var(--row-rgb, var(--active-rgb)), .34) !important;
  box-shadow: inset .22rem 0 0 rgba(var(--row-rgb, var(--active-rgb)), .88) !important;
}

.dropdown-row:hover,
.dropdown-row:focus-visible {
  background:
    linear-gradient(90deg, rgba(var(--row-rgb, var(--active-rgb)), .26), transparent 42%),
    rgba(255,255,255,.12) !important;
  border-color: rgba(var(--row-rgb, var(--active-rgb)), .72) !important;
}

.row-title {
  color: var(--active-text) !important;
}

.row-sub {
  color: var(--active-muted) !important;
}

.row-count {
  color: var(--active-text) !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.stone-row[data-stone="diamond"] { --row-rgb: var(--gem-diamond-rgb); }
.stone-row[data-stone="sapphire"] { --row-rgb: var(--gem-sapphire-rgb); }
.stone-row[data-stone="emerald"] { --row-rgb: var(--gem-emerald-rgb); }
.stone-row[data-stone="ruby"] { --row-rgb: var(--gem-ruby-rgb); }
.stone-row[data-stone="obsidian"] { --row-rgb: 220, 244, 250; }
.stone-row[data-stone="opal"] { --row-rgb: var(--gem-opal-rgb); }
.stone-row[data-stone="quartz"] { --row-rgb: var(--gem-quartz-rgb); }
.stone-row[data-stone="all"] { --row-rgb: var(--gem-all-rgb); }

.stone-row[data-stone="diamond"] .row-icon { color: rgb(var(--gem-diamond-rgb)) !important; }
.stone-row[data-stone="sapphire"] .row-icon { color: rgb(var(--gem-sapphire-rgb)) !important; }
.stone-row[data-stone="emerald"] .row-icon { color: rgb(var(--gem-emerald-rgb)) !important; }
.stone-row[data-stone="ruby"] .row-icon { color: rgb(var(--gem-ruby-rgb)) !important; }
.stone-row[data-stone="obsidian"] .row-icon { color: rgb(220, 244, 250) !important; }
.stone-row[data-stone="opal"] .row-icon { color: rgb(var(--gem-opal-rgb)) !important; }
.stone-row[data-stone="quartz"] .row-icon { color: rgb(var(--gem-quartz-rgb)) !important; }
.stone-row[data-stone="all"] .row-icon { color: rgb(var(--gem-all-rgb)) !important; }

.footer-chip {
  background: rgba(244, 252, 255, .90) !important;
  border: 1px solid rgba(var(--active-rgb), .28) !important;
  color: #18333b !important;
}

.side-control {
  background: rgba(244, 252, 255, .90) !important;
  border: 1px solid rgba(var(--active-rgb), .32) !important;
}


/* GEM REMOVE ALL ICON BORDER BOXES FINAL */
.stone-mark,
.row-icon,
.filter-icon,
.result-icon,
.gem-icon,
.gem-stone-icon,
.stone-icon,
[class*="icon"] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.stone-mark {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: rgb(var(--active-rgb, 88, 238, 238)) !important;
}

.row-icon,
.filter-icon,
.result-icon,
.gem-icon,
.gem-stone-icon,
.stone-icon {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.stone-mark::before,
.stone-mark::after,
.row-icon::before,
.row-icon::after,
.filter-icon::before,
.filter-icon::after,
.result-icon::before,
.result-icon::after,
.gem-icon::before,
.gem-icon::after,
.gem-stone-icon::before,
.gem-stone-icon::after,
.stone-icon::before,
.stone-icon::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gem-stone-svg,
.gem-stone-svg *,
.stone-mark svg,
.stone-mark svg *,
.row-icon svg,
.row-icon svg *,
.filter-icon svg,
.filter-icon svg *,
.result-icon svg,
.result-icon svg *,
.gem-icon svg,
.gem-icon svg *,
.gem-stone-icon svg,
.gem-stone-icon svg *,
.stone-icon svg,
.stone-icon svg * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.gem-stone-svg {
  display: block !important;
  background: transparent !important;
  overflow: visible !important;
}

.stone-mark .gem-stone-svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: rgb(var(--active-rgb, 88, 238, 238)) !important;
}

.row-icon .gem-stone-svg,
.filter-icon .gem-stone-svg,
.result-icon .gem-stone-svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

/* selected obsidian stays visible without a box */
html[data-gem-theme="obsidian"] .stone-mark,
body[data-gem-theme="obsidian"] .stone-mark {
  color: #eef8ff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* GEM SEARCHBAR DROPDOWN CARD THEME FINAL */

/* dropdown shell matches the search bar material */
.dropdown {
  background: rgba(244, 252, 255, .92) !important;
  border: 1px solid rgba(var(--active-rgb, 88, 238, 238), .34) !important;
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, .22),
    0 0 0 .12rem rgba(var(--active-rgb, 88, 238, 238), .10),
    inset 0 0 0 1px rgba(255, 255, 255, .48) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
}

/* each dropdown row gets its own small card theme */
.dropdown-row,
.stone-row {
  background:
    linear-gradient(135deg, rgba(var(--row-rgb, var(--active-rgb)), .18), rgba(255,255,255,.74) 46%, rgba(255,255,255,.60)) !important;
  border: 1px solid rgba(var(--row-rgb, var(--active-rgb)), .30) !important;
  border-left: 1px solid rgba(var(--row-rgb, var(--active-rgb)), .30) !important;
  box-shadow:
    0 .55rem 1.15rem rgba(0, 0, 0, .10),
    inset 0 0 0 1px rgba(255,255,255,.35) !important;
  color: #17323a !important;
}

.dropdown-row:hover,
.dropdown-row:focus,
.dropdown-row:focus-visible,
.dropdown-row.active,
.dropdown-row[aria-selected="true"],
.stone-row:hover,
.stone-row:focus,
.stone-row:focus-visible,
.stone-row.active,
.stone-row[aria-selected="true"] {
  background:
    linear-gradient(135deg, rgba(var(--row-rgb, var(--active-rgb)), .28), rgba(255,255,255,.82) 48%, rgba(255,255,255,.68)) !important;
  border-color: rgba(var(--row-rgb, var(--active-rgb)), .50) !important;
}

/* no artificial left strip */
.dropdown-row::before,
.dropdown-row::after,
.stone-row::before,
.stone-row::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* row color identities */
.stone-row[data-stone="diamond"],
.dropdown-row[data-stone="diamond"] {
  --row-rgb: 128, 238, 248;
}

.stone-row[data-stone="sapphire"],
.dropdown-row[data-stone="sapphire"] {
  --row-rgb: 28, 118, 255;
}

.stone-row[data-stone="emerald"],
.dropdown-row[data-stone="emerald"] {
  --row-rgb: 22, 202, 138;
}

.stone-row[data-stone="ruby"],
.dropdown-row[data-stone="ruby"] {
  --row-rgb: 255, 38, 82;
}

.stone-row[data-stone="opal"],
.dropdown-row[data-stone="opal"] {
  --row-rgb: 208, 126, 255;
}

.stone-row[data-stone="quartz"],
.dropdown-row[data-stone="quartz"] {
  --row-rgb: 185, 244, 255;
}

.stone-row[data-stone="all"],
.dropdown-row[data-stone="all"] {
  --row-rgb: 88, 238, 238;
}

/* obsidian as a menu card stays white/ice so it is readable */
.stone-row[data-stone="obsidian"],
.dropdown-row[data-stone="obsidian"] {
  --row-rgb: 220, 244, 250;
  background:
    linear-gradient(135deg, rgba(10, 16, 23, .78), rgba(25, 34, 45, .72)) !important;
  color: #eef8ff !important;
  border-color: rgba(220, 244, 250, .34) !important;
}

.stone-row[data-stone="obsidian"] .row-title,
.dropdown-row[data-stone="obsidian"] .row-title,
.stone-row[data-stone="obsidian"] .row-count,
.dropdown-row[data-stone="obsidian"] .row-count {
  color: #eef8ff !important;
}

.stone-row[data-stone="obsidian"] .row-sub,
.dropdown-row[data-stone="obsidian"] .row-sub {
  color: rgba(238, 248, 255, .68) !important;
}

.stone-row[data-stone="obsidian"] .row-count,
.dropdown-row[data-stone="obsidian"] .row-count {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(220, 244, 250, .22) !important;
}

/* text on normal cards */
.row-title {
  color: #17323a !important;
}

.row-sub {
  color: rgba(23, 50, 58, .66) !important;
}

.row-count {
  color: #17323a !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(var(--row-rgb, var(--active-rgb)), .24) !important;
}

/* icon has stone color, no border box */
.row-icon,
.stone-mark {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.row-icon,
.row-icon svg,
.row-icon .gem-stone-svg,
.stone-mark,
.stone-mark svg,
.stone-mark .gem-stone-svg {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* selected obsidian is black/dark when active */
html[data-gem-theme="obsidian"] .stone-mark,
body[data-gem-theme="obsidian"] .stone-mark {
  color: #071017 !important;
}


/* GEM OBSIDIAN DROPDOWN CARD MATCH SEVEN FINAL */

/* Obsidian dropdown card uses the SAME card treatment as the other seven. */
.dropdown-row[data-stone="obsidian"],
.stone-row[data-stone="obsidian"] {
  --row-rgb: 8, 15, 22 !important;
  background:
    linear-gradient(135deg, rgba(var(--row-rgb), .18), rgba(255,255,255,.74) 46%, rgba(255,255,255,.60)) !important;
  border: 1px solid rgba(var(--row-rgb), .30) !important;
  border-left: 1px solid rgba(var(--row-rgb), .30) !important;
  box-shadow:
    0 .55rem 1.15rem rgba(0, 0, 0, .10),
    inset 0 0 0 1px rgba(255,255,255,.35) !important;
  color: #17323a !important;
}

/* Obsidian dropdown text matches the other dropdown cards. */
.dropdown-row[data-stone="obsidian"] .row-title,
.stone-row[data-stone="obsidian"] .row-title {
  color: #17323a !important;
}

.dropdown-row[data-stone="obsidian"] .row-sub,
.stone-row[data-stone="obsidian"] .row-sub {
  color: rgba(23, 50, 58, .66) !important;
}

.dropdown-row[data-stone="obsidian"] .row-count,
.stone-row[data-stone="obsidian"] .row-count {
  color: #17323a !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(var(--row-rgb), .24) !important;
}

/* Obsidian icon stays black, with no extra chip, no inversion, no box. */
.dropdown-row[data-stone="obsidian"] .row-icon,
.stone-row[data-stone="obsidian"] .row-icon,
.dropdown-row[data-stone="obsidian"] .row-icon .gem-stone-svg,
.stone-row[data-stone="obsidian"] .row-icon .gem-stone-svg {
  color: #05080c !important;
  fill: #05080c !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}









/* GEM UNIFIED 3D STONE VISIBILITY FLOW */

/* Same gemstone color system for search, footer, and 10 points.
   Strong enough to see. Still clean. Not heavy. */
html[data-gem-theme="all"],
body[data-gem-theme="all"] {
  --gem-flow-rgb: 76, 190, 198;
  --gem-flow-edge-rgb: 31, 126, 136;
}

html[data-gem-theme="diamond"],
body[data-gem-theme="diamond"] {
  --gem-flow-rgb: 74, 178, 205;
  --gem-flow-edge-rgb: 26, 112, 138;
}

html[data-gem-theme="sapphire"],
body[data-gem-theme="sapphire"] {
  --gem-flow-rgb: 62, 118, 220;
  --gem-flow-edge-rgb: 28, 70, 150;
}

html[data-gem-theme="emerald"],
body[data-gem-theme="emerald"] {
  --gem-flow-rgb: 62, 180, 124;
  --gem-flow-edge-rgb: 26, 112, 74;
}

html[data-gem-theme="ruby"],
body[data-gem-theme="ruby"] {
  --gem-flow-rgb: 220, 76, 102;
  --gem-flow-edge-rgb: 146, 34, 55;
}

html[data-gem-theme="obsidian"],
body[data-gem-theme="obsidian"] {
  --gem-flow-rgb: 72, 84, 98;
  --gem-flow-edge-rgb: 24, 31, 40;
}

html[data-gem-theme="opal"],
body[data-gem-theme="opal"] {
  --gem-flow-rgb: 180, 104, 222;
  --gem-flow-edge-rgb: 112, 56, 150;
}

html[data-gem-theme="quartz"],
body[data-gem-theme="quartz"] {
  --gem-flow-rgb: 116, 190, 204;
  --gem-flow-edge-rgb: 52, 124, 140;
}

/* Search bar: visible 3D tint, same stone flow. */
.gem-search-bar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.48)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .16), rgba(var(--gem-flow-rgb), .055)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .34) !important;
  box-shadow:
    0 .85rem 1.65rem rgba(var(--gem-flow-edge-rgb), .115),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(var(--gem-flow-edge-rgb), .12) !important;
}

.gem-search-bar:focus-within {
  border-color: rgba(var(--gem-flow-edge-rgb), .46) !important;
  box-shadow:
    0 .95rem 1.85rem rgba(var(--gem-flow-edge-rgb), .15),
    0 0 0 .11rem rgba(var(--gem-flow-rgb), .13),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(var(--gem-flow-edge-rgb), .15) !important;
}

/* Search icon circle: same color, raised edge, readable for diamond/quartz. */
#stoneButton,
.stone-button {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.88), rgba(255,255,255,.18) 34%, transparent 52%),
    linear-gradient(145deg, rgba(var(--gem-flow-rgb), .24), rgba(var(--gem-flow-rgb), .085)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .42) !important;
  box-shadow:
    0 .42rem .9rem rgba(var(--gem-flow-edge-rgb), .15),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(var(--gem-flow-edge-rgb), .16) !important;
}

#stoneButton .gem-stone-svg,
#stoneButton .stone-mark,
#stoneButton .filter-icon,
.stone-button .gem-stone-svg,
.stone-button .stone-mark,
.stone-button .filter-icon {
  color: rgb(var(--gem-flow-edge-rgb)) !important;
  fill: currentColor !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) !important;
}

/* Footer uses the same tint language, just calmer. */
footer,
.footer,
.gem-footer,
.points-footer,
.point-strip,
.points-strip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.36)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .11), rgba(var(--gem-flow-rgb), .04)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .24) !important;
  box-shadow:
    0 -.45rem 1.1rem rgba(var(--gem-flow-edge-rgb), .075),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}


/* Dropdown cards stay locked. */
#stonePanel .dropdown-row,
#stonePanel .stone-row,
#stonePanel [data-stone] {
  box-shadow:
    0 .55rem 1.15rem rgba(0, 0, 0, .10),
    inset 0 0 0 1px rgba(255,255,255,.35) !important;
}








/* GEM FOOTER POINT NATIVE STONE TINT ONLY */

/* 10 footer points only. No movement. No sizing. No pseudo-elements. */
html[data-gem-theme="all"],
body[data-gem-theme="all"] {
  --gem-footer-point-rgb: 76, 190, 198;
  --gem-footer-point-edge-rgb: 31, 126, 136;
}

html[data-gem-theme="diamond"],
body[data-gem-theme="diamond"] {
  --gem-footer-point-rgb: 188, 226, 234;
  --gem-footer-point-edge-rgb: 94, 154, 166;
}

html[data-gem-theme="sapphire"],
body[data-gem-theme="sapphire"] {
  --gem-footer-point-rgb: 54, 106, 220;
  --gem-footer-point-edge-rgb: 24, 62, 154;
}

html[data-gem-theme="emerald"],
body[data-gem-theme="emerald"] {
  --gem-footer-point-rgb: 44, 178, 116;
  --gem-footer-point-edge-rgb: 22, 116, 72;
}

html[data-gem-theme="ruby"],
body[data-gem-theme="ruby"] {
  --gem-footer-point-rgb: 218, 62, 92;
  --gem-footer-point-edge-rgb: 142, 28, 50;
}

html[data-gem-theme="obsidian"],
body[data-gem-theme="obsidian"] {
  --gem-footer-point-rgb: 72, 82, 94;
  --gem-footer-point-edge-rgb: 24, 30, 38;
}

html[data-gem-theme="opal"],
body[data-gem-theme="opal"] {
  --gem-footer-point-rgb: 176, 104, 222;
  --gem-footer-point-edge-rgb: 112, 54, 150;
}

html[data-gem-theme="quartz"],
body[data-gem-theme="quartz"] {
  --gem-footer-point-rgb: 210, 232, 234;
  --gem-footer-point-edge-rgb: 118, 164, 170;
}

/* Native tint on the existing 10 footer chips only. */
.footer-strip .footer-chip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)),
    linear-gradient(135deg, rgba(var(--gem-footer-point-rgb), .30), rgba(var(--gem-footer-point-rgb), .095)) !important;
  border-color: rgba(var(--gem-footer-point-edge-rgb), .46) !important;
  color: #07313d !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.46) inset,
    0 .2rem .48rem rgba(var(--gem-footer-point-edge-rgb), .16) !important;
}

/* Keep the existing hover behavior. Only color gets stronger on hover/focus. */
.footer-strip .footer-chip:hover,
.footer-strip .footer-chip:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72)),
    linear-gradient(135deg, rgba(var(--gem-footer-point-rgb), .38), rgba(var(--gem-footer-point-rgb), .13)) !important;
  border-color: rgba(var(--gem-footer-point-edge-rgb), .56) !important;
}


/* GEM ACTUAL 10 DOT NATIVE STONE TINT CAP */

/* Actual custom 10-point dots only.
   No movement. No sizing. No position. No layout. */
html[data-gem-theme="all"],
body[data-gem-theme="all"] {
  --gem-dot-rgb: 76, 190, 198;
  --gem-dot-edge-rgb: 31, 126, 136;
}

html[data-gem-theme="diamond"],
body[data-gem-theme="diamond"] {
  --gem-dot-rgb: 188, 226, 234;
  --gem-dot-edge-rgb: 94, 154, 166;
}

html[data-gem-theme="sapphire"],
body[data-gem-theme="sapphire"] {
  --gem-dot-rgb: 54, 106, 220;
  --gem-dot-edge-rgb: 24, 62, 154;
}

html[data-gem-theme="emerald"],
body[data-gem-theme="emerald"] {
  --gem-dot-rgb: 44, 178, 116;
  --gem-dot-edge-rgb: 22, 116, 72;
}

html[data-gem-theme="ruby"],
body[data-gem-theme="ruby"] {
  --gem-dot-rgb: 218, 62, 92;
  --gem-dot-edge-rgb: 142, 28, 50;
}

html[data-gem-theme="obsidian"],
body[data-gem-theme="obsidian"] {
  --gem-dot-rgb: 72, 82, 94;
  --gem-dot-edge-rgb: 24, 30, 38;
}

html[data-gem-theme="opal"],
body[data-gem-theme="opal"] {
  --gem-dot-rgb: 176, 104, 222;
  --gem-dot-edge-rgb: 112, 54, 150;
}

html[data-gem-theme="quartz"],
body[data-gem-theme="quartz"] {
  --gem-dot-rgb: 210, 232, 234;
  --gem-dot-edge-rgb: 118, 164, 170;
}

/* Native tint on the actual diamond-stage dots. */
.diamond-stage .diamond-dot {
  background:
    radial-gradient(circle at 31% 24%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.92) 17%,
      rgba(var(--gem-dot-rgb), .82) 52%,
      rgba(var(--gem-dot-edge-rgb), .88) 100%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.46) inset,
    0 0.16rem 0.28rem rgba(var(--gem-dot-edge-rgb), .18),
    0 0 0.78rem rgba(var(--gem-dot-rgb), .48),
    0 0 1.7rem rgba(var(--gem-dot-rgb), .20) !important;
}

/* Native tint on the existing dot halo only. */
.diamond-stage .diamond-dot::before {
  background:
    radial-gradient(circle,
      rgba(var(--gem-dot-rgb), .30),
      rgba(var(--gem-dot-rgb), .10) 42%,
      transparent 72%
    ) !important;
}









/* GEM FOOTER LABEL CAPITALIZATION FINAL */

/* Desktop + mobile: Purpose, Authority, Coordination, etc. */
.footer-strip .footer-chip {
  text-transform: capitalize !important;
}



/* GEM FOOTER SHORT LABELS FINAL */

/* Desktop + mobile footer labels stay capitalized. */
.footer-strip .footer-chip {
  text-transform: capitalize !important;
}


/* GEM MOBILE FOOTER FONT MICRO LOWER */

/* Mobile only: lower footer chip text about 1px so labels fit cleanly. */
@media (max-width: 740px) {
  .footer-strip .footer-chip {
    font-size: calc(var(--gem-footer-font) - 0.0625rem) !important;
    letter-spacing: -0.085em !important;
  }
}

/* Ultra-tight mobile portrait. */
@media (max-width: 390px) {
  .footer-strip .footer-chip {
    font-size: calc(var(--gem-footer-font) - 0.075rem) !important;
    letter-spacing: -0.095em !important;
  }
}





/* GEM SEARCH STONE BUTTON CENTER CLEAN FINAL */

#stoneButton,
.gem-search-bar #stoneButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* GEM ACTUAL DOT DEVICE GLIMMER MOTION CAP */

/*
  Device-driven glimmer only.
  No icon touch.
  No radial white ball.
  No dot movement.
  No layout changes.
*/
:root {
  --gem-dot-glare-x: 50%;
  --gem-dot-glare-y: 50%;
  --gem-dot-halo-x: 50%;
  --gem-dot-halo-y: 50%;
  --gem-dot-sheen-angle: 132deg;
}

/*
  The shine is a moving angled reflection strip.
  Motion changes background-position, not the dot itself.
*/
.diamond-stage .diamond-dot {
  background-image:
    linear-gradient(
      var(--gem-dot-sheen-angle),
      transparent 0%,
      transparent 24%,
      rgba(255,255,255,.045) 34%,
      rgba(255,255,255,.22) 43%,
      rgba(255,255,255,.34) 48%,
      rgba(255,255,255,.13) 54%,
      rgba(255,255,255,.04) 62%,
      transparent 74%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.10) 24%,
      rgba(var(--gem-dot-rgb), .88) 54%,
      rgba(var(--gem-dot-edge-rgb), .94) 100%
    ) !important;
  background-size:
    240% 240%,
    100% 100% !important;
  background-position:
    var(--gem-dot-glare-x) var(--gem-dot-glare-y),
    center center !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/*
  Overlay is also a line/sheen, not a glow ball.
*/
.diamond-stage .diamond-dot::before {
  background-image:
    linear-gradient(
      var(--gem-dot-sheen-angle),
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.10) 47%,
      rgba(255,255,255,.035) 56%,
      transparent 70%
    ) !important;
  background-size: 220% 220% !important;
  background-position: var(--gem-dot-halo-x) var(--gem-dot-halo-y) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}


/* GEM SEARCH POINTS + ACTIVE STONE DROPDOWN THEME FINAL */

/*
  Dropdown surfaces inherit the current active stone.
  No search icon styling.
  No dot/glimmer changes.
*/
#resultsPanel,
#stonePanel,
.gem-search-shell .dropdown {
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.42)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .145), rgba(var(--gem-flow-rgb), .045)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .32) !important;
  box-shadow:
    0 1rem 2.1rem rgba(var(--gem-flow-edge-rgb), .13),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

.dropdown-row {
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.48)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .11), rgba(var(--gem-flow-rgb), .035)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .20) !important;
}

.dropdown-row:hover,
.dropdown-row:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .20), rgba(var(--gem-flow-rgb), .07)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .38) !important;
}

.dropdown-row.is-active-stone,
.dropdown-row[aria-current="true"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.58)),
    linear-gradient(135deg, rgba(var(--gem-flow-rgb), .30), rgba(var(--gem-flow-rgb), .10)) !important;
  border-color: rgba(var(--gem-flow-edge-rgb), .62) !important;
  box-shadow:
    0 .5rem 1rem rgba(var(--gem-flow-edge-rgb), .16),
    inset .22rem 0 0 rgba(var(--gem-flow-edge-rgb), .72),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.dropdown-row.is-active-stone .row-count,
.dropdown-row[aria-current="true"] .row-count {
  color: rgb(var(--gem-flow-edge-rgb)) !important;
  font-weight: 850 !important;
}

.dropdown-row.is-point-result {
  border-style: solid !important;
}








/* GEM DROPDOWN ACCESS RECOVERY FINAL */

.gem-search-shell {
  position: relative !important;
  overflow: visible !important;
}

#stonePanel,
#resultsPanel {
  z-index: 100 !important;
  max-height: min(62vh, 28rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#stonePanel:not(.open),
#resultsPanel:not(.open) {
  display: none !important;
}

#stonePanel.open,
#resultsPanel.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 740px) {
  #stonePanel .dropdown-row,
  #resultsPanel .dropdown-row {
    display: grid !important;
    grid-template-columns: 1.35rem minmax(0, 1fr) 4rem !important;
    gap: .45rem !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #stonePanel .row-title,
  #resultsPanel .row-title,
  #stonePanel .row-sub,
  #resultsPanel .row-sub {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #stonePanel .row-count,
  #resultsPanel .row-count {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
}


/* GEM STONE GRID RESTORE FINAL */
#stonePanel.open{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.72rem!important;
  padding:.92rem!important;
  max-height:min(58vh,34rem)!important;
  overflow:auto!important;
}
#stonePanel .dropdown-row{
  min-height:7.4rem!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  align-items:center!important;
  justify-items:center!important;
  text-align:center!important;
  gap:.38rem!important;
  padding:1rem .72rem!important;
  border-radius:1.45rem!important;
}
#stonePanel .row-icon{
  width:3.25rem!important;
  height:3.25rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.95),rgba(255,255,255,.22) 34%,rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 60%,rgba(var(--gem-flow-rgb,76,190,198),.32),rgba(var(--gem-edge-rgb,31,126,136),.16))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.58),
    inset 0 -.18rem .5rem rgba(0,40,45,.20),
    0 .24rem .7rem rgba(0,30,35,.22)!important;
}
#stonePanel .gem-stone-svg{
  width:2.05rem!important;
  height:2.05rem!important;
  stroke-width:2.6!important;
  filter:drop-shadow(0 .08rem .12rem rgba(0,0,0,.34)) drop-shadow(0 0 .35rem currentColor)!important;
}
#stonePanel .row-title{
  font-size:1.05rem!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:normal!important;
}
#stonePanel .row-sub{
  font-size:.7rem!important;
  line-height:1.15!important;
  white-space:normal!important;
}
#stonePanel .row-count{
  min-width:3rem!important;
  padding:.18rem .45rem!important;
  border-radius:999px!important;
}
@media(max-width:520px){
  #stonePanel.open{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem!important;padding:.7rem!important}
  #stonePanel .dropdown-row{min-height:6.8rem!important;padding:.78rem .46rem!important}
}


/* GEM STONE PANEL 2X4 GRADIENT FIT FINAL */
#stonePanel.open{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.52rem!important;
  padding:.62rem!important;
  max-height:none!important;
  overflow:visible!important;
}
#stonePanel .dropdown-row{
  --stone-a:76,190,198;
  --stone-b:31,126,136;
  min-height:5.85rem!important;
  display:grid!important;
  grid-template-columns:2.15rem minmax(0,1fr)!important;
  grid-template-areas:"icon title" "icon sub" "icon count"!important;
  align-items:center!important;
  column-gap:.48rem!important;
  row-gap:.04rem!important;
  padding:.56rem .58rem!important;
  border-radius:1.15rem!important;
  text-align:left!important;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.92),rgba(255,255,255,.34) 26%,rgba(255,255,255,0) 54%),
    linear-gradient(135deg,rgba(var(--stone-a),.34),rgba(236,252,252,.86) 45%,rgba(var(--stone-b),.22))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.64),
    inset 0 -.22rem .56rem rgba(var(--stone-b),.20),
    0 .18rem .55rem rgba(0,35,40,.18)!important;
}
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.active,.selected,.gem-stone-selected){
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.98),rgba(255,255,255,.42) 28%,rgba(255,255,255,0) 58%),
    linear-gradient(135deg,rgba(var(--stone-a),.54),rgba(245,255,255,.92) 42%,rgba(var(--stone-b),.36))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    inset 0 -.24rem .62rem rgba(var(--stone-b),.26),
    0 .22rem .72rem rgba(var(--stone-a),.30)!important;
}
#stonePanel [data-stone="diamond"]{--stone-a:76,190,198;--stone-b:31,126,136}
#stonePanel [data-stone="sapphire"]{--stone-a:36,105,232;--stone-b:15,55,150}
#stonePanel [data-stone="emerald"]{--stone-a:42,196,128;--stone-b:18,124,78}
#stonePanel [data-stone="ruby"]{--stone-a:232,48,92;--stone-b:148,20,52}
#stonePanel [data-stone="obsidian"]{--stone-a:72,82,94;--stone-b:18,24,32}
#stonePanel [data-stone="opal"]{--stone-a:194,98,238;--stone-b:122,52,168}
#stonePanel [data-stone="quartz"]{--stone-a:178,224,230;--stone-b:100,158,166}
#stonePanel [data-stone="all"]{--stone-a:52,214,214;--stone-b:20,138,146}
#stonePanel .row-icon{
  grid-area:icon!important;
  width:2.05rem!important;
  height:2.05rem!important;
  border-radius:.7rem!important;
  background:transparent!important;
  box-shadow:none!important;
}
#stonePanel .gem-stone-svg{
  width:1.78rem!important;
  height:1.78rem!important;
  filter:drop-shadow(0 .07rem .08rem rgba(0,0,0,.28))!important;
}
#stonePanel .row-title{
  grid-area:title!important;
  font-size:.92rem!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#stonePanel .row-sub{
  grid-area:sub!important;
  font-size:.61rem!important;
  line-height:1.08!important;
  white-space:normal!important;
  display:-webkit-box!important;
  line-clamp:2!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
#stonePanel .row-count{
  grid-area:count!important;
  justify-self:start!important;
  min-width:2.7rem!important;
  padding:.12rem .42rem!important;
  border-radius:999px!important;
  font-size:.64rem!important;
  line-height:1.1!important;
}


/* GEM SEARCH ROW CLARITY FINAL */
#resultsPanel .dropdown-row{
  --stone-a:76,190,198;
  --stone-b:31,126,136;
  grid-template-columns:2.2rem minmax(0,1fr)!important;
  gap:.68rem!important;
  min-height:4.7rem!important;
  padding:.72rem .86rem!important;
  border-radius:1.12rem!important;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.96),rgba(255,255,255,.38) 28%,rgba(255,255,255,0) 58%),
    linear-gradient(135deg,rgba(var(--stone-a),.50),rgba(246,255,255,.90) 46%,rgba(var(--stone-b),.32))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset .46rem 0 .95rem rgba(var(--stone-a),.24),
    inset 0 -.18rem .55rem rgba(var(--stone-b),.22),
    0 .14rem .5rem rgba(0,35,40,.16)!important;
}
#resultsPanel .dropdown-row:is(:hover,:focus-visible){
  background:
    radial-gradient(circle at 18% 13%,rgba(255,255,255,1),rgba(255,255,255,.45) 30%,rgba(255,255,255,0) 60%),
    linear-gradient(135deg,rgba(var(--stone-a),.68),rgba(250,255,255,.96) 43%,rgba(var(--stone-b),.42))!important;
}
#resultsPanel .dropdown-row[data-gem-stone="diamond"]{--stone-a:76,190,198;--stone-b:31,126,136}
#resultsPanel .dropdown-row[data-gem-stone="sapphire"]{--stone-a:36,105,232;--stone-b:15,55,150}
#resultsPanel .dropdown-row[data-gem-stone="emerald"]{--stone-a:42,196,128;--stone-b:18,124,78}
#resultsPanel .dropdown-row[data-gem-stone="ruby"]{--stone-a:232,48,92;--stone-b:148,20,52}
#resultsPanel .dropdown-row[data-gem-stone="obsidian"]{--stone-a:72,82,94;--stone-b:18,24,32}
#resultsPanel .dropdown-row[data-gem-stone="opal"]{--stone-a:194,98,238;--stone-b:122,52,168}
#resultsPanel .dropdown-row[data-gem-stone="quartz"]{--stone-a:178,224,230;--stone-b:100,158,166}
#resultsPanel .row-count{
  display:none!important;
}
#resultsPanel .row-icon{
  width:2.1rem!important;
  height:2.1rem!important;
  display:grid!important;
  place-items:center!important;
}
#resultsPanel .gem-stone-svg{
  width:1.6rem!important;
  height:1.6rem!important;
  filter:drop-shadow(0 .07rem .1rem rgba(0,0,0,.30)) drop-shadow(0 0 .28rem currentColor)!important;
}
#resultsPanel .row-title{
  font-size:.95rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#resultsPanel .row-sub{
  font-size:.68rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* GEM CLEAN RESULT SUBTITLES FINAL */
#resultsPanel .row-sub{
  display:none!important;
}
#resultsPanel .dropdown-row{
  grid-template-columns:2.25rem minmax(0,1fr)!important;
  min-height:4.35rem!important;
}
#resultsPanel .row-title{
  align-self:center!important;
  font-size:1rem!important;
  line-height:1.05!important;
}
#resultsPanel .row-count{
  display:none!important;
}








/* GEM IWO PROFILE CARD WIRE FINAL */
.gem-voice-btn{
  position:absolute;
  top:1rem;
  right:1rem;
  width:2.1rem;
  height:2.1rem;
  border-radius:999px;
  border:1px solid rgba(8,32,44,.16);
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(8,32,44,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
}
.gem-voice-btn[aria-pressed="true"]{background:rgba(8,32,44,.12)}
.gem-card-body{
  margin-top:.78rem;
  line-height:1.35;
  font-size:.98rem;
}


/* GEM SAFE NATIVE STONE HIERARCHY */
#stonePanel.open {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  max-height: none !important;
  overflow: visible !important;
}

#stonePanel .dropdown-row.stone-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 70px !important;
  height: 70px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#stonePanel .dropdown-row.stone-row .row-icon {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
}

#stonePanel .dropdown-row.stone-row .row-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  width: 25px !important;
  height: 11px !important;
  transform: translate(-50%, -50%) rotate(-8deg) !important;
  border-radius: 50% !important;
  background: rgba(2, 20, 24, .23) !important;
  filter: blur(6px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#stonePanel .dropdown-row.stone-row .row-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 32% !important;
  top: 22% !important;
  width: 10px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.38) !important;
  filter: blur(3px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#stonePanel .dropdown-row.stone-row .row-icon .gem-stone-svg {
  position: relative !important;
  z-index: 1 !important;
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  overflow: visible !important;
  transform: translateY(-1px) perspective(80px) rotateX(7deg) rotateY(-5deg) !important;
  filter:
    drop-shadow(0 6px 5px rgba(0,0,0,.33))
    drop-shadow(0 1px 1px rgba(255,255,255,.45))
    drop-shadow(-1px -1px 2px rgba(255,255,255,.30))
    drop-shadow(2px 2px 2px rgba(0,0,0,.24)) !important;
}

#stonePanel .dropdown-row.stone-row .gem-stone-svg path[fill="currentColor"],
#stonePanel .dropdown-row.stone-row .gem-stone-svg ellipse[fill="currentColor"],
#stonePanel .dropdown-row.stone-row .gem-stone-svg circle[fill="currentColor"] {
  filter: brightness(1.08) saturate(1.12) contrast(1.08) !important;
}

#stonePanel .dropdown-row.stone-row .row-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  gap: 3px !important;
  text-align: left !important;
}

#stonePanel .dropdown-row.stone-row .row-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(5, 34, 42, .95) !important;
  font-size: clamp(12px, 1.38vw, 15px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
}

#stonePanel .dropdown-row.stone-row .row-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 32px !important;
  height: 17px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(220,247,249,.60)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,60,70,.10),
    0 2px 5px rgba(0,20,25,.12) !important;
  color: rgba(4, 42, 50, .88) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.015em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.50) !important;
}

#stonePanel .dropdown-row.stone-row .row-name {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: inherit !important;
}

#stonePanel .dropdown-row.stone-row .row-sub {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(5, 34, 42, .76) !important;
  font-size: clamp(9px, 1.05vw, 11px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.38) !important;
}

#stonePanel .dropdown-row.stone-row .row-selected {
  display: none !important;
  margin-top: 1px !important;
  color: rgba(8, 91, 99, .92) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#stonePanel .dropdown-row.stone-row.is-active-stone .row-selected,
#stonePanel .dropdown-row.stone-row[aria-current="true"] .row-selected {
  display: block !important;
}

#stonePanel .dropdown-row.stone-row[data-stone="obsidian"] .row-icon .gem-stone-svg {
  filter:
    drop-shadow(0 7px 6px rgba(0,0,0,.48))
    drop-shadow(-1px -1px 2px rgba(255,255,255,.16))
    drop-shadow(2px 3px 2px rgba(0,0,0,.38)) !important;
}

#stonePanel .dropdown-row.stone-row[data-stone="opal"] .row-icon .gem-stone-svg,
#stonePanel .dropdown-row.stone-row[data-stone="all"] .row-icon .gem-stone-svg {
  filter:
    drop-shadow(0 6px 5px rgba(0,0,0,.27))
    drop-shadow(-1px -1px 3px rgba(255,255,255,.52))
    drop-shadow(2px 2px 3px rgba(90,40,120,.22)) !important;
}

/* Keep quick-pick behavior on narrow windows too: two columns, no long scroll. */
@media (max-width: 700px) {
  #stonePanel.open {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stonePanel .dropdown-row.stone-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 9px 10px !important;
    column-gap: 8px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-icon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-icon .gem-stone-svg {
    width: 23px !important;
    height: 23px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-title {
    font-size: 12px !important;
    gap: 5px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-count-inline {
    min-width: 29px !important;
    height: 16px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-sub {
    font-size: 9px !important;
  }
}










/* GEM FINAL CENTER LOCK: dropdown gem + text share the same vertical center */
#stonePanel.open {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  max-height: none !important;
  overflow: visible !important;
}

#stonePanel .dropdown-row.stone-row {
  position: relative !important;
  display: block !important;
  min-height: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#stonePanel .dropdown-row.stone-row .row-icon {
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

#stonePanel .dropdown-row.stone-row .row-icon .gem-stone-svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  filter:
    drop-shadow(0 6px 5px rgba(0,0,0,.32))
    drop-shadow(-1px -1px 2px rgba(255,255,255,.32))
    drop-shadow(2px 2px 2px rgba(0,0,0,.24)) !important;
}

#stonePanel .dropdown-row.stone-row .row-copy {
  position: absolute !important;
  left: 74px !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#stonePanel .dropdown-row.stone-row .row-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#stonePanel .dropdown-row.stone-row .row-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 19px !important;
  min-width: 34px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

#stonePanel .dropdown-row.stone-row .row-name {
  display: inline-block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#stonePanel .dropdown-row.stone-row .row-sub {
  display: block !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#stonePanel .dropdown-row.stone-row .row-selected {
  display: none !important;
  visibility: hidden !important;
}

/* active state: use the count badge/check only, no extra vertical movement */
#stonePanel .dropdown-row.stone-row[aria-current="true"],
#stonePanel .dropdown-row.stone-row.is-active-stone {
  transform: none !important;
}

#stonePanel .dropdown-row.stone-row[aria-current="true"] .row-copy,
#stonePanel .dropdown-row.stone-row.is-active-stone .row-copy {
  transform: translateY(-50%) !important;
}

#stonePanel .dropdown-row.stone-row[aria-current="true"] .row-count-inline::after,
#stonePanel .dropdown-row.stone-row.is-active-stone .row-count-inline::after {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* keep search icon gem natural; no tint sitting over it */
#stoneButton .gem-stone-svg,
#stoneButton .gem-stone-svg * {
  mix-blend-mode: normal !important;
}

#stoneButton .gem-stone-svg {
  filter:
    drop-shadow(0 5px 5px rgba(0,0,0,.28))
    drop-shadow(-1px -1px 2px rgba(255,255,255,.30))
    drop-shadow(1px 2px 2px rgba(0,0,0,.22)) !important;
}

@media (max-width: 720px) {
  #stonePanel .dropdown-row.stone-row {
    min-height: 72px !important;
    height: 72px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-icon {
    left: 18px !important;
  }

  #stonePanel .dropdown-row.stone-row .row-copy {
    left: 66px !important;
  }
}







/* GEM V13 MICRO: search gemstone shadow only, no extra glass disk */
#stoneButton .gem-stone-svg {
  filter:
    drop-shadow(0 5px 5px rgba(0,0,0,.24))
    drop-shadow(0 1px 1px rgba(255,255,255,.34))
    drop-shadow(1px 2px 2px rgba(0,0,0,.18)) !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Do not let the search icon wrapper create a square or extra bubble */
#stoneButton .stone-mark::before,
#stoneButton .stone-mark::after,
#stoneButton .filter-icon::before,
#stoneButton .filter-icon::after {
  box-shadow: none !important;
  filter: none !important;
}

/* Keep search gem color matched to selected stone */
body[data-gem-stone="diamond"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-diamond-rgb)) !important; }
body[data-gem-stone="sapphire"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-sapphire-rgb)) !important; }
body[data-gem-stone="emerald"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-emerald-rgb)) !important; }
body[data-gem-stone="ruby"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-ruby-rgb)) !important; }
body[data-gem-stone="opal"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-opal-rgb)) !important; }
body[data-gem-stone="quartz"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-quartz-rgb)) !important; }
body[data-gem-stone="obsidian"] #stoneButton .gem-stone-svg { color: rgb(18, 24, 32) !important; }
body:not([data-gem-stone]) #stoneButton .gem-stone-svg { color: rgb(var(--gem-all-rgb)) !important; }




/* GEM V14 MICRO: remove square shadow artifact behind search gemstone */
#stoneButton .stone-mark,
#stoneButton .filter-icon {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill the rectangular pseudo-layer causing the visible square */
#stoneButton .stone-mark::before,
#stoneButton .stone-mark::after,
#stoneButton .filter-icon::before,
#stoneButton .filter-icon::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep only the actual SVG gem shadow */
#stoneButton .gem-stone-svg {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,.18))
    drop-shadow(0 1px 1px rgba(255,255,255,.28)) !important;
}

/* Make SVG internals clean, no rectangular fill layer */
#stoneButton .gem-stone-svg,
#stoneButton .gem-stone-svg * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep selected search gem color matched to dropdown gem color */
body[data-gem-stone="diamond"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-diamond-rgb)) !important; }
body[data-gem-stone="sapphire"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-sapphire-rgb)) !important; }
body[data-gem-stone="emerald"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-emerald-rgb)) !important; }
body[data-gem-stone="ruby"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-ruby-rgb)) !important; }
body[data-gem-stone="opal"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-opal-rgb)) !important; }
body[data-gem-stone="quartz"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-quartz-rgb)) !important; }
body[data-gem-stone="obsidian"] #stoneButton .gem-stone-svg { color: rgb(18, 24, 32) !important; }
body:not([data-gem-stone]) #stoneButton .gem-stone-svg { color: rgb(var(--gem-all-rgb)) !important; }












/* GEM V17: plain arrow text only, no circle buttons */
#searchPrevRole,
#searchNextRole,
.search-nav-arrow {
  display: inline-grid !important;
  place-items: center !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(7, 36, 43, .96) !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-align: center !important;

  opacity: 1 !important;
  transform: none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 4px 8px rgba(0,0,0,.12) !important;

  cursor: pointer !important;
}

/* Remove any pseudo circle/glass around arrows */
#searchPrevRole::before,
#searchPrevRole::after,
#searchNextRole::before,
#searchNextRole::after,
.search-nav-arrow::before,
.search-nav-arrow::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep arrows visually inside the role header, not floating as side bubbles */
body.gem-role-locked #searchPrevRole,
body.gem-role-locked #searchNextRole {
  display: inline-grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide arrows when no role card/header is active */
body:not(.gem-role-locked) #searchPrevRole,
body:not(.gem-role-locked) #searchNextRole {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Slight optical alignment for chevron glyphs */
#searchPrevRole {
  padding-bottom: 5px !important;
  padding-right: 2px !important;
}

#searchNextRole {
  padding-bottom: 5px !important;
  padding-left: 2px !important;
}

/* Theme pages do not recolor or re-glass the arrows */
body[data-gem-stone] #searchPrevRole,
body[data-gem-stone] #searchNextRole,
body[data-gem-stone] .search-nav-arrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: rgba(7, 36, 43, .96) !important;
}

/* Keep the role header clean after removing arrow circles */
.gem-role-locked .search-shell,
.gem-role-locked .search-wrap,
.gem-role-locked .search-bar,
.gem-role-locked .role-header,
.gem-role-locked .role-title-bar {
  overflow: visible !important;
}




/* GEM V18: chevron alignment only */
body.gem-role-locked #searchPrevRole,
body.gem-role-locked #searchNextRole,
body.gem-role-locked .search-nav-arrow {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;

  display: inline-grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;

  color: rgba(7, 36, 43, .96) !important;
  font-size: 42px !important;
  line-height: 34px !important;
  font-weight: 900 !important;

  transform: translateY(-3px) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 3px 6px rgba(0,0,0,.14) !important;
}

/* Optical balance: left and right chevrons sit evenly inside the header */
body.gem-role-locked #searchPrevRole {
  justify-self: center !important;
  padding-right: 1px !important;
}

body.gem-role-locked #searchNextRole {
  justify-self: center !important;
  padding-left: 1px !important;
}

/* Remove older bottom padding that made arrows sit low */
#searchPrevRole,
#searchNextRole {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}







/* GEM V21 HARD FIX ACTIVE: native openPoint only; no delayed point-profile override */

/* GEM V22 ACTIVE: point handler direct role detail, neutral home definition */

/* GEM V23 ACTIVE: point popups restored, delayed override still removed */

/* GEM DROPDOWN EMPTY / LOADING TEXT CONTRAST FINAL */
#resultsPanel .dropdown-empty,
#stonePanel .dropdown-empty {
  color: #17313a !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

html[data-gem-theme="obsidian"] #resultsPanel .dropdown-empty,
body[data-gem-theme="obsidian"] #resultsPanel .dropdown-empty,
html[data-gem-theme="obsidian"] #stonePanel .dropdown-empty,
body[data-gem-theme="obsidian"] #stonePanel .dropdown-empty {
  color: #eef8ff !important;
  text-shadow: 0 .08rem .18rem rgba(0,0,0,.45) !important;
}


/* GEM UNIVERSAL DROPDOWN TEXT CONTRAST FINAL */
#resultsPanel,
#stonePanel {
  color: #17313a !important;
}

#resultsPanel .dropdown-row,
#stonePanel .dropdown-row,
#stonePanel .stone-row {
  color: #17313a !important;
}

#resultsPanel .row-title,
#stonePanel .row-title,
#stonePanel .row-name {
  color: #17313a !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 950 !important;
}

#resultsPanel .row-sub,
#stonePanel .row-sub {
  color: rgba(23, 49, 58, .74) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

#resultsPanel .row-count,
#stonePanel .row-count,
#stonePanel .row-count-inline {
  color: #17313a !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(23,49,58,.10) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 950 !important;
}

#resultsPanel .dropdown-empty,
#stonePanel .dropdown-empty {
  color: #17313a !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 950 !important;
}

/* Keep selected/hover readable instead of letting theme wash text out. */
#resultsPanel .dropdown-row:is(:hover,:focus-visible),
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.is-active-stone) {
  color: #102a32 !important;
}

#resultsPanel .dropdown-row:is(:hover,:focus-visible) .row-title,
#resultsPanel .dropdown-row:is(:hover,:focus-visible) .row-sub,
#resultsPanel .dropdown-row:is(:hover,:focus-visible) .row-count,
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.is-active-stone) .row-title,
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.is-active-stone) .row-sub,
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.is-active-stone) .row-count,
#stonePanel .dropdown-row:is(:hover,:focus-visible,[aria-current="true"],.is-active-stone) .row-count-inline {
  color: #102a32 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Obsidian background can stay dark, but dropdown cards remain readable. */
html[data-gem-theme="obsidian"] #resultsPanel,
body[data-gem-theme="obsidian"] #resultsPanel,
html[data-gem-theme="obsidian"] #stonePanel,
body[data-gem-theme="obsidian"] #stonePanel {
  color: #17313a !important;
}


/* GEM SEARCH / DROPDOWN STONE ISOLATION FINAL */
#resultsPanel .dropdown-row[data-gem-stone="diamond"],
#resultsPanel .dropdown-row[data-stone="diamond"] {
  --row-stone-a: 76,190,198;
  --row-stone-b: 31,126,136;
}

#resultsPanel .dropdown-row[data-gem-stone="sapphire"],
#resultsPanel .dropdown-row[data-stone="sapphire"] {
  --row-stone-a: 36,105,232;
  --row-stone-b: 15,55,150;
}

#resultsPanel .dropdown-row[data-gem-stone="emerald"],
#resultsPanel .dropdown-row[data-stone="emerald"] {
  --row-stone-a: 42,196,128;
  --row-stone-b: 18,124,78;
}

#resultsPanel .dropdown-row[data-gem-stone="ruby"],
#resultsPanel .dropdown-row[data-stone="ruby"] {
  --row-stone-a: 232,48,92;
  --row-stone-b: 148,20,52;
}

#resultsPanel .dropdown-row[data-gem-stone="obsidian"],
#resultsPanel .dropdown-row[data-stone="obsidian"] {
  --row-stone-a: 72,82,94;
  --row-stone-b: 18,24,32;
}

#resultsPanel .dropdown-row[data-gem-stone="opal"],
#resultsPanel .dropdown-row[data-stone="opal"] {
  --row-stone-a: 194,98,238;
  --row-stone-b: 122,52,168;
}

#resultsPanel .dropdown-row[data-gem-stone="quartz"],
#resultsPanel .dropdown-row[data-stone="quartz"] {
  --row-stone-a: 178,224,230;
  --row-stone-b: 100,158,166;
}

#resultsPanel .dropdown-row .row-icon,
#resultsPanel .dropdown-row .gem-stone-svg {
  color: rgb(var(--row-stone-a, 76,190,198)) !important;
  filter: drop-shadow(0 8px 12px rgba(var(--row-stone-a, 76,190,198), .38)) !important;
}

#stonePanel .dropdown-row[data-stone="diamond"] .row-icon,
#stonePanel .dropdown-row[data-stone="diamond"] .gem-stone-svg {
  color: rgb(76,190,198) !important;
}

#stonePanel .dropdown-row[data-stone="sapphire"] .row-icon,
#stonePanel .dropdown-row[data-stone="sapphire"] .gem-stone-svg {
  color: rgb(36,105,232) !important;
}

#stonePanel .dropdown-row[data-stone="emerald"] .row-icon,
#stonePanel .dropdown-row[data-stone="emerald"] .gem-stone-svg {
  color: rgb(42,196,128) !important;
}

#stonePanel .dropdown-row[data-stone="ruby"] .row-icon,
#stonePanel .dropdown-row[data-stone="ruby"] .gem-stone-svg {
  color: rgb(232,48,92) !important;
}

#stonePanel .dropdown-row[data-stone="obsidian"] .row-icon,
#stonePanel .dropdown-row[data-stone="obsidian"] .gem-stone-svg {
  color: rgb(18,24,32) !important;
}

#stonePanel .dropdown-row[data-stone="opal"] .row-icon,
#stonePanel .dropdown-row[data-stone="opal"] .gem-stone-svg {
  color: rgb(194,98,238) !important;
}

#stonePanel .dropdown-row[data-stone="quartz"] .row-icon,
#stonePanel .dropdown-row[data-stone="quartz"] .gem-stone-svg {
  color: rgb(178,224,230) !important;
}

#stonePanel .dropdown-row[data-stone="all"] .row-icon,
#stonePanel .dropdown-row[data-stone="all"] .gem-stone-svg {
  color: rgb(52,214,214) !important;
}





/* GEM HARD ICON COLOR AUTHORITY */
#stoneMark .gem-stone-svg,
.search-shell #stoneMark .gem-stone-svg {
  color: inherit;
  fill: currentColor;
}

#stoneMark .gem-stone-svg path[fill="currentColor"],
#stoneMark .gem-stone-svg ellipse[fill="currentColor"],
#stoneMark .gem-stone-svg circle[fill="currentColor"],
#stoneMark .gem-stone-svg rect[fill="currentColor"],
#stoneMark .gem-stone-svg polygon[fill="currentColor"] {
  fill: currentColor !important;
}
/* GEM HARD ICON COLOR AUTHORITY END */


/* ===== GEM CSS BLOCK 2 ===== */
/* GEM FINAL SEARCH GEM SIMPLE MATCH: no resize, no glass rewrite, shadow only */
#stoneButton .gem-stone-svg,
#stoneButton .stone-mark .gem-stone-svg,
#stoneButton .filter-icon .gem-stone-svg {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,.26))
    drop-shadow(-1px -1px 2px rgba(255,255,255,.28))
    drop-shadow(1px 2px 2px rgba(0,0,0,.20)) !important;
}

body[data-gem-stone="diamond"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-diamond-rgb)) !important; }
body[data-gem-stone="sapphire"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-sapphire-rgb)) !important; }
body[data-gem-stone="emerald"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-emerald-rgb)) !important; }
body[data-gem-stone="ruby"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-ruby-rgb)) !important; }
body[data-gem-stone="opal"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-opal-rgb)) !important; }
body[data-gem-stone="quartz"] #stoneButton .gem-stone-svg { color: rgb(var(--gem-quartz-rgb)) !important; }
body[data-gem-stone="obsidian"] #stoneButton .gem-stone-svg { color: rgb(18, 24, 32) !important; }
body:not([data-gem-stone]) #stoneButton .gem-stone-svg { color: rgb(var(--gem-all-rgb)) !important; }




/* GEM CARD VOICE READER CSS START */
.gem-card-voice-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: .75rem 0 .35rem;
  padding: .58rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.34);
  color: currentColor;
  font: inherit;
  font-size: .86rem;
  font-weight: 850;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(4,28,34,.12);
}

.gem-card-voice-button:hover,
.gem-card-voice-button:focus-visible {
  background: rgba(255,255,255,.52);
  outline: none;
  transform: translateY(-1px);
}

.gem-card-voice-button[aria-pressed="true"] {
  background: rgba(4,28,34,.14);
}
/* GEM CARD VOICE READER CSS END */



/* GEM CARD VOICE BUTTON ICON TOP RIGHT START */
#modal .card {
  position: relative;
}

#modal .card .gem-card-voice-button {
  position: absolute !important;
  top: clamp(.7rem, 2vw, 1rem) !important;
  right: clamp(.7rem, 2vw, 1rem) !important;
  z-index: 5 !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#modal .card .gem-card-voice-button[aria-pressed="true"] {
  font-size: .82rem !important;
}
/* GEM CARD VOICE BUTTON ICON TOP RIGHT END */