/* ============================================================
   IWS — Extra styles
   M7 Pretest/Posttest · D4 Monitoring CREATE · D5 K/T/B ·
   D6 Manajemen Pengguna · D7 Ekspor Data
   ============================================================ */

/* ---- C.5.2c: 6-chip Dashboard grid (override styles.css repeat(4,1fr)) ---- */
.dosen-grid-stats { grid-template-columns: repeat(3,1fr); }
@media (max-width: 1024px) { .dosen-grid-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .dosen-grid-stats { grid-template-columns: 1fr; } }

/* ---- Sidebar pip variants (scaffold P1/P3/P4) ---- */
.subnav-item .state-pip.glyph { font-size: 13px; line-height: 1; padding: 3px 8px; min-width: 24px; text-align: center; }
.subnav-item .state-pip.read { background: var(--accent-soft); color: var(--accent-strong); letter-spacing: .06em; }
.subnav-item.on .state-pip.read { background: var(--accent-soft); color: var(--accent-strong); }
.sm-tab .state-pip.read { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }

/* ============================================================
   M7 — PRETEST / POSTTEST
   ============================================================ */
.tes-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.tes-typeseg { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; margin-bottom: 12px; }
.tes-typeseg button { border: none; background: none; padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tes-typeseg button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.tes-typeseg button:disabled { opacity: .5; cursor: not-allowed; }
.tes-typeseg .lk { width: 12px; height: 12px; }
.tes-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tes-timer { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb,var(--brand) 22%, var(--line)); padding: 8px 14px; border-radius: 11px; font-variant-numeric: tabular-nums; }
.tes-timer.low { color: var(--warn); background: #fdf0e8; border-color: #f6d6c2; }
.tes-timer svg { width: 16px; height: 16px; }
.tes-prog { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tes-prog b { color: var(--brand); }

.tes-note { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--brand-softer); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); margin-bottom: 20px; }
.tes-note svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 1px; }

.tes-soal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px 24px; margin-bottom: 16px; scroll-margin-top: 120px; }
.tes-soal .ts-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.tes-soal .ts-num { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.tes-soal .ts-kps { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-strong); }
.tes-stim { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; }
.tes-stim .stim-fig { width: 132px; height: 100px; border-radius: 10px; flex: none; background: linear-gradient(135deg,#e8eefb,#f5f8fe);
  border: 1px dashed color-mix(in srgb,var(--brand) 30%, var(--line)); display: grid; place-items: center; color: var(--brand); position: relative; overflow: hidden; }
.tes-stim .stim-fig svg { width: 32px; height: 32px; opacity: .55; }
.tes-stim .stim-fig::after { content: "Stimulus statis"; position: absolute; bottom: 6px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tes-stim .stim-cap { flex: 1; }
.tes-stim .stim-cap .sc-lvl { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.tes-stim .stim-cap p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.tes-qtext { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 13px; line-height: 1.55; }
.tes-soal .answer-ta { min-height: 120px; }
.tes-soal.locked .answer-ta { background: #f4f6fa; color: var(--ink-2); border-style: dashed; }

.tes-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.tes-foot .grow { flex: 1; }
.tes-done-banner { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--radius);
  background: #e8f6ee; border: 1px solid #c2e8d0; margin-bottom: 16px; }
.tes-done-banner .tdb-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.tes-done-banner .tdb-ic svg { width: 22px; height: 22px; }
.tes-done-banner h4 { margin: 0 0 2px; font-size: 16px; font-weight: 800; color: #14532d; }
.tes-done-banner p { margin: 0; font-size: 13px; color: #14532d; }
.tes-locked-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 40px 24px; text-align: center; }
.tes-locked-wrap .tlw-ic { width: 58px; height: 58px; border-radius: 16px; background: var(--bg); color: var(--ink-3); display: grid; place-items: center; margin: 0 auto 14px; }
.tes-locked-wrap .tlw-ic svg { width: 28px; height: 28px; }
.tes-locked-wrap h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.tes-locked-wrap p { margin: 0 auto; font-size: 14px; color: var(--ink-2); max-width: 46ch; }

/* ============================================================
   D4 — MONITORING CREATE (3-panel, reuses .dosen-mon)
   ============================================================ */
.cg-left .ml-head { display: flex; align-items: center; justify-content: space-between; }
.cg-item { display: block; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.cg-item:hover { background: var(--bg-2); }
.cg-item.on { background: var(--brand-soft); }
.cg-item .cg-top { display: flex; align-items: center; gap: 9px; }
.cg-item .cg-grp { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; background: linear-gradient(150deg,var(--brand),var(--brand-strong)); }
.cg-item .cg-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.cg-item.on .cg-name { color: var(--brand); }
.cg-item .cg-tema { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.cg-pips { display: flex; gap: 6px; margin: 9px 0 0 39px; flex-wrap: wrap; }
.cg-pip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: var(--ink-3); }
.cg-pip .pd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cg-pip[data-st="done"] { background: #e8f6ee; color: var(--ok); }
.cg-pip[data-st="open"] { background: var(--brand-soft); color: var(--brand); }
.cg-pip[data-st="progress"] { background: var(--accent-soft); color: var(--accent-strong); }
.cg-pip[data-st="locked"], .cg-pip[data-st="todo"] { background: var(--bg); color: var(--ink-3); }

.cc-header { padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.cc-header .cc-tema { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); }
.cc-header h3 { margin: 4px 0 2px; font-size: 17px; font-weight: 800; }
.cc-header .cc-mem { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.cc-body { padding: 8px 18px 18px; }
.cc-step { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cc-step:last-child { border-bottom: none; }
.cc-step .cs-l { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 7px; }
.cc-step .cs-l .csn { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.cc-step .cs-a { font-size: 13px; color: var(--ink-2); line-height: 1.55; background: var(--bg-2); border-radius: 9px; padding: 10px 13px; }
.cc-step .cs-a.empty { color: var(--ink-3); font-style: italic; background: #fff; border: 1px dashed var(--line); }
.cc-phase { display: flex; align-items: center; gap: 11px; margin: 16px 0 6px; }
.cc-phase .pl-line { flex: 1; height: 1px; background: var(--line); }
.cc-phase span { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cc-locked { display: flex; gap: 11px; align-items: center; padding: 13px 16px; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-2); }
.cc-locked svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.cc-obs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; margin-top: 4px; }
.cc-obs-table th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); padding: 6px 9px; background: var(--bg-2); }
.cc-obs-table td { padding: 8px 9px; border-top: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.5; vertical-align: top; }
.cc-model { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 4px; }
.cc-model .cm-cell { border-radius: 9px; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.cc-model .cm-cell .cm-l { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.cm-cell.makro { background: #e9f7ee; color: #14532d; } .cm-cell.makro .cm-l { color: #15803d; }
.cm-cell.submikro { background: #eef4fd; color: #1e3a6e; } .cm-cell.submikro .cm-l { color: #2563b8; }
.cm-cell.simbolik { background: #f3ecfe; color: #4c2889; } .cm-cell.simbolik .cm-l { color: #7c3aed; }

.cc-vlog { margin-top: 6px; }
.cc-vlog iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--radius-sm); background: #0d1f3d; }
.cc-vlog-empty { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink-3); font-size: 13px; }
.cc-vlog-empty svg { width: 22px; height: 22px; flex: none; }

.create-confirm-bar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-top: 14px; }
.create-confirm-bar h5 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.create-confirm-bar p { margin: 0 0 13px; font-size: 12.5px; color: var(--ink-3); }
.create-confirm-bar .ccb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.create-confirm-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.create-confirm-state.pending { background: var(--accent-soft); color: var(--accent-strong); }
.create-confirm-state.done { background: #e8f6ee; color: var(--ok); }

/* CREATE pegangan list */
.peg-create .peg-box ul { padding-left: 0; list-style: none; gap: 9px; }
.peg-create .peg-box li { display: flex; gap: 9px; align-items: flex-start; }
.peg-create .peg-box li .pn { width: 20px; height: 20px; border-radius: 6px; background: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.peg-create .checklist li { display: flex; gap: 9px; align-items: flex-start; }
.peg-create .checklist li::before { content: ""; width: 15px; height: 15px; border-radius: 4px; border: 2px solid currentColor; flex: none; margin-top: 1px; opacity: .55; }

/* ============================================================
   D5 — INSTRUMEN K/T/B (mode toggle + scoring)
   ============================================================ */
.pen-modeseg { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; }
.pen-modeseg button { border: none; background: none; padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.pen-modeseg button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

.ktb-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ktb-sel { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.ktb-sel select { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; min-width: 200px; }

.ktb-cat { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; margin-bottom: 16px; }
/* Sub-tab dalam Tab Pemahaman Konsep (Pretest/Posttest vs EKK Formatif) */
.kin-subtabs { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 11px; margin-bottom: 16px; }
.kin-subtab { border: none; background: none; padding: 8px 15px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.kin-subtab small { font-weight: 600; opacity: .8; }
.kin-subtab.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

/* Tab 4 — Inisiasi TPACK (disclaimer + tabel + radar) */
.tpack-disclaimer { display: flex; align-items: flex-start; gap: 10px; background: #fff8e6; border: 1px solid #f0d98a;
  color: #7a5b08; border-radius: 11px; padding: 12px 15px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.5; }
.tpack-disclaimer svg { flex: none; margin-top: 1px; color: #c08a12; }
.tpack-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.tpack-radar-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; position: sticky; top: 84px; }
.tpack-radar-card h4 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--ink); }
.tpack-radar-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.tpack-radar-legend span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.tpack-radar-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--brand); flex: none; }
@media (max-width: 980px) { .tpack-grid { grid-template-columns: 1fr; } .tpack-radar-card { position: static; } }

/* Combined KPS 5+6 — badge & catatan (Prompt 3) */
.combined-badge { display: flex; align-items: flex-start; gap: 9px; background: var(--brand-softer); border: 1px solid color-mix(in oklch, var(--brand) 25%, transparent);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; color: var(--brand); }
.combined-badge svg { flex: none; margin-top: 2px; }
.combined-badge b { display: block; font-size: 12.5px; font-weight: 800; }
.combined-badge span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; line-height: 1.45; }
.ki-combined { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-softer); color: var(--brand); font-size: 10.5px; font-weight: 800; }
.ki-combined svg { flex: none; }
.ki-combined-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 7px 10px; border-radius: 8px;
  background: var(--bg); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.ki-combined-note svg { flex: none; color: var(--brand); }
.ktb-cat button { border: none; background: none; padding: 8px 15px; border-radius: 9px; font-weight: 700; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.ktb-cat button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

.ktb-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.ktb-cat-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 12px; }
.ktb-cat-head .kch-badge { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; flex: none; }
.ktb-cat-head h4 { margin: 0; font-size: 15px; font-weight: 800; }
.ktb-cat-head p { margin: 1px 0 0; font-size: 12px; color: var(--ink-3); }
.ktb-cat-head .kch-total { margin-left: auto; text-align: right; }
.ktb-cat-head .kch-total b { font-size: 22px; font-weight: 800; color: var(--brand); }
.ktb-cat-head .kch-total span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; }

.ktb-item { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.ktb-item:last-child { border-bottom: none; }
.ktb-item .ki-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ktb-item .ki-id { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); flex: none; }
.ktb-item .ki-nama { font-size: 14px; font-weight: 800; color: var(--ink); }
.ktb-dim { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.ktb-dim:first-of-type { border-top: none; }
.ktb-dim .kd-txt { font-size: 13px; color: var(--ink-2); flex: 1; min-width: 180px; }
.ktb-scale { display: inline-flex; gap: 5px; }
.ktb-scale button { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; font-weight: 800; color: var(--ink-3); transition: .12s; }
.ktb-scale button:hover { border-color: var(--brand); }
.ktb-scale button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ktb-itemnote { margin-top: 12px; }
.ktb-itemnote textarea { width: 100%; min-height: 52px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: var(--font); font-size: 12.5px; color: var(--ink); outline: none; background: var(--bg-2); }
.ktb-itemnote textarea:focus { border-color: var(--brand); background: #fff; }
.ktb-foot { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.ktb-foot .grow { flex: 1; }
.ktb-scalekey { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ktb-scalekey span b { color: var(--ink-2); }

/* ============================================================
   D6 — MANAJEMEN PENGGUNA
   ============================================================ */
.users-tabs { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.users-tabs button { border: none; background: none; padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.users-tabs button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.users-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.users-toolbar .search { flex: 1; min-width: 180px; max-width: 320px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.users-toolbar .search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.users-toolbar .search input { flex: 1; border: none; outline: none; padding: 11px 0; font-family: var(--font); font-size: 13.5px; background: transparent; color: var(--ink); }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th, .users-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
.users-table thead th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--bg-2); position: sticky; top: 0; z-index: 2; }
.users-table tbody tr:hover { background: var(--bg-2); }
.users-table .u-nim { font-weight: 700; font-variant-numeric: tabular-nums; }
.users-table .u-name { display: flex; align-items: center; gap: 10px; }
.users-table .u-name .mav { width: 28px; height: 28px; font-size: 11px; }
.users-table tr.inactive { opacity: .5; }
.u-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.u-pill.yes { background: #e8f6ee; color: var(--ok); }
.u-pill.no { background: var(--bg); color: var(--ink-3); }
.u-pill.off { background: #fdf0e8; color: var(--warn); }
.u-act { position: relative; }
.u-act-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; }
.u-act-btn:hover { border-color: var(--brand); color: var(--brand); }
.u-menu { position: absolute; right: 0; top: 40px; z-index: 30; width: 188px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; display: none; }
.u-act.open .u-menu { display: block; }
.u-menu button { width: 100%; text-align: left; border: none; background: none; padding: 9px 11px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.u-menu button:hover { background: var(--bg-2); color: var(--ink); }
.u-menu button.danger { color: var(--warn); }
.u-menu button.danger:hover { background: #fdf0e8; }
.u-menu button svg { width: 15px; height: 15px; flex: none; }
.users-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: visible; }
.users-scroll { max-height: 62vh; overflow-y: auto; overflow-x: auto; border-radius: var(--radius); }
.users-foot { padding: 12px 16px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line-2); }

/* Kelompok tab */
.klp-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.klp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.klp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.klp-card .kc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.klp-card .kc-grp { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(150deg,var(--brand),var(--brand-strong)); }
.klp-card .kc-title { font-size: 14.5px; font-weight: 800; }
.klp-card .kc-title span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.klp-card .kc-edit { margin-left: auto; }
.klp-members { display: flex; flex-direction: column; gap: 7px; }
.klp-mem { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.klp-mem .mav { width: 26px; height: 26px; font-size: 10px; }

/* edit kelompok modal */
.modal.klp-modal { max-width: 520px; text-align: left; }
.klp-edit-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 18px; max-height: 320px; overflow-y: auto; }
.klp-edit-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); }
.klp-edit-row .mav { width: 28px; height: 28px; font-size: 11px; }
.klp-edit-row .ker-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.klp-edit-row .ker-name span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.klp-edit-row select { font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--brand); padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.modal-form { display: grid; gap: 13px; margin: 6px 0 20px; text-align: left; }
.modal-form .field { margin: 0; }
.import-zone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center; background: var(--bg-2); margin: 6px 0 16px; }
.import-zone svg { width: 32px; height: 32px; color: var(--ink-3); }
.import-zone h5 { margin: 9px 0 3px; font-size: 14px; font-weight: 800; }
.import-zone p { margin: 0; font-size: 12px; color: var(--ink-3); }
.import-zone code { font-family: ui-monospace, monospace; font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--ink-2); }

/* ============================================================
   D7 — EKSPOR DATA
   ============================================================ */
.export-wrap { max-width: 880px; }
.export-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px 26px; margin-bottom: 16px; }
.export-card .ec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.export-card h4 { margin: 0; font-size: 15px; font-weight: 800; }
.exp-scope { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.exp-scope select { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; min-width: 200px; }
.exp-list { display: grid; gap: 9px; margin-bottom: 8px; }
.exp-item { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .14s; }
.exp-item:hover { border-color: color-mix(in srgb,var(--brand) 40%, var(--line)); }
.exp-item.on { border-color: var(--brand); background: var(--brand-soft); }
.exp-item input { width: 21px; height: 21px; accent-color: var(--brand); flex: none; cursor: pointer; }
.exp-item .ei-body { flex: 1; }
.exp-item .ei-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.exp-item .ei-rows { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.exp-selall { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.exp-selall button { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px dashed color-mix(in srgb,var(--brand) 35%, var(--line)); padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.exp-selall .count { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.exp-format { display: flex; align-items: center; gap: 18px; margin: 4px 0 6px; flex-wrap: wrap; }
.exp-format .ef-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.exp-radio { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.exp-radio input { width: 19px; height: 19px; accent-color: var(--brand); cursor: pointer; }
.exp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.exp-note { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.exp-note svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; margin-top: 1px; }
.exp-note code { font-family: ui-monospace, monospace; font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

/* ============================================================
   SIM-09 DOCK — split 60/40 (desktop) · full-screen modal (mobile)
   ============================================================ */
:root{ --sim09-w: clamp(400px, 40vw, 600px); }
.pilot-tag{ display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); margin-left: 6px; }
.s9-launch .sl-ic{ flex: none; }
.sim09-dock{
  position: fixed; inset: 0; width: 100%;
  background: var(--bg-2); border-left: none; box-shadow: none;
  display: flex; flex-direction: column; z-index: 130;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  overflow-x: hidden; overflow-y: auto; box-sizing: border-box;
}
.sim09-dock *, .sim09-dock *::before, .sim09-dock *::after{ box-sizing: border-box; }
/* F3k-1 micro-fix — contain horizontal overflow */
.sim09-scroll{ max-width: 100%; overflow-x: hidden; }
.sim09-grid{ max-width: 100%; overflow-x: hidden; }
.sim09-panel{ min-width: 0; overflow: hidden; }
.sim09-satuan-box, .sim09-satuan-rumus-general, .sim09-satuan-substitusi, .sim09-satuan-hasil{ min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.sim09-callout-body{ overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.sim09-callout-area{ max-width: 100%; overflow: hidden; }
.sim09-footer{ max-width: 100%; }
body.sim09-open .sim09-dock{ transform: none; }
@media (max-width: 880px){ body.sim09-open{ overflow: hidden; } }

/* header */
.sim09-header{ display: flex; align-items: center; gap: 12px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.sim09-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,var(--brand),var(--brand-strong)); }
.sim09-ic svg{ width: 20px; height: 20px; }
.sim09-ttl{ min-width: 0; margin-right: auto; }
.sim09-ttl h4{ margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.sim09-subtitle{ margin: 1px 0 0; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sim09-back-btn svg{ width: 15px; height: 15px; }

/* scroll body — D-SIM09: size to content so footer controls sit directly under the trilevel columns (no dead space) */
.sim09-scroll{ flex: 0 0 auto; }

/* grid 25/25/50 */
.sim09-grid{ display: grid; grid-template-columns: 25% 25% 50%; gap: 12px; align-items: start; padding: 16px 20px 4px; }
.sim09-panel{ background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-height: 380px; display: flex; flex-direction: column; }
.sim09-panel-header{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.sim09-panel-makro .sim09-panel-header{ color: #16a34a; }
.sim09-panel-submikro .sim09-panel-header{ color: #2563eb; }
.sim09-panel-simbolik .sim09-panel-header{ color: #7c3aed; }
.sim09-panel-title{ font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.sim09-panel-body{ flex: 1; display: flex; flex-direction: column; }
.sim09-submikro-body{ background: #1e293b; border-radius: 8px; padding: 12px; min-height: 320px; position: relative; }
.sim09-submikro-body .sim09-placeholder-note{ color: #94a3c8; background: rgba(255,255,255,.05); }
.sim09-submikro-scene{ position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; }
.sim09-submikro-air-area{ position: absolute; bottom: 0; left: 0; right: 0; height: 20%; background: rgba(30,60,120,.15); border-top: 1.5px solid rgba(120,180,255,.7); }
.sim09-submikro-partikel-placeholder{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.35); font-size: 11px; font-style: italic; text-align: center; padding: 8px; pointer-events: none; }
/* partikel (F3g) */
.sim09-partikel{ position: absolute; border-radius: 50%; pointer-events: none; z-index: 2; }
.sim09-partikel-h2o{ width: 5px; height: 5px; background: rgba(150,200,255,.55); }
.sim09-partikel-na{ width: 10px; height: 10px; background: rgb(59,130,246); border: 1px solid rgba(30,100,200,.9); box-shadow: 0 0 3px rgba(59,130,246,.4); }
.sim09-partikel-cl{ width: 10px; height: 10px; background: rgb(34,197,94); border: 1px solid rgba(20,150,60,.9); box-shadow: 0 0 3px rgba(34,197,94,.4); }
.sim09-submikro-legend{ position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: rgba(0,0,0,.35); border-radius: 4px; z-index: 10; }
.sim09-legend-item{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.9); }
.sim09-legend-dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sim09-legend-dot.dot-na{ background: rgb(59,130,246); border: 1px solid rgba(30,100,200,.9); }
.sim09-legend-dot.dot-cl{ background: rgb(34,197,94); border: 1px solid rgba(20,150,60,.9); }
.sim09-legend-dot.dot-h2o{ background: rgba(150,200,255,.55); width: 8px; height: 8px; }

/* simbolik 2x2 */
.sim09-simbolik-2x2{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim09-satuan-box{ padding: 14px; border: 1px solid var(--line-2); border-radius: 8px; min-height: 90px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); }
.sim09-satuan-label{ font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.sim09-satuan-rumus-general{ font-family: 'Consolas','Monaco','Courier New',monospace; font-size: 13px; font-weight: 500; color: var(--ink); padding: 8px 10px; background: rgba(0,0,0,.03); border-radius: 4px; margin: 6px 0; line-height: 1.6; }
.sim09-satuan-rumus-general sub{ font-size: .75em; vertical-align: sub; line-height: 0; }
.sim09-satuan-substitusi{ font-family: 'Consolas','Monaco','Courier New',monospace; font-size: 12px; color: var(--ink-2); padding: 4px 10px; margin-top: 4px; }
.sim09-satuan-hasil{ font-family: 'Consolas','Monaco','Courier New',monospace; font-size: 14px; font-weight: 700; color: var(--brand); padding: 4px 10px; margin-top: 2px; }
.sim09-badge-jenuh{ display: inline-block; margin-left: 10px; padding: 3px 10px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 800; border-radius: 4px; letter-spacing: .5px; vertical-align: middle; }
/* panel makro — beaker */
.sim09-beaker-container{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; }
.sim09-beaker-svg{ width: 100%; max-width: 200px; height: auto; display: block; }
.sim09-makro-readout{ display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px 12px; background: rgba(0,0,0,.04); border-radius: 6px; font-family: 'Consolas','Monaco','Courier New',monospace; }
.sim09-readout-item{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 2px 0; line-height: 1.5; }
.sim09-readout-label{ color: var(--ink-2); }
.sim09-readout-value{ font-weight: 700; color: var(--brand); }
.sim09-makro-disclaimer{ margin-top: 10px; padding: 10px 14px; background: rgba(59,130,246,.06); border-left: 3px solid rgba(59,130,246,.4); border-radius: 4px; font-size: 11px; color: var(--ink-2); font-style: italic; line-height: 1.55; }
.sim09-makro-disclaimer strong{ font-weight: 600; color: var(--ink); font-style: normal; }
.sim09-mm-disclaimer{ display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; background: rgba(245,158,11,.10); border-left: 3px solid rgba(245,158,11,.55); border-radius: 4px; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.sim09-mm-disclaimer .sim09-mm-icon{ flex-shrink: 0; font-size: 13px; color: #b45309; line-height: 1.4; }
.sim09-mm-disclaimer p{ margin: 0; }
.sim09-mm-disclaimer strong{ font-weight: 700; color: var(--ink); }

.sim09-placeholder-note{ font-size: 11px; color: var(--ink-3); font-style: italic; padding: 8px; background: rgba(0,0,0,.02); border-radius: 6px; line-height: 1.5; }

/* callout area */
.sim09-callout-area{ display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 8px; }
.sim09-callout{ padding: 10px 14px; border-left: 4px solid; border-radius: 6px; }
.sim09-callout-mek{ border-left-color: #2563eb; background: #eff6ff; }
.sim09-callout-apl{ border-left-color: #16a34a; background: #f0fdf4; }
.sim09-callout-mis{ border-left-color: #d97706; background: #fffbeb; }
.sim09-callout-header{ font-size: 11px; font-weight: 800; letter-spacing: .05em; margin-bottom: 4px; }
.sim09-callout-mek .sim09-callout-header{ color: #1e40af; }
.sim09-callout-apl .sim09-callout-header{ color: #15803d; }
.sim09-callout-mis .sim09-callout-header{ color: #b45309; }
.sim09-callout-body{ font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 4px 0; }
.sim09-callout-lead{ margin: 0 0 10px; font-size: 13px; }
.sim09-callout-paragraph{ margin: 8px 0; }
.sim09-callout-list{ margin: 10px 0 14px; padding-left: 20px; list-style-type: disc; }
.sim09-callout-list li{ margin: 4px 0; }
.sim09-callout-list li em{ font-style: italic; color: var(--brand); font-weight: 500; }
.sim09-callout-contrast{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 10px 14px; margin: 10px 0; background: rgba(59,130,246,.08); border-radius: 6px; font-family: 'Consolas','Monaco','Courier New',monospace; font-size: 12px; }
.sim09-contrast-item strong{ color: var(--brand); }
.sim09-callout-conclusion{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.15); font-style: italic; color: var(--ink-3); }
.sim09-callout-conclusion strong{ font-style: normal; color: var(--ink); }
.sim09-aplikasi-grid{ display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.sim09-aplikasi-item{ padding: 10px 12px; background: rgba(34,197,94,.06); border-left: 3px solid rgba(34,197,94,.5); border-radius: 4px; }
.sim09-aplikasi-header{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.sim09-aplikasi-satuan{ font-weight: 700; font-size: 13px; color: var(--brand); font-family: 'Consolas','Monaco','Courier New',monospace; }
.sim09-aplikasi-context{ font-size: 11px; color: var(--ink-3); font-style: italic; text-transform: uppercase; letter-spacing: .5px; }
.sim09-aplikasi-desc{ font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.sim09-aplikasi-desc em{ font-style: italic; color: var(--ink-3); font-weight: 500; }
.sim09-aplikasi-desc strong{ font-weight: 700; color: var(--ink); }
.sim09-misk-statement{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 4px; margin: 8px 0; font-size: 12.5px; line-height: 1.55; }
.sim09-misk-label{ flex-shrink: 0; padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; align-self: flex-start; margin-top: 1px; }
.sim09-misk-wrong{ background: rgba(220,38,38,.08); border-left: 3px solid rgba(220,38,38,.6); }
.sim09-misk-wrong .sim09-misk-label{ background: rgba(220,38,38,.85); color: #fff; }
.sim09-misk-correct{ background: rgba(34,197,94,.08); border-left: 3px solid rgba(34,197,94,.6); }
.sim09-misk-correct .sim09-misk-label{ background: rgba(34,197,94,.85); color: #fff; }
.sim09-misk-text{ color: var(--ink); }
.sim09-misk-reasoning{ margin: 12px 0; }
.sim09-misk-calc{ display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px 12px; background: rgba(245,158,11,.06); border-radius: 4px; font-family: 'Consolas','Monaco','Courier New',monospace; font-size: 12px; }
.sim09-calc-line{ padding: 4px 8px; border-radius: 3px; color: var(--ink); }
.sim09-calc-line.sim09-calc-wrong{ background: rgba(220,38,38,.06); }
.sim09-calc-line.sim09-calc-correct{ background: rgba(34,197,94,.06); }
.sim09-calc-line strong{ color: var(--brand); font-weight: 700; }
.sim09-misk-verify{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.15); }
.sim09-misk-verify-list{ margin: 8px 0 0; padding-left: 22px; }
.sim09-misk-verify-list li{ margin: 6px 0; font-size: 12.5px; line-height: 1.55; }
.sim09-misk-verify-list li em{ font-style: italic; color: var(--ink-3); font-weight: 500; }

/* footer */
.sim09-footer{ flex: none; display: flex; padding: 16px 22px; border-top: 1px solid var(--line); gap: 24px; align-items: flex-start; background: #fff; }
.sim09-controls{ flex: 1; display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.sim09-slider-group{ display: flex; flex-direction: column; gap: 6px; }
.sim09-slider-label-row{ display: flex; justify-content: space-between; align-items: baseline; }
.sim09-slider-label-row label{ font-weight: 700; font-size: 13px; color: var(--ink); }
.sim09-slider-value{ font-weight: 800; font-size: 14px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sim09-slider-group input[type=range]{ width: 100%; }
.sim09-slider-range{ display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.sim09-btn-reset{ align-self: center; padding: 9px 18px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.sim09-btn-reset:hover{ background: var(--line); }

@media (max-width: 1023px){ .sim09-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   SIM-10 — Tekanan Uap Larutan (Hukum Raoult · skeleton F3a)
   ============================================================ */
.sim10-dock{ position: fixed; inset: 0; width: 100%; background: var(--bg-2); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); will-change: transform; overflow-x: hidden; box-sizing: border-box; }
.sim10-dock *, .sim10-dock *::before, .sim10-dock *::after{ box-sizing: border-box; }
body.sim10-open .sim10-dock{ transform: none; }
@media (max-width: 880px){ body.sim10-open{ overflow: hidden; } }
/* header */
.sim10-header{ display: flex; align-items: center; gap: 12px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.sim10-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,var(--brand),var(--brand-strong)); }
.sim10-ic svg{ width: 20px; height: 20px; }
.sim10-ttl{ min-width: 0; margin-right: auto; }
.sim10-ttl h4{ margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.sim10-subtitle{ margin: 1px 0 0; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sim10-back-btn svg{ width: 15px; height: 15px; }
/* scroll body */
.sim10-scroll{ flex: 1; overflow-y: auto; max-width: 100%; overflow-x: hidden; }
/* grid 25/25/50 */
.sim10-grid{ display: grid; grid-template-columns: 25% 25% 50%; gap: 12px; align-items: start; padding: 16px 20px; max-width: 100%; overflow-x: hidden; }
.sim10-panel{ background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 12px; padding: 14px; min-height: 380px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sim10-panel-header{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.sim10-panel-makro{ border-top-color: #16a34a; }
.sim10-panel-submikro{ border-top-color: #2563eb; }
.sim10-panel-simbolik{ border-top-color: #7c3aed; }
.sim10-panel-makro .sim10-panel-header{ color: #16a34a; }
.sim10-panel-submikro .sim10-panel-header{ color: #2563eb; }
.sim10-panel-simbolik .sim10-panel-header{ color: #7c3aed; }
.sim10-panel-title{ font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.sim10-panel-body{ flex: 1; display: flex; flex-direction: column; gap: 0; }
.sim10-panel-placeholder{ font-size: 12px; color: var(--ink-3); font-style: italic; padding: 14px; background: rgba(0,0,0,.02); border-radius: 8px; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.sim10-panel-placeholder sub{ font-size: .75em; vertical-align: sub; line-height: 0; }
/* simbolik layers */
.sim10-simbolik-layer{ padding: 12px 2px; border-bottom: 1px dashed var(--line); }
.sim10-simbolik-layer:last-child{ border-bottom: none; }
.sim10-layer-tag{ font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.sim10-simbolik-layer-3{ background: rgba(124,58,237,.05); border-radius: 8px; padding: 12px; }
/* F3b · Layer 1 sub-sections */
.sim10-rumus-utama{ font-size: 15px; font-weight: 700; text-align: center; color: var(--ink); padding: 10px 0; margin-bottom: 10px; }
.sim10-rumus-utama sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-konversi-box{ background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.sim10-konversi-title{ font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.sim10-konversi-title sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-konversi-step{ margin-bottom: 9px; font-size: 12.5px; line-height: 1.5; }
.sim10-konversi-step:last-of-type{ margin-bottom: 0; }
.sim10-step-label{ font-weight: 700; margin-right: 4px; }
.sim10-step-formula{ color: var(--ink); }
.sim10-step-formula sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-step-expansion{ padding-left: 52px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sim10-step-result{ padding-left: 52px; color: #b91c1c; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim10-konversi-note{ margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.sim10-konversi-note sup{ font-size: .72em; vertical-align: super; line-height: 0; }
.sim10-substitusi-final{ margin-top: 10px; }
.sim10-final-label{ font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.sim10-final-formula{ font-size: 13px; color: var(--ink); padding-left: 6px; }
.sim10-final-formula sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-final-expansion{ font-size: 13px; color: var(--ink-2); padding-left: 6px; font-variant-numeric: tabular-nums; }
.sim10-final-result{ font-size: 16px; font-weight: 800; color: #b91c1c; padding-left: 6px; padding-top: 4px; font-variant-numeric: tabular-nums; }
/* F3c · Layer 3 ΔP featured */
.sim10-deltap-featured{ padding: 4px 0; }
.sim10-deltap-heading{ font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.sim10-deltap-formula-line{ font-size: 13px; color: var(--ink-2); padding-left: 6px; margin-bottom: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sim10-deltap-formula-line sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-deltap-result-box{ text-align: center; padding: 16px 8px; margin: 8px 0; border-radius: 8px; background: linear-gradient(180deg, rgba(185,28,28,.04) 0%, rgba(185,28,28,.08) 100%); border: 1px solid rgba(185,28,28,.15); }
.sim10-deltap-result{ font-size: 2.4rem; font-weight: 800; color: #b91c1c; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* F3d · Panel Makro */
.sim10-panel-makro-body{ display: flex; flex-direction: column; gap: 12px; }
.sim10-makro-digital{ text-align: center; padding: 12px 8px; border-radius: 8px; background: linear-gradient(180deg, rgba(21,128,61,.04) 0%, rgba(21,128,61,.08) 100%); border: 1px solid rgba(21,128,61,.15); }
.sim10-makro-digital-label{ font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.sim10-makro-digital-value{ font-size: 1.7rem; font-weight: 800; color: #15803d; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim10-makro-svg-container{ display: flex; justify-content: center; align-items: center; min-height: 240px; }
.sim10-makro-svg{ width: 100%; max-width: 190px; height: auto; }
.sim10-makro-disclaimer{ font-size: 10.5px; color: var(--ink-3); padding: 8px 2px 0; border-top: 1px dashed var(--line); line-height: 1.45; }
.sim10-makro-disclaimer-item{ margin: 0 0 6px; }
.sim10-makro-disclaimer-item:last-child{ margin-bottom: 0; }
/* F3e · Panel Sub-mikro */
.sim10-panel-sub-body{ position: relative; min-height: 300px; }
.sim10-sub-svg-container{ position: relative; width: 100%; display: flex; justify-content: center; }
.sim10-sub-svg{ width: 100%; max-width: 250px; height: auto; }
.sim10-sub-legend{ position: absolute; top: 6px; right: 6px; background: rgba(30,41,59,.85); color: #f1f5f9; padding: 6px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 500; line-height: 1.5; z-index: 2; min-width: 76px; }
.sim10-sub-legend-item{ display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sim10-sub-legend-swatch{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* F3g · Callouts (base pattern reusable F3h/F3i) */
.sim10-callouts-container{ padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sim10-callout{ border-radius: 8px; padding: 18px 22px; border-left: 4px solid; }
.sim10-callout-header{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.08); }
.sim10-callout-title{ font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.sim10-callout-body{ font-size: 14px; line-height: 1.65; color: #1f2937; }
.sim10-callout-body sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim10-callout-body sup{ font-size: .72em; vertical-align: super; line-height: 0; }
.sim10-callout-lead{ font-weight: 500; margin: 0 0 12px; color: #111827; }
.sim10-callout-paragraph{ margin: 0 0 12px; }
.sim10-callout-conclusion{ margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,.1); font-weight: 500; }
.sim10-callout-note{ margin-top: 16px; padding: 12px 16px; background: rgba(0,0,0,.03); border-radius: 6px; font-size: 12.5px; color: #4b5563; line-height: 1.55; }
.sim10-callout-mekanisme{ background: #eff6ff; border-left-color: #2563eb; }
.sim10-callout-mekanisme .sim10-callout-title{ color: #1e40af; }
.sim10-callout-miskonsepsi{ background: #fef2f2; border-left-color: #dc2626; }
.sim10-callout-miskonsepsi .sim10-callout-title{ color: #991b1b; }
.sim10-miskonsepsi-item{ margin-top: 14px; padding: 14px 16px; background: #fff; border-radius: 6px; border: 1px solid #fecaca; }
.sim10-miskonsepsi-item:first-of-type{ margin-top: 8px; }
.sim10-miskonsepsi-heading{ font-weight: 700; font-size: 15px; color: #991b1b; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #fecaca; }
.sim10-miskonsepsi-row{ display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 4px; line-height: 1.55; font-size: 13.5px; }
.sim10-miskonsepsi-row:last-child{ margin-bottom: 0; }
.sim10-miskonsepsi-label{ font-weight: 700; flex-shrink: 0; min-width: 130px; font-size: 13px; }
.sim10-miskonsepsi-text{ flex: 1; }
.sim10-miskonsepsi-salah{ background: #fee2e2; color: #7f1d1d; }
.sim10-miskonsepsi-salah .sim10-miskonsepsi-label{ color: #dc2626; }
.sim10-miskonsepsi-benar{ background: #dcfce7; color: #14532d; }
.sim10-miskonsepsi-benar .sim10-miskonsepsi-label{ color: #16a34a; }
.sim10-miskonsepsi-alasan{ background: #ffedd5; color: #7c2d12; }
.sim10-miskonsepsi-alasan .sim10-miskonsepsi-label{ color: #ea580c; }
/* footer */
.sim10-footer{ flex: none; display: flex; padding: 16px 22px; border-top: 1px solid var(--line); gap: 24px; align-items: flex-end; background: #fff; max-width: 100%; }
.sim10-control-dropdown{ display: flex; flex-direction: column; gap: 6px; width: 200px; flex: none; }
.sim10-control-slider{ flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.sim10-control-label{ font-weight: 700; font-size: 13px; color: var(--ink); }
.sim10-slider-label-row{ display: flex; justify-content: space-between; align-items: baseline; }
.sim10-slider-value{ font-weight: 800; font-size: 14px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sim10-control-slider input[type=range]{ width: 100%; }
.sim10-slider-range{ display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.sim10-select{ padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg-2); cursor: pointer; }
.sim10-btn-reset{ padding: 9px 18px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; flex: none; }
.sim10-btn-reset:hover{ background: var(--line); }
@media (max-width: 1023px){ .sim10-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   SIM-11 — Diagram Fase (Kenaikan Titik Didih & Penurunan Titik Beku · skeleton F4a)
   ============================================================ */
.sim11-dock{ position: fixed; inset: 0; width: 100%; background: var(--bg-2); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim11-dock *, .sim11-dock *::before, .sim11-dock *::after{ box-sizing: border-box; }
body.sim11-open .sim11-dock{ transform: none; }
@media (max-width: 880px){ body.sim11-open{ overflow: hidden; } }
.sim11-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.sim11-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#e11d48,#f59e0b); }
.sim11-ic svg{ width: 20px; height: 20px; }
.sim11-ttl{ flex: 1; min-width: 0; }
.sim11-crumb{ font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.sim11-ttl h4{ margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.sim11-subtitle{ margin: 3px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.sim11-back-btn{ flex: none; }
.sim11-back-btn svg{ width: 15px; height: 15px; }
.sim11-scroll{ flex: 1; overflow-y: auto; max-width: 100%; overflow-x: hidden; }
/* D-SIM11 · 2-col asimetris 40:60 — kiri: Makro (atas) + Sub-mikro (bawah) stacked; kanan: Simbolik full-height */
.sim11-grid{ display: grid; grid-template-columns: 40% 60%; gap: 12px 16px; align-items: start; padding: 16px 20px; max-width: 100%; overflow-x: hidden; }
.sim11-panel-makro{ grid-column: 1; grid-row: 1; }
.sim11-panel-submikro{ grid-column: 1; grid-row: 2; }
.sim11-panel-simbolik{ grid-column: 2; grid-row: 1 / span 2; }
.sim11-panel{ background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 12px; padding: 14px; min-height: 380px; display: flex; flex-direction: column; min-width: 0; }
.sim11-panel-header{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.sim11-panel-makro{ border-top-color: #16a34a; }
.sim11-panel-submikro{ border-top-color: #2563eb; }
.sim11-panel-simbolik{ border-top-color: #7c3aed; }
.sim11-panel-makro .sim11-panel-header{ color: #16a34a; }
.sim11-panel-submikro .sim11-panel-header{ color: #2563eb; }
.sim11-panel-simbolik .sim11-panel-header{ color: #7c3aed; }
.sim11-panel-body{ flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sim11-panel-placeholder{ font-size: 12px; color: var(--ink-3); font-style: italic; padding: 14px; background: rgba(0,0,0,.02); border-radius: 8px; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.sim11-panel-live{ font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; padding: 10px 12px; background: rgba(0,0,0,.03); border-radius: 8px; line-height: 1.6; overflow-wrap: break-word; }
/* F4b · Panel Simbolik Layer 1a + 1b */
.sim11-simbolik-layer{ padding: 12px 2px; border-bottom: 1px dashed var(--line); }
.sim11-simbolik-layer:last-child{ border-bottom: none; }
.sim11-layer-tag{ font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.sim11-identitas-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim11-identitas-col{ padding: 12px; border-radius: 8px; border-left: 3px solid transparent; background: transparent; transition: opacity .2s, background .2s, border-color .2s; }
.sim11-identitas-col.is-muted{ opacity: .55; }
.sim11-identitas-col.is-active{ opacity: 1; }
#sim11-identitas-didih.is-active{ background: #ffedd5; border-left-color: #c2410c; }
#sim11-identitas-beku.is-active{ background: #dbeafe; border-left-color: #1e40af; }
.sim11-identitas-label{ font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.sim11-identitas-col.is-active .sim11-identitas-label{ font-weight: 800; color: var(--ink); }
.sim11-identitas-rumus{ font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim11-identitas-rumus em{ font-style: italic; }
.sim11-identitas-rumus sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim11-identitas-note{ margin-top: 10px; font-size: 12px; font-style: italic; color: #6b7280; line-height: 1.5; }
.sim11-identitas-note em{ font-style: italic; }
.sim11-subst{ display: flex; flex-direction: column; gap: 14px; }
.sim11-subst-calc{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.7; }
.sim11-subst-row{ display: grid; grid-template-columns: 6.5em 1fr; column-gap: 6px; }
.sim11-subst-lhs{ color: var(--ink); font-weight: 600; }
.sim11-subst-lhs sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.sim11-subst-rhs{ color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sim11-subst-rhs.sim11-subst-result{ color: #7c3aed; font-weight: 800; }
/* F4c · Panel Simbolik Layer 2 featured */
.sim11-featured-subheader{ font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sim11-featured-recap{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.sim11-featured-box{ text-align: center; padding: 26px 40px; border-radius: 10px; background: #fce7f3; border: 1px solid rgba(190,24,93,.15); }
/* F4d · Panel Simbolik Layer 3 diagram fase (fix1: palette Didih/Beku + region + kompres) */
.sim11-l3-subheader{ font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px; }
.sim11-l3-svg{ display: block; width: 100%; height: auto; }
.sim11-l3-axis line{ stroke: #9ca3af; stroke-width: 1; }
.sim11-l3-tick text{ font-size: 10px; fill: #6b7280; font-variant-numeric: tabular-nums; }
.sim11-l3-axisname{ font-size: 11px; font-weight: 600; fill: #374151; }
.sim11-l3-ref{ stroke: #9ca3af; stroke-width: 1; stroke-dasharray: 5 4; }
.sim11-l3-reflabel{ font-size: 10px; fill: #6b7280; }
.sim11-l3-region text{ font-size: 11px; font-weight: 600; fill: #6b7280; opacity: .7; letter-spacing: .05em; }
.sim11-l3-svg path{ fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sim11-l3-curve-gas-pure{ stroke: #c2410c; }
.sim11-l3-curve-gas-sol{ stroke: #f97316; }
.sim11-l3-curve-solid-pure{ stroke: #1e40af; }
.sim11-l3-curve-solid-sol{ stroke: #3b82f6; }
.sim11-l3-shift{ transition: transform .18s ease-out; }
.sim11-l3-drop{ stroke-width: 1; stroke-dasharray: 3 3; }
.sim11-l3-drop-tb{ stroke: #fed7aa; }
.sim11-l3-drop-tf{ stroke: #bfdbfe; }
.sim11-l3-dot-tb-pure{ fill: #c2410c; }
.sim11-l3-dot-tf-pure{ fill: #1e40af; }
.sim11-l3-dot-sol{ transition: r .18s ease-out; }
.sim11-l3-dot-tb-sol{ fill: #f97316; }
.sim11-l3-dot-tf-sol{ fill: #3b82f6; }
.sim11-l3-dot-tb-sol.is-focus{ filter: drop-shadow(0 0 4px rgba(249,115,22,.9)); }
.sim11-l3-dot-tf-sol.is-focus{ filter: drop-shadow(0 0 4px rgba(59,130,246,.9)); }
.sim11-l3-svg text[class*="sim11-l3-label"]{ paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.sim11-l3-label-tb-pure, .sim11-l3-label-tf-pure, .sim11-l3-label-tb-sol, .sim11-l3-label-tf-sol{ font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim11-l3-label-tb-pure{ fill: #c2410c; }
.sim11-l3-label-tb-sol{ fill: #9a3412; }
.sim11-l3-label-tf-pure{ fill: #1e40af; }
.sim11-l3-label-tf-sol{ fill: #1e3a8a; }
.sim11-l3-legend{ display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 8px; font-size: 12px; color: #4b5563; }
.sim11-l3-legend-item{ display: flex; align-items: center; gap: 8px; }
.sim11-l3-legend-line{ display: block; width: 22px; height: 0; border-top: 3px solid currentColor; border-radius: 2px; }
.sim11-l3-legend-didih{ color: #c2410c; }
.sim11-l3-legend-beku{ color: #1e40af; }
.sim11-l3-note{ font-size: 9px; font-style: italic; fill: #9ca3af; }
.sim11-featured-value{ font-size: 3rem; font-weight: 800; color: #be185d; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sim11-featured-value .sim11-featured-unit{ font-size: .55em; font-weight: 700; margin-left: .12em; }
.sim11-footer{ flex: none; display: flex; padding: 16px 22px; border-top: 1px solid var(--line); gap: 24px; align-items: flex-end; background: #fff; max-width: 100%; flex-wrap: wrap; }
.sim11-control-group{ display: flex; flex-direction: column; gap: 6px; flex: none; }
.sim11-control-label{ font-weight: 700; font-size: 13px; color: var(--ink); }
.sim11-toggle{ display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.sim11-toggle-btn{ padding: 8px 16px; border: none; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.sim11-toggle-btn.is-active{ background: var(--brand); color: #fff; }
.sim11-toggle-fenomena .sim11-toggle-btn.is-active{ background: #ea580c; color: #fff; }
.sim11-control-slider{ flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 460px; }
.sim11-slider-label-row{ display: flex; justify-content: space-between; align-items: baseline; }
.sim11-slider-value{ font-weight: 800; font-size: 14px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sim11-control-slider input[type=range]{ width: 100%; }
.sim11-slider-range{ display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.sim11-btn-reset{ padding: 9px 18px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; flex: none; }
.sim11-btn-reset:hover{ background: var(--line); }
@media (max-width: 1023px){ .sim11-grid{ grid-template-columns: 1fr; } .sim11-panel-makro, .sim11-panel-submikro, .sim11-panel-simbolik{ grid-column: 1; grid-row: auto; } }

/* ============================================================
   SIM-01 — Halaman Simulasi Fullscreen Internal (Difusi Partikel & Entropi)
   Migrasi F1a-1: modal/dock → halaman fullscreen · skeleton 3 panel Johnstone
   ============================================================ */
.sim01-dock.sim01-fs{
  position: fixed; inset: 0; width: 100%;
  background: var(--bg-2); border-left: none; box-shadow: none;
  display: flex; flex-direction: column; z-index: 130;
  transform: translateY(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
body.sim01-open .sim01-dock.sim01-fs{ transform: none; }

/* header halaman simulasi */
.s1-fs-head{ display: flex; align-items: center; gap: 13px; flex: none;
  padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.s1-fs-head .s9-ic{ width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.s1-fs-head .s9-ic svg{ width: 21px; height: 21px; }
.s1-fs-ttl{ min-width: 0; margin-right: auto; }
.s1-fs-ttl h4{ margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; }
.s1-fs-ttl p{ margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.s1-fs-back{ flex: none; white-space: nowrap; }
.s1-fs-back svg{ width: 15px; height: 15px; }

/* area utama — 3 panel */
.s1-fs-main{ flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.s1-panels{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 100%; min-height: 0; }

.s1-panel{ display: flex; flex-direction: column; min-height: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.s1-panel-head{ flex: none; padding: 13px 15px; border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.s1-badge{ display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.s1-badge.macro{  background: #e9f7ee; color: #15803d; }
.s1-badge.micro{  background: #e6effe; color: #1d4ed8; }
.s1-badge.symbol{ background: #f3ecfe; color: #7c3aed; }
.s1-panel-label{ margin-top: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--ink);
  line-height: 1.35; text-transform: uppercase; }
.s1-panel-label small{ display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; text-transform: none; color: var(--ink-3); letter-spacing: 0; }

.s1-panel-body{ flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 15px; }

/* kanvas host — mengisi panel */
.s1-canvas-host{ flex: 1; min-height: 240px; position: relative; border-radius: 12px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line-2); }
.s1-canvas-host.dark{ background: #1e293b; border-color: #1e293b; }
.s1-canvas-host .s9-canvas{ display: block; width: 100%; height: 100%; }

/* Panel A — status makro */
.s1-macro-foot{ flex: none; display: flex; flex-direction: column; gap: 8px; }
.s1-state{ display: inline-flex; align-self: flex-start; font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  padding: 5px 13px; border-radius: 999px; transition: background .3s, color .3s; }
.s1-state[data-state="hetero"]{ background: #f3ecfe; color: #7c3aed; }
.s1-state[data-state="spread"]{ background: #fff2e0; color: #b45309; }
.s1-state[data-state="homo"]{ background: #e9f7ee; color: #15803d; }
.s1-state-desc{ margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* Panel C — placeholder simbolik (F1a-2) */
.s1-symbol-ph{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 24px 18px;
  border: 1.5px dashed var(--line); border-radius: 12px; background: var(--brand-softer); }
.s1-symbol-ph-ic{ width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: #7c3aed; background: #f3ecfe; }
.s1-symbol-ph-eq{ margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--ink); font-style: italic; }
.s1-symbol-ph-tx{ margin: 0; max-width: 30ch; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.s1-symbol-ph-tx b{ color: #7c3aed; }
.s1-symbol-ph-note{ font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; }

/* ===== footer kontrol ===== */
.s1-fs-controls{ flex: none; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 14px 22px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 22px -18px rgba(13,22,45,.4); }
.s1-fs-controls .ctl{ margin-bottom: 0; }
.s1-mode{ display: flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 11px; flex: none; }
.s1-mode button{ border: none; background: transparent; padding: 9px 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.s1-mode button.on{ background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.sim01-dock[data-mode="AT"] .s1-si{ display: none; }
.sim01-dock[data-mode="SI"] .s1-at{ display: none; }

.s1-ctl-group{ display: flex; align-items: flex-end; gap: 18px; }
.s1-at.s1-ctl-group .ctl{ min-width: 190px; }
.s1-si.s1-ctl-group .ctl{ min-width: 300px; }
.s1-playrow{ display: flex; gap: 8px; }
.s1-pbtn{ display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13px; cursor: pointer; min-height: 40px; white-space: nowrap; }
.s1-pbtn.ghost{ background: #fff; color: var(--brand); }
.s1-ctl-actions{ display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Tablet — panel stack vertikal */
@media (max-width: 1023px){
  .s1-fs-main{ overflow-y: auto; }
  .s1-panels{ grid-template-columns: 1fr; height: auto; gap: 16px; }
  .s1-canvas-host{ min-height: 280px; }
}
/* Mobile */
@media (max-width: 767px){
  body.sim01-open{ overflow: hidden; }
  .s1-fs-head{ padding: 12px 15px; gap: 10px; }
  .s1-fs-ttl h4{ font-size: 15px; }
  .s1-fs-back span{ display: none; }
  .s1-fs-main{ padding: 15px; }
  .s1-fs-controls{ padding: 13px 15px; gap: 14px; }
  .s1-ctl-group, .s1-si.s1-ctl-group .ctl, .s1-at.s1-ctl-group .ctl{ width: 100%; min-width: 0; }
  .s1-ctl-actions{ width: 100%; margin-left: 0; }
  .s1-ctl-actions .btn{ flex: 1; }
}

/* ============================================================
   SIM-01 · F1a-2 — 2 panel, narasi visual, trigger, guided linking
   ============================================================ */
/* layout 2 panel proporsi 1:1 */
.s1-panels.s1-panels-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px){ .s1-panels.s1-panels-2{ grid-template-columns: 1fr; } }

/* trigger observasi */
.s1-triggers{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.s1-triggers-lbl{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.s1-trig{ position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; min-height: 40px; }
.s1-trig svg{ width: 15px; height: 15px; }
.s1-trig:hover{ border-color: var(--brand); color: var(--brand); }
.s1-trig.on{ background: var(--brand); border-color: var(--brand); color: #fff; }
/* F1a-3c · tooltip hover 3 tombol Amati */
.s1-trig[data-tip]::after{ content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1F2937; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 8px 12px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s; z-index: 30; box-shadow: var(--shadow-sm); }
.s1-trig[data-tip]:hover::after{ opacity: 1; transition-delay: .3s; }

/* makro scene */
.s1-canvas-host.s1-makro{ background: #f9fafb; border-color: var(--line); }
.s1-canvas-host.s1-makro .s9-canvas{ position: relative; z-index: 1; }
.s1-canvas-host.s1-makro .s1-makro-svg{ position: relative; z-index: 1; display: block; width: 100%; height: 100%; transition: opacity .25s; }
/* F1a-3c · Amati Entropi mode overlay: redupkan scene (bukan hapus), snapshot melayang di atas */
.s1-makro-scene{ position: absolute; inset: 0; transition: opacity .25s; }
.s1-canvas-host.s1-makro.amati-entropi .s1-makro-scene{ opacity: .4; }
.s1-makro-cap{ position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.4;
  background: rgba(249,250,251,.82); backdrop-filter: blur(2px); padding: 6px 10px; border-radius: 9px; }
.s1-makro-temp{ position: absolute; right: 12px; top: 12px; z-index: 4; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; padding: 5px 13px; border-radius: 999px; transition: background .3s, color .3s, opacity .25s; }
.s1-makro-temp[data-band="low"]{  background: #dbeafe; color: #1e40af; }
.s1-makro-temp[data-band="mid"]{  background: #dcfce7; color: #166534; }
.s1-makro-temp[data-band="high"]{ background: #fed7aa; color: #9a3412; }

.s1-drop-btn{ align-self: flex-start; }
.sim01-dock[data-mode="AT"] .s1-drop-btn{ display: none; }

/* callout kualitatif */
.s1-callout{ flex: none; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 11px 13px; }
.s1-callout b{ color: var(--ink-2); font-weight: 800; }

/* legenda submikro (overlay sudut) */
.s1-legend-over{ position: absolute; left: 9px; bottom: 9px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.s1-legend-over span{ display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  color: #cbd5e1; background: rgba(15,23,42,.6); padding: 3px 8px; border-radius: 7px; }
.s1-legend-over i{ width: 10px; height: 10px; border-radius: 50%; flex: none; }
.s1-legend-over i.dye{ background: #ec4899; }
.s1-legend-over i.wat{ background: #93c5fd; }

/* grid 3×3 overlay (Amati Homogenisasi) */
.s1-grid3{ position: absolute; inset: 0; z-index: 5; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.s1-grid3 i{ border: 1px dashed rgba(55,65,81,.5); }
.s1-grid3.dark i{ border-color: rgba(226,232,240,.4); }

/* snapshot awal vs sekarang (Amati Entropi) */
.s1-snap{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 80%; height: 60%; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(2px);
  border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 14px 36px -12px rgba(13,22,45,.4); }
.s1-snap-arrow{ flex: none; display: inline-flex; color: #9d174d; }
.s1-snap-arrow svg{ width: 34px; height: 18px; }
.s1-snap-cell{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; justify-content: center; }
.s1-snap-beaker{ width: 100%; max-width: 118px; aspect-ratio: 3/4; border-radius: 8px 8px 12px 12px;
  border: 2px solid #374151; }
.s1-snap-beaker.awal{ background: radial-gradient(circle at 50% 20%, rgba(236,72,153,.92) 0 12%, rgba(236,72,153,.15) 30%, #eff6ff 55%); }
.s1-snap-beaker.now{  background: linear-gradient(#eff6ff, #eff6ff) padding-box, rgba(236,72,153,.5); background: rgba(236,72,153,.42); }
.s1-snap-cell figcaption{ font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.4; }

/* FIX F1a-3a-1 · overlay Panel Makro (snapshot Amati Entropi + grid Homogenisasi)
   harus benar-benar tersembunyi saat default — atribut [hidden] tadinya kalah
   oleh `display: grid` di atas, sehingga snapshot residual menutupi 5 aset Frame 1.
   Tombol Amati tetap berfungsi: klik menghapus [hidden] → overlay muncul kembali. */
#s1Snap[hidden], #s1Grid3[hidden]{ display: none !important; }

/* guided linking dinamis */
.s1-guide-link{ margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 18px; }
.s1-guide-link .gl-lvl{ font-weight: 800; }
.s1-guide-link .gl-lvl.macro{ color: #15803d; }
.s1-guide-link .gl-lvl.micro{ color: #1d4ed8; }
.s1-guide-link .gl-lvl.ent{ color: #7c3aed; }
.s1-guide-link .gl-arrow{ flex: none; display: inline-flex; color: var(--ink-3); }
.s1-guide-link .gl-arrow svg{ width: 26px; height: 16px; }

/* slider suhu non-aktif di mode AT */
.sim01-dock[data-mode="AT"] #s1Temp{ opacity: .5; pointer-events: none; }

@media (max-width: 767px){
  .s1-guide-link{ font-size: 13.5px; }
  .s1-makro-cap{ font-size: 12.5px; }
}

/* ============================================================
   BATCH D-SIM01 · COMPRESS VERTIKAL (target no-scroll @1080p)
   Semua override DISKOP ke `.sim01-dock` supaya SIM-02..20
   (yang berbagi class .s1-*) TIDAK ikut terpengaruh.
   ============================================================ */
/* Fix 1 — padding & spacing */
.sim01-dock .s1-fs-main{ padding: 14px 22px; }
.sim01-dock .s1-triggers{ margin-bottom: 12px; }
.sim01-dock .s1-panel-head{ padding: 10px 15px; }
.sim01-dock .s1-panel-label{ margin-top: 5px; }
.sim01-dock .s1-panel-body{ padding: 12px; gap: 10px; }
/* Fix 2 — kotak animasi Makro & Sub-mikro ~410 px (tinggi tetap, tidak melar) */
.sim01-dock .s1-panels.s1-panels-2{ height: auto; align-items: start; }
.sim01-dock .s1-canvas-host{ flex: none; height: 410px; min-height: 0; }
/* Fix 4 — narasi (callout) & chain narrative (guide-link) */
.sim01-dock .s1-callout{ padding: 8px 12px; }
.sim01-dock .s1-guide-link{ margin-top: 12px; padding: 10px 16px; }
/* Fix 3 — bottom controls (sudah 1 baris flex-wrap, tinggal rapatkan padding) */
.sim01-dock .s1-fs-controls{ padding: 12px 22px; }
@media (max-width: 1023px){
  .sim01-dock .s1-panels.s1-panels-2{ height: auto; }
  .sim01-dock .s1-canvas-host{ height: 340px; }
}

/* ============================================================
   BATCH D-SIM02 · COMPRESS VERTIKAL (target no-scroll @1080p)
   Semua override DISKOP ke `.sim02-dock` — SIM lain (yang berbagi
   class .s1-*/.s2-*) TIDAK terpengaruh.
   ============================================================ */
/* Fix 1 — padding & spacing */
.sim02-dock .s1-fs-main{ padding: 14px 22px; }
.sim02-dock .s1-triggers{ margin-bottom: 12px; }
.sim02-dock .s1-panel-body{ padding: 12px; gap: 10px; }
/* Fix 5 — chip kolom + judul dalam 1 baris */
.sim02-dock .s1-panel-head{ display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.sim02-dock .s1-panel-label{ margin-top: 0; }
/* Fix 2 — kotak Makro / Sub-mikro / Simbolik ~410 px (tinggi tetap sejajar) */
.sim02-dock .s1-panels.s2-panels{ height: auto; align-items: start; }
.sim02-dock .s1-canvas-host{ flex: none; height: 410px; min-height: 0; }
.sim02-dock .s2-sym{ padding: 14px 12px; gap: 9px; }
/* Fix 4 — narasi (callout) & chain narrative (guide-link) */
.sim02-dock .s1-callout{ padding: 8px 12px; }
.sim02-dock .s1-guide-link{ margin-top: 12px; padding: 10px 16px; }
/* Fix 3 — bottom controls (sudah flex-wrap, rapatkan padding) */
.sim02-dock .s1-fs-controls{ padding: 12px 22px; }
@media (max-width: 1023px){
  .sim02-dock .s1-panels.s2-panels{ height: auto; }
  .sim02-dock .s1-canvas-host{ height: 340px; }
}

/* ============================================================
   SIM-02 DOCK — Like Dissolves Like
   ============================================================ */
:root{ --sim02-w: clamp(400px, 40vw, 600px); }
/* F1b-1: SIM-02 halaman fullscreen 3 panel (pola SIM-01) */
.sim02-dock.sim02-fs{
  position: fixed; inset: 0; width: 100%;
  background: var(--bg-2); border-left: none; box-shadow: none;
  display: flex; flex-direction: column; z-index: 130;
  transform: translateY(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
body.sim02-open .sim02-dock.sim02-fs{ transform: none; }

/* 3 panel: Makro 35% : Submikro 35% : Simbolik 30% (desktop) */
@media (min-width: 1024px){ .s2-panels{ grid-template-columns: 35fr 35fr 30fr; } }

/* dropdown + tombol kontrol SIM-02 */
.s2-select{ font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 40px; cursor: pointer; min-width: 150px; }
.s2-selects{ align-items: flex-end; gap: 14px; }
.sim02-dock[data-mode="AT"] .s2-si{ display: none; }

/* placeholder panel (konten diisi di F1b-2 / F1b-3) */
.s2-ph-host{ display: flex; align-items: center; justify-content: center; padding: 24px; }
.s2-ph{ margin: 0; max-width: 34ch; text-align: center; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.s2-ph.light{ color: #cbd5e1; }
/* F1b-2 · Panel Makro SIM-02 scene SVG */
.s1-canvas-host.s2-makro{ background: #f9fafb; border-color: var(--line); }
.s1-canvas-host.s2-makro .s2-makro-svg{ display: block; width: 100%; height: 100%; }
/* F1b-3b · Panel Submikro SIM-02 scene SVG (static endpoint state, 4 kombinasi) */
.s1-canvas-host.dark .s2-micro-svg{ display: block; width: 100%; height: 100%; }
/* F1b-5-fix-b · getaran ringan Level 1 (molekul Panel Submikro bergetar di tempat) */
.s2-mol{ animation: s2vib 1.7s ease-in-out infinite; will-change: transform; }
@keyframes s2vib{ 0%,100%{ transform: translate(0,0); } 30%{ transform: translate(1.3px,-0.9px); } 60%{ transform: translate(-1.1px,1px); } 85%{ transform: translate(0.7px,1.1px); } }
@media (prefers-reduced-motion: reduce){ .s2-mol{ animation: none; } }
/* F1b-3d-2 · sub-label state di bawah badge (tidak overlap) */
.s1-canvas-host.dark .s2-sublabel{ position: absolute; left: 9px; top: 33px; z-index: 3; font-size: 10px;
  font-weight: 600; color: #94A3B8; background: rgba(15,23,42,.5); padding: 2px 7px; border-radius: 6px; text-transform: lowercase; }
/* F1b-3d-2 · animasi kristal jatuh + ripple (Panel Makro) */
#s2Fall{ opacity: 0; }
#s2Fall.drop{ animation: s2fall .7s ease-in forwards; }
@keyframes s2fall{ 0%{ opacity: 1; transform: translateY(0); } 100%{ opacity: 0; transform: translateY(18px); } }
#s2Ripple{ opacity: 0; transform-origin: 370px 131px; }
#s2Ripple.go{ animation: s2rip .7s ease-out; }
@keyframes s2rip{ 0%{ opacity: .6; transform: scale(.25); } 100%{ opacity: 0; transform: scale(1.4); } }
/* F1b-3c · Panel Simbolik SIM-02 (5 zona minimalis, 4 kombinasi) */
.s1-canvas-host.s2-sym-host{ background: #ffffff; border-color: var(--line); }
.s2-sym{ display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%;
  padding: 18px 14px; box-sizing: border-box; text-align: center; }
.s2-sym-badge{ font-size: 14px; font-weight: 800; letter-spacing: .01em; padding: 7px 16px; border-radius: 999px; border: 1px solid; }
.s2-sym-badge.larut{ background: #DCFCE7; color: #166534; border-color: #22C55E; }
.s2-sym-badge.tidak{ background: #FEE2E2; color: #991B1B; border-color: #EF4444; }
.s2-sym-badge.sedikit{ background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
.s2-sym-badge.before{ background: #F3F4F6; color: #4B5563; border-color: #9CA3AF; }
.s2-sym-eq{ width: 100%; box-sizing: border-box; font-family: 'Cambria Math', 'Times New Roman', Georgia, serif;
  font-size: 15.5px; color: #111827; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px;
  padding: 10px 8px; line-height: 1.4; }
.s2-sym-eq sup{ font-size: .72em; }
.s2-sym-pol{ display: flex; flex-direction: column; gap: 6px; width: 100%; }
.s2-sym-polrow{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; color: #374151; }
.s2-sym-dot{ width: 10px; height: 10px; border-radius: 50%; flex: none; }
.s2-sym-pk{ color: #9CA3AF; font-size: 11px; }
.s2-sym-polrow b{ color: #111827; font-weight: 700; }
.s2-sym-tag{ font-size: 11px; font-weight: 700; color: #4B5563; background: #F3F4F6; border: 1px solid #E5E7EB;
  border-radius: 5px; padding: 1px 7px; }
.s2-sym-force{ font-size: 12.5px; font-weight: 700; color: #4C1D95; background: #EEF2FF; border: 1px solid #A5B4FC;
  border-radius: 5px; padding: 7px 12px; }
.s2-sym-eq.muted{ color: #9CA3AF; font-style: normal; }
.s2-sym-force.muted{ color: #9CA3AF; background: #F3F4F6; border-color: #E5E7EB; }
.s2-sym-foot{ margin-top: auto; font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.5;
  padding-top: 12px; border-top: 1px solid #E5E7EB; width: 100%; box-sizing: border-box; }
/* notasi panah dicoret (↛ fallback) */
.s2-eq-nrarrow{ position: relative; display: inline-block; padding: 0 2px; }
.s2-eq-nrarrow::after{ content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  border-top: 1.6px solid #991B1B; transform: rotate(-24deg); }
/* F1b-4 · Guided linking SIM-02 (3 level Johnstone berwarna) */
#s2GuideLink{ display: block; font-size: 13.5px; font-weight: 400; line-height: 1.8; color: #374151;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; box-shadow: none; padding: 12px 16px; }
#s2GuideLink b{ font-weight: 700; color: #1F2937; }
#s2GuideLink .gl-ar{ color: #6B7280; font-weight: 700; margin: 0 1px; }
#s2GuideLink .gl-sm{ color: #2563EB; font-weight: 700; }
#s2GuideLink .gl-mk{ color: #16A34A; font-weight: 700; }
#s2GuideLink .gl-sy{ color: #7C3AED; font-weight: 700; }
/* F1b-5 · 3 tombol Amati SIM-02: overlay + dim + compare grid */
.s2-amati-svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.s1-canvas-host.dark.s2-amati-dim .s2-micro-svg{ opacity: .26; transition: opacity .25s; }
.s1-canvas-host.s2-makro.s2-amati-dim .s2-makro-svg{ opacity: .4; transition: opacity .25s; }
/* F1b-5-fix-a-3 · PAKSA Panel Makro visible saat Amati Interaksi/Polaritas (kecuali Perbandingan = dim 40%) */
#sim02Dock .s1-canvas-host.s2-makro{ opacity: 1 !important; visibility: visible !important; display: block !important; }
#sim02Dock .s1-canvas-host.s2-makro .s2-makro-svg{ opacity: 1 !important; visibility: visible !important; display: block !important; }
#sim02Dock .s1-canvas-host.s2-makro.s2-amati-dim .s2-makro-svg{ opacity: .4 !important; }
.s1-trig.is-locked{ opacity: .55; }
.s2-compare-ov{ position: absolute; left: 5%; top: 12%; width: 90%; height: 76%; z-index: 5;
  background: rgba(255,255,255,.90); backdrop-filter: blur(2px); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-md, 0 8px 24px rgba(15,23,42,.14));
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 12px; box-sizing: border-box; }
.s2-compare-ov[hidden]{ display: none !important; }
.s2-cmp-box{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; background: #fff; }
.s2-cmp-box.cur{ border: 3px solid #DC2626; }
.s2-cmp-title{ font-size: 11.5px; font-weight: 700; color: #374151; text-align: center; }
.s2-cmp-beaker{ width: 46px; height: 40px; border: 2px solid #9fb2d4; border-top: none; border-radius: 0 0 7px 7px;
  position: relative; overflow: hidden; }
.s2-cmp-precip{ position: absolute; left: 0; right: 0; bottom: 0; height: 8px; }
.s2-cmp-badge{ font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.s2-cmp-badge.larut{ background: #DCFCE7; color: #166534; border-color: #22C55E; }
.s2-cmp-badge.tidak{ background: #FEE2E2; color: #991B1B; border-color: #EF4444; }
.s2-cmp-badge.sedikit{ background: #FEF3C7; color: #92400E; border-color: #F59E0B; }

@media (max-width: 767px){ body.sim02-open{ overflow: hidden; } }

/* ============================================================
   SIM-03 DOCK — Energetika Pembentukan Larutan (F1c-1 skeleton)
   Reuse pola fullscreen SIM-02
   ============================================================ */
.sim03-dock.sim03-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  display: flex; flex-direction: column; z-index: 130;
  transform: translateY(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
body.sim03-open .sim03-dock.sim03-fs{ transform: none; }
@media (max-width: 767px){ body.sim03-open{ overflow: hidden; } }

/* ============================================================
   SIM-04 · Pelarutan Fisik vs Reaksi Kimia — dock fullscreen (skeleton F2a)
   Reuse pola SIM-03; header colors reuse .s3-phead .macro/.micro/.symbol
   ============================================================ */
.sim04-dock.sim04-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column;
  will-change: transform;
}
body.sim04-open .sim04-dock.sim04-fs{ transform: none; }
@media (max-width: 767px){ body.sim04-open{ overflow: hidden; } }

/* 3 panel Johnstone setara */
.s4-panels{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px){ .s4-panels{ grid-template-columns: repeat(3, 1fr); } }
.s4-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB;
  border-radius: 12px; overflow: hidden; background: #fff; min-height: 500px; }

/* body panel split Gelas A | Gelas B */
.s4-pbody{ flex: 1; background: #fff; }
.s4-split{ display: grid; grid-template-columns: 1fr 1fr; }
.s4-split .s4-cell + .s4-cell{ border-left: 1px solid #E5E7EB; }
.s4-cell{ display: flex; flex-direction: column; padding: 12px; gap: 10px; min-height: 0; }
.s4-cell-hd{ font-size: 12.5px; font-weight: 700; color: #374151; text-align: center; }
.s4-ph-box{ flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 14px 10px; border: 1px dashed #E5E7EB; border-radius: 8px;
  background: #FAFAFA; color: #9CA3AF; font-size: 11.5px; font-style: italic; line-height: 1.4; }

/* F2b · scene kondisi awal Panel Makroskopik */
.s4-makro-scene{ position: relative; flex: 1; min-height: 0; display: flex;
  align-items: flex-end; justify-content: center; }
.s4-makro-scene svg{ width: 100%; height: 100%; max-height: 200px; }
.s4-status{ position: absolute; top: 2px; right: 4px; font-size: 9px; font-style: italic;
  color: #6B7280; }
.s4-makro-lbl{ font-size: 10px; color: #4B5563; text-align: center; line-height: 1.3; margin-top: 2px; }
/* F2c · state animasi Larutkan (sendok miring / zat jatuh + larut / gelembung CO2) */
#sim04Dock{ --s4k: 1; }
.s4-spoon{ transition: transform calc(.5s * var(--s4k)) ease-in-out; transform-box: view-box; transform-origin: 108px 45px; }
.s4-spoon.s4-tilt{ transform: rotate(34deg); }
.s4-zat{ transition: transform calc(.8s * var(--s4k)) cubic-bezier(.45,0,.55,1), opacity calc(2s * var(--s4k)) linear; transform-box: view-box; transform-origin: 108px 45px; }
.s4-zat.s4-tilt{ transform: rotate(34deg); }
.s4-zat.s4-fall{ transform: translateY(136px); }
.s4-zat.s4-dissolve{ opacity: 0; }
.s4-zat.s4-resetting{ transition: transform calc(.5s * var(--s4k)) ease, opacity calc(.5s * var(--s4k)) ease; }
.s4-bubble{ transform-box: view-box; }
@keyframes s4rise{ 0%{ opacity: 0; transform: translateY(0); } 15%{ opacity: .6; } 80%{ opacity: .6; } 100%{ opacity: 0; transform: translateY(-54px); } }
/* F2d · state animasi Uapkan (cairan surut) + Residu + uap */
.s4-liquid{ transition: transform calc(.5s * var(--s4k)) ease; transform-box: view-box; transform-origin: 92px 190px; }
.s4-liquid.s4-evap{ transition: transform calc(3s * var(--s4k)) linear; transform: scaleY(0.001); }
.s4-resid{ opacity: 0; }
.s4-resid.s4-show{ opacity: 1; }
.s4-resid.s4-uapreset{ transition: opacity calc(.5s * var(--s4k)) ease; }
.s4-residB-spots{ opacity: 0; }
.s4-residB-spots.s4-show{ transition: opacity calc(1s * var(--s4k)) ease; opacity: 1; }
.s4-residB-spots.s4-uapreset{ transition: opacity calc(.5s * var(--s4k)) ease; }
.s4-vapor ellipse{ transform-box: view-box; }
@keyframes s4vapor{ 0%{ opacity: 0; transform: translateY(0) scale(1); } 25%{ opacity: .4; } 100%{ opacity: 0; transform: translateY(-48px) scale(1.9); } }
/* F2e · Panel Submikroskopik: 2 state statis + cross-fade 500 ms */
.s4-sub-scene{ position: relative; flex: 1; min-height: 380px; width: 100%; border: 1px solid #EEF2FF; border-radius: 8px; background: #FCFDFF; overflow: hidden; }
.s4-sub-scene svg{ position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity calc(.5s * var(--s4k)) ease; }
.s4-sub-end{ opacity: 0; }
.s4-sub-scene.s4-sub-showend .s4-sub-init{ opacity: 0; }
.s4-sub-scene.s4-sub-showend .s4-sub-end{ opacity: 1; }
/* F2f · Panel Simbolik: placeholder <-> persamaan + badge (cross-fade sinkron F2e) */
.s4-sym-scene{ position: relative; flex: 1; min-height: 140px; width: 100%; }
.s4-sym-scene > div{ position: absolute; inset: 0; transition: opacity calc(.5s * var(--s4k)) ease; }
.s4-sym-end{ opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; text-align: center; }
.s4-sym-scene.s4-sym-showend .s4-sym-init{ opacity: 0; }
.s4-sym-scene.s4-sym-showend .s4-sym-end{ opacity: 1; }
.s4-eq{ font-size: 15px; line-height: 1.7; color: #111827; font-family: Arial, sans-serif; }
.s4-eq-cont{ display: inline-block; }
.s4-badge{ border-radius: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; }
.s4-badge-green{ background: #DCFCE7; color: #065F46; }
.s4-badge-orange{ background: #FED7AA; color: #9A3412; }
/* F2g · Panel Kriteria Pembeda: progressive fill 2 batch (placeholder <-> nilai, cross-fade) */
.s4-kc{ position: relative; display: block; min-height: 1.35em; }
.s4-krit-kesimpulan .s4-kc{ min-height: 2em; }
.s4-kph, .s4-kv{ transition: opacity calc(.45s * var(--s4k)) ease; }
.s4-kv{ position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.s4-krit-table tr.s4-filled .s4-kph{ opacity: 0; }
.s4-krit-table tr.s4-filled .s4-kv{ opacity: 1; }
/* F2h · tombol Amati Set B */
.s4-amati-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s4-amati-lbl{ font-size: 12px; color: #6B7280; font-weight: 600; margin-right: 2px; }
.s4-amati{ height: 34px; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; background: #fff; transition: background .15s ease, color .15s ease; }
.s4-amati-suhu{ border: 1px solid #6B7280; color: #4B5563; }
.s4-amati-suhu.active{ background: #4B5563; color: #fff; border-color: #4B5563; }
.s4-amati-makro{ border: 1px solid #22C55E; color: #15803D; }
.s4-amati-makro.active{ background: #DCFCE7; color: #065F46; }
.s4-amati-partikel{ border: 1px solid #3B82F6; color: #1E40AF; }
.s4-amati-partikel.active{ background: #DBEAFE; color: #1E40AF; }
.s4-amati-uji{ border: 1px solid #F59E0B; color: #92400E; }
.s4-amati-uji.active{ background: #FEF3C7; color: #92400E; }
@media (max-width: 767px){ .s4-amati{ flex: 1 1 44%; } }
/* F2h · termometer + angka suhu di Panel Makro (hanya saat Amati Suhu aktif) */
.s4-thermo{ position: absolute; top: 3px; left: 5px; display: none; align-items: center; gap: 3px; z-index: 2; }
.sim04-open .s4-show-thermo .s4-thermo,#sim04Dock.s4-show-thermo .s4-thermo{ display: flex; }
.s4-temp{ font-size: 12px; font-weight: 500; }
.s4-temp.neutral{ color: #6B7280; }
.s4-temp.cold{ color: #2563EB; }
.s4-temp.warm{ color: #DC2626; }
/* F2h · callout dinamis di kolom kanan Panel Kriteria Pembeda */
.s4-krit-reserved.s4-has-callout{ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; border: none; background: transparent; padding: 0; }
.s4-callout{ border-radius: 0; border-left: 3px solid #9CA3AF; padding: 12px 14px; background: #F3F4F6; }
.s4-callout-hd{ font-size: 13px; font-weight: 500; margin: 0 0 4px; }
.s4-callout-bd{ font-size: 12px; font-weight: 400; color: #374151; line-height: 1.5; margin: 0; }
.s4-callout.cat-suhu{ background: #F3F4F6; border-left-color: #4B5563; }
.s4-callout.cat-suhu .s4-callout-hd{ color: #374151; }
.s4-callout.cat-makro{ background: #DCFCE7; border-left-color: #22C55E; }
.s4-callout.cat-makro .s4-callout-hd{ color: #065F46; }
.s4-callout.cat-partikel{ background: #DBEAFE; border-left-color: #3B82F6; }
.s4-callout.cat-partikel .s4-callout-hd{ color: #1E40AF; }
.s4-callout.cat-uji{ background: #FEF3C7; border-left-color: #F59E0B; }
.s4-callout.cat-uji .s4-callout-hd{ color: #92400E; }
/* F2i · Tur Otomatis */
.s4-tur-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.s4-btn-tur{ height: 40px; padding: 8px 16px; border: 1px solid #7C3AED; border-radius: 6px; background: #fff; color: #5B21B6; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; }
.s4-btn-tur:hover{ background: #EDE9FE; }
.s4-btn-tur.active{ background: #7C3AED; color: #fff; }
.s4-btn-tur:disabled{ background: #9CA3AF; color: #fff; border-color: #9CA3AF; cursor: not-allowed; }
.s4-ctl-ph-inline{ flex: 1; min-width: 200px; padding: 8px 12px; }
.s4-amati:disabled{ opacity: .5; cursor: not-allowed; }
.s4-callout.cat-tur{ background: #EDE9FE; border-left-color: #7C3AED; }
.s4-callout.cat-tur .s4-callout-hd{ color: #5B21B6; }
/* F2j · tombol Speed multiplier */
.s4-speed-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s4-speed-lbl{ font-size: 12px; color: #6B7280; font-weight: 600; margin-right: 2px; }
.s4-speed{ padding: 6px 12px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; color: #374151; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background .15s ease; }
.s4-speed:hover{ background: #F3F4F6; }
.s4-speed.active{ background: #4B5563; color: #fff; border-color: #1F2937; }
/* F2j-b · tombol Pause/Resume + freeze animasi */
.s4-pause{ padding: 6px 12px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; color: #374151; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; margin-left: auto; }
.s4-pause:hover:not(:disabled){ background: #F3F4F6; }
.s4-pause.active{ background: #4B5563; color: #fff; border-color: #1F2937; }
.s4-pause:disabled{ color: #9CA3AF; border-color: #D1D5DB; cursor: not-allowed; }
#sim04Dock.s4-paused *{ animation-play-state: paused !important; }
/* F2j-c · tombol Repeat action terakhir */
.s4-repeat{ padding: 6px 12px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; color: #374151; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.s4-repeat:hover:not(:disabled){ background: #F3F4F6; }
.s4-repeat:disabled{ color: #9CA3AF; border-color: #D1D5DB; cursor: not-allowed; }

/* Panel 4 — Kriteria Pembeda (netral, full-width) */
.s4-kriteria-panel{ display: flex; flex-direction: row; align-items: stretch; gap: 20px;
  background: #F9FAFB; border: 0.5px solid #E5E7EB; border-radius: 10px;
  padding: 16px 18px; margin: 16px 0 0; }
.s4-krit-main{ flex: 1; min-width: 0; }
.s4-krit-title{ font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 10px; }
.s4-krit-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.s4-krit-table th, .s4-krit-table td{ border: 1px solid #E5E7EB; padding: 8px 10px;
  text-align: left; vertical-align: top; color: #374151; }
.s4-krit-table thead th{ background: #F3F4F6; font-weight: 700; color: #1F2937; }
.s4-krit-table td:first-child, .s4-krit-table th:first-child{ width: 46%; }
.s4-krit-utama td{ background: #FFF9E6; }
.s4-krit-sub{ display: block; font-size: 10.5px; font-style: italic; color: #92722A; margin-top: 2px; }
.s4-krit-kesimpulan td{ background: #F3F4F6; font-weight: 600; }
.s4-krit-foot{ font-size: 11px; color: #9CA3AF; margin: 10px 0 0; }
.s4-krit-reserved{ flex: 0 0 300px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; border: 1.5px dashed #9CA3AF; border-radius: 10px;
  background: #FAFAFA; color: #9CA3AF; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
@media (max-width: 1023px){ .s4-kriteria-panel{ flex-direction: column; } .s4-krit-reserved{ flex-basis: auto; min-height: 70px; } }

/* Kontrol SIM-04 */
.s4-controls{ display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.s4-ctl-btns{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.s4-ctl-ph{ display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 10px 14px; border: 1.5px dashed #9CA3AF; border-radius: 10px;
  background: #FAFAFA; color: #9CA3AF; font-size: 12px; font-weight: 700;
  opacity: .8; user-select: none; line-height: 1.4; }
@media (max-width: 767px){ .s4-ctl-btns{ flex-direction: column; align-items: stretch; }
  .s4-ctl-btns .s3-btn-larut, .s4-ctl-btns .s3-btn-reset{ width: 100%; } }

/* 3 panel: Makro 30% : Submikro 30% : Simbolik 40% (desktop) — F1c-3c5 */
.s3-panels{ display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1024px){ .s3-panels{ grid-template-columns: 30fr 30fr 40fr; } }

/* panel skeleton dengan header bar berwarna */
.s3-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB;
  border-radius: 12px; overflow: hidden; background: #fff; min-height: 500px; }
.s3-phead{ min-height: 40px; padding: 8px 14px; display: flex; flex-direction: column;
  justify-content: center; gap: 1px; }
.s3-phead h5{ margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; }
.s3-phead .s3-tag{ font-size: 10.5px; font-style: italic; color: rgba(255,255,255,.8);
  letter-spacing: .04em; }
.s3-phead .s3-sub{ font-size: 9.5px; font-style: italic; color: rgba(255,255,255,.7); }
.s3-phead.macro{ background: #22C55E; }
.s3-phead.micro{ background: #3B82F6; }
.s3-phead.symbol{ background: #8B5CF6; }
.s3-pbody{ flex: 1; background: #fff; }
/* F1c-2 · Panel Makro scene — aset visual statis, rata bawah, ruang atas bersih untuk callout F1c-3 */
.s3-makro-wrap{ height: 100%; display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 14px 8px; }
.s3-makro-svg{ width: 100%; height: auto; max-height: 100%; }
@media (max-width: 1023px){ .s3-panel{ min-height: 300px; } }

/* area kontrol bawah — placeholder dashed */
.s3-controls{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.s3-ph{ height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed #9CA3AF; border-radius: 10px; padding: 0 12px;
  font-size: 12px; font-weight: 700; color: #9CA3AF; background: #FAFAFA;
  opacity: .75; pointer-events: none; user-select: none; }
@media (max-width: 767px){ .s3-controls{ flex-direction: column; align-items: stretch; }
  .s3-ph{ width: 100% !important; } }

/* F1c-3da · tombol Larutkan aktif + animasi spatula Frame 2 */
.s3-btn-larut{ height: 44px; padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 6px;
  background: #F3F4F6; color: #1F2937; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s ease; }
.s3-btn-larut:hover{ background: #E5E7EB; }
.s3-btn-larut:disabled{ background: #9CA3AF; color: #fff; cursor: not-allowed; }
@media (max-width: 767px){ .s3-btn-larut{ width: 100%; } }
/* F1c-3dd · tombol Reset aktif */
.s3-btn-reset{ padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 6px;
  background: #F3F4F6; color: #1F2937; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s ease; }
.s3-btn-reset:hover{ background: #E5E7EB; }
.s3-btn-reset:disabled{ background: #9CA3AF; color: #fff; border-color: #9CA3AF; cursor: not-allowed; }
@media (max-width: 767px){ .s3-btn-reset{ width: 100%; } }
/* F1c-4a · tombol Tur Otomatis aktif */
.s3-btn-tur{ padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 6px;
  background: #F3F4F6; color: #1F2937; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s ease; }
.s3-btn-tur:hover{ background: #E5E7EB; }
.s3-btn-tur:disabled{ background: #9CA3AF; color: #fff; border-color: #9CA3AF; cursor: not-allowed; }
@media (max-width: 767px){ .s3-btn-tur{ width: 100%; } }
/* F1c-4c · Guided Linking highlight pulse (aktif hanya saat Tur Otomatis) */
@keyframes pulse-hijau{ 0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50%{ box-shadow: 0 0 15px 5px rgba(34,197,94,0.6); } }
@keyframes pulse-biru{ 0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50%{ box-shadow: 0 0 15px 5px rgba(59,130,246,0.6); } }
@keyframes pulse-ungu{ 0%,100%{ box-shadow: 0 0 0 0 rgba(139,92,246,0.4); } 50%{ box-shadow: 0 0 15px 5px rgba(139,92,246,0.6); } }
@keyframes pulse-netral{ 0%,100%{ box-shadow: 0 0 0 0 rgba(107,114,128,0.4); } 50%{ box-shadow: 0 0 15px 5px rgba(107,114,128,0.6); } }
.hl-hijau{ animation: pulse-hijau 1.5s ease-in-out infinite; border-radius: 6px; }
.hl-biru{ animation: pulse-biru 1.5s ease-in-out infinite; border-radius: 6px; }
.hl-ungu{ animation: pulse-ungu 1.5s ease-in-out infinite; border-radius: 6px; }
.hl-netral{ animation: pulse-netral 1.5s ease-in-out infinite; border-radius: 6px; }
/* varian SVG (box-shadow tidak berlaku di elemen SVG) — pakai drop-shadow filter */
@keyframes pulse-svg-hijau{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(34,197,94,0)); } 50%{ filter: drop-shadow(0 0 6px rgba(34,197,94,0.95)); } }
@keyframes pulse-svg-biru{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(59,130,246,0)); } 50%{ filter: drop-shadow(0 0 6px rgba(59,130,246,0.95)); } }
@keyframes pulse-svg-ungu{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(139,92,246,0)); } 50%{ filter: drop-shadow(0 0 6px rgba(139,92,246,0.95)); } }
.hls-hijau{ animation: pulse-svg-hijau 1.5s ease-in-out infinite; }
.hls-biru{ animation: pulse-svg-biru 1.5s ease-in-out infinite; }
.hls-ungu{ animation: pulse-svg-ungu 1.5s ease-in-out infinite; }
/* F1c-4e-a · tombol speed multiplier (0,5× / 1× / 2×) */
.s3-speed{ display: flex; gap: 0; }
.s3-speed-btn{ padding: 8px 14px; border: 1px solid #D1D5DB; background: #F3F4F6; color: #1F2937;
  font-size: 13px; font-weight: 400; font-family: inherit; cursor: pointer; transition: background .15s ease; }
.s3-speed-btn + .s3-speed-btn{ border-left: none; }
.s3-speed-btn:first-child{ border-radius: 6px 0 0 6px; }
.s3-speed-btn:last-child{ border-radius: 0 6px 6px 0; }
.s3-speed-btn:hover:not(.on):not(:disabled){ background: #E5E7EB; }
.s3-speed-btn.on{ background: #3B82F6; color: #FFFFFF; border-color: #2563EB; font-weight: 700; }
.s3-speed-btn:disabled{ background: #9CA3AF; color: #fff; border-color: #9CA3AF; cursor: not-allowed; }
/* F1c-4e-b · tombol pause/resume Tur Otomatis */
.s3-btn-jeda, .s3-btn-repeat{ padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 6px;
  background: #F3F4F6; color: #1F2937; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s ease; min-width: 44px; }
.s3-btn-jeda:hover:not(:disabled), .s3-btn-repeat:hover:not(:disabled){ background: #E5E7EB; }
.s3-btn-jeda:disabled, .s3-btn-repeat:disabled{ background: #9CA3AF; color: #fff; border-color: #9CA3AF; cursor: not-allowed; }
/* F1c-5a · Baris Amati — 3 Tahap Energetika (Diagram Hess) */
.s3-amati-row{ display: flex; align-items: center; gap: 12px; padding: 12px 24px; }
.s3-amati-lbl{ font-size: 14px; color: #1F2937; }
.s3-amati-btn{ padding: 8px 16px; border-radius: 6px; border: 2px solid; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 400; cursor: pointer; transition: background .15s ease, color .15s ease; }
.s3-amati-btn sub{ font-size: .75em; }
.s3-amati-biru{ color: #3B82F6; border-color: #3B82F6; }
.s3-amati-hijau{ color: #22C55E; border-color: #22C55E; }
.s3-amati-merah{ color: #DC2626; border-color: #DC2626; }
.s3-amati-biru:hover:not(:disabled):not(.on){ background: #3B82F620; }
.s3-amati-hijau:hover:not(:disabled):not(.on){ background: #22C55E20; }
.s3-amati-merah:hover:not(:disabled):not(.on){ background: #DC262620; }
.s3-amati-biru.on{ background: #3B82F6; color: #fff; border-color: #3B82F6; font-weight: 700; }
.s3-amati-hijau.on{ background: #22C55E; color: #fff; border-color: #22C55E; font-weight: 700; }
.s3-amati-merah.on{ background: #DC2626; color: #fff; border-color: #DC2626; font-weight: 700; }
.s3-amati-btn:disabled{ background: #F3F4F6; color: #9CA3AF; border-color: #D1D5DB; cursor: not-allowed; font-weight: 400; }
/* F1c-5b · highlight pulsating panah diagram Hess per Amati aktif (SVG → drop-shadow) */
@keyframes pulse-panah-biru{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(59,130,246,0)); } 50%{ filter: drop-shadow(0 0 8px rgba(59,130,246,0.8)); } }
@keyframes pulse-panah-hijau{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(34,197,94,0)); } 50%{ filter: drop-shadow(0 0 8px rgba(34,197,94,0.8)); } }
@keyframes pulse-panah-merah{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(220,38,38,0)); } 50%{ filter: drop-shadow(0 0 8px rgba(220,38,38,0.8)); } }
.highlight-panah-biru{ animation: pulse-panah-biru 1.5s ease-in-out infinite; }
.highlight-panah-hijau{ animation: pulse-panah-hijau 1.5s ease-in-out infinite; }
.highlight-panah-merah{ animation: pulse-panah-merah 1.5s ease-in-out infinite; }
#s3Spatula.scooped{ transform: translate(-139px, -137.5px); }
#s3FallCrystals.falling{ transform: translateY(116px); }

/* F1c-3a · kontrol fungsional SIM-03 (dropdown zat + slider massa) */
.s3-ctl{ display: flex; align-items: center; gap: 8px; }
.s3-ctl label{ font-size: 12px; font-weight: 700; color: #374151; white-space: nowrap; }
.s3-slider{ width: 130px; height: 28px; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; margin: 0; }
.s3-slider::-webkit-slider-runnable-track{ height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); }
.s3-slider::-moz-range-track{ height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); }
.s3-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; border: 2px solid var(--brand); margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.s3-slider::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.s3-massaval{ font-size: 14px; font-weight: 800; color: #1F2937; min-width: 34px;
  font-variant-numeric: tabular-nums; }
@media (max-width: 767px){ .s3-ctl{ width: 100%; justify-content: space-between; } }

/* F1c-3b · Panel Submikro — canvas 3 skenario terhidrasi + label suhu */
.s3-submicro-wrap{ position: relative; width: 100%; height: 100%; min-height: 460px;
  background: #FAFAFA; border: 1px solid #E5E7EB; border-radius: 0 0 12px 12px; overflow: hidden; }
#s3SubCanvas{ display: block; width: 100%; height: 100%; }
.s3-temp-label{ position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 4px; border: 1px solid; letter-spacing: .01em; }
.s3-temp-label.exo{ background: #FEF3C7; border-color: #F59E0B; color: #78350F; }
.s3-temp-label.endo{ background: #DBEAFE; border-color: #3B82F6; color: #1E3A8A; }

/* F1c-3c · Panel Simbolik — 3 skenario diagram energi + persamaan */
.s3-sym-wrap{ display: flex; flex-direction: column; height: 100%; padding: 14px 16px 12px;
  gap: 12px; overflow: auto; }
.s3-sym-scene{ display: flex; flex-direction: column; gap: 12px; }
.s3-sym-eq{ font-size: 14px; font-weight: 700; color: #1F2937; text-align: center; letter-spacing: .01em; }
.s3-sym-chart{ width: 100%; height: auto; max-width: 300px; align-self: center; }
.s3-sym-formula{ font-size: 12.5px; font-weight: 600; color: #374151; text-align: center;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px 10px; }
.s3-sym-val{ font-size: 14px; font-weight: 800; color: #1F2937; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.s3-badge{ font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  letter-spacing: .03em; text-transform: uppercase; }
.s3-badge.exo{ background: #DCFCE7; color: #15803D; }
.s3-badge.exostrong{ background: #DCFCE7; color: #15803D; border: 2px solid #22C55E; }
.s3-badge.endo{ background: #FEE2E2; color: #B91C1C; }
.s3-sym-foot{ margin-top: auto; font-size: 11px; font-style: italic; color: #6B7280;
  text-align: center; padding-top: 10px; border-top: 1px solid #F3F4F6; }
#s3Mercury{ transition: y .3s ease-in-out, height .3s ease-in-out; }

/* F1c-3c7a · Panel Perhitungan — bar full-width; F1c-4d-fix2: flex 2 kolom */
.s3-calc-panel{ display: flex; flex-direction: row; align-items: stretch; gap: 24px;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px;
  padding: 12px 16px; margin: 12px 0; }
.s3-calc-main{ flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.s3-tur-callout-col{ width: 300px; flex-shrink: 0; display: flex; align-items: center; }
.s3-tur-callout-card{ width: 100%; background: #FFFFFF; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 12px 16px; font-size: 14px; color: #1F2937;
  text-align: left; line-height: 1.5; }
.s3-tur-callout-card[hidden]{ display: none; }
@media (max-width: 767px){ .s3-calc-panel{ flex-direction: column; } .s3-tur-callout-col{ width: 100%; } }
.s3-calc-title{ font-size: 14px; font-weight: 700; color: #1F2937; margin: 0; text-align: left; }
.s3-calc-rows{ display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline; margin-top: 6px; }
.s3-calc-lbl{ font-style: italic; font-size: 10.5px; color: #6B7280; text-align: left; }
.s3-calc-formula, .s3-calc-subst{ font-family: 'Georgia', 'Times New Roman', serif; font-size: 13px; font-weight: 400; color: #1F2937; text-align: left; }
.s3-calc-hasil{ font-family: 'Georgia', 'Times New Roman', serif; font-size: 13px; font-weight: 700; color: #1F2937; text-align: left; }
.s3-calc-hasil .exo{ color: #166534; }
.s3-calc-hasil .endo{ color: #991B1B; }

#s2Micro{ height: 250px; background: #1e293b; }
#s2Beaker{ height: 230px; }

.s2-state{ display: inline-flex; align-self: flex-start; font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  padding: 5px 13px; border-radius: 999px; transition: background .3s, color .3s; }
.s2-state[data-state="larut"],.s2-state[data-state="ungu"]{ background: #e9f7ee; color: #15803d; }
.s2-state[data-state="utuh"]{ background: #fdeaea; color: #b91c1c; }
.s2-state[data-state="endap"]{ background: #fff2e0; color: #b45309; }

.s2-status{ font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 12px; }
.s2-status[data-ok="1"]{ color: #15803d; }
.s2-status[data-ok="0"]{ color: #dc2626; }
.s2-eq{ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 11px 13px; margin-bottom: 12px; line-height: 1.4; }
.s2-eq sup{ font-size: .7em; }
.s2-force{ margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.s2-principle{ font-size: 11.5px; font-weight: 600; color: var(--brand);
  background: var(--brand-softer); padding: 9px 11px; border-radius: 9px; line-height: 1.5; }
.s2-principle b{ font-weight: 800; }

.seg button small{ font-weight: 600; font-size: 10px; color: var(--ink-3); }
.seg button.on small{ color: var(--brand); }
.s2-actions{ display: flex; gap: 10px; margin-bottom: 10px; }
.s2-actions .btn{ flex: 1; }
.s2-actions .btn svg{ width: 15px; height: 15px; }

@media (max-width: 880px){ .sim02-dock .s1-macro{ flex-direction: row; } }

/* ============================================================
   RESPONSIVE — extra
   ============================================================ */
@media (max-width: 1080px) {
  .cg-left { position: static; }
  .ktb-cat-head .kch-total { display: none; }
}
@media (max-width: 760px) {
  .tes-stim { flex-direction: column; }
  .tes-stim .stim-fig { width: 100%; height: 120px; }
  .cc-model { grid-template-columns: 1fr; }
  .ktb-dim { flex-direction: column; align-items: flex-start; gap: 8px; }
  .users-scroll { overflow-x: auto; }
  .users-table { min-width: 620px; }
  .klp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   T.3 — ANGKET PERSEPSI (Likert 16 item)
   ============================================================ */
.angket-head { margin-bottom: 18px; }
.angket-head .ah-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.angket-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 999px; margin: 4px 0 14px; }
.angket-badge.locked { background: var(--bg); color: var(--ink-3); }
.angket-badge.available { background: var(--brand-softer); color: var(--brand); }
.angket-badge.done { background: #e9f7ee; color: #15803d; }
.angket-petunjuk { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.angket-petunjuk b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.angket-petunjuk ul { margin: 7px 0 0; padding-left: 18px; }
.angket-petunjuk li { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.angket-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.angket-prog b { color: var(--brand); font-variant-numeric: tabular-nums; }
.angket-prog .ap-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.angket-prog .ap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; transition: width .25s ease; }

.angket-body { display: flex; flex-direction: column; gap: 12px; }
.aq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.aq-text { margin: 0 0 13px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.aq-num { font-weight: 800; color: var(--brand); margin-right: 4px; }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lk-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; transition: border-color .15s, background .15s; }
.lk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lk-opt .lk-n { font-size: 15px; font-weight: 800; color: var(--ink-2); }
.lk-opt .lk-lbl { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.lk-opt:hover { border-color: color-mix(in oklch, var(--brand) 45%, var(--line)); }
.lk-opt.on { border-color: var(--brand); background: var(--brand-softer); }
.lk-opt.on .lk-n, .lk-opt.on .lk-lbl { color: var(--brand); }

.angket-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.angket-foot .grow { flex: 1; }

.angket-confirm { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow); padding: 32px; text-align: center; max-width: 540px; margin: 24px auto; }
.angket-confirm .ac-ic { width: 64px; height: 64px; border-radius: 50%; background: #e9f7ee; color: #15803d; display: grid; place-items: center; margin: 0 auto 16px; }
.angket-confirm h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--ink); }
.angket-confirm .ac-lead { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); }
.ac-meta-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.ac-meta { flex: 1; max-width: 200px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 11px; }
.ac-meta span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.ac-meta b { font-size: 15px; font-weight: 800; color: var(--ink); }
.angket-anom-flag { display: inline-flex; align-items: center; gap: 7px; background: #fff3e0; color: #b45309; font-size: 11.5px; font-weight: 700; padding: 7px 13px; border-radius: 9px; margin-bottom: 14px; }
.ac-scores { text-align: left; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.ac-scores h4 { margin: 0 0 11px; font-size: 13px; font-weight: 800; color: var(--ink); }
.ac-srow { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.ac-srow:last-child { border-bottom: none; }
.ac-srow small { color: var(--ink-3); font-weight: 600; }
.ac-srow b { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-srow.total { margin-top: 4px; border-top: 2px solid var(--line); padding-top: 11px; }
.ac-srow.total b { color: var(--brand); font-size: 17px; }
.angket-confirm .ac-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin: 0 0 18px; }

/* ---------- Jurnal Reflektif (T.4) ---------- */
.jr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.jr-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.jr-card.locked { opacity: .72; background: var(--bg-2); }
.jrc-top { display: flex; flex-direction: column; gap: 2px; }
.jrc-meet { font-size: 11px; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.jrc-topic { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.jr-badge { align-self: flex-start; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.jr-badge.locked { background: var(--bg); color: var(--ink-3); }
.jr-badge.available { background: var(--brand-softer); color: var(--brand); }
.jr-badge.done { background: #e9f7ee; color: #15803d; }
.jrc-foot { margin-top: auto; }

.jr-form-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.jr-form-top .grow { flex: 1; }
.jr-autosave { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); padding: 6px 12px; border-radius: 999px; }
.jr-body { display: flex; flex-direction: column; gap: 14px; }
.jr-q { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.jr-q-head { margin-bottom: 12px; }
.jr-q-tag { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.jr-q-head p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.jr-subs { display: flex; flex-direction: column; gap: 14px; }
.jr-sub-q { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
.jr-sub-tag { font-weight: 800; color: var(--brand); margin-right: 4px; }
.jr-ta { min-height: 90px; }
.jr-counter { font-size: 11.5px; font-weight: 700; margin-top: 6px; }
.jr-counter b { font-variant-numeric: tabular-nums; }
.jr-counter.ok { color: #15803d; }
.jr-counter.low { color: #b45309; }

.jr-confirm { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow); padding: 32px; text-align: center; max-width: 540px; margin: 24px auto; }
.jr-confirm .ac-ic { width: 64px; height: 64px; border-radius: 50%; background: #e9f7ee; color: #15803d; display: grid; place-items: center; margin: 0 auto 16px; }
.jr-confirm h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--ink); }
.jr-confirm .ac-lead { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); }
.jr-confirm .ac-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin: 0 0 18px; }

/* ---------- Coder Jurnal (T.4 · dosen) ---------- */
.cj-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cj-table td { vertical-align: middle; }
.cj-table td small { font-size: 10.5px; display: block; font-weight: 600; }
.cj-st { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cj-st.uncoded { background: #fef6e0; color: #b45309; }
.cj-st.coded { background: #e9f7ee; color: #15803d; }
.cj-st.disc { background: #fdeaea; color: #c0392b; }

.kappa-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; margin-top: 18px; }
.kappa-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--ink); }
.kappa-head p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.kappa-list { display: flex; flex-direction: column; gap: 8px; }
.kappa-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-2); }
.kappa-row.warn { background: #fdeaea; border-color: #f3c6c6; }
.kappa-row .kr-q { font-size: 13px; font-weight: 800; color: var(--ink); }
.kappa-row .kr-q small { font-weight: 600; color: var(--ink-3); margin-left: 6px; }
.kappa-row .kr-val { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.kappa-row .kr-flag { font-size: 12px; font-weight: 700; color: #15803d; white-space: nowrap; }
.kappa-row.warn .kr-flag { color: #c0392b; }
.kappa-foot { margin-top: 14px; }

/* coding modal (2 kolom) */
.modal.coder-modal { max-width: 940px; width: 94vw; padding: 0; text-align: left; max-height: 92vh; display: flex; flex-direction: column; }
.coder-modal .cj-modal-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.coder-modal .cjm-left { overflow-y: auto; min-height: 0; }
.coder-modal .cjm-right { overflow-y: auto; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
.coder-modal .cjm-right .modal-actions { position: sticky; bottom: 0; z-index: 6; background: #fff; border-top: 1px solid var(--line); padding: 12px 22px; margin: 14px -22px 0; }
@media (max-width: 720px) {
  .coder-modal .cj-modal-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .coder-modal .cjm-left, .coder-modal .cjm-right { overflow: visible; }
  .coder-modal .cjm-right .modal-actions { position: sticky; }
}
.cj-modal-grid { display: grid; grid-template-columns: 1.05fr .95fr; }
.cjm-left { padding: 22px; border-right: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius) 0 0 var(--radius); }
.cjm-l-head { margin-bottom: 14px; }
.cjm-meta { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.cjm-meta .mav { width: 38px; height: 38px; font-size: 13px; }
.cjm-meta b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.cjm-meta span { font-size: 12px; color: var(--ink-3); }
.cjm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cjm-tags span { font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-softer); padding: 4px 10px; border-radius: 999px; }
.cjm-q { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.55; padding: 12px 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 11px; margin-bottom: 12px; white-space: pre-wrap; }
.cjm-answer { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; padding: 14px 16px; background: #fff; border: 1px solid var(--line-2); border-radius: 11px; max-height: 240px; overflow-y: auto; }
.cjm-foot { margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.cjm-foot b { color: var(--ink); }
.cjm-right { padding: 22px; }
.cjm-r-head h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.cjm-r-head p { margin: 0 0 14px; font-size: 12px; color: var(--ink-3); }
.cj-levels { display: flex; flex-direction: column; gap: 9px; }
.cj-lvl { display: block; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.cj-lvl input { position: absolute; opacity: 0; pointer-events: none; }
.cj-lvl:hover { border-color: color-mix(in oklch, var(--brand) 45%, var(--line)); }
.cj-lvl.on { border-color: var(--brand); background: var(--brand-softer); }
.cl-body { display: flex; gap: 10px; align-items: baseline; }
.cl-kode { font-size: 13px; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.cl-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.cl-contoh { margin-top: 8px; }
.cl-contoh summary { font-size: 11px; font-weight: 700; color: var(--brand); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.cl-contoh summary::before { content: "▸"; font-size: 9px; transition: transform .15s; }
.cl-contoh[open] summary::before { transform: rotate(90deg); }
.cl-contoh summary::-webkit-details-marker { display: none; }
.cl-contoh blockquote { margin: 7px 0 0; padding: 8px 11px; font-size: 11.5px; font-style: italic; color: var(--ink-3); line-height: 1.55; background: var(--bg-2); border-left: 2.5px solid var(--line-2); border-radius: 0 7px 7px 0; }
.cjm-notes { display: block; margin-top: 14px; }
.cjm-notes span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.cjm-notes textarea { width: 100%; min-height: 70px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical; box-sizing: border-box; }

@media (max-width: 720px) {
  .cj-modal-grid { grid-template-columns: 1fr; }
  .cjm-left { border-right: none; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
}

/* ---------- Validator Ahli (Aiken's V) ---------- */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.val-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.vc-top { display: flex; align-items: flex-start; gap: 11px; }
.vc-tag { font-size: 12px; font-weight: 800; color: #fff; background: var(--brand); padding: 4px 9px; border-radius: 8px; flex-shrink: 0; }
.vc-top h4 { margin: 0 0 2px; font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.vc-top p { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.vc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vc-stat { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; }
.vc-stat span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 3px; }
.vc-stat b { font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vc-stat b small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.vc-stat b.vh { color: #15803d; } .vc-stat b.vm { color: #3f8f4f; } .vc-stat b.vl { color: #c0392b; }
.vc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.val-verdict { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.val-verdict.pass { background: #e9f7ee; color: #15803d; }
.val-verdict.fail { background: #fdeaea; color: #c0392b; }

.val-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.val-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vsw { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.vsw.vh { background: #15803d; } .vsw.vm { background: #86c79a; } .vsw.vl { background: #e07a72; }
.val-table td.vsc { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.val-table td.vsc b.vh { color: #15803d; } .val-table td.vsc b.vm { color: #3f8f4f; } .val-table td.vsc b.vl { color: #c0392b; }
.val-table tbody tr:hover { background: var(--bg-2); }
/* D-2.1 — section header rows in B.7 detail */
.val-table tr.val-sec-head td { background: var(--brand); color: #fff; padding: 12px 14px; border-top: 3px solid color-mix(in srgb,var(--brand) 70%, #000); }
.val-table tr.val-sec-head:hover td { background: var(--brand); }
.vsh-top { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.vsh-code { font-size: 11px; font-weight: 800; letter-spacing: .06em; background: rgba(255,255,255,.22); padding: 3px 9px; border-radius: 6px; }
.vsh-name { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.vsh-meta { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); margin-left: auto; }
.vsh-meta b { font-variant-numeric: tabular-nums; }
.vsh-meta b.vh, .vsh-meta b.vm { color: #d6f5e0; }
.vsh-meta b.vl { color: #ffd9d3; }
.vsh-intro { margin: 7px 0 0; font-size: 11.5px; font-style: italic; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 92ch; }
/* D-2.2 — level-1 Bagian header (K.7 / T.7 two-level) */
.val-table tr.val-bagian-head td { background: color-mix(in srgb,var(--brand) 78%, #000); color: #fff; padding: 13px 14px; border-top: 4px solid color-mix(in srgb,var(--brand) 55%, #000); }
.val-table tr.val-bagian-head:hover td { background: color-mix(in srgb,var(--brand) 78%, #000); }
.vbh-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vbh-label { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.vbh-meta { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); margin-left: auto; }
.vbh-meta b { font-variant-numeric: tabular-nums; }
.vbh-meta b.vh, .vbh-meta b.vm { color: #d6f5e0; }
.vbh-meta b.vl { color: #ffd9d3; }
.vbh-intro { margin: 7px 0 0; font-size: 11.5px; font-style: italic; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 92ch; }
/* D-2.2 — input-mode section/bagian separators */
.vib-bagian { margin: 22px 0 4px; padding: 11px 14px; background: color-mix(in srgb,var(--brand) 78%, #000); color: #fff; border-radius: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.vib-section { margin: 16px 0 10px; padding: 11px 14px; background: var(--brand); color: #fff; border-radius: 10px; }
.vib-sec-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vib-sec-code { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: rgba(255,255,255,.22); padding: 3px 8px; border-radius: 6px; }
.vib-section b { font-size: 13px; font-weight: 800; }
.vib-section small { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); margin-left: auto; }
.vib-section p { margin: 6px 0 0; font-size: 11.5px; font-style: italic; line-height: 1.5; color: rgba(255,255,255,.9); }

.val-input-body { display: flex; flex-direction: column; gap: 22px; }
.vib-h { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.val-input-block { display: flex; flex-direction: column; gap: 12px; }
.val-input-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 16px; }
.vii-q { margin: 0 0 11px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.vii-q b { color: var(--brand); font-weight: 800; }
.val-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.val-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.val-opt input { position: absolute; opacity: 0; pointer-events: none; }
.val-opt .vo-n { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.val-opt .vo-l { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.val-opt:hover { border-color: color-mix(in oklch, var(--brand) 45%, var(--line)); }
.val-opt.on { border-color: var(--brand); background: var(--brand-softer); }
.val-opt.on .vo-n, .val-opt.on .vo-l { color: var(--brand); }
.val-note { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 12.5px; resize: vertical; box-sizing: border-box; }

.modal.aspek-modal { max-width: 520px; text-align: left; max-height: 90vh; overflow-y: auto; }
.vam-aiken { font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 10px; background: var(--bg-2); margin-bottom: 14px; }
.vam-aiken b { font-size: 17px; font-variant-numeric: tabular-nums; }
.vam-aiken.vh { background: #e9f7ee; color: #15803d; } .vam-aiken.vm { background: #eef7f0; color: #3f8f4f; } .vam-aiken.vl { background: #fdeaea; color: #c0392b; }
.vam-list { display: flex; flex-direction: column; gap: 8px; }
.vam-row { display: grid; grid-template-columns: auto 64px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; }
.vam-v b { font-size: 13px; color: var(--ink); } .vam-v span { display: block; font-size: 11px; color: var(--ink-3); }
.vam-sc { font-size: 14px; font-weight: 800; color: var(--brand); text-align: center; }
.vam-sc.none { color: var(--ink-3); }
.vam-note { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.vam-note i { color: var(--ink-3); }

/* ---------- Pretest/Posttest v8 — dimensi M/S/K/I + canvas ---------- */
.dim-tabs { display: flex; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.dim-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 800; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.dim-tab:hover { border-color: color-mix(in oklch, var(--brand) 40%, var(--line)); }
.dim-tab.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.dt-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid currentColor; opacity: .55; }
.dt-dot.done { background: #2bb673; border-color: #2bb673; opacity: 1; }
.dim-tab.on .dt-dot.done { background: #b6f0d0; border-color: #b6f0d0; }
.dim-panels { position: relative; }
.dim-panel { display: none; }
.dim-panel.on { display: block; }
.dim-h { font-size: 13px; font-weight: 800; color: var(--brand); margin-bottom: 4px; }
.dim-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 10px; }
.dim-sublabel { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.dim-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line-2); font-size: 12px; font-weight: 700; }
.dim-status span.ok { color: #15803d; }
.dim-status span.no { color: #b45309; }
.dim-status b { color: var(--ink); }

.sketch-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.sketch-toolbar { display: flex; align-items: center; gap: 6px; padding: 9px 10px; background: #fff; border-bottom: 1px solid var(--line-2); }
.stb-group { display: flex; gap: 4px; }
.stb-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1; transition: border-color .15s, background .15s; }
.stb-btn.wide { width: auto; padding: 0 12px; font-size: 12px; font-weight: 800; gap: 5px; }
.stb-btn:hover { border-color: color-mix(in oklch, var(--brand) 40%, var(--line)); }
.stb-btn.on { border-color: var(--brand); background: var(--brand-softer); }
.pal-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 10px; background: #fff; border-bottom: 1px solid var(--line-2); }
.pal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pal-chip:hover { border-color: color-mix(in oklch, var(--brand) 40%, var(--line)); }
.pal-chip.on { border-color: var(--brand); background: var(--brand-softer); color: var(--brand); }
.pc-sw { width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pc-H2O { background: #fff; border: 1.5px solid #111; }
.pc-kation { background: #1E88E5; }
.pc-anion { background: #FBC02D; }
.pc-nonpolar { background: #9E9E9E; }
.pc-ikatan { background: #111; border-radius: 2px; height: 4px; }
.pc-gayaTarik { background: repeating-linear-gradient(90deg, #111 0 3px, transparent 3px 6px); border-radius: 2px; height: 4px; }
.sketch-canvas-box { position: relative; padding: 10px; background: var(--bg-2); }
.sketch-canvas { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 380; margin: 0 auto; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sketch-wrap.dark .sketch-canvas { background: #0f172a; border-color: #1e293b; }
.sketch-legend { position: absolute; left: 18px; bottom: 18px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: rgba(255,255,255,.86); padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-2); pointer-events: none; }
.sketch-wrap.dark .sketch-legend { background: rgba(15,23,42,.82); color: #cbd5e1; border-color: #334155; }

@media (max-width: 760px) { .val-grid { grid-template-columns: 1fr; } }

/* ---------- Vlog dual scoring (T.5/KPS17) ---------- */
.vlog-grphead { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.vlog-lens-note { background: #f3effc; border: 1px solid #e2d8f5; border-radius: 11px; padding: 12px 14px; font-size: 12.5px; color: #4b3b78; line-height: 1.55; margin-bottom: 12px; }
.upload-zone.drag { border-color: var(--brand); background: var(--brand-softer); }
.vlog-success { border: 1px solid #bfe6cd; background: #f1fbf5; border-radius: 12px; padding: 16px; }
.vs-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #15803d; margin-bottom: 12px; }
.vs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.vs-meta div { background: #fff; border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 11px; }
.vs-meta span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.vs-meta b { font-size: 13px; color: var(--ink); }
.vs-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pv-pathchip { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.pv-pathchip.path-A { background: #e7f0fb; color: #1e5fb0; }
.pv-pathchip.path-B { background: #f3effc; color: #6d28d9; }
.pv-skor { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pv-noup td { color: var(--ink-3); }

.vlog-player { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.vlog-player iframe { width: 100%; height: 100%; border: 0; }
.vlog-dimblock { border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; }
.vd-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.vd-h b { color: var(--brand); font-weight: 800; margin-right: 4px; }
.vd-desc { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 0 0 9px; }
.vlog-scale { display: flex; gap: 8px; }
.vlog-scale .cj-lvl.vlk { flex: 1; text-align: center; }
.vlog-scale .cl-body { justify-content: center; }
.vd-fokus { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.vd-crit { border: 1.5px solid #f59e0b; background: #fffbeb; border-radius: 12px; padding: 12px; }
.vd-warn { font-size: 11.5px; line-height: 1.55; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 9px; padding: 9px 11px; margin: 0 0 10px; }
.vd-rubrik { margin-top: 9px; }
.vd-rubrik summary { font-size: 11px; font-weight: 700; color: var(--brand); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.vd-rubrik summary::before { content: "▸"; font-size: 9px; transition: transform .15s; }
.vd-rubrik[open] summary::before { transform: rotate(90deg); }
.vd-rubrik summary::-webkit-details-marker { display: none; }
.vd-srow { display: flex; gap: 9px; align-items: baseline; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); padding: 5px 0; border-top: 1px solid var(--line-2); }
.vd-srow:first-of-type { border-top: none; margin-top: 4px; }
.vd-sk { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; background: var(--brand-softer); color: var(--brand); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.rbac-note { display: flex; align-items: center; gap: 7px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 11.5px; font-weight: 700; padding: 9px 12px; border-radius: 10px; margin-top: 12px; line-height: 1.45; }

/* ---------- P10 UI polish ---------- */
.create-hero { position: relative; }
.create-autosave { position: absolute; top: 16px; right: 18px; z-index: 2; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.92); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 6px 12px; border-radius: 999px; }
.privacy-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.privacy-head h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.anon-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.anon-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.at-track { width: 40px; height: 23px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s; flex-shrink: 0; }
.at-knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .18s; }
.anon-toggle input:checked + .at-track { background: var(--brand); }
.anon-toggle input:checked + .at-track .at-knob { left: 19.5px; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.privacy-state { font-size: 12.5px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 13px; }
.privacy-state.on { background: var(--brand-softer); border-color: color-mix(in oklch, var(--brand) 25%, var(--line)); }
.privacy-state.off { background: #fdeaea; border-color: #f3c6c6; }
.privacy-state code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.privacy-state .ps-warn { color: #c0392b; font-weight: 700; }
.audit-trail { margin-top: 14px; padding-top: 11px; border-top: 1px dashed var(--line-2); font-size: 11px; color: var(--ink-3); line-height: 1.5; }

/* ---------- P12 ANSWER content ---------- */
.skenario-box { background: #eff6ff; border: 1px solid #c7ddf7; border-radius: 12px; padding: 13px 16px; margin: 0 0 14px; }
.skenario-box .sk-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #1e5fb0; margin-bottom: 5px; }
.skenario-box p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.kps-badge.qlabel { background: #fef3c7; color: #92400e; }
.kps-badge.combined-chip { display: inline-flex; align-items: center; gap: 5px; background: #ede9fe; color: #6d28d9; }
.kps-badge.todo-chip { background: #fff7ed; color: #9a3412; }
.qtable { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 12.5px; }
.qtable caption { caption-side: top; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.qtable th, .qtable td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
.qtable thead th { background: #f1f5f9; color: var(--ink-1); font-weight: 700; }
.qtable tbody td { color: var(--ink-2); }
.qtable tbody tr:nth-child(even) td { background: #fafbfc; }
.discuss-instr { background: #f1faf8; border: 1px solid #cdeae4; border-radius: 12px; padding: 13px 16px; margin: 0 0 14px; }
.discuss-instr .di-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #0f766e; margin-bottom: 5px; }
.discuss-instr p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.discuss-qblock { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; background: #fff; }
.discuss-qblock .dq-head { font-size: 12.5px; font-weight: 800; color: #0f766e; margin-bottom: 8px; }
.discuss-qblock .dq-intro { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.discuss-qblock .dq-bullets { margin: 0 0 12px; padding-left: 20px; }
.discuss-qblock .dq-bullets li { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin-bottom: 6px; }
.discuss-qblock .dq-k2lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.explain-qblock { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; background: #fff; }
.explain-qblock .eq-head { font-size: 13px; font-weight: 800; color: #6d28d9; margin-bottom: 8px; }
.explain-qblock .eq-qpeng { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.explain-qblock .eq-k3lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.explain-qblock .eq-fieldlbl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 10px 0 6px; }
.topt-warn { margin-top: 6px; font-size: 12px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 6px 9px; line-height: 1.5; }
.step-hint { margin: 0 0 10px; }
.step-hint summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.step-hint summary::before { content: "💡"; }
.step-hint .sh-hint { margin-top: 8px; padding: 11px 13px; background: var(--brand-softer, #f5f7fc); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.johnstone-grid { display: grid; gap: 12px; }
.johnstone-grid .jg-cell { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: #fafbfc; }
.johnstone-grid .jg-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.johnstone-grid .jg-sub { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.step-check { display: flex; flex-direction: column; gap: 8px; }
.step-check .sc-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.step-check .sc-item input { margin-top: 2px; flex: none; }
.build-table .cell-ta { width: 100%; min-height: 46px; border: none; resize: vertical; font: inherit; background: transparent; }
.upload-zone.slim { padding: 18px; }
.vlog-meta-fields { margin-top: 14px; }
.vlog-meta-fields .vlog-title { min-height: 0; height: 40px; }

/* ---------- P2 READ — trilevel Johnstone + definition boxes ---------- */
.prose .read-tri { display: grid; gap: 10px; margin: 4px 0 16px; }
@media (min-width: 760px) { .prose .read-tri { grid-template-columns: repeat(3, 1fr); } }
.prose .read-tri .rt-cell { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); padding: 12px 14px; background: #fff; }
.prose .read-tri .rt-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.prose .read-tri .rt-cell p { font-size: 13.5px; margin: 0; line-height: 1.55; }
.prose .read-tri .rt-makro { border-left-color: #2563eb; background: color-mix(in srgb, #2563eb 5%, #fff); }
.prose .read-tri .rt-makro .rt-lbl { color: #1d4ed8; }
.prose .read-tri .rt-submikro { border-left-color: #9333ea; background: color-mix(in srgb, #9333ea 5%, #fff); }
.prose .read-tri .rt-submikro .rt-lbl { color: #7e22ce; }
.prose .read-tri .rt-simbolik { border-left-color: #0d9488; background: color-mix(in srgb, #0d9488 5%, #fff); }
.prose .read-tri .rt-simbolik .rt-lbl { color: #0f766e; }
.prose .read-def { margin: 8px 0 16px; padding: 15px 18px; border-radius: var(--radius); background: #E8F5E9;
  border: 1px solid color-mix(in srgb, #2e7d32 26%, var(--line)); border-left: 4px solid #2e7d32; }
.prose .read-def .rd-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #1b5e20; margin-bottom: 7px; }
.prose .read-def p { margin: 0 0 8px; }
.prose .read-def p:last-child { margin-bottom: 0; }
.prose .read-def ul { margin: 0; }
.prose .read-eq { font-family: "Iosevka", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; text-align: center; letter-spacing: .01em; }
ol.prose-ul { padding-left: 22px; list-style: decimal; }

/* ---------- P3 READ — trilevel inline tags (rep-tag color variants) + figure caption + bordeaux section ---------- */
.prose .rep-tag.tag-makro { color: #1d4ed8; background: color-mix(in srgb, #2563eb 10%, #fff); border-color: color-mix(in srgb, #2563eb 30%, var(--line)); }
.prose .rep-tag.tag-submikro { color: #7e22ce; background: color-mix(in srgb, #9333ea 10%, #fff); border-color: color-mix(in srgb, #9333ea 30%, var(--line)); }
.prose .rep-tag.tag-simbolik { color: #0f766e; background: color-mix(in srgb, #0d9488 10%, #fff); border-color: color-mix(in srgb, #0d9488 30%, var(--line)); }
.prose .read-figcap { text-align: center; font-size: 12px; font-style: italic; color: var(--ink-3); margin: -8px 0 16px; line-height: 1.55; }
.prose .read-figcap em { font-style: italic; }
.prose .prose-hr.hr-bordeaux { border-top: 1.5px solid color-mix(in srgb, #8c1d3f 55%, var(--line)); margin: 22px 0 16px; }
.prose .prose-h.sec-bordeaux { color: #8c1d3f; display: flex; align-items: center; gap: 9px; }
.prose .prose-h.sec-bordeaux::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: #8c1d3f; flex: none; }

.proto-link.has-sub { align-items: flex-start; }
.proto-link .pl-stack { display: flex; flex-direction: column; line-height: 1.25; }
.proto-link .pl-main { font-weight: 600; }
.proto-link .pl-sub { font-size: 11px; opacity: .62; font-weight: 500; }

/* ---------- Sidebar Fase CREATE — expandable sub-menu ---------- */
.proto-link.create-parent { align-items: center; }
.proto-link.create-parent .pcs-chev { margin-left: auto; color: var(--ink-3); flex: none; transition: transform .18s ease; }
.proto-link.create-parent.exp .pcs-chev { transform: rotate(180deg); }
.proto-subwrap { margin: 2px 0 6px 13px; padding-left: 11px; border-left: 1.5px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.proto-subitem { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.proto-subitem:hover { background: var(--bg-2); color: var(--ink); }
.proto-subitem.on { background: var(--brand-soft); color: var(--brand); }
.proto-subitem .pcs-rail { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; }
.proto-subitem.on .pcs-rail { background: var(--brand); }
.proto-subitem .pcs-t { flex: 1; line-height: 1.25; }
.pcs-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 3px 6px; border-radius: 999px; flex: none; white-space: nowrap; }
.pcs-badge svg { flex: none; }
.pcs-badge.tugas { background: #e4efff; color: #1c53b0; }
.pcs-badge.view { background: var(--bg-2); color: var(--ink-3); }

/* ---------- CREATE — view-only mode badge ---------- */
.create-viewbadge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.create-viewbadge svg { flex: none; }

/* ---------- CREATE — placeholder P3/P4 ---------- */
.create-ph { border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--bg); padding: 42px 32px; text-align: center; }
.create-ph .cph-icon { font-size: 40px; line-height: 1; }
.create-ph h3 { font-size: 18px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin: 14px 0 10px; }
.create-ph .cph-lead { font-size: 14.5px; color: var(--ink-2); max-width: 560px; margin: 0 auto; line-height: 1.65; }
.create-ph .cph-while { text-align: left; max-width: 480px; margin: 22px auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 20px; }
.create-ph .cph-while-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
.create-ph .cph-while ul { margin: 0; padding-left: 18px; }
.create-ph .cph-while li { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.create-ph .cph-eta { font-size: 12.5px; color: var(--ink-3); font-style: italic; margin: 0 0 22px; }
.create-ph .cph-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.vlog-mode-toggle { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin: 0 0 12px; background: #fafbfc; }
.vlog-mode-toggle .vmt-label { font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 9px; }
.vlog-mode-toggle .vmt-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; background: #fff; }
.vlog-mode-toggle .vmt-opt:last-child { margin-bottom: 0; }
.vlog-mode-toggle .vmt-opt.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.vlog-mode-toggle .vmt-opt em { color: var(--ink-3); font-style: normal; }
.vlog-mode-toggle .radio { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 1px; position: relative; }
.vlog-mode-toggle .vmt-opt.on .radio { border-color: var(--brand); }
.vlog-mode-toggle .vmt-opt.on .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.vlog-rules { background: #eff6ff; border: 1px solid #c7ddf7; border-radius: 12px; padding: 11px 15px; margin: 0 0 14px; }
.vlog-rules .vr-h { font-size: 12px; font-weight: 800; color: #1d4ed8; margin-bottom: 6px; }
.vlog-rules ul { margin: 0; padding-left: 18px; }
.vlog-rules li { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.gdrive-form { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.gdrive-form .gd-url { min-height: 0; height: 40px; }
.gdrive-form .gd-dur { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.gdrive-form .gd-dur input { width: 90px; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; }
.gdrive-form .gd-hint { font-size: 12px; color: var(--ink-3); margin: 5px 0 0; }
.gdrive-form .gd-checks { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.gdrive-form .sc-item { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.gdrive-form .sc-item input { margin-top: 2px; flex: none; }
.gdrive-form .gd-verify[disabled] { opacity: .5; cursor: not-allowed; }
.vs-meta-link div { display: block; }
.vs-meta-link .vs-url { word-break: break-all; font-size: 12px; }
.vs-meta-link .vs-just { font-weight: 500; font-size: 12.5px; line-height: 1.55; display: block; margin-top: 3px; }

@media (max-width: 560px) {
  .likert { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .lk-opt { padding: 8px 2px; }
  .lk-opt .lk-lbl { font-size: 9.5px; }
  .ac-meta-row { flex-direction: column; align-items: center; }
  .jr-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   B-RATER — Penilai Pretest/Posttest (dosen/peneliti)
   ============================================================ */
.rater-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.rater-roleseg { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; flex-shrink: 0; }
.rater-roleseg button { border: none; background: none; padding: 8px 15px; border-radius: 9px; font-weight: 700; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.rater-roleseg button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

.rl-section { margin-top: 4px; }
.rl-sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rl-sechead h3 { margin: 0 0 5px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.rl-sechead p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.55; max-width: 640px; }
.rl-subtle { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin: 4px 0 0; max-width: 720px; }

.rl-statuschip { font-size: 11.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.rl-statuschip.wait { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); }
.rl-statuschip.warn { background: #fdeaea; color: #c0392b; }
.rl-statuschip.ok { background: #e9f7ee; color: #15803d; }

.rl-pickbtns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.rl-pickbtns .btn svg { width: 16px; height: 16px; }
.rl-hint { font-size: 12.5px; color: var(--ink-3); }
.rl-pickwrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.rl-pickhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; color: var(--ink); }
.rl-count { font-size: 12px; font-weight: 800; color: var(--brand); background: var(--brand-softer); padding: 4px 11px; border-radius: 999px; }
.rl-picklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.rl-pickrow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg-2); transition: border-color .15s, background .15s; }
.rl-pickrow.on { border-color: var(--brand); background: var(--brand-softer); }
.rl-pickrow input { accent-color: var(--brand); width: 15px; height: 15px; }
.rl-kode { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.rl-meta { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.rl-pickfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.rl-calcbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-top: 14px; }
.rl-calcbar b { font-size: 13.5px; color: var(--ink); }
.rl-calcbar p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }

.rl-rekal { margin-top: 16px; padding: 16px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; }
.rl-rekal h5 { margin: 0 0 4px; font-size: 13.5px; font-weight: 800; color: #92400e; }
.rl-rekal h5 span { font-weight: 600; color: #b45309; }
.rl-rekal p { margin: 0 0 10px; font-size: 12.5px; color: #92400e; line-height: 1.5; }
.rl-logs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rl-logitem { font-size: 12px; color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.rl-logitem span { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }

.rl-sesi { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; margin-left: 4px; vertical-align: middle; }
.rl-sesi.pretest { background: #e0f2f1; color: #0d7d72; }
.rl-sesi.posttest { background: #ede9fe; color: #6d28d9; }
.rl-pilotbadge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; background: #fde68a; color: #92400e; margin-left: 4px; vertical-align: middle; }
.rl-pentag { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cj-st.partial { background: #fef6e0; color: #b45309; }

.rl-banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border-radius: 12px; font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.rl-banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.rl-banner.warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.rl-banner.ok { background: #e9f7ee; border: 1px solid #a7e0bd; color: #15803d; }
.rl-banner a { font-weight: 800; text-decoration: underline; cursor: pointer; }
.rl-locked { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: var(--ink-3); }
.rl-lockic { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; }
.rl-lockic svg { width: 26px; height: 26px; color: var(--ink-3); }
.rl-locked p { font-size: 14px; font-weight: 700; margin: 0; }

.rl-toolrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rl-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-filterlbl { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rl-chk, .rl-vtoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.rl-chk input, .rl-vtoggle input { accent-color: var(--brand); width: 15px; height: 15px; }
.rl-vtoggle small { font-weight: 600; color: var(--ink-3); }
.rl-blindnote { display: flex; align-items: center; gap: 7px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12px; font-weight: 600; padding: 9px 13px; border-radius: 10px; line-height: 1.45; }
.rl-blindnote b { font-weight: 800; }

/* score buttons 0–4 */
.b-scorebtns { display: flex; gap: 8px; }
.b-scorebtns.sm { gap: 6px; }
.b-sbtn { width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; font-size: 16px; font-weight: 800; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; flex-shrink: 0; }
.b-scorebtns.sm .b-sbtn { width: 38px; height: 38px; font-size: 14px; }
.b-sbtn:hover { border-color: color-mix(in oklch, var(--brand) 45%, var(--line)); }
.b-sbtn.on { border-color: var(--brand); background: var(--brand); color: #fff; }

/* scoring modal */
.rater-modal { max-width: 1020px; width: 96vw; padding: 0; text-align: left; max-height: 92vh; display: flex; flex-direction: column; }
.rater-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.rm-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.rm-tags span { font-size: 11px; font-weight: 800; color: var(--brand); background: var(--brand-softer); padding: 4px 10px; border-radius: 999px; }
.rater-mhead h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.rm-headright { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rm-saved { font-size: 11.5px; font-weight: 800; color: #15803d; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.rm-saved.show { opacity: 1; }
.rater-mdimtabs { display: flex; gap: 6px; padding: 12px 20px 0; flex-shrink: 0; flex-wrap: wrap; }
.rm-dimtab { border: 1.5px solid var(--line); background: var(--bg-2); padding: 8px 14px; border-radius: 10px 10px 0 0; font-weight: 800; font-size: 13px; color: var(--ink-3); cursor: pointer; border-bottom: none; }
.rm-dimtab small { font-weight: 600; font-size: 10.5px; margin-left: 3px; }
.rm-dimtab.on { background: #fff; color: var(--brand); border-color: var(--brand); }
.rater-mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.rm-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.rm-panel-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rm-panel-h span { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.rm-answer { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 14px 16px; }
.rm-sketch { margin-top: 12px; }
.rm-sketch-lbl { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }

/* B-rater-2.1 — Konteks soal collapsible + sub-pertanyaan */
.rm-konteks { margin: 12px 20px 0; border: 1px solid var(--line); border-radius: 11px; background: var(--brand-softer); flex-shrink: 0; overflow: hidden; }
.rm-konteks > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12.5px; font-weight: 800; color: var(--brand); }
.rm-konteks > summary::-webkit-details-marker { display: none; }
.rm-konteks .rmk-ic { font-size: 14px; flex: none; }
.rm-konteks .rmk-line { font-weight: 600; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-konteks .rmk-toggle { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; flex: none; }
.rm-konteks[open] .rmk-toggle { content: ""; }
.rm-konteks[open] > summary { border-bottom: 1px solid var(--line); }
.rmk-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 11px; background: #fff; }
.rmk-sec h6 { margin: 0 0 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.rmk-sec p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.rm-subq { background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent-strong) 24%, var(--line)); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.rm-subq-lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); margin-bottom: 5px; }
.rm-subq p { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.6; }
.rm-subq-resp { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }

/* B-rater-2.1 — student page: tampilan IWS + main-question label + sub-pertanyaan */
.tes-stim .stim-cap .stim-iws { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.tes-stim .stim-cap .stim-iws b { color: var(--ink-2); font-weight: 800; }
.tes-qlbl { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 5px; }
.dim-subq { background: var(--brand-softer); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 9px; padding: 10px 13px; margin-bottom: 12px; }
.dim-subq-lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 5px; }
.dim-subq p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.6; }
.rm-sketch-ph { border: 1.5px dashed var(--line); border-radius: 11px; background: var(--bg-2); padding: 28px 14px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.rm-rubric { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 14px 16px; }
.rb-block { margin-bottom: 14px; }
.rb-block:last-child { margin-bottom: 0; }
.rb-block h6 { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--ink); }
.rb-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line-2); }
.rb-row:first-of-type { border-top: none; }
.rb-sk { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--brand); width: 46px; }
.rb-txt { font-size: 12px; color: var(--ink-3); font-style: italic; line-height: 1.45; }
.rb-ideal { font-size: 12px; color: var(--ink-3); font-style: italic; background: #fff; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; }
.rb-chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-style: italic; padding: 4px 0; }
.rm-scorebox { margin-top: 14px; padding: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; }
.rm-scorelbl, .rl-fieldlbl { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.rm-flagchk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; margin-top: 14px; }
.rm-flagchk input { accent-color: #d97706; width: 16px; height: 16px; }
.rm-flagchk small { font-weight: 600; color: var(--ink-3); }
.rm-note { display: block; margin-top: 12px; }
.rm-note span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.rm-note textarea { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 12.5px; resize: vertical; box-sizing: border-box; }
.rm-penview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-pvcol { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; }
.rm-pvcol span { font-size: 11px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.rm-pvcol b { display: block; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.2; margin: 2px 0; }
.rm-pvcol p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.rm-flagtag { font-size: 10.5px; font-weight: 800; color: #b45309; font-style: normal; }
.rm-penhint { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.rater-mfoot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); flex-shrink: 0; background: #fff; border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.rater-mfoot .btn svg { width: 15px; height: 15px; }

/* Tab 3 — kappa table + resolusi */
.kh-table td, .kh-table th { text-align: center; }
.kh-table td:first-child, .kh-table th:first-child { text-align: left; }
.kh-table .kh-final td { background: var(--brand-softer); font-weight: 800; }
.kh-ok { color: #15803d; font-weight: 800; }
.kh-warn { color: #c0392b; font-weight: 800; }
.kh-legend { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.kh-legend .kh-ok, .kh-legend .kh-warn { font-size: 13px; }
.dis-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.dis-item { background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.dis-item.warn { border-left-color: #d97706; }
.dis-item.flag { border-left-color: #c0392b; }
.dis-item.ok { border-left-color: #15803d; }
.dis-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink); margin-bottom: 9px; }
.dis-diff { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #c0392b; background: #fdeaea; padding: 3px 9px; border-radius: 999px; }
.dis-answer { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; }
.dis-scores { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.dis-scores b { color: var(--ink); }
.dis-suggest { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-softer); border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.45; }
.dis-resolve .b-scorebtns { margin-bottom: 10px; }
.dis-resolve .val-note { width: 100%; min-height: 48px; box-sizing: border-box; }
.dis-empty { font-size: 13px; color: var(--ink-3); line-height: 1.6; background: var(--bg-2); border: 1px dashed var(--line); border-radius: 12px; padding: 22px 18px; text-align: center; }

@media (max-width: 760px) {
  .rm-grid { grid-template-columns: 1fr; }
  .rm-penview { grid-template-columns: 1fr; }
  .rater-top { flex-direction: column; }
}

/* ===== B-rater-2 — guidance panels in scoring modal ===== */
.rm-rubric { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rm-gpanel { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 14px 16px; }
.gp-h { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.gp-sub { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.gp-topik { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--brand); }
.gp-info { margin: 0 0 9px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.rb-rows { display: flex; flex-direction: column; gap: 7px; }
.rb-row2 { display: flex; gap: 10px; align-items: flex-start; }
.rb-sk2 { flex-shrink: 0; width: 52px; font-size: 11px; font-weight: 800; color: #fff; background: var(--ink-3); border-radius: 6px; padding: 3px 0; text-align: center; }
.rb-sk2.sk-4 { background: #15803d; }
.rb-sk2.sk-3 { background: #4d9e5a; }
.rb-sk2.sk-2 { background: #d99211; }
.rb-sk2.sk-1 { background: #d97706; }
.rb-sk2.sk-0 { background: #b91c1c; }
.rb-txt2 { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.rb-txt2 b { display: block; color: var(--ink); font-size: 11.5px; margin-bottom: 1px; }
.gp-toggle { margin-top: 10px; background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 800; color: var(--brand); cursor: pointer; }
.gp-toggle:hover { text-decoration: underline; }
.gp-kunci { background: #f4f8fb; border-color: #d6e4f0; }
.kn-row { padding: 8px 0; border-top: 1px solid var(--line-2); }
.kn-row:first-of-type { border-top: none; }
.kn-sk { display: block; font-size: 11px; font-weight: 800; color: var(--ink-2); margin-bottom: 3px; }
.kn-txt { font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
.kn-model { background: #e8f5e9; border-radius: 8px; padding: 9px 11px; margin: 2px 0; border-top: none; }
.kn-model .kn-sk { color: #15803d; }
.kn-zero { margin-top: 8px; font-size: 11px; color: var(--ink-3); font-style: italic; }
.gp-sketsa { background: #fbf7ef; border-color: #ecdcc0; }
.sk-ideal { font-size: 11.5px; color: var(--ink-2); line-height: 1.6; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; }
.sk-ideal.muted { color: var(--ink-3); font-style: italic; }
.sk-rule3 { margin-top: 9px; font-size: 11px; line-height: 1.5; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 10px; }
.gp-checklist { background: #f5f3fb; border-color: #ddd5ee; }
.ck-tier { margin-bottom: 11px; }
.ck-th { font-size: 11px; font-weight: 800; color: #6d28d9; margin-bottom: 6px; }
.ck-th small { font-weight: 600; color: var(--ink-3); }
.ck-item { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; padding: 3px 0; cursor: pointer; }
.ck-item input { accent-color: #6d28d9; width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ck-suggest { font-size: 11.5px; color: var(--ink-2); background: #ede9fe; border-radius: 8px; padding: 9px 11px; line-height: 1.5; }
.ck-suggest b { color: #6d28d9; }
.ck-note { color: var(--ink-3); font-weight: 600; }
.gp-boundary { background: var(--bg-2); }
.bd-block { margin-bottom: 10px; }
.bd-block:last-child { margin-bottom: 0; }
.bd-sub { font-size: 11px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.bd-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.bd-list li { font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.bd-list b { color: var(--ink); }
.rm-flagrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rm-flagrow .rm-flagchk { margin-top: 0; }
.misk-info { background: none; border: none; padding: 0; font-size: 11px; font-weight: 800; color: var(--brand); cursor: pointer; white-space: nowrap; }
.misk-info:hover { text-decoration: underline; }
.modal.misk-modal { max-width: 560px; text-align: left; max-height: 86vh; overflow-y: auto; }
.misk-modal h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.misk-intro { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0 0 14px; }
.misk-list { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.misk-list li { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.rl-backmode { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0 0 12px; font-size: 12.5px; font-weight: 800; color: var(--brand); cursor: pointer; }
.rl-backmode svg { width: 15px; height: 15px; }
.rl-backmode:hover { text-decoration: underline; }

/* Sub-bab breadcrumb — base (semua viewport) */
.subbab-breadcrumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  margin-bottom: 18px;
}
.subbab-breadcrumb .bc-link { color: var(--ink-2); cursor: pointer; }
.subbab-breadcrumb .bc-link:hover { color: var(--brand); }
.subbab-breadcrumb .sep { opacity: .45; }
.subbab-breadcrumb b { color: var(--ink); font-weight: 800; }
.subbab-breadcrumb .bc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.subbab-breadcrumb .bc-eyebrow .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 1023px) { .subbab-breadcrumb .bc-eyebrow { display: none; } }

/* ============================================================
   PROMPT M-1 — Sub-bab Mahasiswa: independent scroll + sticky breadcrumb
   Desktop ≥1024px only. Sidebar kiri & konten kanan punya scroll sendiri.
   Tidak menyentuh halaman/peran lain (scoped ke #screen-meeting).
   ============================================================ */
@media (min-width: 1024px) {
  /* Wrap halaman sub-bab = kolom penuh viewport (di bawah appbar 62px) */
  #screen-meeting.active .wrap {
    height: calc(100vh - 62px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Sticky breadcrumb header di atas halaman sub-bab */
  #screen-meeting.active .subbab-breadcrumb {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
  }
  #screen-meeting.active .subbab-breadcrumb .bc-link { color: var(--ink-2); cursor: pointer; }
  #screen-meeting.active .subbab-breadcrumb .bc-link:hover { color: var(--brand); }
  #screen-meeting.active .subbab-breadcrumb .sep { opacity: .45; }
  #screen-meeting.active .subbab-breadcrumb b { color: var(--ink); font-weight: 800; }
  #screen-meeting.active .subbab-breadcrumb .bc-eyebrow {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  }
  #screen-meeting.active .subbab-breadcrumb .bc-eyebrow .tick {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  }

  /* Eyebrow lama di dalam wrap tidak perlu lagi (digantikan breadcrumb) */
  #screen-meeting.active > .wrap > div:first-child:not(.subbab-breadcrumb):not(.meeting-layout):not(.subnav-mobile) {
    flex: none;
  }

  /* Grid 2-kolom mengisi sisa tinggi; parent tidak scroll */
  #screen-meeting.active .meeting-layout {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    padding: 22px 22px 0;
    overflow: hidden;
  }

  /* Sidebar kiri: scroll independen, lebar dipertahankan */
  #screen-meeting.active .subnav {
    position: static;
    top: auto;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  /* Scroll bar sidebar lebih tipis & halus */
  #screen-meeting.active .subnav::-webkit-scrollbar { width: 6px; }
  #screen-meeting.active .subnav::-webkit-scrollbar-thumb {
    background: rgba(20, 32, 60, .18); border-radius: 3px;
  }
  #screen-meeting.active .subnav::-webkit-scrollbar-thumb:hover { background: rgba(20, 32, 60, .3); }
  #screen-meeting.active .subnav::-webkit-scrollbar-track { background: transparent; }
  #screen-meeting.active .subnav { scrollbar-width: thin; scrollbar-color: rgba(20,32,60,.18) transparent; }

  /* Konten kanan: scroll independen, scroll bar standar */
  #screen-meeting.active #subbabHost {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 60px;
  }
  #screen-meeting.active #subbabHost::-webkit-scrollbar { width: 10px; }
  #screen-meeting.active #subbabHost::-webkit-scrollbar-thumb {
    background: rgba(20, 32, 60, .26); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box;
  }
  #screen-meeting.active #subbabHost::-webkit-scrollbar-thumb:hover { background: rgba(20, 32, 60, .4); background-clip: padding-box; }
  #screen-meeting.active #subbabHost::-webkit-scrollbar-track { background: transparent; }
}

/* ============================================================
   SIM-05 · Larutan Jenuh & Kelarutan — dock fullscreen skeleton (F3a)
   Grid 2×2 KOLOM TERBALIK dari SIM-04. Reuse .s3-phead .micro/.macro/.symbol.
   ============================================================ */
.sim05-dock.sim05-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column;
  will-change: transform;
}
body.sim05-open .sim05-dock.sim05-fs{ transform: none; }
@media (max-width: 767px){ body.sim05-open{ overflow: hidden; } }

.s5-sim-title{ font-family: Arial, sans-serif; font-size: 19px; font-weight: 800;
  color: #1F2937; margin: 0 0 16px; letter-spacing: -.01em; }

/* grid 2×2: Submikro | Makro / Simbolik | Data — collapse ke 1 kolom di mobile */
.s5-panels{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px){ .s5-panels{ grid-template-columns: 40fr 35fr 25fr; } }
.s5-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB;
  border-radius: 12px; overflow: hidden; background: #fff; min-height: 500px; }
.s5-panel-data{ background: #F9FAFB; border-color: #6B7280; }

/* header netral Panel Data Kelarutan (override putih→gelap, scoped ke SIM-05) */
#sim05Dock .s3-phead.s5-neutral{ background: #F9FAFB; border-bottom: 1px solid #6B7280; }
#sim05Dock .s3-phead.s5-neutral h5{ color: #1F2937; }
#sim05Dock .s3-phead.s5-neutral .s3-tag{ color: #6B7280; }

/* placeholder isi panel */
.s5-pbody{ flex: 1; display: flex; padding: 14px; }
.s5-ph-box{ flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; border: 2px dashed #9CA3AF; border-radius: 10px;
  background: #F3F4F6; color: #6B7280; font-size: 13px; font-weight: 600; line-height: 1.4; }

/* footer — 3 area placeholder kontrol */
.s5-controls{ display: flex; flex-direction: row; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.s5-ctl-ph{ flex: 1 1 200px; display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 46px; padding: 12px 14px; border: 2px dashed #9CA3AF;
  border-radius: 10px; background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 700; line-height: 1.4; }
@media (max-width: 767px){ .s5-controls{ flex-direction: column; } }

/* F3k · Kontrol Tur Otomatis (mengisi placeholder Tur & Speed) */
.s5-ctl-tur{ flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.s5-tur-title{ font: 700 11px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; }
.s5-tur-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border: none; border-radius: 9px; background: #22C55E; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .18s ease, transform .08s ease; }
.s5-tur-btn:hover{ background: #16A34A; }
.s5-tur-btn:active{ transform: translateY(1px); }
.s5-tur-btn.stop{ background: #DC2626; }
.s5-tur-btn.stop:hover{ background: #B91C1C; }
/* F3k-fix1 · tombol Mulai Tur disabled saat suhu != 25°C */
.s5-tur-btn:disabled{ opacity: .5; cursor: not-allowed; background: #9CA3AF; color: #F3F4F6; }
.s5-tur-btn:disabled:hover{ background: #9CA3AF; }
.s5-tur-help{ font-size: 11px; line-height: 1.35; color: #6B7280; font-weight: 600; }
.s5-tur-help[hidden]{ display: none; }
.s5-tur-ico{ font-size: 12px; line-height: 1; }
.s5-tur-progress[hidden]{ display: none; }
.s5-tur-phase{ font: 700 11.5px/1.3 Arial, sans-serif; color: #1F2937; margin-bottom: 6px; }
.s5-tur-bar{ height: 6px; border-radius: 4px; background: #E5E7EB; overflow: hidden; }
.s5-tur-bar > i{ display: block; height: 100%; width: 0; border-radius: 4px; background: #22C55E; }
.s5-tur-speed{ margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.s5-tur-speed-lbl{ font: 700 10px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #9CA3AF; }
.s5-spd-seg{ display: flex; gap: 6px; }
.s5-spd-btn{ flex: 1; padding: 7px 4px; border: 1px solid #E5E7EB; border-radius: 7px; background: #fff; color: #6B7280; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.s5-spd-btn:hover{ background: #F3F4F6; }
.s5-spd-btn.on{ background: #1E40AF; color: #fff; border-color: #1E40AF; }
/* F3k · lock interaksi manual selama tur berjalan */
.s5-locked{ pointer-events: none; opacity: .55; }
/* F3k · highlight tombol Amati bergilir (Fase 5) */
.s5-amati-hi{ box-shadow: 0 0 0 3px rgba(34,197,94,.35), 0 0 14px rgba(34,197,94,.55); animation: s5AmatiPulse 1s ease-in-out infinite; }
@keyframes s5AmatiPulse{ 0%,100%{ box-shadow: 0 0 0 3px rgba(34,197,94,.30), 0 0 10px rgba(34,197,94,.40); } 50%{ box-shadow: 0 0 0 4px rgba(34,197,94,.55), 0 0 18px rgba(34,197,94,.70); } }

/* --- F3b · Panel Makroskopik kondisi awal statik --- */
.s5-makro-body{ flex-direction: column; align-items: stretch; gap: 6px; position: relative; }
/* Layout Panel Makro Fix · split 2 kolom: gelas kiri (~38%, capped ke ukuran asli 206px) + callout kanan (sisa ~55-60%) */
.s5-makro-scene{ flex: 1; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 24px; min-height: 150px; position: relative; padding: 0 16px; }
.s5-makro-glass{ flex: 0 1 38%; max-width: 206px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* F3d-c · badge state di atas gelas, center horizontal; kolom kanan tetap kosong (reserve callout Amati F3j) */
.s5-badge{ position: absolute; top: 4px; left: 0; right: 0; margin: 0 auto; width: fit-content;
  font: 700 13px/1 Arial, sans-serif; letter-spacing: .03em; padding: 6px 12px; border-radius: 5px;
  border: 1px solid transparent; opacity: 0; transition: opacity 300ms ease, background-color 300ms ease, color 300ms ease, border-color 300ms ease; pointer-events: none; z-index: 3; }
.s5-badge[data-state="none"]{ opacity: 0; }
.s5-badge[data-state="takjenuh"]{ opacity: 1; background: #DCFCE7; color: #065F46; border-color: #86EFAC; }
.s5-badge[data-state="jenuh"]{ opacity: 1; background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.s5-makro-glass svg{ width: 100%; height: auto; max-height: 220px; }
/* Layout Panel Makro Fix · reserve callout area kini kolom kanan in-flow (bukan overlay); lebih lebar → konten lengkap tanpa terpotong */
.s5-amati-callouts{ position: static; flex: 1 1 58%; align-self: stretch; width: auto; max-width: none; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; max-height: 100%; overflow-y: auto; }
.s5-amati-callouts:empty{ display: none; }
.s5-amati-callout{ border: 1px solid; border-radius: 8px; padding: 8px 10px; font: 600 11px/1.4 Arial, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.1); height: auto; flex: 0 0 auto; }
.s5-amati-callout-ttl{ font-size: 12.5px; font-weight: 800; margin-bottom: 4px; }
.s5-amati-callout-body{ font-weight: 500; }
.s5-amati-callout-body b{ font-weight: 800; }
.s5-amati-callout-body ul{ margin: 4px 0; padding-left: 15px; }
.s5-amati-callout-body li{ margin: 1px 0; }
/* F3j-a · 4 tombol Amati (1 utility abu + 3 konseptual color-coded) */
.s5-ctl-amati{ flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.s5-amati-title{ font: 700 11px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; }
.s5-amati-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s5-amati-btn{ padding: 9px 10px; border: 2px solid transparent; border-radius: 8px; font-family: inherit; font-size: 12px;
  font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.s5-amati-util{ background: #9CA3AF; color: #fff; }
.s5-amati-util.on{ background: #4B5563; border-color: #1F2937; }
.s5-amati-btn[data-amati="kesetimbangan"]{ background: #DBEAFE; color: #1E40AF; }
.s5-amati-btn[data-amati="kesetimbangan"].on{ background: #BFDBFE; border-color: #1E40AF; }
.s5-amati-btn[data-amati="endapan"]{ background: #DCFCE7; color: #065F46; }
.s5-amati-btn[data-amati="endapan"].on{ background: #BBF7D0; border-color: #065F46; }
.s5-amati-btn[data-amati="kelarutan"]{ background: #FEF3C7; color: #92400E; }
.s5-amati-btn[data-amati="kelarutan"].on{ background: #FDE68A; border-color: #92400E; }
/* F3c-fix2 · pivot rotasi EKSPLISIT di ujung gagang (tip) pada koordinat SVG absolut (92,32),
   tepat di atas mulut gelas. transform-box: view-box → transform-origin memakai sistem koordinat viewBox,
   bukan bounding box CSS (menghindari kegagalan fix1). Setara SVG rotate(-90 92 32). */
#sim05Dock{ --s5spd: 1; }
.s5-spoon{ transform-box: view-box; transform-origin: 92px 32px; transition: transform calc(500ms * var(--s5spd)) ease-in-out; }
.s5-spoon.s5-pour{ transform: rotate(-90deg); }
/* F3c · kristal di sendok (fade out saat menuang, restock saat sendok kembali) */
.s5-zat{ transition: opacity calc(200ms * var(--s5spd)) linear; }
.s5-zat.s5-zat-hide{ opacity: 0; }
/* F3c · kristal jatuh ke air lalu larut — resting di pertengahan air, mulai tersembunyi di mulut gelas */
.s5-zat-water{ transform-box: view-box; opacity: 0; transform: translateY(-46px); }
.s5-zat-water.s5-zat-fall{ opacity: 1; transform: translateY(0);
  transition: opacity calc(400ms * var(--s5spd)) ease-in, transform calc(1000ms * var(--s5spd)) ease-in; }
/* F3d-a: Frame 3 (fade out kondisional) kini di-drive inline oleh JS agar opacity target = bagian yang larut */
.s5-makro-lbl{ text-align: center; font-size: 12px; color: #6B7280; line-height: 1.3; }
/* Layout Panel Makro Fix · mobile fallback stacking (gelas atas, callout bawah full-width) */
@media (max-width: 767px){
  .s5-makro-scene{ flex-direction: column; align-items: stretch; gap: 12px; padding: 0 8px; }
  .s5-makro-glass{ align-self: center; }
  .s5-amati-callouts{ align-self: stretch; max-height: none; overflow-y: visible; }
}
/* F3d-b · endapan NaCl di dasar gelas: tumbuh dari dasar (transform-origin bawah) via scaleY */
.s5-endapan{ transform-box: view-box; transform-origin: 91px 188px; transform: scaleY(0); transition: transform calc(500ms * var(--s5spd)) ease-out; }
/* F3d-b · callout kapasitas endapan (muncul sekali per sesi) */
.s5-endapan-warn{ position: absolute; top: auto; bottom: 4px; left: 8px; right: 8px; z-index: 4; display: flex; gap: 8px;
  align-items: flex-start; background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; border-radius: 8px;
  padding: 8px 10px; font-size: 11px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.s5-endapan-warn[hidden]{ display: none; }
.s5-warn-x{ margin-left: auto; border: none; background: transparent; color: #92400E; font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0 2px; flex: none; }

/* --- F3e-a · Panel Submikroskopik statik --- */
.s5-sub-body{ flex-direction: column; align-items: stretch; gap: 6px; }
.s5-sub-scene{ flex: 1; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.s5-sub-scene svg{ width: 100%; height: 100%; max-height: 220px; }
.s5-sub-legend{ display: flex; gap: 14px; justify-content: center; font: 600 11px/1 Arial, sans-serif; color: #4B5563; }
.s5-sub-legend span{ display: inline-flex; align-items: center; gap: 5px; }
.s5-sub-legend i{ width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.s5-sub-legend .s5-lg-w{ background: #EF4444; box-shadow: 3px 2px 0 -1px #F9FAFB, -3px 2px 0 -1px #F9FAFB; }

/* --- F3f-a · Panel Simbolik statik (persamaan kesetimbangan + panah ⇌) --- */
.s5-sym-body{ flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 20px; }
.s5-sym-eq{ font: 400 25px/1.2 Arial, sans-serif; color: #1F2937; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.s5-sym-eq .s5-f{ font-weight: 700; }
.s5-sym-eq .s5-f sup{ font-size: 62%; font-weight: 700; }
.s5-sym-eq .s5-st{ font-size: 15px; font-weight: 400; color: #4B5563; vertical-align: baseline; margin: 0 1px 0 0; }
.s5-sym-eq .s5-plus{ margin: 0 6px; }
/* panah ⇌ = dua panah terpisah (→ atas + ← bawah), class jelas untuk highlight independen F3f-b */
.s5-eqm{ display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: .72; margin: 0 8px; }
.s5-ar{ font-size: 26px; font-weight: 700; color: #4B5563; opacity: .75; transition: color 250ms ease, opacity 250ms ease, filter 250ms ease; }
.s5-ar.s5-ar-on{ color: #8B5CF6; opacity: 1; filter: drop-shadow(0 0 4px rgba(139,92,246,.6)); }
.s5-ar-r{ margin-bottom: -2px; }
.s5-sym-legend{ display: flex; gap: 20px; font: 400 12px/1 Arial, sans-serif; color: #6B7280; flex-wrap: wrap; justify-content: center; }
.s5-sym-legend span{ display: inline-flex; align-items: center; gap: 5px; }
.s5-sym-legend .s5-lg-ar{ color: #4B5563; font-size: 15px; }

/* --- F3g-a · Panel Data Kelarutan grafik XY statik --- */
.s5-data-body{ flex-direction: column; align-items: stretch; gap: 6px; }
.s5-data-scene{ flex: 1; display: flex; align-items: center; justify-content: center; min-height: 150px; position: relative; }
/* F3h-a-fix1 · label marker dipindah ke corner atas kanan (bebas overlap dgn angka anchor & caption) */
.s5-marker-label{ position: absolute; top: 4px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 5px;
  font: 700 11px/1.2 Arial, sans-serif; color: #065F46; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.12); pointer-events: none; white-space: nowrap; }
.s5-marker-label[hidden]{ display: none; }
.s5-marker-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1px solid #1F2937; }
.s5-data-scene svg{ width: 100%; height: 100%; max-height: 220px; }
.s5-data-cap{ text-align: center; font: 400 11px/1.35 Arial, sans-serif; color: #6B7280; }

/* --- F3b · Kontrol Utama (tombol Tambah + slider suhu, visual saja) --- */
.s5-ctl-main{ flex: 2 1 340px; display: flex; flex-direction: column; gap: 14px;
  min-height: 46px; padding: 14px 16px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.s5-add-group{ display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.s5-btn-add{ padding: 12px 24px; border: none; border-radius: 8px; background: #22C55E; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.s5-btn-add:not(:disabled):hover{ background: #16A34A; }
.s5-btn-add.s5-add-pouring, .s5-btn-add:disabled{ background: #9CA3AF; cursor: default; }
.s5-add-sub{ font-size: 11px; color: #6B7280; }
.s5-temp-group{ display: flex; flex-direction: column; gap: 10px; }
.s5-temp-cur{ font-size: 13px; font-weight: 700; color: #1F2937; }
.s5-temp-slider{ display: flex; align-items: center; gap: 10px; }
.s5-temp-end{ font-size: 11.5px; color: #6B7280; white-space: nowrap; }
.s5-slider-wrap{ position: relative; flex: 1; min-width: 120px; padding-bottom: 20px; }
.s5-range{ -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
  background: #E5E7EB; outline: none; cursor: pointer; margin: 0; }
.s5-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #22C55E; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.s5-range::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: #22C55E;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.s5-ticks{ position: absolute; left: 0; right: 0; top: 12px; height: 16px; pointer-events: none; }
.s5-tick{ position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.s5-tick i{ width: 1.5px; height: 6px; background: #6B7280; }
.s5-tick b{ font-size: 9.5px; font-weight: 600; color: #4B5563; margin-top: 1px; }

/* ============================================================
   SIM-06 · Interaksi Zat Terlarut-Pelarut — dock fullscreen skeleton (F3a)
   3 panel trilevel side-by-side + Panel Debug full-width. Reuse .s3-phead .macro/.micro/.symbol.
   ============================================================ */
.sim06-dock.sim06-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column; will-change: transform;
}
body.sim06-open .sim06-dock.sim06-fs{ transform: none; }
@media (max-width: 767px){ body.sim06-open{ overflow: hidden; } }

.s6-title-row{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.s6-sim-title{ font-family: Arial, sans-serif; font-size: 19px; font-weight: 800; color: #1F2937; margin: 0; letter-spacing: -.01em; }
.s6-fase-badge{ font: 700 11px/1 Arial, sans-serif; color: #6D28D9; background: #EDE9FE; border: 1px solid #DDD6FE; padding: 5px 10px; border-radius: 999px; }

/* 3 panel side-by-side; tumpuk vertikal di viewport <1024px (F3k-a BP-03) */
/* F3k-a BP-13 · align-items stretch -> 3 panel tinggi setara (konten Makro & Simbolik center via justify-content di body-nya) */
.s6-panels{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 1024px){ .s6-panels{ grid-template-columns: repeat(3, 1fr); } }
.s6-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff; min-height: 260px; }
.s6-pbody{ flex: 1; display: flex; padding: 20px; background: #F9FAFB; }

/* Panel Makro · gelas kimia placeholder + label pelarut */
.s6-makro-body{ flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.s6-makro-lbl{ font: 500 12px/1 Arial, sans-serif; color: #6B7280; white-space: nowrap; text-align: center; }
.s6-makro-lbl b{ font-weight: 800; color: #1F2937; }
.s6-makro-glass{ flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 150px; }
.s6-makro-glass svg{ width: auto; height: 100%; max-height: 210px; }

/* Panel Submikro · placeholder teks center */
.s6-sub-body{ align-items: stretch; }
.s6-sub-ph{ flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px; border-radius: 10px; background: #F3F4F6; color: #9CA3AF; font-size: 11.5px; font-weight: 600; line-height: 1.5; }

/* F3b · gallery asset molekul statis di Panel Submikro */
.s6-sub-body{ flex-direction: column; gap: 18px; }
.s6-asset-note{ font: italic 500 10.5px/1.4 Arial, sans-serif; color: #9CA3AF; text-align: center; }
.s6-gallery{ flex: 1; display: flex; align-items: flex-start; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.s6-asset{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.s6-asset-art{ height: 54px; display: flex; align-items: center; justify-content: center; }
.s6-asset-art svg{ height: 100%; max-width: 100%; width: auto; overflow: visible; }
.s6-asset-cap{ font: 700 11px/1.3 Arial, sans-serif; color: #374151; text-align: center; }
.s6-asset-cap span{ display: block; font-weight: 500; font-size: 9.5px; color: #6B7280; }
/* F3d-a · scenario view state-driven Panel Sub-mikro */
.s6-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }
.s6-scenario-lbl{ font: 700 13.5px/1.3 Arial, sans-serif; color: #374151; text-align: center; }
.s6-micro-ic{ font-size: 1.35em; vertical-align: -0.12em; }
.s6-scene{ flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.s6-scene-svg{ width: 100%; max-width: 100%; height: auto; max-height: 100%; overflow: visible; }
.s6-scene-ph{ font: italic 500 15px/1.6 Arial, sans-serif; color: #9CA3AF; text-align: center; max-width: 460px; }
.s6-scene-ph span{ display: block; font-size: 12.5px; }
.s6-oh circle{ fill: #F9FAFB; stroke: #DC2626; stroke-width: 2; }
.s6-oh text{ font: 700 7px/1 Arial, sans-serif; fill: #7F1D1D; text-anchor: middle; dominant-baseline: central; }
.s6-blob-lbl{ font: 800 11px/1 Arial, sans-serif; text-anchor: middle; dominant-baseline: central; }
.s6-lbl-vc{ fill: #FFFFFF; font-size: 19px; }
.s6-lbl-ve{ fill: #1A2E05; font-size: 15px; }
.s6-atom-o{ font: 700 10px/1 Arial, sans-serif; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }
.s6-atom-h{ font: 700 8px/1 Arial, sans-serif; fill: #1F2937; text-anchor: middle; dominant-baseline: central; }
.s6-hexc circle{ fill: #4B5563; stroke: #FFFFFF; stroke-width: 1; }
.s6-hexc text{ font: 700 7px/1 Arial, sans-serif; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }
.s6-chainc circle{ fill: #365314; stroke: #FFFFFF; stroke-width: .5; }
.s6-chainc text{ font: 700 5.5px/1 Arial, sans-serif; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }
/* F3c · asset pelarut nonpolar baris 2 */
.s6-cl circle{ fill: #86EFAC; stroke: #166534; stroke-width: 1.5; }
.s6-cl text{ font: 700 5.5px/1 Arial, sans-serif; fill: #166534; text-anchor: middle; dominant-baseline: central; }
.s6-catom circle{ fill: #4B5563; stroke: #1F2937; stroke-width: 1.5; }
.s6-catom text{ font: 700 7px/1 Arial, sans-serif; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }
.s6-warn circle{ fill: #F97316; stroke: #C2410C; stroke-width: 1; }
.s6-warn text{ font: 900 10px/1 Arial, sans-serif; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }

/* Panel Simbolik · state besar + area struktur mini */
.s6-sym-body{ flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.s6-sym-state{ font: 800 30px/1 Arial, sans-serif; color: #4B5563; margin-top: 12px; }
.s6-sym-sub{ font: italic 500 12.5px/1.4 Arial, sans-serif; color: #6B7280; text-align: center; max-width: 92%; }
.s6-vite-legend{ font: italic 500 11px/1.4 Arial, sans-serif; color: #6B7280; text-align: center; margin-top: 12px; padding: 0 8px; }
.s6-sym-struct{ width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 6px 4px; }
.s6-skeletal{ width: auto; max-width: 100%; max-height: 118px; height: auto; overflow: visible; }
.s6-skeletal text{ font: 600 9px/1 Arial, sans-serif; fill: #374151; }

/* Panel Debug · full-width monospace */
.s6-panel-debug{ margin-top: 24px; min-height: 0; background: #F9FAFB; border-color: #6B7280; }
#sim06Dock .s3-phead.s6-neutral{ background: #F9FAFB; border-bottom: 1px solid #6B7280; }
#sim06Dock .s3-phead.s6-neutral h5{ color: #1F2937; }
#sim06Dock .s3-phead.s6-neutral .s3-tag{ color: #6B7280; }
.s6-debug-body{ padding: 14px 20px; }
.s6-debug-pre{ margin: 0; font: 500 12px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #374151; white-space: pre-wrap; }
.s6-dk{ color: #374151; }
.s6-dv{ color: #059669; font-weight: 700; }

/* Footer controls */
.s6-controls{ display: flex; flex-direction: row; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.s6-ctl-inputs{ display: flex; gap: 14px; flex-wrap: wrap; }
.s6-field{ display: flex; flex-direction: column; gap: 5px; }
.s6-field-lbl{ font: 700 10px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; }
.s6-select{ min-width: 150px; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff;
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #1F2937; cursor: pointer; }
.s6-select:focus{ outline: none; border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
/* F3c-fix2 · custom dropdown (open upward, z-index 1000, semua opsi terlihat) */
.s6-dd{ position: relative; }
.s6-dd-native{ display: none; }
.s6-dd-trigger{ min-width: 150px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #1F2937; cursor: pointer; text-align: left; }
.s6-dd.open .s6-dd-trigger, .s6-dd-trigger:focus-visible{ outline: none; border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.s6-dd-caret{ width: 12px; height: 12px; flex: none; color: #6B7280; transition: transform .15s ease; }
.s6-dd.open .s6-dd-caret{ transform: rotate(180deg); }
.s6-dd-menu{ list-style: none; margin: 0; padding: 5px; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 1000; background: #fff; border: 1px solid #D1D5DB; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(13,22,45,.35); display: none; max-height: 240px; overflow-y: auto; }
.s6-dd.open .s6-dd-menu{ display: block; }
.s6-dd-opt{ padding: 9px 11px; border-radius: 6px; font: 600 13px/1.2 Arial, sans-serif; color: #1F2937; cursor: pointer; }
.s6-dd-opt:hover{ background: #F3F0FF; }
.s6-dd-opt[aria-selected="true"]{ background: #EDE9FE; color: #6D28D9; font-weight: 800; }
.s6-ctl-actions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s6-btn{ padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; font-family: Arial, sans-serif;
  font-size: 13px; font-weight: 800; cursor: pointer; transition: background .18s ease, transform .08s ease; }
.s6-btn:active{ transform: translateY(1px); }
.s6-btn-primary{ background: #8B5CF6; color: #fff; }
.s6-btn-primary:hover{ background: #7C3AED; }
.s6-btn-tur{ display: inline-flex; align-items: center; gap: 8px; background: #22C55E; color: #fff; }
.s6-btn-tur:hover{ background: #16A34A; }
.s6-btn-tur.s6-btn-tur-stop{ background: #DC2626; }
.s6-btn-tur.s6-btn-tur-stop:hover{ background: #B91C1C; }
.s6-tur-ico{ font-size: 11px; line-height: 1; }
.s6-btn-reset{ background: #fff; color: #6B7280; border-color: #D1D5DB; }
.s6-btn-reset:hover{ background: #F3F4F6; }
.s6-speed{ display: flex; flex-direction: column; gap: 5px; }
.s6-speed-lbl{ font: 700 10px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #9CA3AF; }
.s6-spd-seg{ display: flex; gap: 6px; }
.s6-spd-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 46px;
  padding: 8px 10px; border: 1px solid #E5E7EB; border-radius: 7px; background: #fff; color: #6B7280;
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.s6-spd-btn:hover{ background: #F3F4F6; }
.s6-spd-btn.on{ background: #6D28D9; color: #fff; border-color: #6D28D9; }
.s6-spd-radio{ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
@media (max-width: 767px){ .s6-controls{ flex-direction: column; align-items: stretch; } }

/* ============================================================
   SIM-07 · Pengaruh Tekanan terhadap Kelarutan Gas — dock fullscreen skeleton (F3a)
   3 panel trilevel side-by-side, tumpuk vertikal <1024px. Reuse .s3-phead .macro/.micro/.symbol + shell .s1-fs-*.
   ============================================================ */
.sim07-dock.sim07-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column; will-change: transform;
}
body.sim07-open .sim07-dock.sim07-fs{ transform: none; }
@media (max-width: 767px){ body.sim07-open{ overflow: hidden; } }

.s7-title-row{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.s7-fase-badge{ font: 700 11px/1 Arial, sans-serif; color: #6D28D9; background: #EDE9FE; border: 1px solid #DDD6FE; padding: 5px 10px; border-radius: 999px; }

/* 3 panel side-by-side; tumpuk vertikal di viewport <1024px */
.s7-panels{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 1024px){ .s7-panels{ grid-template-columns: repeat(3, 1fr); } }
.s7-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff; min-height: 260px; }
.s7-pbody{ flex: 1; display: flex; padding: 20px; background: #F9FAFB; }

/* area kosong per panel + placeholder text netral */
.s7-canvas-empty{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.s7-canvas-empty svg{ width: 100%; max-width: 180px; height: auto; }
.s7-placeholder{ margin: 0; font: italic 500 12.5px/1.5 Arial, sans-serif; color: #9CA3AF; max-width: 220px; }

/* footer — kontrol placeholder */
.s7-controls{ align-items: center; }
.s7-ctl-placeholder{ margin: 0; font: italic 500 12.5px/1.5 Arial, sans-serif; color: #9CA3AF; }

/* ---- F3c · kontrol UI + drag piston ---- */
.s7-piston-hit{ cursor: grab; }
.sim07-dragging .s7-piston-hit, .sim07-dragging{ cursor: grabbing; }
.s7-piston{ touch-action: none; }

.s7-controls{ flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap; }
.s7-field{ display: flex; flex-direction: column; gap: 5px; }
.s7-field-lbl{ font: 700 10px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.s7-gas-seg{ display: inline-flex; border: 1px solid #D1D5DB; border-radius: 9px; overflow: hidden; }
.s7-gas-btn{ position: relative; padding: 7px 16px; font: 700 13px/1 Arial, sans-serif; color: #374151; background: #fff; cursor: pointer; border-right: 1px solid #D1D5DB; }
.s7-gas-btn:last-child{ border-right: none; }
.s7-gas-btn.on{ background: #2563EB; color: #fff; }
.s7-gas-radio{ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.s7-gas-state{ font: 600 13px/1 Arial, sans-serif; color: var(--ink-2); }
.s7-gas-state b{ color: #1F2937; }

.s7-speed{ display: inline-flex; align-items: center; gap: 8px; }
.s7-speed-lbl{ font: 700 10px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.s7-spd-seg{ display: inline-flex; border: 1px solid #D1D5DB; border-radius: 8px; overflow: hidden; }
.s7-spd-btn{ padding: 6px 12px; font: 700 12px/1 Arial, sans-serif; color: #374151; background: #fff; border: none; border-right: 1px solid #D1D5DB; cursor: pointer; }
.s7-spd-btn:last-child{ border-right: none; }
.s7-spd-btn.on{ background: #2563EB; color: #fff; }
.s7-btn{ margin-left: auto; padding: 9px 20px; border-radius: 9px; font: 700 13px/1 Arial, sans-serif; cursor: pointer; border: 1px solid transparent; }
.s7-btn-reset{ background: #fff; color: #374151; border-color: #D1D5DB; }
.s7-btn-reset:hover{ background: #F3F4F6; }
.s7-shake-btn{ padding: 9px 18px; border-radius: 9px; font: 700 13px/1 Arial, sans-serif; cursor: pointer; border: 1px solid #C2410C; background: #EA580C; color: #fff; }
.s7-shake-btn:hover{ background: #C2410C; }
.s7-shake-btn.shaking{ opacity: .6; pointer-events: none; }
/* F3j · tombol Tur Otomatis (konsisten pola SIM-05/06) + lock kontrol saat tur */
.s7-btn-tur{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 9px; font: 700 13px/1 Arial, sans-serif; cursor: pointer; border: 1px solid #16A34A; background: #22C55E; color: #fff; }
.s7-btn-tur:hover{ background: #16A34A; }
.s7-btn-tur:active{ transform: translateY(1px); }
.s7-btn-tur.s7-btn-tur-stop{ background: #DC2626; border-color: #B91C1C; }
.s7-btn-tur.s7-btn-tur-stop:hover{ background: #B91C1C; }
.s7-tur-ico{ font-size: 11px; line-height: 1; }
.s7-tour-lock #s7PistonHit{ pointer-events: none; }
.s7-tour-lock .s7-gas-seg, .s7-tour-lock .s7-shake-btn, .s7-tour-lock .s7-btn-reset{ opacity: .45; pointer-events: none; }

/* k_H line di Panel Simbolik */
.s7-kh{ font: 500 12px/1.5 "Times New Roman", Georgia, serif; color: #374151; text-align: left; }
.s7-kh i{ font-style: italic; }
.s7-kh sub{ font-size: .62em; }
.s7-kh sup{ font-size: .68em; }

/* legend highlight gas aktif */
.s7-lg{ opacity: .5; font-weight: 500; transition: opacity .15s; }
.s7-lg.s7-lg-active{ opacity: 1; font-weight: 800; }

/* ---- F3d · zoom particle view (Panel Sub-mikro) ---- */
.s7-zoom{ width: 100%; display: flex; justify-content: center; }
.s7-zoom-svg{ width: 100%; max-width: 260px; height: auto; }
.s7-zone-lbl{ font: 700 9px/1 Arial, sans-serif; fill: #6B7280; }

@media (max-width: 767px){ .s7-controls{ gap: 14px; } .s7-btn{ margin-left: 0; } }

/* ---- F3b · rendering statik dalam panel ---- */
/* Panel Makro — silinder + piston + air */
.s7-makro{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s7-cyl{ width: 100%; max-width: 180px; height: auto; margin: auto; }
.s7-cyl-lbl{ font: 700 9px/1 Arial, sans-serif; fill: #6B7280; }
/* F3i-1 · label state + callout kontekstual */
.s7-state-label{ width: 100%; font: 700 11px/1.3 Arial, sans-serif; color: #1F2937; text-align: center; background: #F3F4F6; border-radius: 6px; padding: 5px 8px; box-sizing: border-box; }
.s7-callout{ width: 100%; border-radius: 8px; padding: 8px 10px; font: 500 11px/1.45 Arial, sans-serif; box-sizing: border-box; }
.s7-callout-lbl{ display: block; font: 800 9px/1 Arial, sans-serif; letter-spacing: .08em; margin-bottom: 3px; }
.s7-callout-app{ background: #F0FDF4; color: #166534; }
.s7-callout-app .s7-callout-lbl{ color: #15803D; }
.s7-callout-mek{ background: #EFF6FF; color: #1E40AF; margin-top: 6px; }
.s7-callout-mek .s7-callout-lbl{ color: #1D4ED8; }
.s7-callout[hidden]{ display: none; }
/* F3j · narration Tur Otomatis — prominent, distinct dari callout Aplikasi (hijau) & Mekanisme (biru) */
.s7-callout-tur{ background: #EEF2FF; color: #3730A3; border: 1px solid #C7D2FE; }
.s7-callout-tur .s7-callout-lbl{ color: #4F46E5; }

/* Panel Sub-mikro — referensi molekul */
.s7-sub{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.s7-sub-hd{ font: 700 11.5px/1.2 Arial, sans-serif; color: #1F2937; text-align: center; }
.s7-mol-row{ display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.s7-mol{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.s7-mol svg{ width: 72px; height: auto; }
.s7-mol figcaption{ font: 700 12px/1 Arial, sans-serif; color: #374151; }
.s7-atom{ text-anchor: middle; dominant-baseline: central; font: 700 8px/1 Arial, sans-serif; }
.s7-atom-lt{ fill: #fff; }
.s7-atom-dk{ fill: #4B5563; }

/* Panel Simbolik — persamaan + frame grafik */
.s7-sym{ flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.s7-blk{ text-align: left; }
.s7-blk-lbl{ font: 700 9.5px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 3px; }
.s7-calc{ font: 500 12px/1.55 "Times New Roman", Georgia, serif; color: #374151; }
.s7-calc i{ font-style: italic; }
.s7-calc-res{ font-weight: 700; color: #1F2937; }
.s7-hint{ font: italic 400 10px/1 Arial, sans-serif; color: #9CA3AF; }
.s7-eq{ font: 400 20px/1.1 "Times New Roman", Georgia, serif; color: #1F2937; }
.s7-eq i{ font-style: italic; }
.s7-eq sub{ font-size: 0.62em; }
.s7-eq-cap{ font: italic 500 10.5px/1.35 Arial, sans-serif; color: #6B7280; }
.s7-graph{ width: 100%; max-width: 280px; height: auto; margin: 4px auto 0; }
.s7-tick text{ text-anchor: middle; font: 500 8px/1 Arial, sans-serif; fill: #6B7280; }
.s7-tick-y text{ text-anchor: end; }
.s7-axlbl{ text-anchor: middle; font: 700 9px/1 Arial, sans-serif; fill: #374151; }
.s7-legend{ display: flex; gap: 16px; align-self: center; }
.s7-scale-note{ font: italic 500 10px/1.3 Arial, sans-serif; color: #6B7280; align-self: center; text-align: center; }
.s7-scale-deriv{ display: block; margin-top: 2px; font-style: normal; color: #9CA3AF; }
.s7-scale-deriv i{ font-style: italic; }
.s7-scale-deriv sub{ font-size: .7em; }
.s7-lg{ display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 Arial, sans-serif; color: #374151; }
.s7-lg-sw{ display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.s7-lg-co2{ background: #374151; }
.s7-lg-n2{ background: #3B82F6; }

/* ============================================================
   SIM-08 · Simulasi Kelarutan vs Suhu — dock fullscreen skeleton (F3a)
   Pattern identik SIM-07: 3 panel trilevel side-by-side, tumpuk vertikal <1024px.
   Reuse .s3-phead .macro/.micro/.symbol + shell .s1-fs-*. Placeholder-only (F3a).
   ============================================================ */
.sim08-dock.sim08-fs{
  position: fixed; inset: 0; width: 100%;
  background: #fff; border-left: none; box-shadow: none;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column; will-change: transform;
}
body.sim08-open .sim08-dock.sim08-fs{ transform: none; }
@media (max-width: 767px){ body.sim08-open{ overflow: hidden; } }

.s8-title-row{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.s8-fase-badge{ font: 700 11px/1 Arial, sans-serif; color: #6D28D9; background: #EDE9FE; border: 1px solid #DDD6FE; padding: 5px 10px; border-radius: 999px; }

/* 3 panel side-by-side (25/25/50, Simbolik dominant); tumpuk vertikal di viewport <1024px */
.s8-panels{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1024px){ .s8-panels{ grid-template-columns: 1fr 1fr 2fr; } }
.s8-panel{ display: flex; flex-direction: column; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff; min-height: 400px; }
.s8-pbody{ flex: 1; display: flex; padding: 20px; background: #fff; }

/* placeholder box F3a — menempati ~90% area body, dashed netral */
.s8-ph-box{ flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  margin: 5%; padding: 18px; border: 1px dashed #d1d5db; background: #f9fafb; border-radius: 8px;
  color: #6b7280; font: 500 12.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* control panel bawah — 3 slot fungsional, proporsi ~60/25/15 (F3k: slot speed dihapus) */
.s8-controls{ align-items: stretch; gap: 12px; background: #f3f4f6; }
.s8-slot{ display: flex; align-items: center; justify-content: center; text-align: center;
  height: 60px; padding: 8px 12px; border: 1px dashed #d1d5db; background: #fff; border-radius: 8px;
  color: #6b7280; font: 500 11.5px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
/* F3b-1 · Panel Makro assets — beaker + termometer side-by-side (top-anchored, F3k) */
.s8-makro{ flex: 1; display: flex; align-items: flex-start; justify-content: center; gap: 24px; padding: 20px 4px 6px; }
.s8-beaker-svg{ height: 300px; width: auto; }
.s8-thermo-col{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s8-thermo-svg{ height: 300px; width: auto; }
.s8-readout{ background: #111827; color: #10b981; font: 700 18px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 9px 14px; border-radius: 7px; letter-spacing: .06em; min-width: 64px; text-align: center; }
@media (max-width: 1023px){ .s8-beaker-svg{ height: 240px; } .s8-thermo-svg{ height: 240px; } .s8-makro{ gap: 14px; } }

/* F3b-2 · Panel Sub-mikro assets */
#sim08-panel-submikro{ position: relative; }
.s8-sub{ flex: 1; align-self: stretch; display: flex; }
.s8-sub-svg{ width: 100%; height: 100%; min-height: 340px; }
.s8-count{ position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.85); border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 8px; font: 600 12px/1.4 system-ui, Arial, sans-serif; color: #374151; }

.s8-slot-slider{ flex: 60 1 240px; }
.s8-slot-mode{ flex: 25 1 150px; }
.s8-slot-reset{ flex: 15 1 90px; }
@media (max-width: 767px){ .s8-slot{ flex-basis: 100%; } .s8-slot-mode, .s8-slot-reset{ flex-basis: 45%; } }

/* F3c · kontrol UI dasar — slider suhu, toggle mode, reset */
.s8-slot-live{ display: flex; align-items: center; height: auto; padding: 6px 10px; border: none; background: transparent; }
.s8-ctl-field{ display: flex; flex-direction: column; gap: 8px; width: 100%; }
.s8-ctl-lbl{ font: 600 13px/1 system-ui, Arial, sans-serif; color: #374151; }
.s8-slider-row{ display: flex; align-items: center; gap: 16px; }
.s8-slider-wrap{ position: relative; flex: 1; padding-top: 8px; }
.s8-tickmarks{ position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 0 9px; pointer-events: none; }
.s8-tickmarks i{ width: 2px; height: 6px; background: #9ca3af; border-radius: 1px; }
.s8-slider{ -webkit-appearance: none; appearance: none; width: 100%; height: 9px; border-radius: 5px; background: linear-gradient(to right, #93c5fd, #fb923c); outline: none; cursor: pointer; }
.s8-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #374151; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.s8-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #374151; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.s8-slider-ticks{ display: flex; justify-content: space-between; padding: 0 4px; margin-top: 5px; font: 500 11px/1 system-ui, Arial, sans-serif; color: #6b7280; }
.s8-slider-value{ font: 700 26px/1 system-ui, Arial, sans-serif; color: #111827; min-width: 78px; text-align: right; }
.s8-mode-pill{ display: flex; gap: 4px; padding: 4px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 999px; }
.s8-mode-btn{ flex: 1; border: none; background: transparent; padding: 8px 14px; border-radius: 999px; font: 600 13px/1 system-ui, Arial, sans-serif; color: #6b7280; cursor: pointer; white-space: nowrap; }
.s8-mode-btn.active{ background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.s8-reset-btn{ display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; font: 600 13px/1 system-ui, Arial, sans-serif; color: #374151; cursor: pointer; }
.s8-reset-btn:hover{ background: #f3f4f6; }
.s8-reset-btn svg{ width: 16px; height: 16px; }

/* F3e-2 · layer visibility toggle Padatan/Gas */
.sim08-padatan-layer, .sim08-gas-layer{ display: none; }
.sim08-dock[data-sim08-mode="padatan"] .sim08-padatan-layer{ display: block; }
.sim08-dock[data-sim08-mode="gas"] .sim08-gas-layer{ display: block; }

/* F3g-1 · Panel Simbolik formula + data lookup */
#sim08-panel-simbolik{ overflow-y: auto; }
.sim08-simbolik-container{ display: flex; flex-direction: column; gap: 0; width: 100%; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.sim08-simbolik-padatan, .sim08-simbolik-gas{ transition: opacity 200ms ease-in-out; }
.s8-sym-head{ font: 700 13px/1.2 system-ui, Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-radius: 7px; margin-bottom: 14px; }
.s8-sym-head-pad{ background: #dbeafe; color: #1e3a8a; }
.s8-sym-head-gas{ background: #ffedd5; color: #9a3412; }
.s8-sym-blk{ margin-bottom: 14px; }
.s8-sym-lbl{ font: 600 11.5px/1.4 system-ui, Arial, sans-serif; color: #6b7280; margin-bottom: 5px; }
.s8-sym-eq{ font-size: 15px; color: #111827; font-weight: 600; }
.s8-sym-eq i, .s8-sym-calc i{ font-style: italic; }
.s8-sym-calc{ font-size: 13.5px; color: #374151; line-height: 1.7; padding-left: 14px; }
.s8-sym-res{ font-weight: 700; }
.s8-dyn{ color: #1e40af; font-weight: 700; }
.s8-dyn-hi{ color: #b45309; }
.s8-sym-sys{ font: italic 500 12.5px/1.4 system-ui, Arial, sans-serif; color: #374151; margin: 4px 0 10px; }
.s8-sym-tbl{ border-top: 1px solid #e5e7eb; padding-top: 10px; }
.s8-sym-row{ display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #374151; padding: 4px 0; }
.s8-gas-tbl{ border-collapse: collapse; width: 100%; margin-top: 4px; font-size: 13px; }
.s8-gas-tbl th, .s8-gas-tbl td{ border: 1px solid #d1d5db; padding: 5px 12px; text-align: left; }
.s8-gas-tbl th{ background: #f3f4f6; font: 600 12px/1 system-ui, Arial, sans-serif; color: #6b7280; }
.s8-gas-tbl tr.s8-gas-active td{ background: #fef3c7; font-weight: 700; color: #92400e; }
.s8-sym-note{ font-size: 11px; color: #9ca3af; margin-top: 5px; }
.s8-sym-interp{ border-top: 1px solid #e5e7eb; padding-top: 10px; margin-top: 10px; font-size: 12.5px; color: #374151; line-height: 1.6; }
.s8-sym-interp-lbl{ font: italic 600 12px/1 system-ui, Arial, sans-serif; color: #6b7280; margin-bottom: 5px; }
.s8-sym-reserved{ display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.s8-sym-ph{ border: 1px dashed #e5e7eb; border-radius: 6px; padding: 12px; text-align: center; color: #9ca3af; font: 500 11px/1.4 ui-monospace, Menlo, monospace; }
/* F3g-2 · grafik kurva */
.s8-grafik{ display: flex; flex-direction: column; }
.s8-grafik-title{ font: 700 12px/1.2 system-ui, Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #374151; margin-bottom: 6px; }
.s8-grafik-svg{ width: 100%; max-width: 500px; height: auto; margin: 0 auto; display: block; }
.s8-grafik-compare{ display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 12.5px/1.3 system-ui, Arial, sans-serif; color: #374151; cursor: pointer; }
.s8-grafik-compare input{ width: 15px; height: 15px; cursor: pointer; }

/* ============================================================
   BATCH D-SIM08 · COMPRESS VERTIKAL (target minimal-scroll @1080p)
   Override DISKOP ke `.sim08-dock` — SIM lain (yang berbagi
   .s3-phead / .s1-fs-*) TIDAK terpengaruh.
   ============================================================ */
/* Fix 5 — chip Fase + spacing header rapat */
.sim08-dock .s1-fs-main{ padding: 14px 22px; }
.sim08-dock .s8-title-row{ margin: 0 0 10px; }
/* Fix 1 — gap antar-kolom & padding body 3 kolom */
.sim08-dock .s8-panels{ gap: 16px; }
.sim08-dock .s8-pbody{ padding: 12px; }
.sim08-dock .s8-makro{ padding: 12px 4px 6px; }
/* Fix 3a — substitusi line-height ~1.4 + rapatkan blok Simbolik */
.sim08-dock .s8-sym-calc{ line-height: 1.4; }
.sim08-dock .s8-sym-head{ margin-bottom: 8px; padding: 7px 12px; }
.sim08-dock .s8-sym-blk{ margin-bottom: 8px; }
.sim08-dock .s8-sym-reserved{ margin-top: 10px; }
/* Fix 4 — bottom controls padding rapat */
.sim08-dock .s1-fs-controls{ padding: 12px 22px; }

/* F3i-1 · callout Mekanisme / Aplikasi / Miskonsepsi (statik, toggle per mode) */
#sim08-callout-container{ border: none; padding: 0; text-align: left; }
.sim08-callout-padatan, .sim08-callout-gas{ transition: opacity 200ms ease-in-out; }
.sim08-callout-box{ border-radius: 6px; padding: 10px 12px; margin: 8px 0; font: 400 12.5px/1.5 system-ui, Arial, sans-serif; color: #374151; }
.sim08-callout-header{ font: 700 11px/1.3 system-ui, Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.sim08-callout-body b{ font-weight: 700; }
.sim08-callout-mek{ background: #dbeafe; border-left: 4px solid #3b82f6; }
.sim08-callout-mek .sim08-callout-header{ color: #1e40af; }
.sim08-callout-apl{ background: #dcfce7; border-left: 4px solid #10b981; }
.sim08-callout-apl .sim08-callout-header{ color: #047857; }
.sim08-callout-mis{ background: #fef3c7; border-left: 4px solid #f59e0b; }
.sim08-callout-mis .sim08-callout-header{ color: #b45309; }
.sim08-mis-item{ margin-bottom: 8px; }
.sim08-mis-item:last-child{ margin-bottom: 0; }
.sim08-x{ color: #dc2626; font-weight: 700; }

/* F4e · Panel Makro mode Didih (termometer amplified) */
.sim11-makro-mode[hidden]{ display: none; }
.sim11-makro-svg{ display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.sim11-mk-unit{ font-size: 11px; font-weight: 700; fill: #374151; }
.sim11-mk-tick line{ stroke: #9ca3af; stroke-width: 1; }
.sim11-mk-tick line.mj{ stroke: #374151; stroke-width: 1.6; }
.sim11-mk-tick text{ font-size: 10px; fill: #374151; font-variant-numeric: tabular-nums; }
.sim11-mk-tube{ fill: #fff; stroke: #374151; stroke-width: 1.5; }
.sim11-mk-mercury{ fill: #dc2626; transition: y .18s ease-out, height .18s ease-out; }
.sim11-mk-bulb{ fill: #dc2626; stroke: #b91c1c; stroke-width: 1; }
.sim11-mk-ref{ stroke: #c2410c; stroke-width: 2.5; }
.sim11-mk-ref-label{ font-size: 11px; font-weight: 700; fill: #c2410c; }
.sim11-mk-ref-sub{ font-size: 9.5px; fill: #c2410c; }
.sim11-mk-marker{ stroke: #c2410c; stroke-width: 1.4; stroke-dasharray: 4 3; transition: y1 .18s ease-out, y2 .18s ease-out; }
.sim11-mk-marker-dot{ fill: #c2410c; transition: cy .18s ease-out; }
.sim11-mk-liquid{ fill: #fef3c7; }
.sim11-mk-surface{ stroke: rgba(0,0,0,.16); stroke-width: 1; }
.sim11-mk-pot{ fill: none; stroke: #374151; stroke-width: 3; stroke-linejoin: round; }
.sim11-mk-handle{ stroke: #374151; stroke-width: 4; stroke-linecap: round; }
.sim11-mk-steam{ fill: none; stroke: #d1d5db; stroke-width: 2; stroke-linecap: round; }
.sim11-mk-flame path{ fill: #f97316; }
.sim11-mk-grill{ stroke: #374151; stroke-width: 3; stroke-linecap: round; }
.sim11-mk-stove{ fill: #4b5563; }
.sim11-makro-reading{ margin-top: 12px; text-align: center; color: #c2410c; }
.sim11-makro-reading-label{ font-size: 1rem; font-weight: 700; }
.sim11-makro-reading-label sub{ font-size: .7em; vertical-align: sub; line-height: 0; }
.sim11-makro-reading-value{ font-size: 1.85rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sim11-makro-disclaimer{ margin-top: 8px; font-size: 12px; font-style: italic; color: #6b7280; line-height: 1.5; }

/* F4f · Panel Makro mode Beku (es-air-garam + termometer amplified) */
.sim11-mkb-ref{ stroke: #1e40af; stroke-width: 2.5; }
.sim11-mkb-ref-label{ font-size: 11px; font-weight: 700; fill: #1e40af; }
.sim11-mkb-ref-sub{ font-size: 9.5px; fill: #1e40af; }
.sim11-mkb-marker{ stroke: #1e40af; stroke-width: 1.4; stroke-dasharray: 4 3; transition: y1 .18s ease-out, y2 .18s ease-out; }
.sim11-mkb-marker-dot{ fill: #1e40af; transition: cy .18s ease-out; }
.sim11-mkb-melt{ fill: #f0f9ff; }
.sim11-mkb-ice rect{ fill: #dbeafe; stroke: #93c5fd; stroke-width: 1.2; }
.sim11-mkb-salt circle{ fill: #e5e7eb; stroke: #d1d5db; stroke-width: .8; }
.sim11-mkb-glass{ fill: none; stroke: #374151; stroke-width: 3; stroke-linejoin: round; }
.sim11-mkb-table{ stroke: #9ca3af; stroke-width: 2; stroke-linecap: round; }
.sim11-makro-reading-beku{ color: #1e40af; }

/* F4g · Panel Sub-mikro cross-section unified */
.sim11-panel-header-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sim11-sm-badge{ font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 14px; letter-spacing: 0; text-transform: none; transition: background .18s, color .18s, border-color .18s; border: 1px solid transparent; }
.sim11-sm-badge.is-didih{ background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.sim11-sm-badge.is-beku{ background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.sim11-sm-svg{ display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.sim11-sm-svg .sm-vessel{ fill: none; stroke: #374151; stroke-width: 2; }
.sim11-sm-svg .sm-vessel-gas{ fill: #fff; }
.sim11-sm-svg .sm-vessel-liq{ fill: #fefce8; }
.sim11-sm-svg .sm-surface{ stroke: #6b7280; stroke-width: 2; }
.sim11-sm-svg .sm-zone{ font-size: 10px; fill: #9ca3af; }
.sim11-sm-svg .sm-h2o{ fill: #60a5fa; }
.sim11-sm-svg .sm-sukrosa{ fill: #facc15; stroke: #ca8a04; stroke-width: 1; }
.sim11-sm-svg .sm-na{ fill: #a855f7; }
.sim11-sm-svg .sm-cl{ fill: #22c55e; }
.sim11-sm-legend{ margin-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: #374151; font-variant-numeric: tabular-nums; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; }
.sim11-sm-legend-row{ display: flex; align-items: center; gap: 7px; }
.sim11-sm-legend-row b{ font-weight: 800; }
.sm-chip{ width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sm-chip-h2o{ background: #60a5fa; }
.sm-chip-sukrosa{ background: #facc15; }
.sm-chip-na{ background: #a855f7; }
.sm-chip-cl{ background: #22c55e; }
.sim11-sm-callout{ margin-top: 10px; padding: 13px 14px; border-radius: 8px; border: 1px solid transparent; font-size: 12.5px; line-height: 1.55; color: var(--ink); display: flex; flex-direction: column; gap: 8px; transition: background .18s, border-color .18s; }
.sim11-sm-callout.is-didih{ background: #fff7ed; border-color: #fed7aa; }
.sim11-sm-callout.is-beku{ background: #eff6ff; border-color: #bfdbfe; }
.sim11-sm-callout b{ font-weight: 800; }

/* F4h · Callout Mekanisme terpadu (static) */
.sim11-mekanisme{ margin: 28px 0 4px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #f9fafb; }
.sim11-mekanisme-title{ margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; color: #1f2937; }
.sim11-mekanisme-lead{ margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: #374151; text-wrap: pretty; }
.sim11-mekanisme-lead b{ font-weight: 800; }
.sim11-mekanisme-tablewrap{ border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.sim11-mekanisme-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sim11-mekanisme-table th, .sim11-mekanisme-table td{ padding: 11px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e7eb; line-height: 1.55; }
.sim11-mekanisme-table tbody tr:last-child th, .sim11-mekanisme-table tbody tr:last-child td{ border-bottom: none; }
.sim11-mekanisme-table thead th{ font-weight: 800; border-bottom: 2px solid #d1d5db; }
.sim11-mekanisme-table thead th:first-child{ background: #e5e7eb; color: #374151; }
.sim11-mekanisme-table .mk-didih-head{ background: #ffedd5; color: #c2410c; }
.sim11-mekanisme-table .mk-beku-head{ background: #dbeafe; color: #1e40af; }
.sim11-mekanisme-table tbody th{ width: 22%; background: #f9fafb; color: #374151; font-weight: 700; }
.sim11-mekanisme-table td{ width: 39%; }
.sim11-mekanisme-table .mk-didih{ background: #fff7ed; color: #c2410c; }
.sim11-mekanisme-table .mk-beku{ background: #eff6ff; color: #1e40af; }
.sim11-mekanisme-table em{ font-style: italic; }
.sim11-mekanisme-table sub{ font-size: .72em; vertical-align: sub; line-height: 0; }
.mk-rumus{ font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim11-mekanisme-insight{ display: flex; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1px solid #fde68a; border-radius: 8px; background: #fef3c7; font-size: 13.5px; line-height: 1.6; color: #78350f; text-wrap: pretty; }
.sim11-mekanisme-insight b{ font-weight: 800; }
.sim11-mekanisme-insight em{ font-style: italic; }
.mk-insight-icon{ flex: none; font-size: 15px; line-height: 1.4; }

/* ============================================================
   SIM-13 — Pergeseran Kesetimbangan Asam Lemah (skeleton F6a)
   ============================================================ */
:root{ --sim13-primary-dark:#0284c7; --sim13-primary-mid:#0ea5e9; --sim13-primary-light:#e0f2fe; --sim13-primary-pale:#f0f9ff; --sim13-border:#bae6fd; --sim13-text-dark:#0c4a6e; --sim13-debug-bg:#f8fafc; --sim13-debug-border:#cbd5e1; --sim13-placeholder-bg:#fefce8; --sim13-placeholder-border:#fbbf24; }
.sim13-dock{ position: fixed; inset: 0; width: 100%; background: var(--sim13-primary-pale); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim13-dock *, .sim13-dock *::before, .sim13-dock *::after{ box-sizing: border-box; }
body.sim13-open .sim13-dock{ transform: none; }
@media (max-width: 880px){ body.sim13-open{ overflow: hidden; } }
.sim13-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 2px solid var(--sim13-primary-mid); }
.sim13-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#0284c7,#06b6d4); }
.sim13-ic svg{ width: 20px; height: 20px; }
.sim13-ttl{ flex: 1; min-width: 0; }
.sim13-crumb{ font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.sim13-ttl h4{ margin: 0; font-size: 16px; font-weight: 800; color: var(--sim13-text-dark); line-height: 1.25; }
.sim13-subtitle{ margin: 3px 0 0; font-size: 12px; color: var(--sim13-primary-dark); line-height: 1.4; }
.sim13-back-btn{ flex: none; }
.sim13-back-btn svg{ width: 15px; height: 15px; }
.sim13-scroll{ flex: 1; overflow-y: auto; overflow-x: hidden; max-width: 100%; padding: 16px 20px; }
.sim13-trilevel-grid{ display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: auto auto; gap: 12px; align-items: start; margin-bottom: 16px; }
.sim13-trilevel-grid .sim13-panel-makro{ grid-column: 1; grid-row: 1; }
.sim13-trilevel-grid .sim13-panel-submikro{ grid-column: 1; grid-row: 2; }
.sim13-trilevel-grid .sim13-panel-simbolik{ grid-column: 2; grid-row: 1 / span 2; }
.sim13-panel{ background: #fff; border: 1px solid var(--sim13-border); border-radius: 8px; padding: 12px; min-height: 240px; min-width: 0; }
.sim13-panel-header{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sim13-primary-dark); padding-bottom: 6px; border-bottom: 1px solid var(--sim13-primary-light); margin-bottom: 10px; }
.sim13-placeholder{ padding: 8px; background: var(--sim13-placeholder-bg); border: 1px dashed var(--sim13-placeholder-border); border-radius: 4px; min-height: 180px; }
.sim13-placeholder-note{ font-size: 11px; color: #78350f; font-style: italic; margin: 0 0 10px 0; line-height: 1.5; }
.sim13-debug-box{ background: var(--sim13-debug-bg); border: 1px solid var(--sim13-debug-border); border-radius: 4px; padding: 8px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.sim13-debug-line{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px dotted #e2e8f0; }
.sim13-debug-line:last-child{ border-bottom: none; }
.sim13-debug-label{ color: #475569; font-size: 10px; }
.sim13-debug-value{ color: var(--sim13-text-dark); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.sim13-layer-4{ padding: 10px; border-radius: 4px; margin-bottom: 8px; background: var(--sim13-primary-pale); border: 1px solid var(--sim13-primary-light); }
.sim13-featured-ph{ padding: 10px 12px; border-radius: 6px; text-align: left; border: 1px solid transparent; font-size: 13px; color: var(--sim13-text-dark); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sim13-featured-ph-lead{ font-weight: 700; }
.sim13-featured-ph-value{ font-family: Cambria,'Times New Roman',serif; font-size: 15px; font-weight: 700; line-height: 1; }
.sim13-featured-ph-badge{ font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.sim13-featured-asam{ background: #fef2f2; border-color: #fca5a5; }
.sim13-featured-asam .sim13-featured-ph-value, .sim13-featured-asam .sim13-featured-ph-badge{ color: #b91c1c; }
.sim13-featured-netral{ background: #f0fdf4; border-color: #86efac; }
.sim13-featured-netral .sim13-featured-ph-value, .sim13-featured-netral .sim13-featured-ph-badge{ color: #15803d; }
.sim13-featured-basa{ background: #faf5ff; border-color: #d8b4fe; }
.sim13-featured-basa .sim13-featured-ph-value, .sim13-featured-basa .sim13-featured-ph-badge{ color: #7e22ce; }
.sim13-makro-phmeter{ padding: 12px; background: #1e293b; border: 2px solid #334155; border-radius: 6px; margin-bottom: 20px; text-align: center; }
.sim13-makro-phmeter-label{ font-size: 10px; font-weight: 600; color: #94a3b8; letter-spacing: 1.5px; margin-bottom: 8px; font-family: Consolas,'Courier New',monospace; }
.sim13-makro-phmeter-display{ background: #0f172a; padding: 16px 20px; border: 1px inset #475569; border-radius: 4px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.sim13-makro-phmeter-value{ font-family: Consolas,'Courier New',monospace; font-size: 36px; font-weight: 700; color: #4ade80; letter-spacing: 2px; text-shadow: 0 0 4px rgba(74,222,128,.4); }
.sim13-makro-strip-wrapper{ padding: 8px 4px 4px; }
.sim13-makro-strip-label{ font-size: 11px; font-weight: 600; color: var(--sim13-text-dark); margin-bottom: 40px; }
.sim13-makro-strip-container{ position: relative; width: 100%; height: 32px; margin-bottom: 6px; }
.sim13-makro-strip-gradient{ width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--sim13-border); background: linear-gradient(to right,#ef4444 0%,#f97316 20%,#facc15 35%,#22c55e 50%,#06b6d4 60%,#3b82f6 75%,#6366f1 90%,#8b5cf6 100%); }
.sim13-makro-strip-arrow{ position: absolute; top: -34px; transform: translateX(-50%); text-align: center; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.sim13-makro-strip-arrow-value{ font-size: 11px; font-weight: 700; color: var(--sim13-text-dark); background: #fff; border: 1.5px solid var(--sim13-primary-dark); border-radius: 3px; padding: 2px 6px; margin-bottom: 2px; white-space: nowrap; font-family: Consolas,'Courier New',monospace; min-width: 32px; }
.sim13-makro-strip-arrow-triangle{ font-size: 14px; color: var(--sim13-text-dark); line-height: 1; margin-top: -2px; }
.sim13-makro-strip-scale{ display: flex; justify-content: space-between; padding: 0 2px; font-family: Consolas,'Courier New',monospace; font-size: 10px; color: var(--sim13-text-dark); font-weight: 500; }
.sim13-makro-strip-categories{ display: flex; justify-content: space-between; padding: 4px 8px 0; font-size: 10px; font-style: italic; color: #64748b; }
.sim13-makro-cat-asam{ color: #dc2626; font-weight: 600; }
.sim13-makro-cat-netral{ color: #15803d; font-weight: 600; }
.sim13-makro-cat-basa{ color: #7e22ce; font-weight: 600; }
.sim13-submikro-container{ position: relative; width: 100%; height: 260px; background: rgba(125,211,252,.35); border: 2px solid var(--sim13-border); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.sim13-submikro-shift{ position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 4px 12px; background: #fff; border: 1.5px solid var(--sim13-primary-dark); border-radius: 4px; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(2,132,199,.15); }
.sim13-submikro-shift-arrow{ font-size: 24px; font-weight: bold; color: var(--sim13-primary-dark); line-height: 1; }
.sim13-submikro-particles{ position: absolute; inset: 0; z-index: 1; }
.sim13-particle{ position: absolute; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2); transform: translate(-50%,-50%); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sim13-particle-ha{ width: 22px; height: 22px; background: #1e3a8a; }
.sim13-particle-a{ width: 22px; height: 22px; background: #c026d3; }
.sim13-particle-h{ width: 13px; height: 13px; background: #dc2626; }
.sim13-particle-oh{ width: 15px; height: 15px; background: #22d3ee; }
.sim13-submikro-legend{ display: flex; justify-content: space-around; gap: 8px; padding: 8px 4px; background: #fff; border: 1px solid var(--sim13-border); border-radius: 4px; flex-wrap: wrap; }
.sim13-legend-item{ display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sim13-text-dark); font-family: Cambria,'Times New Roman',serif; }
.sim13-legend-item sub{ font-size: .75em; vertical-align: sub; }
.sim13-legend-item sup{ font-size: .75em; vertical-align: super; }
.sim13-legend-dot{ display: inline-block; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }
.sim13-legend-dot-ha{ width: 14px; height: 14px; background: #1e3a8a; }
.sim13-legend-dot-a{ width: 14px; height: 14px; background: #c026d3; }
.sim13-legend-dot-h{ width: 10px; height: 10px; background: #dc2626; }
.sim13-legend-dot-oh{ width: 11px; height: 11px; background: #22d3ee; }
.sim13-callout{ background: var(--sim13-primary-pale); border: 2px solid var(--sim13-primary-light); border-radius: 6px; padding: 16px 18px; margin-bottom: 16px; }
.sim13-callout-header{ font-size: 13px; font-weight: 700; color: var(--sim13-primary-dark); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; border-bottom: 2px solid var(--sim13-primary-mid); margin-bottom: 14px; }
.sim13-callout-narasi{ font-size: 13px; line-height: 1.65; color: var(--sim13-text-dark); margin-bottom: 16px; text-align: justify; text-wrap: pretty; }
.sim13-callout-narasi p{ margin: 0 0 8px; }
.sim13-callout-narasi p:last-child{ margin-bottom: 0; }
.sim13-callout-narasi strong{ color: var(--sim13-primary-dark); font-weight: 700; }
.sim13-callout-narasi em{ font-style: italic; color: var(--sim13-primary-dark); font-weight: 500; }
.sim13-callout-mekanisme-wrapper{ margin-bottom: 16px; }
.sim13-callout-mekanisme-title, .sim13-callout-referensi-title{ font-size: 11px; font-weight: 700; color: var(--sim13-primary-dark); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.sim13-callout-mekanisme-table{ width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.sim13-callout-mekanisme-table th{ background: var(--sim13-primary-light); color: var(--sim13-text-dark); padding: 8px 10px; text-align: left; border: 1px solid var(--sim13-border); font-weight: 600; font-size: 11px; }
.sim13-callout-mekanisme-table td{ padding: 8px 10px; border: 1px solid var(--sim13-border); color: var(--sim13-text-dark); vertical-align: top; line-height: 1.5; }
.sim13-callout-insight{ background: #fff; border-left: 4px solid var(--sim13-primary-mid); border-radius: 3px; padding: 12px 16px; margin-bottom: 16px; }
.sim13-callout-insight blockquote{ margin: 0; font-size: 13px; font-style: italic; color: var(--sim13-text-dark); font-family: Cambria,'Times New Roman',serif; line-height: 1.5; }
.sim13-callout-referensi-table{ width: 100%; border-collapse: collapse; font-size: 11px; background: #fff; }
.sim13-callout-referensi-table th{ background: var(--sim13-primary-light); color: var(--sim13-text-dark); padding: 6px 8px; text-align: left; border: 1px solid var(--sim13-border); font-weight: 600; font-size: 11px; }
.sim13-callout-referensi-table td{ padding: 5px 8px; border: 1px solid var(--sim13-border); color: var(--sim13-text-dark); vertical-align: middle; }
.sim13-callout-referensi-table td:first-child{ font-weight: 500; }
.sim13-callout-referensi-table td:nth-child(2), .sim13-callout-referensi-table td:nth-child(3){ font-family: Cambria,'Times New Roman',serif; white-space: nowrap; }
.sim13-callout-referensi-table sub, .sim13-callout-referensi-table sup{ font-size: .75em; }
.sim13-layer{ padding: 10px; border-radius: 4px; margin-bottom: 8px; background: var(--sim13-primary-pale); border: 1px solid var(--sim13-primary-light); }
.sim13-layer-title{ font-size: 10px; font-weight: 700; color: var(--sim13-primary-dark); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--sim13-primary-light); }
.sim13-persamaan-container{ display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 4px; }
.sim13-persamaan-line{ font-size: 13px; color: var(--sim13-text-dark); text-align: center; font-family: Cambria,'Times New Roman',serif; padding: 8px 10px; background: #fff; border-radius: 4px; border: 1px solid var(--sim13-border); width: 100%; line-height: 1.6; overflow-wrap: anywhere; }
.sim13-persamaan-line sub{ font-size: .75em; vertical-align: sub; }
.sim13-persamaan-line sup{ font-size: .75em; vertical-align: super; }
.sim13-state{ color: #64748b; font-size: 10px; font-style: italic; margin: 0 1px; font-family: system-ui,-apple-system,sans-serif; }
.sim13-shift-indicator{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--sim13-primary-light); border: 1px solid var(--sim13-primary-mid); border-radius: 4px; width: 100%; justify-content: center; }
.sim13-shift-arrow{ font-size: 22px; color: var(--sim13-primary-dark); font-weight: bold; line-height: 1; }
.sim13-shift-label{ font-size: 11px; color: var(--sim13-text-dark); font-style: italic; font-weight: 500; }
.sim13-rumus-line{ font-size: 14px; color: var(--sim13-text-dark); text-align: center; font-family: Cambria,'Times New Roman',serif; padding: 10px 12px; background: #fff; border-radius: 4px; border: 1px solid var(--sim13-border); width: 100%; line-height: 1.6; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; flex-wrap: wrap; }
.sim13-rumus-line sub{ font-size: .75em; vertical-align: sub; }
.sim13-rumus-line sup{ font-size: .75em; vertical-align: super; }
.sim13-frac{ display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-family: Cambria,'Times New Roman',serif; margin: 0 4px; line-height: 1.3; }
.sim13-num{ border-bottom: 1.5px solid var(--sim13-text-dark); padding: 2px 8px; display: block; text-align: center; font-size: .95em; }
.sim13-denom{ padding: 2px 8px; display: block; text-align: center; font-size: .95em; }
.sim13-hh-container{ margin-top: 10px; padding: 8px; background: var(--sim13-primary-light); border: 1px dashed var(--sim13-primary-mid); border-radius: 4px; }
.sim13-hh-title{ font-size: 10px; font-weight: 600; color: var(--sim13-primary-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; text-align: center; }
.sim13-hh-formula{ font-size: 13px; color: var(--sim13-text-dark); text-align: center; font-family: Cambria,'Times New Roman',serif; padding: 8px 10px; background: #fff; border-radius: 4px; border: 1px solid var(--sim13-border); display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin-bottom: 6px; flex-wrap: wrap; }
.sim13-hh-formula:last-child{ margin-bottom: 0; }
.sim13-hh-formula sub{ font-size: .75em; vertical-align: sub; }
.sim13-hh-formula sup{ font-size: .75em; vertical-align: super; }
.sim13-hh-formula.sim13-hh-conversion{ font-weight: 500; }
.sim13-substitusi-container{ display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.sim13-substitusi-title{ font-size: 11px; font-weight: 600; color: var(--sim13-primary-dark); text-align: center; padding: 4px 8px; background: var(--sim13-primary-light); border-radius: 4px; font-family: Cambria,'Times New Roman',serif; margin-bottom: 4px; }
.sim13-substitusi-title sub, .sim13-substitusi-title sup{ font-size: .75em; }
.sim13-substitusi-step{ font-size: 12px; color: var(--sim13-text-dark); text-align: center; font-family: Cambria,'Times New Roman',serif; padding: 5px 10px; background: #fff; border-radius: 3px; border: 1px solid var(--sim13-border); line-height: 1.5; overflow-wrap: anywhere; }
.sim13-substitusi-step sub{ font-size: .75em; vertical-align: sub; }
.sim13-substitusi-step sup{ font-size: .75em; vertical-align: super; }
.sim13-substitusi-step.sim13-substitusi-result{ background: var(--sim13-primary-pale); border: 1.5px solid var(--sim13-primary-mid); font-size: 13px; font-weight: 500; margin-top: 4px; }
.sim13-substitusi-step.sim13-substitusi-result strong{ color: var(--sim13-primary-dark); font-weight: 700; font-size: 1.1em; }
.sim13-mrs-container{ margin-bottom: 12px; }
.sim13-mrs-block{ padding: 8px; background: #fff; border: 1px solid var(--sim13-border); border-radius: 4px; }
.sim13-mrs-title{ font-size: 11px; font-weight: 600; color: var(--sim13-primary-dark); text-align: center; padding: 5px 8px; background: var(--sim13-primary-light); border-radius: 3px; margin-bottom: 8px; font-family: Cambria,'Times New Roman',serif; }
.sim13-mrs-table{ width: 100%; border-collapse: collapse; font-family: Cambria,'Times New Roman',serif; font-size: 11px; margin-bottom: 6px; line-height: 1.4; table-layout: fixed; }
.sim13-mrs-table th, .sim13-mrs-table td{ padding: 5px 6px; text-align: center; border: 1px solid var(--sim13-border); vertical-align: middle; overflow-wrap: anywhere; }
.sim13-mrs-table thead th{ background: var(--sim13-primary-pale); color: var(--sim13-text-dark); font-weight: 600; font-size: 11px; }
.sim13-mrs-table tbody th{ background: var(--sim13-primary-pale); color: var(--sim13-text-dark); font-weight: 500; text-align: left; font-size: 10px; white-space: nowrap; padding-left: 8px; }
.sim13-mrs-table tbody td{ color: var(--sim13-text-dark); background: #fff; font-size: 11px; }
.sim13-mrs-table sub{ font-size: .75em; vertical-align: sub; }
.sim13-mrs-table sup{ font-size: .75em; vertical-align: super; }
.sim13-mrs-note{ font-size: 10px; color: #64748b; font-style: italic; padding: 5px 8px; background: var(--sim13-primary-pale); border-radius: 3px; text-align: left; line-height: 1.5; margin-top: 6px; }
.sim13-mrs-note sub, .sim13-mrs-note sup{ font-size: .85em; }
.sim13-footer-kontrol{ flex: none; display: flex; gap: 16px; align-items: flex-end; padding: 14px 22px; background: #fff; border-top: 1px solid var(--sim13-border); flex-wrap: wrap; }
.sim13-kontrol-item{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; max-width: 420px; }
.sim13-kontrol-label{ font-size: 13px; font-weight: 700; color: var(--sim13-text-dark); }
.sim13-dropdown{ padding: 8px 10px; border: 1px solid var(--sim13-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--sim13-text-dark); background: #fff; }
.sim13-slider-wrapper{ display: flex; align-items: center; gap: 10px; }
.sim13-slider{ flex: 1; accent-color: var(--sim13-primary-dark); }
.sim13-slider-value{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 14px; font-weight: 800; color: var(--sim13-primary-dark); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.sim13-btn-reset{ background: #fff; color: var(--sim13-primary-dark); border: 1px solid var(--sim13-primary-dark); padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.sim13-btn-reset:hover{ background: var(--sim13-primary-light); }
@media (max-width: 880px){ .sim13-trilevel-grid{ grid-template-columns: 1fr; grid-template-rows: none; } .sim13-trilevel-grid .sim13-panel-makro, .sim13-trilevel-grid .sim13-panel-submikro, .sim13-trilevel-grid .sim13-panel-simbolik{ grid-column: auto; grid-row: auto; } }

/* ============================================================
   SIM-14 — Kerja Larutan Penyangga (skeleton F7a)
   ============================================================ */
:root{ --sim14-primary-dark:#6d28d9; --sim14-primary-mid:#7c3aed; --sim14-primary-light:#ede9fe; --sim14-primary-pale:#f5f3ff; --sim14-border:#ddd6fe; --sim14-text-dark:#4c1d95; --sim14-debug-bg:#fef3c7; --sim14-debug-border:#f59e0b; --sim14-placeholder-bg:#f5f3ff; --sim14-placeholder-border:#ddd6fe; }
.sim14-dock{ position: fixed; inset: 0; width: 100%; background: var(--sim14-primary-pale); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim14-dock *, .sim14-dock *::before, .sim14-dock *::after{ box-sizing: border-box; }
body.sim14-open .sim14-dock{ transform: none; }
@media (max-width: 880px){ body.sim14-open{ overflow: hidden; } }
.sim14-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 2px solid var(--sim14-primary-mid); }
.sim14-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#6d28d9,#7c3aed); }
.sim14-ic svg{ width: 20px; height: 20px; }
.sim14-ttl{ flex: 1; min-width: 0; }
.sim14-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--sim14-primary-mid); text-transform: uppercase; }
.sim14-ttl h4{ margin: 2px 0 2px; font-size: 17px; font-weight: 800; color: var(--sim14-text-dark); }
.sim14-subtitle{ margin: 0; font-size: 12.5px; color: #5b21b6; max-width: 760px; }
.sim14-back-btn svg{ width: 15px; height: 15px; }
.sim14-scroll{ flex: 1; overflow-y: auto; padding: 18px 22px 22px; }
.sim14-trilevel-grid{ display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: auto auto; gap: 16px; margin-bottom: 18px; align-items: start; }
.sim14-trilevel-grid .sim14-panel-makro{ grid-column: 1; grid-row: 1; }
.sim14-trilevel-grid .sim14-panel-submikro{ grid-column: 1; grid-row: 2; }
.sim14-trilevel-grid .sim14-panel-simbolik{ grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 880px){ .sim14-trilevel-grid{ grid-template-columns: 1fr; grid-template-rows: none; } .sim14-trilevel-grid .sim14-panel-makro, .sim14-trilevel-grid .sim14-panel-submikro, .sim14-trilevel-grid .sim14-panel-simbolik{ grid-column: 1; grid-row: auto; } }
.sim14-panel{ background: #fff; border: 2px solid var(--sim14-border); border-radius: 12px; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; }
.sim14-panel-header{ background: var(--sim14-primary-dark); color: #fff; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.sim14-panel-label{ font-size: 10px; letter-spacing: .1em; font-weight: 800; opacity: .85; }
.sim14-panel-title{ font-size: 13px; font-weight: 700; }
.sim14-panel-body{ padding: 16px; flex: 1; display: flex; align-items: center; justify-content: center; }
.sim14-placeholder{ background: var(--sim14-placeholder-bg); border: 2px dashed var(--sim14-placeholder-border); border-radius: 8px; padding: 24px; text-align: center; color: var(--sim14-primary-dark); font-size: 12.5px; font-style: italic; width: 100%; }
.sim14-simbolik-body{ align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 12px; padding: 12px; }
.sim14-layer-label{ font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--sim14-primary-dark); margin-bottom: 6px; }
.sim14-simbolik-layer{ width: 100%; }
.sim14-layer1{ display: flex; flex-direction: column; gap: 8px; }
.sim14-eq-block{ background: #fff; border: 2px solid var(--sim14-border); border-radius: 8px; padding: 10px 12px; transition: none; }
.sim14-eq-title{ font-size: 11px; font-weight: 700; color: var(--sim14-primary-dark); margin-bottom: 4px; }
.sim14-eq-formula{ font-family: Georgia,'Times New Roman',serif; font-size: 15px; color: #1f2937; text-align: center; padding: 4px 0; }
.sim14-eq-sub{ font-size: 11px; vertical-align: sub; color: #6b7280; }
.sim14-eq-block.sim14-eq-active{ background: var(--sim14-primary-light); border-color: var(--sim14-primary-dark); box-shadow: 0 2px 8px rgba(109,40,217,.15); }
.sim14-eq-block.sim14-eq-active .sim14-eq-title{ color: var(--sim14-text-dark); font-weight: 800; }
.sim14-eq-block.sim14-eq-active .sim14-eq-formula{ color: var(--sim14-text-dark); font-weight: 700; }
.sim14-eq-block.sim14-eq-inactive{ background: #fafafa; border-color: #e5e7eb; opacity: .55; }
.sim14-eq-block.sim14-eq-inactive .sim14-eq-title{ color: #6b7280; }
.sim14-eq-block.sim14-eq-inactive .sim14-eq-formula{ color: #9ca3af; }
.sim14-layer2{ display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sim14-formula-block{ background: #fff; border: 2px solid var(--sim14-border); border-radius: 8px; padding: 10px 12px; }
.sim14-formula-hh{ background: var(--sim14-primary-pale); border-color: var(--sim14-primary-mid); }
.sim14-formula-title{ font-size: 11px; font-weight: 800; color: var(--sim14-primary-dark); letter-spacing: .02em; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--sim14-border); }
.sim14-formula-body{ display: flex; flex-direction: column; gap: 6px; align-items: center; }
.sim14-formula-line{ font-family: Georgia,'Times New Roman',serif; font-size: 15px; color: #1f2937; display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.sim14-formula-value{ font-size: 13px; color: #374151; }
.sim14-formula-main{ font-size: 16px; color: var(--sim14-text-dark); }
.sim14-formula-highlight{ color: var(--sim14-primary-dark); font-weight: 800; padding: 0 2px; }
.sim14-fraction{ display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; padding: 0 4px; margin: 0 2px; }
.sim14-numer{ padding: 2px 6px 3px; border-bottom: 1.5px solid #1f2937; font-size: .92em; white-space: nowrap; }
.sim14-denom{ padding: 3px 6px 2px; font-size: .92em; white-space: nowrap; }
.sim14-layer3{ display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sim14-sublayer{ background: #fff; border: 2px solid var(--sim14-border); border-radius: 8px; padding: 10px 12px; }
.sim14-sublayer-3b{ background: var(--sim14-primary-pale); border-color: var(--sim14-primary-mid); }
.sim14-sublayer-title{ font-size: 11px; font-weight: 800; color: var(--sim14-primary-dark); letter-spacing: .02em; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--sim14-border); }
.sim14-mol-table{ width: 100%; border-collapse: collapse; table-layout: fixed; font-family: Georgia,'Times New Roman',serif; font-size: 13px; }
.sim14-mol-header-row{ background: transparent; border: none; }
.sim14-mol-header-col{ background: var(--sim14-primary-light); color: var(--sim14-text-dark); font-weight: 800; padding: 6px 8px; border: 1px solid var(--sim14-border); text-align: center; font-size: 12px; }
.sim14-mol-row-label{ background: var(--sim14-primary-pale); color: var(--sim14-text-dark); font-weight: 700; padding: 6px 8px; border: 1px solid var(--sim14-border); font-size: 11.5px; }
.sim14-mol-cell{ padding: 6px 8px; border: 1px solid var(--sim14-border); text-align: center; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-variant-numeric: tabular-nums; color: #1f2937; }
.sim14-mol-perubahan{ font-weight: 700; }
.sim14-mol-perubahan-positive{ color: #059669; }
.sim14-mol-perubahan-negative{ color: #dc2626; }
.sim14-mol-perubahan-neutral{ color: #6b7280; }
.sim14-mol-akhir-label{ background: var(--sim14-primary-mid); color: #fff; }
.sim14-mol-akhir{ background: var(--sim14-primary-light); color: var(--sim14-text-dark); font-weight: 800; font-size: 14px; }
.sim14-calc-body{ display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 4px 0; }
.sim14-calc-line{ font-family: Georgia,'Times New Roman',serif; font-size: 14px; color: #1f2937; padding: 2px 0; line-height: 1.5; text-align: center; }
.sim14-calc-line-generic{ font-size: 13px; color: #4b5563; font-style: italic; }
.sim14-calc-line-result{ font-size: 15px; font-weight: 800; color: var(--sim14-primary-dark); padding-top: 4px; }
.sim14-calc-warning{ background: #fef2f2; border: 1.5px solid #dc2626; color: #b91c1c; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; letter-spacing: .02em; width: 100%; }
.sim14-layer4{ display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sim14-layer4-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; align-items: stretch; }
.sim14-featured{ border-radius: 10px; padding: 9px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 72px; text-align: center; }
.sim14-featured-label{ font-size: 8px; font-weight: 800; letter-spacing: .1em; opacity: .75; }
.sim14-featured-value{ font-family: Georgia,'Times New Roman',serif; font-size: 26px; font-weight: 700; line-height: 1; padding: 1px 0; font-variant-numeric: tabular-nums; }
.sim14-featured-badge{ font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 10px; border-radius: 12px; border: 1.5px solid currentColor; background: rgba(255,255,255,.5); }
.sim14-featured-asam{ background: #fef2f2; border: 2px solid #fca5a5; }
.sim14-featured-asam .sim14-featured-label, .sim14-featured-asam .sim14-featured-value, .sim14-featured-asam .sim14-featured-badge{ color: #b91c1c; }
.sim14-featured-netral{ background: #f0fdf4; border: 2px solid #86efac; }
.sim14-featured-netral .sim14-featured-label, .sim14-featured-netral .sim14-featured-value, .sim14-featured-netral .sim14-featured-badge{ color: #15803d; }
.sim14-featured-basa{ background: #faf5ff; border: 2px solid #d8b4fe; }
.sim14-featured-basa .sim14-featured-label, .sim14-featured-basa .sim14-featured-value, .sim14-featured-basa .sim14-featured-badge{ color: #7e22ce; }
.sim14-featured-placeholder{ min-height: 72px; display: flex; align-items: center; justify-content: center; }
.sim14-makro-body{ display: flex; flex-direction: column; gap: 16px; padding: 12px; align-items: stretch; justify-content: flex-start; }
.sim14-ph-meters-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; align-items: stretch; }
.sim14-ph-meter{ background: #1e293b; border: 2px solid #334155; border-radius: 10px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 100px; text-align: center; }
.sim14-ph-meter-label{ font-size: 9px; font-weight: 800; letter-spacing: .12em; color: #94a3b8; font-family: ui-monospace,'SF Mono',Menlo,monospace; }
.sim14-ph-meter-lcd{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 34px; font-weight: 700; color: #10b981; letter-spacing: .04em; line-height: 1; text-shadow: 0 0 8px rgba(16,185,129,.4); font-variant-numeric: tabular-nums; }
.sim14-ph-meter-placeholder{ min-height: 100px; display: flex; align-items: center; justify-content: center; }
.sim14-strip-container{ display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.sim14-strip-label{ font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--sim14-primary-dark); text-align: center; margin-bottom: 2px; }
.sim14-strip-wrapper{ position: relative; height: 72px; padding-top: 26px; padding-bottom: 26px; }
.sim14-strip-bar{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 20px; border-radius: 4px; border: 1px solid #d1d5db; background: linear-gradient(to right,#ef4444 0%,#f97316 14%,#facc15 28%,#a3e635 42%,#10b981 50%,#06b6d4 58%,#3b82f6 72%,#8b5cf6 86%,#6b21a8 100%); }
.sim14-strip-arrow{ position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.sim14-arrow-atas{ top: 0; bottom: auto; }
.sim14-arrow-bawah{ top: auto; bottom: 0; }
.sim14-arrow-triangle-down{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; margin-top: 3px; }
.sim14-arrow-triangle-up{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid currentColor; margin-bottom: 3px; }
.sim14-arrow-label{ font-size: 9px; font-weight: 800; color: currentColor; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.9); border: 1px solid currentColor; letter-spacing: .02em; white-space: nowrap; }
.sim14-arrow-buffer{ color: #1e3a8a; }
.sim14-arrow-air{ color: #c2410c; }
.sim14-strip-scale{ display: flex; justify-content: space-between; padding-top: 4px; font-size: 9px; color: #6b7280; font-family: ui-monospace,'SF Mono',Menlo,monospace; }
.sim14-strip-categories{ display: flex; justify-content: space-between; font-size: 9px; font-style: italic; color: #6b7280; }
.sim14-strip-cat-asam{ color: #b91c1c; padding-left: 4%; }
.sim14-strip-cat-netral{ color: #15803d; margin-left: -4%; }
.sim14-strip-cat-basa{ color: #7e22ce; padding-right: 4%; }
.sim14-submikro-body{ display: flex; flex-direction: column; gap: 8px; padding: 12px; align-items: stretch; justify-content: flex-start; }
.sim14-submikro-container{ background: #7dd3fc; border: 2px solid #38bdf8; border-radius: 10px; overflow: hidden; position: relative; height: 380px; min-height: 0; }
.sim14-submikro-svg{ width: 100%; height: 100%; display: block; }
.sim14-submikro-reaksi{ background: #fff; border: 1.5px solid var(--sim14-border); border-radius: 8px; padding: 8px 12px; min-height: 34px; display: flex; align-items: center; justify-content: center; font-family: Georgia,'Times New Roman',serif; font-size: 13px; color: var(--sim14-text-dark); text-align: center; }
.sim14-submikro-reaksi-initial{ font-style: italic; color: #6b7280; font-size: 12px; }
.sim14-submikro-reaksi-active{ font-weight: 700; color: var(--sim14-primary-dark); }
.sim14-submikro-reaksi-warning{ background: #fef2f2; border-color: #dc2626; color: #b91c1c; font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.sim14-submikro-legend{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 4px 8px; background: var(--sim14-primary-pale); border-radius: 6px; font-size: 11px; }
.sim14-legend-item{ display: flex; align-items: center; gap: 4px; color: var(--sim14-text-dark); }
.sim14-legend-swatch{ width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.sim14-callout-content{ display: flex; flex-direction: column; gap: 20px; padding: 20px 24px; }
.sim14-callout-block{ display: flex; flex-direction: column; gap: 8px; }
.sim14-callout-title{ font-size: 16px; font-weight: 800; color: var(--sim14-primary-dark); margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--sim14-border); }
.sim14-callout-subtitle{ font-size: 13px; font-weight: 800; color: var(--sim14-text-dark); letter-spacing: .02em; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--sim14-border); }
.sim14-callout-paragraph{ font-size: 13px; color: #1f2937; line-height: 1.6; margin: 0; text-align: justify; text-wrap: pretty; }
.sim14-callout-paragraph strong{ color: var(--sim14-text-dark); font-weight: 700; }
.sim14-callout-mekanisme-table, .sim14-callout-referensi-table{ width: 100%; border-collapse: collapse; font-size: 12px; }
.sim14-callout-mekanisme-table th, .sim14-callout-referensi-table th{ background: var(--sim14-primary-dark); color: #fff; padding: 8px 10px; text-align: left; font-weight: 800; border: 1px solid var(--sim14-primary-dark); font-size: 11px; letter-spacing: .02em; }
.sim14-callout-mekanisme-table td{ padding: 8px 10px; border: 1px solid var(--sim14-border); color: #1f2937; vertical-align: middle; }
.sim14-callout-referensi-table td{ padding: 7px 10px; border: 1px solid var(--sim14-border); color: #1f2937; }
.sim14-mek-gangguan-asam{ background: #fef2f2; color: #b91c1c; font-weight: 700; }
.sim14-mek-gangguan-basa{ background: #faf5ff; color: #7e22ce; font-weight: 700; }
.sim14-mek-persamaan{ font-family: Georgia,'Times New Roman',serif; background: var(--sim14-primary-pale); color: var(--sim14-text-dark); font-size: 13px; text-align: center; }
.sim14-callout-insight{ margin: 0; padding: 14px 18px; background: var(--sim14-primary-pale); border-left: 4px solid var(--sim14-primary-mid); border-radius: 6px; }
.sim14-callout-insight-label{ font-size: 10px; font-weight: 800; color: var(--sim14-primary-dark); letter-spacing: .12em; margin-bottom: 6px; }
.sim14-callout-insight p{ font-size: 13px; color: #1f2937; line-height: 1.6; margin: 0; text-align: justify; text-wrap: pretty; }
.sim14-callout-insight strong{ color: var(--sim14-text-dark); font-weight: 700; }
.sim14-callout-referensi-table tbody tr:nth-child(odd){ background: #fafafa; }
.sim14-referensi-utama{ background: var(--sim14-primary-light) !important; }
.sim14-referensi-utama td{ color: var(--sim14-text-dark); }
.sim14-placeholder-sublayer{ width: 100%; min-height: 240px; margin-top: 8px; }
.sim14-callout{ background: #fff; border: 2px solid var(--sim14-border); border-radius: 12px; padding: 18px; min-height: 110px; }
.sim14-footer-kontrol{ flex: none; display: flex; gap: 24px; justify-content: center; align-items: center; padding: 14px 22px; background: #fff; border-top: 1px solid var(--sim14-border); flex-wrap: wrap; }
.sim14-control-group{ display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sim14-btn-add{ padding: 11px 20px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13.5px; color: #fff; min-width: 190px; }
.sim14-btn-hcl{ background: #dc2626; }
.sim14-btn-hcl:hover{ background: #b91c1c; }
.sim14-btn-naoh{ background: #0891b2; }
.sim14-btn-naoh:hover{ background: #0e7490; }
.sim14-btn-add:disabled{ background: #9ca3af; cursor: not-allowed; opacity: .6; }
.sim14-counter{ font-size: 12px; color: var(--sim14-text-dark); font-family: ui-monospace,'SF Mono',Menlo,monospace; font-variant-numeric: tabular-nums; }
.sim14-btn-reset{ background: #fff; color: var(--sim14-primary-dark); border: 1px solid var(--sim14-primary-dark); padding: 11px 22px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.sim14-btn-reset:hover{ background: var(--sim14-primary-light); }
@media (max-width: 880px){ .sim14-trilevel-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   SIM-12 — Osmosis Membran Semipermeabel (skeleton F5a)
   ============================================================ */
:root{ --sim12-green-dark:#059669; --sim12-green-mid:#10b981; --sim12-green-light:#d1fae5; --sim12-green-pale:#ecfdf5; --sim12-purple-hipertonik-dark:#7c3aed; --sim12-purple-hipertonik-light:#ede9fe; --sim12-teal-hipotonik-dark:#0d9488; --sim12-teal-hipotonik-light:#ccfbf1; --sim12-gray-isotonik-dark:#64748b; --sim12-gray-isotonik-light:#f1f5f9; --sim12-pink-featured-bg:#fce7f3; --sim12-pink-featured-text:#be185d; --sim12-yellow-cairan:#fef3c7; }
.sim12-dock{ position: fixed; inset: 0; width: 100%; background: var(--bg-2); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim12-dock *, .sim12-dock *::before, .sim12-dock *::after{ box-sizing: border-box; }
body.sim12-open .sim12-dock{ transform: none; }
@media (max-width: 880px){ body.sim12-open{ overflow: hidden; } }
.sim12-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.sim12-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#059669,#10b981); }
.sim12-ic svg{ width: 20px; height: 20px; }
.sim12-ttl{ flex: 1; min-width: 0; }
.sim12-crumb{ font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.sim12-ttl h4{ margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.sim12-subtitle{ margin: 3px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.sim12-back-btn{ flex: none; }
.sim12-back-btn svg{ width: 15px; height: 15px; }
.sim12-scroll{ flex: 1; overflow-y: auto; max-width: 100%; overflow-x: hidden; }
/* D-SIM12 · 2-col asimetris 40:60 — kiri: Makro (atas) + Sub-mikro (bawah) stacked; kanan: Simbolik full-height */
.sim12-grid{ display: grid; grid-template-columns: 40% 60%; gap: 12px 16px; align-items: start; padding: 16px 20px; max-width: 100%; overflow-x: hidden; }
.sim12-panel-makro{ grid-column: 1; grid-row: 1; }
.sim12-panel-submikro{ grid-column: 1; grid-row: 2; }
.sim12-panel-simbolik{ grid-column: 2; grid-row: 1 / span 2; }
.sim12-panel{ background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 12px; padding: 14px; min-height: 320px; display: flex; flex-direction: column; min-width: 0; }
.sim12-panel-header{ font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.sim12-panel-makro{ border-top-color: #16a34a; }
.sim12-panel-submikro{ border-top-color: #2563eb; }
.sim12-panel-simbolik{ border-top-color: #7c3aed; }
.sim12-panel-makro .sim12-panel-header{ color: #16a34a; }
.sim12-panel-submikro .sim12-panel-header{ color: #2563eb; }
.sim12-panel-simbolik .sim12-panel-header{ color: #7c3aed; }
.sim12-panel-body{ flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sim12-panel-placeholder{ font-size: 12px; color: var(--sim12-green-dark); font-style: italic; padding: 12px; background: var(--sim12-green-pale); border: 1px dashed var(--sim12-green-mid); border-radius: 8px; line-height: 1.6; text-align: center; overflow-wrap: break-word; }
.sim12-debug{ background: rgba(0,0,0,.03); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.sim12-debug p{ margin: 3px 0; color: var(--ink); }
.sim12-footer{ flex: none; display: flex; padding: 16px 22px; border-top: 1px solid var(--line); gap: 20px; align-items: flex-end; background: #fff; max-width: 100%; flex-wrap: wrap; }
.sim12-control-group{ display: flex; flex-direction: column; gap: 6px; flex: none; }
.sim12-control-label{ font-weight: 700; font-size: 13px; color: var(--ink); }
.sim12-toggle{ display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.sim12-toggle-btn{ padding: 8px 16px; border: none; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.sim12-toggle-btn.is-active{ background: var(--sim12-green-mid); color: #fff; }
.sim12-control-slider{ flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 200px; max-width: 340px; }
.sim12-slider-label-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sim12-slider-value{ font-weight: 800; font-size: 14px; color: var(--sim12-green-dark); font-variant-numeric: tabular-nums; }
.sim12-control-slider input[type=range]{ width: 100%; accent-color: var(--sim12-green-mid); }
.sim12-slider-range{ display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.sim12-btn-reset{ padding: 9px 18px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; flex: none; }
.sim12-btn-reset:hover{ background: var(--line); }
@media (max-width: 1023px){ .sim12-grid{ grid-template-columns: 1fr; } .sim12-panel-makro, .sim12-panel-submikro, .sim12-panel-simbolik{ grid-column: 1; grid-row: auto; } }

/* F5b · Panel Simbolik Layer 1 (rumus statik) */
.sim12-simbolik-layer{ padding: 10px 12px; background: #fff; border: 1px solid var(--sim12-green-light); border-radius: 8px; }
.sim12-layer-label{ font-size: 11px; font-weight: 800; color: var(--sim12-green-dark); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--sim12-green-light); }
.sim12-rumus-block{ padding: 2px 2px 4px; }
.sim12-rumus-caption{ font-size: 12px; color: var(--ink-2); margin: 8px 0 5px; font-style: italic; }
.sim12-rumus-formula{ text-align: center; padding: 10px 12px; border-radius: 6px; margin: 5px 0; font-size: 17px; font-family: Cambria, Georgia, 'Times New Roman', serif; position: relative; }
.sim12-rumus-induk{ background: var(--sim12-green-pale); color: var(--ink); }
.sim12-rumus-turunan{ background: var(--sim12-pink-featured-bg); color: var(--sim12-pink-featured-text); font-weight: 700; }
.sim12-formula-body{ display: inline-block; }
.sim12-formula-number{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--sim12-pink-featured-text); font-style: normal; font-family: inherit; }
.sim12-var{ font-style: italic; font-weight: inherit; }
.sim12-rumus-legend{ margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--sim12-green-light); }
.sim12-legend-title{ font-size: 12px; font-weight: 700; color: var(--sim12-green-dark); margin: 0 0 5px; }
.sim12-legend-list{ margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); line-height: 1.55; }
.sim12-legend-list li{ margin: 2px 0; }

/* F5c · Panel Simbolik Layer 2 (substitusi dua kolom) */
.sim12-l2-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim12-l2-col{ background: var(--sim12-green-pale); border: 1px solid var(--sim12-green-light); border-radius: 6px; padding: 8px; min-width: 0; }
.sim12-l2-col-header{ display: flex; flex-direction: column; padding-bottom: 5px; margin-bottom: 7px; border-bottom: 1px dashed var(--sim12-green-mid); }
.sim12-l2-col-label{ font-size: 10px; color: var(--sim12-green-dark); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sim12-l2-zat-label{ font-size: 13px; color: var(--ink); font-weight: 700; margin-top: 2px; }
.sim12-l2-substitusi{ font-family: ui-monospace,'SF Mono',Consolas,'Courier New',monospace; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim12-l2-step{ padding: 4px 3px; margin: 2px 0; line-height: 1.5; overflow-wrap: anywhere; }
.sim12-l2-step-rumus{ color: var(--ink-3); border-bottom: 1px dotted var(--line); padding-bottom: 5px; }
.sim12-l2-step-substitusi{ color: var(--ink); }
.sim12-l2-step-hasil{ background: #fff; border-left: 3px solid var(--sim12-green-mid); border-radius: 3px; font-weight: 700; color: var(--sim12-green-dark); padding: 6px 7px; margin-top: 5px; }
.sim12-l2-substitusi .sim12-var{ font-family: inherit; font-style: italic; }
@media (max-width: 1023px){ .sim12-l2-grid{ grid-template-columns: 1fr; } }

/* F5d · Panel Simbolik Layer 3 (featured tiga angka) */
.sim12-l3-container{ display: flex; flex-direction: column; gap: 8px; }
.sim12-l3-context-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim12-l3-context-box{ background: var(--sim12-green-pale); border: 1px solid var(--sim12-green-light); border-radius: 6px; padding: 7px 8px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; min-height: 90px; min-width: 0; }
.sim12-l3-context-label{ font-size: 11.5px; font-weight: 800; color: var(--sim12-green-dark); text-transform: uppercase; letter-spacing: .04em; }
.sim12-l3-context-zat{ font-size: 12px; color: var(--ink-3); font-weight: 600; margin: 2px 0 6px; }
.sim12-l3-context-numeric{ margin-top: auto; white-space: nowrap; }
.sim12-l3-context-value{ font-size: 18px; font-weight: 700; color: var(--sim12-green-dark); font-family: Cambria, Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; }
.sim12-l3-context-unit{ font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 4px; font-family: Cambria, Georgia, 'Times New Roman', serif; }
/* D-SIM12 · Layer 3 featured Δπ dikecilkan (~80-100px, tetap prominent merah) */
.sim12-l3-featured{ background: var(--sim12-pink-featured-bg); border: 2px solid var(--sim12-pink-featured-text); border-radius: 10px; padding: 9px 12px; text-align: center; }
.sim12-l3-featured-formula{ font-size: 12.5px; color: var(--sim12-pink-featured-text); font-family: Cambria, Georgia, 'Times New Roman', serif; margin-bottom: 4px; opacity: .85; }
.sim12-l3-featured-formula sub{ font-size: .7em; font-style: normal; }
.sim12-l3-featured-value{ font-family: Cambria, Georgia, 'Times New Roman', serif; line-height: 1.1; color: var(--sim12-pink-featured-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim12-l3-featured-sign{ display: inline-block; font-size: 22px; font-weight: 700; margin-right: 5px; vertical-align: middle; }
#sim12-l3-dpi{ font-size: 28px; font-weight: 800; vertical-align: middle; }
.sim12-l3-featured-unit{ font-size: 14px; font-weight: 500; margin-left: 6px; vertical-align: middle; }

/* F5e · Panel Makro (tabung U + badge status + label Δh) */
.sim12-makro-container{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.sim12-badge-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
.sim12-badge{ text-align: center; padding: 6px 6px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .01em; border: 1.5px solid; transition: background .18s, color .18s, border-color .18s; }
.sim12-badge[data-status="hipertonik"]{ background: var(--sim12-purple-hipertonik-light); color: var(--sim12-purple-hipertonik-dark); border-color: var(--sim12-purple-hipertonik-dark); }
.sim12-badge[data-status="hipotonik"]{ background: var(--sim12-teal-hipotonik-light); color: var(--sim12-teal-hipotonik-dark); border-color: var(--sim12-teal-hipotonik-dark); }
.sim12-badge[data-status="isotonik"]{ background: var(--sim12-gray-isotonik-light); color: var(--sim12-gray-isotonik-dark); border-color: var(--sim12-gray-isotonik-dark); }
.sim12-dh-label{ font-size: 13px; color: var(--ink); font-weight: 500; font-family: Cambria, Georgia, 'Times New Roman', serif; padding: 3px 10px; background: var(--sim12-green-pale); border: 1px solid var(--sim12-green-light); border-radius: 5px; font-variant-numeric: tabular-nums; }
.sim12-dh-label span{ font-weight: 700; color: var(--sim12-green-dark); }
.sim12-makro-svg{ width: 100%; max-width: 260px; height: auto; display: block; }
.sim12-makro-svg rect, .sim12-makro-svg line{ transition: y .28s ease, height .28s ease, y1 .28s ease, y2 .28s ease; }

/* F5f · Panel Sub-mikro (cross-section membran + partikel + net flow) */
.sim12-submikro-container{ display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.sim12-submikro-svg{ width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.sim12-submikro-legend{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; background: rgba(0,0,0,.02); border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px; }
.sim12-legend-item{ display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.sim12-legend-dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sim12-submikro-counter{ padding: 7px 9px; background: var(--sim12-green-pale); border: 1px solid var(--sim12-green-light); border-radius: 6px; font-size: 12px; }
.sim12-counter-row{ display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; margin: 2px 0; }
.sim12-counter-label{ color: var(--ink-2); font-weight: 700; }
.sim12-counter-value{ color: var(--sim12-green-dark); font-weight: 600; }
.sim12-counter-tertahan{ color: var(--sim12-purple-hipertonik-dark); font-weight: 700; }

/* F5g · Callout Mekanisme (sintesis 4 sifat koligatif, statik) */
.sim12-callout{ background: #fff; border: 1.5px solid var(--sim12-green-mid); border-radius: 12px; padding: 16px 20px; margin: 0 20px 16px; }
.sim12-callout-header{ border-bottom: 2px solid var(--sim12-green-light); padding-bottom: 10px; margin-bottom: 12px; }
.sim12-callout-title{ color: var(--sim12-green-dark); margin: 0; font-size: 17px; font-weight: 800; }
.sim12-callout-subtitle{ color: var(--ink-2); font-size: 13px; margin: 6px 0 0; line-height: 1.55; }
.sim12-callout-narrative{ color: var(--ink); font-size: 13px; line-height: 1.6; margin: 8px 0 14px; text-wrap: pretty; }
.sim12-callout-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; }
.sim12-callout-table thead th{ background: var(--sim12-green-mid); color: #fff; padding: 9px 10px; text-align: left; font-weight: 700; border: 1px solid var(--sim12-green-dark); vertical-align: middle; }
.sim12-callout-table tbody td{ padding: 10px; border: 1px solid var(--line); vertical-align: top; color: var(--ink); line-height: 1.45; }
.sim12-callout-table tbody tr:nth-child(even) td{ background: rgba(0,0,0,.02); }
.sim12-cell-sifat{ font-weight: 700; color: var(--sim12-green-dark); min-width: 130px; }
.sim12-cell-subtitle{ display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.sim12-cell-rumus{ font-family: Cambria, Georgia, 'Times New Roman', serif; font-size: 15px; color: var(--ink); white-space: nowrap; min-width: 140px; }
.sim12-callout-row-active td{ background: var(--sim12-green-pale) !important; border-color: var(--sim12-green-mid) !important; }
.sim12-callout-row-active .sim12-cell-sifat{ color: var(--sim12-green-dark); font-weight: 800; }
.sim12-callout-row-active .sim12-cell-rumus{ color: var(--sim12-pink-featured-text); font-weight: 700; }
.sim12-callout-insight{ display: flex; gap: 12px; align-items: flex-start; background: var(--sim12-green-pale); border-left: 4px solid var(--sim12-green-mid); padding: 12px 16px; border-radius: 6px; margin-top: 14px; }
.sim12-callout-insight-icon{ font-size: 24px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.sim12-callout-insight p{ color: var(--ink); font-size: 13px; line-height: 1.6; margin: 0; text-wrap: pretty; }
.sim12-callout .sim12-var{ font-style: italic; font-weight: inherit; font-family: Cambria, Georgia, 'Times New Roman', serif; }
.sim12-callout .sim12-minus{ font-style: normal; display: inline-block; margin-right: .1em; }
.sim12-callout strong{ color: var(--sim12-green-dark); font-weight: 700; }
.sim12-callout-insight strong{ color: var(--sim12-pink-featured-text); }
@media (max-width: 720px){ .sim12-callout-table{ display: block; overflow-x: auto; } }


/* ============================================================
   SIM-15 — Kurva Titrasi (3 Jenis) (skeleton F8a)
   ============================================================ */
:root{ --sim15-primary-dark:#9f1239; --sim15-primary-mid:#be123c; --sim15-primary-light:#ffe4e6; --sim15-primary-pale:#fff1f2; --sim15-border:#fecdd3; --sim15-text-dark:#7f1d1d; --sim15-debug-bg:#fff1f2; --sim15-debug-border:#be123c; --sim15-debug-text:#7f1d1d; --sim15-placeholder-bg:#fff1f2; --sim15-placeholder-border:#fecdd3; }
.sim15-dock{ position: fixed; inset: 0; width: 100%; background: var(--sim15-primary-pale); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim15-dock *, .sim15-dock *::before, .sim15-dock *::after{ box-sizing: border-box; }
body.sim15-open .sim15-dock{ transform: none; }
@media (max-width: 880px){ body.sim15-open{ overflow: hidden; } }
.sim15-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim15-primary-dark); }
.sim15-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#9f1239,#be123c); }
.sim15-ic svg{ width: 20px; height: 20px; }
.sim15-ttl{ flex: 1; min-width: 0; }
.sim15-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--sim15-primary-mid); text-transform: uppercase; }
.sim15-ttl h4{ margin: 2px 0 2px; font-size: 17px; font-weight: 800; color: var(--sim15-primary-dark); }
.sim15-subtitle{ margin: 0; font-size: 12.5px; color: var(--sim15-text-dark); opacity: .8; max-width: 760px; }
.sim15-back-btn svg{ width: 15px; height: 15px; }
.sim15-scroll{ flex: 1; overflow-y: auto; padding: 18px 22px 22px; }
.sim15-input-sementara{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 8px; padding: 16px; margin-bottom: 18px; }
.sim15-input-label{ font-size: 13px; color: var(--sim15-text-dark); margin: 0 0 12px; font-style: italic; }
.sim15-input-buttons{ display: flex; gap: 8px; flex-wrap: wrap; }
.sim15-btn-volume{ background: var(--sim15-primary-mid); color: #fff; border: 2px solid var(--sim15-primary-mid); padding: 10px 16px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s; }
.sim15-btn-volume:hover{ background: var(--sim15-primary-dark); border-color: var(--sim15-primary-dark); }
.sim15-btn-volume-active{ background: var(--sim15-primary-dark); border-color: #4c0519; box-shadow: 0 2px 8px rgba(159,18,57,.28); }
.sim15-jenis-sementara{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.sim15-jenis-buttons{ display: flex; gap: 8px; flex-wrap: wrap; }
.sim15-btn-jenis{ background: #fff; color: var(--sim15-text-dark); border: 2px solid var(--sim15-border); padding: 10px 18px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; flex: 1; min-width: 200px; text-align: left; }
.sim15-btn-jenis:hover{ border-color: var(--sim15-primary-mid); background: var(--sim15-primary-light); }
.sim15-btn-jenis-active{ background: var(--sim15-primary-dark); color: #fff; border-color: var(--sim15-primary-dark); }
.sim15-btn-jenis-active:hover{ background: var(--sim15-primary-dark); border-color: var(--sim15-primary-dark); color: #fff; }
:root{ --sim15-persamaan-bg:#fff; --sim15-persamaan-border:#fecdd3; --sim15-persamaan-active-bg:#ffe4e6; --sim15-persamaan-active-border:#9f1239; }
.sim15-panel-simbolik{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.sim15-panel-header{ border-bottom: 2px solid var(--sim15-primary-dark); padding-bottom: 12px; margin-bottom: 16px; }
.sim15-panel-label{ color: var(--sim15-primary-dark); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.sim15-panel-subtitle{ color: var(--sim15-text-dark); font-size: 14px; font-weight: 600; }
.sim15-simbolik-grid{ display: grid; grid-template-columns: 60% 40%; grid-template-rows: auto auto auto; gap: 12px; min-height: 480px; }
.sim15-simbolik-kurva-placeholder{ grid-row: 1 / span 3; background: var(--sim15-placeholder-bg); border: 2px dashed var(--sim15-placeholder-border); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.sim15-simbolik-placeholder-label{ color: var(--sim15-primary-dark); font-size: 14px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.sim15-simbolik-placeholder-note{ color: var(--sim15-text-dark); font-size: 11px; font-style: italic; opacity: .7; text-align: center; }
.sim15-layer-placeholder{ background: var(--sim15-placeholder-bg); border: 2px dashed var(--sim15-placeholder-border); border-radius: 8px; padding: 20px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100px; }
.sim15-layer1-container{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sim15-layer-header{ color: var(--sim15-primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.sim15-persamaan-box{ background: var(--sim15-persamaan-bg); border: 1px solid var(--sim15-persamaan-border); border-radius: 6px; padding: 10px 12px; opacity: .6; transition: background .2s, border-color .2s, opacity .2s, box-shadow .2s; }
.sim15-persamaan-mode-label{ color: var(--sim15-text-dark); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; opacity: .8; }
.sim15-persamaan-teks{ color: var(--sim15-text-dark); font-size: 13px; font-weight: 500; font-family: 'Times New Roman', serif; line-height: 1.5; }
.sim15-persamaan-active{ background: var(--sim15-persamaan-active-bg); border: 2px solid var(--sim15-persamaan-active-border); opacity: 1; box-shadow: 0 2px 8px rgba(159,18,57,.15); }
.sim15-persamaan-active .sim15-persamaan-mode-label{ color: var(--sim15-primary-dark); opacity: 1; font-weight: 800; }
.sim15-persamaan-active .sim15-persamaan-teks{ color: var(--sim15-primary-dark); font-weight: 700; }
.sim15-layer23-container{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sim15-layer2-block, .sim15-layer3-block{ display: flex; flex-direction: column; gap: 4px; }
.sim15-layer23-divider{ height: 1px; background: var(--sim15-border); margin: 4px 0; }
.sim15-region-badge{ background: var(--sim15-primary-dark); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .5px; text-transform: uppercase; margin-left: 8px; }
.sim15-layer2-content{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.sim15-layer2-baris{ color: var(--sim15-text-dark); font-size: 12px; font-family: 'Times New Roman', serif; line-height: 1.5; }
.sim15-layer2-baris-final{ font-weight: 700; color: var(--sim15-primary-dark); padding-top: 3px; margin-top: 2px; border-top: 1px dashed var(--sim15-border); }
.sim15-layer2-note, .sim15-layer3-note{ color: var(--sim15-text-dark); font-size: 11px; font-style: italic; opacity: .7; }
.sim15-layer3-content{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.sim15-layer3-baris{ color: var(--sim15-text-dark); font-size: 11px; font-family: 'Times New Roman', serif; line-height: 1.5; }
.sim15-layer3-baris-final{ font-weight: 700; color: var(--sim15-primary-dark); font-size: 13px; padding-top: 3px; margin-top: 2px; border-top: 1px dashed var(--sim15-border); }
:root{ --sim15-kurva-j1:#9f1239; --sim15-kurva-j2:#0d9488; --sim15-kurva-j3:#d97706; --sim15-ph-asam-bg:#fef2f2; --sim15-ph-asam-border:#fca5a5; --sim15-ph-asam-text:#b91c1c; --sim15-ph-netral-bg:#f0fdf4; --sim15-ph-netral-border:#86efac; --sim15-ph-netral-text:#15803d; --sim15-ph-basa-bg:#faf5ff; --sim15-ph-basa-border:#d8b4fe; --sim15-ph-basa-text:#7e22ce; }
.sim15-layer4-container{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sim15-layer4-featured{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px; border-radius: 8px; border: 1.5px solid var(--sim15-border); background: var(--sim15-primary-pale); padding: 10px 12px; transition: background .3s, border-color .3s; }
.sim15-layer4-kesimpulan-label{ font-size: 13px; font-weight: 700; color: var(--sim15-text-dark); }
.sim15-layer4-arrow{ font-size: 14px; font-weight: 700; color: var(--sim15-text-dark); opacity: .7; }
.sim15-layer4-verdict{ font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--sim15-primary-dark); }
.sim15-ph-asam .sim15-layer4-verdict{ color: var(--sim15-ph-asam-text); }
.sim15-ph-netral .sim15-layer4-verdict{ color: var(--sim15-ph-netral-text); }
.sim15-ph-basa .sim15-layer4-verdict{ color: var(--sim15-ph-basa-text); }
.sim15-layer4-ph-huge{ font-size: 15px; font-weight: 800; font-family: 'Times New Roman', serif; color: var(--sim15-primary-dark); letter-spacing: 0; line-height: 1.2; }
.sim15-ph-asam{ background: var(--sim15-ph-asam-bg) !important; border-color: var(--sim15-ph-asam-border) !important; }
.sim15-ph-asam .sim15-layer4-ph-huge{ color: var(--sim15-ph-asam-text); }
.sim15-ph-netral{ background: var(--sim15-ph-netral-bg) !important; border-color: var(--sim15-ph-netral-border) !important; }
.sim15-ph-netral .sim15-layer4-ph-huge{ color: var(--sim15-ph-netral-text); }
.sim15-ph-basa{ background: var(--sim15-ph-basa-bg) !important; border-color: var(--sim15-ph-basa-border) !important; }
.sim15-ph-basa .sim15-layer4-ph-huge{ color: var(--sim15-ph-basa-text); }
.sim15-kurva-container{ grid-row: 1 / span 3; background: #fff; border: 1px solid var(--sim15-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sim15-kurva-header{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sim15-border); }
.sim15-kurva-title{ color: var(--sim15-primary-dark); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.sim15-toggle-overlay{ background: #fff; color: var(--sim15-text-dark); border: 2px solid var(--sim15-border); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, color .15s; }
.sim15-toggle-overlay:hover{ border-color: var(--sim15-primary-mid); }
.sim15-toggle-active{ background: var(--sim15-primary-dark); color: #fff; border-color: var(--sim15-primary-dark); }
.sim15-toggle-state{ padding: 1px 6px; border-radius: 3px; background: rgba(0,0,0,.08); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.sim15-toggle-active .sim15-toggle-state{ background: rgba(255,255,255,.25); }
.sim15-kurva-svg-wrapper{ flex: 1; display: flex; justify-content: center; align-items: center; background: #fff; }
.sim15-kurva-svg{ width: 100%; height: auto; max-height: 520px; }
.sim15-kurva-legend{ display: none; flex-direction: row; justify-content: center; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px dashed var(--sim15-border); flex-wrap: wrap; }
.sim15-kurva-legend-on{ display: flex; }
.sim15-legend-item{ display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--sim15-text-dark); font-weight: 600; }
.sim15-legend-color{ display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
@media (max-width: 880px){ .sim15-simbolik-grid{ grid-template-columns: 1fr; min-height: 0; } .sim15-simbolik-kurva-placeholder, .sim15-kurva-container{ grid-row: auto; min-height: 220px; } }
:root{ --sim15-makro-lcd-bg:#1e293b; --sim15-makro-lcd-border:#334155; --sim15-makro-lcd-glow:#10b981; }
.sim15-panel-makro{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sim15-panel-makro .sim15-panel-header{ padding-bottom: 6px; margin-bottom: 3px; }
.sim15-makro-lcd-wrapper{ display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sim15-makro-lcd-header{ color: var(--sim15-primary-dark); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; background: var(--sim15-primary-pale); border-radius: 4px; }
.sim15-makro-lcd{ background: var(--sim15-makro-lcd-bg); border: 2px solid var(--sim15-makro-lcd-border); border-radius: 6px; padding: 12px 24px; min-width: 140px; text-align: center; color: var(--sim15-makro-lcd-glow); font-family: 'Courier New', Monaco, monospace; font-size: 34px; font-weight: 700; text-shadow: 0 0 8px var(--sim15-makro-lcd-glow); letter-spacing: 2px; }
.sim15-makro-svg-wrapper{ display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom,#f9fafb,#f3f4f6); border-radius: 8px; padding: 4px; }
.sim15-makro-svg{ width: 100%; height: auto; max-width: 190px; }
.sim15-makro-labels{ display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--sim15-border); }
.sim15-makro-label-item{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sim15-text-dark); }
.sim15-makro-label-swatch{ display: inline-block; width: 16px; height: 16px; border: 1px solid var(--sim15-border); border-radius: 3px; flex-shrink: 0; }
.sim15-makro-label-name{ font-weight: 600; }
.sim15-indikator-control{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sim15-indikator-toggle-label{ display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sim15-text-dark); }
.sim15-indikator-toggle-label input[type="checkbox"]{ width: 16px; height: 16px; cursor: pointer; accent-color: var(--sim15-primary-dark); }
.sim15-indikator-dropdown-wrapper{ display: none; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--sim15-border); }
.sim15-indikator-dropdown-on{ display: flex; }
.sim15-indikator-dropdown-label{ font-size: 11px; font-weight: 600; color: var(--sim15-text-dark); opacity: .8; }
.sim15-indikator-select{ padding: 6px 10px; border: 1px solid var(--sim15-border); border-radius: 4px; background: #fff; color: var(--sim15-text-dark); font-family: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s; }
.sim15-indikator-select:hover, .sim15-indikator-select:focus{ border-color: var(--sim15-primary-mid); outline: none; }
.sim15-panel-submikro{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sim15-panel-submikro .sim15-panel-header{ padding-bottom: 10px; margin-bottom: 6px; }
.sim15-submikro-info{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--sim15-text-dark); text-align: center; }
.sim15-submikro-svg-wrapper{ display: flex; justify-content: center; align-items: center; padding: 4px; }
.sim15-submikro-svg{ width: 100%; height: auto; max-width: 560px; }
.sim15-submikro-legend{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--sim15-border); }
.sim15-legend-item-submikro{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sim15-text-dark); font-weight: 600; }
.sim15-legend-h2o{ opacity: .75; }
.sim15-legend-h2o-swatch{ display: inline-block; width: 14px; height: 14px; background: #e0f2fe; border: 1px solid #7dd3fc; border-radius: 3px; }
.sim15-callout{ background: #fff; border: 1px solid var(--sim15-border); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.sim15-callout-header{ border-bottom: 2px solid var(--sim15-primary-dark); padding-bottom: 10px; }
.sim15-callout-label{ color: var(--sim15-primary-dark); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.sim15-callout-subtitle{ color: var(--sim15-text-dark); font-size: 14px; font-weight: 600; }
.sim15-callout-blok{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 8px; padding: 16px 20px; }
.sim15-callout-blok-header{ color: var(--sim15-primary-dark); font-size: 14px; font-weight: 700; letter-spacing: .5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sim15-border); }
.sim15-callout-narasi p{ color: var(--sim15-text-dark); font-size: 13px; line-height: 1.7; margin: 0 0 8px; text-align: justify; text-wrap: pretty; }
.sim15-callout-narasi p:last-child{ margin-bottom: 0; }
.sim15-callout-tabel-wrapper{ overflow-x: auto; }
.sim15-callout-tabel{ width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; font-size: 12px; }
.sim15-callout-tabel thead{ background: var(--sim15-primary-dark); color: #fff; }
.sim15-callout-tabel th{ padding: 10px 12px; text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .3px; border: 1px solid var(--sim15-primary-mid); }
.sim15-callout-tabel td{ padding: 10px 12px; color: var(--sim15-text-dark); border: 1px solid var(--sim15-border); line-height: 1.5; vertical-align: top; }
.sim15-callout-tabel-highlight{ font-weight: 700; color: var(--sim15-primary-dark); background: var(--sim15-primary-pale); }
.sim15-callout-tabel-reaksi{ font-family: 'Times New Roman', serif; font-weight: 600; font-size: 13px; background: #fafafa; }
.sim15-callout-insight{ margin: 0; padding: 12px 16px; background: #fff; border-left: 4px solid var(--sim15-primary-dark); border-radius: 0 6px 6px 0; }
.sim15-callout-insight p{ color: var(--sim15-text-dark); font-size: 13px; line-height: 1.7; margin: 0 0 8px; text-align: justify; text-wrap: pretty; }
.sim15-callout-insight p:last-child{ margin-bottom: 0; }
.sim15-callout-insight strong{ color: var(--sim15-primary-dark); font-weight: 700; }
.sim15-placeholder-grid{ display: grid; grid-template-columns: 40% 60%; gap: 16px; align-items: start; }
.sim15-placeholder{ background: var(--sim15-placeholder-bg); border: 2px dashed var(--sim15-placeholder-border); border-radius: 8px; padding: 32px 16px; text-align: center; min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.sim15-placeholder-full{ grid-column: 1 / -1; min-height: 120px; }
.sim15-placeholder-label{ color: var(--sim15-primary-dark); font-size: 16px; font-weight: 800; }
.sim15-placeholder-note{ color: var(--sim15-text-dark); font-size: 12px; font-style: italic; opacity: .72; }
@media (max-width: 880px){ .sim15-placeholder-grid{ grid-template-columns: 1fr; } .sim15-placeholder-full{ grid-column: auto; } }

/* F8l · SIM-15 kontrol final (dropdown jenis + slider volume) */
.sim15-kontrol-final{ background: var(--sim15-primary-pale); border: 1px solid var(--sim15-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 16px; }
.sim15-kontrol-block{ display: flex; flex-direction: column; gap: 8px; }
.sim15-kontrol-label{ color: var(--sim15-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sim15-jenis-select{ width: 100%; padding: 10px 14px; border: 2px solid var(--sim15-border); border-radius: 6px; background: #fff; color: var(--sim15-text-dark); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .15s; }
.sim15-jenis-select:hover, .sim15-jenis-select:focus{ border-color: var(--sim15-primary-dark); outline: none; }
.sim15-volume-label-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sim15-volume-current{ color: var(--sim15-primary-dark); font-size: 16px; font-weight: 800; padding: 4px 12px; background: #fff; border: 2px solid var(--sim15-primary-dark); border-radius: 6px; min-width: 108px; text-align: center; font-variant-numeric: tabular-nums; }
.sim15-volume-slider{ width: 100%; height: 8px; border-radius: 4px; background: #e5e7eb; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sim15-volume-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sim15-primary-dark); border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(159,18,57,.4); transition: transform .1s; }
.sim15-volume-slider::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.sim15-volume-slider::-moz-range-thumb{ width: 22px; height: 22px; border-radius: 50%; background: var(--sim15-primary-dark); border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(159,18,57,.4); }
.sim15-volume-scale{ display: flex; justify-content: space-between; align-items: center; padding: 0 2px; font-size: 11px; color: var(--sim15-text-dark); font-weight: 600; }
.sim15-volume-scale-mid{ color: var(--sim15-primary-dark); font-weight: 700; }

/* ============================================================
   SIM-16 — Indikator Asam-Basa (skeleton F9a)
   ============================================================ */
:root{ --sim16-primary-dark:#1e293b; --sim16-primary-mid:#334155; --sim16-primary-subtle:#64748b; --sim16-bg-wrapper:#f8fafc; --sim16-bg-panel:#f1f5f9; --sim16-bg-callout:#ffffff; --sim16-border:#cbd5e1; --sim16-border-strong:#94a3b8; --sim16-text-primary:#0f172a; --sim16-text-secondary:#475569; --sim16-text-muted:#64748b; --sim16-accent-featured:#ec4899; --sim16-lcd-bg:#1e293b; --sim16-lcd-text:#10b981; --sim16-lcd-glow:rgba(16,185,129,.6); }
.sim16-dock{ position: fixed; inset: 0; width: 100%; background: var(--sim16-bg-wrapper); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim16-dock *, .sim16-dock *::before, .sim16-dock *::after{ box-sizing: border-box; }
body.sim16-open .sim16-dock{ transform: none; }
@media (max-width: 880px){ body.sim16-open{ overflow: hidden; } }
.sim16-dock-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim16-primary-dark); }
.sim16-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#1e293b,#334155); }
.sim16-ic svg{ width: 20px; height: 20px; }
.sim16-ttl{ flex: 1; min-width: 0; }
.sim16-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sim16-text-muted); margin-bottom: 3px; }
.sim16-dock-header .sim16-title{ margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--sim16-primary-dark); letter-spacing: .01em; }
.sim16-subtitle{ margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sim16-text-muted); }
.sim16-back-btn svg{ width: 15px; height: 15px; }
.sim16-scroll{ flex: 1; overflow-y: auto; }
.sim16-container{ max-width: 1200px; margin: 0 auto; padding: 24px 20px; color: var(--sim16-text-primary); }
.sim16-panel{ background: var(--sim16-bg-panel); border: 1px solid var(--sim16-border); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
.sim16-panel-heading{ margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sim16-primary-dark); border-bottom: 2px solid var(--sim16-border-strong); padding-bottom: 8px; }
.sim16-panel-body{ min-height: 120px; }
.sim16-grid-dua-kolom{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.sim16-grid-dua-kolom .sim16-panel{ margin-bottom: 0; }
.sim16-simbolik-kurva-row{ display: grid; grid-template-columns: 40% 60%; gap: 20px; margin-bottom: 20px; align-items: start; }
.sim16-simbolik-kurva-row .sim16-panel{ margin-bottom: 0; }
@media (max-width: 768px){ .sim16-simbolik-kurva-row{ grid-template-columns: 1fr; } }
@media (max-width: 768px){ .sim16-grid-dua-kolom{ grid-template-columns: 1fr; } }
.sim16-placeholder-body{ min-height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px dashed var(--sim16-border); border-radius: 6px; padding: 24px; }
.sim16-placeholder-text{ margin: 0; font-size: 13px; font-style: italic; color: var(--sim16-text-muted); text-align: center; }
.sim16-callout{ background: var(--sim16-bg-callout); border: 1px solid var(--sim16-border-strong); border-left: 4px solid var(--sim16-primary-dark); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
.sim16-callout-heading{ margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sim16-primary-dark); }
.sim16-callout-body{ min-height: 100px; }

/* F9b · SIM-16 kontrol final (slider pH + chip pKa + dropdown indikator) */
.sim16-kontrol-body{ display: flex; flex-direction: column; gap: 24px; padding: 8px 0 4px; }
.sim16-kontrol-baris{ display: flex; flex-direction: column; gap: 10px; }
.sim16-kontrol-baris-slider{ gap: 8px; }
.sim16-kontrol-label{ font-size: 13px; font-weight: 600; color: var(--sim16-text-primary); letter-spacing: .02em; }
.sim16-dropdown{ padding: 10px 14px; font-size: 14px; font-family: inherit; font-weight: 500; color: var(--sim16-text-primary); background: #fff; border: 1.5px solid var(--sim16-border-strong); border-radius: 6px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; min-width: 340px; max-width: 100%; }
.sim16-dropdown:hover{ border-color: var(--sim16-primary-mid); }
.sim16-dropdown:focus{ border-color: var(--sim16-primary-dark); outline: none; box-shadow: 0 0 0 3px rgba(30,41,59,.12); }
.sim16-ph-label-container{ display: flex; align-items: baseline; gap: 10px; font-family: 'Courier New', Courier, monospace; font-weight: 700; margin-bottom: 4px; }
.sim16-ph-label-text{ font-size: 20px; color: var(--sim16-text-secondary); }
.sim16-ph-label-value{ font-size: 34px; color: var(--sim16-primary-dark); font-variant-numeric: tabular-nums; min-width: 100px; display: inline-block; letter-spacing: .02em; }
.sim16-slider{ width: 100%; height: 10px; -webkit-appearance: none; appearance: none; background-color: #22c55e; background-image: linear-gradient(to right, #dc2626 0%, #ea580c 15%, #eab308 30%, #22c55e 50%, #06b6d4 65%, #3b82f6 80%, #7c3aed 100%); border-radius: 5px; outline: none; cursor: pointer; margin: 4px 0; }
.sim16-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--sim16-primary-dark); border: 3px solid #fff; border-radius: 50%; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .1s ease; }
.sim16-slider::-webkit-slider-thumb:hover{ transform: scale(1.08); }
.sim16-slider::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.15); }
.sim16-slider::-moz-range-thumb{ width: 24px; height: 24px; background: var(--sim16-primary-dark); border: 3px solid #fff; border-radius: 50%; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.sim16-slider-markers{ display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 8px; padding: 0 2px; }
.sim16-slider-marker{ display: flex; flex-direction: column; gap: 2px; }
.sim16-slider-marker-kiri{ align-items: flex-start; }
.sim16-slider-marker-tengah{ align-items: center; }
.sim16-slider-marker-kanan{ align-items: flex-end; }
.sim16-marker-value{ font-size: 14px; font-weight: 700; color: var(--sim16-text-primary); font-family: 'Courier New', monospace; }
.sim16-marker-label{ font-size: 11px; color: var(--sim16-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.sim16-quickjump-label{ font-size: 13px; font-weight: 600; color: var(--sim16-text-secondary); letter-spacing: .02em; }
.sim16-quickjump-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.sim16-chip{ padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--sim16-primary-dark); background: #fff; border: 1.5px solid var(--sim16-border-strong); border-radius: 22px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; letter-spacing: .02em; white-space: nowrap; }
.sim16-chip:hover{ background: var(--sim16-bg-panel); border-color: var(--sim16-primary-dark); transform: translateY(-1px); }
.sim16-chip:active{ transform: translateY(0); background: var(--sim16-primary-subtle); color: #fff; }
.sim16-chip:focus-visible{ outline: 2px solid var(--sim16-primary-dark); outline-offset: 2px; }

/* F9c · SIM-16 Panel Makroskopik (tabung reaksi + pH meter LCD) */
.sim16-makro-body{ display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }
.sim16-makro-label-container{ padding: 10px 14px; background: #fff; border-left: 3px solid var(--sim16-primary-dark); border-radius: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sim16-makro-label-nama{ font-size: 14px; font-weight: 700; color: var(--sim16-primary-dark); letter-spacing: .02em; }
.sim16-makro-label-rentang{ font-size: 12px; font-weight: 500; color: var(--sim16-text-muted); letter-spacing: .02em; }
.sim16-makro-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 24px 20px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 6px; min-height: 260px; }
@media (max-width: 520px){ .sim16-makro-grid{ grid-template-columns: 1fr; } }
.sim16-makro-tabung-container{ display: flex; justify-content: center; align-items: center; padding: 4px; }
.sim16-makro-tabung-svg{ width: 100%; max-width: 130px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.sim16-makro-phmeter{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
.sim16-phmeter-label{ font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--sim16-text-secondary); text-transform: uppercase; }
.sim16-phmeter-lcd{ padding: 14px 26px; background: var(--sim16-lcd-bg); border-radius: 6px; min-width: 130px; text-align: center; border: 2px solid #0f172a; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.12); }
#sim16-phmeter-value{ font-family: 'Courier New', Courier, monospace; font-size: 36px; font-weight: 700; color: var(--sim16-lcd-text); text-shadow: 0 0 8px var(--sim16-lcd-glow); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.sim16-phmeter-unit{ font-size: 11px; color: var(--sim16-text-muted); letter-spacing: .05em; font-weight: 500; }

/* F9d · SIM-16 Panel Simbolik bagian 1 (bar rasio + formalisme KIn) */
.sim16-simbolik-body{ display: flex; flex-direction: column; gap: 24px; padding: 4px 0; }
.sim16-simbolik-bar-section, .sim16-simbolik-formalisme-section{ display: flex; flex-direction: column; gap: 10px; }
.sim16-simbolik-bar-heading, .sim16-simbolik-formalisme-heading{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sim16-text-secondary); }
.sim16-simbolik-bar-wrapper{ padding: 4px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; }
.sim16-simbolik-bar-container{ display: flex; height: 44px; border-radius: 5px; overflow: hidden; }
.sim16-simbolik-bar-segmen{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 0; transition: flex-basis .25s ease, background .25s ease; overflow: hidden; }
.sim16-simbolik-bar-label{ font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 0 10px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sim16-simbolik-bar-legenda{ display: flex; gap: 24px; flex-wrap: wrap; padding: 4px 2px; }
.sim16-simbolik-bar-legenda-item{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sim16-text-secondary); font-weight: 500; }
.sim16-simbolik-bar-legenda-dot{ display: inline-block; width: 14px; height: 14px; border-radius: 3px; transition: background .2s ease, border .2s ease; }
.sim16-simbolik-formalisme-kotak{ padding: 20px 24px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; display: flex; flex-direction: column; gap: 14px; }
.sim16-simbolik-baris{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sim16-simbolik-baris-persamaan, .sim16-simbolik-baris-ekspresi, .sim16-simbolik-baris-pka, .sim16-simbolik-baris-kin{ justify-content: center; }
.sim16-simbolik-formula{ font-family: Cambria, Georgia, 'Times New Roman', serif; font-size: 18px; color: var(--sim16-text-primary); letter-spacing: .02em; }
.sim16-simbolik-arrow{ margin: 0 6px; color: var(--sim16-primary-mid); font-weight: 500; }
.sim16-simbolik-formula sup, .sim16-simbolik-formula sub{ font-size: .7em; padding: 0 1px; }
.sim16-simbolik-fraksi{ display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 2px; }
.sim16-simbolik-fraksi-atas{ padding: 0 8px 2px; border-bottom: 1.5px solid var(--sim16-text-primary); font-size: 15px; line-height: 1.3; }
.sim16-simbolik-fraksi-bawah{ padding: 2px 8px 0; font-size: 15px; line-height: 1.3; }
.sim16-simbolik-divider{ height: 1px; background: var(--sim16-border); margin: 4px 0; }
.sim16-simbolik-value-label{ font-size: 15px; font-weight: 500; color: var(--sim16-text-secondary); }
.sim16-simbolik-value-primary{ font-family: 'Courier New', monospace; font-size: 24px; font-weight: 700; color: var(--sim16-primary-dark); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.sim16-simbolik-value-label-secondary{ font-size: 13px; font-weight: 500; color: var(--sim16-text-muted); }
.sim16-simbolik-value-secondary{ font-family: 'Courier New', monospace; font-size: 14px; color: var(--sim16-text-secondary); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sim16-simbolik-value-secondary sup{ font-size: .75em; }

/* F9e · SIM-16 Panel Simbolik bagian 2 (skala pH + band range + marker) */
.sim16-simbolik-skala-section{ display: flex; flex-direction: column; gap: 10px; }
.sim16-simbolik-skala-heading{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sim16-text-secondary); }
.sim16-simbolik-skala-wrapper{ padding: 4px 20px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; }
.sim16-simbolik-skala-container{ position: relative; height: 140px; padding: 8px 0 24px; }
.sim16-simbolik-skala-track{ position: absolute; left: 0; right: 0; top: 92px; height: 4px; background: #cbd5e1; border-radius: 2px; z-index: 1; }
.sim16-simbolik-skala-band{ position: absolute; top: 78px; height: 32px; border-radius: 4px; border: 1px solid var(--sim16-border-strong); overflow: hidden; display: flex; transition: left .25s ease, width .25s ease; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sim16-simbolik-skala-band-asam, .sim16-simbolik-skala-band-basa{ height: 100%; transition: background .25s ease, flex-basis .25s ease; }
.sim16-simbolik-skala-ticks{ position: absolute; left: 0; right: 0; top: 96px; height: 30px; }
.sim16-simbolik-skala-tick{ position: absolute; top: 0; width: 1px; height: 6px; background: #94a3b8; transform: translateX(-50%); }
.sim16-simbolik-skala-tick-major{ height: 10px; background: var(--sim16-primary-dark); width: 1.5px; }
.sim16-simbolik-skala-tick-label{ position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--sim16-text-muted); font-family: 'Courier New', monospace; white-space: nowrap; }
.sim16-simbolik-skala-tick-major .sim16-simbolik-skala-tick-label{ top: 14px; font-size: 11px; font-weight: 700; color: var(--sim16-text-primary); }
.sim16-simbolik-skala-boundary-label{ position: absolute; top: 54px; transform: translateX(-50%); padding: 2px 8px; background: var(--sim16-bg-panel); border: 1px solid var(--sim16-border-strong); border-radius: 3px; font-size: 11px; font-family: 'Courier New', monospace; color: var(--sim16-primary-dark); font-weight: 700; transition: left .25s ease; z-index: 3; white-space: nowrap; }
.sim16-simbolik-skala-marker{ position: absolute; top: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 4; transition: left .15s ease; pointer-events: none; }
.sim16-simbolik-skala-marker-label{ padding: 3px 8px; background: var(--sim16-primary-dark); color: #fff; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; border-radius: 3px; white-space: nowrap; margin-bottom: 3px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.sim16-simbolik-skala-marker-line{ width: 2px; height: 78px; background: var(--sim16-primary-dark); border-radius: 1px; }

/* F9f · SIM-16 Panel Sub-mikroskopik (20 partikel adaptif) */
.sim16-submikro-body{ display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.sim16-submikro-container-wrapper{ padding: 6px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; }
.sim16-submikro-svg{ width: 100%; height: auto; display: block; min-height: 200px; }
.sim16-submikro-legenda{ display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: var(--sim16-bg-panel); border: 1px solid var(--sim16-border); border-radius: 6px; }
.sim16-submikro-legenda-item{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sim16-text-primary); }
.sim16-submikro-legenda-dot{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; transition: background .2s ease, border .2s ease; flex-shrink: 0; }
.sim16-submikro-legenda-label{ font-family: 'Courier New', monospace; font-weight: 500; font-variant-numeric: tabular-nums; }

/* F9g · SIM-16 Panel Kurva Titrasi Referensi (3 kurva overlay) */
.sim16-kurva-body{ display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.sim16-kurva-subheading{ font-size: 13px; font-weight: 600; color: var(--sim16-text-primary); padding: 8px 12px; background: #fff; border-left: 3px solid var(--sim16-primary-dark); border-radius: 4px; }
.sim16-kurva-note{ display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--sim16-text-muted); }
.sim16-kurva-svg-wrapper{ padding: 8px; background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; }
.sim16-kurva-svg{ width: 100%; height: auto; display: block; min-height: 250px; }
.sim16-kurva-gridline-v, .sim16-kurva-gridline-h{ stroke: #e2e8f0; stroke-width: 0.8; stroke-dasharray: 3, 2; }
.sim16-kurva-axis-line{ stroke: var(--sim16-primary-dark); stroke-width: 1.5; }
.sim16-kurva-tick{ stroke: var(--sim16-primary-dark); stroke-width: 1; }
.sim16-kurva-tick-label{ font-family: 'Courier New', monospace; font-size: 11px; fill: var(--sim16-text-secondary); }
.sim16-kurva-axis-label{ font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; fill: var(--sim16-primary-dark); letter-spacing: .03em; }
.sim16-kurva-path{ fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sim16-kurva-path-akbk{ stroke: #0f172a; }
.sim16-kurva-path-albk{ stroke: #7c3aed; }
.sim16-kurva-path-akbl{ stroke: #059669; }
.sim16-kurva-legenda{ display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--sim16-bg-panel); border: 1px solid var(--sim16-border); border-radius: 6px; }
.sim16-kurva-legenda-item{ display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sim16-text-primary); line-height: 1.5; }
.sim16-kurva-legenda-line{ display: inline-block; width: 32px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.sim16-kurva-legenda-line-akbk{ background: #0f172a; }
.sim16-kurva-legenda-line-albk{ background: #7c3aed; }
.sim16-kurva-legenda-line-akbl{ background: #059669; }
.sim16-kurva-legenda-label strong{ color: var(--sim16-primary-dark); font-family: 'Courier New', monospace; letter-spacing: .03em; }

/* F9h · SIM-16 Panel Kurva bagian 2 (5 band range + marker pH) */
.sim16-kurva-marker-line{ stroke: #0f172a; stroke-width: 1.5; stroke-dasharray: 4, 2; fill: none; }
.sim16-kurva-marker-label-bg{ fill: var(--sim16-lcd-bg); stroke: #0f172a; stroke-width: 0.5; }
.sim16-kurva-marker-label-text{ font-family: 'Courier New', monospace; font-size: 10px; font-weight: 700; fill: var(--sim16-lcd-text); font-variant-numeric: tabular-nums; }
#sim16-kurva-bands rect{ transition: opacity .25s ease; }

/* F9j · SIM-16 Callout Mekanisme 4-blok statik */
.sim16-callout-body{ display: flex; flex-direction: column; gap: 18px; padding: 4px 0; }
.sim16-callout-blok{ background: #fff; border: 1px solid var(--sim16-border); border-radius: 8px; padding: 16px 20px; }
.sim16-callout-blok-heading{ font-size: 14px; font-weight: 700; color: var(--sim16-primary-dark); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--sim16-primary-dark); letter-spacing: .04em; text-transform: uppercase; }
.sim16-callout-blok-content p{ font-size: 13.5px; line-height: 1.65; color: var(--sim16-text-primary); margin: 0 0 12px; text-wrap: pretty; }
.sim16-callout-blok-content p:last-child{ margin-bottom: 0; }
.sim16-callout-blok-content strong{ color: var(--sim16-primary-dark); font-weight: 700; }
.sim16-callout-blok-content em{ font-style: italic; color: var(--sim16-text-secondary); }
.sim16-callout-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 14px 0; }
.sim16-callout-table th{ background: var(--sim16-bg-panel); color: var(--sim16-primary-dark); font-weight: 700; text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--sim16-border-strong); font-size: 12px; letter-spacing: .03em; }
.sim16-callout-table td{ padding: 8px 10px; border-bottom: 1px solid var(--sim16-border); vertical-align: top; line-height: 1.5; }
.sim16-callout-table tbody tr:nth-child(even) td{ background: #f8fafc; }
.sim16-callout-table td small{ font-size: 11px; color: var(--sim16-text-muted); font-style: italic; }
.sim16-callout-list{ margin: 8px 0 12px; padding-left: 22px; }
.sim16-callout-list li{ font-size: 13px; line-height: 1.65; color: var(--sim16-text-primary); margin-bottom: 6px; }
.sim16-callout-list li:last-child{ margin-bottom: 0; }
.sim16-callout-note{ font-size: 12.5px; line-height: 1.6; color: var(--sim16-text-primary); padding: 10px 14px; background: #fef3c7; border-left: 3px solid #d97706; border-radius: 4px; margin-top: 12px; }
.sim16-callout-blockquote{ background: #eef2ff; border-left: 4px solid #6366f1; padding: 14px 18px; margin: 6px 0 14px; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--sim16-primary-dark); border-radius: 4px; }
.sim16-callout-subinsight{ background: #ecfdf5; border-left: 4px solid #059669; padding: 12px 16px; margin-top: 14px; border-radius: 4px; }
.sim16-callout-subinsight-heading{ font-size: 13px; font-weight: 700; color: #047857; margin-bottom: 8px; letter-spacing: .02em; }
.sim16-callout-subinsight p{ font-size: 12.5px; line-height: 1.6; color: var(--sim16-text-primary); margin: 0 0 8px; }
.sim16-callout-subinsight p:last-child{ margin-bottom: 0; }
.sim16-callout-disclaimer{ background: #fef2f2; border-left: 4px solid #dc2626; padding: 12px 16px; margin-top: 14px; border-radius: 4px; }
.sim16-callout-disclaimer-heading{ font-size: 13px; font-weight: 700; color: #991b1b; margin-bottom: 8px; letter-spacing: .02em; }
.sim16-callout-disclaimer p{ font-size: 12.5px; line-height: 1.6; color: var(--sim16-text-primary); margin: 0 0 8px; }
.sim16-callout-disclaimer p:last-child{ margin-bottom: 0; }

/* ============================================================
   SIM-17 — Kesetimbangan AgCl (skeleton SIM17-01 · Amber-Warm)
   ============================================================ */
.sim17-dock{ --sim17-primary-dark:#78350f; --sim17-primary-mid:#b45309; --sim17-text-primary:#292524; --sim17-text-secondary:#44403c; --sim17-text-muted:#78716c; --sim17-border:#e7e5e4; --sim17-border-strong:#a8a29e; --sim17-bg-wrapper:#fafaf9; --sim17-bg-panel:#f5f5f4; --sim17-lcd-bg:#1c1917; --sim17-lcd-text:#10b981; --sim17-accent-featured:#ec4899; position: fixed; inset: 0; width: 100%; background: var(--sim17-bg-wrapper); display: flex; flex-direction: column; z-index: 130; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim17-dock *, .sim17-dock *::before, .sim17-dock *::after{ box-sizing: border-box; }
body.sim17-open .sim17-dock{ transform: none; }
@media (max-width: 880px){ body.sim17-open{ overflow: hidden; } }
.sim17-dock-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim17-primary-dark); }
.sim17-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#78350f,#b45309); }
.sim17-ic svg{ width: 20px; height: 20px; }
.sim17-ttl{ flex: 1; min-width: 0; }
.sim17-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sim17-text-muted); margin-bottom: 3px; }
.sim17-dock-header .sim17-title{ margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--sim17-primary-dark); letter-spacing: .01em; }
.sim17-subtitle{ margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sim17-text-muted); }
.sim17-back-btn svg{ width: 15px; height: 15px; }
.sim17-scroll{ flex: 1; overflow-y: auto; }
.sim17-container{ max-width: 1200px; margin: 0 auto; padding: 24px 20px; color: var(--sim17-text-primary); }
.sim17-panel{ background: var(--sim17-bg-panel); border: 1px solid var(--sim17-border); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
.sim17-panel-heading{ margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sim17-primary-dark); border-bottom: 2px solid var(--sim17-border-strong); padding-bottom: 8px; }
.sim17-grid-dua-kolom{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.sim17-grid-dua-kolom .sim17-panel{ margin-bottom: 0; }
@media (max-width: 768px){ .sim17-grid-dua-kolom{ grid-template-columns: 1fr; } }
.sim17-grid-simbolik-panels{ display: grid; grid-template-columns: 60% 40%; grid-template-rows: auto auto auto; gap: 20px; margin-bottom: 20px; align-items: start; }
.sim17-grid-simbolik-panels .sim17-panel{ margin-bottom: 0; }
.sim17-grid-simbolik-panels #sim17-panel-simbolik{ grid-column: 1; grid-row: 1 / span 3; }
.sim17-grid-simbolik-panels #sim17-panel-meter{ grid-column: 2; grid-row: 1; }
.sim17-grid-simbolik-panels #sim17-panel-makro{ grid-column: 2; grid-row: 2; }
.sim17-grid-simbolik-panels #sim17-panel-submikro{ grid-column: 2; grid-row: 3; }
@media (max-width: 768px){ .sim17-grid-simbolik-panels{ grid-template-columns: 1fr; grid-template-rows: none; } .sim17-grid-simbolik-panels #sim17-panel-simbolik, .sim17-grid-simbolik-panels #sim17-panel-meter, .sim17-grid-simbolik-panels #sim17-panel-makro, .sim17-grid-simbolik-panels #sim17-panel-submikro{ grid-column: 1; grid-row: auto; } }
.sim17-panel-placeholder{ min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--sim17-bg-panel); border: 2px dashed var(--sim17-border-strong); color: var(--sim17-text-muted); font-family: 'Courier New', monospace; font-size: 13px; font-style: italic; }
.sim17-callout-placeholder{ min-height: 120px; display: flex; align-items: center; justify-content: center; background: var(--sim17-bg-panel); border: 2px dashed var(--sim17-border-strong); border-radius: 8px; padding: 20px; margin-bottom: 20px; color: var(--sim17-text-muted); font-family: 'Courier New', monospace; font-size: 13px; font-style: italic; }
.sim17-placeholder-label{ text-align: center; }

/* SIM17-02 · Panel Kontrol (slider faktor kejenuhan + chip preset 3 zone + label bantu) */
.sim17-panel-kontrol{ padding: 24px; }
.sim17-panel-kontrol .sim17-panel-heading{ font-size: 14px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .06em; border-left: 3px solid var(--sim17-primary-dark); border-bottom: none; padding: 0 0 0 10px; margin-bottom: 20px; }
.sim17-kontrol-body{ display: flex; flex-direction: column; gap: 24px; }
.sim17-kontrol-slider-block{ display: flex; flex-direction: column; gap: 12px; }
.sim17-kontrol-slider-label{ font-size: 13px; font-weight: 600; color: var(--sim17-text-secondary); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sim17-kontrol-faktor-display{ font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700; color: var(--sim17-primary-dark); font-variant-numeric: tabular-nums; }
.sim17-kontrol-slider-wrapper{ position: relative; padding-bottom: 34px; }
.sim17-kontrol-slider{ display: block; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(to right,#dcfce7 0%,#dcfce7 33%,#fef9c3 33%,#fef9c3 34.5%,#fee2e2 34.5%,#fee2e2 100%); -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; margin: 0; }
.sim17-kontrol-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sim17-primary-dark); border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.sim17-kontrol-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: var(--sim17-primary-dark); border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.sim17-kontrol-slider:focus-visible{ outline: 2px solid var(--sim17-primary-dark); outline-offset: 4px; }
.sim17-kontrol-slider-ticks{ position: absolute; top: 14px; left: 0; right: 0; height: 22px; pointer-events: none; }
.sim17-kontrol-tick{ position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sim17-kontrol-tick-mark{ width: 2px; height: 8px; background: var(--sim17-border-strong); }
.sim17-kontrol-tick-mark-emphasized{ width: 3px; height: 10px; background: var(--sim17-primary-dark); }
.sim17-kontrol-tick-label{ font-size: 11px; color: var(--sim17-text-muted); font-family: 'Courier New', monospace; white-space: nowrap; }
.sim17-kontrol-tick-label-emphasized{ color: var(--sim17-primary-dark); font-weight: 700; }
.sim17-kontrol-chip-block{ display: flex; flex-direction: column; gap: 10px; }
.sim17-kontrol-chip-label{ font-size: 12px; color: var(--sim17-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sim17-kontrol-chip-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.sim17-kontrol-chip{ padding: 8px 14px; border: 2px solid var(--sim17-border-strong); background: #fff; color: var(--sim17-text-secondary); border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.sim17-kontrol-chip:hover{ transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.sim17-kontrol-chip:focus-visible{ outline: 2px solid var(--sim17-primary-dark); outline-offset: 2px; }
.sim17-kontrol-chip-tidakjenuh.sim17-kontrol-chip-active{ background: #dcfce7; border-color: #22c55e; color: #166534; }
.sim17-kontrol-chip-jenuh.sim17-kontrol-chip-active{ background: #fef9c3; border-color: #facc15; color: #854d0e; }
.sim17-kontrol-chip-superjenuh.sim17-kontrol-chip-active{ background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.sim17-kontrol-info-block{ background: #fff; border: 1px solid var(--sim17-border); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.sim17-kontrol-info-line{ display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.sim17-kontrol-info-label{ color: var(--sim17-text-secondary); font-weight: 500; }
.sim17-kontrol-info-value{ font-family: 'Courier New', monospace; font-weight: 700; color: var(--sim17-primary-dark); font-variant-numeric: tabular-nums; }
.sim17-kontrol-info-line-badge{ border-top: 1px dashed var(--sim17-border-strong); padding-top: 10px; margin-top: 2px; }
.sim17-kontrol-zone-badge{ font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 4px; border: 2px solid transparent; letter-spacing: .04em; }
.sim17-kontrol-zone-badge-tidakjenuh{ background: #dcfce7; border-color: #22c55e; color: #166534; }
.sim17-kontrol-zone-badge-jenuh{ background: #fef9c3; border-color: #facc15; color: #854d0e; }
.sim17-kontrol-zone-badge-superjenuh{ background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* SIM17-03 · Panel Makroskopik (beaker 100 mL + larutan semi-transparan + endapan adaptif) */
.sim17-panel-makro{ padding: 24px; }
.sim17-panel-makro .sim17-panel-heading{ font-size: 14px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .06em; border-left: 3px solid var(--sim17-primary-dark); border-bottom: none; padding: 0 0 0 10px; margin-bottom: 20px; }
.sim17-makro-body{ display: flex; flex-direction: column; gap: 16px; align-items: center; }
.sim17-makro-svg-wrapper{ display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.sim17-makro-svg{ width: 210px; height: 280px; max-width: 100%; }
.sim17-makro-beaker-outline{ stroke: var(--sim17-text-secondary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sim17-makro-larutan{ fill: #dbeafe; fill-opacity: .35; }
.sim17-makro-endapan{ fill: #fff; stroke: #d6d3d1; stroke-width: 1; transition: y .18s ease, height .18s ease; }
.sim17-makro-scale-group line{ stroke: var(--sim17-text-secondary); stroke-width: 1; }
.sim17-makro-scale-label{ fill: var(--sim17-text-secondary); font-family: 'Courier New', monospace; font-size: 9px; font-variant-numeric: tabular-nums; }
.sim17-makro-label-larutan{ fill: var(--sim17-text-secondary); font-family: 'Courier New', monospace; font-size: 11px; font-weight: 600; }
.sim17-makro-label-endapan{ fill: var(--sim17-primary-dark); font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; }
.sim17-makro-info{ background: #fff; border: 1px solid var(--sim17-border); border-radius: 6px; padding: 10px 14px; width: 100%; }
.sim17-makro-info-item{ display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.sim17-makro-info-label{ color: var(--sim17-text-secondary); font-weight: 600; flex: none; }
.sim17-makro-info-value{ color: var(--sim17-text-primary); font-weight: 500; text-align: right; }

/* SIM17-04 · Panel Simbolik bagian 1 (4 sub-block formalisme statis) */
.sim17-panel-simbolik{ padding: 24px; }
.sim17-panel-simbolik .sim17-panel-heading{ font-size: 14px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .06em; border-left: 3px solid var(--sim17-primary-dark); border-bottom: none; padding: 0 0 0 10px; margin-bottom: 20px; }
.sim17-simbolik-body{ display: flex; flex-direction: column; gap: 20px; }
.sim17-simbolik-bagian1{ display: flex; flex-direction: column; gap: 14px; }
.sim17-simbolik-block{ background: #fff; border: 1px solid var(--sim17-border); border-left: 3px solid var(--sim17-border-strong); border-radius: 4px; padding: 12px 16px; }
.sim17-simbolik-block-anchor{ border-left-color: var(--sim17-primary-dark); background: var(--sim17-bg-panel); }
.sim17-simbolik-block-header{ font-size: 11px; font-weight: 700; color: var(--sim17-text-secondary); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.sim17-simbolik-block-content{ display: flex; flex-direction: column; gap: 6px; }
.sim17-simbolik-formula{ font-family: 'Courier New', monospace; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.sim17-simbolik-formula-persamaan{ font-size: 16px; font-weight: 600; color: var(--sim17-text-primary); }
.sim17-simbolik-formula-ekspresi{ font-size: 17px; font-weight: 700; color: var(--sim17-text-primary); }
.sim17-simbolik-formula-nilai{ font-size: 15px; font-weight: 700; color: var(--sim17-primary-dark); }
.sim17-simbolik-species{ color: var(--sim17-text-primary); }
.sim17-simbolik-symbol{ color: var(--sim17-text-secondary); font-size: 20px; padding: 0 4px; }
.sim17-simbolik-plus{ color: var(--sim17-text-secondary); font-size: 16px; padding: 0 2px; }
.sim17-simbolik-var{ font-weight: 700; color: var(--sim17-text-primary); }
.sim17-simbolik-equals{ color: var(--sim17-text-secondary); font-size: 16px; padding: 0 2px; }
.sim17-simbolik-bracket{ color: var(--sim17-text-primary); font-weight: 600; }
.sim17-simbolik-value{ color: var(--sim17-primary-dark); font-weight: 700; }
.sim17-simbolik-sqrt{ color: var(--sim17-text-primary); font-weight: 600; }
.sim17-simbolik-annotation{ display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 500; color: var(--sim17-text-muted); padding-top: 6px; border-top: 1px dashed var(--sim17-border); margin-top: 4px; }
.sim17-simbolik-annotation-left, .sim17-simbolik-annotation-right{ font-style: italic; }
.sim17-simbolik-annotation-arrow{ color: var(--sim17-text-muted); font-size: 13px; }
.sim17-simbolik-caption{ font-size: 11px; color: var(--sim17-text-muted); text-align: center; font-style: italic; margin-top: 2px; line-height: 1.5; }
.sim17-simbolik-formula sub, .sim17-simbolik-formula sup{ font-family: 'Courier New', monospace; font-size: .75em; font-variant-numeric: tabular-nums; }
.sim17-simbolik-bagian2-placeholder{ padding-top: 10px; }
.sim17-simbolik-divider{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 0 6px; border-top: 2px dashed var(--sim17-border-strong); }
.sim17-simbolik-divider-label{ font-family: 'Courier New', monospace; font-size: 11px; font-style: italic; color: var(--sim17-text-muted); }

/* SIM17-05 · Panel Simbolik bagian 2 (4-layer breathing dinamis + featured Q) */
.sim17-simbolik-bagian2{ display: flex; flex-direction: column; gap: 12px; }
.sim17-simbolik-divider-final{ padding-bottom: 10px; }
.sim17-simbolik-layer{ background: #fff; border: 1px solid var(--sim17-border); border-left: 3px solid var(--sim17-border); border-radius: 4px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.sim17-simbolik-layer-1{ border-left-color: var(--sim17-text-muted); }
.sim17-simbolik-layer-2{ border-left-color: var(--sim17-text-secondary); }
.sim17-simbolik-layer-3{ border-left-color: var(--sim17-text-primary); }
.sim17-simbolik-layer-4{ border-left-color: var(--sim17-accent-featured); background: var(--sim17-bg-panel); padding: 16px 20px; gap: 12px; }
.sim17-simbolik-layer-header{ font-size: 10px; font-weight: 700; color: var(--sim17-text-muted); text-transform: uppercase; letter-spacing: .07em; }
.sim17-simbolik-layer-4 .sim17-simbolik-layer-header{ color: var(--sim17-accent-featured); }
.sim17-simbolik-layer-content{ display: flex; flex-direction: column; gap: 4px; }
.sim17-simbolik-formula-layer{ font-size: 14px; padding: 2px 0; }
.sim17-simbolik-symbol-small{ color: var(--sim17-text-secondary); font-size: 14px; padding: 0 2px; }
.sim17-simbolik-var-italic{ color: var(--sim17-text-secondary); font-style: italic; font-weight: 500; }
.sim17-simbolik-value-inline{ color: var(--sim17-text-primary); font-weight: 600; }
.sim17-simbolik-value-dynamic{ color: var(--sim17-text-primary); font-weight: 700; }
.sim17-simbolik-value-dynamic-primary{ color: var(--sim17-primary-dark); font-weight: 700; }
.sim17-simbolik-unit{ color: var(--sim17-text-secondary); font-weight: 500; padding-left: 2px; }
.sim17-simbolik-featured-q{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 12px 8px; font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; }
.sim17-simbolik-featured-q-var{ font-size: 32px; font-weight: 700; color: var(--sim17-accent-featured); }
.sim17-simbolik-featured-q-equals{ font-size: 32px; color: var(--sim17-accent-featured); padding: 0 4px; }
.sim17-simbolik-featured-q-value{ font-size: 44px; font-weight: 800; color: var(--sim17-accent-featured); line-height: 1.1; }
.sim17-simbolik-featured-q-value sup{ font-size: .5em; vertical-align: super; font-weight: 700; }
.sim17-simbolik-zone-badge{ font-family: 'Courier New', monospace; font-size: 16px; font-weight: 800; padding: 10px 20px; border-radius: 6px; border: 2px solid transparent; letter-spacing: .12em; text-align: center; width: 100%; }
.sim17-simbolik-zone-badge-tidakjenuh{ background: #dcfce7; border-color: #22c55e; color: #166534; }
.sim17-simbolik-zone-badge-jenuh{ background: #fef9c3; border-color: #facc15; color: #854d0e; }
.sim17-simbolik-zone-badge-superjenuh{ background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* SIM17-06 · Panel Sub-mikroskopik bagian 1 (base positioning deterministic seed 42) */
.sim17-panel-submikro{ padding: 24px; }
.sim17-panel-submikro .sim17-panel-heading{ font-size: 14px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .06em; border-left: 3px solid var(--sim17-primary-dark); border-bottom: none; padding: 0 0 0 10px; margin-bottom: 20px; }
.sim17-submikro-body{ display: flex; flex-direction: column; gap: 14px; }
.sim17-submikro-svg-wrapper{ display: flex; justify-content: center; align-items: center; }
.sim17-submikro-svg{ width: 100%; max-width: 400px; height: auto; aspect-ratio: 400 / 320; border: 1px solid var(--sim17-border-strong); border-radius: 6px; background: #fff; }
.sim17-submikro-zone-larutan-bg{ fill: #f0f9ff; }
.sim17-submikro-zone-padatan-bg{ fill: #ffffff; }
.sim17-submikro-split-line{ stroke: var(--sim17-border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.sim17-submikro-zone-label{ fill: var(--sim17-text-muted); font-family: 'Courier New', monospace; font-size: 10px; font-style: italic; text-transform: uppercase; letter-spacing: .07em; }
.sim17-submikro-partikel{ transition: opacity .15s ease; }
.sim17-submikro-partikel-visible{ opacity: 1 !important; }
.sim17-submikro-partikel-hidden{ opacity: 0 !important; pointer-events: none; }
.sim17-submikro-agplus{ fill: #a8a29e; stroke: #78716c; stroke-width: 1; }
.sim17-submikro-clminus{ fill: #22c55e; stroke: #166534; stroke-width: 1; }
.sim17-submikro-kristal{ fill: #fff; stroke: #a8a29e; stroke-width: 1.5; }
.sim17-submikro-legend{ display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; padding: 8px 0; border-top: 1px dashed var(--sim17-border); border-bottom: 1px dashed var(--sim17-border); }
.sim17-submikro-legend-item{ display: flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--sim17-text-secondary); }
.sim17-submikro-legend-marker{ display: inline-block; width: 14px; height: 14px; flex: none; }
.sim17-submikro-legend-agplus{ border-radius: 50%; background: #a8a29e; border: 1px solid #78716c; }
.sim17-submikro-legend-clminus{ border-radius: 50%; background: #22c55e; border: 1px solid #166534; }
.sim17-submikro-legend-kristal{ background: #fff; border: 1.5px solid #a8a29e; }
.sim17-submikro-info{ background: #fff; border: 1px solid var(--sim17-border); border-radius: 6px; padding: 10px 14px; }
.sim17-submikro-info-item{ display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.sim17-submikro-info-label{ color: var(--sim17-text-secondary); font-weight: 600; }
.sim17-submikro-info-value{ font-family: 'Courier New', monospace; color: var(--sim17-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* SIM17-07 · Panel Sub-mikroskopik bagian 2 (loop pertukaran adaptif per zone) */
.sim17-submikro-loop-partikel{ animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: paused; opacity: 0; }
body.sim17-open .sim17-submikro-loop-partikel{ animation-play-state: running; will-change: transform, opacity; }
@keyframes sim17-submikro-loop-pelarutan{ 0%{ transform: translateY(0); opacity: 0; } 15%{ opacity: 1; } 50%{ transform: translateY(-130px); opacity: 1; } 85%{ opacity: .6; } 100%{ transform: translateY(-220px); opacity: 0; } }
.sim17-submikro-loop-pelarutan{ animation-name: sim17-submikro-loop-pelarutan; }
@keyframes sim17-submikro-loop-pengendapan{ 0%{ transform: translateY(0); opacity: 0; } 15%{ opacity: .6; } 50%{ transform: translateY(90px); opacity: 1; } 85%{ opacity: 1; } 100%{ transform: translateY(220px); opacity: 0; } }
.sim17-submikro-loop-pengendapan{ animation-name: sim17-submikro-loop-pengendapan; }
@media (prefers-reduced-motion: reduce){ .sim17-submikro-loop-partikel{ animation: none; opacity: 0; } }

/* ============================================================
   SIM-17 · PANEL METER DIGITAL (SIM17-08)
   ============================================================ */
.sim17-dock .sim17-panel-meter{ padding: 24px; align-self: start; }
.sim17-dock .sim17-meter-body{ display: flex; flex-direction: column; gap: 20px; }
.sim17-dock .sim17-meter-lcd-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.sim17-dock .sim17-meter-lcd-container{ display: flex; flex-direction: column; gap: 6px; }
.sim17-dock .sim17-meter-lcd-label{ font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; color: var(--sim17-text-secondary); text-transform: uppercase; letter-spacing: .8px; text-align: center; }
.sim17-dock .sim17-meter-lcd-caption{ font-family: 'Courier New', monospace; font-size: 10px; font-style: italic; color: var(--sim17-text-muted); text-align: center; }
.sim17-dock .sim17-meter-lcd{ background: var(--sim17-lcd-bg); border: 2px solid #57534e; border-radius: 6px; padding: 14px 6px; min-height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.sim17-dock .sim17-meter-lcd-value{ white-space: nowrap; font-family: 'Courier New', monospace; font-size: 20px; font-weight: 700; color: var(--sim17-lcd-text); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.sim17-dock .sim17-meter-led-box{ background: var(--sim17-bg-panel); border: 3px solid transparent; border-radius: 8px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, border-color .2s ease; }
.sim17-dock .sim17-meter-led-content{ display: flex; align-items: center; gap: 14px; }
.sim17-dock .sim17-meter-led-dot{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 8px currentColor; transition: background-color .2s ease; }
.sim17-dock .sim17-meter-led-status-label{ font-family: 'Courier New', monospace; font-size: 12px; font-weight: 600; color: var(--sim17-text-secondary); text-transform: uppercase; letter-spacing: .8px; }
.sim17-dock .sim17-meter-led-label{ font-family: 'Courier New', monospace; font-size: 18px; font-weight: 800; letter-spacing: 2.5px; }
.sim17-dock .sim17-meter-led-box-tidakjenuh{ border-color: #22c55e; background: #dcfce7; }
.sim17-dock .sim17-meter-led-dot-tidakjenuh{ background: #22c55e; color: #22c55e; }
.sim17-dock .sim17-meter-led-box-tidakjenuh .sim17-meter-led-label{ color: #166534; }
.sim17-dock .sim17-meter-led-box-jenuh{ border-color: #facc15; background: #fef9c3; }
.sim17-dock .sim17-meter-led-dot-jenuh{ background: #facc15; color: #facc15; }
.sim17-dock .sim17-meter-led-box-jenuh .sim17-meter-led-label{ color: #854d0e; }
.sim17-dock .sim17-meter-led-box-superjenuh{ border-color: #ef4444; background: #fee2e2; }
.sim17-dock .sim17-meter-led-dot-superjenuh{ background: #ef4444; color: #ef4444; }
.sim17-dock .sim17-meter-led-box-superjenuh .sim17-meter-led-label{ color: #991b1b; }

/* ============================================================
   SIM-17 · CALLOUT MEKANISME (SIM17-10)
   ============================================================ */
.sim17-dock .sim17-callout-mekanisme{ background: var(--sim17-bg-panel); border: 1px solid var(--sim17-border); border-left: 4px solid var(--sim17-primary-dark); border-radius: 8px; padding: 24px 28px; margin-top: 4px; }
.sim17-dock .sim17-callout-header{ display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid var(--sim17-border-strong); margin-bottom: 20px; }
.sim17-dock .sim17-callout-icon{ font-size: 24px; color: var(--sim17-primary-dark); line-height: 1; padding-top: 4px; }
.sim17-dock .sim17-callout-title-container{ display: flex; flex-direction: column; gap: 4px; }
.sim17-dock .sim17-callout-title{ font-size: 16px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .6px; }
.sim17-dock .sim17-callout-subtitle{ font-size: 12px; color: var(--sim17-text-muted); font-style: italic; }
.sim17-dock .sim17-callout-body{ display: flex; flex-direction: column; gap: 20px; }
.sim17-dock .sim17-callout-blok{ padding: 16px 20px; background: #fff; border: 1px solid var(--sim17-border); border-radius: 6px; border-left: 3px solid var(--sim17-border-strong); }
.sim17-dock .sim17-callout-blok-synthesis{ background: #fef3c7; border-color: var(--sim17-primary-dark); border-left-color: var(--sim17-primary-dark); border-left-width: 4px; }
.sim17-dock .sim17-callout-blok-header{ font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; color: var(--sim17-primary-dark); text-transform: uppercase; letter-spacing: .9px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--sim17-border-strong); }
.sim17-dock .sim17-callout-blok-synthesis .sim17-callout-blok-header{ border-bottom-color: var(--sim17-primary-dark); }
.sim17-dock .sim17-callout-blok-content{ display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.65; color: var(--sim17-text-primary); }
.sim17-dock .sim17-callout-blok-content p{ margin: 0; }
.sim17-dock .sim17-callout-blok-content strong{ color: var(--sim17-primary-dark); font-weight: 700; }
.sim17-dock .sim17-callout-blok-content ul{ margin: 4px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sim17-dock .sim17-callout-blok-content li{ line-height: 1.55; }
.sim17-dock .sim17-callout-blok-content sub, .sim17-dock .sim17-callout-blok-content sup{ font-size: .75em; font-variant-numeric: tabular-nums; }
.sim17-dock .sim17-callout-injection{ font-style: italic; font-size: 12px; color: var(--sim17-text-secondary); background: var(--sim17-bg-panel); padding: 10px 14px; border-left: 3px solid var(--sim17-text-muted); border-radius: 4px; }
.sim17-dock .sim17-callout-injection-prefix{ font-family: 'Courier New', monospace; font-weight: 700; color: var(--sim17-primary-dark); font-style: normal; margin-right: 4px; }

/* ============================================================
   SIM-18 — Prediksi Pengendapan Q vs Ksp (fondasi SIM18-01 · Amber-Brown Deeper)
   ============================================================ */
.sim18-dock{ --sim18-primary-darkest:#1c0701; --sim18-primary-dark:#451a03; --sim18-primary:#78350f; --sim18-primary-mid:#92400e; --sim18-primary-light:#d97706; --sim18-surface:#fef3c7; --sim18-surface-alt:#fffbeb; --sim18-border:#fbbf24; --sim18-text:#451a03; --sim18-text-muted:#78350f; --sim18-text-inverse:#fffbeb; --sim18-endapan:#b45309; --sim18-endapan-dark:#78350f; --sim18-lcd-bg:#1c1917; --sim18-lcd-text:#10b981; --sim18-accent-featured:#ec4899; position: fixed; inset: 0; width: 100%; background: var(--sim18-surface-alt); display: flex; flex-direction: column; z-index: 131; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim18-dock *, .sim18-dock *::before, .sim18-dock *::after{ box-sizing: border-box; }
body.sim18-open .sim18-dock{ transform: none; }
@media (max-width: 880px){ body.sim18-open{ overflow: hidden; } }
.sim18-dock-header{ display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim18-primary-dark); }
.sim18-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#451a03,#92400e); }
.sim18-ic svg{ width: 20px; height: 20px; }
.sim18-ttl{ flex: 1; min-width: 0; }
.sim18-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sim18-text-muted); margin-bottom: 3px; }
.sim18-dock-header .sim18-title{ margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--sim18-primary-dark); letter-spacing: .01em; }
.sim18-subtitle{ margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sim18-text-muted); }
.sim18-back-btn svg{ width: 15px; height: 15px; }
.sim18-scroll{ flex: 1; overflow-y: auto; }
.sim18-container{ max-width: 1200px; margin: 0 auto; padding: 24px 20px; color: var(--sim18-text); }
.sim18-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.sim18-panel{ background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 20px 24px; }
.sim18-panel-placeholder{ grid-column: span 4; min-height: 120px; background: var(--sim18-surface); border: 2px dashed var(--sim18-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--sim18-text-muted); font-family: 'Courier New', monospace; font-size: 13px; font-style: italic; }
#sim18-panel-callout{ grid-column: span 12; }
@media (max-width: 880px){ .sim18-panel-placeholder{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-panel-placeholder{ grid-column: span 12; } }
.sim18-placeholder-label{ text-align: center; }
/* SIM18-02 · Panel Kontrol (2 slider log stacked + 3 chip preset + label bantu) */
.sim18-dock .sim18-panel-kontrol{ grid-column: span 6; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-panel-header{ display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--sim18-surface-alt); border-bottom: 1px solid var(--sim18-border); }
.sim18-dock .sim18-panel-header-bar{ width: 4px; height: 16px; flex: none; background: var(--sim18-primary-dark); border-radius: 2px; }
.sim18-dock .sim18-panel-header-title{ margin: 0; color: var(--sim18-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sim18-dock .sim18-panel-body{ padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.sim18-dock .sim18-slider-group{ display: flex; flex-direction: column; gap: 6px; }
.sim18-dock .sim18-slider-row-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--sim18-text); }
.sim18-dock .sim18-slider-label{ font-size: 14px; font-weight: 600; }
.sim18-dock .sim18-slider-value{ font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; color: var(--sim18-primary-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim18-dock .sim18-slider-track-container{ display: flex; flex-direction: column; gap: 4px; }
.sim18-dock .sim18-slider{ display: block; width: 100%; height: 8px; margin: 0; border-radius: 4px; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; background: linear-gradient(to right,#bbf7d0 0%,#bbf7d0 25%,#fef08a 25%,#fef08a 75%,#fecaca 75%,#fecaca 100%); }
.sim18-dock .sim18-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sim18-primary-dark); border: 2px solid #fffbeb; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sim18-dock .sim18-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: var(--sim18-primary-dark); border: 2px solid #fffbeb; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sim18-dock .sim18-slider:focus-visible{ outline: 2px solid var(--sim18-primary-dark); outline-offset: 4px; }
.sim18-dock .sim18-slider-ticks{ display: flex; justify-content: space-between; padding: 0 2px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--sim18-text-muted); }
.sim18-dock .sim18-slider-tick{ flex: 0 0 auto; }
.sim18-dock .sim18-preset-group{ display: flex; flex-direction: column; gap: 8px; }
.sim18-dock .sim18-preset-label{ font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sim18-text-muted); }
.sim18-dock .sim18-preset-chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.sim18-dock .sim18-chip{ flex: 1 1 auto; min-width: 84px; padding: 8px 10px; background: #fff; border: 1px solid #d1d5db; border-radius: 20px; cursor: pointer; font-family: inherit; transition: background-color .15s ease, border-color .15s ease; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sim18-dock .sim18-chip:hover{ background: var(--sim18-surface-alt); border-color: var(--sim18-border); }
.sim18-dock .sim18-chip-title{ font-size: 13px; font-weight: 700; color: var(--sim18-text); }
.sim18-dock .sim18-chip-subtitle{ font-family: 'Courier New', monospace; font-size: 11px; color: var(--sim18-text-muted); }
.sim18-dock .sim18-chip-active.sim18-chip-green{ background: #dcfce7; border: 2px solid #22c55e; }
.sim18-dock .sim18-chip-active.sim18-chip-yellow{ background: #fef08a; border: 2px solid #eab308; }
.sim18-dock .sim18-chip-active.sim18-chip-red{ background: #fee2e2; border: 2px solid #ef4444; }
.sim18-dock .sim18-info-box{ padding: 12px 16px; background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.sim18-dock .sim18-info-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.sim18-dock .sim18-info-label{ color: var(--sim18-text); font-weight: 600; }
.sim18-dock .sim18-info-value{ font-family: 'Courier New', monospace; font-weight: 700; color: var(--sim18-primary-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim18-dock .sim18-info-separator{ height: 0; border-top: 1px dashed #d1d5db; }
.sim18-dock .sim18-zone-badge{ display: inline-block; padding: 4px 12px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; letter-spacing: .05em; border: 2px solid; white-space: nowrap; }
.sim18-dock .sim18-zone-badge[data-zone="green"]{ background: #dcfce7; color: #14532d; border-color: #22c55e; }
.sim18-dock .sim18-zone-badge[data-zone="yellow"]{ background: #fef08a; color: #713f12; border-color: #eab308; }
.sim18-dock .sim18-zone-badge[data-zone="red"]{ background: #fee2e2; color: #7f1d1d; border-color: #ef4444; }
@media (max-width: 880px){ .sim18-dock .sim18-panel-kontrol{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-kontrol{ grid-column: span 12; } }

/* SIM18-03 · Panel Makroskopik (beaker 100 mL + larutan kuning adaptif + endapan tri-level) */
.sim18-dock .sim18-panel-makro{ grid-column: span 6; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-makro-body{ padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sim18-dock .sim18-makro-label{ font-family: 'Courier New', monospace; font-size: 13px; font-weight: 600; color: var(--sim18-text-muted); text-align: center; }
.sim18-dock .sim18-makro-beaker-container{ display: flex; justify-content: center; align-items: flex-end; width: 100%; }
.sim18-dock .sim18-makro-beaker-svg{ width: 100%; max-width: 260px; height: auto; }
.sim18-dock .sim18-makro-solution-fill{ transition: fill-opacity .3s ease; }
.sim18-dock .sim18-makro-endapan path{ transition: opacity .3s ease; }
.sim18-dock .sim18-makro-endapan[data-zone="green"] path{ opacity: 0; }
.sim18-dock .sim18-makro-endapan[data-zone="yellow"] path, .sim18-dock .sim18-makro-endapan[data-zone="red"] path{ opacity: 1; }
@media (max-width: 880px){ .sim18-dock .sim18-panel-makro{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-makro{ grid-column: span 12; } }

/* SIM18-04 · Panel Simbolik Bagian 1 (formalisme statis · 5 blok) */
.sim18-dock .sim18-panel-simbolik-1{ grid-column: span 4; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-simbolik-1-body{ padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.sim18-dock .sim18-simbolik-block{ display: flex; flex-direction: column; gap: 4px; }
.sim18-dock .sim18-simbolik-label{ font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sim18-text-muted); }
.sim18-dock .sim18-simbolik-equation{ font-family: 'Times New Roman', serif; font-size: 16px; color: var(--sim18-primary-dark); padding: 10px 12px; background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; text-align: center; line-height: 1.6; }
.sim18-dock .sim18-simbolik-phase{ font-size: 12px; font-style: italic; color: var(--sim18-text-muted); }
.sim18-dock .sim18-simbolik-formula{ font-family: 'Times New Roman', serif; font-size: 15px; color: var(--sim18-primary-dark); padding: 8px 12px; background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; text-align: center; }
.sim18-dock .sim18-simbolik-annotation{ font-size: 11px; font-style: italic; color: var(--sim18-text-muted); text-align: center; margin-top: 2px; text-wrap: pretty; }
.sim18-dock .sim18-simbolik-value-featured{ font-family: 'Times New Roman', serif; font-size: 18px; font-weight: 700; color: #ec4899; padding: 10px 12px; background: #fff; border: 2px solid #ec4899; border-radius: 6px; text-align: center; }
.sim18-dock .sim18-kriteria-table{ width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; overflow: hidden; font-size: 12px; }
.sim18-dock .sim18-kriteria-table thead{ background: var(--sim18-surface-alt); }
.sim18-dock .sim18-kriteria-table th{ padding: 8px 8px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sim18-text-muted); text-align: center; border-bottom: 1px solid var(--sim18-border); }
.sim18-dock .sim18-kriteria-table td{ padding: 8px; color: var(--sim18-text); border-bottom: 1px solid var(--sim18-surface); text-wrap: pretty; }
.sim18-dock .sim18-kriteria-table tbody tr:last-child td{ border-bottom: none; }
.sim18-dock .sim18-kriteria-condition{ font-family: 'Times New Roman', serif; font-weight: 700; color: var(--sim18-primary-dark); text-align: center; white-space: nowrap; }
.sim18-dock .sim18-kriteria-zone{ text-align: center; font-weight: 700; font-size: 11px; letter-spacing: .03em; }
.sim18-dock .sim18-kriteria-zone[data-zone="green"]{ background: #dcfce7; color: #14532d; }
.sim18-dock .sim18-kriteria-zone[data-zone="yellow"]{ background: #fef9c3; color: #713f12; }
.sim18-dock .sim18-kriteria-zone[data-zone="red"]{ background: #fee2e2; color: #7f1d1d; }
.sim18-dock .sim18-kriteria-visual{ font-style: italic; color: var(--sim18-text-muted); }
@media (max-width: 880px){ .sim18-dock .sim18-panel-simbolik-1{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-simbolik-1{ grid-column: span 12; } }

/* SIM18-05 · Panel Simbolik Bagian 2 (4-layer + bar gauge cornerstone) */
.sim18-dock .sim18-panel-simbolik-2{ grid-column: span 4; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-simbolik-2-body{ padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sim18-dock .sim18-simbolik-2-layer{ display: flex; flex-direction: column; gap: 4px; }
.sim18-dock .sim18-simbolik-2-divider{ font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sim18-primary-dark); padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--sim18-border); }
.sim18-dock .sim18-simbolik-2-ratio{ font-family: 'Times New Roman', serif; font-size: 20px; font-weight: 700; color: var(--sim18-primary-dark); font-variant-numeric: tabular-nums; }
.sim18-dock .sim18-simbolik-2-layer-label{ font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sim18-text-muted); }
.sim18-dock .sim18-simbolik-2-formula-abstract{ font-family: 'Times New Roman', serif; font-size: 14px; color: var(--sim18-text-muted); padding: 6px 10px; background: var(--sim18-surface-alt); border-radius: 4px; text-align: center; }
.sim18-dock .sim18-simbolik-2-substitution{ font-family: 'Times New Roman', serif; font-size: 15px; color: var(--sim18-primary-dark); padding: 8px 12px; background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; text-align: center; text-wrap: pretty; }
.sim18-dock .sim18-simbolik-2-featured{ font-family: 'Times New Roman', serif; font-size: clamp(24px, 5vw, 32px); font-weight: 700; color: #ec4899; padding: 14px 12px; background: #fff; border: 2px solid #ec4899; border-radius: 8px; text-align: center; line-height: 1.2; white-space: nowrap; }
.sim18-dock .sim18-bargauge-container{ display: flex; justify-content: center; align-items: center; width: 100%; padding: 8px 0; }
.sim18-dock .sim18-bargauge-svg{ width: 100%; max-width: 320px; height: auto; }
.sim18-dock #sim18-bargauge-bar{ transition: fill .3s ease, y .3s ease, height .3s ease; }
.sim18-dock #sim18-bargauge-bar-label{ transition: fill .3s ease, y .3s ease; }
@media (max-width: 880px){ .sim18-dock .sim18-panel-simbolik-2{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-simbolik-2{ grid-column: span 12; } }

/* SIM18-06 fix · jeda animasi CSS simulasi lain saat dock SIM-18 terbuka */
body.sim18-open > *:not(.sim18-dock), body.sim18-open > *:not(.sim18-dock) *{ animation-play-state: paused !important; }

/* SIM18-06 · Panel Sub-mikroskopik Terpadu (20 Ag+ / 10 CrO4 2- adaptif + kristal per zona) */
.sim18-dock .sim18-panel-submikro{ grid-column: span 4; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-submikro-body{ padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sim18-dock .sim18-submikro-legend{ display: flex; justify-content: center; gap: 14px; padding: 8px; background: var(--sim18-surface-alt); border-radius: 6px; flex-wrap: wrap; }
.sim18-dock .sim18-submikro-legend-item{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sim18-text); }
.sim18-dock .sim18-submikro-legend-dot{ display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.sim18-dock .sim18-submikro-legend-square{ display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); }
.sim18-dock .sim18-submikro-legend-ag{ background: #3b82f6; }
.sim18-dock .sim18-submikro-legend-cro4{ background: #f59e0b; }
.sim18-dock .sim18-submikro-legend-kristal{ background: #b45309; }
.sim18-dock .sim18-submikro-legend-label{ font-family: 'Times New Roman', serif; font-weight: 600; }
.sim18-dock .sim18-submikro-viewport-container{ display: flex; justify-content: center; width: 100%; }
.sim18-dock .sim18-submikro-viewport-svg{ width: 100%; max-width: 400px; height: auto; border: 1px solid var(--sim18-border); border-radius: 4px; }
@media (max-width: 880px){ .sim18-dock .sim18-panel-submikro{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-submikro{ grid-column: span 12; } }

/* SIM18-07 · Panel Meter Digital (2 LCD emerald + LED zone box) */
.sim18-dock .sim18-panel-meter{ grid-column: span 4; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; align-self: start; }
.sim18-dock .sim18-meter-body{ padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.sim18-dock .sim18-meter-group{ display: flex; flex-direction: column; gap: 6px; }
.sim18-dock .sim18-meter-label{ font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sim18-text-muted); }
.sim18-dock .sim18-meter-lcd{ background: #0f172a; color: #10b981; font-family: 'Courier New', 'Consolas', 'Monaco', monospace; font-size: 24px; font-weight: 700; padding: 14px 18px; border: 2px solid #059669; border-radius: 6px; text-align: center; letter-spacing: .05em; box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 0 4px rgba(16,185,129,.2); transition: color .2s ease; }
.sim18-dock .sim18-meter-led-zone{ padding: 12px 18px; border-radius: 6px; font-family: 'Courier New', 'Consolas', 'Monaco', monospace; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: .1em; border: 2px solid; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sim18-dock .sim18-meter-led-zone[data-zone="green"]{ background: #14532d; color: #dcfce7; border-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.5), inset 0 2px 4px rgba(0,0,0,.3); }
.sim18-dock .sim18-meter-led-zone[data-zone="yellow"]{ background: #713f12; color: #fef9c3; border-color: #eab308; box-shadow: 0 0 8px rgba(234,179,8,.5), inset 0 2px 4px rgba(0,0,0,.3); }
.sim18-dock .sim18-meter-led-zone[data-zone="red"]{ background: #7f1d1d; color: #fee2e2; border-color: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.5), inset 0 2px 4px rgba(0,0,0,.3); }
@media (max-width: 880px){ .sim18-dock .sim18-panel-meter{ grid-column: span 6; } }
@media (max-width: 640px){ .sim18-dock .sim18-panel-meter{ grid-column: span 12; } }

/* SIM18-09 · Callout Mekanisme Trilevel (statis · 4 blok + 5 injection) */
.sim18-dock .sim18-panel-callout{ grid-column: span 12; background: var(--sim18-surface); border: 1px solid var(--sim18-border); border-radius: 8px; padding: 0; overflow: hidden; }
.sim18-dock .sim18-callout-body{ padding: 16px; }
.sim18-dock .sim18-callout-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim18-dock .sim18-callout-block{ background: #fff; border: 1px solid var(--sim18-border); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sim18-dock .sim18-callout-block-header{ display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sim18-border); }
.sim18-dock .sim18-callout-block-icon{ font-size: 20px; line-height: 1; color: var(--sim18-primary-dark); }
.sim18-dock .sim18-callout-block-label{ font-size: 12px; font-weight: 800; color: var(--sim18-primary-dark); letter-spacing: .05em; text-transform: uppercase; }
.sim18-dock .sim18-callout-block-content{ display: flex; flex-direction: column; gap: 8px; }
.sim18-dock .sim18-callout-block-content p{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--sim18-text); text-wrap: pretty; }
.sim18-dock .sim18-callout-block-content strong{ color: var(--sim18-primary-dark); font-weight: 700; }
.sim18-dock .sim18-callout-block-content em{ font-style: italic; color: var(--sim18-text-muted); }
.sim18-dock .sim18-callout-block-content p.sim18-callout-injection{ background: var(--sim18-surface-alt); border-left: 3px solid var(--sim18-primary-light); padding: 8px 12px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.sim18-dock .sim18-callout-injection-label{ display: inline-block; font-weight: 800; color: var(--sim18-primary-dark); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; margin-right: 4px; }
@media (max-width: 900px){ .sim18-dock .sim18-callout-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   SIM-19 — Pengendapan Bertahap Halida-Perak (fondasi SIM19-01 · Slate-Teal)
   ============================================================ */
.sim19-dock{ --sim19-primary-950:#020617; --sim19-primary-900:#0f172a; --sim19-primary-800:#1e293b; --sim19-primary-700:#334155; --sim19-accent-teal:#0d9488; --sim19-accent-teal-light:#14b8a6; --sim19-surface-light:#f1f5f9; --sim19-surface:#e2e8f0; --sim19-border:#cbd5e1; --sim19-text-primary:#f8fafc; --sim19-text-secondary:#64748b; --sim19-text-dark:#0f172a; position: fixed; inset: 0; width: 100%; background: var(--sim19-surface-light); display: flex; flex-direction: column; z-index: 132; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim19-dock *, .sim19-dock *::before, .sim19-dock *::after{ box-sizing: border-box; }
body.sim19-open .sim19-dock{ transform: none; }
@media (max-width: 880px){ body.sim19-open{ overflow: hidden; } }
.sim19-dock-header{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim19-accent-teal); }
.sim19-back-btn{ align-self: flex-end; }
.sim19-head-row{ display: flex; align-items: center; gap: 14px; width: 100%; }
.sim19-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#0f172a,#0d9488); }
.sim19-ic svg{ width: 20px; height: 20px; }
.sim19-ttl{ flex: 1; min-width: 0; }
.sim19-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sim19-text-secondary); margin-bottom: 3px; }
.sim19-dock-header .sim19-title{ margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--sim19-primary-900); letter-spacing: .01em; }
.sim19-subtitle{ margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sim19-text-secondary); }
.sim19-back-btn svg{ width: 15px; height: 15px; }
.sim19-scroll{ flex: 1; overflow-y: auto; }
.sim19-container{ max-width: 1200px; margin: 0 auto; padding: 24px 20px; color: var(--sim19-text-dark); }
/* D-SIM19 · restrukturisasi 4 baris (10-col areas). Baris1: Kontrol 60% | Meter 40%; Baris2: Number Line full; Baris3: Makro 50% | Sub-mikro 50%; Baris4: Simbolik-1 50% | Simbolik-2 50% */
.sim19-panels-grid{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; align-items: start; grid-template-areas: "kontrol kontrol kontrol kontrol kontrol kontrol meter meter meter meter" "nline nline nline nline nline nline nline nline nline nline" "makro makro makro makro makro submikro submikro submikro submikro submikro" "simb1 simb1 simb1 simb1 simb1 simb2 simb2 simb2 simb2 simb2"; }
.sim19-panel-kontrol{ grid-area: kontrol; }
.sim19-panel-meter{ grid-area: meter; }
.sim19-panel-numberline{ grid-area: nline; min-height: auto; }
.sim19-panel-makro{ grid-area: makro; }
.sim19-panel-submikro{ grid-area: submikro; }
.sim19-panel-simbolik-1{ grid-area: simb1; }
.sim19-panel-simbolik-2{ grid-area: simb2; }
.sim19-panel-numberline .sim19-simbolik2-numberline-svg{ max-height: 240px; max-width: 900px; margin: 8px auto 0; display: block; }
.sim19-panel{ background: #fff; border: 1px solid var(--sim19-border); border-radius: 8px; padding: 20px; min-height: 160px; }
.sim19-panel-callout{ grid-column: span 2; }
.sim19-panel h2{ font-size: 16px; color: var(--sim19-primary-800); margin: 0 0 8px; border-bottom: 1px solid var(--sim19-border); padding-bottom: 6px; }
.sim19-panel-placeholder{ font-size: 13px; color: var(--sim19-text-secondary); font-style: italic; margin: 0; }
@media (max-width: 880px){ .sim19-panels-grid{ grid-template-columns: 1fr; grid-template-areas: none; } .sim19-panel-kontrol, .sim19-panel-meter, .sim19-panel-numberline, .sim19-panel-makro, .sim19-panel-submikro, .sim19-panel-simbolik-1, .sim19-panel-simbolik-2{ grid-area: auto; } .sim19-panel-callout{ grid-column: span 1; } }

/* SIM-19 · Panel Kontrol (SIM19-02) */
.sim19-panel-kontrol{ min-height: 340px; }
.sim19-kontrol-slider-group{ margin-top: 12px; }
.sim19-kontrol-slider-header{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.sim19-kontrol-slider-label{ font-size: 13px; color: var(--sim19-primary-800); font-weight: 500; }
.sim19-kontrol-value-display{ font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; color: var(--sim19-accent-teal-light); background: var(--sim19-primary-900); padding: 4px 10px; border-radius: 4px; min-width: 140px; text-align: right; }
.sim19-kontrol-slider-wrapper{ position: relative; padding-bottom: 24px; }
.sim19-kontrol-slider{ width: 100%; height: 8px; border-radius: 4px; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; border: 1px solid var(--sim19-border); background: linear-gradient(to right,#dcfce7 0%,#dcfce7 30%,#fef9c3 30%,#fef9c3 60%,#fed7aa 60%,#fed7aa 90%,#fee2e2 90%,#fee2e2 100%); }
.sim19-kontrol-slider::-webkit-slider-thumb{ appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sim19-accent-teal); border: 2px solid var(--sim19-primary-900); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sim19-kontrol-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: var(--sim19-accent-teal); border: 2px solid var(--sim19-primary-900); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sim19-kontrol-slider-ticks{ position: absolute; top: 14px; left: 0; right: 0; height: 20px; }
.sim19-kontrol-tick{ position: absolute; transform: translateX(-50%); font-family: 'Courier New', monospace; font-size: 10px; color: var(--sim19-text-secondary); white-space: nowrap; }
.sim19-kontrol-chip-group{ margin-top: 16px; }
.sim19-kontrol-chip-label{ font-size: 12px; color: var(--sim19-text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.sim19-kontrol-chip-row{ display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.sim19-kontrol-chip{ background: var(--sim19-surface); border: 1px solid var(--sim19-border); border-radius: 6px; padding: 10px 8px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; text-align: left; position: relative; font: inherit; }
.sim19-kontrol-chip:hover{ background: #fff; border-color: var(--sim19-accent-teal); }
.sim19-kontrol-chip-title{ font-size: 11px; font-weight: 600; color: var(--sim19-primary-800); margin-bottom: 4px; line-height: 1.25; }
.sim19-kontrol-chip-value{ font-family: 'Courier New', monospace; font-size: 10px; color: var(--sim19-text-secondary); }
.sim19-kontrol-chip-active{ background: var(--sim19-accent-teal); border-color: var(--sim19-primary-900); box-shadow: 0 2px 6px rgba(13,148,136,.3); }
.sim19-kontrol-chip-active:hover{ background: var(--sim19-accent-teal); }
.sim19-kontrol-chip-active .sim19-kontrol-chip-title{ color: #fff; }
.sim19-kontrol-chip-active .sim19-kontrol-chip-value{ color: rgba(255,255,255,.85); }
.sim19-kontrol-chip-featured{ border: 2px solid var(--sim19-accent-teal-light); }
.sim19-kontrol-chip-badge{ position: absolute; top: -8px; right: 6px; background: var(--sim19-accent-teal-light); color: #fff; font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; }
.sim19-kontrol-info-box{ margin-top: 16px; background: var(--sim19-surface-light); border-left: 3px solid var(--sim19-accent-teal); padding: 12px 14px; border-radius: 4px; }
.sim19-kontrol-info-title{ font-size: 12px; font-weight: 700; color: var(--sim19-accent-teal); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sim19-kontrol-info-body{ font-size: 12px; line-height: 1.5; color: var(--sim19-primary-800); }
.sim19-kontrol-info-body strong{ color: var(--sim19-primary-900); font-weight: 600; }
@media (max-width: 880px){ .sim19-kontrol-chip-row{ grid-template-columns: repeat(2,1fr); row-gap: 16px; } }

/* SIM-19 · Panel Makroskopik (SIM19-03) */
.sim19-panel-makro{ min-height: 500px; display: flex; flex-direction: column; }
.sim19-makro-caption{ font-family: 'Courier New', monospace; font-size: 12px; color: var(--sim19-primary-800); text-align: center; margin: 8px 0 12px; font-style: italic; }
.sim19-makro-beaker-wrapper{ flex: 1; display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.sim19-makro-beaker-svg{ max-width: 100%; max-height: 380px; height: auto; }
.sim19-makro-legend{ display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sim19-border); }
.sim19-makro-legend-item{ display: flex; align-items: center; gap: 6px; }
.sim19-makro-legend-swatch{ display: inline-block; width: 14px; height: 14px; border-radius: 2px; flex: none; }
.sim19-makro-legend-label{ font-size: 11px; color: var(--sim19-primary-800); font-family: 'Courier New', monospace; }

/* SIM-19 · Panel Simbolik Bagian 1 (SIM19-04) */
.sim19-panel-simbolik-1{ min-height: 640px; display: flex; flex-direction: column; }
.sim19-simbolik1-section{ margin-top: 14px; padding-left: 10px; border-left: 2px solid var(--sim19-accent-teal); }
.sim19-simbolik1-section-header{ font-size: 12px; font-weight: 700; color: var(--sim19-primary-800); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sim19-simbolik1-box{ background: var(--sim19-surface-light); border: 1px solid var(--sim19-border); border-radius: 6px; padding: 10px 14px; text-align: center; }
.sim19-simbolik1-equation{ font-family: 'Times New Roman', Times, serif; font-size: 15px; color: var(--sim19-primary-900); padding: 4px 0; line-height: 1.5; }
.sim19-simbolik1-state{ font-size: 12px; font-style: italic; color: var(--sim19-text-secondary); }
.sim19-simbolik1-formula{ font-family: 'Times New Roman', Times, serif; font-size: 17px; color: var(--sim19-primary-900); padding: 6px 0; font-weight: 500; }
.sim19-simbolik1-note{ font-size: 11px; color: var(--sim19-text-secondary); font-style: italic; margin-top: 6px; line-height: 1.5; }
.sim19-simbolik1-note strong{ color: var(--sim19-primary-800); font-style: normal; font-weight: 600; }
.sim19-simbolik1-ksp-table, .sim19-simbolik1-kriteria-table{ width: 100%; border-collapse: collapse; margin: 4px 0; }
.sim19-simbolik1-ksp-table thead th, .sim19-simbolik1-kriteria-table thead th{ background: var(--sim19-primary-800); color: #fff; font-size: 11px; padding: 6px 10px; text-align: left; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.sim19-simbolik1-ksp-table tbody td{ padding: 8px 10px; border-bottom: 1px solid var(--sim19-border); background: #fff; }
.sim19-simbolik1-ksp-name{ font-family: 'Times New Roman', Times, serif; font-size: 14px; font-weight: 600; color: var(--sim19-primary-900); width: 25%; }
.sim19-simbolik1-ksp-value{ font-family: 'Times New Roman', Times, serif; font-size: 14px; color: #ec4899; font-weight: 600; }
.sim19-simbolik1-kriteria-table tbody td{ padding: 8px 10px; border-bottom: 1px solid var(--sim19-border); background: #fff; font-size: 12px; color: var(--sim19-primary-900); }
.sim19-simbolik1-kondisi{ font-family: 'Times New Roman', Times, serif; font-size: 14px; font-weight: 600; width: 20%; }
.sim19-simbolik1-zona{ text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; width: 25%; }
.sim19-simbolik1-zona-takjenuh{ background: #dcfce7 !important; color: #14532d; }
.sim19-simbolik1-zona-jenuh{ background: #fef9c3 !important; color: #713f12; }
.sim19-simbolik1-zona-superjenuh{ background: #fee2e2 !important; color: #7f1d1d; }

/* SIM-19 · Panel Simbolik Bagian 2 (SIM19-05) */
.sim19-panel-simbolik-2{ min-height: 360px; display: flex; flex-direction: column; }
.sim19-simbolik2-layer{ margin-top: 14px; padding: 10px 14px; background: var(--sim19-surface-light); border-left: 2px solid var(--sim19-accent-teal); border-radius: 4px; }
.sim19-simbolik2-layer-label{ font-size: 11px; font-weight: 700; color: var(--sim19-primary-800); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sim19-simbolik2-l1-formula{ font-family: 'Times New Roman', Times, serif; font-size: 18px; color: var(--sim19-primary-900); text-align: center; padding: 8px 0; font-weight: 500; }
.sim19-simbolik2-l1-note{ font-size: 11px; color: var(--sim19-text-secondary); font-style: italic; text-align: center; margin-top: 4px; }
.sim19-simbolik2-l2-body{ display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.sim19-simbolik2-l2-note{ font-size: 11px; color: var(--sim19-text-secondary); font-style: italic; line-height: 1.5; margin-top: 2px; }
.sim19-simbolik2-l2-row{ font-family: 'Times New Roman', Times, serif; font-size: 14px; color: var(--sim19-primary-900); padding: 4px 8px; background: #fff; border-radius: 3px; border: 1px solid var(--sim19-border); }
.sim19-simbolik2-l3-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 8px 0; }
.sim19-simbolik2-l3-col{ text-align: center; padding: 8px 4px; background: #fff; border: 1px solid var(--sim19-border); border-radius: 4px; }
.sim19-simbolik2-l3-name{ font-family: 'Times New Roman', Times, serif; font-size: 13px; color: var(--sim19-primary-800); font-weight: 600; margin-bottom: 4px; }
.sim19-simbolik2-l3-value{ font-family: 'Times New Roman', Times, serif; font-size: 26px; font-weight: 700; color: #ec4899; line-height: 1.1; }
.sim19-simbolik2-numberline-svg{ width: 100%; max-height: 200px; margin-top: 4px; background: #fff; border-radius: 4px; padding: 4px; }
@media (max-width: 1080px){ .sim19-simbolik2-l3-value{ font-size: 21px; } }

/* SIM-19 · Panel Sub-mikroskopik (SIM19-06) */
.sim19-panel-submikro{ min-height: 560px; display: flex; flex-direction: column; }
.sim19-submikro-caption{ font-family: 'Courier New', monospace; font-size: 11px; color: var(--sim19-primary-800); text-align: center; margin: 8px 0 10px; font-style: italic; }
.sim19-submikro-svg-wrapper{ flex: 1; display: flex; justify-content: center; align-items: center; padding: 4px 0; }
.sim19-submikro-svg{ max-width: 100%; max-height: 400px; height: auto; }
.sim19-submikro-legend{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sim19-border); }
.sim19-submikro-legend-title{ font-size: 10px; color: var(--sim19-text-secondary); text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 4px; }
.sim19-submikro-legend-row{ display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; }
.sim19-submikro-legend-item{ display: flex; align-items: center; gap: 5px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--sim19-primary-800); }
.sim19-submikro-legend-dot{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.sim19-submikro-legend-pair{ display: inline-flex; align-items: center; }

/* SIM-19 · Panel Meter Digital (SIM19-07) */
.sim19-panel-meter{ min-height: 420px; display: flex; flex-direction: column; }
.sim19-meter-lcd-section{ margin-top: 14px; }
.sim19-meter-lcd-label{ font-size: 11px; font-weight: 700; color: var(--sim19-primary-800); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; text-align: center; }
.sim19-meter-lcd-wrapper{ background: var(--sim19-primary-900); border: 2px solid var(--sim19-accent-teal); border-radius: 6px; padding: 20px 12px; box-shadow: inset 0 2px 8px rgba(0,0,0,.4); }
.sim19-meter-lcd-display{ font-family: 'Courier New', monospace; font-size: 36px; font-weight: bold; color: #10b981; text-align: center; letter-spacing: 1px; text-shadow: 0 0 8px rgba(16,185,129,.4); line-height: 1; }
.sim19-meter-status-section{ margin-top: 20px; }
.sim19-meter-status-label{ font-size: 11px; font-weight: 700; color: var(--sim19-primary-800); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.sim19-meter-status-row{ display: grid; grid-template-columns: 60px 1fr 90px; gap: 10px; align-items: center; margin-bottom: 8px; padding: 6px 8px; background: #fff; border: 1px solid var(--sim19-border); border-radius: 4px; }
.sim19-meter-status-name{ font-family: 'Times New Roman', Times, serif; font-size: 15px; font-weight: 600; color: var(--sim19-primary-900); }
.sim19-meter-status-bar{ display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; height: 22px; }
.sim19-meter-bar-segment{ border-radius: 2px; transition: background-color .15s; }
.sim19-meter-bar-segment-empty{ background: #e2e8f0; }
.sim19-meter-bar-segment-takjenuh{ background: #22c55e; }
.sim19-meter-bar-segment-jenuh{ background: #eab308; }
.sim19-meter-bar-segment-superjenuh{ background: #ef4444; }
.sim19-meter-status-badge{ font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; padding: 4px 6px; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: .5px; }
.sim19-meter-badge-takjenuh{ background: #dcfce7; color: #14532d; }
.sim19-meter-badge-jenuh{ background: #fef9c3; color: #713f12; }
.sim19-meter-badge-superjenuh{ background: #fee2e2; color: #7f1d1d; }
.sim19-meter-status-note{ font-size: 10px; color: var(--sim19-text-secondary); font-style: italic; margin-top: 8px; text-align: center; }

/* SIM-19 · Panel Callout Mekanisme (SIM19-09) */
.sim19-panel-callout{ grid-column: 1 / -1; min-height: auto; }
.sim19-callout-intro{ font-size: 12px; line-height: 1.6; color: var(--sim19-primary-800); padding: 12px 14px; background: var(--sim19-surface-light); border-left: 3px solid var(--sim19-accent-teal); border-radius: 4px; margin: 12px 0 16px; }
.sim19-callout-intro strong{ color: var(--sim19-primary-900); font-weight: 600; }
.sim19-callout-blok{ margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--sim19-border); border-left: 3px solid var(--sim19-accent-teal); border-radius: 4px; }
.sim19-callout-blok-header{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sim19-border); }
.sim19-callout-blok-num{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sim19-accent-teal); color: #fff; font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; flex-shrink: 0; }
.sim19-callout-blok-title{ font-size: 13px; font-weight: 700; color: var(--sim19-primary-800); text-transform: uppercase; letter-spacing: .5px; }
.sim19-callout-blok-body{ font-size: 12px; line-height: 1.6; color: var(--sim19-primary-800); }
.sim19-callout-blok-body p{ margin: 0 0 8px 0; }
.sim19-callout-blok-body p:last-child{ margin-bottom: 0; }
.sim19-callout-blok-body strong{ color: var(--sim19-primary-900); font-weight: 600; }
.sim19-callout-list{ margin: 0; padding-left: 20px; list-style-type: disc; }
.sim19-callout-list li{ margin-bottom: 10px; color: var(--sim19-primary-800); }
.sim19-callout-list li:last-child{ margin-bottom: 0; }
.sim19-callout-list li strong{ color: var(--sim19-primary-900); font-weight: 600; }

/* ============================================================
   SIM-20 — Pembentukan Ion Kompleks Cu(NH₃)₄²⁺ (fondasi SIM20-01 · Amber-Copper)
   ============================================================ */
.sim20-dock{ --sim20-primary-dark:#92400e; --sim20-primary:#b45309; --sim20-accent:#f59e0b; --sim20-accent-subtle:#fde68a; --sim20-surface-panel:#fffbeb; --sim20-surface-canvas:#ffffff; --sim20-border:#fed7aa; --sim20-text-primary:#451a03; --sim20-text-secondary:#78350f; position: fixed; inset: 0; width: 100%; background: var(--sim20-surface-panel); display: flex; flex-direction: column; z-index: 132; transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sim20-dock *, .sim20-dock *::before, .sim20-dock *::after{ box-sizing: border-box; }
body.sim20-open .sim20-dock{ transform: none; }
@media (max-width: 880px){ body.sim20-open{ overflow: hidden; } }
.sim20-dock-header{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: none; padding: 14px 22px; background: #fff; border-bottom: 3px solid var(--sim20-accent); }
.sim20-back-btn{ align-self: flex-end; background: var(--sim20-primary); border-color: var(--sim20-primary); }
.sim20-back-btn:hover{ background: var(--sim20-primary-dark); border-color: var(--sim20-primary-dark); }
.sim20-back-btn svg{ width: 15px; height: 15px; }
.sim20-head-row{ display: flex; align-items: center; gap: 14px; width: 100%; }
.sim20-ic{ width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,#92400e,#f59e0b); }
.sim20-ic svg{ width: 20px; height: 20px; }
.sim20-ttl{ flex: 1; min-width: 0; }
.sim20-crumb{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sim20-text-secondary); margin-bottom: 3px; }
.sim20-dock-header .sim20-title{ margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--sim20-text-primary); letter-spacing: .01em; }
.sim20-subtitle{ margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sim20-text-secondary); }
.sim20-scroll{ flex: 1; overflow-y: auto; }
.sim20-container{ max-width: 1200px; margin: 0 auto; padding: 24px 20px; color: var(--sim20-text-primary); }
.sim20-panels-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim20-panel{ background: #fff; border: 1px solid var(--sim20-border); border-radius: 8px; padding: 20px; min-height: 160px; }
.sim20-panel-kontrol, .sim20-panel-meter, .sim20-callout{ grid-column: 1 / -1; }
.sim20-row1{ display: grid; grid-template-columns: 60% 40%; gap: 16px; align-items: start; margin-bottom: 16px; }
.sim20-row1 .sim20-panel-kontrol, .sim20-row1 .sim20-panel-meter{ grid-column: auto; }
.sim20-row1 .sim20-meter-container{ grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 880px){ .sim20-row1{ grid-template-columns: 1fr; } }
.sim20-panel h2{ font-size: 16px; color: var(--sim20-primary-dark); margin: 0 0 8px; border-bottom: 1px solid var(--sim20-border); padding-bottom: 6px; }
.sim20-panel-placeholder{ font-size: 13px; color: var(--sim20-text-secondary); font-style: italic; margin: 0; }
@media (max-width: 880px){ .sim20-panels-grid{ grid-template-columns: 1fr; } }
/* Panel Kontrol */
.sim20-kontrol-slider-group{ margin-top: 6px; }
.sim20-kontrol-slider-header{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sim20-kontrol-slider-label{ font-size: 13px; font-weight: 600; color: var(--sim20-text-secondary); }
.sim20-kontrol-value-display{ font-family: "Courier New", ui-monospace, monospace; font-size: 15px; font-weight: 700; color: var(--sim20-primary-dark); background: var(--sim20-surface-panel); border: 1px solid var(--sim20-border); border-radius: 6px; padding: 3px 10px; }
.sim20-kontrol-slider-wrapper{ padding: 0 2px; position: relative; margin-top: 24px; }
.sim20-slider-zoom-band{ position: absolute; left: 50%; width: 25%; top: 3px; transform: translateY(-50%); height: 10px; background: #fef3c7; border-left: 2px solid #f59e0b; border-right: 2px solid #f59e0b; pointer-events: none; z-index: 0; }
.sim20-slider-zoom-label{ position: absolute; left: 62.5%; top: -16px; transform: translateX(-50%); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #92400e; font-weight: 600; pointer-events: none; white-space: nowrap; }
.sim20-kontrol-slider{ -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg,var(--sim20-accent-subtle),var(--sim20-accent)); outline: none; }
.sim20-kontrol-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sim20-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.sim20-kontrol-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: var(--sim20-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.sim20-kontrol-slider-ticks{ position: relative; height: 18px; margin-top: 6px; }
.sim20-kontrol-tick{ position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--sim20-text-secondary); white-space: nowrap; }
.sim20-kontrol-chip-group{ margin-top: 22px; }
.sim20-kontrol-chip-label{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sim20-text-secondary); margin-bottom: 8px; }
.sim20-kontrol-chip-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sim20-chip-preset{ position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--sim20-border); background: #f8fafc; color: var(--sim20-text-primary); cursor: pointer; transition: all .16s ease; }
.sim20-chip-preset{ transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease; }
.sim20-chip-preset:hover{ border-color: var(--sim20-accent); background: var(--sim20-surface-panel); box-shadow: 0 2px 8px rgba(245,158,11,.3); transform: translateY(-1px); }
.sim20-chip-preset:focus{ outline: 2px solid #f59e0b; outline-offset: 2px; }
.sim20-chip-preset:focus:not(:focus-visible){ outline: none; }
.sim20-chip-preset:focus-visible{ outline: 2px solid #f59e0b; outline-offset: 2px; }
.sim20-chip-active{ border-color: var(--sim20-primary); background: var(--sim20-surface-panel); box-shadow: 0 0 0 3px rgba(180,83,9,.14); }
.sim20-chip-title{ font-size: 13px; font-weight: 700; }
.sim20-chip-value{ font-size: 11px; font-weight: 600; color: var(--sim20-text-secondary); }
.sim20-chip-badge{ align-self: stretch; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #ec4899; border-radius: 5px; padding: 3px 6px; margin-bottom: 3px; text-align: center; }
.sim20-chip-featured{ border-color: #f9a8d4; }
.sim20-chip-featured.sim20-chip-active{ border-color: #ec4899; box-shadow: 0 0 0 3px rgba(236,72,153,.18); }
.sim20-kontrol-info-box{ margin-top: 20px; background: var(--sim20-surface-panel); border: 1px solid var(--sim20-border); border-left: 4px solid var(--sim20-accent); border-radius: 8px; padding: 12px 14px; }
.sim20-kontrol-info-title{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sim20-primary-dark); margin-bottom: 5px; }
.sim20-kontrol-info-body{ font-size: 13px; line-height: 1.55; color: var(--sim20-text-secondary); text-wrap: pretty; }
/* Panel Makroskopik */
.sim20-makro-subheading{ font-family: "Times New Roman", Georgia, serif; font-size: 13px; color: var(--sim20-text-secondary); margin: 4px 0 12px; font-style: italic; }
.sim20-makro-svg-container{ display: flex; justify-content: center; }
.sim20-makro-svg{ width: 100%; max-width: 400px; height: auto; }
.sim20-makro-legenda{ display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 10px 12px; background: var(--sim20-surface-panel); border: 1px solid var(--sim20-border); border-radius: 4px; }
.sim20-makro-legenda-item{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sim20-text-primary); }
.sim20-makro-legenda-swatch{ display: inline-block; width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0; }
/* Panel Simbolik Bagian 1 */
.sim20-simbolik1-container{ display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.sim20-simbolik1-section{ padding: 12px 16px; border-left: 3px solid var(--sim20-accent); background: var(--sim20-surface-panel); border-radius: 0 4px 4px 0; }
.sim20-simbolik1-section-highlight{ background: #fff7e6; border-left-color: var(--sim20-primary); }
.sim20-simbolik1-section-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sim20-primary-dark); margin-bottom: 8px; }
.sim20-simbolik1-equation, .sim20-simbolik1-formula{ font-family: "Times New Roman", Georgia, serif; font-size: 16px; text-align: center; padding: 6px 0; color: var(--sim20-text-primary); }
.sim20-simbolik1-caption{ font-style: italic; font-size: 12px; color: var(--sim20-primary-dark); text-align: center; margin-bottom: 8px; }
.sim20-simbolik1-caption:last-child{ margin-bottom: 0; }
.sim20-simbolik1-value-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--sim20-border); }
.sim20-simbolik1-value-row:last-child{ border-bottom: none; }
.sim20-simbolik1-value-label{ font-size: 13px; color: var(--sim20-text-primary); }
.sim20-simbolik1-value-featured{ color: #ec4899; font-family: "Times New Roman", Georgia, serif; font-size: 20px; font-weight: 700; white-space: nowrap; }
.sim20-simbolik1-bullets{ padding-left: 20px; margin: 6px 0; }
.sim20-simbolik1-bullets li{ font-size: 13px; color: var(--sim20-text-primary); margin: 4px 0; line-height: 1.5; }
.sim20-simbolik1-narasi{ font-size: 13px; color: var(--sim20-text-primary); line-height: 1.6; margin: 8px 0; text-wrap: pretty; }
.sim20-simbolik1-narasi:last-child{ margin-bottom: 0; }
.sim20-simbolik1-bullets strong, .sim20-simbolik1-narasi strong{ color: var(--sim20-primary-dark); font-weight: 700; }
/* SIM20-05 · Panel Simbolik Bagian 2 (4-layer breathing + kurva semi-log) */
.sim20-simbolik2-container{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sim20-simbolik2-layer{ padding: 10px 12px; border-left: 3px solid var(--sim20-accent); background: var(--sim20-surface-panel); border-radius: 0 4px 4px 0; }
.sim20-simbolik2-layer-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sim20-primary-dark); margin-bottom: 6px; }
.sim20-simbolik2-formula-abstract, .sim20-simbolik2-formula-line{ font-family: "Times New Roman", Georgia, serif; font-size: 14px; text-align: center; padding: 4px 0; color: var(--sim20-text-primary); }
.sim20-simbolik2-result{ font-weight: 700; color: var(--sim20-primary-dark); }
.sim20-simbolik2-check{ color: #10b981; font-weight: 700; margin-left: 4px; }
.sim20-simbolik2-featured-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: #fff; padding: 12px 16px; border: 2px solid #ec4899; border-radius: 6px; }
.sim20-simbolik2-featured-label{ font-size: 15px; color: var(--sim20-text-primary); }
.sim20-simbolik2-featured-value{ color: #ec4899; font-family: "Times New Roman", Georgia, serif; font-size: 26px; font-weight: 700; white-space: nowrap; }
.sim20-simbolik2-svg{ width: 100%; height: auto; max-height: 300px; background: #fff; border-radius: 4px; padding: 4px; }
@media (max-width: 1080px){ .sim20-simbolik2-featured-value{ font-size: 21px; } }
/* SIM20-09 · Callout Mekanisme */
.sim20-callout-header{ padding: 12px 20px; border-bottom: 2px solid var(--sim20-border); background: var(--sim20-surface-panel); margin: -20px -20px 0; border-radius: 8px 8px 0 0; }
.sim20-callout-header h3{ font-size: 16px; color: var(--sim20-primary-dark); margin: 0; }
.sim20-callout-container{ padding: 16px 0 0; display: flex; flex-direction: column; gap: 20px; }
.sim20-callout-block{ padding: 14px 16px; border-left: 3px solid var(--sim20-accent); background: var(--sim20-surface-panel); border-radius: 0 4px 4px 0; }
.sim20-callout-block-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sim20-primary-dark); margin-bottom: 10px; }
.sim20-callout-paragraph{ font-size: 13px; color: var(--sim20-text-primary); line-height: 1.6; margin: 8px 0; text-wrap: pretty; }
.sim20-callout-paragraph strong, .sim20-callout-list strong, .sim20-callout-numbered-list strong{ color: var(--sim20-primary-dark); }
.sim20-callout-equation{ font-family: "Times New Roman", Georgia, serif; font-size: 15px; text-align: center; padding: 10px 0; color: var(--sim20-text-primary); background: #fff; border-radius: 4px; border: 1px solid var(--sim20-border); margin: 8px 0; }
.sim20-callout-list, .sim20-callout-numbered-list{ padding-left: 24px; margin: 8px 0; }
.sim20-callout-list li, .sim20-callout-numbered-list li{ font-size: 13px; color: var(--sim20-text-primary); margin: 8px 0; line-height: 1.6; }
.sim20-callout-numbered-list ul{ padding-left: 20px; margin: 6px 0; }
.sim20-callout-table{ width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; background: #fff; border-radius: 4px; overflow: hidden; }
.sim20-callout-table th{ background: var(--sim20-primary-dark); color: #fff; padding: 8px 12px; text-align: left; font-weight: 700; font-size: 12px; }
.sim20-callout-table td{ padding: 8px 12px; border-bottom: 1px solid var(--sim20-border); color: var(--sim20-text-primary); vertical-align: top; }
.sim20-callout-table tr:last-child td{ border-bottom: none; }
.sim20-callout-table tbody tr:nth-child(even) td{ background: var(--sim20-surface-panel); }
/* SIM20-07 · Panel Meter Digital */
.sim20-meter-header h3{ font-size: 16px; color: var(--sim20-primary-dark); margin: 0 0 8px; border-bottom: 1px solid var(--sim20-border); padding-bottom: 6px; }
.sim20-meter-container{ display: grid; grid-template-columns: 40fr 40fr 20fr; gap: 20px; padding: 16px; align-items: center; }
.sim20-meter-column{ display: flex; flex-direction: column; gap: 8px; }
.sim20-meter-lcd-caption{ font-size: 11px; color: var(--sim20-text-secondary); line-height: 1.3; }
.sim20-meter-lcd-display{ font-family: "Courier New", "Courier", monospace; font-size: 36px; font-weight: 700; color: #10b981; background: #ecfdf5; padding: 12px 16px; border: 2px solid #10b981; border-radius: 6px; text-align: center; letter-spacing: .02em; box-shadow: inset 0 0 8px rgba(16,185,129,.15); }
.sim20-meter-bar-label{ display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--sim20-text-primary); }
.sim20-meter-bar-value{ font-family: "Courier New", monospace; font-weight: 700; font-size: 15px; color: var(--sim20-primary-dark); }
.sim20-meter-bar-track{ width: 100%; height: 24px; background: #fef3c7; border: 1px solid var(--sim20-border); border-radius: 4px; overflow: hidden; position: relative; }
.sim20-meter-bar-fill{ height: 100%; background: linear-gradient(to right, #fbbf24, #f59e0b); border-radius: 3px 0 0 3px; transition: none; }
.sim20-meter-bar-ticks{ display: flex; justify-content: space-between; font-size: 10px; color: var(--sim20-text-secondary); padding: 0 2px; }
.sim20-meter-zone-header{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sim20-text-secondary); text-align: center; }
.sim20-meter-zone-badge{ padding: 14px 16px; border-radius: 8px; font-size: 15px; font-weight: 700; text-align: center; border: 2px solid; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.sim20-meter-zone-badge-a{ background: #fee2e2; color: #ef4444; border-color: #ef4444; }
.sim20-meter-zone-badge-b{ background: #fef9c3; color: #a16207; border-color: #eab308; }
.sim20-meter-zone-badge-c{ background: #dcfce7; color: #22c55e; border-color: #22c55e; }
@media (max-width: 880px){ .sim20-meter-container{ grid-template-columns: 1fr; } }
/* SIM20-06b · Panel Sub-mikro 3D interactivity (preset view buttons) */
.sim20-3d-ui-button-row{ display: flex; gap: 8px; justify-content: center; margin: 8px 0 12px; padding: 0 8px; }
.sim20-3d-ui-button{ padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--sim20-text-primary); background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sim20-3d-ui-button:hover{ background: #fde68a; }
.sim20-3d-ui-button-active{ background: #f59e0b; color: #fff; border-color: #d97706; }
.sim20-3d-ui-button-active:hover{ background: #d97706; }
.sim20-3d-ui-button:focus-visible{ outline: 2px solid #f59e0b; outline-offset: 2px; }
/* Panel Sub-mikro canvas */
.sim20-submikro-canvas-wrapper{ display: flex; justify-content: center; margin-top: 8px; }
.sim20-submikro-canvas{ width: 100%; max-width: 500px; height: 500px; border: 1px solid var(--sim20-border); border-radius: 8px; overflow: hidden; background: var(--sim20-surface-panel); }
.sim20-submikro-canvas canvas{ display: block; width: 100% !important; height: 100% !important; }


/* ============================================================
   BATCH RADE-01 — Uniform RADE phase header
   Judul fase + sub-kalimat perintah (hierarki jelas)
   ============================================================ */
.section-head { align-items: flex-start; }
.section-head .sec-ic { margin-top: 1px; }
.section-head .sec-meta .phase { font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: none; line-height: 1.2; }
.section-head .sec-meta .phase-sub { font-size: 13px; font-weight: 400; color: var(--ink-3); line-height: 1.45; margin-top: 3px; max-width: 760px; text-wrap: pretty; }
.section-head .when { margin-top: 2px; flex: none; }


/* ============================================================
   C.5.2b — Pratinjau Jurnal & Angket (view-only)
   ============================================================ */
.pra-tabs { display: inline-flex; gap: 4px; background: var(--bg); padding: 5px; border-radius: 12px; margin-bottom: 16px; }
.pra-tabs button { border: none; background: none; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 8px 16px; border-radius: 8px; }
.pra-tabs button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.pra-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.pra-subtabs button { border: 1px solid var(--line); background: #fff; cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 7px 14px; border-radius: 8px; }
.pra-subtabs button.on { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb,var(--brand) 30%, var(--line)); }
.pra-note { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin-bottom: 10px; }
.pra-note em { color: var(--ink-3); }
.pra-tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.pra-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pra-tbl th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); padding: 10px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pra-tbl td { padding: 10px 12px; border-top: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; }
.pra-tbl tbody tr:first-child td { border-top: none; }
.pra-tbl td.num { text-align: center; font-variant-numeric: tabular-nums; }
.pra-tbl td.ts { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pra-row { cursor: pointer; }
.pra-row:hover td { background: var(--brand-softer, var(--bg-2)); }
.pra-tbl-angket { font-size: 12px; }
.pra-tbl-angket th, .pra-tbl-angket td { padding: 7px 9px; }
.pra-tbl-angket .dom-h { background: var(--brand-soft); color: var(--brand); text-align: center; }
.pra-tbl-angket td.dom-c { background: var(--bg-2); font-weight: 700; color: var(--ink); }
.pra-q-block { margin: 12px 0; padding: 13px 15px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; }
.pra-q-lbl { font-weight: 700; color: var(--brand); font-size: 12px; letter-spacing: .02em; margin-bottom: 6px; }
.pra-q-txt { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }

/* ==================================================
   C.5.3b · Ekspor Data · Grup Sections Collapsible
   ================================================== */
.exp-groups { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.exp-group { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-1, #fff); overflow: hidden; }
.exp-group-head { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; }
.exp-group-headmain { flex: 1; cursor: pointer; min-width: 0; }
.exp-group-headmain:hover .exp-group-title { color: var(--brand); }
.exp-group-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-group-toggle { width: 16px; height: 16px; color: var(--ink-3); display: inline-flex; transition: transform .15s ease; flex: none; }
.exp-group-toggle svg { width: 16px; height: 16px; }
.exp-group-toggle.open { transform: rotate(90deg); }
.exp-group-title { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.exp-group-count { font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); padding: 1px 8px; border-radius: 999px; }
.exp-group-sel { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 1px 8px; border-radius: 999px; }
.exp-group-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; padding-left: 24px; text-wrap: pretty; }
.exp-group-parent-cb { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background: #fff; transition: background .12s, border-color .12s; }
.exp-group-parent-cb svg { width: 14px; height: 14px; }
.exp-group-parent-cb.on { background: var(--brand); border-color: var(--brand); }
.exp-group-parent-cb.ind { background: var(--brand); border-color: var(--brand); }
.exp-group-parent-cb.off:hover { border-color: var(--brand); }
.exp-group-body { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px 42px; border-top: 1px solid var(--line-2); }
.exp-group-body.collapsed { display: none; }
.exp-group-body .exp-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.exp-group-body .exp-item:hover { background: var(--bg-2); }
.exp-group-body .exp-item.on { background: var(--brand-soft); border-color: color-mix(in oklch, var(--brand) 25%, transparent); }
.exp-cb { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 2px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #fff; }
.exp-cb svg { width: 12px; height: 12px; }
.exp-cb.on { background: var(--brand); border-color: var(--brand); }
.exp-fmt-static { font-size: 13.5px; font-weight: 600; color: var(--ink); }


/* ========================================================
   Pekerjaan 1 — Real Image Container untuk konten READ
   Class .read-fig menggantikan .read-figph untuk 23 slot
   yang sudah ada gambar real (PNG).
   ======================================================== */
.read-fig {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 14px;
  border-radius: var(--radius-sm);
}
.read-fig img {
  max-width: 100%;
  max-height: 65vh;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

/* Wide-figure constraint · untuk grafik lebar (Sub-Batch #22, 13 Agustus 2026) */
.read-fig-wide img {
  max-width: 700px;
  max-height: 50vh;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}
/* ============================================================
   Sub-batch 3.4.c — Upload UI untuk Pretest/Posttest
   Dimensi S (WAJIB) + Dimensi K (opsional).
   Replace canvas engine dengan file upload pattern.
   ============================================================ */
.upload-wrap {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  background: #f8fafc;
  margin-top: 6px;
}
.upload-wrap .upload-preview {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  display: block;
  margin: 0 auto 14px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.10);
  background: white;
}
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
}
.upload-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28);
}
.upload-btn:active {
  transform: translateY(0);
}
.upload-btn-secondary {
  background: linear-gradient(135deg, #64748b, #475569);
}
.upload-btn-secondary:hover {
  box-shadow: 0 4px 14px rgba(100, 116, 139, 0.28);
}
.upload-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

/* ============================================================
   SIM-01 · R1-T2 (25 Sep 2026) — 3 panel (Makro + Submikro + Simbolik),
   stopwatch, tabel data. Semua selector di-scope ke .sim01-dock.
   ============================================================ */
.sim01-dock .s1-panels.sim01-panels-3{ grid-template-columns: 1.3fr 1fr .62fr; height: auto; align-items: start; }
@media (max-width: 1280px){
  .sim01-dock .s1-panels.sim01-panels-3{ grid-template-columns: 1fr 1fr; }
  .sim01-dock .sim01-sym{ grid-column: 1 / -1; }
  .sim01-dock .sim01-sym-host{ height: auto; }
}
@media (max-width: 1023px){ .sim01-dock .s1-panels.sim01-panels-3{ grid-template-columns: 1fr; } }

.sim01-dock .sim01-sym-host{ height: 410px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px; }
.sim01-dock .sim01-data{ width: 100%; border-collapse: collapse; font-size: 13px; }
.sim01-dock .sim01-data th{ text-align: left; font-size: 11px; font-weight: 800; color: var(--ink-2); padding: 8px 8px; border-bottom: 2px solid var(--line); line-height: 1.35; }
.sim01-dock .sim01-data td{ padding: 10px 8px; border-bottom: 1px solid var(--line-2); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim01-dock .sim01-data td.v{ text-align: right; }
.sim01-dock .sim01-data td.v.empty{ color: var(--ink-3); font-weight: 500; }
.sim01-dock .sim01-data tr.cur td{ background: #f3ecfe; }

.sim01-dock .sim01-stopwatch{ position: absolute; left: 12px; top: 12px; z-index: 4; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sim01-dock .sim01-sw-lbl{ font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sim01-dock .sim01-sw-val{ font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim01-dock .sim01-stopwatch[data-run="1"] .sim01-sw-val{ color: #be185d; }
.sim01-dock .sim01-sw-cap{ font-size: 10px; color: var(--ink-3); }
.sim01-dock .s1-drop-btn:disabled{ opacity: .45; cursor: not-allowed; }