:root{
  --app-bg: #0b1220;
  --app-accent: #20c997;
  --app-accent-2: #4dabf7;
}

body{
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 40%, #0b1220 100%);
  min-height: 100vh;
}

.app-nav{
  background: rgba(11, 18, 32, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 0 4px rgba(32, 201, 151, .15);
  display: inline-block;
}
.icon-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(32, 201, 151, .14);
  display: grid;
  place-items: center;
  color: #7ff3d6;
  font-size: 20px;
  border: 1px solid rgba(32, 201, 151, .25);
}
.card{
  border-radius: 18px;
}
.qr-box{
  width: 240px;
  height: 240px;
  padding: 10px;
  background: #fff;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.scan-box{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 12px;
  min-height: 320px;
}
.app-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
  opacity: .85;
}
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  color: rgba(255,255,255,.72);
  border-bottom-color: rgba(255,255,255,.08);
}
.table td, .table th{
  border-top-color: rgba(255,255,255,.06);
}
.card, .alert, .dropdown-menu, .form-control, .form-select{
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.form-control, .form-select{
  border-radius: 14px;
}
.btn{
  border-radius: 14px;
}