/* Light theme (default) */
:root {
    --bg-page: #f2f1ec;
    --color-text: #333;
    --color-link: #2a6a3a;
    --bg-header: #6a9a6a;
    --color-header: #fff;
    --bg-surface: #fff;
    --bg-info: #f0f0ec;
    --color-info: #444;
    --color-info-link: #2a5a5a;
    --color-border: #aaa;
    --color-border-hover: #555;
    --color-muted: #888;
    --bg-button: #5a7a8a;
    --bg-button-accent: #4a7acc;
    --bg-status: rgba(200, 180, 50, 0.25);
    --bg-toggle: rgba(0, 0, 0, 0.15);
    --bg-toggle-active: rgba(255, 255, 255, 0.85);
    --color-toggle-active: #333;
    --bg-checker-a: #e8e8e8;
    --bg-checker-b: #fff;
}

/* Dark theme (system preference) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-page: #2a2d2a;
        --color-text: #ddd;
        --color-link: #8fc898;
        --bg-header: #3d5a3d;
        --color-header: #eee;
        --bg-surface: #363936;
        --bg-info: #2e312e;
        --color-info: #ccc;
        --color-info-link: #7cb8d0;
        --color-border: #555;
        --color-border-hover: #999;
        --color-muted: #777;
        --bg-button: #4a6070;
        --bg-button-accent: #4a6a9a;
        --bg-status: rgba(255, 255, 128, 0.2);
        --bg-toggle: rgba(255, 255, 255, 0.15);
        --bg-toggle-active: rgba(0, 0, 0, 0.5);
        --color-toggle-active: #eee;
        --bg-checker-a: #2e312e;
        --bg-checker-b: #363936;
    }
}

/* Dark theme (explicit) */
:root[data-theme="dark"] {
    --bg-page: #2a2d2a;
    --color-text: #ddd;
    --color-link: #8fc898;
    --bg-header: #3d5a3d;
    --color-header: #eee;
    --bg-surface: #363936;
    --bg-info: #2e312e;
    --color-info: #ccc;
    --color-info-link: #7cb8d0;
    --color-border: #555;
    --color-border-hover: #999;
    --color-muted: #777;
    --bg-button: #4a6070;
    --bg-button-accent: #4a6a9a;
    --bg-status: rgba(255, 255, 128, 0.2);
    --bg-toggle: rgba(255, 255, 255, 0.15);
    --bg-toggle-active: rgba(0, 0, 0, 0.5);
    --color-toggle-active: #eee;
    --bg-checker-a: #2e312e;
    --bg-checker-b: #363936;
}

body {
    margin: 0;
    font-family: sans-serif;
    background: var(--bg-page);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--color-link);
    font-weight: bold;
    text-decoration: none;
}

.header-bar {
    display: flex;
    align-items: top;
    justify-content: center;
    background: var(--bg-header);
    padding: 8px 16px;
    position: relative;
    transition: background-color 0.3s;
}

.header-bar h1 {
    font-family: 'Dancing Script',sans-serif;
    font-size: 400%;
    color: var(--color-header);
    margin: 0;
    padding: 0;
}

.theme-switcher {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 2px;
    background: var(--bg-toggle);
    border-radius: 6px;
    padding: 3px;
}

.theme-btn {
    border: none;
    background: transparent;
    color: var(--color-header);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: background 0.2s, opacity 0.2s;
}

.theme-btn:hover {
    opacity: 1;
}

.theme-btn.active {
    background: var(--bg-toggle-active);
    color: var(--color-toggle-active);
    opacity: 1;
}

#topMenu {
    background: var(--bg-header);
    text-align: right;
    padding: 8px;
}

.menuLink {
    padding: 8px;
}
.menuLink.hover {
    background: #343;
}

.footer {
    padding: 16px;
}

#holder {
    background: repeating-conic-gradient(var(--bg-checker-a) 0% 25%, var(--bg-checker-b) 0% 50%) 0 0 / 24px 24px;
    background-clip: padding-box;
    border: 8px dashed var(--color-border);
    border-radius: 8px;
    margin-bottom: 16px;
    min-height: 240px;
    text-align: center;
    vertical-align: middle;
    display: flex;
}
#holder.hover {
    border: 8px dashed var(--color-border-hover);
}

#drophint {
    font-family: 'Dancing Script',sans-serif;
    padding-top: 84px;
    width: 100%;
    font-size: 300%;
    font-weight: bold;
    color: var(--color-muted);
    text-align: center;
}

.centered {
    margin: auto;
    text-align: center;
}

.hidden {
    display: none;
}

.topcontainer {
    margin: 16px;
    padding: 8px;
    background: var(--bg-surface);
    border-radius: 8px;
    transition: background-color 0.3s;
}

.status {
    font-weight: bold;
    background: var(--bg-status);
    border-radius: 4px;
    margin: 16px;
    padding: 16px;
}

.previewcontainer {
    padding: 8px;
}

.buttonLink {
    padding: 8px;
    color: #fff;
    background: var(--bg-button);
    border-radius: 3px;
}

.buttonLink a {
    color: #fff;
    font-weight: normal;
}

.browseButton {
    background: var(--bg-button-accent);
}

.previewImage {
    max-width: 400px;
    max-height: 300px;
    vertical-align: middle;
}

.basicinfo {
    background: var(--bg-info);
    color: var(--color-info);
    border-radius: 4px;
    margin: 16px;
    padding: 16px;
    transition: background-color 0.3s, color 0.3s;
}
.basicinfo a {
    color: var(--color-info-link);
    text-decoration: underline;
}

.detailedinfo {
    background: var(--bg-info);
    color: var(--color-info);
    border-radius: 4px;
    font-family: monospace;
    margin: 16px;
    padding: 16px;
    transition: background-color 0.3s, color 0.3s;
}
.detailedinfo a {
    color: var(--color-info-link);
    text-decoration: underline;
}

.infoKey {
    font-weight: bold;
}

.detailKey {
    color: var(--color-info);
    font-size: 120%;
}

.detailValue {
    font-weight: bold;
    font-size: 120%;
}