@charset "UTF-8";
/* ==========================================================================
   Latihan · workspace DAX & Power Query (ui-dax.js, ui-m.js, ui-editor.js)
   --------------------------------------------------------------------------
   Semua selector diawali .lxw supaya tidak bentrok dengan app.css, member.css,
   latihan.css (.lx-) dan latihan-grid.css. Token brand disalin dari app.css
   §02 (file ini tidak bergantung pada app.css).

   CONTENTS
   01  Token
   02  Dasar, tombol, tab, lencana tipe
   03  Layout workspace (panel kiri + utama)
   04  Panel Data (pohon tabel/kolom/measure) & panel Kueri/Langkah (M)
   05  Kartu kode + editor (textarea di atas <pre> berwarna)
   06  Popup autocomplete & bubble signature
   07  Banner error / status
   08  Hasil: matriks, kartu KPI, tabel data, list/record/skalar
   09  Responsif (workspace sempit < 760px, layar ≤ 480px), sentuh, reduced motion, print
   ========================================================================== */

/* 01 ── Token ─────────────────────────────────────────────────────────── */
.lxw {
  --lxw-ink: #0A1119;
  --lxw-ink-2: #0E1620;
  --lxw-ink-3: #142131;
  --lxw-ink-4: #1F2D3F;
  --lxw-cyan: #02A0C1;
  --lxw-cyan-ink: #00718A;
  --lxw-cyan-lt: #5FD4EC;
  --lxw-blue: #3581E1;
  --lxw-blue-ink: #1F5FB8;
  --lxw-lime: #D6FD91;
  --lxw-lime-ink: #3F6212;
  --lxw-mint: #97D1C6;
  --lxw-pale: #D7E8FB;

  --lxw-bg: #F4F7FA;
  --lxw-card: #FFFFFF;
  --lxw-tint: #EAF3FC;
  --lxw-line: #E2E8EF;
  --lxw-line-2: #D0DAE5;
  --lxw-text: #0E1620;
  --lxw-text-2: #3A4655;
  --lxw-text-3: #5A6676;

  --lxw-ok: #15803D;
  --lxw-ok-bg: #ECFDF3;
  --lxw-ok-bd: #A7F3C4;
  --lxw-err: #B91C1C;
  --lxw-err-bg: #FEF2F2;
  --lxw-err-bd: #FECACA;
  --lxw-warn: #B45309;
  --lxw-warn-bg: #FFFBEB;

  /* warna sintaks di atas latar editor gelap (semua ≥ 4,5:1 terhadap --lxw-code-bg) */
  --lxw-code-bg: #0E1620;
  --lxw-code-fg: #E6EDF5;
  --lxw-code-gut: #7D8B9C;
  --lxw-code-line: rgba(255, 255, 255, .045);
  --lxw-sx-kw: #D6FD91;
  --lxw-sx-func: #5FD4EC;
  --lxw-sx-table: #8DB8FF;
  --lxw-sx-col: #CFE2FF;
  --lxw-sx-measure: #FFC285;
  --lxw-sx-str: #9FE3D3;
  --lxw-sx-num: #FFD873;
  --lxw-sx-comment: #8C9AAB;
  --lxw-sx-op: #B4BFCC;
  --lxw-sx-type: #FFA3B5;
  --lxw-sx-step: #F3E3A6;
  --lxw-sx-err: #FF6B6B;

  --lxw-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lxw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --lxw-code-fs: 14px;
  --lxw-code-lh: 22px;
  --lxw-r: 14px;
  --lxw-r-sm: 10px;
  --lxw-r-xs: 7px;
  --lxw-sh: 0 1px 2px rgba(14, 22, 32, .05), 0 6px 18px -10px rgba(14, 22, 32, .18);
  --lxw-sh-pop: 0 18px 40px -12px rgba(6, 11, 17, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  --lxw-ring: 0 0 0 3px rgba(2, 160, 193, .38);
  --lxw-ease: cubic-bezier(.2, .7, .2, 1);
}

/* 02 ── Dasar ─────────────────────────────────────────────────────────── */
.lxw, .lxw *, .lxw *::before, .lxw *::after { box-sizing: border-box; }
.lxw { font-family: var(--lxw-font); color: var(--lxw-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* reset font tombol bawaan browser tanpa spesifisitas: ukuran/tebal dari kelas komponen (.lxw-tab, .lxw-btn, …) tetap menang */
:where(.lxw) :where(button, input, select, textarea) { font: inherit; }
.lxw svg { flex: none; }
.lxw code, .lxw kbd, .lxw pre { font-family: var(--lxw-mono); }
.lxw .lxw-sr, .lxw-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lxw :focus-visible { outline: 2px solid var(--lxw-cyan); outline-offset: 2px; }
.lxw [hidden] { display: none !important; }

.lxw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--lxw-line-2);
  background: var(--lxw-card); color: var(--lxw-text); font-size: .875rem; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; transition: background .15s var(--lxw-ease), border-color .15s, transform .15s, box-shadow .15s;
}
.lxw-btn:hover { border-color: var(--lxw-cyan); background: var(--lxw-tint); }
.lxw-btn:active { transform: translateY(1px); }
.lxw-btn:disabled { opacity: .55; cursor: default; transform: none; }
.lxw-btn svg { width: 15px; height: 15px; }

/* tombol Jalankan: lime di atas kartu kode gelap */
.lxw-run {
  border: 0; background: var(--lxw-lime); color: var(--lxw-ink); font-weight: 700; min-height: 34px; padding: 0 16px 0 13px;
  box-shadow: 0 0 0 1px rgba(214, 253, 145, .35), 0 6px 16px -8px rgba(214, 253, 145, .55);
}
.lxw-run:hover { background: #E4FFB1; border: 0; }
.lxw-run:focus-visible { outline: 2px solid var(--lxw-lime); outline-offset: 3px; }
.lxw-run[aria-busy="true"] svg { animation: lxw-pulse .8s ease-in-out infinite alternate; }
.lxw-run kbd { font: 600 .6875rem/1 var(--lxw-mono); padding: 3px 5px; border-radius: 5px; background: rgba(10, 17, 25, .1); }
@keyframes lxw-pulse { from { opacity: 1; } to { opacity: .35; } }

.lxw-ghost {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; color: var(--lxw-text-2); font-size: .8125rem; font-weight: 600;
}
.lxw-ghost:hover { background: var(--lxw-tint); color: var(--lxw-text); }
.lxw-ghost svg { width: 14px; height: 14px; }

.lxw-kbd { font: 600 .6875rem/1 var(--lxw-mono); padding: 3px 6px; border-radius: 5px; border: 1px solid currentColor; opacity: .85; }

/* tab (Hasil / Data / Model) */
.lxw-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--lxw-bg); border: 1px solid var(--lxw-line); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lxw-tabs::-webkit-scrollbar { display: none; }
.lxw-tab {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--lxw-text-2); white-space: nowrap;
}
.lxw-tab svg { width: 14px; height: 14px; }
.lxw-tab:hover { color: var(--lxw-text); }
.lxw-tab[aria-selected="true"] { background: var(--lxw-ink); color: #fff; box-shadow: 0 2px 6px -2px rgba(10, 17, 25, .4); }
.lxw-tab .lxw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lxw-err); }

/* lencana tipe kolom: 123 / 1.2 / ABC / kalender / ✓✗ */
.lxw-tb {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 4px;
  border-radius: 5px; font: 700 .625rem/1 var(--lxw-mono); letter-spacing: .02em; flex: none;
  background: var(--lxw-tint); color: var(--lxw-blue-ink); border: 1px solid #C9DDF5;
}
.lxw-tb svg { width: 12px; height: 12px; }
.lxw-tb-text { background: #EEF7F5; color: #0F5F52; border-color: #C3E5DE; }
.lxw-tb-date { background: #FFF6E6; color: #8A4B00; border-color: #F6D9A8; }
.lxw-tb-bool { background: #F3F8E6; color: var(--lxw-lime-ink); border-color: #D7EBAE; }
.lxw-tb-any, .lxw-tb-list, .lxw-tb-record, .lxw-tb-table, .lxw-tb-dur { background: #F1F4F8; color: var(--lxw-text-2); border-color: var(--lxw-line-2); }
.lxw-tb-cur, .lxw-tb-pct { background: #EAF6FB; color: var(--lxw-cyan-ink); border-color: #BFE3EE; }

/* 03 ── Layout workspace ──────────────────────────────────────────────── */
.lxw-ws {
  display: grid; grid-template-columns: minmax(220px, 268px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px;
  height: 100%; min-height: 0; padding: 14px; background: var(--lxw-bg); overflow: hidden; border-radius: inherit;
  font-size: .875rem; line-height: 1.5;
}
.lxw-side {
  display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden;
  background: var(--lxw-card); border: 1px solid var(--lxw-line); border-radius: var(--lxw-r); box-shadow: var(--lxw-sh);
}
.lxw-main {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0;
  overflow-x: hidden; overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: thin; overscroll-behavior: contain;
}
.lxw-main > * { flex: none; }
.lxw-main > .lxw-out { flex: 1 0 auto; }
.lxw-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lxw-text-3);
}
.lxw-sec-h .lxw-count { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--lxw-text-3); }
.lxw-scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.lxw-side-toggle { display: none; }

/* 04 ── Panel Data & Kueri ────────────────────────────────────────────── */
.lxw-search { position: relative; margin: 0 12px 8px; }
.lxw-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--lxw-text-3); pointer-events: none; }
.lxw-search input {
  width: 100%; height: 34px; padding: 0 10px 0 31px; border: 1px solid var(--lxw-line-2); border-radius: 999px;
  font: inherit; font-size: .8125rem; color: var(--lxw-text); background: var(--lxw-bg);
}
.lxw-search input:focus { outline: none; border-color: var(--lxw-cyan); box-shadow: var(--lxw-ring); background: #fff; }

.lxw-tree { list-style: none; margin: 0; padding: 2px 8px 12px; }
.lxw-tree ul { list-style: none; margin: 0; padding: 0 0 4px 14px; border-left: 1px dashed var(--lxw-line-2); margin-left: 15px; }
.lxw-node { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.lxw-node:hover { background: var(--lxw-bg); }
.lxw-node.is-host > .lxw-node-b { font-weight: 800; }
.lxw-node-b {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 6px 8px; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; color: var(--lxw-text);
}
.lxw-node-b:hover { color: var(--lxw-cyan-ink); }
.lxw-node-b .lxw-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxw-node-b .lxw-chev { width: 12px; height: 12px; color: var(--lxw-text-3); transition: transform .18s var(--lxw-ease); }
.lxw-node-b[aria-expanded="true"] .lxw-chev { transform: rotate(90deg); }
.lxw-node-b .lxw-ti { color: var(--lxw-cyan-ink); display: inline-flex; }
.lxw-node-b .lxw-ti svg { width: 15px; height: 15px; }
.lxw-node-b .lxw-sub { font-size: .6875rem; font-weight: 600; color: var(--lxw-text-3); }
.lxw-node-x {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--lxw-text-3); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.lxw-node:hover .lxw-node-x, .lxw-node-x:focus-visible, .lxw-node-x[aria-pressed="true"] { opacity: 1; }
.lxw-node-x:hover { background: var(--lxw-tint); color: var(--lxw-cyan-ink); }
.lxw-node-x[aria-pressed="true"] { color: var(--lxw-cyan-ink); }
.lxw-node-x svg { width: 15px; height: 15px; }
.lxw-leaf .lxw-node-b { font-weight: 500; padding: 4px 8px; gap: 7px; }
.lxw-leaf .lxw-node-b .lxw-ins { opacity: 0; font: 600 .6875rem/1 var(--lxw-mono); color: var(--lxw-cyan-ink); }
.lxw-leaf .lxw-node-b:hover .lxw-ins, .lxw-leaf .lxw-node-b:focus-visible .lxw-ins { opacity: 1; }
.lxw-fx {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 4px; border-radius: 5px;
  font: italic 700 .6875rem/1 Georgia, "Times New Roman", serif; background: var(--lxw-ink); color: var(--lxw-lime); flex: none;
}
.lxw-hidden-tag { font-size: .625rem; font-weight: 700; color: var(--lxw-text-3); border: 1px solid var(--lxw-line-2); border-radius: 4px; padding: 1px 4px; }
.lxw-tree-empty { padding: 10px 16px; color: var(--lxw-text-3); font-size: .8125rem; }

/* daftar langkah (Applied Steps) & sumber (M) */
.lxw-steps { list-style: none; margin: 0; padding: 2px 8px 12px; counter-reset: lxwstep; }
.lxw-steps li { position: relative; }
.lxw-step {
  width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer; text-align: left; padding: 7px 8px; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; color: var(--lxw-text);
}
.lxw-step:hover { background: var(--lxw-bg); }
.lxw-step[aria-current="true"] { background: var(--lxw-ink); color: #fff; }
.lxw-step[aria-current="true"] .lxw-step-n { background: var(--lxw-lime); color: var(--lxw-ink); border-color: transparent; }
.lxw-step-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--lxw-line-2);
  font: 700 .6875rem/1 var(--lxw-mono); color: var(--lxw-text-2); background: #fff;
}
.lxw-step-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxw-step-k { font-size: .6875rem; font-weight: 600; color: var(--lxw-text-3); white-space: nowrap; }
.lxw-step[aria-current="true"] .lxw-step-k { color: #B4BFCC; }
.lxw-step.is-bad .lxw-step-n { background: var(--lxw-err); border-color: var(--lxw-err); color: #fff; }
.lxw-step.is-bad .lxw-step-l { color: var(--lxw-err); }
.lxw-step.is-bad[aria-current="true"] .lxw-step-l { color: #FFB4B4; }
.lxw-step-msg { margin: 0 8px 6px 38px; font-size: .75rem; line-height: 1.45; color: var(--lxw-err); overflow-wrap: anywhere; }
.lxw-step-msg.is-up { color: var(--lxw-text-3); font-style: italic; }
.lxw-src .lxw-step-n { border-radius: 6px; color: var(--lxw-cyan-ink); }
.lxw-src .lxw-step-n svg { width: 14px; height: 14px; }
.lxw-side-sep { height: 1px; background: var(--lxw-line); margin: 2px 12px 0; flex: none; }
.lxw-side-part { display: flex; flex-direction: column; min-height: 0; }
.lxw-side-part.is-grow { flex: 1; }

/* 05 ── Kartu kode & editor ───────────────────────────────────────────── */
.lxw-code {
  background: var(--lxw-code-bg); color: var(--lxw-code-fg); border-radius: var(--lxw-r);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 32px -18px rgba(10, 17, 25, .6);
  border: 1px solid #1B2836; position: relative;
}
.lxw-code-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(90deg, rgba(2, 160, 193, .14), rgba(53, 129, 225, .05) 55%, transparent);
  border-radius: var(--lxw-r) var(--lxw-r) 0 0;
}
.lxw-code-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lxw-cyan-lt);
}
.lxw-code-tag svg { width: 14px; height: 14px; }
.lxw-code-host { font-size: .75rem; color: #B4BFCC; }
.lxw-code-host code { color: var(--lxw-sx-table); font-size: .75rem; }
.lxw-code-sp { flex: 1; }
.lxw-code-f {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px 10px; font-size: .75rem; color: #9AA7B6;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.lxw-code-f span { display: inline-flex; align-items: center; gap: 6px; }
.lxw-code-f .lxw-kbd { color: #C8D2DE; border-color: rgba(255, 255, 255, .22); }
.lxw-code-f .lxw-status { margin-left: auto; color: #9AA7B6; }
.lxw-code-f .lxw-status.is-ok { color: var(--lxw-lime); }
.lxw-code-f .lxw-status.is-bad { color: #FFA3A3; }

/* baris "Nama measure =" */
.lxw-fline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px 0; }
.lxw-flabel { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9AA7B6; }
.lxw-fname { font: 600 var(--lxw-code-fs)/var(--lxw-code-lh) var(--lxw-mono); color: var(--lxw-sx-measure); overflow-wrap: anywhere; }
.lxw-fname .lxw-eq { color: var(--lxw-sx-op); }
.lxw-fname.is-col { color: var(--lxw-sx-col); }
.lxw-fname.is-col .lxw-tn { color: var(--lxw-sx-table); }
.lxw-fname.is-tbl { color: var(--lxw-sx-table); }
.lxw-fname.is-q { color: var(--lxw-sx-kw); }
.lxw-fhint { font-size: .75rem; color: #B4BFCC; }

/* editor: gutter + view (textarea di atas layer <pre>) */
.lxw-ed {
  position: relative; display: flex; align-items: stretch; min-width: 0;
  font: 400 var(--lxw-code-fs)/var(--lxw-code-lh) var(--lxw-mono); color: var(--lxw-code-fg);
  --lxw-gut-ch: 2;
  background: var(--lxw-code-bg); border-radius: var(--lxw-r-sm);
}
.lxw-ed:not(.lxw-code .lxw-ed):focus-within { box-shadow: 0 0 0 3px rgba(2, 160, 193, .38); }
.lxw .lxw-ed-ta:focus, .lxw .lxw-ed-ta:focus-visible { outline: none; }
.lxw-code > .lxw-ed, .lxw-code-b > .lxw-ed { margin: 4px 0; }
.lxw-ed-gut {
  flex: none; width: calc(var(--lxw-gut-ch) * 1ch + 22px); overflow: hidden; position: relative; user-select: none;
  color: var(--lxw-code-gut); text-align: right; font: inherit; cursor: text;
}
.lxw-ed-gut-in { position: absolute; top: 0; left: 0; right: 0; padding: 12px 10px 12px 0; will-change: transform; }
.lxw-ed-gut-in span { display: block; height: var(--lxw-code-lh); font-variant-numeric: tabular-nums; }
.lxw-ed-gut-in span.on { color: var(--lxw-lime); }
.lxw-ed-view { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 0 0 var(--lxw-r-sm) 0; }
.lxw-ed-layer { position: absolute; top: 0; left: 0; min-width: 100%; will-change: transform; pointer-events: none; }
.lxw-ed-act { position: absolute; left: 0; right: 0; height: var(--lxw-code-lh); background: var(--lxw-code-line); opacity: 0; transition: opacity .12s; }
.lxw-ed.is-focus .lxw-ed-act { opacity: 1; }
.lxw-ed-hl, .lxw-ed-ta {
  margin: 0; border: 0; padding: 12px 18px 12px 12px;
  font: inherit; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; font-kerning: none;
  letter-spacing: 0; word-spacing: 0; tab-size: 4; -moz-tab-size: 4; text-transform: none; text-indent: 0;
  white-space: pre; overflow-wrap: normal; word-break: normal; text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
.lxw-ed-hl { position: relative; background: transparent; color: var(--lxw-code-fg); width: max-content; min-width: 100%; }
.lxw-ed-hl code { font: inherit; background: none; padding: 0; color: inherit; white-space: inherit; }
.lxw-ed-meas { position: absolute; visibility: hidden; white-space: pre; font: inherit; font-variant-ligatures: none; font-kerning: none; top: 0; left: 0; }
.lxw-ed-ta {
  position: relative; z-index: 1; display: block; width: 100%; resize: none; overflow: auto;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--lxw-lime);
  outline: none; border-radius: 0; box-shadow: none; appearance: none; -webkit-appearance: none;
  scrollbar-width: thin; scrollbar-color: #3A4A5E transparent;
}
.lxw-ed-ta::placeholder { color: #8593A3; -webkit-text-fill-color: #8593A3; opacity: 1; }
.lxw-ed-ta::selection { background: rgba(95, 212, 236, .3); color: transparent; -webkit-text-fill-color: transparent; }
.lxw-ed-ta::-webkit-scrollbar { width: 10px; height: 10px; }
.lxw-ed-ta::-webkit-scrollbar-thumb { background: #34445A; border-radius: 10px; border: 2px solid var(--lxw-code-bg); }
.lxw-ed-ta::-webkit-scrollbar-corner { background: transparent; }
.lxw-code:focus-within { border-color: rgba(2, 160, 193, .7); box-shadow: 0 0 0 3px rgba(2, 160, 193, .3), 0 14px 32px -18px rgba(10, 17, 25, .6); }

/* warna token */
.lxw-t-kw { color: var(--lxw-sx-kw); }
.lxw-t-func { color: var(--lxw-sx-func); }
.lxw-t-table { color: var(--lxw-sx-table); }
.lxw-t-col { color: var(--lxw-sx-col); }
.lxw-t-measure { color: var(--lxw-sx-measure); }
.lxw-t-str { color: var(--lxw-sx-str); }
.lxw-t-num { color: var(--lxw-sx-num); }
.lxw-t-comment { color: var(--lxw-sx-comment); }
.lxw-t-op, .lxw-t-punct { color: var(--lxw-sx-op); }
.lxw-t-type, .lxw-t-const { color: var(--lxw-sx-type); }
.lxw-t-step { color: var(--lxw-sx-step); }
.lxw-t-var { color: var(--lxw-code-fg); }
.lxw-t-bad { color: var(--lxw-code-fg); text-decoration: underline dotted rgba(255, 107, 107, .8); text-underline-offset: 4px; }
.lxw-pair { background: rgba(214, 253, 145, .16); box-shadow: 0 0 0 1px rgba(214, 253, 145, .55); border-radius: 2px; }
.lxw-err {
  text-decoration: underline wavy var(--lxw-sx-err); text-decoration-skip-ink: none; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px; background: rgba(255, 107, 107, .12); border-radius: 2px;
}
.lxw-err-eol { display: inline-block; width: 1ch; }

/* 06 ── Popup autocomplete & signature ────────────────────────────────── */
.lxw-ed-pop {
  position: absolute; z-index: 40; width: min(380px, 100%); max-width: calc(100vw - 24px);
  background: #101C29; color: var(--lxw-code-fg); border-radius: 12px; box-shadow: var(--lxw-sh-pop); overflow: hidden;
  font-family: var(--lxw-font); font-size: .8125rem; line-height: 1.3;
}
.lxw-ed-list { max-height: 232px; overflow: auto; padding: 5px; scrollbar-width: thin; scrollbar-color: #34445A transparent; }
.lxw-ed-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.lxw-ed-opt.on { background: rgba(2, 160, 193, .24); box-shadow: inset 2px 0 0 var(--lxw-cyan-lt); }
.lxw-ed-opt-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lxw-mono); font-size: .8125rem; }
.lxw-ed-opt-l b { color: var(--lxw-lime); font-weight: 700; }
.lxw-ed-opt-d { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: #9AA7B6; }
.lxw-k {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 20px; border-radius: 6px;
  font: 700 .625rem/1 var(--lxw-mono); background: rgba(255, 255, 255, .07); color: #C8D2DE;
}
.lxw-k svg { width: 13px; height: 13px; }
.lxw-k-func { color: var(--lxw-sx-func); background: rgba(95, 212, 236, .12); font-style: italic; }
.lxw-k-table, .lxw-k-source { color: var(--lxw-sx-table); background: rgba(141, 184, 255, .12); }
.lxw-k-column { color: var(--lxw-sx-col); background: rgba(207, 226, 255, .1); }
.lxw-k-column::before { content: "[ ]"; }
.lxw-k-measure { color: var(--lxw-ink); background: var(--lxw-sx-measure); font: italic 700 .75rem/1 Georgia, serif; }
.lxw-k-kw { color: var(--lxw-sx-kw); background: rgba(214, 253, 145, .1); }
.lxw-k-step { color: var(--lxw-sx-step); background: rgba(243, 227, 166, .1); }
.lxw-k-type, .lxw-k-const { color: var(--lxw-sx-type); background: rgba(255, 163, 181, .1); }
.lxw-k-var { color: var(--lxw-code-fg); }
.lxw-ed-doc { border-top: 1px solid rgba(255, 255, 255, .08); padding: 8px 11px 10px; display: grid; gap: 4px; background: #0C1621; }
.lxw-ed-doc code { font-size: .75rem; color: var(--lxw-sx-func); overflow-wrap: anywhere; white-space: normal; }
.lxw-ed-doc span { font-size: .75rem; color: #B4BFCC; line-height: 1.45; }

.lxw-ed-sig {
  position: absolute; z-index: 39; max-width: min(560px, 100%); padding: 7px 11px; border-radius: 10px;
  background: var(--lxw-pale); color: var(--lxw-ink); box-shadow: 0 10px 26px -12px rgba(6, 11, 17, .6), 0 0 0 1px rgba(10, 17, 25, .08);
  font-family: var(--lxw-font); font-size: .75rem; line-height: 1.45; pointer-events: none;
}
.lxw-ed-sig code { display: block; font-size: .8125rem; color: var(--lxw-text-2); white-space: normal; overflow-wrap: anywhere; }
.lxw-ed-sig .lxw-sig-fn { color: var(--lxw-blue-ink); font-weight: 700; }
.lxw-ed-sig b { color: var(--lxw-ink); font-weight: 800; background: var(--lxw-lime); border-radius: 4px; padding: 0 3px; }
.lxw-sig-d { display: block; margin-top: 2px; color: var(--lxw-text-2); }

/* 07 ── Banner ────────────────────────────────────────────────────────── */
.lxw-banner {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--lxw-err-bd); background: var(--lxw-err-bg); color: #7F1D1D; font-size: .8125rem; line-height: 1.5;
}
.lxw-banner > svg { width: 18px; height: 18px; color: var(--lxw-err); margin-top: 1px; }
.lxw-banner b { color: var(--lxw-err); }
.lxw-banner .lxw-where { font-size: .75rem; color: #9F3A3A; }
.lxw-banner pre {
  grid-column: 2; margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; overflow-x: auto;
  background: #fff; border: 1px solid var(--lxw-err-bd); color: var(--lxw-text); font-size: .75rem; line-height: 1.5;
}
.lxw-banner pre .lxw-caret { color: var(--lxw-err); font-weight: 800; }
.lxw-banner.is-ok { border-color: var(--lxw-ok-bd); background: var(--lxw-ok-bg); color: #14532D; }
.lxw-banner.is-ok > svg, .lxw-banner.is-ok b { color: var(--lxw-ok); }
.lxw-banner.is-info { border-color: #C9DDF5; background: var(--lxw-tint); color: var(--lxw-text-2); }
.lxw-banner.is-info > svg { color: var(--lxw-blue); }
.lxw-banner-x { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }

/* 08 ── Hasil ─────────────────────────────────────────────────────────── */
.lxw-out {
  display: flex; flex-direction: column; min-height: 240px; max-height: 100%;
  background: var(--lxw-card); border: 1px solid var(--lxw-line); border-radius: var(--lxw-r); box-shadow: var(--lxw-sh); overflow: hidden;
}
.lxw-out-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--lxw-line); }
.lxw-out-t { font-weight: 800; font-size: .875rem; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lxw-out-t code { font-size: .8125rem; color: var(--lxw-cyan-ink); background: var(--lxw-tint); padding: 2px 7px; border-radius: 6px; overflow-wrap: anywhere; }
.lxw-out-meta { font-size: .75rem; color: var(--lxw-text-3); font-weight: 600; }
.lxw-out-sp { flex: 1; }
.lxw-out-b { flex: 1; min-height: 0; overflow: auto; position: relative; }
.lxw-out-pad { padding: 14px; }
.lxw-out-pad.is-top { padding-bottom: 0; }
.lxw-out-pad.is-mx { padding-top: 12px; }
.lxw-out select {
  height: 32px; border: 1px solid var(--lxw-line-2); border-radius: 999px; padding: 0 30px 0 12px; font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--lxw-text); background: #fff; max-width: 100%;
}
.lxw-out select:focus { outline: none; border-color: var(--lxw-cyan); box-shadow: var(--lxw-ring); }

.lxw-empty-state { display: grid; place-items: center; text-align: center; gap: 8px; padding: 34px 18px; color: var(--lxw-text-3); }
.lxw-empty-state .lxw-ill {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--lxw-cyan-ink);
  background: linear-gradient(135deg, var(--lxw-tint), #F3FBE4); border: 1px solid var(--lxw-line);
}
.lxw-empty-state .lxw-ill svg { width: 24px; height: 24px; }
.lxw-empty-state p { margin: 0; max-width: 38ch; font-size: .8125rem; }
.lxw-empty-state b { color: var(--lxw-text); }

/* tabel data (preview tabel model, hasil tabel/kueri, preview M) */
.lxw-tbl { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.lxw-tbl th, .lxw-tbl td { padding: 6px 12px; border-bottom: 1px solid var(--lxw-line); white-space: nowrap; text-align: left; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.lxw-tbl thead th {
  position: sticky; top: 0; z-index: 2; background: #F7FAFD; font-weight: 700; color: var(--lxw-text); border-bottom: 1px solid var(--lxw-line-2);
}
.lxw-tbl .lxw-th { display: inline-flex; align-items: center; gap: 7px; }
.lxw-tbl .lxw-num { text-align: right; }
.lxw-tbl thead .lxw-num .lxw-th { flex-direction: row-reverse; }
.lxw-tbl .lxw-rn { position: sticky; left: 0; z-index: 1; width: 1%; min-width: 42px; text-align: right; color: var(--lxw-text-3); font-weight: 600; background: #FBFCFE; border-right: 1px solid var(--lxw-line); font-size: .75rem; }
.lxw-tbl thead .lxw-rn { z-index: 3; background: #F7FAFD; }
.lxw-tbl tbody tr:hover td { background: #F7FBFF; }
.lxw-tbl .lxw-mark { background: #F6FDE9; }
.lxw-tbl thead .lxw-mark { background: #EEFBD5; box-shadow: inset 0 -2px 0 #9BCB4B; }
.lxw-tbl tbody tr:hover td.lxw-mark { background: #EEFBD5; }
.lxw-tbl td.lxw-bad, .lxw-tbl tbody tr:hover td.lxw-bad { background: var(--lxw-err-bg); color: var(--lxw-err); font-weight: 700; box-shadow: inset 0 0 0 1px var(--lxw-err-bd); }
.lxw-tbl .lxw-v-null .lxw-null { color: var(--lxw-text-3); font-style: italic; font-size: .75rem; }
.lxw-tbl .lxw-v-err { color: var(--lxw-err); font-weight: 700; }
.lxw-tbl .lxw-v-bool { font-family: var(--lxw-mono); font-size: .75rem; }
.lxw-tbl .lxw-empty { text-align: center; color: var(--lxw-text-3); padding: 22px; }
.lxw-tbl caption { caption-side: top; }

.lxw-pager { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--lxw-line); font-size: .75rem; color: var(--lxw-text-3); font-weight: 600; }
.lxw-pager .lxw-out-sp { flex: 1; }
.lxw-pager .lxw-btn { min-height: 30px; padding: 0 11px; font-size: .75rem; }

/* matriks (visual measure) */
.lxw-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.lxw-matrix th, .lxw-matrix td { padding: 7px 14px; border-bottom: 1px solid var(--lxw-line); white-space: nowrap; }
.lxw-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: var(--lxw-ink); color: #fff; font-weight: 700; text-align: right; font-size: .75rem;
  border-bottom: 0;
}
.lxw-matrix thead th:first-child { text-align: left; left: 0; z-index: 3; }
.lxw-matrix thead th.lxw-mx-tot { background: var(--lxw-ink-4); color: var(--lxw-lime); }
.lxw-matrix thead .lxw-mx-axis { color: var(--lxw-cyan-lt); font-weight: 700; }
.lxw-matrix tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 600; color: var(--lxw-text); border-right: 1px solid var(--lxw-line); }
.lxw-matrix td { text-align: right; }
.lxw-matrix tbody tr:hover th, .lxw-matrix tbody tr:hover td { background: #F7FBFF; }
.lxw-matrix .lxw-mx-tot { font-weight: 800; background: #F3F8FD; }
.lxw-matrix tr.lxw-mx-totrow th, .lxw-matrix tr.lxw-mx-totrow td { font-weight: 800; background: var(--lxw-tint); border-top: 2px solid var(--lxw-ink); }
.lxw-matrix .lxw-blank { color: #A3AEBB; }
.lxw-matrix .is-bad { background: var(--lxw-err-bg) !important; color: var(--lxw-err); box-shadow: inset 0 0 0 1px var(--lxw-err-bd); }
.lxw-matrix .is-ok { box-shadow: inset 0 -2px 0 #9BCB4B; }
.lxw-mx-want { display: block; font-size: .6875rem; font-weight: 600; color: #9F3A3A; }

.lxw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lxw-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--lxw-tint); color: var(--lxw-blue-ink); border: 1px solid #C9DDF5;
}
.lxw-chip code { font-size: .75rem; color: inherit; }
.lxw-chip.is-filter { background: #F3F8E6; color: var(--lxw-lime-ink); border-color: #D7EBAE; }

/* kartu KPI (nilai tunggal) */
.lxw-kpi {
  margin: 18px; padding: 22px 24px 20px; border-radius: 18px; max-width: 460px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(214, 253, 145, .55), transparent 55%), linear-gradient(135deg, #F7FBFF, #EAF3FC);
  border: 1px solid #D4E5F7;
}
.lxw-kpi-v {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--lxw-ink); overflow-wrap: anywhere;
}
.lxw-kpi-l { margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--lxw-text-2); }
.lxw-kpi-s { margin-top: 10px; }
.lxw-kpi.is-bad { border-color: var(--lxw-err-bd); background: linear-gradient(135deg, #FFF8F8, var(--lxw-err-bg)); }
.lxw-kpi.is-bad .lxw-kpi-v { color: var(--lxw-err); }
.lxw-kpi.is-ok { border-color: #B9E3A0; }
.lxw-kpi-want { margin-top: 6px; font-size: .75rem; font-weight: 700; color: #9F3A3A; }

/* jawaban lulus cek: bingkai hasil hijau lembut (hilang lagi saat kode diubah) */
.lxw-ws.is-pass .lxw-out { border-color: #9BCB4B; box-shadow: 0 0 0 3px rgba(155, 203, 75, .22), var(--lxw-sh); }

/* model: relasi */
.lxw-rels { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; }
.lxw-rel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--lxw-line); background: #FBFCFE; font-size: .8125rem;
}
.lxw-rel code { font-size: .8125rem; color: var(--lxw-text); }
.lxw-rel code .lxw-tn { color: var(--lxw-blue-ink); font-weight: 700; }
.lxw-rel svg { width: 16px; height: 16px; color: var(--lxw-cyan-ink); }
.lxw-rel .lxw-card { margin-left: auto; font-size: .6875rem; font-weight: 700; color: var(--lxw-text-3); background: #fff; border: 1px solid var(--lxw-line); padding: 2px 8px; border-radius: 999px; }
/* relasi tidak aktif: garis putus-putus + warna redup yang tetap ≥ 4,5:1 (bukan opacity) */
.lxw-rel.is-off { border-style: dashed; background: #fff; }
.lxw-rel.is-off code, .lxw-rel.is-off code .lxw-tn { color: var(--lxw-text-3); }
.lxw-rel.is-off svg { color: var(--lxw-text-3); }
.lxw-model-h { display: grid; gap: 2px; padding: 14px 14px 0; font-size: .8125rem; color: var(--lxw-text-2); }
.lxw-model-h b { color: var(--lxw-text); font-size: .875rem; }
.lxw-model-tables { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.lxw-mt { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--lxw-line); font-size: .75rem; font-weight: 600; background: #fff; }
.lxw-mt svg { width: 14px; height: 14px; color: var(--lxw-cyan-ink); }
.lxw-mt .lxw-sub { color: var(--lxw-text-3); font-weight: 600; }

/* nilai M non-tabel */
.lxw-scalar { margin: 18px; display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 14px; background: var(--lxw-tint); border: 1px solid #D4E5F7; }
.lxw-scalar-v { font: 700 1.375rem/1.3 var(--lxw-mono); color: var(--lxw-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.lxw-scalar-k { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lxw-text-3); }
.lxw-rec { border-collapse: collapse; margin: 14px; font-size: .8125rem; }
.lxw-rec th, .lxw-rec td { padding: 6px 12px; border-bottom: 1px solid var(--lxw-line); text-align: left; vertical-align: top; }
.lxw-rec th { font-weight: 700; color: var(--lxw-text-2); background: #F7FAFD; }
.lxw-rec td { font-family: var(--lxw-mono); font-size: .75rem; }
.lxw-nested { font-family: var(--lxw-font); font-size: .6875rem; font-weight: 700; color: var(--lxw-cyan-ink); background: var(--lxw-tint); padding: 1px 6px; border-radius: 5px; }

/* 09 ── Responsif ─────────────────────────────────────────────────────── */
/* sempit: lebar WORKSPACE < 760px (watchNarrow() di ui-editor.js), bukan lebar layar: ponsel, tablet, atau panel soal
   yang lebar. Bertumpuk: seluruh workspace bergulir di dalam area kerja (tinggi tetap dari shell). */
.lxw-ws[data-narrow="1"] { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 10px; gap: 10px; overscroll-behavior: contain; }
.lxw-ws[data-narrow="1"] .lxw-side { flex: none; max-height: none; }
.lxw-ws[data-narrow="1"] .lxw-main { flex: none; overflow: visible; padding: 0; margin: 0; }
.lxw-ws[data-narrow="1"] .lxw-main > .lxw-out { flex: none; max-height: none; }
.lxw-ws[data-narrow="1"] .lxw-side-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 11px 14px; font-size: .8125rem; font-weight: 800; color: var(--lxw-text);
}
.lxw-ws[data-narrow="1"] .lxw-side-toggle svg { width: 14px; height: 14px; transition: transform .18s var(--lxw-ease); }
.lxw-ws[data-narrow="1"] .lxw-side-toggle .lxw-sub { margin-left: auto; font-weight: 600; color: var(--lxw-text-3); font-size: .75rem; }
.lxw-ws[data-narrow="1"] .lxw-side-toggle[aria-expanded="true"] .lxw-chev { transform: rotate(90deg); }
.lxw-ws[data-narrow="1"] .lxw-side[data-open="0"] .lxw-side-body { display: none; }
.lxw-ws[data-narrow="1"] .lxw-side-body { max-height: 46vh; overflow: auto; border-top: 1px solid var(--lxw-line); }
.lxw-ws[data-narrow="1"] .lxw-side-body .lxw-side-part, .lxw-ws[data-narrow="1"] .lxw-side-body .lxw-scroll { overflow: visible; max-height: none; }
.lxw-ws[data-narrow="1"] .lxw-out { min-height: 200px; }
.lxw-ws[data-narrow="1"] .lxw-out-b { max-height: 62vh; }
.lxw-ws[data-narrow="1"] .lxw-node-x { opacity: 1; }
@media (max-width: 480px) {
  .lxw-ws { padding: 8px; gap: 8px; }
  .lxw-code-h { padding: 8px 10px 8px 12px; }
  .lxw-fline { padding: 10px 12px 0; }
  .lxw-code-f { padding: 8px 12px; gap: 10px; }
  .lxw-code-f .lxw-hint-k { display: none; }
  .lxw-run { padding: 0 13px 0 11px; }
  .lxw-run kbd { display: none; }
  .lxw-run { margin-left: auto; } /* tetap di kanan walau baris judul terlipat */
  .lxw-m .lxw-code-host { display: none; } /* label "Power Query M" dekoratif: beri tempat untuk tombol Jalankan */
  .lxw-out-h { padding: 8px 10px; }
  .lxw-tbl th, .lxw-tbl td { padding: 5px 9px; }
  .lxw-matrix th, .lxw-matrix td { padding: 6px 10px; }
  .lxw-kpi { margin: 12px; padding: 18px; }
  .lxw-tab { padding: 7px 11px; }
  .lxw-ed-hl, .lxw-ed-ta { padding-right: 12px; }
  .lxw-ed-gut { width: calc(var(--lxw-gut-ch) * 1ch + 14px); }
  .lxw-ed-gut-in { padding-right: 6px; }
  .lxw-ed-pop { width: calc(100% - 4px); }
}
/* layar sentuh: 16px mencegah zoom otomatis iOS saat fokus ke textarea */
@media (pointer: coarse) {
  .lxw { --lxw-code-fs: 16px; --lxw-code-lh: 24px; }
  .lxw-ed-opt { min-height: 40px; }
  .lxw-node-b { padding-top: 8px; padding-bottom: 8px; }
  .lxw-node-x { width: 36px; height: 36px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lxw *, .lxw *::before, .lxw *::after { transition: none !important; animation: none !important; }
}
@media print {
  .lxw-ws { display: block; background: none; padding: 0; }
  .lxw-side, .lxw-run, .lxw-code-f, .lxw-tabs, .lxw-pager { display: none !important; }
  .lxw-code { background: #fff; color: #000; border: 1px solid #999; box-shadow: none; }
  .lxw-ed-ta { display: none; }
  .lxw-ed-layer { position: static; transform: none !important; }
  .lxw-out { border: 0; box-shadow: none; }
  .lxw-out-b { overflow: visible; max-height: none; }
}
@media (forced-colors: active) {
  .lxw-ed-ta { color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .lxw-ed-layer { display: none; }
  .lxw-tab[aria-selected="true"], .lxw-step[aria-current="true"] { outline: 2px solid Highlight; }
}