@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --bg: #0b0b0b; --panel: #161616; --panel-2: #202020; --line: #2c2c2c; --text: #f2f2f2; --muted: #9a9a9a;
  --gold: #e2b07c; --gold-grad: linear-gradient(100deg, #b47a49 0%, #d9a36f 30%, #ecc49c 60%, #f6e3cf 100%); --imdb: #f5c518;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body.noscroll { overflow: hidden; }
a { color: var(--gold); }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 12px max(16px, 4vw); background: var(--bg); transition: background .3s; }
#top .searchbox { margin-left: auto; max-width: 340px; }
.wordmark { font-family: "Playfair Display", Georgia, serif; font-size: 28px; text-decoration: none; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; padding: .05em 0 .1em; }
.searchbox { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.searchbox:focus-within { border-color: var(--gold); }
.searchbox input { flex: 1; min-width: 0; height: 42px; background: none; border: 0; outline: none; color: var(--text); font-size: 15.5px; }

#adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px max(16px, 4vw); background: #2a1f12; border-bottom: 1px solid #e2b07c55; font-size: 14px; }
.chk { display: inline-flex; align-items: center; gap: 6px; }
#filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px max(16px, 4vw) 4px; }
.segs { display: flex; gap: 6px; }
.seg { padding: 7px 15px; border-radius: 999px; background: var(--panel-2); font-weight: 600; font-size: 14px; color: #ccc; }
.seg.on { background: var(--text); color: #000; }
#filters select { height: 36px; padding: 0 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); max-width: 220px; }

main { padding: 6px max(16px, 4vw) 30px; min-height: 60vh; }
.summary { color: var(--muted); font-size: 14px; margin: 8px 0 14px; }
.summary .read { color: #f0d2b0; }
.status { color: var(--muted); text-align: center; padding: 40px 10px; }
.link { color: var(--gold); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 10px; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } .wordmark { font-size: 22px; } #top { gap: 12px; } }
.card { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.card.is-hidden .poster { opacity: .4; filter: grayscale(.7); }
.poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #2a2a2a, #151515); transition: transform .15s, box-shadow .15s; }
.poster:hover { transform: scale(1.05); box-shadow: 0 10px 26px #000b; z-index: 2; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; color: #aaa; font-size: 13px; }
.rate { position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: 700; color: var(--imdb); background: #000c; border-radius: 5px; padding: 1px 6px; }
.poster img.where { position: absolute; left: 6px; bottom: 6px; width: 26px; height: 26px; object-fit: contain; border-radius: 6px; box-shadow: 0 1px 4px #0008; }
.pctag { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #000c; border-radius: 5px; padding: 2px 6px; }
.hidtag { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 700; background: #e50914; color: #fff; padding: 1px 6px; border-radius: 4px; }
.ct { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis { margin-top: 2px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: #ff9b9b; }
.vis.show { color: #6fe08d; }
.vis.big { padding: 10px 16px; font-size: 14px; }

#detail, #login { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }
.d-back { position: absolute; inset: 0; background: #000c; }
.d { position: relative; width: min(860px, 100%); max-height: 92vh; overflow-y: auto; background: var(--panel); border-radius: 14px; box-shadow: 0 30px 80px #000; }
.d-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: #000b; font-size: 16px; }
.d-art { position: relative; aspect-ratio: 16 / 7; background: #111; }
.d-art img { width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0000 40%, var(--panel) 100%); }
.d-body { padding: 0 26px 26px; margin-top: -30px; position: relative; }
.d-body h1 { font-size: 30px; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; }
.d-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #ccc; font-size: 14px; margin: 0 0 12px; }
.imdb { background: var(--imdb); color: #000; font-weight: 800; padding: 2px 8px; border-radius: 4px; font-size: 13px; }
.d-over { color: #ddd; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.chip:hover { border-color: var(--gold); }
dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
dt { color: var(--muted); }
dd { margin: 0; color: #ddd; }
h3 { font-size: 16px; margin: 18px 0 8px; }
.provs { display: flex; flex-wrap: wrap; gap: 8px; }
.prov { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 8px; background: var(--panel-2); font-size: 14px; font-weight: 600; }
.prov img { width: 26px; height: 26px; flex: none; object-fit: contain; border-radius: 6px; }
.prov.pc { padding-left: 8px; }
.pcicon { font-size: 18px; line-height: 1; }
.prov:not(:has(img)) { padding-left: 12px; }
.muted { color: var(--muted); }
.links { font-size: 14px; }

.login { position: relative; width: min(380px, 100%); background: var(--panel); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px #000; }
.login h2 { margin: 0; font-size: 20px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #ccc; }
.login input { height: 44px; padding: 0 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); outline: none; }
.login input:focus { border-color: var(--gold); }
.row { display: flex; gap: 10px; justify-content: flex-end; }
.primary { height: 42px; padding: 0 20px; border-radius: 10px; background: var(--gold-grad); color: #1c130a; font-weight: 700; }
.ghost { height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); }
.login .hint { margin: 0; color: #bbb; font-size: 14px; line-height: 1.5; }
.google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 10px; background: #fff; color: #1f1f1f; font-weight: 600; text-decoration: none; }
.google span { font: 700 18px/1 Arial, sans-serif; color: #4285f4; }
.google:hover, .google:focus-visible { background: #f1f1f1; }
.err { color: #ff7b7b; font-size: 14px; margin: 0; }

footer { padding: 26px max(16px, 4vw) 40px; border-top: 1px solid #1d1d1d; color: #777; font-size: 12.5px; line-height: 1.6; }
footer p { max-width: 900px; margin: 0 0 8px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; padding: 12px 18px; border-radius: 12px; background: #262626f5; box-shadow: 0 8px 30px #000a; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) {
  #top { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .searchbox { flex: 1 1 100%; max-width: none; }
  #filters select { flex: 1 1 40%; max-width: none; }
}

/* admin */
.adminbtn { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; font-weight: 600; }
.adminbtn:hover, .adminbtn:focus-visible { color: var(--text); border-color: var(--gold); }
.adminbtn.on { color: #1a1206; background: var(--gold-grad); border-color: transparent; }
.adm { display: flex; gap: 6px; margin-top: 4px; }
.tog { flex: 1; min-width: 0; padding: 5px 6px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tog[aria-pressed="true"] { color: var(--text); border-color: #6fe08d66; background: #6fe08d14; }
.tog[data-vis][aria-pressed="false"] { color: #ff9b9b; border-color: #ff7b7b55; background: #ff7b7b12; }
.tog:hover, .tog:focus-visible { border-color: var(--gold); }
.admpanel { margin-top: 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2b07c44; background: #2a1f1255; display: flex; flex-direction: column; gap: 4px; }
.admpanel h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; text-align: left; width: 100%; }
.sw span { display: flex; flex-direction: column; gap: 2px; }
.sw b { font-size: 15px; }
.sw small { font-size: 12.5px; color: var(--muted); }
.sw i { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #555; transition: background .15s; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sw[aria-checked="true"] i { background: #2fb457; }
.sw[aria-checked="true"] i::after { transform: translateX(18px); }
.sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.admpanel .link { align-self: flex-start; font-size: 13px; }

/* Netflix-style layout (colours unchanged: everything uses the palette above) */
#nav { display: flex; gap: 18px; }
#nav button { font-size: 14.5px; color: #ccc; white-space: nowrap; transition: color .2s; }
#nav button:hover { color: var(--muted); }
#nav button.on { color: var(--text); font-weight: 700; }
body.home #top { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, #000000b0 0%, #0000 100%); }
body.home #top.solid { background: var(--bg); }
body.home main { padding: 0 0 30px; }
.pagetitle { flex: 0 0 100%; margin: 6px 0 4px; font-size: 30px; letter-spacing: -.01em; }
#filters { padding-top: 18px; }

.hero { position: relative; height: min(82vh, 760px); min-height: 440px; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.h-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #000000c8 0%, #00000060 45%, #0000 70%), linear-gradient(180deg, #0000 55%, var(--bg) 100%); }
.h-info { position: absolute; left: max(16px, 4vw); bottom: 22%; width: min(560px, 88vw); }
.h-info h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 60px); line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 2px 12px #000a; }
.h-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; color: #ddd; font-size: 14.5px; }
.h-over { margin: 0 0 18px; color: #eee; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 6px #000c; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.h-btns .primary { height: 46px; padding: 0 26px; font-size: 16px; border-radius: 6px; }
.h-where { padding: 10px 16px; border-radius: 6px; background: #6d6d6eb3; font-weight: 600; font-size: 15px; }

.rows { position: relative; margin-top: -9vh; display: flex; flex-direction: column; gap: 34px; padding-bottom: 20px; }
.lane h2 { margin: 0 0 10px; padding: 0 max(16px, 4vw); font-size: 19px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; }
.see { font-size: 13px; font-weight: 600; color: var(--gold); opacity: 0; transition: opacity .2s; }
.lane:hover .see, .see:focus-visible { opacity: 1; }
.r-wrap { position: relative; }
.r-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * max(16px, 4vw) - 5 * 8px) / 6); gap: 8px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding: 0 max(16px, 4vw); padding: 14px max(16px, 4vw); margin: -14px 0; scrollbar-width: none; }
.r-track::-webkit-scrollbar { display: none; }
.r-nav { position: absolute; top: 0; bottom: 0; z-index: 4; width: max(16px, 4vw); background: #0b0b0b99; font-size: 34px; color: var(--text); opacity: 0; transition: opacity .2s; }
.r-nav.prev { left: 0; } .r-nav.next { right: 0; }
.r-wrap:hover .r-nav, .r-nav:focus-visible { opacity: 1; }
@media (max-width: 1100px) { .r-track { grid-auto-columns: calc((100% - 2 * max(16px, 4vw) - 3 * 8px) / 4); } }
@media (max-width: 640px) { .r-track { grid-auto-columns: 44%; } .r-nav { display: none; } }

.tile { min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; }
.tile.is-hidden .t-art { opacity: .4; filter: grayscale(.7); }
.t-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #2a2a2a, #151515); transition: transform .25s, box-shadow .25s; }
.t-art:hover, .t-art:focus-visible { transform: scale(1.08); box-shadow: 0 14px 30px #000c; z-index: 3; }
.t-art img:not(.where) { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-art img.portrait { object-position: center 25%; }
.t-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0000 45%, #000000d0 100%); }
.t-title { position: absolute; left: 10px; right: 10px; bottom: 8px; font-weight: 700; font-size: 15px; line-height: 1.2; text-align: left; text-shadow: 0 1px 4px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: transform .25s; }
.t-meta { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 11.5px; color: #ddd; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; }
.t-art:hover .t-title, .t-art:focus-visible .t-title { transform: translateY(-16px); }
.t-art:hover .t-meta, .t-art:focus-visible .t-meta { opacity: 1; }
.t-art img.where { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; object-fit: contain; border-radius: 5px; box-shadow: 0 1px 4px #0008; }
.t-art .pctag { top: 6px; bottom: auto; }
.t-art .hidtag { top: 34px; }

@media (max-width: 900px) {
  #top { flex-wrap: wrap; gap: 10px 18px; }
  #nav { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; gap: 16px; }
  #top .searchbox { max-width: none; flex: 1; }
  .rows { margin-top: -4vh; }
  .hero { height: 70vh; }
}
@media (max-width: 640px) {
  .adminbtn { order: 1; margin-left: auto; height: 32px; }
  #top .searchbox { order: 2; flex: 1 1 100%; }
  #nav { order: 3; }
}