/*====================================================
 BMI ICLOUD LOGIN
 Enterprise SaaS UI
=====================================================*/

:root{

    --primary:#2563eb;
    --primary2:#1d4ed8;
    --bg:#0f172a;
    --card:rgba(255,255,255,.12);
    --border:rgba(255,255,255,.15);
    --text:#ffffff;
    --muted:#cbd5e1;
    --shadow:0 20px 60px rgba(0,0,0,.30);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{

    height:100%;
    font-family:"Segoe UI",sans-serif;
    overflow:hidden;
    background:#0f172a;

}

/*=========================
BACKGROUND
=========================*/

body{

background:

linear-gradient(135deg,#071426,#0f172a,#1e3a8a);

position:relative;

}

/* GRID */

body::before{

content:"";

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

background-image:

linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

background-size:40px 40px;

opacity:.35;

animation:gridMove 18s linear infinite;

}

/*=========================
WRAPPER
=========================*/

.login-wrapper{

display:flex;

height:100vh;

position:relative;

z-index:2;

}

/*=========================
LEFT
=========================*/

.left-panel{

width:60%;

padding:60px;

color:white;

display:flex;

flex-direction:column;

justify-content:space-between;

}

/*=========================
BRAND
=========================*/

.brand img{

height:70px;

margin-bottom:20px;

}

.brand h1{

font-size:42px;

font-weight:700;

letter-spacing:1px;

}

.brand p{

margin-top:10px;

font-size:20px;

color:#cbd5e1;

}

/*=========================
KPI
=========================*/

.kpi-container{

display:flex;

gap:25px;

margin-top:40px;

}

.kpi-card{

flex:1;

padding:25px;

border-radius:20px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.12);

box-shadow:0 15px 30px rgba(0,0,0,.20);

transition:.35s;

}

.kpi-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.15);

}

.kpi-number{

font-size:34px;

font-weight:bold;

}

.kpi-title{

margin-top:10px;

color:#dbeafe;

}

/*=========================
MODULES
=========================*/

.module-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-top:40px;

}

.module-card{

padding:25px;

border-radius:18px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(15px);

transition:.35s;

text-align:center;

cursor:pointer;

}

.module-card:hover{

transform:translateY(-8px);

background:#2563eb;

}

.module-card i{

font-size:34px;

margin-bottom:15px;

display:block;

}

.module-card span{

font-size:15px;

}

/*=========================
STATUS
=========================*/

.status-bar{

display:flex;

justify-content:space-between;

margin-top:40px;

padding:20px;

border-top:1px solid rgba(255,255,255,.15);

color:#cbd5e1;

font-size:15px;

}

/*=========================
RIGHT
=========================*/

.right-panel{

width:40%;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

/*=========================
LOGIN CARD
=========================*/

.login-card{

width:420px;

padding:45px;

border-radius:30px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.20);

box-shadow:0 25px 70px rgba(0,0,0,.35);

animation:fadeUp .8s;

}

/*=========================
LOGO
=========================*/

.login-logo{

text-align:center;

margin-bottom:20px;

}

.login-logo img{

height:70px;

}

/*=========================
TITLE
=========================*/

.login-card h2{

text-align:center;

font-weight:bold;

color:white;

margin-bottom:8px;

}

.subtitle{

text-align:center;

color:#cbd5e1;

margin-bottom:30px;

}

/*=========================
INPUT
=========================*/

.input-group-custom{

position:relative;

margin-bottom:20px;

}

.input-group-custom i{

position:absolute;

left:16px;

top:15px;

color:#94a3b8;

}

.input-group-custom input{

height:54px;

padding-left:48px;

padding-right:48px;

border-radius:15px;

border:none;

background:rgba(255,255,255,.92);

}

.input-group-custom input:focus{

box-shadow:0 0 0 4px rgba(37,99,235,.30);

}

#togglePassword{

position:absolute;

right:18px;

top:16px;

cursor:pointer;

color:#64748b;

}

/*=========================
OPTION
=========================*/

.login-option{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

font-size:14px;

color:white;

}

.login-option a{

color:#93c5fd;

text-decoration:none;

}

/*=========================
BUTTON
=========================*/

.btn-login{

width:100%;

height:55px;

border:none;

border-radius:15px;

background:linear-gradient(90deg,#2563eb,#1d4ed8);

font-size:17px;

font-weight:bold;

color:white;

transition:.35s;

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(37,99,235,.40);

}

/*=========================
EXTRA
=========================*/

.extra{

margin-top:30px;

text-align:center;

color:white;

font-size:14px;

line-height:28px;

}

.extra a{

color:#93c5fd;

text-decoration:none;

}

/*=========================
ANIMATION
=========================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(40px);

}

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1100px){

.left-panel{

display:none;

}

.right-panel{

width:100%;

}

.login-card{

width:95%;

max-width:450px;

}

body{

overflow:auto;

}

}
/*==================================
ACTIVE MODULE
==================================*/

.active-module{

background:#2563eb !important;

box-shadow:0 0 25px rgba(37,99,235,.7);

transform:translateY(-8px);

}

/*==================================
FLOAT
==================================*/

.floating{

animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
.particles{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

}

.particles span{

position:absolute;

width:6px;

height:6px;

border-radius:50%;

background:#38bdf8;

opacity:.4;

animation:particleMove linear infinite;

}

.particles span:nth-child(1){

left:8%;

animation-duration:10s;

animation-delay:0s;

}

.particles span:nth-child(2){

left:22%;

animation-duration:12s;

animation-delay:2s;

}

.particles span:nth-child(3){

left:35%;

animation-duration:9s;

animation-delay:1s;

}

.particles span:nth-child(4){

left:48%;

animation-duration:14s;

animation-delay:3s;

}

.particles span:nth-child(5){

left:61%;

animation-duration:11s;

animation-delay:4s;

}

.particles span:nth-child(6){

left:74%;

animation-duration:13s;

animation-delay:2s;

}

.particles span:nth-child(7){

left:86%;

animation-duration:10s;

animation-delay:5s;

}

.particles span:nth-child(8){

left:94%;

animation-duration:15s;

animation-delay:1s;

}

@keyframes particleMove{

0%{

transform:translateY(110vh);

opacity:0;

}

10%{

opacity:.5;

}

100%{

transform:translateY(-120px);

opacity:0;

}

}
.popup-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

backdrop-filter:blur(8px);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

animation:fadeIn .3s;

}

.popup-window{

width:460px;

max-width:92%;

background:rgba(255,255,255,.12);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.2);

border-radius:24px;

overflow:hidden;

box-shadow:0 30px 60px rgba(0,0,0,.35);

animation:zoomIn .3s;

}

.popup-header{

padding:30px 20px 15px;

text-align:center;

color:white;

}

.popup-logo{

height:60px;

margin-bottom:10px;

}

.popup-header h3{

margin:0;

font-size:26px;

font-weight:bold;

}

.popup-title{

display:block;

margin-top:10px;

font-size:18px;

color:#ffc107;

}

.popup-body{

padding:25px;

text-align:center;

color:white;

}

.popup-body h4{

font-size:22px;

margin-bottom:15px;

color:#fff;

}

.popup-body p{

font-size:16px;

line-height:28px;

color:#dbeafe;

}

.popup-hotline{

margin-top:25px;

font-size:22px;

font-weight:bold;

color:#38bdf8;

}

.popup-footer{

display:flex;

gap:15px;

padding:20px;

justify-content:center;

}

.btn-popup{

padding:12px 28px;

border:none;

border-radius:12px;

font-size:15px;

font-weight:bold;

text-decoration:none;

cursor:pointer;

transition:.3s;

}

.btn-contact{

background:#2563eb;

color:white;

}

.btn-contact:hover{

background:#1d4ed8;

transform:translateY(-2px);

}

.btn-close-popup{

background:#e5e7eb;

}

.btn-close-popup:hover{

background:#d1d5db;

transform:translateY(-2px);

}

@keyframes zoomIn{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}