:root {
  color-scheme: dark;
  --orange: #fb4f14;
  --orange-2: #ff7a2d;
  --black: #050505;
  --panel: #111315;
  --panel-2: #181a1d;
  --line: #33363b;
  --text: #f6f7f8;
  --muted: #b9bec7;
  --gold: #f7b731;
  --silver: #dfe7f0;
  --copper: #d77b45;
  --platinum: #a7f0ff;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 15% 0%, rgba(251, 79, 20, .23), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(0, 148, 135, .2), transparent 26%),
    linear-gradient(180deg, #050505 0%, #090a0b 52%, #050505 100%);
  color: var(--text);
}

body[data-theme="gold"] {
  --orange: #d99a27;
  --orange-2: #ffd166;
  --panel: #15110a;
  --panel-2: #1f1709;
  --line: #4d3515;
  background: radial-gradient(circle at 18% 0%, rgba(217, 154, 39, .32), transparent 30%),
    radial-gradient(circle at 90% 4%, rgba(255, 209, 102, .18), transparent 25%),
    linear-gradient(180deg, #050505 0%, #151007 52%, #050505 100%);
}

body[data-theme="silver"] {
  --orange: #dfe7f0;
  --orange-2: #f7fbff;
  --panel: #11151a;
  --panel-2: #171d24;
  --line: #3e4854;
  background: radial-gradient(circle at 18% 0%, rgba(223, 231, 240, .24), transparent 30%),
    radial-gradient(circle at 90% 4%, rgba(133, 156, 177, .2), transparent 25%),
    linear-gradient(180deg, #050505 0%, #10141a 52%, #050505 100%);
}

body[data-theme="silver"] .btn.primary,
body[data-theme="silver"] .nav a.primary {
  color: #101215;
}

a { color: inherit; }

.ticker {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 8px max(16px, calc((100vw - 1180px) / 2));
  background: #0a0a0a;
  border-bottom: 1px solid #222;
  position: sticky;
  top: 0;
  z-index: 20;
}

.ticker strong { color: var(--orange); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; white-space: nowrap; }
.ticker span { white-space: nowrap; border: 1px solid #2e3035; border-radius: 999px; padding: 6px 10px; background: #111; font-size: 13px; color: #e9ecf0; }
.ticker b { color: #fff; }

.site-header {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.coinhub-brand { display: block; width: 168px; height: auto; object-fit: contain; flex: 0 0 auto; }
.brand-divider { width: 1px; height: 42px; background: #34373d; flex: 0 0 1px; }
.app-brand { display: grid; gap: 2px; min-width: 0; }
.app-brand strong { font-size: clamp(17px, 1.7vw, 25px); line-height: 1.02; font-weight: 950; color: #fff; white-space: nowrap; }
.app-brand small { color: var(--orange); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.site-logo { display: block; width: min(420px, 80vw); height: auto; max-height: 82px; object-fit: contain; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--orange); color: #111; font-weight: 950; font-size: 26px; box-shadow: 0 10px 25px #0008; flex: 0 0 46px; }
.brand-name { font-size: clamp(22px, 4vw, 35px); line-height: 1; font-weight: 950; letter-spacing: 0; }
.brand-name small { display: block; font-size: 12px; color: var(--muted); font-weight: 800; margin-top: 4px; text-transform: uppercase; letter-spacing: .09em; }
.brand-name .hub { color: var(--orange); }

.nav { display: flex; gap: 7px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; min-width: 0; }
.nav a, .nav summary { text-decoration: none; color: #fff; border: 1px solid #2d2f34; border-radius: 999px; padding: 9px 11px; background: #111; font-weight: 850; font-size: 13px; cursor: pointer; list-style: none; white-space: nowrap; }
.nav summary::-webkit-details-marker { display: none; }
.nav a.primary { background: var(--orange); color: #111; border-color: var(--orange); }
.nav-group { position: relative; padding-bottom: 10px; margin-bottom: -10px; }
.nav-group[open] summary, .nav-group:hover summary { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(251,79,20,.16); }
.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  width: min(560px, 88vw);
  max-height: min(520px, calc(100vh - 180px));
  overflow: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  background: rgba(8, 8, 9, .98);
  border: 1px solid #383b42;
  border-radius: 16px;
  box-shadow: 0 24px 60px #000c;
  z-index: 60;
  backdrop-filter: blur(12px);
}
.nav-menu.compact { width: min(360px, 86vw); grid-template-columns: 1fr; }
.nav-menu a {
  display: grid;
  border-radius: 12px;
  padding: 12px;
  white-space: normal;
  line-height: 1.15;
  background: linear-gradient(180deg, #151619, #0b0c0e);
  border-color: #2f333a;
}
.nav-menu a:hover { border-color: var(--orange); background: radial-gradient(circle at 100% 0%, rgba(251,79,20,.24), transparent 38%), #111215; }
.nav-menu a span {
  color: var(--orange);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 50px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 8px;
}

body[data-page-kind="detail"] .hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
  gap: 14px;
}

body[data-page-kind="detail"] .hero-copy,
body[data-page-kind="detail"] .live-card {
  padding: 18px;
  border-radius: 16px;
}

body[data-page-kind="detail"] h1 {
  font-size: clamp(34px, 4.2vw, 58px);
}

body[data-page-kind="detail"] .lead {
  font-size: 17px;
  max-width: 840px;
}

body[data-page-kind="detail"] .big-price {
  font-size: clamp(34px, 4.2vw, 52px);
}

body[data-page-kind="detail"] .price-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page-kind="detail"] .price-tile {
  min-height: 76px;
  padding: 10px;
}

.hero-copy, .live-card, .calc-card, .catalog-card, .seo-card, .fraction-card, .export-card, .account-card, .difference-card, .chart-card, .chart-copy, .faq-card {
  background: linear-gradient(180deg, rgba(28, 29, 32, .96), rgba(8, 8, 9, .96));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 50px #0008;
}

.hero-copy { padding: clamp(22px, 4vw, 42px); position: relative; overflow: hidden; }
.hero-copy:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 70px, rgba(251, 79, 20, .13) 72px 74px);
  pointer-events: none;
}
.hero-copy > * { position: relative; }

.eyebrow { color: var(--orange-2); text-transform: uppercase; font-weight: 950; font-size: 13px; letter-spacing: .11em; }
h1 { font-size: clamp(42px, 7vw, 86px); line-height: .94; letter-spacing: 0; margin: 10px 0 16px; }
.lead { font-size: clamp(17px, 2vw, 21px); color: #e6e7e9; max-width: 760px; line-height: 1.5; }
.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.tool-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(251, 79, 20, .42);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(36, 16, 7, .74);
  color: #ffbd9a;
  font-size: 13px;
  font-weight: 900;
}
body[data-theme="gold"] .tool-pills span {
  border-color: rgba(217, 154, 39, .55);
  background: rgba(46, 31, 8, .78);
  color: #ffe3a1;
}
body[data-theme="silver"] .tool-pills span {
  border-color: rgba(223, 231, 240, .5);
  background: rgba(20, 27, 35, .82);
  color: #f5f9ff;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn { appearance: none; border: 0; border-radius: 12px; padding: 13px 16px; background: #272a2f; color: #fff; font-weight: 950; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: var(--orange); color: #111; }
.btn.ghost { border: 1px solid #45484f; }

.calculator-options {
  margin-top: 18px;
  background: linear-gradient(160deg, rgba(34, 15, 6, .96), rgba(8, 8, 9, .96));
  border: 1px solid rgba(251, 79, 20, .46);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 50px #0008;
}

body[data-page-kind="detail"] .popular-carousel,
body[data-page-kind="detail"] .calculator-options,
body[data-page-kind="detail"] .chart-strip {
  display: none;
}

.popular-carousel {
  margin-top: 18px;
  border: 1px solid rgba(251, 79, 20, .5);
  border-radius: 18px;
  overflow: hidden;
  background: #090a0b;
  box-shadow: 0 20px 50px #0008;
}

.popular-track {
  display: flex;
  width: 100%;
  transition: transform .45s ease;
}

.popular-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) 1fr;
  align-items: stretch;
  min-height: 330px;
  background: linear-gradient(145deg, rgba(251,79,20,.22), rgba(8,8,9,.96) 48%, rgba(0,148,135,.15));
}

.popular-image {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 24px;
  border-right: 1px solid #2c3037;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), transparent 38%), #101114;
}

.popular-image img {
  width: 100%;
  max-width: 330px;
  height: 250px;
  object-fit: contain;
  border-radius: 18px;
  padding: 10px;
  background: radial-gradient(circle at 35% 20%, #fff, #25282d);
  border: 1px solid #3b4048;
}

.popular-copy {
  padding: clamp(22px, 4vw, 42px);
  align-self: center;
}

.popular-copy h2 {
  font-size: clamp(34px, 5vw, 62px);
  margin: 8px 0 12px;
}

.popular-copy p {
  color: #dfe3e9;
  font-size: 19px;
  line-height: 1.45;
  max-width: 640px;
}

.popular-dots {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #25282f;
}

.popular-dots span {
  width: 36px;
  height: 8px;
  border-radius: 999px;
  background: #4d5158;
}

.popular-dots span.active { background: var(--orange); }
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}
.section-head h2 { margin-bottom: 6px; }
.option-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.option-search {
  width: min(260px, 34vw);
  border-radius: 999px;
  padding: 12px 14px;
}
.option-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 285px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 12px;
}
.option-card {
  scroll-snap-align: start;
  text-decoration: none;
  min-height: 190px;
  padding: 16px;
  border: 1px solid #333740;
  border-radius: 16px;
  background: radial-gradient(circle at 80% 0%, rgba(251,79,20,.28), transparent 38%), #0b0c0e;
  display: grid;
  grid-template-rows: 96px auto auto 1fr auto;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease;
}
.option-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.option-image {
  width: 100%;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid #30343b;
  background: radial-gradient(circle at 35% 18%, #fff, #25282e);
  overflow: hidden;
}
.option-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.option-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #111;
  font-weight: 950;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18);
}
.option-card.gold .option-icon { background: #d99a27; }
.option-card.silver .option-icon { background: #dfe7f0; }
.option-card.copper .option-icon { background: #d77b45; }
.option-card.platinum .option-icon { background: #a7f0ff; }
.option-kicker { color: var(--orange-2); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 950; }
.option-card strong { color: #fff; font-size: 20px; line-height: 1.08; }
.option-card em { color: var(--orange); font-style: normal; font-weight: 950; }
.option-card.is-hidden { display: none; }

.account-strip {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  margin-top: 18px;
}

.account-card {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: center;
  border-color: rgba(251, 79, 20, .45);
}

.difference-card {
  padding: 18px;
  background: linear-gradient(160deg, rgba(45, 20, 8, .96), rgba(8, 8, 9, .96));
}

.difference-card p { color: #e0e4ea; line-height: 1.55; }
.account-form { display: grid; gap: 9px; }
.account-form .hero-actions { margin-top: 4px; }

.live-card { padding: 18px; display: grid; gap: 12px; }
.big-price { font-size: clamp(42px, 6vw, 70px); line-height: 1; font-weight: 950; }
.status { color: var(--muted); font-size: 14px; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.price-tile { border: 1px solid #2d3037; border-radius: 13px; padding: 13px; background: #0b0c0e; min-height: 88px; }
.price-tile span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 900; letter-spacing: .06em; }
.price-tile b { display: block; margin-top: 6px; font-size: 24px; }

.chart-strip {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

.chart-copy { padding: 18px; }
.chart-copy h2 { margin-top: 4px; }
.chart-card { padding: 0; overflow: hidden; min-height: 340px; }
.tradingview-widget-container { height: 100%; min-height: 340px; }
.tradingview-widget-container__widget { height: calc(100% - 32px); min-height: 308px; }
.tradingview-widget-copyright { display: none; }
body[data-chart-page="true"] .chart-strip { grid-template-columns: 1fr; }
body[data-chart-page="true"] .chart-card { min-height: 680px; }
body[data-chart-page="true"] .tradingview-widget-container { min-height: 680px; }
body[data-chart-page="true"] .tradingview-widget-container__widget { min-height: 648px; }

.tools { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin-top: 18px; align-items: start; }
.calc-card, .catalog-card, .seo-card, .fraction-card, .export-card { padding: 18px; }
body[data-page-kind="detail"] .tools {
  grid-template-columns: 1fr;
  margin-top: 14px;
}
body[data-page-kind="detail"] .catalog-card {
  border-color: rgba(251, 79, 20, .48);
  background: radial-gradient(circle at 16% 0%, rgba(251,79,20,.22), transparent 34%), linear-gradient(180deg,#151515,#08090a);
}
body[data-page-kind="detail"] .calc-card,
body[data-page-kind="detail"] .catalog-card {
  border-radius: 14px;
}
h2 { font-size: clamp(25px, 4vw, 42px); line-height: 1; margin: 0 0 12px; letter-spacing: 0; }
h3 { font-size: 20px; margin: 18px 0 9px; }
.mini { color: var(--muted); line-height: 1.5; }

.calculator-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.calculator-feature-row div {
  border: 1px solid #332822;
  border-radius: 13px;
  padding: 13px;
  background: linear-gradient(180deg, rgba(20, 20, 20, .98), rgba(10, 10, 10, .98));
}
.calculator-feature-row b {
  display: block;
  color: #fff;
  font-size: 15px;
  margin-bottom: 4px;
}
.calculator-feature-row span {
  color: #cfd3da;
  font-size: 13px;
  line-height: 1.35;
}

.controls { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.field label { display: block; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
input, select {
  width: 100%;
  background: #050607;
  color: #fff;
  border: 1px solid #44474f;
  border-radius: 10px;
  padding: 11px;
  font-size: 15px;
}
input:focus, select:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

.summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.summary div { border: 1px solid #31343b; border-radius: 13px; padding: 13px; background: #0a0b0d; }
.summary span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 850; letter-spacing: .05em; }
.summary b { display: block; margin-top: 5px; font-size: 23px; }

.filter-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 96px;
  gap: 10px;
  align-items: center;
  margin: 12px 0 0;
  padding: 10px 12px 10px 100px;
  border-radius: 12px 12px 0 0;
  background: #1c1c1c;
  border: 1px solid #292c32;
  color: #dfe3e9;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.catalog-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-height: 720px; overflow: auto; padding-right: 4px; border: 1px solid #292c32; border-top: 0; border-radius: 0 0 12px 12px; }
body[data-page-kind="detail"] .catalog-grid {
  grid-template-columns: 1fr;
  max-height: none;
  overflow: visible;
}
.item {
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) 140px 96px;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #292c32;
  border-radius: 0;
  padding: 12px;
  background: #090a0c;
}
.item:last-child { border-bottom: 0; }
.item:nth-child(even) { background: #0d0e10; }
body[data-page-kind="detail"] .item {
  grid-template-columns: 92px minmax(0,1fr) 150px 104px;
  border-color: #3a3d44;
  background: linear-gradient(180deg, rgba(20,20,22,.98), rgba(8,8,9,.98));
  box-shadow: none;
}
.coin-visual {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 950;
  font-size: 14px;
  color: #1a1006;
  background: radial-gradient(circle at 35% 28%, #fff7d1, #dca33a 42%, #815119 72%, #331b06);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.16), inset 0 0 0 9px rgba(0,0,0,.08), 0 8px 16px #0007;
  border: 1px solid rgba(255,255,255,.18);
}
body[data-page-kind="detail"] .coin-visual { width: 92px; height: 92px; }
.coin-visual.photo {
  background: #111;
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
}
.coin-visual.photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  background: radial-gradient(circle at 35% 25%, #fff, #2a2d31);
}
.coin-visual.photo.image-failed img { display: none; }
.coin-visual.photo .fallback-label { display: none; }
.coin-visual.photo.image-failed .fallback-label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.coin-visual.silver { color: #121820; background: radial-gradient(circle at 35% 28%, #fff, #dfe7f0 42%, #8e9aa6 72%, #363b41); }
.coin-visual.copper { color: #2a1007; background: radial-gradient(circle at 35% 28%, #ffe0bd, #d77b45 42%, #793917 72%, #2b1207); }
.coin-visual.platinum { color: #0d2327; background: radial-gradient(circle at 35% 28%, #fff, #b8f5ff 42%, #79a9b2 72%, #2d444a); }
.item h4 { margin: 0; font-size: 16px; line-height: 1.2; }
body[data-page-kind="detail"] .item h4 { font-size: 18px; }
.item p { margin: 5px 0 9px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.item-main { min-width: 0; }
.item-metal small {
  display: grid;
  gap: 3px;
  color: #ffb287;
  font-weight: 850;
}
.item-metal strong { font-size: 16px; color: #fff; }
.item-metal span { color: var(--muted); font-weight: 750; font-size: 12px; text-transform: capitalize; }
.item-qty { display: grid; gap: 5px; align-items: center; }
.item-qty label { color: var(--muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.item-qty input { padding: 9px; text-align: center; font-weight: 900; }
body[data-theme="gold"] .item small { color: #ffd166; }
body[data-theme="silver"] .item small { color: #eaf1f8; }

.utility { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.fraction-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fraction-grid div { background: #0b0c0f; border: 1px solid #30343b; border-radius: 12px; padding: 11px; }
.fraction-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.fraction-grid b { display: block; font-size: 21px; margin-top: 5px; }

.export-card ul { padding-left: 18px; color: #dde0e5; line-height: 1.55; }
.seo-card { grid-column: span 1; }
.seo-card p { color: #dfe2e7; line-height: 1.58; }
.faq-card { padding: 18px; }
.faq-card details { border-top: 1px solid #30343b; padding: 11px 0; }
.faq-card summary { cursor: pointer; font-weight: 950; }
.faq-card p { color: #dce1e8; line-height: 1.5; margin-bottom: 0; }
.source-note { color: #969ca7; font-size: 12px; line-height: 1.5; margin-top: 12px; }
.hidden { position: absolute; left: -9999px; opacity: 0; }
.import-status { color: #ffbd9a; font-size: 13px; margin-left: 8px; }

.site-footer { border-top: 1px solid #25282e; margin-top: 38px; padding: 24px 18px 38px; color: var(--muted); }
.footer-inner { max-width: 1180px; margin: auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-inner a { color: #fff; font-weight: 850; }

@media (max-width: 980px) {
  .hero, .tools, .utility, .account-strip, .account-card, .chart-strip { grid-template-columns: 1fr; }
  body[data-page-kind="detail"] .hero,
  body[data-page-kind="detail"] .tools { grid-template-columns: 1fr; }
  .calculator-feature-row { grid-template-columns: 1fr; }
  .site-header { align-items: flex-start; flex-direction: column; }
  .nav { justify-content: flex-start; flex-wrap: wrap; }
  .nav-menu { left: 0; right: auto; }
  .coinhub-brand { width: 170px; }
  .popular-slide { grid-template-columns: 1fr; }
  .popular-image { border-right: 0; border-bottom: 1px solid #2c3037; min-height: 230px; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 12px 36px; }
  .controls, .summary, .filter-row, .price-grid, .fraction-grid { grid-template-columns: 1fr; }
  .catalog-head { display: none; }
  .catalog-grid { border-top: 1px solid #292c32; border-radius: 12px; }
  .hero-copy, .live-card, .calc-card, .catalog-card, .seo-card, .fraction-card, .export-card, .faq-card, .chart-copy { border-radius: 14px; padding: 14px; }
  .brand { align-items: flex-start; flex-wrap: wrap; }
  .coinhub-brand { width: 142px; }
  .brand-divider { display: none; }
  .app-brand strong { white-space: normal; }
  .site-logo { width: min(360px, 92vw); }
  .section-head { align-items: flex-start; flex-direction: column; }
  .option-controls { flex-wrap: wrap; }
  .option-search { width: 100%; }
  .option-rail { grid-auto-columns: minmax(220px, 82vw); }
  .popular-copy h2 { font-size: 34px; }
  .popular-image img { height: 210px; }
  .chart-card, .tradingview-widget-container { min-height: 420px; }
  .tradingview-widget-container__widget { min-height: 388px; }
  .item,
  body[data-page-kind="detail"] .item { grid-template-columns: 62px minmax(0,1fr); align-items: start; }
  .coin-visual { width: 62px; height: 62px; font-size: 12px; }
  body[data-page-kind="detail"] .coin-visual { width: 62px; height: 62px; }
  .item-metal, .item-qty { grid-column: 2; }
  .item-qty input { max-width: 120px; }
  .nav a, .nav summary { padding: 9px 11px; }
  .nav-menu { grid-template-columns: 1fr; width: min(350px, 92vw); max-height: 380px; }
  body[data-page-kind="detail"] h1 { font-size: clamp(31px, 10vw, 42px); }
  body[data-page-kind="detail"] .lead { font-size: 15px; }
  body[data-page-kind="detail"] .hero { gap: 10px; }
  body[data-page-kind="detail"] .hero-actions { margin-top: 14px; }
  body[data-page-kind="detail"] .tool-pills { gap: 6px; margin-top: 10px; }
  body[data-page-kind="detail"] .tool-pills span { min-height: 26px; padding: 5px 8px; font-size: 12px; }
  body[data-page-kind="detail"] .big-price { font-size: 34px; }
  body[data-page-kind="detail"] .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body[data-page-kind="detail"] .price-tile { min-height: auto; padding: 9px; }
  body[data-page-kind="detail"] .price-tile b { font-size: 18px; }
}