.page-main{padding:72px 24px 60px;max-width:1100px;margin:0 auto;}

.page-header{text-align:center;margin-bottom:32px;}
.page-header h1{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:600;margin-bottom:12px;}
.page-header p{color:var(--cs-text-muted);font-size:15px;}

.filter-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.filter-tab{padding:8px 18px;border-radius:999px;border:1px solid var(--cs-border);background:var(--cs-surface);color:var(--cs-text-muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.2s;}
.filter-tab:hover{border-color:var(--cs-primary);color:var(--cs-text);}
.filter-tab.is-active{background:var(--cs-primary);border-color:var(--cs-primary);color:#fff;}

.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.video-card{background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:var(--cs-radius);overflow:hidden;cursor:pointer;transition:transform 0.2s,border-color 0.2s;}
.video-card:hover{transform:translateY(-4px);border-color:var(--cs-primary);}
.video-card.is-hidden{display:none;}

.video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(124,58,237,0.25),rgba(14,165,233,0.2));display:flex;align-items:center;justify-content:center;font-size:40px;}
.video-thumb--tutorial{background:linear-gradient(135deg,rgba(124,58,237,0.3),rgba(236,72,153,0.2));}
.video-thumb--walkthrough{background:linear-gradient(135deg,rgba(14,165,233,0.3),rgba(34,197,94,0.2));}
.video-thumb--release{background:linear-gradient(135deg,rgba(34,197,94,0.3),rgba(124,58,237,0.2));}

.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);transition:background 0.2s;}
.video-card:hover .play-overlay{background:rgba(0,0,0,0.4);}
.play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--cs-primary);padding-left:4px;box-shadow:0 4px 20px rgba(0,0,0,0.3);}

.video-info{padding:16px;}
.video-info h3{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.35;}
.video-meta{font-size:12px;color:var(--cs-text-muted);display:flex;gap:12px;}

.video-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity 0.25s,visibility 0.25s;}
.video-modal-overlay.is-open{opacity:1;visibility:visible;}

.video-modal{background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:var(--cs-radius);max-width:480px;width:100%;padding:36px;text-align:center;position:relative;transform:translateY(16px);transition:transform 0.25s;}
.video-modal-overlay.is-open .video-modal{transform:translateY(0);}

.video-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--cs-border);background:var(--cs-background);color:var(--cs-text);cursor:pointer;font-size:18px;}
.video-modal h2{font-size:1.3rem;font-weight:700;margin-bottom:12px;}
.video-modal p{color:var(--cs-text-muted);font-size:15px;line-height:1.65;margin-bottom:20px;}