@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#0e1f3f;--muted:#71809a;--line:#dfe7f1;--blue:#4164e8;--teal:#08a9aa;--purple:#7546d5;--panel:#fff}*{box-sizing:border-box}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:#f5f8fc}button,input{font:inherit}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;position:relative;overflow:hidden}.story{padding:7vh 7vw;display:flex;flex-direction:column;justify-content:center;position:relative;color:#fff}.mini-brand{position:absolute;top:5vh;left:7vw;font-size:13px;font-weight:800}.mini-brand span,.side-brand span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px 4px;background:linear-gradient(135deg,#566df0,#08aaac);margin-right:9px}.eyebrow,.kicker{font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:#67e4d3}.story h1{font-size:clamp(46px,5.5vw,78px);line-height:.98;letter-spacing:-4px;margin:18px 0}.story h1 em{font-style:normal;color:#69e1d5}.story p{max-width:600px;line-height:1.8;color:#d7dcf0}.admin-login .story{background:radial-gradient(circle at 78% 28%,#b1535738,transparent 25%),linear-gradient(135deg,#111b3e,#3b214d)}.vle-login .story{background:radial-gradient(circle at 75% 22%,#29d3bd3d,transparent 25%),linear-gradient(135deg,#062b3c,#0e5460)}.customer-login .story{background:radial-gradient(circle at 75% 22%,#88a8ff42,transparent 28%),linear-gradient(135deg,#162454,#3555b7)}.feature-row{display:flex;gap:10px;margin-top:30px}.feature-row div{padding:14px 18px;border:1px solid #ffffff28;border-radius:14px;background:#ffffff0c}.feature-row b,.feature-row small{display:block}.feature-row small{font-size:10px;color:#c8cfe5;margin-top:4px}.steps{display:flex;align-items:center;gap:12px;margin-top:30px}.steps i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#6ae1d6;color:#073844;font-style:normal;font-weight:800}.steps span{font-size:12px}.service-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.service-pills span{border:1px solid #ffffff35;background:#ffffff12;padding:10px 14px;border-radius:30px;font-size:11px}.login-side{display:grid;place-items:center;padding:40px;position:relative;background:#f7f9fd}.lang{position:absolute;right:40px;top:28px;font-size:10px;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:30px;color:#67748d}.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:42px;box-shadow:0 30px 90px #1a315118;animation:rise .7s ease both}.role-icon{display:grid;place-items:center;width:44px;height:44px;color:#fff;font-weight:800;border-radius:14px 5px;background:linear-gradient(135deg,var(--purple),#d66767);box-shadow:0 10px 25px #7249ba35}.vle-login .role-icon{background:linear-gradient(135deg,#087c86,#43c9ac)}.customer-login .role-icon{background:linear-gradient(135deg,#4164e8,#09a8aa)}.login-card h2{font-size:30px;margin:15px 0 3px;letter-spacing:-1px}.login-card>p{color:var(--muted);font-size:13px;margin:0 0 25px}.login-card label{display:block;font-size:10px;font-weight:800;text-transform:uppercase;color:#62728b;margin:16px 0 7px}.login-card input{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:14px;outline:none}.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #4164e812}.pass{display:flex}.pass input{border-radius:10px 0 0 10px}.pass button{border:1px solid var(--line);border-left:0;background:#f0f4fa;color:var(--blue);font-size:11px;font-weight:800;border-radius:0 10px 10px 0;padding:0 13px}.primary{width:100%;border:0;border-radius:10px;padding:15px;color:#fff;font-weight:800;background:linear-gradient(120deg,var(--blue),var(--teal));box-shadow:0 12px 25px #3868d32c;cursor:pointer;margin-top:6px}.security{text-align:center;margin-top:16px;padding:10px;border-radius:9px;background:#f5f7fb;color:#7b879a;font-size:10px}.alert{padding:11px;border-radius:9px;background:#fff0ef;color:#b93d3d;font-size:12px}.ambient{position:fixed;border-radius:50%;filter:blur(2px);opacity:.35;animation:float 7s ease-in-out infinite}.a1{width:240px;height:240px;background:#a76365;left:38%;top:10%}.a2{width:160px;height:160px;background:#7152d6;left:18%;bottom:8%;animation-delay:-3s}.mesh,.bubbles{position:fixed;inset:0;pointer-events:none}.mesh:after{content:"";position:absolute;width:300px;height:300px;border:1px solid #4addc755;border-radius:48% 52% 61% 39%;left:28%;top:18%;animation:spin 20s linear infinite}.bubbles i{position:absolute;border-radius:50%;border:1px solid #9db6ff45;animation:float 6s ease-in-out infinite}.bubbles i:nth-child(1){width:180px;height:180px;left:28%;top:14%}.bubbles i:nth-child(2){width:90px;height:90px;left:10%;bottom:12%;animation-delay:-2s}.bubbles i:nth-child(3){width:130px;height:130px;left:40%;bottom:8%;animation-delay:-4s}
.dash{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.dash aside{background:#101d3c;color:#fff;padding:28px 20px;display:flex;flex-direction:column}.vle-dash aside{background:#073a46}.customer-dash aside{background:#172b69}.side-brand{display:flex;align-items:center;font-size:17px;margin-bottom:40px}.side-brand span{color:#fff}.dash nav{display:grid;gap:8px}.dash nav a{color:#aeb9d1;text-decoration:none;padding:13px 14px;border-radius:10px;font-size:13px;font-weight:700}.dash nav a:hover,.dash nav .active{background:#ffffff12;color:#fff}.signout{margin-top:auto;color:#ff9e95;text-decoration:none;font-size:12px;padding:14px}.workspace{padding:36px 4vw}.workspace header{display:flex;justify-content:space-between;align-items:center}.workspace header small{letter-spacing:1.7px;color:var(--teal);font-weight:800}.workspace header h1{margin:5px 0;font-size:28px}.live{background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:25px;font-size:11px}.live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1bc77c;margin-right:7px;box-shadow:0 0 0 5px #1bc77c20}.hero-panel{margin-top:30px;min-height:280px;border-radius:26px;background:linear-gradient(135deg,#162957,#295598);color:#fff;padding:40px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.vle-dash .hero-panel{background:linear-gradient(135deg,#06414d,#128279)}.customer-dash .hero-panel{background:linear-gradient(135deg,#253d91,#4b72e7)}.hero-panel span{font-size:11px;letter-spacing:1.5px;color:#72dfd7;text-transform:uppercase}.hero-panel h2{font-size:42px;line-height:1.04;letter-spacing:-2px;margin:12px 0}.hero-panel p{color:#d3dcef}.orbit{width:220px;height:220px;border:1px solid #ffffff28;border-radius:50%;position:relative;animation:spin 18s linear infinite}.core,.orb{position:absolute;display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:800}.core{width:80px;height:80px;left:70px;top:70px;background:linear-gradient(135deg,#516df4,#07b4af);font-size:25px}.orb{width:42px;height:42px;background:#ffffff18;border:1px solid #ffffff35;backdrop-filter:blur(8px)}.o1{left:15px;top:26px}.o2{right:2px;top:80px}.o3{left:45px;bottom:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.stats article{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;transition:.25s}.stats article:hover{transform:translateY(-4px);box-shadow:0 18px 35px #1c335014}.stats span,.stats small{display:block;color:var(--muted);font-size:11px}.stats b{display:block;font-size:32px;color:var(--blue);margin:7px 0}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-18px) rotate(5deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.login-layout{grid-template-columns:1fr}.story{min-height:48vh;padding:90px 25px 45px}.mini-brand{left:25px}.story h1{font-size:48px;letter-spacing:-3px}.login-side{padding:50px 20px}.dash{grid-template-columns:1fr}.dash aside{display:none}.workspace{padding:24px 18px}.hero-panel{padding:28px}.orbit{display:none}.stats{grid-template-columns:1fr 1fr}}@media(max-width:550px){.feature-row{display:none}.login-card{padding:28px 22px}.stats{grid-template-columns:1fr}.hero-panel h2{font-size:35px}}