/* ═══════════════════════════════════════════════════════════════════════════
   ilovecookbooks.css  —  ilovecookbooks-specific overrides
   ─────────────────────────────────────────────────────────
   base.css provides: reset, typography, nav, header, buttons, tables, cards,
   form inputs, pill labels, sale badge, cart summary, responsive nav.
   This file adds ONLY ilovecookbooks-specific rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Colour tokens (ilovecookbooks only) ──────────────────────────────────── */
:root {
    --ilc-warm: #c27a3a;
    --ilc-warm-hover: #a46530;
}

/* ── Container ────────────────────────────────────────────────────────────── */
.ilc-container {
    width: 98%;
    margin: 0 auto;
    padding: 32px 20px 60px;
    background: #222;
    min-height: 80vh;
}

/* ── Page title bar ───────────────────────────────────────────────────────── */
.ilc-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
    margin-bottom: 28px;
}
.ilc-title-bar h1 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}
.ilc-title-bar p {
    color: #dddbdb;
    font-size: 0.95rem;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.ilc-search-form {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    max-width: 420px;
}
.ilc-search-form input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid #bbb;
    border-radius: 6px 0 0 6px;
    background: #fafafa;
    color: #222;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.ilc-search-form input[type="text"]:focus {
    border-color: var(--bsc-green);
}
.ilc-search-form button {
    padding: 8px 18px;
    background: var(--bsc-green);
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ilc-search-form button:hover { background: var(--bsc-green-hover); }

/* ── Cookbook grid ─────────────────────────────────────────────────────────── */
.ilc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.ilc-card {
    background: #fff;
    border: var(--bsc-card-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.ilc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.ilc-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--bsc-table-header);
}
.ilc-card-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2d5a3d 0%, #1a3a28 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ilc-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ilc-card-body h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #222;
}
.ilc-card-body p {
    font-size: 0.88rem;
    color: #666;
    margin-bottom: 8px;
    flex: 1;
}
.ilc-card-meta {
    font-size: 0.82rem;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ilc-badge {
    background: var(--bsc-green);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.ilc-badge-private {
    background: var(--ilc-warm);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ilc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}
.ilc-empty p {
    font-size: 1.1rem;
    margin-bottom: 16px;
}

/* ── Messages & Limits ────────────────────────────────────────────────────── */
.ilc-message {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 16px;
}
.ilc-message-warning {
    background: #3a2f00;
    color: #ffd666;
    border: 1px solid #554400;
}
.ilc-message-success {
    background: #0d3320;
    color: #6ee7a0;
    border: 1px solid #145c2c;
}
.ilc-message-error {
    background: #3a0d0d;
    color: #ff8a8a;
    border: 1px solid #5c1414;
}
.ilc-limits-bar {
    display: flex;
    gap: 24px;
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 14px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ilc-btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--bsc-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    text-align: center;
}
.ilc-btn:hover { background: var(--bsc-green-hover); color: #fff; }

.ilc-btn-outline {
    background: transparent;
    border: 2px solid var(--bsc-green);
    color: var(--bsc-green);
}
.ilc-btn-outline:hover {
    background: var(--bsc-green);
    color: #fff;
}

.ilc-btn-danger {
    background: #c0392b;
}
.ilc-btn-danger:hover { background: #96281b; }

.ilc-btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* ── Form card (create / edit / upload) ───────────────────────────────────── */
.ilc-form-wrapper {
    max-width: 560px;
    margin: 0 auto;
}
.ilc-form-card {
    background: #fff;
    border: var(--bsc-card-border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    padding: 36px 32px 28px;
}
.ilc-form-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bsc-green);
    text-align: center;
    margin-bottom: 24px;
}

.ilc-form { display: flex; flex-direction: column; gap: 18px; }

.ilc-form-field { display: flex; flex-direction: column; gap: 5px; }
.ilc-form-field label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.ilc-input,
.ilc-textarea {
    padding: 10px 12px;
    border: 1.5px solid #bbb;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fafafa;
    width: 100%;
}
.ilc-input:focus,
.ilc-textarea:focus {
    outline: none;
    border-color: var(--bsc-green);
    box-shadow: 0 0 0 3px rgba(33,115,70,.15);
    background: #fff;
}
.ilc-textarea { resize: vertical; }

.ilc-file-input {
    padding: 8px;
    border: 1.5px dashed #bbb;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    width: 100%;
}
.ilc-file-input:hover { border-color: var(--bsc-green); }

.ilc-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ilc-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--bsc-green);
}

/* Django form rendering helpers */
.ilc-form p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.ilc-form p label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}
.ilc-form p input[type="text"],
.ilc-form p input[type="number"],
.ilc-form p textarea {
    padding: 10px 12px;
    border: 1.5px solid #bbb;
    border-radius: 6px;
    font-size: 1rem;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ilc-form p input:focus,
.ilc-form p textarea:focus {
    outline: none;
    border-color: var(--bsc-green);
    box-shadow: 0 0 0 3px rgba(33,115,70,.15);
    background: #fff;
}
.ilc-form .helptext {
    font-size: 0.82rem;
    color: #888;
}
.ilc-form .errorlist {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}
.ilc-form .errorlist li {
    color: #721c24;
    font-size: 0.85rem;
    background: #f8d7da;
    padding: 4px 8px;
    border-radius: 4px;
}
.ilc-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ── Cookbook detail ───────────────────────────────────────────────────────── */
.ilc-detail-header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.ilc-detail-cover {
    width: 240px;
    min-width: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bsc-table-header);
    flex-shrink: 0;
}
.ilc-detail-cover img {
    width: 100%;
    display: block;
}
.ilc-detail-cover-placeholder {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #2d5a3d 0%, #1a3a28 100%);
}
.ilc-detail-info {
    flex: 1;
    min-width: 250px;
}
.ilc-detail-info h1 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 8px;
}
.ilc-detail-info .ilc-owner {
    color: #aaa;
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.ilc-detail-info .ilc-desc {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.ilc-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.ilc-action-sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}

/* ── Pages grid ───────────────────────────────────────────────────────────── */
.ilc-pages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 8px;
}
.ilc-pages-header h2 {
    color: #fff;
    font-size: 1.3rem;
}

.ilc-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.ilc-page-card {
    background: #fff;
    border: 2px solid var(--bsc-border-heavy);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    position: relative;
    transition: transform 0.15s;
}
.ilc-page-card:hover { transform: translateY(-2px); }

.ilc-page-card img {
    width: 100%;
    display: block;
    cursor: pointer;
}
.ilc-page-card-footer {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ilc-page-card-footer span {
    font-size: 0.85rem;
    color: #666;
}
.ilc-page-card-footer .ilc-caption {
    font-style: italic;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Delete button overlay on page card */
.ilc-page-delete-form {
    position: absolute;
    top: 6px;
    right: 6px;
}
.ilc-page-delete-btn {
    background: rgba(192, 57, 43, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.ilc-page-card:hover .ilc-page-delete-btn { opacity: 1; }
.ilc-page-delete-btn:hover { background: #96281b; }

/* ── Lightbox (image modal) ───────────────────────────────────────────────── */
.ilc-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    overflow: auto;
}
.ilc-lightbox.active { display: flex; }
.ilc-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
    margin: auto;
}

/* ── Confirm delete page ──────────────────────────────────────────────────── */
.ilc-confirm-card {
    background: #fff;
    border: var(--bsc-card-border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    max-width: 480px;
    margin: 80px auto;
    padding: 36px 32px;
    text-align: center;
}
.ilc-confirm-card h1 {
    color: #c0392b;
    font-size: 1.4rem;
    margin-bottom: 12px;
}
.ilc-confirm-card p {
    color: #555;
    margin-bottom: 24px;
}
.ilc-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.ilc-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.ilc-pagination a,
.ilc-pagination span {
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}
.ilc-pagination a {
    background: #eee;
    color: #222;
    transition: background 0.2s;
}
.ilc-pagination a:hover { background: var(--bsc-green); color: #fff; }
.ilc-pagination .current {
    background: var(--bsc-green);
    color: #fff;
}
.ilc-pagination .disabled {
    color: #aaa;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Touch devices — always show hover-only interactive elements */
@media (hover: none), (pointer: coarse) {
    /* Page delete button — always visible on touch */
    .ilc-page-delete-btn { opacity: 1; }

    /* Quick-add button — always visible on touch */
    .qa-btn { opacity: 1; }
}

/* Tablet */
@media (max-width: 768px) {
    .ilc-detail-header {
        flex-direction: column;
        align-items: center;
    }
    .ilc-detail-cover {
        width: 60%;
        min-width: 200px;
    }
    .ilc-detail-info {
        min-width: 0;
        width: 100%;
    }
    .ilc-detail-info h1 {
        text-align: center;
    }
    .ilc-detail-info .ilc-owner,
    .ilc-detail-info .ilc-desc {
        text-align: center;
    }
    .ilc-detail-actions {
        justify-content: center;
    }
    .ilc-form-card {
        padding: 28px 22px 24px;
    }
    .ilc-pages-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    /* Category headers — scale down for smaller screens */
    .category-header {
        font-size: 1.2em;
        padding: 0.4em 1em;
    }
    .category-header-img {
        width: 36px;
        height: 36px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ilc-container { padding: 16px 10px 40px; }
    .ilc-detail-cover { width: 100%; }
    .ilc-form-card { padding: 20px 14px 18px; }
    .ilc-form-wrapper { max-width: 100%; }
    .ilc-grid { grid-template-columns: 1fr; }
    .ilc-search-row { flex-direction: column; }
    .ilc-search-row .ilc-form-field { flex: unset !important; width: 100%; }
    .ilc-existing-pages-grid { grid-template-columns: 1fr; }
    .ilc-category-list { gap: 6px; }
    .ilc-pages-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ilc-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ilc-title-bar h1 { font-size: 1.3rem; }
    .ilc-title-bar .ilc-btn { align-self: stretch; text-align: center; }
    .ilc-search-form { max-width: 100%; }
    .ilc-form-actions {
        flex-direction: column;
        gap: 8px;
    }
    .ilc-form-actions .ilc-btn {
        width: 100%;
        text-align: center;
    }
    .ilc-detail-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .ilc-detail-actions .ilc-btn {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }
    .ilc-action-sep { display: none; }
    .ilc-page-card-footer {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .ilc-page-card-footer .ilc-caption {
        max-width: 100%;
    }
    /* Confirm delete card — don't push off-screen on mobile */
    .ilc-confirm-card {
        margin: 24px auto;
        padding: 24px 16px;
    }
    .ilc-confirm-actions {
        flex-direction: column;
        gap: 8px;
    }
    .ilc-confirm-actions .ilc-btn {
        width: 100%;
        text-align: center;
    }
    /* Page delete button & quick-add — larger touch targets */
    .ilc-page-delete-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        opacity: 1;
    }
    .qa-btn {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
        opacity: 1;
    }
    /* Category headers on mobile */
    .category-header {
        font-size: 1em;
        padding: 0.4em 0.8em;
        gap: 8px;
    }
    .category-header-img {
        width: 32px;
        height: 32px;
    }
    .toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }
    /* Product grid in collapsed sections — tighter on mobile */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .ilc-grid-card img,
    .ilc-grid-card .ilc-card-placeholder {
        height: 140px;
    }
    /* Pagination touch targets */
    .ilc-pagination a,
    .ilc-pagination span {
        padding: 10px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Search card */
    .ilc-search-card {
        padding: 16px;
    }
    /* Badges readable on mobile */
    .ilc-badge {
        font-size: 0.72rem;
        padding: 3px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW — Dynamic Categories, Lookup Links, Search Card, Add Existing Pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section title ────────────────────────────────────────────────────────── */
.ilc-section-title {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

/* ── Category chips ───────────────────────────────────────────────────────── */
.ilc-categories {
    margin-bottom: 28px;
}
.ilc-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.ilc-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #444;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1.5px solid #444;
    transition: all 0.2s;
    text-decoration: none;
}
.ilc-category-chip:hover {
    background: #e0e0e0;
    color: #222;
    border-color: var(--bsc-green);
}
.ilc-category-chip.active {
    background: var(--bsc-green);
    color: #fff;
    border-color: var(--bsc-green);
}
.ilc-chip-count {
    background: rgba(255,255,255,.15);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.78rem;
}

/* ── Lookup groups ────────────────────────────────────────────────────────── */
.ilc-lookup-group {
    margin-bottom: 14px;
}
.ilc-lookup-group h3 {
    color: #666;
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ilc-lookup-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ilc-lookup-link {
    padding: 5px 14px;
    border-radius: 6px;
    background: #f0f0f0;
    color: var(--bsc-green);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #ddd;
    transition: all 0.2s;
    text-decoration: none;
}
.ilc-lookup-link:hover {
    background: var(--bsc-green);
    color: #fff;
    border-color: var(--bsc-green);
}

/* ── Search card (search page) ────────────────────────────────────────────── */
.ilc-search-card {
    background: #f7f7f7;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 28px;
}
.ilc-search-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ilc-search-card .ilc-form-field label {
    color: #333;
}
.ilc-search-card .ilc-input,
.ilc-search-card .ilc-select {
    background: #fff;
    border-color: #bbb;
    color: #222;
}
.ilc-search-card .ilc-input:focus,
.ilc-search-card .ilc-select:focus {
    border-color: var(--bsc-green);
    box-shadow: 0 0 0 3px rgba(33,115,70,.25);
    background: #fff;
}
.ilc-search-card .helptext {
    color: #888;
}

/* ── Search field flex sizing ──────────────────────────────────────────────── */
.ilc-search-field-q { flex: 2; }
.ilc-search-field-cat { flex: 1; }

/* ── Select (dropdown) base styling ───────────────────────────────────────── */
.ilc-select {
    padding: 10px 12px;
    border: 1.5px solid #bbb;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fafafa;
    width: 100%;
    cursor: pointer;
}
.ilc-select:focus {
    outline: none;
    border-color: var(--bsc-green);
    box-shadow: 0 0 0 3px rgba(33,115,70,.15);
    background: #fff;
}

/* ── Result count ─────────────────────────────────────────────────────────── */
.ilc-result-count {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ── Form subtitle ────────────────────────────────────────────────────────── */
.ilc-form-subtitle {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* ── Existing pages grid (add existing pages) ─────────────────────────────── */
.ilc-existing-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.ilc-existing-page-card {
    background: #f8f8f8;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.ilc-existing-page-card:hover {
    border-color: var(--bsc-green);
    box-shadow: 0 2px 8px rgba(33,115,70,.2);
}
.ilc-existing-page-card input[type="checkbox"] {
    position: absolute;
    margin: 8px;
    z-index: 2;
}
.ilc-existing-page-card input[type="checkbox"]:checked + img {
    opacity: 0.7;
}
.ilc-existing-page-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: opacity 0.2s;
}
.ilc-existing-page-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ilc-existing-page-info strong {
    font-size: 0.82rem;
    color: #333;
}
.ilc-existing-page-info span {
    font-size: 0.78rem;
    color: #666;
}
.ilc-existing-page-info .ilc-caption {
    font-style: italic;
    color: #999;
}


/* ══════════════════════════════════════════════════════════════════════════
   Collapsible Category Sections (mirrors storeFront categoryContainers.css)
   ══════════════════════════════════════════════════════════════════════════ */

.categories-container {
    width: 100%;
    margin: 20px auto;
    background: transparent;
    box-sizing: border-box;
}

/* ── Category header row (always visible) ── */
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto 0 auto;
    background: #fff;
    color: #222;
    text-decoration: none;
    text-wrap: wrap;
    border: var(--bsc-card-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 0.5em 1.2em;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.category-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.category-header-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--bsc-border-heavy);
}

/* ── Toggle +/− button ── */
.toggle-btn {
    background: var(--bsc-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.toggle-btn:hover {
    background: var(--bsc-green-hover);
}

/* ── Collapsible content container ── */
.category-content-container {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto 20px auto !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: fit-content;
    padding: 5px;
    background: rgba(0,0,0,.15);
    color: white;
    border-radius: 0 0 12px 12px;
    border-top: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}
.category-content-collapsed {
    display: none !important;
}

/* ── Inner layout (sidebar + right panel) ── */
.category-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}

/* ── Subcategory / lookup sidebar ── */
.subcategory-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 20%;
    min-width: 180px;
    padding: 10px;
}
.subcategory {
    background-color: rgba(255, 255, 255, 0.82);
    border: var(--bsc-card-border);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
.subcategory h2 {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px 0;
    color: black;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1.1em;
}
.product-list {
    padding-left: 24px;
    margin-top: 8px;
    list-style-type: disc;
}
.product-list li {
    list-style-type: disc;
    margin-bottom: 6px;
    color: #222;
}
.product-list a,
.lookup-link {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    text-decoration: underline;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    color: #0066cc;
}
.product-list a:hover,
.lookup-link:hover {
    background: transparent;
    color: #004499;
    text-decoration: underline;
}
.lookup-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

/* ── Right panel & cookbook grid ── */
.right-panel {
    flex: 1 1 600px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

/* ── Grid cards (cookbook items inside collapsible sections) ── */
.ilc-grid-card {
    background: #fff;
    border: var(--bsc-card-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.ilc-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.ilc-grid-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.ilc-grid-card h3 {
    font-size: 0.95rem;
    padding: 8px 10px 2px;
    color: #222;
    margin: 0;
}
.ilc-grid-card p {
    font-size: 0.82rem;
    color: #555;
    padding: 0 10px 6px;
    margin: 0;
}
.ilc-grid-card .ilc-card-meta {
    padding: 4px 10px 8px;
    font-size: 0.75rem;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ilc-grid-card .ilc-card-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #2d5a3d 0%, #1a3a28 100%);
}
.ilc-empty-section {
    color: #ccc;
    font-style: italic;
    padding: 20px;
}

/* ── Responsive: sidebar goes horizontal on narrow screens ── */
@media (max-width: 950px) {
    .subcategory-links {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin-right: 0;
        justify-content: flex-start;
    }
    .subcategory {
        flex: 0 1 auto;
        width: auto;
        min-width: 150px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cookbook Detail — Inline Reader + Quick-Add
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline reader ────────────────────────────────────────────────────────── */
.dr-section {
    margin-bottom: 28px;
}
.dr-viewport {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    background: #f5f5f5;
    border: var(--bsc-card-border);
    border-radius: var(--bsc-radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.dr-viewport img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

/* Nav arrows */
.dr-prev, .dr-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.35); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.3rem; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s, background .2s;
}
.dr-viewport:hover .dr-prev,
.dr-viewport:hover .dr-next { opacity: 1; }
.dr-prev { left: 12px; }
.dr-next { right: 12px; }
.dr-prev:hover, .dr-next:hover { background: var(--bsc-green); }
.dr-prev:disabled, .dr-next:disabled { opacity: .15 !important; cursor: default; pointer-events: none; }

/* Counter bar */
.dr-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 10px 0;
}
.dr-counter { color: #999; font-size: .9rem; font-weight: 600; }

/* ── Page grid thumbnails — active ring ───────────────────────────────────── */
.ilc-page-card.dr-active {
    box-shadow: 0 0 0 3px var(--bsc-green);
}

/* ── Quick-add overlay button ─────────────────────────────────────────────── */
.qa-btn {
    position: absolute; top: 6px; left: 6px;
    background: var(--bsc-green); color: #fff;
    border: none; border-radius: 50%;
    width: 30px; height: 30px; font-size: 1.2rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s, background .2s;
    z-index: 4;
}
.ilc-page-card:hover .qa-btn { opacity: 1; }
.qa-btn:hover { background: var(--bsc-green-hover); }

/* ── Quick-add popup ──────────────────────────────────────────────────────── */
.qa-popup {
    display: none; position: absolute; top: 40px; left: 6px; z-index: 10;
    background: var(--bsc-chrome-mid, #2b2b2b); border: 1px solid #444;
    border-radius: var(--bsc-radius); padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.5); min-width: 200px;
}
.qa-popup.open { display: block; }
.qa-popup select {
    width: 100%; padding: 6px 8px; margin-bottom: 8px;
    background: #383838; color: #fff; border: 1px solid #555;
    border-radius: 4px; font-size: .85rem;
}
.qa-popup button {
    width: 100%; padding: 6px 0; background: var(--bsc-green); color: #fff;
    border: none; border-radius: 4px; font-weight: 600; cursor: pointer;
    font-size: .85rem; transition: background .2s;
}
.qa-popup button:hover { background: var(--bsc-green-hover); }
.qa-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--bsc-green); color: #fff; padding: 10px 24px;
    border-radius: var(--bsc-radius); font-weight: 600; z-index: 9999;
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.qa-toast.show { opacity: 1; }

/* Detail reader — touch devices */
@media (hover: none), (pointer: coarse) {
    .dr-prev, .dr-next { opacity: 0.7; }
    .dr-prev:disabled, .dr-next:disabled { opacity: .15 !important; }
    .qa-btn { opacity: 1; }
}

/* Detail reader — mobile */
@media (max-width: 600px) {
    .dr-viewport { aspect-ratio: 2 / 3; }
    .dr-prev, .dr-next {
        width: 40px; height: 40px; font-size: 1.2rem;
        opacity: 0.8;
    }
    .dr-prev { left: 6px; }
    .dr-next { right: 6px; }
    .qa-popup {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0;
        border-radius: var(--bsc-radius) var(--bsc-radius) 0 0;
        min-width: 100%; padding: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,.6);
    }
    .qa-popup select { padding: 10px 12px; font-size: 1rem; }
    .qa-popup button { padding: 12px 0; font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cookbooks FAQ (ilovecookbooks)
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}
.faq-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 32px;
    text-align: center;
}
.faq-item {
    background: var(--bsc-chrome-mid, #2b2b2b);
    border-radius: var(--bsc-radius);
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #444;
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    background: none;
    border: none;
    color: #eee;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}
.faq-question:hover {
    background: rgba(255, 255, 255, 0.04);
}
.faq-chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: #888;
}
.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
    max-height: 600px;
}
.faq-answer-inner {
    padding: 0 20px 16px;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}
.faq-empty {
    text-align: center;
    color: #888;
    padding: 40px 0;
    font-size: 1rem;
}

@media (max-width: 600px) {
    .faq-container { padding: 20px 10px; }
    .faq-heading { font-size: 1.4rem; margin-bottom: 20px; }
    .faq-question {
        padding: 14px 14px;
        font-size: 0.95rem;
        min-height: 48px;
    }
    .faq-answer-inner { padding: 0 14px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Add Existing Pages
   ═══════════════════════════════════════════════════════════════════════════ */

.ap-container-override { background: var(--bsc-bg); min-height: 80vh; }

.ap-wrapper { max-width: 900px; margin: 0 auto; padding: 30px 20px 60px; }
.ap-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem; font-weight: 700; color: #fff;
    margin: 0 0 6px; text-align: center;
}
.ap-subtitle { color: #999; text-align: center; margin-bottom: 24px; font-size: 0.95rem; }

/* ── Target book selector ── */
.ap-target { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.ap-target label { color: #ccc; font-weight: 600; white-space: nowrap; }
.ap-target select {
    flex: 1; min-width: 200px; padding: 8px 12px;
    background: var(--bsc-chrome-mid); color: #fff; border: 1px solid #444;
    border-radius: var(--bsc-radius); font-size: 0.95rem;
}

/* ── Search bar ── */
.ap-search-row { display: flex; gap: 8px; margin-bottom: 24px; }
.ap-search-input {
    flex: 1; padding: 10px 14px;
    background: var(--bsc-chrome-mid); color: #fff; border: 1px solid #444;
    border-radius: var(--bsc-radius); font-size: 1rem;
}
.ap-search-input::placeholder { color: #777; }
.ap-search-btn {
    padding: 10px 20px; background: var(--bsc-green); color: #fff;
    border: none; border-radius: var(--bsc-radius); font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.ap-search-btn:hover { background: var(--bsc-green-hover); }

/* ── Results area ── */
.ap-results-msg { color: #999; text-align: center; padding: 30px 0; }
.ap-book {
    background: var(--bsc-chrome-mid); border-radius: var(--bsc-radius);
    margin-bottom: 12px; overflow: hidden;
}
.ap-book-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    cursor: pointer; transition: background 0.2s; user-select: none;
}
.ap-book-header:hover { background: rgba(255,255,255,0.04); }
.ap-book-cover {
    width: 48px; height: 64px; object-fit: cover; border-radius: 4px;
    background: #333; flex-shrink: 0;
}
.ap-book-meta { flex: 1; min-width: 0; }
.ap-book-title { color: #fff; font-weight: 600; font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-book-owner { color: #888; font-size: 0.85rem; }
.ap-book-pages-count { color: #888; font-size: 0.85rem; }
.ap-chevron {
    color: #888; font-size: 0.8rem; transition: transform 0.3s ease; flex-shrink: 0;
}
.ap-book.open .ap-chevron { transform: rotate(180deg); }

/* ── Pages grid (inside expanded book) ── */
.ap-pages-wrap {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
}
.ap-book.open .ap-pages-wrap { max-height: 4000px; }
.ap-pages-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; padding: 0 16px 16px;
}
.ap-page-card {
    position: relative; background: #333; border-radius: 6px;
    overflow: hidden; cursor: pointer; transition: box-shadow 0.2s, transform 0.15s;
}
.ap-page-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.ap-page-card.selected { box-shadow: 0 0 0 3px var(--bsc-green); }
.ap-page-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.ap-page-info { padding: 6px 8px; }
.ap-page-info span { display: block; color: #ccc; font-size: 0.8rem; }
.ap-page-info .ap-caption { color: #888; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-page-check {
    position: absolute; top: 6px; left: 6px;
    width: 20px; height: 20px; border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 14px; font-weight: 700;
    transition: all 0.15s;
}
.ap-page-card.selected .ap-page-check {
    background: var(--bsc-green); border-color: var(--bsc-green); color: #fff;
}

/* ── Bottom bar ── */
.ap-bottom-bar {
    position: sticky; bottom: 0; background: var(--bsc-chrome);
    padding: 14px 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    border-top: 1px solid #333; margin-top: 24px; border-radius: var(--bsc-radius);
}
.ap-selected-count { color: #ccc; font-size: 0.95rem; }
.ap-submit-btn {
    padding: 10px 24px; background: var(--bsc-green); color: #fff;
    border: none; border-radius: var(--bsc-radius); font-weight: 600;
    cursor: pointer; font-size: 1rem; transition: background 0.2s;
}
.ap-submit-btn:hover { background: var(--bsc-green-hover); }
.ap-submit-btn:disabled { opacity: 0.4; cursor: default; }
.ap-cancel-link { color: #999; text-decoration: none; font-size: 0.9rem; }
.ap-cancel-link:hover { color: #fff; }

/* ── Preview lightbox ── */
.ap-preview-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity 0.25s ease;
    pointer-events: none;
    overflow: auto;
}
.ap-preview-overlay.visible { opacity: 1; pointer-events: auto; }
.ap-preview-box {
    position: relative; max-width: 90vw;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin: auto; padding: 20px 0;
}
.ap-preview-box img {
    max-width: 100%; max-height: 75vh; object-fit: contain;
    border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.ap-preview-caption {
    color: #ccc; font-size: 0.95rem; text-align: center; max-width: 500px;
}
.ap-preview-actions {
    display: flex; gap: 10px;
    position: sticky; bottom: 0;
    background: rgba(0,0,0,0.85); padding: 12px 0;
    z-index: 1;
}
.ap-preview-select {
    padding: 8px 22px; background: var(--bsc-green); color: #fff;
    border: none; border-radius: var(--bsc-radius); font-weight: 600;
    cursor: pointer; font-size: 0.95rem; transition: background 0.2s;
}
.ap-preview-select:hover { background: var(--bsc-green-hover); }
.ap-preview-select.is-selected { background: #b33; }
.ap-preview-select.is-selected:hover { background: #c44; }
.ap-preview-close {
    padding: 8px 18px; background: rgba(255,255,255,0.1); color: #ccc;
    border: 1px solid #555; border-radius: var(--bsc-radius);
    cursor: pointer; font-size: 0.95rem; transition: background 0.2s;
}
.ap-preview-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Add existing pages — mobile */
@media (max-width: 600px) {
    .ap-wrapper { padding: 16px 10px 80px; }
    .ap-heading { font-size: 1.3rem; }
    .ap-search-row { flex-direction: column; gap: 8px; }
    .ap-search-input { font-size: 1rem; }
    .ap-search-btn { width: 100%; padding: 12px 20px; }
    .ap-target { flex-direction: column; align-items: stretch; }
    .ap-target select { min-width: 0; width: 100%; font-size: 1rem; padding: 10px 12px; }
    .ap-pages-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px; padding: 0 10px 12px;
    }
    .ap-book-header { padding: 10px 12px; }
    .ap-book-title { font-size: 0.9rem; }
    .ap-bottom-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
        justify-content: center;
    }
    .ap-submit-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
    }
    .ap-preview-box { max-width: 96vw; padding: 10px 0; }
    .ap-preview-box img { max-height: 60vh; }
    .ap-preview-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
        width: 100%;
    }
    .ap-preview-select,
    .ap-preview-close {
        width: 100%;
        text-align: center;
        padding: 12px 0;
        font-size: 1rem;
    }
    .ap-page-check {
        width: 24px; height: 24px;
        border-radius: 5px; font-size: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INSPECT PAGE  — full-size single-page view
   ═══════════════════════════════════════════════════════════════════════════ */

.inspect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}

.inspect-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.inspect-back,
.dr-inspect-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #444;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1.5px solid #444;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.inspect-back:hover,
.dr-inspect-link:hover {
    background: #e0e0e0;
    color: #222;
    border-color: var(--bsc-green);
    text-decoration: none;
}

.inspect-label {
    color: #ccc;
    font-size: 0.95rem;
    text-align: right;
}

.inspect-viewport {
    width: 100%;
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    position: relative;
}

.inspect-img {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: none;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ── dr-bar inspect link (chip style shared above with .inspect-back) ── */
.dr-inspect-link {
    margin-left: 12px;
}

/* ── Inspect page — add-to-book dialog ── */
.inspect-add-trigger {
    width: 100%;
    margin-top: 14px;
    text-align: center;
}
.inspect-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}
.inspect-dialog-overlay.open {
    display: flex;
}
.inspect-dialog {
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.inspect-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #444;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}
.inspect-dialog-close {
    background: none;
    border: none;
    color: #999;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.inspect-dialog-close:hover { color: #fff; }
.inspect-dialog-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inspect-dialog-body label {
    color: #ccc;
    font-weight: 600;
    font-size: 0.9rem;
}
.inspect-dialog-body select {
    width: 100%;
    padding: 8px 12px;
    background: #383838;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 0.9rem;
}
.inspect-dialog-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 8px 0;
}
.inspect-create-link {
    text-align: center;
    text-decoration: none;
    justify-content: center;
}
.inspect-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #444;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1.5px solid #444;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
}
.inspect-add-btn:hover {
    background: #e0e0e0;
    color: #222;
    border-color: var(--bsc-green);
}
.inspect-add-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 600px) {
    .inspect-container { padding: 6px; }
    .inspect-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .inspect-label { text-align: left; }
    .inspect-img {
        width: 125%;
        min-width: 125%;
        max-width: none;
        height: auto;
        margin: 0;
    }
    .inspect-viewport {
        overflow-x: scroll;
    }
    .inspect-back,
    .dr-inspect-link {
        padding: 6px 12px;
        font-size: 0.82rem;
    }
}