:root { --market-green: #38c987; --market-red: #e45b64; }

.gold-page {
    background:
        radial-gradient(circle at 78% 10%, rgba(212,175,55,.09), transparent 30rem),
        radial-gradient(circle at 8% 78%, rgba(212,175,55,.04), transparent 26rem),
        var(--bg);
}

.gold-ambient {
    position: fixed; inset: 0; pointer-events: none; opacity: .25;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.market-shell { max-width: 1180px; padding-top: 4.5rem; align-items: stretch; }
.market-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.market-kicker { color: var(--gold); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.market-kicker span { display: inline-block; width: 22px; height: 1px; background: var(--gold); margin: 0 .65rem .25rem 0; }
.market-heading h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); letter-spacing: -.055em; line-height: 1; margin: .75rem 0 1rem; }
.market-heading h1 em { color: var(--gold); font-style: normal; font-weight: 400; }
.market-heading p { color: var(--text-muted); max-width: 560px; }
.market-status { border: 1px solid var(--border); background: rgba(20,20,20,.76); padding: .65rem 1rem; border-radius: 99px; color: #b8b8b8; font-size: .78rem; white-space: nowrap; }
.market-status i { display: inline-block; width: 7px; height: 7px; background: var(--market-green); border-radius: 50%; margin-right: .5rem; box-shadow: 0 0 12px var(--market-green); }

.quote-card, .chart-card { border: 1px solid var(--border); background: rgba(18,18,18,.82); backdrop-filter: blur(14px); border-radius: 16px; }
.quote-card { display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; margin-bottom: 1rem; overflow: hidden; }
.quote-main { padding: 2rem; display: flex; align-items: center; gap: 1.15rem; border-right: 1px solid var(--border); }
.asset-mark { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 50%; color: #17130a; font-weight: 700; font-size: 1.15rem; background: linear-gradient(145deg, #f3df91, #a98120); box-shadow: 0 8px 28px rgba(212,175,55,.18); }
.asset-name { font-size: .76rem; letter-spacing: .09em; color: var(--text-muted); font-weight: 600; }
.asset-name span { font-size: .62rem; border: 1px solid var(--border); border-radius: 4px; padding: .15rem .35rem; margin-left: .35rem; }
.current-price { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.12; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.current-price small { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.price-change { color: var(--text-muted); font-size: .8rem; margin-top: .25rem; }
.price-change.up { color: var(--market-green); } .price-change.down { color: var(--market-red); }
.quote-meta { display: grid; grid-template-columns: repeat(2, 1fr); }
.quote-meta div { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.quote-meta div:nth-child(odd) { border-right: 1px solid var(--border); }
.quote-meta div:nth-child(n+3) { border-bottom: 0; }
.quote-meta span, .chart-label { display: block; color: var(--text-muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.quote-meta strong { display: block; margin-top: .35rem; font-size: 1rem; font-variant-numeric: tabular-nums; }

.chart-card { overflow: hidden; }
.chart-toolbar { padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); gap: 1rem; }
.chart-toolbar strong { display: inline-block; font-size: 1.15rem; margin-top: .25rem; }
.chart-toolbar small { color: var(--text-muted); margin-left: .55rem; }
.period-tabs { display: flex; gap: .3rem; padding: .25rem; background: #0d0d0d; border: 1px solid var(--border); border-radius: 8px; }
.period-tabs button { appearance: none; border: 0; background: transparent; color: var(--text-muted); padding: .45rem .72rem; border-radius: 6px; font: 600 .72rem 'Space Grotesk', sans-serif; cursor: pointer; }
.period-tabs button:hover { color: var(--text); }
.period-tabs button.active { color: #16120a; background: var(--gold); }
.chart-wrap { position: relative; min-height: 410px; padding: 1rem .5rem .25rem; }
#goldChart { display: block; width: 100%; height: 390px; cursor: crosshair; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: rgba(18,18,18,.75); }
.chart-empty[hidden] { display: none; }
.chart-empty p { color: var(--text-muted); max-width: 360px; margin-top: .5rem; }
.empty-coin { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--gold-dim); border-radius: 50%; color: var(--gold); margin-bottom: 1rem; }
.chart-foot { display: flex; justify-content: space-between; color: var(--text-muted); padding: .8rem 1.6rem; border-top: 1px solid var(--border); font-size: .7rem; }
.legend-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--gold); margin-right: .4rem; }
.market-disclaimer { color: #666; text-align: center; font-size: .72rem; margin-top: 1.25rem; }

@media (max-width: 760px) {
    nav { padding: 0 1rem; } .nav-links a:first-child { display: none; }
    .market-shell { padding: 2.5rem 1rem 3rem; }
    .market-heading { align-items: flex-start; } .market-status { display: none; }
    .quote-card { grid-template-columns: 1fr; }
    .quote-main { border-right: 0; border-bottom: 1px solid var(--border); padding: 1.35rem; }
    .quote-meta div { padding: 1rem; }
    .chart-toolbar { align-items: flex-start; flex-direction: column; }
    .period-tabs { width: 100%; } .period-tabs button { flex: 1; }
    .chart-wrap { min-height: 330px; } #goldChart { height: 310px; }
    .chart-toolbar small { display: block; margin: .2rem 0 0; }
}