@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

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

:root{
  --primary:#1d8cff;
  --cyan:#00e5ff;
  --deep:#07111f;
  --text:#f7fbff;
  --muted:#a9bbd1;
  --glass:rgba(255,255,255,.095);
  --border:rgba(255,255,255,.18);
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  font-family:'Be Vietnam Pro', 'Montserrat', Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 80% 90%, rgba(29,140,255,.18), transparent 36%),
    linear-gradient(135deg, #050a14 0%, #07111f 45%, #0a1830 100%);
  overflow:hidden;
}

button,
input{
  font-family:'Be Vietnam Pro', 'Montserrat', Arial, Helvetica, sans-serif;
}

.bg-grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 85%);
  pointer-events:none;
}

.bg-orb{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.35;
  animation:float 8s ease-in-out infinite alternate;
}

.orb-one{
  top:-120px;
  left:-80px;
  background:var(--cyan);
}

.orb-two{
  right:-100px;
  bottom:-140px;
  background:var(--primary);
  animation-delay:1.5s;
}

.app-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.login-page{
  width:min(1050px, 100%);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:stretch;
}

.brand-panel,
.login-card,
.dashboard-card{
  background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border:1px solid var(--border);
  backdrop-filter:blur(24px);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  border-radius:32px;
}

.brand-panel{
  padding:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  animation:slideLeft .85s ease both;
}

.brand-badge{
  width:112px;
  height:112px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 35px rgba(0,229,255,.18);
  margin-bottom:28px;
  transition:.3s ease;
}

.brand-badge:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 45px rgba(0,229,255,.32);
}

.brand-logo,
.login-logo,
.dashboard-logo{
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.24));
}

.brand-logo{
  width:82px;
  height:82px;
}

.login-logo{
  width:86px;
  height:86px;
  margin:0 auto 18px;
  display:block;
}

.dashboard-logo{
  width:112px;
  height:112px;
}

.eyebrow{
  color:var(--cyan);
  font-weight:800;
  letter-spacing:3px;
  font-size:12px;
  margin-bottom:14px;
  text-transform:uppercase;
}

.brand-panel h1{
  font-family:'Montserrat', 'Be Vietnam Pro', sans-serif;
  font-size:clamp(38px, 5vw, 64px);
  line-height:1.1;
  margin-bottom:22px;
  letter-spacing:.5px;
}

.brand-desc{
  max-width:560px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.status-row{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#dff8ff;
  font-weight:500;
}

.status-row span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#42ff9b;
  box-shadow:0 0 18px #42ff9b;
}

.login-card{
  padding:42px;
  animation:slideRight .85s ease both;
}

.login-card h2{
  text-align:center;
  font-size:28px;
  margin-bottom:8px;
  font-weight:800;
}

.form-subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:30px;
  line-height:1.6;
}

label{
  display:block;
  margin:18px 0 8px;
  color:#dce9f8;
  font-size:14px;
  font-weight:700;
}

.input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-radius:16px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  transition:.25s ease;
}

.input-wrap:hover,
.input-wrap:focus-within{
  border-color:rgba(0,229,255,.65);
  box-shadow:0 0 0 4px rgba(0,229,255,.08), 0 0 25px rgba(0,229,255,.12);
  transform:translateY(-1px);
}

.input-icon{
  min-width:28px;
  color:var(--cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}

input{
  width:100%;
  height:54px;
  border:none;
  outline:none;
  background:transparent;
  color:white;
  font-size:16px;
  font-weight:500;
}

input::placeholder{
  color:#8395aa;
}

.login-btn,
.logout-btn{
  position:relative;
  width:100%;
  height:56px;
  border:none;
  border-radius:16px;
  margin-top:26px;
  cursor:pointer;
  color:white;
  font-weight:900;
  letter-spacing:1px;
  background:linear-gradient(135deg, var(--primary), var(--cyan));
  box-shadow:0 16px 35px rgba(0,170,255,.28);
  transition:.25s ease;
  overflow:hidden;
}

.login-btn::before,
.logout-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:.6s ease;
}

.login-btn:hover,
.logout-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 42px rgba(0,170,255,.38);
}

.login-btn:hover::before,
.logout-btn:hover::before{
  left:130%;
}

.demo-box{
  margin-top:22px;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.18);
  border:1px dashed rgba(255,255,255,.22);
  display:grid;
  gap:5px;
  text-align:center;
  color:#e7f4ff;
}

.demo-box p{
  color:var(--muted);
  font-size:13px;
}

.error-text{
  min-height:22px;
  margin-top:16px;
  color:#ff6b7a;
  text-align:center;
  font-weight:800;
}

.dashboard{
  width:100%;
  min-height:100vh;
  display:grid;
  place-items:center;
}

.dashboard-card{
  width:min(820px, 100%);
  padding:52px;
  text-align:center;
  animation:zoomIn .75s ease both;
}

.dash-logo-ring{
  width:156px;
  height:156px;
  margin:0 auto 24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 45px rgba(0,229,255,.18);
  transition:.3s ease;
}

.dash-logo-ring:hover{
  transform:scale(1.04);
  box-shadow:0 0 60px rgba(0,229,255,.35);
}

.dashboard h1{
  font-family:'Montserrat', 'Be Vietnam Pro', sans-serif;
  font-size:64px;
  letter-spacing:8px;
  margin-bottom:10px;
  font-weight:900;
}

.dashboard h2{
  font-size:clamp(24px, 3vw, 34px);
  color:#eaf5ff;
  margin-bottom:14px;
  line-height:1.45;
  font-weight:800;
}

.thesis{
  font-size:24px;
  color:#d3e8ff;
  margin-bottom:28px;
  font-weight:600;
}

.scan-line{
  width:min(420px, 100%);
  height:3px;
  margin:28px auto;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 24px var(--cyan);
  animation:scan 2.2s ease-in-out infinite;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:30px;
}

.info-grid div{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  transition:.25s ease;
}

.info-grid div:hover{
  transform:translateY(-5px);
  border-color:rgba(0,229,255,.5);
  box-shadow:0 16px 30px rgba(0,0,0,.25);
}

.info-grid span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px;
}

.info-grid strong{
  color:#ffffff;
  font-weight:800;
}

.logout-btn{
  max-width:220px;
  margin-top:34px;
}

.hidden{
  display:none!important;
}

.shake{
  animation:shake .35s ease;
}

@keyframes float{
  from{
    transform:translate(0,0) scale(1);
  }
  to{
    transform:translate(40px,30px) scale(1.08);
  }
}

@keyframes slideLeft{
  from{
    opacity:0;
    transform:translateX(-28px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes slideRight{
  from{
    opacity:0;
    transform:translateX(28px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes zoomIn{
  from{
    opacity:0;
    transform:scale(.94);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes scan{
  0%,100%{
    opacity:.45;
    transform:scaleX(.75);
  }
  50%{
    opacity:1;
    transform:scaleX(1);
  }
}

@keyframes shake{
  0%,100%{
    transform:translateX(0);
  }
  25%{
    transform:translateX(-8px);
  }
  50%{
    transform:translateX(8px);
  }
  75%{
    transform:translateX(-5px);
  }
}

@media(max-width:860px){
  body{
    overflow:auto;
  }

  .login-page{
    grid-template-columns:1fr;
  }

  .brand-panel,
  .login-card,
  .dashboard-card{
    padding:32px;
    border-radius:24px;
  }

  .brand-panel{
    text-align:center;
    align-items:center;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .dashboard h1{
    font-size:46px;
  }

  .thesis{
    font-size:19px;
  }
}