@charset "UTF-8";
/* ==========================================================================
   INSYNTIVE Academy — Latihan interaktif (/latihan/ & /en/latihan/)
   Hub kursus + workspace (panel soal, area kerja, hasil validasi, laci soal, Tanya AI, overlay premium, perayaan).
   Dimuat SETELAH app.css (font, token, .btn, header situs). Grid spreadsheet: latihan-grid.css; editor DAX / M:
   latihan-ws.css. Semua kelas diawali .lx- supaya tidak bentrok.

   Gaya: panel "kertas" hangat dengan tinta gelap, aksen cyan & lime brand, chrome tinta (laci, konsol hasil).
   Sengaja berbeda dari Excel / Google Sheets / produk lain (tanpa hijau Excel, tanpa pil navy).

   01 Token            06 Tanya AI             11 Laci "Semua soal"
   02 Kerangka         07 Area kerja           12 Ponsel (≤ 900px)
   03 Tombol & ikon    08 Pratinjau statis     13 Hub /latihan/
   04 Panel soal       09 Hasil validasi       14 Gerak & cetak
   05 Petunjuk/solusi  10 Perayaan & kunci
   ========================================================================== */

/* 01 ── Token ─────────────────────────────────────────────────────────── */
.lx-shell, .lx-hub, .lx-missing {
  --lx-paper: #FBF7EF;
  --lx-paper-2: #F3EDE1;
  --lx-paper-3: #EAE2D2;
  --lx-line: #E4DBC9;
  --lx-line-2: rgba(14, 22, 32, .26);
  --lx-ink: #0A1119;
  --lx-ink-2: #0F1B26;
  --lx-ink-3: #172636;
  --lx-text: #0E1620;
  --lx-text-2: #3D4754;
  --lx-text-3: #59626E;
  --lx-on-ink: #EEF3F8;
  --lx-on-ink-2: #B7C2CE;
  --lx-on-ink-3: #8D9AA9;
  --lx-cyan: #02A0C1;
  --lx-cyan-ink: #00718A;
  --lx-blue: #3581E1;
  --lx-lime: #D6FD91;
  --lx-lime-ink: #4E6B12;
  --lx-mint: #97D1C6;
  --lx-pale: #D7E8FB;
  --lx-coral: #FF9C9C;
  --lx-err: #B42318;
  --lx-ok: #157F3D;
  --lx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --lx-font: var(--font, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif);
  --lx-ease: cubic-bezier(.2, .7, .2, 1);
  --lx-pw: 420px;
  --tc: var(--lx-cyan);
}
.lx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lx-i { width: 18px; height: 18px; flex: none; }
.lx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-muted { color: var(--lx-text-3); font-size: .8125rem; line-height: 1.5; }
.lx-label { display: block; font: 800 .6875rem/1.3 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-text-3); }
.lx-shell :focus-visible, .lx-hub :focus-visible { outline: 3px solid var(--lx-cyan-ink); outline-offset: 2px; border-radius: 6px; }
.lx-drawer :focus-visible, .lx-res :focus-visible, .lx-mswitch :focus-visible, .lx-hero :focus-visible, .lx-upsell__card :focus-visible, .lx-pre :focus-visible { outline-color: var(--lx-lime); }
.lx-shell kbd, .lx-hub kbd {
  display: inline-block; min-width: 1.5em; padding: 1px 5px; border: 1px solid var(--lx-line); border-bottom-width: 2px; border-radius: 5px;
  background: #fff; font: 700 .6875rem/1.4 var(--lx-mono); color: var(--lx-text); text-align: center; vertical-align: 1px;
}

/* 02 ── Kerangka (layar penuh: app bar dari Worker + workspace) ───────── */
/* Halaman workspace dari Worker: <body class="lx-pub lx-app"> → <header class="lx-bar"> + <main class="lx-main"> → .lx-shell */
/* (ui-app.js juga menambah body.lx-body untuk browser tanpa :has) */
body:has(.lx-shell), body.lx-body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--ink-900, #0A1119); }
body:has(.lx-shell) > .lx-main, body.lx-body > .lx-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; outline: none; }

/* App bar ringkas workspace (markup dari src/latihan-page.js): logo, "Latihan", 4 kursus, ID/EN, Masuk / Daftar. */
.lx-bar { position: relative; z-index: 50; flex: none; background: var(--ink-900, #0A1119); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lx-bar__in { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 10px 0 12px; }
.lx-bar__brand { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; flex: none; color: #fff; }
.lx-bar__brand svg { width: 30px; height: 30px; }
.lx-bar__home { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 10px; border-right: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: .9375rem; letter-spacing: -.01em; text-decoration: none; }
.lx-bar__home:hover { color: var(--lime, #D6FD91); }
.lx-bar__courses { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; margin-left: 4px; overflow-x: auto; scrollbar-width: none; }
.lx-bar__courses::-webkit-scrollbar { display: none; }
.lx-bar__courses a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--on-ink-2, #B4BFCC); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lx-bar__courses a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lx-bar__courses a[aria-current="page"] { color: #fff; }
.lx-bar__courses a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--lime, #D6FD91); }
.lx-bar__end { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.lx-bar .hdr-link { padding-inline: 10px; }
.lx-bar :focus-visible { outline: 3px solid var(--lime, #D6FD91); outline-offset: 2px; border-radius: 8px; }
.lx-pub .bl-show-sm { display: none; }
@media (max-width: 760px) {
  .lx-bar__home { display: none; }
  .lx-bar__courses { flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
  .lx-bar__courses a { padding: 0 9px; }
  .lx-bar__courses a:last-child { margin-right: 14px; }
}
@media (max-width: 479.98px) {
  .lx-pub .bl-hide-sm { display: none; }
  .lx-pub .bl-show-sm { display: inline; }
  .lx-bar__in { gap: 2px; padding: 0 6px; }
  .lx-bar .hdr-link { padding-inline: 8px; }
  .lx-bar .btn--sm { padding-inline: 12px; }
}
@media (max-width: 400px) { .lx-bar [data-auth="guest"].hdr-link { display: none; } }
/* Header situs di hub / 404 (sama dengan Belajar Gratis di belajar.css): muat di layar 320–479px tanpa scroll ke samping */
@media (max-width: 479.98px) {
  .lx-pub .site-header .container { gap: 6px; }
  .lx-pub .site-header .hdr-link { padding-inline: 8px; }
  .lx-pub .site-header .hdr-actions .btn--sm { padding-inline: 12px; }
}
@media (max-width: 359.98px) { .lx-pub .site-header .hdr-actions .hdr-link { display: none; } }
/* HP: pilihan kursus pindah ke baris kedua selebar layar supaya keempatnya selalu terlihat */
@media (max-width: 559.98px) {
  .lx-bar__in { flex-wrap: wrap; height: auto; row-gap: 0; }
  .lx-bar__brand, .lx-bar__end { min-height: 50px; }
  .lx-bar__courses { order: 3; flex: 1 1 100%; margin: 0 -6px; padding: 0 2px 2px; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .08); -webkit-mask-image: none; mask-image: none; }
  .lx-bar__courses a { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 6px; font-size: .8125rem; }
  .lx-bar__courses a:last-child { margin-right: 0; }
  .lx-bar__courses a[aria-current="page"]::after { left: 18%; right: 18%; }
}
.lx-shell {
  position: relative; flex: 1 1 auto; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: var(--lx-pw) 10px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "panel split ws";
  background: var(--lx-paper-2); color: var(--lx-text); outline: none;
}
.lx-shell[data-collapsed="1"] { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "rail ws"; }
.lx-shell[data-collapsed="1"] .lx-panel, .lx-shell[data-collapsed="1"] .lx-split { display: none; }
.lx-shell.is-resizing { cursor: col-resize; user-select: none; }
.lx-shell.is-resizing iframe, .lx-shell.is-resizing .lx-work { pointer-events: none; }

.lx-panel { grid-area: panel; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--lx-paper); border-right: 1px solid var(--lx-line); }
.lx-rail { grid-area: rail; display: none; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: var(--lx-paper); border-right: 1px solid var(--lx-line); }
.lx-shell[data-collapsed="1"] .lx-rail { display: flex; }
.lx-split { grid-area: split; position: relative; cursor: col-resize; touch-action: none; background: transparent; outline: none; }
.lx-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background-color .15s; }
.lx-split::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 36px; margin-top: -18px; border-radius: 4px; background: var(--lx-paper-3); box-shadow: 0 0 0 1px var(--lx-line); }
.lx-split:hover::before, .lx-split:focus-visible::before, .is-resizing .lx-split::before { background: var(--lx-cyan); }
.lx-split:focus-visible::after { background: var(--lx-cyan-ink); }
.lx-ws { grid-area: ws; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 10px 10px 10px 0; }
.lx-mswitch { display: none; }
.lx-only-sm { display: none !important; }

/* 03 ── Tombol & ikon ─────────────────────────────────────────────────── */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: inherit;
  font: 700 .9375rem/1.2 var(--font, inherit); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--lx-ease), box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.lx-btn:active { transform: scale(.98); }
.lx-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.lx-btn--go { background: var(--lx-lime); color: var(--lx-ink); box-shadow: inset 0 -2px 0 rgba(10, 17, 25, .16); }
.lx-btn--go:hover { background: #E5FFB8; }
.lx-btn--line { border-color: var(--lx-line-2); color: var(--lx-text); background: #fff; }
.lx-btn--line:hover { border-color: var(--lx-text); }
.lx-btn--quiet { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--lx-on-ink); }
.lx-btn--quiet:hover { background: rgba(255, 255, 255, .12); }
.lx-btn--quiet.is-armed { background: #5A1F24; border-color: var(--lx-coral); color: #fff; }
.lx-btn--ghost { border-color: rgba(255, 255, 255, .28); color: #fff; }
.lx-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.lx-btn--lg { min-height: 52px; padding: 12px 22px; font-size: 1.0625rem; border-radius: 12px; }
.lx-btn--block { width: 100%; }
.lx-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; font: 700 .8125rem/1 var(--font, inherit); text-decoration: none; cursor: pointer;
}
.lx-iconbtn:hover { background: var(--lx-paper-2); }
.lx-iconbtn.is-off { opacity: .32; cursor: default; }
.lx-iconbtn.is-off:hover { background: transparent; }
.lx-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--lx-cyan-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (pointer: coarse) { .lx-iconbtn { min-width: 44px; height: 44px; } .lx-btn { min-height: 44px; } }

/* 04 ── Panel soal ────────────────────────────────────────────────────── */
.lx-phead { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 6px 8px; border-bottom: 1px solid var(--lx-line); background: var(--lx-paper); }
.lx-phead__all { padding: 0 10px 0 8px; background: var(--lx-paper-2); }
.lx-phead__all:hover { background: var(--lx-paper-3); }
.lx-phead__crumb { flex: 1; min-width: 0; display: grid; justify-items: center; text-align: center; line-height: 1.25; }
.lx-phead__cat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--lx-text-3); }
.lx-phead__cat b { color: var(--lx-text); font-family: var(--lx-mono); font-size: .75rem; }
.lx-phead__n { font: 700 .75rem/1.3 var(--lx-font); color: var(--lx-text-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lx-phead__nav { display: flex; gap: 2px; }

.lx-pscroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 28px; scrollbar-gutter: stable; }
.lx-pscroll.is-ai { display: flex; flex-direction: column; padding-bottom: 12px; }
.lx-guest { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--lx-paper-2); font-size: .8125rem; line-height: 1.5; color: var(--lx-text-2); }
.lx-guest .lx-i { width: 16px; height: 16px; margin-top: 2px; color: var(--lx-text-3); }
.lx-guest a { color: var(--lx-cyan-ink); font-weight: 700; }

.lx-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lx-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: .75rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.lx-badge .lx-i { width: 13px; height: 13px; }
.lx-badge--lvl { background: #fff; border: 1px solid var(--lx-line); color: var(--lx-text); }
.lx-badge--free { background: var(--lx-mint); color: var(--lx-ink); }
.lx-badge--pro { background: var(--lx-ink); color: var(--lx-lime); }
.lx-dots { display: inline-flex; gap: 3px; }
.lx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #D3C9B5; }
.lx-dots i.on { background: var(--lx-cyan-ink); }
.lx-fn { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--lx-pale); color: #10325C; font: 700 .75rem/1.35 var(--lx-mono); }
.lx-title { position: relative; margin: 10px 0 12px; font-size: clamp(1.3125rem, 1.1rem + .7vw, 1.6875rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; outline: none; }
.lx-done-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; vertical-align: 2px; border-radius: 50%; background: var(--lx-lime); color: var(--lx-ink); }
.lx-done-mark .lx-i { width: 15px; height: 15px; stroke-width: 3; }

.lx-tabs { position: sticky; top: -16px; z-index: 3; display: flex; gap: 2px; margin: 0 -20px 16px; padding: 0 12px; background: var(--lx-paper); border-bottom: 1.5px solid var(--lx-line); overflow-x: auto; scrollbar-width: none; }
.lx-tabs::-webkit-scrollbar { display: none; }
.lx-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; margin-bottom: -1.5px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--lx-text-3); font: 700 .875rem/1.2 var(--font, inherit); white-space: nowrap; cursor: pointer;
}
.lx-tab .lx-i { width: 16px; height: 16px; }
.lx-tab:hover { color: var(--lx-text); }
.lx-tab[aria-selected="true"] { color: var(--lx-text); border-bottom-color: var(--lx-ink); }
.lx-tab[aria-selected="true"] .lx-i { color: var(--lx-cyan-ink); }
.lx-tab__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lx-paper-3); color: var(--lx-text-2); font: 800 .6875rem/1 var(--lx-font); }
#lx-tab-ai .lx-i { color: var(--lx-cyan-ink); }
.lx-tp { outline: none; }
.lx-tp:focus-visible { outline: 3px solid var(--lx-cyan-ink); outline-offset: 4px; }

.lx-md { color: var(--lx-text-2); font-size: .96875rem; line-height: 1.65; overflow-wrap: anywhere; }
.lx-md p + p, .lx-md p + ul, .lx-md ul + p, .lx-md p + ol, .lx-md ol + p, .lx-md p + .lx-pre, .lx-md .lx-pre + p { margin-top: .6em; }
.lx-md ul, .lx-md ol { margin: .4em 0 0; padding-left: 1.25em; }
.lx-md li + li { margin-top: .25em; }
.lx-md strong { color: var(--lx-text); }
.lx-md code, .lx-res__msgs code { padding: 1px 6px; border-radius: 5px; background: var(--lx-pale); color: #10325C; font: 700 .84em/1.4 var(--lx-mono); }
.lx-md .lx-md-h { margin-top: .8em; color: var(--lx-text); }
.lx-story { margin-bottom: 4px; }
.lx-task { margin: 16px 0; padding: 12px 14px 14px; border: 1px solid var(--lx-line); border-left: 4px solid var(--lx-ink); border-radius: 10px; background: #fff; }
.lx-task .lx-md { color: var(--lx-text); }
.lx-mark { display: inline-block; margin-bottom: 8px; padding: 4px 8px; border-radius: 6px; background: var(--lx-lime); color: var(--lx-ink); font: 800 .6875rem/1 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; }
.lx-facts { display: grid; gap: 10px; margin: 16px 0; }
.lx-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lx-kv .lx-label { min-width: 132px; }
.lx-kv__v { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lx-ref { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(214, 253, 145, .7); border: 1.5px dashed var(--lx-lime-ink); color: var(--lx-ink); font: 700 .8125rem/1.4 var(--lx-mono); }
.lx-fold { margin: 14px 0; border: 1px solid var(--lx-line); border-radius: 12px; background: #fff; }
.lx-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; list-style: none; cursor: pointer; font-weight: 700; font-size: .9375rem; border-radius: 12px; }
.lx-fold > summary::-webkit-details-marker { display: none; }
.lx-fold > summary > .lx-i:first-child { color: var(--lx-cyan-ink); }
.lx-fold > summary > span:nth-of-type(1) { flex: 1; }
.lx-exp__n { font: 700 .75rem/1 var(--lx-font); color: var(--lx-text-3); }
.lx-fold__chev { transition: transform .2s var(--lx-ease); color: var(--lx-text-3); }
.lx-fold[open] .lx-fold__chev { transform: rotate(180deg); }
.lx-fold__body { padding: 0 14px 14px; }
.lx-exp { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.lx-exp th, .lx-exp td { padding: 6px 8px; border-bottom: 1px solid var(--lx-paper-2); text-align: left; }
.lx-exp thead th { font: 800 .6875rem/1.2 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-text-3); }
.lx-exp tbody th { width: 30%; font-weight: 600; }
.lx-exp tbody th code { font: 700 .8125rem var(--lx-mono); }
.lx-exp td.n { text-align: right; }
.lx-exp--wide tbody th { width: auto; }
.lx-mt { overflow-x: auto; }
.lx-keys { list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--lx-line); display: grid; gap: 8px; }
.lx-keys li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8125rem; color: var(--lx-text-3); }
.lx-keys__k { display: inline-flex; gap: 3px; flex: none; }

/* 05 ── Petunjuk & solusi ─────────────────────────────────────────────── */
.lx-hints { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.lx-hint { padding: 12px 14px; border: 1px solid var(--lx-line); border-left: 4px solid var(--lx-cyan); border-radius: 10px; background: #fff; outline: none; }
.lx-hint .lx-label { margin-bottom: 4px; color: var(--lx-cyan-ink); }
.lx-hint.is-new { animation: lx-in .35s var(--lx-ease); }
.lx-hints__more .lx-i { color: var(--lx-cyan-ink); }
.lx-hints__note { margin-top: 10px; }
.lx-solgate, .lx-aicard {
  display: grid; justify-items: start; gap: 10px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--lx-line);
}
.lx-solgate { border-style: dashed; border-width: 1.5px; }
.lx-solgate p { color: var(--lx-text-2); font-size: .9375rem; line-height: 1.55; }
.lx-solgate__ic, .lx-aicard__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lx-ink); color: var(--lx-lime); }
.lx-solgate__confirm { display: grid; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid var(--lx-paper-2); }
.lx-sol { display: grid; gap: 10px; outline: none; }
.lx-sol > .lx-label { margin-top: 6px; }
.lx-answers { display: grid; gap: 10px; }
.lx-answer { display: grid; gap: 6px; }
.lx-answer__code { position: relative; }
.lx-answer__code .lx-pre { padding-right: 52px; }
.lx-copy { position: absolute; top: 6px; right: 6px; color: var(--lx-on-ink-2); }
.lx-copy:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lx-pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--lx-ink-2); color: #E8F0F7; font: 600 .8125rem/1.6 var(--lx-mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; tab-size: 4; }
.lx-pre code { font: inherit; background: none; padding: 0; color: inherit; }
.lx-aicard__t, .lx-lockcard__t { font-size: 1.125rem; letter-spacing: -.02em; line-height: 1.25; }
.lx-aicard p { color: var(--lx-text-2); font-size: .9375rem; line-height: 1.6; }
.lx-aicard .lx-muted { font-size: .8125rem; }

/* 06 ── Tanya AI ──────────────────────────────────────────────────────── */
.lx-tp--ai:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 360px; }
.lx-ai { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lx-chat { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.lx-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lx-chat__who { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; }
.lx-chat__who .lx-i { color: var(--lx-cyan-ink); }
.lx-chat__quota { font: 600 .75rem/1.3 var(--lx-font); color: var(--lx-text-3); }
.lx-chat__log { flex: 1 1 auto; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; outline: none; }
.lx-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.lx-msg__b { min-width: 0; font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.lx-msg--me { justify-content: flex-end; }
.lx-msg--me .lx-msg__b { max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--lx-ink-2); color: #fff; }
.lx-msg--ai .lx-msg__b { max-width: calc(100% - 36px); padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid var(--lx-line); color: var(--lx-text); }
.lx-msg--ai .lx-msg__b.lx-md { font-size: .9375rem; }
.lx-msg__av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--lx-lime); color: var(--lx-ink); }
.lx-msg__av .lx-i { width: 15px; height: 15px; }
.lx-msg--err { padding: 10px 12px; border-radius: 10px; background: #FDECEC; border: 1px solid #F5C2C2; color: #7A1A14; font-size: .875rem; }
.lx-msg--err > .lx-i { width: 16px; height: 16px; margin-top: 2px; }
.lx-msg--err .lx-linkbtn { color: #7A1A14; }
.lx-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.lx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--lx-text-3); animation: lx-blink 1.2s infinite ease-in-out; }
.lx-typing i:nth-child(2) { animation-delay: .15s; }
.lx-typing i:nth-child(3) { animation-delay: .3s; }
.lx-chat__dock { display: grid; gap: 8px; padding-top: 4px; }
.lx-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-chip { min-height: 34px; padding: 6px 12px; border: 1px solid var(--lx-line); border-radius: 999px; background: #fff; color: var(--lx-text); font: 600 .8125rem/1.2 var(--font, inherit); cursor: pointer; }
.lx-chip:hover { border-color: var(--lx-text); }
.lx-chip[disabled] { opacity: .5; cursor: default; }
.lx-chat__form { display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 12px; border: 1.5px solid var(--lx-line-2); border-radius: 14px; background: #fff; }
.lx-chat__form:focus-within { border-color: var(--lx-cyan-ink); box-shadow: 0 0 0 3px rgba(2, 160, 193, .18); }
.lx-chat__form textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; padding: 8px 0; border: 0; outline: none; resize: none; background: transparent; color: var(--lx-text); font: 500 16px/1.45 var(--font, inherit); }
.lx-chat__form textarea:disabled { color: var(--lx-text-3); }
.lx-chat__form textarea:focus-visible { outline: none; }
.lx-chat__send { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: var(--lx-lime); color: var(--lx-ink); cursor: pointer; }
.lx-chat__send:hover { background: #E5FFB8; }
.lx-chat__send[disabled] { opacity: .45; cursor: default; }
.lx-chat__fine { font-size: .75rem; color: var(--lx-text-3); line-height: 1.45; }

/* 07 ── Area kerja ────────────────────────────────────────────────────── */
.lx-work {
  position: relative; flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--lx-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 22, 32, .04);
}
.lx-work > * { flex: 1 1 auto; min-height: 0; min-width: 0; }
.lx-work[aria-busy="true"]::after { content: ""; position: absolute; top: 10px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lx-cyan); border-right-color: transparent; animation: lx-spin .7s linear infinite; }
.lx-work__load { display: grid; place-items: center; }
.lx-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lx-paper-3); border-top-color: var(--lx-cyan-ink); animation: lx-spin .8s linear infinite; }
.lx-work__err {
  flex: 0 0 auto !important; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 10px; padding: 12px 14px; border-radius: 10px;
  background: #FDECEC; border: 1px solid #F5C2C2; color: #7A1A14; font-size: .875rem; line-height: 1.5;
}
.lx-work__err > div { flex: 1 1 220px; }
.lx-work__err .lx-i { margin-top: 2px; }

/* 08 ── Pratinjau statis (sebelum grid / editor termuat, juga untuk mesin pencari) ─ */
.lx-sg { display: flex; flex-direction: column; min-height: 0; height: 100%; font-size: 13px; color: #1B2430; }
/* ukuran sama dengan grid hidup (toolbar 44, formula bar 42, header 26, kepala baris 38, kaki 40) → tanpa lompatan tata letak */
.lx-sg__tb { flex: none; height: 44px; background: var(--lx-ink) radial-gradient(120% 140% at 100% 0%, rgba(2, 160, 193, .16), transparent 55%); }
.lx-sg__bar { flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px; border-bottom: 1px solid #E3E8EE; background: #fff; }
.lx-sg__name { width: 72px; padding: 3px 8px; border: 1px solid #E3E8EE; border-radius: 6px; font: 600 12px/1.4 var(--lx-mono); color: var(--lx-text-2); }
.lx-sg__fx { font: italic 700 12px/1 var(--lx-mono); color: var(--lx-text-3); }
.lx-sg__formula { flex: 1; height: 24px; border-radius: 6px; background: #F6F8FA; }
.lx-sg__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lx-sg__table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.lx-sg__table col { width: 100px; }
.lx-sg__table col.lx-sg__rh { width: 38px; }
.lx-sg__table th, .lx-sg__table td { height: 26px; padding: 0 6px; border-right: 1px solid #E8ECF1; border-bottom: 1px solid #E8ECF1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 500; }
.lx-sg__table thead th { position: sticky; top: 0; z-index: 2; background: #F3F5F8; color: #5A6676; font-size: 12px; font-weight: 600; text-align: center; }
.lx-sg__table tbody th { position: sticky; left: 0; z-index: 1; background: #F3F5F8; color: #5A6676; font-size: 12px; font-weight: 600; text-align: center; }
.lx-sg__table thead th:first-child { left: 0; z-index: 3; }
.lx-sg__table td.n { text-align: right; }
.lx-sg__table td.b { text-align: center; }
.lx-sg__table td.bold { font-weight: 800; }
.lx-sg__table td.is-target { background: rgba(214, 253, 145, .42); }
.lx-sg__tabs { flex: none; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px; border-top: 1px solid #E3E8EE; background: #fff; }
.lx-sg__tabs span { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--lx-text-3); }
.lx-sg__tabs span.on { background: var(--lx-ink); color: #fff; }
.lx-static { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.lx-static__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--lx-text-2); }
.lx-static__bar .lx-i { color: var(--lx-cyan-ink); }
.lx-static__bar code { font: 700 .8125rem var(--lx-mono); }
.lx-static__code { min-height: 140px; }
.lx-static__note { margin: 0; }

/* 09 ── Hasil validasi (konsol tinta) ─────────────────────────────────── */
.lx-res { flex: 0 0 auto; display: flex; flex-direction: column; max-height: 46%; min-height: 0; border-radius: 14px; background: var(--lx-ink-2); color: var(--lx-on-ink); box-shadow: 0 10px 30px -18px rgba(6, 11, 17, .6); overflow: hidden; }
.lx-res__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lx-res[data-collapsed="1"] .lx-res__head { border-bottom-color: transparent; }
.lx-res__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; }
.lx-res__toggle:hover { background: rgba(255, 255, 255, .05); }
.lx-res__h { font: 800 .75rem/1.2 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-on-ink-2); white-space: nowrap; }
.lx-res__score { padding: 3px 8px; border-radius: 6px; font: 800 .75rem/1.2 var(--lx-font); font-variant-numeric: tabular-nums; }
.lx-res__score:empty { display: none; }
.lx-res__score[data-ok="1"] { background: var(--lx-lime); color: var(--lx-ink); }
.lx-res__score[data-ok="0"] { background: rgba(255, 156, 156, .16); color: #FFC2C2; }
.lx-res__chev { margin-left: auto; color: var(--lx-on-ink-3); transition: transform .2s var(--lx-ease); }
.lx-res[data-collapsed="1"] .lx-res__chev { transform: rotate(180deg); }
.lx-res__acts { display: flex; gap: 6px; flex: none; }
.lx-btn--check { padding-inline: 18px; }
.lx-res__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 16px 14px; transition: opacity .2s; }
.lx-res[data-collapsed="1"] .lx-res__body { display: none; }
.lx-res.is-stale .lx-res__body { opacity: .55; }
.lx-res__empty { display: flex; align-items: center; gap: 10px; color: var(--lx-on-ink-2); font-size: .875rem; }
.lx-res__empty .lx-i { color: var(--lx-cyan); }
.lx-res__empty b { color: #fff; }
.lx-res__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.lx-res__sum b { color: #fff; }
.lx-res__sum p { color: var(--lx-on-ink-2); font-size: .875rem; }
.lx-res__big { grid-row: span 2; font: 800 2.125rem/1 var(--lx-font); color: #FFC2C2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lx-res__big small { font-size: .5em; }
.lx-meter { grid-column: 2; display: block; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lx-meter span { display: block; height: 100%; background: var(--lx-coral); border-radius: inherit; }
.lx-res__msgs { margin: 0 0 12px; padding-left: 1.1em; display: grid; gap: 4px; color: var(--lx-on-ink); font-size: .875rem; line-height: 1.55; }
.lx-res__msgs p { margin: 0; }
.lx-res__msgs code { background: rgba(215, 232, 251, .14); color: #D7E8FB; }
.lx-res__msgs strong { color: #fff; }
.lx-rt { overflow-x: auto; }
.lx-rt table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.lx-rt th, .lx-rt td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; vertical-align: middle; }
.lx-rt thead th { font: 800 .6875rem/1.2 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-on-ink-3); }
.lx-rt tbody th code { font: 700 .8125rem var(--lx-mono); color: #fff; }
.lx-rt td { color: var(--lx-on-ink); font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-rt__st { width: 28px; }
.lx-rt__st .lx-i { width: 16px; height: 16px; stroke-width: 3; }
.lx-rt tr.ok .lx-rt__st { color: var(--lx-lime); }
.lx-rt tr.no .lx-rt__st { color: var(--lx-coral); }
.lx-rt tr.no td:nth-child(3) { color: #FFC2C2; }
.lx-res__nil { color: var(--lx-on-ink-3); font-style: italic; font-family: var(--font, inherit); }
.lx-res__tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 156, 156, .16); color: #FFC2C2; font-size: .6875rem; font-weight: 700; vertical-align: 1px; }
.lx-res__more { margin-top: 6px; font-size: .75rem; color: var(--lx-on-ink-3); }
.lx-res__cmp { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lx-res__cmp .lx-label { color: var(--lx-on-ink-3); margin-bottom: 6px; }
.lx-res .lx-exp th, .lx-res .lx-exp td { border-bottom-color: rgba(255, 255, 255, .07); color: var(--lx-on-ink); }
.lx-res .lx-exp thead th { color: var(--lx-on-ink-3); }
.lx-res .lx-muted { color: var(--lx-on-ink-3); }
.lx-res__ai { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .875rem; color: var(--lx-on-ink-2); }
.lx-res__ai .lx-i { color: var(--lx-lime); }
.lx-res .lx-linkbtn { color: var(--lx-lime); }

/* 10 ── Perayaan & kunci premium ─────────────────────────────────────── */
.lx-win {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px;
  border-radius: 12px; overflow: hidden; background: linear-gradient(120deg, rgba(214, 253, 145, .18), rgba(2, 160, 193, .14)); border: 1px solid rgba(214, 253, 145, .35);
}
.lx-win__badge { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--lx-lime); color: var(--lx-ink); animation: lx-pop .5s var(--lx-ease) both; }
.lx-win__badge .lx-i { width: 26px; height: 26px; }
.lx-win__txt { position: relative; }
.lx-win__txt h3 { font-size: 1.0625rem; color: #fff; letter-spacing: -.02em; line-height: 1.3; }
.lx-win__txt p { margin-top: 2px; color: var(--lx-on-ink-2); font-size: .875rem; }
.lx-win__plus { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 6px; background: var(--lx-lime); color: var(--lx-ink); font: 800 .75rem/1.5 var(--lx-font); }
.lx-win__acts { position: relative; }
.lx-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lx-confetti i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)) scale(var(--s)); animation: lx-fall 1.7s var(--d) cubic-bezier(.25, .6, .35, 1) forwards; }
.lx-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }

.lx-locked { position: relative; display: grid; place-items: center; padding: 20px; overflow: hidden; background: #fff; }
.lx-locked__ghost { position: absolute; inset: 0; filter: blur(3px); opacity: .7; pointer-events: none; user-select: none; }
.lx-locked__ghost .lx-sg__table { width: 100%; table-layout: fixed; }
.lx-locked__ghost col.lx-sg__rh { width: 44px; }
.lx-locked__ghost td, .lx-locked__ghost th { height: 30px; padding: 0 10px; border-right: 1px solid #E8ECF1; border-bottom: 1px solid #E8ECF1; }
.lx-locked__ghost thead th, .lx-locked__ghost tbody th { background: #F3F5F8; color: #5A6676; font-size: 12px; }
.lx-locked__ghost i { display: block; height: 8px; border-radius: 4px; background: #D6DEE8; }
.lx-locked__ghost i.w1 { width: 70%; } .lx-locked__ghost i.w2 { width: 45%; margin-left: auto; } .lx-locked__ghost i.w3 { width: 85%; }
.lx-lockcard {
  position: relative; display: grid; justify-items: center; gap: 10px; width: min(100%, 400px); padding: 26px 22px; text-align: center;
  border-radius: 18px; background: var(--lx-paper); border: 1px solid var(--lx-line); box-shadow: 0 30px 60px -28px rgba(6, 11, 17, .45);
}
.lx-lockcard__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lx-ink); color: var(--lx-lime); }
.lx-lockcard__ic .lx-i { width: 24px; height: 24px; }
.lx-lockcard p { color: var(--lx-text-2); font-size: .9375rem; line-height: 1.55; }
.lx-lockcard__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.lx-lockcard--sm { justify-items: start; width: 100%; margin: 14px 0; padding: 18px; text-align: left; box-shadow: none; background: #fff; }
.lx-lockcard--sm .lx-lockcard__ic { width: 40px; height: 40px; border-radius: 12px; }
.lx-lockcard--sm .lx-lockcard__acts { justify-content: flex-start; }
@media (min-width: 901px) { #lx-tp-soal .lx-lockcard--sm { display: none; } }

.lx-skel { display: grid; gap: 10px; padding-top: 4px; }
.lx-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--lx-paper-2), var(--lx-paper-3), var(--lx-paper-2)); background-size: 200% 100%; animation: lx-shimmer 1.3s linear infinite; }
.lx-skel i.s { width: 60%; }

/* 11 ── Laci "Semua soal" ─────────────────────────────────────────────── */
.lx-drawer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.lx-drawer[data-open="true"] { pointer-events: auto; }
.lx-drawer__scrim { position: absolute; inset: 0; background: rgba(6, 11, 17, .45); opacity: 0; transition: opacity .22s; }
.lx-drawer[data-open="true"] .lx-drawer__scrim { opacity: 1; }
.lx-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(390px, 100%); display: flex; flex-direction: column; min-height: 0;
  background: var(--lx-ink-2); color: var(--lx-on-ink); box-shadow: 24px 0 60px -30px rgba(0, 0, 0, .7);
  transform: translateX(-104%); visibility: hidden; transition: transform .26s var(--lx-ease), visibility 0s linear .26s;
}
.lx-drawer[data-open="true"] .lx-drawer__panel { transform: none; visibility: visible; transition: transform .26s var(--lx-ease), visibility 0s; }
.lx-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 8px 16px; }
.lx-drawer__head h2 { font-size: 1.0625rem; letter-spacing: -.02em; color: #fff; }
.lx-drawer .lx-iconbtn:hover { background: rgba(255, 255, 255, .08); }
.lx-tracks { list-style: none; margin: 0; padding: 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lx-tracks a {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  color: var(--lx-on-ink-2); font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.lx-tracks a .lx-i { width: 16px; height: 16px; color: var(--tc); }
.lx-tracks a span { overflow: hidden; text-overflow: ellipsis; }
.lx-tracks a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lx-tracks a[aria-current="true"] { border-color: var(--lx-lime); color: #fff; background: rgba(214, 253, 145, .08); }
.lx-drawer__tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 12px 6px; }
.lx-search { position: relative; display: block; }
.lx-search .lx-i { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--lx-on-ink-3); pointer-events: none; }
.lx-search input, .lx-catsel select {
  width: 100%; min-height: 40px; padding: 8px 12px 8px 34px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  background: rgba(255, 255, 255, .05); color: #fff; font: 500 16px/1.3 var(--font, inherit); outline: none; -webkit-appearance: none; appearance: none;
}
.lx-search input::placeholder { color: var(--lx-on-ink-3); }
.lx-search input:focus, .lx-catsel select:focus { border-color: var(--lx-lime); box-shadow: 0 0 0 3px rgba(214, 253, 145, .18); }
.lx-catsel select { padding-left: 12px; padding-right: 36px; font-size: .875rem; background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7C2CE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; }
.lx-catsel select option { color: var(--lx-ink); background: #fff; }

.lx-drawer__stat { position: relative; margin: 4px 16px 6px; padding-bottom: 9px; font: 700 .75rem/1.3 var(--lx-font); color: var(--lx-on-ink-2); }
.lx-drawer__stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--lx-lime) var(--p, 0%), rgba(255, 255, 255, .1) var(--p, 0%)); }
.lx-drawer__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 20px; }
.lx-group h3 { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 8px 6px; background: var(--lx-ink-2); font: 800 .6875rem/1.3 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-on-ink-3); }
.lx-group ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lx-item a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 8px; border-radius: 10px; color: var(--lx-on-ink); text-decoration: none; }
.lx-item a:hover { background: rgba(255, 255, 255, .06); }
.lx-item.is-current a { background: rgba(214, 253, 145, .1); box-shadow: inset 3px 0 0 var(--lx-lime); }
.lx-item__n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(255, 255, 255, .07); font: 800 .75rem/1 var(--lx-font); color: var(--lx-on-ink-2); font-variant-numeric: tabular-nums; }
.lx-item.is-done .lx-item__n { background: var(--lx-lime); color: var(--lx-ink); }
.lx-item__main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lx-item__t { font-size: .875rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lx-item__meta { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.lx-item__meta code { font: 600 .6875rem/1.3 var(--lx-mono); color: var(--lx-on-ink-2); background: rgba(255, 255, 255, .06); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.lx-item__lvl { flex: none; font-size: .6875rem; font-weight: 700; color: var(--lx-on-ink-3); margin-right: 2px; }
.lx-item .lx-dots i { width: 5px; height: 5px; background: rgba(255, 255, 255, .2); }
.lx-item .lx-dots i.on { background: var(--lx-cyan); }
.lx-item__st { flex: none; display: grid; place-items: center; width: 22px; }
.lx-item__lock, .lx-item__done { display: none; }
.lx-item__st .lx-i { width: 16px; height: 16px; }
.lx-item.is-locked .lx-item__lock { display: inline-flex; color: var(--lx-on-ink-3); }
.lx-item.is-done .lx-item__lock { display: none; }
.lx-item.is-done .lx-item__done { display: inline-flex; color: var(--lx-lime); }
.lx-drawer__empty { padding: 16px 8px; color: var(--lx-on-ink-2); font-size: .875rem; }

/* 12 ── Ponsel & tablet (≤ 900px): tumpuk, pengalih "Soal | Kerjakan" ── */
@media (max-width: 900px) {
  .lx-shell, .lx-shell[data-collapsed="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "switch" "main"; }
  .lx-mswitch { grid-area: switch; display: flex; gap: 4px; padding: 6px 8px; background: var(--lx-ink); border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .lx-mswitch button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 9px;
    background: transparent; color: var(--lx-on-ink-2); font: 700 .9375rem/1 var(--font, inherit); cursor: pointer;
  }
  .lx-mswitch button .lx-i { width: 17px; height: 17px; }
  .lx-mswitch button[aria-selected="true"] { background: var(--lx-lime); color: var(--lx-ink); }
  .lx-panel, .lx-ws, .lx-shell[data-collapsed="1"] .lx-panel { grid-area: main; display: flex; }
  .lx-panel { border-right: 0; }
  .lx-split, .lx-rail, .lx-shell[data-collapsed="1"] .lx-rail { display: none; }
  .lx-shell[data-view="soal"] .lx-ws, .lx-shell:not([data-view="kerja"]) .lx-ws { display: none; }
  .lx-shell[data-view="kerja"] .lx-panel { display: none; }
  .lx-shell[data-view="kerja"] .lx-ws { display: flex; }
  .lx-ws { padding: 8px; gap: 8px; }
  .lx-only-sm { display: inline-flex !important; }
  .lx-only-lg { display: none !important; }
  .lx-btn--block.lx-only-sm { display: flex !important; margin-top: 18px; }
  .lx-pscroll { padding: 14px 16px 24px; }
  .lx-tabs { top: -14px; margin: 0 -16px 14px; padding: 0 8px; }
  .lx-res { max-height: 55%; }
  /* Sedang mengetik di sel (keyboard HP terbuka): panel hasil disembunyikan supaya lembar tetap kelihatan. */
  .lx-ws:has(.lxg.is-editing) .lx-res { display: none; }
  .lx-drawer__panel { width: min(420px, 100%); }
}
@media (max-width: 520px) {
  .lx-phead__all span { display: none; }
  .lx-phead__all { padding: 0 8px; }
  .lx-kv .lx-label { min-width: 0; width: 100%; }
  .lx-res__head { flex-wrap: wrap; }
  .lx-res__acts { width: 100%; }
  .lx-res__acts .lx-btn { flex: 1; }
  .lx-res__h { font-size: .6875rem; }
  .lx-win { grid-template-columns: auto minmax(0, 1fr); }
  .lx-win__acts { grid-column: 1 / -1; }
  .lx-win__acts .lx-btn { width: 100%; }
  .lx-tab { padding-inline: 8px; font-size: .8125rem; }
  .lx-tab .lx-i { display: none; }
}

/* 13 ── Hub /latihan/ ─────────────────────────────────────────────────── */
.lx-hub { display: block; background: var(--lx-paper); color: var(--lx-text); outline: none; }
.lx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 800 .75rem/1.3 var(--lx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-lime); }
.lx-eyebrow .lx-i { width: 16px; height: 16px; }
.lx-eyebrow--ink { color: var(--lx-lime); }
.lx-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(44px, 6vw, 88px); background: var(--lx-ink); color: var(--lx-on-ink); }
.lx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 80% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 80% 30%, #000 20%, transparent 75%);
}
.lx-hero::after { content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(2, 160, 193, .35), transparent 62%); filter: blur(40px); pointer-events: none; }
/* minmax(0, 1fr): baris rumus mockup (nowrap) tidak boleh melebarkan kolom → layar 320px tidak bergeser ke samping */
.lx-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 960px) { .lx-hero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.lx-hero__txt { display: grid; gap: 16px; justify-items: start; }
.lx-hero__h { font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #fff; }
.lx-hero__lead { max-width: 58ch; color: var(--lx-on-ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; }
.lx-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 6px; color: var(--lx-on-ink-2); font-size: .9375rem; }
.lx-hero__stats b { font: 800 1.625rem/1 var(--lx-font); color: var(--lx-lime); margin-right: 4px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lx-hero__art { position: relative; display: grid; place-items: center; }
.lx-mini { position: relative; width: min(100%, 440px); border-radius: 16px; background: #fff; color: var(--lx-text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-1.5deg); }
.lx-mini__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #E3E8EE; font-size: .8125rem; }
.lx-mini__bar span { padding: 2px 8px; border: 1px solid #E3E8EE; border-radius: 6px; font: 700 .75rem var(--lx-mono); }
.lx-mini__bar b { font: italic 700 .75rem var(--lx-mono); color: var(--lx-text-3); }
.lx-mini__bar code { font: 700 .8125rem var(--lx-mono); color: #10325C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lx-mini__grid { display: grid; grid-template-columns: 32px 1fr 1.1fr 1.25fr; font-size: .8125rem; border-radius: 0 0 16px 16px; overflow: hidden; }
.lx-mini__grid i { padding: 6px 8px; border-right: 1px solid #EEF1F4; border-bottom: 1px solid #EEF1F4; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-mini__grid i.h { background: #F3F5F8; color: #5A6676; text-align: center; font-weight: 600; font-size: .75rem; }
.lx-mini__grid i.n { text-align: right; font-variant-numeric: tabular-nums; }
.lx-mini__grid i.t { background: rgba(214, 253, 145, .7); box-shadow: inset 0 0 0 2px var(--lx-ink); font-weight: 800; }
.lx-mini__ok { position: absolute; right: -12px; bottom: -34px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: var(--lx-lime); color: var(--lx-ink); font-weight: 800; font-size: .9375rem; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55); transform: rotate(2deg); }
.lx-mini__ok .lx-i { stroke-width: 3; }

.lx-sec-h { margin-bottom: 22px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.lx-courses { padding: clamp(40px, 6vw, 76px) 0; }
.lx-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 1100px) { .lx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 18px; background: #fff;
  border: 1px solid var(--lx-line); border-top: 6px solid var(--tc); transition: transform .25s var(--lx-ease), box-shadow .25s var(--lx-ease), border-color .25s;
}
.lx-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(14, 22, 32, .4); }
.lx-card:has(.lx-card__link:focus-visible) { outline: 3px solid var(--lx-cyan-ink); outline-offset: 3px; }
.lx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lx-card__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tc); color: var(--lx-ink); }
.lx-card__ic .lx-i { width: 24px; height: 24px; }
.lx-card__count { font: 700 .75rem/1.3 var(--lx-font); color: var(--lx-text-3); text-align: right; }
.lx-card__t { font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.2; }
.lx-card__link { color: inherit; text-decoration: none; }
.lx-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lx-card__tag { color: var(--lx-text-2); font-size: .9375rem; line-height: 1.5; }
.lx-card__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.lx-card__cats li { padding: 3px 8px; border-radius: 6px; background: var(--lx-paper-2); color: var(--lx-text-2); font-size: .75rem; font-weight: 600; }
.lx-card__cats li.more { background: transparent; border: 1px dashed var(--lx-line-2); }
.lx-card__prog { display: grid; gap: 6px; margin-top: auto; padding-top: 6px; }
.lx-pbar { display: block; height: 6px; border-radius: 6px; background: var(--lx-paper-2); overflow: hidden; }
.lx-pbar > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--lx-ink); transition: width .6s var(--lx-ease); }
.lx-card__progtxt { font: 700 .75rem/1.3 var(--lx-font); color: var(--lx-text-3); }
.lx-card__prog.is-started .lx-card__progtxt { color: var(--lx-text); }
.lx-card__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--lx-ink); }
.lx-card__cta .lx-i { transition: transform .2s var(--lx-ease); }
.lx-card:hover .lx-card__cta .lx-i { transform: translateX(4px); }

.lx-how { padding: clamp(36px, 5vw, 64px) 0; background: #fff; border-block: 1px solid var(--lx-line); }
.lx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: none; }
.lx-steps li { position: relative; display: grid; gap: 8px; padding: 20px; border-radius: 16px; background: var(--lx-paper); border: 1px solid var(--lx-line); }
.lx-steps__n { position: absolute; top: 14px; right: 18px; font: 800 2.25rem/1 var(--lx-font); color: var(--lx-paper-3); letter-spacing: -.04em; }
.lx-steps__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lx-ink); color: var(--lx-lime); }
.lx-steps h3 { font-size: 1.0625rem; letter-spacing: -.02em; }
.lx-steps p { color: var(--lx-text-2); font-size: .9375rem; line-height: 1.55; }

.lx-upsell { padding: clamp(36px, 5vw, 72px) 0; }
.lx-upsell__card { position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--lx-ink); color: var(--lx-on-ink); }
.lx-upsell__card::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 253, 145, .22), transparent 65%); pointer-events: none; }
@media (min-width: 900px) { .lx-upsell__card { grid-template-columns: minmax(0, 1fr) auto; } }
.lx-upsell__txt { display: grid; gap: 14px; }
.lx-upsell__txt h2 { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); letter-spacing: -.03em; color: #fff; line-height: 1.15; }
.lx-upsell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--lx-on-ink-2); font-size: .9375rem; line-height: 1.5; }
.lx-upsell__list li { display: flex; gap: 10px; align-items: flex-start; }
.lx-upsell__list .lx-i { margin-top: 2px; color: var(--lx-lime); stroke-width: 2.6; }
.lx-upsell__list b { color: #fff; }
.lx-upsell__acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

/* 404 di bawah /latihan/ (di atas isi hub) */
.lx-missing { padding: clamp(28px, 4vw, 48px) 0 clamp(22px, 3vw, 36px); background: var(--lx-paper); color: var(--lx-text); border-bottom: 1px solid var(--lx-line); }
.lx-missing__code { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 7px; background: var(--lx-ink); color: var(--lx-lime); font: 800 .75rem/1.4 var(--lx-font); letter-spacing: .08em; }
.lx-missing h1 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1.15; }
.lx-missing h1 + p { margin-top: 8px; max-width: 60ch; color: var(--lx-text-2); font-size: 1rem; line-height: 1.6; }

/* 14 ── Gerak & cetak ─────────────────────────────────────────────────── */
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lx-pop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes lx-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(var(--s)); } 100% { opacity: 0; transform: translateY(180px) rotate(calc(var(--r) + 320deg)) scale(var(--s)); } }
@keyframes lx-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes lx-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lx-shell *, .lx-hub * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .lx-confetti { display: none; }
  .lx-card:hover, .lx-btn:active { transform: none; }
  .lx-typing i { opacity: .6; }
}
@media print {
  body:has(.lx-shell) { height: auto; overflow: visible; }
  .lx-shell { display: block; }
  .lx-mswitch, .lx-split, .lx-rail, .lx-drawer, .lx-res__acts, .lx-phead__nav, .lx-phead button, .lx-tabs, .lx-guest { display: none !important; }
  .lx-panel { border: 0; }
  .lx-pscroll { overflow: visible; }
}
/* App bar di HP saat sudah login: "Member" saja supaya pilihan kursus tetap terlihat. */
@media (max-width: 479.98px) { .lx-bar .hdr-ma-l { display: none; } .lx-bar .hdr-ma-s { display: inline; } }
/* Hub /latihan/ (header situs): link "Academy" sama dengan logo, disembunyikan di 960–1199px supaya tidak meluap */
@media (min-width: 960px) and (max-width: 1199.98px) { .lx-pub .site-nav a[data-nav-opt] { display: none; } }