/* YTAP Pro Plus v1.1 UI */
.ytappp-wrap{ --gap:14px; --panel:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --accent:#10b981;
  margin:12px 0 20px; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.ytappp-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.ytappp-title{ font-weight:800; color:#111827; }
.ytappp-search input{ width:260px; max-width:40vw; background:#fff; border:1px solid #cbd5e1; padding:8px 10px; border-radius:10px; outline:none }
.ytappp-search input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15) }

.ytappp-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.ytappp-tabs button{ background:#0f172a; color:#e2e8f0; border:0; border-radius:9px; padding:8px 12px; cursor:pointer; font-weight:700 }
.ytappp-tabs button.active{ background:linear-gradient(90deg, rgba(16,185,129,.25), transparent); outline:1px solid rgba(16,185,129,.35) }

.ytappp-body{ display:grid; grid-template-columns: 400px 1fr; gap:var(--gap); align-items:start }
.ytappp-list{ background:var(--panel); color:var(--fg); border-radius:12px; border:1px solid #121a2c; max-height:640px; overflow:auto }
.ytappp-item{ display:flex; gap:10px; padding:10px; border-bottom:1px solid #152137; cursor:pointer }
.ytappp-item:hover{ background:#121a2c }
.ytappp-item.active{ background:linear-gradient(90deg, rgba(16,185,129,.25), transparent) }
.ytappp-thumb{ width:120px; height:70px; border-radius:10px; overflow:hidden; background:#0f172a }
.ytappp-thumb img{ width:100%; height:100%; object-fit:cover }
.ytappp-badge{ position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.75); color:#fff; font-weight:800; font-size:11px; padding:3px 6px; border-radius:6px }
.ytappp-meta{ min-width:0 }
.ytappp-title-t{ font-size:13px; font-weight:800; color:#f8fafc; margin:0 0 4px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ytappp-sub{ font-size:11px; color:var(--muted); display:flex; gap:8px; align-items:center }
.ytappp-dot{ width:5px; height:5px; border-radius:50%; background:#7587a5; display:inline-block }

.ytappp-player .ytappp-frame{ position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#0f172a }
.ytappp-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.ytappp-controls{ display:flex; gap:8px; margin-top:10px }
.ytappp-controls button{ background:#0f172a; color:#fff; border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer }
.ytappp-empty{ color:#334155; background:#f1f5f9; border:1px dashed #cbd5e1; padding:16px; border-radius:10px; text-align:center }

@media (max-width: 1024px){
 .ytappp-body{ grid-template-columns: 1fr }
 .ytappp-list{ max-height:360px; order:2 }
 .ytappp-player{ order:1 }
}