:root {
    --bg-color: #f4f6f8;
    --text-color: #333333;
    --table-header: #eaeffa;
    --border-color: #e1e4e8;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 1545px; 
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}


.main-header {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    display: block;
}

.header-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 760px; /* CRITICAL FIX: Locks width to match a single card */
    margin: 0 auto; /* CRITICAL FIX: Centers the header in 1-column mode */
    padding: 18px; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
    position: relative; 
}


/* Update: We must restore the bottom margin because columns use margin for vertical gaps */
.card {
    background-color: #ffffff;
    width: 100%;
    max-width: 760px;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin: 0 auto 25px auto; /* Locks the exact vertical margin between stacked cards */
    box-sizing: border-box;
    display: inline-block; 
    break-inside: avoid;
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
}

.card-row {
    column-count: 1;
    column-gap: 25px; /* Locks the exact horizontal margin between side-by-side columns */
    width: 100%;
}



@media screen and (min-width: 1100px) {
    .card-row {
        column-count: 2;
    }
    
    /* CRITICAL FIX: Forces the 100% width to override all other CSS limits */
    .header-card, 
    .disclaimer-section,
    .full-width-card,
    .card-row .card:only-child {
        max-width: 100% !important; 
    }
}


.grid-center {
    display: grid;
    place-items: center; 
    width: 100%;
    text-align: center;
}

.logo {
    width: 200px;
    display: block;
    margin: 0 auto;
}

.table-wrapper {
    width: 100%;
    max-width: 700px; 
    margin: 0 auto 18px auto; 
}

.table-wrapper:last-child {
    margin-bottom: 0;
}

.etf {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

.etf th, .etf td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.etf th {
    background-color: var(--table-header);
    font-weight: 600;
    text-align: left;
}

.etf th:nth-child(2), .etf th:nth-child(3),
.etf td:nth-child(2), .etf td:nth-child(3) {
    text-align: right;
}

.etf tbody tr:nth-child(even) td {
    background-color: #f9fafc;
}

.etf tbody tr:hover td {
    background-color: #e6f0fa;
}

.etf tr:last-child td, .etf tr:last-child:hover td {
    font-weight: bold;
    background-color: var(--table-header);
    border-bottom: none;
}

.note {
    font-size: 0.85rem;
    color: #666666;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    display: block;
}

/* === THE UNIFIED RESPONSIVE CHART FIX === */
.chart-iframe {
    width: 100%; /* Scales on mobile */
    max-width: 417px; /* Locks exactly to the tight, identical chart width on desktop */
    aspect-ratio: 417 / 400; /* Scales height perfectly to prevent clipping */
    border: none;
    display: block;
    margin: 0 auto;
}

.expected-fork h2 {
    margin-top: 0;
    font-size: 1.5rem;
    text-align: center;
}

.disclaimer-section {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.disclaimer-text {
    font-size: 0.75rem;
    color: #777777;
    text-align: justify;
    line-height: 1.5;
    margin-top: 20px;
}

@media screen and (max-width: 600px) {
    body { padding: 15px; }
    .container { padding: 10px; } /* NEW: Reduces container padding on mobile */
    .card, .header-card { padding: 10px; margin-bottom: 20px; } /* NEW: Added .header-card */
    .etf th, .etf td { padding: 8px 8px; font-size: 0.9rem; }
}

@media only screen and (max-width: 500px) {
    body { padding: 15px 0px; }
    .container { padding: 5px; } /* NEW: Strips container padding to maximize screen width */
    .card, .header-card { padding: 15px 1px; margin-bottom: 10px; } /* NEW: Added .header-card */
    .etf th, .etf td { padding: 8px 8px; font-size: 0.9rem; }
}

/* Dataset Links Styling */
    .dataset-link {
        color: #0066cc; /* Standard blue for light mode */
        text-decoration: none;
    }
    .dataset-link:hover {
        text-decoration: underline;
    }
    body.dark-mode .dataset-link {
        color: #aaaaaa; /* Matches the network crawler link in dark mode */
    }
    body.dark-mode .dataset-link:hover {
        color: #ffffff; /* Brightens slightly when hovered */
    }
	
	
	@media (max-width: 600px) {
    .method-switcher {
        display: flex;
        justify-content: center;
        gap: 2px; /* Smaller gap */
        padding: 0 1px; /* Prevent touching the exact edge of the screen */
    }
    
.method-btn {
        flex: 1; 
        min-width: 0; 
        padding: 6px 0; 
        font-size: 7.5px; /* CRITICAL FIX: Reduced further to guarantee fit */
        letter-spacing: -0.5px; /* Squeezes the characters just a fraction more */
        white-space: nowrap; 
        text-align: center;
        margin: 0; 
        box-sizing: border-box; /* CRITICAL FIX: Prevents the 1px border from expanding the button's total width */
    }
}


body.dark-mode .card, 
body.dark-mode .header-card, /* NEW: Added header-card here */
body.dark-mode .table-wrapper {
    background-color: #1e1e1e !important;
    border: 1px solid #333;
    box-shadow: 0 2px 4px rgba(255,255,255,0.05);
}

.disclaimer-section {
    width: 100%;
    max-width: 760px; /* CRITICAL FIX: Locks width to match a single card */
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.full-width-card {
    column-span: all;
    -webkit-column-span: all; 
    max-width: 760px; 
    margin: 0 auto 25px auto;
    display: block !important; /* CRITICAL FIX: Destroys the .grid-center conflict */
}

.card-row .card:only-child {
    column-span: all;
    -webkit-column-span: all; 
    max-width: 760px; 
    margin: 0 auto 25px auto; 
    display: block !important; /* CRITICAL FIX: Destroys the .grid-center conflict */
}

/* Keep your existing table-wrapper rule exactly as it is below this */
.full-width-card .table-wrapper {
    max-width: 100%; 
}


/* === Responsive Table Column Drop-off === */
/* Hide Block Height below 1250px */
@media screen and (max-width: 1250px) {
    .hide-at-1250 { display: none; }
}

/* Hide ISP below 1100px */
@media screen and (max-width: 1100px) {
    .hide-at-1100 { display: none; }
}

/* Hide Port below 950px */
@media screen and (max-width: 950px) {
    .hide-at-950 { display: none; }
}

/* Hide Country below 800px */
@media screen and (max-width: 800px) {
    .hide-at-800 { display: none; }
}

/* Hide Last Update below 600px */
@media screen and (max-width: 600px) {
    .hide-at-600 { display: none; }
}