* {
    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;
}

/* 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;
}

/* 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
/* The same button block on pages with no price strip to host it (trend,
   volume, returns, legal). Matches the ticker's bar so the site keeps one
   navigation band in the same place on every page. */
/* The BTC / STRC / CHARTS / YTD block (owner req 2026-09-20). On the dashboards
   it lives in column 3 of the price strip, so it is a 2x2: two rows are all the
   height there is beside the live price. `.site-nav .asset-switch` below flattens
   it to one row on the pages that have no strip. */
.asset-switch {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 6px;
}

.site-nav {
    display: flex;
    justify-content: center;
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    border-bottom: 2px solid #f7931a;
    padding: 12px 10px;
}

.site-nav .asset-switch {
    grid-column: auto;
    grid-row: auto;
    /* No live price here, so there is width to spare: all four in one row
       (owner req 2026-09-20). The dashboards keep the 2x2 — there the block
       sits beside the price and only has two rows of height to work with. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 640px;
}

.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;
    /* Owner-set 40px — a shade under iOS's 44px thumb-target guideline, but
       deliberate: it keeps the pills from out-growing the pinned price strip.
       Centre the label with flex and hold the height with min-height rather
       than padding it out — that keeps the target exactly 40px at every font
       size, including the shrunk one the <=480px block sets, where padding
       alone left these pills ~21px tall and fiddly to hit. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    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);
}

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

/* Navigation Menu */
/* 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) {
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.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;
}

.chart-title {
    text-align: center;
    font-family: 'Orbitron', monospace;
    /* 1.5rem until 2026-09-21 (owner: "make these fonts smaller"). Orbitron at
       uppercase with 2px tracking reads much larger than its nominal size, and
       the heading was competing with the chart under it. */
    font-size: 1.05rem;
    /* 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 */
/* Narrow screens: the 2x2 block cannot share a row with the price — at 390px
   the price alone eats the width and the buttons spill off the right edge. Drop
   them onto their own full-width row under the price, laid out one-across-four,
   the same shape the ticker-less pages use. The strip stays one block, so
   nothing moves relative to the price. */
@media (max-width: 640px) {
    .price-ticker {
        justify-content: stretch;
        row-gap: 8px;
    }
    .price-ticker .asset-switch {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }
}

@media (max-width: 768px) {
    .price-value {
        font-size: 3.63rem;
    }
    .chart-title {
        font-size: 0.92rem;
        letter-spacing: 1px;
    }
    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) {
    .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;
        /* horizontal only — the 40px min-height above is the tap target */
        padding: 0 9px;
    }
    .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; }

/* STRC dividends link — footer of /strc/ only (owner req 2026-09-20). Kept
   quiet: it is a useful reference, not a call to action. */
.strc-dividends {
    margin: 0 0 10px;
    text-align: center;
    font-size: 0.82rem;
}
.strc-dividends a {
    color: #00d4ff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 212, 255, 0.4);
    padding-bottom: 1px;
}
.strc-dividends a:hover {
    color: #f7931a;
    border-bottom-color: rgba(247, 147, 26, 0.6);
}