:root{
  --bg: #f6f6f7;
  --card: #ffffff;
  --text: #111114;
  --muted: rgba(17,17,20,.62);
  --stroke: rgba(17,17,20,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --pro: #0a84ff;
  --elite: #a86cff;
  --tickerH: 30px;
  --tickerSeconds: 52s;
  --nb-bg: rgba(255,255,255,.62);
  --nb-border: rgba(17,17,20,.10);
  --nb-shadow: 0 18px 60px rgba(0,0,0,.10);
  --nb-item-bg: rgba(255,255,255,.78);
  --nb-item-border: rgba(17,17,20,.10);
  --nb-item-text: rgba(17,17,20,.88);
  --nb-pro-bg: rgba(10,132,255,.12);
  --nb-pro-border: rgba(10,132,255,.28);
  --nb-pro-text: #0a84ff;
  --nb-elite-bg: rgba(168,108,255,.14);
  --nb-elite-border: rgba(168,108,255,.30);
  --nb-elite-text: #a86cff;
  --nb-focus: 0 0 0 4px rgba(10,132,255,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  padding-top: var(--tickerH);
}
html{ color-scheme: light; }

.shell{
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 50px;
}
h1{
  margin:0 0 6px;
  font-size: 44px;
  letter-spacing: -0.02em;
}
.sub{
  margin:0 0 10px;
  color: var(--muted);
  font-size: 15px;
}
.metaLine{
  margin:0;
  color: var(--muted);
  font-size: 13px;
}
.muted{ color: var(--muted); }
.dot{ margin: 0 8px; opacity:.5; }
.hidden{ display:none !important; }

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.navLinks{
  display:flex;
  gap:10px;
  align-items:center;
}
.navLink{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(17,17,20,.86);
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}
.navLink:hover{
  border-color: rgba(17,17,20,.18);
  background: rgba(255,255,255,.95);
}
.navLink--primary{
  background: rgba(10,132,255,.12);
  border-color: rgba(10,132,255,.25);
  color: var(--pro);
}
.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  color: rgba(17,17,20,.88);
}
.btn:hover{
  border-color: rgba(17,17,20,.18);
  background: rgba(255,255,255,.95);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.navBannerSticky{
  position: sticky;
  top: var(--tickerH);
  z-index: 99998;
  padding: 10px 0 12px;
}
.navBannerSurface{
  width: 100%;
  border-bottom: 1px solid rgba(17,17,20,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.28));
  backdrop-filter: blur(12px);
}
.navBanner{
  padding: 10px 18px 12px;
}
.navTabs{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--nb-border);
  background: var(--nb-bg);
  border-radius: 18px;
  box-shadow: var(--nb-shadow);
  padding: 10px;
  overflow: hidden;
}
@media (max-width: 980px){
  .navTabs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .navTabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.navTab{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--nb-item-border);
  background: var(--nb-item-bg);
  color: var(--nb-item-text);
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  user-select: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.navTab:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,20,.18);
  background: rgba(255,255,255,.92);
}
.navTab:active{ transform: translateY(0); }
.navTab:focus-visible{
  outline: none;
  box-shadow: var(--nb-focus), 0 18px 60px rgba(0,0,0,.12);
  border-color: rgba(10,132,255,.45);
}

.ttIcon{
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ttIcon svg{ width: 16px; height: 16px; display:block; }

.navTab--pro{
  border-color: var(--nb-pro-border);
  background: var(--nb-pro-bg);
  color: var(--nb-pro-text);
  box-shadow: 0 10px 30px rgba(10,132,255,.12);
}
.navTab--elite{
  border-color: var(--nb-elite-border);
  background: var(--nb-elite-bg);
  color: var(--nb-elite-text);
  box-shadow: 0 10px 30px rgba(168,108,255,.12);
}

.navTab--pro::before,
.navTab--elite::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255,255,255,.18) 40%,
    transparent 62%
  );
  transform: translate(-30%, -30%);
  animation: navDiagShimmer 7.5s linear infinite;
  opacity: .55;
  z-index: 0;
  pointer-events:none;
}
.navTab--elite::before{
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255,255,255,.16) 40%,
    transparent 62%
  );
  opacity: .52;
}

@keyframes navDiagShimmer{
  0%   { transform: translate(-42%, -42%); }
  100% { transform: translate(42%, 42%); }
}

.navTab--pro,
.navTab--elite{
  animation: navGlowPulse 4.6s ease-in-out infinite;
}
.navTab--elite{
  animation-name: navGlowPulseElite;
}

@keyframes navGlowPulse{
  0%,100%{
    box-shadow: 0 10px 30px rgba(10,132,255,.12), 0 0 0 0 rgba(10,132,255,.00);
  }
  50%{
    box-shadow: 0 14px 40px rgba(10,132,255,.18), 0 0 0 6px rgba(10,132,255,.10);
  }
}
@keyframes navGlowPulseElite{
  0%,100%{
    box-shadow: 0 10px 30px rgba(168,108,255,.12), 0 0 0 0 rgba(168,108,255,.00);
  }
  50%{
    box-shadow: 0 14px 40px rgba(168,108,255,.18), 0 0 0 6px rgba(168,108,255,.18);
  }
}

.navTab--pro:hover{
  border-color: rgba(10,132,255,.40);
  background: rgba(10,132,255,.16);
  box-shadow: 0 14px 40px rgba(10,132,255,.18), 0 0 0 4px rgba(10,132,255,.08);
}
.navTab--elite:hover{
  border-color: rgba(168,108,255,.44);
  background: rgba(168,108,255,.20);
  box-shadow: 0 14px 40px rgba(168,108,255,.18), 0 0 0 4px rgba(168,108,255,.08);
}

@media (prefers-reduced-motion: reduce){
  .navTab--pro,
  .navTab--elite{ animation: none !important; }
  .navTab--pro::before,
  .navTab--elite::before{ animation: none !important; }
}

.kpiGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 18px 0 14px;
}
.kpiCard{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.kpiLabel{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.kpiValue{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.kpiSub{
  font-size: 13px;
  color: var(--muted);
}
.pos{ color: #0a7a3d; font-weight: 800; }
.neg{ color: #b00020; font-weight: 800; }

.controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 14px;
}
.segmented{
  display:flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.segBtn{
  border: 0;
  background: transparent;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  color: rgba(17,17,20,.72);
  cursor: pointer;
}
.segBtn:hover{ background: rgba(17,17,20,.05); }
.segBtn.isActive{
  background: rgba(10,132,255,.15);
  color: var(--pro);
}
.toggles{
  display:flex;
  gap: 14px;
  align-items:center;
  color: rgba(17,17,20,.74);
  font-weight: 700;
}
.toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  user-select:none;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.cardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 12px;
}
.cardTitle{
  font-weight: 900;
  font-size: 18px;
}
.cardMeta{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.chartsWrap{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.chartBlock{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
}
.chartHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(246,246,247,.6);
}
.chartName{ font-weight: 900; }
.chartHint{ font-size: 12px; }
.details{ margin-top: 12px; }
.tableWrap{
  overflow:auto;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  margin-top: 10px;
  background: rgba(255,255,255,.65);
}
table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(17,17,20,.08);
  text-align:left;
}
th{
  background: rgba(246,246,247,.7);
  font-weight: 900;
}
.emptyState{
  border: 1px dashed rgba(17,17,20,.18);
  border-radius: 14px;
  padding: 28px 18px;
  text-align:center;
  background: rgba(246,246,247,.55);
  margin-bottom: 12px;
}
.emptyTitle{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}
.emptySub{
  color: var(--muted);
  font-size: 13px;
}
.footer{
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}

.pWrap{ max-width:1120px; margin:0 auto; padding:28px 20px 60px; }
.pTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.pNav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.brandLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.brandDot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(10,132,255,1), rgba(153,69,255,1));
  box-shadow:0 10px 30px rgba(153,69,255,.22);
}
.btn2{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  padding:10px 14px;
  border-radius:999px;
  font-weight: 800;
  cursor:pointer;
  text-decoration:none;
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn2:hover{
  border-color: rgba(17,17,20,.18);
  background: rgba(255,255,255,.95);
}
.btn2.pro{
  border-color: rgba(10,132,255,.28);
  background: rgba(10,132,255,.12);
  color: var(--pro);
}
.btn2.elite{
  border-color: rgba(168,108,255,.30);
  background: rgba(168,108,255,.14);
  color: var(--elite);
}
.heroCard{
  border:1px solid var(--stroke);
  border-radius: 22px;
  padding: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 400px at 15% 10%, rgba(10,132,255,.18), transparent 55%),
    radial-gradient(700px 300px at 85% 30%, rgba(0,0,0,.06), transparent 60%),
    rgba(255,255,255,.72);
}
.heroCard.elite{
  background:
    radial-gradient(900px 400px at 18% 10%, rgba(168,108,255,.20), transparent 55%),
    radial-gradient(700px 300px at 85% 30%, rgba(10,132,255,.10), transparent 60%),
    rgba(255,255,255,.72);
}
.badgeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(17,17,20,.12);
  background: rgba(255,255,255,.62);
}
.badge.pro{
  border-color: rgba(10,132,255,.25);
  background: rgba(10,132,255,.10);
  color: var(--pro);
}
.badge.elite{
  border-color: rgba(168,108,255,.28);
  background: rgba(168,108,255,.12);
  color: var(--elite);
}
.priceTag{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.priceTag .big{
  font-size:40px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.priceTag .small{
  color: var(--muted);
  font-weight: 800;
}
.hTitle{
  margin:6px 0 8px;
  font-size:44px;
  letter-spacing:-0.03em;
}
.hSub{
  margin:0 0 14px;
  color: var(--muted);
  font-size:16px;
  line-height:1.45;
  max-width: 74ch;
}
.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.grid2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-top: 14px;
}
.panel{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.panelTitle{
  font-weight: 900;
  margin:0 0 8px;
}
.pBullets{
  margin:0;
  padding-left: 18px;
  color: rgba(17,17,20,.82);
}
.pBullets li{ margin: 8px 0; }
.checkGrid{ display:grid; gap:10px; }
.checkRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid rgba(17,17,20,.08);
  border-radius: 14px;
  background: rgba(246,246,247,.55);
}
.ic{
  width:26px;
  height:26px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  flex: 0 0 auto;
  border: 1px solid rgba(17,17,20,.10);
  background: rgba(255,255,255,.7);
}
.ic.pro{
  border-color: rgba(10,132,255,.25);
  background: rgba(10,132,255,.10);
  color: var(--pro);
}
.ic.elite{
  border-color: rgba(168,108,255,.28);
  background: rgba(168,108,255,.12);
  color: var(--elite);
}
.checkRow b{ display:block; margin-bottom:2px; }
.checkRow span{ color: var(--muted); font-size: 13px; line-height:1.35; }
.section{ margin-top: 16px; }
.secHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin: 0 0 10px;
}
.secHead h2{ margin:0; font-size: 18px; letter-spacing:-0.01em; }
.secHead .meta{ color: var(--muted); font-size: 12px; font-family: var(--mono); }
.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini{
  border:1px solid rgba(17,17,20,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  padding: 14px;
  min-height: 130px;
}
.mini .t{ font-weight: 900; margin: 0 0 6px; }
.mini .d{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.compare{
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
}
.compare table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 760px;
}
.compare th, .compare td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(17,17,20,.08);
  text-align:left;
}
.compare th{
  background: rgba(246,246,247,.7);
  font-weight: 900;
}
.yes{ font-weight: 900; color:#0a7a3d; }
.no{ color: rgba(17,17,20,.55); }
.faqGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.faqGrid details{
  border:1px solid rgba(17,17,20,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.faqGrid summary{ cursor:pointer; font-weight: 900; }
.faqGrid p{ margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height:1.5; }
.finalCta{
  margin-top: 16px;
  border:1px solid rgba(17,17,20,.10);
  background: rgba(255,255,255,.75);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.finalCta.pro{
  border-color: rgba(10,132,255,.25);
  background: radial-gradient(800px 300px at 20% 20%, rgba(10,132,255,.18), transparent 55%),
              rgba(255,255,255,.75);
}
.finalCta.elite{
  border-color: rgba(168,108,255,.25);
  background: radial-gradient(800px 300px at 20% 20%, rgba(168,108,255,.18), transparent 55%),
              rgba(255,255,255,.75);
}
.finalCta .left b{ display:block; font-size: 16px; }
.finalCta .left span{ color: var(--muted); font-size: 13px; }
.finalCta .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 980px){
  .kpiGrid{ grid-template-columns: 1fr; }
  h1{ font-size: 34px; }
  .controls{ flex-direction: column; align-items:flex-start; }
  .actions{ width: 100%; justify-content:flex-start; }
  .grid2{ grid-template-columns: 1fr; }
  .cards3{ grid-template-columns: 1fr; }
  .faqGrid{ grid-template-columns: 1fr; }
  .hTitle{ font-size: 34px; }
  .priceTag .big{ font-size: 34px; }
}

@media (max-width: 720px){
  .shell{ padding: 18px 12px 34px; }
  .topbar{
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 10px;
    padding-top: 54px;
  }
  .titleBlock{
    width: 100%;
    text-align: center;
  }
  h1{
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .sub{ font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
  .metaLine{ font-size: 12px; line-height: 1.4; }
  .titleBlock .metaLine{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .titleBlock .dot{ display:none; }
  #refreshBtn{
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 10;
    margin: 0;
    white-space: nowrap;
    padding: 10px 12px;
  }
  .actions{
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .navLinks{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .navLink{ padding: 10px 12px; font-size: 13px; }
  .kpiGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 10px;
    align-items: stretch;
  }
  .kpiCard{
    padding: 12px 12px 11px;
    border-radius: 16px;
  }
  .kpiLabel{
    font-size: 10.5px;
    letter-spacing: .14em;
    margin-bottom: 6px;
  }
  .kpiValue{
    font-size: 22px;
    line-height: 1.05;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .kpiSub{
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #fetchedAt, #source{
    display: inline-block;
    max-width: 10.5ch;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .controls{
    position: relative;
    margin: 10px 0 12px;
    padding-top: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .controls::before{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(17,17,20,.10);
  }
  .segmented{
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
  }
  .segBtn{
    flex: 1 1 0;
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
  }
  .toggles{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    font-size: 13px;
  }
  .toggle{
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(17,17,20,.10);
    padding: 10px 10px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    justify-content: center;
    white-space: nowrap;
  }
  .card{ padding: 14px; border-radius: 16px; }
  .chartHeader{ padding: 9px 10px; }
  :root{ --tickerSeconds: 62s; }
}
@media (max-width: 390px){
  .kpiValue{ font-size: 20px; }
  #fetchedAt, #source{ max-width: 9ch; }
}

.ticker{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  border-radius: 0;
  z-index: 99999;
  border-bottom: 1px solid rgba(17,17,20,.10);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
}
.tickerInner{
  height: var(--tickerH);
  width: 100%;
  margin: 0;
  display:flex;
  align-items:center;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.tickerViewport{
  width: 100%;
  height: var(--tickerH);
  overflow: hidden;
  display:flex;
  align-items:center;
}
.tickerTrack{
  display: inline-flex;
  align-items:center;
  white-space: nowrap;
  will-change: transform;
}
.tickerTrack.isReady{
  animation: tickerScroll var(--tickerSeconds) linear infinite;
}
@keyframes tickerScroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tickerGroup{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(17,17,20,.70);
}
.tickItem{ display:inline-flex; align-items:baseline; gap:8px; }
.tickLabel{ opacity:.75; font-weight:900; }
.tickValue{ font-weight:900; color: rgba(17,17,20,.90); letter-spacing:.02em; }
.tickSep{ opacity:.45; font-weight:900; }
.tickCta .tickValue{ color: rgba(10,132,255,.95); }
@media (prefers-reduced-motion: reduce){
  .tickerTrack.isReady{ animation: none; }
}

.pricingHeroSimple{
  margin: 6px 0 14px;
  padding: 14px 14px 6px;
}
.pricingEyebrow{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(17,17,20,.55);
  font-weight: 900;
  margin-bottom: 8px;
}
.pricingHeadline{
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.pricingLead{
  margin: 0;
  color: rgba(17,17,20,.70);
  line-height: 1.55;
  max-width: 90ch;
}
.pricingGrid3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.priceCard{
  border: 1px solid rgba(17,17,20,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow);
  padding: 16px;
  overflow: hidden;
}
.priceCard--free{ background: #fff; }
.priceCard--pro{
  background:
    radial-gradient(900px 320px at 18% 10%, rgba(10,132,255,.16), transparent 55%),
    rgba(255,255,255,.86);
  border-color: rgba(10,132,255,.20);
}
.priceCard--elite{
  background:
    radial-gradient(900px 320px at 18% 10%, rgba(168,108,255,.18), transparent 55%),
    rgba(255,255,255,.86);
  border-color: rgba(168,108,255,.22);
}
.priceTop{ display: grid; gap: 6px; margin-bottom: 12px; }
.priceIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,20,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.priceIcon--pro{
  border-color: rgba(10,132,255,.22);
  background: rgba(10,132,255,.12);
}
.priceIcon--elite{
  border-color: rgba(168,108,255,.22);
  background: rgba(168,108,255,.14);
}
.pricePlan{ font-weight: 950; font-size: 20px; letter-spacing: -0.01em; }
.priceTagline{ color: rgba(17,17,20,.68); font-size: 14px; line-height: 1.45; }
.priceAmountRow{ display: flex; align-items: baseline; gap: 8px; margin: 10px 0 12px; }
.priceAmount{ font-size: 34px; font-weight: 950; letter-spacing: -0.03em; }
.pricePer{ color: rgba(17,17,20,.62); font-weight: 800; }
.priceBtn{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(17,17,20,.12);
  background: rgba(255,255,255,.80);
  color: rgba(17,17,20,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.priceBtn:hover{ background: rgba(255,255,255,.98); border-color: rgba(17,17,20,.18); }
.priceBtn--dark{
  background: rgba(17,17,20,.92);
  color: #fff;
  border-color: rgba(17,17,20,.60);
}
.priceBtn--dark:hover{ background: rgba(17,17,20,.98); }
.priceBtn--ghost{ background: rgba(255,255,255,.70); }

.priceList{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(17,17,20,.82);
}
.priceList li{
  position: relative;
  padding-left: 22px;
  line-height: 1.35;
  font-size: 14px;
}
.priceList li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 950;
  color: rgba(17,17,20,.70);
}
.priceFootnote{ margin-top: 12px; font-size: 12px; color: rgba(17,17,20,.60); }
.pricingLegal{ margin-top: 12px; font-size: 12px; }
@media (max-width: 980px){
  .pricingGrid3{ grid-template-columns: 1fr; }
  .pricingHeadline{ font-size: 24px; }
}

body.meltPage{
  --text: rgba(255,255,255,.92);
  color: var(--text);
  color-scheme: dark;
}
body.meltPage .kpiValue{ color: var(--text); }

body.meltPage .metal-tab {
  padding: 10px 20px;
  background: var(--gray-800);
  border-radius: 8px 8px 0 0;
  margin-right: 4px;
  font-weight: bold;
  transition: all 0.3s;
}
body.meltPage .metal-tab.active { background: var(--gold-dark); color: black; }

body.meltPage .purity-btn {
  padding: 6px 12px;
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}
body.meltPage .purity-btn.active { background: var(--gold); color: black; border-color: var(--gold-dark); }

body.meltPage .output-hidden { display: none; }
body.meltPage .text-gold { color: var(--gold); }
body.meltPage table td { color: var(--gray-300); }
body.meltPage .metal-tab[data-metal="platinum"].active { background: #60a5fa; }
body.meltPage .metal-tab[data-metal="silver"].active { background: #9ca3af; }

html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b0f14;
  --card: rgba(255,255,255,.04);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --nb-bg: rgba(0,0,0,.22);
  --nb-border: rgba(255,255,255,.10);
  --nb-shadow: 0 18px 60px rgba(0,0,0,.55);
  --nb-item-bg: rgba(255,255,255,.05);
  --nb-item-border: rgba(255,255,255,.10);
  --nb-item-text: rgba(255,255,255,.86);
  --nb-pro-bg: rgba(142,200,255,.10);
  --nb-pro-border: rgba(142,200,255,.32);
  --nb-pro-text: rgba(142,200,255,.95);
  --nb-elite-bg: rgba(168,108,255,.16);
  --nb-elite-border: rgba(168,108,255,.36);
  --nb-elite-text: rgba(200,165,255,.96);
  --nb-focus: 0 0 0 4px rgba(142,200,255,.18);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(142,200,255,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(245,200,90,.10), transparent 60%),
    var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .ticker{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(11,15,20,.72);
}
html[data-theme="dark"] .tickerGroup{ color: rgba(255,255,255,.70); }
html[data-theme="dark"] .tickValue{ color: rgba(255,255,255,.92); }
html[data-theme="dark"] .tickCta .tickValue{ color: rgba(142,200,255,.95); }

html[data-theme="dark"] .navBannerSurface{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,15,20,.72), rgba(11,15,20,.38));
}

html[data-theme="dark"] .kpiCard,
html[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.10);
  color: var(--text);
}
html[data-theme="dark"] .kpiLabel,
html[data-theme="dark"] .kpiSub,
html[data-theme="dark"] .cardMeta,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .metaLine{
  color: var(--muted);
}

html[data-theme="dark"] .segmented{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .segBtn{ color: rgba(255,255,255,.72); }
html[data-theme="dark"] .segBtn:hover{ background: rgba(255,255,255,.06); }
html[data-theme="dark"] .segBtn.isActive{
  background: rgba(142,200,255,.10);
  color: rgba(142,200,255,.95);
}

html[data-theme="dark"] .chartBlock{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .chartHeader{
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .tableWrap{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] th{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
}
html[data-theme="dark"] td{
  color: rgba(255,255,255,.82);
}

html[data-theme="dark"] .priceCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .priceTagline,
html[data-theme="dark"] .pricingLead,
html[data-theme="dark"] .pricingEyebrow,
html[data-theme="dark"] .pricePer,
html[data-theme="dark"] .priceFootnote,
html[data-theme="dark"] .pricingLegal{
  color: rgba(255,255,255,.62);
}
html[data-theme="dark"] .priceList{ color: rgba(255,255,255,.82); }
html[data-theme="dark"] .priceList li::before{ color: rgba(255,255,255,.70); }
html[data-theme="dark"] .priceBtn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
}
html[data-theme="dark"] .priceBtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
html[data-theme="dark"] .priceBtn--dark{
  background: rgba(255,255,255,.92);
  color: rgba(17,17,20,.92);
  border-color: rgba(255,255,255,.40);
}
/* =========================================================
   MOBILE NAV + KPI COMPACT OVERRIDES (ADD AT VERY BOTTOM)
   Fixes:
   - Nav buttons too tall / stacking into big blocks
   - Refresh button overlaying header
   - KPI cards too large on mobile
   ========================================================= */
@media (max-width: 720px){

  /* 1) Undo legacy mobile header assumptions */
  .topbar{
    padding-top: 0 !important; /* remove space reserved for old absolute refresh button */
  }

  /* This is the big one: stop the refresh button from floating over the page */
  #refreshBtn{
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  /* 2) Make nav banner compact + one-line row */
  .navBannerSticky{
    padding: 6px 0 8px;
  }
  .navBanner{
    padding: 8px 10px 10px;
  }

  /*
    Your current navTabs switches to a 2-col grid at small widths,
    which makes those big “tiles”.
    Force a single horizontal row instead.
  */
  .navTabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px !important;

    overflow-x: auto;                 /* keeps it on ONE line */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox hide */
  }
  .navTabs::-webkit-scrollbar{ display:none; } /* Safari/Chrome hide */

  .navTab{
    flex: 0 0 auto;                   /* prevents stretching into giant blocks */
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    border-radius: 14px !important;
    letter-spacing: 0 !important;
    gap: 6px !important;
  }

  /* Slightly smaller icons inside the toggle button */
  .ttIcon,
  .ttIcon svg{
    width: 14px !important;
    height: 14px !important;
  }

  /* 3) Compact KPI cards so they don’t feel like huge slabs */
  .kpiGrid{
    gap: 10px !important;
    margin: 10px 0 12px !important;
  }
  .kpiCard{
    padding: 12px 12px 11px !important;
    border-radius: 16px !important;
  }
  .kpiLabel{
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }
  .kpiValue{
    font-size: 22px !important;
    line-height: 1.05 !important;
    margin-bottom: 6px !important;
  }
  .kpiSub{
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}
/* =========================================================
   MOBILE KPI ULTRA-COMPACT (ADD AT VERY BOTTOM)
   Goal: shrink KPI cards so Charts peeks on initial load.
   ========================================================= */
@media (max-width: 720px){

  /* Reduce top padding so content starts higher */
  .shell{ padding-top: 12px !important; }

  /* Make BOTH KPI sections 2 columns (more compact than 1-col slabs) */
  .kpiGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 10px !important;
  }

  /* Smaller card surface */
  .kpiCard{
    padding: 10px 10px 9px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.20) !important; /* optional: keeps depth while smaller */
  }

  /* Labels tighter */
  .kpiLabel{
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Big number smaller */
  .kpiValue{
    font-size: 18px !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
  }

  /* Subline smaller + clamps to 1 line */
  .kpiSub{
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Prevent long timestamps from forcing tall cards */
  #fetchedAt, #source,
  #futFetchedAt, #futSource,
  #platinumSource, #futPlatinumSource,
  #futMarketTime{
    display: inline-block;
    max-width: 14ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

/* Even tighter on very small phones */
@media (max-width: 390px){
  .kpiGrid{
    gap: 7px !important;
  }
  .kpiCard{
    padding: 9px 9px 8px !important;
  }
  .kpiValue{
    font-size: 17px !important;
  }
}
/* =========================================================
   PRICING TIER COLOR TAB: overlay MetalMetric logo on top
   (Add at VERY BOTTOM of styles.css)
   ========================================================= */

/* Base: put the logo on top of the small tier color square */
.priceIcon{
  background-image: url("/metalmetric-mark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%; /* smaller than the square so tier color shows */
}

/* Optional: ensure it stays crisp and doesn't blur on iOS */
.priceIcon{
  image-rendering: -webkit-optimize-contrast;
}

/* If your Free tab is white and the logo disappears, add a subtle outline
   (keeps it “official” without changing your tier colors) */
.priceCard--free .priceIcon{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* If you want slightly different sizing per tier, uncomment and adjust:
.priceCard--pro .priceIcon{ background-size: 70%; }
.priceCard--elite .priceIcon{ background-size: 70%; }
*/
/* =========================================================
   Premium KPI ornaments (coins + futures graph)
   Add to VERY BOTTOM of styles.css
   ========================================================= */

.kpiCard .kpiLabel{
  position: relative;
}

/* Space on the left for the coin */
.kpiCard--coinGold .kpiLabel,
.kpiCard--coinSilver .kpiLabel,
.kpiCard--coinPlatinum .kpiLabel{
  padding-left: 44px;
}

/* Base coin placement */
.kpiCard--coinGold .kpiLabel::before,
.kpiCard--coinSilver .kpiLabel::before,
.kpiCard--coinPlatinum .kpiLabel::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* premium depth */
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(0,0,0,.35);
}

/* GOLD coin (premium gradient SVG) */
.kpiCard--coinGold .kpiLabel::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='30%25' cy='28%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%23FFF2B3'/%3E%3Cstop offset='38%25' stop-color='%23F7D46A'/%3E%3Cstop offset='72%25' stop-color='%23D7A72D'/%3E%3Cstop offset='100%25' stop-color='%237C5510'/%3E%3C/radialGradient%3E%3ClinearGradient id='rim' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFF0A6'/%3E%3Cstop offset='50%25' stop-color='%23B78112'/%3E%3Cstop offset='100%25' stop-color='%23FFF2B3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23g)'/%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='url(%23rim)' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='rgba(255,255,255,.35)' stroke-width='2'/%3E%3Cpath d='M18 24c8-10 20-12 28-6' stroke='rgba(255,255,255,.55)' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* SILVER coin */
.kpiCard--coinSilver .kpiLabel::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='s' cx='30%25' cy='28%25' r='78%25'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF'/%3E%3Cstop offset='40%25' stop-color='%23DCE3EA'/%3E%3Cstop offset='75%25' stop-color='%239AA6B3'/%3E%3Cstop offset='100%25' stop-color='%234B5563'/%3E%3C/radialGradient%3E%3ClinearGradient id='rim' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF'/%3E%3Cstop offset='55%25' stop-color='%23798592'/%3E%3Cstop offset='100%25' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23s)'/%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='url(%23rim)' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='rgba(255,255,255,.30)' stroke-width='2'/%3E%3Cpath d='M18 24c8-10 20-12 28-6' stroke='rgba(255,255,255,.50)' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* PLATINUM coin (cooler, slightly violet-tinted metal) */
.kpiCard--coinPlatinum .kpiLabel::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='p' cx='30%25' cy='28%25' r='78%25'%3E%3Cstop offset='0%25' stop-color='%23F7F4FF'/%3E%3Cstop offset='40%25' stop-color='%23DAD6E8'/%3E%3Cstop offset='75%25' stop-color='%238E93A8'/%3E%3Cstop offset='100%25' stop-color='%233A3F55'/%3E%3C/radialGradient%3E%3ClinearGradient id='rim' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF'/%3E%3Cstop offset='55%25' stop-color='%236B6F86'/%3E%3Cstop offset='100%25' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23p)'/%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='url(%23rim)' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='rgba(255,255,255,.28)' stroke-width='2'/%3E%3Cpath d='M18 24c8-10 20-12 28-6' stroke='rgba(255,255,255,.48)' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* Futures: add a small graph glyph on the right of the label */
.kpiCard--futures .kpiLabel{
  padding-right: 28px; /* room for graph icon */
}

.kpiCard--futures .kpiLabel::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Color-match the futures graph icon per metal */
.kpiCard--futures.kpiCard--coinGold   .kpiLabel::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19V5' stroke='%23E0B84A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 19H20' stroke='%23E0B84A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6.5 15l4-4 3 3 4-6' stroke='%23E0B84A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kpiCard--futures.kpiCard--coinSilver .kpiLabel::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19V5' stroke='%23C7D0DA' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 19H20' stroke='%23C7D0DA' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6.5 15l4-4 3 3 4-6' stroke='%23C7D0DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kpiCard--futures.kpiCard--coinPlatinum .kpiLabel::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19V5' stroke='%23B9A7FF' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 19H20' stroke='%23B9A7FF' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6.5 15l4-4 3 3 4-6' stroke='%23B9A7FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Mobile: slightly smaller ornaments so it stays clean */
@media (max-width: 520px){
  .kpiCard--coinGold .kpiLabel,
  .kpiCard--coinSilver .kpiLabel,
  .kpiCard--coinPlatinum .kpiLabel{
    padding-left: 40px;
  }
  .kpiCard--coinGold .kpiLabel::before,
  .kpiCard--coinSilver .kpiLabel::before,
  .kpiCard--coinPlatinum .kpiLabel::before{
    width: 30px;
    height: 30px;
  }
}
/* ============================
   MetalMetric — Premium Charts
   ============================ */

.cardHead--charts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.chartTools{
  display:flex;
  align-items:center;
  gap:8px;
}

.iconBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  user-select:none;
}

.iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.iconBtn:active{
  transform: translateY(0px) scale(0.98);
}

.hidden{ display:none !important; }

/* Locked teaser overlay (Free tier) */
.chartsLockOverlay{
  position:absolute;
  inset: 56px 14px 14px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 18px;
  gap: 10px;
  z-index: 5;
}

.chartsLockOverlay .lockTitle{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.chartsLockOverlay .lockSub{
  font-size: 13px;
  opacity: 0.85;
  max-width: 320px;
}

.lockActions{
  display:flex;
  gap:10px;
  margin-top: 6px;
}

.lockBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  color: inherit;
  text-decoration:none;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.lockBtn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.24); }
.lockBtn:active{ transform: translateY(0px) scale(0.99); }

.lockBtn--ghost{
  background: rgba(255,255,255,0.05);
}

/* Point details popover */
.pointDetails{
  position:absolute;
  left: 14px;
  right: 14px;
  top: 56px;
  z-index: 6;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  font-size: 13px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

/* Subtle holographic sheen over charts area (premium vibe) */
#chartsWrap,
#chartsWrapExpanded,
.chartsWrap{
  position: relative;
}

.chartsWrap::before{
  content:"";
  position:absolute;
  inset: -1px;
  pointer-events:none;
  border-radius: 16px;
  background: radial-gradient(600px 220px at 10% 10%, rgba(160,120,255,0.14), transparent 55%),
              radial-gradient(520px 200px at 90% 10%, rgba(220,220,255,0.10), transparent 60%),
              radial-gradient(560px 240px at 50% 100%, rgba(120,200,255,0.06), transparent 60%);
  opacity: 0.9;
  z-index: 0;
}

/* Make canvases sit above sheen */
.chartsWrap canvas{
  position: relative;
  z-index: 1;
}

/* Expand mode (desktop overlay + mobile fullscreen-friendly) */
body.mmChartsExpanded #chartsCard{
  position: fixed;
  inset: 5vh 5vw;
  z-index: 9999;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

body.mmChartsExpanded #chartsWrap{
  height: calc(100% - 140px);
}

body.mmChartsExpanded .chartBlock{
  min-height: 220px;
}

@media (max-width: 820px){
  body.mmChartsExpanded #chartsCard{
    inset: 0;
    border-radius: 0;
  }
}

/* Mobile: stack charts vertically, touch-friendly spacing */
@media (max-width: 640px){
  .chartsWrap{
    display:grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .chartBlock{
    min-height: 170px;
  }
}
/* =========================================================
   Mobile melt layout: clean + compact + swipeable spot strip
   Paste at bottom of melt/index.html <style>
   ========================================================= */
@media (max-width: 620px){

  /* overall spacing */
  .meltWrap{ padding: 16px 12px 40px; }
  .meltHero{ margin: 6px 0 12px; padding: 0 2px; }
  .meltHero h1{ font-size: 22px; line-height: 1.08; }
  .meltHero p{ font-size: 13px; line-height: 1.35; }

  /* --- Top bar becomes a stacked layout --- */
  .meltTop{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
  }

  .meltBrand{
    min-width: 0;
    width: 100%;
  }

  /* Turn meltNav into a small grid:
     row 1: pill strip full width
     row 2: Refresh + Dashboard side-by-side */
  .meltNav{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: stretch;
  }

  .pillRow{
    grid-column: 1 / -1;

    /* single-line swipe strip */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* nicer feel */
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .pillRow::-webkit-scrollbar{ display: none; }

  .pill{
    scroll-snap-align: start;
    padding: 7px 9px;
    font-size: 11px;
    gap: 6px;
  }

  /* remove the "/ oz t" microtext on mobile to declutter */
  .pill small{ display: none; }

  /* buttons become full-width */
  #btnRefresh{ width: 100%; justify-content: center; }
  .meltNav a.btn{ width: 100%; text-align: center; display: inline-flex; justify-content: center; }

  /* --- Cards tighten so calculator is visible immediately --- */
  .cardHeader{ padding: 12px 12px; }
  .cardBody{ padding: 12px; }

  /* iOS: avoid input zoom (must be 16px) */
  .control, .qtyControl{ font-size: 16px; }

  /* Weight + Unit row: slightly tighter */
  .row{
    grid-template-columns: 1fr 120px;
    gap: 8px;
    margin-top: 10px;
  }

  /* Seg buttons tighter */
  .seg{ padding: 5px; gap: 5px; }
  .seg button{ padding: 9px 8px; font-size: 12px; }

  /* Purity buttons slightly tighter */
  .purityGrid{ gap: 7px; }
  .pBtn{ min-height: 48px; padding: 9px; }

  /* Output card: reduce “big headline” height so it doesn’t dominate */
  .resultHero{ padding: 14px 12px 10px; }
  .resultHero .value{ font-size: 34px; }
  .kpiRow{ gap: 8px; padding: 12px; }
  .kpi{ padding: 10px; }
}
/* =========================================================
   MOBILE: melt page stacking + smaller hero + bottom spot strip
   Paste at very bottom of styles.css
   ========================================================= */

@media (max-width: 720px) {

  /* Ensure stacked cards on mobile */
  .meltGrid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .meltGrid > .card{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Top bar layout: keep clean */
  .meltTop{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .meltBrand{ min-width: 0 !important; }
  .meltNav{ justify-content: flex-start !important; gap: 8px !important; }

  /* Keep heading, but smaller/tighter */
  .meltHero{
    margin: 8px 0 14px !important;
    padding: 10px 2px 0 !important;
  }
  .meltHero h1{
    font-size: 22px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
  }
  .meltHero p{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Make room so fixed bottom strip doesn't cover calculator */
  .meltWrap{
    padding-bottom: 140px !important;
  }

  /* Bottom “spot strip” (uses existing pillRow) */
  .pillRow{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;

    display: flex !important;
    gap: 8px !important;
    align-items: center !important;

    padding: 10px 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(10,14,20,.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .pillRow .pill{
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .pillRow .pill strong{ font-size: 11px !important; }
  .pillRow .pill small{ font-size: 10px !important; }

  /* Optional: hide the Updated pill to reduce clutter */
  .pillRow .pill:last-child{
    display: none !important;
  }

  /* Optional: slightly smaller big value so it breathes */
  .resultHero .value{
    font-size: 38px !important;
  }
}