/* Layout: buku kerja teknisi jaringan. Sidebar daftar bab bertanda warna tabung serat optik (kode warna TIA-598:
   1 biru, 2 oranye, 3 hijau, 4 coklat, 5 abu-abu, 6 putih), kolom bacaan ±46rem, alat praktik memakai dua panel. */
:root {
  --paper: #f2f5f6;
  --card: #ffffff;
  --sunk: #e8eef0;
  --ink: #13212a;
  --ink-2: #41525c;
  --ink-3: #687983;
  --line: #d3dce0;
  --mask: #08697a;          /* aqua jaket serat optik: aksen utama */
  --mask-ink: #ffffff;
  --mask-soft: #d8edf0;
  --copper: #b4531a;        /* konduktor tembaga: aksen kedua */
  --copper-soft: #f7e4d6;
  --wave: #6b4fc0;          /* gelombang radio (nirkabel) */
  --wave-soft: #ebe5fa;
  --board: #183a4a;
  --board-ink: #e3f1f5;
  --code-bg: #f6f9fa;
  --term-bg: #0d161b;
  --term-fg: #cde6ee;
  --term-dim: #7f9ca8;
  --term-in: #ffd98a;
  --ok: #1d7f47; --ok-soft: #dcf1e4;
  --warn: #9a6210; --warn-soft: #f8ecd3;
  --err: #b9372a; --err-soft: #f9e0dc;
  /* kode warna serat optik TIA-598: nomor bab = warna tabung */
  --band-1: #2160c4; --band-2: #e27a12; --band-3: #2a8c45; --band-4: #7a4a2a; --band-5: #6e7c86; --band-6: #f6f6f2;
  --syn-kw: #8a2f6e; --syn-type: #08697a; --syn-str: #b4531a; --syn-num: #2160c4; --syn-com: #7b8a90; --syn-meta: #6b4fc0; --syn-fn: #1c4f8a;
  --shadow: 0 1px 2px rgb(19 33 42 / 6%), 0 6px 20px rgb(19 33 42 / 7%);
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --fs-xs: .75rem; --fs-s: .875rem; --fs-m: 1rem; --fs-l: 1.1875rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --side-w: 272px;
  --top-h: 56px;
  --tab-h: 62px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1316; --card: #141c20; --sunk: #0f171b; --ink: #e2ebee; --ink-2: #b0c0c6; --ink-3: #82949b; --line: #26343a;
    --mask: #4fc6d6; --mask-ink: #04222a; --mask-soft: #12313a; --copper: #ee9a5e; --copper-soft: #35241a;
    --wave: #a891f2; --wave-soft: #241d3a; --board: #17394a; --board-ink: #e3f1f5; --code-bg: #10191d;
    --ok: #59c784; --ok-soft: #15301f; --warn: #e3ab52; --warn-soft: #33270f; --err: #f27b6e; --err-soft: #3a1b17;
    --band-1: #5b93ee; --band-2: #f29a4e; --band-3: #58c27a; --band-4: #b07a55; --band-5: #9aa8b2; --band-6: #eeeeea;
    --syn-kw: #e48fd0; --syn-type: #5fd0e0; --syn-str: #f0a874; --syn-num: #86b4f2; --syn-com: #6f8288; --syn-meta: #b9a1f4; --syn-fn: #8fc1ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1316; --card: #141c20; --sunk: #0f171b; --ink: #e2ebee; --ink-2: #b0c0c6; --ink-3: #82949b; --line: #26343a;
  --mask: #4fc6d6; --mask-ink: #04222a; --mask-soft: #12313a; --copper: #ee9a5e; --copper-soft: #35241a;
  --wave: #a891f2; --wave-soft: #241d3a; --board: #17394a; --board-ink: #e3f1f5; --code-bg: #10191d;
  --ok: #59c784; --ok-soft: #15301f; --warn: #e3ab52; --warn-soft: #33270f; --err: #f27b6e; --err-soft: #3a1b17;
  --band-1: #5b93ee; --band-2: #f29a4e; --band-3: #58c27a; --band-4: #b07a55; --band-5: #9aa8b2; --band-6: #eeeeea;
  --syn-kw: #e48fd0; --syn-type: #5fd0e0; --syn-str: #f0a874; --syn-num: #86b4f2; --syn-com: #6f8288; --syn-meta: #b9a1f4; --syn-fn: #8fc1ff;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%);
  color-scheme: dark;
}

/* ------------------------------ dasar ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-m); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--card); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 750; }
h3 { font-size: var(--fs-l); font-weight: 700; }
p { margin: 0; }
a { color: var(--mask); text-underline-offset: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .9em; }
:not(pre) > code { background: var(--sunk); padding: .08em .35em; border-radius: 4px; white-space: nowrap; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--copper); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------ kerangka aplikasi ------------------------------ */
.app { min-height: 100vh; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  height: var(--top-h); display: flex; align-items: center; gap: 10px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); cursor: pointer;
}
.icon-btn:hover { border-color: var(--ink-3); }
.icon-btn svg { width: 20px; height: 20px; }

.sidebar {
  position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(var(--side-w), 86vw);
  background: var(--card); border-right: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 16px) max(14px, env(safe-area-inset-left, 0px));
  overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease;
  display: flex; flex-direction: column; gap: 18px;
}
.sidebar.open { transform: none; box-shadow: var(--shadow); }
.scrim { position: fixed; inset: 0; z-index: 45; background: rgb(8 14 12 / 45%); }
.brand { display: flex; gap: 10px; align-items: center; padding: 2px 4px; text-decoration: none; color: inherit; }
.brand-chip { width: 38px; height: 38px; flex: none; }
.brand b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; }
.brand small { color: var(--ink-3); font-size: var(--fs-xs); }
.progress-box { background: var(--sunk); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 6px; }
.progress-box .row { display: flex; justify-content: space-between; font-size: var(--fs-s); color: var(--ink-2); }
.meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--mask); border-radius: inherit; transition: width .3s; }
.nav-group { display: grid; gap: 2px; }
.nav-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; padding: 0 8px 4px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 550;
}
.nav-link:hover { background: var(--sunk); color: var(--ink); }
.nav-link.active { background: var(--mask-soft); color: var(--ink); }
.nav-link .nav-sub { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.nav-ico { width: 22px; display: inline-grid; place-items: center; flex: none; color: var(--ink-3); }
.nav-ico svg { width: 18px; height: 18px; }

/* tabung serat optik kecil penanda bab: jaket berwarna + konektor di ujung */
.rbar {
  width: 22px; height: 8px; border-radius: 4px; flex: none; position: relative; margin-right: 6px;
  background: var(--b, var(--band-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.rbar::after { content: ""; position: absolute; right: -7px; top: -2px; width: 7px; height: 12px; border-radius: 2px; background: var(--ink-3); }
.rbar::before { content: ""; position: absolute; right: -10px; top: 2px; width: 3px; height: 4px; border-radius: 1px; background: var(--ink-3); opacity: .7; }
.nav-link .rbar { margin: 0 10px 0 2px; }
.b1 { --b: var(--band-1); } .b2 { --b: var(--band-2); } .b3 { --b: var(--band-3); } .b4 { --b: var(--band-4); } .b5 { --b: var(--band-5); } .b6 { --b: var(--band-6); }

.main { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 24px); min-width: 0; }
.tabbar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.tabbar a, .tabbar button {
  display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); text-decoration: none; font-size: .7rem; font-weight: 650; border-radius: var(--r-s);
}
.tabbar svg { width: 22px; height: 22px; }
.tabbar .active { color: var(--mask); }

@media (min-width: 1024px) {
  .sidebar { transform: none; top: 0; bottom: 0; width: var(--side-w); box-shadow: none; }
  .scrim, .tabbar, .menu-btn { display: none !important; }
  .app { padding-left: var(--side-w); }
  .main { padding-bottom: 48px; }
}

/* ------------------------------ tampilan (view) ------------------------------ */
.view { padding-block: 28px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 46rem; margin: 0 auto; display: grid; gap: 22px; }
.wrap-wide { max-width: 76rem; margin: 0 auto; display: grid; gap: 18px; }
.wrap > *, .wrap-wide > * { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: var(--fs-l); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-s); }
.chap-head { display: grid; gap: 12px; padding-bottom: 6px; }
.chap-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.chap-head .rbar { width: 30px; height: 10px; }
section.block { display: grid; gap: 14px; scroll-margin-top: calc(var(--top-h) + 10px); }
section.block > h2 { font-size: var(--fs-xl); display: flex; gap: 10px; align-items: baseline; }
section.block > h2 .num { font-family: var(--font-mono); font-size: .8em; color: var(--copper); font-weight: 600; }
.stack { display: grid; gap: 10px; }
ul.list, ol.list { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
ol.list li::marker { font-family: var(--font-mono); color: var(--copper); font-size: .9em; }
.callout { border-radius: var(--r-m); padding: 12px 14px; background: var(--sunk); border: 1px solid var(--line); display: grid; gap: 6px; }
.callout.tip { background: var(--mask-soft); border-color: color-mix(in srgb, var(--mask) 30%, transparent); }
.callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.callout b.t { font-family: var(--font-display); }
.pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 2px; text-decoration: none; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; flex: 1 1 200px; }
.pager a small { color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pager a.next { text-align: right; }

/* tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border-radius: var(--r-m); border: 1px solid transparent; cursor: pointer; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--mask); color: var(--mask-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-copper { background: var(--copper); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-ghost.small, .btn.small { min-height: 34px; padding: 5px 11px; font-size: var(--fs-s); }
.btn-danger { background: var(--err); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* tabel */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); }
table.tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { background: var(--sunk); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td code { white-space: nowrap; }
.tbl.kv th { width: 34%; white-space: normal; }

/* kartu & grid */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; display: grid; gap: 8px; align-content: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.panel > h3 { display: flex; align-items: center; gap: 8px; }
.widget { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow); min-width: 0; }
.widget-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.widget-title .tag { margin-left: auto; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--err-soft); color: var(--err); }
.tag.mask { background: var(--mask-soft); color: var(--mask); }
.seg { display: inline-flex; background: var(--sunk); border-radius: var(--r-m); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: var(--fs-s); font-weight: 650; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
input[type="text"], input[type="number"], select, textarea {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-s); padding: 8px 10px; min-height: 40px; max-width: 100%;
}
input[type="range"] { width: 100%; accent-color: var(--mask); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mask); width: 18px; height: 18px; }
label.field { display: grid; gap: 4px; font-size: var(--fs-s); font-weight: 650; color: var(--ink-2); }
details.reveal { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); }
details.reveal summary { cursor: pointer; padding: 10px 14px; font-weight: 650; list-style: none; display: flex; gap: 8px; align-items: center; }
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary::before { content: "+"; font-family: var(--font-mono); color: var(--copper); width: 1em; }
details.reveal[open] summary::before { content: "−"; }
details.reveal > div { padding: 0 14px 12px 36px; color: var(--ink-2); display: grid; gap: 8px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); cursor: pointer; }
.checklist input { margin-top: 3px; flex: none; }
.checklist input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--mask); }

/* ------------------------------ beranda ------------------------------ */
.hero { display: grid; gap: 22px; align-items: center; }
.hero-copy { display: grid; gap: 16px; }
.hero-copy h1 em { font-style: normal; color: var(--mask); }
.hero-demo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px; display: grid; gap: 12px; box-shadow: var(--shadow); min-width: 0; }
.hero-demo .demo-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.hero-led { width: 64px; display: grid; justify-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.hero-code { font-family: var(--font-mono); font-size: .8rem; background: var(--code-bg); border-radius: var(--r-m); padding: 10px 0; margin: 0; overflow-x: auto; line-height: 1.55; }
.hero-code span.ln { display: block; padding: 0 12px; border-left: 3px solid transparent; white-space: pre; }
.hero-code span.ln.now { background: var(--copper-soft); border-left-color: var(--copper); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact { border-top: 2px solid var(--ink); padding-top: 8px; display: grid; gap: 2px; }
.fact b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.fact span { color: var(--ink-2); font-size: var(--fs-s); }
.chap-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.chap-card { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); position: relative; overflow: hidden; }
.chap-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--b); }
.chap-card:hover { border-color: var(--b); }
.chap-card .k { font-size: var(--fs-xs); font-weight: 750; color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.chap-card h3 { font-size: 1.08rem; }
.chap-card p { color: var(--ink-2); font-size: var(--fs-s); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* pola pertemuan: batang proporsional 180 menit */
.timebar { display: flex; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.timebar div { padding: 8px 8px; font-size: var(--fs-xs); display: grid; gap: 2px; min-width: 0; border-right: 1px solid var(--card); }
.timebar div:last-child { border-right: 0; }
.timebar b { font-family: var(--font-mono); font-size: var(--fs-s); }
.timebar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb1 { background: var(--sunk); } .tb2 { background: var(--copper-soft); } .tb3 { background: var(--mask-soft); } .tb4 { background: color-mix(in srgb, var(--band-6) 18%, var(--card)); } .tb5 { background: var(--sunk); }

/* peta pertemuan */
.meet { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); min-width: 0; }
.meet-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.meet input { margin-top: 4px; flex: none; }
.meet .no { font-family: var(--font-mono); font-weight: 700; color: var(--copper); min-width: 2ch; }
.meet .t { font-weight: 650; }
.meet .d { color: var(--ink-3); font-size: var(--fs-s); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding-left: calc(18px + 2ch + 24px); }
.meet-more summary { cursor: pointer; font-size: var(--fs-s); font-weight: 650; color: var(--mask); padding-left: calc(18px + 2ch + 24px); width: fit-content; }
.meet-dl { margin: 8px 0 2px; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-s); }
.meet-dl dt { font-weight: 700; color: var(--ink-2); }
.meet-dl dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .meet .d, .meet-more summary { padding-left: 0; }
  .meet-dl { grid-template-columns: 1fr; gap: 2px; }
  .meet-dl dd { margin-bottom: 8px; }
}
.meet.done { background: var(--sunk); }
.meet.done .t { color: var(--ink-3); }
.meet-list { display: grid; gap: 8px; }
.meet-group { display: grid; gap: 8px; }
.meet-group > h3 { display: flex; gap: 10px; align-items: center; font-size: 1rem; }

/* ------------------------------ kode & snippet ------------------------------ */
.snippet { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--code-bg); overflow: hidden; min-width: 0; }
.snippet-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.snippet-bar .fname { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-right: auto; display: flex; align-items: center; gap: 6px; }
.snippet > pre { margin: 0; padding: 12px 0; overflow-x: auto; font-family: var(--font-mono); font-size: .84rem; line-height: 1.6; }
.snippet > pre .ln { display: block; padding: 0 14px 0 0; white-space: pre; }
.snippet > pre .ln::before { content: attr(data-n); display: inline-block; width: 2.6em; padding-right: .9em; text-align: right; color: var(--ink-3); opacity: .7; user-select: none; }
.snippet > pre .ln.hl { background: var(--copper-soft); }
.snippet > pre .ln.click { cursor: pointer; }
.snippet > pre .ln.click:hover { background: var(--mask-soft); }
.snippet-run { border-top: 1px solid var(--line); }
.annot-box { margin: 0 12px 12px; }
.cm-keyword { color: var(--syn-kw); font-weight: 600; }
.cm-type, .cm-variable-3 { color: var(--syn-type); font-weight: 600; }
.cm-string, .cm-string-2 { color: var(--syn-str); }
.cm-number, .cm-atom { color: var(--syn-num); }
.cm-comment { color: var(--syn-com); font-style: italic; }
.cm-meta { color: var(--syn-meta); }
.cm-builtin, .cm-def { color: var(--syn-fn); }
.cm-operator { color: var(--ink-2); }

/* terminal */
.term { background: var(--term-bg); color: var(--term-fg); font-family: var(--font-mono); font-size: .84rem; min-width: 0; display: grid; }
.term-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--term-dim); font-size: var(--fs-xs); border-bottom: 1px solid rgb(255 255 255 / 8%); }
.term-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--term-dim); }
.term-head .dot.run { background: #4cd38a; box-shadow: 0 0 8px #4cd38a; }
.term-head .dot.wait { background: var(--term-in); }
.term-head .dot.err { background: #ff7b6b; }
.term-head .status { margin-right: auto; }
.term-head button { background: none; border: 1px solid rgb(255 255 255 / 15%); color: var(--term-fg); border-radius: 6px; font-size: var(--fs-xs); padding: 2px 8px; cursor: pointer; }
.term-out { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; overflow-y: auto; min-height: 90px; max-height: 340px; line-height: 1.5; }
.term-out .in { color: var(--term-in); }
.term-out .sys { color: var(--term-dim); }
.term-out .bad { color: #ff9d90; }
.term-input { display: inline; background: transparent; border: 0; outline: 0; color: var(--term-in); font: inherit; min-width: 4ch; width: 12ch; padding: 0; caret-color: var(--term-in); border-bottom: 1px dashed var(--term-in); }
.term-send { display: none; gap: 8px; padding: 8px 10px; border-top: 1px solid rgb(255 255 255 / 8%); align-items: center; color: var(--term-dim); font-size: var(--fs-xs); }
.term.waiting .term-send { display: flex; }
.term-send button { margin-left: auto; background: var(--term-in); color: #2a1f05; border: 0; border-radius: 6px; padding: 5px 12px; font-weight: 700; font-size: var(--fs-s); cursor: pointer; }

/* diagnostik */
.diags { display: grid; gap: 6px; }
.diag { border-radius: var(--r-m); padding: 9px 12px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 4px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.diag .msg { font-family: var(--font-mono); font-size: .8rem; word-break: break-word; }
.diag .hint { font-size: var(--fs-s); color: var(--ink-2); }
.diag.error { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.diag.error .msg b { color: var(--err); }
.diag.warning { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.diag.warning .msg b { color: var(--warn); }
.diag.runtime { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }

.editor { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--code-bg); min-width: 0; display: grid; }
.editor-head { display: flex; gap: 8px; align-items: center; padding: 6px 10px; background: var(--card); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; }
.editor-head .fname { margin-right: auto; }
.editor-head .fname-input { margin-right: auto; flex: 1 1 9rem; min-width: 0; max-width: 16rem; min-height: 32px; padding: 3px 8px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); background: var(--sunk); border-color: transparent; }
.editor-head .fname-input:focus { background: var(--card); border-color: var(--line); }
.editor textarea.plain { width: 100%; min-height: 320px; border: 0; border-radius: 0; background: var(--code-bg); font-family: var(--font-mono); font-size: .9rem; line-height: 1.55; padding: 10px 12px; resize: vertical; tab-size: 4; }
.symbar { display: flex; gap: 4px; overflow-x: auto; padding: 6px 8px; background: var(--card); border-top: 1px solid var(--line); scrollbar-width: none; }
.symbar::-webkit-scrollbar { display: none; }
.symbar button { flex: none; min-width: 38px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); font-family: var(--font-mono); font-size: .95rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.symbar button:active { background: var(--mask-soft); }
/* ------------------------------ compiler & simulator ------------------------------ */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar select { min-width: 0; flex: 1 1 200px; }
.toolbar .grow { flex: 1; }
.tool-grid { display: grid; gap: 14px; }
.tool-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1100px) {
  .tool-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .tool-col.sticky { position: sticky; top: calc(var(--top-h) + 14px); }
}
/* ------------------------------ widget materi ------------------------------ */
.decl-out { font-family: var(--font-mono); font-size: .9rem; background: var(--code-bg); border-radius: var(--r-m); padding: 10px 12px; overflow-x: auto; white-space: pre; }
.compare { display: grid; gap: 12px; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }

/* kuis */
.quiz { display: grid; gap: 14px; }
.q { border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px; background: var(--card); display: grid; gap: 10px; }
.q-head { display: flex; gap: 10px; align-items: baseline; }
.q-head .n { font-family: var(--font-mono); color: var(--copper); font-weight: 700; }
.q pre { margin: 0; }
.q-opts { display: grid; gap: 6px; }
.q-opts label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: var(--r-m); border: 1px solid var(--line); cursor: pointer; }
.q-opts label:hover { border-color: var(--ink-3); }
.q-opts input { margin-top: 3px; flex: none; }
.q.done .q-opts label.right { background: var(--ok-soft); border-color: var(--ok); }
.q.done .q-opts label.wrong { background: var(--err-soft); border-color: var(--err); }
.q-expl { font-size: var(--fs-s); color: var(--ink-2); border-left: 3px solid var(--mask); padding-left: 10px; }
.score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-l); background: var(--sunk); }
.score b { font-family: var(--font-display); font-size: 1.6rem; }
.verdict { font-weight: 650; font-size: var(--fs-s); }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--err); }
.rubric-row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rubric-row:last-child { border-bottom: 0; }
.rubric-row .head { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.rubric-row .head span { font-family: var(--font-mono); color: var(--ink-3); font-weight: 600; }
.rubric-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rubric-opts label { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; font-size: var(--fs-xs); cursor: pointer; display: grid; gap: 4px; align-content: start; color: var(--ink-2); }
.rubric-opts label b { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ink); }
.rubric-opts input { position: absolute; opacity: 0; pointer-events: none; }
.rubric-opts label:has(input:checked) { border-color: var(--mask); background: var(--mask-soft); }
.rubric-opts label:has(input:focus-visible) { outline: 2.5px solid var(--copper); }
@media (max-width: 640px) { .rubric-opts { grid-template-columns: 1fr 1fr; } }
.rubric-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rubric-total b { font-family: var(--font-display); font-size: 2.2rem; }
.search { width: 100%; }
mark { background: var(--copper-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.cheat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cheat-row:last-child { border-bottom: 0; }
.cheat-row code { white-space: normal; word-break: break-word; }
.cheat-row .d { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--ink-2); margin-top: -4px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 99px; font-size: var(--fs-s); font-weight: 650; z-index: 70; box-shadow: var(--shadow); }
@media (min-width: 1024px) { .toast { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Ligatur font dimatikan agar <= tetap terlihat <= (bukan ≤) seperti yang harus diketik siswa */
code, pre, kbd, .mono, .term, .codeviz, .symbar button, textarea.cfg {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
.editor-head .btn { font-family: var(--font-body); }
.field > input, .field > select { width: 100%; }
details.reveal summary code, .q-head code, .callout code { white-space: normal; overflow-wrap: anywhere; }
details.reveal, details.reveal summary { min-width: 0; }
.decl-out { white-space: pre-wrap; overflow-wrap: anywhere; }
/* petunjuk bertahap di soal tebak output */
.hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hints li { border-left: 3px solid var(--copper); background: var(--copper-soft); padding: 8px 12px; border-radius: 0 var(--r-m) var(--r-m) 0; font-size: var(--fs-s); line-height: 1.5; }
.hints .hint-k { display: block; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--copper); }
.hints code { white-space: normal; }
/* bilah tab di dalam halaman (Asesmen) */
.tabnav {
  position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 15;
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.tabnav::-webkit-scrollbar { display: none; }
.tabnav a { flex: none; padding: 7px 14px; border-radius: 99px; text-decoration: none; color: var(--ink-2); font-weight: 650; font-size: var(--fs-s); border: 1px solid var(--line); background: var(--card); }
.tabnav a:hover { border-color: var(--ink-3); }
.tabnav a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tab-card { text-decoration: none; color: inherit; }
.tab-card:hover { border-color: var(--mask); }
.tab-panel { scroll-margin-top: calc(var(--top-h) + 60px); }
/* status jaringan & tautan yang butuh internet */
.netbar {
  position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 38;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: var(--warn-soft); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size: var(--fs-s);
}
a.ext:not(.btn)::after { content: "↗"; font-size: .8em; margin-left: 2px; text-decoration: none; display: inline-block; }

/* ============================== media ajar jaringan ============================== */
.chap-card.b6::after { box-shadow: inset -1px 0 0 var(--line); }
.cm-type { font-weight: 600; }
/* beranda: satu huruf, tiga media */
.hero-send { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; align-items: end; }
.hero-send input { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; text-align: center; }
.hero-bits { display: grid; gap: 2px; }
.hero-bits b { font-size: 1.4rem; letter-spacing: .16em; color: var(--copper); }
.media3 { width: 100%; display: block; }
.m3-lab { fill: var(--ink-3); font-family: var(--font-body); font-size: 10px; font-weight: 650; }
.m3-cu { fill: color-mix(in srgb, var(--copper) 10%, var(--card)); stroke: var(--line); }
.m3-air { fill: var(--wave-soft); stroke: var(--line); }
.m3-fo { fill: color-mix(in srgb, #e8c547 22%, var(--card)); stroke: var(--line); }
.m3-core { fill: color-mix(in srgb, var(--mask) 14%, var(--card)); }
.m3-sig { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.m3-sig.cu { stroke: var(--copper); }
.m3-sig.air { stroke: var(--wave); stroke-width: 1.6; }
.m3-pulse { fill: color-mix(in srgb, var(--mask) 40%, transparent); transition: fill .15s, filter .15s; }
.m3-pulse.on { fill: #fff7b0; filter: drop-shadow(0 0 5px #ffe14d); }
.m3-cursor { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }

/* grafik & diagram umum */
.sigplot, .serpar, .hirarki, .jarlok, .dsl, .twist, .elemen, .magrid, .modefig, .topo, .rssi, .jit, .pbxfig, .h323, .snell, .wdm, .wincurve, .fomode, .ftth, .komdat { width: 100%; display: block; }
.sp-axis { stroke: var(--ink-3); stroke-width: 1; }
.sp-div { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-lab { fill: var(--ink-3); font-family: var(--font-body); font-size: 9.5px; font-weight: 600; }
.sp-sig { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.sp-sig.dig { stroke: var(--copper); }
.sp-sig.ana { stroke: var(--mask); }
.sp-sig.b { stroke: var(--wave); }
.sp-box { fill: var(--sunk); stroke: var(--line); }
.sp-line { stroke: var(--line); stroke-width: 2; }
.sp-bit circle { fill: var(--card); stroke: var(--ink-3); }
.sp-bit.one circle { fill: var(--copper); stroke: var(--copper); }
.sp-bit text { font-family: var(--font-mono); font-size: 7px; font-weight: 700; fill: var(--ink); }
.sp-bit.one text { fill: #fff; }
.bitgrp { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 8px; border-radius: 6px; background: var(--sunk); margin: 2px 0; }
.bitgrp b { color: var(--copper); }
.band-fig { width: 100%; max-width: 260px; }
.band-fig text { fill: var(--ink); font-family: var(--font-body); font-size: 8.5px; font-weight: 650; text-anchor: middle; }
.bf-ch1 { fill: color-mix(in srgb, var(--band-1) 30%, var(--card)); }
.bf-ch2 { fill: color-mix(in srgb, var(--band-2) 30%, var(--card)); }
.bf-ch3 { fill: color-mix(in srgb, var(--band-3) 30%, var(--card)); }
.bf-axis { stroke: var(--ink-3); }

/* node diagram */
.nd rect, .nd circle { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.4; transition: fill .15s, stroke .15s; }
.nd text { fill: var(--ink); font-family: var(--font-body); font-size: 9.5px; font-weight: 700; }
.nd .nd-sub, .nd-sub { fill: var(--ink-3); font-family: var(--font-body); font-size: 8px; font-weight: 600; }
.nd.dev rect { fill: var(--sunk); }
.nd.ap circle { fill: var(--mask-soft); stroke: var(--mask); }
.nd.hl rect, .nd.hl circle { fill: var(--copper-soft); stroke: var(--copper); stroke-width: 2; }
.nd[data-k] { cursor: pointer; }
.nd.sel rect, .nd.sel circle, [data-k].sel rect { fill: var(--mask-soft); stroke: var(--mask); stroke-width: 2.2; }
.nd:focus-visible { outline: none; }
.nd:focus-visible rect, .nd:focus-visible circle { stroke: var(--copper); stroke-width: 2.4; }
.lk { stroke: var(--ink-3); stroke-width: 1.6; }
.lk.dash { stroke-dasharray: 4 3; }
.lk.air { stroke: var(--wave); stroke-dasharray: 2 4; stroke-width: 2.4; stroke-linecap: round; }
.lk.fo { stroke: #e0b400; stroke-width: 3; }
.lk.sig { stroke: var(--copper); stroke-width: 2.6; stroke-dasharray: 5 3; }
.lk.med { stroke: var(--mask); stroke-width: 3.2; stroke-dasharray: none; }
.wv { fill: none; stroke: var(--wave); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }

/* komunikasi data */
.kd-node rect { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.4; }
.kd-node text { fill: var(--ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-anchor: middle; }
.kd-node .kd-sub { fill: var(--ink-3); font-size: 9px; font-weight: 600; }
.kd-node { cursor: pointer; }
.kd-node.sel rect, .kd-node.sel .kd-wire { stroke: var(--mask); stroke-width: 2.4; }
.kd-node.sel .kd-proto { fill: var(--mask-soft); }
.kd-wire { stroke: var(--copper); stroke-width: 4; stroke-linecap: round; }
.kd-wire.cut { stroke-dasharray: 80 30 200; }
.kd-proto { fill: var(--sunk); }
.kd-node .kd-msgbox { fill: var(--copper); stroke: none; }
.kd-node .kd-msgtext { fill: #fff; font-family: var(--font-mono); font-size: 10px; }
.kd-status { fill: var(--ink-2); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-anchor: middle; }

/* hierarki, JARLOKAT, DSL */
.hr-edge { stroke: var(--line); stroke-width: 2; }
.hr-edge.on { stroke: var(--copper); stroke-width: 3.4; }
.hr-node rect { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.2; }
.hr-node.ph rect { fill: var(--sunk); }
.hr-node.on rect { fill: var(--copper-soft); stroke: var(--copper); stroke-width: 2; }
.hr-node text { fill: var(--ink); font-family: var(--font-body); font-size: 9px; font-weight: 700; }
.jl-hit { stroke: transparent; stroke-width: 22; }
.jl-line { stroke: var(--copper); stroke-width: 3; }
.jl-seg { cursor: pointer; }
.jl-seg.sel .jl-line { stroke: var(--mask); stroke-width: 5; }
.jl-node rect { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.4; }
.jl-node text { fill: var(--ink); font-family: var(--font-body); font-size: 10px; font-weight: 700; }
.jl-node { cursor: pointer; }
.jl-node.sel rect { fill: var(--mask-soft); stroke: var(--mask); stroke-width: 2.2; }
.jl-lab { fill: var(--ink-3); font-family: var(--font-body); font-size: 8.5px; font-weight: 600; }
.dsl-b { stroke: none; }
.dsl-b.voice { fill: color-mix(in srgb, var(--copper) 45%, var(--card)); }
.dsl-b.up { fill: color-mix(in srgb, var(--wave) 40%, var(--card)); }
.dsl-b.down { fill: color-mix(in srgb, var(--mask) 40%, var(--card)); }
.dsl-noise { fill: none; stroke: var(--err); stroke-width: 1.2; }

/* penampang kabel berlapis */
.coax-wrap { display: grid; gap: 12px; align-items: center; }
@media (min-width: 620px) { .coax-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.coax { width: 100%; max-width: 360px; }
.ly { cursor: pointer; transition: opacity .2s; stroke-width: 1.4; }
.ly.dim { opacity: .28; }
.ly-num { fill: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 700; paint-order: stroke; stroke: rgb(0 0 0 / 55%); stroke-width: 2.4px; }
#coax-tabs, #fc-tabs { flex-direction: column; align-items: stretch; }
#coax-tabs button, #fc-tabs button { text-align: left; }

/* twisted pair & kode kabel */
.tw-a, .tw-b { fill: none; stroke-width: 4; stroke-linecap: round; }
.tw-a { stroke: #e27a12; } .tw-b { stroke: #c9cfd2; }
.iso-row { display: flex; flex-wrap: wrap; gap: 12px; }
.iso-out { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.isofig { width: 120px; height: 120px; }
.iso-code { font-size: 1.6rem; color: var(--copper); }
.iso-jacket { fill: #3a8fd6; opacity: .25; stroke: #2160c4; stroke-width: 2; }
.iso-foil { fill: none; stroke: #9aa7ad; stroke-width: 3.4; }
.iso-braid { fill: none; stroke: #b0793c; stroke-width: 3.6; stroke-dasharray: 2 2; }
.timeline { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.tl-item { position: relative; padding: 0 0 14px 18px; display: grid; gap: 2px; }
.tl-item::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--copper); }
.tl-item b { font-family: var(--font-mono); color: var(--copper); }
.color-rows { display: grid; gap: 10px; }
.wire-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.wchip { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.wchip i { width: 100%; height: 34px; border-radius: 4px; border: 1px solid rgb(0 0 0 / 15%); }
.wchip b { font-family: var(--font-mono); font-size: var(--fs-xs); }
.wchip small { font-size: .62rem; color: var(--ink-3); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

/* OSI, multiple access, CDMA */
.osi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(7, auto) auto; gap: 4px; }
.osi-l { grid-column: 1; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 7px 10px; text-align: left; cursor: pointer; font-size: var(--fs-s); }
.osi-l b { font-family: var(--font-mono); color: var(--copper); margin-right: 6px; }
.osi-l.on { background: var(--mask-soft); border-color: var(--mask); }
.osi-d { grid-column: 2; display: grid; place-items: center; border-radius: 8px; background: var(--sunk); font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); text-align: center; padding: 4px; }
.osi-h { grid-row: 8; grid-column: 1; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.osi-h.d { grid-column: 2; }
.encap { display: grid; gap: 6px; }
.enc-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 8px; align-items: center; animation: fadeIn .3s; }
.enc-k { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.enc-parts { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.enc { padding: 4px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); }
.enc.data { background: var(--sunk); flex: 1; }
.enc.tcp { background: color-mix(in srgb, var(--band-1) 25%, var(--card)); }
.enc.ip { background: color-mix(in srgb, var(--band-3) 28%, var(--card)); }
.enc.mac, .enc.fcs { background: color-mix(in srgb, var(--band-2) 28%, var(--card)); }
.enc.bits { background: var(--term-bg); color: var(--term-fg); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ma-cell { stroke: none; opacity: .85; }
.ma-t { fill: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 700; paint-order: stroke; stroke: rgb(0 0 0 / 35%); stroke-width: 2px; }
.cdma-ctl { display: flex; flex-wrap: wrap; gap: 12px; }
#cd-table td, #cd-table th { text-align: center; white-space: nowrap; }
#cd-table th:first-child { text-align: left; }

/* latihan singkat (qc) */
.qc { display: grid; gap: 10px; }
.qc-item { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.qc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-opts button { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 6px 12px; font-size: var(--fs-s); font-weight: 650; cursor: pointer; color: var(--ink); }
.qc-opts button:hover:not(:disabled) { border-color: var(--ink-3); }
.qc-opts button.right { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.qc-opts button.wrong { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.qc-opts button:disabled { cursor: default; }

/* AMC & antena */
.amc-out, .antena-wrap { display: grid; gap: 14px; align-items: center; }
.amc-out { grid-template-columns: 120px minmax(0, 1fr); }
.constel { width: 120px; height: 120px; background: var(--sunk); border-radius: var(--r-m); }
.cn-pt { fill: var(--mask); }
.cn-noise { fill: var(--copper); opacity: .55; }
#amc-mod { font-size: 1.4rem; color: var(--mask); }
@media (min-width: 620px) { .antena-wrap { grid-template-columns: 240px minmax(0, 1fr); } }
.antmap { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.an-bg { fill: color-mix(in srgb, var(--ok) 8%, var(--card)); stroke: var(--line); }
.an-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 3; }
.an-cov { fill: color-mix(in srgb, var(--wave) 22%, transparent); stroke: var(--wave); stroke-width: 1.4; transition: all .15s; }
.an-ap { fill: var(--wave); stroke: #fff; stroke-width: 2; }
.an-lab { fill: var(--ink); font-family: var(--font-body); font-size: 9px; font-weight: 700; }
.an-cl circle { fill: var(--card); stroke: var(--err); stroke-width: 2; }
.an-cl.ok circle { fill: var(--ok); stroke: var(--ok); }
.an-cl text { fill: var(--ink-2); font-family: var(--font-body); font-size: 8.5px; font-weight: 650; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.stat-grid > div { background: var(--sunk); border-radius: var(--r-m); padding: 8px 10px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.stat-grid b { font-family: var(--font-mono); font-size: 1.02rem; overflow-wrap: anywhere; }
.stat-grid b.small { font-family: var(--font-body); font-size: var(--fs-s); }
.stat-grid b.tag { font-family: var(--font-body); justify-self: start; font-size: var(--fs-xs); }
.stat-grid span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; line-height: 1.35; }

/* simulasi router & hasil pemeriksaan */
.router-form { display: grid; gap: 12px; }
@media (min-width: 680px) { .router-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.router-form fieldset { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.router-form legend { font-weight: 750; font-family: var(--font-display); padding: 0 4px; }
.router-form .field input:not([type=checkbox]), .router-form .field select { width: 100%; }
.router-form input:disabled { opacity: .5; }
.checks { display: grid; gap: 6px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--fs-s); padding: 7px 10px; border-radius: var(--r-m); background: var(--sunk); }
.check .ci { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: #fff; background: var(--ink-3); }
.check.ok .ci { background: var(--ok); }
.check.warn { background: var(--warn-soft); } .check.warn .ci { background: var(--warn); }
.check.err { background: var(--err-soft); } .check.err .ci { background: var(--err); }
.check-head { padding: 10px 12px; border-radius: var(--r-m); font-size: var(--fs-s); border: 1px solid var(--line); background: var(--card); display: grid; gap: 4px; }
.check-head.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.check-head.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.check-head.err { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.rp-c { fill: none; stroke: var(--wave); stroke-width: 2.4; }
.rp-c.rep { stroke: var(--copper); stroke-dasharray: 5 3; }
.rp-dot { fill: var(--copper); }
.rp-cl { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 3; }
.pw-meter { height: 10px; }
.pw-meter i { transition: width .2s, background .2s; }

/* VoIP: alur, paket, jitter */
.vflow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vf { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 9px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; display: flex; gap: 6px; align-items: center; color: var(--ink-2); }
.vf b { font-family: var(--font-mono); color: var(--ink-3); }
.vf.past { background: var(--sunk); }
.vf.on { background: var(--copper-soft); border-color: var(--copper); color: var(--ink); }
.vf.on b { color: var(--copper); }
.vf-arr { color: var(--ink-3); font-size: var(--fs-xs); }
.hdr-ctl { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.hdr-ctl .field select, .hdr-ctl .field input { width: 100%; }
.pkt { display: flex; gap: 2px; border-radius: var(--r-m); overflow: hidden; }
.pk { display: grid; gap: 1px; padding: 6px 4px; font-size: .68rem; text-align: center; min-width: 38px; color: var(--ink); font-family: var(--font-mono); }
.pk b { font-family: var(--font-body); font-size: .7rem; }
.pk.eth { background: color-mix(in srgb, var(--band-2) 30%, var(--card)); }
.pk.ip { background: color-mix(in srgb, var(--band-3) 30%, var(--card)); }
.pk.udp { background: color-mix(in srgb, var(--band-1) 26%, var(--card)); }
.pk.rtp { background: color-mix(in srgb, var(--wave) 26%, var(--card)); }
.pk.pay { background: var(--mask-soft); }
.jt-s { fill: var(--ink-3); opacity: .6; }
.jt-a { fill: var(--mask); }
.jt-a.late { fill: var(--err); }
.jt-x { fill: var(--err); font-size: 13px; font-weight: 800; }
.jt-p { fill: var(--ok); }
.jt-p.gap { fill: none; stroke: var(--err); stroke-dasharray: 2 2; }

/* PBX, hunting, pattern */
.pbx { display: grid; gap: 12px; }
@media (min-width: 640px) { .pbx { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; } }
.pbx-ivr { display: grid; gap: 8px; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 220px; }
.keypad button { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; cursor: pointer; touch-action: manipulation; }
.keypad button:active:not(:disabled) { background: var(--mask-soft); }
.keypad button:disabled { opacity: .4; cursor: not-allowed; }
.keypad .bs { grid-column: span 3; min-height: 34px; font-size: .95rem; }
.small-pad { max-width: 260px; }
.small-pad button { min-height: 36px; }
.lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.line { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-m); padding: 10px 6px; display: grid; gap: 2px; justify-items: center; cursor: pointer; font-size: var(--fs-s); }
.line span { color: var(--ok); font-weight: 700; }
.line small { color: var(--ink-3); font-size: var(--fs-xs); }
.line.busy { background: var(--err-soft); border-color: var(--err); }
.line.busy span { color: var(--err); }
@media (max-width: 460px) { .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ptrow { display: flex; flex-wrap: wrap; gap: 3px; }
.pt { display: grid; justify-items: center; min-width: 28px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .8rem; }
.pt b { display: block; width: 100%; text-align: center; background: var(--sunk); padding: 2px 4px; }
.pt i { font-style: normal; padding: 2px 4px; font-weight: 700; }
.pt.ok { border-color: var(--ok); } .pt.ok i { color: var(--ok); }
.pt.bad { border-color: var(--err); } .pt.bad i { color: var(--err); }

/* diagram pesan SIP (ladder) */
.ladder { display: grid; gap: 0; min-width: 0; font-size: var(--fs-s); }
.ladder.big { max-height: 460px; overflow-y: auto; padding: 0 10px 10px; background: var(--card); }
.ladder-empty { padding: 14px 4px; }
.lhead { display: grid; gap: 4px; position: sticky; top: 0; background: var(--card); z-index: 1; padding: 8px 0 6px; border-bottom: 1px solid var(--line); }
.lhead.n2, .lrow.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lhead.n3, .lrow.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lhead span { text-align: center; font-weight: 750; font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.lrow { display: grid; min-height: 36px; align-items: end; background-repeat: no-repeat; background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)); background-size: 2px 100%, 2px 100%, 2px 100%; }
.lrow.n2 { background-position: 25% 0, 75% 0, -10px 0; }
.lrow.n3 { background-position: calc(100% / 6) 0, 50% 0, calc(500% / 6) 0; }
.lrow.pending { visibility: hidden; }
.lrow.now .arrow .lab { background: var(--copper-soft); }
.arrow { position: relative; margin: 0 calc(50% / var(--span)); height: 30px; display: grid; align-content: end; justify-items: center; border-bottom: 2px solid var(--ink-2); animation: fadeIn .25s; }
.arrow::after { content: ""; position: absolute; bottom: -6px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.arrow.r::after { right: -1px; border-left: 8px solid var(--ink-2); }
.arrow.l::after { left: -1px; border-right: 8px solid var(--ink-2); }
.arrow .lab { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--card); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.arrow small { position: absolute; top: 100%; font-size: .64rem; color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.arrow.ok { border-bottom-color: var(--ok); } .arrow.ok.r::after { border-left-color: var(--ok); } .arrow.ok.l::after { border-right-color: var(--ok); } .arrow.ok .lab { color: var(--ok); }
.arrow.err { border-bottom-color: var(--err); } .arrow.err.r::after { border-left-color: var(--err); } .arrow.err.l::after { border-right-color: var(--err); } .arrow.err .lab { color: var(--err); }
.arrow.prov { border-bottom-color: var(--ink-3); } .arrow.prov .lab { color: var(--ink-2); }
.arrow.lost { border-bottom: 2px dashed var(--ink-3); } .arrow.lost::after { display: none; } .arrow.lost .lab { color: var(--ink-3); }
.arrow.rtp, .arrow.both { border-bottom: 3px double var(--mask); height: 34px; }
.arrow.rtp::after, .arrow.both::after { display: none; }
.arrow.rtp .lab { color: var(--mask); background: var(--mask-soft); }
.lrow:has(small) { min-height: 46px; padding-bottom: 12px; }
.lnote { font-size: var(--fs-xs); color: var(--ink-2); background: var(--sunk); border-radius: 6px; padding: 5px 8px; margin: 6px 0; animation: fadeIn .25s; }
.lnote.bad { background: var(--err-soft); color: var(--ink); }
.lnote.ok { background: var(--ok-soft); color: var(--ink); }

/* H.323, serat optik */
.stk rect { stroke: var(--card); stroke-width: 1; }
.stk text { fill: var(--ink); font-family: var(--font-body); font-size: 10px; font-weight: 700; }
.stk.a rect { fill: color-mix(in srgb, var(--wave) 30%, var(--card)); }
.stk.c rect { fill: color-mix(in srgb, var(--copper) 30%, var(--card)); }
.stk.r rect { fill: color-mix(in srgb, var(--mask) 26%, var(--card)); }
.stk.t rect { fill: var(--sunk); }
.stk.n rect { fill: color-mix(in srgb, var(--band-1) 20%, var(--card)); }
.formula { display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sunk); }
.formula > span:first-child { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--copper); }
.sn-clad { fill: color-mix(in srgb, var(--mask) 10%, var(--card)); }
.sn-core { fill: color-mix(in srgb, var(--mask) 26%, var(--card)); }
.sn-ray { fill: none; stroke: #ff3b30; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgb(255 59 48 / 50%)); }
.sn-out { fill: none; stroke: #ff3b30; stroke-width: 2.2; stroke-dasharray: 5 3; }
.sn-weak { fill: none; stroke: #ff3b30; stroke-width: 1.2; opacity: .4; }
.sn-hit { fill: #ff3b30; }
.sn-norm { stroke: var(--ink-3); stroke-dasharray: 2 2; }
.wd-in { stroke-width: 3; }
.wd-mux { fill: var(--sunk); stroke: var(--ink-3); }
.wd-fiber { fill: #f3e2a0; stroke: #c9a75a; }
.wd-flow { stroke-width: 3; stroke-dasharray: 8 22; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -30; } }
.wdm-ctl, .fo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.wdm-ctl input, .fo-grid input, .fo-grid select { width: 100%; }
.wn-c { fill: none; stroke: var(--mask); stroke-width: 2.4; }
.wn-m { cursor: pointer; }
.wn-m line { stroke: var(--copper); stroke-dasharray: 2 2; }
.wn-m circle { fill: var(--copper); stroke: var(--card); stroke-width: 2; }
.wn-m.sel circle { fill: var(--mask); }
.fm-ray { fill: none; stroke-width: 2; stroke-linejoin: round; }
.fm-ray.r0 { stroke: #ff3b30; } .fm-ray.r1 { stroke: #e9a21b; } .fm-ray.r2 { stroke: #3a6fd8; }
.fm-pulse { fill: color-mix(in srgb, #ff3b30 25%, transparent); stroke: #ff3b30; stroke-width: 1.6; }
.fm-pulse.out { fill: color-mix(in srgb, var(--mask) 25%, transparent); stroke: var(--mask); }

/* lab RJ45 */
.wire-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 6px; }
.wire-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: var(--fs-s); font-weight: 650; text-align: left; touch-action: manipulation; color: var(--ink); }
.wire-btn i { width: 26px; height: 14px; border-radius: 3px; flex: none; border: 1px solid rgb(0 0 0 / 15%); }
.wire-btn:disabled { opacity: .35; cursor: not-allowed; }
.rj-pair { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rj-card { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-l); padding: 10px; display: grid; gap: 6px; cursor: pointer; min-width: 0; }
.rj-card.on { border-color: var(--mask); box-shadow: 0 0 0 3px var(--mask-soft); }
.rj-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.rj45 { width: 100%; display: block; }
.rj-body { fill: color-mix(in srgb, #dfe8ec 55%, transparent); stroke: #9aa7ad; stroke-width: 2; }
.rj-jacket { fill: #2160c4; opacity: .85; }
.rj-pin { fill: #d9b44a; stroke: #a8862a; stroke-width: .8; }
.rj-wire { fill: none; stroke-width: 9; stroke-linecap: round; }
.rj-wire-w { fill: none; stroke: #f4f4f0; stroke-width: 9; stroke-dasharray: 5 5; stroke-linecap: butt; opacity: .95; }
.rj-tail { fill: none; stroke-width: 3; }
.rj-slot { fill: transparent; stroke: var(--ink-3); stroke-dasharray: 3 3; stroke-width: 1; cursor: pointer; }
.rj-slot.full { stroke: transparent; }
.rj-slot:hover, .rj-slot:focus-visible { stroke: var(--copper); stroke-dasharray: none; stroke-width: 2; outline: none; }
.rj-num { fill: var(--ink-2); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.tester { width: 100%; max-width: 420px; display: block; }
.ts-unit { fill: #24313a; }
.ts-lab { fill: #cfe3ea; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.ts-lab.small { font-size: 8.5px; font-weight: 600; letter-spacing: 0; fill: #8fa9b3; }
.ts-led { fill: #3b4a52; stroke: #11191d; stroke-width: 1; transition: fill .08s; }
.ts-led.on { fill: #6dff7a; filter: drop-shadow(0 0 4px #6dff7a); }
.ts-n { fill: #cfe3ea; font-family: var(--font-mono); font-size: 8px; font-weight: 700; }

/* simulator VoIP */
.cfg-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); background: var(--code-bg); height: min(460px, 60vh); }
.cfg-gutter { margin: 0; padding: 10px 6px 10px 10px; font-family: var(--font-mono); font-size: .84rem; line-height: 1.55; color: var(--ink-3); text-align: right; overflow: hidden; user-select: none; opacity: .75; border-right: 1px solid var(--line); min-width: 2.8em; }
.cfg-gutter b { color: var(--err); background: var(--err-soft); border-radius: 3px; padding: 0 2px; }
textarea.cfg { font-family: var(--font-mono); font-size: .84rem; line-height: 1.55; border: 0; border-radius: 0; background: transparent; padding: 10px 12px; resize: none; white-space: pre; overflow: auto; tab-size: 4; height: 100%; width: 100%; color: var(--ink); }
textarea.cfg:focus { outline: none; }
textarea.cfg.dbg { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--code-bg); height: auto; resize: vertical; font-size: .8rem; }
.editor-head .seg button { padding: 5px 9px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.editor-head .grow { flex: 1; }
.diag.notice { border-color: var(--line); background: var(--sunk); }
.diag.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); cursor: default; }
.diag.ok b { color: var(--ok); }
.phones { display: grid; gap: 8px; }
.phone { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px 10px; display: grid; gap: 4px; }
.phone-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.phone-head .tag { margin-left: auto; }
.phone-more summary { cursor: pointer; font-size: var(--fs-xs); color: var(--mask); font-weight: 650; }
.phone-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); padding-top: 8px; }
.phone-grid input[type=text] { width: 100%; font-family: var(--font-mono); font-size: var(--fs-s); min-height: 34px; }
.codec-row { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-s); }
.codec-row label { display: flex; gap: 4px; align-items: center; }
.dial-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.dial-row .field select, .dial-row .field input { width: 100%; }
#vp-num { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.callres:empty { display: none; }
.callres .check-head span { display: block; color: var(--ink-2); }
.out-tabs { margin: 8px; }
.out-panel { background: var(--card); }
.term-out .warn { color: #ffd98a; }
.term-out .in { color: #8fd3ff; }
.cli-in { display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-top: 1px solid rgb(255 255 255 / 8%); color: var(--term-dim); font-family: var(--font-mono); font-size: var(--fs-xs); }
.cli-in input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--term-fg); font-family: var(--font-mono); font-size: .84rem; min-height: 32px; padding: 0; }
.cli-in input:focus { outline: none; }
.cli-in button { background: var(--term-dim); color: var(--term-bg); border: 0; border-radius: 6px; padding: 4px 10px; font-weight: 700; cursor: pointer; font-size: var(--fs-xs); }
#vp-cli .term-out { max-height: 380px; min-height: 160px; }

/* kalkulator */
.bits { display: grid; gap: 4px; overflow-x: auto; }
.bits .mono { font-size: .95rem; letter-spacing: .04em; white-space: nowrap; }
.bits .nb { color: var(--copper); font-weight: 700; }
.bits .hb { color: var(--ink-3); }
.mos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.mos-big { display: grid; justify-items: center; background: var(--sunk); border-radius: var(--r-m); padding: 8px 14px; }
.mos-big b { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.mos-big span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; }
.lossbar { display: flex; gap: 2px; border-radius: var(--r-m); overflow: hidden; min-height: 44px; }
.ls { display: grid; gap: 1px; align-content: center; padding: 4px 6px; font-size: .68rem; font-family: var(--font-mono); min-width: 0; overflow: hidden; white-space: nowrap; }
.ls b { font-family: var(--font-body); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; }
.ls.cab { background: color-mix(in srgb, #e0b400 30%, var(--card)); }
.ls.con { background: color-mix(in srgb, var(--band-1) 25%, var(--card)); }
.ls.spl { background: color-mix(in srgb, var(--band-3) 25%, var(--card)); }
.ls.sp { background: color-mix(in srgb, var(--copper) 30%, var(--card)); }
.ls.mar { background: var(--sunk); }
#ip-out th { width: 30%; }
#ip-out td .tag { margin-left: 6px; }
.debug-q .field { font-size: var(--fs-xs); }
/* kolom alat praktik tidak boleh melebar karena isi (textarea, bilah simbol) */
.tool-col, .editor { grid-template-columns: minmax(0, 1fr); }
textarea.cfg { min-width: 0; }
#vp-files { flex-wrap: wrap; }
.bitgrp i.b0 { font-style: normal; color: var(--ink-3); opacity: .7; }
/* alokasi waktu di peta pertemuan */
.jp-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: end; }
.jp-row .field input, .jp-row .field select { width: 100%; }
.jp-sum b { font-family: var(--font-display); font-size: 1.15rem; }
.meet-more .timebar { margin-top: 8px; }
.meet-more .timebar span { white-space: normal; overflow: visible; line-height: 1.2; }
ol.steps { padding-left: 1.2em; gap: 3px; }
.practice { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); padding: 14px 16px; display: grid; gap: 8px; }
.mode-box { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); }
/* LKPD serat optik */
details.lkpd { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
details.lkpd > summary { cursor: pointer; padding: 12px 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: flex; gap: 10px; align-items: baseline; }
details.lkpd > summary b { color: var(--copper); font-family: var(--font-mono); font-size: .9rem; }
.lkpd-body { padding: 0 16px 16px; display: grid; gap: 10px; }
.lk-tbl td, .lk-tbl th { vertical-align: middle; }
.lk-tbl input, .lk-tbl select { min-height: 34px; padding: 4px 6px; font-size: var(--fs-s); width: 100%; min-width: 4.5rem; }
.lk-tbl input.lk-name { min-width: 7rem; }
.lk-tbl td:last-child.small { min-width: 14rem; }
.lk-case { gap: 6px; }
.lk-case textarea { width: 100%; font-size: var(--fs-s); }
.lk-ref .hdr-ctl input { width: 100%; }
/* kumpulkan hasil */
.kp-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.kp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 2px; }
.kp-card span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kp-card b { font-family: var(--font-display); font-size: 1.4rem; }
.kp-card small { color: var(--ink-2); font-size: var(--fs-xs); }
#kp-detail table { border-collapse: collapse; width: 100%; font-size: var(--fs-s); background: var(--card); }
#kp-detail th, #kp-detail td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
#kp-detail th { background: var(--sunk); }
#kp-detail { overflow-x: auto; }
.meet-list, .meet-group { grid-template-columns: minmax(0, 1fr); }
.meet-more .timebar div { padding: 6px 5px; }
.meet-more .timebar span { font-size: .66rem; overflow-wrap: anywhere; hyphens: auto; }
.tlegend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--ink-2); }
.tlegend li { display: flex; gap: 6px; align-items: center; }
.tlegend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }
.tlegend b { font-family: var(--font-mono); }