*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{background:linear-gradient(-45deg,#071126,#10284d,#0a4b6d,#091d36,#071126);background-size:400% 400%;animation:bg 16s infinite;color:#fff;overflow:hidden}
@keyframes bg{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.container{display:flex;justify-content:space-between;align-items:center;height:100vh;padding:50px}
.left{width:58%}h1{font-size:56px}h1 span{color:#00d9ff}p{margin-top:20px;color:#b9d6f4}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:35px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);border-radius:22px;padding:22px;transition:.4s;overflow:hidden;position:relative}
.card:hover{transform:translateY(-8px);box-shadow:0 0 30px rgba(0,217,255,.3)}
h3{color:#00d9ff;margin-bottom:15px}
.bar{display:flex;align-items:flex-end;height:140px;gap:10px}
.bar div{width:30px;border-radius:8px 8px 0 0;background:linear-gradient(#00d9ff,#00ffa6);animation:bars 2s ease-in-out infinite;transform-origin:bottom}
.bar div:nth-child(1){height:40%}.bar div:nth-child(2){height:65%}.bar div:nth-child(3){height:55%}.bar div:nth-child(4){height:90%}.bar div:nth-child(5){height:75%}
.bar div:nth-child(2){animation-delay:.2s}.bar div:nth-child(3){animation-delay:.4s}.bar div:nth-child(4){animation-delay:.6s}.bar div:nth-child(5){animation-delay:.8s}
@keyframes bars{50%{transform:scaleY(1.25)}}
svg{width:100%;height:140px}.trend{fill:none;stroke:#00d9ff;stroke-width:4;stroke-dasharray:450;stroke-dashoffset:450;animation:draw 5s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
#dotline{fill:#00ffa6;filter:drop-shadow(0 0 8px cyan)}
.donut{width:140px;height:140px;margin:auto;border-radius:50%;background:conic-gradient(#00d9ff 72%,rgba(255,255,255,.08)0);display:grid;place-items:center;animation:spin 8s linear infinite}
.donut span{width:95px;height:95px;border-radius:50%;background:#10284d;display:grid;place-items:center;font-weight:bold}
@keyframes spin{to{transform:rotate(360deg)}}
.radar{display:grid;place-items:center;height:140px}.radar svg{width:130px}.fill{fill:rgba(0,255,180,.3);animation:pulse 2s infinite;transform-origin:center}.line{fill:none;stroke:#00d9ff;stroke-width:3}
@keyframes pulse{50%{transform:scale(1.08)}}
.right{width:380px;transform:translateY(42px)}.login{display:flex;min-height:620px;flex-direction:column;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:25px;padding:35px}.logo{display:flex;justify-content:center;align-items:center;height:82px;margin-bottom:8px}.logo img{display:block;width:auto;max-width:150px;height:auto;max-height:82px;object-fit:contain}.small{text-align:center;margin:10px 0 25px}
input{width:100%;padding:14px;border:none;border-radius:10px;background:rgba(255,255,255,.12);margin:10px 0;color:#fff}
button{width:100%;padding:15px;border:none;border-radius:12px;background:linear-gradient(90deg,#00d9ff,#00ffa6);font-weight:700;cursor:pointer;position:relative;overflow:hidden}
button:before{content:"";position:absolute;left:-120%;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transition:.8s}
button:hover:before{left:120%}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#7eefff;animation:f 8s infinite,blink 2s infinite}
@keyframes f{50%{transform:translateY(-30px)}}@keyframes blink{50%{opacity:.2}}

.dot-one{left:10%;top:20%}.dot-two{left:80%;top:30%;animation-delay:1s}.dot-three{left:40%;top:75%;animation-delay:2s}
.login h2{text-align:center}.login form{margin-top:8px}.login input::placeholder{color:#c9d9e9}.login input:focus{outline:2px solid #00d9ff;outline-offset:2px}
.login button:disabled{cursor:not-allowed;opacity:.72}.login button.is-loading:before{display:none}
.alert{display:none;margin:14px 0 10px;padding:11px 13px;border:1px solid transparent;border-radius:10px;font-size:13px;line-height:1.45}
.alert.is-visible{display:block}.alert-error{color:#ffd9df;background:rgba(225,29,72,.18);border-color:rgba(251,113,133,.45)}.alert-success{color:#c8ffe9;background:rgba(5,150,105,.2);border-color:rgba(52,211,153,.5)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:auto;padding-top:30px;color:#d9e8f5;font-size:13px}.stats div{padding-top:9px;border-top:1px solid rgba(255,255,255,.12)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1050px){body{overflow:auto}.container{height:auto;min-height:100vh;padding:32px;gap:32px}.left{width:55%}.left h1{font-size:38px}.right{width:380px;transform:none}.cards{grid-template-columns:1fr}.card:nth-child(n+3){display:none}}
@media (max-width:760px){.container{display:block;padding:24px 18px}.left,.right{width:100%}.left{text-align:center;margin-bottom:28px}.left h1{font-size:30px}.left>p{font-size:14px}.cards{display:none}.right{max-width:420px;margin:0 auto}.login{min-height:0;padding:28px 24px}.stats{margin-top:24px;padding-top:0}}
@media (max-height:720px) and (min-width:761px){body{overflow:auto}.container{height:auto;min-height:100vh}.cards{margin-top:20px}.card{padding:16px}.bar,.radar,.card svg{height:100px}.donut{width:100px;height:100px}.donut span{width:68px;height:68px}.login{min-height:520px;padding:26px}}