/**
 * Spot Tracker widget styles.
 * Namespaced under .st-* to avoid clashing with themes. Minimal and
 * theme-agnostic — override with your own CSS as needed.
 */

.st-widget {
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
.st-widget * { box-sizing: border-box; }

/* Spot price card */
.st-metal { border-bottom: 1px solid #f0f0f0; padding: 0.5rem 0; }
.st-metal:last-child { border-bottom: 0; }
.st-metal-name { margin: 0 0 0.25rem; font-size: 1.1rem; }
.st-units { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.st-units li { display: flex; flex-direction: column; }
.st-unit { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
.st-units strong { font-size: 1rem; }

/* Change badge */
.st-change { display: inline-block; font-size: 0.8rem; font-weight: 600; margin-top: 0.25rem; }
.st-up { color: #1a7f37; }
.st-down { color: #c62828; }
.st-neutral { color: #888; }

/* Performance rows */
.st-perf-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.st-perf { display: flex; align-items: baseline; gap: 0.75rem; }
.st-perf-name { font-weight: 600; min-width: 6rem; }
.st-perf-note { font-size: 0.7rem; color: #999; text-transform: uppercase; }

/* Ratio */
.st-ratio { display: flex; flex-direction: column; }
.st-ratio-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
.st-ratio-value { font-size: 2rem; font-weight: 700; }
.st-ratio-note { font-size: 0.75rem; color: #999; }

/* Multi-asset cards */
.st-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.st-asset { display: flex; flex-direction: column; padding: 0.6rem; border: 1px solid #eee; border-radius: 6px; }
.st-asset-name { font-size: 0.85rem; color: #555; }
.st-asset-value { font-size: 1.05rem; }

/* Raw JSON dump */
.st-raw { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 6px; overflow: auto; font-size: 0.8rem; }

/* Error */
.st-error { color: #c62828; border: 1px solid #f5c6c6; background: #fff5f5; padding: 0.75rem; border-radius: 6px; }