:root{--bg:#0b0e16;--bg-soft:#111522;--panel:#171c2c;--panel-2:#1e2436;--border:#262e46;--text:#e9edf7;--muted:#97a0bd;--muted-2:#6b7491;--accent:#4f7cff;--accent-2:#8b5bff;--ok:#2fd97e;--danger:#ff6b6b;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:Inter,Segoe UI,system-ui,-apple-system,Arial,sans-serif;background:radial-gradient(1200px 600px at 20% -10%,#1a2140 0,var(--bg) 45%),var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}code{background:var(--panel-2);border:1px solid var(--border);padding:1px 6px;border-radius:6px;font-size:.9em;color:#b8c3ff}.app{max-width:1180px;margin:0 auto;padding:28px 20px 60px}.brand{display:flex;align-items:center;gap:16px;margin-bottom:28px;padding-top:8px}.brand-logo{width:54px;height:54px;display:grid;place-items:center;font-size:28px;border-radius:14px;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:var(--shadow)}.brand-text h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.3px}.brand-text p{margin:2px 0 0;color:var(--muted);font-size:14px}.player{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:26px;box-shadow:var(--shadow)}.player-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}.player-frame iframe,.player-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}.player-badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px}.player-badge.live{background:rgba(220,38,38,.85);color:#fff}.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:radial-gradient(400px 200px at 50% 30%,rgba(79,124,255,.18),transparent),#0a0d15}.ph-icon{font-size:44px;opacity:.85}.ph-title{margin:0;font-size:22px;font-weight:800}.ph-text{margin:0;max-width:460px;color:var(--muted);font-size:14px}.player-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 6px 4px}.player-name{margin:0;font-size:20px;font-weight:800}.player-nav{display:inline-flex;align-items:center;gap:8px;margin-left:auto}.nav-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}.nav-btn:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}.nav-pos{font-size:12px;font-weight:700;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.player-desc{flex-basis:100%;margin:2px 0 0;color:var(--muted);font-size:14px}.toolbar{margin-bottom:20px}.search-input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;margin-bottom:14px}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.22)}.search-input::placeholder{color:var(--muted-2)}.cat-chips{display:flex;flex-wrap:wrap;gap:8px}.chip-filter{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.chip-filter:hover{border-color:var(--accent);color:var(--text)}.chip-filter.on{background:linear-gradient(135deg,var(--accent),#6b5bff);border-color:transparent;color:#fff}.chip-filter .cnt{font-size:11px;opacity:.75;font-weight:700}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:16px;gap:16px}.card{position:relative;display:flex;flex-direction:column;text-align:left;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:0;overflow:hidden;color:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;font-family:inherit}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.card.playing,.card:hover{border-color:var(--accent)}.card.playing{box-shadow:0 0 0 2px rgba(79,124,255,.35)}.thumb{position:relative;height:96px;display:grid;place-items:center}.thumb-inner{width:54px;height:54px;display:grid;place-items:center;border-radius:12px;background:hsla(0,0%,100%,.14);font-size:22px;font-weight:800;color:#fff;letter-spacing:.5px}.thumb-tag{right:10px;background:rgba(0,0,0,.45);color:#fff}.status,.thumb-tag{position:absolute;top:10px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}.status{left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-online{background:rgba(47,217,126,.18);color:#b9f5d5}.status-online .status-dot{background:var(--ok);box-shadow:0 0 7px var(--ok)}.status-offline{background:hsla(0,100%,71%,.22);color:#ffc1c1}.status-offline .status-dot{background:var(--danger)}.status-checking{background:rgba(250,204,21,.18);color:#ffe9a8}.status-checking .status-dot{background:#facc15;animation:status-pulse 1s ease-in-out infinite}@keyframes status-pulse{50%{opacity:.35}}.cat-grad-berita{background:linear-gradient(135deg,#e0453a,#7a2430)}.cat-grad-hiburan{background:linear-gradient(135deg,#f59e0b,#d946b0)}.cat-grad-olahraga{background:linear-gradient(135deg,#10b981,#0f766e)}.cat-grad-anak{background:linear-gradient(135deg,#f97316,#facc15)}.cat-grad-film{background:linear-gradient(135deg,#8b5cf6,#4f46e5)}.cat-grad-musik{background:linear-gradient(135deg,#ec4899,#7c3aed)}.cat-grad-religi{background:linear-gradient(135deg,#14b8a6,#2563eb)}.cat-grad-dokumenter{background:linear-gradient(135deg,#3b82f6,#0ea5e9)}.cat-grad-luar{background:linear-gradient(135deg,#0ea5e9,#f472b6)}.card-body{padding:14px 14px 44px}.card-name{margin:0 0 8px;font-size:16px;font-weight:800}.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}.cat-berita{background:rgba(224,69,58,.18);color:#ffa19a}.cat-hiburan{background:rgba(217,70,176,.18);color:#f3a8e0}.cat-olahraga{background:rgba(16,185,129,.16);color:#9be8c9}.cat-anak{background:rgba(249,115,22,.18);color:#ffc38a}.cat-film{background:rgba(139,92,246,.18);color:#cbb4ff}.cat-musik{background:rgba(236,72,153,.18);color:#ffb3dc}.cat-religi{background:rgba(20,184,166,.16);color:#9fe8e2}.cat-dokumenter{background:rgba(59,130,246,.18);color:#aecbff}.cat-luar{background:rgba(244,114,182,.18);color:#ffc3e0}.card-desc{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.play-btn{position:absolute;bottom:14px;left:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent),#6b5bff);color:#fff;font-size:13px;box-shadow:var(--shadow);transition:transform .15s}.card:hover .play-btn{transform:scale(1.1)}.fav-btn{position:absolute;bottom:14px;right:14px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;font-family:inherit;transition:all .15s}.fav-btn.on,.fav-btn:hover{border-color:#facc15;color:#facc15}.fav-btn.on{background:rgba(250,204,21,.16);box-shadow:0 0 10px rgba(250,204,21,.25)}.fs-btn{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid hsla(0,0%,100%,.28);background:rgba(0,0,0,.5);color:#fff;font-size:14px;cursor:pointer;font-family:inherit;transition:background .15s}.fs-btn:hover{background:rgba(0,0,0,.78)}.quality{position:absolute;top:10px;right:52px;z-index:3}.quality-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:10px;border:1px solid hsla(0,0%,100%,.28);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}.quality-btn:hover{background:rgba(0,0,0,.78)}.quality-list{position:absolute;top:42px;right:0;margin:0;padding:6px;list-style:none;min-width:110px;border-radius:12px;border:1px solid var(--border);background:rgba(10,13,21,.94);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.quality-list li{padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s}.quality-list li:hover{background:var(--panel-2);color:var(--text)}.quality-list li.sel{background:rgba(79,124,255,.2);color:#fff}.quality-list li.dim{color:var(--muted-2);font-weight:500;cursor:default}.quality-list li.dim:hover{background:transparent;color:var(--muted-2)}.player-frame:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;background:#000}.player-frame:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;background:#000}.player-frame:-webkit-full-screen iframe,.player-frame:-webkit-full-screen video{object-fit:contain}.player-frame:fullscreen iframe,.player-frame:fullscreen video{object-fit:contain}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty-icon{font-size:40px;margin-bottom:8px}.btn-ghost{margin-top:12px;padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}.btn-ghost:hover{border-color:var(--accent)}.foot{margin-top:34px;text-align:center;color:var(--muted-2);font-size:12px}@media (max-width:560px){.brand-text h1{font-size:20px}.grid{grid-template-columns:1fr}.player-name{font-size:18px}}