/* Ergotools — design system korporat (lihat ../DESIGN.md).
   Sumber: canvas "Ergotools Corporate UI", artboard Komponen.
   Hanya tema terang. Semua warna ada di :root; di luar blok ini tidak ada nilai heksadesimal. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* Struktur */
  --navy-900: #142A4A; --navy-700: #1B365D; --ink: #172B4D; --ink-2: #344563; --muted: #505F79;
  --field-border: #8C99AB; --hairline: #D0D7E2; --hairline-soft: #E3E8EF;
  --panel: #F4F6FA; --unit: #EEF2F7; --canvas: #E9EDF3; --card: #FFFFFF; --photo-ph: #DFE5EE;
  --link: #1D5FBF; --link-hover: #174C99; --focus: #1D5FBF; --focus-ring: #C9DDF8;
  --on-navy: #FFFFFF; --on-navy-soft: #C5D3E8; --on-navy-muted: #A9BDD9; --nav-active: #6FA8F5;
  --readonly: #5B6B82; --disabled: #D0D7E2; --stage: #2B3647; --measure: #FFEB3B;
  /* Risiko: solid (bilah, blok rentang) / text (angka, label) / soft (latar) / line (garis kotak) / on (teks di atas solid) */
  --risk-1-solid: #1A7F45; --risk-1-text: #1A7F45; --risk-1-soft: #E8F5EC; --risk-1-line: #1A7F45; --risk-1-on: #FFFFFF;
  --risk-2-solid: #A8B820; --risk-2-text: #5A6400; --risk-2-soft: #F3F6D8; --risk-2-line: #A8B820; --risk-2-on: #1F2400;
  --risk-3-solid: #E9A820; --risk-3-text: #8A5A00; --risk-3-soft: #FDF3DC; --risk-3-line: #D99A00; --risk-3-on: #2B2000;
  --risk-4-solid: #E0701A; --risk-4-text: #A34700; --risk-4-soft: #FCEBDD; --risk-4-line: #E0701A; --risk-4-on: #2B1200;
  --risk-5-solid: #C0302F; --risk-5-text: #B42323; --risk-5-soft: #FBE9E9; --risk-5-line: #C0302F; --risk-5-on: #FFFFFF;
  /* Penanda */
  --limit-bg: #E7F0FC; --limit-line: #1D5FBF; --limit-text: #174C99;
  --changed-bg: #DDF1E4; --changed-text: #14693A; --row-active: #FDF3DC; --row-sub: #DFE5EE;
  --note-bg: #FDF3DC; --note-line: #D99A00; --note-text: #3D2C00; --note-strong: #8A5A00;
  --zone-cell: rgba(255, 255, 255, .88); --shadow: rgba(20, 42, 74, .18); --backdrop: rgba(20, 42, 74, .6);
  /* Bentuk, ukuran, tipografi */
  --r: 2px; --gutter: 32px; --gap: 24px;
  --appbar: 56px; --panelbar: 48px; --control: 40px; --button: 44px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231B365D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}
@media (max-width: 959px) {
  :root { --gutter: 16px; --gap: 16px; --panelbar: 44px; --control: 48px; --button: 48px; }
}

/* Level risiko: beri .l1–.l5 pada komponen skor */
.l1 { --lv-solid: var(--risk-1-solid); --lv-text: var(--risk-1-text); --lv-soft: var(--risk-1-soft); --lv-line: var(--risk-1-line); --lv-on: var(--risk-1-on); }
.l2 { --lv-solid: var(--risk-2-solid); --lv-text: var(--risk-2-text); --lv-soft: var(--risk-2-soft); --lv-line: var(--risk-2-line); --lv-on: var(--risk-2-on); }
.l3 { --lv-solid: var(--risk-3-solid); --lv-text: var(--risk-3-text); --lv-soft: var(--risk-3-soft); --lv-line: var(--risk-3-line); --lv-on: var(--risk-3-on); }
.l4 { --lv-solid: var(--risk-4-solid); --lv-text: var(--risk-4-text); --lv-soft: var(--risk-4-soft); --lv-line: var(--risk-4-line); --lv-on: var(--risk-4-on); }
.l5 { --lv-solid: var(--risk-5-solid); --lv-text: var(--risk-5-text); --lv-soft: var(--risk-5-soft); --lv-line: var(--risk-5-line); --lv-on: var(--risk-5-on); }

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 14px/1.45 var(--font); font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.25; }
a { color: var(--link); } a:hover { color: var(--link-hover); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; } button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .spacer { flex: 1 1 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.formula { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Kerangka layar ---------- */
#app { min-height: 100%; display: flex; flex-direction: column; }
.appbar { flex: none; height: var(--appbar); display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); background: var(--navy-900); color: var(--on-navy); }
.appbar-brand { font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--on-navy); text-decoration: none; }
.appbar-brand:hover { color: var(--on-navy); }
.appbar-nav { flex: 1 1 0; align-self: stretch; display: flex; gap: 4px; min-width: 0; }
.appbar-nav a { display: flex; align-items: center; padding: 3px 16px 0; border-bottom: 3px solid transparent; font-size: 14px; color: var(--on-navy-soft); text-decoration: none; white-space: nowrap; }
.appbar-nav a:hover { color: var(--on-navy); }
.appbar-nav a[aria-current="page"] { font-weight: 600; color: var(--on-navy); border-bottom-color: var(--nav-active); }
.appbar-nav a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.appbar-here { display: none; flex: 1 1 0; min-width: 0; font-size: 14px; font-weight: 600; color: var(--on-navy-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-end { display: flex; align-items: center; gap: 12px; }
.langsw { display: flex; border: 1px solid var(--on-navy-muted); }
.langsw button { width: 40px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--on-navy); font-size: 13px; font-weight: 700; }
.langsw button[aria-pressed="true"] { background: var(--on-navy); color: var(--navy-900); }
.appbar-link { display: flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--on-navy-muted); font-size: 14px; font-weight: 600; color: var(--on-navy); text-decoration: none; }
.appbar-link:hover { color: var(--on-navy); background: var(--navy-700); }
.appbar :focus-visible { outline-color: var(--nav-active); }

.pagehead { flex: none; display: flex; align-items: center; gap: 32px; padding: 10px var(--gutter); background: var(--card); border-bottom: 1px solid var(--hairline); }
.pagehead-t { flex: 1 1 0; min-width: 0; }
.pagehead-t .kicker { font-size: 12px; letter-spacing: .08em; }
.pagehead-t h1 { margin-top: 2px; }
.pagehead-meta { display: flex; gap: 24px; font-size: 13px; }
.pagehead-meta > div > span { display: block; color: var(--muted); }
.pagehead-meta > div > b { display: block; font-weight: 600; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagehead-acts { display: flex; gap: 8px; }
.pagehead-acts .btn { height: 40px; }

.work { position: relative; flex: 1 1 0; display: flex; align-items: stretch; gap: var(--gap); padding: 16px var(--gutter); min-height: 0; }
.col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.col.fixed { flex: 0 0 var(--w, 360px); }
.col.loose { gap: 12px; }
.col > * { flex-shrink: 0; }

.panel-h { flex: none; height: var(--panelbar); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--navy-700); color: var(--on-navy); font-size: 16px; font-weight: 700; }
.panel-h .step { font-weight: 500; color: var(--on-navy-muted); text-transform: uppercase; }
.panel-h .aside { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--on-navy-soft); }
.panel-h .tagbox { margin-left: auto; padding: 3px 10px; border: 1px solid var(--on-navy-muted); font-size: 12px; font-weight: 600; }
.panel-b { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--hairline); }
.panel-b.grow { flex: 1 1 0; min-height: 0; overflow: auto; }
.panel-b > * { flex-shrink: 0; }
.panel-b.tight { gap: 6px; }
.panel-t { font-size: 15px; font-weight: 700; }
.panel-t small { float: right; font-size: 12px; font-weight: 400; color: var(--muted); }

.tabs { flex: none; display: flex; height: var(--panelbar); background: var(--navy-700); }
.tabs button { flex: 1 1 0; min-width: 0; padding: 4px 8px 0; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--on-navy); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--navy-900); border-bottom-color: var(--nav-active); }
.tabs :focus-visible { outline-color: var(--nav-active); outline-offset: -4px; }

.seg { display: flex; border: 1px solid var(--navy-700); border-radius: var(--r); }
.seg button { flex: 1 1 0; height: var(--control); padding: 0 14px; border: 0; background: var(--card); color: var(--navy-700); font-size: 14px; font-weight: 600; }
.seg button + button { border-left: 1px solid var(--navy-700); }
.seg button[aria-pressed="true"] { background: var(--navy-700); color: var(--on-navy); }

.fold { border: 1px solid var(--hairline); background: var(--card); }
.fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 40px 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; background: var(--chevron) no-repeat right 14px center; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { border-bottom: 1px solid var(--hairline); background-color: var(--panel); }
.fold > summary small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.fold-b { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }

/* ---------- Field ---------- */
.frow { display: flex; align-items: center; gap: 12px; }
.fcode { flex: none; width: 40px; height: var(--control); display: flex; align-items: center; justify-content: center; background: var(--navy-700); color: var(--on-navy); font-size: 15px; font-weight: 700; border-radius: var(--r); }
.fcode.on { background: var(--focus); }
.fcode.ro { background: var(--readonly); font-size: 14px; }
.fcode.sm { font-size: 13px; }
.flabel { flex: 1 1 0; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; }
.flabel small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.fbox { flex: none; display: flex; width: 128px; height: var(--control); border: 1px solid var(--field-border); border-radius: var(--r); background: var(--card); }
.fbox input { flex: 1 1 0; width: 0; border: 0; outline: 0; background: transparent; padding: 0 10px; font-size: 16px; font-weight: 600; text-align: right; }
.funit { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; background: var(--unit); border-left: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
.fbox:focus-within { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-ring); }
.fbox.bad { border-color: var(--risk-5-line); box-shadow: inset 0 0 0 1px var(--risk-5-line); background: var(--risk-5-soft); }
.fbox.ro { align-items: center; justify-content: flex-end; padding: 0 12px; border-style: dashed; background: var(--panel); font-size: 16px; font-weight: 600; }
.fmsg { margin-top: 6px; text-align: right; font-size: 12px; font-weight: 600; color: var(--risk-5-text); }
select.fsel, .field select { appearance: none; -webkit-appearance: none; background: var(--card) var(--chevron) no-repeat right 14px center; padding: 0 36px 0 12px; }
select.fsel { flex: none; width: 128px; height: var(--control); border: 1px solid var(--field-border); border-radius: var(--r); font-size: 15px; font-weight: 600; }
select.fsel.wide { width: 100%; }
select.fsel:focus, .field :is(input, textarea, select):focus { outline: 0; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-ring); }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field :is(input, select) { width: 100%; height: var(--control); border: 1px solid var(--field-border); border-radius: var(--r); background-color: var(--card); font-size: 14px; }
.field input { padding: 0 10px; }
.field textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--field-border); border-radius: var(--r); background: var(--card); font-size: 14px; line-height: 1.4; resize: vertical; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.fgrid .full { grid-column: 1 / -1; }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--card); font-size: 14px; line-height: 1.3; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy-700); }
.check > span:not(.delta) { flex: 1 1 0; }
.check small { display: block; font-size: 12px; color: var(--muted); }
.check:has(input:checked) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); background: var(--limit-bg); }
.delta { flex: none; min-width: 32px; padding: 2px 6px; border: 1px solid var(--field-border); background: var(--card); font-size: 12px; font-weight: 700; text-align: center; }

input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--navy-700); background: transparent; }

/* ---------- Tombol dan pilihan ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--button); padding: 0 18px; border: 1px solid var(--navy-700); border-radius: var(--r); background: var(--card); color: var(--navy-700); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--panel); color: var(--navy-700); }
.btn.primary { background: var(--navy-700); color: var(--on-navy); }
.btn.primary:hover { background: var(--navy-900); color: var(--on-navy); }
.btn.tertiary { padding: 0 12px; border-color: transparent; background: transparent; color: var(--link); text-decoration: underline; }
.btn.tertiary:hover { color: var(--link-hover); }
.btn.danger { border-color: var(--risk-5-line); color: var(--risk-5-text); }
.btn.tertiary.danger { border-color: transparent; }
.btn.sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--disabled); background: var(--disabled); color: var(--muted); text-decoration: none; pointer-events: none; }
.btn svg { flex: none; }

.choices { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.choice { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 10px; border: 2px solid var(--hairline); border-radius: var(--r); background: var(--card); text-align: left; font-size: 13px; line-height: 1.3; }
.choice b { font-size: 14px; font-weight: 600; }
.choice small { font-size: 12px; color: var(--muted); }
.choice:hover { border-color: var(--field-border); }
.choice[aria-pressed="true"] { border-color: var(--focus); background: var(--limit-bg); }
.choice[aria-pressed="true"] b { color: var(--limit-text); }
.choice.pic { align-items: center; text-align: center; }
.choice.pic img { height: 80px; width: auto; max-width: 100%; object-fit: contain; }
.choice.line { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.chipbtn { height: 36px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r); background: var(--card); font-size: 13px; font-weight: 600; }
.chipbtn[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); background: var(--limit-bg); color: var(--limit-text); }

/* ---------- Skor dan level ---------- */
.scorebox { display: flex; align-items: center; gap: 14px; padding: 7px 14px; background: var(--lv-soft, var(--panel)); border: 2px solid var(--lv-line, var(--hairline)); color: var(--lv-text, var(--muted)); }
.scorebox .num { flex: none; min-width: 104px; font-size: 38px; font-weight: 700; line-height: 1; }
.scorebox .lab { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.scorebox .lab svg { flex: none; }
.scorebox.lg, .scorebox.xl { align-items: flex-start; flex-direction: column; gap: 2px; padding: 8px 12px; }
.scorebox.lg .num { font-size: 52px; line-height: 1.1; }
.scorebox.xl .num { font-size: 64px; line-height: 1.05; }
.scorebox .cap { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.scorebox .desc { font-size: 13px; font-weight: 400; color: var(--ink); }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--lv-soft); border: 1.5px solid var(--lv-line); color: var(--lv-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--lv-soft, var(--panel)); border: 1.5px solid var(--lv-line, var(--hairline)); color: var(--lv-text, var(--muted)); font-size: 12px; font-weight: 700; white-space: nowrap; }
.scoretile { flex: none; width: 84px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lv-soft, var(--panel)); border: 2px solid var(--lv-line, var(--hairline)); color: var(--lv-text, var(--muted)); font-size: 26px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.scoretile.navy { background: var(--navy-700); border-color: var(--navy-700); color: var(--on-navy); }
.scoretile small { font-size: 10px; font-weight: 600; letter-spacing: .06em; }

.mtiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.mtile { padding: 8px 4px; border: 1px solid var(--hairline); background: var(--panel); text-align: center; }
.mtile small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.mtile b { display: block; font-size: 18px; font-weight: 700; }
.mtile.limit { padding: 7px 3px; border: 2px solid var(--limit-line); background: var(--limit-bg); }
.mtile.limit :is(small, b) { color: var(--limit-text); }
.mtile.result { border-color: var(--navy-700); background: var(--navy-700); color: var(--on-navy); }
.mtile.result small { color: var(--on-navy-muted); }
button.mtile { font: inherit; color: inherit; }

.scorebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 16px; background: var(--navy-700); color: var(--on-navy); }
.scorebar .kicker { color: var(--on-navy-muted); }
.scorebar .calc { font-size: 13px; color: var(--on-navy-soft); }
.scorebar .num { flex: none; font-size: 32px; font-weight: 700; line-height: 1; }

.scale-m { position: relative; height: 32px; font-size: 12px; font-weight: 700; }
.scale-arw { position: absolute; bottom: 0; transform: translateX(-50%); border: 7px solid transparent; border-top: 10px solid var(--lv-text, var(--ink)); border-bottom: 0; }
.scale-lbl { position: absolute; bottom: 11px; transform: translateX(-50%); color: var(--lv-text, var(--ink)); white-space: nowrap; line-height: 1.2; }
.scale-lbl.start { transform: none; } .scale-lbl.end { transform: translateX(-100%); }
.scale-bar { display: flex; height: 14px; }
.scale-bar > i { background: var(--lv-solid); }
.scale-t { position: relative; height: 18px; font-size: 11px; color: var(--muted); }
.scale-t > span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.scale-t > span.first { transform: none; } .scale-t > span.last { transform: translateX(-100%); }
.scale-t > span.name { font-weight: 700; color: var(--lv-text); }

.bands { display: flex; flex-direction: column; gap: 4px; }
.band { display: flex; align-items: stretch; min-height: 36px; border: 2px solid transparent; font-size: 13px; line-height: 1.3; }
.band .rng { flex: none; width: var(--rw, 64px); display: flex; align-items: center; justify-content: center; background: var(--lv-solid); color: var(--lv-on); font-weight: 700; }
.band .txt { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 10px; }
.band .txt b { color: var(--lv-text); }
.band.on { border-color: var(--lv-line); background: var(--lv-soft); }
.band.on .txt { font-weight: 700; }
.wide-rng .bands { --rw: 92px; gap: 4px; }
.wide-rng .band .txt { padding: 2px 10px; }

/* ---------- Tabel ---------- */
.ltab { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; font-size: 13px; }
.ltab th, .ltab td { padding: 7px 2px; border: 0; }
.ltab thead th { padding: 8px 2px; background: var(--navy-700); color: var(--on-navy); font-size: 12px; font-weight: 600; }
.ltab thead tr + tr th { font-weight: 500; color: var(--on-navy-soft); padding-top: 0; }
.ltab tbody tr { border: 1px solid var(--hairline); border-top: 0; }
.ltab tbody th { font-weight: 700; }
.ltab tr.on { background: var(--row-active); }
.ltab :is(td, th).col-on { background: var(--row-active); }
.ltab td.on { font-weight: 700; color: var(--limit-text); box-shadow: inset 0 0 0 2px var(--focus); background: var(--card); }
.ltab.dense { font-size: 12px; } .ltab.dense th, .ltab.dense td { padding: 3px 1px; } .ltab.dense thead th { padding: 5px 1px; font-size: 11px; }
button.ltab-c { width: 100%; border: 0; background: transparent; padding: 0; font-weight: inherit; }

.dtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtab thead th { height: 32px; padding: 0 8px; background: var(--navy-700); color: var(--on-navy); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.dtab :is(th, td):first-child { padding-left: 16px; text-align: left; }
.dtab td, .dtab tbody th { height: 29px; padding: 0 8px; border-bottom: 1px solid var(--hairline-soft); text-align: center; font-weight: 400; }
.dtab tbody tr:nth-child(even) { background: var(--panel); }
.dtab tr.sub { background: var(--row-sub) !important; font-weight: 700; }
.dtab tr.total { background: var(--navy-700) !important; color: var(--on-navy); font-weight: 700; }
.dtab tr.hot td.score { background: var(--risk-5-soft); color: var(--risk-5-text); font-weight: 700; }
.dtab td.changed { background: var(--changed-bg); color: var(--changed-text); font-weight: 700; }
.dtab td.limit { background: var(--limit-bg); color: var(--limit-text); font-weight: 700; box-shadow: inset 0 0 0 2px var(--limit-line); }

/* ---------- Lain-lain ---------- */
.note { padding: 12px 14px; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note-text); font-size: 13px; line-height: 1.45; }
.note strong { color: var(--note-strong); }
.note.info { background: var(--limit-bg); border-color: var(--limit-line); color: var(--ink); } .note.info strong { color: var(--limit-text); }
.note.ok { background: var(--risk-1-soft); border-color: var(--risk-1-line); color: var(--ink); } .note.ok strong { color: var(--risk-1-text); }
.note.bad { background: var(--risk-5-soft); border-color: var(--risk-5-line); color: var(--ink); } .note.bad strong { color: var(--risk-5-text); }
.note.dashed { background: var(--panel); border: 1.5px dashed var(--field-border); color: var(--muted); text-align: center; }

.plan { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
.plan-g { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-i { display: flex; align-items: center; gap: 10px; }
.plan-i > i { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--navy-700); color: var(--on-navy); font-size: 13px; font-weight: 700; font-style: normal; }

.photos { display: flex; gap: 6px; height: 104px; }
.photo { position: relative; flex: 1 1 0; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--photo-ph) center / cover no-repeat; color: var(--ink-2); font-size: 11px; font-weight: 600; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo[aria-pressed="true"] { border: 2px solid var(--focus); }
.photo .src { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: var(--navy-700); color: var(--on-navy); font-size: 10px; font-weight: 600; }
.photo-add { flex: none; width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--field-border); border-radius: var(--r); background: var(--panel); color: var(--navy-700); }
.photos:not(:has(.photo)) .photo-add { flex: 1 1 0; gap: 8px; font-size: 13px; font-weight: 600; }

dialog.dlg { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--navy-700); border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: 0 8px 24px var(--shadow); }
dialog::backdrop { background: var(--backdrop); }
.dlg-h { display: flex; align-items: center; height: 44px; padding: 0 16px; background: var(--navy-700); color: var(--on-navy); font-size: 15px; font-weight: 700; }
.dlg-b { display: flex; flex-direction: column; gap: 12px; padding: 16px; font-size: 14px; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
dialog.zoom { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 8px; border: 1px solid var(--navy-700); border-radius: var(--r); background: var(--card); box-shadow: 0 8px 24px var(--shadow); }
dialog.zoom img { display: block; max-width: 100%; max-height: calc(100dvh - 96px); margin: 0 auto; }
dialog.zoom p { margin-top: 6px; text-align: center; font-size: 12px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 10px 16px; background: var(--navy-900); color: var(--on-navy); font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px var(--shadow); }

/* ---------- Beranda, Kajian, Panduan ---------- */
.work.nohead { padding-top: 20px; }
.panel-b > .scroll { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.scroll > * { flex-shrink: 0; }
.panel-b > .spacer { flex: 1 1 0; }
.panel-foot { display: flex; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.panel-foot.plain { padding-top: 0; border-top: 0; }
.langbtn { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--on-navy-muted); background: transparent; color: var(--on-navy); font-size: 13px; font-weight: 700; }

.choice.act { gap: 6px; padding: 12px; color: var(--ink); }
.choice.act svg { color: var(--navy-700); }
.choice.act b { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.choice.act small { line-height: 1.35; }
.check.tool { gap: 12px; min-height: 56px; }
.check.tool input { width: 18px; height: 18px; }
.check.tool b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.check.tool .time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.minitag { padding: 1px 6px; font-size: 11px; font-weight: 700; font-style: normal; }
.minitag.rec { background: var(--navy-700); color: var(--on-navy); }
.minitag.est { background: var(--note-bg); color: var(--note-text); }

.kitem { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--hairline); }
.thumb { flex: none; width: 72px; height: 72px; background: var(--photo-ph); border: 1px solid var(--field-border); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kitem-t { flex: 1 1 0; min-width: 0; }
.kitem-t > a { display: block; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kitem-t > a:hover { color: var(--link); text-decoration: underline; }
.kitem-a { flex: none; display: flex; gap: 6px; }
.kitem-a .btn { height: 40px; }

.panel-b.kinfo { gap: 8px; }
.trow { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
.trow:hover { border-color: var(--focus); color: var(--ink); }
.trow.dashed { border: 1px dashed var(--field-border); background: var(--panel); }
.trow-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.trow-t b { font-size: 16px; font-weight: 700; }
.trow-t .st { font-weight: 600; color: var(--lv-text); }

.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ptile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ptile .photo { flex: none; height: 104px; border-color: var(--field-border); font-size: 12px; }
.ptile-c { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.ptile-c b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile-c i { flex: none; padding: 0 6px; background: var(--navy-700); color: var(--on-navy); font-weight: 700; font-style: normal; }
.addtile { height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--field-border); border-radius: var(--r); background: var(--panel); color: var(--navy-700); font-size: 12px; font-weight: 600; text-decoration: none; }
.addtile:hover { border-color: var(--navy-700); color: var(--navy-700); }
.dlg-img { display: block; max-width: 100%; max-height: 40dvh; margin: 0 auto; object-fit: contain; background: var(--photo-ph); }

.panel-b.guide { gap: 12px; padding: 16px; font-size: 14px; }
.flow { display: flex; gap: 12px; }
.flow + .flow { padding-top: 12px; border-top: 1px solid var(--hairline); }
.flow > i { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--navy-700); color: var(--on-navy); font-weight: 700; font-style: normal; }
.flow b { display: block; margin-bottom: 4px; font-weight: 700; }
strong.em { color: var(--limit-text); }
.guide-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.guide-n { font-size: 22px; font-weight: 700; line-height: 1.3; }
.guide-what { padding: 12px 14px; background: var(--panel); border: 1px solid var(--hairline); line-height: 1.5; }
.guide-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; line-height: 1.5; }
.gbox { border: 1px solid var(--risk-1-line); }
.gbox-h { padding: 6px 12px; background: var(--risk-1-soft); color: var(--changed-text); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gbox-b { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.gbox-b > div { display: flex; gap: 8px; }
.gbox-b svg { flex: none; margin-top: 3px; color: var(--risk-1-solid); }
.gbox.bad { border-color: var(--risk-5-line); }
.gbox.bad .gbox-h { background: var(--risk-5-soft); color: var(--risk-5-text); }
.gbox.bad svg { color: var(--risk-5-text); }
dialog.dlg.wide { width: min(860px, calc(100vw - 32px)); }
.video { aspect-ratio: 16 / 9; background: var(--stage); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- NIOSH Lifting ---------- */
.linkbtn { padding: 0; border: 0; background: transparent; color: var(--link); font-size: 12px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.linkbtn:hover { color: var(--link-hover); }
ul.plain { margin: 0; padding-left: 18px; }
.pagehead.tool { gap: 20px; }
.pagehead.tool .btn.tertiary { padding: 0 6px; }
.pagehead .seg button { white-space: nowrap; }
/* Panel lipat "Kapan metode ini dipakai": ringkas di bawah judul, isi melayang di atas area kerja (PC) */
.pagehead.tool { position: relative; }
.whenfold { border: 0; background: none; margin-top: 2px; }
.whenfold > summary { display: inline-flex; min-height: 28px; padding: 0 22px 0 0; font-size: 13px; color: var(--link); background-position: right 0 center; }
.whenfold[open] > summary { border: 0; background-color: transparent; }
.whenfold > .fold-b { position: absolute; z-index: 30; left: var(--gutter); top: 100%; width: min(720px, calc(100vw - 2 * var(--gutter))); max-height: 70vh; overflow: auto; gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 8px 24px rgb(0 0 0 / .14); font-weight: 400; }
.hintrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; font-size: 12px; color: var(--muted); }
.hintrow > span { flex: 1 1 100%; }
.nin .frow { gap: 10px; } .nin .fbox, .nin select.fsel { width: 124px; }
.panel-b.nres { gap: 10px; }
.nres .mtile { padding: 5px 0; } .nres .mtile.limit { padding: 4px 0; }
.nres .btn.block { height: 40px; }
.scale-m:empty { height: 22px; }
.tabs.sm { height: 40px; } .tabs.sm button { font-size: 13px; }
.fmcol { width: 280px !important; }
.colhead { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--hairline); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nfig { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--hairline); }
.nfig img.side { height: 160px; width: auto; display: block; }
.nfig img.top { width: 140px; height: auto; display: block; }
.vchip { position: absolute; height: 28px; padding: 0 6px; border: 1.5px solid var(--navy-700); border-radius: var(--r); background: var(--card); color: var(--navy-700); font-size: 12px; font-weight: 700; white-space: nowrap; }
.vchip::after { content: ""; position: absolute; inset: -8px -4px; }
.vchip[aria-pressed="true"] { border-color: var(--focus); background: var(--focus); color: var(--on-navy); }
.vD { right: 2px; top: 39px; } .vV { right: 2px; top: 92px; } .vH { left: 39px; bottom: 1px; } .vA { right: 2px; top: 100px; }

.panel-b.mults { gap: 0; padding: 12px 16px 8px; }
.mgrid { display: grid; grid-template-columns: 52px 1fr 150px 96px; column-gap: 14px; align-items: center; }
.mhead { padding-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mhead span:last-child { text-align: center; }
.mrow { height: 46px; border-top: 1px solid var(--hairline); }
.mcode { height: 36px; display: flex; align-items: center; justify-content: center; background: var(--navy-700); color: var(--on-navy); font-size: 16px; font-weight: 700; }
.mrow .formula { line-height: 1.2; }
.rule { font-size: 11px; font-style: italic; color: var(--muted); }
.msub { font-family: var(--serif); font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mval { height: 34px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--hairline); font-size: 17px; font-weight: 700; }
.mval.limit { background: var(--limit-bg); border: 2px solid var(--limit-line); color: var(--limit-text); }
.mlegend { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.mlegend i { flex: none; width: 14px; height: 14px; background: var(--limit-bg); border: 2px solid var(--limit-line); }

.panel-b.ntab { padding: 10px 16px; font-size: 14px; }
.panel-b > .ntabs { flex: 1 1 0; min-height: 0; display: flex; gap: 16px; }
.fmcol { flex: none; width: 310px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cmcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmcol .ltab td, .cmcol .ltab tbody th { padding: 4px 0; }
.tscroll { flex: 1 1 0; min-height: 96px; overflow: auto; border-bottom: 1px solid var(--hairline); }
.tscroll thead th { position: sticky; top: 0; }
.tscroll .ltab td, .tscroll .ltab tbody th { padding: 4px 0; }

.scorebox.wide { gap: 16px; padding: 8px 16px; }
.scorebox.wide .num { min-width: 0; font-size: 52px; }
.scorebox .calc { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.scorebox .calc .formula { font-size: 17px; color: var(--ink); }
.scorebox.md { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 12px; }
.scorebox.md .num { min-width: 0; font-size: 44px; line-height: 1.1; }
.scorebox.md .lab { font-size: 13px; }
.scorebar .num small { font-size: 16px; font-weight: 600; }
.ab { display: flex; align-items: stretch; gap: 8px; }
.ab > svg { flex: none; align-self: center; }

.mscore { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--lv-soft, var(--panel)); border-bottom: 2px solid var(--lv-line, var(--hairline)); }
.mscore .num { font-size: 40px; font-weight: 700; line-height: 1; color: var(--lv-text, var(--muted)); }
.mscore .mid { flex: 1 1 0; line-height: 1.3; } .mscore .mid b { font-size: 14px; color: var(--lv-text, var(--muted)); }
.mscore .end { text-align: right; line-height: 1.3; } .mscore .end b { font-size: 16px; }
.mscore .kicker { color: var(--ink-2); }

.panel-b.cond { flex: 1 1 0; min-height: 0; overflow: auto; gap: 0; padding: 0; }
.cond-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; }
.cond-t { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cond-s { font-size: 12px; font-style: italic; color: var(--muted); }
.ideal { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px 8px; overflow-x: auto; }
.ideal .kicker { white-space: nowrap; margin-right: 4px; }
button.tag { font-family: inherit; cursor: pointer; }
.cond .dtab :is(th, td):nth-child(n+2) { width: 104px; }
.cond .dtab :is(th, td):last-child { padding-right: 16px; width: 112px; }
.cond .dtab tbody th { color: var(--ink-2); }
.cond .dtab tbody td { font-weight: 600; }
.cond .dtab tr.m th { font-weight: 700; color: var(--ink); } .cond .dtab tr.m td { font-weight: 400; }
.cond .dtab tr.m td.limit { font-weight: 700; }
.cond .dtab tr.sec th { height: 24px; background: var(--card); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cond .dtab tr.sub :is(th, td) { height: 34px; font-size: 14px; font-weight: 700; color: var(--ink); }
.cin { width: 52px; height: 24px; padding: 0 4px; border: 1px solid var(--field-border); border-radius: var(--r); background: var(--card); font-size: 13px; font-weight: 600; text-align: right; }
select.cin { width: 88px; padding: 0 2px; text-align: left; }
.cin:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus-ring); }
.cu { display: inline-block; width: 30px; padding-left: 4px; font-size: 11px; font-weight: 400; color: var(--muted); text-align: left; }
.lirow { flex: none; display: grid; grid-template-columns: 1fr 104px 104px; align-items: center; height: 56px; padding: 0 16px; }
.lirow > span:first-child { font-size: 15px; font-weight: 700; }
.licell { height: 40px; margin: 0 4px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); color: var(--lv-text, var(--muted)); font-size: 18px; font-weight: 700; }
.licell.on { background: var(--lv-soft); border: 2px solid var(--lv-line); font-size: 22px; }
.cond-n { padding: 0 16px 12px; font-size: 12px; font-style: italic; color: var(--muted); }

.ndlg { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ndlg-figs { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ndiag { width: 100%; max-width: 400px; border: 1px solid var(--hairline); background: var(--card); }
.ndial { width: 190px; touch-action: none; cursor: grab; }
.ndial-f { margin: 0; text-align: center; }

/* ---------- RULA & REBA ---------- */
.nowrap { white-space: nowrap; }
.work.pwork { flex-direction: column; gap: 8px; }
.stepper { flex: none; display: flex; align-items: center; gap: 8px; }
.stepper .steps { flex: 1 1 0; min-width: 0; display: flex; gap: 4px; overflow-x: auto; }
.stepchip { flex: 1 0 36px; max-width: 64px; height: 36px; padding: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-bottom: 3px solid var(--lv-solid, var(--hairline)); background: var(--card); line-height: 1.05; }
.stepchip small { font-size: 10px; color: var(--muted); }
.stepchip b { font-size: 14px; }
.stepchip[aria-current="step"] { border-color: var(--focus); border-bottom-color: var(--lv-solid, var(--focus)); background: var(--limit-bg); box-shadow: inset 0 0 0 1px var(--focus); }
.pgrid2 { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pcard { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pcard-top { display: flex; gap: 16px; }
.psel { flex: none; width: 224px; display: flex; flex-direction: column; gap: 8px; }
.psel-img { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 2px solid var(--focus); }
.psel-img img { max-width: 204px; max-height: 184px; display: block; }
.psel b { display: block; font-size: 15px; line-height: 1.3; }
.psel .muted { font-size: 13px; }
.kicker.em { color: var(--limit-text); }
.pcard-top .choices { flex: 1 1 0; align-content: start; }
.choice.pic { gap: 3px; padding: 5px 6px 6px; }
.pcard .choice.pic img { height: 70px; }
.choice.pic b { font-size: 12px; font-weight: 700; line-height: 1.25; }
.choice.pic small { font-size: 11px; line-height: 1.25; }
.choice.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.choice.line > :not(.delta) { grid-column: 1; }
.choice.line > .delta { grid-column: 2; grid-row: 1 / span 2; }
/* ROSA: ilustrasi worksheet lebih kecil; ubin tambahan bisa dipilih lebih dari satu */
.pcard-top.rosa .psel { width: 176px; }
.pcard-top.rosa .psel-img { height: 140px; }
.pcard-top.rosa .psel-img img { max-width: 160px; max-height: 128px; }
.pcard .choice.pic.adj img { height: 52px; }
.choice.pic.adj { position: relative; }
.choice.pic.adj .delta { position: absolute; top: 4px; right: 4px; min-width: 0; padding: 0 5px; font-size: 11px; }
.choice.pic.adj[aria-pressed="true"] .delta { border-color: var(--focus); background: var(--focus); color: var(--card); }
.choice.dur { position: relative; padding: 6px 34px 6px 8px; } .choice.dur b { font-size: 13px; white-space: nowrap; } .choice.dur small { font-size: 11px; line-height: 1.25; }
.choice.dur .delta { position: absolute; top: 6px; right: 6px; min-width: 0; padding: 0 5px; font-size: 11px; }
.dtab.rosa td:not(.score) { font-size: 12px; line-height: 1.35; }
.pangle { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--hairline); }
.pangle-l { flex: none; width: 196px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pangle-l label { font-size: 14px; font-weight: 600; line-height: 1.25; }
.pangle-l label small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.pangle-r { flex: 1 1 0; min-width: 0; }
.pangle-r input[type="range"] { height: 28px; }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.pangle .fbox { width: 112px; height: 44px; }
.pangle .funit { width: 40px; }
.ptable { overflow: auto; }
.ptable .ltab.dense td, .ptable .ltab.dense tbody th { padding: 3px 1px; }
.pnav { display: flex; gap: 8px; } .pnav .btn { flex: 1 1 0; height: 48px; font-size: 15px; }
.bodymap { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.bm-part { cursor: pointer; } .bm-part:focus-visible { outline: 2px solid var(--focus); }
.appbar-seg { display: inline-flex; border: 1px solid var(--on-navy-muted); }
.appbar-seg a { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--on-navy); font-size: 14px; font-weight: 700; text-decoration: none; }
.appbar-seg a[aria-current="page"] { background: var(--card); color: var(--navy-900); }
.seg .segbtn { flex: 1 1 0; min-width: 84px; height: var(--control); display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: none; }
.seg .segbtn + .segbtn { border-left: 1px solid var(--navy-700); }
.seg .segbtn[aria-current="page"] { background: var(--navy-700); color: var(--on-navy); }

.scorebox.big { gap: 16px; padding: 12px 16px; }
.scorebox.big .num { min-width: 0; font-size: 64px; }
.scorebox.big .cap { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.scorebox.big .nm { font-size: 17px; font-weight: 700; line-height: 1.25; }
.scorebox.big .sub { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.scale-m:not(:has(.scale-lbl)) { height: 14px; }
.panel-b.gtab { gap: 0; padding: 0; }
.gtab-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; }
.gtab .cond-t { font-size: 13px; letter-spacing: .1em; }
.gtab .dtab thead th { height: 28px; }
.gtab .dtab :is(th, td):first-child { width: 150px; }
.gtab .dtab thead th:nth-child(2), .gtab .dtab td:nth-child(2) { text-align: left; }
.gtab .dtab :is(th, td):last-child { width: 64px; padding-right: 16px; }
.gtab .dtab tbody th { font-weight: 400; }
.gtab .dtab tr:is(.hot, .sub, .total) th { font-weight: 700; }
.gtab .dtab td.score { font-weight: 700; }
.gtab .dtab.tall td, .gtab .dtab.tall tbody th { height: 32px; }
.chain { flex: 1 1 0; min-height: 52px; display: flex; align-items: stretch; gap: 8px; }
.chain .ct { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; background: var(--card); border: 1px solid var(--hairline); text-align: center; }
.chain .ct small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chain .ct b { font-size: 20px; line-height: 1.2; }
.chain .ct.final { flex-grow: 2; background: var(--navy-700); border-color: var(--navy-700); color: var(--on-navy); }
.chain .op { flex: none; align-self: center; font-size: 18px; font-weight: 700; color: var(--muted); }

/* ---------- NAB ACGIH & Snook ---------- */
.panel-b.zonep { gap: 10px; padding: 16px 23px; }
.zones { position: relative; width: 328px; height: 353px; flex: none; }
.zones img { display: block; width: 328px; height: 353px; }
.zcell { position: absolute; padding: 0; border: 1px solid var(--field-border); background: var(--zone-cell); color: var(--ink); font-size: 14px; font-weight: 700; }
.zcell.ta { background: var(--risk-4-soft); color: var(--risk-4-text); }
.zcell[aria-pressed="true"] { border: 3px solid var(--focus); background: var(--limit-bg); color: var(--limit-text); z-index: 1; }
.zone-t { font-size: 14px; line-height: 1.4; } .zone-t span { display: block; font-size: 12px; color: var(--muted); }
.trule { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid var(--hairline); font-size: 13px; }
.trule strong { flex: none; width: 60px; }
.trule.on { padding: 5px 9px; border: 2px solid var(--focus); background: var(--limit-bg); } .trule.on strong { color: var(--limit-text); }
.panel-b.atab { gap: 10px; font-size: 14px; }
.nabm thead th:first-child, .nabm tbody th { width: 38%; padding-left: 10px; text-align: left; }
.lvdot { display: inline-block; width: 12px; height: 12px; background: var(--lv-solid); vertical-align: middle; }
.mscore .num.sm { font-size: 36px; }
.scorebox .calc .nm { font-size: 16px; font-weight: 700; color: var(--lv-text, var(--muted)); }
.acgih-b .bands { --rw: 104px; }
.dtab.kv tbody th { width: 34%; padding-left: 16px; text-align: left; font-weight: 600; color: var(--ink-2); }
.dtab.kv td { text-align: left; }
.dtab.kv tr:is(.sub, .total) th { color: inherit; }

/* ---------- Angle Tool & panel foto ---------- */
.panel-h.sm { height: 40px; justify-content: space-between; font-size: 14px; }
.panel-b.at-presets { gap: 6px; padding: 10px; }
.at-presets .choice { flex-direction: row; align-items: center; min-height: 44px; padding: 0 12px; }
.at-presets .choice b { font-size: 14px; font-weight: 600; }
.col.at-mid { gap: 8px; }
.at-tools { flex: none; display: flex; gap: 4px; height: 44px; }
.at-tool { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 2px; border: 2px solid var(--field-border); border-radius: var(--r); background: var(--card); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-tool[aria-pressed="true"] { border-color: var(--focus); background: var(--limit-bg); color: var(--limit-text); }
.at-hint { flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; background: var(--card); border: 1px solid var(--hairline); font-size: 13px; }
.at-hint-t { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-hint .btn.sm { height: 32px; }
.at-hint select.fsel { width: auto; height: 32px; font-size: 13px; }
#at-zoom { width: 90px; height: 32px; }
.at-zoomv { width: 34px; font-weight: 600; }
.at-flex { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.at-holder { flex: 1 1 0; min-height: 0; display: flex; }
.at-wrap { position: relative; flex: 1 1 0; min-width: 0; background: var(--stage); }
.at-stage { position: absolute; inset: 0; overflow: auto; display: flex; }
.at-inner { position: relative; margin: auto; flex: none; }
.at-inner img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.at-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-x pan-y; }
.at-stage.drawing svg { touch-action: none; cursor: crosshair; }
.at-hit { fill: transparent; cursor: grab; touch-action: none; }
.at-handle { fill: var(--measure); stroke: var(--navy-900); pointer-events: none; }
.at-loupe { position: absolute; top: 8px; width: 132px; height: 132px; border: 2px solid var(--measure); background-color: var(--stage); background-repeat: no-repeat; box-shadow: 0 8px 24px var(--shadow); pointer-events: none; }
.at-empty { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: var(--stage); color: var(--on-navy-soft); text-align: center; }
.at-notes { flex: none; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.panel-b.at-res, .panel-b.at-save { gap: 10px; padding: 14px; }
.at-box { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--limit-bg); border: 2px solid var(--focus); }
.at-box .num { font-size: 52px; font-weight: 700; line-height: 1; color: var(--limit-text); white-space: nowrap; }
.at-box b { display: block; font-size: 15px; }
.at-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.at-targets .choice { min-height: 48px; }
.delta.plain { border: 0; background: transparent; font-weight: 400; color: var(--muted); }
.ptile-btn { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.ptile-btn .photo { width: 100%; height: 104px; }
.drawer { display: none; position: absolute; top: 16px; bottom: 16px; right: var(--gutter); z-index: 6; width: 380px; flex-direction: column; gap: 8px; padding-left: 12px; background: var(--canvas); border-left: 1px solid var(--hairline); }
.drawer.open { display: flex; }
.drawer > .panel-b { flex: 1 1 0; min-height: 0; overflow: auto; }
.drawer .photos { height: 180px; }
.drawer-x { width: 44px; height: 40px; margin-right: -16px; padding: 0; border: 0; background: transparent; color: var(--on-navy); font-size: 24px; line-height: 1; }

/* ---------- Perbandingan skenario ---------- */
.panel-b.cmp-side { gap: 10px; }
.cmp-t { font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.cmp-t:hover { color: var(--link); text-decoration: underline; }
.cmp-ph { position: relative; flex: 1 1 0; min-height: 160px; display: flex; align-items: center; justify-content: center; background: var(--photo-ph); border: 1px solid var(--field-border); overflow: hidden; }
.cmp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cmp-ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: var(--navy-700); color: var(--on-navy); font-size: 12px; }
.cmp-ph.empty { color: var(--muted); font-size: 13px; }
.dtab.cmp :is(th, td):nth-child(n+2) { width: 22%; }
.dtab.cmp tbody th { text-align: left; font-weight: 600; }
.dir { font-weight: 700; white-space: nowrap; }
.dir.good { color: var(--changed-text); } .dir.bad { color: var(--risk-5-text); } .dir.same { color: var(--muted); font-weight: 400; }
.dtab tr.total .dir, .dtab tr.total th { color: var(--on-navy) !important; }
.check.pick { flex: none; min-height: 44px; }

/* ---------- Ekspor PDF ---------- */
.xp-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--readonly); }
.xp { width: min(1080px, 100%); height: min(720px, 100%); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--navy-900); box-shadow: 0 12px 32px var(--shadow); }
.xp-h { flex: none; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: var(--navy-700); color: var(--on-navy); }
.xp-h h1 { font-size: 18px; } .xp-h span { font-size: 13px; color: var(--on-navy-soft); }
.xp-b { flex: 1 1 0; min-height: 0; display: flex; }
.xp-l { flex: none; width: 380px; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border-right: 1px solid var(--hairline); overflow: auto; }
.xp-r { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; background: var(--canvas); overflow: auto; }
.xp-rh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .xp-rh b { font-size: 15px; } .xp-rh span { font-size: 13px; color: var(--ink-2); }
.xp-thumbs { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 20px; }
.xp-th { display: flex; flex-direction: column; gap: 6px; }
.xp-frame { overflow: hidden; border: 1px solid var(--field-border); background: var(--card); }
.xp-scale { transform-origin: 0 0; }
.xp-th { padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: zoom-in; }
.xp-th .xp-frame { position: relative; transition: border-color .12s, box-shadow .12s; }
.xp-th:is(:hover, :focus-visible) .xp-frame { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.xp-zoom { position: absolute; right: 6px; bottom: 6px; display: flex; padding: 5px; background: var(--navy-700); color: var(--on-navy); opacity: .85; }
.xp-th:is(:hover, :focus-visible) .xp-zoom { opacity: 1; }
/* Pemilih kualitas pegangan (ilustrasi) */
.grip { display: flex; flex-direction: column; gap: 12px; }
.grip-legend { display: flex; gap: 8px; }
.grip-legend > span { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--lv-line); background: var(--lv-soft); color: var(--lv-text); font-size: 13px; font-weight: 700; opacity: .55; }
.grip-legend > span.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--lv-solid); }
.grip-legend small { font-size: 12px; font-weight: 400; }
.grip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grip-card { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.grip-card:hover { border-color: var(--lv-line); }
.grip-card img { display: block; width: 100%; aspect-ratio: 340 / 230; object-fit: contain; background: var(--card); }
.grip-t { flex: 1 1 auto; padding: 6px 10px 8px; font-size: 12px; line-height: 1.35; }
.grip-c { padding: 3px 10px; background: var(--lv-solid); color: var(--lv-on); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.grip-card[aria-checked="true"] { border-color: var(--lv-solid); box-shadow: inset 0 0 0 2px var(--lv-solid); background: var(--lv-soft); }
.grip-card[aria-checked="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--lv-solid); color: var(--lv-on); font-size: 14px; font-weight: 700; }
.grip-out { padding: 8px 12px; border: 1px solid var(--lv-line); background: var(--lv-soft); color: var(--lv-text); font-size: 14px; font-weight: 700; }
.grip-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: var(--r); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.grip-btn:hover { border-color: var(--focus); background: var(--limit-bg); }
.grip-btn-i { flex: none; display: flex; gap: 4px; }
.grip-btn-i > span { display: block; width: 52px; border: 1px solid var(--hairline); border-bottom: 4px solid var(--lv-solid); background: var(--card); }
.grip-btn-i > span.on { border-color: var(--lv-solid); box-shadow: 0 0 0 1px var(--lv-solid); }
.grip-btn-i img, .grip-btn.sm img { display: block; width: 100%; aspect-ratio: 340 / 230; object-fit: cover; }
.grip-btn-t { flex: 1 1 0; min-width: 0; } .grip-btn-t b { display: block; font-size: 14px; color: var(--link); } .grip-btn-t small { display: block; font-size: 12px; color: var(--muted); }
.grip-btn.sm { flex: none; width: 40px; height: 40px; min-height: 0; padding: 2px; justify-content: center; border: 2px solid var(--link); }
.grip-btn.sm img { height: 100%; aspect-ratio: auto; }
/* Pratinjau besar */
dialog.pv { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--stage); color: var(--ink); }
dialog.pv[open] { display: flex; flex-direction: column; }
dialog.pv::backdrop { background: var(--backdrop); }
.pv-h { flex: none; display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 16px 0 24px; background: var(--navy-700); color: var(--on-navy); }
.pv-t { flex: 1 1 0; min-width: 0; } .pv-t small { display: block; font-size: 12px; color: var(--on-navy-soft); } .pv-t b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-nav, .pv-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.pv-count { min-width: 56px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-h .btn { height: 40px; border-color: var(--on-navy-muted); background: transparent; color: var(--on-navy); }
.pv-h .btn:disabled { opacity: .45; }
.pv-h .btn.tertiary { border-color: transparent; }
.pv-h .btn.primary { border-color: var(--card); background: var(--card); color: var(--navy-700); }
.pv-x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--on-navy); cursor: pointer; }
.pv-x:hover { background: rgb(255 255 255 / .12); }
.pv-stage { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.pv-stage.actual { align-items: flex-start; justify-content: flex-start; }
.pv-stage.actual > .pv-frame { margin: 0 auto; }
.pv-frame { flex: none; overflow: hidden; background: var(--card); box-shadow: 0 8px 24px var(--shadow); }
.pv-f { flex: none; padding: 0 0 10px; text-align: center; font-size: 12px; color: var(--on-navy-soft); }
.xp-f { flex: none; height: 68px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 24px; border-top: 1px solid var(--hairline); }
.xp-fmt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 14px; border: 2px solid var(--hairline); border-radius: var(--r); background: var(--card); text-align: left; }
.xp-fmt[aria-pressed="true"] { border-color: var(--focus); background: var(--limit-bg); }
.xp-glyph { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.xp-glyph i { display: block; background: var(--card); border: 2px solid var(--navy-700); border-top-width: 6px; }
.g-potret { width: 22px; height: 31px; } .g-lanskap { width: 31px; height: 22px; } .g-slide { width: 34px; height: 19px; }
.xp-ft { flex: 1 1 0; } .xp-ft b { display: block; font-size: 15px; } .xp-ft small { display: block; font-size: 12px; color: var(--muted); }
.xp-radio { flex: none; width: 18px; height: 18px; border: 2px solid var(--field-border); border-radius: 50%; background: var(--card); }
.xp-fmt[aria-pressed="true"] .xp-radio { border: 6px solid var(--focus); }
.check.xp-tool > span { font-weight: 600; }
.check.soft { background: var(--panel); }

/* ---------- Halaman laporan (ukuran kertas tetap) ---------- */
.rp { flex: none; display: flex; flex-direction: column; overflow: hidden; background: var(--card); color: var(--ink); font-size: 11px; line-height: 1.35; }
.rp-h { flex: none; display: flex; align-items: center; gap: 24px; height: 52px; padding: 0 24px; background: var(--navy-700); color: var(--on-navy); }
.rp-ht { flex: 1 1 0; min-width: 0; }
.rp-ht small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--on-navy-muted); }
.rp-ht b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-hm { flex: none; display: flex; gap: 20px; font-size: 11px; color: var(--on-navy-soft); } .rp-hm strong { color: var(--on-navy); }
.rp-info { display: none; }
.rp-b { flex: 1 1 0; min-height: 0; display: flex; gap: 14px; padding: 14px 24px 8px; }
.rp-l { flex: none; width: 290px; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-r { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); text-align: center; }
.rp-stats b { display: block; font-size: 13px; font-weight: 700; color: var(--navy-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-stats small { font-size: 10px; color: var(--muted); }
.rp-score { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-score > .scorebox, .rp-score > .mtiles { flex: 1 1 100%; }
.rp-score.niosh { align-items: stretch; } .rp-score.niosh > .scorebox { flex: 1 1 0; }
.rp-scale { flex: 1 1 100%; }
.rp-arrow { flex: none; align-self: center; }
.rp .scorebox.md { padding: 6px 10px; } .rp .scorebox.md .num { font-size: 34px; } .rp .scorebox.md .lab { font-size: 11px; }
.rp .scorebox .cap { font-size: 9px; }
.rp .scorebox.big { padding: 10px 14px; } .rp .scorebox.big .num { font-size: 48px; } .rp .scorebox.big .nm { font-size: 15px; } .rp .scorebox.big .sub { font-size: 11px; }
.rp .scale-m { height: 28px; font-size: 11px; } .rp .scale-bar { height: 12px; } .rp .scale-t { font-size: 10px; }
.rp .mtile { padding: 4px 0; } .rp .mtile b { font-size: 15px; }
.rp-find { padding: 10px 12px; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note-text); font-size: 12px; line-height: 1.45; }
.rp-find p, .rp-plan p { margin: 0 0 4px; }
.rp-find { flex: none; }
.rp-plan { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 8px 12px; border: 1px solid var(--hairline); font-size: 10px; line-height: 1.38; }
.rp-plist { column-count: 2; column-gap: 18px; }
.rp-slide .rp-plist, .rp-potret .rp-plist { column-count: 3; }
.rp-plist p { break-inside: avoid; }
.rp-bt { margin-bottom: 4px; font-size: 13px; font-weight: 700; } .rp-find .rp-bt { color: var(--note-strong); }
.rp-tabs { flex: none; display: grid; gap: 12px; } .rp-tabs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-stack { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-tabs.rosa td:not(.score) { text-align: left; }
.rp-potret .rp-tabs.rosa { grid-template-columns: minmax(0, 1fr); } .rp-potret .rp-tabs.rosa .rp-card { order: 0; }
.rp-card { flex: none; min-width: 0; border: 1px solid var(--hairline); }
.rp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.rp-card-h small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.rp-badge { padding: 2px 8px; background: var(--lv-soft); border: 1px solid var(--lv-line); color: var(--lv-text); font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.rp-t { font-size: 11px; }
.rp-t thead th { height: 22px; font-size: 10px; }
.rp-t td, .rp-t tbody th { height: 19px; padding: 0 6px; }
.rp-t :is(th, td):first-child { padding-left: 12px; }
.rp-t tbody th { text-align: left; font-weight: 400; color: var(--ink-2); }
.rp-t tr:is(.m, .sub, .total, .hot, .li) th { font-weight: 700; color: inherit; }
.rp-t tr.sec th { height: 18px; background: var(--card); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rp-t td.score { font-weight: 700; }
.rp-t tr.li td { font-weight: 700; }
.rp-t tr.li td.on { background: var(--lv-soft); box-shadow: inset 0 0 0 2px var(--lv-line); color: var(--lv-text); }
.dtab.kv.rp-t tbody th { width: 34%; }
.rp .cx-pad { padding: 8px 12px 0; }
.rp .cond-n { padding: 6px 12px 8px; }
.rp-chain { flex: none; min-height: 44px; } .rp .chain .ct b { font-size: 16px; } .rp .chain .ct small { font-size: 9px; }
.rp-note { flex: none; font-size: 10px; font-style: italic; color: var(--muted); }
.rp-photos { flex: 1 1 0; min-height: 60px; display: flex; flex-direction: column; gap: 4px; }
.rp-photos .kicker { font-size: 10px; }
.rp-figs { flex: 1 1 0; min-height: 0; display: flex; gap: 8px; }
.rp-figs figure { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-img { position: relative; flex: 1 1 0; min-height: 0; background: var(--panel); border: 1px solid var(--hairline); }
.rp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rp-figs figcaption { font-size: 9px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-f { flex: none; display: flex; justify-content: space-between; margin: 0 24px; padding: 5px 0 8px; border-top: 1px solid var(--hairline); font-size: 10px; color: var(--muted); }
.rp-slide .rp-l { width: 340px; } .rp-slide .rp-b { padding: 14px 28px 8px; }
/* Potret: blok bertumpuk dari atas ke bawah */
.rp-potret .rp-h { height: 64px; padding: 0 28px; } .rp-potret .rp-ht b { font-size: 18px; }
.rp-potret .rp-info { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 28px 0; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); font-size: 12px; }
.rp-potret .rp-info small { display: block; font-size: 10px; color: var(--muted); } .rp-potret .rp-info b { font-weight: 600; }
.rp-potret .rp-b { flex-direction: column; gap: 10px; padding: 12px 28px; }
.rp-potret :is(.rp-l, .rp-r) { display: contents; }
.rp-potret .rp-stats { display: none; }
.rp-potret .rp-score { order: 1; flex-wrap: nowrap; } .rp-potret .rp-score > * { flex: 0 0 auto; }
.rp-potret .rp-score > .scorebox { width: 200px; } .rp-potret .rp-score > .scorebox.big { width: 300px; } .rp-potret .rp-score > .rp-scale { flex: 1 1 0; }
.rp-potret .rp-score > .mtiles { flex: 1 1 0; }
.rp-potret :is(.rp-tabs, .rp-card, .rp-chain) { order: 2; } .rp-potret .rp-note { order: 3; }
.rp-potret .rp-find { order: 4; } .rp-potret .rp-plan { order: 5; flex: none; } .rp-potret .rp-photos { order: 6; }
/* Halaman perbandingan */
.rp-cmp .col.fixed { flex: 0 0 300px; }
.rp-cmp .btn { display: none; }
.rp-cmp .panel-b { padding: 10px 12px; }
.print-root { display: none; }

/* ---------- PC: satu layar tanpa gulir halaman ---------- */
@media (min-width: 960px) {
  #app { height: 100dvh; overflow: hidden; }
  .only-m { display: none !important; }
}

/* ---------- Mobile: satu kolom ---------- */
@media (max-width: 959px) {
  .appbar { gap: 12px; }
  .appbar-nav { display: none; }
  .appbar-here { display: block; text-align: right; font-size: 13px; font-weight: 400; }
  .langsw, .appbar-link { display: none; }
  .langbtn { display: block; }
  .tabs { height: auto; flex-wrap: wrap; } .tabs button { flex: 1 1 30%; height: 44px; font-size: 14px; }
  .panel-b > .scroll { flex: none; overflow: visible; }
  .panel-foot { flex-wrap: wrap; }
  .kitem { flex-wrap: wrap; } .kitem-a { flex: 1 1 100%; } .kitem-a .btn { flex: 1 1 0; height: 44px; }
  .guide-2 { grid-template-columns: minmax(0, 1fr); }
  .only-pc { display: none !important; }
  .linkbtn { min-height: 44px; }
  .pagehead.tool .pagehead-meta { display: none; }
  .pagehead.tool .pagehead-t > :not(.whenfold) { display: none; }
  .whenfold > summary { min-height: 44px; }
  .whenfold > .fold-b { position: static; width: auto; max-height: none; box-shadow: none; padding: 12px; }
  .pagehead-acts { flex-wrap: wrap; } .pagehead-acts .seg { flex: 1 1 100%; } .pagehead-acts .btn { flex: 1 1 30%; }
  .nfig { height: 196px; } .nfig img.side { height: 184px; } .nfig img.top { width: 152px; }
  .vD { top: 46px; } .vV { top: 108px; } .vH { left: 36px; } .vA { top: 116px; }
  .panel-b.mults { gap: 10px; padding: 14px; }
  .panel-b > .ntabs { flex: none; flex-direction: column; } .fmcol { width: auto; } .tscroll { flex: none; max-height: 260px; }
  .panel-b.cond { flex: none; overflow: visible; }
  .cond .dtab td { height: 52px; } .cin { height: 44px; font-size: 16px; }
  .nres .btn.block { height: 48px; } select.cin { width: 92px; font-size: 14px; }
  .cond .dtab :is(th, td):first-child { padding-left: 12px; } .cond .dtab :is(th, td):nth-child(n+2) { width: 100px; padding: 0 2px; } .cond .dtab :is(th, td):last-child { width: 104px; padding-right: 8px; }
  .lirow { grid-template-columns: 1fr 100px 104px; padding: 0 8px 0 12px; }
  button.tag { height: 44px; padding: 0 10px; }
  .ndlg { grid-template-columns: minmax(0, 1fr); }
  .appbar-here { display: flex; justify-content: flex-end; }
  .choices:has(> .choice.dur) { grid-template-columns: minmax(0, 1fr); } .choice.dur { min-height: 44px; } .choices:has(> .choice.adj) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grip-btn.sm { width: 44px; height: 44px; } .grip-legend { flex-wrap: wrap; }
  .pv-h { flex-wrap: wrap; height: auto; gap: 8px; padding: 8px 8px 8px 16px; } .pv-t { flex: 1 1 calc(100% - 60px); order: 0; } .pv-acts { display: contents; } .pv-acts .pv-x { order: 1; }
  .pv-nav { order: 2; flex: 1 1 100%; } .pv-nav .btn { flex: 1 1 0; height: 44px; } .pv-acts > .btn { order: 3; flex: 1 1 0; height: 44px; }
  .pv-stage { padding: 12px; align-items: flex-start; }
  .xp-wrap { padding: 0; align-items: stretch; } .xp { height: auto; border: 0; box-shadow: none; } .xp-b { flex-direction: column; } .xp-l { width: auto; border-right: 0; border-bottom: 1px solid var(--hairline); } .xp-f { position: sticky; bottom: 0; background: var(--card); }
  .cmp-ph { flex: none; height: 220px; }
  .drawer { display: flex; position: static; width: auto; padding: 0; border: 0; }
  .drawer > .panel-b { flex: none; overflow: visible; }
  .panel-b.at-presets { flex-direction: row; overflow-x: auto; } .at-presets .choice { flex: none; } .at-presets .spacer { display: none; }
  .at-tools { height: auto; overflow-x: auto; } .at-tool { flex: 0 0 auto; padding: 0 12px; }
  .at-hint { flex-wrap: wrap; padding: 8px 12px; } .at-hint-t { flex-basis: 100%; white-space: normal; } .at-hint .btn.sm, .at-hint select.fsel { height: 44px; } #at-zoom { height: 44px; flex: 1 1 0; }
  .at-holder { flex: none; height: 62vh; }
  .at-notes { flex-direction: column; gap: 2px; }
  .panel-b.zonep { padding: 14px; align-items: center; } .zone-t { align-self: stretch; }
  .stepper > .btn:first-child, .stepper > .btn:last-child, .stepper > .nowrap { display: none; }
  .stepchip { flex: 0 0 44px; height: 44px; }
  .pgrid2 { flex: none; grid-template-columns: minmax(0, 1fr); }
  .pcard-top { flex-direction: column; gap: 14px; }
  .psel { width: auto; flex-direction: row; align-items: center; gap: 12px; }
  .psel-img { flex: none; width: 150px; height: 160px; } .psel-img img { max-width: 138px; max-height: 148px; }
  .psel b { font-size: 16px; }
  .pcard .choice.pic img { height: 84px; }
  .pcard .choices { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .pcard .choice.pic small { display: none; }
  .pangle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px; }
  .pangle-l { width: auto; } .pangle .fbox { grid-column: 2; grid-row: 1; height: 48px; } .pangle-r { grid-column: 1 / -1; }
  .pangle-r input[type="range"] { height: 44px; }
  .chain { flex: none; flex-wrap: wrap; } .chain .ct { flex: 1 0 28%; min-height: 56px; } .chain .ct.final { flex-basis: 100%; }
  .gtab .dtab :is(th, td):first-child { width: 110px; padding-left: 12px; } .gtab .dtab td, .gtab .dtab tbody th { height: 40px; }
  .kitem-t > a { padding: 10px 0; }
  .panel-foot a:not(.btn) { display: inline-block; padding: 12px 0; }
  .pagehead { flex-wrap: wrap; gap: 8px 16px; padding: 12px var(--gutter); }
  .pagehead-t { flex-basis: 100%; } .pagehead-t h1 { font-size: 20px; }
  .pagehead-meta { flex-wrap: wrap; gap: 4px 16px; }
  .pagehead-acts { flex: 1 1 100%; } .pagehead-acts .btn { flex: 1 1 0; height: 48px; padding: 0 10px; }
  .work { flex: none; flex-direction: column; padding: 16px var(--gutter) 24px; }
  .col, .col.fixed { flex: none; }
  .panel-h { font-size: 15px; }
  .panel-b.grow { flex: none; overflow: visible; }
  .sticky-score { position: sticky; top: 0; z-index: 10; }
  .btn.sm, .chipbtn { height: 44px; }
  .fcode { width: 44px; }
  .choices { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .dlg-f .btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Cetak (Ekspor PDF) ---------- */
@media print {
  html, body { height: auto; background: var(--card); }
  body > :not(.print-root) { display: none !important; }
  .print-root { display: block; }
  .rp { break-after: page; page-break-after: always; }
  .rp:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}