/* Light Theme */
body.light, body.light * {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #bbb !important;
}

body.light .sidebar, body.light .sidebar * {
    background-color: #f5f5f5 !important;
    color: #111111 !important;
}

body.light .sidebar a {
    color: #111111 !important;
}

body.light button,
body.light input,
body.light select,
body.light textarea,
body.light .card {
    background-color: #e0e0e0 !important;
    color: #111111 !important;
    border: 1px solid #bbb !important;
}

/* Dark Theme */
body.dark, body.dark * {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark .sidebar, body.dark .sidebar * {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark .sidebar a {
    color: #ffffff !important;
}

body.dark button,
body.dark input,
body.dark select,
body.dark textarea,
body.dark .card {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

/* Cyber Theme */
body.cyber, body.cyber * {
    background-color: #0a0a0a !important;
    color: #00ffea !important;
    border-color: #00ffd5 !important;
}

body.cyber .sidebar, body.cyber .sidebar * {
    background-color: #111111 !important;
    color: #00ffea !important;
}

body.cyber .sidebar a {
    color: #00ffd5 !important;
}

body.cyber button,
body.cyber input,
body.cyber select,
body.cyber textarea,
body.cyber .card {
    background-color: #00ffea !important;
    color: #000000 !important;
    border: 1px solid #00ffd5 !important;
}

/* Pastel Theme */
body.pastel, body.pastel * {
    background-color: #fffafc !important;
    color: #333333 !important;
    border-color: #ffccd5 !important;
}

body.pastel .sidebar, body.pastel .sidebar * {
    background-color: #ffeef6 !important;
    color: #333333 !important;
}

body.pastel .sidebar a {
    color: #555555 !important;
}

body.pastel button,
body.pastel input,
body.pastel select,
body.pastel textarea,
body.pastel .card {
    background-color: #ffdce0 !important;
    color: #333333 !important;
    border: 1px solid #ffccd5 !important;
}

/* Forest Theme */
body.forest, body.forest * {
    background-color: #eaf6ea !important;
    color: #1a3d1a !important;
    border-color: #7eb77f !important;
}

body.forest .sidebar, body.forest .sidebar * {
    background-color: #d0edd0 !important;
    color: #1a3d1a !important;
}

body.forest .sidebar a {
    color: #276427 !important;
}

body.forest button,
body.forest input,
body.forest select,
body.forest textarea,
body.forest .card {
    background-color: #7eb77f !important;
    color: #ffffff !important;
    border: 1px solid #276427 !important;
}



/* Hot Pink Theme */
body.hotpink {
    --bg-color: #fff0f6;
    --text-color: #330014;
    --sidebar-bg: #ffd6e8;
    --sidebar-text: #330014;
    --link-color: #ff4d6d;
    --button-bg: #ff85a1;
    --button-text: #330014;
    --button-border: #ff4d6d;
}

body.hotpink, body.hotpink * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.hotpink .sidebar, body.hotpink .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.hotpink .sidebar a {
    color: var(--link-color) !important;
}

body.hotpink button,
body.hotpink input,
body.hotpink select,
body.hotpink textarea,
body.hotpink .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}


/* Lavender Theme */
body.lavender {
    --bg-color: #f9f0ff;
    --text-color: #4b0082;
    --sidebar-bg: #e6ccff;
    --sidebar-text: #4b0082;
    --link-color: #8000ff;
    --button-bg: #b366ff;
    --button-text: #ffffff;
    --button-border: #8000ff;
}

body.lavender, body.lavender * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.lavender .sidebar, body.lavender .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.lavender .sidebar a {
    color: var(--link-color) !important;
}

body.lavender button,
body.lavender input,
body.lavender select,
body.lavender textarea,
body.lavender .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}

/* Arcade Theme */
body.arcade {
    --bg-color: #000000;
    --text-color: #39ff14;
    --sidebar-bg: #000000;
    --sidebar-text: #39ff14;
    --link-color: #00ffff;
    --button-bg: #00ff00;
    --button-text: #000000;
    --button-border: #00ffff;
}

body.arcade, body.arcade * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.arcade .sidebar, body.arcade .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.arcade .sidebar a {
    color: var(--link-color) !important;
}

body.arcade button,
body.arcade input,
body.arcade select,
body.arcade textarea,
body.arcade .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}

/* Safari Theme */
body.safari {
    --bg-color: #fff8e1;
    --text-color: #5d4037;
    --sidebar-bg: #ffe0b2;
    --sidebar-text: #5d4037;
    --link-color: #ff7043;
    --button-bg: #ffab91;
    --button-text: #5d4037;
    --button-border: #ff7043;
}

body.safari, body.safari * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.safari .sidebar, body.safari .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.safari .sidebar a {
    color: var(--link-color) !important;
}

body.safari button,
body.safari input,
body.safari select,
body.safari textarea,
body.safari .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}

/* Monochrome Theme */
body.monochrome {
    --bg-color: #f0f0f0;
    --text-color: #1a1a1a;
    --sidebar-bg: #d9d9d9;
    --sidebar-text: #1a1a1a;
    --link-color: #4d4d4d;
    --button-bg: #bfbfbf;
    --button-text: #1a1a1a;
    --button-border: #4d4d4d;
}

body.monochrome, body.monochrome * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.monochrome .sidebar, body.monochrome .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.monochrome .sidebar a {
    color: var(--link-color) !important;
}

body.monochrome button,
body.monochrome input,
body.monochrome select,
body.monochrome textarea,
body.monochrome .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}

/* Rose Gold Theme */
body.rosegold {
    --bg-color: #fff0f5;
    --text-color: #800000;
    --sidebar-bg: #ffd1dc;
    --sidebar-text: #800000;
    --link-color: #ff4d6d;
    --button-bg: #ff85a1;
    --button-text: #800000;
    --button-border: #ff4d6d;
}

body.rosegold, body.rosegold * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--button-border) !important;
}

body.rosegold .sidebar, body.rosegold .sidebar * {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

body.rosegold .sidebar a {
    color: var(--link-color) !important;
}

body.rosegold button,
body.rosegold input,
body.rosegold select,
body.rosegold textarea,
body.rosegold .card {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
}
/* Search bars */
body.light input#search-input,
body.light input#search-input:focus {
    background-color: #e0e0e0 !important;
    color: #111 !important;
    border: 1px solid #bbb !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.dark input#search-input,
body.dark input#search-input:focus {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.cyber input#search-input,
body.cyber input#search-input:focus {
    background-color: #00ffea !important;
    color: #000 !important;
    border: 1px solid #00ffd5 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.pastel input#search-input,
body.pastel input#search-input:focus {
    background-color: #ffdce0 !important;
    color: #333 !important;
    border: 1px solid #ffccd5 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.forest input#search-input,
body.forest input#search-input:focus {
    background-color: #7eb77f !important;
    color: #fff !important;
    border: 1px solid #276427 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.hotpink input#search-input,
body.hotpink input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.lavender input#search-input,
body.lavender input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.arcade input#search-input,
body.arcade input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.safari input#search-input,
body.safari input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.monochrome input#search-input,
body.monochrome input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.rosegold input#search-input,
body.rosegold input#search-input:focus {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* Vista Theme */
body.vista {
    --bg-color: #eaf4ff;
    --text-color: #003366;
    --sidebar-bg: rgba(204, 224, 255, 0.85);
    --sidebar-border: #99bbdd;
    --link-color: #004a9f;
    --button-bg-start: #5ca9ff;
    --button-bg-end: #2d78d4;
    --button-hover-start: #70b6ff;
    --button-hover-end: #3e89e8;
    --button-text: #ffffff;
    --window-border: #7ba8cf;
}

body.vista {
    background: linear-gradient(to bottom, #ffffff, var(--bg-color));
    color: var(--text-color);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    animation: vistaFadeIn 0.6s ease both;
}

body.vista nav {
    background: rgba(240, 248, 255, 0.7);
    border-bottom: 1px solid var(--sidebar-border);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    animation: vistaSlideDown 0.6s ease;
}

body.vista nav a {
    color: var(--link-color);
    margin: 0 12px;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
}

body.vista nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    background: var(--link-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

body.vista nav a:hover {
    color: #1d5fc2;
}

body.vista nav a:hover::after {
    transform: scaleX(1);
}

body.vista .sidebar {
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    padding: 14px;
    border-radius: 8px;
    animation: vistaSlideIn 0.5s ease;
}

body.vista .sidebar * {
    color: var(--text-color) !important;
}

body.vista .sidebar a {
    color: var(--link-color) !important;
}

body.vista .updates-list {
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--window-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 16px;
    margin: 16px 0;
    animation: vistaFadeIn 0.6s ease both;
}

body.vista .updates-list li {
    padding: 6px 0;
    border-bottom: 1px solid #cddfee;
}

body.vista .updates-list li:last-child {
    border-bottom: none;
}

body.vista .updates-list li:hover {
    background: linear-gradient(to right, #f0f8ff, #e1f0ff);
    transition: background 0.3s;
}

body.vista .movies-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

body.vista .movies-list .movie {
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--window-border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: vistaFadeIn 0.6s ease both;
}

body.vista .movies-list .movie img {
    width: 100%;
    display: block;
}

body.vista .movies-list .movie:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

body.vista button,
body.vista input,
body.vista select,
body.vista textarea,
body.vista .card {
    background: linear-gradient(to bottom, var(--button-bg-start), var(--button-bg-end)) !important;
    border: 1px solid #1b4f9b !important;
    border-radius: 4px;
    color: var(--button-text) !important;
    padding: 7px 14px;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: inset 0 1px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.vista button:hover {
    background: linear-gradient(to bottom, var(--button-hover-start), var(--button-hover-end));
    transform: translateY(-1px);
    box-shadow: inset 0 1px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.3);
}

body.vista button:active {
    transform: translateY(1px);
}

@keyframes vistaFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes vistaSlideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes vistaSlideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}