* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* Scroll-snap "break": from the top (banner + price + chart) one scroll
   settles with the price ticker pinned to the top — banner scrolled away,
   the live chart filling the view — and STOPS there before the indicator
   charts below. `proximity` keeps everything lower down scrolling freely. */
html { scroll-snap-type: y proximity; }

/* Price Ticker Bar */
.price-ticker {
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    padding: 15px 20px;
    /* grid lets the price span two rows with %-change + time stacked beside it */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 18px;
    row-gap: 2px;
    border-bottom: 2px solid #f7931a;
    /* The "break": one scroll pins the price here (banner gone); a fast
       flick can't skip past it into the indicator charts below. */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* display:contents lets price-value, price-change and the time become direct
   grid items so the time can sit directly under the percentage (pure CSS) */
.price-display {
    display: contents;
}

.price-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.price-value {
    grid-column: 1;
    grid-row: 1 / 3;            /* span both rows, beside the stacked %/time */
    font-family: 'B612 Mono', monospace;
    font-size: 4.4rem;
    font-weight: 700;
    /* tabular figures keep the price width fixed as digits change */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #f7931a;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.5);
}

.price-change {
    grid-column: 2;
    grid-row: 2;               /* below the time */
    justify-self: start;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.price-change.positive {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.price-change.negative {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.price-change.neutral {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
}

.exchange-badge {
    grid-column: 2;
    grid-row: 1;               /* time on top, above the percentage */
    justify-self: start;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.exchange-badge::before {
    content: '●';
    color: #00ff88;
    font-size: 0.5rem;
    animation: blink 20s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.updated-stack {
    display: flex;
    flex-direction: column;
    align-items: center;   /* center the date over the time */
    line-height: 1.3;
}

.last-updated {
    /* match the 7D LOW/HIGH labels (.range-label-text) */
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #b0b0b0;
}

.last-date {
    /* date line above the time — same color and weight as the time */
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #b0b0b0;
}

/* BTC ↔ STRC cross-link — small pill inside the pinned price strip (third
   grid column, spanning both rows beside the %-change/time stack). Lives
   here rather than in the header so it stays on screen while watching the
   price (scroll-snap pins the ticker with the banner scrolled away). Styled
   after the range-window pill so it reads as part of the same system. */
/* 3-way dashboard switcher (BTC / MSTR / STRC), stacked vertically in the
   pinned price strip — replaced the single ⇄ cycle link (owner req
   2026-07-20). The current page's asset is lit (.active); the other two are
   dimmed links to their dashboards' #price anchors. */
.asset-switch {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.asset-switch a {
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #8a8fa8;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(247, 147, 26, 0.15);
    border-radius: 999px;
    padding: 5px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.asset-switch a:hover {
    background: rgba(247, 147, 26, 0.15);
    color: #f7931a;
}

.asset-switch a:focus-visible {
    outline: 2px solid rgba(247, 147, 26, 0.6);
    outline-offset: 1px;
}

.asset-switch a.active {
    color: #f7931a;
    background: rgba(247, 147, 26, 0.18);
    border-color: rgba(247, 147, 26, 0.55);
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

/* Header Banner */
header {
    background: linear-gradient(90deg, #f7931a 0%, #ffcd00 50%, #f7931a 100%);
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(247, 147, 26, 0.5);
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;   /* snap back here to reveal the banner (top) */
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    /* animation: shimmer 3s infinite; */
}

@keyframes shimmer {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

.logo-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.logo {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: #000;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.3);
    letter-spacing: 4px;
    position: relative;
    z-index: 1;
}

.logo .btc-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 2.5rem;
    animation: pulse 2s infinite;
}

/* Navigation Menu */
/* The translateY(-50%) centring makes .nav-menu a STACKING CONTEXT, which traps
   the dropdown's z-index:1000 inside it — so the panel used to lose to the live
   chart's positioned .lc-plot/#lc-svg further down the DOM. The SVG is
   transparent, so the menu still LOOKED on top while the chart silently ate the
   clicks on whichever items hung over it (the bottom entry was unclickable).
   z-index here lifts the whole nav subtree above the chart. Don't remove it. */
.nav-menu {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* Desktop only: pull the menu further from the right edge so the page's
   vertical scrollbar doesn't overlap it. Mobile (iPhone) keeps the tight 8px. */
@media (min-width: 769px) {
    .nav-menu {
        right: 28px;
    }
}

.hamburger {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 8px;
    padding: 12px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.3s ease;
}

.hamburger:hover {
    background: rgba(0, 0, 0, 0.5);
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: rgba(247, 147, 26, 0.2);
    color: #f7931a;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tagline {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333;
    margin-top: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Main Content */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    gap: 24px;
}

.chart-container {
    max-width: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    padding: 12px;
    box-shadow: 0 0 40px rgba(247, 147, 26, 0.2);
    border: 1px solid rgba(247, 147, 26, 0.3);
}

.chart-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Scroll "break" at the bottom: a downward scroll settles with the LAST chart
   (the Bitcoin 4-year Cycle on the home page) pinned to the TOP of the view, so
   the previous chart scrolls fully off the top and the footer (Disclaimer /
   Privacy Policy / Terms) shows below it. scroll-snap-stop keeps a fast flick
   from skipping past this resting point. */
main > .chart-container:last-child {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Ticker-less sub-pages (volume/, trend/): an upward scroll settles with the
   FIRST chart pinned to the top of the view — the banner stays scrolled away
   (the same "break" the price ticker provides on pages that still have it).
   One more deliberate upward scroll from there still reveals the banner. */
body.no-ticker main > .chart-container:first-child {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.chart-title {
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    /* margin-bottom: 15px; */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Different colors for each chart title */
.chart-title.bollinger {
    color: #f7931a;
}

.chart-title.rsi {
    color: #00d4ff;
}

.chart-title.macd {
    color: #ff6b9d;
}

.chart-title.adx {
    color: #f7931a;
}

.chart-title.atr {
    color: #00E5FF;
}

.chart-title.obv {
    color: #f7931a;
}

.chart-title.vol {
    color: #00ff88;
}

.chart-title.mfi {
    color: #00d4ff;
}

.chart-title.cross {
    color: #FFD700;
}

/*
.chart-title .icon {
    margin-right: 5px;
}*/

/* Footer */
footer {
    background: #000;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #333;
}

.copyright {
    color: #666;
    font-size: 0.9rem;
}

.copyright a {
    color: #f7931a;
    text-decoration: none;
}

.copyright a:hover {
    text-decoration: underline;
}

/* 24H Range Indicator */
.range-indicator {
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    padding: 10px 20px 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.range-labels {
    display: flex;
    gap: 20px;
    align-items: center;
}

.range-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.range-label-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.range-label-value {
    font-family: 'B612 Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    /* tabular figures keep the 24H low/high width fixed as digits change */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.range-label.low .range-label-value {
    color: #ff4444;
}

.range-label.high .range-label-value {
    color: #00ff88;
}

.range-bar-container {
    flex: 1;
    max-width: 300px;
    min-width: 150px;
    padding: 0 10px;
}

/* "% of Nd range" — sits above the gradient bar. Moved out of the live chart
   card's footer 2026-07-05 (footer removed for chart height; the gauge labels
   beside the bar already show the same LOW/HIGH numbers). Dashboard pages
   only — charts/ and lstm/ have the bar but no intraday series to compute it. */
.range-pos {
    text-align: center;
    margin-bottom: 5px;
    font-family: 'B612 Mono', monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #f7931a;
    opacity: 0.9;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.range-bar {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, #ff4444 0%, #888 50%, #00ff88 100%);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.range-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.range-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.5s ease;
}

.marker-dot {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #f7931a;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.8), 0 0 20px rgba(247, 147, 26, 0.4);
}

/* 7D/15D/22D/30D window toggle — segmented pill next to the range bar */
.window-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.window-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b0b0b0;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.window-btn:hover {
    background: rgba(247, 147, 26, 0.15);
    color: #f7931a;
}

.window-btn:focus-visible {
    outline: 2px solid rgba(247, 147, 26, 0.6);
    outline-offset: 1px;
}

.window-btn.active {
    background: rgba(247, 147, 26, 0.18);
    color: #f7931a;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.window-btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
    color: #b0b0b0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo {
        font-size: 2rem;
    }
    .logo .btc-icon {
        font-size: 1.8rem;
    }
    .price-value {
        font-size: 3.63rem;
    }
    .chart-title {
        font-size: 1.2rem;
    }
    header {
        padding: 15px 20px;
    }
    main {
        padding: 10px 6px;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .price-value {
        font-size: 2.97rem;
    }
    .price-change {
        font-size: 0.85rem;
        padding: 4px 8px;
    }
    .range-indicator {
        padding: 10px 15px 12px 15px;
        gap: 10px;
    }
    .range-label-value {
        font-size: 0.9rem;
    }
    .range-bar-container {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }
    .price-display {
        flex-direction: column;
        gap: 8px;
    }
    .price-value {
        font-size: 2.86rem;
    }
    .range-indicator {
        padding: 8px 10px 10px 10px;
        gap: 8px;
    }
    .range-label-text {
        font-size: 0.62rem;
    }
    .window-btn {
        font-size: 0.62rem;
        padding: 6px 12px;
    }
    .asset-switch a {
        font-size: 0.66rem;
        letter-spacing: 0.5px;
        padding: 3px 12px;
    }
    .last-updated,
    .last-date {
        font-size: 0.62rem;
    }
    .range-label-value {
        font-size: 0.8rem;
    }
    .range-bar-container {
        max-width: 150px;
    }
    .marker-dot {
        width: 14px;
        height: 14px;
    }
}

/* ===== 24-Hour Live Chart ===== */
/* Tighter top padding (no title row here) so the chart starts near the top. */
.live-chart-card { padding-top: 8px; }
.lc-plot { position: relative; width: 100%; height: 420px; }
.lc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lc-area { stroke: none; fill: url(#lc-grad); }
.lc-line {
    fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke; filter: url(#lc-glow);
}
/* Bollinger overlay — thin, no glow, drawn under the price line. Green upper
   band, red lower band, solid Deep-Sky-Blue SMA (window = the chart span). */
#lc-bb path { fill: none; stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Upper/lower bands run 10% thicker and full-vibrance like the SMA
   (owner preference); the glowing 2.5px price line still dominates. */
.lc-bb-upper { stroke: rgba(0, 255, 136, 0.7); stroke-width: 1.21; }
.lc-bb-mid   { stroke: rgba(0, 191, 255, 0.7); }
.lc-bb-lower { stroke: rgba(255, 68, 68, 0.7); stroke-width: 1.21; }
/* $1,000 price gridlines + labels (dark halo so labels read over the line). */
.lc-gridline { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-gridlabel {
    fill: rgba(255, 255, 255, 0.5);
    stroke: #0a0a0a; stroke-width: 3px; paint-order: stroke;
    font: 700 11px 'B612 Mono', monospace; letter-spacing: 0.5px;
}
/* Vertical date dividers + top labels (military YYYY-MM-DD), orange so they
   read as the time axis, distinct from the white $1,000 price gridlines. */
.lc-dateline { stroke: rgba(247, 147, 26, 0.22); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.lc-datelabel {
    fill: rgba(247, 147, 26, 0.72);
    stroke: #0a0a0a; stroke-width: 3px; paint-order: stroke;
    font: 700 11px 'B612 Mono', monospace; letter-spacing: 0.5px;
}
.live-chart-card.up   #lc-grad-top, .live-chart-card.up   #lc-grad-bot { stop-color: #00ff88; }
.live-chart-card.down #lc-grad-top, .live-chart-card.down #lc-grad-bot { stop-color: #ff4444; }
.live-chart-card.up   .lc-line { stroke: #00ff88; }
.live-chart-card.down .lc-line { stroke: #ff4444; }

.lc-axis {
    position: absolute; bottom: 2px; font-family: 'B612 Mono', monospace;
    font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}
.lc-axis-left { left: 4px; }
.lc-axis-right { right: 4px; color: rgba(247, 147, 26, 0.55); }

/* Live dot — hidden until the first draw flips the card to .up/.down. */
.lc-live-dot {
    display: none; position: absolute; width: 13px; height: 13px; border-radius: 50%;
    transform: translate(-50%, -50%); transition: left 0.6s ease, top 0.6s ease;
    pointer-events: none; z-index: 2;
}
.live-chart-card.up .lc-live-dot, .live-chart-card.down .lc-live-dot { display: block; }
.live-chart-card.up   .lc-live-dot { background: #00ff88; box-shadow: 0 0 8px #00ff88, 0 0 18px rgba(0, 255, 136, 0.6); }
.live-chart-card.down .lc-live-dot { background: #ff4444; box-shadow: 0 0 8px #ff4444, 0 0 18px rgba(255, 68, 68, 0.6); }
.lc-live-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: lc-pulse 1.7s ease-out infinite;
}
@keyframes lc-pulse { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(3.4); opacity: 0; } }

@media (max-width: 600px) {
    .lc-plot { height: 270px; }
}

/* ===== Legal pages (Disclaimer / Privacy / Terms) ===== */
.legal-wrap {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 22px 60px;
}
.legal-head { text-align: center; margin-bottom: 6px; }
.legal-head h1 {
    font-family: 'Orbitron', monospace;
    font-size: 2.1rem;
    font-weight: 900;
    color: #f7931a;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.35);
}
.legal-updated {
    margin-top: 10px;
    font-family: 'B612 Mono', monospace;
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 1px;
}
/* Sub-nav linking the three legal pages */
.legal-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 34px;
}
.legal-nav a {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: #cfd2e0;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.legal-nav a:hover { background: rgba(247, 147, 26, 0.15); color: #f7931a; }
.legal-nav a.current {
    background: rgba(247, 147, 26, 0.18);
    color: #f7931a;
    border-color: rgba(247, 147, 26, 0.6);
}
/* Article prose */
.legal article {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(247, 147, 26, 0.25);
    border-radius: 15px;
    padding: 30px 34px;
    box-shadow: 0 0 40px rgba(247, 147, 26, 0.12);
    line-height: 1.7;
    color: #d7d9e3;
}
.legal article h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    color: #f7931a;
    margin: 30px 0 12px;
    letter-spacing: 1px;
}
.legal article h2:first-child { margin-top: 0; }
.legal article h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: #00d4ff;
    margin: 20px 0 8px;
}
.legal article p { margin: 0 0 14px; }
.legal article ul { margin: 0 0 16px; padding-left: 22px; }
.legal article li { margin-bottom: 8px; }
.legal article strong { color: #fff; }
.legal article a { color: #f7931a; text-decoration: none; }
.legal article a:hover { text-decoration: underline; }

/* ===== Footer legal links (site-wide) ===== */
.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
}
.footer-legal a {
    color: #9a9cae;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.footer-legal a:hover { color: #f7931a; }
.footer-note {
    color: #6a6a78;
    font-size: 0.74rem;
    margin: 10px auto 0;
    max-width: 660px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .legal-head h1 { font-size: 1.6rem; }
    .legal article { padding: 22px 18px; }
}

/* ===== STRC market state (strc/ page; body.market-closed set by strc.js) ===== */
.market-state {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: #888;
}
.market-state.open { color: #00ff88; }
body.market-closed .exchange-badge::before { color: #666; animation: none; }
body.market-closed .live-chart-card .lc-live-dot {
    background: #8a8fa3;
    box-shadow: 0 0 6px rgba(138, 143, 163, 0.45);
}
body.market-closed .live-chart-card .lc-live-dot::after { animation: none; }