:root {
  --bg: #07080b;
  --surface: #0f1117;
  --surface-2: #151821;
  --surface-3: #1b1f29;
  --text: #f7f7f8;
  --muted: #9ca3af;
  --muted-2: #727985;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --red: #e11d2e;
  --red-2: #ff3446;
  --gold: #f6c548;
  --green: #56d69a;
  --shadow: 0 18px 50px rgba(0,0,0,.38);
  --radius: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(225,29,46,.16), transparent 34%),
    radial-gradient(circle at 95% 8%, rgba(122,30,45,.08), transparent 28%),
    var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.app-shell { min-height: 100vh; }
.screen {
  width: min(100%, 560px);
  margin: 0 auto;
  min-height: 100vh;
  padding: calc(var(--safe-top) + 16px) 16px calc(92px + var(--safe-bottom));
  position: relative;
}
.screen.detail-screen { padding: 0 0 calc(92px + var(--safe-bottom)); width: min(100%, 620px); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 20px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(145deg,#1a1d25,#090a0d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(225,29,46,.14);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy strong { display:block; font-size: 17px; letter-spacing: -.3px; }
.brand-copy span { display:block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.icon-btn {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.035); display: grid; place-items: center; cursor: pointer;
}
.icon-btn:active { transform: scale(.97); }
.icon-btn svg { width: 20px; height: 20px; }

.eyebrow { color: #ff7a86; font-weight: 750; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(29px, 9vw, 42px); line-height: .98; letter-spacing: -1.65px; margin-bottom: 10px; }
h2 { font-size: 21px; letter-spacing: -.55px; }
h3 { font-size: 16px; letter-spacing: -.25px; }
.lead { color: #c1c5cd; font-size: 14px; line-height: 1.55; }
.muted { color: var(--muted); }

.hero {
  border-radius: 28px;
  overflow: hidden;
  min-height: 390px;
  position: relative;
  background: #15171c;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,9,.04) 6%, rgba(5,6,9,.1) 28%, rgba(5,6,9,.88) 77%, rgba(5,6,9,.98) 100%),
              linear-gradient(90deg, rgba(5,6,9,.64), transparent 70%);
}
.hero-content { position: absolute; z-index: 2; inset: auto 0 0; padding: 24px; }
.hero-kicker { display:flex; align-items:center; gap:8px; color:#f8c7cc; font-size:12px; font-weight:700; margin-bottom:10px; }
.hero-kicker::before { content:""; width:18px; height:2px; border-radius:99px; background:var(--red-2); }
.hero h1 { font-size: 34px; line-height: 1.02; margin-bottom: 9px; max-width: 90%; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; color:#d7d9de; font-size:12px; margin-bottom:12px; }
.hero p { color:#dadde2; font-size:13px; line-height:1.5; margin-bottom:18px; max-width: 92%; }

.actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn {
  border: 0; border-radius: 14px; min-height: 44px; padding: 0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight: 750; font-size: 13px; cursor:pointer; transition: transform .15s ease, filter .15s ease;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: linear-gradient(135deg,var(--red-2),#c90f25); box-shadow: 0 8px 24px rgba(225,29,46,.22); }
.btn-secondary { background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.btn-ghost { background: transparent; border:1px solid var(--line-strong); }
.btn-block { width:100%; }
.btn svg { width:18px; height:18px; }

.section { margin: 26px 0; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.section-head h2 { margin:0; }
.section-link { color:#c8ccd4; background:none; border:0; padding:6px 0; font-size:12px; cursor:pointer; }

.stats-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.stat {
  padding: 15px 13px; border:1px solid var(--line); border-radius:18px;
  background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}
.stat strong { display:block; font-size:22px; letter-spacing:-.8px; }
.stat span { display:block; color:var(--muted); font-size:11px; margin-top:4px; line-height:1.25; }

.poster-strip { display:grid; grid-auto-flow:column; grid-auto-columns: 124px; gap:12px; overflow:auto; padding-bottom:6px; scrollbar-width:none; scroll-snap-type:x proximity; }
.poster-strip::-webkit-scrollbar { display:none; }
.poster-card { scroll-snap-align:start; cursor:pointer; }
.poster-wrap { aspect-ratio:2/3; border-radius:17px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.22); position:relative; }
.poster-wrap img { width:100%; height:100%; object-fit:cover; }
.poster-card h3 { margin:9px 2px 3px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poster-card p { margin:0 2px; color:var(--muted); font-size:11px; }

.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.quick-card {
  min-height:120px; border:1px solid var(--line); border-radius:20px; padding:16px;
  background:linear-gradient(145deg,#151821,#0e1015); position:relative; overflow:hidden; cursor:pointer;
}
.quick-card::after { content:""; width:84px; height:84px; position:absolute; border-radius:50%; right:-26px; bottom:-32px; background:rgba(225,29,46,.12); filter:blur(2px); }
.quick-card svg { width:23px; height:23px; color:#ff6472; margin-bottom:18px; }
.quick-card strong { display:block; font-size:14px; }
.quick-card span { display:block; color:var(--muted); font-size:11px; margin-top:5px; line-height:1.3; }

.bottom-nav {
  position:fixed; z-index:50; left:50%; transform:translateX(-50%); bottom:0;
  width:min(100%,560px); padding:9px 14px calc(9px + var(--safe-bottom));
  background:linear-gradient(180deg,rgba(8,9,13,.7),rgba(8,9,13,.98) 28%); backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.06); display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
.nav-item { border:0; background:transparent; color:#7f8692; min-height:56px; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; font-weight:650; cursor:pointer; }
.nav-item svg { width:21px; height:21px; }
.nav-item.active { color:#fff; background:rgba(255,255,255,.055); }
.nav-item.active svg { color:#ff4051; }

.page-title { margin:6px 0 18px; }
.page-title h1 { font-size:30px; margin-bottom:7px; }
.page-title p { color:var(--muted); font-size:13px; margin:0; }

.search-row { display:flex; gap:9px; margin-bottom:12px; }
.search-box { flex:1; height:48px; border-radius:16px; border:1px solid var(--line); background:#11141b; display:flex; align-items:center; gap:9px; padding:0 13px; }
.search-box svg { width:19px; height:19px; color:#777f8c; flex:0 0 auto; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:#fff; font-size:14px; min-width:0; }
.search-box input::placeholder { color:#69707c; }
.filter-btn { width:48px; height:48px; border-radius:16px; border:1px solid var(--line); background:#11141b; display:grid; place-items:center; cursor:pointer; position:relative; }
.filter-btn svg { width:20px; }
.filter-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--red-2); right:8px; top:8px; box-shadow:0 0 0 3px #11141b; }

.chips { display:flex; gap:8px; overflow:auto; padding:0 0 12px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:#101219; color:#b7bcc5; font-size:11px; cursor:pointer; }
.chip.active { background:#f2f3f5; color:#0b0c10; border-color:#f2f3f5; font-weight:750; }

.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 12px; }
.result-count { color:#969da8; font-size:12px; }
.catalog-view-controls { display:flex; align-items:center; gap:7px; }
.grid-density { display:flex; border:1px solid var(--line); border-radius:12px; padding:3px; background:#0d0f14; }
.grid-density button { width:29px; height:30px; border:0; border-radius:9px; background:transparent; color:#777e89; font-size:11px; font-weight:800; cursor:pointer; }
.grid-density button.active { background:#f2f3f5; color:#0b0c10; }
.view-toggle { display:flex; border:1px solid var(--line); border-radius:12px; padding:3px; background:#0d0f14; }
.view-toggle button { width:34px; height:30px; border:0; border-radius:9px; background:transparent; color:#737a86; display:grid; place-items:center; cursor:pointer; }
.view-toggle button.active { background:#20242d; color:#fff; }
.view-toggle svg { width:17px; }

.catalog-list { display:grid; gap:10px; }
.movie-row {
  min-height:130px; display:grid; grid-template-columns:minmax(0,1fr) 82px; gap:13px; border-radius:19px;
  border:1px solid var(--line); background:linear-gradient(145deg,rgba(21,24,32,.96),rgba(13,15,20,.96)); padding:13px; cursor:pointer;
}
.movie-row:active { border-color:rgba(255,255,255,.18); }
.movie-row .poster { width:82px; height:112px; border-radius:13px; object-fit:cover; background:#20232b; align-self:center; }
.row-copy { min-width:0; display:flex; flex-direction:column; }
.row-copy h3 { margin:1px 0 6px; font-size:15px; line-height:1.22; }
.row-meta { display:flex; flex-wrap:wrap; gap:5px 8px; color:#9ca3ae; font-size:10.5px; margin-bottom:7px; }
.row-description { margin:0; color:#b9bec6; font-size:11.5px; line-height:1.42; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.row-bottom { margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:8px; }
.rating { color:var(--gold); font-weight:760; font-size:11px; }
.type-label { color:#969da8; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }

.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.catalog-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.catalog-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.catalog-grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.grid-card { cursor:pointer; min-width:0; }
.grid-poster { position:relative; aspect-ratio:2/3; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#171a21; box-shadow:0 12px 24px rgba(0,0,0,.18); }
.grid-poster img { width:100%; height:100%; object-fit:cover; }
.grid-score { position:absolute; top:9px; right:9px; padding:5px 7px; border-radius:10px; background:rgba(5,6,8,.78); backdrop-filter:blur(8px); font-size:10px; color:var(--gold); font-weight:750; }
.grid-card h3 { margin:9px 2px 4px; font-size:13px; line-height:1.28; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-card p { margin:0 2px; color:var(--muted); font-size:10.5px; }
.catalog-grid.cols-3 .grid-poster { border-radius:14px; }
.catalog-grid.cols-3 .grid-score { top:6px; right:6px; padding:4px 6px; font-size:9px; }
.catalog-grid.cols-3 .grid-card h3 { margin-top:7px; font-size:11.5px; }
.catalog-grid.cols-3 .grid-card p { font-size:9.5px; }
.catalog-grid.cols-4 .grid-poster { border-radius:11px; box-shadow:0 8px 16px rgba(0,0,0,.18); }
.catalog-grid.cols-4 .grid-score { top:5px; right:5px; padding:3px 5px; border-radius:8px; font-size:8px; }
.catalog-grid.cols-4 .grid-card h3 { margin:6px 1px 3px; font-size:10.5px; line-height:1.2; }
.catalog-grid.cols-4 .grid-card p { margin:0 1px; font-size:8.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.empty-state { padding:42px 22px; text-align:center; border:1px dashed var(--line-strong); border-radius:20px; color:#9299a5; }
.empty-state strong { display:block; color:#fff; margin-bottom:8px; }

.sheet-backdrop { position:fixed; z-index:90; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(5px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .18s ease; }
.sheet { width:min(100%,560px); max-height:88vh; overflow:auto; background:#0e1015; border:1px solid var(--line-strong); border-radius:27px 27px 0 0; padding:14px 17px calc(22px + var(--safe-bottom)); box-shadow:0 -24px 60px rgba(0,0,0,.45); animation:slideUp .22s ease; }
.sheet-handle { width:42px; height:4px; border-radius:99px; background:#3b404b; margin:1px auto 16px; }
.sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
.sheet-head h2 { margin:0; font-size:21px; }
.field { margin-bottom:15px; }
.field label { display:block; font-size:11px; color:#b8bdc6; font-weight:700; margin:0 0 7px 2px; }
.field input,.field select { width:100%; min-height:46px; background:#151821; color:#fff; border:1px solid var(--line); border-radius:14px; padding:0 13px; outline:0; }
.field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#7c8490 50%),linear-gradient(135deg,#7c8490 50%,transparent 50%); background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:4px; border:1px solid var(--line); border-radius:15px; background:#0b0d11; }
.segmented button { min-height:38px; border:0; border-radius:11px; background:transparent; color:#8f96a1; font-size:11px; font-weight:700; cursor:pointer; }
.segmented button.active { background:#232730; color:#fff; }
.filter-summary { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.filter-summary span { padding:6px 9px; border:1px solid rgba(225,29,46,.2); background:rgba(225,29,46,.08); color:#f5a9b1; border-radius:999px; font-size:10px; }

.detail-hero { min-height:450px; position:relative; overflow:hidden; background:#14161c; }
.detail-hero img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,5,8,.12),rgba(4,5,8,.24) 35%,rgba(7,8,11,.94) 82%,#07080b 100%); }
.detail-back { position:absolute; top:calc(var(--safe-top) + 14px); left:16px; z-index:4; background:rgba(5,6,8,.58); backdrop-filter:blur(10px); }
.detail-content { position:relative; z-index:3; padding:0 17px; margin-top:-102px; }
.detail-title-block { display:grid; grid-template-columns:94px minmax(0,1fr); gap:14px; align-items:end; margin-bottom:18px; }
.detail-poster { width:94px; aspect-ratio:2/3; object-fit:cover; border-radius:16px; border:1px solid var(--line-strong); box-shadow:0 16px 30px rgba(0,0,0,.4); background:#171a21; }
.detail-title-block h1 { font-size:26px; line-height:1.05; margin-bottom:7px; }
.detail-subtitle { color:#9da4af; font-size:11px; line-height:1.4; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.badge { border:1px solid var(--line-strong); border-radius:999px; padding:5px 8px; color:#d2d5da; background:rgba(255,255,255,.035); font-size:10px; }
.detail-actions { display:grid; grid-template-columns:1fr 48px; gap:9px; margin-bottom:23px; }
.detail-actions .btn { min-height:48px; }
.favorite-btn { width:48px; border:1px solid var(--line-strong); border-radius:14px; background:#11141a; display:grid; place-items:center; cursor:pointer; }
.favorite-btn.active { color:#ff5261; border-color:rgba(255,82,97,.38); background:rgba(225,29,46,.08); }
.detail-section { padding:0 1px; margin:23px 0; }
.detail-section h2 { font-size:17px; margin-bottom:10px; }
.detail-section p { color:#c0c5cd; font-size:13px; line-height:1.62; }
.people { display:flex; gap:9px; flex-wrap:wrap; }
.person-pill { background:#11141a; border:1px solid var(--line); padding:8px 10px; border-radius:12px; color:#bec3cb; font-size:11px; }
.awards { display:flex; gap:8px; overflow:auto; scrollbar-width:none; }
.award-card { flex:0 0 auto; min-width:112px; border:1px solid rgba(246,197,72,.16); background:linear-gradient(145deg,rgba(246,197,72,.08),rgba(255,255,255,.025)); border-radius:16px; padding:13px; }
.award-card strong { display:block; color:#f5d884; font-size:12px; }
.award-card span { display:block; color:#8e95a0; font-size:9px; margin-top:5px; }

.random-card { border:1px solid var(--line); border-radius:26px; padding:18px; background:linear-gradient(150deg,#161922,#0d0f14); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.random-card::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(225,29,46,.13); right:-80px; top:-70px; filter:blur(8px); }
.random-icon { width:62px; height:62px; border-radius:20px; background:linear-gradient(145deg,rgba(255,52,70,.18),rgba(225,29,46,.04)); border:1px solid rgba(255,70,88,.2); display:grid; place-items:center; color:#ff5261; margin-bottom:18px; }
.random-icon svg { width:29px; height:29px; }
.random-card h2 { font-size:24px; margin-bottom:8px; }
.random-card > p { color:#9ca3ad; font-size:13px; line-height:1.5; margin-bottom:20px; }
.random-fields { position:relative; z-index:2; }
.random-fields .field { margin-bottom:13px; }
.random-note { margin:14px 2px 0; color:#747b86; font-size:10.5px; line-height:1.45; }

.random-result { min-height:100vh; position:relative; overflow:hidden; background:#07080b; display:flex; flex-direction:column; justify-content:flex-end; }
.random-result-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:resultZoom 9s ease-out both; }
.random-result::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,5,8,.12),rgba(4,5,8,.25) 32%,rgba(4,5,8,.93) 76%,#07080b 100%); }
.random-result-content { position:relative; z-index:3; padding:calc(var(--safe-top) + 18px) 18px calc(30px + var(--safe-bottom)); }
.result-label { display:flex; align-items:center; gap:8px; color:#f7afb6; font-size:12px; font-weight:750; margin-bottom:14px; }
.result-label svg { width:18px; }
.random-result h1 { font-size:36px; margin-bottom:9px; }
.random-result .result-meta { color:#d6dae0; font-size:12px; margin-bottom:13px; }
.random-result p { color:#d0d4db; font-size:13px; line-height:1.55; max-width:95%; }
.result-actions { display:grid; gap:9px; margin-top:19px; }
.result-actions .btn { min-height:49px; }

.toast { position:fixed; z-index:120; left:50%; transform:translateX(-50%); bottom:calc(88px + var(--safe-bottom)); width:min(calc(100% - 32px),500px); padding:12px 14px; background:#181b22; border:1px solid var(--line-strong); border-radius:14px; color:#e8e9ec; font-size:12px; box-shadow:0 16px 40px rgba(0,0,0,.45); animation:toastIn .2s ease; }
.install-banner { margin:17px 0 0; border:1px solid rgba(225,29,46,.18); background:linear-gradient(135deg,rgba(225,29,46,.09),rgba(255,255,255,.025)); border-radius:19px; padding:14px; display:flex; align-items:center; gap:12px; }
.install-banner img { width:42px; height:42px; border-radius:12px; }
.install-banner-copy { min-width:0; flex:1; }
.install-banner strong { display:block; font-size:12px; }
.install-banner span { display:block; color:#989fa9; font-size:10px; line-height:1.35; margin-top:3px; }
.install-banner button { border:0; border-radius:11px; background:#f0f1f3; color:#0c0d11; font-size:10px; font-weight:800; padding:9px 10px; cursor:pointer; }

.skeleton { background:linear-gradient(90deg,#14171e,#1c2029,#14171e); background-size:200% 100%; animation:shimmer 1.6s infinite; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes resultZoom { from{transform:scale(1.05)} to{transform:scale(1)} }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media (min-width: 480px) {
  .screen { padding-left:20px; padding-right:20px; }
  .poster-strip { grid-auto-columns:138px; }
  .hero { min-height:430px; }
}

@media (display-mode: standalone) {
  .brand-copy span { color:#8d94a0; }
}