/* SkillSetGo pro skin — shared pieces (loaded on every inner page, after the page's own CSS) */
:root{--ink:#060d24;--navy:#0a1a4a;--blue:#0866ff;--cyan:#12c8ff;--mist:#f3f8ff;--amber:#ffb020;--line:#dfe9fb}
body[class*="pro-"]{margin:0;font-family:'DM Sans',Arial,sans-serif}
body[class*="pro-"] h1,body[class*="pro-"] h2,body[class*="pro-"] h3{font-family:'Sora','DM Sans',sans-serif}
html{scroll-behavior:smooth}
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber))}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.95)}}
@keyframes shift{50%{background-position:100% 50%}}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes sheen{60%,100%{left:130%}}
@keyframes stripes{to{background-position:40px 0}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* buttons: ripple */
.ripple-host{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

/* shared learning components (learning.css) */
body[class*="pro-"] .ws-item,body[class*="pro-"] .lrn-card,body[class*="pro-"] .ws-admin-row{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[class*="pro-"] .ws-item:hover,body[class*="pro-"] .lrn-card:hover,body[class*="pro-"] .ws-admin-row:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(8,102,255,.16);border-color:#9cc4ff}
body[class*="pro-"] .ws-num{background:linear-gradient(135deg,var(--blue),var(--cyan))!important;color:#fff!important;box-shadow:0 6px 16px rgba(8,102,255,.35)}
body[class*="pro-"] .ws-btn{border-radius:10px;background:linear-gradient(135deg,var(--blue),#2a8bff);box-shadow:0 6px 16px rgba(8,102,255,.3);transition:transform .2s,box-shadow .2s}
body[class*="pro-"] .ws-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(8,102,255,.45)}
body[class*="pro-"] .ws-btn.ghost{background:#eef3fb;box-shadow:none}
body[class*="pro-"] .ws-badge{border-radius:99px;font-weight:700}
body[class*="pro-"] .lrn-chip{border-radius:99px;transition:.25s}
body[class*="pro-"] .lrn-chip:hover{transform:translateY(-2px);border-color:var(--blue)}
body[class*="pro-"] .lrn-chip.active{background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent;box-shadow:0 8px 18px rgba(8,102,255,.35)}
body[class*="pro-"] .lrn-bar{height:14px;border-radius:99px;background:#e6edf8}
body[class*="pro-"] .lrn-bar>span{border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan),#22c55e);position:relative;transition:width 1s cubic-bezier(.2,.8,.2,1)}
body[class*="pro-"] .lrn-bar>span::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px);background-size:40px 100%;animation:stripes 1.2s linear infinite}
body[class*="pro-"] .lrn-topic{transition:background .2s,padding .2s}
body[class*="pro-"] .lrn-topic:hover{background:var(--mist)}
body[class*="pro-"] .cert-status{border-radius:99px;font-weight:700}
body[class*="pro-"] .cert-table{border-radius:16px;overflow:hidden}
body[class*="pro-"] .cert-table th{background:linear-gradient(180deg,#f3f8ff,#e9f1fe);color:#1b2c57}
body[class*="pro-"] .cert-table tbody tr{transition:background .2s}
body[class*="pro-"] .cert-table tbody tr:hover{background:#f6faff}
body[class*="pro-"] .cert-filter button{border-radius:99px;transition:.25s}
body[class*="pro-"] .cert-filter button.active{background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent}
body[class*="pro-"] .lrn-msg{border-radius:12px;animation:up .4s both}
body[class*="pro-"] .ssg-viewer{backdrop-filter:blur(8px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}