/* Warna adegan berasal dari token Ideasophia; tidak membuat palet terpisah. */
:root {
    --lab-sky-top: var(--is-status-in-progress-bg);
    --lab-sky-bottom: var(--is-bg-soft);
    --lab-ground: var(--is-line);
    --lab-ground-edge: var(--is-line-strong);
    --lab-device: var(--is-bg-surface);
    --lab-device-side: var(--is-bg-soft-2);
    --lab-device-line: var(--is-text-disabled);
    --lab-pv: var(--is-cat-astronomy);
    --lab-pv-grid: var(--is-status-in-progress-bg);
    --lab-battery: var(--is-status-in-progress-text);
    --lab-sun: var(--is-c-sun);
    --lab-logo-bg: var(--is-bg-surface);
}
[data-theme="dark"], [data-mode="malam"] {
    --lab-sky-top: var(--is-status-in-progress-bg);
    --lab-sky-bottom: var(--is-bg-app);
    --lab-ground: var(--is-bg-soft);
    --lab-ground-edge: var(--is-line-strong);
    --lab-device: var(--is-bg-soft-2);
    --lab-device-side: var(--is-bg-side);
    --lab-device-line: var(--is-text-disabled);
    --lab-pv: var(--is-status-in-progress-bg);
    --lab-pv-grid: var(--is-status-in-progress-border);
    --lab-battery: var(--is-cat-astronomy);
    --lab-sun: var(--is-c-cream);
    --lab-logo-bg: var(--is-c-cream);
}
.lab-body { min-inline-size: 0; }
.lab-shell { min-height: 100svh; display: grid; grid-template-columns: var(--is-size-rail) minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.lab-shell--home { grid-template-columns: minmax(0, 1fr); }
.lab-topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--is-space-5); padding: var(--is-space-2) var(--is-space-6); min-height: var(--is-size-topbar); background: var(--is-bg-surface); border-bottom: 1px solid var(--is-line); }
.lab-brand { flex: 0 0 auto; display: grid; place-items: center; background: var(--lab-logo-bg); border-radius: var(--is-radius-chip); text-decoration: none; }
.lab-brand img { display: block; width: 112px; height: 54px; object-fit: contain; mix-blend-mode: multiply; }
.lab-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--is-space-2); font-size: var(--is-fs-small); color: var(--is-text-muted); min-width: 0; overflow-wrap: anywhere; }
.lab-breadcrumb a { text-decoration: none; border-radius: var(--is-radius-chip); }
.lab-breadcrumb a:hover { background: var(--is-bg-soft); }
.lab-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--is-space-3); flex: 0 0 auto; }
.lab-back { display: inline-flex; align-items: center; gap: var(--is-space-2); text-decoration: none; color: var(--is-text-muted); padding: var(--is-space-2); border-radius: var(--is-radius-nav); font-size: var(--is-fs-small); }
.lab-back svg { transform: rotate(180deg); }
.lab-back:hover { background: var(--is-bg-soft); color: var(--is-text-heading); }
.lab-user { display: grid; place-items: center; width: var(--is-size-touch); height: var(--is-size-touch); border-radius: var(--is-radius-pill); background: var(--is-accent); color: var(--is-on-accent); font-size: var(--is-fs-small); font-weight: var(--is-fw-semibold); text-decoration: none; }
.lab-user:hover { background: var(--is-accent-hover); }
.lab-rail { grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: var(--is-space-2); padding: var(--is-space-4) var(--is-space-1); background: var(--is-bg-side); border-right: 1px solid var(--is-line); }
.lab-rail-item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--is-space-1); min-height: 60px; min-width: 0; padding: var(--is-space-2) var(--is-space-1); border: 0; border-radius: var(--is-radius-nav); background: transparent; color: var(--is-text-muted); text-decoration: none; font-size: var(--is-fs-micro); line-height: var(--is-lh-micro); }
.lab-rail-item.is-active, a.lab-rail-item:hover, button.lab-rail-item:hover { background: var(--is-accent-soft); color: var(--is-accent-text); }
.lab-rail-item[aria-disabled="true"] { cursor: default; }
.lab-rail-icon { position: relative; display: flex; }
.lab-alarm-dot { position: absolute; top: 0; right: -3px; width: 7px; height: 7px; border-radius: var(--is-radius-pill); background: var(--is-status-danger-text); border: 1px solid var(--is-bg-side); }
.lab-mode { display: inline-flex; padding: var(--is-space-1); gap: var(--is-space-1); border: 1px solid var(--is-line); border-radius: var(--is-radius-control); background: var(--is-bg-soft); margin-inline-start: auto; }
.lab-mode button { padding: var(--is-space-2) var(--is-space-3); border: 0; border-radius: var(--is-radius-chip); background: transparent; color: var(--is-text-muted); font-size: var(--is-fs-small); }
.lab-mode button[aria-pressed="true"] { background: var(--is-bg-surface); color: var(--is-text-heading); }
.lab-bottom-tabs, .lab-more-menu { display: none; }
.lab-main { min-width: 0; }
.lab-main:focus { outline: none; }
.lab-home { max-width: var(--is-size-content); margin-inline: auto; padding: var(--is-space-9) var(--is-space-7) var(--is-space-10); }
.lab-home-heading { display: flex; align-items: flex-end; gap: var(--is-space-9); flex-wrap: wrap; }
.lab-home-intro { flex: 1 1 440px; min-width: 0; }
.lab-eyebrow { display: flex; align-items: center; gap: var(--is-space-2); color: var(--is-text-muted); font: var(--is-fs-micro)/var(--is-lh-micro) var(--is-font-brand); letter-spacing: var(--is-ls-label); }
.lab-heading-mark { width: 6px; height: 6px; border-radius: var(--is-radius-pill); background: var(--is-c-sprout); }
.lab-home-intro h1 { font: var(--is-fw-semibold) var(--is-fs-h1)/var(--is-lh-h1) var(--is-font-read); color: var(--is-text-heading); margin: var(--is-space-4) 0 var(--is-space-3); text-wrap: balance; }
.lab-home-intro > p:last-child { color: var(--is-text-2); max-width: 62ch; line-height: 1.7; }
.lab-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--is-space-3); flex: 0 1 350px; width: 100%; margin: 0; }
.lab-summary > div { background: var(--is-bg-surface); border: 1px solid var(--is-line); border-radius: var(--is-radius-card-sm); padding: var(--is-space-3) var(--is-space-4); }
.lab-summary dt { color: var(--is-text-muted); font-size: var(--is-fs-small); white-space: nowrap; }
.lab-summary dd { color: var(--is-text-heading); font: var(--is-fw-semibold) var(--is-fs-h1)/var(--is-lh-h1) var(--is-font-brand); margin: var(--is-space-2) 0 0; font-variant-numeric: tabular-nums; }
.lab-summary dd.has-alarms { color: var(--is-status-danger-text); }
.lab-source-note { display: flex; align-items: flex-start; gap: var(--is-space-2); padding: var(--is-space-3) var(--is-space-4); margin: var(--is-space-6) 0; border: 1px solid var(--is-sophia-assistant-border); border-radius: var(--is-radius-nav); background: var(--is-sophia-assistant-bg); color: var(--is-text-2); font-size: var(--is-fs-small); }
.lab-source-note svg { margin-top: var(--is-space-1); flex-shrink: 0; color: var(--is-status-review-text); }
.lab-source-note strong { color: var(--is-text-heading); }
.lab-data-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--is-space-4); padding: var(--is-space-4); margin: var(--is-space-5) 0; border: 1px solid var(--is-status-review-border); background: var(--is-status-review-bg); border-radius: var(--is-radius-card-sm); font-size: var(--is-fs-small); }
.lab-data-banner strong { color: var(--is-status-review-text); }
.lab-data-banner p { margin-top: var(--is-space-1); }
.lab-data-banner[data-kind="error"] { border-color: var(--is-status-danger-border); background: var(--is-status-danger-bg); }
.lab-data-banner[data-kind="error"] strong { color: var(--is-status-danger-text); }
.lab-section-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--is-space-3); margin: var(--is-space-7) 0 var(--is-space-4); }
.lab-section-heading h2 { font-size: var(--is-fs-body); font-weight: var(--is-fw-semibold); color: var(--is-text-heading); margin-bottom: var(--is-space-1); }
.lab-section-heading p, .lab-refresh-state, .lab-muted { font-size: var(--is-fs-small); color: var(--is-text-muted); }
.lab-refresh-state { font-family: var(--is-font-brand); font-size: var(--is-fs-micro); }
.lab-twin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--is-space-5); }
.lab-twin-card { position: relative; min-width: 0; border: 1px solid var(--is-line-strong); border-radius: var(--is-radius-card); background: var(--is-bg-surface); overflow: hidden; transition: border-color var(--is-dur-hover), box-shadow var(--is-dur-hover), transform var(--is-dur-hover); }
.lab-twin-card:has(a[data-lab-twin-link]):hover { border-color: var(--is-accent); box-shadow: var(--is-shadow-card); transform: translateY(-2px); }
.lab-twin-card:focus-within { outline: 2px solid var(--is-accent); outline-offset: 3px; }
.lab-twin-thumbnail { position: relative; aspect-ratio: 16 / 9; background: var(--is-bg-soft); border-bottom: 1px solid var(--is-line); isolation: isolate; }
.lab-twin-thumbnail svg { display: block; width: 100%; height: 100%; }
.lab-twin-thumbnail .lab-pill { position: absolute; z-index: 1; inset: var(--is-space-3) auto auto var(--is-space-3); }
.lab-pill { display: inline-flex; align-items: center; gap: var(--is-space-1); padding: var(--is-space-1) var(--is-space-2); border-radius: var(--is-radius-pill); background: var(--is-bg-surface); color: var(--is-text-2); font-size: var(--is-fs-micro); font-weight: var(--is-fw-semibold); border: 1px solid var(--is-line); line-height: var(--is-lh-micro); }
.lab-pill--live { background: var(--is-accent-soft); color: var(--is-accent-text); border-color: var(--is-accent-ring); }
.lab-pill--live::before { content: ''; width: 5px; height: 5px; border-radius: var(--is-radius-pill); background: currentColor; }
.lab-pill--stale, .lab-pill--cached { background: var(--is-status-review-bg); color: var(--is-status-review-text); border-color: var(--is-status-review-border); }
.lab-pill--offline { background: var(--is-status-danger-bg); color: var(--is-status-danger-text); border-color: var(--is-status-danger-border); }
.lab-twin-body { display: flex; flex-direction: column; gap: var(--is-space-3); padding: var(--is-space-5); }
.lab-twin-kind { color: var(--is-accent-text); font: var(--is-fs-micro)/var(--is-lh-micro) var(--is-font-brand); letter-spacing: var(--is-ls-label); text-transform: uppercase; }
.lab-twin-body h3 { color: var(--is-text-heading); font-size: var(--is-fs-title); line-height: var(--is-lh-title); }
.lab-twin-body h3 a { color: inherit; text-decoration: none; }
.lab-twin-body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lab-twin-description { color: var(--is-text-muted); font-size: var(--is-fs-small); line-height: 1.65; min-height: 3.3em; }
.lab-twin-project { display: flex; align-items: center; gap: var(--is-space-2); color: var(--is-text-muted); font-size: var(--is-fs-micro); min-width: 0; }
.lab-twin-project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-twin-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--is-space-2); margin: var(--is-space-2) 0 0; padding-top: var(--is-space-4); border-top: 1px solid var(--is-line); }
.lab-twin-metrics div { display: flex; flex-direction: column-reverse; gap: var(--is-space-1); min-width: 0; }
.lab-twin-metrics dt { color: var(--is-text-muted); font-size: var(--is-fs-micro); }
.lab-twin-metrics dd { font: var(--is-fw-semibold) 1.2rem/1.5 var(--is-font-brand); color: var(--is-text-heading); font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.lab-twin-metrics dd.has-alarms { color: var(--is-status-danger-text); }
.lab-twin-metrics dd small { font: var(--is-fs-micro)/1 var(--is-font-ui); color: var(--is-text-muted); margin-inline-start: var(--is-space-1); }
.lab-twin-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--is-space-2); border-top: 1px solid var(--is-line); padding: var(--is-space-3) var(--is-space-5); color: var(--is-text-muted); font-size: var(--is-fs-micro); }
.lab-twin-foot a { position: relative; z-index: 2; text-decoration: none; border-radius: var(--is-radius-chip); padding: var(--is-space-1); }
.lab-twin-foot a:hover { background: var(--is-accent-soft); }
.lab-twin-grid.is-offline .lab-twin-metrics, .lab-twin-card[data-state="stale"] .lab-twin-metrics, .lab-twin-card[data-state="offline"] .lab-twin-metrics { opacity: .55; }
.lab-new-twin { display: grid; border: 1px dashed var(--is-line-strong); border-radius: var(--is-radius-card); min-height: 260px; }
.lab-new-twin-link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--is-space-3); width: 100%; padding: var(--is-space-7); text-align: center; text-decoration: none; color: var(--is-text-muted); }
.lab-new-twin-link h3 { font-size: var(--is-fs-body); color: var(--is-text-heading); }
.lab-new-twin-link p { font-size: var(--is-fs-small); max-width: 28ch; line-height: 1.65; }
.lab-new-twin-link > svg { color: var(--is-line-strong); }
a.lab-new-twin-link:hover { border-radius: inherit; background: var(--is-accent-soft); color: var(--is-accent-text); }
.lab-link-label { color: var(--is-accent-text); font-size: var(--is-fs-small); }
.lab-empty { display: flex; align-items: center; gap: var(--is-space-5); border: 1px solid var(--is-line); border-radius: var(--is-radius-card); background: var(--is-bg-surface); padding: var(--is-space-7); margin-block: var(--is-space-5); }
.lab-empty img { flex-shrink: 0; object-fit: contain; }
.lab-empty h3 { font-size: var(--is-fs-title); color: var(--is-text-heading); margin-bottom: var(--is-space-2); }
.lab-empty p { max-width: 65ch; color: var(--is-text-muted); }
.lab-footer { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--is-space-3); border-top: 1px solid var(--is-line); padding: var(--is-space-5) var(--is-space-7); background: var(--is-bg-side); color: var(--is-text-muted); font-size: var(--is-fs-small); }
.lab-footer > span { font: var(--is-fs-micro)/var(--is-lh-micro) var(--is-font-brand); letter-spacing: var(--is-ls-brand); color: var(--is-text-heading); }
.lab-footer a { text-decoration: none; border-radius: var(--is-radius-chip); padding: var(--is-space-2); }
.lab-footer a:hover { background: var(--is-accent-soft); }
.lab-skeleton .lab-twin-thumbnail, .lab-skeleton .lab-twin-body > span, .lab-skeleton .lab-twin-body > div, .lab-skeleton-number { background: var(--is-bg-soft-2); animation: lab-loading 1.8s ease-in-out infinite alternate; }
.lab-skeleton .lab-twin-body > span { display: block; height: 14px; border-radius: var(--is-radius-chip); width: 90%; }
.lab-skeleton .lab-twin-body > span:first-child { width: 45%; height: 10px; }
.lab-skeleton .lab-twin-body > span:nth-child(2) { width: 70%; height: 24px; margin-block: var(--is-space-2); }
.lab-skeleton .lab-twin-body > div { height: 45px; border-radius: var(--is-radius-chip); margin-top: var(--is-space-3); }
.lab-skeleton-number { display: block; width: 1.5em; border-radius: var(--is-radius-chip); color: transparent; }
@keyframes lab-loading { to { opacity: .45; } }
@media (min-width: 1400px) { .lab-home { padding-top: var(--is-space-10); } }
@media (max-width: 1050px) { .lab-twin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-home-heading { gap: var(--is-space-6); } .lab-summary { flex-basis: 320px; } }
@media (max-width: 850px) { .lab-home-heading { display: grid; } .lab-home-intro { flex-basis: auto; } .lab-summary { max-width: 460px; } .lab-home { padding: var(--is-space-7) var(--is-space-5) var(--is-space-9); } .lab-topbar { gap: var(--is-space-3); padding-inline: var(--is-space-4); } .lab-back span { display: none; } }
@media (max-width: 650px) {
    .lab-shell { grid-template-columns: minmax(0, 1fr); }
    .lab-shell:not(.lab-shell--home) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .lab-topbar { gap: var(--is-space-2); flex-wrap: wrap; padding: var(--is-space-2) var(--is-space-3); }
    .lab-brand img { width: 96px; height: 48px; }
    .lab-breadcrumb { font-size: var(--is-fs-micro); flex: 1; }
    .lab-topbar-actions { gap: var(--is-space-1); }
    .lab-theme-toggle { padding-inline: var(--is-space-2); font-size: var(--is-fs-micro); }
    .lab-back { display: none; }
    .lab-topbar-actions .is-btn-secondary { padding-inline: var(--is-space-2); }
    .lab-user { width: 32px; height: 32px; font-size: var(--is-fs-micro); }
    .lab-home-intro h1 { font-size: var(--is-fs-h1); line-height: 1.2; }
    .lab-desktop-break { display: none; }
    .lab-twin-grid { grid-template-columns: minmax(0, 1fr); }
    .lab-summary { width: 100%; max-width: none; gap: var(--is-space-2); }
    .lab-summary > div { padding: var(--is-space-3); }
    .lab-summary dt { font-size: var(--is-fs-micro); }
    .lab-summary dd { font-size: var(--is-fs-h2); }
    .lab-section-heading { margin-top: var(--is-space-6); }
    .lab-refresh-state { width: 100%; }
    .lab-data-banner { align-items: flex-start; flex-wrap: wrap; }
    .lab-empty { flex-direction: column; text-align: center; padding: var(--is-space-6); }
    .lab-rail { display: none; }
    .lab-mode { margin-inline-start: 0; order: 5; width: 100%; justify-content: center; }
    .lab-mode + .lab-topbar-actions { margin-inline-start: auto; }
    .lab-bottom-tabs { position: fixed; z-index: 35; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: var(--is-space-1) var(--is-space-2) calc(var(--is-space-1) + env(safe-area-inset-bottom)); background: var(--is-bg-surface); border-top: 1px solid var(--is-line); }
    .lab-bottom-tabs .lab-rail-item { min-height: 55px; }
    .lab-more-menu:not([hidden]) { display: grid; position: fixed; z-index: 36; left: var(--is-space-3); right: var(--is-space-3); bottom: calc(80px + env(safe-area-inset-bottom)); padding: var(--is-space-4); gap: var(--is-space-3); border: 1px solid var(--is-line-strong); border-radius: var(--is-radius-modal); background: var(--is-bg-surface); box-shadow: var(--is-shadow-float); }
    .lab-more-menu > div { display: flex; align-items: center; justify-content: space-between; }
    .lab-footer { padding: var(--is-space-5); }
    .lab-footer > p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lab-skeleton *, .lab-skeleton-number { animation: none !important; } .lab-twin-card { transition: none; } .lab-twin-card:has(a[data-lab-twin-link]):hover { transform: none; } }

.lab-home[data-offline="true"] .lab-summary dd { opacity: .55; }

/* Katalog prototipe: navigasi jenis dan pencarian memakai token tema situs. */
.lab-catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--is-space-4); flex-wrap:wrap; margin-block:var(--is-space-5) var(--is-space-3); }
.lab-filters { display:flex; flex-wrap:wrap; gap:var(--is-space-2); }
.lab-filters button { font:inherit; font-size:var(--is-fs-small); border:1px solid var(--is-line-strong); border-radius:var(--is-radius-chip); padding:var(--is-space-2) var(--is-space-4); background:var(--is-bg-surface); color:var(--is-text-2); cursor:pointer; }
.lab-filters button:hover, .lab-filters button[aria-pressed="true"] { background:var(--is-accent); color:var(--is-on-accent); border-color:var(--is-accent); }
.lab-filters button:focus-visible, .lab-search:focus-within { outline:2px solid var(--is-accent); outline-offset:3px; }
.lab-search { display:flex; align-items:center; gap:var(--is-space-2); background:var(--is-bg-surface); border:1px solid var(--is-line-strong); border-radius:var(--is-radius-control); padding:var(--is-space-2) var(--is-space-3); max-width:100%; }
.lab-search input { background:transparent; border:0; color:var(--is-text-heading); font:inherit; font-size:var(--is-fs-small); width:230px; min-width:0; outline:none; }
.lab-result-count { color:var(--is-text-muted); font-size:var(--is-fs-small); margin-bottom:var(--is-space-4); }
.lab-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lab-pill--development { background:var(--is-bg-surface); color:var(--is-text-2); border:1px solid var(--is-line-strong); }
.lab-pill--ready { background:var(--is-accent-soft); color:var(--is-accent-text); }
.lab-pill--archived { background:var(--is-bg-soft); color:var(--is-text-muted); }
.lab-prototype-tags { display:flex; flex-wrap:wrap; gap:var(--is-space-2); margin-top:auto; }
.lab-prototype-tags span { padding:var(--is-space-1) var(--is-space-2); border-radius:var(--is-radius-chip); background:var(--is-bg-soft); color:var(--is-text-2); font-size:var(--is-fs-micro); }
.lab-device-status, .lab-demo-unavailable { font-size:var(--is-fs-micro); }
.lab-open-prototype { align-self:flex-start; position:relative; z-index:2; border-radius:var(--is-radius-chip); padding:var(--is-space-2) var(--is-space-3); border:1px solid var(--is-line-strong); color:var(--is-accent-text); text-decoration:none; }
.lab-open-prototype:hover { background:var(--is-accent-soft); text-decoration:none; }
.lab-twin-grid { align-items:stretch; }
.lab-twin-card { display:flex; flex-direction:column; }
.lab-twin-body { flex:1; }
.lab-twin-kind { margin:0; }
@media(max-width:560px) { .lab-search { width:100%; } .lab-search input { width:100%; } .lab-filters button { padding-inline:var(--is-space-3); } }

.lab-history { width: min(46rem, calc(100% - 2rem)); max-height: 90vh; overflow: auto; box-sizing: border-box; padding: var(--is-space-5); background: var(--is-bg-surface); color: var(--is-text-heading); border: 1px solid var(--is-line-strong); border-radius: var(--is-radius-card); }
.lab-history::backdrop { background: rgb(0 0 0 / 55%); }
.lab-history > header { display: flex; align-items: start; justify-content: space-between; gap: var(--is-space-4); }
.lab-history h2 { margin: var(--is-space-2) 0; }
.lab-history svg { display: block; width: 100%; margin-block: var(--is-space-4); }
.lab-history svg text { fill: var(--is-text-muted); font-size: 12px; }
.lab-history svg circle { fill: var(--is-accent); }
.lab-history-gridline { stroke: var(--is-line-strong); }
.lab-history-line { fill: none; stroke: var(--is-accent); stroke-width: 2; }
.lab-twin-body button.lab-open-prototype { background: var(--is-bg-surface); cursor: pointer; font: inherit; }
.lab-twin-body button.lab-open-prototype:hover { background: var(--is-accent-soft); }