:root {
  color-scheme: light;
  --ink: #222124;
  --muted: #76727a;
  --line: #e7e1e2;
  --paper: #fffdfd;
  --wash: #faf5f5;
  --accent: #f7c719;
  --accent-dark: #725900;
  --shadow: 0 12px 30px rgba(43, 34, 33, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.shell { width: min(100% - 32px, 920px); margin: 0 auto; padding: 34px 0 56px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 7px; color: var(--accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; }
.subhead { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.refresh { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 25px; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.05); }
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.search { display: flex; align-items: center; gap: 9px; min-height: 48px; flex: 1; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.search span { color: var(--muted); font-size: 25px; line-height: 1; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.count { min-width: 90px; color: var(--muted); font-size: 13px; text-align: right; }
.catalog { display: grid; gap: 13px; }
.film { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.poster { width: 84px; aspect-ratio: 2 / 3; border-radius: 9px; background: #ede6e6; object-fit: cover; }
.poster.empty { display: grid; place-items: center; color: #a49da0; font-size: 11px; text-align: center; }
.film h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.film-meta { margin-top: 7px; color: var(--muted); font-size: 13px; }
.film-actions { display: flex; gap: 8px; align-items: center; }
button.action { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
button.action.primary { border-color: var(--accent); background: var(--accent); color: #3d3100; }
.state { padding: 42px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; background: rgba(255,255,255,.55); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 5; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 15px; border-radius: 9px; background: #222124; color: #fff; font-size: 13px; transition: opacity .2s, transform .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 600px) {
  .shell { width: min(100% - 22px, 920px); padding-top: 24px; }
  .film { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .poster { width: 62px; }
  .film-actions { grid-column: 2; }
  button.action { flex: 1; }
  .toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .count { text-align: left; }
}