:root {
  --bg: #09130f;
  --bg-deep: #060d0a;
  --forest: #0f1e18;
  --forest-soft: #132720;
  --forest-panel: rgba(12, 27, 21, 0.92);
  --forest-panel-soft: rgba(15, 31, 24, 0.72);
  --walnut: #5a3a28;
  --walnut-soft: #7a543b;
  --gold: #d2a56c;
  --gold-soft: rgba(210, 165, 108, 0.16);
  --rose: #d27e99;
  --text: #f6efe5;
  --muted: #cabba7;
  --line: rgba(231, 215, 185, 0.10);
  --line-strong: rgba(231, 215, 185, 0.16);
  --success: rgba(112, 185, 138, 0.18);
  --success-line: rgba(112, 185, 138, 0.32);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(210, 165, 108, 0.12), transparent 24%),
    radial-gradient(circle at top right, rgba(63, 102, 82, 0.12), transparent 26%),
    linear-gradient(180deg, #102019 0%, var(--bg) 42%, var(--bg-deep) 100%);
}
body.modal-open { overflow: hidden; }
body::before,
body::after {
  content: '';
  position: fixed;
  inset: auto;
  width: 42vw;
  height: 42vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.14;
  background: radial-gradient(circle, rgba(245, 239, 229, 0.20) 0%, rgba(245, 239, 229, 0.08) 24%, transparent 62%);
  animation: smokeFloat 18s ease-in-out infinite;
}
body::before { top: 14%; left: -8%; }
body::after { top: 54%; right: -10%; animation-delay: -9s; }
@keyframes smokeFloat { 0%,100% { transform: translate3d(0,0,0) scale(1);} 50% { transform: translate3d(18px,-16px,0) scale(1.08);} }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.page-shell {
  position: relative; z-index: 1; width: min(1360px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 52px;
}
.page-shell.narrow { width: min(960px, calc(100% - 40px)); }
.card {
  position: relative; background: linear-gradient(180deg, rgba(12, 28, 21, 0.96), rgba(8, 18, 14, 0.98)); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden;
}
.ornate::before {
  content: ''; position: absolute; inset: 14px; border: 1px solid rgba(231, 215, 185, 0.08); border-radius: calc(var(--radius-xl) - 10px); pointer-events: none;
}
.hero-shell, .form-card, .library-card, .empty-state, .edit-shell, .library-hero-page, .library-room { padding: 28px; }
.hero-shell {
  background: linear-gradient(180deg, rgba(13, 31, 23, 0.96), rgba(8, 20, 15, 0.98)), radial-gradient(circle at 18% 16%, rgba(210, 165, 108, 0.08), transparent 22%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.85fr); gap: 28px; align-items: stretch;
}
.hero-copy { display: grid; align-content: center; gap: 14px; padding: 8px 4px 8px 2px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.eyebrow, .hero-text, .stat-label, .section-head p, .meta, .author, .field-help, .subsection-head p, .recent-panel li span, .back-link, .library-head p, .filter-intro p, .shelf-note {
  color: var(--muted);
}
.eyebrow { margin:0; font-size:0.95rem; letter-spacing:0.02em; }
.hero-copy h1, .section-head h1, .section-head h2, .library-head h2, .subsection-head h3, .entry-card h3, .recent-panel h2, .library-hero-top h1, .book-detail-copy h2 {
  font-family: Georgia, 'Times New Roman', serif; letter-spacing:0.01em;
}
.hero-copy h1 { margin:0; max-width:11ch; font-size:clamp(3rem,5.2vw,4.8rem); line-height:0.98; }
.hero-text { margin:0; max-width:64ch; font-size:1.05rem; line-height:1.72; }
.hero-stats { display:grid; gap:14px; }
.stat-card, .recent-panel, .search-results, .entry-card, .favorite-toggle, .check-card, .filter-panel, .library-overview-cards .stat-card, .book-detail-card {
  background: linear-gradient(180deg, rgba(8, 18, 13, 0.56), rgba(8, 15, 12, 0.34)); border: 1px solid rgba(231, 215, 185, 0.08);
}
.stat-card { border-radius:18px; padding:18px; }
.stat-card strong { display:block; margin-top:8px; font-size:clamp(1.8rem,2.8vw,2.7rem); }
.recent-panel { border-radius:22px; padding:20px; }
.recent-panel h2 { margin:0 0 12px; font-size:1.5rem; }
.recent-panel ul { margin:0; padding-left:18px; display:grid; gap:10px; }
.recent-panel li { line-height:1.45; }
.flash { margin:16px 0 0; padding:14px 18px; border-radius:16px; border:1px solid var(--line-strong); }
.flash.success { background: rgba(65, 131, 95, 0.18); }
.flash.error { background: rgba(145, 54, 54, 0.24); }
.app-grid { display:grid; grid-template-columns:minmax(340px, 410px) minmax(0, 1fr); gap:24px; align-items:start; margin-top:24px; }
.form-card { position:sticky; top:18px; }
.form-card::after { content:''; position:absolute; right:-46px; bottom:-36px; width:180px; height:180px; background:radial-gradient(circle, rgba(210,165,108,0.14), transparent 62%); pointer-events:none; }
.library-card {
  background: linear-gradient(180deg, rgba(12, 28, 21, 0.96), rgba(8, 18, 14, 0.98)), url('/public/bookshelf-bg.svg') center 120px / cover no-repeat;
}
.section-head, .library-head, .entry-form, .subsection-head, .entries-grid, .empty-state.simple-empty { position:relative; z-index:1; }
.section-head { margin-bottom:22px; }
.section-head h1, .section-head h2, .library-head h2, .library-hero-top h1 { margin:0 0 8px; font-size:clamp(2.2rem,3vw,3rem); line-height:1.02; }
.section-head p, .library-head p { margin:0; line-height:1.65; }
.library-head { margin-bottom:14px; }
.entry-form { display:grid; gap:18px; }
.field-grid { display:grid; gap:14px; }
.field-grid.two-col, .form-details-grid, .filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.field, .entry-content, .entry-topline > div, .filter-field { min-width:0; }
.field label, .filter-form label { display:block; margin-bottom:8px; font-weight:700; color:#fff4e3; }
.field input, .field textarea, .field select, .filter-form select {
  width:100%; min-width:0; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,244,225,0.08); background: rgba(4,10,8,0.74); color: var(--text); outline:none;
}
.field textarea { min-height:128px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .filter-form select:focus { border-color:rgba(210,165,108,0.48); box-shadow:0 0 0 4px rgba(210,165,108,0.12); }
.date-input-wrap { position:relative; }
.date-input-wrap input[type='date'] { padding-right:48px; color-scheme: dark; }
.date-input-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); opacity:0.88; pointer-events:none; }
input[type='date']::-webkit-calendar-picker-indicator { opacity:0.01; position:absolute; right:12px; width:28px; height:28px; cursor:pointer; }
.field-help { margin:8px 0 0; font-size:0.92rem; line-height:1.5; }
.search-results { display:none; margin-top:10px; padding:10px; border-radius:20px; }
.search-results.visible { display:grid; gap:8px; }
.search-item { display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; width:100%; border:0; color:inherit; text-align:left; background:transparent; padding:10px; border-radius:14px; cursor:pointer; }
.search-item:hover { background: rgba(210,165,108,0.08); }
.search-item img, .search-item .placeholder { width:48px; height:72px; object-fit:cover; border-radius:10px; background:rgba(210,165,108,0.10); }
.search-item strong { display:block; }
.search-item span { color:var(--muted); font-size:0.92rem; }
.field-rating-block { padding:18px; border-radius:22px; border:1px solid rgba(231,215,185,0.08); background:linear-gradient(180deg, rgba(17,32,25,0.72), rgba(10,18,14,0.50)); }
.rating-row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.star-rating { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:48px; }
.star-button { border:0; background:transparent; color:rgba(240,234,223,0.24); cursor:pointer; font-size:2.2rem; line-height:1; padding:0; transition:transform .15s ease, color .15s ease, text-shadow .15s ease; }
.star-button:hover, .star-button:focus, .star-button.active { color:#f5c57a; text-shadow:0 0 18px rgba(245,197,122,0.18); }
.star-button:hover, .star-button:focus { transform:translateY(-1px) scale(1.05); }
.favorite-toggle { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 16px; border-radius:999px; cursor:pointer; align-self:center; }
.favorite-toggle input { position:absolute; opacity:0; pointer-events:none; }
.favorite-toggle-heart { display:grid; place-items:center; width:100%; height:100%; line-height:1; font-size:1.15rem; color:#cf4866; text-shadow:0 0 16px rgba(207,72,102,0.18); opacity:0.82; transition:transform .15s ease, opacity .15s ease, filter .15s ease; }
.favorite-toggle-text { font-weight:700; color:var(--muted); }
.favorite-toggle-icon-only { width:52px; min-width:52px; padding:0; gap:0; }
.favorite-toggle-icon-only .favorite-toggle-heart { font-size:1.55rem; }
.favorite-toggle:hover .favorite-toggle-heart, .favorite-toggle input:checked + .favorite-toggle-heart { opacity:1; transform:scale(1.08); filter:saturate(1.18); }
.favorite-toggle input:checked + .favorite-toggle-heart + .favorite-toggle-text { color:var(--text); }
.filter-panel { position:relative; z-index:1; padding:16px 18px; border-radius:22px; background:linear-gradient(180deg, rgba(14,28,21,0.42), rgba(8,16,12,0.22)); backdrop-filter:blur(3px); }
.filter-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.filter-kicker { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; background:rgba(210,165,108,0.10); border:1px solid rgba(210,165,108,0.16); color:#efd0a6; font-size:0.82rem; font-weight:700; }
.filter-intro p { margin:0; font-size:0.9rem; }
.compact-filters { gap:10px; }
.filter-field { padding:10px 12px; border-radius:16px; background:rgba(8,16,12,0.20); border:1px solid rgba(231,215,185,0.06); }
.filter-field label { margin-bottom:6px; font-size:0.88rem; }
.filter-field select { padding:12px 14px; }
.filter-bottom-row { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.check-card { display:flex; gap:12px; align-items:center; flex:1 1 280px; padding:12px 14px; border-radius:16px; background:rgba(8,16,12,0.20); }
.check-card input { width:18px; height:18px; margin:0; accent-color:var(--gold); }
.check-card span { display:flex; flex-direction:column; gap:1px; }
.check-card small { color:var(--muted); }
.filter-actions, .entry-actions, .library-page-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:11px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(180deg, var(--gold) 0%, #a77341 100%); color:#1d140c; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,244,225,0.28), 0 8px 18px rgba(167,115,65,0.18); }
.btn-secondary { background:rgba(210,165,108,0.08); border-color:rgba(210,165,108,0.18); color:var(--text); }
.btn-ghost { background:transparent; border-color:rgba(255,243,225,0.10); color:var(--muted); }
.btn-full { width:100%; }
.subsection-head { margin:24px 0 14px; }
.subsection-head h3 { margin:0 0 4px; font-size:1.6rem; }
.subsection-head p { margin:0; }
.entries-grid { display:grid; gap:18px; }
.entries-grid-compact { margin-bottom:8px; }
.entry-card { display:grid; grid-template-columns:118px minmax(0,1fr); gap:18px; padding:18px; border-radius:24px; background:linear-gradient(180deg, rgba(10,20,15,0.76), rgba(8,15,12,0.52)); backdrop-filter:blur(2px); }
.entry-card-progress { background:linear-gradient(180deg, rgba(22,39,30,0.82), rgba(12,24,19,0.58)); }
.cover-wrap img, .cover-fallback { width:118px; height:170px; border-radius:18px; object-fit:cover; background:linear-gradient(160deg, rgba(210,165,108,0.18), rgba(90,58,40,0.22)); }
.cover-fallback { display:grid; place-items:center; font-size:2rem; }
.entry-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.status-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.status-pill, .favorite-icon { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 10px; border-radius:999px; font-size:0.82rem; font-weight:700; }
.status-pill.in-progress { background:var(--gold-soft); border:1px solid rgba(210,165,108,0.24); color:#f7cd8f; }
.status-pill.completed { background:var(--success); border:1px solid var(--success-line); color:#a6e8c2; }
.favorite-icon { min-width:32px; padding-inline:8px; background:rgba(210,126,153,0.14); border:1px solid rgba(210,126,153,0.24); }
.entry-card h3 { margin:0 0 6px; font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.08; }
.author, .meta { margin:0; }
.meta { margin-top:10px; }
.comment { margin:14px 0 16px; line-height:1.68; }
.rating { color:#f5c57a; font-size:1.08rem; white-space:nowrap; }
.empty-state.simple-empty { display:grid; place-items:center; min-height:180px; text-align:center; color:var(--muted); background:rgba(8,15,12,0.18); }
.inline-heart { margin-left:4px; }
.back-link { display:inline-block; margin-bottom:18px; }

.library-hero-page { margin-bottom: 20px; }
.library-hero-top { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; }
.library-overview-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:20px; }
.library-room { background: linear-gradient(180deg, rgba(12,28,21,0.96), rgba(8,18,14,0.98)), url('/public/bookshelf-bg.svg') center center / cover no-repeat; }
.shelf-note { margin-bottom: 16px; font-size: 0.95rem; }
.bookshelf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:18px 14px; align-items:end; }
.book-spine {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; min-height:220px; padding:14px 10px 12px; border-radius:14px 14px 8px 8px; border:1px solid rgba(255,244,225,0.10); color:var(--text); cursor:pointer;
  background: linear-gradient(180deg, hsl(var(--book-hue, 28) 34% 30%), hsl(var(--book-hue, 28) 38% 18%));
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.12), inset -2px 0 0 rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: shelfRise .45s ease both;
  animation-delay: calc(var(--book-delay, 0) * 60ms);
}
@keyframes shelfRise { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }
.book-spine:hover { transform: translateY(-4px); box-shadow: inset 2px 0 0 rgba(255,255,255,0.14), inset -2px 0 0 rgba(0,0,0,0.24), 0 14px 22px rgba(0,0,0,0.24); }
.book-spine.is-favorite { outline:1px solid rgba(210,126,153,0.45); }
.book-spine.is-progress { min-height:240px; }
.book-spine-top { width:100%; height:8px; border-radius:999px; background:rgba(255,244,225,0.18); }
.book-spine-title { writing-mode:vertical-rl; transform:rotate(180deg); font-family:Georgia, 'Times New Roman', serif; font-size:1rem; line-height:1.05; margin:auto; max-height:130px; overflow:hidden; }
.book-spine-author { writing-mode:vertical-rl; transform:rotate(180deg); font-size:0.74rem; color:rgba(255,244,225,0.72); }
.book-spine-heart { position:absolute; top:10px; right:8px; font-size:0.9rem; }
.book-modal { position:fixed; inset:0; z-index:30; display:none; }
.book-modal.is-open { display:block; }
.book-modal-backdrop { position:absolute; inset:0; background:rgba(4,8,7,0.66); backdrop-filter: blur(6px); }
.book-modal-dialog { position:relative; width:min(920px, calc(100% - 28px)); margin:4vh auto; padding:28px; border-radius:28px; background:linear-gradient(180deg, rgba(11,24,18,0.98), rgba(8,16,12,0.98)); border:1px solid var(--line-strong); box-shadow: var(--shadow); }
.book-modal-close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,244,225,0.10); background:rgba(255,255,255,0.04); color:var(--text); cursor:pointer; }
.book-open-anim { position:relative; width:220px; height:150px; margin:0 auto 20px; perspective:1000px; }
.book-open-cover, .book-open-pages { position:absolute; top:0; height:150px; border-radius:12px; }
.book-open-cover { width:86px; background:linear-gradient(180deg, #6c4730, #402619); box-shadow: inset 0 0 0 1px rgba(255,244,225,0.08); }
.book-open-cover-left { left:26px; transform-origin:left center; }
.book-open-cover-right { right:26px; transform-origin:right center; }
.book-open-pages { left:72px; width:76px; background:linear-gradient(180deg, #ede2cd, #d8ccb6); box-shadow:0 0 0 1px rgba(0,0,0,0.06); }
.book-open-anim.play .book-open-cover-left { animation: openLeft .55s ease forwards; }
.book-open-anim.play .book-open-cover-right { animation: openRight .55s ease forwards; }
@keyframes openLeft { from { transform: rotateY(0deg);} to { transform: rotateY(-70deg);} }
@keyframes openRight { from { transform: rotateY(0deg);} to { transform: rotateY(70deg);} }
.book-detail-card { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:18px; border-radius:24px; }
.book-detail-media img, .book-detail-fallback { width:220px; height:320px; border-radius:18px; object-fit:cover; background:linear-gradient(160deg, rgba(210,165,108,0.18), rgba(90,58,40,0.22)); }
.book-detail-fallback { display:grid; place-items:center; font-size:3rem; }
.book-detail-copy h2 { margin:0 0 8px; font-size:2rem; }

@media (max-width: 1180px) {
  .hero-grid, .app-grid { grid-template-columns:1fr; }
  .form-card { position:static; }
  .hero-copy h1 { max-width:13ch; }
}
@media (max-width: 860px) {
  .page-shell, .page-shell.narrow { width:min(100% - 24px, 100%); padding:18px 0 34px; }
  .hero-shell, .form-card, .library-card, .empty-state, .edit-shell, .library-hero-page, .library-room, .book-modal-dialog, .side-panel { padding:20px; }
  .hero-copy h1 { max-width:none; font-size:clamp(2.3rem, 10vw, 3.6rem); }
  .field-grid.two-col, .form-details-grid, .filter-grid, .entry-card, .library-overview-cards, .book-detail-card { grid-template-columns:1fr; }
  .rating-row, .filter-bottom-row, .entry-topline, .filter-actions, .entry-actions, .filter-intro, .library-hero-top, .library-head-compact { flex-direction:column; align-items:stretch; }
  .favorite-toggle, .btn, .btn-ghost, .btn-secondary, .btn-primary { width:100%; }
  .cover-wrap img, .cover-fallback, .book-detail-media img, .book-detail-fallback { width:100%; max-width:220px; height:240px; }
  .bookshelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-spine { min-height:170px; }
  .book-spine.is-progress { min-height:182px; }
  .book-spine-title { font-size:0.88rem; }
}

.app-grid-library-only {
  grid-template-columns: minmax(0, 1fr);
}

.library-head-compact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.library-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 22;
  background: rgba(2, 6, 4, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.panel-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.side-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 23;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 32, 24, 0.98), rgba(8, 20, 15, 0.99));
  border: 1px solid rgba(210, 165, 108, 0.22);
  border-radius: 28px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(210, 165, 108, 0.08), inset 0 1px 0 rgba(255, 244, 225, 0.06);
  padding: 28px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.side-panel.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.side-panel-right {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%) scale(0.96);
}

.side-panel-right.is-open {
  transform: translate(-50%, -50%) scale(1);
}

.side-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(231, 215, 185, 0.10);
}

.side-panel-head h2 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
}

.side-panel-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 243, 225, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.side-panel-close:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: rotate(90deg);
}

.side-panel .filter-panel,
.side-panel .entry-form {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}

.side-panel .filter-panel {
  padding: 0;
}

@media (max-width: 640px) {
  .side-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    border-radius: 24px;
    padding: 22px;
  }
}