/* Liquid metal: graphite surfaces, champagne accents, original content hierarchy. */
:root {
  --bg: #0b0c0e;
  --surface: rgba(15, 17, 19, .94);
  --surface2: #222426;
  --border: #45413a;
  --gold: #edc879;
  --gold-glow: #edc87918;
  --silver: #c5cdd4;
  --text: #f0eee9;
  --muted: #b8b6b0;
}
body { isolation: isolate; background: #0b0c0e; }
#metal-backdrop {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 85% 10%, #675337 0, transparent 45%),
    linear-gradient(135deg, #111315, #34302a 35%, #0b0c0e 53%, #37332c 75%, #101215);
}
#metal-backdrop canvas { display: block; width: 100%; height: 100%; }
.site-header { background: #0b0c0eef; border-color: #d1b67b30; }
.logo { color: #edcf97; font-weight: 600; }
.logo-dot { box-shadow: none; background: linear-gradient(120deg, #fff0c9, #ba8736); }
.container { padding-top: 166px; padding-bottom: 80px; }
.section-title { color: #f0eee9; text-shadow: 0 2px 12px #000; font-size: 15px; letter-spacing: .035em; }
.table-meta, .row-count { color: #e2ded5; text-shadow: 0 1px 8px #000; }
.table-controls, .table-card, .chart-card, .calc-panel, .stat-card {
  border-color: #dfcfab30;
  box-shadow: 0 12px 36px #0005, inset 0 1px 0 #fff05;
  backdrop-filter: blur(18px);
}
.table-card { margin-bottom: 12px; }
.row-count { margin-bottom: 40px; }
thead th { background: #191b1d; color: #c7c3ba; }
tbody td { border-color: #ffffff0d; }
.gram-val { color: #c3c5c7; }
.metal-pill.active-all { background: #36332c; border-color: #ab956c; }
.stat-value { font-weight: 600; font-size: 23px; }
.calc-panel { margin-bottom: 20px; }
.state-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #fff0c9; outline-offset: 4px; }
#motion-toggle {
  position: fixed; right: 20px; bottom: 18px; z-index: 40;
  background: #111315ed; color: #e8dac0; border: 1px solid #b4a17a66;
  border-radius: 24px; padding: 9px 15px; font: 500 12px 'Segoe UI', sans-serif;
  cursor: pointer; box-shadow: 0 3px 16px #0005;
}
#motion-toggle:hover { background: #33302a; }
@media (max-width: 700px) {
  .container { padding-top: 108px; }
  .site-header { padding: 0 14px; }
  .header-inner { height: 72px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 6px; }
  .last-updated { font-size: 11px; }
  .section-title { font-size: 13px; line-height: 1.5; }
  .table-controls { padding: 16px; gap: 22px; }
  .stat-card { padding: 16px 14px; }
  .stat-value { font-size: 21px; }
  #motion-toggle { right: 12px; bottom: 12px; }
}