:root { --bg:#141210; --card:#1d1a17; --line:#2e2a25; --ink:#f4efe7; --dim:#a39a8c; --gold:#e8b04a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:var(--gold); }
button { font:inherit; }
header { padding:36px 40px 8px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 32px; }
h1 { margin:0; font-size:34px; letter-spacing:-.02em; }
h1 a { color:inherit; text-decoration:none; }
h1 span { color:var(--gold); }
.stats { color:var(--dim); }
.stats b { color:var(--ink); font-weight:600; }
.bar { padding:12px 40px 4px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip { border:1px solid var(--line); background:transparent; color:var(--dim); padding:6px 12px; border-radius:999px; cursor:pointer; font-size:13px; }
.chip:hover { color:var(--ink); border-color:#4a443c; }
.chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.playall { margin-left:auto; background:var(--gold); color:#1a1306; border:0; padding:9px 18px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:22px; padding:20px 40px 60px; }
.card { background:var(--card); border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--line); transition:transform .15s, border-color .15s; color:inherit; text-decoration:none; display:block; }
.card:hover { transform:translateY(-3px); border-color:#4a443c; }
.card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.thumb { position:relative; aspect-ratio:9/16; background:#000; }
.thumb img, .thumb video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb video { opacity:0; transition:opacity .2s; }
.card.preview .thumb video { opacity:1; }
.badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.65); padding:3px 8px; border-radius:6px; font-size:12px; font-variant-numeric:tabular-nums; }
.play { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .15s; }
.play i { width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; }
.play i::after { content:""; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px; }
.card:hover .play { opacity:1; }
.meta { padding:12px 14px 14px; }
.style { color:var(--gold); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.title { font-weight:600; font-size:16px; margin:2px 0 6px; }
.sub { color:var(--dim); font-size:13px; }
.empty { padding:40px; color:var(--dim); }
footer { padding:0 40px 40px; color:var(--dim); font-size:12px; }
footer a { color:var(--dim); }

/* Full-screen player (gallery) */
.player { position:fixed; inset:0; background:#000; display:none; z-index:10; }
.player.open { display:flex; }
.stage { flex:1; position:relative; display:grid; place-items:center; min-width:0; }
.stage video { max-width:100%; max-height:100vh; width:auto; height:100vh; object-fit:contain; background:#000; }
.ctrl { position:absolute; top:14px; left:14px; right:14px; display:flex; gap:8px; align-items:center; transition:opacity .3s; pointer-events:none; }
.ctrl > * { pointer-events:auto; }
.player.idle .ctrl, .player.idle .nav { opacity:0; }
.btn { background:rgba(20,18,16,.75); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 13px; font-size:13px; line-height:1; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn.on { background:#fff; color:#000; }
.grow { flex:1; }
.nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; font-size:22px; padding:0; justify-content:center; transition:opacity .3s; }
.nav.prev { left:16px; } .nav.next { right:16px; }
.info { width:380px; flex:none; background:#0d0c0b; border-left:1px solid #222; padding:64px 24px 24px; overflow:auto; color:var(--dim); font-size:14px; }
.info h2 { color:var(--ink); margin:2px 0 10px; font-size:22px; }
.info dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:18px 0; }
.info dt { color:#7d7569; } .info dd { margin:0; color:var(--ink); }
.player:fullscreen .info, .player.noinfo .info { display:none; }
.mshare { display:none; }
@media (max-width:900px) {
  .info { display:none; } .mshare { display:inline-flex; }
  header, .bar, .grid { padding-left:18px; padding-right:18px; }
  .grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .playall { margin-left:0; }
}

/* Share tools (gallery side panel and film page) */
.share h3 { color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:22px 0 8px; }
.share .row { display:flex; flex-wrap:wrap; gap:8px; }
.act { background:#24201c; color:var(--ink); border:1px solid #3a352e; border-radius:10px; padding:9px 12px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.act:hover { border-color:#5a5248; }
.act.primary { background:var(--gold); color:#1a1306; border-color:var(--gold); font-weight:600; }
.act small { color:var(--dim); font-weight:400; }
.act.primary small { color:#5b4410; }
.act.done { border-color:#5fae6e; color:#b8f0c2; }
.share textarea { width:100%; min-height:132px; background:#0f0e0d; color:var(--ink); border:1px solid #3a352e; border-radius:10px; padding:10px; font:13px/1.45 inherit; font-family:inherit; resize:vertical; }
.share .hint { font-size:12px; color:#7d7569; margin:6px 0 0; }
.share code { font-size:11px; color:var(--dim); word-break:break-all; }

/* Film share page */
.film { display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 520px); gap:40px; padding:10px 40px 60px; justify-content:center; }
.film .vid { position:relative; aspect-ratio:9/16; background:#000; border-radius:16px; overflow:hidden; }
.film .vid.f45 { aspect-ratio:4/5; }
.film video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.film .fmt { display:flex; gap:8px; margin:12px 0 0; }
.film h2 { font-size:30px; margin:4px 0 8px; letter-spacing:-.01em; }
.film .desc { color:var(--dim); }
@media (max-width:900px) { .film { grid-template-columns:1fr; padding:4px 14px 40px; gap:18px; } .film .vid { max-height:78vh; margin:0 auto; } }