.page-header{min-height:36vh;display:flex;align-items:flex-end;padding-top:64px;padding-bottom:3.5rem;position:relative;overflow:hidden}
    .page-header .g-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}

    .stats-row{display:flex;gap:2.5rem;flex-wrap:wrap;padding:1.8rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:3rem}
    .stat-item .num{font-family:var(--display);font-size:1.8rem;font-weight:800;line-height:1}
    .stat-item .lbl{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.2rem}

    /* sheet guide */
    .sheet-guide{background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.15);border-radius:10px;padding:1.4rem 1.8rem;margin-bottom:2rem;font-size:.85rem;color:var(--muted);line-height:1.9}
    .sheet-guide strong{color:var(--text)}
    .sheet-guide code{background:rgba(var(--accent-rgb),.09);color:var(--accent);padding:.1rem .35rem;border-radius:3px;font-family:var(--mono);font-size:.78rem}

    /* filter bar */
    .filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem}
    .fbtn{padding:.45rem 1.1rem;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:.75rem;cursor:pointer;transition:all .2s;letter-spacing:.04em}
    .fbtn:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.06)}
    .fbtn.active{background:rgba(var(--accent-rgb),.1);border-color:var(--accent);color:var(--accent)}

    /* course grid */
    #course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}

    /* course card */
    .ccard{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .25s,transform .25s;position:relative}
    .ccard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 36px rgba(var(--accent-rgb),.08)}
    .ccard .ctop{height:3px;background:var(--cc,var(--accent))}

    .vthumb{position:relative;background:var(--accent2);aspect-ratio:16/9;overflow:hidden;cursor:pointer}
    .vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
    .vthumb:hover img{transform:scale(1.03)}
    .play-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,10,16,.38);transition:background .2s}
    .vthumb:hover .play-ov{background:rgba(5,10,16,.18)}
    .pbtn{width:52px;height:52px;background:var(--accent);border:2px solid var(--accent2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent2);transition:transform .2s,background .2s}
    .vthumb:hover .pbtn{transform:scale(1.12);background:var(--accent4)}
    .dur-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.72);color:#fff;font-family:var(--mono);font-size:.67rem;padding:.2rem .5rem;border-radius:3px}
    .lvl-badge{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:.65rem;padding:.2rem .6rem;border-radius:3px;font-weight:600;letter-spacing:.05em}
    .la1{background:rgba(var(--accent3-rgb),.16);color:var(--accent3);border:1px solid rgba(var(--accent3-rgb),.32)}
    .la2{background:rgba(var(--accent-rgb),.14);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3)}
    .lb1{background:rgba(var(--accent4-rgb),.14);color:var(--accent4);border:1px solid rgba(var(--accent4-rgb),.3)}

    .cbody{padding:1.2rem 1.4rem 1.4rem}
    .cnum{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.06em;margin-bottom:.5rem}
    .ctitle{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:.3rem;line-height:1.35}
    .cbalti{font-size:.82rem;color:var(--accent4);font-style:italic;margin-bottom:.5rem;font-family:var(--mono)}
    .cdesc{font-size:.84rem;color:var(--muted);font-weight:300;line-height:1.55;margin-bottom:1rem}
    .cactions{display:flex;gap:.6rem;flex-wrap:wrap}
    .btn-watch{flex:1;min-width:100px;padding:.55rem 1rem;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35);border-radius:6px;color:var(--accent);font-family:var(--mono);font-size:.75rem;text-align:center;cursor:pointer;transition:all .2s}
    .btn-watch:hover{background:rgba(var(--accent-rgb),.18)}
    .btn-dl{padding:.55rem 1rem;background:rgba(var(--accent3-rgb),.08);border:1px solid var(--accent3);border-radius:6px;color:var(--accent3);font-family:var(--mono);font-size:.75rem;text-decoration:none;display:flex;align-items:center;gap:.3rem;cursor:pointer;transition:all .2s}
    .btn-dl:hover{background:rgba(var(--accent3-rgb),.16)}

    /* modal */
    #vmodal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.88);align-items:center;justify-content:center;padding:1.5rem}
    #vmodal.open{display:flex}
    .minner{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;width:100%;max-width:860px;position:relative}
    .mhead{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid var(--border);background:var(--surface2)}
    .mtitle{font-family:var(--display);font-weight:700;font-size:.95rem}
    .mclose{width:32px;height:32px;background:rgba(var(--accent-rgb),.08);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
    .mclose:hover{background:rgba(var(--accent-rgb),.12);color:var(--text)}
    .mvideo{background:var(--accent2);aspect-ratio:16/9}
    .mvideo iframe{width:100%;height:100%;border:none;display:block}
    .mfoot{padding:1rem 1.4rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
    .mdesc{font-size:.84rem;color:var(--muted);flex:1}

    /* states */
    .state-msg{grid-column:1/-1;text-align:center;padding:5rem 2rem}
    .state-msg .ei{font-size:3rem;margin-bottom:1rem}
    .state-msg p{color:var(--muted);font-size:.9rem;max-width:480px;margin:.5rem auto 0;line-height:1.7}
    .state-msg code{background:rgba(var(--accent-rgb),.08);color:var(--accent);padding:.1rem .4rem;border-radius:3px;font-family:var(--mono);font-size:.8rem}
    .spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.2rem}
    @keyframes spin{to{transform:rotate(360deg)}}

    @media(max-width:700px){
      #course-grid{grid-template-columns:1fr}
      .stats-row{gap:1.4rem}
      .page-header .g-orb{display:none}
    }

/* ── inlined style= extractions ── */
.g-orb-top { width: 500px; height: 500px; background: radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 70%); top: -100px; right: -80px; }
.g-orb-bottom { width: 300px; height: 300px; background: radial-gradient(circle,rgba(var(--accent-rgb),.1),transparent 70%); bottom: -50px; left: -50px; }
.section-tag-mb { margin-bottom: .7rem; }
.page-desc-courses { color: var(--muted); max-width: 560px; margin-top: 1.1rem; font-weight: 300; font-size: 1rem; }
.container-courses-pad { padding-top: 2rem; padding-bottom: 5rem; }
.num-accent { color: var(--accent); }
.num-accent2 { color: var(--accent2); }
.num-accent3 { color: var(--accent3); }
.num-accent4 { color: var(--accent4); }
.filter-bar-mt { margin-top: 2rem; }
.modal-dl-hidden { display: none; }
.modal-yt-link { text-decoration: none; flex: unset; }