/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:         #eef2f7;
  --bg2:        rgba(255,255,255,.22);
  --panel:      #ffffff;
  --text:       #10192d;
  --muted:      #657089;
  --line:       #d7dee8;
  --gold:       #b89238;
  --gold-soft:  #f3ead1;
  --green:      #16845b;
  --green-bg:   #eaf7f1;
  --red:        #c84d4d;
  --red-bg:     #faeded;
  --blue:       #4f84e8;
  --blue-soft:  #edf4ff;
  --shadow:     0 12px 32px rgba(16,25,45,.06);
  --radius:     24px;
  --header-bg:  rgba(255,255,255,.92);
  --alert-bg:   #121c31;
  --alert-text: #e8d9a8;
  --icon-btn-bg:#f3f5f9;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0d1117;
  --bg2:        rgba(255,255,255,.04);
  --panel:      #161b24;
  --text:       #e6eaf2;
  --muted:      #8b95aa;
  --line:       #2a3242;
  --gold:       #d4aa52;
  --gold-soft:  #2a2210;
  --green:      #2ecf8a;
  --green-bg:   #0d2b1e;
  --red:        #e06060;
  --red-bg:     #2b1010;
  --blue:       #6fa3f5;
  --blue-soft:  #111d35;
  --shadow:     0 12px 32px rgba(0,0,0,.35);
  --header-bg:  rgba(13,17,23,.94);
  --alert-bg:   #0a0f19;
  --alert-text: #d4aa52;
  --icon-btn-bg:#1e2535;
}

/* ── Reset / base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: #121c31; /* fills overscroll area with ticker color */
  overscroll-behavior-x: none; /* disable horizontal bounce only */
}
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
  overflow: visible;
  overflow-x: clip;
  min-width: 0;
  padding-top: 36px; /* space for fixed ticker bar */
  overscroll-behavior-x: none; /* disable horizontal bounce only */
}
/* Cover overscroll gap between fixed ticker and content */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: #121c31; /* same as ticker — covers any gap */
  z-index: 49;
  pointer-events: none;
}
[data-theme="dark"] body::before {
  background: #0a0f19;
}
a { text-decoration: none; color: inherit }
.brand { text-decoration: none !important }
.container { width: min(1240px, calc(100% - 32px)); margin: 0 auto; min-width: 0; max-width: 100% }
.section { padding: 44px 0 }
.section-soft {
  background: var(--bg2);
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel {
  background:    var(--panel);
  border:        1px solid var(--line);
  box-shadow:    var(--shadow);
  border-radius: var(--radius);
}

/* ── Alert ticker bar ──────────────────────────────────────────────────────── */
.alert-bar {
  background:  var(--alert-bg);
  height:      36px;
  overflow:    hidden;
  position:    fixed;
  top:         0;
  left:        0;
  right:       0;
  z-index:     50;
  width:       100%;
  border-bottom: 1px solid rgba(184,146,56,.15);
}
.alert-track {
  display:     flex;
  align-items: center;
  gap:         48px;
  white-space: nowrap;
  height:      100%;
  animation:   ticker 40s linear infinite;
  will-change: transform;
}
.alert-track:hover { animation-play-state: paused }
.alert-item {
  color:       var(--alert-text);
  font-size:   13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.alert-item .ai-sep { color: rgba(184,146,56,.4); margin: 0 6px }
.alert-item .ai-val { color: #f0dfa0 }
.alert-item .ai-up  { color: #2ecf8a }
.alert-item .ai-dn  { color: #e06060 }
@keyframes ticker {
  0%   { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.site-header {
  position:       sticky;
  top:            36px;
  z-index:        40;
  background:     var(--header-bg);
  backdrop-filter:blur(12px);
  border-bottom:  1px solid var(--line);
  transition:     background .3s, border-color .3s;
}
.header-inner {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         12px;
  padding:     12px 0;
  min-width:   0;
}
.brand          { display: flex; gap: 14px; align-items: center; text-decoration: none }
.brand-mark     {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a028 50%, #a07818 100%);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(160,120,24,.35);
}
.brand-app {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  line-height: 1;
  text-decoration: none;
  user-select: none;
}
.brand:hover .brand-app,
.brand:visited .brand-app,
.brand:link .brand-app { text-decoration: none }
.brand-title    { font-weight: 800; font-size: 15px }
.brand-subtitle { font-size: 12px; color: var(--muted) }
.brand          { flex-shrink: 0; min-width: 0 }
.nav            { display: flex; gap: 22px; font-weight: 700; font-size: 14px; overflow: hidden; min-width: 0 }
.nav a          { color: var(--muted); transition: color .2s; white-space: nowrap }
.nav a:hover    { color: var(--text) }
.nav a.nav-sec  { opacity: .65; font-weight: 600 }

.header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0 }
.status-chip    { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; white-space: nowrap; font-weight: 700 }
.market-chip    { background: var(--green-bg); color: var(--green); border-color: rgba(46,207,138,.25) }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--icon-btn-bg);
  cursor: pointer; display: grid; place-items: center;
  color: var(--muted); transition: background .2s, color .2s;
  font-size: 16px; line-height: 1;
}
.icon-btn:hover { background: var(--panel); color: var(--text) }

.theme-icon-dark { display: none }
[data-theme="dark"] .theme-icon-light { display: none }
[data-theme="dark"] .theme-icon-dark  { display: block }

/* Share toast */
.share-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #121c31; color: #e8d9a8;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  z-index: 100; opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.share-toast.show { opacity: 1 }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero-shell { padding: 34px }
.hero-copy-block h1 { margin: 0 0 10px; font-size: 52px; line-height: 1.02; letter-spacing: -.03em }
.hero-copy { margin: 0; color: var(--muted); max-width: 780px; font-size: 16px; line-height: 1.7 }
.eyebrow, .section-kicker {
  margin: 0 0 8px; color: var(--gold);
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}
.section-head   { display: block; margin-bottom: 26px }
.section-head h2{ margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: -.03em }

/* Overview strip */
.overview-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 28px 0 }
.summary-card   { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; min-height: 0; transition: background .3s, border-color .3s }
.summary-card-accent { background: var(--blue-soft) }
.summary-card-gold   { background: var(--gold-soft) }
.summary-label  { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em }
.summary-card strong{ display: block; font-size: clamp(20px, 4.5vw, 34px); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 6px }
.summary-card small { font-size: 13px; color: var(--muted) }
.strip-change { display: inline-block; font-size: 13px; font-weight: 800; margin-top: 2px }
.strip-up     { color: var(--green) }
.strip-dn     { color: var(--red) }

/* Overview panel */
.overview-panel { border: 1px solid var(--line); border-radius: 24px; padding: 22px; background: var(--panel) }
.overview-head  { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 18px }
.overview-head h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; line-height: 1.2 }
.refresh-btn    { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--text); font-size: 13px; transition: background .2s; white-space: nowrap }
.refresh-btn:hover { background: var(--bg) }
.overview-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; min-width: 0 }
.overview-metric{ background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px 18px 16px }
.metric-label   { display: block; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px }
.overview-metric strong { display: block; font-size: clamp(16px, 4vw, 28px); line-height: 1.2; letter-spacing: -.03em; word-break: break-word; overflow-wrap: break-word; min-width: 0 }

/* ── Macro grid ────────────────────────────────────────────────────────────── */
.macro-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px }
.macro-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 16px 18px 14px; min-height: 120px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background .3s, border-color .3s;
}
.macro-top      { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 8px }
.macro-code     { font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em }
.macro-flag     { font-size: 14px; margin-right: 4px; vertical-align: middle; letter-spacing: 0 }
.macro-badge    { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--muted); background: var(--bg); white-space: nowrap }
.macro-value    { font-size: 26px; line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin: 0 0 6px }
.macro-ref      { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 6px }
.macro-change   { font-size: 13px; font-weight: 800 }
.macro-change.up   { color: var(--green) }
.macro-change.down { color: var(--red) }
.macro-change.neutral { color: var(--muted) }

/* ── Tape ──────────────────────────────────────────────────────────────────── */
.tape-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; min-width: 0 }
.tape-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 14px 14px 12px; min-height: 130px;
  transition: background .3s, border-color .3s;
}
.tape-top       { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px }
.tape-code      { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em }
.tape-name      { font-weight: 800; font-size: 16px; line-height: 1.15 }
.tape-values    { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px }
.tape-value-box { border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 8px; background: var(--bg); overflow: hidden; min-width: 0 }
.tape-value-box span   { display: block; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; margin-bottom: 6px }
.tape-value-box strong { display: block; font-size: 20px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; overflow: visible }
.tape-meta      { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700 }

/* ── Tick flash animation ──────────────────────────────────────────────────── */
@keyframes flashUp {
  0%   { background: rgba(22,132,91,.22);  color: var(--green) }
  100% { background: transparent }
}
@keyframes flashDn {
  0%   { background: rgba(200,77,77,.18);  color: var(--red) }
  100% { background: transparent }
}
.tick-up { animation: flashUp .9s ease-out }
.tick-dn { animation: flashDn .9s ease-out }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge     { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800 }
.badge.up  { color: var(--green); background: var(--green-bg) }
.badge.down{ color: var(--red);   background: var(--red-bg)   }

/* ── Desk strip ────────────────────────────────────────────────────────────── */
.desk-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px }
.desk-card  {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 18px; min-height: 96px; display: flex; flex-direction: column; justify-content: center;
}
.desk-card strong { font-size: 30px; line-height: 1.06; letter-spacing: -.04em; display: block; margin-top: 8px }

/* ── Quotes ────────────────────────────────────────────────────────────────── */
.quotes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px }
.quote-card  {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 16px 16px 14px;
  border-top: 4px solid var(--gold);
  border-left: 3px solid var(--gold);
  transition: background .3s, border-color .3s;
}
.quote-card.fx      {
  border-top-color: var(--blue);
  border-left-color: var(--blue);
  background: var(--blue-soft);
}
[data-theme="dark"] .quote-card.fx { background: var(--blue-soft) }
.quote-top          { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 14px }
.quote-title        { font-size: 17px; font-weight: 800; line-height: 1.15; margin-bottom: 4px }
.quote-sub          { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
.quote-values       { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px }
.value-box          { border: 1px solid var(--line); border-radius: 18px; padding: 10px; background: var(--bg); min-width: 0 }
.value-box span     { display: block; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; margin-bottom: 6px }
.value-box strong   { display: block; font-size: 23px; line-height: 1.02; letter-spacing: -.045em; white-space: nowrap; overflow: visible; transform-origin: left center }
.quote-footer       { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800 }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table-shell      { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius) }
.market-table     { width: 100%; border-collapse: collapse; min-width: 780px }
.market-table th, .market-table td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px }
.market-table th  { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; background: var(--bg); cursor: pointer; user-select: none }
.market-table th:hover { color: var(--text) }
.market-table th .sort-arrow { opacity: .4; margin-left: 4px }
.market-table th.sorted-asc .sort-arrow::after { content: ' ▲' }
.market-table th.sorted-desc .sort-arrow::after { content: ' ▼' }
.market-table tr:hover td { background: var(--bg) }
.market-table tr:last-child td { border-bottom: none }
.instrument-cell strong { display: block; font-size: 15px }
.instrument-cell small  { color: var(--muted) }

/* ── Converter ─────────────────────────────────────────────────────────────── */
.converter-shell  { padding: 24px }
.converter-grid   { display: grid; grid-template-columns: 1.1fr 1fr auto 1fr .9fr; gap: 12px; align-items: end }
.field-group label{ display: block; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-bottom: 8px }
.field-group input, .field-group select {
  width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 14px;
  padding: 0 14px; font: inherit; background: var(--panel); color: var(--text);
}
.swap-btn   { height: 48px; width: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; cursor: pointer; color: var(--text) }
.result-panel { border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; background: var(--gold-soft) }
.result-panel span  { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase }
.result-panel strong{ display: block; font-size: 34px; line-height: 1.02; letter-spacing: -.04em; margin: 6px 0 }
.result-panel small { color: var(--muted); font-size: 13px }

/* ── Chart ─────────────────────────────────────────────────────────────────── */
.chart-head       { display: grid; grid-template-columns: minmax(220px,380px) 1fr; gap: 24px; align-items: center }
.chart-head-right { display: flex; justify-content: flex-end; gap: 10px; align-items: center; flex-wrap: wrap }
.chart-label      { font-size: 14px; font-weight: 800; color: var(--muted) }
.tabs             { display: flex; gap: 6px }
.tab              { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 13px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--text); font-size: 13px; transition: background .2s, color .2s }
.tab.active       { background: #121c31; color: #fff; border-color: #121c31 }
[data-theme="dark"] .tab.active { background: var(--gold); color: #0d1117; border-color: var(--gold) }
.instrument-tabs .tab.active { background: var(--gold); color: #fff; border-color: var(--gold) }
[data-theme="dark"] .instrument-tabs .tab.active { background: var(--gold); color: #0d1117 }
.chart-shell      { padding: 18px }
.chart-summary-row{ display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap }
.chart-summary    { font-size: 14px; font-weight: 700; color: var(--muted) }
.chart-axis-note  { font-size: 13px; color: var(--muted); font-weight: 700 }
.chart-stats      { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 12px }
.chart-stat       { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg) }
.chart-stat span  { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-bottom: 6px }
.chart-stat strong{ font-size: 18px; line-height: 1.05; letter-spacing: -.03em }
.chart-canvas-wrap{ position: relative }
#miniChart        { width: 100%; height: auto; display: block; border-radius: 20px }
.chart-tooltip    { position: absolute; z-index: 5; background: #17233a; color: #fff; padding: 12px 14px; border-radius: 18px; font-weight: 800; box-shadow: 0 14px 26px rgba(0,0,0,.2); pointer-events: none; min-width: 132px }
.chart-tooltip .tt-date { display: block; font-size: 13px; opacity: .88; margin-top: 4px; font-weight: 600 }
.chart-tooltip::after { content:""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #17233a }

/* ── Converter presets ─────────────────────────────────────────────────────── */
.converter-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.preset-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.preset-btn:hover { background: var(--gold-soft); border-color: var(--gold) }
.preset-btn.active { background: var(--gold); color: #fff; border-color: var(--gold) }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer  { padding: 26px 0; border-top: 1px solid var(--line) }
.footer-inner { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 13px }
.hidden       { display: none !important }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:1180px) {
  .overview-strip, .overview-grid, .quotes-grid, .desk-strip, .tape-grid { grid-template-columns: repeat(2,1fr) }
  .macro-grid { grid-template-columns: repeat(2,1fr) }
  .chart-head { grid-template-columns: 1fr }
  .nav        { gap: 16px }
}

/* Tablet: 768px–920px */
@media (max-width:920px) {
  .header-inner   { flex-wrap: nowrap; gap: 10px }
  .nav            { display: none }
  .converter-grid { grid-template-columns: 1fr 1fr; align-items: stretch }
  .swap-btn       { width: 100%; height: 46px }
  .result-panel   { grid-column: 1/-1 }
  .chart-stats    { grid-template-columns: repeat(2,1fr) }
  .hero-copy-block h1 { font-size: 38px }
  .chart-head-right { gap: 8px }
  .overview-strip, .overview-grid, .quotes-grid, .desk-strip, .tape-grid { grid-template-columns: repeat(2,1fr) }
  .macro-grid     { grid-template-columns: repeat(2,1fr) }
}

/* Mobile: ≤640px */
@media (max-width:640px) {
  /* ── Fixed ticker bar ── */
  .alert-bar          { height: 28px }
  .alert-item         { font-size: 11px }
  .alert-track        { animation-duration: 10s }
  body                { padding-top: 28px }
  body::before        { height: 28px }
  .site-header        { top: 28px }
  .header-inner       { flex-wrap: nowrap; padding: 0; height: 44px; gap: 8px; align-items: center }
  .nav                { display: none }
  .brand-mark         { width: 42px; height: 42px; border-radius: 13px }
  .brand-app          { font-size: 13px; letter-spacing: -0.5px }
  .brand-subtitle     { display: none }
  .brand-title        { font-size: 13px }
  #updatedAt          { display: none }
  .status-chip        { padding: 4px 8px; font-size: 11px }
  .icon-btn           { width: 28px; height: 28px; border-radius: 7px; font-size: 13px }

  /* ── Layout ── */
  .container          { width: calc(100% - 20px); max-width: 100% }
  .section            { padding: 18px 0 }
  .section-head       { margin-bottom: 14px }
  .section-head h2    { font-size: 22px }
  .section-kicker     { font-size: 10px; margin-bottom: 4px }

  /* ── Hero ── */
  .hero-shell         { padding: 14px }
  .hero-copy-block h1 { font-size: 24px; margin-bottom: 6px }
  .hero-copy          { font-size: 13px; line-height: 1.5 }
  .eyebrow            { font-size: 10px }

  /* ── Overview strip ── */
  .overview-strip     { grid-template-columns: repeat(2,1fr); gap: 8px; margin: 12px 0 }
  .summary-card       { padding: 12px; min-height: 0; border-radius: 16px }
  .summary-label      { font-size: 10px; margin-bottom: 6px }
  .summary-card small { font-size: 11px }
  .strip-change { font-size: 11px }

  /* ── Overview panel ── */
  .overview-panel     { padding: 12px; border-radius: 18px }
  .overview-head      { margin-bottom: 10px; gap: 8px }
  .overview-head h2   { font-size: 16px; line-height: 1.2 }
  .refresh-btn        { padding: 5px 10px; font-size: 11px }
  .overview-grid      { grid-template-columns: repeat(2,1fr); gap: 8px }
  .overview-metric    { padding: 10px; border-radius: 14px }
  .metric-label       { font-size: 9px; margin-bottom: 4px }

  /* ── Macro ── */
  .macro-grid         { grid-template-columns: repeat(2,1fr); gap: 8px }
  .macro-card         { padding: 10px 12px; min-height: 0; border-radius: 16px }
  .macro-value        { font-size: 18px; margin-bottom: 2px }
  .macro-ref          { font-size: 10px }
  .macro-change       { font-size: 12px }
  .macro-badge        { font-size: 10px; padding: 3px 7px }
  .macro-code         { font-size: 10px }
  .macro-flag         { font-size: 12px }

  /* ── Tape ── */
  .tape-grid          { grid-template-columns: repeat(2,1fr); gap: 6px }
  .tape-card          { padding: 8px 8px 6px; min-height: 0; border-radius: 14px; overflow: hidden }
  .tape-name          { font-size: 12px }
  .tape-code          { font-size: 9px }
  .tape-values        { gap: 5px; margin-bottom: 5px }
  .tape-value-box     { padding: 6px 7px 5px; border-radius: 10px; overflow: hidden; min-width: 0 }
  .tape-value-box span { font-size: 9px; margin-bottom: 2px }
  .tape-value-box strong { font-size: clamp(11px, 3.2vw, 14px); letter-spacing: -.03em }
  .tape-meta          { font-size: 10px }
  .badge              { padding: 4px 6px; font-size: 9px }

  /* ── Desk ── */
  .desk-strip         { grid-template-columns: repeat(2,1fr); gap: 8px }
  .desk-card          { padding: 10px 12px; border-radius: 16px }
  .desk-card strong   { font-size: 18px; margin-top: 4px }

  /* ── Quotes ── */
  .quotes-grid        { grid-template-columns: 1fr; gap: 10px }
  .quote-card         { padding: 12px 12px 10px; border-radius: 16px }
  .quote-title        { font-size: 15px }
  .quote-values       { gap: 8px; margin-bottom: 8px }
  .value-box          { padding: 8px; border-radius: 13px }
  .value-box span     { font-size: 9px; margin-bottom: 4px }
  .value-box strong   { font-size: 16px }

  /* ── Table ── */
  .table-shell        { border-radius: 16px }
  .market-table th,
  .market-table td    { padding: 10px 12px; font-size: 12px }

  /* ── Chart ── */
  .chart-head         { grid-template-columns: 1fr }
  .chart-head-right   { flex-direction: column; align-items: flex-start; gap: 6px }
  .instrument-tabs    { display: none }
  .chart-stats        { grid-template-columns: repeat(2,1fr); gap: 6px }
  .chart-stat         { padding: 8px }
  .chart-stat strong  { font-size: 14px }
  .chart-shell        { padding: 12px }

  /* ── Converter ── */
  .converter-shell    { padding: 12px }
  .converter-grid     { grid-template-columns: 1fr; gap: 8px }
  .swap-btn           { width: 100%; height: 40px; font-size: 18px }
  .result-panel       { grid-column: 1/-1; padding: 10px 12px }
  .result-panel strong { font-size: 22px }
  .converter-presets  { gap: 5px; margin-bottom: 12px; padding-bottom: 12px }
  .preset-btn         { font-size: 11px; padding: 6px 10px }

  /* ── Footer ── */
  .site-footer        { padding: 20px 0 }
  .footer-inner       { flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 12px; padding: 0 16px }
}