:root{
  --bmat-1:#ff3d8d;
  --bmat-2:#ff9f1c;
  --bmat-3:#2ec4b6;
  --bmat-4:#3a86ff;
}
/* ======================================
   Full-Screen Background + Lighting
====================================== */
body,
p,
span,
div,
label,
li,
td,
th,
small {
    color: white;
}
body.bmat-bg {
  background: url("/static/imgs/bg-1.png") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #ffffff;
}

/* Dark overlay for readability */
body.bmat-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.75) 100%
  );
  z-index: -2;
}

/* Soft radial lighting effect */
body.bmat-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
      radial-gradient(
        circle at 20% 30%,
        rgba(255, 204, 100, 0.15),
        transparent 20%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(255, 160, 0, 0.12),
        transparent 25%
      );
  z-index: -1;
  pointer-events: none;
}
.bmat-nav{
  background: linear-gradient(90deg, rgba(255,61,141,.85), rgba(255,159,28,.85), rgba(46,196,182,.85), rgba(58,134,255,.85));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.bmat-logo{
  width:36px; height:36px; border-radius:12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.25);
  object-fit: cover;
}
.bmat-card{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  backdrop-filter: blur(16px);
}
.bmat-alert{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
}
.list-group-item{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.85);
  border-radius: 14px !important;
  margin-bottom: 6px;
}
.list-group-item:hover{ background: rgba(255,255,255,0.10); color:#fff; }
.bmat-dot{
  width:14px; height:14px; border-radius:999px;
  background: linear-gradient(135deg,var(--bmat-1),var(--bmat-2),var(--bmat-3),var(--bmat-4));
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.bmat-pill{
  display:inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16);
  font-weight: 700;
}
.bmat-kpi, .bmat-mini-card{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 14px 14px;
  backdrop-filter: blur(16px);
}
.bmat-kpi-inline{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 140px;
  text-align:center;
}
.bmat-question{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
}
.table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.06);
  --bs-table-hover-bg: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
}
.table thead th{ color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.10); }
.table td, .table th{ border-color: rgba(255,255,255,0.10); }

/* ============================
   Typography + Contrast
============================ */
body {
  font-family: 'Inter', sans-serif;
  font-size: 1.06rem;
  font-weight: 500;
  color: #ffffff;
}

h1,h2,h3,h4,h5,h6 { color: #ffffff; font-weight: 600; }

/* Make muted text readable on dark backgrounds */
.text-muted,
.text-white-50 {
  color: rgba(255,255,255,0.72) !important;
}

/* ============================
   Premium Video + Resource Cards
============================ */
.bmat-resource-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.bmat-resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

.bmat-video-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transform: translateZ(0);
}

.bmat-video-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.bmat-video-wrap iframe {
  position: relative;
  z-index: 0;
}

.bmat-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.bmat-video-play span {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
}

.bmat-video-play span::after {
  content: "";
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 12px solid rgba(255,255,255,0.9);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Premium chip link */
.bmat-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
}
.bmat-chip-link:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ============================
   Premium Tiny Action Cards
============================ */
.bmat-action-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.bmat-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.bmat-action-title {
  font-weight: 600;
  font-size: 1rem;
}
.bmat-action-body {
  font-size: .95rem;
  opacity: 0.85;
  line-height: 1.6;
}
.bmat-action-badge {
  background: linear-gradient(135deg, #f6c667, #ffae00);
  color: #111;
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}