/* SatoshiMacro Model (SMM) — flagship cycle indicator tool styling
   Loaded only on the SMM page via <link> in the page MD. */

.smm-hero {
  background: radial-gradient(ellipse at top, #1a2b4a 0%, #0a1628 60%, #050e1c 100%);
  color: #fff;
  padding: var(--space-12) 0 var(--space-10);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-10);
}

.smm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(13, 125, 90, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.smm-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 1;
}

.smm-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--space-4);
}

.smm-brand-row-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.smm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-500, #c9a961);
  font-weight: 600;
}

.smm-tagline {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  letter-spacing: 0.005em;
}

@media (max-width: 720px) {
  .smm-tagline { font-size: 14px; }
}

.smm-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

.smm-gauge-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 880px) {
  .smm-gauge-row { grid-template-columns: 1fr; gap: var(--space-8); }
}

.smm-gauge-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.smm-gauge {
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

.smm-verdict {
  padding-left: var(--space-4);
}

@media (max-width: 880px) {
  .smm-verdict { padding-left: 0; text-align: center; }
}

.smm-verdict-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-500, #c9a961);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.smm-verdict-text {
  font-size: var(--text-xl);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-6);
  font-weight: 500;
}

.smm-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.smm-meta-item { text-align: left; min-width: 0; }
@media (max-width: 880px) { .smm-meta-item { text-align: center; } }

.smm-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-1);
}

.smm-meta-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-lg);
  font-weight: 600;
  color: #fff;
}

/* Tier breakdown */

.smm-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.smm-tier-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: var(--space-5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.smm-tier-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.smm-tier-pending { opacity: 0.7; }
.smm-tier-pending .smm-tier-score { color: var(--text-tertiary); font-style: italic; font-size: var(--text-sm); }

.smm-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.smm-tier-label { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); }
.smm-tier-weight { font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.smm-tier-score { font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); line-height: 1; }

.smm-tier-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin: var(--space-3) 0;
}

.smm-tier-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease-out; }
.smm-tier-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.4; }

/* Indicator breakdown grid */

.smm-indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.smm-indicator-card {
  background: var(--bg-primary, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: var(--space-4);
  transition: border-color 0.2s;
}

.smm-indicator-card:hover { border-color: var(--color-gold-500, #c9a961); }

.smm-indicator-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold-700, #a37c2f);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.smm-indicator-info-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
  font-weight: 600;
}

.smm-indicator-info { opacity: 0.75; }
.smm-indicator-info .smm-indicator-score-value { font-style: italic; color: var(--text-tertiary); font-size: var(--text-sm); font-weight: 600; }

.smm-indicator-name { font-weight: 600; font-size: var(--text-base); color: var(--text-primary); margin-bottom: var(--space-3); }

.smm-indicator-raw {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.smm-indicator-raw-label { color: var(--text-tertiary); }
.smm-indicator-raw-value { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); font-weight: 600; }

.smm-indicator-score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.smm-indicator-score-label { color: var(--text-tertiary); }
.smm-indicator-score-value { font-family: 'JetBrains Mono', monospace; font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }

.smm-indicator-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.smm-indicator-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease-out; }

/* Chart container (Phase 1.C will populate) */

.smm-chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.smm-fs-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--color-gold-700, #a37c2f);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
}

.smm-chart-wrap {
  position: relative;
  background: var(--bg-primary, #fff);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 360px;
}

.smm-chart-wrap:fullscreen {
  background: #0a1628;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.smm-chart-wrap:fullscreen .smm-chart-container {
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 1600px;
}
.smm-chart-wrap:fullscreen svg {
  max-height: 88vh;
  width: 100%;
  height: auto;
}
.smm-chart-container { padding: var(--space-4); }

.smm-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10, 22, 40, 0.97);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  display: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 169, 97, 0.3);
  min-width: 180px;
  z-index: 10;
  transition: opacity 0.15s;
}

.smm-chart-wrap [data-smm-svg="chart"] {
  cursor: crosshair;
}

.smm-zoom-controls {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 6px;
}

.smm-zoom-btn {
  background: transparent;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  transition: all 0.15s;
}

.smm-zoom-btn:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.smm-zoom-btn.active {
  background: var(--color-gold-500, #c9a961);
  color: #0a1628;
}

/* Founder pull-quote inside the dark-navy "Why this model exists" section.
   Selector uses blockquote.smm-founder-quote so it matches the specificity
   of .prose blockquote (0,1,1) - extraCss loads after style.css, so equal
   specificity means this rule wins on cascade order. Otherwise the prose
   blockquote rule (cream background, dark text) shows on the dark hero
   section and the white quote text becomes near-invisible. */

blockquote.smm-founder-quote {
  display: block;
  background: transparent;
  border: none;
  border-left: 3px solid var(--color-gold-500, #c9a961);
  border-radius: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
  font-style: italic;
  position: relative;
}

blockquote.smm-founder-quote::before { content: none; }

.smm-founder-quote .smm-founder-quote-text {
  display: block;
  color: #fff;
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: var(--text-xl);
  line-height: 1.5;
  font-weight: 400;
}

.smm-founder-quote .smm-founder-quote-attribution {
  display: block;
  margin-top: var(--space-4);
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold-500, #c9a961);
  letter-spacing: 0.05em;
  text-transform: none;
}

/* Currency toggle (USD / AUD) in the SMM hero brand row */

.smm-brand-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.smm-currency-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.smm-currency-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  transition: background 0.15s, color 0.15s;
}

.smm-currency-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.smm-currency-btn-active {
  background: var(--color-gold-500, #c9a961);
  color: #0a1628;
}

.smm-currency-btn-active:hover {
  background: var(--color-gold-500, #c9a961);
  color: #0a1628;
}

/* Light-context variant for the historical chart toolbar, which sits on
   bg-secondary (cream) rather than the dark hero. Same gold-active state
   so a single click syncs both toggles (hero + chart) regardless of which
   one the user interacted with - the JS iterates all .smm-currency-btn
   elements in setupCurrencyToggle / syncCurrencyToggleUI. */
.smm-currency-toggle-light {
  display: inline-flex;
  gap: 0;
  background: var(--bg-primary, #f7f5f0);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}
.smm-currency-toggle-light .smm-currency-btn {
  color: var(--text-secondary);
}
.smm-currency-toggle-light .smm-currency-btn:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}
.smm-currency-toggle-light .smm-currency-btn-active,
.smm-currency-toggle-light .smm-currency-btn-active:hover {
  background: var(--color-gold-500, #c9a961);
  color: #0a1628;
}

@media (max-width: 560px) {
  .smm-brand-row-right { flex-direction: column-reverse; align-items: flex-end; gap: var(--space-2); }
}

/* ============================================================
   Companion-variant cross-link aside (BTC <-> ETH)
   ============================================================ */

.smm-companion-row {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-secondary);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 10px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.smm-companion-text {
  flex: 1;
  min-width: 280px;
}

.smm-companion-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold-600, #B8935A);
  margin-bottom: 6px;
}

.smm-companion-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.smm-companion-copy strong { color: var(--text-primary); }

.smm-companion-row .btn { flex-shrink: 0; }

@media (max-width: 560px) {
  .smm-companion-row { flex-direction: column; align-items: stretch; }
  .smm-companion-row .btn { width: 100%; text-align: center; }
}

/* ============================================================
   "What's driving this reading" callout (top 3 tiers ranked by
   tier-weighted deviation from neutral)
   ============================================================ */

.smm-drivers {
  /* Light-context surface with a gold hairline outline so the callout
     stands out as a branded box against the surrounding white section
     without falling back to a heavy dark backdrop. */
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-secondary);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 12px;
  color: var(--text-primary);
}

.smm-drivers:empty { display: none; }

.smm-drivers-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold-600, #B8935A);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.smm-drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.smm-driver {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-primary, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--color-gold-500, #c9a961);
  border-radius: 6px;
}

.smm-driver-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.smm-driver-arrow {
  font-size: 14px;
  line-height: 1;
}

.smm-driver-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.smm-driver-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.smm-driver-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.smm-drivers-foot {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ============================================================
   Tier sparkline (90-day trend trail inside each tier card)
   ============================================================ */

.smm-tier-spark-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-2) 0 var(--space-2);
  opacity: 0.85;
}

.smm-tier-spark {
  flex: 1;
  max-width: 100%;
  display: block;
  height: 24px;
}

.smm-tier-spark-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================================
   Indicator sort toolbar
   --------------------------------------------------------------
   Indicator section ships with background: var(--bg-secondary)
   which is light cream/grey, so toolbar + button colours must be
   light-mode-aware. Active button stays gold; inactive buttons use
   dark navy text on a near-white card so labels are legible on
   the cream section background.
   ============================================================ */

.smm-indicator-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.smm-sort-btn {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--text-primary, #0a1628);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}

.smm-sort-btn:hover {
  border-color: var(--color-gold-500, #c9a961);
  color: var(--color-gold-700, #a37c2f);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.smm-sort-btn-active,
.smm-sort-btn-active:hover {
  background: var(--color-gold-500, #c9a961);
  border-color: var(--color-gold-500, #c9a961);
  color: #0a1628;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Export-to-PNG button
   ============================================================ */

.smm-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--color-gold-500, #c9a961);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.smm-export-btn:hover {
  background: rgba(201, 169, 97, 0.15);
  color: #fff;
  border-color: var(--color-gold-500, #c9a961);
}

/* ============================================================
   Compare-cycles toolbar toggle
   ============================================================ */

.smm-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--color-gold-700, #a37c2f);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
}

.smm-toggle-btn:hover {
  background: rgba(201, 169, 97, 0.12);
}

.smm-toggle-btn-active {
  background: var(--color-gold-500, #c9a961);
  border-color: var(--color-gold-500, #c9a961);
  color: #0a1628;
}

.smm-toggle-btn-active:hover {
  background: var(--color-gold-500, #c9a961);
}

/* ============================================================
   Methodology weight slider
   ============================================================ */

.smm-weight-slider-host:empty { display: none; }

.smm-weight-slider-host {
  padding: var(--space-6);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  border: 1px solid rgba(201, 169, 97, 0.45);
}

.smm-ws-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.smm-ws-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold-600, #B8935A);
  font-weight: 700;
  margin-bottom: 6px;
}

.smm-ws-intro {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 660px;
}

.smm-ws-reset {
  background: var(--bg-primary, #fff);
  border: 1px solid rgba(201, 169, 97, 0.55);
  color: var(--color-gold-600, #B8935A);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.smm-ws-reset:hover {
  background: rgba(201, 169, 97, 0.12);
}

.smm-ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.smm-ws-row {
  padding: var(--space-3);
  background: var(--bg-primary, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--color-gold-500, #c9a961);
  border-radius: 8px;
}

.smm-ws-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.smm-ws-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.smm-ws-tier-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
}

.smm-ws-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smm-ws-control input[type="range"] {
  flex: 1;
  accent-color: var(--color-gold-500, #c9a961);
}

.smm-ws-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gold-600, #B8935A);
  min-width: 40px;
  text-align: right;
}

.smm-ws-result {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.smm-ws-result-block {
  padding: var(--space-4);
  background: var(--bg-primary, #fff);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.smm-ws-result-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: 6px;
}

.smm-ws-result-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.smm-ws-result-default {
  color: var(--color-gold-600, #B8935A);
}

.smm-ws-result-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .smm-ws-result { grid-template-columns: 1fr; }
}