/* ═══════════════════════════════════════════════════════════════════════════
   Library Service — Modern Blue Theme
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Blue palette ── */
    --wood-dark:    #0d1b2e;
    --wood:         #1e40af;
    --wood-mid:     #2563eb;
    --wood-light:   #60a5fa;
    --wood-pale:    #bfdbfe;
    /* ── Surface colours ── */
    --cream:        #f0f6ff;
    --beige:        #e8f0fe;
    --beige-mid:    #d1e0f9;
    --beige-dark:   #93b4dc;
    /* ── Accent ── */
    --accent:       #6366f1;
    --accent-light: #818cf8;
    /* ── Text ── */
    --text-dark:    #0c1b35;
    --text-mid:     #1e3a6b;
    --text-muted:   #4266a0;
    --text-light:   #6b8fc4;
    /* ── Shadows (blue-tinted) ── */
    --shadow-sm:    0 2px 8px  rgba(13,27,46,.12);
    --shadow-md:    0 4px 20px rgba(13,27,46,.18);
    --shadow-lg:    0 8px 40px rgba(13,27,46,.25);
    /* ── Glow ── */
    --glow-blue:    0 0 18px rgba(37,99,235,.30);
    --glow-accent:  0 0 18px rgba(99,102,241,.25);
    /* ── Shape ── */
    --radius:       10px;
    --radius-lg:    16px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
body {
    background: var(--cream);
    background-image:
        radial-gradient(ellipse 80% 60% at 10% -10%, rgba(37,99,235,.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 90% 110%, rgba(99,102,241,.06) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text-dark);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 15px;
    min-height: 100vh;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
@keyframes navShimmer {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.navbar {
    background: linear-gradient(135deg,
        var(--wood-dark) 0%,
        #162d5c       30%,
        var(--wood)    60%,
        var(--accent)  100%) !important;
    background-size: 300% 300% !important;
    animation: navShimmer 10s ease infinite;
    box-shadow: var(--shadow-md), 0 1px 0 rgba(255,255,255,.06) inset;
    padding: .6rem 1rem;
    border-bottom: 2px solid rgba(96,165,250,.35);
}
.navbar-brand {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.4rem !important;
    font-weight: 700;
    color: var(--wood-pale) !important;
    letter-spacing: .02em;
    text-shadow: 0 0 20px rgba(96,165,250,.5), 0 1px 3px rgba(0,0,0,.4);
    transition: opacity .2s, text-shadow .2s;
}
.navbar-brand:hover {
    opacity: .9;
    text-shadow: 0 0 30px rgba(96,165,250,.8), 0 1px 3px rgba(0,0,0,.4);
}
.navbar-brand .bi { color: var(--wood-pale); }
.navbar .nav-link {
    color: rgba(191,219,254,.85) !important;
    font-weight: 500;
    transition: color .2s, background .2s;
    padding: .4rem .8rem !important;
    border-radius: 6px;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.13);
}
.navbar .btn-outline-light {
    border-color: rgba(191,219,254,.5);
    color: var(--wood-pale);
    font-size: .82rem;
    padding: .3rem .75rem;
    transition: all .2s;
}
.navbar .btn-outline-light:hover {
    background: rgba(255,255,255,.15);
    border-color: var(--wood-pale);
    color: #fff;
}
.navbar-toggler { border-color: rgba(191,219,254,.4); }

/* ─── Main Content ───────────────────────────────────────────────────────── */
#main-content {
    padding: 1.5rem 1rem;
    max-width: 1300px;
    margin: 0 auto;
    animation: fadeIn .35s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Search Panel ────────────────────────────────────────────────────────── */
@keyframes borderGlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.search-panel {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(209,224,249,.8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 0 1px 0 rgba(255,255,255,.8) inset;
    padding: 1.25rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.search-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--wood-dark),
        var(--wood-mid),
        var(--wood-light),
        var(--accent),
        var(--accent-light),
        var(--wood-light),
        var(--wood-dark));
    background-size: 300% 100%;
    animation: borderGlow 4s linear infinite;
}
.search-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255,255,255,.6) 0%, transparent 60%);
    pointer-events: none;
}
.search-panel-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: .95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wood) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .02em;
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.search-panel-title .bi {
    -webkit-text-fill-color: var(--wood-mid);
    color: var(--wood-mid);
}
.search-main-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
}
.search-field-group {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 160px;
    min-width: 130px;
}
.search-field-group.field-wide { flex: 2 1 220px; }
.search-field-group.field-year { flex: 0 1 190px; min-width: 160px; }
.search-field-group label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.search-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 0 0 auto;
    align-self: flex-end;
}
.search-advanced-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    padding-top: .75rem;
    margin-top: .75rem;
    border-top: 1px dashed var(--beige-mid);
}
.search-advanced-toggle {
    font-size: .78rem;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    transition: color .2s;
}
.search-advanced-toggle:hover { color: var(--wood-mid); }
.search-advanced-toggle .toggle-arrow { transition: transform .3s; display: inline-block; }
.search-advanced-toggle.open .toggle-arrow { transform: rotate(180deg); }
.year-range { display: flex; gap: .4rem; align-items: center; }
.year-range .form-control { flex: 1; }
.year-range span { color: var(--text-light); font-size: .8rem; flex-shrink: 0; }

/* ─── Form Controls ──────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: rgba(255,255,255,.9);
    border: 1.5px solid var(--beige-mid);
    border-radius: 8px;
    color: var(--text-dark);
    font-size: .875rem;
    padding: .45rem .75rem;
    transition: border-color .2s, box-shadow .25s, background .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--wood-light);
    box-shadow: 0 0 0 3px rgba(96,165,250,.2), var(--glow-blue);
    outline: none;
    background: #fff;
}
.form-control::placeholder { color: var(--text-light); }
.form-control-sm, .form-select-sm { font-size: .8rem; padding: .32rem .6rem; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-wood {
    background: linear-gradient(135deg, var(--wood) 0%, var(--wood-mid) 50%, var(--accent) 100%);
    background-size: 200% 100%;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem 1.4rem;
    transition: background-position .35s, box-shadow .25s, transform .15s;
    box-shadow: 0 2px 10px rgba(37,99,235,.35);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn-wood::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .4s;
}
.btn-wood:hover {
    background-position: 100% 0;
    color: #fff;
    box-shadow: 0 4px 18px rgba(37,99,235,.5), var(--glow-blue);
    transform: translateY(-1px);
}
.btn-wood:hover::after { transform: translateX(100%); }
.btn-wood:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(37,99,235,.35); }
.btn-wood-sm { padding: .35rem .9rem; font-size: .8rem; }
.btn-wood-outline {
    background: transparent;
    color: var(--wood-mid);
    border: 1.5px solid var(--beige-dark);
    border-radius: 8px;
    font-weight: 500;
    font-size: .8rem;
    padding: .38rem .9rem;
    transition: all .2s;
    white-space: nowrap;
}
.btn-wood-outline:hover {
    background: var(--beige);
    color: var(--wood);
    border-color: var(--wood-light);
    box-shadow: 0 0 0 3px rgba(96,165,250,.12);
}
.btn-primary {
    background: linear-gradient(135deg, var(--wood) 0%, var(--wood-mid) 100%);
    border-color: var(--wood);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--wood-dark) 0%, var(--wood) 100%);
    border-color: var(--wood-dark);
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.3);
}
.btn-primary:active { background: var(--wood-dark); border-color: var(--wood-dark); }
.btn-outline-secondary {
    color: var(--text-mid);
    border-color: var(--beige-dark);
}
.btn-outline-secondary:hover {
    background: var(--beige);
    color: var(--wood);
    border-color: var(--wood-light);
}
.btn-outline-success { color: #166534; border-color: #86efac; }
.btn-outline-success:hover { background: #f0fdf4; color: #14532d; border-color: #4ade80; }

/* ─── Results header ─────────────────────────────────────────────────────── */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.results-count { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.results-count strong { color: var(--wood-mid); }

/* ─── Book Card ──────────────────────────────────────────────────────────── */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(6px) scale(.99); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.book-card {
    background: rgba(255,255,255,.95);
    border: 1px solid var(--beige-mid);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: stretch;
    /* overflow: hidden убран — иначе Bootstrap dropdown обрезается границей карточки */
    position: relative;
    z-index: 0;
    transition: box-shadow .25s, transform .2s, border-color .2s, border-left-color .2s, z-index 0s;
    animation: cardIn .22s ease both;
}
.book-card:hover,
.book-card:has(.dropdown-menu.show) {
    box-shadow: var(--shadow-md), var(--glow-blue);
    transform: translateY(-2px);
    border-color: var(--beige-mid);
    border-left-color: var(--wood-mid);
    z-index: 10;
}
.book-card.card-appear { animation: cardIn .25s ease both; }
.book-card-cover-wrap {
    width: 54px;
    flex-shrink: 0;
    background: linear-gradient(160deg, var(--beige), var(--beige-mid));
    overflow: hidden;
    position: relative;
    border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
}
.book-card-cover {
    width: 54px; height: 100%; min-height: 74px;
    object-fit: cover; display: block;
    transition: transform .3s;
}
.book-card:hover .book-card-cover { transform: scale(1.04); }
.book-card-cover-placeholder {
    width: 54px; height: 100%; min-height: 74px;
    display: flex; align-items: center; justify-content: center;
    color: var(--beige-dark); font-size: 1.3rem;
    background: linear-gradient(160deg, var(--beige), var(--beige-mid));
}
.book-card-body {
    flex: 1; padding: .55rem .7rem; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: .12rem;
}
.book-card-title {
    font-weight: 700; font-size: .875rem; line-height: 1.3;
    color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-card-title a { color: inherit; text-decoration: none; transition: color .15s; }
.book-card-title a:hover { color: var(--wood-mid); }
.book-card-author {
    font-size: .77rem; color: var(--text-mid);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-card-author a { color: inherit; text-decoration: none; }
.book-card-author a:hover { color: var(--wood-mid); text-decoration: underline; }
.book-card-meta {
    display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; margin-top: .08rem;
}
.book-card-series {
    font-size: .72rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: .25rem;
}
.book-card-series a { color: inherit; text-decoration: none; }
.book-card-series a:hover { color: var(--wood-mid); text-decoration: underline; }
.book-card-actions {
    flex-shrink: 0; display: flex; flex-direction: column;
    align-items: stretch; justify-content: center; gap: .25rem;
    padding: .4rem .45rem;
    background: linear-gradient(180deg, var(--cream) 0%, var(--beige) 100%);
    border-left: 1px solid var(--beige-mid);
    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
    min-width: 38px;
    position: relative;
    z-index: 1;
}
.book-card-actions .btn {
    padding: .3rem .35rem;
    font-size: 1rem;
    border-radius: 5px;
    line-height: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-card-actions .btn .bi {
    font-size: 1rem;
    line-height: 1;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge-wood {
    background: var(--beige);
    color: var(--wood);
    border: 1px solid var(--beige-mid);
    font-size: .66rem; font-weight: 600;
    padding: .12rem .4rem; border-radius: 5px;
    text-decoration: none; cursor: pointer; display: inline-block;
    transition: background .15s, box-shadow .15s;
}
.badge-wood:hover {
    background: var(--beige-mid); color: var(--wood-dark); text-decoration: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.badge-ext {
    font-size: .63rem; font-weight: 700;
    padding: .1rem .38rem; border-radius: 4px;
    letter-spacing: .04em; text-transform: uppercase; display: inline-block;
}
.badge-ext-fb2  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-ext-epub { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-ext-pdf  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-ext-other { background: var(--beige); color: var(--text-mid); border: 1px solid var(--beige-mid); }
.badge-lang {
    font-size: .61rem; font-weight: 700;
    padding: .08rem .32rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .06em;
    background: linear-gradient(135deg, var(--wood-light), var(--accent-light));
    color: #fff;
    border: none; display: inline-block;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.badge-year { font-size: .66rem; color: var(--text-light); font-weight: 500; }

/* ─── Book Cover (large) ─────────────────────────────────────────────────── */
.book-cover {
    width: 80px; height: 110px;
    object-fit: cover; border-radius: 6px;
    box-shadow: var(--shadow-md); background: var(--beige); flex-shrink: 0;
}
.book-cover-lg {
    width: 160px; height: 220px;
    object-fit: cover; border-radius: 8px;
    box-shadow: var(--shadow-lg), var(--glow-blue); background: var(--beige); flex-shrink: 0;
}
.book-cover-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--beige-dark); font-size: 2rem;
}

/* ─── Book Detail ─────────────────────────────────────────────────────────── */
.annotation-text { white-space: pre-line; line-height: 1.75; color: var(--text-mid); }
.book-detail-header {
    background: linear-gradient(160deg, #fff 0%, var(--beige) 100%);
    border: 1px solid var(--beige-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden; position: relative;
}
.book-detail-header::before {
    content: ''; display: block; height: 4px;
    background: linear-gradient(90deg,
        var(--wood-dark), var(--wood-mid), var(--wood-light), var(--accent), var(--accent-light));
    background-size: 200% 100%;
    animation: borderGlow 4s linear infinite;
}

/* ─── Series ─────────────────────────────────────────────────────────────── */
.series-book-item { border-left: 3px solid transparent; transition: border-color .15s, background .15s; }
.series-book-item.current-book { border-left-color: var(--wood-mid); background: var(--beige); }
.series-book-item:hover { background: var(--cream); }
.series-no-badge {
    min-width: 2rem; text-align: center;
    background: var(--beige) !important; color: var(--wood) !important;
    border: 1px solid var(--beige-mid); font-weight: 700;
}

/* ─── Cards (general) ────────────────────────────────────────────────────── */
.card { border-radius: var(--radius) !important; border-color: var(--beige-mid) !important; }
.card-header { background: var(--beige) !important; border-bottom-color: var(--beige-mid) !important; }

/* ─── Infinite scroll ─────────────────────────────────────────────────────── */
.scroll-sentinel { height: 1px; }
.load-more-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: .6rem; padding: 1.2rem; color: var(--text-muted); font-size: .85rem;
}
.load-more-spinner .spinner-border {
    width: 1.4rem; height: 1.4rem; border-width: 2px;
    color: var(--wood-light);
}
.all-loaded-msg {
    text-align: center; color: var(--text-light); font-size: .78rem;
    padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.all-loaded-msg::before, .all-loaded-msg::after {
    content: ''; display: inline-block; height: 1px; width: 50px;
    background: linear-gradient(90deg, transparent, var(--beige-dark));
}
.all-loaded-msg::after { background: linear-gradient(90deg, var(--beige-dark), transparent); }

/* ─── Results grid ───────────────────────────────────────────────────────── */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: .5rem;
}

/* ─── Empty / Error ──────────────────────────────────────────────────────── */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon {
    font-size: 3rem; opacity: .3; margin-bottom: .6rem;
    color: var(--wood-light); display: block;
    animation: floatIcon 3s ease-in-out infinite;
}
.empty-state p { font-size: .9rem; margin: 0; }

/* ─── Skeleton ───────────────────────────────────────────────────────────── */
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--beige) 25%, var(--beige-mid) 50%, var(--beige) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.3s infinite;
    border-radius: 4px;
}
.skeleton-card {
    background: #fff; border: 1px solid var(--beige-mid);
    border-radius: var(--radius); padding: .7rem; margin-bottom: .55rem;
    display: flex; gap: .7rem; align-items: center;
}
.skeleton-cover { width: 54px; height: 74px; flex-shrink: 0; border-radius: 4px; }
.skeleton-line { height: 11px; border-radius: 3px; }

/* ─── Upload / Admin ─────────────────────────────────────────────────────── */
.upload-zone {
    border: 2px dashed var(--beige-dark); border-radius: var(--radius);
    padding: 2rem; text-align: center; cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s; background: var(--cream);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--wood-light); background: var(--beige);
    box-shadow: 0 0 0 4px rgba(96,165,250,.12);
}
.admin-section-title {
    font-size: 1rem; font-weight: 700; color: var(--wood);
    border-bottom: 2px solid var(--wood-light); padding-bottom: .3rem; margin-bottom: 1rem;
    font-family: 'Playfair Display', 'Georgia', serif;
}

/* ─── Nav tabs ───────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--beige-mid) !important; }
.nav-tabs .nav-link {
    color: var(--text-muted); border-color: transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 500; padding: .5rem 1rem; transition: color .2s, background .2s;
}
.nav-tabs .nav-link:hover {
    color: var(--wood-mid); background: var(--beige);
    border-color: var(--beige-mid) var(--beige-mid) transparent;
}
.nav-tabs .nav-link.active {
    color: var(--wood-dark); background: var(--cream);
    border-color: var(--beige-mid) var(--beige-mid) var(--cream); font-weight: 700;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast { min-width: 280px; border-radius: var(--radius) !important; border-color: var(--beige-mid) !important; }

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.pagination .page-link { color: var(--wood); border-color: var(--beige-mid); background: #fff; transition: all .15s; }
.pagination .page-link:hover { background: var(--beige); color: var(--wood-dark); border-color: var(--wood-light); }
.pagination .page-item.active .page-link { background: var(--wood-mid); border-color: var(--wood-mid); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--beige-dark); background: var(--cream); }
.pagination-info { font-size: .85rem; color: var(--text-muted); }

/* ─── Genre badge ────────────────────────────────────────────────────────── */
.genre-badge { cursor: pointer; transition: opacity .15s, transform .15s; }
.genre-badge:hover { opacity: .8; text-decoration: none !important; transform: translateY(-1px); }

/* ─── ComboTree ──────────────────────────────────────────────────────────── */
.ct-wrapper { font-size: .875rem; }
.ct-input-box {
    font-size: .875rem; padding: .45rem 1.75rem .45rem .75rem;
    border: 1.5px solid var(--beige-mid); border-radius: 8px;
    background: rgba(255,255,255,.9); color: var(--text-dark);
    transition: border-color .2s, box-shadow .25s; width: 100%;
}
.ct-input-box:focus {
    border-color: var(--wood-light);
    box-shadow: 0 0 0 3px rgba(96,165,250,.2), var(--glow-blue); outline: none;
}
.ct-tree-box {
    max-height: 280px; font-size: .875rem; z-index: 1050;
    border: 1.5px solid var(--beige-mid); border-radius: 8px;
    box-shadow: var(--shadow-md); background: #fff;
}
.ct-tree-box .ct-tree-item span { font-size: .8rem; }

/* ─── Autocomplete ───────────────────────────────────────────────────────── */
.autocomplete-dropdown {
    position: absolute; z-index: 2000; background: #fff;
    border: 1.5px solid var(--beige-mid); border-radius: var(--radius);
    box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto;
}
.autocomplete-item {
    padding: .4rem .8rem; cursor: pointer; font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .1s;
}
.autocomplete-item:hover, .autocomplete-item:focus {
    background: var(--beige); color: var(--wood); outline: none;
}

/* ─── Login ──────────────────────────────────────────────────────────────── */
.login-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--beige-mid) !important;
    box-shadow: var(--shadow-lg) !important; overflow: hidden;
}
.login-card::before {
    content: ''; display: block; height: 4px;
    background: linear-gradient(90deg,
        var(--wood-dark), var(--wood-mid), var(--wood-light), var(--accent), var(--accent-light));
    background-size: 200% 100%;
    animation: borderGlow 4s linear infinite;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.lang-badge { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.clickable { cursor: pointer; }
.text-truncate-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.text-wood { color: var(--wood-mid); }
.bg-beige { background: var(--beige); }
.spinner-border.text-primary { color: var(--wood-light) !important; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--wood-light), var(--accent-light));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wood-mid); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #main-content { padding: 1rem .5rem; }
    .search-panel { padding: 1rem; }
    .search-main-row { flex-direction: column; gap: .5rem; }
    .search-field-group,
    .search-field-group.field-wide,
    .search-field-group.field-year {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
    .search-actions { flex-direction: row; width: 100%; }
    .search-actions .btn { flex: 1; }
    .search-advanced-row { flex-direction: column; }
    .book-card-cover-wrap { width: 46px; }
    .book-card-cover, .book-card-cover-placeholder { width: 46px; min-height: 64px; }
}
@media (max-width: 480px) {
    .book-card-actions { min-width: 34px; padding: .3rem .3rem; }
    .book-card-actions .btn { font-size: .9rem; }
}