:root {
  --bg: #0e0e13; --rail: #09090c; --card: #1e1f27; --focus: #4a4e6a; --sel: #1c1f33;
  --accent: #8ea2ff; --muted: #8a8b96; --text: #fff; --rail-w: 76px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
img { -webkit-touch-callout: none; user-select: none; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }

#rail { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); background: var(--rail);
  display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; z-index: 5;
  overflow-y: auto; scrollbar-width: none; transition: width .18s; }
#rail:hover, #rail:focus-within { width: 240px; box-shadow: 20px 0 60px #000a; }
.ri { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 12px;
  white-space: nowrap; color: var(--muted); cursor: pointer; border: 0; background: none; text-align: left; }
.ri svg { flex: 0 0 24px; width: 24px; height: 24px; fill: currentColor; }
.ri span { opacity: 0; transition: opacity .15s; }
#rail:hover .ri span, #rail:focus-within .ri span { opacity: 1; }
.ri.active { background: #171a2a; color: var(--text); }
.ri:hover, .ri:focus { background: #2e3146; color: var(--text); }

#main { margin-left: var(--rail-w); padding: 0 40px 60px; min-height: 100%; }
#top { display: flex; align-items: baseline; gap: 14px; padding: 22px 0 10px; }
#crumbs { font-size: 26px; font-weight: 600; }
#crumbs .sep { color: var(--muted); margin: 0 8px; }
#status { color: var(--muted); flex: 1; }
#clock { color: var(--muted); font-size: 20px; }

.row h2 { font-size: 20px; margin: 22px 0 10px; font-weight: 600; }
.strip { display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 14px; scroll-snap-type: x proximity;
  scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .card { flex: 0 0 180px; scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 14px; padding: 8px 4px; }
.grid.folders { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card { display: block; cursor: pointer; border-radius: 12px; transition: transform .12s; }
.card .frame { position: relative; aspect-ratio: 280 / 397; border-radius: 12px; overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 3px transparent; transition: box-shadow .12s; }
.card.person .frame { aspect-ratio: 280 / 381; }
.card.studio .frame { aspect-ratio: 16 / 10; background: #fff; }
.card.studio .frame img { object-fit: contain; padding: 14px; }
.card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover, .card:focus { transform: scale(1.05); z-index: 1; }
.card:hover .frame, .card:focus .frame { box-shadow: 0 0 0 3px #fff; }
.card .meta { color: var(--muted); font-size: 13px; margin-top: 8px; }
.card .title { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #0e0e13; font-size: 11px;
  font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.prog { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); }
.folder .frame { aspect-ratio: 2.2 / 1; }
.folder .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, #000c); }
.folder .ftitle { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 18px; font-weight: 600; z-index: 1; }

.btn { background: var(--card); border: 0; border-radius: 12px; padding: 12px 22px; cursor: pointer; font-size: 16px; }
.btn:hover, .btn:focus { background: var(--focus); }
.btn.primary { background: var(--accent); color: #0e0e13; font-weight: 600; }
.btn.primary:hover, .btn.primary:focus { background: #fff; }
.field { background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 12px 16px; width: 100%; font-size: 17px; }
.field:focus { border-color: var(--accent); }

.chips { display: none; }
.chip { flex: 0 0 auto; background: var(--card); border-radius: 18px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.chip:active { background: var(--focus); }
button.chip { border: 0; cursor: pointer; }
.chip:focus { background: var(--focus); }
.chip.active { background: var(--accent); color: #0e0e13; font-weight: 600; }
.chip.active:focus { background: #fff; }
.sorts { display: flex; gap: 8px; margin: 4px 0 10px; overflow-x: auto; scrollbar-width: none; }
.plan-pill { background: linear-gradient(90deg, #f5c86a, #e9a43c); color: #1a1205; font-weight: 700; font-size: 13px;
  padding: 4px 12px; border-radius: 14px; white-space: nowrap; }
.plan-card { background: var(--card); border-radius: 16px; padding: 18px 22px; max-width: 460px; margin: 10px 0 16px; }
.plan-card.on { background: linear-gradient(120deg, #3a2d12, #1e1f27 70%); box-shadow: inset 0 0 0 1px #e9a43c66; }
.plan-name { font-size: 20px; font-weight: 700; }
.plan-card.on .plan-name { color: #f5c86a; }
.plan-until { color: var(--muted); margin-top: 4px; }

.pager { display: flex; justify-content: center; gap: 10px; margin: 26px 0; align-items: center; color: var(--muted); }
.empty { color: var(--muted); padding: 40px 0; }
.spin { color: var(--muted); padding: 40px 0; }

.detail { position: relative; margin: 0 -40px; padding: 30px 40px; min-height: 420px; }
.detail .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(30px) brightness(.35);
  transform: scale(1.1); z-index: -1; }
.detail .wrap { display: flex; gap: 32px; align-items: flex-start; }
.detail .poster { width: min(520px, 45%); aspect-ratio: 16 / 9; border-radius: 14px; object-fit: cover; background: var(--card); }
.detail h1 { margin: 0 0 10px; font-size: 30px; }
.detail .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.detail .badges span { background: #ffffff1f; padding: 3px 10px; border-radius: 8px; font-size: 13px; }
.detail .desc { color: #d5d6de; max-width: 760px; }
.detail .actions { display: flex; gap: 12px; margin: 6px 0 18px; flex-wrap: wrap; }
.detail .note { color: var(--muted); margin-top: 12px; }

.form { max-width: 460px; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.err { color: #ff8e8e; min-height: 1.4em; }
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.gate .form { width: 360px; }

#player { position: fixed; inset: 0; background: #000; z-index: 20; }
#video { position: relative; z-index: 1; width: 100%; height: 100%; background: #000; }
#pbar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 14px; align-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  background: linear-gradient(#000c, transparent); transition: opacity .3s; z-index: 2; transform: translateZ(0); }
#player.idle #pbar { opacity: 0; }
#ptitle { flex: 1; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pback, #pquality { background: #ffffff26; border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
#pquality option { background: #222; }

@media (hover: none) {
  #pbar { top: 44px; background: none; }
  .card:hover:not(:focus) { transform: none; }
  .card:hover:not(:focus) .frame { box-shadow: 0 0 0 3px transparent; }
  .btn:hover:not(:focus) { background: var(--card); }
  .btn.primary:hover:not(:focus) { background: var(--accent); }
  .ri:hover:not(:focus) { background: none; color: var(--muted); }
  .ri.active:hover:not(:focus) { background: #171a2a; color: var(--text); }
  .card:active { transform: scale(.97); }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  :root { --rail-w: 0px; }
  #rail { inset: auto 0 0 0; width: 100%; height: auto; flex-direction: row; justify-content: space-between;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    overflow-x: auto; background: #09090cf2; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  #rail:hover, #rail:focus-within { width: 100%; box-shadow: none; }
  .ri { padding: 10px 14px; flex: 0 0 auto; }
  .ri.more { display: none; }
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -16px 0; padding: 0 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .ri span { display: none; }
  #main { padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .gate { min-height: 100dvh; padding: 16px; }
  .gate .form { width: 100%; }
  #crumbs { font-size: 20px; }
  #clock { display: none; }
  .strip .card { flex-basis: 124px; }
  .row h2 { font-size: 18px; margin: 18px 0 4px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .card .title { font-size: 13px; }
  .card .meta { font-size: 12px; margin-top: 6px; }
  .grid.folders { grid-template-columns: 1fr 1fr; }
  .detail { margin: 0 -16px; padding: 16px; }
  .detail .wrap { flex-direction: column; }
  .detail .poster { width: 100%; }
  .detail h1 { font-size: 22px; }
  .detail .actions .btn { flex: 1; text-align: center; }
  .card:hover, .card:focus { transform: none; }
}