/* =========================================================================
   Smart Tools Suite - PDF Library v2
   Sidebar + document grid + slide-in preview panel, no login required.
   All selectors are namespaced with "spl-" so this never collides with the
   older ".sts-pdflib-*" styles used elsewhere in the plugin.
   ========================================================================= */

.spl-app {
    --spl-blue: #2f6bed;
    --spl-blue-dark: #1b4fd6;
    --spl-blue-soft: #eaf0ff;
    --spl-bg: #f4f6fb;
    --spl-panel: #ffffff;
    --spl-border: #e7e9f2;
    --spl-text: #1e2433;
    --spl-muted: #6b7386;
    --spl-muted-2: #9aa1b3;
    --spl-green: #10b981;
    --spl-green-soft: #e7f9f1;
    --spl-gray-badge: #94a3b8;
    --spl-gray-badge-soft: #f1f3f8;
    --spl-radius: 14px;
    --spl-radius-sm: 10px;
    --spl-shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 8px 24px -12px rgba(20, 24, 40, .12);
    --spl-shadow-lg: 0 24px 48px -20px rgba(20, 24, 40, .28);
    --spl-sidebar-w: 264px;
    --spl-preview-w: 400px;

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--spl-bg);
    color: var(--spl-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid var(--spl-border);
    border-radius: 18px;
    overflow: hidden;
    min-height: 640px;
    box-shadow: var(--spl-shadow);
}

.spl-app.spl-dark {
    --spl-bg: #10131c;
    --spl-panel: #181c28;
    --spl-border: #262c3d;
    --spl-text: #eef0f7;
    --spl-muted: #98a0b6;
    --spl-muted-2: #6b7386;
    --spl-blue-soft: #1b2540;
    --spl-gray-badge-soft: #1f2536;
}

.spl-app * { box-sizing: border-box; }
.spl-app svg { display: block; }
.spl-app button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
.spl-app input { font-family: inherit; }

/* ---------------------------------- Sidebar ---------------------------- */

.spl-sidebar {
    width: var(--spl-sidebar-w);
    flex: 0 0 var(--spl-sidebar-w);
    background: var(--spl-panel);
    border-right: 1px solid var(--spl-border);
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    max-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    z-index: 30;
    transition: transform .25s ease;
}

.spl-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--spl-border);
}

.spl-brand-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--spl-blue), var(--spl-blue-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(47, 107, 237, .55);
}

.spl-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.spl-brand-text strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.spl-brand-text span {
    font-size: 11.5px; color: var(--spl-muted); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal; overflow: hidden;
}

.spl-nav-all {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--spl-radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--spl-text);
    text-align: left;
    margin-bottom: 6px;
}
.spl-nav-all:hover { background: var(--spl-gray-badge-soft); }
.spl-nav-all.spl-active { background: var(--spl-blue); color: #fff; box-shadow: 0 8px 16px -8px rgba(47,107,237,.6); }
.spl-nav-all svg { width: 17px; height: 17px; flex: none; }

.spl-nav-heading {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--spl-muted-2);
    padding: 14px 12px 8px;
}

.spl-nav-categories { display: flex; flex-direction: column; gap: 2px; }

.spl-nav-cat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: var(--spl-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--spl-text);
    text-align: left;
}
.spl-nav-cat:hover { background: var(--spl-gray-badge-soft); }
.spl-nav-cat.spl-active { background: var(--spl-blue-soft); color: var(--spl-blue-dark); }

.spl-nav-cat-icon {
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--spl-cat-color, var(--spl-blue));
    background: color-mix(in srgb, var(--spl-cat-color, var(--spl-blue)) 15%, transparent);
}
.spl-nav-cat-icon svg { width: 14px; height: 14px; }

/* Full category names now wrap onto a second line instead of being cut off
   mid-word with an ellipsis - a long "Government / Banking / Admission"
   style label always stays fully readable. */
.spl-nav-cat-name {
    flex: 1;
    min-width: 0;
    align-self: center;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}
.spl-nav-cat-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--spl-muted);
    background: var(--spl-gray-badge-soft);
    border-radius: 999px;
    padding: 2px 7px;
    flex: none;
    align-self: center;
}
.spl-nav-cat.spl-active .spl-nav-cat-count { background: rgba(47,107,237,.14); color: var(--spl-blue-dark); }

.spl-request-card {
    margin-top: auto;
    padding-top: 18px;
}
.spl-request-card-inner {
    background: var(--spl-blue-soft);
    border: 1px dashed rgba(47,107,237,.35);
    border-radius: var(--spl-radius);
    padding: 14px;
}
.spl-request-title { font-size: 13px; font-weight: 800; margin: 0 0 4px; color: var(--spl-text); }
.spl-request-desc { font-size: 12px; color: var(--spl-muted); margin: 0 0 12px; line-height: 1.4; }
.spl-request-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(47,107,237,.35);
    color: var(--spl-blue-dark);
    font-size: 12.5px;
    font-weight: 700;
}
.spl-request-btn:hover { background: var(--spl-blue); color: #fff; }
@media (max-width: 900px) {
    /* Make sure the open drawer always sits above the theme's own sticky
       header (which can be z-index: 999+ on many themes) - otherwise the
       top of the drawer (brand/logo + "All Documents") gets visually cut
       off, hidden behind the theme header, even though the drawer itself
       is rendering correctly. */
    .spl-app.spl-sidebar-open .spl-sidebar { z-index: 999997 !important; }
    .spl-app.spl-sidebar-open .spl-sidebar-overlay { z-index: 999996 !important; }
}

.spl-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,18,28,.5);
    z-index: 25;
}

.spl-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 13px 14px;
    background: var(--spl-blue-soft);
    border-bottom: 1px solid var(--spl-border);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--spl-blue-dark);
    position: relative;
}
.spl-mobile-toggle svg { width: 18px; height: 18px; flex: none; }
/* Chevron on the right side, flips to point up while the drawer is open -
   gives a clear "this expands/collapses" affordance instead of a plain
   flat bar that doesn't look tappable. */
.spl-mobile-toggle::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: none;
}
.spl-app.spl-sidebar-open .spl-mobile-toggle::after { transform: rotate(-135deg); }
.spl-mobile-toggle:active { background: color-mix(in srgb, var(--spl-blue-soft) 70%, var(--spl-blue) 30%); }

/* ---------------------------------- Main -------------------------------- */

.spl-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--spl-bg);
}

.spl-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: var(--spl-panel);
    border-bottom: 1px solid var(--spl-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.spl-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--spl-bg);
    border: 1px solid var(--spl-border);
    border-radius: 10px;
    padding: 9px 14px;
    max-width: 620px;
}
.spl-search:focus-within { border-color: var(--spl-blue); box-shadow: 0 0 0 3px rgba(47,107,237,.14); }
.spl-search svg { width: 15px; height: 15px; color: var(--spl-muted); flex: none; }
.spl-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    width: 100%;
    color: var(--spl-text);
}
.spl-search input::placeholder { color: var(--spl-muted-2); }

/* Light/dark control, styled as an actual sliding switch (track + knob)
   instead of a single flat icon button - sun/moon stay put at each end of
   the track as a hint, and the knob (with the active icon inside it)
   slides from left to right when dark mode is switched on. */
.spl-theme-toggle {
    width: 50px;
    height: 28px;
    flex: none;
    position: relative;
    padding: 0;
    border: 1px solid var(--spl-border);
    border-radius: 999px;
    background: var(--spl-bg);
    transition: background .2s ease, border-color .2s ease;
}
.spl-theme-toggle:hover { border-color: var(--spl-blue); }
.spl-app.spl-dark .spl-theme-toggle { background: #0c0e16; border-color: #2c3247; }

.spl-theme-track-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    color: var(--spl-muted-2);
    pointer-events: none;
}
.spl-theme-track-icon svg { width: 12px !important; height: 12px !important; }
.spl-theme-track-icon.spl-theme-track-sun { left: 7px; }
.spl-theme-track-icon.spl-theme-track-moon { right: 7px; }

.spl-theme-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px -1px rgba(20, 24, 40, .35);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--spl-blue);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s ease, color .25s ease;
}
.spl-app.spl-dark .spl-theme-knob { transform: translateX(22px); background: #232a3d; color: #ffd166; }
.spl-theme-knob svg { width: 13px; height: 13px; }
.spl-theme-knob .spl-icon-sun { display: none; }
.spl-app.spl-dark .spl-theme-knob .spl-icon-moon { display: none; }
.spl-app.spl-dark .spl-theme-knob .spl-icon-sun { display: flex; }

.spl-content { padding: 20px 22px 90px; flex: 1; }

.spl-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.spl-content-head-left { display: flex; align-items: center; gap: 10px; }
.spl-content-head-left > svg {
    width: 22px; height: 22px; color: var(--spl-blue); flex: none;
}
.spl-content-head-left h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.spl-content-head-left span { font-size: 12.5px; color: var(--spl-muted); }

.spl-content-head-right { display: flex; align-items: center; gap: 10px; }

.spl-view-toggle {
    display: flex;
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.spl-view-toggle button {
    width: 32px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; color: var(--spl-muted);
}
.spl-view-toggle button svg { width: 15px; height: 15px; }
.spl-view-toggle button.spl-active { background: var(--spl-blue); color: #fff; }

.spl-sort-wrap { position: relative; }
.spl-sort-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--spl-text);
}
.spl-sort-btn:hover { border-color: var(--spl-blue); color: var(--spl-blue); }
.spl-sort-btn svg { width: 14px; height: 14px; }
.spl-sort-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 10px;
    box-shadow: var(--spl-shadow-lg);
    min-width: 170px;
    padding: 6px;
    z-index: 20;
}
.spl-sort-menu button {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
}
.spl-sort-menu button:hover { background: var(--spl-blue-soft); color: var(--spl-blue-dark); }
.spl-sort-menu button.spl-active { color: var(--spl-blue-dark); font-weight: 800; }

.spl-empty-note {
    text-align: center;
    color: var(--spl-muted);
    font-size: 13.5px;
    padding: 60px 20px;
    background: var(--spl-panel);
    border: 1px dashed var(--spl-border);
    border-radius: var(--spl-radius);
}

/* ---------------------------------- Grid -------------------------------- */

.spl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 14px;
}
.spl-grid.spl-view-list { grid-template-columns: 1fr; }

.spl-card {
    position: relative;
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: var(--spl-radius);
    padding: 11px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    animation: spl-fade-in .35s ease both;
}
.spl-card:hover { box-shadow: var(--spl-shadow-lg); border-color: rgba(47,107,237,.35); transform: translateY(-2px); }
.spl-card[hidden] { display: none !important; }

@keyframes spl-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.spl-grid.spl-view-list .spl-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
}
.spl-grid.spl-view-list .spl-card-thumb { width: 56px; height: 70px; flex: none; margin-bottom: 0; }
.spl-grid.spl-view-list .spl-card-body { flex: 1; }
.spl-grid.spl-view-list .spl-card-actions { flex-direction: row; }
.spl-grid.spl-view-list .spl-fav-btn { position: static; margin-right: 4px; }

.spl-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 999px;
    z-index: 2;
}
.spl-badge-new { background: var(--spl-green-soft); color: var(--spl-green); }
.spl-badge-old { background: var(--spl-gray-badge-soft); color: var(--spl-gray-badge); }

.spl-fav-btn {
    position: absolute;
    top: 10px; left: 10px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--spl-border);
    color: var(--spl-muted-2);
    z-index: 2;
}
.spl-app.spl-dark .spl-fav-btn { background: rgba(24,28,40,.85); }
.spl-fav-btn svg { width: 13px; height: 13px; }
.spl-fav-btn:hover { color: #ef4444; }
.spl-fav-btn.spl-fav-active { color: #ef4444; }
.spl-fav-btn.spl-fav-active svg { fill: #ef4444; }

.spl-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: var(--spl-bg);
    border: 1px solid var(--spl-border);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.spl-card-thumb canvas { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.spl-thumb-fallback { color: var(--spl-muted-2); display: flex; }
.spl-thumb-fallback svg { width: 30px; height: 30px; }
.spl-card-thumb.spl-thumb-loaded .spl-thumb-fallback { display: none; }

.spl-card-body { flex: 1; min-width: 0; }
.spl-card-title {
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spl-card-cat {
    margin: 0;
    font-size: 11.5px;
    color: var(--spl-muted);
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spl-card-size { margin: 2px 0 0; font-size: 11px; color: var(--spl-muted-2); }

.spl-card-actions { display: flex; margin-top: 10px; }
.spl-card-preview {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--spl-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--spl-text);
}
.spl-card-preview:hover { background: var(--spl-blue); border-color: var(--spl-blue); color: #fff; }
.spl-card-preview svg { width: 14px; height: 14px; }
.spl-grid.spl-view-list .spl-card-preview { width: auto; padding: 7px 14px; }

/* ------------------------------ Preview panel ---------------------------- */

/* Soft glass backdrop behind the panel - fades in/out with opacity only
   (no display:none toggling) so it can transition smoothly. */
.spl-preview-overlay {
    position: fixed; inset: 0;
    background: rgba(9, 12, 22, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 999998;
}
.spl-app.spl-preview-open .spl-preview-overlay { opacity: 1; pointer-events: auto; }

/* Fixed to the viewport (not "sticky" inside the app card) so the panel
   always appears in view the instant it opens, even if the page/grid is
   scrolled down - no need to scroll back up to find it. This also stops
   the panel from permanently reserving its width in the grid's flex row
   while closed.
   Slides in from the right + fades, instead of just popping into place,
   for a more modern/native "app drawer" feel. */
.spl-preview {
    width: var(--spl-preview-w);
    background: var(--spl-panel);
    border-left: 1px solid var(--spl-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    /* 100dvh (dynamic viewport height) tracks the *actual* visible area on
       phones, so the panel never gets cut off at the top/bottom as the
       mobile browser's address bar shows/hides. Falls back to 100vh on
       browsers that don't support dvh yet. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 999999;
    box-shadow: -20px 0 60px -20px rgba(10, 14, 26, .45);
    transform: translateX(100%);
    opacity: 0;
    transition: transform .36s cubic-bezier(.19,1,.22,1), opacity .28s ease;
    will-change: transform;
}
.spl-app.spl-preview-open .spl-preview { transform: translateX(0); opacity: 1; }
.spl-preview[hidden] { display: none !important; }
@media (min-width: 901px) {
    .spl-preview { border-radius: 20px 0 0 20px; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .spl-preview, .spl-preview-overlay { transition: none; }
}

.spl-preview-head {
    position: relative;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--spl-border);
    background: var(--spl-panel);
}
/* Thin brand-colour accent line under the header - a small "premium
   product" touch that also doubles as a visual divider. */
.spl-preview-head::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--spl-blue), color-mix(in srgb, var(--spl-blue) 15%, transparent) 85%);
}
.spl-preview-head h3 { margin: 0 0 5px; font-size: 15px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.spl-preview-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--spl-muted); }
.spl-preview-head-meta .spl-preview-badge {
    display: inline-block;
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
    background: var(--spl-green-soft); color: var(--spl-green);
    border-radius: 999px; padding: 2px 7px; margin-right: 6px;
}
.spl-preview-close {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: var(--spl-muted);
    background: var(--spl-gray-badge-soft);
    transition: background .18s ease, color .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.spl-preview-close:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg); }
.spl-app.spl-dark .spl-preview-close:hover { background: rgba(239,68,68,.16); color: #f87171; }
.spl-preview-close svg { width: 15px; height: 15px; }

/* Toolbar re-imagined as three grouped "pills" (page info / zoom / tools)
   floating on a soft track, rather than plain borderless icon buttons. */
.spl-preview-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    background: var(--spl-bg);
    border-bottom: 1px solid var(--spl-border);
    flex-wrap: wrap;
}
.spl-preview-pageinfo {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; color: var(--spl-text);
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 999px;
    padding: 7px 13px;
}
.spl-preview-pageinfo svg { width: 14px; height: 14px; color: var(--spl-blue); }
.spl-preview-zoom {
    display: flex; align-items: center; gap: 2px;
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 999px;
    padding: 3px;
}
.spl-preview-zoom button {
    width: 26px; height: 26px; border-radius: 999px; border: none;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--spl-muted);
    transition: background .16s ease, color .16s ease;
}
.spl-preview-zoom button:hover { background: var(--spl-blue-soft); color: var(--spl-blue-dark); }
.spl-preview-zoom span { font-size: 11.5px; font-weight: 800; color: var(--spl-text); width: 38px; text-align: center; }
.spl-preview-tools {
    display: flex; gap: 4px;
    background: var(--spl-panel);
    border: 1px solid var(--spl-border);
    border-radius: 999px;
    padding: 3px;
}
.spl-preview-tools button {
    width: 32px; height: 32px; border-radius: 999px; border: none;
    display: flex; align-items: center; justify-content: center; color: var(--spl-muted);
    transition: background .16s ease, color .16s ease;
}
.spl-preview-tools button:hover { background: var(--spl-blue-soft); color: var(--spl-blue-dark); }
.spl-preview-tools svg { width: 18px; height: 18px; }

/* Faint dot-grid backdrop behind the rendered page - reads like a design/
   PDF "workspace" canvas rather than a flat grey box. */
.spl-preview-canvas-wrap {
    flex: 1;
    overflow: auto;
    background-color: var(--spl-bg);
    background-image: radial-gradient(color-mix(in srgb, var(--spl-muted-2) 35%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 26px;
    position: relative;
    min-height: 220px;
}
.spl-preview-canvas-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.spl-preview-canvas-wrap::-webkit-scrollbar-track { background: transparent; }
.spl-preview-canvas-wrap::-webkit-scrollbar-thumb { background: var(--spl-border); border-radius: 999px; }
.spl-preview-canvas-wrap canvas {
    /* !important guards: some themes ship a global "img, canvas, video
       { width:100%/min-width:100% }" reset which would otherwise force
       the canvas to always fill the wrapper and make zoom-out invisible. */
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: 0 16px 40px -12px rgba(10, 14, 26, .38), 0 2px 8px -2px rgba(10, 14, 26, .12);
    background: #fff;
    border-radius: 6px;
    animation: spl-page-in .32s cubic-bezier(.19,1,.22,1) both;
}
@keyframes spl-page-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.spl-preview-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: var(--spl-muted); gap: 8px;
}
.spl-preview-loading[hidden] { display: none; }
.spl-preview-loading::before {
    content: ''; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--spl-border); border-top-color: var(--spl-blue);
    animation: spl-spin .8s linear infinite;
}
@keyframes spl-spin { to { transform: rotate(360deg); } }

.spl-preview-thumbs {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    background: var(--spl-bg);
    border-top: 1px solid var(--spl-border);
}
.spl-preview-thumbs::-webkit-scrollbar { height: 7px; }
.spl-preview-thumbs::-webkit-scrollbar-track { background: transparent; }
.spl-preview-thumbs::-webkit-scrollbar-thumb { background: var(--spl-border); border-radius: 999px; }
.spl-preview-thumb {
    flex: none;
    width: 46px; height: 60px;
    border-radius: 8px;
    border: 2px solid var(--spl-border);
    overflow: hidden;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease;
}
.spl-preview-thumb:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--spl-blue) 55%, var(--spl-border)); }
.spl-preview-thumb canvas { width: 100%; height: 100%; object-fit: contain; }
.spl-preview-thumb span {
    position: absolute; bottom: 2px; right: 3px;
    font-size: 8.5px; font-weight: 800; color: var(--spl-muted);
    background: rgba(255,255,255,.85); border-radius: 3px; padding: 0 2px;
}
.spl-preview-thumb.spl-active { border-color: var(--spl-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spl-blue) 22%, transparent); transform: translateY(-1px); }

.spl-preview-actions { display: flex; gap: 10px; padding: 14px 16px 18px; background: var(--spl-panel); }
.spl-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.spl-btn:active { transform: scale(.97); }
.spl-btn svg { width: 17px; height: 17px; }
.spl-btn-outline { border: 1.5px solid var(--spl-border); color: var(--spl-text); background: var(--spl-panel); }
.spl-btn-outline:hover { border-color: var(--spl-blue); color: var(--spl-blue); transform: translateY(-2px); }
.spl-btn-primary { background: linear-gradient(135deg, var(--spl-blue), var(--spl-blue-dark)); color: #fff; border: 1.5px solid transparent; box-shadow: 0 12px 22px -10px rgba(47,107,237,.6); }
.spl-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(47,107,237,.7); }

/* Fullscreen toggle button - highlighted while active so it reads as an
   "exit/minimize" control rather than the original "enter fullscreen" one. */
.spl-preview-tools [data-spl-fullscreen].spl-fs-active { background: var(--spl-blue-soft); color: var(--spl-blue-dark); }

/* Fullscreen mode for the preview panel */
.spl-preview:fullscreen { padding: 0; width: 100%; border-radius: 0; }
.spl-preview:fullscreen .spl-preview-canvas-wrap { min-height: 0; }

/* --------------------------------- Modal --------------------------------- */

.spl-modal { position: fixed; inset: 0; z-index: 9999999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.spl-modal[hidden] { display: none; }
.spl-modal-backdrop { position: absolute; inset: 0; background: rgba(15,18,28,.55); }
.spl-modal-panel {
    position: relative;
    background: var(--spl-panel);
    color: var(--spl-text);
    border-radius: var(--spl-radius);
    padding: 20px;
    width: 100%; max-width: 400px;
    box-shadow: var(--spl-shadow-lg);
}
.spl-modal-panel h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; }
.spl-modal-panel p { margin: 0 0 12px; font-size: 12.5px; color: var(--spl-muted); }
.spl-modal-panel textarea {
    width: 100%; min-height: 90px; resize: vertical;
    border: 1px solid var(--spl-border); border-radius: 9px;
    padding: 10px 12px; font-size: 13px; font-family: inherit;
    background: var(--spl-bg); color: var(--spl-text); margin-bottom: 14px;
}
.spl-modal-actions { display: flex; gap: 10px; }

/* ------------------------------- Stats bar --------------------------------
   Sits right under the search topbar (top of the library), above the
   document grid - was previously a sticky footer at the very bottom. */

.spl-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 22px;
    background: var(--spl-panel);
    border-bottom: 1px solid var(--spl-border);
}
.spl-footer-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.spl-footer-stat { display: flex; align-items: center; gap: 9px; }
.spl-footer-stat svg { width: 16px; height: 16px; color: var(--spl-blue); flex: none; }
.spl-footer-stat strong { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.spl-footer-stat span { display: block; font-size: 10.5px; color: var(--spl-muted); }

.spl-footer-feedback {
    display: flex; align-items: center; gap: 10px;
    background: var(--spl-blue-soft);
    border: 1px solid rgba(47,107,237,.25);
    border-radius: 10px;
    padding: 8px 8px 8px 14px;
}
.spl-footer-feedback > span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--spl-blue-dark); }
.spl-footer-feedback svg { width: 14px; height: 14px; }
.spl-footer-feedback button {
    background: var(--spl-blue); color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 7px 12px; border-radius: 7px;
}
.spl-footer-feedback button:hover { background: var(--spl-blue-dark); }

/* -------------------------------- Toast ---------------------------------- */
.spl-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 12px);
    background: #1e2433;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: var(--spl-shadow-lg);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.spl-toast.spl-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------- Responsive ------------------------------ */

@media (max-width: 1080px) {
    .spl-app { --spl-preview-w: 340px; }
}

@media (max-width: 900px) {
    .spl-app { min-height: 0; border-radius: 12px; }
    .spl-mobile-toggle { display: flex; }
    .spl-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(280px, 84vw);
        flex-basis: min(280px, 84vw);
        transform: translateX(-100%);
        box-shadow: var(--spl-shadow-lg);
        max-height: 100vh;
    }
    .spl-app.spl-sidebar-open .spl-sidebar { transform: translateX(0); }
    .spl-app.spl-sidebar-open .spl-sidebar-overlay { display: block; }

    /* Full-screen on smaller screens instead of a right-hand drawer. */
    .spl-preview { width: 100%; left: 0; }

    /* Replaces the detailed stats row with just the "Menu & Categories"
       bar above it, so mobile doesn't lose vertical space to both. */
    .spl-stats-bar { display: none; }

    .spl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 13px; }
    .spl-topbar { padding: 12px 16px; gap: 10px; }
    .spl-content { padding: 16px 16px 80px; }
    .spl-content-head { margin-bottom: 13px; }
    .spl-content-head-left h2 { font-size: 16.5px; }
}

@media (max-width: 640px) {
    .spl-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 11px; }
    .spl-card { padding: 10px; }
    .spl-content { padding: 14px 12px 80px; }
    .spl-topbar { padding: 11px 12px; }
    .spl-content-head-right { width: 100%; justify-content: space-between; }
    .spl-sort-menu { right: auto; left: 0; }

    /* Preview panel on phones: less wasted padding around the page so the
       PDF itself renders bigger, and noticeably bigger page numbers/zoom/
       print controls so they're easy to read and tap. */
    .spl-preview-canvas-wrap { padding: 10px; }
    .spl-preview-toolbar { padding: 11px 12px; gap: 10px; }
    .spl-preview-head { padding: 14px 12px 10px; }
    .spl-preview-pageinfo { font-size: 13.5px; gap: 7px; }
    .spl-preview-pageinfo svg { width: 16px !important; height: 16px !important; }
    .spl-preview-zoom button { width: 30px; height: 30px; font-size: 16px; }
    .spl-preview-zoom span { font-size: 13px; width: 44px; }
    .spl-preview-tools button { width: 40px; height: 40px; }
    .spl-preview-tools svg { width: 20px !important; height: 20px !important; }
    .spl-preview-thumbs { padding: 14px 12px; gap: 10px; }
    .spl-preview-thumb { width: 56px; height: 74px; border-width: 2px; }
    .spl-preview-thumb span { font-size: 10.5px; padding: 1px 4px; }
    .spl-preview-actions { padding: 14px 12px 18px; gap: 10px; }
    .spl-btn { padding: 15px 14px; font-size: 14.5px; }
    .spl-btn svg { width: 19px !important; height: 19px !important; }

    .spl-grid.spl-view-list .spl-card { flex-wrap: wrap; }
}

/* Small phones - keep a tidy 2-up grid instead of letting auto-fill
   collapse to one oversized column, and stop the two preview action
   buttons ("Print" / "View Full Screen") from squeezing side by side. */
@media (max-width: 420px) {
    .spl-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .spl-card { padding: 9px; }
    .spl-card-title { font-size: 12.5px; }
    .spl-content { padding: 12px 10px 76px; }
    .spl-preview-actions { flex-direction: column; }
    .spl-preview-head h3 { font-size: 14.5px; }
    .spl-preview-toolbar { flex-wrap: wrap; row-gap: 10px; }
    .spl-modal-panel { padding: 16px; }
}


/* =========================================================================
   ICON / BUTTON VISIBILITY ARMOR
   -------------------------------------------------------------------------
   Some active themes / page-builders / security-caching plugins ship
   global resets (e.g. "button svg{...}", "svg{width:100%;height:auto}",
   ".btn, button{color:transparent}" etc., sometimes with their own
   !important) that can blank out icon-only buttons even though this
   plugin's own CSS above is completely correct on its own.
   Everything below is scoped to .spl-app and marked !important so this
   plugin's icons and buttons always render correctly no matter what the
   active theme is doing elsewhere on the page. Matching inline styles
   were also added directly in the PHP markup as a second line of
   defence (inline !important beats external !important).
   ========================================================================= */
/* Some themes/page-builders ship a global flex reset (e.g. a rule that
   sets "flex-wrap: nowrap" on any flex container inside .entry-content)
   that can beat this plugin's own un-!important "flex-wrap: wrap" on
   .spl-app. When that happens the sidebar toggle button, sidebar and
   main content all get forced onto a single flex line, and
   "align-items: stretch" then stretches the toggle button (and the
   sidebar) to match the tallest item in that line - the document grid -
   which can be thousands of pixels tall. That's the "one giant blank
   box on mobile" bug.
   Scoped to the mobile breakpoint only (max-width: 900px) - the desktop
   layout was never affected by this bug and doesn't need any of these
   overrides, they'd only risk disturbing the desktop sidebar+content
   row (which uses flex-basis: 0% on .spl-main on purpose so it shares
   space evenly with the sidebar). */
@media (max-width: 900px) {
    .spl-app { flex-wrap: wrap !important; align-items: stretch !important; }
    .spl-app > .spl-mobile-toggle { flex: 0 0 100% !important; max-width: 100% !important; }
    .spl-app > .spl-sidebar { flex: 0 0 auto !important; }
    .spl-app > main.spl-main { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; }
}
/* .spl-mobile-toggle must only ever show inside that same mobile
   breakpoint - see the inline-style fix below for why this needs
   !important here too. */
@media (min-width: 901px) {
    .spl-app > .spl-mobile-toggle { display: none !important; }
}

.spl-app,
.spl-app * { visibility: visible !important; }

.spl-app svg {
    display: block !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
.spl-app svg path,
.spl-app svg circle,
.spl-app svg rect,
.spl-app svg line,
.spl-app svg polyline,
.spl-app svg polygon {
    opacity: 1 !important;
}
.spl-app svg[fill="none"],
.spl-app svg *[fill="none"] { fill: none !important; }
.spl-app svg *[stroke="currentColor"] { stroke: currentColor !important; }
.spl-app svg *[fill="currentColor"] { fill: currentColor !important; }

.spl-app button,
.spl-app button svg,
.spl-app .spl-brand-icon svg,
.spl-app .spl-nav-cat-icon svg,
.spl-app .spl-thumb-fallback svg,
.spl-app .spl-footer-stat svg,
.spl-app .spl-footer-feedback svg,
.spl-app .spl-content-head-left > svg,
.spl-app .spl-preview-pageinfo svg,
.spl-app .spl-search svg {
    color: inherit !important;
    background: none !important;
}

/* Re-assert every icon's intended size in case a global
   "svg{width:100%;height:auto}" style reset has stretched/collapsed them. */
.spl-app .spl-mobile-toggle svg               { width: 18px !important; height: 18px !important; }
.spl-app .spl-brand-icon svg                  { width: 19px !important; height: 19px !important; }
.spl-app .spl-nav-all svg,
.spl-app .spl-nav-cat-icon svg                { width: 17px !important; height: 17px !important; }
.spl-app .spl-request-btn svg                 { width: 14px !important; height: 14px !important; }
.spl-app .spl-search svg                      { width: 15px !important; height: 15px !important; }
.spl-app .spl-theme-knob svg                  { width: 13px !important; height: 13px !important; }
.spl-app .spl-theme-track-icon svg            { width: 12px !important; height: 12px !important; }
.spl-app .spl-content-head-left > svg         { width: 22px !important; height: 22px !important; }
.spl-app .spl-view-toggle button svg          { width: 15px !important; height: 15px !important; }
.spl-app .spl-sort-btn svg                    { width: 14px !important; height: 14px !important; }
.spl-app .spl-fav-btn svg                     { width: 13px !important; height: 13px !important; }
.spl-app .spl-thumb-fallback svg              { width: 30px !important; height: 30px !important; }
.spl-app .spl-card-preview svg                { width: 14px !important; height: 14px !important; }
.spl-app .spl-preview-close svg               { width: 15px !important; height: 15px !important; }
.spl-app .spl-preview-pageinfo svg            { width: 14px !important; height: 14px !important; }
.spl-app .spl-preview-tools svg               { width: 18px !important; height: 18px !important; }
.spl-app .spl-btn svg                         { width: 17px !important; height: 17px !important; }
.spl-app .spl-footer-stat svg,
.spl-app .spl-footer-feedback svg             { width: 16px !important; height: 16px !important; }

/* Force every icon-bearing button to actually lay itself out (flex + centred),
   even if a theme's own button reset changes display/align on <button>. */
.spl-app .spl-nav-all,
.spl-app .spl-nav-cat,
.spl-app .spl-request-btn,
.spl-app .spl-theme-knob,
.spl-app .spl-theme-track-icon,
.spl-app .spl-view-toggle button,
.spl-app .spl-sort-btn,
.spl-app .spl-fav-btn,
.spl-app .spl-card-preview,
.spl-app .spl-preview-close,
.spl-app .spl-preview-tools button,
.spl-app .spl-preview-zoom button,
.spl-app .spl-btn {
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
}
/* .spl-mobile-toggle needs the same align-items/opacity armor, but its
   display must stay breakpoint-controlled (flex on mobile, none on
   desktop) - see the dedicated @media rules further down, which must be
   able to win the "display" tug-of-war against this block. */
.spl-app .spl-mobile-toggle {
    align-items: center !important;
    opacity: 1 !important;
}

/* The favourite (heart) button's active/filled state must still win over the
   blanket fill:none rule above once the user taps it. */
.spl-app .spl-fav-btn.spl-fav-active svg { fill: #ef4444 !important; }

/* Sort dropdown items and the theme knob's sun/moon swap are block/hidden
   by design - don't let the flex-armor rule above fight that. */
.spl-app .spl-sort-menu button { display: block !important; }
.spl-app .spl-theme-knob .spl-icon-sun { display: none !important; }
.spl-app.spl-dark .spl-theme-knob .spl-icon-moon { display: none !important; }
.spl-app.spl-dark .spl-theme-knob .spl-icon-sun { display: flex !important; }

/* =========================================================================
   LAYOUT ARMOR (mobile)
   -------------------------------------------------------------------------
   Same problem as the icon armor above, but for the container layout
   itself: some themes / page-builders ship a "mobile reset" stylesheet
   that only kicks in under a small-viewport media query (e.g.
   ".elementor-widget-container > div{display:block}" or
   "section,aside,main{overflow:hidden;height:auto}") which can collapse
   or blank out our flex/grid containers ONLY on phones, even though the
   exact same markup is fine on desktop. Re-assert every structural
   display/height rule with !important, scoped to .spl-app, so this
   plugin's layout can never be zeroed out by an outside stylesheet.
   ========================================================================= */
.spl-app {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
}
@media (min-width: 901px) {
    .spl-app { min-height: 640px !important; }
}
.spl-app .spl-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
}
.spl-app .spl-topbar {
    display: flex !important;
    height: auto !important;
}
.spl-app .spl-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
.spl-app .spl-content-head {
    display: flex !important;
    height: auto !important;
}
.spl-app .spl-grid {
    display: grid !important;
    height: auto !important;
    overflow: visible !important;
}
.spl-app .spl-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
}
.spl-app .spl-card-body { display: block !important; }
.spl-app .spl-card-actions { display: flex !important; }
.spl-app .spl-mobile-toggle { width: 100% !important; }
@media (max-width: 900px) {
    .spl-app .spl-mobile-toggle { display: flex !important; }
    .spl-app .spl-sidebar { max-height: 100vh !important; }
}

/* This MUST be the last rule touching .spl-card's display in this file.
   The "LAYOUT ARMOR" block above forces `.spl-app .spl-card{display:flex!important}`
   at equal CSS specificity to the earlier `.spl-card[hidden]{display:none!important}`
   rule - and since both use !important, the one that appears LATER in the
   file wins the tie. That made every category-filter / search result that
   should have been hidden stay visible (the JS was correctly setting the
   `hidden` attribute, it just had no visual effect). Re-asserting it here,
   after the armor block, restores it as the final word. */
.spl-app .spl-card[hidden] { display: none !important; }