/* ── Hero ── */
.spreads-hero { padding: 2.5rem 0 2rem; text-align: center; position: relative; overflow: hidden; }
.spreads-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,.06) 0%, transparent 70%); pointer-events: none; }
.hero-tag { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; display: inline-block; }
.hero-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--text); margin-bottom: .75rem; }
.hero-subtitle { font-size: 1rem; color: var(--muted); max-width: 520px; margin: 0 auto; font-weight: 300; line-height: 1.7; }

/* ── Toolbar ── */
.toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-wrap .bi-search { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
.search-input { width: 100%; padding: .55rem 1rem .55rem 2.25rem; border: 1px solid var(--border); border-radius: 8px; font-family: 'Raleway', sans-serif; font-size: .9rem; background: var(--light-2); color: var(--text); outline: none; transition: border-color .2s; }
.search-input:focus { border-color: var(--purple); }
.btn-purple { background: var(--purple); color: #fff; border: none; border-radius: 8px; padding: .55rem 1.25rem; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; cursor: pointer; text-decoration: none; transition: opacity .2s; display: inline-flex; align-items: center; gap: .4rem; }
.btn-purple:hover { opacity: .88; color: #fff; }
.btn-outline { background: transparent; color: var(--purple); border: 1px solid var(--border); border-radius: 8px; padding: .55rem 1.25rem; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; cursor: pointer; text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: .4rem; }
.btn-outline:hover { border-color: var(--purple); background: rgba(124,58,237,.05); color: var(--purple); }

/* ── Spread cards ── */
.spread-list { display: flex; flex-direction: column; gap: 1rem; }
.spread-card { background: var(--light-2); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1.75rem; display: flex; gap: 1.25rem; align-items: flex-start; transition: border-color .2s, box-shadow .2s; }
.spread-card:hover { border-color: rgba(124,58,237,.35); box-shadow: 0 4px 20px rgba(124,58,237,.08); }
.spread-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: .1rem; }
.spread-body { flex: 1; min-width: 0; }
.spread-title { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--text); margin-bottom: .35rem; text-decoration: none; display: block; }
.spread-title:hover { color: var(--purple); }
.spread-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spread-meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.meta-pill { font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 50px; background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25); color: var(--purple); }
.meta-pill.gold { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.25); color: var(--gold); }
.spread-actions { display: flex; gap: .5rem; flex-shrink: 0; align-items: flex-start; flex-wrap: wrap; }
.btn-play { background: var(--purple); color: #fff; border: none; border-radius: 8px; padding: .45rem 1rem; font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .1em; cursor: pointer; text-decoration: none; transition: opacity .2s; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.btn-play:hover { opacity: .88; color: #fff; }
.btn-edit { background: transparent; color: var(--purple); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .9rem; font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .1em; cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.btn-edit:hover { border-color: var(--purple); background: rgba(124,58,237,.05); color: var(--purple); }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 5rem 1rem; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--muted); opacity: .5; }
.empty-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--muted); margin-bottom: .5rem; }
.empty-sub { font-size: .88rem; color: var(--muted); opacity: .7; }

/* ── Pagination ── */
.pager-wrap .page-link { background: var(--light-2); border-color: var(--border); color: var(--purple); }
.pager-wrap .page-link:hover { background: var(--light-3); color: var(--purple); border-color: rgba(124,58,237,.45); }
.pager-wrap .page-item.active .page-link { background: var(--purple); border-color: var(--purple); color: #fff; }
.pager-wrap .page-item.disabled .page-link { background: var(--light-2); border-color: var(--border); color: var(--muted); opacity: .5; }

/* ── Flash ── */
.flash-success { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); color: var(--purple); border-radius: 10px; padding: .75rem 1.25rem; margin-bottom: 1.5rem; font-size: .9rem; }