/* SkillSetGo pro skin — course page, student pages, verify page */

/* ---------- glass navbar (course page) ---------- */
body.pro-course{background:var(--mist);overflow-x:hidden;position:relative}
body.pro-course::before{content:"";position:absolute;top:0;left:0;right:0;height:300px;z-index:0;
  background:radial-gradient(circle at 15% 0,#12306f,var(--ink) 65%)}
body.pro-course::after{content:"";position:absolute;top:0;left:0;right:0;height:300px;z-index:0;opacity:.3;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;
  mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
body.pro-course .navbar{position:sticky;top:0;z-index:120;height:76px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(8,102,255,.1);transition:.3s}
body.pro-course .navbar.scrolled{height:62px;background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(10,26,74,.12)}
body.pro-course .logo-text h2{font-size:16px}
body.pro-course .nav-menu a{position:relative;padding:6px 2px;color:#1b2c57}
body.pro-course .nav-menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s}
body.pro-course .nav-menu a:hover::after{width:100%}
body.pro-course .nav-buttons{align-items:center}
body.pro-course #studentAuth{display:flex;gap:10px;align-items:center}
body.pro-course .btn{border-radius:12px;transition:transform .25s,box-shadow .25s}
body.pro-course .btn:hover{transform:translateY(-3px)}
body.pro-course .btn-primary{background:linear-gradient(135deg,var(--blue),#2a8bff);box-shadow:0 8px 22px rgba(8,102,255,.35)}
body.pro-course .mobile-menu-toggle{display:none}
body.pro-course .course-page,body.pro-course .course-footer{position:relative;z-index:1}
body.pro-course .course-page{background:transparent}
body.pro-course .course-back a{display:inline-block;padding:9px 16px;border-radius:99px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);transition:.25s;animation:up .6s both}
body.pro-course .course-back a:hover{background:rgba(255,255,255,.24);transform:translateX(-4px)}

/* ---------- course overview card ---------- */
body.pro-course .course-detail-card{position:relative;overflow:hidden;border-radius:26px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(6,13,36,.35);animation:pop .8s .1s both}
body.pro-course .course-detail-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber),var(--blue));background-size:300% 100%;animation:shift 6s linear infinite}
body.pro-course .course-detail-icon{background:linear-gradient(135deg,#e3efff,#d3f4ff);box-shadow:0 10px 24px rgba(8,102,255,.2);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
body.pro-course .course-label{display:inline-block;padding:5px 12px;border-radius:99px;background:#e6f0ff;color:var(--blue);font-weight:800;letter-spacing:2px}
body.pro-course .course-detail-content h1{font-weight:800;color:var(--ink)}
body.pro-course .course-detail-info div{border-radius:14px;background:var(--mist);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
body.pro-course .course-detail-info div:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(8,102,255,.15)}
body.pro-course .mode{border-radius:99px}

/* ---------- sections ---------- */
body.pro-course .course-section-heading>p:first-child{display:inline-block;padding:6px 14px;border-radius:99px;background:#e6f0ff;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:2.5px}
body.pro-course .course-section-heading h2{font-weight:800;color:var(--ink)}
body.pro-course .course-section-heading h2 span{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
body.pro-course .learning-item{border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 22px rgba(10,26,74,.06);transition:transform .3s,box-shadow .3s,border-color .3s}
body.pro-course .learning-item:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(8,102,255,.18);border-color:#9cc4ff}
body.pro-course .learning-item span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;transition:transform .35s}
body.pro-course .learning-item:hover span{transform:rotate(360deg) scale(1.1)}
body.pro-course .curriculum-list details{border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(10,26,74,.05);transition:box-shadow .3s,border-color .3s}
body.pro-course .curriculum-list details[open]{border-color:#9cc4ff;box-shadow:0 16px 36px rgba(8,102,255,.14)}
body.pro-course .curriculum-list summary{cursor:pointer;transition:background .2s}
body.pro-course .curriculum-list summary:hover{background:var(--mist)}
body.pro-course .curriculum-list details[open] .module-content{animation:up .4s both}
body.pro-course .project-card,body.pro-course .info-box,body.pro-course .public-batch-card{border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 28px rgba(10,26,74,.07);transition:transform .35s,box-shadow .35s,border-color .35s}
body.pro-course .project-card:hover,body.pro-course .info-box:hover,body.pro-course .public-batch-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(8,102,255,.2);border-color:#9cc4ff}
body.pro-course .project-icon,body.pro-course .info-icon{transition:transform .4s}
body.pro-course .project-card:hover .project-icon,body.pro-course .info-box:hover .info-icon{transform:rotate(-8deg) scale(1.15)}
body.pro-course .technology-list span{border-radius:99px;transition:.2s}
body.pro-course .technology-list span:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
body.pro-course .career-support{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(120deg,#081f50,#0b60dc,#12c8ff,#0b60dc,#081f50);background-size:300% 100%;animation:shift 10s linear infinite;color:#fff}
body.pro-course .career-support p,body.pro-course .career-support h2,body.pro-course .career-support h3{color:#fff}
body.pro-course .career-support::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite;pointer-events:none}
body.pro-course .enroll-btn,body.pro-course .confirm-enrollment-btn,body.pro-course .view-course-btn{border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));background-size:200% 200%;color:#fff;border:none;box-shadow:0 10px 26px rgba(8,102,255,.38);transition:transform .25s,box-shadow .25s}
body.pro-course .enroll-btn:hover,body.pro-course .confirm-enrollment-btn:hover,body.pro-course .view-course-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(8,102,255,.5);animation:shift 2s ease infinite}
body.pro-course .enrollment-modal{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.pro-course .enrollment-modal.show .enrollment-modal-content{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
body.pro-course .enrollment-modal-content{border-radius:24px;box-shadow:0 40px 90px rgba(6,13,36,.45)}
body.pro-course .course-loading{color:#fff;text-align:center;padding:60px 0;animation:up .6s both}
body.pro-course .course-footer{margin-top:60px;padding:46px 5% 34px;text-align:center;color:#aebfe3;background:var(--ink)}
body.pro-course .course-footer a{color:var(--cyan);font-weight:700}
@media(max-width:980px){
  body.pro-course .navbar{gap:10px}
  body.pro-course .nav-buttons>.btn-primary{display:none}
  body.pro-course .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid #cfe0ff;background:#fff;font-size:20px;cursor:pointer;order:3}
  body.pro-course .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:12px 5% 18px;background:#fff;box-shadow:0 20px 40px rgba(10,26,74,.15)}
  body.pro-course .nav-menu.mobile-open{display:flex}
  body.pro-course .nav-menu a{padding:14px 4px;border-bottom:1px solid #eef3fb}
}

/* ---------- login / register (standalone pages) ---------- */
body.pro-auth{min-height:100vh;background:radial-gradient(circle at 20% 0,#12306f,var(--ink) 60%)!important;overflow-x:hidden}
body.pro-auth::before{content:"";position:fixed;width:420px;height:420px;border-radius:50%;background:#0866ff;filter:blur(90px);opacity:.5;top:-120px;left:-100px;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
body.pro-auth::after{content:"";position:fixed;width:360px;height:360px;border-radius:50%;background:#12c8ff;filter:blur(90px);opacity:.4;bottom:-120px;right:-80px;animation:drift 12s -5s ease-in-out infinite alternate;pointer-events:none}
body.pro-auth .login-container,body.pro-auth .register-container{position:relative;z-index:2}
body.pro-auth .login-card,body.pro-auth .register-card{position:relative;overflow:hidden;border-radius:26px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.5);box-shadow:0 40px 90px rgba(0,0,0,.45);animation:pop .8s both}
body.pro-auth .login-card::before,body.pro-auth .register-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber),var(--blue));background-size:300% 100%;animation:shift 6s linear infinite}
body.pro-auth h1{font-weight:800;color:var(--ink)}
body.pro-auth .form-group{animation:up .6s both}
body.pro-auth .form-group:nth-of-type(2){animation-delay:.08s}body.pro-auth .form-group:nth-of-type(3){animation-delay:.16s}
body.pro-auth .form-group:nth-of-type(4){animation-delay:.24s}body.pro-auth .form-group:nth-of-type(5){animation-delay:.32s}body.pro-auth .form-group:nth-of-type(6){animation-delay:.4s}
body.pro-auth .form-group input{border-radius:12px;border:1.5px solid #d5dff2;background:#f9fbff;transition:border-color .2s,box-shadow .2s,background .2s}
body.pro-auth .form-group input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(8,102,255,.15)}
body.pro-auth .captcha-image{border-radius:12px;background:linear-gradient(135deg,#eef4ff,#e3f7ff);border-color:#bcd6ff}
body.pro-auth .refresh-btn{border-radius:12px;background:#e9f0fd;transition:transform .4s,background .2s}
body.pro-auth .refresh-btn:hover{background:#d8e6fb;transform:rotate(180deg)}
body.pro-auth .login-btn,body.pro-auth .register-btn{border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));background-size:200% 200%;box-shadow:0 12px 28px rgba(8,102,255,.4);transition:transform .25s,box-shadow .25s}
body.pro-auth .login-btn:hover,body.pro-auth .register-btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(8,102,255,.5);animation:shift 2s ease infinite;background:linear-gradient(135deg,var(--blue),var(--cyan))}
body.pro-auth .register-link a,body.pro-auth .login-link a{color:var(--blue)}
body.pro-auth .back-home a{color:#6b7a99;transition:color .2s}body.pro-auth .back-home a:hover{color:var(--blue)}

/* ---------- student dashboard ---------- */
body.pro-student{background:linear-gradient(180deg,#eef5ff,#f7faff 40%)!important;min-height:100vh}
body.pro-student .student-header{position:sticky;top:0;z-index:100;background:linear-gradient(120deg,var(--ink),var(--navy) 55%,#0b60dc)!important;box-shadow:0 10px 30px rgba(6,13,36,.35)}
body.pro-student .student-brand{font-family:'Sora',sans-serif;letter-spacing:.5px}
body.pro-student .home-btn,body.pro-student .logout-btn{border-radius:12px;backdrop-filter:blur(6px);transition:transform .25s,background .25s}
body.pro-student .home-btn:hover,body.pro-student .logout-btn:hover{transform:translateY(-2px)}
body.pro-student .student-sidebar{border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,26,74,.08)}
body.pro-student .sidebar-item{position:relative;border-radius:12px;transition:background .25s,transform .25s,color .25s}
body.pro-student .sidebar-item:hover{transform:translateX(5px)}
body.pro-student .sidebar-item.active{background:linear-gradient(135deg,var(--blue),#2a8bff)!important;color:#fff!important;box-shadow:0 10px 22px rgba(8,102,255,.38)}
body.pro-student .dashboard-section.active{animation:up .55s cubic-bezier(.2,.8,.2,1) both}
body.pro-student .welcome-card{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(120deg,var(--ink),#123a98,#0b60dc,#12c8ff);background-size:300% 100%;animation:shift 12s linear infinite;box-shadow:0 24px 55px rgba(8,102,255,.32)}
body.pro-student .welcome-card::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:sheen 5s ease-in-out infinite;pointer-events:none}
body.pro-student .welcome-card h1,body.pro-student .welcome-card p{color:#fff;position:relative}
body.pro-student .section-heading h2{font-weight:800;color:var(--ink)}
body.pro-student .profile-item,body.pro-student .enrollment-card{border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 24px rgba(10,26,74,.06);transition:transform .3s,box-shadow .3s,border-color .3s}
body.pro-student .profile-item:hover,body.pro-student .enrollment-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(8,102,255,.16);border-color:#9cc4ff}
body.pro-student .profile-item input{border-radius:10px;transition:border-color .2s,box-shadow .2s}
body.pro-student .profile-item input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(8,102,255,.14)}
body.pro-student .save-btn,body.pro-student .browse-btn,body.pro-student .view-course-btn,body.pro-student .action-btn{border-radius:12px;background:linear-gradient(135deg,var(--blue),#2a8bff);color:#fff;box-shadow:0 8px 20px rgba(8,102,255,.3);transition:transform .25s,box-shadow .25s}
body.pro-student .save-btn:hover,body.pro-student .browse-btn:hover,body.pro-student .view-course-btn:hover,body.pro-student .action-btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(8,102,255,.46)}
body.pro-student .cancel-profile-btn{border-radius:12px;transition:transform .25s}body.pro-student .cancel-profile-btn:hover{transform:translateY(-2px)}
body.pro-student .status{border-radius:99px;font-weight:700}
body.pro-student .loading{animation:pulse 1.4s ease-in-out infinite;color:#6b7a99}
@keyframes pulse{50%{opacity:.4}}
body.pro-student .enrollments-container .enrollment-card{animation:up .6s both}
body.pro-student .enrollments-container .enrollment-card:nth-child(2){animation-delay:.1s}body.pro-student .enrollments-container .enrollment-card:nth-child(3){animation-delay:.2s}

/* ---------- verify certificate ---------- */
body.pro-verify{min-height:100vh;background:radial-gradient(circle at 20% 0,#12306f,var(--ink) 60%)!important;overflow-x:hidden}
body.pro-verify::before{content:"";position:fixed;width:420px;height:420px;border-radius:50%;background:#0866ff;filter:blur(90px);opacity:.45;top:-120px;left:-100px;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
body.pro-verify .vf-top{position:relative;z-index:2;background:rgba(255,255,255,.06)!important;backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12);font-family:'Sora',sans-serif!important}
body.pro-verify .vf-wrap{position:relative;z-index:2}
body.pro-verify .vf-card{position:relative;overflow:hidden;border-radius:26px;box-shadow:0 40px 90px rgba(0,0,0,.45);animation:pop .8s both}
body.pro-verify .vf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber),var(--blue));background-size:300% 100%;animation:shift 6s linear infinite}
body.pro-verify .vf-card h1{font-weight:800;color:var(--ink)}
body.pro-verify .vf-form input{border-radius:12px;border:1.5px solid #d5dff2;background:#f9fbff;transition:border-color .2s,box-shadow .2s}
body.pro-verify .vf-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(8,102,255,.15)}
body.pro-verify .vf-form button{border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 10px 24px rgba(8,102,255,.4);transition:transform .25s,box-shadow .25s}
body.pro-verify .vf-form button:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(8,102,255,.5)}
body.pro-verify .vf-result{border-radius:16px;animation:pop .5s both}
body.pro-verify .vf-result.valid{box-shadow:0 0 0 4px rgba(34,197,94,.15)}
body.pro-verify .vf-row{animation:up .5s both}
body.pro-verify .vf-foot{color:#8fa3d4!important;position:relative;z-index:2}

/* ---------- course detail: cover image instead of icon ---------- */
body.pro-course .course-detail-card:has(.course-detail-icon.has-image){grid-template-columns:340px 1fr}
body.pro-course .course-detail-icon.has-image{width:100%;height:230px;padding:0;overflow:hidden;font-size:0;border-radius:22px;background:#0a1a4a;
  box-shadow:0 18px 40px rgba(8,102,255,.28);animation:none}
body.pro-course .course-detail-icon.has-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
body.pro-course .course-detail-card:hover .course-detail-icon.has-image img{transform:scale(1.07)}
@media(max-width:820px){
  body.pro-course .course-detail-card:has(.course-detail-icon.has-image){grid-template-columns:1fr}
  body.pro-course .course-detail-icon.has-image{height:200px}
}

/* ---------- student: certificate actions + LinkedIn ---------- */
body.pro-student .cert-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body.pro-student .cert-actions .ws-btn{display:inline-flex;align-items:center;text-decoration:none;font-size:14px;padding:10px 16px}
body.pro-student .ws-btn.li{background:linear-gradient(135deg,#0a66c2,#378fe9);box-shadow:0 8px 20px rgba(10,102,194,.35)}
body.pro-student .ws-btn.li:hover{box-shadow:0 12px 26px rgba(10,102,194,.5)}
body.pro-student .cert-tip{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#f1f7ff;border:1px solid #dfe9fb;color:#41507a;font-size:13px;line-height:1.6}
body.pro-student .cert-code{font-weight:800;letter-spacing:.5px;color:#0a1a4a}

/* ---------- verify page: auto-verified result + certificate preview ---------- */
body.pro-verify .vf-wrap{max-width:1000px}
body.pro-verify .vf-result.valid{position:relative;padding:26px 24px 20px;text-align:left;border-radius:20px;border:1.5px solid #86efac;
  background:linear-gradient(180deg,#ecfdf3,#f7fffb);box-shadow:0 0 0 6px rgba(34,197,94,.10),0 18px 40px rgba(22,163,74,.14)}
body.pro-verify .vf-result.valid h2{margin:10px 0 4px;font-size:24px;color:#14532d}
body.pro-verify .vf-note{margin:0 0 14px;color:#2f6b47}
body.pro-verify .vf-badge{width:64px;height:64px}
body.pro-verify .vf-badge svg{width:64px;height:64px}
body.pro-verify .vf-badge circle{fill:#22c55e;transform-origin:center;animation:badgePop .6s cubic-bezier(.2,.9,.3,1.4) both}
body.pro-verify .vf-badge path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:tick .5s .45s ease forwards}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes tick{to{stroke-dashoffset:0}}
body.pro-verify .vf-result.checking{display:flex;align-items:center;gap:12px;background:#f1f7ff;border:1px solid #dfe9fb;color:#41507a}
body.pro-verify .vf-spin{width:20px;height:20px;border-radius:50%;border:3px solid #cfe0ff;border-top-color:#0866ff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.pro-verify .vf-preview{margin-top:22px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #dfe9fb;box-shadow:0 24px 60px rgba(6,13,36,.35);animation:pop .7s .2s both}
body.pro-verify .vf-canvas{display:block;width:100%;height:auto}
body.pro-verify .vf-skel{padding:60px 20px;text-align:center;color:#6b7a99;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
body.pro-student .lrn-card a:not(.ws-btn){color:#0866ff;font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(8,102,255,.3)}
body.pro-student .lrn-card a:not(.ws-btn):hover{border-bottom-color:#0866ff}