/* Gold Price — shared stylesheet (CSP: default-src 'self', so no inline styles) */
body{background:#0d0d0d;color:#ddd;font-family:system-ui,-apple-system,sans-serif;max-width:960px;margin:0 auto;padding:1rem}
h1{font-size:1.4rem}
h2{font-size:1rem;color:#aaa;margin:1.5rem 0 .4rem}
h2.group{color:#f0b90b;margin-top:2rem}
.spot{font-size:2rem;font-weight:bold}
.chg{font-size:1.1rem}
.up{color:#22c55e}
.down{color:#ef4444}
.meta{color:#888}
.meta a{color:#f0b90b}
.toggle a{color:#888;text-decoration:none;margin-right:.6rem}
.toggle a.on{color:#f0b90b;font-weight:bold}
svg{width:100%;height:auto;display:block}
footer{color:#666;font-size:.8rem;margin-top:2rem}
/* interactive */
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0}
.tf-btn{background:#222;color:#aaa;border:1px solid #333;border-radius:4px;padding:.3rem .6rem;cursor:pointer;font-size:.85rem}
.tf-btn.on{background:#f0b90b;color:#111;border-color:#f0b90b;font-weight:bold}
select{background:#222;color:#ddd;border:1px solid #333;border-radius:4px;padding:.3rem}
#chart{position:relative}
#chart svg{width:100%;height:auto;display:block}
#tooltip{position:absolute;pointer-events:none;background:#222;border:1px solid #444;color:#ddd;padding:.4rem .6rem;border-radius:4px;font-size:.85rem;display:none;z-index:10}
.zoom{display:flex;gap:.3rem}
.zoom button{background:#222;color:#ddd;border:1px solid #333;border-radius:4px;cursor:pointer;padding:.2rem .6rem}