:root{--bg: #0f0e17;--surface: #1a1825;--surface-2: #232032;--text: #e8e6f0;--muted: #a39fb8;--accent: #8b5cf6;--accent-2: #6d28d9;--accent-text: #c4b5fd;--good: #34d399;--danger: #f87171;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 50% -10%,#1c1830 0%,var(--bg) 55%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--surface-2);background:var(--surface-2);color:var(--text);font:inherit;font-weight:600;padding:.7rem 1.2rem;border-radius:10px;cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease}.btn:hover{background:#2c2940}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.6;cursor:wait}.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);border-color:transparent;color:#fff}.btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%)}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-ghost:hover{background:#ffffff0d;color:var(--text)}.btn-small{padding:.45rem .8rem;font-size:.9rem}.btn-danger{background:#f8717126;border-color:var(--danger);color:var(--danger)}.btn-danger:hover{background:#f8717140}.onboard{max-width:860px;margin:0 auto;padding:4rem 1.25rem;text-align:center}.onboard-title{font-size:clamp(2.4rem,6vw,3.6rem);margin:0 0 .5rem;background:linear-gradient(135deg,#fff,var(--accent-text));-webkit-background-clip:text;background-clip:text;color:transparent}.onboard-tagline{color:var(--muted);font-size:1.15rem;max-width:36rem;margin:0 auto 2.5rem;line-height:1.5}.onboard-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;text-align:left}.onboard-card{background:var(--surface);border:1px solid var(--surface-2);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column}.onboard-card h3{margin:0 0 .5rem}.onboard-card p{color:var(--muted);line-height:1.5;margin:0 0 1.25rem;flex:1}.onboard-divider{align-self:center;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}.onboard-ok{color:var(--good)!important;margin-top:.75rem!important;flex:0!important}.onboard-error{color:var(--danger)!important;margin-top:.75rem!important;flex:0!important}.onboard-points{list-style:none;margin:2rem auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.75rem;color:var(--muted);font-size:.9rem}.onboard-points li:before{content:"✓ ";color:var(--good);font-weight:700}@media (max-width: 720px){.onboard{padding:2.5rem 1.25rem}.onboard-actions{grid-template-columns:1fr}.onboard-divider{padding:.25rem 0}}.app{min-height:100%;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;padding:0 1.25rem}.app-header{display:flex;align-items:center;gap:1rem;padding:1.25rem 0;flex-wrap:wrap}.app-logo{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;font:inherit;font-size:1.4rem;font-weight:700;margin:0;cursor:pointer;background:linear-gradient(135deg,#fff,var(--accent-text));-webkit-background-clip:text;background-clip:text;color:transparent}.app-logo:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}.app-stats{display:flex;gap:1rem;color:var(--muted);font-size:.9rem;margin-left:auto}.app-nav{display:flex;gap:.5rem}.app-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1rem 0 2rem}.app-footer{color:var(--muted);font-size:.8rem;text-align:center;padding:1rem 0 2rem}.duel{text-align:center}.duel-prompt{font-size:1.3rem;color:var(--muted);margin:0 0 1.5rem}.duel-cards{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch}.duel-vs{align-self:center;font-weight:800;color:var(--accent-text);font-size:1.1rem;text-transform:uppercase}.duel-actions{margin-top:1.5rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}.duel-hint{color:var(--muted);font-size:.8rem;margin:1.25rem 0 0}.duel-hint kbd{font-family:inherit;background:var(--surface-2);border:1px solid #3a3550;border-radius:5px;padding:.05rem .4rem;font-size:.75rem}@media (hover: none) and (pointer: coarse){.duel-hint{display:none}}.card{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--surface-2);border-radius:var(--radius);padding:0;overflow:hidden;cursor:pointer;color:inherit;font:inherit;transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease;box-shadow:var(--shadow)}.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 40px #8b5cf640}.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.card-cover{height:140px;background:linear-gradient(135deg,var(--accent-2) 0%,#312562 100%);display:flex;align-items:center;justify-content:center}.card-genre{display:inline-block;margin:0 0 .75rem;padding:.15rem .6rem;border-radius:999px;background:#8b5cf624;border:1px solid rgba(139,92,246,.35);color:var(--accent-text);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.card-year,.card-rating-label{color:var(--muted);font-weight:400}.card-cover-initial{font-size:4rem;font-weight:800;color:#ffffffd9}.card-body{padding:1.1rem 1.25rem;flex:1}.card-title{margin:0 0 .25rem;font-size:1.2rem;line-height:1.25}.card-author{margin:0 0 .75rem;color:var(--accent-text);font-size:.95rem}.card-blurb{margin:0 0 .75rem;color:var(--muted);font-size:.92rem;line-height:1.45}.card-rating{margin:0;color:#fbbf24;font-size:.9rem;font-weight:600}.card-pick{display:block;text-align:center;padding:.8rem;background:var(--surface-2);color:var(--accent-text);font-weight:700;transition:background .15s ease}.card:hover .card-pick{background:var(--accent-2);color:#fff}@media (max-width: 720px){.duel-cards{grid-template-columns:1fr}.duel-vs{padding:.25rem 0}}.panel{background:var(--surface);border:1px solid var(--surface-2);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.panel-head .panel-title{margin:0}.panel-title{margin:0 0 1rem}.panel-lede{color:var(--muted);line-height:1.5;margin:0 0 1.25rem}.share{display:inline-flex;align-items:center;gap:.75rem}.share-feedback{color:var(--good);font-size:.85rem}.taste{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--surface-2)}.taste-title{margin:0 0 .75rem;font-size:.95rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.taste-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.taste-chip{padding:.3rem .85rem;border-radius:999px;background:#8b5cf624;border:1px solid rgba(139,92,246,.35);color:var(--accent-text);font-size:.85rem;font-weight:600}.shortlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.shortlist-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;background:var(--surface-2);border-radius:10px}.shortlist-title{font-weight:600}.shortlist-author{color:var(--muted)}.shortlist-remove{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;padding:.25rem .5rem;border-radius:8px}.shortlist-remove:hover{color:var(--danger);background:#f871711a}.shortlist-empty{color:var(--muted);line-height:1.5}@media (max-width: 560px){.app-header{gap:.6rem;padding:1rem 0}.app-stats{order:3;width:100%;margin-left:0;justify-content:center;font-size:.82rem}.app-nav{margin-left:auto}.card-cover{height:90px}.card-cover-initial{font-size:2.6rem}}@media (prefers-reduced-motion: reduce){*{transition:none!important}.card:hover{transform:none}}