:root {
    --bg-color: #202124;
    --text-color: #EAEAEA;
    --subtle-text: #bdc1c6;
    --search-bar-bg: #303134;
    --accent-color: #8A63D2;
    --link-color: #8AB4F8;
    --font-family: 'Inter', sans-serif;
    --title-font: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    margin: 0;
    overflow: hidden;
}

/* === СТИЛИ СТАРТОВОГО ЭКРАНА И ПЕРЕХОДОВ (без изменений) === */
.view-container { position: absolute; width: 100%; height: 100%; display: flex; opacity: 0; transform: scale(1); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; pointer-events: none; }
.view-container.active { opacity: 1; pointer-events: auto; }
.view-container.exiting { opacity: 0; transform: scale(0.95); }
#home-screen { justify-content: center; align-items: center; }
.center-content { display: flex; flex-direction: column; align-items: center; }
#animated-title { font-family: var(--title-font); font-size: 4.5rem; font-weight: 600; letter-spacing: 1px; margin: 0 0 45px 0; text-transform: none; background: linear-gradient(90deg, #D4A4F2, #8A63D2, #6F73D2, #D4A4F2); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; opacity: 0; animation: gradient-animation 10s linear infinite, fadeInUp 1s ease-out 0.2s forwards; }
@keyframes gradient-animation { from { background-position: 0% center; } to { background-position: -200% center; } }
.search-bar { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease-out 0.4s forwards; }
.info-widgets { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease-out 0.6s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.search-bar { display: flex; align-items: center; background-color: var(--search-bar-bg); border-radius: 60px; height: 72px; width: 80vw; max-width: 1100px; padding: 0 12px 0 32px; box-sizing: border-box; transition: box-shadow 0.3s; }
.icon { width: 28px; height: 28px; fill: var(--subtle-text); cursor: pointer; transition: fill 0.2s, transform 0.2s ease-out; }
.icon:hover { fill: var(--text-color); transform: scale(1.15); }
#home-search-input { flex-grow: 1; background: transparent; border: none; outline: none; color: var(--text-color); font-size: 24px; font-family: inherit; }
#home-search-input::placeholder { color: var(--subtle-text); }
.search-bar-icons { display: flex; gap: 16px; padding: 0 16px; border-left: 1px solid #444; margin-left: 16px; }
.info-widgets { margin-top: 28px; color: var(--subtle-text); font-size: 16px; height: 20px; }

/* === СТРАНИЦА РЕЗУЛЬТАТОВ === */
#results-page { flex-direction: column; overflow-y: auto; }
.results-header { padding: 15px 0; }
.results-content { max-width: 700px; width: 100%; margin: 0 auto; padding: 20px; box-sizing: border-box; transition: max-width 0.4s ease-out, padding 0.4s ease-out; }

/* 
   ==================================================
   ⭐ ВОТ ГЛАВНОЕ ИЗМЕНЕНИЕ: РЕЖИМ FULL-BLEED ⭐
   ==================================================
*/
.results-content.full-bleed {
    max-width: 100%;
    padding: 20px 1vw; /* Небольшие отступы по краям */
}
/* В режиме full-bleed фильтры и статистика остаются по центру */
.results-content.full-bleed .filter-panel,
.results-content.full-bleed #stats-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
/* ================================================ */

#results-search-form.search-bar.small { margin: 0 auto 20px auto; width: 100%; max-width: 700px; height: 48px; background-color: var(--search-bar-bg); border-radius: 50px; padding: 0 6px 0 24px; animation: none; opacity: 1; transform: none; }
#results-search-input { flex-grow: 1; background: transparent; border: none; outline: none; color: var(--text-color); font-size: 16px; }
#results-search-form button { height: 36px; padding: 0 24px; margin-left: 12px; background-color: var(--accent-color); color: white; border: none; border-radius: 50px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s; }
#results-search-form button:hover { background-color: #A078E0; transform: scale(1.05); }

.filter-panel { display: flex; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid #3c4043; margin-bottom: 25px; }
.filter-btn { background: none; border: none; color: var(--subtle-text); font-size: 14px; padding: 10px 0; cursor: pointer; position: relative; }
.filter-btn.active { color: var(--link-color); font-weight: 500; }
.filter-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--link-color); border-radius: 3px; }

/* === СТИЛИ КАРТОЧЕК === */
#stats-container { color: var(--subtle-text); font-size: 0.9rem; margin-bottom: 10px; }
.search-result-card { margin-bottom: 28px; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.search-result-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }

#results-container.image, #results-container.video {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Сделаем карточки чуть шире */
    gap: 15px;
}
.image-item { padding: 0; overflow: hidden; border-radius: 12px; background-color: var(--search-bar-bg); cursor: pointer; }
.image-item img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.image-item:hover img { transform: scale(1.05); }
.image-title { padding: 10px; font-size: 0.8rem; color: var(--subtle-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.video-card { display: flex; flex-direction: column; text-decoration: none; background-color: var(--search-bar-bg); border-radius: 12px; overflow: hidden; }
.video-thumbnail { position: relative; }
.video-thumbnail img { width: 100%; height: 160px; object-fit: cover; display: block; }
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-color: rgba(0,0,0,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.play-icon svg { width: 24px; height: 24px; fill: white; }
.video-info { padding: 12px; }
.video-info h3 { font-size: 0.9rem; color: var(--text-color); margin: 0 0 5px 0; line-height: 1.3; }
.video-info p { font-size: 0.8rem; color: var(--subtle-text); margin: 0; }

.result-header-info { display: flex; align-items: center; margin-bottom: 8px; }
.favicon { width: 28px; height: 28px; border-radius: 50%; margin-right: 12px; object-fit: contain; background-color: rgba(255,255,255,0.1); }
.result-source { display: flex; flex-direction: column; }
.site-name { color: var(--text-color); font-size: 14px; }
.site-url { color: var(--subtle-text); font-size: 12px; }
.result-title { margin-bottom: 8px; }
.result-title a { color: var(--link-color); font-size: 1.25rem; text-decoration: none; font-weight: 400; }
.result-title a:hover { text-decoration: underline; }
.result-snippet { color: #bdc1c6; font-size: 0.9rem; line-height: 1.5; }

#pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 50px; padding: 20px 0; }
#pagination-container button { font-family: var(--title-font); padding: 10px 20px; font-size: 1rem; margin: 0 10px; border-radius: 8px; border: 1px solid #3c4043; background-color: #303134; color: var(--link-color); cursor: pointer; transition: all 0.2s; }
#pagination-container button:hover { background-color: #3c4043; }

/* === СТИЛИ LIGHTBOX === */
.lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease-in-out; }
.lightbox.active { display: flex; opacity: 1; }
.lightbox-content { max-width: 90%; max-height: 90%; animation: zoomIn 0.3s ease-in-out; }
.lightbox-close { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.lightbox-close:hover { color: #bbb; }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }