:root {
  color-scheme: dark;
  --background: #090b09;
  --surface: #0d100d;
  --gold: #ffdc78;
  --gold-border: #ba913b;
  --text: #f4f5f2;
  --muted: #cccabf;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 0 0, #5e420e44, transparent 38%), radial-gradient(ellipse at 100% 100%, #6b491021, transparent 42%), var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rates-page.container-fluid { width: calc(100% - 48px); max-width: 970px; margin: 40px auto; padding: 0; }
.welcome-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 12px 23px;
  margin-bottom: 22px;
  border: 1px solid var(--gold-border);
  border-radius: 15px;
  background: linear-gradient(110deg, #29200b78, #0a0d0a 43%);
  box-shadow: 0 5px 23px #0008, inset 0 1px 0 #ffe59342;
}
.welcome-strip::before, .gold-card::before, .costing-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 9%;
  width: 27%;
  height: 1px;
  background: #fff3af;
  box-shadow: 0 0 9px 2px #ffc53770;
  pointer-events: none;
}
.announcement-icon { color: var(--gold); flex: 0 0 auto; filter: drop-shadow(0 0 5px #ffbf2633); }
.welcome-strip h1 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 600; }
.sample-badge { margin-left: auto; padding: 5px 10px; flex-shrink: 0; font-size: 11px; font-weight: 500; color: #e7d7ac; border: 1px solid #6e582e; border-radius: 5px; background: #1d190e; }

.market-summary.row { display: flex; margin: 0 -9px 15px; }
.market-summary > .col-xs-4 { float: none; padding: 0 9px; display: flex; }
.market-card {
  position: relative;
  width: 100%;
  padding: 13px 21px 12px;
  border: 1px solid var(--gold-border);
  border-radius: 15px;
  background: radial-gradient(ellipse at 0 0, #a7791833, transparent 65%), linear-gradient(145deg, #16190e, #090c09 73%);
  box-shadow: 0 6px 24px #0007, inset 0 1px 0 #ffe4933b, inset 0 -1px 0 #fbd36c20;
}
.gold-card { border-color: #e4b947; box-shadow: 0 5px 24px #0008, 0 0 14px #f4bf2626, inset 0 1px 0 #fff0a77a; }
.market-heading { display: flex; align-items: center; gap: 11px; min-height: 44px; }
.market-icon { width: 44px; height: 44px; flex: 0 0 auto; filter: drop-shadow(0 3px 8px #efbc2229); }
.market-heading h2 { font-size: 17px; font-weight: 500; margin: 0; line-height: 1.3; }
.market-heading h2 span { white-space: nowrap; }
.costing-card h2 { font-size: 14px; }
.market-price { margin: 7px 0 8px; font-size: 38px; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: -.025em; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px #ffce4317; }
.market-range { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid #c9cbb78c; color: #e6e7e0; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.market-range > span { display: flex; flex-direction: column; }
.market-range > span:last-child { text-align: right; }
.range-label { color: var(--muted); font-size: 9px; letter-spacing: .1em; margin-bottom: 2px; }
.silver-card { border-color: #a6afb4; background: radial-gradient(ellipse at 0 0, #c3d5e421, transparent 63%), linear-gradient(145deg, #141a1b, #090d0d 73%); box-shadow: 0 6px 24px #0007, inset 0 1px 0 #eaf6ff80, inset 0 -1px 0 #e7f5ff45; }
.silver-card .market-icon { filter: drop-shadow(0 3px 8px #c2dced29); }
.silver-card .market-price { color: #edf3f7; text-shadow: 0 2px 16px #dfefff17; }

.rates-table-wrap.table-responsive { position: relative; isolation: isolate; border: 0; overflow: hidden; margin: 0; }
.table-watermark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; user-select: none; mix-blend-mode: screen; }
.table-watermark img { grid-area: 1 / 1; width: 44%; max-width: 360px; height: auto; opacity: .085; filter: grayscale(1) invert(1); transform-origin: center; }
.watermark-glow { grid-area: 1 / 1; width: 70%; height: 80%; background: radial-gradient(ellipse, #c89a2410, transparent 65%); }
.rates-table.table { width: 100%; max-width: 970px; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0 9px; font-variant-numeric: tabular-nums; }
.product-column { width: 48%; }
.buy-column { width: 23%; }
.sell-column { width: 29%; }
.rates-table.table > thead > tr > th {
  position: relative;
  z-index: 2;
  height: 46px;
  padding: 10px 24px;
  vertical-align: middle;
  border-top: 1px solid #d3ac4c;
  border-bottom: 1px solid #d3ac4c;
  background: linear-gradient(180deg, #211b0b, #0b0d09);
  color: var(--gold);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}
.rates-table.table > thead > tr > th:first-child { text-align: left; color: #171407; border-left: 1px solid #eac258; border-radius: 13px 0 0 13px; overflow: hidden; }
.rates-table.table > thead > tr > th:first-child::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 86%; border-radius: 12px 0 0 12px; background: linear-gradient(115deg, #ffe586 0%, #f4c54c 50%, #b67a1d 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%); box-shadow: inset 0 1px 0 #fff1b1; }
.rates-table.table > thead > tr > th:first-child > span { position: relative; }
.rates-table.table > thead > tr > th:last-child { border-right: 1px solid #d3ac4c; border-radius: 0 13px 13px 0; }
.rates-table.table > tbody > tr { background: linear-gradient(110deg, #1b190c, #0c100c 35%, #0c0f0c); }
.rates-table.table > tbody > tr > th, .rates-table.table > tbody > tr > td {
  height: 82px;
  padding: 12px 24px;
  vertical-align: middle;
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  box-shadow: inset 0 1px 0 #efd57812;
  line-height: 1.35;
}
.rates-table.table > tbody > tr > th { border-left: 1px solid var(--gold-border); border-radius: 13px 0 0 13px; font-size: 19px; font-weight: 500; white-space: normal; }
.rates-table.table > tbody > tr > td:last-child { border-right: 1px solid var(--gold-border); border-radius: 0 13px 13px 0; }
.product-name { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }
.product-name img { width: 46px; height: 46px; flex: 0 0 auto; filter: drop-shadow(0 3px 7px #dbab251c); }
.product-name > span { min-width: 0; white-space: normal; overflow-wrap: normal; }
.buy-cell, .sell-cell { text-align: center; }
.buy-cell > span, .sell-cell > span { position: relative; z-index: 2; }
.buy-price { display: block; font-size: 31px; font-weight: 700; line-height: 1.1; margin-bottom: 5px; }
.sell-price { display: block; margin-bottom: 4px; color: var(--gold); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 2px 12px #ffcd3912; }
.day-range { display: block; color: #d8ddd4; font-size: 16px; white-space: nowrap; line-height: 1.45; }
.rates-note { display: flex; justify-content: space-between; gap: 12px; margin: 2px 4px 0; color: #bfbda9; font-size: 11px; line-height: 1.5; }

@media (max-width: 800px) {
  .rates-page.container-fluid { width: calc(100% - 32px); margin: 26px auto; }
  .market-card { padding: 11px 14px; }
  .market-heading { gap: 8px; }
  .market-heading h2 { font-size: 14px; }
  .costing-card h2 { font-size: 12px; }
  .market-price { font-size: 33px; }
  .market-range { font-size: 14px; }
  .rates-table.table > tbody > tr > th, .rates-table.table > tbody > tr > td { padding: 10px 17px; height: 76px; }
  .rates-table.table > tbody > tr > th { font-size: 16px; }
  .product-name { gap: 12px; }
  .product-name img { width: 42px; height: 42px; }
  .sell-price { font-size: 29px; }
  .day-range { font-size: 14px; }
}

@media (max-width: 575px) {
  .rates-page.container-fluid { width: calc(100% - 24px); margin: 16px auto; }
  .welcome-strip { min-height: 49px; margin-bottom: 14px; padding: 10px 12px; gap: 10px; border-radius: 12px; }
  .welcome-strip h1 { font-size: 15px; }
  .announcement-icon { width: 22px; height: 22px; }
  .sample-badge { font-size: 9px; padding: 4px 6px; }
  .market-summary.row { margin: 0 -4px 7px; }
  .market-summary > .col-xs-4 { padding: 0 4px; }
  .market-card { padding: 8px 9px; border-radius: 12px; }
  .market-heading { flex-direction: column; gap: 3px; min-height: 48px; text-align: center; }
  .market-icon { width: 31px; height: 31px; }
  .market-heading h2 { font-size: 11px; line-height: 1.25; white-space: nowrap; }
  .costing-card h2 { font-size: 10px; }
  .market-price { font-size: clamp(22px, 6.1vw, 33px); margin: 5px 0 6px; }
  .market-range { gap: 3px; padding-top: 5px; font-size: clamp(10px, 2.75vw, 14px); }
  .range-label { font-size: 8px; letter-spacing: .05em; }
  .rates-table.table { border-spacing: 0 7px; }
  .table-watermark img { width: 67%; }
  .product-column { width: 48%; }
  .buy-column { width: 23%; }
  .sell-column { width: 29%; }
  .rates-table.table > thead > tr > th { height: 37px; padding: 8px 10px; font-size: 12px; }
  .rates-table.table > thead > tr > th:first-child { border-radius: 10px 0 0 10px; }
  .rates-table.table > thead > tr > th:last-child { border-radius: 0 10px 10px 0; }
  .rates-table.table > tbody > tr > th, .rates-table.table > tbody > tr > td { height: 68px; padding: 8px; }
  .rates-table.table > tbody > tr > th { font-size: 12px; border-radius: 10px 0 0 10px; }
  .rates-table.table > tbody > tr > td:last-child { border-radius: 0 10px 10px 0; }
  .product-name { gap: 8px; }
  .product-name img { width: 33px; height: 33px; }
  .buy-price { font-size: 24px; margin-bottom: 4px; }
  .sell-price { font-size: clamp(20px, 5.6vw, 29px); margin-bottom: 5px; }
  .day-range { font-size: clamp(10px, 2.8vw, 14px); }
  .rates-note { margin-top: 2px; font-size: 9px; }
}

@media (max-width: 359px) {
  .rates-page.container-fluid { width: calc(100% - 16px); margin: 12px auto; }
  .welcome-strip { gap: 7px; padding-inline: 9px; }
  .welcome-strip h1 { font-size: 13px; }
  .sample-badge { font-size: 8px; }
  .market-card { padding-inline: 7px; }
  .market-heading h2 { font-size: 10px; }
  .costing-card h2 { font-size: 9px; }
  .market-price { font-size: 21px; }
  .market-range { font-size: 9px; }
  .rates-table.table > tbody > tr > th, .rates-table.table > tbody > tr > td { padding-inline: 6px; }
  .rates-table.table > tbody > tr > th { font-size: 11px; }
  .product-name { gap: 5px; }
  .product-name img { width: 29px; height: 29px; }
  .sell-price { font-size: 20px; }
  .day-range { font-size: 9px; }
}

@media print {
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rates-page.container-fluid { width: 100%; margin: 0; }
  .market-card, .welcome-strip { box-shadow: none; }
  .rates-table tr { break-inside: avoid; }
  .table-watermark img, .watermark-glow { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .table-watermark img, .watermark-glow { transform: none !important; }
}

/* Live dealer quotes keep the same three-column board at every screen size. */
.starx-live-page .product-column { width: 44%; }
.starx-live-page .buy-column, .starx-live-page .sell-column { width: 28%; }
.starx-live-page .market-heading h2 { white-space: normal; overflow-wrap: anywhere; }
.starx-live-page .product-link { display: block; color: var(--text); text-decoration: none; font: inherit; line-height: 1.35; overflow-wrap: anywhere; }
.starx-live-page .product-link:hover { color: var(--gold); }
.starx-live-page .product-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.starx-live-page .product-row { cursor: pointer; }
.starx-live-page .rates-table.table > tbody > .product-row:hover { background: linear-gradient(110deg, #2c2410, #14190f); }
.starx-live-page .buy-price, .starx-live-page .sell-price { font-size: 32px; }
.starx-live-page .buy-price, .starx-live-page .sell-price, .starx-live-page .market-price {
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  color: var(--text);
  background: transparent;
  border-radius: 999px;
  outline: 5px solid transparent;
  outline-offset: 0;
  text-shadow: none;
}
/* The painted edge adds pill spacing without moving prices or changing row height. */
.starx-live-page .buy-price.is-up::before, .starx-live-page .buy-price.is-down::before,
.starx-live-page .sell-price.is-up::before, .starx-live-page .sell-price.is-down::before,
.starx-live-page .market-price.is-up::before, .starx-live-page .market-price.is-down::before {
  content: "";
  position: absolute;
  inset: 0 -6px;
  z-index: -1;
  background: inherit;
  border-radius: inherit;
  outline: inherit;
  outline-offset: 0;
  pointer-events: none;
}
.starx-live-page .buy-price.is-up, .starx-live-page .sell-price.is-up, .starx-live-page .market-price.is-up {
  color: #fff;
  background: #146c43;
  outline-color: #146c43;
}
.starx-live-page .buy-price.is-down, .starx-live-page .sell-price.is-down, .starx-live-page .market-price.is-down {
  color: #fff;
  background: #b02a37;
  outline-color: #b02a37;
}
.starx-live-page .rates-table.table > tbody > tr > .empty-state { border: 1px solid var(--gold-border); border-radius: 13px; color: var(--muted); text-align: center; white-space: normal; }
.starxbullion-position-pill { display: inline-block; margin-top: 4px; padding: 2px 6px; border: 1px solid; border-radius: 5px; font-size: 11px; line-height: 1.3; font-weight: 600; }
.starxbullion-position-pill.is-long { color: #b5f0c8; background: #17402a; border-color: #306f46; }
.starxbullion-position-pill.is-short { color: #ffc2c2; background: #522323; border-color: #8a4141; }
.starxbullion-position-pill[hidden] { display: none; }
@media (max-width: 800px) {
  .starx-live-page .buy-price, .starx-live-page .sell-price { font-size: 27px; }
}
@media (max-width: 575px) {
  .starx-live-page .buy-price.is-up::before, .starx-live-page .buy-price.is-down::before,
  .starx-live-page .sell-price.is-up::before, .starx-live-page .sell-price.is-down::before,
  .starx-live-page .market-price.is-up::before, .starx-live-page .market-price.is-down::before { inset-inline: -4px; }
  .starx-live-page .buy-price, .starx-live-page .sell-price { font-size: clamp(16px, 4.8vw, 24px); }
  .starxbullion-position-pill { font-size: 9px; padding: 2px 4px; }
}