/* ── CSS custom properties ────────────────────────── */
:root {
    --primary:    #050d18;
    --primary-alt:#0a1628;
    --action:     #1d4e8f;
    --action-text:#fff;
    --accent:     #2a6abf;
    --bg:         #0f1f35;
    --text:       #d0e4f8;
    --muted:      #6890c0;
    --border:     #1a3a60;
    --warning:    #d0801a;
    --surface:    #162840;
    --nav-text:   #d0e8ff;
    --nav-link:   #6aabef;
    --timeline-date-color: #ffffff;
    --table-hover: color-mix(in srgb, var(--action) 20%, var(--surface, #fff));
    --icon-fill:  var(--action);
    --danger-bg:  #fde8e6;
    --app-content-max-width: 1400px;
    --app-layout-radius: 12px;
    --app-content-shell-inline-gap: 1.7rem;
    --app-popup-max-width: min(var(--app-content-max-width), calc(100vw - 2rem));
    --motion-fast: 120ms;
    --motion-standard: 180ms;
    --motion-slow: 260ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
    --interactive-lift: translateY(-1px);
    --interactive-ring: 0 0 0 3px color-mix(in srgb, var(--action) 26%, transparent);
    --scrollbar-track: color-mix(in srgb, var(--primary-alt) 86%, var(--border));
    --scrollbar-thumb: color-mix(in srgb, var(--action) 74%, var(--muted));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 82%, var(--text));
    --scrollbar-thumb-active: color-mix(in srgb, var(--accent) 72%, var(--nav-text));
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.social-grid > .card {
    margin-bottom: 0;
}

.social-panel {
    min-width: 0;
}

.friends-page button {
    color: var(--text);
}

.friends-page button .theme-icon,
.friends-page button .theme-icon--nav,
.friends-page button .theme-icon--danger,
.friends-page button .theme-icon--success,
.friends-page button .theme-icon--text,
.friends-page button .theme-icon--muted {
    color: currentColor;
}

.social-panel--shared,
.social-panel--share {
    grid-column: span 2;
}

.social-search-row,
.social-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-search-row input,
.social-form-grid select,
.social-form-grid input,
.social-panel textarea {
    width: 100%;
}

.social-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.social-row,
.shared-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.social-row:last-child,
.shared-item:last-child {
    border-bottom: 0;
}

.social-person {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.social-person span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-person small,
.shared-item small {
    color: var(--muted);
}

.social-avatar,
.user-hero-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--profile-color, var(--action));
    color: #fff;
    font-weight: 800;
}

.social-avatar img,
.user-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-only-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
}

.icon-only-btn.is-active,
.friend-action-menu button.is-active {
    background: var(--action);
    border-color: var(--action);
    color: var(--action-text);
}

.social-badge {
    display: inline-flex;
    min-width: 1.65rem;
    height: 1.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--warning);
    color: #111;
    font-weight: 800;
}

.social-form-grid,
.settings-privacy-grid,
.settings-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-toggle-grid label,
.settings-privacy-grid label,
.social-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text);
}

.settings-toggle-grid label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.settings-toggle-grid input[type="checkbox"] {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 0 0 auto;
}

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

.shared-item img,
.shared-list-icon {
    width: 34px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: color-mix(in srgb, var(--action) 12%, var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
}

.shared-item--rich {
    align-items: start;
}

.shared-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.shared-meta .social-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
}

.shared-warning {
    margin: 0.35rem 0 0;
    color: var(--warning);
    font-size: 0.82rem;
}

.shared-save-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.shared-save-status select {
    width: auto;
    min-width: 9rem;
}

.shared-list-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.45rem;
}

.shared-list-preview span {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.76rem;
}

.social-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.social-profile-modal {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}

.social-profile-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.user-hero {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.user-hero-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.user-hero-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.4rem;
}

.user-hero-avatar--small {
    width: 48px;
    height: 48px;
}

.user-hero-heading h2,
.user-hero-heading h3 {
    margin: 0;
}

.user-hero-heading p,
.user-hero-bio {
    margin: 0.15rem 0 0;
    color: var(--muted);
}

.user-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 0.5rem 0;
}

.user-hero-stats div {
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, var(--action));
}

.user-hero-stats span {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
}

.user-hero-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-hero-stats--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.user-hero-badges,
.user-hero-books {
    margin: 1rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, var(--action));
}

.user-hero-books strong {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    flex-basis: 100%;
}

.user-hero-badges span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    color: var(--muted);
}

.user-hero-book {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.user-hero-book img {
    width: 24px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
}

.user-hero--large {
    display: block;
}
.user-hero--compact {
    display: none;
}
@media (max-width: 700px) {
    .user-hero--large {
        display: none;
    }
    .user-hero--compact {
        display: block;
    }
}

/* Visit their page button */
.user-hero-visit-btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.5rem;
    align-self: flex-start;
}

/* Friends page user tabs */
.friends-user-tab {
    position: relative;
    padding-right: 1.6rem !important;
}
.friends-user-tab-close {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.6;
}
.friends-user-tab-close:hover {
    opacity: 1;
    background: rgba(128,128,128,0.15);
}
.friends-user-tab:hover .friends-user-tab-close {
    display: flex;
}

/* Visiting user page */
.visiting-user-page {
    padding: 0 0;
}
.visiting-user-page > .tabs-wrapper {
    margin-top: 0;
}

.social-panel--blocked,
.social-panel--sent {
    grid-column: span 2;
}

.social-error {
    color: var(--warning, #d0801a);
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.social-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.social-filter-row input {
    width: 100%;
}

.social-actions--mobile {
    display: none;
}

.friend-action-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.35rem 0 0.2rem;
}

.friend-action-menu button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.84rem;
}

.friend-action-menu-danger {
    color: var(--warning);
}

.friend-note-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.friend-note-row input {
    flex: 1;
    font-size: 0.82rem;
    padding: 0.2rem 0.4rem;
}

.friend-note-row button {
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem;
}

.friend-note-display {
    font-size: 0.8rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 0.15rem;
    cursor: pointer;
}

.confirm-remove-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--warning, #d0801a);
}

.confirm-remove-row button {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
}

.both-reading-panel {
    background: var(--surface, #162840);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.both-reading-panel h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.compare-book-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4rem 4rem 5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.compare-book-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-book-row--header {
    font-weight: 700;
    border-bottom: 2px solid var(--border);
}

.visiting-compare-panel {
    margin-top: 1rem;
}

.visiting-compare-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}

.visiting-compare-header h3 {
    margin: 0;
}

.visiting-compare-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.compare-rating-diff--higher {
    color: var(--action);
}

.compare-rating-diff--lower {
    color: var(--warning);
}

.compare-book-row:last-child {
    border-bottom: 0;
}

.share-multi-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.share-multi-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    background: var(--surface, #162840);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.share-multi-chip--selected {
    background: var(--action);
    color: #fff;
    border-color: var(--action);
}

.share-book-cover {
    width: 60px;
    border-radius: 4px;
}

.sent-share-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.sent-share-item:last-child {
    border-bottom: 0;
}

.nav-badge {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--warning, #d0801a);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    margin-left: 0.3rem;
    padding: 0;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    vertical-align: super;
}

.nav-badge--standard {
    font-size: 0.625rem;
}

@media (max-width: 700px) {
    .social-grid,
    .social-form-grid,
    .settings-privacy-grid,
    .settings-toggle-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .social-panel--shared,
    .social-panel--share {
        grid-column: auto;
    }

    .social-search-row {
        flex-direction: row;
        align-items: center;
    }

    .social-search-row input {
        min-width: 0;
    }

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

    .shared-item .icon-only-btn:last-child {
        grid-column: 3;
    }

    .social-panel--blocked,
    .social-panel--sent {
        grid-column: auto;
    }

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

    .social-actions--desktop {
        display: none;
    }

    .social-actions--mobile {
        display: flex;
    }

    .friend-action-menu {
        grid-template-columns: 1fr;
    }

    .shared-item--rich {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .shared-save-status {
        display: grid;
        align-items: stretch;
        gap: 0.25rem;
    }

    .shared-save-status select {
        width: 100%;
    }

    .visiting-compare-header,
    .visiting-compare-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-book-row {
        grid-template-columns: minmax(0, 1fr) 3rem 3rem 4.8rem;
        font-size: 0.78rem;
    }
}

/* ── Theme: Green ──────────────────────────────────── */
[data-theme="green"] {
    --primary:    #2b4233;
    --primary-alt:#324d3c;
    --action:     #619f78;
    --accent:     #7fbf96;
    --bg:         #f1fff6;
    --text:       #1a2e22;
    --muted:      #3d6b4f;
    --border:     #a8d9b8;
    --warning:    #b7701a;
    --surface:    #ffffff;
    --nav-text:   #e8fff1;
    --nav-link:   #7abf96;
}

/* ── Theme: Light Blue ─────────────────────────────── */
[data-theme="light-blue"] {
    --primary:    #1b3a4b;
    --primary-alt:#1e4457;
    --action:     #2980b9;
    --accent:     #5aabdb;
    --bg:         #eef6fd;
    --text:       #0d2233;
    --muted:      #3a6a8a;
    --border:     #a8d4ea;
    --warning:    #b7701a;
    --surface:    #ffffff;
    --nav-text:   #e8f6ff;
    --nav-link:   #7abde0;
}

/* ── Theme: Dark Blue ──────────────────────────────── */
[data-theme="dark-blue"] {
    --primary:    #0d1b2a;
    --primary-alt:#122236;
    --action:     #1a6ca8;
    --accent:     #3d8fc4;
    --bg:         #e8f1fa;
    --text:       #081828;
    --muted:      #1a4a6e;
    --border:     #8cbddc;
    --warning:    #b7701a;
    --surface:    #ffffff;
    --nav-text:   #d8f0ff;
    --nav-link:   #6aadd8;
}

/* ── Theme: Brown ──────────────────────────────────── */
[data-theme="brown"] {
    --primary:    #3d2b1f;
    --primary-alt:#4a3226;
    --action:     #8b5e3c;
    --accent:     #b07850;
    --bg:         #fdf7f2;
    --text:       #2a1c12;
    --muted:      #6e4c33;
    --border:     #d4b89a;
    --warning:    #b7701a;
    --surface:    #ffffff;
    --nav-text:   #fdf0e8;
    --nav-link:   #d4a882;
}

/* ── Theme: Gold ───────────────────────────────────── */
[data-theme="gold"] {
    --primary:    #3a2900;
    --primary-alt:#453200;
    --action:     #c09010;
    --accent:     #d4a820;
    --bg:         #fffdf0;
    --text:       #281e00;
    --muted:      #7a6200;
    --border:     #e8cc70;
    --warning:    #c05010;
    --surface:    #ffffff;
    --nav-text:   #fff8e0;
    --nav-link:   #e8c84a;
}

/* ── Theme: Dark Red ───────────────────────────────── */
[data-theme="dark-red"] {
    --primary:    #3d0808;
    --primary-alt:#4a1010;
    --action:     #9a2020;
    --accent:     #c04040;
    --bg:         #fff5f5;
    --text:       #280808;
    --muted:      #6e1818;
    --border:     #e8a0a0;
    --warning:    #b07010;
    --surface:    #ffffff;
    --nav-text:   #fff0f0;
    --nav-link:   #e88080;
}

/* ── Theme: Pink ───────────────────────────────────── */
[data-theme="pink"] {
    --primary:    #7a3055;
    --primary-alt:#8c3b63;
    --action:     #d9669b;
    --accent:     #f19dc0;
    --bg:         #fff2f8;
    --text:       #3d1830;
    --muted:      #87506c;
    --border:     #efbfd4;
    --warning:    #b7701a;
    --surface:    #ffffff;
    --nav-text:   #fff3fa;
    --nav-link:   #f4a8cb;
}

/* ── Theme: Gray ───────────────────────────────────── */
[data-theme="gray"] {
    --primary:    #3a3a3a;
    --primary-alt:#444444;
    --action:     #666666;
    --accent:     #888888;
    --bg:         #f7f7f7;
    --text:       #1a1a1a;
    --muted:      #555555;
    --border:     #c8c8c8;
    --warning:    #b07010;
    --surface:    #ffffff;
    --nav-text:   #f5f5f5;
    --nav-link:   #cccccc;
}

/* ── Theme: Black (dark mode) ──────────────────────── */
[data-theme="black"] {
    --primary:    #0a0a0a;
    --primary-alt:#141414;
    --action:     #585858;
    --accent:     #787878;
    --bg:         #202020;
    --text:       #e8e8e8;
    --muted:      #aaaaaa;
    --border:     #444444;
    --warning:    #d0801a;
    --surface:    #2a2a2a;
    --nav-text:   #f0f0f0;
    --nav-link:   #cccccc;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Very Dark Green (dark mode) ────────────── */
[data-theme="very-dark-black"] {
    --primary:    #020202;
    --primary-alt:#080808;
    --action:     #2d2d2d;
    --accent:     #444444;
    --bg:         #0c0c0c;
    --text:       #e9e9e9;
    --muted:      #9a9a9a;
    --border:     #2f2f2f;
    --warning:    #d0801a;
    --surface:    #141414;
    --nav-text:   #f2f2f2;
    --nav-link:   #cfcfcf;
    --timeline-date-color: #ffffff;
}

[data-theme="very-dark-red"] {
    --primary:    #120404;
    --primary-alt:#1d0808;
    --action:     #7a2323;
    --accent:     #9d3131;
    --bg:         #220c0c;
    --text:       #f8dddd;
    --muted:      #c18282;
    --border:     #4a1c1c;
    --warning:    #d0801a;
    --surface:    #2d1010;
    --nav-text:   #ffe8e8;
    --nav-link:   #e3aaaa;
    --timeline-date-color: #ffffff;
}

[data-theme="very-dark-gold"] {
    --primary:    #161004;
    --primary-alt:#221906;
    --action:     #8f6d16;
    --accent:     #b0861f;
    --bg:         #2a210b;
    --text:       #f5e8bf;
    --muted:      #c5ae65;
    --border:     #584519;
    --warning:    #d0801a;
    --surface:    #352a0f;
    --nav-text:   #fff2ca;
    --nav-link:   #e1bf62;
    --timeline-date-color: #ffffff;
}

[data-theme="very-dark-pink"] {
    --primary:    #150811;
    --primary-alt:#220d1b;
    --action:     #8e3e69;
    --accent:     #b35283;
    --bg:         #2a1122;
    --text:       #f6d8ea;
    --muted:      #c18dad;
    --border:     #552443;
    --warning:    #d0801a;
    --surface:    #35152b;
    --nav-text:   #ffe7f6;
    --nav-link:   #e2a4c9;
    --timeline-date-color: #ffffff;
}

[data-theme="very-dark-brown"] {
    --primary:    #140d07;
    --primary-alt:#21140b;
    --action:     #7d5535;
    --accent:     #9d6a43;
    --bg:         #27190f;
    --text:       #f2dfd1;
    --muted:      #be9b7f;
    --border:     #4f341f;
    --warning:    #d0801a;
    --surface:    #311f13;
    --nav-text:   #fcebdd;
    --nav-link:   #d6ad8c;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Very Dark Green (dark mode) ────────────── */
[data-theme="very-dark-green"] {
    --primary:    #07130d;
    --primary-alt:#0d1f16;
    --action:     #2e7a58;
    --accent:     #3e9a70;
    --bg:         #11261b;
    --text:       #d7f0e1;
    --muted:      #7ab192;
    --border:     #204934;
    --warning:    #d0801a;
    --surface:    #173222;
    --nav-text:   #e2f7ea;
    --nav-link:   #7ccaa0;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Very Dark Blue (dark mode) ─────────────── */
[data-theme="very-dark-blue"] {
    --primary:    #050d18;
    --primary-alt:#0a1628;
    --action:     #1d4e8f;
    --accent:     #2a6abf;
    --bg:         #0f1f35;
    --text:       #d0e4f8;
    --muted:      #6890c0;
    --border:     #1a3a60;
    --warning:    #d0801a;
    --surface:    #162840;
    --nav-text:   #d0e8ff;
    --nav-link:   #6aabef;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Terminal Green (dark mode) ────────────── */
[data-theme="terminal-green"] {
    --primary:    #020402;
    --primary-alt:#071a0c;
    --action:     #00c853;
    --accent:     #39ff88;
    --bg:         #001005;
    --text:       #b6ffd1;
    --muted:      #4ca56b;
    --border:     #116b33;
    --warning:    #d7ff4f;
    --surface:    #031407;
    --nav-text:   #caffdc;
    --nav-link:   #39ff88;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Nord Night (dark mode) ────────────────── */
[data-theme="nord-night"] {
    --primary:    #1f2836;
    --primary-alt:#2e3440;
    --action:     #88c0d0;
    --action-text:var(--surface);
    --accent:     #5e81ac;
    --bg:         #101722;
    --text:       #d8dee9;
    --muted:      #8f9caf;
    --border:     #3b4252;
    --warning:    #ebcb8b;
    --surface:    #18202c;
    --nav-text:   #eceff4;
    --nav-link:   #8fbcbb;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Solarized Dark (dark mode) ────────────── */
[data-theme="solarized-dark"] {
    --primary:    #073642;
    --primary-alt:#0a4654;
    --action:     #268bd2;
    --accent:     #2aa198;
    --bg:         #002b36;
    --text:       #eee8d5;
    --muted:      #93a1a1;
    --border:     #164b56;
    --warning:    #b58900;
    --surface:    #07313b;
    --nav-text:   #fdf6e3;
    --nav-link:   #2aa198;
    --timeline-date-color: #ffffff;
}

/* ── Theme: Paper Ink ─────────────────────────────── */
[data-theme="paper-ink"] {
    --primary:    #172033;
    --primary-alt:#22304c;
    --action:     #2458a6;
    --accent:     #7b3f2a;
    --bg:         #f8f7f2;
    --text:       #171717;
    --muted:      #60646c;
    --border:     #d8d2c5;
    --warning:    #a35f00;
    --surface:    #ffffff;
    --nav-text:   #f7f4ec;
    --nav-link:   #b7c9ef;
}

/* ── Theme: Library Brass (dark mode) ─────────────── */
[data-theme="library-brass"] {
    --primary:    #171514;
    --primary-alt:#24201b;
    --action:     #b08d3a;
    --accent:     #d6b35f;
    --bg:         #22201d;
    --text:       #eee3c8;
    --muted:      #b8a77f;
    --border:     #4f4634;
    --warning:    #d1912f;
    --surface:    #2d2923;
    --nav-text:   #f7ecd0;
    --nav-link:   #d6b35f;
    --timeline-date-color: #ffffff;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--primary);
}

html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 0.72rem;
    height: 0.72rem;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

h1 { margin-top: 0; font-size: 1.6rem; }
h1:focus { outline: none; }

.mobile-only { display: none !important; }

/* Page wrapper */
.page-wrapper {
    background: var(--bg);
    border-radius: var(--app-layout-radius);
    padding: 0.85rem;
    min-height: calc(100vh - 56px - 4rem);
}

.panel {
    background: var(--surface, #fff);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.panel h2,
.panel h3,
.card h2,
.card h3 { margin-top: 0; }

/* Cards */
.card {
    background: var(--surface, #fff);
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--action);
}

/* Book grid */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}
.book-card {
    background: var(--surface, #fff);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.book-card .cover-placeholder,
.book-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.85rem;
}
/* Book-card cover load wrapper for the full-width 160px cover area */
.book-card-cover-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}
.book-card-cover-wrap .cover-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: none;
    border-radius: 0;
}
.book-card-cover-wrap .cover-spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.4);
    border-top-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    animation: coverSpin 0.7s linear infinite;
}
.book-card-cover-wrap.img-loaded .cover-spinner { display: none; }
.book-card-cover-wrap img { width: 100%; height: 160px; object-fit: cover; display: block; }
.book-card-cover-wrap .cover-placeholder { width: 100%; height: 160px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 0.85rem; }
.book-card .book-info { padding: 0.9rem 1rem; }
.book-card h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.book-card .author {
    color: var(--action);
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.meta-separator { color: var(--muted); font-weight: 400; }
.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.current-pick-badge {
    position: absolute;
    top: 0; right: 0;
    background: var(--action);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-bottom-left-radius: 6px;
}

/* Tags */
.tag,
.genre-tag,
.in-progress-tag {
    display: inline-block;
    background: var(--bg);
    border-radius: 999px;
}
.tag {
    border: 1px solid var(--border);
    color: var(--primary);
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    margin-right: 0.35rem;
    margin-top: 0.3rem;
}
.genre-tag {
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}
.in-progress-tag {
    border: 1px solid var(--action);
    color: var(--text);
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}

/* Buttons */
button {
    background: var(--action);
    color: var(--action-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 500;
    margin-top: 0.5rem;
    transition: background 0.15s;
}

button:not(.secondary):not(.danger):not(.btn-danger):not(.btn-ghost):not(.btn-icon):not(.btn-icon-small):not(.ui-button--secondary):not(.ui-button--ghost):not(.ui-button--danger) .theme-icon,
button:not(.secondary):not(.danger):not(.btn-danger):not(.btn-ghost):not(.btn-icon):not(.btn-icon-small):not(.ui-button--secondary):not(.ui-button--ghost):not(.ui-button--danger) svg,
.profile-image-upload-button .theme-icon,
.profile-image-upload-button svg {
    color: currentColor;
    stroke: currentColor;
}

button:hover { background: var(--primary-alt); }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
    button.secondary:hover {
        background: var(--primary-alt);
    }
button.danger { background: #c0392b; }
button.danger:hover { background: #a93226; }

/* Tabs */
.tabs-wrapper {
    position: relative;
    margin: 1em 0;
    border-bottom: 2px solid var(--border);
}
.tabs-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2px;
    width: 3rem;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    z-index: 1;
}
.tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 2px solid var(--border);
    padding: 0.5rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs-wrapper .tabs {
    margin: 0;
    border-bottom: 0;
    padding-bottom: 0.6rem;
}
.tabs button { background: transparent; color: var(--text); border: 1px solid var(--border); margin-top: 0; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.tabs button:hover { background: var(--surface, #fff);}
.tabs button.active { background: var(--action); color: var(--action-text); border-color: var(--action); }
.tabs button .theme-icon { color: currentColor; }

/* Tab pane fade-in */
@keyframes tabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.tab-pane { animation: tabFadeIn 0.15s ease; }

/* Directional tab slide transitions */
@keyframes tabSlideInFromRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tabSlideInFromLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: none; }
}
.tab-pane--slide-right { animation: tabSlideInFromRight 0.2s ease both; }
.tab-pane--slide-left  { animation: tabSlideInFromLeft 0.2s ease both; }

@media (prefers-reduced-motion: reduce) {
    .tab-pane, .tab-pane--slide-right, .tab-pane--slide-left { animation: none; }
}

.tbd-label { font-size: 0.85rem; }

/* Form controls */
input, select, textarea {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    margin-top: 0.25rem;
    box-sizing: border-box;
    background: var(--surface, #fff);
    color: var(--text);
}
textarea { min-height: 80px; resize: vertical; }
label { display: block; margin-bottom: 0.75rem; font-weight: 500; }
.form-card { max-width: 500px; }

/* Page title row */
.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.page-title-row h1 { margin: 0; }

/* Stats row (MyBooks overview) */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Stat cards */
.stat-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    flex: 1 1 120px;
    text-align: center;
    min-width: 100px;
}
.stat-number { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.stat-label  { font-size: 0.85rem; color: var(--text); margin-top: 0.25rem; }

/* Misc */
.cover-thumb { width: 100px; border-radius: 6px; }
.pick-summary { display: flex; gap: 1.5rem; align-items: flex-start; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.error   { color: #c0392b; }
.success { color: var(--action); }
.warning { color: var(--warning); }

.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-fill);
    fill: color-mix(in srgb, currentColor 18%, transparent);
    stroke: currentColor;
    line-height: 1;
    flex-shrink: 0;
}

.theme-icon svg {
    fill: inherit;
    stroke: currentColor;
}

.theme-icon--nav {
    color: var(--nav-text, #f1fff6);
}

.theme-icon--danger {
    color: #c0392b;
}

.theme-icon--success {
    color: var(--action);
}

.theme-icon--text {
    color: var(--text);
}

.theme-icon--muted {
    color: var(--muted);
}

.theme-icon--inline {
    margin-right: 0.35rem;
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sort-icon {
    font-size: 0.75rem;
    margin-left: 0.2rem;
    vertical-align: middle;
    display: inline-flex;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.sort-icon--asc { transform: rotate(180deg); }
.sort-icon--hidden {
    opacity: 0;
    pointer-events: none;
    width: 0;
    margin-left: 0;
    overflow: hidden;
}

table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border); }
th { font-weight: 600; background: var(--bg); }
tbody tr:nth-child(even) { background-color: var(--bg); }
tbody tr:hover           { background-color: var(--bg); background-color: var(--table-hover); }

blockquote {
    border-left: 3px solid var(--action);
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    color: var(--muted);
    font-style: italic;
}

/* Book Ratings grid table */
.ratings-grid-table { width: auto; margin-top: 0; white-space: nowrap; }
.ratings-grid-table th,
.ratings-grid-table td { padding: 0.35rem 0.65rem; border: 1px solid var(--border); text-align: center; vertical-align: middle; }
.ratings-grid-table .book-cell    { text-align: left; min-width: 160px; white-space: normal; }
.ratings-grid-table .book-cell .author { display: block; font-size: calc(1rem - 2px); font-style: italic; }
.ratings-grid-table .date-cell    { white-space: nowrap; }
.ratings-grid-table .rating-cell  { min-width: 52px; }
.ratings-grid-table .member-header { background: var(--bg); font-weight: 700; color: var(--text); }
.ratings-grid-table .avg-header   { background: var(--bg); font-weight: 700; color: var(--text); }
.ratings-grid-table .sub-header   { background: var(--bg); font-size: 0.78rem; font-weight: 600; color: var(--text); }
.ratings-grid-table .avg-cell     { font-weight: 700; }
.ratings-grid-table .rating-cell-compact { font-size: calc(1rem - 2px); }
.ratings-grid-table--compact-ratings .rating-col-compact,
.ratings-grid-table--compact-ratings .rating-cell-compact {
    min-width: 26px;
    padding-left: 0.325rem;
    padding-right: 0.325rem;
}
.ratings-grid-table .overall-cell { font-weight: 700; }
.ratings-grid-table .sortable-th  { cursor: pointer; user-select: none; white-space: nowrap; }
.ratings-grid-table .sortable-th:hover { background: var(--bg); background: var(--table-hover); }
.ratings-grid-table .rating-cell-edit  { padding: 0.15rem 0.3rem; }
.ratings-grid-table .ratings-grid-editor-slider {
    min-width: 7.5rem;
    margin-top: 0;
}
@keyframes ratingFlash {
    0%   { background-color: #b3f0c8; }
    60%  { background-color: #d4f7e2; }
    100% { background-color: transparent; }
}
.rating-cell-updated { animation: ratingFlash 1.5s ease-out; }

.inline-book-select {
    margin-top: 0.25rem; font-size: 0.8rem; padding: 0.15rem 0.3rem;
    border: 1px solid var(--border); border-radius: 4px; background: var(--bg); max-width: 180px;
}
.missing-book { color: #c0392b; font-weight: 600; font-size: 0.85rem; }

.confirm-dialog { border: 2px solid #c0392b; background: #fff5f5; padding: 1rem 1.25rem; margin-top: 1rem; margin-bottom: 1rem; }
.card-remove-btn { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; }

/* Danger button (smaller variant) */
.btn-danger { background: #c0392b; color: #fff; border: none; padding: 0.35rem 0.85rem; border-radius: 4px; cursor: pointer; }
.btn-danger:hover { background: #a93226; }

/* Collapsible header */
.collapsible-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.collapsible-header h2,
.collapsible-header h3 { margin: 0; }
.collapse-toggle { font-size: 0.85rem; color: var(--muted); display: inline-flex; transition: transform 0.2s ease; }
details[open] > summary .collapse-toggle,
.collapse-toggle.is-expanded { transform: rotate(180deg); }

/* Smooth-height collapsible content (grid-row trick) */
.collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
    overflow: hidden;
}
.collapsible-content > * { min-height: 0; }
.collapsible-content.is-expanded { grid-template-rows: 1fr; }

/* Scroll-reveal for stat cards */
.scroll-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal, .scroll-reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--action); }
.invalid             { outline: 1px solid #c0392b; }
.validation-message  { color: #c0392b; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem; color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* Cover thumbnails */
.table-cover-thumb { display: block; max-height: 40px; width: auto; border-radius: 3px; margin: 0 auto 0.25rem auto; }
.book-card img.book-cover-sm { height: auto; max-height: 100px; width: auto; object-fit: contain; margin: 4px auto; }

/* Discussion / table cover images */
.discussion-cover-100 { width: 100px; height: auto; border-radius: 6px; display: block; margin-bottom: 0.5rem; flex-shrink: 0; }
.table-cover-60 { height: 60px; width: auto; border-radius: 4px; display: block; margin: 0 auto 0.25rem auto; }

/* Cover placeholder */
.cover-placeholder-block { display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--action) 6%, var(--bg)); border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); gap: 0.3rem; padding: 0.5rem; }
.cover-placeholder-100   { width: 100px; height: 140px; margin-bottom: 0.5rem; flex-shrink: 0; font-size: 2rem; }
.cover-placeholder-60    { height: 60px; width: 45px; margin-bottom: 0.25rem; font-size: 1.4rem; }

/* Cover loading wrapper — shows a spinner until image loads */
@keyframes coverSpin { to { transform: rotate(360deg); } }
.cover-load-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cover-load-wrap .cover-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.cover-load-wrap .cover-spinner::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid var(--border);
    border-top-color: var(--action);
    border-radius: 50%;
    animation: coverSpin 0.7s linear infinite;
}
.cover-load-wrap.img-loaded .cover-spinner { display: none; }
/* Named wrapper sizes */
.disc-summary-cover-wrap { width: 110px; height: 160px; border-radius: 8px; }
.disc-next-pick-cover-wrap { width: 160px; height: 230px; border-radius: 10px; }
.disc-summary-member-away { font-style: italic; }

/* ── Profile dropdown in nav ─────────────────────────────────────────────── */
.nav-profile {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--primary-alt);
}

.nav-profile-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    color: var(--nav-text, #f1fff6);
    fill: var(--nav-text, #f1fff6);
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.nav-profile-name {
    min-width: 0;
    white-space: nowrap;
}

.nav-profile-btn:hover,
.nav-profile-btn--open {
    background: var(--bg);
    color: var(--text);
    fill: var(--text);
}

.nav-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--profile-color, #4caf82);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.nav-profile-btn:hover .nav-profile-avatar {
    transform: scale(1.1);
}

.nav-profile-caret {
    font-size: 0.65rem;
    transition: transform 0.2s;
    opacity: 0.7;
    color: inherit;
    fill: currentColor;
}

.nav-profile-caret--open {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--primary-alt);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    overflow: hidden;
    z-index: 500;
    transform-origin: top right;
    animation: dropdownIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.nav-dropdown a,
.nav-dropdown button.nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: var(--nav-text, #f1fff6);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    box-sizing: border-box;
    appearance: none;
}

.nav-dropdown button.nav-dropdown-item {
    font: inherit;
}

.nav-dropdown a:hover,
.nav-dropdown button.nav-dropdown-item:hover {
    background: rgba(255,255,255,0.1);
    color: var(--nav-text, #f1fff6);
}

.nav-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0;
}

/* ── User Settings page ──────────────────────────────────────────────────── */
.settings-card {
    max-width: 560px;
}

.settings-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.settings-card-header h2 { margin-bottom: 0; }

.unsaved-indicator {
    color: var(--warning, #d0801a);
    font-size: 0.85rem;
    font-style: italic;
    white-space: nowrap;
}

.settings-page-tabs {
    margin-bottom: 1rem;
}

.settings-field {
    margin-bottom: 1.25rem;
}

.settings-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.settings-field input[type="text"],
.settings-field input[type="url"],
.settings-field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

/* Profile icon row in settings */
.profile-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.25rem;
}

.profile-image-source-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.profile-image-source-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    margin-top: 0;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.profile-image-source-tabs button .theme-icon { color: currentColor; }

.profile-image-source-tabs button.active {
    background: var(--action);
    color: var(--action-text);
    border-color: var(--action);
}

.profile-image-upload-button {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    background: var(--action);
    color: var(--action-text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-image-upload-button .theme-icon { color: currentColor; }

.profile-image-upload-button:hover {
    background: var(--primary-alt);
}

.profile-image-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.settings-password-actions {
    margin: -0.35rem 0 1.25rem;
}

.settings-password-actions button {
    margin-top: 0;
}

/* ── Unsaved Changes Dialog ─────────────────────────────────────────────── */
.unsaved-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.unsaved-dialog {
    background: var(--surface, #1a2a40);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.unsaved-dialog h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--text);
}

.unsaved-dialog p {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
}

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

/* ── Theme Palette ───────────────────────────────────────────────────────── */
.theme-palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem;
    cursor: pointer;
    margin-top: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 72px;
}

.theme-swatch:hover {
    border-color: var(--action);
    background: transparent;
}

.theme-swatch--active {
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action);
}

.theme-swatch-preview {
    width: 60px;
    height: 42px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.15);
}

.theme-swatch-nav {
    height: 12px;
    flex-shrink: 0;
}

.theme-swatch-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.theme-swatch-btn {
    width: 28px;
    height: 10px;
    border-radius: 3px;
    display: block;
}

.theme-swatch-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.statistics-scroll-top-pill {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 56px + 0.6rem);
    left: 50%;
    transform: translate(-50%, -0.5rem);
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    border: 1px solid color-mix(in srgb, var(--action) 42%, var(--border));
    background: color-mix(in srgb, var(--surface) 88%, var(--action) 12%);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    font-weight: 800;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.statistics-scroll-top-pill--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* ── Custom Site Themes ──────────────────────────────────────────────────── */
.custom-theme-scroll-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.custom-theme-scroll-row::-webkit-scrollbar {
    height: 4px;
}

.custom-theme-scroll-row::-webkit-scrollbar-track {
    background: transparent;
}

.custom-theme-scroll-row::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 0;
    border-radius: 2px;
}

.theme-swatch--current {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

.custom-theme-add-btn .custom-theme-add-preview {
    background: color-mix(in srgb, var(--action) 12%, var(--bg));
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-theme-add-icon {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1;
}

.custom-theme-color-editor {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}

.custom-theme-header-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.6rem;
    margin-bottom: 0.75rem;
}

.custom-theme-header-row input[type="text"] {
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    height: 2.4rem;
    margin: 0;
}

.custom-theme-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.custom-theme-header-actions button {
    height: 2.4rem;
    margin-top: 0;
    white-space: nowrap;
}

.custom-theme-color-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-theme-color-row-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.25rem;
    min-width: 4.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.custom-theme-color-row:hover .custom-theme-color-row-actions,
.custom-theme-color-row:focus-within .custom-theme-color-row-actions {
    opacity: 1;
    visibility: visible;
}

.custom-theme-color-action {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.custom-theme-color-action:hover {
    background: var(--bg);
}

.custom-theme-color-action .theme-icon {
    width: 1rem;
    height: 1rem;
}

.custom-theme-color-label {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
    min-width: 11rem;
    flex-shrink: 0;
}

.custom-theme-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.custom-theme-delete-confirm {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #c0392b) 8%, var(--bg));
    font-size: 0.88rem;
}

@media (max-width: 480px) {
    .custom-theme-header-row {
        grid-template-columns: 1fr;
    }
    .custom-theme-header-actions {
        justify-content: stretch;
    }
    .custom-theme-header-actions button {
        flex: 1 1 0;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    .custom-theme-color-label {
        min-width: 7rem;
        font-size: 0.75rem;
    }
    .custom-theme-color-row {
        gap: 0.35rem;
    }
    .custom-theme-color-row-actions {
        min-width: 3.8rem;
    }
    .custom-theme-color-action {
        width: 1.7rem;
        height: 1.7rem;
    }
    .custom-theme-editor-actions {
        justify-content: flex-end;
    }
}

@media (hover: none) {
    .custom-theme-color-row-actions {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading Spinner ───────────────────────────────────────────────────── */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem 0;
}
.loading-spinner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--action);
    animation: spinnerBounce 1.2s ease-in-out infinite;
}
.loading-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.loading-spinner-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes spinnerBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Skeleton Loader ───────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}
.skeleton-line { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-line--short { width: 60%; }
.skeleton-line--medium { width: 80%; }
.skeleton-card {
    height: 5rem;
    border-radius: 10px;
    border: 1px solid var(--border);
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Error Alert ───────────────────────────────────────────────────────── */
.error-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, #c0392b 8%, var(--surface));
    border: 1px solid color-mix(in srgb, #c0392b 30%, var(--border));
    border-radius: 8px;
    margin: 0.5rem 0;
}
.error-alert-message { color: #c0392b; font-size: 0.9rem; flex: 1; }
.error-alert-retry {
    background: transparent;
    color: var(--action);
    border: 1px solid var(--action);
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 5px;
    margin-top: 0;
    white-space: nowrap;
}
.error-alert-retry:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }

/* ── Filter Result Count ───────────────────────────────────────────────── */
.table-filter-count {
    font-size: 0.8rem;
    color: var(--muted);
    margin-left: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Rating Slider Field ───────────────────────────────────────────────── */
.rating-slider-field { margin-bottom: 0; }
.rating-slider-label,
.home-personal-editor-field--rating .rating-slider-label {
    font-size: 0.85rem;
    font-weight: 500;
}

.rating-slider-combo,
.home-personal-editor-slider {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.rating-slider-combo input[type="range"],
.home-personal-editor-slider input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--action);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 8px;
    box-shadow: none;
}

.rating-slider-combo input[type="range"]::-webkit-slider-runnable-track,
.home-personal-editor-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 0.38rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--action) 34%, var(--border));
    background: color-mix(in srgb, var(--action) 24%, var(--surface));
}

.rating-slider-combo input[type="range"]::-webkit-slider-thumb,
.home-personal-editor-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.36rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--action);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--action) 46%, transparent);
}

.rating-slider-combo input[type="range"]::-moz-range-track,
.home-personal-editor-slider input[type="range"]::-moz-range-track {
    height: 0.38rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--action) 34%, var(--border));
    background: color-mix(in srgb, var(--action) 24%, var(--surface));
}

.rating-slider-combo input[type="range"]::-moz-range-progress,
.home-personal-editor-slider input[type="range"]::-moz-range-progress {
    height: 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--action) 58%, var(--surface));
}

.rating-slider-combo input[type="range"]::-moz-range-thumb,
.home-personal-editor-slider input[type="range"]::-moz-range-thumb {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--action);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--action) 46%, transparent);
}

/* ── Button cleanup: consistent hierarchy ──────────────────────────────── */
button.btn-small,
.btn-small {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 5px;
}
button.btn-ghost,
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: none;
    padding: 0.35rem 0.7rem;
}
button.btn-ghost:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }
.danger-outline {
    background: transparent;
    color: #c0392b;
    border: 1px solid #c0392b;
}
.danger-outline:hover { background: color-mix(in srgb, #c0392b 8%, transparent); }

/* ── Enhanced Cover Placeholder ────────────────────────────────────────── */
.cover-placeholder-title {
    font-size: 0.65rem;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    color: var(--muted);
    opacity: 0.8;
}

/* ── Empty State ───────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
}
.empty-state .theme-icon { font-size: 2rem; opacity: 0.6; }
.empty-state-text { margin: 0; font-size: 0.95rem; }

/* ── Home Skeleton Grid (#11) ──────────────────────────────────────────── */
.home-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* ── Shared UI Primitives ─────────────────────────────────────────────── */
.ui-button,
.ui-icon-button {
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    margin-top: 0;
}

.ui-button--primary {
    background: var(--action);
    border-color: var(--action);
    color: var(--action-text);
}

.ui-button--secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.ui-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text);
}

.ui-button--danger {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.ui-button--sm { min-height: 1.85rem; padding: 0.25rem 0.55rem; font-size: 0.82rem; }
.ui-button--lg { min-height: 2.7rem; padding: 0.65rem 1rem; }

.ui-icon-button {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 0;
    border-radius: 6px;
    line-height: 1;
}

.ui-icon-button--sm {
    width: 1.85rem;
    height: 1.85rem;
}

.ui-icon-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}

.ui-icon-button--secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.ui-icon-button--danger {
    background: transparent;
    border-color: transparent;
    color: #c0392b;
}

.ui-button:hover:not(:disabled),
.ui-icon-button:hover:not(:disabled) {
    transform: var(--interactive-lift);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.ui-button--ghost:hover:not(:disabled),
.ui-icon-button--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--action) 10%, transparent);
    color: var(--text);
    box-shadow: none;
}

.ui-button:active:not(:disabled),
.ui-icon-button:active:not(:disabled) {
    transform: translateY(0);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-tab-button:focus-visible {
    outline: none;
    box-shadow: var(--interactive-ring);
}

.ui-button__spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: coverSpin 0.7s linear infinite;
}

.ui-tabs {
    position: relative;
}

.ui-tab-button {
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.ui-tab-button:hover:not(.active) {
    transform: translateY(-1px);
}

.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.48);
}

.ui-modal {
    width: min(620px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
    animation: summary-pop-in var(--motion-slow) var(--ease-emphasized) both;
}

.ui-modal--sm { width: min(420px, 100%); }
.ui-modal--lg { width: min(840px, 100%); }

.ui-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0;
}

.ui-modal__header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.ui-modal__body {
    padding: 1rem;
}

.ui-modal__close {
    flex: 0 0 auto;
}

/* ── Unified Toasts ───────────────────────────────────────────────────── */
.ui-toast-region {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 16000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    width: min(360px, calc(100vw - 1.5rem));
    pointer-events: none;
}

.ui-toast {
    width: fit-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: var(--primary-alt);
    color: var(--nav-text, #fff);
    border: 1px solid color-mix(in srgb, var(--action) 34%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    animation: toastSlideIn var(--motion-slow) var(--ease-emphasized) both;
    transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard);
    pointer-events: auto;
}

.ui-toast strong,
.ui-toast__content strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 700;
}

.ui-toast__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
}

.ui-toast__content small {
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ui-toast__avatar {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.ui-toast__icon {
    color: currentColor;
}

.ui-toast__close {
    color: currentColor;
}

.ui-toast--success { border-color: color-mix(in srgb, #31a66a 52%, var(--border)); }
.ui-toast--warning { border-color: color-mix(in srgb, var(--warning) 62%, var(--border)); }
.ui-toast--error { border-color: color-mix(in srgb, #c0392b 62%, var(--border)); }
.ui-toast--info { border-color: color-mix(in srgb, var(--action) 52%, var(--border)); }

.ui-toast--fade {
    opacity: 0;
    transform: translateY(0.45rem);
}

.tab-pane:has(.my-books-form-overlay) {
    animation: none !important;
    transform: none !important;
}

/* ── Shared Microinteractions ─────────────────────────────────────────── */
.book-card,
.mobile-book-card,
.currently-reading-card,
.home-next-pick-card,
.social-row,
.shared-item,
.ol-result-item,
button.ol-result-item,
.disc-book-item,
.theme-swatch,
.book-list-card,
.reading-list-card,
.feed-item,
.home-feed-item,
.stats-cover-clickable {
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.book-card:hover,
.mobile-book-card:hover,
.currently-reading-card:hover,
.home-next-pick-card:hover,
.social-row:has(button:hover),
.shared-item:has(button:hover),
.ol-result-item:hover,
button.ol-result-item:hover,
.disc-book-item:hover,
.theme-swatch:hover,
.book-list-card:hover,
.reading-list-card:hover,
.feed-item:hover,
.home-feed-item:hover {
    transform: var(--interactive-lift);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.book-card:focus-within,
.mobile-book-card:focus-within,
.currently-reading-card:focus-within,
.social-row:focus-within,
.shared-item:focus-within,
.ol-result-item:focus-within,
.disc-book-item:focus-visible,
.theme-swatch:focus-visible,
.book-list-card:focus-within,
.reading-list-card:focus-within,
.feed-item:focus-within,
.home-feed-item:focus-within {
    box-shadow: var(--interactive-ring);
}

.social-person,
.friend-note-display,
.stats-cover-clickable,
.timeline-cover-dot,
.podium-cover.stats-cover-clickable {
    transition:
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard),
        filter var(--motion-fast) var(--ease-standard);
}

.social-person:hover,
.friend-note-display:hover,
.stats-cover-clickable:hover {
    transform: scale(1.015);
}

@media (max-width: 640px) {
    .ui-toast-region {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
        align-items: stretch;
    }

    .ui-toast {
        width: 100%;
    }

    .ui-modal-overlay {
        align-items: stretch;
        padding: 0.65rem;
    }

    .ui-modal {
        width: 100%;
        max-height: calc(100vh - 1.3rem);
    }

    .book-card:hover,
    .mobile-book-card:hover,
    .currently-reading-card:hover,
    .home-next-pick-card:hover,
    .social-row:has(button:hover),
    .shared-item:has(button:hover),
    .ol-result-item:hover,
    button.ol-result-item:hover,
    .disc-book-item:hover,
    .theme-swatch:hover,
    .book-list-card:hover,
    .reading-list-card:hover,
    .feed-item:hover,
    .home-feed-item:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-button,
    .ui-icon-button,
    .ui-tab-button,
    .ui-modal,
    .ui-toast,
    .book-card,
    .mobile-book-card,
    .currently-reading-card,
    .home-next-pick-card,
    .social-row,
    .shared-item,
    .ol-result-item,
    button.ol-result-item,
    .disc-book-item,
    .theme-swatch,
    .book-list-card,
    .reading-list-card,
    .feed-item,
    .home-feed-item,
    .stats-cover-clickable,
    .social-person,
    .friend-note-display {
        animation: none;
        transition: none;
        transform: none;
    }
}