:root{
    --canvas:#12141c;
    --panel:#1a1d29;
    --panel-2:#232735;
    --line:#2c303e;
    --text:#e7e8f0;
    --muted:#9a9db3;
    --blue:#6d94ff;
    --purple:#b083ff;
    --grad: linear-gradient(135deg, var(--blue), var(--purple));
    --ae:#ff7a52;
    --pr:#33c6ee;
    --ps:#6d94ff;
    --gl:#ff7fb8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--canvas);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Sora', sans-serif;}
  .mono{font-family:'JetBrains Mono', monospace; letter-spacing:.02em;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none; color:inherit;}

  /* ---------- TOP STRIP ---------- */
  .topstrip{
    background:var(--panel-2);
    color:var(--text);
    text-align:center;
    font-size:13px;
    font-weight:600;
    padding:8px 12px;
    letter-spacing:.02em;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(18,20,28,.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  header::before{
    content:"";
    display:block; height:48px; width:100%;
    background: linear-gradient(90deg, var(--blue), var(--purple));
  }
  nav{
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
  }
  .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; background:none; padding:0; border-radius:0; width:fit-content;}
  .nav-logo-img{height:110px; width:auto; display:block; object-fit:contain;}
  .logo svg{width:30px;height:30px;}
  .navlinks{display:flex; align-items:center; gap:6px;}
  .navlinks > *{position:relative;}
  .navbtn{
    background:none; color:var(--text); font-size:14.5px; font-weight:500;
    padding:9px 14px; border-radius:8px; display:flex; align-items:center; gap:5px;
    transition:background .15s;
  }
  .navbtn:hover{background:var(--panel-2);}
  .navbtn.active{background:var(--panel-2); color:var(--text);}
  .caret{font-size:10px; opacity:.7; transition:transform .15s;}
  .navbtn.open .caret{transform:rotate(180deg);}
  .cart-pill{
    display:flex; align-items:center; gap:6px;
    background:var(--panel-2); border:1px solid var(--line);
    padding:8px 13px; border-radius:20px; font-size:13.5px;
  }
  .badge{
    background:var(--grad); color:#fff; font-size:10.5px; font-weight:700;
    padding:1px 6px; border-radius:10px;
  }

  /* dropdown panel (Resources / Login) */
  .dropdown{
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:14px; width:230px;
    box-shadow:0 20px 40px rgba(0,0,0,.4);
    display:none; z-index:60;
  }
  .dropdown.show{display:block; animation:fade .15s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
  .dropdown a, .dropdown .drow{
    display:block; padding:8px 10px; border-radius:7px; font-size:13.5px; color:var(--muted);
  }
  .dropdown a:hover{background:var(--panel-2); color:var(--text);}

  /* auth panel */
  .authbox{width:290px;}

  .auth-title{font-size:13.5px; font-weight:700; margin-bottom:12px; color:var(--text);}
  .purchase-item{
    display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    padding:9px 11px; margin-bottom:8px; font-size:12.5px;
  }
  .purchase-item .pname{color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;}
  .purchase-item .pprice{color:var(--muted); flex-shrink:0;}
  .watch-course-btn{
    background:var(--grad); color:#fff; font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; width:100%; margin-top:4px;
  }
  .purchase-empty{font-size:12.5px; color:var(--muted); text-align:center; padding:20px 0;}
  .authtabs{display:flex; background:var(--panel-2); border-radius:8px; padding:3px; margin-bottom:14px;}
  .authtab{flex:1; text-align:center; padding:7px 0; border-radius:6px; font-size:13px; font-weight:600; color:var(--muted); background:none;}
  .authtab.active{background:var(--grad); color:#fff;}
  .authbox input{
    width:100%; background:var(--canvas); border:1px solid var(--line); color:var(--text);
    padding:9px 11px; border-radius:7px; font-size:13.5px; margin-bottom:9px;
  }
  .authbox input:focus{outline:none; border-color:var(--blue);}
  .authsubmit{
    width:100%; background:var(--grad); color:#fff; font-weight:700; font-size:13.5px;
    padding:10px 0; border-radius:7px; margin-top:2px;
  }
  .authhint{font-size:11px; color:var(--muted); text-align:center; margin-top:9px;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; max-width:1280px; margin:0 auto;
    padding:70px 28px 90px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    isolation:isolate;
  }
  .hero::before{
    content:"";
    position:absolute; z-index:-1;
    top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    background:
      radial-gradient(60% 70% at 88% 25%, rgba(148,81,255,.35), transparent 60%),
      radial-gradient(50% 60% at 6% 92%, rgba(255,190,60,.14), transparent 60%),
      linear-gradient(120deg, #1c1442 0%, #2b1f68 55%, #241a52 100%);
  }
  .hero, .hero h1, .hero p.sub, .hero .eyebrow, .hero .featrow div{color:#f2f1f6;}
  .hero .eyebrow, .hero p.sub, .hero .featrow div{color:rgba(242,241,246,.72);}
  .ruler-h{position:absolute; top:0; left:28px; right:28px; height:22px; display:flex;}
  .ruler-h span{flex:1; border-left:1px solid rgba(255,255,255,.12); font-size:9px; color:rgba(255,255,255,.4); padding-left:3px;}
  .eyebrow{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; margin-bottom:22px;}
  .avatars{display:flex;}
  .avatars span{
    width:24px;height:24px;border-radius:50%; background:var(--grad); border:2px solid #241a52;
    margin-left:-8px; display:inline-block;
  }
  .avatars span:first-child{margin-left:0;}
  .hero h1{font-size:52px; font-weight:800; line-height:1.06; margin-bottom:20px;}
  .hero h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero p.sub{font-size:17px; max-width:460px; margin-bottom:30px; line-height:1.55;}
  .cta{
    background:var(--grad); color:#fff; font-weight:700; font-size:14.5px;
    padding:14px 26px; border-radius:9px; display:inline-block;
    box-shadow:0 10px 30px rgba(79,124,255,.25);
  }
  .featrow{display:flex; gap:24px; margin-top:30px; flex-wrap:wrap;}
  .featrow div{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted);}

  /* hero visual: photo + floating mock */
  .hero-visual{position:relative;}
  .hero-photo-wrap{
    position:relative; overflow:visible;
    display:flex; align-items:flex-start; justify-content:center;
    /* banner box stays this size; anything past it (the extra hanging bit) is clipped */
    height:calc(420px - 1in);
  }
  .hero-photo, .webinar-hero-photo{
    width:100%; height:100%; display:block; object-fit:contain; object-position:center top;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
    -webkit-mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
    /* Scale/position is applied inline by renderHeroPhoto()/renderWebImgPhoto()
       from the Hero Photo / Webinar Image dashboards' saved settings; this is
       just the pre-JS fallback. */
    transform:scale(1.32);
    transform-origin:center top;
  }
  @media(max-width:880px){
    .hero-photo-wrap{height:calc(320px - 1in);}
  }

  /* hero artboard mock */
  .artboard-mock{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.45);
  }
  .mock-top{
    display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel-2);
  }
  .mock-dot{width:9px;height:9px;border-radius:50%; background:#484755;}
  .mock-title{margin-left:10px; font-size:11.5px; color:var(--muted);}
  .mock-body{padding:22px; position:relative;}
  #cursorTag{
    position:absolute; background:var(--grad); color:#fff; font-size:10px; padding:2px 7px; border-radius:5px;
    pointer-events:none; opacity:0; transition:opacity .1s; z-index:5;
  }
  .layerlist{display:flex; flex-direction:column; gap:9px;}
  .layerrow{
    display:flex; align-items:center; gap:10px; background:var(--canvas); border:1px solid var(--line);
    padding:10px 12px; border-radius:8px; font-size:12.5px;
  }
  .toolchip{
    width:26px;height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:800; color:#fff; flex-shrink:0;
  }
  .layerrow .lname{flex:1; color:var(--text); font-weight:500;}
  .layerrow .lmeta{color:var(--muted); font-size:11px;}

  /* ---------- SECTION SHELL ---------- */
  .section{max-width:1280px; margin:0 auto; padding:60px 28px; display:block; scroll-margin-top:90px;}
  .hero.sec-hidden, .section.sec-hidden{display:none;}

  /* Webinar page now uses the same two-column layout as the homepage
     hero (photo visible on the right). Everything inside the left text
     column (title, countdown, Join/Reserve button, feature row) is
     centered within that column, instead of hugging its left edge. */
  #webinarPageContent{width:100%; text-align:center;}
  #webinarPageContent .eyebrow, #webinarPageContent .featrow{justify-content:center;}
  #webinarPageContent p.sub, #webinarPageContent #webinarPageCountdown{margin-left:auto; margin-right:auto;}
  .sec-eyebrow{color:var(--blue); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
  .sec-title{font-size:32px; font-weight:800; margin-bottom:34px;}

  /* intro video */
  .intro-video-wrap{max-width:900px; margin:0 auto;}
  .intro-video-label{color:var(--muted); font-size:12px; margin-bottom:10px;}
  .intro-video{
    width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--line); background:#000;
    display:block; box-shadow:0 20px 50px rgba(0,0,0,.35); object-fit:cover; object-position:top center;
  }
  .intro-play-btn{
    width:76px; height:76px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(79,124,255,.4); transition:transform .15s;
  }
  .intro-video-fallback:hover .intro-play-btn{transform:scale(1.08);}
  .intro-player-shell:fullscreen{display:flex; align-items:center; background:#000;}
  .intro-player-shell:-webkit-full-screen{display:flex; align-items:center; background:#000;}
  .intro-player-shell:fullscreen video, .intro-player-shell:-webkit-full-screen video{
    width:100%; height:100%; object-fit:contain;
  }
  .intro-play-icon{width:0; height:0; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px;}

  /* license admin */
  .lic-stats{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
  .lic-stats > div{flex:1; min-width:130px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
  .lic-stat-num{font-size:28px; font-weight:800; margin-bottom:4px;}
  .lic-stat-label{font-size:12.5px; color:var(--muted);}
  .lic-issue-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:24px;}
  .lic-issue-title{font-size:13.5px; font-weight:700; margin-bottom:14px;}
  .lic-issue-row{display:flex; gap:10px; flex-wrap:wrap;}
  .lic-issue-row input{
    flex:1; min-width:140px; background:var(--canvas); border:1px solid var(--line); color:var(--text);
    padding:10px 12px; border-radius:8px; font-size:13px;
  }
  .lic-filters{margin-bottom:16px;}
  .lic-filters input{
    width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:10px 14px; border-radius:8px; font-size:13px;
  }
  .lic-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px;}
  .lic-table{width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap;}
  .lic-table th{
    text-align:left; padding:12px 14px; background:var(--panel-2); color:var(--muted); font-weight:600; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--line);
  }
  .lic-table td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
  .lic-table tr:last-child td{border-bottom:none;}
  .lic-key{font-family:'JetBrains Mono', monospace; color:var(--blue); font-size:11.5px;}
  .lic-buyer-name{font-weight:600;}
  .lic-buyer-sub{color:var(--muted); font-size:11px;}
  .lic-badge{padding:3px 9px; border-radius:12px; font-size:10.5px; font-weight:700;}
  .lic-badge.active{background:rgba(74,222,128,.15); color:#4ade80;}
  .lic-badge.revoked{background:rgba(255,128,128,.15); color:#ff8080;}
  .lic-badge.installed{background:rgba(79,124,255,.15); color:var(--blue);}
  .lic-badge.notinstalled{background:var(--panel-2); color:var(--muted);}
  .lic-actions{display:flex; gap:6px;}
  .lic-btn{font-size:10.5px; font-weight:700; padding:6px 10px; border-radius:6px;}
  .lic-btn.activate{background:#1a3a2e; color:#4ade80;}
  .lic-btn.revoke{background:#3a1e1e; color:#ff8080;}
  .lic-empty{padding:30px; text-align:center; color:var(--muted); font-size:13px;}

  /* ---------- drag-to-reorder (admin lists) ---------- */
  .drag-row{cursor:default; transition:background .12s, opacity .12s;}
  .drag-handle{
    flex-shrink:0; cursor:grab; color:var(--muted); font-size:16px; padding:2px 4px;
    user-select:none; touch-action:none;
  }
  .drag-handle:active{cursor:grabbing;}
  .drag-row.dragging{opacity:.4;}
  .drag-row.drag-over{background:var(--panel-2); box-shadow:inset 0 2px 0 var(--blue);}
  .paymethod-tabs{display:flex; gap:8px; background:var(--panel-2); border-radius:10px; padding:4px;}
  .paymethod-tab{
    flex:1; padding:9px 0; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--muted); background:none;
  }
  .paymethod-tab.active{background:var(--panel); color:var(--text); box-shadow:0 2px 6px rgba(20,20,40,.08);}

  /* ---------- webinar banner (public) ---------- */
  .webinar-banner{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:linear-gradient(90deg, #1a1830, #2a1f4a); color:#fff; padding:18px 32px; margin:0;
  }
  .webinar-banner-tag{
    display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    background:rgba(255,255,255,.14); padding:3px 10px; border-radius:20px; margin-bottom:8px;
  }
  .webinar-banner-text h3{font-size:16px; font-family:'Sora', sans-serif; margin:0 0 4px;}
  .webinar-banner-when{font-size:12.5px; color:#c9c4e8; margin-bottom:16px;}
  .webinar-banner-desc{font-size:12.5px; color:#c9c4e8; max-width:560px; margin:4px 0 0;}
  /* flex:none stops it inheriting .btn's flex-grow:1, which was stretching
     this button across the leftover banner width and showing up as a big
     empty dark box behind the "Reserve Your Seat" text. Banner height/size
     is untouched — only this button's own width is now content-sized. */
  /* !important needed here too — the .btn rule (flex:1) comes LATER in
     this stylesheet, so without !important it was winning the cascade
     and stretching this button across the banner again. */
  .webinar-banner-cta{flex:none !important; width:auto !important; padding:12px 22px !important;}
  @media(max-width:700px){ .webinar-banner{padding:16px 20px;} }

  /* ---------- webinar countdown (banner + full page) ---------- */
  .webinar-countdown{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;}
  .webinar-countdown-label{font-size:12.5px; color:#c9c4e8; margin-right:2px;}
  .webinar-countdown-box{
    display:inline-flex; align-items:baseline; gap:3px; background:rgba(255,255,255,.12);
    padding:6px 12px; border-radius:8px; font-size:23px; font-weight:800; color:#fff; line-height:1;
    font-family:'Courier New', 'SF Mono', monospace; font-variant-numeric:tabular-nums; letter-spacing:.5px;
  }
  .webinar-countdown-box small{font-size:12.5px; font-weight:600; color:#c9c4e8; margin-left:2px; font-family:'Sora', sans-serif;}
  .webinar-countdown-extra{font-size:12.5px; color:#c9c4e8;}
  .webinar-countdown-live{font-size:12.5px; font-weight:800; color:#ff5f5f;}

  /* ---------- plugin license dashboard ---------- */
  .lic-badge.expired{background:#3a1e1e; color:#ff8080;}
  .lic-badge.locked{background:#3a2e14; color:#f5c542;}
  .lic-badge.unlocked{background:var(--panel-2); color:var(--muted);}
  .lic-btn.reset{background:#3a2e14; color:#f5c542;}
  .lic-btn.simulate{background:#1a2a4a; color:#6d94ff;}
  .lic-btn.setvalidity{background:var(--panel-2); color:var(--text); border:1px solid var(--line);}
  .pld-block-title{font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:26px 0 14px;}
  .pld-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px;}
  .pld-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
  .pld-card-name{font-weight:700; font-size:13.5px; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pld-card-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px;}
  .pld-card-row b{color:var(--text); font-weight:700;}
  .pld-progress-track{background:var(--panel-2); border-radius:20px; height:8px; margin:10px 0 8px; overflow:hidden;}
  .pld-progress-fill{background:var(--grad); height:100%; border-radius:20px; transition:width .3s;}
  .pld-target-row{display:flex; gap:6px; margin-top:10px;}
  .pld-target-row input{
    flex:1; min-width:0; background:var(--canvas); border:1px solid var(--line); color:var(--text);
    padding:7px 9px; border-radius:7px; font-size:12px;
  }
  .pld-target-row button{
    flex-shrink:0; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:7px 12px; border-radius:7px; font-size:11.5px; font-weight:700;
  }
  .pld-target-row button:hover{background:var(--grad); color:#fff; border-color:transparent;}
  .validity-cell input[type="date"]{
    background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:6px 8px;
    border-radius:6px; font-size:11.5px; width:130px;
  }

  /* my dashboard */
  .dash-block{margin-bottom:44px;}
  .dash-purchases-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}
  .dash-purchase-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;
  }
  .dash-purchase-card .dpname{font-size:14px; font-weight:700; margin-bottom:6px;}
  .dash-purchase-card .dpprice{font-size:12.5px; color:var(--muted); margin-bottom:4px;}
  .dash-purchase-card .dpdate{font-size:11px; color:var(--muted);}
  .dash-empty{font-size:13px; color:var(--muted); padding:20px 0;}

  .dash-playlist-grid{display:flex; flex-direction:column; gap:20px; max-width:760px;}
  .dash-playlist-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer;
    transition:transform .18s, border-color .18s;
  }
  .dash-playlist-card:hover{transform:translateY(-4px); border-color:#454455;}
  .dpl-thumb{
    aspect-ratio:16/7; position:relative; background:radial-gradient(circle at 30% 20%, #23233a, #14141a 70%);
    display:flex; align-items:center; justify-content:center;
  }
  .dpl-thumb .play{width:72px; height:72px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(255,45,45,.45);}
  .dpl-thumb .play::after{content:""; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:4px;}
  .dpl-badge{position:absolute; bottom:14px; right:14px; background:rgba(0,0,0,.65); color:#fff; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:6px;}
  .dpl-body{padding:18px 20px;}
  .dpl-body h4{font-size:17px; margin-bottom:4px;}
  .dpl-body p{font-size:12px; color:var(--muted);}

  /* protected course player */
  .player-layout{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start;}
  .player-main{
    position:relative; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    user-select:none; -webkit-user-select:none;
  }
  .player-main video{width:100%; display:block; max-height:640px; aspect-ratio:16/9; background:#000; pointer-events:auto; object-fit:cover;}
  .player-main video::-webkit-media-controls-download-button{display:none !important;}
  .player-main iframe{max-height:640px;}
  .player-main:fullscreen{display:flex; flex-direction:column; background:#000;}
  .player-main:-webkit-full-screen{display:flex; flex-direction:column; background:#000;}
  .player-main:fullscreen video, .player-main:fullscreen iframe,
  .player-main:-webkit-full-screen video, .player-main:-webkit-full-screen iframe{
    flex:1; height:auto; max-height:none;
  }
  .player-watermark{
    position:absolute; top:14px; left:16px; color:rgba(255,255,255,.35); font-size:11px; font-weight:700;
    letter-spacing:.05em; z-index:9; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  /* Fullscreen makes the watermark a bit more legible since it's now the
     only on-brand element visible over the full display. */
  .player-main:fullscreen .player-watermark,
  .player-main:-webkit-full-screen .player-watermark{
    top:20px; left:24px; font-size:13px; color:rgba(255,255,255,.45);
  }
  .drive-fs-block, .video-fs-block{
    position:absolute; top:0; right:0; width:64px; height:56px; z-index:8;
    background:#000; border:0; border-bottom-left-radius:10px; color:rgba(255,255,255,.7); font-size:20px; cursor:pointer;
  }
  .drive-fs-block:hover, .video-fs-block:hover{color:#fff; background:#111;}
  .yt-custom-controls{
    position:absolute; left:0; right:0; bottom:0; z-index:5;
    display:none; align-items:center; gap:10px;
    background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 70%, transparent);
    padding:22px 14px 12px;
  }
  .yt-custom-controls button{background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; padding:2px;}
  .yt-custom-controls button:hover{color:var(--muted, #ccc);}
  .yt-progress-wrap{flex:1; height:5px; background:rgba(255,255,255,.25); border-radius:3px; cursor:pointer; position:relative; touch-action:none;}
  .yt-progress-wrap:hover, .yt-progress-wrap.scrubbing{height:7px;}
  .yt-progress-bar{position:absolute; top:0; left:0; height:100%; width:0%; background:#7c5cff; border-radius:3px; pointer-events:none;}
  .yt-progress-wrap::after{
    content:''; position:absolute; left:-4px; right:-4px; top:-8px; bottom:-8px;
  }
  .yt-time{color:rgba(255,255,255,.85); font-size:11.5px; flex-shrink:0; white-space:nowrap;}
  .player-current-title{padding:14px 16px; font-size:13.5px; font-weight:600; border-top:1px solid var(--line); background:var(--panel);}
  .player-speed-row{display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--line); background:var(--panel);}
  .player-speed-label{font-size:11.5px; color:var(--muted); margin-right:2px;}
  .speed-btn{background:var(--panel-2); color:var(--muted); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:6px;}
  .speed-btn.active{background:var(--grad); color:#fff;}
  .player-playlist{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    max-height:700px; overflow-y:auto;
  }
  .pl-item{
    display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px;
  }
  .pl-item:hover{background:var(--panel-2);}
  .pl-mini-play{
    margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:50%;
    background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .pl-mini-play::after{content:""; border-left:7px solid var(--muted); border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px;}
  .pl-item.active .pl-mini-play{background:var(--grad); border:none;}
  .pl-item.active .pl-mini-play::after{border-left-color:#fff;}
  .pl-edit-btn{
    flex-shrink:0; width:26px; height:26px; border-radius:7px;
    background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .pl-edit-btn:hover{background:var(--grad); color:#fff; border-color:transparent;}
  .pl-item.active{background:linear-gradient(90deg, rgba(79,124,255,.15), transparent);}
  .pl-num{
    width:24px; height:24px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--muted); flex-shrink:0;
  }
  .pl-item.active .pl-num{background:var(--grad); color:#fff; border:none;}
  .player-note{margin-top:18px; font-size:12px; color:var(--muted); text-align:center;}
  @media(max-width:820px){ .player-layout{grid-template-columns:1fr;} .player-playlist{max-height:300px;} }

  /* product detail page (gear & plugins) */
  .pd-hero{background: linear-gradient(135deg, #1a2140, #0d0f1f 70%);}
  .pd-hero .cd-checklist li::before{border-color:#8ba3ff; color:#8ba3ff;}
  .pd-specs{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px;
  }
  .pd-spec-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
  .pd-spec-item .pdsk{font-size:11.5px; color:var(--muted); margin-bottom:4px;}
  .pd-spec-item .pdsv{font-size:15px; font-weight:700;}

  /* course detail page */
  .cd-hero{
    background: linear-gradient(135deg, #1a3a2e, #0d1f18 70%);
    border:1px solid var(--line); border-radius:20px; padding:38px 34px; margin-bottom:20px;
  }
  .cd-hero h2{font-size:32px; font-weight:800; margin-bottom:22px; color:#fff;}
  .cd-checklist{list-style:none; margin-bottom:22px;}
  .cd-checklist li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#e8f5ee; margin-bottom:11px; line-height:1.4;}
  .cd-checklist li::before{content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1.5px solid #7fd8a8; color:#7fd8a8; font-size:11px; display:flex; align-items:center; justify-content:center; margin-top:1px;}
  .cd-rating{font-size:13px; color:#cfe8da; margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .cd-dot{opacity:.5;}
  .cd-stars{color:#f5b942;}
  .cd-infobox{
    display:flex; border:1px solid rgba(255,255,255,.15); border-radius:12px; overflow:hidden; margin-bottom:24px; flex-wrap:wrap;
  }
  .cd-infobox > div{flex:1; min-width:140px; padding:14px 20px; border-right:1px solid rgba(255,255,255,.15);}
  .cd-infobox > div:last-child{border-right:none;}
  .cd-info-label{font-size:11.5px; color:#9fc7ae; margin-bottom:4px;}
  .cd-info-val{font-size:16px; font-weight:700; color:#fff;}
  .cd-hero-btns{display:flex; gap:12px; flex-wrap:wrap;}

  .cd-outcome{margin-top:50px; text-align:center;}
  .cd-outcome-title{font-size:24px; font-weight:800; margin-bottom:26px;}
  .cd-outcome-title .hl{color:var(--blue);}
  .cd-stats{
    display:flex; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 10px; flex-wrap:wrap; justify-content:center;
  }
  .cd-stats > div{flex:1; min-width:130px; padding:10px 14px; border-right:1px solid var(--line);}
  .cd-stats > div:last-child{border-right:none;}
  .cd-stat-num{font-size:26px; font-weight:800; color:var(--blue); margin-bottom:4px;}
  .cd-stat-label{font-size:12.5px; color:var(--muted);}
  @media(max-width:640px){
    .cd-hero h2{font-size:24px;}
    .cd-stats > div{border-right:none; border-bottom:1px solid var(--line);}
    .cd-stats > div:last-child{border-bottom:none;}
  }

  .cd-module{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:18px; overflow:hidden;}
  .cd-module-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; background:var(--panel-2);}
  .cd-module-head h4{font-size:15.5px;}
  .cd-module-head .cd-count{font-size:12px; color:var(--muted); font-weight:500;}
  .cd-lectures{list-style:none; max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .cd-module.open .cd-lectures{max-height:1000px;}
  .cd-lectures li{
    display:flex; align-items:flex-start; gap:12px; padding:12px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--text);
  }
  .cd-lec-title{font-weight:600; padding-top:4px;}
  .cd-lec-subs{list-style:none; margin-top:6px;}
  .cd-lec-subs li{padding:3px 0; border-top:none; font-size:12px; color:var(--muted);}
  .cd-lec-subs li::before{content:"— "; color:var(--muted);}
  .cd-lec-num{
    width:26px; height:26px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--muted); flex-shrink:0; margin-top:2px;
  }
  .cd-chevron{transition:transform .2s;}
  .cd-module.open .cd-chevron{transform:rotate(180deg);}

  /* course cards */
  .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
  .yt-grid{gap:30px;}
  .card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    transition:transform .18s, border-color .18s;
  }
  .card:hover{transform:translateY(-4px); border-color:#454455;}
  .card-top{
    height:150px; position:relative; padding:14px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .card-top .tag{
    align-self:flex-start; background:rgba(0,0,0,.35); color:#fff; font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:5px;
  }
  .card-top .icon{
    position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
  .card-top h3{color:#fff; font-size:19px; line-height:1.15; max-width:75%;}
  .card-top p{color:rgba(255,255,255,.75); font-size:11.5px; margin-top:4px;}
  .card-body{padding:16px;}

  /* new course card-top: world-map bg + founder photo */
  .new-course-top{
    height:230px; padding:16px; overflow:hidden;
    background:
      radial-gradient(circle at 15% 15%, rgba(79,124,255,.08), transparent 40%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px),
      #0a0a0c;
  }
  .ct-live-badge{
    display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
    background:#ff2d2d; color:#fff; font-size:10px; font-weight:800; letter-spacing:.03em;
    padding:4px 10px; border-radius:20px; z-index:2;
  }
  .ct-live-dot{width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block;}
  .ct-plus{opacity:.85; font-weight:400;}
  .new-course-top h3{position:relative; z-index:2; max-width:58%; margin-top:10px;}
  .ct-tagline{color:#f5c542 !important; font-size:12px; font-weight:700; position:relative; z-index:2; max-width:58%;}
  .ct-batch-badge{
    position:relative; z-index:2; align-self:flex-start; margin-top:10px;
    background:#f5c542; color:#1a1400; font-size:9.5px; font-weight:800; letter-spacing:.02em;
    padding:5px 10px; border-radius:6px;
  }
  .ct-founder-photo{
    position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:46%;
    object-fit:cover; object-position:top center; z-index:1;
    -webkit-mask-image:linear-gradient(to left, #000 70%, transparent 100%);
    mask-image:linear-gradient(to left, #000 70%, transparent 100%);
  }
  .new-course-top .ct-tool-icon{
    position:absolute; right:14px; top:14px; bottom:auto; width:38px; height:38px; z-index:2;
  }

  /* resources: course-card style with video thumbnail top */
  .res-course-top{
    cursor:pointer;
    background:radial-gradient(circle at 30% 20%, #23232f, #121218 70%);
  }
  .res-course-top .grain{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px);}
  .res-course-top .tag{position:relative; z-index:2; background:#ff2d2d;}
  .res-course-top h3{position:relative; z-index:2; max-width:65%;}
  .res-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px;
    border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(255,45,45,.4); z-index:2;
  }
  .res-course-top .icon{
    position:absolute; right:14px; bottom:14px; left:auto; width:auto; min-width:40px; height:auto;
    padding:6px 10px; border-radius:8px; font-size:12px; z-index:2;
  }
  .res-play::after{content:""; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px;}

  .card-body h4{font-size:16px; margin-bottom:3px;}
  .card-body .desc{font-size:12.5px; color:var(--muted); margin-bottom:8px;}
  .stars{color:#f5b942; font-size:12px; margin-bottom:8px;}
  .stars span{color:var(--muted); font-size:11.5px; margin-left:4px;}
  .price{font-weight:800; font-size:17px; margin-bottom:12px;}
  .price .cur{color:var(--muted); font-weight:500; font-size:11.5px;}
  .btnrow{display:flex; gap:8px;}
  .btn{
    flex:1; text-align:center; padding:10px 0; border-radius:8px; font-size:12.5px; font-weight:700;
  }
  .btn-dark{background:var(--panel-2); color:var(--text); border:1px solid var(--line);}
  .btn-ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--line);}
  .btn-dark:hover{background:#2e2e3a;}
  .btn-ghost:hover{background:var(--line);}

  /* plugin thumb — thumbnail files are cropped/stored as 400×400 */
  .plugin-thumb{
    aspect-ratio:1/1; height:auto; background:var(--panel-2); display:flex; align-items:center; justify-content:center; position:relative;
  }
  .plugin-thumb svg{width:60px; height:60px; opacity:.9;}
  .plugin-thumb .plabel{
    position:absolute; top:10px; left:10px; background:var(--grad); color:#fff; font-size:9.5px; font-weight:700;
    padding:3px 8px; border-radius:5px;
  }

  footer{
    border-top:1px solid var(--line); padding:34px 28px; text-align:center; color:var(--muted); font-size:12.5px;
  }

  /* tools + queries band */
  .tools-band{
    max-width:1280px; margin:0 auto; padding:50px 28px 20px;
    display:grid; grid-template-columns:1.7fr 1fr; gap:22px;
  }
  .tools-card{
    background:var(--panel); color:var(--text); border-radius:18px; padding:32px 34px;
    border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .tools-card h3{font-size:21px; font-weight:800; margin-bottom:24px; color:var(--text);}
  .tools-row{display:flex; flex-wrap:wrap; gap:26px;}
  .tool-item{display:flex; flex-direction:column; align-items:center; gap:8px; width:78px;}
  .tool-ic{
    width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:14px;
  }
  .tool-item span:last-child{font-size:10.5px; color:var(--text); text-align:center; font-weight:600;}
  .queries-card{
    background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:32px 30px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .queries-card h3{font-size:22px; font-weight:800; margin-bottom:8px;}
  .queries-card p{color:var(--muted); font-size:13.5px; margin-bottom:20px;}
  .wa-cta{
    display:inline-flex; align-items:center; gap:8px; background:#ffcc33; color:#111; font-weight:700;
    padding:12px 18px; border-radius:9px; width:fit-content; font-size:14px;
  }
  .wa-cta + .wa-cta{margin-top:10px;}
  .tg-cta{background:#229ED9; color:#fff;}
  .wa-ic{font-size:15px;}
  @media(max-width:880px){ .tools-band{grid-template-columns:1fr;} }

  /* footer */
  .site-footer{max-width:1280px; margin:40px auto 0; padding:0 28px 40px; border-top:1px solid var(--line); padding-top:44px;}
  .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; text-align:left;}
  .footer-extra{
    display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; text-align:left;
    margin-top:34px; padding-top:34px; border-top:1px solid var(--line);
  }
  @media(max-width:560px){ .footer-extra{grid-template-columns:1fr;} }
  .footer-col{text-align:left;}
  .footer-col h4{text-align:left;}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-copy{font-size:12px; color:var(--muted); margin-bottom:14px;}
  .footer-social{display:flex; gap:10px;}
  .footer-social a, .footer-social button{
    width:42px; height:42px; border-radius:12px; background:#111114; border:1px solid #26262f;
    display:flex; align-items:center; justify-content:center; transition:background .15s, transform .15s;
  }
  .footer-social a:hover, .footer-social button:hover{background:#1c1c22; transform:translateY(-2px);}
  .footer-col h4{font-size:14px; font-weight:700; margin-bottom:14px;}
  .footer-col a, .footer-col button{display:block; width:100%; text-align:left; background:none; font-size:12.5px; color:var(--muted); margin-bottom:10px;}
  .footer-col a:hover, .footer-col button:hover{color:var(--text);}
  .footer-col a.see-all, .footer-col button.see-all{color:var(--blue); font-weight:600; margin-top:6px;}
  .footer-bottom{
    margin-top:36px; padding-top:18px; border-top:1px solid var(--line); text-align:center;
    font-size:11.5px; color:var(--muted);
  }
  @media(max-width:880px){ .footer-top{grid-template-columns:1fr 1fr;} .footer-extra{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .footer-top{grid-template-columns:1fr;} }

  /* floating whatsapp button */
  .wa-float{
    position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center; z-index:90;
    box-shadow:0 10px 26px rgba(37,211,102,.45); animation:waPulse 2.2s infinite;
  }
  @keyframes waPulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
    70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
  }


  /* YouTube learn grid */
  .yt-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    transition:transform .18s, border-color .18s; cursor:pointer;
  }
  .yt-card:hover{transform:translateY(-4px); border-color:#454455;}
  .yt-thumb{
    aspect-ratio:720/480; position:relative; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 30% 20%, #2a2a38, #14141a 70%);
  }
  .admin-edit-btn{
    position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:8px;
    background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:13px;
    align-items:center; justify-content:center; z-index:3;
  }
  .admin-edit-btn:hover{background:var(--grad); border-color:transparent;}

  .yt-thumb .play{
    width:64px; height:64px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(255,45,45,.4); z-index:2;
  }
  .yt-thumb .play::after{content:""; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:4px;}
  .yt-thumb .grain{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);}
  .yt-body{padding:18px 20px;}
  .yt-body h4{font-size:16px; line-height:1.3; margin-bottom:9px;}
  .yt-watch{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600;}
  .yt-watch .dot{width:16px; height:16px; border-radius:3px; background:#ff2d2d; display:inline-flex; align-items:center; justify-content:center;}

  /* Our Work / reels */
  .work-block{margin-bottom:44px;}
  .work-subhead{font-size:19px; font-weight:700; margin-bottom:18px; padding-left:2px; border-left:3px solid var(--blue); padding-left:12px;}
  .reel-grid{display:flex; gap:16px; flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
  .reel-grid::-webkit-scrollbar{height:6px;}
  .reel-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
  .reel-card{
    width:200px; flex-shrink:0; aspect-ratio:9/16; border-radius:14px; overflow:hidden; position:relative; cursor:pointer;
    scroll-snap-align:start;
    border:1px solid var(--line); background:linear-gradient(160deg, #23232f, #121218 65%);
    display:flex; flex-direction:column; justify-content:space-between; padding:12px;
    transition:transform .18s, border-color .18s;
  }
  .reel-card:hover{transform:translateY(-4px); border-color:#454455;}
  .reel-top{display:flex; align-items:center; gap:6px;}
  .reel-top .dot{width:16px; height:16px; border-radius:4px; background:#ff2d2d; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .reel-top .dot::after{content:""; border-left:6px solid #fff; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:1px;}
  .reel-top span{font-size:11px; font-weight:700; color:var(--muted);}
  .reel-mid{flex:1; display:flex; align-items:center; justify-content:center;}
  .reel-mid .play{
    width:44px; height:44px; border-radius:50%; background:rgba(255,45,45,.9); display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
  }
  .reel-mid .play::after{content:""; border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px;}
  .reel-bottom h4{font-size:12.5px; line-height:1.3;}
  .reel-tag{
    position:absolute; top:12px; right:12px; background:rgba(0,0,0,.5); color:#fff; font-size:9.5px; font-weight:700;
    padding:3px 7px; border-radius:5px;
  }
  @media(max-width:560px){
    .reel-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:12px;
      overflow-x:visible; flex-wrap:wrap; scroll-snap-type:none;
    }
    .reel-card{width:100%;}
    .work-subhead{font-size:16px;}
  }

  /* ---------- MODAL ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(30,30,45,.45); backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .overlay.show{display:flex; animation:fade .18s ease;}
  .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:16px; max-width:640px; width:100%;
    overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
  .modal-head h3{font-size:16px;}
  .modal-close{background:var(--panel-2); width:28px; height:28px; border-radius:50%; color:var(--text); font-size:15px;}
  .modal video{width:100%; display:block; background:#000; max-height:360px;}
  .modal iframe{width:100%; display:block; background:#000; max-height:360px;}
  .modal-body{padding:16px 18px;}

  /* download/payment modal — sized ~500x500 per request, content centered
     vertically so the shorter payment/success steps don't look sparse */
  #downloadFormOverlay .modal-body{min-height:500px; display:flex; flex-direction:column; justify-content:center;}

  /* Shorts / short-form reels open in a tall, phone-style portrait frame
     instead of the normal wide 16:9 frame used for regular videos. */
  .modal.modal-short{max-width:360px;}
  .modal.modal-short video, .modal.modal-short iframe{aspect-ratio:9/16; max-height:640px; height:auto;}

  /* payment modal */
  .pay-modal{
    max-width:340px;
    position:relative;
    z-index:0;
  }
  .pay-modal .modal-body{padding:14px 16px;}
  .pay-modal-border-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:5;
    overflow:visible;
  }
  .pay-modal-border-svg rect{
    fill:none;
    stroke:url(#taperGrad);
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:22 78;
    filter: drop-shadow(0 0 5px rgba(79,124,255,.65));
    animation: traceBorder 7s linear infinite;
  }
  @keyframes traceBorder{
    to{ stroke-dashoffset:-100; }
  }
  .plan-tabs{display:flex; gap:12px; margin-bottom:18px;}
  .plan-tab{
    flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:14px 12px; text-align:left; position:relative; cursor:pointer; color:var(--text);
  }
  .plan-tab.active{border-color:var(--blue); background:linear-gradient(160deg, rgba(79,124,255,.15), rgba(148,81,255,.1));}
  .plan-name{font-size:12.5px; color:var(--muted); margin-bottom:4px;}
  .plan-price{font-size:19px; font-weight:800;}
  .plan-price span{font-size:11px; font-weight:500; color:var(--muted);}
  .plan-badge{position:absolute; top:-9px; right:10px; background:var(--grad); color:#fff; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px;}
  .plan-features{list-style:none; margin-bottom:20px;}
  .plan-features li{font-size:12.5px; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--line);}
  .plan-features li:last-child{border-bottom:none;}
  .pay-curriculum{margin-bottom:20px;}
  .pay-curr-title{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;}
  .pay-curr-item{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line);}
  .pay-curr-num{
    width:26px; height:26px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--blue); flex-shrink:0;
  }
  .pay-curr-mod{font-size:12.5px; font-weight:700; margin-bottom:3px;}
  .pay-curr-sub{font-size:11px; color:var(--muted); line-height:1.4;}
  .pay-curr-more{
    display:block; width:100%; text-align:center; background:var(--panel-2); color:var(--blue); font-weight:700;
    font-size:14px; padding:14px 0; border-radius:9px; margin-top:12px;
  }
  .pay-methods{display:flex; gap:8px; margin-bottom:12px;}
  .pay-method{flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:12.5px; padding:9px 0; border-radius:7px;}
  .pay-method.active{background:var(--grad); color:#fff; border:none;}
  .modal-body p{font-size:13px; color:var(--muted); line-height:1.6;}

  /* toast */
  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:12px 20px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none;
    transition:all .25s; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.4);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media(max-width:880px){
    .hero{grid-template-columns:1fr; padding-top:40px;}
    .hero h1{font-size:36px;}
    .grid{grid-template-columns:1fr 1fr;}
    .navlinks{
      display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
      background:var(--canvas); border-bottom:1px solid var(--line); padding:10px 16px 16px; gap:4px; z-index:60;
    }
    .navlinks.mobile-open{display:flex;}
    .navlinks > div{width:100%;}
    .navlinks .dropdown{position:static; width:100%; margin-top:6px;}
    .hamburger-btn{display:flex;}
  }
  @media(min-width:881px){
    .hamburger-btn{display:none;}
  }
  .hamburger-btn{
    background:none; border:none; color:var(--text); font-size:22px; padding:6px 10px; cursor:pointer;
  }
  @media(max-width:560px){
    .grid{grid-template-columns:1fr;}
    .section{padding:44px 16px;}
  }

  /* ---------- CARD DEPTH / 3D EFFECT (site-wide) ---------- */
  .dropdown, .lic-stats > div, .lic-issue-box, .dash-purchase-card,
  .dash-playlist-card, .player-current-title, .player-speed-row,
  .player-playlist, .pd-spec-item, .cd-stats, .cd-module, .card,
  .queries-card, .yt-card{
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(20,20,35,.04), 0 10px 24px rgba(20,20,35,.08), 0 22px 44px rgba(20,20,35,.06);
  }
  .card, .yt-card, .dash-playlist-card{
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card:hover, .yt-card:hover, .dash-playlist-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(20,20,35,.06), 0 16px 30px rgba(20,20,35,.12), 0 32px 60px rgba(20,20,35,.10);
  }
  .modal, .artboard-mock{
    background: var(--panel);
    border: 1px solid var(--line);
  }
  .cd-module-head, .modal-head, .plugin-thumb{
    background: var(--panel-2);
  }
  .card-body{
    background: var(--panel);
  }

  /* placeholders black across the whole site */
  input::placeholder, textarea::placeholder{
    color: var(--text);
    opacity: 1;
  }

  /* ---------- UNIFIED ADMIN PANEL ---------- */
  .admin-layout{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start;}
  @media(max-width:780px){ .admin-layout{grid-template-columns:1fr;} }
  .admin-sidebar{
    display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:10px; position:sticky; top:100px;
  }
  .admin-nav-btn{
    display:flex; align-items:center; gap:8px; text-align:left; padding:11px 14px; border-radius:9px;
    font-size:13.5px; font-weight:600; color:var(--text); background:none;
  }
  .admin-nav-btn:hover{background:var(--panel-2);}
  .admin-nav-btn.active{background:var(--grad); color:#fff;}
  .admin-content{min-height:400px;}
  .admin-stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px;}
  .admin-stat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px;}
  .admin-stat-num{font-size:28px; font-weight:800; margin-bottom:4px;}
  .admin-stat-label{font-size:12.5px; color:var(--muted);}
  .admin-course-pick{
    display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
    padding:10px 16px; border-radius:9px; font-size:13px; font-weight:600; margin-right:10px; margin-bottom:8px;
  }
  .admin-course-pick:hover{background:var(--panel-2);}
  .admin-course-pick.active{background:var(--grad); color:#fff; border-color:transparent;}
  .admin-lecture-table{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .admin-row{
    display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px;
  }
  .admin-row:last-child{border-bottom:none;}
  .admin-row-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--panel-2);}
  .admin-row-main{flex:1; min-width:0;}
  .admin-row-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .admin-row-sub{color:var(--muted); font-size:11.5px; margin-top:2px;}
  .admin-row-edit{
    flex-shrink:0; width:30px; height:30px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line);
    color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .admin-row-edit:hover{background:var(--grad); color:#fff; border-color:transparent;}
  .admin-empty{padding:30px; text-align:center; color:var(--muted); font-size:13px;}
  .admin-price-cur{color:var(--muted); font-size:13px; flex-shrink:0;}
  .admin-price-input{
    width:90px; flex-shrink:0; background:var(--canvas); border:1px solid var(--line); color:var(--text);
    padding:8px 10px; border-radius:8px; font-size:13px; font-family:inherit;
  }
  .admin-row-save{
    flex-shrink:0; padding:8px 16px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line);
    color:var(--text); font-size:12.5px; font-weight:700;
  }
  .admin-row-save:hover{background:var(--grad); color:#fff; border-color:transparent;}
  .coupon-badge{
    display:inline-block; background:#1a3a2e; color:#4ade80; border:1px solid #245c42;
    font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; margin-bottom:10px;
  }

  /* ---------- PAYMENT MODAL (QR + card) ---------- */
  .pay-amount-card{
    background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:12px 16px; margin:12px 0 14px; text-align:center;
  }
  .pay-amount-card .pay-amount{
    font-family:'Sora', sans-serif; font-size:22px; font-weight:800;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    line-height:1.2;
  }
  .pay-amount-card .pay-item-name{font-size:12px; color:var(--muted); margin-top:3px;}

  .pay-panel{
    background:var(--panel-2); border:1px solid var(--line); border-radius:14px;
    padding:14px; display:flex; flex-direction:column; align-items:center;
    transition:border-color .2s;
  }
  .pay-panel-label{
    display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
    color:var(--text); margin-bottom:10px;
  }
  .pay-panel-label .dot{width:6px; height:6px; border-radius:50%; background:var(--grad);}

  .pay-qr-frame{
    position:relative; width:190px; height:190px; padding:9px;
    background:#fff; border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .pay-qr-frame::before, .pay-qr-frame::after,
  .pay-qr-corner-tl, .pay-qr-corner-br{ content:""; position:absolute; width:16px; height:16px; }
  .pay-qr-frame::before{ top:4px; left:4px; border-top:3px solid var(--blue); border-left:3px solid var(--blue); border-radius:6px 0 0 0; }
  .pay-qr-frame::after{ bottom:4px; right:4px; border-bottom:3px solid var(--purple); border-right:3px solid var(--purple); border-radius:0 0 6px 0; }
  .pay-qr-frame img{ width:100%; height:100%; object-fit:contain; border-radius:6px; }

  .pay-qr-spinner{
    width:34px; height:34px; border-radius:50%;
    border:3px solid #e6e6ee; border-top-color:var(--blue);
    animation:pay-spin .8s linear infinite;
  }
  @keyframes pay-spin{ to{ transform:rotate(360deg); } }

  .pay-qr-error{
    color:#ff8a8a; font-size:11.5px; line-height:1.5; margin-top:12px; text-align:center;
    background:rgba(255,90,90,.08); border:1px solid rgba(255,90,90,.25);
    border-radius:8px; padding:8px 10px;
  }
  .pay-qr-apps{
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:10.5px; color:var(--muted); margin-top:12px;
  }

  .pay-divider{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:16px 0; }
  .pay-divider span:not(.pay-divider-line){ font-weight:700; letter-spacing:.05em; }
  .pay-divider-line{ flex:1; height:1px; background:var(--line); }

  .pay-proceed-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:13px 0; border-radius:9px;
    background:var(--grad); color:#fff; font-weight:700; font-size:13.5px;
    box-shadow:0 6px 18px rgba(109,148,255,.28);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .pay-proceed-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(109,148,255,.4); filter:brightness(1.06); }
  .pay-proceed-btn:active{ transform:translateY(0); }

  .pay-card-field{ margin-bottom:10px; }
  .pay-card-field iframe, .pay-card-field > div{ border-radius:8px !important; }

  .pay-trust{
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:11px; color:var(--muted); margin-top:16px; line-height:1.5;
  }
  .pay-back-btn{
    background:transparent; color:var(--muted); margin-top:10px;
    font-size:12.5px; font-weight:600; padding:8px 0; width:100%;
    border-radius:8px; transition:background .15s, color .15s;
  }
  .pay-back-btn:hover{ background:var(--panel-2); color:var(--text); }

  @keyframes pay-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
  #dlQrStep{ animation:pay-fade-in .25s ease; }