/* ==========================================================================
   GM GOLD - Comprehensive Design System & Component Theme
   Luxury dark emerald & gold gilded market board.
   Website shell: top info strip + sticky navbar header + footer.
   ========================================================================== */

:root {
  --gold: #f6c94e;
  --gold-light: #ffe889;
  --gold-dark: #8d6314;
  --gold-deep: #b78518;
  --silver: #b6d0df;
  --silver-light: #e6f1f7;
  --silver-border: #a9c2d1;
  --ink: #010505;
  --panel: #00100f;
  --panel-bg: #03110f;
  --panel-dark: #000807;
  --panel-border: #ba8b25;
  --white: #f8faf9;
  --text-muted: #9eaeab;
  --mint: #20e0a5;
  --red: #ff4b57;
  --nav-border: #26403f;
  --font-display: Georgia, "Times New Roman", serif;
  --font-main: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-secondary: "Roboto Condensed", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: #000;
  color-scheme: dark;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: #000;
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

button, a, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.hidden {
  display: none !important;
}

/* Base Page Wrapper */
.gm-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(16, 51, 46, .22), transparent 36rem),
    linear-gradient(180deg, #000 0%, #010606 58%, #000 100%);
}

/* Fixed width content board (970px per spec) */
.board-container {
  width: 970px;
  max-width: calc(100vw - 18px);
  margin: 0 auto;
  padding: 0 4px;
}

/* ==========================================================================
   Website Container (header / footer stretch wider)
   ========================================================================== */
.rate-container {
  width: 970px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.top-strip .rate-container,
.site-header .rate-container,
.site-footer .rate-container {
  width: 1280px;
}

/* ==========================================================================
   TOP INFO STRIP
   ========================================================================== */
.top-strip {
  background: #000806;
  border-bottom: 1px solid rgba(183, 145, 43, .4);
  font-family: var(--font-secondary);
  font-size: .95rem;
  color: var(--gold-dark);
  padding: 6px 0;
}
.top-strip a {
  color: #e9d683;
}
.top-strip a:hover {
  color: #fff;
}
.top-strip .divider {
  color: #7a5a12;
  margin: 0 12px;
}
.top-strip i {
  margin-right: 6px;
  color: var(--gold);
}

/* ==========================================================================
   MAIN SITE HEADER (Bootstrap navbar)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #000 url("../../test_gradient_v2.png") center top / 100% 100% no-repeat;
  border-bottom: none;
  box-shadow: none;
}

.site-header + .market-ticker {
  margin-top: 30px;
}
.site-header .navbar {
  padding: 15px 0;
}
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header .logo-img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(246, 201, 78, .55);
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(246, 201, 78, .4); }
  50% { box-shadow: 0 0 20px rgba(246, 201, 78, .85); }
}
.site-header .brand-name {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.05;
}
.site-header .brand-tagline {
  color: #8b9a97;
  font-family: var(--font-secondary);
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: 2px;
}
.site-header .navbar-toggler {
  border-color: rgba(246, 201, 78, .55);
}
.site-header .navbar-toggler i {
  color: var(--gold-light);
  font-size: 1.45rem;
}

/* Nav links with gold underline */
.site-header .main-nav .nav-link {
  color: #e8d68f !important;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 5px;
  padding: 8px 4px !important;
  position: relative;
  transition: color .25s ease;
}
.site-header .main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #ffe889 0%, #f6c94e 55%, #b78518 100%);
  transition: width .3s ease;
}
.site-header .main-nav .nav-link:hover,
.site-header .main-nav .nav-link.active {
  color: #fff !important;
}
.site-header .main-nav .nav-link:hover::after,
.site-header .main-nav .nav-link.active::after {
  width: 100%;
}

/* Animated gold menu icons */
.nav-iconic {
  color: var(--gold);
  margin-right: 6px;
  font-size: .85em;
  display: inline-block;
  animation: navIconPulse 2.6s ease-in-out infinite;
}
.nav-iconic.ic-spin {
  animation: navIconSpin 6s linear infinite;
}
.dropdown-item .nav-iconic {
  font-size: .8em;
  margin-right: 8px;
}
@keyframes navIconPulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.18); text-shadow: 0 0 10px rgba(246, 201, 78, .9); }
}
@keyframes navIconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.site-header .dropdown-menu {
  background: #020b0a;
  border: 1px solid rgba(186, 139, 37, .5);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 222, 111, .1);
  padding: 8px;
}
.site-header .dropdown-item {
  color: #e5ecea;
  font-family: var(--font-secondary);
  font-size: .98rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item.active {
  background: rgba(246, 201, 78, .14);
  color: var(--gold-light);
}
.site-header .dropdown-item .nav-iconic {
  width: 18px;
  text-align: center;
}

/* ==========================================================================
   Ticker & Status Strips
   ========================================================================== */
.market-ticker {
  position: relative;
  height: 38px;
  overflow: hidden;
  background: linear-gradient(90deg, #010a09 0%, #031513 50%, #010a09 100%);
  border-bottom: 1px solid rgba(186, 139, 37, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 222, 111, .1);
}

.market-ticker .ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold-light);
  animation: tickerScroll 45s linear infinite;
  padding-left: 100%;
}

.market-ticker .ticker-chip {
  display: inline-flex;
  gap: 8px;
  margin-right: 32px;
  flex-shrink: 0;
}

.market-ticker .ticker-chip .sym {
  color: var(--white);
  text-transform: uppercase;
}

.market-ticker .ticker-chip .px {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.feed-status {
  margin: 16px 0 14px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(3, 17, 15, 0.75);
  border: 1px solid rgba(186, 139, 37, 0.4);
  color: var(--gold-light);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}

.feed-status.feed-error {
  border-color: var(--red);
  color: var(--red);
}

.feed-status.feed-error::before {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

/* ==========================================================================
   Page-level Spinner (#maSpinner)
   ========================================================================== */
#maSpinner {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(3px);
}
#maSpinner .ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid rgba(246, 201, 78, .25);
  border-top-color: var(--gold);
  animation: ringSpin .85s linear infinite;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Metal Panels & Cards
   ========================================================================== */
.metal-panel {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .13), transparent 33%),
    linear-gradient(115deg, #03110f 0%, #000807 100%);
  border: 1.5px solid #ba8b25;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 111, .12),
    inset 0 0 27px rgba(148, 101, 8, .07),
    0 7px 18px rgba(0, 0, 0, .38),
    0 0 10px rgba(177, 130, 27, .05);
  border-radius: 16px;
  overflow: hidden;
}

.silver-panel {
  border-color: #a9c2d1;
  box-shadow:
    inset 0 0 0 1px rgba(234, 248, 255, .12),
    inset 0 0 28px rgba(111, 177, 211, .08),
    0 7px 18px rgba(0, 0, 0, .38);
}

.panel-pad {
  padding: 24px 28px;
}

@media (max-width: 760px) {
  .panel-pad {
    padding: 16px 14px;
  }
}

/* Section Headings */
.page-head {
  margin: 24px 0 18px;
  text-align: left;
}

.page-head.text-center {
  text-align: center;
}

.eyebrow {
  display: inline-block;
  color: var(--gold);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}

.page-head h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  text-shadow: 0 1px 0 #855e0c, 0 0 14px rgba(255, 221, 103, .15);
}

.section-title {
  margin: 22px 0 14px;
  color: #eacb62;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.calculation-help {
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* Values and Indicators */
.mint { color: var(--mint) !important; }
.red { color: var(--red) !important; }

/* ==========================================================================
   Mercantile Marquee Strips (liverates page)
   ========================================================================== */
.marquee-bar {
  background: #000806;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  margin: 14px auto 0;
}
.marquee-bar .welcome-tag {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #1a1300;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: .85rem;
  background: linear-gradient(100deg, #ffe889 0%, #f6c94e 55%, #d9a422 100%);
  padding: 0 16px 0 22px;
  z-index: 2;
}
.marquee-bar .welcome-tag::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(90deg, transparent, #f6c94e 80%);
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: .5px;
  font-size: .95rem;
  animation: scrollLeft 20s linear infinite;
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.notice-bar {
  background: #000806;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  margin: 20px auto;
}
.notice-bar .marquee-track {
  animation-duration: 26s;
  font-size: .9rem;
  color: var(--gold-light);
}

/* ==========================================================================
   Live Rates Board (spot / futures / products)
   ========================================================================== */
.spot-row {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.spot-card {
  flex: 1 1 0;
  min-width: 150px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .13), transparent 33%),
    linear-gradient(115deg, #03110f 0%, #000807 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 111, .12), 0 7px 18px rgba(0, 0, 0, .38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.spot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 22px rgba(246, 201, 78, .28);
}
.spot-card__head {
  background: linear-gradient(180deg, #ffe889 0%, #f6c94e 55%, #c9961b 100%);
  color: #1a1300;
  font-weight: 700;
  text-align: center;
  padding: 9px 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .95rem;
}
.spot-card__body {
  text-align: center;
  padding: 18px 12px 14px;
}
.spot-price {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.spot-range {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--gold);
  font-weight: 600;
  font-size: .95rem;
}
.spot-change {
  margin-top: 8px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: .9rem;
}

/* Products table (theme rows: medallion image + name + divider + sell + chevron) */
.products-table {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
}
.products-table::before {
  content: "GM GOLD";
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--gold);
  opacity: .05;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}
.products-table > * {
  position: relative;
  z-index: 1;
}
.products-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 1px 200px 26px;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(100deg, #ffe889 0%, #f6c94e 55%, #d9a422 100%);
  color: #1a1300;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .98rem;
}
.products-head > div:first-child {
  grid-column: 1 / 3;
  white-space: nowrap;
}
.products-head .col-right {
  grid-column: 4;
  text-align: right;
}

.product-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 1px 200px 26px;
  align-items: center;
  gap: 18px;
  min-height: 102px;
  padding: 12px 18px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 14px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .13), transparent 33%),
    linear-gradient(115deg, #03110f 0%, #000807 100%);
  box-shadow: inset 0 0 24px rgba(197, 147, 20, .08), 0 7px 18px rgba(0, 0, 0, .38);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-row:hover {
  transform: translateY(-3px);
  border-color: var(--gold-light);
  box-shadow: 0 6px 20px rgba(246, 201, 78, .25);
}
.product-medallion {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid #c79427;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 196, 53, .22), transparent 70%);
  overflow: hidden;
}
.product-medallion--silver {
  border-color: #90a8b9;
  background: radial-gradient(circle, rgba(182, 208, 223, .2), transparent 70%);
}
.product-medallion img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.product-name {
  color: #fff;
  font-family: var(--font-main);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.12;
}
.product-time {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: .83rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}
.product-divider {
  width: 1px;
  height: 66px;
  background: #a8b4b1;
  opacity: .5;
}
.product-sell {
  text-align: right;
}
.product-sell > small {
  display: block;
  color: var(--gold);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-sell .sell-value {
  display: inline-block;
  margin-top: 3px;
  color: var(--gold-light);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.product-sell .sell-value .rate-pill {
  min-width: 2.2em;
}
.product-chevron {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #d9e4e3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  opacity: .85;
  transition: stroke .2s ease, transform .2s ease;
}
.product-row:hover .product-chevron {
  stroke: var(--gold);
  transform: translateX(3px);
}

/* Rate pill flash cells */
.rate-pill {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
}
.rate-pill.up {
  color: var(--mint);
  text-shadow: 0 0 8px rgba(32, 224, 165, .55);
}
.rate-pill.down {
  color: var(--red);
  text-shadow: 0 0 8px rgba(255, 75, 87, .55);
}

/* Futures */
.future-row {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.future-card {
  flex: 1 1 0;
  min-width: 260px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .13), transparent 33%),
    linear-gradient(115deg, #03110f 0%, #000807 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 111, .12), 0 7px 18px rgba(0, 0, 0, .38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.future-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 22px rgba(246, 201, 78, .28);
}
.future-card__head {
  background: linear-gradient(180deg, #ffe889 0%, #f6c94e 55%, #c9961b 100%);
  color: #1a1300;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 1rem;
}
.future-card__body {
  display: flex;
  padding: 18px 12px 12px;
  align-items: center;
  gap: 8px;
}
.future-card__bars {
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  align-self: center;
}
.future-card__bars img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
}
.future-col {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(246, 201, 78, .25);
}
.future-col:last-child {
  border-right: none;
}
.future-label {
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.future-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.future-value .rate-pill {
  min-width: 2.2em;
}
.future-hl {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px 6px;
  color: var(--gold);
  font-size: .85rem;
  opacity: .85;
}

/* ==========================================================================
   Trend + News section (liverates page)
   ========================================================================== */
.liverates-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin: 22px 0 0;
}
@media (max-width: 920px) {
  .liverates-grid {
    grid-template-columns: 1fr;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
}
.panel-title {
  margin: 0 0 12px;
  color: #ffe47a;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.panel-title .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}
.news-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.news-item {
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 222, 111, .12);
}
.news-item p {
  margin: 0;
  color: #e9ecea;
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.45;
}
.news-item time {
  display: block;
  margin-top: 6px;
  color: var(--gold);
  font-size: .85rem;
  font-weight: 600;
}
.news-list.feed-stale {
  opacity: .7;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid #ba8b25;
  background: linear-gradient(110deg, #0b1a18, #030d0c);
  color: var(--gold-light);
  font-family: var(--font-main);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 222, 111, .1);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 12px rgba(246, 201, 78, .2);
  filter: brightness(1.1);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.primary {
  background: linear-gradient(108deg, #fff084 0%, #f5c74e 64%, #d89d21 100%);
  color: #050806;
  border: 0;
  box-shadow: 0 5px 15px rgba(245, 199, 78, .3);
}

.btn.primary:hover {
  box-shadow: 0 7px 22px rgba(245, 199, 78, .5);
}

.btn.buy-btn {
  background: linear-gradient(108deg, #6bf5c8 0%, #20e0a5 64%, #129b72 100%);
  color: #021a12;
  border: 0;
  box-shadow: 0 5px 15px rgba(32, 224, 165, .3);
}

.btn.sell-btn {
  background: linear-gradient(108deg, #ff818a 0%, #ff4b57 64%, #b81c26 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 5px 15px rgba(255, 75, 87, .3);
}

.btn.block {
  display: flex;
  width: 100%;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  background: linear-gradient(108deg, #fff084 0%, #f5c74e 64%, #d89d21 100%);
  color: #050806;
  font-weight: 700;
  font-size: 1.1rem;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(245, 199, 78, .35);
}

/* Segmented Toggle Control */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #010808;
  border: 1px solid #26403f;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.segmented button {
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.segmented button.active {
  background: linear-gradient(108deg, #fff084 0%, #f5c74e 64%, #d89d21 100%);
  color: #050806;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.field {
  display: block;
  margin-bottom: 18px;
}

.field > span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.field-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.field-inner .ficon {
  position: absolute;
  left: 14px;
  color: var(--gold);
  font-size: 1.1rem;
  pointer-events: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 52px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid #2d4c49;
  background: #010c0b;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.field-inner input {
  padding-left: 44px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(246, 201, 78, .3);
}

.field select option {
  background: #010c0b;
  color: var(--white);
  padding: 8px;
}

/* ==========================================================================
   Tables & Data Presentation
   ========================================================================== */
.table-scroll {
  overflow-x: auto;
  border-radius: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.12rem;
}

.data-table th {
  padding: 14px 16px;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1.5px solid #ba8b25;
  background: rgba(186, 139, 37, .06);
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #142a27;
  color: var(--white);
  font-weight: 500;
  vertical-align: middle;
}

.data-table tr:hover td {
  background: rgba(255, 222, 111, .03);
}

.data-table th small,
.data-table td small {
  display: block;
  font-size: .88rem;
  color: var(--text-muted);
  font-weight: 400;
}

.empty-state {
  text-align: center;
  padding: 36px 18px;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.empty-state a {
  color: var(--gold);
  text-decoration: underline;
}

.order-rate-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
}

.order-rate-pill.is-up {
  color: var(--mint);
  background: rgba(32, 224, 165, .15);
}

.order-rate-pill.is-down {
  color: var(--red);
  background: rgba(255, 75, 87, .15);
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(246, 201, 78, .12);
  color: var(--gold-light);
  border: 1px solid rgba(246, 201, 78, .3);
}

/* ==========================================================================
   Canvas & Chart Styling (Gold Trends)
   ========================================================================== */
.trend-card {
  border-radius: 16px;
}

.trend-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1b3531;
}

.trend-legend {
  display: flex;
  gap: 18px;
  align-items: center;
}

.trend-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}

.trend-key i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.trend-key-gold { color: var(--gold); }
.trend-key-gold i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.trend-key-silver { color: var(--silver); }
.trend-key-silver i { background: var(--silver); box-shadow: 0 0 8px var(--silver); }

.trend-last {
  display: flex;
  gap: 24px;
}

.trend-last-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.trend-last-item b {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.trend-last-item strong {
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.trend-last-gold strong { color: var(--gold); }
.trend-last-silver strong { color: var(--silver); }

.trend-delta {
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
}

.trend-delta.is-up { color: var(--mint); }
.trend-delta.is-down { color: var(--red); }

.trend-canvas-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  background: #010a09;
  border-radius: 12px;
  border: 1px solid #162f2c;
  overflow: hidden;
}

.trend-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.trend-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.2rem;
  pointer-events: none;
}

.trend-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: 1rem;
}

.trend-stamp {
  color: var(--gold);
}

/* ==========================================================================
   Modal Dialogs (#modifyOrderDialog)
   ========================================================================== */
dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 520px;
  width: calc(100vw - 32px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(4px);
}

dialog form {
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .2), transparent 33%),
    linear-gradient(115deg, #03110f 0%, #000807 100%);
  border: 1.5px solid #ba8b25;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .8), 0 0 20px rgba(186, 139, 37, .2);
  color: var(--white);
}

dialog h2 {
  margin: 0 0 14px;
  color: #ffe47a;
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.tax-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

/* ==========================================================================
   Floating WhatsApp Button
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 12px rgba(37, 211, 102, .4);
  font-size: 28px;
  transition: transform .2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  color: #fff;
}

/* ==========================================================================
   Footer Component
   ========================================================================== */
.site-footer {
  margin-top: 48px;
  padding: 44px 0 18px;
  border-top: 1.5px solid #ba8b25;
  background: linear-gradient(180deg, #020c0b 0%, #000 100%);
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-size: 1.05rem;
}

.footer-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 0 10px rgba(246, 201, 78, .5);
}

.footer-title {
  color: #ffe47a;
  font-family: var(--font-main);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a,
.footer-contact a {
  color: #d2dedb;
  transition: color .15s ease, padding-left .15s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--gold);
  padding-left: 3px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: #d2dedb;
}

.footer-contact i {
  color: var(--gold);
  margin-top: 4px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  margin-right: 8px;
  color: var(--gold);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.social-icons a:hover {
  background: linear-gradient(100deg, #ffe889 0%, #f6c94e 55%, #d9a422 100%);
  color: #000;
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #152b28;
  font-size: .95rem;
  color: var(--text-muted);
}

.footer-bottom a {
  color: var(--gold);
}

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */
@media (max-width: 991px) {
  .site-header .navbar-collapse {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(186, 139, 37, .4);
    border-radius: 12px;
    background: rgba(2, 11, 10, .98);
  }
  .site-header .main-nav .nav-link {
    padding: 10px 6px !important;
  }
}

@media (max-width: 760px) {
  .top-strip {
    font-size: .82rem;
  }
  .top-strip .divider {
    margin: 0 7px;
  }
  .site-header .logo-img {
    width: 42px;
    height: 42px;
  }
  .site-header .brand-name {
    font-size: 1.15rem;
  }
  .site-header .brand-tagline {
    font-size: .6rem;
    letter-spacing: 1px;
  }

  .spot-row {
    gap: 8px;
  }
  .spot-card {
    min-width: 135px;
  }
  .spot-price {
    font-size: 1.45rem;
  }
  .spot-range {
    font-size: .8rem;
  }
  .future-value {
    font-size: 1.15rem;
  }
  .products-head {
    grid-template-columns: 56px minmax(0, 1fr) 1px auto 20px;
    gap: 12px;
    padding: 10px 12px;
    font-size: .9rem;
  }
  .product-row {
    grid-template-columns: 56px minmax(0, 1fr) 1px auto 20px;
    gap: 12px;
    padding: 10px 12px;
    min-height: 82px;
  }
  .product-medallion {
    width: 56px;
    height: 56px;
  }
  .product-medallion img {
    width: 40px;
    height: 40px;
  }
  .product-divider {
    height: 52px;
  }
  .product-name {
    font-size: 1.05rem;
  }
  .product-sell .sell-value {
    font-size: 1.45rem;
  }
  .future-card__bars {
    flex-basis: 38px;
  }
  .future-card__bars img {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 420px) {
  .rate-container {
    padding: 0 10px;
  }
  .spot-card {
    min-width: 120px;
  }
  .spot-price {
    font-size: 1.3rem;
  }
  .products-head {
    grid-template-columns: 44px minmax(0, 1fr) 1px auto 16px;
    gap: 10px;
    padding: 9px 10px;
    font-size: .85rem;
  }
  .product-row {
    grid-template-columns: 44px minmax(0, 1fr) 1px auto 16px;
    gap: 10px;
    padding: 9px 10px;
    min-height: 68px;
    border-radius: 11px;
  }
  .product-medallion {
    width: 44px;
    height: 44px;
  }
  .product-medallion img {
    width: 32px;
    height: 32px;
  }
  .product-divider {
    height: 40px;
  }
  .product-name {
    font-size: .95rem;
  }
  .product-time {
    font-size: .75rem;
  }
  .product-sell > small {
    font-size: .8rem;
  }
  .product-sell .sell-value {
    font-size: 1.28rem;
  }
  .product-chevron {
    width: 19px;
    height: 19px;
  }
  .future-card__bars {
    flex-basis: 32px;
  }
  .future-card__bars img {
    width: 30px;
    height: 30px;
  }
}


/* ==========================================================================
   LIVERATES REFERENCE TABLE
   Scoped to the live-rates table only. Site header, ticker and footer untouched.
   ========================================================================== */
#live-rates .live-rates-table {
  width: calc(100% + 8px);
  max-width: none;
  margin: 0 -4px;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
}
#live-rates .live-rates-table td {
  padding: 0;
  vertical-align: top;
}
#live-rates .live-rates-table .spot-row,
#live-rates .live-rates-table .future-row {
  margin: 0;
  display: grid;
  flex-wrap: nowrap;
}
#live-rates .live-rates-table .spot-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#live-rates .live-rates-table .spot-card,
#live-rates .live-rates-table .future-card,
#live-rates .live-rates-table .product-row,
#live-rates .live-rates-table .products-head {
  background:
    radial-gradient(circle at 15% 20%, rgba(58, 50, 8, .12), transparent 34%),
    linear-gradient(112deg, #03110f 0%, #000807 100%);
  border: 1.5px solid #b98b25;
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 124, .09),
    inset 0 0 26px rgba(160, 112, 12, .06),
    0 7px 18px rgba(0, 0, 0, .38);
}
#live-rates .live-rates-table .spot-card,
#live-rates .live-rates-table .future-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 17px;
}
#live-rates .live-rates-table .spot-card--silver,
#live-rates .live-rates-table .future-card--silver {
  border-color: #9fb9c9;
  box-shadow:
    inset 0 0 0 1px rgba(235, 249, 255, .11),
    inset 0 0 28px rgba(119, 187, 218, .08),
    0 7px 18px rgba(0, 0, 0, .38);
}
#live-rates .live-rates-table .spot-card:hover,
#live-rates .live-rates-table .future-card:hover,
#live-rates .live-rates-table .product-row:hover {
  transform: none;
}

/* Three spot cards */
#live-rates .live-rates-table .spot-card {
  min-height: 112px;
  padding: 10px 14px 8px;
  text-align: center;
}
#live-rates .live-rates-table .spot-card__head {
  margin: 0 0 3px;
  padding: 0;
  color: #e7c75d;
  background: none;
  font-family: var(--font-main);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}
#live-rates .live-rates-table .spot-card--silver .spot-card__head {
  color: #d6e4eb;
}
#live-rates .live-rates-table .spot-card__body {
  padding: 0;
}
#live-rates .live-rates-table .spot-price {
  color: #f8faf9;
  font-size: clamp(1.8rem, 3.6vw, 2.55rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
}
#live-rates .live-rates-table .spot-range {
  display: flex;
  margin-top: 6px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #e1e7e5;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
#live-rates .live-rates-table .spot-range > i {
  display: block;
  width: 1px;
  height: 25px;
  background: #a7b3b1;
  opacity: .85;
}
#live-rates .live-rates-table .spot-range__low {
  display: inline-flex;
  align-items: center;
}
#live-rates .live-rates-table .spot-range__low b {
  font-weight: 600;
}
#live-rates .live-rates-table .trend-arrow {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  fill: currentColor;
  flex: 0 0 auto;
}
#live-rates .live-rates-table .up { color: var(--mint); }
#live-rates .live-rates-table .down { color: var(--red); }

/* Two future cards */
#live-rates .live-rates-table .future-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#live-rates .live-rates-table .future-card {
  display: grid;
  min-height: 116px;
  padding: 8px 16px;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
#live-rates .live-rates-table .future-card__bars {
  display: grid;
  width: 104px;
  height: 80px;
  place-items: center;
}
#live-rates .live-rates-table .future-card__bars img {
  width: 98px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .58));
}
#live-rates .live-rates-table .future-card__content {
  min-width: 0;
}
#live-rates .live-rates-table .future-card__head {
  margin: 0 0 4px;
  padding: 0;
  color: #e7c75d;
  background: none;
  font-family: var(--font-main);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.02;
  text-align: left;
  text-transform: uppercase;
}
#live-rates .live-rates-table .future-card--silver .future-card__head {
  color: #d6e4eb;
}
#live-rates .live-rates-table .future-value {
  color: #f8faf9;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  font-weight: 800;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
#live-rates .live-rates-table .future-change {
  display: flex;
  margin-top: 5px;
  align-items: center;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
}
#live-rates .live-rates-table .future-hl {
  display: grid;
  margin-top: 6px;
  padding: 6px 0 0;
  grid-template-columns: 1fr 1fr;
  color: #e1e7e5;
  font-size: .86rem;
  font-weight: 600;
  border-top: 1px solid #a1acab;
  opacity: 1;
}
#live-rates .live-rates-table .future-hl span {
  white-space: nowrap;
}
#live-rates .live-rates-table .future-hl span + span {
  padding-left: 16px;
  border-left: 1px solid #a1acab;
}
#live-rates .live-rates-table .future-hl b {
  margin-left: 7px;
}
#live-rates .live-rates-table .future-high { color: var(--mint); }
#live-rates .live-rates-table .future-low { color: var(--red); }

/* Product / Sell strip and three product rows */
#live-rates .live-rates-table .products-table {
  margin: 0;
  overflow: visible;
}
#live-rates .live-rates-table .products-table::before {
  display: none;
}
#live-rates .live-rates-table .products-head {
  display: grid;
  height: 62px;
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  color: #e6ce66;
  border-radius: 17px;
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
#live-rates .live-rates-table .products-head__product,
#live-rates .live-rates-table .products-head__sell {
  display: flex;
  align-items: center;
}
#live-rates .live-rates-table .products-head__product {
  gap: 14px;
  padding: 0 27px;
  color: #080a08;
  background: linear-gradient(102deg, #ffe77e, #edbb41 68%, #ca8d1b);
}
#live-rates .live-rates-table .products-head__product img {
  width: 52px;
  height: 42px;
  object-fit: contain;
}
#live-rates .live-rates-table .products-head__sell {
  justify-content: center;
  gap: 24px;
}
#live-rates .live-rates-table .products-head__sell svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
#live-rates .live-rates-table .product-row {
  display: grid;
  min-height: 86px;
  margin: 0 0 12px;
  padding: 8px 20px;
  grid-template-columns: 64px minmax(155px, 1fr) 1px 200px 26px;
  align-items: center;
  gap: 16px;
  border-radius: 17px;
}
#live-rates .live-rates-table .product-medallion,
#live-rates .live-rates-table .product-medallion--silver {
  display: grid;
  width: 64px;
  height: 64px;
  overflow: visible;
  place-items: center;
  border: 0;
  background: none;
}
#live-rates .live-rates-table .product-medallion img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
#live-rates .live-rates-table .product-name {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .015em;
  text-transform: uppercase;
}
#live-rates .live-rates-table .product-time {
  display: none;
}
#live-rates .live-rates-table .product-divider {
  width: 1px;
  height: 62px;
  background: #a8b4b1;
  opacity: .8;
}
#live-rates .live-rates-table .product-sell {
  text-align: left;
}
#live-rates .live-rates-table .product-sell > small {
  display: block;
  color: #e7cf69;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
#live-rates .live-rates-table .product-sell .sell-value {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
#live-rates .live-rates-table .product-chevron {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

@media (max-width: 760px) {
  #live-rates .live-rates-table {
    border-spacing: 0 12px;
  }
  #live-rates .live-rates-table .spot-row,
  #live-rates .live-rates-table .future-row {
    gap: 7px;
  }
  #live-rates .live-rates-table .spot-card {
    min-width: 0;
    min-height: 129px;
    padding: 14px 6px 10px;
    border-radius: 13px;
  }
  #live-rates .live-rates-table .spot-card__head {
    font-size: clamp(.79rem, 3.15vw, 1.04rem);
  }
  #live-rates .live-rates-table .spot-price {
    font-size: clamp(1.52rem, 7.8vw, 2.4rem);
  }
  #live-rates .live-rates-table .spot-range {
    gap: 5px;
    margin-top: 12px;
    font-size: clamp(.62rem, 2.65vw, .86rem);
  }
  #live-rates .live-rates-table .spot-range > i {
    height: 21px;
  }
  #live-rates .live-rates-table .trend-arrow {
    width: 12px;
    height: 12px;
    margin-right: 2px;
  }

  #live-rates .live-rates-table .future-card {
    min-width: 0;
    min-height: 116px;
    padding: 11px 9px;
    grid-template-columns: clamp(54px, 15vw, 84px) minmax(0, 1fr);
    gap: 5px;
    border-radius: 13px;
  }
  #live-rates .live-rates-table .future-card__bars {
    width: clamp(54px, 15vw, 84px);
    height: 72px;
  }
  #live-rates .live-rates-table .future-card__bars img {
    width: clamp(58px, 15vw, 86px);
    height: 70px;
  }
  #live-rates .live-rates-table .future-card__head {
    font-size: clamp(.76rem, 3vw, 1.08rem);
  }
  #live-rates .live-rates-table .future-value {
    font-size: clamp(1.67rem, 7.8vw, 2.52rem);
  }
  #live-rates .live-rates-table .future-change {
    margin-top: 5px;
    font-size: clamp(.68rem, 3vw, 1rem);
  }
  #live-rates .live-rates-table .future-hl {
    gap: 0;
    margin-top: 8px;
    padding-top: 7px;
    font-size: clamp(.56rem, 2.36vw, .79rem);
  }
  #live-rates .live-rates-table .future-hl span + span {
    padding-left: 6px;
  }
  #live-rates .live-rates-table .future-hl b {
    margin-left: 3px;
  }

  #live-rates .live-rates-table .products-head {
    height: 61px;
    margin-bottom: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    border-radius: 13px;
    font-size: clamp(1rem, 4.4vw, 1.25rem);
  }
  #live-rates .live-rates-table .products-head__product {
    gap: 8px;
    padding: 0 14px;
  }
  #live-rates .live-rates-table .products-head__product img {
    width: 42px;
    height: 36px;
  }
  #live-rates .live-rates-table .products-head__sell {
    gap: 12px;
  }
  #live-rates .live-rates-table .products-head__sell svg {
    width: 25px;
    height: 25px;
  }
  #live-rates .live-rates-table .product-row {
    min-height: 105px;
    margin-bottom: 12px;
    padding: 10px 12px;
    grid-template-columns: 57px minmax(95px, 1fr) 1px minmax(91px, 25vw) 17px;
    gap: 9px;
    border-radius: 13px;
  }
  #live-rates .live-rates-table .product-medallion,
  #live-rates .live-rates-table .product-medallion--silver,
  #live-rates .live-rates-table .product-medallion img {
    width: 57px;
    height: 57px;
  }
  #live-rates .live-rates-table .product-name {
    font-size: clamp(.78rem, 3.4vw, .98rem);
  }
  #live-rates .live-rates-table .product-divider {
    height: 56px;
  }
  #live-rates .live-rates-table .product-sell > small {
    font-size: .9rem;
  }
  #live-rates .live-rates-table .product-sell .sell-value {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
  #live-rates .live-rates-table .product-chevron {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 390px) {
  #live-rates .live-rates-table .future-card {
    padding-right: 5px;
    padding-left: 5px;
    grid-template-columns: 47px minmax(0, 1fr);
  }
  #live-rates .live-rates-table .future-card__bars {
    width: 47px;
  }
  #live-rates .live-rates-table .future-card__bars img {
    width: 51px;
  }
  #live-rates .live-rates-table .future-hl b {
    display: block;
    margin: 3px 0 0;
  }
  #live-rates .live-rates-table .product-row {
    grid-template-columns: 48px minmax(77px, 1fr) 1px minmax(74px, 25vw) 13px;
    gap: 5px;
  }
  #live-rates .live-rates-table .product-medallion,
  #live-rates .live-rates-table .product-medallion--silver,
  #live-rates .live-rates-table .product-medallion img {
    width: 48px;
    height: 48px;
  }
}

/* Final table-only cascade corrections after legacy live-board rules. */
#live-rates .live-rates-table .products-head__product,
#live-rates .live-rates-table .products-head__sell {
  grid-column: auto !important;
}

#live-rates .live-rates-table .future-card--gold .future-card__bars img {
  clip-path: inset(0 0 0 8px);
}

@media (max-width: 760px) {
  #live-rates .live-rates-table {
    display: block;
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
  }
  #live-rates .live-rates-table > tbody,
  #live-rates .live-rates-table > tbody > tr,
  #live-rates .live-rates-table > tbody > tr > td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #live-rates .live-rates-table .spot-row,
  #live-rates .live-rates-table .future-row,
  #live-rates .live-rates-table .products-table,
  #live-rates .live-rates-table .spot-card,
  #live-rates .live-rates-table .future-card,
  #live-rates .live-rates-table .product-row,
  #live-rates .live-rates-table .product-name,
  #live-rates .live-rates-table .product-sell {
    min-width: 0;
    max-width: 100%;
  }
  #live-rates .live-rates-table > tbody > tr + tr {
    margin-top: 12px;
  }
  #live-rates .live-rates-table .spot-range {
    overflow: hidden;
  }
}


/* HD artwork and metallic edge refinement — live-rates table only. */
#live-rates .live-rates-table .spot-card,
#live-rates .live-rates-table .future-card,
#live-rates .live-rates-table .product-row,
#live-rates .live-rates-table .products-head {
  border: 1.5px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 16%, rgba(71, 57, 12, .11), transparent 35%) padding-box,
    linear-gradient(112deg, #03110f 0%, #000807 100%) padding-box,
    linear-gradient(135deg, #f0c84f 0%, #76510c 46%, #d7a52f 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 139, .055),
    inset 0 0 28px rgba(170, 116, 12, .055),
    0 0 12px rgba(215, 165, 47, .12),
    0 8px 20px rgba(0, 0, 0, .42);
  background-clip: padding-box, padding-box, border-box;
}
#live-rates .live-rates-table .spot-card--silver,
#live-rates .live-rates-table .future-card--silver {
  background:
    radial-gradient(circle at 18% 16%, rgba(121, 180, 207, .09), transparent 35%) padding-box,
    linear-gradient(112deg, #03110f 0%, #000807 100%) padding-box,
    linear-gradient(135deg, #eef9ff 0%, #6d8797 47%, #bed5e2 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(238, 250, 255, .07),
    inset 0 0 29px rgba(118, 184, 215, .075),
    0 0 12px rgba(174, 213, 232, .13),
    0 8px 20px rgba(0, 0, 0, .42);
}
#live-rates .live-rates-table .products-head {
  overflow: hidden;
}
#live-rates .live-rates-table .future-card__bars {
  overflow: visible;
}
#live-rates .live-rates-table .future-card__bars img,
#live-rates .live-rates-table .future-card--gold .future-card__bars img {
  width: 108px;
  height: 88px;
  clip-path: none;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}
#live-rates .live-rates-table .future-card--gold .future-card__bars img {
  filter:
    drop-shadow(0 9px 8px rgba(0, 0, 0, .62))
    drop-shadow(0 0 9px rgba(235, 181, 45, .20));
}
#live-rates .live-rates-table .future-card--silver .future-card__bars img {
  filter:
    drop-shadow(0 9px 8px rgba(0, 0, 0, .62))
    drop-shadow(0 0 8px rgba(202, 230, 244, .18));
}
#live-rates .live-rates-table .product-medallion,
#live-rates .live-rates-table .product-medallion--silver {
  overflow: visible;
}
#live-rates .live-rates-table .product-medallion img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 6px 8px rgba(0, 0, 0, .58))
    drop-shadow(0 0 7px rgba(230, 174, 39, .16));
}
#live-rates .live-rates-table .products-head__product img {
  image-rendering: auto;
  filter: drop-shadow(0 2px 2px rgba(255, 216, 93, .13));
}

@media (max-width: 760px) {
  #live-rates .live-rates-table .spot-card,
  #live-rates .live-rates-table .future-card,
  #live-rates .live-rates-table .product-row,
  #live-rates .live-rates-table .products-head {
    border-radius: 13px;
  }
  #live-rates .live-rates-table .future-card__bars img,
  #live-rates .live-rates-table .future-card--gold .future-card__bars img {
    width: clamp(58px, 15vw, 88px);
    height: 80px;
  }
  #live-rates .live-rates-table .product-medallion img {
    width: 57px;
    height: 57px;
  }
}

@media (max-width: 390px) {
  #live-rates .live-rates-table .future-card__bars img,
  #live-rates .live-rates-table .future-card--gold .future-card__bars img {
    width: 51px;
    height: 72px;
  }
  #live-rates .live-rates-table .product-medallion img {
    width: 48px;
    height: 48px;
  }
}

/* Live-rates: status strip hidden — the board cells already expose open/closed state. */
#live-rates .feed-status {
  display: none;
}

/* ==========================================================================
   GOLD NETWORK — ambient golden particle background (js/gold-network.js)
   ========================================================================== */
#gold-network {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body > .top-strip,
body > main,
body > footer {
  position: relative;
  z-index: 2;
}

/* Responsive two-sided header sweep; no straight border or pill. */
@media (max-width: 760px) {
  .site-header + .market-ticker {
    margin-top: 21px;
  }
}