:root{
  --app-bg:#f6f7f9;
  --card-radius:16px;
  --content-pad-x:50px;
  --content-pad-bottom:50px;
  --content-pad-top:24px;
}

body { background: var(--app-bg); }

.app-content{
  padding: var(--content-pad-top) var(--content-pad-x) var(--content-pad-bottom);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 991px){
  :root{ --content-pad-x:16px; --content-pad-bottom:24px; }
}

.app-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(18,38,63,.06);
}

.app-navbar{
  background:white;
  position: sticky;
  top:0;
  z-index:1030;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.brand-dot{
  width:10px;height:10px;border-radius:999px;background:#0d6efd;display:inline-block;
}

.navbar .nav-link{
  border-radius: 10px;
  padding: .5rem .75rem;
  margin: 0 .125rem;
  color: rgba(0,0,0,.75);
}
.navbar .nav-link:hover{
  background: rgba(13,110,253,.06);
  color: rgba(0,0,0,.90);
}
.navbar .nav-link.active{
  background: rgba(13,110,253,.12);
  color: #0d6efd;
  font-weight: 600;
}

.dropdown-menu{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(18,38,63,.12);
  padding: .5rem;
}
.dropdown-item{
  border-radius: 10px;
  padding: .5rem .75rem;
}
.dropdown-item:hover{
  background: rgba(13,110,253,.08);
}