:root{--bg:#030712;--bg2:#07111f;--panel:#0b1422;--panel2:#101b2d;--line:#94a3b824;--lineStrong:#a855f75c;--text:#f8fafc;--muted:#94a3b8;--soft:#cbd5e1;--purple:#7c3aed;--purple2:#a855f7;--blue:#3b82f6;--green:#22c55e;--orange:#f59e0b;--red:#ef4444;--cyan:#06b6d4;--side:276px;--radius:24px;--shadow:0 24px 80px #00000052, inset 0 1px 0 #ffffff0a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--text);background:radial-gradient(circle at 12% 0,#7c3aed42,#0000 30%),radial-gradient(circle at 92% 12%,#3b82f621,#0000 30%),linear-gradient(#020617 0%,#07111f 52%,#020617 100%);min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}::selection{background:#a855f759}.shell{grid-template-columns:var(--side) 1fr;min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:linear-gradient(#030712f5,#07111feb);height:100vh;padding:26px 18px;position:sticky;top:0;overflow:auto}.main{width:100%;min-width:0;max-width:1500px;margin:0 auto;padding:28px 34px 44px}.brand{align-items:center;gap:12px;margin-bottom:30px;display:flex}.brandOnly{background:0 0;border:0;padding:0}.brand h1,.brandText{letter-spacing:-.065em;color:#fff;margin:0;font-size:36px;font-weight:950}.brand h1 span,.brandText span{color:var(--purple2)}.nav{gap:9px;display:grid}.nav.compact{margin-top:16px}.nav a{color:#e5e7eb;border-radius:15px;align-items:center;gap:13px;padding:13px 15px;font-weight:820;transition:all .18s;display:flex}.nav a svg{color:#dbeafe;flex:none}.nav a:hover{background:#7c3aed21}.nav a.active{color:#fff;background:linear-gradient(135deg,#6d28d9,#421b86);box-shadow:0 16px 42px #7c3aed42}.nav a.active svg{color:#fff}.sideProfile{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(#0f172ae6,#09111ebf);border-radius:22px;margin-top:28px;padding:18px}.avatar{background:linear-gradient(135deg,var(--purple),#111827);color:#fff;border:1px solid #ffffff24;border-radius:999px;flex:none;place-items:center;width:48px;height:48px;font-weight:950;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.sub,.muted{color:var(--muted);font-size:14px;line-height:1.5}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.space{justify-content:space-between}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.topbar h1,.topbar h2{letter-spacing:-.045em;margin:0;font-size:34px;line-height:1.08}.topbar .sub{color:#cbd5e1;margin-top:8px;font-size:16px}.pageHead{background:linear-gradient(135deg,#0f172ab8,#0f172a38);border:1px solid #94a3b81f;border-radius:30px;align-items:center;gap:18px;margin-bottom:24px;padding:20px;display:flex;box-shadow:0 18px 70px #00000038}.pageHead h1{letter-spacing:-.055em;font-size:36px}.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#0f172ae6,#09111ed1);margin-bottom:18px;padding:22px}.flat{box-shadow:none;background:#0f172a8c}.card h2,.card h3{margin-top:0}.grid{gap:18px;display:grid}.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}.cols5{grid-template-columns:repeat(5,minmax(0,1fr))}.btn{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:0;border-radius:14px;justify-content:center;align-items:center;gap:9px;padding:12px 18px;font-weight:900;transition:all .18s;display:inline-flex;box-shadow:0 16px 38px #7c3aed40}.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.btn.secondary{border:1px solid var(--line);color:#f8fafc;box-shadow:none;background:#0f172ac2}.btn.green{background:linear-gradient(135deg,#16a34a,#22c55e)}.btn.red{background:linear-gradient(135deg,#dc2626,#ef4444)}.input{color:#fff;border:1px solid var(--line);background:#0206178c;border-radius:15px;outline:none;width:100%;padding:13px 15px}.input:focus{border-color:#a855f78c;box-shadow:0 0 0 4px #7c3aed21}select.input option{color:#fff;background:#0f172a}.textarea{resize:vertical;min-height:150px;line-height:1.58}.pill{color:#e2e8f0;border:1px solid var(--line);background:#94a3b81a;border-radius:999px;align-items:center;gap:7px;padding:7px 11px;font-size:12px;font-weight:850;display:inline-flex}.pill.purple{color:#d8b4fe;background:#7c3aed2e;border-color:#7c3aed59}.pill.green{color:#4ade80;background:#22c55e21;border-color:#22c55e38}.pill.orange{color:#fbbf24;background:#f59e0b21;border-color:#f59e0b38}.pill.red{color:#fca5a5;background:#ef444421;border-color:#ef444438}.stat{border:1px solid var(--line);min-height:132px;box-shadow:var(--shadow);background:linear-gradient(135deg,#0f172afa,#0f172aa8);border-radius:22px;padding:22px;position:relative;overflow:hidden}.stat strong{letter-spacing:-.045em;margin-top:4px;font-size:34px;display:block}.stat span{color:#cbd5e1;font-size:14px}.stat small{color:var(--green);font-weight:850}.progress{background:#94a3b829;border-radius:999px;height:8px;overflow:hidden}.progress span{background:linear-gradient(90deg,var(--purple2),var(--blue));border-radius:999px;height:100%;display:block}.answer{text-align:left;border:1px solid var(--line);color:#fff;background:#0f172a94;border-radius:18px;width:100%;margin:10px 0;padding:16px;transition:all .16s;display:block}.answer:hover{background:#7c3aed1a;border-color:#a855f759}.answer.selected{border-color:var(--purple2);background:#7c3aed33}.answer.correct{background:#22c55e1f;border-color:#22c55e80}.answer.wrong{background:#ef44441f;border-color:#ef444480}.iconBadge{color:#fff;background:linear-gradient(135deg,#a855f7,#5b21b6 62%,#2563eb);border:1px solid #ffffff1f;border-radius:18px;place-items:center;width:58px;height:58px;display:grid;box-shadow:0 16px 42px #0000003d,inset 0 1px #ffffff14}.iconBadge.xs{border-radius:11px;width:32px;height:32px}.iconBadge.sm{border-radius:14px;width:42px;height:42px}.iconBadge.lg{border-radius:24px;width:78px;height:78px}.iconBadge.purple{background:linear-gradient(135deg,#a855f7,#5b21b6 62%,#2563eb)}.iconBadge.blue{background:linear-gradient(135deg,#60a5fa,#2563eb 70%,#1e3a8a)}.iconBadge.green{background:linear-gradient(135deg,#4ade80,#16a34a 70%,#14532d)}.iconBadge.orange{background:linear-gradient(135deg,#fbbf24,#f97316 70%,#7c2d12)}.iconBadge.red{background:linear-gradient(135deg,#fb7185,#e11d48 70%,#881337)}.iconBadge.cyan{background:linear-gradient(135deg,#67e8f9,#0891b2 70%,#164e63)}.iconBadge.slate{background:linear-gradient(135deg,#64748b,#334155 70%,#0f172a)}.stat .iconBadge{z-index:2;position:absolute;top:18px;right:18px}.landingPage{background:radial-gradient(circle at 14% 8%,#7c3aed4d,#0000 28%),radial-gradient(circle at 82% 18%,#3b82f624,#0000 32%),linear-gradient(#020617 0%,#07111f 55%,#020617 100%);min-height:100vh;padding:0 clamp(18px,4vw,58px) 52px}.landingHeader{border-bottom:1px solid #94a3b81f;justify-content:space-between;align-items:center;height:96px;display:flex}.landingHeader .brandText{font-size:42px}.landingHero{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:58px;padding:66px 0 42px;display:grid}.landingTitle{letter-spacing:-.075em;margin:30px 0 22px;font-size:clamp(48px,5.2vw,76px);line-height:.96}.gradientText{background:linear-gradient(135deg,#c084fc,#7c3aed 48%,#60a5fa);color:#0000;-webkit-background-clip:text;background-clip:text}.landingText{color:#cbd5e1;max-width:740px;font-size:19px;line-height:1.7}.previewFrame{background:linear-gradient(#0f172adb,#020617b8);border:1px solid #94a3b829;border-radius:30px;padding:26px;box-shadow:0 40px 120px #00000061}.landingFeatures{padding:10px 0 40px}.fieldScreen{max-width:1380px;margin:0 auto;padding:64px 0}.fieldCard{text-align:left;cursor:pointer;flex-direction:column;justify-content:space-between;min-height:255px;transition:all .18s;display:flex;position:relative;overflow:hidden}.fieldCard:before{content:"";pointer-events:none;background:radial-gradient(circle at 18% 14%,#a855f738,#0000 30%);position:absolute;inset:-1px}.fieldCard>*{position:relative}.fieldCard h2{color:#fff;text-align:left}.fieldCard:hover{border-color:#a855f78c;transform:translateY(-3px)}.fieldCard.locked{opacity:.55;cursor:not-allowed}.courseCards{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px;display:grid}.courseVisitCard{min-height:260px;box-shadow:var(--shadow);background:radial-gradient(circle at 12% 10%,#a855f72e,#0000 34%),linear-gradient(#0f172aeb,#09111ed6);border:1px solid #94a3b824;border-radius:22px;flex-direction:column;justify-content:space-between;padding:20px;transition:all .18s;display:flex}.courseVisitCard:hover{border-color:#a855f76b;transform:translateY(-3px)}.courseVisitCard h3{margin:16px 0 8px;font-size:21px;line-height:1.2}.courseVisitCard .btn{width:100%;margin-top:14px}.courseVisitTop{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.courseMeta{color:#93c5fd;font-size:14px}.chartBox{border:1px solid var(--line);background:linear-gradient(#0f172abf,#02061759);border-radius:20px;align-items:end;gap:10px;height:230px;padding:16px;display:flex}.bar{background:linear-gradient(#a855f7,#4c1d95);border-radius:13px 13px 0 0;flex:1;min-height:12px;position:relative;box-shadow:0 0 30px #a855f738}.bar span{color:#94a3b8;font-size:11px;position:absolute;bottom:-24px;left:50%;transform:translate(-50%)}.lineMock{border:1px solid var(--line);background:linear-gradient(#0000 52%,#7c3aed38),repeating-linear-gradient(0deg,#0000 0 45px,#94a3b814 46px),linear-gradient(#0f172ab3,#02061759);border-radius:18px;height:220px;position:relative;overflow:hidden}.lineMock svg{width:100%;height:100%;position:absolute;inset:0}.report{white-space:pre-wrap;color:#111827;background:#f8fafc;border-radius:18px;padding:20px;line-height:1.58}.resultBanner{z-index:50;color:#dcfce7;box-shadow:var(--shadow);background:linear-gradient(135deg,#22c55e2b,#0f172af5);border:1px solid #22c55e59;border-radius:20px;margin-bottom:18px;padding:16px 18px;position:sticky;top:18px}.dropzone{text-align:center;background:#0f172a61;border:1px dashed #a855f7a6;border-radius:22px;padding:46px;transition:all .15s}.dropzone.drag{border-color:var(--purple2);background:#7c3aed2e}.successGrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.achievementCard{background:linear-gradient(#0f172ad1,#02061773);border:1px solid #94a3b824;border-radius:20px;align-items:flex-start;gap:14px;padding:18px;display:flex}.achievementCard.unlocked{background:radial-gradient(circle at 10% 20%,#22c55e29,#0000 34%),linear-gradient(#0f172ae0,#02061773);border-color:#22c55e59}.achievementCard.locked{opacity:.58;filter:grayscale(.35)}.achievementIcon{background:linear-gradient(135deg,#a855f7e6,#4c1d95b3);border-radius:16px;flex:none;place-items:center;width:50px;height:50px;font-size:25px;display:grid}.achievementCard.unlocked .achievementIcon{background:linear-gradient(135deg,#22c55e,#16a34a)}.profileUploadBox{background:#7c3aed14;border:1px dashed #a855f78c;border-radius:20px;padding:18px}.mobileTop,.mobileNav{display:none}@media (max-width:1180px){.cols5,.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.landingHero{grid-template-columns:1fr}}@media (max-width:980px){.shell{display:block}.sidebar{display:none}.mobileTop{z-index:90;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);background:#020617f5;padding:12px 14px;display:block;position:sticky;top:0}.mobileNav{z-index:95;border-top:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#020617f5;padding:8px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.mobileNav a{text-align:center;border-radius:14px;place-items:center;gap:4px;min-width:84px;padding:8px;font-size:12px;font-weight:850;display:grid}.mobileNav a.active{background:linear-gradient(135deg,var(--purple),#4c1d95);color:#fff}.main{padding:20px 14px 96px}.cols2,.cols3,.cols4,.cols5{grid-template-columns:1fr}.topbar{align-items:flex-start}.topbar h1,.topbar h2{font-size:28px}.pageHead{flex-direction:column;align-items:flex-start}.landingPage{padding:0 16px 28px}.landingHeader{flex-direction:column;align-items:flex-start;gap:18px;height:auto;padding:18px 0}.landingHeader .row{width:100%}.landingHeader .btn{flex:1}.landingHero{grid-template-columns:1fr;padding:34px 0}.courseCards{grid-template-columns:1fr}}