/* SkillUpBlox UI enhancement layer — loads after styles.css; delete this file + its <link> to revert */
:root{--glow:0 10px 30px rgba(37,99,235,.14);--ease:cubic-bezier(.22,.8,.3,1)}
html{scroll-behavior:smooth}
::selection{background:#2563eb33}
*{scrollbar-width:thin;scrollbar-color:#9aa6bd55 transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa6bd55;border-radius:99px}

/* readability: lift tiny text */
.eyebrow,.pill,.course-cover span,.learning-cover span,.question-number,.tool-card>span,.status-pill,.live-top,.info-card span{font-size:11px!important}
.course-info p,.assignment p,.live-card p,.tool-card small,.support-cards small,.quiz-card p,.learning-card-head p,.review-row small,.form-help,.stat-grid span,.profile-chip small,.progress-breakdown,.live-meta,.course-meta small,.assignment-stats span,.admin-class small,.learning-summary small,.quiz-status small,.learning-note span,.course-format p,.quiz-rules span{font-size:12.5px!important}
.sidebar nav button,.side-bottom button,.side-bottom a{font-size:14px}
.profile-chip b{font-size:13px}

/* focus + buttons */
:focus-visible{outline:2px solid #4f7bff;outline-offset:2px;border-radius:8px}
.cta,.small,.ghost,.danger,.suggestions button{transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px #2563eb40;filter:brightness(1.06)}
.cta:active,.small:active{transform:translateY(0) scale(.98)}
.small:hover{background:#2563eb;color:#fff;transform:translateY(-1px)}
.suggestions button:hover{border-color:#7aa3f8;transform:translateY(-1px)}

/* glass header */
header{background:rgba(255,255,255,.78)!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
[data-theme="dark"] header{background:rgba(17,24,39,.78)!important}

/* sidebar: glowing active marker */
.sidebar{background:linear-gradient(180deg,#0f1524,#0b1020 70%)}
.sidebar nav button{position:relative;transition:background .2s,color .2s,transform .2s var(--ease)}
.sidebar nav button:hover{transform:translateX(3px)}
.sidebar nav button.active{background:linear-gradient(90deg,#2563eb2e,#4f46e514)!important}
.sidebar nav button.active::before{content:"";position:absolute;left:-15px;top:20%;height:60%;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#60a5fa,#818cf8)}
.side-brand span,.brand span{background:linear-gradient(90deg,#6ea8ff,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.profile-chip{background:linear-gradient(135deg,#182036,#141b2c)}
.avatar,.header-avatar{box-shadow:0 0 0 2px #2563eb55}

/* page entrance + staggered cards */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-10px) rotate(-5deg)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,20px)}}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
#content>*{animation:rise .5s var(--ease) both}
.course-card,.assignment,.tool-card,.live-card,.quiz-card,.learning-card,.stat-grid>div,.action-grid button,.question-card{animation:rise .55s var(--ease) both}
.course-grid>*:nth-child(2),.stat-grid>*:nth-child(2),.tool-grid>*:nth-child(2),.action-grid>*:nth-child(2),.assignment-grid>*:nth-child(2){animation-delay:.06s}
.course-grid>*:nth-child(3),.stat-grid>*:nth-child(3),.tool-grid>*:nth-child(3),.action-grid>*:nth-child(3),.assignment-grid>*:nth-child(3){animation-delay:.12s}
.course-grid>*:nth-child(4),.stat-grid>*:nth-child(4),.tool-grid>*:nth-child(4),.action-grid>*:nth-child(4){animation-delay:.18s}
.course-grid>*:nth-child(n+5){animation-delay:.24s}

/* loading skeleton feel */
.loading{color:transparent!important;position:relative;min-height:220px;max-width:520px;margin:40px auto;border-radius:20px;
background:linear-gradient(90deg,#e9edf4 25%,#f6f8fc 45%,#e9edf4 65%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}

/* hero: mesh glow + floating art */
.hero{background:radial-gradient(700px 320px at 85% 0%,#3b6cf055,transparent 60%),radial-gradient(500px 300px at 0% 100%,#7c3aed44,transparent 60%),#0f1626!important;box-shadow:0 24px 60px #0f172a33}
.hero::after{content:"";position:absolute;width:260px;height:260px;right:6%;top:-70px;border-radius:50%;background:radial-gradient(circle,#60a5fa44,transparent 68%);animation:drift 9s ease-in-out infinite;pointer-events:none}
.hero h2{background:linear-gradient(180deg,#fff,#c9d8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-art{animation:floaty 6s ease-in-out infinite;text-shadow:0 0 40px #5b8def88}
.workshop-hero,.assistant-intro,.quiz-head{position:relative;overflow:hidden;box-shadow:0 18px 44px #0f172a26}
.workshop-hero::after,.quiz-head::after,.assistant-intro::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#7aa8ff40,transparent 68%);pointer-events:none}

/* stat tiles with colour accents */
.stat-grid>div{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.stat-grid>div::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.stat-grid>div:nth-child(2)::before{background:linear-gradient(90deg,#0891b2,#16a34a)}
.stat-grid>div:nth-child(3)::before{background:linear-gradient(90deg,#ea580c,#f59e0b)}
.stat-grid>div:nth-child(4)::before{background:linear-gradient(90deg,#db2777,#7c3aed)}
.stat-grid b{background:linear-gradient(135deg,#1e3a8a,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .stat-grid b{background:linear-gradient(135deg,#9fc0ff,#c4b5fd);-webkit-background-clip:text;background-clip:text}
.stat-grid>div:hover,.tool-card:hover,.assignment:hover,.live-card:hover,.quiz-card:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.tool-card,.assignment,.live-card,.quiz-card{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.tool-card:hover,.assignment:hover,.live-card:hover,.quiz-card:hover{border-color:#b9ccf7}
.action-grid button:hover{border-color:#9db9f4}
.action-grid span{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#eaf1ff,#f1ecff);margin-bottom:16px}

/* course cards: pattern, shine, zoom */
.course-card{transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 1px 2px #1018280a}
.course-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px #1b2a4422}
.course-cover{position:relative;overflow:hidden;height:165px}
.course-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff2e 1.2px,transparent 1.2px);background-size:16px 16px;mask-image:linear-gradient(135deg,transparent 20%,#000);-webkit-mask-image:linear-gradient(135deg,transparent 20%,#000)}
.course-cover::after{content:"";position:absolute;width:190px;height:190px;right:-50px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,#ffffff38,transparent 68%);transition:transform .5s var(--ease)}
.course-card:hover .course-cover::after{transform:scale(1.5)}
.course-cover>*,.learning-cover>*{position:relative;z-index:1}
.course-cover strong{opacity:.32;transition:transform .4s var(--ease)}
.course-card:hover .course-cover strong{transform:scale(1.12) rotate(-4deg)}
.learning-cover{position:relative;overflow:hidden}
.learning-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff26 1.2px,transparent 1.2px);background-size:16px 16px}

/* progress: animated, glowing */
.progress-track span{transform-origin:left;animation:fillbar 1s var(--ease) .15s both;box-shadow:0 0 12px #4f46e566;background:linear-gradient(90deg,#2563eb,#7c3aed,#4f46e5)!important}
.lesson-row{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.lesson-row:hover{transform:translateX(5px);border-color:#9db9f4;box-shadow:0 8px 22px #2563eb14}

/* quizzes */
.option{transition:all .18s var(--ease)}
.option:has(input:checked){border-color:#2563eb;background:linear-gradient(135deg,#eef3ff,#f3efff);box-shadow:0 0 0 3px #2563eb18;transform:translateX(3px)}
.quiz-result{animation:pop .5s var(--ease) both}
.quiz-result.passed{background:linear-gradient(135deg,#effcf6,#fff)!important;box-shadow:0 16px 40px #16a34a1f}
.quiz-result.passed .result-score{background:linear-gradient(135deg,#059669,#16a34a);-webkit-background-clip:text;background-clip:text;color:transparent}

/* chat */
.msg{animation:pop .3s var(--ease) both}
.msg.user{background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 6px 16px #2563eb2e}

/* auth */
.auth-art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff18 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);pointer-events:none}
.orb1{animation:drift 11s ease-in-out infinite}.orb2{animation:drift 13s ease-in-out infinite reverse}
.art-points span{backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}.art-points span:hover{transform:translateY(-2px);border-color:#ffffff40}
.auth-box{animation:rise .6s var(--ease) both}
.auth-box input:focus,.profile-form input:focus{box-shadow:0 0 0 4px #2563eb1c}

/* toast + profile */
.toast{animation:pop .35s var(--ease) both;border-left:4px solid #60a5fa}
.profile-banner{background:linear-gradient(120deg,#111827,#2563eb,#7c3aed,#db2777);background-size:200% 200%;animation:shimmer 14s linear infinite}
.profile-photo{box-shadow:0 8px 24px #2563eb30}

@media(max-width:760px){.hero::after{display:none}.sidebar nav button.active::before{left:-15px}.course-cover{height:140px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Round 2: premium interaction layer ===== */
#sub-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);box-shadow:0 0 10px #7c3aed88;transition:width .1s linear}
#sub-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-size:18px;z-index:50;box-shadow:0 10px 26px #2563eb55;opacity:0;transform:translateY(14px);pointer-events:none;transition:.3s var(--ease)}
#sub-top.show{opacity:1;transform:none;pointer-events:auto}#sub-top:hover{transform:translateY(-3px)}
.cta,.small,.ghost{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:#ffffff66;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
/* mouse-follow spotlight on cards */
.course-card,.tool-card,.assignment,.live-card,.stat-grid>div,.action-grid button,.learning-card,.quiz-card{position:relative}
.course-card::before,.tool-card::before,.assignment::before,.live-card::before,.stat-grid>div::after,.action-grid button::before,.learning-card::before,.quiz-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#4f7bff1f,transparent 70%);z-index:2}
.course-card:hover::before,.tool-card:hover::before,.assignment:hover::before,.live-card:hover::before,.stat-grid>div:hover::after,.action-grid button:hover::before,.learning-card:hover::before,.quiz-card:hover::before{opacity:1}
/* 3D tilt on course cards (set by JS) */
.course-card{transform-style:preserve-3d;will-change:transform}
/* gradient border glow on hero + panels */
.course-head,.assignment-detail,.support,.profile-page{box-shadow:0 12px 40px #1b2a4410}
.section-title h2{background:linear-gradient(90deg,#10131a,#2f4ea8);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .section-title h2{background:linear-gradient(90deg,#fff,#9fc0ff);-webkit-background-clip:text;background-clip:text}
.pill{background:linear-gradient(135deg,#eaf1ff,#f1ecff)!important;border:1px solid #d6e2ff}
.auth-art .pill{background:#ffffff14!important;border-color:#ffffff22}
.status-pill,.enrolled-badge,.submitted{box-shadow:inset 0 0 0 1px #0000000a}
.empty{background:linear-gradient(180deg,#fff,#f7f9ff)!important;border-color:#c8d4ee}
.empty::before{content:"✦";display:block;font-size:34px;color:#7aa3f8;margin-bottom:10px;animation:floaty 5s ease-in-out infinite}
.lesson-row>span{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.video-box{background:radial-gradient(600px 300px at 50% 0%,#2a4cc055,transparent),#0b1020}
.live-badge{display:inline-flex;align-items:center;gap:6px}
@keyframes pulse{70%{box-shadow:0 0 0 8px #ef444400}100%{box-shadow:0 0 0 0 #ef444400}}
input,textarea,select{transition:border-color .2s,box-shadow .2s,background .2s}
@media(max-width:760px){#sub-top{right:14px;bottom:14px}.course-card{transform:none!important}}

/* ===== Round 3: premium badges ===== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{to{transform:translateX(260%) skewX(-20deg)}}
@keyframes bpop{0%{opacity:0;transform:scale(.6) rotate(-12deg)}70%{transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.level-badge-grid{gap:14px!important}
.level-badge-card{position:relative;overflow:hidden;border-radius:18px!important;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.level-badge-card.unlocked{background-image:linear-gradient(135deg,#2563eb12,#7c3aed14,#ec489910);border-color:#c7d6fb;animation:rise .5s var(--ease) both}
.level-badge-card.unlocked::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#ffffff70,transparent);transform:skewX(-20deg);pointer-events:none}
.level-badge-card.unlocked:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 18px 38px #2563eb2e;border-color:#8fb0f7}
.level-badge-card.unlocked:hover::after{animation:shine .9s ease}
.level-badge-card.locked{opacity:.62;filter:grayscale(.85);border-style:dashed}
.level-badge-card>em{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900}
.level-badge-card.unlocked>em{background:linear-gradient(135deg,#10b981,#16a34a);color:#fff;box-shadow:0 4px 12px #16a34a55}
.level-badge-card b{font:800 14px Manrope}
.level-badge-copy small{font-size:12px!important}
.level-badge-copy>span{font-size:11px!important;font-weight:700}
.level-badge-card.unlocked .level-badge-copy>span{color:#16845b}
.level-badge-note{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px #4f46e540;font-size:11px!important}

/* metallic medallions: 8 tiers */
.badge-medallion{--a:#fff;--b:#dfeaff;--c:#7ca2f5;--d:#294caf;width:60px!important;height:60px!important;background:radial-gradient(circle at 32% 26%,var(--a) 0 12%,var(--b) 14% 34%,var(--c) 62%,var(--d) 100%)!important;box-shadow:0 10px 22px color-mix(in srgb,var(--d) 45%,transparent),inset 0 0 0 3px #ffffffb0,inset 0 0 0 5px color-mix(in srgb,var(--d) 60%,transparent)!important;position:relative}
.badge-level-1{--b:#f3d3b0;--c:#cd7f32;--d:#7a4416}
.badge-level-2{--b:#f1f5f9;--c:#a8b3c4;--d:#5b6779}
.badge-level-3{--b:#fff0b3;--c:#f5b301;--d:#9a6200}
.badge-level-4{--b:#b8f5d8;--c:#10b981;--d:#046645}
.badge-level-5{--b:#bfe0ff;--c:#2f80ed;--d:#16409b}
.badge-level-6{--b:#e6d4ff;--c:#8b5cf6;--d:#4c1d95}
.badge-level-7{--b:#ffc9d6;--c:#ef4455;--d:#8f1230}
.badge-level-8{--a:#fff;--b:#d9f6ff;--c:#7de3ff;--d:#6a5cff}
.unlocked .badge-medallion{animation:bpop .6s var(--ease) both,bfloat 4s ease-in-out 1s infinite}
.badge-ring{inset:-7px!important;border:2px solid transparent!important;background:conic-gradient(from 0deg,transparent 0 55%,var(--c) 80%,var(--a) 100%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.2s linear infinite;opacity:.9}
.locked .badge-ring{animation:none;opacity:.2}
.badge-medallion strong{position:relative;z-index:2;font:800 21px/1 Manrope;color:#fff;text-shadow:0 2px 6px #0000006a,0 0 12px color-mix(in srgb,var(--d) 70%,transparent)}
.badge-medallion small{position:relative;z-index:2;font:800 8px/1 Manrope;letter-spacing:.14em;color:#ffffffd9;margin-top:-4px}
.badge-medallion i{position:absolute!important;right:-8px;bottom:-6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;background:#fff;color:#111;box-shadow:0 4px 10px #0003,0 0 0 2px var(--c);z-index:3}
.badge-medallion.badge-level-8::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ff7ad9,#7de3ff,#8cffb4,#ffe27a,#ff7ad9);opacity:.35;mix-blend-mode:screen;animation:spin 6s linear infinite}

/* header level pill, xp bars, hero medallion */
.level-badge{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border-radius:16px!important;padding:12px 16px!important;box-shadow:0 10px 24px #4f46e545;position:relative;overflow:hidden}
.level-badge strong{display:block;font:800 13px Manrope;letter-spacing:0}
.level-badge::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
.dashboard-xp-badge-icon{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;border:0!important;box-shadow:0 4px 12px #4f46e566;font-size:13px;width:28px;height:28px}
.dashboard-xp-level{background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.dashboard-xp-track,.xp-track{overflow:hidden;position:relative}
.dashboard-xp-track span,.xp-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899)!important;background-size:200% 100%;transform-origin:left;animation:fillbar 1.1s var(--ease) both,shimmer 3s linear infinite;box-shadow:0 0 14px #7c3aed77}
.hero-medallion{position:relative;box-shadow:0 0 0 6px #ffffff12,0 20px 50px #4f46e555!important;animation:bfloat 4s ease-in-out infinite}
.hero-medallion::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 50%,#7aa8ff,#c4b5fd,transparent);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);animation:spin 5s linear infinite}
.gamification-stats>div{border-radius:16px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.gamification-stats>div:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.gamification-stats b{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.xp-mission{transition:transform .2s var(--ease),border-color .2s}.xp-mission:hover{transform:translateX(4px);border-color:#9db9f4}
.xp-done{color:#16845b!important;font-size:11px!important}

/* ===== Round 3: branded loader ===== */
.loading,.verify-loading,.gamification-loading{background:none!important;animation:none!important;color:var(--muted)!important;min-height:0!important;max-width:none!important;margin:0!important;border-radius:0!important;padding:0!important}
.sub-loader{display:grid;place-items:center;gap:16px;padding:64px 20px 28px;text-align:center}
.sub-loader.compact{padding:26px 10px;gap:12px}
.sub-orbit{position:relative;width:84px;height:84px}
.sub-compact .sub-orbit,.compact .sub-orbit{width:52px;height:52px}
.sub-orbit i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#2563eb;border-right-color:#7c3aed;animation:spin 1.1s linear infinite}
.sub-orbit i+i{inset:9px;border-top-color:#ec4899;border-right-color:transparent;border-left-color:#06b6d4;animation-duration:1.7s;animation-direction:reverse}
.sub-orbit b{position:absolute;inset:22px;border-radius:30%;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font:800 15px Manrope;box-shadow:0 8px 22px #4f46e566;animation:lpulse 1.6s ease-in-out infinite}
.compact .sub-orbit b{inset:14px;font-size:10px}
@keyframes lpulse{50%{transform:scale(1.14);box-shadow:0 8px 34px #7c3aedaa}}
.sub-load-msg{font:700 14px Manrope;color:var(--ink);min-height:20px;transition:opacity .25s,transform .25s}
.sub-load-msg.out{opacity:0;transform:translateY(5px)}
.sub-load-bar{width:200px;height:5px;border-radius:99px;background:#e3e8f2;overflow:hidden}
[data-theme="dark"] .sub-load-bar{background:#243049}
.sub-load-bar::after{content:"";display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
.sub-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;opacity:.9}
.sub-skel span{height:130px;border-radius:18px;background:linear-gradient(90deg,#e9edf4 25%,#f6f8fc 45%,#e9edf4 65%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.sub-skel span:nth-child(2){animation-delay:.12s}.sub-skel span:nth-child(3){animation-delay:.24s}
[data-theme="dark"] .sub-skel span{background:linear-gradient(90deg,#1a2335 25%,#222d44 45%,#1a2335 65%);background-size:200% 100%}
.ai-generator-loading,.opportunity-loading,.dashboard-xp-loading{position:relative;overflow:hidden}
.ai-generator-loading::after,.opportunity-loading::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);animation:slide 1.3s ease-in-out infinite}
.dashboard-xp-loading{min-height:64px;border-radius:16px;background:linear-gradient(90deg,#e9edf4 25%,#f6f8fc 45%,#e9edf4 65%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
[data-theme="dark"] .dashboard-xp-loading{background:linear-gradient(90deg,#1a2335 25%,#222d44 45%,#1a2335 65%);background-size:200% 100%}
@media(max-width:760px){.sub-skel{grid-template-columns:1fr}.sub-skel span:nth-child(n+2){display:none}.sub-loader{padding-top:40px}}

/* ===== Round 4: dark-mode fixes ===== */
[data-theme="dark"] main{background:transparent}
[data-theme="dark"] .empty{background:linear-gradient(180deg,#111827,#0f1626)!important;border-color:#2b3b5c}
[data-theme="dark"] .pill{background:linear-gradient(135deg,#60a5fa24,#a78bfa24)!important;color:#b9d2ff;border-color:#2c4170}
[data-theme="dark"] .action-grid span{background:linear-gradient(135deg,#60a5fa24,#a78bfa24);color:#9fc0ff}
[data-theme="dark"] .level-badge-card.unlocked{border-color:#33508f;background-image:linear-gradient(135deg,#2563eb22,#7c3aed22,#ec489914)}
[data-theme="dark"] .level-badge-card.unlocked::after{background:linear-gradient(90deg,transparent,#ffffff22,transparent)}
[data-theme="dark"] .level-badge-card.locked{filter:grayscale(.9) brightness(.8)}
[data-theme="dark"] .option:has(input:checked){background:linear-gradient(135deg,#2563eb2e,#7c3aed2e);border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa22}
[data-theme="dark"] .option:hover{background:#16213a;border-color:#4f78c9}
[data-theme="dark"] .quiz-result.passed{background:linear-gradient(135deg,#0d2a22,#111827)!important;border-color:#1f6b50;box-shadow:0 16px 40px #0007}
[data-theme="dark"] .quiz-result.failed{border-color:#7a2b2b}
[data-theme="dark"] .quiz-result.passed .result-score{background:linear-gradient(135deg,#34d399,#4ade80);-webkit-background-clip:text;background-clip:text}
[data-theme="dark"] :is(.info-card,.quiz-card,.question-card,.learning-card,.learning-summary>div,.review-list,.quiz-result,.submission-card,.admin-form,.admin-list,.admin-class,.live-card,.notification-card,.tool-card,.support,.profile-page,.assignment-detail,.learning-note,.course-format,.assignment-stats span,.option,.suggestions button){background-color:var(--panel);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] :is(.support-cards div,.assignment-instructions,.submission-body,.review-row,.chat .msg.bot){background:#0f172a;color:var(--ink)}
[data-theme="dark"] .review-row.right{background:#0e2a22}[data-theme="dark"] .review-row.wrong{background:#2c1418}
[data-theme="dark"] :is(.auth-box input,.profile-form input,.admin-form input,.admin-form textarea,.admin-form select,.assignment-form input,.assignment-form textarea,.submission-actions input,.submission-actions select,.assistant form input){background:#0f172a;border-color:#2a3a58;color:var(--ink)}
[data-theme="dark"] :is(input,textarea)::placeholder{color:#6f7d96}
[data-theme="dark"] :is(.auth,.auth-panel){background:#0b1020;color:var(--ink)}
[data-theme="dark"] .auth-box h2,[data-theme="dark"] .auth-box label{color:var(--ink)}
[data-theme="dark"] .auth-tabs{background:#172033}[data-theme="dark"] .auth-tabs .on{background:#243049;color:#fff}
[data-theme="dark"] .small{background:#172a52;color:#9fc0ff}[data-theme="dark"] .small:hover{background:#2563eb;color:#fff}
[data-theme="dark"] .ghost{background:#172033;color:#e2e8f0;border-color:#2a3a58}
[data-theme="dark"] .danger{background:#2c1418;color:#ff9a9a;border-color:#5a2328}
[data-theme="dark"] .error{background:#2c1418;color:#ff9a9a}
[data-theme="dark"] .enrolled-badge,[data-theme="dark"] .submitted{background:#0e2a22;color:#4ade80}
[data-theme="dark"] .status-pill{background:#1a2438;color:#cbd5e1}
[data-theme="dark"] .stat-grid>div::after,[data-theme="dark"] .course-card::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#60a5fa24,transparent 70%)}
[data-theme="dark"] .sub-loader .sub-load-msg{color:#e2e8f0}
[data-theme="dark"] .toast{background:#1b2640;border:1px solid #2f4170;border-left:4px solid #60a5fa}
[data-theme="dark"] .course-card,[data-theme="dark"] .tool-card{box-shadow:0 1px 0 #ffffff08 inset}
[data-theme="dark"] ::selection{background:#60a5fa44}

/* ambient aurora + theme-switch fade + gradient-border hover */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 90% -10%,#2563eb14,transparent 60%),radial-gradient(700px 500px at -10% 110%,#7c3aed12,transparent 60%)}
[data-theme="dark"] body::before{background:radial-gradient(900px 520px at 90% -10%,#2563eb30,transparent 60%),radial-gradient(760px 520px at -10% 110%,#7c3aed2a,transparent 60%),radial-gradient(500px 400px at 50% 50%,#ec489910,transparent 70%)}
html.theme-anim *{transition:background-color .4s,color .4s,border-color .4s,box-shadow .4s!important}
.course-card:hover,.tool-card:hover,.assignment:hover,.live-card:hover,.learning-card:hover,.quiz-card:hover{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,#2563eb,#7c3aed,#ec4899) border-box}
header h1{background:linear-gradient(90deg,var(--ink),#4f6fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] header h1{background:linear-gradient(90deg,#fff,#9fc0ff);-webkit-background-clip:text;background-clip:text}
.header-icon,.bell-button{transition:transform .2s var(--ease),background .2s}.header-icon:hover{transform:translateY(-2px) rotate(-6deg)}
.header-badge:not(:empty),.nav-badge:not(:empty){animation:pulse 2s infinite}
.header-avatar{transition:transform .25s var(--ease)}.header-avatar:hover{transform:scale(1.1)}
.ai-nav-subnav button,.sidebar nav button{border-radius:12px}
.back{transition:transform .2s}.back:hover{transform:translateX(-4px);color:#2563eb}
.course-head,.assignment-detail{position:relative;overflow:hidden}
.course-head::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899)}

/* ===== Round 4: first-login setup + tour ===== */
@keyframes flIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}
@keyframes glowp{0%,100%{box-shadow:inset 0 1px 0 #ffffff1f,0 28px 60px #12265040,0 0 0 0 #5b8def00}50%{box-shadow:inset 0 1px 0 #ffffff1f,0 28px 70px #3b6cf055,0 0 60px 6px #7c8cff44}}
.first-login-overlay{background:radial-gradient(800px 500px at 15% 10%,#2563eb55,transparent 60%),radial-gradient(700px 500px at 90% 90%,#7c3aed55,transparent 60%),radial-gradient(500px 400px at 85% 10%,#ec489933,transparent 60%),#070b16!important;backdrop-filter:blur(10px)}
.first-login-card{animation:flIn .6s var(--ease) both;border:1px solid #ffffff2e!important;box-shadow:0 40px 120px #000a,0 0 0 1px #ffffff10,0 0 80px #4f46e533!important;background-image:linear-gradient(180deg,#ffffff0a,transparent 40%)}
.first-login-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:30px 30px 0 0;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899,#f59e0b);background-size:200% 100%;animation:shimmer 6s linear infinite}
.first-login-brand,.first-login-brand-wrap strong{background:linear-gradient(90deg,#6ea8ff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.first-login-kicker{background:linear-gradient(135deg,#2563eb26,#7c3aed26)!important;border:1px solid #6d8fe344;color:#8fb2ff!important;padding:6px 12px;border-radius:99px}
.first-login-copy,.first-login-tour-copy,.first-login-answer-panel,.first-login-setup-body{animation:rise .55s var(--ease) both}
.first-login-copy h1,.first-login-tour-copy h1{background:linear-gradient(135deg,var(--ink) 30%,#5b7fe8);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
[data-theme="dark"] .first-login-copy h1,[data-theme="dark"] .first-login-tour-copy h1{background:linear-gradient(135deg,#fff 30%,#9fc0ff);-webkit-background-clip:text;background-clip:text}
.first-login-option{position:relative;overflow:hidden;border-radius:16px!important;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s,background .22s!important}
.first-login-option:hover{transform:translateY(-3px);box-shadow:0 14px 30px #2563eb2a;border-color:#7aa3f8!important}
.first-login-option.first-login-active,.first-login-active.first-login-option{border-color:#4f7bff!important;background-image:linear-gradient(135deg,#2563eb22,#7c3aed1f)!important;box-shadow:0 0 0 3px #2563eb26,0 14px 34px #2563eb30;transform:translateY(-2px)}
.first-login-option-mark,.first-login-option-check{transition:transform .3s var(--ease)}
.first-login-active .first-login-option-check{animation:bpop .45s var(--ease) both;background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;box-shadow:0 6px 16px #4f46e566}
.first-login-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 12px 30px #4f46e55a;transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.first-login-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
.first-login-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 38px #4f46e577;filter:brightness(1.07)}
.first-login-primary:disabled{filter:grayscale(.6);opacity:.6}
.first-login-secondary{border-radius:14px!important;transition:transform .2s var(--ease),border-color .2s}.first-login-secondary:hover{transform:translateY(-2px);border-color:#7aa3f8}
.first-login-name-label input{transition:box-shadow .25s,border-color .25s}.first-login-name-label input:focus{border-color:#4f7bff;box-shadow:0 0 0 4px #2563eb24,0 10px 30px #2563eb1f}
.first-login-assurance,.first-login-note{border-radius:14px}
.first-login-tour-icon{animation:glowp 3.5s ease-in-out infinite,bfloat 5s ease-in-out infinite;background:radial-gradient(circle at 30% 18%,#5391ff6e,transparent 38%),radial-gradient(circle at 80% 90%,#a78bfa55,transparent 45%),linear-gradient(145deg,#101b31,#23408a)!important;border:1px solid #ffffff1f}
.first-login-tour-spark{animation:twinkle 2.4s ease-in-out infinite}.first-login-tour-spark.spark-2{animation-delay:1.1s}
.first-login-tour-tip{border-left:4px solid transparent!important;border-image:linear-gradient(#2563eb,#7c3aed) 1;border-radius:0 14px 14px 0;background-image:linear-gradient(90deg,#2563eb14,transparent)}
.first-login-tour-dots>*{transition:all .35s var(--ease)}
.first-login-tour-dots .first-login-active,.first-login-tour-dots [class*=active]{width:30px!important;border-radius:99px!important;background:linear-gradient(90deg,#2563eb,#7c3aed)!important;box-shadow:0 0 12px #7c3aed77}
.first-login-progress,.first-login-tour-progress{border-radius:16px}
.first-login-progress [style*=width],.first-login-tour-progress [style*=width]{background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899)!important;box-shadow:0 0 12px #7c3aed77;transition:width .7s var(--ease)}
.first-login-spinner{border-top-color:#7c3aed!important;border-right-color:#2563eb!important}
.first-login-tool,.first-login-logout{transition:transform .2s var(--ease),background .2s}.first-login-tool:hover,.first-login-logout:hover{transform:translateY(-2px)}
[data-theme="dark"] .first-login-card{background-image:linear-gradient(180deg,#ffffff0d,transparent 40%);border-color:#ffffff1f!important}
[data-theme="dark"] .first-login-option{background-color:#0f172a}

/* ===== Round 5: section-by-section upgrades ===== */
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes sweep{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes ringp{0%{box-shadow:0 0 0 0 #7c3aed66}100%{box-shadow:0 0 0 18px #7c3aed00}}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes wobble{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}

/* shared: hero panels */
:is(.doubt-hero,.verify-hero,.opportunity-hero,.ai-generator-hero,.ai-memory-hero,.gamification-page-intro,.notifications-head){position:relative;overflow:hidden;box-shadow:0 20px 50px #0f172a24;border:1px solid #ffffff14}
:is(.doubt-hero-art,.verify-hero-mark,.opportunity-hero-art,.ai-generator-hero-art,.ai-memory-hero-icon,.gamification-page-art,.doubt-orb){animation:wobble 6s ease-in-out infinite;filter:drop-shadow(0 14px 24px #4f46e555)}
:is(.verify-hero-mark,.ai-memory-hero-icon,.hero-medallion){position:relative}

/* shared: card grids + hover */
:is(.doubt-form-card,.doubt-request,.verify-card,.opportunity-card,.ai-memory-card,.ai-memory-item,.ai-history-card,.ai-generator-card,.notification-card,.assistant-tool,.gamification-stat,.xp-mission,.support-cards div,.avatar-option,.opportunity-preferences,.opportunity-results-shell){position:relative;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
:is(.opportunity-card,.ai-history-card,.ai-memory-item,.notification-card,.assistant-tool,.doubt-request,.support-cards div,.gamification-stat):hover{transform:translateY(-4px);box-shadow:0 18px 40px #2563eb26;border-color:#8fb0f7}
:is(.opportunity-card,.ai-history-card,.ai-memory-item,.notification-card,.doubt-request,.ai-generator-card,.doubt-form-card,.verify-card){animation:rise .55s var(--ease) both}
:is(.notification-card,.ai-history-card,.ai-memory-item,.opportunity-card,.doubt-request):nth-child(2){animation-delay:.07s}
:is(.notification-card,.ai-history-card,.ai-memory-item,.opportunity-card,.doubt-request):nth-child(3){animation-delay:.14s}
:is(.notification-card,.ai-history-card,.ai-memory-item,.opportunity-card,.doubt-request):nth-child(4){animation-delay:.21s}
:is(.notification-card,.ai-history-card,.ai-memory-item,.opportunity-card,.doubt-request):nth-child(n+5){animation-delay:.28s}

/* 1:1 doubt session */
.doubt-hero{background-image:radial-gradient(500px 260px at 90% 0,#7c3aed55,transparent 60%),radial-gradient(400px 260px at 0 100%,#2563eb44,transparent 60%)}
.doubt-orb{box-shadow:0 0 60px #7c3aed88}
.doubt-points>*{padding:8px 13px;border-radius:99px;background:#ffffff14;border:1px solid #ffffff26;backdrop-filter:blur(6px);transition:transform .2s var(--ease)}.doubt-points>*:hover{transform:translateY(-2px)}
.doubt-form-card{border-radius:22px;box-shadow:0 14px 40px #1b2a4414}
.doubt-form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899)}
.doubt-request-top{align-items:center}
.doubt-reply{border-left:4px solid #7c3aed!important;background-image:linear-gradient(90deg,#7c3aed14,transparent);border-radius:0 14px 14px 0}
.doubt-meta>*{border-radius:99px}

/* notifications */
.notification-card{border-radius:18px;overflow:hidden}
.notification-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#2563eb,#7c3aed);opacity:.85}
.notification-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,#2563eb22,#7c3aed22);box-shadow:inset 0 0 0 1px #6d8fe33a;transition:transform .35s var(--ease)}
.notification-card:hover .notification-icon{transform:scale(1.12) rotate(-8deg)}
.notification-link{background:none;color:#2563eb;font-weight:800;position:relative;padding:0}
.notification-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed);transition:width .3s var(--ease)}.notification-link:hover::after{width:100%}
[data-theme="dark"] .notification-link{color:#9fc0ff}

/* verify certificate */
.verify-hero{background-image:radial-gradient(500px 280px at 85% 0,#16a34a40,transparent 60%),radial-gradient(420px 260px at 0 100%,#2563eb44,transparent 60%)}
.verify-hero-mark::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #4ade8099;animation:ringp 2.2s infinite}
.verify-card{border-radius:22px;box-shadow:0 14px 40px #1b2a4414}
.verify-form input{transition:box-shadow .25s,border-color .25s,transform .25s}.verify-form input:focus{transform:translateY(-1px);border-color:#4f7bff;box-shadow:0 0 0 4px #2563eb22}
.verify-result{animation:pop .55s var(--ease) both;border-radius:20px}
.verify-result-icon{animation:bpop .7s var(--ease) .15s both;box-shadow:0 12px 30px #16a34a55}
.verify-status{border-radius:99px;box-shadow:0 6px 18px #0002}
.verify-lock,.verify-help{border-radius:14px}
.verify-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px!important;font-weight:700}
.verify-loading::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid #2563eb33;border-top-color:#7c3aed;animation:orbit .8s linear infinite}

/* opportunity board */
.opportunity-hero{background-image:radial-gradient(520px 280px at 88% 0,#f59e0b3a,transparent 60%),radial-gradient(440px 280px at 0 100%,#7c3aed44,transparent 60%)}
.opportunity-live-chip{display:inline-flex;align-items:center;gap:7px}
.opportunity-card{border-radius:20px;overflow:hidden}
.opportunity-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f59e0b,#ec4899,#7c3aed);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.opportunity-card:hover::before{transform:scaleX(1)}
.opportunity-match{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border-radius:99px;box-shadow:0 6px 16px #4f46e54a}
.opportunity-type{border-radius:99px;background:linear-gradient(135deg,#2563eb1f,#7c3aed1f)}
.opportunity-skills>*{border-radius:99px;transition:transform .2s var(--ease),background .2s}.opportunity-skills>*:hover{transform:translateY(-2px);background:#2563eb22}
.opportunity-preferences,.opportunity-results-shell{border-radius:22px}
.opportunity-loading,.ai-generator-loading{border-radius:18px;background-image:linear-gradient(90deg,#2563eb0d,#7c3aed14,#2563eb0d);background-size:200% 100%;animation:shimmer 2s linear infinite}

/* AI dropdown + shared AI pages */
.ai-nav-subnav{position:relative;margin-left:14px;padding-left:10px}
.ai-nav-subnav::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(#2563eb,#7c3aed,transparent)}
.ai-nav-subnav.open button{animation:slidein .35s var(--ease) both}
.ai-nav-subnav.open button:nth-child(2){animation-delay:.05s}.ai-nav-subnav.open button:nth-child(3){animation-delay:.1s}.ai-nav-subnav.open button:nth-child(4){animation-delay:.15s}.ai-nav-subnav.open button:nth-child(5){animation-delay:.2s}
.ai-nav-parent.open,.ai-nav-parent.active{background:linear-gradient(90deg,#2563eb2e,#7c3aed1a)!important;color:#fff!important}
.ai-nav-chevron{display:inline-block;margin-left:auto;transition:transform .35s var(--ease)}.ai-nav-parent.open .ai-nav-chevron{transform:rotate(180deg)}
.ai-generator-hero,.ai-memory-hero,.assistant-intro{background-image:radial-gradient(500px 260px at 88% 0,#7c3aed55,transparent 60%),radial-gradient(420px 260px at 0 100%,#06b6d440,transparent 60%)}
.ai-generator-card,.ai-memory-card{border-radius:22px;box-shadow:0 14px 40px #1b2a4412}
.ai-generator-output{line-height:1.75}.ai-generator-output :is(h1,h2,h3,h4){font-family:Manrope;background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-generator-output li{margin:5px 0}.ai-generator-output strong{color:#4f46e5}[data-theme="dark"] .ai-generator-output strong{color:#a5b4fc}
.ai-generator-result{animation:pop .55s var(--ease) both}
.ai-generator-result-badge{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px #4f46e54a}
.ai-memory-tag{border-radius:99px;background:linear-gradient(135deg,#2563eb22,#7c3aed22)}
.ai-memory-item{border-radius:16px}.ai-memory-delete{transition:transform .2s var(--ease),background .2s}.ai-memory-delete:hover{transform:rotate(8deg) scale(1.1)}
.ai-history-icon{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border-radius:14px;box-shadow:0 8px 20px #4f46e544}
.ai-history-card{border-radius:18px}
.ai-quiz-question{border-radius:18px;transition:box-shadow .3s}.ai-quiz-question:focus-within{box-shadow:0 0 0 3px #2563eb22,0 14px 34px #2563eb1c}
.ai-quiz-question legend span{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.ai-quiz-options label{transition:all .2s var(--ease);border-radius:13px}
.ai-quiz-options label:hover{transform:translateX(4px);border-color:#7aa3f8}
.ai-quiz-options label:has(input:checked){border-color:#4f7bff;background-image:linear-gradient(135deg,#2563eb1f,#7c3aed1f);box-shadow:0 0 0 3px #2563eb1f}
.ai-quiz-options label:has(input:checked)>span{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important}
.ai-quiz-score{background:linear-gradient(135deg,#2563eb,#7c3aed,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.ai-quiz-result-summary{animation:pop .55s var(--ease) both;border-radius:20px}
.ai-quiz-review-row{border-radius:13px}
.ai-quiz-submit{box-shadow:0 12px 30px #4f46e55a}

/* AI assistant chat */
.assistant-tool{border-radius:16px}
.chat{border-radius:22px;box-shadow:inset 0 2px 20px #1b2a4410}
.msg.bot{border-radius:4px 16px 16px 16px;border-left:3px solid #7c3aed}
.msg.user{border-radius:16px 4px 16px 16px}
.assistant form input{transition:box-shadow .25s,border-color .25s}.assistant form input:focus{border-color:#4f7bff;box-shadow:0 0 0 4px #2563eb22;outline:0}
.assistant form button{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;box-shadow:0 8px 20px #4f46e54a;transition:transform .2s var(--ease)}.assistant form button:hover{transform:translateY(-2px)}

/* AI power toolkit */
.workshop-hero{background-image:radial-gradient(520px 300px at 90% 0,#a78bfa55,transparent 60%),radial-gradient(420px 260px at 0 100%,#06b6d444,transparent 60%)}
.tool-card{border-radius:18px;overflow:hidden}
.tool-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#7c3aed26,transparent 70%);transition:transform .5s var(--ease)}.tool-card:hover::after{transform:scale(1.8)}
.tool-card em{transition:letter-spacing .25s}.tool-card:hover em{letter-spacing:.06em}
.tool-card>span{display:inline-block;padding:4px 8px;border-radius:99px;background:linear-gradient(135deg,#2563eb1c,#7c3aed1c);width:fit-content}

/* support */
.support{position:relative;overflow:hidden;border-radius:26px}
.support::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899,#f59e0b);background-size:200% 100%;animation:shimmer 6s linear infinite}
.support h2{background:linear-gradient(90deg,var(--ink),#4f6fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .support h2{background:linear-gradient(90deg,#fff,#9fc0ff);-webkit-background-clip:text;background-clip:text}
.support-mail{padding:11px 18px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff!important;box-shadow:0 10px 26px #4f46e54a;transition:transform .2s var(--ease)}.support-mail:hover{transform:translateY(-3px)}
.support-cards div{border-radius:16px;border:1px solid var(--line)}

/* profile + avatar picker */
.profile-photo{position:relative;border:0!important;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 0deg,#2563eb,#7c3aed,#ec4899,#f59e0b,#2563eb) border-box;border:5px solid transparent!important;animation:none;transition:transform .35s var(--ease)}
.profile-photo:hover{transform:scale(1.06) rotate(-3deg)}
[data-theme="dark"] .profile-photo{background:linear-gradient(#111827,#111827) padding-box,conic-gradient(from 0deg,#60a5fa,#a78bfa,#f472b6,#fbbf24,#60a5fa) border-box}
.profile-page{border-radius:26px;box-shadow:0 22px 60px #1b2a4418}
.profile-banner{height:150px}
.upload{transition:transform .2s var(--ease),background .2s}.upload:hover{transform:translateY(-2px);background:#2563eb;color:#fff}
.avatar-picker{border-radius:20px}
.avatar-options{gap:12px}
.avatar-option{border-radius:18px;cursor:pointer;animation:bpop .5s var(--ease) both}
.avatar-option:hover{transform:translateY(-5px) scale(1.07);box-shadow:0 14px 30px #4f46e540}
.avatar-option:is(.active,.selected,.on,[aria-pressed=true],[aria-checked=true]){box-shadow:0 0 0 3px #4f7bff,0 14px 34px #4f46e55a;transform:scale(1.06)}
.avatar-option:nth-child(2){animation-delay:.04s}.avatar-option:nth-child(3){animation-delay:.08s}.avatar-option:nth-child(4){animation-delay:.12s}.avatar-option:nth-child(5){animation-delay:.16s}.avatar-option:nth-child(n+6){animation-delay:.2s}
.avatar-choice-display{box-shadow:0 0 0 4px #4f7bff33,0 14px 34px #4f46e544;animation:glowp 3.5s ease-in-out infinite}

/* XP & achievements */
.gamification-page-intro{background-image:radial-gradient(520px 300px at 88% 0,#7c3aed55,transparent 60%),radial-gradient(420px 260px at 0 100%,#2563eb55,transparent 60%)}
.gamification-panel{border-radius:26px;box-shadow:0 20px 60px #1b2a4414}
.gamification-stat{border-radius:18px;overflow:hidden}
.gamification-stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.gamification-stat:nth-child(2)::before{background:linear-gradient(90deg,#0891b2,#16a34a)}.gamification-stat:nth-child(3)::before{background:linear-gradient(90deg,#ea580c,#f59e0b)}.gamification-stat:nth-child(4)::before{background:linear-gradient(90deg,#db2777,#7c3aed)}
.xp-missions-pill{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border-radius:99px;box-shadow:0 6px 16px #4f46e54a}
.xp-mission-icon{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;box-shadow:0 6px 14px #4f46e544}
.xp-reflection-backdrop{backdrop-filter:blur(8px)}
.xp-reflection-card{animation:pop .45s var(--ease) both;border-radius:24px;box-shadow:0 30px 90px #000a,0 0 60px #4f46e533}

/* courses / my learning / assignments polish */
.assignment{border-radius:20px;overflow:hidden}
.assignment::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.assignment:hover::after{transform:scaleX(1)}
.learning-card{border-radius:22px;transition:transform .3s var(--ease),box-shadow .3s}.learning-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px #2563eb22}
.learning-cover strong{transition:transform .5s var(--ease)}.learning-card:hover .learning-cover strong{transform:scale(1.15) rotate(-4deg)}
.learning-summary>div{border-radius:16px;transition:transform .25s var(--ease)}.learning-summary>div:hover{transform:translateY(-3px)}
.quiz-index{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;box-shadow:0 6px 16px #4f46e544}
.course-meta .small{transition:transform .2s var(--ease)}.course-card:hover .course-meta .small{transform:translateX(4px)}
.score-chip{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff;box-shadow:0 6px 16px #4f46e544}
.info-card{border-radius:16px;transition:transform .25s var(--ease),box-shadow .25s}.info-card:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.info-card span{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px!important;font-family:Manrope}

/* dark-mode safety for round 5 */
[data-theme="dark"] :is(.doubt-form-card,.doubt-request,.verify-card,.opportunity-card,.ai-memory-card,.ai-memory-item,.ai-history-card,.ai-generator-card,.assistant-tool,.gamification-stat,.xp-mission,.opportunity-preferences,.opportunity-results-shell,.avatar-picker,.ai-quiz-question,.ai-quiz-options label,.verify-result,.ai-quiz-result-summary){background-color:var(--panel);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] :is(.notification-card,.opportunity-card,.ai-history-card,.ai-memory-item,.assistant-tool,.doubt-request,.support-cards div,.gamification-stat):hover{border-color:#4f78c9;box-shadow:0 18px 40px #0008}
[data-theme="dark"] .ai-quiz-options label:has(input:checked){background-image:linear-gradient(135deg,#2563eb30,#7c3aed30);border-color:#60a5fa}
[data-theme="dark"] .support-cards div{background:#0f172a}
@media(max-width:760px){.avatar-option:hover,.ai-history-card:hover,.notification-card:hover{transform:none}.profile-banner{height:120px}}

/* ===== Round 6: single live dot, theme polish, mobile-first visuals ===== */
@keyframes gpulse{0%{box-shadow:0 0 0 0 #22c55e99}70%{box-shadow:0 0 0 9px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}
.opportunity-live-chip::before,.live-badge::before{content:none!important}
.opportunity-live-chip i{animation:gpulse 1.8s infinite}
html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
html,body{overflow-x:clip;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
::placeholder{color:#98a2b3}
input:-webkit-autofill,textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--panel) inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)}
[data-theme="dark"] *{scrollbar-color:#4a5a7a88 transparent}
[data-theme="dark"] .hero,[data-theme="dark"] .workshop-hero{border:1px solid #ffffff14}
[data-theme="dark"] .course-cover,[data-theme="dark"] .learning-cover{filter:saturate(1.1) brightness(.92)}
[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#0b1020,#080c18);border-right:1px solid #1b2538}
[data-theme="dark"] .section-title p,[data-theme="dark"] .eyebrow{color:#8d9bb4}
[data-theme="light"] .eyebrow,html:not([data-theme="dark"]) .eyebrow{color:#6b7a92}
html:not([data-theme="dark"]) .course-card,html:not([data-theme="dark"]) .stat-grid>div,html:not([data-theme="dark"]) .tool-card{box-shadow:0 1px 2px #1018280a,0 8px 24px #1b2a440a}

/* tab bar (mobile only) */
@media(max-width:760px){
  #sub-top{bottom:calc(16px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(18px + env(safe-area-inset-bottom));left:14px;right:14px;text-align:center}
  /* visuals that don't depend on hover */
  .hero-art{display:grid!important;position:absolute;right:-6px;top:8px;width:120px;font-size:30px;opacity:.22;pointer-events:none}
  .hero::after{display:block!important;width:200px;height:200px;right:-60px;top:-60px}
  .hero{min-height:300px}
  .course-cover{height:150px}.course-card{transform:none!important}
  .opportunity-card::before,.assignment::after{transform:scaleX(1)!important}
  .notification-icon,.level-badge-card.unlocked .badge-medallion{animation-duration:.6s,4s}
  :is(.course-card,.tool-card,.assignment,.live-card,.learning-card,.quiz-card,.opportunity-card,.notification-card,.ai-history-card,.stat-grid>div,.action-grid button,.support-cards div,.xp-mission,.avatar-option,.info-card):active{transform:scale(.975);box-shadow:0 8px 24px #4f46e540;transition-duration:.12s}
  button,.cta,.small,.ghost,.danger,input,select,textarea{min-height:44px}
  input,select,textarea{font-size:16px!important}
  .sidebar nav button{min-height:46px}
  header{height:66px}
  #content{padding:18px 14px}
  .section-title h2{font-size:23px}
  :is(.doubt-hero,.verify-hero,.opportunity-hero,.ai-generator-hero,.ai-memory-hero,.gamification-page-intro,.workshop-hero,.assistant-intro,.quiz-head){padding:24px 20px!important;border-radius:22px}
  .stat-grid{gap:10px}.stat-grid>div{padding:16px}
  .auth-panel{background:radial-gradient(420px 260px at 100% 0,#2563eb26,transparent 65%),radial-gradient(380px 260px at 0 100%,#7c3aed22,transparent 65%);align-items:start;padding-top:44px}
  [data-theme="dark"] .auth-panel{background:radial-gradient(420px 260px at 100% 0,#2563eb44,transparent 65%),radial-gradient(380px 260px at 0 100%,#7c3aed40,transparent 65%),#0b1020}
  .mobile-brand{font-size:26px;background:linear-gradient(90deg,var(--ink),#4f6fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mobile-brand span{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#4f7bff,#a78bfa);-webkit-background-clip:text;background-clip:text}
  .auth-box{padding:24px 20px;border-radius:26px;background:var(--panel);box-shadow:0 24px 60px #1b2a4422;border:1px solid var(--line)}
  .sidebar{width:min(290px,84vw);left:-300px}
}

/* sticky reveal for below-the-fold cards */
.sub-pre{opacity:0;transform:translateY(28px) scale(.97);animation:none!important}
.sub-pre.sub-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* first-login: fit any phone, scroll safely */
.first-login-overlay{height:100vh;height:100dvh;align-items:safe center!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important}
.first-login-card{margin:auto!important}
@media(max-width:760px){
  .first-login-overlay{align-items:flex-start!important}
  .first-login-card{max-height:none!important;overflow:visible!important;width:100%!important;padding:18px 14px calc(14px + env(safe-area-inset-bottom))!important;border-radius:24px!important}
  .first-login-card::before{border-radius:24px 24px 0 0}
  .first-login-actions{position:sticky;bottom:calc(-1px - env(safe-area-inset-bottom));z-index:6;margin:14px -14px 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--panel,#fff) 28%);backdrop-filter:blur(6px)}
  .first-login-tour-hero{padding:14px 4px 10px!important}
  .first-login-tour-icon{width:96px!important;height:96px!important;font-size:40px!important;border-radius:28px!important}
  .first-login-tour-visual{min-height:120px!important}
  .first-login-topbar{position:sticky;top:-18px;z-index:6;padding:8px 0;background:var(--panel,#fff)}
}
@media(max-height:640px){.first-login-tour-visual{display:none!important}.first-login-copy h1,.first-login-tour-copy h1{font-size:26px!important}}
.assistant-status::before{content:none!important}

@media(max-width:760px){.sidebar{height:100vh;height:100dvh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.side-bottom{padding-bottom:6px}}
#sub-tabbar{display:none!important}

.sidebar,.sidebar.open,.sidebar nav,.side-bottom,.profile-chip{box-shadow:none!important;filter:none!important}
.sidebar::before,.sidebar::after,.sidebar nav::before,.sidebar nav::after{content:none!important}
.sidebar nav button.active::before{box-shadow:none!important}

/* ===== Round 7: contrast pass (light + dark) ===== */
/* 1. gradient-text: lock the clip + gradient so no other rule can make text vanish */
:is(.stat-grid b,.section-title h2,header h1,.lesson-row>span,.dashboard-xp-level,.gamification-stats b,.info-card span,.ai-quiz-question legend span,.ai-quiz-score,.support h2,.first-login-copy h1,.first-login-tour-copy h1,.first-login-brand,.first-login-brand-wrap strong,.side-brand span,.brand span,.mobile-brand,.mobile-brand span,.ai-generator-output :is(h1,h2,h3,h4)){-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;background-color:transparent!important}
.stat-grid b,.gamification-stats b,.info-card span,.lesson-row>span,.ai-quiz-score,.ai-quiz-question legend span{background-image:linear-gradient(135deg,#1d4ed8,#6d28d9)!important}
.section-title h2,header h1,.support h2{background-image:linear-gradient(90deg,#10131a,#2f4ea8)!important}
.dashboard-xp-level,.ai-generator-output :is(h1,h2,h3,h4){background-image:linear-gradient(90deg,#1d4ed8,#6d28d9)!important}
.first-login-brand,.first-login-brand-wrap strong{background-image:linear-gradient(90deg,#1d4ed8,#7c3aed)!important}
.first-login-copy h1,.first-login-tour-copy h1{background-image:linear-gradient(135deg,#10131a 30%,#3b5bdb)!important}
.mobile-brand{background-image:linear-gradient(90deg,#10131a,#3b5bdb)!important}.mobile-brand span{background-image:linear-gradient(90deg,#3b6cf0,#7c3aed)!important}
.side-brand span,.brand span{background-image:linear-gradient(90deg,#6ea8ff,#a78bfa)!important}
[data-theme="dark"] :is(.stat-grid b,.gamification-stats b,.info-card span,.lesson-row>span,.ai-quiz-score,.ai-quiz-question legend span,.dashboard-xp-level,.ai-generator-output :is(h1,h2,h3,h4)){background-image:linear-gradient(135deg,#93b8ff,#c4b5fd)!important}
[data-theme="dark"] :is(.section-title h2,header h1,.support h2){background-image:linear-gradient(90deg,#ffffff,#a9c6ff)!important}
[data-theme="dark"] :is(.first-login-brand,.first-login-brand-wrap strong){background-image:linear-gradient(90deg,#8fb2ff,#d0c4ff)!important}
[data-theme="dark"] :is(.first-login-copy h1,.first-login-tour-copy h1){background-image:linear-gradient(135deg,#ffffff 30%,#a9c6ff)!important}
[data-theme="dark"] .mobile-brand{background-image:linear-gradient(90deg,#fff,#a9c6ff)!important}
[data-theme="dark"] .quiz-result.passed .result-score{background-image:linear-gradient(135deg,#34d399,#86efac)!important;-webkit-text-fill-color:transparent}

/* 2. low-contrast greys -> readable in light mode */
html:not([data-theme="dark"]) :is(.course-meta small,.assignment>small,.lesson-row em,.quiz-card small,.auth-note,.form-help,.live-top,.live-meta small,.tool-card>span,.question-number,.assignment-course,.admin-class small,.quiz-status small:not(:first-child),.stat-grid span,.review-row small,.submission-review small){color:#5b6b82!important}
html:not([data-theme="dark"]) .live-meta,html:not([data-theme="dark"]) .auth-box label,html:not([data-theme="dark"]) :is(.profile-form,.admin-form,.assignment-form) label{color:#2f3a4d}
html:not([data-theme="dark"]) .tool-card>span{background:#e8eefb}
html:not([data-theme="dark"]) .eyebrow{color:#5b6b82}

/* 3. dark mode: elements with hard-coded dark text or light surfaces */
[data-theme="dark"] :is(.profile-form,.admin-form,.assignment-form,.auth-box) label,[data-theme="dark"] .live-meta,[data-theme="dark"] .assignment-stats b,[data-theme="dark"] .score-chip{color:var(--ink)}
[data-theme="dark"] .submission-review{background:#0e2a22;border-color:#1f6b50;color:var(--ink)}
[data-theme="dark"] .submission-review>b{color:#4ade80}[data-theme="dark"] .submission-review a{color:#9fc0ff}
[data-theme="dark"] .status-reviewed,[data-theme="dark"] .status-approved{background:#0e2a22;color:#4ade80}
[data-theme="dark"] .status-needs_changes{background:#33220d;color:#fbbf24}
[data-theme="dark"] .upload{background:#172a52;color:#9fc0ff}
[data-theme="dark"] .header-avatar{background:#172a52;color:#9fc0ff}
[data-theme="dark"] .back{color:#8fb0e6}
[data-theme="dark"] :is(.link-btn,.live-badge,.notification-link,.support-mail){color:#8fb2ff}
[data-theme="dark"] .support-mail{color:#fff!important}
[data-theme="dark"] :is(.course-meta small,.assignment>small,.assignment-course,.admin-class small,.question-number,.tool-card>span,.form-help){color:#9aa8c0}
[data-theme="dark"] .tool-card>span{background:#1a2742}
[data-theme="dark"] :is(.review-row b,.review-row span,.quiz-card h3,.assignment h3,.tool-card b,.course-info h3,.lesson-row b,.live-card h3,.admin-class b,.submission-main b){color:var(--ink)}
[data-theme="dark"] .first-login-option,[data-theme="dark"] .first-login-name-label,[data-theme="dark"] .first-login-assurance{color:var(--ink)}
[data-theme="dark"] .first-login-option-copy small,[data-theme="dark"] .first-login-note,[data-theme="dark"] .first-login-count{color:#aeb8c8}
[data-theme="dark"] .ai-quiz-options label,[data-theme="dark"] .ai-memory-item,[data-theme="dark"] .ai-history-card{color:var(--ink)}
[data-theme="dark"] :is(.opportunity-card,.opportunity-company,.opportunity-meta,.opportunity-dates){color:var(--ink)}
[data-theme="dark"] .opportunity-live-chip{background:#0f2c1b;color:#7ee2a6}
[data-theme="dark"] :is(.doubt-request,.doubt-form-card,.verify-card,.notification-card) :is(b,h3,h2){color:var(--ink)}
[data-theme="dark"] :is(.doubt-request,.doubt-form-card,.verify-card,.notification-card,.ai-memory-card,.ai-generator-card) p{color:#aab6cb}