:root {
  --umalis-blue: #0f2a4a;
  --umalis-blue-2: #1a4b7a;
  --umalis-gold: #f0a830;
  --bg: #f7f9fc;
  --card: #ffffff;
  --text: #16233a;
  --muted: #5b6b82;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); }

.wtv-header { background: linear-gradient(135deg, var(--umalis-blue) 0%, var(--umalis-blue-2) 100%); color:#fff; padding:2.2rem 1.2rem 1.6rem; }
.wtv-brand { max-width:1100px; margin:0 auto; }
.wtv-back { color:#ffffffaa; text-decoration:none; font-size:.85rem; display:inline-block; margin-bottom:.6rem; }
.wtv-back:hover { color:#fff; }
.wtv-header h1 { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
.wtv-header h1 span { color:var(--umalis-gold); }
.wtv-tagline { color:#ffffffcc; margin-top:.35rem; font-size:1rem; }

.wtv-main { max-width:1100px; margin:0 auto; padding:1.4rem 1.2rem 3rem; }

.wtv-player-section { background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 6px 24px rgba(15,42,74,.08); margin-bottom:2rem; }
.wtv-player-frame { position:relative; background:#000; aspect-ratio:16/9; max-height:62vh; }
.wtv-player-frame video { width:100%; height:100%; object-fit:contain; display:block; }
.wtv-now-playing { position:absolute; top:10px; left:12px; background:rgba(15,42,74,.85); color:#fff; font-size:.75rem; padding:.28rem .7rem; border-radius:99px; }
.wtv-detail { padding:1.1rem 1.3rem 1.3rem; }
.wtv-detail h2 { font-size:1.35rem; margin-bottom:.4rem; }
.wtv-detail p { color:var(--muted); line-height:1.55; }
.wtv-meta { margin-top:.7rem; font-size:.8rem; color:var(--muted); display:flex; gap:1rem; flex-wrap:wrap; }
.wtv-meta .tag { background:#e8eef7; color:var(--umalis-blue-2); padding:.15rem .55rem; border-radius:99px; }

.wtv-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; margin-bottom:1rem; }
.wtv-toolbar h3 { font-size:1.15rem; }
.wtv-filters { display:flex; gap:.45rem; flex-wrap:wrap; }
.wtv-filters button { border:1px solid #d7e0ec; background:#fff; color:var(--muted); padding:.35rem .85rem; border-radius:99px; cursor:pointer; font-size:.85rem; }
.wtv-filters button.active { background:var(--umalis-blue); border-color:var(--umalis-blue); color:#fff; }

.wtv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.1rem; }
.wtv-card { background:var(--card); border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:0 3px 12px rgba(15,42,74,.06); transition:transform .15s, box-shadow .15s; }
.wtv-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(15,42,74,.12); }
.wtv-thumb { position:relative; aspect-ratio:16/9; background:#0c1c30; }
.wtv-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wtv-duration { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.75); color:#fff; font-size:.72rem; padding:.15rem .45rem; border-radius:4px; }
.wtv-card-body { padding:.8rem .95rem 1rem; }
.wtv-card-title { font-size:.95rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wtv-card-date { font-size:.75rem; color:var(--muted); margin-top:.4rem; }

.wtv-more-wrap { text-align:center; margin-top:1.6rem; }
.wtv-btn { background:var(--umalis-blue); color:#fff; border:none; padding:.65rem 1.6rem; border-radius:8px; font-size:.95rem; cursor:pointer; }
.wtv-btn:hover { background:var(--umalis-blue-2); }

.wtv-footer { border-top:1px solid #e3e9f2; padding:1.4rem; text-align:center; color:var(--muted); font-size:.85rem; }
.wtv-footer a { color:var(--umalis-blue-2); }

@media (max-width:640px) {
  .wtv-header h1 { font-size:1.6rem; }
  .wtv-grid { grid-template-columns:1fr 1fr; gap:.8rem; }
  .wtv-card-title { font-size:.85rem; }
}

.wtv-empty { text-align:center; color:var(--muted); padding:2.5rem 0; grid-column:1/-1; }