* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: "Inter", sans-serif;
}

:root {
    /* Light Mode Variables (Untouched) */
    --primary: #dc2626;
    --darkPrimary: #991919;
    --textDark: #171717;    /* Primary text, headings */
    --text: #404040;        /* Muted text, secondary info */
    --bg: #fafafa;          /* Element backgrounds (hover, cards etc.) */
    --border: #e5e5e5;      /* Borders */
    --white: #ffffff;       /* Page background */
    --error: #721c24;
    --success: #155724;
    --siteWidth: 720px;
    --boxShadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

    /* Variables for dark mode button hover, derived from offline page */
    --btn-dark-hover-bg: #e5e5e5;
    --btn-dark-text: #171717;
}

html {
    box-sizing: inherit;
    scroll-behavior: smooth;
    font-size: 16px;
    line-height: 1.6;
}

body {
    position: relative;
    color: var(--text);
    margin: 0 auto;
    background-color: var(--white); /* Uses --white for page background */
    overflow-x: hidden;
}

/* GLOBAL CSS */
img {
    max-width: 100%;
    height: auto;
}

p:not(:last-child) {
    margin-bottom: 1.5rem;
}

.container {
    width: 100%;
    max-width: var(--siteWidth);
    margin: 0 auto;
    padding: 0.75rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--textDark); /* Light mode: #171717 */
    color: var(--white);             /* Light mode: #ffffff */
    border: none;
    border-radius: 0.25rem; /* Matches offline button radius more closely (6px vs 0.25rem) */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    line-height: 1.25;
    border: 1px solid transparent;
}

.btn:is(:hover, :focus) {
    background-color: var(--darkPrimary); /* Light mode: #991919 (red accent) */
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border);
    cursor: not-allowed;
}

/* HEADER CSS */
header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--white); /* Light mode: #ffffff */
    height: 4rem;
    overflow: hidden;
    border-bottom: 1px solid var(--border); /* Light mode: #e5e5e5 */
    /* Light mode header background with blur */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--textDark); /* Light mode: #171717 */
    gap: 0.75rem;
}

header .nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#back,
#reload {
    cursor: pointer;
    /* Ensure icons inside these are targetable if needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* MAIN */
main {
    min-height: calc(100dvh - 4rem);
}

main.container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

main > *:not(:last-child) {
    margin-bottom: 1.5rem;
}

div.ad-box {
    background-color: var(--bg);
    height: 280px;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    overflow: hidden;
}

/* HERO ADS */
.ads a {
    border: 1px solid var(--border);
    display: block;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
}

.ads a img {
    display: block;
}

/* HOME PAGE */
.list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.list-item {
    position: relative;
    border: 1px solid var(--border); /* Light mode: #e5e5e5 */
    border-radius: 0.5rem; /* 8px, offline container is 12px */
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
    background-color: var(--white); /* Explicitly set for light mode, will be overridden in dark */
}

.list-item:hover {
    background-color: var(--bg); /* Light mode: #fafafa */
}

.list-item:active {
    background-color: var(--border); /* Light mode: #e5e5e5 */
}

.list-item > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.list-item h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--textDark); /* Light mode: #171717 */
    line-height: 1.2;
}

.list-item span {
    font-size: 0.75rem;
    color: var(--text); /* Light mode: #404040 */
    opacity: 0.8;
}

.download {
    /* In light mode, this will use --bg which is #fafafa */
    background-color: var(--bg);
}

.download::after {
    content: "Saved";
    position: absolute;
    top: -0.5rem;
    right: 0.75rem;
    font-size: 0.5rem;
    text-transform: uppercase;
    color: #f0fdf4; /* Light text for green badge */
    background-color: var(--success); /* Light mode: #155724 */
    padding: 0.25rem 0.5rem;
    border-radius: 0.75rem;
    line-height: 1;
    font-weight: 500;
}

/* DESKTOP CSS */
@media only screen and (min-width: 768px) {
}

/* DARK MODE STYLES (Inspired by your offline page) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Page and Core Text */
        --white: #171717;       /* Page background (from offline body.background-color) */
        --textDark: #ffffff;    /* Primary text, headings (from offline body.color, h1.color) */
        --text: #999999;        /* Muted text, secondary info (from offline p.color) */

        /* Element Backgrounds & Borders */
        --bg: #1a1a1a;          /* Element backgrounds (from offline .offline-container.background-color) */
                                /* This will be used for .list-item:hover and .download */
        --border: #333333;      /* Borders (from offline .offline-container.border-color) */

        /* Accent Colors (Red accent from light mode can be kept or adjusted) */
        /* --primary: #dc2626; */ /* Keeping original red */
        /* --darkPrimary: #ef4444; */ /* Example: A slightly brighter red for dark mode if needed */

        /* Component Specific Colors */
        --success: #16a34a; /* A green that pops on dark bg, e.g., Tailwind green-600 */
        --error: #ef4444;   /* A red that pops, e.g., Tailwind red-500 */

        /* Box Shadow (subtle for dark mode) */
        --boxShadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px,
            rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;

        /* Dark mode button specific variables from offline page */
        --btn-dark-bg: #ffffff;
        --btn-dark-text: #171717;
        --btn-dark-hover-bg: #e5e5e5;
    }

    body {
        scrollbar-color: var(--border) var(--white); /* Dark scrollbar */
    }

    header {
        /* background: rgba(23, 23, 23, 0.8); */ /* Using the new --white (which is #171717) */
        background: rgba(23, 23, 23, 0.75); /* Match offline body bg with transparency */
        /* backdrop-filter: blur(6px); /* Remains effective */
    }

    .btn {
        background-color: var(--btn-dark-bg); /* #ffffff */
        color: var(--btn-dark-text);          /* #171717 */
        border-radius: 6px; /* Match offline button */
    }

    .btn:is(:hover, :focus) {
        background-color: var(--btn-dark-hover-bg); /* #e5e5e5 */
    }
    /* .btn:disabled will use the dark mode --bg, --text, --border which is fine */


    .list-item {
        background-color: var(--bg); /* Default background for list items in dark mode */
        /* border-color is already var(--border) which is now #333 */
    }

    .list-item:hover {
        /* For dark mode, make hover slightly lighter or different if --bg is already the item bg */
        background-color: #262626; /* Similar to offline .icon-container */
    }

    .download {
        /* .download already uses --bg, which is #1a1a1a in dark mode. This is fine. */
    }

    .download::after {
        /* --success is now #16a34a. Text color #f0fdf4 should still be good. */
        color: #f0fdf4;
        background-color: var(--success);
    }

    /* SVG Icon Handling for <img> tags in Dark Mode */
    header .logo img,      /* For #reload and #back icons if they are direct children */
    #reload img,           /* More specific for reload icon */
    #back img,             /* More specific for back icon */
    .list-item img[src*=".svg"] /* Target only SVGs in list items */
    {
        filter: invert(1);
    }

    /* If ads have images that need inversion (use with caution) */
    /* .ads a img {
        filter: invert(1) hue-rotate(180deg);
    } */
}