/* Extracted from templates/estante.html (style block 1) */
:root {
--sidebar-w: 216px;
}
body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; }
/* New Workspace Layout */
.workspace { display: flex; flex: 1; align-items: flex-start; }
.sidebar { width: var(--sidebar-w); background: var(--color-bg-base); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; flex-shrink: 0; }
.sidebar-section { padding: 18px 14px 8px; }
.sidebar-label { font-size: .72rem; font-weight: var(--font-weight-bold); color: var(--text-muted); text-transform: none; letter-spacing: .01em; padding: 0 8px; margin-bottom: 6px; }
.is-hidden { display: none !important; }
.is-open { display: block !important; }
body.has-modal-lock { overflow: hidden; }
.shelf-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .86rem; color: var(--text-primary); transition: background .12s; user-select: none; }
.shelf-item:hover { background: var(--color-hover-neutral); color: var(--text-primary); }
.shelf-item:focus-visible,
.sidebar-secondary-link:focus-visible,
.btn-icon-tiny:focus-visible,
.current-reading-edit-btn:focus-visible,
.current-reading-btn:focus-visible,
.reading-sidebar-mode-chip:focus-visible,
.reading-sidebar-stepper:focus-visible,
.view-btn:focus-visible,
.mobile-view-toggle:focus-visible,
.mobile-sort-btn:focus-visible,
.mobile-topbar-add:focus-visible,
.mobile-shelf-filter-chip:focus-visible,
.sidebar-list-card-main:focus-visible,
.sidebar-list-edit-btn:focus-visible,
.reading-history-period-btn:focus-visible,
.reading-history-preview:focus-visible {
outline: 2px solid var(--color-accent-focus);
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
.shelf-item .shelf-actions { display: none; margin-left: auto; }
.shelf-item:hover .shelf-actions { display: flex; align-items: center; gap: 4px; }
.shelf-item--custom-list { position: relative; }
.shelf-item--custom-list .shelf-name { cursor: pointer; }
.shelf-item--custom-list .shelf-actions { gap: 6px; margin-right: 4px; }
.btn-icon-tiny { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; font-size: 1rem; border-radius: 4px; display: flex; transition: color .1s, background .1s; }
.btn-icon-tiny:hover { color: var(--accent2); background: var(--color-hover-neutral); }
.shelf-item.active { background: var(--color-selection-bg); color: var(--accent2); font-weight: var(--font-weight-semibold); }
.shelf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shelf-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.shelf-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-count { background: var(--bg-surface); color: var(--text-muted); font-size: .7rem; font-weight: var(--font-weight-bold); min-width: 22px; padding: 2px 6px; border-radius: 20px; text-align: center; margin-left: auto; flex-shrink: 0; }
.shelf-item.active .shelf-count { background: rgba(124,58,237,.16); color: var(--accent2); }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 14px; }
.create-list-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 14px; font-size: .9rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .12s; border-radius: 16px; margin: 0; background: var(--gradient-brand-strong); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-glow); }
.create-list-btn:hover { opacity: .98; transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.create-list-btn-copy { display: flex; flex-direction: column; min-width: 0; }
.create-list-btn-title { font-size: .9rem; line-height: 1.1; }
.create-list-btn-subtitle { font-size: .72rem; color: rgba(255,255,255,.72); font-weight: 500; }
.sidebar-secondary-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px 4px 0; color: var(--accent2); font-size: .78rem; font-weight: var(--font-weight-semibold); text-decoration: none; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
.sidebar-view-all-lists { font-size: .88rem; }
.sidebar-manage-lists { font-size: .88rem; }
.sidebar-secondary-link:hover { color: var(--accent); }
.sidebar-secondary-link.active { color: var(--accent); }
.sidebar-list-cards { display: flex; flex-direction: column; gap: 12px; }
.sidebar-list-group-title { font-size: .72rem; font-weight: var(--font-weight-bold); color: var(--text-muted); text-transform: none; letter-spacing: .01em; padding: 0 2px; margin: 4px 0 2px; }
.sidebar-list-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform .16s, border-color .16s, box-shadow .16s, background .16s; }
.sidebar-list-card:hover { transform: translateY(-1px); border-color: var(--color-border-subtle); box-shadow: 0 14px 28px rgba(0,0,0,.16); }
.sidebar-list-card.active { border-color: rgba(124,58,237,.34); box-shadow: 0 0 0 1px rgba(124,58,237,.22), 0 14px 28px rgba(0,0,0,.18); }
.sidebar-list-card-main { display: block; width: 100%; padding: 0; background: none; border: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sidebar-list-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 54px); gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border); }
.sidebar-list-cover-slot { display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); font-size: 1rem; overflow: hidden; }
.sidebar-list-cover-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-list-body { padding: 12px; }
.sidebar-list-head { display: flex; gap: 8px; align-items: flex-start; }
.sidebar-list-emoji { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-subtle-hover); font-size: 1rem; flex-shrink: 0; }
.sidebar-list-name { font-size: .92rem; font-weight: var(--font-weight-bold); line-height: 1.25; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 6px; }
.sidebar-list-owner { margin-top: 4px; font-size: .74rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.sidebar-list-owner img { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
.sidebar-list-private { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--text-muted); padding: 2px 7px; border-radius: 999px; background: var(--color-surface-subtle-hover); }
.sidebar-list-description { margin: 10px 0 0; font-size: .78rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.25em; }
.sidebar-list-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .72rem; color: var(--text-muted); }
.sidebar-list-stat { display: inline-flex; align-items: center; gap: 4px; }
.sidebar-list-footer { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.sidebar-list-edit-btn { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; }
.sidebar-list-edit-btn:hover { color: var(--accent2); border-color: var(--color-selection-border); background: var(--color-hover-neutral); }
.sidebar-list-empty { padding: 6px 4px; font-size: .78rem; color: var(--text-muted); font-style: italic; }
.estante-lists-wrap { display:flex; flex-direction:column; gap:1.5rem; }
.estante-lists-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; }
.estante-list-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; }
.estante-list-card:hover { transform: translateY(-2px); border-color: var(--color-selection-border); box-shadow: var(--shadow-2); }
.estante-list-card-covers { display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 92px); gap:2px; background:var(--bg); border-bottom:1px solid var(--border); }
.estante-list-card-slot { display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--text-muted); overflow:hidden; }
.estante-list-card-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.estante-list-card-body { padding:1rem; }
.estante-list-card-name { margin:0; font-size:1.05rem; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.estante-list-card-desc { margin:.65rem 0 0; color:var(--text-secondary); font-size:.85rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.7em; }
.estante-list-card-stats { display:flex; gap:12px; flex-wrap:wrap; margin-top:.9rem; font-size:.76rem; color:var(--text-muted); }
.estante-list-card-stat { display:inline-flex; align-items:center; gap:5px; }
.estante-list-card-actions { display:flex; gap:.6rem; margin-top:1rem; }
.estante-list-card-actions .btn { flex:1; justify-content:center; }
.estante-lists-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.estante-lists-toolbar-copy { display:flex; flex-direction:column; gap:.35rem; }
.estante-lists-toolbar-eyebrow { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.estante-lists-toolbar-title { font-size:1rem; color:var(--text-primary); font-weight:700; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.estante-lists-manage-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; color:var(--accent2); background:var(--color-accent-subtle); border:1px solid var(--color-selection-border); }
.estante-lists-toolbar-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.estante-list-sort { min-width: 220px; }
.estante-list-empty { text-align:center; color:var(--text-muted); padding:3rem 1rem; }
.estante-list-empty i { font-size: 2.6rem; display: block; margin-bottom: 0.75rem; }
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content-toolbar { border-bottom: 1px solid var(--color-border-soft); padding: 20px 24px 18px; display: flex; align-items: center; gap: 14px; background: var(--color-bg-content); flex-shrink: 0; }
.content-title { font-size: 1.3rem; font-weight: var(--font-weight-bold); flex: 1; font-family: var(--font-display); display:flex; align-items:center; gap:10px; min-width:0; }
.list-actions-container { display: inline-flex; align-items: center; gap: 8px; }
.content-toolbar-main { display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.content-toolbar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.content-title { font-size: 2.2rem; color: var(--color-text-primary); }
.shelf-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:24px; padding:0 8px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-text-secondary); font-family:var(--font-mono); font-size:.74rem; font-weight:700; background:var(--color-bg-input); }
.shelf-subtoolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 14px 24px 14px; }
.genre-chip-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:10px; padding-bottom:2px; }
.genre-chip-label { color:var(--color-text-muted); font-size:.8rem; }
.genre-chip { border:1px solid var(--color-border-soft); background:var(--color-bg-input); color:var(--color-text-secondary); border-radius:999px; padding:8px 14px 9px; font-size:.8rem; cursor:pointer; line-height:1; }
.genre-chip.active { background:rgba(110,86,255,.18); color:var(--color-text-primary); border-color:rgba(137,121,255,.35); }
.shelf-overview { display:flex; flex-direction:column; gap:20px; }
.shelf-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.shelf-stat-card { background:var(--card-bg, var(--color-bg-card)); border:1px solid var(--color-border-soft); border-radius:12px; padding:18px 16px 14px; min-height:82px; }
.shelf-stat-value { font-family:var(--font-body); font-size:2rem; color:var(--color-text-primary); line-height:1; }
.shelf-stat-label { margin-top:6px; font-size:.72rem; color:var(--color-text-muted); letter-spacing:.12em; text-transform:uppercase; }
.shelf-stat-line { height:2px; border-radius:999px; background:var(--color-border-subtle); margin-top:14px; }
.current-reading-layout { display:flex; flex-direction:column; gap:14px; }
.current-reading-row { display:block; padding-bottom:6px; }
.current-reading-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; align-items:stretch; }
.current-reading-grid .current-reading-card { min-width:0; width:100%; }
.current-reading-card { display:flex; flex-direction:column; background:linear-gradient(160deg, var(--color-bg-card) 0%, var(--color-bg-content) 100%); border:1px solid var(--color-border-subtle); border-radius:14px; padding:18px 20px; }
.current-reading-main { display:flex; align-items:stretch; gap:16px; min-width:0; flex:1; }
.current-reading-body { min-width:0; flex:1; display:flex; flex-direction:column; }
.current-reading-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.current-reading-cover-link { display:block; width:64px; height:96px; border-radius:8px; flex-shrink:0; overflow:hidden; }
.current-reading-cover { width:64px; height:96px; border-radius:8px; object-fit:cover; background:var(--color-accent-muted); display:block; transition:opacity .15s, transform .15s; }
.current-reading-cover--placeholder { width:64px; height:96px; border-radius:8px; background:var(--color-accent-muted); flex-shrink:0; }
.current-reading-cover-link:hover .current-reading-cover { opacity:.9; transform:scale(1.02); }
.current-reading-kicker { display:inline-flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); font-weight:800; margin-bottom:4px; margin-top:1px; min-width:0; }
.current-reading-kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--color-progress-fill); flex-shrink:0; }
.current-reading-edit-btn { display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border:none; border-radius:999px; background:var(--color-surface-active); color:var(--color-text-primary); cursor:pointer; flex-shrink:0; transition:background .15s, transform .15s, color .15s; padding:0; margin-top:-2px; }
.current-reading-edit-btn:hover { background:var(--color-hover-neutral); color:var(--color-text-primary); transform:scale(1.06); }
.current-reading-title { font-size:1.1rem; color:var(--color-text-primary); font-weight:700; line-height:1.25; }
.current-reading-title-link { text-decoration:none; width:fit-content; }
.current-reading-title-link:hover { color:var(--color-accent-secondary); text-decoration:underline; text-underline-offset:3px; }
.current-reading-author { font-size:.82rem; color:var(--color-text-secondary); margin-top:2px; }
.current-reading-pages { font-size:.78rem; color:var(--color-text-muted, rgba(255,255,255,.65)); margin-top:2px; }
.current-reading-progress { margin-top:12px; }
.current-reading-progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.current-reading-progress-label { font-size:.78rem; color:var(--color-text-muted, rgba(255,255,255,.65)); }
.current-reading-progress-pct { font-size:.78rem; color:var(--color-text-secondary); font-weight:700; }
.current-reading-progressline { height:4px; border-radius:999px; background:var(--color-progress-track); overflow:hidden; }
.current-reading-progressline span { display:block; height:100%; background:var(--color-progress-fill); width:var(--pct, 0%); }
.estante-reading-form { margin-top: auto; padding-top: 12px; }
.current-reading-btn { display:flex; align-items:center; justify-content:center; gap:7px; border:none; background:var(--gradient-cta); color:var(--color-text-primary); border-radius:10px; padding:11px 14px; margin-top:10px; width:100%; font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
.current-reading-btn:hover { opacity:.88; }
.reading-sidebar-mode-chips { display:flex; gap:6px; flex-wrap:wrap; }
.reading-sidebar-mode-chips--inline { margin-bottom:0; width:100%; }
.reading-sidebar-mode-chips--inline .reading-sidebar-mode-chip { flex:1; text-align:center; }
.reading-sidebar-mode-chip { border:1px solid var(--color-border-subtle); background:var(--color-surface-subtle-hover); color:var(--color-text-secondary); border-radius:999px; padding:6px 12px; font-size:.76rem; font-weight:700; line-height:1; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s; font-family:inherit; }
.reading-sidebar-mode-chip:hover { border-color:var(--color-selection-border); color:var(--color-text-primary); transform:translateY(-1px); }
.reading-sidebar-mode-chip.active { background:var(--color-selection-bg); border-color:var(--color-selection-border); color:var(--color-text-primary); }
.reading-sidebar-input-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; align-items:center; }
.reading-sidebar-input-row--card { display:flex; flex-direction:column; grid-template-columns:unset; gap:8px; margin-top:12px; }
.reading-sidebar-input-group { display:flex; align-items:center; background:var(--color-surface-subtle); border:1px solid var(--color-border-subtle); border-radius:12px; overflow:hidden; }
.reading-sidebar-input { width:100%; background:var(--color-surface-subtle-hover); border:1px solid var(--color-border-subtle); color:var(--color-text-primary); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:.95rem; transition:border-color .15s, box-shadow .15s, background .15s; }
.reading-sidebar-input-group .reading-sidebar-input { flex:1; min-width:0; background:transparent; border:none; border-radius:0; padding:10px 12px; text-align:center; transition:background .15s; }
.reading-sidebar-input:focus { border-color:var(--color-selection-border); box-shadow:var(--focus-ring); }
.reading-sidebar-input-group .reading-sidebar-input:focus { background:var(--color-surface-subtle-hover); box-shadow:none; border-color:transparent; }
.reading-sidebar-total { color:var(--color-text-muted, rgba(255,255,255,.65)); font-size:.84rem; font-weight:600; white-space:nowrap; }
.reading-sidebar-input-group .reading-sidebar-total { padding:0 10px 0 4px; }
.reading-sidebar-stepper { background:transparent; border:none; color:var(--color-text-muted, rgba(255,255,255,.65)); font-size:1.1rem; padding:0 12px; cursor:pointer; line-height:1; transition:color .15s; align-self:stretch; font-family:inherit; }
.reading-sidebar-stepper:hover { color:var(--color-accent-secondary); }
/* ── Reading History Preview Card ── */
.reading-history-preview {
display:flex; align-items:center; gap:18px;
background:linear-gradient(135deg,var(--color-bg-card),var(--color-bg-elevated)); border:1px solid var(--color-selection-border);
border-radius:12px; padding:14px 16px; cursor:pointer;
transition:border-color .15s,box-shadow .15s;
}
.reading-history-preview:hover { border-color:var(--color-border-subtle); box-shadow:0 4px 20px rgba(0,0,0,.15); }
.current-reading-row .reading-history-preview { min-width:0; width:100%; }
.reading-history-preview-kicker { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-secondary); font-weight:700; display:flex; align-items:center; gap:6px; flex:0 0 190px; }
.reading-history-preview-kicker i { font-size:.9rem; }
.reading-history-preview-chart { flex:1 1 auto; height:30px; min-height:0; margin:0; overflow:hidden; }
.reading-history-preview-chart svg { width:100%; height:30px; display:block; }
.reading-history-preview-summary { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto; }
.reading-history-preview-pill { font-size:.7rem; color:var(--color-accent-secondary); background:var(--color-accent-subtle); border-radius:999px; padding:2px 8px; }
/* ── Reading History Modal ── */
.reading-history-modal-card { max-width:760px; width:min(92vw,760px); padding:1.5rem; box-sizing:border-box; }
.reading-history-summary { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.reading-history-pill { background:var(--color-surface-subtle-hover); border:1px solid var(--color-border-subtle); border-radius:999px; padding:0.4rem 0.8rem; font-size:0.8rem; color:var(--text-secondary); }
.reading-history-pill strong { color:var(--text-primary); font-weight:600; margin-right:3px; }
.reading-history-chart { width:100%; background:var(--color-surface-subtle); border:1px solid var(--color-border-subtle); border-radius:16px; padding:1rem 0.75rem 0.75rem; overflow:hidden; }
.reading-history-chart-inner { position:relative; overflow:visible; }
.rh-svg { width:100%; height:auto; display:block; }
.reading-history-empty { padding:1rem 0.4rem 0.3rem; text-align:center; color:var(--text-secondary); font-size:0.9rem; }
/* legend */
.rh-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:0.65rem; padding:0 4px; }
.rh-legend-item { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--text-secondary); min-width:0; }
.rh-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rh-legend-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
/* tooltip */
.reading-history-tooltip { position:absolute; pointer-events:none; background:rgba(12,14,28,.96); border:1px solid rgba(124,58,237,.28); border-radius:10px; padding:7px 11px; font-size:.76rem; color:var(--color-text-secondary); white-space:nowrap; transform:translate(-50%,-100%); margin-top:-10px; z-index:20; opacity:0; transition:opacity .1s; }
.reading-history-tooltip.visible { opacity:1; }
.rh-tip-date { font-size:.72rem; color:rgba(180,185,215,.6); margin-bottom:2px; }
.rh-tip-total { font-weight:700; color:var(--color-text-primary); font-size:.82rem; }
.rh-tip-book { font-size:.72rem; color:rgba(180,185,215,.75); margin-top:2px; }
/* period buttons */
.reading-history-period-btns { display:flex; gap:6px; margin-bottom:1rem; }
.reading-history-period-btn { background:var(--color-surface-subtle-hover); border:1px solid var(--color-border-subtle); border-radius:999px; padding:6px 14px; font-size:.8rem; color:var(--text-secondary); cursor:pointer; transition:all .15s; font-family:inherit; }
.reading-history-period-btn:hover { border-color:var(--color-border); background:var(--color-hover-neutral); }
.reading-history-period-btn.active { background:var(--color-selection-bg); border-color:var(--color-selection-border); color:var(--color-accent-secondary); font-weight:600; }
@media (prefers-reduced-motion: reduce) {
.create-list-btn,
.sidebar-list-card,
.estante-list-card,
.current-reading-edit-btn,
.current-reading-btn,
.reading-sidebar-mode-chip,
.reading-history-preview,
.reading-history-tooltip,
.reading-history-period-btn,
.view-btn,
.mobile-view-toggle,
.mobile-sort-btn,
.mobile-topbar-add {
transition: none !important;
animation: none !important;
}
.create-list-btn:hover,
.sidebar-list-card:hover,
.estante-list-card:hover,
.current-reading-edit-btn:hover,
.reading-sidebar-mode-chip:hover {
transform: none !important;
}
}
.shelf-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }
.shelf-section-title { color:var(--color-text-muted); font-size:.9rem; font-weight:700; letter-spacing:.01em; text-transform:none; }
.shelf-section-count { color:var(--color-text-muted); font-size:.74rem; }
.toolbar-bulk-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 10px; border:1px solid var(--border); background:var(--bg-surface); border-radius:999px; }
.toolbar-bulk-count { font-size:.78rem; font-weight:700; color:var(--accent2); white-space:nowrap; }
.toolbar-select-all { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-secondary); white-space:nowrap; }
.toolbar-select-all input { accent-color: var(--accent); }
.view-toggle { display: flex; gap:8px; }
.view-btn { width:40px; height:40px; font-size: 1rem; color: var(--color-text-secondary); cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: var(--color-bg-card); border-radius:10px; transition: background .12s; }
.view-btn.active { background: var(--color-selection-bg); color: var(--color-text-primary); border-color: var(--color-selection-border); }
.mobile-view-toggle {
display: none;
background: var(--color-accent-muted);
border: 1px solid rgba(124,58,237,0.18);
border-radius: 8px;
color: var(--accent2);
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
flex-shrink: 0;
}
.mobile-sort-btn, .mobile-topbar-add {
background: var(--color-accent-muted);
border: 1px solid rgba(124,58,237,0.18);
border-radius: 8px;
color: var(--accent2);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
flex-shrink: 0;
}
.mobile-topbar-title-wrap {
display: none;
flex: 1;
min-width: 0;
align-items: baseline;
gap: 0.35rem;
}
.mobile-topbar-count {
font-size: .78rem;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.mobile-shelf-filters {
display: none;
}
.mobile-shelf-filter-chip {
appearance: none;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface-subtle);
color: var(--text-secondary);
min-height: 44px;
padding: .55rem .85rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: .45rem;
font: inherit;
font-size: .8rem;
font-weight: var(--font-weight-semibold);
white-space: nowrap;
cursor: pointer;
transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
scroll-snap-align: start;
flex: 0 0 auto;
}
.mobile-shelf-filter-chip:hover {
border-color: var(--color-selection-border);
color: var(--text-primary);
}
.mobile-shelf-filter-chip[aria-selected="true"] {
background: var(--color-selection-bg);
border-color: var(--color-selection-border);
color: var(--color-text-primary);
box-shadow: inset 0 0 0 1px var(--color-selection-border);
}
.mobile-shelf-filter-chip__label {
color: inherit;
}
.mobile-shelf-filter-chip__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
min-height: 1.35rem;
padding: 0 .38rem;
border-radius: 999px;
background: var(--color-surface-active);
color: inherit;
font-size: .72rem;
font-weight: var(--font-weight-bold);
line-height: 1;
}
.mobile-shelf-filter-chip[aria-selected="true"] .mobile-shelf-filter-chip__count {
background: var(--color-surface-active);
}
.mobile-topbar-logo-icon {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.mobile-topbar-logo-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.mobile-lists-overlay { display: none; }
.mobile-list-action--danger { color: var(--error) !important; }
.mobile-list-action--danger:hover { background: var(--color-error-bg) !important; }
/* Create list modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay-modal); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: var(--z-modal); align-items: center; justify-content: center; padding: 20px; pointer-events: none; opacity: 0; transition: none; }
.modal-overlay.open { display: flex; pointer-events: auto; opacity: 1; }
.shelf-chip { padding: 6px 14px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); border-radius: 20px; font-size: .83rem; font-weight: 500; cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0; }
.shelf-chip:hover { border-color: var(--accent); color: var(--accent2); }
.shelf-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--color-text-primary); border-color: transparent; }
.shelf-dot--reading { background: var(--info); }
.shelf-dot--want { background: var(--warning); }
.shelf-dot--read { background: var(--success); }
.shelf-dot--abandoned { background: var(--error); }
.shelf-dot--favorites { background: var(--color-accent-purple); }
.mobile-topbar-meta-hidden { display: none; }
.create-list-btn-icon { font-size: 1.05rem; }
.sidebar-section--lists { padding-top: 8px; }
.sidebar-spacer { height: 20px; }
.estante-loading-icon { font-size: 2rem; }
@media (max-width: 1099px) {
.sidebar { display: none; }
.workspace { flex-direction: column; }
.main-content { width: 100%; }
.content-toolbar { display: none; } /* remove barra repetida no mobile */
.shelf-subtoolbar { display: none !important; }
.mobile-view-toggle { display: flex; }
.mobile-topbar-actions { gap: 8px; }
.mobile-topbar-title-wrap { display: inline-flex; }
.mobile-shelf-filters {
display: flex;
gap: .6rem;
overflow-x: auto;
padding: .75rem .9rem .2rem;
scroll-snap-type: x proximity;
scrollbar-width: none;
background: var(--bg);
}
.mobile-shelf-filters::-webkit-scrollbar { display: none; }
.shelf-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.current-reading-row { padding-bottom:0; }
.current-reading-grid { grid-template-columns:1fr; }
.current-reading-grid .current-reading-card { min-width:0; width:100%; }
.current-reading-row .reading-history-preview { flex:none; min-width:0; width:100%; }
.reading-history-preview { display:flex; flex-direction:column; align-items:stretch; gap:0; grid-column:auto; }
.reading-history-preview-kicker { flex:none; }
.reading-history-preview-chart { height:40px; margin:8px 0 6px; }
.reading-history-preview-chart svg { height:40px; }
.reading-history-preview-summary { justify-content:flex-start; }
}
/* Mobile Sort Sheet */
.mobile-sort-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay-modal); z-index: var(--z-modal); align-items: flex-end; }
.mobile-sort-overlay.open { display: flex; }
.mobile-sort-sheet { background: var(--color-bg-modal); border-radius: 16px 16px 0 0; width: 100%; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.mobile-sort-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); font-weight: var(--font-weight-bold); font-size: .95rem; color: var(--text-primary); }
.mobile-sort-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 4px; display: flex; }
.mobile-sort-option { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 14px 20px; font-size: .92rem; color: var(--text-primary); font-family: inherit; cursor: pointer; text-align: left; transition: background .12s; }
.mobile-sort-option:last-child { border-bottom: none; }
.mobile-sort-option:hover { background: var(--bg); }
.mobile-sort-option.active { color: var(--accent); font-weight: var(--font-weight-bold); }
.mobile-sort-option i { font-size: 1rem; }
.mobile-lists-overlay { display: none; }
@media (max-width: 1099px) {
.mobile-lists-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay-modal);
z-index: var(--z-modal);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mobile-lists-overlay.open { display: block; }
.mobile-lists-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-surface);
border-radius: 18px 18px 0 0;
max-height: 78vh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform .26s cubic-bezier(.4,0,.2,1);
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
overflow: hidden;
border-top: 1px solid var(--border);
}
.mobile-lists-overlay.open .mobile-lists-sheet { transform: translateY(0); }
.mobile-lists-sheet-pull {
width: 40px;
height: 4px;
background: var(--border);
border-radius: 999px;
margin: 10px auto 4px;
flex-shrink: 0;
}
.mobile-lists-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 18px 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.mobile-lists-sheet-title {
font-size: .95rem;
font-weight: 800;
color: var(--text-primary);
}
.mobile-lists-sheet-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.1rem;
cursor: pointer;
padding: 4px;
border-radius: 6px;
}
.mobile-lists-body {
overflow-y: auto;
flex: 1;
scrollbar-width: none;
}
.mobile-lists-body::-webkit-scrollbar { display: none; }
.mobile-lists-section-label {
font-family: var(--font-mono);
font-size: .62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-muted);
padding: 10px 18px 4px;
}
.mobile-list-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 18px;
background: transparent;
border: none;
text-align: left;
font: inherit;
cursor: pointer;
border-bottom: 1px solid var(--color-border-subtle);
}
.mobile-list-item:last-child { border-bottom: none; }
.mobile-list-item:active { background: var(--color-accent-subtle); }
.mobile-list-item.active { background: var(--color-selection-bg); }
.mobile-list-icon,
.mobile-list-dot {
width: 20px;
min-width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mobile-list-dot {
width: 10px;
min-width: 10px;
height: 10px;
border-radius: 50%;
}
.mobile-list-dot--reading { background: var(--info); }
.mobile-list-dot--want { background: var(--warning); }
.mobile-list-dot--read { background: var(--success); }
.mobile-list-dot--abandoned { background: var(--error); }
.mobile-list-dot--favorites { background: var(--color-accent-purple); }
.mobile-list-name {
flex: 1;
min-width: 0;
font-size: .9rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-list-item.active .mobile-list-name {
color: var(--accent2);
font-weight: var(--font-weight-bold);
}
.mobile-list-count {
font-size: .76rem;
font-weight: var(--font-weight-bold);
color: var(--text-muted);
background: var(--color-surface-subtle-hover);
border-radius: 999px;
padding: 2px 8px;
flex-shrink: 0;
}
.mobile-list-item.active .mobile-list-count {
background: var(--color-selection-bg);
color: var(--accent2);
}
.mobile-list-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: 4px;
}
.mobile-list-action {
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
background: var(--color-surface-subtle);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.mobile-new-list-btn {
width: calc(100% - 32px);
margin: 12px 16px 0;
border-radius: 12px;
border: 1px solid var(--color-selection-border);
background: var(--color-accent-subtle);
color: var(--accent2);
padding: 12px 14px;
font: inherit;
font-weight: var(--font-weight-bold);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
}
}
.mobile-lists-section-label--spaced { margin-top: 4px; }
.mobile-private-icon { font-size: .7rem; opacity: .7; }
.modal { background: var(--color-bg-modal); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 460px; animation: modalInNew .2s ease; transform: none; padding: 0; }
.estante-modal .ui-modal__header { padding: 18px 22px 0; margin-bottom: 0; }
.estante-modal .ui-modal__title { font-size: 1.2rem; }
.estante-add-shelf-modal { max-width: 640px; width: 95%; overflow: visible; position: relative; }
.estante-add-shelf-body { padding: 1.25rem 2.25rem 2.25rem; }
.estante-add-shelf-title { margin-bottom: 1.5rem; }
.estante-login-overlay { background: var(--color-overlay-modal); z-index: var(--z-loader); }
.estante-login-modal { max-width: 400px; width: 90%; padding: 2rem; text-align: center; position: relative; }
.estante-login-modal .ui-modal__header { padding: 0; }
.estante-login-modal .ui-modal__title { margin-bottom: .5rem; font-size: 1.5rem; }
.estante-login-icon { font-size: 3rem; color: var(--accent); margin-bottom: 1rem; display: block; }
.estante-login-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.estante-login-field { display: block; }
.estante-login-input { width: 100%; padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--color-bg-input); color: var(--text-primary); font-size: 1rem; text-align: center; }
.estante-login-submit { padding: 1rem; justify-content: center; }
.estante-login-error { color: var(--error); margin: .75rem 0 0; font-size: .85rem; }
.estante-login-error:empty { display: none; }
.estante-modal-search { position: relative; }
.estante-modal-search__icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; z-index: 1; font-size: 1rem; }
.estante-modal-search__input { padding: .85rem .85rem .85rem 2.6rem; width: 100%; box-sizing: border-box; font-size: 16px; }
.estante-modal-search__dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; max-height: 50vh; overflow-y: auto; z-index: 200; box-shadow: var(--shadow-2); }
.estante-runtime-hidden { display: none; }
.estante-add-isbn-row { display: flex; gap: .5rem; margin-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.estante-add-isbn-input { flex: 1; height: auto; padding: .8rem; font-size: 16px; }
.estante-add-isbn-btn { padding: 0 1rem; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); }
.estante-book-preview-section { margin-top: 1rem; }
.estante-book-preview-row { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.estante-book-preview-cover { width: 90px; min-width: 90px; border-radius: 8px; object-fit: cover; box-shadow: var(--shadow-2); }
.estante-book-preview-meta { flex: 1; min-width: 0; }
.estante-book-preview-title { margin: 0 0 .25rem; font-size: 1.1rem; line-height: 1.3; }
.estante-book-preview-author { margin: 0 0 .4rem; color: var(--text-secondary); font-size: .9rem; }
.estante-book-preview-detail { margin: 0 0 .5rem; color: var(--text-secondary); font-size: .8rem; }
.estante-book-preview-genres { display: flex; flex-wrap: wrap; gap: .35rem; }
.estante-book-preview-synopsis { margin: 0 0 1rem; font-size: .85rem; color: var(--text-secondary); line-height: 1.55; }
.estante-select-full { height: auto; padding: .8rem; margin-top: .5rem; width: 100%; }
.estante-warning-note { margin: .75rem 0 0; padding: .7rem 1rem; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 8px; font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }
.estante-warning-note i { color: var(--color-warning); margin-right: .3rem; }
.estante-btn-full { margin-top: 1rem; width: 100%; justify-content: center; }
.estante-add-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.estante-form-input { height: auto; padding: .8rem; margin-top: .5rem; width: 100%; }
.estante-form-input--no-margin { margin-top: 0; }
.estante-cover-inputs { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.estante-cover-or { color: var(--text-secondary); font-size: .8rem; text-align: center; }
.estante-flex-row { display: flex; gap: 1rem; }
.estante-flex-item { flex: 1; }
.estante-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.estante-relative { position: relative; }
.estante-add-list-modal { max-width: 500px; }
.estante-add-list-body { gap: 12px; }
.estante-add-list-results { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; }
.bem-body { gap: 16px; }
.bem-form-group { margin: 0; }
.bem-status-select { height: auto; padding: .5rem .8rem .5rem .6rem; width: 100%; border-left: 3.5px solid var(--color-status-want); }
.status-option-want { color: var(--color-status-want); }
.status-option-reading { color: var(--color-status-reading); }
.status-option-read { color: var(--color-status-read); }
.status-option-abandoned { color: var(--color-status-abandoned); }
.review-input--status { border-left: 3.5px solid var(--status-select-color, transparent); padding-left: .6rem; }
.review-input--status-compact { height: auto; padding: .38rem .55rem .38rem .6rem; font-size: .78rem; min-width: 118px; }
.review-input--status-regular { height: auto; padding: .42rem .6rem .42rem .6rem; font-size: .8rem; min-width: 132px; }
.review-input--status-mobile { font-size: 16px; }
.review-input--status-want { --status-select-color: var(--color-status-want); }
.review-input--status-reading { --status-select-color: var(--color-status-reading); }
.review-input--status-read { --status-select-color: var(--color-status-read); }
.review-input--status-abandoned { --status-select-color: var(--color-status-abandoned); }
.status-badge--want { color: var(--status-want); }
.status-badge--reading { color: var(--status-reading); }
.status-badge--read { color: var(--status-read); }
.status-badge--abandoned { color: var(--status-abandoned); }
.rating-star--active { color: var(--star-active); }
.rating-star--inactive { color: var(--star-inactive); }
.bem-footer-actions { display: flex; gap: 8px; }
.estante-create-list-modal { max-width: 460px; }
.form-group--spaced { margin-top: 8px; }
.estante-list-book-search__dropdown { max-height: 220px; z-index: 300; }
.estante-selected-list-books { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.estante-create-list-footer { justify-content: space-between; }
.estante-create-list-actions { display: flex; gap: 8px; margin-left: auto; }
.reading-history-overlay { background: var(--color-overlay-modal); z-index: var(--z-loader); align-items: center; justify-content: center; top: 0; left: 0; width: 100vw; height: 100vh; }
.reading-history-modal-title { margin: 0 0 .35rem; font-size: 1.45rem; }
.reading-history-modal-subtitle { color: var(--text-secondary); margin: 0 0 1rem; }
.modal.reading-history-modal-card { max-width:760px; width:min(92vw,760px); padding:1.5rem; box-sizing:border-box; }
@keyframes modalInNew { from { opacity:0; transform: scale(.95) translateY(16px); } to { opacity:1; transform: none; } }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.modal-close { background: var(--bg-surface); border: none; color: var(--text-primary); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-family: var(--font-mono); font-size: .72rem; font-weight: var(--font-weight-bold); color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.form-input { background: var(--bg-surface); border: 1.5px solid var(--border); color: var(--text-primary); font-size: .9rem; padding: 10px 14px; border-radius: 9px; transition: border-color .15s; font-family: inherit; }
.form-input:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 72px; }
.visibility-row { display: flex; gap: 10px; }
.vis-opt { flex: 1; background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 9px; padding: 10px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.vis-opt:hover, .vis-opt.selected { border-color: var(--color-selection-border); background: var(--color-accent-subtle); }
.vis-opt-icon { font-size: 1.2rem; }
.vis-opt-label { font-size: .76rem; font-weight: var(--font-weight-semibold); margin-top: 4px; color: var(--text-primary); }
.vis-opt-sub { font-size: .68rem; color: var(--text-muted); }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
/* Toolbar add button and shelf search */
.btn-add-shelf { background: linear-gradient(135deg, var(--accent), var(--purple)); color: var(--color-text-primary); border: none; border-radius: 24px; padding: 12px 22px; font-size: .93rem; font-weight: var(--font-weight-bold); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.btn-add-shelf:hover { opacity: .9; }
.toolbar-search-wrap { position: relative; flex-shrink: 0; }
.toolbar-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
.toolbar-search-input { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px 7px 32px; color: var(--text-primary); font-family: var(--font-body); font-size: .84rem; width: 200px; transition: border-color .15s; }
.toolbar-search-input:focus { border-color: var(--accent); }
.toolbar-search-input::placeholder { color: var(--text-muted); }
.toolbar-sort-wrap { position: relative; flex-shrink: 0; }
.toolbar-sort-select { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 7px 34px 7px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: .84rem; min-width: 208px; cursor: pointer; transition: border-color .15s; appearance: none; -webkit-appearance: none; }
.toolbar-sort-select:focus { border-color: var(--accent); }
.toolbar-sort-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
@media (max-width: 900px) { .toolbar-search-wrap { display: none; } }
.toolbar-inline-select { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 7px 34px 7px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: .84rem; min-width: 170px; cursor: pointer; transition: border-color .15s; appearance: none; -webkit-appearance: none; }
.toolbar-inline-select:focus { border-color: var(--accent); }
.book-select-checkbox {
position: absolute;
top: 8px;
left: 8px;
z-index: 4;
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.book-card.selection-mode,
.book-list-item.selection-mode { padding-left: 2.2rem; position: relative; }
.book-card.is-selected,
.book-list-item.is-selected { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--color-selection-border), var(--shadow-2); }
.book-list-select-wrap {
position: absolute;
left: .85rem;
top: 1.2rem;
z-index: 3;
}
/* List mode badge */
.list-mode-badge { background: var(--color-accent-subtle); border: 1px solid var(--color-selection-border); color: var(--accent2); font-size: .7rem; font-weight: var(--font-weight-bold); border-radius: 20px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
/* Seletor de emoji de lista */
.list-emoji-row { display: flex; align-items: flex-start; gap: 10px; }
.list-emoji-current { background: var(--bg); border: 2px solid var(--accent); border-radius: 10px; font-size: 1.5rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: default; flex-shrink: 0; }
.list-emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.list-emoji-opt { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; font-size: 1.15rem; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s, background .12s; padding: 0; }
.list-emoji-opt:hover { border-color: var(--color-selection-border); background: var(--color-accent-subtle); }
.list-emoji-opt.selected { border-color: var(--color-selection-border); background: var(--color-selection-bg); }
/* Badge de lista privada */
.shelf-private-badge { font-size: .65rem; color: var(--text-muted); opacity: .8; flex-shrink: 0; }
/* Botão de editar livro no card */
.btn-edit-book { position: absolute; top: 0.35rem; right: 0.35rem; background: rgba(0,0,0,.45); border: none; color: var(--color-text-primary); border-radius: 50%; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; z-index: 2; transition: background .2s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 0; }
.btn-edit-book--inline { position: static; top: auto; right: auto; }
.btn-edit-book:hover { background: var(--accent); transform: scale(1.08); }
/* Modal de edição do livro */
.bem-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay-modal); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: var(--z-modal); align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.bem-overlay.open { display: flex; pointer-events: auto; }
.bem-modal { max-width: 460px; width: 100%; }
.bem-book-info { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border); }
.bem-cover { width: 52px; min-width: 52px; height: 78px; object-fit: cover; border-radius: 6px; }
.bem-book-text { flex: 1; min-width: 0; }
.bem-title { font-weight: var(--font-weight-bold); font-size: .95rem; line-height: 1.3; color: var(--text-primary); }
.bem-author { font-size: .8rem; color: var(--text-muted); margin-top: 3px; }
.bem-lists-container { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.bem-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .15s; }
.bem-list-item:hover { border-color: var(--accent); }
.bem-list-checkbox { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.bem-list-name { flex: 1; font-size: .87rem; color: var(--text-primary); }
.bem-list-count { font-size: .75rem; color: var(--text-muted); }
.bem-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bem-remove-btn { background: none; border: 1px solid var(--error); color: var(--error); border-radius: 9px; padding: 8px 14px; font-size: .82rem; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s; }
.bem-remove-btn:hover { background: var(--color-error-bg); }
@media (max-width: 480px) {
.bem-modal { max-width: 100%; border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.bem-modal .modal-header { padding: 14px 16px 10px; }
.bem-modal .modal-body { padding: 10px 16px; gap: 12px !important; }
.bem-modal .modal-footer { padding: 10px 16px 64px; }
.bem-cover { width: 42px; min-width: 42px; height: 62px; }
.bem-book-info { padding: 10px; gap: 10px; }
.bem-lists-container { max-height: 130px; }
.bem-list-item { padding: 6px 10px; }
.bem-overlay.open { align-items: flex-end; padding: 0; }
.bem-footer { flex-direction: column-reverse; align-items: stretch; }
.bem-footer > div { display: flex; gap: 8px; }
.bem-footer > div .btn-cancel, .bem-footer > div .btn-create { flex: 1; justify-content: center; }
.bem-remove-btn { justify-content: center; }
}
/* Add to list modal */
.atl-modal-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay-modal); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: var(--z-modal); align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.atl-modal-overlay.open { display: flex; pointer-events: auto; opacity: 1; }
.btn-cancel { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); font-size: .85rem; padding: 9px 18px; border-radius: 9px; cursor: pointer; font-family: inherit; }
.btn-create { background: linear-gradient(135deg, var(--accent), var(--purple)); color: var(--color-text-primary); font-size: .85rem; font-weight: var(--font-weight-bold); padding: 9px 20px; border-radius: 9px; cursor: pointer; border: none; font-family: inherit; }
/* Mobile topbar: hidden on desktop, shown only on mobile */
.mobile-topbar { display: none; }
/* Books grid */
.page-wrapper { max-width: none !important; margin: 0 !important; width: 100% !important; padding: 20px 24px 80px; box-sizing: border-box; }
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 20px 14px; width: 100%; }
.book-card { background: var(--card-bg, var(--color-bg-card)); border: 1px solid var(--color-border-soft); border-radius: 14px; padding: 10px 10px 12px; cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s, background .22s; display: flex; flex-direction: column; height: 100%; position: relative; }
.book-card:hover { transform: translateY(-2px); border-color: var(--color-selection-border); box-shadow: var(--shadow-2); background: var(--card-hover-bg, var(--color-surface-hover)); }
.book-cover-wrap { position: relative; padding-top: 150%; border-radius: 8px; overflow: hidden; margin-bottom: .85rem; }
.book-cover-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease, filter .28s ease; }
.book-card:hover .book-cover-wrap img { transform: scale(1.045); filter: brightness(1.04); }
.status-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: var(--font-weight-bold); background: rgba(50,46,64,.86); border: 1px solid rgba(182,145,255,.25); z-index: 2; color:var(--color-accent-secondary); }
.book-card-meta { display: flex; flex-direction: column; flex: 1; transition: transform .2s ease; }
.book-card:hover .book-card-meta { transform: translateY(-1px); }
.book-card-header { display: flex; align-items: flex-start; gap: 4px; }
.book-title-toggle { flex: 1; background: none; border: none; color: var(--text-primary); text-align: left; cursor: pointer; padding: 0; font-family: inherit; }
.book-title-toggle-row { display: flex; align-items: flex-start; gap: 4px; }
.book-title { font-size: 1rem; font-weight: var(--font-weight-bold); line-height: 1.2; margin: 0; font-family: var(--font-display); color:var(--color-text-primary); }
.book-title-toggle-icon { font-size: .8rem; flex-shrink: 0; margin-top: 3px; transition: transform .2s; color: var(--text-muted); }
.book-card.is-expanded .book-title-toggle-icon { transform: rotate(180deg); }
.book-author { font-size: .82rem; color: var(--color-text-secondary); margin: .35rem 0 .2rem; min-height: 2.2em; }
.book-card-stars { margin: .2rem 0; }
.book-card-actions { display: none; flex-direction: column; gap: 6px; margin-top: .5rem; }
.book-card.is-expanded .book-card-actions { display: flex; }
.btn-report { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: .2rem; transition: color .2s; flex-shrink: 0; }
.btn-report:hover { color: var(--error); }
/* Book list view */
.book-list-item { display: flex; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; align-items: stretch; width: 100%; box-sizing: border-box; }
.book-list-item:hover { background: var(--color-hover-neutral); }
.book-list-item .status-badge { position: relative; top: auto; right: auto; background: none; border: none; padding: 0; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.book-list-cover { width: 56px; min-width: 56px; height: 84px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.book-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.book-list-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.book-list-item .book-title { font-size: 0.95rem; margin: 0; }
.book-list-item .book-author { margin: 0.2rem 0 0.3rem; }
.book-list-actions { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.book-list-synopsis { font-size: .82rem; color: var(--text-secondary); margin: .4rem 0 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--text-muted); }
.empty-state-icon { font-size: 3.5rem; margin-bottom: 1rem; color: var(--accent2); opacity: .6; }
.empty-state-title { font-size: 1.2rem; font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: .5rem; }
.empty-state-message { font-size: .9rem; margin-bottom: 1.5rem; max-width: 400px; }
.empty-state-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
/* Btn shared */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 9px; font-family: inherit; font-size: .85rem; font-weight: var(--font-weight-semibold); cursor: pointer; border: none; transition: opacity .15s, background .15s; }
.btn-primary { background: var(--accent); color: var(--color-text-primary); }
.btn-primary:hover { opacity: .88; }
.btn-secondary { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent2); }
/* Status select */
.status-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; font-size: .82rem; padding: .38rem .55rem; cursor: pointer; font-family: inherit; width: 100%; }
/* Inline rating */
.inline-rating { display: inline-flex; gap: 2px; }
.inline-rating-star { font-size: .9rem; cursor: pointer; color: var(--star-inactive); }
/* Shelf highlight */
.shelf-book-highlight { animation: shelfHighlight 2.2s ease; }
@keyframes shelfHighlight { 0%,100% { box-shadow: none; } 20%,80% { box-shadow: 0 0 0 2px rgba(124,58,237,.26), 0 10px 26px rgba(0,0,0,.18); } }
/* Review input (select/etc) */
.review-input { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: .5rem .8rem; font-family: inherit; font-size: .9rem; transition: border-color .15s; width: 100%; }
.review-input:focus { border-color: var(--accent); }
@media (hover: none) and (pointer: coarse) {
.book-card:active { transform: translateY(-2px) scale(1.01); border-color: rgba(124,58,237,.22); box-shadow: 0 16px 28px rgba(5,10,24,.16); background: var(--card-hover-bg, var(--color-surface-hover)); }
.book-card:active .book-cover-wrap img { transform: scale(1.04); filter: brightness(1.04); }
.book-card:active .book-card-meta { transform: translateY(-1px); }
}
@media (max-width: 1099px) {
.sidebar { display: none; }
.mobile-topbar { display: flex; }
.page-wrapper { padding: 16px 12px 80px; }
.books-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.topnav { display: none; }
}
html.light .sidebar,
html.light .content-toolbar,
html.light .modal,
html.light .mobile-sort-sheet,
html.light .book-card,
html.light .shelf-item.active,
html.light .atl-modal-overlay .modal,
html.light .bem-modal,
html.light .shelf-chip.active {
box-shadow: none;
}
html.light .sidebar,
html.light .content-toolbar,
html.light .modal,
html.light .mobile-sort-sheet,
html.light .mobile-lists-sheet {
background: var(--color-glass-bg);
border-color: var(--color-border);
}
html.light .toolbar-bulk-group,
html.light .view-toggle,
html.light .shelf-chip,
html.light .toolbar-search-input,
html.light .toolbar-sort-select,
html.light .toolbar-inline-select,
html.light .form-input,
html.light .vis-opt,
html.light .status-select,
html.light .review-input,
html.light .mobile-view-toggle,
html.light .mobile-sort-btn,
html.light .mobile-topbar-add,
html.light .mobile-list-action,
html.light .book-card,
html.light .bem-book-info,
html.light .bem-list-item,
html.light .book-list-item,
html.light .shelf-count,
html.light #shelfSearchDropdown,
html.light .estante-add-list-results,
html.light #listBookSearchDropdown {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
}
html.light .book-card:hover,
html.light .book-list-item:hover,
html.light .shelf-item:hover,
html.light .vis-opt:hover,
html.light .vis-opt.selected {
background: var(--color-bg-elevated);
border-color: var(--color-border-input);
color: var(--color-accent-primary);
}
html.light .shelf-item.active,
html.light .view-btn.active,
html.light .shelf-chip.active,
html.light .list-mode-badge {
background: var(--color-accent-muted);
border-color: var(--color-border-input);
color: var(--color-accent-primary);
}
html.light .view-btn.active,
html.light .shelf-chip.active {
background-image: none;
color: var(--color-accent-primary);
}
html.light .create-list-btn,
html.light .btn-add-shelf {
background: var(--gradient-cta);
box-shadow: var(--shadow-2);
}
html.light .sidebar-list-card,
html.light .sidebar-list-cover-slot,
html.light .sidebar-list-edit-btn {
background: var(--color-bg-surface);
border-color: var(--color-border);
}
html.light .sidebar-list-card:hover,
html.light .sidebar-list-card.active {
background: var(--color-bg-elevated);
}
html.light .sidebar {
background: var(--color-bg-surface);
border-color: var(--color-border);
}
html.light .sidebar-list-private {
background: var(--color-surface-subtle-hover);
}
html.light .mobile-topbar {
background: var(--color-topnav-bg);
border-bottom-color: var(--color-border);
}
html.light .mobile-list-item {
border-bottom-color: rgba(98,112,156,.18);
}
html.light .mobile-list-count {
background: rgba(124,58,237,.08);
color: var(--color-text-secondary);
}
html.light .mobile-list-action {
background: rgba(124,58,237,.06);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
html.light .mobile-list-action:hover,
html.light .mobile-list-action:active {
background: var(--color-bg-elevated);
border-color: var(--color-border-input);
color: var(--color-accent-primary);
}
html.light .mobile-lists-footer {
background: var(--color-glass-bg);
border-top: 1px solid var(--color-border);
}
html.light .mobile-new-list-btn {
background: rgba(124,58,237,.08);
border-color: rgba(124,58,237,.18);
color: var(--color-accent-primary);
}
html.light .empty-state {
color: var(--color-text-secondary);
}
html.light .btn-secondary,
html.light .btn-cancel,
html.light .bem-remove-btn {
background: var(--color-bg-surface);
}
html.light .content-title,
html.light .shelf-stat-value {
color: var(--color-text-primary);
}
html.light .mobile-shelf-filters {
background: var(--color-bg-base);
}
html.light .mobile-shelf-filter-chip {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text-secondary);
}
html.light .mobile-shelf-filter-chip:hover {
border-color: var(--color-border-input);
color: var(--color-text-primary);
}
html.light .mobile-shelf-filter-chip[aria-selected="true"] {
background: var(--color-accent-muted);
border-color: var(--color-border-input);
color: var(--color-accent-primary);
box-shadow: inset 0 0 0 1px rgba(124,58,237,.10);
}
html.light .mobile-shelf-filter-chip__count {
background: rgba(124,58,237,.08);
}
html.light .shelf-count-badge,
html.light .genre-chip,
html.light .shelf-stat-card,
html.light .view-btn,
html.light .reading-sidebar-mode-chip,
html.light .reading-sidebar-input {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
}
html.light .genre-chip.active,
html.light .reading-sidebar-mode-chip.active {
background: var(--color-selection-bg);
border-color: var(--color-border-input);
color: var(--color-text-primary);
}
html.light .status-badge {
background: rgba(124,58,237,.10);
border-color: rgba(124,58,237,.18);
color: var(--color-accent-primary);
}
html.light .book-title {
color: var(--color-text-primary);
}
html.light .book-author {
color: var(--color-text-secondary);
}
html.light .btn-edit-book {
background: rgba(255,255,255,.92);
border-color: rgba(98,112,156,.18);
color: var(--color-text-primary);
}
html.light .btn-edit-book:hover {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: var(--color-text-primary);
}
html.light .genre-chip-label,
html.light .shelf-stat-label,
html.light .shelf-section-title,
html.light .shelf-section-count,
html.light .reading-sidebar-total {
color: var(--color-text-muted);
}
html.light .view-btn:hover,
html.light .reading-sidebar-mode-chip:hover {
background: var(--color-bg-elevated);
border-color: var(--color-border-input);
color: var(--color-accent-primary);
}
/* ── Current Reading Card — light mode ── */
html.light .current-reading-card {
background: linear-gradient(160deg, var(--color-bg-card), var(--color-bg-content));
border-color: var(--color-border-subtle);
}
html.light .current-reading-kicker { color: var(--color-text-muted); }
html.light .current-reading-kicker-dot { background: var(--color-progress-fill); }
html.light .current-reading-edit-btn { background: rgba(124,58,237,.10); color: var(--color-accent-primary); }
html.light .current-reading-edit-btn:hover { background: rgba(124,58,237,.18); color: var(--color-accent-primary); }
html.light .current-reading-title { color: var(--color-text-primary); }
html.light .current-reading-author { color: var(--color-text-secondary); }
html.light .current-reading-pages { color: var(--color-text-muted); }
html.light .current-reading-progress-label { color: var(--color-text-secondary); }
html.light .current-reading-progress-pct { color: var(--color-text-secondary); }
html.light .current-reading-progressline { background: var(--color-progress-track); }
html.light .current-reading-progressline span { background: var(--color-progress-fill); }
html.light .current-reading-cover { background: var(--color-accent-muted); }
html.light .current-reading-cover--placeholder { background: var(--color-accent-muted); }
html.light .current-reading-btn { background: var(--gradient-accent); color: var(--color-text-primary); }
html.light .current-reading-btn:hover { opacity:.88; }
html.light .reading-sidebar-input-group {
background: var(--color-surface-subtle);
border-color: var(--color-border-subtle);
}
html.light .reading-sidebar-input-group .reading-sidebar-input { color: var(--color-text-primary); }
html.light .reading-sidebar-stepper { color: var(--color-text-muted); }
html.light .reading-sidebar-stepper:hover { color: var(--color-accent-primary); }
html.light .reading-sidebar-total { color: var(--color-text-muted); }
/* ── Reading History — light mode ── */
html.light .reading-history-preview {
background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));
border-color: var(--color-border-subtle);
}
html.light .reading-history-preview:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
html.light .reading-history-preview-kicker { color: var(--color-text-muted); }
html.light .reading-history-preview-pill { color: var(--color-text-secondary); background: var(--color-surface-subtle-hover); }
html.light .reading-history-pill { background:var(--color-surface-subtle-hover); border-color:var(--color-border-subtle); }
html.light .reading-history-pill strong { color:var(--color-text-primary); }
html.light .reading-history-chart { background:var(--color-surface-subtle); border-color:var(--color-border-subtle); }
html.light .reading-history-tooltip { background:var(--color-bg-surface); border-color:var(--color-border-subtle); color:var(--color-text-secondary); }
html.light .rh-tip-date { color:rgba(55,65,81,.5); }
html.light .rh-tip-total { color:var(--color-text-primary); }
html.light .rh-tip-book { color:rgba(55,65,81,.7); }
html.light .rh-legend-item { color:var(--text-secondary); }
html.light .reading-history-period-btn { background:var(--color-surface-subtle-hover); border-color:var(--color-border-subtle); color:var(--color-text-secondary); }
html.light .reading-history-period-btn.active { background:var(--color-selection-bg); border-color:var(--color-selection-border); color:var(--color-text-primary); }
/* Extracted from templates/estante.html (style block 2) */
#shelfSearchDropdown::-webkit-scrollbar { width: 8px; }
#shelfSearchDropdown::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
#shelfSearchDropdown::-webkit-scrollbar-track { background: var(--bg-surface); }
/* Extracted from templates/estante.html (style block 3) */
.estante-add-list-results::-webkit-scrollbar { width: 8px; }
.estante-add-list-results::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.estante-add-list-results::-webkit-scrollbar-track { background: var(--bg-surface); }
/* ── Extra-small estante (≤ 359px) ────────────────────────── */
@media (max-width: 359px) {
.mobile-shelf-filters {
gap: .45rem;
padding-inline: .75rem;
}
.mobile-shelf-filter-chip {
padding: .5rem .72rem;
font-size: .76rem;
}
.mobile-shelf-filter-chip__count {
min-width: 1.6rem;
font-size: .68rem;
}
.toolbar-wrap {
padding: 0.5rem;
}
.toolbar-chips {
gap: 0.35rem;
}
.cover-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.65rem;
}
}
/* ── Large estante (≥ 1440px) ─────────────────────────────── */
@media (min-width: 1440px) {
.cover-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* ── Extra-large estante (≥ 1920px) ───────────────────────── */
@media (min-width: 1920px) {
.cover-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.5rem;
}
}
/* ── Skeleton loading ──────────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: -800px 0; }
100% { background-position: 800px 0; }
}
.skeleton-block {
background: linear-gradient(90deg, var(--bg-surface) 25%, rgba(255,255,255,.06) 50%, var(--bg-surface) 75%);
background-size: 1600px 100%;
animation: skeleton-shimmer 1.8s infinite linear;
border-radius: 6px;
}
.skeleton-text-line {
height: 13px;
margin-top: 8px;
border-radius: 4px;
}
.skeleton-text-line.short {
width: 65%;
}
/* ══════════════════════════════════════════════
LISTA RECOMENDADA — Painel de gerenciamento (estante)
══════════════════════════════════════════════ */
.inf-list-panel.modal-overlay {
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
}
@media (min-width: 640px) {
.inf-list-panel.modal-overlay {
align-items: center;
}
}
.inf-list-panel__inner {
background: var(--color-bg-modal);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
width: 100%;
max-width: 560px;
max-height: 92vh;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 0 0 env(safe-area-inset-bottom, 0);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.inf-list-panel__inner--search-popover {
overflow: visible;
}
.inf-list-panel__inner--search-popover .inf-list-panel__body,
.inf-list-panel__inner--search-popover .inf-list-search-wrap,
.inf-list-panel__inner--search-popover .inf-list-search-row {
overflow: visible;
}
@media (min-width: 640px) {
.inf-list-panel__inner {
border-radius: var(--radius-xl);
max-height: 88vh;
}
}
.inf-list-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
background: var(--color-bg-modal);
z-index: 1;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.inf-list-panel__title {
font-size: 1rem;
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--color-text-primary);
}
.inf-list-panel__count {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-muted);
background: var(--color-bg-surface);
border-radius: 999px;
padding: 0.1rem 0.5rem;
margin-left: 0.25rem;
}
.inf-list-panel__close {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 1.25rem;
padding: 0.25rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
}
.inf-list-panel__close:hover {
background: var(--color-hover-neutral);
}
.inf-list-panel__body {
padding: 1rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.inf-list-panel__intro {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.inf-list-panel__loading,
.inf-list-panel__error {
padding: 2rem;
text-align: center;
color: var(--color-text-secondary);
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* Form */
.inf-list-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.inf-list-form--meta {
padding: 0.75rem 0 0.25rem;
}
.inf-list-label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.inf-list-input {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-size: 0.875rem;
font-family: inherit;
padding: 0.5rem 0.75rem;
width: 100%;
box-sizing: border-box;
transition: border-color 0.15s;
}
.inf-list-input:focus {
outline: none;
border-color: var(--color-accent-primary);
}
.inf-list-hint {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.inf-list-optional {
font-weight: 400;
color: var(--color-text-muted);
font-size: 0.75rem;
}
.inf-list-submit-btn {
align-self: flex-start;
}
.inf-list-form__row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Details/summary */
.inf-list-details {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.inf-list-details__summary {
padding: 0.6rem 0.875rem;
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
list-style: none;
background: var(--color-bg-surface);
user-select: none;
}
.inf-list-details__summary::-webkit-details-marker { display: none; }
.inf-list-details[open] .inf-list-details__summary {
border-bottom: 1px solid var(--color-border);
}
.inf-list-details .inf-list-form--meta {
padding: 0.875rem;
}
/* Busca de livros */
.inf-list-search-wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.875rem;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 14px);
}
.inf-list-search-row {
position: relative;
}
.inf-list-autocomplete {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-modal);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
list-style: none;
margin: 0.35rem 0 0;
padding: 0.25rem 0;
z-index: 40;
max-height: 260px;
overflow-y: auto;
box-shadow: var(--shadow-2);
}
.inf-list-autocomplete__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.875rem;
cursor: pointer;
transition: background 0.1s;
}
.inf-list-autocomplete__item:hover,
.inf-list-autocomplete__item:focus {
background: var(--color-bg-hover, rgba(255,255,255,0.06));
outline: none;
}
.inf-list-autocomplete__item img {
border-radius: 2px;
object-fit: cover;
flex-shrink: 0;
background: var(--color-bg-elevated);
}
.inf-list-autocomplete__text {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.inf-list-autocomplete__text strong {
font-size: 0.875rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inf-list-autocomplete__text small {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.inf-list-selected-slot {
display: flex;
flex-direction: column;
}
.inf-list-selected {
display: flex;
flex-direction: column;
gap: 0.75rem;
background: var(--color-bg-modal);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.875rem;
}
.inf-list-selected--placeholder {
background: var(--color-bg-surface);
}
.inf-list-selected__card {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.inf-list-selected__cover {
width: 52px;
height: 78px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
background: var(--color-bg-elevated);
}
.inf-list-selected__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.inf-list-selected__title {
font-size: 0.9375rem;
line-height: 1.3;
color: var(--color-text-primary);
}
.inf-list-selected__author {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.inf-list-selected__synopsis {
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--color-text-secondary);
}
.inf-list-selected__comment {
min-height: 84px;
resize: vertical;
}
.inf-list-search-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
}
.inf-list-search-status {
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.4;
}
.inf-list-search-status--warning {
color: var(--color-warning);
}
/* Items da lista */
.inf-list-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.inf-list-empty {
text-align: center;
color: var(--color-text-muted);
font-size: 0.875rem;
padding: 1rem 0;
}
.inf-list-limit-msg {
font-size: 0.8125rem;
color: var(--color-warning);
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(224, 175, 104, 0.08);
border: 1px solid rgba(224, 175, 104, 0.25);
border-radius: var(--radius-sm);
padding: 0.5rem 0.75rem;
}
.inf-list-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.75rem;
}
.inf-list-item__cover {
width: 44px;
height: 66px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
background: var(--color-bg-modal);
}
.inf-list-item__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.inf-list-item__title {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inf-list-item__author {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.inf-list-item__comment-wrap {
position: relative;
margin-top: 0.35rem;
}
.inf-list-item__comment {
width: 100%;
box-sizing: border-box;
background: var(--color-bg-modal);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-family: inherit;
font-size: 0.8125rem;
padding: 0.4rem 0.6rem 1.25rem;
resize: none;
min-height: 60px;
transition: border-color 0.15s;
}
.inf-list-item__comment:focus {
outline: none;
border-color: var(--color-accent-primary);
}
.inf-list-item__comment-count {
position: absolute;
bottom: 0.35rem;
right: 0.5rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
pointer-events: none;
}
.inf-list-item__remove {
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
padding: 0.25rem;
border-radius: var(--radius-sm);
flex-shrink: 0;
display: flex;
align-items: center;
transition: color 0.15s;
}
.inf-list-item__remove:hover {
color: var(--color-error);
}
.inf-list-shelf {
display: flex;
flex-direction: column;
gap: 1rem;
}
.inf-list-shelf__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: linear-gradient(135deg, var(--color-bg-modal), var(--color-bg-elevated));
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}
.inf-list-shelf__hero--empty {
border-style: dashed;
}
.inf-list-shelf__hero-copy {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
.inf-list-shelf__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: var(--font-weight-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent-primary);
}
.inf-list-shelf__title {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.8rem);
line-height: 1.15;
color: var(--color-text-primary);
}
.inf-list-shelf__description {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 64ch;
}
.inf-list-shelf__meta {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.inf-list-shelf__meta span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-subtle);
color: var(--color-text-secondary);
font-size: 0.78rem;
}
.inf-list-shelf__hero-actions {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
gap: 0.5rem;
}
.inf-list-shelf__hint,
.inf-list-shelf__remaining {
margin: 0;
color: var(--color-text-muted);
font-size: 0.85rem;
line-height: 1.5;
}
.inf-list-shelf__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
align-items: start;
}
.inf-list-shelf-card,
.inf-list-shelf-slot {
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-bg-elevated);
min-height: 100%;
}
.inf-list-shelf-card {
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.inf-list-shelf-card__cover-wrap {
position: relative;
aspect-ratio: 1 / 1.25;
background: var(--color-bg-modal);
}
.inf-list-shelf-card__cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.inf-list-shelf-card__remove {
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(10, 12, 22, 0.72);
color: var(--color-text-primary);
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.inf-list-shelf-card__remove:hover {
transform: translateY(-1px);
background: rgba(127, 29, 29, 0.88);
}
.inf-list-shelf-card__body {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.9rem;
}
.inf-list-shelf-card__title {
font-size: 0.95rem;
line-height: 1.35;
color: var(--color-text-primary);
}
.inf-list-shelf-card__author {
color: var(--color-text-muted);
font-size: 0.8rem;
}
.inf-list-shelf-card__comment-label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.76rem;
color: var(--color-text-secondary);
margin-top: 0.2rem;
}
.inf-list-shelf-card__comment {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 94px;
padding: 0.65rem 0.75rem 1.4rem;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-bg-modal);
color: var(--color-text-primary);
font: inherit;
line-height: 1.5;
}
.inf-list-shelf-card__comment:focus {
outline: none;
border-color: var(--color-accent-primary);
}
.inf-list-shelf-card__comment-count {
align-self: flex-end;
margin-top: -1.45rem;
margin-right: 0.45rem;
font-size: 0.68rem;
color: var(--color-text-muted);
pointer-events: none;
}
.inf-list-shelf-card__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.76rem;
font-weight: var(--font-weight-semibold);
color: var(--color-accent-primary);
text-decoration: none;
}
.inf-list-shelf-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 100%;
padding: 1rem;
text-align: center;
color: var(--color-text-secondary);
}
.inf-list-shelf-slot--add {
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inf-list-shelf-slot--add:hover {
transform: translateY(-2px);
border-color: rgba(124, 58, 237, 0.4);
background: rgba(124, 58, 237, 0.08);
}
.inf-list-shelf-slot__plus {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(124, 58, 237, 0.16);
color: var(--color-accent-primary);
font-size: 1.35rem;
}
.inf-list-shelf-slot__label {
font-size: 0.95rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.inf-list-shelf-slot small {
color: var(--color-text-muted);
line-height: 1.45;
}
@media (max-width: 720px) {
.inf-list-shelf__hero {
flex-direction: column;
}
.inf-list-shelf__hero-actions {
width: 100%;
}
.inf-list-shelf__hero-actions .btn {
width: 100%;
justify-content: center;
}
}
/* Badge influencer no perfil */
.influencer-badge.influencer-badge--profile {
display: inline-block;
width: 18px;
height: 18px;
background: radial-gradient(circle, var(--color-warning) 0%, var(--color-warning) 100%);
border-radius: 50%;
vertical-align: middle;
margin-left: 4px;
position: relative;
}
.influencer-badge.influencer-badge--profile::after {
content: '';
position: absolute;
inset: 3px;
background: var(--color-bg-card);
border-radius: 50%;
background-image: none;
background-size: cover;
}
/* Tema claro */
.light-mode .inf-list-card {
background: var(--color-bg-surface);
border-color: var(--color-border);
}
.light-mode .inf-list-panel__inner,
.light-mode .inf-list-panel__header {
background: rgba(255, 255, 255, 0.98);
}
.light-mode .inf-list-input,
.light-mode .inf-list-item__comment {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.light-mode .inf-list-details,
.light-mode .inf-list-search-wrap,
.light-mode .inf-list-selected,
.light-mode .inf-list-item,
.light-mode .inf-list-shelf-card,
.light-mode .inf-list-shelf-slot {
background: var(--color-bg-elevated);
border-color: var(--color-border);
}
.light-mode .inf-list-selected--placeholder {
background: var(--color-bg-surface);
}
.light-mode .inf-list-shelf__hero {
background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));
border-color: var(--color-border);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
.light-mode .inf-list-shelf__meta span {
background: rgba(255, 255, 255, 0.88);
border-color: var(--color-border);
}
.light-mode .inf-list-shelf-card__comment {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.light-mode .inf-list-autocomplete {
background: var(--color-bg-surface);
border-color: var(--color-border);
}
.light-mode .inf-list-autocomplete__item:hover {
background: var(--color-bg-elevated);
}
.light-mode .inf-list-selected__cover,
.light-mode .inf-list-item__cover {
background: var(--color-border);
}
/* =========================================
Extraído de estante-page.css — Sprint 4
Classes exclusivas não presentes em estante.css
========================================= */
/* ── Shelf search / autocomplete ── */
.shelf-search-item {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.6rem 0.8rem;
cursor: pointer;
border-bottom: 1px solid var(--border-color);
transition: background 0.15s;
}
.shelf-search-item:last-child { border-bottom: none; }
.shelf-search-item-cover {
width: 32px;
height: 48px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.shelf-search-item-body { flex: 1; min-width: 0; }
.shelf-search-item-title {
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shelf-search-item-author { font-size: 0.78rem; color: var(--text-secondary); }
/* ── Shelf mobile autocomplete list items ── */
.shelf-list-item {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 0.5rem;
cursor: pointer;
}
.shelf-list-item-cover {
width: 36px;
height: 54px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
/* ── Login gate inner elements ── */
.login-gate i {
font-size: 4rem;
color: var(--accent-primary);
margin-bottom: 1rem;
display: block;
}
.login-gate h2 {
font-family: var(--font-display);
font-size: 2rem;
margin-bottom: 1rem;
}
.login-gate p { color: var(--text-secondary); margin-bottom: 2rem; }
.login-gate p + p { margin-top: 1rem; margin-bottom: 0; }
.login-gate a { color: var(--accent-primary); }
/* ── Status date modal ── */
.status-date-modal-box {
width: min(460px, 100%);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1rem 1rem 1.1rem;
box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.status-date-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.72);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-loader);
padding: 1rem;
}
.status-date-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.7rem;
}
.status-date-modal-title { margin: 0; font-size: 1.02rem; color: var(--text-primary); }
.status-date-cancel-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.2rem;
cursor: pointer;
}
.status-date-modal-hint { margin: 0 0 0.8rem; color: var(--text-secondary); font-size: 0.86rem; }
.status-date-fields-wrap { display: grid; gap: 0.7rem; }
.status-date-fields-wrap--single { grid-template-columns: 1fr; }
.status-date-fields-wrap--double { grid-template-columns: 1fr 1fr; }
.status-date-footer {
display: flex;
justify-content: flex-end;
gap: 0.55rem;
margin-top: 1rem;
}
/* ── Shelf misc loading spans ── */
.shelf-loading-span { color: var(--text-muted); font-size: 0.82rem; }
.shelf-loading-span--italic { color: var(--text-muted); font-size: 0.82rem; font-style: italic; }
.shelf-loading-span--error { color: var(--error); font-size: 0.82rem; }
.book-list-grid--list { display: block; gap: 0; }
.add-to-list-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .85rem; }
.add-to-list-loading { padding: 1rem; text-align: center; }
.add-to-list-item { display: flex; gap: .75rem; align-items: center; padding: .55rem .8rem; border-bottom: 1px solid var(--border); transition: background .12s; }
.add-to-list-cover { width: 30px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.add-to-list-info { flex: 1; min-width: 0; }
.add-to-list-title { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-to-list-author { font-size: .76rem; color: var(--text-muted); }
.btn-add-to-list { background: var(--color-accent-muted); border: 1px solid var(--color-interactive-border-strong); color: var(--accent2); font-size: .76rem; font-weight: 700; border-radius: 7px; padding: 4px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-add-to-list:disabled { opacity: .5; cursor: default; }
.list-book-selected-item { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.list-book-selected-cover { width: 24px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.list-book-selected-title { flex: 1; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-book-selected-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0; flex-shrink: 0; }
.list-book-search-item { display: flex; gap: 8px; align-items: center; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; }
.list-book-search-item.is-disabled { opacity: .5; pointer-events: none; }
.list-book-search-cover { width: 24px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.list-book-search-text { min-width: 0; }
.list-book-search-title { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-book-search-author { font-size: .74rem; color: var(--text-muted); }
.list-book-search-check { margin-left: auto; color: var(--success); flex-shrink: 0; }
.import-list-option { padding: 8px 12px; cursor: pointer; font-size: .86rem; border-bottom: 1px solid var(--border); transition: background .1s; }
.import-list-option:hover { background: var(--color-accent-muted); }
.import-list-meta { font-size: .76rem; color: var(--text-muted); }
.import-list-badge { background: var(--color-accent-muted); border: 1px solid var(--color-interactive-border-strong); color: var(--accent2); font-size: .76rem; border-radius: 20px; padding: 3px 10px; }