/* Base + theme */
:root {
  --bg: #0f1419;
  --panel: #141a21;
  --text: #e8eef6;
  --muted: #8ea0b4;
  --chip: #1d2430;
  --chip-border: #2a3443;
  --accent: #f15a57;
  --accent-2: #4aa8ff;
  --ring: rgba(255,255,255,0.08);
  --border: #253040;
}
html[data-theme="light"] {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #101623;
  --muted: #5a6a7f;
  --chip: #f2f6fb;
  --chip-border: #dbe6f4;
  --ring: rgba(0,0,0,0.08);
  --border: #dbe6f4;
}
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* Header */
.rv-header {
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; background: var(--panel);
  border-bottom:1px solid var(--border);
}
.rv-burger { background:none; border:0; padding:.25rem; display:grid; gap:3px; }
.rv-burger span{ width:20px; height:2px; background:var(--text); display:block; border-radius:2px; }
.rv-brand { text-decoration:none; font-weight:700; color:var(--text); letter-spacing:.2px; }
.rv-brand-short { display:none; }
@media (max-width:720px){ .rv-brand-long{ display:none; } .rv-brand-short{ display:inline-block; } }

.rv-chips { display:flex; gap:.5rem; margin-left:auto; margin-right: .5rem; }
.rv-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; background:var(--chip); border:1px solid var(--chip-border);
  border-radius:999px; color:var(--text); text-decoration:none; font-weight:600; font-size:.9rem;
}
@media (max-width:900px){ .rv-chips{ overflow:auto; scrollbar-width:none; } .rv-chips::-webkit-scrollbar{ display:none; } }
.rv-theme {
  border:1px solid var(--chip-border); background:var(--chip);
  color:var(--text); border-radius:999px; padding:.5rem .8rem; cursor:pointer; font-weight:700;
}

/* Drawer */
.rv-drawer { position:fixed; inset:0 0 0 auto; width:320px; max-width:85vw; background:var(--panel); box-shadow:-10px 0 30px rgba(0,0,0,.3); transform: translateX(100%); transition:.25s ease; z-index:60; border-left:1px solid var(--border); }
.rv-drawer.open { transform: translateX(0); }
.rv-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border); }
.rv-drawer-links{ display:grid; padding: .5rem 1rem 1rem; gap:.25rem; }
.rv-drawer-links a{ color:var(--text); text-decoration:none; padding:.6rem .75rem; border-radius:.6rem; border:1px solid var(--border); background:var(--chip); }
.rv-drawer-close{ border:0; background:var(--chip); color:var(--text); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .6rem; cursor:pointer; }

/* Container + crumbs */
.rv-container{ max-width:1180px; margin:0 auto; padding: 1rem; }
.rv-breadcrumb{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.5rem 0 1rem; }
.rv-breadcrumb a{ color:var(--muted); text-decoration:none; }
.rv-like{ color: var(--accent-2); }

/* Buttons */
.rv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius:.6rem; border:1px solid var(--border); background:var(--chip); color:var(--text); text-decoration:none; font-weight:700; }
.rv-btn-cta{ background:var(--accent); border-color: transparent; color:white; }
.rv-btn-cta:hover{ filter: brightness(.95); }

/* Hero */
.rv-hero{ display:grid; grid-template-columns: 420px 1fr; gap:1rem; padding:1rem; background:var(--panel); border:1px solid var(--border); border-radius:1rem; }
@media (max-width:900px){ .rv-hero{ grid-template-columns:1fr; } }
.rv-hero-thumb{ position:relative; border-radius:.8rem; border:1px solid var(--border); background:#0c1117 center/cover no-repeat; height:220px; overflow:hidden; }
.rv-hero-cta{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.rv-hero-meta{ display:grid; align-content:start; gap:.75rem; }
.rv-h1{ margin:.25rem 0 .5rem; font-size:1.8rem; letter-spacing:.2px; }
.rv-pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background:var(--chip); border:1px solid var(--chip-border); width:max-content; }
.rv-pill a{ color:var(--text); text-decoration:none; }
.rv-pill-ic{ opacity:.75; }
.rv-notes{ color:var(--muted); margin:.25rem 0 .5rem; }
.rv-hero-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Similar grid wrapper */
.rv-similar{ margin:1rem 0 2rem; }
.rv-similar-head{ display:flex; align-items:center; justify-content:space-between; }
.rv-h2{ margin:.25rem 0 1rem; font-size:1.25rem; }
.rv-similar-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; }
@media (max-width:1000px){ .rv-similar-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:720px){ .rv-similar-grid{ grid-template-columns: repeat(2, 1fr);} }
.rv-empty{ color:var(--muted); padding:1rem; }

/* Footer */
.rv-footer{ display:flex; justify-content:center; padding:2rem 1rem; color:var(--muted); }