*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial,sans-serif}
:root{--glass:rgba(255,255,255,.09);--glass2:rgba(255,255,255,.15);--line:rgba(255,255,255,.16);--blue:#38bdf8;--violet:#8b5cf6;--pink:#ec4899;--green:#22c55e;--orange:#fb923c}
body{min-height:100vh;color:white;background:linear-gradient(120deg,#020617,#0f172a,#1e1b4b,#111827);background-size:300% 300%;animation:bg 14s ease infinite;overflow-x:hidden}
@keyframes bg{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 15% 12%,rgba(56,189,248,.35),transparent 26%),radial-gradient(circle at 88% 10%,rgba(236,72,153,.28),transparent 26%),radial-gradient(circle at 50% 95%,rgba(34,197,94,.20),transparent 30%)}
.grid-bg{position:fixed;inset:0;z-index:-2;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:48px 48px;animation:grid 20s linear infinite}
@keyframes grid{to{background-position:48px 48px}}
.float span{position:fixed;border-radius:50%;filter:blur(4px);opacity:.35;background:linear-gradient(135deg,var(--blue),var(--violet),var(--pink));z-index:-1;animation:orb 10s infinite alternate}
.float span:nth-child(1){width:160px;height:160px;left:6%;top:15%}.float span:nth-child(2){width:120px;height:120px;right:8%;top:18%;animation-delay:2s}.float span:nth-child(3){width:190px;height:190px;left:40%;bottom:3%;animation-delay:4s}
@keyframes orb{to{transform:translateY(-45px) translateX(35px) scale(1.08)}}
.app{display:grid;grid-template-columns:305px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:24px 18px;background:rgba(2,6,23,.72);backdrop-filter:blur(24px);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.logo{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:29px;background:conic-gradient(from 120deg,var(--blue),var(--violet),var(--pink),var(--green),var(--blue));box-shadow:0 0 45px rgba(56,189,248,.55);animation:logo 4s linear infinite}
@keyframes logo{to{filter:hue-rotate(360deg)}}.brand h1{font-size:23px}.brand p{font-size:12px;color:#bfdbfe}
.profile{padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--line);margin-bottom:14px;color:#dbeafe;line-height:1.6;font-size:13px}
.nav button{width:100%;padding:13px 14px;margin:5px 0;border-radius:15px;border:1px solid transparent;background:transparent;color:#dbeafe;text-align:left;cursor:pointer;font-size:14px;transition:.25s}
.nav button:hover,.nav button.active{background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(139,92,246,.20));border-color:var(--line);transform:translateX(5px);color:white}
.main{padding:28px;max-width:1480px;width:100%;margin:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);color:#dbeafe;font-size:13px}
.hero,.card,.toolbox,.stat{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px);box-shadow:0 22px 70px rgba(0,0,0,.25)}
.hero{position:relative;overflow:hidden;border-radius:34px;padding:34px;animation:fadeUp .55s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
.hero:after{content:"";position:absolute;right:-100px;top:-110px;width:340px;height:340px;border-radius:50%;background:conic-gradient(var(--blue),var(--pink),var(--green),var(--violet),var(--blue));filter:blur(40px);opacity:.38;animation:ring 8s linear infinite}
@keyframes ring{to{transform:rotate(360deg)}}.hero h2{font-size:43px;line-height:1.12;margin-bottom:12px;background:linear-gradient(90deg,#fff,#a5f3fc,#fbcfe8,#fef08a);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}.hero p{max-width:920px;color:#dbeafe;line-height:1.78;position:relative}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative}
.btn{border:0;border-radius:16px;padding:13px 18px;color:white;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--violet),var(--pink));box-shadow:0 14px 35px rgba(139,92,246,.25);transition:.25s}
.btn:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08)}.btn.alt{background:rgba(255,255,255,.08);border:1px solid var(--line)}.btn.green{background:linear-gradient(135deg,var(--green),#14b8a6)}.btn.orange{background:linear-gradient(135deg,var(--orange),var(--pink))}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}.stat{padding:20px;border-radius:24px;transition:.25s}.stat:hover{transform:translateY(-6px)}.stat h3{font-size:31px}.stat p{font-size:13px;color:#cbd5e1;margin-top:5px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.card{padding:22px;border-radius:25px;transition:.25s;position:relative;overflow:hidden}.card:hover{transform:translateY(-7px);background:var(--glass2)}.card .icon{font-size:33px;margin-bottom:12px}.card h3{font-size:20px;margin-bottom:8px}.card p,.card li{color:#dbeafe;line-height:1.6;font-size:14px}.card ul{margin-left:18px;margin-top:10px}
.tool{display:none}.tool.active{display:block;animation:fadeUp .35s ease}.toolbox{padding:24px;border-radius:28px;margin-top:18px}
label{display:block;margin:14px 0 8px;color:#dbeafe;font-weight:700;font-size:14px}input,textarea,select{width:100%;padding:14px 15px;border-radius:15px;border:1px solid var(--line);background:rgba(2,6,23,.65);color:white;outline:none;font-size:15px}textarea{min-height:130px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.output{min-height:145px;margin-top:18px;padding:18px;border-radius:20px;background:rgba(2,6,23,.65);border:1px solid var(--line);white-space:pre-wrap;line-height:1.72;color:#e0f2fe;overflow:auto}
.chatbox{height:420px;overflow:auto;padding:16px;border-radius:20px;background:rgba(2,6,23,.65);border:1px solid var(--line)}
.msg{max-width:82%;padding:14px 16px;margin:11px 0;border-radius:18px;line-height:1.6;white-space:pre-wrap;animation:msg .25s ease}@keyframes msg{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}.user{margin-left:auto;background:linear-gradient(135deg,var(--blue),var(--violet))}.bot{background:rgba(255,255,255,.12)}
.quiz-option{padding:14px;margin:10px 0;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.07);cursor:pointer}.quiz-option:hover{background:rgba(139,92,246,.22)}.correct{border-color:#22c55e;background:rgba(34,197,94,.18)}.wrong{border-color:#ef4444;background:rgba(239,68,68,.18)}.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:10px}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--pink),var(--green));transition:.35s}
.report-section{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}.footer{text-align:center;color:#bfdbfe;font-size:13px;margin-top:24px}
@media(max-width:1050px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.stats,.grid,.report-section{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}}@media(max-width:700px){.main{padding:16px}.stats,.grid,.report-section{grid-template-columns:1fr}.hero h2{font-size:31px}}