:root{
  --glass-bg: rgba(255,255,255,0.08);
  --glass-bg-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 12px 30px rgba(0,0,0,0.45);
  --glass-blur: 14px;
}

body.glass-app{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,152,0,0.10), transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(800px 600px at 70% 95%, rgba(33,150,243,0.06), transparent 50%),
    #0f0f0f;
  color: #fff;
}

body.glass-app .card,
body.glass-app .card-custom,
body.glass-app .summary-card,
body.glass-app .overview-card{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass-app .card,
  body.glass-app .card-custom,
  body.glass-app .summary-card,
  body.glass-app .overview-card{
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

body.glass-app .navbar,
body.glass-app .bottom-nav,
body.glass-app .sticky-bottom-bar{
  background: rgba(18,18,18,0.45) !important;
  border-top: 1px solid var(--glass-border) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass-app .navbar,
  body.glass-app .bottom-nav,
  body.glass-app .sticky-bottom-bar{
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

body.glass-app .modal-content{
  background: rgba(18,18,18,0.55) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass-app .modal-content{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
    backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  }
}

body.glass-app .table{
  background: transparent !important;
}
body.glass-app .table > :not(caption) > * > *{
  background-color: rgba(18,18,18,0.35) !important;
}