/*=========================================================
  ENTERPRISE SAFETY MANAGEMENT SYSTEM
  Premium Login UI
  Part 1/4
==========================================================*/

/*==========================
GOOGLE FONT
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*==========================
ROOT VARIABLES
==========================*/
:root{

--primary:#2563eb;
--primary-light:#3b82f6;

--secondary:#06b6d4;

--success:#22c55e;

--danger:#ef4444;

--warning:#f59e0b;

--dark:#020617;

--dark2:#0f172a;

--card:rgba(255,255,255,.08);

--border:rgba(255,255,255,.15);

--text:#ffffff;

--muted:#94a3b8;

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

--radius:24px;

--transition:.35s cubic-bezier(.4,0,.2,1);

}

/*==========================
RESET
==========================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Inter',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

min-height:100vh;

overflow:hidden;

background:#020617;

color:#fff;

position:relative;

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#111827;

}

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

.background{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-10;

}

/*==========================
ANIMATED GRADIENT
==========================*/

.gradient{

position:absolute;

inset:0;

background:

linear-gradient(

130deg,

#020617,

#071229,

#10254f,

#021d3d,

#020617

);

background-size:400% 400%;

animation:gradientMove 18s ease infinite;

}

/*==========================
FLOATING GLOW
==========================*/

.circle{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.45;

}

.circle.one{

width:520px;

height:520px;

background:#2563eb;

left:-150px;

top:-120px;

animation:floatOne 18s ease-in-out infinite;

}

.circle.two{

width:420px;

height:420px;

background:#06b6d4;

right:-120px;

bottom:-120px;

animation:floatTwo 20s ease-in-out infinite;

}

.circle.three{

width:300px;

height:300px;

background:#9333ea;

left:40%;

top:60%;

animation:floatThree 16s ease-in-out infinite;

}

/*==========================
PARTICLES
==========================*/

.particles{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

}

.particle{

position:absolute;

width:5px;

height:5px;

border-radius:50%;

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

animation:particleFloat linear infinite;

}

/*==========================
LAYOUT
==========================*/

.container{

width:100%;

height:100vh;

display:grid;

grid-template-columns:1.1fr .9fr;

}

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

.left-panel{

display:flex;

flex-direction:column;

justify-content:center;

padding:80px;

position:relative;

animation:fadeLeft 1.2s ease;

}

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

.brand{

max-width:600px;

}

.logo{

width:90px;

margin-bottom:30px;

filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));

animation:logoFloat 5s infinite ease-in-out;

}

.brand h1{

font-size:54px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

letter-spacing:-1px;

}

.brand p{

font-size:20px;

line-height:1.8;

color:var(--muted);

max-width:500px;

}

/*==========================
ILLUSTRATION
==========================*/

.hero-image{

margin-top:60px;

}

.hero-image img{

width:100%;

max-width:620px;

animation:heroFloat 8s ease-in-out infinite;

}

/*==========================
FEATURE LIST
==========================*/

.features{

margin-top:40px;

display:grid;

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

gap:25px;

max-width:700px;

}

.feature{

display:flex;

align-items:flex-start;

gap:18px;

padding:22px;

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

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

border-radius:18px;

backdrop-filter:blur(12px);

transition:var(--transition);

cursor:pointer;

}

.feature:hover{

transform:translateY(-8px);

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

box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.feature i{

font-size:26px;

color:#38bdf8;

margin-top:5px;

}

.feature h3{

font-size:18px;

margin-bottom:8px;

font-weight:700;

}

.feature p{

font-size:14px;

color:var(--muted);

line-height:1.7;

}

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

.right-panel{

display:flex;

align-items:center;

justify-content:center;

padding:50px;

animation:fadeRight 1.2s ease;

}

/*=========================================================
  ENTERPRISE SAFETY MANAGEMENT SYSTEM
  Premium Login UI
  Part 2/4
==========================================================*/

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

.login-card{

position:relative;

width:100%;
max-width:480px;

padding:55px 45px;

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

backdrop-filter:blur(30px);
-webkit-backdrop-filter:blur(30px);

box-shadow:var(--shadow);

overflow:hidden;

transition:var(--transition);

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:
0 35px 90px rgba(0,0,0,.55);

}

.login-card::before{

content:"";

position:absolute;

top:-150px;
right:-150px;

width:300px;
height:300px;

border-radius:50%;

background:rgba(59,130,246,.18);

filter:blur(60px);

pointer-events:none;

}

.login-card::after{

content:"";

position:absolute;

bottom:-140px;
left:-140px;

width:260px;
height:260px;

border-radius:50%;

background:rgba(6,182,212,.15);

filter:blur(60px);

pointer-events:none;

}

/*==========================
SECURITY ICON
==========================*/

.security-icon{

width:85px;
height:85px;

margin:0 auto 25px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

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

animation:pulseShield 3s infinite;

}

.security-icon i{

font-size:34px;

color:#fff;

}

/*==========================
HEADINGS
==========================*/

.login-card h2{

font-size:34px;

font-weight:800;

text-align:center;

margin-bottom:12px;

letter-spacing:-.5px;

}

.subtitle{

text-align:center;

color:var(--muted);

font-size:15px;

line-height:1.8;

margin-bottom:40px;

}

/*==========================
FORM
==========================*/

form{

display:flex;

flex-direction:column;

gap:20px;

}

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

.input-group{

position:relative;

display:flex;

align-items:center;

}

.input-group i{

position:absolute;

left:18px;

font-size:16px;

color:#8fa8d8;

transition:var(--transition);

z-index:5;

}

.input-group input{

width:100%;

height:58px;

padding-left:52px;

padding-right:52px;

border-radius:16px;

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

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

outline:none;

color:#fff;

font-size:15px;

transition:var(--transition);

}

.input-group input::placeholder{

color:#94a3b8;

}

.input-group input:hover{

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

}

.input-group input:focus{

border-color:#3b82f6;

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

box-shadow:
0 0 0 4px rgba(59,130,246,.18);

transform:translateY(-2px);

}

.input-group input:focus+i{

color:#38bdf8;

}

/*==========================
PASSWORD TOGGLE
==========================*/

.password{

position:relative;

}

#togglePassword{

position:absolute;

right:18px;

cursor:pointer;

color:#9fb5db;

transition:var(--transition);

display:flex;

align-items:center;

justify-content:center;

width:34px;

height:34px;

border-radius:50%;

}

#togglePassword:hover{

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

color:#38bdf8;

transform:scale(1.08);

}

/*==========================
OPTIONS
==========================*/

.options{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:4px;

margin-bottom:8px;

font-size:14px;

}

.options label{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

color:var(--muted);

}

.options input[type="checkbox"]{

accent-color:var(--primary);

width:16px;

height:16px;

cursor:pointer;

}

.options a{

text-decoration:none;

color:#60a5fa;

transition:var(--transition);

}

.options a:hover{

color:#93c5fd;

text-decoration:underline;

}

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

#loginButton{

position:relative;

overflow:hidden;

height:58px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

font-size:16px;

font-weight:700;

letter-spacing:.5px;

cursor:pointer;

transition:var(--transition);

box-shadow:
0 18px 35px rgba(37,99,235,.35);

}

#loginButton:hover{

transform:translateY(-3px);

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

}

#loginButton:active{

transform:scale(.98);

}

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

#loginButton::before{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

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

transform:translate(-50%,-50%);

transition:width .6s,height .6s;

pointer-events:none;

}

#loginButton.ripple::before{

width:420px;

height:420px;

}

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

#buttonText{

display:inline-block;

transition:.3s;

}

/*==========================
LOADER
==========================*/

#loader{

display:none;

width:22px;

height:22px;

margin-left:12px;

border-radius:50%;

border:3px solid rgba(255,255,255,.35);

border-top-color:#fff;

animation:spin .8s linear infinite;

vertical-align:middle;

}

.loading #loader{

display:inline-block;

}

.loading #buttonText{

opacity:.85;

}

/*==========================
DIVIDER
==========================*/

.divider{

display:flex;

align-items:center;

margin:35px 0;

color:var(--muted);

font-size:13px;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

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

}

.divider span{

padding:0 18px;

}

/*==========================
SOCIAL LOGIN
==========================*/

.socials{

display:flex;

justify-content:center;

gap:16px;

}

.socials button{

width:54px;

height:54px;

border-radius:16px;

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

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

color:#fff;

font-size:20px;

cursor:pointer;

transition:var(--transition);

}

.socials button:hover{

transform:translateY(-6px);

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

border-color:rgba(255,255,255,.25);

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

}

/*==========================
FOOTER
==========================*/

.footer{

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:14px;

margin-top:40px;

padding-top:25px;

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

font-size:13px;

color:var(--muted);

}

.footer div{

display:flex;

align-items:center;

gap:8px;

}

.footer i{

color:#22c55e;

font-size:14px;

}

/*=========================================================
  ENTERPRISE SAFETY MANAGEMENT SYSTEM
  Premium Login UI
  Part 3/4
==========================================================*/


/*=========================================================
ANIMATIONS
==========================================================*/

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/*=========================================================
FLOATING CIRCLES
==========================================================*/

@keyframes floatOne{

0%{
transform:translate(0,0);
}

50%{
transform:translate(120px,80px);
}

100%{
transform:translate(0,0);
}

}

@keyframes floatTwo{

0%{
transform:translate(0,0);
}

50%{
transform:translate(-120px,-80px);
}

100%{
transform:translate(0,0);
}

}

@keyframes floatThree{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-70px);
}

100%{
transform:translateY(0);
}

}


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

@keyframes particleFloat{

0%{

transform:
translateY(100vh)
scale(.2);

opacity:0;

}

20%{

opacity:.5;

}

80%{

opacity:1;

}

100%{

transform:
translateY(-120vh)
scale(1);

opacity:0;

}

}


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

@keyframes logoFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-10px);

}

100%{

transform:
translateY(0);

}

}


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

@keyframes heroFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

100%{

transform:
translateY(0);

}

}


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

@keyframes fadeLeft{

0%{

opacity:0;

transform:
translateX(-80px);

}

100%{

opacity:1;

transform:
translateX(0);

}

}


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

@keyframes fadeRight{

0%{

opacity:0;

transform:
translateX(80px);

}

100%{

opacity:1;

transform:
translateX(0);

}

}


/*=========================================================
FADE UP
==========================================================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:
translateY(40px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}


/*=========================================================
ZOOM IN
==========================================================*/

@keyframes zoomIn{

0%{

opacity:0;

transform:
scale(.8);

}

100%{

opacity:1;

transform:
scale(1);

}

}


/*=========================================================
SHIELD PULSE
==========================================================*/

@keyframes pulseShield{

0%{

box-shadow:
0 0 0 rgba(37,99,235,.5);

}

50%{

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

}

100%{

box-shadow:
0 0 0 rgba(37,99,235,.5);

}

}


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

@keyframes spin{

100%{

transform:
rotate(360deg);

}

}


/*=========================================================
SHAKE
==========================================================*/

@keyframes shake{

0%{

transform:
translateX(0);

}

20%{

transform:
translateX(-8px);

}

40%{

transform:
translateX(8px);

}

60%{

transform:
translateX(-6px);

}

80%{

transform:
translateX(6px);

}

100%{

transform:
translateX(0);

}

}


/*=========================================================
SUCCESS SCALE
==========================================================*/

@keyframes success{

0%{

transform:
scale(.6);

opacity:0;

}

70%{

transform:
scale(1.15);

}

100%{

transform:
scale(1);

opacity:1;

}

}


/*=========================================================
GLOW
==========================================================*/

@keyframes glow{

0%{

box-shadow:
0 0 0 rgba(6,182,212,.3);

}

50%{

box-shadow:
0 0 35px rgba(6,182,212,.7);

}

100%{

box-shadow:
0 0 0 rgba(6,182,212,.3);

}

}


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

.login-card{

animation:
fadeUp .9s ease;

}


/*=========================================================
FEATURE STAGGER
==========================================================*/

.feature:nth-child(1){

animation:
fadeUp .8s ease;

}

.feature:nth-child(2){

animation:
fadeUp 1s ease;

}

.feature:nth-child(3){

animation:
fadeUp 1.2s ease;

}

.feature:nth-child(4){

animation:
fadeUp 1.4s ease;

}


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

.input-group:nth-child(1){

animation:
fadeUp .8s ease;

}

.input-group:nth-child(2){

animation:
fadeUp 1s ease;

}


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

#loginButton{

animation:
fadeUp 1.2s ease;

}


/*=========================================================
SOCIAL BUTTONS
==========================================================*/

.socials button{

animation:
zoomIn .8s ease;

}

.socials button:nth-child(2){

animation-delay:.2s;

}

.socials button:nth-child(3){

animation-delay:.4s;

}


/*=========================================================
INVALID FORM
==========================================================*/

.form-error{

animation:
shake .4s linear;

}


/*=========================================================
SUCCESS STATE
==========================================================*/

.login-success{

animation:
success .5s ease;

}


/*=========================================================
FOCUS GLOW
==========================================================*/

.input-group input:focus{

animation:
glow 2s infinite;

}


/*=========================================================
HOVER EFFECTS
==========================================================*/

.feature:hover i{

transform:
scale(1.15);

transition:.3s;

}

.socials button:hover{

transform:
translateY(-8px)
scale(1.05);

}

#loginButton:hover{

letter-spacing:.6px;

}


/*=========================================================
SMOOTH TRANSITIONS
==========================================================*/

button,
input,
.feature,
.login-card,
.socials button,
#togglePassword{

transition:
all .35s cubic-bezier(.4,0,.2,1);

}


/*=========================================================
SELECTION
==========================================================*/

::selection{

background:#2563eb;

color:#fff;

}

/*=========================================================
  ENTERPRISE SAFETY MANAGEMENT SYSTEM
  Premium Login UI
  Part 4/4 FINAL
==========================================================*/


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


/* Large Tablets / Small Laptops */

@media(max-width:1200px){

.container{

grid-template-columns:1fr;

overflow-y:auto;

}

body{

overflow:auto;

}


.left-panel{

display:none;

}


.right-panel{

height:100vh;

padding:40px;

}


.login-card{

max-width:460px;

}



}



/*=========================================================
TABLETS
==========================================================*/

@media(max-width:768px){


body{

overflow:auto;

}


.right-panel{

padding:25px;

}


.login-card{

padding:40px 30px;

border-radius:20px;

}


.login-card h2{

font-size:28px;

}


.subtitle{

font-size:14px;

}


.input-group input{

height:54px;

}


#loginButton{

height:54px;

}


.footer{

flex-direction:column;

align-items:center;

text-align:center;

}



}



/*=========================================================
MOBILE DEVICES
==========================================================*/


@media(max-width:480px){


.background{

position:fixed;

}


.right-panel{

padding:15px;

}


.login-card{

padding:35px 22px;

}


.security-icon{

width:70px;

height:70px;

}


.security-icon i{

font-size:28px;

}


.login-card h2{

font-size:25px;

}


.options{

font-size:12px;

}


.socials button{

width:48px;

height:48px;

}


.footer{

font-size:12px;

gap:10px;

}


}



/*=========================================================
SMALL HEIGHT DEVICES
==========================================================*/


@media(max-height:700px){


.right-panel{

align-items:flex-start;

padding-top:30px;

}


.login-card{

margin-bottom:30px;

}



}



/*=========================================================
LANDSCAPE MOBILE
==========================================================*/


@media(max-width:900px) and (orientation:landscape){


.left-panel{

display:none;

}


.right-panel{

padding:20px;

}


.login-card{

max-width:430px;

margin:auto;

}


}



/*=========================================================
ACCESSIBILITY
==========================================================*/


@media(prefers-reduced-motion:reduce){


*,
*::before,
*::after{


animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;


}



}



/*=========================================================
LIGHT MODE SUPPORT
==========================================================*/


.light-mode{


--dark:#f8fafc;

--text:#0f172a;

--muted:#475569;

}


.light-mode body{


background:#f8fafc;


}


.light-mode .login-card{


background:

rgba(255,255,255,.65);


border:

1px solid rgba(0,0,0,.08);


}


.light-mode .input-group input{


color:#0f172a;


background:

rgba(255,255,255,.8);


}


.light-mode .input-group input::placeholder{


color:#64748b;


}



/*=========================================================
UTILITY CLASSES
==========================================================*/


.hidden{

display:none!important;

}


.visible{

display:block!important;

}


.text-center{

text-align:center;

}


.blur{

backdrop-filter:blur(25px);

}



.fade-in{

animation:

fadeUp .8s ease;

}



.scale-in{

animation:

zoomIn .8s ease;

}



/*=========================================================
SECURITY BADGE
==========================================================*/


.security-badge{


position:absolute;

top:20px;

right:25px;


padding:8px 15px;


border-radius:50px;


background:

rgba(34,197,94,.15);


border:

1px solid rgba(34,197,94,.35);


color:#86efac;


font-size:12px;


display:flex;

align-items:center;

gap:8px;


}



.security-badge i{


font-size:13px;


}



/*=========================================================
NOTIFICATION MESSAGE
==========================================================*/


.notification{


position:fixed;


top:30px;


right:30px;


padding:18px 25px;


border-radius:16px;


background:

rgba(255,255,255,.1);


border:

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


backdrop-filter:

blur(20px);


color:white;


transform:

translateY(-100px);


opacity:0;


transition:.5s;


z-index:999;



}


.notification.show{


transform:

translateY(0);


opacity:1;


}



.notification.success{


border-left:

4px solid #22c55e;


}


.notification.error{


border-left:

4px solid #ef4444;


}



/*=========================================================
LOADING OVERLAY
==========================================================*/


.loading-overlay{


position:fixed;


inset:0;


background:

rgba(2,6,23,.85);


display:flex;


align-items:center;


justify-content:center;


opacity:0;


pointer-events:none;


transition:.4s;


z-index:9999;


}



.loading-overlay.active{


opacity:1;


pointer-events:auto;


}



.loading-spinner{


width:70px;


height:70px;


border-radius:50%;


border:

5px solid rgba(255,255,255,.2);


border-top-color:#38bdf8;


animation:

spin 1s linear infinite;


}



/*=========================================================
FINAL POLISH
==========================================================*/


a{

cursor:pointer;

}


button{

font-family:inherit;

}


img{

max-width:100%;

display:block;

}


input{

font-family:inherit;

}



/*=========================================================
END OF STYLE.CSS
==========================================================*/