@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#202340;--muted:#70718d;--line:#e7e2f7;--brand:#6a35ee;--shadow:0 18px 45px #4d18a822}*{box-sizing:border-box}body{margin:0;background:#f7f6ff;color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}.brand{font:800 22px Manrope;letter-spacing:-1px}.brand b,.hero em{background:linear-gradient(90deg,#ff5296,#7541f1,#20b5de);-webkit-background-clip:text;background-clip:text;color:transparent}.primary,.secondary{border-radius:10px;padding:12px 18px;font-weight:700}.primary{color:#fff;background:linear-gradient(100deg,#ff5d99,#8c3fed 52%,#327bee);box-shadow:0 9px 20px #6a35ee50}.secondary{background:linear-gradient(100deg,#ffe4f0,#e8deff);color:#6b35db}.textbtn{background:transparent;color:var(--ink);font-weight:700;padding:10px}.landing{min-height:100vh;background:radial-gradient(circle at 85% 8%,#ffd6aa 0,transparent 22%),radial-gradient(circle at 8% 22%,#c7f5eb 0,transparent 23%),linear-gradient(145deg,#fff8f7,#f8f5ff 48%,#eef8ff)}.topbar{max-width:1180px;margin:auto;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.top-actions,.hero-actions{display:flex;gap:12px;align-items:center}.hero{max-width:1180px;margin:auto;padding:72px 24px 82px;display:grid;grid-template-columns:1.06fr .94fr;gap:65px;align-items:center}.eyebrow{color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero h1{font:800 54px/1.1 Manrope;letter-spacing:-2.5px;margin:15px 0 20px}.hero h1 em{font-style:normal}.hero p{color:var(--muted);font-size:18px;line-height:1.65;max-width:560px}.hero-actions{margin-top:29px}.trust{margin-top:31px;color:var(--muted);font-size:14px}.preview{padding:18px;background:linear-gradient(135deg,#fff,#faf6ff);border:1px solid #e3d6ff;border-radius:20px;box-shadow:0 25px 50px #5730a52b;transform:rotate(2deg)}.mini-top{height:35px;background:linear-gradient(90deg,#ffe7f0,#eee8ff,#dcf9fa);border-radius:9px;display:flex;align-items:center;gap:6px;padding-left:12px}.dot{width:7px;height:7px;border-radius:50%;background:#ff719e}.dot:nth-child(2){background:#ffbd63}.dot:nth-child(3){background:#60d6b3}.mini-grid{display:grid;grid-template-columns:104px 1fr;min-height:330px}.mini-nav{background:linear-gradient(180deg,#282252,#182c59);margin-top:12px;border-radius:9px 0 0 9px;padding:18px 10px}.navline{height:8px;background:#fff2;border-radius:10px;margin-bottom:18px}.mini-main{padding:28px 22px}.mini-main h3{margin:0 0 20px;font-family:Manrope}.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mstat{padding:14px;background:#f7f8fc;border-radius:10px;font-size:11px;color:var(--muted)}.mstat b{display:block;font-size:20px;color:var(--ink);margin-top:5px}.chart{height:125px;margin-top:16px;border-radius:10px;background:linear-gradient(180deg,#ffe0f2,#e8e5ff 54%,#fff)}.features{background:linear-gradient(110deg,#f0e9ff,#e5f8ff 55%,#fff1e7);padding:65px 24px}.features h2{text-align:center;font:800 31px Manrope;margin:0 0 35px}.feature-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{background:linear-gradient(145deg,#fff,#fff9fe);padding:22px;border:1px solid #fff;border-radius:14px;box-shadow:0 12px 27px #7648ab18}.feature i{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:linear-gradient(135deg,#ffdbeb,#dfd4ff,#c9f8f0);font-style:normal}.feature h3{font:700 16px Manrope;margin:15px 0 8px}.feature p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}.auth{min-height:100vh;display:grid;grid-template-columns:.88fr 1.12fr}.auth-side{background:radial-gradient(circle at 25% 20%,#fa629d 0,transparent 31%),radial-gradient(circle at 78% 75%,#259dde 0,transparent 40%),linear-gradient(145deg,#442080,#172c66);color:#fff;padding:52px max(35px,8vw);display:flex;flex-direction:column}.auth-side .brand{color:#fff}.auth-copy{margin:auto 0}.auth-copy h1{font:800 40px/1.15 Manrope}.auth-copy p{color:#d1cdec;line-height:1.6}.auth-points{display:grid;gap:16px;margin-top:35px;color:#dedbff;font-size:14px}.auth-points span{color:#a9ffdc;font-weight:700;margin-right:9px}.auth-pane{display:grid;place-items:center;padding:32px}.card{background:#fff;width:min(440px,100%);padding:34px;border-radius:18px;box-shadow:var(--shadow)}.card h2{font:800 27px Manrope;margin:0 0 7px}.card>p,.form-note{color:var(--muted)}.field{display:grid;gap:7px;margin-bottom:16px;font-size:13px;font-weight:700}.field input,.field select,.search{border:1px solid #dfe4ef;border-radius:9px;padding:12px;color:var(--ink);outline-color:var(--brand)}.form-note{text-align:center;font-size:13px;margin-top:18px}.form-note a{color:var(--brand);font-weight:700;cursor:pointer}.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#282252,#182c59 58%,#162646);color:#cad2ea;padding:23px 14px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.sidebar .brand{color:#fff;padding:0 10px 27px}.menu-label{font-size:10px;letter-spacing:.11em;color:#8390b1;margin:20px 10px 8px}.navitem{width:100%;display:flex;align-items:center;gap:11px;padding:10px;border-radius:8px;background:transparent;color:#bcc6e0;text-align:left;font-size:13px;margin:2px 0}.navitem:hover,.navitem.active{color:#fff;background:#ffffff18}.navicon{width:18px;text-align:center}.side-bottom{position:static;margin-top:auto;padding-top:18px}.userbox{border-top:1px solid #ffffff16;padding:15px 8px 0;display:flex;gap:9px;align-items:center;font-size:12px}.avatar{background:linear-gradient(135deg,#ffd4e6,#d9c9ff,#c8f6ef);color:#4937ba;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-weight:700}.appmain{min-width:0}.appheader{height:70px;background:#fff;border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;justify-content:space-between}.crumb,.titleline p{font-size:14px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:17px}.content{padding:30px;max-width:1440px;margin:auto}.titleline{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}.titleline h1{font:800 27px Manrope;margin:0;letter-spacing:-1px}.titleline p{margin:5px 0 0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{border:1px solid #ebe7f8;border-radius:13px;padding:19px;box-shadow:0 3px 13px #1b2d5010}.kpi:nth-child(1){background:linear-gradient(135deg,#fff,#f4edff)}.kpi:nth-child(2){background:linear-gradient(135deg,#fff,#e5fbf3)}.kpi:nth-child(3){background:linear-gradient(135deg,#fff,#fff3df)}.kpi:nth-child(4){background:linear-gradient(135deg,#fff,#ffe9f1)}.kpi .label{color:var(--muted);font-size:13px}.kpi b{font:800 25px Manrope;display:block;margin:8px 0 4px}.kpi small{font-size:12px;color:#249e76}.dashboard-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:17px;margin-top:17px}.panel,.tablewrap{background:#fff;border:1px solid var(--line);border-radius:13px}.panel{padding:20px}.panel h3{font:700 16px Manrope;margin:0 0 17px}.attendance{display:grid;grid-template-columns:145px 1fr;gap:28px;align-items:center}.ring{width:135px;height:135px;border-radius:50%;background:conic-gradient(#ff5e9d 0 28%,#743ce9 28% 67%,#28b4df 67% 79%,#eef0fb 79%);display:grid;place-items:center}.ring:after{content:'79%\A Present';white-space:pre;text-align:center;line-height:1.6;background:#fff;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}.bars,.activity{display:grid;gap:14px}.barrow{display:grid;grid-template-columns:74px 1fr 35px;align-items:center;font-size:12px;color:var(--muted);gap:8px}.bar,.usagebar{height:8px;background:#eef0f7;border-radius:6px}.bar i{display:block;height:100%;border-radius:6px;background:#8d82f2}.activity div{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:13px}.activity small{display:block;color:var(--muted);margin-top:3px}.usage{margin-top:17px;background:linear-gradient(105deg,#3a236e,#723bc7 55%,#2372c2);color:#fff;padding:22px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 30px #3e258e35}.usage p{color:#d5d1ff;font-size:13px;margin:4px 0}.usagebar{width:210px;background:#ffffff25;margin-top:12px}.usagebar i{display:block;background:linear-gradient(90deg,#f8c75b,#f773a4,#8bf3cf);height:100%;border-radius:8px}.tablewrap{overflow:hidden}.tabletools{padding:16px;display:flex;justify-content:space-between;gap:12px}.search{padding:9px 11px;min-width:220px}.table{width:100%;border-collapse:collapse}.table th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:#fafbfe;padding:13px 18px}.table td{padding:14px 18px;border-top:1px solid var(--line);font-size:13px}.emp{display:flex;gap:10px;align-items:center}.emp .avatar{width:32px;height:32px}.emp small{display:block;color:var(--muted);margin-top:2px}.badge{font-size:11px;padding:5px 8px;border-radius:20px;background:linear-gradient(100deg,#dff8ee,#e1f4ff);color:#158260;font-weight:700}.empty{padding:46px;text-align:center;color:var(--muted)}.modalbg{position:fixed;inset:0;background:#17213a75;display:grid;place-items:center;padding:18px;z-index:10}.modal{background:linear-gradient(145deg,#fff,#fcf9ff);border:1px solid #eee3ff;width:min(530px,100%);border-radius:16px;padding:27px;box-shadow:var(--shadow)}.modal h2{font:800 22px Manrope;margin:0 0 6px}.modal p{color:var(--muted);font-size:14px;line-height:1.5}.modal-actions{display:flex;justify-content:end;gap:10px;margin-top:22px}.module-placeholder{background:radial-gradient(circle at 40% 20%,#fae1f0,transparent 35%),linear-gradient(145deg,#fff,#f6f2ff);border:1px dashed #daccff;border-radius:15px;min-height:360px;display:grid;place-items:center;text-align:center;padding:30px}.module-placeholder .icon{font-size:34px}.module-placeholder h2{font:800 23px Manrope;margin:12px 0 6px}.module-placeholder p{color:var(--muted);max-width:430px}@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:35px}.hero h1{font-size:40px}.preview{display:none}.feature-grid{grid-template-columns:1fr}.auth{grid-template-columns:1fr}.auth-side{display:none}.shell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:20px}.appheader{padding:0 20px}.kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.usage{display:block}.tablewrap{overflow:auto}.attendance{grid-template-columns:1fr}.topbar{height:68px}}