:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card:#0D1429;
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --glow:rgba(77, 152, 255, .45);
  --glow2:rgba(0, 255, 198, .28);
}

.badge-r { color:#4d98ff; font-weight:600; }
.badge-a { color:#ff4d4d; font-weight:600; }
.badge-c { color:#00ffc6; font-weight:600; }
.badge-i { color:#d29922; font-weight:600; }

.badge-green { color:#2EA043; font-weight:600; }
.badge-red { color:#ff4d4d; font-weight:600; }
.badge-yellow { color:#d29922; font-weight:600; }


html,body{height:100%; margin:0; font-family:Segoe UI, sans-serif;}

body{
  margin:0;
  font-family:Segoe UI, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(77,152,255,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(0,255,198,.10), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}


/* Container */
.container{
  padding:40px;
}

/* KPI Grid */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  margin-bottom:40px;
}

.kpi{
  padding:25px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(13,20,41,.65);
  box-shadow: 0 0 22px var(--glow);
}

.kpi h2{margin:5px 0 0 0;font-weight:700;}
.kpi small{color:var(--muted);}

/* Glow Card */
.card-glow{
  background: linear-gradient(180deg, rgba(13,20,41,.92), rgba(10,14,28,.92));
  border: 1px solid var(--stroke);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 18px 60px rgba(0,0,0,.55),
    0 0 28px var(--glow);
  border-radius: 14px;
  padding:30px;
}

/* Table */
table{
  width:100%;
  border-collapse: collapse;
  margin-top:20px;
}

th, td{
  padding:14px;
  text-align:left;
  border-bottom:1px solid var(--stroke);
}

th{
  color:var(--muted);
  font-weight:600;
}

.green{ color:#2EA043; }
.yellow{ color:#D29922; }
.red{ color:#DA3633; }

/* Button */
.btn-glow{
  padding:8px 16px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background: rgba(0,255,198,.08);
  color:white;
  cursor:pointer;
  box-shadow: 0 0 18px var(--glow2);
}

/* NAVBAR */

/* NAVBAR */

.navbar {
  position: relative; /* critical */
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: rgba(7,10,18,.85);
  border-bottom: 1px solid var(--stroke);
  padding: 0 20px;
}

.nav-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* critical */
}
.logo {
  font-weight: 700;
  font-size: 20px;
  background: linear-gradient(90deg,#4d98ff,#00ffc6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  transition: all .3s ease;
}

.nav-links a:hover {
  color: white;
  text-shadow: 0 0 14px var(--glow);
}

.logout-btn {
  padding: 6px 14px;
  font-size: 14px;
}

/* BURGER MENU */

.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.burger span {
  width: 25px;
  height: 2px;
  background: white;
  transition: all .3s ease;
}

/* MOBILE */

@media (max-width: 950px) {

  .burger {
    display: flex;
  }

  .nav-links {
    will-change: transform;
    position: fixed;
    top: 70px;
    right: 0;
    height: calc(100vh - 70px);
    width: 260px;

    flex-direction: column;
    padding: 30px;
    gap: 20px;

    background: linear-gradient(
      180deg,
      rgba(13,20,41,.98),
      rgba(10,14,28,.98)
    );

    border-left: 1px solid var(--stroke);
    box-shadow: -20px 0 60px rgba(0,0,0,.6);

    transform: translateX(100%);
    transition: transform .3s ease;

    z-index: 2000;
  }

  .nav-links.active {
    transform: translateX(0);
  }

}



/* LOGIN PAGE */

.login-body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.login-container{
  width:400px;
  padding:40px;
  text-align:center;
}

.login-container input{
  width:100%;
  padding:12px;
  margin:12px 0;
  border-radius:8px;
}

.error-text{
  color:#ff4081;
  margin-top:10px;
}

.muted{
  color:var(--muted);
}

.login-links {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.login-links a {
  color: var(--muted);
  text-decoration: none;
}

.login-links a:hover {
  color: white;
  text-shadow: 0 0 10px var(--glow);
}

form input,
form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

form textarea {
  min-height: 80px;
  resize: vertical;
}