/* ========== OVERLAY ========== */
.ss-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.55); z-index:99990; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:ssFadeIn .2s; }
.ss-overlay.active { display:block; }
@keyframes ssFadeIn { from{opacity:0} to{opacity:1} }

/* ========== КОНТЕЙНЕР ========== */
.ss-box { position:fixed; top:8vh; left:50%; transform:translateX(-50%); width:680px; max-width:94vw; max-height:80vh; background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(0,0,0,0.25); z-index:99991; display:flex; flex-direction:column; overflow:hidden; animation:ssSlideDown .25s ease; }
@keyframes ssSlideDown { from{opacity:0;transform:translateX(-50%) translateY(-20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ========== ПОЛЕ ВВОДА ========== */
.ss-input-wrap { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid #eee; gap:12px; }
.ss-input-wrap i.ss-icon { font-size:20px; color:#3498db; flex-shrink:0; }
.ss-input { flex:1; border:none; outline:none; font-size:17px; font-family:inherit; color:#333; background:transparent; }
.ss-input::placeholder { color:#bbb; }
.ss-kbd { font-size:11px; color:#aaa; background:#f5f5f5; padding:3px 8px; border-radius:4px; border:1px solid #e0e0e0; font-family:monospace; flex-shrink:0; }
.ss-close-btn { background:none; border:none; font-size:20px; color:#999; cursor:pointer; padding:4px 8px; border-radius:6px; flex-shrink:0; }
.ss-close-btn:hover { background:#f5f5f5; color:#333; }

/* ========== ФИЛЬТРЫ ========== */
.ss-filters { display:flex; gap:8px; padding:10px 20px; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; align-items:center; background:#fafbfc; }
.ss-filter-label { font-size:12px; color:#999; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-right:4px; }
.ss-filter-input { padding:6px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; font-family:inherit; outline:none; background:#fff; min-width:0; width:120px; transition:border-color .2s; }
.ss-filter-input:focus { border-color:#3498db; }
.ss-filter-select { padding:6px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; font-family:inherit; outline:none; background:#fff; cursor:pointer; transition:border-color .2s; max-width:150px; }
.ss-filter-select:focus { border-color:#3498db; }
.ss-filter-clear { background:none; border:1px solid #e74c3c; color:#e74c3c; padding:5px 10px; border-radius:6px; font-size:12px; cursor:pointer; font-weight:600; transition:.2s; margin-left:auto; }
.ss-filter-clear:hover { background:#e74c3c; color:#fff; }

/* ========== РЕЗУЛЬТАТЫ ========== */
.ss-results { flex:1; overflow-y:auto; padding:8px 0; }
.ss-empty { text-align:center; padding:40px 20px; color:#aaa; font-size:14px; }
.ss-empty i { font-size:40px; display:block; margin-bottom:12px; opacity:.3; }
.ss-hint { padding:10px 20px; font-size:13px; color:#e67e22; background:#fffbf0; border-bottom:1px solid #fde68a; }
.ss-hint b { color:#d35400; }

/* ========== КНИГА ========== */
.ss-book { display:flex; gap:14px; padding:12px 20px; cursor:pointer; transition:background .15s; text-decoration:none !important; color:inherit !important; align-items:center; }
.ss-book:hover, .ss-book.ss-active { background:#f0f7ff; }
.ss-book-cover { width:45px; height:64px; border-radius:6px; background-size:cover; background-position:center; background-color:#eee; flex-shrink:0; }
.ss-book-info { flex:1; min-width:0; }
.ss-book-title { font-weight:700; font-size:14px; color:#2c3e50; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-book-meta { font-size:12px; color:#7f8c8d; margin-top:3px; display:flex; gap:12px; flex-wrap:wrap; }
.ss-book-meta span { display:inline-flex; align-items:center; gap:4px; }
.ss-book-cats { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.ss-book-cat { font-size:10px; background:#edf2f7; color:#4a5568; padding:2px 7px; border-radius:4px; font-weight:600; }

/* ========== XFIELD ПОДСКАЗКА ========== */
.ss-xfield { display:flex; gap:14px; padding:10px 20px; cursor:pointer; transition:background .15s; align-items:center; }
.ss-xfield:hover, .ss-xfield.ss-active { background:#f0fff4; }
.ss-xfield-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ss-xfield-icon.avtor { background:#ebf5fb; color:#2980b9; }
.ss-xfield-icon.reader { background:#fef9e7; color:#f39c12; }
.ss-xfield-icon.serie { background:#f4ecf7; color:#8e44ad; }
.ss-xfield-info { flex:1; }
.ss-xfield-val { font-weight:700; font-size:14px; color:#2c3e50; }
.ss-xfield-label { font-size:12px; color:#95a5a6; }
.ss-xfield-count { font-size:12px; color:#27ae60; font-weight:600; }

/* ========== РАЗДЕЛИТЕЛЬ ========== */
.ss-divider { padding:6px 20px; font-size:11px; color:#999; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; background:#f9f9f9; border-top:1px solid #f0f0f0; }

/* ========== ПАГИНАЦИЯ ========== */
.ss-pagination { display:flex; justify-content:center; gap:6px; padding:15px 20px; border-top:1px solid #eee; }
.ss-page-btn { padding:6px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; cursor:pointer; background:#fff; color:#333; font-weight:600; transition:.15s; }
.ss-page-btn:hover { border-color:#3498db; color:#3498db; }
.ss-page-btn.active { background:#3498db; color:#fff; border-color:#3498db; }

/* ========== FOOTER ========== */
.ss-footer { padding:10px 20px; border-top:1px solid #eee; display:flex; justify-content:space-between; font-size:12px; color:#999; background:#fafbfc; }
.ss-total { font-weight:600; }

/* ========== LOADING ========== */
.ss-loading { text-align:center; padding:30px; }
.ss-loading-spinner { display:inline-block; width:24px; height:24px; border:3px solid #eee; border-top-color:#3498db; border-radius:50%; animation:ssSpin .6s linear infinite; }
@keyframes ssSpin { to{transform:rotate(360deg)} }

/* ========== МОБАЙЛ ========== */
@media(max-width:600px) {
    .ss-box { 
        top: 0; left: 0; right: 0; bottom: 0; 
        transform: none; width: 100%; max-width: 100%; height: 100%; max-height: 100%; 
        border-radius: 0; animation: ssSlideDownMobile .25s ease; 
    }
    @keyframes ssSlideDownMobile { 
        from { opacity: 0; transform: translateY(-20px); } 
        to { opacity: 1; transform: translateY(0); } 
    }
    .ss-input, .ss-filter-input, .ss-filter-select { font-size: 16px; }
    .ss-filters { padding: 12px 15px; }
    .ss-filter-label { width: 100%; margin-bottom: 4px; }
    .ss-filter-input { width: calc(50% - 4px); padding: 8px 12px; }
    .ss-filter-select { max-width: 100%; width: 100%; padding: 8px 12px; }
    .ss-filter-clear { width: 100%; margin-top: 4px; padding: 8px 10px; }
    .ss-input-wrap { padding: 12px 15px; }
    .ss-kbd { display: none; }
}

/* ========== ТЕМНАЯ ТЕМА (Синхронизация с main.tpl) ========== */
html[data-theme="dark"] .ss-box { background: #1e1e20; box-shadow: 0 25px 60px rgba(0,0,0,0.8); }
html[data-theme="dark"] .ss-input-wrap, 
html[data-theme="dark"] .ss-filters, 
html[data-theme="dark"] .ss-footer, 
html[data-theme="dark"] .ss-divider, 
html[data-theme="dark"] .ss-pagination { border-color: #2c2c2e; }
html[data-theme="dark"] .ss-filters, 
html[data-theme="dark"] .ss-footer, 
html[data-theme="dark"] .ss-divider { background: #18181a; color: #888; }
html[data-theme="dark"] .ss-input { color: #fff; }
html[data-theme="dark"] .ss-input::placeholder { color: #666; }
html[data-theme="dark"] .ss-kbd { background: #2c2c2e; border-color: #3a3a3c; color: #aaa; }
html[data-theme="dark"] .ss-close-btn:hover { background: #2c2c2e; color: #fff; }
html[data-theme="dark"] .ss-filter-input, 
html[data-theme="dark"] .ss-filter-select { background: #2c2c2e; border-color: #3a3a3c; color: #eee; }
html[data-theme="dark"] .ss-filter-input:focus, 
html[data-theme="dark"] .ss-filter-select:focus { border-color: #3498db; background: #222; }
html[data-theme="dark"] .ss-book:hover, 
html[data-theme="dark"] .ss-book.ss-active, 
html[data-theme="dark"] .ss-xfield:hover, 
html[data-theme="dark"] .ss-xfield.ss-active { background: #2a2a2d; }
html[data-theme="dark"] .ss-book-title, 
html[data-theme="dark"] .ss-xfield-val { color: #eee; }
html[data-theme="dark"] .ss-book-meta, 
html[data-theme="dark"] .ss-xfield-label { color: #888; }
html[data-theme="dark"] .ss-book-cat { background: #333; color: #aaa; }
html[data-theme="dark"] .ss-xfield-icon.avtor { background: rgba(41, 128, 185, 0.15); color: #5dade2; }
html[data-theme="dark"] .ss-xfield-icon.reader { background: rgba(243, 156, 18, 0.15); color: #f5b041; }
html[data-theme="dark"] .ss-xfield-icon.serie { background: rgba(142, 68, 173, 0.15); color: #af7ac5; }
html[data-theme="dark"] .ss-hint { background: #2c2518; border-color: #5c4011; color: #f39c12; }
html[data-theme="dark"] .ss-hint b { color: #f1c40f; }
html[data-theme="dark"] .ss-page-btn { background: #2c2c2e; border-color: #3a3a3c; color: #eee; }
html[data-theme="dark"] .ss-page-btn:hover, 
html[data-theme="dark"] .ss-page-btn.active { background: #3498db; border-color: #3498db; color: #fff; }

/* ========== ПОПУЛЯРНЫЕ ЗАПРОСЫ И ПОДСВЕТКА ========== */
.ss-trending { padding: 20px; }
.ss-trending-title { font-size: 12px; color: #999; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
.ss-trending-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-trending-tag { background: #f0f0f0; padding: 6px 14px; border-radius: 20px; font-size: 13px; color: #333; cursor: pointer; transition: .2s; border: 1px solid transparent; }
.ss-trending-tag:hover { background: #e0e0e0; border-color: #ccc; transform: translateY(-1px); }
.ss-hl { color: #e74c3c; background: rgba(231, 76, 60, 0.1); padding: 0 2px; border-radius: 3px; font-weight: bold; }

/* Темная тема для новых элементов */
html[data-theme="dark"] .ss-trending-tag { background: #2c2c2e; color: #eee; border-color: #3a3a3c; }
html[data-theme="dark"] .ss-trending-tag:hover { background: #3a3a3c; border-color: #555; }
html[data-theme="dark"] .ss-hl { color: #ff7675; background: rgba(231, 76, 60, 0.25); }

.ss-xfield-img { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; border: 1px solid #eee; }
html[data-theme="dark"] .ss-xfield-img { border-color: #3a3a3c; }