:root {
    /* Color Palette */
    --color-white: #fff;
    --color-black-rgb: 0, 0, 0;
    --color-primary: #039be5;
    --color-link-light: #24292f;

    /* Light Theme Semantic Colors */
    --background-color: #ECEFF1;
    --text-color: rgba(var(--color-black-rgb), 0.87);
    --text-color-secondary: rgba(var(--color-black-rgb), 0.6);
    --text-color-tertiary: rgba(var(--color-black-rgb), 0.4);
    --header-text-color: #222;
    --link-color: var(--color-link-light);
    --link-hover-color: #0969da;
    --footer-text-color: var(--text-color-tertiary);
    --footer-link-hover-color: rgba(var(--color-black-rgb), 0.8);

    /* Component-specific variables */
    --header-bg: linear-gradient(135deg, #ECEFF4, #ECEfF7);
    --hero-bg: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    --divider-gradient: linear-gradient(to right, rgba(var(--color-black-rgb), 0.03), rgba(var(--color-black-rgb), 0.08), rgba(var(--color-black-rgb), 0.03));
    --app-card-bg: var(--color-white);
    --app-card-shadow: 0 4px 12px rgba(var(--color-black-rgb), 0.08);
    --app-card-hover-shadow: 0 6px 20px rgba(var(--color-black-rgb), 0.12);
    --about-section-bg: #f9f9f9;
    --app-icon-shadow: 0px 4px 8px rgba(var(--color-black-rgb), 0.2);
    --error-border-color: #ddd;

    /* Button variables */
    --button-primary-bg: var(--color-primary);
    --button-primary-text: var(--color-white);
    --button-primary-border: var(--color-primary);
    --button-secondary-bg: var(--color-white);
    --button-secondary-text: var(--color-primary);
    --button-secondary-border: var(--color-primary);

    /* App Entity variables (kept for compatibility) */
    --app-entity-text-color: inherit;
    --app-entity-name-text-color: inherit;
    --app-entity-comment-text-color: var(--text-color-secondary);
    --app-entity-description-text-color: inherit;
    --app-entity-h3-text-color: inherit;
    --app-entity-ul-text-color: inherit;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Color Palette */
        --color-white-rgb: 255, 255, 255;
        --color-primary-dark: #8ab4f8;

        /* Dark Theme Semantic Colors */
        --background-color: #1a1a1a;
        --text-color: rgba(var(--color-white-rgb), 0.87);
        --text-color-secondary: rgba(var(--color-white-rgb), 0.6);
        --text-color-tertiary: rgba(var(--color-white-rgb), 0.4);
        --text-color-emphasis: rgba(var(--color-white-rgb), 0.95);
        --header-text-color: var(--color-white);
        --link-color: var(--color-primary-dark);
        --link-hover-color: #adc6f5;
        --footer-link-hover-color: rgba(var(--color-white-rgb), 0.8);

        /* Component-specific variables */
        --header-bg: linear-gradient(135deg, #2d2d2d, #262626);
        --hero-bg: linear-gradient(135deg, #2c3e50, #1a2833);
        --divider-gradient: linear-gradient(to right, rgba(var(--color-white-rgb), 0.03), rgba(var(--color-white-rgb), 0.08), rgba(var(--color-white-rgb), 0.03));
        --app-card-bg: #2d2d2d;
        --app-card-shadow: 0 4px 12px rgba(var(--color-black-rgb), 0.2);
        --app-card-hover-shadow: 0 6px 20px rgba(var(--color-black-rgb), 0.3);
        --about-section-bg: #262626;
        --app-icon-shadow: 0px 4px 8px rgba(var(--color-black-rgb), 0.4);
        --error-border-color: #444;

        /* Button variables */
        --button-primary-bg: var(--color-primary-dark);
        --button-primary-text: var(--background-color);
        --button-primary-border: var(--color-primary-dark);
        --button-secondary-bg: var(--background-color);
        --button-secondary-text: var(--color-primary-dark);
        --button-secondary-border: var(--color-primary-dark);

        /* App Entity variables (dark theme overrides) */
        --app-entity-text-color: var(--text-color);
        --app-entity-name-text-color: var(--text-color-emphasis);
        --app-entity-comment-text-color: var(--text-color-secondary);
        --app-entity-description-text-color: var(--text-color);
        --app-entity-h3-text-color: var(--text-color-emphasis);
        --app-entity-ul-text-color: var(--text-color);
    }
}
    
body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: var(--background-color);
    color: var(--text-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.banner-wrapper {
    background: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.banner-content {
    background: var(--header-bg);
    margin: 0 auto;
    padding: 12px 16px;
}
.banner-row {
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    align-items: center;
}

.banner-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.brand-name {
    font-size: 20px;
    font-weight: 500;
    color: var(--header-text-color);
}

.app-link {
    display: flex;
    align-items: center;
    padding: 8px auto;
    margin-left: auto; 
    transition: color 0.2s ease;
    text-decoration: underline; 
    text-underline-offset: 4px;
    color: var(--link-color); 
    font-weight: 300;
    font-size: clamp(16px, 2vw, 18px);
}
.app-link:hover {
    color: var(--link-hover-color); 
}

/* Divider */
.content-divider {
    background: var(--divider-gradient);
    height: 1px;
    width: 100vw;
    position: relative;
    margin: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Footer */
.footer_text {
    color: var(--footer-text-color);
    text-align: center;
    font-size: 13px;
    margin-bottom: 8px;
}
.footer_text a {
    color: inherit;
    margin-right: 10px;
    text-decoration: none;
}
.footer_text a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

@media (max-width: 800px) {
    body {
        padding: 0;
    }

    .banner-content {
        padding: 12px;
    }
}