:root{
  --bg:#0b0a09; --panel:#141210; --card:#18160f; --card-hover:#211d15;
  --input:#1c1911; --border:#2c2619; --border-soft:#201c14;
  --txt:#f1ebe0; --txt-sec:#aa9f8a; --txt-dim:#6c6355;
  --accent:#d7993f; --accent-ink:#1a1106;
  --green:#8ba86d; --green-ink:#121a0c;
  --red:#c2654f; --red-ink:#210c07;
  --amber:#c9a23d; --amber-ink:#201a06;
  --radius-card:10px; --radius-chip:7px; --radius-sm:8px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f1e7; --panel:#fffdf8; --card:#ffffff; --card-hover:#f3ede0;
    --input:#f0e9db; --border:#e2d8c3; --border-soft:#ece4d4;
    --txt:#241f16; --txt-sec:#665c48; --txt-dim:#9c917a;
    --accent:#a86a20; --accent-ink:#fffaf0;
    --green:#587a3c; --green-ink:#ffffff;
    --red:#a33f2b; --red-ink:#ffffff;
    --amber:#8a6a1d; --amber-ink:#ffffff;
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14.5px;
  min-height:100vh;
  overflow-x:hidden;
}
h1,.display{font-family:'Be Vietnam Pro',system-ui,sans-serif}
a{color:var(--accent)}
.wrap{
  max-width:1180px; margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
@media (min-width:640px){ .wrap{ padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)) } }

header.top{
  position:sticky; top:0; z-index:5;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  padding-block:18px 16px;
}
.title-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.title-row h1{font-size:21px; font-weight:800; letter-spacing:-0.01em; margin:0}
.title-row .tag{
  font-size:10.5px; font-weight:600; color:var(--txt-dim);
  text-transform:uppercase; letter-spacing:.08em;
}
.stats-line{
  margin-top:3px; font-size:12px; color:var(--txt-dim);
  font-variant-numeric:tabular-nums;
}
.stats-line strong{color:var(--txt-sec); font-weight:600}

.toolbar{display:flex; flex-direction:column; gap:11px; margin-top:14px}
.toolbar-row2{display:flex; gap:10px; align-items:center}

.tabs{
  display:flex; gap:2px; flex-wrap:nowrap; min-width:0; border-bottom:1px solid var(--border-soft);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:-16px; padding-inline:16px;
}
@media (min-width:640px){ .tabs{ margin-inline:-20px; padding-inline:20px } }
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--txt-dim);
  background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 10px 10px; cursor:pointer; display:flex; align-items:center; gap:6px;
  white-space:nowrap; margin-bottom:-1px; flex:none;
}
.tab-icon{width:13px; height:13px; flex:none; opacity:.85}
.tab-btn:hover{color:var(--txt-sec)}
.tab-btn.active{color:var(--txt); border-bottom-color:var(--accent)}
.tab-btn.active .tab-icon{color:var(--accent); opacity:1}
.tab-btn .n{opacity:.7; font-variant-numeric:tabular-nums; font-weight:500}

.search-box{position:relative; flex:1; min-width:0}
.search-box input{
  width:100%; font:inherit; font-size:13px; color:var(--txt);
  background:var(--input); border:1px solid var(--border); border-radius:var(--radius-chip);
  padding:9px 12px 9px 32px;
}
.search-box input:focus{outline:1.5px solid var(--accent); outline-offset:-1px}
.search-box svg{position:absolute; left:11px; top:50%; translate:0 -50%; opacity:.5; width:14px; height:14px}

.sync-btn{
  display:flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600;
  background:none; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius:var(--radius-chip); padding:9px 14px; cursor:pointer; flex:none;
}
.sync-btn:hover{background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent)}
.sync-btn:disabled{opacity:.55; cursor:default}
.sync-btn svg{width:13px; height:13px; transition:transform .6s linear; flex:none}
.sync-btn.spinning svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:420px){ .sync-btn span{display:none} .sync-btn{padding:9px 11px} }

main{padding-block:22px 48px}

.disclaimer{
  border:1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); background:color-mix(in srgb, var(--amber) 9%, var(--card));
  border-radius:var(--radius-sm); padding:10px 14px; font-size:11.5px; color:var(--txt-sec);
  line-height:1.5; margin-block:14px;
}
.state-banner{
  border:1px solid var(--border); background:var(--card); border-radius:var(--radius-sm);
  padding:12px 15px; font-size:13px; color:var(--txt-sec); margin-bottom:16px; line-height:1.55;
}
.state-banner.err{border-color:var(--red); background:color-mix(in srgb, var(--red) 8%, var(--card))}
.state-banner.ok{border-color:var(--green); background:color-mix(in srgb, var(--green) 8%, var(--card))}
.state-banner strong{color:var(--txt)}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(196px,1fr)); gap:16px}
@media (max-width:480px){ .grid{ grid-template-columns:repeat(2, 1fr); gap:10px } }
.card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius-card);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border-soft)); transform:translateY(-2px)}
.thumb{
  aspect-ratio:16/9; width:100%; position:relative; overflow:hidden;
  background:var(--input); display:flex; align-items:center; justify-content:center;
}
.thumb .ph{font-family:'Be Vietnam Pro',sans-serif; font-size:30px; font-weight:700; color:#fff; opacity:.85}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.trailer-badge{
  position:absolute; bottom:7px; right:7px; width:22px; height:22px; border-radius:50%;
  background:rgba(10,9,7,.6); color:#fff; display:flex; align-items:center; justify-content:center;
  text-decoration:none; backdrop-filter:blur(3px);
}
.trailer-badge svg{width:11px; height:11px; margin-left:1px}
.trailer-badge:hover{background:var(--accent); color:var(--accent-ink)}

.card-body{padding:11px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
.eyebrow{display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:10.5px; font-weight:600}
.eyebrow-cat{display:flex; align-items:center; gap:4px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:.04em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cat-icon{width:11px; height:11px; flex:none; opacity:.9}
.eyebrow-status{display:flex; align-items:center; gap:5px; flex:none; text-transform:uppercase; letter-spacing:.04em}
.eyebrow-status i{width:6px; height:6px; border-radius:50%; display:inline-block}
.status-ok i{background:var(--green)} .status-ok{color:var(--green)}
.status-bad i{background:var(--red)} .status-bad{color:var(--red)}
.status-unknown i{background:var(--amber)} .status-unknown{color:var(--amber)}

.card-title{
  font-family:'Be Vietnam Pro',sans-serif; color:var(--txt); text-decoration:none;
  font-size:14px; font-weight:700; line-height:1.3; min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-title:hover{color:var(--accent)}
.card-review{
  font-size:11.5px; color:var(--txt-dim); line-height:1.45; min-width:0;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{margin-top:auto; padding-top:8px; border-top:1px solid var(--border-soft); display:flex; gap:6px; align-items:center}
.pass-chip{
  flex:1; min-width:0; display:flex; align-items:center; gap:5px; font-size:11px;
  color:var(--txt-dim); font-family:ui-monospace,monospace;
}
.pass-chip .val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt-sec)}
.pass-chip button, .pass-chip svg:first-child{color:var(--txt-dim)}
.pass-chip button{background:none; border:0; cursor:pointer; padding:6px; margin:-6px; display:flex}
.pass-chip button:hover{color:var(--accent)}
.dl-btn{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; text-decoration:none;
  background:var(--accent); color:var(--accent-ink); border-radius:var(--radius-chip);
}
.dl-btn:hover{filter:brightness(1.08)}
.dl-btn.disabled{background:var(--input); color:var(--txt-dim); pointer-events:none}
.dl-btn svg{width:14px; height:14px}

.empty{padding:48px 16px; text-align:center; color:var(--txt-dim); font-size:13px}

footer{
  border-top:1px solid var(--border-soft); padding-block:16px 32px;
  font-size:11.5px; color:var(--txt-dim); line-height:1.6;
}
footer a{color:var(--txt-sec)}

.skel{
  background:linear-gradient(100deg, var(--card) 40%, var(--card-hover) 50%, var(--card) 60%);
  background-size:200% 100%; animation:shimmer 1.3s infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){ .skel{animation:none} .sync-btn.spinning svg{animation:none} }

@media (max-width:480px){
  body{font-size:14px}
  header.top{padding-block:14px 12px}
  .title-row h1{font-size:18px}
  main{padding-block:16px 36px}
  .card-body{padding:9px 10px 10px}
  .card-title{font-size:13px; min-height:2.5em}
  .eyebrow-cat-text{display:none}
  .cat-icon{width:13px; height:13px}
}