/* Juragan: landing (body.lp, --jg-* tokens from rangka.pen), sign-in (.si), studio (body.st) and staff console (body.ks) and owner console (body.kn). App colours come from the vendored tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--app); color: var(--ink); font: 14px/20px var(--font-sans); -webkit-text-size-adjust: 100%; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rk-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a.rk-btn { text-decoration: none; }
a.rk-btn-primary, a.rk-btn-primary:visited { color: var(--primary-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 8px 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.skip:focus { top: 8px; }

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 700 18px/24px var(--font-display); letter-spacing: -.01em; }
.brand img { display: block; }
.brand .brand-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand .brand-light { display: none; }
  .brand .brand-dark { display: block; }
}

/* ================================================================ Juragan tokens (rangka.pen jg-* set) */
/* The marketing landing left the Cloud (it stays in git history, commit 7110491); the tokens stay for every page. */

:root {
  --jg-bg: #FAF7F2; --jg-panel: #FFFFFF; --jg-panel-2: #F3EEE7; --jg-line: #E4DCD2; --jg-ink: #1C1714; --jg-ink-2: #3D3530;
  --jg-muted: #6E645D; --jg-muted-3: #736860; --jg-faint: #9A8F87; --jg-brand: #C9502E; --jg-raka: #0D9488; --jg-ok: #1F8F5F;
  --jg-warn: #B7791F; --jg-loss: #B5442A; --jg-sunken: #F4EFE8; --jg-sunken-2: #EFE9E1; --jg-sunken-3: #F6F1EA;
  --jg-glass: #FFFFFFCC; --jg-glass-strong: #FFFFFFF0; --jg-section: #FFFFFF; --jg-warn-surface: #FBF3DD; --jg-hero-base: #EDE5DA;
  --jg-raka-tint: #0D94880F; --jg-raka-tint-2: #0D948814; --jg-raka-line: #0D948840; --jg-brand-tint: #C9502E14;
  --jg-brand-tint-2: #C9502E0D; --jg-warn-tint: #B7791F12; --jg-warn-line: #B7791F66; --jg-warn-line-2: #B7791F80; --jg-ok-tint: #1F8F5F14;
  --jg-grad-1: #F6F1EA; --jg-grad-2: #F6E6DC; --jg-grad-3: #F2CDB9; --jg-scrim-1: #FAF7F2B3; --jg-scrim-2: #FAF7F2CC; --jg-scrim-3: #FAF7F2F2;
  --jg-on-brand: #FFFFFF; --jg-border: #E4DCD2; --jg-border-warm: #E8D5CB; --jg-border-strong: #D9CFC3;
  --jg-raka-text: #0D7F72; --jg-ok-text: #1F7A52; --jg-warn-text: #9A6512;
  --jg-veil-1: #1C171408; --jg-veil-2: #1C17140A; --jg-veil-3: #1C17140D; --jg-veil-4: #1C171414; --jg-veil-5: #1C17141F; --jg-veil-6: #1C171426;
  --jg-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --jg-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ================================================================ app shell tokens (rangka.pen "lt-*" set) */

:root {
  --lt-app: #FFFFFF; --lt-soft: #F7F5F3; --lt-ink: #1C1917; --lt-ink-2: #44403C; --lt-muted: #6B625C; --lt-faint: #A39890;
  --lt-faint-text: #8A7F77; /* lt-faint darkened to 4.5:1 on white, for text that must be read */
  --lt-line: #EEEAE7; --lt-line-strong: #DEDAD6; --lt-brand: #B4432A; --lt-raka: #0D9488; --lt-ok: #216E4E; --lt-warn: #A54800;
  --lt-shell: #F4F2EF; --lt-hover: #E9E5E1; --lt-bad: #C9372C;
  --lt-warn-bg: #FFF4DD; --lt-warn-box: #FFF8EB; --lt-warn-line: #F3E1BC; --lt-raka-bg: #E6F7F4; --lt-raka-ink: #0F766E;
  --lt-ok-bg: #E7F3EC; --lt-bad-bg: #FDECEA; --lt-info-bg: #EEF1F6; --lt-info-ink: #3B4A63; --lt-viewport: #FAFAF9;
  --lt-on-ink: #FFFFFF; --lt-row-line: #F4F1EE; --lt-content: #FCFBFA; --lt-avatar: #D6CFCA; --lt-ok-pill: #EAF6EF; --lt-bad-ink: #B91C1C;
  --lt-bad-line: #F3C9C2; --lt-ok-bar: #1F845A; --lt-track: #ECE7E3; --lt-warn-row: #FFFCF6; --lt-pop-shadow: 0 16px 40px #1C191726, 0 2px 6px #1C19170F; --lt-scrim: #1C19170F;
  /* peta alur markers: custom = deep Bata on Kapur, Cloud service = amber (chart-4) */
  --lt-custom-ink: #A33B23; --lt-custom-bg: #F6EDE6; --lt-svc-ink: #7A5C00; --lt-svc-line: #B38600; --lt-svc-bg: #FFF8EB;
}

/* ================================================================ sign-in forms (.si-*: staf.js, and fields in pengaturan.js and the studio; /masuk uses .au-* below) */

.st-boot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 100vh; margin: 0; color: var(--muted); }
body.st { background: var(--lt-shell); color: var(--lt-ink); font: 13.5px/20px var(--jg-sans); color-scheme: light; }
body.st :focus-visible { outline: 2px solid var(--lt-brand); outline-offset: 2px; }
.si { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--lt-shell); }
.si-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 12px; }
.st .brand, .si .brand { font: 600 15px/20px var(--jg-sans); color: var(--lt-ink); letter-spacing: 0; }
.si-head { display: flex; flex-direction: column; gap: 4px; }
.si-card h1 { margin: 0; font: 700 26px/32px var(--font-display); letter-spacing: -.01em; }
.st .si-card h1 { font: 500 26px/32px var(--jg-serif); letter-spacing: -.3px; color: var(--lt-ink); }
.si-sub { margin: 0; color: var(--lt-muted); }
.si-form { display: flex; flex-direction: column; gap: 14px; }
.si-form .rk-field input { width: 100%; }
.si-form .rk-btn-lg { width: 100%; }
.si-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.si-field label { font: 500 12.5px/16px var(--jg-sans); color: var(--lt-ink-2); }
.si-field input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app);
  color: var(--lt-ink); font: 13.5px/20px var(--jg-sans); }
.si-field input:focus { outline: none; border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-3); }
.si-hint { font-size: 12px; line-height: 16px; color: var(--lt-muted); }
.si-tabs { align-self: stretch; }
.si-tabs button { flex: 1; justify-content: center; }
.si-note { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--lt-faint-text); }
.si-error:empty, .st-error:empty { display: none; }
.si-error, .st-error { padding: 8px 12px; border-radius: 8px; background: var(--bad-tint, var(--lt-bad-bg)); color: var(--bad, var(--lt-bad)); border: 1px solid var(--bad-line, #F2C4BF); font-size: 12.5px; line-height: 18px; }
@media (max-width: 480px) { .si-card { padding: 22px 16px; } }

/* ================================================================ sign-in / sign-up (/masuk), rangka.pen "Grup · Auth" (k8yhNK) */

.au { min-height: 100vh; display: flex; padding: 8px; background: var(--lt-app); color: var(--lt-ink); font-family: var(--jg-sans); }
.au-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 24px 40px; }
.au-top { display: flex; align-items: center; }
.au-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--lt-ink); text-decoration: none; font: 600 15px/20px var(--jg-sans); border-radius: 6px; }
.au-mark { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--lt-ink); color: var(--lt-on-ink); }
.au-center { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.au-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.au-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.au-head h1 { margin: 0; font: 600 24px/29px var(--jg-sans); letter-spacing: -.4px; color: var(--lt-ink); }
.au-head p { margin: 0; font: 400 13.5px/20px var(--jg-sans); color: var(--lt-muted); }
.au-head .au-guest { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--lt-raka-bg); color: var(--lt-raka-ink); font-size: 12.5px; line-height: 18px; }
.au-guest .st-ic { margin-top: 2px; }
.au-google { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app);
  font: 500 13.5px/1 var(--jg-sans); color: var(--lt-ink); }
.au-g { width: 16px; height: 16px; border-radius: 999px; background: conic-gradient(from 0deg, #EA4335 0%, #FBBC05 33%, #34A853 60%, #4285F4 85%); }
.au-or { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--jg-sans); color: var(--lt-faint-text); }
.au-or span { flex: 1 1 0; height: 1px; background: var(--lt-line); }
.au-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-lr { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.au-lr label { font: 500 12.5px/16px var(--jg-sans); color: var(--lt-ink); }
.au-forgot { padding: 0; border: 0; background: none; font: 500 12.5px/16px var(--jg-sans); color: var(--lt-ink-2); }
.au-input { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app); color: var(--lt-faint); }
.au-input:focus-within { border-color: var(--lt-ink); box-shadow: inset 0 0 0 .5px var(--lt-ink); }
.au-input input { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 13px/1 var(--jg-sans); color: var(--lt-ink); }
.au-input input::placeholder { color: var(--lt-faint-text); }
.au-eye { width: 24px; height: 24px; margin-right: -5px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--lt-faint-text); cursor: pointer; }
.au-eye:hover { color: var(--lt-ink); background: var(--lt-soft); }
.au-hint { font: 400 11.5px/14px var(--jg-sans); color: var(--lt-muted); }
.au-strength { display: flex; align-items: center; gap: 4px; }
.au-bar { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--lt-track); }
.au-bar.weak { background: var(--lt-bad); } .au-bar.fair { background: var(--lt-warn); } .au-bar.good { background: var(--lt-ok-bar); }
.au-strength-t { margin-left: 4px; font: 400 11.5px/14px var(--jg-sans); color: var(--lt-muted); white-space: nowrap; }
.au-strength[data-score="1"] .au-strength-t { color: var(--lt-bad); }
.au-strength[data-score="2"] .au-strength-t { color: var(--lt-warn); }
.au-strength[data-score="3"] .au-strength-t, .au-strength[data-score="4"] .au-strength-t { color: var(--lt-ok); }
.au-check { display: flex; align-items: flex-start; gap: 8px; font: 400 12.5px/16px var(--jg-sans); color: var(--lt-muted); cursor: pointer; }
.au-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--lt-ink); cursor: inherit; }
.au-check.off { cursor: not-allowed; }
.au-check.off span { color: var(--lt-ink-2); }
.au-primary { height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--lt-ink); color: var(--lt-on-ink);
  font: 500 13.5px/1 var(--jg-sans); cursor: pointer; }
.au-primary:hover:not(:disabled) { background: #3A3330; }
.au-primary.loading { opacity: .7; cursor: progress; }
.au-alt { margin: 0; padding-top: 4px; text-align: center; font: 400 13px/18px var(--jg-sans); color: var(--lt-muted); }
.au-switch { padding: 0; border: 0; border-radius: 4px; background: none; font: 600 13px/18px var(--jg-sans); color: var(--lt-ink); cursor: pointer; }
.au-switch:hover { text-decoration: underline; }
.au-other { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.au-link { padding: 0; border: 0; background: none; font: 500 12.5px/16px var(--jg-sans); color: var(--lt-ink); }
.au-google:disabled, .au-forgot:disabled, .au-link:disabled, .au-check.off { opacity: .55; cursor: not-allowed; }
.au-code { position: relative; }
.au-code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.au-digits { display: flex; gap: 8px; pointer-events: none; }
.au-digit { flex: 1 1 0; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lt-line-strong); border-radius: 9px;
  font: 600 20px/1 var(--jg-mono); color: var(--lt-ink); }
.au-digit.cur { border-color: var(--lt-ink); box-shadow: inset 0 0 0 .5px var(--lt-ink); }
.au-caret { width: 1.5px; height: 20px; background: var(--lt-ink); animation: au-blink 1s steps(1) infinite; }
@keyframes au-blink { 50% { opacity: 0; } }
.au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.au-error:empty { display: none; }
.au-bottom { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font: 400 12px/16px var(--jg-sans); color: var(--lt-faint-text); }
/* the box around an input shows its focus (ink border, as in the pen); buttons and links keep the studio's focus ring */
body.st .au-input input:focus-visible, body.st .au-code input:focus-visible { outline: 0; }

.au-story { flex: none; width: 620px; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 56px; border-radius: 16px; background: var(--lt-shell); overflow: hidden; }
.au-story p { margin: 0; }
.au-story-h { font: 600 40px/43px var(--jg-sans); letter-spacing: -1.2px; color: var(--lt-ink); }
.au-story-s { max-width: 420px; font: 400 15px/23px var(--jg-sans); color: var(--lt-muted); }
.au-sample { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--lt-line-strong); border-radius: 14px; background: var(--lt-app);
  box-shadow: 0 12px 30px #1C191712; }
.au-you { display: flex; justify-content: flex-end; }
.au-you p { padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--lt-shell); font: 400 13px/16px var(--jg-sans); color: var(--lt-ink); }
.au-raka { display: flex; gap: 10px; align-items: flex-start; }
.au-raka img { flex: none; border-radius: 6px; box-shadow: 0 0 0 1px #0F766E33; }
.au-raka p { flex: 1 1 0; font: 400 13px/20px var(--jg-sans); color: var(--lt-ink-2); }
.au-change { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--lt-line-strong); border-radius: 9px; }
.au-change-ib { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--lt-warn-box); color: var(--lt-warn); }
.au-change-t { flex: 1 1 0; font: 600 12.5px/16px var(--jg-sans); color: var(--lt-ink); }
.au-change-b { height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; background: var(--lt-ink); color: var(--lt-on-ink); font: 500 12px/1 var(--jg-sans); }

@media (max-width: 1100px) { .au-story { width: 46%; padding: 0 40px; } .au-story-h { font-size: 34px; line-height: 38px; } }
@media (max-width: 860px) { .au { padding: 0; } .au-story { display: none; } }
@media (max-width: 480px) {
  .au-side { padding: 20px 16px; }
  .au-center { align-items: flex-start; padding: 32px 0; }
  .au-head h1 { font-size: 22px; line-height: 27px; }
  .au-digits { gap: 6px; }
  .au-digit { height: 46px; }
}

/* ================================================================ studio: shared controls */

.st-ic { display: block; flex: none; fill: currentColor; }
.st-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-spacer { flex: 1; min-width: 0; }
.st-muted { color: var(--lt-muted); }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--lt-line-strong);
  border-radius: 7px; background: var(--lt-app); color: var(--lt-ink-2); font: 500 12.5px/1 var(--jg-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.st-btn:hover:not(:disabled) { background: var(--lt-shell); }
.st-btn-primary { background: var(--lt-ink); border-color: var(--lt-ink); color: var(--lt-on-ink); }
.st-btn-primary:hover:not(:disabled) { background: #3A3330; }
a.st-btn, a.st-btn:visited { color: var(--lt-ink-2); }
a.st-btn-primary, a.st-btn-primary:visited { color: var(--lt-on-ink); }
.st-btn:disabled { opacity: .45; cursor: not-allowed; }
.st-btn.loading { opacity: .7; cursor: progress; }
.st-btn-lg { height: 38px; font-size: 14px; width: 100%; }
.st-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--lt-muted); cursor: pointer; text-decoration: none; }
.st-ib:hover:not(:disabled) { background: var(--lt-shell); color: var(--lt-ink); }
.st-ib:disabled { opacity: .4; cursor: not-allowed; }
.st-seg { display: inline-flex; flex: none; gap: 1px; padding: 2px; border-radius: 8px; background: var(--lt-shell); }
.st-seg button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--lt-muted); font: 500 12px/1 var(--jg-sans); cursor: pointer; white-space: nowrap; }
.st-seg button:hover:not(:disabled) { color: var(--lt-ink); }
.st-seg button.on, .st-seg button[aria-selected=true], .st-seg button[aria-pressed=true] { background: var(--lt-app); color: var(--lt-ink); box-shadow: 0 1px 2px var(--jg-veil-4); }
.st-seg button:disabled { opacity: .45; cursor: not-allowed; }
.st-pill { display: inline-flex; align-items: center; flex: none; padding: 2px 7px; border-radius: 999px; font: 600 11px/14px var(--jg-sans); white-space: nowrap;
  background: var(--lt-shell); color: var(--lt-ink-2); }
.st-pill-warn { background: var(--lt-warn-bg); color: var(--lt-warn); }
.st-pill-ok { background: var(--lt-ok-bg); color: var(--lt-ok); }
.st-pill-bad { background: var(--lt-bad-bg); color: #AE2A20; }
.st-pill-info { background: var(--lt-info-bg); color: var(--lt-info-ink); }
.st-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--lt-brand);
  color: #FFFFFF; font: 700 11px/1 var(--jg-sans); }
.st-linkbtn { padding: 0; border: 0; background: none; color: var(--link, #A33B23); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.st-linkbtn:focus-visible { outline: 2px solid var(--focus, #E0623F); outline-offset: 2px; border-radius: 2px; }

/* ================================================================ studio (rangka.pen I5s1gq "Studio · Percakapan") */

body.st { height: 100vh; height: 100dvh; overflow: hidden; }
#root { height: 100%; }
.st-app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.st-panes { display: none; }
.st-body { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 6px; }
.st-chat, .st-preview { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 12px; overflow: hidden; }
.st-chat { flex: 0 0 392px; }
.st-preview { flex: 1; }

/* project drawer */
.st-rail { position: fixed; z-index: 40; top: 6px; left: 6px; bottom: 6px; width: min(300px, calc(100vw - 12px)); display: flex; flex-direction: column; gap: 8px;
  padding: 8px 10px 12px; overflow-y: auto; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 12px; box-shadow: 0 12px 32px var(--jg-veil-5); }
.st-rail[hidden] { display: none; }
.st-scrim { position: fixed; inset: 0; z-index: 39; background: var(--jg-veil-4); }
.st-rail-head { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 0 0 4px; }
.st-new { width: 100%; height: 32px; }
.st-rail-h { margin: 10px 4px 2px; font: 500 12px/16px var(--jg-sans); color: var(--lt-muted); }
.st-rail-list, .st-tree ul, .st-flow-list, .st-files, .st-errs, .st-chips, .st-steps { list-style: none; margin: 0; padding: 0; }
.st-rail-list { display: flex; flex-direction: column; gap: 2px; }
.st-rail-item { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
  color: var(--lt-ink-2); font: 400 12.5px/1 var(--jg-sans); text-align: left; cursor: pointer; }
.st-rail-item:hover { background: var(--lt-shell); }
.st-rail-item.on { background: #FBEFEA; color: #8A2F1C; font-weight: 600; }
.st-rail-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rail-empty { margin: 4px; }
.st-rail-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 4px 0; border-top: 1px solid var(--lt-line); }
.st-me { flex: 1; min-width: 0; color: var(--lt-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chat head */
.st-chat-head { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; border-bottom: 1px solid var(--lt-line); }
.st-proj { min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent;
  color: var(--lt-ink); font: 600 13px/20px var(--jg-sans); cursor: pointer; }
.st-proj:hover { background: var(--lt-shell); }
.st-proj .st-ic { color: var(--lt-muted); }
.st-proj-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* thread */
.st-log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 18px; }
.st-thread-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; line-height: 16px; color: var(--lt-faint-text); }
.st-thread-t h1 { margin: 0; font: 500 12px/16px var(--jg-sans); color: var(--lt-muted); }
.st-msg { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.st-msg-user { justify-content: flex-end; }
.st-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--lt-raka-bg); box-shadow: inset 0 0 0 1px #0F766E33; }
.st-avatar img { display: block; width: 100%; height: 100%; }
.st-msg-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-msg-raka .st-msg-body { flex: 1; }
.st-msg-head { display: flex; align-items: baseline; gap: 6px; line-height: 18px; }
.st-msg-head b { font: 600 12.5px/18px var(--jg-sans); color: var(--lt-ink); }
.st-msg-head time { font-size: 11.5px; color: var(--lt-faint-text); }
.st-msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 21px; color: var(--lt-ink-2); }
.st-msg-user .st-msg-body { max-width: 80%; }
.st-msg-user .st-msg-text { padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--lt-shell); color: var(--lt-ink); line-height: 20px; }
.st-pending .st-msg-text { color: var(--lt-muted); display: inline-flex; align-items: center; gap: 6px; }

/* suggestions under a Raka message ("Saran") */
.st-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-sug { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 10px; border: 1px solid var(--lt-line-strong); border-radius: 999px;
  background: var(--lt-app); color: var(--lt-ink-2); font: 400 12px/18px var(--jg-sans); text-align: left; cursor: pointer; }
.st-sug:hover:not(:disabled) { background: var(--lt-shell); }
.st-sug-primary { background: var(--lt-ink); border-color: var(--lt-ink); color: var(--lt-on-ink); font-weight: 500; }
.st-sug-primary:hover:not(:disabled) { background: #3A3330; }
.st-sug:disabled { opacity: .5; cursor: not-allowed; }
.st-sug.st-chosen:disabled, .st-btn.st-chosen:disabled { opacity: 1; box-shadow: inset 0 0 0 1px var(--lt-ink-2); }
.st-fb { margin-top: 4px; }
.st-fb-row { display: flex; align-items: center; gap: 2px; }
.st-fb-btn { color: var(--lt-muted); }
.st-fb-btn[aria-disabled="true"] { opacity: .5; cursor: progress; }
.st-fb-btn[aria-pressed="true"] { color: var(--lt-ink); background: var(--lt-shell); }
.st-fb-btn:focus-visible, .st-fb-input:focus-visible { outline: 2px solid var(--lt-brand); outline-offset: 1px; }
.st-fb-reason { margin-left: 6px; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--lt-muted); }
.st-fb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.st-fb-other { display: flex; flex: 1 1 100%; gap: 6px; }
.st-fb-input { flex: 1; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 999px; background: transparent; color: var(--lt-ink); font: inherit; font-size: 13px; }

/* cards ("Kartu perubahan") */
.st-card { margin-top: 8px; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--lt-line-strong); border-radius: 10px; background: var(--lt-app); overflow: hidden; }
.st-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; }
.st-card-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--lt-line); background: var(--lt-soft); color: var(--lt-ink-2); }
.st-ib-warn { background: var(--lt-warn-box); border-color: var(--lt-warn-line); color: var(--lt-warn); }
.st-ib-raka { background: var(--lt-raka-bg); border-color: #BFE6DF; color: var(--lt-raka-ink); }
.st-ib-ok { background: var(--lt-ok-bg); border-color: #C9E3D3; color: var(--lt-ok); }
.st-ib-bad { background: var(--lt-bad-bg); border-color: #F2C4BF; color: #AE2A20; }
.st-card-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-card h3 { margin: 0; font: 600 12.5px/17px var(--jg-sans); color: var(--lt-ink); overflow-wrap: anywhere; }
.st-card-m { font-size: 11.5px; line-height: 15px; color: var(--lt-muted); overflow-wrap: anywhere; }
.st-card-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.st-card-body p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--lt-ink-2); }
.st-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.st-chip { padding: 2px 8px; border: 1px solid var(--lt-line); border-radius: 999px; font-size: 11.5px; line-height: 16px; color: var(--lt-ink-2); background: var(--lt-soft); }
.st-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; background: var(--lt-soft); border-top: 1px solid var(--lt-line);
  font-size: 11.5px; line-height: 14px; color: var(--lt-muted); }
.st-checks .st-linkbtn { margin-left: auto; font-size: 11.5px; }
.st-checks code { font: 11px/14px var(--jg-mono); }
.st-check { display: inline-flex; align-items: center; gap: 4px; }
.st-check .st-ic { color: var(--lt-ok); }
.st-check-warn .st-ic { color: var(--lt-warn); }
.st-check-bad .st-ic { color: var(--lt-bad); }
.st-check-default .st-ic { color: var(--lt-faint); }
.st-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--lt-line); }
.st-card-acts .st-btn { white-space: normal; height: auto; min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
.st-files { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--lt-line); }
.st-files li { font-size: 12px; }
.st-files code, .st-card code, .st-flow-list code { font: 11.5px/16px var(--jg-mono); overflow-wrap: anywhere; }
.st-files details { margin-top: 2px; }
.st-files summary { cursor: pointer; color: var(--link, #A33B23); font-size: 12px; }
.st-files pre { margin: 4px 0 0; max-height: 220px; overflow: auto; padding: 8px; background: var(--lt-soft); border-radius: 7px; font: 11.5px/16px var(--jg-mono); white-space: pre; }
.st-errs { padding: 0 12px 8px; color: var(--lt-bad); font-size: 12px; }
.st-errs li::before { content: "• "; }
.st-steps { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--lt-line); font-size: 12.5px; line-height: 16px; }
.st-steps li { display: flex; align-items: center; gap: 8px; }
.st-step-l { flex: 1; min-width: 0; color: var(--lt-ink-2); }
.st-step-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--lt-line-strong); color: #FFFFFF; }
.st-steps .st-status { font-size: 11.5px; color: var(--lt-muted); }
.st-steps li[data-step-state=done] .st-step-dot { background: var(--lt-ok); border-color: var(--lt-ok); }
.st-steps li[data-step-state=running] .st-step-dot { border: 2px solid var(--lt-raka); border-right-color: transparent; animation: st-spin 1s linear infinite; }
.st-steps li[data-step-state=failed] .st-step-dot { background: var(--lt-bad); border-color: var(--lt-bad); }
.st-steps li[data-step-state=pending] .st-step-l { color: var(--lt-muted); }
.st-steps li[data-step-state=failed] .st-status { color: var(--lt-bad); }
.st-card-alert { margin: 0 12px 10px; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st-steps li[data-step-state=running] .st-step-dot { animation: none; } }

/* composer */
.st-compose-area { flex: none; display: flex; flex-direction: column; gap: 7px; padding: 4px 12px 10px; }
.st-compose { display: flex; flex-direction: column; gap: 6px; padding: 9px; border: 1px solid var(--lt-line-strong); border-radius: 12px; background: var(--lt-app); }
.st-compose:focus-within { border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-2); }
.st-compose textarea { width: 100%; min-width: 0; resize: none; min-height: 36px; max-height: 160px; padding: 4px; border: 0; background: transparent; color: var(--lt-ink);
  font: 13.5px/20px var(--jg-sans); }
.st-compose textarea:focus { outline: none; }
.st-compose textarea::placeholder { color: var(--lt-faint-text); }
.st-compose-row { display: flex; align-items: center; gap: 6px; }
.st-send { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: var(--lt-ink); color: var(--lt-on-ink); cursor: pointer; }
.st-send:disabled { background: var(--lt-line-strong); color: var(--lt-app); cursor: not-allowed; }
.st-footnote { margin: 0 0 0 2px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 14px; color: var(--lt-faint-text); }

/* preview: browser bar */
.st-preview-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 7px 8px; border-bottom: 1px solid var(--lt-line); }
.st-preview-bar > .st-seg, .st-preview-bar > .st-btn { margin-left: 4px; }
.st-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--lt-shell); color: var(--lt-muted); font-size: 12.5px; }
.st-url-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-url-path { flex: 1; min-width: 0; color: var(--lt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: -4px; }
.st-url-badge { flex: none; margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--lt-raka-bg); color: var(--lt-raka-ink); font: 600 11px/14px var(--jg-sans); }

.st-host { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; background: var(--lt-soft); border-bottom: 1px solid var(--lt-line); }
.st-host .si-field { flex: 1 1 260px; }
.st-host-acts { display: flex; gap: 6px; }
.st-host-acts .st-btn { height: 36px; }
.st-host .st-error { flex-basis: 100%; }
.st-host-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 12.5px; color: var(--lt-ink-2); }
.st-preview-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--lt-viewport); }
.st-webwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-webwrap[hidden] { display: none; }
.st-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--lt-app); }
.st-empty { margin: auto; padding: 32px 16px; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--lt-muted); }
.st-empty b { color: var(--lt-ink); font-size: 14px; }

.st-flows { padding: 16px; overflow-y: auto; }
.st-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--lt-warn-box); border: 1px solid var(--lt-warn-line); color: #7A3E00; font-size: 12.5px; }
.st-flow-list { display: flex; flex-direction: column; gap: 8px; }
.st-flow-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px; }

.st-rk { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
.st-tree { min-height: 0; overflow-y: auto; padding: 8px; border-right: 1px solid var(--lt-line); background: var(--lt-app); }
.st-file { width: 100%; display: block; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--lt-ink-2); font: 11.5px/16px var(--jg-mono); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.st-file:hover { background: var(--lt-shell); }
.st-file.on { background: #FBEFEA; color: #8A2F1C; }
.st-editor { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.st-editor-field { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.st-editor-field label { font: 11.5px/16px var(--jg-mono); color: var(--lt-ink-2); overflow-wrap: anywhere; }
.st-editor textarea { flex: 1; min-height: 240px; width: 100%; resize: none; padding: 8px 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app);
  color: var(--lt-ink); font: 12.5px/18px var(--jg-mono); tab-size: 2; white-space: pre; }
.st-editor textarea[readonly] { background: var(--lt-soft); color: var(--lt-ink-2); }
.st-editor textarea:focus { outline: none; border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-2); }
.st-editor-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st-editor-empty { margin: auto; }

/* below 768px: chat and preview become two panes switched by the segmented control on the shell */
@media (max-width: 767px) {
  .st-panes { display: flex; margin: 6px 6px 0; }
  .st-panes button { flex: 1; justify-content: center; height: 30px; font-size: 13px; }
  .st-body { flex-direction: column; }
  .st-chat, .st-preview { flex: 1 1 auto; }
  .pane-chat .st-preview { display: none; }
  .pane-preview .st-chat { display: none; }
  .st-preview-bar { flex-wrap: wrap; row-gap: 6px; }
  .st-url { flex-basis: calc(100% - 32px); }
  .st-preview-bar > .st-seg:first-of-type { margin-left: 0; }
  .st-preview-bar > .st-seg, .st-preview-bar > .st-btn { margin-left: 2px; }
  .st-preview-bar > #host { margin-left: auto; }
  .st-preview-bar .st-seg[role=group] .st-ic { display: none; }
  .st-rk { grid-template-columns: 1fr; grid-template-rows: minmax(0, 160px) minmax(0, 1fr); }
  .st-tree { border-right: 0; border-bottom: 1px solid var(--lt-line); }
  .st-editor textarea { min-height: 160px; }
}

/* ================================================================ studio views (rangka.pen aYUKW, XWUZ8, J1P9qx, OfuWi) */
.st-nav { flex: none; width: 188px; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.st-nav-item { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--lt-ink-2);
  font: 500 13px/18px var(--jg-sans); text-align: left; cursor: pointer; }
.st-nav-item:hover { background: var(--lt-hover); }
.st-nav-item.on { background: var(--lt-hover); color: var(--lt-ink); font-weight: 600; }
.st-nav-l { flex: 1; min-width: 0; white-space: nowrap; }
.st-nav-badge { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--lt-warn-bg); color: var(--lt-warn); font: 600 11px/18px var(--jg-sans); text-align: center; }
.st-pair { flex: 1; min-width: 0; min-height: 0; display: flex; gap: 6px; }
.st-pair[hidden] { display: none; }
.st-view { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 12px; overflow: hidden; }
.st-vtop { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--lt-line); flex-wrap: wrap; }
.st-vtop-ic { display: inline-flex; color: var(--lt-ink-2); }
.st-vtop-t { margin: 0; font: 600 14px/20px var(--jg-sans); color: var(--lt-ink); }
.st-vtop-m { font: 400 12px/16px var(--jg-sans); color: var(--lt-muted); }
.st-spacer { flex: 1; }
.st-vbody { flex: 1; min-height: 0; min-width: 0; display: flex; }
.st-vbody-col { flex-direction: column; }
.st-vscroll { flex: 1; overflow-y: auto; padding: 16px; }
.st-verr { margin: 8px 12px 0; }
.st-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--lt-viewport); }
.st-flow-list li { flex-direction: row; align-items: center; gap: 10px; }
.st-flow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-tag, .st-tag-text { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/16px var(--jg-sans); white-space: nowrap; }
.st-tag { padding: 2px 8px; border-radius: 999px; background: var(--lt-shell); color: var(--lt-ink-2); }
.st-tag-ok { color: var(--lt-ok); } .st-tag.st-tag-ok { background: var(--lt-ok-bg); }
.st-tag-warn { color: var(--lt-warn); } .st-tag.st-tag-warn { background: var(--lt-warn-bg); }
.st-tag-bad { color: #AE2A20; } .st-tag.st-tag-bad { background: var(--lt-bad-bg); }
.st-tag-info { color: var(--lt-info-ink); } .st-tag.st-tag-info { background: var(--lt-info-bg); }
.st-tag-default { color: var(--lt-muted); }
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-add { color: var(--lt-ok); font: 500 12px/16px var(--jg-mono); } .st-del { color: #AE2A20; font: 500 12px/16px var(--jg-mono); }

/* code */
.st-code { flex: 1; min-height: 0; overflow: auto; background: var(--lt-soft); border: 1px solid var(--lt-line); border-radius: 8px; font: 12px/20px var(--jg-mono); }
.st-code table { border-collapse: collapse; min-width: 100%; }
.st-code td { padding: 0 8px; vertical-align: top; }
.st-code-n { width: 1%; text-align: right; color: var(--lt-faint-text); user-select: none; }
.st-code-m { width: 1%; font-weight: 600; }
.st-code-l { white-space: pre; color: var(--lt-ink); }
.st-code tr.add { background: #E7F3EC; } .st-code tr.add .st-code-m { color: var(--lt-ok); }
.st-code tr.del { background: var(--lt-bad-bg); } .st-code tr.del .st-code-m { color: #AE2A20; }
.st-code:focus-visible, .st-dt-scroll:focus-visible { outline: 2px solid var(--lt-brand); outline-offset: -2px; }

/* Perubahan */
.st-cs { min-height: 0; }
.st-cs-list { flex: 0 0 330px; list-style: none; margin: 0; padding: 0; overflow-y: auto; border-right: 1px solid var(--lt-line); }
.st-cs-list li { border-bottom: 1px solid var(--lt-line); }
.st-cs-item { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--jg-sans); }
.st-cs-item:hover { background: var(--lt-soft); }
.st-cs-item.on { background: #FBF3E8; box-shadow: inset 2px 0 0 var(--lt-warn); }
.st-cs-top { display: flex; gap: 6px; align-items: baseline; }
.st-cs-no { font: 400 11px/18px var(--jg-mono); color: var(--lt-muted); }
.st-cs-t { font: 500 13px/18px var(--jg-sans); color: var(--lt-ink); }
.st-cs-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font: 400 11.5px/16px var(--jg-sans); color: var(--lt-muted); }
.st-cs-none { padding: 14px; }
.st-csd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-csd-head { flex: none; padding: 14px 20px 12px; border-bottom: 1px solid var(--lt-line); display: flex; flex-direction: column; gap: 6px; }
.st-csd-r1 { display: flex; align-items: center; gap: 8px; }
.st-csd-no { font: 400 12px/16px var(--jg-mono); color: var(--lt-muted); }
.st-csd h2 { margin: 0; font: 600 20px/26px var(--jg-sans); letter-spacing: -.01em; color: var(--lt-ink); overflow-wrap: anywhere; }
.st-csd-meta { margin: 0; display: flex; align-items: center; gap: 6px; font: 400 12.5px/18px var(--jg-sans); color: var(--lt-muted); }
.st-avatar-sm { width: 18px; height: 18px; border-radius: 5px; }
.st-csd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.st-csd-sec h3 { margin: 0 0 8px; font: 600 11px/16px var(--jg-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--lt-muted); }
.st-csd-item { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--lt-line-strong); border-radius: 8px; }
.st-csd-item b { font: 600 13px/18px var(--jg-sans); } .st-csd-item p { margin: 0; font: 400 12.5px/18px var(--jg-sans); color: var(--lt-ink-2); }
.st-csd-sym { flex: none; width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--jg-mono); background: var(--lt-warn-bg); }
.st-csd-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.st-csd-check { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--lt-line-strong); font: 400 12px/16px var(--jg-sans); color: var(--lt-muted); }
.st-csd-check b { display: flex; align-items: center; gap: 5px; font: 600 13px/18px var(--jg-sans); }
.st-csd-check-ok { background: var(--lt-ok-bg); border-color: #C9E3D3; } .st-csd-check-ok b { color: var(--lt-ok); }
.st-csd-check-warn { background: var(--lt-warn-box); border-color: var(--lt-warn-line); } .st-csd-check-warn b { color: var(--lt-warn); }
.st-csd-check-bad { background: var(--lt-bad-bg); border-color: #F2C4BF; } .st-csd-check-bad b { color: #AE2A20; }
.st-csd-errs { margin-top: -8px; }
.st-csd-files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lt-line-strong); border-radius: 8px; overflow: hidden; }
.st-csd-files li + li { border-top: 1px solid var(--lt-line); }
.st-csd-file { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 0; background: var(--lt-app); cursor: pointer; font: 13px/18px var(--jg-sans); color: var(--lt-ink); }
.st-csd-file:hover { background: var(--lt-soft); }
.st-csd-path { flex: 1; min-width: 0; text-align: left; font: 12px/18px var(--jg-mono); overflow-wrap: anywhere; }
.st-csd-files .st-code { max-height: 320px; border-radius: 0; border-width: 1px 0 0; }
.st-csd-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--lt-line); }
.st-csd-note { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 200px; font: 400 12.5px/18px var(--jg-sans); color: var(--lt-muted); }

/* Data */
.st-dt-models { flex: 0 0 220px; overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--lt-line); }
.st-dt-models ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.st-side-label { margin: 4px 8px 6px; font: 600 11px/16px var(--jg-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--lt-muted); }
.st-dt-model { width: 100%; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font: 500 13px/18px var(--jg-sans); color: var(--lt-ink-2); text-align: left; }
.st-dt-model:hover { background: var(--lt-shell); }
.st-dt-model.on { background: var(--lt-hover); color: var(--lt-ink); font-weight: 600; }
.st-dt-model-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dt-count { font: 400 11.5px/16px var(--jg-mono); color: var(--lt-muted); }
.st-dt-grid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-dt-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--lt-line); }
.st-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; width: min(320px, 100%); border: 1px solid var(--lt-line-strong); border-radius: 7px; color: var(--lt-muted); }
.st-search:focus-within { border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-2); }
.st-search input:focus, .st-search input:focus-visible { outline: 0; box-shadow: none; }
.st-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13px/18px var(--jg-sans); color: var(--lt-ink); }
.st-dt-total { font: 400 12px/16px var(--jg-sans); color: var(--lt-muted); white-space: nowrap; }
.st-dt-scroll { flex: 1; min-height: 0; overflow: auto; }
.st-dt-table { width: 100%; border-collapse: collapse; font: 13px/18px var(--jg-sans); }
.st-dt-table th { position: sticky; top: 0; background: var(--lt-soft); padding: 8px 12px; text-align: left; font: 600 11.5px/16px var(--jg-sans); color: var(--lt-muted); border-bottom: 1px solid var(--lt-line-strong); white-space: nowrap; }
.st-dt-table td { padding: 9px 12px; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dt-table tbody tr:hover { background: var(--lt-soft); }
.st-dt-no { font: 12px/18px var(--jg-mono); color: var(--lt-ink-2); }
.st-dt-num { text-align: right; font-variant-numeric: tabular-nums; }
.st-dt-more { padding: 12px; text-align: center; }

/* File */
.st-ft-tree { flex: 0 0 240px; overflow-y: auto; padding: 8px 6px; border-right: 1px solid var(--lt-line); }
.st-ft-tree ul { list-style: none; margin: 0; padding: 0; }
.st-ft-row { width: 100%; display: flex; align-items: center; gap: 7px; min-height: 28px; padding-right: 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font: 400 13px/18px var(--jg-sans); color: var(--lt-ink-2); text-align: left; }
span.st-ft-row { cursor: default; font-weight: 600; color: var(--lt-ink); padding-left: 8px; }
.st-ft-row:hover { background: var(--lt-shell); }
.st-ft-row.on { background: var(--lt-hover); color: var(--lt-ink); font-weight: 600; }
.st-ft-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ft-m { font: 600 11px/16px var(--jg-mono); color: var(--lt-warn); }
.st-ft-view { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 12px 12px; gap: 8px; }
.st-ft-tab { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.st-ft-path { font: 12.5px/18px var(--jg-mono); color: var(--lt-muted); overflow-wrap: anywhere; } .st-ft-path b { color: var(--lt-ink); font-weight: 600; }
.st-ft-ro { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.st-ft-note { margin: 0; font: 400 12.5px/18px var(--jg-sans); color: var(--lt-ok); }
.st-ft-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.st-ft-edit textarea { flex: 1; min-height: 200px; resize: none; padding: 10px 12px; border: 1px solid var(--lt-line-strong); border-radius: 8px; font: 12px/20px var(--jg-mono); color: var(--lt-ink); background: var(--lt-app); }
.st-ft-edit textarea:focus { outline: none; border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-2); }
.st-ft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

@media (max-width: 767px) {
  .st-nav { flex-direction: row; width: auto; overflow-x: auto; padding: 0 2px; gap: 2px; }
  .st-nav-item { flex: none; height: 30px; padding: 0 9px; }
  .st-pair { flex-direction: column; }
  .st-pair .st-chat, .st-pair .st-preview { flex: 1 1 auto; }
  .st-cs, .st-dt, .st-ft { flex-direction: column; overflow-y: auto; }
  .st-cs-list, .st-dt-models, .st-ft-tree { flex: none; max-height: 190px; border-right: 0; border-bottom: 1px solid var(--lt-line); }
  .st-dt-models ul { flex-direction: row; flex-wrap: wrap; }
  .st-dt-model { width: auto; }
  .st-csd, .st-dt-grid, .st-ft-view { flex: none; }
  .st-csd-scroll { overflow: visible; }
  .st-dt-grid { min-height: 340px; }
  .st-ft-view { min-height: 340px; }
}

/* ================================================================ staff console (body.ks.sf; the owner console moved to body.kn below) */

body.ks { min-height: 100vh; background: var(--soft); }
.ks-app { min-height: 100vh; display: flex; flex-direction: column; }
.ks-top { position: sticky; top: 0; z-index: 20; }
.ks-crumb { color: var(--ink-2); text-decoration: none; font-weight: 500; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.ks-crumb:hover { color: var(--ink); text-decoration: underline; }
.ks-notice { display: none; }
.ks-notice.on { display: block; position: fixed; z-index: 45; left: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-toast); }

.ks-body { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; padding: 24px; }
.ks-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 80px; align-self: start; }
.ks-side-biz { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 10px; }
.ks-side-title { font: 600 16px/22px var(--font-sans); overflow-wrap: anywhere; }
.ks-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-navlink { position: relative; display: block; padding: 8px 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; font-weight: 500; }
.ks-navlink:hover { background: var(--hover); }
.ks-navlink.on { background: var(--selected); color: var(--selected-ink); }
.ks-navlink.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--selected-ink); }
.ks-navselect { display: none; }
.ks-side-all { padding: 0 10px; font-size: 13px; }

.ks-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ks-main:focus { outline: none; }
.ks-main-wide { width: 100%; max-width: 960px; margin: 0 auto; padding: 24px; }
.ks-h1 { margin: 0; font: 700 26px/32px var(--font-display); letter-spacing: -.01em; }
.ks-h1:focus { outline: none; }
.ks-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ks-card { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ks-card h2 { margin: 0; font: 600 16px/22px var(--font-sans); }
.ks-card h3 { margin: 0; font: 600 15px/20px var(--font-sans); overflow-wrap: anywhere; }
.ks-card p { margin: 0; }
.ks-muted { color: var(--muted); }
.ks-lead { font-size: 15px; color: var(--ink-2); }
.ks-big { font: 700 22px/28px var(--font-display); }
.ks-self-start { align-self: flex-start; }
.ks-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0; }
.ks-retry { margin: 0 0 0 8px; }
.ks-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); }
.ks-empty b { color: var(--ink); font-size: 15px; }

.ks-hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ks-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ks-url { overflow-wrap: anywhere; }
.ks-badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.ks-dl dt { color: var(--muted); }
.ks-dl dd { margin: 0; font: 500 14px/20px var(--font-mono); text-align: right; }

.ks-timeline, .ks-log, .ks-domains, .ks-bizlist, .ks-includes { list-style: none; margin: 0; padding: 0; }
.ks-timeline { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.ks-timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.ks-timeline li:first-child { border-top: 0; }
.ks-timeline time { display: flex; flex-direction: column; color: var(--ink-2); font-weight: 500; }
.ks-timeline time span { color: var(--muted); font-weight: 400; font-size: 13px; }
.ks-timeline-text { overflow-wrap: anywhere; }
.ks-timeline li[data-kind=deploy] .ks-timeline-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ink-2); vertical-align: 1px; }
.ks-timeline li[data-kind=change] .ks-timeline-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand); vertical-align: 1px; }

.ks-log { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.ks-log li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.ks-log li:first-child { border-top: 0; }
.ks-log time { color: var(--muted); font: 13px/20px var(--font-mono); }
.ks-log span { overflow-wrap: anywhere; }

.ks-table-wrap { overflow-x: auto; }
.ks-table { width: 100%; border-collapse: collapse; }
.ks-table th { text-align: left; font: 600 12px/16px var(--font-sans); color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line-strong); }
.ks-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.ks-table tr:last-child td { border-bottom: 0; }
.ks-table code { font: 12px/16px var(--font-mono); overflow-wrap: anywhere; }
.ks-acts { white-space: nowrap; text-align: right; }
.ks-acts .rk-btn + .rk-btn { margin-left: 4px; }

.ks-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ks-form .rk-field input, .ks-form .rk-field select, .ks-inline-form .rk-field input { width: 100%; }
.ks-form-full { grid-column: 1 / -1; }
.ks-inline-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.ks-inline-form .rk-field { flex: 1 1 280px; }
.ks-inline-form > .rk-btn { margin-top: 20px; }

.ks-domains { display: flex; flex-direction: column; gap: 12px; }
.ks-domain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ks-domain-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.ks-steps li { display: inline-flex; align-items: center; color: var(--muted); }
.ks-steps li + li::before { content: "→"; margin: 0 8px; color: var(--faint); }
.ks-steps li[data-step=done] { color: var(--ok); }
.ks-steps li[data-step=current] { color: var(--selected-ink); font-weight: 600; }
.ks-steps li[data-step=current]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: currentColor; }
.ks-records { display: flex; flex-direction: column; gap: 8px; }

.ks-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ks-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.ks-stat span { color: var(--muted); }
.ks-stat b { font: 700 24px/30px var(--font-display); }
.ks-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ks-chart svg { width: 100%; height: 140px; display: block; }
.ks-chart rect { fill: var(--chart-1); }
.ks-chart-axis { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ks-chart figcaption { color: var(--muted); font-size: 13px; }

.ks-includes { display: flex; flex-direction: column; gap: 6px; }
.ks-includes li::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; }
.ks-price { padding: 10px 12px; border-radius: var(--r-md); background: var(--soft); font-weight: 600; }

.ks-bizlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ks-bizlink { font: 600 17px/24px var(--font-sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ks-bizlink:hover { text-decoration: underline; }
.ks-bizmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }

.ks-scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); }
.ks-dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border-radius: var(--r-dialog); box-shadow: var(--shadow-overlay); }
.ks-dialog h2 { margin: 0; font: 600 18px/24px var(--font-sans); overflow-wrap: anywhere; }
.ks-dialog p { margin: 0; color: var(--ink-2); }
.ks-dialog-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

@media (max-width: 767px) {
  .ks-top .st-me { display: none; }
  .ks-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .ks-side { position: static; }
  .ks-side-biz { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; }
  .ks-nav { display: none; }
  .ks-navselect { display: flex; }
  .ks-navselect select { width: 100%; }
  .ks-side-all { padding: 0; }
  .ks-main-wide { padding: 16px; }
  .ks-card { padding: 16px; }
  .ks-hero-row > .rk-btn { width: 100%; }
  .ks-form { grid-template-columns: minmax(0, 1fr); }
  .ks-timeline li, .ks-log li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 16px; }
  .ks-timeline time { flex-direction: row; gap: 6px; }
  /* tables become stacked rows */
  .ks-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ks-table, .ks-table tbody, .ks-table tr, .ks-table td { display: block; width: 100%; }
  .ks-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ks-table tr:last-child { border-bottom: 0; }
  .ks-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; }
  .ks-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .ks-table td.ks-acts { display: flex; flex-wrap: wrap; gap: 4px; text-align: left; white-space: normal; }
  .ks-acts .rk-btn + .rk-btn { margin-left: 0; }
}

/* ================================================================ owner console (body.kn) */
/* From rangka.pen, the Konsol frames (Ringkasan DkSmr, Pemakaian d7Mr3c, Riwayat QKwyF, Domain HDNOd, Cadangan f8N6tb,
   Tim Yz3yS, Paket & tagihan s3toEK, Unduh data saya bYdK2): 244px sidebar on lt-shell + a white inset panel. A few
   class names (ks-h1, ks-navlink, ks-nav, ks-status, ks-timeline, ks-log, ks-loading, ks-notice) stay for the e2e. */

body.kn { margin: 0; min-height: 100vh; background: var(--lt-shell); color: var(--lt-ink); font: 13px/18px var(--jg-sans); color-scheme: light; }
.kn :focus-visible { outline: 2px solid var(--lt-brand); outline-offset: 2px; }
.kn a { color: var(--lt-ink); font-weight: 500; text-underline-offset: 2px; }
.kn h1, .kn h2, .kn h3, .kn p, .kn ul, .kn ol, .kn dl, .kn dd, .kn figure { margin: 0; }
.kn ul, .kn ol { padding: 0; list-style: none; }
.kn .skip { background: var(--lt-app); color: var(--lt-ink); }
.kn-ic { display: block; flex: none; fill: currentColor; }
.kn-mono { font-family: var(--jg-mono); }
.kn-muted { color: var(--lt-muted); }
.kn .st-error { margin: 0; }
.kn .st-btn { font-weight: 500; }
.kn .st-btn.loading::after { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kn-spin .8s linear infinite; }
.kn-btn-quiet { border-color: transparent; background: transparent; }
.kn-btn-danger { background: var(--lt-bad); border-color: var(--lt-bad); color: #FFFFFF; }
.kn-btn-danger:hover:not(:disabled) { background: #AE2A20; }
.kn-danger-text { color: #AE2A20; }
.kn-btn-block { width: 100%; height: 30px; }
.kn-spin { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--lt-faint); border-right-color: transparent; border-radius: 50%; animation: kn-spin .8s linear infinite; }
@keyframes kn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kn-spin, .kn .st-btn.loading::after { animation: none; } }
.kn .ks-loading { padding: 4px 0; font-size: 13px; color: var(--lt-muted); }

/* tones: dot colours and text that keeps 4.5:1 */
.kn-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lt-faint); }
.kn-tone-ok { color: var(--lt-ok); } .kn-tone-ok .kn-dot, .kn-dot.kn-tone-ok { background: #1F845A; }
.kn-tone-warn { color: var(--lt-warn); } .kn-tone-warn .kn-dot, .kn-dot.kn-tone-warn { background: #E2B203; }
.kn-tone-bad { color: #AE2A20; } .kn-tone-bad .kn-dot, .kn-dot.kn-tone-bad { background: var(--lt-bad); }
.kn-tone-info { color: var(--lt-info-ink); } .kn-tone-info .kn-dot, .kn-dot.kn-tone-info { background: var(--lt-raka); }
.kn-tone-default { color: var(--lt-ink-2); }
.kn-status { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11.5px; white-space: nowrap; }
.kn-status.kn-tone-ok, .kn-status.kn-tone-info { color: var(--lt-ink-2); }
.kn-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--lt-shell); color: #57534E;
  font: 500 11.5px/15px var(--jg-sans); white-space: nowrap; }
.kn-pill-ok { background: #EAF6EF; color: var(--lt-ok); } .kn-pill-ok .kn-dot { background: #1F845A; }
.kn-pill-warn { background: var(--lt-warn-bg); color: var(--lt-warn); } .kn-pill-warn .kn-dot { background: #E2B203; }
.kn-pill-bad { background: var(--lt-bad-bg); color: #AE2A20; } .kn-pill-bad .kn-dot { background: var(--lt-bad); }
.kn-pill-info { background: var(--lt-raka-bg); color: var(--lt-raka-ink); } .kn-pill-info .kn-dot { background: var(--lt-raka); }
.kn-pill-brand { background: #FBEDE8; color: #9A3A23; }
.kn-pill-default .kn-dot { background: var(--lt-faint); }
.kn-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-badge-ink { padding: 2px 8px; border-radius: 999px; background: var(--lt-ink); color: var(--lt-on-ink); font: 500 11px/15px var(--jg-sans); }
.kn-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--lt-shell); color: var(--lt-muted); }
.kn-ib-lg { width: 28px; height: 28px; border-radius: 8px; }
.kn-tone-bg-ok { background: #EAF6EF; color: var(--lt-ok); }
.kn-tone-bg-raka { background: var(--lt-raka-bg); color: var(--lt-raka-ink); }
.kn-tone-bg-warn { background: var(--lt-warn-bg); color: var(--lt-warn); }
.kn-ib-sm { width: 22px; height: 22px; color: var(--lt-faint-text); }

/* shell */
.kn-app { min-height: 100vh; }
.kn-shell { display: flex; min-height: 100vh; }
.kn-side { position: sticky; top: 0; flex: none; width: 244px; height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 10px 8px 8px 10px; overflow-y: auto; }
.kn-panel { flex: 1; min-width: 0; margin: 6px 6px 6px 0; min-height: calc(100vh - 12px); display: flex; flex-direction: column; background: var(--lt-app);
  border: 1px solid var(--lt-line-strong); border-radius: 12px; overflow: hidden; }
.kn-panel:focus { outline: none; }

.kn-switch { position: relative; }
.kn-switch-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--lt-faint);
  text-align: left; cursor: pointer; font: inherit; }
.kn-switch-btn:hover, .kn-switch-btn[aria-expanded=true] { background: var(--lt-hover); }
.kn-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--lt-brand); color: #FFFFFF; }
.kn-mark-sm { width: 20px; height: 20px; border-radius: 5px; }
.kn-switch-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kn-switch-tx b { color: var(--lt-ink); font: 600 13.5px/17px var(--jg-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-switch-tx > span { display: flex; align-items: center; gap: 5px; color: var(--lt-muted); font-size: 11.5px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max(100%, 260px); padding: 6px; background: var(--lt-app); border: 1px solid var(--lt-line-strong);
  border-radius: 10px; box-shadow: 0 8px 24px var(--jg-veil-5); }
.kn-menu-label { padding: 4px 8px 6px; color: var(--lt-faint-text); font: 600 11px/14px var(--jg-sans); letter-spacing: .5px; text-transform: uppercase; }
.kn-menu li a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; }
.kn-menu li a:hover, .kn-menu-foot:hover { background: var(--lt-shell); }
.kn-menu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kn-menu-tx b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-menu-tx span { color: var(--lt-muted); font-size: 11.5px; font-weight: 400; }
.kn-menu-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 8px; border-top: 1px solid var(--lt-line); border-radius: 0 0 6px 6px;
  text-decoration: none; font-size: 12.5px; }

.kn-mode { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--lt-hover); }
.kn-mode a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; border-radius: 6px; color: var(--lt-muted); text-decoration: none;
  font: 500 12.5px/1 var(--jg-sans); }
.kn-mode a:hover { color: var(--lt-ink); }
.kn-mode a[aria-current] { background: var(--lt-app); color: var(--lt-ink); font-weight: 600; box-shadow: 0 1px 2px #1C19171F; }
.kn-open { width: 100%; height: 30px; }

.kn-nav { display: flex; flex-direction: column; gap: 12px; }
.kn-navgroup ul { display: flex; flex-direction: column; gap: 1px; }
.kn-navlabel { padding: 4px 10px 6px; color: var(--lt-faint-text); font: 600 11px/14px var(--jg-sans); letter-spacing: .5px; text-transform: uppercase; }
.kn .ks-navlink { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--lt-ink); font-weight: 400; text-decoration: none; }
.kn .ks-navlink .kn-ic { color: var(--lt-muted); }
.kn .ks-navlink:hover { background: var(--lt-hover); }
.kn .ks-navlink.on { background: var(--lt-hover); font-weight: 500; }
.kn .ks-navlink.on .kn-ic { color: var(--lt-ink); }
.kn-navselect { display: none; flex-direction: column; gap: 4px; }
.kn-navselect label, .kn-field label { color: var(--lt-ink-2); font: 500 12px/16px var(--jg-sans); }
.kn select, .kn input[type=text], .kn input[type=email], .kn input[type=search] { height: 32px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px;
  background: var(--lt-app); color: var(--lt-ink); font: 13px/18px var(--jg-sans); }
.kn select:focus, .kn input:focus { outline: none; border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-3); }
.kn input::placeholder { color: var(--lt-faint-text); }
.kn-side-gap { flex: 1; }
.kn-update { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px;
  color: var(--lt-muted); font-size: 12px; line-height: 17px; }
.kn-update-h { display: flex; align-items: center; gap: 6px; color: var(--lt-ink); font-weight: 600; font-size: 12.5px; }
.kn-update-h .kn-ic { color: var(--lt-raka); }
.kn-me { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; border-top: 1px solid var(--lt-line-strong); }
.kn-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--lt-avatar);
  color: var(--lt-ink-2); font: 600 10.5px/1 var(--jg-sans); }
.kn-me-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kn-me-tx b { font: 500 12.5px/16px var(--jg-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-me-tx span { color: var(--lt-muted); font-size: 11px; line-height: 14px; }

/* panel: top bar + content */
.kn-topbar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--lt-line); }
.kn-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--lt-muted); }
.kn .ks-h1 { margin: 0; color: var(--lt-ink); font: 500 13px/18px var(--jg-sans); letter-spacing: 0; white-space: nowrap; }
.kn .ks-h1:focus { outline: none; }
.kn-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lt-muted); font-size: 12.5px; }
.kn-meta.kn-mono { font-size: 12px; }
.kn-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kn-seg button { height: 24px; padding: 0 10px; }
.kn-card .kn-seg { border-radius: 7px; }
.kn-card .kn-seg button { height: 22px; padding: 0 8px; font-size: 11.5px; border-radius: 5px; }
.kn-content { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--lt-content); min-width: 0; }
.kn-row { display: flex; gap: 12px; min-width: 0; }
.kn-row-top { align-items: flex-start; }
.kn-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kn-grow { flex: 1; min-width: 0; }
.kn-fill { flex: 1 1 auto; }
.kn-side-card, .kn-side-col { flex: none; width: 380px; }
.kn-side-col { width: 340px; align-self: stretch; }

/* cards */
.kn-card { display: flex; flex-direction: column; min-width: 0; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px; overflow: hidden; }
.kn-card-head { flex: none; display: flex; align-items: center; gap: 7px; min-height: 41px; padding: 6px 14px; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink-2); }
.kn-card-head h2 { flex: 1; min-width: 0; color: var(--lt-ink); font: 600 13px/18px var(--jg-sans); overflow-wrap: anywhere; }
.kn-card-right { display: flex; align-items: center; gap: 6px; color: var(--lt-muted); font-size: 12px; }
.kn-card-right a { font-size: 12px; }
.kn-pad { padding: 12px 14px; }
.kn-pad-x { padding: 0 14px 12px; }
.kn-top-line { border-top: 1px solid var(--lt-line); }
.kn-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--lt-muted); font-size: 12.5px; }
.kn-empty b { color: var(--lt-ink); font: 600 13px/18px var(--jg-sans); }
.kn-empty > span:not(.kn-empty-ic) { max-width: 360px; }
.kn-empty .st-btn { margin-top: 6px; }
.kn-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--lt-shell); color: var(--lt-muted); margin-bottom: 4px; }
.kn-raka { flex: 1 1 auto; min-height: 320px; }
.kn-raka-list { flex: 1 1 auto; min-height: 200px; max-height: calc(100vh - 330px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
.kn-raka-compose { margin: 0 12px 12px; }
@media (max-width: 767px) { .kn-raka-list { max-height: 55vh; padding: 12px; } .kn-raka-compose { margin: 0 8px 8px; } }
.kn-content > .kn-empty { background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px; }
.kn-note { display: flex; align-items: center; gap: 6px; color: var(--lt-muted); font-size: 12px; }
.kn-banner { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: var(--lt-warn-box); color: var(--lt-warn); font-size: 12.5px; }
.kn-error { display: block; }
.kn-list > li + li { border-top: 1px solid var(--lt-row-line); }

/* Ringkasan */
.kn-kpis { display: flex; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px; overflow: hidden; }
.kn-kpi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-right: 1px solid var(--lt-line); }
.kn-kpi:last-child { border-right: 0; }
.kn-kpi-l { color: var(--lt-muted); font-size: 11.5px; line-height: 14px; }
.kn-kpi-v { color: var(--lt-ink); font: 600 20px/24px var(--jg-sans); letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-kpi-v .kn-status { font: 600 20px/24px var(--jg-sans); gap: 8px; }
.kn-kpi-v .kn-dot { width: 8px; height: 8px; }
.kn-kpi-d { color: var(--lt-muted); font-size: 11px; line-height: 14px; }
.kn-kpi-d.kn-tone-ok { color: var(--lt-ok); }
.kn-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: auto; }
.kn-spark span { flex: 1; min-width: 1px; border-radius: 1px; background: #E2DCD7; }
.kn-chart-card { min-height: 0; }
.kn-legend { display: flex; align-items: center; gap: 5px; padding: 10px 14px 0; color: var(--lt-muted); font-size: 11.5px; }
.kn-sw { width: 8px; height: 8px; border-radius: 2px; background: #D6CDC6; }
.kn-bars { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kn-bars-plot { flex: 1; display: flex; align-items: flex-end; gap: 4px; padding: 10px 14px 0; min-height: 120px; }
.kn-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: #D6CDC6; }
.kn-bar.now { background: #A8998F; }
.kn-bars-lg .kn-bars-plot { height: 200px; }
.kn-bars-md .kn-bars-plot { height: 200px; }
.kn-bars-md .kn-bar, .kn-bars-sm .kn-bar { background: #E2DCD7; }
.kn-bars-md .kn-bar.now, .kn-bars-sm .kn-bar.now { background: #A8998F; }
.kn-bars-sm .kn-bars-plot { height: 140px; }
.kn-axis { display: flex; justify-content: space-between; padding: 6px 14px 10px; border-top: 1px solid var(--lt-line); color: var(--lt-faint-text); font-size: 11px; }
.kn-svc { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 14px; color: var(--lt-muted); }
.kn-svc-tx { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.kn-svc-tx b { color: var(--lt-ink); font: 500 12.5px/16px var(--jg-sans); flex: none; }
.kn-svc-tx span { color: var(--lt-faint-text); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-safe { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.kn-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kn-dl dt { color: var(--lt-muted); font-size: 11.5px; }
.kn-dl dd { color: var(--lt-ink); font: 500 13px/18px var(--jg-sans); }
.kn-event { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; }
.kn-event-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.kn-event-tx b { color: var(--lt-ink); font: 500 12.5px/17px var(--jg-sans); }
.kn-event-tx > span { color: var(--lt-muted); font-size: 12px; }
.kn-event time { flex: none; color: var(--lt-faint-text); font-size: 11px; line-height: 17px; }
.kn-event .kn-ib { margin-top: -4px; }
.kn-event-lg { align-items: center; gap: 12px; padding: 10px 16px; }
.kn-event-lg .kn-ib { margin-top: 0; }
.kn-event-lg .kn-event-tx b { font-size: 13px; }
.kn-event-lg time { font-size: 12px; }

/* Riwayat */
.kn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-chip { height: 26px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 999px; background: var(--lt-app); color: var(--lt-ink-2);
  font: 500 12px/1 var(--jg-sans); cursor: pointer; }
.kn-chip:hover { background: var(--lt-shell); }
.kn-chip[aria-pressed=true] { background: var(--lt-ink); border-color: var(--lt-ink); color: var(--lt-on-ink); }
.kn .ks-timeline { border: 1px solid var(--lt-line-strong); border-radius: 10px; }
.kn .ks-timeline li { display: flex; grid-template-columns: none; border-top: 0; }
.kn .ks-timeline li + li { border-top: 1px solid var(--lt-row-line); }
.kn-dayhead { padding: 7px 16px; background: var(--lt-soft); border-bottom: 1px solid var(--lt-line); color: var(--lt-muted); font: 600 11.5px/15px var(--jg-sans); }
.kn-group + .kn-group .kn-dayhead { border-top: 1px solid var(--lt-line); }
.kn .ks-log { background: none; border: 0; border-radius: 0; }
.kn .ks-log li { display: flex; grid-template-columns: none; border-top: 0; padding: 11px 14px; }
.kn .ks-log li + li { border-top: 1px solid var(--lt-row-line); }
.kn .ks-log .kn-event-tx { font-size: 12px; color: var(--lt-ink-2); }

/* tiles (Pemakaian, Cadangan) */
.kn-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kn-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 10px; min-width: 0; }
.kn-tile > b { color: var(--lt-ink); font: 600 18px/24px var(--jg-sans); letter-spacing: -.2px; overflow-wrap: anywhere; }
.kn-tile > b small { margin-left: 8px; color: var(--lt-faint-text); font: 400 11.5px/1 var(--jg-sans); letter-spacing: 0; }
.kn-tile .kn-kpi-d { font-size: 11.5px; }
.kn-facts li { display: flex; gap: 8px; padding: 10px 14px; color: var(--lt-ink-2); font-size: 12.5px; }
.kn-facts .kn-ic { margin-top: 2px; color: var(--lt-muted); }

/* tables */
.kn-table-wrap { overflow-x: auto; }
.kn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kn-table th { height: 29px; padding: 0 14px; background: var(--lt-soft); border-bottom: 1px solid var(--lt-row-line); color: var(--lt-muted); font: 600 11.5px/15px var(--jg-sans); text-align: left; white-space: nowrap; }
.kn-table td { height: 43px; padding: 6px 14px; border-bottom: 1px solid var(--lt-row-line); color: var(--lt-ink-2); vertical-align: middle; overflow-wrap: anywhere; }
.kn-table td.kn-strong { color: var(--lt-ink); font-weight: 500; }
.kn-acts { white-space: nowrap; text-align: right; }
.kn-acts .st-btn + .st-btn { margin-left: 2px; }
.kn-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kn-person-tx { display: flex; flex-direction: column; min-width: 0; }
.kn-person-tx b { color: var(--lt-ink); font: 500 12.5px/16px var(--jg-sans); }
.kn-person-tx span { color: var(--lt-faint-text); font-size: 11.5px; line-height: 15px; }
.kn-file { display: inline-flex; align-items: center; gap: 8px; color: var(--lt-ink); }
.kn-file .kn-ic { color: var(--lt-muted); }
.kn-file .kn-mono { font-size: 12px; }

/* Tim */
.kn-search { display: flex; align-items: center; gap: 6px; height: 28px; width: 180px; padding: 0 8px; border: 1px solid var(--lt-line-strong); border-radius: 7px; color: var(--lt-faint-text); }
.kn-search:focus-within { border-color: var(--lt-ink-2); }
.kn .kn-search input { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; box-shadow: none; font-size: 12.5px; background: transparent; }
.kn-card-form .kn-card-head { border-bottom: 0; padding-top: 12px; min-height: 0; }
.kn-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px; }
.kn-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kn-field input, .kn-field select { width: 100%; }
.kn-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kn-input-ic { position: relative; display: block; }
.kn-input-ic .kn-ic { position: absolute; left: 10px; top: 9px; color: var(--lt-faint-text); pointer-events: none; }
.kn .kn-input-ic input { padding-left: 30px; }
.kn-hint { color: var(--lt-muted); font-size: 11.5px; line-height: 15px; }
.kn-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 14px; }
.kn-role b { font: 500 12.5px/16px var(--jg-sans); }
.kn-role > span { color: var(--lt-faint-text); font-size: 11.5px; }
.kn-role small { grid-column: 1 / -1; color: var(--lt-muted); font-size: 11.5px; line-height: 15px; }

/* Domain */
.kn-domrow { display: flex; align-items: center; gap: 10px; min-height: 51px; padding: 8px 16px; color: var(--lt-ink-2); flex-wrap: wrap; }
.kn-domrow > b { color: var(--lt-ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.kn-domrow .kn-pill { padding: 1px 7px; font-size: 11px; color: var(--lt-muted); }
.kn-domrow .kn-status { font-size: 12.5px; }
.kn-domrow-wait { background: #FFFDF7; }
.kn-inline-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px 14px; }
.kn-inline-form .kn-field { flex: 1 1 280px; }
.kn-inline-form > .st-btn { margin-top: 20px; height: 32px; }
.kn-steps { display: flex; padding: 18px 18px 6px; }
.kn-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kn-step-top { display: flex; align-items: center; }
.kn-step-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--lt-app);
  box-shadow: inset 0 0 0 1.5px var(--lt-line-strong); color: var(--lt-faint-text); font: 600 11px/1 var(--jg-sans); }
.kn-step-line { flex: 1; height: 1.5px; background: var(--lt-line-strong); }
.kn-steps b { color: var(--lt-muted); font: 400 12.5px/16px var(--jg-sans); padding-right: 8px; }
.kn-step-sub { color: var(--lt-faint-text); font-size: 11.5px; line-height: 15px; padding-right: 8px; }
.kn-steps li[data-step=done] .kn-step-dot { background: #EAF6EF; box-shadow: inset 0 0 0 1.5px #BFE3CF; color: var(--lt-ok); }
.kn-steps li[data-step=done] .kn-step-line { background: #BFE3CF; }
.kn-steps li[data-step=done] b, .kn-steps li[data-step=current] b { color: var(--lt-ink); font-weight: 600; }
.kn-steps li[data-step=current] .kn-step-dot { background: var(--lt-warn-bg); box-shadow: inset 0 0 0 1.5px #E2B203; color: var(--lt-warn); }
.kn-steps li[data-step=current] .kn-step-sub { color: var(--lt-warn); }
.kn-records { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.kn-records > p { color: var(--lt-ink-2); font-size: 13px; }
.kn-boxed { border: 1px solid var(--lt-line-strong); border-radius: 8px; }
.kn-boxed tr:last-child td { border-bottom: 0; }
.kn-dns td { height: 41px; }
.kn-copy { display: inline-flex; align-items: center; gap: 6px; }
.kn-copy code { color: var(--lt-ink); font: 12.5px/16px var(--jg-mono); overflow-wrap: anywhere; }
.kn-copy-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--lt-line-strong);
  border-radius: 5px; background: var(--lt-app); color: var(--lt-muted); cursor: pointer; }
.kn-copy-btn:hover { background: var(--lt-shell); color: var(--lt-ink); }
.kn-infobar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; border-radius: 8px; background: var(--lt-shell); color: var(--lt-muted); font-size: 12.5px; }
.kn-infobar > span { flex: 1; min-width: 0; }

/* Paket & tagihan */
.kn-plan { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; }
.kn-plan-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #FBEDE8; color: var(--lt-brand); }
.kn-plan-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--lt-muted); font-size: 12.5px; }
.kn-plan-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kn-plan-name h2 { color: var(--lt-ink); font: 600 16px/20px var(--jg-sans); }
.kn-price { color: var(--lt-ink-2); font-weight: 500; }
.kn-plan-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kn-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kn-plancard { gap: 10px; padding: 14px 16px; }
.kn-plancard.on { border: 1.5px solid var(--lt-ink); }
.kn-plancard-head { display: flex; align-items: center; gap: 8px; }
.kn-plancard-head h3 { flex: 1; font: 600 14px/18px var(--jg-sans); }
.kn-checks { display: flex; flex-direction: column; gap: 8px; }
.kn-checks li { display: flex; gap: 8px; color: var(--lt-ink-2); font-size: 12.5px; }
.kn-checks .kn-ic { margin-top: 2px; color: var(--lt-ok); }

/* Unduh data saya */
.kn-offer { gap: 10px; padding: 18px; }
.kn-offer-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--lt-shell); color: var(--lt-ink-2); }
.kn-offer h2 { margin-top: 6px; font: 600 15px/20px var(--jg-sans); }
.kn-offer > p { max-width: 560px; color: var(--lt-muted); font-size: 12.5px; line-height: 19px; }

/* business list (/konsol/ with more than one) */
.kn-solo { max-width: 880px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.kn-solo:focus { outline: none; }
.kn-solo-head { display: flex; align-items: center; gap: 8px; }
.kn-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--jg-sans); text-decoration: none; }
.kn .kn-solo-h1 { font: 500 26px/32px var(--jg-serif); letter-spacing: -.3px; }
.kn-bizlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kn-bizcard { flex-direction: row; align-items: flex-start; gap: 10px; padding: 14px; }
.kn-bizcard-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kn-bizlink { font: 600 14px/18px var(--jg-sans); text-decoration: none; overflow-wrap: anywhere; }
.kn-bizlink:hover { text-decoration: underline; }
.kn-bizmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--lt-muted); font-size: 12px; }

.kn-dialog .st-btn { height: 32px; }

/* below 1180px: side columns drop under the main column */
@media (max-width: 1179px) {
  .kn-row { flex-direction: column; }
  .kn-side-card, .kn-side-col { width: auto; }
  .kn-kpis { flex-wrap: wrap; }
  .kn-kpi { flex: 1 1 30%; border-bottom: 1px solid var(--lt-line); }
}
/* below 768px: sidebar stacks above the panel, nav becomes a select, tables become stacked rows */
@media (max-width: 767px) {
  .kn-shell { flex-direction: column; }
  .kn-side { position: static; width: auto; height: auto; padding: 8px 8px 4px; gap: 8px; overflow: visible; }
  .kn-nav, .kn-side-gap { display: none; }
  .kn-navselect { display: flex; }
  .kn-navselect select { width: 100%; }
  .kn-me { border-top: 0; padding-top: 0; }
  .kn-panel { margin: 4px 8px 8px; min-height: 0; }
  .kn-topbar { flex-wrap: wrap; padding: 8px 10px 8px 12px; }
  .kn-actions { width: 100%; justify-content: flex-start; }
  .kn-content { padding: 12px; }
  .kn-kpi { flex: 1 1 45%; }
  .kn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kn-dl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kn-steps { flex-direction: column; gap: 10px; padding: 14px; }
  .kn-steps li { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .kn-step-line { display: none; }
  .kn-steps .kn-step-sub { flex-basis: 100%; padding-left: 30px; }
  .kn-plan { flex-direction: column; align-items: flex-start; }
  .kn-infobar { flex-wrap: wrap; }
  .kn-search { width: 140px; }
  .kn-card-head { flex-wrap: wrap; }
  .kn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kn-table, .kn-table tbody, .kn-table tr, .kn-table td { display: block; width: 100%; }
  .kn-table tr { padding: 8px 14px; border-bottom: 1px solid var(--lt-row-line); }
  .kn-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; height: auto; padding: 3px 0; border: 0; }
  .kn-table td[data-label]::before { content: attr(data-label); color: var(--lt-muted); font-size: 11.5px; }
  .kn-table td.kn-acts { display: flex; flex-wrap: wrap; gap: 4px; text-align: left; white-space: normal; }
  .kn-table td.kn-acts:empty { display: none; }
  .kn-acts .st-btn + .st-btn { margin-left: 0; }
  .kn-table td .kn-pill { justify-self: start; }
}
.kn .ks-navlink.on::before { content: none; }
.kn .kn-steps { padding: 18px 18px 6px; }
.kn .kn-checks, .kn .kn-plans { padding: 0; }
.kn-content > .kn-row:last-child { flex: 1 1 auto; }
.kn .ks-timeline li[data-kind] .ks-timeline-text::before { content: none; }
.kn-bars-lg .kn-bars-plot, .kn-bars-md .kn-bars-plot { flex: none; height: 200px; }
.kn-bars-sm .kn-bars-plot { flex: none; height: 160px; }
@media (max-width: 767px) { .kn-bars-lg .kn-bars-plot, .kn-bars-md .kn-bars-plot, .kn-bars-sm .kn-bars-plot { height: 140px; gap: 2px; } }

/* ================================================================ account overlays (akun.js; body.kn and body.st) */
/* From rangka.pen "Overlay · Menu akun" (U7qMAT), "Overlay · Panel notifikasi" (joV0Q), "Overlay · Ganti bisnis" (ISyhM). */

.jg-ic { display: block; flex: none; fill: currentColor; }
.ov-acct, .ov-bell { position: relative; }
.ov-acct { flex: 1; min-width: 0; }
.ov-me-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 2px; border: 0; border-radius: 7px; background: transparent; color: var(--lt-ink);
  text-align: left; font: inherit; cursor: pointer; }
.ov-me-btn:hover, .ov-me-btn[aria-expanded=true] { background: var(--lt-hover); }
.ov-scrim { position: fixed; inset: 0; z-index: 39; background: var(--lt-scrim); }
.ov-pop { z-index: 40; background: var(--lt-app); border: 1px solid var(--lt-line-strong); border-radius: 12px; box-shadow: var(--lt-pop-shadow); color: var(--lt-ink);
  font: 13px/18px var(--jg-sans); text-align: left; }
.ov-pop ul { margin: 0; padding: 0; list-style: none; }
/* Fixed, not absolute: the sidebar scrolls (overflow) and would clip it. */
.ov-menu { position: fixed; left: 10px; bottom: 52px; width: 268px; max-height: calc(100vh - 64px); padding-bottom: 6px; overflow-y: auto; }
.ov-menu-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--lt-line); }
.ov-av-lg { width: 32px; height: 32px; font-size: 12px; }
.ov-menu-who { min-width: 0; display: flex; flex-direction: column; }
.ov-menu-who b { font: 600 13px/17px var(--jg-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-menu-who span { color: var(--lt-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-group { padding: 4px 0; border-bottom: 1px solid var(--lt-line); }
.ov-group-last { border-bottom: 0; padding-bottom: 0; }
.ov-item { width: 100%; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px; border: 0; background: transparent; color: var(--lt-ink);
  font: 400 13px/1 var(--jg-sans); text-decoration: none; cursor: pointer; }
.kn a.ov-item, .st a.ov-item { color: var(--lt-ink); font-weight: 400; }
.ov-item .jg-ic { color: var(--lt-muted); }
.ov-item:hover { background: var(--lt-shell); }
.ov-static { cursor: default; }
.ov-static:hover { background: transparent; }
.ov-item-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.ov-item-r { color: var(--lt-faint-text); font-size: 12px; }
.ov-danger, .kn button.ov-danger { color: var(--lt-bad-ink); }
.ov-danger .jg-ic { color: var(--lt-bad-ink); }
.ov-theme { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 2px 10px 2px 14px; }
.ov-theme-l .jg-ic { color: var(--lt-muted); }
.ov-seg button { width: 30px; padding: 0; justify-content: center; }
.ov-seg .jg-ic { display: block; }

.ov-bell-btn { position: relative; }
.ov-bell-btn.on { background: var(--lt-hover); color: var(--lt-ink); }
.ov-dot { position: absolute; top: 5px; left: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--lt-brand); box-shadow: 0 0 0 1.5px var(--lt-shell); }
.ov-panel { position: fixed; left: 212px; bottom: 10px; width: 400px; max-height: min(640px, calc(100vh - 20px)); display: flex; flex-direction: column; overflow: hidden; }
.st .ov-panel { left: auto; right: 16px; bottom: auto; top: 56px; }
.ov-panel-head { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px 0 16px; }
.ov-panel-head h2 { margin: 0; font: 600 14px/18px var(--jg-sans); }
.ov-link { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--lt-muted); font: 400 12px/16px var(--jg-sans); cursor: pointer; }
.ov-link:hover:not(:disabled) { color: var(--lt-ink); background: var(--lt-shell); }
.ov-link:disabled { opacity: .55; cursor: default; }
.ov-tabs { flex: none; display: flex; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--lt-line); }
.ov-tab { display: flex; align-items: center; gap: 5px; height: 34px; margin-bottom: -1px; padding: 0; border: 0; border-bottom: 1.5px solid transparent; background: transparent;
  color: var(--lt-muted); font: 400 12.5px/1 var(--jg-sans); cursor: pointer; }
.ov-tab[aria-selected=true] { border-bottom-color: var(--lt-ink); color: var(--lt-ink); font-weight: 600; }
.ov-tab-n { color: var(--lt-faint-text); font-size: 11.5px; font-weight: 400; }
.ov-list { flex: 1; min-height: 120px; overflow-y: auto; }
.ov-empty { margin: 0; padding: 28px 24px; color: var(--lt-muted); font-size: 12.5px; line-height: 18px; text-align: center; }
.ov-grp-l { margin: 0; padding: 12px 16px 4px; color: var(--lt-faint-text); font: 600 10.5px/14px var(--jg-sans); letter-spacing: .5px; text-transform: uppercase; }
.ov-n.unread { background: var(--lt-warn-row); }
.ov-n-a { display: flex; gap: 10px; padding: 10px 16px; color: var(--lt-ink); text-decoration: none; }
.kn a.ov-n-a, .st a.ov-n-a { color: var(--lt-ink); font-weight: 400; }
a.ov-n-a:hover { background: var(--lt-shell); }
.ov-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--lt-shell); color: var(--lt-ink-2); }
.ov-tone-ok { background: var(--lt-ok-pill); color: var(--lt-ok); }
.ov-tone-warn { background: var(--lt-warn-bg); color: var(--lt-warn); }
.ov-n-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ov-n-top { display: flex; align-items: center; gap: 6px; }
.ov-n-top b { flex: 1; min-width: 0; font: 500 12.5px/17px var(--jg-sans); }
.ov-n.unread .ov-n-top b { font-weight: 600; }
.ov-n-tm { color: var(--lt-faint-text); font-size: 11px; }
.ov-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--lt-brand); }
.ov-n-s { color: var(--lt-muted); font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.ov-panel-foot { flex: none; display: flex; align-items: center; height: 40px; padding: 0 16px; border-top: 1px solid var(--lt-line); background: var(--lt-soft); font-size: 12.5px; }
.kn .ov-panel-foot a { font-weight: 500; text-decoration: none; }

.kn-menu.ov-bizmenu { position: fixed; top: 58px; left: 10px; width: 300px; max-height: calc(100vh - 70px); overflow-y: auto; padding: 0 0 6px; border-radius: 12px; box-shadow: var(--lt-pop-shadow); }
.ov-bizmenu .kn-menu-label { padding: 10px 10px 4px; }
.ov-bizmenu ul { padding: 0; }
.ov-bizmenu li a { padding: 8px 10px; border-radius: 0; gap: 10px; }
.ov-bizmenu li a.on { background: var(--lt-shell); }
.ov-bizmark { width: 28px; height: 28px; border-radius: 7px; }
.ov-bizmenu .kn-menu-tx b { font: 500 13px/17px var(--jg-sans); }
.ov-biznew { gap: 10px; margin-top: 0; padding: 8px 10px; border-radius: 0; font-size: 13px; font-weight: 400; }
/* Studio renders the foot as a <button>, Konsol as an <a>: reset the button so both look the same. */
button.ov-biznew { width: 100%; border: 0; border-top: 1px solid var(--lt-line); background: transparent; color: var(--lt-ink); font-family: var(--jg-sans);
  text-align: left; cursor: pointer; }
button.ov-biznew:disabled { cursor: default; opacity: .6; }
.ov-bizmenu li a, .ov-bizmenu a.ov-biznew { color: var(--lt-ink); }
.ov-bizmenu li a > svg { flex: none; color: var(--lt-ink-2); }
.ov-bizmenu li a:focus-visible, .ov-biznew:focus-visible { outline: 2px solid var(--lt-focus, #E0623F); outline-offset: -2px; }
.ov-bizplus { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--lt-line-strong);
  background: var(--lt-app); color: var(--lt-ink-2); }

.st-rail-foot .ov-acct { flex: 1; }
.st-rail-foot .ov-menu { left: 8px; bottom: 56px; }
.st .kn-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--lt-avatar);
  color: var(--lt-ink-2); font: 600 10.5px/1 var(--jg-sans); }
.st .kn-me-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st .kn-me-tx b { font: 500 12.5px/16px var(--jg-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st .kn-me-tx span { color: var(--lt-muted); font-size: 11px; line-height: 14px; }

/* ================================================================ Pengaturan (pengaturan.js, body.kn) */
/* From rangka.pen "Pengaturan · Profil" (M30xU9) and its siblings: 244px sidebar, white inset, a 680px column of
   sections (14px title, 12.5px description, 10px-radius card of rows: 220px label column, control on the right). */

.pg-side { gap: 12px; }
.kn .pg-back { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--lt-muted); font-weight: 400; text-decoration: none; }
.kn .pg-back:hover { background: var(--lt-hover); color: var(--lt-ink); }
.pg-title { padding: 0 2px; color: var(--lt-ink); font: 600 15px/20px var(--jg-sans); }
.pg-nav { gap: 12px; }
.pg-nav .kn-navlabel { font-size: 10.5px; }
.pg-panel { align-items: center; padding: 36px 24px 48px; }
.pg-col { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 28px; }
.pg-head { display: flex; flex-direction: column; gap: 4px; }
.kn .pg-head .ks-h1 { font: 600 22px/28px var(--jg-sans); letter-spacing: -.3px; white-space: normal; }
.pg-head p { color: var(--lt-muted); font-size: 13.5px; line-height: 19px; }
.pg-form { display: flex; flex-direction: column; gap: 28px; }
.pg-sec { display: flex; flex-direction: column; gap: 10px; }
.pg-sec-h { display: flex; flex-direction: column; gap: 2px; }
.pg-sec-h h2 { font: 600 14px/18px var(--jg-sans); }
.pg-sec-h p { color: var(--lt-muted); font-size: 12.5px; line-height: 17px; }
.pg-card, .pg-devices, .pg-integrations, .pg-table { border: 1px solid var(--lt-line-strong); border-radius: 10px; overflow: hidden; background: var(--lt-app); }
.pg-row { display: flex; align-items: center; gap: 16px; min-height: 57px; padding: 12px 16px; border-bottom: 1px solid var(--lt-row-line); }
.pg-card > .pg-row:last-child, .pg-devices > .pg-row:last-child, .pg-integrations > .pg-row:last-child { border-bottom: 0; }
.pg-row-tx { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }
.pg-row-tx label, .pg-row-l { color: var(--lt-ink); font: 500 13px/17px var(--jg-sans); }
.pg-row-d { color: var(--lt-muted); font-size: 11.5px; line-height: 15px; }
.pg-ctl { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pg-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px;
  background: var(--lt-app); color: var(--lt-muted); }
.pg-input:focus-within { border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-3); }
.kn .pg-input input, .kn .pg-input select, .pg-input textarea { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: transparent; color: var(--lt-ink);
  font: 13px/18px var(--jg-sans); box-shadow: none; }
.kn .pg-input input:focus, .kn .pg-input select:focus, .pg-input textarea:focus { outline: none; box-shadow: none; }
.pg-input.ro { background: var(--lt-soft); }
.kn .pg-input.ro input { color: var(--lt-ink-2); }
.pg-val { flex: 1; color: var(--lt-ink); padding: 8px 0; }
.pg-textarea { padding: 6px 10px; }
.pg-textarea textarea { height: auto; min-height: 40px; resize: vertical; }
.pg-av { width: 44px; height: 44px; font-size: 15px; }
.pg-logo { width: 44px; height: 44px; border-radius: 10px; }
.pg-host { color: var(--lt-ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.kn .pg-textlink { font-weight: 600; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.kn .pg-textlink:hover { text-decoration: underline; }
.pg-strong { font-weight: 500; }
.pg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kn .pg-actions .st-btn, .pg-ctl .st-btn, .pg-card-foot .st-btn { height: 30px; padding: 0 11px; }
.pg-btn-danger { border-color: var(--lt-bad-line); color: var(--lt-bad-ink); }
.kn .pg-btn-danger .kn-ic, .pg-btn-danger .jg-ic { color: var(--lt-bad-ink); }
.pg-btn-danger:hover:not(:disabled) { background: var(--lt-bad-bg); }
.st-btn:disabled { opacity: .55; cursor: not-allowed; }
.pg-err { margin: 0; }
.pg-row-warn { background: var(--lt-warn-row); }
.pg-note { display: flex; align-items: center; gap: 6px; color: var(--lt-muted); font-size: 12px; }
.pg-note .jg-ic { color: var(--lt-faint); }

/* sub forms (change password, two-step) open under their row */
.pg-sub { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-bottom: 1px solid var(--lt-row-line); background: var(--lt-soft); }
.pg-card > .pg-sub:last-child { border-bottom: 0; }
.pg-sub .si-field input { max-width: 360px; }
.pg-sub .pg-actions { justify-content: flex-start; }
.pg-sub-p { color: var(--lt-ink-2); font-size: 12.5px; line-height: 18px; }
.pg-secret { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pg-secret code { padding: 6px 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app); font: 500 13px/18px var(--jg-mono);
  letter-spacing: .5px; overflow-wrap: anywhere; user-select: all; }

.pg-switch { flex: none; position: relative; width: 32px; height: 18px; padding: 2px; border: 0; border-radius: 999px; background: var(--lt-line-strong); cursor: pointer; }
.pg-switch[aria-checked=true] { background: var(--lt-ink); }
.pg-knob { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--lt-app); transition: transform .15s; }
.pg-switch[aria-checked=true] .pg-knob { transform: translateX(14px); }
.pg-switch:disabled { cursor: default; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .pg-knob { transition: none; } }

/* devices and integrations */
.pg-devices, .pg-integrations { margin: 0; padding: 0; list-style: none; }
.pg-device, .pg-integ { gap: 12px; }
.pg-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--lt-shell); color: var(--lt-ink-2); }
.pg-dev-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-dev-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pg-dev-t b { font: 500 13px/17px var(--jg-sans); }
.pg-dev-t .kn-pill { padding: 2px 7px; font-size: 11px; font-weight: 600; }
.pg-card-foot { display: flex; justify-content: flex-end; padding: 10px 16px; margin-top: -10px; border: 1px solid var(--lt-line-strong); border-top: 0;
  border-radius: 0 0 10px 10px; background: var(--lt-soft); }
.pg-devices:has(+ .pg-card-foot) { border-radius: 10px 10px 0 0; }
.pg-logo-sm { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: #FFFFFF; }

/* notification channels */
.pg-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pg-table th, .pg-table td { padding: 0 16px; border-bottom: 1px solid var(--lt-row-line); text-align: left; }
.pg-table tr:last-child > * { border-bottom: 0; }
.pg-table thead th { height: 33px; background: var(--lt-soft); color: var(--lt-muted); font: 600 11.5px/15px var(--jg-sans); }
.pg-table thead th + th, .pg-table td { width: 90px; text-align: center; }
.pg-table tbody th { height: 51px; font-weight: 400; }
.pg-table tbody th b { display: block; font: 500 13px/17px var(--jg-sans); }
.pg-table tbody th span { color: var(--lt-muted); font-size: 11.5px; line-height: 15px; }
.pg-check { width: 16px; height: 16px; margin: 0; accent-color: var(--lt-ink); cursor: pointer; }
.pg-check:disabled { cursor: default; }

/* theme cards */
.pg-themes { display: flex; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--lt-line-strong); border-radius: 10px; background: var(--lt-app); }
.pg-theme { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.pg-prev { display: flex; gap: 6px; height: 96px; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--lt-line-strong); overflow: hidden; }
.pg-theme.on .pg-prev { box-shadow: inset 0 0 0 2px var(--lt-ink); }
.pg-prev i { display: block; height: 5px; border-radius: 2px; }
.pg-prev-side { width: 40px; display: flex; flex-direction: column; gap: 4px; }
.pg-prev-main { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 6px; }
.pg-prev-main .hd { width: 50px; height: 6px; }
.pg-prev-light { background: #F4F2EF; } .pg-prev-light .pg-prev-side i { background: #DED7D1; }
.pg-prev-light .pg-prev-main { background: #FFFFFF; } .pg-prev-light .pg-prev-main i { background: #EEEAE7; } .pg-prev-light .pg-prev-main .hd { background: #1C1917; }
.pg-prev-dark { background: #13110F; } .pg-prev-dark .pg-prev-side i { background: #3A332F; }
.pg-prev-dark .pg-prev-main { background: #1C1917; } .pg-prev-dark .pg-prev-main i { background: #332D29; } .pg-prev-dark .pg-prev-main .hd { background: #EDE8E4; }
.pg-prev-system { background: linear-gradient(-90deg, #F4F2EF 50%, #13110F 50%); }
.pg-prev-system .pg-prev-side, .pg-prev-system .pg-prev-main { visibility: hidden; }
.pg-theme-l { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.pg-theme.on .pg-theme-l { font-weight: 600; }
.pg-theme input { width: 16px; height: 16px; margin: 0; accent-color: var(--lt-ink); }
.pg-dialog .si-field input { width: 100%; }

@media (max-width: 767px) {
  .pg-panel { padding: 20px 16px 32px; }
  .pg-col, .pg-form { gap: 22px; }
  .pg-row { flex-wrap: wrap; gap: 8px 12px; }
  .pg-row-tx { width: auto; flex: 1 1 100%; }
  .pg-row:not(.pg-device):not(.pg-integ) .pg-ctl { flex: 1 1 100%; justify-content: flex-start; }
  .pg-device .pg-dev-tx, .pg-integ .pg-dev-tx { flex: 1 1 0; }
  .pg-themes { gap: 8px; padding: 12px; }
  .pg-prev { height: 64px; padding: 6px; }
  .pg-prev-side { width: 20px; }
  .pg-table thead th + th, .pg-table td { width: 64px; padding: 0 8px; }
  .pg-table th { padding-left: 12px; }
  .kn .pg-back { padding: 0 4px; }
  .pg-title { display: none; }
  .ov-panel { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; max-height: calc(100vh - 16px); }
  .st .ov-panel { left: 8px; right: 8px; top: 8px; }
  .kn .ov-menu { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; }
  .kn-menu.ov-bizmenu { left: 8px; right: 8px; top: 56px; width: auto; }
  .kn-me { gap: 4px; }
}

/* ================================================================ dark theme (Tampilan & bahasa) */
/* <html data-theme="dark">, or "system" with the OS in dark mode. jg-* dark values are rangka.pen's (GetVariables
   dark mode); the pen has no dark lt-* set, so the app shell maps lt-* onto the same dark palette. The landing (body.lp)
   stays light. */
:root[data-theme="dark"] {
  --lt-app: #1C1917; --lt-soft: #24201D; --lt-ink: #EDE8E4; --lt-ink-2: #CFC7C1; --lt-muted: #A79D96; --lt-faint: #7A706A; --lt-faint-text: #A79D96;
  --lt-line: #2E2825; --lt-line-strong: #3A322E; --lt-brand: #E0623F; --lt-raka: #2DD4BF; --lt-ok: #7EE2B8; --lt-warn: #F5CD47;
  --lt-shell: #13110F; --lt-hover: #2A2421; --lt-bad: #F87168;
  --lt-warn-bg: #2E2614; --lt-warn-box: #1F1B12; --lt-warn-line: #4A3B12; --lt-raka-bg: #12302C; --lt-raka-ink: #5EEAD4;
  --lt-ok-bg: #163527; --lt-bad-bg: #3A1A16; --lt-info-bg: #1E2633; --lt-info-ink: #A9B8D3; --lt-viewport: #161412;
  --lt-on-ink: #1C1917; --lt-row-line: #2A2421; --lt-content: #191614; --lt-avatar: #3A322E; --lt-ok-pill: #163527; --lt-bad-ink: #FD9891;
  --lt-bad-line: #5D2A22; --lt-warn-row: #1F1B12; --lt-pop-shadow: 0 16px 40px #00000080, 0 0 0 1px #3A322E; --lt-scrim: #0000004D;
  --lt-custom-ink: #F08A6B; --lt-custom-bg: #3A2219; --lt-svc-ink: #F5CD47; --lt-svc-line: #8A6A12; --lt-svc-bg: #1F1B12;
  --jg-bg: #13110F; --jg-panel: #1C1917; --jg-panel-2: #24201D; --jg-line: #332D29; --jg-ink: #EDE8E4; --jg-ink-2: #CFC7C1; --jg-muted: #A79D96;
  --jg-brand: #E0623F; --jg-raka: #2DD4BF; --jg-ok: #4BCE97; --jg-warn: #F5CD47; --jg-sunken: #13110F; --jg-sunken-2: #0E0C0B; --jg-sunken-3: #141110;
  --jg-section: #1E1A18; --jg-warn-surface: #1F1B12; --jg-raka-tint: #2DD4BF0D; --jg-raka-line: #2DD4BF40; --jg-brand-tint: #E0623F1A; --jg-ok-tint: #4BCE971A;
  --jg-on-brand: #1A1210; --jg-border: #2E2825; --jg-border-warm: #3A2C26; --jg-border-strong: #3A322E; --jg-faint: #5A524D;
  --jg-raka-text: #5EEAD4; --jg-ok-text: #7EE2B8; --jg-warn-text: #F5CD47;
  --jg-veil-1: #FFFFFF08; --jg-veil-2: #FFFFFF0A; --jg-veil-3: #FFFFFF0D; --jg-veil-4: #FFFFFF14; --jg-veil-5: #FFFFFF1F; --jg-veil-6: #FFFFFF26;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --lt-app: #1C1917; --lt-soft: #24201D; --lt-ink: #EDE8E4; --lt-ink-2: #CFC7C1; --lt-muted: #A79D96; --lt-faint: #7A706A; --lt-faint-text: #A79D96;
    --lt-line: #2E2825; --lt-line-strong: #3A322E; --lt-brand: #E0623F; --lt-raka: #2DD4BF; --lt-ok: #7EE2B8; --lt-warn: #F5CD47;
    --lt-shell: #13110F; --lt-hover: #2A2421; --lt-bad: #F87168;
    --lt-warn-bg: #2E2614; --lt-warn-box: #1F1B12; --lt-warn-line: #4A3B12; --lt-raka-bg: #12302C; --lt-raka-ink: #5EEAD4;
    --lt-ok-bg: #163527; --lt-bad-bg: #3A1A16; --lt-info-bg: #1E2633; --lt-info-ink: #A9B8D3; --lt-viewport: #161412;
    --lt-on-ink: #1C1917; --lt-row-line: #2A2421; --lt-content: #191614; --lt-avatar: #3A322E; --lt-ok-pill: #163527; --lt-bad-ink: #FD9891;
    --lt-bad-line: #5D2A22; --lt-warn-row: #1F1B12; --lt-pop-shadow: 0 16px 40px #00000080, 0 0 0 1px #3A322E; --lt-scrim: #0000004D;
    --lt-custom-ink: #F08A6B; --lt-custom-bg: #3A2219; --lt-svc-ink: #F5CD47; --lt-svc-line: #8A6A12; --lt-svc-bg: #1F1B12;
    --jg-bg: #13110F; --jg-panel: #1C1917; --jg-panel-2: #24201D; --jg-line: #332D29; --jg-ink: #EDE8E4; --jg-ink-2: #CFC7C1; --jg-muted: #A79D96;
    --jg-brand: #E0623F; --jg-raka: #2DD4BF; --jg-ok: #4BCE97; --jg-warn: #F5CD47; --jg-sunken: #13110F; --jg-sunken-2: #0E0C0B; --jg-sunken-3: #141110;
    --jg-section: #1E1A18; --jg-warn-surface: #1F1B12; --jg-raka-tint: #2DD4BF0D; --jg-raka-line: #2DD4BF40; --jg-brand-tint: #E0623F1A; --jg-ok-tint: #4BCE971A;
    --jg-on-brand: #1A1210; --jg-border: #2E2825; --jg-border-warm: #3A2C26; --jg-border-strong: #3A322E; --jg-faint: #5A524D;
    --jg-raka-text: #5EEAD4; --jg-ok-text: #7EE2B8; --jg-warn-text: #F5CD47;
    --jg-veil-1: #FFFFFF08; --jg-veil-2: #FFFFFF0A; --jg-veil-3: #FFFFFF0D; --jg-veil-4: #FFFFFF14; --jg-veil-5: #FFFFFF1F; --jg-veil-6: #FFFFFF26;
  }
  :root[data-theme="system"] body.kn, :root[data-theme="system"] body.st { color-scheme: dark; }
}
:root[data-theme="dark"] body.kn, :root[data-theme="dark"] body.st { color-scheme: dark; }
/* Pills and boxes drawn with fixed light tints follow the dark tokens. */
:root[data-theme="dark"] .kn-pill-ok, :root[data-theme="dark"] .st-pill-ok { background: var(--lt-ok-bg); color: var(--lt-ok); }
:root[data-theme="dark"] .kn-pill-bad, :root[data-theme="dark"] .st-pill-bad, :root[data-theme="dark"] .kn-danger-text { background: var(--lt-bad-bg); color: var(--lt-bad-ink); }
:root[data-theme="dark"] .kn-pill-brand { background: #3A2219; color: #F08A6B; }
:root[data-theme="dark"] .kn-pill-default { background: var(--lt-hover); color: var(--lt-ink-2); }
:root[data-theme="dark"] .kn-btn-danger { color: #1C1917; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .kn-pill-ok, :root[data-theme="system"] .st-pill-ok { background: var(--lt-ok-bg); color: var(--lt-ok); }
  :root[data-theme="system"] .kn-pill-bad, :root[data-theme="system"] .st-pill-bad { background: var(--lt-bad-bg); color: var(--lt-bad-ink); }
  :root[data-theme="system"] .kn-pill-brand { background: #3A2219; color: #F08A6B; }
  :root[data-theme="system"] .kn-pill-default { background: var(--lt-hover); color: var(--lt-ink-2); }
  :root[data-theme="system"] .kn-btn-danger { color: #1C1917; }
}

/* ================================================================ shared app sidebar (JG.Side) in the studio, rangka.pen aYUKW */
.kn-side[hidden] { display: none; }
.st-mtop { display: none; }
.st-side { position: relative; height: auto; align-self: stretch; margin: -6px 0 -6px -6px; z-index: 5; }
.st-side .st-nav { width: 100%; gap: 1px; padding: 0; }
.st-side .st-nav-item { height: 28px; gap: 8px; padding: 0 8px; border-radius: 6px; color: var(--lt-ink); font-weight: 400; }
.st-side .st-nav-item.on { background: var(--lt-hover); font-weight: 500; }
.st-side .st-nav-badge { min-width: 0; height: 18px; padding: 0 6px; background: #FDEBD3; color: #A54800; }
.st-side .kn-open { gap: 5px; height: 30px; border-radius: 7px; font: 500 12.5px/16px var(--jg-sans); }
.kn-switch-btn.st-proj { padding: 6px 8px; border-radius: 8px; font: inherit; }
.st-topics { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
.st-topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.st-topic { width: 100%; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  box-shadow: inset 0 0 0 1px transparent; color: var(--lt-ink-2); font: 400 13px/18px var(--jg-sans); text-align: left; cursor: pointer; }
.st-topic:hover { background: var(--lt-hover); }
.st-topic.on { background: var(--lt-app); box-shadow: inset 0 0 0 1px var(--lt-line-strong); color: var(--lt-ink); }
.st-topic-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #E2B203; }
.st-topic-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-topic-tm { flex: none; color: var(--lt-faint); font-size: 11.5px; }
.st-topic-empty { margin: 0; padding: 2px 10px; color: var(--lt-muted); font-size: 12.5px; }
.st-hostcard { gap: 8px; }
.st-hostcard .kn-update-h .st-ic { color: var(--lt-ink); }
.st-hostcard p { margin: 0; }
.st-hostcard p:not(.kn-update-h) { color: var(--lt-muted); font-size: 12px; line-height: 17px; }
.st-hostcard-btn { width: 100%; justify-content: center; height: 28px; gap: 6px; background: transparent; font: 500 12.5px/16px var(--jg-sans); text-decoration: none; }
.st-ib-flip svg { transform: scaleX(-1); }
.st-ib-line { box-shadow: inset 0 0 0 1px var(--lt-line-strong); border-radius: 7px; }
.st-devices button { width: 30px; justify-content: center; padding: 0; }
.st-webwrap[data-device=tablet], .st-webwrap[data-device=phone] { align-items: center; background: var(--lt-shell); }
.st-webwrap[data-device=tablet] .st-frame { flex: 1; width: 768px; max-width: 100%; border-inline: 1px solid var(--lt-line-strong); }
.st-webwrap[data-device=phone] .st-frame { flex: 1; width: 390px; max-width: 100%; border-inline: 1px solid var(--lt-line-strong); }
.st-csbar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 12px 4px 12px; background: #FDF6E3; border-bottom: 1px solid #F3E2B8;
  color: #8A4A00; font-size: 12.5px; }
.st-csbar > .st-ic { color: #A54800; }
.st-csbar-t { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-csbar .st-btn { height: 26px; }
.st-switch { position: relative; display: inline-flex; align-items: center; gap: 7px; color: #8A4A00; cursor: pointer; white-space: nowrap; }
.st-switch input { position: absolute; opacity: 0; width: 26px; height: 16px; margin: 0; cursor: pointer; }
.st-switch-k { position: relative; width: 26px; height: 16px; border-radius: 999px; background: #E2D9CF; transition: background .15s; }
.st-switch-k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px #1C191733; transition: transform .15s; }
.st-switch input:checked + .st-switch-k { background: var(--lt-ink); }
.st-switch input:checked + .st-switch-k::after { transform: translateX(10px); }
.st-switch input:focus-visible + .st-switch-k { outline: 2px solid var(--lt-focus, #E0623F); outline-offset: 2px; }
.st-linkbtn { border: 0; background: transparent; padding: 4px 6px; color: #A54800; font: 500 12.5px/16px var(--jg-sans); cursor: pointer; }
.st-linkbtn:hover:not(:disabled) { text-decoration: underline; }
.st-linkbtn:disabled { opacity: .5; cursor: not-allowed; }
.st-msg[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .st-switch-k, .st-switch-k::after { transition: none; } }

@media (max-width: 767px) {
  .st-mtop { display: flex; align-items: center; gap: 6px; margin: 6px 6px 0; }
  .st-mtop .st-panes { display: flex; flex: 1; margin: 0; }
  .st-mtop-t { font: 600 14px/20px var(--jg-sans); color: var(--lt-ink); }
  .st-side { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; height: 100%; margin: 0; width: min(280px, calc(100vw - 40px)); background: var(--lt-shell);
    box-shadow: 0 12px 32px #1C19172E; }
  .st-side .st-nav { flex-direction: column; width: 100%; overflow: visible; padding: 0; }
  .st-side .st-nav-item { flex: none; height: 32px; }
  .st-chat-head .st-menu { display: none; }
  .st-devices { display: none; }
}

/* Kanvas proses (aYUKW): palette | canvas | inspector */
.st-kv { min-height: 0; }
.st-kv-pal { flex: none; width: 219px; display: flex; flex-direction: column; gap: 8px; padding: 12px 8px 12px 10px; border-right: 1px solid var(--lt-line); overflow-y: auto; }
.st-kv-pal-h { margin: 0; color: var(--lt-ink); font: 600 13px/18px var(--jg-sans); }
.st-kv-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--lt-line-strong); border-radius: 7px; color: var(--lt-faint); }
.st-kv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--lt-ink); font: 400 12.5px/16px var(--jg-sans); }
.st-kv-search:focus-within { border-color: var(--lt-ink-2); box-shadow: 0 0 0 3px var(--jg-veil-2); }
.st-kv-groups { display: flex; flex-direction: column; gap: 6px; }
.st-kv-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.st-kv-glabel { margin: 0; padding: 4px 0 4px; color: var(--lt-faint); font: 600 11px/14px var(--jg-sans); letter-spacing: .5px; text-transform: uppercase; }
.st-kv-item { width: 100%; display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--lt-ink-2);
  font: 400 12.5px/16px var(--jg-sans); text-align: left; cursor: pointer; }
.st-kv-item:hover { background: var(--lt-shell); }
.st-kv-item.on { background: var(--lt-hover); color: var(--lt-ink); font-weight: 500; }
.st-kv-item > .st-ic:last-child { color: var(--lt-line-strong); }
.st-kv-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--lt-line); border-radius: 5px; background: var(--lt-soft); color: var(--lt-ink-2); }
.st-kv-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kv-pal-empty { margin: 4px 2px; }
.st-kv-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background-color: #FAF9F7;
  background-image: radial-gradient(#DEDAD6 1px, transparent 1px); background-size: 16px 16px; }
.st-kv-stage .st-frame { background: transparent; }
.st-kv-insp { flex: none; width: 300px; display: flex; flex-direction: column; border-left: 1px solid var(--lt-line); background: var(--lt-app); }
.st-kv-insp-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px 14px 16px; }
.st-kv-insp-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #FDEBD3; color: #A54800; }
.st-kv-insp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-kv-insp-tx b { font: 600 14px/20px var(--jg-sans); color: var(--lt-ink); }
.st-kv-insp-tx span { color: var(--lt-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.st-kv-dl { margin: 0; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 4px; }
.st-kv-dl dt { margin-top: 8px; color: var(--lt-ink-2); font: 500 12px/16px var(--jg-sans); }
.st-kv-dl dd { margin: 0; padding: 8px 10px; border: 1px solid var(--lt-line-strong); border-radius: 7px; color: var(--lt-ink); font-size: 13px; overflow-wrap: anywhere; }
.st-kv-dl code { font: 12px/16px var(--jg-mono); }
.st-kv-insp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; color: var(--lt-muted); font-size: 12.5px; }
.st-kv-insp-empty b { color: var(--lt-ink); font-size: 13px; }
.st-kv-insp-f { margin-top: auto; display: flex; gap: 8px; padding: 12px 16px 16px; }
.st-kv-insp-f .st-btn { flex: 1; justify-content: center; height: 30px; }
.st-kv-insp:has(.st-kv-insp-h) .st-kv-dl { flex: 0; }
@media (max-width: 1100px) { .st-kv-insp { width: 240px; } }
@media (max-width: 767px) {
  .st-kv { flex-direction: column; overflow-y: auto; }
  .st-kv-pal { width: auto; max-height: 220px; border-right: 0; border-bottom: 1px solid var(--lt-line); }
  .st-kv-stage { flex: none; min-height: 420px; }
  .st-kv-insp { width: auto; border-left: 0; border-top: 1px solid var(--lt-line); }
}
.st-btn-raka .st-ic { color: var(--lt-raka); }
.st-btn-mono { font-family: var(--jg-mono); font-size: 12px; }

/* Konsol Ringkasan (DkSmr): slots the Cloud does not measure yet keep their place with an honest empty state */
.kn-spark-empty { height: 22px; margin-top: auto; border-bottom: 2px dashed var(--lt-line-strong); }
.kn-kpi-na .kn-kpi-v { color: var(--lt-faint); }
.kn-tone-bg-bad { background: var(--lt-bad-bg, #FDECEA); color: #AE2A20; }
.kn-sw-bad { background: #D9583B; }
.kn-plot-na { position: relative; flex: 1; min-height: 190px; margin: 10px 14px 0; border-bottom: 1px solid var(--lt-line);
  background-image: linear-gradient(to top, var(--lt-line) 1px, transparent 1px); background-size: 100% 25%; display: flex; align-items: center; justify-content: center; }
.kn-plot-na-msg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; background: var(--lt-app); border-radius: 8px; text-align: center; color: var(--lt-muted); font-size: 12px; }
.kn-plot-na-msg b { color: var(--lt-ink); font-size: 13px; }
.kn-axis { display: flex; justify-content: space-between; padding: 6px 14px 12px; color: var(--lt-faint); font-size: 11px; }
.kn-svc-na .kn-svc-tx b { color: var(--lt-ink-2); }
.kn-uptime { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.kn-uptime-strip { display: flex; gap: 2px; height: 30px; }
.kn-uptime-strip span { flex: 1; min-width: 1px; border-radius: 2px; background: #EFEBE7; }
.kn-uptime-ax { display: flex; justify-content: space-between; gap: 8px; color: var(--lt-faint); font-size: 11px; }
.kn-res-h { margin: 10px 0 2px; color: var(--lt-ink-2); font: 500 12px/16px var(--jg-sans); }
.kn-res { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.kn-res-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--lt-ink); }
.kn-res-top .kn-muted { font-size: 11.5px; }
.kn-res-track { height: 6px; border-radius: 999px; background: #EFEBE7; }
.kn-inc-i { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lt-line); }
.kn-inc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kn-inc-tx b { font: 500 13px/18px var(--jg-sans); color: var(--lt-ink); }
.kn-inc-tx span { color: var(--lt-muted); font-size: 12px; line-height: 17px; }
.kn-inc-i time { flex: none; color: var(--lt-faint); font-size: 11px; }
.kn-more { position: relative; }
.kn-more-menu { left: auto; right: 0; width: 200px; }
.kn-seg button:disabled { cursor: not-allowed; }
.kn-table .kn-num { text-align: right; }
.kn-small { font-size: 11.5px; }
.kn-note-i { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 10px 14px; color: var(--lt-muted); font-size: 11.5px; line-height: 16px; }
.kn-note-i .kn-ic { flex: none; margin-top: 1px; }
.kn-tile .kn-res-track { margin: 4px 0 2px; }
.kn-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kn-paycard { display: flex; flex-direction: column; gap: 8px; padding: 14px; } .kn-paycard h2 { margin: 6px 0 0; font: 600 13px/18px var(--jg-sans); color: var(--lt-ink); } .kn-paycard p { margin: 0; font-size: 12.5px; } .kn-paycard .st-btn { align-self: flex-start; } .kn-acts { white-space: nowrap; } .kn-acts a { margin-right: 12px; } .kn-linkbtn { border: 0; background: none; padding: 0; color: var(--lt-ink); font: 600 12.5px/16px var(--jg-sans); cursor: pointer; } .kn-linkbtn:disabled { color: var(--lt-faint); cursor: not-allowed; }
.pg-empty-row { margin: 0; padding: 12px 14px; color: var(--lt-muted); font-size: 12.5px; border: 1px solid var(--lt-line-strong); border-radius: 10px; background: var(--lt-app); }
.ov-off { opacity: .6; }

/* ================================================================ onboarding (rangka.pen X1v6d: uKfYW, o8Avbs, d8vU4g) */
.ob { min-height: 100vh; display: flex; flex-direction: column; background: var(--lt-app); color: var(--lt-ink); font: 14px/20px var(--jg-sans); }
body.st .ob-app { height: 100%; min-height: 0; }
.ob-top { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--lt-line); background: var(--lt-app); }
.ob-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--lt-ink); font: 600 15px/20px var(--jg-sans); text-decoration: none; }
.ob-brand img { border-radius: 6px; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.ob-step { display: flex; align-items: center; gap: 7px; color: var(--lt-muted); font-size: 13px; }
.ob-step + .ob-step::before { content: ""; width: 30px; height: 1px; margin: 0 10px; background: var(--lt-line-strong); }
.ob-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lt-shell); color: var(--lt-muted); font: 600 11px/1 var(--jg-sans); }
.ob-current { color: var(--lt-ink); font-weight: 600; }
.ob-current .ob-step-n { background: var(--lt-ink); color: #FFFFFF; }
.ob-done .ob-step-n { background: #EAF6EF; color: var(--lt-ok); }
.ob-top-r { justify-self: end; display: flex; align-items: center; gap: 12px; }
.ob-skip { color: var(--lt-muted); font-size: 13px; text-decoration: none; }
.ob-skip:hover { color: var(--lt-ink); text-decoration: underline; }
.ob-av { width: 28px; height: 28px; font-size: 11px; }
.ob-start { flex: 1; width: 100%; max-width: 728px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
.ob:has(.ob-start) { background: radial-gradient(ellipse 60% 50% at 50% 35%, color-mix(in srgb, var(--lt-brand) 5%, var(--lt-app)) 0%, var(--lt-app) 60%) no-repeat, var(--lt-app); }
.ob-hello { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--lt-raka-bg); color: var(--lt-raka-ink); font: 500 12.5px/22px var(--jg-sans); }
.ob-h1 { margin: 0 0 22px; font: 600 36px/44px var(--jg-sans); letter-spacing: -1px; color: var(--lt-ink); }
.ob-lead { margin: 0 0 22px; color: var(--lt-muted); font-size: 15px; line-height: 22px; }
.ob-compose { width: 100%; display: flex; flex-direction: column; gap: 24px; padding: 14px; border: 1px solid var(--lt-line-strong); border-radius: 16px; background: var(--lt-app);
  box-shadow: 0 12px 32px #1C191714; text-align: left; transition: border-color .15s, box-shadow .15s; }
.ob-compose:focus-within { border-color: color-mix(in srgb, var(--lt-ink) 22%, var(--lt-line-strong)); box-shadow: 0 12px 32px #1C191714, 0 0 0 3px #1C191714; }
.ob .ob-compose textarea, .ob .ob-compose textarea:focus, .ob .ob-compose textarea:focus-visible { min-height: 66px; resize: none; border: 0; outline: 0; box-shadow: none; padding: 0; background: transparent; color: var(--lt-ink); font: 400 14.5px/22px var(--jg-sans); }
.ob-compose textarea::placeholder { color: var(--lt-faint-text); }
.ob-compose-row { display: flex; align-items: center; gap: 8px; }
.ob-compose-row .st-ib, .ob-compose-row .st-btn, .ob-compose-row .st-send { height: 30px; border-radius: 8px; }
.ob-compose-row .st-ib, .ob-compose-row .st-send { width: 30px; }
.ob-compose-row .st-ib-line { border: 1px solid var(--lt-line-strong); color: var(--lt-ink-2); }
.ob-compose-row .st-btn { font-size: 12.5px; font-weight: 500; color: var(--lt-ink-2); gap: 6px; }
.ob-compose-row .st-send:hover:not(:disabled) { background: #3A3330; }
.ob-attach-l { color: var(--lt-faint-text); font-size: 12px; }
.ob-err { margin: 10px 0 0; color: #AE2A20; font-size: 13px; }
.ob-or { margin: 28px 0 10px; color: var(--lt-faint-text); font-size: 12.5px; }
.ob-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ob-kind { min-height: 30px; padding: 0 11px; gap: 6px; background: var(--lt-app); color: var(--lt-ink-2); font: 500 12.5px/18px var(--jg-sans); transition: background .15s, border-color .15s; }
.ob-kind:hover:not(:disabled) { background: var(--lt-soft); border-color: color-mix(in srgb, var(--lt-ink) 22%, var(--lt-line-strong)); }
.ob-examples { list-style: none; margin: 36px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-ex { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--lt-line); border-radius: 10px; background: var(--lt-app); text-align: left; cursor: pointer; color: var(--lt-ink); font: inherit; transition: background .15s, border-color .15s; }
.ob-ex:hover { background: var(--lt-soft); border-color: var(--lt-line-strong); }
.ob-ex-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #FFFFFF; }
.ob-ex-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-ex-tx b { font: 500 12.5px/16px var(--jg-sans); }
.ob-ex-tx span { color: var(--lt-muted); font-size: 11.5px; line-height: 15px; }
/* step 2: interview */
.ob-body { flex: 1; min-height: 0; display: flex; }
.ob-chatcol { flex: 1; min-width: 0; min-height: 0; display: flex; justify-content: center; }
.ob-chatcol .st-chat { flex: 1 1 auto; max-width: 660px; border: 0; border-radius: 0; }
.ob-chatcol .st-chat-head { display: none; }
.ob-panel { flex: none; width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 18px; background: var(--lt-soft); border-left: 1px solid var(--lt-line); overflow-y: auto; }
.ob-panel-h { display: flex; align-items: center; justify-content: space-between; }
.ob-panel h2 { margin: 0; font: 600 13px/18px var(--jg-sans); color: var(--lt-ink); }
.ob-panel-h2 { margin-top: 12px !important; }
.ob-link { border: 0; background: none; padding: 0; color: var(--lt-muted); font: 400 12.5px/16px var(--jg-sans); cursor: pointer; }
.ob-link:hover { color: var(--lt-ink); text-decoration: underline; }
.ob-panel-empty { margin: 0; color: var(--lt-muted); font-size: 12.5px; }
.ob-panel-f { margin-top: auto; padding-top: 12px; }
.ob-build { width: 100%; height: 36px; gap: 7px; font-weight: 600; }
.ob-build .st-ic { color: var(--lt-raka); }
/* the interview: the peta alur beside the chat (spec "Studio layout", option A) */
.pt-panel { width: 360px; gap: 12px; padding-bottom: 0; }
.pt-biz { margin: -4px 0 0; display: flex; flex-direction: column; gap: 2px; color: var(--lt-muted); font-size: 12.5px; line-height: 17px; }
.pt-biz b { color: var(--lt-ink); font-weight: 500; overflow-wrap: anywhere; }
.pt-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-stage { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--lt-line-strong); border-radius: 10px; background: var(--lt-app);
  transition: border-color .15s; }
.pt-stage + .pt-stage::before { content: ""; position: absolute; left: 21px; top: -9px; width: 1px; height: 8px; background: var(--lt-line-strong); }
.pt-stage:hover { border-color: color-mix(in srgb, var(--lt-ink) 26%, var(--lt-line-strong)); }
.pt-stage:has(.pt-stage-btn:focus-visible) { outline: 2px solid var(--lt-brand); outline-offset: 2px; }
.pt-stage-btn { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pt-stage-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card prefills the composer */
body.st .pt-stage-btn:focus-visible { outline: none; }
.pt-stage-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lt-shell); color: var(--lt-ink-2); font: 600 11px/20px var(--jg-sans); text-align: center; }
.pt-stage-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-stage-tx b { font: 600 13px/20px var(--jg-sans); color: var(--lt-ink); overflow-wrap: anywhere; }
.pt-stage-tx span { color: var(--lt-muted); font-size: 11.5px; line-height: 15px; overflow-wrap: anywhere; }
.pt-stage-edit { flex: none; margin-top: 4px; color: var(--lt-muted); opacity: 0; transition: opacity .15s; }
.pt-stage:hover .pt-stage-edit, .pt-stage:focus-within .pt-stage-edit { opacity: 1; }
.pt-pieces { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 0 29px; display: flex; flex-wrap: wrap; gap: 5px; }
.pt-loose { padding-left: 0; }
.pt-piece { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 22px; padding: 2px 7px;
  border: 1px solid var(--lt-line-strong); border-radius: 6px; background: var(--lt-app); color: var(--lt-ink-2); font: 500 12px/16px var(--jg-sans); }
.pt-piece-l { min-width: 0; overflow-wrap: anywhere; }
.pt-piece .st-ic { flex: none; color: var(--lt-muted); }
.pt-mark { font-size: 11px; line-height: 1; }
.pt-custom { border-color: var(--lt-custom-ink); background: var(--lt-custom-bg); color: var(--lt-custom-ink); }
.pt-cloud_service { border-color: var(--lt-svc-line); background: var(--lt-svc-bg); color: var(--lt-svc-ink); }
.pt-edge { background: var(--lt-soft); }
.pt-existing { border-style: dashed; background: transparent; color: var(--lt-muted); }
.pt-piece-s { color: var(--lt-faint-text); font-weight: 400; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--lt-muted); font-size: 11px; line-height: 15px; }
.pt-lg { display: inline-flex; align-items: center; gap: 4px; }
.pt-lg-box { width: 10px; height: 10px; border: 1px solid #8C827B; border-radius: 3px; background: var(--lt-app); }
.pt-lg-existing .pt-lg-box { border-style: dashed; }
.pt-lg-custom .pt-mark { color: var(--lt-custom-ink); }
.pt-lg-cloud_service .pt-mark { color: var(--lt-svc-line); }
.pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--lt-ink-2); font-size: 12.5px; line-height: 18px; }
.pt-list li { display: flex; align-items: flex-start; gap: 8px; }
.pt-list li > span { min-width: 0; overflow-wrap: anywhere; }
.pt-settings .st-ic { flex: none; margin-top: 4px; color: var(--lt-ok); }
.pt-open li::before { content: ""; flex: none; width: 7px; height: 7px; margin: 5px 2px 0; border-radius: 50%; border: 1.5px solid #E2B203; }
.pt-foot { position: sticky; bottom: 0; margin: auto -18px 0; padding: 12px 18px 18px; background: var(--lt-soft); border-top: 1px solid var(--lt-line); }
.pt-foot .ob-build .st-ic { color: inherit; }
.ob-panes { display: none; }
/* owner files: chips in the chat and under the "/" composer */
.st-msg-file { margin-top: -6px; }
.st-filechip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 10px; border: 1px dashed #8C827B; border-radius: 8px;
  background: var(--lt-app); color: var(--lt-ink); font: 500 12.5px/18px var(--jg-sans); }
.st-filechip .st-ic { flex: none; color: var(--lt-muted); }
.st-filechip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-filechip-s { flex: none; color: var(--lt-muted); font-weight: 400; }
.st-filechip-s::before { content: "·"; margin-right: 6px; color: var(--lt-faint); }
.st-filechip-ok { border-style: solid; border-color: var(--lt-line-strong); }
.st-filechip-ok .st-ic, .st-filechip-ok .st-filechip-s { color: var(--lt-ok); }
.st-filechip-bad { border-style: solid; border-color: var(--lt-bad-line); background: var(--lt-bad-bg); }
.st-filechip-bad .st-ic, .st-filechip-bad .st-filechip-s { color: var(--lt-bad-ink); }
.st-filechip-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -4px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--lt-muted); cursor: pointer; }
.st-filechip-x:hover:not(:disabled) { background: var(--lt-hover); color: var(--lt-ink); }
.ob-files { list-style: none; margin: -12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* step 3: building */
.ob-build-l .st-body { flex: 1; }
.ob-build-l .st-chat-head { display: none; }
.ob-building { position: relative; }
.ob-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #FDEBD3; color: #A54800; font: 600 12px/16px var(--jg-sans); white-space: nowrap; }
.ob-skel { flex: 1; display: flex; min-height: 0; background: var(--lt-soft); }
.ob-skel-side { width: 190px; border-right: 1px solid var(--lt-line); background: linear-gradient(var(--lt-shell) 12px, transparent 12px) 16px 20px / 150px 22px repeat-y; }
.ob-skel-main { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 60px 20px 20px; }
.ob-skel-main div { border-radius: 8px; background: var(--lt-shell); }
.ob-prog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); width: min(360px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px;
  border: 1px solid var(--lt-line-strong); border-radius: 12px; background: var(--lt-app); box-shadow: 0 12px 32px #1C19171F; }
.ob-prog b { font: 600 15px/20px var(--jg-sans); }
.ob-prog p { margin: 0; color: var(--lt-muted); font-size: 12.5px; line-height: 18px; }
.ob-prog-m { color: var(--lt-ink-2) !important; }
.ob-bar { height: 6px; border-radius: 999px; background: #EFEBE7; overflow: hidden; }
.ob-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--lt-ink); animation: ob-ind 1.4s ease-in-out infinite; }
@keyframes ob-ind { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .ob-bar span { animation: none; width: 60%; } }
@media (max-width: 900px) {
  .ob-top { grid-template-columns: auto 1fr; height: auto; padding: 10px 16px; }
  .ob-steps { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .ob-start { padding-top: 48px; }
  .ob-examples { grid-template-columns: 1fr; }
  .ob-body { flex-direction: column; }
  .ob-panel { width: auto; border-left: 0; border-top: 1px solid var(--lt-line); max-height: 40vh; }
  .pt-foot { position: static; }
  .ob-skel-side { display: none; }
}
/* below 768px the map is its own tab next to the chat */
@media (max-width: 767px) {
  .ob-interview .ob-panes { display: flex; flex: none; margin: 6px 6px 0; }
  .ob-interview .ob-panes button { flex: 1; justify-content: center; height: 30px; font-size: 13px; }
  .ob-interview .ob-panel { flex: 1; max-height: none; border-top: 0; }
  .ob-interview .pt-foot { position: sticky; }
  .ob-interview.mpane-chat .ob-panel { display: none; }
  .ob-interview.mpane-peta .ob-chatcol { display: none; }
}
@media (max-width: 480px) {
  .ob-step + .ob-step::before { width: 14px; margin: 0 6px; }
  .ob-step { font-size: 12px; }
  .ob-h1 { font-size: 30px; line-height: 36px; }
  .ob-attach-l { display: none; }
  .ob-compose-row .st-btn { padding: 0 8px; }
}
.ob-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--lt-ink); }
@media (min-width: 901px) { .ob-kinds { flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 48px); } .ob-kind { white-space: nowrap; } }

/* Guest mode (rangka.pen: banner on lt-warn-bg, text lt-ink) */
.st-gwrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.st-gbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.st .st-gbody > .st-app, body.st .st-gbody > .ob-app { flex: 1; height: auto; min-height: 0; }
.st-gbanner { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--lt-warn-bg); color: var(--lt-ink); border-bottom: 1px solid var(--lt-warn-line); font-size: 13px; line-height: 18px; }
.st-gbanner .st-ic { flex: none; }
.st-gbanner-t { flex: 1; min-width: 0; }
.st-gbanner .st-btn { flex: none; text-decoration: none; }
@media (max-width: 767px) { .st-gbanner { flex-wrap: wrap; padding: 8px 12px; } .st-gbanner-t { flex-basis: calc(100% - 28px); } }
.ob-err a { color: inherit; text-decoration: underline; }

/* ================================================================ Lanjut proyek (rangka.pen vXb2i): "/" resume, /proyek, switcher */
.jp-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #FFFFFF; }
.jp-btn { height: 34px; padding: 0 13px; border-radius: 8px; gap: 6px; font: 500 13px/1 var(--jg-sans); text-decoration: none; white-space: nowrap; }
.ob-start-resume { justify-content: flex-start; padding-top: 40px; }
.jp-draft, .jp-list { width: 100%; margin: 0 0 28px; border: 1px solid var(--lt-line-strong); border-radius: 14px; background: var(--lt-app);
  box-shadow: 0 8px 24px #1C191712; text-align: left; }
.jp-draft { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; }
.jp-draft .jp-mark { border-radius: 10px; }
.jp-draft-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jp-k { color: var(--lt-muted); font-size: 12px; line-height: 16px; }
.jp-draft-tx b { font: 600 15px/20px var(--jg-sans); color: var(--lt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-s { color: var(--lt-faint-text); font-size: 12px; line-height: 16px; }
.jp-list { overflow: hidden; }
.jp-list > ul, .jp-table { list-style: none; margin: 0; padding: 0; }
.jp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--lt-line); }
.jp-head-b { font: 600 14px/20px var(--jg-sans); color: var(--lt-ink); }
.jp-head-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--lt-muted); font-size: 12.5px; }
.jp-head-t b { color: var(--lt-ink); font: 600 14px/20px var(--jg-sans); }
.jp-all { color: var(--lt-muted); font-size: 12.5px; text-decoration: none; }
.jp-all:hover { color: var(--lt-ink); text-decoration: underline; }
.jp-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink); text-decoration: none; }
.jp-list li:last-child .jp-row, .jp-table li:last-child .jp-row { border-bottom: 0; }
.jp-row-first { background: var(--lt-soft); }
a.jp-row-link:hover { background: var(--lt-soft); }
a.jp-row-link:focus-visible { outline: 2px solid var(--lt-focus, #E0623F); outline-offset: -2px; }
.jp-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jp-row-tx b { font: 600 14px/19px var(--jg-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-row-tx > span { color: var(--lt-muted); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-row-tx > span.jp-hl { color: var(--link, #A33B23); }
.jp-when { flex: none; color: var(--lt-faint-text); font-size: 12px; }
.jp-row > .st-ic { flex: none; color: var(--lt-faint-text); }
.jp-foot { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 16px; border-top: 1px solid var(--lt-line); background: var(--lt-soft);
  color: var(--lt-muted); font-size: 12px; }

.jp-page { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 36px 24px 72px; }
.jp-page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.jp-page-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 24px/30px var(--jg-sans); letter-spacing: -.4px; }
.jp-count { color: var(--lt-faint-text); font: 500 14px/1 var(--jg-sans); }
.jp-search, .jp-railsearch { display: flex; align-items: center; gap: 7px; color: var(--lt-faint-text); }
.jp-search { width: 240px; height: 34px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app); }
.jp-search:focus-within { border-color: var(--lt-focus, #E0623F); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lt-focus, #E0623F) 18%, transparent); }
.jp-search input, .jp-railsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--lt-ink); font: 400 13px/18px var(--jg-sans); }
.jp-search input:focus, .jp-search input:focus-visible, .jp-railsearch input:focus, .jp-railsearch input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.jp-railsearch:focus-within { border-bottom-color: var(--lt-focus, #E0623F); }
.jp-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.jp-tab { height: 28px; padding: 0 11px; border: 1px solid var(--lt-line-strong); border-radius: 999px; background: var(--lt-app); color: var(--lt-ink-2);
  font: 500 12.5px/1 var(--jg-sans); cursor: pointer; }
.jp-tab span { color: var(--lt-faint-text); }
.jp-tab:hover { background: var(--lt-soft); }
.jp-tab.on { border-color: var(--lt-ink); background: var(--lt-ink); color: #FFFFFF; }
.jp-tab.on span { color: #FFFFFFB3; }
.jp-tab:focus-visible { outline: 2px solid var(--lt-focus, #E0623F); outline-offset: 2px; }
.jp-sort { color: var(--lt-muted); font-size: 12.5px; }
.jp-table { border: 1px solid var(--lt-line-strong); border-radius: 12px; background: var(--lt-app); overflow: hidden; }
.jp-table .st-pill { flex: none; }
.jp-empty { margin: 24px 0; color: var(--lt-muted); text-align: center; }

.jp-railsearch { margin: 6px 6px 2px; height: 34px; padding: 0 10px; border-bottom: 1px solid var(--lt-line); }
.ov-bizmenu .jp-mark { border-radius: 7px; }
.jp-railall { border-top: 1px solid var(--lt-line); color: var(--lt-ink); }
.jp-railall-i { border: 0; background: transparent; }
.jp-railall .kn-menu-tx b { font-weight: 400; }

.au-drafts { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, #B4432A 24%, var(--lt-line)); border-radius: 10px; background: color-mix(in srgb, #B4432A 7%, var(--lt-app)); text-align: left; }
.au-drafts > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.au-drafts b { font: 600 13px/18px var(--jg-sans); color: var(--lt-ink); }
.au-drafts span span { color: var(--lt-muted); font-size: 12px; line-height: 16px; }

@media (max-width: 720px) {
  .jp-draft { flex-wrap: wrap; }
  .jp-draft-tx { flex-basis: calc(100% - 56px); }
  .jp-draft .jp-btn { flex: 1; justify-content: center; }
  .jp-head { flex-wrap: wrap; }
  .jp-when, .jp-sort { display: none; }
  .jp-page-head { flex-wrap: wrap; }
  .jp-search { order: 3; width: 100%; }
}

/* E-mail verification banner (Studio, after sign-up) */
.st-verify { margin: 8px 12px 0; }
.st-verify .kn-update-h { justify-content: space-between; }
.st-verify-x { width: 24px; height: 24px; }
.st-verify-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-verify-form input { flex: 1 1 110px; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--lt-line-strong); border-radius: 8px; background: var(--lt-app); color: var(--lt-ink);
  font: 500 14px/20px var(--jg-sans); letter-spacing: .18em; }
.st-verify .st-btn { height: 30px; padding: 0 11px; }
.pg-sub .pg-input input { letter-spacing: .18em; }