/* Header Controls */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Stats Bar */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(0, 0, 0, 0.02);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: center;
    /* Optimization: GPU promotion */
    transform: translateZ(0);
}

body.dark-mode .stat-card {
    background: rgba(255, 255, 255, 0.03);
}

.stat-card h4 {
    margin: 0 0 8px;
    color: var(--dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-card p {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

#news-ticker-container {
    border-top: 1px solid var(--border);
    background: var(--glass-bg);
    overflow: hidden;
}

body.dark-mode #news-ticker-container {
    border-top: 1px solid var(--border);
    background: var(--glass-bg);
}

/* --- NEWS TICKER LOGIC (RETAINED & OPTIMIZED) --- */

/* Original Logic: Doubled string scroll override */
@keyframes scroll-news {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

#ticker-scroll {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: scroll-news 80s linear infinite;
    will-change: transform;
}

#news-ticker-container:hover #ticker-scroll {
    animation-play-state: paused;
    cursor: pointer;
}

/* Wrapper to allow horizontal scrolling */
#table-wrapper,
#stats-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.monthly-mode th,
.monthly-mode td {
    padding: 3px 4px !important;
    font-size: 15px;
    font-weight: bold;
}

/* Daily Mode Styles */
.daily-mode table {
    table-layout: auto;
    min-width: 1200px;
}

.daily-mode th,
.daily-mode td {
    padding: 10px 4px !important;
    font-size: 11px;
}

/* Weekly Mode Styles */
.weekly-mode table {
    table-layout: auto;
    min-width: 2500px;
}

.weekly-mode th,
.weekly-mode td {
    padding: 8px 2px !important;
}

/* --- CAPTURE ZONE & WATERMARK (LOGIC PRESERVED) --- */
.watermark-zone,
#capture-zone {
    position: relative;
    overflow: hidden;
}

.watermark-zone::before,
#capture-zone::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Optimization: translate3d for sharper rendering on high-DPI screens */
    transform: translate3d(-50%, -50%, 0);
    width: 670px;
    height: 400px;
    background-image: url('/assets/images/footer-logo-dark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
    filter: grayscale(100%);
    pointer-events: none;
    z-index: 10;
}

#main-table,
#stats-table {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.watermark-zone::after,
#capture-zone::after {
    content: "BitcoinMonthlyReturn.com";
    position: absolute;
    top: calc(50% + 82px);
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    font-size: 32px;
    color: var(--text);
    opacity: 0.3;
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 10;
}

/* Watermark visibility logic */
.watermark-zone::before,
#capture-zone::before,
.watermark-zone::after,
#capture-zone::after {
    display: block;
}

.is-capturing.watermark-zone::before,
.is-capturing#capture-zone::before,
.is-capturing.watermark-zone::after,
.is-capturing#capture-zone::after {
    display: none !important;
}

@media (max-width: 720px) {
  .watermark-zone::before,
  #capture-zone::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        /* Optimization: translate3d for sharper rendering on high-DPI screens */
        transform: translate3d(-50%, -50%, 0);
        width: 470px;
        height: 200px;
        background-image: url('/assets/images/footer-logo-dark.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.45;
        filter: grayscale(100%);
        pointer-events: none;
        z-index: 10;
    }

    .watermark-zone::after,
    #capture-zone::after {
        content: "BitcoinMonthlyReturn.com";
        position: absolute;
        top: calc(50% + 85px);
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        font-family: 'JetBrains Mono', monospace;
        font-weight: bold;
        font-size: 29px;
        color: var(--text);
        opacity: 0.3;
        letter-spacing: 2px;
        pointer-events: none;
        z-index: 10;
    }
}

@media (max-width: 576px) {
  .watermark-zone::before,
  #capture-zone::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        /* Optimization: translate3d for sharper rendering on high-DPI screens */
        transform: translate3d(-50%, -50%, 0);
        width: 250px;
        height: 70px;
        background-image: url('/assets/images/footer-logo-dark.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.45;
        filter: grayscale(100%);
        pointer-events: none;
        z-index: 10;
    }

    .watermark-zone::after,
    #capture-zone::after {
        content: "BitcoinMonthlyReturn.com";
        position: absolute;
        top: calc(50% + 58px);
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        font-family: 'JetBrains Mono', monospace;
        font-weight: bold;
        font-size: 16px;
        color: var(--text);
        opacity: 0.3;
        letter-spacing: 2px;
        pointer-events: none;
        z-index: 10;
    }

}

/* --- LIVE ANIMATIONS --- */
@keyframes pulse-glow {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.live-pulse {
    animation: pulse-glow 2s infinite;
    font-weight: 800 !important;
    border: 1px solid var(--blue) !important;
}

@keyframes live-pulse-cycle-table {
    0% { box-shadow: 0 0 0 0px rgba(2, 192, 118, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(2, 192, 118, 0.2); }
    100% { box-shadow: 0 0 0 0px rgba(2, 192, 118, 0.4); }
}

.live-cell-cycle-table {
    animation: live-pulse-cycle-table 2s infinite ease-in-out;
    border: 2px solid #02c076 !important;
    position: relative;
    /* Optimization: Isolation prevents table layout shifts during shadow pulse */
    transform: translateZ(0); 
}

.live-cell-cycle-table::after {
    content: "LIVE";
    position: absolute;
    top: -8px;
    right: 2px;
    background: #02c076;
    color: white;
    font-size: 7px;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 900;
}

/* --- HELPERS & LAYOUT --- */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
}

.row-equal-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.row-equal-height > [class*="col-"] > .glass-card {
    flex: 1 0 auto;
}

.sticky-sm-up {
    position: static !important;
}

@media (min-width: 576px) {
  .sticky-sm-up {
    position: sticky !important;
    top: 0;
    z-index: 1020;
  }
}

#capture-zone.is-capturing {
    width: fit-content !important;
    min-width: 1200px;
    display: block !important;
}

.tradingview-chart-container {
    transition: opacity 0.3s ease;
    background: #131722;
    border-radius: 8px;
    overflow: hidden;
    min-height: 500px;
    height: 500px;
    width: 100%;
}

.tradingview-widget-copyright {
    display: none !important;
}

.live-cell-cycle-table td {
    background-color: transparent !important;
    box-shadow: none !important;
}

.live-cell-cycle-table {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

.cycle-table td { font-size: 0.9rem; }

@media (max-width: 576px) {
    .cycle-table td { font-size: 0.68rem; }
}

.cycle-table .live-cell-cycle-table::after {
    content: "Current Cycle";
    position: absolute;
    top: -8px;
    left: 2px;
    right: unset;
    background: #02c076;
    color: white;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 900;
}

.final-era {
    border-top: 1px dashed var(--dim);
    opacity: 0.8;
}

.table-scroll-container {
    max-height: 700px;
    overflow-y: auto;
    border-radius: 15px;
    transform: translateZ(0);
}

.era-header {
    background: var(--header-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue);
}