/* =====================================================================
   styleSleepShared.css -- SLEEP PAGES, LAYOUT (both modes)
   Created 25 Sep 2026. Replaces the layout half of styleSleep.css
   (archived in tt24child_backups/sleepmode_steps/step04_*).

   Three files now style the 22 Sleep pages (all load on every one):
     styleSleepShared.css  this file: layout -- grids, spacing, sizes,
                           fonts, positions, animations
     styleSleepDay.css     Day look: colours, backgrounds, borders, shadows
     styleSleepMode.css    Sleep (night) look

   This file holds no colours, backgrounds, borders or shadows.
   Font sizes, weights, families and corner radii use --bsm3-* variables
   from brand.css. Spacing and widths are unchanged from styleSleep.css.
   15 rules and 12 lines the browser already ignored (broken merges,
   PHP left inside CSS) were dropped -- they never did anything.
   ===================================================================== */


/* ===== SOURCE: sleep/admin_sleep_tools_crud.css ===== */
        body { font-family: var(--bsm3-font-body); margin: 0; padding: 20px; }
        .admin-wrap { max-width: var(--bsm3-width-wide); margin: 0 auto; }

        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .header h1 { margin: 0; font-size: var(--bsm3-size-page-title-24px-use-on-h1); }
        .btn { padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); transition: 0.2s; }

        .search-bar { width: 100%; padding: 12px; border-radius: var(--bsm3-radius-status-cards); margin-bottom: 20px; font-size: var(--bsm3-text-medium-14px-use-on-text); box-sizing: border-box; }
        table { width: 100%; border-collapse: collapse; text-align: left; border-radius: var(--bsm3-radius-status-cards); overflow: hidden; }
        th, td { padding: 12px 15px; }
        th { font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; }
        .tag-category { padding: 4px 8px; border-radius: var(--bsm3-radius-mini-badges); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
        .tag-mode { padding: 4px 8px; border-radius: var(--bsm3-radius-mini-badges); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
        .tag-staple { padding: 4px 8px; border-radius: var(--bsm3-radius-mini-badges); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

        #form-view { display: none; }

        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .form-section h3 { margin-top: 0; margin-bottom: 15px; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); padding-bottom: 8px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 5px; text-transform: capitalize; }
        textarea.form-control { resize: vertical; min-height: 100px; font-family: var(--bsm3-font-mono); font-size: var(--bsm3-text-body-use-on-reading-text); }
        .sleep-id-preview { font-size: var(--bsm3-text-body-use-on-reading-text); margin-top: 4px; font-family: var(--bsm3-font-mono); }

        .toggle-wrap { display: flex; align-items: center; gap: 10px; }
        .toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
        .toggle input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--bsm3-radius-primary-cards); transition: .3s; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; border-radius: 50%; transition: .3s; }
        input:checked + .slider:before { transform: translateX(20px); }
    

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-5px-10px { padding:5px 10px; }
.u-text-align-right-2 { text-align:right; }

/* ===== SOURCE: sleep/calcSmartLight.css ===== */

.ls-slider {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: var(--bsm3-width-standard);
  height: 100vh;
  transition: right 0.35s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.ls-slider.active { right: 0; }

.ls-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
}

.ls-slider-content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ls-btn { border-radius:var(--bsm3-radius-status-cards);
  padding:.55rem .85rem; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  cursor:pointer; margin:.25rem 0;
}

.ls-result { margin-top:1rem; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

.ls-footnote {
  font-size: var(--bsm3-text-body-use-on-reading-text);
  margin-top:.25rem;
}

@media (max-width: 900px) {
  .ls-slider { width: 100%; max-width: none; }
}

/* ===== Daytime theme overrides ===== */

/* ===== SOURCE: sleep/cbti_home.css ===== */

/* Full-width start buttons with extra spacing */
.bsm-btn-full {
  display: block;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 16px 20px;
  text-align: center;
  font-size: var(--bsm3-text-large-16px-use-on-text);
}

/* Night mode grid border visibility */

/* Headings with stacked icons */
.bsm-card h4 {
  text-align: center;
  font-size: var(--bsm3-text-large-16px-use-on-text);
  margin-top: 10px;
}
.bsm-icon {
  display: block;
  font-size: var(--bsm3-text-large-16px-use-on-text); /* bigger icons */
  margin-bottom: 8px;
}

/* ===== SOURCE: sleep/cbti_video.css ===== */

.moon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/* Stars */
.star {
  position: absolute;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  opacity: var(--bsm3-opacity-high);
  animation: twinkle 2s infinite alternate;
  transition: opacity 1s ease;
}
.star.fade-out {
  animation: none;
  opacity: 0;
}@keyframes twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

/* Message styling */
#sleepMessage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--bsm3-text-large-16px-use-on-text);
  font-family: var(--bsm3-font-body);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 99999;
}
#sleepMessage.show {
  visibility: visible;
  opacity: 1;
}

/* Action button overlay */
#practiceButton {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--bsm3-text-large-16px-use-on-text);
  font-family: var(--bsm3-font-body);
  border-radius: var(--bsm3-radius-status-cards);
  padding: 20px 30px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 99999;
}
#practiceButton.show {
  visibility: visible;
  opacity: 1;
}

.session-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}
.session-video.visible {
  visibility: visible;
  opacity: 1;
}

/* Overlay heading (title only, fades out) */
.video-overlay {
  position: fixed;
  top: 20px;
  left: 60px; /* shifted right so it doesn’t overlap home button */
  z-index: 9999;
  padding: 8px 12px;
  font-size: var(--bsm3-text-large-16px-use-on-text);
  border-radius: var(--bsm3-radius-mini-badges);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.video-overlay.show { opacity: 1; }

/* Permanent home button */
.video-home {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;
}
.video-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--bsm3-radius-mini-badges);
}
.video-home svg { width: 70%; height: 70%; }

/* Control bar */
#controls {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 20px;
}
#controls button {
  font-size: var(--bsm3-text-large-16px-use-on-text);
  padding: 10px 20px;
  border-radius: var(--bsm3-radius-mini-badges);
  cursor: pointer;
}

/* Progress bar */
#progressContainer {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 6px;
  border-radius: var(--bsm3-radius-mini-badges);
  overflow: hidden;
  z-index: 9999;
}
#progressBar {
  height: 100%;
  width: 0%;
  transition: width 0.2s linear;
}


/* ===== SOURCE: sleep/lightSmartSleep.css ===== */



/* ===== SOURCE: sleep/sleep-wellness-grid.css ===== */



/* ===== SOURCE: sleep/sleepApneaPathway.css ===== */

  .bsm-form-container {
    max-width: var(--bsm3-width-narrow);
    margin: 0 auto;
	padding:15px;
  }
  .bsm-form-nav {
    text-align: right; /* align buttons and page number to the right */
    margin-bottom: 20px;
  }
  .bsm-form-nav-buttons {
    display: inline-flex;
    gap: 8px;
  }
  .bsm-form-page-number-box {
	  width:100%;
	 
  }
  .bsm-form-page-number {
    display: block;
    margin-top: 6px; /* ensures it sits below the buttons */
    font-size: var(--bsm3-text-medium-14px-use-on-text);
	width:100px;
	float:right;
	text-align:center;	
  }
  .bsm-form-page { display: none; }
  .bsm-form-page.bsm-active { display: block; }
  
  /*check boxes*/
.bsm-indent {
  display: flex;
  flex-direction: column;   /* stack labels vertically */
  align-items: flex-start;  /* keep checkboxes aligned in one column */
  margin: 20px auto;
  padding-left: 40px;       /* add left margin for indentation */
}

.bsm-indent label {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: var(--bsm3-text-large-16px-use-on-text);
}

.bsm-indent input[type="checkbox"] {
  width: 24px;              /* larger checkbox */
  height: 24px;
  margin-right: 10px;       /* space between box and text */
  flex-shrink: 0;           /* prevents checkbox from shifting */
}

  .bsm-assessment {
    display: inline-block;                 /* black text */
    font-size: var(--bsm3-text-body-use-on-reading-text);          /* small font size */
    padding: 2px 4px;            /* tiny padding */
    border-radius: var(--bsm3-radius-mini-badges);          /* small rounded corners */
    margin-left: 6px;            /* space between label and box */
    white-space: nowrap;         /* prevent wrapping */
  }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center { text-align:center; }

/* ===== SOURCE: sleep/sleepIndex.css ===== */

/* Inline additions for collapsible details */
.bsm-point summary {
  cursor: pointer;
  font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

/* ===== SOURCE: sleep/sleepObjectives.css ===== */

  .bsm-form-container {
    max-width: var(--bsm3-width-narrow);
    margin: 0 auto;
  }


/* ===== SOURCE: sleep/sleep_drugs.css ===== */

/* immersive full‑screen video */
.session-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;        /* full width */
  height: auto;        /* scale height proportionally */
  max-height: 100vh;   /* don’t exceed viewport height */
  object-fit: contain;    /* black bar fills unused space */
}



/* ===== SOURCE: sleep/sleep_results.css ===== */

  .sleeppath-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;       /* keep side by side */
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
  }
  .sleeppath-tab {
    width: 33.33%;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 2px;
    text-align: center;
    transition: transform 0.3s ease;
  }
  .sleeppath-tab:hover {
    transform: translateY(-5px);
  }
  .sleeppath-emoji {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    margin-bottom: 10px;
  }
  .sleeppath-tab h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    margin-bottom: 10px;
  }
  .sleeppath-tab p {
    margin: 8px 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
  }
  .sleeppath-tab a {
    width: 90%;
    display: block;
    margin: 6px auto;
    padding: 8px 14px;
    border-radius: var(--bsm3-radius-mini-badges);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    transition: background 0.3s ease;
  }
  /* Mobile shrink factor: scale entire block */
  @media (max-width: 900px) {
    .sleeppath-tabs {
      transform: scale(0.85);
      transform-origin: top center;
    }
  }

/* ===== SOURCE: sleep/spo2_apnea_ranges_table.css ===== */

  .spo2-table-wrap {
    border-radius: var(--bsm3-radius-list-rows);
    overflow: hidden;
  }

  .spo2-table-caption {
    padding: 14px 16px;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }

  .spo2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1.4;
  }

  .spo2-table th,
  .spo2-table td {
    padding: 12px 14px;
    vertical-align: top;
    text-align: left;
  }

  .spo2-table thead th {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
  }

  .spo2-badge {
    display: inline-block;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    padding: 6px 10px;
    border-radius: var(--bsm3-radius-pills);
  }   /* light blue */   /* amber */ /* darker amber */   /* red */

  .spo2-range {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }

  /* Mobile: stack rows as cards with labels */
  @media (max-width: 900px) {
    .spo2-table thead {
      display: none;
    }
    .spo2-table,
    .spo2-table tbody,
    .spo2-table tr,
    .spo2-table td {
      display: block;
      width: 100%;
    }
    .spo2-table tr {
      padding: 10px 0;
    }
    .spo2-table td {
      padding: 8px 16px;
      position: relative;
    }
    .spo2-table td::before {
      content: attr(data-label);
      display: block;
      font-size: var(--bsm3-text-body-use-on-reading-text);
      margin-bottom: 4px;
      text-transform: capitalize;
      letter-spacing: 0.02em;
    }
  }

/* ===== SOURCE: sleepManager/anxietyAnalyser.css ===== */

/* Container */
#anxietyAnalyserWrap {
    margin-bottom: 20px;
}

/* Toggle link */
#anxietyAnalyserToggle {
    display: inline-block;
    cursor: pointer;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, color .2s ease;
}

/* Panel */
#anxietyAnalyserPanel {
    display: none;
    margin-top: 14px;
    padding: 16px;
    border-radius: var(--radius);
}

/* Textarea */
#anxietyThoughtBox {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

/* Category list */
.anx-cat {
    margin-bottom: 14px;
    padding: 10px;
    border-radius: var(--radius-sm);
}

/* Close link */
#anxietyAnalyserClose {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

/* DAYTIME OVERRIDES */

.anxiety-filter {
    width: 100%;
    margin: 10px 0 16px 0;
    padding: 8px;
    border-radius: var(--radius-sm);
}



/* ===== SOURCE: sleepManager/sleep-manager-index.css ===== */

.smright-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
.smright-btn {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.smtabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.smtab-btn {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
.smtab-panel {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .smtabs { flex-wrap: nowrap; }
}

.sm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

/* Tile */
.sm-tile {
    position: relative;
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
}

/* Category badge — SMALL + THEME-AWARE */
/* Base badge style */
.sm-cat-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    opacity: var(--bsm3-opacity-high);
}

/* NIGHT MODE — uses accent-2 (already theme-safe) */

/* DAY MODE — white background, black border, black text */

/* TILE BUTTON ON SLEEP ANXIETY GRID— unmistakably a button in both themes */
.bsm-btn.tile-btn {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, color .2s ease, transform .06s ease;
}

/* Hover state */
.bsm-btn.tile-btn:hover {
    transform: translateY(-1px);
}

/* DAYTIME override — keep outline crisp */

/* NIGHTSHIFT override — same amber, but higher contrast */

/******sleep manager home button********/
.sm-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 12px;
	margin-left: 20px;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
.sm-back-btn svg {
    display: block;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ===== SOURCE: sleep_platform/master_shell.css ===== */

    /* --- 1. CORE SYSTEM --- */
    #bsm-app-root {
        
        position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483647;
        font-family: var(--bsm3-font-body); 
        overflow: hidden; 
        display: flex; flex-direction: column; 
    }

    #bsm-app-root .tool-btn svg {
        opacity: 1 !important;
        visibility: visible !important;
    }

    

    /* filter scoped to nav+viewport (not #bsm-app-root itself) so anything
       else added inside app-root -- e.g. the Find Class Name widget -- is
       not caught by it. Added 20260913_185102. */
    

    /* --- 3. HARD VISIBILITY APPLICATIONS --- */
    
    

    

    

    /* --- 4. NAVIGATION --- */
    .global-nav-bar {
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 10002;
        display: flex;
        flex-direction: column;
    }

    /* Row 1: Home/Back + Support */
    .nav-row-1 {
        height: 60px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* Row 2: Theme switcher — full width */
    .nav-row-2 {
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* On larger screens, collapse back to one row */
    @media (min-width: 901px) {
        .global-nav-bar {
            flex-direction: row;
            height: 80px;
            padding: 0 40px;
            align-items: center;
            justify-content: space-between;
        }
        .nav-row-1 { height: auto; padding: 0; flex: 0 0 auto; }
        .nav-row-2 { height: auto; padding: 0; justify-content: flex-end; }
    }
    .nav-support-btn svg { width: 16px; height: 16px; stroke-width: 2.5px; }

    /* --- 5. STAGE & ATMOSPHERICS --- */
    #spa-stage { width: 100%; max-width: var(--bsm3-width-extra-wide); padding: 165px 20px 100px 20px; box-sizing: border-box; position: relative; transition: opacity 0.4s; z-index: 10; }

    /* HOVER ICONS DISAPPEAR FIX (ALL MODES) */
    #spa-stage div[class*="card"] svg,
    #spa-stage div[class*="box"] svg,
    #spa-stage div[class*="panel"] svg,
    #spa-stage div[class*="item"] svg,
    #spa-stage div[class*="btn"] svg {
        transition: opacity 0.3s ease;
    }
    
    #spa-stage div[class*="card"]:hover svg,
    #spa-stage div[class*="box"]:hover svg,
    #spa-stage div[class*="panel"]:hover svg,
    #spa-stage div[class*="item"]:hover svg,
    #spa-stage div[class*="btn"]:hover svg {
        opacity: 0 !important;
    }

    /* --- STAR EFFECTS: ORGANIC REFINEMENT --- */
    .star { position: absolute; z-index: 4; animation: twinkle 4s infinite alternate ease-in-out; pointer-events: none; }
    .star-core::before, .star-core::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    .star-core::before { 
        width: 20px; height: 1px;
    }
    .star-core::after { 
        width: 1px; height: 20px;
    }

    .star-medium .star-core { width: 1.5px; height: 1.5px; }
    .star-medium .star-core::before { width: 12px; }
    .star-medium .star-core::after { height: 12px; }

    .star-small .star-core { width: 1px; height: 1px; }
    .star-small .star-core::before, .star-small .star-core::after { display: block; }@keyframes twinkle {
    0% { opacity: var(--bsm3-opacity-low); transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.1); }
}

    /* --- 5b. NIGHT MODE PRIMARY BUTTON UNIFICATION (added) ---
       Some page files define .bsm-btn-primary with a base color other than
       purple (e.g. var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon)). This rule only applies in the default
       "night" theme and outranks any page-level bare ".bsm-btn-primary"
       rule via specificity, without touching opacity/pointer-events, so each
       page's own disabled/enabled fade + text-swap logic is unaffected. */

    /* --- 6. DAY MODE --- */
    #bsm-app-root[data-theme="day"] .star { display: none !important; }
    
    #bsm-app-root[data-theme="day"] .moon-fixed {
        opacity: var(--bsm3-opacity-high);
    }
    .theme-segmented-control { display: flex; border-radius: var(--bsm3-radius-pills); padding: 4px; gap: 4px; }

    
    
    #bsm-app-root[data-theme="day"] .clouds-fixed { opacity: 1; display: block; }
    
    .cloud { position: absolute; border-radius: var(--bsm3-radius-pills); opacity: var(--bsm3-opacity-high); }
    .cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; }
    .cloud-1::before { width: 120px; height: 120px; top: -50px; left: 40px; }
    .cloud-1::after { width: 90px; height: 90px; top: -30px; right: 40px; }
    .cloud-2::before { width: 140px; height: 140px; top: -60px; left: 50px; }
    .cloud-2::after { width: 110px; height: 110px; top: -40px; right: 50px; }
    .cloud-3::before { width: 100px; height: 100px; top: -40px; left: 30px; }
    .cloud-3::after { width: 80px; height: 80px; top: -20px; right: 30px; }@keyframes hoverCloud {
    0%, 100% { transform: translate(0px, 0px); }
    33% { transform: translate(15px, -8px); }
    66% { transform: translate(-10px, 12px); }
}

    /* --- 8. DAY MODE FROSTED DASHBOARD CARDS --- */

    #bsm-app-root[data-theme="day"] #spa-stage h1,
    #bsm-app-root[data-theme="day"] #spa-stage h2,
    #bsm-app-root[data-theme="day"] #spa-stage h3,
    #bsm-app-root[data-theme="day"] #spa-stage h4,
    #bsm-app-root[data-theme="day"] #spa-stage p,
    #bsm-app-root[data-theme="day"] #spa-stage strong {
        opacity: 1 !important;
    }

    #bsm-app-root[data-theme="day"] #spa-stage div[class*="card"] p,
    #bsm-app-root[data-theme="day"] #spa-stage div[class*="box"] p,
    #bsm-app-root[data-theme="day"] #spa-stage div[class*="panel"] p {
        opacity: 1 !important;
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    }

    /* ── TUTORIAL OVERLAY (lives in shell so it sits above #spa-stage) ──── */
    #bsm-tutorial-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: tutorialFadeIn 0.5s ease-out;
    }@keyframes tutorialFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
    #bsm-tutorial-overlay.hiding {
        animation: tutorialFadeOut 0.4s ease-in forwards;
    }@keyframes tutorialFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
    .bsm-tutorial-icon svg {
        width: 32px; height: 32px; stroke-width: 2px;
    }

    .bsm-tutorial-card h2 {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: -0.02em;
        margin: 0;
    }
    .bsm-tutorial-card p {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        opacity: var(--bsm3-opacity-high);
        margin: 0;
    }
    .bsm-tut-btn-primary:hover { opacity: var(--bsm3-opacity-high); transform: translateY(-1px); }
    .bsm-tut-btn-skip:hover { opacity: 1; }
    .bsm-tutorial-dots span {
        width: 6px; height: 6px;
        border-radius: 50%;
        transition: background 0.3s;
    }
    .bsm-tutorial-dots span.active {
        width: 20px;
        border-radius: var(--bsm3-radius-mini-badges);
    }

/* ===== SOURCE: sleep_platform/pages/accessories.css ===== */

    /* --- 1. SHOP CANVAS --- */
    .shop-container { 
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto; padding: 20px 40px;
        animation: shopFadeIn 1.2s ease-out; display: flex; flex-direction: column; 
        gap: 40px;
    }

    /* --- 2. NAVIGATION HEADER --- */
    .shop-header {
        display: flex; justify-content: space-between; align-items: center;
        padding-bottom: 20px;
    }
    .back-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-primary-cards); cursor: pointer;
        font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; letter-spacing: 0.1em; transition: 0.3s;
        display: flex; align-items: center; gap: 8px;
    }

    .shop-title { text-align: center; flex-grow: 1; }
    .shop-title h1 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0; }
    .shop-title p { font-size: var(--bsm3-text-body-use-on-reading-text); text-transform: capitalize; letter-spacing: 0.3em; opacity: var(--bsm3-opacity-medium); }

    /* --- 3. PRODUCT GRID --- */
    .products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; }

    .product-card { border-radius: var(--bsm3-radius-pills);
        padding: 45px; display: flex; flex-direction: column; gap: 25px;
        transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
    }

    /* IMAGE SANITIZATION (Amber Glow Fix) */
    .product-img-wrap {
        width: 100%; height: 280px; border-radius: var(--bsm3-radius-primary-cards); overflow: hidden; display: flex; align-items: center; justify-content: center;
    }
    .product-img-wrap img {
        display: block; width: 100%; height: 100%; object-fit: contain; padding: 20px; 
        transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .product-card:hover { transform: translateY(-8px); }
    .product-card:hover img { transform: scale(1.05); }

    .product-info h2 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0; }
    .product-tag { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.2em; margin-bottom: -10px; }
    
    .clinical-logic {
        font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        padding: 20px; border-radius: var(--bsm3-radius-primary-cards);
    }

    .acquire-btn {
        margin-top: 10px; padding: 18px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-medium-14px-use-on-text); 
        text-transform: capitalize; letter-spacing: 0.2em; font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer;
        transition: 0.4s; text-align: center;
    }@keyframes shopFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

    @media (max-width: 900px) { 
        .products-grid { grid-template-columns: 1fr; } 
        .shop-header { flex-direction: column; gap: 20px; }
    }

/* ===== SOURCE: sleep_platform/pages/apnea.css ===== */

/* ============================================================
   SLEEP APNEA PAGE v6.1
   Scope: #bsm-app-root #spa-stage #apnea-journey-wrap
   Platform rules: bsm-block/bsm-flex spans, --diary-text vars, no divs, no hardcoded colours.
============================================================ */



/* ── Typography lock ── */

/* Nuclear reset: kill any platform styling on bsm-block/bsm-flex inside our wrapper */
/* Only reset box styles on elements that are NOT explicitly styled by our own rules */
#apnea-journey-wrap .bsm-block:not([class*="bsm-edu-panel"]):not([class*="bsm-flip"]):not([class*="bsm-strat"]):not([class*="bsm-verify"]):not([class*="bsm-type"]):not([class*="bsm-score"]):not([class*="bsm-key"]):not([class*="bsm-flag"]):not([class*="bsm-modal"]):not([class*="bsm-dial"]):not([class*="bsm-legal"]):not([class*="bsm-amber"]):not([class*="bsm-disclaimer"]):not([class*="bsm-pat"]):not([id]) {
    padding: 0;
    margin: 0;
}
#apnea-journey-wrap h1,
#apnea-journey-wrap h2,
#apnea-journey-wrap h3,
#apnea-journey-wrap h4,
#apnea-journey-wrap h5,
#apnea-journey-wrap h6,
#apnea-journey-wrap p,
#apnea-journey-wrap label {
    font-family: inherit !important;
}

/* ── Page wrapper ── */
#apnea-journey-wrap {
    display: block;
    width: 100%;
    padding-bottom: 80px;
    animation: bsmFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


















/* ============================================================
   EDIT PROFILE MODAL (v6.1)
============================================================ */
#bsm-edit-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    /* flex-start first as a safe fallback, then upgrade to true centering
       only when the modal fits — "align-items: center" alone would center
       the modal even when its content is taller than the viewport, and
       since a centered flex item overflows equally on both edges, the top
       portion becomes unreachable by scrolling (you can't scroll to a
       negative offset). "safe center" falls back to flex-start instead of
       clipping when that would happen. */
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

#bsm-edit-profile-overlay.bsm-fading {
    opacity: 0;
    pointer-events: none;
}

#bsm-edit-profile-modal {
    border-radius: var(--bsm3-radius-primary-cards);
    max-width: var(--bsm3-width-standard);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

/* Form must join the flex chain or .bsm-epm-body's overflow-y:auto has no
   bounded height to scroll within (a bare <form> is not a flex participant
   by default). This is what fixes the non-scrolling modal. */
#bsm-edit-profile-modal #bsm-epm-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Modal header */
#bsm-edit-profile-modal .bsm-epm-header {
    padding: 26px 28px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

#bsm-edit-profile-modal .bsm-epm-header-left { flex: 1; }

#bsm-edit-profile-modal .bsm-epm-eyebrow {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
}

#bsm-edit-profile-modal .bsm-epm-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0;
    line-height: 1.2;
}

#bsm-edit-profile-modal .bsm-epm-close {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

/* Scrollable body */
#bsm-edit-profile-modal .bsm-epm-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Section labels */
#bsm-edit-profile-modal .bsm-epm-section-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.2em;
    margin: 0 0 12px;
    padding-bottom: 8px;
}

/* Field rows */
#bsm-edit-profile-modal .bsm-epm-field {
    margin-bottom: 16px;
}

#bsm-edit-profile-modal .bsm-epm-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin-bottom: 7px;
}

#bsm-edit-profile-modal .bsm-epm-label span {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    margin-left: 6px;
}

/* ── Tab-style selector (replaces dropdown) ── */
#bsm-edit-profile-modal .bsm-epm-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

#bsm-edit-profile-modal .bsm-epm-tab-btn {
    flex: 1;
    min-width: 70px;
    padding: 11px 10px;
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#bsm-edit-profile-modal .bsm-epm-tab-btn.bsm-tab-selected {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

/* ── Legacy custom dropdown (kept for compatibility, no longer used by
     gender/osa1-6/bp_high — those now use
     .bsm-epm-tabs above). Left in place harmlessly. ── */
#bsm-edit-profile-modal .bsm-epm-dd {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}@keyframes bsmDdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Number inputs */
#bsm-edit-profile-modal input[type="number"].bsm-epm-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    box-sizing: border-box;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

#bsm-edit-profile-modal input[type="number"].bsm-epm-input::-webkit-inner-spin-button,
#bsm-edit-profile-modal input[type="number"].bsm-epm-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* BMI preview strip */
#bsm-edit-profile-modal .bsm-epm-bmi-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--bsm3-radius-status-cards);
    margin-top: 10px;
    margin-bottom: 16px;
}

#bsm-edit-profile-modal .bsm-epm-bmi-strip .bsm-epm-bmi-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    flex: 1;
    margin: 0;
}

#bsm-edit-profile-modal .bsm-epm-bmi-strip .bsm-epm-bmi-val {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    white-space: nowrap;
}

/* Two-col number row */
#bsm-edit-profile-modal .bsm-epm-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Spacer between sections */
#bsm-edit-profile-modal .bsm-epm-spacer {
    height: 20px;
}

/* Footer */
#bsm-edit-profile-modal .bsm-epm-footer {
    padding: 16px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* Status message */
#bsm-edit-profile-modal .bsm-epm-status {
    display: none;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-align: center;
    padding: 8px 14px;
    border-radius: var(--bsm3-radius-status-cards);
}

#bsm-edit-profile-modal .bsm-epm-status.bsm-epm-ok  { display: block; }
#bsm-edit-profile-modal .bsm-epm-status.bsm-epm-err { display: block; }

/* Save button */
#bsm-edit-profile-modal .bsm-epm-save {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: var(--pill-radius, var(--bsm3-radius-pills));
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s, transform 0.18s;
    box-sizing: border-box;
}

#bsm-edit-profile-modal .bsm-epm-save:hover   { opacity: var(--bsm3-opacity-high); transform: translateY(-1px); }
#bsm-edit-profile-modal .bsm-epm-save:disabled { opacity: var(--bsm3-opacity-medium); cursor: not-allowed; transform: none; }

/* Cancel */
#bsm-edit-profile-modal .bsm-epm-cancel {
    display: block;
    text-align: center;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

/* ============================================================
   RESULTS INFO MODAL — "Important information about your results"
   Same overlay/reparenting pattern as the edit-profile modal above
   (see bsmOpenResultsInfo/bsmCloseResultsInfo). Uses its own class
   prefix (bsm-rim-*) with var(...) fallbacks throughout, since this
   modal gets moved out of #apnea-journey-wrap while open and would
   otherwise lose that wrapper's CSS custom properties.
============================================================ */
#bsm-results-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

#bsm-results-info-overlay.bsm-fading {
    opacity: 0;
    pointer-events: none;
}

#bsm-results-info-modal {
    border-radius: var(--bsm3-radius-primary-cards);
    max-width: var(--bsm3-width-standard);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

/* Header */
#bsm-results-info-modal .bsm-rim-header {
    padding: 26px 28px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

#bsm-results-info-modal .bsm-rim-header-left { flex: 1; }

#bsm-results-info-modal .bsm-rim-eyebrow {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
}

#bsm-results-info-modal .bsm-rim-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0;
    line-height: 1.25;
}

#bsm-results-info-modal .bsm-rim-close {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

/* Scrollable body */
#bsm-results-info-modal .bsm-rim-body {
    padding: 24px 28px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#bsm-results-info-modal .bsm-rim-callout-hdr { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
#bsm-results-info-modal .bsm-rim-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
}
#bsm-results-info-modal .bsm-rim-callout-hdr h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 6px; }
#bsm-results-info-modal .bsm-rim-callout-hdr p  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0; }

#bsm-results-info-modal .bsm-rim-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
#bsm-results-info-modal .bsm-rim-compare-item {
    padding: 15px 16px;
    border-radius: 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0;
}
#bsm-results-info-modal .bsm-rim-compare-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}
#bsm-results-info-modal .bsm-rim-compare-item p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; margin: 0; }

#bsm-results-info-modal .bsm-rim-overlap-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
}

#bsm-results-info-modal .bsm-rim-kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#bsm-results-info-modal .bsm-rim-kp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--bsm3-radius-primary-cards);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.55;
}
#bsm-results-info-modal .bsm-rim-kp-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}

#apnea-journey-wrap h1::after,
#apnea-journey-wrap h1::before {
    display: none !important;
    content: none !important;
}

/* ============================================================
   PANELS
============================================================ */
#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-edu-panel,
#apnea-journey-wrap .bsm-edu-panel {
    display: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-edu-panel.bsm-edu-panel-active,
#apnea-journey-wrap .bsm-edu-panel.bsm-edu-panel-active {
    display: block !important;
    border-radius: 0 !important;
    padding: 0 !important;
    animation: bsmFadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-edu-panel.bsm-edu-panel-hidden,
#apnea-journey-wrap .bsm-edu-panel.bsm-edu-panel-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

#apnea-journey-wrap .bsm-edu-tab-shell {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#apnea-journey-wrap .bsm-edu-tab {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 16px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.22s, color 0.22s !important;
    white-space: nowrap !important;
}
#apnea-journey-wrap .bsm-edu-tab.bsm-edu-tab-active { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* Secondary nav banner — deliberately NOT a full gradient hero block, so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#apnea-journey-wrap .bsm-edu-strategies-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#apnea-journey-wrap .bsm-edu-strategies-bar:hover { opacity: var(--bsm3-opacity-high) !important; }

#apnea-journey-wrap .bsm-edu-strategies-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

#apnea-journey-wrap .bsm-edu-most-effective-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
}

#apnea-journey-wrap .bsm-edu-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 10px 0 24px !important;
}

/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */
#apnea-journey-wrap .bsm-edu-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
    padding-bottom: 0 !important;
}

#apnea-journey-wrap .bsm-edu-title::after,
#apnea-journey-wrap .bsm-edu-title::before,
#apnea-journey-wrap h1::after,
#apnea-journey-wrap h1::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
}

#apnea-journey-wrap .bsm-edu-subtitle { display: block !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin: 0 !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }

#apnea-journey-wrap .bsm-edu-disorder-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 18px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-top: 6px !important;
}

#apnea-journey-wrap .bsm-edu-study-header-card {
    display: block !important;
    padding: 26px 28px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
}

#apnea-journey-wrap .bsm-edu-disclaimer {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-style: italic !important;
    line-height: 1.6 !important;
    padding: 12px 17px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 20px !important;
}

/* ── Shared panel pieces ── */
#apnea-journey-wrap .bsm-panel-title { font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 8px; }
#apnea-journey-wrap .bsm-panel-sub { display: block; font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin-bottom: 26px; }

#apnea-journey-wrap .bsm-disclaimer {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-style: italic;
    line-height: 1.6;
    padding: 12px 17px;
    border-radius: var(--bsm3-radius-status-cards);
    margin-bottom: 22px;
}

#apnea-journey-wrap .bsm-legal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 18px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-top: 26px;
}

#apnea-journey-wrap .bsm-legal p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0; }

#apnea-journey-wrap .bsm-next-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.18s;
    margin-top: 28px;
}

#apnea-journey-wrap .bsm-next-pill:hover {
    transform: translateX(3px);
}

/* Row that right-aligns the button */
#apnea-journey-wrap .bsm-next-pill-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 28px;
}

#apnea-journey-wrap .bsm-score-wrap {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 22px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-bottom: 18px;
}

#apnea-journey-wrap .bsm-dial-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    border-radius: var(--bsm3-radius-primary-cards);
    min-width: 155px;
    flex-shrink: 0;
}

#apnea-journey-wrap .bsm-dial-arch {
    width: 96px;
    height: 48px;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}

#apnea-journey-wrap .bsm-dial-fill {
    position: absolute;
    inset: 0;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0;
    transform-origin: bottom center;
    transform: rotate(-90deg);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s;
}

#apnea-journey-wrap .bsm-dial-fill.dial-low      { transform: rotate(-55deg); }
#apnea-journey-wrap .bsm-dial-fill.dial-moderate { transform: rotate(0deg); }
#apnea-journey-wrap .bsm-dial-fill.dial-high     { transform: rotate(55deg); }

#apnea-journey-wrap .bsm-score-num { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1; }

#apnea-journey-wrap .bsm-severity-tag { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.18em; margin-top: 5px; text-align: center; }

#apnea-journey-wrap .bsm-pip-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 11px; }

#apnea-journey-wrap .bsm-pip { width: 7px; height: 7px; border-radius: 50%; transition: background 0.4s; }

#apnea-journey-wrap .bsm-score-context { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
#apnea-journey-wrap .bsm-score-caption { font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.65; margin: 0; }
#apnea-journey-wrap .bsm-score-note    { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; margin: 0; }

#apnea-journey-wrap .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
    text-align: left;
    transition: color 0.2s, opacity 0.2s;
}
#apnea-journey-wrap .bsm-update-link:hover { opacity: var(--bsm3-opacity-high); }

#apnea-journey-wrap .bsm-flags-label { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.18em; margin: 20px 0 12px; }

#apnea-journey-wrap .bsm-flags-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 18px; }

#apnea-journey-wrap .bsm-flag-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--bsm3-radius-status-cards);
    transition: background 0.25s, border-color 0.25s;
}

#apnea-journey-wrap .bsm-flag-check {
    width: 17px;
    height: 17px;
    border-radius: var(--bsm3-radius-mini-badges);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

#apnea-journey-wrap .bsm-flag-name { flex: 1; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#apnea-journey-wrap .bsm-flag-val  { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); white-space: nowrap; }

/* Symptom severity dots — replaces the plain checkbox for symptom rows,
   since these are 0-4 severity answers, not yes/no. Risk-factor icon
   (scale emoji) keeps using .bsm-flag-check for a consistent left-hand
   column between the two row types. */
#apnea-journey-wrap .bsm-flag-row { align-items: flex-start; }
#apnea-journey-wrap .bsm-flag-dots { display: flex; gap: 3px; flex-shrink: 0; margin-top: 3px; }
#apnea-journey-wrap .bsm-flag-dot { width: 6px; height: 6px; border-radius: 50%; }
#apnea-journey-wrap .bsm-flag-text { flex: 1; min-width: 0; }
#apnea-journey-wrap .bsm-flag-desc { display: block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); opacity: var(--bsm3-opacity-high); margin-top: 2px; line-height: 1.4; }
#apnea-journey-wrap .bsm-flag-row .bsm-flag-val { margin-top: 1px; }

#apnea-journey-wrap .bsm-no-data { text-align: center; padding: 56px 40px; border-radius: var(--bsm3-radius-primary-cards); }
#apnea-journey-wrap .bsm-no-data h3  { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 12px; }
#apnea-journey-wrap .bsm-no-data p   { font-size: var(--bsm3-text-body-use-on-reading-text); max-width: var(--bsm3-width-narrow); margin: 0 auto 22px; line-height: 1.65; }

/* ============================================================
   FLIP CARDS
============================================================ */
#apnea-journey-wrap .bsm-flip {
    display: block;
    position: relative;
    height: 240px;
    cursor: pointer;
    border-radius: var(--bsm3-radius-primary-cards);
    isolation: isolate;
    clip-path: inset(0 round 20px);
}

#apnea-journey-wrap .bsm-flip-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1200px;
}

#apnea-journey-wrap .bsm-flip.flipped .bsm-flip-inner { transform: rotateY(180deg); }

#apnea-journey-wrap .bsm-flip-f,
#apnea-journey-wrap .bsm-flip-b {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 22px;
    box-sizing: border-box;
    overflow: hidden;
}

#apnea-journey-wrap .bsm-flip-b { transform: rotateY(180deg); }

#apnea-journey-wrap .bsm-flip-front-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 8px; }
#apnea-journey-wrap .bsm-flip-back-inner  { display: flex; flex-direction: column; width: 100%; height: 100%; }

#apnea-journey-wrap .bsm-flip-pat {
    display: block;
    position: relative;
    height: 200px;
    cursor: pointer;
    border-radius: var(--bsm3-radius-primary-cards);
    isolation: isolate;
    clip-path: inset(0 round 20px);
}

#apnea-journey-wrap .bsm-flip-pat.flipped .bsm-flip-inner { transform: rotateY(180deg); }

#apnea-journey-wrap .bsm-fi-eyebrow   { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.2em; text-align: center; }
#apnea-journey-wrap .bsm-fi-icon      { display: block; font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1; text-align: center; }
#apnea-journey-wrap .bsm-fi-title     { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align: center; margin: 0; line-height: 1.25; }
#apnea-journey-wrap .bsm-fi-hint      { display: block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.14em; text-align: center; margin-top: auto; }
#apnea-journey-wrap .bsm-fi-back-label { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.18em; margin-bottom: 10px; }
#apnea-journey-wrap .bsm-fi-back-text  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0; flex: 1; }
#apnea-journey-wrap .bsm-fi-back-hint  { display: block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.14em; margin-top: 12px; }

#apnea-journey-wrap .bsm-pat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 10px;
}

#apnea-journey-wrap .bsm-pat-label { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align: center; line-height: 1.3; }

/* ============================================================
   WHAT THIS MEANS PANEL
============================================================ */
#apnea-journey-wrap .bsm-edu-row     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
/* ── Types intro block — now the header strip inside the unified
     panel below, rather than its own separate box. ── */
#apnea-journey-wrap .bsm-types-panel-intro {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
}

#apnea-journey-wrap .bsm-types-intro-icon {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

#apnea-journey-wrap .bsm-types-panel-intro h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0 0 6px;
}

#apnea-journey-wrap .bsm-types-panel-intro p {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.65;
    margin: 0;
}

/* ── Section label ── */
/* ── Types section label — matches panel title weight ── */
#apnea-journey-wrap .bsm-types-section { margin-bottom: 48px !important; }
#apnea-journey-wrap .bsm-types-label {
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 14px 0 16px;
    display: block;
    text-transform: capitalize;
}

/* ── Unified panel — a single shared background container for the
     intro strip + all three type sections, replacing what used to
     be three separate large background boxes stacked one after
     another. Sections inside are told apart by colour + a hairline
     divider, not by each having their own big card. ── */
#apnea-journey-wrap .bsm-types-panel {
    display: block !important;
    border-radius: var(--bsm3-radius-primary-cards);
    overflow: hidden;
}

/* ── Type columns — the three types sit side by side inside the
     panel, told apart by a coloured left accent (box-shadow, so it
     never fights with the hairline dividers) + a faint wash of that
     colour, rather than each being its own solid-colour card. ── */
#apnea-journey-wrap .bsm-types-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#apnea-journey-wrap .bsm-types-col {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 24px 22px;
    box-sizing: border-box;
    transition: background 0.2s;
}

/* Colour lives only in the left accent bar + the icon/badge/tag
   inside each column, not in a full-column wash — that's what kept
   the three columns reading as separate coloured blocks rather than
   one cohesive panel. */

/* Likely highlight — a brighter accent reads clearly inside a shared
   panel without needing a glowing ring around a whole card. */

/* ── OHS row — folded into the same panel as a final, full-width
     row rather than a separate box below it. Same treatment as the
     type columns above: colour only in the accent bar + icon/pill,
     not a full-row wash, so it reads as part of the same panel
     rather than a fourth mismatched colour block. ── */
#apnea-journey-wrap .bsm-types-ohs-row {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    transition: background 0.2s;
}

#apnea-journey-wrap .bsm-type-ohs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

#apnea-journey-wrap .bsm-type-ohs-pill {
    display: inline-block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    padding: 3px 9px;
    border-radius: var(--bsm3-radius-primary-cards);
    white-space: nowrap;
}

/* Badge pill — coloured per type instead of translucent-white
   (it no longer sits on a solid saturated card background). */
#apnea-journey-wrap .bsm-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-bottom: 12px;
    width: fit-content;
}

/* Type column text — reads with the platform's normal text colours,
   since this no longer sits on a solid saturated background. */
#apnea-journey-wrap .bsm-types-col h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0 0 10px;
}

#apnea-journey-wrap .bsm-types-col p {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.65;
    margin: 0 0 8px;
    flex: 1;
}

#apnea-journey-wrap .bsm-types-col p:last-of-type { margin-bottom: 0; }

/* Type icon circle — coloured per type instead of translucent-white */
#apnea-journey-wrap .bsm-type-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-bottom: 14px;
    flex-shrink: 0;
}

#apnea-journey-wrap .bsm-type-icon-wrap svg { opacity: var(--bsm3-opacity-high); }

/* Likely tag */
#apnea-journey-wrap .bsm-likely-tag {
    display: none;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.1em;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: var(--bsm3-radius-primary-cards);
    width: fit-content;
}
#apnea-journey-wrap .bsm-types-col.bsm-likely .bsm-likely-tag { display: block; }

/* ============================================================
   ASSESSMENT FOCUS CALLOUT — clarifies OSA vs CSA scope
============================================================ */
#apnea-journey-wrap .bsm-focus-section-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.16em;
    margin: 32px 0 14px;
    padding-top: 24px;
}

/* ============================================================
   HOW WE HELP BOX
============================================================ */
#apnea-journey-wrap .bsm-help-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-top: 24px !important;
    margin-bottom: 18px;
}
#apnea-journey-wrap .bsm-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
}
#apnea-journey-wrap .bsm-help-box h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 8px; }
#apnea-journey-wrap .bsm-help-box p  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0 0 14px; }
#apnea-journey-wrap .bsm-help-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.18s;
}
#apnea-journey-wrap .bsm-help-cta:hover { opacity: var(--bsm3-opacity-high); transform: translateX(2px); }

#apnea-journey-wrap .bsm-key-points { padding: 20px 22px; border-radius: var(--bsm3-radius-primary-cards); margin-bottom: 18px; }
#apnea-journey-wrap .bsm-key-points-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
#apnea-journey-wrap .bsm-kp-star  { font-size: var(--bsm3-text-medium-14px-use-on-text); }
#apnea-journey-wrap .bsm-kp-label { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.16em; }
#apnea-journey-wrap .bsm-kp-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#apnea-journey-wrap .bsm-kp-item  {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px !important;
    margin: 0 !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.55;
}
#apnea-journey-wrap .bsm-kp-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 8px !important;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}

/* ============================================================
   PATTERNS & SIGNS PANEL
============================================================ */
#apnea-journey-wrap .bsm-pat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }

#apnea-journey-wrap .bsm-amber-callout { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; border-radius: var(--bsm3-radius-primary-cards); margin-bottom: 18px; }
#apnea-journey-wrap .bsm-amber-callout h4 { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 8px; }
#apnea-journey-wrap .bsm-amber-callout p  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0; }

/* ============================================================
   VERIFICATION PANEL — SIGNALS + ACCORDION
============================================================ */
/* Signals intro row */
#apnea-journey-wrap .bsm-verify-signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 26px;
}

#apnea-journey-wrap .bsm-verify-signal-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--bsm3-radius-primary-cards);
}

#apnea-journey-wrap .bsm-verify-signal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

#apnea-journey-wrap .bsm-verify-signal-item h4 {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0 0 4px;
}

#apnea-journey-wrap .bsm-verify-signal-item p {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.55;
    margin: 0;
}

/* Feature checklist inside cards */
#apnea-journey-wrap .bsm-verify-features {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 12px 0 14px;
}

#apnea-journey-wrap .bsm-verify-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.45;
}

#apnea-journey-wrap .bsm-verify-feature-check {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    flex-shrink: 0;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    margin-top: 2px;
}

/* Apnea-relevance note on smartwatch card */
#apnea-journey-wrap .bsm-verify-relevance {
    display: block;
    padding: 10px 13px;
    border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.55;
    margin-bottom: 14px;
}

#apnea-journey-wrap .bsm-verify-relevance strong {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

/* Accordion */
#apnea-journey-wrap .bsm-verify-accordion {
    margin-top: 22px;
    margin-bottom: 4px;
}

#apnea-journey-wrap .bsm-verify-accordion details {
    border-radius: var(--bsm3-radius-primary-cards);
    overflow: hidden;
}

#apnea-journey-wrap .bsm-verify-accordion details summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.16em;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}

/* Table */
#apnea-journey-wrap .bsm-verify-table-wrap {
    width: 100%;
    overflow-x: auto;
}

#apnea-journey-wrap .bsm-verify-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

#apnea-journey-wrap .bsm-verify-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

#apnea-journey-wrap .bsm-verify-table td {
    padding: 10px 14px;
    vertical-align: top;
    line-height: 1.4;
}

#apnea-journey-wrap .bsm-verify-table td:first-child {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.1em;
    opacity: var(--bsm3-opacity-medium);
    white-space: nowrap;
}

/* Table footer note */
#apnea-journey-wrap .bsm-verify-table-note {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-style: italic;
    text-align: center;
    padding: 14px;
}

#apnea-journey-wrap .bsm-verify-why {
    display: block;
    padding: 16px 20px;
    border-radius: 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0;
    margin-bottom: 26px;
}
#apnea-journey-wrap .bsm-verify-why p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.7; margin: 0; }

/* Step connector row */
#apnea-journey-wrap .bsm-verify-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
}

#apnea-journey-wrap .bsm-verify-step-pip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#apnea-journey-wrap .bsm-verify-step-line {
    flex: 1;
    height: 2px;
}

/* Grid */
#apnea-journey-wrap .bsm-verify-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

/* Cards — gradient per level */
#apnea-journey-wrap .bsm-verify-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 20px;
    border-radius: var(--bsm3-radius-primary-cards);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    overflow: hidden;
}

#apnea-journey-wrap .bsm-verify-card:hover {
    transform: translateY(-3px);
}

/* Gold standard card gets a glow */

/* Gold standard badge
   NOTE: background/padding/border-radius/margin are forced with !important
   because this element's class doesn't match any pattern in the "Nuclear
   reset" selector above (#apnea-journey-wrap .bsm-block:not(...)...), so
   without !important that reset was silently stripping this badge's pill
   styling down to invisible bare text. */
#apnea-journey-wrap .bsm-rec-badge {
    display: none;
    position: absolute;
    top: -1px;
    right: 16px;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    padding: 5px 12px !important;
    margin: 0 !important;
    border-radius: 0 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards)!important;
    white-space: nowrap;
}
#apnea-journey-wrap .bsm-verify-card.bsm-rec .bsm-rec-badge { display: block; }

/* Level label */
#apnea-journey-wrap .bsm-verify-level {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.16em;
    margin-bottom: 8px;
}

#apnea-journey-wrap .bsm-verify-card h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0 0 10px;
}

#apnea-journey-wrap .bsm-verify-card p {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.65;
    margin: 0 0 10px;
    flex: 1;
}

#apnea-journey-wrap .bsm-verify-best {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    font-style: italic;
    margin-bottom: 16px;
}

#apnea-journey-wrap .bsm-verify-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-top: auto;
    box-sizing: border-box;
}

/* ============================================================
   SUPPORTIVE STRATEGIES PANEL
============================================================ */
#apnea-journey-wrap .bsm-strat-hero {
    padding: 26px 28px 22px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-bottom: 20px;
}
#apnea-journey-wrap .bsm-strat-hero h2 { font-size: var(--bsm3-size-section-heading-22px-use-on-h2); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 7px; }
#apnea-journey-wrap .bsm-strat-hero p  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; margin: 0; }

/* Section labels */
#apnea-journey-wrap .bsm-strat-section-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.22em;
    margin: 22px 0 12px;
    padding-bottom: 8px;
}

/* Grid */
#apnea-journey-wrap .bsm-strat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Cards — gradient per type, matching platform language */
#apnea-journey-wrap .bsm-strat-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: var(--bsm3-radius-primary-cards);
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#apnea-journey-wrap .bsm-strat-card:hover {
    transform: translateY(-3px);
}

/* Lifestyle cards — purple family */

/* Clinical options card — spans full width, distinct style */
#apnea-journey-wrap .bsm-strat-card.strat-clinical {
    grid-column: 1 / -1;
}

/* Icon circle */
#apnea-journey-wrap .bsm-strat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 4px;
}

#apnea-journey-wrap .bsm-strat-card h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0;
}

#apnea-journey-wrap .bsm-strat-card p {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

#apnea-journey-wrap .bsm-strat-tip {
    display: block;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    font-style: italic;
    padding: 9px 12px;
    border-radius: var(--bsm3-radius-status-cards);
    line-height: 1.5;
}

/* Clinical two-col list */
#apnea-journey-wrap .bsm-strat-clinical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

#apnea-journey-wrap .bsm-strat-clinical-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.5;
}

#apnea-journey-wrap .bsm-strat-clinical-dot {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Lifestyle commitment launcher ── */
#apnea-journey-wrap .bsm-commit-launcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-top: 28px;
    margin-bottom: 24px;
}

#apnea-journey-wrap .bsm-commit-launcher-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin-bottom: 5px;
}

#apnea-journey-wrap .bsm-commit-launcher-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.6;
}

#apnea-journey-wrap .bsm-commit-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.18s;
}

#apnea-journey-wrap .bsm-commit-open-btn:hover { opacity: var(--bsm3-opacity-high); transform: translateX(2px); }

/* ── Commitment modal checkbox items ── */
.bsm-commit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 15px;
    border-radius: var(--bsm3-radius-primary-cards);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bsm-commit-check-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.bsm-commit-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bsm-commit-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--bsm3-radius-mini-badges);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.bsm-commit-item:has(.bsm-commit-cb:checked) .bsm-commit-box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    transform: rotate(45deg) translateY(-1px);
}

.bsm-commit-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.bsm-commit-item-title {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    line-height: 1.3;
}

.bsm-commit-item-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.45;
}

@media (max-width: 900px) {
    #apnea-journey-wrap .bsm-commit-launcher { flex-direction: column; align-items: flex-start; }
    #apnea-journey-wrap .bsm-commit-open-btn { width: 100%; justify-content: center; }
}
#apnea-journey-wrap .bsm-strat-quiz-launcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-bottom: 22px;
}

#apnea-journey-wrap .bsm-strat-quiz-launcher-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin-bottom: 4px;
}

#apnea-journey-wrap .bsm-strat-quiz-launcher-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.5;
}

#apnea-journey-wrap .bsm-strat-quiz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.18s;
    flex-shrink: 0;
}

#apnea-journey-wrap .bsm-strat-quiz-btn:hover { opacity: var(--bsm3-opacity-high); transform: scale(1.03); }

/* ── Quiz modal card styles ── */
.bsm-quiz-modal-card {
    position: relative;
    height: 180px;
    perspective: 1000px;
}

.bsm-quiz-modal-inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.bsm-quiz-modal-card.flipped .bsm-quiz-modal-inner { transform: rotateY(180deg); }

.bsm-quiz-modal-f,
.bsm-quiz-modal-b {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 22px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.bsm-quiz-modal-b {
    transform: rotateY(180deg);
    align-items: flex-start;
    justify-content: flex-start;
    cursor: default;
}

.bsm-quiz-modal-q {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-align: center;
    line-height: 1.35;
}

.bsm-quiz-modal-hint {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
}

.bsm-quiz-modal-feedback {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: var(--bsm3-radius-primary-cards);
    width: fit-content;
    margin-bottom: 4px;
}

.bsm-quiz-modal-verdict {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.bsm-quiz-modal-explain {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.6;
    flex: 1;
}

.bsm-quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.bsm-quiz-nav-btn {
    padding: 10px 22px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
}
.bsm-quiz-nav-btn:disabled { opacity: var(--bsm3-opacity-low); cursor: not-allowed; }

.bsm-quiz-next-btn {
    width: 100%;
}
.bsm-quiz-next-btn:hover { opacity: var(--bsm3-opacity-high); }

.bsm-quiz-counter {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

/* ============================================================
   PULSE ANIMATION
============================================================ */

#apnea-journey-wrap .bsm-pulse { animation: bsmPulseGlow 1.8s ease-out infinite; }

/* ============================================================
   ANIMATIONS
============================================================ */@keyframes bsmFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
    #apnea-journey-wrap .bsm-edu-row     { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-types-panel-grid { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-types-ohs-row { flex-direction: column; }    #apnea-journey-wrap .bsm-pat-grid    { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-verify-grid { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-strat-grid  { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-strat-clinical-grid { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-flags-grid  { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-kp-grid     { grid-template-columns: 1fr; }
    #apnea-journey-wrap .bsm-help-box     { flex-direction: column; }
    #apnea-journey-wrap .bsm-score-wrap  { flex-direction: column; }
    #apnea-journey-wrap .bsm-flip-pat    { height: 180px; }
    #bsm-edit-profile-modal .bsm-epm-two-col { grid-template-columns: 1fr; }
    #bsm-results-info-modal .bsm-rim-compare { grid-template-columns: 1fr; }
    #bsm-results-info-modal .bsm-rim-kp-grid  { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    #apnea-journey-wrap .bsm-flip-inner  { transition: none; }
    #apnea-journey-wrap .bsm-pulse       { animation: none; }
    #apnea-journey-wrap .bsm-types-col,
    #apnea-journey-wrap .bsm-verify-card { transition: none; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block { display:block; }
.u-display-flex { display:flex; }
.u-font-size-1rem-font-weight-500-opacity-0 { font-size: var(--bsm3-text-large-16px-use-on-text);font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);opacity:var(--bsm3-opacity-medium); }
.u-font-size-22px-font-weight-800-color-var { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:4px; }
.u-font-size-13px-color-var-diary-text-mute { font-size:var(--bsm3-text-body-use-on-reading-text); }

/* ===== SOURCE: sleep_platform/pages/bsm-personalisation.css ===== */

/* =========================================================================
   PERSONALISATION PANEL — TRIPLE-ID ARMOR
========================================================================= */

#bsm-app-root #spa-stage #bsm-pers-root {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}



#bsm-app-root #spa-stage #bsm-pers-root h1,
#bsm-app-root #spa-stage #bsm-pers-root h2,
#bsm-app-root #spa-stage #bsm-pers-root h3,
#bsm-app-root #spa-stage #bsm-pers-root h4,
#bsm-app-root #spa-stage #bsm-pers-root p,
#bsm-app-root #spa-stage #bsm-pers-root span,
#bsm-app-root #spa-stage #bsm-pers-root li,
#bsm-app-root #spa-stage #bsm-pers-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Layout */
#bsm-pers-root .bsm-pers-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

#bsm-pers-root .bsm-pers-section-title {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

#bsm-pers-root .bsm-pers-profile-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 10px !important;
}

#bsm-pers-root .bsm-pers-profile-icon {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    flex-shrink: 0 !important;
}

#bsm-pers-root .bsm-pers-profile-label {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 2px !important;
}

#bsm-pers-root .bsm-pers-profile-value {
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    display: block !important;
}

#bsm-pers-root .bsm-pers-tip-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#bsm-pers-root .bsm-pers-tip-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-pers-root .bsm-pers-tip-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 7px !important;
}

#bsm-pers-root .bsm-pers-focus-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#bsm-pers-root .bsm-pers-focus-week {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    min-width: 40px !important;
}

#bsm-pers-root .bsm-pers-focus-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.4 !important;
}

#bsm-pers-root .bsm-pers-incomplete-notice {
    padding: 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    text-align: center !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.6 !important;
}

/* ===== SOURCE: sleep_platform/pages/cbti_module_0.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - MODULE 0
========================================================================= */
#bsm-app-root #spa-stage #bsm-module-0-wrapper {
    font-family: inherit;
    max-width: var(--bsm3-width-standard);
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}



/* Base Typographic Locks */
#bsm-app-root #spa-stage #bsm-module-0-wrapper h1,
#bsm-app-root #spa-stage #bsm-module-0-wrapper h2,
#bsm-app-root #spa-stage #bsm-module-0-wrapper h3,
#bsm-app-root #spa-stage #bsm-module-0-wrapper h4,
#bsm-app-root #spa-stage #bsm-module-0-wrapper p,
#bsm-app-root #spa-stage #bsm-module-0-wrapper span,
#bsm-app-root #spa-stage #bsm-module-0-wrapper label,
#bsm-app-root #spa-stage #bsm-module-0-wrapper strong,
#bsm-app-root #spa-stage #bsm-module-0-wrapper textarea { margin: 0;
}

/* CORE STRUCTURE */
#bsm-module-0-wrapper .bsm-block:not(.bsm-hidden):not(.bsm-d-none) { display: block !important; box-sizing: border-box !important; }
#bsm-module-0-wrapper .bsm-flex:not(.bsm-d-none) { display: flex !important; box-sizing: border-box !important; }

.bsm-pill.unlocked { cursor: pointer !important; }
.bsm-pill.active { cursor: default !important;
}

.bsm-pill.completed { cursor: pointer !important; }

/* CONTENT CARDS */
#bsm-module-0-wrapper .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; 
    padding: 24px !important; margin-bottom: 24px !important;
}

.bsm-check-list-item svg, .bsm-check-list-item span:first-child { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-module-0-wrapper .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; }

#bsm-module-0-wrapper .bsm-btn-red,
#bsm-module-0-wrapper .bsm-btn-green,
#bsm-module-0-wrapper .bsm-btn-purple {
    padding: 16px 32px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; 
    cursor: pointer !important; text-align: center !important; flex: 1 !important; 
    max-width: var(--bsm3-width-narrow)!important; transition: all 0.2s !important;
}
.bsm-btn-purple:hover:not(:disabled) { opacity: var(--bsm3-opacity-high) !important; transform: translateY(-2px) !important; }
.bsm-btn-purple:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; transform: none !important; }


#bsm-module-0-wrapper .bsm-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; transition: all 0.3s ease !important; }
.bsm-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}
#bsm-cinematic-overlay.show { display: block; }

#bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}
#bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}
#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}
#bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}
#bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
#bsm-video-overlay-title.show { opacity: 1; }

#bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}
#bsm-video-close svg { width: 70%; height: 70%; }

#bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}
#bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}
#bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

/* =========================================================================
   STEP 4 CONFIRM/UPDATE TILES — same pattern as insomnia.php/circadian.php/
   apnea.php/legs.php's own "Update My Profile" tiles, reused here since
   Step 4 now edits the exact same godJSON fields.
========================================================================= */
#bsm-module-0-wrapper .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: var(--bsm3-font-body) !important;
}
.bsm-epm-tab-btn.bsm-tab-selected { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-mod0-epm-status.bsm-epm-ok  { display: block !important; }
#bsm-mod0-epm-status.bsm-epm-err { display: block !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-flex-align-items-stretch-gap-6px { display:flex; align-items:stretch; gap:6px; width:100%; box-sizing:border-box; flex-wrap:wrap; }
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-20px { margin-bottom: 20px; }
.u-font-weight-bold-margin-bottom-8px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }
.u-font-weight-bold-font-size-16px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-font-size-20px-font-weight-bold-margin-b { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 16px; }
.u-font-size-14px-font-weight-bold { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.u-font-size-13px-opacity-0-8-margin-top-4p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-high); margin-top: 4px; }
.u-font-size-11px-font-weight-normal { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); }
.u-color-var-brand-green-margin-left-4px { margin-left: 4px; }
.u-align-items-center-gap-16px { align-items: center; gap: 16px; }
.u-text-align-center-2 { text-align: center; }
.u-width-40px-height-40px-background-rgba12 { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.u-margin-top-24px { margin-top: 24px; }
.u-font-size-24px { font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-text-align-right { text-align: right; }
.u-flex-1 { flex: 1; }
.u-width-auto { width: auto; }
.u-width-20px-height-20px-flex-shrink-0 { width: 20px; height: 20px; flex-shrink: 0; }
.u-text-align-right-margin-top-24px { text-align: right; margin-top: 24px; }
.u-opacity-0-8-font-size-16px-line-height-1 { opacity: var(--bsm3-opacity-high); font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.5; }
.u-font-size-80px-margin-bottom-24px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 24px; }
.u-font-size-28px-font-weight-bold-margin-b { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 16px; }
.u-font-size-14px-font-weight-bold-cursor-p { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day1-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day1-root h2,
#bsm-app-root #spa-stage #bsm-week1-day1-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day1-root h4,
#bsm-app-root #spa-stage #bsm-week1-day1-root p, 
#bsm-app-root #spa-stage #bsm-week1-day1-root span,
#bsm-app-root #spa-stage #bsm-week1-day1-root label, 
#bsm-app-root #spa-stage #bsm-week1-day1-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day1-root .bsm-block:not(.bsm-callout-box):not(.bsm-feedback-blue):not(.bsm-hidden):not(.bsm-option):not(.bsm-slide) { display: block !important; }
#bsm-week1-day1-root .bsm-flex { display: flex !important; }
#bsm-week1-day1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#bsm-week1-day1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#bsm-week1-day1-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day1-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day1-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day1-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day1-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day1-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Box */
#bsm-week1-day1-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#bsm-week1-day1-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}@keyframes bsm-twinkle {
}






/* Carousel Elements */
#bsm-week1-day1-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day1-root .bsm-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; transition: background 0.3s !important; }
.bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


#bsm-week1-day1-root .bsm-slide { display: none !important; padding: 24px 0 !important; }
.bsm-slide.active { display: block !important; animation: bsmFadeIn 0.4s ease forwards !important; }

#bsm-app-root #spa-stage #bsm-week1-day1-root .bsm-reveal-action-btn {
    padding: 12px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    margin-left: 12px !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}
.bsm-reveal-action-btn:hover { transform: translateY(-2px) !important; }

.bsm-reveal-example strong { font-style: normal !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; display: block !important; margin-bottom: 4px !important; }

/* Quiz / Selection Options */
#bsm-week1-day1-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}
.bsm-option.locked { pointer-events: none !important; }

.bsm-option.correct { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.bsm-option.incorrect { opacity: var(--bsm3-opacity-medium) !important; }


/* General Buttons */
#bsm-week1-day1-root .bsm-carousel-footer { padding-top: 16px !important; }
#bsm-week1-day1-root .bsm-btn { padding: 10px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; user-select: none !important; }
#bsm-week1-day1-root .bsm-btn-primary { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }

.bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

/* Success Block */
#bsm-week1-day1-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }
.bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.u-font-size-40px-margin-bottom-16px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }
.u-font-weight-500 { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }
.u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-font-weight-800-font-size-18px-color-var { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-margin-bottom-32px-3 { margin-bottom: 32px; }
.u-font-size-16px-font-weight-700-margin-bo-2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day2-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day2-root h2,
#bsm-app-root #spa-stage #bsm-week1-day2-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day2-root h4,
#bsm-app-root #spa-stage #bsm-week1-day2-root p, 
#bsm-app-root #spa-stage #bsm-week1-day2-root span,
#bsm-app-root #spa-stage #bsm-week1-day2-root label, 
#bsm-app-root #spa-stage #bsm-week1-day2-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day2-root .bsm-block:not(.bsm-hidden):not(.bsm-insight-box):not(.bsm-metric-explained):not(.bsm-metrics-grid):not(.bsm-slide) { display: block !important; }
#bsm-week1-day2-root .bsm-flex { display: flex !important; }
#bsm-week1-day2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day2-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day2-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Banners */
#bsm-week1-day2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}


/* Header Elements */
#bsm-week1-day2-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day2-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day2-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day2-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day2-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day2-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Box */
#bsm-week1-day2-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#bsm-week1-day2-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Carousel Elements */
#bsm-week1-day2-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day2-root .bsm-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; transition: background 0.3s !important; }
.bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


#bsm-week1-day2-root .bsm-slide { display: none !important; padding: 24px 0 !important; }
.bsm-slide.active { display: block !important; animation: bsmFadeIn 0.4s ease forwards !important; }

#bsm-week1-day2-root .bsm-slide-title { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }

#bsm-week1-day2-root .bsm-slide-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; margin-bottom: 24px !important; padding: 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; }

.bsm-dash-btn-mock svg {
    width: 20px !important; height: 20px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}


.bsm-diary-pill.mock-active {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}


#bsm-week1-day2-root .bsm-insight-box {
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: flex-start !important;
}

.bsm-insight-box svg { width: 20px !important; height: 20px !important; margin-right: 12px !important; flex-shrink: 0 !important; }


/* Interactive Metrics Grid */
#bsm-week1-day2-root .bsm-metrics-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
@media (max-width: 900px) { #bsm-week1-day2-root .bsm-metrics-grid { grid-template-columns: 1fr !important; } }

#bsm-week1-day2-root .bsm-metric-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; display: flex !important; flex-direction: column !important; }
.bsm-metric-header svg { width: 16px !important; height: 16px !important; margin-right: 8px !important; stroke-width: 2 !important; }
.bsm-metric-reveal-btn:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Specific Tints */
.bsm-checkbox svg { width: 14px !important; height: 14px !important; stroke-width: 3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 0 !important; }
.bsm-check-item.checked .bsm-checkbox svg { opacity: 1 !important; }
.bsm-check-item.checked .bsm-check-text { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

/* General Buttons */
#bsm-week1-day2-root .bsm-carousel-footer { padding-top: 16px !important; }
#bsm-week1-day2-root .bsm-btn { padding: 10px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; user-select: none !important; }
#bsm-week1-day2-root .bsm-btn-primary { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }


/* Success Block */
#bsm-week1-day2-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }
.u-margin-bottom-12px { margin-bottom: 12px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px { margin-bottom: 16px; }
.u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.u-font-weight-normal-font-size-11px { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); font-size: var(--bsm3-text-small-12px-use-on-text); }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day3.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 3
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day3-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day3-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day3-root h2,
#bsm-app-root #spa-stage #bsm-week1-day3-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day3-root h4,
#bsm-app-root #spa-stage #bsm-week1-day3-root p, 
#bsm-app-root #spa-stage #bsm-week1-day3-root span,
#bsm-app-root #spa-stage #bsm-week1-day3-root label, 
#bsm-app-root #spa-stage #bsm-week1-day3-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day3-root .bsm-block:not(.bsm-hidden):not(.bsm-slide) { display: block !important; }
#bsm-week1-day3-root .bsm-flex { display: flex !important; }
#bsm-week1-day3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day3-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day3-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#bsm-week1-day3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#bsm-week1-day3-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg {
    width: 24px !important;
    height: 24px !important;
}


#bsm-week1-day3-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 4px !important;
}

#bsm-week1-day3-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#bsm-week1-day3-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#bsm-week1-day3-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#bsm-week1-day3-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}


/* Video Placeholder */
#bsm-week1-day3-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

.bsm-video-box:hover {
    opacity: var(--bsm3-opacity-high) !important;
}

#bsm-week1-day3-root .bsm-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Carousel */
#bsm-week1-day3-root .bsm-badge {
    padding: 4px 12px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-right: 12px !important;
}


#bsm-week1-day3-root .bsm-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: background 0.3s !important;
}

.bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


#bsm-week1-day3-root .bsm-slide {
    display: none !important;
    padding: 24px 0 !important;
}

.bsm-slide.active {
    display: block !important;
    animation: bsmFadeIn 0.4s ease forwards !important;
}

#bsm-week1-day3-root .bsm-slide-title {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 16px !important;
}

#bsm-week1-day3-root .bsm-slide-text {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

.bsm-reveal-btn:hover {
    transform: translateY(-2px) !important;
}
.bsm-reveal-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
}

/* Buttons */
#bsm-week1-day3-root .bsm-carousel-footer {
    padding-top: 16px !important;
}

#bsm-week1-day3-root .bsm-btn {
    padding: 10px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    user-select: none !important;
}




/* Quiz / Selection Options */
#bsm-week1-day3-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
}


.bsm-option.selected {
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

/* Quiz Validation Styles */


#bsm-week1-day3-root .bsm-feedback-msg {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

/* Success Block */
#bsm-week1-day3-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day4-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day4-root h2,
#bsm-app-root #spa-stage #bsm-week1-day4-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day4-root h4,
#bsm-app-root #spa-stage #bsm-week1-day4-root p, 
#bsm-app-root #spa-stage #bsm-week1-day4-root span,
#bsm-app-root #spa-stage #bsm-week1-day4-root label, 
#bsm-app-root #spa-stage #bsm-week1-day4-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day4-root .bsm-block:not(.bsm-flip-back-title):not(.bsm-flip-face):not(.bsm-flip-front-hint):not(.bsm-hidden):not(.bsm-insight-title):not(.bsm-slide):not(.bsm-sort-feedback) { display: block !important; }
#bsm-week1-day4-root .bsm-flex { display: flex !important; }
#bsm-week1-day4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day4-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important; padding: 8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Diary Reminder Banner */
#bsm-week1-day4-root .bsm-diary-banner { padding: 16px 20px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
}


/* Cards */
#bsm-week1-day4-root .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Educational Callouts */
#bsm-week1-day4-root .bsm-insight-box {
    padding: 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 24px !important;
}



/* Header Elements */
#bsm-week1-day4-root .bsm-icon-circle { width: 40px !important; height: 40px !important; border-radius: 50% !important; justify-content: center !important; margin-right: 16px !important; flex-shrink: 0 !important; }
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day4-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day4-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day4-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day4-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day4-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Box */
#bsm-week1-day4-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#bsm-week1-day4-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}





.bsm-flip-card.is-flipped { transform: rotateY(180deg) !important; }
.bsm-flip-front-hint svg { width: 16px !important; height: 16px !important; margin-right: 4px !important; }

#bsm-week1-day4-root .bsm-flip-back {
    transform: rotateY(180deg) !important; align-items: flex-start !important; text-align: left !important; overflow-y: auto !important;
}
.bsm-flip-back-title svg { width: 20px !important; height: 20px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.bsm-flip-list-item::before { content: "•"; position: absolute !important; left: 0 !important; }

/* Carousel */
#bsm-week1-day4-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-right: 12px !important; }

#bsm-week1-day4-root .bsm-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; transition: background 0.3s !important; }
.bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


/* 14 Oct 2026: + W1D5 key facts */ :is(#bsm-week1-day4-root, #bsm-week1-day5-root) .bsm-slide { display: none !important; padding: 24px 0 !important; }
.bsm-slide.active { display: block !important; animation: bsmFadeIn 0.4s ease forwards !important; }
/* 14 Oct 2026: + W1D5 key facts */ :is(#bsm-week1-day4-root, #bsm-week1-day5-root) .bsm-slide-title { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }
/* 14 Oct 2026: + W1D5 key facts */ :is(#bsm-week1-day4-root, #bsm-week1-day5-root) .bsm-slide-text { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
#bsm-week1-day4-root .bsm-sort-btn-group { display: flex !important; gap: 8px !important; }
.bsm-sort-btn.disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

.bsm-sort-btn.selected[data-type="predisposing"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.bsm-sort-btn.selected[data-type="precipitating"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.bsm-sort-btn.selected[data-type="perpetuating"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-week1-day4-root .bsm-sort-feedback { margin-top: 12px !important; padding: 12px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; display: none !important; }
.bsm-alert-list span { display: block !important; margin-bottom: 8px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; padding-left: 12px !important; position: relative !important; }
.bsm-alert-list span::before { content: "•"; position: absolute !important; left: 0 !important; }

/* General Buttons */
#bsm-week1-day4-root .bsm-carousel-footer { padding-top: 16px !important; }
#bsm-week1-day4-root .bsm-btn { padding: 10px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; user-select: none !important; }


/* Success Block */
#bsm-week1-day4-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* Mobile adjustments */
@media (max-width: 900px) {
    #bsm-week1-day4-root .bsm-diary-banner { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
    .bsm-diary-banner button { width: 100% !important; }
    #bsm-week1-day4-root .bsm-sort-btn-group { flex-direction: column !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-8px { margin-bottom: 8px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day5-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day5-root h2,
#bsm-app-root #spa-stage #bsm-week1-day5-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day5-root h4,
#bsm-app-root #spa-stage #bsm-week1-day5-root p, 
#bsm-app-root #spa-stage #bsm-week1-day5-root span,
#bsm-app-root #spa-stage #bsm-week1-day5-root label, 
#bsm-app-root #spa-stage #bsm-week1-day5-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day5-root .bsm-block:not(.bsm-hidden):not(.bsm-slide) { display: block !important; } /* 14 Oct 2026: not the key-fact slides */
#bsm-week1-day5-root .bsm-flex { display: flex !important; }
#bsm-week1-day5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day5-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#bsm-week1-day5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#bsm-week1-day5-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day5-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day5-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day5-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day5-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day5-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Box */
#bsm-week1-day5-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#bsm-week1-day5-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Comparison Grid Elements */
#bsm-week1-day5-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day5-root .bsm-compare-grid { display: flex !important; width: 100% !important; }
.bsm-compare-icon-label svg { width: 16px !important; height: 16px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;}

#bsm-week1-day5-root .bsm-compare-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; line-height: 1.4 !important; }
.bsm-compare-reveal-bar svg { width: 16px !important; height: 16px !important; margin-right: 6px !important; vertical-align: text-bottom !important; }

/* Quiz / Selection Options */
#bsm-week1-day5-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}
.bsm-alert-warning strong { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;}

/* Buttons */
#bsm-week1-day5-root .bsm-btn-primary { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }


/* Success Block */
#bsm-week1-day5-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day6-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day6-root h2,
#bsm-app-root #spa-stage #bsm-week1-day6-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day6-root h4,
#bsm-app-root #spa-stage #bsm-week1-day6-root p, 
#bsm-app-root #spa-stage #bsm-week1-day6-root span,
#bsm-app-root #spa-stage #bsm-week1-day6-root label, 
#bsm-app-root #spa-stage #bsm-week1-day6-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day6-root .bsm-block:not(.bsm-callout-box):not(.bsm-feedback-msg):not(.bsm-hidden):not(.bsm-option):not(.bsm-slide) { display: block !important; }
#bsm-week1-day6-root .bsm-flex { display: flex !important; }
#bsm-week1-day6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day6-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day6-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Banners */
#bsm-week1-day6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#bsm-week1-day6-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day6-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day6-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day6-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day6-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day6-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Box */
#bsm-week1-day6-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#bsm-week1-day6-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Carousel Elements */
#bsm-week1-day6-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day6-root .bsm-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; transition: background 0.3s !important; }
.bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


#bsm-week1-day6-root .bsm-slide { display: none !important; padding: 24px 0 !important; }
.bsm-slide.active { display: block !important; animation: bsmFadeIn 0.4s ease forwards !important; }


/* Quiz / Selection Options */
#bsm-week1-day6-root .bsm-scenario-box { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-bottom: 24px !important; }

#bsm-week1-day6-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}
.bsm-option.selected { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }


#bsm-week1-day6-root .bsm-feedback-msg {
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
    display: none !important;
}


/* General Buttons */
#bsm-week1-day6-root .bsm-carousel-footer { padding-top: 16px !important; }
#bsm-week1-day6-root .bsm-btn { padding: 10px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; user-select: none !important; }
#bsm-week1-day6-root .bsm-btn-primary { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }


/* Success Block */
#bsm-week1-day6-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px { margin-bottom: 16px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week1_day7.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 7
========================================================================= */

#bsm-app-root #spa-stage #bsm-week1-day7-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #bsm-week1-day7-root h1, 
#bsm-app-root #spa-stage #bsm-week1-day7-root h2,
#bsm-app-root #spa-stage #bsm-week1-day7-root h3, 
#bsm-app-root #spa-stage #bsm-week1-day7-root h4,
#bsm-app-root #spa-stage #bsm-week1-day7-root p, 
#bsm-app-root #spa-stage #bsm-week1-day7-root span,
#bsm-app-root #spa-stage #bsm-week1-day7-root label, 
#bsm-app-root #spa-stage #bsm-week1-day7-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#bsm-week1-day7-root .bsm-block:not(.bsm-hidden):not(.bsm-option) { display: block !important; }
#bsm-week1-day7-root .bsm-flex { display: flex !important; }
#bsm-week1-day7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#bsm-week1-day7-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#bsm-week1-day7-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Banners */
#bsm-week1-day7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#bsm-week1-day7-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}
.bsm-icon-circle svg { width: 24px !important; height: 24px !important; }

#bsm-week1-day7-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
#bsm-week1-day7-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* Progress Bar */
#bsm-week1-day7-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
#bsm-week1-day7-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#bsm-week1-day7-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Quiz Questions */
#bsm-week1-day7-root .bsm-slide { display: none !important; }
.bsm-slide.active { display: block !important; animation: bsmFadeIn 0.3s ease forwards !important; }

/* Options */
#bsm-week1-day7-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}
.bsm-option.selected { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }


/* Buttons */
#bsm-week1-day7-root .bsm-carousel-footer { padding-top: 24px !important; margin-top: 24px !important; }
#bsm-week1-day7-root .bsm-btn { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; user-select: none !important; }

.bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }
.bsm-review-ans-row strong { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* Success Block */
#bsm-week1-day7-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; margin-top: 24px !important;}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w2-d1-root h1,
#bsm-app-root #spa-stage #cbti-w2-d1-root h2,
#bsm-app-root #spa-stage #cbti-w2-d1-root h3,
#bsm-app-root #spa-stage #cbti-w2-d1-root h4,
#bsm-app-root #spa-stage #cbti-w2-d1-root p,
#bsm-app-root #spa-stage #cbti-w2-d1-root span,
#bsm-app-root #spa-stage #cbti-w2-d1-root label,
#bsm-app-root #spa-stage #cbti-w2-d1-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w2-d1-root .bsm-block:not(.bsm-answer-explanation):not(.bsm-hidden):not(.w2d1-barrier-card):not(.w2d1-barrier-feedback):not(.w2d1-barrier-grid):not(.w2d1-flashcards-grid):not(.w2d1-match-items):not(.w2d1-match-zones):not(.w2d1-zone) { display: block !important; }
#cbti-w2-d1-root .bsm-flex { display: flex !important; }
#cbti-w2-d1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w2-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w2-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w2-d1-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d1-root .bsm-icon-circle-small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg, .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }
#cbti-w2-d1-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d1-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w2-d1-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

#cbti-w2-d1-root .bsm-slide-text {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    margin-top: 16px !important;
}

/* Progress Bar */
#cbti-w2-d1-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d1-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w2-d1-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



/* Video Placeholder */
#cbti-w2-d1-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d1-root .bsm-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






.w2d1-flip-card.is-flipped { transform: rotateY(180deg) !important; }

/* Interactive: Match Game */
#cbti-w2-d1-root .w2d1-match-zones {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d1-root .w2d1-match-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.w2d1-match-item.is-placed {
    cursor: default !important;
    pointer-events: none !important;
}

/* Options / Quizzes */
#cbti-w2-d1-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
}

/* Feedback & Primary Buttons */
#cbti-w2-d1-root .bsm-feedback-msg {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w2-d1-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
}


/* Success Block */
#cbti-w2-d1-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d1-root .w2d1-match-items { grid-template-columns: 1fr !important; }
    #cbti-w2-d1-root .w2d1-match-zones { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }
.u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.u-line-height-1-5-color-var-diary-text-mut { line-height: 1.5; }
.u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }
.u-text-align-left-align-items-flex-start { text-align: left !important; align-items: flex-start !important; }
.u-font-weight-700-font-size-15px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 6px; }
.u-font-size-13px-opacity-0-85-line-height { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-high); line-height: 1.4; }
.u-font-weight-500-margin-bottom-12px { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); margin-bottom: 12px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w2-d2-root h1,
#bsm-app-root #spa-stage #cbti-w2-d2-root h2,
#bsm-app-root #spa-stage #cbti-w2-d2-root h3,
#bsm-app-root #spa-stage #cbti-w2-d2-root h4,
#bsm-app-root #spa-stage #cbti-w2-d2-root p,
#bsm-app-root #spa-stage #cbti-w2-d2-root span,
#bsm-app-root #spa-stage #cbti-w2-d2-root label,
#bsm-app-root #spa-stage #cbti-w2-d2-root li,
#bsm-app-root #spa-stage #cbti-w2-d2-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w2-d2-root .bsm-block:not(.bsm-hidden):not(.bsm-success-block):not(.w2d2-chrono-card):not(.w2d2-chrono-grid):not(.w2d2-chrono-response):not(.w2d2-chrono-save-indicator):not(.w2d2-diary-response):not(.w2d2-flashcards-grid):not(.w2d2-match-list):not(.w2d2-match-options):not(.w2d2-match-row):not(.w2d2-match-zones):not(.w2d2-selection-card):not(.w2d2-selection-grid):not(.w2d2-sort-explanation) { display: block !important; }
#cbti-w2-d2-root .bsm-flex { display: flex !important; }
#cbti-w2-d2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d2-root .bsm-text-center { text-align: center !important; }

#cbti-w2-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important; transition: all 0.2s ease !important;
    display: inline-flex !important; padding: 8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d2-root .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d2-root .bsm-icon-circle {
    width: 48px !important; height: 48px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 16px !important; flex-shrink: 0 !important;
}

#cbti-w2-d2-root .bsm-icon-circle-small {
    width: 32px !important; height: 32px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 12px !important; flex-shrink: 0 !important;
}

#cbti-w2-d2-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d2-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w2-d2-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w2-d2-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w2-d2-root .bsm-progress-track {
    width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important;
}
#cbti-w2-d2-root .bsm-progress-fill {
    height: 100% !important; width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important;
}


#cbti-w2-d2-root .bsm-video-box {
    width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important;
}
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w2-d2-root .bsm-play-btn {
    width: 64px !important; height: 64px !important;
    border-radius: 50% !important; justify-content: center !important; position: absolute !important;
    top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}





.w2d2-flip-card.is-flipped { transform: rotateY(180deg) !important; }

/* Sort Game */
#cbti-w2-d2-root .w2d2-match-zones {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 16px !important; margin-bottom: 24px !important;
}
.w2d2-match-btn.locked { pointer-events: none !important; opacity: 1 !important; }

/* Sleep Need Selection */
#cbti-w2-d2-root .w2d2-selection-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 24px !important;
}
.w2d2-diary-response a, .w2d2-diary-link { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; cursor: pointer !important;
}

#cbti-w2-d2-root .w2d2-chrono-grid {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px !important; margin-top: 8px !important;
}

/* Feedback & Buttons */
#cbti-w2-d2-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}

#cbti-w2-d2-root .bsm-btn-primary {
    padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important;
    transition: all 0.2s !important; font-family: var(--bsm3-font-body) !important;
}

#cbti-w2-d2-root .bsm-success-block {
    display: none !important; text-align: center !important;
    padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d2-root .w2d2-selection-grid { grid-template-columns: 1fr !important; }
    #cbti-w2-d2-root .w2d2-match-zones { grid-template-columns: 1fr !important; }
    #cbti-w2-d2-root .w2d2-chrono-grid { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px-2 { margin-top: 20px; }
.u-margin-12px-0-0-0-padding-left-20px-line { margin:12px 0 0 0;padding-left:20px;line-height:1.8; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day3.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 3
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d3-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w2-d3-root h1,
#bsm-app-root #spa-stage #cbti-w2-d3-root h2,
#bsm-app-root #spa-stage #cbti-w2-d3-root h3,
#bsm-app-root #spa-stage #cbti-w2-d3-root h4,
#bsm-app-root #spa-stage #cbti-w2-d3-root p,
#bsm-app-root #spa-stage #cbti-w2-d3-root span,
#bsm-app-root #spa-stage #cbti-w2-d3-root label,
#bsm-app-root #spa-stage #cbti-w2-d3-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w2-d3-root .bsm-block:not(.bsm-hidden):not(.bsm-success-block):not(.w2d3-barrier-card):not(.w2d3-barrier-grid):not(.w2d3-barrier-response):not(.w2d3-chain-reveal):not(.w2d3-chain-steps):not(.w2d3-commit-wrap):not(.w2d3-flashcards-grid):not(.w2d3-plan-builder):not(.w2d3-qc-actions):not(.w2d3-qc-container):not(.w2d3-qc-explanation):not(.w2d3-qc-row):not(.w2d3-tool-tag) { display: block !important; }
#cbti-w2-d3-root .bsm-flex { display: flex !important; }
#cbti-w2-d3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d3-root .bsm-text-center { text-align: center !important; }

#cbti-w2-d3-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


#cbti-w2-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d3-root .bsm-icon-circle {
    width: 48px !important; height: 48px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 16px !important; flex-shrink: 0 !important;
}

#cbti-w2-d3-root .bsm-icon-circle-small {
    width: 32px !important; height: 32px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 12px !important; flex-shrink: 0 !important;
}

#cbti-w2-d3-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d3-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w2-d3-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

.w2d3-reframe-box strong {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

.w2d3-safety-box strong {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w2-d3-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w2-d3-root .bsm-progress-track {
    width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important;
}

#cbti-w2-d3-root .bsm-progress-fill {
    height: 100% !important; width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important;
}



#cbti-w2-d3-root .bsm-video-box {
    width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important;
}
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d3-root .bsm-play-btn {
    width: 64px !important; height: 64px !important;
    border-radius: 50% !important; justify-content: center !important; position: absolute !important;
    top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Flashcards */
#cbti-w2-d3-root .w2d3-flashcards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

.w2d3-flip-card.is-flipped { transform: rotateY(180deg) !important; }

.w2d3-chain-step.is-locked { opacity: var(--bsm3-opacity-medium) !important; cursor: default !important; pointer-events: none !important; }
.w2d3-chain-step.is-revealed { cursor: default !important; pointer-events: none !important; }

.w2d3-qc-btn.is-correct { pointer-events: none !important;
}

.w2d3-qc-btn.is-wrong { pointer-events: none !important;
}

/* Barrier Selection — Task 5 */
#cbti-w2-d3-root .w2d3-barrier-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.w2d3-barrier-card.is-selected {
    pointer-events: none !important;
}

.w2d3-plan-prompt.is-selected {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

.w2d3-plan-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }

/* Feedback & Buttons */
#cbti-w2-d3-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}

#cbti-w2-d3-root .bsm-btn-primary { padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
    text-align: center !important; transition: all 0.2s !important; display: inline-block !important;
    font-family: var(--bsm3-font-body) !important;
}


#cbti-w2-d3-root .bsm-success-block {
    display: none !important; text-align: center !important; padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d3-root .w2d3-flashcards-grid { grid-template-columns: 1fr !important; }
    #cbti-w2-d3-root .w2d3-barrier-grid { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w2-d4-root h1,
#bsm-app-root #spa-stage #cbti-w2-d4-root h2,
#bsm-app-root #spa-stage #cbti-w2-d4-root h3,
#bsm-app-root #spa-stage #cbti-w2-d4-root h4,
#bsm-app-root #spa-stage #cbti-w2-d4-root p,
#bsm-app-root #spa-stage #cbti-w2-d4-root span,
#bsm-app-root #spa-stage #cbti-w2-d4-root label,
#bsm-app-root #spa-stage #cbti-w2-d4-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w2-d4-root .bsm-block:not(.bsm-hidden):not(.bsm-success-block):not(.w2d4-act-back):not(.w2d4-carousel-controls):not(.w2d4-checkin-grid):not(.w2d4-checkin-response):not(.w2d4-pick-card):not(.w2d4-pick-grid):not(.w2d4-quiz-actions):not(.w2d4-quiz-feedback):not(.w2d4-quiz-list):not(.w2d4-quiz-row):not(.w2d4-revealed-content):not(.w2d4-slide):not(.w2d4-thought-box) { display: block !important; }
#cbti-w2-d4-root .bsm-flex { display: flex !important; }
#cbti-w2-d4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d4-root .bsm-text-center { text-align: center !important; }

#cbti-w2-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important; transition: all 0.2s ease !important;
    display: inline-flex !important; padding: 8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d4-root .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d4-root .bsm-icon-circle {
    width: 48px !important; height: 48px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 16px !important; flex-shrink: 0 !important;
}

#cbti-w2-d4-root .bsm-icon-circle-small {
    width: 32px !important; height: 32px !important; border-radius: 50% !important; justify-content: center !important;
    margin-right: 12px !important; flex-shrink: 0 !important;
}

#cbti-w2-d4-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d4-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w2-d4-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w2-d4-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w2-d4-root .bsm-progress-track {
    width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important;
}

#cbti-w2-d4-root .bsm-progress-fill {
    height: 100% !important; width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important;
}



#cbti-w2-d4-root .bsm-video-box {
    width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important;
}
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d4-root .bsm-play-btn {
    width: 64px !important; height: 64px !important;
    border-radius: 50% !important; justify-content: center !important; position: absolute !important;
    top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Check-in */
#cbti-w2-d4-root .w2d4-checkin-grid {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important; margin-top: 20px !important;
}
.w2d4-slide.active { display: block !important; }
.w2d4-revealed-content.is-visible { display: block !important; }
.w2d4-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }
.w2d4-nav-btn.locked { opacity: var(--bsm3-opacity-low) !important; pointer-events: none !important; }
.w2d4-act-example.is-open .w2d4-act-back { display: block !important; }
.w2d4-act-example.is-open .w2d4-act-hint { display: none !important; }
.w2d4-act-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d4-root .w2d4-quiz-actions { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }

.w2d4-quiz-feedback.is-correct {
    display: block !important;
}

.w2d4-quiz-feedback.is-incorrect {
    display: block !important;
}

/* Pick One */
#cbti-w2-d4-root .w2d4-pick-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 20px !important;
}

/* Feedback & Buttons */
#cbti-w2-d4-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}

#cbti-w2-d4-root .bsm-btn-primary {
    padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important;
    transition: all 0.2s !important; display: inline-block !important;
    font-family: var(--bsm3-font-body) !important;
}

#cbti-w2-d4-root .bsm-success-block {
    display: none !important; text-align: center !important;
    padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d4-root .w2d4-checkin-grid { grid-template-columns: 1fr !important; }
    #cbti-w2-d4-root .w2d4-quiz-actions { grid-template-columns: 1fr !important; }
    #cbti-w2-d4-root .w2d4-pick-grid { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-14px-line-height-1-6 { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; }
.u-font-weight-700-font-size-16px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 20px; }
.u-font-size-14px-font-style-italic-line-he { font-size: var(--bsm3-text-body-use-on-reading-text); font-style: italic; line-height: 1.6; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w2-d5-root h1, 
#bsm-app-root #spa-stage #cbti-w2-d5-root h2,
#bsm-app-root #spa-stage #cbti-w2-d5-root h3, 
#bsm-app-root #spa-stage #cbti-w2-d5-root h4,
#bsm-app-root #spa-stage #cbti-w2-d5-root p, 
#bsm-app-root #spa-stage #cbti-w2-d5-root span,
#bsm-app-root #spa-stage #cbti-w2-d5-root label, 
#bsm-app-root #spa-stage #cbti-w2-d5-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w2-d5-root .bsm-block:not(.bsm-hidden):not(.w2d5-action-btn):not(.w2d5-pb-chip-row):not(.w2d5-pb-cutoff-box):not(.w2d5-pb-section-label):not(.w2d5-plan-actions):not(.w2d5-plan-list):not(.w2d5-plan-row):not(.w2d5-plan-statement) { display: block !important; }
#cbti-w2-d5-root .bsm-flex { display: flex !important; }
#cbti-w2-d5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d5-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w2-d5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w2-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w2-d5-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d5-root .bsm-icon-circle-small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d5-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d5-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w2-d5-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w2-d5-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d5-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w2-d5-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}


/* Video Placeholder */
#cbti-w2-d5-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d5-root .bsm-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






#cbti-w2-d5-root .w2d5-plan-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.w2d5-action-btn.is-correct-avoid {
    pointer-events: none !important;
}

.w2d5-action-btn.is-correct-do {
    pointer-events: none !important;
}

.w2d5-action-btn.locked {
    opacity: var(--bsm3-opacity-low) !important;
    pointer-events: none !important;
}

.w2d5-action-btn.is-incorrect-pick {
    opacity: var(--bsm3-opacity-high) !important;
}

.w2d5-plan-row.is-answered .w2d5-action-btn { pointer-events: none !important; }
.w2d5-pb-chip.is-selected {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}
.w2d5-pb-mini-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }
.w2d5-pb-commit-single.is-committed {
    pointer-events: none !important;
}

/* Feedback & Primary Buttons */
#cbti-w2-d5-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w2-d5-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}


/* Success Block */
#cbti-w2-d5-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d5-root .w2d5-plan-actions { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }
.u-margin-bottom-16px { margin-bottom: 16px; }
.u-margin-top-8px-font-size-15px { margin-top: 8px; font-size: var(--bsm3-text-body-use-on-reading-text); }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w2-d6-root h1, 
#bsm-app-root #spa-stage #cbti-w2-d6-root h2,
#bsm-app-root #spa-stage #cbti-w2-d6-root h3, 
#bsm-app-root #spa-stage #cbti-w2-d6-root h4,
#bsm-app-root #spa-stage #cbti-w2-d6-root p, 
#bsm-app-root #spa-stage #cbti-w2-d6-root span,
#bsm-app-root #spa-stage #cbti-w2-d6-root label, 
#bsm-app-root #spa-stage #cbti-w2-d6-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w2-d6-root .bsm-block:not(.bsm-hidden):not(.pg-cbti-module-week2-day6-i002):not(.u-display-none-2):not(.w2d6-bit-card):not(.w2d6-bit-grid):not(.w2d6-bsm-back):not(.w2d6-bsm-front):not(.w2d6-bsm-link-row):not(.w2d6-bsm-slide):not(.w2d6-carousel-controls):not(.w2d6-flag-box):not(.w2d6-helps-item):not(.w2d6-helps-list):not(.w2d6-revealed-content):not(.w2d6-slide-item):not(.w2d6-strength-item):not(.w2d6-strengths-box):not(.w2d6-strengths-title):not(.w2d6-warning-box):not(.w2d6-warning-title) { display: block !important; }
#cbti-w2-d6-root .bsm-flex { display: flex !important; }
#cbti-w2-d6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d6-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w2-d6-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w2-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w2-d6-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d6-root .bsm-icon-circle-small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d6-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d6-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w2-d6-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w2-d6-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d6-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w2-d6-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}


/* Video Placeholder */
#cbti-w2-d6-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d6-root .bsm-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}





.w2d6-bsm-slide.active { display: block !important; }
.w2d6-bsm-back.is-visible { display: block !important; }

.w2d6-slide-item.active { display: block !important; }

.w2d6-btn-explore:hover { opacity: var(--bsm3-opacity-high) !important; transform: translateY(-1px) !important; }

.w2d6-slide-item.is-explored .w2d6-btn-explore { display: none !important; }
.w2d6-slide-item.is-explored .w2d6-revealed-content { display: block !important; }

.w2d6-helps-item::before {
    content: "•";
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}
.w2d6-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }
.w2d6-nav-btn.locked { opacity: var(--bsm3-opacity-low) !important; pointer-events: none !important; }

/* Global Buttons & Feedback */
#cbti-w2-d6-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w2-d6-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}


/* Success Block */
#cbti-w2-d6-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-4px { margin-top: 4px; }
.u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }
.u-display-none-2 { display: none !important; }
.u-font-weight-700-font-size-16px-margin-bo-2 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }
.u-font-size-20px-margin-0-2 { font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0 !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week2_day7.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 7
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-d7-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w2-d7-root h1, 
#bsm-app-root #spa-stage #cbti-w2-d7-root h2,
#bsm-app-root #spa-stage #cbti-w2-d7-root h3, 
#bsm-app-root #spa-stage #cbti-w2-d7-root h4,
#bsm-app-root #spa-stage #cbti-w2-d7-root p, 
#bsm-app-root #spa-stage #cbti-w2-d7-root span,
#bsm-app-root #spa-stage #cbti-w2-d7-root label, 
#bsm-app-root #spa-stage #cbti-w2-d7-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w2-d7-root .bsm-block:not(.bsm-hidden):not(.bsm-option):not(.w2d7-quiz-question):not(.w2d7-scale-grid) { display: block !important; }
#cbti-w2-d7-root .bsm-flex:not(.w2d7-num-circle) { display: flex !important; }
#cbti-w2-d7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-d7-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w2-d7-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w2-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w2-d7-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d7-root .bsm-icon-circle-small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d7-root .bsm-icon-purple { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

/* Numbered Circle for Lists */
#cbti-w2-d7-root .w2d7-num-circle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-d7-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w2-d7-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w2-d7-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d7-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w2-d7-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}


/* Video Placeholder */
#cbti-w2-d7-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d7-root .bsm-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Quiz & Options Formatting */
#cbti-w2-d7-root .w2d7-quiz-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

#cbti-w2-d7-root .w2d7-quiz-question {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}

#cbti-w2-d7-root .w2d7-quiz-text {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

#cbti-w2-d7-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}


/* Reflection Elements */
#cbti-w2-d7-root .w2d7-reflection-row {
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
}

.w2d7-reflection-row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#cbti-w2-d7-root .w2d7-scale-grid {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

#cbti-w2-d7-root .w2d7-scale-btn {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px 0 !important;
    text-align: center !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
}

#cbti-w2-d7-root .w2d7-btn-orange {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.w2d7-btn-orange:hover:not(.locked) {
    transform: translateY(-2px) !important;
    opacity: var(--bsm3-opacity-high) !important;
}

.w2d7-btn-orange.locked {
    cursor: default !important;
    pointer-events: none !important;
}

/* Feedback & Primary Buttons */
#cbti-w2-d7-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w2-d7-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}


/* Success Block */
#cbti-w2-d7-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w2-d7-root .w2d7-scale-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px { margin-bottom: 16px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-d1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w3-d1-root h1,
#bsm-app-root #spa-stage #cbti-w3-d1-root h2,
#bsm-app-root #spa-stage #cbti-w3-d1-root h3,
#bsm-app-root #spa-stage #cbti-w3-d1-root h4,
#bsm-app-root #spa-stage #cbti-w3-d1-root p,
#bsm-app-root #spa-stage #cbti-w3-d1-root span,
#bsm-app-root #spa-stage #cbti-w3-d1-root label,
#bsm-app-root #spa-stage #cbti-w3-d1-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w3-d1-root .bsm-block:not(.bsm-hidden):not(.w3d1-acc-container):not(.w3d1-acc-content):not(.w3d1-energizer-card):not(.w3d1-energizer-grid):not(.w3d1-fact-item):not(.w3d1-hunger-feedback):not(.w3d1-hunger-stage):not(.w3d1-safety-title) { display: block !important; }
#cbti-w3-d1-root .bsm-flex:not(.w3d1-groggy-indicator):not(.w3d1-hunger-actions) { display: flex !important; }
#cbti-w3-d1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-d1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w3-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#cbti-w3-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w3-d1-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w3-d1-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w3-d1-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }
#cbti-w3-d1-root .bsm-slide-text { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.6 !important; margin-bottom: 24px !important; margin-top: 16px !important; }

/* Progress Bar */
#cbti-w3-d1-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w3-d1-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#cbti-w3-d1-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Placeholder */
#cbti-w3-d1-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w3-d1-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

.w3d1-acc-row.is-open .w3d1-acc-content { display: block !important; }

.w3d1-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

#cbti-w3-d1-root .w3d1-hunger-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

#cbti-w3-d1-root .w3d1-hunger-btn {
    padding: 12px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex: 1 !important;
    min-width: 130px !important;
}

/* ==========================================================================
   ENERGIZERS & ANTI-NAP
   ========================================================================== */
#cbti-w3-d1-root .w3d1-energizer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

.w3d1-btn-commit:hover {
    transform: translateY(-2px) !important;
}

.w3d1-btn-commit.is-locked {
    pointer-events: none !important;
}

/* Feedback & Primary Buttons */
#cbti-w3-d1-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w3-d1-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}

/* Success Block */
#cbti-w3-d1-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w3-d1-root .w3d1-energizer-grid { grid-template-columns: 1fr !important; }
    #cbti-w3-d1-root .w3d1-hunger-actions { flex-direction: column !important; }
    #cbti-w3-d1-root .w3d1-hunger-btn { width: 100% !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-font-size-14px { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-medium-14px-use-on-text); }
.u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }
.u-margin-0-3 { margin:0!important; }
.u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-d2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w3-d2-root h1,
#bsm-app-root #spa-stage #cbti-w3-d2-root h2,
#bsm-app-root #spa-stage #cbti-w3-d2-root h3,
#bsm-app-root #spa-stage #cbti-w3-d2-root h4,
#bsm-app-root #spa-stage #cbti-w3-d2-root p,
#bsm-app-root #spa-stage #cbti-w3-d2-root span,
#bsm-app-root #spa-stage #cbti-w3-d2-root label,
#bsm-app-root #spa-stage #cbti-w3-d2-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w3-d2-root .bsm-block:not(.bsm-hidden):not(.w3d2-cascade-container):not(.w3d2-cascade-content):not(.w3d2-cascade-num):not(.w3d2-cascade-step):not(.w3d2-cascade-trigger):not(.w3d2-cw-check-circle):not(.w3d2-cw-check-item):not(.w3d2-cw-checklist):not(.w3d2-options-grid):not(.w3d2-path-list):not(.w3d2-protocol-info):not(.w3d2-stack-list) { display: block !important; }
#cbti-w3-d2-root .bsm-flex { display: flex !important; }
#cbti-w3-d2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-d2-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w3-d2-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#cbti-w3-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w3-d2-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w3-d2-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w3-d2-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }
#cbti-w3-d2-root .bsm-slide-text { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.6 !important; margin-bottom: 24px !important; margin-top: 16px !important; }

/* Progress Bar */
#cbti-w3-d2-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w3-d2-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#cbti-w3-d2-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Placeholder */
#cbti-w3-d2-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w3-d2-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}
.w3d2-cascade-step.revealed .w3d2-cascade-content { display: block !important; }

/* ==========================================================================
   NIGHT-AWAKENING PROTOCOL BUILDER
   ========================================================================== */
#cbti-w3-d2-root .w3d2-protocol-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}
#cbti-w3-d2-root .w3d2-protocol-path-a,
#cbti-w3-d2-root .w3d2-protocol-path-b {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important;
}
.w3d2-path-item::before { content: "•"; position: absolute !important; left: 0 !important; }

#cbti-w3-d2-root .w3d2-options-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

/* Feedback & Primary Buttons */
#cbti-w3-d2-root .bsm-feedback-msg { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important; }

#cbti-w3-d2-root .bsm-btn-primary { padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }

/* Success Block */
#cbti-w3-d2-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w3-d2-root .w3d2-protocol-info { grid-template-columns: 1fr !important; }
    #cbti-w3-d2-root .w3d2-options-grid { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-flex-1 { flex:1; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px { margin-bottom: 16px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day3.css ===== */

/* ==========================================================================
   GLASS ARMOR & THEME OVERRIDES FOR DAY 3
   ========================================================================== */



/* Base structural classes & Layout Constraints */
#bsm-w3d3-root {
    display: block !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
}

#bsm-w3d3-root .bsm-block:not(.bsm-hidden):not(.pg-cbti-module-week3-day3-i024):not(.w3d3-anchor-wrap):not(.w3d3-tile-body):not(.w3d3-timeline-connector):not(.w3d3-timeline-content) { display: block !important; }
#bsm-w3d3-root .bsm-flex { display: flex !important; }
#bsm-w3d3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }

/* Absolute Typography Locks */
#bsm-w3d3-root * {
    font-family: inherit !important;
    box-sizing: border-box !important;
}

#bsm-w3d3-root p,
#bsm-w3d3-root span,
#bsm-w3d3-root h1,
#bsm-w3d3-root h2,
#bsm-w3d3-root h3 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* Glass Panels */
#bsm-w3d3-root .w3d3-panel {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-w3d3-root .w3d3-glass-inner {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important;
}

#bsm-w3d3-root .w3d3-title-lg {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 8px !important;
}

#bsm-w3d3-root .w3d3-text-muted {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
}

/* Header & Progress */
#bsm-w3d3-root .w3d3-header {
    align-items: center !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
}

#bsm-w3d3-root .w3d3-back-btn {
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    transition: all 0.2s ease !important;
}

#bsm-w3d3-root .w3d3-day-badge {
    height: 48px !important;
    width: 48px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-w3d3-root .w3d3-progress-track {
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    margin-top: 12px !important;
    overflow: hidden !important;
}

#bsm-w3d3-root .w3d3-progress-fill {
    height: 100% !important;
    width: 0% !important;
    transition: width 0.4s ease !important;
}

/* Section Completion Banners */
#bsm-w3d3-root .w3d3-section-complete-banner {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important;
    margin-top: 20px !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
}


/* Video Frame */
#bsm-w3d3-root .w3d3-icon-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}

#bsm-w3d3-root .w3d3-video-frame {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    height: 320px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#bsm-w3d3-root .w3d3-play-btn-large {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    padding-left: 6px !important;
    transition: transform 0.2s ease !important;
}

#bsm-w3d3-root .w3d3-video-frame:hover .w3d3-play-btn-large {
    transform: scale(1.05) !important;
}

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Numbered Section Header */
#bsm-w3d3-root .w3d3-section-head {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

#bsm-w3d3-root .w3d3-section-num {
    height: 32px !important;
    width: 32px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}

#bsm-w3d3-root .w3d3-section-title {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex: 1 !important;
}

#bsm-w3d3-root .w3d3-check-icon {
    display: none !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
}

/* Interactive Tiles */
#bsm-w3d3-root .w3d3-tile {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#bsm-w3d3-root .w3d3-tile-top {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#bsm-w3d3-root .w3d3-tile-left {
    align-items: center !important;
    gap: 12px !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
}

#bsm-w3d3-root .w3d3-tile-action {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#bsm-w3d3-root .w3d3-tile-body {
    display: none !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
}
#bsm-w3d3-root .w3d3-tile.revealed .w3d3-tile-body {
    display: block !important;
}

/* Carousels */
#bsm-w3d3-root .w3d3-carousel-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    min-height: 180px !important;
}

#bsm-w3d3-root .w3d3-carousel-step-badge {
    height: 32px !important;
    width: 32px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-right: 12px !important;
}

#bsm-w3d3-root .w3d3-carousel-controls {
    align-items: center !important;
    justify-content: space-between !important;
}

#bsm-w3d3-root .w3d3-nav-btn {
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}
#bsm-w3d3-root .w3d3-nav-btn:disabled {
    opacity: var(--bsm3-opacity-medium) !important;
    cursor: not-allowed !important;
}

#bsm-w3d3-root .w3d3-dots {
    align-items: center !important;
    gap: 6px !important;
}

#bsm-w3d3-root .w3d3-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}
#bsm-w3d3-root .w3d3-dot.active {
    width: 20px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
}

/* Accordion Timeline */
#bsm-w3d3-root .w3d3-timeline-item {
    margin-bottom: 12px !important;
}
#bsm-w3d3-root .w3d3-timeline-btn {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 16px !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}
#bsm-w3d3-root .w3d3-timeline-num {
    height: 28px !important;
    width: 28px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}
#bsm-w3d3-root .w3d3-timeline-content {
    display: none !important;
    padding: 16px !important;
    margin-top: 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}
#bsm-w3d3-root .w3d3-timeline-item.active .w3d3-timeline-content {
    display: block !important;
}
#bsm-w3d3-root .w3d3-timeline-connector {
    width: 2px !important;
    height: 20px !important;
    margin-left: 29px !important;
    margin-top: 8px !important;
    display: none !important;
}

/* Quiz Buttons */
#bsm-w3d3-root .w3d3-quiz-row {
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
}
#bsm-w3d3-root .w3d3-toggle-group {
    align-items: center !important;
    gap: 8px !important;
}
#bsm-w3d3-root .w3d3-toggle-btn {
    padding: 6px 16px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}

/* Wake Anchor */
#bsm-w3d3-root .w3d3-anchor-wrap {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 8px !important;
    transition: all 0.3s ease !important;
}
#bsm-w3d3-root .w3d3-time-input {
    font-family: inherit !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    padding: 16px 32px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}
#bsm-w3d3-root .w3d3-time-input:disabled {
    opacity: var(--bsm3-opacity-high) !important;
    cursor: not-allowed !important;
}
#bsm-w3d3-root .w3d3-btn-anchor {
    padding: 16px 32px !important;
    border-radius: var(--bsm3-radius-pills)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
#bsm-w3d3-root .w3d3-btn-anchor:hover { transform: translateY(-2px) !important; }
#bsm-w3d3-root .w3d3-btn-anchor.is-locked {
    pointer-events: none !important;
}

/* Action Button */
#bsm-w3d3-root .w3d3-action-btn {
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    transition: opacity 0.3s ease !important;
}
#bsm-w3d3-root .w3d3-action-btn:disabled {
    opacity: var(--bsm3-opacity-medium) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Info Box */
#bsm-w3d3-root .w3d3-info-box {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}
#bsm-w3d3-root .w3d3-info-list {
    margin-top: 12px !important;
    padding-left: 12px !important;
}
#bsm-w3d3-root .w3d3-info-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
}
#bsm-w3d3-root .w3d3-info-bullet {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-13px-font-weight-400 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.u-margin-top-8px-2 { margin-top: 8px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-d4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w3-d4-root h1, 
#bsm-app-root #spa-stage #cbti-w3-d4-root h2,
#bsm-app-root #spa-stage #cbti-w3-d4-root h3, 
#bsm-app-root #spa-stage #cbti-w3-d4-root h4,
#bsm-app-root #spa-stage #cbti-w3-d4-root p, 
#bsm-app-root #spa-stage #cbti-w3-d4-root span,
#bsm-app-root #spa-stage #cbti-w3-d4-root label, 
#bsm-app-root #spa-stage #cbti-w3-d4-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w3-d4-root .bsm-block:not(.bsm-hidden):not(.w3d4-acc-container):not(.w3d4-acc-content):not(.w3d4-hygiene-body):not(.w3d4-hygiene-list):not(.w3d4-match-list):not(.w3d4-match-zones):not(.w3d4-option-btn):not(.w3d4-options-grid):not(.w3d4-routine-step):not(.w3d4-step-num):not(.w3d4-summary-card):not(.w3d4-summary-item):not(.w3d4-summary-title):not(.w3d4-where-card):not(.w3d4-where-grid) { display: block !important; }
#cbti-w3-d4-root .bsm-flex { display: flex !important; }
#cbti-w3-d4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-d4-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w3-d4-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#cbti-w3-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w3-d4-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w3-d4-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w3-d4-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }

/* Progress Bar */
#cbti-w3-d4-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w3-d4-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#cbti-w3-d4-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Placeholder */
#cbti-w3-d4-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w3-d4-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

.w3d4-acc-row.is-open .w3d4-acc-content { display: block !important; }
.w3d4-hygiene-item.is-open .w3d4-hygiene-chevron { transform: rotate(180deg) !important; }
.w3d4-hygiene-item.is-open .w3d4-hygiene-body { display: block !important; }

.w3d4-match-row.is-placed-active {
    pointer-events: none !important;
}

.w3d4-match-row.is-placed-passive {
    pointer-events: none !important;
}

#cbti-w3-d4-root .w3d4-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* Custom "Other" Input */
#cbti-w3-d4-root .w3d4-custom-input-wrap {
    display: none !important;
    width: 100% !important;
    margin-top: 12px !important;
    animation: bsmFadeIn 0.3s ease forwards !important;
    grid-column: span 2 !important;
}

/* ==========================================================================
   WHERE WILL YOU WIND DOWN (Grid)
   ========================================================================== */
#cbti-w3-d4-root .w3d4-where-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

/* Feedback & Primary Buttons */
#cbti-w3-d4-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}

#cbti-w3-d4-root .bsm-btn-primary {
    padding: 16px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}

/* Success Block */
#cbti-w3-d4-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: bsmFadeIn 0.6s ease forwards !important;
}@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w3-d4-root .w3d4-options-grid { grid-template-columns: 1fr !important; }
    #cbti-w3-d4-root .w3d4-where-grid { grid-template-columns: 1fr !important; }
    #cbti-w3-d4-root .w3d4-custom-input-wrap { grid-column: span 1 !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px { margin-bottom: 16px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-d5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w3-d5-root h1,
#bsm-app-root #spa-stage #cbti-w3-d5-root h2,
#bsm-app-root #spa-stage #cbti-w3-d5-root h3,
#bsm-app-root #spa-stage #cbti-w3-d5-root h4,
#bsm-app-root #spa-stage #cbti-w3-d5-root p,
#bsm-app-root #spa-stage #cbti-w3-d5-root span,
#bsm-app-root #spa-stage #cbti-w3-d5-root label,
#bsm-app-root #spa-stage #cbti-w3-d5-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w3-d5-root .bsm-block:not(.bsm-hidden):not(.w3d5-bullet-item):not(.w3d5-bullet-list):not(.w3d5-info-dark-title):not(.w3d5-match-list):not(.w3d5-match-zones):not(.w3d5-options-stack):not(.w3d5-shift-worker-box):not(.w3d5-stack-btn):not(.w3d5-switch-stage) { display: block !important; }
#cbti-w3-d5-root .bsm-flex { display: flex !important; }
#cbti-w3-d5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-d5-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w3-d5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards */
#cbti-w3-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Header Elements */
#cbti-w3-d5-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w3-d5-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w3-d5-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }
#cbti-w3-d5-root .bsm-slide-text { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.6 !important; margin-bottom: 24px !important; margin-top: 16px !important; }

/* Progress Bar */
#cbti-w3-d5-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w3-d5-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#cbti-w3-d5-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


/* Video Placeholder */
#cbti-w3-d5-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w3-d5-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

.w3d5-switch-stage.is-dim .w3d5-toggle-pill {
    transform: translateX(100%) !important;
}

.w3d5-switch-stage.is-dim .w3d5-meter-label { opacity: 1 !important; }

.w3d5-switch-stage.is-dim .w3d5-meter-fill { width: 95% !important; }

/* ==========================================================================
   DISRUPTOR SORTING GAME
   ========================================================================== */
#cbti-w3-d5-root .w3d5-match-zones {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

.w3d5-match-row.is-placed-systemic {
    pointer-events: none !important;
}

.w3d5-match-row.is-placed-habitual {
    pointer-events: none !important;
}
.w3d5-bullet-item::before { content: "•"; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1 !important; }

/* Feedback & Primary Buttons */
#cbti-w3-d5-root .bsm-feedback-msg { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important; }

#cbti-w3-d5-root .bsm-btn-primary { padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }

/* Success Block */
#cbti-w3-d5-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    #cbti-w3-d5-root .w3d5-match-zones { grid-template-columns: 1fr !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-d6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w3-d6-root h1,
#bsm-app-root #spa-stage #cbti-w3-d6-root h2,
#bsm-app-root #spa-stage #cbti-w3-d6-root h3,
#bsm-app-root #spa-stage #cbti-w3-d6-root h4,
#bsm-app-root #spa-stage #cbti-w3-d6-root p,
#bsm-app-root #spa-stage #cbti-w3-d6-root span,
#bsm-app-root #spa-stage #cbti-w3-d6-root label,
#bsm-app-root #spa-stage #cbti-w3-d6-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w3-d6-root .bsm-block:not(.bsm-hidden):not(.bsm-success-block):not(.u-display-none-2):not(.w3d6-badge-lock):not(.w3d6-badge-rec):not(.w3d6-bullet-item):not(.w3d6-bullet-list):not(.w3d6-check-container):not(.w3d6-check-row):not(.w3d6-eff-result):not(.w3d6-flashcards-grid):not(.w3d6-info-title2):not(.w3d6-personal-msg):not(.w3d6-summary-title) { display: block !important; }
#cbti-w3-d6-root .bsm-flex { display: flex !important; }
#cbti-w3-d6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-d6-root .bsm-text-center { text-align: center !important; }

#cbti-w3-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important; padding: 8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-d6-root .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#cbti-w3-d6-root .bsm-icon-circle-small { width: 36px !important; height: 36px !important; border-radius: 50% !important; justify-content: center !important; margin-right: 16px !important; flex-shrink: 0 !important; }

#cbti-w3-d6-root .bsm-title-large { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
#cbti-w3-d6-root .bsm-meta-text { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }
#cbti-w3-d6-root .bsm-slide-text { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.6 !important; margin-bottom: 24px !important; margin-top: 16px !important; }

#cbti-w3-d6-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#cbti-w3-d6-root .bsm-progress-track { width: 100% !important; height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; }
#cbti-w3-d6-root .bsm-progress-fill { height: 100% !important; width: 0%; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.5s ease !important; }


#cbti-w3-d6-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }
.bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w3-d6-root .bsm-play-btn { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}





.w3d6-flip-card.is-flipped { transform: rotateY(180deg) !important; }
.w3d6-check-row.locked-commit { cursor: default !important; pointer-events: none !important; }
.w3d6-bullet-item::before { content: "•"; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1 !important; }


#cbti-w3-d6-root .bsm-feedback-msg { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important; }

#cbti-w3-d6-root .bsm-btn-primary { padding: 16px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }

#cbti-w3-d6-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: bsmFadeIn 0.6s ease forwards !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-8px-3 { margin-bottom:8px!important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week3_day7.css ===== */

/* ==========================================================================
   GLASS ARMOR & THEME OVERRIDES FOR DAY 7
   ========================================================================== */



/* Base structural classes & Layout Constraints */
#bsm-w3d7-root {
    display: block !important;
    max-width: var(--bsm3-width-wide)!important; 
    margin: 0 auto !important;
    padding: 20px !important;
}

#bsm-w3d7-root .bsm-block:not(.bsm-hidden):not(.pg-cbti-module-week3-day7-i012) { display: block !important; }
#bsm-w3d7-root .bsm-flex { display: flex !important; }
#bsm-w3d7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }

/* Absolute Typography Locks */
#bsm-w3d7-root * {
    font-family: inherit !important;
    box-sizing: border-box !important;
}

#bsm-w3d7-root p,
#bsm-w3d7-root span,
#bsm-w3d7-root h1,
#bsm-w3d7-root h2,
#bsm-w3d7-root h3 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* Glass Panels */
#bsm-w3d7-root .w3d7-panel {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-w3d7-root .w3d7-title-lg {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 8px !important;
}

#bsm-w3d7-root .w3d7-text-muted {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
}

/* Header & Progress */
#bsm-w3d7-root .w3d7-header {
    align-items: center !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
}

#bsm-w3d7-root .w3d7-back-btn {
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    transition: all 0.2s ease !important;
}

#bsm-w3d7-root .w3d7-day-badge {
    height: 48px !important;
    width: 48px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-w3d7-root .w3d7-progress-track {
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    margin-top: 12px !important;
    overflow: hidden !important;
}

#bsm-w3d7-root .w3d7-progress-fill {
    height: 100% !important;
    width: 0% !important;
    transition: width 0.4s ease !important;
}

/* Quiz Specific Styling */
#bsm-w3d7-root .w3d7-quiz-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

#bsm-w3d7-root .w3d7-quiz-qnum {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 8px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
}

#bsm-w3d7-root .w3d7-quiz-question {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 20px !important;
}

#bsm-w3d7-root .w3d7-quiz-options {
    gap: 12px !important;
}

#bsm-w3d7-root .w3d7-option-btn {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 14px 16px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* The Empty Circle before clicking (Forced visibility) */
#bsm-w3d7-root .w3d7-option-indicator {
    width: 22px !important;
    height: 22px !important; 
    border-radius: 50% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    opacity: var(--bsm3-opacity-high) !important; /* Increased opacity for empty state visibility */
}

/* Correct Answer State */
#bsm-w3d7-root .w3d7-option-btn.correct .w3d7-option-indicator {
    opacity: 1 !important;
}

/* Wrong Answer State */
#bsm-w3d7-root .w3d7-option-btn.wrong {
    opacity: var(--bsm3-opacity-high) !important;
}
#bsm-w3d7-root .w3d7-option-btn.wrong .w3d7-option-indicator {
    opacity: 1 !important;
}

/* Explanation Box (Reveals when answered) */
#bsm-w3d7-root .w3d7-quiz-explanation {
    display: none !important;
    margin-top: 20px !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
}

/* Disabled State after answering */
#bsm-w3d7-root .w3d7-quiz-card.answered .w3d7-option-btn {
    pointer-events: none !important;
}
#bsm-w3d7-root .w3d7-quiz-card.answered .w3d7-option-btn:not(.correct):not(.wrong) {
    opacity: var(--bsm3-opacity-medium) !important;
}

/* Commitment Section */
#bsm-w3d7-root .w3d7-commitment-box {
    display: none !important; 
    margin-top: 32px !important;
    padding-top: 32px !important;
}

#bsm-w3d7-root .w3d7-commitment-row {
    border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
    gap: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#bsm-w3d7-root .w3d7-checkbox {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Action Button */
#bsm-w3d7-root .w3d7-action-btn {
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    transition: opacity 0.3s ease !important;
}
#bsm-w3d7-root .w3d7-action-btn:disabled {
    opacity: var(--bsm3-opacity-medium) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d1-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d1-root h2,
#bsm-app-root #spa-stage #cbti-w4-d1-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d1-root h4,
#bsm-app-root #spa-stage #cbti-w4-d1-root p, 
#bsm-app-root #spa-stage #cbti-w4-d1-root span,
#bsm-app-root #spa-stage #cbti-w4-d1-root label, 
#bsm-app-root #spa-stage #cbti-w4-d1-root strong,
#bsm-app-root #spa-stage #cbti-w4-d1-root input,
#bsm-app-root #spa-stage #cbti-w4-d1-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d1-root .bsm-block:not(.bsm-card-grid):not(.bsm-flip-back):not(.bsm-flip-front):not(.bsm-hidden) { display: block !important; }
#cbti-w4-d1-root .bsm-flex { display: flex !important; }
#cbti-w4-d1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Header & Progress Cards */
#cbti-w4-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}



/* Typography */
#cbti-w4-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; line-height: 1.3 !important; }


/* Interactive Video */
#cbti-w4-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}
.bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

.bsm-video-box.watched { cursor: default !important; }
.bsm-video-box.watched .bsm-video-btn svg { display: none !important; }
.bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }





/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w4-d1-root .bsm-section {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 32px !important;
}

#cbti-w4-d1-root .bsm-step-header { margin-bottom: 24px !important; display: flex !important; align-items: center !important; }


/* Flip Cards Grid */
#cbti-w4-d1-root .bsm-card-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
@media (max-width: 900px) { #cbti-w4-d1-root .bsm-card-grid { grid-template-columns: 1fr !important; } }

/* 3D Flip Card Architecture */
#cbti-w4-d1-root .bsm-flip-container { perspective: 1000px !important; width: 100% !important; height: 180px !important; cursor: pointer !important; }
.bsm-flip-container.is-flipped .bsm-flip-inner { transform: rotateY(180deg) !important; }
#cbti-w4-d1-root .bsm-flip-front,
#cbti-w4-d1-root .bsm-flip-back {
    width: 100% !important; height: 100% !important; position: absolute !important;
    backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important;
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px !important; display: flex !important;
    flex-direction: column !important; justify-content: center !important;
}
#cbti-w4-d1-root .bsm-flip-back { transform: rotateY(180deg) !important; }
#cbti-w4-d1-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important; }
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d1-root .bsm-tag { padding: 6px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: all 0.2s !important; }


/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-width-0pc { width: 0%; }
.u-margin-bottom-4px { margin-bottom:4px !important; }
.u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.u-margin-top-32px { margin-top: 32px !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-color-var-cat-color { margin-bottom:0 !important; }
.u-font-size-12px-margin-top-12px { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-top:12px !important; }
.u-margin-bottom-32px-2 { margin-bottom: 32px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d2-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d2-root h2,
#bsm-app-root #spa-stage #cbti-w4-d2-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d2-root p, 
#bsm-app-root #spa-stage #cbti-w4-d2-root span,
#bsm-app-root #spa-stage #cbti-w4-d2-root strong,
#bsm-app-root #spa-stage #cbti-w4-d2-root input,
#bsm-app-root #spa-stage #cbti-w4-d2-root button,
#bsm-app-root #spa-stage #cbti-w4-d2-root textarea {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d2-root .bsm-block:not(.bsm-hidden):not(.bsm-chip-container):not(.bsm-cycle-wrap) { display: block !important; }
#cbti-w4-d2-root .bsm-flex { display: flex !important; }
#cbti-w4-d2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d2-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Header & Progress Cards */
#cbti-w4-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Sections */
#cbti-w4-d2-root .bsm-section {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important;
}
#cbti-w4-d2-root .bsm-step-header { margin-bottom: 24px !important; display: flex !important; align-items: center !important; }


/* Buttons */
#cbti-w4-d2-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d2-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}

#cbti-w4-d2-root .bsm-btn-bypass {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 10px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important;
    display: inline-block !important; margin-bottom: 24px !important; transition: all 0.2s !important;
}

/* Interactive Elements */
#cbti-w4-d2-root .bsm-insight-box {
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-top: 16px !important;
}

#cbti-w4-d2-root .bsm-chip {
    padding: 8px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    cursor: pointer !important;
}



/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-margin-bottom-8px { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom:8px !important; }
.u-margin-top-16px-2 { margin-top: 16px !important; }
.u-margin-bottom-0-font-size-14px { margin-bottom:0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day3.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 3
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d3-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d3-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d3-root h2,
#bsm-app-root #spa-stage #cbti-w4-d3-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d3-root p, 
#bsm-app-root #spa-stage #cbti-w4-d3-root span,
#bsm-app-root #spa-stage #cbti-w4-d3-root strong,
#bsm-app-root #spa-stage #cbti-w4-d3-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d3-root .bsm-block:not(.bsm-chip-grid):not(.bsm-grounding-card):not(.bsm-hidden):not(.bsm-relax-content):not(.bsm-relax-grid):not(.bsm-relax-title):not(.bsm-timer-circle):not(.bsm-timer-wrap):not(.bsm-why-works-title) { display: block !important; }
#cbti-w4-d3-root .bsm-flex { display: flex !important; }
#cbti-w4-d3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d3-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w4-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w4-d3-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w4-d3-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w4-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w4-d3-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w4-d3-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d3-root .bsm-btn-bypass {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 10px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important;
    display: inline-block !important; margin-bottom: 24px !important; transition: all 0.2s !important; width: 100% !important; text-align: center !important;
}


#cbti-w4-d3-root .bsm-btn-suite {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 20px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-top: 16px !important;
}



#cbti-w4-d3-root .bsm-chip {
    padding: 12px 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}


/* Active vs Passive Relaxation Cards */
#cbti-w4-d3-root .bsm-relax-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 24px 0 !important; }
@media(max-width: 900px) { #cbti-w4-d3-root .bsm-relax-grid { grid-template-columns: 1fr !important; } }

.bsm-relax-card.open .bsm-relax-content { display: block !important; }



#cbti-w4-d3-root .bsm-timer-circle {
    width: 120px !important; height: 120px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 24px !important; transition: all 0.3s ease !important;
}
.bsm-timer-circle.state-tense { transform: scale(0.95) !important; }
.bsm-timer-circle.state-relax { transform: scale(1.05) !important; }


/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-700 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.u-font-size-14px-padding-10px-0-border-top { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; padding: 10px 0 !important; }
.u-font-size-13px-margin-0 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin:0 !important; }
.u-margin-0-font-size-12px-text-transform-u { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize; letter-spacing: 1px; }
.u-margin-0-0-16px-0 { margin: 0 0 16px 0 !important; }
.u-margin-bottom-20px-3 { margin-bottom: 20px !important; }
.u-font-size-40px-font-weight-800 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d4-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d4-root h2,
#bsm-app-root #spa-stage #cbti-w4-d4-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d4-root p, 
#bsm-app-root #spa-stage #cbti-w4-d4-root span,
#bsm-app-root #spa-stage #cbti-w4-d4-root strong,
#bsm-app-root #spa-stage #cbti-w4-d4-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d4-root .bsm-block:not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-sort-btns):not(.bsm-sort-feedback):not(.bsm-sort-grid):not(.bsm-sort-item):not(.bsm-why-works-title) { display: block !important; }
#cbti-w4-d4-root .bsm-flex { display: flex !important; }
#cbti-w4-d4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d4-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w4-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d4-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }


/* Educational Callouts */
#cbti-w4-d4-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w4-d4-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w4-d4-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w4-d4-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w4-d4-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d4-root .bsm-btn-bypass {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 10px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important;
    display: inline-block !important; margin-bottom: 24px !important; transition: all 0.2s !important; width: 100% !important; text-align: center !important;
}
#cbti-w4-d4-root .bsm-chip {
    padding: 12px 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}

.bsm-chip-suggested:hover { opacity: var(--bsm3-opacity-high) !important; }


/* Sorting Game */
#cbti-w4-d4-root .bsm-sort-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 24px !important; }
@media(max-width: 900px) { #cbti-w4-d4-root .bsm-sort-grid { grid-template-columns: 1fr !important; } }

/* New Interactive States for Buttons */



#cbti-w4-d4-root .bsm-sort-feedback {
    margin-top: 12px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; padding: 12px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}
.bsm-sort-feedback.correct { display: block !important; }
.bsm-sort-feedback.incorrect { display: block !important; }



/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d5-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d5-root h2,
#bsm-app-root #spa-stage #cbti-w4-d5-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d5-root p, 
#bsm-app-root #spa-stage #cbti-w4-d5-root span,
#bsm-app-root #spa-stage #cbti-w4-d5-root strong,
#bsm-app-root #spa-stage #cbti-w4-d5-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d5-root .bsm-block:not(.bsm-act-step):not(.bsm-act-wrap):not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-quiz-feedback):not(.bsm-quiz-wrap):not(.bsm-why-works-title) { display: block !important; }
#cbti-w4-d5-root .bsm-flex { display: flex !important; }
#cbti-w4-d5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d5-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d5-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w4-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d5-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w4-d5-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w4-d5-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w4-d5-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w4-d5-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w4-d5-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d5-root .bsm-btn-bypass {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 10px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important;
    display: inline-block !important; margin-bottom: 24px !important; transition: all 0.2s !important; width: 100% !important; text-align: center !important;
}
.bsm-btn-quiz.correct { pointer-events: none !important; }
.bsm-btn-quiz.incorrect { opacity: var(--bsm3-opacity-medium) !important; }



.bsm-quiz-feedback.correct { display: block !important; }
.bsm-quiz-feedback.incorrect { display: block !important; }

.bsm-act-step.active { opacity: 1 !important; pointer-events: auto !important; }
.bsm-act-step.completed { opacity: var(--bsm3-opacity-high) !important; pointer-events: none !important; }

#cbti-w4-d5-root .bsm-chip {
    padding: 12px 16px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}
.bsm-chip.visited { opacity: var(--bsm3-opacity-medium) !important; }
.bsm-chip.visited::after { content: " ✓"; }



#cbti-w4-d5-root .bsm-btn-suite {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 20px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-top: 24px !important;
    transition: all 0.2s !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px !important; }
.u-font-size-16px-2 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.u-font-size-14px-margin-bottom-0 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom:0 !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d6-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d6-root h2,
#bsm-app-root #spa-stage #cbti-w4-d6-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d6-root p, 
#bsm-app-root #spa-stage #cbti-w4-d6-root span,
#bsm-app-root #spa-stage #cbti-w4-d6-root strong,
#bsm-app-root #spa-stage #cbti-w4-d6-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d6-root .bsm-block:not(.bsm-breathing-circle):not(.bsm-breathing-wrap):not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-sensory-content):not(.bsm-sensory-grid):not(.bsm-sensory-title):not(.bsm-why-works-title) { display: block !important; }
#cbti-w4-d6-root .bsm-flex { display: flex !important; }
#cbti-w4-d6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d6-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w4-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d6-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w4-d6-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w4-d6-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w4-d6-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w4-d6-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w4-d6-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w4-d6-root .bsm-chip {
    padding: 16px 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
    width: 100% !important; text-align: left !important; display: flex !important; align-items: center !important;
}

/* Sensory Reading Cards */
#cbti-w4-d6-root .bsm-sensory-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 16px !important; }
@media(max-width: 900px) { #cbti-w4-d6-root .bsm-sensory-grid { grid-template-columns: 1fr !important; } }

.bsm-sensory-card.open .bsm-sensory-content { display: block !important; }
.bsm-sensory-card.open { cursor: default !important; }


#cbti-w4-d6-root .bsm-btn-suite {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 20px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-top: 24px !important;
    transition: all 0.2s !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-20px-margin-right-12px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-right:12px; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week4_day7.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 7
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-d7-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-d7-root h1, 
#bsm-app-root #spa-stage #cbti-w4-d7-root h2,
#bsm-app-root #spa-stage #cbti-w4-d7-root h3, 
#bsm-app-root #spa-stage #cbti-w4-d7-root p, 
#bsm-app-root #spa-stage #cbti-w4-d7-root span,
#bsm-app-root #spa-stage #cbti-w4-d7-root strong,
#bsm-app-root #spa-stage #cbti-w4-d7-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-d7-root .bsm-block:not(.bsm-hidden) { display: block !important; }
#cbti-w4-d7-root .bsm-flex { display: flex !important; }
#cbti-w4-d7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-d7-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w4-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w4-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Buttons */
#cbti-w4-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }


.bsm-quiz-option.correct { pointer-events: none !important;
}
.bsm-quiz-option.correct .bsm-quiz-icon::after {
    content: "✓" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

.bsm-quiz-option.incorrect { pointer-events: none !important; opacity: var(--bsm3-opacity-high) !important;
}
.bsm-quiz-option.incorrect .bsm-quiz-icon::after {
    content: "✕" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}
.bsm-quiz-option.locked { pointer-events: none !important; opacity: var(--bsm3-opacity-medium) !important; }




.bsm-quiz-explanation.show { display: block !important; animation: fadeIn 0.3s ease !important; }@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px !important; }
.u-margin-top-32px-padding-bottom-32px { margin-top: 32px !important; padding-bottom: 32px !important; }
.u-margin-bottom-16px-font-size-18px-font-w { margin-bottom: 16px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d1-root h1,
#bsm-app-root #spa-stage #cbti-w5-d1-root h2,
#bsm-app-root #spa-stage #cbti-w5-d1-root h3,
#bsm-app-root #spa-stage #cbti-w5-d1-root p,
#bsm-app-root #spa-stage #cbti-w5-d1-root span,
#bsm-app-root #spa-stage #cbti-w5-d1-root strong,
#bsm-app-root #spa-stage #cbti-w5-d1-root input,
#bsm-app-root #spa-stage #cbti-w5-d1-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d1-root .bsm-block:not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-reveal-box):not(.bsm-timer-circle):not(.bsm-timer-wrap):not(.bsm-why-works-title) { display: block !important; }
#cbti-w5-d1-root .bsm-flex { display: flex !important; }
#cbti-w5-d1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d1-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; line-height: 1.3 !important; }

/* Educational Callouts */
#cbti-w5-d1-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w5-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w5-d1-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d1-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d1-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d1-root .bsm-btn-bypass {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 10px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important;
    display: inline-block !important; margin-bottom: 24px !important; transition: all 0.2s !important; width: 100% !important; text-align: center !important;
}

#cbti-w5-d1-root .bsm-chip {
    padding: 12px 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}
#cbti-w5-d1-root .bsm-timer-circle {
    width: 120px !important; height: 120px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 24px !important;
}



.bsm-reveal-box.show { display: block !important; }

/* Tools Reminder */
#cbti-w5-d1-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}


/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-14px-color-var-diary-text-mute-2 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d2-root h1,
#bsm-app-root #spa-stage #cbti-w5-d2-root h2,
#bsm-app-root #spa-stage #cbti-w5-d2-root h3,
#bsm-app-root #spa-stage #cbti-w5-d2-root p,
#bsm-app-root #spa-stage #cbti-w5-d2-root span,
#bsm-app-root #spa-stage #cbti-w5-d2-root strong,
#bsm-app-root #spa-stage #cbti-w5-d2-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d2-root .bsm-block:not(.bsm-audit-content):not(.bsm-audit-grid):not(.bsm-audit-title):not(.bsm-hidden):not(.bsm-why-works-title):not(.w5d2-slide) { display: block !important; }
#cbti-w5-d2-root .bsm-flex { display: flex !important; }
#cbti-w5-d2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d2-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w5-d2-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w5-d2-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w5-d2-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d2-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d2-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
.bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
#cbti-w5-d2-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

.w5d2-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }

.w5d2-slide.active { display: block !important; }
.w5d2-reveal-btn:hover { transform: translateY(-2px) !important; }
.w5d2-reveal-btn svg { width: 18px !important; height: 18px !important; }

/* Audit Cards (click to reveal tip) */
#cbti-w5-d2-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 16px !important; }
#cbti-w5-d2-root .bsm-audit-card { border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px !important; cursor: pointer !important; transition: all 0.3s ease !important;
}

.bsm-audit-card.open .bsm-audit-content { display: block !important; }


/* Tools Reminder */
#cbti-w5-d2-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-4px-2 { margin-top: 4px !important; }
.u-opacity-0-3-pointer-events-none { opacity:var(--bsm3-opacity-low); pointer-events:none; }
.u-cursor-pointer-width-fit-content { cursor:pointer; width:fit-content; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day3.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 3
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d3-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d3-root h1,
#bsm-app-root #spa-stage #cbti-w5-d3-root h2,
#bsm-app-root #spa-stage #cbti-w5-d3-root h3,
#bsm-app-root #spa-stage #cbti-w5-d3-root p,
#bsm-app-root #spa-stage #cbti-w5-d3-root span,
#bsm-app-root #spa-stage #cbti-w5-d3-root strong,
#bsm-app-root #spa-stage #cbti-w5-d3-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d3-root .bsm-block:not(.bsm-hidden):not(.bsm-rule-grid) { display: block !important; }
#cbti-w5-d3-root .bsm-flex { display: flex !important; }
#cbti-w5-d3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d3-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Sections */
#cbti-w5-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d3-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d3-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d3-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}

/* Sleep Window Check-In */
#cbti-w5-d3-root .bsm-why-works {
    padding: 14px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important;
}


/* Tools Reminder */
#cbti-w5-d3-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d4-root h1,
#bsm-app-root #spa-stage #cbti-w5-d4-root h2,
#bsm-app-root #spa-stage #cbti-w5-d4-root h3,
#bsm-app-root #spa-stage #cbti-w5-d4-root p,
#bsm-app-root #spa-stage #cbti-w5-d4-root span,
#bsm-app-root #spa-stage #cbti-w5-d4-root strong,
#bsm-app-root #spa-stage #cbti-w5-d4-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d4-root .bsm-block:not(.bsm-hidden):not(.bsm-why-works-title):not(.w5d4-slide) { display: block !important; }
#cbti-w5-d4-root .bsm-flex { display: flex !important; }
#cbti-w5-d4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d4-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d4-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w5-d4-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w5-d4-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w5-d4-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d4-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d4-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
.bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }
#cbti-w5-d4-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

.bsm-myth-explain.show { display: block !important; }


.w5d4-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }

.w5d4-slide.active { display: block !important; }
.w5d4-reveal-btn:hover { transform: translateY(-2px) !important; }
.w5d4-reveal-btn svg { width: 18px !important; height: 18px !important; }

/* Tools Reminder */
#cbti-w5-d4-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d5-root h1,
#bsm-app-root #spa-stage #cbti-w5-d5-root h2,
#bsm-app-root #spa-stage #cbti-w5-d5-root h3,
#bsm-app-root #spa-stage #cbti-w5-d5-root p,
#bsm-app-root #spa-stage #cbti-w5-d5-root span,
#bsm-app-root #spa-stage #cbti-w5-d5-root strong,
#bsm-app-root #spa-stage #cbti-w5-d5-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d5-root .bsm-block:not(.bsm-compare-grid):not(.bsm-hidden):not(.bsm-reset-row):not(.bsm-why-works-title) { display: block !important; }
#cbti-w5-d5-root .bsm-flex { display: flex !important; }
#cbti-w5-d5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d5-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d5-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d5-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w5-d5-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w5-d5-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w5-d5-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d5-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d5-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
#cbti-w5-d5-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Blip vs Trend compare */
#cbti-w5-d5-root .bsm-compare-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 !important; }
@media(max-width: 900px) { #cbti-w5-d5-root .bsm-compare-grid { grid-template-columns: 1fr !important; } }
#cbti-w5-d5-root .bsm-compare-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; }
#cbti-w5-d5-root .bsm-scenario-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-style: italic !important; margin-bottom: 14px !important; }
.bsm-btn-scenario.picked-other { opacity: var(--bsm3-opacity-medium) !important; }


#cbti-w5-d5-root .bsm-scenario-feedback {
    margin-top: 12px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; padding: 10px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}
.bsm-scenario-feedback.show { display: block !important; }


/* Tools Reminder */
#cbti-w5-d5-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d6-root h1,
#bsm-app-root #spa-stage #cbti-w5-d6-root h2,
#bsm-app-root #spa-stage #cbti-w5-d6-root h3,
#bsm-app-root #spa-stage #cbti-w5-d6-root p,
#bsm-app-root #spa-stage #cbti-w5-d6-root span,
#bsm-app-root #spa-stage #cbti-w5-d6-root strong,
#bsm-app-root #spa-stage #cbti-w5-d6-root textarea,
#bsm-app-root #spa-stage #cbti-w5-d6-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d6-root .bsm-block:not(.bsm-closure-box):not(.bsm-hidden):not(.bsm-sc-row):not(.bsm-scenario-reveal):not(.bsm-why-works-title) { display: block !important; }
#cbti-w5-d6-root .bsm-flex { display: flex !important; }
#cbti-w5-d6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d6-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d6-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w5-d6-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w5-d6-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w5-d6-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w5-d6-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w5-d6-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
#cbti-w5-d6-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

.bsm-closure-box.show { display: block !important; }

#cbti-w5-d6-root .bsm-scenario-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-style: italic !important; margin-bottom: 14px !important; }

.bsm-scenario-reveal.show { display: block !important; }


/* Tools Reminder */
#cbti-w5-d6-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week5_day7.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 7
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-d7-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-d7-root h1,
#bsm-app-root #spa-stage #cbti-w5-d7-root h2,
#bsm-app-root #spa-stage #cbti-w5-d7-root h3,
#bsm-app-root #spa-stage #cbti-w5-d7-root p,
#bsm-app-root #spa-stage #cbti-w5-d7-root span,
#bsm-app-root #spa-stage #cbti-w5-d7-root strong,
#bsm-app-root #spa-stage #cbti-w5-d7-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-d7-root .bsm-block:not(.bsm-hidden) { display: block !important; }
#cbti-w5-d7-root .bsm-flex { display: flex !important; }
#cbti-w5-d7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-d7-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w5-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w5-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Buttons */
#cbti-w5-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
}

/* Tools Reminder */
#cbti-w5-d7-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day1.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 1
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d1-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w6-d1-root h1,
#bsm-app-root #spa-stage #cbti-w6-d1-root h2,
#bsm-app-root #spa-stage #cbti-w6-d1-root h3,
#bsm-app-root #spa-stage #cbti-w6-d1-root p,
#bsm-app-root #spa-stage #cbti-w6-d1-root span,
#bsm-app-root #spa-stage #cbti-w6-d1-root strong,
#bsm-app-root #spa-stage #cbti-w6-d1-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w6-d1-root .bsm-block:not(.bsm-chip-grid):not(.bsm-flip-back):not(.bsm-flip-front):not(.bsm-hidden):not(.bsm-recap-grid) { display: block !important; }
#cbti-w6-d1-root .bsm-flex { display: flex !important; }
#cbti-w6-d1-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d1-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w6-d1-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w6-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w6-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Interactive Video */
#cbti-w6-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w6-d1-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d1-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w6-d1-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Recap Cards (flip) */
#cbti-w6-d1-root .bsm-recap-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
@media (max-width: 900px) { #cbti-w6-d1-root .bsm-recap-grid { grid-template-columns: 1fr !important; } }
#cbti-w6-d1-root .bsm-flip-container { perspective: 1000px !important; width: 100% !important; height: 170px !important; cursor: pointer !important; }
#cbti-w6-d1-root .bsm-flip-front,
#cbti-w6-d1-root .bsm-flip-back {
    width: 100% !important; height: 100% !important; position: absolute !important;
    backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important;
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 18px !important; display: flex !important;
    flex-direction: column !important; justify-content: center !important;
}
#cbti-w6-d1-root .bsm-flip-back { transform: rotateY(180deg) !important; }

#cbti-w6-d1-root .bsm-chip {
    padding: 12px 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day2.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 2
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d2-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w6-d2-root h1,
#bsm-app-root #spa-stage #cbti-w6-d2-root h2,
#bsm-app-root #spa-stage #cbti-w6-d2-root h3,
#bsm-app-root #spa-stage #cbti-w6-d2-root p,
#bsm-app-root #spa-stage #cbti-w6-d2-root span,
#bsm-app-root #spa-stage #cbti-w6-d2-root strong,
#bsm-app-root #spa-stage #cbti-w6-d2-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w6-d2-root .bsm-block:not(.bsm-audit-content):not(.bsm-audit-grid):not(.bsm-audit-title):not(.bsm-hidden) { display: block !important; }
#cbti-w6-d2-root .bsm-flex { display: flex !important; }
#cbti-w6-d2-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d2-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w6-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w6-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w6-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w6-d2-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


/* Interactive Video */
#cbti-w6-d2-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w6-d2-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d2-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w6-d2-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
.bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
#cbti-w6-d2-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Audit cards (click to reveal) */
#cbti-w6-d2-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 16px !important; }
#cbti-w6-d2-root .bsm-audit-card { border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px !important; cursor: pointer !important; transition: all 0.3s ease !important;
}

/* Tools Reminder */
#cbti-w6-d2-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-0-margin-bottom-16px { margin-top:0 !important; margin-bottom: 16px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day3.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 3
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d3-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w6-d3-root h1,
#bsm-app-root #spa-stage #cbti-w6-d3-root h2,
#bsm-app-root #spa-stage #cbti-w6-d3-root h3,
#bsm-app-root #spa-stage #cbti-w6-d3-root p,
#bsm-app-root #spa-stage #cbti-w6-d3-root span,
#bsm-app-root #spa-stage #cbti-w6-d3-root strong,
#bsm-app-root #spa-stage #cbti-w6-d3-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w6-d3-root .bsm-block:not(.bsm-audit-grid):not(.bsm-compare-grid):not(.bsm-hidden):not(.bsm-p-row):not(.bsm-rule-grid):not(.bsm-why-works-title) { display: block !important; }
#cbti-w6-d3-root .bsm-flex:not(.bsm-audit-card) { display: flex !important; }
#cbti-w6-d3-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d3-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w6-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w6-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w6-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Educational Callouts */
#cbti-w6-d3-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}

/* Interactive Video */
#cbti-w6-d3-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






/* Sections */
#cbti-w6-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d3-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

/* Buttons */
#cbti-w6-d3-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
#cbti-w6-d3-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Lapse vs Relapse compare */
#cbti-w6-d3-root .bsm-compare-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 !important; }
#cbti-w6-d3-root .bsm-compare-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; }


/* Audit cards */
#cbti-w6-d3-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 16px !important; }
#cbti-w6-d3-root .bsm-audit-card { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 14px !important; cursor: pointer !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; gap: 12px !important;
}
.bsm-audit-card.checked .bsm-audit-check::after { content: "✓"; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

/* Tools Reminder */
#cbti-w6-d3-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day4.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 4
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d4-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w6-d4-root h1,
#bsm-app-root #spa-stage #cbti-w6-d4-root h2,
#bsm-app-root #spa-stage #cbti-w6-d4-root h3,
#bsm-app-root #spa-stage #cbti-w6-d4-root p,
#bsm-app-root #spa-stage #cbti-w6-d4-root span,
#bsm-app-root #spa-stage #cbti-w6-d4-root strong,
#bsm-app-root #spa-stage #cbti-w6-d4-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w6-d4-root .bsm-block:not(.bsm-catalog-grid):not(.bsm-hidden):not(.bsm-picker-grid):not(.bsm-scenario-options):not(.w6d4-tool-badge) { display: block !important; }
#cbti-w6-d4-root .bsm-flex { display: flex !important; }
#cbti-w6-d4-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d4-root .bsm-text-center { text-align: center !important; }

#cbti-w6-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#cbti-w6-d4-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d4-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


#cbti-w6-d4-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






#cbti-w6-d4-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d4-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

#cbti-w6-d4-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
.bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
#cbti-w6-d4-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

/* Scenario matcher */
#cbti-w6-d4-root .bsm-scenario-box { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important; margin-bottom: 16px !important;
}
#cbti-w6-d4-root .bsm-scenario-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 12px !important; }

.bsm-scenario-opt.best { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.bsm-scenario-opt.disabled { cursor: default !important; pointer-events: none !important; }
#cbti-w6-d4-root .bsm-scenario-feedback { font-size: var(--bsm3-text-body-use-on-reading-text) !important; margin-top: 10px !important; display: none; }

/* Tool catalog */
#cbti-w6-d4-root .bsm-catalog-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 16px !important; }
@media(max-width: 900px) { #cbti-w6-d4-root .bsm-catalog-grid { grid-template-columns: 1fr !important; } }


#cbti-w6-d4-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day5.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 5
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d5-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w6-d5-root h1,
#bsm-app-root #spa-stage #cbti-w6-d5-root h2,
#bsm-app-root #spa-stage #cbti-w6-d5-root h3,
#bsm-app-root #spa-stage #cbti-w6-d5-root p,
#bsm-app-root #spa-stage #cbti-w6-d5-root span,
#bsm-app-root #spa-stage #cbti-w6-d5-root strong,
#bsm-app-root #spa-stage #cbti-w6-d5-root button,
#bsm-app-root #spa-stage #cbti-w6-d5-root textarea {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w6-d5-root .bsm-block:not(.bsm-hidden):not(.bsm-commit-grid):not(.bsm-pillar-card):not(.bsm-pillar-grid):not(.bsm-why-works-title):not(.w6d5-tool-badge) { display: block !important; }
#cbti-w6-d5-root .bsm-flex { display: flex !important; }
#cbti-w6-d5-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d5-root .bsm-text-center { text-align: center !important; }

#cbti-w6-d5-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#cbti-w6-d5-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d5-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


#cbti-w6-d5-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






#cbti-w6-d5-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d5-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

#cbti-w6-d5-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
.bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
#cbti-w6-d5-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }
.bsm-pillar-card.acked .bsm-pillar-check::after { content: "✓"; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.bsm-commit-chip.selected .bsm-commit-check::after { content: "✓"; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.bsm-commit-custom::placeholder { opacity: var(--bsm3-opacity-high); }

#cbti-w6-d5-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day6.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 6
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d6-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



#bsm-app-root #spa-stage #cbti-w6-d6-root h1,
#bsm-app-root #spa-stage #cbti-w6-d6-root h2,
#bsm-app-root #spa-stage #cbti-w6-d6-root h3,
#bsm-app-root #spa-stage #cbti-w6-d6-root p,
#bsm-app-root #spa-stage #cbti-w6-d6-root span,
#bsm-app-root #spa-stage #cbti-w6-d6-root strong,
#bsm-app-root #spa-stage #cbti-w6-d6-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

#cbti-w6-d6-root .bsm-block:not(.bsm-hidden):not(.bsm-chip-row):not(.bsm-metric-grid):not(.bsm-why-works-title) { display: block !important; }
#cbti-w6-d6-root .bsm-flex { display: flex !important; }
#cbti-w6-d6-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d6-root .bsm-text-center { text-align: center !important; }

#cbti-w6-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#cbti-w6-d6-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d6-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}


#cbti-w6-d6-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}


/* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */

#bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}






#cbti-w6-d6-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }
#cbti-w6-d6-root .bsm-step-header { margin-bottom: 16px !important; display: flex !important; align-items: center !important; }

#cbti-w6-d6-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}
#cbti-w6-d6-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }
#cbti-w6-d6-root .bsm-metric-card {
    display: flex !important; justify-content: space-between !important; align-items: center !important; border-radius: var(--bsm3-radius-status-cards)!important; padding: 14px 16px !important;
}

#cbti-w6-d6-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}
#cbti-w6-d6-root .bsm-chip {
    padding: 10px 16px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; transition: all 0.2s ease !important;
}


/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.u-margin-bottom-0 { margin-bottom:0 !important; }
.u-margin-bottom-16px { margin-bottom: 16px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_module_week6_day7.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 7
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-d7-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w6-d7-root h1,
#bsm-app-root #spa-stage #cbti-w6-d7-root h2,
#bsm-app-root #spa-stage #cbti-w6-d7-root h3,
#bsm-app-root #spa-stage #cbti-w6-d7-root p,
#bsm-app-root #spa-stage #cbti-w6-d7-root span,
#bsm-app-root #spa-stage #cbti-w6-d7-root strong,
#bsm-app-root #spa-stage #cbti-w6-d7-root a,
#bsm-app-root #spa-stage #cbti-w6-d7-root button {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w6-d7-root .bsm-block:not(.bsm-community-grid):not(.bsm-hidden) { display: block !important; }
#cbti-w6-d7-root .bsm-flex { display: flex !important; }
#cbti-w6-d7-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-d7-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w6-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

/* Cards & Headers */
#cbti-w6-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

/* Typography */
#cbti-w6-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

/* Buttons */
#cbti-w6-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}
.bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d7-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; display: inline-block !important;
}@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
}

/* Tools Reminder */
#cbti-w6-d7-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; text-align: center !important;
}


/* Community grid */
#cbti-w6-d7-root .bsm-community-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;
    margin-top: 16px !important; text-align: left !important;
}
@media (max-width: 900px) { #cbti-w6-d7-root .bsm-community-grid { grid-template-columns: 1fr !important; } }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-0 { margin-bottom:0 !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-24px { margin-bottom: 24px !important; }

/* ===== SOURCE: sleep_platform/pages/cbti_week1_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w1-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w1-hub-root h1, 
#bsm-app-root #spa-stage #cbti-w1-hub-root h2,
#bsm-app-root #spa-stage #cbti-w1-hub-root h3, 
#bsm-app-root #spa-stage #cbti-w1-hub-root h4,
#bsm-app-root #spa-stage #cbti-w1-hub-root p, 
#bsm-app-root #spa-stage #cbti-w1-hub-root span,
#bsm-app-root #spa-stage #cbti-w1-hub-root label, 
#bsm-app-root #spa-stage #cbti-w1-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w1-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2) { display: block !important; }
#cbti-w1-hub-root .bsm-flex { display: flex !important; }
#cbti-w1-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w1-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w1-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w1-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w1-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

.bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

/* Header Elements */
#cbti-w1-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w1-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w1-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w1-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w1-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w1-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}


.bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}

@media (max-width: 900px) {
    #cbti-w1-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w1-hub-root .bsm-btn-start,
    #cbti-w1-hub-root .bsm-btn-locked,
    #cbti-w1-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

/* ===== SOURCE: sleep_platform/pages/cbti_week2_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w2-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w2-hub-root h1, 
#bsm-app-root #spa-stage #cbti-w2-hub-root h2,
#bsm-app-root #spa-stage #cbti-w2-hub-root h3, 
#bsm-app-root #spa-stage #cbti-w2-hub-root h4,
#bsm-app-root #spa-stage #cbti-w2-hub-root p, 
#bsm-app-root #spa-stage #cbti-w2-hub-root span,
#bsm-app-root #spa-stage #cbti-w2-hub-root label, 
#bsm-app-root #spa-stage #cbti-w2-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w2-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w2hub-tool-badge) { display: block !important; }
#cbti-w2-hub-root .bsm-flex { display: flex !important; }
#cbti-w2-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w2-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w2-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w2-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w2-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}



/* Header Elements */
#cbti-w2-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w2-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w2-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w2-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w2-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w2-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



#cbti-w2-hub-root .w2hub-tool-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    padding: 3px 10px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-top: 4px !important;
}

@media (max-width: 900px) {
    #cbti-w2-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w2-hub-root .bsm-btn-start,
    #cbti-w2-hub-root .bsm-btn-locked,
    #cbti-w2-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_week3_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w3-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w3-hub-root h1, 
#bsm-app-root #spa-stage #cbti-w3-hub-root h2,
#bsm-app-root #spa-stage #cbti-w3-hub-root h3, 
#bsm-app-root #spa-stage #cbti-w3-hub-root h4,
#bsm-app-root #spa-stage #cbti-w3-hub-root p, 
#bsm-app-root #spa-stage #cbti-w3-hub-root span,
#bsm-app-root #spa-stage #cbti-w3-hub-root label, 
#bsm-app-root #spa-stage #cbti-w3-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w3-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w3hub-tool-badge) { display: block !important; }
#cbti-w3-hub-root .bsm-flex { display: flex !important; }
#cbti-w3-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w3-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w3-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w3-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w3-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}



/* Header Elements */
#cbti-w3-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w3-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w3-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w3-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w3-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w3-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



#cbti-w3-hub-root .w3hub-tool-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    padding: 3px 10px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-top: 4px !important;
}

@media (max-width: 900px) {
    #cbti-w3-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w3-hub-root .bsm-btn-start,
    #cbti-w3-hub-root .bsm-btn-locked,
    #cbti-w3-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_week4_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w4-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w4-hub-root h1, 
#bsm-app-root #spa-stage #cbti-w4-hub-root h2,
#bsm-app-root #spa-stage #cbti-w4-hub-root h3, 
#bsm-app-root #spa-stage #cbti-w4-hub-root h4,
#bsm-app-root #spa-stage #cbti-w4-hub-root p, 
#bsm-app-root #spa-stage #cbti-w4-hub-root span,
#bsm-app-root #spa-stage #cbti-w4-hub-root label, 
#bsm-app-root #spa-stage #cbti-w4-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w4-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w4hub-tool-badge) { display: block !important; }
#cbti-w4-hub-root .bsm-flex { display: flex !important; }
#cbti-w4-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w4-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w4-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w4-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w4-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}



/* Header Elements */
#cbti-w4-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w4-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w4-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w4-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w4-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w4-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



@media (max-width: 900px) {
    #cbti-w4-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w4-hub-root .bsm-btn-start,
    #cbti-w4-hub-root .bsm-btn-locked,
    #cbti-w4-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_week5_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w5-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w5-hub-root h1,
#bsm-app-root #spa-stage #cbti-w5-hub-root h2,
#bsm-app-root #spa-stage #cbti-w5-hub-root h3,
#bsm-app-root #spa-stage #cbti-w5-hub-root h4,
#bsm-app-root #spa-stage #cbti-w5-hub-root p,
#bsm-app-root #spa-stage #cbti-w5-hub-root span,
#bsm-app-root #spa-stage #cbti-w5-hub-root label,
#bsm-app-root #spa-stage #cbti-w5-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w5-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w5hub-tool-badge) { display: block !important; }
#cbti-w5-hub-root .bsm-flex { display: flex !important; }
#cbti-w5-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w5-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w5-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w5-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w5-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}



/* Header Elements */
#cbti-w5-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w5-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w5-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w5-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w5-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w5-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



@media (max-width: 900px) {
    #cbti-w5-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w5-hub-root .bsm-btn-start,
    #cbti-w5-hub-root .bsm-btn-locked,
    #cbti-w5-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/cbti_week6_hub.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 HUB
========================================================================= */

#bsm-app-root #spa-stage #cbti-w6-hub-root {
    width: 100% !important;
    max-width: var(--bsm3-width-wide)!important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}



/* Absolute Typographic Locks */
#bsm-app-root #spa-stage #cbti-w6-hub-root h1,
#bsm-app-root #spa-stage #cbti-w6-hub-root h2,
#bsm-app-root #spa-stage #cbti-w6-hub-root h3,
#bsm-app-root #spa-stage #cbti-w6-hub-root h4,
#bsm-app-root #spa-stage #cbti-w6-hub-root p,
#bsm-app-root #spa-stage #cbti-w6-hub-root span,
#bsm-app-root #spa-stage #cbti-w6-hub-root label,
#bsm-app-root #spa-stage #cbti-w6-hub-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
    box-sizing: border-box !important;
}

/* Core Layout Utilities */
#cbti-w6-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2) { display: block !important; }
#cbti-w6-hub-root .bsm-flex { display: flex !important; }
#cbti-w6-hub-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; }
#cbti-w6-hub-root .bsm-text-center { text-align: center !important; }

/* Navigation */
#cbti-w6-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}


/* Cards */
#cbti-w6-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Day List Rows */
#cbti-w6-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}



/* Header Elements */
#cbti-w6-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.bsm-icon-circle svg { width: 20px !important; height: 20px !important; }

#cbti-w6-hub-root .bsm-title-large {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#cbti-w6-hub-root .bsm-meta-text {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

/* Progress Bar */
#cbti-w6-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#cbti-w6-hub-root .bsm-progress-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    overflow: hidden !important;
}

#cbti-w6-hub-root .bsm-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    transition: width 0.5s ease !important;
}



#cbti-w6-hub-root .w6hub-tool-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    padding: 2px 9px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

@media (max-width: 900px) {
    #cbti-w6-hub-root .bsm-day-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    #cbti-w6-hub-root .bsm-btn-start,
    #cbti-w6-hub-root .bsm-btn-locked,
    #cbti-w6-hub-root .bsm-nav-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/circadian.css ===== */

/* =========================================================================
   CIRCADIAN ALIGNMENT — CSS DESIGN SYSTEM
   Scoped: #bsm-app-root #spa-stage #circadian-dashboard-wrapper
========================================================================= */

/* --- CSS CUSTOM PROPERTIES --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper {
    font-family: inherit;
    max-width: var(--bsm3-width-extra-wide);
    margin: 0 auto;
}



/* --- TYPOGRAPHY LOCK --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h1,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h2,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h3,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h4,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper p,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper label {
    margin: 0;
}

/* Kill WP green underline on h1 — layered specificity to beat any theme rule */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-title::after,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-title::before,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h1::after,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h1::before,
#bsm-cir-page-title::after,
#bsm-cir-page-title::before,
#circadian-dashboard-wrapper h1::after,
#circadian-dashboard-wrapper h1::before,
#circadian-dashboard-wrapper .bsm-edu-title::after,
#circadian-dashboard-wrapper .bsm-edu-title::before {
    display: none !important;
    content: "" !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- PAGE HEADER --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
}
/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
    padding-bottom: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-subtitle {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    margin: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-disorder-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* --- TAB NAVIGATION (platform pattern) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-tab-shell {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-tab {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 16px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.22s, color 0.22s !important;
    white-space: nowrap !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-tab.bsm-edu-tab-active {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* --- STRATEGIES BANNER --- */
/* Secondary nav banner — deliberately NOT a full gradient hero block, so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-strategies-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-strategies-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-most-effective-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
}

/* --- PANEL SHOW/HIDE (dual-specificity armor) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-panel,
#circadian-dashboard-wrapper .bsm-edu-panel {
    display: none !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-active,
#circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-active {
    display: block !important;
    animation: bsmCirFadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-hidden,
#circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}@keyframes bsmCirFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- PANEL HEADER CARD --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-study-header-card {
    display: block !important;
    padding: 26px 28px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-disclaimer {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-style: italic !important;
    line-height: 1.6 !important;
    padding: 12px 17px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 20px !important;
}

/* --- FLIP CARDS (3-col) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip {
    display: block;
    perspective: 1200px;
    height: 240px;
    cursor: pointer;
    border-radius: var(--bsm3-radius-primary-cards);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: var(--bsm3-radius-primary-cards);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip.flipped .bsm-flip-inner {
    transform: rotateY(180deg);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-f,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-b {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 22px;
    box-sizing: border-box;
    overflow: hidden;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-b {
    transform: rotateY(180deg);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-front-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-back-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/* Colour variants */
/* Flip card typography — always white on gradient, set directly */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-eyebrow  { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.2em; text-align:center; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-icon     { display:block; font-size: var(--bsm3-text-large-16px-use-on-text); line-height:1; text-align:center; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-title    { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align:center; margin:0; line-height:1.25; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-hint     { display:block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; text-align:center; margin-top:auto; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-back-label { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.18em; margin-bottom:10px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-back-text  { font-size: var(--bsm3-text-body-use-on-reading-text); line-height:1.65; margin:0; flex:1; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-back-hint  { display:block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; margin-top:12px; }

/* --- TAB "NEXT SECTION" NAV BUTTON — shared outline-pill style, same as
   apnea.php/legs.php/insomnia.php so every page's Next button matches. --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-next-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.12em !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, transform 0.18s !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-next-pill:hover {
    transform: translateX(3px) !important;
}
/* --- 2-COL PATTERN CARDS --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-pat {
    display: block;
    perspective: 1200px;
    height: 200px;
    cursor: pointer;
    border-radius: var(--bsm3-radius-primary-cards);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flip-pat.flipped .bsm-flip-inner {
    transform: rotateY(180deg);
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 10px;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pat-label {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-align: center;
    line-height: 1.3;
}

/* --- STUDY PANEL: PROFILE SUMMARY CARD --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-row {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 22px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-chip {
    flex: 1 !important;
    min-width: 160px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 18px 20px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-chip-lbl {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 8px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-chip-val {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    line-height: 1.25 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-chip-val em {
    font-style: normal !important;
}

/* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
   personalised header, checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    min-width: 155px !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-arch {
    width: 96px !important;
    height: 48px !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-fill {
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    transform-origin: bottom center !important;
    transform: rotate(-90deg) !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-fill.dial-low      {  transform: rotate(-55deg) !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-fill.dial-moderate { transform: rotate(0deg) !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dial-fill.dial-high     {    transform: rotate(55deg) !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-num { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1 !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-severity-tag { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin-top: 5px !important; text-align: center !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pip-row { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; margin-top: 11px !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pip { width: 7px !important; height: 7px !important; border-radius: 50% !important; transition: background 0.4s !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-context { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 10px !important; min-width: 200px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-caption { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; line-height: 1.65 !important; margin: 0 !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-note    { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; margin: 0 !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-align: left !important;
    transition: color 0.2s, opacity 0.2s !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-update-link:hover { opacity: var(--bsm3-opacity-high) !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flags-label { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin: 20px 0 12px !important; }

/* Section eyebrow — shared treatment with apnea.php/legs.php for any
   supplementary section that follows the main educational cards. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-focus-section-label {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.16em !important;
    margin: 32px 0 14px !important;
    padding-top: 24px !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flags-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-bottom: 18px !important; }
@media (max-width: 900px) { #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flags-grid { grid-template-columns: 1fr !important; } }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-check {
    width: 17px !important;
    height: 17px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, border-color 0.2s !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-name { flex: 1 !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-val  { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; white-space: nowrap !important; }

/* Symptom severity dots — 0-4 answers, not yes/no. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-row { align-items: flex-start !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-dots { display: flex !important; gap: 3px !important; flex-shrink: 0 !important; margin-top: 3px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-text { flex: 1 !important; min-width: 0 !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-desc { display: block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; opacity: var(--bsm3-opacity-high) !important; margin-top: 2px !important; line-height: 1.4 !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-row .bsm-flag-val { margin-top: 1px !important; }

/* --- LEGACY: QUIZ SCORE SUMMARY + QUESTION ROWS (no longer used by "Your Study", kept in case other panels reference it) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-block {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-number {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-label {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    text-transform: capitalize !important;
    letter-spacing: 1.2px !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    opacity: var(--bsm3-opacity-medium) !important;
    margin-bottom: 4px !important;
    display: block !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-severity {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
    display: block !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-caption {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    line-height: 1.5 !important;
    display: block !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-row {
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-row:first-of-type { border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0!important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-row:last-of-type  { border-radius: 0 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards)!important; margin-bottom: 20px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-text {
    flex: 1 !important;
    min-width: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-score-track {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-q-value {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    min-width: 26px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-no-data {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 32px 24px !important;
    text-align: center !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    display: block !important;
    margin-bottom: 20px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* --- TOOLS: GLASS CARDS --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-glass-card {
    display: block !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

/* --- TOOLS: STATS GRID (Dashboard) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-dash-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-span {
    flex: 1 !important;
    min-width: 250px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-hero-insight {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.5 !important;
    font-style: italic !important;
    opacity: var(--bsm3-opacity-high) !important;
    max-width: var(--bsm3-width-narrow)!important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-grid {
    flex: 2 !important;
    min-width: 300px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-span {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-head  { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-lbl   { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.5px !important; opacity: var(--bsm3-opacity-high) !important; display: block !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-val   { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; display: block !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-sub   { font-size: var(--bsm3-text-body-use-on-reading-text) !important; opacity: var(--bsm3-opacity-high) !important; display: block !important; }

/* --- BADGES --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-badge { padding:4px 8px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.5px; display:inline-block; }

/* --- REMINDER BANNER --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-reminder-banner {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 12px 16px !important;
    margin-top: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-reminder-banner:hover { transform:scale(1.02) !important; }

/* --- TIMELINE (alignment tracker) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-timeline-container { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-timeline-track     { position:relative; width:100%; height:44px; border-radius: var(--bsm3-radius-primary-cards); overflow:hidden; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tl-bar    { position:absolute; top:0; bottom:0; display:block !important; border-radius: var(--bsm3-radius-primary-cards); opacity:var(--bsm3-opacity-high); }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tl-ideal  { z-index:1; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tl-actual { top:6px; bottom:6px; z-index:2; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tl-axis   { display:flex; justify-content:space-between; font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity:var(--bsm3-opacity-medium); padding:0 10px; }

/* --- SCIENCE ACCORDION --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-sci-acc {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    cursor: pointer !important;
    display: block !important;
    transition: all 0.3s ease !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-sci-head { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display:flex; justify-content:space-between; align-items:center; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-sci-body { display:none; margin-top:20px; font-size:var(--bsm3-text-body-use-on-reading-text); line-height:1.5; padding-top:16px; cursor:default; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-sci-acc.active .bsm-sci-body { display:block; animation:bsmCirFadeUp 0.3s ease forwards; }

/* --- TRANSPARENCY GRID --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-transparency-grid { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-transparency-box  { flex:1; min-width:200px; border-radius: var(--bsm3-radius-primary-cards); padding:16px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-transparency-lbl  { font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; opacity:var(--bsm3-opacity-high); display:block; margin-bottom:8px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-transparency-val  { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display:block; }

/* --- MACRO TRACK (horizontal scrollable day nodes) ---
   Was overflow-x:auto with the scrollbar hidden — technically scrollable
   by drag/swipe, but with no visible affordance a mouse+trackpad user has
   no obvious way to reach nodes past the right edge. Now shows a thin
   scrollbar, and a wheel listener (see the <script> block below) lets a
   normal vertical mouse-wheel scroll it sideways too. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-track { display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; margin-top:8px; scrollbar-width:thin; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-track::-webkit-scrollbar { height:6px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-track::-webkit-scrollbar-thumb { border-radius: var(--bsm3-radius-status-cards); }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-node  { flex:0 0 auto; min-width:90px; border-radius:var(--bsm3-radius-primary-cards); padding:12px 16px; text-align:center; position:relative; cursor:pointer; transition:all 0.2s ease; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-node.active { transform:translateY(-2px); }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-node.active .bsm-macro-lbl { opacity:1; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-lbl  { font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; opacity:var(--bsm3-opacity-high); display:block; margin-bottom:4px; pointer-events:none; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-val  { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display:block; pointer-events:none; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-indicator { position:absolute; top:-6px; right:-6px; width:14px; height:14px; border-radius:50%; pointer-events:none; z-index:2; }

/* --- ITINERARY PANES --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-pane          { display:none; animation:bsmCirFadeUp 0.3s ease; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-pane.active   { display:block; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-wrap          { margin-top:16px; padding-left:20px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-item          { display:block; position:relative; margin-bottom:24px; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-item:last-child { margin-bottom:0; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-icon          { position:absolute; left:-33px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--bsm3-text-small-12px-use-on-text); }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-time          { font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display:block; margin-bottom:2px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-lbl           { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display:block; margin-bottom:4px !important; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-desc          { font-size:var(--bsm3-text-body-use-on-reading-text); opacity:var(--bsm3-opacity-high); display:block; line-height:1.5; }

/* --- FORM CONTROLS --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-solid {
    padding: 14px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-block !important;
    margin-top: 16px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-solid:hover { transform:translateY(-2px) !important; }

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-outline {
    padding: 6px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-input-nice {
    padding: 12px 16px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    width: 100% !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    margin-top: 8px !important;
    font-family: inherit !important;
    color-scheme: dark;
}
#bsm-app-root[data-theme="day"] #spa-stage #circadian-dashboard-wrapper .bsm-input-nice { color-scheme: light; }

/* --- TOOLS: SECTION SHOW/HIDE (dual-specificity armor) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-section,
#circadian-dashboard-wrapper .bsm-tool-section {
    display: none !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-section.bsm-tool-active,
#circadian-dashboard-wrapper .bsm-tool-section.bsm-tool-active {
    display: block !important;
    animation: bsmCirFadeUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Active nav card state */

/* --- TOOLS: TOOL NAV CARDS (3 entry points inside tools panel) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 32px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 26px 24px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    cursor: pointer !important;
    transition: background 0.22s, border-color 0.22s, transform 0.18s !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-card:hover {
    transform: translateY(-3px) !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-desc {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.65 !important;
    margin: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-arrow {
    margin-top: auto !important;
    padding-top: 6px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: 0.05em !important;
}

/* --- TOOLS: SECTION ANCHORS (visual divider above each tool) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-anchor-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 0 12px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-anchor-hdr:first-of-type {
    margin-top: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-anchor-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-anchor-title {
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* --- PRIMARY ACTION BUTTON (full-width, prominent CTA inside each tool) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 18px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.18s, box-shadow 0.2s !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action:hover {
    opacity: var(--bsm3-opacity-high) !important;
    transform: translateY(-2px) !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action:active {
    transform: translateY(0) !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action[style*="display:none"],
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action[style*="display: none"] {
    display: none !important;
}

/* --- TOOL CARD INTRO (title + desc above the CTA) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-card-intro {
    margin-bottom: 20px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-card-title {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    display: block !important;
    margin-bottom: 6px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-card-desc {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* --- FORM REVEAL AREA (sits below CTA, shown after click) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-form-reveal {
    margin-top: 24px !important;
    padding-top: 24px !important;
}

/* --- TOOL SECONDARY BUTTON (edit / cancel in muted style) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-secondary-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: background 0.18s, color 0.18s !important;
}

/* --- ACTIVE PLAN HEADER (when a plan is already set) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-active-plan-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 20px !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-active-plan-label {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* --- EDIT PROFILE MODAL — Circadian --- */
#bsm-circadian-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }
#circadian-dashboard-wrapper .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
}
#bsm-circadian-epm-status.bsm-epm-ok  { display: block !important; }
#bsm-circadian-epm-status.bsm-epm-err { display: block !important; }

/* --- MOBILE --- */
@media (max-width: 900px) {
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-row    { grid-template-columns: 1fr !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-pat-grid   { grid-template-columns: 1fr !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-stat-grid  { grid-template-columns: 1fr !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-transparency-grid { flex-direction: column !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-tab    { font-size: var(--bsm3-text-small-12px-use-on-text)!important; padding: 10px 8px !important; gap: 4px !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-profile-row { flex-direction: column !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-nav-grid { grid-template-columns: 1fr !important; }
    #bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-next-pill { width: 100% !important; justify-content: center !important; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block-font-size-0-8rem-font-weig { display:block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:9px; }
.u-display-block-margin-bottom-22px { display:block; margin-bottom:22px; }
.u-flex-1 { flex:1; }
.u-font-size-11px-opacity-0-7 { font-size:var(--bsm3-text-body-use-on-reading-text); opacity:var(--bsm3-opacity-high); }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-0 { margin-top:0; }
.u-padding-24px-28px-overflow-y-auto-flex-1 { padding:24px 28px; overflow-y:auto; flex:1; min-height:0; }
.u-padding-16px-28px-24px-border-top-1px-so { padding:16px 28px 24px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
.u-background-var-glass-bg-rgba20-20-30-0-9 { border-radius: var(--bsm3-radius-primary-cards); max-width: var(--bsm3-width-standard); width:100%; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }
.u-margin-bottom-0 { margin-bottom:0; }
.u-font-size-1-25rem-font-weight-700-color { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:0; line-height:1.2; }
.u-display-none-position-fixed-inset-0-z-in { display:none; position:fixed; inset:0; z-index:99999; align-items:flex-start; align-items:safe center; justify-content:center; padding:20px; box-sizing:border-box; overflow-y:auto; }
.u-display-none-font-size-0-76rem-font-weig { display:none; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align:center; padding:8px 14px; border-radius:var(--bsm3-radius-status-cards); }
.u-display-flex-flex-direction-column-flex { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.u-display-block-width-100pc-padding-14px-b { display:block; width:100%; padding:14px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; cursor:pointer; text-align:center; box-sizing:border-box; }
.u-display-block-text-align-center-font-siz { display:block; text-align:center; font-size: var(--bsm3-text-small-12px-use-on-text); cursor:pointer; padding:0; width:100%; text-underline-offset:3px; }
.u-display-block-margin-bottom-0 { display:block; margin-bottom:0; }
.u-display-block-font-size-0-6rem-font-weig { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.22em; margin-bottom:6px; }
.u-display-block-font-size-0-65rem-font-wei { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; margin:26px 0 14px; padding-top:18px; }
.u-cursor-pointer { cursor:pointer; }
.u-background-var-glass-bg-rgba128-128-128 { border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: var(--bsm3-text-large-16px-use-on-text); line-height:1; flex-shrink:0; }
.u-background-linear-gradient135deg-rgba109 { padding:26px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }
.u-text-align-center-padding-48px-24px { text-align:center; padding:48px 24px; }
.u-margin-top-14px { margin-top:14px; }

/* ===== SOURCE: sleep_platform/pages/circadian_planner.css ===== */
.bsm-page-container { padding: 20px; max-width: var(--bsm3-width-extra-wide); margin: 0 auto; font-family: var(--bsm3-font-body); }
.bsm-card { border-radius: var(--bsm3-radius-primary-cards); padding: 35px; }
.clinical-label { font-size: var(--bsm3-text-small-12px-use-on-text); letter-spacing: 2px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; display: block; margin-bottom: 10px; }
.input-row-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.bsm-input { border-radius: var(--bsm3-radius-primary-cards); padding: 12px; width: 100%; margin-top: 5px; }
.status-chip { font-size: var(--bsm3-text-small-12px-use-on-text); padding: 4px 12px; border-radius: var(--bsm3-radius-primary-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; transition: 0.3s; }
.hub-navigation-dock { display: flex; justify-content: center; gap: 10px; padding: 10px; border-radius: var(--bsm3-radius-pills); width: fit-content; margin: 0 auto 30px auto; }
.hub-btn { padding: 10px 25px; border-radius: var(--bsm3-radius-pills); cursor: pointer; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.clock-container { position: relative; width: 280px; margin: 0 auto; }
.circadian-clock { width: 100%; height: auto; }
.clock-face { stroke-width: 1; }
.clock-text { font-size: var(--bsm3-text-body-use-on-reading-text); text-anchor: middle; }
.clock-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; font-size: var(--bsm3-text-small-12px-use-on-text); }
.dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.bsm-hub { display: none; animation: fadeIn 0.4s ease forwards; } .bsm-hub.active { display: block; }
.boutique-button { border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; text-transform: capitalize; }
.primary-action { padding: 18px; width: 100%; }
.timeline-scroll-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; }
.day-card { min-width: 180px; flex-shrink: 0; }@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* Mobile Adaptability */
@media (max-width: 900px) { .input-row-grid { grid-template-columns: 1fr 1fr; } }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-color-var-bsm-amber-muted-font-size-0-7r { font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; }

/* ===== SOURCE: sleep_platform/pages/dashboard.css ===== */

    /* ══════════════════════════════════════════════════════════════════════
       MASTER SHELL VARIABLE SYSTEM — v37.0
       Wrapper ID: #bsm-dash-v35
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-app-root #spa-stage #bsm-dash-v35 {
        /* ── Layout heights — used for one-screen-per-tab ── */
        --dash-header-h:     0px;
        --dash-nav-h:        72px;
    }
    

    /* ── BASE ─────────────────────────────────────────────────────────────── */
    #bsm-dash-v35 {
        display: block;
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto;
        animation: dashFadeIn 0.7s ease-out;
        font-family: var(--bsm3-font-body);
    }
    #bsm-dash-v35 h1,#bsm-dash-v35 h2,#bsm-dash-v35 h3,#bsm-dash-v35 h4,
    #bsm-dash-v35 p,#bsm-dash-v35 span:not(.bsm-tab-badge):not(.delta-badge),
    #bsm-dash-v35 label,#bsm-dash-v35 strong {
        font-family: var(--bsm3-font-body);
        margin: 0;
    }
    #bsm-dash-v35 span.bsm-block  { display: block; }
    #bsm-dash-v35 span.bsm-flex   { display: flex; }
    #bsm-dash-v35 span.bsm-grid   { display: grid; }

    /* ── GLASS CARD ───────────────────────────────────────────────────────── */
    #bsm-dash-v35 .ds-card {
        border-radius: var(--bsm3-radius-primary-cards);
        padding: 22px;
        display: block;
        transition: background 0.25s ease, transform 0.25s ease;
    }
    #bsm-dash-v35 .ds-card.is-clickable:hover {
        transform: translateY(-2px);
        cursor: pointer;
    }

    /* ══════════════════════════════════════════════════════════════════════
       DASHBOARD HEADER ROW
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .dash-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 0;
        gap: 12px;
        flex-wrap: wrap;
    }
    #bsm-dash-v35 .dash-header-left { display: flex; flex-direction: column; gap: 4px; }
    #bsm-dash-v35 .dash-greeting {
        font-size: var(--bsm3-text-large-16px-use-on-text)!important;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: -0.03em;
        line-height: 1.1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    #bsm-dash-v35 .dash-greeting .sparkle { font-style: normal; }
    #bsm-dash-v35 .dash-subline {
        display: flex; align-items: center; gap: 10px;
        font-size: var(--bsm3-text-body-use-on-reading-text);
        opacity: var(--bsm3-opacity-medium);
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    }
    #bsm-dash-v35 .dash-subline .date-icon {
        display: inline-flex; align-items: center; gap: 4px;
    }
    #bsm-dash-v35 .dash-subline .date-icon svg {
        width: 13px; height: 13px; stroke-width: 2px; flex-shrink: 0;
    }
    #bsm-dash-v35 .dash-subline .dot-sep { opacity: var(--bsm3-opacity-medium); }
    #bsm-dash-v35 .dash-subline .stale-warning {
        opacity: 1;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    }
    #bsm-dash-v35 .header-log-btn {
        display: inline-flex; align-items: center; gap: 8px; border-radius: var(--bsm3-radius-primary-cards);
        padding: 13px 20px;
        font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        font-family: var(--bsm3-font-body);
        cursor: pointer;
        white-space: nowrap; flex-shrink: 0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #bsm-dash-v35 .header-log-btn:hover {
        transform: translateY(-2px);
    }
    #bsm-dash-v35 .header-log-btn svg {
        width: 16px; height: 16px; stroke-width: 2.5px; flex-shrink: 0;
    }

    /* ── HEADER CHECK-IN PILLS ─────────────────────────────────────────────
       v37: Larger, more breathable. Min-width ensures consistent sizing.
    ────────────────────────────────────────────────────────────────────────*/
    #bsm-dash-v35 .header-right-group {
        display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    #bsm-dash-v35 .header-checkin-btn {
        display: inline-flex; align-items: center; gap: 10px;
        border-radius: var(--bsm3-radius-primary-cards);
        /* v37: increased padding for breathing room */
        padding: 14px 20px;
        min-width: 160px;
        font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        font-family: var(--bsm3-font-body);
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    #bsm-dash-v35 .header-checkin-btn:hover { transform: translateY(-1px);
    }
    #bsm-dash-v35 .header-checkin-btn svg {
        width: 18px; height: 18px; stroke-width: 2px; flex-shrink: 0;
    }
    #bsm-dash-v35 .header-checkin-btn .hcb-label {
        display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    }
    #bsm-dash-v35 .header-checkin-btn .hcb-title {
        font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1.2;
    }
    #bsm-dash-v35 .header-checkin-btn .hcb-sub {
        font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); opacity: var(--bsm3-opacity-medium); line-height: 1.2;
    }

    /* ══════════════════════════════════════════════════════════════════════
       SUBNAV
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .bsm-subnav {
        position: sticky; top: 0; z-index: 200;
        display: block;
        padding: 14px 24px;
        box-sizing: border-box;
        width: 100%;
    }
    #bsm-dash-v35 .bsm-subnav-inner {
        display: flex;
        align-items: center;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: var(--bsm3-radius-primary-cards);
        padding: 6px 8px;
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
    }
    #bsm-dash-v35 .bsm-subnav-inner::-webkit-scrollbar { display: none; }

    #bsm-dash-v35 .bsm-tabs-main {
        display: flex; align-items: center; justify-content: stretch; gap: 4px; flex: 1;
    }
    #bsm-dash-v35 .tab-sep-line {
        width: 1px; height: 24px;
        flex-shrink: 0; margin: 0 6px;
    }

    #bsm-dash-v35 .bsm-tab {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 18px;
        cursor: pointer; white-space: nowrap;
        border-radius: var(--bsm3-radius-primary-cards);
        font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        font-family: var(--bsm3-font-body);
        opacity: var(--bsm3-opacity-medium);
        flex-shrink: 0;
        flex-grow: 1;
        transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
        letter-spacing: -0.01em;
    }
    #bsm-dash-v35 .bsm-tab svg {
        width: 16px; height: 16px; stroke-width: 2px; flex-shrink: 0;
    }
    #bsm-dash-v35 .bsm-tab:hover { opacity: var(--bsm3-opacity-high); }
    #bsm-dash-v35 .bsm-tab.active {
        opacity: 1;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    }
    #bsm-dash-v35 .bsm-tab.active svg { stroke-width: 2.5px; }

    #bsm-dash-v35 .bsm-tab.tab-diary {
        opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-bold-700-use-on-h1); flex-grow: 0;
    }
    #bsm-dash-v35 .bsm-tab.tab-diary:hover { opacity: 1; }

    /* ── "Sleep Plan" shortcut tab — same style as Sleep Diary shortcut ── */
    #bsm-dash-v35 .bsm-tab.tab-plan {
        opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-bold-700-use-on-h1); flex-grow: 0;
    }
    #bsm-dash-v35 .bsm-tab.tab-plan:hover { opacity: 1; }

    /* ── "Sleep Dump" — deliberately tiny, icon-only, no label at any size ── */
    #bsm-dash-v35 .bsm-tab.tab-mini {
        padding: 10px;
        min-width: 0;
        flex-grow: 0;
        opacity: var(--bsm3-opacity-high);
    }
    #bsm-dash-v35 .bsm-tab.tab-mini svg { width: 14px; height: 14px; }
    #bsm-dash-v35 .bsm-tab.tab-mini:hover { opacity: 1; }

    #bsm-dash-v35 .bsm-tab-badge {
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        min-width: 16px; height: 16px; padding: 0 4px; line-height: 1;
    }

    /* ══════════════════════════════════════════════════════════════════════
       TAB PANELS — one screen height each
       Each panel fills the viewport below the header + nav chrome.
       overflow-y: auto allows internal scroll if content overflows on small
       screens, but on a laptop everything fits in one view.
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .bsm-tab-panel {
        display: none !important;
        flex-direction: column;
        gap: 12px;
        padding: 0 24px 24px;
        /* Fill exactly one viewport height minus the chrome above */
        min-height: calc(100dvh - calc(var(--dash-header-h) + var(--dash-nav-h)));
        height: calc(100dvh - calc(var(--dash-header-h) + var(--dash-nav-h)));
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        animation: tabFadeIn 0.25s ease-out;
        /* Hide scrollbar visually but keep it functional */
        scrollbar-width: thin;
    }
    #bsm-dash-v35 .bsm-tab-panel::-webkit-scrollbar { width: 4px; }
    #bsm-dash-v35 .bsm-tab-panel::-webkit-scrollbar-thumb { border-radius: var(--bsm3-radius-mini-badges); }
    #bsm-dash-v35 .bsm-tab-panel.active { display: flex !important; }@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}@keyframes dashFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

    /* ══════════════════════════════════════════════════════════════════════
       TOOLTIP — ? icon styles. Bubble is body-portalled by JS.
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .bsm-tip-wrap {
        position: relative; display: inline-flex; align-items: center;
        vertical-align: middle; margin-left: 20px; cursor: help;
    }
    #bsm-dash-v35 .bsm-tip-icon {
        width: 18px; height: 18px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-style: normal;
        cursor: help; line-height: 1; flex-shrink: 0;
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }
    #bsm-dash-v35 .bsm-tip-wrap:hover .bsm-tip-icon {
        transform: scale(1.15);
    }
    #bsm-body-tip {
        position: fixed;
        z-index: 2147483647;
        pointer-events: none;
        border-radius: var(--bsm3-radius-status-cards);
        padding: 11px 15px;
        width: 220px;
        font-size: var(--bsm3-text-body-use-on-reading-text);
        line-height: 1.55;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        font-family: var(--bsm3-font-body);
    }
    

    /* ══════════════════════════════════════════════════════════════════════
       TAB INTRO BLOCK
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .tab-intro {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 14px 18px;
        margin: 0 0 4px 0;
        border-radius: var(--bsm3-radius-primary-cards);
        flex-shrink: 0;
    }
    #bsm-dash-v35 .tab-intro-icon {
        width: 28px; height: 28px; min-width: 28px; border-radius: var(--bsm3-radius-status-cards);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        margin-top: 2px;
    }
    #bsm-dash-v35 .tab-intro-icon svg {
        width: 14px; height: 14px; stroke-width: 2px;
    }
    #bsm-dash-v35 .tab-intro-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    #bsm-dash-v35 .tab-intro-body strong { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
    #bsm-dash-v35 .tab-intro-body p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.45; opacity: var(--bsm3-opacity-medium); margin: 0; }

    /* ══════════════════════════════════════════════════════════════════════
       STATS SECTION
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .stats-header-row {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        flex-shrink: 0;
    }
    #bsm-dash-v35 .section-title {
        font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: -0.02em;
    }
    #bsm-dash-v35 .stats-date-pill {
        display: inline-flex; align-items: center; gap: 5px;
        border-radius: var(--bsm3-radius-primary-cards); padding: 3px 10px;
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity: var(--bsm3-opacity-medium);
    }
    #bsm-dash-v35 .stats-date-pill.stale { opacity: 1;
    }
    #bsm-dash-v35 .stats-date-pill.has-tip {
        cursor: help;
    }
    #bsm-dash-v35 .stats-date-pill.nodata { opacity: 1;
    }
    #bsm-dash-v35 .stats-date-pill svg {
        width: 10px; height: 10px; stroke-width: 2.5px; flex-shrink: 0;
    }
    #bsm-dash-v35 .pill-update-link {
        cursor: pointer; font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-underline-offset: 2px; margin-left: 2px;
        padding: 0; font-size: inherit; font-family: inherit;
    }

    #bsm-dash-v35 .stats-row {
        display: grid; grid-template-columns: 1fr 2fr; gap: 14px; align-items: stretch;
        flex: 1; min-height: 0;
        /* v37.3: don't stretch this row to fill the whole panel height —
           size it to its content, matching the Sleep Profile grid fix. */
        align-content: start;
    }
    #bsm-dash-v35 .ds-card.donut-card,
    #bsm-dash-v35 span.donut-card {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; text-align: center;
        padding: 16px 14px;
    }
    #bsm-dash-v35 .donut-card-label {
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize;
        letter-spacing: 0.12em; opacity: var(--bsm3-opacity-medium); margin-bottom: 8px;
    }
    #bsm-dash-v35 .donut-wrap {
        position: relative; width: 110px; height: 110px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 0 10px 0;
    }
    #bsm-dash-v35 .donut-inner {
        width: 88px; height: 88px; border-radius: 50%;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 0px;
    }
    #bsm-dash-v35 .donut-score { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1; letter-spacing: -0.04em; margin-bottom: 2px; }
    #bsm-dash-v35 .donut-lbl   { font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; letter-spacing: 0.1em; opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
    #bsm-dash-v35 .donut-footer { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }
    #bsm-dash-v35 .donut-stale {
        display: inline-flex; align-items: center; gap: 5px;
        border-radius: var(--bsm3-radius-primary-cards); padding: 3px 10px; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    }
    #bsm-dash-v35 .donut-stale svg { width: 10px; height: 10px; stroke-width: 2.5px; }

    #bsm-dash-v35 .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    #bsm-dash-v35 .stat-card  {
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 22px 24px 20px;
        min-height: 140px;
    }
    #bsm-dash-v35 .stat-card-top {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 16px;
    }
    #bsm-dash-v35 .stat-lbl {
        display: flex; align-items: center;
        font-size: var(--bsm3-text-medium-14px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    }
    #bsm-dash-v35 .delta-badge {
        display: inline-flex; align-items: center;
        border-radius: var(--bsm3-radius-primary-cards); padding: 4px 10px;
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        font-family: var(--bsm3-font-body);
        flex-shrink: 0; letter-spacing: -0.01em;
        margin-left: 8px;
        cursor: help;
    }
    #bsm-dash-v35 .stat-val {
        display: block; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px;
    }
    #bsm-dash-v35 .stat-sub {
        display: block; font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
        margin-top: 10px;
    }
    /* Sleep Efficiency band badge — same Severe/High/Elevated/Low colour
       convention used platform-wide (Q4 red, Q3 pink, Q2 yellow/orange, Q1 green). */
    #bsm-dash-v35 .se-band-badge {
        display: inline-block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: 0.02em; text-transform: capitalize;
        border-radius: var(--bsm3-radius-primary-cards); padding: 4px 10px; margin-bottom: 14px;
    }

    /* ══════════════════════════════════════════════════════════════════════
       RECOMMENDATIONS (now in Actionable Insights tab)
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .rec-card  { display: flex; flex-direction: column; gap: 10px; padding: 24px !important; }
    #bsm-dash-v35 .rec-title { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 2px; }
    #bsm-dash-v35 .rec-item  {
        display: flex; align-items: center; gap: 14px;
        padding: 15px 18px; border-radius: var(--bsm3-radius-primary-cards); cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }
    #bsm-dash-v35 .rec-item:hover { transform: translateY(-2px); }
    #bsm-dash-v35 .rec-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    #bsm-dash-v35 .rec-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    #bsm-dash-v35 .rec-content h4 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
    #bsm-dash-v35 .rec-content p  { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); }
    #bsm-dash-v35 .rec-arrow { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); transition: transform 0.2s; }
    #bsm-dash-v35 .rec-item:hover .rec-arrow { transform: translateX(4px); }
    /* v37.1: severity-matched colours for the per-condition "flagged area"
       suggestions — red/orange to match the Severe/High badges used on the
       Sleep Profile tab, so the same condition reads consistently everywhere. */

    /* ══════════════════════════════════════════════════════════════════════
       SLEEP PROFILE CARDS (Tab 1)
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .profile-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
        flex: 1; min-height: 0;
        /* v37.3: don't stretch rows to fill the whole panel height — size
           each row to its actual content so cards aren't left with a big
           empty gap between the description and the score bar. */
        align-content: start;
    }
    #bsm-dash-v35 .status-badge { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
    #bsm-dash-v35 .status-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    #bsm-dash-v35 .status-txt   { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.1em; }

    /* card-big / score-ring retained in the stylesheet in case they are reused
       elsewhere, but are no longer used by the priority-1 Sleep Profile card. */
    #bsm-dash-v35 .card-big { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; }
    #bsm-dash-v35 .card-big h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: -0.02em; margin: 0 0 8px; }
    #bsm-dash-v35 .card-big p  { font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-high); line-height: 1.5; }

    #bsm-dash-v35 .card-std { display: flex; flex-direction: column; justify-content: space-between; }
    #bsm-dash-v35 .card-std h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 8px; }
    #bsm-dash-v35 .card-updated-date { display: block; font-size: var(--bsm3-text-small-12px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); margin: -4px 0 10px; }
    #bsm-dash-v35 .card-std p  { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.5; margin: 0 0 20px; }
    /* v37.2: priority-1 (HIGH) cards use this identical .card-std layout as
       priority 2/3 and sit as a normal grid cell — so all 4 Sleep Profile
       cards fit into exactly 2 rows. Colour + badge text carry the urgency,
       not shape or size. */
    #bsm-dash-v35 .score-bar   { display: flex; align-items: center; gap: 10px; }
    #bsm-dash-v35 .score-track { flex: 1; height: 6px; border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; }
    #bsm-dash-v35 .score-fill  { height: 100%; border-radius: var(--bsm3-radius-mini-badges); }
    #bsm-dash-v35 .score-label { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); min-width: 80px; text-align: right; }
    #bsm-dash-v35 .card-slim { display: flex; justify-content: space-between; align-items: center; }
    #bsm-dash-v35 .card-slim h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0; }
    #bsm-dash-v35 .card-slim-right { display: flex; align-items: center; gap: 14px; }
    #bsm-dash-v35 .card-slim-right .val { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1; }
    #bsm-dash-v35 .card-slim-right .lbl { font-size: var(--bsm3-text-small-12px-use-on-text); opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; }
    #bsm-dash-v35 .card-slim-right svg { width: 26px; height: 26px; stroke-width: 2px; }
    #bsm-dash-v35 .card-pending {
        display: flex; justify-content: space-between; align-items: center; opacity: var(--bsm3-opacity-high);
    }
    #bsm-dash-v35 .card-pending h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0; }
    #bsm-dash-v35 .btn-pending {
        padding: 8px 16px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text);
        text-transform: capitalize; font-weight: var(--bsm3-weight-bold-700-use-on-h1); pointer-events: none; font-family: var(--bsm3-font-body);
    }

    /* ══════════════════════════════════════════════════════════════════════
       AI INSIGHTS — renamed to Actionable Insights (TAB 3)
       ══════════════════════════════════════════════════════════════════════ */
    /* ── Single-column layout for insights tab (AI Analysis card removed) ── */
    #bsm-dash-v35 .insights-cols {
        display: grid; grid-template-columns: 1fr; gap: 12px;
        flex: 1; min-height: 0;
        /* v37.3: content-sized, not stretched to fill the panel — consistent
           with the Sleep Profile and Sleep Statistics tabs. */
        align-content: start;
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPLORE (TAB 4)
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .explore-grid {
        display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
        flex: 1; min-height: 0;
        /* v37.3: content-sized, not stretched to fill the panel — consistent
           with the other three tabs. */
        align-content: start;
    }
    #bsm-dash-v35 .prog-card { display: flex; flex-direction: column; }
    #bsm-dash-v35 .prog-icon {
        width: 38px; height: 38px; border-radius: var(--bsm3-radius-primary-cards);
        display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    }
    #bsm-dash-v35 .prog-icon svg { width: 18px; height: 18px; stroke-width: 2px; }
    #bsm-dash-v35 .prog-card h4 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 5px; }
    #bsm-dash-v35 .prog-card p  { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
    #bsm-dash-v35 .prog-bar-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
    #bsm-dash-v35 .prog-bar-labels { display: flex; justify-content: space-between; font-size: var(--bsm3-text-small-12px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
    #bsm-dash-v35 .prog-track { width: 100%; height: 5px; border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; }
    #bsm-dash-v35 .prog-fill  { height: 100%; border-radius: var(--bsm3-radius-mini-badges); }

    /* ══════════════════════════════════════════════════════════════════════
       RESPONSIVE — mobile-first
       ══════════════════════════════════════════════════════════════════════ */

    /* ── Tablet: 601–900px ── */
    @media (max-width: 900px) {
        #bsm-dash-v35 {
            --dash-header-h: 0px;
            --dash-nav-h:    64px;
        }
        #bsm-dash-v35 .bsm-tab-panel {
            /* On tablet let content be natural height — one-screen feels cramped */
            height: auto;
            min-height: 0;
            overflow-y: visible;
        }
        #bsm-dash-v35 .dash-greeting { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
        #bsm-dash-v35 .dash-header {
            padding: 14px 14px 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        #bsm-dash-v35 .header-right-group {
            width: 100%;
            justify-content: stretch;
        }
        #bsm-dash-v35 .header-checkin-btn {
            flex: 1;
            min-width: 0;
            justify-content: center;
        }
        #bsm-dash-v35 .header-log-btn { flex: 1; justify-content: center; }
        #bsm-dash-v35 .bsm-subnav { padding: 10px 14px; }
        #bsm-dash-v35 .bsm-tab { padding: 10px 12px; font-size: var(--bsm3-text-medium-14px-use-on-text); }
        #bsm-dash-v35 .bsm-tab-panel { padding: 2px 14px 32px; gap: 10px; }
        #bsm-dash-v35 .stats-row { grid-template-columns: 1fr; }
        #bsm-dash-v35 .profile-grid { grid-template-columns: 1fr; }
        #bsm-dash-v35 .explore-grid { grid-template-columns: 1fr; gap: 12px; }
        #bsm-dash-v35 .card-big, #bsm-dash-v35 .card-slim, #bsm-dash-v35 .card-pending { flex-direction: column; gap: 16px; }
        #bsm-dash-v35 .stats-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ── Mobile: ≤600px ── */
    @media (max-width: 900px) {
        #bsm-dash-v35 {
            --dash-header-h: 0px;
            --dash-nav-h:    60px;
        }
        #bsm-dash-v35 .bsm-tab-panel {
            height: auto;
            min-height: 0;
            overflow-y: visible;
        }
        #bsm-dash-v35 .dash-greeting { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
        #bsm-dash-v35 .tab-label { display: none; }
        #bsm-dash-v35 .bsm-tab { padding: 10px 14px; }
        #bsm-dash-v35 .stats-grid { grid-template-columns: 1fr 1fr; }

        /* Stack check-in buttons + log button vertically on mobile */
        #bsm-dash-v35 .header-right-group {
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }
        #bsm-dash-v35 .header-checkin-btn {
            width: 100%; min-width: 0;
            padding: 14px 18px;
            justify-content: flex-start;
        }
        #bsm-dash-v35 .header-log-btn {
            width: 100%; justify-content: center;
        }
        /* Show hcb-sub on mobile since we have room now they're full-width */
        #bsm-dash-v35 .header-checkin-btn .hcb-sub { display: flex; }

        #bsm-dash-v35 .card-big h3 { font-size: var(--bsm3-text-large-16px-use-on-text); }
        #bsm-dash-v35 .explore-grid { grid-template-columns: 1fr; }
        #bsm-dash-v35 .profile-grid { grid-template-columns: 1fr; gap: 10px; }
        #bsm-dash-v35 .rec-item { padding: 12px 14px; gap: 10px; }
    }

    /* ── Very small: ≤400px ── */
    @media (max-width: 900px) {
        #bsm-dash-v35 .stats-grid { grid-template-columns: 1fr; }
        #bsm-dash-v35 .bsm-tab { padding: 9px 10px; font-size: var(--bsm3-text-medium-14px-use-on-text); }
    }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/general_learn.css ===== */

    /* 1. Architecture & Layout */
    #bsm-learn-stage {
        padding: 30px;
        font-family: var(--bsm3-font-body);
        animation: bsm-page-enter 0.6s ease-out;
    }

    /* 2. Typography - WHITE TITLE ON DARK BG */
    .learn-page-title {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Pure white for dark background */
        margin: 0 0 10px 0;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    }

    .learn-subtitle {
        opacity: var(--bsm3-opacity-high);
        font-size: var(--bsm3-text-large-16px-use-on-text);
        margin-bottom: 40px;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        letter-spacing: 0.5px;
    }

    /* 3. Swipeable Card Container */
    .swipe-container {
        display: flex;
        gap: 25px;
        overflow-x: auto;
        padding-bottom: 30px;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
        scroll-snap-type: x mandatory;
    }

    .swipe-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    /* 4. High-Contrast Educational Cards */
    .learn-card {
        flex: 0 0 320px; /* Lavender glass */
        border-radius: var(--bsm3-radius-pills);
        padding: 40px 30px;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 380px;
    }

    .card-hook {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Midnight Purple */
        line-height: 1.2;
        margin-bottom: 20px;
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    }

    .card-fact {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .card-explanation {
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Slate Purple */
        line-height: 1.4;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    }

    .card-tag {
        margin-top: auto;
        font-size: var(--bsm3-text-small-12px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize;
        letter-spacing: 1.5px; /* Contrast Bronze/Orange */
        padding-top: 20px;
    }

    /* 5. Navigation Hint */
    .swipe-hint {
        margin-top: 20px;
        font-size: var(--bsm3-text-body-use-on-reading-text);
        display: flex;
        align-items: center;
        gap: 10px;
        opacity: var(--bsm3-opacity-medium);
    }

    .hint-line {
        flex-grow: 1;
        height: 1px;
    }@keyframes bsm-page-enter {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== SOURCE: sleep_platform/pages/insomnia.css ===== */

/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - INSOMNIA HUB (2-COLUMN)
========================================================================= */
#bsm-app-root #spa-stage #bsm-spa-root {
    font-family: var(--bsm3-font-body) !important;
    max-width: var(--bsm3-width-extra-wide);
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}



#bsm-app-root #spa-stage #bsm-spa-root h1, 
#bsm-app-root #spa-stage #bsm-spa-root h2,
#bsm-app-root #spa-stage #bsm-spa-root h3, 
#bsm-app-root #spa-stage #bsm-spa-root h4,
#bsm-app-root #spa-stage #bsm-spa-root p, 
#bsm-app-root #spa-stage #bsm-spa-root span,
#bsm-app-root #spa-stage #bsm-spa-root label, 
#bsm-app-root #spa-stage #bsm-spa-root strong {
    font-family: var(--bsm3-font-body) !important; margin: 0;
}

.bsm-insomnia-page-root .bsm-block:not(.bsm-hidden) { display: block !important; box-sizing: border-box !important; }
.bsm-insomnia-page-root .bsm-flex { display: flex !important; box-sizing: border-box !important; }
.bsm-insomnia-page-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; }

.bsm-insomnia-page-root .bsm-btn-primary { 
    padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; 
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important; transition: all 0.3s ease !important; 
    display: inline-block !important; text-align: center !important;
}
.bsm-btn-primary:hover { transform: translateY(-2px) !important; }
.bsm-insomnia-page-root .bsm-input { width: 100% !important; padding: 12px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-family: inherit !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom: 16px !important;}

.bsm-insomnia-page-root .bsm-panel-box,
.bsm-insomnia-page-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

.bsm-insomnia-page-root .bsm-progress-track { height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; margin: 16px 0 24px !important; }
.bsm-insomnia-page-root .bsm-progress-fill { height: 100% !important; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.3s ease !important; }

.bsm-moon-tab:hover { transform: translateY(-3px) !important; }

.bsm-moon-tab.locked { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
.bsm-moon-tab.locked:hover { transform: none !important; }
.bsm-week-card:hover { transform: translateY(-3px) !important; }
.bsm-week-card.locked { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
.bsm-week-card.locked:hover { transform: none !important; }


.bsm-insomnia-page-root .bsm-badge { font-size: var(--bsm3-text-small-12px-use-on-text)!important; padding: 2px 8px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; }
.bsm-tool-item:hover { transform: translateX(4px) !important; }
.bsm-tool-item-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; }@keyframes bsmFadeIn {
    from { opacity: 0; transform: translateY(5px); }
}

/* =========================================================================
   BSM INSOMNIA EDUCATION SECTION — NEW CSS
========================================================================= */

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-subtitle {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    margin: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-disorder-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    border-radius: var(--bsm3-radius-pills)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

/* --- TAB SHELL --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-tab-shell {
    display: flex !important;
    align-items: center !important;
    border-radius: var(--bsm3-radius-pills)!important;
    padding: 5px !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 22px !important;
    border-radius: var(--bsm3-radius-pills)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex: 1 !important;
    justify-content: center !important;
    font-family: var(--bsm3-font-body) !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-tab svg {
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-tab-active {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* --- STRATEGIES BANNER --- */
/* Secondary nav banner — deliberately NOT a full gradient hero block, so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-strategies-bar {
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 18px 24px !important;
    margin-bottom: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-strategies-bar:hover {
    transform: translateY(-2px) !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-strategies-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-most-effective-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: var(--bsm3-radius-pills)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
}

/* --- TAB PANELS --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-panel {
    animation: bsmFadeIn 0.25s ease !important;
    margin-bottom: 32px !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-panel-hidden {
    display: none !important;
}

/* --- STUDY HEADER CARD (purple gradient) --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-study-header-card {
    border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0!important;
    padding: 24px 28px 20px !important;
}

/* --- DISCLAIMER --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-disclaimer {
    padding: 16px 28px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.65 !important;
    font-style: italic !important;
}



/* --- SCORE SUMMARY BLOCK --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-score-block {
    padding: 20px 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-score-number {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-score-label {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    text-transform: capitalize !important;
    letter-spacing: 1.2px !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    opacity: var(--bsm3-opacity-medium) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-score-severity {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-score-caption {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    line-height: 1.5 !important;
    display: block !important;
}

/* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
   personalised header, checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 28px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    min-width: 155px !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-arch {
    width: 96px !important;
    height: 48px !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-fill {
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    transform-origin: bottom center !important;
    transform: rotate(-90deg) !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-fill.dial-low      {  transform: rotate(-55deg) !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-fill.dial-moderate { transform: rotate(0deg) !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-dial-fill.dial-high     {    transform: rotate(55deg) !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-num { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1 !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-severity-tag { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin-top: 5px !important; text-align: center !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-pip-row { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; margin-top: 11px !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-pip { width: 7px !important; height: 7px !important; border-radius: 50% !important; transition: background 0.4s !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-context { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 10px !important; min-width: 200px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-caption { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; line-height: 1.65 !important; margin: 0 !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-note    { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; margin: 0 !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-align: left !important;
    transition: color 0.2s, opacity 0.2s !important;
}
#bsm-app-root #spa-stage #bsm-spa-root .bsm-update-link:hover { opacity: var(--bsm3-opacity-high) !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-flags-label { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin: 20px 28px 12px !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-flags-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin: 0 28px 18px !important; }
@media (max-width: 900px) { #bsm-app-root #spa-stage #bsm-spa-root .bsm-flags-grid { grid-template-columns: 1fr !important; } }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-check {
    width: 17px !important;
    height: 17px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, border-color 0.2s !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-name { flex: 1 !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-val  { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; white-space: nowrap !important; }

/* Symptom severity dots — replaces the plain checkbox for symptom rows,
   since these are 0-4 severity answers, not yes/no. Risk-factor icon
   (scale emoji) keeps using .bsm-flag-check for a consistent left-hand
   column between the two row types. */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-row { align-items: flex-start !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-dots { display: flex !important; gap: 3px !important; flex-shrink: 0 !important; margin-top: 3px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-text { flex: 1 !important; min-width: 0 !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-desc { display: block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; opacity: var(--bsm3-opacity-high) !important; margin-top: 2px !important; line-height: 1.4 !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-row .bsm-flag-val { margin-top: 1px !important; }

/* --- QUESTION ROWS (legacy — no longer used by "Your Study", kept in case other panels reference it) --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-row {
    padding: 16px 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-row:last-child {
    border-radius: 0 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards)!important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-num {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-text {
    flex: 1 !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.5 !important;
    min-width: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-score-track {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-value {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    min-width: 28px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

/* --- CONTENT CARDS --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-content-card {
    padding: 20px 28px !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-content-card:last-child {
    border-radius: 0 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards)!important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-content-eyebrow {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    text-transform: capitalize !important;
    letter-spacing: 1.2px !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 8px !important;
    display: block !important;
}



#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-content-body {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* --- NO DATA STATE --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-no-data {
    border-radius: 0 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards)!important;
    padding: 40px 28px !important;
    text-align: center !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    display: block !important;
}

/* =========================================================================
   INTERACTIVE CARD PANELS — What This Means & Patterns & Signs
========================================================================= */

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-section-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 4px !important;
}

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-section-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    margin-bottom: 28px !important;
    display: block !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-ic-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-ic-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

@media (max-width: 900px) {
    #bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-ic-grid-3 { grid-template-columns: 1fr !important; }
    #bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-ic-grid-2 { grid-template-columns: 1fr !important; }
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-card {
    perspective: 1000px !important;
    height: 240px !important;
    cursor: pointer !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-card.bsm-pattern-card { height: 200px !important; }

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-style: preserve-3d !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-card.flipped .bsm-flip-inner { transform: rotateY(180deg) !important; }

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-front,
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back {
    transform: rotateY(180deg) !important;
    justify-content: flex-start !important;
    padding: 20px 22px !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-icon { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 16px !important; display: block !important; line-height: 1 !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-icon-svg { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 20px !important; flex-shrink: 0 !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-icon-svg svg { width: 22px !important; height: 22px !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-eyebrow { font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 1.5px !important; margin-bottom: 8px !important; text-align: center !important; display: block !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-title { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-align: center !important; line-height: 1.3 !important; margin-bottom: 0 !important; display: block !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-pattern-card .bsm-flip-title { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 0 8px !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-reveal-hint { position: absolute !important; bottom: 16px !important; left: 0 !important; right: 0 !important; text-align: center !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; letter-spacing: 1.2px !important; text-transform: capitalize !important; display: block !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back-title { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 1px !important; margin-bottom: 10px !important; display: block !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back-body { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.65 !important; display: block !important; margin: 0 !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back-hint { position: absolute !important; bottom: 14px !important; left: 0 !important; right: 0 !important; text-align: center !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; letter-spacing: 1.2px !important; text-transform: capitalize !important; display: block !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoints { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px 24px !important; margin-bottom: 24px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoints-header { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 16px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoints-label { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 1.5px !important; display: block !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoints-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
@media (max-width: 900px) { #bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoints-grid { grid-template-columns: 1fr !important; } }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoint-item { border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 14px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.55 !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-keypoint-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-top: 5px !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-pro-support { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px 20px !important; margin-bottom: 20px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-pro-support-title { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-pro-support-body { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.65 !important; margin: 0 !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-act-banner { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s !important; margin-bottom: 24px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-act-banner:hover { transform: translateY(-2px) !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-act-title { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 2px !important; display: block !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-act-sub { font-size: var(--bsm3-text-body-use-on-reading-text) !important; display: block !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-legal { border-radius: var(--bsm3-radius-status-cards)!important; padding: 14px 18px !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 20px !important; }
#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-legal-text { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.55 !important; margin: 0 !important; }

#bsm-app-root #spa-stage #bsm-spa-root .bsm-ic-clearfix { clear: both !important; display: block !important; }

/* "Next" nav button — shared outline-pill style, same as apnea.php/
   circadian.php/legs.php so every page's Next button matches. */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}
#bsm-app-root #spa-stage #bsm-spa-root .bsm-next-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    border-radius: var(--pill-radius, var(--bsm3-radius-pills)) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.12em !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, transform 0.18s !important;
}
#bsm-app-root #spa-stage #bsm-spa-root .bsm-next-pill:hover {
    transform: translateX(3px) !important;
}



/* =========================================================================
   MODULE 0 CARD PULSE
========================================================================= */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-card-pulse {
    animation: bsmPulseGlow 1.8s ease-out infinite !important;
}
/* =========================================================================
   EDIT PROFILE MODAL — Insomnia
========================================================================= */
#bsm-insomnia-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }
.bsm-insomnia-page-root .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: var(--bsm3-font-body) !important;
}
#bsm-insomnia-epm-status.bsm-epm-ok  { display: block !important; }
#bsm-insomnia-epm-status.bsm-epm-err { display: block !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-flex-1 { flex:1; }
.u-font-weight-bold-font-size-14px-margin-b { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text); margin-bottom:4px; }
.u-font-weight-800-font-size-16px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); margin-bottom:2px; }
.u-font-size-14px-font-weight-bold { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.u-font-size-12px-opacity-0-7-margin-bottom { font-size:var(--bsm3-text-small-12px-use-on-text); opacity:var(--bsm3-opacity-high); margin-bottom:16px; }
.u-font-size-11px-font-weight-bold-opacity { font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity:var(--bsm3-opacity-medium); margin-top:auto; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px-font-size-20px-font-w { margin-bottom:16px; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.u-color-var-diary-text-muted-margin-bottom { margin-bottom:24px; }
.u-font-size-22px-font-weight-800-margin-bo { font-size:var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }
.u-font-size-20px-font-weight-800-margin-bo { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }
.u-font-size-13px-font-weight-700-margin-bo { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:8px; }
.u-font-size-13px-font-weight-600-opacity-0 { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity:var(--bsm3-opacity-high); text-transform: capitalize; letter-spacing:0.5px; }
.u-flex-1-background-var-inner-bg-border-1p { flex:1; padding:32px 24px; border-radius:var(--bsm3-radius-primary-cards); text-align:center; }
.u-flex-shrink-0-margin-top-1px { flex-shrink:0;margin-top:1px; }
.u-display-none { display:none !important; }
.u-color-var-diary-text-muted-font-size-14p { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-bottom:24px !important; }
.u-font-size-36px-font-weight-800-margin-bo { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:8px; }
.u-width-5pc { width:5%; }
.u-width-100pc-padding-16px-font-size-16px { width:100% !important; padding:16px !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.u-padding-8px-16px { padding:8px 16px !important; }
.u-padding-32px-24px { padding:32px 24px !important; }
.u-padding-16px-24px { padding:16px 24px !important; }
.u-margin-0-font-size-14px-color-var-diary { margin:0; font-size:var(--bsm3-text-body-use-on-reading-text); line-height:1.5; }
.u-margin-0-font-size-14px-color-var-brand { margin:0; font-size:var(--bsm3-text-body-use-on-reading-text); }
.u-margin-top-32px-padding-top-24px-border { margin-top:32px; padding-top:24px; }
.u-margin-bottom-8px-font-weight-800 { margin-bottom:8px; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.u-margin-bottom-8px-font-size-20px-font-we { margin-bottom:8px; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.u-margin-bottom-8px-font-size-14px-color-v { margin-bottom:8px; font-size:var(--bsm3-text-body-use-on-reading-text); }
.u-margin-bottom-8px-2 { margin-bottom:8px; }
.u-margin-bottom-32px { margin-bottom:32px !important; }
.u-justify-content-space-between-font-size { justify-content:space-between; font-size:var(--bsm3-text-small-12px-use-on-text); opacity:var(--bsm3-opacity-high); margin-bottom:4px; }
.u-gap-24px { gap:24px; }
.u-font-weight-bold-opacity-1 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity:1; }
.u-font-weight-800-font-size-16px-color-fff { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); }
.u-font-weight-700-font-size-16px-margin-bo-3 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); margin-bottom:8px; }
.u-font-size-32px-margin-bottom-12px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom:12px; }
.u-font-size-22px-font-weight-800-color-fff { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:4px; }
.u-font-size-16px-font-weight-700-margin-bo { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:16px; }
.u-font-size-14px-color-var-diary-text-mute { font-size:var(--bsm3-text-body-use-on-reading-text); }
.u-font-size-13px-color-rgba255-255-255-0-7 { font-size:var(--bsm3-text-medium-14px-use-on-text); }
.u-font-size-12px-color-var-diary-text-mute { font-size:var(--bsm3-text-small-12px-use-on-text); margin-bottom:8px; }
.u-font-size-12px-color-rgba255-255-255-0-8 { font-size:var(--bsm3-text-small-12px-use-on-text); margin-top:2px; }
.u-display-block-text-align-center-padding { display:block; text-align:center; padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); }
.u-display-block-font-size-0-76rem-color-va { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); line-height:1.5; border-radius:var(--bsm3-radius-status-cards); padding:12px 14px; }
.u-color-var-diary-text-muted-font-size-15p { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom:0 !important; }
.u-color-var-diary-text-muted-font-size-13p { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom:0 !important; }
.u-color-var-brand-green-font-weight-bold-m { font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-top:12px; }
.u-color-var-diary-text-muted-font-size-14p-2 { font-size: var(--bsm3-text-body-use-on-reading-text); }
.u-background-var-inner-bg-border-1px-solid { padding:20px; border-radius: var(--bsm3-radius-primary-cards); text-align:center; font-size:var(--bsm3-text-body-use-on-reading-text); }
.u-background-var-inner-bg-border-1px-solid-2 { padding:20px; border-radius: var(--bsm3-radius-primary-cards); margin-top:16px; }
.u-align-items-center-gap-16px-2 { align-items:center; gap:16px; }
.u-align-items-center-gap-10px { align-items:center; gap:10px; }

/* ===== SOURCE: sleep_platform/pages/learn.css ===== */

    /* 1. PAGE WRAPPER */
    .learn-wrapper { animation: fadeIn 0.5s ease forwards; width: 100%; padding-bottom: 120px; }

    /* 2. HEADER & NAV */
    .learn-header { margin-bottom: 30px; }
    .learn-header h1 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-size-page-title-24px-use-on-h1); margin: 0 0 10px 0; }
    .learn-header p { font-size: var(--bsm3-text-large-16px-use-on-text); max-width: var(--bsm3-width-narrow); }
    

    /* 3. DIAGRAM GRID */
    .mechanics-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 25px !important; margin-bottom: 40px !important; }
    
    /* 4. THE CARD RULE - FORCED VISIBILITY (ADDED FIX) */
    .learn-wrapper .insight-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 5. TEXT VISIBILITY FIX (ADDED FIX) */
    /* Exception: Titles inside cards should be slightly bolder/darker if needed */
    .learn-wrapper .term-highlight { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

    /* 6. CSS AIRWAY VISUALIZATION */
    .airway-visual {
        height: 180px; /* Keep visual background dark for contrast */
        border-radius: var(--bsm3-radius-primary-cards);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    /* The "Throat" pipe */
    .pipe { width: 60px; height: 100%; position: relative; }
    
    /* The Airflow Arrows */
    .flow-arrow {
        position: absolute;
        width: 4px; 
        height: 20px; 
        left: 50%; 
        transform: translateX(-50%);
        animation: flowDown 1.5s infinite linear;
        border-radius: var(--bsm3-radius-mini-badges);
    }
    .flow-arrow:nth-child(2) { animation-delay: 0.5s; }
    .flow-arrow:nth-child(3) { animation-delay: 1.0s; }

    /* The Collapse Block */
    .blockage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 0px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        opacity: var(--bsm3-opacity-high);
        transition: height 2s ease-in-out;
    }
    
    /* Animation states */
    .visual-blocked .blockage { height: 70px; animation: pulseBlock 2s infinite alternate; }
    .visual-blocked .flow-arrow { animation: flowStop 1.5s infinite; }@keyframes flowDown {
    0% { top: -20px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}@keyframes flowStop {
    0% { top: -20px; opacity: 1; }
    50% { top: 45%; opacity: 1; }
    100% { top: 45%; opacity: 0; }
}@keyframes pulseBlock {
    from { height: 60px; }
    to { height: 75px; }
}

    /* 7. CONTENT TYPOGRAPHY */
    .term-highlight { font-size: var(--bsm3-text-large-16px-use-on-text); display: block; margin-bottom: 5px; }
    .def-text { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; }

    /* 8. COMPARISON TABLE */
    .osa-csa-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 15px !important; margin-top: 20px !important; }
    .type-col { padding: 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; text-align: center; }
    .type-badge { display: inline-block; padding: 4px 12px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; margin-bottom: 15px; }

    @media (max-width: 900px) { .mechanics-grid, .osa-csa-grid { grid-template-columns: 1fr !important; } }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/pages/legs.css ===== */

/* ============================================================
   BSM RESTLESS LEGS — SCOPED CSS
   All rules scoped under #bsm-app-root #spa-stage #bsm-legs-wrapper
   NO hardcoded colours except on gradient cards (--on-gradient)
   ============================================================ */



/* Typography lock */

/* Kill WordPress green underline — comprehensive reset */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-title::after,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-title::before,
#bsm-app-root #spa-stage #bsm-legs-wrapper h1::after,
#bsm-app-root #spa-stage #bsm-legs-wrapper h1::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
}

/* ---- PAGE HEADER ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    flex-wrap: wrap !important;
}

/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-title {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-subtitle {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    margin: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-disorder-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 18px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: 0.1em !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ---- TAB NAV ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-tab-shell {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-tab {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 16px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.22s, color 0.22s !important;
    white-space: nowrap !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-tab.bsm-edu-tab-active {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* "Next" nav button — shared outline-pill style, same as apnea.php/
   circadian.php/insomnia.php so every page's Next button matches. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-next-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.12em !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, transform 0.18s !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-next-pill:hover {
    transform: translateX(3px) !important;
}

/* ---- STRATEGIES BANNER ---- */
/* Secondary nav banner — deliberately NOT a full gradient hero block, so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-strategies-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-bar-inner {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-bar-end {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-strategies-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-bar-title {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    display: block !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-bar-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
    margin-top: 2px !important;
    display: block !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-most-effective-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
}

/* ---- PANEL SHOW/HIDE ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-panel,
#bsm-legs-wrapper .bsm-edu-panel {
    display: none !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-active,
#bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-active {
    display: block !important;
    animation: bsmLegsUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-hidden,
#bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}@keyframes bsmLegsUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- PANEL HEADER CARD ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-study-header-card {
    display: block !important;
    padding: 26px 28px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-study-header-card .bsm-hcard-title {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-study-header-card .bsm-hcard-sub {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-study-header-card .bsm-hcard-note {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-style: italic !important;
    line-height: 1.6 !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-disclaimer {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-style: italic !important;
    line-height: 1.6 !important;
    padding: 12px 17px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 20px !important;
}

/* ---- SIGNAL SUMMARY CARD ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-card {
    display: block !important;
    padding: 20px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-heading {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 14px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-label {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    min-width: 130px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 14px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-signal-summary {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.7 !important;
    margin-top: 8px !important;
    padding-top: 14px !important;
}

/* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
   personalised header, checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    min-width: 155px !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-arch {
    width: 96px !important;
    height: 48px !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-fill {
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0 0!important;
    transform-origin: bottom center !important;
    transform: rotate(-90deg) !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-fill.dial-low      {  transform: rotate(-55deg) !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-fill.dial-moderate { transform: rotate(0deg) !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-dial-fill.dial-high     {    transform: rotate(55deg) !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-num { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1 !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-severity-tag { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin-top: 5px !important; text-align: center !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-pip-row { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; margin-top: 11px !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-pip { width: 7px !important; height: 7px !important; border-radius: 50% !important; transition: background 0.4s !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-context { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 10px !important; min-width: 200px !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-caption { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; line-height: 1.65 !important; margin: 0 !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-note    { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; margin: 0 !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-align: left !important;
    transition: color 0.2s, opacity 0.2s !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-update-link:hover { opacity: var(--bsm3-opacity-high) !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flags-label { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.18em !important; margin: 20px 0 12px !important; }

/* Section eyebrow — shared treatment with apnea.php/circadian.php for any
   supplementary section that follows the main educational cards. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-focus-section-label {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.16em !important;
    margin: 32px 0 14px !important;
    padding-top: 24px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flags-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-bottom: 18px !important; }
@media (max-width: 900px) { #bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flags-grid { grid-template-columns: 1fr !important; } }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-check {
    width: 17px !important;
    height: 17px !important;
    border-radius: var(--bsm3-radius-mini-badges)!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, border-color 0.2s !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-name { flex: 1 !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-val  { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; white-space: nowrap !important; }

/* Symptom severity dots — 0-4 answers, not yes/no. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-row { align-items: flex-start !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-dots { display: flex !important; gap: 3px !important; flex-shrink: 0 !important; margin-top: 3px !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-text { flex: 1 !important; min-width: 0 !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-desc { display: block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; opacity: var(--bsm3-opacity-high) !important; margin-top: 2px !important; line-height: 1.4 !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-row .bsm-flag-val { margin-top: 1px !important; }

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-no-data { text-align: center; padding: 40px 24px; border-radius: var(--bsm3-radius-primary-cards); }

/* Range description cards */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-range-card {
    display: block !important;
    padding: 14px 18px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 10px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-range-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-range-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-range-title {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-range-body {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.65 !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

/* GP card */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-gp-card {
    display: block !important;
    padding: 18px 20px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-top: 18px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-gp-title {
    display: block !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 6px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-gp-body {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Pregnancy warning card — distinct amber "pay attention" treatment,
   separate from the neutral green GP/info cards above, using the
   --signal-amber tokens already defined for this page. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-warning-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 20px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-warning-icon {
    flex-shrink: 0 !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    line-height: 1 !important;
    margin-top: 1px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-warning-title {
    display: block !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 6px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-warning-body {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* =========================================================================
   LEARNING COURSE — "Understanding Restless Legs" guided carousel. Sits
   above the Day Plan and gates it (see .bsm-legs-daybuild-locked-card
   below). One slide visible at a time inside a fixed-height viewport,
   sliding via transform on .bsm-legs-course-track — cover slide (0),
   9 content slides (1-9), done slide (10).
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-outer {
    margin-bottom: 24px !important;
}

/* Show/hide utility for everything below that gets toggled via JS (and
   conditionally rendered by PHP on load). Every other rule on this page
   is written "!important", including the base display rules for the
   elements below (.bsm-block, .bsm-legs-course-shell, etc.) — a plain
   inline style="display:none" loses to those, so hiding has to go through
   a class instead. Same fix as .bsm-edu-panel-hidden further up. Each
   selector below pairs the utility class with the element's own class so
   it always out-specifies that element's un-combined base rule. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-card.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-shell.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-hdr.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-card.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-wrap.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-time-row.bsm-legs-hidden {
    display: none !important;
}

/* Compact "already complete" summary shown instead of the full carousel
   on return visits — matches the Day Plan hero's shell/spacing so the two
   stacked cards read as one family. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-icon {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    flex-shrink: 0 !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-title {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-body {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
    max-width: var(--bsm3-width-standard)!important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-btn {
    flex-shrink: 0 !important;
    padding: 12px 22px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
}

/* Shell around the whole interactive carousel */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-shell {
    border-radius: var(--bsm3-radius-primary-cards) !important;
    padding: 22px 24px 20px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-label {
    flex-shrink: 0 !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.08em !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-track {
    flex: 1 !important;
    height: 6px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    overflow: hidden !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-fill {
    display: block !important;
    height: 100% !important;
    width: 0% !important;
    border-radius: var(--bsm3-radius-pills) !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-viewport {
    display: block !important;
    overflow: hidden !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-track {
    display: flex !important;
    align-items: stretch !important;
    width: 1100% !important; /* 11 slides: 1 cover + 9 content + 1 done */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-slide {
    flex: 0 0 auto !important;
    width: calc(100% / 11) !important;
    box-sizing: border-box !important;
    min-height: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 34px 30px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
}

/* Content slide variant (1-9) — holds one flip card (tap to reveal the
   explanation), same .bsm-flip system as "What This Means"/"Patterns &
   Signs" above, just re-sized to sit inside a carousel slide instead of a
   grid cell. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-slide.card {
    padding: 20px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-slide.card .bsm-flip.bsm-legs-course-flip {
    width: 100% !important;
    max-width: var(--bsm3-width-standard)!important;
    height: 230px !important;
}

/* Cover + done bookend slides */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-bookend-icon {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    margin-bottom: 14px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-bookend-eyebrow {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 8px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-bookend-title {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 10px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-bookend-body {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.65 !important;
    max-width: var(--bsm3-width-standard)!important;
    margin: 0 0 22px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-bookend-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-cta-btn {
    padding: 13px 26px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
}

/* Prev/Next nav row (content slides only) */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 18px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav-btn {
    padding: 10px 20px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav-btn:disabled {
    opacity: var(--bsm3-opacity-low) !important;
    cursor: not-allowed !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav-dots {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav-dot.active {
    transform: scale(1.4) !important;
}

/* =========================================================================
   BUILD YOUR DAY — locked state, shown until the course above is complete.
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 24px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-icon {
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    flex-shrink: 0 !important;
    opacity: var(--bsm3-opacity-high) !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-title {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-body {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
    max-width: var(--bsm3-width-standard)!important;
}

/* =========================================================================
   DAY PLAN — launcher, builder form, and generated timeline.
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-wrap {
    margin-bottom: 24px !important;
}

/* Launcher (no plan yet) + Active plan summary header share this shell */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-hero-title {
    display: block !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-hero-sub {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
    max-width: var(--bsm3-width-standard)!important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-btn.ghost {
    padding: 8px 4px !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-step-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.1em !important;
    margin: 26px 0 14px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-step-label::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-step-label:first-child {
    margin-top: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-source-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-source-btn {
    flex: 1 1 220px !important;
    text-align: left !important;
    padding: 16px 18px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-source-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 4px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-source-btn.selected .bsm-legs-dayplan-source-title::before {
    content: "✓" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-source-sub {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-time-row {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-time-field {
    flex: 1 1 160px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-time-field label {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-bottom: 6px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-input {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    box-sizing: border-box !important;
}

/* ---- Slot cards ----
   Each slot gets a colour-coded circular icon badge, matching the flip-card
   visual language already used in "What This Means"/"Patterns & Signs"
   above, rather than the flat identical-grey-box treatment this had before. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot {
    padding: 20px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 14px !important;
    transition: opacity 0.15s ease, border-color 0.15s ease !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot.disabled {
    opacity: var(--bsm3-opacity-medium) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

/* Circular colour-coded icon badge — one hue per slot, reusing the same
   gradient palette the flip cards above already use (green/teal/blue),
   plus the platform's existing amber/red brand tokens for the two
   caution-flavoured slots (meal/iron, alcohol). */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-title {
    display: block !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-desc {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.55 !important;
    margin-top: 4px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-time {
    display: inline-block !important;
    margin-top: 8px !important;
    padding: 3px 10px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

/* Toggle switch — plain checkbox, styled minimally */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-toggle {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 26px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important; left: 3px !important;
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    transition: left 0.15s ease !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-toggle:checked::before {
    left: 21px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-choice-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-choice-btn {
    padding: 9px 16px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-ferritin-box {
    margin-top: 14px !important;
    padding-top: 14px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-inline-note {
    display: block !important;
    margin-top: 10px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.55 !important;
    font-style: italic !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-save-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 18px !important;
    flex-wrap: wrap !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-save-msg {
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
}

/* ---- Active plan / generated timeline ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline {
    margin-top: 18px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-group-label {
    display: block !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.1em !important;
    margin: 18px 0 8px !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-group-label:first-child {
    margin-top: 0 !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 12px 4px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-time {
    flex-shrink: 0 !important;
    width: 78px !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    padding-top: 2px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-icon {
    flex-shrink: 0 !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    padding-top: 1px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-label {
    display: block !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-timeline-desc {
    display: block !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    line-height: 1.5 !important;
    margin-top: 2px !important;
}

/* ---- FLIP CARDS — 3-col (What This Means) ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip {
    display: block !important;
    perspective: 1200px !important;
    height: 240px !important;
    cursor: pointer !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-inner {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-style: preserve-3d !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip.flipped .bsm-flip-inner {
    transform: rotateY(180deg) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-f,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-b {
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    padding: 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-b {
    transform: rotateY(180deg) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-front-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 8px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-back-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* Gradient variants */

/* Flip card text — on gradient, always use --on-gradient vars */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-eyebrow   { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.2em !important; text-align:center !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-icon      { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height:1 !important; text-align:center !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-title     { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-align:center !important; margin:0 !important; line-height:1.25 !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-hint      { display:block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.14em !important; text-align:center !important; margin-top:auto !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-back-label  { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.18em !important; margin-bottom:10px !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-back-text   { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height:1.65 !important; margin:0 !important; flex:1 !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-back-hint   { display:block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.14em !important; margin-top:12px !important; }
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-back-tag    { display:inline-block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; border-radius: var(--bsm3-radius-pills)!important; padding:4px 10px !important; margin-top:10px !important; }

/* ---- PATTERNS & SIGNS — 2-col grid ---- */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-pat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flip-pat {
    display: block !important;
    perspective: 1200px !important;
    height: 200px !important;
    cursor: pointer !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-pat-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important; height: 50px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
}

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-pat-label {
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* =========================================================================
   EDIT PROFILE MODAL — Restless Legs (new build, same pattern as
   insomnia.php/circadian.php's .bsm-epm-tabs/.bsm-epm-tab-btn)
========================================================================= */
#bsm-legs-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }
#bsm-legs-dayplan-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }
#bsm-legs-wrapper .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: var(--bsm3-font-body) !important;
}
#bsm-legs-epm-status.bsm-epm-ok  { display: block !important; }
#bsm-legs-epm-status.bsm-epm-err { display: block !important; }
.bsm-legs-dayplan-step-label::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
}
.bsm-legs-dayplan-step-label:first-child { margin-top: 0 !important; }
.bsm-legs-dayplan-source-btn.selected .bsm-legs-dayplan-source-title::before {
    content: "✓" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}
.bsm-legs-dayplan-time-field label { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 6px !important; }
.bsm-legs-dayplan-slot.disabled { opacity: var(--bsm3-opacity-medium) !important; }
.bsm-legs-dayplan-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important; left: 3px !important;
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    transition: left 0.15s ease !important;
}
.bsm-legs-dayplan-toggle:checked::before { left: 21px !important; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-flex-1 { flex:1; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block-margin-bottom-8px { display:block; margin-bottom:8px; }

/* ===== SOURCE: sleep_platform/pages/panic.css ===== */


body{
margin:0;
font-family: var(--bsm3-font-body);
}

.container{
max-width:var(--bsm3-width-wide);
margin:auto;
padding:40px;
}

h1{
font-family: var(--bsm3-font-body);
font-size: var(--bsm3-text-large-16px-use-on-text);
margin-bottom:10px;
}

.subtitle{
opacity:var(--bsm3-opacity-high);
margin-bottom:35px;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.card{
border-radius: var(--bsm3-radius-primary-cards);
padding:25px;
}

.card h2{
font-family: var(--bsm3-font-body);
margin-top:0;
}

button{
padding:10px 16px;
border-radius:var(--bsm3-radius-status-cards);
font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
cursor:pointer;
margin-top:10px;
}

button:hover{
opacity:var(--bsm3-opacity-high);
}

.reassurance{
padding:15px;
border-radius: var(--bsm3-radius-status-cards);
margin-top:15px;
font-size:var(--bsm3-text-body-use-on-reading-text);
line-height:1.6;
}

textarea{
width:100%;
height:80px;
border-radius: var(--bsm3-radius-status-cards);
padding:10px;
margin-top:12px;
}

.response{
margin-top:18px;
padding:15px;
border-radius: var(--bsm3-radius-status-cards);
font-size:var(--bsm3-text-body-use-on-reading-text);
line-height:1.6;
}

.audio-box{
padding:12px;
border-radius: var(--bsm3-radius-status-cards);
margin-top:15px;
}

.night-interface{
border-radius: var(--bsm3-radius-primary-cards);
padding:18px;
margin-top:15px;
}

.metric{
font-size:var(--bsm3-text-medium-14px-use-on-text);
opacity:var(--bsm3-opacity-high);
margin-bottom:6px;
}


/* ===== SOURCE: sleep_platform/pages/research.css ===== */

    /* 1. GLOBAL LAYOUT */
    .research-wrapper { 
        width: 100%; 
        max-width: var(--bsm3-width-wide); 
        margin: 0 auto;
        padding-bottom: 150px; 
    }

    /* 2. NAVIGATION */

    /* 3. HERO SECTION */
    .res-header { margin-bottom: 80px; }
    .res-header h1 { 
        font-family: var(--bsm3-font-body); 
        font-size: var(--bsm3-size-page-title-24px-use-on-h1); 
        margin: 0 0 25px 0; 
        line-height: 1.05; 
        letter-spacing: -0.02em;
    }
    .res-intro {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        max-width: var(--bsm3-width-wide);
        padding-left: 25px;
        margin-left: 5px;
    }

    /* 4. RESEARCH GRID SYSTEM */
    .topic-section { margin-bottom: 80px; }
    
    .topic-title {
        font-size: var(--bsm3-text-medium-14px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.2em;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: block;
        opacity: var(--bsm3-opacity-high);
    }

    .paper-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 30px; 
    }

    /* 5. PAPER CARD DESIGN (Glassmorphism) */
    .paper-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 35px !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .paper-card:hover {
        transform: translateY(-5px);
    }

    .journal-tag {
        font-size: var(--bsm3-text-small-12px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.1em;
        margin-bottom: 15px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .paper-title {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text);
        margin-bottom: 15px;
        line-height: 1.3;
    }
    .paper-summary {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        opacity: var(--bsm3-opacity-high);
        margin-bottom: 25px;
        flex-grow: 1; /* Pushes button to bottom */
    }

    /* 6. LINK BUTTONS */
    .btn-source {
        padding: 10px 20px; 
        border-radius: var(--bsm3-radius-pills);
        font-size: var(--bsm3-text-small-12px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize;
        letter-spacing: 0.05em;
        align-self: flex-start;
        cursor: pointer;
        transition: 0.3s;
    }

    /* MOBILE OPTIMIZATION */
    @media (max-width: 900px) { 
        .paper-grid { grid-template-columns: 1fr !important; gap: 20px; }
        .res-header h1 { font-size: var(--bsm3-text-large-16px-use-on-text); }
    }

/* ===== SOURCE: sleep_platform/pages/sleep_diary.css ===== */

/* Adaptive Glass Variables & Dynamic Text Colors */
#bsm-app-root #spa-stage #bsm_diary_wrapper {

    width: 100%;
    max-width: var(--bsm3-width-standard);
    margin: 0 auto;
    font-family: inherit;
}

/* Day Mode Text Colors */



/* =========================================================================
   TRIPLE-ID TYPOGRAPHY LOCK 
   Forces exact text colors, crushing Master Shell inheritance
========================================================================= */

/* Glass Panels */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-glass-panel {
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
    position: relative;
}

/* Progressive Flow Hiding */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-step { display: none; opacity: 0; transform: translateY(10px); }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-step.active { display: block; opacity: 1; transform: translateY(0); animation: slideUp 0.4s ease forwards; }@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Headers & Text Base Sizes */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-title { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 8px 0; line-height: 1.3; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-subtitle { font-size: var(--bsm3-text-medium-14px-use-on-text); margin: 0 0 20px 0; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-label { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); display: block; margin-bottom: 12px; }

/* Calendar Date Badge */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-date-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 20px; }

/* Calendar Track */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 16px; scrollbar-width: none; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-track::-webkit-scrollbar { display: none; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-day { flex: 1; min-width: 55px; border-radius: var(--bsm3-radius-primary-cards); padding: 12px 4px; text-align: center; cursor: pointer; transition: all 0.2s ease; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-name { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; opacity: var(--bsm3-opacity-high); display: block; margin-bottom: 4px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-num { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

/* Navigation Buttons */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-btn-back { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; padding: 0; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.2s; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-btn-back:hover { opacity: 1 !important; }

/* Big Buttons & Toggles */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-btn { width: 100%; border-radius: var(--bsm3-radius-primary-cards); padding: 16px; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-btn-skip { width: 100%; padding: 12px; margin-top: 12px; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; transition: color 0.2s; }

/* In-Sentence Clickable Times */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-time-display { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); text-align: center; margin: 32px 0; line-height: 2.5; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-inline-time-btn { border-radius: var(--bsm3-radius-primary-cards); padding: 6px 14px; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; display: inline-block; transition: all 0.2s; margin: 0 4px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-inline-time-btn:hover { transform: scale(1.05); }

/* Summary Stats Grid */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-summary-grid { display: flex; gap: 12px; margin-bottom: 24px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-summary-stat { flex: 1; border-radius: var(--bsm3-radius-primary-cards); padding: 20px 12px; text-align: center; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-summary-val { display: block; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 4px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-summary-label { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; opacity: var(--bsm3-opacity-high); }

/* View Therapy modal (mstOpenModal) -- this pair was missing entirely on
   Sleep Therapies pages, so #mst-global-modal had no display:none/flex
   rule anywhere and the View button did nothing visible. */
#mst-global-modal.bsm-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; align-items: center; justify-content: center; padding: 20px; }
#mst-global-modal.bsm-modal-overlay.active { display: flex; }

/* Custom Static Grid Modal */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-modal-content { width: 100%; max-width: var(--bsm3-width-narrow); }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-time-picker-layout { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-time-section-title { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity: var(--bsm3-opacity-medium); text-transform: capitalize; margin-bottom: 8px; text-align: center; letter-spacing: 1px; }

#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-hours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-mins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-ampm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Base Styles for Grids, Chunks, and Emojis */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-grid-btn { border-radius: var(--bsm3-radius-primary-cards); padding: 14px 4px; text-align: center; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: all 0.2s ease; user-select: none; touch-action: manipulation; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-grid { display: flex; gap: 8px; margin-bottom: 24px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box { flex: 1; border-radius: var(--bsm3-radius-primary-cards); padding: 16px 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; user-select: none; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-title { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-sub { font-size: var(--bsm3-text-body-use-on-reading-text); margin-top: 2px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-emoji-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-emoji-box { flex: 1; border-radius: var(--bsm3-radius-primary-cards); padding: 16px 0; text-align: center; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: all 0.2s ease; opacity: var(--bsm3-opacity-medium); }

/* Hover States */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-grid-btn:hover,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box:hover,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-emoji-box:hover {
    transform: translateY(-2px);
    opacity: 1;
}

/* =========================================================================
   ABSOLUTE OVERRIDE FOR ACTIVE STATES
   (Forces white text and purple background)
========================================================================= */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-grid-btn.active,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-emoji-box.active,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-day.active,
#bsm-app-root[data-theme="day"] #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active {
    transform: translateY(-2px) scale(1.02) !important;
    opacity: 1 !important;
}

#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active .bsm-chunk-title,
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active .bsm-chunk-sub,
#bsm-app-root[data-theme="day"] #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active .bsm-chunk-title,
#bsm-app-root[data-theme="day"] #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active .bsm-chunk-sub {
    opacity: 1 !important;
}

/* Primary Button Active/Hover force white text */

/* Textarea */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-textarea-wrap { position: relative; margin-bottom: 20px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-textarea { width: 100%; border-radius: var(--bsm3-radius-primary-cards); padding: 16px; padding-right: 40px; font-size: var(--bsm3-text-medium-14px-use-on-text); font-family: inherit; resize: none; height: 100px; }
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-mic-icon { position: absolute; top: 16px; right: 16px; font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-medium); pointer-events: none; }

/* Alerts */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-glass-alert { padding: 20px; border-radius: var(--bsm3-radius-primary-cards); text-align: center; margin-top: 20px; }

/* =========================================
   DAY MODE EXPLICIT CLEANUP 
   (Protects non-active items from looking muddy)
========================================= */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-transform-none-margin-bottom-4px-op { text-transform:none; margin-bottom:4px; opacity:var(--bsm3-opacity-high); }
.u-margin-0-4 { margin: 0; }

/* ===== SOURCE: sleep_platform/pages/sleep_dump.css ===== */

    #bsm-rules-page {
        display: block;
        max-width: var(--bsm3-width-wide);
        margin: 0 auto;
        padding: 32px 20px 100px;
        font-family: var(--bsm3-font-body);
        line-height: 1.5;
    }
    #bsm-rules-page * { box-sizing: border-box; }

    /* Nuke every theme default that might collide — headings, links, lists */
    #bsm-rules-page h1, #bsm-rules-page h2, #bsm-rules-page h3, #bsm-rules-page h4,
    #bsm-rules-page p, #bsm-rules-page li, #bsm-rules-page span, #bsm-rules-page strong {
        font-family: var(--bsm3-font-body) !important;
        padding-bottom: 0 !important;
        margin: 0;
    }

    #bsm-rules-page .page-banner {
        font-size: var(--bsm3-text-body-use-on-reading-text);
        padding: 10px 14px; margin-bottom: 28px;
        border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0;
    }

    #bsm-rules-page h1 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 6px !important; }
    #bsm-rules-page .subtitle { font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 40px !important; }

    /* ── Condition section shell ── */
    #bsm-rules-page .cond-section { margin-bottom: 44px; }
    #bsm-rules-page .cond-head {
        display: flex; align-items: center; gap: 10px; margin-bottom: 4px !important;
        flex-wrap: wrap;
    }
    #bsm-rules-page .cond-head h2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
    #bsm-rules-page .status-tag {
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize; letter-spacing: 0.06em;
        padding: 3px 9px; border-radius: var(--bsm3-radius-primary-cards);
    }
    #bsm-rules-page .cond-desc { font-size: var(--bsm3-text-body-use-on-reading-text); margin: 4px 0 14px !important; }

    /* ── Rules bullet block ── */
    #bsm-rules-page .rules-label {
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize; letter-spacing: 0.08em; margin-bottom: 8px !important;
    }
    #bsm-rules-page .rules-list { padding-left: 20px; margin-bottom: 22px !important; }
    #bsm-rules-page .rules-list li { font-size: var(--bsm3-text-body-use-on-reading-text); margin-bottom: 7px; }

    /* ── Example timeline widget (mirrors your attached circadian mock) ── */
    #bsm-rules-page .example-label {
        font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize; letter-spacing: 0.08em; margin-bottom: 8px !important;
    }
    #bsm-rules-page .timeline-card {
        border-radius: var(--bsm3-radius-primary-cards);
        padding: 22px 24px 20px;
    }
    #bsm-rules-page .tl-chips { display: flex; gap: 10px; margin-bottom: 18px !important; }
    #bsm-rules-page .tl-chip {
        border-radius: var(--bsm3-radius-primary-cards);
        padding: 8px 16px;
        text-align: center;
    }
    #bsm-rules-page .tl-chip .chip-lbl {
        display: block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; letter-spacing: 0.08em; margin-bottom: 2px !important;
    }
    #bsm-rules-page .tl-chip .chip-val { display: block; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

    #bsm-rules-page .tl-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px !important; }
    #bsm-rules-page .tl-head .pin { font-size: var(--bsm3-text-large-16px-use-on-text); }
    #bsm-rules-page .tl-head .tl-title { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
    #bsm-rules-page .tl-target { font-size: var(--bsm3-text-body-use-on-reading-text); margin-bottom: 14px !important; }

    #bsm-rules-page .tl-rows { position: relative; padding-left: 34px; }
    #bsm-rules-page .tl-rows::before {
        content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px;
        width: 2px;
    }
    #bsm-rules-page .tl-row { position: relative; padding-bottom: 22px; }
    #bsm-rules-page .tl-row:last-child { padding-bottom: 0; }
    #bsm-rules-page .tl-icon {
        position: absolute; left: -34px; top: 0;
        width: 26px; height: 26px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: var(--bsm3-text-small-12px-use-on-text);
    }
    #bsm-rules-page .tl-time { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 2px !important; }
    #bsm-rules-page .tl-row-title { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 2px !important; }
    #bsm-rules-page .tl-row-desc { font-size: var(--bsm3-text-body-use-on-reading-text); }

    #bsm-rules-page hr.section-div {
        margin: 40px 0 !important;
    }

/* ===== SOURCE: sleep_platform/pages/sleep_planner.css ===== */

/* ── DESIGN TOKENS -- brought into line with master_shell.php / dashboard.php's
   dark-glass system (--brand-purple var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon), --bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon), translucent
   glass surfaces, pill-radius controls) instead of this page's old standalone
   light/teal SaaS palette. Variable NAMES kept the same so every existing
   var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon)/var(--text)/etc. reference below repaints automatically --
   only the values change, so no HTML/JS had to move. */
* { box-sizing: border-box; }
.np-wrapper { margin: 0 auto; font-family: var(--bsm3-font-body); min-height: 100vh; padding-bottom: 60px; width: 100% !important; max-width: 100vw; overflow-x: hidden; }
/* 26 Sep 2026: the site-wide ".is-layout-constrained > *" rule (common.css) gives
   the wrapper 20px side margins, so width:100% ran 40px past the page and the
   right edge (nav Day/Sleep switch, therapy list) was cut off. Auto width fits
   inside those margins. */
.is-layout-constrained > .np-wrapper { width: auto !important; }
/* Day/Night/Sleep switch -- Sleep Planner. Direct values only, per
   DAYNIGHTSLEEP_MODE_PLAN.md.
   SWAPPED 16 sep 2026: the apricot/pink override used to sit on "sleep" --
   moved to "night" so the button now labelled Sleep keeps showing the look
   it always has, per Chris's nav-label swap.
   FIXED 16 sep 2026 (2nd pass): "sleep" was left to fall through to the
   base rule's var(--bg)/var(--text) above, but a LATER, unrelated :root
   block further down this merged file (line ~19913, from a different
   source file) redefines --bg globally to --brand-gray-100 -- it wins the
   cascade site-wide and was silently turning "sleep"'s background light
   grey instead of dark. Sleep now gets its own explicit dark values here,
   same as Day and Night, so it can't be clobbered by any other --bg/--text
   redefinition anywhere else in this file. */
/* REVERSED 18 Sep 2026: Chris's nav-label swap above is retired -- amber
   is no longer used anywhere in the sleep theme, on purpose. The "night"
   rule just below no longer carries the apricot override either (it now
   points at the same white-on-black values as "sleep"), so which
   attribute value the amber sat on doesn't matter any more -- there is
   no amber left to sit anywhere. Sleep, Night and Day now all read
   white-on-black / black-on-white consistently with the main Sleep Hub
   and My Sleep Therapies. Left the history above in place for context. */
/* !important added 16 sep 2026 -- a leftover duplicate rule further down
   this file, "#np-screen-builder .np-wrapper", sets this same wrapper's
   background/color from var(--bg)/var(--text) instead. It is ID-scoped,
   so it outranks this plain class+attribute selector regardless of
   source order, silently cancelling out the Day/Night/Sleep colours
   below (falls through to --bg/--text instead, which is where the
   see-through background + forced-black-text bug came from).
   !important forces these three to win outright instead of trying to
   out-specificity an ID selector. */



/* ── DEFENSIVE BACKGROUND OVERRIDE ──────────────────────────────────────
   sleep_top_nav.php includes menus/menu_sleep.php at its own tail end (see
   that file's own header comment) -- a file outside this project's
   editable scope that predates the dark-glass reskin. If it (or any
   ancestor the shell provides) paints an opaque light background behind
   this fragment, the translucent --glass tokens above have nothing dark
   to tint against and read as solid white instead of dark glass. This
   forces the wrapper itself back to a solid dark surface so the panel
   stays on-theme no matter what sits behind or beside it. High-specificity
   selector + !important so it wins regardless of menu_sleep.php's own
   <style> block or source order. */
/* Same override, extended to the top bar and whatever menu_sleep.php
   renders. Both are direct children of .np-wrapper, output by the
   sleep_top_nav.php include, sitting before the two screens below --
   targeted by position, not by name, since menu_sleep.php's own markup
   and classes are outside this project's visibility. .np-top-bar keeps
   its intended glass tint (forced, in case menu_sleep.php's CSS was
   overriding it); whatever menu_sleep.php outputs gets the same tint so
   it reads as another dark glass bar instead of a stray white one. Both
   !important + high specificity for the same reason as above. */
.np-screen.active { display: block; }
.np-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-radius: var(--bsm3-radius-primary-cards); position: sticky; top: 10px; z-index: 1000; margin: 10px 10px 20px 10px; }
.np-brand h1 { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }
.np-nav-btn { padding: 8px 16px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s;}

/* Builder Layout */
.np-canvas { padding: 20px; }
@media (min-width: 901px) {
    #np-screen-builder.active { display: flex; gap: 30px; padding: 30px; }
    .np-canvas { flex: 1; padding: 0; }
    .np-palette { flex: none; width: 330px; min-width: 330px; position: sticky; top: 90px; height: calc(100vh - 120px); overflow-y: auto; border-radius: var(--bsm3-radius-primary-cards); padding: 25px; }
}

.np-input { width: 100%; padding: 10px 15px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 15px; font-weight: var(--bsm3-weight-bold-700-use-on-h1);}
.np-zone-tab { padding: 8px 12px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; white-space: nowrap; }

.np-zone-container { border-radius: var(--bsm3-radius-primary-cards); padding: 15px; min-height: 250px; display: flex; flex-direction: column; transition: 0.2s; }
.np-zone.active { display: block; }

.np-mini-item { border-radius: var(--bsm3-radius-status-cards); padding: 8px 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; font-size: var(--bsm3-text-body-use-on-reading-text); position: relative; transition: 0.2s;}
.np-btn-view { font-size: var(--bsm3-text-small-12px-use-on-text); padding: 4px 8px; border-radius: var(--bsm3-radius-status-cards); cursor: pointer; text-transform: capitalize; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

.np-save-btn { width: 100%; margin-top: 20px; padding: 18px; border-radius: var(--bsm3-radius-primary-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; }
.np-save-btn:hover { transform: translateY(-2px); }

/* Palette & Filters -- search box + single grouped dropdown, mirrors the
   Activity Planner's Search + "Work" category dropdown pattern. */
.np-search-row { display: flex; gap: 8px; margin-bottom: 10px; max-width: 100%; }
.np-search-row .np-input { margin-bottom: 0; }
.np-search-row input.np-input { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
.np-search-row select.np-input { flex: 0 0 auto; width: -moz-fit-content; width: fit-content; min-width: 0; padding-left: 10px; padding-right: 6px; }
#np-search { flex: 1 1 0; min-width: 0; }
#np-filter-select { flex: 0 0 auto; width: -moz-fit-content; width: fit-content; min-width: 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; padding-left: 10px; padding-right: 6px; }
.np-add-therapies-link { display:block; text-align:right; font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:-4px 0 10px 0; }

/* Simple tap-to-add row */
.np-simple-row { padding: 8px 10px; margin-bottom: 8px; border-radius: var(--bsm3-radius-status-cards); display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-size: var(--bsm3-text-body-use-on-reading-text); transition: 0.2s; }
.np-simple-row:active { cursor: grabbing; }
.np-simple-row-left { display: flex; align-items: center; gap: 8px; font-size: var(--bsm3-text-large-16px-use-on-text); }
.np-simple-row-left span { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.np-simple-row-right { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); padding: 2px 8px; border-radius: var(--bsm3-radius-mini-badges); flex-shrink: 0; }
.np-simple-row:hover { transform: translateY(-1px); }

.np-palette-empty { text-align: center; font-style: italic; padding: 30px 15px; font-size: var(--bsm3-text-body-use-on-reading-text); }

/* Modals */
.np-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 15px; }
.np-modal-box { width: 100%; max-width: var(--bsm3-width-standard); border-radius: var(--bsm3-radius-primary-cards); padding: 25px; position: relative; max-height: 90vh; overflow-y: auto; }

/* My Plans Grid -- unified card, exact same structure/colours as
   Body/Meal/Activity/Mind Plan's own .np-unified-card / .bp-unified-card.
   No grid wrapper around the cards themselves -- plain block stacking,
   one card per row, matching Body Plan's own list (see
   release_plans/SCHEDULER_MASTER_PLAN.md's Mind Plan card-rebuild
   entries for why: a grid wrapper here previously packed 3 per row). */
.np-unified-card { padding: 25px; border-radius: var(--bsm3-radius-primary-cards); position: relative; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; margin-bottom: 20px; }
.np-unified-card:hover { transform: translateY(-2px); }
.np-unified-card h3, .np-unified-card p, .np-unified-card button { font-family: var(--bsm3-font-body) !important; }
.np-plan-del { position: absolute; top: 25px; right: 25px; cursor: pointer; font-size: var(--bsm3-text-large-16px-use-on-text); padding: 5px; transition: 0.2s; }
.np-plan-del:hover { transform: scale(1.1); }
.np-list-badge { display: inline-block; white-space: nowrap; padding: 6px 12px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; }
.np-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
/* Recoloured from Body Plan's light-theme hex values onto the shared
   brand-purple/glass system so this card matches every other planner's
   dark-mode look rather than standing out as a light-mode leftover. */
.np-plan-match { padding: 12px 16px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; }
.np-plan-open { padding: 12px 16px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; }
@media (max-width: 900px) { .np-card-actions { grid-template-columns: 1fr; } }

/* Plan Detail View Overlay -- same bordered, slide-up box as
   Meal/Activity/Body/Mind Plan's own canvas overlays. Content is fetched
   from get_plan_details_html and injected as-is. Replaces the old
   full-screen #np-screen-view tab (base64-blob client-side rendering). */
.np-canvas-overlay {
    position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
    width: 100%; max-width: var(--bsm3-width-wide)!important; height: 90vh; border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0; z-index: 10001;
    display: flex; flex-direction: column; transform: translateY(110%);
    transition: transform 0.35s ease; visibility: hidden;
}
.np-canvas-overlay.open { transform: translateY(0); visibility: visible; }
.np-canvas-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0; }
.np-canvas-close { padding: 8px 16px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; }
.np-canvas-body { padding: 30px; overflow-y: auto; flex: 1; min-height: 0; }
.np-canvas-footer { padding: 15px 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.np-canvas-print-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; flex: 1 1 220px; max-width: var(--bsm3-width-narrow); display: flex; align-items: center; justify-content: center; gap: 8px; }
.np-canvas-schedule-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; flex: 1 1 220px; max-width: var(--bsm3-width-narrow); }

@media print {
    body * { visibility: hidden; }
    #np-canvas-overlay, #np-canvas-overlay * { visibility: visible; }
    #np-canvas-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: none;
    }
    .np-canvas-header, .np-canvas-footer { display: none !important; }
    .np-canvas-body { overflow: visible !important; padding: 0 !important; }
}

/* Drawer -- technique "science & steps" detail, same shell Mind Plan
   uses (mind/mind_tool_planner.php), same shared
   anxiety/anxiety_science.php content (generic step lookup, not
   Mind-specific -- wellness-scheduler.php's own former sleep-plan
   rendering already reused this same file). No content_b/c/d panes --
   Sleep has no archetype/"Fabulous You" narrative to show. */
.mind-drawer-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10010; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mind-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.mind-drawer-backdrop.invisible-bg { pointer-events: none !important; }
.mind-drawer-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: var(--bsm3-width-standard); height: 100%; z-index: 10011; transition: right 0.3s; padding: 20px; overflow-y: auto; }
.mind-drawer-panel.open { right: 0; }
.mind-drawer-close { position: absolute; top: 15px; right: 15px; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; z-index: 100;}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-10px { margin-bottom:10px; }
.u-text-align-left { text-align:left; }
.u-text-align-center-padding-40px-color-e07 { text-align:center; padding:40px; }
.u-text-align-center-color-e07a5f-padding-2 { text-align:center; padding:20px; }
.u-margin-top-10px { margin-top:10px; }
.u-margin-bottom-15px-text-align-center { margin-bottom:15px; text-align:center; }
.u-font-size-12px-color-var-muted-font-styl { font-size:var(--bsm3-text-small-12px-use-on-text); font-style:italic; }
.u-font-size-12px-color-64748b-font-style-i { font-size:var(--bsm3-text-small-12px-use-on-text); font-style:italic; }
.u-display-flex-justify-content-space-betwe { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; padding-right:30px; }
.u-display-flex-align-items-center-gap-15px { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.u-margin-top-30px { margin-top: 30px; }
.u-display-inline-block-background-e6f2f2-c { display:inline-block; padding:8px 16px; border-radius:var(--bsm3-radius-status-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text); }

/* ===== SOURCE: sleep_platform/pages/sleep_world.css ===== */

    /* ══════════════════════════════════════════════════════════════════════
       DESIGN TOKENS — each SPA page defines its own scoped copy of these
       custom properties rather than truly sharing one global set (dashboard.php
       scopes its copy to #bsm-dash-v35, insomnia.php's CBT-I hub scopes its
       copy to #bsm-spa-root — see the "TRIPLE-ID ARMOR" block at the top of
       insomnia.php). This page's wrapper (#bsm-sw-wrapper) sits outside both
       of those, so without its own copy every var(--glass-bg) / var(--brand-
       purple) / var(--diary-text) below silently resolved to nothing and the
       whole page rendered as near-invisible dark-on-dark text. Values here
       are copied 1:1 from insomnia.php so Sleep World matches the rest of
       the SPA (including its Day/Sleep theme overrides) instead of inventing
       a separate palette.
       ══════════════════════════════════════════════════════════════════════ */
    
    #bsm-sw-wrapper {
        display: block;
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto;
        padding: 24px 24px 100px;
        box-sizing: border-box;
        font-family: var(--bsm3-font-body);
        animation: bsmSwFadeIn 0.6s ease-out;
    }
    #bsm-sw-wrapper h1, #bsm-sw-wrapper h2, #bsm-sw-wrapper h3, #bsm-sw-wrapper h4,
    #bsm-sw-wrapper p, #bsm-sw-wrapper span, #bsm-sw-wrapper label {
        font-family: var(--bsm3-font-body);
        margin: 0;
    }@keyframes bsmSwFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
    .content-grid { display: none !important; }
    #sw-tab-1:checked ~ .sleep-world-content-area #content-1 { display: grid !important; }
    #sw-tab-2:checked ~ .sleep-world-content-area #content-2 { display: grid !important; }
    #sw-tab-3:checked ~ .sleep-world-content-area #content-3 { display: grid !important; }
    #sw-tab-4:checked ~ .sleep-world-content-area #content-4 { display: grid !important; }
    #sw-tab-5:checked ~ .sleep-world-content-area #content-5 { display: grid !important; }
    #sw-tab-6:checked ~ .sleep-world-content-area #content-6 { display: block !important; }
    #sw-tab-7:checked ~ .sleep-world-content-area #content-7 { display: grid !important; }
    #sw-tab-8:checked ~ .sleep-world-content-area #content-8 { display: block !important; }

    /* Home/menu vs. a section being open — #sw-home is a 9th radio in the
       same group as the 8 sw-tab-N inputs, checked by default. The tile
       grid + search bar show only at "home"; each content-N pane and the
       single shared "back to menu" link show only once a tile has been
       opened. This replaces the old two-tier pill-tab nav (which read as
       cluttered/app-like) with a calmer tap-a-tile home screen, the same
       drill-down pattern already used one level up on the Dashboard's
       Explore cards. */
    .sw-home-only { display: none; }
    #sw-home:checked ~ .sleep-world-content-area .sw-home-only { display: block; }
    #sw-home:checked ~ .sleep-world-content-area .search-filter-bar.sw-home-only { display: flex !important; }
    #sw-home:checked ~ .sleep-world-content-area .sw-tile-grid.sw-home-only { display: grid !important; }
    .sw-section-only { display: none !important; }
    #sw-tab-1:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-2:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-3:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-4:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-5:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-6:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-7:checked ~ .sleep-world-content-area .sw-section-only,
    #sw-tab-8:checked ~ .sleep-world-content-area .sw-section-only {
        display: inline-flex !important;
    }
    .sw-header h1 {
        font-size: var(--bsm3-size-page-title-24px-use-on-h1);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: -0.03em; line-height: 1.1;
        margin-bottom: 6px; /* overrides the theme's default green
                                            heading underline so it doesn't
                                            cut across the dark hero */
        padding-bottom: 0 !important;
    }
    .sw-header p {
        font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
        max-width: var(--bsm3-width-standard); line-height: 1.5;
    }
    .sw-tab-intro-icon svg { width: 14px; height: 14px; stroke-width: 2px; }
    .sw-tab-intro-body strong { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
    .sw-tab-intro-body p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.45; opacity: var(--bsm3-opacity-medium); }

    /* 5. SEARCH BAR */
    .search-filter-bar { display: flex; gap: 12px; max-width: var(--bsm3-width-standard); align-items: center; margin-bottom: 28px; }
    .search-input::placeholder { opacity: var(--bsm3-opacity-medium) !important; }
    .filter-btn:hover { transform: translateY(-2px); }

    /* 6. HOME TILE GRID — replaces the old pill-tab nav. A calm grid of
       large tap targets, each one a destination (like the Dashboard's own
       Explore cards), rather than nested tabs/categories to parse. */
    .sw-tile-grid {
        display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 12px; margin-bottom: 12px;
    }
    .sw-tile {
        border-radius: var(--bsm3-radius-primary-cards); padding: 20px 12px;
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
        cursor: pointer; user-select: none;
        transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }
    .sw-tile:hover { transform: translateY(-4px); }
    .sw-tile-icon {
        width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    }
    .sw-tile-icon svg { width: 22px; height: 22px; stroke-width: 1.8px; }
    .sw-tile-title { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
    .sw-tile-sub { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.35; }

    /* Shared "back to menu" link, shown once a tile has been opened
       (.sw-section-only above). Same visual language as .sw-back-nav. */
    .sw-back-to-menu {
        align-items: center; gap: 8px; cursor: pointer; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-medium-14px-use-on-text);
        margin-bottom: 20px; transition: color 0.2s ease;
    }
    .sw-back-to-menu svg { width: 18px; height: 18px; stroke-width: 2px; }
    .content-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px; margin-bottom: 12px;
    }
    .content-card:hover { transform: translateY(-4px); }
    .content-card h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }
    .content-card p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.5; margin-bottom: 18px; }
    .card-meta span { font-size: var(--bsm3-text-small-12px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
    .card-tag {
        padding: 4px 10px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize; letter-spacing: 0.04em; margin-bottom: 14px;
        display: inline-block; align-self: flex-start;
    }
    .play-btn:hover { transform: scale(1.08); }
    .scene-poster::after {
        content: ""; position: absolute; inset: 0;
    }
    .scene-poster-label span { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity: var(--bsm3-opacity-high); }
    .scene-poster-label .play-btn { width: 52px; height: 52px; }
    .scene-poster-label .play-btn svg { width: 20px; height: 20px; }
    .content-card.scene-card h3,
    .content-card.scene-card p { padding-left: 8px; padding-right: 8px; }
    .content-card.scene-card .card-tag,
    .content-card.scene-card .card-meta { margin-left: 8px; margin-right: 8px; }

    /* =====================================================================
       CINEMATIC VIDEO OVERLAY — copied 1:1 from the Week 4 Day 6 CBT-I
       module (cbti_module_week4_day6.php) so Sleep Scenes opens the exact
       same full-screen player, instead of an inline <video> per card.
       ===================================================================== */
                    #bsm-cinematic-overlay .star {
        position: absolute; border-radius: 50%; width: 4px; height: 4px;
        opacity: var(--bsm3-opacity-high); animation: bsm-sw-twinkle 2s infinite alternate; transition: opacity 1s ease;
    }@keyframes bsm-sw-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}
                                                .sound-builder-block h2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align: center; margin-bottom: 10px; }
    .sound-builder-block .description { opacity: var(--bsm3-opacity-medium); text-align: center; max-width: var(--bsm3-width-standard); margin: 0 auto 32px auto; font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; }
    .builder-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .control-group label { display: block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 12px; }
    input[type="range"] { width: 100%; height: 6px; border-radius: var(--bsm3-radius-mini-badges); appearance: none; }
    input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; }

    @media (max-width: 900px) {
        .sw-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
        .content-grid { grid-template-columns: 1fr; }
        .builder-controls { grid-template-columns: 1fr; }
        .search-filter-bar { flex-direction: column; align-items: stretch; }
    }
    @media (max-width: 900px) {
        .sw-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .sw-tools-header h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 6px; }
    .sw-tools-header p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); }
    .sw-tool-item:hover { transform: translateX(4px); }
    .sw-tool-item-icon svg { width: 20px; height: 20px; stroke-width: 2px; }

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ===== SOURCE: sleep_platform/pages/symptoms.css ===== */

    /* 1. GLOBAL LAYOUT & ANIMATION */
    .symptoms-wrapper { 
        width: 100%; 
        max-width: var(--bsm3-width-wide); 
        margin: 0 auto;
        padding-bottom: 150px; 
    } 

    /* 3. HERO SECTION */
    .sym-header { margin-bottom: 100px; position: relative; padding-top: 40px; }
    .sym-header h1 { 
        font-family: var(--bsm3-font-body); 
        font-size: var(--bsm3-size-page-title-24px-use-on-h1); 
        margin: 0 0 30px 0; 
        line-height: 1.05; 
        letter-spacing: -0.02em;
    }
    .sym-subheading {
        font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
        line-height: 1.4;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        display: block;
        max-width: var(--bsm3-width-wide);
    }
    .sym-intro-text {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        opacity: var(--bsm3-opacity-high);
        line-height: 1.8;
        max-width: var(--bsm3-width-wide);
        padding-left: 25px;
        margin-left: 5px;
    }
    .sym-reassurance {
        font-size: var(--bsm3-text-body-use-on-reading-text);
        font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        margin-top: 20px;
        display: block;
        margin-left: 30px; 
    }

    /* 4. SECTION: NIGHT SYMPTOMS (RESTORED ALL BULLETS) */
    .section-night { margin-bottom: 100px; }
    .section-title-sm {
        font-size: var(--bsm3-text-medium-14px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.2em;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: block;
    }
    .night-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        column-gap: 60px; 
        row-gap: 30px; 
    }
    .night-item {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
        padding-bottom: 20px; 
    }
    .night-icon { font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-high); }

    /* 5. SECTION: THE 3 ZONES */
    .three-col-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 40px !important; margin-bottom: 100px !important; }
    .zone-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 40px !important; display: flex; flex-direction: column; transition: transform 0.4s ease; }
    .zone-card:hover { transform: translateY(-10px); }
    .zone-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 5px; }
    .zone-sub { font-size: var(--bsm3-text-body-use-on-reading-text); text-transform: capitalize; letter-spacing: 0.05em; opacity: var(--bsm3-opacity-medium); margin-bottom: 30px; display: block; }
    .zone-list { list-style: none; padding: 0; margin: 0; }
    .zone-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 18px; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); line-height: 1.6; opacity: var(--bsm3-opacity-high); }
    .zone-icon { font-size: var(--bsm3-text-medium-14px-use-on-text); margin-top: 6px; }

    /* 6. SECTION: ADRENALINE */
    .adrenaline-block { margin-bottom: 100px; padding: 60px; border-radius: 0 var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0; position: relative; }
    .adren-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 25px; }
    .adren-text { font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.8; max-width: var(--bsm3-width-wide); opacity: var(--bsm3-opacity-high); }
    .highlight-text { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

    /* 7. SECTION: RISK FACTORS (RESTORED ALL BULLETS) */
    .risk-section { margin-bottom: 100px; }
    .risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .risk-col { display: flex; flex-direction: column; gap: 15px; }
    .risk-item { font-size: var(--bsm3-text-large-16px-use-on-text); padding: 15px 0; display: flex; align-items: center; gap: 15px; }
    .dot { width: 6px; height: 6px; border-radius: 50%; opacity: var(--bsm3-opacity-medium); }

    /* 8. SECTION: CTA (UPDATED) */
    .cta-container { text-align: center; padding: 80px 40px; border-radius: var(--bsm3-radius-primary-cards); position: relative; overflow: hidden; }
    .cta-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; opacity: var(--bsm3-opacity-medium); }
    .cta-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 20px; }
    .cta-desc { font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-high); max-width: var(--bsm3-width-narrow); margin: 0 auto 40px auto; }

    .btn-premium { padding: 20px 50px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: capitalize; letter-spacing: 0.1em; }
    .btn-premium:hover { transform: scale(1.02); }@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
}

    @media (max-width: 900px) { 
        .three-col-grid, .night-grid, .risk-grid { grid-template-columns: 1fr !important; gap: 30px !important; } 
    }

/* ===== SOURCE: sleep_platform/pages/verify.css ===== */

    /* 1. NUCLEAR VISIBILITY LOCK & BASIC SETUP */
    #bsm-app-root .verify-wrapper { 
        animation: fadeIn 0.5s ease forwards; 
        width: 100%; 
        padding-top: 120px; /* INCREASED TOP SPACE FOR HERO FEEL */
        padding-bottom: 200px; 
    }
    
    #bsm-app-root .insight-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
    }

    /* Force all text elements to be visible */
    #bsm-app-root h1, #bsm-app-root h2, #bsm-app-root h3, #bsm-app-root h4, #bsm-app-root p, #bsm-app-root li, #bsm-app-root strong, #bsm-app-root summary {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 2. TYPOGRAPHY & INTRO */
    #bsm-app-root h1 { font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; margin: 0; line-height: 1.1; }
    #bsm-app-root .verify-sub { font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1.6; max-width: var(--bsm3-width-wide); margin-top: 15px; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }
    #bsm-app-root .verify-framing { font-size: var(--bsm3-text-large-16px-use-on-text); max-width: var(--bsm3-width-wide); margin: 30px 0 20px 0; line-height: 1.6; opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); padding-left: 20px; }
    #sp-verify-root #bsm-app-root h2 { font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; text-transform: capitalize !important; letter-spacing: 0.25em !important; margin: 100px 0 30px 0 !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align: left; }

    /* SIGNALS ICON ROW */
    .signals-inline-row { display: flex; gap: 40px; margin: 30px 0 60px 22px; }
    .signal-item-min { display: flex; align-items: flex-start; gap: 15px; max-width: var(--bsm3-width-standard); }
    .signal-icon-min { width: 24px; height: 24px; stroke-width: 2; flex-shrink: 0; margin-top: 4px; }
    .signal-text-min h4 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin: 0 0 5px 0 !important; font-family: var(--bsm3-font-body) !important; }
    .signal-text-min p { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.4; opacity: var(--bsm3-opacity-high); margin: 0 !important; }

    /* 3. LAYOUT GRIDS */
    .assessment-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; margin-bottom: 50px !important; align-items: stretch !important; }

    /* 4. DEVICE LISTS */
    .split-list { list-style: none; padding: 0; margin: 15px 0; }
    .split-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align: left; font-size: var(--bsm3-text-body-use-on-reading-text); }
    .check-icon { font-weight: var(--bsm3-weight-bold-700-use-on-h1); flex-shrink: 0; }
    .relevance-warning { border-radius: var(--bsm3-radius-primary-cards); padding: 15px; margin-top: 15px; font-size: var(--bsm3-text-body-use-on-reading-text); }

    /* 5. TECHNICAL ACCORDION */
    .tech-accordion { margin-bottom: 60px; padding-top: 10px; }
    details summary { cursor: pointer; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.15em; font-size: var(--bsm3-text-medium-14px-use-on-text); padding: 15px 0; list-style: none; }
    .table-scroll-wrapper { width: 100%; overflow-x: auto; margin-top: 20px; border-radius: var(--bsm3-radius-primary-cards); }
    .tech-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: auto; min-width: 900px; }
    .tech-table th { padding: 18px; font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; }
    .tech-table td { padding: 14px 18px; font-size: var(--bsm3-text-body-use-on-reading-text); vertical-align: top; }
    .tech-label { font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity: var(--bsm3-opacity-medium); text-transform: capitalize; font-size: var(--bsm3-text-small-12px-use-on-text); }

    /* 6. ASSESSMENT CARDS (RE-LABELED BUTTONS) */
    .assess-card { padding: 30px !important; transition: transform 0.3s ease; justify-content: flex-start !important; min-height: 480px; }
    .assess-card:hover { transform: translateY(-5px); }
    .assess-card h3 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 10px !important; font-family: var(--bsm3-font-body) !important; }
    .assess-card p { font-size: var(--bsm3-text-body-use-on-reading-text)!important; margin-bottom: 15px !important; line-height: 1.5; opacity: var(--bsm3-opacity-high); }
    .gold-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-small-12px-use-on-text); padding: 6px 16px; border-radius: var(--bsm3-radius-pills); text-transform: capitalize; letter-spacing: 0.1em; z-index: 10; }
    .level-label { text-align: center; font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; letter-spacing: 0.1em; font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-top: 15px; }

    .btn-card { width: 100%; padding: 12px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); cursor: pointer; text-transform: capitalize; margin-top: auto; transition: 0.3s; }

    @media (max-width: 900px) { .assessment-grid { grid-template-columns: 1fr !important; } .signals-inline-row { flex-direction: column; gap: 20px; } }@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* ===== SOURCE: sleep_platform/pages/wearables.css ===== */

                    .wave-bar { width: 8px; height: 20px; border-radius: var(--bsm3-radius-status-cards); animation: wavePulse 2.5s infinite ease-in-out; }@keyframes wavePulse {
    0%, 100% { height: 20px; opacity: var(--bsm3-opacity-medium); }
    50% { height: 50px; opacity: 1; }
}
                
/* ===== SOURCE: sleep_platform/pages/welcome.css ===== */

    /* --- 1. STAR & BACKGROUND ENHANCEMENT --- */
    #bsm-app-root .star, 
    #bsm-app-root [class*="star"] {
        opacity: var(--bsm3-opacity-high) !important;
        animation: starPulse 4s infinite ease-in-out !important;
    }@keyframes starPulse {
    0%, 100% { opacity: var(--bsm3-opacity-medium); transform: scale(1); }
    50% { opacity: var(--bsm3-opacity-high); transform: scale(1.2); }
}
    .cta-button:hover { transform: translateY(-5px); }

    /* --- 4. VIDEO MODAL --- */
    .modal-overlay { 
        display: none; position: fixed; inset: 0; z-index: 999999;
        justify-content: center; align-items: center; 
    }
    .modal-overlay.active { display: flex; }
    
    .modal-box { 
        position: relative; width: 85vw; max-width: var(--bsm3-width-wide); aspect-ratio: 16 / 9; border-radius: var(--bsm3-radius-primary-cards); overflow: hidden;
    }
    
    #vPlayer { width: 100%; height: 100%; object-fit: cover; }
    
    .close-btn { position: absolute; top: 25px; right: 35px; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; z-index: 100; opacity: var(--bsm3-opacity-medium); transition: 0.3s; }
    .close-btn:hover { opacity: 1; transform: rotate(90deg); }@keyframes welcomeFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== SOURCE: sleep_platform/sleep_planner/mySleepTherapiesDashboard.css ===== */
.mtd-wrap .mtd-content { padding: 20px; }
.mtd-wrap .mtd-intro { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; margin-top: 0; margin-bottom: 20px; border-radius: var(--bsm3-radius-status-cards); padding: 12px 16px; }
.mtd-panel.active { display: block; }
.mtd-search-controls-wrap { display: flex; gap: 8px; width: 100%; align-items: stretch; margin-bottom: 20px; flex-wrap: wrap; }
.mtd-card-row2.mtd-row2-2col { grid-template-columns: 1fr 1fr; }
.mtd-tag-badge, .mtd-btn { padding: 6px 10px; border-radius: var(--bsm3-radius-mini-badges); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-family: inherit; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; cursor: default; }

.capacity-wrapper { padding: 15px 20px; border-radius: var(--bsm3-radius-status-cards); margin-bottom: 20px; }
.cap-header { display: flex; justify-content: space-between; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 10px; }
.cap-bar-bg { height: 12px; border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; width: 100%; }
.cap-bar-fill { height: 100%; width: 0%; transition: 0.3s; }
.mtd-dropdown-toggle .mtd-chevron { font-size: var(--bsm3-text-small-12px-use-on-text); flex-shrink: 0; transition: 0.15s; }
.mtd-dropdown-wrap.open .mtd-chevron { transform: rotate(180deg); }
.mtd-dropdown-wrap.open .mtd-dropdown-menu { display: block; }

@media(max-width: 900px) {
    .mtd-search-controls-wrap { flex-direction: column; }
    .mtd-dropdown-wrap, .mtd-dropdown-toggle { width: 100%; }
}

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px-flex-shrink-0-margin-top { font-size:var(--bsm3-text-large-16px-use-on-text); flex-shrink:0; margin-top:2px; }
.u-display-flex-flex-direction-column-gap-4 { display:flex; flex-direction:column; gap:4px; flex:1; text-align:left; }
.u-padding-top-0 { padding-top:0; }

/* ===== SOURCE: sleep_platform/sleep_planner/show_sleep_plan_renderer.css ===== */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center-color-b3402a-padding-4 { text-align:center; padding:40px; }

/* ===== SOURCE: sleep_platform/sleep_planner/sleep_planner.css ===== */

/* ── DESIGN TOKENS -- brought into line with master_shell.php / dashboard.php's
   dark-glass system (--brand-purple var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon), --bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon), translucent
   glass surfaces, pill-radius controls) instead of this page's old standalone
   light/teal SaaS palette. Variable NAMES kept the same so every existing
   var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon)/var(--text)/etc. reference below repaints automatically --
   only the values change, so no HTML/JS had to move. */
.np-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-radius: var(--bsm3-radius-primary-cards); position: sticky; top: 10px; z-index: 1000; margin: 10px 10px 20px 10px; }
.np-brand h1 { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }
.np-nav-btn { padding: 8px 16px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s;}

/* Builder Layout */





/* Palette & Filters -- search box + single grouped dropdown, mirrors the
   Activity Planner's Search + "Work" category dropdown pattern. */

/* Simple tap-to-add row */


/* Modals */

/* My Plans Grid -- unified card, exact same structure/colours as
   Body/Meal/Activity/Mind Plan's own .np-unified-card / .bp-unified-card.
   No grid wrapper around the cards themselves -- plain block stacking,
   one card per row, matching Body Plan's own list (see
   release_plans/SCHEDULER_MASTER_PLAN.md's Mind Plan card-rebuild
   entries for why: a grid wrapper here previously packed 3 per row). */
/* Recoloured from Body Plan's light-theme hex values onto the shared
   brand-purple/glass system so this card matches every other planner's
   dark-mode look rather than standing out as a light-mode leftover. */

/* Plan Detail View Overlay -- same bordered, slide-up box as
   Meal/Activity/Body/Mind Plan's own canvas overlays. Content is fetched
   from get_plan_details_html and injected as-is. Replaces the old
   full-screen #np-screen-view tab (base64-blob client-side rendering). */

/* Drawer -- technique "science & steps" detail, same shell Mind Plan
   uses (mind/mind_tool_planner.php), same shared
   anxiety/anxiety_science.php content (generic step lookup, not
   Mind-specific -- wellness-scheduler.php's own former sleep-plan
   rendering already reused this same file). No content_b/c/d panes --
   Sleep has no archetype/"Fabulous You" narrative to show. */

/* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

/* ==== Stage 3: extracted repeated inline styles ==== */

/* ===== SOURCE: sleep_platform/sleep_planner/sleep_top_nav.css ===== */
.np-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; position: sticky; top: 0; z-index: 1000; }
.np-brand h1 { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }
.np-nav-btn { padding: 8px 16px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s;}

/* =============================================================
   SLEEP PLATFORM (sleep_platform/) - migrated from per-page
   local CSS files into this central stylesheet, 26 aug 2026.
   Each block below is scoped under its page's own unique root
   id (already used by these SPA-fragment pages) so pages that
   share generic class names like .bsm-card / .bsm-block can't
   collide with each other now that they're combined in one file.
   ============================================================= */

/* ===== migrated from sleep_platform/master_shell.css (scoped under #bsm-portal-root) ===== */
#bsm-portal-root /* --- 1. CORE SYSTEM --- */
    #bsm-app-root {
        
        position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483647;
        font-family: var(--bsm3-font-body); 
        overflow: hidden; 
        display: flex; flex-direction: column; 
    }

#bsm-portal-root #bsm-app-root .tool-btn svg {
        opacity: 1 !important;
        visibility: visible !important;
    }



    /* filter scoped to nav+viewport (not #bsm-app-root itself) -- see
       matching comment on the first copy of this rule above. */
    









#bsm-portal-root /* --- 4. NAVIGATION --- */
    .global-nav-bar {
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 10002;
        display: flex;
        flex-direction: column;
    }

#bsm-portal-root /* Row 1: Home/Back + Support */
    .nav-row-1 {
        height: 60px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

#bsm-portal-root /* Row 2: Theme switcher — full width */
    .nav-row-2 {
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#bsm-portal-root .nav-support-btn svg { width: 16px; height: 16px; stroke-width: 2.5px; }

#bsm-portal-root /* --- 5. STAGE & ATMOSPHERICS --- */
    #spa-stage { width: 100%; max-width: var(--bsm3-width-extra-wide); padding: 165px 20px 100px 20px; box-sizing: border-box; position: relative; transition: opacity 0.4s; z-index: 10; }

#bsm-portal-root /* HOVER ICONS DISAPPEAR FIX (ALL MODES) */
    #spa-stage div[class*="card"] svg,
#bsm-portal-root #spa-stage div[class*="box"] svg,
#bsm-portal-root #spa-stage div[class*="panel"] svg,
#bsm-portal-root #spa-stage div[class*="item"] svg,
#bsm-portal-root #spa-stage div[class*="btn"] svg {
        transition: opacity 0.3s ease;
    }

#bsm-portal-root #spa-stage div[class*="card"]:hover svg,
#bsm-portal-root #spa-stage div[class*="box"]:hover svg,
#bsm-portal-root #spa-stage div[class*="panel"]:hover svg,
#bsm-portal-root #spa-stage div[class*="item"]:hover svg,
#bsm-portal-root #spa-stage div[class*="btn"]:hover svg {
        opacity: 0 !important;
    }

#bsm-portal-root /* --- STAR EFFECTS: ORGANIC REFINEMENT --- */
    .star { position: absolute; z-index: 4; animation: sp-bsm-portal-root-twinkle 4s infinite alternate ease-in-out; pointer-events: none; }

#bsm-portal-root .star-core::before,
#bsm-portal-root .star-core::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }

#bsm-portal-root .star-core::before { 
        width: 20px; height: 1px;
    }

#bsm-portal-root .star-core::after { 
        width: 1px; height: 20px;
    }

#bsm-portal-root .star-medium .star-core { width: 1.5px; height: 1.5px; }

#bsm-portal-root .star-medium .star-core::before { width: 12px; }

#bsm-portal-root .star-medium .star-core::after { height: 12px; }

#bsm-portal-root .star-small .star-core { width: 1px; height: 1px; }

#bsm-portal-root .star-small .star-core::before,
#bsm-portal-root .star-small .star-core::after { display: none; }@keyframes sp-bsm-portal-root-twinkle {
    0% { opacity: var(--bsm3-opacity-low); transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.1); }
}

#bsm-portal-root #bsm-app-root[data-theme="day"] .star { display: none !important; }

#bsm-portal-root #bsm-app-root[data-theme="day"] .moon-fixed {
        opacity: var(--bsm3-opacity-high);
    }





#bsm-portal-root #bsm-app-root[data-theme="day"] .clouds-fixed { opacity: 1; display: block; }

#bsm-portal-root .cloud { position: absolute; border-radius: var(--bsm3-radius-pills); opacity: var(--bsm3-opacity-high); }

#bsm-portal-root .cloud::before,
#bsm-portal-root .cloud::after { content: ''; position: absolute; border-radius: 50%; }

#bsm-portal-root .cloud-1::before { width: 120px; height: 120px; top: -50px; left: 40px; }

#bsm-portal-root .cloud-1::after { width: 90px; height: 90px; top: -30px; right: 40px; }

#bsm-portal-root .cloud-2::before { width: 140px; height: 140px; top: -60px; left: 50px; }

#bsm-portal-root .cloud-2::after { width: 110px; height: 110px; top: -40px; right: 50px; }

#bsm-portal-root .cloud-3::before { width: 100px; height: 100px; top: -40px; left: 30px; }

#bsm-portal-root .cloud-3::after { width: 80px; height: 80px; top: -20px; right: 30px; }@keyframes sp-bsm-portal-root-hoverCloud {
    0%, 100% { transform: translate(0px, 0px); }
    33% { transform: translate(15px, -8px); }
    66% { transform: translate(-10px, 12px); }
}

#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage h1,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage h2,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage h3,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage h4,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage p,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage strong {
        opacity: 1 !important;
    }

#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage div[class*="card"] p,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage div[class*="box"] p,
#bsm-portal-root #bsm-app-root[data-theme="day"] #spa-stage div[class*="panel"] p {
        opacity: 1 !important;
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    }

#bsm-portal-root /* ── TUTORIAL OVERLAY (lives in shell so it sits above #spa-stage) ──── */
    #bsm-tutorial-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: sp-bsm-portal-root-tutorialFadeIn 0.5s ease-out;
    }@keyframes sp-bsm-portal-root-tutorialFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#bsm-portal-root #bsm-tutorial-overlay.hiding {
        animation: sp-bsm-portal-root-tutorialFadeOut 0.4s ease-in forwards;
    }@keyframes sp-bsm-portal-root-tutorialFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#bsm-portal-root .bsm-tutorial-icon svg {
        width: 32px; height: 32px; stroke-width: 2px;
    }

#bsm-portal-root .bsm-tutorial-card h2 {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: -0.02em;
        margin: 0;
    }

#bsm-portal-root .bsm-tutorial-card p {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        opacity: var(--bsm3-opacity-high);
        margin: 0;
    }

#bsm-portal-root .bsm-tut-btn-primary:hover { opacity: var(--bsm3-opacity-high); transform: translateY(-1px); }

#bsm-portal-root .bsm-tut-btn-skip:hover { opacity: 1; }

#bsm-portal-root .bsm-tutorial-dots span {
        width: 6px; height: 6px;
        border-radius: 50%;
        transition: background 0.3s;
    }

#bsm-portal-root .bsm-tutorial-dots span.active {
        width: 20px;
        border-radius: var(--bsm3-radius-mini-badges);
    }


/* ===== migrated from sleep_platform/pages/apnea.css (scoped under #apnea-journey-wrap) ===== */
/* ============================================================
   SLEEP APNEA PAGE v6.1
   Scope: #bsm-app-root #spa-stage #apnea-journey-wrap
   Platform rules: bsm-block/bsm-flex spans,
#apnea-journey-wrap --diary-text vars,
#apnea-journey-wrap no divs,
no hardcoded colours.
============================================================ */




/* ── Typography lock ── */

/* Nuclear reset: kill any platform styling on bsm-block/bsm-flex inside our wrapper */

/* Only reset box styles on elements that are NOT explicitly styled by our own rules */



/* ── Page wrapper ── */

/* ============================================================
   WELCOME MODAL
============================================================ */

















#apnea-journey-wrap /* ============================================================
   EDIT PROFILE MODAL (v6.1)
============================================================ */
#bsm-edit-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    /* flex-start first as a safe fallback, then upgrade to true centering
       only when the modal fits — "align-items: center" alone would center
       the modal even when its content is taller than the viewport, and
       since a centered flex item overflows equally on both edges, the top
       portion becomes unreachable by scrolling (you can't scroll to a
       negative offset). "safe center" falls back to flex-start instead of
       clipping when that would happen. */
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

#apnea-journey-wrap #bsm-edit-profile-overlay.bsm-fading {
    opacity: 0;
    pointer-events: none;
}

#apnea-journey-wrap #bsm-edit-profile-modal {
    border-radius: var(--bsm3-radius-primary-cards);
    max-width: var(--bsm3-width-standard);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

#apnea-journey-wrap /* Form must join the flex chain or .bsm-epm-body's overflow-y:auto has no
   bounded height to scroll within (a bare <form> is not a flex participant
   by default). This is what fixes the non-scrolling modal. */
#bsm-edit-profile-modal #bsm-epm-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#apnea-journey-wrap /* Modal header */
#bsm-edit-profile-modal .bsm-epm-header {
    padding: 26px 28px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-header-left { flex: 1; }

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-eyebrow {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0;
    line-height: 1.2;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-close {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

#apnea-journey-wrap /* Scrollable body */
#bsm-edit-profile-modal .bsm-epm-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#apnea-journey-wrap /* Section labels */
#bsm-edit-profile-modal .bsm-epm-section-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.2em;
    margin: 0 0 12px;
    padding-bottom: 8px;
}

#apnea-journey-wrap /* Field rows */
#bsm-edit-profile-modal .bsm-epm-field {
    margin-bottom: 16px;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin-bottom: 7px;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-label span {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    margin-left: 6px;
}

#apnea-journey-wrap /* ── Tab-style selector (replaces dropdown) ── */
#bsm-edit-profile-modal .bsm-epm-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-tab-btn {
    flex: 1;
    min-width: 70px;
    padding: 11px 10px;
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-tab-btn.bsm-tab-selected {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

#apnea-journey-wrap /* ── Legacy custom dropdown (kept for compatibility,
#apnea-journey-wrap no longer used by
     gender/osa1-6/bp_high — those now use
     .bsm-epm-tabs above). Left in place harmlessly. ── */
#bsm-edit-profile-modal .bsm-epm-dd {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}@keyframes sp-apnea-journey-wrap-bsmDdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

#apnea-journey-wrap /* Number inputs */
#bsm-edit-profile-modal input[type="number"].bsm-epm-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    box-sizing: border-box;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

#apnea-journey-wrap #bsm-edit-profile-modal input[type="number"].bsm-epm-input::-webkit-inner-spin-button,
#apnea-journey-wrap #bsm-edit-profile-modal input[type="number"].bsm-epm-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

#apnea-journey-wrap /* BMI preview strip */
#bsm-edit-profile-modal .bsm-epm-bmi-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--bsm3-radius-status-cards);
    margin-top: 10px;
    margin-bottom: 16px;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-bmi-strip .bsm-epm-bmi-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    flex: 1;
    margin: 0;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-bmi-strip .bsm-epm-bmi-val {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    white-space: nowrap;
}

#apnea-journey-wrap /* Two-col number row */
#bsm-edit-profile-modal .bsm-epm-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#apnea-journey-wrap /* Spacer between sections */
#bsm-edit-profile-modal .bsm-epm-spacer {
    height: 20px;
}

#apnea-journey-wrap /* Footer */
#bsm-edit-profile-modal .bsm-epm-footer {
    padding: 16px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

#apnea-journey-wrap /* Status message */
#bsm-edit-profile-modal .bsm-epm-status {
    display: none;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-align: center;
    padding: 8px 14px;
    border-radius: var(--bsm3-radius-status-cards);
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-status.bsm-epm-ok { display: block; }

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-status.bsm-epm-err { display: block; }

#apnea-journey-wrap /* Save button */
#bsm-edit-profile-modal .bsm-epm-save {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: var(--pill-radius, var(--bsm3-radius-pills));
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s, transform 0.18s;
    box-sizing: border-box;
}

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-save:hover { opacity: var(--bsm3-opacity-high); transform: translateY(-1px); }

#apnea-journey-wrap #bsm-edit-profile-modal .bsm-epm-save:disabled { opacity: var(--bsm3-opacity-medium); cursor: not-allowed; transform: none; }

#apnea-journey-wrap /* Cancel */
#bsm-edit-profile-modal .bsm-epm-cancel {
    display: block;
    text-align: center;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

#apnea-journey-wrap /* ============================================================
   RESULTS INFO MODAL — "Important information about your results"
   Same overlay/reparenting pattern as the edit-profile modal above
   (see bsmOpenResultsInfo/bsmCloseResultsInfo). Uses its own class
   prefix (bsm-rim-*) with var(...) fallbacks throughout,
since this
   modal gets moved out of #apnea-journey-wrap while open and would
   otherwise lose that wrapper's CSS custom properties.
============================================================ */
#bsm-results-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

#apnea-journey-wrap #bsm-results-info-overlay.bsm-fading {
    opacity: 0;
    pointer-events: none;
}

#apnea-journey-wrap #bsm-results-info-modal {
    border-radius: var(--bsm3-radius-primary-cards);
    max-width: var(--bsm3-width-standard);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

#apnea-journey-wrap /* Header */
#bsm-results-info-modal .bsm-rim-header {
    padding: 26px 28px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-header-left { flex: 1; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-eyebrow {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0;
    line-height: 1.25;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-close {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

#apnea-journey-wrap /* Scrollable body */
#bsm-results-info-modal .bsm-rim-body {
    padding: 24px 28px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-callout-hdr { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-callout-hdr h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin: 0 0 6px; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-callout-hdr p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.65; margin: 0; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-compare-item {
    padding: 15px 16px;
    border-radius: 0 var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-compare-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-compare-item p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; margin: 0; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-overlap-label {
    display: block;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-kp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--bsm3-radius-primary-cards);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.55;
}

#apnea-journey-wrap #bsm-results-info-modal .bsm-rim-kp-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}


/* ============================================================
   PANELS
============================================================ */







#apnea-journey-wrap /* Secondary nav banner — deliberately NOT a full gradient hero block,
so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#apnea-journey-wrap .bsm-edu-strategies-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}





/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */






/* ── Shared panel pieces ── */







/* Row that right-aligns the button */

























#apnea-journey-wrap .bsm-flag-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--bsm3-radius-status-cards);
    transition: background 0.25s, border-color 0.25s;
}






#apnea-journey-wrap /* Symptom severity dots — replaces the plain checkbox for symptom rows,
#apnea-journey-wrap since these are 0-4 severity answers,
not yes/no. Risk-factor icon
   (scale emoji) keeps using .bsm-flag-check for a consistent left-hand
   column between the two row types. */
#apnea-journey-wrap .bsm-flag-row { align-items: flex-start; }












/* ============================================================
   FLIP CARDS
============================================================ */























/* ============================================================
   WHAT THIS MEANS PANEL
============================================================ */

#apnea-journey-wrap /* ── Types intro block — now the header strip inside the unified
     panel below,
rather than its own separate box. ── */
#apnea-journey-wrap .bsm-types-panel-intro {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
}




/* ── Section label ── */
/* ── Types section label — matches panel title weight ── */


#apnea-journey-wrap /* ── Unified panel — a single shared background container for the
     intro strip + all three type sections,
#apnea-journey-wrap replacing what used to
     be three separate large background boxes stacked one after
     another. Sections inside are told apart by colour + a hairline
     divider,
not by each having their own big card. ── */
#apnea-journey-wrap .bsm-types-panel {
    display: block !important;
    border-radius: var(--bsm3-radius-primary-cards);
    overflow: hidden;
}

#apnea-journey-wrap /* ── Type columns — the three types sit side by side inside the
     panel,
#apnea-journey-wrap told apart by a coloured left accent (box-shadow,
#apnea-journey-wrap so it
     never fights with the hairline dividers) + a faint wash of that
     colour,
rather than each being its own solid-colour card. ── */
#apnea-journey-wrap .bsm-types-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}



/* Likely highlight — a brighter accent reads clearly inside a shared
   panel without needing a glowing ring around a whole card. */



#apnea-journey-wrap /* ── OHS row — folded into the same panel as a final,
#apnea-journey-wrap full-width
     row rather than a separate box below it. Same treatment as the
     type columns above: colour only in the accent bar + icon/pill,
#apnea-journey-wrap not a full-row wash,
so it reads as part of the same panel
     rather than a fourth mismatched colour block. ── */
#apnea-journey-wrap .bsm-types-ohs-row {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    transition: background 0.2s;
}




/* Badge pill — coloured per type instead of translucent-white
   (it no longer sits on a solid saturated card background). */




#apnea-journey-wrap /* Type column text — reads with the platform's normal text colours,
since this no longer sits on a solid saturated background. */
#apnea-journey-wrap .bsm-types-col h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    margin: 0 0 10px;
}



/* Type icon circle — coloured per type instead of translucent-white */





/* Likely tag */


/* ============================================================
   ASSESSMENT FOCUS CALLOUT — clarifies OSA vs CSA scope
============================================================ */

/* ============================================================
   HOW WE HELP BOX
============================================================ */













/* ============================================================
   PATTERNS & SIGNS PANEL
============================================================ */




/* ============================================================
   VERIFICATION PANEL — SIGNALS + ACCORDION
============================================================ */
/* Signals intro row */





/* Feature checklist inside cards */



/* Apnea-relevance note on smartwatch card */


/* Accordion */





/* Table */







/* Table footer note */



/* Step connector row */






/* Grid */

/* Cards — gradient per level */





/* Gold standard card gets a glow */

/* Gold standard badge
   NOTE: background/padding/border-radius/margin are forced with !important
   because this element's class doesn't match any pattern in the "Nuclear
   reset" selector above (#apnea-journey-wrap .bsm-block:not(...)...),
so
   without !important that reset was silently stripping this badge's pill
   styling down to invisible bare text. */


/* Level label */







/* ============================================================
   SUPPORTIVE STRATEGIES PANEL
============================================================ */



/* Section labels */

/* Grid */

#apnea-journey-wrap /* Cards — gradient per type,
matching platform language */
#apnea-journey-wrap .bsm-strat-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: var(--bsm3-radius-primary-cards);
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}


/* Lifestyle cards — purple family */






#apnea-journey-wrap /* Clinical options card — spans full width,
distinct style */
#apnea-journey-wrap .bsm-strat-card.strat-clinical {
    grid-column: 1 / -1;
}

/* Icon circle */




/* Clinical two-col list */



/* ── Lifestyle commitment launcher ── */





#apnea-journey-wrap /* ── Commitment modal checkbox items ── */
.bsm-commit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 15px;
    border-radius: var(--bsm3-radius-primary-cards);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#apnea-journey-wrap .bsm-commit-check-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

#apnea-journey-wrap .bsm-commit-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#apnea-journey-wrap .bsm-commit-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--bsm3-radius-mini-badges);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

#apnea-journey-wrap .bsm-commit-item:has(.bsm-commit-cb:checked) .bsm-commit-box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    transform: rotate(45deg) translateY(-1px);
}

#apnea-journey-wrap .bsm-commit-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

#apnea-journey-wrap .bsm-commit-item-title {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    line-height: 1.3;
}

#apnea-journey-wrap .bsm-commit-item-sub {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.45;
}






#apnea-journey-wrap /* ── Quiz modal card styles ── */
.bsm-quiz-modal-card {
    position: relative;
    height: 180px;
    perspective: 1000px;
}

#apnea-journey-wrap .bsm-quiz-modal-inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

#apnea-journey-wrap .bsm-quiz-modal-card.flipped .bsm-quiz-modal-inner { transform: rotateY(180deg); }

#apnea-journey-wrap .bsm-quiz-modal-f,
#apnea-journey-wrap .bsm-quiz-modal-b {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 22px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

#apnea-journey-wrap .bsm-quiz-modal-b {
    transform: rotateY(180deg);
    align-items: flex-start;
    justify-content: flex-start;
    cursor: default;
}

#apnea-journey-wrap .bsm-quiz-modal-q {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-align: center;
    line-height: 1.35;
}

#apnea-journey-wrap .bsm-quiz-modal-hint {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.14em;
}

#apnea-journey-wrap .bsm-quiz-modal-feedback {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: var(--bsm3-radius-primary-cards);
    width: fit-content;
    margin-bottom: 4px;
}



#apnea-journey-wrap .bsm-quiz-modal-verdict {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

#apnea-journey-wrap .bsm-quiz-modal-explain {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.6;
    flex: 1;
}

#apnea-journey-wrap .bsm-quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

#apnea-journey-wrap .bsm-quiz-nav-btn {
    padding: 10px 22px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
}

#apnea-journey-wrap .bsm-quiz-nav-btn:disabled { opacity: var(--bsm3-opacity-low); cursor: not-allowed; }

#apnea-journey-wrap .bsm-quiz-next-btn {
    width: 100%;
}

#apnea-journey-wrap .bsm-quiz-next-btn:hover { opacity: var(--bsm3-opacity-high); }

#apnea-journey-wrap .bsm-quiz-counter {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

#apnea-journey-wrap /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

#apnea-journey-wrap /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block { display:block; }

#apnea-journey-wrap .u-display-flex { display:flex; }

#apnea-journey-wrap .u-font-size-1rem-font-weight-500-opacity-0 { font-size: var(--bsm3-text-large-16px-use-on-text);font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);opacity:var(--bsm3-opacity-medium); }

#apnea-journey-wrap .u-font-size-22px-font-weight-800-color-var { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:4px; }

#apnea-journey-wrap .u-font-size-13px-color-var-diary-text-mute { font-size:var(--bsm3-text-body-use-on-reading-text); }


/* ===== migrated from sleep_platform/pages/bsm-personalisation.css (scoped under #bsm-pers-root) ===== */
/* =========================================================================
   PERSONALISATION PANEL — TRIPLE-ID ARMOR
========================================================================= */





#bsm-pers-root /* Layout */
#bsm-pers-root .bsm-pers-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}





/* ===== migrated from sleep_platform/pages/cbti_module_0.css (scoped under #bsm-module-0-wrapper) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - MODULE 0
========================================================================= */



/* Base Typographic Locks */

#bsm-module-0-wrapper /* CORE STRUCTURE */
#bsm-module-0-wrapper .bsm-block:not(.bsm-hidden):not(.bsm-d-none) { display: block !important; box-sizing: border-box !important; }



#bsm-module-0-wrapper .bsm-pill.unlocked { cursor: pointer !important; }

#bsm-module-0-wrapper .bsm-pill.active { cursor: default !important;
}


#bsm-module-0-wrapper .bsm-pill.completed { cursor: pointer !important; }

#bsm-module-0-wrapper /* CONTENT CARDS */
#bsm-module-0-wrapper .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; 
    padding: 24px !important; margin-bottom: 24px !important;
}


#bsm-module-0-wrapper .bsm-check-list-item svg,
#bsm-module-0-wrapper .bsm-check-list-item span:first-child { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-module-0-wrapper .bsm-btn-purple:hover:not(:disabled) { opacity: var(--bsm3-opacity-high) !important; transform: translateY(-2px) !important; }

#bsm-module-0-wrapper .bsm-btn-purple:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; transform: none !important; }




#bsm-module-0-wrapper .bsm-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }


#bsm-module-0-wrapper /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-module-0-wrapper #bsm-cinematic-overlay.show { display: block; }

#bsm-module-0-wrapper #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-module-0-wrapper #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-module-0-wrapper #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-module-0-wrapper-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-module-0-wrapper #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-module-0-wrapper-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-module-0-wrapper #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-module-0-wrapper #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-module-0-wrapper #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-module-0-wrapper #bsm-video-overlay-title.show { opacity: 1; }

#bsm-module-0-wrapper #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-module-0-wrapper #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-module-0-wrapper #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-module-0-wrapper #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-module-0-wrapper #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-module-0-wrapper #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-module-0-wrapper /* =========================================================================
   STEP 4 CONFIRM/UPDATE TILES — same pattern as insomnia.php/circadian.php/
   apnea.php/legs.php's own "Update My Profile" tiles,
#bsm-module-0-wrapper reused here since
   Step 4 now edits the exact same godJSON fields.
========================================================================= */
#bsm-module-0-wrapper .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: var(--bsm3-font-body) !important;
}

#bsm-module-0-wrapper .bsm-epm-tab-btn.bsm-tab-selected { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-module-0-wrapper #bsm-mod0-epm-status.bsm-epm-ok { display: block !important; }

#bsm-module-0-wrapper #bsm-mod0-epm-status.bsm-epm-err { display: block !important; }

#bsm-module-0-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-flex-align-items-stretch-gap-6px { display:flex; align-items:stretch; gap:6px; width:100%; box-sizing:border-box; flex-wrap:wrap; }

#bsm-module-0-wrapper .u-margin-bottom-24px { margin-bottom: 24px; }

#bsm-module-0-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-module-0-wrapper .u-font-weight-bold-margin-bottom-8px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }

#bsm-module-0-wrapper .u-font-weight-bold-font-size-16px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-module-0-wrapper .u-font-size-20px-font-weight-bold-margin-b { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 16px; }

#bsm-module-0-wrapper .u-font-size-14px-font-weight-bold { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#bsm-module-0-wrapper .u-font-size-13px-opacity-0-8-margin-top-4p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-high); margin-top: 4px; }

#bsm-module-0-wrapper .u-font-size-11px-font-weight-normal { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); }

#bsm-module-0-wrapper .u-color-var-brand-green-margin-left-4px { margin-left: 4px; }

#bsm-module-0-wrapper .u-align-items-center-gap-16px { align-items: center; gap: 16px; }

#bsm-module-0-wrapper .u-text-align-center-2 { text-align: center; }

#bsm-module-0-wrapper .u-width-40px-height-40px-background-rgba12 { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#bsm-module-0-wrapper .u-margin-top-24px { margin-top: 24px; }

#bsm-module-0-wrapper .u-font-size-24px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-module-0-wrapper .u-text-align-right { text-align: right; }

#bsm-module-0-wrapper .u-flex-1 { flex: 1; }

#bsm-module-0-wrapper .u-width-auto { width: auto; }

#bsm-module-0-wrapper .u-width-20px-height-20px-flex-shrink-0 { width: 20px; height: 20px; flex-shrink: 0; }

#bsm-module-0-wrapper .u-text-align-right-margin-top-24px { text-align: right; margin-top: 24px; }

#bsm-module-0-wrapper .u-opacity-0-8-font-size-16px-line-height-1 { opacity: var(--bsm3-opacity-high); font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.5; }

#bsm-module-0-wrapper .u-font-size-80px-margin-bottom-24px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 24px; }

#bsm-module-0-wrapper .u-font-size-28px-font-weight-bold-margin-b { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 16px; }

#bsm-module-0-wrapper .u-font-size-14px-font-weight-bold-cursor-p { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day1.css (scoped under #bsm-week1-day1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day1-root /* Core Layout Utilities */
#bsm-week1-day1-root .bsm-block:not(.bsm-callout-box):not(.bsm-feedback-blue):not(.bsm-hidden):not(.bsm-option):not(.bsm-slide) { display: block !important; }




#bsm-week1-day1-root /* Navigation */
#bsm-week1-day1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day1-root /* Cards */
#bsm-week1-day1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-week1-day1-root /* Header Elements */
#bsm-week1-day1-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day1-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day1-root /* Progress Bar */
#bsm-week1-day1-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }




#bsm-week1-day1-root /* Video Box */
#bsm-week1-day1-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#bsm-week1-day1-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#bsm-week1-day1-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#bsm-week1-day1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day1-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day1-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day1-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day1-root /* Carousel Elements */
#bsm-week1-day1-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }



#bsm-week1-day1-root .bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#bsm-week1-day1-root .bsm-slide.active { display: block !important; animation: sp-bsm-week1-day1-root-bsmFadeIn 0.4s ease forwards !important; }



#bsm-week1-day1-root .bsm-reveal-action-btn:hover { transform: translateY(-2px) !important; }


#bsm-week1-day1-root .bsm-reveal-example strong { font-style: normal !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; display: block !important; margin-bottom: 4px !important; }

#bsm-week1-day1-root /* Quiz / Selection Options */
#bsm-week1-day1-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}

#bsm-week1-day1-root .bsm-option.locked { pointer-events: none !important; }

#bsm-week1-day1-root .bsm-option.correct { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day1-root .bsm-option.incorrect { opacity: var(--bsm3-opacity-medium) !important; }


#bsm-week1-day1-root /* General Buttons */
#bsm-week1-day1-root .bsm-carousel-footer { padding-top: 16px !important; }




#bsm-week1-day1-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day1-root /* Success Block */
#bsm-week1-day1-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day1-root-bsmFadeIn 0.6s ease forwards !important; }

#bsm-week1-day1-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day1-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day1-root .u-margin-bottom-24px { margin-bottom: 24px; }

#bsm-week1-day1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day1-root .u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-week1-day1-root .u-font-size-40px-margin-bottom-16px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }

#bsm-week1-day1-root .u-font-weight-500 { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

#bsm-week1-day1-root .u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day1-root .u-font-weight-800-font-size-18px-color-var { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day1-root .u-margin-bottom-32px-3 { margin-bottom: 32px; }

#bsm-week1-day1-root .u-font-size-16px-font-weight-700-margin-bo-2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day2.css (scoped under #bsm-week1-day2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 2
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day2-root /* Core Layout Utilities */
#bsm-week1-day2-root .bsm-block:not(.bsm-hidden):not(.bsm-insight-box):not(.bsm-metric-explained):not(.bsm-metrics-grid):not(.bsm-slide) { display: block !important; }




#bsm-week1-day2-root /* Navigation */
#bsm-week1-day2-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day2-root /* Cards & Banners */
#bsm-week1-day2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}


#bsm-week1-day2-root /* Header Elements */
#bsm-week1-day2-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day2-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day2-root /* Progress Bar */
#bsm-week1-day2-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }




#bsm-week1-day2-root /* Video Box */
#bsm-week1-day2-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#bsm-week1-day2-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#bsm-week1-day2-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#bsm-week1-day2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day2-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day2-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day2-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day2-root /* Carousel Elements */
#bsm-week1-day2-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }



#bsm-week1-day2-root .bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#bsm-week1-day2-root .bsm-slide.active { display: block !important; animation: sp-bsm-week1-day2-root-bsmFadeIn 0.4s ease forwards !important; }





#bsm-week1-day2-root .bsm-dash-btn-mock svg {
    width: 20px !important; height: 20px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}



#bsm-week1-day2-root .bsm-diary-pill.mock-active {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}




#bsm-week1-day2-root .bsm-insight-box svg { width: 20px !important; height: 20px !important; margin-right: 12px !important; flex-shrink: 0 !important; }


#bsm-week1-day2-root /* Interactive Metrics Grid */
#bsm-week1-day2-root .bsm-metrics-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }


#bsm-week1-day2-root .bsm-metric-header svg { width: 16px !important; height: 16px !important; margin-right: 8px !important; stroke-width: 2 !important; }

#bsm-week1-day2-root .bsm-metric-reveal-btn:hover { opacity: var(--bsm3-opacity-high) !important; }

#bsm-week1-day2-root .bsm-checkbox svg { width: 14px !important; height: 14px !important; stroke-width: 3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 0 !important; }

#bsm-week1-day2-root .bsm-check-item.checked .bsm-checkbox svg { opacity: 1 !important; }

#bsm-week1-day2-root .bsm-check-item.checked .bsm-check-text { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day2-root /* General Buttons */
#bsm-week1-day2-root .bsm-carousel-footer { padding-top: 16px !important; }




#bsm-week1-day2-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day2-root /* Success Block */
#bsm-week1-day2-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day2-root-bsmFadeIn 0.6s ease forwards !important; }

#bsm-week1-day2-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day2-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day2-root .u-margin-bottom-24px { margin-bottom: 24px; }

#bsm-week1-day2-root .u-margin-bottom-12px { margin-bottom: 12px; }

#bsm-week1-day2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day2-root .u-font-size-40px-margin-bottom-16px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }

#bsm-week1-day2-root .u-margin-bottom-16px { margin-bottom: 16px; }

#bsm-week1-day2-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-week1-day2-root .u-font-weight-normal-font-size-11px { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); font-size: var(--bsm3-text-small-12px-use-on-text); }

#bsm-week1-day2-root .u-margin-top-24px { margin-top: 24px; }

#bsm-week1-day2-root .u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day2-root .u-font-size-24px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day2-root .u-font-weight-800-font-size-18px-color-var { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day2-root .u-margin-bottom-32px-3 { margin-bottom: 32px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day3.css (scoped under #bsm-week1-day3-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 3
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day3-root /* Core Layout Utilities */
#bsm-week1-day3-root .bsm-block:not(.bsm-hidden):not(.bsm-slide) { display: block !important; }




#bsm-week1-day3-root /* Navigation */
#bsm-week1-day3-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day3-root /* Cards */
#bsm-week1-day3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-week1-day3-root /* Header Elements */
#bsm-week1-day3-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day3-root .bsm-icon-circle svg {
    width: 24px !important;
    height: 24px !important;
}



#bsm-week1-day3-root /* Progress Bar */
#bsm-week1-day3-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#bsm-week1-day3-root /* Video Placeholder */
#bsm-week1-day3-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

#bsm-week1-day3-root .bsm-video-box:hover {
    opacity: var(--bsm3-opacity-high) !important;
}


#bsm-week1-day3-root .bsm-play-btn svg {
    width: 32px !important;
    height: 32px !important;
    margin-left: 4px !important;
}

#bsm-week1-day3-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day3-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day3-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day3-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day3-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day3-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day3-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day3-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day3-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day3-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day3-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day3-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day3-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day3-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day3-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day3-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day3-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day3-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day3-root /* Carousel */
#bsm-week1-day3-root .bsm-badge {
    padding: 4px 12px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-right: 12px !important;
}



#bsm-week1-day3-root .bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#bsm-week1-day3-root .bsm-slide.active {
    display: block !important;
    animation: sp-bsm-week1-day3-root-bsmFadeIn 0.4s ease forwards !important;
}




#bsm-week1-day3-root .bsm-reveal-btn:hover {
    transform: translateY(-2px) !important;
}

#bsm-week1-day3-root .bsm-reveal-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
}

#bsm-week1-day3-root /* Buttons */
#bsm-week1-day3-root .bsm-carousel-footer {
    padding-top: 16px !important;
}




#bsm-week1-day3-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) {
    transform: translateY(-2px) !important;
}

#bsm-week1-day3-root /* Quiz / Selection Options */
#bsm-week1-day3-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
}

#bsm-week1-day3-root .bsm-option.locked {
    pointer-events: none !important;
}

#bsm-week1-day3-root .bsm-option.selected {
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}

#bsm-week1-day3-root /* Quiz Validation Styles */
.bsm-option.correct {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#bsm-week1-day3-root .bsm-option.incorrect {
    opacity: var(--bsm3-opacity-medium) !important;
}



#bsm-week1-day3-root /* Success Block */
#bsm-week1-day3-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-bsm-week1-day3-root-bsmFadeIn 0.6s ease forwards !important;
}

#bsm-week1-day3-root .bsm-success-icon svg {
    width: 100% !important;
    height: 100% !important;
}@keyframes sp-bsm-week1-day3-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day3-root .u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-week1-day3-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#bsm-week1-day3-root .u-font-weight-500 { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

#bsm-week1-day3-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-week1-day3-root .u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day4.css (scoped under #bsm-week1-day4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 4
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day4-root /* Core Layout Utilities */
#bsm-week1-day4-root .bsm-block:not(.bsm-flip-back-title):not(.bsm-flip-face):not(.bsm-flip-front-hint):not(.bsm-hidden):not(.bsm-insight-title):not(.bsm-slide):not(.bsm-sort-feedback) { display: block !important; }




#bsm-week1-day4-root /* Navigation */
#bsm-week1-day4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important; padding: 8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day4-root /* Diary Reminder Banner */
#bsm-week1-day4-root .bsm-diary-banner { padding: 16px 20px !important; border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
}


#bsm-week1-day4-root /* Cards */
#bsm-week1-day4-root .bsm-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#bsm-week1-day4-root /* Educational Callouts */
#bsm-week1-day4-root .bsm-insight-box {
    padding: 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 24px !important;
}



#bsm-week1-day4-root /* Header Elements */
#bsm-week1-day4-root .bsm-icon-circle { width: 40px !important; height: 40px !important; border-radius: 50% !important; justify-content: center !important; margin-right: 16px !important; flex-shrink: 0 !important; }

#bsm-week1-day4-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day4-root /* Progress Bar */
#bsm-week1-day4-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }




#bsm-week1-day4-root /* Video Box */
#bsm-week1-day4-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#bsm-week1-day4-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#bsm-week1-day4-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#bsm-week1-day4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day4-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day4-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day4-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day4-root .bsm-flip-card.is-flipped { transform: rotateY(180deg) !important; }

#bsm-week1-day4-root .bsm-flip-front-hint svg { width: 16px !important; height: 16px !important; margin-right: 4px !important; }

#bsm-week1-day4-root .bsm-flip-back-title svg { width: 20px !important; height: 20px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

#bsm-week1-day4-root .bsm-flip-list-item::before { content: "•"; position: absolute !important; left: 0 !important; }

#bsm-week1-day4-root /* Carousel */
#bsm-week1-day4-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-right: 12px !important; }



#bsm-week1-day4-root .bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



/* 14 Oct 2026: + W1D5 key facts */ :is(#bsm-week1-day4-root, #bsm-week1-day5-root) .bsm-slide.active { display: block !important; animation: sp-bsm-week1-day4-root-bsmFadeIn 0.4s ease forwards !important; }




#bsm-week1-day4-root .bsm-reveal-btn:hover { transform: translateY(-2px) !important; }

#bsm-week1-day4-root .bsm-reveal-btn svg { width: 20px !important; height: 20px !important; margin-right: 8px !important; }

#bsm-week1-day4-root .bsm-sort-btn.disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#bsm-week1-day4-root .bsm-sort-btn.selected[data-type="predisposing"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-week1-day4-root .bsm-sort-btn.selected[data-type="precipitating"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-week1-day4-root .bsm-sort-btn.selected[data-type="perpetuating"] { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-week1-day4-root .bsm-alert-list span { display: block !important; margin-bottom: 8px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; padding-left: 12px !important; position: relative !important; }

#bsm-week1-day4-root .bsm-alert-list span::before { content: "•"; position: absolute !important; left: 0 !important; }

#bsm-week1-day4-root /* General Buttons */
#bsm-week1-day4-root .bsm-carousel-footer { padding-top: 16px !important; }




#bsm-week1-day4-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day4-root /* Success Block */
#bsm-week1-day4-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day4-root-bsmFadeIn 0.6s ease forwards !important; }

#bsm-week1-day4-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day4-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day4-root .u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-week1-day4-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#bsm-week1-day4-root .u-margin-bottom-8px { margin-bottom: 8px; }

#bsm-week1-day4-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-week1-day4-root .u-margin-top-24px { margin-top: 24px; }

#bsm-week1-day4-root .u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day5.css (scoped under #bsm-week1-day5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 5
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day5-root /* Core Layout Utilities */
#bsm-week1-day5-root .bsm-block:not(.bsm-hidden):not(.bsm-slide) { display: block !important; } /* 14 Oct 2026: not the key-fact slides */




#bsm-week1-day5-root /* Navigation */
#bsm-week1-day5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day5-root /* Cards */
#bsm-week1-day5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-week1-day5-root /* Header Elements */
#bsm-week1-day5-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day5-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day5-root /* Progress Bar */
#bsm-week1-day5-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }




#bsm-week1-day5-root /* Video Box */
#bsm-week1-day5-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#bsm-week1-day5-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#bsm-week1-day5-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#bsm-week1-day5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day5-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day5-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day5-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day5-root /* Comparison Grid Elements */
#bsm-week1-day5-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day5-root .bsm-compare-icon-label svg { width: 16px !important; height: 16px !important; margin-right: 8px !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;}

#bsm-week1-day5-root .bsm-compare-reveal-bar svg { width: 16px !important; height: 16px !important; margin-right: 6px !important; vertical-align: text-bottom !important; }

#bsm-week1-day5-root /* Quiz / Selection Options */
#bsm-week1-day5-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}

#bsm-week1-day5-root .bsm-option.locked { pointer-events: none !important; }

#bsm-week1-day5-root .bsm-option.correct { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day5-root .bsm-option.incorrect { opacity: var(--bsm3-opacity-medium) !important; }

#bsm-week1-day5-root .bsm-alert-warning strong { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;}

#bsm-week1-day5-root /* Buttons */
#bsm-week1-day5-root .bsm-btn-primary { padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; display: inline-block !important; }


#bsm-week1-day5-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day5-root /* Success Block */
#bsm-week1-day5-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day5-root-bsmFadeIn 0.6s ease forwards !important; }

#bsm-week1-day5-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day5-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day5-root .u-margin-bottom-24px { margin-bottom: 24px; }

#bsm-week1-day5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day5-root .u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-week1-day5-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#bsm-week1-day5-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-week1-day5-root .u-font-weight-800-font-size-18px-color-var { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day6.css (scoped under #bsm-week1-day6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 6
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day6-root /* Core Layout Utilities */
#bsm-week1-day6-root .bsm-block:not(.bsm-callout-box):not(.bsm-feedback-msg):not(.bsm-hidden):not(.bsm-option):not(.bsm-slide) { display: block !important; }




#bsm-week1-day6-root /* Navigation */
#bsm-week1-day6-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day6-root /* Cards & Banners */
#bsm-week1-day6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-week1-day6-root /* Header Elements */
#bsm-week1-day6-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day6-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day6-root /* Progress Bar */
#bsm-week1-day6-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }




#bsm-week1-day6-root /* Video Box */
#bsm-week1-day6-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#bsm-week1-day6-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#bsm-week1-day6-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#bsm-week1-day6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-week1-day6-root #bsm-cinematic-overlay.show { display: block; }

#bsm-week1-day6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-week1-day6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-week1-day6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-week1-day6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-week1-day6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-week1-day6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-week1-day6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-week1-day6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-week1-day6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-week1-day6-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-week1-day6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-week1-day6-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-week1-day6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-week1-day6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-week1-day6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-week1-day6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#bsm-week1-day6-root /* Carousel Elements */
#bsm-week1-day6-root .bsm-badge { padding: 4px 12px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }



#bsm-week1-day6-root .bsm-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#bsm-week1-day6-root .bsm-slide.active { display: block !important; animation: sp-bsm-week1-day6-root-bsmFadeIn 0.4s ease forwards !important; }


#bsm-week1-day6-root .bsm-reveal-action-btn:hover { transform: translateY(-2px) !important; }


#bsm-week1-day6-root /* Quiz / Selection Options */
#bsm-week1-day6-root .bsm-scenario-box { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-bottom: 24px !important; }

#bsm-week1-day6-root .bsm-option.locked { pointer-events: none !important; }

#bsm-week1-day6-root .bsm-option.selected { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }

#bsm-week1-day6-root .bsm-option.correct { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#bsm-week1-day6-root .bsm-option.incorrect { opacity: var(--bsm3-opacity-medium) !important; }



#bsm-week1-day6-root /* General Buttons */
#bsm-week1-day6-root .bsm-carousel-footer { padding-top: 16px !important; }




#bsm-week1-day6-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day6-root /* Success Block */
#bsm-week1-day6-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day6-root-bsmFadeIn 0.6s ease forwards !important; }

#bsm-week1-day6-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day6-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day6-root .u-margin-bottom-24px { margin-bottom: 24px; }

#bsm-week1-day6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-week1-day6-root .u-margin-bottom-20px { margin-bottom: 20px; }

#bsm-week1-day6-root .u-font-size-40px-margin-bottom-16px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }

#bsm-week1-day6-root .u-margin-bottom-16px { margin-bottom: 16px; }

#bsm-week1-day6-root .u-font-weight-500 { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

#bsm-week1-day6-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-week1-day6-root .u-font-weight-700-font-size-18px { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day6-root .u-font-weight-800-font-size-18px-color-var { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#bsm-week1-day6-root .u-margin-bottom-32px-3 { margin-bottom: 32px; }

#bsm-week1-day6-root .u-font-size-16px-font-weight-700-margin-bo-2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week1_day7.css (scoped under #bsm-week1-day7-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 DAY 7
========================================================================= */




/* Absolute Typographic Locks */

#bsm-week1-day7-root /* Core Layout Utilities */
#bsm-week1-day7-root .bsm-block:not(.bsm-hidden):not(.bsm-option) { display: block !important; }




#bsm-week1-day7-root /* Navigation */
#bsm-week1-day7-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#bsm-week1-day7-root /* Cards & Banners */
#bsm-week1-day7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#bsm-week1-day7-root /* Header Elements */
#bsm-week1-day7-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#bsm-week1-day7-root .bsm-icon-circle svg { width: 24px !important; height: 24px !important; }



#bsm-week1-day7-root /* Progress Bar */
#bsm-week1-day7-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }


#bsm-week1-day7-root /* Quiz Questions */
#bsm-week1-day7-root .bsm-slide { display: none !important; }

#bsm-week1-day7-root .bsm-slide.active { display: block !important; animation: sp-bsm-week1-day7-root-bsmFadeIn 0.3s ease forwards !important; }

#bsm-week1-day7-root /* Options */
#bsm-week1-day7-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
}

#bsm-week1-day7-root .bsm-option.selected { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }


#bsm-week1-day7-root /* Buttons */
#bsm-week1-day7-root .bsm-carousel-footer { padding-top: 24px !important; margin-top: 24px !important; }




#bsm-week1-day7-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#bsm-week1-day7-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#bsm-week1-day7-root .bsm-review-ans-row strong { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-week1-day7-root /* Success Block */
#bsm-week1-day7-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-bsm-week1-day7-root-bsmFadeIn 0.6s ease forwards !important; margin-top: 24px !important;}

#bsm-week1-day7-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-bsm-week1-day7-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-week1-day7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day1.css (scoped under #cbti-w2-d1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w2-d1-root /* Core Layout Utilities */
#cbti-w2-d1-root .bsm-block:not(.bsm-answer-explanation):not(.bsm-hidden):not(.w2d1-barrier-card):not(.w2d1-barrier-feedback):not(.w2d1-barrier-grid):not(.w2d1-flashcards-grid):not(.w2d1-match-items):not(.w2d1-match-zones):not(.w2d1-zone) { display: block !important; }




#cbti-w2-d1-root /* Navigation */
#cbti-w2-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d1-root /* Cards */
#cbti-w2-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d1-root /* Header Elements */
#cbti-w2-d1-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}


#cbti-w2-d1-root .bsm-icon-circle svg,
#cbti-w2-d1-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }





#cbti-w2-d1-root /* Progress Bar */
#cbti-w2-d1-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}




#cbti-w2-d1-root /* Video Placeholder */
#cbti-w2-d1-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

#cbti-w2-d1-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d1-root .bsm-play-btn svg {
    width: 32px !important;
    height: 32px !important;
    margin-left: 4px !important;
}

#cbti-w2-d1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d1-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d1-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d1-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d1-root .w2d1-flip-card.is-flipped { transform: rotateY(180deg) !important; }

#cbti-w2-d1-root /* Interactive: Match Game */
#cbti-w2-d1-root .w2d1-match-zones {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d1-root .w2d1-match-item.is-placed {
    cursor: default !important;
    pointer-events: none !important;
}

#cbti-w2-d1-root /* Options / Quizzes */
#cbti-w2-d1-root .bsm-option {
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text)!important;
    transition: all 0.2s !important;
}

#cbti-w2-d1-root .bsm-option.locked { pointer-events: none !important; }

#cbti-w2-d1-root .bsm-option.correct {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d1-root .bsm-option.incorrect {
    opacity: var(--bsm3-opacity-medium) !important;
}

#cbti-w2-d1-root /* Feedback & Primary Buttons */
#cbti-w2-d1-root .bsm-feedback-msg {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}



#cbti-w2-d1-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d1-root /* Success Block */
#cbti-w2-d1-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w2-d1-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d1-root .bsm-success-icon svg {
    width: 100% !important;
    height: 100% !important;
}@keyframes sp-cbti-w2-d1-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d1-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d1-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d1-root .u-margin-bottom-24px { margin-bottom: 24px; }

#cbti-w2-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d1-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d1-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d1-root .u-line-height-1-5-color-var-diary-text-mut { line-height: 1.5; }

#cbti-w2-d1-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w2-d1-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d1-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }

#cbti-w2-d1-root .u-text-align-left-align-items-flex-start { text-align: left !important; align-items: flex-start !important; }

#cbti-w2-d1-root .u-font-weight-700-font-size-15px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 6px; }

#cbti-w2-d1-root .u-font-size-13px-opacity-0-85-line-height { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-high); line-height: 1.4; }

#cbti-w2-d1-root .u-font-weight-500-margin-bottom-12px { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); margin-bottom: 12px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day2.css (scoped under #cbti-w2-d2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 2
========================================================================= */




#cbti-w2-d2-root .bsm-icon-circle svg,
#cbti-w2-d2-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }









#cbti-w2-d2-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d2-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d2-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d2-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d2-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d2-root .w2d2-flip-card.is-flipped { transform: rotateY(180deg) !important; }

#cbti-w2-d2-root /* Sort Game */
#cbti-w2-d2-root .w2d2-match-zones {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 16px !important; margin-bottom: 24px !important;
}

#cbti-w2-d2-root .w2d2-match-btn.locked { pointer-events: none !important; opacity: 1 !important; }

#cbti-w2-d2-root /* Sleep Need Selection */
#cbti-w2-d2-root .w2d2-selection-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 24px !important;
}

#cbti-w2-d2-root .w2d2-diary-response a,
#cbti-w2-d2-root .w2d2-diary-link { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; cursor: pointer !important;
}

#cbti-w2-d2-root /* Feedback & Buttons */
#cbti-w2-d2-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}



#cbti-w2-d2-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d2-root .bsm-success-block {
    display: none !important; text-align: center !important;
    padding: 40px 20px !important; animation: sp-cbti-w2-d2-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d2-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d2-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d2-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d2-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d2-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d2-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d2-root .u-line-height-1-5-color-var-diary-text-mut { line-height: 1.5; }

#cbti-w2-d2-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d2-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }

#cbti-w2-d2-root .u-margin-top-20px-2 { margin-top: 20px; }

#cbti-w2-d2-root .u-margin-12px-0-0-0-padding-left-20px-line { margin:12px 0 0 0;padding-left:20px;line-height:1.8; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day3.css (scoped under #cbti-w2-d3-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 3
========================================================================= */




#cbti-w2-d3-root .bsm-icon-circle svg,
#cbti-w2-d3-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }




#cbti-w2-d3-root .w2d3-reframe-box strong {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w2-d3-root .w2d3-safety-box strong {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}






#cbti-w2-d3-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d3-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d3-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d3-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d3-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d3-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d3-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d3-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d3-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d3-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d3-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d3-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d3-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d3-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d3-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d3-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d3-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d3-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d3-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d3-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d3-root /* Flashcards */
#cbti-w2-d3-root .w2d3-flashcards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

#cbti-w2-d3-root .w2d3-flip-card.is-flipped { transform: rotateY(180deg) !important; }

#cbti-w2-d3-root .w2d3-chain-step.is-locked { opacity: var(--bsm3-opacity-medium) !important; cursor: default !important; pointer-events: none !important; }

#cbti-w2-d3-root .w2d3-chain-step.is-revealed { cursor: default !important; pointer-events: none !important; }

#cbti-w2-d3-root .w2d3-qc-btn.is-correct { pointer-events: none !important;
}

#cbti-w2-d3-root .w2d3-qc-btn.is-wrong { pointer-events: none !important;
}

#cbti-w2-d3-root /* Barrier Selection — Task 5 */
#cbti-w2-d3-root .w2d3-barrier-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

#cbti-w2-d3-root .w2d3-barrier-card.is-selected {
    pointer-events: none !important;
}

#cbti-w2-d3-root .w2d3-plan-prompt.is-selected {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d3-root .w2d3-plan-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d3-root /* Feedback & Buttons */
#cbti-w2-d3-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}



#cbti-w2-d3-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d3-root .bsm-success-block {
    display: none !important; text-align: center !important; padding: 40px 20px !important;
    animation: sp-cbti-w2-d3-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d3-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d3-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d3-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d3-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d3-root .u-margin-bottom-24px { margin-bottom: 24px; }

#cbti-w2-d3-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w2-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d3-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d3-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d3-root .u-line-height-1-5-color-var-diary-text-mut { line-height: 1.5; }

#cbti-w2-d3-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w2-d3-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d3-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day4.css (scoped under #cbti-w2-d4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 4
========================================================================= */




#cbti-w2-d4-root .bsm-icon-circle svg,
#cbti-w2-d4-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }









#cbti-w2-d4-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d4-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d4-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d4-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d4-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d4-root /* Check-in */
#cbti-w2-d4-root .w2d4-checkin-grid {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important; margin-top: 20px !important;
}

#cbti-w2-d4-root .w2d4-slide.active { display: block !important; }

#cbti-w2-d4-root .w2d4-revealed-content.is-visible { display: block !important; }

#cbti-w2-d4-root .w2d4-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }

#cbti-w2-d4-root .w2d4-nav-btn.locked { opacity: var(--bsm3-opacity-low) !important; pointer-events: none !important; }

#cbti-w2-d4-root .w2d4-act-example.is-open .w2d4-act-back { display: block !important; }

#cbti-w2-d4-root .w2d4-act-example.is-open .w2d4-act-hint { display: none !important; }

#cbti-w2-d4-root .w2d4-act-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d4-root .w2d4-quiz-feedback.is-correct {
    display: block !important;
}

#cbti-w2-d4-root .w2d4-quiz-feedback.is-incorrect {
    display: block !important;
}

#cbti-w2-d4-root /* Pick One */
#cbti-w2-d4-root .w2d4-pick-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; margin-top: 20px !important;
}

#cbti-w2-d4-root /* Feedback & Buttons */
#cbti-w2-d4-root .bsm-feedback-msg {
    margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important;
}



#cbti-w2-d4-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d4-root .bsm-success-block {
    display: none !important; text-align: center !important;
    padding: 40px 20px !important; animation: sp-cbti-w2-d4-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d4-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d4-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d4-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d4-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d4-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d4-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d4-root .u-font-size-14px-line-height-1-6 { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; }

#cbti-w2-d4-root .u-font-weight-700-font-size-16px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 20px; }

#cbti-w2-d4-root .u-font-size-14px-font-style-italic-line-he { font-size: var(--bsm3-text-body-use-on-reading-text); font-style: italic; line-height: 1.6; }

#cbti-w2-d4-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d4-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day5.css (scoped under #cbti-w2-d5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 5
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w2-d5-root /* Core Layout Utilities */
#cbti-w2-d5-root .bsm-block:not(.bsm-hidden):not(.w2d5-action-btn):not(.w2d5-pb-chip-row):not(.w2d5-pb-cutoff-box):not(.w2d5-pb-section-label):not(.w2d5-plan-actions):not(.w2d5-plan-list):not(.w2d5-plan-row):not(.w2d5-plan-statement) { display: block !important; }




#cbti-w2-d5-root /* Navigation */
#cbti-w2-d5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d5-root /* Cards */
#cbti-w2-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d5-root /* Header Elements */
#cbti-w2-d5-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}


#cbti-w2-d5-root .bsm-icon-circle svg,
#cbti-w2-d5-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }



#cbti-w2-d5-root /* Progress Bar */
#cbti-w2-d5-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}




#cbti-w2-d5-root /* Video Placeholder */
#cbti-w2-d5-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

#cbti-w2-d5-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d5-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d5-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d5-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d5-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d5-root .w2d5-action-btn.is-correct-avoid {
    pointer-events: none !important;
}

#cbti-w2-d5-root .w2d5-action-btn.is-correct-do {
    pointer-events: none !important;
}

#cbti-w2-d5-root .w2d5-action-btn.locked {
    opacity: var(--bsm3-opacity-low) !important;
    pointer-events: none !important;
}

#cbti-w2-d5-root .w2d5-action-btn.is-incorrect-pick {
    opacity: var(--bsm3-opacity-high) !important;
}

#cbti-w2-d5-root .w2d5-plan-row.is-answered .w2d5-action-btn { pointer-events: none !important; }

#cbti-w2-d5-root .w2d5-pb-chip.is-selected {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w2-d5-root .w2d5-pb-mini-textarea::placeholder { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w2-d5-root .w2d5-pb-commit-single.is-committed {
    pointer-events: none !important;
}

#cbti-w2-d5-root /* Feedback & Primary Buttons */
#cbti-w2-d5-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}


#cbti-w2-d5-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d5-root /* Success Block */
#cbti-w2-d5-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w2-d5-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d5-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d5-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d5-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d5-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d5-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d5-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w2-d5-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d5-root .u-margin-bottom-16px { margin-bottom: 16px; }

#cbti-w2-d5-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d5-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }

#cbti-w2-d5-root .u-margin-top-8px-font-size-15px { margin-top: 8px; font-size: var(--bsm3-text-body-use-on-reading-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day6.css (scoped under #cbti-w2-d6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 6
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w2-d6-root /* Core Layout Utilities */
#cbti-w2-d6-root .bsm-block:not(.bsm-hidden):not(.pg-cbti-module-week2-day6-i002):not(.u-display-none-2):not(.w2d6-bit-card):not(.w2d6-bit-grid):not(.w2d6-bsm-back):not(.w2d6-bsm-front):not(.w2d6-bsm-link-row):not(.w2d6-bsm-slide):not(.w2d6-carousel-controls):not(.w2d6-flag-box):not(.w2d6-helps-item):not(.w2d6-helps-list):not(.w2d6-revealed-content):not(.w2d6-slide-item):not(.w2d6-strength-item):not(.w2d6-strengths-box):not(.w2d6-strengths-title):not(.w2d6-warning-box):not(.w2d6-warning-title) { display: block !important; }




#cbti-w2-d6-root /* Navigation */
#cbti-w2-d6-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d6-root /* Cards */
#cbti-w2-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d6-root /* Header Elements */
#cbti-w2-d6-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}


#cbti-w2-d6-root .bsm-icon-circle svg,
#cbti-w2-d6-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }



#cbti-w2-d6-root /* Progress Bar */
#cbti-w2-d6-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}




#cbti-w2-d6-root /* Video Placeholder */
#cbti-w2-d6-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

#cbti-w2-d6-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d6-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w2-d6-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w2-d6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w2-d6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w2-d6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w2-d6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w2-d6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w2-d6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w2-d6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w2-d6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w2-d6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w2-d6-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w2-d6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w2-d6-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w2-d6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w2-d6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w2-d6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w2-d6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w2-d6-root .w2d6-bsm-slide.active { display: block !important; }

#cbti-w2-d6-root .w2d6-bsm-back.is-visible { display: block !important; }

#cbti-w2-d6-root .w2d6-slide-item.active { display: block !important; }

#cbti-w2-d6-root .w2d6-btn-explore:hover { opacity: var(--bsm3-opacity-high) !important; transform: translateY(-1px) !important; }

#cbti-w2-d6-root .w2d6-slide-item.is-explored .w2d6-btn-explore { display: none !important; }

#cbti-w2-d6-root .w2d6-slide-item.is-explored .w2d6-revealed-content { display: block !important; }

#cbti-w2-d6-root .w2d6-helps-item::before {
    content: "•";
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w2-d6-root .w2d6-dot.active { width: 24px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }

#cbti-w2-d6-root .w2d6-nav-btn.locked { opacity: var(--bsm3-opacity-low) !important; pointer-events: none !important; }

#cbti-w2-d6-root /* Global Buttons & Feedback */
#cbti-w2-d6-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}


#cbti-w2-d6-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d6-root /* Success Block */
#cbti-w2-d6-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w2-d6-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d6-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d6-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#cbti-w2-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d6-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d6-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w2-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d6-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d6-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d6-root .u-font-size-14px-line-height-1-6 { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; }

#cbti-w2-d6-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d6-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w2-d6-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }

#cbti-w2-d6-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d6-root .u-display-none-2 { display: none !important; }

#cbti-w2-d6-root .u-font-weight-700-font-size-16px-margin-bo-2 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 16px; }

#cbti-w2-d6-root .u-font-size-20px-margin-0-2 { font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0 !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week2_day7.css (scoped under #cbti-w2-d7-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 DAY 7
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w2-d7-root /* Core Layout Utilities */
#cbti-w2-d7-root .bsm-block:not(.bsm-hidden):not(.bsm-option):not(.w2d7-quiz-question):not(.w2d7-scale-grid) { display: block !important; }




#cbti-w2-d7-root /* Navigation */
#cbti-w2-d7-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-d7-root /* Cards */
#cbti-w2-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d7-root /* Header Elements */
#cbti-w2-d7-root .bsm-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}


#cbti-w2-d7-root .bsm-icon-circle svg,
#cbti-w2-d7-root .bsm-icon-circle-small svg { width: 20px !important; height: 20px !important; }

#cbti-w2-d7-root /* Numbered Circle for Lists */
#cbti-w2-d7-root .w2d7-num-circle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}



#cbti-w2-d7-root /* Progress Bar */
#cbti-w2-d7-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}




#cbti-w2-d7-root /* Video Placeholder */
#cbti-w2-d7-root .bsm-video-box {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    cursor: pointer !important;
    position: relative !important;
    margin-top: 16px !important;
    transition: opacity 0.3s !important;
}

#cbti-w2-d7-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w2-d7-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w2-d7-root /* Quiz & Options Formatting */
#cbti-w2-d7-root .w2d7-quiz-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

#cbti-w2-d7-root .bsm-option.locked { pointer-events: none !important; }

#cbti-w2-d7-root .bsm-option.correct {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}

#cbti-w2-d7-root .bsm-option.incorrect {
    opacity: var(--bsm3-opacity-medium) !important;
}

#cbti-w2-d7-root /* Reflection Elements */
#cbti-w2-d7-root .w2d7-reflection-row {
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-d7-root .w2d7-reflection-row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


#cbti-w2-d7-root .w2d7-btn-orange:hover:not(.locked) {
    transform: translateY(-2px) !important;
    opacity: var(--bsm3-opacity-high) !important;
}

#cbti-w2-d7-root .w2d7-btn-orange.locked {
    cursor: default !important;
    pointer-events: none !important;
}

#cbti-w2-d7-root /* Feedback & Primary Buttons */
#cbti-w2-d7-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}


#cbti-w2-d7-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w2-d7-root /* Success Block */
#cbti-w2-d7-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w2-d7-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w2-d7-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w2-d7-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w2-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-d7-root .u-font-size-18px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d7-root .u-margin-bottom-24px { margin-bottom: 24px; }

#cbti-w2-d7-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w2-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w2-d7-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-d7-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w2-d7-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w2-d7-root .u-margin-bottom-16px { margin-bottom: 16px; }

#cbti-w2-d7-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-d7-root .u-display-flex-align-items-center-gap-4px { display: flex; align-items: center; gap: 4px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day1.css (scoped under #cbti-w3-d1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w3-d1-root /* Core Layout Utilities */
#cbti-w3-d1-root .bsm-block:not(.bsm-hidden):not(.w3d1-acc-container):not(.w3d1-acc-content):not(.w3d1-energizer-card):not(.w3d1-energizer-grid):not(.w3d1-fact-item):not(.w3d1-hunger-feedback):not(.w3d1-hunger-stage):not(.w3d1-safety-title) { display: block !important; }




#cbti-w3-d1-root /* Navigation */
#cbti-w3-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-d1-root /* Cards */
#cbti-w3-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d1-root /* Header Elements */
#cbti-w3-d1-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}




#cbti-w3-d1-root /* Progress Bar */
#cbti-w3-d1-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }




#cbti-w3-d1-root /* Video Placeholder */
#cbti-w3-d1-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#cbti-w3-d1-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w3-d1-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w3-d1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w3-d1-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w3-d1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w3-d1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w3-d1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w3-d1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w3-d1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w3-d1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w3-d1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w3-d1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w3-d1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w3-d1-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w3-d1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w3-d1-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w3-d1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w3-d1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w3-d1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w3-d1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w3-d1-root .w3d1-acc-row.is-open .w3d1-acc-content { display: block !important; }

#cbti-w3-d1-root .w3d1-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

#cbti-w3-d1-root /* ==========================================================================
   ENERGIZERS & ANTI-NAP
   ========================================================================== */
#cbti-w3-d1-root .w3d1-energizer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d1-root .w3d1-btn-commit:hover {
    transform: translateY(-2px) !important;
}

#cbti-w3-d1-root .w3d1-btn-commit.is-locked {
    pointer-events: none !important;
}

#cbti-w3-d1-root /* Feedback & Primary Buttons */
#cbti-w3-d1-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}


#cbti-w3-d1-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w3-d1-root /* Success Block */
#cbti-w3-d1-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w3-d1-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w3-d1-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w3-d1-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w3-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-d1-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w3-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w3-d1-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d1-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d1-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w3-d1-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w3-d1-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d1-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w3-d1-root .u-font-weight-600-font-size-14px { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-medium-14px-use-on-text); }

#cbti-w3-d1-root .u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d1-root .u-margin-0-3 { margin:0!important; }

#cbti-w3-d1-root .u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day2.css (scoped under #cbti-w3-d2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 2
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w3-d2-root /* Core Layout Utilities */
#cbti-w3-d2-root .bsm-block:not(.bsm-hidden):not(.w3d2-cascade-container):not(.w3d2-cascade-content):not(.w3d2-cascade-num):not(.w3d2-cascade-step):not(.w3d2-cascade-trigger):not(.w3d2-cw-check-circle):not(.w3d2-cw-check-item):not(.w3d2-cw-checklist):not(.w3d2-options-grid):not(.w3d2-path-list):not(.w3d2-protocol-info):not(.w3d2-stack-list) { display: block !important; }




#cbti-w3-d2-root /* Navigation */
#cbti-w3-d2-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-d2-root /* Cards */
#cbti-w3-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d2-root /* Header Elements */
#cbti-w3-d2-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}




#cbti-w3-d2-root /* Progress Bar */
#cbti-w3-d2-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }




#cbti-w3-d2-root /* Video Placeholder */
#cbti-w3-d2-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#cbti-w3-d2-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w3-d2-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w3-d2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w3-d2-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w3-d2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w3-d2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w3-d2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w3-d2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w3-d2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w3-d2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w3-d2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w3-d2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w3-d2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w3-d2-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w3-d2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w3-d2-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w3-d2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w3-d2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w3-d2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w3-d2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w3-d2-root .w3d2-cascade-step.revealed .w3d2-cascade-content { display: block !important; }

#cbti-w3-d2-root /* ==========================================================================
   NIGHT-AWAKENING PROTOCOL BUILDER
   ========================================================================== */
#cbti-w3-d2-root .w3d2-protocol-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}


#cbti-w3-d2-root .w3d2-path-item::before { content: "•"; position: absolute !important; left: 0 !important; }

#cbti-w3-d2-root /* Feedback & Primary Buttons */
#cbti-w3-d2-root .bsm-feedback-msg { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important; }



#cbti-w3-d2-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w3-d2-root /* Success Block */
#cbti-w3-d2-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-cbti-w3-d2-root-bsmFadeIn 0.6s ease forwards !important; }

#cbti-w3-d2-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w3-d2-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w3-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-d2-root .u-flex-1 { flex:1; }

#cbti-w3-d2-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w3-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w3-d2-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d2-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d2-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w3-d2-root .u-margin-bottom-16px { margin-bottom: 16px; }

#cbti-w3-d2-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w3-d2-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d2-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w3-d2-root .u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d2-root .u-margin-0-3 { margin:0!important; }

#cbti-w3-d2-root .u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day3.css (scoped under #bsm-w3d3-root) ===== */
/* ==========================================================================
   GLASS ARMOR & THEME OVERRIDES FOR DAY 3
   ========================================================================== */



/* Base structural classes & Layout Constraints */




/* Absolute Typography Locks */


/* Glass Panels */




/* Header & Progress */






/* Section Completion Banners */



/* Video Frame */





#bsm-w3d3-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#bsm-w3d3-root #bsm-cinematic-overlay.show { display: block; }

#bsm-w3d3-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#bsm-w3d3-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#bsm-w3d3-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-bsm-w3d3-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#bsm-w3d3-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-w3d3-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-w3d3-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#bsm-w3d3-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-w3d3-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#bsm-w3d3-root #bsm-video-overlay-title.show { opacity: 1; }

#bsm-w3d3-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#bsm-w3d3-root #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-w3d3-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#bsm-w3d3-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#bsm-w3d3-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#bsm-w3d3-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

/* Numbered Section Header */




/* Interactive Tiles */







/* Carousels */









/* Accordion Timeline */









/* Quiz Buttons */




/* Wake Anchor */







/* Action Button */


/* Info Box */




#bsm-w3d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-w3d3-root .u-font-size-13px-font-weight-400 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }

#bsm-w3d3-root .u-margin-top-8px-2 { margin-top: 8px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day4.css (scoped under #cbti-w3-d4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 4
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w3-d4-root /* Core Layout Utilities */
#cbti-w3-d4-root .bsm-block:not(.bsm-hidden):not(.w3d4-acc-container):not(.w3d4-acc-content):not(.w3d4-hygiene-body):not(.w3d4-hygiene-list):not(.w3d4-match-list):not(.w3d4-match-zones):not(.w3d4-option-btn):not(.w3d4-options-grid):not(.w3d4-routine-step):not(.w3d4-step-num):not(.w3d4-summary-card):not(.w3d4-summary-item):not(.w3d4-summary-title):not(.w3d4-where-card):not(.w3d4-where-grid) { display: block !important; }




#cbti-w3-d4-root /* Navigation */
#cbti-w3-d4-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-d4-root /* Cards */
#cbti-w3-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d4-root /* Header Elements */
#cbti-w3-d4-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}



#cbti-w3-d4-root /* Progress Bar */
#cbti-w3-d4-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }




#cbti-w3-d4-root /* Video Placeholder */
#cbti-w3-d4-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#cbti-w3-d4-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w3-d4-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w3-d4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w3-d4-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w3-d4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w3-d4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w3-d4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w3-d4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w3-d4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w3-d4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w3-d4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w3-d4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w3-d4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w3-d4-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w3-d4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w3-d4-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w3-d4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w3-d4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w3-d4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w3-d4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w3-d4-root .w3d4-acc-row.is-open .w3d4-acc-content { display: block !important; }

#cbti-w3-d4-root .w3d4-hygiene-item.is-open .w3d4-hygiene-chevron { transform: rotate(180deg) !important; }

#cbti-w3-d4-root .w3d4-hygiene-item.is-open .w3d4-hygiene-body { display: block !important; }

#cbti-w3-d4-root .w3d4-match-row.is-placed-active {
    pointer-events: none !important;
}

#cbti-w3-d4-root .w3d4-match-row.is-placed-passive {
    pointer-events: none !important;
}

#cbti-w3-d4-root /* Custom "Other" Input */
#cbti-w3-d4-root .w3d4-custom-input-wrap {
    display: none !important;
    width: 100% !important;
    margin-top: 12px !important;
    animation: sp-cbti-w3-d4-root-bsmFadeIn 0.3s ease forwards !important;
    grid-column: span 2 !important;
}

#cbti-w3-d4-root /* ==========================================================================
   WHERE WILL YOU WIND DOWN (Grid)
   ========================================================================== */
#cbti-w3-d4-root .w3d4-where-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

#cbti-w3-d4-root /* Feedback & Primary Buttons */
#cbti-w3-d4-root .bsm-feedback-correct {
    margin-top: 16px !important;
    font-size: var(--bsm3-text-body-use-on-reading-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    padding: 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    display: none !important;
}


#cbti-w3-d4-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w3-d4-root /* Success Block */
#cbti-w3-d4-root .bsm-success-block {
    display: none !important;
    text-align: center !important;
    padding: 40px 20px !important;
    animation: sp-cbti-w3-d4-root-bsmFadeIn 0.6s ease forwards !important;
}

#cbti-w3-d4-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w3-d4-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w3-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-d4-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w3-d4-root .u-margin-bottom-24px { margin-bottom: 24px; }

#cbti-w3-d4-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w3-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w3-d4-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d4-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d4-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w3-d4-root .u-margin-bottom-16px { margin-bottom: 16px; }

#cbti-w3-d4-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d4-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w3-d4-root .u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d4-root .u-margin-0-3 { margin:0!important; }

#cbti-w3-d4-root .u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }

#cbti-w3-d4-root .u-margin-top-8px-font-size-15px { margin-top: 8px; font-size: var(--bsm3-text-body-use-on-reading-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day5.css (scoped under #cbti-w3-d5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 5
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w3-d5-root /* Core Layout Utilities */
#cbti-w3-d5-root .bsm-block:not(.bsm-hidden):not(.w3d5-bullet-item):not(.w3d5-bullet-list):not(.w3d5-info-dark-title):not(.w3d5-match-list):not(.w3d5-match-zones):not(.w3d5-options-stack):not(.w3d5-shift-worker-box):not(.w3d5-stack-btn):not(.w3d5-switch-stage) { display: block !important; }




#cbti-w3-d5-root /* Navigation */
#cbti-w3-d5-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-d5-root /* Cards */
#cbti-w3-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d5-root /* Header Elements */
#cbti-w3-d5-root .bsm-icon-circle-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}




#cbti-w3-d5-root /* Progress Bar */
#cbti-w3-d5-root .bsm-progress-header { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }




#cbti-w3-d5-root /* Video Placeholder */
#cbti-w3-d5-root .bsm-video-box { width: 100% !important; height: 400px !important; border-radius: var(--bsm3-radius-primary-cards)!important; cursor: pointer !important; position: relative !important; margin-top: 16px !important; transition: opacity 0.3s !important; }

#cbti-w3-d5-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w3-d5-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w3-d5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w3-d5-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w3-d5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w3-d5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w3-d5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w3-d5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w3-d5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w3-d5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w3-d5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w3-d5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w3-d5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w3-d5-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w3-d5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w3-d5-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w3-d5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w3-d5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w3-d5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w3-d5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w3-d5-root .w3d5-switch-stage.is-dim .w3d5-toggle-pill {
    transform: translateX(100%) !important;
}

#cbti-w3-d5-root .w3d5-switch-stage.is-dim .w3d5-meter-label { opacity: 1 !important; }

#cbti-w3-d5-root .w3d5-switch-stage.is-dim .w3d5-meter-fill { width: 95% !important; }

#cbti-w3-d5-root /* ==========================================================================
   DISRUPTOR SORTING GAME
   ========================================================================== */
#cbti-w3-d5-root .w3d5-match-zones {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-d5-root .w3d5-match-row.is-placed-systemic {
    pointer-events: none !important;
}

#cbti-w3-d5-root .w3d5-match-row.is-placed-habitual {
    pointer-events: none !important;
}

#cbti-w3-d5-root .w3d5-bullet-item::before { content: "•"; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1 !important; }

#cbti-w3-d5-root /* Feedback & Primary Buttons */
#cbti-w3-d5-root .bsm-feedback-msg { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; display: none !important; }



#cbti-w3-d5-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w3-d5-root /* Success Block */
#cbti-w3-d5-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-cbti-w3-d5-root-bsmFadeIn 0.6s ease forwards !important; }

#cbti-w3-d5-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w3-d5-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#cbti-w3-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-d5-root .u-font-size-20px { font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w3-d5-root .u-margin-bottom-24px { margin-bottom: 24px; }

#cbti-w3-d5-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w3-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w3-d5-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d5-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d5-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w3-d5-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w3-d5-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d5-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w3-d5-root .u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d5-root .u-margin-0-3 { margin:0!important; }

#cbti-w3-d5-root .u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }

#cbti-w3-d5-root .u-margin-top-8px-font-size-15px { margin-top: 8px; font-size: var(--bsm3-text-body-use-on-reading-text); }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day6.css (scoped under #cbti-w3-d6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 DAY 6
========================================================================= */









#cbti-w3-d6-root .bsm-video-box:hover { opacity: var(--bsm3-opacity-high) !important; }


#cbti-w3-d6-root .bsm-play-btn svg { width: 32px !important; height: 32px !important; margin-left: 4px !important; }

#cbti-w3-d6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w3-d6-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w3-d6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w3-d6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w3-d6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w3-d6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w3-d6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w3-d6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w3-d6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w3-d6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w3-d6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w3-d6-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w3-d6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w3-d6-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w3-d6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w3-d6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w3-d6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w3-d6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w3-d6-root .w3d6-flip-card.is-flipped { transform: rotateY(180deg) !important; }

#cbti-w3-d6-root .w3d6-check-row.locked-commit { cursor: default !important; pointer-events: none !important; }

#cbti-w3-d6-root .w3d6-bullet-item::before { content: "•"; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1 !important; }





#cbti-w3-d6-root .bsm-btn-primary:hover:not(.bsm-btn-disabled) { transform: translateY(-2px) !important; }

#cbti-w3-d6-root .bsm-success-block { display: none !important; text-align: center !important; padding: 40px 20px !important; animation: sp-cbti-w3-d6-root-bsmFadeIn 0.6s ease forwards !important; }

#cbti-w3-d6-root .bsm-success-icon svg { width: 100% !important; height: 100% !important; }@keyframes sp-cbti-w3-d6-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#cbti-w3-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-d6-root .u-margin-bottom-12px { margin-bottom: 12px; }

#cbti-w3-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-24px-font-size-16px { margin-top: 24px; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w3-d6-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d6-root .u-font-size-20px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d6-root .u-margin-top-32px-margin-bottom-32px { margin-top: 32px; margin-bottom: 32px; }

#cbti-w3-d6-root .u-line-height-1-5-color-var-diary-text-mut { line-height: 1.5; }

#cbti-w3-d6-root .u-margin-bottom-8px { margin-bottom: 8px; }

#cbti-w3-d6-root .u-position-absolute-bottom-16px-left-0-wid { position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-d6-root .u-margin-top-4px { margin-top: 4px; }

#cbti-w3-d6-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w3-d6-root .u-display-none-2 { display: none !important; }

#cbti-w3-d6-root .u-font-size-18px-margin-0 { font-size: var(--bsm3-text-large-16px-use-on-text); margin:0!important; }

#cbti-w3-d6-root .u-margin-0-3 { margin:0!important; }

#cbti-w3-d6-root .u-display-flex-align-items-center-gap-4px-2 { display: flex; align-items: center; gap: 4px; margin-top:4px; }

#cbti-w3-d6-root .u-margin-bottom-8px-3 { margin-bottom:8px!important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week3_day7.css (scoped under #bsm-w3d7-root) ===== */
/* ==========================================================================
   GLASS ARMOR & THEME OVERRIDES FOR DAY 7
   ========================================================================== */



/* Base structural classes & Layout Constraints */




/* Absolute Typography Locks */


/* Glass Panels */



/* Header & Progress */






/* Quiz Specific Styling */






/* The Empty Circle before clicking (Forced visibility) */

/* Correct Answer State */


/* Wrong Answer State */


/* Explanation Box (Reveals when answered) */

/* Disabled State after answering */


/* Commitment Section */





/* Action Button */


#bsm-w3d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-8px-2 { margin-top: 8px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day1.css (scoped under #cbti-w4-d1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d1-root /* Core Layout Utilities */
#cbti-w4-d1-root .bsm-block:not(.bsm-card-grid):not(.bsm-flip-back):not(.bsm-flip-front):not(.bsm-hidden) { display: block !important; }




#cbti-w4-d1-root /* Navigation */
#cbti-w4-d1-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d1-root /* Header & Progress Cards */
#cbti-w4-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}





#cbti-w4-d1-root /* Typography */
#cbti-w4-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; line-height: 1.3 !important; }



#cbti-w4-d1-root /* Interactive Video */
#cbti-w4-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w4-d1-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w4-d1-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w4-d1-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w4-d1-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w4-d1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d1-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d1-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d1-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w4-d1-root /* Sections */
#cbti-w4-d1-root .bsm-section {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 32px !important;
}




#cbti-w4-d1-root /* Flip Cards Grid */
#cbti-w4-d1-root .bsm-card-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }


#cbti-w4-d1-root /* 3D Flip Card Architecture */
#cbti-w4-d1-root .bsm-flip-container { perspective: 1000px !important; width: 100% !important; height: 180px !important; cursor: pointer !important; }

#cbti-w4-d1-root .bsm-flip-container.is-flipped .bsm-flip-inner { transform: rotateY(180deg) !important; }


#cbti-w4-d1-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d1-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w4-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d1-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d1-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d1-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d1-root .u-width-0pc { width: 0%; }

#cbti-w4-d1-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d1-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d1-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d1-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d1-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w4-d1-root .u-margin-bottom-0-color-var-cat-color { margin-bottom:0 !important; }

#cbti-w4-d1-root .u-font-size-12px-margin-top-12px { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-top:12px !important; }

#cbti-w4-d1-root .u-margin-bottom-32px-2 { margin-bottom: 32px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day2.css (scoped under #cbti-w4-d2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 2
========================================================================= */




#cbti-w4-d2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d2-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d2-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d2-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

/* Absolute Typographic Locks */

#cbti-w4-d2-root /* Core Layout Utilities */
#cbti-w4-d2-root .bsm-block:not(.bsm-hidden):not(.bsm-chip-container):not(.bsm-cycle-wrap) { display: block !important; }




#cbti-w4-d2-root /* Navigation */
#cbti-w4-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d2-root /* Header & Progress Cards */
#cbti-w4-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d2-root /* Typography */
#cbti-w4-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w4-d2-root /* Sections */
#cbti-w4-d2-root .bsm-section {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important;
}



#cbti-w4-d2-root /* Buttons */
#cbti-w4-d2-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d2-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d2-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#cbti-w4-d2-root /* Interactive Elements */
#cbti-w4-d2-root .bsm-insight-box {
    padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-top: 16px !important;
}







#cbti-w4-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d2-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d2-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d2-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d2-root .u-width-0pc { width: 0%; }

#cbti-w4-d2-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d2-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d2-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d2-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d2-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d2-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w4-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-margin-bottom-8px { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom:8px !important; }

#cbti-w4-d2-root .u-margin-top-16px-2 { margin-top: 16px !important; }

#cbti-w4-d2-root .u-margin-bottom-0-font-size-14px { margin-bottom:0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day3.css (scoped under #cbti-w4-d3-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 3
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d3-root /* Core Layout Utilities */
#cbti-w4-d3-root .bsm-block:not(.bsm-chip-grid):not(.bsm-grounding-card):not(.bsm-hidden):not(.bsm-relax-content):not(.bsm-relax-grid):not(.bsm-relax-title):not(.bsm-timer-circle):not(.bsm-timer-wrap):not(.bsm-why-works-title) { display: block !important; }




#cbti-w4-d3-root /* Navigation */
#cbti-w4-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d3-root /* Cards & Headers */
#cbti-w4-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d3-root /* Typography */
#cbti-w4-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w4-d3-root /* Educational Callouts */
#cbti-w4-d3-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}



#cbti-w4-d3-root /* Interactive Video */
#cbti-w4-d3-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w4-d3-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w4-d3-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w4-d3-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w4-d3-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w4-d3-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d3-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d3-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d3-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d3-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d3-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d3-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d3-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d3-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d3-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d3-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d3-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d3-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d3-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d3-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d3-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d3-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d3-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w4-d3-root /* Sections */
#cbti-w4-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w4-d3-root /* Buttons */
#cbti-w4-d3-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d3-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d3-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w4-d3-root /* Active vs Passive Relaxation Cards */
#cbti-w4-d3-root .bsm-relax-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 24px 0 !important; }



#cbti-w4-d3-root .bsm-relax-card.open .bsm-relax-content { display: block !important; }








#cbti-w4-d3-root .bsm-timer-circle.state-tense { transform: scale(0.95) !important; }

#cbti-w4-d3-root .bsm-timer-circle.state-relax { transform: scale(1.05) !important; }





#cbti-w4-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d3-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d3-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d3-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d3-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d3-root .u-width-0pc { width: 0%; }

#cbti-w4-d3-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d3-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d3-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d3-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d3-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d3-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w4-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-700 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#cbti-w4-d3-root .u-font-size-14px-padding-10px-0-border-top { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; padding: 10px 0 !important; }

#cbti-w4-d3-root .u-margin-top-8px-2 { margin-top: 8px !important; }

#cbti-w4-d3-root .u-font-size-13px-margin-0 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin:0 !important; }

#cbti-w4-d3-root .u-margin-0-font-size-12px-text-transform-u { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize; letter-spacing: 1px; }

#cbti-w4-d3-root .u-margin-0-0-16px-0 { margin: 0 0 16px 0 !important; }

#cbti-w4-d3-root .u-margin-bottom-20px-3 { margin-bottom: 20px !important; }

#cbti-w4-d3-root .u-font-size-40px-font-weight-800 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day4.css (scoped under #cbti-w4-d4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 4
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d4-root /* Core Layout Utilities */
#cbti-w4-d4-root .bsm-block:not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-sort-btns):not(.bsm-sort-feedback):not(.bsm-sort-grid):not(.bsm-sort-item):not(.bsm-why-works-title) { display: block !important; }




#cbti-w4-d4-root /* Navigation */
#cbti-w4-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d4-root /* Cards & Headers */
#cbti-w4-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d4-root /* Typography */
#cbti-w4-d4-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }



#cbti-w4-d4-root /* Educational Callouts */
#cbti-w4-d4-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w4-d4-root /* Interactive Video */
#cbti-w4-d4-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w4-d4-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w4-d4-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w4-d4-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w4-d4-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w4-d4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d4-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d4-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d4-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w4-d4-root /* Sections */
#cbti-w4-d4-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w4-d4-root /* Buttons */
#cbti-w4-d4-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d4-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d4-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }





#cbti-w4-d4-root .bsm-chip-suggested:hover { opacity: var(--bsm3-opacity-high) !important; }



#cbti-w4-d4-root /* Sorting Game */
#cbti-w4-d4-root .bsm-sort-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 24px !important; }






#cbti-w4-d4-root .bsm-sort-feedback.correct { display: block !important; }

#cbti-w4-d4-root .bsm-sort-feedback.incorrect { display: block !important; }







#cbti-w4-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d4-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d4-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d4-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d4-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d4-root .u-width-0pc { width: 0%; }

#cbti-w4-d4-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d4-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d4-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d4-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d4-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d4-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w4-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day5.css (scoped under #cbti-w4-d5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 5
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d5-root /* Core Layout Utilities */
#cbti-w4-d5-root .bsm-block:not(.bsm-act-step):not(.bsm-act-wrap):not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-quiz-feedback):not(.bsm-quiz-wrap):not(.bsm-why-works-title) { display: block !important; }




#cbti-w4-d5-root /* Navigation */
#cbti-w4-d5-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d5-root /* Cards & Headers */
#cbti-w4-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d5-root /* Typography */
#cbti-w4-d5-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w4-d5-root /* Educational Callouts */
#cbti-w4-d5-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w4-d5-root /* Interactive Video */
#cbti-w4-d5-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w4-d5-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w4-d5-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w4-d5-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w4-d5-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w4-d5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d5-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d5-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d5-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w4-d5-root /* Sections */
#cbti-w4-d5-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w4-d5-root /* Buttons */
#cbti-w4-d5-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d5-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d5-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#cbti-w4-d5-root .bsm-btn-quiz.correct { pointer-events: none !important; }

#cbti-w4-d5-root .bsm-btn-quiz.incorrect { opacity: var(--bsm3-opacity-medium) !important; }







#cbti-w4-d5-root .bsm-quiz-feedback.correct { display: block !important; }

#cbti-w4-d5-root .bsm-quiz-feedback.incorrect { display: block !important; }



#cbti-w4-d5-root .bsm-act-step.active { opacity: 1 !important; pointer-events: auto !important; }

#cbti-w4-d5-root .bsm-act-step.completed { opacity: var(--bsm3-opacity-high) !important; pointer-events: none !important; }



#cbti-w4-d5-root .bsm-chip.visited { opacity: var(--bsm3-opacity-medium) !important; }

#cbti-w4-d5-root .bsm-chip.visited::after { content: " ✓"; }





#cbti-w4-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d5-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d5-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d5-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d5-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d5-root .u-width-0pc { width: 0%; }

#cbti-w4-d5-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d5-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d5-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d5-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d5-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w4-d5-root .u-margin-top-8px-2 { margin-top: 8px !important; }

#cbti-w4-d5-root .u-margin-bottom-24px { margin-bottom: 24px !important; }

#cbti-w4-d5-root .u-font-size-16px-2 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d5-root .u-font-size-14px-margin-bottom-0 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom:0 !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day6.css (scoped under #cbti-w4-d6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 6
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d6-root /* Core Layout Utilities */
#cbti-w4-d6-root .bsm-block:not(.bsm-breathing-circle):not(.bsm-breathing-wrap):not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-sensory-content):not(.bsm-sensory-grid):not(.bsm-sensory-title):not(.bsm-why-works-title) { display: block !important; }




#cbti-w4-d6-root /* Navigation */
#cbti-w4-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d6-root /* Cards & Headers */
#cbti-w4-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d6-root /* Typography */
#cbti-w4-d6-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w4-d6-root /* Educational Callouts */
#cbti-w4-d6-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w4-d6-root /* Interactive Video */
#cbti-w4-d6-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w4-d6-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w4-d6-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w4-d6-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w4-d6-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w4-d6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w4-d6-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w4-d6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w4-d6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w4-d6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w4-d6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w4-d6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w4-d6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w4-d6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w4-d6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w4-d6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w4-d6-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w4-d6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w4-d6-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w4-d6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w4-d6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w4-d6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w4-d6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w4-d6-root /* Sections */
#cbti-w4-d6-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w4-d6-root /* Buttons */
#cbti-w4-d6-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d6-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d6-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w4-d6-root /* Sensory Reading Cards */
#cbti-w4-d6-root .bsm-sensory-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 16px !important; }



#cbti-w4-d6-root .bsm-sensory-card.open .bsm-sensory-content { display: block !important; }

#cbti-w4-d6-root .bsm-sensory-card.open { cursor: default !important; }







#cbti-w4-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d6-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d6-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w4-d6-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d6-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d6-root .u-width-0pc { width: 0%; }

#cbti-w4-d6-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d6-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d6-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d6-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w4-d6-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w4-d6-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w4-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w4-d6-root .u-font-size-13px-margin-0 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin:0 !important; }

#cbti-w4-d6-root .u-font-size-20px-margin-right-12px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-right:12px; }


/* ===== migrated from sleep_platform/pages/cbti_module_week4_day7.css (scoped under #cbti-w4-d7-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 DAY 7
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-d7-root /* Core Layout Utilities */
#cbti-w4-d7-root .bsm-block:not(.bsm-hidden) { display: block !important; }




#cbti-w4-d7-root /* Navigation */
#cbti-w4-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-d7-root /* Cards & Headers */
#cbti-w4-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w4-d7-root /* Typography */
#cbti-w4-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w4-d7-root /* Buttons */
#cbti-w4-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w4-d7-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w4-d7-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w4-d7-root .bsm-quiz-option.correct { pointer-events: none !important;
}

#cbti-w4-d7-root .bsm-quiz-option.correct .bsm-quiz-icon::after {
    content: "✓" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w4-d7-root .bsm-quiz-option.incorrect { pointer-events: none !important; opacity: var(--bsm3-opacity-high) !important;
}

#cbti-w4-d7-root .bsm-quiz-option.incorrect .bsm-quiz-icon::after {
    content: "✕" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w4-d7-root .bsm-quiz-option.locked { pointer-events: none !important; opacity: var(--bsm3-opacity-medium) !important; }







#cbti-w4-d7-root .bsm-quiz-explanation.show { display: block !important; animation: sp-cbti-w4-d7-root-fadeIn 0.3s ease !important; }@keyframes sp-cbti-w4-d7-root-fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#cbti-w4-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-d7-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w4-d7-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d7-root .u-width-0pc { width: 0%; }

#cbti-w4-d7-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w4-d7-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w4-d7-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-32px-2 { margin-bottom: 32px !important; }

#cbti-w4-d7-root .u-margin-bottom-24px { margin-bottom: 24px !important; }

#cbti-w4-d7-root .u-margin-top-32px-padding-bottom-32px { margin-top: 32px !important; padding-bottom: 32px !important; }

#cbti-w4-d7-root .u-margin-bottom-16px-font-size-18px-font-w { margin-bottom: 16px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day1.css (scoped under #cbti-w5-d1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d1-root /* Core Layout Utilities */
#cbti-w5-d1-root .bsm-block:not(.bsm-chip-grid):not(.bsm-hidden):not(.bsm-reveal-box):not(.bsm-timer-circle):not(.bsm-timer-wrap):not(.bsm-why-works-title) { display: block !important; }




#cbti-w5-d1-root /* Navigation */
#cbti-w5-d1-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d1-root /* Cards & Headers */
#cbti-w5-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d1-root /* Typography */
#cbti-w5-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; line-height: 1.3 !important; }

#cbti-w5-d1-root /* Educational Callouts */
#cbti-w5-d1-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w5-d1-root /* Interactive Video */
#cbti-w5-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w5-d1-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w5-d1-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w5-d1-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w5-d1-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w5-d1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w5-d1-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w5-d1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w5-d1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w5-d1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w5-d1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w5-d1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w5-d1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w5-d1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w5-d1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w5-d1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w5-d1-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w5-d1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w5-d1-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w5-d1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w5-d1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w5-d1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w5-d1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w5-d1-root /* Sections */
#cbti-w5-d1-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d1-root /* Buttons */
#cbti-w5-d1-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w5-d1-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d1-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }










#cbti-w5-d1-root .bsm-reveal-box.show { display: block !important; }



#cbti-w5-d1-root /* Tools Reminder */
#cbti-w5-d1-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d1-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d1-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d1-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d1-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d1-root .u-width-0pc { width: 0%; }

#cbti-w5-d1-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d1-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d1-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d1-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d1-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w5-d1-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w5-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w5-d1-root .u-margin-0-font-size-12px-text-transform-u { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize; letter-spacing: 1px; }

#cbti-w5-d1-root .u-font-weight-600-margin-bottom-8px { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom:8px !important; }

#cbti-w5-d1-root .u-font-size-14px-color-var-diary-text-mute-2 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day2.css (scoped under #cbti-w5-d2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 2
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d2-root /* Core Layout Utilities */
#cbti-w5-d2-root .bsm-block:not(.bsm-audit-content):not(.bsm-audit-grid):not(.bsm-audit-title):not(.bsm-hidden):not(.bsm-why-works-title):not(.w5d2-slide) { display: block !important; }




#cbti-w5-d2-root /* Navigation */
#cbti-w5-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d2-root /* Cards & Headers */
#cbti-w5-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d2-root /* Typography */
#cbti-w5-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d2-root /* Educational Callouts */
#cbti-w5-d2-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w5-d2-root /* Interactive Video */
#cbti-w5-d2-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w5-d2-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w5-d2-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w5-d2-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w5-d2-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w5-d2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w5-d2-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w5-d2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w5-d2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w5-d2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w5-d2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w5-d2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w5-d2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w5-d2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w5-d2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w5-d2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w5-d2-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w5-d2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w5-d2-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w5-d2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w5-d2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w5-d2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w5-d2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w5-d2-root /* Sections */
#cbti-w5-d2-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d2-root /* Buttons */
#cbti-w5-d2-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}

#cbti-w5-d2-root .bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }


#cbti-w5-d2-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d2-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }





#cbti-w5-d2-root .w5d2-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#cbti-w5-d2-root .w5d2-slide.active { display: block !important; }

#cbti-w5-d2-root .w5d2-reveal-btn:hover { transform: translateY(-2px) !important; }

#cbti-w5-d2-root .w5d2-reveal-btn svg { width: 18px !important; height: 18px !important; }

#cbti-w5-d2-root /* Audit Cards (click to reveal tip) */
#cbti-w5-d2-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 16px !important; }



#cbti-w5-d2-root .bsm-audit-card.open .bsm-audit-content { display: block !important; }





#cbti-w5-d2-root /* Tools Reminder */
#cbti-w5-d2-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d2-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d2-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d2-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d2-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d2-root .u-width-0pc { width: 0%; }

#cbti-w5-d2-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d2-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d2-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d2-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d2-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w5-d2-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w5-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-4px-2 { margin-top: 4px !important; }

#cbti-w5-d2-root .u-opacity-0-3-pointer-events-none { opacity:var(--bsm3-opacity-low); pointer-events:none; }

#cbti-w5-d2-root .u-cursor-pointer-width-fit-content { cursor:pointer; width:fit-content; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day3.css (scoped under #cbti-w5-d3-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 3
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d3-root /* Core Layout Utilities */
#cbti-w5-d3-root .bsm-block:not(.bsm-hidden):not(.bsm-rule-grid) { display: block !important; }




#cbti-w5-d3-root /* Navigation */
#cbti-w5-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d3-root /* Cards & Headers */
#cbti-w5-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d3-root /* Typography */
#cbti-w5-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d3-root /* Sections */
#cbti-w5-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d3-root /* Buttons */
#cbti-w5-d3-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w5-d3-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d3-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#cbti-w5-d3-root /* Sleep Window Check-In */
#cbti-w5-d3-root .bsm-why-works {
    padding: 14px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important;
}





#cbti-w5-d3-root /* Tools Reminder */
#cbti-w5-d3-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d3-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d3-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d3-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d3-root .u-width-0pc { width: 0%; }

#cbti-w5-d3-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d3-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d3-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d3-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d3-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w5-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

#cbti-w5-d3-root .u-font-weight-700 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#cbti-w5-d3-root .u-font-size-14px-padding-10px-0-border-top { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; padding: 10px 0 !important; }

#cbti-w5-d3-root .u-margin-0-font-size-12px-text-transform-u { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize; letter-spacing: 1px; }

#cbti-w5-d3-root .u-margin-0-0-16px-0 { margin: 0 0 16px 0 !important; }

#cbti-w5-d3-root .u-margin-bottom-20px-3 { margin-bottom: 20px !important; }

#cbti-w5-d3-root .u-font-size-40px-font-weight-800 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#cbti-w5-d3-root .u-font-size-14px-color-var-diary-text-mute-2 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day4.css (scoped under #cbti-w5-d4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 4
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d4-root /* Core Layout Utilities */
#cbti-w5-d4-root .bsm-block:not(.bsm-hidden):not(.bsm-why-works-title):not(.w5d4-slide) { display: block !important; }




#cbti-w5-d4-root /* Navigation */
#cbti-w5-d4-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d4-root /* Cards & Headers */
#cbti-w5-d4-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d4-root /* Typography */
#cbti-w5-d4-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d4-root /* Educational Callouts */
#cbti-w5-d4-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w5-d4-root /* Interactive Video */
#cbti-w5-d4-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w5-d4-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w5-d4-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w5-d4-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w5-d4-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w5-d4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w5-d4-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w5-d4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w5-d4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w5-d4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w5-d4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w5-d4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w5-d4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w5-d4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w5-d4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w5-d4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w5-d4-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w5-d4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w5-d4-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w5-d4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w5-d4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w5-d4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w5-d4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w5-d4-root /* Sections */
#cbti-w5-d4-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d4-root /* Buttons */
#cbti-w5-d4-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}

#cbti-w5-d4-root .bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }


#cbti-w5-d4-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d4-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w5-d4-root .bsm-myth-explain.show { display: block !important; }







#cbti-w5-d4-root .w5d4-dot.active { width: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; }



#cbti-w5-d4-root .w5d4-slide.active { display: block !important; }

#cbti-w5-d4-root .w5d4-reveal-btn:hover { transform: translateY(-2px) !important; }

#cbti-w5-d4-root .w5d4-reveal-btn svg { width: 18px !important; height: 18px !important; }

#cbti-w5-d4-root /* Tools Reminder */
#cbti-w5-d4-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d4-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d4-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d4-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d4-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d4-root .u-width-0pc { width: 0%; }

#cbti-w5-d4-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d4-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d4-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d4-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d4-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w5-d4-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w5-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

#cbti-w5-d4-root .u-margin-top-16px-2 { margin-top: 16px !important; }

#cbti-w5-d4-root .u-opacity-0-3-pointer-events-none { opacity:var(--bsm3-opacity-low); pointer-events:none; }

#cbti-w5-d4-root .u-cursor-pointer-width-fit-content { cursor:pointer; width:fit-content; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day5.css (scoped under #cbti-w5-d5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 5
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d5-root /* Core Layout Utilities */
#cbti-w5-d5-root .bsm-block:not(.bsm-compare-grid):not(.bsm-hidden):not(.bsm-reset-row):not(.bsm-why-works-title) { display: block !important; }




#cbti-w5-d5-root /* Navigation */
#cbti-w5-d5-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d5-root /* Cards & Headers */
#cbti-w5-d5-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d5-root /* Typography */
#cbti-w5-d5-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d5-root /* Educational Callouts */
#cbti-w5-d5-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w5-d5-root /* Interactive Video */
#cbti-w5-d5-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w5-d5-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w5-d5-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w5-d5-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w5-d5-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w5-d5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w5-d5-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w5-d5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w5-d5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w5-d5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w5-d5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w5-d5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w5-d5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w5-d5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w5-d5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w5-d5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w5-d5-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w5-d5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w5-d5-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w5-d5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w5-d5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w5-d5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w5-d5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w5-d5-root /* Sections */
#cbti-w5-d5-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d5-root /* Buttons */
#cbti-w5-d5-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}


#cbti-w5-d5-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d5-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w5-d5-root /* Blip vs Trend compare */
#cbti-w5-d5-root .bsm-compare-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 !important; }

#cbti-w5-d5-root .bsm-btn-scenario.picked-other { opacity: var(--bsm3-opacity-medium) !important; }




#cbti-w5-d5-root .bsm-scenario-feedback.show { display: block !important; }





#cbti-w5-d5-root /* Tools Reminder */
#cbti-w5-d5-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d5-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d5-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d5-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d5-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d5-root .u-width-0pc { width: 0%; }

#cbti-w5-d5-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d5-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d5-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d5-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d5-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w5-d5-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w5-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day6.css (scoped under #cbti-w5-d6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 6
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d6-root /* Core Layout Utilities */
#cbti-w5-d6-root .bsm-block:not(.bsm-closure-box):not(.bsm-hidden):not(.bsm-sc-row):not(.bsm-scenario-reveal):not(.bsm-why-works-title) { display: block !important; }




#cbti-w5-d6-root /* Navigation */
#cbti-w5-d6-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d6-root /* Cards & Headers */
#cbti-w5-d6-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d6-root /* Typography */
#cbti-w5-d6-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d6-root /* Educational Callouts */
#cbti-w5-d6-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w5-d6-root /* Interactive Video */
#cbti-w5-d6-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w5-d6-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w5-d6-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w5-d6-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w5-d6-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w5-d6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w5-d6-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w5-d6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w5-d6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w5-d6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w5-d6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w5-d6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w5-d6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w5-d6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w5-d6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w5-d6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w5-d6-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w5-d6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w5-d6-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w5-d6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w5-d6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w5-d6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w5-d6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w5-d6-root /* Sections */
#cbti-w5-d6-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w5-d6-root /* Buttons */
#cbti-w5-d6-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}


#cbti-w5-d6-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d6-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w5-d6-root .bsm-closure-box.show { display: block !important; }






#cbti-w5-d6-root .bsm-scenario-reveal.show { display: block !important; }





#cbti-w5-d6-root /* Tools Reminder */
#cbti-w5-d6-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w5-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d6-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d6-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w5-d6-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d6-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d6-root .u-width-0pc { width: 0%; }

#cbti-w5-d6-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d6-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d6-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d6-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w5-d6-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w5-d6-root .u-margin-bottom-16px { margin-bottom: 16px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week5_day7.css (scoped under #cbti-w5-d7-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 DAY 7
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-d7-root /* Core Layout Utilities */
#cbti-w5-d7-root .bsm-block:not(.bsm-hidden) { display: block !important; }




#cbti-w5-d7-root /* Navigation */
#cbti-w5-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-d7-root /* Cards & Headers */
#cbti-w5-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w5-d7-root /* Typography */
#cbti-w5-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w5-d7-root /* Buttons */
#cbti-w5-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w5-d7-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w5-d7-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w5-d7-root .bsm-quiz-option.correct { pointer-events: none !important;
}

#cbti-w5-d7-root .bsm-quiz-option.correct .bsm-quiz-icon::after {
    content: "✓" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w5-d7-root .bsm-quiz-option.incorrect { pointer-events: none !important; opacity: var(--bsm3-opacity-high) !important;
}

#cbti-w5-d7-root .bsm-quiz-option.incorrect .bsm-quiz-icon::after {
    content: "✕" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w5-d7-root .bsm-quiz-option.locked { pointer-events: none !important; opacity: var(--bsm3-opacity-medium) !important; }







#cbti-w5-d7-root .bsm-quiz-explanation.show { display: block !important; animation: sp-cbti-w5-d7-root-fadeIn 0.3s ease !important; }@keyframes sp-cbti-w5-d7-root-fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#cbti-w5-d7-root /* Tools Reminder */
#cbti-w5-d7-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; text-align: center !important;
}



#cbti-w5-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-d7-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w5-d7-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d7-root .u-width-0pc { width: 0%; }

#cbti-w5-d7-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w5-d7-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w5-d7-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-32px-2 { margin-bottom: 32px !important; }

#cbti-w5-d7-root .u-margin-bottom-24px { margin-bottom: 24px !important; }

#cbti-w5-d7-root .u-margin-top-32px-padding-bottom-32px { margin-top: 32px !important; padding-bottom: 32px !important; }

#cbti-w5-d7-root .u-margin-bottom-16px-font-size-18px-font-w { margin-bottom: 16px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day1.css (scoped under #cbti-w6-d1-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 1
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w6-d1-root /* Core Layout Utilities */
#cbti-w6-d1-root .bsm-block:not(.bsm-chip-grid):not(.bsm-flip-back):not(.bsm-flip-front):not(.bsm-hidden):not(.bsm-recap-grid) { display: block !important; }




#cbti-w6-d1-root /* Navigation */
#cbti-w6-d1-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d1-root /* Cards & Headers */
#cbti-w6-d1-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w6-d1-root /* Typography */
#cbti-w6-d1-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d1-root /* Interactive Video */
#cbti-w6-d1-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w6-d1-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d1-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d1-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d1-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d1-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d1-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d1-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d1-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d1-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d1-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d1-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d1-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d1-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d1-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d1-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d1-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d1-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d1-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d1-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d1-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d1-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d1-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w6-d1-root /* Sections */
#cbti-w6-d1-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w6-d1-root /* Buttons */
#cbti-w6-d1-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w6-d1-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d1-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w6-d1-root /* Recap Cards (flip) */
#cbti-w6-d1-root .bsm-recap-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }



#cbti-w6-d1-root .bsm-flip-container.is-flipped .bsm-flip-inner { transform: rotateY(180deg) !important; }





#cbti-w6-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d1-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d1-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d1-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d1-root .u-width-0pc { width: 0%; }

#cbti-w6-d1-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d1-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d1-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d1-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d1-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d1-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d1-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600-2 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day2.css (scoped under #cbti-w6-d2-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 2
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w6-d2-root /* Core Layout Utilities */
#cbti-w6-d2-root .bsm-block:not(.bsm-audit-content):not(.bsm-audit-grid):not(.bsm-audit-title):not(.bsm-hidden) { display: block !important; }




#cbti-w6-d2-root /* Navigation */
#cbti-w6-d2-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d2-root /* Cards & Headers */
#cbti-w6-d2-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w6-d2-root /* Typography */
#cbti-w6-d2-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d2-root /* Educational Callouts */
#cbti-w6-d2-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}





#cbti-w6-d2-root /* Interactive Video */
#cbti-w6-d2-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w6-d2-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d2-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d2-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d2-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d2-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d2-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d2-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d2-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d2-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d2-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d2-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d2-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d2-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d2-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d2-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d2-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d2-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d2-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d2-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d2-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d2-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d2-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w6-d2-root /* Sections */
#cbti-w6-d2-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w6-d2-root /* Buttons */
#cbti-w6-d2-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}

#cbti-w6-d2-root .bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }


#cbti-w6-d2-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d2-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#cbti-w6-d2-root /* Audit cards (click to reveal) */
#cbti-w6-d2-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 16px !important; }



#cbti-w6-d2-root .bsm-audit-card.open .bsm-audit-content { display: block !important; }





#cbti-w6-d2-root /* Tools Reminder */
#cbti-w6-d2-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w6-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d2-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d2-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d2-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d2-root .u-width-0pc { width: 0%; }

#cbti-w6-d2-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d2-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d2-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d2-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d2-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d2-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d2-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-0-margin-bottom-16px { margin-top:0 !important; margin-bottom: 16px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day3.css (scoped under #cbti-w6-d3-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 3
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w6-d3-root /* Core Layout Utilities */
#cbti-w6-d3-root .bsm-block:not(.bsm-audit-grid):not(.bsm-compare-grid):not(.bsm-hidden):not(.bsm-p-row):not(.bsm-rule-grid):not(.bsm-why-works-title) { display: block !important; }




#cbti-w6-d3-root /* Navigation */
#cbti-w6-d3-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d3-root /* Cards & Headers */
#cbti-w6-d3-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w6-d3-root /* Typography */
#cbti-w6-d3-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d3-root /* Educational Callouts */
#cbti-w6-d3-root .bsm-why-works {
    padding: 16px !important; border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0!important; margin: 16px 0 24px 0 !important;
}

#cbti-w6-d3-root /* Interactive Video */
#cbti-w6-d3-root .bsm-video-box {
    width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important;
    cursor: pointer !important; position: relative !important; transition: all 0.3s ease !important;
}

#cbti-w6-d3-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d3-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d3-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d3-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d3-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d3-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d3-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d3-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d3-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d3-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d3-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d3-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d3-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d3-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d3-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d3-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d3-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d3-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d3-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d3-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d3-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d3-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w6-d3-root /* Sections */
#cbti-w6-d3-root .bsm-section { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 32px !important; }




#cbti-w6-d3-root /* Buttons */
#cbti-w6-d3-root .bsm-btn-secondary {
    border-radius: var(--bsm3-radius-status-cards)!important; padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important;
}


#cbti-w6-d3-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d3-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w6-d3-root /* Lapse vs Relapse compare */
#cbti-w6-d3-root .bsm-compare-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 !important; }

@media(max-width: 900px) {
#cbti-w6-d3-root .bsm-compare-grid { grid-template-columns: 1fr !important; }
}




#cbti-w6-d3-root /* Audit cards */
#cbti-w6-d3-root .bsm-audit-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 16px !important; }

#cbti-w6-d3-root .bsm-audit-card.checked .bsm-audit-check::after { content: "✓"; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }



#cbti-w6-d3-root /* Tools Reminder */
#cbti-w6-d3-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important;
}



#cbti-w6-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d3-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d3-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d3-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d3-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d3-root .u-width-0pc { width: 0%; }

#cbti-w6-d3-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d3-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d3-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d3-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d3-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d3-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d3-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

#cbti-w6-d3-root .u-font-weight-700 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#cbti-w6-d3-root .u-font-size-14px-padding-10px-0-border-top { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; padding: 10px 0 !important; }

#cbti-w6-d3-root .u-margin-0-font-size-12px-text-transform-u { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize; letter-spacing: 1px; }

#cbti-w6-d3-root .u-margin-0-0-16px-0 { margin: 0 0 16px 0 !important; }

#cbti-w6-d3-root .u-margin-bottom-20px-3 { margin-bottom: 20px !important; }

#cbti-w6-d3-root .u-font-size-40px-font-weight-800 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#cbti-w6-d3-root .u-font-size-14px-color-var-diary-text-mute-2 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day4.css (scoped under #cbti-w6-d4-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 4
========================================================================= */

#cbti-w6-d4-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d4-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d4-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d4-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d4-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d4-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d4-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d4-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d4-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d4-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d4-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d4-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d4-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d4-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d4-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d4-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d4-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d4-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d4-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d4-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d4-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d4-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w6-d4-root .bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }


#cbti-w6-d4-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d4-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w6-d4-root /* Scenario matcher */
#cbti-w6-d4-root .bsm-scenario-box { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 16px !important; margin-bottom: 16px !important;
}



#cbti-w6-d4-root .bsm-scenario-opt.best { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

#cbti-w6-d4-root .bsm-scenario-opt.disabled { cursor: default !important; pointer-events: none !important; }


#cbti-w6-d4-root /* Tool catalog */
#cbti-w6-d4-root .bsm-catalog-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 16px !important; }








#cbti-w6-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d4-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d4-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d4-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d4-root .u-width-0pc { width: 0%; }

#cbti-w6-d4-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d4-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d4-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d4-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d4-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d4-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d4-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

#cbti-w6-d4-root .u-margin-top-8px-2 { margin-top: 8px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day5.css (scoped under #cbti-w6-d5-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 5
========================================================================= */

#cbti-w6-d5-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d5-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d5-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d5-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d5-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d5-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d5-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d5-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d5-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d5-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d5-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d5-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d5-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d5-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d5-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d5-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d5-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d5-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d5-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d5-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d5-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d5-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}

#cbti-w6-d5-root .bsm-btn-secondary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }


#cbti-w6-d5-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d5-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }

#cbti-w6-d5-root .bsm-pillar-card.acked .bsm-pillar-check::after { content: "✓"; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#cbti-w6-d5-root .bsm-commit-chip.selected .bsm-commit-check::after { content: "✓"; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#cbti-w6-d5-root .bsm-commit-custom::placeholder { opacity: var(--bsm3-opacity-high); }






#cbti-w6-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d5-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d5-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d5-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d5-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d5-root .u-width-0pc { width: 0%; }

#cbti-w6-d5-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d5-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d5-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d5-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d5-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d5-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d5-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }

#cbti-w6-d5-root .u-margin-top-16px-2 { margin-top: 16px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day6.css (scoped under #cbti-w6-d6-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 6
========================================================================= */

#cbti-w6-d6-root .bsm-video-btn svg { width: 24px !important; height: 24px !important; margin-left: 4px !important; }

#cbti-w6-d6-root .bsm-video-box.watched { cursor: default !important; }

#cbti-w6-d6-root .bsm-video-box.watched .bsm-video-btn svg { display: none !important; }

#cbti-w6-d6-root .bsm-video-box.watched .bsm-video-btn::after { content: "✓" !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-left: 0 !important; }









#cbti-w6-d6-root /* =========================================================================
   CINEMATIC VIDEO OVERLAY STYLES (same approach as Module 0)
========================================================================= */
#bsm-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999999; display: none; overflow: hidden;
}

#cbti-w6-d6-root #bsm-cinematic-overlay.show { display: block; }

#cbti-w6-d6-root #bsm-cinematic-overlay .moon {
    position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
    border-radius: 50%; overflow: hidden;
}

#cbti-w6-d6-root #bsm-cinematic-overlay .moon::after {
    content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
    border-radius: 50%;
}

#cbti-w6-d6-root #bsm-cinematic-overlay .star {
    position: absolute; border-radius: 50%; width: 4px; height: 4px;
    opacity: var(--bsm3-opacity-high); animation: sp-cbti-w6-d6-root-bsm-twinkle 2s infinite alternate; transition: opacity 1s ease;
}

#cbti-w6-d6-root #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-cbti-w6-d6-root-bsm-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#cbti-w6-d6-root #bsm-cinematic-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; visibility: hidden; opacity: 0;
    transition: opacity 1s ease;
}

#cbti-w6-d6-root #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#cbti-w6-d6-root #bsm-video-overlay-title {
    position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}

#cbti-w6-d6-root #bsm-video-overlay-title.show { opacity: 1; }

#cbti-w6-d6-root #bsm-video-close {
    position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
}

#cbti-w6-d6-root #bsm-video-close svg { width: 70%; height: 70%; }

#cbti-w6-d6-root #bsm-video-controls {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; gap: 20px;
}

#cbti-w6-d6-root #bsm-video-controls button {
    font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
    font-family: inherit;
}

#cbti-w6-d6-root #bsm-progress-container {
    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 6px;
    border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
}

#cbti-w6-d6-root #bsm-progress-bar {
    height: 100%; width: 0%; transition: width 0.2s linear;
}


#cbti-w6-d6-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d6-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w6-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d6-root .u-margin-bottom-0-font-size-13px { margin-bottom:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d6-root .u-margin-bottom-0-font-size-14px { margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

#cbti-w6-d6-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d6-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d6-root .u-width-0pc { width: 0%; }

#cbti-w6-d6-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d6-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d6-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d6-root .u-margin-top-32px { margin-top: 32px !important; }

#cbti-w6-d6-root .u-font-size-16px { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }

#cbti-w6-d6-root .u-margin-bottom-16px { margin-bottom: 16px !important; }

#cbti-w6-d6-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-top-20px { margin-top: 20px !important; }


/* ===== migrated from sleep_platform/pages/cbti_module_week6_day7.css (scoped under #cbti-w6-d7-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 DAY 7
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w6-d7-root /* Core Layout Utilities */
#cbti-w6-d7-root .bsm-block:not(.bsm-community-grid):not(.bsm-hidden) { display: block !important; }




#cbti-w6-d7-root /* Navigation */
#cbti-w6-d7-root .bsm-nav-back {
    cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important;
    transition: all 0.2s ease !important; display: inline-flex !important; padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-d7-root /* Cards & Headers */
#cbti-w6-d7-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}





#cbti-w6-d7-root /* Typography */
#cbti-w6-d7-root .bsm-title-h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 16px !important; }

#cbti-w6-d7-root /* Buttons */
#cbti-w6-d7-root .bsm-btn-primary { border-radius: var(--bsm3-radius-status-cards)!important;
    padding: 12px 24px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; transition: opacity 0.2s !important;
}

#cbti-w6-d7-root .bsm-btn-primary:hover { opacity: var(--bsm3-opacity-high) !important; }

#cbti-w6-d7-root .bsm-btn-primary:disabled { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; pointer-events: none !important; }



#cbti-w6-d7-root .bsm-quiz-option.correct { pointer-events: none !important;
}

#cbti-w6-d7-root .bsm-quiz-option.correct .bsm-quiz-icon::after {
    content: "✓" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w6-d7-root .bsm-quiz-option.incorrect { pointer-events: none !important; opacity: var(--bsm3-opacity-high) !important;
}

#cbti-w6-d7-root .bsm-quiz-option.incorrect .bsm-quiz-icon::after {
    content: "✕" !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#cbti-w6-d7-root .bsm-quiz-option.locked { pointer-events: none !important; opacity: var(--bsm3-opacity-medium) !important; }







#cbti-w6-d7-root .bsm-quiz-explanation.show { display: block !important; animation: sp-cbti-w6-d7-root-fadeIn 0.3s ease !important; }@keyframes sp-cbti-w6-d7-root-fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#cbti-w6-d7-root /* Tools Reminder */
#cbti-w6-d7-root .bsm-tools-reminder {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 20px !important; margin-top: 24px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; text-align: center !important;
}





#cbti-w6-d7-root /* Community grid */
#cbti-w6-d7-root .bsm-community-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;
    margin-top: 16px !important; text-align: left !important;
}


#cbti-w6-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-d7-root .u-margin-bottom-0 { margin-bottom:0 !important; }

#cbti-w6-d7-root .u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d7-root .u-width-0pc { width: 0%; }

#cbti-w6-d7-root .u-margin-bottom-4px { margin-bottom:4px !important; }

#cbti-w6-d7-root .u-margin-bottom-12px-font-size-14px { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

#cbti-w6-d7-root .u-font-weight-600-color-var-diary-text-mut { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-d7-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-32px-2 { margin-bottom: 32px !important; }

#cbti-w6-d7-root .u-margin-bottom-24px { margin-bottom: 24px !important; }

#cbti-w6-d7-root .u-margin-top-32px-padding-bottom-32px { margin-top: 32px !important; padding-bottom: 32px !important; }

#cbti-w6-d7-root .u-margin-bottom-16px-font-size-18px-font-w { margin-bottom: 16px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }


/* ===== migrated from sleep_platform/pages/cbti_week1_hub.css (scoped under #cbti-w1-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 1 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w1-hub-root /* Core Layout Utilities */
#cbti-w1-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2) { display: block !important; }




#cbti-w1-hub-root /* Navigation */
#cbti-w1-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w1-hub-root /* Cards */
#cbti-w1-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w1-hub-root /* Day List Rows */
#cbti-w1-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w1-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w1-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w1-hub-root /* Header Elements */
#cbti-w1-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w1-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w1-hub-root /* Progress Bar */
#cbti-w1-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w1-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}


#cbti-w1-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w1-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w1-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w1-hub-root .u-display-none-2 { display: none !important; }

#cbti-w1-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/cbti_week2_hub.css (scoped under #cbti-w2-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 2 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w2-hub-root /* Core Layout Utilities */
#cbti-w2-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w2hub-tool-badge) { display: block !important; }




#cbti-w2-hub-root /* Navigation */
#cbti-w2-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w2-hub-root /* Cards */
#cbti-w2-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w2-hub-root /* Day List Rows */
#cbti-w2-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w2-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w2-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w2-hub-root /* Header Elements */
#cbti-w2-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w2-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w2-hub-root /* Progress Bar */
#cbti-w2-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w2-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}



#cbti-w2-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w2-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w2-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w2-hub-root .u-display-none-2 { display: none !important; }

#cbti-w2-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/cbti_week3_hub.css (scoped under #cbti-w3-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 3 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w3-hub-root /* Core Layout Utilities */
#cbti-w3-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w3hub-tool-badge) { display: block !important; }




#cbti-w3-hub-root /* Navigation */
#cbti-w3-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w3-hub-root /* Cards */
#cbti-w3-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w3-hub-root /* Day List Rows */
#cbti-w3-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w3-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w3-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w3-hub-root /* Header Elements */
#cbti-w3-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w3-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w3-hub-root /* Progress Bar */
#cbti-w3-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w3-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}



#cbti-w3-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w3-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w3-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w3-hub-root .u-display-none-2 { display: none !important; }

#cbti-w3-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/cbti_week4_hub.css (scoped under #cbti-w4-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 4 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w4-hub-root /* Core Layout Utilities */
#cbti-w4-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w4hub-tool-badge) { display: block !important; }




#cbti-w4-hub-root /* Navigation */
#cbti-w4-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w4-hub-root /* Cards */
#cbti-w4-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w4-hub-root /* Day List Rows */
#cbti-w4-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w4-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w4-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w4-hub-root /* Header Elements */
#cbti-w4-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w4-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w4-hub-root /* Progress Bar */
#cbti-w4-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w4-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}


#cbti-w4-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w4-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w4-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w4-hub-root .u-display-none-2 { display: none !important; }

#cbti-w4-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/cbti_week5_hub.css (scoped under #cbti-w5-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 5 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w5-hub-root /* Core Layout Utilities */
#cbti-w5-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2):not(.w5hub-tool-badge) { display: block !important; }




#cbti-w5-hub-root /* Navigation */
#cbti-w5-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w5-hub-root /* Cards */
#cbti-w5-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w5-hub-root /* Day List Rows */
#cbti-w5-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w5-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w5-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w5-hub-root /* Header Elements */
#cbti-w5-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w5-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w5-hub-root /* Progress Bar */
#cbti-w5-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w5-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}


#cbti-w5-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w5-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w5-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w5-hub-root .u-display-none-2 { display: none !important; }

#cbti-w5-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/cbti_week6_hub.css (scoped under #cbti-w6-hub-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - WEEK 6 HUB
========================================================================= */




/* Absolute Typographic Locks */

#cbti-w6-hub-root /* Core Layout Utilities */
#cbti-w6-hub-root .bsm-block:not(.bsm-day-row):not(.bsm-hidden):not(.u-display-none-2) { display: block !important; }




#cbti-w6-hub-root /* Navigation */
#cbti-w6-hub-root .bsm-nav-back {
    cursor: pointer !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    margin-bottom: 24px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
}

#cbti-w6-hub-root /* Cards */
#cbti-w6-hub-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#cbti-w6-hub-root /* Day List Rows */
#cbti-w6-hub-root .bsm-day-row {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#cbti-w6-hub-root .bsm-day-row:hover:not(.locked) {
    transform: translateY(-2px) !important;
}

#cbti-w6-hub-root .bsm-day-row.locked {
    opacity: var(--bsm3-opacity-medium) !important;
    pointer-events: none !important;
}

#cbti-w6-hub-root /* Header Elements */
#cbti-w6-hub-root .bsm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

#cbti-w6-hub-root .bsm-icon-circle svg { width: 20px !important; height: 20px !important; }



#cbti-w6-hub-root /* Progress Bar */
#cbti-w6-hub-root .bsm-progress-header {
    margin-bottom: 12px !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
}




#cbti-w6-hub-root .bsm-btn-start:hover {
    transform: translateY(-2px) !important;
}



#cbti-w6-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-padding-20px-24px { padding: 20px 24px !important; }

#cbti-w6-hub-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-weight-600 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#cbti-w6-hub-root .u-padding-40px-font-weight-bold-font-size { padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); }

#cbti-w6-hub-root .u-display-none-2 { display: none !important; }

#cbti-w6-hub-root .u-font-size-18px-font-weight-700 { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* ===== migrated from sleep_platform/pages/circadian.css (scoped under #circadian-dashboard-wrapper) ===== */
/* =========================================================================
   CIRCADIAN ALIGNMENT — CSS DESIGN SYSTEM
   Scoped: #bsm-app-root #spa-stage #circadian-dashboard-wrapper
========================================================================= */

/* --- CSS CUSTOM PROPERTIES --- */



/* --- TYPOGRAPHY LOCK --- */

/* Kill WP green underline on h1 — layered specificity to beat any theme rule */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-title::after,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-title::before,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h1::after,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper h1::before,
#circadian-dashboard-wrapper #bsm-cir-page-title::after,
#circadian-dashboard-wrapper #bsm-cir-page-title::before,
#circadian-dashboard-wrapper h1::after,
#circadian-dashboard-wrapper h1::before,
#circadian-dashboard-wrapper .bsm-edu-title::after,
#circadian-dashboard-wrapper .bsm-edu-title::before {
    display: none !important;
    content: "" !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- PAGE HEADER --- */

/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */



/* --- TAB NAVIGATION (platform pattern) --- */




#circadian-dashboard-wrapper /* --- STRATEGIES BANNER --- */
/* Secondary nav banner — deliberately NOT a full gradient hero block,
so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-strategies-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}



/* --- PANEL SHOW/HIDE (dual-specificity armor) --- */

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-active,
#circadian-dashboard-wrapper .bsm-edu-panel.bsm-edu-panel-active {
    display: block !important;
    animation: sp-circadian-dashboard-wrapper-bsmCirFadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}@keyframes sp-circadian-dashboard-wrapper-bsmCirFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- PANEL HEADER CARD --- */


/* --- FLIP CARDS (3-col) --- */








/* Colour variants */



#circadian-dashboard-wrapper /* Flip card typography — always white on gradient,
set directly */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-fi-eyebrow { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.2em; text-align:center; }







#circadian-dashboard-wrapper /* --- TAB "NEXT SECTION" NAV BUTTON — shared outline-pill style,
same as
   apnea.php/legs.php/insomnia.php so every page's Next button matches. --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}



/* --- 2-COL PATTERN CARDS --- */







/* --- STUDY PANEL: PROFILE SUMMARY CARD --- */





#circadian-dashboard-wrapper /* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
#circadian-dashboard-wrapper personalised header,
checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}




















#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-align: left !important;
    transition: color 0.2s, opacity 0.2s !important;
}



/* Section eyebrow — shared treatment with apnea.php/legs.php for any
   supplementary section that follows the main educational cards. */



#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}






#circadian-dashboard-wrapper /* Symptom severity dots — 0-4 answers,
not yes/no. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-flag-row { align-items: flex-start !important; }









#circadian-dashboard-wrapper /* --- LEGACY: QUIZ SCORE SUMMARY + QUESTION ROWS (no longer used by "Your Study",
kept in case other panels reference it) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-edu-score-block {
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}


















#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-update-link {
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.14em !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* --- TOOLS: GLASS CARDS --- */

/* --- TOOLS: STATS GRID (Dashboard) --- */









/* --- BADGES --- */




/* --- REMINDER BANNER --- */


/* --- TIMELINE (alignment tracker) --- */






/* --- SCIENCE ACCORDION --- */




#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-sci-acc.active .bsm-sci-body { display:block; animation:sp-circadian-dashboard-wrapper-bsmCirFadeUp 0.3s ease forwards; }

/* --- TRANSPARENCY GRID --- */




#circadian-dashboard-wrapper /* --- MACRO TRACK (horizontal scrollable day nodes) ---
   Was overflow-x:auto with the scrollbar hidden — technically scrollable
   by drag/swipe,
#circadian-dashboard-wrapper but with no visible affordance a mouse+trackpad user has
   no obvious way to reach nodes past the right edge. Now shows a thin
   scrollbar,
and a wheel listener (see the <script> block below) lets a
   normal vertical mouse-wheel scroll it sideways too. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-macro-track { display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; margin-top:8px; scrollbar-width:thin; }












/* --- ITINERARY PANES --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-itin-pane { display:none; animation:sp-circadian-dashboard-wrapper-bsmCirFadeUp 0.3s ease; }









/* --- FORM CONTROLS --- */






/* --- TOOLS: SECTION SHOW/HIDE (dual-specificity armor) --- */

#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-tool-section.bsm-tool-active,
#circadian-dashboard-wrapper .bsm-tool-section.bsm-tool-active {
    display: block !important;
    animation: sp-circadian-dashboard-wrapper-bsmCirFadeUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Active nav card state */


/* --- TOOLS: TOOL NAV CARDS (3 entry points inside tools panel) --- */








/* --- TOOLS: SECTION ANCHORS (visual divider above each tool) --- */




#circadian-dashboard-wrapper /* --- PRIMARY ACTION BUTTON (full-width,
prominent CTA inside each tool) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-btn-primary-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 18px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.18s, box-shadow 0.2s !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}




/* --- TOOL CARD INTRO (title + desc above the CTA) --- */



#circadian-dashboard-wrapper /* --- FORM REVEAL AREA (sits below CTA,
shown after click) --- */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-form-reveal {
    margin-top: 24px !important;
    padding-top: 24px !important;
}

/* --- TOOL SECONDARY BUTTON (edit / cancel in muted style) --- */


/* --- ACTIVE PLAN HEADER (when a plan is already set) --- */


#circadian-dashboard-wrapper /* --- EDIT PROFILE MODAL — Circadian --- */
#bsm-circadian-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }

#circadian-dashboard-wrapper .bsm-epm-tab-btn.bsm-tab-selected { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#circadian-dashboard-wrapper #bsm-circadian-epm-status.bsm-epm-ok { display: block !important; }

#circadian-dashboard-wrapper #bsm-circadian-epm-status.bsm-epm-err { display: block !important; }

#circadian-dashboard-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block-font-size-0-8rem-font-weig { display:block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:9px; }

#circadian-dashboard-wrapper .u-display-flex-align-items-stretch-gap-6px { display:flex; align-items:stretch; gap:6px; width:100%; box-sizing:border-box; flex-wrap:wrap; }

#circadian-dashboard-wrapper .u-display-block-margin-bottom-22px { display:block; margin-bottom:22px; }

#circadian-dashboard-wrapper .u-flex-1 { flex:1; }

#circadian-dashboard-wrapper .u-font-size-11px-opacity-0-7 { font-size:var(--bsm3-text-body-use-on-reading-text); opacity:var(--bsm3-opacity-high); }

#circadian-dashboard-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block { display:block; }

#circadian-dashboard-wrapper .u-margin-top-0 { margin-top:0; }

#circadian-dashboard-wrapper .u-padding-24px-28px-overflow-y-auto-flex-1 { padding:24px 28px; overflow-y:auto; flex:1; min-height:0; }

#circadian-dashboard-wrapper .u-padding-16px-28px-24px-border-top-1px-so { padding:16px 28px 24px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }

#circadian-dashboard-wrapper .u-background-var-glass-bg-rgba20-20-30-0-9 { border-radius: var(--bsm3-radius-primary-cards); max-width: var(--bsm3-width-standard); width:100%; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }

#circadian-dashboard-wrapper .u-font-size-1rem-font-weight-500-opacity-0 { font-size: var(--bsm3-text-large-16px-use-on-text);font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);opacity:var(--bsm3-opacity-medium); }

#circadian-dashboard-wrapper .u-margin-bottom-0 { margin-bottom:0; }

#circadian-dashboard-wrapper .u-font-size-1-25rem-font-weight-700-color { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:0; line-height:1.2; }

#circadian-dashboard-wrapper .u-display-none-position-fixed-inset-0-z-in { display:none; position:fixed; inset:0; z-index:99999; align-items:flex-start; align-items:safe center; justify-content:center; padding:20px; box-sizing:border-box; overflow-y:auto; }

#circadian-dashboard-wrapper .u-display-none-font-size-0-76rem-font-weig { display:none; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align:center; padding:8px 14px; border-radius:var(--bsm3-radius-status-cards); }

#circadian-dashboard-wrapper .u-display-flex-flex-direction-column-flex { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

#circadian-dashboard-wrapper .u-display-block-width-100pc-padding-14px-b { display:block; width:100%; padding:14px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; cursor:pointer; text-align:center; box-sizing:border-box; }

#circadian-dashboard-wrapper .u-display-block-text-align-center-font-siz { display:block; text-align:center; font-size: var(--bsm3-text-small-12px-use-on-text); cursor:pointer; padding:0; width:100%; text-underline-offset:3px; }

#circadian-dashboard-wrapper .u-display-block-margin-bottom-0 { display:block; margin-bottom:0; }

#circadian-dashboard-wrapper .u-display-block-font-size-0-6rem-font-weig { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.22em; margin-bottom:6px; }

#circadian-dashboard-wrapper .u-display-block-font-size-0-65rem-font-wei { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; margin:26px 0 14px; padding-top:18px; }

#circadian-dashboard-wrapper .u-cursor-pointer { cursor:pointer; }

#circadian-dashboard-wrapper .u-background-var-glass-bg-rgba128-128-128 { border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: var(--bsm3-text-large-16px-use-on-text); line-height:1; flex-shrink:0; }

#circadian-dashboard-wrapper .u-background-linear-gradient135deg-rgba109 { padding:26px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }

#circadian-dashboard-wrapper .u-text-align-center-padding-48px-24px { text-align:center; padding:48px 24px; }

#circadian-dashboard-wrapper .u-margin-top-14px { margin-top:14px; }

#circadian-dashboard-wrapper .u-font-size-22px-font-weight-800-color-var { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:4px; }

#circadian-dashboard-wrapper .u-font-size-13px-color-var-diary-text-mute { font-size:var(--bsm3-text-body-use-on-reading-text); }


/* ===== migrated from sleep_platform/pages/circadian_planner.css (scoped under #diagnostic-ribbon) ===== */

#diagnostic-ribbon .bsm-page-container { padding: 20px; max-width: var(--bsm3-width-extra-wide); margin: 0 auto; font-family: var(--bsm3-font-body); }

#diagnostic-ribbon .bsm-card { border-radius: var(--bsm3-radius-primary-cards); padding: 35px; }

#diagnostic-ribbon .clinical-label { font-size: var(--bsm3-text-small-12px-use-on-text); letter-spacing: 2px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; display: block; margin-bottom: 10px; }

#diagnostic-ribbon .input-row-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }

#diagnostic-ribbon .bsm-input { border-radius: var(--bsm3-radius-primary-cards); padding: 12px; width: 100%; margin-top: 5px; }

#diagnostic-ribbon .status-chip { font-size: var(--bsm3-text-small-12px-use-on-text); padding: 4px 12px; border-radius: var(--bsm3-radius-primary-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; transition: 0.3s; }

#diagnostic-ribbon .hub-navigation-dock { display: flex; justify-content: center; gap: 10px; padding: 10px; border-radius: var(--bsm3-radius-pills); width: fit-content; margin: 0 auto 30px auto; }

#diagnostic-ribbon .hub-btn { padding: 10px 25px; border-radius: var(--bsm3-radius-pills); cursor: pointer; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#diagnostic-ribbon .clock-container { position: relative; width: 280px; margin: 0 auto; }

#diagnostic-ribbon .circadian-clock { width: 100%; height: auto; }

#diagnostic-ribbon .clock-face { stroke-width: 1; }

#diagnostic-ribbon .clock-text { font-size: var(--bsm3-text-body-use-on-reading-text); text-anchor: middle; }

#diagnostic-ribbon .clock-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; font-size: var(--bsm3-text-small-12px-use-on-text); }

#diagnostic-ribbon .dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

#diagnostic-ribbon .bsm-hub { display: none; animation: sp-diagnostic-ribbon-fadeIn 0.4s ease forwards; }

#diagnostic-ribbon .bsm-hub.active { display: block; }

#diagnostic-ribbon .boutique-button { border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; text-transform: capitalize; }

#diagnostic-ribbon .primary-action { padding: 18px; width: 100%; }

#diagnostic-ribbon .timeline-scroll-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; }

#diagnostic-ribbon .day-card { min-width: 180px; flex-shrink: 0; }@keyframes sp-diagnostic-ribbon-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#diagnostic-ribbon /* ==== Stage 3: extracted repeated inline styles ==== */
.u-color-var-bsm-amber-muted-font-size-0-7r { font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; }


/* ===== migrated from sleep_platform/pages/dashboard.css (scoped under #bsm-dash-v35) ===== */
/* ══════════════════════════════════════════════════════════════════════
       MASTER SHELL VARIABLE SYSTEM — v37.0
       Wrapper ID: #bsm-dash-v35
       ══════════════════════════════════════════════════════════════════════ */
    


/* ── BASE ─────────────────────────────────────────────────────────────── */
    #bsm-dash-v35 {
        display: block;
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto;
        animation: sp-bsm-dash-v35-dashFadeIn 0.7s ease-out;
        font-family: var(--bsm3-font-body);
    }

#bsm-dash-v35 h1,
#bsm-dash-v35 h2,
#bsm-dash-v35 h3,
#bsm-dash-v35 h4,
#bsm-dash-v35 p,
#bsm-dash-v35 span:not(.bsm-tab-badge):not(.delta-badge),
#bsm-dash-v35 label,
#bsm-dash-v35 strong {
        font-family: var(--bsm3-font-body);
        margin: 0;
    }




/* ── GLASS CARD ───────────────────────────────────────────────────────── */
    

/* ══════════════════════════════════════════════════════════════════════
       DASHBOARD HEADER ROW
       ══════════════════════════════════════════════════════════════════════ */
    











#bsm-dash-v35 /* ── HEADER CHECK-IN PILLS ─────────────────────────────────────────────
       v37: Larger,
more breathable. Min-width ensures consistent sizing.
    ────────────────────────────────────────────────────────────────────────*/
    #bsm-dash-v35 .header-right-group {
        display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }








/* ══════════════════════════════════════════════════════════════════════
       SUBNAV
       ══════════════════════════════════════════════════════════════════════ */
    














/* ── "Sleep Plan" shortcut tab — same style as Sleep Diary shortcut ── */
    


#bsm-dash-v35 /* ── "Sleep Dump" — deliberately tiny,
#bsm-dash-v35 icon-only,
no label at any size ── */
    #bsm-dash-v35 .bsm-tab.tab-mini {
        padding: 10px;
        min-width: 0;
        flex-grow: 0;
        opacity: var(--bsm3-opacity-high);
    }




#bsm-dash-v35 /* ══════════════════════════════════════════════════════════════════════
       TAB PANELS — one screen height each
       Each panel fills the viewport below the header + nav chrome.
       overflow-y: auto allows internal scroll if content overflows on small
       screens,
but on a laptop everything fits in one view.
       ══════════════════════════════════════════════════════════════════════ */
    #bsm-dash-v35 .bsm-tab-panel {
        display: none !important;
        flex-direction: column;
        gap: 12px;
        padding: 0 24px 24px;
        /* Fill exactly one viewport height minus the chrome above */
        min-height: calc(100dvh - calc(var(--dash-header-h) + var(--dash-nav-h)));
        height: calc(100dvh - calc(var(--dash-header-h) + var(--dash-nav-h)));
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        animation: sp-bsm-dash-v35-tabFadeIn 0.25s ease-out;
        /* Hide scrollbar visually but keep it functional */
        scrollbar-width: thin;
    }@keyframes sp-bsm-dash-v35-tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}@keyframes sp-bsm-dash-v35-dashFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
       TOOLTIP — ? icon styles. Bubble is body-portalled by JS.
       ══════════════════════════════════════════════════════════════════════ */
    


#bsm-dash-v35 #bsm-body-tip {
        position: fixed;
        z-index: 2147483647;
        pointer-events: none;
        border-radius: var(--bsm3-radius-status-cards);
        padding: 11px 15px;
        width: 220px;
        font-size: var(--bsm3-text-body-use-on-reading-text);
        line-height: 1.55;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        font-family: var(--bsm3-font-body);
    }



/* ══════════════════════════════════════════════════════════════════════
       TAB INTRO BLOCK
       ══════════════════════════════════════════════════════════════════════ */
    





/* ══════════════════════════════════════════════════════════════════════
       STATS SECTION
       ══════════════════════════════════════════════════════════════════════ */
    

























#bsm-dash-v35 /* Sleep Efficiency band badge — same Severe/High/Elevated/Low colour
       convention used platform-wide (Q4 red,
#bsm-dash-v35 Q3 pink,
#bsm-dash-v35 Q2 yellow/orange,
Q1 green). */
    #bsm-dash-v35 .se-band-badge {
        display: inline-block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        letter-spacing: 0.02em; text-transform: capitalize;
        border-radius: var(--bsm3-radius-primary-cards); padding: 4px 10px; margin-bottom: 14px;
    }





/* ══════════════════════════════════════════════════════════════════════
       RECOMMENDATIONS (now in Actionable Insights tab)
       ══════════════════════════════════════════════════════════════════════ */








/* ══════════════════════════════════════════════════════════════════════
       SLEEP PROFILE CARDS (Tab 1)
       ══════════════════════════════════════════════════════════════════════ */
    






#bsm-dash-v35 /* card-big / score-ring retained in the stylesheet in case they are reused
       elsewhere,
but are no longer used by the priority-1 Sleep Profile card. */
    #bsm-dash-v35 .card-big { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; }







#bsm-dash-v35 /* v37.2: priority-1 (HIGH) cards use this identical .card-std layout as
       priority 2/3 and sit as a normal grid cell — so all 4 Sleep Profile
       cards fit into exactly 2 rows. Colour + badge text carry the urgency,
not shape or size. */
    #bsm-dash-v35 .score-bar { display: flex; align-items: center; gap: 10px; }













/* ══════════════════════════════════════════════════════════════════════
       AI INSIGHTS — renamed to Actionable Insights (TAB 3)
       ══════════════════════════════════════════════════════════════════════ */
    /* ── Single-column layout for insights tab (AI Analysis card removed) ── */
    
/* ══════════════════════════════════════════════════════════════════════
       EXPLORE (TAB 4)
       ══════════════════════════════════════════════════════════════════════ */


/* ===== migrated from sleep_platform/pages/general_learn.css (scoped under #bsm-learn-stage) ===== */
/* 1. Architecture & Layout */
    #bsm-learn-stage {
        padding: 30px;
        font-family: var(--bsm3-font-body);
        animation: sp-bsm-learn-stage-bsm-page-enter 0.6s ease-out;
    }

#bsm-learn-stage /* 2. Typography - WHITE TITLE ON DARK BG */
    .learn-page-title {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Pure white for dark background */
        margin: 0 0 10px 0;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    }

#bsm-learn-stage .learn-subtitle {
        opacity: var(--bsm3-opacity-high);
        font-size: var(--bsm3-text-large-16px-use-on-text);
        margin-bottom: 40px;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        letter-spacing: 0.5px;
    }

#bsm-learn-stage /* 3. Swipeable Card Container */
    .swipe-container {
        display: flex;
        gap: 25px;
        overflow-x: auto;
        padding-bottom: 30px;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
        scroll-snap-type: x mandatory;
    }

#bsm-learn-stage .swipe-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

#bsm-learn-stage /* 4. High-Contrast Educational Cards */
    .learn-card {
        flex: 0 0 320px; /* Lavender glass */
        border-radius: var(--bsm3-radius-pills);
        padding: 40px 30px;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 380px;
    }

#bsm-learn-stage .card-hook {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Midnight Purple */
        line-height: 1.2;
        margin-bottom: 20px;
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    }

#bsm-learn-stage .card-fact {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        line-height: 1.5;
        margin-bottom: 10px;
    }

#bsm-learn-stage .card-explanation {
        font-size: var(--bsm3-text-large-16px-use-on-text); /* Slate Purple */
        line-height: 1.4;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    }

#bsm-learn-stage .card-tag {
        margin-top: auto;
        font-size: var(--bsm3-text-small-12px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize;
        letter-spacing: 1.5px; /* Contrast Bronze/Orange */
        padding-top: 20px;
    }

#bsm-learn-stage /* 5. Navigation Hint */
    .swipe-hint {
        margin-top: 20px;
        font-size: var(--bsm3-text-body-use-on-reading-text);
        display: flex;
        align-items: center;
        gap: 10px;
        opacity: var(--bsm3-opacity-medium);
    }

#bsm-learn-stage .hint-line {
        flex-grow: 1;
        height: 1px;
    }@keyframes sp-bsm-learn-stage-bsm-page-enter {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ===== migrated from sleep_platform/pages/insomnia.css (scoped under #bsm-spa-root) ===== */
/* =========================================================================
   TRIPLE-ID ARMOR & MASTER SHELL EVASION - INSOMNIA HUB (2-COLUMN)
========================================================================= */




#bsm-spa-root .bsm-block:not(.bsm-hidden) { display: block !important; box-sizing: border-box !important; }

#bsm-spa-root .bsm-flex { display: flex !important; box-sizing: border-box !important; }

#bsm-spa-root .bsm-flex-col:not(.bsm-hidden) { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; }

#bsm-spa-root .bsm-btn-primary { 
    padding: 12px 24px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; 
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important; cursor: pointer !important; transition: all 0.3s ease !important; 
    display: inline-block !important; text-align: center !important;
}

#bsm-spa-root .bsm-btn-primary:hover { transform: translateY(-2px) !important; }

#bsm-spa-root .bsm-input { width: 100% !important; padding: 12px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-family: inherit !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom: 16px !important;}

#bsm-spa-root .bsm-panel-box,
#bsm-spa-root .bsm-card {
    border-radius: var(--bsm3-radius-primary-cards)!important; padding: 24px !important; margin-bottom: 24px !important;
}

#bsm-spa-root .bsm-progress-track { height: 8px !important; border-radius: var(--bsm3-radius-mini-badges)!important; overflow: hidden !important; margin: 16px 0 24px !important; }

#bsm-spa-root .bsm-progress-fill { height: 100% !important; border-radius: var(--bsm3-radius-mini-badges)!important; transition: width 0.3s ease !important; }


#bsm-spa-root .bsm-moon-tab:hover { transform: translateY(-3px) !important; }


#bsm-spa-root .bsm-moon-tab.locked { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }

#bsm-spa-root .bsm-moon-tab.locked:hover { transform: none !important; }

#bsm-spa-root .bsm-week-card:hover { transform: translateY(-3px) !important; }

#bsm-spa-root .bsm-week-card.locked { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }

#bsm-spa-root .bsm-week-card.locked:hover { transform: none !important; }


#bsm-spa-root .bsm-badge { font-size: var(--bsm3-text-small-12px-use-on-text)!important; padding: 2px 8px !important; border-radius: var(--bsm3-radius-primary-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; }

#bsm-spa-root .bsm-tool-item:hover { transform: translateX(4px) !important; }

#bsm-spa-root .bsm-tool-item-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; }@keyframes sp-bsm-spa-root-bsmFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   BSM INSOMNIA EDUCATION SECTION — NEW CSS
========================================================================= */


/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */



/* --- TAB SHELL --- */






#bsm-spa-root /* --- STRATEGIES BANNER --- */
/* Secondary nav banner — deliberately NOT a full gradient hero block,
so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-strategies-bar {
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    padding: 18px 24px !important;
    margin-bottom: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}





/* --- TAB PANELS --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-panel {
    animation: sp-bsm-spa-root-bsmFadeIn 0.25s ease !important;
    margin-bottom: 32px !important;
}


/* --- STUDY HEADER CARD (purple gradient) --- */

/* --- DISCLAIMER --- */



/* --- SCORE SUMMARY BLOCK --- */





#bsm-spa-root /* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
#bsm-spa-root personalised header,
checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 28px !important;
    flex-wrap: wrap !important;
}

























#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}






#bsm-spa-root /* Symptom severity dots — replaces the plain checkbox for symptom rows,
#bsm-spa-root since these are 0-4 severity answers,
not yes/no. Risk-factor icon
   (scale emoji) keeps using .bsm-flag-check for a consistent left-hand
   column between the two row types. */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-flag-row { align-items: flex-start !important; }









#bsm-spa-root /* --- QUESTION ROWS (legacy — no longer used by "Your Study",
kept in case other panels reference it) --- */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-edu-q-row {
    padding: 16px 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}











/* --- CONTENT CARDS --- */





/* --- NO DATA STATE --- */

/* =========================================================================
   INTERACTIVE CARD PANELS — What This Means & Patterns & Signs
========================================================================= */








































#bsm-spa-root /* "Next" nav button — shared outline-pill style,
same as apnea.php/
   circadian.php/legs.php so every page's Next button matches. */
#bsm-app-root #spa-stage #bsm-spa-root .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}





#bsm-spa-root /* =========================================================================
   EDIT PROFILE MODAL — Insomnia
========================================================================= */
#bsm-insomnia-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }

#bsm-spa-root .bsm-epm-tab-btn {
    flex: 1 !important;
    min-width: 100px !important;
    padding: 11px 8px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    font-family: var(--bsm3-font-body) !important;
}

#bsm-spa-root .bsm-epm-tab-btn.bsm-tab-selected { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-spa-root #bsm-insomnia-epm-status.bsm-epm-ok { display: block !important; }

#bsm-spa-root #bsm-insomnia-epm-status.bsm-epm-err { display: block !important; }

#bsm-spa-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block-font-size-0-8rem-font-weig { display:block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:9px; }

#bsm-spa-root .u-display-flex-align-items-stretch-gap-6px { display:flex; align-items:stretch; gap:6px; width:100%; box-sizing:border-box; flex-wrap:wrap; }

#bsm-spa-root .u-display-block-margin-bottom-22px { display:block; margin-bottom:22px; }

#bsm-spa-root .u-flex-1 { flex:1; }

#bsm-spa-root .u-font-weight-bold-font-size-14px-margin-b { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text); margin-bottom:4px; }

#bsm-spa-root .u-font-weight-800-font-size-16px-margin-bo { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); margin-bottom:2px; }

#bsm-spa-root .u-font-size-14px-font-weight-bold { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#bsm-spa-root .u-font-size-12px-opacity-0-7-margin-bottom { font-size:var(--bsm3-text-small-12px-use-on-text); opacity:var(--bsm3-opacity-high); margin-bottom:16px; }

#bsm-spa-root .u-font-size-11px-font-weight-bold-opacity { font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity:var(--bsm3-opacity-medium); margin-top:auto; }

#bsm-spa-root .u-font-size-11px-opacity-0-7 { font-size:var(--bsm3-text-body-use-on-reading-text); opacity:var(--bsm3-opacity-high); }

#bsm-spa-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-16px-font-size-20px-font-w { margin-bottom:16px; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-spa-root .u-color-var-diary-text-muted-margin-bottom { margin-bottom:24px; }

#bsm-spa-root .u-font-size-22px-font-weight-800-margin-bo { font-size:var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }

#bsm-spa-root .u-font-size-20px-font-weight-800-margin-bo { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }

#bsm-spa-root .u-font-size-13px-font-weight-700-margin-bo { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:8px; }

#bsm-spa-root .u-font-size-13px-font-weight-600-opacity-0 { font-size:var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity:var(--bsm3-opacity-high); text-transform: capitalize; letter-spacing:0.5px; }

#bsm-spa-root .u-flex-1-background-var-inner-bg-border-1p { flex:1; padding:32px 24px; border-radius:var(--bsm3-radius-primary-cards); text-align:center; }

#bsm-spa-root .u-flex-shrink-0-margin-top-1px { flex-shrink:0;margin-top:1px; }

#bsm-spa-root .u-display-none { display:none !important; }

#bsm-spa-root .u-color-var-diary-text-muted-font-size-14p { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-bottom:24px !important; }

#bsm-spa-root .u-padding-24px-28px-overflow-y-auto-flex-1 { padding:24px 28px; overflow-y:auto; flex:1; min-height:0; }

#bsm-spa-root .u-padding-16px-28px-24px-border-top-1px-so { padding:16px 28px 24px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }

#bsm-spa-root .u-background-var-glass-bg-rgba20-20-30-0-9 { border-radius: var(--bsm3-radius-primary-cards); max-width: var(--bsm3-width-standard); width:100%; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }

#bsm-spa-root .u-font-size-36px-font-weight-800-margin-bo { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:8px; }

#bsm-spa-root .u-font-size-1rem-font-weight-500-opacity-0 { font-size: var(--bsm3-text-large-16px-use-on-text);font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);opacity:var(--bsm3-opacity-medium); }

#bsm-spa-root .u-font-size-1-25rem-font-weight-700-color { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:0; line-height:1.2; }

#bsm-spa-root .u-display-none-position-fixed-inset-0-z-in { display:none; position:fixed; inset:0; z-index:99999; align-items:flex-start; align-items:safe center; justify-content:center; padding:20px; box-sizing:border-box; overflow-y:auto; }

#bsm-spa-root .u-display-none-font-size-0-76rem-font-weig { display:none; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align:center; padding:8px 14px; border-radius:var(--bsm3-radius-status-cards); }

#bsm-spa-root .u-display-flex-flex-direction-column-flex { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

#bsm-spa-root .u-display-block-width-100pc-padding-14px-b { display:block; width:100%; padding:14px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; cursor:pointer; text-align:center; box-sizing:border-box; }

#bsm-spa-root .u-display-block-text-align-center-font-siz { display:block; text-align:center; font-size: var(--bsm3-text-small-12px-use-on-text); cursor:pointer; padding:0; width:100%; text-underline-offset:3px; }

#bsm-spa-root .u-display-block-margin-bottom-0 { display:block; margin-bottom:0; }

#bsm-spa-root .u-display-block-font-size-0-6rem-font-weig { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.22em; margin-bottom:6px; }

#bsm-spa-root .u-display-block-font-size-0-65rem-font-wei { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; margin:26px 0 14px; padding-top:18px; }

#bsm-spa-root .u-cursor-pointer { cursor:pointer; }

#bsm-spa-root .u-background-var-glass-bg-rgba128-128-128 { border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: var(--bsm3-text-large-16px-use-on-text); line-height:1; flex-shrink:0; }

#bsm-spa-root .u-background-linear-gradient135deg-rgba109 { padding:26px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }

#bsm-spa-root .u-text-align-center-padding-48px-24px { text-align:center; padding:48px 24px; }

#bsm-spa-root .u-width-5pc { width:5%; }

#bsm-spa-root .u-width-100pc-padding-16px-font-size-16px { width:100% !important; padding:16px !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }

#bsm-spa-root .u-padding-8px-16px { padding:8px 16px !important; }

#bsm-spa-root .u-padding-32px-24px { padding:32px 24px !important; }

#bsm-spa-root .u-padding-16px-24px { padding:16px 24px !important; }

#bsm-spa-root .u-margin-0-font-size-14px-color-var-diary { margin:0; font-size:var(--bsm3-text-body-use-on-reading-text); line-height:1.5; }

#bsm-spa-root .u-margin-0-font-size-14px-color-var-brand { margin:0; font-size:var(--bsm3-text-body-use-on-reading-text); }

#bsm-spa-root .u-margin-top-32px-padding-top-24px-border { margin-top:32px; padding-top:24px; }

#bsm-spa-root .u-margin-bottom-8px-font-weight-800 { margin-bottom:8px; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-spa-root .u-margin-bottom-8px-font-size-20px-font-we { margin-bottom:8px; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-spa-root .u-margin-bottom-8px-font-size-14px-color-v { margin-bottom:8px; font-size:var(--bsm3-text-body-use-on-reading-text); }

#bsm-spa-root .u-margin-bottom-8px-2 { margin-bottom:8px; }

#bsm-spa-root .u-margin-bottom-32px { margin-bottom:32px !important; }

#bsm-spa-root .u-justify-content-space-between-font-size { justify-content:space-between; font-size:var(--bsm3-text-small-12px-use-on-text); opacity:var(--bsm3-opacity-high); margin-bottom:4px; }

#bsm-spa-root .u-gap-24px { gap:24px; }

#bsm-spa-root .u-font-weight-bold-opacity-1 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity:1; }

#bsm-spa-root .u-font-weight-800-font-size-16px-color-fff { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); }

#bsm-spa-root .u-font-weight-700-font-size-16px-margin-bo-3 { font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); margin-bottom:8px; }

#bsm-spa-root .u-font-size-32px-margin-bottom-12px { font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom:12px; }

#bsm-spa-root .u-font-size-22px-font-weight-800-color-fff { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:4px; }

#bsm-spa-root .u-font-size-16px-font-weight-700-margin-bo { font-size:var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:16px; }

#bsm-spa-root .u-font-size-14px-color-var-diary-text-mute { font-size:var(--bsm3-text-body-use-on-reading-text); }

#bsm-spa-root .u-font-size-13px-color-rgba255-255-255-0-7 { font-size:var(--bsm3-text-medium-14px-use-on-text); }

#bsm-spa-root .u-font-size-12px-color-var-diary-text-mute { font-size:var(--bsm3-text-small-12px-use-on-text); margin-bottom:8px; }

#bsm-spa-root .u-font-size-12px-color-rgba255-255-255-0-8 { font-size:var(--bsm3-text-small-12px-use-on-text); margin-top:2px; }

#bsm-spa-root .u-display-block-text-align-center-padding { display:block; text-align:center; padding: 40px; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-large-16px-use-on-text); }

#bsm-spa-root .u-display-block-font-size-0-76rem-color-va { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); line-height:1.5; border-radius:var(--bsm3-radius-status-cards); padding:12px 14px; }

#bsm-spa-root .u-color-var-diary-text-muted-font-size-15p { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom:0 !important; }

#bsm-spa-root .u-color-var-diary-text-muted-font-size-13p { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom:0 !important; }

#bsm-spa-root .u-color-var-brand-green-font-weight-bold-m { font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-top:12px; }

#bsm-spa-root .u-color-var-diary-text-muted-font-size-14p-2 { font-size: var(--bsm3-text-body-use-on-reading-text); }

#bsm-spa-root .u-background-var-inner-bg-border-1px-solid { padding:20px; border-radius: var(--bsm3-radius-primary-cards); text-align:center; font-size:var(--bsm3-text-body-use-on-reading-text); }

#bsm-spa-root .u-background-var-inner-bg-border-1px-solid-2 { padding:20px; border-radius: var(--bsm3-radius-primary-cards); margin-top:16px; }

#bsm-spa-root .u-align-items-center-gap-16px-2 { align-items:center; gap:16px; }

#bsm-spa-root .u-align-items-center-gap-10px { align-items:center; gap:10px; }


/* ===== migrated from sleep_platform/pages/legs.css (scoped under #bsm-legs-wrapper) ===== */
/* ============================================================
   BSM RESTLESS LEGS — SCOPED CSS
   All rules scoped under #bsm-app-root #spa-stage #bsm-legs-wrapper
   NO hardcoded colours except on gradient cards (--on-gradient)
   ============================================================ */




/* Typography lock */

/* Kill WordPress green underline — comprehensive reset */


/* ---- PAGE HEADER ---- */

/* Shared title/subtitle treatment — identical values on apnea/circadian/
   legs/insomnia so every condition page reads as one brand. */



/* ---- TAB NAV ---- */




#bsm-legs-wrapper /* "Next" nav button — shared outline-pill style,
same as apnea.php/
   circadian.php/insomnia.php so every page's Next button matches. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-next-pill-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 28px !important;
}



#bsm-legs-wrapper /* ---- STRATEGIES BANNER ---- */
/* Secondary nav banner — deliberately NOT a full gradient hero block,
so
   it reads as a shortcut strip rather than competing with each tab's own
   header card (which owns the gradient "hero" treatment on this page). */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-strategies-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}







/* ---- PANEL SHOW/HIDE ---- */

#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-active,
#bsm-legs-wrapper .bsm-edu-panel.bsm-edu-panel-active {
    display: block !important;
    animation: sp-bsm-legs-wrapper-bsmLegsUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}@keyframes sp-bsm-legs-wrapper-bsmLegsUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- PANEL HEADER CARD ---- */





/* ---- SIGNAL SUMMARY CARD ---- */













#bsm-legs-wrapper /* =========================================================================
   YOUR STUDY — SCORE DIAL + FLAGS GRID
   Same visual pattern as apnea.php's "Your Study" panel (gauge dial,
#bsm-legs-wrapper personalised header,
checkbox-style flag grid) so all four condition
   pages read as one consistent design language.
========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-score-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}























/* Section eyebrow — shared treatment with apnea.php/circadian.php for any
   supplementary section that follows the main educational cards. */



#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: var(--bsm3-radius-status-cards)!important;
    transition: background 0.25s, border-color 0.25s !important;
}






#bsm-legs-wrapper /* Symptom severity dots — 0-4 answers,
not yes/no. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-flag-row { align-items: flex-start !important; }










/* Range description cards */








/* GP card */



#bsm-legs-wrapper /* Pregnancy warning card — distinct amber "pay attention" treatment,
#bsm-legs-wrapper separate from the neutral green GP/info cards above,
using the
   --signal-amber tokens already defined for this page. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-warning-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 20px !important;
}




#bsm-legs-wrapper /* =========================================================================
   LEARNING COURSE — "Understanding Restless Legs" guided carousel. Sits
   above the Day Plan and gates it (see .bsm-legs-daybuild-locked-card
   below). One slide visible at a time inside a fixed-height viewport,
#bsm-legs-wrapper sliding via transform on .bsm-legs-course-track — cover slide (0),
#bsm-legs-wrapper 9 content slides (1-9),
done slide (10).
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-outer {
    margin-bottom: 24px !important;
}

#bsm-legs-wrapper /* Show/hide utility for everything below that gets toggled via JS (and
   conditionally rendered by PHP on load). Every other rule on this page
   is written "!important",
#bsm-legs-wrapper including the base display rules for the
   elements below (.bsm-block,
#bsm-legs-wrapper .bsm-legs-course-shell,
#bsm-legs-wrapper etc.) — a plain
   inline style="display:none" loses to those,
so hiding has to go through
   a class instead. Same fix as .bsm-edu-panel-hidden further up. Each
   selector below pairs the utility class with the element's own class so
   it always out-specifies that element's un-combined base rule. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-summary-card.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-shell.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-progress-hdr.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-nav.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-card.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-wrap.bsm-legs-hidden,
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-time-row.bsm-legs-hidden {
    display: none !important;
}

/* Compact "already complete" summary shown instead of the full carousel
   on return visits — matches the Day Plan hero's shell/spacing so the two
   stacked cards read as one family. */





/* Shell around the whole interactive carousel */








#bsm-legs-wrapper /* Content slide variant (1-9) — holds one flip card (tap to reveal the
   explanation),
#bsm-legs-wrapper same .bsm-flip system as "What This Means"/"Patterns &
   Signs" above,
just re-sized to sit inside a carousel slide instead of a
   grid cell. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-slide.card {
    padding: 20px !important;
}


/* Cover + done bookend slides */








/* Prev/Next nav row (content slides only) */







#bsm-legs-wrapper /* =========================================================================
   BUILD YOUR DAY — locked state,
shown until the course above is complete.
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-daybuild-locked-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding: 22px 24px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 24px !important;
}




#bsm-legs-wrapper /* =========================================================================
   DAY PLAN — launcher,
#bsm-legs-wrapper builder form,
and generated timeline.
   ========================================================================= */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-wrap {
    margin-bottom: 24px !important;
}

/* Launcher (no plan yet) + Active plan summary header share this shell */



















#bsm-legs-wrapper /* ---- Slot cards ----
   Each slot gets a colour-coded circular icon badge,
#bsm-legs-wrapper matching the flip-card
   visual language already used in "What This Means"/"Patterns & Signs"
   above,
rather than the flat identical-grey-box treatment this had before. */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot {
    padding: 20px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    margin-bottom: 14px !important;
    transition: opacity 0.15s ease, border-color 0.15s ease !important;
}




#bsm-legs-wrapper /* Circular colour-coded icon badge — one hue per slot,
#bsm-legs-wrapper reusing the same
   gradient palette the flip cards above already use (green/teal/blue),
#bsm-legs-wrapper plus the platform's existing amber/red brand tokens for the two
   caution-flavoured slots (meal/iron,
alcohol). */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-slot-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-large-16px-use-on-text)!important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}










#bsm-legs-wrapper /* Toggle switch — plain checkbox,
styled minimally */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-dayplan-toggle {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 26px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: var(--bsm3-radius-primary-cards)!important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}












/* ---- Active plan / generated timeline ---- */









/* ---- FLIP CARDS — 3-col (What This Means) ---- */








/* Gradient variants */



#bsm-legs-wrapper /* Flip card text — on gradient,
always use --on-gradient vars */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-fi-eyebrow { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.2em !important; text-align:center !important; }








/* ---- PATTERNS & SIGNS — 2-col grid ---- */






#bsm-legs-wrapper /* =========================================================================
   EDIT PROFILE MODAL — Restless Legs (new build,
#bsm-legs-wrapper same pattern as
   insomnia.php/circadian.php's .bsm-epm-tabs/.bsm-epm-tab-btn)
========================================================================= */
#bsm-legs-edit-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }

#bsm-legs-wrapper #bsm-legs-dayplan-overlay.bsm-fading { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; }

#bsm-legs-wrapper .bsm-epm-tab-btn.bsm-tab-selected { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#bsm-legs-wrapper #bsm-legs-epm-status.bsm-epm-ok { display: block !important; }

#bsm-legs-wrapper #bsm-legs-epm-status.bsm-epm-err { display: block !important; }

#bsm-legs-wrapper .bsm-legs-dayplan-step-label::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
}

#bsm-legs-wrapper .bsm-legs-dayplan-step-label:first-child { margin-top: 0 !important; }

#bsm-legs-wrapper .bsm-legs-dayplan-source-btn.selected .bsm-legs-dayplan-source-title::before {
    content: "✓" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
    font-size: var(--bsm3-text-small-12px-use-on-text)!important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
}

#bsm-legs-wrapper .bsm-legs-dayplan-time-field label { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 6px !important; }

#bsm-legs-wrapper .bsm-legs-dayplan-slot.disabled { opacity: var(--bsm3-opacity-medium) !important; }

#bsm-legs-wrapper .bsm-legs-dayplan-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important; left: 3px !important;
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    transition: left 0.15s ease !important;
}

#bsm-legs-wrapper .bsm-legs-dayplan-toggle:checked::before { left: 21px !important; }

#bsm-legs-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-block-font-size-0-8rem-font-weig { display:block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom:9px; }

#bsm-legs-wrapper .u-display-flex-align-items-stretch-gap-6px { display:flex; align-items:stretch; gap:6px; width:100%; box-sizing:border-box; flex-wrap:wrap; }

#bsm-legs-wrapper .u-display-block-margin-bottom-22px { display:block; margin-bottom:22px; }

#bsm-legs-wrapper .u-flex-1 { flex:1; }

#bsm-legs-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center { text-align:center; }

#bsm-legs-wrapper .u-margin-top-0 { margin-top:0; }

#bsm-legs-wrapper .u-padding-24px-28px-overflow-y-auto-flex-1 { padding:24px 28px; overflow-y:auto; flex:1; min-height:0; }

#bsm-legs-wrapper .u-padding-16px-28px-24px-border-top-1px-so { padding:16px 28px 24px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }

#bsm-legs-wrapper .u-background-var-glass-bg-rgba20-20-30-0-9 { border-radius: var(--bsm3-radius-primary-cards); max-width: var(--bsm3-width-standard); width:100%; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }

#bsm-legs-wrapper .u-font-size-1rem-font-weight-500-opacity-0 { font-size: var(--bsm3-text-large-16px-use-on-text);font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);opacity:var(--bsm3-opacity-medium); }

#bsm-legs-wrapper .u-font-size-1-25rem-font-weight-700-color { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:0; line-height:1.2; }

#bsm-legs-wrapper .u-display-none-position-fixed-inset-0-z-in { display:none; position:fixed; inset:0; z-index:99999; align-items:flex-start; align-items:safe center; justify-content:center; padding:20px; box-sizing:border-box; overflow-y:auto; }

#bsm-legs-wrapper .u-display-none-font-size-0-76rem-font-weig { display:none; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align:center; padding:8px 14px; border-radius:var(--bsm3-radius-status-cards); }

#bsm-legs-wrapper .u-display-flex-flex-direction-column-flex { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

#bsm-legs-wrapper .u-display-block-width-100pc-padding-14px-b { display:block; width:100%; padding:14px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; cursor:pointer; text-align:center; box-sizing:border-box; }

#bsm-legs-wrapper .u-display-block-text-align-center-font-siz { display:block; text-align:center; font-size: var(--bsm3-text-small-12px-use-on-text); cursor:pointer; padding:0; width:100%; text-underline-offset:3px; }

#bsm-legs-wrapper .u-display-block-margin-bottom-0 { display:block; margin-bottom:0; }

#bsm-legs-wrapper .u-display-block-font-size-0-6rem-font-weig { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.22em; margin-bottom:6px; }

#bsm-legs-wrapper .u-display-block-font-size-0-65rem-font-wei { display:block; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing:0.14em; margin:26px 0 14px; padding-top:18px; }

#bsm-legs-wrapper .u-cursor-pointer { cursor:pointer; }

#bsm-legs-wrapper .u-background-var-glass-bg-rgba128-128-128 { border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: var(--bsm3-text-large-16px-use-on-text); line-height:1; flex-shrink:0; }

#bsm-legs-wrapper .u-background-linear-gradient135deg-rgba109 { padding:26px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }

#bsm-legs-wrapper .u-text-align-center-padding-48px-24px { text-align:center; padding:48px 24px; }

#bsm-legs-wrapper .u-margin-top-14px { margin-top:14px; }

#bsm-legs-wrapper .u-display-block-margin-bottom-8px { display:block; margin-bottom:8px; }


/* ===== migrated from sleep_platform/pages/sleep_diary.css (scoped under #bsm_diary_wrapper) ===== */
/* Adaptive Glass Variables & Dynamic Text Colors */

/* Day Mode Text Colors */

/* Sleep Mode Text Colors */


/* Glass Panels */

/* Progressive Flow Hiding */

#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-step.active { display: block; opacity: 1; transform: translateY(0); animation: sp-bsm_diary_wrapper-slideUp 0.4s ease forwards; }@keyframes sp-bsm_diary_wrapper-slideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Headers & Text Base Sizes */



/* Calendar Date Badge */

/* Calendar Track */






/* Navigation Buttons */


/* Big Buttons & Toggles */






/* In-Sentence Clickable Times */



/* Summary Stats Grid */




/* Custom Static Grid Modal */







#bsm_diary_wrapper /* Base Styles for Grids,
#bsm_diary_wrapper Chunks,
and Emojis */
#bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-grid-btn { border-radius: var(--bsm3-radius-primary-cards); padding: 14px 4px; text-align: center; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: all 0.2s ease; user-select: none; touch-action: manipulation; }







/* Hover States */

/* =========================================================================
   ABSOLUTE OVERRIDE FOR ACTIVE STATES
   (Forces white text and purple background)
========================================================================= */


/* Primary Button Active/Hover force white text */


/* Textarea */





/* Alerts */



/* =========================================
   DAY MODE EXPLICIT CLEANUP 
   (Protects non-active items from looking muddy)
========================================= */




#bsm_diary_wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

#bsm_diary_wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-transform-none-margin-bottom-4px-op { text-transform:none; margin-bottom:4px; opacity:var(--bsm3-opacity-high); }

#bsm_diary_wrapper .u-margin-0-4 { margin: 0; }


/* ===== migrated from sleep_platform/pages/sleep_dump.css (scoped under #bsm-rules-page) ===== */


#bsm-rules-page /* Nuke every theme default that might collide — headings,
#bsm-rules-page links,
lists */
    #bsm-rules-page h1,
#bsm-rules-page h2,
#bsm-rules-page h3,
#bsm-rules-page h4,
#bsm-rules-page p,
#bsm-rules-page li,
#bsm-rules-page span,
#bsm-rules-page strong {
        font-family: var(--bsm3-font-body) !important;
        padding-bottom: 0 !important;
        margin: 0;
    }




/* ── Condition section shell ── */
    






/* ── Rules bullet block ── */
    



/* ── Example timeline widget (mirrors your attached circadian mock) ── */
    






















/* ===== migrated from sleep_platform/pages/sleep_planner.css (scoped under #np-screen-builder) ===== */

#np-screen-builder * { box-sizing: border-box; }

#np-screen-builder .np-wrapper { margin: 0 auto; font-family: var(--bsm3-font-body); min-height: 100vh; padding-bottom: 60px; width: 100% !important; max-width: 100vw; overflow-x: hidden; }

/* ===== FIX 11 sep 2026: Sleep Planner washed-out text =====
   This page's content (the block above) colours its text using
   var(--text) and var(--muted). Those two variables are also set,
   site-wide, by an unrelated dark-dashboard component elsewhere in
   this file -- and because that component's rule wins the global
   cascade, --text/--muted currently resolve to WHITE everywhere,
   including here, on this plain white page. That is the washed-out
   text bug. Fixing it locally, only for this page's own wrapper, so
   nothing else on the site that relies on the white value elsewhere
   is affected. */

#np-screen-builder .np-screen.active { display: block; }

#np-screen-builder .np-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-radius: var(--bsm3-radius-primary-cards); position: sticky; top: 10px; z-index: 1000; margin: 10px 10px 20px 10px; }

#np-screen-builder .np-brand h1 { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }

#np-screen-builder .np-nav-btn { padding: 8px 16px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s;}

#np-screen-builder /* Builder Layout */
.np-canvas { padding: 20px; }

@media (min-width: 901px) {
#np-screen-builder .np-canvas { flex: 1; padding: 0; }
#np-screen-builder .np-palette { flex: none; width: 330px; min-width: 330px; position: sticky; top: 90px; height: calc(100vh - 120px); overflow-y: auto; border-radius: var(--bsm3-radius-primary-cards); padding: 25px; }
}

#np-screen-builder .np-input { width: 100%; padding: 10px 15px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 15px; font-weight: var(--bsm3-weight-bold-700-use-on-h1);}

#np-screen-builder .np-zone-tab { padding: 8px 12px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; white-space: nowrap; }

#np-screen-builder .np-zone-container { border-radius: var(--bsm3-radius-primary-cards); padding: 15px; min-height: 250px; display: flex; flex-direction: column; transition: 0.2s; }

#np-screen-builder .np-zone.active { display: block; }

#np-screen-builder .np-mini-item { border-radius: var(--bsm3-radius-status-cards); padding: 8px 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; font-size: var(--bsm3-text-body-use-on-reading-text); position: relative; transition: 0.2s;}

#np-screen-builder .np-btn-view { font-size: var(--bsm3-text-small-12px-use-on-text); padding: 4px 8px; border-radius: var(--bsm3-radius-status-cards); cursor: pointer; text-transform: capitalize; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#np-screen-builder .np-save-btn { width: 100%; margin-top: 20px; padding: 18px; border-radius: var(--bsm3-radius-primary-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; }

#np-screen-builder .np-save-btn:hover { transform: translateY(-2px); }

#np-screen-builder /* Palette & Filters -- search box + single grouped dropdown,
#np-screen-builder mirrors the
   Activity Planner's Search + "Work" category dropdown pattern. */
.np-search-row { display: flex; gap: 8px; margin-bottom: 10px; max-width: 100%; }

#np-screen-builder .np-search-row .np-input { margin-bottom: 0; }
.np-search-row input.np-input { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
.np-search-row select.np-input { flex: 0 0 auto; width: -moz-fit-content; width: fit-content; min-width: 0; padding-left: 10px; padding-right: 6px; }

#np-screen-builder #np-search { flex: 1 1 0; min-width: 0; }

#np-screen-builder #np-filter-select { flex: 0 0 auto; width: -moz-fit-content; width: fit-content; min-width: 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; padding-left: 10px; padding-right: 6px; }

#np-screen-builder .np-add-therapies-link { display:block; text-align:right; font-size:var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin:-4px 0 10px 0; }

#np-screen-builder /* Simple tap-to-add row */
.np-simple-row { padding: 8px 10px; margin-bottom: 8px; border-radius: var(--bsm3-radius-status-cards); display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-size: var(--bsm3-text-body-use-on-reading-text); transition: 0.2s; }

#np-screen-builder .np-simple-row:active { cursor: grabbing; }
.np-simple-row-left { display: flex; align-items: center; gap: 8px; font-size: var(--bsm3-text-large-16px-use-on-text); }
.np-simple-row-left span { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.np-simple-row-right { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); padding: 2px 8px; border-radius: var(--bsm3-radius-mini-badges); flex-shrink: 0; }

#np-screen-builder .np-simple-row:hover { transform: translateY(-1px); }

#np-screen-builder .np-palette-empty { text-align: center; font-style: italic; padding: 30px 15px; font-size: var(--bsm3-text-body-use-on-reading-text); }

#np-screen-builder /* Modals */
.np-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 15px; }

#np-screen-builder .np-modal-box { width: 100%; max-width: var(--bsm3-width-standard); border-radius: var(--bsm3-radius-primary-cards); padding: 25px; position: relative; max-height: 90vh; overflow-y: auto; }

#np-screen-builder /* My Plans Grid -- unified card,
#np-screen-builder exact same structure/colours as
   Body/Meal/Activity/Mind Plan's own .np-unified-card / .bp-unified-card.
   No grid wrapper around the cards themselves -- plain block stacking,
#np-screen-builder one card per row,
#np-screen-builder matching Body Plan's own list (see
   release_plans/SCHEDULER_MASTER_PLAN.md's Mind Plan card-rebuild
   entries for why: a grid wrapper here previously packed 3 per row). */
.np-unified-card { padding: 25px; border-radius: var(--bsm3-radius-primary-cards); position: relative; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; margin-bottom: 20px; }

#np-screen-builder .np-unified-card:hover { transform: translateY(-2px); }

#np-screen-builder .np-unified-card h3,
#np-screen-builder .np-unified-card p,
#np-screen-builder .np-unified-card button { font-family: var(--bsm3-font-body) !important; }

#np-screen-builder .np-plan-del { position: absolute; top: 25px; right: 25px; cursor: pointer; font-size: var(--bsm3-text-large-16px-use-on-text); padding: 5px; transition: 0.2s; }

#np-screen-builder .np-plan-del:hover { transform: scale(1.1); }

#np-screen-builder .np-list-badge { display: inline-block; white-space: nowrap; padding: 6px 12px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; }

#np-screen-builder .np-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

#np-screen-builder /* Recoloured from Body Plan's light-theme hex values onto the shared
   brand-purple/glass system so this card matches every other planner's
   dark-mode look rather than standing out as a light-mode leftover. */
.np-plan-match { padding: 12px 16px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; }

#np-screen-builder .np-plan-open { padding: 12px 16px; border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; }

@media (max-width: 900px) {
#np-screen-builder .np-card-actions { grid-template-columns: 1fr; }
}

#np-screen-builder /* Plan Detail View Overlay -- same bordered,
#np-screen-builder slide-up box as
   Meal/Activity/Body/Mind Plan's own canvas overlays. Content is fetched
   from get_plan_details_html and injected as-is. Replaces the old
   full-screen #np-screen-view tab (base64-blob client-side rendering). */
.np-canvas-overlay {
    position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
    width: 100%; max-width: var(--bsm3-width-wide)!important; height: 90vh; border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0; z-index: 10001;
    display: flex; flex-direction: column; transform: translateY(110%);
    transition: transform 0.35s ease; visibility: hidden;
}

#np-screen-builder .np-canvas-overlay.open { transform: translateY(0); visibility: visible; }

#np-screen-builder .np-canvas-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0; }

#np-screen-builder .np-canvas-close { padding: 8px 16px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; }

#np-screen-builder .np-canvas-body { padding: 30px; overflow-y: auto; flex: 1; min-height: 0; }

#np-screen-builder .np-canvas-footer { padding: 15px 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

#np-screen-builder .np-canvas-print-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; flex: 1 1 220px; max-width: var(--bsm3-width-narrow); display: flex; align-items: center; justify-content: center; gap: 8px; }

#np-screen-builder .np-canvas-schedule-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.2s; flex: 1 1 220px; max-width: var(--bsm3-width-narrow); }

@media print {
#np-screen-builder body * { visibility: hidden; }
#np-screen-builder #np-canvas-overlay,
#np-screen-builder #np-canvas-overlay * { visibility: visible; }
#np-screen-builder #np-canvas-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: none;
    }
#np-screen-builder .np-canvas-header,
#np-screen-builder .np-canvas-footer { display: none !important; }
#np-screen-builder .np-canvas-body { overflow: visible !important; padding: 0 !important; }
}

#np-screen-builder /* Drawer -- technique "science & steps" detail,
#np-screen-builder same shell Mind Plan
   uses (mind/mind_tool_planner.php),
#np-screen-builder same shared
   anxiety/anxiety_science.php content (generic step lookup,
#np-screen-builder not
   Mind-specific -- wellness-scheduler.php's own former sleep-plan
   rendering already reused this same file). No content_b/c/d panes --
   Sleep has no archetype/"Fabulous You" narrative to show. */
.mind-drawer-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10010; opacity: 0; pointer-events: none; transition: opacity 0.3s; }

#np-screen-builder .mind-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

#np-screen-builder .mind-drawer-backdrop.invisible-bg { pointer-events: none !important; }

#np-screen-builder .mind-drawer-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: var(--bsm3-width-standard); height: 100%; z-index: 10011; transition: right 0.3s; padding: 20px; overflow-y: auto; }

#np-screen-builder .mind-drawer-panel.open { right: 0; }

#np-screen-builder .mind-drawer-close { position: absolute; top: 15px; right: 15px; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; z-index: 100;}

#np-screen-builder /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

#np-screen-builder /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-10px { margin-bottom:10px; }

#np-screen-builder .u-text-align-left { text-align:left; }

#np-screen-builder .u-text-align-center-padding-40px-color-e07 { text-align:center; padding:40px; }

#np-screen-builder .u-text-align-center-color-e07a5f-padding-2 { text-align:center; padding:20px; }

#np-screen-builder .u-margin-top-10px { margin-top:10px; }

#np-screen-builder .u-margin-bottom-15px-text-align-center { margin-bottom:15px; text-align:center; }

#np-screen-builder .u-font-size-12px-color-var-muted-font-styl { font-size:var(--bsm3-text-small-12px-use-on-text); font-style:italic; }

#np-screen-builder .u-font-size-12px-color-64748b-font-style-i { font-size:var(--bsm3-text-small-12px-use-on-text); font-style:italic; }

#np-screen-builder .u-display-flex-justify-content-space-betwe { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; padding-right:30px; }

#np-screen-builder .u-display-flex-align-items-center-gap-15px { display:flex; align-items:center; gap:15px; margin-bottom:20px; }

#np-screen-builder .u-margin-top-30px { margin-top: 30px; }

#np-screen-builder .u-display-inline-block-background-e6f2f2-c { display:inline-block; padding:8px 16px; border-radius:var(--bsm3-radius-status-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text); }


/* ===== migrated from sleep_platform/pages/sleep_world.css (scoped under #bsm-sw-wrapper) ===== */



#bsm-sw-wrapper {
        display: block;
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto;
        padding: 24px 24px 100px;
        box-sizing: border-box;
        font-family: var(--bsm3-font-body);
        animation: sp-bsm-sw-wrapper-bsmSwFadeIn 0.6s ease-out;
    }@keyframes sp-bsm-sw-wrapper-bsmSwFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

#bsm-sw-wrapper .content-grid { display: none !important; }

#bsm-sw-wrapper #sw-tab-1:checked ~ .sleep-world-content-area #content-1 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-2:checked ~ .sleep-world-content-area #content-2 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-3:checked ~ .sleep-world-content-area #content-3 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-4:checked ~ .sleep-world-content-area #content-4 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-5:checked ~ .sleep-world-content-area #content-5 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-6:checked ~ .sleep-world-content-area #content-6 { display: block !important; }

#bsm-sw-wrapper #sw-tab-7:checked ~ .sleep-world-content-area #content-7 { display: grid !important; }

#bsm-sw-wrapper #sw-tab-8:checked ~ .sleep-world-content-area #content-8 { display: block !important; }

#bsm-sw-wrapper /* Home/menu vs. a section being open — #sw-home is a 9th radio in the
       same group as the 8 sw-tab-N inputs,
#bsm-sw-wrapper checked by default. The tile
       grid + search bar show only at "home"; each content-N pane and the
       single shared "back to menu" link show only once a tile has been
       opened. This replaces the old two-tier pill-tab nav (which read as
       cluttered/app-like) with a calmer tap-a-tile home screen,
#bsm-sw-wrapper the same
       drill-down pattern already used one level up on the Dashboard's
       Explore cards. */
    .sw-home-only { display: none; }

#bsm-sw-wrapper #sw-home:checked ~ .sleep-world-content-area .sw-home-only { display: block; }

#bsm-sw-wrapper #sw-home:checked ~ .sleep-world-content-area .search-filter-bar.sw-home-only { display: flex !important; }

#bsm-sw-wrapper #sw-home:checked ~ .sleep-world-content-area .sw-tile-grid.sw-home-only { display: grid !important; }

#bsm-sw-wrapper .sw-section-only { display: none !important; }

#bsm-sw-wrapper #sw-tab-1:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-2:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-3:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-4:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-5:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-6:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-7:checked ~ .sleep-world-content-area .sw-section-only,
#bsm-sw-wrapper #sw-tab-8:checked ~ .sleep-world-content-area .sw-section-only {
        display: inline-flex !important;
    }


#bsm-sw-wrapper .sw-header h1 {
        font-size: var(--bsm3-size-page-title-24px-use-on-h1);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: -0.03em; line-height: 1.1;
        margin-bottom: 6px; /* overrides the theme's default green
                                            heading underline so it doesn't
                                            cut across the dark hero */
        padding-bottom: 0 !important;
    }

#bsm-sw-wrapper .sw-header p {
        font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
        max-width: var(--bsm3-width-standard); line-height: 1.5;
    }

#bsm-sw-wrapper .sw-tab-intro-icon svg { width: 14px; height: 14px; stroke-width: 2px; }

#bsm-sw-wrapper .sw-tab-intro-body strong { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#bsm-sw-wrapper .sw-tab-intro-body p { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.45; opacity: var(--bsm3-opacity-medium); }

#bsm-sw-wrapper /* 5. SEARCH BAR */
    .search-filter-bar { display: flex; gap: 12px; max-width: var(--bsm3-width-standard); align-items: center; margin-bottom: 28px; }

#bsm-sw-wrapper .search-input::placeholder { opacity: var(--bsm3-opacity-medium) !important; }

#bsm-sw-wrapper .filter-btn:hover { transform: translateY(-2px); }

#bsm-sw-wrapper /* 6. HOME TILE GRID — replaces the old pill-tab nav. A calm grid of
       large tap targets,
#bsm-sw-wrapper each one a destination (like the Dashboard's own
       Explore cards),
#bsm-sw-wrapper rather than nested tabs/categories to parse. */
    .sw-tile-grid {
        display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 12px; margin-bottom: 12px;
    }

#bsm-sw-wrapper .sw-tile {
        border-radius: var(--bsm3-radius-primary-cards); padding: 20px 12px;
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
        cursor: pointer; user-select: none;
        transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

#bsm-sw-wrapper .sw-tile:hover { transform: translateY(-4px); }

#bsm-sw-wrapper .sw-tile-icon {
        width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    }

#bsm-sw-wrapper .sw-tile-icon svg { width: 22px; height: 22px; stroke-width: 1.8px; }

#bsm-sw-wrapper .sw-tile-title { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#bsm-sw-wrapper .sw-tile-sub { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.35; }

#bsm-sw-wrapper /* Shared "back to menu" link,
#bsm-sw-wrapper shown once a tile has been opened
       (.sw-section-only above). Same visual language as .sw-back-nav. */
    .sw-back-to-menu {
        align-items: center; gap: 8px; cursor: pointer; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-medium-14px-use-on-text);
        margin-bottom: 20px; transition: color 0.2s ease;
    }

#bsm-sw-wrapper .sw-back-to-menu svg { width: 18px; height: 18px; stroke-width: 2px; }

#bsm-sw-wrapper .content-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px; margin-bottom: 12px;
    }

#bsm-sw-wrapper .content-card:hover { transform: translateY(-4px); }

#bsm-sw-wrapper .content-card h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 8px; }

#bsm-sw-wrapper .content-card p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); line-height: 1.5; margin-bottom: 18px; }

#bsm-sw-wrapper .card-meta span { font-size: var(--bsm3-text-small-12px-use-on-text); opacity: var(--bsm3-opacity-medium); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

#bsm-sw-wrapper .card-tag {
        padding: 4px 10px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize; letter-spacing: 0.04em; margin-bottom: 14px;
        display: inline-block; align-self: flex-start;
    }

#bsm-sw-wrapper .play-btn:hover { transform: scale(1.08); }

#bsm-sw-wrapper .scene-poster::after {
        content: ""; position: absolute; inset: 0;
    }

#bsm-sw-wrapper .scene-poster-label span { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); opacity: var(--bsm3-opacity-high); }

#bsm-sw-wrapper .scene-poster-label .play-btn { width: 52px; height: 52px; }

#bsm-sw-wrapper .scene-poster-label .play-btn svg { width: 20px; height: 20px; }

#bsm-sw-wrapper .content-card.scene-card h3,
#bsm-sw-wrapper .content-card.scene-card p { padding-left: 8px; padding-right: 8px; }

#bsm-sw-wrapper .content-card.scene-card .card-tag,
#bsm-sw-wrapper .content-card.scene-card .card-meta { margin-left: 8px; margin-right: 8px; }

#bsm-sw-wrapper /* =====================================================================
       CINEMATIC VIDEO OVERLAY — copied 1:1 from the Week 4 Day 6 CBT-I
       module (cbti_module_week4_day6.php) so Sleep Scenes opens the exact
       same full-screen player,
#bsm-sw-wrapper instead of an inline <video> per card.
       ===================================================================== */
    #bsm-cinematic-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        z-index: 999999; display: none; overflow: hidden;
    }

#bsm-sw-wrapper #bsm-cinematic-overlay.show { display: block; }

#bsm-sw-wrapper #bsm-cinematic-overlay .moon {
        position: absolute; top: 60px; right: 80px; width: 120px; height: 120px;
        border-radius: 50%; overflow: hidden;
    }

#bsm-sw-wrapper #bsm-cinematic-overlay .moon::after {
        content: ""; position: absolute; top: 0; left: 30px; width: 120px; height: 120px;
        border-radius: 50%;
    }

#bsm-sw-wrapper #bsm-cinematic-overlay .star {
        position: absolute; border-radius: 50%; width: 4px; height: 4px;
        opacity: var(--bsm3-opacity-high); animation: sp-bsm-sw-wrapper-bsm-sw-twinkle 2s infinite alternate; transition: opacity 1s ease;
    }

#bsm-sw-wrapper #bsm-cinematic-overlay .star.fade-out { animation: none; opacity: 0; }@keyframes sp-bsm-sw-wrapper-bsm-sw-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

#bsm-sw-wrapper #bsm-cinematic-video {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: contain; visibility: hidden; opacity: 0;
        transition: opacity 1s ease;
    }

#bsm-sw-wrapper #bsm-cinematic-video.visible { visibility: visible; opacity: 1; }

#bsm-sw-wrapper #bsm-video-overlay-title {
        position: absolute; top: 20px; left: 60px; z-index: 9999; padding: 8px 12px; font-size: var(--bsm3-text-large-16px-use-on-text); border-radius: var(--bsm3-radius-mini-badges);
        pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
    }

#bsm-sw-wrapper #bsm-video-overlay-title.show { opacity: 1; }

#bsm-sw-wrapper #bsm-video-close {
        position: absolute; top: 20px; left: 20px; z-index: 10000; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: var(--bsm3-radius-mini-badges); transition: background 0.2s;
    }

#bsm-sw-wrapper #bsm-video-close svg { width: 70%; height: 70%; }

#bsm-sw-wrapper #bsm-video-controls {
        position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
        z-index: 9999; display: flex; gap: 20px;
    }

#bsm-sw-wrapper #bsm-video-controls button {
        font-size: var(--bsm3-text-large-16px-use-on-text); padding: 10px 20px; border-radius: var(--bsm3-radius-mini-badges); cursor: pointer;
        font-family: inherit;
    }

#bsm-sw-wrapper #bsm-progress-container {
        position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
        width: 80%; height: 6px;
        border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; z-index: 9999; cursor: pointer;
    }

#bsm-sw-wrapper #bsm-progress-bar {
        height: 100%; width: 0%; transition: width 0.2s linear;
    }

#bsm-sw-wrapper .sound-builder-block h2 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-align: center; margin-bottom: 10px; }

#bsm-sw-wrapper .sound-builder-block .description { opacity: var(--bsm3-opacity-medium); text-align: center; max-width: var(--bsm3-width-standard); margin: 0 auto 32px auto; font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; }

#bsm-sw-wrapper .builder-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

#bsm-sw-wrapper .control-group label { display: block; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 12px; }

#bsm-sw-wrapper input[type="range"] { width: 100%; height: 6px; border-radius: var(--bsm3-radius-mini-badges); appearance: none; }

#bsm-sw-wrapper input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; }

@media (max-width: 900px) {
#bsm-sw-wrapper .sw-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
#bsm-sw-wrapper .content-grid { grid-template-columns: 1fr; }
#bsm-sw-wrapper .builder-controls { grid-template-columns: 1fr; }
#bsm-sw-wrapper .search-filter-bar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 900px) {
#bsm-sw-wrapper .sw-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#bsm-sw-wrapper .sw-tools-header h3 { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-bottom: 6px; }

#bsm-sw-wrapper .sw-tools-header p { font-size: var(--bsm3-text-body-use-on-reading-text); opacity: var(--bsm3-opacity-medium); }

#bsm-sw-wrapper .sw-tool-item:hover { transform: translateX(4px); }

#bsm-sw-wrapper .sw-tool-item-icon svg { width: 20px; height: 20px; stroke-width: 2px; }

#bsm-sw-wrapper /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }


/* ===== migrated from sleep_platform/sleep_planner/sleep_planner.css (scoped under #np-screen-builder) ===== */



















































































/* ====================================================================
   SLEEP PLATFORM BATCH 2 - final 11 files, migrated 26 aug 2026
   These are the last of the 74 sleep_platform/ files. Each was a
   harder case (no existing id, sibling elements needing a wrapper,
   or a pre-existing bug) that got a proper fix instead of being
   skipped. sleep_top_nav.php also had a real bug fixed here: its
   CSS never rendered before because the <style> tag was trapped
   inside an HTML comment that never closed.
   ==================================================================== */

/* ===== migrated from sleep_platform/pages/accessories.css (scoped under #sp-accessories-root) ===== */
#sp-accessories-root /* --- 1. SHOP CANVAS --- */
    .shop-container { 
        width: 100%; max-width: var(--bsm3-width-extra-wide); margin: 0 auto; padding: 20px 40px;
        animation: sp-sp-accessories-root-shopFadeIn 1.2s ease-out; display: flex; flex-direction: column; 
        gap: 40px;
    }

#sp-accessories-root /* --- 2. NAVIGATION HEADER --- */
    .shop-header {
        display: flex; justify-content: space-between; align-items: center;
        padding-bottom: 20px;
    }

#sp-accessories-root .back-btn { padding: 12px 24px; border-radius: var(--bsm3-radius-primary-cards); cursor: pointer;
        font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; letter-spacing: 0.1em; transition: 0.3s;
        display: flex; align-items: center; gap: 8px;
    }

#sp-accessories-root .shop-title { text-align: center; flex-grow: 1; }

#sp-accessories-root .shop-title h1 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0; }

#sp-accessories-root .shop-title p { font-size: var(--bsm3-text-body-use-on-reading-text); text-transform: capitalize; letter-spacing: 0.3em; opacity: var(--bsm3-opacity-medium); }

#sp-accessories-root /* --- 3. PRODUCT GRID --- */
    .products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; }

#sp-accessories-root .product-card { border-radius: var(--bsm3-radius-pills);
        padding: 45px; display: flex; flex-direction: column; gap: 25px;
        transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
    }

#sp-accessories-root /* IMAGE SANITIZATION (Amber Glow Fix) */
    .product-img-wrap {
        width: 100%; height: 280px; border-radius: var(--bsm3-radius-primary-cards); overflow: hidden; display: flex; align-items: center; justify-content: center;
    }

#sp-accessories-root .product-img-wrap img {
        display: block; width: 100%; height: 100%; object-fit: contain; padding: 20px; 
        transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

#sp-accessories-root .product-card:hover { transform: translateY(-8px); }

#sp-accessories-root .product-card:hover img { transform: scale(1.05); }

#sp-accessories-root .product-info h2 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin: 0; }

#sp-accessories-root .product-tag { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.2em; margin-bottom: -10px; }

#sp-accessories-root .clinical-logic {
        font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        padding: 20px; border-radius: var(--bsm3-radius-primary-cards);
    }

#sp-accessories-root .acquire-btn {
        margin-top: 10px; padding: 18px; border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-medium-14px-use-on-text); 
        text-transform: capitalize; letter-spacing: 0.2em; font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer;
        transition: 0.4s; text-align: center;
    }@keyframes sp-sp-accessories-root-shopFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
#sp-accessories-root .products-grid { grid-template-columns: 1fr; }
#sp-accessories-root .shop-header { flex-direction: column; gap: 20px; }
}


/* ===== migrated from sleep_platform/pages/learn.css (scoped under #sp-learn-root) ===== */
#sp-learn-root /* 1. PAGE WRAPPER */
    .learn-wrapper { animation: fadeIn 0.5s ease forwards; width: 100%; padding-bottom: 120px; }

#sp-learn-root /* 2. HEADER & NAV */
    .learn-header { margin-bottom: 30px; }

#sp-learn-root .learn-header h1 { font-family: var(--bsm3-font-body); font-size: var(--bsm3-size-page-title-24px-use-on-h1); margin: 0 0 10px 0; }

#sp-learn-root .learn-header p { font-size: var(--bsm3-text-large-16px-use-on-text); max-width: var(--bsm3-width-narrow); }


#sp-learn-root /* 3. DIAGRAM GRID */
    .mechanics-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 25px !important; margin-bottom: 40px !important; }

#sp-learn-root /* 4. THE CARD RULE - FORCED VISIBILITY (ADDED FIX) */
    .learn-wrapper .insight-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

#sp-learn-root /* Exception: Titles inside cards should be slightly bolder/darker if needed */
    .learn-wrapper .term-highlight { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

#sp-learn-root /* 6. CSS AIRWAY VISUALIZATION */
    .airway-visual {
        height: 180px; /* Keep visual background dark for contrast */
        border-radius: var(--bsm3-radius-primary-cards);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

#sp-learn-root /* The "Throat" pipe */
    .pipe { width: 60px; height: 100%; position: relative; }

#sp-learn-root /* The Airflow Arrows */
    .flow-arrow {
        position: absolute;
        width: 4px; 
        height: 20px; 
        left: 50%; 
        transform: translateX(-50%);
        animation: sp-sp-learn-root-flowDown 1.5s infinite linear;
        border-radius: var(--bsm3-radius-mini-badges);
    }

#sp-learn-root .flow-arrow:nth-child(2) { animation-delay: 0.5s; }

#sp-learn-root .flow-arrow:nth-child(3) { animation-delay: 1.0s; }

#sp-learn-root /* The Collapse Block */
    .blockage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 0px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        opacity: var(--bsm3-opacity-high);
        transition: height 2s ease-in-out;
    }

#sp-learn-root /* Animation states */
    .visual-blocked .blockage { height: 70px; animation: sp-sp-learn-root-pulseBlock 2s infinite alternate; }

#sp-learn-root .visual-blocked .flow-arrow { animation: sp-sp-learn-root-flowStop 1.5s infinite; }@keyframes sp-sp-learn-root-flowDown {
    0% { top: -20px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}@keyframes sp-sp-learn-root-flowStop {
    0% { top: -20px; opacity: 1; }
    50% { top: 45%; opacity: 1; }
    100% { top: 45%; opacity: 0; }
}@keyframes sp-sp-learn-root-pulseBlock {
    from { height: 60px; }
    to { height: 75px; }
}

#sp-learn-root /* 7. CONTENT TYPOGRAPHY */
    .term-highlight { font-size: var(--bsm3-text-large-16px-use-on-text); display: block; margin-bottom: 5px; }

#sp-learn-root .def-text { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.6; }

#sp-learn-root /* 8. COMPARISON TABLE */
    .osa-csa-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 15px !important; margin-top: 20px !important; }

#sp-learn-root .type-col { padding: 20px !important; border-radius: var(--bsm3-radius-primary-cards)!important; text-align: center; }

#sp-learn-root .type-badge { display: inline-block; padding: 4px 12px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; margin-bottom: 15px; }

@media (max-width: 900px) {
#sp-learn-root .mechanics-grid,
#sp-learn-root .osa-csa-grid { grid-template-columns: 1fr !important; }
}

#sp-learn-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-margin-bottom-20px { margin-bottom: 20px; }

#sp-learn-root .u-text-align-center-2 { text-align: center; }


/* ===== migrated from sleep_platform/pages/panic.css (scoped under #sp-panic-root) ===== */
#sp-panic-root body {
margin:0;
font-family: var(--bsm3-font-body);
}

#sp-panic-root .container {
max-width:var(--bsm3-width-wide);
margin:auto;
padding:40px;
}

#sp-panic-root h1 {
font-family: var(--bsm3-font-body);
font-size: var(--bsm3-text-large-16px-use-on-text);
margin-bottom:10px;
}

#sp-panic-root .subtitle {
opacity:var(--bsm3-opacity-high);
margin-bottom:35px;
}

#sp-panic-root .grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

#sp-panic-root .card {
border-radius: var(--bsm3-radius-primary-cards);
padding:25px;
}

#sp-panic-root .card h2 {
font-family: var(--bsm3-font-body);
margin-top:0;
}

#sp-panic-root button {
padding:10px 16px;
border-radius:var(--bsm3-radius-status-cards);
font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
cursor:pointer;
margin-top:10px;
}

#sp-panic-root button:hover {
opacity:var(--bsm3-opacity-high);
}

#sp-panic-root .reassurance {
padding:15px;
border-radius: var(--bsm3-radius-status-cards);
margin-top:15px;
font-size:var(--bsm3-text-body-use-on-reading-text);
line-height:1.6;
}

#sp-panic-root textarea {
width:100%;
height:80px;
border-radius: var(--bsm3-radius-status-cards);
padding:10px;
margin-top:12px;
}

#sp-panic-root .response {
margin-top:18px;
padding:15px;
border-radius: var(--bsm3-radius-status-cards);
font-size:var(--bsm3-text-body-use-on-reading-text);
line-height:1.6;
}

#sp-panic-root .audio-box {
padding:12px;
border-radius: var(--bsm3-radius-status-cards);
margin-top:15px;
}

#sp-panic-root .night-interface {
border-radius: var(--bsm3-radius-primary-cards);
padding:18px;
margin-top:15px;
}

#sp-panic-root .metric {
font-size:var(--bsm3-text-medium-14px-use-on-text);
opacity:var(--bsm3-opacity-high);
margin-bottom:6px;
}


/* ===== migrated from sleep_platform/pages/research.css (scoped under #sp-research-root) ===== */
#sp-research-root /* 1. GLOBAL LAYOUT */
    .research-wrapper { 
        width: 100%; 
        max-width: var(--bsm3-width-wide); 
        margin: 0 auto;
        padding-bottom: 150px; 
    }



#sp-research-root /* 3. HERO SECTION */
    .res-header { margin-bottom: 80px; }

#sp-research-root .res-header h1 { 
        font-family: var(--bsm3-font-body); 
        font-size: var(--bsm3-size-page-title-24px-use-on-h1); 
        margin: 0 0 25px 0; 
        line-height: 1.05; 
        letter-spacing: -0.02em;
    }

#sp-research-root .res-intro {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        max-width: var(--bsm3-width-wide);
        padding-left: 25px;
        margin-left: 5px;
    }

#sp-research-root /* 4. RESEARCH GRID SYSTEM */
    .topic-section { margin-bottom: 80px; }

#sp-research-root .topic-title {
        font-size: var(--bsm3-text-medium-14px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.2em;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: block;
        opacity: var(--bsm3-opacity-high);
    }

#sp-research-root .paper-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 30px; 
    }

#sp-research-root /* 5. PAPER CARD DESIGN (Glassmorphism) */
    .paper-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 35px !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

#sp-research-root .paper-card:hover {
        transform: translateY(-5px);
    }

#sp-research-root .journal-tag {
        font-size: var(--bsm3-text-small-12px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.1em;
        margin-bottom: 15px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: flex;
        align-items: center;
        gap: 8px;
    }

#sp-research-root .paper-title {
        font-family: var(--bsm3-font-body);
        font-size: var(--bsm3-text-large-16px-use-on-text);
        margin-bottom: 15px;
        line-height: 1.3;
    }

#sp-research-root .paper-summary {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        line-height: 1.6;
        opacity: var(--bsm3-opacity-high);
        margin-bottom: 25px;
        flex-grow: 1; /* Pushes button to bottom */
    }

#sp-research-root /* 6. LINK BUTTONS */
    .btn-source {
        padding: 10px 20px; 
        border-radius: var(--bsm3-radius-pills);
        font-size: var(--bsm3-text-small-12px-use-on-text);
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        text-transform: capitalize;
        letter-spacing: 0.05em;
        align-self: flex-start;
        cursor: pointer;
        transition: 0.3s;
    }


/* ===== migrated from sleep_platform/pages/symptoms.css (scoped under #sp-symptoms-root) ===== */
#sp-symptoms-root /* 1. GLOBAL LAYOUT & ANIMATION */
    .symptoms-wrapper { 
        width: 100%; 
        max-width: var(--bsm3-width-wide); 
        margin: 0 auto;
        padding-bottom: 150px; 
    }

#sp-symptoms-root /* 3. HERO SECTION */
    .sym-header { margin-bottom: 100px; position: relative; padding-top: 40px; }

#sp-symptoms-root .sym-header h1 { 
        font-family: var(--bsm3-font-body); 
        font-size: var(--bsm3-size-page-title-24px-use-on-h1); 
        margin: 0 0 30px 0; 
        line-height: 1.05; 
        letter-spacing: -0.02em;
    }

#sp-symptoms-root .sym-subheading {
        font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
        line-height: 1.4;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
        display: block;
        max-width: var(--bsm3-width-wide);
    }

#sp-symptoms-root .sym-intro-text {
        font-size: var(--bsm3-text-large-16px-use-on-text);
        opacity: var(--bsm3-opacity-high);
        line-height: 1.8;
        max-width: var(--bsm3-width-wide);
        padding-left: 25px;
        margin-left: 5px;
    }

#sp-symptoms-root .sym-reassurance {
        font-size: var(--bsm3-text-body-use-on-reading-text);
        font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
        margin-top: 20px;
        display: block;
        margin-left: 30px; 
    }

#sp-symptoms-root /* 4. SECTION: NIGHT SYMPTOMS (RESTORED ALL BULLETS) */
    .section-night { margin-bottom: 100px; }

#sp-symptoms-root .section-title-sm {
        font-size: var(--bsm3-text-medium-14px-use-on-text);
        text-transform: capitalize;
        letter-spacing: 0.2em;
        margin-bottom: 30px;
        font-weight: var(--bsm3-weight-bold-700-use-on-h1);
        display: block;
    }

#sp-symptoms-root .night-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        column-gap: 60px; 
        row-gap: 30px; 
    }

#sp-symptoms-root .night-item {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: var(--bsm3-text-large-16px-use-on-text);
        font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
        padding-bottom: 20px; 
    }

#sp-symptoms-root .night-icon { font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-high); }

#sp-symptoms-root /* 5. SECTION: THE 3 ZONES */
    .three-col-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 40px !important; margin-bottom: 100px !important; }

#sp-symptoms-root .zone-card { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 40px !important; display: flex; flex-direction: column; transition: transform 0.4s ease; }

#sp-symptoms-root .zone-card:hover { transform: translateY(-10px); }

#sp-symptoms-root .zone-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 5px; }

#sp-symptoms-root .zone-sub { font-size: var(--bsm3-text-body-use-on-reading-text); text-transform: capitalize; letter-spacing: 0.05em; opacity: var(--bsm3-opacity-medium); margin-bottom: 30px; display: block; }

#sp-symptoms-root .zone-list { list-style: none; padding: 0; margin: 0; }

#sp-symptoms-root .zone-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 18px; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); line-height: 1.6; opacity: var(--bsm3-opacity-high); }

#sp-symptoms-root .zone-icon { font-size: var(--bsm3-text-medium-14px-use-on-text); margin-top: 6px; }

#sp-symptoms-root /* 6. SECTION: ADRENALINE */
    .adrenaline-block { margin-bottom: 100px; padding: 60px; border-radius: 0 var(--bsm3-radius-pills) var(--bsm3-radius-pills) 0; position: relative; }

#sp-symptoms-root .adren-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 25px; }

#sp-symptoms-root .adren-text { font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.8; max-width: var(--bsm3-width-wide); opacity: var(--bsm3-opacity-high); }

#sp-symptoms-root .highlight-text { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

#sp-symptoms-root /* 7. SECTION: RISK FACTORS (RESTORED ALL BULLETS) */
    .risk-section { margin-bottom: 100px; }

#sp-symptoms-root .risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

#sp-symptoms-root .risk-col { display: flex; flex-direction: column; gap: 15px; }

#sp-symptoms-root .risk-item { font-size: var(--bsm3-text-large-16px-use-on-text); padding: 15px 0; display: flex; align-items: center; gap: 15px; }

#sp-symptoms-root .dot { width: 6px; height: 6px; border-radius: 50%; opacity: var(--bsm3-opacity-medium); }

#sp-symptoms-root /* 8. SECTION: CTA (UPDATED) */
    .cta-container { text-align: center; padding: 80px 40px; border-radius: var(--bsm3-radius-primary-cards); position: relative; overflow: hidden; }

#sp-symptoms-root .cta-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; opacity: var(--bsm3-opacity-medium); }

#sp-symptoms-root .cta-title { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); margin-bottom: 20px; }

#sp-symptoms-root .cta-desc { font-size: var(--bsm3-text-large-16px-use-on-text); opacity: var(--bsm3-opacity-high); max-width: var(--bsm3-width-narrow); margin: 0 auto 40px auto; }

#sp-symptoms-root .btn-premium { padding: 20px 50px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: capitalize; letter-spacing: 0.1em; }

#sp-symptoms-root .btn-premium:hover { transform: scale(1.02); }@keyframes sp-sp-symptoms-root-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
#sp-symptoms-root .three-col-grid,
#sp-symptoms-root .night-grid,
#sp-symptoms-root .risk-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
}


/* ===== migrated from sleep_platform/pages/verify.css (scoped under #sp-verify-root) ===== */
#sp-verify-root /* 1. NUCLEAR VISIBILITY LOCK & BASIC SETUP */
    #bsm-app-root .verify-wrapper { 
        animation: sp-sp-verify-root-fadeIn 0.5s ease forwards; 
        width: 100%; 
        padding-top: 120px; /* INCREASED TOP SPACE FOR HERO FEEL */
        padding-bottom: 200px; 
    }

#sp-verify-root #bsm-app-root .insight-card {
        border-radius: var(--bsm3-radius-primary-cards)!important;
        padding: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
    }

#sp-verify-root /* Force all text elements to be visible */
    #bsm-app-root h1,
#sp-verify-root #bsm-app-root h2,
#sp-verify-root #bsm-app-root h3,
#sp-verify-root #bsm-app-root h4,
#sp-verify-root #bsm-app-root p,
#sp-verify-root #bsm-app-root li,
#sp-verify-root #bsm-app-root strong,
#sp-verify-root #bsm-app-root summary {
        visibility: visible !important;
        opacity: 1 !important;
    }

#sp-verify-root /* 2. TYPOGRAPHY & INTRO */
    #bsm-app-root h1 { font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; margin: 0; line-height: 1.1; }

#sp-verify-root #bsm-app-root .verify-sub { font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height: 1.6; max-width: var(--bsm3-width-wide); margin-top: 15px; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

#sp-verify-root #bsm-app-root .verify-framing { font-size: var(--bsm3-text-large-16px-use-on-text); max-width: var(--bsm3-width-wide); margin: 30px 0 20px 0; line-height: 1.6; opacity: var(--bsm3-opacity-high); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); padding-left: 20px; }


#sp-verify-root /* SIGNALS ICON ROW */
    .signals-inline-row { display: flex; gap: 40px; margin: 30px 0 60px 22px; }

#sp-verify-root .signal-item-min { display: flex; align-items: flex-start; gap: 15px; max-width: var(--bsm3-width-standard); }

#sp-verify-root .signal-icon-min { width: 24px; height: 24px; stroke-width: 2; flex-shrink: 0; margin-top: 4px; }

#sp-verify-root .signal-text-min h4 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin: 0 0 5px 0 !important; font-family: var(--bsm3-font-body) !important; }

#sp-verify-root .signal-text-min p { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.4; opacity: var(--bsm3-opacity-high); margin: 0 !important; }

#sp-verify-root /* 3. LAYOUT GRIDS */
    .assessment-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; margin-bottom: 50px !important; align-items: stretch !important; }

#sp-verify-root /* 4. DEVICE LISTS */
    .split-list { list-style: none; padding: 0; margin: 15px 0; }

#sp-verify-root .split-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-align: left; font-size: var(--bsm3-text-body-use-on-reading-text); }

#sp-verify-root .check-icon { font-weight: var(--bsm3-weight-bold-700-use-on-h1); flex-shrink: 0; }

#sp-verify-root .relevance-warning { border-radius: var(--bsm3-radius-primary-cards); padding: 15px; margin-top: 15px; font-size: var(--bsm3-text-body-use-on-reading-text); }

#sp-verify-root /* 5. TECHNICAL ACCORDION */
    .tech-accordion { margin-bottom: 60px; padding-top: 10px; }

#sp-verify-root details summary { cursor: pointer; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 0.15em; font-size: var(--bsm3-text-body-use-on-reading-text); padding: 15px 0; list-style: none; }

#sp-verify-root .table-scroll-wrapper { width: 100%; overflow-x: auto; margin-top: 20px; border-radius: var(--bsm3-radius-primary-cards); }

#sp-verify-root .tech-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: auto; min-width: 900px; }

#sp-verify-root .tech-table th { padding: 18px; font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; }

#sp-verify-root .tech-table td { padding: 14px 18px; font-size: var(--bsm3-text-body-use-on-reading-text); vertical-align: top; }

#sp-verify-root .tech-label { font-weight: var(--bsm3-weight-bold-700-use-on-h1); opacity: var(--bsm3-opacity-medium); text-transform: capitalize; font-size: var(--bsm3-text-small-12px-use-on-text); }

#sp-verify-root /* 6. ASSESSMENT CARDS (RE-LABELED BUTTONS) */
    .assess-card { padding: 30px !important; transition: transform 0.3s ease; justify-content: flex-start !important; min-height: 480px; }

#sp-verify-root .assess-card:hover { transform: translateY(-5px); }

#sp-verify-root .assess-card h3 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 10px !important; font-family: var(--bsm3-font-body) !important; }

#sp-verify-root .assess-card p { font-size: var(--bsm3-text-body-use-on-reading-text)!important; margin-bottom: 15px !important; line-height: 1.5; opacity: var(--bsm3-opacity-high); }

#sp-verify-root .gold-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-small-12px-use-on-text); padding: 6px 16px; border-radius: var(--bsm3-radius-pills); text-transform: capitalize; letter-spacing: 0.1em; z-index: 10; }

#sp-verify-root .level-label { text-align: center; font-size: var(--bsm3-text-small-12px-use-on-text); text-transform: capitalize; letter-spacing: 0.1em; font-weight: var(--bsm3-weight-bold-700-use-on-h1); margin-top: 15px; }

#sp-verify-root .btn-card { width: 100%; padding: 12px; border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); cursor: pointer; text-transform: capitalize; margin-top: auto; transition: 0.3s; }

@media (max-width: 900px) {
#sp-verify-root .assessment-grid { grid-template-columns: 1fr !important; }
#sp-verify-root .signals-inline-row { flex-direction: column; gap: 20px; }
}@keyframes sp-sp-verify-root-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ===== migrated from sleep_platform/pages/wearables.css (scoped under #sp-wearables-root) ===== */
#sp-wearables-root .wave-bar { width: 8px; height: 20px; border-radius: var(--bsm3-radius-status-cards); animation: sp-sp-wearables-root-wavePulse 2.5s infinite ease-in-out; }@keyframes sp-sp-wearables-root-wavePulse {
    0%, 100% { height: 20px; opacity: var(--bsm3-opacity-medium); }
    50% { height: 50px; opacity: 1; }
}


/* ===== migrated from sleep_platform/pages/welcome.css (scoped under #sp-welcome-root) ===== */
#sp-welcome-root /* --- 1. STAR & BACKGROUND ENHANCEMENT --- */
    #bsm-app-root .star,
#sp-welcome-root #bsm-app-root [class*="star"] {
        opacity: var(--bsm3-opacity-high) !important;
        animation: sp-sp-welcome-root-starPulse 4s infinite ease-in-out !important;
    }@keyframes sp-sp-welcome-root-starPulse {
    0%, 100% { opacity: var(--bsm3-opacity-medium); transform: scale(1); }
    50% { opacity: var(--bsm3-opacity-high); transform: scale(1.2); }
}

#sp-welcome-root .cta-button:hover { transform: translateY(-5px); }

#sp-welcome-root /* --- 4. VIDEO MODAL --- */
    .modal-overlay { 
        display: none; position: fixed; inset: 0; z-index: 999999;
        justify-content: center; align-items: center; 
    }

#sp-welcome-root .modal-overlay.active { display: flex; }

#sp-welcome-root .modal-box { 
        position: relative; width: 85vw; max-width: var(--bsm3-width-wide); aspect-ratio: 16 / 9; border-radius: var(--bsm3-radius-primary-cards); overflow: hidden;
    }

#sp-welcome-root #vPlayer { width: 100%; height: 100%; object-fit: cover; }

#sp-welcome-root .close-btn { position: absolute; top: 25px; right: 35px; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; z-index: 100; opacity: var(--bsm3-opacity-medium); transition: 0.3s; }

#sp-welcome-root .close-btn:hover { opacity: 1; transform: rotate(90deg); }@keyframes sp-sp-welcome-root-welcomeFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ===== migrated from sleep_platform/sleep_planner/mySleepTherapiesDashboard.css (scoped under #sp-mysleeptherapies-root) ===== */
/* Day/Night/Sleep switch -- My Sleep Therapies. Same pattern as Sleep
   Planner above: Night is already the default look, Day and Sleep are
   additive-only color overrides. */
/* Matches .np-wrapper (Sleep Planner) pairing exactly, 16 sep 2026 --
   My Sleep Therapies was missed when Sleep Planner's Night/Sleep looks
   were set, so Sleep still showed the peachy look and Night had no rule
   at all. Both pages share the same nav + bsm_sleep_theme cookie, so
   they need to agree: Night = peachy apricot-on-black, Sleep = plain
   black/white, same as Sleep Planner. */


#sp-mysleeptherapies-root .mtd-wrap .mtd-content { padding: 0; }   /* 24 Oct 2026 (Chris): was 20px -- too much white space */

#sp-mysleeptherapies-root .mtd-wrap .mtd-intro { font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; margin-top: 0; margin-bottom: 20px; border-radius: var(--bsm3-radius-status-cards); padding: 12px 16px; }

#sp-mysleeptherapies-root .mtd-panel.active { display: block; }

#sp-mysleeptherapies-root .mtd-search-controls-wrap { display: flex; gap: 8px; width: 100%; align-items: stretch; margin-bottom: 20px; flex-wrap: wrap; }

#sp-mysleeptherapies-root .mtd-card-row2.mtd-row2-2col { grid-template-columns: 1fr 1fr; }

#sp-mysleeptherapies-root .mtd-tag-badge,
#sp-mysleeptherapies-root .mtd-btn { padding: 6px 10px; border-radius: var(--bsm3-radius-mini-badges); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-family: inherit; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; cursor: default; }

#sp-mysleeptherapies-root .capacity-wrapper { padding: 15px 20px; border-radius: var(--bsm3-radius-status-cards); margin-bottom: 20px; }

#sp-mysleeptherapies-root .cap-header { display: flex; justify-content: space-between; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); margin-bottom: 10px; }

#sp-mysleeptherapies-root .cap-bar-bg { height: 12px; border-radius: var(--bsm3-radius-mini-badges); overflow: hidden; width: 100%; }

#sp-mysleeptherapies-root .cap-bar-fill { height: 100%; width: var(--cap-fill-pct, 0%); transition: 0.3s; }

#sp-mysleeptherapies-root .mtd-dropdown-toggle .mtd-chevron { font-size: var(--bsm3-text-small-12px-use-on-text); flex-shrink: 0; transition: 0.15s; }

#sp-mysleeptherapies-root .mtd-dropdown-wrap.open .mtd-chevron { transform: rotate(180deg); }

#sp-mysleeptherapies-root .mtd-dropdown-wrap.open .mtd-dropdown-menu { display: block; }

@media(max-width: 900px) {
#sp-mysleeptherapies-root .mtd-search-controls-wrap { flex-direction: column; }
#sp-mysleeptherapies-root .mtd-dropdown-wrap,
#sp-mysleeptherapies-root .mtd-dropdown-toggle { width: 100%; }
}

#sp-mysleeptherapies-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center { text-align:center; }

#sp-mysleeptherapies-root .u-margin-bottom-10px { margin-bottom:10px; }

#sp-mysleeptherapies-root .u-text-align-left { text-align:left; }

#sp-mysleeptherapies-root .u-font-size-18px-flex-shrink-0-margin-top { font-size:var(--bsm3-text-large-16px-use-on-text); flex-shrink:0; margin-top:2px; }

#sp-mysleeptherapies-root .u-display-flex-flex-direction-column-gap-4 { display:flex; flex-direction:column; gap:4px; flex:1; text-align:left; }

#sp-mysleeptherapies-root .u-padding-top-0 { padding-top:0; }

#sp-mysleeptherapies-root .u-display-inline-block-background-e6f2f2-c { display:inline-block; padding:8px 16px; border-radius:var(--bsm3-radius-status-cards); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text); }


/* ===== migrated from sleep_platform/sleep_planner/show_sleep_plan_renderer.css (scoped under #sp-sleeprenderer-root) ===== */

#sp-sleeprenderer-root /* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center-color-b3402a-padding-4 { text-align:center; padding:40px; }


/* ===== migrated from sleep_platform/sleep_planner/sleep_top_nav.css (scoped under #sp-topnav-root) ===== */

#sp-topnav-root * { box-sizing: border-box; }

#sp-topnav-root .np-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; position: sticky; top: 0; z-index: 1000; }

#sp-topnav-root .np-brand h1 { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }

#sp-topnav-root .np-nav-btn { padding: 8px 16px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s;}

/* ===== migrated from sleep/sleep-wellness-grid.php (scoped: .page-slug-sleep-wellness-grid) ===== */


/* ===== migrated from sleep/sleepObjectives.php (scoped: .page-slug-sleep-objectives) ===== */
.page-slug-sleep-objectives .bsm-form-container {
    max-width: var(--bsm3-width-narrow);
    margin: 0 auto;
  }

/* ===== migrated from sleep/sleepApneaPathway.php (scoped: .page-slug-sleep-apnea-pathway) ===== */
.page-slug-sleep-apnea-pathway .bsm-form-container {
    max-width: var(--bsm3-width-narrow);
    margin: 0 auto;
	padding:15px;
  }

.page-slug-sleep-apnea-pathway .bsm-form-nav {
    text-align: right; /* align buttons and page number to the right */
    margin-bottom: 20px;
  }

.page-slug-sleep-apnea-pathway .bsm-form-nav-buttons {
    display: inline-flex;
    gap: 8px;
  }

.page-slug-sleep-apnea-pathway .bsm-form-page-number-box {
	  width:100%;
	 
  }

.page-slug-sleep-apnea-pathway .bsm-form-page-number {
    display: block;
    margin-top: 6px; /* ensures it sits below the buttons */
    font-size: var(--bsm3-text-medium-14px-use-on-text);
	width:100px;
	float:right;
	text-align:center;	
  }

.page-slug-sleep-apnea-pathway .bsm-form-page { display: none; }

.page-slug-sleep-apnea-pathway .bsm-form-page.bsm-active { display: block; }

.page-slug-sleep-apnea-pathway /*check boxes*/
.bsm-indent {
  display: flex;
  flex-direction: column;   /* stack labels vertically */
  align-items: flex-start;  /* keep checkboxes aligned in one column */
  margin: 20px auto;
  padding-left: 40px;       /* add left margin for indentation */
}

.page-slug-sleep-apnea-pathway .bsm-indent label {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: var(--bsm3-text-large-16px-use-on-text);
}

.page-slug-sleep-apnea-pathway .bsm-indent input[type="checkbox"] {
  width: 24px;              /* larger checkbox */
  height: 24px;
  margin-right: 10px;       /* space between box and text */
  flex-shrink: 0;           /* prevents checkbox from shifting */
}

.page-slug-sleep-apnea-pathway .bsm-assessment {
    display: inline-block;                 /* black text */
    font-size: var(--bsm3-text-body-use-on-reading-text);          /* small font size */
    padding: 2px 4px;            /* tiny padding */
    border-radius: var(--bsm3-radius-mini-badges);          /* small rounded corners */
    margin-left: 6px;            /* space between label and box */
    white-space: nowrap;         /* prevent wrapping */
  }

.page-slug-sleep-apnea-pathway /* ==== Stage 3: extracted repeated inline styles ==== */
.u-display-none { display:none; }

.page-slug-sleep-apnea-pathway /* ==== Stage 3: extracted repeated inline styles ==== */
.u-text-align-center { text-align:center; }

/* ===== migrated from sleep/cbti_home.php (scoped: .page-slug-sleep-cbti-home) ===== */
.page-slug-sleep-cbti-home /* Full-width start buttons with extra spacing */
.bsm-btn-full {
  display: block;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 16px 20px;
  text-align: center;
  font-size: var(--bsm3-text-large-16px-use-on-text);
}

.page-slug-sleep-cbti-home /* Headings with stacked icons */
.bsm-card h4 {
  text-align: center;
  font-size: var(--bsm3-text-large-16px-use-on-text);
  margin-top: 10px;
}

.page-slug-sleep-cbti-home .bsm-icon {
  display: block;
  font-size: var(--bsm3-text-large-16px-use-on-text); /* bigger icons */
  margin-bottom: 8px;
}

/* ===== migrated from sleep/sleepIndex.php (scoped: .page-slug-sleep-home) ===== */
.page-slug-sleep-home /* Inline additions for collapsible details */
.bsm-point summary {
  cursor: pointer;
  font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

/* ===== migrated from sleep/cbti_video.php (scoped: .page-slug-sleep-cbti-home) -- linked only from cbti_home.php ===== */
body.page-slug-sleep-cbti-home {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  }

.page-slug-sleep-cbti-home .moon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.page-slug-sleep-cbti-home /* Stars */
.star {
  position: absolute;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  opacity: var(--bsm3-opacity-high);
  animation: sp-cbti_video-sleep-cbti-home-twinkle 2s infinite alternate;
  transition: opacity 1s ease;
}

.page-slug-sleep-cbti-home .star.fade-out {
  animation: none;
  opacity: 0;
}@keyframes sp-cbti_video-sleep-cbti-home-twinkle {
    from { opacity: var(--bsm3-opacity-low); }
    to { opacity: 1; }
}

.page-slug-sleep-cbti-home /* Message styling */
#sleepMessage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--bsm3-text-large-16px-use-on-text);
  font-family: var(--bsm3-font-body);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 99999;
}

.page-slug-sleep-cbti-home #sleepMessage.show {
  visibility: visible;
  opacity: 1;
}

.page-slug-sleep-cbti-home /* Action button overlay */
#practiceButton {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--bsm3-text-large-16px-use-on-text);
  font-family: var(--bsm3-font-body);
  border-radius: var(--bsm3-radius-status-cards);
  padding: 20px 30px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 99999;
}

.page-slug-sleep-cbti-home #practiceButton.show {
  visibility: visible;
  opacity: 1;
}

.page-slug-sleep-cbti-home .session-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}

.page-slug-sleep-cbti-home .session-video.visible {
  visibility: visible;
  opacity: 1;
}

.page-slug-sleep-cbti-home /* Overlay heading (title only,
.page-slug-sleep-cbti-home fades out) */
.video-overlay {
  position: fixed;
  top: 20px;
  left: 60px; /* shifted right so it doesn’t overlap home button */
  z-index: 9999;
  padding: 8px 12px;
  font-size: var(--bsm3-text-large-16px-use-on-text);
  border-radius: var(--bsm3-radius-mini-badges);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-slug-sleep-cbti-home .video-overlay.show { opacity: 1; }

.page-slug-sleep-cbti-home /* Permanent home button */
.video-home {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;
}

.page-slug-sleep-cbti-home .video-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--bsm3-radius-mini-badges);
}

.page-slug-sleep-cbti-home .video-home svg { width: 70%; height: 70%; }

.page-slug-sleep-cbti-home /* Control bar */
#controls {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 20px;
}

.page-slug-sleep-cbti-home #controls button {
  font-size: var(--bsm3-text-large-16px-use-on-text);
  padding: 10px 20px;
  border-radius: var(--bsm3-radius-mini-badges);
  cursor: pointer;
}

.page-slug-sleep-cbti-home /* Progress bar */
#progressContainer {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 6px;
  border-radius: var(--bsm3-radius-mini-badges);
  overflow: hidden;
  z-index: 9999;
}

.page-slug-sleep-cbti-home #progressBar {
  height: 100%;
  width: 0%;
  transition: width 0.2s linear;
}

/* ===== migrated from sleep/calcSmartLight.php (scoped: .page-slug-sleep-smart-light) -- NEW slug, added to $sleep_pages -- nested inside lightSmartSleep.php ===== */
.page-slug-sleep-smart-light .ls-slider {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: var(--bsm3-width-standard);
  height: 100vh;
  transition: right 0.35s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.page-slug-sleep-smart-light .ls-slider.active { right: 0; }

.page-slug-sleep-smart-light .ls-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
}

.page-slug-sleep-smart-light .ls-slider-content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-slug-sleep-smart-light .ls-btn { border-radius:var(--bsm3-radius-status-cards);
  padding:.55rem .85rem; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  cursor:pointer; margin:.25rem 0;
}

.page-slug-sleep-smart-light .ls-result { margin-top:1rem; font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

.page-slug-sleep-smart-light .ls-footnote {
  font-size: var(--bsm3-text-body-use-on-reading-text);
  margin-top:.25rem;
}

@media (max-width: 900px) {
.page-slug-sleep-smart-light .ls-slider { width: 100%; max-width: none; }
}

/* ===== migrated from sleep/lightSmartSleep.php (scoped: .page-slug-sleep-smart-light) -- NEW slug, added to $sleep_pages ===== */


/* ===== migrated from sleep/sleep_drugs.php (scoped: .page-slug-sleep-drugs) -- NEW slug, added to $sleep_pages ===== */
.page-slug-sleep-drugs /* immersive full‑screen video */
.session-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;        /* full width */
  height: auto;        /* scale height proportionally */
  max-height: 100vh;   /* don’t exceed viewport height */
  object-fit: contain;    /* black bar fills unused space */
}

/* ===== migrated from sleep/sleep_results.php (scoped: .page-slug-sleep-objectives) -- included inside sleepObjectives.php's #bsmPage1 ===== */
.page-slug-sleep-objectives .sleeppath-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;       /* keep side by side */
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
  }

.page-slug-sleep-objectives .sleeppath-tab {
    width: 33.33%;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 2px;
    text-align: center;
    transition: transform 0.3s ease;
  }

.page-slug-sleep-objectives .sleeppath-tab:hover {
    transform: translateY(-5px);
  }

.page-slug-sleep-objectives .sleeppath-emoji {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    margin-bottom: 10px;
  }

.page-slug-sleep-objectives .sleeppath-tab h3 {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    margin-bottom: 10px;
  }

.page-slug-sleep-objectives .sleeppath-tab p {
    margin: 8px 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
  }

.page-slug-sleep-objectives .sleeppath-tab a {
    width: 90%;
    display: block;
    margin: 6px auto;
    padding: 8px 14px;
    border-radius: var(--bsm3-radius-mini-badges);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    transition: background 0.3s ease;
  }

/* ===== migrated from sleep/admin_sleep_tools_crud.php -- likely dead per admin-links.php's own note ('no separate table/script') -- appended unscoped defensively ===== */
        body { font-family: var(--bsm3-font-body); margin: 0; padding: 20px; }
        
                                                
                                                        
                
                                                        
                                                            

/* ==== Stage 3: extracted repeated inline styles ==== */


/* ===== migrated from sleep/spo2_apnea_ranges_table.php -- no confirmed host page -- unique class .spo2-table-wrap, appended unscoped ===== */

  
  
  
  
  
  
     /* light blue */
     /* amber */
   /* darker amber */
     /* red */

  
  
  /* Mobile: stack rows as cards with labels */


/* ===== migrated from menus/menu_sleep.php (scoped: .page-slug-sleep-platform-katie, .page-slug-sleep-planner) -- included by sleep_top_nav.php -- both its host pages already in $sleep_pages ===== */

.page-slug-sleep-platform-katie .nn-menu-wrap { width:100%; margin:0; padding:0; position:relative; z-index:100; }
.page-slug-sleep-platform-katie .nn-menu-inner { max-width:var(--bsm3-width-wide); margin:0 auto; padding:0 20px; width:100%; box-sizing:border-box; }

.page-slug-sleep-platform-katie .nn-mini-menu { display:flex; justify-content:flex-start; align-items:center; gap:10px; padding:12px 0; list-style:none; margin:0; flex-wrap:nowrap; }

.page-slug-sleep-platform-katie .nn-desktop-title {
  font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text);
  text-transform: capitalize; letter-spacing:0.5px;
  transition:0.2s; display:flex; align-items:center; gap:6px; margin-right:4px; flex-shrink:0;
}

.page-slug-sleep-platform-katie .nn-mini-menu a.nn-nav-link { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-small-12px-use-on-text);
  transition:0.2s; cursor:pointer; padding-bottom:2px; white-space:nowrap; flex-shrink:0;
}

.page-slug-sleep-platform-katie .nn-mini-menu a.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.page-slug-sleep-platform-katie .nn-nav-sep { font-size:var(--bsm3-text-medium-14px-use-on-text); flex-shrink:0; user-select:none;
}

.page-slug-sleep-platform-katie .nn-menu-toggle { display:none; }

.page-slug-sleep-platform-katie /* Separate tappable Sleep Hub row for mobile,
.page-slug-sleep-platform-katie distinct from the "☰ Sleep
   Menu" toggle button and from the title badge above it (which reads
   as a section header on mobile,
.page-slug-sleep-platform-katie not an obvious link). Hidden on
   desktop -- the title badge already covers that link there. */
.nn-mobile-hub-link { display:none; }

@media (max-width:900px) {
.page-slug-sleep-platform-katie .nn-menu-inner { padding:0 15px; position:relative; }
.page-slug-sleep-platform-katie .nn-menu-toggle { display:flex; align-items:center; justify-content:center; width:100%; padding:12px; border-radius:var(--bsm3-radius-status-cards); cursor:pointer; margin:10px 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; font-size:var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-sleep-platform-katie .nn-mini-menu { display:none; position:absolute; top:100%; left:15px; right:15px; border-radius:var(--bsm3-radius-status-cards); padding:15px; z-index:999; flex-direction:column; align-items:flex-start; gap:0; }
.page-slug-sleep-platform-katie .nn-mini-menu.open { display:flex; }
.page-slug-sleep-platform-katie .nn-desktop-title { width:100%; padding-bottom:10px; margin-bottom:10px; margin-right:0; font-size:var(--bsm3-text-large-16px-use-on-text); }
.page-slug-sleep-platform-katie .nn-mini-menu a.nn-nav-link { width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-sleep-platform-katie .nn-nav-sep { display:none; }
.page-slug-sleep-platform-katie .nn-mobile-hub-link {
    display:block; width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }
.page-slug-sleep-platform-katie .nn-mobile-hub-link.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
}

.page-slug-sleep-platform-katie /* Distinctive "go to a tool" pill for Sleep Planner -- visually set
   apart from the plain text links above (matches the Neuro Planner /
   Meal Planner pill treatment exactly). */
.nn-mini-menu a.nn-nav-pill {
  display:inline-flex; align-items:center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text);
  padding:6px 14px; border-radius:var(--bsm3-radius-pills); transition:0.2s;
  white-space:nowrap; flex-shrink:0; margin-left:6px;
}

.page-slug-sleep-platform-katie .nn-nav-pill.active .nn-pill-dot { display:inline-block; }

@media (max-width:900px) {
.page-slug-sleep-platform-katie .nn-mini-menu a.nn-nav-pill {
    width:auto; border-radius:var(--bsm3-radius-pills); text-align:center; padding:10px 18px;
    font-size:var(--bsm3-text-medium-14px-use-on-text); margin-top:8px; margin-left:0; align-self:flex-start;
  }
}

.page-slug-sleep-platform-katie /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-15px { font-size: var(--bsm3-text-medium-14px-use-on-text); }

.page-slug-sleep-planner .nn-menu-wrap { width:100%; margin:0; padding:0; position:relative; z-index:100; }
.page-slug-sleep-planner .nn-menu-inner { max-width:var(--bsm3-width-wide); margin:0 auto; padding:0 20px; width:100%; box-sizing:border-box; }

.page-slug-sleep-planner .nn-mini-menu { display:flex; justify-content:flex-start; align-items:center; gap:10px; padding:12px 0; list-style:none; margin:0; flex-wrap:nowrap; }

.page-slug-sleep-planner .nn-desktop-title {
  font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text);
  text-transform: capitalize; letter-spacing:0.5px;
  transition:0.2s; display:flex; align-items:center; gap:6px; margin-right:4px; flex-shrink:0;
}

.page-slug-sleep-planner .nn-mini-menu a.nn-nav-link { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-small-12px-use-on-text);
  transition:0.2s; cursor:pointer; padding-bottom:2px; white-space:nowrap; flex-shrink:0;
}

.page-slug-sleep-planner .nn-mini-menu a.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.page-slug-sleep-planner .nn-nav-sep { font-size:var(--bsm3-text-medium-14px-use-on-text); flex-shrink:0; user-select:none;
}

.page-slug-sleep-planner .nn-menu-toggle { display:none; }

.page-slug-sleep-planner /* Separate tappable Sleep Hub row for mobile,
.page-slug-sleep-planner distinct from the "☰ Sleep
   Menu" toggle button and from the title badge above it (which reads
   as a section header on mobile,
.page-slug-sleep-planner not an obvious link). Hidden on
   desktop -- the title badge already covers that link there. */
.nn-mobile-hub-link { display:none; }

@media (max-width:900px) {
.page-slug-sleep-planner .nn-menu-inner { padding:0 15px; position:relative; }
.page-slug-sleep-planner .nn-menu-toggle { display:flex; align-items:center; justify-content:center; width:100%; padding:12px; border-radius:var(--bsm3-radius-status-cards); cursor:pointer; margin:10px 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; font-size:var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-sleep-planner .nn-mini-menu { display:none; position:absolute; top:100%; left:15px; right:15px; border-radius:var(--bsm3-radius-status-cards); padding:15px; z-index:999; flex-direction:column; align-items:flex-start; gap:0; }
.page-slug-sleep-planner .nn-mini-menu.open { display:flex; }
.page-slug-sleep-planner .nn-desktop-title { width:100%; padding-bottom:10px; margin-bottom:10px; margin-right:0; font-size:var(--bsm3-text-large-16px-use-on-text); }
.page-slug-sleep-planner .nn-mini-menu a.nn-nav-link { width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-sleep-planner .nn-nav-sep { display:none; }
.page-slug-sleep-planner .nn-mobile-hub-link {
    display:block; width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }
.page-slug-sleep-planner .nn-mobile-hub-link.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
}

.page-slug-sleep-planner /* Distinctive "go to a tool" pill for Sleep Planner -- visually set
   apart from the plain text links above (matches the Neuro Planner /
   Meal Planner pill treatment exactly). */
.nn-mini-menu a.nn-nav-pill {
  display:inline-flex; align-items:center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text);
  padding:6px 14px; border-radius:var(--bsm3-radius-pills); transition:0.2s;
  white-space:nowrap; flex-shrink:0; margin-left:6px;
}

.page-slug-sleep-planner .nn-nav-pill.active .nn-pill-dot { display:inline-block; }

@media (max-width:900px) {
.page-slug-sleep-planner .nn-mini-menu a.nn-nav-pill {
    width:auto; border-radius:var(--bsm3-radius-pills); text-align:center; padding:10px 18px;
    font-size:var(--bsm3-text-medium-14px-use-on-text); margin-top:8px; margin-left:0; align-self:flex-start;
  }
}

/* my-sleep-therapies -- added 11 sep 2026, Stage 1 fix: this page never had
   its own nn-* nav block, so the desktop title link and the mobile-only
   hub link both showed at once with nothing to hide either one. Copied
   straight from .page-slug-sleep-planner / .page-slug-my-mind-therapies. */

.page-slug-my-sleep-therapies .nn-menu-wrap { width:100%; margin:0; padding:0; position:relative; z-index:100; }
.page-slug-my-sleep-therapies .nn-mini-menu { display:flex; justify-content:flex-start; align-items:center; gap:10px; padding:12px 0; list-style:none; margin:0; flex-wrap:nowrap; }

.page-slug-my-sleep-therapies .nn-desktop-title {
  font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text);
  text-transform: capitalize; letter-spacing:0.5px;
  transition:0.2s; display:flex; align-items:center; gap:6px; margin-right:4px; flex-shrink:0;
}

.page-slug-my-sleep-therapies .nn-mini-menu a.nn-nav-link { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-small-12px-use-on-text);
  transition:0.2s; cursor:pointer; padding-bottom:2px; white-space:nowrap; flex-shrink:0;
}

.page-slug-my-sleep-therapies .nn-mini-menu a.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.page-slug-my-sleep-therapies .nn-nav-sep { font-size:var(--bsm3-text-medium-14px-use-on-text); flex-shrink:0; user-select:none;
}

.page-slug-my-sleep-therapies .nn-menu-toggle { display:none; }

.page-slug-my-sleep-therapies .nn-mobile-hub-link { display:none; }

@media (max-width:900px) {
.page-slug-my-sleep-therapies .nn-menu-inner { padding:0 15px; position:relative; }
.page-slug-my-sleep-therapies .nn-menu-toggle { display:flex; align-items:center; justify-content:center; width:100%; padding:12px; border-radius:var(--bsm3-radius-status-cards); cursor:pointer; margin:10px 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; font-size:var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-my-sleep-therapies .nn-mini-menu { display:none; position:absolute; top:100%; left:15px; right:15px; border-radius:var(--bsm3-radius-status-cards); padding:15px; z-index:999; flex-direction:column; align-items:flex-start; gap:0; }
.page-slug-my-sleep-therapies .nn-mini-menu.open { display:flex; }
.page-slug-my-sleep-therapies .nn-desktop-title { width:100%; padding-bottom:10px; margin-bottom:10px; margin-right:0; font-size:var(--bsm3-text-large-16px-use-on-text); }
.page-slug-my-sleep-therapies .nn-mini-menu a.nn-nav-link { width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-my-sleep-therapies .nn-nav-sep { display:none; }
.page-slug-my-sleep-therapies .nn-mobile-hub-link {
    display:block; width:100%; padding:10px 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }
.page-slug-my-sleep-therapies .nn-mobile-hub-link.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
}

.page-slug-my-sleep-therapies .nn-mini-menu a.nn-nav-pill {
  display:inline-flex; align-items:center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text);
  padding:6px 14px; border-radius:var(--bsm3-radius-pills); transition:0.2s;
  white-space:nowrap; flex-shrink:0; margin-left:6px;
}

.page-slug-my-sleep-therapies .nn-nav-pill.active .nn-pill-dot { display:inline-block; }

@media (max-width:900px) {
.page-slug-my-sleep-therapies .nn-mini-menu a.nn-nav-pill {
    width:auto; border-radius:var(--bsm3-radius-pills); text-align:center; padding:10px 18px;
    font-size:var(--bsm3-text-medium-14px-use-on-text); margin-top:8px; margin-left:0; align-self:flex-start;
  }
}

.page-slug-sleep-planner /* ==== Stage 3: extracted repeated inline styles ==== */
.u-font-size-15px { font-size: var(--bsm3-text-medium-14px-use-on-text); }


/* ================================================================
   INLINE STYLES EXTRACTED FROM SLEEP PLATFORM PAGES -- 28 aug 2026
   Every static inline style="" in sleep_platform/, sleep/ and
   sleepManager/ was moved here into its own uniquely-named class
   (one class per original inline style, never reused elsewhere),
   with !important on every property so it behaves exactly the way
   the inline style did (inline always won before; these rules always
   win now too, and can't collide with anything else on the site
   because each class name is brand new and used in exactly one place).
   A handful of inline styles were left in place on purpose: some build
   their value at runtime from PHP data (colours/percentages that change
   per request) and can't be a static CSS rule; a few others were left
   because the surrounding markup couldn't be safely identified as one
   tag and were skipped rather than risk a wrong edit.
   ================================================================ */

/* ---- extracted from sleep_platform/master_shell.php ---- */
.pg-master-shell-i001 { top: 15% !important; left: 85% !important; }
.pg-master-shell-i002 { top: 45% !important; left: 12% !important; }
.pg-master-shell-i003 { top: 75% !important; left: 80% !important; }
.pg-master-shell-i004 { top: 25% !important; left: 30% !important; }
.pg-master-shell-i005 { top: 60% !important; left: 65% !important; }
.pg-master-shell-i006 { top: 85% !important; left: 20% !important; }
.pg-master-shell-i007 { top: 10% !important; left: 40% !important; }
.pg-master-shell-i008 { top: 50% !important; left: 85% !important; }
.pg-master-shell-i009 { top: 20% !important; left: 10% !important; }
.pg-master-shell-i010 { top: 80% !important; left: 50% !important; }
.pg-master-shell-i011 { top: 35% !important; left: 75% !important; }
.pg-master-shell-i012 { top: 65% !important; left: 35% !important; }
.pg-master-shell-i013 { top: 5% !important; left: 60% !important; }
.pg-master-shell-i014 { top: 90% !important; left: 90% !important; }
.pg-master-shell-i015 { top: 55% !important; left: 5% !important; }
.pg-master-shell-i016 { top: 40% !important; left: 50% !important; }
.pg-master-shell-i017 { top: 15% !important; left: 25% !important; }
.pg-master-shell-i018 { top: 70% !important; left: 15% !important; }
.pg-master-shell-i019 { top: 25% !important; left: 90% !important; }
.pg-master-shell-i020 { top: 95% !important; left: 40% !important; }

/* ---- extracted from sleep_platform/pages/accessories.php ---- */
.pg-accessories-i001 { width: 100px !important; }

/* ---- extracted from sleep_platform/pages/apnea.php ---- */
.pg-apnea-i001 { display:block !important; border-radius: var(--bsm3-radius-primary-cards)!important; padding:18px 20px !important; margin-bottom:24px !important; font-family:var(--bsm3-font-mono) !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; line-height:1.7 !important; white-space:pre-wrap !important; word-break:break-all !important; }
.pg-apnea-i002 { display:block !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:10px !important; text-transform: capitalize !important; letter-spacing:0.05em !important; }
.pg-apnea-i003 { display:block !important; margin-bottom:6px !important; padding-bottom:6px !important; }
.pg-apnea-i004 { display:block !important; margin-top:10px !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-apnea-i005 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; margin-bottom:5px !important; }
.pg-apnea-i006 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; margin-bottom:5px !important; }
.pg-apnea-i007 { cursor:pointer !important; flex-direction:row !important; }
.pg-apnea-i008 { display:flex !important; flex-direction:row !important; align-items:center !important; gap:16px !important; flex:1 !important; min-width:0 !important; }
.pg-apnea-i009 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-apnea-i010 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-top:2px !important; }
.pg-apnea-i011 { display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; flex-shrink:0 !important; }
.pg-apnea-i012 { flex:1 !important; min-width:0 !important; }
.pg-apnea-i013 { align-items:center !important; gap:10px !important; margin-bottom:7px !important; flex-wrap:wrap !important; }
.pg-apnea-i014 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-apnea-i015 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height:1.65 !important; margin:0 !important; }
.pg-apnea-i016 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; margin-top:2px !important; }
.pg-apnea-i017 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; }
.pg-apnea-i018 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; margin-top:2px !important; }
.pg-apnea-i019 { display:flex !important; align-items:center !important; margin-bottom:16px !important; }
.pg-apnea-i020 { display:flex !important; flex-direction:column !important; }
.pg-apnea-i021 { display:flex !important; flex-direction:column !important; }
.pg-apnea-i022 { display:flex !important; flex-direction:column !important; }
.pg-apnea-i023 { margin-top:22px !important; }
.pg-apnea-i024 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; margin-top:2px !important; }
.pg-apnea-i025 { display:grid !important; }
.pg-apnea-i026 { display:grid !important; }
.pg-apnea-i027 { display:grid !important; }
.pg-apnea-i028 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; margin-top:2px !important; }
.pg-apnea-i029 { display:none !important; position:fixed !important; inset:0 !important; z-index:9200 !important; align-items:center !important; justify-content:center !important; padding:20px !important; box-sizing:border-box !important; overflow-y:auto !important; }
.pg-apnea-i030 { display:block !important; border-radius: var(--bsm3-radius-primary-cards)!important; max-width: var(--bsm3-width-wide)!important; width:100% !important; overflow:hidden !important; }
.pg-apnea-i031 { display:block !important; padding:24px 28px 20px !important; }
.pg-apnea-i032 { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; }
.pg-apnea-i033 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.22em !important; margin-bottom:5px !important; }
.pg-apnea-i034 { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-apnea-i035 { display:block !important; text-align:center !important; flex-shrink:0 !important; }
.pg-apnea-i036 { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height:1 !important; }
.pg-apnea-i037 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.14em !important; }
.pg-apnea-i038 { border-radius:50% !important; width:34px !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; flex-shrink:0 !important; }
.pg-apnea-i039 { display:block !important; height:3px !important; border-radius: var(--bsm3-radius-mini-badges)!important; margin-top:16px !important; overflow:hidden !important; }
.pg-apnea-i040 { display:block !important; height:100% !important; width:0% !important; border-radius: var(--bsm3-radius-mini-badges)!important; transition:width 0.4s ease !important; }
.pg-apnea-i041 { display:block !important; padding:28px !important; }
.pg-apnea-i042 { display:block !important; min-height:200px !important; }
.pg-apnea-i043 { display:none !important; text-align:center !important; padding:20px 0 !important; }
.pg-apnea-i044 { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom:12px !important; }
.pg-apnea-i045 { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }
.pg-apnea-i046 { display:block !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom:24px !important; }
.pg-apnea-i047 { padding:12px 28px !important; border-radius: var(--bsm3-radius-pills)!important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.12em !important; cursor:pointer !important; margin-right:10px !important; }
.pg-apnea-i048 { padding:12px 28px !important; border-radius: var(--bsm3-radius-pills)!important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.12em !important; cursor:pointer !important; }
.pg-apnea-i049 { display:none !important; position:fixed !important; inset:0 !important; z-index:9200 !important; align-items:center !important; justify-content:center !important; padding:20px !important; box-sizing:border-box !important; overflow-y:auto !important; }
.pg-apnea-i050 { display:block !important; border-radius: var(--bsm3-radius-primary-cards)!important; max-width: var(--bsm3-width-standard)!important; width:100% !important; overflow:hidden !important; }
.pg-apnea-i051 { display:block !important; padding:26px 28px 22px !important; }
.pg-apnea-i052 { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; }
.pg-apnea-i053 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.22em !important; margin-bottom:6px !important; }
.pg-apnea-i054 { display:block !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:6px !important; line-height:1.2 !important; }
.pg-apnea-i055 { display:block !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height:1.55 !important; }
.pg-apnea-i056 { border-radius:50% !important; width:34px !important; height:34px !important; min-width:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-apnea-i057 { display:block !important; padding:24px 28px 8px !important; }
.pg-apnea-i058 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.18em !important; margin-bottom:14px !important; }
.pg-apnea-i059 { display:flex !important; flex-direction:column !important; gap:10px !important; }
.pg-apnea-i060 { display:block !important; padding:20px 28px 26px !important; margin-top:16px !important; }
.pg-apnea-i061 { display:none !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom:12px !important; text-align:center !important; }
.pg-apnea-i062 { display:block !important; width:100% !important; padding:14px !important; border-radius: var(--bsm3-radius-pills)!important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.14em !important; cursor:pointer !important; margin-bottom:10px !important; transition:opacity 0.2s !important; }
.pg-apnea-i063 { display:block !important; width:100% !important; padding:10px !important; border-radius: var(--bsm3-radius-pills)!important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; cursor:pointer !important; text-underline-offset:3px !important; }
.pg-apnea-i064 { padding:11px 28px !important; border-radius: var(--bsm3-radius-pills)!important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.12em !important; cursor:pointer !important; }
.pg-apnea-i065 { display:flex !important; gap:8px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_0.php ---- */
.pg-cbti-module-0-i003 { justify-content: space-between !important; align-items: baseline !important; }
.pg-cbti-module-0-i004 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-0-i005 { margin-top: 4px !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i006 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-0-i007 { font-size: var(--bsm3-text-small-12px-use-on-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i008 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 24px !important; line-height: 1.6 !important; }
.pg-cbti-module-0-i010 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; }
.pg-cbti-module-0-i011 { text-align: center !important; position: relative !important; z-index: 2 !important; }
.pg-cbti-module-0-i012 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }
.pg-cbti-module-0-i013 { margin-bottom: 24px !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i014 { margin: 0 auto !important; }
.pg-cbti-module-0-i015 { margin-top: 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; opacity: var(--bsm3-opacity-high) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
.pg-cbti-module-0-i016 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 16px !important; }
.pg-cbti-module-0-i017 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 12px !important; }
.pg-cbti-module-0-i018 { margin-bottom: 24px !important; line-height: 1.5 !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i019 { padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; text-align: left !important; margin-bottom: 24px !important; }
.pg-cbti-module-0-i020 { align-items: center !important; gap: 12px !important; }
.pg-cbti-module-0-i021 { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
.pg-cbti-module-0-i022 { opacity: var(--bsm3-opacity-high) !important; margin-bottom: 16px !important; line-height: 1.6 !important; }
.pg-cbti-module-0-i023 { margin-bottom: 24px !important; height: 6px !important; }
.pg-cbti-module-0-i024 { width: 50% !important; }
.pg-cbti-module-0-i025 { gap: 12px !important; align-items: flex-start !important; }
.pg-cbti-module-0-i026 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; opacity: var(--bsm3-opacity-high) !important; line-height: 1.5 !important; }
.pg-cbti-module-0-i027 { text-align: right !important; margin-top: 16px !important; }
.pg-cbti-module-0-i028 { padding: 8px 16px !important; width: auto !important; }
.pg-cbti-module-0-i029 { opacity: var(--bsm3-opacity-high) !important; margin-bottom: 16px !important; }
.pg-cbti-module-0-i030 { align-items: center !important; gap: 8px !important; margin-bottom: 16px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-0-i032 { cursor: pointer !important; }
.pg-cbti-module-0-i033 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
.pg-cbti-module-0-i034 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i035 { cursor: pointer !important; }
.pg-cbti-module-0-i036 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 4px !important; }
.pg-cbti-module-0-i037 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i038 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 8px !important; }
.pg-cbti-module-0-i039 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-cbti-module-0-i040 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 8px !important; }
.pg-cbti-module-0-i041 { margin-bottom: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-0-i042 { width: auto !important; padding: 8px 16px !important; }
.pg-cbti-module-0-i043 { opacity: var(--bsm3-opacity-high) !important; margin-bottom: 24px !important; }
.pg-cbti-module-0-i044 { padding-bottom: 16px !important; margin-bottom: 24px !important; }
.pg-cbti-module-0-i045 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom: 4px !important; text-align: center !important; }
.pg-cbti-module-0-i046 { width: 100% !important; height: auto !important; overflow: visible !important; }
.pg-cbti-module-0-i047 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; text-align: center !important; margin-top: 24px !important; line-height: 1.5 !important; }
.pg-cbti-module-0-i048 { width: 40px !important; height: 40px !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-0-i049 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; margin-top: 8px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-0-i050 { width: 100% !important; padding: 16px !important; }
.pg-cbti-module-0-i051 { opacity: var(--bsm3-opacity-high) !important; margin-bottom: 24px !important; line-height: 1.5 !important; }
.pg-cbti-module-0-i052 { width: 100% !important; padding: 16px !important; }
.pg-cbti-module-0-i053 { opacity: var(--bsm3-opacity-high) !important; margin-bottom: 24px !important; line-height: 1.5 !important; }
.pg-cbti-module-0-i054 { align-items: center !important; gap: 20px !important; margin-bottom: 4px !important; }
.pg-cbti-module-0-i055 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; opacity:var(--bsm3-opacity-medium) !important; }
.pg-cbti-module-0-i056 { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing: 0.12em !important; opacity: var(--bsm3-opacity-medium) !important; }
.pg-cbti-module-0-i057 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; opacity: var(--bsm3-opacity-high) !important; line-height: 1.5 !important; margin-top: 8px !important; }
.pg-cbti-module-0-i058 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom:2px !important; }
.pg-cbti-module-0-i059 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-medium) !important; }
.pg-cbti-module-0-i060 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.16em !important; opacity: var(--bsm3-opacity-medium) !important; margin:20px 0 10px !important; }
.pg-cbti-module-0-i061 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-0-i062 { opacity:var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i063 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-0-i064 { opacity:var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i065 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-0-i066 { opacity:var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i067 { gap: 12px !important; margin-top: 24px !important; flex-wrap: wrap !important; }
.pg-cbti-module-0-i068 { flex: 1 !important; min-width: 200px !important; padding: 16px !important; }
.pg-cbti-module-0-i069 { flex: 1 !important; min-width: 200px !important; padding: 16px !important; }
.pg-cbti-module-0-i070 { display:none !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-align:center !important; padding:10px 14px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-bottom: 16px !important; }
.pg-cbti-module-0-i071 { gap: 12px !important; flex-wrap: wrap !important; }
.pg-cbti-module-0-i072 { flex: 1 !important; min-width: 200px !important; padding: 16px !important; }
.pg-cbti-module-0-i073 { flex: 1 !important; min-width: 200px !important; padding: 16px !important; }
.pg-cbti-module-0-i074 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 16px !important; }
.pg-cbti-module-0-i075 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 12px !important; }
.pg-cbti-module-0-i076 { margin-bottom: 24px !important; line-height: 1.6 !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-0-i077 { padding: 16px !important; border-radius: var(--bsm3-radius-mini-badges)!important; text-align: left !important; margin-top: 16px !important; }
.pg-cbti-module-0-i079 { padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; text-align: left !important; margin-bottom: 24px !important; }
.pg-cbti-module-0-i080 { align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; }
.pg-cbti-module-0-i081 { align-items: center !important; gap: 12px !important; }
.pg-cbti-module-0-i082 { width: 100% !important; padding: 16px !important; opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day1.php ---- */
.pg-cbti-module-week1-day1-i002 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: var(--bsm3-radius-status-cards)!important; }
.pg-cbti-module-week1-day1-i003 { position: absolute !important; bottom: 16px !important; left: 0 !important; width: 100% !important; text-align: center !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week1-day1-i004 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week1-day1-i005 { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; margin-bottom: 24px !important; }
.pg-cbti-module-week1-day1-i006 { border-radius: var(--bsm3-radius-primary-cards)!important; padding: 16px !important; }
.pg-cbti-module-week1-day1-i007 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day2.php ---- */
.pg-cbti-module-week1-day2-i001 { width: 32px !important; height: 32px !important; margin-right: 12px !important; }
.pg-cbti-module-week1-day2-i002 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin: 0 !important; }
.pg-cbti-module-week1-day2-i003 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; }
.pg-cbti-module-week1-day2-i005 { gap: 12px !important; margin-bottom: 16px !important; }
.pg-cbti-module-week1-day2-i006 { padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; }
.pg-cbti-module-week1-day2-i007 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week1-day2-i008 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day3.php ---- */
.pg-cbti-module-week1-day3-i001 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week1-day3-i002 { margin-top: 16px !important; }
.pg-cbti-module-week1-day3-i003 { display:block !important; margin-bottom:4px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week1-day3-i004 { display:block !important; margin-bottom:4px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week1-day3-i005 { display:block !important; margin-bottom:4px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week1-day3-i006 { display:block !important; margin-bottom:4px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day4.php ---- */
.pg-cbti-module-week1-day4-i001 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom: 4px !important; }
.pg-cbti-module-week1-day4-i002 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-week1-day4-i003 { padding: 10px 20px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; flex-shrink: 0 !important; }
.pg-cbti-module-week1-day4-i004 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; }
.pg-cbti-module-week1-day4-i005 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; opacity: var(--bsm3-opacity-high) !important; margin-top: 8px !important; }
.pg-cbti-module-week1-day4-i006 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-top: auto !important; text-align: center !important; }
.pg-cbti-module-week1-day4-i007 { padding: 6px 12px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor: pointer !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week1-day4-i008 { margin-right: 6px !important; }
.pg-cbti-module-week1-day4-i009 { width: 100% !important; padding: 14px !important; margin-top: 8px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day5.php ---- */
.pg-cbti-module-week1-day5-i001 { width: fit-content !important; margin-bottom: 8px !important; }
.pg-cbti-module-week1-day5-i002 { margin-top: 32px !important; padding-top: 32px !important; }
.pg-cbti-module-week1-day5-i003 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; line-height: 1.6 !important; margin-bottom: 16px !important; }
.pg-cbti-module-week1-day5-i004 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; }
.pg-cbti-module-week1-day5-i005 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }
.pg-cbti-module-week1-day5-i006 { width: 100% !important; padding: 14px !important; }
.pg-cbti-module-week1-day5-i007 { font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; margin-bottom: 16px !important; }
.pg-cbti-module-week1-day5-i008 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day6.php ---- */
.pg-cbti-module-week1-day6-i001 { margin-bottom: 0 !important; }
.pg-cbti-module-week1-day6-i002 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-right: 16px !important; flex-shrink: 0 !important; }
.pg-cbti-module-week1-day6-i003 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week1-day6-i004 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week1_day7.php ---- */
.pg-cbti-module-week1-day7-i001 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week1-day7-i002 { margin-bottom: 16px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week1-day7-i003 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 8px !important; }
.pg-cbti-module-week1-day7-i004 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week1-day7-i005 { margin-top: 32px !important; }
.pg-cbti-module-week1-day7-i006 { padding: 16px 32px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week2_day1.php ---- */
.pg-cbti-module-week2-day1-i001 { margin-bottom:12px!important; }
.pg-cbti-module-week2-day1-i002 { margin-bottom:12px!important; }
.pg-cbti-module-week2-day1-i003 { margin-bottom:4px!important; }
.pg-cbti-module-week2-day1-i004 { font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-align: center !important; padding-bottom: 8px !important; }
.pg-cbti-module-week2-day1-i005 { margin-bottom:4px!important; }
.pg-cbti-module-week2-day1-i006 { font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-align: center !important; padding-bottom: 8px !important; }
.pg-cbti-module-week2-day1-i007 { margin-bottom: 24px !important; padding-bottom: 24px !important; }
.pg-cbti-module-week2-day1-i008 { margin-bottom: 24px !important; padding-bottom: 24px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week2_day2.php ---- */
.pg-cbti-module-week2-day2-i001 { margin-top: 0 !important; }
.pg-cbti-module-week2-day2-i002 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-top: 16px !important; margin-bottom: 10px !important; }
.pg-cbti-module-week2-day2-i003 { gap: 12px !important; }
.pg-cbti-module-week2-day2-i004 { margin-top: 0 !important; }
.pg-cbti-module-week2-day2-i005 { margin-top: 10px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week2_day6.php ---- */
.pg-cbti-module-week2-day6-i001 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.6 !important; margin-bottom: 16px !important; }
.pg-cbti-module-week2-day6-i002 { display: none !important; padding: 32px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week2-day6-i003 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week2_day7.php ---- */
.pg-cbti-module-week2-day7-i001 { margin-bottom: 0 !important; }
.pg-cbti-module-week2-day7-i002 { margin:0!important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week2-day7-i003 { margin:0!important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week2-day7-i004 { margin:0!important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week2-day7-i005 { padding-bottom:0!important; margin-bottom:0!important; }
.pg-cbti-module-week2-day7-i007 { margin:0!important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week2-day7-i008 { margin-left:auto !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week2-day7-i009 { margin-left:auto !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day1.php ---- */
.pg-cbti-module-week3-day1-i002 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 8px!important; text-align:center !important; }
.pg-cbti-module-week3-day1-i003 { text-align: center !important; margin-bottom: 20px !important; }
.pg-cbti-module-week3-day1-i004 { text-align:center !important; margin-bottom: 12px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week3-day1-i009 { margin-top: 4px !important; margin-bottom: 24px !important; }
.pg-cbti-module-week3-day1-i010 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-top: 32px !important; }
.pg-cbti-module-week3-day1-i011 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; margin-bottom: 16px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day2.php ---- */
.pg-cbti-module-week3-day2-i001 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day2-i002 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; margin-top:4px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day3.php ---- */
.pg-cbti-module-week3-day3-i001 { align-items: center !important; gap: 16px !important; margin-bottom: 24px !important; }
.pg-cbti-module-week3-day3-i002 { justify-content: space-between !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week3-day3-i005 { align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; }
.pg-cbti-module-week3-day3-i006 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 2px !important; }
.pg-cbti-module-week3-day3-i007 { margin-bottom: 20px !important; }
.pg-cbti-module-week3-day3-i008 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week3-day3-i009 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 8px !important; text-align: center !important; }
.pg-cbti-module-week3-day3-i010 { margin-bottom: 12px !important; text-align: center !important; max-width: 90% !important; }
.pg-cbti-module-week3-day3-i011 { margin-bottom: 24px !important; text-align: center !important; max-width: 90% !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week3-day3-i012 { align-items: center !important; margin-bottom: 16px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week3-day3-i013 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day3-i014 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; }
.pg-cbti-module-week3-day3-i015 { align-items: center !important; margin-bottom: 16px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week3-day3-i016 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-right: 8px !important; }
.pg-cbti-module-week3-day3-i017 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day3-i018 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.6 !important; }
.pg-cbti-module-week3-day3-i019 { align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day3-i020 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-cbti-module-week3-day3-i021 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week3-day3-i022 { margin-top: 16px !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week3-day3-i023 { padding: 0 !important; overflow: hidden !important; }
.pg-cbti-module-week3-day3-i024 { display: none !important; text-align: center !important; margin-top: 24px !important; }
.pg-cbti-module-week3-day3-i025 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; display: block !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day3-i027 { margin-top: 16px !important; padding: 12px 24px !important; }
.pg-cbti-module-week3-day3-i028 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-left:-4px!important; }
.pg-cbti-module-week3-day3-i029 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; flex: 1 !important; }
.pg-cbti-module-week3-day3-i030 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day4.php ---- */
.pg-cbti-module-week3-day4-i001 { margin-top: 8px !important; }
.pg-cbti-module-week3-day4-i002 { margin-top: 32px !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day4-i003 { width: 28px!important; height: 28px!important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; }
.pg-cbti-module-week3-day4-i004 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week3-day4-i005 { text-align:center !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-cbti-module-week3-day4-i006 { text-align:center !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-cbti-module-week3-day4-i007 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 4px !important; }
.pg-cbti-module-week3-day4-i008 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-cbti-module-week3-day4-i009 { grid-column: span 2!important; }
.pg-cbti-module-week3-day4-i010 { grid-column: span 2!important; }
.pg-cbti-module-week3-day4-i012 { grid-column: span 2!important; flex-direction:row!important; padding:16px!important; }
.pg-cbti-module-week3-day4-i013 { margin:0!important; margin-right:12px!important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-cbti-module-week3-day4-i014 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day5.php ---- */
.pg-cbti-module-week3-day5-i001 { margin-top: 8px !important; }
.pg-cbti-module-week3-day5-i002 { text-align:center !important; margin-bottom: 24px !important; }
.pg-cbti-module-week3-day5-i003 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-cbti-module-week3-day5-i004 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; margin-bottom: 4px !important; }
.pg-cbti-module-week3-day5-i005 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-cbti-module-week3-day5-i006 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom: 8px !important; }
.pg-cbti-module-week3-day5-i007 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; margin-top: 32px !important; margin-bottom: 8px !important; }
.pg-cbti-module-week3-day5-i008 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom:4px !important; }
.pg-cbti-module-week3-day5-i009 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week3-day5-i010 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-cbti-module-week3-day5-i011 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-cbti-module-week3-day5-i012 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day6.php ---- */
.pg-cbti-module-week3-day6-i001 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; line-height: 1.5 !important; }
.pg-cbti-module-week3-day6-i002 { padding: 0 !important; overflow: hidden !important; margin-top: 16px !important; }
.pg-cbti-module-week3-day6-i004 { margin-top: 0 !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week3_day7.php ---- */
.pg-cbti-module-week3-day7-i001 { align-items: center !important; gap: 16px !important; margin-bottom: 24px !important; }
.pg-cbti-module-week3-day7-i002 { justify-content: space-between !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week3-day7-i005 { margin-bottom: 12px !important; }
.pg-cbti-module-week3-day7-i006 { align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; }
.pg-cbti-module-week3-day7-i007 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-cbti-module-week3-day7-i008 { margin-bottom: 0 !important; }
.pg-cbti-module-week3-day7-i009 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; flex: 1 !important; }
.pg-cbti-module-week3-day7-i010 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; flex: 1 !important; }
.pg-cbti-module-week3-day7-i011 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; flex: 1 !important; }
.pg-cbti-module-week3-day7-i012 { display: none !important; text-align: center !important; margin-top: 24px !important; }
.pg-cbti-module-week3-day7-i013 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; display: block !important; margin-bottom: 12px !important; }
.pg-cbti-module-week3-day7-i015 { margin-top: 16px !important; padding: 12px 24px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week4_day2.php ---- */
.pg-cbti-module-week4-day2-i001 { width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--bsm3-radius-primary-cards)!important; margin-bottom: 32px !important; cursor: pointer !important; position: relative !important; }
.pg-cbti-module-week4-day2-i002 { width: 60px !important; height: 60px !important; border-radius: 50% !important; }
.pg-cbti-module-week4-day2-i003 { width: 24px !important; height: 24px !important; margin-left: 4px !important; }
.pg-cbti-module-week4-day2-i004 { position:absolute !important; bottom:16px !important; left:16px !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week4-day2-i006 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 24px !important; }
.pg-cbti-module-week4-day2-i007 { gap: 16px !important; }
.pg-cbti-module-week4-day2-i008 { margin-top: 24px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week4_day3.php ---- */
.pg-cbti-module-week4-day3-i001 { margin-bottom: 12px !important; }
.pg-cbti-module-week4-day3-i002 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week4-day3-i003 { gap: 12px !important; }
.pg-cbti-module-week4-day3-i004 { margin-bottom:0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; width: 60px !important; }
.pg-cbti-module-week4-day3-i005 { margin-top: 12px !important; margin-bottom: 0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-cbti-module-week4-day3-i006 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-cbti-module-week4-day3-i007 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
.pg-cbti-module-week4-day3-i008 { margin-top: 24px !important; }
.pg-cbti-module-week4-day3-i009 { margin-bottom: 24px !important; text-align: center !important; }
.pg-cbti-module-week4-day3-i010 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin-top: 16px !important; }
.pg-cbti-module-week4-day3-i011 { margin-top:16px !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week4_day4.php ---- */
.pg-cbti-module-week4-day4-i001 { margin-bottom: 8px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-cbti-module-week4-day4-i002 { margin-bottom: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-cbti-module-week4-day4-i003 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; margin-bottom: 8px !important; }
.pg-cbti-module-week4-day4-i004 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-cbti-module-week4-day4-i005 { font-size: var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-cbti-module-week4-day4-i006 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week4_day5.php ---- */
.pg-cbti-module-week4-day5-i001 { padding: 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-style: italic !important; margin: 16px 0 !important; }
.pg-cbti-module-week4-day5-i002 { margin-bottom: 8px !important; }
.pg-cbti-module-week4-day5-i003 { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; margin-bottom: 4px !important; }
.pg-cbti-module-week4-day5-i004 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; margin-bottom: 12px !important; }
.pg-cbti-module-week4-day5-i005 { gap: 16px !important; align-items: center !important; }
.pg-cbti-module-week4-day5-i006 { width: 100% !important; max-width: var(--bsm3-width-narrow)!important; margin-top: 0 !important; }
.pg-cbti-module-week4-day5-i007 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; opacity:var(--bsm3-opacity-high) !important; margin-bottom:6px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week4_day6.php ---- */
.pg-cbti-module-week4-day6-i003 { margin-top:16px !important; margin-bottom:0 !important; }
.pg-cbti-module-week4-day6-i004 { width: 100% !important; margin-top: 16px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week5_day1.php ---- */
.pg-cbti-module-week5-day1-i001 { margin-top:0 !important; margin-bottom: 20px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week5_day3.php ---- */
.pg-cbti-module-week5-day3-i001 { margin-bottom:0 !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week5_day5.php ---- */
.pg-cbti-module-week5-day5-i001 { margin-top: 16px !important; font-size: var(--bsm3-text-body-use-on-reading-text) !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week5_day6.php ---- */
.pg-cbti-module-week5-day6-i001 { width: 100% !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week6_day3.php ---- */
.pg-cbti-module-week6-day3-i001 { display: none !important; margin-top: 20px !important; }

/* ---- extracted from sleep_platform/pages/cbti_module_week6_day6.php ---- */
.pg-cbti-module-week6-day6-i001 { margin-top:16px !important; }

/* ---- extracted from sleep_platform/pages/circadian.php ---- */
.pg-circadian-i001 { align-items:center !important; gap:16px !important; flex:1 !important; min-width:0 !important; }
.pg-circadian-i002 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-circadian-i003 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; margin-top:2px !important; }
.pg-circadian-i004 { align-items:center !important; gap:10px !important; flex-shrink:0 !important; }
.pg-circadian-i005 { max-width: var(--bsm3-width-standard)!important; margin-left:auto !important; margin-right:auto !important; }
.pg-circadian-i006 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height:1.65 !important; margin:0 0 16px !important; }
.pg-circadian-i008 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:4px !important; }
.pg-circadian-i009 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-bottom:20px !important; }
.pg-circadian-i010 { margin-top:18px !important; padding-top:18px !important; }
.pg-circadian-i011 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.1em !important; margin-bottom:12px !important; }
.pg-circadian-i016 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-circadian-i017 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-circadian-i018 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-circadian-i019 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-style:italic !important; opacity:var(--bsm3-opacity-medium) !important; margin-top:12px !important; }
.pg-circadian-i021 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-circadian-i022 { margin-bottom:12px !important; }
.pg-circadian-i023 { margin-bottom:12px !important; }
.pg-circadian-i024 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-style:italic !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-circadian-i025 { align-items:center !important; gap:10px !important; width:100% !important; }
.pg-circadian-i026 { align-items:center !important; gap:10px !important; width:100% !important; }
.pg-circadian-i027 { align-items:center !important; gap:10px !important; width:100% !important; }
.pg-circadian-i028 { gap:16px !important; margin-bottom:24px !important; flex-wrap:wrap !important; }
.pg-circadian-i029 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-circadian-i030 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-circadian-i031 { margin-left:12px !important; }
.pg-circadian-i032 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; opacity:var(--bsm3-opacity-high) !important; margin-bottom:8px !important; }
.pg-circadian-i034 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:4px !important; }
.pg-circadian-i035 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-bottom:16px !important; }
.pg-circadian-i036 { text-align:center !important; padding:40px !important; }
.pg-circadian-i037 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; display:block !important; margin-bottom:16px !important; }
.pg-circadian-i038 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }
.pg-circadian-i039 { opacity:var(--bsm3-opacity-high) !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-circadian-i040 { position:relative !important; width:120px !important; height:120px !important; margin-bottom:16px !important; display:inline-block !important; }
.pg-circadian-i041 { transform:rotate(-90deg) !important; }
.pg-circadian-i042 { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-circadian-i043 { font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:4px !important; }
.pg-circadian-i044 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-circadian-i045 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-circadian-i046 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-circadian-i047 { cursor:pointer !important; }
.pg-circadian-i048 { display:none !important; margin-top:10px !important; }
.pg-circadian-i049 { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
.pg-circadian-i050 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-circadian-i051 { padding:8px 14px !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-circadian-i052 { padding:8px 14px !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-circadian-i053 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; opacity:var(--bsm3-opacity-medium) !important; margin-top:6px !important; margin-bottom:0 !important; }
.pg-circadian-i054 { margin-top:28px !important; }
.pg-circadian-i055 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:6px !important; }
.pg-circadian-i056 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; opacity:var(--bsm3-opacity-high) !important; margin-bottom:0 !important; }
.pg-circadian-i058 { border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
.pg-circadian-i059 { left:0% !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
.pg-circadian-i061 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-circadian-i062 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-style:italic !important; opacity:var(--bsm3-opacity-high) !important; margin-top:8px !important; }

/* ---- extracted from sleep_platform/pages/circadian_planner.php ---- */
.pg-circadian-planner-i001 { margin-bottom: 30px !important; }
.pg-circadian-planner-i002 { margin-bottom: 5px !important; }
.pg-circadian-planner-i003 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; margin-bottom: 25px !important; }
.pg-circadian-planner-i004 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; font-style: italic !important; margin-top: 10px !important; }
.pg-circadian-planner-i005 { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 30px !important; padding-top: 20px !important; }
.pg-circadian-planner-i006 { display: flex !important; gap: 20px !important; align-items: center !important; }
.pg-circadian-planner-i007 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; }
.pg-circadian-planner-i008 { display: flex !important; gap: 10px !important; align-items: center !important; }
.pg-circadian-planner-i009 { margin:0 !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-circadian-planner-i010 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; margin-bottom: 20px !important; }
.pg-circadian-planner-i011 { width: 0% !important; height: 8px !important; border-radius: var(--bsm3-radius-status-cards)!important; }
.pg-circadian-planner-i012 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-height: 250px !important; overflow-y: auto !important; }
.pg-circadian-planner-i013 { margin-top: 40px !important; display: grid !important; gap: 20px !important; }
.pg-circadian-planner-i014 { margin-bottom: 10px !important; }
.pg-circadian-planner-i015 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; }
.pg-circadian-planner-i018 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height: 1.5 !important; margin: 0 !important; }

/* ---- extracted from sleep_platform/pages/dashboard.php ---- */
.pg-dashboard-i001 { padding:40px !important; text-align:center !important; font-family: var(--bsm3-font-body) !important; }
.pg-dashboard-i003 { text-align:center !important; padding:36px !important; }
.pg-dashboard-i004 { margin-bottom:14px !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; opacity:var(--bsm3-opacity-high) !important; }
.pg-dashboard-i005 { padding:11px 22px !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor:pointer !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; font-family: var(--bsm3-font-body) !important; }
.pg-dashboard-i007 { padding:28px 0 !important; text-align:center !important; }
.pg-dashboard-i008 { width:44px !important; height:44px !important; stroke-width:1.5px !important; }
.pg-dashboard-i009 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; opacity:var(--bsm3-opacity-medium) !important; margin-top:10px !important; }
.pg-dashboard-i010 { opacity:var(--bsm3-opacity-low) !important; }
.pg-dashboard-i011 { opacity:var(--bsm3-opacity-low) !important; }
.pg-dashboard-i012 { opacity:var(--bsm3-opacity-low) !important; }
.pg-dashboard-i013 { opacity:var(--bsm3-opacity-low) !important; }
.pg-dashboard-i017 { width:15% !important; }
.pg-dashboard-i019 { width:25% !important; }
.pg-dashboard-i021 { width:100% !important; }

/* ---- extracted from sleep_platform/pages/insomnia.php ---- */
.pg-insomnia-i001 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:4px !important; }

/* ---- extracted from sleep_platform/pages/jetlag-section.php ---- */
.pg-jetlag-section-i001 { margin-top:0 !important; }
.pg-jetlag-section-i002 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-jetlag-section-i003 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-top:24px !important; margin-bottom:16px !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-jetlag-section-i004 { display:none !important; }
.pg-jetlag-section-i005 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:12px !important; }
.pg-jetlag-section-i006 { display:flex !important; gap:16px !important; margin-top:16px !important; flex-wrap:wrap !important; }
.pg-jetlag-section-i007 { display:block !important; flex:1 !important; min-width:220px !important; }
.pg-jetlag-section-i008 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i009 { display:block !important; flex:1 !important; min-width:220px !important; }
.pg-jetlag-section-i010 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i011 { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; opacity:var(--bsm3-opacity-medium) !important; }
.pg-jetlag-section-i012 { display:block !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; opacity:var(--bsm3-opacity-medium) !important; margin-top:6px !important; line-height:1.4 !important; }
.pg-jetlag-section-i013 { display:block !important; flex:1 !important; min-width:220px !important; }
.pg-jetlag-section-i014 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i015 { display:block !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; opacity:var(--bsm3-opacity-medium) !important; margin-top:6px !important; line-height:1.4 !important; }
.pg-jetlag-section-i016 { display:block !important; margin-top:16px !important; }
.pg-jetlag-section-i017 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:8px !important; }
.pg-jetlag-section-i018 { display:flex !important; align-items:flex-start !important; gap:8px !important; margin-bottom:8px !important; cursor:pointer !important; }
.pg-jetlag-section-i019 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-jetlag-section-i020 { display:flex !important; align-items:flex-start !important; gap:8px !important; cursor:pointer !important; }
.pg-jetlag-section-i021 { font-size:var(--bsm3-text-medium-14px-use-on-text) !important; }
.pg-jetlag-section-i022 { display:none !important; gap:16px !important; margin-top:12px !important; flex-wrap:wrap !important; }
.pg-jetlag-section-i023 { display:block !important; flex:1 !important; min-width:160px !important; }
.pg-jetlag-section-i024 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i025 { display:block !important; flex:1 !important; min-width:160px !important; }
.pg-jetlag-section-i026 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i027 { margin-top:16px !important; }
.pg-jetlag-section-i028 { margin-left:12px !important; }
.pg-jetlag-section-i029 { margin-top:16px !important; }
.pg-jetlag-section-i030 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text)!important; margin-bottom:16px !important; }
.pg-jetlag-section-i031 { opacity:var(--bsm3-opacity-high) !important; text-align:center !important; }
.pg-jetlag-section-i032 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-right:8px !important; }
.pg-jetlag-section-i033 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-jetlag-section-i034 { display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:14px !important; }
.pg-jetlag-section-i035 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-jetlag-section-i036 { display:block !important; }
.pg-jetlag-section-i037 { display:block !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.03em !important; }
.pg-jetlag-section-i038 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-medium) !important; }
.pg-jetlag-section-i039 { display:block !important; border-radius: var(--bsm3-radius-primary-cards)!important; padding:16px !important; }
.pg-jetlag-section-i040 { display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:14px !important; }
.pg-jetlag-section-i041 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-jetlag-section-i042 { display:block !important; }
.pg-jetlag-section-i043 { display:block !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.03em !important; }
.pg-jetlag-section-i044 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-medium) !important; }
.pg-jetlag-section-i046 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-jetlag-section-i047 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-jetlag-section-i048 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-jetlag-section-i049 { margin-top:16px !important; width:100% !important; text-align:center !important; }
.pg-jetlag-section-i051 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-jetlag-section-i052 { margin-bottom:12px !important; }
.pg-jetlag-section-i053 { margin-bottom:12px !important; }
.pg-jetlag-section-i054 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-style:italic !important; opacity:var(--bsm3-opacity-high) !important; }

/* ---- extracted from sleep_platform/pages/learn.php ---- */
.pg-learn-i001 { margin-bottom: 40px !important; }
.pg-learn-i002 { display: flex !important; gap: 20px !important; align-items: center !important; justify-content: space-around !important; flex-wrap: wrap !important; }
.pg-learn-i003 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin: 0 !important; }
.pg-learn-i004 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; text-transform: capitalize !important; }
.pg-learn-i005 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; opacity: var(--bsm3-opacity-medium) !important; }
.pg-learn-i006 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin: 0 !important; }
.pg-learn-i007 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; text-transform: capitalize !important; }
.pg-learn-i008 { margin-bottom: 15px !important; }
.pg-learn-i009 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; }
.pg-learn-i010 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; }
.pg-learn-i011 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; }
.pg-learn-i012 { margin-top: 40px !important; }

/* ---- extracted from sleep_platform/pages/legs.php ---- */
.pg-legs-i002 { max-width: var(--bsm3-width-standard)!important; margin-left:auto !important; margin-right:auto !important; }
.pg-legs-i003 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; line-height:1.65 !important; margin:0 0 16px !important; }
.pg-legs-i005 { padding:26px 28px 20px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; flex-shrink:0 !important; }
.pg-legs-i006 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.22em !important; margin-bottom:6px !important; }
.pg-legs-i007 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin:0 !important; line-height:1.2 !important; }
.pg-legs-i008 { border-radius:50% !important; width:34px !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; line-height:1 !important; flex-shrink:0 !important; }
.pg-legs-i009 { margin-top:-4px !important; }
.pg-legs-i010 { width:100% !important; justify-content:center !important; box-sizing:border-box !important; }
.pg-legs-i011 { display:block !important; text-align:center !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; cursor:pointer !important; padding:0 !important; width:100% !important; text-underline-offset:3px !important; }

/* ---- extracted from sleep_platform/pages/panic.php ---- */
.pg-panic-i001 { display:none !important; }

/* ---- extracted from sleep_platform/pages/research.php ---- */
.pg-research-i002 { text-align: center !important; align-items: center !important; margin-top: 60px !important; }
.pg-research-i003 { margin-bottom: 10px !important; }
.pg-research-i004 { max-width: var(--bsm3-width-standard)!important; margin-bottom: 20px !important; }

/* ---- extracted from sleep_platform/pages/shift-section.php ---- */
.pg-shift-section-i001 { display:none !important; }
.pg-shift-section-i002 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:12px !important; }
.pg-shift-section-i003 { gap:16px !important; margin-top:16px !important; }
.pg-shift-section-i004 { flex:1 !important; }
.pg-shift-section-i005 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-shift-section-i006 { flex:1 !important; }
.pg-shift-section-i007 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-shift-section-i008 { margin-left:12px !important; }
.pg-shift-section-i009 { opacity:var(--bsm3-opacity-high) !important; text-align:center !important; }
.pg-shift-section-i010 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-right:8px !important; }
.pg-shift-section-i011 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; }
.pg-shift-section-i012 { margin-top:0 !important; }
.pg-shift-section-i013 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-shift-section-i014 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-top:24px !important; margin-bottom:16px !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-shift-section-i015 { margin-top:24px !important; }
.pg-shift-section-i017 { font-size: var(--bsm3-text-small-12px-use-on-text)!important; }
.pg-shift-section-i018 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-shift-section-i019 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; opacity:var(--bsm3-opacity-high) !important; }
.pg-shift-section-i020 { margin-top:16px !important; width:100% !important; text-align:center !important; }

/* ---- extracted from sleep_platform/pages/sleep_diary.php ---- */
.pg-sleep-diary-i001 { margin-bottom: 24px !important; display: flex !important; align-items: center !important; }
.pg-sleep-diary-i002 { font-size:var(--bsm3-text-large-16px-use-on-text) !important; margin-left:12px !important; }
.pg-sleep-diary-i003 { height: auto !important; min-height: 60px !important; padding: 16px !important; border-radius: var(--bsm3-radius-primary-cards)!important; }
.pg-sleep-diary-i004 { margin-bottom: 4px !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; opacity: var(--bsm3-opacity-high) !important; }
.pg-sleep-diary-i005 { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-style: italic !important; }
.pg-sleep-diary-i006 { opacity:var(--bsm3-opacity-medium) !important; }
.pg-sleep-diary-i007 { text-align:center !important; margin-bottom: 20px !important; }
.pg-sleep-diary-i008 { display:flex !important; gap:12px !important; }

/* ---- extracted from sleep_platform/pages/sleep_dump.php ---- */
.pg-sleep-dump-i001 { padding:40px !important; text-align:center !important; font-family: var(--bsm3-font-body) !important; }

/* ---- extracted from sleep_platform/pages/sleep_planner.php ---- */
.pg-sleep-planner-i001 { text-align:center !important; margin-top:50px !important; font-family: var(--bsm3-font-body) !important; }
.pg-sleep-planner-i002 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; width:60px !important; height:60px !important; border-radius: var(--bsm3-radius-primary-cards)!important; display:flex !important; align-items:center !important; justify-content:center !important; }
.pg-sleep-planner-i003 { margin:0 !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-sleep-planner-i004 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; }
.pg-sleep-planner-i005 { padding:15px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-bottom:20px !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; line-height:1.5 !important; }
.pg-sleep-planner-i006 { text-align:center !important; margin-top:15px !important; }
.pg-sleep-planner-i007 { text-align:center !important; font-style: normal !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.5 !important; padding: 20px 14px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; border-radius: var(--bsm3-radius-status-cards) !important; }
.np-zone-title { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; margin-top: 0; }
.pg-sleep-planner-i008 { text-align:center !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; padding:12px 0 4px 0 !important; }
.pg-sleep-planner-i009 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-sleep-planner-i010 { padding: 25px !important; }
.pg-sleep-planner-i011 { position:absolute !important; top:15px !important; right:15px !important; width:30px !important; height:30px !important; border-radius:50% !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; cursor:pointer !important; }
.pg-sleep-planner-i012 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; width:60px !important; height:60px !important; border-radius: var(--bsm3-radius-primary-cards)!important; display:flex !important; align-items:center !important; justify-content:center !important; }
.pg-sleep-planner-i013 { margin:0 !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; }
.pg-sleep-planner-i014 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; }
.pg-sleep-planner-i015 { padding:15px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-bottom:20px !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; line-height:1.5 !important; }
.pg-sleep-planner-i016 { margin:0 0 10px 0 !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; text-transform: capitalize !important; }
.pg-sleep-planner-i017 { max-width: var(--bsm3-width-narrow)!important; text-align: center !important; }
.pg-sleep-planner-i018 { position:absolute !important; top:15px !important; right:15px !important; width:30px !important; height:30px !important; border-radius:50% !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; cursor:pointer !important; }
.pg-sleep-planner-i019 { margin: 0 0 5px 0 !important; }
.pg-sleep-planner-i020 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin-bottom: 20px !important; }
.pg-sleep-planner-i021 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; margin: 6px 0 0 0 !important; }
.pg-sleep-planner-i022 { width:100% !important; margin-top:10px !important; }
.pg-sleep-planner-i023 { display:inline-block !important; padding:8px 16px !important; border-radius: var(--bsm3-radius-status-cards)!important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-sleep-planner-i024 { text-align:center !important; font-style:italic !important; padding:30px !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; }
.pg-sleep-planner-i025 { margin:0 0 5px 0 !important; font-size:var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-sleep-planner-i026 { margin:0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-sleep-planner-i027 { grid-column: span 2 !important; }
.pg-sleep-planner-i028 { text-align:center !important; padding:40px !important; }
.pg-sleep-planner-i029 { text-align:center !important; padding:60px !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-sleep-planner-i030 { margin-right:8px !important; }
.pg-sleep-planner-i031 { text-align:center !important; padding:40px !important; }

/* ---- extracted from sleep_platform/pages/verify.php ---- */
.pg-verify-i001 { text-align: left !important; }
.pg-verify-i002 { margin-top:0 !important; }
.pg-verify-i003 { opacity: var(--bsm3-opacity-high) !important; margin-top: -15px !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; }
.pg-verify-i004 { display:block !important; font-size: var(--bsm3-text-small-12px-use-on-text)!important; text-transform: capitalize !important; margin-bottom:5px !important; }
.pg-verify-i005 { margin:0 !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; }
.pg-verify-i006 { margin-top: 10px !important; }
.pg-verify-i007 { opacity: 1 !important; }
.pg-verify-i008 { margin-top:20px !important; padding:0 !important; overflow:hidden !important; }
.pg-verify-i009 { text-align: center !important; margin-top: 30px !important; font-size: var(--bsm3-text-body-use-on-reading-text)!important; opacity: var(--bsm3-opacity-high) !important; }

/* ---- extracted from sleep_platform/pages/wearables.php ---- */
.pg-wearables-i001 { margin-bottom: 40px !important; text-align: left !important; }
.pg-wearables-i002 { font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; margin: 0 !important; }
.pg-wearables-i003 { margin-top: 10px !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-wearables-i004 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 25px !important; }
.pg-wearables-i005 { display: flex !important; align-items: center !important; gap: 5px !important; height: 60px !important; margin: 20px 0 !important; }
.pg-wearables-i006 { animation-delay: 0.1s !important; }
.pg-wearables-i007 { animation-delay: 0.2s !important; }
.pg-wearables-i008 { animation-delay: 0.3s !important; }
.pg-wearables-i009 { animation-delay: 0.4s !important; }
.pg-wearables-i010 { animation-delay: 0.5s !important; }
.pg-wearables-i011 { animation-delay: 0.6s !important; }
.pg-wearables-i012 { display:flex !important; gap: 40px !important; margin-top: 10px !important; }
.pg-wearables-i013 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-wearables-i014 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-wearables-i015 { justify-content: center !important; text-align: center !important; }
.pg-wearables-i016 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom: 20px !important; }

/* ---- extracted from sleep_platform/pages/welcome.php ---- */
.pg-welcome-i001 { display:none !important; position:absolute !important; inset:0 !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; }
.pg-welcome-i002 { font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; margin-bottom:20px !important; }
.pg-welcome-i003 { cursor:pointer !important; margin-top:20px !important; }

/* ---- extracted from sleep_platform/sleep_planner/mySleepTherapiesDashboard.php ---- */
.pg-mysleeptherapiesdashboard-i001 { text-align:center !important; margin-top:50px !important; font-family: var(--bsm3-font-body) !important; }
.pg-mysleeptherapiesdashboard-i002 { text-align:center !important; padding:20px !important; }
.pg-mysleeptherapiesdashboard-i003 { display:flex !important; align-items:center !important; gap:10px !important; margin-bottom: 6px !important; flex-wrap:wrap !important; }
.pg-mysleeptherapiesdashboard-i004 { margin:0 !important; font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-mysleeptherapiesdashboard-i005 { margin:0 0 18px 0 !important; font-size:var(--bsm3-text-body-use-on-reading-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:0.5px !important; }
.pg-mysleeptherapiesdashboard-i006 { padding:15px !important; border-radius: var(--bsm3-radius-status-cards)!important; margin-bottom:18px !important; font-size:var(--bsm3-text-medium-14px-use-on-text) !important; line-height:1.5 !important; }
.pg-mysleeptherapiesdashboard-i007 { text-align:center !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-style:italic !important; }
.pg-mysleeptherapiesdashboard-i008 { text-align:center !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-style:italic !important; }
.pg-mysleeptherapiesdashboard-i009 { cursor:default !important; }
.pg-mysleeptherapiesdashboard-i010 { margin-bottom:20px !important; width:100% !important; box-sizing:border-box !important; }
.pg-mysleeptherapiesdashboard-i011 { cursor:default !important; }
.pg-mysleeptherapiesdashboard-i012 { font-size:var(--bsm3-text-tiny-10px-use-on-text) !important; font-weight:var(--bsm3-weight-bold-700-use-on-h1) !important; padding:3px 10px !important; border-radius:var(--bsm3-radius-primary-cards) !important; text-transform: capitalize !important; }

/* ---- extracted from sleep_platform/sleep_planner/sleep_planner.php ---- */

/* ---- extracted from sleep_platform/sleep_planner/sleep_top_nav.php ---- */
.pg-sleep-top-nav-i001 { display:block !important; font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; text-transform: capitalize !important; letter-spacing:1px !important; margin-bottom:6px !important; }

/* ---- extracted from sleep/admin_sleep_tools_crud.php ---- */
.pg-admin-sleep-tools-crud-i001 { text-align:center !important; padding: 30px !important; }
.pg-admin-sleep-tools-crud-i002 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; }
.pg-admin-sleep-tools-crud-i003 { grid-column: 1 / -1 !important; }
.pg-admin-sleep-tools-crud-i004 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
.pg-admin-sleep-tools-crud-i005 { min-height:180px !important; }
.pg-admin-sleep-tools-crud-i006 { min-height:180px !important; }
.pg-admin-sleep-tools-crud-i007 { display:flex !important; justify-content:flex-end !important; gap:15px !important; margin-top: 20px !important; }
.pg-admin-sleep-tools-crud-i008 { text-align:center !important; }
.pg-admin-sleep-tools-crud-i009 { text-align:center !important; padding:30px !important; }
.pg-admin-sleep-tools-crud-i010 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
.pg-admin-sleep-tools-crud-i011 { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; margin-bottom:4px !important; }
.pg-admin-sleep-tools-crud-i012 { font-size:var(--bsm3-text-small-12px-use-on-text) !important; font-family:var(--bsm3-font-mono) !important; }
.pg-admin-sleep-tools-crud-i013 { font-size:var(--bsm3-text-body-use-on-reading-text) !important; }

/* ---- extracted from sleep/lightSmartSleep.php ---- */
.pg-lightsmartsleep-i001 { display:none !important; position:fixed !important; top:20% !important; left:50% !important; transform:translateX(-50%) !important; width:80% !important; max-width: var(--bsm3-width-standard)!important; padding:1rem !important; border-radius: var(--bsm3-radius-status-cards)!important; z-index:9999 !important; }
.pg-lightsmartsleep-i002 { font-size: var(--bsm3-text-body-use-on-reading-text)!important; }
.pg-lightsmartsleep-i003 { margin-top:1rem !important; padding:.5rem .75rem !important; border-radius: var(--bsm3-radius-status-cards)!important; cursor:pointer !important; }

/* ---- extracted from sleep/sleep-wellness-grid.php ---- */
.pg-sleep-wellness-grid-i001 { text-align:center !important; }

/* ---- extracted from sleep/sleepApneaODI.php ---- */
.pg-sleepapneaodi-i001 { display:none !important; }

/* ---- extracted from sleep/sleepApneaPathway.php ---- */
.pg-sleepapneapathway-i001 { grid-template-columns: 200px 1fr !important; margin-top:10px !important; }
.pg-sleepapneapathway-i002 { margin-top:25px !important; }
.pg-sleepapneapathway-i003 { grid-template-columns: 200px 1fr !important; margin-top:10px !important; }
.pg-sleepapneapathway-i004 { margin-top:25px !important; }
.pg-sleepapneapathway-i005 { grid-template-columns: 200px 1fr !important; margin-top:10px !important; }

/* ---- extracted from sleep/sleep_results.php ---- */
.pg-sleep-results-i001 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-sleep-results-i002 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-sleep-results-i003 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }
.pg-sleep-results-i004 { font-size: var(--bsm3-text-large-16px-use-on-text)!important; }

/* ---- extracted from sleepManager/anxietyAnalyser.php ---- */
.pg-anxietyanalyser-i001 { text-align:right !important; }
.pg-anxietyanalyser-i002 { text-align:right !important; }
.pg-anxietyanalyser-i003 { text-align:right !important; }
.pg-anxietyanalyser-i004 { text-align:right !important; }

/* ==== VIDEO POSTER THUMBNAILS + TITLE LABELS (batch added 2026-09-07) ==== */
.bsm-video-poster-title { position: absolute !important; top: 12px !important; left: 12px !important; right: 12px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; z-index: 2 !important; pointer-events: none !important; }

/* ===== Stage 2 (11 sep 2026): Sleep Planner / My Sleep Therapies now use
   the same .global-nav-bar / .nav-row-1 / .nav-controls / .nav-btn
   classes as the cinematic Sleep pages (master_shell.php), for one
   consistent nav framework. These pages have no #bsm-app-root, so
   .nav-btn's normal colours (--card-bg/--text-sub, only defined inside
   #bsm-app-root) would be invisible here -- this gives the plain pages
   their own working colours instead, and switches the bar from fixed
   to sticky so it doesn't need extra top-padding added to every page. */
.sleep-nav-plain {
  position: sticky; top: 0; z-index: 1000;
}
.sleep-nav-plain .sleep-nav-title {
  font-size: var(--bsm3-text-large-16px-use-on-text);
  font-weight: var(--bsm3-weight-bold-700-use-on-h1);
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0 8px;
}
@media (max-width: 900px) {
  .sleep-nav-plain .nav-row-1 { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
}

/* ===== 13 sep 2026: Sleep nav unified with the shared Body-tools nav
   framework (.bp-*) used by Meal Planner / Activity Planner / Pantry /
   Recipes. Values copied verbatim from styleBodyNew.css's .bp-* rules.
   Declared bare (not page-slug-scoped) because this file only ever loads
   on Sleep's own pages (sleep-planner, my-sleep-therapies), so there is
   no risk of these rules leaking onto other tools' pages. Markup lives
   in sleep_top_nav.php. */
.bp-sticky-wrapper { position: sticky; top: 0; z-index: 100; width: 100%; }
.bp-top-utility-links { display: flex; gap: 15px; padding: 10px 20px; box-sizing: border-box; }
.bp-top-utility-links a { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; letter-spacing: 1px; transition: color 0.2s ease; }
.bp-sticky-bar { position: sticky; top: 0; z-index: 100; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.bp-brand h1 { margin: 0; font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); display: flex; align-items: center; gap: 8px; }
.bp-top-nav-tabs { display: flex; gap: 8px; }
.bp-top-nav-btn { padding: 6px 14px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; }
.bp-mobile-menu-toggle { display: none; font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; }
@media screen and (max-width: 900px) {
    .bp-top-utility-links { padding: 10px 15px; }
    .bp-sticky-bar { flex-wrap: wrap; padding: 15px; }
    .bp-brand h1 { font-size: var(--bsm3-text-large-16px-use-on-text); }
    .bp-mobile-menu-toggle { display: block; }
    .bp-top-nav-tabs { display: none; width: 100%; flex-direction: column; margin-top: 15px; gap: 8px; }
    .bp-top-nav-tabs.is-open { display: flex; animation: sp-navUnify-sleepFadeIn 0.2s ease; }
    .bp-top-nav-btn { width: 100%; text-align: center; padding: 12px; }
}@keyframes sp-navUnify-sleepFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== 14 sep 2026: Day/Night/Sleep switch, added to the shared
   sleep_top_nav.php bar above. Styled to match .bp-top-nav-btn's own
   pill-button look so it reads as one family with the rest of this bar. */
.bp-theme-toggle { display: flex; gap: 6px; }
.bp-theme-btn { padding: 6px 12px; border-radius: var(--bsm3-radius-primary-cards); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; transition: 0.2s; }
@media screen and (max-width: 900px) {
    .bp-theme-toggle { width: 100%; justify-content: center; margin-top: 10px; }
}


/* ===== 16 sep 2026: SPA entry pop-up. Shown once, only on master_shell.php,
   only when the visitor lands on the Sleep Hub SPA from OUTSIDE the sleep
   app (see $bsm_from_inside_sleep_app in master_shell.php). Nudges people
   toward the Sleep theme when they're using the platform near bedtime. */
.bsm-entry-popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.bsm-entry-popup-box {
    border-radius: var(--bsm3-radius-primary-cards);
    max-width: 420px;
    width: 90%;
    padding: 32px 28px;
    text-align: center;
}
.bsm-entry-popup-icon {
    display: block;
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    margin-bottom: 16px;
}
.bsm-entry-popup-text {
    margin: 0 0 24px 0;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    line-height: 1.5;
}
.bsm-entry-popup-btn {
    border-radius: var(--bsm3-radius-pills);
    padding: 12px 32px;
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    cursor: pointer;
}
.bsm-entry-popup-btn:hover { opacity: var(--bsm3-opacity-high); }

/* 16 Sep 2026 -- nav experiment fix: #bsm-app-root h1 (further up this file,
   both copies) forces EVERY h1 inside the SPA to a huge cinematic dashboard
   size (clamp 2.8rem-4.5rem) with !important, meant for page content like
   "Good afternoon, admin" -- not for the small nav-bar title now living in
   here too via .bp-brand (copied from sleep_top_nav.php). This rule is more
   specific (#bsm-app-root .bp-brand h1 beats #bsm-app-root h1) so it wins
   over that one and brings the nav title back down to the same 24px used on
   Sleep Planner / My Sleep Therapies, instead of matching the dashboard's
   own giant greeting text. */
#bsm-app-root .bp-brand h1 {
    font-family: inherit !important;
    font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important;
    line-height: normal !important;
}
@media (max-width: 900px) {
    #bsm-app-root .bp-brand h1 { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
}

/* ============================================================ */
/* ---- MERGED IN from styleSleepV2.css, 24 Sep 2026 (Phase B cleanup: folding V2 add-on stylesheets back into their base file) ---- */
/* ============================================================ */
/* ============================================================
   SLEEP SECTION v2 -- Brand Refresh, Stage 4. Added 19 Sep 2026.
   New per-section header + Build/Plans/Therapies/Progress tabs
   (menus/menu_sleep_section_tabs.php), the "Build your plan" cards
   (sleep_platform/pages/dashboard.php), and a colour/font refresh of
   the existing risk cards on the Sleep Profile ("Build") tab. Uses the
   --bsm2-* variables from brand.css (Stage 2). Scoped narrowly (see
   each section below) so nothing outside Sleep's own Build tab is
   touched -- dashboard.php reuses classes like .ds-card on other tabs
   (Explore) that must stay exactly as they are.
   ============================================================ */

/* ---------- Tab row ----------
   Restructured 21 Sep 2026 on Michael's direct instruction: nothing here
   is fixed any more -- the nav and diary button are normal scrollable
   content now (echoed inside #spa-stage by master_shell.php), matching
   how Body/Mind's own section headers scroll. The ONLY thing that stays
   fixed on this page is the sitewide #bsm-global-topbar (see
   menu_global_top_bar.php / styleGlobalNav.css), which is also where the
   Day/Sleep switch now lives, centred.

   The "Sleep" icon/heading/subtitle block (.bsst-scrollnav/.bsst-icon/
   .bsst-heading) that used to sit above this tab row was removed
   entirely on Michael's direct instruction, 21 Sep 2026 -- it is not
   shown on this page any more. */

.bsst-tabs-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bsm3-space-lg);
    margin-bottom: var(--bsm3-space-lg);
}

.bsst-tabs {
    display: flex;
    gap: var(--bsm3-space-xl);
}

.page-slug-primary-sleep-therapies h3 {
    /* type-scale.sub-section-title, per skill: DM Sans 600 18px, color --ink.
       Tag changed h1 -> h3 (22 Sep 2026, Chris's call) -- this is the real
       page heading tag, not an h1 sized to look like an h3. */
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    margin: 0 0 16px;
}

.page-slug-primary-sleep-therapies > p {
    font-family: var(--bsm3-font-body);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    margin: 0 0 20px;
}

/* TEMP -- 22 Sep 2026, help note above the 4 temp "Build plan" links in
   dashboard.php's Build tab. Remove alongside .bsst-temp-buildplan-list
   once that block is removed. */
.bsst-temp-note {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-style: italic;
    opacity: var(--bsm3-opacity-medium);
    margin: 4px 0 8px;
}

/* Sleep nav -- 26 Sep 2026: smaller text, underline on the active tab only,
   Sleep Diary + a small vertical Day/Sleep switch on the right, and on phones
   the four tabs fold into a "Menu" button (Diary + switch stay visible). */
.bsst-tab {
    display: inline-block;
    padding: 0 0 var(--bsm3-space-xs);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    text-decoration: none;
}

.bsst-tab-active {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.bsst-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--bsm3-space-lg);
    flex-shrink: 0;
}

.bsst-diary-btn,
.bsst-menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--bsm3-space-xs);
    padding: 0;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
    white-space: nowrap;
}

.bsst-diary-btn svg,
.bsst-menu-toggle svg {
    width: var(--bsm3-icon-size-nav);
    height: var(--bsm3-icon-size-nav);
    flex-shrink: 0;
}

.bsst-menu-toggle {
    display: none;
}

.bsst-theme-switch {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
}

.bsst-theme-btn {
    display: flex;
    align-items: center;
    gap: var(--bsm3-space-xs);
    padding: 0 var(--bsm3-space-xs);
    border-radius: var(--bsm3-radius-mini-badges);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    cursor: pointer;
    white-space: nowrap;
}

.bsst-theme-btn svg {
    width: var(--bsm3-icon-size-inline);
    height: var(--bsm3-icon-size-inline);
    flex-shrink: 0;
}

.bsst-theme-btn-active {
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

@media (max-width: 900px) {
    .bsst-tabs-row {
        flex-wrap: wrap;
    }
    .bsst-menu-toggle {
        display: flex;
    }
    .bsst-tabs {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: var(--bsm3-space-md);
        padding-top: var(--bsm3-space-sm);
    }
    .bsst-tabs-row.bsst-menu-open .bsst-tabs {
        display: flex;
    }
    .bsst-tab {
        align-self: flex-start;
    }
}

/* ---------- Fix: risk-card grid overlapping "Build your plan" ----------
   .profile-grid inherits `flex:1; min-height:0;` from styleSleep.css, which
   was written back when this grid was the LAST thing in the Build tab panel
   (a flex column) -- flex:1 let it stretch to fill the remaining one-screen
   height, and min-height:0 let it shrink below its own content height if
   that space was tight, relying on there being nothing below it to spill
   onto. Now that "Build your plan" sits right after it in that same flex
   column, a squeeze forces the grid's box shorter than its two rows of
   cards actually need -- and since overflow is visible by default, the
   cards painted past the bottom of that shrunk box, landing on top of
   "Build your plan" below (the reported "MESS"/double-exposure). Overriding
   just for this tab (higher specificity via #panel-profile, so the shared
   rule in styleSleep.css is untouched for any other panel that still
   relies on it) so the grid is sized to its own content instead, and the
   panel's own overflow-y:auto scrolls if the total content runs past one
   screen. Added 19 Sep 2026. */
#bsm-dash-v35 #panel-profile .profile-grid {
    flex: 0 1 auto;
    min-height: auto;
}

/* ---------- Fix: huge top/bottom white space around the tab row ----------
   Corrected 21 Sep 2026, after checking the LIVE DOM (not guessing): the
   21 Sep "clipping fix" above (padding-top: var(--bsst-total-h)) was wrong.
   #bsm-app-root is `position:fixed; top:92px` (60px without the WP admin
   bar) -- ITS OWN top offset already starts the whole app below the
   sitewide #bsm-global-topbar, and #spa-stage sits inside it with no
   further offset needed. That padding-top was only ever necessary back
   when Sleep's OWN header/tabs were ALSO fixed, stacked on top of the
   global bar, needing extra clearance beyond what #bsm-app-root already
   gave -- now that nothing Sleep-specific is fixed any more, it was pure
   double-counted white space. Confirmed live: #bsm-app-root top=92px,
   #spa-stage was still adding another 60px on top of that before this fix.
   Separately, styleSleep.css's own base rule (~line 973) sets
   `#spa-stage { padding: 165px 20px 100px 20px; }` for the OLD full-fixed
   layout -- this stylesheet only ever overrode the 165px (top), never the
   100px (bottom), which is why the bottom gap was untouched by any of
   today's fixes until now. Overriding all four sides here to a normal,
   tight page gutter instead. #spa-stage only exists on this one page
   (master_shell.php), so a bare selector here is safe and can't leak onto
   Sleep Planner / My Sleep Therapies or any other page, even though this
   stylesheet loads on all of them. */
#spa-stage {
    padding: var(--bsm3-space-sm) 20px 20px 20px; /* top was 20px -- too much white space above the Sleep nav, 26 Sep 2026 */
}

/* ---------- Fix: two nested scrollable areas (21 Sep 2026) ----------
   #bsm-dash-v35 .bsm-tab-panel (styleSleep.css, ~line 15390) was built
   for the OLD "one screen per tab" architecture: the panel itself was
   the ONE full-viewport-height scrolling area, sized with
   height: calc(100dvh - old-fixed-header/nav-height) and its own
   overflow-y: auto. Now that this page's header/nav/diary are ordinary
   scrollable content inside .bsm-scroll-viewport (see the restructure
   above), that old rule left the panel ALSO scrolling internally --
   two independent scrollable panes stacked on top of each other. This
   page must have exactly ONE scrollable area (the outer
   .bsm-scroll-viewport, under the sitewide sticky #bsm-global-topbar),
   with the active tab panel simply growing to fit its content and
   scrolling with everything else, same as Body/Mind. Same selector as
   styleSleep.css's rule, loaded after it, so this wins on cascade order
   alone. Michael's direct instruction, 21 Sep 2026. */
#bsm-dash-v35 .bsm-tab-panel {
    height: auto;
    min-height: 0;
    overflow-y: visible;
}

/* ---------- Risk card refresh (Build tab only) ---------- */
/* Scoped to .profile-grid so dashboard.php's other tabs (Explore's
   .prog-card etc.) that also use the bare .ds-card class are untouched.
   Prefixed with #bsm-dash-v35 (19 Sep 2026 fix): styleSleep.css's own
   "#bsm-dash-v35 h3, ... p, ... span, ..." rule (line ~33065 there) has
   an ID in it, which beats a class-only selector no matter how many
   classes it has or how much later it loads -- these four rules were
   silently losing that fight and never actually applying, which is why
   the risk cards kept showing the old Inter/teal look even after this
   whole block was added. Matching that ID here is what makes these win. */

#bsm-dash-v35 .profile-grid.bsm-grid {
    font-family: var(--bsm3-font-body);
}

#bsm-dash-v35 .profile-grid .ds-card h3 {
    font-family: var(--bsm3-font-body);
}

#bsm-dash-v35 .profile-grid .ds-card p {
    font-family: var(--bsm3-font-body);
    opacity: var(--bsm3-opacity-high);
}

.profile-grid .ds-card {
    border-radius: var(--bsm3-radius-primary-cards);
}

#bsm-dash-v35 .profile-grid .status-txt,
#bsm-dash-v35 .profile-grid .card-updated-date {
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    letter-spacing: 0.02em;
}

/* Status dot + label colours -- styleSleep.css only ever defined
   .dot-green/.txt-grey (itself using the old --bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong, not a real
   green) and .dot-grey/.txt-grey; .dot-red/.dot-orange/.dot-yellow and
   their .txt- equivalents were never defined at all, so a Severe/High/
   Elevated card's dot and label rendered with no colour whatsoever.
   Same 5 hex values dashboard.php already uses inline for each card's
   score bar, so the dot/label always match that same card's bar. */

/* The "On track" card's checkmark + score + "RESULT" label (card-slim,
   priority 4 only) inherited .u-color-var-brand-green, which -- despite
   the name -- is also --bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong, not green. Recoloured to the same
   var(--bsm3-color-status-normal-green-2E9E6C-use-on-status-normal) used everywhere else "Normal" shows up on this tab. */

/* ---------- Wellness Study Feedback pill cards (Stage 4 cont'd, 19 Sep
   2026 -- forensic rebuild against Chris's "SLEEP HUB NEW VERSION"
   mockup) ----------
   Replaces the .profile-grid checkmark-card layout above (rules kept
   in place above for the record, but .profile-grid no longer appears
   anywhere in dashboard.php's markup, so they no longer match anything)
   with the compact single-row colour-coded pill cards the mockup
   actually shows: condition name + inline status + a single link, no
   checkmark, no separate score bar. Colours reuse the exact same 5 hex
   values dashboard.php's own $BSM_STATUS_DISPLAY array defines
   (red/orange/yellow/green/grey), scoped with the same #bsm-dash-v35
   prefix the block above needed to beat styleSleep.css's own ID-selector
   rules -- same specificity trap, same fix. */
#bsm-dash-v35 .wellness-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

.wellness-subtitle {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
    opacity: var(--bsm3-opacity-medium);
    margin: -6px 0 16px;
    max-width: 640px;
}

@media (max-width: 900px) {
    #bsm-dash-v35 .wellness-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    #bsm-dash-v35 .wellness-grid { grid-template-columns: 1fr; }
}

#bsm-dash-v35 .wellness-card {
    display: block;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 14px 16px;
    cursor: pointer;
    font-family: var(--bsm3-font-body);
}




#bsm-dash-v35 .wellness-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

#bsm-dash-v35 .wellness-title {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

#bsm-dash-v35 .wellness-status.status-badge {
    margin-bottom: 0;
}

#bsm-dash-v35 .wellness-card .status-txt {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
}

#bsm-dash-v35 .wellness-link {
    display: block;
    margin-top: 10px;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

/* ---------- Build your plan section ---------- */

.buildplan-section {
    font-family: var(--bsm3-font-body);
    display: block;
    margin-top: 28px;
}

.buildplan-heading {
    margin: 0 0 4px;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.buildplan-sub {
    margin: 0 0 16px;
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-family: var(--bsm3-font-body);
    opacity: var(--bsm3-opacity-high);
    max-width: 720px;
}

.buildplan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.plan-card {
    display: block;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 16px 18px;
}

.plan-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.plan-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.plan-card-desc {
    margin: 6px 0 12px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-family: var(--bsm3-font-body);
    opacity: var(--bsm3-opacity-high);
}

.plan-card-link {
    padding: 0;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
}

.plan-combined {
    grid-column: 1 / -1;
}




@media (max-width: 900px) {
    .buildplan-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Sleep Therapies tab (Stage 4, added 19 Sep 2026) ----------
   Reuses .plan-card / .plan-card-title / .plan-dot /
   .plan-card-desc / .plan-card-link / -locked from the "Build
   your plan" section above for every card here too, so the two tabs look
   like one consistent family rather than two different card styles. Only
   what's genuinely new to this tab (the baseline banner's tag + arrow,
   and the 3-column grid) gets its own rules. */

.therapy-baseline {
    position: relative;
    cursor: pointer;
    padding-right: 40px;
    margin-bottom: 22px;
}

.therapy-baseline-tag {
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    letter-spacing: 0.08em;
    text-transform: capitalize;
    padding: 3px 8px;
    border-radius: var(--bsm3-radius-pills);
    margin-left: 8px;
}

.therapy-baseline-arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
}

.therapy-heading {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.08em;
    opacity: var(--bsm3-opacity-medium);
    margin: 0 0 12px;
}

.therapy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .therapy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .therapy-grid {
        grid-template-columns: 1fr;
    }
    .therapy-baseline {
        padding-right: 18px;
    }
    .therapy-baseline-arrow {
        display: none;
    }
}

/* ---------- Sleep Progress tab (Stage 4, added 19 Sep 2026) ----------
   Merges the existing Sleep Statistics (panel-overview) and Actionable
   Insights (panel-insights) tabs into one view -- see dashboard.php for
   why those two tabs are kept rather than replaced. The ring reads
   --bsm-score-pct / --bsm-score-color, set inline in dashboard.php since
   they're computed at render time from the user's actual sleep score --
   the same reason the pre-existing score bars on the Build tab risk cards
   use an inline style (score-fill above). The pre-existing .donut-wrap
   ring (Sleep Statistics tab) tries the same thing by embedding PHP
   directly inside this THEME'S .css file, which a browser never executes
   -- so that ring likely renders as a plain flat circle. Not fixed here
   (out of scope, pre-existing, not part of what changed this round) --
   flagging in case it comes up. */

.progress-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .progress-grid {
        grid-template-columns: 1fr;
    }
}

.progress-score-card,
.progress-insights-card {
    font-family: var(--bsm3-font-body);
}

.progress-ring-row {
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.progress-ring {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-ring-score {
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-size-section-heading-22px-use-on-h2);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    line-height: 1;
}

.progress-ring-lbl {
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
    letter-spacing: 0.06em;
    opacity: var(--bsm3-opacity-medium);
    margin-top: 2px;
}

.progress-freshness {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.progress-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.progress-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--bsm3-radius-list-rows);
}

.progress-metric-top {
    align-items: center;
    gap: 8px;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    opacity: var(--bsm3-opacity-medium);
}

.progress-metric-val {
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.progress-metric-tag {
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
}

.progress-metric-sub {
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-family: var(--bsm3-font-body);
    opacity: var(--bsm3-opacity-medium);
}

.progress-viewfull {
    padding: 0;
    cursor: pointer;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.progress-insights-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.progress-insights-sub {
    margin: 6px 0 14px;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-family: var(--bsm3-font-body);
    opacity: var(--bsm3-opacity-medium);
}

.progress-insights-empty {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    opacity: var(--bsm3-opacity-medium);
    font-style: italic;
}

.progress-insight-item {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--bsm3-radius-list-rows);
    cursor: pointer;
    margin-bottom: 10px;
}

.progress-insight-content {
    flex: 1;
}

.progress-insight-content strong {
    display: block;
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
}

.progress-insight-content p {
    margin: 2px 0 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    opacity: var(--bsm3-opacity-high);
}

.progress-insight-arrow {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    opacity: var(--bsm3-opacity-medium);
}

/* Day/Sleep theme toggle -- moved out of this header entirely (21 Sep
   2026) into the sitewide #bsm-global-topbar, since that's now the only
   fixed chrome on this page. See css/styleGlobalNav.css's
   .bsmgn-sleep-toggle rules instead. */

/* ---------- Sleep Plans tab (Stage 4 cont'd, 19 Sep 2026) ----------
   Cards summarising the user's saved Sleep Plans (data fetched live from
   sleep_planner.php's own "get_plans" endpoint -- see dashboard.php's
   bsmLoadPlansGrid()). Deliberately similar to, but distinct from,
   .plan-card: these need a 3-button action row .plan-card
   doesn't. ---------------------------------------------------------- */

.savedplans-grid {
    display: block;
}

.savedplans-loading,
.savedplans-empty {
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    opacity: var(--bsm3-opacity-medium);
    padding: 16px 0;
}
.savedplans-empty { font-size: var(--bsm3-text-body-use-on-reading-text); } /* 29 Sep 2026 body-text sweep: reading text split from a mixed rule */

.savedplan-card {
    display: block;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.savedplan-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.savedplan-badge {
    display: inline-block;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-transform: capitalize;
}

.savedplan-stats {
    margin: 6px 0 14px;
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    opacity: var(--bsm3-opacity-medium);
}

.savedplan-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.savedplan-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bsm3-radius-pills);
    padding: 8px 16px;
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
}

/* ---------- Sleep Planner colour pass (Stage 4 cont'd, 19 Sep 2026) ----------
   Chris's note: "Nothing has changed in that page apart from visual
   colours and css" -- sleep_planner.php's own HTML/layout/functionality
   is untouched. This just re-points its existing brand.css variables
   (styleSleep.css uses --bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong/--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon/etc. throughout that
   whole page, both Day and Sleep themes) at the new Stage-2 --bsm2-*
   sleep palette, scoped tightly to this one page (.page-slug-sleep-planner,
   the body class functions.php's own body_class filter already adds) so
   nothing else that shares styleSleep.css's variables is touched. Matches
   .np-wrapper (the page's own theme-switch target) at every specificity
   styleSleep.css itself uses for it, and loads after style_sleep_fn (see
   functions.php's wp_enqueue_style dependency array), so this always wins
   the cascade without needing !important anywhere styleSleep.css doesn't
   already use it. ------------------------------------------------------ */

/* Reactive zone title colour -- moved out of an inline style= in
   sleep_planner.php (brand-compliance fix, 21 Sep 2026). Scoped to this
   page only; uses the existing old-system --bsm3-color-status-severe-red-C0392B-use-on-status-severe token since this
   page is explicitly not part of the bsm2 colour refresh (see note above). */

/* =====================================================================
   MOVED FROM INLINE style="" (24 Sep 2026)
   These values used to be written straight into the markup of the sleep
   pages. The markup now carries a class and the values live here, all
   values are --bsm3-* variables from brand.css (25 Sep 2026). Colours are Day-only:
   Sleep mode styling for these elements lives in styleSleepMode.css.
   ===================================================================== */

/* Focus Area badge -- apnea.php / insomnia.php / circadian.php / legs.php */

/* CBT-i Module 0 -- insomnia score + status (cbti_module_0.php) */
#bsm-app-root #spa-stage #bsm-module-0-wrapper .bsm-mod0-score { font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .bsm-mod0-status-label { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }

/* Circadian -- target schedule form starts hidden unless already shifting
   (circadian.php). The Edit/Set buttons still open it by script. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper #cir_phase_form_wrap { display: none; }
#bsm-app-root #spa-stage #circadian-dashboard-wrapper #cir_phase_form_wrap.is-open { display: block; }

/* Jet lag trip card (jetlag-section.php) */
#bsm-app-root #spa-stage .bsm-block.bsm-jetleg-block {
    display: block !important;
    border-radius: var(--bsm3-radius-primary-cards);
    padding: var(--bsm3-space-lg);
}
#bsm-app-root #spa-stage .bsm-block.bsm-jetleg-block.bsm-jetleg-block--gap { margin-bottom: var(--bsm3-space-lg); }

/* Sleep dashboard score ring colour (dashboard.php). The score % itself is
   set by a one-line script from the ring's data-score attribute. */

/* primary-sleep-therapies -- added 25 Sep 2026: this page shares the Sleep
   Hub nav bar (menus/menu_sleep_hub.php) but never had its own nn-* block,
   so on desktop the mobile "Sleep Hub Menu" button showed and the links
   were unstyled. Copied straight from .page-slug-my-sleep-therapies. */

.page-slug-primary-sleep-therapies .nn-menu-wrap { width:100%; margin:0; padding:0; position:relative; z-index:100; }
.page-slug-primary-sleep-therapies .nn-mini-menu { display:flex; justify-content:flex-start; align-items:center; gap:var(--bsm3-space-sm); padding:var(--bsm3-space-md) 0; list-style:none; margin:0; flex-wrap:nowrap; }

.page-slug-primary-sleep-therapies .nn-desktop-title {
  font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-medium-14px-use-on-text);
  text-transform: capitalize;
  transition:0.2s; display:flex; align-items:center; gap:var(--bsm3-space-xs); margin-right:var(--bsm3-space-xs); flex-shrink:0;
}

.page-slug-primary-sleep-therapies .nn-mini-menu a.nn-nav-link { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size:var(--bsm3-text-small-12px-use-on-text);
  transition:0.2s; cursor:pointer; padding-bottom:var(--bsm3-space-xs); white-space:nowrap; flex-shrink:0;
}

.page-slug-primary-sleep-therapies .nn-mini-menu a.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.page-slug-primary-sleep-therapies .nn-nav-sep { font-size:var(--bsm3-text-medium-14px-use-on-text); flex-shrink:0; user-select:none;
}

.page-slug-primary-sleep-therapies .nn-menu-toggle { display:none; }

.page-slug-primary-sleep-therapies .nn-mobile-hub-link { display:none; }

@media (max-width:900px) {
.page-slug-primary-sleep-therapies .nn-menu-inner { padding:0 var(--bsm3-space-lg); position:relative; }
.page-slug-primary-sleep-therapies .nn-menu-toggle { display:flex; align-items:center; justify-content:center; width:100%; padding:var(--bsm3-space-md); border-radius:var(--bsm3-radius-status-cards); cursor:pointer; margin:var(--bsm3-space-sm) 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-transform: capitalize; font-size:var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-primary-sleep-therapies .nn-mini-menu { display:none; position:absolute; top:100%; left:var(--bsm3-space-lg); right:var(--bsm3-space-lg); border-radius:var(--bsm3-radius-status-cards); padding:var(--bsm3-space-lg); z-index:999; flex-direction:column; align-items:flex-start; gap:0; }
.page-slug-primary-sleep-therapies .nn-mini-menu.open { display:flex; }
.page-slug-primary-sleep-therapies .nn-desktop-title { width:100%; padding-bottom:var(--bsm3-space-sm); margin-bottom:var(--bsm3-space-sm); margin-right:0; font-size:var(--bsm3-text-large-16px-use-on-text); }
.page-slug-primary-sleep-therapies .nn-mini-menu a.nn-nav-link { width:100%; padding:var(--bsm3-space-sm) 0; font-size: var(--bsm3-text-medium-14px-use-on-text); }
.page-slug-primary-sleep-therapies .nn-nav-sep { display:none; }
.page-slug-primary-sleep-therapies .nn-mobile-hub-link {
    display:block; width:100%; padding:var(--bsm3-space-sm) 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
  }
.page-slug-primary-sleep-therapies .nn-mobile-hub-link.active { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
}

.page-slug-primary-sleep-therapies .nn-mini-menu a.nn-nav-pill {
  display:inline-flex; align-items:center; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size:var(--bsm3-text-small-12px-use-on-text);
  padding:var(--bsm3-space-xs) var(--bsm3-space-md); border-radius:var(--bsm3-radius-pills); transition:0.2s;
  white-space:nowrap; flex-shrink:0; margin-left:var(--bsm3-space-xs);
}

.page-slug-primary-sleep-therapies .nn-nav-pill.active .nn-pill-dot { display:inline-block; }

@media (max-width:900px) {
.page-slug-primary-sleep-therapies .nn-mini-menu a.nn-nav-pill {
    width:auto; border-radius:var(--bsm3-radius-pills); text-align:center; padding:var(--bsm3-space-sm) var(--bsm3-space-lg);
    font-size:var(--bsm3-text-medium-14px-use-on-text); margin-top:var(--bsm3-space-sm); margin-left:0; align-self:flex-start;
  }
}

/* My Sleep Therapies capacity bar: full = red (was a hex colour set by script) -- 25 Sep 2026 */

/* ===== CONDITION PAGE POP-UP FORMS -- 26 Sep 2026 =====
   "Update my profile" forms on Apnea, Insomnia, Circadian and Restless Legs, Apnea's results-info
   pop-up and the Restless Legs day plan now open by adding .bsm-is-open (and close by adding
   .u-display-none) instead of an inline style. body.bsm-scroll-locked replaces the inline
   body overflow lock while one is open. */
#bsm-app-root :is(#bsm-edit-profile-overlay, #bsm-results-info-overlay, #bsm-insomnia-edit-overlay, #bsm-circadian-edit-overlay, #bsm-legs-edit-overlay, #bsm-legs-dayplan-overlay).bsm-is-open {
    display: flex;
}

body.bsm-scroll-locked {
    overflow: hidden;
}

/* Pop-ups sit inside the Sleep area, below the site header -- 26 Sep 2026.
   They were fixed to the whole window, so the top of the pop-up (title, close
   button, first question) slid under the fixed site header. While open they
   are moved into #bsm-app-root (which already starts below the header), so
   filling that box instead keeps the whole pop-up visible. */
#bsm-app-root > :is(#bsm-edit-profile-overlay, #bsm-results-info-overlay, #bsm-insomnia-edit-overlay, #bsm-circadian-edit-overlay, #bsm-legs-edit-overlay, #bsm-legs-dayplan-overlay) {
    position: absolute !important;
    inset: 0 !important;
}

#bsm-app-root > :is(#bsm-edit-profile-overlay, #bsm-results-info-overlay, #bsm-insomnia-edit-overlay, #bsm-circadian-edit-overlay, #bsm-legs-edit-overlay, #bsm-legs-dayplan-overlay) > * {
    max-height: 100% !important;
}

/* ===== SLEEP <-> WELLNESS ASSESSMENT -- 26 Sep 2026 (Sleep Phase 3) =====
   Layout for "Your Study" (the assessment's Symptom Count dial + "Your Answers"
   list, drawn by sleep_platform/partials/sleep_assessment_ssot.php) and the small
   source headings in the shared "Update my profile" pop-up. Colours live in the
   Day and Sleep layers. */
.bsm-ssot-study {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
}

.bsm-ssot-source,
.bsm-epm-source {
    display: block;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-transform: capitalize;
}

.bsm-epm-source {
    margin: calc(var(--bsm3-space-xs) * -1) 0 var(--bsm3-space-md) 0;
}

.bsm-ssot-study-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-lg);
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}

.bsm-ssot-dial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bsm3-space-xs);
    flex: 0 0 auto;
}

.bsm-ssot-status {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-transform: capitalize;
    text-align: center;
}

.bsm-ssot-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bsm3-space-sm);
    flex: 1 1 200px;
}

.bsm-ssot-answers-label {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-transform: capitalize;
}

.bsm-ssot-answers {
    margin: 0;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-status-cards);
}

.bsm-ssot-disclaimer {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}
/* ===== end SLEEP <-> WELLNESS ASSESSMENT ===== */

/* ===== CONDITION PAGES: ONE FLIP-CARD DESIGN + BACK/NEXT PILLS -- 26 Sep 2026 =====
   Apnea, Circadian and Restless Legs now use Insomnia's flip cards (the Insomnia card
   rules above were widened to all four pages). The hint is just the flip icon, and a
   long card back scrolls instead of running under it. */
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-back {
    overflow-y: auto !important;
    padding-top: var(--bsm3-space-xxl) !important;
}

/* 27 Sep 2026: the flip icon sits top-left on both faces, clear of the text */
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) :is(.bsm-flip-reveal-hint, .bsm-flip-back-hint) {
    top: var(--bsm3-space-md) !important;
    left: var(--bsm3-space-md) !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    text-align: left !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) :is(.bsm-flip-reveal-hint, .bsm-flip-back-hint) {
    font-size: var(--bsm3-text-large-16px-use-on-text) !important;
}

#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-next-pill-row:has(.bsm-back-pill) {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--bsm3-space-sm) !important;
}

.bsm-ssot-stat {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    text-align: center;
}
/* ===== end CONDITION PAGES ===== */

/* ===== SLEEP NAV: BUILD MENU -- 27 Sep 2026 =====
   Hovering (or tabbing to) Build shows the four sleep conditions. On phones the
   four links sit indented under Build inside the Menu. Colours in the Day/Sleep layers. */
.bsst-tab-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.bsst-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--bsm3-space-md) * -1);
    z-index: 50;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    min-width: 180px;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
}

.bsst-tab-group:hover .bsst-submenu,
.bsst-tab-group:focus-within .bsst-submenu {
    display: flex;
}

.bsst-subtab {
    display: block;
    padding: var(--bsm3-space-xs) 0;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .bsst-submenu,
    .bsst-tab-group:hover .bsst-submenu {
        display: flex;
        position: static;
        min-width: 0;
        padding: var(--bsm3-space-xs) 0 0 var(--bsm3-space-lg);
    }
}
/* ===== end SLEEP NAV: BUILD MENU ===== */

/* Compare pop-up inside Sleep: fills the Sleep area below the site header,
   like the other pop-ups (27 Sep 2026) */
#bsm-app-root > .bsm-verif-compare-overlay.bsm-is-open {
    position: absolute !important;
    inset: 0 !important;
}

/* "Update my profile" pop-up: room for the answers (27 Sep 2026). It was held to
   the 500px standard width, so five answer buttons squeezed and words spilled out.
   Now up to the wide width, and each answer button sizes to its own words. */
#bsm-app-root #bsm-edit-profile-modal {
    max-width: var(--bsm3-width-wide) !important;
}

#bsm-app-root #bsm-edit-profile-modal .bsm-epm-tab-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
}

/* ===== ASSESSMENT TAB: Your Answers edit mode -- 27 Sep 2026 =====
   Edit turns "Your Answers" into the assessment's own questions (full wording) with
   drop-downs of its own answers; colours in the Day/Sleep layers. */
.bsm-ssot-answers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bsm3-space-md);
}

.bsm-ssot-edit {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}

.bsm-ssot-edit.u-display-none {
    display: none !important;
}

.bsm-ssot-edit-section {
    margin-top: var(--bsm3-space-sm);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-transform: capitalize;
}

.bsm-ssot-edit-row {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
}

.bsm-ssot-edit-q {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.bsm-ssot-edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--bsm3-space-sm);
    border-radius: var(--bsm3-radius-status-cards);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
}

.bsm-ssot-edit-actions {
    display: flex;
    gap: var(--bsm3-space-md);
    flex-wrap: wrap;
}

.bsm-ssot-edit-msg {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}
/* ===== end ASSESSMENT TAB edit mode ===== */

/* =====================================================================
   FOUNDATION THERAPIES BAR -- 27 Sep 2026
   One bar, same on all 4 condition pages (Apnea, Insomnia, Circadian,
   Restless Legs). Copies the Apnea bar's layout exactly. Colours come
   from the Day / Sleep layers, like every other Sleep card.
   ===================================================================== */
#bsm-app-root #spa-stage :is(#apnea-journey-wrap, #bsm-spa-root, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-edu-strategies-bar.bsm-fnd-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transform: none !important;
}
#bsm-app-root #spa-stage :is(#apnea-journey-wrap, #bsm-spa-root, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-edu-strategies-bar.bsm-fnd-bar:hover {
    opacity: var(--bsm3-opacity-high) !important;
    transform: none !important;
}
#bsm-app-root #spa-stage :is(#apnea-journey-wrap, #bsm-spa-root, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-fnd-bar .bsm-edu-strategies-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
#bsm-app-root #spa-stage :is(#apnea-journey-wrap, #bsm-spa-root, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-fnd-bar .bsm-edu-most-effective-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    white-space: nowrap !important;
}
#bsm-app-root #spa-stage :is(#apnea-journey-wrap, #bsm-spa-root, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-fnd-bar :is(.pg-apnea-i009, .pg-apnea-i010) {
    display: block !important;
}

/* Test cards (Verification > Tests & Monitors): space inside the card and a
   normal-width View Product button -- 27 Sep 2026 */
#bsm-app-root .bsm-verif-prod {
    padding: var(--bsm3-space-md) !important;
    gap: var(--bsm3-space-sm) !important;
}
#bsm-app-root .bsm-verif-prod .bsm-verif-btn {
    align-self: flex-start !important;
    width: auto !important;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg) !important;
}

/* =====================================================================
   CBT-I VIDEO EXTRAS -- 27 Sep 2026 (sleep_platform/partials/cbti_video_player.php)
   Line under the title, "Tool:" tag for the last 5 seconds, end card.
   Colours come from the Day / Sleep layers.
   ===================================================================== */
#bsm-video-overlay-sub {
    position: absolute; top: 64px; left: 60px; z-index: 9999;
    padding: 6px 12px; font-size: var(--bsm3-text-body-use-on-reading-text);
    border-radius: var(--bsm3-radius-mini-badges);
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
#bsm-video-overlay-sub.show { opacity: 1; }
#bsm-video-tooltag {
    position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); z-index: 9999;
    padding: 8px 16px; font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    border-radius: var(--bsm3-radius-pills); white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
#bsm-video-tooltag.show { opacity: 1; }
#bsm-video-endcard {
    display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10001; width: min(90vw, var(--bsm3-width-standard)); box-sizing: border-box;
    padding: var(--bsm3-space-xl); border-radius: var(--bsm3-radius-primary-cards);
    flex-direction: column; gap: var(--bsm3-space-md);
}
#bsm-video-endcard.show { display: flex; }
#bsm-video-endcard .bsm-video-endcard-title {
    font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
#bsm-video-endcard .bsm-video-endcard-row { display: flex; align-items: center; gap: var(--bsm3-space-sm); flex-wrap: wrap; }
#bsm-video-endcard .bsm-video-endcard-icon { font-size: var(--bsm3-text-large-16px-use-on-text); }
#bsm-video-endcard .bsm-video-endcard-name { flex: 1; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#bsm-video-endcard .bsm-video-endcard-btn {
    font-size: var(--bsm3-text-medium-14px-use-on-text); padding: 10px 20px;
    border-radius: var(--bsm3-radius-mini-badges); cursor: pointer; font-family: inherit;
}
#bsm-video-endcard .bsm-video-endcard-continue { align-self: flex-end; }
/* "List full" line when Add is refused (capacity guard, 28 Sep 2026). */
#bsm-video-endcard .bsm-video-endcard-full { font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
#bsm-video-endcard .bsm-video-endcard-full a { text-decoration: underline; }

/* =====================================================================
   SAVED PLANS -- 27 Sep 2026
   ===================================================================== */
/* View Details box starts below the site's top bar (it slid up under it). */
#np-canvas-overlay.np-canvas-overlay {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 60px - var(--bsm3-space-md)) !important;
}
/* No indent on the plan's heading. */
#sp-sleeprenderer-root .bsm-plan-page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Therapy rows = My Sleep Therapies cards, one under the other. */
#sp-sleeprenderer-root .bsm-plan-mtd-card {
    margin: var(--bsm3-space-sm) var(--bsm3-space-md);
}
/* Pop-ups opened from inside View Details sit above it. */
#np-modal-config, #np-modal-media {
    z-index: 10002 !important;
}
.np-modal-overlay.bsm-is-open {
    display: flex !important;
}
#np-modal-media .np-modal-media-title {
    margin: 0;
    text-align: center;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
/* "Back to plans" -- only while editing a saved plan. */
#np-screen-builder .np-back-to-plans {
    display: none !important;
    width: auto;
    margin-bottom: var(--bsm3-space-md);
}
#np-screen-builder .np-back-to-plans.bsm-is-open {
    display: inline-flex !important;
}

/* "Got it" pop-up on entering Sleep: centred and short (27 Sep 2026). */
.bsm-entry-popup-box {
    padding: var(--bsm3-space-xl) var(--bsm3-space-xl) !important;
}
.bsm-entry-popup-icon {
    margin-bottom: var(--bsm3-space-sm) !important;
}
/* The moon icon is an SVG with no size, so it grew to the box's full width
   (about 370px tall) and pushed the pop-up off the screen. Keep it icon-sized:
   1em = the icon's own font-size token (sweep fix, 27 Sep 2026). */
.bsm-entry-popup-icon svg {
    width: 1em;
    height: 1em;
}
.bsm-entry-popup-text {
    margin: 0 0 var(--bsm3-space-lg) 0 !important;
}

/* =====================================================================
   SLEEP PROBLEM BUTTONS -- 27 Sep 2026 (sleep_platform/partials/sleep_conditions.php)
   Sleep Planner + My Sleep Therapies: All / Apnea / Insomnia / Circadian /
   Restless Legs. Colours come from the Day / Sleep layers.
   ===================================================================== */
.bsm-cond-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-md);
}
.bsm-cond-btn {
    padding: 6px 14px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    font-family: inherit;
    cursor: pointer;
}
.bsm-cond-btn.bsm-cond-active { font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.bsm-cond-hide { display: none !important; }
.bsm-cond-heading {
    grid-column: 1 / -1;
    margin: var(--bsm3-space-md) 0 var(--bsm3-space-xs);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

/* CBT-I line in a sleep plan: today's module, Open, Reschedule -- 27 Sep 2026 */
.bsm-cbti-line {
    display: flex !important;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    margin-top: var(--bsm3-space-sm);
}
.bsm-cbti-line .bsm-cbti-line-text {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
.bsm-cbti-line .bsm-cbti-line-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}


/* ===== PRIMARY SLEEP THERAPIES POP-UP -- 28 Sep 2026 (layout only) =====
   Shown before any therapies button on /primary-sleep-therapies/ opens My Sleep Therapies.
   Hidden until JS adds .psth-popup-open. Colours in styleSleepDay.css / styleSleepMode.css. */
#psth-wrapper .psth-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: var(--bsm3-space-lg);
}

#psth-wrapper .psth-popup.psth-popup-open {
    display: flex;
}

#psth-wrapper .psth-popup-backdrop {
    position: absolute;
    inset: 0;
    opacity: var(--bsm3-opacity-high);
}

#psth-wrapper .psth-popup-box {
    position: relative;
    width: 100%;
    max-width: var(--bsm3-width-standard);
    padding: var(--bsm3-space-xl);
    border-radius: var(--bsm3-radius-primary-cards);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bsm3-space-lg);
}

#psth-wrapper .psth-popup-msg {
    margin: 0;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
}

#psth-wrapper .psth-popup-continue {
    border-radius: var(--bsm3-radius-pills);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
}
/* ===== end PRIMARY SLEEP THERAPIES POP-UP ===== */


/* ===== MY SLEEP THERAPIES -- 28 Sep 2026 (layout only) =====
   1. Cards: buttons sit inside the card border (the 32px row height from
      styleTherapies.css and the 10px top margin every button gets above were
      pushing them out). Buttons line up along the bottom of each card.
   2. Card text: 8-word excerpt + "more" link, full text for 10 seconds.
   3. My Therapies / All Therapies tabs: short, one line, no wrapping.
   4. Sleep problem filters (also on Sleep Planner): one line of text links
      on mobile, scrolls sideways instead of wrapping.
   Colours in styleSleepDay.css / styleSleepMode.css. */
#sp-mysleeptherapies-root .mtd-card {
    gap: var(--bsm3-space-md);
}

#sp-mysleeptherapies-root .mtd-card .mtd-card-row2 {
    height: auto;
    margin-top: auto;
    align-items: stretch;
}

#sp-mysleeptherapies-root .mtd-card .mtd-card-row2 .mtd-btn,
#sp-mysleeptherapies-root .mtd-card .mtd-card-row2 .mtd-tag-badge {
    height: auto;
    margin: 0;
    padding: var(--bsm3-space-sm) var(--bsm3-space-sm);
    white-space: nowrap;
}

#sp-mysleeptherapies-root .mtd-card-desc .mst-desc-full {
    display: none;
}

#sp-mysleeptherapies-root .mtd-card-desc.mst-desc-open .mst-desc-full {
    display: inline;
}

#sp-mysleeptherapies-root .mtd-card-desc.mst-desc-open .mst-desc-short { /* the link stays, as "less" (7 Oct 2026) */
    display: none;
}

#sp-mysleeptherapies-root .mtd-card-desc .mst-desc-more {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

#sp-mysleeptherapies-root .mtd-panel-tabs {
    gap: var(--bsm3-space-sm);
    margin-bottom: var(--bsm3-space-lg);
}

#sp-mysleeptherapies-root .mtd-panel-tabs .mtd-panel-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bsm3-space-xs);
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    border-radius: var(--bsm3-radius-pills);
    white-space: nowrap;
    min-width: 0;
}

#sp-mysleeptherapies-root .mtd-panel-tabs .mtd-count-badge {
    margin-left: 0;
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
}

@media (max-width: 900px) {
    :is(#sp-mysleeptherapies-root, .np-wrapper) .bsm-cond-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--bsm3-space-lg);
        padding-bottom: var(--bsm3-space-xs);
    }

    :is(#sp-mysleeptherapies-root, .np-wrapper) .bsm-cond-row .bsm-cond-btn {
        flex: 0 0 auto;
        margin: 0;
        padding: var(--bsm3-space-xs) 0;
        border-radius: 0;
        white-space: nowrap;
        font-size: var(--bsm3-text-medium-14px-use-on-text);
    }
}
/* ===== end MY SLEEP THERAPIES ===== */


/* ===== CBT-I COURSE PAGE /sleep-cbti/ -- 28 Sep 2026 (layout only) =====
   sleep_platform/cbti/cbti_course.php: title, moon progress row, and the
   Module 0 + Week 1-6 cards, full width, label on the left, text on the right.
   Colours in styleSleepDay.css / styleSleepMode.css.
   Also: the Insomnia page's hidden tool screens (.bsm-view) were all showing
   at once -- "#bsm-spa-root .bsm-block" forced them to display. Fixed below. */
#bsm-spa-root .bsm-block.bsm-view:not(.bsm-view-active) {
    display: none !important;
}

#bsm-app-root #cbti-course {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-lg);
    width: 100%;
    font-family: var(--bsm3-font-body);
}

#bsm-app-root #cbti-course .cbti-title {
    margin: var(--bsm3-space-sm) 0 0;
    font-family: var(--bsm3-font-heading);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

#bsm-app-root #cbti-course .cbti-moons {
    display: flex;
    justify-content: space-between;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-md) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}

#bsm-app-root #cbti-course .cbti-moon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bsm3-space-xs);
    text-decoration: none;
    cursor: pointer;
}

#bsm-app-root #cbti-course .cbti-moon-svg {
    width: var(--bsm3-icon-size-container);
    height: var(--bsm3-icon-size-container);
    stroke-width: var(--bsm3-icon-stroke);
}

#bsm-app-root #cbti-course .cbti-moon-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
}

#bsm-app-root #cbti-course .cbti-moon.cbti-active .cbti-moon-label {
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

#bsm-app-root #cbti-course .cbti-cards {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
}

#bsm-app-root #cbti-course .cbti-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bsm3-space-md) var(--bsm3-space-xl);
    width: 100%;
    box-sizing: border-box;
    padding: var(--bsm3-space-lg) var(--bsm3-space-xl);
    border-radius: var(--bsm3-radius-primary-cards);
    text-decoration: none;
    cursor: pointer;
}

#bsm-app-root #cbti-course .cbti-card.cbti-locked,
#bsm-app-root #cbti-course .cbti-moon.cbti-locked {
    cursor: not-allowed;
    opacity: var(--bsm3-opacity-medium);
}

#bsm-app-root #cbti-course .cbti-card-left {
    display: flex;
    align-items: center;
    gap: var(--bsm3-space-md);
    flex: 0 0 auto;
    min-width: var(--bsm3-width-narrow);
}

#bsm-app-root #cbti-course .cbti-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--bsm3-icon-size-container);
    height: var(--bsm3-icon-size-container);
    border-radius: var(--bsm3-radius-status-cards);
}

#bsm-app-root #cbti-course .cbti-card-icon-svg {
    width: var(--bsm3-icon-size-card);
    height: var(--bsm3-icon-size-card);
    stroke-width: var(--bsm3-icon-stroke);
}

#bsm-app-root #cbti-course .cbti-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bsm3-space-xs);
}

#bsm-app-root #cbti-course .cbti-card-label {
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

#bsm-app-root #cbti-course .cbti-badge {
    padding: var(--bsm3-pill-chip-padding);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    white-space: nowrap;
}

#bsm-app-root #cbti-course .cbti-card-right {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    flex: 1 1 var(--bsm3-width-narrow);
    min-width: 0;
}

#bsm-app-root #cbti-course .cbti-card-title {
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

#bsm-app-root #cbti-course .cbti-card-desc {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text);
}

#bsm-app-root #cbti-course .cbti-card-meta {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
}

@media (max-width: 900px) {
    #bsm-app-root #cbti-course .cbti-moons {
        padding: var(--bsm3-space-sm);
        gap: var(--bsm3-space-xs);
    }

    #bsm-app-root #cbti-course .cbti-card {
        padding: var(--bsm3-space-md) var(--bsm3-space-lg);
    }

    #bsm-app-root #cbti-course .cbti-card-left {
        min-width: 0;
    }
}
/* ===== end CBT-I COURSE PAGE ===== */

/* ===== VIEW THERAPY POP-UP (#np-modal-config) -- 29 Sep 2026 (layout) =====
   Starts below the fixed top bar (60px + WP admin bar) so the box and its
   close button are never hidden. Colours live in styleSleepDay / styleSleepMode. */
#np-modal-config {
    padding-top: calc(60px + var(--wp-admin--admin-bar--height, 0px) + var(--bsm3-space-md));
}
#np-modal-config .np-modal-box {
    max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px) - var(--bsm3-space-lg) - var(--bsm3-space-lg));
}
#np-modal-config #conf-media-section {
    margin: var(--bsm3-space-lg) 0;
}
#np-modal-config .bsm-wc-soon-link {
    display: inline-block;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-decoration: none;
}
#np-modal-config .pg-sleep-planner-i011 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
}
/* ===== end VIEW THERAPY POP-UP ===== */

/* ===== SLEEP MENU -- 29 Sep 2026 (Chris) =====
   Sleep Diary as a proper pill so it stands out; "Build Sleep Plan" info
   pop-up (#bsst-planner-info) shown once on the first Planner click. The
   pop-up is moved to <body> when opened, so it starts below the fixed top bar. */
.bsst-diary-btn {
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
}
#bsst-planner-info[hidden] {
    display: none;
}
#bsst-planner-info {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(60px + var(--wp-admin--admin-bar--height, 0px) + var(--bsm3-space-lg)) var(--bsm3-space-lg) var(--bsm3-space-lg);
}
#bsst-planner-info .bsst-info-box {
    position: relative;
    width: 100%;
    max-width: var(--bsm3-width-standard);
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}
#bsst-planner-info .bsst-info-close {
    position: absolute;
    top: var(--bsm3-space-md);
    right: var(--bsm3-space-md);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--bsm3-radius-pills);
    cursor: pointer;
    line-height: 1;
}
#bsst-planner-info .bsst-info-title {
    margin: 0 var(--bsm3-space-xl) var(--bsm3-space-sm) 0;
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
#bsst-planner-info .bsst-info-text {
    margin: 0 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}
#bsst-planner-info .bsst-info-go {
    display: inline-block;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
}
/* ===== end SLEEP MENU ===== */

/* ===== FOUNDATION TOOL PAGES -- 29 Sep 2026 (Chris) =====
   /sleep-jet-lag/, /sleep-night-shift/, /sleep-phase-shifter/ show circadian.php
   in single-tool mode: a plain heading and just that one tool. */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper[data-cir-only] > .bsm-edu-page-header,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper[data-cir-only] > .bsm-edu-tab-shell,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper[data-cir-only] > .bsm-edu-strategies-bar,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper[data-cir-only] .bsm-tool-nav-grid,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper[data-cir-only] .bsm-tool-anchor-hdr {
    display: none !important;
}
#circadian-dashboard-wrapper[data-cir-only] .bsm-fnd-page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
}
/* The "Foundation" mark -- same badge on the title here and on therapy cards. */
.bsm-fnd-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--bsm3-space-sm);
    border-radius: var(--bsm3-radius-pills);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    letter-spacing: var(--bsm3-section-label-tracking);
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
}
/* ===== end FOUNDATION TOOL PAGES ===== */

/* ===== MY SLEEP THERAPIES VIEW POP-UP (#mst-global-modal) -- 29 Sep 2026 (layout) =====
   Same shape as the Sleep Planner's View pop-up: starts below the fixed top
   bar, bordered box, round close button top-right, pill media button.
   Condition pages (?condition=...) show a plain heading + the cards. */
#mst-global-modal.bsm-modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding: calc(60px + var(--wp-admin--admin-bar--height, 0px) + var(--bsm3-space-lg)) var(--bsm3-space-lg) var(--bsm3-space-lg);
}
#mst-global-modal .bsm-card-popup-box {
    position: relative;
    width: 100%;
    max-width: var(--bsm3-width-standard);
    max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px) - var(--bsm3-space-lg) - var(--bsm3-space-lg));
    overflow-y: auto;
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}
#mst-global-modal .bsm-card-popup-close {
    position: absolute !important;
    top: var(--bsm3-space-md) !important;
    right: var(--bsm3-space-md) !important;
    left: auto !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--bsm3-radius-pills);
    cursor: pointer;
    line-height: 1;
}
#mst-global-modal .pg-mysleeptherapiesdashboard-i003 {
    padding-right: var(--bsm3-space-xl) !important;
    flex-wrap: wrap;
}
#mst-global-modal .u-text-align-center a {
    display: inline-block;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    text-decoration: none;
}
.mst-cond-page .mst-cond-title {
    margin: 0 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
/* ===== end MY SLEEP THERAPIES VIEW POP-UP ===== */

/* ===== APNEA "PLAY THE GAME" + "CHOOSE MY CHANGES" POP-UPS -- 29 Sep 2026 =====
   The page wrapper keeps a leftover fade-in transform, which traps fixed
   pop-ups inside it -- switched off while either pop-up is open. Both start
   below the fixed top bar. (Showing them at all: common.css "SHOW WHAT THE
   PAGE'S OWN SCRIPT SHOWS".) */
#apnea-journey-wrap:has(#bsm-quiz-overlay[style*="display: flex"]),
#apnea-journey-wrap:has(#bsm-commit-overlay[style*="display: flex"]) {
    transform: none !important;
    animation: none !important;
}
#bsm-quiz-overlay,
#bsm-commit-overlay {
    padding: calc(60px + var(--wp-admin--admin-bar--height, 0px) + var(--bsm3-space-lg)) var(--bsm3-space-lg) var(--bsm3-space-lg) !important;
    overflow-y: auto;
    align-items: flex-start !important;
}
/* A tall pop-up (Choose my changes) starts at its top, so its title and close
   button are never hidden under the top bar; short ones still sit centred. */
#bsm-quiz-overlay > #bsm-quiz-modal,
#bsm-commit-overlay > #bsm-commit-modal {
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
}
/* ===== end APNEA POP-UPS ===== */

/* ===== OPEN AIRWAY THERAPY PAGE (/sleep-apnea-healthy-weight/ + /sleep-apnea-open-airway/) -- 29 Sep 2026 =====
   apnea.php in Foundation-only mode: plain heading + the Foundation panel only. */
#bsm-app-root #spa-stage #apnea-journey-wrap[data-apnea-only] > .bsm-edu-page-header,
#bsm-app-root #spa-stage #apnea-journey-wrap[data-apnea-only] > .bsm-edu-tab-shell {
    display: none !important;
}
#bsm-app-root #spa-stage #apnea-journey-wrap[data-apnea-only] .bsm-fnd-page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
}
/* ===== end OPEN AIRWAY THERAPY PAGE ===== */

/* Sleep Planner therapy list: Foundation therapies first, badge beside the name (29 Sep 2026) */
.np-simple-row.np-simple-row-fnd .np-simple-row-left {
    flex-wrap: wrap;
    gap: var(--bsm3-space-xs) var(--bsm3-space-sm);
}

/* ===== RESTLESS LEGS PROGRAMME PAGE (/sleep-legs-programme/) -- 29 Sep 2026 =====
   legs.php in Foundation-only mode: plain heading + the programme panel only. */
#bsm-app-root #spa-stage #bsm-legs-wrapper[data-legs-only] > .bsm-edu-page-header,
#bsm-app-root #spa-stage #bsm-legs-wrapper[data-legs-only] > .bsm-edu-tab-shell {
    display: none !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper[data-legs-only] .bsm-fnd-page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
}
/* ===== end RESTLESS LEGS PROGRAMME PAGE ===== */


/* =====================================================================
   DAY MODE APPEARANCE UPGRADE -- 29 Sep 2026 (Chris) -- LAYOUT PART
   Colours for these live in styleSleepDay.css (Day) / styleSleepMode.css (Sleep).
   Selectors start "#bsm-app-root #spa-stage :is(#bsm-spa-root, *)" (3 ids) to beat the
   older "#bsm-spa-root .bsm-block" display rules.
   ===================================================================== */

/* "← Back" link (sleep_platform/partials/sleep_back_link.php) */
.bsm-back-link {
    display: inline-flex !important;
    align-items: center;
    gap: var(--bsm3-space-xs);
    margin: 0 0 var(--bsm3-space-md) 0 !important;
    padding: 0 !important;
    font-family: var(--bsm3-font-body) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important;
    text-decoration: none !important;
}
.bsm-back-link:hover { text-decoration: underline !important; }

/* Assessment page: the 4 condition cards in a 2x2 grid, each with its icon + one line */
#bsm-app-root #spa-stage #bsm-dash-v35 .wellness-grid.bsm-dash-cond-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--bsm3-space-lg) !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .wellness-card {
    display: flex !important;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-lg) !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .wellness-row {
    align-items: center !important;
    gap: var(--bsm3-space-md) !important;
    flex-wrap: wrap;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .wellness-row .wellness-title { flex: 1 1 auto; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-dash-cond-icon {
    width: var(--bsm3-icon-size-container);
    height: var(--bsm3-icon-size-container);
    flex: 0 0 var(--bsm3-icon-size-container);
    align-items: center;
    justify-content: center;
    border-radius: var(--bsm3-radius-status-cards);
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-dash-cond-icon-svg {
    width: var(--bsm3-icon-size-card);
    height: var(--bsm3-icon-size-card);
    stroke-width: var(--bsm3-icon-stroke);
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-dash-cond-desc {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    line-height: 1.5;
}
@media (max-width: 900px) {
    #bsm-app-root #spa-stage #bsm-dash-v35 .wellness-grid.bsm-dash-cond-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Score dial: gauge on the left, the score + words on its right, bigger */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-study-top .bsm-ssot-dial-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "dial  pct"
        "dial  status"
        "dial  stat";
    align-items: center;
    justify-items: start;
    column-gap: var(--bsm3-space-xl);
    row-gap: var(--bsm3-space-xs);
    flex: 1 1 100% !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .ari-dial-title  { grid-area: title; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .ari-dial-svg    { grid-area: dial; width: 200px; height: 120px; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .ari-dial-pct    { grid-area: pct; align-self: end; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .bsm-ssot-status { grid-area: status; text-align: left !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .bsm-ssot-stat   { grid-area: stat; align-self: start; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
@media (max-width: 900px) {
    #bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-study-top .bsm-ssot-dial-card { column-gap: var(--bsm3-space-md); }
    #bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .ari-dial-svg { width: 140px; height: 84px; }
}

/* Long question lists: number | question + answer | score, in neat rows */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-edu-q-row {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--bsm3-space-md);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important;
    border-radius: 0 !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-edu-q-row .bsm-edu-q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-edu-q-row .bsm-edu-q-text > span:first-child {
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-edu-q-row .bsm-edu-q-text > span + span {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-edu-q-row .bsm-edu-q-value {
    font-family: var(--bsm3-font-mono) !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-pills);
    white-space: nowrap;
}
/* "Your Answers" lists on the 4 condition pages: question left, answer right */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .ari-answer-block .ari-answer-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--bsm3-space-md);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .ari-answer-block .ari-answer-row .ari-answer-a {
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    white-space: nowrap;
}

/* Verification tab: like the Verification Hub -- independent option left, result form right */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-status-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bsm3-space-lg);
    align-items: start;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option {
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option .bsm-verif-prod { display: block; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option .bsm-verif-prod-img {
    width: 100% !important;
    max-width: none !important;
    height: 160px !important;
    object-fit: contain;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--bsm3-radius-status-cards);
    margin-bottom: var(--bsm3-space-md);
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-status-grid .bsm-verif-form {
    padding: var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-primary-cards);
}
@media (max-width: 700px) {
    #bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-status-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Every pop-up box: brand border + rounded corners */
:is(.np-modal-box, .bsm-modal-content, .modal-box, .wcs-modal, .psth-popup-box, .bsm-entry-popup-box, .bsm-card-popup-box,
    #bsm-quiz-modal, #bsm-commit-modal, .bsm-verif-compare, .bsst-info-box, #mst-global-modal .mst-modal-body, #bsm-legs-dayplan-modal > *) {
    border-radius: var(--bsm3-radius-primary-cards) !important;
}
/* ===== end DAY MODE APPEARANCE UPGRADE (layout) ===== */


/* =====================================================================
   SLEEP ROUND 2 -- 30 Sep 2026 (Chris) -- LAYOUT PART
   Colours for these in styleSleepDay.css / styleSleepMode.css, same heading.
   ===================================================================== */

/* Score dial: one more line under the stat -- "You can review and change your answers below." */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-study-top .bsm-ssot-dial-card {
    grid-template-areas:
        "title title"
        "dial  pct"
        "dial  status"
        "dial  stat"
        "dial  note";
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-ssot-dial-card .bsm-ssot-review-note {
    grid-area: note;
    align-self: start;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
}

/* "Symptoms" row at the top of Your Answers: a heading on a pale band */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .ari-answer-block .ari-recap-divider {
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    letter-spacing: 0 !important;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important;
    margin: 0 0 var(--bsm3-space-sm) 0 !important;
    border-radius: var(--bsm3-radius-status-cards) !important;
}

/* Flip cards (What This Means + Patterns & Signs, all 4 conditions): much bigger icons */
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-front .bsm-flip-icon {
    font-size: calc(var(--bsm3-icon-size-container) * 1.5) !important;
    line-height: 1 !important;
    margin-bottom: var(--bsm3-space-md) !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-front .bsm-flip-icon-svg {
    width: calc(var(--bsm3-icon-size-container) * 2) !important;
    height: calc(var(--bsm3-icon-size-container) * 2) !important;
    margin-bottom: var(--bsm3-space-md) !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, #apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-legs-wrapper) .bsm-flip-front .bsm-flip-icon-svg svg {
    width: calc(var(--bsm3-icon-size-container) * 1.1) !important;
    height: calc(var(--bsm3-icon-size-container) * 1.1) !important;
}

/* Verification tab */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-view.u-display-none { display: none !important; }           /* Insomnia showed both tabs at once */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-opt-item[hidden] { display: none !important; }                /* left box follows the choice */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-prod-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;           /* same card width everywhere, even for one card */
    gap: var(--bsm3-space-lg) !important;
}
@media (max-width: 700px) {
    #bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-prod-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) :is(.bsm-verif-prod-grid, .bsm-verif-option) .bsm-verif-prod {
    display: flex !important;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-lg) !important;
    border-radius: var(--bsm3-radius-primary-cards) !important;
    height: 100%;
    box-sizing: border-box;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) :is(.bsm-verif-prod-grid, .bsm-verif-option) .bsm-verif-prod > * { margin: 0 !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) :is(.bsm-verif-prod-grid, .bsm-verif-option) .bsm-verif-prod .bsm-verif-btn {
    align-self: flex-start;
    margin-top: auto !important;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option .bsm-verif-label { margin-bottom: var(--bsm3-space-sm) !important; }
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option .bsm-verif-method-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-option .bsm-verif-method-svg {
    width: calc(var(--bsm3-icon-size-container) * 2.5);
    height: calc(var(--bsm3-icon-size-container) * 2.5);
    stroke-width: var(--bsm3-icon-stroke);
}
/* Compare pop-up: one intro line, then the Level 1-3 cards */
.bsm-verif-compare .bsm-verify-intro {
    display: block;
    margin: 0 0 var(--bsm3-space-md) 0;
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    line-height: 1.6;
}

/* Sleep Planner: warning when a therapy is already in today's plan */
.np-dup-warn {
    margin: var(--bsm3-space-sm) 0 0 0;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}
.np-dup-warn[hidden] { display: none !important; }
/* Pop-ups opened from inside a saved plan (View, Schedule) sit above the plan panel */
#np-modal-track, #np-modal-config, #np-modal-media { z-index: 10050 !important; }

/* Saved plan view */
#sp-sleeprenderer-root .bsm-plan-looks-after {
    margin: 0 0 var(--bsm3-space-md) 0;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-list-rows);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    line-height: 1.5;
}
#sp-sleeprenderer-root .mtd-card-row2 { align-items: center !important; }
#sp-sleeprenderer-root .mtd-card-row2 > * { margin: 0 !important; align-self: center !important; }
#sp-sleeprenderer-root .mtd-card-row2 > :is(.mtd-btn, a, button) { min-height: 40px; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; }
/* Font Awesome isn't loaded on these pages -- its icons showed as empty boxes */
#np-canvas-overlay i.fas, #sp-sleeprenderer-root i.fas { display: none !important; }
/* ===== end SLEEP ROUND 2 (layout) ===== */


/* =====================================================================
   SLEEP ROUND 3 -- 30 Sep 2026 (Chris) -- LAYOUT PART
   ===================================================================== */

/* Apnea Family: the type label sits beside its icon, plain 14px bold text */
#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-types-col .bsm-type-head {
    display: flex !important;
    align-items: center;
    gap: var(--bsm3-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--bsm3-space-md);
}
#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-types-col .bsm-type-head .bsm-type-icon-wrap { margin: 0 !important; }
#bsm-app-root #spa-stage #apnea-journey-wrap .bsm-types-col .bsm-type-head .bsm-type-badge {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--bsm3-text-medium-14px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: 0 !important;
}

/* Verification: a little room left of "Why this helps" */
#bsm-app-root #spa-stage :is(#bsm-spa-root, *) .bsm-verif-prod .bsm-verif-prod-why {
    padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important;
    border-radius: 0 var(--bsm3-radius-status-cards) var(--bsm3-radius-status-cards) 0 !important;
}

/* Saved plan: no separate title row -- the plan's own header carries the close button, tighter spacing */
#np-canvas-overlay.np-has-plan-head .np-canvas-header { display: none !important; }
#np-canvas-overlay.np-has-plan-head .np-canvas-body { padding: var(--bsm3-space-md) var(--bsm3-space-lg) !important; }
#np-canvas-overlay #sp-sleeprenderer-root .bsm-plan-page-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--bsm3-space-md);
    padding-top: 0 !important;
    padding-bottom: var(--bsm3-space-sm) !important;
    margin: 0 0 var(--bsm3-space-md) 0 !important;
}
#np-canvas-overlay #sp-sleeprenderer-root .bsm-plan-page-header p { margin: 0 !important; }
#np-canvas-overlay #sp-sleeprenderer-root .bsm-plan-page-header .np-canvas-close-inline {
    margin-left: auto !important;
    flex-shrink: 0;
}

/* Saved plan: what the plan's techniques do, as small chips (replaces "Looks after") */
#sp-sleeprenderer-root .bsm-plan-aims {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-md) 0;
}
#sp-sleeprenderer-root .bsm-plan-aim {
    display: inline-block;
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    line-height: 1.5;
}
/* ===== end SLEEP ROUND 3 (layout) ===== */


/* ===== CBT-I MODULES: LESS EMPTY SPACE -- 30 Sep 2026 (Chris) ===== */
/* Story slides ("The Sleep Paradox" and the others): no 400px minimum, no 60px top gap */
#bsm-app-root #spa-stage .bsm-story-container {
    min-height: 0 !important;
    padding: var(--bsm3-space-lg) var(--bsm3-space-lg) var(--bsm3-space-md) !important;
    justify-content: flex-start !important;
    gap: var(--bsm3-space-sm);
}
#bsm-app-root #spa-stage .bsm-story-container > span.bsm-block:empty { display: none !important; }
#bsm-app-root #spa-stage .bsm-story-container .bsm-story-dots { margin-top: var(--bsm3-space-md) !important; padding-top: 0 !important; }
#bsm-app-root #spa-stage .bsm-story-container [class*="u-font-size-80px"] {
    font-size: calc(var(--bsm3-icon-size-container) * 1.5) !important;
    margin-bottom: var(--bsm3-space-sm) !important;
}
#bsm-app-root #spa-stage .bsm-story-container [class*="u-font-size-28px"] { margin-bottom: var(--bsm3-space-sm) !important; }
#bsm-app-root #spa-stage .bsm-story-container [class*="margin-top-24px"] { margin-top: var(--bsm3-space-sm) !important; }
/* "The Most Important Tool: Your Sleep Diary" card */
#bsm-app-root #spa-stage #bsm-module-0-wrapper .bsm-card { min-height: 0 !important; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i074 { margin-bottom: var(--bsm3-space-xs) !important; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i075 { margin-bottom: var(--bsm3-space-xs) !important; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i076 { margin-bottom: var(--bsm3-space-md) !important; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i076 > br { display: none; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i077 { margin-top: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; }
#bsm-app-root #spa-stage #bsm-module-0-wrapper .pg-cbti-module-0-i079 { margin-bottom: var(--bsm3-space-md) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; }
/* ===== end CBT-I MODULES: LESS EMPTY SPACE ===== */

/* ===== 30 Sep 2026 (Chris) round 4 ===== */

/* Gap between the top bar and the Sleep menu: 25px on every Sleep page.
   Foundation pages (Jet Lag, Night Shift, Phase Shifter, Healthy Weight, Open Airway,
   Legs Programme) had 165px of top padding = an 88px gap. Top bar is 60px + the admin bar. */
#bsm-portal-root #bsm-app-root.bsm-fnd-shell #spa-stage {
    padding-top: var(--bsm3-space-sm) !important;
}
/* 30 Sep 2026: Foundation pages -- the page area starts BELOW the top bar (and the WordPress admin
   bar), same as the main Sleep pages, so nothing scrolls in a gap above the header. */
body.logged-in #bsm-portal-root #bsm-app-root.bsm-fnd-shell { top: 60px; height: calc(100vh - 60px); }
body.admin-bar.logged-in #bsm-portal-root #bsm-app-root.bsm-fnd-shell { top: 92px; height: calc(100vh - 92px); }
@media (max-width: 900px) {
    body.admin-bar.logged-in #bsm-portal-root #bsm-app-root.bsm-fnd-shell { top: 106px; height: calc(100vh - 106px); }
}
/* My Sleep Therapies: 36px gap -> 25px */
:root :where(.is-layout-constrained) > #sp-mysleeptherapies-root,
.is-layout-constrained > #sp-mysleeptherapies-root {
    margin-top: 8px !important;
}

/* Restless Legs Programme course: flip card icons much bigger, to fill the empty space */
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-flip .bsm-flip-f .bsm-fi-icon {
    font-size: calc(var(--bsm3-icon-size-container) * 2) !important;
    line-height: 1 !important;
    margin: var(--bsm3-space-sm) 0 !important;
}
#bsm-app-root #spa-stage #bsm-legs-wrapper .bsm-legs-course-flip .bsm-flip-front-inner { gap: var(--bsm3-space-sm) !important; }

/* Phase Shifter "Tonight" timeline: centred in its card, circles no longer cut off */
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .pg-circadian-i033 .pg-circadian-i034,
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .pg-circadian-i033 .pg-circadian-i035 {
    display: block !important;
    text-align: center !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .pg-circadian-i033 .bsm-itin-wrap {
    display: block !important;
    width: fit-content !important;
    max-width: calc(100% - 48px) !important;
    margin: var(--bsm3-space-md) auto 0 auto !important;
    padding-left: 32px !important;
    box-sizing: border-box !important;
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .pg-circadian-i033 .bsm-itin-icon {
    left: -45px !important;
    width: 26px !important;
    height: 26px !important;
}

/* Assessment page cards: footer with "Your Assessment" on the left and
   the Foundation therapy links on the right */
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .bsm-dash-cond-foot {
    display: flex !important;
    flex-direction: column !important; /* 30 Sep 2026: stacked on every screen size, like mobile */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: var(--bsm3-space-sm) var(--bsm3-space-md) !important;
    margin-top: auto !important;
    padding-top: var(--bsm3-space-sm) !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .bsm-dash-cond-foot .wellness-link { white-space: nowrap; }
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-left: 0 !important;
    width: 100%;
    min-width: 0;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-lbl {
    font-size: var(--bsm3-text-tiny-10px-use-on-text) !important;
    font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px 5px 5px !important;
    border-radius: var(--bsm3-radius-pills) !important;
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-chip:hover { transform: translateY(-1px); }
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-ic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 50% !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: var(--bsm3-icon-stroke);
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-go {
    font-size: var(--bsm3-text-small-12px-use-on-text) !important;
    transition: transform 0.2s ease !important;
}
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-chip:hover .bsm-dash-fnd-go { transform: translateX(2px); }
@media (max-width: 900px) {
    #bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd { align-items: flex-start !important; margin-left: 0 !important; width: 100%; }
    #bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-row { justify-content: flex-start !important; }
}

/* 30 Sep 2026 (Chris): Sleep World scene cards show the frame at 5s of their video */
    #bsm-sw-wrapper .scene-poster.cabin { background-image: url('https://landlordsangel.com/images/general/cosy_mountain_cabin.jpg') !important; background-size: cover !important; background-position: center !important; }
    #bsm-sw-wrapper .scene-poster.beach { background-image: url('https://landlordsangel.com/images/general/midnight_beach.jpg') !important; background-size: cover !important; background-position: center !important; }

/* ===== 30 Sep 2026 (Chris): BMI Reduction page - "Reduce BMI" card with research tiles ===== */
#apnea-journey-wrap .bsm-strat-card.bsm-bmi-card { grid-column: 1 / -1; gap: var(--bsm3-space-md); }
#apnea-journey-wrap .bsm-strat-card.bsm-bmi-card:hover { transform: none; }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-head { display: flex; align-items: center; gap: var(--bsm3-space-md); }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-head .bsm-strat-icon-wrap { margin-bottom: 0; }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-head h3 { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-ref {
    display: inline-block;
    margin-left: 6px;
    font-style: normal;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-warn {
    display: flex;
    align-items: flex-start;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    line-height: 1.5;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-warn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    line-height: 1;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-research { margin-top: var(--bsm3-space-xs); }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-research-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    letter-spacing: 0.06em;
    margin-bottom: var(--bsm3-space-sm);
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bsm3-space-md);
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stat:hover { transform: translateY(-2px); }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stat-num {
    font-size: calc(var(--bsm3-size-page-title-24px-use-on-h1) * 1.33);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    line-height: 1;
    letter-spacing: -0.01em;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stat-text {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.5;
    flex: 1;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stat-src {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    line-height: 1.4;
}
@media (max-width: 1000px) {
    #apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    #apnea-journey-wrap .bsm-bmi-card .bsm-bmi-stats { grid-template-columns: minmax(0, 1fr); }
}
/* Reduce BMI card: tiny full references under the tiles */
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-refs {
    margin-top: var(--bsm3-space-sm);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    line-height: 1.6;
}
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-refs a { text-decoration: underline; text-underline-offset: 2px; }

/* 30 Sep 2026 (Chris): BMI Reduction tool = the Assessment Biometrics page in a frame */
#bsm-bmi-tool { margin-top: var(--bsm3-space-lg); }
#bsm-bmi-tool .bsm-bmi-frame { display: block; width: 100%; border: 0; }
#apnea-journey-wrap .bsm-bmi-card .bsm-bmi-warn.is-hidden { display: none !important; }

/* ===== 30 Sep 2026 (Chris): Open Airway Therapy page ===== */
/* Every card: the title sits to the right of the icon (same as the Reduce BMI card) */
#apnea-journey-wrap .bsm-strat-card .bsm-strat-head { display: flex; align-items: center; gap: var(--bsm3-space-md); }
#apnea-journey-wrap .bsm-strat-card .bsm-strat-head .bsm-strat-icon-wrap { margin-bottom: 0; }
/* "Your Open Airway Choices" -- the saved choices, same box as "Ready to make a start?" */
#apnea-journey-wrap .bsm-airway-result {
    padding: 22px 24px;
    border-radius: var(--bsm3-radius-primary-cards);
    margin-top: 28px;
    margin-bottom: 24px;
}
#apnea-journey-wrap .bsm-airway-result[hidden],
#apnea-journey-wrap .bsm-commit-launcher[hidden] { display: none !important; }
#apnea-journey-wrap .bsm-airway-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-lg); }
#apnea-journey-wrap .bsm-airway-result-title {
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
#apnea-journey-wrap .bsm-airway-result-title { flex: 1; min-width: 0; }
/* Change button keeps its own size (the phone-width rule makes the launcher button full width) */
#apnea-journey-wrap .bsm-airway-result .bsm-airway-change-btn { width: auto; flex-shrink: 0; }
#apnea-journey-wrap .bsm-airway-result-list { margin: var(--bsm3-space-md) 0 0; padding-left: var(--bsm3-space-xl); }
#apnea-journey-wrap .bsm-airway-result-list li {
    margin: var(--bsm3-space-xs) 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.5;
}
/* ===== end Open Airway Therapy page ===== */

/* ===== 30 Sep 2026 (Chris): Sleep Planner -- "Before you save" pop-up (BMI Reduction / Open Airway Therapy forms) ===== */
#np-modal-forms { z-index: 10002 !important; }
#np-modal-forms .np-modal-forms-title {
    margin: 0 0 var(--bsm3-space-sm);
    text-align: center;
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
#np-modal-forms .np-modal-forms-text { margin: 0 0 var(--bsm3-space-md); font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.55; }
#np-modal-forms .np-modal-forms-list { margin: 0 0 var(--bsm3-space-md); padding-left: var(--bsm3-space-xl); }
#np-modal-forms .np-modal-forms-list li { margin: var(--bsm3-space-xs) 0; font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; }
#np-modal-forms .np-modal-forms-ok { width: 100%; }

/* ===== 30 Sep 2026 (Chris): Saved Sleep Plan -- "Apnea Plan" section ===== */
#sp-sleeprenderer-root .bsm-apnea-plan-card { padding: var(--bsm3-space-lg) var(--bsm3-space-xl); margin-bottom: var(--bsm3-space-xl); border-radius: var(--bsm3-radius-primary-cards); }
#sp-sleeprenderer-root .bsm-apnea-plan-step + .bsm-apnea-plan-step { margin-top: var(--bsm3-space-lg); padding-top: var(--bsm3-space-lg); }
#sp-sleeprenderer-root .bsm-apnea-plan-step-title {
    margin: 0 0 var(--bsm3-space-sm);
    font-size: var(--bsm3-text-large-16px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}
#sp-sleeprenderer-root .bsm-apnea-plan-list { margin: 0; padding-left: var(--bsm3-space-xl); }
#sp-sleeprenderer-root .bsm-apnea-plan-list li {
    margin: var(--bsm3-space-xs) 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    line-height: 1.5;
}

/* ===== 1 Oct 2026 (Chris): Saved Sleep Plan -- "Circadian Plan" section (same box as Apnea Plan) ===== */
#sp-sleeprenderer-root .bsm-cir-plan-trip + .bsm-cir-plan-trip { margin-top: var(--bsm3-space-md); }
#sp-sleeprenderer-root .bsm-cir-plan-link {
    display: inline-block;
    margin-top: var(--bsm3-space-md);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== 1 Oct 2026 (Chris): Night Shift Therapy -- clash message in the Add a Shift form ===== */
#bsm-tool-section-shift .bsm-shift-clash {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: var(--bsm3-space-md);
    margin-bottom: var(--bsm3-space-md);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    line-height: 1.5;
}
#bsm-tool-section-shift .bsm-shift-clash[hidden] { display: none !important; }

/* ===== 1 Oct 2026 (Chris): Foundation page explainer -- one short line under the title (Reset Sleep Window) ===== */
#circadian-dashboard-wrapper[data-cir-only] .bsm-fnd-explainer {
    margin: calc(-1 * var(--bsm3-space-sm)) 0 var(--bsm3-space-lg);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    line-height: 1.5;
}

/* ===== 1 Oct 2026 (Chris): Sleep Assessment -- "nights need you to choose" alert (links to the Scheduler) ===== */
#panel-profile .bsm-sw-alert {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: 0 0 var(--bsm3-space-lg);
    padding: var(--bsm3-status-card-padding);
    border-radius: var(--bsm3-radius-status-cards);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    text-decoration: none;
}
#panel-profile .bsm-sw-alert-go { font-weight: var(--bsm3-weight-bold-700-use-on-h1); white-space: nowrap; }

/* ===== 1 Oct 2026 (Chris, General Improvements V1 A7 + A8): Sleep Planner builder ===== */
/* A7: Save / Update sits top right of the drop zone, on the zone-name line */
#np-screen-builder .np-zone-container { position: relative; }
#np-screen-builder .np-zone-container > .np-save-btn { position: absolute; top: var(--bsm3-space-md); right: var(--bsm3-space-md); z-index: 1; width: auto; margin: 0; padding: var(--bsm3-space-sm) var(--bsm3-space-lg); font-size: var(--bsm3-text-small-12px-use-on-text); }
#np-screen-builder .np-zone-container > .np-save-btn:hover { transform: none; }
#np-screen-builder .np-zone-container .np-zone-title { padding-right: 170px; min-height: 32px; }
/* A8: on phones the time-of-day tabs are plain one-word links on one line, the active one underlined */
#np-screen-builder .np-zone-tabs { display: flex; flex-wrap: nowrap; gap: var(--bsm3-space-sm); margin-bottom: var(--bsm3-space-md); }
@media (max-width: 900px) {
    #np-screen-builder .np-zone-tabs { justify-content: space-between; gap: var(--bsm3-space-xs); }
    #np-screen-builder .np-zone-tabs .np-zone-tab { padding: var(--bsm3-space-xs) 0; border-radius: 0; border-width: 0 0 var(--bsm3-border-thick) 0; font-size: var(--bsm3-text-small-12px-use-on-text); }
}

/* ===== 1 Oct 2026 (Chris): Sleep Planner -- "When you need it" (reactive) is its own drop zone under the day ===== */
#np-screen-builder .np-zone-container.np-reactive-container { margin-top: var(--bsm3-space-lg); min-height: 0; }
#np-screen-builder .np-reactive-container .np-zone-title { padding-right: 0; min-height: 0; flex-wrap: wrap; }
#np-screen-builder .np-zone-hint { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

/* ===== 1 Oct 2026 (Chris): Sleep Planner -- one drop zone at a time. The time-of-day zone shows; "When you
   need it" (reactive) replaces it while the user picks, drags or searches reactive therapies (js: npShowReactive). ===== */
#np-screen-builder .np-canvas .np-zone-container.np-reactive-container { display: none; margin-top: 0; }
#np-screen-builder .np-canvas.np-reactive-on .np-zone-container.np-reactive-container { display: flex; }
#np-screen-builder .np-canvas.np-reactive-on .np-zone-container:not(.np-reactive-container) { display: none; }
#np-screen-builder .np-reactive-container .np-zone-title { padding-right: 90px; }
#np-screen-builder .np-reactive-link { display: none; margin: 0 0 var(--bsm3-space-sm); padding: 0; border: 0; background: var(--bsm3-transparent); cursor: pointer; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: underline; }
#np-screen-builder .np-reactive-link.np-reactive-link-on { display: inline-block; }

/* ===== 1 Oct 2026 (Chris, General Improvements V1 A11 + A13): Sleep Planner -- list tiles + pinned drop zone =====
   A13: each therapy is a tile = icon + name (no "Tap to Add" -- the whole tile taps). Foundation = a small
   "F" square (.bsm-fnd-badge.bsm-fnd-f, colour in the Day / Sleep files). On phones: two tiles per row, and
   a therapy's short name (therapies_system.short_name) replaces its full name when it has one.
   A11: on phones the tabs + drop zone (.np-canvas) stay pinned under the site header while the list scrolls
   underneath; js npPinTop() sets --np-pin-top (header bottom minus the plan-name box, which scrolls away).
   The drop zone is capped at about a third of the screen and scrolls inside itself. */
:is(#np-screen-builder, #sp-mysleeptherapies-root) .bsm-fnd-badge.bsm-fnd-f { /* + My Sleep Therapies, Chris 6 Oct 2026 */
    justify-content: center;
    flex-shrink: 0;
    width: var(--bsm3-space-lg);
    height: var(--bsm3-space-lg);
    padding: 0;
    border-radius: var(--bsm3-radius-mini-badges);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    letter-spacing: normal;
    line-height: 1;
}
#np-screen-builder .np-simple-row-left { min-width: 0; }
#np-screen-builder .np-tile-short { display: none; }
@media (max-width: 900px) {
    #np-screen-builder #np-pills-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bsm3-space-sm); }
    #np-screen-builder #np-pills-list > :not(.np-simple-row) { grid-column: 1 / -1; }
    #np-screen-builder #np-pills-list .np-simple-row { margin-bottom: 0; padding: var(--bsm3-space-sm); }
    #np-screen-builder #np-pills-list .np-simple-row-left { gap: var(--bsm3-space-xs); }
    #np-screen-builder #np-pills-list .np-simple-row-left span { overflow-wrap: anywhere; }
    #np-screen-builder #np-pills-list .np-has-short .np-tile-name { display: none; }
    #np-screen-builder #np-pills-list .np-has-short .np-tile-short { display: inline; }

    #np-screen-builder .np-canvas { position: sticky; top: var(--np-pin-top, 0px); z-index: 50; padding-bottom: var(--bsm3-space-sm); }
    /* .np-wrapper's overflow-x: hidden turns it into a scroll box, which stops anything inside from pinning.
       clip cuts off sideways spill the same way without making a scroll box. */
    .np-wrapper:has(#np-screen-builder) { overflow-x: clip; }
    #np-screen-builder .np-canvas .np-zone-container { min-height: 0; max-height: 35vh; overflow-y: auto; }
}

/* ===== 2 Oct 2026 (Chris, A13): Sleep Planner drop zone -- added therapies as compact tiles, two per row
   where there is room (one on a narrow phone), bin without its box, padding cut to the minimum. Short name on phones. ===== */
/* two per row when the zone is wide enough (each at least 180px), one per row on a narrow phone */
#np-screen-builder .np-zone [id^="items-"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(180px, calc(50% - var(--bsm3-space-xs))), 1fr)); gap: var(--bsm3-space-xs); align-content: start; }
#np-screen-builder .np-zone [id^="items-"] > :not(.np-mini-item) { grid-column: 1 / -1; }
#np-screen-builder .np-mini-item { margin: 0; padding: var(--bsm3-space-xs) var(--bsm3-space-sm); gap: var(--bsm3-space-xs); flex-wrap: wrap; min-width: 0; }
#np-screen-builder .np-mini-left { display: flex; align-items: center; gap: var(--bsm3-space-xs); min-width: 0; flex: 1 1 auto; }
#np-screen-builder .np-mini-left span { overflow-wrap: anywhere; }
#np-screen-builder .np-mini-right { display: flex; align-items: center; gap: var(--bsm3-space-xs); margin-left: auto; }
#np-screen-builder .np-mini-item .np-btn-view { padding: 2px var(--bsm3-space-xs); font-size: var(--bsm3-text-tiny-10px-use-on-text); }
#np-screen-builder .np-mini-item .np-btn-del { padding: 0; border: 0; background: var(--bsm3-transparent); line-height: 1; cursor: pointer; }
@media (max-width: 900px) {
    #np-screen-builder .np-mini-item.np-has-short .np-tile-name { display: none; }
    #np-screen-builder .np-mini-item.np-has-short .np-tile-short { display: inline; }
}

/* ===== 2 Oct 2026 (Chris, A13 round 2): Sleep Planner tiles on a real iPhone =====
   1. Foundation "F" = a small round badge over the tile's top-left corner (all sizes).
   On phones (900px and below):
   2. The planner uses nearly the full width (its own side margin + padding trimmed; the site's page edge stays).
   3. Tiles show the database short name when there is one ("Jet Lag", "Night Shift" -- js npTileName). One way only.
   4. No category icon on tiles.
   5. Zone tiles: VIEW is an eye, the bin has no box (colours in the Day / Sleep files).
   6. No big "Morning" heading inside the zone -- the tab already says it; Save sits on the zone's top border.
   7. No empty space: the zone shrinks to fit; its tiles scroll inside it past about a third of the screen.
   8. Every tile is one line; a name that still doesn't fit ends in "..." (hold for the full name). */
#np-screen-builder #np-pills-list .np-simple-row { position: relative; }
#np-screen-builder .np-simple-row > .bsm-fnd-badge.bsm-fnd-f {
    position: absolute;
    top: calc(-1 * var(--bsm3-space-xs));
    left: calc(-1 * var(--bsm3-space-xs));
    z-index: 1;
    border-radius: var(--bsm3-radius-pills);
}
#np-screen-builder .np-mini-item .np-btn-eye { padding: 0; border: 0; background: var(--bsm3-transparent); line-height: 1; cursor: pointer; font-size: var(--bsm3-text-medium-14px-use-on-text); }
@media (max-width: 900px) {
    /* common.css gives every page block an extra 20px side margin with !important (.is-layout-constrained > ...);
       the planner drops it on phones so the zone and list get the room. Only this planner, not the whole site. */
    .np-wrapper:has(#np-screen-builder) { margin-left: 0 !important; margin-right: 0 !important; }
    #np-screen-builder .np-canvas { padding-left: 0; padding-right: 0; }
    #np-screen-builder .np-canvas .np-zone-container { max-height: none; overflow: visible; padding: var(--bsm3-space-md) var(--bsm3-space-sm) var(--bsm3-space-sm); }
    #np-screen-builder .np-zone [id^="items-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; max-height: 30vh; overflow-y: auto; padding-top: var(--bsm3-space-xs); }

    #np-screen-builder .np-zone-container:not(.np-reactive-container) .np-zone-title { display: none; }
    #np-screen-builder .np-zone-container:not(.np-reactive-container) > .np-save-btn { top: calc(-1 * var(--bsm3-space-md)); right: var(--bsm3-space-sm); padding: var(--bsm3-space-xs) var(--bsm3-space-md); }

    #np-screen-builder .np-tile-icon { display: none; }
    #np-screen-builder #np-pills-list .np-simple-row,
    #np-screen-builder .np-mini-item { flex-wrap: nowrap; padding: var(--bsm3-space-sm); }
    #np-screen-builder #np-pills-list .np-simple-row-left,
    #np-screen-builder .np-mini-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    #np-screen-builder #np-pills-list .np-simple-row-left span,
    #np-screen-builder .np-mini-left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
}

/* 2 Oct 2026 (Chris): brand eye icon (icons/brand-refresh-v2/eye.svg) on the zone tile's View button -- same size as the bin */
#np-screen-builder .np-mini-item .np-btn-eye svg { display: block; width: var(--bsm3-space-lg); height: var(--bsm3-space-lg); }

/* ===== 3 Oct 2026 (Chris): Sleep Planner -- condition filter as one line of word links (was a dropdown);
   search box gets the full width; "Back to plans" is a plain link (no box). Colours in the Day / Sleep files. ===== */
#np-screen-builder .np-search-row input.np-input { width: 100%; }
#np-screen-builder .np-cond-links { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-md); overflow-x: auto; }
#np-screen-builder .np-cond-links .np-cond-link { flex: 0 0 auto; margin: 0; padding: var(--bsm3-space-xs) 0; border-width: 0 0 var(--bsm3-border-thick) 0; border-style: solid; border-radius: 0; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); white-space: nowrap; cursor: pointer; }
#np-screen-builder .np-back-to-plans { padding: 0; border: 0; font-family: var(--bsm3-font-body); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; }

/* ===== SLEEP SWEEP A2 + A3 (Chris 5 Oct 2026) -- phones (900px and below):
   the Sleep menu is one row of links that swipes sideways (no hamburger, no
   drop-down), under a tidy top row: Sleep Diary on the left, Day / Sleep switch
   on the right, side by side at a readable size with a proper tap area.
   Layout only -- colours stay in styleSleepDay.css / styleSleepMode.css. ===== */
@media (max-width: 900px) {
    .bsst-tabs-row { flex-wrap: wrap; gap: var(--bsm3-space-md); }
    .bsst-tabs-row .bsst-menu-toggle { display: none; }
    .bsst-tabs-row .bsst-tools { order: 1; width: 100%; margin-left: 0; justify-content: space-between; }
    .bsst-tabs-row .bsst-tabs { display: flex; order: 2; width: 100%; flex-direction: row; flex-wrap: nowrap; gap: var(--bsm3-space-lg); padding-top: 0; overflow-x: auto; scrollbar-width: none; }
    .bsst-tabs-row .bsst-tabs::-webkit-scrollbar { display: none; }
    .bsst-tabs-row .bsst-tab { flex: 0 0 auto; align-self: auto; padding: var(--bsm3-space-xs) 0; font-size: var(--bsm3-text-medium-14px-use-on-text); white-space: nowrap; }
    .bsst-tabs-row .bsst-diary-btn { font-size: var(--bsm3-text-medium-14px-use-on-text); padding: var(--bsm3-space-sm) var(--bsm3-space-md); }
    .bsst-tabs-row .bsst-theme-switch { flex-direction: row; gap: var(--bsm3-space-xs); }
    .bsst-tabs-row .bsst-theme-btn { padding: var(--bsm3-space-sm) var(--bsm3-space-md); font-size: var(--bsm3-text-small-12px-use-on-text); }
}

/* ===== SLEEP SWEEP A4 (Chris 5 Oct 2026) -- phones: one side margin on every Sleep page.
   Was 0 (Planner), 10px (Therapies pages), 20px (Assessment, Monitor, Diary, CBT-I,
   therapy pages). Now --bsm3-space-md everywhere. !important where common.css's
   page-block margin / padding rule is !important. ===== */
@media (max-width: 900px) {
    body.bsm-sleep-page #spa-stage { padding-left: var(--bsm3-space-md); padding-right: var(--bsm3-space-md); }
    body.bsm-sleep-page #bsm-portal-root,
    body.bsm-sleep-page #psth-wrapper,
    body.bsm-sleep-page #sp-mysleeptherapies-root { margin-left: 0 !important; margin-right: 0 !important; }
    body.bsm-sleep-page #psth-wrapper,
    body.bsm-sleep-page #sp-mysleeptherapies-root,
    body.bsm-sleep-page .np-wrapper { padding-left: var(--bsm3-space-md) !important; padding-right: var(--bsm3-space-md) !important; box-sizing: border-box; }
}

/* ===== SLEEP SWEEP E3 (Chris 5 Oct 2026): "nights need you to choose" alert --
   "Choose" is a proper button on its own line (was run-on text: "sleep.Choose"). ===== */
#panel-profile .bsm-sw-alert { display: flex; flex-direction: column; align-items: flex-start; }
#panel-profile .bsm-sw-alert-go { display: inline-block; padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); }

/* ===== CBT-I LESSON FRAME (Chris 5 Oct 2026, Sleep sweep D) -- layout. js/cbtiLesson.js turns every CBT-I day
   module into one part at a time: slim header with a step bar, Watch -> parts -> Finish, Back / Next under each part,
   and an "Up Next" card when the day is done. Colours: styleSleepDay.css (Day) / styleSleepMode.css (Sleep). ===== */
#cbti-lf-stash { display: none !important; }
.cbti-lf-root .cbti-lf-step { display: none; }
.cbti-lf-root .cbti-lf-step.cbti-lf-current { display: block; }

.cbti-lf-head { display: block; margin: 0 0 var(--bsm3-space-lg); }
.cbti-lf-head-top { display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-md); margin: 0 0 var(--bsm3-space-sm); }
.cbti-lf-back { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: none; }
.cbti-lf-day { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); white-space: nowrap; }
.cbti-lf-root .cbti-lf-title { margin: 0 0 var(--bsm3-space-md); line-height: 1.25; }

.cbti-lf-steps { display: flex; gap: var(--bsm3-space-xs); }
.cbti-lf-step-dot { flex: 1 1 0; min-width: 0; min-height: var(--bsm3-space-lg); display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.cbti-lf-step-line { display: block; height: var(--bsm3-space-xs); border-radius: var(--bsm3-radius-pills); }
.cbti-lf-step-name { display: none; }
.cbti-lf-step-now { display: block; margin: var(--bsm3-space-xs) 0 0; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

.cbti-lf-step-title { margin: 0 0 var(--bsm3-space-md); }
.cbti-lf-from-video { margin: 0 0 var(--bsm3-space-md); padding: var(--bsm3-status-card-padding); border-radius: var(--bsm3-radius-status-cards); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

/* Back / Next under each part -- plenty of room below so the Chat with Katie button never sits on top of them */
.cbti-lf-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-md); margin: var(--bsm3-space-lg) 0 calc(var(--bsm3-space-xxl) * 3); }
.cbti-lf-prev, .cbti-lf-next { padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; }
.cbti-lf-next { margin-left: auto; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* More / Less on long notes (phone rule: over two lines gets a toggle) */
.cbti-lf-clamp { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cbti-lf-clamp.cbti-lf-clamp-open { display: block !important; -webkit-line-clamp: unset; }
.cbti-lf-more { margin: var(--bsm3-space-xs) 0 0; padding: 0; border: 0; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: underline; cursor: pointer; }
@media (min-width: 901px) {
    .cbti-lf-clamp { display: block !important; -webkit-line-clamp: unset; }
    .cbti-lf-more { display: none; }
}

.cbti-lf-next-card { display: none; flex-direction: column; align-items: flex-start; gap: var(--bsm3-space-sm); margin: var(--bsm3-space-lg) 0 0; padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); }
.cbti-lf-next-card.cbti-lf-next-show { display: flex; }
.cbti-lf-next-label { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.cbti-lf-next-title { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.cbti-lf-next-wait { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); }
.cbti-lf-next-go, .cbti-lf-next-hub { display: inline-block; padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: none; }

/* The day's "Completed" card was showing before the day was done (a broader module rule beat its display:none).
   It now only shows once the module's own finish code sets it (inline style). */
#spa-stage #cbti-lf-finish .bsm-success-block:not([style*="display"]) { display: none !important; }

/* Phones: the lesson uses the width -- no extra side padding around it, and inner cards keep a small inset */
@media (max-width: 900px) {
    .cbti-lf-root { padding-left: 0 !important; padding-right: 0 !important; }
    .cbti-lf-root .cbti-lf-step > .bsm-card { margin-left: 0 !important; margin-right: 0 !important; }
    .cbti-lf-root .cbti-lf-step .bsm-card .bsm-card { padding-left: var(--bsm3-space-md) !important; padding-right: var(--bsm3-space-md) !important; }
}
/* Once "Up Next" shows, the module's own "Return tomorrow..." line and "Return to CBT-I Program" button would say the
   same thing twice -- the Up Next card takes over. */
#spa-stage #cbti-lf-finish:has(.cbti-lf-next-show) .bsm-success-block :is(button, .bsm-success-subtitle) { display: none !important; }

/* ===== CBT-I WEEK HUBS (Chris 5 Oct 2026, Sleep sweep D) -- layout.
   The week's progress card had a fixed 150px height (empty space under the bar); phones lose the hub's own 20px
   side padding (the page margin is enough); today's module button stands out (colour in styleSleepDay.css). ===== */
#spa-stage [id$="-hub-root"] .bsm-card:has(.bsm-progress-track) { min-height: 0 !important; }
@media (max-width: 900px) {
    #spa-stage [id$="-hub-root"] { padding-left: 0 !important; padding-right: 0 !important; }
    #spa-stage [id$="-hub-root"] .bsm-card { padding-left: var(--bsm3-space-lg) !important; padding-right: var(--bsm3-space-lg) !important; }
}

/* ===== SLEEP SWEEP B / C / E (Chris 5 Oct 2026) -- layout fixes from the phone deep dive ===== */
/* B5: Schedule Plan ("Track Plan") and "Before you save" pop-ups: full-screen backdrop, box centred
   (common.css's page-block rule squeezed the backdrop to width:auto, so the box sat off to the left with no dimming) */
.bsm-sleep-page #np-modal-track,
.bsm-sleep-page #np-modal-forms { width: 100% !important; top: 0; right: 0; bottom: 0; left: 0; }
/* C1: Therapies page card descriptions were faded (80% opacity) -- solid text */
#psth-wrapper .plan-card-desc { opacity: 1; }
/* C2: condition lists -- every View button looks the same (one was underlined), and "more" gets a bigger tap area */
#sp-mysleeptherapies-root a.mtd-btn { text-decoration: none; }
#sp-mysleeptherapies-root .mst-desc-more { display: inline-block; padding: var(--bsm3-space-xs) 0; }
/* C5: Night Shift / Jet Lag -- room between "Add a Shift" / "Add a Trip" and the list under it */
.bsm-sleep-page .bsm-glass-card > .bsm-btn-primary-action { margin-bottom: var(--bsm3-space-lg); }
/* C4: Reset Sleep Window intro was 10px -- body text size */
#circadian-dashboard-wrapper[data-cir-only] .bsm-fnd-explainer { font-size: var(--bsm3-text-small-12px-use-on-text); }
/* E1: Monitor -- "View full stats" / "View all insights" are proper buttons (they had no padding), small stat notes readable */
#panel-progress .progress-viewfull { padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); }
#panel-progress .progress-metric-sub { font-size: var(--bsm3-text-small-12px-use-on-text); }
/* B2: Sleep Planner boxes (plan name, search, zone choice): Sleep navy border, not the Body green set for .np-input in the
   Custom Overrides tool. In the "legacy" layer because the Overrides layer's !important beats the Day layer's. */
@layer legacy {
    body.bsm-sleep-page .np-input { border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-border) !important; }
}
/* B5: Track Plan close button was a squashed oval -- a round button */
#np-modal-track .pg-sleep-planner-i018 { display: flex; align-items: center; justify-content: center; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); padding: 0; border-radius: var(--bsm3-radius-pills); }

/* ===== SLEEP SWEEP, closing the open points (Chris 6 Oct 2026) ===== */
/* B3: Saved Plans -- no extra gap above the first plan on phones */
@media (max-width: 900px) {
    #np-screen-plans { padding-top: 0 !important; }
}
/* B1: rows that swipe sideways (Sleep menu, condition links) fade at the right edge so it's clear there's more */
@media (max-width: 900px) {
    .bsst-tabs-row .bsst-tabs,
    #np-screen-builder .np-cond-links { -webkit-mask-image: linear-gradient(to right, var(--bsm3-color-black-000000-use-on-bg-sleep) 85%, var(--bsm3-transparent)); mask-image: linear-gradient(to right, var(--bsm3-color-black-000000-use-on-bg-sleep) 85%, var(--bsm3-transparent)); padding-right: var(--bsm3-space-xl); }
}
/* C3: therapy pop-up -- "Preventative" / "Reactive" tag was 10px */
#mst-modal-body .pg-mysleeptherapiesdashboard-i012 { font-size: var(--bsm3-text-small-12px-use-on-text); }
/* C7: Open Airway / Restless Legs -- the intro text lines up with the cards (it had its own 28px inset with no box around it) */
@media (max-width: 900px) {
    .bsm-sleep-page .bsm-strat-hero,
    .bsm-sleep-page .bsm-edu-study-header-card { padding-left: 0 !important; padding-right: 0 !important; }
}
/* E2: full stats -- readable labels (were spaced-out and faded) and a proper "Update" / "Log Tonight" button */
#bsm-dash-v35 .donut-card-label,
#bsm-dash-v35 .donut-lbl { letter-spacing: normal; opacity: 1; }
#bsm-dash-v35 .pill-update-link { padding: var(--bsm3-space-xs) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); }

/* ===== SLEEP WALKTHROUGH FIXES (Chris 6 Oct 2026, live check after upload) ===== */
@media (max-width: 900px) {
    /* Condition lists (My Insomnia Therapies etc.): cards line up with the menu (an extra 20px inset inside the page) */
    #sp-mysleeptherapies-root .mtd-content { padding-left: 0 !important; padding-right: 0 !important; }
    /* CBT-I week pages: the hub's own 20px side padding (set with three ids, so matched here) */
    #bsm-app-root #spa-stage #cbti-w1-hub-root, #bsm-app-root #spa-stage #cbti-w2-hub-root, #bsm-app-root #spa-stage #cbti-w3-hub-root,
    #bsm-app-root #spa-stage #cbti-w4-hub-root, #bsm-app-root #spa-stage #cbti-w5-hub-root, #bsm-app-root #spa-stage #cbti-w6-hub-root { padding-left: 0 !important; padding-right: 0 !important; }
    /* Sleep Planner: now that the builder and list sit in bordered cards, a small inset so boxes don't touch the border */
    .page-slug-sleep-planner .np-canvas,
    .page-slug-sleep-planner .np-palette { padding: var(--bsm3-space-sm) !important; }
    /* CBT-I carousels: title and dots wrap onto two lines instead of squeezing the title into a narrow column */
    .cbti-lf-root .bsm-card > .bsm-justify-between:has(.bsm-carousel-dots) { flex-wrap: wrap; gap: var(--bsm3-space-sm); }
}
/* CBT-I course page: the week cards had a second border around the whole stack */
#spa-stage #cbti-course .cbti-cards { border: 0 !important; }
/* Schedule Plan pop-up: the page-block margin (common.css) pushed the backdrop 10px right, so the box sat off-centre */
.bsm-sleep-page #np-modal-track,
.bsm-sleep-page #np-modal-forms { margin: 0 !important; }
/* Night Shift / Jet Lag: room under "Add a Shift" / "Add a Trip" (the first rule was overruled) */
body.bsm-sleep-page #spa-stage .bsm-glass-card > .bsm-btn-primary-action { margin-bottom: var(--bsm3-space-lg) !important; }
/* More / Less: the clamp sits on an inner span the lesson frame adds, so the modules' own .bsm-block rule can't undo it */
.cbti-lf-clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cbti-lf-clamp-open .cbti-lf-clamp-text { display: inline; -webkit-line-clamp: unset; }
@media (min-width: 901px) { .cbti-lf-clamp-text { display: inline; -webkit-line-clamp: unset; } }

/* ===== RECHECK FIXES (Chris 6 Oct 2026, after upload) =====
   CBT-I course page: the week-card stack's border is set inside a layer, so it's removed from the "legacy" layer
   (for !important the earlier layer wins). Night Shift / Jet Lag: the page's own rule (#circadian-dashboard-wrapper,
   three ids) zeroed the button's bottom margin -- matched with the same three ids. */
@layer legacy {
    #spa-stage #cbti-course .cbti-cards { border-width: 0 !important; }
}
#bsm-app-root #spa-stage #circadian-dashboard-wrapper .bsm-glass-card > .bsm-btn-primary-action { margin-bottom: var(--bsm3-space-lg) !important; }

/* ===== SLEEP v2 MENU, option A (Chris 6 Oct 2026) -- phones: all six Sleep links in one row, each an icon
   with its name under it. Nothing to swipe (replaces the swipe row and its fade). Desktop: names only. ===== */
.bsst-tab-ic { display: none; }
@media (max-width: 900px) {
    .bsst-tabs-row .bsst-tabs { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: var(--bsm3-space-xs); overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
    .bsst-tabs-row .bsst-tab { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; gap: var(--bsm3-space-xs); min-width: 0; padding: var(--bsm3-space-xs) 0; font-size: var(--bsm3-text-small-12px-use-on-text); text-align: center; white-space: nowrap; }
    .bsst-tabs-row .bsst-tab-ic { display: block; width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); flex: 0 0 auto; }
}
/* Day / Sleep switch sits in from the right edge on phones (Chris 6 Oct 2026, Sleep v2) */
@media (max-width: 900px) {
    .bsst-tabs-row .bsst-tools { padding-right: var(--bsm3-space-md); box-sizing: border-box; }
}

/* ===== SLEEP ANALYTICS -- the Sleep platform's own questionnaire (Chris 6 Oct 2026, Sleep v2), layout.
   sleep_platform/analytics/sleep_analytics_form.php on /sleep-analytics/. Colours: styleSleepDay.css / styleSleepMode.css.
   (The Assessment's Sleep form at /risk-analytics-sleep/ is separate and not styled here.) ===== */
#sa-page { max-width: var(--bsm3-width-standard); margin: 0 auto; padding: 0 0 calc(var(--bsm3-space-xxl) * 3); }
#sa-page .sa-hidden { display: none !important; }
#sa-page .sa-card,
#sa-page .sa-done { display: block; padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); box-sizing: border-box; }
#sa-page .sa-head { display: flex; justify-content: space-between; align-items: center; gap: var(--bsm3-space-md); margin: 0 0 var(--bsm3-space-sm); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#sa-page .sa-progress { display: block; height: var(--bsm3-space-xs); margin: 0 0 var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); overflow: hidden; }
#sa-page .sa-progress-bar { display: block; width: 0; height: 100%; border-radius: var(--bsm3-radius-pills); }
#sa-page .sa-step { display: none; }
#sa-page .sa-step.sa-step-active { display: block; }
#sa-page .sa-step-title { margin: 0 0 var(--bsm3-space-xs); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#sa-page .sa-step-sub { margin: 0 0 var(--bsm3-space-lg); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); }
#sa-page .sa-q { display: block; margin: var(--bsm3-space-lg) 0 var(--bsm3-space-sm); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); line-height: 1.35; }
#sa-page .sa-tiles { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); }
#sa-page .sa-tile { position: relative; display: block; cursor: pointer; }
#sa-page .sa-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#sa-page .sa-tile-text { display: block; padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-list-rows); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); text-align: center; }
#sa-page .sa-input { display: block; width: 100%; padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-list-rows); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); box-sizing: border-box; }
#sa-page .sa-units { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bsm3-space-sm); margin: var(--bsm3-space-lg) 0 0; }
#sa-page .sa-units-label { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#sa-page .sa-unit-btn { padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); cursor: pointer; }
#sa-page .sa-metric-only { display: block; }
#sa-page .sa-imperial-only,
#sa-page .sa-about.sa-imperial .sa-metric-only { display: none; }
#sa-page .sa-about.sa-imperial .sa-imperial-only { display: block; }
#sa-page .sa-ft-in { display: flex; gap: var(--bsm3-space-sm); }
#sa-page .sa-ft-in .sa-input { flex: 1 1 0; min-width: 0; }
#sa-page .sa-missing-msg { margin: var(--bsm3-space-xs) 0 0; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#sa-page .sa-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--bsm3-space-md); margin: var(--bsm3-space-xl) 0 0; }
#sa-page .sa-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: none; white-space: nowrap; cursor: pointer; }
#sa-page .sa-foot .sa-btn-main { margin-left: auto; }
#sa-page .sa-done { margin: 0 0 var(--bsm3-space-lg); }
#sa-page .sa-done-title { margin: 0 0 var(--bsm3-space-sm); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
#sa-page .sa-done-text { margin: 0 0 var(--bsm3-space-lg); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-body-use-on-reading-text); }
#sa-page .sa-done-actions,
.sa-gate .sa-gate-actions { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); }
.sa-gate .sa-gate-actions .sa-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sa-gate { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; padding: var(--bsm3-space-lg); }
.sa-gate[hidden] { display: none; }
.sa-gate .sa-gate-box { width: 100%; max-width: var(--bsm3-width-standard); padding: var(--bsm3-space-xl) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); box-sizing: border-box; }
.sa-gate .sa-gate-title { margin: 0 0 var(--bsm3-space-sm); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.sa-gate .sa-gate-text { margin: 0 0 var(--bsm3-space-lg); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-body-use-on-reading-text); }
/* Sleep page: "Update My Sleep Analytics" link above the condition cards (Chris 6 Oct 2026) -- layout only */
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-sa-update { display: block; width: fit-content; margin: 0 0 var(--bsm3-space-md); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); text-decoration: none; }
/* Condition pages (Apnea / Insomnia / Circadian / Restless Legs): the 4-item menu (Outcomes / What This Means /
   Patterns & Signs / Verification) fits on a phone in one row -- icon above a short name (Meaning, Signs). Chris 6 Oct 2026 */
#bsm-app-root #spa-stage .bsm-edu-tab .bsm-edu-tab-short { display: none !important; }
@media (max-width: 600px) {
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab-shell { flex-wrap: nowrap !important; align-items: stretch !important; overflow: visible !important; gap: var(--bsm3-space-xs) !important; padding: var(--bsm3-space-xs) 0 !important; width: 100% !important; box-sizing: border-box !important; }
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab-shell .bsm-edu-tab { flex: 1 1 0 !important; min-width: 0 !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; white-space: nowrap !important; text-align: center !important; }
    body #bsm-app-root #spa-stage .bsm-edu-tab .bsm-edu-tab-long { display: none !important; }
    body #bsm-app-root #spa-stage .bsm-edu-tab .bsm-edu-tab-short { display: inline !important; }
}
/* 23 Oct 2026 (Chris): the condition page menu (Outcomes / What This Means / Patterns & Signs / Verification) stays on ONE row
   at every screen size, full names always (no "Meaning" / "Signs"). Each tab takes an equal share; a long name wraps inside its tab. */
body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab-shell { flex-wrap: nowrap !important; }
body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab-shell .bsm-edu-tab { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; white-space: normal !important; }
body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab .bsm-edu-tab-long { display: inline !important; }
body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-tab .bsm-edu-tab-short { display: none !important; }
/* Sleep page condition cards: "Your Assessment" + "All Therapies" side by side; "Foundation Therapies" label bigger (Chris 6 Oct 2026) */
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .bsm-dash-cond-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--bsm3-space-sm) var(--bsm3-space-xxl) !important; }
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .bsm-dash-cond-links .bsm-dash-all-th { text-decoration: none !important; }
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-fnd-lbl { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
/* Condition pages: on phones the title runs full width, and the status badge shrinks to a small 15px dot (same status
   colour) next to the strap line ("Sleep Apnea · Airway Health · ..."), which runs full width -- same on all 4
   condition pages (Chris 6 Oct 2026). The text block uses display: contents so title / strap / dot sit in one grid. */
@media (max-width: 600px) {
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-page-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: var(--bsm3-space-sm) !important; row-gap: var(--bsm3-space-xs) !important; align-items: start !important; }
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-page-header > .bsm-block { display: contents !important; }
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-page-header .bsm-edu-title { grid-column: 1 / -1 !important; grid-row: 1 !important; }
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-page-header .bsm-edu-subtitle { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; }
    body #bsm-app-root #spa-stage :is(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper) .bsm-edu-page-header .bsm-edu-disorder-badge { grid-column: 1 !important; grid-row: 2 !important; width: 15px !important; height: 15px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0.2em 0 0 !important; border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; box-shadow: none !important; }
}
/* Sleep page condition cards: "Your Assessment" and "All Therapies" line up exactly on every screen size -- clears the
   old 10px top margin (#bsm-dash-v35 .wellness-link) on both links in the row (Chris 6 Oct 2026) */
#bsm-app-root #spa-stage #bsm-dash-v35 .bsm-dash-cond-grid .bsm-dash-cond-links .wellness-link { margin: 0 !important; }
/* My Sleep Therapies (/my-sleep-therapies/): the "View" button is a small pill, centred on the card (Chris 6 Oct 2026) */
#sp-mysleeptherapies-root .mtd-card .mtd-card-row2.mtd-row2-1col { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; }
#sp-mysleeptherapies-root .mtd-card .mtd-card-row2 .mtd-btn-view { width: auto !important; min-width: 0 !important; padding: var(--bsm3-space-xs) var(--bsm3-space-xl) !important; border-radius: var(--bsm3-radius-pills) !important; border-width: var(--bsm3-border-thin) !important; }

/* 9 Oct 2026 (Chris): the saved-plan view panel now starts right under the site header. It was 90% of the screen
   tall from the bottom, leaving a strip where the page behind showed through (the purple Sleep Diary button looked
   like a stray purple border at the top of the panel). */
body.page-slug-sleep-planner #np-canvas-overlay { height: calc(100dvh - 60px - var(--wp-admin--admin-bar--height, 0px)); }

/* 9 Oct 2026 (Chris): Sleep Planner therapy pop-up -- Open Airway Therapy quick tick list ("I'd Like To Work On...").
   Same look as the form on the Open Airway page. Markup + save: sleep_platform/sleep_planner/sleep_planner.php. */
#np-modal-config .np-aw[hidden] { display: none; }
#np-modal-config .np-aw { margin: 0 0 var(--bsm3-space-lg); text-align: left; }
#np-modal-config .np-aw-head { margin: 0 0 var(--bsm3-space-sm); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: 0.18em; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#np-modal-config .np-aw-list { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); }
#np-modal-config .np-aw-item { position: relative; display: flex; align-items: flex-start; gap: var(--bsm3-space-md); padding: var(--bsm3-space-md); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); cursor: pointer; }
#np-modal-config .np-aw-item:hover { background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
#np-modal-config .np-aw-item:has(.np-aw-cb:checked) { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); }
#np-modal-config .np-aw-cb { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#np-modal-config .np-aw-box { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; box-sizing: border-box; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); border-radius: var(--bsm3-radius-mini-badges); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
#np-modal-config .np-aw-item:has(.np-aw-cb:checked) .np-aw-box::after { content: ''; display: block; width: 5px; height: 9px; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); border-top: 0; border-left: 0; transform: rotate(45deg) translateY(-1px); }
#np-modal-config .np-aw-cb:focus-visible + .np-aw-box { outline: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); outline-offset: 2px; }
#np-modal-config .np-aw-text { display: flex; flex-direction: column; gap: 3px; }
#np-modal-config .np-aw-title { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); line-height: 1.3; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#np-modal-config .np-aw-sub { font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.45; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#np-modal-config .np-aw-status { min-height: 1.4em; margin: var(--bsm3-space-sm) 0 0; font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#np-modal-config .np-aw-more { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); text-decoration: none; }
#np-modal-config .np-aw-more:hover { text-decoration: underline; }

/* 9 Oct 2026 (Chris): Sleep Planner -- a Foundation therapy keeps its round "F" once it is in the plan (drop zone card).
   Same round badge over the card's top-left corner as the list tiles, so the name keeps its full width.
   The zone's card grid gets a small left gap so the badge isn't cut off. Colour: the existing .bsm-fnd-badge.bsm-fnd-f rules. */
#np-screen-builder .np-mini-item { position: relative; }
#np-screen-builder .np-mini-left > .bsm-fnd-badge.bsm-fnd-f { display: inline-flex; position: absolute; top: calc(-1 * var(--bsm3-space-xs)); left: calc(-1 * var(--bsm3-space-xs)); z-index: 1; border-radius: var(--bsm3-radius-pills); }
#np-screen-builder .np-zone [id^="items-"] { padding-left: var(--bsm3-space-xs); }
@media (max-width: 900px) {
    #np-screen-builder .np-mini-left > span.bsm-fnd-badge.bsm-fnd-f { overflow: visible; text-overflow: clip; }
}
/* 9 Oct 2026 (Chris): Sleep Planner condition words (All ... Restless Legs) -- no fade at the right edge (it made
   "Restless Legs" look cut off); all five fit; on a very narrow phone they wrap instead of running off the side. */
@media (max-width: 900px) {
    #np-screen-builder .np-cond-links { -webkit-mask-image: none; mask-image: none; padding-right: 0; flex-wrap: wrap; overflow-x: visible; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026 (Chris): Sleep Diary opened from the CBT-I course -- "← Back to CBT-I" above the page (sleep_platform/master_shell.php) */
body #bsm-app-root a.bsm-cbti-back-bar:not(#cbx-w1):not(#cbx-w2) { display: inline-flex !important; align-items: center !important; margin: var(--bsm3-space-md) var(--bsm3-space-md) 0 !important; padding: 8px 14px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
body #bsm-app-root[data-theme="sleep"] a.bsm-cbti-back-bar:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ===== 11 Oct 2026 (Chris): Sleep Diary -- shorter, wider, no scrolling (all devices) ===== */
/* the Sleep Diary button + Day/Sleep switch are not needed on the diary itself */
body:has(#bsm_diary_wrapper) #bsm-app-root .bsst-tools:not(#bsm-x1):not(#bsm-x2) { display: none !important; }
/* "← Back to CBT-I": small, top left */
body #bsm-app-root a.bsm-cbti-back-bar:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; width: fit-content !important; margin: var(--bsm3-space-sm) auto 0 var(--bsm3-space-md) !important; padding: 4px 12px !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper:not(#bsm-x1) { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-glass-panel:not(#bsm-x1):not(#bsm-x2) { padding: var(--bsm3-space-lg) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper :is(.bsm-title, .bsm-subtitle, .bsm-date-badge):not(#bsm-x1):not(#bsm-x2) { margin-top: 0 !important; margin-bottom: var(--bsm3-space-sm) !important; }
/* the two times side by side */
body #bsm-app-root #spa-stage #bsm_diary_wrapper :is(.bsm-diary-time-row, .bsm-diary-time):not(#bsm-x1):not(#bsm-x2) { border: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-time-row:not(#bsm-x1):not(#bsm-x2) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: var(--bsm3-space-md) !important; margin: var(--bsm3-space-md) 0 !important; padding: 0 !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-time:not(#bsm-x1):not(#bsm-x2) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; min-width: 0 !important; text-align: center !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-time .bsm-label:not(#bsm-x1):not(#bsm-x2) { margin: 0 !important; line-height: 1.3 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-time .bsm-inline-time-btn:not(#bsm-x1):not(#bsm-x2) { margin: 0 !important; padding: 10px 16px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
/* the buttons on one row */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-btn-row:not(#bsm-x1):not(#bsm-x2) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: var(--bsm3-space-sm) !important; margin: var(--bsm3-space-md) 0 0 !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-btn-row > button:not(#bsm-x1):not(#bsm-x2) { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 10px 8px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.25 !important; white-space: normal !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-btn-row > .bsm-btn-skip:not(#bsm-x1):not(#bsm-x2) { border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: var(--bsm3-radius-list-rows) !important; }
/* inside the panel over a CBT-I lesson: only the diary */
body.bsm-diary-embed .bsm-embed-off:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3):not(#bsm-x4) { display: none !important; }
html:has(body.bsm-diary-embed) { margin-top: 0 !important; }
body.bsm-diary-embed #bsm-app-root:not(#bsm-x1):not(#bsm-x2) { top: 0 !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: Sleep Diary in the panel over a CBT-I lesson -- no Sleep tab row either */
body.bsm-diary-embed #spa-stage .bsst-tabs-row:not(#bsm-x1):not(#bsm-x2) { display: none !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL2 8 + 9): Sleep Diary opened from the CBT-I course -- a "Sleep Diary" title, then a small,
   screen-wide grid of every course day (Start day to today): light green = filled in, light red = not. The day being
   looked at has a purple outline. A short note sits under the grid. (sleep_platform/pages/sleep_diary.php) */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-title:not(#bsm-x1):not(#bsm-x2) { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cal-track.bsm-cbti-grid:not(#bsm-x1):not(#bsm-x2) { display: grid !important; grid-template-columns: repeat(auto-fill, var(--bsm3-space-xl)) !important; gap: var(--bsm3-space-xs) !important; overflow: visible !important; padding: 0 !important; margin: 0 0 var(--bsm3-space-xs) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { min-width: 0 !important; width: var(--bsm3-space-xl) !important; height: var(--bsm3-space-xl) !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: var(--bsm3-border-default) solid var(--bsm3-transparent) !important; border-radius: var(--bsm3-radius-tags) !important; box-shadow: none !important; transform: none !important; font-family: inherit !important; cursor: pointer !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell .bsm-cal-num:not(#bsm-x1):not(#bsm-x2) { font-size: var(--bsm3-text-tiny-10px-use-on-text) !important; line-height: 1 !important; margin: 0 !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: inherit !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.logged:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { background: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.missed:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { background: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.active:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid-note:not(#bsm-x1):not(#bsm-x2) { margin: 0 0 var(--bsm3-space-md) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL2 8 + 9): the same in Sleep (night) mode */
body #bsm-app-root[data-theme="sleep"] #spa-stage #bsm_diary_wrapper .bsm-diary-title:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { color: var(--bsm3-sleep-border-sleep) !important; }
body #bsm-app-root[data-theme="sleep"] #spa-stage #bsm_diary_wrapper .bsm-cbti-grid-note:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL3 4): diary grid -- a course day with no lesson and no diary ("skipped": holiday, sick ...)
   has a border and a bold diagonal line from top right to bottom left, neither red nor green; today stays plain */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.skipped:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { border-color: var(--bsm3-sleep-text-muted-day) !important; background: linear-gradient(to bottom right, var(--bsm3-transparent) calc(50% - var(--bsm3-border-default)), var(--bsm3-sleep-text-muted-day) calc(50% - var(--bsm3-border-default)), var(--bsm3-sleep-text-muted-day) calc(50% + var(--bsm3-border-default)), var(--bsm3-transparent) calc(50% + var(--bsm3-border-default))) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.today:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; background: var(--bsm3-transparent) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-cbti-grid .bsm-cbti-cell.active:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3):not(#bsm-x4) { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
/* 12 Oct 2026 (Chris, IFL3 6): diary form buttons smaller -- the two time boxes and the button row */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-time .bsm-inline-time-btn:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { padding: var(--bsm3-space-xs) var(--bsm3-space-md) !important; min-height: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.4 !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-diary-btn-row > button:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { padding: var(--bsm3-space-xs) var(--bsm3-space-sm) !important; min-height: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.3 !important; }
/* 12 Oct 2026 (Chris, IFL3 7): the time picker (Hour / Minute / AM-PM, Cancel / Done) about half its old size */
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-modal-content:not(#bsm-x1):not(#bsm-x2) { max-width: 220px !important; padding: var(--bsm3-space-sm) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-title:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-time-picker-layout:not(#bsm-x1):not(#bsm-x2) { gap: var(--bsm3-space-xs) !important; margin-bottom: var(--bsm3-space-sm) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-time-section-title:not(#bsm-x1):not(#bsm-x2) { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-tiny-10px-use-on-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal :is(.bsm-hours-grid, .bsm-mins-grid, .bsm-ampm-grid):not(#bsm-x1):not(#bsm-x2) { gap: var(--bsm3-space-xs) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-grid-btn:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { padding: var(--bsm3-space-xs) !important; min-height: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.3 !important; border-radius: var(--bsm3-radius-tags) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .pg-sleep-diary-i008:not(#bsm-x1):not(#bsm-x2) { gap: var(--bsm3-space-xs) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .pg-sleep-diary-i008 button:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { padding: var(--bsm3-space-xs) var(--bsm3-space-sm) !important; min-height: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.3 !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL9 1): diary "← Back" -- our standard small back link (same look as the CBT-I lesson "← Back") */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-btn-back:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { display: inline-block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 0 var(--bsm3-space-sm) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body #bsm-app-root[data-theme="sleep"] #spa-stage #bsm_diary_wrapper .bsm-btn-back:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3):not(#bsm-x4) { color: var(--bsm3-sleep-border-sleep) !important; }
/* 12 Oct 2026 (Chris, IFL9 2): every picked choice on the diary form is obvious -- light purple background, purple border */
body #bsm-app-root #spa-stage #bsm_diary_wrapper :is(.bsm-chunk-box, .bsm-emoji-box).active:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-chunk-box.active :is(.bsm-chunk-title, .bsm-chunk-sub):not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
/* 12 Oct 2026 (Chris, IFL9 3): bigger mood faces */
body #bsm-app-root #spa-stage #bsm_diary_wrapper .bsm-emoji-box img.emoji:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3) { width: var(--bsm3-space-xxl) !important; height: var(--bsm3-space-xxl) !important; background: var(--bsm3-transparent) !important; }
/* 12 Oct 2026 (Chris, IFL9 4): Select Time -- the hour, minute and AM/PM picked show clearly: dark purple, white text */
body #bsm-app-root #spa-stage #bsm_diary_wrapper #bsm_grid_modal .bsm-grid-btn.active:not(#bsm-x1):not(#bsm-x2):not(#bsm-x3):not(#bsm-x4) { background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; border-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL9 6): no Day-mode sun on the Sleep Diary page -- it washed out "← Back to CBT-I" */
body:has(#bsm_diary_wrapper) #bsm-app-root[data-theme="day"] .moon-fixed:not(#bsm-x1):not(#bsm-x2) { display: none !important; }
}
@layer bsm-sleep-mode {
/* 13 Oct 2026 (Chris): video captions (text from Cloudflare). Small white text. Desktop: along the top of the picture,
   with a soft dark shadow. Phone (.is-phone): in the empty black space above the video. JS sets only top/bottom. */
:is(#bsm-app-root #bsm-cinematic-overlay, #bsm-cinematic-overlay) #bsm-video-caption:not(#bsm-x1):not(#bsm-x2) { display: none !important; position: absolute !important; left: 0 !important; right: 0 !important; z-index: 10000 !important; margin: 0 !important; padding: 0 var(--bsm3-space-md) !important; border: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.4 !important; text-align: center !important; text-shadow: 0 0 var(--bsm3-space-xs) var(--bsm3-color-black-000000-use-on-bg-sleep), 0 0 var(--bsm3-space-sm) var(--bsm3-color-black-000000-use-on-bg-sleep) !important; pointer-events: none !important; }
:is(#bsm-app-root #bsm-cinematic-overlay, #bsm-cinematic-overlay) #bsm-video-caption.show:not(#bsm-x1):not(#bsm-x2) { display: block !important; }
:is(#bsm-app-root #bsm-cinematic-overlay, #bsm-cinematic-overlay) #bsm-video-caption.is-phone:not(#bsm-x1):not(#bsm-x2) { text-shadow: none !important; }
}

/* 20 Oct 2026 (Chris): Sleep Planner -- CBT-I sits at the top of a CBT-I plan as its foundation therapy (no eye, no bin) */
#np-screen-builder .np-fnd-line:not([hidden]) { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: 0 0 var(--bsm3-space-sm); }
#np-screen-builder .np-fnd-line-h { font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }


/* 21 Oct 2026 (Chris): a therapy's own form page shown INSIDE the Sleep Planner pop-up (sleep_planner.php #conf-form).
   The page itself, in ?bsm_embed=1 mode: no site menus, no Sleep tabs, no back link -- just the form. */
#np-modal-config .np-form-frame { display: block; width: 100%; height: 70vh; border: 0; border-radius: var(--bsm3-radius-list-rows); }
body.bsm-embed #wpadminbar,
body.bsm-embed #bsm-global-topbar,
body.bsm-embed #katie-widget-wrapper,
body.bsm-embed .bsm-footer-disclaimer-wrapper,
body.bsm-embed #bcc-finder-root,
body.bsm-embed #bsm-panic-root,
body.bsm-embed header.wp-block-template-part,
body.bsm-embed footer.wp-block-template-part,
body.bsm-embed .bsst-tabs-row,
body.bsm-embed .bsm-back-link { display: none !important; }
html:has(body.bsm-embed) { margin-top: 0 !important; }

/* ===== 23 Oct 2026 (Chris): SLEEP MENU on phones held upright -- two rows of four, every tab the same width
   (a quarter of the row), icon above the full name. Larger screens keep the single row. ===== */
@media (max-width: 480px) {
    body .bsst-tabs-row #bsst-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bsm3-space-sm) 0; width: 100%; overflow: visible; }
    body .bsst-tabs-row #bsst-tabs .bsst-tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--bsm3-space-xs); min-width: 0; margin: 0; padding: var(--bsm3-space-xs) 0; text-align: center; }
    body .bsst-tabs-row #bsst-tabs .bsst-tab-label { display: block; overflow: visible; text-overflow: clip; white-space: nowrap; font-size: var(--bsm3-text-small-12px-use-on-text); }
}

/* ===== 23 Oct 2026 (Chris): the Sleep Diary button + Day/Sleep switch only on the main tab pages.
   Hidden one level down: a condition's Analytics page, a Foundation programme, the CBT-I course and the
   single-therapy pages (Jet Lag, BMI Reduction, Open Airway ...). Same way as the Sleep Diary rule above. ===== */
@layer bsm-sleep-mode {
body:has(#apnea-journey-wrap, #circadian-dashboard-wrapper, #bsm-spa-root, #bsm-legs-wrapper, #bsm-app-root.bsm-cbti-shell, #bsm-app-root.bsm-fnd-shell:not(.bsf-shell), #bsm-app-root .bsf-days) #bsm-app-root .bsst-tools:not(#bsm-x1):not(#bsm-x2) { display: none !important; }
}

/* 23 Oct 2026 (Chris): no sun glow (the Day look of .moon-fixed) top left on the Sleep pages. The moon stays in the Sleep look. */
#bsm-app-root[data-theme="day"] .moon-fixed { display: none !important; }

/* ============================================================================
   24 Oct 2026 (Chris, mockup P1/P2): SLEEP PLANNER = the Activity Planner's layout and styling
   (css/styleBodyNew.css .ap-*), in Sleep bsm3 colours. Desktop: plan left, therapies right.
   Phone: plan on top, therapies underneath (2 columns), Save fixed at the bottom.
   ============================================================================ */
.np-wrapper #np-control-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--bsm3-space-md); margin: var(--bsm3-space-md) var(--bsm3-space-sm); padding: var(--bsm3-space-md) var(--bsm3-space-lg); border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); box-shadow: var(--bsm3-elevation-soft); }
.np-wrapper:has(#np-screen-plans.active) #np-control-panel { display: none; }
.np-wrapper #np-control-panel .np-cp-left { display: flex; align-items: center; gap: var(--bsm3-space-md); flex-wrap: wrap; }
.np-wrapper #np-control-panel .np-cp-title { font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.np-wrapper #np-control-panel .np-cp-saved { padding: calc(var(--bsm3-space-xs) * 1.5) var(--bsm3-space-md); border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-decoration: none; box-shadow: var(--bsm3-elevation-soft); }
.np-wrapper #np-control-panel .np-cp-stats { display: flex; gap: var(--bsm3-space-lg); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }

/* the two boxes */
.np-wrapper #np-screen-builder.np-screen.active { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); padding: 0 var(--bsm3-space-sm) var(--bsm3-space-xxl); }
.np-wrapper #np-screen-builder .np-canvas,
.np-wrapper #np-screen-builder .np-palette { padding: var(--bsm3-space-lg); border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
@media (min-width: 900px) {
    .np-wrapper #np-screen-builder.np-screen.active { flex-direction: row; align-items: flex-start; }
    .np-wrapper #np-screen-builder .np-canvas { flex: 1 1 auto; min-width: 0; padding: var(--bsm3-space-xl); }
    .np-wrapper #np-screen-builder .np-palette { flex: 0 0 330px; width: 330px; min-width: 0; padding: var(--bsm3-space-xl) var(--bsm3-space-lg); }
}

/* Plan Name card */
.np-wrapper #np-screen-builder .np-setup-card { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-lg); padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); box-shadow: var(--bsm3-elevation-soft); }
.np-wrapper #np-screen-builder .np-setup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-sm); }
.np-wrapper #np-screen-builder .np-setup-label { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.np-wrapper #np-screen-builder .np-new-plan { padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); }
.np-wrapper #np-screen-builder .np-setup-card #np-plan-name { width: 100%; margin: 0; padding: calc(var(--bsm3-space-sm) + var(--bsm3-space-xs) / 2) var(--bsm3-space-md); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }

/* zone tabs: pills, the open one navy (colours in the Day / Night layers below) */
.np-wrapper #np-screen-builder .np-zone-tabs { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-lg); padding: 0 var(--bsm3-space-sm) var(--bsm3-space-sm); border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); }
.np-wrapper #np-screen-builder .np-zone-tab { display: inline-flex; align-items: center; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-sm) var(--bsm3-space-md); border: 0; border-radius: var(--bsm3-radius-primary-cards); background: transparent; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; }
.np-wrapper #np-screen-builder .np-zone-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: var(--bsm3-icon-size-card); padding: 0 var(--bsm3-space-xs); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-thin) solid currentColor; font-size: var(--bsm3-text-small-12px-use-on-text); }

/* the dashed zone */
.np-wrapper #np-screen-builder .np-zone-container { padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
.np-wrapper #np-screen-builder .np-zone.active { padding: var(--bsm3-space-md); border: var(--bsm3-border-thick) dashed var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); border-radius: var(--bsm3-radius-primary-cards); min-height: 150px; }
.np-wrapper #np-screen-builder .np-zone-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-sm); padding: 0 0 var(--bsm3-space-sm); border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); font-size: var(--bsm3-text-large-16px-use-on-text); }
.np-wrapper #np-screen-builder .np-zone-count { margin-left: auto; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); white-space: nowrap; }

/* one big Save */
.np-wrapper #np-screen-builder .np-save-block { display: block; width: 100%; margin: var(--bsm3-space-lg) 0 0; padding: var(--bsm3-space-lg); border: 0; border-radius: var(--bsm3-radius-primary-cards); font-family: inherit; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); cursor: pointer; box-shadow: var(--bsm3-elevation-medium); }

/* therapies box: condition menu, Search + Select Category, + Add Sleep Therapies, tiles */
.np-wrapper #np-screen-builder .np-palette { display: flex; flex-direction: column; gap: var(--bsm3-space-md); }
.np-wrapper #np-screen-builder .np-palette .bsf-cond-row { flex-wrap: nowrap; gap: var(--bsm3-space-xs); }
.np-wrapper #np-screen-builder .np-palette .bsf-cond { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 calc(var(--bsm3-space-xs) * 1.5); font-size: var(--bsm3-text-small-12px-use-on-text); white-space: nowrap; }
.np-wrapper #np-screen-builder .np-search-row { display: flex; gap: var(--bsm3-space-sm); margin: 0; }
.np-wrapper #np-screen-builder .np-search-row #np-search { flex: 1 1 0; min-width: 0; margin: 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-status-cards); font-size: var(--bsm3-text-medium-14px-use-on-text); }
.np-wrapper #np-screen-builder .np-cat-select { flex: 1 1 0; min-width: 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-status-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-family: inherit; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.np-wrapper #np-screen-builder .np-add-therapies-link { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); text-decoration: none; }
.np-wrapper #np-screen-builder #np-pills-list { display: flex; flex-direction: column; gap: calc(var(--bsm3-space-xs) * 1.5); }
.np-wrapper #np-screen-builder #np-pills-list .np-simple-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-sm); margin: 0; padding: var(--bsm3-space-sm) calc(var(--bsm3-space-sm) + var(--bsm3-space-xs) / 2); border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: var(--bsm3-radius-status-cards); }
.np-wrapper #np-screen-builder #np-pills-list .np-simple-row-left span { font-size: var(--bsm3-text-small-12px-use-on-text); }
.np-wrapper #np-screen-builder #np-pills-list .np-simple-row-fnd { border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); }
.np-wrapper #np-screen-builder .np-tile-hint { flex: none; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); white-space: nowrap; }

/* phone: one column, tiles 2 across (no hint), Save fixed at the bottom */
@media (max-width: 899px) {
    .np-wrapper #np-control-panel .np-cp-stats { display: none; }
    .np-wrapper #np-screen-builder .np-canvas { padding: var(--bsm3-space-md); }
    .np-wrapper #np-screen-builder .np-palette { padding: var(--bsm3-space-md); padding-bottom: calc(var(--bsm3-space-xxl) * 3); }
    .np-wrapper #np-screen-builder #np-pills-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .np-wrapper #np-screen-builder .np-tile-hint { display: none; }
    .np-wrapper #np-screen-builder .np-save-block { position: fixed; left: var(--bsm3-space-lg); right: var(--bsm3-space-lg); bottom: var(--bsm3-space-lg); width: auto; margin: 0; z-index: 900; }
}

/* colours that the Day / Night looks would repaint: open zone tab + Save (navy, white words) */
@layer bsm-day-mode {
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-zone-tab.active:not(#x1):not(#x2),
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-save-block:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
        color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
        border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
    }
}
@layer bsm-sleep-mode {
    .np-wrapper[data-theme="sleep"] #np-control-panel:not(#x1):not(#x2),
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-canvas, .np-palette, .np-setup-card):not(#x1):not(#x2) { background: var(--bsm3-sleep-glass-bg-night) !important; border-color: var(--bsm3-sleep-border-night) !important; }
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-zone-tab.active, .np-save-block):not(#x1):not(#x2) {
        background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
        color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
    }
    .np-wrapper[data-theme="sleep"] #np-screen-builder #np-pills-list .np-simple-row:not(#x1):not(#x2) { border-color: var(--bsm3-sleep-border-night) !important; }
}
.np-wrapper #np-screen-builder .np-zone { width: 100%; }
.np-wrapper #np-screen-builder .np-reactive-container .np-zone-title { padding-right: 0; }
.np-wrapper #np-screen-builder .np-zone-tabs .np-zone-tab { border-width: 0; }

/* 24 Oct 2026 (Chris, walk-through): Planner fixes */
.np-wrapper #np-screen-builder .np-canvas { position: static; top: auto; height: auto; }   /* phone: was sticky and slid over the therapies */
.np-wrapper #np-screen-builder .np-zone-tabs { justify-content: flex-start; overflow: visible; }
.np-wrapper #np-screen-builder .np-palette .bsf-cond { font-size: var(--bsm3-text-tiny-10px-use-on-text); padding: 0 var(--bsm3-space-xs); min-height: calc(var(--bsm3-icon-size-container) - var(--bsm3-space-xs)); }
.np-wrapper #np-screen-builder .np-add-therapies-link { align-self: flex-start; text-align: left; }
@media (max-width: 899px) {
    /* zone tabs on one line: smaller words, less padding */
    .np-wrapper #np-screen-builder .np-zone-tabs { flex-wrap: nowrap; gap: var(--bsm3-space-xs); padding: 0 0 var(--bsm3-space-sm); }
    .np-wrapper #np-screen-builder .np-zone-tabs .np-zone-tab { flex: 0 1 auto; min-width: 0; padding: var(--bsm3-space-xs) calc(var(--bsm3-space-xs) * 1.5); font-size: var(--bsm3-text-small-12px-use-on-text); white-space: nowrap; }
    .np-wrapper #np-screen-builder .np-zone-tab-n { min-width: var(--bsm3-icon-size-inline); font-size: var(--bsm3-text-tiny-10px-use-on-text); }
}
@layer bsm-day-mode {
    /* New Plan + "+ Add Sleep Therapies": violet words, no box (the Day look boxes buttons and paints links navy) */
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder :is(.np-new-plan, .np-add-therapies-link):not(#x1):not(#x2) {
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
        color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important;
    }
    /* zone tabs not open: navy words, no box */
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-zone-tab:not(.active):not(#x1):not(#x2) {
        background: transparent !important; border-color: transparent !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
    }
    /* the chosen condition: navy, same as Analytics */
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper .np-palette .bsf-cond-row .bsf-cond.bsf-cond-on:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
        border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
        color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
    }
    body:not(:has(.np-wrapper[data-theme="sleep"])) #np-modal-config .np-save-btn.np-added:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important;
        color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important;
        cursor: default !important;
    }
}
@layer bsm-sleep-mode {
    .np-wrapper[data-theme="sleep"] .np-palette .bsf-cond-row .bsf-cond.bsf-cond-on:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
        border-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
        color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
    }
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-new-plan, .np-add-therapies-link):not(#x1):not(#x2) {
        background: transparent !important; border: 0 !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important;
    }
}

/* 24 Oct 2026 (Chris, walk-through 2) */
/* zone tabs: one line on every screen size */
.np-wrapper #np-screen-builder .np-zone-tabs { flex-wrap: nowrap; gap: var(--bsm3-space-xs); }
.np-wrapper #np-screen-builder .np-zone-tabs .np-zone-tab { flex: 0 1 auto; min-width: 0; padding: var(--bsm3-space-xs) var(--bsm3-space-sm); font-size: var(--bsm3-text-small-12px-use-on-text); white-space: nowrap; }
/* Search + Select Category: smaller words, nothing spills */
.np-wrapper #np-screen-builder .np-search-row #np-search,
.np-wrapper #np-screen-builder .np-cat-select { padding: var(--bsm3-space-sm); font-size: var(--bsm3-text-small-12px-use-on-text); }
/* the Foundation tile above the zones: F + name, progress button, eye */
.np-wrapper #np-screen-builder .np-fnd-item { display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-sm); }
.np-wrapper #np-screen-builder .np-fnd-item .np-mini-right { display: flex; align-items: center; gap: var(--bsm3-space-sm); flex: none; }
.np-wrapper #np-screen-builder .np-fnd-go { padding: var(--bsm3-space-xs) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-decoration: none; white-space: nowrap; }
@layer bsm-day-mode {
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-fnd-go:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
        color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
    }
}
@layer bsm-sleep-mode {
    .np-wrapper[data-theme="sleep"] #np-screen-builder .np-fnd-go:not(#x1):not(#x2) {
        background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
        color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important;
    }
}

/* 24 Oct 2026 (Chris): Sleep colours for the new buttons -- deep violet (sleep pillar strong), not navy/black.
   Open zone tab, Save Sleep Plan, the Foundation tile's Start / Day N (small). */
.np-wrapper #np-screen-builder .np-fnd-go { padding: calc(var(--bsm3-space-xs) / 2) var(--bsm3-space-sm); font-size: var(--bsm3-text-tiny-10px-use-on-text); }
@layer bsm-day-mode {
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder :is(.np-zone-tab.active, .np-save-block, .np-fnd-go):not(#x1):not(#x2):not(#x3) {
        background-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important;
        border-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important;
        color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
    }
}
@layer bsm-sleep-mode {
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-zone-tab.active, .np-save-block, .np-fnd-go):not(#x1):not(#x2):not(#x3) {
        background-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important;
        color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
    }
}

/* 24 Oct 2026 (Chris): Planner -- "how to build" box for Restless Legs and a mixed plan (All) */
.np-wrapper #np-screen-builder .np-guide { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
.np-wrapper #np-screen-builder .np-guide[hidden] { display: none !important; }
.np-wrapper #np-screen-builder .np-guide-h { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); }
.np-wrapper #np-screen-builder .np-guide-p { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.np-wrapper #np-screen-builder .np-guide-list { counter-reset: npg; list-style: none; display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: 0; padding: 0; }
.np-wrapper #np-screen-builder .np-guide-list li { counter-increment: npg; display: flex; align-items: flex-start; gap: var(--bsm3-space-sm); margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.np-wrapper #np-screen-builder .np-guide-list li::before { content: counter(npg); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--bsm3-icon-size-nav); height: var(--bsm3-icon-size-nav); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-tiny-10px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.np-wrapper #np-screen-builder .np-guide-list li > span { flex: 1 1 auto; min-width: 0; }
.np-wrapper #np-screen-builder .np-guide-go { align-self: flex-start; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); text-decoration: none; }
@layer bsm-day-mode {
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-guide:not(#x1):not(#x2) { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background) !important; }
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-guide-go:not(#x1):not(#x2) { color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
    body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-screen-builder .np-guide *:not(#x1):not(#x2) { background-color: transparent !important; }
}
@layer bsm-sleep-mode {
    .np-wrapper[data-theme="sleep"] #np-screen-builder .np-guide:not(#x1):not(#x2) { background: transparent !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night) !important; }
    .np-wrapper[data-theme="sleep"] #np-screen-builder .np-guide *:not(#x1):not(#x2) { background-color: transparent !important; }
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-guide-p, .np-guide-list li):not(#x1):not(#x2) { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
    .np-wrapper[data-theme="sleep"] #np-screen-builder :is(.np-guide-h, .np-guide-go):not(#x1):not(#x2) { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
}