.ysp-wrap { max-width: 1600px; margin: 0 auto; padding: 16px 24px; font-family: Roboto, Arial, sans-serif; color:#0f0f0f; }

/* ---------- Top bar ---------- */
.ysp-topbar { display:flex; align-items:center; gap:24px; margin-bottom:18px; }
.ysp-logo { font-size:20px; font-weight:700; white-space:nowrap; }
.ysp-search { flex:1; max-width:600px; margin:0 auto; display:flex; align-items:center; border:1px solid #ccc; border-radius:20px; overflow:hidden; }
.ysp-search input { flex:1; border:none; outline:none; padding:9px 16px; font-size:15px; }
.ysp-search button { border:none; background:#f8f8f8; border-left:1px solid #ccc; padding:9px 18px; cursor:pointer; display:flex; align-items:center; }
.ysp-avatar img { border-radius:50%; }

/* ---------- Category chips ---------- */
.ysp-chips { display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid #eee; scrollbar-width:none; }
.ysp-chips::-webkit-scrollbar { display:none; }
.ysp-chip { flex:0 0 auto; background:#f2f2f2; color:#0f0f0f; text-decoration:none; font-size:14px; font-weight:500; padding:7px 14px; border-radius:8px; white-space:nowrap; transition:background .15s; }
.ysp-chip:hover { background:#e5e5e5; }
.ysp-chip.active { background:#0f0f0f; color:#fff; }

/* ---------- Grid ---------- */
.ysp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px 16px; }
.ysp-card { text-decoration:none; color:inherit; display:block; }

.ysp-thumb-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.ysp-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.ysp-card:hover .ysp-thumb { transform:scale(1.02); }
.ysp-duration { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,0.8); color:#fff; font-size:12px; font-weight:600; padding:2px 6px; border-radius:4px; }

.ysp-card-row { display:flex; gap:10px; margin-top:10px; }
.ysp-card-avatar img, .ysp-card-avatar { border-radius:50%; flex:0 0 auto; width:36px; height:36px; }
.ysp-card-avatar img { width:36px; height:36px; }
.ysp-card-body { min-width:0; }
.ysp-card-title { font-size:15px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ysp-card-meta { font-size:13px; color:#606060; margin-top:2px; }

.ysp-pagination { margin-top:36px; display:flex; gap:8px; justify-content:center; }
.ysp-pagination a, .ysp-pagination span { padding:6px 12px; border-radius:6px; text-decoration:none; color:#0f0f0f; }
.ysp-pagination .current { background:#0f0f0f; color:#fff; }

/* ---------- Single lesson page ---------- */
.ysp-single { max-width:1100px; }
.ysp-back { display:inline-block; margin-bottom:16px; color:#065fd4; text-decoration:none; }
.ysp-title { font-size:20px; font-weight:600; margin-bottom:12px; }
.ysp-single-meta { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ysp-single-meta img { border-radius:50%; }
.ysp-single-instructor { font-weight:600; font-size:14px; }

.ysp-player { position:relative; width:100%; max-width:960px; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; margin-bottom:0; user-select:none; }
#ysp-yt-target { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* iframe can never be right-clicked or interacted with directly */
.ysp-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.25); cursor:pointer; }
.ysp-overlay.hidden { display:none; }
.ysp-playbtn { width:70px; height:70px; border-radius:50%; border:none; background:rgba(255,255,255,0.9); font-size:26px; cursor:pointer; }

.ysp-controls { display:flex; align-items:center; gap:12px; background:#0f0f0f; padding:8px 12px; border-radius:0 0 8px 8px; max-width:960px; }
.ysp-controls button { background:none; border:1px solid #555; color:#fff; padding:6px 12px; border-radius:4px; cursor:pointer; }
.ysp-progress { flex:1; height:6px; background:#444; border-radius:3px; cursor:pointer; position:relative; }
.ysp-progress-fill { height:100%; width:0%; background:#f00; border-radius:3px; }
.ysp-time { color:#ccc; font-size:12px; white-space:nowrap; }

.ysp-locked { padding:40px; text-align:center; background:#f4f4f4; border-radius:8px; max-width:960px; }
.ysp-login-btn { display:inline-block; margin-top:12px; padding:10px 20px; background:#065fd4; color:#fff; border-radius:20px; text-decoration:none; }

.ysp-description { max-width:960px; margin-top:20px; line-height:1.6; color:#333; }

@media (max-width: 700px) {
	.ysp-topbar { flex-wrap:wrap; }
	.ysp-search { order:3; flex-basis:100%; max-width:none; }
}