body { 
    font-family: Arial, Helvetica, sans-serif; 
    padding: 0; 
    margin: 0; 
    transition: background-color .3s, color .3s; 
    background-attachment: fixed; 
    background-size: cover; 
    background-position: center; 
}

/* 1. ТЁМНАЯ ТЕМА — СТИЛЬ МОСФИЛЬМА */
body.theme-dark {
    background-color: #0b0b0d;
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0.9), rgba(11, 11, 13, 0.98)), 
                      url('https://recsquare.ru');
    color: #f0e6d2; 
}
body.theme-dark .item { background: #15151a; border: 1px solid #2d2a22; box-shadow: 0 10px 30px rgba(0,0,0,0.7); }
body.theme-dark .title { color: #dfb76c; } 
body.theme-dark .desc { color: #bfae96; }
body.theme-dark .theme-btn { color: #dfb76c; }
body.theme-dark .theme-btn.active { color: #000 !important; }
body.theme-dark #search-input { background-color: #1c1c22; color: #fff; border-color: #443c2c; }

/* 2. СЕРАЯ ТЕМА */
body.theme-gray { background-color: #2b2b30; color: #fff; background-image: none; }
body.theme-gray .item { background: #3c3c45; border-color: #4f4f5a; }
body.theme-gray .title { color: #fff; }
body.theme-gray .desc { color: #ccc; }
body.theme-gray .theme-btn { color: #fff; }
body.theme-gray .theme-btn.active { color: #fff !important; }
body.theme-gray #search-input { background-color: #3c3c45; color: #fff; border-color: #555; }

/* 3. СВЕТЛАЯ ТЕМА — ИСПРАВЛЕНА ПОЛОСА ШАПКИ */
body.theme-light { background-color: #f8f6f2; color: #222; background-image: none; }
body.theme-light header { background-color: #ffffff; border-bottom: 2px solid #dfb76c; }
body.theme-light header p { color: #555; text-shadow: none; }
body.theme-light .item { background: #ffffff; border-color: #e2ded6; box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
body.theme-light .title { color: #111111; }
body.theme-light .desc { color: #444444; }
body.theme-light .theme-btn { color: #222; border-color: #dfb76c; }
body.theme-light .theme-btn.active { color: #fff !important; background-color: #222 !important; border-color: #222 !important; }
body.theme-light .link { color: #111; border-color: #111; }
body.theme-light .link:hover { background-color: #111; color: #fff !important; }
body.theme-light #search-input { background-color: #fff; color: #222; border-color: #dfb76c; }

/* СТРУКТУРА ШАПКИ И ОТСТУПЫ */
header { 
    padding: 50px 20px 40px 20px; 
    text-align: center; 
    border-bottom: 1px solid #443c2c; 
    background: rgba(15, 15, 18, 0.6); 
    backdrop-filter: blur(10px); 
}
.logo-svg { width: 100%; max-width: 320px; height: auto; margin-bottom: 15px; }
header p { font-size: 13px; color: #bfae96; margin: 12px 0 0 0; letter-spacing: 2px; text-shadow: 1px 1px 3px #000; font-weight: bold; }

/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМ БЕЗ НАЛОЖЕНИЯ */
.theme-container { text-align: center; width: 100%; margin: 25px 0; }
.theme-switcher { display: inline-flex; background-color: rgba(0,0,0,0.7); padding: 5px; border-radius: 6px; border: 1px solid #443c2c; }
.theme-btn { background: none; border: 1px solid transparent; font-size: 13px; padding: 6px 18px; cursor: pointer; border-radius: 4px; transition: all .2s; font-weight: bold; }

/* СТИЛИ СТРОКИ ПОИСКА */
.search-container { text-align: center; max-width: 400px; margin: 0 auto 30px auto; padding: 0 20px; }
#search-input { width: 100%; padding: 12px 20px; font-size: 14px; border: 1px solid #dfb76c; border-radius: 4px; box-sizing: border-box; outline: none; transition: all 0.3s; }

/* СЕТКА С КАРТОЧКАМИ КИНО */
.container { max-width: 1200px; margin: 0 auto 40px auto; padding: 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; }
.item { border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid transparent; transition: transform .3s, border-color .3s; }
.item:hover { transform: translateY(-4px); border-color: #dfb76c; }

.poster-box { position: relative; width: 100%; padding-top: 135%; border-bottom: 1px solid #2d2a22; }
.poster-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; font-weight: bold; font-size: 15px; color: #fff; text-shadow: 1px 1px 4px rgba(0,0,0,.9); }
.poster-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.8; }

.content-box { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.title { font-size: 16px; font-weight: bold; margin-bottom: 6px; min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { color: #888; font-size: 12px; margin-bottom: 12px; }
.desc { font-size: 13px; line-height: 1.5; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; height: 78px; }

.link { display: block; text-align: center; background-color: transparent; color: #dfb76c; border: 1px solid #dfb76c; padding: 10px; text-decoration: none; border-radius: 3px; font-weight: bold; font-size: 12px; margin-top: auto; transition: all .2s; letter-spacing: 1px; text-transform: uppercase; }
.link:hover { background-color: #dfb76c; color: #000 !important; cursor: pointer; }