:root{
  --bg-1: #0f1724; /* deep navy */
  --bg-2: #0b1220; /* darker */
  --accent:#6f42c1; /* purple */
  --accent-2:#12b886; /* teal */
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
}
body{
  min-height:100vh;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(111,66,193,0.12), transparent 8%),
			  radial-gradient(900px 400px at 90% 85%, rgba(18,184,134,0.08), transparent 8%),
			  linear-gradient(180deg,#0f1723,#071126 65%);
  color: #e6eef8;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}


input.text-white::placeholder { color:#6c757d;}

.navbar{background:transparent}
.brand{font-weight:700;letter-spacing:.4px}

.card-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 30px rgba(2,6,23,0.6);
}
.brand-badge{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:999px;font-weight:600;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow: 0 6px 18px rgba(18,184,134,0.12);
  font-size:.95rem;
}
.logo-mark{
  width:34px;height:34px;border-radius:8px;display:inline-grid;place-items:center;background:rgba(255,255,255,0.15);font-weight:700;color:#fff;
  box-shadow:0 4px 10px rgba(111,66,193,0.12);
}
.form-control:focus{box-shadow:none;border-color:rgba(111,66,193,0.65)}
.or-divider{color:rgba(255,255,255,0.45);font-size:.9rem}
.social-btn{border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.muted{color:rgba(255,255,255,0.6)}

.btn-accent{
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
}

.brand{font-weight:700;letter-spacing:0.4px;padding:1.4rem 1.25rem;font-size:1.05rem}
.nav-link{color:rgba(230,238,248,0.85)}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:3px solid rgba(140,92,246,0.9);}

.app-shell{min-height:100vh;display:flex}
/* Sidebar */
.sidebar{width:260px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(6px);box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);border-right:1px solid rgba(255,255,255,0.02)}
.nav-link{color:rgba(230,238,248,0.85)}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:3px solid rgba(140,92,246,0.9);}
.content{flex:1;padding:1.5rem}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.search{min-width:320px;background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:.5rem .75rem;border-radius:10px}
.kpi-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);border-radius:12px;padding:1rem}
.card-ghost{background:transparent;border:1px dashed rgba(255,255,255,0.03)}
.chip{background:linear-gradient(90deg,#1f2937, rgba(255,255,255,0.01));border-radius:999px;padding:.35rem .6rem;font-size:.8rem}
.small-muted{color:rgba(230,238,248,0.55);font-size:.85rem}
.table thead th{border-bottom:1px solid rgba(255,255,255,0.03)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

@media (max-width: 992px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.card-grid{grid-template-columns:1fr}.sidebar{display:none}}
@media (max-width:575px){body{padding:1.25rem}}