/* /Pages/AI_Report/ClinicalReport.razor.rz.scp.css */
/* ClinicalReport.razor.css
   Blazor CSS isolation — scoped to ClinicalReport component only.
   File must be named ClinicalReport.razor.css and sit in the same
   folder as ClinicalReport.razor.

   Google Fonts — add once to your _Host.cshtml or App.razor:
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

   Do NOT add a <link> tag for this file — Blazor bundles it automatically.
   Do NOT add clinical-report.css to _Host.cshtml any more.
*/

/* ── CSS VARIABLES ─────────────────────────────────────────── */
/* :host scopes variables to this component's root element      */
#cr-root[b-ropzv56e5b] {
  --navy:    #0D1B2A;
  --blue:    #1B4F8A;
  --accent:  #2E86C1;
  --teal:    #17A589;
  --red:     #C0392B;
  --amber:   #D4880A;
  --green:   #1E8449;
  --purple:  #7D3C98;
  --grey:    #566573;
  --light:   #EAF2F8;
  --bg:      #F4F6F9;
  --white:   #FFFFFF;
  --border:  #D5D8DC;
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'IBM Plex Sans', sans-serif;
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--bg);
}

/* ── HARD RESET — neutralize site.css / Bootstrap inside cr-root ── */
/* all: unset wipes every inherited and specified property;          */
/* we then restore only what block/inline flow needs.               */
#cr-root *[b-ropzv56e5b] { box-sizing: border-box; margin: 0; padding: 0; }

#cr-root h1[b-ropzv56e5b],
#cr-root h2[b-ropzv56e5b],
#cr-root h3[b-ropzv56e5b],
#cr-root h4[b-ropzv56e5b],
#cr-root h5[b-ropzv56e5b],
#cr-root h6[b-ropzv56e5b] {
  all: unset;
  display: block;
  box-sizing: border-box;
}

#cr-root a[b-ropzv56e5b] {
  all: unset;
  display: inline;
  box-sizing: border-box;
  cursor: pointer;
}

#cr-root p[b-ropzv56e5b] {
  all: unset;
  display: block;
  box-sizing: border-box;
}

#cr-root ul[b-ropzv56e5b],
#cr-root ol[b-ropzv56e5b],
#cr-root li[b-ropzv56e5b] {
  all: unset;
  display: block;
  box-sizing: border-box;
}

#cr-root table[b-ropzv56e5b],
#cr-root thead[b-ropzv56e5b],
#cr-root tbody[b-ropzv56e5b],
#cr-root tr[b-ropzv56e5b],
#cr-root th[b-ropzv56e5b],
#cr-root td[b-ropzv56e5b] {
  all: unset;
  box-sizing: border-box;
}

#cr-root button[b-ropzv56e5b] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

#cr-root select[b-ropzv56e5b],
#cr-root input[b-ropzv56e5b] {
  all: unset;
  box-sizing: border-box;
}

#cr-root nav:not(.cr-sidenav)[b-ropzv56e5b] {
  all: unset;
  display: block;
  box-sizing: border-box;
}

#cr-root footer[b-ropzv56e5b] {
  all: unset;
  display: block;
  box-sizing: border-box;
}

/* ── TOOLBAR ───────────────────────────────────────────────── */
#cr-root .report-toolbar[b-ropzv56e5b] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 20px;
  background: #f0f2f5;
  border-bottom: 1px solid #d5d8dc;
  font-family: var(--sans);
}
#cr-root .toolbar-group[b-ropzv56e5b]  { display: flex; align-items: center; gap: 8px; }
#cr-root .toolbar-label[b-ropzv56e5b]  { font-size: 11px; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); }
#cr-root .toolbar-select[b-ropzv56e5b] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--navy);
  background: white;
  min-width: 220px;
}
#cr-root .btn-generate-report[b-ropzv56e5b] {
  padding: 8px 18px;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
#cr-root .btn-generate-report:hover[b-ropzv56e5b]    { background: #12836e; }
#cr-root .btn-generate-report:disabled[b-ropzv56e5b] { opacity: .6; cursor: default; }
#cr-root .toolbar-status[b-ropzv56e5b] { font-size: 12px; font-family: var(--mono); }
#cr-root .status-ok[b-ropzv56e5b]      { color: var(--green); }
#cr-root .status-error[b-ropzv56e5b]   { color: var(--red); }

/* ── MASTHEAD ──────────────────────────────────────────────── */
#cr-root .masthead[b-ropzv56e5b] {
  background: var(--navy);
  color: white;
  padding: 28px 40px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
}
#cr-root .masthead-left h1[b-ropzv56e5b] {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8FBFE0;
  margin-bottom: 6px;
}
#cr-root .masthead-left h2[b-ropzv56e5b] {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#cr-root .masthead-left .sub[b-ropzv56e5b] {
  font-size: 13px;
  color: #8FBFE0;
  margin-top: 4px;
  font-weight: 300;
}
#cr-root .masthead-stats[b-ropzv56e5b] { display: flex; gap: 28px; text-align: center; }
#cr-root .mstat .n[b-ropzv56e5b] {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: white;
}
#cr-root .mstat .l[b-ropzv56e5b] {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8FBFE0;
  margin-top: 3px;
}

/* ── NAV (top horizontal bar only — excludes .cr-sidenav) ──── */
#cr-root nav:not(.cr-sidenav)[b-ropzv56e5b] {
  background: var(--blue);
  display: flex;
  gap: 0;
  padding: 0 40px;
  overflow-x: auto;
}
#cr-root nav:not(.cr-sidenav) a[b-ropzv56e5b] {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9EC8E8;
  text-decoration: none;
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
#cr-root nav:not(.cr-sidenav) a:hover[b-ropzv56e5b] { color: white; border-color: var(--accent); }

/* ── LAYOUT ────────────────────────────────────────────────── */
#cr-root .page[b-ropzv56e5b] { max-width: 1440px; margin: 0 auto; padding: 24px 32px 32px 24px; align-items: flex-start; }
#cr-root .page > div[b-ropzv56e5b] { padding: 0 40px 0 0; }

/* ── SECTIONS ──────────────────────────────────────────────── */
#cr-root .section[b-ropzv56e5b] { margin-bottom: 40px; }
#cr-root .section-header[b-ropzv56e5b] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
#cr-root .section-header .num[b-ropzv56e5b] {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  opacity: 0.85;
}
#cr-root .section-header h3[b-ropzv56e5b] {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* ── EXEC SUMMARY ──────────────────────────────────────────── */
#cr-root .exec-box[b-ropzv56e5b] {
  background: white;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 20px 24px;
  line-height: 1.75;
  font-size: 13.5px;
}
#cr-root .exec-box p + p[b-ropzv56e5b]  { margin-top: 10px; }
#cr-root .exec-box strong[b-ropzv56e5b] { color: var(--navy); }

/* ── ALERT BANNERS ─────────────────────────────────────────── */
#cr-root .alert[b-ropzv56e5b] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}
#cr-root .alert-critical[b-ropzv56e5b] { background: #FADBD8; border-left: 4px solid var(--red); }
#cr-root .alert-high[b-ropzv56e5b]     { background: #FDEBD0; border-left: 4px solid var(--amber); }
#cr-root .alert-medium[b-ropzv56e5b]   { background: #D6EAF8; border-left: 4px solid var(--accent); }
#cr-root .alert-low[b-ropzv56e5b]      { background: #D5F5E3; border-left: 4px solid var(--green); }
#cr-root .alert-icon[b-ropzv56e5b] { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
#cr-root .alert-body strong[b-ropzv56e5b] { display: block; font-weight: 600; margin-bottom: 2px; }

/* ── CARDS ─────────────────────────────────────────────────── */
#cr-root .cards[b-ropzv56e5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
#cr-root .card[b-ropzv56e5b] {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
#cr-root .card[b-ropzv56e5b]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
#cr-root .card.blue[b-ropzv56e5b]::before   { background: var(--accent); }
#cr-root .card.teal[b-ropzv56e5b]::before   { background: var(--teal); }
#cr-root .card.green[b-ropzv56e5b]::before  { background: var(--green); }
#cr-root .card.amber[b-ropzv56e5b]::before  { background: var(--amber); }
#cr-root .card.red[b-ropzv56e5b]::before    { background: var(--red); }
#cr-root .card.purple[b-ropzv56e5b]::before { background: var(--purple); }
#cr-root .card .card-n[b-ropzv56e5b] {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
#cr-root .card.blue   .card-n[b-ropzv56e5b] { color: var(--accent); }
#cr-root .card.teal   .card-n[b-ropzv56e5b] { color: var(--teal); }
#cr-root .card.green  .card-n[b-ropzv56e5b] { color: var(--green); }
#cr-root .card.amber  .card-n[b-ropzv56e5b] { color: var(--amber); }
#cr-root .card.red    .card-n[b-ropzv56e5b] { color: var(--red); }
#cr-root .card.purple .card-n[b-ropzv56e5b] { color: var(--purple); }
#cr-root .card .card-l[b-ropzv56e5b]   { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); font-weight: 500; }
#cr-root .card .card-sub[b-ropzv56e5b] { font-size: 11px; color: var(--grey); margin-top: 6px; line-height: 1.4; }

/* ── TABLES ────────────────────────────────────────────────── */
#cr-root .tbl-wrap[b-ropzv56e5b] { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
#cr-root table[b-ropzv56e5b]  { width: 100%; border-collapse: collapse; font-size: 13px; display: table; table-layout: fixed; }
#cr-root thead[b-ropzv56e5b]  { display: table-header-group; }
#cr-root tbody[b-ropzv56e5b]  { display: table-row-group; }
#cr-root tr[b-ropzv56e5b]     { display: table-row; }
#cr-root th[b-ropzv56e5b] {
  display: table-cell;
  background: var(--navy);
  color: #8FBFE0;
  text-align: left;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
#cr-root td[b-ropzv56e5b] { display: table-cell; padding: 9px 14px; border-bottom: 1px solid #EEF0F3; vertical-align: middle; }
#cr-root tr:last-child td[b-ropzv56e5b] { border-bottom: none; }
#cr-root tr:hover td[b-ropzv56e5b] { background: #F8FAFC; }
#cr-root .num-cell[b-ropzv56e5b] { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

/* Program chip in reteach table */
#cr-root .prog-chip[b-ropzv56e5b] {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

/* Reteach table column widths */
#cr-root .tbl-wrap table[b-ropzv56e5b] { table-layout: fixed; }
#cr-root .tbl-wrap table th:nth-child(1)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(1)[b-ropzv56e5b] { width: 170px; }  /* Program — wide enough for Tact FFC - Function */
#cr-root .tbl-wrap table th:nth-child(2)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(2)[b-ropzv56e5b] { width: auto; }   /* Skill — flex */
#cr-root .tbl-wrap table th:nth-child(3)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(3)[b-ropzv56e5b],
#cr-root .tbl-wrap table th:nth-child(4)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(4)[b-ropzv56e5b] { width: 60px; }   /* Correct / Errors */
#cr-root .tbl-wrap table th:nth-child(5)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(5)[b-ropzv56e5b] { width: 160px; }  /* Accuracy */
#cr-root .tbl-wrap table th:nth-child(6)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(6)[b-ropzv56e5b] { width: 80px; }   /* Last Probe */
#cr-root .tbl-wrap table th:nth-child(7)[b-ropzv56e5b],
#cr-root .tbl-wrap table td:nth-child(7)[b-ropzv56e5b] { width: 200px; }  /* Action */

/* ── ACCURACY BARS ─────────────────────────────────────────── */
#cr-root .acc-bar-wrap[b-ropzv56e5b] { display: flex; align-items: center; gap: 8px; padding: 0 6px; min-width: 140px; }
#cr-root .acc-bar[b-ropzv56e5b] { height: 6px; border-radius: 3px; flex: 1; background: #EEF0F3; overflow: hidden; min-width: 60px; }
#cr-root .acc-bar-fill[b-ropzv56e5b] { height: 100%; border-radius: 3px; transition: width 0.3s; }
#cr-root .acc-text[b-ropzv56e5b] { font-family: var(--mono); font-size: 12px; font-weight: 500; min-width: 40px; text-align: right; padding-right: 4px; }
#cr-root .acc-good[b-ropzv56e5b] { color: var(--green); }
#cr-root .acc-warn[b-ropzv56e5b] { color: var(--amber); }
#cr-root .acc-bad[b-ropzv56e5b]  { color: var(--red); }

/* ── BADGES ────────────────────────────────────────────────── */
#cr-root .badge[b-ropzv56e5b] {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
#cr-root .badge-red[b-ropzv56e5b]    { background: #FADBD8; color: var(--red); }
#cr-root .badge-amber[b-ropzv56e5b]  { background: #FDEBD0; color: #A04000; }
#cr-root .badge-blue[b-ropzv56e5b]   { background: #D6EAF8; color: var(--blue); }
#cr-root .badge-green[b-ropzv56e5b]  { background: #D5F5E3; color: var(--green); }
#cr-root .badge-purple[b-ropzv56e5b] { background: #E8DAEF; color: var(--purple); }
#cr-root .badge-grey[b-ropzv56e5b]   { background: #F2F3F4; color: var(--grey); }

/* ── PROBE DASHBOARD ───────────────────────────────────────── */
#cr-root .prog-grid[b-ropzv56e5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
#cr-root .prog-card[b-ropzv56e5b] { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#cr-root .prog-card-header[b-ropzv56e5b] {
  background: var(--light);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#cr-root .prog-card-header .prog-name[b-ropzv56e5b] { font-weight: 600; font-size: 13px; color: var(--navy); }
#cr-root .prog-card-header .prog-acc[b-ropzv56e5b]  { font-family: var(--mono); font-size: 16px; font-weight: 600; }
#cr-root .prog-card-body[b-ropzv56e5b] { padding: 12px 16px; }
#cr-root .prog-stat-row[b-ropzv56e5b] { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--grey); }
#cr-root .prog-stat-row span strong[b-ropzv56e5b] { color: var(--navy); }
#cr-root .prog-flag-list[b-ropzv56e5b]  { display: flex; flex-direction: column; gap: 4px; }
#cr-root .prog-flag-item[b-ropzv56e5b]  { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 8px; border-radius: 4px; background: #F8FAFC; }
#cr-root .prog-flag-item .skill-name[b-ropzv56e5b] { flex: 1; font-weight: 500; }
#cr-root .prog-flag-item .skill-acc[b-ropzv56e5b]  { font-family: var(--mono); font-size: 11px; }

/* ── RETEACH TABLE ─────────────────────────────────────────── */
#cr-root .reteach-bad[b-ropzv56e5b]  { color: var(--red);   font-weight: 600; }
#cr-root .reteach-warn[b-ropzv56e5b] { color: var(--amber); font-weight: 600; }
#cr-root .action-cell[b-ropzv56e5b]  { font-size: 11px; color: var(--grey); }

/* ── MASTERY GRID ──────────────────────────────────────────── */
#cr-root .mastery-section-label[b-ropzv56e5b] {
  font-size: 10.5px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em; color: var(--grey);
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--border);
}
#cr-root .mastery-grid[b-ropzv56e5b] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

/* ── card shell ── */
#cr-root .mastery-card[b-ropzv56e5b] {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* ── left color accent bar ── */
#cr-root .mc-color-bar[b-ropzv56e5b] {
  width: 6px;
  flex-shrink: 0;
}

/* ── card body ── */
#cr-root .mc-body[b-ropzv56e5b] {
  flex: 1;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#cr-root .mc-prog-name[b-ropzv56e5b] {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

/* stats row */
#cr-root .mc-stats[b-ropzv56e5b] {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
#cr-root .mc-n[b-ropzv56e5b]    { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1; }
#cr-root .mc-lbl[b-ropzv56e5b]  { font-size: 10px; color: var(--grey); text-transform: uppercase; letter-spacing:.06em; }
#cr-root .mc-total-sm[b-ropzv56e5b] { font-size: 10.5px; color: var(--grey); font-family: var(--mono); }
#cr-root .mc-err[b-ropzv56e5b]  { color: var(--red) !important; font-weight: 600; }

/* ── mastery view toggle row ── */
#cr-root .mastery-view-toggle-row[b-ropzv56e5b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#cr-root .mastery-view-label[b-ropzv56e5b] {
  font-size: 11px; font-family: var(--mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--grey);
}
#cr-root .mastery-view-toggle[b-ropzv56e5b] {
  display: flex;
  border: 1px solid var(--accent);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
#cr-root .mvt-btn[b-ropzv56e5b] {
  padding: 5px 14px;
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: white; color: var(--accent);
  border: none; cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
#cr-root .mvt-btn + .mvt-btn[b-ropzv56e5b] { border-left: 1px solid var(--accent); }
#cr-root .mvt-btn.mvt-active[b-ropzv56e5b]  { background: var(--accent); color: white; }
#cr-root .mvt-btn:not(.mvt-active):hover[b-ropzv56e5b] { background: #e8f2fb; }

/* ── mastery table ── */
#cr-root .mastery-table-wrap[b-ropzv56e5b] {
  width: 100%;
  overflow-x: auto;
}
#cr-root .mastery-table[b-ropzv56e5b] {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: auto;
}
#cr-root .mastery-table thead th[b-ropzv56e5b] {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--grey);
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  background: #f8f9fa;
  white-space: nowrap;
}
#cr-root .mastery-table th.mt-num[b-ropzv56e5b],
#cr-root .mastery-table td.mt-num[b-ropzv56e5b] { text-align: right; }
#cr-root .mastery-table td:first-child[b-ropzv56e5b] { padding-left: 28px; }

#cr-root .mt-group-row td[b-ropzv56e5b] {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--group-color, var(--blue));
  padding: 12px 10px 5px 10px;
  padding-left: 10px !important;
  border-top: 2px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
#cr-root .mt-group-row.grp-tact       td[b-ropzv56e5b] { background: rgba(0,120,0,0.07);   border-top-color: rgba(0,120,0,0.15); }
#cr-root .mt-group-row.grp-echoic     td[b-ropzv56e5b] { background: rgba(180,160,0,0.07); border-top-color: rgba(180,160,0,0.20); }
#cr-root .mt-group-row.grp-lr         td[b-ropzv56e5b] { background: rgba(180,0,0,0.07);   border-top-color: rgba(180,0,0,0.15); }
#cr-root .mt-group-row.grp-imitation  td[b-ropzv56e5b] { background: rgba(128,0,128,0.07); border-top-color: rgba(128,0,128,0.15); }
#cr-root .mt-group-row.grp-typing     td[b-ropzv56e5b] { background: rgba(26,107,138,0.07);border-top-color: rgba(26,107,138,0.15); }
#cr-root .mt-group-row.grp-ffc        td[b-ropzv56e5b] { background: rgba(0,80,0,0.07);    border-top-color: rgba(0,80,0,0.15); }
#cr-root .mt-group-row.grp-multi      td[b-ropzv56e5b] { background: rgba(26,82,118,0.07); border-top-color: rgba(26,82,118,0.15); }
#cr-root .mt-group-row.grp-precision  td[b-ropzv56e5b] { background: rgba(86,101,115,0.07);border-top-color: rgba(86,101,115,0.15); }
#cr-root .mt-group-row:first-child td[b-ropzv56e5b] { border-top: none; padding-top: 8px; }

#cr-root .mt-data-row td[b-ropzv56e5b] {
  padding: 5px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--navy);
  vertical-align: middle;
}
#cr-root .mt-data-row:hover td[b-ropzv56e5b] { background: #f5f8ff; }

#cr-root .mt-color-dot[b-ropzv56e5b] {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}
#cr-root .mt-of[b-ropzv56e5b]   { font-size: 10px; color: var(--grey); margin-left: 2px; }
#cr-root .mt-dim[b-ropzv56e5b]  { color: #ccc; }

#cr-root .mt-ap[b-ropzv56e5b]        { font-family: var(--mono); font-weight: 700; }
#cr-root .mt-ap-good[b-ropzv56e5b]   { color: #1e8449; }
#cr-root .mt-ap-warn[b-ropzv56e5b]   { color: #b7770d; }
#cr-root .mt-ap-bad[b-ropzv56e5b]    { color: var(--red); }

#cr-root .mt-trend[b-ropzv56e5b]     { font-family: var(--mono); font-weight: 700; font-size: 11px; }
#cr-root .mt-trend-I[b-ropzv56e5b]   { color: #1e8449; }
#cr-root .mt-trend-S[b-ropzv56e5b]   { color: var(--grey); }
#cr-root .mt-trend-D[b-ropzv56e5b]   { color: var(--red); }

#cr-root .mt-stale[b-ropzv56e5b]     { color: #b7770d; font-weight: 600; }

/* ── NEXT STEPS ────────────────────────────────────────────── */
#cr-root .next-grid[b-ropzv56e5b] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
#cr-root .next-col[b-ropzv56e5b]  { display: flex; flex-direction: column; gap: 16px; }
#cr-root .next-block[b-ropzv56e5b] { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#cr-root .next-block-header[b-ropzv56e5b] {
  padding: 10px 16px;
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
}
#cr-root .nb-red[b-ropzv56e5b]    { background: var(--red); }
#cr-root .nb-blue[b-ropzv56e5b]   { background: var(--blue); }
#cr-root .nb-teal[b-ropzv56e5b]   { background: var(--teal); }
#cr-root .nb-purple[b-ropzv56e5b] { background: var(--purple); }
#cr-root .nb-amber[b-ropzv56e5b]  { background: var(--amber); }
#cr-root .nb-green[b-ropzv56e5b]  { background: var(--green); }
#cr-root .next-block-body[b-ropzv56e5b] { padding: 14px 16px; }
#cr-root .next-item[b-ropzv56e5b] {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px solid #F2F3F4;
}
#cr-root .next-item:last-child[b-ropzv56e5b] { border-bottom: none; }
#cr-root .next-dot[b-ropzv56e5b] { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
#cr-root .dot-red[b-ropzv56e5b]   { background: var(--red); }
#cr-root .dot-blue[b-ropzv56e5b]  { background: var(--accent); }
#cr-root .dot-teal[b-ropzv56e5b]  { background: var(--teal); }
#cr-root .dot-amber[b-ropzv56e5b] { background: var(--amber); }
#cr-root .dot-green[b-ropzv56e5b] { background: var(--green); }


/* ── FFC SKILLS ─────────────────────────────────────────────── */
#cr-root .ffc-analysis-bar[b-ropzv56e5b]  { display: flex; align-items: center; gap: 0; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
#cr-root .ffc-stat-card[b-ropzv56e5b]     { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 0 12px; }
#cr-root .ffc-stat-num[b-ropzv56e5b]      { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1; color: var(--navy); }
#cr-root .ffc-stat-sub[b-ropzv56e5b]      { font-size: 13px; font-weight: 400; color: var(--grey); }
#cr-root .ffc-stat-lbl[b-ropzv56e5b]      { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin-top: 4px; }
#cr-root .ffc-stat-divider[b-ropzv56e5b]  { width: 1px; height: 40px; background: var(--border); margin: 0 8px; }
#cr-root .ffc-note-block[b-ropzv56e5b]    { font-size: 13px; line-height: 1.75; margin-bottom: 16px; background: #F8FAFC; border-left: 3px solid var(--navy); padding: 10px 14px; border-radius: 0 6px 6px 0; }
#cr-root .ffc-baseline-grid[b-ropzv56e5b] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#cr-root .ffc-col-hdr[b-ropzv56e5b] { font-size: 11px; font-family: var(--mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px 6px 0 0; }
#cr-root .ffc-col-fail[b-ropzv56e5b] { background: #FADBD8; color: var(--red); }
#cr-root .ffc-col-pass[b-ropzv56e5b] { background: #D5F5E3; color: var(--green); }
#cr-root .ffc-list[b-ropzv56e5b] { background: white; border: 1px solid var(--border); border-radius: 0 0 6px 6px; overflow: hidden; }
#cr-root .ffc-item[b-ropzv56e5b] { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #F2F3F4; font-size: 12px; }
#cr-root .ffc-item:last-child[b-ropzv56e5b] { border-bottom: none; }
#cr-root .ffc-prog[b-ropzv56e5b]     { font-size: 9px; font-family: var(--mono); font-weight: 600; background: #EEF0F3; padding: 2px 6px; border-radius: 3px; min-width: 52px; text-align: center; color: var(--grey); }
#cr-root .ffc-type-class[b-ropzv56e5b]    { background: #D5EAF7; color: #1A5276; }
#cr-root .ffc-type-feature[b-ropzv56e5b]  { background: #E8D5F5; color: #6C3483; }
#cr-root .ffc-type-function[b-ropzv56e5b] { background: #D5F5E3; color: #1E8449; }
#cr-root .ffc-label[b-ropzv56e5b] { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
#cr-root .ffc-trial[b-ropzv56e5b]    { font-weight: 400; color: #8A9BB0; font-size: 11px; white-space: nowrap; }
#cr-root .ffc-category[b-ropzv56e5b] { font-weight: 700; color: var(--accent); font-size: 12px; }
#cr-root .ffc-ex[b-ropzv56e5b]       { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--teal); text-align: right; min-width: 70px; margin-left: auto; }
#cr-root .rb[b-ropzv56e5b]        { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
#cr-root .rb-pass[b-ropzv56e5b]   { background: #D5F5E3; color: var(--green); }
#cr-root .rb-fail[b-ropzv56e5b]   { background: #FADBD8; color: var(--red); }
#cr-root .rb-tact[b-ropzv56e5b]   { background: #FDEBD0; color: #A04000; }
#cr-root .rb-skip[b-ropzv56e5b]   { background: #F2F3F4; color: var(--grey); }
#cr-root .ffc-concepts[b-ropzv56e5b] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#cr-root .ffc-tag[b-ropzv56e5b]   { font-size: 11px; padding: 3px 9px; border-radius: 12px; font-family: var(--mono); }
#cr-root .ffc-pass-tag[b-ropzv56e5b]  { background: #D5F5E3; color: var(--green); }
#cr-root .ffc-fail-tag[b-ropzv56e5b]  { background: #FADBD8; color: var(--red); }
#cr-root .ffc-border-tag[b-ropzv56e5b]{ background: #FDEBD0; color: #A04000; }

/* ── ITT MULTI ─────────────────────────────────────────────── */
#cr-root .itt-grid[b-ropzv56e5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
#cr-root .itt-card[b-ropzv56e5b] { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#cr-root .itt-hdr[b-ropzv56e5b]  { background: var(--navy); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
#cr-root .itt-name[b-ropzv56e5b] { font-size: 12px; font-weight: 600; color: white; }
#cr-root .itt-acc[b-ropzv56e5b]  { font-family: var(--mono); font-size: 20px; font-weight: 700; }
#cr-root .itt-body[b-ropzv56e5b] { padding: 12px 16px; }
#cr-root .itt-meta[b-ropzv56e5b] { display: flex; gap: 12px; font-size: 11px; color: var(--grey); margin-bottom: 8px; flex-wrap: wrap; }
#cr-root .itt-meta span[b-ropzv56e5b] { white-space: nowrap; }
#cr-root .mini-bar[b-ropzv56e5b] { display: flex; height: 7px; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
#cr-root .mb-c[b-ropzv56e5b] { background: var(--teal); }
#cr-root .mb-e[b-ropzv56e5b] { background: var(--red); }
#cr-root .mb-s[b-ropzv56e5b] { background: #BFC9CA; }
#cr-root .itt-err[b-ropzv56e5b]   { font-size: 11px; color: var(--grey); margin-top: 4px; }
#cr-root .err-badge[b-ropzv56e5b] { display: inline-block; background: #FDEDEC; color: var(--red); font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-right: 6px; }

/* ── CHARTS ────────────────────────────────────────────────── */
#cr-root .chart-wrap[b-ropzv56e5b]  { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px 16px; margin-bottom: 20px; }
#cr-root .chart-title[b-ropzv56e5b] { font-size: 12px; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--grey); margin-bottom: 4px; }
#cr-root .chart-sub[b-ropzv56e5b]   { font-size: 11px; color: var(--grey); margin-bottom: 14px; line-height: 1.55; }
#cr-root .chart-title-row[b-ropzv56e5b] { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
#cr-root .chart-note[b-ropzv56e5b]  { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text); border-left: 3px solid var(--teal); padding-left: 10px; }
#cr-root .chart-note[b-ropzv56e5b]  { margin-top: 12px; font-size: 11.5px; color: var(--grey); line-height: 1.7; }
#cr-root .bar-chart[b-ropzv56e5b]   { display: flex; align-items: flex-end; gap: 3px; height: 128px; padding-bottom: 28px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-left: 4px; }
#cr-root .bar-col[b-ropzv56e5b]     { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; position: relative; cursor: default; }
#cr-root .bar-stack[b-ropzv56e5b]   { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#cr-root .bar-seg[b-ropzv56e5b]     { width: 100%; min-height: 1px; }
#cr-root .bar-seg-c[b-ropzv56e5b]   { background: var(--teal); }
#cr-root .bar-seg-e[b-ropzv56e5b]   { background: var(--red); opacity: .9; }
#cr-root .bar-seg-s[b-ropzv56e5b]   { background: #1A5276; opacity: .9; }
#cr-root .bar-label[b-ropzv56e5b]   { position: absolute; bottom: -24px; font-size: 8px; font-family: var(--mono); color: var(--grey); white-space: nowrap; transform: rotate(-45deg); transform-origin: top left; left: 2px; }
#cr-root .chart-legend[b-ropzv56e5b]{ display: flex; gap: 16px; margin-top: 36px; font-size: 11px; color: var(--grey); }
#cr-root .legend-dot[b-ropzv56e5b]  { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
#cr-root .gap-note[b-ropzv56e5b]    { display: inline-block; background: #FFF8E7; border: 1px solid #F0D080; border-radius: 3px; font-size: 10px; padding: 2px 7px; margin-left: 8px; color: #7D6608; }

/* ── RECOMMENDATIONS ───────────────────────────────────────── */
#cr-root .rec-legend[b-ropzv56e5b]       { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding: 12px 16px; background: white; border: 1px solid var(--border); border-radius: 6px; }
#cr-root .rec-legend-item[b-ropzv56e5b]  { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono); color: var(--grey); }
#cr-root .rc[b-ropzv56e5b]               { display: inline-block; padding: 2px 8px; border-radius: 3px; border: 1px solid; font-size: 10px; font-weight: 600; font-family: var(--mono); white-space: nowrap; }
#cr-root .rc-add[b-ropzv56e5b]           { background: #E8F5EE; border-color: #A8D8BF; color: #1a6b45; }
#cr-root .rc-reteach[b-ropzv56e5b]       { background: #FDF0E8; border-color: #E8B898; color: #8b3a12; }
#cr-root .rc-intro[b-ropzv56e5b]         { background: #E8F0FD; border-color: #A8C0E8; color: #1a4d8b; }
#cr-root .rec-summary[b-ropzv56e5b]      { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
#cr-root .rec-sum-card[b-ropzv56e5b]     { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
#cr-root .rec-sum-n[b-ropzv56e5b]        { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
#cr-root .rsc-add[b-ropzv56e5b]          { color: #1a6b45; }
#cr-root .rsc-reteach[b-ropzv56e5b]      { color: #8b3a12; }
#cr-root .rsc-intro[b-ropzv56e5b]        { color: #1a4d8b; }
#cr-root .rec-sum-l[b-ropzv56e5b]        { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--grey); font-weight: 600; }
#cr-root .rec-prog-block[b-ropzv56e5b]   { margin-bottom: 32px; }


#cr-root .rph-title[b-ropzv56e5b]        { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
#cr-root .rph-title[b-ropzv56e5b]        { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
#cr-root .rph-meta[b-ropzv56e5b]         { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#cr-root .rec-added-count[b-ropzv56e5b]  { font-family: var(--mono); font-size: 11px; background: #E8F5EE; color: #1a6b45; border: 1px solid #A8D8BF; border-radius: 4px; padding: 2px 8px; }
#cr-root .rec-table[b-ropzv56e5b]        { width: 100%; border-collapse: collapse; table-layout: fixed; }
#cr-root .rec-table th[b-ropzv56e5b]     { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #8FBFE0; padding: 8px 10px; text-align: left; background: var(--navy); white-space: nowrap; display: table-cell; }
#cr-root .rec-table td[b-ropzv56e5b]     { padding: 9px 10px; border-bottom: 1px solid #EEECE8; vertical-align: middle; font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; display: table-cell; }
#cr-root .rec-table thead[b-ropzv56e5b]  { display: table-header-group; }
#cr-root .rec-table tbody[b-ropzv56e5b]  { display: table-row-group; }
#cr-root .rec-table tr[b-ropzv56e5b]     { display: table-row; }
#cr-root .rec-table tr:last-child td[b-ropzv56e5b]       { border-bottom: none; }
#cr-root .rec-table tr.added td[b-ropzv56e5b]            { background: #E8F5EE !important; opacity: .7; }
#cr-root .rec-table tr:not(.added):hover td[b-ropzv56e5b]{ background: #F5F3EE; }
#cr-root .rec-table th:nth-child(1)[b-ropzv56e5b], #cr-root .rec-table td:nth-child(1)[b-ropzv56e5b] { width: 220px; }
#cr-root .rec-table th:nth-child(2)[b-ropzv56e5b], #cr-root .rec-table td:nth-child(2)[b-ropzv56e5b] { width: auto; }
#cr-root .rec-table th:nth-child(3)[b-ropzv56e5b], #cr-root .rec-table td:nth-child(3)[b-ropzv56e5b] { width: 100px; text-align: center; }
#cr-root .skill-nm[b-ropzv56e5b]         { font-weight: 600; color: var(--navy); }
#cr-root .skill-sd[b-ropzv56e5b]         { font-size: 11px; color: var(--grey); font-family: var(--mono); margin-top: 2px; }
#cr-root .skill-note-rec[b-ropzv56e5b]   { font-size: 11px; color: var(--grey); font-style: italic; }
#cr-root .acc-mini[b-ropzv56e5b]         { display: flex; align-items: center; gap: 6px; }
#cr-root .acc-track-sm[b-ropzv56e5b]     { width: 56px; height: 5px; background: #E8E5DE; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
#cr-root .acc-fill-sm[b-ropzv56e5b]      { height: 100%; border-radius: 3px; }

/* ── BUTTONS ───────────────────────────────────────────────── */
#cr-root .btn-add[b-ropzv56e5b] {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a6b45; color: white; border: none; border-radius: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .1s;
}
#cr-root .btn-add:hover[b-ropzv56e5b]   { background: #145535; }
#cr-root .btn-add:active[b-ropzv56e5b]  { transform: scale(0.97); }
#cr-root .btn-add.added[b-ropzv56e5b]   { background: #566573; cursor: default; }
#cr-root .btn-reteach[b-ropzv56e5b] {
  display: inline-flex; align-items: center; gap: 6px;
  background: #8b3a12; color: white; border: none; border-radius: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
#cr-root .btn-reteach:hover[b-ropzv56e5b] { background: #6d2e0e; }
#cr-root .btn-intro[b-ropzv56e5b] {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a4d8b; color: white; border: none; border-radius: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
#cr-root .btn-intro:hover[b-ropzv56e5b] { background: #143d6d; }
#cr-root .added-check[b-ropzv56e5b]     { color: #1a6b45; font-size: 13px; font-weight: 700; }

/* ── TOAST ─────────────────────────────────────────────────── */
#cr-root .rec-toast[b-ropzv56e5b] {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--navy); color: white;
  font-family: var(--mono); font-size: 12px;
  padding: 12px 18px; border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 1000; max-width: 360px;
}
#cr-root .rec-toast.show[b-ropzv56e5b] { opacity: 1; transform: translateY(0); }

/* ── FOOTER ────────────────────────────────────────────────── */
#cr-root footer[b-ropzv56e5b] {
  background: var(--navy);
  color: #8FBFE0;
  text-align: center;
  padding: 16px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  margin-top: 40px;
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  #cr-root[b-ropzv56e5b] { background: white; }
  #cr-root nav[b-ropzv56e5b]    { display: none; }
  #cr-root .page[b-ropzv56e5b]  { padding: 20px; }
}

/* ── NEVER-PROBED GROUPED ROWS ─────────────────────────────── */
#cr-root .np-row[b-ropzv56e5b] {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: 12px; flex-wrap: wrap;
}
#cr-root .np-prog[b-ropzv56e5b]  { font-family: var(--mono); font-size: 11px; min-width: 130px; flex-shrink: 0; }
#cr-root .flag-chip[b-ropzv56e5b] {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
#cr-root .np-skills[b-ropzv56e5b] { color: var(--grey); line-height: 1.5; }

/* ── ADD ALL / RETEACH ALL BUTTON ─────────────────────────── */
#cr-root .btn-add-all[b-ropzv56e5b] {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--navy); color: white; border: none; border-radius: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
#cr-root .btn-add-all:hover[b-ropzv56e5b] { background: #1B4F8A; }

/* ── NEXT-STEP DOT COLORS ─────────────────────────────────── */
#cr-root .dot-green[b-ropzv56e5b] { background: var(--green); }
#cr-root .dot-amber[b-ropzv56e5b] { background: var(--amber); }

/* ── BAR CHART GAP COLUMN ────────────────────────────────── */
#cr-root .bar-gap[b-ropzv56e5b] { opacity: 1; }
#cr-root .bar-gap .bar-label[b-ropzv56e5b] { opacity: 0.35; }
#cr-root .bar-gap-shade[b-ropzv56e5b] { position:absolute;inset:0;background:rgba(200,180,80,0.13);border-left:1px solid rgba(200,160,40,0.25); }

/* ── CHART NOTE / GAP NOTE ───────────────────────────────── */
#cr-root .chart-note[b-ropzv56e5b] {
  margin-top: 10px; font-size: 11.5px; color: var(--grey); line-height: 1.7;
}
#cr-root .gap-note[b-ropzv56e5b] {
  font-size: 10px; color: var(--amber); margin-left: 8px;
  font-weight: 500; font-family: var(--mono);
}

/* Inline toolbar spinner */
.cr-spinner[b-ropzv56e5b] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(0,86,130,0.2);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: cr-spin-b-ropzv56e5b 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}
@keyframes cr-spin-b-ropzv56e5b {
    to { transform: rotate(360deg); }
}

/* ── Side Navigator ───────────────────────────────────────── */
/* Note: @media not used here due to Blazor scoped CSS limitations.
   Visibility controlled via inline style on the nav element instead. */
/* ── Side Navigator ───────────────────────────────────────── */
#cr-root .cr-sidenav[b-ropzv56e5b] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    width: 186px;
    min-width: 186px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: white;
    border: 1px solid #ccd8e8;
    border-top: 3px solid var(--accent);
    border-radius: 0 0 8px 8px;
    padding: 0 0 12px 0;
    gap: 0;
    margin-right: clamp(8px, 2vw, 100px);
    margin-top: 0;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,0.09);
}
#cr-sidenav[b-ropzv56e5b]::before {
    content: "SECTIONS";
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: white;
    background: #2E86C1;
    padding: 8px 14px;
    margin-bottom: 6px;
}
#cr-root .cr-sidenav a[b-ropzv56e5b] {
    display: block;
    padding: 11px 14px 11px 20px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: #2c4460;
    text-decoration: none;
    border-left: 3px solid transparent;
    line-height: 1.3;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}
#cr-root .cr-sidenav a:hover[b-ropzv56e5b] {
    color: var(--accent);
    border-left-color: var(--accent);
    background: #eef4fc;
}
#cr-root .cr-sidenav a:active[b-ropzv56e5b] {
    background: #d6e8f8;
    color: var(--blue);
    border-left-color: var(--blue);
}
/* Use ID selector to bypass Blazor CSS scoping — .active added by JS has no scoped attribute */
#cr-sidenav a.active[b-ropzv56e5b] {
    color: #1a5fa8;
    border-left-color: #2E86C1;
    background: #e2eef9;
    font-weight: 700;
}
#cr-root .cr-sidenav-recs[b-ropzv56e5b] {
    color: var(--teal) !important;
    margin-top: 4px;
    border-top: 1px solid #d8e8d8 !important;
    padding-top: 10px !important;
}
#cr-root .cr-sidenav-recs:hover[b-ropzv56e5b] {
    border-left-color: var(--teal) !important;
    color: #0e8a72 !important;
    background: #e6f7f4 !important;
}
#cr-root .cr-sidenav-recs:active[b-ropzv56e5b] {
    background: #c8ede6 !important;
}
#cr-sidenav a.cr-sidenav-recs.active[b-ropzv56e5b] {
    border-left-color: var(--teal) !important;
    background: #d4f2ec !important;
    color: #0e8a72 !important;
}

/* ── Sidenav responsive — hide below 900px to avoid crowding content ── */
@media (max-width: 960px) {
    #cr-root .cr-sidenav[b-ropzv56e5b] {
        display: none;
    }
}

/* ── SECTION 03 — Never Probed card ───────────────────────── */
#cr-root .np-card[b-ropzv56e5b] {
  background: #fff8f0;
  border: 1px solid #f5c99a;
  border-left: 4px solid #E67E22;
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 20px;
}
#cr-root .np-card-hdr[b-ropzv56e5b] {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #E67E22; margin-bottom: 10px;
}

/* ── SECTION 10 — Softer button colors ────────────────────── */
#cr-root .btn-add[b-ropzv56e5b]      { background: #2e8b5a; }
#cr-root .btn-add:hover[b-ropzv56e5b] { background: #24704a; }
#cr-root .btn-reteach[b-ropzv56e5b]  { background: #c0542a; }
#cr-root .btn-reteach:hover[b-ropzv56e5b] { background: #a04422; }
#cr-root .btn-intro[b-ropzv56e5b]    { background: #2e66b0; }
#cr-root .btn-intro:hover[b-ropzv56e5b] { background: #24529a; }
#cr-root .btn-add-all[b-ropzv56e5b]  { background: #3a5f8a; }
#cr-root .btn-add-all:hover[b-ropzv56e5b] { background: #2e4e73; }

/* ── SECTION 11/12 — Floating skill tooltip ───────────────── */
#cm-float-tip[b-ropzv56e5b] {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: rgba(13,27,42,.96);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  min-width: 180px;
  max-width: 240px;
  overflow: hidden;
  left: -9999px; top: -9999px;
}

/* ── LIVE REPORT BUTTON ────────────────────────────────────── */
#cr-root .toolbar-btn[b-ropzv56e5b] {
  display: inline-flex; align-items: center; gap: 5px;
  background: white; color: var(--navy);
  border: 1.5px solid #c8cdd5; border-radius: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 5px 12px; cursor: pointer;
  transition: all .15s;
}
#cr-root .toolbar-btn:hover[b-ropzv56e5b] { border-color: var(--navy); background: #f0f4f8; }
#cr-root .toolbar-btn-active[b-ropzv56e5b] {
  background: var(--navy); color: white;
  border-color: var(--navy);
}
#cr-root .toolbar-btn-active:hover[b-ropzv56e5b] { background: #1a3550; }
#cr-root .toolbar-group-dimmed[b-ropzv56e5b] { opacity: 0.45; pointer-events: none; }

/* ── LIVE REPORT NOTICE BANNER ─────────────────────────────── */
#cr-root .live-report-banner[b-ropzv56e5b] {
  display: flex; align-items: center; gap: 10px;
  background: #fff8e1; border: 1px solid #ffe082;
  border-left: 4px solid #f59e0b;
  border-radius: 6px; padding: 10px 16px;
  font-size: 12px; color: #78350f;
  font-family: var(--mono); margin-bottom: 20px;
}

/* ── VB-ISA SCORE BADGE & TOOLTIP ─────────────────────────── */
#cr-root .vbisa-badge[b-ropzv56e5b] {
  display: inline-flex; align-items: center; position: relative;
  font-size: 13px; font-weight: 700; color: #7a4f00;
  margin-right: 16px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: 3px 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  white-space: nowrap; cursor: pointer;
}
#cr-root .vbisa-tip[b-ropzv56e5b] {
  position: absolute; top: calc(100% + 8px); left: 0;
  z-index: 9999; min-width: 340px;
  background: #0d1b2a; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  overflow: hidden; pointer-events: none;
  font-family: var(--mono);
}
#cr-root .vbisa-tip-hdr[b-ropzv56e5b] {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #b8860b, #d4a017);
  padding: 10px 16px;
}
#cr-root .vbisa-tip-title[b-ropzv56e5b] {
  font-size: 13px; font-weight: 800; color: #1a0a00; letter-spacing: .02em;
}
#cr-root .vbisa-tip-total[b-ropzv56e5b] {
  font-size: 22px; font-weight: 900; color: #1a0a00;
}
#cr-root .vbisa-tip-body[b-ropzv56e5b] { padding: 12px 16px; }
#cr-root .vbisa-section-hdr[b-ropzv56e5b] {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #FFA500; margin-bottom: 6px;
}
#cr-root .vbisa-tip-sub[b-ropzv56e5b] {
  font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 6px;
}
#cr-root .vbisa-table[b-ropzv56e5b] { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
#cr-root .vbisa-table td[b-ropzv56e5b] { padding: 3px 6px; color: rgba(255,255,255,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cr-root .vbisa-table td:first-child[b-ropzv56e5b] { color: rgba(255,255,255,.6); width: 50%; }
#cr-root .vbisa-table td:nth-child(2)[b-ropzv56e5b] { width: 28%; text-align: right; padding-right: 10px; }
#cr-root .vbisa-table td:nth-child(3)[b-ropzv56e5b] { width: 22%; text-align: right; }
#cr-root .vbisa-weight[b-ropzv56e5b] { color: #FFA500; font-size: 10px; }
#cr-root .vbisa-pts[b-ropzv56e5b] { text-align: right; font-weight: 700; color: #FFD700 !important; }
#cr-root .vbisa-total-row td[b-ropzv56e5b] { 
  border-top: 1px solid rgba(255,255,255,.15); 
  padding-top: 5px; color: rgba(255,255,255,.6) !important;
}
#cr-root .vbisa-total-row .vbisa-pts[b-ropzv56e5b] { color: #FFD700 !important; }
#cr-root .vbisa-tip-footer[b-ropzv56e5b] {
  font-size: 9px; color: rgba(255,255,255,.3); text-align: center;
  padding: 8px; border-top: 1px solid rgba(255,255,255,.08); font-style: italic;
}