/* ==========================================================================
   BookWyrm theme

   Load order: bootstrap.min.css -> app.css -> custom.css -> scoped bundle.
   This file is the single source for BookWyrm styling. Layout shell and nav
   live in Components/Layout/*.razor.css (scoped).

   Sections
     1. Tokens
     2. Base
     3. Shell / nav (pointer only)
     4. Shared components   buttons, forms, cards, alerts, overlay, modal, covers
     5. Dashboard
     6. Collection          grid, book card, book modal, manage modal
     7. Scanner
     8. Manual add
     9. Auth / account
    10. Responsive          every media query, grouped by page
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    --bw-bg: #090f1f;
    --bw-bg-deep: #060a14;
    --bw-surface: #111827;
    --bw-surface-raised: #172033;
    --bw-border: rgba(190, 184, 235, 0.18);
    --bw-line: rgba(190, 184, 235, 0.12);
    --bw-text: #ecdfd2;
    --bw-text-muted: #b9b8c9;
    --bw-accent: #09a1a1;
    --bw-accent-hover: #36c7c7;
    --bw-accent-muted: rgba(9, 161, 161, 0.16);
    --bw-accent-soft: #a2bce0;
    --bw-danger: #d396a6;
    --bw-garnet: #8e3b4f;
    --bw-garnet-hover: #a84a60;
}


/* ==========================================================================
   2. Base
   ========================================================================== */
body {
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(9, 161, 161, 0.09), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(95, 52, 117, 0.14), transparent 60%),
        var(--bw-bg-deep);
    background-attachment: fixed;
    color: var(--bw-text);
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    margin: 2rem auto 0;
    max-width: 900px;
    padding: 1rem;
}

.text-success {
    color: var(--bw-accent-hover) !important;
}


/* ==========================================================================
   3. Shell / nav
   Sidebar, top row and the Blazor error banner are styled by
   Components/Layout/MainLayout.razor.css and NavMenu.razor.css.
   ========================================================================== */


/* ==========================================================================
   4. Shared components
   ========================================================================== */

/* ----- Buttons: one teal primary, quiet outline secondary, garnet danger ----- */
.btn {
    --bs-btn-border-radius: 0.55rem;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-color: #04201f;
    --bs-btn-bg: var(--bw-accent);
    --bs-btn-border-color: var(--bw-accent);
    --bs-btn-hover-color: #04201f;
    --bs-btn-hover-bg: var(--bw-accent-hover);
    --bs-btn-hover-border-color: var(--bw-accent-hover);
    --bs-btn-active-color: #04201f;
    --bs-btn-active-bg: var(--bw-accent-hover);
    --bs-btn-active-border-color: var(--bw-accent-hover);
    --bs-btn-focus-shadow-rgb: 9, 161, 161;
    background-color: var(--bw-accent);
    border-color: var(--bw-accent);
    color: #04201f;
}

.btn-primary:hover {
    background-color: var(--bw-accent-hover);
    border-color: var(--bw-accent-hover);
}

.btn-outline-light {
    --bs-btn-color: var(--bw-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(162, 188, 224, 0.32);
    --bs-btn-hover-color: var(--bw-text);
    --bs-btn-hover-bg: rgba(162, 188, 224, 0.1);
    --bs-btn-hover-border-color: var(--bw-accent-soft);
    --bs-btn-active-color: var(--bw-text);
    --bs-btn-active-bg: rgba(162, 188, 224, 0.16);
    --bs-btn-active-border-color: var(--bw-accent-soft);
    background-color: transparent;
    border-color: rgba(162, 188, 224, 0.32);
    color: var(--bw-text);
}

.btn-outline-light:hover {
    background-color: rgba(162, 188, 224, 0.1);
    border-color: var(--bw-accent-soft);
    color: var(--bw-text);
}

.btn-danger {
    --bs-btn-color: #f3d9df;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(211, 150, 166, 0.45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bw-garnet);
    --bs-btn-hover-border-color: var(--bw-garnet);
    --bs-btn-active-bg: var(--bw-garnet-hover);
    --bs-btn-active-border-color: var(--bw-garnet-hover);
    background-color: transparent;
    border-color: rgba(211, 150, 166, 0.45);
    color: var(--bw-danger);
}

.btn-danger:hover {
    background-color: var(--bw-garnet);
    border-color: var(--bw-garnet);
    color: #fff;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(9, 161, 161, 0.35);
}

/* Button attached to an input (manual ISBN, add editor/viewer) */
.input-group .btn {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* ----- Forms ----- */
.form-control,
.form-select {
    background-color: var(--bw-surface-raised);
    border: 1px solid var(--bw-border);
    border-radius: 0.55rem;
    color: var(--bw-text);
}

.form-control {
    padding: 0.5rem;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23a2bce0%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bw-surface-raised);
    border-color: var(--bw-accent);
    box-shadow: 0 0 0 0.2rem rgba(9, 161, 161, 0.22);
    color: var(--bw-text);
}

.form-control::placeholder {
    color: #8b93a8;
}

.input-group .form-control {
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ----- Cards ----- */
.card {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--bw-text);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--bw-text);
}

/* ----- Alerts ----- */
.alert {
    border-radius: 5px;
    padding: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.alert-success {
    background: rgba(9, 161, 161, 0.14);
    border: 1px solid rgba(9, 161, 161, 0.35);
    color: var(--bw-accent-hover);
}

.alert-danger {
    background: rgba(142, 59, 79, 0.2);
    border: 1px solid rgba(211, 150, 166, 0.35);
    color: var(--bw-danger);
}

/* ----- Overlay: full-screen dim layer + centred panel (book modal, scan result) ----- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 8, 16, 0.82);
    backdrop-filter: blur(3px);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-content {
    position: relative;
    width: 90%;
    max-width: 820px;
    max-height: min(90vh, 760px);
    padding: 1.25rem;
    background: linear-gradient(170deg, var(--bw-surface-raised), var(--bw-surface));
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    color: var(--bw-text);
    text-align: left;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--bw-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: var(--bw-text);
}

/* ----- Modal (bootstrap .modal inside .modal-backdrop; used by Manage collection) ----- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 8, 16, 0.82);
    backdrop-filter: blur(3px);
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    position: relative;
    display: block !important;
    z-index: 1050;
    width: min(90%, 620px);
    max-width: 820px;
    max-height: min(90vh, 760px);
    padding: 1.5rem;
    background: linear-gradient(170deg, var(--bw-surface-raised), var(--bw-surface));
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    color: var(--bw-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

/* ----- Missing-cover placeholder: a deliberate spine-like tile ----- */
.book-card-cover-placeholder,
.book-detail-cover-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0) 9%),
        linear-gradient(160deg, #1d2b45, #16203a 55%, #2a2146);
    color: var(--bw-accent-soft);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ----- Page header shared by scanner and manual add ----- */
.page-header {
    margin-bottom: 1.25rem;
}

.page-kicker {
    margin: 0 0 0.3rem;
    color: var(--bw-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-header h1 {
    margin: 0 0 0.35rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--bw-text);
}

.page-lead {
    margin: 0;
    color: var(--bw-text-muted);
}


/* ==========================================================================
   5. Dashboard
   ========================================================================== */
.dashboard-page {
    max-width: 1100px;
}

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
    overflow: hidden;
    padding: 2.25rem 2rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--bw-border);
    border-radius: 1rem;
    background:
        radial-gradient(520px 220px at 90% 0%, rgba(9, 161, 161, 0.16), transparent 70%),
        linear-gradient(160deg, var(--bw-surface-raised), var(--bw-surface) 70%);
}

.dashboard-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.dashboard-hero h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--bw-text);
}

.dashboard-name {
    color: var(--bw-accent-hover);
}

.dashboard-subtitle {
    margin: 0.6rem 0 0;
    max-width: 38rem;
}

.dashboard-subtitle,
.dashboard-muted,
.dashboard-empty p {
    color: var(--bw-text-muted);
}

.dashboard-actions,
.dashboard-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dashboard-actions {
    align-items: center;
}

/* Stats are a quiet inline strip rather than boxes */
.dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0 0 2rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--bw-line);
}

.dashboard-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.dashboard-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bw-text);
}

.dashboard-stat-label {
    font-size: 0.85rem;
    color: var(--bw-text-muted);
}

.dashboard-section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-section-note {
    color: #8b93a8;
    font-size: 0.78rem;
}

.dashboard-section h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.dashboard-empty {
    padding: 1.25rem;
    border: 1px dashed var(--bw-border);
    border-radius: 0.75rem;
    background: var(--bw-surface);
}

.dashboard-empty h3 {
    margin: 0 0 0.35rem;
    color: var(--bw-text);
}

.dashboard-empty-compact {
    margin-bottom: 0.75rem;
}

.dashboard-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.dashboard-collection-card {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    background: linear-gradient(160deg, var(--bw-surface-raised), var(--bw-surface));
    color: var(--bw-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-collection-card:hover,
.dashboard-collection-card:focus-visible {
    border-color: rgba(9, 161, 161, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    color: var(--bw-text);
}

.dashboard-collection-card:focus-visible {
    outline: 2px solid var(--bw-accent);
    outline-offset: 2px;
}

/* A book-spine edge gives the card a physical, shelf-like feel */
.dashboard-collection-spine {
    display: grid;
    place-items: center;
    flex: 0 0 3.4rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--bw-text);
    background: linear-gradient(180deg, #0b6f73, #123a5a 60%, #3a2a5c);
    box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.3);
}

.dashboard-collection-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    padding: 1rem 1rem 1rem 1.1rem;
}

.dashboard-collection-name {
    font-weight: 600;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.dashboard-collection-meta {
    font-size: 0.85rem;
    color: var(--bw-text-muted);
}

.dashboard-collection-arrow {
    align-self: center;
    padding-right: 1rem;
    font-size: 1.5rem;
    color: var(--bw-accent-soft);
    transition: transform 0.15s ease, color 0.15s ease;
}

.dashboard-collection-card:hover .dashboard-collection-arrow {
    color: var(--bw-accent-hover);
    transform: translateX(3px);
}


/* ==========================================================================
   6. Collection
   ========================================================================== */
.collection-page {
    max-width: 1180px;
}

.collection-page h1,
.collection-page h2,
.collection-page h3 {
    color: var(--bw-text);
}

.collection-page h1 {
    margin-bottom: 0.35rem;
}

.collection-page-header {
    margin-bottom: 0.75rem;
}

.collection-kicker {
    margin: 0 0 0.3rem;
    color: var(--bw-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-page-intro,
.collection-count-subtext,
.collection-empty-state p {
    color: var(--bw-text-muted);
}

.collection-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 420px;
    margin-bottom: 1.25rem !important;
}

.collection-selector .form-label {
    margin: 0;
    white-space: nowrap;
    color: var(--bw-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-toolbar,
.collection-title-row {
    display: flex;
    flex-wrap: wrap;
}

.collection-toolbar {
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--bw-line);
}

.collection-title-row {
    align-items: baseline;
    gap: 0.7rem;
    min-width: 0;
}

.collection-title-row h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    overflow-wrap: anywhere;
}

.collection-load-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.collection-access-badge {
    border-style: dashed;
}

.collection-count-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(9, 161, 161, 0.4);
    border-radius: 999px;
    background: var(--bw-accent-muted);
    color: var(--bw-accent-hover);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.collection-search .form-control {
    padding: 0.65rem 0.9rem;
}

.collection-count-subtext {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.collection-empty-state {
    max-width: 680px;
    padding: 1.25rem;
    border: 1px dashed var(--bw-border);
    border-radius: 0.65rem;
    background: var(--bw-surface);
}

.collection-empty-state h2,
.collection-empty-state h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

.collection-empty-state p {
    margin: 0;
}

/* ----- Book grid + card ----- */
.book-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Let grid items shrink properly */
.book-grid > * {
    min-width: 0;
}

.book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.book-card:hover,
.book-card:focus-within {
    border-color: rgba(9, 161, 161, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    transform: translateY(-2px);
}

.book-card .card-img-top,
.book-card-cover-placeholder {
    aspect-ratio: 2 / 3;
    height: auto;
    min-height: 0;
    border-bottom: 1px solid var(--bw-border);
}

.book-card .card-img-top {
    object-fit: cover;
    border-radius: 0;
}

.book-card .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0.85rem 0.9rem 0.95rem;
    text-align: left;
}

/* Clamp text so card heights stay equal */
.book-card .card-title,
.book-card .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card .card-title {
    margin: 0 0 0.35rem;
    color: var(--bw-text);
    font-size: 0.95rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
}

.book-card .card-text {
    margin-bottom: 0;
    color: var(--bw-text-muted);
    font-size: 0.84rem;
    -webkit-line-clamp: 1;
}

/* ----- Book detail modal ----- */
.book-details-container {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 0.75rem 0.5rem 0.25rem;
}

.book-cover {
    display: flex;
    flex: 0 0 34%;
    justify-content: center;
    align-items: flex-start;
}

.book-cover img {
    width: 100%;
    max-width: 100%;
    border-radius: 0.4rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.book-detail-cover-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 0.45rem;
}

.book-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
}

.book-info h2 {
    margin: 0 0 0.6rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--bw-text);
    overflow-wrap: anywhere;
}

.book-metadata p {
    margin: 0 0 0.35rem;
    color: var(--bw-text-muted);
    font-size: 0.93rem;
}

.book-metadata strong {
    display: inline-block;
    min-width: 5.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.book-metadata .description {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--bw-line);
}

.book-metadata .description + p {
    max-height: 10rem;
    overflow-y: auto;
    line-height: 1.55;
}

.edit-form {
    display: grid;
    gap: 0.6rem;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bw-line);
}

.action-buttons .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

/* Destructive action sits apart from the others */
.action-buttons .btn-danger {
    margin-left: auto;
}

.action-confirm {
    flex: 1 1 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(211, 150, 166, 0.35);
    border-radius: 0.5rem;
    background: rgba(142, 59, 79, 0.14);
}

.action-confirm p {
    margin: 0 0 0.6rem;
    color: var(--bw-text);
    font-size: 0.86rem;
}

.collection-select {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bw-line);
    border-radius: 8px;
    background: rgba(9, 161, 161, 0.07);
}

.select-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ----- Status filters (collection page) ----- */
.collection-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.filter-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(162, 188, 224, 0.26);
    border-radius: 999px;
    background: transparent;
    color: var(--bw-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.5;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
    border-color: var(--bw-accent-soft);
    color: var(--bw-text);
}

.filter-chip.is-active {
    border-color: rgba(9, 161, 161, 0.55);
    background: var(--bw-accent-muted);
    color: var(--bw-text);
    font-weight: 600;
}

.filter-clear {
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    color: var(--bw-accent-soft);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(162, 188, 224, 0.4);
    text-underline-offset: 0.2em;
}

.filter-clear:hover {
    color: var(--bw-text);
}

.collection-filter-scope {
    margin: -0.75rem 0 1rem;
    color: #8b93a8;
    font-size: 0.75rem;
}

.collection-filter-scope + .collection-empty-state,
.collection-filter-scope + .collection-count-subtext {
    margin-top: 0;
}

.filter-chip-count {
    color: var(--bw-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.filter-chip.is-active .filter-chip-count {
    color: var(--bw-accent-hover);
}

.filter-chip:focus-visible,
.copy-segment:focus-visible,
.copy-star:focus-visible,
.copy-link:focus-visible,
.copy-history-toggle:focus-visible,
.filter-clear:focus-visible,
.book-card:focus-visible {
    outline: 2px solid var(--bw-accent-hover);
    outline-offset: 2px;
}

/* Dashboard tiles are links; context line names the collection */
a.book-card {
    color: inherit;
    text-decoration: none;
}

.book-card-context {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0.25rem 0 0;
    color: #8b93a8;
    font-size: 0.74rem;
}

.book-grid.book-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.book-grid-compact .book-card .card-body {
    padding: 0.6rem 0.65rem 0.7rem;
}

.book-grid-compact .book-card .card-title {
    font-size: 0.85rem;
}

/* ----- Card status: lent / reading are badges, read / rating are quiet text ----- */
.book-card-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    line-height: 1.4;
}

.status-badge {
    padding: 0.05rem 0.45rem;
    border: 1px solid;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-lent {
    border-color: rgba(162, 188, 224, 0.5);
    background: rgba(162, 188, 224, 0.12);
    color: var(--bw-accent-soft);
}

.status-reading {
    border-color: rgba(9, 161, 161, 0.5);
    background: var(--bw-accent-muted);
    color: var(--bw-accent-hover);
}

.status-quiet {
    color: var(--bw-text-muted);
    white-space: nowrap;
}

/* ----- Book modal: "Your copy" panel ----- */
.copy-panel {
    display: grid;
    gap: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--bw-line);
}

/* Your reading / This copy / Loan history: same rhythm, a quiet divider between them */
.copy-section {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.copy-section + .copy-section {
    padding-top: 0.8rem;
    border-top: 1px dashed var(--bw-line);
}

.copy-panel-heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

/* "Your reading" (personal) vs "This copy" (shared) */
.copy-scope {
    margin-left: 0.4rem;
    color: #8b93a8;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.copy-row {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.copy-row-top {
    align-items: start;
}

.copy-row-top > .copy-label {
    padding-top: 0.3rem;
}

.copy-label {
    color: var(--bw-text-muted);
    font-size: 0.85rem;
}

.copy-muted {
    color: var(--bw-text-muted);
    font-size: 0.88rem;
}

/* Segmented reading control */
.copy-segmented {
    display: inline-flex;
    justify-self: start;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    background: rgba(6, 10, 20, 0.45);
}

.copy-segment {
    padding: 0.2rem 0.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--bw-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.copy-segment:hover:not(:disabled) {
    color: var(--bw-text);
}

/* Selected = filled surface + bold text, not colour alone */
.copy-segment.is-active {
    background: var(--bw-accent);
    color: #04201f;
    font-weight: 700;
}

.copy-segment:disabled {
    cursor: default;
}

.copy-segment:disabled:not(.is-active) {
    opacity: 0.6;
}

/* Rating */
.copy-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.copy-rating-stars {
    display: inline-flex;
}

.copy-star {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.3rem;
    background: transparent;
    color: rgba(185, 184, 201, 0.55);
    font-size: 1.1rem;
    line-height: 1;
}

.copy-star.is-filled {
    color: var(--bw-accent-hover);
}

.copy-star:hover:not(:disabled) {
    color: var(--bw-text);
}

.copy-rating-value {
    color: var(--bw-text-muted);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

/* Text-style button for Edit / Add / Clear */
.copy-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bw-accent-soft);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(162, 188, 224, 0.4);
    text-underline-offset: 0.2em;
}

.copy-link:hover:not(:disabled) {
    color: var(--bw-text);
}

/* Lending */
.copy-lending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    min-width: 0;
}

.copy-loan {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.1rem;
    margin: 0;
    font-size: 0.88rem;
}

.copy-loan > div {
    display: flex;
    gap: 0.35rem;
}

.copy-loan dt {
    color: var(--bw-text-muted);
    font-weight: 400;
}

.copy-loan dd {
    margin: 0;
    color: var(--bw-text);
    overflow-wrap: anywhere;
}

.copy-lend-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--bw-line);
    border-radius: 0.5rem;
    background: rgba(9, 161, 161, 0.05);
}

.copy-field {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.copy-field label {
    color: var(--bw-text-muted);
    font-size: 0.8rem;
}

.copy-lend-form .copy-error,
.copy-lend-form .copy-actions {
    grid-column: 1 / -1;
}

.copy-field input[type="date"] {
    color-scheme: dark;
}

/* Loan history: collapsed toggle, quiet newest-first list */
.copy-history-heading {
    display: block;
}

.copy-history-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

.copy-history-toggle:hover {
    color: var(--bw-text);
}

.copy-history-chevron {
    width: 0.8rem;
}

.copy-history-list {
    display: grid;
    gap: 0.6rem;
    margin: 0.2rem 0 0;
    padding: 0 0 0 0.75rem;
    border-left: 1px solid var(--bw-line);
    list-style: none;
    font-size: 0.84rem;
}

.copy-history-list[hidden] {
    display: none;
}

.copy-history-name {
    display: block;
    color: var(--bw-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.copy-history-dates {
    display: block;
    color: var(--bw-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Open loan: label text plus accent, not colour alone */
.copy-history-current {
    color: var(--bw-accent-soft);
    font-weight: 600;
}

/* Notes / review blocks */
.copy-block {
    display: grid;
    gap: 0.35rem;
}

.copy-block-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.copy-text {
    margin: 0;
    max-height: 8rem;
    overflow-y: auto;
    color: var(--bw-text);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.copy-empty {
    margin: 0;
    font-size: 0.84rem;
    font-style: italic;
}

.copy-edit-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.copy-count {
    color: #8b93a8;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.copy-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.copy-panel .btn-sm {
    padding: 0.2rem 0.7rem;
    font-size: 0.82rem;
}

.copy-error {
    margin: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(211, 150, 166, 0.35);
    border-radius: 0.4rem;
    background: rgba(142, 59, 79, 0.2);
    color: var(--bw-danger);
    font-size: 0.82rem;
}

.copy-panel button:disabled {
    cursor: progress;
}

/* ----- Manage collection modal ----- */
.collection-manage-modal label {
    color: var(--bw-text-muted);
    font-size: 0.88rem;
}

.collection-manage-modal h4 {
    margin: 1.25rem 0 0.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.collection-manage-modal .copy-error,
.manage-success {
    margin-top: 0.5rem;
}

.manage-success {
    margin-bottom: 0;
    color: var(--bw-accent-hover);
    font-size: 0.82rem;
}

.manage-members {
    margin: 0;
    padding: 0;
    list-style: none;
}

.manage-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.1rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--bw-line);
}

.manage-members .action-confirm {
    margin: 0.4rem 0;
}

.manage-member-name,
.manage-collection-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--bw-text);
}

.manage-collection-name {
    margin: 0;
}

.manage-empty,
.manage-note {
    margin: 0;
    color: var(--bw-text-muted);
    font-size: 0.86rem;
}

.manage-note {
    margin-top: 1.25rem;
}

.manage-row-form {
    margin-top: 0.6rem;
}


/* ==========================================================================
   7. Scanner
   ========================================================================== */
.scanner-page,
.manual-add {
    max-width: 760px;
}

.scanner-panel {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    background: linear-gradient(160deg, var(--bw-surface-raised), var(--bw-surface) 70%);
}

.scanner-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.scanner-panel h2 {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.scanner-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bw-text-muted);
    font-size: 0.82rem;
}

.scanner-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bw-text-muted);
    opacity: 0.55;
}

.scanner-status.is-live {
    color: var(--bw-accent-hover);
}

.scanner-status.is-live::before {
    background: var(--bw-accent-hover);
    opacity: 1;
}

.scanner-field {
    margin-bottom: 1rem;
}

.scanner-field .form-label {
    margin-bottom: 0.35rem;
    color: var(--bw-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Camera frame: Quagga injects <video>/<canvas> into #interactive */
.scanner-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--bw-border);
    border-radius: 0.65rem;
    background: var(--bw-bg-deep);
}

.scanner-viewport {
    position: absolute;
    inset: 0;
}

.scanner-viewport video,
.scanner-viewport canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-viewport canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.scanner-idle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--bw-text-muted);
}

.scanner-idle svg {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--bw-accent-soft);
    opacity: 0.8;
}

.scanner-idle strong {
    color: var(--bw-text);
    font-weight: 500;
}

.scanner-idle span {
    max-width: 20rem;
    font-size: 0.88rem;
}

/* Corner brackets frame the target area without covering the picture */
.scanner-guides {
    position: absolute;
    inset: 0.9rem;
    pointer-events: none;
}

.scanner-guides span {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border: 0 solid rgba(162, 188, 224, 0.7);
}

.scanner-guides span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 0.4rem; }
.scanner-guides span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 0.4rem; }
.scanner-guides span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 0.4rem; }
.scanner-guides span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 0.4rem; }

.scanner-frame.is-scanning .scanner-guides span {
    border-color: var(--bw-accent-hover);
}

.scanner-toggle {
    width: 100%;
    margin-top: 1rem;
}

.scanner-hint {
    margin: 0.5rem 0 0;
    color: var(--bw-text-muted);
    font-size: 0.82rem;
}

.scanner-lookup-state {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    color: var(--bw-text-muted);
    font-size: 0.9rem;
}

.scanner-feedback .alert {
    margin: 0 0 1.25rem;
}

/* Lookup didn't produce a book: message, the ISBN that was tried, then Try again / Manually create an entry. */
.scanner-lookup-message {
    margin: 0;
}

.scanner-lookup-isbn {
    display: block;
    margin-top: 0.2rem;
    color: var(--bw-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.scanner-lookup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ----- Scan result (shown in .overlay) ----- */
.scanner-result {
    max-width: 520px;
}

.result-head {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.result-cover img,
.result-cover .book-detail-cover-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 0.4rem;
}

.result-cover img {
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.result-title {
    margin: 0 0 0.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--bw-text);
    overflow-wrap: anywhere;
}

.result-author {
    margin: 0 0 0.9rem;
    color: var(--bw-text-muted);
}

.result-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.9rem;
    margin: 0;
    font-size: 0.9rem;
}

.result-meta dt {
    align-self: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.result-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.result-description {
    max-height: 7rem;
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    overflow-y: auto;
    border-top: 1px solid var(--bw-line);
    color: var(--bw-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.result-destination {
    margin-top: 1.1rem;
    padding: 1rem;
    border: 1px solid var(--bw-line);
    border-radius: 8px;
    background: rgba(9, 161, 161, 0.07);
}

.result-destination .form-label {
    margin-bottom: 0.35rem;
    color: var(--bw-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.scanner-result .alert {
    margin: 1rem 0 0;
}


/* ==========================================================================
   8. Manual add
   ========================================================================== */
.manual-add .form-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    background: linear-gradient(160deg, var(--bw-surface-raised), var(--bw-surface) 70%);
}

.manual-add .form-card h2 {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.manual-add .form-card-note {
    margin: 0 0 1rem;
    color: var(--bw-text-muted);
    font-size: 0.85rem;
}

.manual-add .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.manual-add .form-field {
    min-width: 0;
}

.manual-add .form-label {
    margin-bottom: 0.35rem;
    color: var(--bw-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.manual-add .field-required {
    margin-left: 0.15rem;
    color: var(--bw-accent-soft);
}

.manual-add .form-control,
.manual-add .form-select {
    padding: 0.6rem 0.8rem;
}

.manual-add textarea.form-control {
    min-height: 7.5rem;
    resize: vertical;
}

.manual-add .field-hint {
    margin: 0.35rem 0 0;
    color: var(--bw-text-muted);
    font-size: 0.78rem;
}

/* Validation: Blazor marks fields .modified .valid/.invalid */
.manual-add .form-control.modified.valid {
    outline: none;
}

.manual-add .form-control.invalid {
    outline: none;
    border-color: var(--bw-danger);
}

.manual-add .validation-message {
    margin-top: 0.35rem;
    color: var(--bw-danger);
    font-size: 0.82rem;
}

.manual-add .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.manual-add .form-feedback .alert {
    margin: 0 0 1rem;
}


/* ==========================================================================
   9. Auth / account
   ========================================================================== */
.auth-shell {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0 3rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem 1.75rem;
    border: 1px solid var(--bw-border);
    border-radius: 1rem;
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(9, 161, 161, 0.12), transparent 70%),
        linear-gradient(160deg, var(--bw-surface-raised), var(--bw-surface) 70%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    color: var(--bw-text);
}

.auth-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.auth-card h1 {
    margin: 0 0 0.35rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--bw-text);
}

.auth-lead {
    margin: 0 0 1.5rem;
    color: var(--bw-text-muted);
}

.auth-card .form-floating > .form-control {
    background-color: var(--bw-bg);
    color: var(--bw-text);
}

.auth-card .form-floating > label {
    color: var(--bw-text-muted);
}

.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bw-accent-soft);
}

.auth-card .form-floating > .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--bw-text);
    box-shadow: 0 0 0 1000px var(--bw-bg) inset;
}

.auth-card .form-check-input {
    background-color: var(--bw-bg);
    border-color: var(--bw-border);
}

.auth-card .form-check-input:checked {
    background-color: var(--bw-accent);
    border-color: var(--bw-accent);
}

.auth-card .form-label,
.auth-card .checkbox label {
    color: var(--bw-text-muted);
    font-size: 0.9rem;
}

/* Validation: readable on dark surfaces */
.auth-card .text-danger,
.auth-card .validation-message,
.auth-card .validation-errors {
    color: var(--bw-danger) !important;
    font-size: 0.85rem;
}

.auth-card ul.validation-errors,
.auth-card .text-danger ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

.auth-card .form-control.invalid {
    border-color: var(--bw-danger);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.auth-card a:not(.btn) {
    color: var(--bw-accent-soft);
    text-decoration: none;
}

.auth-card a:not(.btn):hover {
    color: var(--bw-accent-hover);
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--bw-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bw-line);
}

/* ----- Account settings ----- */
.settings-card {
    max-width: 34rem;
}

.settings-card h1 {
    margin-bottom: 1rem;
}

.settings-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bw-line);
}

.auth-card a.settings-tab {
    padding: 0.5rem 0.9rem;
    border-bottom: 2px solid transparent;
    color: var(--bw-text-muted);
    text-decoration: none;
}

.auth-card a.settings-tab:hover {
    color: var(--bw-text);
    text-decoration: none;
}

.auth-card a.settings-tab.active {
    color: var(--bw-accent-hover);
    border-bottom-color: var(--bw-accent);
}

.settings-body .row {
    display: block;
    margin: 0;
}

.settings-body .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

.settings-body h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--bw-text);
}

.settings-section {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bw-line);
}

.settings-section h2 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-accent-soft);
}

.settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--bw-line);
}

.settings-status {
    color: var(--bw-text-muted);
    font-size: 0.9rem;
}

.settings-status.is-on {
    color: var(--bw-accent-hover);
}

.settings-hint {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--bw-text-muted);
}


/* ==========================================================================
   10. Responsive
   ========================================================================== */

/* Phones and up: 3-up book grid */
@media (min-width: 480px) {
    .book-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Above 576px: wider camera frame and two-column form rows */
@media (min-width: 577px) {
    .scanner-frame {
        aspect-ratio: 16 / 9;
    }

    .manual-add .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manual-add .form-field-wide {
        grid-column: 1 / -1;
    }
}

/* Tablets */
@media (min-width: 768px) {
    .book-grid.book-grid-compact {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .book-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Book modal: side-by-side cover and info above 768px, stacked at or below it */
@media (min-width: 768.02px) {
    .book-details-container {
        flex-direction: row;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .book-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    /* Shared overlay: full-width actions */
    .overlay-content .btn {
        width: 100%;
    }

    /* Dashboard */
    .dashboard-hero {
        padding: 1.5rem 1.25rem;
    }

    /* Collection */
    .collection-selector {
        max-width: none;
    }

    .collection-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .collection-toolbar {
        align-items: stretch;
    }

    .collection-manage-action {
        width: 100%;
    }

    .book-grid {
        gap: 0.7rem;
    }

    .book-cover {
        flex-basis: auto;
        max-width: 55%;
        margin: 0 auto;
    }

    .action-buttons .btn-danger {
        margin-left: 0;
    }

    .action-buttons .btn {
        width: 100%;
    }

    /* "Your copy" panel keeps compact inline buttons instead of the full-width overlay default */
    .overlay-content .copy-panel .btn {
        width: auto;
    }

    .copy-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .copy-row-top > .copy-label {
        padding-top: 0;
    }

    .copy-lend-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .copy-actions {
        flex-wrap: wrap;
    }

    .book-grid.book-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-chip {
        padding: 0.3rem 0.6rem;
    }

    .copy-segment {
        padding: 0.3rem 0.7rem;
    }

    /* Scanner */
    .scanner-page,
    .manual-add {
        padding-left: 0;
        padding-right: 0;
    }

    .scanner-panel {
        padding: 1rem;
    }

    .result-head {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 0.9rem;
    }

    .result-title {
        font-size: 1.2rem;
    }

    /* Manual add */
    .manual-add .form-card {
        padding: 1rem;
    }

    .manual-add .form-actions .btn {
        width: 100%;
    }

    /* Auth */
    .auth-shell {
        padding-top: 1rem;
    }

    .auth-card {
        padding: 1.5rem 1.25rem;
    }
}