:root{
  --brand:#0a84ff;
  --brand2:#13c27a;
  --ink:#0b1220;
  --muted:#5d6a7a;
  --card:rgba(255,255,255,.90);
  --stroke:rgba(11,18,32,.12);
  --shadow:0 12px 34px rgba(11,18,32,.10);
}

html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: linear-gradient(180deg,#f2fbff 0%, #f7f9fc 55%, #f1fff8 100%);
  color: var(--ink);
}

a{color: var(--brand);}
a:hover{color:#0066cc;}

.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.navbar .navbar-brand, .navbar .nav-link{color: var(--ink) !important;}
.navbar .nav-link.active{font-weight:800;color:var(--brand)!important;}

.brand-logo{
  width:40px;height:40px;border-radius:12px;
  background: rgba(10,132,255,.10);
  border: 1px solid rgba(10,132,255,.18);
  overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:6px;}

.hero{
  position:relative;
  background-image:url('/assets/img/hero.jpg.svg');
  background-size:cover;
  background-position:center;
  padding: 72px 0;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(255,255,255,.84);
}
.hero .container{position:relative; z-index:1;}
.hero-card{
  background: rgba(255,255,255,.93);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.badge-soft{
  background: rgba(19,194,122,.14);
  border: 1px solid rgba(19,194,122,.22);
  color:#066b43;
}

.kpi{
  background: rgba(10,132,255,.06);
  border: 1px solid rgba(10,132,255,.14);
  border-radius: 16px;
  padding: 12px 14px;
}
.small-muted{color: var(--muted); font-size:.92rem;}
.text-secondary{color: var(--muted)!important;}

.page-hero{
  position:relative;
  background-image:url('/assets/img/page-bg.jpg.svg');
  background-size:cover;
  background-position:center;
  padding: 56px 0 30px 0;
  min-height: 210px;
}
.page-hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.60));
}
.page-hero .container{position:relative; z-index:1;}
.page-title{font-weight:900; letter-spacing:-.02em;}
.page-subtitle{max-width: 72ch; color: var(--muted);}

.content-glass{
  margin-top:-46px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.card-soft{
  background: rgba(255,255,255,.93);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(11,18,32,.08);
}
.card-soft .card-img-top{
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

.btn-primary{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border: none;
}
.btn-primary:hover{filter:brightness(.96);}
.btn-outline-light{
  color: var(--ink);
  border: 1px solid rgba(11,18,32,.22);
  background: rgba(255,255,255,.78);
}
.btn-outline-light:hover{background: rgba(255,255,255,.95);}

.form-control,.form-select{border: 1px solid rgba(11,18,32,.18);}
.form-control:focus,.form-select:focus{
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 0 0 .2rem rgba(10,132,255,.18);
}

.footer{
  background: rgba(255,255,255,.78);
  border-top: 1px solid var(--stroke);
  color: var(--muted);
}

.table thead th{color: var(--muted); font-weight:800; border-bottom:1px solid var(--stroke);}