/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body { overflow-x: hidden; }

/* ================================================================
   SIGNUP WIZARD
   ================================================================ */

.signup-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* ── Check-email page ───────────────────────────────────────────────────── */
.check-email-wrap { text-align: center; padding-top: 48px; max-width: 480px; }
.ce-icon { font-size: 56px; margin-bottom: 20px; }
.ce-heading { font-size: 1.6rem; color: #3d2b1f; margin-bottom: 12px; }
.ce-body { color: #6b4f3a; line-height: 1.7; margin: 0 auto 28px; }

.ce-slides {
    position: relative;
    background: #fdf8f0;
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    padding: 32px 28px 28px;
    margin-bottom: 14px;
    min-height: 140px;
}
.ce-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: ceFadeIn .45s ease;
}
.ce-slide.active { display: flex; }
@keyframes ceFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ce-slide-icon { font-size: 36px; }
.ce-slide-title { font-size: 1rem; font-weight: bold; color: #3d2b1f; }
.ce-slide-desc { font-size: .88rem; color: #7a5c3e; line-height: 1.6; max-width: 320px; }

.ce-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.ce-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d9cfc5; cursor: pointer; transition: background .3s;
}
.ce-dot.active { background: #e8c97a; }

.ce-hint { font-size: .85rem; color: #999; margin-bottom: 6px; }
.ce-back { margin-top: 28px; }

/* Admin impersonation banner */
.verified-flash {
    background: #4a7c59; color: #fff;
    text-align: center; padding: 10px 16px;
    font-size: .9rem; font-weight: 600;
    position: sticky; top: 0; z-index: 10001;
}
.impersonate-banner {
    background: #c0392b; color: #fff;
    text-align: center; padding: 8px 16px;
    font-size: .88rem; font-weight: 600;
    position: sticky; top: 0; z-index: 9999;
}
.impersonate-banner a { color: #fff; text-decoration: underline; }

/* Back link */
.signup-back-wrap { margin-bottom: 12px; }
.signup-back-link { font-size: .85rem; color: #7a5c3e; text-decoration: none; opacity: .75; }
.signup-back-link:hover { opacity: 1; text-decoration: underline; }

/* Step indicator */
.signup-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    gap: 0;
}
.signup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: .4;
    transition: opacity .2s;
}
.signup-step.active,
.signup-step.done { opacity: 1; }
.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c9a87c;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}
.signup-step.done .step-num { background: #7a5c3e; }
.signup-step.active .step-num { background: #4a2e14; box-shadow: 0 0 0 3px #c9a87c55; }
.step-label { font-size: .75rem; color: #555; }
.signup-step-line {
    flex: 1;
    height: 2px;
    background: #c9a87c;
    max-width: 80px;
    margin: 0 8px;
    margin-bottom: 16px;
}

/* Screens — show/hide */
.signup-screen { display: none; }
.signup-screen.active { display: block; }

/* Disclaimer banner */
.signup-disclaimer {
    background: #fdf3e3;
    border-left: 4px solid #c9a87c;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: .875rem;
    color: #5a3e1b;
    border-radius: 0 4px 4px 0;
}

/* Errors */
.signup-errors {
    background: #fdecea;
    border-left: 4px solid #c0392b;
    padding: 10px 14px 10px 28px;
    margin-bottom: 16px;
    border-radius: 0 4px 4px 0;
    font-size: .875rem;
    color: #7b1a1a;
}

/* Login lockout card */
.login-lockout {
    text-align: center;
    background: #fff7f6;
    border: 1px solid #e8b4b8;
    border-radius: 8px;
    padding: 28px 24px 24px;
    margin-bottom: 20px;
}
.login-lockout__icon { font-size: 2.2rem; margin-bottom: 12px; }
.login-lockout__msg  { color: #7b1a1a; font-size: .9rem; margin-bottom: 20px; line-height: 1.5; }
.login-lockout__reset {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 14px;
    padding: 11px 32px;
}
.login-lockout__timer { font-size: .8rem; color: #888; margin: 0; }

/* Responsive 2-column grid */
.signup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
@media (max-width: 520px) {
    .signup-grid { grid-template-columns: 1fr; }
}

/* Field groups */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.field-group label {
    font-size: .85rem;
    font-weight: 600;
    color: #333;
}
.field-group input,
.field-group select {
    padding: 8px 10px;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    font-size: .9rem;
    background: #fffdf8;
    color: #333;
    width: 100%;
}
.field-group input:focus,
.field-group select:focus {
    outline: none;
    border-color: #7a5c3e;
    box-shadow: 0 0 0 2px #c9a87c44;
}
.field-group--color { grid-column: span 1; }
.field-group--color input[type="color"] {
    padding: 2px 4px;
    height: 40px;
    cursor: pointer;
}
.req { color: #c0392b; }
.field-optional { font-size: .78rem; color: #9a7a55; font-weight: normal; }

/* Field hints */
.field-hint { font-size: .78rem; min-height: 1em; }
.hint-ok    { color: #27ae60; }
.hint-error { color: #c0392b; }

/* Navigation buttons */
.signup-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.btn-next, .btn-submit {
    background: #7a5c3e;
    color: #fff;
    border: none;
    padding: 9px 28px;
    border-radius: 4px;
    font-size: .9rem;
    line-height: 1.4;
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
    transition: background .15s;
}
.btn-next:hover, .btn-submit:hover { background: #4a2e14; }
.btn-back {
    background: none;
    border: 1px solid #7a5c3e;
    color: #7a5c3e;
    padding: 9px 20px;
    border-radius: 4px;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
}
.btn-back:hover { background: #f2e6d9; }
.btn-skip {
    font-size: .82rem;
    color: #888;
    margin-left: auto;
    text-decoration: underline;
}

/* Quote footer */
.signup-quote {
    margin-top: 36px;
    padding: 14px 18px;
    border-top: 1px solid #d9c7b0;
    font-size: .82rem;
    color: #7a6040;
    font-style: italic;
    line-height: 1.5;
}
.signup-quote-meta {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: .78rem;
    color: #999;
}

/* Legal notice on signup screen 2 */
/* Password show/hide toggle */
.pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pwd-wrap input[type="password"],
.pwd-wrap input[type="text"] {
    flex: 1;
    padding-right: 40px;
}
.pwd-eye {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a7a55;
}
.pwd-eye:hover { color: #5a3e2b; }
.eye-icon { width: 18px; height: 18px; display: block; }

.signup-legal {
    font-size: .78rem;
    color: #888;
    margin: 16px 0 0;
    line-height: 1.5;
}
.signup-legal a {
    color: #7a5c3e;
    text-decoration: underline;
}

/* Legal footnote on edit-profile save */
.profile-legal-note {
    font-size: .78rem;
    color: #aaa;
    margin: 10px 0 0;
    line-height: 1.5;
}
.profile-legal-note a {
    color: #7a5c3e;
    text-decoration: underline;
}

/* Legal pages (/cgu, /confidentialite) */
.legal-page {
    max-width: 740px;
    margin: 32px auto;
    padding: 0 16px 48px;
    color: #333;
    line-height: 1.7;
}
.legal-page h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
    color: #3b2a1a;
}
.legal-page h2 {
    font-size: 1.05rem;
    margin: 28px 0 8px;
    color: #3b2a1a;
    border-bottom: 1px solid #e8ddd0;
    padding-bottom: 4px;
}
.legal-meta {
    font-size: .82rem;
    color: #999;
    margin-bottom: 20px;
}
.legal-meta a { color: #7a5c3e; }
.legal-notice-box {
    background: #fdf8f2;
    border-left: 3px solid #c8a97a;
    padding: 10px 14px;
    font-size: .85rem;
    color: #6b4f2a;
    margin-bottom: 24px;
    border-radius: 0 4px 4px 0;
}
.legal-page ul {
    padding-left: 20px;
    margin: 8px 0;
}
.legal-page ul li { margin-bottom: 4px; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: 10px 0;
}
.legal-table th, .legal-table td {
    border: 1px solid #d9c7b0;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}
.legal-table th {
    background: #f5ede0;
    font-weight: 600;
}
.legal-footer-link {
    margin-top: 32px;
    font-size: .82rem;
    color: #999;
}
.legal-footer-link a { color: #7a5c3e; }

/* Language picker on signup screen 1 */
.signup-lang-picker {
    text-align: center;
    margin-bottom: 18px;
}
.signup-lang-picker__label {
    display: block;
    font-size: .78rem;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: .01em;
}
.signup-lang-picker__flags {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.signup-lang-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 18px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-size: .8rem;
    color: #555;
}
.signup-lang-btn img {
    border-radius: 3px;
    display: block;
}
.signup-lang-btn:hover {
    background: #fdf3e3;
    border-color: #c9a87c;
}
.signup-lang-btn.active {
    border-color: #7a5c3e;
    background: #fdf3e3;
    color: #4a2e14;
    font-weight: 600;
}

/* ================================================================
   PROFILE COMPLETION BAR
   ================================================================ */

.completion-bar-wrap {
    margin: 12px 0 20px;
}
.completion-bar-label {
    font-size: .85rem;
    margin-bottom: 6px;
    color: #555;
}
.completion-cta {
    font-size: .82rem;
    color: #7a5c3e;
}
.completion-bar-track {
    width: 100%;
    background: #e8d9c6;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}
.completion-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #c9a87c, #7a5c3e);
    border-radius: 6px;
    transition: width .4s ease;
    min-width: 4px;
}

/* ================================================================
   PROFILE EDIT PAGE
   ================================================================ */

.profile-edit-wrap { max-width: 720px; }
.profile-edit-wrap h1 { margin-bottom: 8px; }

.profile-section {
    margin-top: 28px;
    padding: 20px;
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 6px;
}
.profile-section-title {
    font-size: .85rem; font-weight: 700; color: #4a2e14;
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 14px;
}

/* ── Profile: empty completion field highlight ───────────────────────────── */
.profile-info-item--empty {
    background: #fff5f5;
    border-left: 3px solid #e8a0a0;
    border-radius: 4px;
    padding-left: 10px;
}
.profile-value--empty {
    color: #c08080;
    font-style: italic;
    font-size: .85rem;
}
.profile-photo-placeholder--empty {
    border: 2px dashed #e8a0a0;
    background: #fff5f5;
}

/* ── Public profile: header (mobile-first) ──────────────────────────────── */
.pub-profile-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.pub-profile-avatar {
    width: 80px; height: 80px;
    flex-shrink: 0;
}
.pub-profile-header-info { flex: 1; }
.pub-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pub-profile-btn { flex: 1 1 100%; text-align: center; }

@media (min-width: 481px) {
    .pub-profile-header { flex-direction: row; align-items: flex-start; }
    .pub-profile-avatar { width: 100px; height: 100px; }
    .pub-profile-btn { flex: 0 0 auto; }
}

/* ── Public profile: last reading ────────────────────────────────────────── */
.pub-last-reading {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    border-radius: 6px;
    transition: background .15s;
}
.pub-last-reading:hover { background: #f5ebe0; }
.pub-last-cover {
    width: 54px; height: 76px; object-fit: cover;
    border-radius: 3px; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.pub-last-info {
    display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.pub-last-rating { color: #c5a97a; font-size: .9rem; letter-spacing: .05em; }
.pub-last-duration {
    display: inline-block;
    font-size: .72rem; color: #8a6a4a;
    background: #f0e4d0; border-radius: 10px;
    padding: 2px 8px; width: fit-content;
}
.pub-last-comment {
    font-style: italic; font-size: .82rem; color: #7a5c3e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* ── Public profile: quotes ──────────────────────────────────────────────── */
.pub-quote-list { display: flex; flex-direction: column; gap: 12px; }
.pub-quote-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: #fdf9f3;
    border: 1px solid #e5d9c8;
    border-radius: 6px;
}
.pub-quote-cover-link { flex-shrink: 0; }
.pub-quote-cover {
    width: 40px; height: 56px; object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.pub-quote-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.pub-quote-text {
    font-style: italic; font-size: .88rem; color: #2c1a0e; line-height: 1.5;
}
.pub-quote-meta {
    font-size: .74rem; color: #a08060; line-height: 1.4;
}
.pub-quote-book-link {
    color: #7a5235; text-decoration: none; font-weight: 600;
}
.pub-quote-book-link:hover { text-decoration: underline; }
.pub-quote-rating { color: #c5a97a; }
.pub-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 16px;
}
.pub-page-btn {
    min-width: 36px; text-align: center;
    padding: 4px 10px; font-size: .85rem;
}
.pub-page-btn--disabled {
    opacity: .4; pointer-events: none; cursor: default;
}
.pub-page-info { font-size: .82rem; color: #8a6a4a; }

/* ── Public profile: currently reading ──────────────────────────────────── */
.pub-reading-list { display: flex; flex-direction: column; gap: 12px; }
.pub-reading-item {
    display: flex; gap: 12px; align-items: center;
    text-decoration: none; color: inherit;
    padding: 8px; border-radius: 6px;
    transition: background .15s;
}
.pub-reading-item:hover { background: #f5ebe0; }
.pub-reading-cover {
    width: 46px; height: 64px; object-fit: cover;
    border-radius: 3px; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.pub-reading-cover--initial {
    background: #6b4c2a; color: #f5e6c8;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
}
.pub-reading-info {
    display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
}
.pub-reading-title {
    font-weight: 600; font-size: .9rem; color: #2c1a0e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-reading-author {
    font-size: .78rem; color: #7a5c3e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-reading-bar-wrap {
    height: 5px; background: #e8ddd0; border-radius: 3px;
    overflow: hidden; margin-top: 4px;
}
.pub-reading-bar { height: 100%; border-radius: 3px; transition: width .3s; }
.pub-reading-pct { font-size: .72rem; font-weight: 700; margin-top: 1px; }
.profile-section h2 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: #4a2e14;
}
.section-note { font-size: .78rem; color: #999; font-weight: normal; }
.section-disclaimer {
    font-size: .82rem;
    color: #7a6040;
    font-style: italic;
    margin-bottom: 16px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
@media (max-width: 520px) {
    .profile-grid { grid-template-columns: 1fr; }
}

.income-input-wrap,
.edu-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.income-input-wrap input,
.edu-input-wrap input { flex: 1; }
.income-unit {
    font-size: .78rem;
    color: #888;
    white-space: nowrap;
}

/* Tooltip */
.tooltip-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
}
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c9a87c;
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
    margin-left: 4px;
    vertical-align: middle;
}
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: .78rem;
    font-weight: normal;
    padding: 8px 12px;
    border-radius: 4px;
    width: 240px;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 100;
}
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.profile-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}
.btn-primary {
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    background: #7a5c3e;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 4px;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.btn-primary:hover { background: #4a2e14; }
.btn-secondary {
    display: inline-flex;
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent;
    color: #7a5c3e;
    border: 1px solid #7a5c3e;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: .9rem;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s;
}
.btn-secondary:hover { background: #f2e6d9; }
.btn-danger {
    display: inline-flex;
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent;
    color: #c0392b;
    border: 1px solid #c0392b;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: .9rem;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s, color .15s;
}
.btn-danger:hover { background: #c0392b; color: #fff; }
.mb-col-count {
    display: inline-block;
    margin-left: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: #9a7a55;
    background: #f0e6d6;
    border-radius: 8px;
    padding: 1px 6px;
    vertical-align: middle;
}
.mb-col-count--full {
    color: #b8860b;
    background: #fdf0d0;
}
.mb-col-maxed {
    opacity: .6;
    cursor: not-allowed;
}
.mb-import-locked {
    opacity: .55;
    border-style: dashed;
}
.mb-import-locked:hover {
    opacity: .8;
    background: #fff8f0;
}

/* Profile info items (read view) */
.profile-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid #ede0cc;
}
.profile-info-item:last-child { border-bottom: none; }
.profile-info-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
}
.profile-info-value {
    font-size: .92rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Colour swatch */
.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

/* Generation label inline with age */
.profile-generation {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #e8ddd0;
    color: #5a3e1b;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Email row */
.profile-email-row {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.email-verified-badge {
    font-size: .75rem;
    font-weight: 700;
    color: #27ae60;
    background: #eafaf1;
    border: 1px solid #a9dfbf;
    padding: 2px 9px;
    border-radius: 10px;
}
.email-unverified-badge {
    font-size: .75rem;
    color: #999;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 2px 9px;
    border-radius: 10px;
}
.verify-form { display: inline; }
.btn-verify {
    font-size: .75rem;
    background: none;
    border: 1px solid #c9a87c;
    color: #7a5c3e;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.btn-verify:hover { background: #f2e6d9; }

/* Profile alert banners */
.profile-alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: .875rem;
    border-left: 4px solid;
}
.profile-alert--info  { background: #eaf4fd; border-color: #3498db; color: #154360; }
.profile-alert--ok    { background: #eafaf1; border-color: #27ae60; color: #145a32; }
.profile-alert--error { background: #fdecea; border-color: #c0392b; color: #7b1a1a; }

/* Account type badge */
.profile-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.profile-badge--standard    { background: #e8ddd0; color: #5a3e1b; }
.profile-badge--bookwatcher { background: #d0e8d4; color: #1b5a2a; }
.profile-badge--admin       { background: #333;    color: #fff;    }
.profile-badge--premium     { background: linear-gradient(135deg, #b8860b, #ffd700);
                              color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }


/* Pre-Login Page Adjustments */

.prelogin-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Center vertically */
    text-align: center;
}

.prelogin-form {
    width: 100%;
    max-width: 400px;
    background-color: #fbf5eb; /* Match the lighter beige */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* Overall page background (darker beige) */
body {
    background-color: #f2e6d9; /* Slightly darker beige */
    color: #333;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}


/* Main container background (lighter beige) */
.container {
    background-color: #fbf5eb; /* Lighter beige to resemble a book page */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    flex: 1;
}
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── Navbar ── */
.navbar {
    background: #2c2c2c;
    display: flex;
    align-items: stretch;
    padding: 0 16px;
    gap: 0;
    position: relative;
    flex-wrap: wrap;
}

.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    flex-shrink: 0;
    margin-right: 8px;
}

.navbar-logo {
    color: #e8d5b7;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    letter-spacing: .4px;
    white-space: nowrap;
}
.navbar-logo:hover { color: #fff; text-decoration: none; }

/* Hamburger button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 12px;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #e8d5b7;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

/* Nav menu */
.navbar-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
}
.navbar-menu--guest {
    flex: none;
    margin-left: auto;
}
.nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Plain nav links */
.nav-link {
    color: #e8d5b7;
    text-decoration: none;
    padding: 10px 10px;
    font-size: .875rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.nav-link:hover { color: #fff; text-decoration: none; }

/* Dropdown group */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    background: none;
    border: none;
    color: #e8d5b7;
    font-size: .875rem;
    cursor: pointer;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: inherit;
    height: 100%;
}
.nav-dropdown-toggle:hover { color: #fff; }
.nav-caret {
    font-size: .6rem;
    transition: transform .2s;
    line-height: 1;
}
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2c2c2c;
    min-width: 155px;
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 300;
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    color: #e8d5b7;
    text-decoration: none;
    padding: 9px 16px;
    font-size: .875rem;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: #3a3a3a; color: #fff; }

/* Search form in navbar */
.nav-search-form {
    display: flex;
    align-items: stretch;
    height: 30px;
    overflow: hidden;
    margin: 0 8px;
}
.nav-search-scope {
    background: #3d3d3d;
    color: #e8d5b7;
    border: 1px solid #555;
    border-right: none;
    padding: 0 4px;
    font-size: .78rem;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    outline: none;
    height: 30px;
}
.nav-search-input {
    background: #3d3d3d;
    color: #e8d5b7;
    border: 1px solid #555;
    border-right: none;
    padding: 0 8px;
    font-size: .8rem;
    width: 130px;
    outline: none;
    height: 30px;
}
.nav-search-input::placeholder { color: #999; }
.nav-search-btn {
    background: #5c4033;
    color: #e8d5b7;
    border: 1px solid #555;
    padding: 0 9px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: .9rem;
    display: flex;
    align-items: center;
}
.nav-search-btn:hover { background: #7a5c3e; }

/* Right: username + logout */
.nav-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.nav-username {
    color: #b8a88a;
    font-size: .8rem;
    padding: 10px 8px;
    white-space: nowrap;
}
.nav-logout {
    padding: 10px 8px;
    font-size: .875rem;
}

/* Search results */
.search-section { margin-bottom: 28px; }
.search-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #4a2e14;
    border-bottom: 2px solid #ede0cc;
    padding-bottom: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-count {
    background: #7a5c3e;
    color: #fff;
    font-size: .75rem;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
}
.search-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-item {
    padding: 7px 0;
    border-bottom: 1px solid #f0e8d8;
    font-size: .9rem;
}
.search-item:last-child { border-bottom: none; }
.search-item a { color: #4a2e14; text-decoration: none; font-weight: 600; }
.search-item a:hover { color: #7a5c3e; text-decoration: underline; }
.search-meta { color: #888; font-size: .85rem; }
.search-no-results { color: #888; font-style: italic; margin: 20px 0; }

/* Search popup progress bar */
.sp-progress-track { height:6px; background:#e0d0bc; border-radius:3px; margin:12px 0; overflow:hidden; }
#sp-progress-bar   { height:100%; width:0; background:#c9a87c; border-radius:3px;
                     transition: width 2.8s ease-out; }
.sp-status { font-size:.9rem; color:#7a5c3e; text-align:center; margin-bottom:8px; }

.button {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: #7a5c3e;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    font-size: .85rem;
    line-height: 1.4;
    box-sizing: border-box;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s;
}
.button:hover {
    background: #4a2e14;
    color: #fff;
    text-decoration: none;
}


/* Styling for Additional Book Information */
.additional-info {
    margin-top: 10px;
    background: #f9f5f0;
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid #e8ddd0;
    font-size: .85rem;
    color: #5a3e28;
}
.additional-info p { margin: 4px 0; }
.additional-info ul { list-style: none; padding: 0; margin: 4px 0 0; }
.additional-info ul li { margin: 2px 0; font-size: .82em; color: #7a5c3e; }
.additional-info a:hover { text-decoration: underline; cursor: pointer; }


.book-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: .875rem;
}
.book-table th, .book-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #ede3d6;
    text-align: left;
}
.book-table tbody tr:last-child td { border-bottom: none; }
.book-table th {
    background: #4a2e14;
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: none;
}
.book-table tbody tr:nth-child(even) td { background: #faf5ef; }
.book-table tbody tr:hover td { background: #f5ede3; }
.cover-cell img { display: block; max-width: 100%; height: auto; }
.placeholder {
    width: 50px;
    height: 75px;
    background: #f2e6d9;
    border: 1px solid #d9c7b0;
}

.book-actions .button {
    margin-right: 5px;
    margin-top: 10px;
}

#search-results {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.book-result {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.manual-entry-button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: bold;
}
.manual-entry-button:hover {
    background-color: #0056b3;
}



/* Footer Styling */
footer {
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    width: 100%;
}

/* ── Affiliate banner (Lot M2) ────────────────────────────────────────────── */
.aff-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #f5f0e8;
    border-top: 1px solid #3d2b1f;
    padding: 8px 16px;
    font-size: .8rem;
    color: #5a3e28;
    position: relative;
}
.aff-banner-text { flex: 1; min-width: 160px; text-align: center; }
.aff-banner-cta {
    white-space: nowrap;
    color: #3d2b1f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.aff-banner-cta:hover { color: #b8860b; }
.aff-banner-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1rem;
    color: #9a7a55;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.aff-banner-close:hover { color: #3d2b1f; }

/* Book List Styling */
.book-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #d9c7b0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Book Item */
.book-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    background: #fffdf8;
    border-bottom: 1px solid #e8ddd0;
    width: 100%;
}
.book-item:last-child { border-bottom: none; }

/* Book Details */
.book-details {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

/* book-details-body: used inside activity-body on book detail page */
.book-details-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Title heading for book detail */
.book-title {
    font-size: 1.4rem;
    color: #4a2e14;
    margin: 0 0 14px;
    line-height: 1.25;
}

/* Page title bar (title + action button side by side) */
.page-title-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-title-bar h1 { margin: 0; flex: 1; }

.book-info {
    flex: 1;
}

/* Book Cover Styling — list thumbnail */
.book-cover {
    width: 100px;
    height: 150px;
    background: #f2e6d9;
    border: 1px solid #d9c7b0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 14px;
    border-radius: 3px;
}

/* Book cover on detail page (larger, auto-height) */
.book-cover-detail {
    flex-shrink: 0;
}
.book-cover-detail img {
    max-width: 160px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d9c7b0;
    display: block;
}

/* Form Styling */
form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

form input[type="text"],
form input[type="number"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.quotes-section { margin-top: 20px; }

.quote-item {
    border-left: 3px solid #c9a87c;
    padding: 10px 14px;
    background: #faf5ef;
    border-radius: 0 4px 4px 0;
    flex: 1;
}
.quote-item p { margin: 0 0 6px; }
.quote-signal-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
}
.quote-signal-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    opacity: .45;
    padding: 10px 4px 0 0;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity .15s;
}
.quote-signal-btn:hover { opacity: .85; }
.quote-signal-btn.signaled { opacity: 1; cursor: default; }



/* Activity Dashboard */
.activity-section {
    border: 1px solid #d9c7b0;
    border-radius: 8px;
    overflow: visible;
    margin-bottom: 24px;
}

.activity-header {
    background: #4a2e14;
    color: #fff;
    padding: 10px 20px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-radius: 8px 8px 0 0;
}

.activity-body {
    background: #fffdf8;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

.activity-subheader {
    font-size: 0.78em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin: 22px 0 10px;
}

/* Stat Counters */
.stat-counters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-counter {
    flex: 1;
    min-width: 110px;
    background: #f9f5f0;
    border: 1px solid #e8ddd0;
    border-radius: 6px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}
.stat-counter--split {
    padding: 0;
    flex-direction: row;
    overflow: hidden;
}
.stat-half {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}
.stat-half + .stat-half {
    border-left: 1px solid #e8ddd0;
}
@media (max-width: 540px) {
    .stat-counter--split { flex-direction: column; }
    .stat-half + .stat-half { border-left: none; border-top: 1px solid #e8ddd0; }
}
.stat-breakdown--col {
    flex-direction: column;
    align-items: flex-start;
}
.stat-genre-1 {
    font-size: .82em;
}
.stat-genre-2 {
    font-size: .68em;
}

/* stat-item: same layout, used in book_detail for per-status counts */
.stat-item {
    flex: 1;
    min-width: 100px;
    background: #f9f5f0;
    border: 1px solid #e8ddd0;
    border-radius: 6px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.2em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 4px;
    color: #4a2e14;
}
.stat-number-date {
    font-size: 1.98em; /* 10% smaller than 2.2em */
}

/* ── My Reading Stats dynamic layout ──────────────────────────────────────── */
.bd-mystats-grid {
    justify-content: flex-start;
    gap: 20px 28px;
}
.bd-mystats-item {
    min-width: 90px;
}
.bd-mystats-status {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    margin-bottom: 6px;
}
.bd-mystats-completed { color: #5d8a5e; }
.bd-mystats-active    { color: #4a90d9; }
.bd-mystats-paused    { color: #c9a87c; }
.bd-mystats-dropped   { color: #c0392b; }

.stat-label {
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9a7c5e;
}

.stat-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e8ddd0;
}
.stat-breakdown--audio {
    border-top-style: dashed;
    margin-top: 6px;
    padding-top: 6px;
}
.stat-breakdown--audio span {
    background: #d6e8f0;
    color: #3a6a80;
}

.stat-breakdown span {
    background: #e8ddd0;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: .72em;
    color: #7a5c3e;
}

/* Active Readings List */
.active-readings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e8ddd0;
    border-radius: 5px;
    overflow: hidden;
}

.active-reading-item {
    border-bottom: 1px solid #e8ddd0;
}

.active-reading-item:last-child {
    border-bottom: none;
}

/* Row: cover + link + +page button side by side */
.active-reading-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Progress bar indented to align under title text (past the 30px cover + 8px gap) */
.ar-pace-bar {
    padding-left: 38px;
    margin: 2px 0;
}

.active-reading-row:hover {
    background-color: #f2e6d9;
}

.active-reading-row .active-reading-link {
    flex: 1;
    min-width: 0;
}

/* +page toggle button */
.page-update-toggle {
    flex-shrink: 0;
    margin: 0 10px;
    padding: 7px 11px;
    background: #c9a87c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 38px;
    min-width: 58px;
    line-height: 1;
}
.page-update-toggle:hover  { background: #b8956b; }
.page-update-toggle.is-active { background: #7a5c3e; }

/* Expandable update panel */
.page-update-panel {
    padding: 10px 14px 14px;
    background: #faf6f0;
    border-top: 1px solid #e8ddd0;
}
.page-update-fields {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.puf-label {
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    color: #777;
    gap: 4px;
}
.puf-label input {
    padding: 8px 10px;
    border: 1px solid #c9a87c;
    border-radius: 6px;
    font-size: .95rem;
    height: 44px;
    box-sizing: border-box;
    background: #fff;
}
.puf-label input[type="date"]   { width: 148px; height: 44px; box-sizing: border-box; }
.puf-label input[type="number"] { width: 88px; height: 44px; box-sizing: border-box; border: 1px solid #c9a87c; margin: 0; padding: 8px 10px; }
.page-update-submit {
    padding: 0 18px;
    background: #c9a87c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .9rem;
    cursor: pointer;
    height: 44px;
    white-space: nowrap;
}
.page-update-submit:hover    { background: #b8956b; }
.page-update-submit:disabled { opacity: .6; cursor: default; }
.page-update-msg { margin-top: 6px; font-size: .85rem; font-weight: 600; min-height: 1em; }
.pace-status-links { display: flex; gap: 1rem; margin-top: 10px; padding-top: 8px; border-top: 1px solid #4a3520; }
.pace-status-link { font-size: .8rem; color: #a08060; text-decoration: none; }
.pace-status-link:hover { color: #e8c97a; text-decoration: underline; }
.pace-status-link--completed { color: #7aaa8a; }
.pace-status-link--completed:hover { color: #a0d4b0; }

@media (max-width: 480px) {
    .page-update-fields { flex-direction: column; align-items: stretch; }
    .puf-label input[type="date"],
    .puf-label input[type="number"] { width: 100%; }
    .page-update-submit { width: 100%; margin-top: 0; }
}

.active-reading-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    text-decoration: none;
    color: #333;
}

.active-reading-title {
    font-weight: bold;
    font-size: 0.95em;
    color: #222;
}

.active-reading-title:hover {
    text-decoration: underline;
}

.active-reading-author {
    font-size: 0.87em;
    color: #666;
    flex: 2;
}

.active-reading-meta {
    font-size: 0.78em;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}
.active-reading-meta .current-page-display,
.active-reading-meta .reading-since {
    color: #bf7c2a;
    font-weight: 600;
}

.no-activity {
    color: #999;
    font-style: italic;
    font-size: .88em;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d9c7b0;
    border-radius: 4px;
    color: #7a5c3e;
    text-decoration: none;
    font-size: .875rem;
    background: #fffdf8;
    transition: background .12s, border-color .12s;
}
.pagination a:hover { background: #f0e8dc; border-color: #c9a87c; }
.pagination .current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #4a2e14;
    color: #fff;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 700;
}

/* Goals */
.goal-year-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.goal-year-label {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.goal-progress-item {
    margin-bottom: 18px;
}

.goal-label {
    font-size: 0.88em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.goal-label a {
    font-weight: normal;
    color: #666;
}

.goal-bar {
    background-color: #e0d5c8;
    border-radius: 4px;
    height: 10px;
    width: 100%;
    overflow: hidden;
}

.goal-bar-fill {
    background-color: #333;
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.goal-pct {
    font-size: 0.75em;
    color: #999;
    text-align: right;
    margin-top: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .book-item { width: 100%; flex-direction: column; }
    .book-details { flex-direction: column; align-items: center; }
    .book-details-body { flex-direction: column; }

    .book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    /* Mobile navbar */
    .navbar { padding: 0; width: 100%; }
    .navbar-brand { width: 100%; flex: 0 0 100%; padding: 0 12px; }
    .nav-center { display: block; }
    .hamburger { display: flex; }
    .navbar-menu {
        display: none;
        flex: 0 0 100%;
        width: 100%;
        padding: 0 12px 8px;
    }
    /* block layout — avoids Safari flex reflow bug with nested dropdowns */
    .navbar-menu.is-open { display: block; }
    .navbar-menu--guest {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        align-self: center;
    }
    .nav-dropdown { display: block; width: 100%; }
    .nav-dropdown-toggle { display: flex; width: 100%; justify-content: space-between; padding: 10px 4px; }
    .nav-dropdown .nav-dropdown-menu {
        display: none;
        position: static !important;
        top: auto;
        left: auto;
        z-index: auto;
        border: none;
        box-shadow: none;
        background: #383838;
        border-radius: 0;
        width: 100%;
    }
    .nav-dropdown .nav-dropdown-menu a { padding: 8px 24px; white-space: normal; }
    .nav-link { display: block; padding: 10px 4px; }
    .nav-search-form { width: 100%; margin: 6px 0; }
    .nav-search-input { flex: 1; width: auto; min-width: 0; }
    .nav-right { display: flex; width: 100%; margin-left: 0; padding: 4px 0; }
    .nav-username { padding: 8px 4px; }
    .nav-logout { padding: 8px 4px; }
}

/* ── Shelf book list with move controls ── */
.shelf-book-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.shelf-book-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #ede0cc;
    flex-wrap: wrap;
}
.shelf-book-item:last-child { border-bottom: none; }
.shelf-book-title {
    flex: 1;
    min-width: 120px;
    color: #333;
    text-decoration: none;
    font-size: .9rem;
}
.shelf-book-title:hover { text-decoration: underline; }
.shelf-move-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.shelf-move-select {
    font-size: .8rem;
    padding: 3px 6px;
    border: 1px solid #c9a87c;
    border-radius: 3px;
    background: #fffdf8;
    color: #555;
    max-width: 180px;
}
.shelf-move-btn {
    font-size: .78rem;
    background: #7a5c3e;
    color: #fff;
    border: none;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.shelf-move-btn:hover { background: #4a2e14; }

/* Autocomplete suggestion dropdowns */
.suggestions-list {
    position: relative;
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
}
.suggestions-list:empty { border: none; }
.suggestion-item {
    padding: 6px 10px;
    cursor: pointer;
}
.suggestion-item:hover { background: #f0f0f0; }

/* ================================================================
   ADD BOOK — MULTI-AUTHOR ROWS
   ================================================================ */

.multi-author-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}
.author-input-wrap {
    flex: 1;
    position: relative;
}
.author-input-wrap input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    font-size: .9rem;
    background: #fffdf8;
    color: #333;
}
.author-input-wrap input[type="text"]:focus {
    outline: none;
    border-color: #7a5c3e;
    box-shadow: 0 0 0 2px #c9a87c44;
}
.author-input-wrap .suggestions-list {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 200;
}
.author-remove-btn {
    background: none;
    border: 1px solid #c0392b;
    color: #c0392b;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background .12s;
}
.author-remove-btn:hover { background: #fdecea; }
.author-add-btn {
    margin-top: 4px;
    background: none;
    border: 1px dashed #c9a87c;
    color: #7a5c3e;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s;
}
.author-add-btn:hover { background: #f2e6d9; }

/* ================================================================
   ADD BOOK — COVER PREVIEW
   ================================================================ */

.cover-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.cover-preview-img {
    max-width: 120px;
    max-height: 180px;
    border: 1px solid #d9c7b0;
    border-radius: 4px;
    object-fit: contain;
    background: #f5ede0;
}

/* ================================================================
   ADD BOOK — ISBN INFO TAGS
   ================================================================ */

.isbn-info {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 1.4em;
}
.isbn-type-tag {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin-right: 2px;
}
.isbn-segment {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    font-family: monospace;
}
.isbn-prefix    { background: #e0f0ff; color: #154360; }
.isbn-group     { background: #e8f8e8; color: #145a32; }
.isbn-group em  { font-style: normal; font-weight: 400; }
.isbn-publisher { background: #fff3e0; color: #7d4e00; }
.isbn-title-el  { background: #f3e8ff; color: #4a235a; }
.isbn-check     { background: #f2f2f2; color: #555; }
.isbn-valid     { background: #eafaf1; color: #145a32; }
.isbn-invalid   { background: #fdecea; color: #7b1a1a; }

/* ================================================================
   ADD BOOK — SCANNER OVERLAY (mobile)
   ================================================================ */

#isbn-scanner {
    border: 2px solid #c9a87c;
    border-radius: 6px;
    overflow: hidden;
    max-width: 100%;
}
.scan-isbn-btn {
    background: #7a5c3e;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.scan-isbn-btn:hover { background: #4a2e14; }

/* ── Star rating display (readonly) ── */
.stars-display { display: inline-flex; align-items: center; gap: 1px; }
.star-wrap { display: inline-block; font-size: 1.2em; line-height: 1; }

/* ── Star rating input widget ── */
.star-input { display: inline-flex; cursor: pointer; user-select: none; gap: 2px; }
.si-star { display: inline-block; font-size: 2em; line-height: 1; color: #ddd; }

/* ================================================================
   READING PACE PAGE
   ================================================================ */
.pace-book-list { list-style: none; padding: 0; margin: 0; width: 90%; }

.pace-book-card { padding: 14px 0; border-bottom: 1px solid #e8ddd0; }
.pace-book-card:last-child { border-bottom: none; }

.pace-book-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pace-status-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px;
                     border-radius: 10px; flex-shrink: 0; }
.pace-status--active  { background: #d4edda; color: #276e3e; }
.pace-status--paused  { background: #fff3cd; color: #856404; }
.pace-status--dropped { background: #f8d7da; color: #842029; }
.pace-book-title  { font-weight: bold; font-size: .95em; color: #222; text-decoration: none; flex: 2; min-width: 120px; }
.pace-book-title:hover { text-decoration: underline; }
.pace-book-author { font-size: .85em; color: #666; }

.pace-bar-wrap  { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.ar-pace-bar    { flex-direction: column; align-items: stretch; gap: 0; }
.pace-bar       { flex: 1; height: 5px; background: #e8ddd0; border-radius: 3px; overflow: hidden; }
.ar-pace-bar .pace-bar { flex: none; width: 100%; }  /* fix: flex:1 collapses height in column context */
.pace-bar-fill  { height: 100%; border-radius: 3px; transition: width .3s; }
.pace-bar-fill--active  { background: #5a8a5a; }
.pace-bar-fill--paused  { background: #c9a87c; }
.pace-bar-fill--dropped { background: #b06060; }
.pace-bar-label { font-size: .72rem; color: #999; flex-shrink: 0; width: 32px; text-align: right; }

/* Above-bar header: pages info (left) + pct (right) */
.ar-bar-header  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ar-pages-info  { font-size: .72rem; color: #999; }
.ar-bar-pct     { font-size: .95rem; font-weight: 700; color: #5a8a5a; }

.pace-info-row  { display: flex; align-items: center; gap: 10px; }
.pace-info-text { font-size: .8rem; color: #777; flex: 1; }

/* ── Profile header row (avatar + title) ── */
.profile-header-row   { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.profile-header-text  { flex: 1; }
.profile-header-text h1 { margin: 0; }
.profile-photo-placeholder {
    width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0;
    background: #ede3d6; border: 3px solid #d9c7b0;
}

/* ── Profile photo ── */
.profile-photo-wrap   { text-align: center; margin-bottom: 14px; }
.profile-photo-avatar {
    width: 110px; height: 110px; border-radius: 50%;
    object-fit: cover; border: 3px solid #d9c7b0; flex-shrink: 0;
}
.profile-photo-thumb  {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; border: 2px solid #c9a87c;
    display: block; margin-bottom: 6px;
}
.profile-photo-preview { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.profile-photo-remove  { font-size: .82rem; color: #7a5c3e; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.field-hint { font-size: .78rem; color: #999; margin-top: 3px; display: block; }
.photo-input-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.photo-input-row input[type="file"] { flex: 1; min-width: 0; }
.btn-check-photo  {
    padding: 5px 12px; font-size: .82rem; border-radius: 4px; cursor: pointer;
    background: #f0e8dc; border: 1px solid #c9a87c; color: #5a3e28;
    white-space: nowrap;
}
.btn-check-photo:disabled { opacity: .45; cursor: default; }
.photo-check-ok   { font-size: .82rem; color: #2a6e3a; font-weight: 600; margin-top: 4px; display: block; }
.photo-check-fail { font-size: .82rem; color: #a02020; font-weight: 600; margin-top: 4px; display: block; }

/* ── Public stats strip ── */
.pub-stats-strip { display: flex; gap: 24px; flex-wrap: wrap; padding: 8px 0; }
.pub-stat        { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.pub-stat-num    { font-size: 1.6rem; font-weight: 700; color: #4a2e14; line-height: 1.1; }
.pub-stat-lbl    { font-size: .75rem; color: #999; text-transform: uppercase; letter-spacing: .05em; }

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ══════════════════════════════════════════════════════════════════════════════ */

.admin-wrap    { max-width: 1280px; }
.admin-heading { margin-bottom: 20px; }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.admin-tab-bar {
    display: flex;
    gap: 3px;
    border-bottom: 2px solid #d9c7b0;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.admin-tab-btn {
    position: relative;
    padding: 9px 22px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background: #f5ede3;
    font-size: .9rem;
    font-family: inherit;
    color: #7a5c3e;
    border-radius: 5px 5px 0 0;
    margin-bottom: -2px;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.admin-tab-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}
.admin-tab-btn:hover  { background: #ede0d0; color: #4a2e14; }
.admin-tab-btn--link { text-decoration: none; color: #2e7d8c; }
.admin-tab-btn.active {
    background: #4a2e14;
    color: #fff;
    border-color: #d9c7b0;
    border-bottom-color: #4a2e14;
    font-weight: 700;
}

/* ── Tab content ─────────────────────────────────────────────────────────── */
.admin-tab-content { display: none; }

/* ── Section card (matches .profile-section) ─────────────────────────────── */
.admin-section {
    margin-top: 20px;
    padding: 22px 24px;
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 0 6px 6px 6px;
}
.admin-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #4a2e14;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ede3d6;
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-section-count {
    font-size: .78rem;
    font-weight: 400;
    color: #999;
    margin-left: auto;
}
.admin-count { font-size: .82rem; color: #999; margin-bottom: 8px; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    padding: 16px;
    background: #f9f5f0;
    border: 1px solid #e8ddd0;
    border-radius: 6px;
    margin-bottom: 16px;
}
.admin-filters .field-group          { gap: 4px; }
.admin-filters .field-group label    { font-size: .8rem; font-weight: 600; color: #5a3e28; }
.admin-filters input[type="text"],
.admin-filters input[type="number"],
.admin-filters input[type="date"],
.admin-filters select {
    padding: 7px 10px;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    font-size: .85rem;
    background: #fffdf8;
    color: #333;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    margin-top: 0; margin-bottom: 0;
}
.admin-filters input:focus,
.admin-filters select:focus {
    outline: none;
    border-color: #7a5c3e;
    box-shadow: 0 0 0 2px #c9a87c44;
}
.field-group--checkbox { justify-content: flex-end; }
.admin-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: #5a3e28;
    cursor: pointer;
    padding: 7px 0;
    white-space: nowrap;
}
.admin-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 0;
}
.admin-filter-btn {
    padding: 0 20px;
    height: 36px;
    box-sizing: border-box;
    background: #7a5c3e;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    transition: background .12s;
    white-space: nowrap;
}
.admin-filter-btn:hover { background: #4a2e14; }
.admin-filter-reset {
    padding: 0 14px;
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    background: none;
    color: #7a5c3e;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
}
.admin-filter-reset:hover { background: #f5ede3; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.admin-table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #d9c7b0;
    margin-top: 4px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

/* Header row */
.admin-table thead th {
    background: #4a2e14;
    color: #fff;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}
.admin-table thead th.sort-active { background: #6b4226; }

/* Sort link fills entire th */
.admin-table thead th a.sort-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    text-decoration: none;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: background .1s;
}
.admin-table thead th a.sort-link:hover { background: rgba(255,255,255,.15); }

/* Non-sortable header label */
.admin-table thead th span.th-label {
    display: block;
    padding: 10px 14px;
    color: #d9c7b0;
    font-weight: 500;
}
.sort-arrow       { font-size: .72em; opacity: .45; }
.sort-arrow--active { opacity: 1; color: #f5c97a; }

/* Body rows */
.admin-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #ede3d6;
    vertical-align: top;
    color: #333;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:nth-child(even) td { background: #faf5ef; }
.admin-table tbody tr:hover td { background: #f5ede3 !important; }

/* Special row states */
.suspended-row td       { background: #fff2f2 !important; }
.blocked-comment-row td { background: #fffce6 !important; }

/* Cell type helpers */
.td-id       { color: #aaa; font-size: .78rem; width: 40px; }
.td-muted    { color: #888; font-size: .82rem; }
.td-num      { text-align: center; }
.td-lang     { font-size: .82rem; }
.td-date     { white-space: nowrap; }
.td-isbn     { font-size: .78rem; color: #888; white-space: nowrap; font-family: monospace; }
.td-title    { max-width: 200px; }
.td-comment  { max-width: 240px; word-break: break-word; }
.td-dq       { text-align: center; font-size: 1rem; }
.td-rating       { font-weight: 600; color: #4a2e14; }
.td-rating-count { font-size: .75rem; color: #aaa; }
.td-empty    { text-align: center; color: #aaa; padding: 24px !important; font-style: italic; }
.dq-ok { color: #27ae60; }
.dq-no { color: #c0392b; }

.admin-link { color: #7a5c3e; text-decoration: none; font-weight: 500; }
.admin-link:hover { color: #4a2e14; text-decoration: underline; }

/* Badges */
.admin-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
    margin-left: 4px;
}
.admin-badge--suspended  { background: #fdecea; color: #c0392b; }
.admin-badge--blocked    { background: #fff3cd; color: #7d5a00; }
.admin-badge--type-admin       { background: #4a2e14; color: #fff; }
.admin-badge--type-bookwatcher { background: #c9a87c; color: #fff; }
.admin-badge--type-standard    { background: #e8ddd0; color: #7a5c3e; }
.admin-badge--action-0 { background:#5a7a4e; color:#fff; } /* Signup  - green  */
.admin-badge--action-1 { background:#4e6a8c; color:#fff; } /* Login   - blue   */
.admin-badge--action-2  { background:#6b4226; color:#fff; } /* Create       - brown  */
.admin-badge--action-3  { background:#7a5c3e; color:#fff; } /* Edit         - tan    */
.admin-badge--action-4  { background:#a0392b; color:#fff; } /* Delete       - red    */
.admin-badge--action-15 { background:#2e7d5e; color:#fff; } /* Add to Books - teal   */
.admin-badge--action-25 { background:#7b4fa6; color:#fff; } /* Recommend    - purple  */
.admin-badge--action-26 { background:#2e7d8c; color:#fff; } /* Submit Idea  - teal    */
.admin-badge--action-28 { background:#c0762a; color:#fff; } /* Share Card   - ochre   */
.admin-badge--action-29 { background:#3a7abf; color:#fff; } /* Ref Visit    - blue    */
.admin-badge--action-30 { background:#2e8c5a; color:#fff; } /* Ref Signup   - green   */
.admin-badge--action-33 { background:#1a5f6e; color:#fff; } /* Bulk Import   - dark teal */
.admin-badge--action-34 { background:#1a5f6e; color:#fff; } /* Folder Import - dark teal */
.admin-badge--action-35 { background:#1a5f6e; color:#fff; } /* Excel Import  - dark teal */

/* ── Toggle switch ──────────────────────────────────────────────────────── */
.admin-toggle         { display: inline-flex; align-items: center; cursor: pointer; }
.admin-toggle__input  { display: none; }
.admin-toggle__track  {
    width: 36px; height: 20px;
    background: #d9c7b0;
    border-radius: 20px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.admin-toggle__track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.admin-toggle__input:checked + .admin-toggle__track              { background: #c0392b; }
.admin-toggle__input:checked + .admin-toggle__track::after       { left: 19px; }

/* ── Online presence dot ─────────────────────────────────────────────────── */
.online-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}
.online-dot--on  { background: #27ae60; box-shadow: 0 0 0 2px #d4f5e1; }
.online-dot--off { background: #ccc; }
.td-online       { text-align: center; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.admin-pagination {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.admin-pagination a {
    padding: 5px 11px;
    border: 1px solid #d9c7b0;
    border-radius: 4px;
    text-decoration: none;
    color: #7a5c3e;
    font-size: .85rem;
    background: #fffdf8;
    transition: background .1s;
}
.admin-pagination a:hover { background: #f0e8dc; border-color: #c9a87c; }
.admin-page-current {
    padding: 5px 11px;
    background: #4a2e14;
    color: #fff;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 700;
}

/* ── DQ Cards ───────────────────────────────────────────────────────────── */
.dq-cards  { display: flex; gap: 16px; flex-wrap: wrap; }
.dq-card   {
    flex: 1;
    min-width: 220px;
    padding: 28px 24px 22px;
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 6px;
    text-align: center;
}
.dq-card h3 {
    margin: 0 0 4px;
    font-size: .82rem;
    color: #7a5c3e;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.dq-count  {
    font-size: 3rem;
    font-weight: 700;
    color: #4a2e14;
    line-height: 1;
    margin: 10px 0 6px;
}
.dq-hint   { font-size: .78rem; color: #aaa; margin-bottom: 18px; }
.dq-orphan-breakdown { font-size: .78rem; color: #7a5c3e; margin: 0 0 14px 0; padding: 0 0 0 16px; }
.dq-progress {
    margin-top: 12px;
    font-size: .82rem;
    color: #666;
    min-height: 1.4em;
    line-height: 1.5;
}
.btn-fetch-all {
    padding: 9px 22px;
    background: #7a5c3e;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    transition: background .12s;
}
.btn-fetch-all:hover    { background: #4a2e14; }
.btn-fetch-all:disabled { opacity: .4; cursor: default; }

/* ── Block reason cell ───────────────────────────────────────────────────── */
.block-reason-edit textarea {
    width: 100%;
    font-size: .8rem;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    padding: 5px 7px;
    background: #fffdf8;
    resize: vertical;
    box-sizing: border-box;
}
.block-reason-edit textarea:focus { outline: none; border-color: #7a5c3e; }
.block-save-btn {
    margin-top: 5px;
    padding: 4px 12px;
    font-size: .78rem;
    background: #7a5c3e;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.block-save-btn:hover { background: #4a2e14; }

.inline-form { display: inline; }

.admin-select-sm {
    font-size: .78rem;
    padding: 2px 4px;
    border: 1px solid #c9b49a;
    border-radius: 3px;
    background: #fffdf8;
}
.admin-input-sm {
    font-size: .78rem;
    padding: 3px 6px;
    width: 110px;
    border: 1px solid #c9b49a;
    border-radius: 3px;
    background: #fffdf8;
}

/* ── Comment labels (reading_details.php) ───────────────────────────────── */
.comment-blocked-label { display: block; color: #c0392b; font-weight: 700; font-size: .82rem; margin-top: 5px; }
.block-reason          { display: block; color: #aaa; font-style: italic; font-size: .8rem; margin-top: 2px; }

/* ── Lore badge & counter (navbar) ─────────────────────────────────────── */
.lore-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
}
.lore-badge--standard       { background: #c5a97a; color: #3a2410; }
.lore-badge--bookwatcher    { background: #5d8a5e; color: #fff; }
.lore-badge--bookcommander  { background: #4a3580; color: #fff; }
.lore-badge--admin          { background: #7a5c3e; color: #fff; }
.lore-badge--premium        { background: #b8860b; color: #fff; }
.profile-badge--bookcommander    { background: #d0c8f0; color: #2a1560; }
.admin-badge--type-bookcommander { background: #4a3580; color: #fff; }

.lore-counter {
    display: inline-block;
    font-size: .78rem;
    color: #c5a97a;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: .03em;
}

/* ── BookWatch popup overlay ────────────────────────────────────────────── */
.bookwatch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 18, 5, .72);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bookwatch-modal {
    background: #2b1e0e;
    border: 1px solid #7a5c3e;
    border-radius: 8px;
    max-width: 480px;
    width: 100%;
    padding: 2rem 2.2rem;
    text-align: center;
    color: #e8d5b0;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.bookwatch-modal-icon  { font-size: 2.5rem; margin-bottom: .5rem; }
.bookwatch-modal-title { font-size: 1.3rem; font-weight: 700; color: #f0c870; margin-bottom: .3rem; }
.bookwatch-modal-sub   { font-size: .9rem; color: #c5a97a; margin-bottom: 1rem; }
.bookwatch-modal-body  { font-size: .93rem; line-height: 1.6; margin-bottom: .8rem; color: #ddc9a3; }
.bookwatch-modal-actions { margin-top: 1.4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.bookwatch-btn {
    padding: .6rem 1.4rem;
    border-radius: 5px;
    border: none;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.bookwatch-btn--primary   { background: #7a5c3e; color: #fff; }
.bookwatch-btn--primary:hover { background: #5d3d1e; }
.bookwatch-btn--secondary { background: #3d2c1a; color: #c5a97a; border: 1px solid #7a5c3e; }
.bookwatch-btn--secondary:hover { background: #4a3520; }
.bookwatch-btn--danger { background: #b03030; color: #fff; }
.bookwatch-btn--danger:hover { background: #8c2020; }

/* ── Contact form extras ────────────────────────────────────────────────── */
.radio-opt { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; cursor: pointer; }
.radio-opt input { margin: 0; }

/* ── Contact & Support card ─────────────────────────────────────────────── */
.contact-card { background: #2b1e0e; border: 1px solid #7a5c3e; border-radius: 10px;
                padding: 2.5rem 2rem; max-width: 820px; margin: 2rem auto; }
.contact-card-title { font-size: 1.3rem; font-weight: 700; color: #f0c870;
                      text-align: center; margin-bottom: 1.5rem; }
.contact-card .field-label { color: #ddc9a3; display: block; margin-bottom: .4rem; font-size: .88rem; }
.contact-card .field-input { background: #1e1309; border: 1px solid #7a5c3e; color: #f0e8d0;
                              width: 100%; box-sizing: border-box; }
.contact-card .field-input:focus { border-color: #c5a97a; outline: none; }
/* Form vertical stack */
.contact-form-stack { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form-row { display: flex; flex-direction: column; }
.contact-field-error { font-size: .85rem; color: #f5a623; margin-top: .25rem; }
/* Support ID reference block */
.contact-support-id-block { background: #1e1309; border: 1px solid #7a5c3e; border-radius: 6px;
                             padding: .6rem 1rem; display: inline-block; min-width: 220px; }
.contact-support-id-block small { font-size: .7rem; color: #a07850; display: block; margin-bottom: .2rem; }
.contact-support-id-value { font-size: 1rem; font-weight: 700; color: #f0c870;
                             font-family: monospace; letter-spacing: .06em; }
/* Account info table */
.contact-support-table { width: 100%; border-collapse: collapse;
                          background: #1e1309; border: 1px solid #7a5c3e;
                          border-radius: 6px; margin: .4rem 0 0; }
.contact-support-table th { padding: .4rem .9rem; font-size: .72rem; color: #a07850;
                             font-weight: 400; text-align: left;
                             border-bottom: 1px solid #3a2a18;
                             border-right: 1px solid #3a2a18; }
.contact-support-table th:last-child { border-right: none; }
.contact-support-table td { padding: .45rem .9rem; font-size: .9rem;
                             color: #f0c870; font-weight: 600;
                             border-right: 1px solid #3a2a18; }
.contact-support-table td:last-child { border-right: none; }
/* Support status badges */
.support-badge--open     { background: #8a6a00; color: #ffd; padding: 2px 8px;
                           border-radius: 4px; font-size: .8rem; }
.support-badge--resolved { background: #2e5e30; color: #cfc; padding: 2px 8px;
                           border-radius: 4px; font-size: .8rem; }
/* Support ticket attachment */
.contact-attach-zone    { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .35rem; }
.contact-attach-btn     { background: #1e1309; border: 1px solid #7a5c3e; color: #ddc9a3;
                          padding: .35rem .9rem; border-radius: 4px; cursor: pointer;
                          font-size: .85rem; white-space: nowrap; }
.contact-attach-btn:hover { border-color: #c5a97a; color: #f0e8d0; }
.contact-attach-badge   { display: inline-flex; align-items: center; gap: .4rem;
                          background: #1e1309; border: 1px solid #5d8a5e; border-radius: 4px;
                          padding: .25rem .7rem; font-size: .82rem; color: #cfecd0; }
.contact-attach-remove  { background: none; border: none; color: #c05050; cursor: pointer;
                          font-size: .9rem; padding: 0; line-height: 1; }
.contact-attach-size    { color: #a07850; margin-left: .1rem; }
/* ── InMail ─────────────────────────────────────────────────────────────────── */

/* Navbar button */
.nav-inmail-btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    color: #e8d5b7;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
}
.nav-inmail-btn:hover { color: #fff; }
.nav-inmail-btn--mobile  { display: none; }
.nav-inmail-btn--desktop { display: flex; }

.nav-inmail-badge {
    position: absolute;
    top: 0; right: 0;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
}

/* Inbox */
.inmail-inbox-body {
    background: #fffdf8;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}
.inmail-search-wrap {
    position: relative;
    margin-bottom: 1rem;
}
.inmail-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .8rem;
    background: #fffdf8;
    border: 1px solid #c9a87c;
    color: #333;
    border-radius: 6px;
    font-size: .9rem;
}
.inmail-search-input:focus {
    outline: none;
    border-color: #7a5c3e;
    box-shadow: 0 0 0 2px #c9a87c44;
}
.inmail-search-input::placeholder { color: #aaa; }
.inmail-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fffdf8;
    border: 1px solid #c9a87c;
    border-radius: 6px;
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.inmail-suggestion-item {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    cursor: pointer;
    color: #333;
    font-size: .9rem;
}
.inmail-suggestion-item:hover { background: #f2e6d9; }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.status-dot--online  { background: #2ecc71; }
.status-dot--today   { background: #f39c12; }
.status-dot--offline { background: transparent; border: 1.5px solid #aaa; }

.inmail-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.inmail-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}
.inmail-list { display: flex; flex-direction: column; gap: .5rem; }
.inmail-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fdf3e3;
    border: 1px solid #d9c7b0;
    border-radius: 6px;
    padding: .7rem .9rem;
    cursor: pointer;
}
.inmail-row:hover { border-color: #7a5c3e; background: #f2e6d9; }
.inmail-row-body { flex: 1; min-width: 0; }
.inmail-row-name { color: #4a2e14; font-weight: 600; font-size: .9rem; }
.inmail-row-preview {
    color: #5a3e1b;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inmail-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
    flex-shrink: 0;
}
.inmail-row-time { color: #888; font-size: .75rem; white-space: nowrap; }
.inmail-unread {
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inmail-delete-btn {
    background: none;
    border: none;
    color: #c05050;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
}
.inmail-delete-form { display: inline; }

/* Conversation */
.inmail-chat-wrap {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 180px);
}
.inmail-chat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: #4a2e14;
    border-bottom: 1px solid #7a5c3e;
    flex-shrink: 0;
}
.inmail-back-btn { color: #c9a87c; text-decoration: none; font-size: 1.6rem; padding: 4px; }
.inmail-back-btn:hover { color: #fff; }
.inmail-chat-header-info { display: flex; flex-direction: column; gap: 1px; }
.inmail-chat-name { font-weight: 700; color: #fff; }
.inmail-chat-activity { font-size: .75rem; color: #c9a87c; }

.inmail-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.inmail-msg {
    display: flex;
    gap: .5rem;
    max-width: 85%;
}
.inmail-msg--mine   { align-self: flex-end; flex-direction: column; align-items: flex-end; }
.inmail-msg--theirs { align-self: flex-start; }
.inmail-msg-bubble {
    padding: .6rem .9rem;
    border-radius: 16px;
    word-break: break-word;
}
.inmail-msg--mine   .inmail-msg-bubble {
    background: #7a5c3e;
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.inmail-msg--theirs .inmail-msg-bubble {
    background: #fdf3e3;
    color: #4a2e14;
    border: 1px solid #d9c7b0;
    border-radius: 16px 16px 16px 4px;
}
.inmail-msg-body { line-height: 1.45; }
.inmail-msg--mine   .inmail-msg-bubble a { color: #ffe0a0; text-decoration: underline; }
.inmail-msg--theirs .inmail-msg-bubble a { color: #5d8a5e; text-decoration: underline; }
.inmail-msg-attach {
    color: #7a5c3e;
    font-size: .85rem;
    text-decoration: none;
    display: inline-block;
    margin-top: .3rem;
}
.inmail-msg-attach:hover { text-decoration: underline; }
.inmail-msg-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .72rem;
    color: #888;
}
.inmail-msg-checks-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 2px 4px 0;
    font-size: .72rem;
    color: #888;
    align-self: flex-end;
}
.inmail-msg-checks         { color: #888; }
.inmail-msg-checks--read   { color: #5d8a5e; }
.inmail-msg-edited         { font-size: .7rem; color: #888; font-style: italic; }
.inmail-msg-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    padding: 0 2px;
    color: #7a5c3e;
    opacity: .6;
}
.inmail-msg-edit-btn:hover { opacity: 1; }
.inmail-msg-attach-wrap { margin-top: .25rem; }

/* Typing indicator */
.inmail-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: .5rem .8rem;
    background: #fdf3e3;
    border: 1px solid #d9c7b0;
    border-radius: 12px;
}
.inmail-typing span {
    width: 7px;
    height: 7px;
    background: #c9a87c;
    border-radius: 50%;
    animation: inmailTyping 1.2s infinite;
}
.inmail-typing span:nth-child(2) { animation-delay: .2s; }
.inmail-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes inmailTyping {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* Input bar */
.inmail-input-bar {
    flex-shrink: 0;
    border-top: 1px solid #d9c7b0;
    background: #fdf3e3;
    padding: .6rem;
}
.inmail-edit-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: #5a3e1b;
    padding: .3rem .5rem .4rem;
}
.inmail-edit-bar button {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: .8rem;
}
.inmail-input-bar form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}
.inmail-textarea {
    flex: 1;
    background: #fffdf8;
    border: 1px solid #c9a87c;
    color: #333;
    border-radius: 18px;
    padding: .5rem .9rem;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    font-size: .9rem;
    line-height: 1.4;
}
.inmail-textarea:focus { outline: none; border-color: #7a5c3e; box-shadow: 0 0 0 2px #c9a87c44; }
.inmail-textarea::placeholder { color: #aaa; }
.inmail-send-btn {
    background: #7a5c3e;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inmail-send-btn:hover { background: #4a2e14; }
.inmail-emoji-btn, .inmail-attach-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #7a5c3e;
    padding: 4px;
    flex-shrink: 0;
}
.inmail-emoji-btn:hover, .inmail-attach-btn:hover { color: #4a2e14; }
.inmail-emoji-wrap { position: relative; flex-shrink: 0; }
.inmail-emoji-picker {
    position: absolute;
    bottom: 46px;
    left: 0;
    background: #fffdf8;
    border: 1px solid #c9a87c;
    border-radius: 8px;
    padding: .5rem;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    z-index: 100;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.inmail-emoji-item {
    cursor: pointer;
    font-size: 1.2rem;
    padding: 3px;
    text-align: center;
    border-radius: 4px;
}
.inmail-emoji-item:hover { background: #f2e6d9; }
.inmail-attach-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #2b1e0e;
    border: 1px solid #7a5c3e;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .8rem;
    color: #a07850;
    white-space: nowrap;
    overflow: hidden;
    max-width: 140px;
    flex-shrink: 0;
}

/* Responsive: mobile */
@media (max-width: 768px) {
    .nav-inmail-btn--mobile  { display: flex; }
    .nav-inmail-btn--desktop { display: none; }
    .inmail-chat-wrap { max-height: calc(100vh - 120px); }
    .inmail-msg { max-width: 95%; }
    .inmail-emoji-picker { width: 180px; grid-template-columns: repeat(6,1fr); }
}

/* Footer link */
footer a { color: #888; font-weight: normal; text-decoration: none; }
footer a:hover { color: #555; text-decoration: underline; }

/* ── Admin contacts tab ─────────────────────────────────────────────────── */
.contact-unread-row { background: #fef9e7; }
.contact-msg-preview { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: #555; }
.contact-linked { font-size: .82rem; color: #5d8a5e; }


/* ── All-Books cover grid ──────────────────────────────────────────────── */
.books-filter {
    display: flex; flex-wrap: wrap; gap: 12px 16px;
    align-items: flex-end; padding: 16px;
    background: #f9f5f0; border: 1px solid #e8ddd0;
    border-radius: 6px; margin-bottom: 20px;
}
.books-filter .field-group label { font-size: .8rem; font-weight: 600; color: #5a3e28; }
.books-filter-actions { display: flex; align-items: center; gap: 6px; align-self: flex-end; }
.books-filter > .button-secondary { align-self: flex-end; }
.books-filter input[type="text"],
.books-filter input[type="number"],
.books-filter select {
    padding: 7px 10px; border: 1px solid #c9a87c;
    border-radius: 4px; font-size: .85rem;
    background: #fffdf8; color: #333; width: 100%;
    height: 36px; box-sizing: border-box;
    margin-top: 0; margin-bottom: 0;
}
.books-filter input:focus,
.books-filter select:focus { outline: none; border-color: #7a5c3e; box-shadow: 0 0 0 2px #c9a87c44; }
.books-count { font-size: .82rem; color: #999; margin-bottom: 14px; }

@media (max-width: 600px) {
    .books-filter,
    .admin-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .books-filter .field-group,
    .admin-filters .field-group { width: 100%; }
    .books-filter-actions,
    .admin-filter-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.book-tile {
    position: relative; display: block;
    text-decoration: none; border-radius: 5px;
    overflow: hidden; aspect-ratio: 2/3;
    background: #f2e6d9; border: 1px solid #d9c7b0;
    transition: transform .15s, box-shadow .15s;
}
.book-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

.book-tile-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

.book-tile-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'%3E%3Crect x='6' y='2' width='32' height='56' rx='3' fill='%23c9a87c' opacity='.25'/%3E%3Crect x='6' y='2' width='5' height='56' rx='2' fill='%23c9a87c' opacity='.5'/%3E%3Crect x='15' y='18' width='18' height='3' rx='1.5' fill='%23c9a87c' opacity='.7'/%3E%3Crect x='15' y='28' width='18' height='3' rx='1.5' fill='%23c9a87c' opacity='.7'/%3E%3Crect x='15' y='38' width='13' height='3' rx='1.5' fill='%23c9a87c' opacity='.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%;
}

/* Star strip at bottom of tile */
.book-tile-stars {
    position: absolute; bottom: 22px; left: 0; right: 0;
    background: rgba(0,0,0,.55);
    padding: 3px 4px;
    display: flex; justify-content: center; gap: 1px;
}
.book-tile-stars .ts-star { font-size: .78rem; line-height: 1; }

/* Title label slides up on hover */
.book-tile-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(74,46,20,.88);
    color: #fff; font-size: .7rem;
    padding: 4px 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform: translateY(100%);
    transition: transform .15s;
}
.book-tile:hover .book-tile-label { transform: translateY(0); }

/* Author tiles — square, circular photo */
.author-tile { aspect-ratio: 1; }
.author-tile-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-tile-initials {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; font-weight: bold; color: #c9a87c;
    background: #2b1e0e;
}
.author-tile .book-tile-stars { bottom: 28px; }
.author-tile-bookcount { display: block; font-size: .62rem; color: #c9a87c; margin-top: 2px; }

/* Mobile: always show label, smaller grid */
@media (max-width: 600px) {
    .books-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
    .book-tile-label { transform: translateY(0); font-size: .62rem; }
    .book-tile-stars { bottom: 18px; }
}

/* Tile badges (shelf, read-ago) */
.book-tile-badge {
    position: absolute; top: 4px;
    font-size: .58rem; line-height: 1.2;
    padding: 2px 5px; border-radius: 3px;
    max-width: 58%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.book-tile-badge--shelf {
    left: 4px;
    background: rgba(74,46,20,.82); color: #f5dfc0;
}
.book-tile-badge--read {
    right: 4px;
    background: rgba(30,90,30,.80); color: #c8f0c8;
}
.book-tile-badge--reading {
    right: 4px;
    background: rgba(180,120,0,.85); color: #fff5cc;
}
.book-tile-badge--paused {
    left: 4px;
    background: rgba(40,70,150,.82); color: #c8d4f5;
}
.book-tile-badge--dropped {
    left: 4px;
    background: rgba(140,30,30,.85); color: #f5c8c8;
}
.book-tile-fmt-icon {
    position: absolute;
    top: 4px; left: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,.52);
    display: flex; align-items: center; justify-content: center;
    z-index: 3; pointer-events: none;
}
.book-tile-fmt-icon--below { top: 22px; }
.book-tile-fmt-icon svg { width: 11px; height: 11px; color: #fff; display: block; }
.book-tile-fmt-icon--audiobook { background: rgba(122,79,155,.82); }
.book-tile-fmt-icon--ebook,
.book-tile-fmt-icon--pdf       { background: rgba(42,115,185,.82); }
.book-tile-progress {
    position: absolute; top: 4px; right: 4px;
    width: 32px; height: 32px;
    pointer-events: none; z-index: 2;
}
/* Home grid pagination nav */
.hb-nav {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
}
.hb-nav .hb-page-info { font-size: .8rem; color: #a07850; }
/* Filter tooltip */
.filter-tip {
    position: relative; cursor: default;
    font-size: 1rem; color: #9a7a5a; line-height: 1; flex-shrink: 0;
}
.filter-tip-text {
    display: none;
    position: absolute; top: 50%; left: calc(100% + 8px);
    transform: translateY(-50%);
    background: #3e2a14; color: #f5dfc0;
    font-size: .75rem; line-height: 1.4;
    padding: 6px 10px; border-radius: 4px;
    width: 200px; white-space: normal;
    pointer-events: none; z-index: 100;
}
.filter-tip:hover .filter-tip-text { display: block; }

/* ================================================================
   SIGNUP / LOGIN — shared title
   ================================================================ */
.signup-title {
    text-align: center;
    margin: 0 0 28px;
    color: #4a2e14;
    font-size: 1.6rem;
    letter-spacing: .04em;
}

/* ================================================================
   LANDSCAPE — compact signup / login form + vertical centering
   ================================================================ */
@media (orientation: landscape) {
    /* Center the form card vertically; footer stays pinned at bottom */
    .pre-login-page .container {
        flex: none;
        margin: auto;
        padding: 10px 20px;
    }
    /* Halve the vertical spacing of the form */
    .signup-wrap {
        padding-top: 12px;
        padding-bottom: 20px;
    }
    .signup-title {
        margin-bottom: 14px;
        font-size: 1.2rem;
    }
    .signup-disclaimer {
        padding: 6px 10px;
        margin-bottom: 10px;
    }
    .signup-grid {
        gap: 8px 24px;
    }
    .field-group input,
    .field-group select {
        padding: 4px 10px;
    }
    .signup-nav {
        margin-top: 12px;
    }
    .signup-quote {
        margin-top: 16px;
        padding: 8px 14px;
    }
}

/* ── Feature 15: My Books rework ─────────────────────────────────────────── */

.my-books-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.my-books-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.my-books-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.my-books-table td {
    vertical-align: middle;
    white-space: nowrap;
}
.my-books-table .col-book {
    min-width: 46px;
    max-width: 46px;
    width: 46px;
    white-space: normal;
}
@media (min-width:768px) {
  .my-books-table .col-book {
    min-width: 128px;
    max-width: 128px;
    width: 128px;
  }
}
.my-books-col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.my-books-col-inner a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
}
.my-books-cover {
    width: 30px;
    height: 44px;
    min-width: 30px;
    max-width: 30px;
    max-height: 44px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}
.my-books-table .col-genre {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-books-table .col-series {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-books-table .col-iso {
    width: 1px;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}
.my-books-table .col-author {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-books-check { color: #2e7d32; font-weight: bold; }
.my-books-cross { color: #b71c1c; font-weight: bold; }

/* Sticky first column */
.my-books-table-wrap { position: relative; }
.mb-col-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 3px double #7a5c3e;
}
.my-books-table thead .mb-col-sticky { background: #4a2e14; z-index: 3; }
.my-books-table tbody tr:nth-child(even) .mb-col-sticky { background: #faf5ef; }
.my-books-table tbody tr:hover .mb-col-sticky { background: #f5ede3; }

/* source badge colours */
.mb-badge--created { background: #4a2e14; color: #f5c97a; }
.mb-badge--added   { background: #2e4a14; color: #a8e06a; }
.mb-badge--read    { background: #14354a; color: #8ec8e0; }

/* attr column delete button */
.mb-attr-del-btn {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: .85em;
    padding: 0 2px;
    line-height: 1;
    vertical-align: middle;
    opacity: .5;
}
.mb-attr-del-btn:hover { opacity: 1; }

/* attr cell edit hint */
.mb-attr-edit-hint { display: none; }
.mb-attr-cell:hover .mb-attr-edit-hint { display: inline; }

/* Community Summaries */
.cs-card {
    border: 1px solid #ede3d6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fdf9f5;
}
.cs-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cs-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cs-avatar-placeholder {
    background: #7a5c3e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72em;
    font-weight: bold;
}
.cs-text {
    margin: 0 0 10px;
    line-height: 1.55;
    color: #444;
    font-size: .9rem;
}
.cs-votes {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cs-vote-btn {
    background: #f0e6d3;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: .85rem;
    color: #5a3e28;
    transition: background .15s;
}
.cs-vote-btn:hover { background: #e0d0bc; }
.cs-vote-btn.cs-vote-active { background: #c9a87c; color: #fff; border-color: #a07830; }
.cs-score { font-weight: bold; font-size: .9rem; min-width: 24px; text-align: center; }

@media (max-width: 600px) {
    .my-books-header { flex-direction: column; align-items: flex-start; }
    .my-books-actions { gap: 6px; }
}

/* ── Import pages ──────────────────────────────────────────────────────────── */
.import-drop-zone {
    border: 2px dashed #7a5c3e;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    color: #aaa;
    transition: background .15s, border-color .15s;
}
.import-drop-zone:hover { background: #2b1e0e; border-color: #c8a87a; }
.import-drop-zone.drag-over { background: #2b1e0e; border-color: #c8a87a; }
.import-file-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    font-size: .85rem;
    max-height: 260px;
    overflow-y: auto;
}
.import-file-list li {
    padding: 4px 0;
    border-bottom: 1px solid #2e2010;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Staging table ─────────────────────────────────────────────────────────── */
.staging-dq-ok   { color: #2e7d32; font-weight: bold; font-size: 1.1rem; }
.staging-dq-err  { color: #b71c1c; font-weight: bold; font-size: 1.1rem; }
.staging-dq-spin { display: inline-block; animation: spin 1s linear infinite; }
.staging-row--discarded td { opacity: .4; }
.staging-row--added     td { background: rgba(122,184,232,.07); }
.staging-conflict-btns  { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Staging conflict icon buttons */
.staging-icon-btn {
    background: none;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.2;
    color: #444;
    transition: background .12s, border-color .12s;
}
.staging-icon-btn:hover { background: #eee; border-color: #999; }
.staging-icon-btn--add  { color: #2a7abf; border-color: #2a7abf; }
.staging-icon-btn--add:hover  { background: #e8f2fb; }
.staging-icon-btn--bin  { color: #b71c1c; border-color: #b71c1c; }
.staging-icon-btn--bin:hover  { background: #fdecea; }

/* ── Annual Reading Chart (Feature 17) ──────────────────────────────────── */

/* Pace page tabs */
.pace-tabs { display:flex; gap:4px; margin-bottom:1.2rem; border-bottom:2px solid #e8ddd0; }
.pace-tab {
    padding:8px 18px; background:none; border:none; font-size:.95rem; color:#7a5c3e;
    cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
    transition: color .15s, border-color .15s;
}
.pace-tab:hover { color:#4a2e14; }
.pace-tab--active { color:#4a2e14; font-weight:700; border-bottom-color:#c9a87c; }

/* Mode toggle buttons */
.ac-controls { margin-bottom:.9rem; }
.ac-toggles  { display:flex; gap:8px; flex-wrap:wrap; }
.ac-toggle {
    padding:6px 16px; border:1px solid #c9a87c; border-radius:20px;
    background:#fff; color:#7a5c3e; font-size:.85rem; cursor:pointer;
    transition: background .15s, color .15s;
}
.ac-toggle:hover { background:#f7f0e8; }
.ac-toggle--active { background:#4a2e14; color:#fff; border-color:#4a2e14; }

/* Filter checkbox panel */
.ac-filters {
    display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
    margin-bottom:1rem; padding:10px 14px;
    background:#f7f0e8; border:1px solid #dfd0bc; border-radius:6px;
}
.ac-filters-label { font-size:.82rem; color:#7a5c3e; font-weight:600; padding-top:1px; flex-shrink:0; }
.ac-filter-checks { display:flex; flex-wrap:wrap; gap:5px 14px; flex:1; min-width:0; }
.ac-filter-check  {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.82rem; color:#4a2e14; cursor:pointer; white-space:nowrap;
}
.ac-filter-check input[type=checkbox] { cursor:pointer; accent-color:#4a2e14; }
.ac-filter-swatch { width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.ac-filter-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; padding-top:1px; }
.ac-filter-link {
    background:none; border:none; color:#7a5c3e; font-size:.78rem;
    cursor:pointer; padding:0; text-decoration:underline;
}
.ac-filter-link:hover { color:#4a2e14; }
.ac-filter-sep { color:#bba; font-size:.78rem; }

/* Year window navigation */
.ac-nav { display:flex; align-items:center; gap:10px; padding:0 20px 10px; }
.ac-nav-btn {
    padding:5px 13px; border:1px solid #c9a87c; border-radius:16px;
    background:#fff; color:#7a5c3e; font-size:.82rem; cursor:pointer;
    transition: background .15s;
}
.ac-nav-btn:hover:not(:disabled) { background:#f7f0e8; }
.ac-nav-btn:disabled { opacity:.35; cursor:default; }
.ac-window-label { flex:1; text-align:center; font-size:.88rem; color:#4a2e14; font-weight:600; }

/* Chart area — breaks out of activity-body 20px side padding */
.ac-chart-area {
    margin: 6px -20px 0;
    border-top: 1px solid #e8ddd0;
    padding-top: 14px;
}

/* Y-labels + SVG side by side */
.ac-chart-wrap { display:flex; align-items:stretch; }
.ac-ylabels    { width:38px; flex-shrink:0; position:relative; }
.ac-ylabel     { position:absolute; right:4px; font-size:.68rem; color:#7a5c3e; line-height:1; }

/* SVG container — fills remaining width */
.ac-svg-wrap { flex:1; min-width:0; }
.ac-svg      { display:block; width:100%; overflow:visible; }

/* X-axis labels */
.ac-xlabels {
    display:flex; overflow:hidden;
    padding-left:38px; /* align with SVG (skip y-label column) */
    margin-top:4px;
}
.ac-xlabel-group { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.ac-xlabel-yr    { font-size:.75rem; color:#4a2e14; font-weight:700; line-height:1.5; }
.ac-xlabel-qs    { display:flex; width:100%; }
.ac-xlabel-q     { flex:1; text-align:center; font-size:.62rem; color:#aaa; line-height:1.3; }

/* Legend */
.ac-legend      { display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 20px 4px; font-size:.82rem; color:#4a2e14; }
.ac-legend-item { display:flex; align-items:center; gap:5px; }
.ac-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* States */
.ac-loading { color:#888; font-style:italic; padding:2rem 0; text-align:center; }

.ac-empty   { color:#a08060; padding:2rem 0; text-align:center; font-size:.95rem; }

/* ── Annual chart data table ── */
.ac-table-wrap   { padding:12px 20px 6px; }
.ac-table-scroll { overflow-x:auto; }
.ac-table {
    border-collapse:collapse;
    width:100%;
    font-size:.76rem;
    color:#3d2b1f;
}
.ac-th-label {
    text-align:left;
    padding:5px 10px 5px 0;
    font-weight:700;
    color:#4a2e14;
    white-space:nowrap;
    min-width:90px;
    vertical-align:middle;
}
.ac-th-year {
    text-align:center;
    padding:4px 2px 2px;
    font-weight:700;
    color:#4a2e14;
    border-bottom:1px solid #d5c5b0;
    white-space:nowrap;
}
.ac-th-q {
    text-align:center;
    padding:2px 4px 4px;
    font-weight:600;
    color:#9a7a5a;
    min-width:28px;
    white-space:nowrap;
}
.ac-td-label {
    padding:4px 10px 4px 0;
    white-space:nowrap;
    font-weight:500;
    color:#3d2b1f;
}
.ac-table tbody tr:first-child td { border-top:1px solid #d5c5b0; }
.ac-td-val {
    text-align:center;
    padding:4px 4px;
    font-variant-numeric:tabular-nums;
    color:#3d2b1f;
}
.ac-td-zero { color:#c5b5a5; }
.ac-table-dot {
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
    vertical-align:middle;
    margin-right:4px;
}
.ac-tr-total td {
    font-weight:700;
    color:#4a2e14;
    border-top:1px solid #d5c5b0;
}

/* ── InMail tabs ─────────────────────────────────────────────────────────── */
.inmail-tabs { display:flex; gap:0; border-bottom:2px solid #e8ddd0; margin-bottom:16px; }
.inmail-tab-btn { padding:8px 20px; background:none; border:none; cursor:pointer;
  color:#7a5c3e; font-size:.9rem; font-weight:500; border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:color .12s; font-family:inherit; }
.inmail-tab-btn.active { color:#4a2e14; border-bottom-color:#4a2e14; font-weight:600; }
.inmail-tab-btn:hover { color:#4a2e14; }

/* ── Circle thumbnails ───────────────────────────────────────────────────── */
.circles-grid { display:flex; flex-wrap:wrap; gap:16px; padding:8px 0; }
.circle-thumb { width:80px; text-align:center; text-decoration:none; }
.circle-thumb-icon { width:60px; height:60px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1rem; font-weight:700;
  color:#fff; margin:0 auto 4px; letter-spacing:.05em; }
.circle-thumb-name { font-size:.72rem; color:#4a2e14; font-weight:500; line-height:1.2; }

/* ── Circle page ─────────────────────────────────────────────────────────── */
.circle-title { margin-bottom:24px; }
.circle-short { color:#7a5c3e; font-size:.8em; font-weight:400; }
/* ── Circle stage background mosaic ─────────────────────────────────────── */
.circle-bg-mosaic {
    position: absolute; inset: 0; z-index: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-auto-rows: 70px;
    overflow: hidden;
    opacity: 0.6;
    filter: grayscale(100%);
    -webkit-mask-image: radial-gradient(circle at center, transparent 330px, rgba(0,0,0,.15) 375px, rgba(0,0,0,.5) 415px, black 460px);
    mask-image:         radial-gradient(circle at center, transparent 330px, rgba(0,0,0,.15) 375px, rgba(0,0,0,.5) 415px, black 460px);
}
.circle-bg-tile {
    background-size: cover; background-position: center;
}
@media(max-width:960px){
    .circle-bg-mosaic {
        -webkit-mask-image: radial-gradient(circle at center, transparent 235px, rgba(0,0,0,.15) 268px, rgba(0,0,0,.5) 298px, black 335px);
        mask-image:         radial-gradient(circle at center, transparent 235px, rgba(0,0,0,.15) 268px, rgba(0,0,0,.5) 298px, black 335px);
    }
}
@media(max-width:720px){
    .circle-bg-mosaic {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        grid-auto-rows: 56px;
        -webkit-mask-image: radial-gradient(circle at center, transparent 158px, rgba(0,0,0,.15) 185px, rgba(0,0,0,.5) 208px, black 238px);
        mask-image:         radial-gradient(circle at center, transparent 158px, rgba(0,0,0,.15) 185px, rgba(0,0,0,.5) 208px, black 238px);
    }
}
@media(max-width:460px){
    .circle-bg-mosaic {
        grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
        grid-auto-rows: 42px;
        -webkit-mask-image: radial-gradient(circle at center, transparent 112px, rgba(0,0,0,.15) 132px, rgba(0,0,0,.5) 148px, black 170px);
        mask-image:         radial-gradient(circle at center, transparent 112px, rgba(0,0,0,.15) 132px, rgba(0,0,0,.5) 148px, black 170px);
    }
}

.circle-stage { position:relative; width:900px; height:900px; margin:32px auto 40px; }
@media(max-width:960px){ .circle-stage { width:680px; height:680px; } }
@media(max-width:720px){ .circle-stage { width:480px; height:480px; } }
@media(max-width:460px){ .circle-stage { width:340px; height:340px; } }

.circle-ring {
    position:absolute; border-radius:50%; border:6px solid #d9c7b0;
    width:520px; height:520px; top:50%; left:50%; transform:translate(-50%,-50%);
}
@media(max-width:960px){ .circle-ring { width:360px; height:360px; } }
@media(max-width:720px){ .circle-ring { width:240px; height:240px; } }
@media(max-width:460px){ .circle-ring { width:170px; height:170px; } }

.circle-member { position:absolute; transform:translate(-50%,-50%);
  text-align:center; width:170px; }
.circle-member--9  { left:calc(50% - 260px); top:50%; }
.circle-member--3  { left:calc(50% + 260px); top:50%; }
.circle-member--12 { left:50%; top:calc(50% - 260px); }
.circle-member--6  { left:50%; top:calc(50% + 260px); }
@media(max-width:960px){
    .circle-member--9  { left:calc(50% - 180px); top:50%; }
    .circle-member--3  { left:calc(50% + 180px); top:50%; }
    .circle-member--12 { left:50%; top:calc(50% - 180px); }
    .circle-member--6  { left:50%; top:calc(50% + 180px); }
}
@media(max-width:720px){
    .circle-member { width:110px; }
    .circle-member--9  { left:calc(50% - 120px); top:50%; }
    .circle-member--3  { left:calc(50% + 120px); top:50%; }
    .circle-member--12 { left:50%; top:calc(50% - 120px); }
    .circle-member--6  { left:50%; top:calc(50% + 120px); }
}
@media(max-width:460px){
    .circle-member { width:80px; }
    .circle-member--9  { left:calc(50% - 85px);  top:50%; }
    .circle-member--3  { left:calc(50% + 85px);  top:50%; }
    .circle-member--12 { left:50%; top:calc(50% - 85px); }
    .circle-member--6  { left:50%; top:calc(50% + 85px); }
}

/* ── Activity ring ────────────────────────────────────────────────────────── */
.cm-activity-ring {
    position: relative;
    width: 180px; height: 180px;
    border-radius: 50%;
    border: 3px solid #d9c7b0;
    margin: 0 auto;
    overflow: visible;
}
/* Ring border re-drawn on top of avatar via pseudo-element (z-index:3, below books/badges) */
.cm-activity-ring::after {
    content: ''; position: absolute; inset: -3px;
    border-radius: 50%; border: 3px solid #d9c7b0;
    pointer-events: none; z-index: 3;
}
.cm-activity-ring--active { border-color: #c8a96e; background: rgba(74,46,20,.06); }
.cm-activity-ring--active::after { border-color: #c8a96e; }
@media(max-width:720px){ .cm-activity-ring { width:120px; height:120px; } }
@media(max-width:460px){ .cm-activity-ring { width:80px;  height:80px; } }

.cm-avatar-link {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:100%; height:100%; border-radius:50%;
    display:block; z-index:2;
}
.cm-avatar-link:hover { opacity:.85; }
.circle-member-avatar {
    width:100%; height:100%;
    border-radius:50%; object-fit:cover;
    box-sizing:border-box; display:block;
}

.circle-member-name { display:block; font-size:.68rem; color:#4a2e14;
  font-weight:500; margin-top:4px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:160px; }

/* ── Book thumbnails — centered ON the activity ring circumference ──────────── */
/* Ring: 180px, R=90, center=(90,90). Book: 46×64 → half=(23,32).              */
/* Angles (0°=right, clockwise). Inner = toward stage center, outer = away.     */
/* cos/sin values used: 0°(1,0) 30°(.866,.5) 60°(.5,.866) 90°(0,1)            */
.cm-book {
    position: absolute; z-index: 4; overflow: visible;
    width: 46px; height: 64px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.cm-book-cover {
    display: block; width: 100%; height: 100%;
    object-fit: cover; border-radius: 4px;
}
.cm-book-cover--initial {
    width: 100%; height: 100%;
    background: #6b4c2a; color: #f5e6c8;
    font-size: .85rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
/* Progress dot: half in / half out on the RIGHT edge of the cover */
.cm-book-progress {
    position: absolute; right: -18px; top: calc(50% - 18px);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
    z-index: 6; line-height: 1;
    border: 2px solid #fff;
}

/* Positions: ring 180px, R=90, center=(90,90).
   cx = 90 + 90·cos(θ),  cy = 90 + 90·sin(θ)  [CSS: 0°=right, 90°=down]
   Book 46×64 → half=(23,32): left=cx-23, top=cy-32
   Badge tile 40×44 → half=(20,22): left=cx-20, top=cy-22
   ─────────────────────────────────────────────────────
   Books spread ±55° from inner axis:
     cos55°=0.574 sin55°=0.819  cos35°=0.819 sin35°=0.574
   Badges spread ±55° from outer axis (opposite side)        */

/* Positions: ring 180px, R=90, center=(90,90).
   cx = 90 + 90·cos(θ),  cy = 90 + 90·sin(θ)  [CSS: 0°=right, 90°=down]
   Books AND badges: 46×64 → half=(23,32): left=cx-23, top=cy-32
   Books spread ±55° from inner axis; badges ±55° from outer axis.
   ─────────────────────────────────────────────────────────────────
   Key angles (cx / cy):
    55°: 142/164  | 125°:  38/164  | 305°: 142/16  | 235°: 38/16
     0°: 180/90   | 180°:   0/90   |  35°: 164/142 | 215°: 16/142
    90°:  90/180  | 270°:  90/0    | 145°:  16/142 | 325°: 164/38  */

/* pos-9 (LEFT): books INNER=right 305°/0°/55°, badges OUTER=left 125°/180°/235° */
.circle-member--9 .cm-book-1  { left: 119px; top: -16px; }
.circle-member--9 .cm-book-2  { left: 157px; top:  58px; }
.circle-member--9 .cm-book-3  { left: 119px; top: 132px; }
.circle-member--9 .cm-badge-1 { left:  15px; top: 132px; }
.circle-member--9 .cm-badge-2 { left: -23px; top:  58px; }
.circle-member--9 .cm-badge-3 { left:  15px; top: -16px; }

/* pos-3 (RIGHT): books INNER=left 235°/180°/125°, badges OUTER=right 305°/0°/55° */
.circle-member--3 .cm-book-1  { left:  15px; top: -16px; }
.circle-member--3 .cm-book-2  { left: -23px; top:  58px; }
.circle-member--3 .cm-book-3  { left:  15px; top: 132px; }
.circle-member--3 .cm-badge-1 { left: 119px; top: -16px; }
.circle-member--3 .cm-badge-2 { left: 157px; top:  58px; }
.circle-member--3 .cm-badge-3 { left: 119px; top: 132px; }

/* pos-12 (TOP): books INNER=below 35°/90°/145°, badges OUTER=above 325°/270°/215° */
.circle-member--12 .cm-book-1  { left: 141px; top: 110px; }
.circle-member--12 .cm-book-2  { left:  67px; top: 148px; }
.circle-member--12 .cm-book-3  { left:  -7px; top: 110px; }
.circle-member--12 .cm-badge-1 { left: 141px; top:   6px; }
.circle-member--12 .cm-badge-2 { left:  67px; top: -32px; }
.circle-member--12 .cm-badge-3 { left:  -7px; top:   6px; }

/* pos-6 (BOTTOM): books INNER=above 325°/270°/215°, badges OUTER=below 35°/90°/145° */
.circle-member--6 .cm-book-1  { left: 141px; top:   6px; }
.circle-member--6 .cm-book-2  { left:  67px; top: -32px; }
.circle-member--6 .cm-book-3  { left:  -7px; top:   6px; }
.circle-member--6 .cm-badge-1 { left: 141px; top: 110px; }
.circle-member--6 .cm-badge-2 { left:  67px; top: 148px; }
.circle-member--6 .cm-badge-3 { left:  -7px; top: 110px; }

@media(max-width:720px){ .cm-book { display:none; } }

/* ── Badges — same size as books (46×64), award tile style ──────────────── */
.cm-badge {
    position: absolute; z-index: 5;
    width: 46px; height: 64px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 4px;
    border-radius: 4px;
    background: #fff8ee; border: 1.5px solid #c9a87c;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    text-align: center;
}
.cm-badge-emoji { font-size: 22px; line-height: 1; }
.cm-badge-label { font-size: 7px; font-weight: 600; color: #5a3e2b;
    line-height: 1.2; max-width: 40px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; }

@media(max-width:460px){ .cm-badge { display:none; } }

/* ── Directional shadows: light source at main ring center ───────────────── */
.circle-member--9  .cm-book,
.circle-member--9  .cm-badge { box-shadow: -3px 0px 7px rgba(0,0,0,.45); }

.circle-member--3  .cm-book,
.circle-member--3  .cm-badge { box-shadow:  3px 0px 7px rgba(0,0,0,.45); }

.circle-member--12 .cm-book,
.circle-member--12 .cm-badge { box-shadow: 0px -3px 7px rgba(0,0,0,.45); }

.circle-member--6  .cm-book,
.circle-member--6  .cm-badge { box-shadow: 0px  3px 7px rgba(0,0,0,.45); }
.circle-center-menu { position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); display:flex; flex-direction:column;
  gap:6px; text-align:center; min-width:90px; }
.circle-menu-item { display:block; font-size:.8rem; color:#4a2e14;
  font-weight:500; text-decoration:none; line-height:1.2; }
.circle-menu-item:hover { text-decoration:underline; }
.circle-menu-item span { display:block; font-size:1.3rem; font-weight:700; line-height:1; }
.circle-menu-item--dney { color:#b0a090; font-style:italic; cursor:default; }
.circle-menu-item--dney:hover { text-decoration:none; }
.circle-archived-notice { background:#f5ede3; border:1px solid #d9c7b0;
  padding:16px; border-radius:6px; color:#7a5c3e; margin-bottom:16px; }
.circle-rename-form { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.circle-center-stats { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:10px; text-align:center; }
.circle-stat-item { display:flex; flex-direction:column; gap:1px; text-decoration:none; }
.circle-stat-item--link:hover .circle-stat-value { text-decoration:underline; }
.circle-stat-value { font-size:1.5rem; font-weight:700; color:#2b1e0e; line-height:1; }
.circle-stat-label { font-size:.7rem; color:#7a5c3e; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.ab-back-link { display:inline-block; font-size:.82rem; color:#7a5c3e; text-decoration:none;
  margin-bottom:4px; font-weight:500; }
.ab-back-link:hover { text-decoration:underline; }
.cp-tab--notif { position:relative; }
.cp-tab-badge { position:absolute; top:-5px; right:-5px; background:#c0392b; color:#fff;
  font-size:.6rem; font-weight:700; min-width:15px; height:15px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; }
.cp-exchanges-table td { vertical-align:middle; }
.cp-ex-book { display:flex; align-items:center; gap:8px; min-width:140px; }
.cp-ex-cover { width:60px; height:88px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.cp-ex-title { color:#4a2e14; font-size:.88rem; text-decoration:none; }
.cp-ex-title:hover { text-decoration:underline; }
.cp-ex-user { font-size:.85rem; color:#3d2b1f; white-space:nowrap; }
.cp-ex-date { font-size:.82rem; color:#7a5c3e; white-space:nowrap; }
.cp-ex-status { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.78rem; font-weight:600; }
.cp-ex-status--borrowed { background:#e8f3e8; color:#3a7a3a; }
.cp-ex-status--returned { background:#f0ece6; color:#7a5c3e; }

/* ── Invite circle select row ────────────────────────────────────────────── */
.inv-circle-row { display:flex; align-items:center; gap:8px; }
.inv-circle-label { font-size:.82rem; color:#7a5c3e; font-weight:500; white-space:nowrap; }
.inv-circle-select { padding:.35rem .6rem; border:1px solid #c9a87c; border-radius:5px;
  background:#fdf6ee; color:#4a2e14; font-size:.85rem; font-family:inherit; cursor:pointer; }
.inv-circle-select:focus { outline:none; border-color:#7a5c3e; box-shadow:0 0 0 2px #c9a87c44; }

/* ── Circle page header ──────────────────────────────────────────────────── */
.circle-header-short { font-weight:700; color:#fff; margin-right:6px; }
.circle-header-full  { color:rgba(255,255,255,.75); font-weight:400; }
.circle-edit-btn { background:none; border:1px solid #c9a87c; border-radius:5px;
  padding:3px 9px; font-size:.9rem; color:#7a5c3e; cursor:pointer; line-height:1;
  transition:background .12s,color .12s; }
.circle-edit-btn:hover,
.circle-edit-btn--active { background:#f5ede3; color:#4a2e14; border-color:#7a5c3e; }
.circle-rename-label { font-size:.8rem; color:#7a5c3e; display:block; margin-bottom:4px; }
.cp-exit-btn { font-size:.82rem; color:#7a5c3e; text-decoration:none; border:1px solid #c9a87c;
  border-radius:5px; padding:3px 10px; white-space:nowrap; transition:background .12s; }
.cp-exit-btn:hover { background:#f5ede3; color:#4a2e14; }
.cp-section-heading { font-size:.95rem; font-weight:700; color:#3d2b1f; margin:0 0 10px;
  padding-bottom:5px; border-bottom:1px solid #e8d5c0; }

/* ── Circle page tabs / stats / charts ─────────────────────────────────────── */
.cp-chart-section { padding:0 0 8px; }
.cp-chart-title   { font-size:.85rem; font-weight:700; color:#4a2e14; padding:0 20px 6px; }

/* Stats table */
.cs-stats-table { width:100%; min-width:100%; }
.cs-th-stat-label { min-width:160px; white-space:nowrap; }
.cs-th-member   { text-align:center; padding:5px 8px; min-width:110px; white-space:nowrap; }
.cs-th-username { display:block; font-weight:700; color:#4a2e14; font-size:.82rem; }
.cs-th-joined   { font-size:.72rem; color:#9a7a5a; font-weight:400; }
.cs-row-label   { padding:6px 10px 6px 0; font-size:.78rem; color:#5a3e20; font-weight:600;
                  white-space:nowrap; border-top:1px solid #ede0d0; }
.cs-cell        { text-align:center; padding:6px 8px; font-size:.82rem; color:#3d2b1f;
                  border-top:1px solid #ede0d0; vertical-align:top; }
.cs-cell--lang  { font-size:.75rem; white-space:nowrap; }
.cs-cell--book  { min-width:90px; }
.cs-cell--comment { max-width:200px; min-width:140px; }
.cs-muted       { color:#c5b5a5; }

/* Book cover in stats */
.cs-book-cover  { width:36px; height:52px; object-fit:cover; border-radius:2px;
                  display:block; margin:0 auto 4px; }
.cs-stars       { display:block; font-size:.75rem; color:#b8860b; line-height:1.3; text-align:center; }
.cs-star--half  { font-size:.65rem; }
.cs-star--empty { color:#d5c5a5; }
.cs-tie-label   { font-size:.75rem; font-weight:700; color:#7a5c3e; display:block; margin-bottom:3px; }
.cs-tie-list    { font-size:.72rem; }
.cs-tie-list a  { color:#5d8a5e; text-decoration:none; }
.cs-tie-list a:hover { text-decoration:underline; }
.cs-fastest-wrap { position:relative; display:inline-block; }
.cs-fastest-title { font-size:.72rem; color:#4a2e14; text-decoration:none; line-height:1.3; }
.cs-fastest-title:hover { text-decoration:underline; }
.cs-fastest-tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); z-index:20;
  background:#fff; border:1px solid #d9c7b0; border-radius:4px;
  padding:3px; box-shadow:0 4px 12px rgba(74,46,20,.18); pointer-events:none; }
.cs-fastest-tip img { display:block; width:60px; height:88px; object-fit:cover; border-radius:2px; }
.cs-fastest-wrap:hover .cs-fastest-tip { display:block; }
.cs-no-cover .cs-fastest-tip { display:none !important; }
.cs-stat-days { display:inline-block; margin-top:4px; padding:1px 6px;
  background:#f5e6c8; color:#7a5c3e; font-size:.72rem; font-weight:700;
  border-radius:10px; border:1px solid #d9c7b0; }

/* Comment cell */
.cs-comment-wrap    { position:relative; }
.cs-vote-badge      { position:absolute; top:-6px; right:-6px; background:#c0392b; color:#fff;
                      font-size:.65rem; font-weight:700; min-width:18px; height:18px; border-radius:9px;
                      display:flex; align-items:center; justify-content:center; padding:0 4px;
                      line-height:1; z-index:1; }
.cs-comment-excerpt { font-size:.76rem; color:#3d2b1f; font-style:italic; margin:0 0 5px;
                      line-height:1.4; word-break:break-word; }
.cs-comment-meta    { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cs-comment-book    { font-size:.7rem; color:#7a5c3e; text-decoration:none; }
.cs-comment-book:hover { text-decoration:underline; }
.cs-vote-btn        { background:none; border:1px solid #d9c7b0; border-radius:4px; cursor:pointer;
                      font-size:.72rem; color:#7a5c3e; padding:2px 6px; transition:background .12s,border-color .12s; }
.cs-vote-btn:hover  { background:#f5ede3; }
.cs-vote-btn--active { background:#f5ede3; border-color:#a07850; color:#4a2e14; font-weight:600; }

/* Invite overlay */
.cp-invite-overlay { position:fixed; inset:0; background:rgba(30,18,5,.72);
                     display:flex; align-items:center; justify-content:center; z-index:200; }
.cp-invite-card    { background:#2b1e0e; border:1px solid #7a5c3e; border-radius:8px;
                     padding:24px; max-width:380px; width:90%; position:relative; color:#f0e9de; }
.cp-invite-title   { font-size:1rem; font-weight:700; color:#c9a87c; margin-bottom:14px; }
.cp-invite-close-btn { position:absolute; top:10px; right:12px; background:none; border:none;
                       font-size:1.3rem; color:#c9a87c; cursor:pointer; line-height:1; }
.cp-invite-close-btn:hover { color:#fff; }

/* Genre cloud placeholder */
.cp-genre-placeholder { border:1px dashed #d9c7b0; border-radius:6px; overflow:hidden; }
.cp-genre-coming-soon { text-align:center; color:#a07850; padding:48px 0;
                        font-style:italic; font-size:.9rem; }
.cp-beta-badge { position:absolute; top:0; right:20px; background:#7a5c3e; color:#fff;
                 font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:2px;
                 text-transform:uppercase; letter-spacing:.04em; }

/* ── Genre cloud ───────────────────────────────────────────────────────────── */
.cp-chart-info  { margin-left:8px; font-size:.82rem; color:#a07850; cursor:default; }
.cp-gc-toolbar  { display:flex; align-items:center; gap:16px; padding:6px 20px 8px; flex-wrap:wrap; }
.cp-lang-toggle { display:flex; gap:0; border:1px solid #7a5c3e; border-radius:4px; overflow:hidden; }
.cp-lang-btn    { background:#2b1e0e; color:#c9a87c; border:none; padding:4px 12px; font-size:.8rem;
                  font-family:Georgia,serif; cursor:pointer; }
.cp-lang-btn--active { background:#7a5c3e; color:#fff; }
.cp-lang-btn:hover:not(.cp-lang-btn--active) { background:#3a2a1a; }
.cp-gc-min-label { font-size:.8rem; color:#a07850; display:flex; align-items:center; }
.cp-gc-min-input { width:46px; background:#2b1e0e; border:1px solid #7a5c3e; color:#f0e6d3;
                   padding:3px 5px; border-radius:3px; font-size:.8rem; text-align:center; }
#cp-gc-canvas      { display:block; width:100%; }
.cp-gc-separator   { border:none; border-top:1px solid #d9c7b0; margin:16px 20px 12px; }
.cp-gc-data-table  { width:calc(100% - 40px); margin:0 20px 16px; }
.cp-gc-td-genre    { color:#4a2e14; font-size:.85rem; }
.cp-gc-td-count    { text-align:right; color:#7a5c3e; font-weight:600; font-size:.85rem;
                     padding-right:12px !important; }
.dq-genre-cnt      { color:#7a5c3e; font-size:.78rem; }
.dq-genre-table td, .dq-genre-table th { padding:5px 8px; vertical-align:middle; }
.dq-genre-section-title { font-size:.9rem; font-weight:600; color:#c8a97a; margin:0 0 4px; }
.dq-genre-section-sub   { font-size:.78rem; font-weight:400; color:#999; }
.dq-semantic-form  { background:#2b1e0e; border:1px solid #5a3e2a; border-radius:6px; padding:14px 16px; }
.dq-semantic-row   { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.dq-semantic-row:last-child { margin-bottom:0; }
.dq-semantic-label { font-size:.8rem; color:#aaa; min-width:70px; flex-shrink:0; }
.dq-semantic-input { background:#3a2a1a; border:1px solid #7a5c3e; color:#f0e6d3; padding:5px 8px;
                     border-radius:4px; font-size:.82rem; outline:none; }
.dq-semantic-input:focus { border-color:#c8a97a; }
.dq-sg-suggest     { position:absolute; top:100%; left:0; right:0; background:#2b1e0e;
                     border:1px solid #7a5c3e; border-radius:0 0 4px 4px; max-height:180px;
                     overflow-y:auto; z-index:20; }
.dq-sg-option      { padding:5px 10px; font-size:.82rem; color:#f0e6d3; cursor:pointer; }
.dq-sg-option:hover { background:#3a2a1a; }
.dq-sg-selected    { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; min-height:10px; }
.dq-sg-chip        { display:inline-flex; align-items:center; gap:4px; background:#3a2a1a;
                     border:1px solid #7a5c3e; border-radius:12px; padding:2px 8px 2px 10px;
                     font-size:.78rem; color:#f0e6d3; }
.dq-sg-chip-del    { background:none; border:none; color:#c8a97a; cursor:pointer; font-size:.9rem;
                     padding:0; line-height:1; }
.dq-genre-norms-panel { background:#fffdf8; border:1px solid #d9c7b0; border-radius:6px;
                        padding:16px 20px 20px; margin-top:16px; }
.dq-norm-edit-input { background:#3a2a1a; border:1px solid #7a5c3e; color:#f0e6d3;
                      padding:3px 6px; border-radius:3px; font-size:.82rem; }
.dq-norm-edit-input:focus { border-color:#c8a97a; outline:none; }

/* ── Language switcher ─────────────────────────────────────────────────────── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px;
    flex-shrink: 0;
}
.lang-flag {
    width: 20px;
    height: 15px;
    cursor: pointer;
    border-radius: 2px;
    opacity: 0.45;
    border: 1px solid transparent;
    transition: opacity .15s, border-color .15s;
    display: block;
}
.lang-flag:hover     { opacity: 0.8; }
.lang-flag--active   { opacity: 1; border-color: #7a5c3e; }

/* ── Language switch modal ─────────────────────────────────────────────────── */
.lang-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 18, 5, 0.72);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-modal {
    background: #2b1e0e;
    border: 1px solid #7a5c3e;
    border-radius: 10px;
    padding: 24px 28px;
    min-width: 260px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}
.lang-modal-title {
    color: #f5ede3;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 18px;
}
.lang-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lang-modal-btn {
    padding: 9px 14px;
    border-radius: 6px;
    border: none;
    font-size: .9rem;
    cursor: pointer;
    font-weight: 500;
    transition: opacity .15s;
}
.lang-modal-btn:hover { opacity: .85; }
.lang-modal-btn--session   { background: #7a5c3e; color: #fff; }
.lang-modal-btn--permanent { background: #5d8a5e; color: #fff; }
.lang-modal-btn--cancel    { background: transparent; color: #aaa;
    border: 1px solid #555; font-weight: 400; font-size: .85rem; }
/* ── Feature 23: Challenges ──────────────────────────────────────────────── */

/* Modal wrapper (reuses .bookwatch-modal base; add challenge-specific overrides) */
.challenge-modal { position: relative; }

/* Level badge — top-right of QCM modal step */
.challenge-level-badge {
    position: absolute;
    top: 10px;
    right: 14px;
    background: #4a3580;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* QCM question prompt */
.challenge-qcm-word {
    font-size: 1rem;
    color: #f0c870;
    font-weight: 600;
    margin: 1.2rem 0 0.8rem;
    text-align: center;
}

/* Timer bar */
.challenge-timer-bar {
    width: 100%;
    height: 6px;
    background: #3d2c1a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.challenge-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #5a8a5a, #f0c870);
    border-radius: 3px;
    transition: width 5s linear;
}

/* Pulse dot */
.challenge-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5a8a5a;
    margin: 0 auto 12px;
    transition: background 0.3s;
}
.challenge-pulse-dot.is-pulsing {
    animation: chall-pulse-green 0.8s ease-in-out infinite;
}
.challenge-pulse-dot.is-urgent {
    background: #c0392b;
    animation: chall-pulse-red 0.4s ease-in-out infinite;
}
@keyframes chall-pulse-green {
    0%,100% { box-shadow: 0 0 0 0 rgba(90,138,90,0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(90,138,90,0); }
}
@keyframes chall-pulse-red {
    0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}

/* QCM option buttons */
.challenge-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0.5rem 0 0.6rem;
}
.chall-option-btn {
    background: #3d2c1a;
    border: 1px solid #7a5c3e;
    color: #ddc9a3;
    padding: 0.55rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    font-size: 0.93rem;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
}
.chall-option-btn:hover:not(:disabled) { background: #4a3520; }
.chall-option-btn:disabled { opacity: 0.65; cursor: default; }
.chall-option-btn.chall-correct { background: #2d5a2d; border-color: #5a8a5a; color: #a8d5a8; }
.chall-option-btn.chall-wrong   { background: #5a1e1e; border-color: #a94442; color: #f5b8b8; }

/* Computing spinner */
.challenge-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #3d2c1a;
    border-top-color: #f0c870;
    border-radius: 50%;
    animation: chall-spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes chall-spin { to { transform: rotate(360deg); } }

/* Language option labels */
.chall-lang-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ddc9a3;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #7a5c3e;
    border-radius: 4px;
    font-size: 0.88rem;
}
.chall-lang-opt input { cursor: pointer; }

/* Climber rank block */
.chall-rank-block  { margin: 1rem auto 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.chall-climber-svg { display: block; margin: 0 auto; }
.chall-rank-text   { font-size: 1rem; font-weight: 600; color: #c17a3a; text-align: center; min-height: 1.4em; }

/* Book pile animation — bottom book (5) first, top book (1) last */
@keyframes challBookIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes challFigureIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chall-book   { opacity: 0; animation: challBookIn .3s ease-out forwards; }
.chall-book-5 { animation-delay: 0s; }
.chall-book-4 { animation-delay: .22s; }
.chall-book-3 { animation-delay: .44s; }
.chall-book-2 { animation-delay: .66s; }
.chall-book-1 { animation-delay: .88s; }
.chall-figure { opacity: 0; animation: challFigureIn .35s ease-out forwards; animation-delay: 1.15s; }

/* Needle spinner — shown while percentile fetch is in-flight */
.chall-needle-wrap {
    width: 44px; height: 44px; margin: .4rem auto;
    position: relative;
    transition: opacity .3s ease;
}
.chall-needle-wrap::before {          /* dial circle */
    content: ''; position: absolute; inset: 0;
    border: 2px solid #e8d5b0; border-radius: 50%;
}
.chall-needle-wrap::after {           /* centre dot */
    content: ''; position: absolute;
    width: 6px; height: 6px;
    background: #c17a3a; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 1;
}
/* needle line rendered as a pseudo on an inner div */
.chall-needle-wrap .chall-needle-ptr,
.chall-needle-wrap:empty::before { display: block; }
@keyframes challNeedle {
    0%   { transform: translateX(-50%) rotate(-110deg); }
    100% { transform: translateX(-50%) rotate(110deg); }
}
.chall-needle-wrap::before { pointer-events: none; }

/* Use a generated needle via JS-injected inner element */
.chall-needle-ptr {
    position: absolute;
    width: 2px; height: 16px;
    background: #c17a3a; border-radius: 2px 2px 0 0;
    bottom: 50%; left: calc(50% - 1px);
    transform-origin: bottom center;
    animation: challNeedle 1.2s ease-in-out infinite alternate;
}
.chall-needle--done { opacity: 0; pointer-events: none; }

/* Score text reveal */
@keyframes challScoreIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chall-rank-text--in { animation: challScoreIn .4s ease-out forwards; }

/* Rank leaderboard table */
.chall-rank-table { width: 100%; max-width: 300px; margin: 0.7rem auto 0; border-collapse: collapse; font-size: 0.86rem; color: #F0DFC0; }
.chall-rank-table th,
.chall-rank-table td { padding: 0.32rem 0.55rem; text-align: center; border-bottom: 1px solid rgba(193,122,58,0.2); }
.chall-rank-table thead th { color: #C17A3A; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(193,122,58,0.45); }
.chall-rank-table td:nth-child(1) { width: 2.6rem; font-weight: 700; color: #C17A3A; }
.chall-rank-table td:nth-child(2) { text-align: left; }
.chall-rank-me td { background: rgba(193,122,58,0.18); font-weight: 700; }

/* Challenges page cards */
.challenge-page-card {
    background: #2b1e0e;
    border: 1px solid #7a5c3e;
    border-radius: 6px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}
.challenge-page-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f0c870;
    margin-bottom: 0.3rem;
}
.challenge-page-card-meta {
    font-size: 0.85rem;
    color: #c5a97a;
    margin-bottom: 0.5rem;
}
.challenge-prog-bar-wrap {
    width: 100%;
    height: 6px;
    background: #3d2c1a;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.challenge-prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5a8a5a, #f0c870);
    border-radius: 3px;
    transition: width 0.4s;
}

/* Result blocks */
.challenge-result-block {
    background: #2b1e0e;
    border: 1px solid #7a5c3e;
    border-radius: 6px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.7rem;
    transition: filter 0.3s;
}
.challenge-result-block.blurred {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}
.challenge-result-block-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ddc9a3;
}
.challenge-result-score {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f0c870;
    white-space: nowrap;
}

/* Circle leaderboard table */
.cp-chall-table th, .cp-chall-table td { vertical-align: middle; }

/* ─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   Book Detail Page Rework (Lot 1)
   ══════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.bd-page {
    padding-bottom: 32px;
}

/* Title */
.bd-title {
    font-size: 1.5rem;
    color: #4a2e14;
    margin: 0 0 18px;
    line-height: 1.25;
}

/* ── Top 3-column grid ────────────────────────────────────────────────────── */
.bd-top-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: start;
    margin-bottom: 16px;
}
@media (max-width: 700px) {
    .bd-top-grid {
        grid-template-columns: 1fr;
    }
    .bd-right { order: 2; }
    .bd-middle { order: 3; }
}
@media (min-width: 701px) and (max-width: 900px) {
    .bd-top-grid {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "left right"
            "middle middle";
    }
    .bd-left   { grid-area: left; }
    .bd-middle { grid-area: middle; }
    .bd-right  { grid-area: right; }
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.bd-cover-wrap {
    margin-bottom: 12px;
    flex-shrink: 0;
}
.bd-cover-wrap img {
    max-width: 150px;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d9c7b0;
    display: block;
}
.bd-no-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 170px;
    background: #f9f5f0;
    border: 2px dashed #c9a87c;
    border-radius: 4px;
    color: #9a7a55;
    font-size: .78rem;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    line-height: 1.3;
}
.bd-no-cover:hover { background: #f2e9dc; }
.bd-no-cover--placeholder {
    cursor: default;
    border-style: solid;
    color: transparent;
}
.bd-key-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bd-meta-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .85rem;
}
.bd-meta-row--ownership {
    margin-top: 4px;
    align-items: center;
}
.bd-meta-row--added-by {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #e0d0bc;
    align-items: center;
    gap: 6px;
}
.bd-added-by-link {
    font-size: .78rem;
    color: #7a4f2e;
    text-decoration: none;
    font-weight: 600;
}
.bd-added-by-link:hover { text-decoration: underline; }
.bd-added-by-date {
    font-size: .72rem;
    color: #a07850;
    white-space: nowrap;
}
.bd-meta-label {
    color: #9a7a55;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.bd-meta-value { color: #3a2a1a; }
.bd-meta-value a { color: #7a4f2e; text-decoration: none; }
.bd-meta-value a:hover { text-decoration: underline; }
.bd-ownership-badge {
    display: inline-block;
    background: #eaf2e3;
    color: #3d6b2a;
    border: 1px solid #b6d5a0;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.bd-shelf-tag {
    display: inline-block;
    background: #fdf3e3;
    color: #8b5e3c;
    border: 1px solid #d9c7b0;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .72rem;
}

/* ── Middle column ────────────────────────────────────────────────────────── */
.bd-compact-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 8px;
    min-width: 0;
}
.bd-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bd-rating-num {
    font-weight: 700;
    color: #4a2e14;
    font-size: .95rem;
}
.bd-rating-voters {
    color: #888;
    font-size: .78rem;
}
.bd-rating-none {
    color: #aaa;
    font-size: .83rem;
}
.bd-completed-row {
    color: #555;
    font-size: .85rem;
}
.bd-completed-row strong {
    color: #4a2e14;
    font-size: 1.1rem;
}
.bd-stats-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 6px;
    border-top: 1px solid #ede3d6;
}
.bd-stats-link {
    color: #9a7a55;
    font-size: .78rem;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
}
.bd-stats-link:hover { color: #4a2e14; text-decoration: underline; }

/* ── Right column — actions card ─────────────────────────────────────────── */
.bd-actions-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #fdf3e3;
    border: 1px solid #d9c7b0;
    border-radius: 8px;
    min-width: 175px;
}
.bd-action-sep {
    height: 1px;
    background: #ede3d6;
    margin: 2px 0;
}
.bd-action-btn {
    display: block;
    text-align: center;
    padding: 9px 14px;
    border-radius: 5px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity .15s;
    width: 100%;
    box-sizing: border-box;
}
.bd-action-btn:hover { opacity: .85; }
.bd-action-primary {
    background: #4a2e14;
    color: #fff;
}
@keyframes bd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,46,20,.6); }
    50%       { box-shadow: 0 0 0 8px rgba(74,46,20,0); }
}
.bd-action-pulse {
    animation: bd-pulse 1.1s ease-in-out 4;
}
.bd-action-secondary {
    background: #f2e9dc;
    color: #4a2e14;
    border: 1px solid #c9a87c !important;
}
.bd-action-add {
    background: #5a7a3a;
    color: #fff;
}
.bd-action-remove {
    background: #c0392b;
    color: #fff;
    font-size: .78rem;
    padding: 6px 10px;
}
.bd-action-small {
    font-size: .78rem;
    padding: 5px 10px;
    width: auto;
    display: inline-block;
}
.bd-action-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bd-action-hint {
    font-size: .78rem;
    color: #9a7a55;
    text-align: center;
    line-height: 1.4;
}
.bd-collection-status {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.bd-shelf-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bd-select {
    width: 100%;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #c9a87c;
    border-radius: 4px;
    color: #3a2a1a;
    font-size: .83rem;
    box-sizing: border-box;
}

/* ── Information accordion ────────────────────────────────────────────────── */
.bd-accordion {
    border: 1px solid #d9c7b0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.bd-accordion-summary {
    background: #4a2e14;
    color: #fff;
    padding: 10px 20px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bd-accordion-summary::-webkit-details-marker { display: none; }
.bd-acc-expand-lbl,
.bd-acc-collapse-lbl { font-size: .85em; opacity: .7; font-weight: normal; }
.bd-acc-collapse-lbl { display: none; }
details[open] .bd-acc-expand-lbl   { display: none; }
details[open] .bd-acc-collapse-lbl { display: inline; }
.bd-accordion-summary::after {
    display: none;
    opacity: .7;
    transition: transform .2s;
}
details[open] .bd-accordion-summary::after { transform: rotate(180deg); }
.bd-accordion-body {
    background: #fffdf8;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}
@media (max-width: 480px) {
    .bd-accordion-body { grid-template-columns: 1fr; }
}
.bd-info-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: .85rem;
    padding: 4px 0;
    border-bottom: 1px solid #f0e9df;
}
.bd-info-label {
    color: #9a7a55;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    min-width: 70px;
    flex-shrink: 0;
}
.bd-info-value { color: #3a2a1a; }
.bd-info-value a { color: #7a4f2e; text-decoration: none; }
.bd-info-value a:hover { text-decoration: underline; }

/* ── Summary section ─────────────────────────────────────────────────────── */
.bd-summary-section {
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.bd-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9a7a55;
    margin-bottom: 8px;
}
.bd-summary-text {
    color: #444;
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Modals (community stats / my reading stats) ─────────────────────────── */
.bd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30,18,5,.72);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.bd-modal {
    background: #fffdf8;
    border: 1px solid #d9c7b0;
    border-radius: 10px;
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
.bd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #4a2e14;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.bd-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.bd-modal-close:hover { color: #fff; }
.bd-modal-body {
    padding: 20px;
}

/* ── Guest sign-up popup ─────────────────────────────────────────────────── */
.bd-guest-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: 92vw;
    background: #fffdf8;
    border: 1px solid #c9a87c;
    border-radius: 10px;
    padding: 24px 20px 20px;
    box-shadow: 0 6px 28px rgba(0,0,0,.22);
    z-index: 1050;
    text-align: center;
}
.bd-guest-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #9a7a55;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}
.bd-guest-close:hover { color: #4a2e14; }
.bd-guest-popup-icon { font-size: 1.8rem; margin-bottom: 8px; }
.bd-guest-popup-title {
    font-size: 1rem;
    color: #4a2e14;
    margin: 0 0 8px;
    font-weight: 700;
}
.bd-guest-popup-body {
    font-size: .83rem;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}
.bd-guest-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.bd-guest-login-link {
    font-size: .82rem;
    color: #9a7a55;
    text-decoration: none;
}
.bd-guest-login-link:hover { text-decoration: underline; }
@media (max-width: 400px) {
    .bd-guest-popup { width: 92vw; }
}

/* ── Summary tabs ──────────────────────────────────────────────────────────── */
.sum-tabs-wrap {
    margin: 18px 0 0;
}
.sum-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #ede3d6;
    margin-bottom: 0;
}
.sum-tab-btn {
    position: relative;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: .88rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.sum-tab-btn:hover { color: #5a3e28; }
.sum-tab-active {
    color: #5a3e28;
    border-bottom-color: #c9a87c;
}
.sum-notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d64e2a;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
}
.sum-panel {
    padding: 16px 0 0;
}

/* ── Comment cards (Lot 3) ─────────────────────────────────────────────────── */
.cmt-status-badge {
    border-radius: 10px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.cmt-status-completed { background: #e6f4ea; color: #2e7d32; }
.cmt-status-active    { background: #e3f0fb; color: #1565c0; }
.cmt-status-paused    { background: #fff3e0; color: #e65100; }
.cmt-status-dropped   { background: #fdecea; color: #c62828; }
.cmt-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0e6d3;
    border: 1px solid #c9a87c;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: .82rem;
    color: #5a3e28;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cmt-like-btn:hover { background: #e0d0bc; }
.cmt-like-active {
    background: #c9a87c;
    border-color: #a07830;
    color: #fff;
}

/* ── Quote cards (Lot 2) ───────────────────────────────────────────────────── */
.qt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ede3d6;
}
.qt-type-btns,
.qt-lang-btns {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.qt-filter-label {
    font-size: .78rem;
    color: #888;
}
.qt-type-btn,
.qt-lang-btn {
    background: #f0e6d3;
    border: 1px solid #c9a87c;
    color: #5a3e28;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.qt-type-btn:hover,
.qt-lang-btn:hover { background: #e0d0bc; }
.qt-type-active,
.qt-lang-active {
    background: #c9a87c;
    border-color: #a07830;
    color: #fff;
    font-weight: 600;
}
.qt-card {
    border: 1px solid #ede3d6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fdf9f5;
}
.qt-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.qt-text {
    font-style: italic;
    color: #444;
    font-size: .9rem;
    line-height: 1.55;
    border-left: 3px solid #c9a87c;
    margin: 0 0 10px 0;
    padding-left: 10px;
}
.qt-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.qt-votes {
    display: flex;
    align-items: center;
    gap: 5px;
}
.qt-type-badge {
    background: #e8f0fb;
    color: #3a6ea8;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* ── You might also like (Lot 4) ──────────────────────────────────────────── */
.bd-related-section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #3a2a1a;
}
.bd-related-hd {
    font-size: 1rem;
    font-weight: 600;
    color: #c9a87c;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.bd-related-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.bd-related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100px;
    transition: opacity .15s;
}
.bd-related-card:hover { opacity: .8; }
.bd-related-cover {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #2a1e0f;
}
.bd-related-no-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #c9a87c;
    background: #2a1e0f;
    border: 1px solid #5a3e28;
}
.bd-related-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    gap: 2px;
}
.bd-related-title {
    font-size: .78rem;
    color: #e8d5bc;
    text-align: center;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bd-related-author {
    font-size: .72rem;
    color: #a07850;
    text-align: center;
}

/* ── Recommend button & modal (Lot 4) ──────────────────────────────────────── */
.bd-action-recommend {
    background: #5d8a5e;
    color: #fff;
    border: 1px solid #4a7250;
}
.bd-action-recommend:hover { background: #4a7250; }

/* ── Buy buttons (Lot M1) ──────────────────────────────────────────────────── */
.bd-buy-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.bd-buy-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid #3d2b1f;
    color: #3d2b1f;
    background: transparent;
    transition: background .15s, color .15s;
    box-sizing: border-box;
    gap: 1px;
}
.bd-buy-btn:hover {
    background: #3d2b1f;
    color: #f5e6d0;
}
.bd-buy-icon {
    font-size: 1rem;
    line-height: 1;
}
.bd-buy-label {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
}
.bd-buy-dest {
    font-size: .68rem;
    font-weight: 400;
    opacity: .75;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Where to buy — trigger button ───────────────────────────────────────── */
.bd-action-buy {
    background: transparent;
    color: #3d2b1f;
    border: 1px solid #3d2b1f !important;
}
.bd-action-buy:hover {
    background: #3d2b1f;
    color: #f5e6d0;
    opacity: 1;
}

/* ── Where to buy — modal ─────────────────────────────────────────────────── */
.bd-buy-modal-inner { width: 360px; }
.bd-buy-prov-list {
    display: flex;
    flex-direction: column;
}
.bd-buy-prov-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e8ddd0;
}
.bd-buy-prov-row:last-child { border-bottom: none; }
.bd-buy-prov-logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e8ddd0;
    padding: 2px;
}
.bd-buy-prov-name {
    flex: 1;
    font-size: .9rem;
    font-weight: 600;
    color: #3d2b1f;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bd-buy-uncertain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #a07840;
    color: #a07840;
    font-size: .65rem;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
}
.bd-buy-prov-link {
    color: #4a2e14;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid #4a2e14;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.bd-buy-prov-link:hover {
    background: #4a2e14;
    color: #fff;
}

/* ── Upgrade prompt (Lot M1) ──────────────────────────────────────────────── */
.upgrade-prompt {
    background: #fdf9f5;
    border: 1px solid #ede3d6;
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
    max-width: 420px;
    margin: 24px auto;
}
.upgrade-prompt-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.upgrade-prompt-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2b1e0e;
    margin: 0 0 8px;
}
.upgrade-prompt-sub {
    font-size: .9rem;
    color: #5a3e28;
    margin: 0 0 16px;
}
.upgrade-prompt-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    display: inline-block;
}
.upgrade-prompt-perks li {
    font-size: .88rem;
    color: #3a2a1a;
    padding: 3px 0;
}
.upgrade-prompt-cta {
    display: inline-block;
    padding: 10px 28px;
    background: #b8860b;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    transition: opacity .15s;
}
.upgrade-prompt-cta:hover { opacity: .85; }

/* ── Nav premium link (Lot M1) ────────────────────────────────────────────── */
.nav-premium-link {
    color: #b8860b !important;
    font-weight: 700;
}

/* ── Premium page (Lot M1) ────────────────────────────────────────────────── */
.premium-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0 40px;
}
.premium-hero {
    background: linear-gradient(135deg, #2b1e0e 60%, #4a2e14);
    border-radius: 10px;
    padding: 36px 28px;
    text-align: center;
    margin-bottom: 28px;
}
.premium-hero-inner { max-width: 480px; margin: 0 auto; }
.premium-earlybird-banner {
    display: inline-block;
    background: #b8860b;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    letter-spacing: .04em;
}
.premium-hero-title {
    font-size: 1.8rem;
    color: #c9a87c;
    margin: 0 0 10px;
    font-weight: 700;
}
.premium-hero-sub {
    font-size: .98rem;
    color: #e0c8a8;
    margin: 0;
}
.premium-pricing-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.premium-card {
    background: #fdf9f5;
    border: 1px solid #ede3d6;
    border-radius: 10px;
    padding: 24px 22px;
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    text-align: center;
    position: relative;
}
.premium-card--featured {
    border-color: #b8860b;
    box-shadow: 0 0 0 2px #b8860b22;
}
.premium-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #b8860b;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.premium-card-head { margin-bottom: 8px; }
.premium-period {
    font-size: .82rem;
    font-weight: 700;
    color: #9a7a55;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.premium-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #2b1e0e;
    line-height: 1;
    margin: 8px 0 4px;
}
.premium-per {
    font-size: .9rem;
    font-weight: 400;
    color: #9a7a55;
}
.premium-price-equiv {
    font-size: .8rem;
    color: #5d8a5e;
    font-weight: 600;
    margin-bottom: 6px;
}
.premium-strikethrough {
    font-size: .75rem;
    color: #aaa;
    margin-bottom: 14px;
}
.premium-cta-btn {
    display: block;
    padding: 11px 16px;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: 14px;
    transition: opacity .15s;
    text-align: center;
}
.premium-cta-btn:hover { opacity: .85; }
.premium-cta-monthly { background: #3d2b1f; color: #f5e6d0; }
.premium-cta-annual  { background: #b8860b; color: #fff; }
.premium-perks-wrap {
    background: #fdf9f5;
    border: 1px solid #ede3d6;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 24px;
}
.premium-perks-title {
    font-size: 1rem;
    font-weight: 700;
    color: #2b1e0e;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.premium-perks-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.premium-perk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #ede3d6;
    font-size: .92rem;
    color: #3a2a1a;
}
.premium-perk-item:last-child { border-bottom: none; }
.premium-perk-icon { font-size: 1.1rem; flex-shrink: 0; }
.premium-coming-soon {
    background: #f0e9de;
    border: 1px dashed #c9a87c;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-size: .9rem;
    color: #5a3e28;
}
.premium-coming-soon p { margin: 0 0 12px; }
.premium-contact-link {
    display: inline-block;
    padding: 8px 22px;
    background: #5a3e28;
    color: #f5e6d0;
    border-radius: 5px;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
}
.premium-contact-link:hover { opacity: .85; }
@media (max-width: 480px) {
    .premium-pricing-row { flex-direction: column; align-items: center; }
    .premium-card { max-width: 100%; width: 100%; }
}
.bd-recommend-modal-inner {
    max-width: 400px;
    width: 94%;
    overflow: visible;
}
.bd-rec-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid #3a2a1a;
}
.bd-rec-tab {
    background: none;
    border: none;
    color: #a07850;
    font-size: .88rem;
    font-family: Georgia, serif;
    padding: 6px 18px 8px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.bd-rec-tab:hover { color: #c9a87c; }
.bd-rec-tab-active {
    color: #e8d5bc;
    border-bottom-color: #c9a87c;
    font-weight: 600;
}
.bd-rec-panel { margin-bottom: 4px; }
.bd-rec-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: #1e1409;
    border: 1px solid #5a3e28;
    border-radius: 4px;
    color: #f0e6d3;
    font-size: .9rem;
    font-family: Georgia, serif;
}
.bd-rec-input::placeholder { color: #7a5c3e; }

/* ── Roadmap ─────────────────────────────────────────────────────────────── */
.rm-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }

/* Hero */
.rm-hero { text-align: center; padding: 36px 16px 28px; }
.rm-hero-title { font-size: 2rem; color: #2b1e0e; margin: 0 0 4px; }
.rm-version    { font-size: 0.72rem; color: #b09070; letter-spacing: 0.04em; margin: 0 0 14px; }
.rm-hero-sub { color: #7a5c3e; font-size: 1rem; max-width: 520px; margin: 0 auto 22px; line-height: 1.55; }
.rm-submit-btn { display: inline-block; background: #5d8a5e; color: #fff; border: none; border-radius: 5px; padding: 10px 24px; font-size: .95rem; font-family: Georgia, serif; cursor: pointer; text-decoration: none; transition: background .15s; }
.rm-submit-btn:hover { background: #4a7250; }
.rm-submit-btn--ghost { background: none; border: 2px solid #5d8a5e; color: #5d8a5e; }
.rm-submit-btn--ghost:hover { background: #f0f8f0; }

/* Section titles */
.rm-section-title { font-size: 1.15rem; color: #2b1e0e; margin: 0 0 14px; font-weight: 600; }

/* Epics grid */
.rm-epics-wrap { margin-bottom: 36px; }
.rm-epics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rm-epic-card { background: #fffdf8; border: 1px solid #d9c7b0; border-radius: 8px; padding: 14px; position: relative; overflow: hidden; }
.rm-epic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.rm-epic--planned::before  { background: #4e6a8c; }
.rm-epic--progress::before { background: #c9873e; }
.rm-epic--done::before     { background: #5d8a5e; }
.rm-epic-status-dot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 8px; background: #ccc; }
.rm-epic--planned  .rm-epic-status-dot { background: #4e6a8c; }
.rm-epic--progress .rm-epic-status-dot { background: #c9873e; }
.rm-epic--done     .rm-epic-status-dot { background: #5d8a5e; }
.rm-epic-name { font-size: .88rem; font-weight: 600; color: #2b1e0e; margin-bottom: 4px; }
.rm-epic-desc { font-size: .78rem; color: #7a5c3e; line-height: 1.4; margin-bottom: 8px; }
.rm-epic-badge { font-size: .72rem; color: #888; font-style: italic; }

/* Status badges */
.rm-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em; }
.rm-badge--new      { background: #f0ebe4; color: #7a5c3e; }
.rm-badge--parked   { background: #ede9f8; color: #5b3f8a; }
.rm-badge--planned  { background: #dce8f5; color: #2c4f7a; }
.rm-badge--progress { background: #fef0dc; color: #8a5a1a; }
.rm-badge--done     { background: #dff2e1; color: #2a6b38; }

/* Sprint label */
.rm-sprint-label { font-size: .72rem; color: #888; background: #f0ebe4; border-radius: 10px; padding: 2px 8px; margin-left: 6px; }

/* Stories */
.rm-stories-wrap { }
.rm-stories-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.rm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-tab { background: none; border: 1px solid #d9c7b0; border-radius: 16px; padding: 4px 12px; font-size: .82rem; cursor: pointer; color: #7a5c3e; font-family: Georgia, serif; transition: all .15s; }
.rm-tab:hover { border-color: #7a5c3e; color: #2b1e0e; }
.rm-tab--active { background: #2b1e0e; color: #fff; border-color: #2b1e0e; }
.rm-tab-count { font-size: .75rem; opacity: .75; margin-left: 3px; }
.rm-stories-list { display: flex; flex-direction: column; gap: 10px; }
.rm-empty { color: #7a5c3e; font-style: italic; }

/* Story card */
.rm-story-card { display: flex; gap: 14px; background: #fffdf8; border: 1px solid #d9c7b0; border-radius: 8px; padding: 14px; transition: box-shadow .15s; }
.rm-story-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.rm-story-left { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.rm-story-body { flex: 1; min-width: 0; }
.rm-story-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.rm-story-title { font-size: .97rem; font-weight: 600; color: #2b1e0e; margin-bottom: 4px; }
.rm-story-desc { font-size: .85rem; color: #5a4030; line-height: 1.45; margin-bottom: 6px; }
.rm-story-meta { font-size: .78rem; color: #999; }
.rm-meta-sep { margin: 0 5px; }

/* Vote button */
.rm-vote-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 1px solid #d9c7b0; border-radius: 6px; padding: 6px 10px; cursor: pointer; color: #7a5c3e; font-family: Georgia, serif; text-decoration: none; transition: all .15s; min-width: 46px; }
.rm-vote-btn:hover { border-color: #5d8a5e; color: #5d8a5e; }
.rm-vote-btn--voted { background: #5d8a5e; border-color: #5d8a5e; color: #fff; }
.rm-vote-btn--locked { opacity: .55; cursor: default; }
.rm-vote-icon { font-size: 1rem; line-height: 1; }
.rm-vote-count { font-size: .82rem; font-weight: 600; }

/* Submit modal */
.rm-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rm-modal { background: #fffdf8; border-radius: 10px; width: 100%; max-width: 440px; box-shadow: 0 8px 32px rgba(0,0,0,.28); }
.rm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e8d9c5; font-weight: 600; color: #2b1e0e; }
.rm-modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #7a5c3e; padding: 2px 6px; }
.rm-modal-body { padding: 18px 20px; }
.rm-modal-footer { padding: 12px 20px; border-top: 1px solid #e8d9c5; display: flex; gap: 10px; }
.rm-label { font-size: .85rem; color: #5a4030; font-weight: 600; display: block; margin-bottom: 4px; }
.rm-input { width: 100%; box-sizing: border-box; border: 1px solid #c8b89a; border-radius: 4px; padding: 8px 10px; font-size: .92rem; font-family: Georgia, serif; background: #fff; color: #2b1e0e; outline: none; }
.rm-input:focus { border-color: #7a5c3e; }
.rm-textarea { resize: vertical; min-height: 72px; }
.rm-btn-primary { background: #5d8a5e; color: #fff; border: none; border-radius: 5px; padding: 9px 22px; font-size: .92rem; font-family: Georgia, serif; cursor: pointer; }
.rm-btn-primary:hover { background: #4a7250; }
.rm-btn-cancel { background: none; border: 1px solid #c8b89a; border-radius: 5px; padding: 9px 18px; font-size: .92rem; font-family: Georgia, serif; cursor: pointer; color: #7a5c3e; }

@media (max-width: 600px) {
    .rm-hero-title { font-size: 1.5rem; }
    .rm-epics-grid { grid-template-columns: repeat(2, 1fr); }
    .rm-stories-header { flex-direction: column; }
}

/* ── Roadmap Admin (rma-) ────────────────────────────────────────────────── */
.rma-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.rma-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.rma-title { font-family: Georgia, serif; font-size: 1.6rem; color: #2b1e0e; margin: 0; }
.rma-back-link { font-size: .85rem; color: #5d8a5e; text-decoration: none; }
.rma-back-link:hover { text-decoration: underline; }

.rma-tabs { display: flex; gap: 4px; border-bottom: 2px solid #d4c5a9; margin-bottom: 24px; }
.rma-tab { padding: 8px 20px; font-size: .9rem; font-family: Georgia, serif; color: #7a5c3e; text-decoration: none; border-radius: 4px 4px 0 0; border: 1px solid transparent; border-bottom: none; }
.rma-tab:hover { background: #f5ede0; }
.rma-tab--active { background: #fff; border-color: #d4c5a9; color: #2b1e0e; font-weight: 600; margin-bottom: -2px; }

.rma-panel { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 20px; }
.rma-hint { font-size: .85rem; color: #7a7060; margin-top: 0; margin-bottom: 14px; }
.rma-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rma-section-title { font-family: Georgia, serif; font-size: 1.1rem; color: #2b1e0e; margin: 0; }

.rma-table-wrap { overflow-x: auto; }
.rma-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rma-table th { background: #f5ede0; color: #5a4030; font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 2px solid #d4c5a9; white-space: nowrap; }
.rma-table td { padding: 7px 10px; border-bottom: 1px solid #ede4d8; vertical-align: middle; }
.rma-table tr:last-child td { border-bottom: none; }
.rma-table tr:hover td { background: #fdf8f2; }

.rma-id { color: #aaa; font-size: .8rem; width: 36px; }
.rma-story-title { max-width: 240px; }
.rma-story-title-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; cursor: default; }
.rma-submitter { color: #666; white-space: nowrap; }
.rma-votes { text-align: center; font-weight: 600; color: #5d8a5e; }
.rma-desc-cell { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666; }
.rma-actions { white-space: nowrap; }
.rma-saved-msg { color: #5d8a5e; font-weight: 600; margin-left: 6px; }

.rma-sel { border: 1px solid #c8b89a; border-radius: 4px; padding: 4px 6px; font-size: .83rem; background: #fff; color: #2b1e0e; outline: none; max-width: 130px; }
.rma-sel:focus { border-color: #7a5c3e; }
.rma-input { border: 1px solid #c8b89a; border-radius: 4px; padding: 4px 6px; font-size: .83rem; background: #fff; color: #2b1e0e; outline: none; }
.rma-input:focus { border-color: #7a5c3e; }

.rma-btn { border: none; border-radius: 4px; padding: 5px 12px; font-size: .82rem; cursor: pointer; font-family: Georgia, serif; }
.rma-btn--save   { background: #5d8a5e; color: #fff; }
.rma-btn--save:hover { background: #4a7250; }
.rma-btn--add    { background: #2e7d8c; color: #fff; }
.rma-btn--add:hover { background: #236070; }
.rma-btn--edit   { background: #7a5c3e; color: #fff; margin-right: 4px; }
.rma-btn--edit:hover { background: #5f4430; }
.rma-btn--del    { background: #c0392b; color: #fff; }
.rma-btn--del:hover { background: #a02b1f; }
.rma-btn--cancel { background: #eee; color: #444; }
.rma-btn--cancel:hover { background: #ddd; }
.rma-btn:disabled { opacity: .6; cursor: default; }

.rma-badge { display: inline-block; border-radius: 3px; padding: 2px 8px; font-size: .78rem; font-weight: 600; }
.rma-badge--new         { background: #f0ebe4; color: #7a5c3e; }
.rma-badge--parked      { background: #ede9f8; color: #5b3f8a; }
.rma-badge--planned     { background: #dbeafe; color: #1e4fa0; }
.rma-badge--in_progress { background: #fef3c7; color: #92400e; }
.rma-badge--done        { background: #d1fae5; color: #065f46; }

/* Feature/Epic modal */
.rma-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.rma-modal-inner { background: #fff; border-radius: 8px; padding: 28px 32px; min-width: 380px; max-width: 520px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,.18); }
.rma-modal-inner h3 { margin-top: 0; font-family: Georgia, serif; color: #2b1e0e; }
.rma-form-row { margin-bottom: 14px; }
.rma-form-row label { display: block; font-size: .85rem; font-weight: 600; color: #5a4030; margin-bottom: 5px; }
.rma-form-row input, .rma-form-row select, .rma-form-row textarea { width: 100%; box-sizing: border-box; border: 1px solid #c8b89a; border-radius: 4px; padding: 7px 10px; font-size: .9rem; font-family: Georgia, serif; color: #2b1e0e; outline: none; background: #fff; }
.rma-form-row input:focus, .rma-form-row select:focus, .rma-form-row textarea:focus { border-color: #7a5c3e; }
.rma-form-row textarea { resize: vertical; min-height: 70px; }
.rma-modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.rma-modal-btns .rma-btn { padding: 8px 20px; font-size: .9rem; }
.rma-story-title-link { color: #2b1e0e; text-decoration: none; font-weight: 500; }
.rma-story-title-link:hover { color: #7a5c3e; text-decoration: underline; }
.rma-att-badge { font-size: .85rem; margin-left: 5px; opacity: .7; cursor: default; }

/* ── Roadmap: file input + title link + rejected badge ───────────────────── */
.rm-file-input { display: block; width: 100%; box-sizing: border-box; font-size: .85rem; color: #5a4030; margin-top: 4px; }
.rm-story-title-link { color: #2b1e0e; text-decoration: none; }
.rm-story-title-link:hover { color: #5d8a5e; text-decoration: underline; }
.rm-badge--rejected { background: #fde8e8; color: #8a2020; }

/* ── Roadmap Story Detail (rms-) ─────────────────────────────────────────── */
.rms-wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }
.rms-back { display: inline-block; font-size: .88rem; color: #7a5c3e; text-decoration: none; margin-bottom: 20px; }
.rms-back:hover { text-decoration: underline; }
.rms-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 28px 32px; }
.rms-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.rms-sprint { font-size: .8rem; background: #f0ebe4; color: #7a5c3e; border-radius: 4px; padding: 2px 8px; font-weight: 600; }
.rms-breadcrumb { font-size: .82rem; color: #888; }
.rms-breadcrumb-sep { margin: 0 4px; }
.rms-admin-link { margin-left: auto; font-size: .82rem; color: #2e7d8c; text-decoration: none; }
.rms-admin-link:hover { text-decoration: underline; }
.rms-title { font-family: Georgia, serif; font-size: 1.5rem; color: #2b1e0e; margin: 0 0 10px; line-height: 1.3; }
.rms-byline { font-size: .85rem; color: #888; margin-bottom: 20px; }
.rms-sep { margin: 0 6px; }
.rms-description { font-size: .95rem; color: #3a2e20; line-height: 1.7; white-space: pre-wrap; margin-bottom: 24px; }
.rms-no-desc { font-size: .9rem; color: #aaa; font-style: italic; margin-bottom: 24px; }
.rms-attachment { margin-bottom: 24px; padding: 14px 16px; background: #f9f4ee; border-radius: 6px; border: 1px solid #e0d4c0; }
.rms-attachment-label { font-size: .78rem; font-weight: 600; color: #7a5c3e; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.rms-attachment-img-wrap { display: block; }
.rms-attachment-img { max-width: 100%; max-height: 400px; border-radius: 4px; border: 1px solid #ddd; }
.rms-attachment-file { display: inline-flex; align-items: center; gap: 8px; color: #5d8a5e; font-size: .9rem; text-decoration: none; }
.rms-attachment-file:hover { text-decoration: underline; }
.rms-attachment-icon { font-size: 1.2rem; }
.rms-vote-row { padding-top: 20px; border-top: 1px solid #eee; }
.rms-vote-btn { font-size: .95rem; padding: 8px 20px; }
@media (max-width: 600px) {
  .rms-card { padding: 18px 16px; }
  .rms-title { font-size: 1.2rem; }
}

/* ── Awards ──────────────────────────────────────────────────────────────── */
.awards-section { padding: 4px 0; }
.awards-hd {
  font-size: 1.05rem; font-weight: 600; color: #2b1e0e;
  margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.awards-count {
  font-size: .8rem; font-weight: 400; color: #888;
  background: #f0e9de; border-radius: 20px; padding: 2px 10px;
}
.awards-group { margin-bottom: 20px; }
.awards-group:last-child { margin-bottom: 0; }
.awards-group-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #a08060; margin-bottom: 8px;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.award-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 8px; border-radius: 10px;
  text-align: center; position: relative; cursor: default;
  transition: transform .15s;
}
.award-tile:hover { transform: translateY(-2px); }
.award-tile--earned {
  background: #fff8ee; border: 1.5px solid #c9a87c;
}
.award-tile--next {
  background: #f5f5f5; border: 1.5px solid #e0e0e0;
  opacity: .45; filter: grayscale(1);
}
.award-emoji { font-size: 1.6rem; line-height: 1; }
.award-name  { font-size: .68rem; color: #5a3e2b; font-weight: 600; line-height: 1.2; }
.award-check {
  position: absolute; top: 5px; right: 7px;
  font-size: .65rem; color: #c9a87c; font-weight: 700;
}
@media (max-width: 480px) {
  .awards-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .award-emoji { font-size: 1.3rem; }
}

/* ── CommWall (email preferences) ───────────────────────────────────────── */
.comms-prefs-list { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.comms-pref-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid #ede7de;
}
.comms-pref-row:last-child { border-bottom: none; }
.comms-pref-label { font-size: .9rem; color: #3d2b1f; }

/* Toggle switch */
.comms-toggle {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; flex-shrink: 0; user-select: none;
}
.comms-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.comms-toggle-track {
  position: relative; width: 40px; height: 22px;
  background: #d0c5b8; border-radius: 11px;
  transition: background .2s;
  flex-shrink: 0;
}
.comms-toggle input:checked ~ .comms-toggle-track { background: #7a5c3e; }
.comms-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.comms-toggle input:checked ~ .comms-toggle-track .comms-toggle-thumb { left: 21px; }
/* Yes/No labels — show only the active one */
.comms-toggle-label-yes { font-size: .78rem; font-weight: 600; color: #7a5c3e; display: none; min-width: 24px; }
.comms-toggle-label-no  { font-size: .78rem; font-weight: 600; color: #a33;   display: inline; min-width: 24px; }
.comms-toggle input:checked ~ .comms-toggle-label-yes { display: inline; }
.comms-toggle input:checked ~ .comms-toggle-label-no  { display: none; }

/* Comment language EN|FR toggle */
.comment-lang-toggle { display:flex; border:1px solid #c9a87c; border-radius:4px; overflow:hidden; font-size:.75rem; }
.comment-lang-toggle .clt-opt { padding:2px 8px; cursor:pointer; color:#a07850; background:#fffdf8; user-select:none; }
.comment-lang-toggle .clt-opt:first-child { border-right:1px solid #c9a87c; }
.comment-lang-toggle .clt-opt.clt-active { background:#7a5c3e; color:#fff; font-weight:600; }
.comment-lang-toggle input[type=radio] { position:absolute; opacity:0; width:0; height:0; }

/* ── Share card modal ────────────────────────────────────────────────────── */
#share-modal-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000; padding: 16px;
    box-sizing: border-box;
}
#share-modal {
    background: #fffdf8; border-radius: 12px; padding: 28px 24px 24px;
    max-width: 640px; width: 100%; position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
#share-modal-close {
    position: absolute; top: 12px; right: 14px; background: none;
    border: none; font-size: 1.6rem; cursor: pointer; color: #8a6a3a; line-height: 1;
}
#share-modal-title { margin: 0 0 16px; font-size: 1.25rem; color: #2c1a0e; }
.share-modal-card-wrap {
    background: #f0e6d6; border-radius: 8px; overflow: hidden;
    margin-bottom: 18px; min-height: 120px;
    display: flex; align-items: center; justify-content: center;
}
#share-card-img { width: 100%; height: auto; display: block; }

/* Share card loader — spinner fallback */
.share-card-loader {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 0; gap: 14px;
}
.scl-book {
    width: 40px; height: 40px;
    border: 4px solid #e8d9c4;
    border-top-color: #7a5c3e;
    border-radius: 50%;
    animation: scl-spin 0.8s linear infinite;
}
.scl-spine, .scl-page { display: none; }
@keyframes scl-spin {
    to { transform: rotate(360deg); }
}
.share-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-modal-actions a,
.share-modal-actions button { flex: 1 1 140px; text-align: center; }
@media (max-width: 480px) {
    #share-modal { padding: 22px 16px 20px; }
    .share-modal-actions a,
    .share-modal-actions button { flex: 1 1 100%; }
}

/* ── Native share "Save image" fallback link ─────────────────────────────── */
.share-save-link {
    font-size: .8rem;
    color: #c8b99a;
    text-decoration: underline;
    text-align: center;
    width: 100%;
    padding: 2px 0;
}
.share-save-link:hover { color: #f5e6c8; }

/* ── Attribution opt-in checkbox in share modal ───────────────────────────── */
.share-attr-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: #c8b99a;
    cursor: pointer;
    width: 100%;
    margin-top: 2px;
}
.share-attr-opt input[type="checkbox"] {
    accent-color: #c8a96e;
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Attribution strip on book page ──────────────────────────────────────── */
.attr-strip {
    background: #4a2e14;
    border-bottom: 1px solid #3d2710;
    padding: 10px 16px;
}
.attr-strip-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.attr-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6b4c2a;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.attr-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.attr-msg {
    color: #fff;
    font-size: .88rem;
    flex: 1;
}
.attr-join-btn {
    background: #c8a96e;
    color: #1e1408;
    font-size: .82rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.attr-join-btn:hover { background: #d9bc82; }


/* ── UX-2: First book success overlay ──────────────────────────────────── */
.fb-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.7);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.fb-confetti-wrap {
    position: absolute; inset: 0; pointer-events: none;
}
/* 30 confetti pieces — colours cycle across 6 values */
.fb-c {
    position: absolute; top: -12px; width: 10px; height: 14px;
    border-radius: 2px; opacity: 0;
    animation: fbFall 3s ease-in forwards;
}
.fb-c:nth-child(6n+1)  { background: #e2a84b; }
.fb-c:nth-child(6n+2)  { background: #4caf50; }
.fb-c:nth-child(6n+3)  { background: #2196f3; }
.fb-c:nth-child(6n+4)  { background: #e91e63; }
.fb-c:nth-child(6n+5)  { background: #ff9800; }
.fb-c:nth-child(6n+0)  { background: #9c27b0; }
/* Spread & stagger each piece with nth-child (0-29) */
.fb-c0  { left:  3%; animation-delay: .0s;  animation-duration: 2.8s; width: 8px; }
.fb-c1  { left:  7%; animation-delay: .15s; animation-duration: 3.1s; width:12px; transform: rotate(20deg); }
.fb-c2  { left: 12%; animation-delay: .05s; animation-duration: 2.6s; }
.fb-c3  { left: 17%; animation-delay: .3s;  animation-duration: 3.3s; width: 8px; transform: rotate(-30deg); }
.fb-c4  { left: 22%; animation-delay: .1s;  animation-duration: 2.9s; }
.fb-c5  { left: 27%; animation-delay: .4s;  animation-duration: 3.0s; transform: rotate(45deg); }
.fb-c6  { left: 32%; animation-delay: .2s;  animation-duration: 2.7s; width:12px; }
.fb-c7  { left: 37%; animation-delay: .35s; animation-duration: 3.2s; }
.fb-c8  { left: 42%; animation-delay: .08s; animation-duration: 2.5s; transform: rotate(-15deg); }
.fb-c9  { left: 47%; animation-delay: .5s;  animation-duration: 3.4s; width: 8px; }
.fb-c10 { left: 52%; animation-delay: .12s; animation-duration: 2.8s; }
.fb-c11 { left: 57%; animation-delay: .45s; animation-duration: 3.1s; transform: rotate(30deg); }
.fb-c12 { left: 62%; animation-delay: .18s; animation-duration: 2.6s; width:12px; }
.fb-c13 { left: 67%; animation-delay: .28s; animation-duration: 3.0s; }
.fb-c14 { left: 72%; animation-delay: .55s; animation-duration: 2.9s; transform: rotate(-45deg); }
.fb-c15 { left: 77%; animation-delay: .08s; animation-duration: 3.3s; width: 8px; }
.fb-c16 { left: 82%; animation-delay: .38s; animation-duration: 2.7s; }
.fb-c17 { left: 87%; animation-delay: .22s; animation-duration: 3.2s; transform: rotate(20deg); }
.fb-c18 { left: 92%; animation-delay: .48s; animation-duration: 2.8s; width:12px; }
.fb-c19 { left: 97%; animation-delay: .02s; animation-duration: 3.0s; }
.fb-c20 { left:  5%; animation-delay: .6s;  animation-duration: 3.5s; transform: rotate(-20deg); }
.fb-c21 { left: 15%; animation-delay: .65s; animation-duration: 2.9s; width: 8px; }
.fb-c22 { left: 25%; animation-delay: .7s;  animation-duration: 3.2s; }
.fb-c23 { left: 35%; animation-delay: .58s; animation-duration: 2.6s; transform: rotate(40deg); }
.fb-c24 { left: 45%; animation-delay: .72s; animation-duration: 3.4s; width:12px; }
.fb-c25 { left: 55%; animation-delay: .62s; animation-duration: 2.7s; }
.fb-c26 { left: 65%; animation-delay: .68s; animation-duration: 3.1s; transform: rotate(-35deg); }
.fb-c27 { left: 75%; animation-delay: .75s; animation-duration: 2.8s; width: 8px; }
.fb-c28 { left: 85%; animation-delay: .52s; animation-duration: 3.3s; }
.fb-c29 { left: 95%; animation-delay: .78s; animation-duration: 2.5s; transform: rotate(15deg); }
@keyframes fbFall {
    0%   { top: -14px; opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 105vh; opacity: 0; }
}
.fb-card {
    position: relative; z-index: 1;
    background: #fff; border-radius: 12px;
    padding: 2rem 1.8rem; max-width: 380px; width: 90%;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    animation: fbCardIn .4s ease;
}
#fb-beat2 { display: none; flex-direction: column; align-items: center; gap: .9rem; }
@keyframes fbCardIn {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.fb-cover {
    width: 90px; height: 130px; object-fit: cover;
    border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.fb-cover-ph {
    width: 90px; height: 130px; font-size: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #f5efe6; border-radius: 5px;
}
.fb-beat2-icon { font-size: 42px; }
.fb-heading {
    font-size: 1.2rem; font-weight: 700; color: #3d2b1f; margin: 0;
}
.fb-book-name {
    font-size: .95rem; color: #666; font-style: italic; margin: 0;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-nudge-body { font-size: .9rem; color: #555; margin: 0; line-height: 1.5; }
.fb-beat2-actions {
    display: flex; flex-direction: column; gap: .6rem; width: 100%;
}
.fb-beat2-actions .button { width: 100%; text-align: center; }
.fb-beat2-actions .btn-secondary {
    background: none; border: 1px solid #ccc; color: #777;
    padding: .55rem 1rem; border-radius: 4px; cursor: pointer; font-size: .9rem;
}
.fb-beat2-actions .btn-secondary:hover { border-color: #999; color: #444; }
.fb-next-btn { width: 100%; }
.fb-beat3-icon { font-size: 42px; }
.fb-share-actions {
    display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 4px 0;
}
.fb-share-btn {
    width: 100%; padding: 11px 16px; border-radius: 6px;
    border: 1px solid #c9813a; background: transparent;
    color: #c9813a; font-size: .9rem; cursor: pointer;
    transition: background .15s;
}
.fb-share-btn:hover { background: rgba(201,129,58,.1); }
.fb-share-copy { border-color: #aaa; color: #666; }
.fb-share-copy:hover { background: rgba(0,0,0,.05); }
.fb-share-native { border-color: #c9813a; color: #c9813a; font-weight: 600; }
.fb-privacy-toggle {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0; font-size: .9rem; color: #444;
}
.fb-toggle-switch {
    position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;
}
.fb-toggle-switch input { opacity: 0; width: 0; height: 0; }
.fb-toggle-slider {
    position: absolute; inset: 0; background: #ccc; border-radius: 24px;
    cursor: pointer; transition: background .2s;
}
.fb-toggle-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
.fb-toggle-switch input:checked + .fb-toggle-slider { background: #c9813a; }
.fb-toggle-switch input:checked + .fb-toggle-slider::before { transform: translateX(20px); }
@media (min-width: 480px) {
    .fb-share-actions { flex-direction: row; }
    .fb-share-btn { width: auto; flex: 1; }
}

/* ── UX-4: Empty my-books state ──────────────────────────────────────────── */
.mb-empty-state {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 3rem 1.5rem 2rem;
    max-width: 560px; margin: 0 auto;
}
.mb-empty-book-svg {
    width: 72px; height: 72px; margin-bottom: 1.2rem;
    filter: drop-shadow(0 3px 8px rgba(168,120,64,.35));
}
.mb-empty-heading {
    font-size: 1.4rem; font-weight: 700; color: #3d2b1f;
    margin: 0 0 .75rem;
}
.mb-empty-body {
    font-size: .95rem; color: #7a6a5a; line-height: 1.6;
    margin: 0 0 1.8rem;
}
.mb-empty-add {
    font-size: 1rem; padding: .7rem 1.8rem; margin-bottom: 2rem;
    text-decoration: none;
}
/* Preview ghost table */
.mb-empty-preview {
    width: 100%; border: 1px solid #ede8e0; border-radius: 6px;
    overflow: hidden; position: relative; background: #fdfaf6;
    opacity: .72;
}
.mb-ep-header {
    display: flex; gap: 6px; padding: 8px 10px;
    background: #f5efe6; border-bottom: 1px solid #ede8e0;
}
.mb-ep-row {
    display: flex; gap: 6px; padding: 8px 10px; align-items: center;
}
.mb-ep-row--alt { background: #faf6f0; }
.mb-ep-col { height: 10px; background: #d9cfc4; border-radius: 3px; flex: 1; }
.mb-ep-col--wide { flex: 3; }
.mb-ep-col--sm { flex: 0 0 44px; }
.mb-ep-cell { display: flex; align-items: center; gap: 7px; flex: 1; }
.mb-ep-cell--wide { flex: 3; }
.mb-ep-cell--sm { flex: 0 0 44px; justify-content: center; }
.mb-ep-thumb {
    width: 24px; height: 34px; background: #c9a87c; border-radius: 2px; flex-shrink: 0;
}
.mb-ep-thumb--real {
    object-fit: cover; opacity: .45; background: none;
}
.mb-ep-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mb-ep-line {
    height: 9px; background: #d9cfc4; border-radius: 3px;
}
.mb-ep-line--sm { height: 7px; background: #e6ddd4; }
.mb-ep-badge {
    width: 32px; height: 18px; background: #c9a87c; border-radius: 9px; opacity: .6;
}
.mb-ep-stars {
    width: 40px; height: 9px; background: linear-gradient(90deg,#e8c97a 60%,#e6ddd4 60%);
    border-radius: 3px;
}
.mb-ep-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(transparent, #fdfaf6);
}

/* ── Add book: mobile scan hero ──────────────────────────────────────────── */
.ab-scan-hero {
    background: #2b1e0e; border: 1px solid #7a5c3e; border-radius: 8px;
    padding: 1.4rem 1.2rem 1rem; margin-bottom: 1.4rem; text-align: center;
}
.ab-scan-hero-btn {
    display: block; width: 100%;
    background: #e8c97a; color: #3d2b1f; font-weight: 700;
    font-size: 1.1rem; padding: .8rem 1rem; border: none;
    border-radius: 6px; cursor: pointer; font-family: Georgia, serif;
    letter-spacing: .3px;
}
.ab-scan-hero-btn:active { background: #d9bc6a; }
.ab-scan-hero-hint {
    font-size: .82rem; color: #c5a97a; margin: .7rem 0 .5rem;
    line-height: 1.5;
}
.ab-scan-divider {
    display: flex; align-items: center; gap: .6rem;
    margin-top: .6rem; color: #7a6a5a; font-size: .8rem;
}
.ab-scan-divider::before, .ab-scan-divider::after {
    content: ''; flex: 1; height: 1px; background: #4a3520;
}

/* ── UX-5: Catalog one-tap add ───────────────────────────────────────────── */
.book-tile-wrap {
    position: relative; display: inline-block;
}
.bt-cat-add {
    position: absolute; bottom: 28px; right: 4px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #e8c97a; color: #3d2b1f; border: none;
    font-size: 16px; line-height: 26px; text-align: center;
    cursor: pointer; font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .15s;
    text-decoration: none; display: flex; align-items: center; justify-content: center;
}
.book-tile-wrap:hover .bt-cat-add,
.book-tile-wrap:focus-within .bt-cat-add { opacity: 1; }
@media (hover: none) { .bt-cat-add { opacity: 1; } }
.bt-cat-add:hover { background: #d9bc6a; }
.bt-cat-added {
    position: absolute; bottom: 28px; right: 4px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #4caf50; color: #fff;
    font-size: 14px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.cat-add-card {
    background: #fff; border-radius: 10px;
    padding: 1.6rem 1.6rem 1.4rem; max-width: 300px; width: 88%;
    text-align: center; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
@keyframes camSpin { to { transform: rotate(360deg); } }
#cam-yes.cam-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}
#cam-yes.cam-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: camSpin .6s linear infinite;
}
.catalog-guest-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
    background: #3d2b1f; color: #e8d9c4;
    padding: .75rem 1.25rem; border-radius: 8px; margin-bottom: 1.25rem;
    font-size: .9rem;
}
.catalog-guest-banner .button { flex-shrink: 0; }


/* ============================================================
   MOBILE PHONE — Feature 26
   ============================================================ */

/* ── Nav 3-zone layout ───────────────────────────────────────
   Left: hamburger | Center: logo (absolute, mobile) | Right: actions
   ──────────────────────────────────────────────────────────── */
.nav-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-zone--right { gap: 8px; }

/* Add Book button (phone) */
.nav-icon-btn--add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #c9a87c;
  color: #fff !important;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}

/* Avatar dropdown wrapper */
.nav-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  border-left: 1px solid rgba(201,168,124,0.3);
  padding-left: 8px;
}
/* Avatar toggle button — strip button chrome, keep it flex */
.nav-avatar-toggle {
  display: flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  padding: 0 !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
/* Avatar dropdown menu — right-aligned, scrollable if viewport too short */
.nav-avatar-dropdown .nav-dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 6px) !important;
  min-width: 170px;
  width: auto !important;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1001;
}
.nav-avatar-menu a { padding: 9px 16px !important; white-space: normal; }
.nav-avatar-img {
  width: 30px; height: 30px;
  border-radius: 50%; object-fit: cover; display: block;
}
.nav-avatar-initial {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700; font-size: .85rem;
}
.nav-lore-pill {
  background: #c9a87c;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Mobile stat strip — hidden on desktop, shown at ≤480px */
.stat-strip-mobile { display: none; }
.ssm-tile { flex: 1; background: #f9f5f0; border: 1px solid #e8ddd0; border-radius: 6px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ssm-num  { font-size: 1.6rem; font-weight: 700; color: #2c2c2c; line-height: 1.1; }
.ssm-label { font-size: .57rem; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; line-height: 1.2; }
.ssm-audio { font-size: .65rem; color: #c9a87c; margin-top: 2px; display: flex; align-items: center; justify-content: center; }

/* Filter row: Language / Rating / Read always on one row */
.books-filter-row { display: flex; gap: 8px; }
.books-filter-row .field-group { flex: 1; min-width: 0; }
.books-filter-row .field-group input,
.books-filter-row .field-group select { width: 100% !important; box-sizing: border-box; }

/* Desktop (≥769px): hide mobile-only elements, hide center logo zone */
@media (min-width: 769px) {
  .nav-zone--center    { display: none; }
  .nav-icon-btn--add   { display: none; }
  .nav-avatar-wrap     { display: none; }
  .mobile-filter-chips { display: none; }
  .ab-mobile-only      { display: none !important; }
  .ab-scan-hero        { display: none !important; }
}

/* Add Book button: slightly smaller so it doesn't dominate */
.nav-icon-btn--add { width: 28px; height: 28px; font-size: 1.35rem; }

/* Mobile (≤768px): 3-zone layout */
@media (max-width: 768px) {
  .navbar-brand {
    width: 100%;
    justify-content: space-between;
    padding: 0 12px;
  }
  /* Center zone: flex: 1 so it fills space between left/right — logo can never overlap */
  .nav-zone--center {
    flex: 1;
    justify-content: center;
  }
  /* Desktop logo hidden on mobile (center zone takes over) */
  .navbar-logo--desktop { display: none; }
  /* Flags hidden on mobile — rare action */
  .lang-switcher { display: none; }
  /* InMail ochre */
  .nav-inmail-btn--mobile { color: #c9a87c !important; }
  /* Logo: uppercase on mobile */
  .navbar-logo { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
}

/* ── SPRINT 1: Phone nav fine-tuning ─────────────────────── */
@media (max-width: 480px) {
  .navbar { padding: 0; min-height: 48px; }
  .navbar-brand { padding: 4px 10px; }
  .puf-label input[type="date"]   { width: 100%; }
  .puf-label input[type="number"] { width: 100%; }
}

/* ── SPRINT 2: Home + Filters ─────────────────────────────── */
@media (max-width: 480px) {
  /* Body cap: prevents any child from expanding body wider than viewport,
     which would shift margin:auto elements rightward and clip the right side */
  body { max-width: 100vw; }

  /* Layout */
  .container     { padding: 10px; margin: 8px 0; width: 100%; }
  .activity-body { padding: 8px; }

  /* Stat counters — hidden in favour of mobile strip */
  .stat-counters { display: none; }
  .stat-strip-mobile { display: flex; gap: 6px; padding: 4px 0; }

  /* Active readings: progress bar thicker, touch target larger */
  .pace-bar { height: 8px !important; border-radius: 4px; }
  .page-update-toggle { min-height: 44px; padding: 10px 16px; }
  /* Progress form: contain overflow at item level so iOS date input can't bleed right */
  .active-reading-item { overflow: hidden; }
  .page-update-panel { overflow: hidden; max-width: 100%; box-sizing: border-box; }
  .page-update-form, .page-update-fields, .puf-label { max-width: 100%; }
  .page-update-submit { width: 100%; }
  .puf-label input[type="date"],
  .puf-label input[type="number"] { font-size: 16px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  .ar-eta { color: #c9a87c; font-size: .85em; }

  /* Active reading row: prevent meta text from overflowing viewport */
  .active-reading-link { align-items: stretch; overflow: hidden; }
  .active-reading-meta { white-space: normal; overflow: hidden; min-width: 0; }
  .active-reading-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reading-since { display: none; }

  /* All Books filters */
  .mobile-filter-chips { display: flex; overflow-x: auto; gap: 6px; padding: 8px 0; white-space: nowrap; }
  .mfc-chip {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 20px;
    background: #f2e6d9; border: 1px solid #c9a87c;
    font-size: .8rem; color: #4a2e14;
    text-decoration: none; flex-shrink: 0;
    white-space: nowrap; cursor: pointer; font-family: inherit;
  }
  .mfc-chip--active { background: #4a2e14; color: #fff; border-color: #4a2e14; }
  .mfc-chip--reset  { background: #fff3f3; border-color: #e05252; color: #e05252; }
  .books-filter { display: none !important; }
  .books-filter.is-open { display: flex !important; }
  .my-books-header { flex-direction: column; gap: 8px; }
  .my-books-actions { flex-wrap: wrap; gap: 6px; }

  /* InMail: tabs + search */
  .inmail-tabs { overflow: hidden; }
  .inmail-tab-btn { flex: 1; padding: 8px 10px; font-size: .82rem; }
  .inmail-search-wrap { max-width: 100%; box-sizing: border-box; }
  .inmail-search-input { max-width: 100%; }

  /* InMail inbox — contain all overflow */
  .activity-section { overflow: hidden; }           /* overrides base overflow:visible */
  .inmail-inbox-body { padding: 8px; }
  .inmail-row { overflow: hidden; gap: .4rem; padding: .5rem .6rem; max-width: 100%; }
  .inmail-row-body { min-width: 0; overflow: hidden; }
  .inmail-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inmail-row-preview { max-width: 100%; }
  .inmail-row-actions { gap: .2rem; flex-shrink: 0; max-width: 80px; }
  .inmail-row-time { font-size: .65rem; }
  .inmail-avatar { width: 34px; height: 34px; }
}

/* ── SPRINT 3: Cover Grids + Circle ──────────────────────── */
@media (max-width: 480px) {
  .books-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  /* My Books on home: 1 row only (3 covers) */
  #hb-my-grid .book-tile:nth-child(n+4) { display: none !important; }
  .circle-bg-mosaic { display: none !important; }
  .circle-ring      { display: none !important; }
  .circle-stage {
    position: static !important; width: 100% !important; height: auto !important;
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px; padding: 8px 0;
  }
  .circle-center-stats { position: static !important; transform: none !important; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .circle-member { position: static !important; transform: none !important; width: 100% !important; height: auto !important; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .cm-book-1, .cm-book-2, .cm-book-3 { display: none !important; }
  .cm-activity-ring { width: 60px !important; height: 60px !important; }
  .pace-tabs { overflow-x: auto; white-space: nowrap; }
  .cp-tab    { padding: 8px 12px; font-size: .8rem; }
  .ac-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ac-table { min-width: 500px; }
}

/* ── /decouvrir — Discovery Page ─────────────────────────────────────────── */
.dcvr-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }

/* Hero */
.dcvr-hero { text-align: center; padding: 40px 16px 32px; }
.dcvr-hero-brand { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c8a97a; margin: 0 0 8px; }
.dcvr-hero-title { font-size: 2.2rem; font-weight: 800; color: #3d2b1f; margin: 0 0 12px; font-style: italic; }
.dcvr-hero-sub { color: #666; font-size: 1rem; margin: 0 0 20px; }
.dcvr-hero-cta { display: inline-block; }

/* Genre sections */
.dcvr-genre-section { margin-bottom: 40px; }
.dcvr-genre-heading { font-size: 1.2rem; font-weight: 700; color: #3d2b1f; border-bottom: 1px solid rgba(200,169,122,.5); padding-bottom: 6px; margin: 0 0 16px; }

/* Book grid */
.dcvr-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.dcvr-book-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s; }
.dcvr-book-card:hover { transform: translateY(-2px); }

/* Cover */
.dcvr-cover-wrap { position: relative; width: 100%; padding-bottom: 150%; background: #f4ede0; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.dcvr-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.dcvr-cover-wrap.dcvr-cover-fallback::after { content: '📖'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* Featured badge */
.dcvr-featured-badge { position: absolute; top: 6px; left: 6px; background: #c8a97a; color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }

/* Rating overlay on cover — same star style as book tiles */
.dcvr-rating-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); padding: 12px 4px 4px; display: flex; justify-content: center; gap: 1px; }
.dcvr-rating-overlay .ts-star { font-size: .85rem; line-height: 1; }

/* Book info */
.dcvr-book-info { flex: 1; }
.dcvr-book-title { font-size: .85rem; font-weight: 600; color: #3d2b1f; margin: 0 0 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcvr-book-author { font-size: .75rem; color: #777; margin: 0 0 2px; }
.dcvr-book-rating { font-size: .75rem; color: #c8a97a; margin: 0; }

/* Ochre separator */
.dcvr-separator { border: none; border-top: 1px solid rgba(200,169,122,.5); margin: 40px 0 0; }

/* Quotes strip */
.dcvr-quotes-section { margin: 24px 0 32px; }
.dcvr-quotes-heading { font-size: 1.2rem; font-weight: 700; color: #3d2b1f; border-bottom: 1px solid rgba(200,169,122,.5); padding-bottom: 6px; margin: 0 0 16px; }
.dcvr-quotes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dcvr-quote-card { margin: 0; background: #fdf8f2; padding: 14px 16px; border-radius: 4px; }
.dcvr-quote-text { font-style: italic; color: #444; font-size: .9rem; margin: 0 0 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dcvr-quote-source { font-size: .78rem; color: #888; }
.dcvr-quote-source a { color: #3d2b1f; text-decoration: none; font-weight: 600; }
.dcvr-quote-source a:hover { text-decoration: underline; }
.dcvr-quote-user { color: #c8a97a; font-style: normal; }

/* Bottom CTA */
.dcvr-bottom-cta { text-align: center; padding: 32px 16px; background: #fdf8f2; border-radius: 8px; margin-top: 40px; }
.dcvr-bottom-cta p { color: #555; margin: 0 0 14px; font-size: 1rem; }

@media (max-width: 480px) {
  .dcvr-hero-title { font-size: 1.6rem; }
  .dcvr-book-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .dcvr-quotes-grid { grid-template-columns: 1fr; }
}

/* ── Discover — tabs ─────────────────────────────────────────────────────── */
.dcvr-tab-bar { display: flex; gap: 0; border-bottom: 2px solid #ede3d6; margin: 0 0 24px; }
.dcvr-tab-btn {
  position: relative; background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 10px 20px; font-size: .92rem; font-weight: 600;
  color: #999; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap;
}
.dcvr-tab-btn:hover { color: #5a3e28; }
.dcvr-tab-active { color: #5a3e28; border-bottom-color: #c9a87c; }

/* ── Discover — ranking tier list ────────────────────────────────────────── */
.dcvr-rank-filters { display: none; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.dcvr-rank-filter-label { font-size: .82rem; font-weight: 600; color: #666; }
.dcvr-rank-filter-select {
  border: 1px solid #ddd; border-radius: 5px; padding: 5px 10px;
  font-size: .85rem; color: #3d2b1f; background: #fff; cursor: pointer;
}
.dcvr-rank-apply-btn {
  background: #c9a87c; border: none; border-radius: 5px; padding: 5px 14px;
  font-size: .85rem; font-weight: 600; color: #fff; cursor: pointer;
  transition: background .15s;
}
.dcvr-rank-apply-btn:hover { background: #b08060; }
.dcvr-rank-reset-link {
  font-size: .82rem; color: #999; text-decoration: none; padding: 0 2px;
}
.dcvr-rank-reset-link:hover { color: #555; text-decoration: underline; }
.dcvr-rank-tier { display: flex; align-items: stretch; margin-bottom: 5px; border-radius: 4px; overflow: hidden; }
.dcvr-rank-label {
  flex-shrink: 0; width: 60px; display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 800; color: #fff; text-align: center; padding: 8px 4px; line-height: 1.2;
}
.dcvr-rank-label--5    { background: #2d6a2d; }
.dcvr-rank-label--475  { background: #3a7a3a; }
.dcvr-rank-label--45   { background: #4a8f4a; }
.dcvr-rank-label--425  { background: #6aaa3a; }
.dcvr-rank-label--4    { background: #8aba2a; }
.dcvr-rank-label--375  { background: #b8c020; }
.dcvr-rank-label--35   { background: #d4a020; }
.dcvr-rank-label--325  { background: #d47820; }
.dcvr-rank-label--3    { background: #d45020; }
.dcvr-rank-label--275  { background: #c0302a; }
.dcvr-rank-scroll {
  flex: 1; display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 10px; background: #faf5ee; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dcvr-rank-book {
  flex-shrink: 0; width: 72px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.dcvr-rank-book:hover { opacity: .82; }
.dcvr-rank-book img { width: 72px; height: 108px; object-fit: cover; border-radius: 3px; display: block; }
.dcvr-rank-book-title {
  font-size: .67rem; color: #555; margin: 3px 0 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dcvr-rank-no-results { display: none; color: #999; font-size: .9rem; padding: 24px 0; text-align: center; }
@media (min-width: 768px) {
  .dcvr-rank-filters { display: flex; }
  .dcvr-rank-scroll { flex-wrap: wrap; overflow-x: visible; gap: 8px; padding: 10px 12px; }
  .dcvr-rank-book { width: 88px; }
  .dcvr-rank-book img { width: 88px; height: 132px; }
}

/* ── SPRINT 4: Admin Tables ───────────────────────────────── */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table      { min-width: 640px; }
@media (max-width: 480px) {
  .admin-wrap { padding: 8px; }
  .admin-tab-bar { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 4px; }
  .admin-tab-btn { flex-shrink: 0; font-size: .75rem; padding: 6px 10px; white-space: nowrap; }
  .admin-filters { flex-direction: column; gap: 6px; }
  .admin-table th, .admin-table td { padding: 6px 8px; font-size: .78rem; }
}

/* ── Passkey / WebAuthn ────────────────────────────────────────────────── */
.passkey-enroll-modal    { max-width: 380px; }
.passkey-enroll-icon     { text-align: center; margin-bottom: 12px; }
.passkey-enroll-consent  { font-size: .82rem; color: #666; line-height: 1.5; margin-bottom: 18px; text-align: center; }
.passkey-enroll-actions  { flex-direction: column; gap: 10px; align-items: stretch; }
.passkey-enroll-msg      { font-size: .82rem; text-align: center; margin-top: 8px; color: #555; }
.passkey-section         { padding: 20px; background: #fafaf8; border-radius: 8px; border: 1px solid #e8e0d8; }
.passkey-list            { list-style: none; margin: 0; padding: 0; }
.passkey-item            { display: flex; align-items: center; gap: 12px; padding: 10px 0;
                           border-bottom: 1px solid #ece6de; flex-wrap: wrap; }
.passkey-item:last-child { border-bottom: none; }
.passkey-device          { font-weight: 600; font-size: .9rem; flex: 1 1 auto; }
.passkey-date            { font-size: .8rem; color: #888; }
.passkey-none-msg        { color: #888; font-size: .88rem; }
.btn-text-danger         { background: none; border: none; color: #c0392b; font-size: .82rem;
                           cursor: pointer; padding: 2px 6px; text-decoration: underline; }
.btn-text-danger:hover   { color: #922b21; }

/* ── Circles landing page rework ─────────────────────────────────────────── */
.circles-page { max-width:860px; margin:0 auto; padding:0 0 40px; }

/* Hero explainer */
.circles-hero { background:#fffdf8; border-radius:12px; padding:28px 32px 24px;
  margin:28px 0; border:1px solid #d9c7b0; }
.circles-hero-inner { max-width:700px; margin:0 auto; text-align:center; }
.circles-hero-title { font-size:1.45rem; font-weight:700; color:#4a2e14; margin:0 0 6px; }
.circles-hero-sub   { font-size:.95rem; color:#7a5c3e; margin:0 0 22px; }

/* Three pillars */
.circles-pillars { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.circles-pillar  { flex:1 1 160px; max-width:200px; text-align:center; }
.circles-pillar-icon  { display:flex; justify-content:center; margin-bottom:8px; }
.circles-pillar-title { font-size:.88rem; font-weight:700; color:#4a2e14; margin-bottom:4px; }
.circles-pillar-body  { font-size:.8rem; color:#7a5c3e; line-height:1.4; }

/* Learn more toggle */
.circles-learn-more-wrap { margin-top:6px; }
.circles-learn-toggle { background:none; border:none; color:#7a5c3e; font-size:.82rem;
  cursor:pointer; padding:0; text-decoration:underline; font-family:inherit; }
.circles-learn-toggle:hover { color:#4a2e14; }
.circles-learn-text { font-size:.84rem; color:#5c3d1e; line-height:1.55; margin:8px 0 0;
  background:#fff8f0; border-left:3px solid #c9a87c; padding:10px 14px; border-radius:0 6px 6px 0;
  text-align:left; }

/* Section heading */
.circles-section-hd { font-size:1rem; font-weight:700; color:#4a2e14; margin:0 0 14px;
  padding-bottom:6px; border-bottom:2px solid #e8d9c4; }

/* Circle cards grid */
.circles-grid-cards { display:flex; flex-direction:column; gap:10px; }
.circle-card { display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:10px; border:1px solid #d9c7b0; background:#fffdf8;
  transition:box-shadow .15s, border-color .15s; position:relative; }
.circle-card:hover { box-shadow:0 3px 12px rgba(74,46,20,.12); border-color:#c9a87c; }
/* Invisible overlay link covering the whole card */
.circle-card-link { position:absolute; inset:0; border-radius:10px; z-index:0; }
.circle-card-icon { width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
  color:#fff; letter-spacing:.05em; position:relative; z-index:1; }
.circle-card-info { flex-shrink:0; min-width:0; position:relative; z-index:1; }
.circle-card-name { font-size:.95rem; font-weight:600; color:#4a2e14;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circle-card-meta { font-size:.78rem; color:#a07850; margin-top:2px; }
.circle-card-members { list-style:none; margin:0; padding:0; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; }
.circle-card-member-row { display:flex; align-items:center; gap:5px; }
.circle-card-member-link { font-size:.8rem; color:#7a5c3e; text-decoration:none;
  font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circle-card-member-link:hover { text-decoration:underline; color:#4a2e14; }
.circle-card-date { flex-shrink:0; font-size:.72rem; color:#b09070; white-space:nowrap;
  align-self:flex-start; position:relative; z-index:1; }
.circle-card-invite-btn { flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:#fdf6ec; border:1.5px solid #c9a87c; color:#7a5c3e; font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit; transition:background .12s, color .12s; line-height:1;
  position:relative; z-index:1; }
.circle-card-invite-btn:hover { background:#c9a87c; color:#fff; }

/* Invite panel */
.circles-invite-panel { background:#fffdf8; border:1px solid #d9c7b0; border-radius:12px;
  padding:20px 24px 24px; margin-top:8px; }
.circles-invite-to { font-size:.84rem; font-weight:600; color:#5d8a5e;
  background:#f0f7f0; border:1px solid #b6d4b8; border-radius:6px;
  padding:7px 12px; margin-bottom:14px; }

/* Empty CTA */
.circles-empty-cta { text-align:center; padding:36px 24px 28px; background:#fffdf8;
  border-radius:12px; border:1.5px dashed #d9c7b0; margin-bottom:4px; }
.circles-empty-icon  { margin-bottom:12px; }
.circles-empty-ttl   { font-size:1.15rem; font-weight:700; color:#4a2e14; margin:0 0 8px; }
.circles-empty-sub   { font-size:.88rem; color:#7a5c3e; margin:0 0 18px; }
.circles-empty-btn   { margin:0 auto; }

/* Desktop: full-width stack ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .circles-page         { display:block; }
  .circles-hero         { margin:20px 0 24px; }
  .circles-invite-panel { margin-top:8px; }
}

/* Mobile: single column, invite last ────────────────────────────────────── */
@media (max-width: 480px) {
  .circles-page { padding:0 0 32px; }
  .circles-hero { padding:20px 16px 18px; border-radius:10px; margin:16px 0; }
  .circles-hero-title { font-size:1.2rem; }
  .circles-pillars { gap:12px; }
  .circles-pillar { flex:1 1 120px; }
  .circles-pillar-body { font-size:.76rem; }
  .circles-invite-panel { padding:16px; border-radius:10px; }
  .circle-card { padding:10px 12px; gap:10px; }
  .circle-card-icon { width:44px; height:44px; font-size:.95rem; }
  .circles-section-hd { font-size:.92rem; }
}
.circles-invite-panel--highlight { animation: circles-panel-pulse .9s ease; }
@keyframes circles-panel-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,124,.6); }
  50%  { box-shadow: 0 0 0 8px rgba(201,168,124,.2); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,124,0); }
}

/* ── Circles invite panel — styled tabs ──────────────────────────────────── */
.circles-inv-tabs { display:flex; gap:0; border-bottom:2px solid #e8d9c4; margin-bottom:16px; }
.circles-inv-tab  { display:flex; align-items:center; padding:9px 18px;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  cursor:pointer; font-size:.88rem; font-weight:500; color:#7a5c3e;
  font-family:inherit; transition:color .12s, border-color .12s; }
.circles-inv-tab:hover            { color:#4a2e14; }
.circles-inv-tab--active          { color:#4a2e14; border-bottom-color:#c9a87c; font-weight:700; }
.circles-inv-form { display:flex; flex-direction:column; gap:10px; }

/* ── Pending invitations ─────────────────────────────────────────────────── */
.circles-pending     { margin-top:22px; padding-top:18px; border-top:1.5px solid #e8d9c4; }
.circles-pending-hd  { font-size:.82rem; font-weight:700; color:#7a5c3e; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.circles-pending-badge { background:#c9a87c; color:#fff; font-size:.72rem; font-weight:700;
  border-radius:99px; padding:1px 7px; letter-spacing:0; text-transform:none; }
.circles-pending-none { font-size:.83rem; color:#a07850; font-style:italic; margin:0; }
.circles-pending-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.circles-pending-item { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:8px; background:#fdf6ec; border:1px solid #ece6de; }
.circles-pending-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0;
  object-fit:cover; }
@media (min-width:768px) {
  .circles-pending-avatar { width:48px; height:48px; }
}
.circles-pending-avatar--init { display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; color:#fff; }
.circles-pending-avatar--email { display:flex; align-items:center; justify-content:center;
  background:#7a5c3e; color:#fff; font-size:.9rem; }
.circles-pending-info  { flex:1 1 auto; min-width:0; }
.circles-pending-name  { display:block; font-size:.85rem; font-weight:600; color:#4a2e14;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circles-pending-dest  { display:block; font-size:.75rem; color:#a07850; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circles-pending-date  { flex-shrink:0; font-size:.72rem; color:#b0946a; }

/* ── Circles pending — received vs sent split ────────────────────────────── */
.circles-pending--received { margin-top:22px; padding-top:18px; border-top:1.5px solid #e8d9c4; }
.circles-pending--sent     { margin-top:16px; padding-top:16px; border-top:1px dashed #e0d4c4; }
.circles-pending-hd--received { color:#4a2e14; }
.circles-pending-badge--received { background:#5d8a5e; }
.circles-pending-item--received { background:#f5fbf5; border-color:#c8e0c8; }
.circles-pending-location { font-size:.78rem; color:#7a5c3e; font-weight:400; }
.circles-pending-lastseen { display:block; font-size:.73rem; color:#a07850; margin-top:2px; font-style:italic; }

/* ── Email invite registration status ───────────────────────────────────── */
.circles-email-status          { display:block; font-size:.73rem; margin-top:2px; font-weight:500; }
.circles-email-status--pending { color:#a07850; }
.circles-email-status--done    { color:#5d8a5e; }

/* ── Circle page — desktop enhancements ─────────────────────────────────── */
@media (min-width:768px) {
  /* Equalise tab widths — padding override wins over min-width in flex context */
  .cp-tab.pace-tab { padding:8px 28px !important; text-align:center; }
  /* Larger book covers in stats table */
  .cs-book-cover { width:52px; height:76px; }
  /* Larger hover-tip cover for fastest read */
  .cs-fastest-tip img { width:80px; height:116px; }
  /* Exchange tab covers match hover-tip size */
  .cp-ex-cover { width:80px; height:116px; }
}

/* ── My Books / My Reads — tabs (v73) ───────────────────────────────────── */
.ub-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 0;
  border-bottom: 2px solid #4a3520;
}
.ub-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 7px 20px;
  color: #a07850;
  font-size: .9rem;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color .15s, border-color .15s;
}
.ub-tab:hover { color: #f0e6d3; }
.ub-tab--active {
  color: #f0e6d3;
  border-bottom-color: #c8a87a;
  font-weight: 600;
}
.ub-tab small { font-weight: normal; color: #888; font-size: .78em; margin-left: 4px; }

/* ── My Books — bigger cover on desktop ─────────────────────────────────── */
@media (min-width:768px) {
  .my-books-cover {
    width: 96px !important;
    height: 140px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    max-height: 140px !important;
  }
}

/* ── My Reads — sticky first column (matches admin-table light theme) ──────── */
.ubr-col-sticky {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  min-width: 160px;
  max-width: 240px;
  white-space: normal;
}
#ub-tab-reads .col-author {
  min-width: 120px;
  max-width: 180px;
}
.admin-table thead .ubr-col-sticky { background: #4a2e14; z-index: 3; }
.admin-table tbody tr:nth-child(even) .ubr-col-sticky { background: #faf5ef; }
.admin-table tbody tr:hover .ubr-col-sticky { background: #f5ede3 !important; }

/* ── My Reads — book title hover cover tooltip ──────────────────────────────
   The actual tooltip is #ubr-shared-tip, appended to <body> by JS so it sits
   in the root stacking context and is never clipped by sticky/overflow parents.
   .ubr-tip elements in the table are hidden data sources (cover src only).      */
.ubr-title-wrap { display: inline-block; }
.ubr-tip        { display: none !important; } /* hidden — JS reads src only */

#ubr-shared-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  overflow: hidden;
  line-height: 0;
}
#ubr-shared-tip img {
  width: 60px;
  height: 88px;
  object-fit: cover;
  display: block;
}
@media (min-width:768px) {
  #ubr-shared-tip img { width: 80px; height: 116px; }
}

/* ── My Reads — status badges ────────────────────────────────────────────── */
.ubr-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 500;
}
.ubr-badge--active    { background: #1a3a1a; color: #7dba7d; }
.ubr-badge--completed { background: #1a2e4a; color: #7ab4e0; }
.ubr-badge--paused    { background: #3a2a00; color: #c8a030; }
.ubr-badge--dropped   { background: #3a1a1a; color: #c07070; }

/* ── My Reads — load-more bar ────────────────────────────────────────────── */
.ubr-load-more-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1em;
  padding-bottom: .5em;
}
.ubr-count {
  font-size: .82rem;
  color: #888;
}

@media (min-width:768px) {
  .ubr-tip img { width: 80px; height: 116px; }
}

/* ── Bookshop.org inline affiliate link (book detail page) ───────────────── */
.bd-affiliate-inline {
  margin: 1.2em 0 .6em;
  text-align: center;
}
.btn-affiliate-inline {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #C17A3A;
  border-radius: 6px;
  color: #C17A3A;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-affiliate-inline:hover {
  background: #C17A3A;
  color: #F0DFC0;
}

/* Other versions in BT — body overrides bd-accordion-body to single-column flex */
.bd-other-formats__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 6px 20px !important;
}
.bd-other-formats__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 7px 0;
  border-bottom: 1px solid #f0e9df;
  font-size: .85rem;
}
.bd-other-formats__link:last-child { border-bottom: none; }
.bd-other-formats__link:hover .bd-other-formats__book-title { text-decoration: underline; }
.bd-other-formats__cover {
  width: 30px;
  height: 44px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.bd-other-formats__cover--placeholder { background: #e8ddd0; }
.bd-other-formats__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
}
.bd-other-formats__book-title { color: #3a2a1a; line-height: 1.3; }
.bd-other-formats__badge {
  display: inline-block;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(154,122,85,.12);
  color: #9a7a55;
  border: 1px solid rgba(154,122,85,.3);
}
.bd-other-formats__badge--ebook,
.bd-other-formats__badge--pdf       { background: rgba(58,122,173,.1); color: #3a7aad; border-color: rgba(58,122,173,.3); }
.bd-other-formats__badge--audiobook { background: rgba(122,79,155,.1); color: #7a4f9b; border-color: rgba(122,79,155,.3); }
.bd-other-formats__lang {
  font-size: .7rem;
  color: #9a7a55;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Search result format pills */
.srp-format-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  background: rgba(193,122,58,.18);
  color: #C17A3A;
  border: 1px solid rgba(193,122,58,.35);
}
.srp-format-pill--ebook    { background: rgba(52,152,219,.15); color: #3498db; border-color: rgba(52,152,219,.35); }
.srp-format-pill--pdf      { background: rgba(52,152,219,.15); color: #3498db; border-color: rgba(52,152,219,.35); }
.srp-format-pill--audiobook{ background: rgba(155,89,182,.15); color: #9b59b6; border-color: rgba(155,89,182,.35); }
.srp-format-pill--hardcover{ background: rgba(193,122,58,.18); color: #C17A3A; border-color: rgba(193,122,58,.35); }
.srp-format-pill--paperback{ background: rgba(193,122,58,.18); color: #C17A3A; border-color: rgba(193,122,58,.35); }

/* ── Welcome page ────────────────────────────────────────────────────────── */
.welcome-wrap {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.welcome-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 40px 36px 36px;
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.welcome-logo {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: #c9a87c;
  letter-spacing: 1px;
  margin-bottom: 20px;
  font-style: italic;
}
.welcome-title {
  font-family: Georgia, serif;
  font-size: 1.55rem;
  color: #3d2b1f;
  margin: 0 0 10px;
  line-height: 1.3;
}
.welcome-sub {
  font-size: 1.0rem;
  color: #7a5c3e;
  margin: 0 0 28px;
  font-style: italic;
}
.welcome-lang-section {
  margin-bottom: 28px;
}
.welcome-lang-label {
  display: block;
  font-size: .78rem;
  color: #9a7a55;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.welcome-lang-flags {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.welcome-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #f7f3ee;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: .85rem;
  color: #5a3e2b;
  transition: border-color .15s, background .15s;
}
.welcome-lang-btn:hover { background: #efe8de; border-color: #c9a87c; }
.welcome-lang-btn.active { border-color: #C17A3A; background: #fdf6ec; }
.welcome-lang-btn img { display: block; }
.welcome-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.welcome-tour-btn {
  display: inline-block;
  background: #C17A3A;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: bold;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  transition: background .15s, transform .1s;
}
.welcome-tour-btn:hover { background: #a8672e; transform: translateY(-1px); }
.welcome-skip-link {
  background: none;
  border: none;
  color: #9a7a55;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.welcome-skip-link:hover { color: #5a3e2b; }

/* ── Welcome page — desktop breakpoints ─────────────────────────────────── */
@media (min-width: 768px) {
  .welcome-card       { max-width: 640px; padding: 48px; }
  .welcome-title      { font-size: 2.2rem; }
  .welcome-lang-flags { gap: 24px; }
  .welcome-lang-btn   { width: 120px; padding: 16px; font-size: 1rem; }
  .welcome-tour-btn   { font-size: 1.1rem; padding: 16px 32px; }
}
@media (min-width: 1200px) {
  .welcome-card { max-width: 860px; padding: 64px; }
}
@media (min-width: 1400px) {
  .welcome-card { max-width: 960px; }
}

/* ── Avatar pulse hint ───────────────────────────────────────────────────── */
@keyframes avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193, 122, 58, 0.7); }
  50%       { box-shadow: 0 0 0 6px rgba(193, 122, 58, 0); }
}
.avatar-hint-active .nav-avatar-img,
.avatar-hint-active .nav-avatar-initial {
  animation: avatar-pulse 1.8s ease-in-out infinite;
}
.avatar-hint-active {
  position: relative;
}
.avatar-hint-active::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #3d2b1f;
  color: #F0DFC0;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity .2s;
}
.avatar-hint-active:hover::after { opacity: 1; }

/* ── Desktop widen — profile + circles pages ────────────────────────────── */
@media (min-width: 1200px) {
  .profile-edit-wrap { max-width: 1140px; width: 100%; margin: 0 auto; }
  .circles-page      { max-width: 1140px; width: 100%; }
}
@media (min-width: 1400px) {
  .profile-edit-wrap { max-width: 1320px; }
  .circles-page      { max-width: 1320px; }
}

/* ── Individual circle page — consistent tab width ──────────────────────── */
.cp-outer-wrap {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1200px) { .cp-outer-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .cp-outer-wrap { max-width: 1320px; } }

/* ── Desktop widen — discover + roadmap pages ───────────────────────────── */
@media (min-width: 1200px) {
  .dcvr-page { max-width: 1140px; }
  .rm-page   { max-width: 1140px; }
  .rms-wrap  { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .dcvr-page { max-width: 1320px; }
  .rm-page   { max-width: 1320px; }
  .rms-wrap  { max-width: 1320px; }
}

/* ── Desktop widen — contact + premium pages ────────────────────────────── */
@media (min-width: 1200px) {
  .contact-card { max-width: 1140px; }
  .premium-page { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .contact-card { max-width: 1320px; }
  .premium-page { max-width: 1320px; }
}

/* ── Desktop widen — goals page + add-book form ─────────────────────────── */
.goals-page { width: 100%; }
@media (min-width: 1200px) {
  .goals-page { max-width: 1140px; margin: 0 auto; }
  #book-form  { width: 100%; }
}
@media (min-width: 1400px) {
  .goals-page { max-width: 1320px; }
}

/* ── Circle stats table: force full-width fill ──────────────────────────── */

/* Profile completion hint — desktop username link + mobile Profile dropdown item */
@keyframes nav-profile-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.nav-profile-hint {
  color: #C17A3A !important;
  font-weight: 600;
  animation: nav-profile-pulse 1.8s ease-in-out infinite;
}

/* ── Premium subscriber management section ──────────────────────────────── */
.prem-manage {
  max-width: 480px;
  margin: 0 auto 28px;
  padding: 16px 20px;
  background: #2b1e0e;
  border: 1px solid #7a5c3e;
  border-radius: 8px;
  text-align: center;
}
.prem-manage-active {
  margin: 0 0 6px;
  color: #c8a87a;
  font-size: .95em;
}
.prem-manage-date {
  margin: 0 0 12px;
  color: #a08060;
  font-size: .85em;
}
.prem-manage-cancelling {
  margin: 0;
  color: #e8c06a;
  font-size: .95em;
}
.prem-cancel-btn {
  background: transparent;
  border: 1px solid #7a5c3e;
  color: #c8a87a;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .88em;
  transition: border-color .2s, color .2s;
}
.prem-cancel-btn:hover {
  border-color: #e87070;
  color: #e87070;
}
.prem-cancel-card {
  background: #2b1e0e;
  border: 1px solid #7a5c3e;
  border-radius: 10px;
  padding: 28px 24px;
  width: 380px;
  max-width: 92vw;
  color: #f0e6d3;
}
.prem-cancel-title {
  margin: 0 0 12px;
  font-size: 1.1em;
  color: #f0e6d3;
}
.prem-cancel-body {
  margin: 0 0 20px;
  color: #c8a87a;
  font-size: .9em;
  line-height: 1.55;
}
.prem-cancel-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── BT-HOME-REDESIGN v93 ───────────────────────────────────────────────── */

/* Home page max-width wrapper */
.home-page-wrapper { width: 100%; }
@media (min-width: 1200px) {
  .home-page-wrapper { max-width: 1140px; width: 100%; margin: 0 auto; }
}
@media (min-width: 1400px) {
  .home-page-wrapper { max-width: 1320px; }
}

/* KPI Strip */
.kpi-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 8px;
}
.kpi-strip::-webkit-scrollbar { display: none; }
.kpi-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 7px;
  padding: 5px 10px;
  min-width: 60px;
  max-height: 52px;
  justify-content: center;
}
.kpi-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a7f72;
  white-space: nowrap;
  line-height: 1.2;
}
.kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: #2c2416;
  white-space: nowrap;
  line-height: 1.3;
}
.kpi-genres { font-size: 12px !important; }

/* KPI split layout (Books, Pages, Quotes) */
.kpi-pill--split { max-height: none; }
.kpi-split {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-start;
}
.kpi-val-main { font-size: 15px; font-weight: 700; color: #2c2416; white-space: nowrap; }
.kpi-divider  { font-size: 13px; color: #c4b8a8; font-weight: 300; }
.kpi-val-year { font-size: 15px; font-weight: 700; color: #2c2416; white-space: nowrap; }
.kpi-split-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #a09585;
  margin-top: 1px;
  gap: 4px;
  width: 100%;
  line-height: 1.2;
}
.kpi-split-labels span { white-space: nowrap; }
.kpi-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  width: 100%;
}
.kpi-label-divider { color: #c4b8a8; font-size: 9px; font-weight: 300; }

/* Desktop KPI: stretch pills to full width, center content */
@media (min-width: 768px) {
  .kpi-strip {
    overflow-x: visible;
    justify-content: space-between;
  }
  .kpi-pill {
    flex: 1;
    min-width: 0;
    align-items: center;
  }
  .kpi-label, .kpi-value { text-align: center; }
  .kpi-split { justify-content: center; }
  .kpi-split-labels { justify-content: space-between; }
}

/* Home Goal section */
.home-goal-section { padding: 0; }
.home-goal-cards {
  display: flex;
  gap: 12px;
}
.hgoal-card {
  flex: 1;
  background: #fff;
  border: 1px solid #E0DBD0;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hgoal-card--goal-met { border-color: #3B6D11; }
.hgoal-card-label {
  font-size: 10px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.hgoal-card-value {
  font-size: 17px;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.1;
}
.hgoal-card-sub {
  font-size: 10px;
  color: #aaa;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hgoal-bar {
  height: 6px;
  background: #e8e0d8;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.hgoal-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.hgoal-bar-fill--green { background: #3B6D11; }
.hgoal-bar-fill--amber { background: #C17A3A; }
.hgoal-bar-fill--red   { background: #A32D2D; }
.hgoal-trophy {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 16px;
  line-height: 1;
}
.hgoal-setgoal {
  font-size: 12px;
  color: #c9a87c;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
}
.hgoal-setgoal:hover { text-decoration: underline; }

/* Community books horizontal scroll row */
.comm-books-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.comm-books-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 4px;
}
.comm-books-row::-webkit-scrollbar { display: none; }
.comm-book-tile {
  flex-shrink: 0;
  width: 60px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: #d6c9b8;
  text-decoration: none;
  display: block;
  transition: opacity .15s;
}
.comm-book-tile:hover { opacity: .85; }
.comm-book-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 600px) {
  .comm-book-tile { width: 72px; height: 106px; }
}

/* Community activity feed */
.home-activity-section { margin-top: 0; }
.activity-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #E8E4DC;
  overflow: hidden;
}
.activity-row:last-child { border-bottom: none; }
.activity-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.activity-avatar-img {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* row body (output by activityFeedApi) */
.activity-row-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #3a2a1a;
}
/* legacy body class kept for any SSR fallback */
.activity-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #3a2a1a;
}
.activity-actor {
  font-weight: 600;
  display: inline;
}
.activity-action { color: #5a4030; display: inline; }
.activity-action a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.activity-extra {
  display: inline;
  font-size: 11px;
  color: #bf7c2a;
  font-style: normal;
}
.activity-snippet {
  font-style: italic;
  color: #999;
  font-size: 12px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.activity-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #bf7c2a;
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
  padding-top: 0;
}
.activity-voir-plus {
  display: block;
  text-align: center;
  padding: 9px;
  font-size: 13px;
  color: #c9a87c;
  text-decoration: none;
  border-top: 1px solid #E8E4DC;
  margin-top: 4px;
}
.activity-voir-plus:hover { text-decoration: underline; }

/* Desktop: single-line activity rows */
@media (min-width: 768px) {
  .activity-row { align-items: center; flex-wrap: nowrap; }
  .activity-row-body, .activity-row .activity-body {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
  }
  .activity-snippet {
    display: inline;
    max-width: 260px;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Progress bar on currently-reading: reduce to 4px */
.ar-pace-bar .pace-bar { height: 4px !important; border-radius: 2px; }

/* ── Cover Accuracy Check (Admin DQ) ────────────────────────────────────────── */
.cck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cck-item { display: flex; gap: .75rem; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: .65rem; }
.cck-cover-wrap { flex: 0 0 70px; }
.cck-img { width: 70px; height: 100px; object-fit: cover; border-radius: 3px; background: #f0e8dc; }
.cck-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cck-book-id { font-size: .72rem; color: #aaa; }
.cck-title { font-size: .85rem; font-weight: 600; color: #2c2416; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cck-author { font-size: .78rem; color: #6b5c4e; }
.cck-note { font-size: .75rem; color: #555; margin: 0; font-style: italic; }
.cck-badge { display: inline-block; padding: .15rem .45rem; border-radius: 3px; font-size: .72rem; font-weight: 600; }
.cck-pending { background: #e8e0d4; color: #7a6a58; }
.cck-busy    { background: #fdf0d8; color: #bf7c2a; }
.cck-ok      { background: #d4edda; color: #276e3b; }
.cck-bad     { background: #f8d7da; color: #a0392b; }
.cck-muted   { background: #e8e0d4; color: #7a6a58; }
.cck-acts { display: flex; gap: .35rem; margin-top: .3rem; flex-wrap: wrap; }
.cck-act { padding: .2rem .5rem; font-size: .75rem; border-radius: 3px; border: 1px solid #c0a882; background: #fff; cursor: pointer; color: #6b3f1e; text-decoration: none; }
.cck-act:hover { background: #f0dfc0; }
.cck-act-fix { background: #f0dfc0; font-weight: 600; }