:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --text:#f5f7fb;
  --muted:#a7b1c2;
  --primary:#2f7cff;
  --primary2:#1d5fe3;
}

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

body{
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(135deg,#08111f,#111b2f);
  color:var(--text);
  min-height:100vh;
}

.container{max-width:1200px;margin:auto;padding:0 15px}

header{
 position:sticky;top:0;z-index:999;
 background:rgba(8,17,31,.8);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--border);
}

.navbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 0;
}

.logo{
 color:#fff;
 text-decoration:none;
 font-size:28px;
 font-weight:bold;
}

.logo span{color:var(--primary)}

.nav-menu{
 list-style:none;
 display:flex;
 gap:18px;
 align-items:center;
}

.nav-menu a{
 color:#fff;
 text-decoration:none;
}

.hero{padding:80px 0}

.glass,
.dashboard-card,
.auth-card{
 background:var(--card);
 border:1px solid var(--border);
 backdrop-filter:blur(18px);
 border-radius:18px;
 box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.auth-section{
 display:flex;
 justify-content:center;
 align-items:center;
 min-height:100vh;
 padding:20px;
}

.auth-card{
 width:100%;
 max-width:460px;
 padding:35px;
}

.dashboard-card{
 padding:25px;
 transition:.25s;
}

.dashboard-card:hover{
 transform:translateY(-5px);
}

.btn-primary{
 background:var(--primary)!important;
 border:none!important;
}

.btn-primary:hover{
 background:var(--primary2)!important;
}

.btn-outline{
 border:1px solid var(--primary);
 color:#fff;
}

.form-control,
.form-select,
textarea{
 background:#162235!important;
 border:1px solid #31415e!important;
 color:#fff!important;
}

.form-control::placeholder{
 color:#98a5bb;
}

.table{
 border-color:#324055!important;
}

.table-dark{
 --bs-table-bg:transparent;
}

img{
 max-width:100%;
 display:block;
}

footer{
 margin-top:60px;
 border-top:1px solid var(--border);
 color:var(--muted);
}

.alert{
 border:none;
 border-radius:12px;
}

.badge{
 padding:8px 12px;
}

@media(max-width:768px){

.navbar{
 flex-direction:column;
 gap:15px;
}

.nav-menu{
 flex-wrap:wrap;
 justify-content:center;
}

.hero h1{
 font-size:34px;
}

.auth-card{
 padding:25px;
}

}