:root,
:root[data-bt-theme="light"] {
  --b121-chart-bg: #f8fbfe;
  --b121-chart-grid: #b8c9d8;
  --b121-chart-axis: #718ba2;
  --b121-chart-text: #3f5a72;
  --b121-chart-point-ring: #ffffff;
}

:root[data-bt-theme="dark"] {
  --b121-chart-bg: #091b2d;
  --b121-chart-grid: #294963;
  --b121-chart-axis: #6486a2;
  --b121-chart-text: #b7cad9;
  --b121-chart-point-ring: #091b2d;
}

/* One identity component in every shell; mounts are shared, not page-specific markup. */
.bt-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.bt-brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--b12-cyan) 54%, transparent);
  border-radius: 9px;
  box-shadow: 0 5px 16px rgba(0, 88, 190, .2);
}
.bt-brand-name { white-space: nowrap; }
.top .bt-brand { color: var(--b12-text); }

/* Late cards and all focus states use the same semantic surface contract. */
:root.release-3-premium[data-bt-theme] :is(
  .focus-authoritative,
  .focus-list,
  .focus-row,
  .assigned-exercise-card,
  .assignment-card,
  .assignment-summary,
  .assignment-details,
  .student-overview-card,
  .player-metrics-card
) {
  color: var(--b12-text) !important;
  background: var(--b12-surface) !important;
  border-color: var(--b12-line) !important;
}

:root.release-3-premium[data-bt-theme] :is(
  .focus-row,
  .assigned-exercise-card,
  .assignment-card,
  .student-overview-card,
  .player-metrics-card
) :is(h2, h3, h4, b, strong, .focus-title, .assignment-title) {
  color: var(--b12-text) !important;
}

:root.release-3-premium[data-bt-theme] :is(
  .focus-row,
  .assigned-exercise-card,
  .assignment-card,
  .student-overview-card,
  .player-metrics-card
) :is(p, small, .small, .muted, .focus-meta, .rating-delta) {
  color: var(--b12-muted) !important;
}

.focus-list { display: grid; gap: 10px; }
.focus-row {
  border: 1px solid var(--b12-line);
  border-radius: 13px;
  box-shadow: none;
}
.focus-authoritative {
  border: 1px solid var(--b12-line);
  border-radius: 11px;
}
:root.release-3-premium[data-bt-theme] .activity-pill,
:root.release-3-premium[data-bt-theme] .rating-delta {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor;
}

/* Progress SVG is theme-reactive CSS, never a dark cached bitmap/gradient. */
:root.release-3-premium[data-bt-theme] .bt-progress-chart .chart-wrap {
  color: var(--b121-chart-text) !important;
  background: var(--b121-chart-bg) !important;
  background-image: none !important;
  border-color: var(--b12-line) !important;
}
.bt-progress-chart .chart-wrap .ax { stroke: var(--b121-chart-axis) !important; }
.bt-progress-chart .chart-wrap .gl { stroke: var(--b121-chart-grid) !important; }
.bt-progress-chart .chart-wrap .tx { fill: var(--b121-chart-text) !important; }
.bt-progress-chart .chart-wrap .al { fill: var(--b12-text) !important; }
.bt-progress-chart .chart-wrap .pt { stroke: var(--b121-chart-point-ring) !important; }
.bt-progress-chart .chart-legend { color: var(--b12-muted); }

/* Progress summaries need enough horizontal room for real multi-digit values. */
.progress-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

.progress-card {
  container-type: inline-size;
}

.progress-card .bt-progress-primary strong {
  font-size: clamp(2rem, 8cqi, 3.1rem);
}

.progress-card .bt-progress-secondary strong {
  font-size: clamp(1.35rem, 5.5cqi, 2rem);
}

@container (max-width: 29rem) {
  .progress-card .bt-progress-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-card .bt-progress-summary > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Full-screen Builder: no page overflow and every region scrolls within itself. */
html:has(#diagramBuilderModal:not(.hidden)),
body:has(#diagramBuilderModal:not(.hidden)) { overflow: hidden; }
#diagramBuilderModal {
  color-scheme: dark;
  --builder-surface: #070d13;
  --builder-surface-elevated: #111b24;
  --builder-control: #14222e;
  --builder-text-primary: #edf4fa;
  --builder-text-secondary: #b7c7d3;
  --builder-border: #3b4c5b;
  --builder-disabled-bg: #18232d;
  --builder-disabled-text: #9aaab7;
  --bt-background: var(--builder-surface);
  --bt-surface: var(--builder-surface);
  --bt-surface-elevated: var(--builder-surface-elevated);
  --bt-surface-interactive: var(--builder-control);
  --bt-surface-muted: var(--builder-control);
  --bt-text-primary: var(--builder-text-primary);
  --bt-text-secondary: var(--builder-text-secondary);
  --bt-text-muted: var(--builder-text-secondary);
  --bt-border: var(--builder-border);
  --bt-border-strong: #607486;
  --bt-disabled-bg: var(--builder-disabled-bg);
  --bt-disabled-text: var(--builder-disabled-text);
  --b11-bg: var(--builder-surface);
  --b11-shell: var(--builder-surface);
  --b11-surface: var(--builder-surface-elevated);
  --b11-surface-2: var(--builder-disabled-bg);
  --b11-control: var(--builder-control);
  --b11-control-hover: #192c3b;
  --b11-text: var(--builder-text-primary);
  --b11-muted: var(--builder-text-secondary);
  --b11-placeholder: #91a5b5;
  --b11-line: var(--builder-border);
  --b12-text: var(--builder-text-primary);
  --b12-muted: var(--builder-text-secondary);
  --r3-bg: var(--builder-surface);
  --r3-bg-soft: var(--builder-surface);
  --r3-surface: var(--builder-surface-elevated);
  --r3-surface-raised: var(--builder-surface-elevated);
  --r3-surface-soft: var(--builder-control);
  --r3-line: var(--builder-border);
  --r3-line-strong: #607486;
  --r3-text: var(--builder-text-primary);
  --r3-muted: var(--builder-text-secondary);
  --surface: var(--builder-surface);
  --surface-elevated: var(--builder-surface-elevated);
  --surface-muted: var(--builder-control);
  --text: var(--builder-text-primary);
  --text-primary: var(--builder-text-primary);
  --text-secondary: var(--builder-text-secondary);
  --text-muted: var(--builder-text-secondary);
  --ink: var(--builder-text-primary);
  --muted: var(--builder-text-secondary);
  --border: var(--builder-border);
  --line: var(--builder-border);
  color: var(--builder-text-primary);
  padding: 0;
  overflow: hidden;
}
#diagramBuilderModal .modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}
#diagramBuilderModal :is(.modal-card, #diagramBuilderRoot) {
  color: var(--builder-text-primary);
  background: var(--builder-surface);
  border-color: var(--builder-border);
}
#diagramBuilderModal :is(.small, small, .muted, .premium-hint, .premium-builder-status) {
  color: var(--builder-text-secondary) !important;
  -webkit-text-fill-color: currentColor;
}
#diagramBuilderModal :is(.premium-builder-title b, .premium-panel-title, .premium-builder-right h4, label) {
  color: var(--builder-text-primary);
}
#diagramBuilderRoot {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
#diagramBuilderModal .premium-builder-header {
  min-height: 52px;
  padding: 7px 12px;
  gap: 9px;
}
#diagramBuilderModal .premium-builder-title { min-width: 150px; }
#diagramBuilderModal .premium-builder-status {
  max-width: min(27vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#diagramBuilderModal .premium-toolbar {
  position: relative;
  top: auto;
  min-width: 0;
  min-height: 46px;
  padding: 5px 9px;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
#diagramBuilderModal .premium-tool {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 34px !important;
  padding: 5px 9px !important;
  font-size: .82rem;
}
#diagramBuilderModal .premium-builder-shell {
  display: grid;
  grid-template-columns: clamp(104px, 9vw, 132px) minmax(0, 1fr) clamp(168px, 15vw, 214px) !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
}
#diagramBuilderModal :is(.premium-builder-left, .premium-builder-right) {
  min-width: 0;
  min-height: 0;
  padding: 7px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#diagramBuilderModal .premium-ball-grid {
  grid-template-columns: repeat(4, minmax(20px, 1fr));
  gap: 5px;
  padding-bottom: 8px;
}
#diagramBuilderModal .premium-ball-choice {
  width: 100% !important;
  max-width: 29px;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1;
  justify-self: center;
  font-size: .68rem;
}
#diagramBuilderModal .premium-hint {
  margin-top: 8px;
  font-size: .68rem;
  line-height: 1.32;
}
#diagramBuilderModal .premium-stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 4px 6px 5px !important;
  overflow: hidden;
}
#diagramBuilderModal .premium-table-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}
#diagramBuilderModal .premium-table-wrap svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
#diagramBuilderModal .builder-position-bar {
  position: relative;
  bottom: auto;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  max-height: 82px;
  margin: 4px 0 0 !important;
  padding: 4px 6px !important;
  overflow: auto;
  overscroll-behavior: contain;
}
#diagramBuilderModal .builder-position-bar .btn {
  flex: 0 0 auto;
  min-height: 32px !important;
  padding: 4px 8px !important;
  font-size: .76rem;
}
#diagramBuilderModal .builder-position-actions { display: flex; flex-wrap: nowrap; }

#diagramBuilderModal .builder-renderer-comparison {
  position: absolute;
  z-index: 80;
  inset: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  color: #edf6ff;
  background: #07131f;
  border: 1px solid #315572;
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
}

#diagramBuilderModal .builder-renderer-comparison > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#diagramBuilderModal .builder-renderer-comparison > header div,
#diagramBuilderModal .builder-renderer-comparison figure {
  display: grid;
  gap: 4px;
}

#diagramBuilderModal .builder-renderer-comparison > header span,
#diagramBuilderModal .builder-renderer-comparison > footer {
  color: #a9c0d4;
  font-size: .76rem;
}

#diagramBuilderModal .builder-renderer-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 0;
}

#diagramBuilderModal .builder-renderer-comparison figure {
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px;
  background: #0d1d2c;
  border: 1px solid #27445d;
  border-radius: 10px;
}

#diagramBuilderModal .builder-renderer-comparison :is(svg, img) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1616 / 896;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 760px) {
  #diagramBuilderModal .builder-renderer-proof-grid { grid-template-columns: 1fr; overflow-y: auto; }
  #diagramBuilderModal .builder-renderer-comparison figure { min-height: 210px; }
}

@media (max-width: 1100px), (max-height: 660px) {
  #diagramBuilderModal .premium-builder-header { min-height: 46px; padding: 5px 8px; }
  #diagramBuilderModal .premium-builder-title span { display: none; }
  #diagramBuilderModal .premium-toolbar { min-height: 42px; }
  #diagramBuilderModal .premium-builder-shell {
    grid-template-columns: 100px minmax(0, 1fr) 170px !important;
  }
  #diagramBuilderModal .premium-panel-title { margin: 2px 0 6px; }
  #diagramBuilderModal .premium-ball-grid { gap: 2px; }
  #diagramBuilderModal .premium-hint { display: none; }
}

/* Gate 1.3.2 — il selettore Snap resta intrinseco e la toolbar va a capo. */
#diagramBuilderModal .premium-toolbar {
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
}
#diagramBuilderModal .premium-toolbar-spacer {
  flex: 1 1 16px;
  min-width: 0;
}
#diagramBuilderModal #builderSnap {
  width: auto !important;
  max-width: max-content;
  min-width: 0;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .bt-brand-name { font-size: .9rem; }
  .bt-brand-logo { width: 30px; height: 30px; }
  #diagramBuilderModal .premium-builder-shell {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
  #diagramBuilderModal .premium-builder-right {
    position: absolute;
    z-index: 20;
    inset: 88px 0 0 auto;
    width: min(280px, 82vw);
    box-shadow: -14px 0 30px rgba(0,0,0,.4);
  }
}