/* ---- palette --------------------------------------------------------- */
:root{
  --blue-main:#003f73;
  --blue-highlight:#0d6efd;
  --card-bg:#f5f7fb;
  --gradient-hero:linear-gradient(135deg,#004b88 0%,#002e52 100%);
}

/* ---- layout helpers -------------------------------------------------- */
.bg-main{background:var(--gradient-hero);}
.btn-highlight{background:var(--blue-highlight);border:none;color:#fff;}
.btn-highlight:hover{opacity:.85}
.card-tut{background:var(--card-bg);border:none;border-radius:1rem;color:#000;}
.section-dark{background:#001d37;}
.section-light{background:#fff;color:#000;}

/* ---- logo ------------------------------------------------------------ */
.tut-logo{
  background:#fff;
  border:1px solid #fff;
  border-radius:0.75rem;        /* rounded‑rect like the app */
  padding:4px;
}

/* ---- Lifesaver demo -------------------------------------------------- */
.lifesaver-bar{
  height:10px;
  background:#ced4da;
  border-radius:6px;
  overflow:hidden;
}
.lifesaver-bar .fill{
  background:var(--blue-highlight);
  height:100%;
  transition:width 1s linear;
}

/* ---- asset blur toggle ---------------------------------------------- */
.asset-card.locked .asset-body{filter:blur(6px);}
.asset-card .lock-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);color:#000;font-size:2rem;opacity:0;
  transition:opacity .2s;
}
.asset-card.locked .lock-overlay{opacity:1;}