/* =========================================================================
   shared/base.css - Design System Bersama
   Media Pembelajaran Interaktif - Matematika (iLedia)
   Digunakan oleh semua MPI yang berbagi design system ini.
   ========================================================================= */

:root {
  --color-bg: #f7f8f5;
  --color-bg-grid: #edeee8;
  --color-surface: #ffffff;
  --color-border: #d6d8d0;
  --color-border-strong: #b8bbb2;
  --color-ink: #21262b;
  --color-ink-muted: #565c5f;

  /* primary */
  --color-primary: #2563eb;
  --color-primary-soft: #eff6ff;
  --color-primary-strong: #1d4ed8;

  /* accents */
  --color-blue: #1856a4;
  --color-blue-soft: #dde8f5;
  --color-blue-strong: #0f3d75;
  --color-orange: #b1500a;
  --color-orange-soft: #f4dcc7;
  --color-orange-strong: #8a3d07;
  --color-purple: #6b35a4;
  --color-purple-soft: #ede0f5;
  --color-purple-strong: #4a2275;

  /* semantic states */
  --color-success: #2f7d4f;
  --color-success-soft: #dceee1;
  --color-success-strong: #1a5234;
  --color-error: #a63535;
  --color-error-soft: #f5dede;
  --color-error-strong: #7a2525;
  --color-warning: #8a6200;
  --color-warning-soft: #fdf3d0;
  --color-warning-strong: #6a4c00;
  --color-focus: #2563eb;

  --font-display: 'Avenir Next', 'Segoe UI Semibold', 'Segoe UI', 'Helvetica Neue', Arial,
    sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono',
    monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --max-content-width: 1100px;
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.25;
}

h2 {
  font-size: 1.45rem;
}
h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
h4 {
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

p {
  margin: 0 0 var(--space-3) 0;
}

ul,
ol {
  margin: 0 0 var(--space-3) 0;
  padding-left: 1.4em;
}

li {
  margin-bottom: var(--space-1);
}

strong {
  font-weight: 600;
}

/* =========================================================================
   Utility
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* =========================================================================
   Header
   ========================================================================= */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header__brand {
  min-width: 0;
}

.app-header__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.app-header__title {
  font-size: 1.1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* =========================================================================
   Stage navigation
   ========================================================================= */

.stage-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  position: sticky;
  top: 61px;
  z-index: 19;
  scrollbar-width: thin;
}

.stage-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-1);
  min-width: max-content;
}

.stage-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s,
    color 0.12s,
    border-color 0.12s;
}

.stage-nav__item:hover:not(:disabled) {
  background: var(--color-bg-grid);
  color: var(--color-ink);
}

.stage-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  flex-shrink: 0;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.stage-nav__item[aria-current='step'] {
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

.stage-nav__item[aria-current='step'] .stage-nav__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.stage-nav__item.is-complete .stage-nav__num {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.stage-nav__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================================
   Main layout
   ========================================================================= */

main {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.progress-bar-wrap {
  margin-bottom: var(--space-5);
}

.progress-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-grid);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* =========================================================================
   Stage panels
   ========================================================================= */

.stage-head {
  margin-bottom: var(--space-5);
}

.stage-head__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.stage-head__goal {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  margin: 0;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-3);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.panel--hero {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, #fff 60%);
}

.panel--info {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.panel--compact {
  padding: var(--space-4);
}

.panel--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    transform 0.05s;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}
.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover {
  background: var(--color-bg-grid);
}

.btn--outline-primary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline-primary:hover {
  background: var(--color-primary-soft);
}

.btn--small {
  padding: 6px 12px;
  font-size: 0.82rem;
  min-height: 36px;
}
.btn--large {
  padding: 12px 28px;
  font-size: 1rem;
  min-height: 52px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.btn-group--end {
  justify-content: flex-end;
}
.btn-group--spread {
  justify-content: space-between;
}
.btn-group--center {
  justify-content: center;
}

/* =========================================================================
   Forms / inputs
   ========================================================================= */

.field-group {
  margin-bottom: var(--space-4);
}

.field-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--space-1);
}

.field-group .field-hint {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.input-text,
.input-textarea,
.input-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  min-height: 44px;
  transition: border-color 0.12s;
}

.input-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.input-text:focus,
.input-textarea:focus {
  border-color: var(--color-primary);
}
.input-text:hover,
.input-textarea:hover {
  border-color: var(--color-ink-muted);
}

.input-text.has-error {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.field-error {
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: var(--space-1);
}
.field-error::before {
  content: '⚠ ';
}
.field-error:empty {
  display: none;
}

/* =========================================================================
   Feedback boxes
   ========================================================================= */

.feedback-box {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: 1px solid transparent;
}

.feedback-box__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}
.feedback-box__body {
  flex: 1;
  min-width: 0;
}

.feedback-box--success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-strong);
}
.feedback-box--error {
  background: var(--color-error-soft);
  border-color: var(--color-error);
  color: var(--color-error-strong);
}
.feedback-box--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-strong);
}
.feedback-box--info {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

/* =========================================================================
   Notice / toast
   ========================================================================= */

.app-notice {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.app-notice.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================================
   Modal
   ========================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
   Orientasi components
   ========================================================================= */

.hero-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.hero-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.95rem;
}

.hero-steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-strong);
}

.objectives-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.objectives-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  margin: 0;
}

.objectives-list li:last-child {
  border-bottom: none;
}

/* Teks TP pada panel "Tujuan belajar hari ini". */
.tp-teks {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  font-weight: 600;
}

.objectives-list__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 700;
  min-width: 24px;
  padding-top: 2px;
}

/* =========================================================================
   Fraction display (inline & block)
   ========================================================================= */

/* Inline fraction: use in paragraphs */
.frac-inline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  gap: 1px;
  font-size: 0.85em;
}

.frac-inline .frac-num {
  border-bottom: 1.5px solid currentColor;
  padding: 0 3px;
  line-height: 1.2;
}

.frac-inline .frac-den {
  padding: 0 3px;
  line-height: 1.2;
}

/* Block fraction: standalone display */
.frac-block {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
}

.frac-block__whole {
  font-size: inherit;
  font-weight: 700;
  margin-right: 3px;
  line-height: 1;
}

.frac-block__frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.frac-block__num {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  padding: 0 4px;
  line-height: 1.3;
  min-width: 1ch;
  text-align: center;
}

.frac-block__den {
  font-weight: 700;
  padding: 0 4px;
  line-height: 1.3;
  min-width: 1ch;
  text-align: center;
}

/* Hero size — large display for exercise focus */
.frac-block--hero .frac-block__num,
.frac-block--hero .frac-block__den {
  font-size: 2.4rem;
}
.frac-block--hero .frac-block__num {
  border-bottom-width: 3px;
}
.frac-block--hero .frac-block__whole {
  font-size: 2.4rem;
}

/* Large size */
.frac-block--large .frac-block__num,
.frac-block--large .frac-block__den {
  font-size: 1.5rem;
}
.frac-block--large .frac-block__whole {
  font-size: 1.5rem;
}

/* Small size */
.frac-block--small .frac-block__num,
.frac-block--small .frac-block__den {
  font-size: 0.8rem;
}
.frac-block--small .frac-block__whole {
  font-size: 0.8rem;
}

/* Decimal hero display */
.decimal-display {
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  display: inline-block;
}

.decimal-display--hero {
  font-size: 2.8rem;
}

.decimal-display--large {
  font-size: 1.5rem;
}

.decimal-display--small {
  font-size: 0.85rem;
}

/* =========================================================================
   Area model (visual fraction representation)
   ========================================================================= */

.area-model-wrap {
  margin: var(--space-3) 0;
}

.area-model {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 360px;
}

.area-model__cell {
  height: 48px;
  border: 2px solid var(--color-primary);
  border-radius: 3px;
  background: var(--color-surface);
  transition: background-color 0.15s;
}

.area-model__cell--shaded {
  background: var(--color-primary);
  opacity: 0.85;
}

.area-model__caption {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

.area-model--small .area-model__cell {
  height: 32px;
}
.area-model--tiny .area-model__cell {
  height: 20px;
}

/* =========================================================================
   Decimal bar (proportion visualization)
   ========================================================================= */

.decimal-bar {
  position: relative;
  height: 32px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  max-width: 360px;
}

.decimal-bar__fill {
  height: 100%;
  background: var(--color-primary);
  opacity: 0.8;
  transition: width 0.4s ease;
}

.decimal-bar__label {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-primary-strong);
  pointer-events: none;
}

/* =========================================================================
   Exploration fractions grid
   ========================================================================= */

.frac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.frac-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.12s,
    background-color 0.12s,
    transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 96px;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}

.frac-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateY(-2px);
}

.frac-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.frac-card.is-explored {
  border-color: var(--color-success);
}

.frac-card.is-explored::after {
  content: '✓';
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-success-strong);
  margin-top: 2px;
}

.frac-card__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

/* =========================================================================
   Exploration detail panel
   ========================================================================= */

.explore-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 640px) {
  .explore-panel {
    grid-template-columns: 1fr;
  }
}

.explore-visual {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.explore-visual__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.explore-fraction-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  font-size: 1rem;
}

.explore-fraction-hero .frac-block {
  color: var(--color-primary-strong);
}

.predict-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.predict-form h4 {
  margin-bottom: var(--space-3);
}

.decimal-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.decimal-input-wrap .input-text {
  max-width: 160px;
  width: auto;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: center;
}

.explore-revealed {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.explore-revealed__answer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.explore-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.explore-progress__count {
  font-weight: 700;
  color: var(--color-primary);
}

/* =========================================================================
   Exercise progress dots / steps
   ========================================================================= */

.exercise-progress {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.exercise-progress__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  border: 2px solid var(--color-border-strong);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  flex-shrink: 0;
}

.exercise-progress__dot--current {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.exercise-progress__dot--correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.exercise-progress__dot--incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.exercise-progress__dot--done {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.exercise-label {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-left: var(--space-2);
}

/* =========================================================================
   Conversion exercise
   ========================================================================= */

.konversi-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: var(--space-5) 0;
}

.konversi-frac-hero {
  text-align: center;
}

.konversi-frac-hero .frac-block {
  color: var(--color-primary-strong);
}

.konversi-visual {
  max-width: 220px;
  width: 100%;
}

.konversi-answer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.konversi-answer-row .input-text {
  max-width: 160px;
  width: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  text-align: center;
}

.hint-box {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  color: var(--color-warning-strong);
  margin-top: var(--space-3);
}

.hint-box__label {
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

details.hint-reveal {
  margin-top: var(--space-3);
}

details.hint-reveal summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

details.hint-reveal summary::-webkit-details-marker {
  display: none;
}
details.hint-reveal summary::before {
  content: '💡';
}
details.hint-reveal[open] summary::before {
  content: '💡';
}

.hint-reveal__content {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  margin-top: var(--space-2);
}

/* =========================================================================
   Comparison exercise
   ========================================================================= */

.bandingkan-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-grid);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.bandingkan-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 90px;
}

.bandingkan-item__label {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}

.bandingkan-item__num {
  color: var(--color-primary-strong);
}

.bandingkan-sep {
  font-size: 1.8rem;
  color: var(--color-border-strong);
  font-weight: 300;
  line-height: 1;
  align-self: center;
}

/* Operator choice buttons */
.operator-choice {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

.operator-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-ink);
  cursor: pointer;
  line-height: 1;
  transition:
    border-color 0.12s,
    background-color 0.12s,
    transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operator-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: scale(1.08);
}

.operator-btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.operator-btn.is-correct {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.operator-btn.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.comparison-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-primary-strong);
  margin: var(--space-3) 0;
}

/* =========================================================================
   Sort cards (Urutkan)
   ========================================================================= */

.sort-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.sort-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: grab;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.1s;
  -webkit-user-select: none;
  user-select: none;
}

.sort-card:hover {
  border-color: var(--color-primary);
}

.sort-card.is-dragging {
  opacity: 0.6;
  cursor: grabbing;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: scale(1.01);
}

.sort-card.is-drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.sort-card--correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}
.sort-card--incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.sort-card__handle {
  color: var(--color-border-strong);
  font-size: 1.1rem;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: -2px;
}

.sort-card__rank {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  min-width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.sort-card__content {
  flex: 1;
  min-width: 0;
}

.sort-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sort-card__sugar {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.sort-card__sugar strong {
  color: var(--color-primary-strong);
}

.sort-card__move-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.sort-card__btn {
  width: 28px;
  height: 24px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-grid);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s;
}

.sort-card__btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.sort-card__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.sort-card__status {
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
}

/* =========================================================================
   Challenge options
   ========================================================================= */

.story-list {
  margin: var(--space-2) 0;
  padding-left: 1.2em;
}

.story-list li {
  margin-bottom: var(--space-1);
}

.challenge-story {
  background: var(--color-bg-grid);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
  border-left: 4px solid var(--color-primary);
}

.challenge-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-ink);
  transition:
    border-color 0.12s,
    background-color 0.12s;
  min-height: 52px;
  width: 100%;
}

.choice-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-btn.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  cursor: default;
}

.choice-btn.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
  cursor: default;
}

.choice-btn__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.choice-btn.is-correct .choice-btn__icon {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.choice-btn.is-incorrect .choice-btn__icon {
  border-color: var(--color-error);
  background: var(--color-error);
  color: #fff;
}

/* =========================================================================
   Badge / kicker chip
   ========================================================================= */

.badge-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  letter-spacing: 0.03em;
}

/* =========================================================================
   Summary / results
   ========================================================================= */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.summary-card__val {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-strong);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.summary-card__label {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

/* =========================================================================
   Reflection
   ========================================================================= */

.refleksi-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.refleksi-item__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: block;
}

/* =========================================================================
   Done stage
   ========================================================================= */

.done-card {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.done-card__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  display: block;
  line-height: 1;
}

.done-card h2 {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
}

/* =========================================================================
   Responsive tweaks
   ========================================================================= */

@media (max-width: 768px) {
  main {
    padding: var(--space-4) var(--space-4) var(--space-7);
  }

  .panel {
    padding: var(--space-4);
  }

  .frac-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .frac-block--hero .frac-block__num,
  .frac-block--hero .frac-block__den {
    font-size: 1.8rem;
  }
  .frac-block--hero .frac-block__whole {
    font-size: 1.8rem;
  }

  .decimal-display--hero {
    font-size: 2rem;
  }

  .operator-btn {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .sort-card {
    flex-wrap: wrap;
  }

  .konversi-display {
    flex-direction: column;
    align-items: stretch;
  }
  .konversi-visual {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .app-header {
    padding: var(--space-3) var(--space-4);
  }

  .frac-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  .frac-card {
    padding: var(--space-2);
    min-height: 72px;
  }

  .operator-btn {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  .bandingkan-display {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .choice-btn {
    padding: var(--space-3);
    font-size: 0.88rem;
  }
}

@media (max-width: 360px) {
  .frac-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   Komponen Discovery Learning (dipakai lewat shared/engine.js bagian 7)
   ========================================================================= */

.dl-syntax-chip {
  display: inline-block;
  margin: 0 0 var(--space-2) var(--space-2);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: top;
}

.teacher-note {
  margin: 0 0 var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  font-size: 0.86rem;
}

.teacher-note summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--color-ink-muted);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.teacher-note p {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  line-height: 1.6;
}

/* Deret suku + busur selisih */
.seq-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) 0;
  margin: var(--space-4) 0;
}

.seq-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.seq-tile--hidden {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

.seq-tile--new {
  animation: seq-pop 0.35s ease-out;
}

.seq-tile--tail {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.seq-tile__label {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.85;
}

.seq-tile__val {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
}

.seq-gap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  min-width: 40px;
  padding-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.seq-gap::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 14px;
  border-bottom: 2px dashed var(--color-border-strong);
}

.seq-gap--known {
  color: var(--color-success-strong);
}

.seq-gap--known::after {
  border-bottom-style: solid;
  border-color: var(--color-success);
}

.seq-gap--dots {
  padding-bottom: var(--space-3);
  font-size: 1.2rem;
}

.seq-gap--dots::after {
  display: none;
}

@keyframes seq-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Latihan isian/pilihan & kesimpulan terbimbing */
.dl-exercise {
  margin-top: var(--space-2);
}

.dl-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dl-input-row .input-text,
.dl-num-input {
  max-width: 150px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: center;
}

.dl-prompt {
  margin-bottom: var(--space-4);
}

.dl-prompt__cerita {
  margin: 0 0 var(--space-2);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.dl-prompt__tanya {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

.dl-simpulan-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.dl-simpulan-item--correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.dl-simpulan-item--incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.dl-simpulan-item__num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-purple);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-simpulan-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.dl-simpulan-item__awal {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.dl-simpulan-item__note {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  color: var(--color-error-strong);
}

@media (max-width: 480px) {
  .seq-tile {
    min-width: 52px;
    padding: var(--space-1) var(--space-2);
  }

  .seq-tile__val {
    font-size: 1rem;
  }

  .seq-gap {
    min-width: 30px;
  }
}

/* Busur rasio (barisan geometri): pengali ×r */
.seq-gap--ratio.seq-gap--known {
  color: var(--color-orange-strong);
}

.seq-gap--ratio.seq-gap--known::after {
  border-color: var(--color-orange);
}

/* =========================================================================
   Komponen Discovery Learning lanjutan (shared/engine.js bagian 8):
   langkah isian, form data, tabel pola, kartu rumus, perbandingan
   dugaan, tab konteks, pemilahan, grafik perbandingan.
   ========================================================================= */

.dl-caption {
  margin: var(--space-2) 0;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

/* -------------------------------------------------------------------------
   Langkah isian bertahap
   ------------------------------------------------------------------------- */

.dl-step {
  padding: var(--space-4) 0;
  border-top: 1px dashed var(--color-border);
}

.dl-step:first-of-type {
  border-top: none;
}

.dl-step__label {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  line-height: 1.5;
}

.dl-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
}

.dl-step--done .dl-step__num {
  background: var(--color-success);
}

.dl-step__answer {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-success-strong);
}

.ctx-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  margin-bottom: var(--space-4);
}

.ctx-card__story {
  margin: 0;
  line-height: 1.6;
}

.ab-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.ab-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  font-weight: 600;
}

.pilah-item {
  padding: var(--space-4) 0;
  border-top: 1px dashed var(--color-border);
}

.pilah-item__seq {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-blue-strong);
}

.pilah-item .challenge-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* -------------------------------------------------------------------------
   Tahap 4a — tabel pola koefisien beda
   ------------------------------------------------------------------------- */

.un-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-3);
}

.un-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.un-table th,
.un-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.un-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.un-row--ok {
  background: var(--color-success-soft);
}

.un-row--no {
  background: var(--color-error-soft);
}

.un-row__val,
.un-row__expr {
  font-family: var(--font-mono);
  font-weight: 700;
}

.un-row__input.input-text {
  display: inline-block;
  width: 64px;
  min-height: 40px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
}

.un-row__mark {
  margin-left: var(--space-2);
  font-weight: 700;
}

.un-row__mark--ok {
  color: var(--color-success);
}

.un-row__mark--no {
  color: var(--color-error);
}

/* -------------------------------------------------------------------------
   Kartu rumus
   ------------------------------------------------------------------------- */

.formula-card {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.formula-card__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.formula-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto var(--space-4);
}

.formula-duo .formula-card {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Tahap 5 — perbandingan dugaan
   ------------------------------------------------------------------------- */

.dugaan-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.dugaan-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: 0.9rem;
}

.dugaan-row--ok {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.dugaan-row__title {
  font-family: var(--font-display);
  font-weight: 700;
}

.dugaan-row__verdict {
  margin-top: var(--space-1);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Refleksi & selesai
   ------------------------------------------------------------------------- */

.dl-refleksi-q {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
  font-weight: 600;
}

.done-card__lead {
  max-width: 520px;
  margin: 0 auto var(--space-5);
  font-size: 1.05rem;
  color: var(--color-ink-muted);
}

.done-card__list {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  text-align: left;
}

.done-card__note {
  max-width: 560px;
  margin: 0 auto var(--space-5);
  text-align: left;
}

@media (max-width: 560px) {
  .formula-card {
    font-size: 1rem;
  }

  .ab-form .dl-input-row {
    width: 100%;
  }
}

/* Tab pemilih data/konteks */
.dl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dl-tab {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.dl-tab:hover {
  border-color: var(--color-primary);
}

.dl-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.dl-tab.is-done:not(.is-active) {
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

/* Pemilahan kategori */
.sort-item {
  padding: var(--space-4) 0;
  border-top: 1px dashed var(--color-border);
}

.sort-item:first-child {
  border-top: none;
  padding-top: 0;
}

.sort-item__text {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  line-height: 1.5;
}

.sort-item__text--mono {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-blue-strong);
}

.sort-item__visual {
  margin: 0 0 var(--space-3);
}

.sort-item .challenge-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Grafik batang perbandingan */
.cmp-chart {
  margin: var(--space-4) 0;
}

.cmp-chart svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.cmp-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.cmp-chart__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cmp-chart__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.cmp-chart__swatch--0,
.cmp-chart__bar--0 {
  background: var(--color-blue);
  fill: var(--color-blue);
}

.cmp-chart__swatch--1,
.cmp-chart__bar--1 {
  background: var(--color-orange);
  fill: var(--color-orange);
}

.cmp-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.cmp-chart__axis {
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.cmp-chart__ytick,
.cmp-chart__xtick {
  fill: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cmp-chart__xtick.is-hl {
  fill: var(--color-ink);
  font-weight: 700;
}

.cmp-chart__hl {
  fill: var(--color-warning-soft);
}

@media (prefers-reduced-motion: reduce) {
  .seq-tile--new {
    animation: none;
  }
}

/* =========================================================================
   Garis bilangan interaktif (shared/engine.js bagian 9 —
   buildNumberLinePicker). Hanya wadahnya yang boleh bergulir mendatar
   di layar sempit; halaman tidak ikut bergulir.
   ========================================================================= */

.nlp-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-3) 0;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.nlp {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
  user-select: none;
}

.nlp-axis {
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.nlp-arrow {
  fill: var(--color-ink);
}

.nlp-tick {
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.nlp-tick--major {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.nlp-num {
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-ink-muted);
}

.nlp-num--neg {
  fill: var(--color-blue-strong);
}

.nlp-num--pos {
  fill: var(--color-orange-strong);
}

.nlp-num--zero {
  fill: var(--color-ink);
  font-size: 19px;
}

.nlp-side--neg {
  fill: var(--color-blue-soft);
}

.nlp-side--pos {
  fill: var(--color-orange-soft);
}

.nlp-side-cap {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.nlp-side-cap--neg {
  fill: var(--color-blue-strong);
  text-anchor: start;
}

.nlp-side-cap--pos {
  fill: var(--color-orange-strong);
  text-anchor: end;
}

.nlp-hit {
  cursor: pointer;
  outline: none;
}

.nlp-hit__area {
  fill: transparent;
}

.nlp-hit__ring {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease;
}

.nlp-hit:hover .nlp-hit__ring {
  fill: var(--color-primary-soft);
  stroke: var(--color-primary);
}

.nlp-hit:focus-visible .nlp-hit__ring {
  fill: var(--color-primary-soft);
  stroke: var(--color-focus);
  stroke-dasharray: 4 3;
}

.nlp-hit.is-selected .nlp-hit__ring {
  fill: var(--color-warning-soft);
  stroke: var(--color-warning);
}

.nlp-mark {
  pointer-events: none;
}

.nlp-mark circle {
  stroke: var(--color-surface);
  stroke-width: 3;
}

.nlp-mark--neg circle {
  fill: var(--color-blue);
}

.nlp-mark--pos circle {
  fill: var(--color-orange);
}

.nlp-mark--zero circle,
.nlp-mark--target circle {
  fill: var(--color-purple);
}

.nlp-mark--ok circle {
  fill: var(--color-success);
}

.nlp-mark--bad circle {
  fill: var(--color-error);
}

.nlp-mark__label {
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-ink);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .nlp-hit__ring {
    transition: none;
  }
}

/* =========================================================================
   Pecahan — pecahan campuran dalam kalimat, model visual, isian bersusun
   (buildFracInline, buildFractionModel, buildFractionInput di engine.js)
   ========================================================================= */

.frac-mixed {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  font-weight: 700;
}

.frac-mixed__whole {
  font-size: 1.05em;
  line-height: 1;
}

.frac-model {
  margin: var(--space-3) 0;
}

.frac-model__shapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.frac-model__bar {
  display: grid;
  gap: 3px;
  width: min(100%, 240px);
  height: 44px;
  padding: 3px;
  border: 2px solid var(--color-orange-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.frac-model__cell {
  border-radius: 2px;
  background: var(--color-bg-grid);
  transition: background-color 0.2s;
}

.frac-model__cell.is-on {
  background: var(--color-orange);
}

.frac-model__circle {
  width: 104px;
  height: 104px;
}

.frac-model__part {
  fill: var(--color-warning-soft);
  stroke: var(--color-orange-strong);
  stroke-width: 1.5;
  transition: fill 0.2s;
}

.frac-model__part.is-on {
  fill: var(--color-orange);
}

.frac-model--small .frac-model__bar {
  width: min(100%, 160px);
  height: 30px;
}

.frac-model--wide .frac-model__bar {
  width: min(100%, 420px);
}

/* Garis tebal pengelompokan bagian (buildFractionModel opts.group). */
.frac-model__cell.is-group-end {
  position: relative;
}

.frac-model__cell.is-group-end::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  right: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-ink);
}

.frac-model--small .frac-model__circle {
  width: 72px;
  height: 72px;
}

.frac-model__caption {
  margin-top: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.frac-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.frac-input--ok {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.frac-input--bad {
  border-color: var(--color-error);
}

.frac-input__whole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.frac-input__cap {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
}

.frac-input__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.frac-input__line {
  display: block;
  width: 100%;
  min-width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-ink);
}

.frac-input__box {
  width: 3.2rem;
  min-height: 44px;
  padding: 4px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-ink);
  background: var(--color-surface);
}

.frac-input__box--whole {
  width: 3.4rem;
  min-height: 60px;
  font-size: 1.8rem;
}

.frac-input__box:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.frac-input__box:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .frac-model__cell,
  .frac-model__part {
    transition: none;
  }
}

/* Pilihan tanda pada isian bersusun (buildFractionInput opts.signed). */
.frac-input__sign {
  min-width: 2.8rem;
  min-height: 44px;
  padding: 4px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-ink);
  background: var(--color-surface);
}

.frac-input__sign:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.frac-input__sign:disabled {
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

/* =========================================================================
   Pecahan dalam konteks — pecahan bertanda & pengarsir
   (buildPecahanTampil, buildFracShader di engine.js bagian 35)
   ========================================================================= */

.frac-signed {
  display: inline-flex;
  vertical-align: middle;
}

.frac-signed__inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.frac-signed__sign {
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
}

.frac-shader {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.frac-shader__ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.frac-shader__step {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.3rem;
  font-weight: 700;
}

.frac-shader__den {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  text-align: center;
}

.frac-shader__bar {
  display: grid;
  gap: 3px;
  width: min(100%, 460px);
  padding: 3px;
  border: 2px solid var(--color-orange-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.frac-shader__cell {
  min-width: 0;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--color-bg-grid);
  cursor: pointer;
  transition: background-color 0.15s;
}

.frac-shader__cell:hover:not(:disabled) {
  background: var(--color-orange-soft);
}

.frac-shader__cell.is-on {
  background: var(--color-orange);
}

.frac-shader__cell:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.frac-shader__cell:disabled {
  cursor: default;
}

.frac-shader__readout {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .frac-shader__cell {
    transition: none;
  }
}

/* =========================================================================
   Komponen urut-ketuk (buildOrderPicker di engine.js bagian 11)
   ========================================================================= */

.order-picker {
  display: grid;
  gap: var(--space-3);
}

.order-picker__slots {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-picker__slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.order-picker__slot.is-ok {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.order-picker__slot.is-bad {
  border-style: solid;
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.order-picker__rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.order-picker__empty {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.order-picker__pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.order-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.order-picker__chip:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.order-picker__chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.order-picker__chip:disabled {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.order-picker__slot .order-picker__chip:not(:disabled)::after {
  content: '✕';
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

/* =========================================================================
   Bilangan bulat — chip notasi, penempatan, perbandingan & pengurutan
   (buildNumChip, buildNumberLinePlacement, buildCompareSentence,
   buildCompareSymbolChoice, buildTapOrder di shared/engine.js)
   ========================================================================= */

.num-chip {
  display: inline-block;
  min-width: 2.2em;
  padding: 1px var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.num-chip--lg {
  font-size: 1.3rem;
  padding: 2px var(--space-3);
}

.place-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-weight: 600;
}

.place-target__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Kalimat perbandingan [a] ☐ [b] */
.cmp-sentence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.cmp-sentence .num-chip--lg {
  font-size: 1.7rem;
  padding: var(--space-1) var(--space-4);
}

.cmp-sentence__sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 3px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.cmp-sentence__sym.is-filled {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

/* Kalimat perbandingan pecahan (buildKalimatBandingPecahan, seksi 36) */
.cmp-sentence--frac {
  flex-wrap: wrap;
}

.cmp-sentence__frac {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
}

/* Kartu strategi ahli (STRATEGI_BANDING_PECAHAN, seksi 36) */
.strategi-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-left: 6px solid var(--color-purple);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.strategi-card__ikon {
  font-size: 1.6rem;
  line-height: 1;
}

.strategi-card__nama {
  margin: 0;
  font-weight: 700;
}

.strategi-card__kunci {
  margin: var(--space-1) 0 0;
  font-size: 0.92rem;
}

/* Tombol lambang <, >, = */
.cmp-symbols .challenge-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cmp-symbols .choice-btn {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  min-height: 76px;
}

.cmp-symbols .choice-btn__icon {
  display: none;
}

.cmp-sym-name {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

/* Menyusun kartu dengan ketukan */
.tap-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tap-order__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tap-order__slots,
.tap-order__pool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tap-order__slots {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.tap-order__slot,
.tap-order__card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 72px;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
}

.tap-order__slot {
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface);
}

.tap-order__card {
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--color-border);
}

.tap-order__card:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.tap-order__card:disabled {
  cursor: default;
}

.tap-order__card--placed {
  border-color: var(--color-purple);
}

.tap-order__card.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.tap-order__card.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.tap-order__card strong {
  font-family: var(--font-mono);
  font-size: 1.1rem;
}

.tap-order__rank {
  position: absolute;
  top: -8px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-ink-muted);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
}

.tap-order__sep {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.tap-order__cap {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

/* =========================================================================
   Cooperative Learning — peran kelompok, kartu tim, penghargaan
   ========================================================================= */

.coop-role-bar {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-purple);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.coop-role-bar__title {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-purple-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coop-role-bar__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.coop-role {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
  font-size: 1.1rem;
}

.coop-role > span:first-child {
  grid-row: span 2;
}

.coop-role__nama {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.coop-role__peran {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

.coop-team-card {
  padding: var(--space-4);
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.coop-team-card__nama {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-purple-strong);
  overflow-wrap: anywhere;
}

.coop-team-card__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.coop-team-card__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.coop-team-card__list .dl-caption {
  display: block;
  margin-top: 2px;
}

.coop-team-card__ikon {
  font-size: 1.6rem;
  line-height: 1;
}

.coop-award {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  text-align: center;
}

.coop-award__ikon {
  display: block;
  font-size: 3.4rem;
  line-height: 1.1;
}

.coop-award__label {
  margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-warning-strong);
}

.coop-award__tim {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .cmp-sentence .num-chip--lg {
    font-size: 1.35rem;
    padding: var(--space-1) var(--space-2);
  }

  .cmp-symbols .choice-btn {
    font-size: 1.5rem;
    padding: var(--space-2);
  }

  .tap-order__slot,
  .tap-order__card {
    min-width: 60px;
    padding: var(--space-2);
    font-size: 0.85rem;
  }
}

/* Pertanyaan penuntun bertingkat (buildGuidedQuizList) */
.quiz-item--guided + .quiz-item--guided {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.quiz-item--guided .exercise-label {
  line-height: 1.7;
}

.quiz-item--guided .exercise-label .dl-step__num {
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* =========================================================================
   Pecahan — membandingkan & mengurutkan
   (buildFracStripCompare, buildFracNumberLine, buildOrderBoard,
   buildRoleCards, buildRoleTag di engine.js)
   ========================================================================= */

.frac-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.frac-strip__row {
  display: grid;
  grid-template-columns: minmax(84px, 9rem) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: 4px;
  border-radius: var(--radius-md);
  --strip-fill: var(--color-orange);
  --strip-line: var(--color-orange-strong);
}

.frac-strip__row--1 {
  --strip-fill: var(--color-blue);
  --strip-line: var(--color-blue-strong);
}

.frac-strip__row--2 {
  --strip-fill: var(--color-purple);
  --strip-line: var(--color-purple-strong);
}

.frac-strip__row--3 {
  --strip-fill: var(--color-success);
  --strip-line: var(--color-success-strong);
}

.frac-strip__row.is-hl {
  background: var(--color-warning-soft);
  outline: 2px solid var(--color-warning);
}

.frac-strip__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 1.05rem;
  font-weight: 700;
}

.frac-strip__name {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.frac-strip__eq {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

.frac-strip__bar {
  position: relative;
  display: grid;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border: 2px solid var(--strip-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.frac-strip__cell {
  border-radius: 2px;
  background: var(--color-bg-grid);
  transition: background-color 0.2s;
}

.frac-strip__cell.is-on {
  background: var(--strip-fill);
}

.frac-strip__cell.is-edge {
  box-shadow: 3px 0 0 var(--strip-line);
}

/* Patokan ½: garis putus-putus di tengah setiap pita. */
.frac-strip--half .frac-strip__bar::after {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  border-left: 2px dashed var(--color-ink);
  pointer-events: none;
}

.frac-strip__caption {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.frac-nl-wrap {
  margin: var(--space-3) 0;
}

.frac-nl {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: auto;
  min-height: 90px;
}

.frac-nl__axis {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.frac-nl__tick {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.frac-nl__tick--major {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.frac-nl__end {
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-ink);
}

.frac-nl__mark {
  --mark: var(--color-orange);
}

.frac-nl__mark--1 {
  --mark: var(--color-blue);
}

.frac-nl__mark--2 {
  --mark: var(--color-purple);
}

.frac-nl__mark--3 {
  --mark: var(--color-success);
}

.frac-nl__mark circle {
  fill: var(--mark);
  stroke: #fff;
  stroke-width: 2;
}

.frac-nl__stem,
.frac-nl__bar {
  stroke: var(--mark);
  stroke-width: 2;
}

.frac-nl__num {
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--mark);
}

/* Tanda − dan/atau bilangan bulat di depan pecahan (campuran/negatif). */
.frac-nl__pre {
  text-anchor: end;
}

/* Papan urutan: slot hasil + kartu yang diketuk */
.order-board {
  margin: var(--space-3) 0;
}

.order-board__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-board__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.order-board__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  font-size: 1.3rem;
  font-weight: 700;
}

.order-board__slot.is-filled {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.order-board__slot.is-ok {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.order-board__slot.is-bad {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.order-board__pos {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.7rem;
  color: var(--color-ink-muted);
}

.order-board__val {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.order-board__empty {
  color: var(--color-border-strong);
}

.order-board__hint {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.order-board__pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.order-board__card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 76px;
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 3px 0 var(--color-orange-soft);
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    transform 0.1s,
    background-color 0.12s;
}

.order-board__card:hover:not(:disabled) {
  background: var(--color-orange-soft);
  transform: translateY(-2px);
}

.order-board__card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.order-board__card:disabled {
  opacity: 0.55;
  cursor: default;
}

.order-board__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Kartu peran kerja kelompok */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.role-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--color-purple-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.role-card__icon {
  flex: 0 0 auto;
  font-size: 1.9rem;
  line-height: 1;
}

.role-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.role-card__name {
  margin: 0;
  font-weight: 700;
  color: var(--color-purple-strong);
}

.role-card__task {
  margin: 2px 0 var(--space-2);
  font-size: 0.84rem;
  color: var(--color-ink-muted);
}

.role-card__who {
  margin: 0;
  font-weight: 600;
}

.role-card__input {
  width: 100%;
}

.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .frac-strip__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .order-board__slots {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .frac-strip__cell,
  .order-board__card {
    transition: none;
  }
}

/* =========================================================================
   Penerapan kontekstual — termometer bilangan bulat & papan info
   (engine.js bagian 16; dipakai fase-d/mpi-1.6)
   ========================================================================= */

.thermo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  width: 120px;
}

.thermo--small {
  width: 92px;
}

.thermo__svg {
  display: block;
  width: 100%;
  height: auto;
}

.thermo__tube {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 2;
}

.thermo__bulb--cold,
.thermo__fluid--cold {
  fill: var(--color-blue);
}

.thermo__bulb--warm,
.thermo__fluid--warm {
  fill: var(--color-orange);
}

.thermo__tick {
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.thermo__tick--zero {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.thermo__label {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--color-ink-muted);
}

.thermo__label--zero {
  font-weight: 700;
  fill: var(--color-ink);
}

.thermo__marker {
  stroke: var(--color-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.thermo__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.thermo__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}

.thermo__value--cold {
  color: var(--color-blue-strong);
}

.thermo__value--warm {
  color: var(--color-orange-strong);
}

.thermo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.info-poster {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5);
  border: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 6px 0 var(--color-success-soft);
}

.info-poster__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px dashed var(--color-border);
}

.info-poster__icon {
  font-size: 2rem;
  line-height: 1;
}

.info-poster__title {
  margin: 0;
  font-size: 1.25rem;
}

.info-poster__rows {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.info-poster__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.info-poster__row dt {
  font-weight: 700;
}

.info-poster__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.info-poster__msg {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-style: italic;
}

.info-poster__foot {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

@media (max-width: 480px) {
  .thermo--small {
    width: 76px;
  }

  .info-poster {
    padding: var(--space-4);
  }

  .info-poster__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* =========================================================================
   17. Bilangan bulat — operasi penjumlahan & pengurangan
   Garis bilangan berlompatan (.nlj-*), simulator operasi (.int-sim*),
   dan stepper bilangan bulat (.int-stepper*). Lihat engine.js bagian 17.
   ========================================================================= */

.nlj-arc {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.nlj-arc--hop {
  stroke-width: 3;
}

.nlj-arc--pos {
  stroke: var(--color-orange);
}

.nlj-arc--neg {
  stroke: var(--color-blue);
}

.nlj-head--pos {
  fill: var(--color-orange);
}

.nlj-head--neg {
  fill: var(--color-blue);
}

.nlj-label {
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 5px;
}

.nlj-label--pos {
  fill: var(--color-orange-strong);
}

.nlj-label--neg {
  fill: var(--color-blue-strong);
}

.nlj-start circle {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 3;
}

.nlj-start__label,
.nlj-end__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-ink-muted);
}

.int-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.int-stepper__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.int-stepper__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.int-stepper__btn,
.int-sim__op {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.int-stepper__btn:hover:not(:disabled),
.int-sim__op:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.int-stepper__btn:focus-visible,
.int-sim__op:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.int-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.int-stepper__val {
  min-width: 3.2ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
}

.int-stepper__val--neg {
  color: var(--color-blue-strong);
}

.int-stepper__val--pos {
  color: var(--color-orange-strong);
}

.int-sim {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg);
}

.int-sim__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}

.int-sim__ops {
  display: flex;
  gap: var(--space-2);
}

.int-sim__op.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.int-sim__expr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
}

.int-sim__eq {
  color: var(--color-ink-muted);
}

.int-sim__eq strong {
  color: var(--color-ink);
}

.int-sim__note {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

@media (max-width: 480px) {
  .int-sim {
    padding: var(--space-3);
  }

  .int-sim__controls {
    gap: var(--space-3);
  }

  .int-sim__expr {
    font-size: 1.15rem;
  }
}

/* =========================================================================
   18. Bilangan bulat — perkalian, pembagian & urutan pengerjaan
   Komponen umum modul operasi bilangan bulat (dipakai fase-d/mpi-2.1
   dan fase-d/mpi-2.2): kartu masalah serupa (.teaser-*), ekspresi
   operasi (.op-expr), chip konteks, tabel data, tabel aturan tanda
   (.sign-grid*), dan langkah operasi campuran (.expr-steps*).
   Lihat engine.js bagian 18.
   ========================================================================= */

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.teaser-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.teaser-card p {
  margin: 0;
  font-size: 0.95rem;
}

.teaser-card__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.op-expr {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}

.konteks-chip {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  background: var(--color-bg);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

/* Tabel aturan tanda */

.sign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.sign-grid__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sign-grid__cell--match {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.sign-grid__cell--miss {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.sign-grid__rule {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.sign-grid__contoh {
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-ink-muted);
}

.sign-grid__cell .challenge-options {
  gap: var(--space-2);
}

.sign-grid__cell .choice-btn {
  padding: var(--space-2) var(--space-3);
}

.sign-grid__compare {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: 0.92rem;
}

.sign-grid__compare dt {
  color: var(--color-ink-muted);
}

.sign-grid__compare dd {
  margin: 0;
  font-weight: 700;
}

.sign-grid__val--positif {
  color: var(--color-orange-strong);
}

.sign-grid__val--negatif {
  color: var(--color-blue-strong);
}

.sign-grid__mark {
  font-size: 0.85rem;
  font-weight: 700;
}

.sign-grid__cell--match .sign-grid__mark {
  color: var(--color-success-strong);
}

.sign-grid__cell--miss .sign-grid__mark {
  color: var(--color-orange-strong);
}

/* Langkah operasi campuran */

.expr-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.expr-steps__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.expr-steps__line--final {
  color: var(--color-success-strong);
}

.expr-steps__eq {
  color: var(--color-ink-muted);
}

.expr-steps__mark {
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
  box-shadow: inset 0 -2px 0 var(--color-orange);
}

.expr-steps__stepno {
  display: inline-block;
  margin-right: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.expr-steps__work .dl-step {
  margin: 0;
}

@media (max-width: 640px) {
  .op-expr {
    font-size: 1.2rem;
  }

  .data-table th,
  .data-table td {
    padding: var(--space-2);
  }

  .expr-steps__line {
    font-size: 1.1rem;
  }
}

/* =========================================================================
   Bilangan desimal: tabel nilai tempat (.dec-pv*), model blok
   (.dec-block*, .dec-legend*), perakit desimal (.dec-builder*) dan
   cara baca (.dec-read). Lihat engine.js bagian 19.
   Warna tempat: satuan biru, persepuluhan oranye, perseratusan ungu,
   perseribuan hijau — konsisten di tabel, blok, dan stepper.
   ========================================================================= */

.dec-pv {
  margin: var(--space-3) 0;
}

.dec-pv__caption {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.dec-pv__table {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 auto;
}

.dec-pv__cell {
  min-width: 56px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-align: center;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
}

.dec-pv__table th.dec-pv__cell {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink-muted);
}

.dec-pv__table td.dec-pv__cell {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
}

.dec-pv__nilai td.dec-pv__cell {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.dec-pv__cell--koma {
  min-width: 0;
  padding: var(--space-2) 2px;
  background: transparent;
  border-color: transparent;
}

.dec-pv__table td.dec-pv__cell--koma {
  color: var(--color-error-strong);
}

.dec-pv__cell--p0 {
  background: var(--color-blue-soft);
  border-color: var(--color-blue);
}

.dec-pv__cell--p1 {
  background: var(--color-orange-soft);
  border-color: var(--color-orange);
}

.dec-pv__cell--p2 {
  background: var(--color-purple-soft);
  border-color: var(--color-purple);
}

.dec-pv__cell--p3 {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.dec-pv__cell--empty {
  border-style: dashed;
  background: var(--color-surface);
}

.dec-pv__cell--hl {
  box-shadow: 0 0 0 3px var(--color-warning);
  border-color: var(--color-warning-strong);
}

/* Model blok */
.dec-block {
  --dec-u: 70px;
  --dec-t: 7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

.dec-block--compact {
  --dec-u: 44px;
  --dec-t: 4.4px;
  gap: var(--space-3);
}

.dec-block__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.dec-block__pieces {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  min-height: var(--dec-u);
  max-width: calc(var(--dec-u) * 3 + 6px);
}

.dec-block__group--empty .dec-block__pieces {
  align-items: center;
}

.dec-block__none {
  color: var(--color-ink-muted);
  font-size: 1.2rem;
}

.dec-block__label {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.dec-block__label strong {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-ink);
}

.dec-block__piece {
  display: inline-block;
  flex: none;
}

.dec-block__piece--p0 {
  width: var(--dec-u);
  height: var(--dec-u);
  border: 1px solid var(--color-blue-strong);
  background-color: var(--color-blue-soft);
  background-image: linear-gradient(to right, rgba(24, 86, 164, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 86, 164, 0.35) 1px, transparent 1px);
  background-size: var(--dec-t) var(--dec-t);
}

.dec-block__piece--p1 {
  width: var(--dec-t);
  height: var(--dec-u);
  background: var(--color-orange);
  box-shadow: inset 0 0 0 1px var(--color-orange-strong);
}

.dec-block__piece--p2 {
  width: var(--dec-t);
  height: var(--dec-t);
  background: var(--color-purple);
}

.dec-block__piece--p3 {
  width: 2px;
  height: var(--dec-t);
  background: var(--color-success);
}

.dec-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.dec-legend__item {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.dec-legend .dec-block__piece--p0 {
  --dec-u: 28px;
  --dec-t: 2.8px;
}

.dec-legend .dec-block__piece--p1 {
  width: 3px;
  height: 28px;
}

.dec-legend .dec-block__piece--p2 {
  width: 6px;
  height: 6px;
}

.dec-legend .dec-block__piece--p3 {
  width: 2px;
  height: 6px;
}

/* Perakit desimal */
.dec-builder {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg);
}

.dec-builder__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
}

.dec-builder__step {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--color-border-strong);
  background: var(--color-surface);
}

.dec-builder__step--p0 {
  border-top-color: var(--color-blue);
}

.dec-builder__step--p1 {
  border-top-color: var(--color-orange);
}

.dec-builder__step--p2 {
  border-top-color: var(--color-purple);
}

.dec-builder__step--p3 {
  border-top-color: var(--color-success);
}

.dec-builder .int-stepper__val {
  color: var(--color-ink);
}

.dec-builder__koma {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-error-strong);
}

.dec-builder__out {
  margin-top: var(--space-4);
}

.dec-builder__num {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-primary-strong);
}

.dec-read {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.dec-read > div {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.dec-read dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.dec-read dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.dec-mark {
  padding: 0 3px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
  box-shadow: inset 0 -3px 0 var(--color-warning);
}

@media (max-width: 640px) {
  .dec-pv__cell {
    min-width: 40px;
    padding: 6px 4px;
  }

  .dec-pv__table th.dec-pv__cell {
    font-size: 0.62rem;
  }

  .dec-pv__table td.dec-pv__cell {
    font-size: 1.3rem;
  }

  .dec-block {
    --dec-u: 56px;
    --dec-t: 5.6px;
    gap: var(--space-3);
  }

  .dec-pv__cell,
  .dec-pv__table th.dec-pv__cell {
    min-width: 0;
    hyphens: manual;
  }

  .dec-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .dec-builder {
    padding: var(--space-3) var(--space-2);
  }

  /* Empat stepper menjadi kisi 2 × 2; koma diwakili tepi merah stepper
     persepuluhan agar tidak memakan satu baris sendiri. */
  .dec-builder__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .dec-builder__koma {
    display: none;
  }

  .dec-builder__step {
    padding: var(--space-2) 4px;
  }

  .dec-builder .int-stepper__row {
    gap: 4px;
  }

  .dec-builder .int-stepper__btn {
    min-width: 40px;
    min-height: 40px;
  }

  .dec-builder .int-stepper__val {
    min-width: 1.6ch;
    font-size: 1.3rem;
  }

  .dec-builder__num {
    font-size: 2.1rem;
  }
}

/* =========================================================================
   20. Bilangan desimal — membandingkan & mengurutkan: tabel nilai tempat
   berdampingan (.dec-cmp*) dan garis bilangan desimal (.nlp--dec,
   .nlp-zoom). Lihat engine.js bagian 20.
   ========================================================================= */

.dec-cmp .dec-pv__table {
  border-spacing: 4px;
}

.dec-cmp__corner {
  min-width: 0;
}

.dec-cmp__label {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Angka 0 tambahan (0,8 → 0,80): tampil samar & miring agar murid tahu
   angka itu ditambahkan, bukan bagian penulisan aslinya. */
.dec-pv__table td.dec-cmp__pad {
  border-style: dashed;
  color: var(--color-ink-muted);
  font-style: italic;
}

.nlp--dec .nlp-num {
  font-size: 18px;
}

.nlp-num--dec {
  fill: var(--color-ink-muted);
}

.nlp-num--major {
  fill: var(--color-ink);
  font-size: 17px;
}

.nlp--dec .nlp-num--major {
  font-size: 20px;
}

.nlp-zoom {
  fill: var(--color-warning-soft);
  stroke: var(--color-warning);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

@media (max-width: 640px) {
  .dec-cmp__label {
    font-size: 0.9rem;
    padding: var(--space-1);
  }
}

/* =========================================================================
   Deret aritmetika & geometri (engine.js seksi 21): tabel isian deret,
   grid "kalikan r, geser, kurangkan", tabel uji rumus. Tabel dan grid
   menggulir di dalam kotaknya sendiri sehingga halaman tidak ikut
   bergeser pada layar sempit.
   ========================================================================= */

.series-fill,
.series-check {
  overflow-x: auto;
  margin-top: var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.series-fill__table,
.series-check__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.series-fill__table th,
.series-fill__table td,
.series-check__table th,
.series-check__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.series-fill__table thead th,
.series-check__table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.series-fill__given,
.series-check__table td {
  font-family: var(--font-mono);
  font-weight: 700;
}

.series-fill__cell.sel--ok {
  background: var(--color-success-soft);
}

.series-fill__cell.sel--no {
  background: var(--color-error-soft);
}

.series-fill__input.input-text {
  display: inline-block;
  width: 120px;
  min-height: 40px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
}

.series-fill__mark {
  margin-left: var(--space-1);
  font-weight: 700;
}

.series-fill__mark--ok,
.series-check__ok {
  color: var(--color-success);
  font-weight: 700;
}

.series-fill__mark--no,
.series-check__no {
  color: var(--color-error);
  font-weight: 700;
}

.shift-grid {
  overflow-x: auto;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.shift-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: max-content;
  margin-bottom: var(--space-2);
}

.shift-row__label {
  flex: 0 0 64px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.shift-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 44px;
  padding: 0 var(--space-2);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue-strong);
}

.shift-row--times .shift-cell {
  border-color: var(--color-orange);
  color: var(--color-orange-strong);
}

.shift-cell--empty,
.shift-row--times .shift-cell--empty {
  border-color: transparent;
  background: transparent;
}

.shift-cell--pair {
  cursor: pointer;
  border-style: dashed;
}

.shift-cell--pair:hover,
.shift-cell--pair:focus-visible {
  background: var(--color-warning-soft);
}

.shift-cell--pair.is-struck {
  cursor: default;
  border-style: solid;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.6;
}

.shift-cell--rest,
.shift-row--times .shift-cell--rest {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.shift-op {
  width: 14px;
  text-align: center;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.shift-result {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-ink-muted);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Buku tabungan (bunga tunggal) — buildBukuTabungan() di engine.js seksi 22
   ------------------------------------------------------------------------- */

.passbook {
  margin: var(--space-3) 0;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.passbook__head {
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue);
  color: #fff;
  font-weight: 700;
}

.passbook__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.passbook__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.passbook__table th,
.passbook__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--color-border);
  text-align: right;
  white-space: nowrap;
}

.passbook__table th[scope='row'],
.passbook__table thead th:first-child {
  text-align: left;
}

.passbook__table thead th {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  background: var(--color-blue-soft);
}

.passbook__table td {
  font-family: var(--font-mono);
  font-weight: 700;
}

.passbook__muted {
  color: var(--color-ink-muted);
}

.passbook__hidden {
  display: inline-block;
  min-width: 3em;
  padding: 0 var(--space-2);
  border-radius: 6px;
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
  text-align: center;
}

.passbook__row--gap td {
  text-align: center;
  color: var(--color-ink-muted);
  font-family: inherit;
}

.passbook__row--hl {
  background: var(--color-success-soft);
}

@media (max-width: 480px) {
  .passbook__table {
    font-size: 0.8rem;
  }

  .passbook__table th,
  .passbook__table td {
    padding: var(--space-2) var(--space-1);
  }
}

/* =========================================================================
   23. SIMULATOR BUNGA MAJEMUK (buildCompoundSimulator, shared/engine.js)
   Pengatur −/+ bertombol besar (ramah sentuh) untuk modal awal, suku
   bunga, dan banyak periode, di atas tabel buku tabungan (.passbook*).
   ========================================================================= */

.compound-sim {
  display: grid;
  gap: var(--space-3);
}

.compound-sim__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.compound-sim__ctrl {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.compound-sim__ctrl-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.compound-sim__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.compound-sim__btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-strong);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.compound-sim__btn:hover:not(:disabled),
.compound-sim__btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.compound-sim__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.compound-sim__val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

.compound-sim__ratio {
  color: var(--color-orange-strong);
}

.compound-sim__tunggal {
  color: var(--color-ink-muted);
}

.compound-sim__summary {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-orange);
  border-radius: var(--radius-sm);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* =========================================================================
   Duel tawaran — perbandingan bunga tunggal vs bunga majemuk
   (buildInterestDuel, shared/engine.js seksi 24). Tombol −/+ memakai
   gaya .compound-sim__* di atas.
   ========================================================================= */

.interest-duel {
  display: grid;
  gap: var(--space-3);
}

.interest-duel__ctrl {
  max-width: 320px;
}

.interest-duel__arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.interest-duel__card {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-width: 0;
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.interest-duel__card--tunggal {
  border-top: 6px solid var(--color-blue);
}

.interest-duel__card--majemuk {
  border-top: 6px solid var(--color-orange);
}

.interest-duel__card--win {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.interest-duel__name {
  font-weight: 800;
}

.interest-duel__rule {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.interest-duel__formula {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.interest-duel__saldo {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.interest-duel__card--tunggal .interest-duel__saldo {
  color: var(--color-blue-strong);
}

.interest-duel__card--majemuk .interest-duel__saldo {
  color: var(--color-orange-strong);
}

.interest-duel__badge {
  justify-self: start;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.interest-duel__vs {
  align-self: center;
  font-weight: 800;
  color: var(--color-ink-muted);
}

.interest-duel__result {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

@media (max-width: 480px) {
  .interest-duel__arena {
    grid-template-columns: minmax(0, 1fr);
  }

  .interest-duel__vs {
    justify-self: center;
  }
}

/* =========================================================================
   Relasi antara dua himpunan (engine.js seksi 25): diagram panah SVG
   (.rel-arrow*, .rel-node*), tabel silang (.rel-table*), tabel daftar
   (.rel-list), chip pasangan berurutan (.rel-chip*).
   Warna himpunan: A biru, B oranye; panah salah merah.
   ========================================================================= */

.rel-arrow {
  margin: var(--space-3) auto;
  max-width: 460px;
}

.rel-arrow__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rel-arrow__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  fill: var(--color-purple);
}

.rel-arrow__set {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-ink-muted);
}

.rel-arrow__oval {
  stroke-width: 2;
}

.rel-arrow__oval--a {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
}

.rel-arrow__oval--b {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
}

.rel-arrow__line {
  stroke: var(--color-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.rel-arrow__head {
  fill: var(--color-ink);
}

.rel-arrow__line--salah {
  stroke: var(--color-error);
  stroke-dasharray: 6 4;
}

.rel-arrow__head--salah {
  fill: var(--color-error);
}

.rel-node__pill {
  fill: var(--color-surface);
  stroke-width: 2;
}

.rel-node--a .rel-node__pill {
  stroke: var(--color-blue);
}

.rel-node--b .rel-node__pill {
  stroke: var(--color-orange);
}

.rel-node__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  fill: var(--color-ink);
  pointer-events: none;
}

.rel-arrow--interactive .rel-node {
  cursor: pointer;
}

.rel-arrow--interactive .rel-node:hover .rel-node__pill {
  stroke-width: 3;
}

.rel-arrow--interactive .rel-node:focus {
  outline: none;
}

.rel-arrow--interactive .rel-node:focus-visible .rel-node__pill {
  stroke: var(--color-focus);
  stroke-width: 4;
}

.rel-node--selected .rel-node__pill {
  fill: var(--color-blue);
  stroke: var(--color-blue-strong);
  stroke-width: 3;
}

.rel-node--selected .rel-node__text {
  fill: #ffffff;
}

.rel-status {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: 0.95rem;
}

/* Tabel silang & tabel daftar: tabel boleh bergulir di dalam wadahnya
   pada layar sempit, halaman tidak ikut bergulir ke samping. */
.rel-table-wrap {
  position: relative; /* menahan .sr-only di dalam sel agar tidak keluar wadah gulir */
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.rel-table,
.rel-list {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 0.95rem;
  background: var(--color-surface);
}

.rel-table caption {
  caption-side: top;
  padding-bottom: var(--space-2);
  color: var(--color-ink-muted);
  font-size: 0.85rem;
}

.rel-table th,
.rel-table td,
.rel-list th,
.rel-list td {
  border: 1px solid var(--color-border-strong);
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.rel-table thead th {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.rel-table tbody th {
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
  text-align: left;
  white-space: nowrap;
}

.rel-table__corner {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.rel-table__cell {
  min-width: 48px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-success-strong);
}

.rel-table__cell--on {
  background: var(--color-success-soft);
}

.rel-table__cell--salah {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.rel-table--interactive td {
  padding: 3px;
}

.rel-table__btn {
  display: block;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.rel-table__btn:hover {
  border-color: var(--color-primary);
}

.rel-table__btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.rel-table__btn[aria-pressed='true'] {
  border-style: solid;
  border-color: var(--color-success);
}

.rel-list thead th {
  background: var(--color-primary-soft);
}

.rel-list tbody th {
  background: var(--color-blue-soft);
  text-align: left;
}

.rel-list td {
  text-align: left;
}

.rel-list__none {
  color: var(--color-ink-muted);
}

/* Chip pasangan berurutan */
.rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rel-chip {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.rel-chip:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.rel-chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.rel-chip[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.rel-chip:disabled {
  cursor: default;
}

.rel-chip--benar,
.rel-chip--benar[aria-pressed='true'] {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.rel-chip--salah,
.rel-chip--salah[aria-pressed='true'] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
  text-decoration: line-through;
}

.rel-chip--terlewat {
  border-style: dashed;
  border-color: var(--color-warning);
}

.rel-chip--benar::before {
  content: '✓ ';
}

.rel-chip--salah::before {
  content: '✗ ';
}

@media (max-width: 480px) {
  .rel-table,
  .rel-list {
    font-size: 0.85rem;
  }

  .rel-table th,
  .rel-table td,
  .rel-list th,
  .rel-list td {
    padding: var(--space-1) var(--space-2);
  }

  .rel-table--interactive td {
    padding: 2px;
  }

  .rel-table__btn {
    min-width: 40px;
  }
}

/* =========================================================================
   Kekongruenan bangun datar (engine.js seksi 26): gambar bangun SVG
   (.kgr-svg, .kgr-poly*, .kgr-label*), papan kertas jiplak (.kgr-board,
   .kgr-cell*, .kgr-toolbar, .kgr-jiplak*), papan ukur (.kgr-measure*,
   .kgr-chip*), tabel perbandingan (.kgr-table*), pasangan bangun
   (.kgr-pair*).
   Warna bangun: a biru, b oranye, c hijau, d ungu; jiplakan ungu putus-putus.
   ========================================================================= */

.kgr-svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.kgr-poly {
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.kgr-poly--a {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
}

.kgr-poly--b {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
}

.kgr-poly--c {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.kgr-poly--d {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
}

.kgr-titik {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.kgr-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.kgr-label--sudut {
  fill: var(--color-purple-strong);
}

.kgr-label--tanya {
  font-size: 14px;
  fill: var(--color-error);
}

.kgr-arc {
  fill: none;
  stroke: var(--color-purple);
  stroke-width: 1.6;
}

.kgr-arc--sorot {
  stroke: var(--color-error);
  stroke-width: 3;
}

.kgr-sorot {
  stroke: var(--color-error);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.75;
}

.kgr-jiplak {
  fill: rgba(107, 53, 164, 0.18);
  stroke: var(--color-purple);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
  transition: fill 0.2s ease;
}

.kgr-jiplak--berimpit {
  fill: rgba(47, 125, 79, 0.28);
  stroke: var(--color-success);
  stroke-dasharray: none;
  stroke-width: 3;
}

.kgr-jiplak__titik {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  fill: var(--color-purple-strong);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.kgr-hit {
  stroke: transparent;
  stroke-width: 18;
  fill: transparent;
  cursor: pointer;
}

.kgr-hit:hover {
  stroke: rgba(37, 99, 235, 0.18);
}

.kgr-hit--sudut {
  stroke-width: 0;
}

.kgr-hit--sudut:hover {
  fill: rgba(107, 53, 164, 0.15);
}

/* ---- Papan kertas jiplak ---- */

.kgr-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
}

.kgr-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.kgr-cell .kgr-svg {
  width: 100%;
}

.kgr-cell.is-target {
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px var(--color-purple-soft);
}

.kgr-cell.is-berimpit {
  border-color: var(--color-success);
}

.kgr-cell__nama {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.kgr-cell__badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-size: 0.75rem;
  white-space: nowrap;
}

.kgr-btn {
  min-height: 44px;
  justify-content: center;
}

.kgr-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.kgr-toolbar .kgr-btn {
  flex: 1 1 140px;
  max-width: 220px;
}

.kgr-status {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
  line-height: 1.5;
}

.kgr-status--ok {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.kgr-status__pos {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

/* ---- Papan ukur ---- */

.kgr-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.kgr-duo--single {
  max-width: 460px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

.kgr-measure {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.kgr-measure__judul {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  text-align: center;
}

.kgr-measure__gambar {
  padding: var(--space-2) 0;
}

.kgr-measure__count {
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  text-align: right;
}

.kgr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.kgr-chips__label {
  min-width: 64px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.kgr-chip {
  min-height: 44px;
  min-width: 52px;
  padding: var(--space-1) var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.kgr-chip:hover {
  border-color: var(--color-primary);
}

.kgr-chip.is-done {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.kgr-chip.is-last {
  box-shadow: 0 0 0 3px rgba(166, 53, 53, 0.25);
}

/* ---- Tabel perbandingan ---- */

.kgr-table-wrap {
  overflow-x: auto;
  margin: var(--space-2) 0;
}

.kgr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kgr-table th,
.kgr-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.kgr-table thead th {
  background: var(--color-bg);
  font-family: var(--font-display);
}

.kgr-table__row--sudut th,
.kgr-table__row--sudut td {
  background: rgba(107, 53, 164, 0.05);
}

.kgr-ket {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-weight: 700;
}

.kgr-ket--sama {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.kgr-ket--rasio {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.kgr-ket--beda {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

/* ---- Pasangan bangun ---- */

.kgr-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-4);
  margin: var(--space-2) 0;
}

.kgr-pair__item {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.kgr-pair__item figcaption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

@media (max-width: 480px) {
  .kgr-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  /* tombol putar/balik & status tetap terlihat saat menggulir papan jiplak */
  .kgr-controls {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--space-3) calc(-1 * var(--space-2)) 0;
    padding: 0 var(--space-2) var(--space-2);
    background: var(--color-surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }

  .kgr-controls .kgr-toolbar {
    margin-top: var(--space-2);
  }

  .kgr-controls .kgr-status {
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: 0.9rem;
  }

  .kgr-toolbar .kgr-btn {
    flex: 1 1 30%;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .kgr-chips__label {
    width: 100%;
  }

  .kgr-table {
    font-size: 0.8rem;
  }

  .kgr-table th,
  .kgr-table td {
    padding: var(--space-1);
  }
}

/* =========================================================================
   Eksponen bulat (engine.js seksi 27): tangga pangkat (.pw-ladder*),
   tabel pangkat (.pw-table*), tabel pola eksponen (.pola-tbl*),
   ubin faktor (.fx-*), lab uji sifat eksponen (.xlab*).
   Warna: pangkat positif biru, pangkat nol ungu, pangkat negatif oranye.
   ========================================================================= */

.pw-ladder {
  list-style: none;
  margin: var(--space-3) auto;
  padding: 0;
  max-width: 460px;
}

.pw-ladder__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
}

.pw-ladder__row--nol {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
}

.pw-ladder__row--neg {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.pw-ladder__pow {
  min-width: 3.4ch;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
}

.pw-ladder__eq {
  font-weight: 700;
  color: var(--color-ink-muted);
}

.pw-ladder__val {
  min-width: 4ch;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}

.pw-ladder__val--tanya {
  color: var(--color-orange-strong);
}

.pw-ladder__input.input-text {
  width: 96px;
  min-height: 40px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-align: center;
}

.pw-ladder__mark {
  font-weight: 700;
}

.pw-ladder__mark--ok {
  color: var(--color-success);
}

.pw-ladder__mark--no {
  color: var(--color-error);
}

.pw-ladder__faktor {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.pw-ladder__step {
  padding: 2px 0 2px var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.pw-ladder__arrow {
  color: var(--color-primary);
}

.pw-ladder-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.pw-ladder-duo > * {
  min-width: 0;
}

/* Ubin faktor */
.fx-tiles {
  margin: var(--space-3) 0;
  text-align: center;
}

.fx-tiles__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.fx-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-blue);
}

.fx-group--b {
  border-color: var(--color-orange);
}

.fx-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
}

.fx-group--b .fx-tile,
.fx-tile--b {
  background: var(--color-orange);
}

.fx-tile--coret {
  position: relative;
  opacity: 0.45;
}

.fx-tile--coret::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  border-top: 3px solid var(--color-error-strong);
  transform: rotate(-35deg);
}

.fx-op {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}

.fx-one {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-purple-strong);
}

.fx-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fx-frac__row {
  display: flex;
  justify-content: center;
}

.fx-frac__bar {
  align-self: stretch;
  border-top: 3px solid var(--color-ink);
}

/* Lab uji sifat eksponen */
.xlab__pilih {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.xlab__sifat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.xlab__sifat:hover {
  border-color: var(--color-primary);
}

.xlab__sifat:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.xlab__sifat[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.xlab__sifat--dugaan {
  border-style: dashed;
}

.xlab__sifat-nama {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.xlab__sifat-rumus {
  font-family: var(--font-mono);
  font-weight: 700;
}

.xlab__stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.xlab__hasil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.xlab__ruas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}

.xlab__ruas-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.xlab__ruas-teks,
.xlab__ruas-nilai {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.xlab__catatan,
.xlab__vonis {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

.xlab__catatan {
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
}

.xlab__vonis {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.xlab__vonis--ok {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.xlab__vonis--no {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.xlab__vonis--undef {
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.xlab__cek {
  list-style: none;
  margin: var(--space-4) 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.xlab__cek-item {
  font-size: 0.92rem;
}

.xlab__cek-item--done {
  color: var(--color-success-strong);
}

.xlab__cek-ket {
  color: var(--color-ink-muted);
}

.xlab__log-wrap {
  overflow-x: auto;
}

.xlab__log {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.xlab__log th,
.xlab__log td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.xlab__tag {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
}

.xlab__tag--ok {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.xlab__tag--no {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

/* Tabel pangkat (kisi aⁿ naik) */
.pw-table {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-2);
}

.pw-table__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
  min-width: 0;
}

.pw-table__cell--hl {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  box-shadow: 0 0 0 2px var(--color-orange-soft);
}

.pw-table__pow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.pw-table__val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
}

.pw-table__val--tanya {
  color: var(--color-orange-strong);
}

.pw-table__input.input-text {
  width: 100%;
  min-height: 40px;
  padding: var(--space-1);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
}

.pw-table__mark {
  position: absolute;
  top: 2px;
  right: 6px;
  font-weight: 700;
}

.pw-table__mark--ok {
  color: var(--color-success);
}

.pw-table__mark--no {
  color: var(--color-error);
}

.pw-table--compact {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-1);
}

.pw-table--compact .pw-table__cell {
  padding: 2px var(--space-1);
  border-width: 1px;
}

.pw-table--compact .pw-table__pow,
.pw-table--compact .pw-table__val {
  font-size: 0.85rem;
}

/* Tabel eksplorasi pola eksponen */
.pola-tbl-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.pola-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.pola-tbl__caption {
  caption-side: top;
  padding-bottom: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  text-align: left;
}

.pola-tbl th,
.pola-tbl td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.pola-tbl thead th {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.pola-tbl__bentuk {
  font-size: 1.1rem;
  white-space: nowrap;
}

.pola-tbl__row--ok {
  background: var(--color-success-soft);
}

.pola-tbl__input.input-text {
  width: 88px;
  min-height: 40px;
  padding: var(--space-1);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
}

.pola-tbl__pow {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  font-size: 1.15rem;
  font-weight: 700;
}

.pola-tbl__input--k.input-text {
  width: 48px;
  min-height: 34px;
  font-size: 0.9rem;
  transform: translateY(-0.45em);
}

.pola-tbl__sup {
  font-size: 0.75em;
}

.pola-tbl__val {
  font-weight: 700;
}

.pola-tbl__mark {
  margin-left: var(--space-1);
  font-family: var(--font-body);
  font-weight: 700;
}

.pola-tbl__mark--ok {
  color: var(--color-success);
}

.pola-tbl__mark--no {
  color: var(--color-error);
}

.pola-tbl__mn {
  background: var(--color-purple-soft);
  font-weight: 700;
}

.pola-tbl__mn--k {
  color: var(--color-purple-strong);
}

@media (max-width: 480px) {
  .pw-ladder__faktor {
    display: none;
  }

  .xlab__stepper {
    gap: var(--space-2);
  }

  .fx-tile {
    min-width: 28px;
    height: 28px;
  }

  .pola-tbl th,
  .pola-tbl td {
    padding: var(--space-1);
  }

  .pola-tbl__bentuk {
    font-size: 0.95rem;
  }

  .pola-tbl__input.input-text {
    width: 68px;
  }

  .pola-tbl__input--k.input-text {
    width: 40px;
  }
}

/* =========================================================================
   Peluang kejadian majemuk (engine.js seksi 28): grid ruang sampel
   bertanda (.prob-grid*, .prob-cell), tombol lapis A/B (.prob-layer*),
   simulator percobaan (.prob-sim*), diagram Venn (.prob-venn*).
   Warna: kejadian A biru, kejadian B oranye, irisan A ∩ B ungu.
   ========================================================================= */

.prob-grid-wrap {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.prob-layer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.prob-layer__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.prob-layer__btn--a[aria-pressed='true'] {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.prob-layer__btn--b[aria-pressed='true'] {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.prob-layer__count {
  min-width: 1.6em;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: 0.8rem;
  text-align: center;
}

.prob-grid {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prob-grid__row {
  display: grid;
  grid-template-columns: minmax(52px, auto) repeat(6, minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
}

.prob-grid--kartu .prob-grid__row {
  grid-template-columns: minmax(84px, auto) repeat(13, minmax(0, 1fr));
}

.prob-grid__corner,
.prob-grid__colhead,
.prob-grid__rowhead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.prob-grid__corner {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.prob-grid__rowhead {
  justify-content: flex-start;
  padding-right: var(--space-1);
  white-space: nowrap;
}

.prob-cell {
  min-width: 0;
  min-height: 40px;
  padding: 2px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.prob-cell:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.prob-cell:disabled {
  cursor: default;
}

.prob-cell--merah {
  color: var(--color-error-strong);
}

.prob-cell.is-a {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.prob-cell.is-b {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.prob-cell.is-a.is-b {
  border-color: var(--color-purple);
  background: repeating-linear-gradient(
    135deg,
    var(--color-blue-soft) 0 6px,
    var(--color-orange-soft) 6px 12px
  );
  box-shadow: inset 0 0 0 2px var(--color-purple);
}

.prob-cell.is-extra {
  outline: 3px solid var(--color-error);
  outline-offset: -3px;
}

.prob-cell.is-missing {
  border-style: dashed;
  border-color: var(--color-error);
}

.prob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.prob-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.prob-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid;
}

.prob-swatch--a {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.prob-swatch--b {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.prob-swatch--ab {
  border-color: var(--color-purple);
  background: repeating-linear-gradient(
    135deg,
    var(--color-blue-soft) 0 3px,
    var(--color-orange-soft) 3px 6px
  );
}

/* Simulator percobaan */
.prob-sim {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  min-width: 0;
}

.prob-sim__title {
  margin: 0;
  font-weight: 700;
}

.prob-sim__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.prob-sim__n {
  margin: 0;
}

.prob-sim__last {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.prob-chip {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.prob-sim__table-wrap {
  min-width: 0;
}

.prob-sim__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  table-layout: fixed;
}

.prob-sim__table th,
.prob-sim__table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.prob-sim__table thead th {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.prob-sim__bar {
  display: block;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.prob-sim__bar > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

/* Diagram Venn */
.prob-venn {
  margin: 0;
  max-width: 360px;
}

.prob-venn svg {
  display: block;
  width: 100%;
  height: auto;
}

.prob-venn figcaption {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.prob-venn__s {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 2;
}

.prob-venn__a {
  fill: var(--color-blue);
  fill-opacity: 0.16;
  stroke: var(--color-blue);
  stroke-width: 2;
}

.prob-venn__b {
  fill: var(--color-orange);
  fill-opacity: 0.16;
  stroke: var(--color-orange);
  stroke-width: 2;
}

.prob-venn__label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--color-ink);
}

.prob-venn__num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  fill: var(--color-ink);
}

.prob-venn__num--ab {
  fill: var(--color-purple-strong);
}

.prob-venn__num--luar {
  font-size: 15px;
  fill: var(--color-ink-muted);
}

@media (max-width: 560px) {
  .prob-grid--kartu .prob-grid__row--head {
    display: none;
  }

  .prob-grid--kartu .prob-grid__row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .prob-grid--kartu .prob-grid__rowhead {
    grid-column: 1 / -1;
    padding-top: var(--space-1);
  }

  .prob-grid__row {
    grid-template-columns: minmax(34px, auto) repeat(6, minmax(0, 1fr));
  }

  .prob-cell {
    min-height: 36px;
    font-size: 0.74rem;
  }

  .prob-sim__table {
    font-size: 0.8rem;
  }
}

/* =========================================================================
   BILANGAN BULAT DALAM KONTEKS SEHARI-HARI (.bbk-*)
   Skala konteks bertema (buildSkalaKonteks), isian cara baca
   (buildCekStep jenis 'baca'), satuan isian, dan label jenis soal.
   Warna: sisi positif oranye, sisi negatif biru, titik acuan tinta —
   sama dengan garis bilangan interaktif .nlp-*.
   ========================================================================= */

.bbk-skala {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-3) 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  border-left: 6px solid var(--color-border-strong);
}

.bbk-skala--suhu {
  border-left-color: var(--color-error);
}

.bbk-skala--gedung {
  border-left-color: var(--color-purple);
}

.bbk-skala--laut {
  border-left-color: var(--color-blue);
}

.bbk-skala--uang {
  border-left-color: var(--color-success);
}

.bbk-skala--skor {
  border-left-color: var(--color-warning);
}

.bbk-skala__cap {
  margin: 0 0 var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.bbk-skala__info {
  margin: 0 0 var(--space-2) var(--space-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink);
}

.bbk-skala__rows {
  display: flex;
  flex-direction: column;
}

.bbk-skala__row {
  position: relative;
  display: flex;
  align-items: center;
  height: 14px;
}

.bbk-skala__num {
  flex: 0 0 34px;
  padding-right: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.bbk-skala__tick {
  flex: 0 0 auto;
  width: 12px;
  height: 2px;
  background: var(--color-ink-muted);
  border-right: 4px solid var(--color-ink-muted);
}

.bbk-skala__row--pos .bbk-skala__tick {
  border-right-color: var(--color-orange);
}

.bbk-skala__row--neg .bbk-skala__tick {
  border-right-color: var(--color-blue);
}

.bbk-skala__row--nol .bbk-skala__tick {
  width: 26px;
  height: 3px;
  background: var(--color-ink);
  border-right-color: var(--color-ink);
}

.bbk-skala__acuan {
  margin-left: var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}

.bbk-skala__marker {
  position: absolute;
  left: 58px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 2px solid var(--color-warning);
  border-radius: 999px;
  background: var(--color-warning-soft);
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: nowrap;
  z-index: 1;
}

.bbk-skala__row--nol.is-titik .bbk-skala__marker {
  left: auto;
  right: var(--space-2);
}

.bbk-skala__marker strong {
  font-family: var(--font-mono);
}

.dl-input-row .bbk-baca-input {
  flex: 1 1 16rem;
  max-width: 26rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
}

.bbk-satuan {
  font-weight: 700;
  color: var(--color-ink-muted);
}

.bbk-soal-tag {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

/* =========================================================================
   Bilangan berpangkat — membaca & menulis (engine.js seksi 30):
   penulis pangkat (.pwr-writer*), anatomi basis–pangkat (.pwr-anatomy*,
   .pwr-chip*), simulator kertas lipat (.pwr-fold*).
   Warna tetap: BASIS biru, PANGKAT oranye, tanda di luar pangkat ungu.
   ========================================================================= */

.pwr-writer {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-width: 100%;
}

.pwr-writer.is-ok {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.pwr-writer.is-bad {
  border-style: solid;
  border-color: var(--color-error);
}

.pwr-writer__expr {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.pwr-writer__slot--pangkat {
  margin-top: -10px;
}

.pwr-writer__input {
  min-height: 44px;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
}

.pwr-writer__input--basis {
  width: 5.2ch;
  min-height: 60px;
  font-size: 1.7rem;
}

.pwr-writer__input--pangkat {
  width: 4.6ch;
  font-size: 1.05rem;
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.pwr-writer__input::placeholder {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.pwr-writer__input:disabled {
  opacity: 0.85;
}

.pwr-writer__preview {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
}

/* Anatomi: basis besar biru, pangkat kecil oranye terangkat */
.pwr-anatomy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.pwr-anatomy__expr {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
}

.pwr-anatomy__part {
  padding: 4px 6px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: inherit;
}

.pwr-anatomy__basis {
  font-size: 2.6rem;
  color: var(--color-blue-strong);
}

.pwr-anatomy__pangkat {
  margin-top: -6px;
  font-size: 1.3rem;
  color: var(--color-orange-strong);
}

.pwr-anatomy__tanda {
  font-size: 2.6rem;
  color: var(--color-purple-strong);
}

button.pwr-anatomy__part {
  min-width: 44px;
  min-height: 44px;
  border-color: var(--color-border-strong);
  border-style: dashed;
  background: var(--color-surface);
  cursor: pointer;
}

button.pwr-anatomy__part:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

button.pwr-anatomy__part.is-correct {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

button.pwr-anatomy__part.is-incorrect {
  border-style: solid;
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

button.pwr-anatomy__part:disabled {
  cursor: default;
}

.pwr-anatomy__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.pwr-chip {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pwr-chip--basis {
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.pwr-chip--pangkat {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

/* Simulator kertas lipat */
.pwr-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .pwr-fold {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.pwr-fold__svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto var(--space-2);
}

.pwr-fold__sheet {
  fill: #fffbe8;
  stroke: var(--color-border-strong);
  stroke-width: 2;
}

.pwr-fold__crease {
  stroke: var(--color-orange);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.pwr-fold__piece {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
  stroke-width: 2.5;
}

.pwr-fold__readout {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-size: 1rem;
}

.pwr-fold__stage .btn-group {
  justify-content: center;
}

.pwr-fold__table td:nth-child(2) {
  font-family: var(--font-mono);
}

.pwr-fold__table tr.is-current td {
  background: var(--color-primary-soft);
  font-weight: 700;
}

/* =========================================================================
   31. Prisma — unsur & jaring-jaring (engine.js seksi 31): gambar prisma
   (.psm-svg, .psm-face*, .psm-edge*, .psm-vertex, .psm-label, .psm-hit*),
   penjelajah (.psm-explorer, .psm-toolbar, .psm-tool-btn, .psm-range,
   .psm-counter), tabel unsur (.psm-table*), jaring datar & lipatan
   (.psm-net*, .psm-lipatan, .psm-fold-*), perakit jaring (.psm-builder*,
   .psm-slot).
   Warna konsisten antara model 3D dan jaring-jaring: sisi alas & atas
   oranye (dua sisi kongruen), sisi tegak biru, unsur yang ditandai ungu.
   ========================================================================= */

.psm-svg,
.psm-net,
.psm-fold-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.psm-svg {
  max-width: 340px;
}

.psm-face {
  stroke: none;
  stroke-linejoin: round;
}

.psm-face--tegak {
  fill: var(--color-blue-soft);
}

.psm-face--alas,
.psm-face--atas {
  fill: var(--color-orange-soft);
}

.psm-face.is-back {
  fill-opacity: 0.25;
}

.psm-face.is-front {
  fill-opacity: 0.85;
}

.psm-face.is-sorot {
  fill: var(--color-purple-soft);
  fill-opacity: 1;
  stroke: var(--color-purple);
  stroke-width: 3;
}

.psm-face.is-sorot.is-back {
  fill-opacity: 0.5;
  stroke-dasharray: 6 4;
}

.psm-edge {
  stroke: var(--color-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.psm-edge.is-hidden {
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.psm-edge.is-sorot {
  stroke: var(--color-purple);
  stroke-width: 5;
  stroke-dasharray: none;
}

.psm-edge.is-sorot.is-hidden {
  stroke-width: 4;
  stroke-dasharray: 7 4;
}

.psm-vertex {
  fill: var(--color-ink);
}

.psm-vertex.is-hidden {
  fill: var(--color-ink-muted);
}

.psm-vertex.is-sorot {
  fill: var(--color-purple);
  stroke: var(--color-purple-strong);
  stroke-width: 2;
}

.psm-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.psm-label.is-hidden {
  fill: var(--color-ink-muted);
}

.psm-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}

.psm-hit--rusuk {
  stroke-width: 16;
  stroke-linecap: round;
}

.psm-hit--rusuk:hover,
.psm-hit--rusuk:focus-visible {
  stroke: rgba(37, 99, 235, 0.22);
}

.psm-hit--titik:hover,
.psm-hit--titik:focus-visible {
  fill: rgba(37, 99, 235, 0.22);
}

.psm-hit-face {
  cursor: pointer;
}

.psm-hit-face:hover,
.psm-hit-face:focus-visible {
  stroke: var(--color-primary);
  stroke-width: 3;
}

.psm-svg [data-psm-kind]:focus {
  outline: none;
}

.psm-svg [data-psm-kind]:focus-visible {
  stroke: var(--color-focus);
}

/* ---- Penjelajah prisma ---- */

.psm-explorer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.psm-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.psm-tool-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.psm-tool-btn:hover {
  border-color: var(--color-primary);
}

.psm-tool-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.psm-tool-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.psm-explorer__nama {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
}

.psm-stage {
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.psm-stage--fold .psm-fold-svg {
  max-height: 320px;
}

.psm-stage--net .psm-net {
  max-height: 320px;
}

.psm-rotate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.psm-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  font-weight: 600;
}

.psm-range span {
  white-space: nowrap;
}

.psm-range input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  accent-color: var(--color-primary);
}

.psm-range--wide {
  margin-top: var(--space-3);
}

.psm-info {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
  font-size: 0.92rem;
}

.psm-counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.psm-count {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 0.85rem;
}

.psm-count.is-active {
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
}

/* ---- Tabel unsur ---- */

.psm-table-wrap {
  overflow-x: auto;
}

.psm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.psm-table caption {
  margin-bottom: var(--space-2);
  font-weight: 700;
  text-align: left;
}

.psm-table th,
.psm-table td {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  text-align: center;
}

.psm-table thead th {
  background: var(--color-primary-soft);
}

.psm-table tbody th {
  text-align: left;
  font-weight: 600;
}

.psm-cell {
  width: 4.2em;
  min-height: 44px;
  text-align: center;
}

.psm-cell.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-weight: 700;
}

.psm-diagnosa {
  margin: 0;
  padding-left: 1.2em;
}

/* ---- Jaring datar, lipatan & perakit ---- */

.psm-net-piece,
.psm-fold-piece {
  stroke: var(--color-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.psm-fold-piece {
  fill-opacity: 0.88;
}

.psm-lipatan {
  stroke: var(--color-ink-muted);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}

.psm-net-piece--lepas {
  cursor: pointer;
}

.psm-net-piece--lepas:hover,
.psm-net-piece--lepas:focus-visible {
  stroke: var(--color-error);
  stroke-width: 3;
  outline: none;
}

.psm-slot {
  cursor: pointer;
}

.psm-slot polygon {
  fill: transparent;
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.psm-slot text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  fill: var(--color-ink-muted);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.psm-slot:hover polygon,
.psm-slot:focus-visible polygon {
  fill: var(--color-orange-soft);
  fill-opacity: 0.5;
  stroke: var(--color-orange);
}

.psm-slot:focus {
  outline: none;
}

.psm-builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.psm-builder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.psm-builder__pane {
  margin: 0;
  min-width: 0;
}

.psm-builder__pane figcaption {
  margin-bottom: var(--space-2);
  font-weight: 700;
  text-align: center;
}

.psm-placeholder {
  margin: 0;
  padding: var(--space-6) var(--space-3);
  color: var(--color-ink-muted);
  text-align: center;
}

.psm-folder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Garis bantu berlabel pada gambar 3D (opts.garis buildPrismSVG), mis.
   tinggi limas TO dan tinggi segitiga sisi tegak TP (seksi 56). */
.psm-garis {
  stroke: var(--color-error);
  stroke-width: 2.2;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  pointer-events: none;
}

.psm-garis--segitiga {
  stroke: var(--color-success-strong);
}

.psm-garis-kaki {
  fill: var(--color-ink);
  pointer-events: none;
}

.psm-garis-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-ink);
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.psm-info--tinggi {
  border-left: 4px solid var(--color-error);
  text-align: left;
}

/* =========================================================================
   56. Limas — unsur & jaring-jaring (engine.js seksi 56): stepper banyak
   segitiga pada perakit jaring kipas (.lms-stepper). Gambar limas, jaring,
   dan slot memakai kelas .psm-* seksi 31.
   ========================================================================= */

.lms-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.lms-stepper .btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 700;
}

.lms-stepper__val {
  min-width: 110px;
  text-align: center;
}

/* =========================================================================
   Barisan aritmetika: selisih & beda (shared/engine.js seksi 32)
   Pelacak selisih (.bar-tracker, .bar-bridge), lab barisan (.bar-lab),
   garis bilangan lompatan (.bar-lompatan).
   ========================================================================= */

.bar-tracker__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) 0;
  margin: var(--space-4) 0;
}

.bar-tile {
  min-width: 68px;
}

.bar-bridge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 76px;
  padding: 0 var(--space-1);
}

.bar-bridge__arc {
  width: 56px;
  height: 14px;
  margin-bottom: var(--space-1);
  border: 2px dashed var(--color-border-strong);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
}

.bar-bridge .dl-num-input {
  width: 68px;
  max-width: 68px;
  min-height: 40px;
  padding: var(--space-1);
  font-size: 1rem;
}

.bar-bridge__val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 40px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-success-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-success-strong);
}

.bar-bridge--ok .bar-bridge__arc {
  border-style: solid;
  border-color: var(--color-success);
}

.bar-bridge--salah .bar-bridge__arc {
  border-color: var(--color-error);
}

.bar-tracker__umpan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.bar-lab__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.bar-lompatan {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-2) 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.bar-axis {
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.bar-arc {
  fill: none;
  stroke-width: 2.5;
}

.bar-arc--naik {
  stroke: var(--color-success);
}

.bar-arc--turun {
  stroke: var(--color-orange);
}

.bar-arc--konstan {
  stroke: var(--color-purple);
  stroke-dasharray: 4 3;
}

.bar-arc__label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-ink);
}

.bar-dot {
  fill: var(--color-blue);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.bar-dot__label {
  font-family: var(--font-mono);
  font-size: 14px;
  text-anchor: middle;
  fill: var(--color-ink-muted);
}

.bar-lab__sifat {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
}

.bar-lab__sifat--naik {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.bar-lab__sifat--turun {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.bar-lab__sifat--konstan {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
}

.bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.bar-chip--done {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-weight: 600;
}

@media (max-width: 480px) {
  .bar-bridge {
    min-width: 64px;
  }

  .bar-bridge .dl-num-input {
    width: 58px;
    max-width: 58px;
  }

  .bar-tile {
    min-width: 56px;
    padding: var(--space-2);
  }

  /* SVG diskalakan mengecil di ponsel; perbesar teksnya agar terbaca. */
  .bar-arc__label {
    font-size: 26px;
  }

  .bar-dot__label {
    font-size: 24px;
  }
}

/* =========================================================================
   33. Asosiasi dua variabel (shared/engine.js seksi 33)
   Tabel kontingensi (.aso-tabel), batang tersegmen 100% (.aso-segbar),
   diagram pencar & plotter (.aso-plot, .aso-plotter), kartu turus
   (.aso-tally), lab data kelas (.aso-lab).
   ========================================================================= */

.aso-tabel-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.aso-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--color-surface);
}

.aso-tabel__caption {
  caption-side: top;
  padding-bottom: var(--space-2);
  text-align: left;
  font-weight: 700;
}

.aso-tabel th,
.aso-tabel td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: center;
}

.aso-tabel thead th,
.aso-tabel__grup {
  background: var(--color-bg-grid);
  font-weight: 700;
}

.aso-tabel tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.aso-tabel__sudut {
  background: var(--color-bg-grid);
  text-align: left;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.aso-tabel__total,
.aso-tabel tr.aso-tabel__total th,
.aso-tabel tr.aso-tabel__total td {
  background: var(--color-primary-soft);
  font-weight: 700;
}

.aso-num {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.aso-tabel__n {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-ink-muted);
}

.aso-tabel .aso-sorot {
  background: var(--color-warning-soft);
}

.aso-tabel--isian td {
  padding: var(--space-1);
}

.aso-input {
  min-width: 64px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Batang tersegmen 100% */
.aso-segbar {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.aso-segbar__row {
  display: grid;
  gap: var(--space-1);
}

.aso-segbar__label {
  font-weight: 600;
  font-size: 0.9rem;
}

.aso-segbar__n {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.aso-segbar__bar {
  display: flex;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
}

.aso-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.aso-seg--0 {
  background: var(--color-blue);
}

.aso-seg--1 {
  background: var(--color-orange);
}

.aso-seg--2 {
  background: var(--color-purple);
}

.aso-seg--3 {
  background: var(--color-success);
}

.aso-segbar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.85rem;
}

.aso-segbar__legend i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--space-1);
  border-radius: 3px;
  vertical-align: -2px;
}

/* Diagram pencar */
.aso-plot {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: var(--space-3) auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.aso-plot--kecil {
  max-width: 340px;
}

.aso-plot--input {
  cursor: crosshair;
  touch-action: manipulation;
}

.aso-plot--input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.aso-grid {
  stroke: var(--color-bg-grid);
  stroke-width: 1;
}

.aso-axis {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.aso-tick {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--color-ink-muted);
}

.aso-tick--x {
  text-anchor: middle;
}

.aso-tick--y {
  text-anchor: end;
}

.aso-axis-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-ink);
  text-anchor: middle;
}

.aso-dot {
  fill: var(--color-blue);
  fill-opacity: 0.85;
  stroke: #fff;
  stroke-width: 1.5;
}

.aso-dot--sorot {
  fill: var(--color-orange);
  stroke: var(--color-orange-strong);
  stroke-width: 2;
}

.aso-dot--salah line {
  stroke: var(--color-error);
  stroke-width: 3;
  stroke-linecap: round;
}

.aso-trend {
  stroke: var(--color-orange);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.aso-cursor circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
}

.aso-cursor line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

.aso-plotter {
  display: grid;
  gap: var(--space-3);
}

.aso-plotter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aso-plotter__list li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
}

.aso-plotter__list li.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 700;
}

.aso-plotter__list li.is-done {
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

.aso-plotter__pos {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* Kartu turus */
.aso-tally {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.aso-tally__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.aso-tally__card:hover {
  border-color: var(--color-primary);
}

.aso-tally__card.is-marked {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  opacity: 0.75;
}

.aso-tally__nama {
  font-weight: 700;
  font-size: 0.9rem;
}

.aso-chip {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.aso-chip--0 {
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.aso-chip--1 {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

/* Lab data kelas */
.aso-lab__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.aso-lab__tab {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.aso-lab__tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.aso-lab__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 860px) {
  .aso-lab__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.aso-lab__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.aso-lab__table th,
.aso-lab__table td {
  padding: var(--space-1);
  text-align: center;
}

.aso-lab__table td:first-child {
  width: 2.5em;
  color: var(--color-ink-muted);
}

.aso-lab__select {
  min-width: 96px;
}

.aso-lab__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .aso-tabel th,
  .aso-tabel td {
    padding: var(--space-1) var(--space-2);
    font-size: 0.82rem;
  }

  .aso-tabel--isian td {
    padding: 2px;
  }

  .aso-tabel tbody th {
    white-space: normal;
  }

  .aso-input {
    min-width: 44px;
    padding: 6px 4px;
  }
}

/* =========================================================================
   Bilangan terpadu — bulat, pecahan & desimal (engine seksi 38)
   (buildBilanganChip, buildTabelBentukTerpadu)
   ========================================================================= */

.num-chip--frac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  vertical-align: middle;
}

.num-chip--frac .frac-mixed {
  font-family: var(--font-sans, inherit);
}

.num-chip__sign {
  font-weight: 700;
}

.bentuk-tabel td,
.bentuk-tabel th {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .bentuk-tabel th,
  .bentuk-tabel td {
    padding: var(--space-1) var(--space-2);
    font-size: 0.85rem;
  }
}

/* =========================================================================
   39. Bentuk aljabar berpangkat — monomial (shared/engine.js seksi 39)
   (buildEkspresiMonomial, buildMonomialPositif, buildMonomialInput)
   ========================================================================= */

.mono-expr {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mono-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  gap: 2px;
}

.mono-frac__atas,
.mono-frac__bawah {
  padding: 0 var(--space-1);
  white-space: nowrap;
}

.mono-frac__bar {
  align-self: stretch;
  height: 2px;
  background: currentColor;
}

.mono-input {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.mono-input__koef.input-text {
  width: 84px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: center;
}

.mono-input__var {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  padding-top: 10px;
}

.mono-input__huruf {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
}

.mono-input__exp.input-text {
  width: 56px;
  min-height: 36px;
  margin-top: -12px;
  padding: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-align: center;
}

/* =========================================================================
   Numbered Heads Together (shared/engine.js seksi 12): kartu nomor
   kepala (.nht-cards) dan panel pemanggilan nomor (.nht-call).
   ========================================================================= */

.nht-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.nht-card {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-purple-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.nht-card__nomor {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-purple);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.nht-card__nama {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.nht-card--dipanggil {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  box-shadow: 0 0 0 3px var(--color-warning-soft);
}

.nht-card--dipanggil .nht-card__nomor {
  background: var(--color-warning-strong);
}

.nht-call {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 2px dashed var(--color-purple);
  border-radius: var(--radius-md);
  background: var(--color-purple-soft);
}

.nht-call__judul {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-purple-strong);
}

.nht-call__tugas {
  margin: 0 0 var(--space-3);
}

.nht-call__hasil {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.nht-call__nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-warning-strong);
  color: #fff;
}

.nht-call__cek {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.nht-call__cek input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
}

/* =========================================================================
   Barisan aritmetika: rumus suku ke-n (shared/engine.js seksi 40)
   Tabel pola suku (.rumus-pola) dan isian "Uₙ = [ ]n + [ ]" (.rumus-input).
   ========================================================================= */

.rumus-pola__tabel {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.rumus-pola__tabel th,
.rumus-pola__tabel td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.rumus-pola__tabel thead th {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.rumus-pola__tabel tbody th {
  font-size: 1.05rem;
  white-space: nowrap;
}

.rumus-pola__bentuk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.rumus-pola__input.input-text {
  width: 72px;
  min-height: 40px;
  padding: var(--space-1);
  font-family: var(--font-mono);
  text-align: center;
}

.rumus-pola__isi {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  font-weight: 700;
  color: var(--color-success-strong);
}

.rumus-pola__nilai {
  font-weight: 700;
  white-space: nowrap;
}

.rumus-pola__umum th,
.rumus-pola__umum td {
  background: var(--color-primary-soft);
}

.rumus-input__baris {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
}

.rumus-input__kotak.input-text {
  width: 84px;
  min-height: 44px;
  padding: var(--space-1);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: center;
}

.rumus-input__jadi {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-success-strong);
}

.rumus-kartu {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.kode-js {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #1e2329;
  color: #e6edf3;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .rumus-input__baris {
    font-size: 1.1rem;
  }

  .rumus-input__kotak.input-text {
    width: 72px;
  }
}

/* ============================================================
   Model linear terbaik — regresi kuadrat terkecil (engine seksi 41)
   Plot garis & residu (.lf-plot), Lab Garis (.lf-lab), tabel residu
   & banding model (.lf-tabel), panel regresi (.lf-reg), lab regresi
   data sendiri (.lf-reglab).
   ============================================================ */
.lf-plot-wrap {
  margin: var(--space-3) auto;
  max-width: 560px;
}

.lf-plot-wrap .aso-plot {
  margin: 0 auto;
}

.lf-garis {
  stroke-width: 3;
  stroke-linecap: round;
}

.lf-garis--utama {
  stroke: var(--color-primary-strong);
  stroke-width: 3.5;
}

.lf-garis--0 {
  stroke: var(--color-orange);
  stroke-dasharray: 10 6;
}

.lf-garis--1 {
  stroke: var(--color-purple);
  stroke-dasharray: 3 5;
}

.lf-garis--2 {
  stroke: var(--color-ink-muted);
  stroke-dasharray: 14 5 3 5;
}

.lf-garis--3 {
  stroke: var(--color-success);
}

.lf-residu {
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}

.lf-residu--pos,
.lf-kuadrat--pos {
  stroke: var(--color-success);
}

.lf-residu--neg,
.lf-kuadrat--neg {
  stroke: var(--color-error);
}

.lf-kuadrat {
  stroke-width: 1.5;
  fill-opacity: 0.18;
}

.lf-kuadrat--pos {
  fill: var(--color-success);
}

.lf-kuadrat--neg {
  fill: var(--color-error);
}

.lf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: center;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-ink);
}

.lf-legend__swatch {
  display: inline-block;
  width: 22px;
  height: 0;
  margin-right: var(--space-1);
  border-top: 3px solid var(--color-primary-strong);
  vertical-align: middle;
}

.lf-legend__swatch--0 {
  border-top: 3px dashed var(--color-orange);
}

.lf-legend__swatch--1 {
  border-top: 3px dotted var(--color-purple);
}

.lf-legend__swatch--2 {
  border-top: 3px dashed var(--color-ink-muted);
}

.lf-legend__swatch--3 {
  border-top-color: var(--color-success);
}

/* Lab Garis */
.lf-lab {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .lf-lab {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

.lf-lab__panel {
  display: grid;
  gap: var(--space-3);
}

.lf-persamaan {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.lf-kontrol__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 700;
}

.lf-kontrol__out {
  font-family: var(--font-mono);
  color: var(--color-primary-strong);
}

.lf-kontrol__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lf-kontrol__range {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  accent-color: var(--color-primary);
}

.lf-kontrol__btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 700;
}

.lf-tampil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lf-tampil legend {
  padding: 0 var(--space-1);
  font-size: 0.85rem;
  font-weight: 700;
}

.lf-tampil__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  font-size: 0.9rem;
}

.lf-baca {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.lf-baca__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lf-baca__item--utama {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lf-baca__label {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

.lf-baca__nilai {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lf-baca__nilai small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-ink-muted);
}

/* Tabel residu & banding */
.lf-e--pos {
  color: var(--color-success-strong);
  font-weight: 700;
}

.lf-e--neg {
  color: var(--color-error-strong);
  font-weight: 700;
}

.lf-tabel tr.lf-terbaik th,
.lf-tabel tr.lf-terbaik td {
  background: var(--color-success-soft);
}

.lf-badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-success-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-success);
  border-radius: 999px;
}

/* Panel regresi */
.lf-reg {
  display: grid;
  gap: var(--space-3);
}

.lf-sheet code {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.lf-kode {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #e8eef6;
  background: #1f2933;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lf-persamaan--hasil {
  color: var(--color-success-strong);
  background: var(--color-success-soft);
}

.lf-reglab__teks {
  font-family: var(--font-mono);
}

.lf-reglab__hasil:empty {
  display: none;
}

@media (max-width: 480px) {
  .lf-baca {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Deret aritmetika: jumlah n suku pertama (engine.js seksi 42): tabel
   pasangan Gauss, tangga batang SVG, lab jumlah berjalan. Grid dan tabel
   menggulir di dalam kotaknya sendiri agar halaman tidak ikut bergeser
   pada layar sempit.
   ========================================================================= */

.gauss-grid {
  overflow-x: auto;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  -webkit-overflow-scrolling: touch;
}

.gauss-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: max-content;
  margin-bottom: var(--space-2);
}

.gauss-row__label {
  flex: 0 0 64px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.gauss-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 44px;
  padding: 0 var(--space-2);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue-strong);
}

.gauss-cell--rev {
  border-color: var(--color-orange);
  color: var(--color-orange-strong);
}

.gauss-cell--tap {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--color-purple);
  color: var(--color-purple-strong);
}

.gauss-cell--tap:hover,
.gauss-cell--tap:focus-visible {
  background: var(--color-purple-soft);
}

.gauss-cell--sum {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.gauss-op {
  width: 14px;
  text-align: center;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.gauss-line {
  min-width: 100%;
  margin: 0 0 var(--space-2);
  border-top: 2px solid var(--color-ink-muted);
}

.gauss-result {
  font-family: var(--font-mono);
  font-weight: 700;
}

.gauss-result__note {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink-muted);
}

.stair-fig {
  margin: var(--space-3) 0;
}

.stair-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
}

.stair-axis {
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.stair-bar {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
  stroke-width: 1.5;
}

.stair-bar--flip {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
}

.stair-val,
.stair-n,
.stair-rect__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

.stair-val {
  fill: var(--color-blue-strong);
}

.stair-val--flip {
  fill: var(--color-orange-strong);
}

.stair-n {
  fill: var(--color-ink-muted);
  font-weight: 400;
}

.stair-rect {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3;
  stroke-dasharray: 8 4;
}

.stair-rect__label {
  fill: var(--color-success-strong);
  font-size: 15px;
}

.stair-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.stair-key {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-blue);
  border-radius: 2px;
  background: var(--color-blue-soft);
}

.stair-key--flip {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.psum-lab {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.psum-kontrol__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.psum-kontrol__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.psum-kontrol__row .btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
}

.psum-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-primary);
}

.psum-nilai {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.psum-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-bg-grid);
  font-family: var(--font-mono);
}

.psum-chip--sum {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.psum-bar {
  position: relative;
  height: 22px;
  margin: var(--space-5) 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-bg-grid);
}

.psum-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

.psum-bar__fill--capai {
  background: var(--color-success);
}

.psum-bar__target {
  position: absolute;
  top: -6px;
  bottom: -6px;
  border-left: 3px dashed var(--color-error);
}

.psum-bar__target span {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-error-strong);
  white-space: nowrap;
}

.psum-status {
  margin: 0;
  font-weight: 700;
}

.psum-status--capai {
  color: var(--color-success-strong);
}

.psum-status--belum {
  color: var(--color-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .psum-bar__fill {
    transition: none;
  }
}

/* =========================================================================
   43. Proyek mini barisan & deret aritmetika — papan kanban milestone,
   lab perencana (slider a, b, n), dan penjalan tes jumlahDeret()
   ========================================================================= */

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.kanban__col {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.kanban__col--dikerjakan {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.kanban__col--selesai {
  background: var(--color-success-soft);
}

.kanban__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
}

.kanban__count {
  margin-left: auto;
  min-width: 24px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.78rem;
  text-align: center;
}

.kanban__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanban__card {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.kanban__card--aktif {
  border-color: var(--color-primary);
  box-shadow: inset 4px 0 0 var(--color-primary);
  font-weight: 700;
}

.kanban__card--selesai {
  color: var(--color-success-strong);
}

.kanban__empty {
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  text-align: center;
}

.plan-lab__kontrol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.plan-lab__kontrol {
  min-width: 0;
}

.plan-lab__deret {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.psum-bar__fill.plan-lab__fill--lewat {
  background: var(--color-error);
}

.test-runner__impls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.test-runner__impl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.test-runner__impl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.test-runner__impl-head .btn {
  margin-left: auto;
}

.test-runner__badge {
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.test-runner__badge--lulus {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.test-runner__badge--gagal {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.test-runner__kode {
  flex: 1;
  font-size: 0.8rem;
}

.test-runner__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.test-runner__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.test-runner__caption {
  margin-bottom: var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-ink-muted);
}

.test-runner__table th,
.test-runner__table td {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.test-runner__table thead th {
  background: var(--color-bg-grid);
  font-size: 0.8rem;
}

.test-runner__cell--lulus {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-weight: 700;
}

.test-runner__cell--gagal {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
  font-weight: 700;
}

@media (max-width: 640px) {
  .kanban {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Seksi 44 — Sifat operasi bilangan berpangkat bulat (penerapan) &
   komponen Jigsaw: langkah sifat (.sifat-step*), opsi sifat
   (.sifat-opt*), kartu ahli (.sifat-kartu*), tab stasiun ahli
   (.jigsaw-tab*), dan form tim kooperatif (.coop-setup*).
   ========================================================================= */

.sifat-step {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sifat-step--done {
  border-color: var(--color-success);
}

.sifat-step__label {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  line-height: 1.5;
}

.sifat-step__soal {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.sifat-step__tanya {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.sifat-step .challenge-options {
  margin-bottom: var(--space-3);
}

.sifat-step .feedback-box {
  margin-top: var(--space-3);
}

.sifat-step__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.sifat-step__eq {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sifat-step__pow {
  display: inline-flex;
  gap: 2px;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}

.sifat-step__pow > span {
  align-self: center;
}

.sifat-step__exp.input-text {
  width: 4.2rem;
  min-height: 40px;
  padding: 4px 6px;
  font-size: 1rem;
  text-align: center;
  transform: translateY(-0.45em);
}

.sifat-step__nilai.input-text {
  width: 8rem;
  min-height: 44px;
  text-align: center;
}

.sifat-step__satuan {
  font-weight: 600;
  color: var(--color-ink-muted);
}

.sifat-step__hasil {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-success-strong);
  overflow-wrap: anywhere;
}

.sifat-step__hasil .dl-caption {
  font-family: var(--font-body);
}

.sifat-step__pemimpin {
  display: block;
  margin-top: var(--space-1);
  font-weight: 600;
}

.sifat-opt__rumus {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.sifat-kartu__rumus {
  margin: var(--space-1) 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-strong);
}

.sifat-kartu__ahli {
  font-weight: 500;
  color: var(--color-ink-muted);
}

.jigsaw-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.jigsaw-tab {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.jigsaw-tab:hover {
  border-color: var(--color-primary);
}

.jigsaw-tab:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.jigsaw-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.jigsaw-tab.is-done {
  border-color: var(--color-success);
}

.jigsaw-tab__ikon {
  font-size: 1.4rem;
  line-height: 1;
}

.jigsaw-tab__nama {
  flex: 1 1 auto;
  min-width: 0;
}

.jigsaw-tab__ahli {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.jigsaw-tab__cek {
  color: var(--color-success-strong);
  font-weight: 700;
}

.coop-setup__set {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: none;
}

.coop-setup__set legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 600;
}

.coop-setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.coop-setup__cek {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-2) 0;
  font-weight: 500;
  cursor: pointer;
}

.coop-setup__cek input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
}

@media (max-width: 480px) {
  .sifat-step {
    padding: var(--space-3);
  }

  .sifat-step__soal {
    font-size: 1.25rem;
  }
}

/* =========================================================================
   Seksi 45 — Bentuk akar & pangkat pecahan: tanda akar ber-vinculum
   (.akar*), pangkat pecahan (.akar-pp*), ubin faktor kembar
   (.akar-tiles, .akar-tile*), konverter akar–pangkat (.akar-kv*),
   lab persegi & kubus (.akar-lab*), langkah isian akar (.akar-step*),
   tabel bentuk pangkat ⇄ akar (.akar-tabel), dan anatomi bentuk akar
   (.akar-anatomi*).
   ========================================================================= */

.akar {
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.2;
}

.akar__indeks {
  align-self: flex-start;
  margin-right: -0.3em;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
}

.akar__tanda {
  display: inline-flex;
  align-items: flex-end;
  font-size: 1.15em;
  line-height: 1;
}

.akar__isi {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  padding: 0.12em 0.15em 0 0.1em;
  border-top: 0.09em solid currentColor;
}

/* Varian besar: lambang √ SVG setinggi isi, menyambung dengan vinculum. */
.akar--besar {
  align-items: stretch;
}

.akar--besar .akar__indeks {
  margin-right: -0.55em;
  padding-top: 0.2em;
}

.akar__tanda--svg {
  flex: 0 0 auto;
  width: 0.55em;
  height: auto;
  min-height: 1.2em;
  overflow: visible;
}

.akar--besar .akar__isi {
  margin-left: -1px;
  padding: 0.2em 0.2em 0.05em;
  border-top-width: 3px;
}

/* Pangkat radikan tetap di kanan atas walau .akar__isi berupa flex. */
.akar--besar .akar__isi > sup {
  align-self: flex-start;
  font-size: 0.6em;
  line-height: 1;
}

.akar-pp {
  white-space: nowrap;
}

.akar-pp__eks {
  font-size: 0.68em;
  font-weight: 700;
}

/* Ubin faktor kembar */

.akar-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: 1.6rem;
}

.akar-tiles__luar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.akar-tiles__kosong {
  color: var(--color-ink-muted);
}

.akar-tiles__op {
  font-size: 1.1rem;
  font-weight: 700;
}

.akar-tiles .akar__isi {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
}

.akar-tiles__dalam {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.akar-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-blue-strong);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease;
}

button.akar-tile:hover:not(:disabled) {
  transform: translateY(-2px);
}

button.akar-tile:disabled {
  cursor: default;
}

.akar-tile.is-pilih {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
  transform: translateY(-3px);
}

.akar-tile--luar {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  cursor: default;
}

.akar-tile--satu {
  border-style: dashed;
  color: var(--color-ink-muted);
  cursor: default;
}

/* Konverter akar ⇄ pangkat */

.akar-kv {
  margin: var(--space-3) 0;
}

.akar-kv__kontrols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.akar-kv__kontrol {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.akar-kv__kontrol--m {
  border-color: var(--color-orange);
}

.akar-kv__kontrol--n {
  border-color: var(--color-purple);
}

.akar-kv__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.akar-kv__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.akar-kv__stepper .btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
}

.akar-kv__nilai {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.akar-kv__layar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.akar-kv__panah {
  font-size: 1.5rem;
  color: #c9d3dd;
}

.akar-kv__hasil {
  flex-basis: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #c9d3dd;
}

.akar-kv__m {
  color: var(--color-orange);
}

.akar-kv__n {
  color: var(--color-purple);
}

.akar-kv__layar .akar-kv__m {
  color: #ffb877;
}

.akar-kv__layar .akar-kv__n {
  color: #d6b4ff;
}

.akar-kv__aturan {
  margin: var(--space-3) 0 0;
  text-align: center;
}

/* Lab persegi & kubus */

.akar-lab__modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-3);
}

.akar-lab__mode {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.akar-lab__mode.is-aktif {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.akar-lab__slider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 520px;
  margin: 0 auto;
}

.akar-lab__slider input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  accent-color: var(--color-primary);
}

.akar-lab__slider .btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
}

.akar-lab__label {
  font-weight: 700;
}

.akar-lab__tampil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}

.akar-lab__svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.akar-lab__bangun,
.akar-lab__atas,
.akar-lab__samping {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 2;
}

.akar-lab__atas {
  fill: #f9ebdd;
}

.akar-lab__samping {
  fill: #e9c7a7;
}

.akar-lab__bangun.is-bulat,
.akar-lab__atas.is-bulat,
.akar-lab__samping.is-bulat {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.akar-lab__atas.is-bulat {
  fill: #eaf5ed;
}

.akar-lab__samping.is-bulat {
  fill: #bfdcc8;
}

.akar-lab__grid {
  stroke: var(--color-success);
  stroke-width: 1;
  opacity: 0.55;
}

.akar-lab__teks {
  fill: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
}

.akar-lab__hasil {
  flex: 1 1 220px;
  max-width: 360px;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: 1.1rem;
}

.akar-lab__hasil.is-bulat {
  background: var(--color-success-soft);
}

/* Langkah isian akar sederhana */

.akar-step {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.akar-step--done {
  border-color: var(--color-success);
}

.akar-step__label {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.akar-step__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.akar-step__soal,
.akar-step__jawab {
  font-size: 1.4rem;
  font-weight: 700;
}

.akar-step__jawab {
  margin: 0 0 var(--space-2);
  color: var(--color-success-strong);
}

.akar-step__isian {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 1.4rem;
}

.akar-step__input.input-text {
  width: 4.2em;
  min-height: 44px;
  text-align: center;
  font-size: 1.1rem;
}

/* Tabel bentuk pangkat ⇄ akar */

.akar-tabel {
  width: 100%;
  margin: var(--space-2) 0 var(--space-4);
  border-collapse: collapse;
  font-size: 1.1rem;
}

.akar-tabel th,
.akar-tabel td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: center;
}

.akar-tabel th {
  background: var(--color-blue-soft);
  font-size: 0.95rem;
}

.akar-tabel td:last-child {
  font-weight: 700;
  color: var(--color-success-strong);
}

/* Anatomi bentuk akar: bagian model akar dapat diketuk */

.akar-anatomi__tugas {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  text-align: center;
}

.akar-anatomi__model {
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--color-ink);
}

.akar-anatomi__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 0.08em;
  border: 3px dashed transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.akar-anatomi__btn:hover:not(:disabled),
.akar-anatomi__btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.akar-anatomi__btn:disabled {
  cursor: default;
}

.akar-anatomi__btn.akar__indeks {
  align-self: flex-start;
  min-width: 32px;
  min-height: 32px;
  margin-right: -0.25em;
  font-size: 0.5em;
}

.akar-anatomi__akar sup {
  align-self: flex-start;
  font-size: 0.5em;
}

.akar-anatomi__akar sup .akar-anatomi__btn {
  min-width: 32px;
  min-height: 32px;
}

.akar-anatomi__btn.akar-anatomi__tanda {
  align-items: stretch;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.akar-anatomi__btn.akar-anatomi__tanda:hover:not(:disabled),
.akar-anatomi__btn.akar-anatomi__tanda:focus-visible {
  outline: 3px dashed var(--color-primary);
  outline-offset: 2px;
  background: transparent;
}

.akar-anatomi__tanda .akar__tanda--svg {
  width: 0.55em;
  height: 100%;
}

.akar-anatomi__btn--tanda.is-found {
  color: var(--color-primary-strong);
}

.akar-anatomi__btn--indeks.is-found {
  border-style: solid;
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
}

.akar-anatomi__btn--radikan.is-found {
  border-style: solid;
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.akar-anatomi__btn--pangkat.is-found {
  border-style: solid;
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.akar-anatomi__legend {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.akar-anatomi__legend-item {
  padding: var(--space-2) var(--space-3);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface);
}

.akar-anatomi__legend-item--indeks {
  border-left-color: var(--color-purple);
}

.akar-anatomi__legend-item--radikan {
  border-left-color: var(--color-blue);
}

.akar-anatomi__legend-item--pangkat {
  border-left-color: var(--color-orange);
}

@media (max-width: 480px) {
  .akar-tiles {
    font-size: 1.3rem;
  }

  .akar-tile {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.15rem;
  }

  .akar-kv__layar {
    font-size: 1.6rem;
  }

  .akar-anatomi__model {
    font-size: 2.6rem;
  }

  .akar-tabel {
    font-size: 1rem;
  }
}

/* =========================================================================
   Seksi 46 — Operasi hitung bentuk akar: langkah operasi (.opakar-step*),
   isian hasil (.opakar-in, .opakar-isian), pecahan bertingkat
   (.opakar-frac*), rumus pada opsi strategi (.opakar-opt__rumus), dan
   tabel uji nilai (.uji-akar*).
   ========================================================================= */

.opakar-step {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.opakar-step--done {
  border-color: var(--color-success);
}

.opakar-step__label {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  line-height: 1.5;
}

.opakar-step__soal {
  margin: 0 0 var(--space-3);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.opakar-step__tanya {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.opakar-step .challenge-options {
  margin-bottom: var(--space-3);
}

.opakar-step .feedback-box {
  margin-top: var(--space-3);
}

.opakar-step__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.opakar-step__eq {
  font-size: 1.25rem;
  font-weight: 700;
}

.opakar-step__isian,
.opakar-isian {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.opakar-in {
  width: 4.2rem;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.opakar-op {
  padding: 0 var(--space-1);
}

.opakar-catatan {
  flex-basis: 100%;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.opakar-step__hasil {
  margin: var(--space-3) 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-success-strong);
  overflow-wrap: anywhere;
}

.opakar-step__pemimpin {
  display: inline-block;
  margin-top: var(--space-1);
  font-weight: 600;
}

.opakar-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.15em;
  line-height: 1.25;
}

.opakar-frac__atas {
  display: inline-flex;
  align-items: center;
  padding: 0 0.2em 0.1em;
  border-bottom: 0.09em solid currentColor;
}

.opakar-frac__bawah {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.2em 0;
}

.opakar-opt__rumus {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Tabel uji nilai */

.uji-akar {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

.uji-akar th,
.uji-akar td {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.uji-akar th {
  background: var(--color-blue-soft);
  font-size: 0.9rem;
}

.uji-akar__bentuk {
  font-weight: 700;
  white-space: nowrap;
}

.uji-akar__input {
  width: 4.5rem;
  min-height: 44px;
  text-align: center;
  font-weight: 700;
}

.uji-akar__input.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.uji-akar__nilai {
  color: var(--color-success-strong);
}

.uji-akar__sama {
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-ink-muted);
}

.uji-akar__sama.is-sama {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.uji-akar__sama.is-beda {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

@media (max-width: 480px) {
  .opakar-step {
    padding: var(--space-3);
  }

  .opakar-step__soal {
    font-size: 1.35rem;
  }

  .opakar-in {
    width: 3.4rem;
  }

  .uji-akar {
    font-size: 0.95rem;
  }

  .uji-akar__input {
    width: 3.6rem;
  }
}

/* =========================================================================
   Seksi 47 — Luas permukaan prisma (shared/engine.js seksi 47): jaring
   berukuran (.lpp-net, .lpp-keping, .lpp-ukur), lab bentang (.lpp-lab*),
   sabuk sisi tegak (.lpp-sabuk*), dan kartu isian berdiagnosa
   (.lpp-kartu*, .lpp-field*, .lpp-in, .lpp-satuan, .lpp-hint).
   Warna mengikuti seksi 31: alas & tutup oranye, sisi tegak biru, sisi
   yang diketuk ungu.
   ========================================================================= */

.lpp-net {
  max-width: 420px;
}

.lpp-keping {
  cursor: pointer;
  transition: fill 0.15s ease;
}

.lpp-keping:hover {
  fill: var(--color-purple-soft);
}

.lpp-keping:focus-visible {
  outline: none;
  stroke: var(--color-focus);
  stroke-width: 4;
}

.lpp-ukur {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.lpp-ukur--tinggi {
  fill: var(--color-blue-strong);
}

.lpp-lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lpp-lab__alas {
  margin: 0;
  text-align: center;
}

.lpp-lab__info {
  margin: 0;
  background: var(--color-primary-soft);
}

.lpp-lab__hitung {
  margin: var(--space-2) 0 0;
}

.lpp-stage {
  display: flex;
  justify-content: center;
}

.lpp-sabuk {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lpp-sabuk__svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.lpp-sabuk__keping {
  transition: transform 0.6s ease;
}

.lpp-sabuk__kurung line {
  stroke: var(--color-orange);
  stroke-width: 3;
}

.lpp-sabuk__kurung .lpp-ukur {
  fill: var(--color-orange-strong);
}

.lpp-sabuk__teks {
  margin: 0;
  text-align: center;
}

.lpp-isian {
  display: grid;
  gap: var(--space-4);
}

.lpp-kartu {
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.lpp-kartu.is-benar {
  border-color: var(--color-success);
}

.lpp-kartu__judul {
  margin: 0 0 var(--space-3);
}

.lpp-kartu__visual {
  margin-bottom: var(--space-3);
}

.lpp-kartu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lpp-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  min-width: 0;
}

.lpp-field.is-benar {
  background: var(--color-success-soft);
}

.lpp-field.is-salah {
  background: var(--color-error-soft);
}

.lpp-field--diberikan {
  background: var(--color-blue-soft);
}

.lpp-field__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.lpp-field__nilai {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.lpp-field__in {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lpp-in {
  width: 100%;
  min-height: 44px;
}

.lpp-satuan {
  font-weight: 600;
  white-space: nowrap;
}

.lpp-field__pesan {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-error-strong);
}

.lpp-hint {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.lpp-hint summary {
  cursor: pointer;
  font-weight: 700;
}

.lpp-hint ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .lpp-sabuk__keping,
  .lpp-keping {
    transition: none;
  }
}

/* =========================================================================
   Seksi 48 — Masalah kontekstual luas permukaan prisma (shared/engine.js
   seksi 48): nomor sisi pada jaring (.lpk-tanda), sisi terpilih
   (.is-dipilih), pemilih sisi bahan (.lpk-pilih, .lpk-chip*), tabel
   anggaran (.lpk-anggaran*), dan papan proposal (.lpk-proposal*).
   Ditambah gaya bersama modul luas permukaan prisma yang sebelumnya
   khas mpi-22.2: galeri kemasan (.lpp-galeri*), kartu data bergambar
   (.lpp-data-visual), dan kartu sajian penutup (.sajian-*).
   ========================================================================= */

.psm-net-piece.is-dipilih {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 3;
}

.lpk-tanda {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.lpk-pilih {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lpk-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

.lpk-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'no nama'
    'no ukur';
  column-gap: var(--space-2);
  align-items: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.lpk-chip:hover:not(:disabled) {
  border-color: var(--color-purple);
}

.lpk-chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.lpk-chip.is-on {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
}

.lpk-chip:disabled {
  cursor: default;
}

.lpk-chip__no {
  grid-area: no;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg);
  font-weight: 800;
}

.lpk-chip.is-on .lpk-chip__no {
  background: var(--color-purple);
  color: #fff;
}

.lpk-chip__nama {
  grid-area: nama;
  font-weight: 700;
}

.lpk-chip__ukur {
  grid-area: ukur;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.lpk-pilih.is-benar .lpk-chip.is-on {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.lpk-pilih.is-benar .lpk-chip.is-on .lpk-chip__no {
  background: var(--color-success);
}

.lpk-pilih.is-benar .psm-net-piece.is-dipilih {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.lpk-anggaran-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.lpk-anggaran {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.lpk-anggaran th,
.lpk-anggaran td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.lpk-anggaran thead th {
  background: var(--color-bg);
  font-size: 0.85rem;
}

.lpk-anggaran tbody th {
  font-weight: 600;
}

.lpk-anggaran__uang {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right !important;
  white-space: nowrap;
}

.lpk-anggaran tfoot th {
  text-align: right;
}

.lpk-anggaran__status.is-cukup th,
.lpk-anggaran__status.is-cukup td {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.lpk-anggaran__status.is-kurang th,
.lpk-anggaran__status.is-kurang td {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.lpk-proposal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 3px dashed var(--color-orange);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lpk-proposal__judul {
  margin: 0;
  font-family: var(--font-display);
  text-align: center;
}

.lpk-proposal__sub {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  text-align: center;
}

.lpk-proposal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.lpk-proposal__item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-orange-soft);
  min-width: 0;
}

.lpk-proposal__item h4 {
  margin: 0 0 var(--space-1);
}

.lpk-proposal__item p {
  margin: 0;
}

.lpk-proposal__penutup {
  margin: 0;
  font-style: italic;
  text-align: center;
}

@media (max-width: 480px) {
  .lpk-anggaran {
    font-size: 0.85rem;
  }

  .lpk-anggaran th,
  .lpk-anggaran td {
    padding: var(--space-1) var(--space-2);
  }

  .lpk-proposal {
    padding: var(--space-3) var(--space-2);
  }

  .lpk-proposal__item {
    padding: var(--space-2);
  }

  .lpk-anggaran thead th:nth-child(2),
  .lpk-anggaran tbody td:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lpk-chip {
    transition: none;
  }
}

.lpp-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.lpp-galeri__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
}

.lpp-galeri__item .psm-stage {
  width: 100%;
}

.lpp-galeri__item .psm-fold-svg {
  max-height: 150px;
}

.lpp-galeri__item figcaption {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  text-align: center;
}

.lpp-galeri__item figcaption span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-ink-muted);
}

.lpp-data-visual {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.lpp-data-visual .lpp-net {
  max-height: 200px;
}

.lpp-data-visual .dl-caption {
  margin: 0;
}

@media (max-width: 560px) {
  .lpp-data-visual {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sajian-trio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.sajian-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 140px;
  max-width: 220px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: 700;
  text-align: center;
}

.sajian-card--utama {
  background: var(--color-primary);
  color: #fff;
}

.sajian-card__ikon {
  font-size: 1.4rem;
}

/* =========================================================================
   Seksi 49 — Masalah kontekstual bilangan berpangkat bulat (shared/engine.js
   seksi 49): kartu surat/tiket klien (.surat-*, .orientasi-cerita; sebelumnya
   khas fase-d/mpi-22.3) dan tabel banding paket kapasitas (.mpk-tabel*).
   ========================================================================= */

.orientasi-cerita {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  line-height: 1.6;
}

.surat-head {
  margin: var(--space-5) 0 var(--space-3);
}

.surat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.surat-card {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-left: 6px solid var(--color-orange);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.surat-card__judul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.surat-card__ikon {
  font-size: 1.4rem;
}

.surat-card__list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 0.95rem;
  line-height: 1.5;
}

.surat-card__list li + li {
  margin-top: var(--space-1);
}

.mpk-tabel-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mpk-tabel {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.mpk-tabel caption {
  margin-bottom: var(--space-2);
  text-align: left;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.mpk-tabel th,
.mpk-tabel td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.mpk-tabel thead th {
  font-size: 0.85rem;
  background: var(--color-primary-soft);
}

.mpk-tabel__sub {
  display: block;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.mpk-tabel__baris--ok .mpk-tabel__syarat {
  color: var(--color-success-strong);
  font-weight: 700;
}

.mpk-tabel__baris--no .mpk-tabel__syarat {
  color: var(--color-error);
  font-weight: 700;
}

.mpk-tabel__baris.is-pilih {
  background: var(--color-success-soft);
}

.mpk-tabel__pilih {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-success);
  color: #fff;
  font-size: 0.75rem;
}

/* Bentuk soal rantai sifat (engine seksi 44: teksRantai), dipakai
   fase-d/mpi-12.2 dan fase-e/mpi-1.3. */
.rantai-soal {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .rantai-soal {
    font-size: 1.25rem;
  }
}

/* =========================================================================
   Koefisien korelasi & kesesuaian model linear (engine.js seksi 50):
   meteran r (.kor-meter), tabel langkah r (.kor-tabel), plot residu
   (.kor-rplot), penjelajah r (.kor-jelajah), lab pencilan (.kor-lab,
   .kor-chip). Tabel menggulir di dalam kotaknya sendiri (.aso-tabel-wrap)
   sehingga halaman tidak bergeser pada layar sempit.
   ========================================================================= */

.kor-meter {
  margin: var(--space-3) 0;
  min-width: 0;
}

.kor-meter__judul {
  margin: 0 0 var(--space-1);
  font-weight: 700;
}

.kor-meter__bar {
  position: relative;
  display: flex;
  height: 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kor-meter__zona {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.kor-meter__zona + .kor-meter__zona {
  border-left: 1px solid var(--color-surface);
}

.kor-meter__zona--kuat {
  background: #bcd3fb;
}

.kor-meter__zona--sedang {
  background: #d6e4fd;
}

.kor-meter__zona--lemah {
  background: #eef4ff;
}

.kor-meter__zona--nol {
  background: var(--color-bg-grid);
}

.kor-meter__zlabel {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}

.kor-meter__penanda {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--color-orange-strong);
  box-shadow: 0 0 0 2px var(--color-surface);
  transition: left 0.2s ease;
}

.kor-meter__skala {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.kor-meter__baca {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-strong);
}

@media (max-width: 480px) {
  .kor-meter__zlabel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kor-meter__penanda {
    transition: none;
  }
}

/* Plot residu */
.kor-rplot {
  margin: var(--space-3) auto;
}

.kor-nol {
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.kor-hubung {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
}

.kor-rdot {
  stroke: var(--color-surface);
  stroke-width: 1.5;
}

.kor-rdot--pos {
  fill: var(--color-success);
}

.kor-rdot--neg {
  fill: var(--color-error);
}

.kor-rdot--nol {
  fill: var(--color-ink-muted);
}

/* Penjelajah r & lab pencilan */
.kor-jelajah,
.kor-lab {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .kor-jelajah,
  .kor-lab {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

.kor-jelajah__panel,
.kor-lab__panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.kor-lab__baca {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kor-dot {
  cursor: pointer;
}

.kor-dot--pencilan {
  fill: var(--color-orange);
}

.kor-dot--mati {
  fill: var(--color-surface);
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.kor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kor-chip {
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-ink);
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
}

.kor-chip--pencilan {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.kor-chip.is-mati {
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border-style: dashed;
  text-decoration: line-through;
}

.kor-chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.kor-chip__xy {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* =========================================================================
   54. Volume prisma (.vpr-*) — lab tumpuk lapisan/kubus satuan, belah
   balok, gambar prisma isometrik. Dipakai fase-d/mpi-22.4.
   ========================================================================= */

.vpr-svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  max-height: 340px;
  margin: 0 auto;
  overflow: visible;
}

.vpr-stage {
  display: flex;
  justify-content: center;
}

.vpr-face {
  stroke: var(--color-blue-strong);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.vpr-face--tegak {
  fill: var(--color-blue-soft);
}

.vpr-face--tegak.vpr-face--kanan {
  fill: #c5d7ee;
}

.vpr-face--atas {
  fill: #eef4fb;
}

.vpr-lapis.is-genap .vpr-face--tegak {
  fill: #d3e1f2;
}

.vpr-lapis.is-genap .vpr-face--tegak.vpr-face--kanan {
  fill: #b8cde8;
}

.vpr-lapis.is-baru .vpr-face {
  stroke: var(--color-purple-strong);
}

.vpr-lapis.is-baru .vpr-face--atas {
  fill: var(--color-purple-soft);
}

.vpr-grid {
  stroke: var(--color-blue-strong);
  stroke-width: 0.8;
  stroke-opacity: 0.55;
}

.vpr-hantu .vpr-face {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

.vpr-padat .vpr-face--tegak {
  fill: var(--color-blue-soft);
}

.vpr-padat .vpr-face--atas {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange-strong);
}

.vpr-keping--b .vpr-face {
  stroke: var(--color-orange-strong);
}

.vpr-keping--b .vpr-face--tegak {
  fill: var(--color-orange-soft);
}

.vpr-keping--b .vpr-face--tegak.vpr-face--kanan {
  fill: #ecc7a6;
}

.vpr-keping--b .vpr-face--atas {
  fill: #fbeee2;
}

.vpr-ukur {
  font-size: 12px;
}

.vpr-lab,
.vpr-belah {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.vpr-lab__nama,
.vpr-belah__teks {
  margin: 0;
  text-align: center;
}

.vpr-info {
  background: var(--color-primary-soft);
}

.vpr-caption {
  margin: var(--space-2) 0 0;
  text-align: center;
}

.vpr-data-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.vpr-data-visual .vpr-svg {
  max-width: 200px;
}

.vpr-data-visual .dl-caption {
  margin: 0;
  text-align: center;
}

/* =========================================================================
   55. Masalah kontekstual volume prisma (.vpk-*) — prisma rebah dengan
   alas disorot, Lab Isi Air. Dipakai fase-d/mpi-22.5.
   ========================================================================= */

.vpk-face--alas {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange-strong);
}

.vpk-svg .vpr-face--atas {
  fill: #cfe6f7;
}

.vpk-air .vpr-face {
  stroke: #1f78b4;
  stroke-width: 1;
}

.vpk-air .vpr-face--tegak {
  fill: #8cc4ea;
}

.vpk-air .vpr-face--tegak.vpr-face--kanan {
  fill: #6fb0df;
}

.vpk-air .vpr-face--atas {
  fill: #c3e2f7;
}

.vpk-svg .vpr-ukur {
  font-size: 16px;
  font-weight: 700;
}

.vpk-air-info {
  line-height: 1.6;
}

.vpk-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.vpk-galeri__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.vpk-galeri__item .vpr-svg {
  max-width: 220px;
  max-height: 170px;
}

.vpk-galeri__item figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  text-align: center;
}

.vpk-galeri__item figcaption span {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.vpk-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.vpk-legenda__warna {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: var(--space-1);
  border: 1px solid var(--color-orange-strong);
  border-radius: 2px;
  background: var(--color-orange-soft);
  vertical-align: -0.1em;
}

.vpk-legenda__warna--air {
  border-color: #1f78b4;
  background: #cfe6f7;
}

/* =========================================================================
   57. Luas permukaan limas (engine.js seksi 57): garis tinggi segitiga
   sisi tegak pada jaring (.lpl-tinggi) dan susun sisi tegak kipas →
   jajargenjang/trapesium (.lpl-susun*, .lpl-segitiga*, .lpl-kurung). Lab
   bentang limas & kartu isian memakai kelas .lpp-* seksi 47.
   ========================================================================= */

.lpl-tinggi {
  stroke: var(--color-blue-strong);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

.lpl-susun {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lpl-susun__svg {
  display: block;
  width: 100%;
  max-width: 440px;
  max-height: 300px;
  height: auto;
  margin: 0 auto;
}

.lpl-segitiga {
  stroke: var(--color-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.lpl-segitiga--genap {
  fill: var(--color-blue-soft);
}

.lpl-segitiga--ganjil {
  fill: var(--color-purple-soft);
}

.lpl-kurung {
  stroke: var(--color-orange);
  stroke-width: 3;
  stroke-linecap: round;
}

.lpl-susun__ukur .lpp-ukur {
  fill: var(--color-orange-strong);
}

.lpl-susun__ukur .lpp-ukur--tinggi {
  fill: var(--color-blue-strong);
}

.lpl-susun__ukur .lpp-ukur,
.lpl-net-ukur .lpp-ukur {
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* Fokus dari kode (setelah mengetuk sisi) tidak memunculkan kotak outline;
   fokus keyboard tetap ditandai garis tepi tebal (.lpp-keping:focus-visible). */
.lpl-net .lpp-keping:focus:not(:focus-visible) {
  outline: none;
}

.lpl-susun__teks {
  margin: 0;
  text-align: center;
}

/* =========================================================================
   58. Masalah kontekstual luas permukaan limas (engine.js seksi 58): Lab
   Atap (.lmk-atap*: penampang atap dengan segitiga siku-siku a–t–tₛ,
   bacaan luas & lembar, syarat tinggi), gambar limas benda nyata
   (.lmk-gambar), dan pemilih sisi limas (.lmk-pilih; chip .lpk-chip*
   dari seksi 48).
   ========================================================================= */

.lmk-atap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lmk-atap__isi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.lmk-atap__svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}

.lmk-atap__tiang {
  fill: var(--color-ink-muted);
}

.lmk-atap__atap {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 2;
  stroke-linejoin: round;
}

.lmk-atap__siku {
  fill: var(--color-blue-soft);
  fill-opacity: 0.7;
}

.lmk-atap__t {
  stroke: var(--color-error);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
}

.lmk-atap__ts {
  stroke: var(--color-success);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.lmk-atap__kotak {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.lmk-atap__label text {
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-ink);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.lmk-atap__label .lmk-atap__label-ts {
  fill: var(--color-success-strong);
}

.lmk-atap__baca {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.lmk-atap__baca > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.lmk-atap__baca dt {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.lmk-atap__baca dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lmk-atap__naik,
.lmk-atap__syarat {
  margin: var(--space-2) 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.lmk-atap__syarat {
  font-weight: 700;
}

.lmk-atap__syarat.is-ok {
  color: var(--color-success-strong);
}

.lmk-atap__syarat.is-tidak {
  color: var(--color-error-strong);
}

.lmk-gambar .psm-svg {
  max-width: 220px;
  max-height: 200px;
}

.lpp-galeri__item .lmk-gambar .psm-svg {
  max-height: 150px;
}

.lmk-pilih .lpl-net {
  max-width: 320px;
}

@media (max-width: 640px) {
  .lmk-atap__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   59. Volume limas (engine.js seksi 59, .vlm-*) — gambar limas isometrik,
   Lab Tuang (wadah limas & prisma, pasir), Lab Belah Kubus (enam limas).
   Dipakai fase-d/mpi-22.9. Memakai ulang .vpr-* seksi 54.
   ========================================================================= */

.vlm-svg {
  max-width: 380px;
}

.vlm-rusuk-belakang {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.vlm-wadah .vpr-face {
  fill: var(--color-blue-soft);
  fill-opacity: 0.45;
}

.vlm-wadah.is-isi .vpr-face,
.vlm-pasir .vpr-face {
  fill: #e9c98f;
  fill-opacity: 1;
  stroke: var(--color-orange-strong);
}

.vlm-wadah.is-isi .vpr-face--kanan,
.vlm-pasir .vpr-face--tegak.vpr-face--kanan {
  fill: #d9b273;
}

.vlm-pasir .vpr-face--atas {
  fill: #f3dcae;
}

.vlm-pasir.is-penuh .vpr-face {
  stroke: var(--color-success-strong);
}

.vlm-prisma .vpr-face {
  stroke: var(--color-blue-strong);
  stroke-dasharray: none;
}

.vlm-tanda {
  font-size: 11px;
  fill: var(--color-ink-muted);
}

.vlm-nama {
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-ink);
}

.vlm-garis-tinggi {
  stroke: var(--color-error);
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
}

.vlm-padat .vpr-face--tegak {
  fill: var(--color-blue-soft);
}

.vlm-padat .vpr-face--tegak.vpr-face--kanan {
  fill: #c5d7ee;
}

.vlm-keping .vpr-face {
  stroke-width: 1.1;
}

.vlm-keping--z .vpr-face {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange-strong);
}

.vlm-keping--z .vpr-face--kanan {
  fill: #ecc7a6;
}

.vlm-keping--x .vpr-face {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue-strong);
}

.vlm-keping--x .vpr-face--kanan {
  fill: #c5d7ee;
}

.vlm-keping--y .vpr-face {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple-strong);
}

.vlm-keping--y .vpr-face--kanan {
  fill: #dcc6ec;
}

.vlm-belah__gambar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.is-pisah .vlm-belah__gambar {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.vlm-belah__satu {
  margin: 0;
}

.vlm-belah__satu figcaption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-ink-muted);
}

.vlm-belah__satu .vpr-svg {
  max-width: 200px;
}

@media (max-width: 560px) {
  .is-pisah .vlm-belah__gambar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vlm-tinggi-label {
  fill: var(--color-error);
  font-weight: 700;
}

/* =========================================================================
   60. Masalah kontekstual gabungan prisma & limas (engine.js seksi 60,
   .gbg-*) — gambar isometrik bangun gabungan (bagian prisma biru, bagian
   limas oranye, bidang sambung ungu), Lab Gabungan, dan pemilih sisi
   bangun gabungan (chip .lpk-chip*). Dipakai fase-d/mpi-22.10.
   ========================================================================= */

.gbg-svg {
  max-width: 320px;
  max-height: 320px;
}

.gbg-face {
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.gbg-face--prisma {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue-strong);
}

.gbg-face--prisma.gbg-face--kanan {
  fill: #c5d7ee;
}

.gbg-face--prisma.gbg-face--datar {
  fill: #eef4fb;
}

.gbg-face--limas {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange-strong);
}

.gbg-face--limas.gbg-face--kanan {
  fill: #ecc7a6;
}

.gbg-face.gbg-sambung {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple-strong);
  stroke-width: 1.6;
}

.gbg-sambung--garis {
  fill: none;
  stroke: var(--color-purple-strong);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.gbg-garis-t {
  stroke: var(--color-error);
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
}

.gbg-garis-ts {
  stroke: var(--color-success-strong);
  stroke-width: 1.8;
}

.gbg-ukur {
  font-size: 12px;
}

.gbg-ukur.gbg-label-t {
  fill: var(--color-error);
  font-weight: 700;
}

.gbg-ukur.gbg-label-ts {
  fill: var(--color-success-strong);
  font-weight: 700;
}

.gbg-lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.gbg-lab__isi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.gbg-lab__gambar {
  min-width: 0;
}

.gbg-lab__gambar .gbg-svg {
  max-width: 100%;
  max-height: 340px;
}

.gbg-lab__nama {
  margin: 0 0 var(--space-2);
}

.gbg-lab__syarat {
  margin: var(--space-2) 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

.gbg-lab__syarat.is-ok {
  color: var(--color-success-strong);
}

.gbg-lab__syarat.is-tidak {
  color: var(--color-error-strong);
}

.gbg-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.gbg-legenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.gbg-legenda__warna {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--color-blue-strong);
  background: var(--color-blue-soft);
}

.gbg-legenda__warna--limas {
  border-color: var(--color-orange-strong);
  background: var(--color-orange-soft);
}

.gbg-legenda__warna--sambung {
  border-color: var(--color-purple-strong);
  background: var(--color-purple-soft);
}

.gbg-pilih__gambar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.gbg-pilih__gambar .gbg-svg {
  max-width: 240px;
  max-height: 240px;
}

.gbg-pilih__grup + .gbg-pilih__grup {
  margin-top: var(--space-3);
}

.gbg-pilih__judul {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.gbg-chip--prisma:not(.is-on) .lpk-chip__no {
  background: var(--color-blue-soft);
}

.gbg-chip--limas:not(.is-on) .lpk-chip__no {
  background: var(--color-orange-soft);
}

.gbg-chip--sambung:not(.is-on) .lpk-chip__no {
  background: var(--color-purple-soft);
}

.gbg-chip--sambung {
  border-style: dashed;
}

.gbg-data-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.gbg-data-visual .gbg-svg {
  max-width: 230px;
}

.gbg-data-visual .dl-caption {
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .gbg-lab__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   61. Cooperative Learning tipe Think-Pair-Share (engine.js seksi 61,
   .tps-*) — bilah fase Pikir/Berpasangan/Berbagi, pertanyaan TPS
   (pikir → tanya pasangan → sepakati), dan kartu juru bicara.
   ========================================================================= */

.tps-banner {
  margin-bottom: var(--space-4);
}

.tps-banner__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tps-banner__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  text-align: center;
  opacity: 0.75;
}

.tps-banner__step--aktif {
  opacity: 1;
  color: var(--color-ink);
}

.tps-banner__step--pikir.tps-banner__step--aktif {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.tps-banner__step--pasang.tps-banner__step--aktif {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
}

.tps-banner__step--berbagi.tps-banner__step--aktif {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
}

.tps-banner__ikon {
  font-size: 1.4rem;
  line-height: 1;
}

.tps-banner__nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.tps-banner__tugas {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.tps-banner__pesan {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

.tps-q {
  border-left: 4px solid var(--color-purple);
  padding-left: var(--space-3);
}

.tps-q--selesai {
  border-left-color: var(--color-success);
}

.tps-q__fase-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.tps-q__fase {
  padding: 2px var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.tps-q__fase--aktif {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-weight: 700;
}

.tps-q__fase--selesai {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.tps-q__fase--selesai::before {
  content: '✓ ';
}

.tps-q__instruksi {
  margin: var(--space-2) 0;
  font-size: 0.92rem;
}

.tps-q__kunci {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.92rem;
}

.tps-share {
  padding: var(--space-4);
  border: 2px dashed var(--color-orange);
  border-radius: var(--radius-md);
  background: var(--color-orange-soft);
}

.tps-share--sudah {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.tps-share__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-orange-strong);
}

.tps-share__nama {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tps-share__sub {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
}

.tps-share__pemantik {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.tps-share__pemantik li + li {
  margin-top: var(--space-1);
}

.tps-share__done {
  margin: 0;
  font-weight: 700;
  color: var(--color-success-strong);
}

@media (max-width: 480px) {
  .tps-banner__tugas {
    display: none;
  }
}

/* =========================================================================
   Lab Pita operasi pecahan (engine seksi 62 — buildPitaOperasi)
   ========================================================================= */

.pita-op {
  display: grid;
  gap: var(--space-3);
}

.pita-op__tanya {
  margin: 0;
  font-weight: 600;
}

.pita-op__picks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pita-op__pick {
  min-width: 52px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.pita-op__pick:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.pita-op__pick:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.pita-op__pick:disabled {
  cursor: default;
}

.pita-op__pick.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.pita-op__pick.is-incorrect {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.pita-op__fig {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.pita-op__row {
  display: grid;
  grid-template-columns: minmax(84px, 120px) 1fr;
  align-items: center;
  gap: var(--space-2);
}

.pita-op__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.pita-op__row--hasil {
  padding-top: var(--space-2);
  border-top: 2px dashed var(--color-border-strong);
}

.pita-op__bar {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.pita-op__unit {
  display: grid;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
  height: 34px;
  padding: 3px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.pita-op__cell {
  position: relative;
  border-radius: 2px;
  background: var(--color-bg-grid);
}

.pita-op__cell.is-a {
  background: var(--color-blue);
}

.pita-op__cell.is-b {
  background: var(--color-orange);
}

/* Potongan yang hanya terarsir sebagian: tanda "tidak pas". */
.pita-op__cell.is-part {
  background: linear-gradient(
    90deg,
    var(--pita-fill, var(--color-blue)) var(--fill, 50%),
    var(--color-warning-soft) var(--fill, 50%)
  );
  outline: 2px dashed var(--color-warning);
  outline-offset: -2px;
}

.pita-op__cell.is-b.is-part {
  --pita-fill: var(--color-orange);
}

/* Potongan yang diambil pada pengurangan. */
.pita-op__cell.is-taken {
  background: repeating-linear-gradient(
    45deg,
    var(--color-blue-soft),
    var(--color-blue-soft) 4px,
    var(--color-surface) 4px,
    var(--color-surface) 8px
  );
  outline: 2px solid var(--color-blue);
  outline-offset: -2px;
}

@media (max-width: 480px) {
  .pita-op__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .pita-op__unit {
    height: 28px;
  }
}

/* =========================================================================
   Pita kelompok & model luas perkalian/pembagian pecahan
   (engine seksi 63 — buildPitaKelompok, buildLuasPecahan)
   ========================================================================= */

.pita-klp {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.pita-klp__row {
  display: grid;
  grid-template-columns: minmax(84px, 120px) 1fr;
  align-items: center;
  gap: var(--space-2);
}

.pita-klp__row:not(:has(.pita-klp__label)) {
  grid-template-columns: 1fr;
}

.pita-klp__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.pita-klp__bar {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.pita-klp__unit {
  display: grid;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
  height: 34px;
  padding: 3px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.pita-klp__cell {
  border-radius: 2px;
  background: var(--color-bg-grid);
}

.pita-klp__cell.is-g0 {
  background: var(--color-blue);
}

.pita-klp__cell.is-g1 {
  background: var(--color-orange);
}

/* Sisa yang tidak cukup satu kelompok penuh. */
.pita-klp__cell.is-sisa {
  background: repeating-linear-gradient(
    45deg,
    var(--color-purple-soft),
    var(--color-purple-soft) 4px,
    var(--color-surface) 4px,
    var(--color-surface) 8px
  );
  outline: 2px dashed var(--color-purple);
  outline-offset: -2px;
}

/* Awal tiap kelompok: garis pembatas tebal di kiri. */
.pita-klp__cell.is-awal {
  box-shadow: inset 3px 0 0 var(--color-ink);
}

.pita-klp__cap {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.luas-pk {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: 0;
}

.luas-pk__grid {
  display: grid;
  gap: 2px;
  width: min(100%, 260px);
  aspect-ratio: 1 / 1;
  padding: 3px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.luas-pk__cell {
  border-radius: 2px;
  background: var(--color-bg-grid);
}

.luas-pk__cell.is-b {
  background: var(--color-orange-soft);
  outline: 2px solid var(--color-orange);
  outline-offset: -2px;
}

.luas-pk__cell.is-a {
  background: var(--color-blue-soft);
}

/* Irisan: terarsir dua kali = hasil kali. */
.luas-pk__cell.is-ab {
  background: var(--color-purple);
}

.luas-pk__cap {
  max-width: 34ch;
  font-size: 0.88rem;
  text-align: center;
  color: var(--color-ink-muted);
}

@media (max-width: 480px) {
  .pita-klp__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .pita-klp__unit {
    height: 28px;
  }
}

/* =========================================================================
   64. Operasi hitung desimal & konversi pecahan–desimal (engine.js seksi 64,
   fase-d/mpi-2.5): Petak Seratus (.petak100), pengatur arsir
   (.petak100-ctrl), Papan Bersusun (.bersusun-dec), Gelas Takar
   (.gelas-takar), dan isian desimal (.dec-step__*).
   ========================================================================= */

/* Isian desimal + tombol Periksa boleh turun baris di layar sempit. */
.dec-step__row {
  flex-wrap: wrap;
  align-items: center;
}

.dec-step__input {
  flex: 0 1 9rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
}

.petak100 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) auto;
}

.petak100__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: min(100%, 260px);
  aspect-ratio: 1;
  padding: 3px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* 1 petak = 0,01; 1 baris (10 petak) = 0,1. */
.petak100__sel {
  border-radius: 2px;
  background: var(--color-bg-grid);
}

.petak100__sel.is-on {
  background: var(--color-blue);
}

.petak100--luas .petak100__sel.is-a {
  background: var(--color-blue-soft);
}

.petak100--luas .petak100__sel.is-b {
  background: var(--color-orange-soft);
  outline: 2px solid var(--color-orange);
  outline-offset: -2px;
}

/* Irisan: terarsir dua kali = hasil kali. */
.petak100--luas .petak100__sel.is-both {
  background: var(--color-purple);
}

.petak100__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  max-width: 36ch;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-ink-muted);
}

.petak100__cap strong {
  flex-basis: 100%;
  color: var(--color-ink);
}

.petak100__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.petak100__key::before {
  content: '';
  width: 0.9em;
  height: 0.9em;
  border-radius: 2px;
}

.petak100__key--a::before {
  background: var(--color-blue-soft);
  border: 1px solid var(--color-blue);
}

.petak100__key--b::before {
  background: var(--color-orange-soft);
  border: 2px solid var(--color-orange);
}

.petak100-ctrl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.petak100-ctrl__btn {
  min-width: 48px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.petak100-ctrl__out {
  min-width: 6.5em;
  font-weight: 700;
  text-align: center;
}

/* Papan Bersusun: setiap angka satu kolom; koma membentuk kolom sendiri. */
.bersusun-dec {
  display: inline-grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Warna benar/keliru hanya setelah murid menjawab (opts.tandai). */
.bersusun-dec--benar {
  border-color: var(--color-success);
}

.bersusun-dec--salah {
  border-color: var(--color-error);
  border-style: dashed;
}

.bersusun-dec__row {
  display: grid;
  grid-template-columns: 1.2em repeat(var(--bd-cols, 4), 0.9em);
  justify-items: center;
}

.bersusun-dec__row--hasil {
  padding-top: 2px;
  border-top: 2px solid var(--color-ink);
  color: var(--color-success-strong);
}

.bersusun-dec__op {
  color: var(--color-ink-muted);
}

.bersusun-dec__koma {
  color: var(--color-orange-strong);
}

.bersusun-dec__nol {
  color: var(--color-purple);
  font-style: italic;
}

/* Gelas Takar: botol dibagi menjadi gelas-gelas berisi `takaran`. */
.gelas-takar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.gelas-takar__botol {
  display: flex;
  gap: 3px;
  min-height: 56px;
  padding: 4px;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md) var(--radius-md) 18px 18px;
  background: var(--color-surface);
}

.gelas-takar__isi,
.gelas-takar__sisa {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 4px;
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}

.gelas-takar__isi.is-dituang {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  outline: 2px solid var(--color-success);
  outline-offset: -2px;
}

.gelas-takar__no {
  font-size: 1rem;
}

.gelas-takar__sisa {
  background: var(--color-bg-grid);
  color: var(--color-ink-muted);
}

.gelas-takar__cap {
  font-weight: 700;
  text-align: center;
}

/* =========================================================================
   65. Pembulatan & penaksiran untuk menilai kewajaran jawaban (engine.js
   seksi 65, fase-d/mpi-2.6): garis bilangan pembulatan (.bulat-garis),
   meter kewajaran (.wajar-meter), dan tabel data taksiran (.taksir-tabel).
   ========================================================================= */

.bulat-garis {
  margin: var(--space-3) 0;
}

.bulat-garis__svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.bulat-garis__zona--bawah {
  fill: var(--color-blue-soft);
}

.bulat-garis__zona--atas {
  fill: var(--color-orange-soft);
}

.bulat-garis__sumbu {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.bulat-garis__ruas {
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.bulat-garis__ujung {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.bulat-garis__tengah {
  stroke: var(--color-purple);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.bulat-garis__titik {
  fill: var(--color-error);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.bulat-garis__hasil path {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2.5;
}

.bulat-garis__hasil polygon {
  fill: var(--color-success);
}

.bulat-garis__hasil circle {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3;
}

.bulat-garis__label {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.bulat-garis__label--v {
  fill: var(--color-error-strong);
}

.bulat-garis__label--tengah {
  fill: var(--color-purple-strong);
  font-size: 11px;
}

.bulat-garis__cap {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Meter kewajaran: zona hijau di sekitar taksiran. */
.wajar-meter {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.wajar-meter--ya {
  border-color: var(--color-success);
}

.wajar-meter--tidak {
  border-color: var(--color-error);
}

.wajar-meter__track {
  position: relative;
  height: 14px;
  margin: 30px 12px;
  border-radius: 999px;
  background: var(--color-bg-grid);
}

.wajar-meter__zona {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--color-success-soft);
  outline: 1px solid var(--color-success);
}

.wajar-meter__tanda {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.wajar-meter__tanda > span {
  position: absolute;
  left: 50%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.wajar-meter__tanda--taksir {
  background: var(--color-blue);
}

.wajar-meter__tanda--taksir > span {
  bottom: 18px;
  color: var(--color-blue-strong);
}

.wajar-meter__tanda--jawab {
  border: 2px solid var(--color-surface);
  background: var(--color-error);
}

.wajar-meter--ya .wajar-meter__tanda--jawab {
  background: var(--color-success);
}

.wajar-meter__tanda--jawab > span {
  top: 18px;
  color: var(--color-ink);
}

.wajar-meter__cap {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.wajar-meter__vonis {
  font-weight: 700;
  color: var(--color-error-strong);
}

.wajar-meter--ya .wajar-meter__vonis {
  color: var(--color-success-strong);
}

/* Tabel data taksiran. */
.taksir-tabel td {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.taksir-tabel__arah--lebih {
  color: var(--color-orange-strong);
  font-weight: 700;
}

.taksir-tabel__arah--kurang {
  color: var(--color-blue-strong);
  font-weight: 700;
}

.taksir-tabel__arah--sama {
  color: var(--color-success-strong);
  font-weight: 700;
}

.wajar-meter__tanda.is-kiri > span {
  left: -4px;
  transform: none;
}

.wajar-meter__tanda.is-kanan > span {
  right: -4px;
  left: auto;
  transform: none;
}

/* =========================================================================
   66. Literasi finansial: diskon, untung–rugi & anggaran (engine.js
   seksi 66, fase-d/mpi-2.7): langkah isian rupiah/persen (.fin-step),
   struk belanja (.struk), stepper nilai (.fin-stepper), Lab Diskon
   (.lab-diskon), Timbangan Untung–Rugi (.timbang), dan Papan Anggaran
   (.papan-anggaran).
   ========================================================================= */

.fin-step__row {
  flex-wrap: wrap;
  align-items: center;
}

.fin-step__input {
  flex: 0 1 10rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 1.1rem;
}

.fin-jawab {
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

/* Struk belanja bergaya kertas kasir. */
.struk {
  max-width: 340px;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 0 var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--color-ink);
}

.struk__toko {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px dashed var(--color-border-strong);
  text-align: center;
  font-weight: 700;
}

.struk__tabel {
  width: 100%;
  border-collapse: collapse;
}

.struk__tabel th,
.struk__tabel td {
  padding: 3px 0;
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}

.struk__tabel td {
  text-align: right;
  white-space: nowrap;
  padding-left: var(--space-2);
}

.struk__qty {
  display: block;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.struk__garis th,
.struk__garis td {
  border-top: 1px dashed var(--color-border-strong);
  padding-top: var(--space-2);
}

.struk__promo th,
.struk__promo td {
  color: var(--color-success-strong);
}

.struk__total th,
.struk__total td {
  border-top: 2px dashed var(--color-border-strong);
  padding-top: var(--space-2);
  font-size: 1rem;
  font-weight: 700;
}

.struk__catatan {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Stepper nilai bebas (Rp, %, banyak barang). */
.fin-stepper__val {
  min-width: 7.5ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* Lab Diskon. */
.lab-diskon,
.timbang,
.papan-anggaran {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg);
}

.lab-diskon__kontrol,
.timbang__kontrol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}

.lab-diskon__barang {
  margin: 0 0 var(--space-2);
}

.lab-diskon__bar,
.papan-anggaran__bar {
  display: flex;
  width: 100%;
  height: 32px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
}

.lab-diskon__seg,
.papan-anggaran__seg {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

.lab-diskon__seg--akhir,
.lab-diskon__kunci--akhir {
  background: var(--color-primary);
}

.lab-diskon__seg--p1,
.lab-diskon__kunci--p1 {
  background: var(--color-orange);
}

.lab-diskon__seg--p2,
.lab-diskon__kunci--p2 {
  background: repeating-linear-gradient(
    45deg,
    var(--color-orange-soft),
    var(--color-orange-soft) 6px,
    var(--color-orange) 6px,
    var(--color-orange) 9px
  );
}

.lab-diskon__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.lab-diskon__legenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lab-diskon__kunci {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.lab-diskon__hasil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.lab-diskon__hasil > div {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lab-diskon__hasil dt {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.lab-diskon__hasil dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
}

.lab-diskon__akhir {
  border-color: var(--color-primary) !important;
}

.lab-diskon__setara {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

/* Timbangan Untung–Rugi. */
.timbang__alat {
  position: relative;
  max-width: 460px;
  height: 120px;
  margin: 0 auto var(--space-3);
}

.timbang__lengan {
  position: absolute;
  top: 30px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 6px solid var(--color-ink-muted);
  border-radius: 3px;
  transform-origin: 50% 0;
  transition: transform 0.35s ease;
}

.timbang__piring {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 48%;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.timbang__piring strong {
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.timbang__piring--modal {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.timbang__piring--jual {
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.timbang__tiang {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 50%;
  width: 8px;
  margin-left: -4px;
  background: var(--color-border-strong);
  border-radius: 4px;
}

.timbang__hasil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  font-size: 0.92rem;
}

.timbang__status {
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.timbang--untung .timbang__status {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.timbang--rugi .timbang__status {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

/* Papan Anggaran. */
.papan-anggaran__masuk {
  margin: 0 0 var(--space-3);
  text-align: center;
}

.papan-anggaran__pos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.papan-anggaran__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.papan-anggaran__item--kebutuhan {
  border-top-color: var(--color-blue);
}

.papan-anggaran__item--keinginan {
  border-top-color: var(--color-purple);
}

.papan-anggaran__item--tabungan {
  border-top-color: var(--color-success);
}

.papan-anggaran__jenis {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.papan-anggaran__persen {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.papan-anggaran__seg--kebutuhan {
  background: var(--color-blue);
}

.papan-anggaran__seg--keinginan {
  background: var(--color-purple);
}

.papan-anggaran__seg--tabungan {
  background: var(--color-success);
}

.papan-anggaran__seg--lain {
  background: var(--color-orange);
}

.papan-anggaran__seg--sisa {
  background: repeating-linear-gradient(
    45deg,
    var(--color-surface),
    var(--color-surface) 6px,
    var(--color-bg-grid) 6px,
    var(--color-bg-grid) 12px
  );
}

.papan-anggaran__ringkas {
  margin: var(--space-2) 0;
  text-align: center;
}

.papan-anggaran__ringkas.is-defisit {
  color: var(--color-error-strong);
  font-weight: 700;
}

.papan-anggaran__syarat {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.9rem;
}

.papan-anggaran__syarat .is-ok {
  color: var(--color-success-strong);
}

.papan-anggaran__syarat .is-belum {
  color: var(--color-ink);
}

@media (max-width: 480px) {
  .lab-diskon,
  .timbang,
  .papan-anggaran {
    padding: var(--space-3);
  }

  .timbang__piring {
    padding: var(--space-1) var(--space-2);
    font-size: 0.72rem;
  }

  .timbang__piring strong {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-diskon__seg,
  .papan-anggaran__seg,
  .timbang__lengan {
    transition: none;
  }
}

/* =========================================================================
   67. Rasio & rasio ekuivalen (engine.js seksi 67, fase-d/mpi-3.1): gelas
   campuran berwarna (.gelas-rasio), ikon benda (.ikon-rasio), diagram pita
   (.pita-rasio), tabel rasio (.tabel-rasio), bukti ekuivalen (.cek-setara),
   dan lab racik (.pencampur).
   ========================================================================= */

.gelas-rasio {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.gelas-rasio__judul {
  font-weight: 700;
  font-size: 0.9rem;
}

.gelas-rasio__svg {
  width: 72px;
  height: 90px;
  color: var(--color-ink);
}

.gelas-rasio__ket {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.gelas-rasio__meter {
  width: 100%;
  max-width: 160px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-bg-grid);
  overflow: hidden;
}

.gelas-rasio__meter span {
  display: block;
  height: 100%;
}

.gelas-rasio__kadar {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.ikon-rasio {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.ikon-rasio__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ikon-rasio__isi {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 1.6rem;
  line-height: 1.2;
}

.ikon-rasio__label {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.pita-rasio {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.pita-rasio__baris {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.pita-rasio__nama {
  font-size: 0.85rem;
  font-weight: 700;
}

.pita-rasio__isi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pita-rasio__grup {
  display: inline-flex;
  padding: 2px;
  border: 2px dashed transparent;
  border-radius: var(--radius-sm);
}

.pita-rasio--grup .pita-rasio__grup {
  border-color: var(--color-border-strong);
}

.pita-rasio__sel {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-surface);
  border-radius: 3px;
}

.pita-rasio__baris--a .pita-rasio__sel {
  background: #b0174a;
}

.pita-rasio__baris--b .pita-rasio__sel {
  background: #8cc4e8;
}

.pita-rasio__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tabel-rasio caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--space-2);
}

.tabel-rasio .is-setara td:last-child {
  color: var(--color-success-strong);
  font-weight: 700;
}

.tabel-rasio .is-beda td:last-child {
  color: var(--color-error-strong);
  font-weight: 700;
}

.cek-setara {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-border-strong);
  background: var(--color-bg);
  font-size: 0.9rem;
}

.cek-setara.is-setara {
  border-left-color: var(--color-success);
}

.cek-setara.is-beda {
  border-left-color: var(--color-error);
}

.cek-setara__baris {
  margin: 0 0 var(--space-1);
}

.cek-setara__label {
  display: inline-block;
  min-width: 11em;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.cek-setara__vonis {
  margin: 0;
  font-weight: 700;
}

.pencampur {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.pencampur__gelas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pencampur__vonis {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.pencampur__vonis--sama {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.pencampur__vonis--lebihPekat,
.pencampur__vonis--lebihEncer {
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.pencampur__tombol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pencampur__aksi {
  min-height: 44px;
}

@media (max-width: 480px) {
  .cek-setara__label {
    display: block;
    min-width: 0;
  }

  .pita-rasio__sel {
    width: 16px;
    height: 16px;
  }

  .pencampur__gelas {
    gap: var(--space-2);
  }

  .pencampur__aksi {
    flex: 1 1 calc(50% - var(--space-2));
  }
}

/* =========================================================================
   68. Rasio dengan konversi satuan (engine.js seksi 68, fase-d/mpi-3.1 &
   mpi-3.2): isian rasio bertombol sisip ":" (.rasio-input, .rasio-sisip)
   dan Lab Samakan Satuan (.lab-satuan).
   ========================================================================= */

.rasio-input {
  min-width: 8em;
}

.rasio-sisip {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 700;
}

.lab-satuan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lab-satuan__asli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.lab-satuan__kartu {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lab-satuan__kartu span {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.lab-satuan__kartu strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.lab-satuan__tombol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-satuan__aksi {
  min-height: 44px;
}

.lab-satuan__hasil {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lab-satuan__baris {
  display: grid;
  grid-template-columns: minmax(7em, auto) 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.lab-satuan__nama {
  font-weight: 600;
}

.lab-satuan__batang {
  display: block;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-grid);
  overflow: hidden;
}

.lab-satuan__batang span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--radius-sm);
}

.lab-satuan__baris--a .lab-satuan__batang span {
  background: var(--color-blue);
}

.lab-satuan__baris--b .lab-satuan__batang span {
  background: var(--color-orange);
}

.lab-satuan__nilai {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.lab-satuan__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  line-height: 1.8;
}

.lab-satuan__label {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary-strong);
}

.lab-satuan__op {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.lab-satuan__suku {
  white-space: nowrap;
}

.lab-satuan__akhir {
  margin: 0;
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  .lab-satuan__baris {
    grid-template-columns: 1fr auto;
  }

  .lab-satuan__batang {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lab-satuan__aksi {
    flex: 1 1 calc(50% - var(--space-2));
  }
}

/* =========================================================================
   69. Skala pada peta & denah (engine.js seksi 69, fase-d/mpi-3.3):
   Lab Peta berpenggaris (.peta-skala), batang skala (.batang-skala),
   Pembanding Skala (.banding-skala), dan Lab Denah (.denah-skala).
   ========================================================================= */

.peta-skala,
.banding-skala,
.denah-skala {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.peta-skala__kanvas,
.banding-skala__kanvas,
.denah-skala__kanvas {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.peta-skala__kanvas svg,
.banding-skala__kanvas svg,
.denah-skala__kanvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.peta-skala__kanvas,
.denah-skala__kanvas {
  max-width: 640px;
}

.peta-skala__latar {
  fill: #f1f6ec;
}

.peta-skala__petak line,
.denah-skala__petak line {
  stroke: var(--color-border);
  stroke-width: 1;
}

.peta-skala__jalan {
  stroke: #c9b48a;
  stroke-width: 9;
  stroke-linecap: round;
}

.peta-skala__jalan.is-sorot {
  stroke: var(--color-orange);
}

.peta-skala__jalan.is-aktif {
  stroke: var(--color-primary);
}

.peta-skala__tempat circle {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 2;
}

.peta-skala__ikon {
  font-size: 16px;
}

.peta-skala__nama {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-ink);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.peta-skala__penggaris line {
  stroke: var(--color-warning-strong);
  stroke-width: 2;
}

.peta-skala__penggaris .peta-skala__penggaris-dasar {
  stroke-width: 3;
}

.peta-skala__ukur {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  fill: var(--color-warning-strong);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.peta-skala__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: 0.88rem;
}

.peta-skala__skala {
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-weight: 700;
}

.peta-skala__petak-info {
  color: var(--color-ink-muted);
}

.peta-skala__tombol,
.banding-skala__tombol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.peta-skala__aksi,
.banding-skala__aksi {
  min-height: 44px;
}

.peta-skala__status,
.banding-skala__status,
.denah-skala__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  line-height: 1.7;
}

.batang-skala {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.batang-skala__ruas {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  stroke-width: 1;
}

.batang-skala__ruas--terang {
  fill: var(--color-surface);
}

.batang-skala__teks {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--color-ink);
}

.banding-skala__info {
  margin: 0;
}

.banding-skala__kanvas {
  max-width: 420px;
}

.banding-skala__kertas {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.banding-skala__gambar {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
  stroke-width: 2;
}

.banding-skala__gambar.is-luber {
  fill: var(--color-error-soft);
  stroke: var(--color-error);
}

.denah-skala__kontrol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.denah-skala__ruang {
  fill: #fbf8f1;
  stroke: var(--color-ink);
  stroke-width: 3;
}

.denah-skala__benda {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
  stroke-width: 2;
}

.denah-skala.is-pas .denah-skala__benda {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.denah-skala.is-pas .denah-skala__status {
  background: var(--color-success-soft);
}

.denah-skala__label {
  display: inline-block;
  margin-right: var(--space-1);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary-strong);
}

@media (max-width: 480px) {
  .peta-skala__aksi,
  .banding-skala__aksi {
    flex: 1 1 calc(50% - var(--space-2));
  }

  /* Label peta tetap terbaca: kanvas digulir di dalam panel. */
  .peta-skala__kanvas svg {
    min-width: 460px;
  }
}

/* -------------------------------------------------------------------------
   Perbandingan senilai & berbalik nilai (engine seksi 70)
   Lab Proporsi, tabel bukti hasil bagi & hasil kali, grafik titik,
   batang senilai, dan persegi berbalik nilai.
   ------------------------------------------------------------------------- */

.lab-proporsi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-proporsi__kontrol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.lab-proporsi__status {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.lab-proporsi__coba {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.lab-proporsi__coba.is-cukup {
  color: var(--color-success-strong);
}

.lab-proporsi__data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.tabel-proporsi-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.tabel-proporsi {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.tabel-proporsi caption {
  margin-bottom: var(--space-1);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-ink-muted);
}

.tabel-proporsi td,
.tabel-proporsi th {
  text-align: center;
}

.tabel-proporsi tr.is-aktif td {
  background: var(--color-primary-soft);
  font-weight: 700;
}

.grafik-proporsi {
  margin: 0;
}

.grafik-proporsi svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
}

.grafik-proporsi__sumbu {
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.grafik-proporsi__garis {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.grafik-proporsi__titik {
  fill: var(--color-primary);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.grafik-proporsi__titik.is-aktif {
  fill: var(--color-orange);
}

.grafik-proporsi__teks {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--color-ink-muted);
}

.grafik-proporsi__nama {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-ink);
}

.batang-proporsi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.batang-proporsi__baris {
  display: grid;
  grid-template-columns: 7.5rem 1fr 6.5rem;
  align-items: center;
  gap: var(--space-2);
}

.batang-proporsi__nama {
  font-size: 0.85rem;
  font-weight: 700;
}

.batang-proporsi__jalur {
  height: 22px;
  border-radius: 999px;
  background: var(--color-bg-grid);
  overflow: hidden;
}

.batang-proporsi__isi {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

.batang-proporsi__isi--x {
  background: var(--color-orange);
}

.batang-proporsi__isi--y {
  background: var(--color-success);
}

.batang-proporsi__nilai {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.persegi-berbalik {
  margin: 0;
}

.persegi-berbalik svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-bottom: 2px solid var(--color-ink);
  border-left: 2px solid var(--color-ink);
}

.persegi-berbalik__bidang {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 2;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    y 0.25s ease;
}

.persegi-berbalik__sekat {
  stroke: var(--color-purple);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.persegi-berbalik__teks {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .batang-proporsi__baris {
    grid-template-columns: 1fr auto;
  }

  .batang-proporsi__jalur {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .batang-proporsi__isi,
  .persegi-berbalik__bidang {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   Pola susunan benda (engine seksi 71, fase-d/mpi-4.1)
   Gambar susunan korek api / ubin / kursi, deret tahap, dan Lab Susun.
   Benda baru disorot dengan DUA penanda: warna oranye + garis tebal,
   sedangkan benda lama dipudarkan, sehingga tidak bergantung warna saja.
   ------------------------------------------------------------------------- */

.pola-svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.pola-korek__batang {
  stroke: #b98a4b;
  stroke-width: 5;
  stroke-linecap: round;
}

.pola-korek__kepala {
  fill: var(--color-error);
}

.pola-korek.is-baru .pola-korek__batang {
  stroke: var(--color-orange);
  stroke-width: 7;
}

.pola-ubin {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
  stroke-width: 1.5;
}

.pola-ubin.is-baru {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 3;
}

.pola-meja {
  fill: #e3cfa9;
  stroke: #8a6a3b;
  stroke-width: 1.5;
}

.pola-kursi__dudukan {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 1.5;
}

.pola-kursi__sandaran {
  fill: var(--color-purple);
}

.pola-kursi.is-baru .pola-kursi__dudukan {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 3;
}

.pola-kursi.is-baru .pola-kursi__sandaran {
  fill: var(--color-orange);
}

.pola-korek.is-lama,
.pola-ubin.is-lama,
.pola-kursi.is-lama {
  opacity: 0.4;
}

/* Deret tahap 1..k berdampingan */

.pola-deret {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

.pola-deret__tahap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  max-width: 100%;
}

.pola-deret__tahap figcaption {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.pola-deret__tanya {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

/* Lab Susun */

.lab-susun {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-susun__tab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-susun__tab-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lab-susun__tab-btn:hover {
  border-color: var(--color-primary);
}

.lab-susun__tab-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.lab-susun__tab-btn.is-aktif {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.lab-susun__tab-btn.is-selesai {
  border-style: dashed;
}

.lab-susun__kontrol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.lab-susun__sorot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.lab-susun__sorot input {
  width: 20px;
  height: 20px;
}

.lab-susun__isi {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.lab-susun__gambar {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.lab-susun__gambar .pola-svg,
.pola-bukti .pola-svg {
  width: 100%;
  max-height: 240px;
}

.lab-susun__gambar figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.lab-susun__tabel {
  width: 100%;
}

.lab-susun__tabel caption {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--space-1);
}

.lab-susun__tabel tr.is-aktif th {
  color: var(--color-primary-strong);
}

.lab-susun__tabel .dl-num-input {
  width: 6em;
}

.lab-susun__ok {
  font-weight: 700;
  color: var(--color-success-strong);
  font-variant-numeric: tabular-nums;
}

.lab-susun__umpan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .lab-susun__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Asesmen diagnostik (engine seksi 72, fase-d/mpi-23.1)
   Daftar butir prasyarat bernomor dan profil kesiapan per indikator.
   Status indikator ditandai ikon (✓ / !) + warna, tidak warna saja.
   ------------------------------------------------------------------------- */

.diag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diag-item {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.diag-item__visual {
  margin: var(--space-2) 0 var(--space-3);
  overflow-x: auto;
}

.diag-ringkas {
  padding: var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.diag-ringkas--siap {
  border-color: var(--color-success);
}

.diag-ringkas--sebagian {
  border-color: var(--color-warning);
}

.diag-ringkas--perlu {
  border-color: var(--color-orange);
}

.diag-ringkas__judul {
  margin-top: 0;
}

.diag-ringkas__skor {
  font-size: 1.02rem;
}

.diag-profil {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diag-profil__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.diag-profil__item--kuat {
  background: var(--color-success-soft);
}

.diag-profil__item--perlu {
  background: var(--color-warning-soft);
}

.diag-profil__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
}

.diag-profil__item--kuat .diag-profil__status {
  background: var(--color-success);
}

.diag-profil__item--perlu .diag-profil__status {
  background: var(--color-warning);
}

.diag-profil__saran {
  display: block;
  font-size: 0.88rem;
  color: var(--color-warning-strong);
}

/* -------------------------------------------------------------------------
   Keliling & luas bangun datar (engine seksi 73, fase-d/mpi-23.1)
   Gambar bangun berkisi, petak & ruas satuan, garis tinggi & diagonal,
   potong-susun, dan Lab Bangun. Bagian hasil potongan ditandai warna
   oranye + pola garis putus-putus, sehingga tidak bergantung warna saja.
   ------------------------------------------------------------------------- */

.bangun-svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.bangun-kisi {
  stroke: var(--color-bg-grid);
  stroke-width: 1;
}

.bangun-bidang {
  fill: var(--color-blue-soft);
  fill-opacity: 0.85;
  stroke: none;
}

.bangun-tepi {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.bangun-petak {
  stroke: var(--color-blue);
  stroke-width: 1;
  stroke-opacity: 0.55;
}

.bangun-ruas {
  stroke: var(--color-blue-strong);
  stroke-width: 2;
}

.bangun-potong {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  stroke-linejoin: round;
}

.bangun-salinan {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  stroke-linejoin: round;
}

.bangun-luar {
  fill: var(--color-orange-soft);
  fill-opacity: 0.6;
  stroke: var(--color-orange);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.bangun-hasil {
  fill: none;
  stroke: var(--color-success-strong);
  stroke-width: 3;
  stroke-linejoin: round;
}

.bangun-tinggi,
.bangun-diagonal,
.bangun-garis-potong {
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.bangun-garis-potong {
  stroke: var(--color-orange-strong);
  stroke-width: 2.5;
}

.bangun-siku {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.2;
}

.bangun-teks {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-ink);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.bangun-teks--tinggi,
.bangun-teks--diagonal {
  fill: var(--color-purple-strong);
}

/* Lab Bangun */

.lab-bangun {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-bangun__tab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-bangun__isi {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.lab-bangun__kiri,
.lab-bangun__kanan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lab-bangun__gambar {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow-x: auto;
}

.lab-bangun__gambar figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.lab-bangun__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-bangun__isian label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.lab-bangun__isian .dl-num-input {
  width: 7em;
}

.lab-bangun__isian .feedback-box {
  margin-top: var(--space-2);
}

.lab-bangun__catat {
  max-width: 100%;
  overflow-x: auto;
}

.lab-bangun__tabel {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.lab-bangun__tabel caption {
  margin-bottom: var(--space-1);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
}

.lab-bangun__tabel td,
.lab-bangun__tabel th {
  text-align: center;
}

.lab-bangun__kosong {
  color: var(--color-ink-muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .lab-bangun__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Unsur bentuk aljabar (engine seksi 74)
   Bentuk aljabar berwarna (.aljabar-*), model kantong & kelereng
   (.kantong-svg), Lab Kantong (.lab-kantong*), dan Ketuk Unsur
   (.ketuk-unsur*). Warna unsur selalu disertai garis bawah berbeda
   sehingga tidak hanya bergantung pada warna.
   ========================================================================= */

.aljabar-bentuk {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
  font-family: var(--font-mono);
  font-weight: 700;
}

.aljabar-suku {
  white-space: nowrap;
}

.aljabar-var {
  color: var(--color-blue-strong);
  text-decoration: underline solid 2px;
  text-underline-offset: 3px;
}

.aljabar-koef {
  color: var(--color-orange-strong);
  text-decoration: underline dotted 2px;
  text-underline-offset: 3px;
}

.aljabar-konst {
  color: var(--color-purple-strong);
  text-decoration: underline double 2px;
  text-underline-offset: 3px;
}

.aljabar-op {
  color: var(--color-ink-muted);
}

/* Bentuk polos: dipakai sebelum murid menemukan nama unsurnya. */
.aljabar-bentuk--polos .aljabar-var,
.aljabar-bentuk--polos .aljabar-koef,
.aljabar-bentuk--polos .aljabar-konst {
  color: inherit;
  text-decoration: none;
}

.aljabar-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 700;
}

/* Model kantong & kelereng */

.kantong-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 120px;
}

.kantong-aljabar__badan {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
  stroke-width: 2;
}

.kantong-aljabar[data-huruf='y'] .kantong-aljabar__badan {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.kantong-aljabar__tali {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.kantong-aljabar__huruf {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  fill: var(--color-ink);
}

.kantong-aljabar.is-kurang .kantong-aljabar__badan {
  fill: var(--color-error-soft);
  stroke: var(--color-error);
  stroke-dasharray: 4 3;
}

.kantong-aljabar.is-kurang .kantong-aljabar__huruf {
  fill: var(--color-error-strong);
}

.kelereng-aljabar circle {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 2;
}

.kelereng-aljabar.is-kurang circle {
  fill: var(--color-error-soft);
  stroke: var(--color-error);
  stroke-dasharray: 3 2;
}

.kelereng-aljabar__tanda {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-error-strong);
}

.kantong-aljabar-kosong {
  font-size: 13px;
  fill: var(--color-ink-muted);
}

/* Lab Kantong */

.lab-kantong {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-kantong__tab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-kantong__tab-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lab-kantong__tab-btn:hover {
  border-color: var(--color-primary);
}

.lab-kantong__tab-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.lab-kantong__tab-btn.is-aktif {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.lab-kantong__tab-btn.is-selesai {
  border-style: dashed;
}

.lab-kantong__cerita {
  padding: var(--space-3);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
}

.lab-kantong__cerita p {
  margin: var(--space-1) 0 0;
}

.lab-kantong__isi {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.lab-kantong__gambar,
.aljabar-figur {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.lab-kantong__gambar figcaption,
.aljabar-figur figcaption {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

.lab-kantong__kontrol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
}

.lab-kantong__kontrol .dl-caption {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}

.lab-kantong__tulis .input-text {
  max-width: 220px;
}

.lab-kantong__tabel-wrap {
  overflow-x: auto;
}

.lab-kantong__tabel {
  width: 100%;
}

.lab-kantong__tabel caption {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--space-1);
}

.lab-kantong__tabel tr.is-aktif th {
  color: var(--color-primary-strong);
}

/* Ketuk Unsur */

.ketuk-unsur {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ketuk-unsur__label {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.ketuk-unsur__bentuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
}

.ketuk-unsur__op {
  color: var(--color-ink-muted);
}

.ketuk-unsur__token {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

.ketuk-unsur__token:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.ketuk-unsur__token:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.ketuk-unsur__token.is-dipilih {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}

.ketuk-unsur__token.is-benar {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.ketuk-unsur__token:disabled {
  cursor: default;
}

@media (max-width: 720px) {
  .lab-kantong__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Kalimat terbuka, persamaan & PLSV (engine seksi 75)
   Kalimat berwarna (.kalimat-*), neraca SVG (.neraca-*), dan Lab Neraca
   (.lab-neraca*). Warna variabel & relasi disertai garis bawah berbeda
   sehingga tidak hanya bergantung pada warna.
   ========================================================================= */

.kalimat {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.kalimat-var {
  color: var(--color-blue-strong);
  text-decoration: underline solid 2px;
  text-underline-offset: 3px;
}

.kalimat-rel {
  padding: 0 0.15em;
  color: var(--color-orange-strong);
  font-weight: 800;
}

.kalimat-bil {
  color: var(--color-ink);
}

.kalimat-op {
  color: var(--color-ink-muted);
}

/* Neraca */

.neraca-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.neraca-alas,
.neraca-tiang {
  fill: var(--color-border-strong);
}

.neraca-lengan {
  stroke: var(--color-ink);
  stroke-width: 6;
  stroke-linecap: round;
}

.neraca-poros {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 3;
}

.neraca-tali {
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
}

.neraca-piring {
  fill: var(--color-border);
  stroke: var(--color-ink-muted);
  stroke-width: 2;
}

.neraca-svg.is-seimbang .neraca-lengan {
  stroke: var(--color-success);
}

.neraca-kotak {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
  stroke-width: 2;
}

.neraca-kotak__teks {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-orange-strong);
}

.neraca-beban {
  fill: var(--color-purple-soft);
  stroke: var(--color-purple);
  stroke-width: 1.5;
}

.neraca-beban__teks {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-purple-strong);
}

/* Lab Neraca */

.lab-neraca {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-neraca__tab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-neraca__tab-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lab-neraca__tab-btn:hover {
  border-color: var(--color-primary);
}

.lab-neraca__tab-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.lab-neraca__tab-btn.is-aktif {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.lab-neraca__tab-btn.is-selesai {
  border-style: dashed;
}

.lab-neraca__cerita {
  padding: var(--space-3);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
}

.lab-neraca__cerita p {
  margin: var(--space-1) 0 0;
}

.lab-neraca__isi {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.lab-neraca__gambar,
.neraca-figur {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.lab-neraca__gambar figcaption,
.neraca-figur figcaption {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.lab-neraca__kontrol {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lab-neraca__kalimat {
  margin: 0;
  font-size: 1.1rem;
}

.lab-neraca__tulis .input-text {
  max-width: 220px;
}

.lab-neraca__tabel-wrap {
  overflow-x: auto;
}

.lab-neraca__tabel {
  width: 100%;
}

.lab-neraca__tabel caption {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--space-1);
}

.lab-neraca__tabel tr.is-aktif th {
  color: var(--color-primary-strong);
}

.lab-neraca__uji {
  display: inline-block;
  margin: 2px 0;
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.lab-neraca__uji.is-benar {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.lab-neraca__uji.is-salah {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

@media (max-width: 720px) {
  .lab-neraca__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Pertidaksamaan linear satu variabel (engine seksi 76)
   Garis bilangan (.garis-batas*) dan Lab Batas (.lab-batas*). Titik uji
   dibedakan dengan bentuk (bulat penuh ✓ / bulat kosong ✗) selain warna.
   Lab Batas memakai ulang tata letak .lab-neraca* (seksi 75).
   ========================================================================= */

.garis-batas {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.garis-batas__garis,
.garis-batas__tick {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.garis-batas__panah {
  fill: var(--color-ink);
}

.garis-batas__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-ink);
}

.garis-batas__sinar {
  stroke: var(--color-blue-strong);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.85;
}

.garis-batas__sinar-ujung {
  fill: var(--color-blue-strong);
}

.garis-batas__batas {
  stroke: var(--color-blue-strong);
  stroke-width: 3;
}

.garis-batas__batas.is-penuh {
  fill: var(--color-blue-strong);
}

.garis-batas__batas.is-kosong {
  fill: var(--color-surface);
}

.garis-batas__uji circle {
  stroke-width: 2.5;
}

.garis-batas__uji text {
  font-size: 13px;
  font-weight: 800;
}

.garis-batas__uji.is-ya circle {
  fill: var(--color-success);
  stroke: var(--color-success-strong);
}

.garis-batas__uji.is-ya text {
  fill: var(--color-success-strong);
}

.garis-batas__uji.is-tidak circle {
  fill: var(--color-surface);
  stroke: var(--color-error-strong);
}

.garis-batas__uji.is-tidak text {
  fill: var(--color-error-strong);
}

.lab-batas__garis {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.lab-batas__garis figcaption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.lab-batas__frasa {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-orange-strong);
  white-space: nowrap;
}

/* =========================================================================
   Hubungan antar sudut (engine seksi 77)
   Gambar dua garis berpotongan (.dua-garis*) dan Lab Sudut (.lab-sudut*).
   Setiap sudut berwarna sendiri (dg-w1…4 untuk busur, dg-t1…4 untuk
   label) dan juga diberi nomor, sehingga tidak bergantung pada warna.
   Lab Sudut memakai ulang tata letak .lab-neraca* (seksi 75).
   ========================================================================= */

.dua-garis {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.dua-garis__garis,
.dua-garis__sinar {
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.dua-garis__sinar {
  stroke: var(--color-purple-strong);
}

.dua-garis__siku {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.dua-garis__pusat {
  fill: var(--color-ink);
}

.dua-garis__huruf {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--color-ink);
}

.dua-garis__busur-sudut {
  fill: none;
  stroke-width: 3;
}

.dua-garis__busur-sudut.is-sorot {
  stroke-width: 7;
}

.dua-garis__busur-sudut.is-aktif {
  stroke-dasharray: 4 3;
}

.dua-garis__label-sudut {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.dg-w1 {
  stroke: var(--color-blue);
}
.dg-w2 {
  stroke: var(--color-orange);
}
.dg-w3 {
  stroke: var(--color-purple);
}
.dg-w4 {
  stroke: var(--color-success);
}
.dg-t1 {
  fill: var(--color-blue-strong);
}
.dg-t2 {
  fill: var(--color-orange-strong);
}
.dg-t3 {
  fill: var(--color-purple-strong);
}
.dg-t4 {
  fill: var(--color-success-strong);
}

.dua-garis__juring {
  fill: transparent;
  cursor: pointer;
}

.dua-garis__juring:hover {
  fill: rgba(37, 99, 235, 0.08);
}

.dua-garis__busur-badan {
  fill: rgba(253, 243, 208, 0.82);
  stroke: var(--color-warning);
  stroke-width: 1.5;
}

.dua-garis__busur-tick {
  stroke: var(--color-warning-strong);
  stroke-width: 1;
}

.dua-garis__busur-angka {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--color-blue-strong);
}

.dua-garis__busur-angka-luar {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--color-ink-muted);
}

.dua-garis__pegangan {
  fill: var(--color-orange);
  stroke: var(--color-surface);
  stroke-width: 3;
  cursor: grab;
}

.dua-garis__pegangan:focus-visible {
  outline: none;
  stroke: var(--color-focus);
  stroke-width: 4;
}

.lab-sudut__gambar svg {
  touch-action: none;
}

.lab-sudut__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lab-sudut__nama {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.lab-sudut__baca {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
}

.lab-sudut__baca label {
  font-weight: 700;
}

.lab-sudut__baca .input-text {
  max-width: 120px;
}

.lab-sudut__satuan {
  align-self: center;
  font-weight: 700;
}

.lab-sudut__kosong {
  margin: 0;
}

/* =========================================================================
   78. Bangun ruang: unsur & bidang penyusun (engine.js seksi 78,
   fase-d/mpi-9.1): model tabung & kerucut (.bgr-svg, .bgr-edge,
   .bgr-semu, .bgr-hit-garis, .psm-face--selimut), gambar bidang penyusun
   (.bgr-bidang*), Lab Amati Benda (.bgr-lab*, .bgr-benda*, .bgr-isian*,
   .bgr-bongkar), dan tabel pengamatan (.bgr-tabel*).
   Warna mengikuti seksi 31: alas/tutup oranye, sisi tegak biru, sisi
   lengkung (selimut) hijau, unsur yang ditandai ungu.
   ========================================================================= */

.psm-face--selimut {
  fill: var(--color-success-soft);
}

.bgr-edge {
  fill: none;
}

.bgr-semu {
  stroke: var(--color-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bgr-hit-garis {
  fill: none;
  pointer-events: stroke;
}

/* ---- Bidang penyusun ---- */

.bgr-bidang-wrap {
  padding: var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.bgr-bidang-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.bgr-bidang > :first-child {
  stroke-width: 2;
  stroke-linejoin: round;
}

.bgr-bidang--alas > :first-child {
  fill: var(--color-orange-soft);
  stroke: var(--color-orange);
}

.bgr-bidang--tegak > :first-child {
  fill: var(--color-blue-soft);
  stroke: var(--color-blue);
}

.bgr-bidang--selimut > :first-child {
  fill: var(--color-success-soft);
  stroke: var(--color-success);
}

.bgr-bidang__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-ink);
  text-anchor: middle;
}

/* ---- Lab Amati Benda ---- */

.bgr-lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bgr-benda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2);
}

.bgr-benda {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 88px;
  padding: var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.bgr-benda:hover {
  border-color: var(--color-primary);
}

.bgr-benda:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.bgr-benda.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.bgr-benda.is-done {
  border-color: var(--color-success);
}

.bgr-benda__ikon {
  font-size: 1.8rem;
  line-height: 1.1;
}

.bgr-benda__nama {
  font-size: 0.85rem;
  font-weight: 600;
}

.bgr-benda__cek {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-success-strong);
}

.bgr-benda__teks {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

.bgr-lab__kerja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.bgr-lab__catat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.bgr-isian {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.bgr-isian__judul {
  margin: 0;
  font-weight: 700;
}

.bgr-isian__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.bgr-isian__sel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bgr-isian__sel label {
  font-size: 0.88rem;
  font-weight: 600;
}

.bgr-isian__sel .input-text {
  max-width: 120px;
}

.bgr-bongkar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Tabel pengamatan ---- */

.bgr-tabel td,
.bgr-tabel th {
  white-space: normal;
}

.bgr-tabel__angka {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
}

.bgr-tabel__kosong {
  text-align: center;
  color: var(--color-ink-muted);
}

@media (max-width: 720px) {
  .bgr-lab__kerja {
    grid-template-columns: minmax(0, 1fr);
  }

  .bgr-benda-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}

/* =========================================================================
   79. Penyajian data kategorik: tabel frekuensi & diagram batang
   (engine.js seksi 79, fase-d/mpi-11.1): turus (.dtk-turus*), tabel
   frekuensi (.dtk-tabel*), diagram batang SVG (.dtk-diagram, .dtk-bar*,
   .dtk-grid, .dtk-ytick, .dtk-xtick, .dtk-judul, .dtk-label-sumbu,
   .dtk-kolom), Lab Turus (.dtk-kartu-aktif*, .dtk-baris-btn, .dtk-isian),
   Lab Skala (.dtk-lab-skala*), dan Lab Diagram Batang (.dtk-lab*,
   .dtk-stepper*).
   ========================================================================= */

.dtk-turus {
  display: inline-block;
  vertical-align: middle;
}

.dtk-turus__garis,
.dtk-turus__miring {
  stroke: var(--color-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.dtk-turus__miring {
  stroke: var(--color-orange);
}

.dtk-turus--nol {
  color: var(--color-ink-muted);
}

/* ---- Tabel frekuensi ---- */

.dtk-tabel td,
.dtk-tabel th {
  white-space: normal;
}

.dtk-tabel__turus {
  min-width: 90px;
  text-align: left;
}

.dtk-tabel .dtk-tabel__turus {
  text-align: left;
}

.dtk-tabel__angka {
  font-family: var(--font-mono);
  font-weight: 700;
}

.dtk-tabel tfoot th,
.dtk-tabel tfoot td {
  background: var(--color-bg-grid);
  font-weight: 700;
}

.dtk-tabel tr.is-sorot th,
.dtk-tabel tr.is-sorot td {
  background: var(--color-warning-soft);
}

.dtk-isian {
  width: 4.5em;
  min-height: 40px;
  text-align: center;
}

/* ---- Diagram batang ---- */

.dtk-diagram-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.dtk-diagram {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.dtk-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.dtk-sumbu {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.dtk-ytick,
.dtk-xtick,
.dtk-bar__nilai {
  fill: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.dtk-ytick {
  text-anchor: end;
}

.dtk-xtick,
.dtk-bar__nilai {
  text-anchor: middle;
}

.dtk-xtick {
  fill: var(--color-ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.dtk-bar__nilai {
  fill: var(--color-ink);
  font-weight: 700;
}

.dtk-judul {
  fill: var(--color-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

.dtk-label-sumbu {
  fill: var(--color-ink-muted);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}

.dtk-judul.is-samar,
.dtk-label-sumbu.is-samar {
  fill: var(--color-border-strong);
  font-style: italic;
}

.dtk-bar {
  fill: var(--color-blue);
  stroke: var(--color-blue-strong);
  stroke-width: 1;
}

.dtk-bar.is-sorot {
  fill: var(--color-orange);
  stroke: var(--color-orange-strong);
}

.dtk-xtick.is-sorot {
  fill: var(--color-orange-strong);
}

.dtk-kolom {
  fill: transparent;
  cursor: pointer;
}

.dtk-kolom:hover {
  fill: var(--color-primary-soft);
}

/* ---- Lab Turus & Lab Diagram Batang ---- */

.dtk-lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dtk-lab__progres {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.88rem;
  font-weight: 600;
}

.dtk-lab__meter {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-grid);
  overflow: hidden;
}

.dtk-lab__meter > span {
  display: block;
  height: 100%;
  background: var(--color-success);
}

.dtk-kartu-aktif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  max-width: 280px;
  margin: 0 auto;
  padding: var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  text-align: center;
}

.dtk-kartu-aktif__no {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.dtk-kartu-aktif__isi {
  font-size: 1.4rem;
}

.dtk-baris-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.dtk-baris-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dtk-baris-btn:focus-visible,
.dtk-kolom:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.dtk-pesan {
  margin: 0;
  padding-left: var(--space-4);
}

.dtk-lab__bagian {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dtk-lab__judul {
  margin: 0;
}

.dtk-stepper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

.dtk-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.dtk-stepper.is-benar {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.dtk-stepper.is-salah {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.dtk-stepper__nama {
  font-size: 0.9rem;
  font-weight: 600;
}

.dtk-stepper__tombol {
  display: inline-flex;
  gap: var(--space-1);
}

.dtk-stepper__tombol .btn {
  min-width: 40px;
  min-height: 40px;
  font-size: 1.1rem;
}

.dtk-lab-skala__kontrol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dtk-lab-skala__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dtk-lab-skala__baris .btn-group {
  flex-wrap: wrap;
  margin: 0;
}

.dtk-lab-skala__label {
  min-width: 7.5em;
  font-size: 0.9rem;
  font-weight: 700;
}

.dtk-lab-skala__info {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

/* =========================================================================
   80. Merumuskan pertanyaan statistik
   (engine.js seksi 80, fase-d/mpi-10.1): penanda ciri (.pst-ciri*), Lab
   Tanya Kelas (.pst-kartu*, .pst-responden*, .pst-ringkas*, .pst-lab*),
   dan Lab Rakit Pertanyaan (.pst-rakit*, .pst-keping*, .pst-tag*).
   ========================================================================= */

.pst-ciri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.pst-ciri__item {
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.pst-ciri__item--ya {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.pst-ciri__item--tidak {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.pst-lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pst-kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-3);
}

.pst-kartu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.pst-kartu:hover {
  border-color: var(--color-primary);
}

.pst-kartu:focus-visible,
.pst-keping:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.pst-kartu.is-aktif {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.pst-kartu.is-tercatat {
  border-color: var(--color-success);
}

.pst-kartu__ikon {
  font-size: 1.6rem;
  line-height: 1;
}

.pst-kartu__teks {
  font-weight: 700;
}

.pst-kartu__status {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.pst-kartu.is-tercatat .pst-kartu__status {
  color: var(--color-success-strong);
}

.pst-lab__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.pst-lab__tanya {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.pst-lab__info,
.pst-lab__progres {
  margin: 0;
}

.pst-responden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pst-responden__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

.pst-responden__item > span:first-child {
  font-size: 1.2rem;
}

.pst-ringkas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pst-ringkas__chip {
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
  font-size: 0.85rem;
}

.pst-rakit {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pst-rakit__kalimat {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.pst-rakit__slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pst-rakit__judul {
  font-size: 0.9rem;
  font-weight: 700;
}

.pst-keping-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pst-keping {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.pst-keping--tanya.is-dipilih {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
}

.pst-keping--variabel.is-dipilih {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.pst-keping--kelompok.is-dipilih {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

.pst-rakit__ciri {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pst-rakit__daftar-wrap {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.pst-rakit__daftar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.pst-tag {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-bg-grid);
  font-size: 0.75rem;
  font-weight: 700;
}

.pst-tag--kategorik {
  background: var(--color-orange-soft);
  color: var(--color-orange-strong);
}

.pst-tag--numerik {
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
}

/* =========================================================================
   81. Perkalian & pembagian bentuk aljabar berpangkat berbasis sama
   (engine.js seksi 81, fase-d/mpi-13.1): ubin koefisien & variabel pada
   ubin faktor bentuk aljabar (buildMonoFactorTiles). Melengkapi .fx-*.
   ========================================================================= */

.fx-tile--koef,
.fx-group--b .fx-tile--koef {
  background: var(--color-purple);
}

.fx-tile--var {
  font-style: italic;
}

.fx-group--gabung {
  border-color: var(--color-purple);
  align-items: center;
}

.fx-group--gabung .fx-op {
  font-size: 1rem;
}