:root{
  --bg1:#0b1220;
  --bg2:#0e1a33;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --text:#eef2ff;
  --muted:rgba(238,242,255,.72);
  --brand:#22c55e;
  --brand2:#60a5fa;
  --warn:#fbbf24;
  --danger:#fb7185;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

.app-bg{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.app-nav{
  backdrop-filter: blur(10px);
  background: rgba(10,16,32,.70) !important;
  border-bottom: 1px solid var(--line);
}

.app-container{
  padding-top: 18px;
  padding-bottom: 90px;
}

.app-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.app-card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.app-select, .form-select, .form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

.form-control::placeholder{ color: rgba(238,242,255,.55); }

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
}

.table thead th{
  color: rgba(238,242,255,.85);
  border-bottom: 1px solid var(--line);
}

.badge-soft{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  color: var(--text);
}

.kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.kpi .icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
}
.kpi .val{ font-size:1.25rem; font-weight:800; }
.kpi .label{ color: var(--muted); font-size:.85rem; }

.btn-brand{
  background: linear-gradient(135deg, var(--brand), #16a34a);
  border: none;
  color: #06220f;
  font-weight:700;
}
.btn-brand:hover{ filter: brightness(1.05); }

.btn-outline-light{
  border-color: rgba(255,255,255,.25) !important;
}

.app-footer{
  position: fixed;
  left:0; right:0; bottom:0;
  background: rgba(10,16,32,.78);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

a{ text-decoration: none; }

.datatable-wrapper .datatable-container{ border-radius: 14px; }

@media (max-width: 576px){
  .navbar-brand{ font-size: 1rem; }
  .app-container{ padding-top: 12px; }
}