:root {
  --bg:           oklch(0.985 0.003 250);
  --bg-sunk:      oklch(0.965 0.004 250);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.975 0.004 250);
  --fg:           oklch(0.18 0.01 250);
  --fg-muted:     oklch(0.48 0.008 250);
  --fg-subtle:    oklch(0.62 0.006 250);
  --rule:         oklch(0.9 0.006 250);
  --rule-strong:  oklch(0.84 0.008 250);
  --accent:       oklch(0.62 0.12 160);
  --accent-soft:  color-mix(in oklch, var(--accent) 14%, transparent);
  --pos:          oklch(0.58 0.14 155);
  --neg:          oklch(0.62 0.19 28);
  --warn:         oklch(0.72 0.14 75);
  --fiat-tint:    oklch(0.92 0.03 250);
  --crypto-tint:  oklch(0.88 0.06 75);
  --metal-tint:   oklch(0.9 0.07 85);
  --font-display: 'Plus Jakarta Sans', 'Sora', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pad-card: 24px;
  --pad-field: 16px;
  --gap: 14px;
}
[data-theme="dark"] {
  --bg:           oklch(0.16 0.008 250);
  --bg-sunk:      oklch(0.13 0.008 250);
  --surface:      oklch(0.2 0.008 250);
  --surface-2:    oklch(0.23 0.008 250);
  --fg:           oklch(0.96 0.003 250);
  --fg-muted:     oklch(0.72 0.008 250);
  --fg-subtle:    oklch(0.58 0.008 250);
  --rule:         oklch(0.28 0.008 250);
  --rule-strong:  oklch(0.35 0.008 250);
  --fiat-tint:    oklch(0.32 0.03 250);
  --crypto-tint:  oklch(0.35 0.06 75);
  --metal-tint:   oklch(0.36 0.07 85);
}
[data-density="compact"]     { --pad-card: 18px; --pad-field: 14px; --gap: 12px; }
[data-density="comfortable"] { --pad-card: 28px; --pad-field: 20px; --gap: 18px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-sunk); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh; }
button { font-family: inherit; }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; color: var(--fg-muted); }
#root { min-height: 100vh; }

.app { max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 28px; min-height: 100vh; }

/* topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; color: var(--fg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.brand-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 2px; }
.topbar-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); letter-spacing: 0.02em; }
.topbar-meta .sep { color: var(--fg-subtle); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; color: var(--fg-muted); cursor: pointer; transition: all 160ms var(--ease); margin-left: 4px; }
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--fg); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 color-mix(in oklch, var(--pos) 60%, transparent); animation: pulse 2s infinite var(--ease); }
.live-dot.stale { background: var(--warn); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--pos) 60%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* layout */
.main { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 24px; align-items: start; }
[data-layout="stacked"] .main { grid-template-columns: 1fr; }
.converter-col, .context-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* card */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad-card); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.card-head h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.card-head-hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-subtle); text-transform: uppercase; }

/* converter card */
.converter-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--gap); }
.converter-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.converter-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.converter-head-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); }
.converter-head-meta b { color: var(--fg); font-weight: 500; }

/* currency field */
.cur-field { position: relative; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--pad-field); display: flex; flex-direction: column; gap: 10px; transition: border-color 180ms var(--ease); }
.cur-field:focus-within { border-color: color-mix(in oklch,var(--accent) 60%,var(--rule)); box-shadow: 0 0 0 4px color-mix(in oklch,var(--accent) 10%,transparent); }
.cur-field.readonly { background: var(--surface-2); }
.cur-field-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }
.cur-field-row { display: flex; align-items: center; gap: 14px; position: relative; }
.cur-chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px 8px 8px; cursor: pointer; min-width: 160px; transition: all 160ms var(--ease); color: var(--fg); }
.cur-chip:hover { border-color: var(--rule-strong); }
.cur-chip[data-open="true"] { border-color: color-mix(in oklch,var(--accent) 60%,var(--rule)); }
.cur-chip-badge { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--fiat-tint); border-radius: 8px; font-size: 16px; font-family: var(--font-mono); font-weight: 500; color: var(--fg); }
.cur-chip-badge[data-cat="crypto"] { background: var(--crypto-tint); }
.cur-chip-badge[data-cat="metal"]  { background: var(--metal-tint); }
.cur-chip-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.cur-chip-code { font-family: var(--font-mono); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; }
.cur-chip-name { font-size: 11px; color: var(--fg-subtle); margin-top: 2px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-chip-caret { margin-left: auto; color: var(--fg-subtle); transition: transform 160ms var(--ease); }
.cur-chip[data-open="true"] .cur-chip-caret { transform: rotate(180deg); }
.cur-amount-wrap { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.cur-amount { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px,4.5vw,44px); letter-spacing: -0.02em; background: transparent; border: none; outline: none; color: var(--fg); text-align: right; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; padding: 0; }
.cur-amount::placeholder { color: var(--fg-subtle); }
.reset-btn { flex-shrink: 0; padding: 3px 7px; background: transparent; border: 1px solid var(--rule); border-radius: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-muted); cursor: pointer; transition: all 120ms var(--ease); white-space: nowrap; }
.reset-btn:hover { color: var(--fg); border-color: var(--fg-muted); background: var(--surface-2); }
.cur-field-foot { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-subtle); text-transform: uppercase; }
.chg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; }
.chg-pill.pos { background: color-mix(in oklch,var(--pos) 14%,transparent); color: var(--pos); }
.chg-pill.neg { background: color-mix(in oklch,var(--neg) 14%,transparent); color: var(--neg); }
.chg-arrow { font-size: 9px; }

/* picker */
.picker-dropdown { position: absolute; top: calc(100% + 10px); left: 0; width: 340px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 12px 30px -10px color-mix(in oklch,var(--fg) 18%,transparent), 0 2px 6px -2px color-mix(in oklch,var(--fg) 10%,transparent); z-index: 20; overflow: hidden; display: flex; flex-direction: column; max-height: 420px; animation: pickerIn 180ms var(--ease); }
@keyframes pickerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.picker-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); color: var(--fg-muted); }
.picker-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--fg); font-family: var(--font-sans); font-size: 14px; }
.picker-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.picker-tab { flex: 1; padding: 6px 10px; background: transparent; border: none; border-radius: 6px; color: var(--fg-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 120ms var(--ease); }
.picker-tab:hover { color: var(--fg); }
.picker-tab.active { background: var(--surface-2); color: var(--fg); }
.picker-list { overflow-y: auto; max-height: 300px; padding: 6px 0; }
.picker-item { display: grid; grid-template-columns: 32px 56px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: transparent; border: none; cursor: pointer; text-align: left; transition: background 100ms var(--ease); color: var(--fg); }
.picker-item:hover { background: var(--surface-2); }
.picker-item.selected { background: color-mix(in oklch,var(--accent) 8%,transparent); }
.picker-item-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--fiat-tint); border-radius: 6px; font-size: 14px; }
.picker-item-badge[data-cat="crypto"] { background: var(--crypto-tint); }
.picker-item-badge[data-cat="metal"]  { background: var(--metal-tint); }
.picker-item-code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; }
.picker-item-name { font-size: 13px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item-chg { font-family: var(--font-mono); font-size: 10.5px; }
.picker-item-chg.pos { color: var(--pos); }
.picker-item-chg.neg { color: var(--neg); }
.picker-empty { padding: 20px; text-align: center; color: var(--fg-subtle); font-size: 13px; }

/* swap */
.swap-row { display: flex; align-items: center; gap: 14px; margin: -4px 0; }
.swap-line { flex: 1; height: 1px; background: var(--rule); }
.swap-btn { width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); transition: all 200ms var(--ease); }
.swap-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.swap-btn.swapped { animation: swapSpin 420ms var(--ease); background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@keyframes swapSpin { from{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.12)} to{transform:rotate(360deg) scale(1)} }

/* converter foot */
.converter-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rule); }
.fav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--fg-muted); cursor: pointer; transition: all 160ms var(--ease); }
.fav-btn:hover { border-color: var(--rule-strong); color: var(--fg); }
.fav-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in oklch,var(--accent) 50%,var(--rule)); background: var(--accent-soft); }
.rate-detail { text-align: right; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--fg); font-variant-numeric: tabular-nums; }
.rate-inverse { color: var(--fg-subtle); }

/* favorites */
.favs-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.favs-empty, .recent-empty { padding: 20px; text-align: center; color: var(--fg-subtle); font-size: 13px; border: 1px dashed var(--rule); border-radius: var(--radius); font-family: var(--font-mono); letter-spacing: 0.02em; }
.fav-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px 8px 12px; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); transition: all 140ms var(--ease); }
.fav-chip:hover { border-color: var(--rule-strong); }
.fav-chip.active { border-color: color-mix(in oklch,var(--accent) 55%,var(--rule)); background: var(--accent-soft); }
.fav-pair { font-weight: 500; letter-spacing: 0.04em; }
.fav-rate { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.fav-chg { font-size: 10.5px; }
.fav-chg.pos { color: var(--pos); }
.fav-chg.neg { color: var(--neg); }
.fav-x { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--fg-subtle); font-size: 16px; line-height: 1; transition: all 120ms var(--ease); }
.fav-x:hover { background: color-mix(in oklch,var(--neg) 15%,transparent); color: var(--neg); }

/* chart */
.chart-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad-card); }
.chart-card.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 180px; }
.chart-placeholder { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.chart-pair { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.chart-pair svg { color: var(--fg-subtle); }
.chart-sub { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.trend { font-weight: 500; }
.trend.pos { color: var(--pos); }
.trend.neg { color: var(--neg); }
.range-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.range-tab { padding: 4px 9px; background: transparent; border: none; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-muted); cursor: pointer; text-transform: uppercase; transition: all 140ms var(--ease); }
.range-tab:hover { color: var(--fg); }
.range-tab.active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.chart-range-only { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.chart-wrap { position: relative; height: 220px; margin: 0 -4px; }
.chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-tooltip { position: absolute; top: -4px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 6px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 10px color-mix(in oklch,var(--fg) 20%,transparent); }
.tt-v { font-weight: 500; }
.tt-t { opacity: 0.6; font-size: 10px; }
.chart-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-subtle); text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* compare */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--rule); }
.compare-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: none; cursor: pointer; text-align: left; transition: background 120ms var(--ease); color: var(--fg); min-width: 0; }
.compare-row:hover { background: var(--surface-2); }
.compare-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--fiat-tint); border-radius: 6px; font-size: 13px; }
.compare-badge[data-cat="crypto"] { background: var(--crypto-tint); }
.compare-badge[data-cat="metal"]  { background: var(--metal-tint); }
.compare-meta { min-width: 0; }
.compare-code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; }
.compare-name { font-size: 11px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.compare-val { text-align: right; }
.compare-rate { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.compare-chg { font-family: var(--font-mono); font-size: 10.5px; margin-top: 1px; }
.compare-chg.pos { color: var(--pos); }
.compare-chg.neg { color: var(--neg); }

/* recent */
.recent-list { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--rule); overflow: hidden; }
.recent-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: none; border-top: 1px solid var(--rule); cursor: pointer; text-align: left; color: var(--fg); transition: background 120ms var(--ease); }
.recent-row:first-child { border-top: none; }
.recent-row:hover { background: var(--surface-2); }
.recent-from, .recent-to { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.recent-to { justify-content: flex-end; }
.recent-amt { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.recent-code { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; }
.recent-arrow { color: var(--fg-subtle); }
.recent-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; }

/* footer */
.footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; }
.foot-pair { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.foot-pair .k { margin-right: 4px; }
.foot-pair .sep { opacity: 0.5; }

/* tweaks panel */
.tweaks-panel { position: fixed; bottom: 20px; right: 20px; width: 280px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 20px 50px -12px color-mix(in oklch,var(--fg) 20%,transparent); z-index: 100; overflow: hidden; animation: pickerIn 200ms var(--ease); }
.tweaks-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.tweaks-head h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 0; font-weight: 500; }
.tweaks-close { background: transparent; border: none; width: 24px; height: 24px; font-size: 20px; color: var(--fg-subtle); cursor: pointer; line-height: 1; }
.tweaks-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tweak-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tweak-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); text-transform: uppercase; }
.swatch-row { display: flex; gap: 6px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--rule) inset; }
.swatch.active { border-color: var(--fg); transform: scale(1.1); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; gap: 2px; }
.seg-btn { padding: 4px 10px; background: transparent; border: none; border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-muted); cursor: pointer; text-transform: uppercase; }
.seg-btn.active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* responsive */
@media (max-width: 900px) {
  .app { padding: 20px; gap: 20px; }
  .main { grid-template-columns: 1fr; gap: 16px; }
  .converter-title { font-size: 30px; }
  .topbar-meta { font-size: 10.5px; }
  .brand-sub { display: none; }
  .chart-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
  .app { padding: 16px 14px 40px; gap: 16px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-meta { font-size: 10px; }
  .card, .converter-card, .chart-card { padding: 18px; border-radius: 16px; }
  .converter-title { font-size: 26px; }
  .cur-field { padding: 14px; }
  .cur-field-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .cur-chip { width: 100%; }
  .cur-amount { text-align: left; font-size: 36px; }
  .picker-dropdown { left: 0 !important; right: 0 !important; width: auto; max-width: none; }
  .compare-grid { grid-template-columns: 1fr; }
  .converter-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .rate-detail { text-align: left; }
  .tweaks-panel { left: 14px; right: 14px; width: auto; bottom: 14px; }
  .recent-row { grid-template-columns: 1fr auto 1fr; }
  .recent-row .recent-time { display: none; }
  .footer .foot-pair { display: none; }
}

/* market pulse */
.pulse-card .card-head { align-items: center; margin-bottom: 12px; }
.pulse-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; gap: 2px; }
.pulse-tab { padding: 3px 9px; background: transparent; border: none; border-radius: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; transition: all 120ms var(--ease); }
.pulse-tab:hover { color: var(--fg); }
.pulse-tab.active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.pulse-empty { padding: 20px; text-align: center; color: var(--fg-subtle); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px dashed var(--rule); border-radius: var(--radius); }
.pulse-body { display: flex; flex-direction: column; gap: 12px; }
.pulse-section { display: flex; flex-direction: column; gap: 4px; }
.pulse-section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.pulse-section-label.pos { color: var(--pos); }
.pulse-section-label.neg { color: var(--neg); }
.pulse-divider { height: 1px; background: var(--rule); }
.pulse-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); transition: background 100ms var(--ease); }
.pulse-row:hover { background: var(--surface-2); }
.pulse-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--fiat-tint); border-radius: 6px; font-size: 13px; flex-shrink: 0; }
.pulse-badge[data-cat="crypto"] { background: var(--crypto-tint); }
.pulse-badge[data-cat="metal"]  { background: var(--metal-tint); }
.pulse-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pulse-code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg); }
.pulse-name { font-size: 11px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-chg { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.pulse-chg.pos { color: var(--pos); }
.pulse-chg.neg { color: var(--neg); }
.pulse-card .card-head { margin-bottom: 12px; align-items: center; }
.pulse-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; gap: 2px; }
.pulse-tab { padding: 3px 9px; background: transparent; border: none; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; transition: all 120ms var(--ease); }
.pulse-tab:hover { color: var(--fg); }
.pulse-tab.active { background: var(--surface-2); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.pulse-empty { padding: 20px; text-align: center; color: var(--fg-subtle); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px dashed var(--rule); border-radius: var(--radius); }
.pulse-body { display: flex; flex-direction: column; gap: 10px; }
.pulse-divider { height: 1px; background: var(--rule); }
.pulse-section { display: flex; flex-direction: column; gap: 4px; }
.pulse-section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; }
.pulse-section-label.pos { color: var(--pos); }
.pulse-section-label.neg { color: var(--neg); }
.pulse-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); transition: background 100ms var(--ease); }
.pulse-row:hover { background: var(--surface-2); }
.pulse-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--fiat-tint); border-radius: 6px; font-size: 13px; flex-shrink: 0; }
.pulse-badge[data-cat="crypto"] { background: var(--crypto-tint); }
.pulse-badge[data-cat="metal"]  { background: var(--metal-tint); }
.pulse-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pulse-code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; }
.pulse-name { font-size: 11px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-chg { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.pulse-chg.pos { color: var(--pos); }
.pulse-chg.neg { color: var(--neg); }