/* --- Light theme (default) --- */
:root {
    --bg-app: #e0eafc;
    --bg-surface: #f6f9fe;
    --bg-panel: #FFFFFF;
    --text-main: #2d3748;
    --text-muted: #718096;
    --accent-primary: #4299e1;
    --accent-bg: #e4f0fb;
    --accent-text: #ffffff;
    --border-surface: rgba(255, 255, 255, 0.6);
    --border-panel: #e2e8f0;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    --backdrop: blur(12px);
}

/* --- Dark theme --- */
[data-theme="dark"] {
    --bg-app: #050505;
    --bg-surface: #111111;
    --bg-panel: #1e1e1e;
    --text-main: #f5f5f5;
    --text-muted: #a3a3a3;
    --accent-primary: #00ff9d;
    --accent-bg: rgba(0, 255, 157, 0.1);
    --accent-text: #000000;
    --border-surface: #00ff9d44;
    --border-panel: #333333;
    --box-shadow: 0 0 10px rgba(0, 255, 157, 0.40);
    --backdrop: none;
}

/* --- Theme change transition --- */
:root.theme-change *,
:root.theme-change *::before {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease, 
        box-shadow 0.5s ease !important;
}

:root.theme-change *::marker {
    transition: 
        color 0.5s ease !important;
}

/* --- Hover button --- */
.hover-button-container {
    padding-top: 4px;
    padding-right: 4px;
    cursor: pointer;
    user-select: none;
}

.hover-button-container > * {
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 10px;
    transition:
        box-shadow 0.2s,
        transform 0.2s,
        border 0.2s;
}

.hover-button-container:hover > *,
.hover-button-container.active > *,
.active .hover-button-container > * {
    border: 1px solid var(--accent-primary);
    transform: translate(4px, -4px);
    box-shadow: -4px 4px 0 var(--accent-primary);
}

/* --- Loading placeholder --- */
.loading-placeholder h3,
.loading-placeholder h4,
.loading-placeholder p {
    border-radius: 6px;
    animation: loading-pulse 3s infinite ease-in-out;
}

@keyframes loading-pulse {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.1;
    }
}

/* --- Core layout --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--accent-primary) var(--accent-bg);
}

body, html {
    background-color: var(--bg-app);
}

ul li::marker {
    color: var(--accent-primary);
}