/* =====================================================================
 * REMARK
 * Tujuan       : Pustaka CSS DevLib: SATU-SATUNYA tempat nilai warna / ukuran (token di :root) dan gaya semua objek x-dl::*;
 *                ubah token atau objek induk = semua komponen dan semua layar turunan ikut. Semua class berawalan dl-.
 * Sumber hulu  : Mockup user (login.html, main_menu_v2.html) dan keputusan user per objek.
 * Input        : -
 * Output       : Kelas dl-* dan token --dl-*. ATURAN TEKS (user 2026-10-13): teks HITAM (di atas latar terang) atau TERANG
 *                (di atas latar gelap), tanpa abu-abu; abu-abu HANYA --dl-disabled; read-only dibedakan lewat latar.
 *                Sheet: judul kolom, nomor baris, sel baca-saja = token --dl-sheet-head / --dl-sheet-ro (satu tempat, semua layar).
 * Dipakai oleh : Semua layar v2 (devlib.test dan situs proyek pemakai) lewat _devlib/devlib.css.
 * Status       : Aktif.
 * ===================================================================== */
:root{
  /* warna */
  --dl-navy:#1f2742; --dl-navy-2:#2c3860;
  --dl-side:#1f2742; --dl-side-2:#27314f; --dl-side-hover:#2d3860; --dl-topbar:#141b30;
  --dl-side-ink:#ffffff; --dl-side-muted:#dbe1f5; --dl-side-scroll:#39456e;
  --dl-accent:#2f6fed; --dl-accent-2:#255bd4; --dl-accent-soft:#e7effe; --dl-accent-ring:rgba(47,111,237,.12);
  --dl-bg:#eef1f6; --dl-tabbar:#e6e8f2; --dl-tab:#d3d7e8; --dl-tab-hover:#dde0ee; --dl-tab-ink:#1f2742;
  --dl-border:#e3e7f0; --dl-border-hover:#cdd4e4; --dl-grip:#aeb6ce;
  --dl-ink:#111827; --dl-ink-strong:#0b1020; --dl-muted:#1f2937; --dl-disabled:#9aa3bd;
  --dl-surface:#fff; --dl-surface-alt:#fafbfd; --dl-hover:#f2f5fb; --dl-field-ro:#f2f4f8; --dl-chip:#eef1f6;
  /* sheet (grid sel): judul kolom + nomor baris, dan sel baca-saja dibedakan lewat LATAR; teks tetap hitam */
  --dl-sheet-head:#e6ebf5; --dl-sheet-ro:#dde3f0;
  --dl-danger:#d0453f; --dl-danger-soft:#fdeceb; --dl-danger-line:#f6cfcd; --dl-badge:#e5484d;
  --dl-violet:#7a52d0; --dl-violet-soft:#faf7ff; --dl-violet-line:#d7c3ff; --dl-violet-ink:#6b4bb0; --dl-violet-msg:#f4f1fb;
  --dl-amber:#b6852a; --dl-amber-2:#e5a324; --dl-green:#22b07d; --dl-orange:#d85a30; --dl-pink:#d4537e; --dl-lime:#639922;
  --dl-tangerine:#ef7d1a; --dl-yellow:#e9c21c; --dl-teal:#1d4f4a;
  --dl-toast:#2f3a5e; --dl-overlay:rgba(20,27,48,.45); --dl-overlay-soft:rgba(20,27,48,.4);
  --dl-logo:conic-gradient(from 200deg,#ff5f6d,#ffc371,#2f6fed,#8a5cf6,#ff5f6d);
  /* persegi dokumen Grid Transactional (.dl-doctag): 8 pasangan gradasi pilihan user 2026-10-02, tanpa kuning / hijau zaitun */
 --dl-doc-2a:#3f62d6; --dl-doc-4a:#17a59c;

  /* form (mockup UIUX_components_part1) */
  --dl-f-ink:#111827; --dl-f-label:#111827; --dl-f-muted:#1f2937;
  /* garis, badge huruf & latar read-only field DICAMPUR dari warna tema (FORM_UI_STANDARD 1b) */
  --dl-f-line:color-mix(in srgb, var(--dl-accent) 22%, #d1d5db); --dl-f-badge:color-mix(in srgb, var(--dl-accent) 14%, #fff);
  --dl-f-badge-ink:color-mix(in srgb, var(--dl-accent) 70%, #1f2937); --dl-f-ro:color-mix(in srgb, var(--dl-accent) 4%, #fff); --dl-f-line-soft:#e5e7eb; --dl-f-bg-soft:#f3f4f6;
  --dl-success:#059669; --dl-info-soft:#eff6ff; --dl-info-line:#bfdbfe; --dl-star:#f59e0b; --dl-device-bg:#0f172a; --dl-device-bar:#1e293b;
  /* ukuran & bentuk */  --dl-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dl-radius-sm:6px; --dl-radius:8px; --dl-radius-md:9px; --dl-radius-lg:12px; --dl-radius-xl:16px;
  --dl-side-w:262px; --dl-tab-h:44px;
 --dl-shadow-pop:0 16px 44px rgba(15,22,45,.24); --dl-shadow-modal:0 20px 60px rgba(15,22,45,.3);
  /* ---- teks di atas latar gelap, alat developer, dll ---- */
  --dl-white:#fff; --dl-on-dark:#f1f4ff; --dl-on-dark-muted:#e4e9f8; --dl-on-dark-link:#8fb3ff; --dl-on-dark-warn:#ffe2a8; --dl-net-bad:#ffb4c0; --dl-net-warn:#ffe08a; --dl-net-warn-ink:#8a5a00;
  --dl-dev-bg:#1b1330; --dl-dev-ink:#efe9ff; --dl-code-bg:#e2e8f0; --dl-code-dark:#0f172a;
  --dl-device-btn:#334155; --dl-device-line:#475569; --dl-avatar-bg:#dce1ee; --dl-avatar-ink:#6b7596; --dl-switch-off:#cfd6e6;
  --dl-accent-soft-2:#e0eaff; --dl-border-soft:#f1f3f9; --dl-surface-muted:#f0f2f7;
  /* ---- huruf: ubah --dl-font-scale = semua ukuran huruf ikut (1 = ukuran mockup) ---- */
  --dl-font-scale:1; --dl-font-mono:ui-monospace,Consolas,monospace;
  /* ---- density: jarak baris & isi (compact | normal | comfortable) ---- */
  --dl-density:1;
  /* ---- skala huruf & jarak bernama (untuk komponen baru) ---- */
  --dl-text-2xs:10px; --dl-text-xs:11px; --dl-text-sm:12px; --dl-text-md:13px; --dl-text-base:14px; --dl-text-lg:16px; --dl-text-xl:18px; --dl-text-2xl:24px; --dl-text-3xl:30px;
  --dl-space-1:2px; --dl-space-2:4px; --dl-space-3:6px; --dl-space-4:8px; --dl-space-5:12px; --dl-space-6:16px; --dl-space-7:24px; --dl-space-8:32px;
  /* ---- breakpoint (dokumentasi; media query CSS tidak bisa membaca variabel) ---- */
  --dl-bp-phone:760px; --dl-bp-tablet:1024px; --dl-bp-laptop:1440px;
}
/* Semua elemen komponen DevLib dihitung border-box (padding tidak menambah lebar/tinggi). */
:where([class*="dl-"]),:where([class*="dl-"]) *,:where([class*="dl-"]) *::before,:where([class*="dl-"]) *::after{box-sizing:border-box}
[data-dl-density="compact"]{--dl-density:.7}
[data-dl-density="comfortable"]{--dl-density:1.35}
body.dl-body{margin:0;font-family:var(--dl-font);background:var(--dl-bg);color:var(--dl-ink);height:100vh;overflow:hidden}
body.dl-body:has(> .dl-print){overflow-y:auto}
.dl-logo-badge{width:42px;height:42px;border-radius:12px;background:var(--dl-logo);flex-shrink:0;display:inline-block}
.dl-logo-badge--sm{width:34px;height:34px;border-radius:9px}

/* ================= PRIMITIVE ================= */
/* Atribut hidden selalu menang atas display komponen (tombol/flex yang disembunyikan lewat JS). */
[hidden]{display:none!important}
/* Kontrol mati (form terkunci / lihat-saja) terlihat jelas mati. */
.dl-btn:disabled,.dl-iconbtn:disabled,.dl-dd__btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.dl-input:disabled,.dl-lines__in:disabled,input.dl-input[readonly]:disabled{background:var(--dl-surface-alt);color:var(--dl-disabled)}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--dl-radius-md);font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s}
.dl-btn--sm{padding:5px 10px;font-size:calc(12px * var(--dl-font-scale));border-radius:var(--dl-radius-sm)}
.dl-btn--md{padding:7px 12px;font-size:calc(12.5px * var(--dl-font-scale));border-radius:var(--dl-radius-sm)}
.dl-btn--lg{padding:13px;font-size:calc(15px * var(--dl-font-scale))}
.dl-btn--block{width:100%}
.dl-btn--primary{background:var(--dl-accent);color:var(--dl-white)}.dl-btn--primary:hover{background:var(--dl-accent-2)}
.dl-btn--secondary{background:var(--dl-chip);color:var(--dl-ink)}.dl-btn--secondary:hover{background:var(--dl-border)}
.dl-btn--success{background:var(--dl-success);color:var(--dl-white)}.dl-btn--success:hover{filter:brightness(1.08)}
.dl-btn--danger{background:var(--dl-danger);color:var(--dl-white)}.dl-btn--danger:hover{filter:brightness(1.08)}
.dl-btn--ghost{background:transparent;color:var(--dl-ink)}.dl-btn--ghost:hover{background:var(--dl-hover)}
.dl-btn--plain{background:var(--dl-surface);color:var(--dl-ink-strong);box-shadow:inset 0 0 0 1px var(--dl-border)}.dl-btn--plain:hover{background:var(--dl-surface-alt)}
.dl-btn--link{background:none;border:none;padding:0;color:var(--dl-accent);font-weight:600;font-size:calc(13px * var(--dl-font-scale))}.dl-btn--link:hover{text-decoration:underline}
.dl-alert{display:none;border:1px solid;border-radius:var(--dl-radius);padding:10px 12px;font-size:calc(13px * var(--dl-font-scale));margin-bottom:16px}
.dl-alert.is-show{display:block}
.dl-alert--danger{background:var(--dl-danger-soft);color:var(--dl-ink);border-color:var(--dl-danger-line)}
.dl-alert--info{background:var(--dl-info-soft);color:var(--dl-ink);border-color:var(--dl-info-line)}
.dl-alert--warn{background:color-mix(in srgb,var(--dl-amber) 12%,var(--dl-surface));color:var(--dl-ink);border-color:color-mix(in srgb,var(--dl-amber) 45%,var(--dl-surface))}
.dl-alert--success{background:color-mix(in srgb,var(--dl-success) 12%,var(--dl-surface));color:var(--dl-ink);border-color:color-mix(in srgb,var(--dl-success) 40%,var(--dl-surface))}
.dl-alert .dl-btn{margin-left:6px;vertical-align:middle}
.dl-alert__list{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:2px}
.dl-divider{display:flex;align-items:center;gap:10px;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));margin:20px 0}
.dl-divider::before,.dl-divider::after{content:"";flex:1;height:1px;background:var(--dl-border)}
.dl-brand{display:flex;align-items:center;gap:12px}
.dl-brand b{font-size:calc(18px * var(--dl-font-scale));letter-spacing:.4px;display:block;line-height:1.1}
.dl-brand span:not(.dl-logo-badge){font-size:calc(10px * var(--dl-font-scale));letter-spacing:2px;text-transform:uppercase}
.dl-brand--light{color:var(--dl-white)}.dl-brand--light span:not(.dl-logo-badge){color:var(--dl-on-dark-muted)}
.dl-brand--dark{color:var(--dl-ink-strong);margin-bottom:26px}.dl-brand--dark span:not(.dl-logo-badge){color:var(--dl-muted)}
.dl-quote{color:var(--dl-white)}
.dl-quote .qi{font-size:calc(34px * var(--dl-font-scale));color:rgba(255,255,255,.35);font-family:Georgia,serif;line-height:1}
.dl-quote .q{font-size:calc(21px * var(--dl-font-scale));font-style:italic;line-height:1.55;max-width:620px;margin-top:4px}
.dl-quote .a{margin-top:10px;color:var(--dl-on-dark);font-weight:600;font-size:calc(14px * var(--dl-font-scale))}
.dl-quote .a::before{content:"— "}
.dl-langs{display:flex;justify-content:flex-end;gap:7px}
.dl-flag{background:var(--dl-surface);color:var(--dl-ink-strong);border:1.5px solid var(--dl-border);border-radius:var(--dl-radius-md);padding:5px 10px;font-size:calc(16px * var(--dl-font-scale));cursor:pointer;line-height:1}
.dl-flag.is-active{border-color:var(--dl-accent);box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-logo-badge{width:42px;height:42px;border-radius:12px;background:var(--dl-logo);flex-shrink:0;display:inline-block}
.dl-logo-badge--sm{width:34px;height:34px;border-radius:9px}

/* ================= FRAME (layar penuh; dipakai login & dashboard) ================= */
.dl-frame{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;display:flex;font-family:var(--dl-font);color:var(--dl-ink);background:linear-gradient(150deg,var(--dl-navy),var(--dl-navy-2))}
.dl-frame.is-resizing{user-select:none;cursor:col-resize}
.dl-frame__bg{position:absolute;inset:0}
.dl-frame__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.dl-frame__bg img.is-on{opacity:1}
.dl-frame__veil{position:absolute;inset:0;pointer-events:none}
.dl-frame--overlay-dark .dl-frame__veil{background:linear-gradient(180deg,rgba(18,25,46,.55),rgba(18,25,46,.1) 34%,rgba(18,25,46,.8))}
.dl-frame--overlay-light .dl-frame__veil{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15) 40%,rgba(255,255,255,.6))}
.dl-frame--overlay-none .dl-frame__veil{display:none}
/* zona widget (posisi disebut: top-left, top-right, bottom-left, ...) */
.dl-frame__zone{position:absolute;z-index:2;display:flex;flex-direction:column;gap:14px;color:var(--dl-white);max-width:min(620px,70vw);padding:clamp(18px,2.6vw,36px)}
.dl-frame__zone--top-left{top:0;left:0;align-items:flex-start}
.dl-frame__zone--top-center{top:0;left:50%;transform:translateX(-50%);align-items:center;text-align:center}
.dl-frame__zone--top-right{top:0;right:var(--dl-zone-right,0);align-items:flex-end;text-align:right}
.dl-frame__zone--bottom-left{bottom:0;left:0;align-items:flex-start}
.dl-frame__zone--bottom-center{bottom:0;left:50%;transform:translateX(-50%);align-items:center;text-align:center}
.dl-frame__zone--bottom-right{bottom:0;right:var(--dl-zone-right,0);align-items:flex-end;text-align:right}
.dl-frame__zone--middle-left{top:50%;left:0;transform:translateY(-50%)}
.dl-frame__zone--middle-right{top:50%;right:var(--dl-zone-right,0);transform:translateY(-50%);text-align:right}
/* box sisi kanan/kiri: zona di sisi itu bergeser supaya tidak tertutup box */
.dl-frame--box-right{--dl-zone-right:var(--dl-box-w)}
.dl-frame--box-left .dl-frame__zone--top-left,.dl-frame--box-left .dl-frame__zone--bottom-left,.dl-frame--box-left .dl-frame__zone--middle-left{left:var(--dl-box-w)}
/* ---- BOX ---- */
.dl-frame{--dl-box-w:clamp(260px,15vw,40vw)}
.dl-frame__box{position:absolute;z-index:3;display:flex;overflow-y:auto;color:var(--dl-box-ink);background:var(--dl-box-bg)}
.dl-frame__boxin{flex:1;display:flex;flex-direction:column;padding:18px 22px 26px;min-width:0}
.dl-frame__box--light{--dl-box-bg:var(--dl-bg);--dl-box-ink:var(--dl-ink);--dl-box-strong:var(--dl-ink-strong);--dl-box-muted:var(--dl-muted)}
.dl-frame__box--dark{--dl-box-bg:var(--dl-topbar);--dl-box-ink:var(--dl-on-dark);--dl-box-strong:var(--dl-white);--dl-box-muted:var(--dl-on-dark-muted)}
.dl-frame__box--navy{--dl-box-bg:var(--dl-navy);--dl-box-ink:var(--dl-on-dark);--dl-box-strong:var(--dl-white);--dl-box-muted:var(--dl-on-dark-muted)}
.dl-frame__box--accent{--dl-box-bg:var(--dl-accent);--dl-box-ink:var(--dl-on-dark);--dl-box-strong:var(--dl-white);--dl-box-muted:var(--dl-on-dark-muted)}
.dl-frame--box-right .dl-frame__box{top:0;right:0;bottom:0;width:var(--dl-box-w);min-width:260px}
.dl-frame--box-left .dl-frame__box{top:0;left:0;bottom:0;width:var(--dl-box-w);min-width:260px}
.dl-frame--box-top .dl-frame__box{top:0;left:0;right:0;max-height:60vh}
.dl-frame--box-bottom .dl-frame__box{bottom:0;left:0;right:0;max-height:60vh}
.dl-frame--box-top .dl-frame__boxin,.dl-frame--box-bottom .dl-frame__boxin{align-items:center}
.dl-frame--box-center .dl-frame__box{top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,92vw);max-height:92dvh}
.dl-frame--box-full .dl-frame__box{inset:0}
/* gaya box */
.dl-frame--card .dl-frame__box{border-radius:var(--dl-radius-xl);box-shadow:var(--dl-shadow-modal)}
.dl-frame--card.dl-frame--box-right .dl-frame__box,.dl-frame--card.dl-frame--box-left .dl-frame__box{top:4vh;bottom:4vh;margin:0 3vw}
.dl-frame--glass .dl-frame__box{background:color-mix(in srgb,var(--dl-box-bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--dl-shadow-modal)}
.dl-frame--glass.dl-frame--box-center .dl-frame__box{border-radius:var(--dl-radius-xl)}
.dl-frame__grip{position:absolute;top:0;bottom:0;width:8px;background:var(--dl-border);cursor:col-resize;z-index:4}
.dl-frame--box-right .dl-frame__grip{left:0}.dl-frame--box-left .dl-frame__grip{right:0}
.dl-frame__grip:hover{background:var(--dl-border-hover)}
.dl-frame__grip::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:36px;border-radius:3px;background:var(--dl-grip)}
.dl-frame__grip + .dl-frame__boxin{margin-left:8px}
.dl-frame--box-left .dl-frame__grip + .dl-frame__boxin{margin-left:0;margin-right:8px}
/* HP / layar sempit: box selalu penuh layar */
@media (max-width:760px){
  .dl-frame .dl-frame__box{inset:0!important;width:auto!important;max-height:none!important;transform:none!important;margin:0!important;border-radius:0!important}
  .dl-frame__zone,.dl-frame__grip{display:none}
}

/* ---- widget ---- */
.dl-clock .t{font-size:calc(24px * var(--dl-font-scale));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--dl-on-dark)}
.dl-clock__tz{font-size:calc(12px * var(--dl-font-scale));font-weight:700;letter-spacing:1px}
.dl-clock .d{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-on-dark-muted);margin-top:2px;text-transform:capitalize}
.dl-clock--line{display:block}
.dl-clock--line .d{font-size:calc(13px * var(--dl-font-scale));color:inherit;margin:0;opacity:.8;text-transform:none;font-variant-numeric:tabular-nums}
.dl-clock--date .d{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-on-dark);font-weight:600}
.dl-greeting{font-size:clamp(20px,2.2vw,30px);font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.dl-weather{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.15);border-radius:var(--dl-radius-lg);padding:8px 12px;backdrop-filter:blur(6px)}
.dl-weather[hidden]{display:none}
.dl-weather--card{background:var(--dl-navy);border-color:transparent;color:var(--dl-on-dark);backdrop-filter:none}
.dl-weather--chip{display:inline-flex;gap:6px;padding:2px 10px;border-radius:999px;background:var(--dl-navy);border-color:transparent;color:var(--dl-on-dark);backdrop-filter:none}
.dl-weather--chip .dl-weather__icon{font-size:calc(14px * var(--dl-font-scale))}
.dl-weather--chip>div{display:flex;align-items:baseline}
.dl-weather--chip [data-dl-weather-city]{white-space:pre}
.dl-weather--chip .dl-weather__temp,.dl-weather--chip .dl-weather__desc{font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-weather--chip [data-dl-weather-desc]{display:none}
.dl-weather__icon{font-size:calc(28px * var(--dl-font-scale));line-height:1}
.dl-weather__temp{font-size:calc(18px * var(--dl-font-scale));font-weight:700}
.dl-weather__desc{font-size:calc(12px * var(--dl-font-scale))}
.dl-announce{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-left:3px solid var(--dl-amber-2);border-radius:var(--dl-radius);padding:8px 12px;font-size:calc(13.5px * var(--dl-font-scale));max-width:520px}
.dl-announce i{color:var(--dl-amber-2)}
.dl-brand--auto{color:var(--dl-box-strong,var(--dl-ink-strong));margin-bottom:22px}
.dl-brand--auto span:not(.dl-logo-badge){color:var(--dl-box-muted,var(--dl-muted))}

/* ================= LOGIN BOX (ukuran = login aplikasi) ================= */
.dl-loginbox{flex:1;display:flex;flex-direction:column;width:100%}
.dl-loginbox__top{display:flex;justify-content:flex-end;align-items:center;gap:7px;flex-shrink:0}
.dl-loginbox__form{width:100%;max-width:380px;margin:auto}
.dl-loginbox__title{font-size:calc(24px * var(--dl-font-scale));color:var(--dl-box-strong,var(--dl-ink-strong));font-weight:700;margin:0 0 6px}
.dl-loginbox__sub{color:var(--dl-box-muted,var(--dl-muted));font-size:calc(14px * var(--dl-font-scale));margin:0 0 28px;line-height:1.5}
.dl-loginbox .dl-field--lg .dl-field__label{color:var(--dl-box-ink,var(--dl-ink))}
.dl-loginbox__forgot{display:flex;margin:-2px 0 24px auto;width:max-content;font-size:calc(13.5px * var(--dl-font-scale))}
.dl-loginbox__remember{margin:-6px 0 12px}
.dl-loginbox__remember .dl-choice{color:var(--dl-box-ink);font-size:calc(13px * var(--dl-font-scale))}
.dl-loginbox__reg{text-align:center;font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-box-ink,var(--dl-ink));margin:0}
.dl-loginbox__reg .dl-btn--link{font-weight:700;font-size:inherit}
.dl-loginbox .dl-divider{color:var(--dl-box-muted,var(--dl-muted))}
.dl-frame__box--dark .dl-btn--link,.dl-frame__box--navy .dl-btn--link{color:var(--dl-on-dark-link)}
.dl-frame__box--accent .dl-btn--primary{background:var(--dl-white);color:var(--dl-accent)}
.dl-frame__box--accent .dl-btn--link{color:var(--dl-white);text-decoration:underline}
/* ikon support + popup akun UAT */
.dl-uat{position:relative;margin-right:auto}
.dl-uat__icon{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-accent);cursor:pointer;font-size:calc(14px * var(--dl-font-scale))}
.dl-uat__icon:hover{border-color:var(--dl-accent)}
.dl-uat__panel{display:none;position:absolute;top:42px;left:0;z-index:20;width:290px;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:12px}
.dl-uat.is-open .dl-uat__panel{display:block}
.dl-uat__head{font-size:calc(13px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);margin-bottom:6px}
.dl-uat__note{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);margin:0 0 8px}
.dl-uat code{background:var(--dl-code-bg);padding:1px 6px;border-radius:4px;font:600 11px ui-monospace,Consolas,monospace}
.dl-uat__table{width:100%;border-collapse:collapse;font-size:calc(11.5px * var(--dl-font-scale))}
.dl-uat__table td{padding:4px 0;border-bottom:1px solid var(--dl-border);color:var(--dl-muted)}
.dl-uat__table td:last-child{text-align:right}
.dl-uat__table tr[data-dl-uat-fill]{cursor:pointer}
.dl-uat__table tr[data-dl-uat-fill]:hover td{color:var(--dl-ink)}

/* ================= FIELD (induk semua input) ================= */
.dl-field{position:relative;display:flex;flex-direction:column;min-width:0}
.dl-field__labelrow{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.dl-field__label{font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label)}
.dl-field__req{color:var(--dl-danger);font-weight:700;font-size:calc(12px * var(--dl-font-scale));margin-left:-3px}
.dl-tip{position:relative;display:inline-flex;align-items:center}
.dl-tip__icon{font-size:calc(10.5px * var(--dl-font-scale));width:14px;height:14px;border-radius:50%;background:var(--dl-f-line-soft);color:var(--dl-f-muted);display:flex;align-items:center;justify-content:center;cursor:help;font-weight:bold}
.dl-tip__icon:hover{background:var(--dl-accent);color:var(--dl-white)}
.dl-tip__text{visibility:hidden;opacity:0;width:max-content;max-width:200px;background:var(--dl-f-ink);color:var(--dl-white);text-align:center;border-radius:var(--dl-radius-sm);padding:4px 7px;font-size:calc(11px * var(--dl-font-scale));font-weight:normal;position:absolute;z-index:100;bottom:125%;left:50%;transform:translateX(-50%);box-shadow:0 4px 6px rgba(0,0,0,.15);transition:opacity .2s,visibility .2s;pointer-events:none;line-height:1.2}
.dl-tip:hover .dl-tip__text{visibility:visible;opacity:1}
.dl-field__box{position:relative;display:flex;align-items:center;background:var(--dl-surface);border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);transition:border-color .2s,box-shadow .2s}
.dl-field__box:focus-within{border-color:var(--dl-accent)}
.dl-input{flex:1;min-width:0;width:100%;border:none;outline:none;background:none;padding:calc(5px * var(--dl-density)) 8px;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-f-ink);font-family:inherit}
textarea.dl-input{resize:none;min-height:28px;line-height:1.3;overflow:hidden;display:block}
.dl-input--boxed{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface)}
.dl-input--boxed:focus{border-color:var(--dl-accent)}
.dl-input.has-unit{padding-right:28px}.dl-input.has-spin{padding-right:26px}
.dl-field__icon{color:var(--dl-muted);padding:0 0 0 9px;font-size:calc(12px * var(--dl-font-scale))}
.dl-field__trigger{background:none;border:none;cursor:pointer;color:var(--dl-f-muted);font-size:calc(13px * var(--dl-font-scale));padding:0 8px;display:flex;align-items:center;align-self:stretch;font-family:inherit}
.dl-case{font-size:calc(11px * var(--dl-font-scale));font-weight:700}
.dl-case::before{content:""}
.dl-field--text .dl-case{margin-right:4px;padding:1px 5px;align-self:center;background:var(--dl-f-badge);border:1px solid var(--dl-f-line);border-radius:4px;color:var(--dl-f-badge-ink)}
.dl-field--text:has(textarea) .dl-case{align-self:flex-start;margin-top:5px}
/* toggle "00" isian angka (Decimal, Money): 0 / ,00 / ,0000 / kalkulator */
.dl-numtg{margin-right:4px;padding:1px 5px;min-width:24px;justify-content:center;align-self:center;background:var(--dl-f-badge);border:1px solid var(--dl-f-line);border-radius:4px;color:var(--dl-f-badge-ink);font-size:calc(11px * var(--dl-font-scale));font-weight:700;font-family:var(--dl-font-mono);white-space:nowrap;line-height:1.5}
.dl-field__box.has-numtg .dl-field__unit{position:static;margin-right:6px}.dl-field__box.has-numtg .dl-input.has-unit{padding-right:8px}
.dl-prefix.has-numtg{position:relative}.dl-prefix.has-numtg .dl-numtg{position:absolute;right:1px;top:50%;transform:translateY(-50%)}.dl-prefix.has-numtg .dl-input{padding-right:54px}
.dl-form.is-view .dl-numtg{display:none}
.dl-field__unit{position:absolute;right:10px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-muted);pointer-events:none}
.dl-field__error{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-danger);margin-top:1px;display:none}
.dl-field.is-invalid .dl-field__error:not(:empty){display:block}
.dl-field.is-invalid .dl-field__box,.dl-field.is-invalid .dl-input--boxed{border-color:var(--dl-danger)}
/* Nada isian (class dl-field--tone-danger | dl-field--tone-warn pada field): nilai yang perlu perhatian, mis. tanggal kedaluwarsa */
.dl-field--tone-danger .dl-field__box{border-color:var(--dl-danger);background:var(--dl-danger-soft)}
.dl-field--tone-danger .dl-input{color:var(--dl-danger);font-weight:600}
.dl-field--tone-warn .dl-field__box{border-color:var(--dl-amber);background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface))}
.dl-field--tone-warn .dl-input{color:color-mix(in srgb,var(--dl-amber) 50%,var(--dl-ink-strong));font-weight:600}
.dl-field__hint{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600;margin-top:2px;line-height:1.2;background:var(--dl-info-soft);padding:3px 6px;border-radius:4px;border:1px solid var(--dl-info-line)}
.dl-field__hint:empty{display:none}
/* ukuran besar (mockup login) */
.dl-field--lg{margin-bottom:18px}
.dl-field--lg .dl-field__labelrow{margin-bottom:7px}
.dl-field--lg .dl-field__label{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-field--lg .dl-field__box{border:1.5px solid var(--dl-border);border-radius:var(--dl-radius-md);transition:border-color .15s,box-shadow .15s}
.dl-field--lg .dl-field__box:focus-within{box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-field--lg .dl-field__icon{padding:0 10px 0 14px;font-size:calc(13px * var(--dl-font-scale))}
.dl-field--lg .dl-input{padding:calc(12px * var(--dl-density)) 14px calc(12px * var(--dl-density)) 0;font-size:calc(14.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-field--lg .dl-field__box:not(.has-icon) .dl-input{padding-left:12px}
.dl-field--lg .dl-field__trigger{padding:0 12px;color:var(--dl-muted)}
/* dropdown (select / multi / prefix) */
.dl-dd,.dl-prefix{position:relative}
.dl-dd__btn{width:100%;padding:calc(5px * var(--dl-density)) 8px;font-size:calc(12.5px * var(--dl-font-scale));background:var(--dl-surface);border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--dl-f-label);font-family:inherit;text-align:left}
.dl-dd__btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-dd__panel{position:absolute;top:calc(100% + 4px);left:0;width:100%;background:var(--dl-surface);border:1px solid var(--dl-f-line-soft);border-radius:var(--dl-radius-sm);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);z-index:90;display:none;flex-direction:column;overflow:hidden}
.dl-dd__panel.is-open{display:flex}
.dl-dd__search{padding:6px;background:var(--dl-f-bg-soft);border-bottom:1px solid var(--dl-f-line-soft)}
.dl-dd__search input{width:100%;padding:4px 6px;font-size:calc(12px * var(--dl-font-scale));border:1px solid var(--dl-f-line);border-radius:4px;outline:none;font-family:inherit}
/* 12 baris item terlihat (user 2026-09-26); tinggi baris = 1.5em + padding 12px, dibatasi 60% tinggi layar */
.dl-dd__list{--dl-dd-rows:12;font-size:calc(12px * var(--dl-font-scale));max-height:min(calc(var(--dl-dd-rows) * (1.5em + 12px) + 2px),60vh);overflow-y:auto;display:flex;flex-direction:column}
.dl-dd__item{padding:6px 10px;font-size:calc(12px * var(--dl-font-scale));line-height:1.5;cursor:pointer;color:var(--dl-f-label)}
.dl-dd__item:hover{background:var(--dl-f-bg-soft)}
.dl-dd__group{position:sticky;top:0;padding:5px 10px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dl-accent-2);background:var(--dl-accent-soft);border-top:1px solid var(--dl-border-soft);cursor:default}
.dl-dd__item--split{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl-dd__item input{accent-color:var(--dl-accent);cursor:pointer}
/* Select + tombol Add New (x-dl::field.select :add): tombol persegi di kanan, sejajar tinggi kotak; popup tambah dipindah ke <body> */
.dl-selectadd{display:flex;align-items:stretch;gap:6px}
.dl-selectadd > .dl-dd{flex:1;min-width:0}
.dl-selectadd__btn{flex:none;aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-size:calc(12.5px * var(--dl-font-scale));background:var(--dl-surface);color:var(--dl-accent);border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);cursor:pointer;font-family:inherit}
.dl-selectadd__btn:hover{background:var(--dl-f-bg-soft)}
.dl-selectadd__btn:focus-visible{outline:2px solid var(--dl-accent);outline-offset:1px}
.dl-selectadd__btn:disabled{opacity:.45;cursor:not-allowed}
fieldset:disabled .dl-selectadd__btn,.dl-form.is-view .dl-selectadd__btn{display:none}
[data-dl-sa-modal] .dl-field{margin-top:10px}
[data-dl-sa-modal] .dl-note{margin:0 0 2px}
.dl-selectadd__err{color:var(--dl-danger);font-size:calc(11.5px * var(--dl-font-scale));margin-top:6px}
.dl-selectadd__err:empty{display:none}
.dl-prefix{display:flex}
.dl-prefix__btn{display:flex;align-items:center;gap:4px;padding:0 6px;background:var(--dl-f-bg-soft);border:1px solid var(--dl-f-line);border-right:none;border-radius:var(--dl-radius-sm) 0 0 var(--dl-radius-sm);font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label);cursor:pointer;white-space:nowrap;font-family:inherit}
.dl-input--prefixed{border-radius:0 var(--dl-radius-sm) var(--dl-radius-sm) 0}
.dl-prefix .dl-dd__panel{min-width:220px}
/* pilihan */
.dl-choices{display:flex;gap:8px;align-items:center;min-height:28px;flex-wrap:wrap}
.dl-choice{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-f-label);font-weight:500}
.dl-choice input{accent-color:var(--dl-accent);margin:0}
.dl-switchrow{display:flex;align-items:center;gap:6px;height:28px}
.dl-switch{position:relative;display:inline-block;width:36px;height:18px}
.dl-switch input{opacity:0;width:0;height:0}
.dl-switch__slider{position:absolute;cursor:pointer;inset:0;background:var(--dl-f-line);transition:.3s;border-radius:18px}
.dl-switch__slider::before{position:absolute;content:"";height:12px;width:12px;left:3px;bottom:3px;background:var(--dl-white);transition:.3s;border-radius:50%}
.dl-switch input:checked + .dl-switch__slider{background:var(--dl-accent)}
.dl-switch input:checked + .dl-switch__slider::before{transform:translateX(18px)}
.dl-switchrow__label{font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label)}
.dl-color{display:flex;align-items:center;gap:8px;height:28px}
.dl-color__btn{width:30px;height:26px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);cursor:pointer;background:none;padding:0}
.dl-color__code{font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;font-family:monospace;color:var(--dl-f-label)}
.dl-daterange{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl-otp{display:flex;gap:6px}
.dl-otp__box{width:28px;height:28px;text-align:center;font-size:calc(14px * var(--dl-font-scale));font-weight:700;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);outline:none;font-family:inherit}
.dl-otp__box:focus{border-color:var(--dl-accent)}
.dl-rating{display:flex;align-items:center;gap:2px;height:28px}
.dl-rating__star{font-size:calc(18px * var(--dl-font-scale));color:var(--dl-f-line);cursor:pointer;user-select:none}
.dl-rating__text{margin-left:6px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-muted)}
.dl-spin{position:absolute;right:4px;top:3px;bottom:3px;display:flex;flex-direction:column;width:18px}
.dl-spin button{flex:1;background:var(--dl-f-bg-soft);border:1px solid var(--dl-f-line);color:var(--dl-f-label);font-size:calc(8px * var(--dl-font-scale));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dl-upload{border:2px dashed var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:4px 8px;text-align:center;background:var(--dl-surface-alt);cursor:pointer;position:relative}
.dl-upload.is-drag{border-color:var(--dl-accent);background:var(--dl-info-soft)}
.dl-upload:has(> .dl-upload__input:disabled){opacity:.55;cursor:not-allowed;border-style:solid}
.dl-upload__input{display:none}
.dl-upload__placeholder{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--dl-f-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-upload__icon{font-size:calc(16px * var(--dl-font-scale))}
.dl-upload__file{display:none;align-items:center;gap:6px;background:var(--dl-surface);border:1px solid var(--dl-f-line-soft);border-radius:4px;padding:2px 6px}
.dl-upload.has-file .dl-upload__file{display:flex}.dl-upload.has-file .dl-upload__placeholder{display:none}
.dl-upload__name{flex:1;font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dl-upload__file button{background:none;border:none;cursor:pointer;color:var(--dl-danger)}
/* popover tanggal / jam */
.dl-pick .dl-dd__panel,.dl-pick__panel{position:absolute;top:calc(100% + 4px);left:0;width:260px;background:var(--dl-surface);border:1px solid var(--dl-f-line-soft);border-radius:var(--dl-radius);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);z-index:80;display:none;overflow:hidden}
.dl-pick__panel.is-open{display:block}
.dl-pick__panel--time{width:220px}
.dl-pick__head{padding:6px 8px;background:var(--dl-f-bg-soft);border-bottom:1px solid var(--dl-f-line-soft);font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-pick__nav{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 2px;font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-pick__nav button{background:none;border:1px solid var(--dl-f-line-soft);border-radius:4px;padding:1px 6px;cursor:pointer;font-size:calc(11px * var(--dl-font-scale))}
.dl-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;padding:2px 6px}
.dl-cal--names div{font-size:calc(11px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-muted)}
.dl-cal button{padding:3px 0;font-size:calc(11.5px * var(--dl-font-scale));border:none;background:none;border-radius:4px;cursor:pointer;font-family:inherit}
.dl-cal button:hover{background:var(--dl-f-bg-soft)}
.dl-cal button.is-sel{background:var(--dl-accent);color:var(--dl-white);font-weight:600}
.dl-pick__time{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:10px}
.dl-pick__time label{display:flex;flex-direction:column;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-f-muted);gap:3px}
.dl-pick__time select{padding:3px 6px;border:1px solid var(--dl-f-line);border-radius:4px;font-size:calc(12px * var(--dl-font-scale))}
.dl-pick__foot{display:flex;justify-content:flex-end;gap:6px;padding:6px 8px;border-top:1px solid var(--dl-f-line-soft)}
.dl-pick__foot button{border:none;border-radius:4px;padding:4px 10px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:600;cursor:pointer;font-family:inherit}
.dl-pick__pri{background:var(--dl-accent);color:var(--dl-white)}.dl-pick__sec{background:var(--dl-f-line-soft);color:var(--dl-f-label)}

/* ================= FORM ================= */
.dl-form{display:flex;flex-direction:column;gap:6px;padding:14px 18px;background:var(--dl-surface);font-family:var(--dl-font);color:var(--dl-f-ink);height:100%;overflow-y:auto;margin:0}
.dl-form__head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--dl-f-line-soft);padding-bottom:4px}
.dl-form__title{font-size:calc(16px * var(--dl-font-scale));font-weight:700;color:var(--dl-f-ink)}
.dl-form__body{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:start}
.dl-form__col{display:flex;flex-direction:column;gap:5px;min-width:0}
.dl-form__row{display:grid;grid-template-columns:repeat(var(--dl-cols,2),1fr);gap:8px}
.dl-form__foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:4px;border-top:1px solid var(--dl-f-line-soft)}
.dl-form__foot.is-single{grid-template-columns:1fr}
.dl-form__foot .dl-btn{padding:7px;font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;border-radius:var(--dl-radius-sm)}
.dl-splitbtn{position:relative;display:inline-flex;width:100%;border-radius:var(--dl-radius-md);box-shadow:0 1px 2px rgba(15,23,42,.12)}
.dl-splitbtn__main,.dl-splitbtn__toggle{background:var(--dl-accent);color:var(--dl-white);border:none;cursor:pointer;font-family:inherit;transition:filter .15s,transform .05s}
.dl-splitbtn__main{flex:1;padding:8px 14px;border-radius:var(--dl-radius-md);font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;letter-spacing:.01em;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.dl-splitbtn__main:not(:last-child){border-radius:var(--dl-radius-md) 0 0 var(--dl-radius-md)}
.dl-splitbtn__toggle{padding:0 11px;border-left:1px solid rgba(255,255,255,.28);border-radius:0 var(--dl-radius-md) var(--dl-radius-md) 0;font-size:calc(10px * var(--dl-font-scale));display:inline-flex;align-items:center}
.dl-splitbtn__main:hover,.dl-splitbtn__toggle:hover{filter:brightness(1.08)}
.dl-splitbtn__main:active,.dl-splitbtn__toggle:active{transform:translateY(1px)}
.dl-splitbtn__main:focus-visible,.dl-splitbtn__toggle:focus-visible{outline:2px solid var(--dl-accent-ring);outline-offset:2px}
.dl-splitbtn.is-open .dl-splitbtn__toggle i{transform:rotate(180deg)}
.dl-splitbtn__menu{position:absolute;bottom:calc(100% + 6px);right:0;min-width:100%;padding:4px;background:var(--dl-surface);border:1px solid var(--dl-f-line-soft);border-radius:var(--dl-radius-md);box-shadow:0 10px 24px -6px rgba(15,23,42,.22);display:none;flex-direction:column;z-index:40}
.dl-splitbtn.is-open .dl-splitbtn__menu{display:flex}
.dl-splitbtn__item{padding:7px 10px;border-radius:var(--dl-radius-sm);font-size:calc(12px * var(--dl-font-scale));color:var(--dl-f-label);background:none;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:inherit;white-space:nowrap}
.dl-splitbtn__item span{width:16px;text-align:center;color:var(--dl-accent)}
.dl-splitbtn__item:hover{background:var(--dl-f-bg-soft)}
.dl-device{display:flex;flex-direction:column;height:100vh;background:var(--dl-device-bg)}
.dl-device__bar{height:48px;background:var(--dl-device-bar);border-bottom:1px solid var(--dl-device-btn);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;flex-shrink:0}
.dl-device__title{color:var(--dl-on-dark-muted);font-size:calc(13px * var(--dl-font-scale));font-weight:600;margin-right:8px}
.dl-device__btn{background:var(--dl-device-btn);color:var(--dl-on-dark);border:1px solid var(--dl-device-line);padding:5px 12px;border-radius:var(--dl-radius-sm);font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}
.dl-device__btn:hover{background:var(--dl-device-line);color:var(--dl-white)}
.dl-device__btn.is-active{background:var(--dl-accent);color:var(--dl-white);border-color:var(--dl-accent)}
.dl-device__stage{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.dl-device__view{background:var(--dl-surface);border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.5);transition:width .3s;height:100%;max-height:calc(100vh - 72px);overflow:hidden;display:flex;flex-direction:column}
.dl-device__view.is-laptop{width:100%;max-width:1050px}
.dl-device__view.is-tablet{width:768px}
.dl-device__view.is-mobile{width:390px}
.dl-device__view.is-mobile .dl-form__body{grid-template-columns:1fr}
.dl-device--src .dl-device__stage{overflow:hidden;align-items:center}
.dl-device--src .dl-device__btn small{opacity:.7;font-weight:500}
.dl-device__close{margin-left:auto;text-decoration:none}
.dl-device__dev{flex:none;border-radius:14px;overflow:hidden;background:var(--dl-surface);box-shadow:0 20px 25px -5px rgba(0,0,0,.5);transform-origin:center center;transition:width .25s,height .25s}
.dl-device__frame{display:block;width:100%;height:100%;border:0;background:var(--dl-surface)}
/* x-dl::view-as: pil melayang di samping tombol kode; menu perangkat membuka ke atas. */
.dl-viewas{position:fixed;right:60px;bottom:14px;z-index:190}
.dl-viewas__btn{list-style:none;width:38px;height:38px;border-radius:50%;background:var(--dl-dev-bg);color:var(--dl-dev-ink);box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(14px * var(--dl-font-scale))}
.dl-viewas__btn::-webkit-details-marker{display:none}
.dl-viewas__menu{position:absolute;right:0;bottom:46px;min-width:230px;padding:6px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:0 12px 30px var(--dl-overlay-soft);display:flex;flex-direction:column}
.dl-viewas__t{padding:6px 10px 4px;font-size:calc(11px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted)}
.dl-viewas__menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--dl-radius-sm);color:var(--dl-ink);text-decoration:none;font-size:calc(13px * var(--dl-font-scale))}
.dl-viewas__menu a:hover{background:var(--dl-hover)}
.dl-viewas__menu a i{width:18px;text-align:center;color:var(--dl-accent)}
.dl-viewas__menu a small{margin-left:auto;color:var(--dl-muted)}
@media(max-width:700px){.dl-form__body{grid-template-columns:1fr}}

/* ================= SHELL ================= */
.dl-shell{display:flex;height:100vh;font-family:var(--dl-font);color:var(--dl-ink);background:var(--dl-bg);overflow:hidden}
.dl-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.dl-tabbar{height:var(--dl-tab-h);background:var(--dl-tabbar);display:flex;align-items:flex-end;gap:2px;padding:0 8px;flex-shrink:0;overflow-x:auto}
.dl-tabbar::-webkit-scrollbar{height:0}
.dl-tabbar:empty::before{content:"Belum ada menu terbuka";color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale));align-self:center;padding:0 8px}
.dl-tab{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 13px;background:var(--dl-tab);color:var(--dl-tab-ink);border-radius:9px 9px 0 0;cursor:pointer;font-size:calc(13px * var(--dl-font-scale));white-space:nowrap;max-width:230px}
.dl-tab:hover{background:var(--dl-tab-hover)}
.dl-tab.is-active{background:var(--dl-surface);color:var(--dl-ink-strong);font-weight:600;box-shadow:0 -2px 0 var(--dl-accent) inset}
.dl-tab .tlbl{overflow:hidden;text-overflow:ellipsis}
.dl-tab .tx{border:none;background:none;color:inherit;cursor:pointer;font-size:calc(15px * var(--dl-font-scale));line-height:1;opacity:.6;padding:0 2px;border-radius:4px}
.dl-tab .tx:hover{opacity:1;background:rgba(0,0,0,.08)}
.dl-content{flex:1;position:relative;overflow:hidden;background:var(--dl-bg)}
.dl-pane{position:absolute;inset:0;overflow:auto;padding:22px;display:none}
.dl-pane.is-active{display:block}
.dl-pane.is-framed{padding:0}
.dl-pane iframe{width:100%;height:100%;border:none;background:var(--dl-surface);display:block}
.dl-home{max-width:760px;margin:6vh auto 0;text-align:center}
.dl-home__hero{width:70px;height:70px;border-radius:18px;background:var(--dl-logo);margin:0 auto 20px}
.dl-home h1{font-size:calc(26px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:0 0 10px}
.dl-home p{color:var(--dl-muted);font-size:calc(15px * var(--dl-font-scale));line-height:1.6;margin:0}
.dl-home__hint{margin-top:18px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-home kbd,.dl-pal kbd{background:var(--dl-code-bg);border-radius:5px;padding:2px 7px;font-family:inherit}
.dl-pal-ov{position:fixed;inset:0;background:var(--dl-overlay);display:none;justify-content:center;align-items:flex-start;padding-top:12vh;z-index:120}
.dl-pal-ov.is-open{display:flex}
.dl-pal{width:100%;max-width:580px;background:var(--dl-surface);border-radius:var(--dl-radius-xl);box-shadow:0 30px 80px rgba(10,18,45,.4);overflow:hidden}
.dl-pal__in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--dl-border)}
.dl-pal__in input{flex:1;border:none;outline:none;font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong);font-family:inherit}
.dl-pal__x{flex:none;width:30px;height:30px;display:grid;place-items:center;border:none;background:none;border-radius:var(--dl-radius-sm);color:var(--dl-muted);cursor:pointer;font-size:calc(18px * var(--dl-font-scale))}
.dl-pal__x:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-pal__x:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-pal__list{max-height:330px;overflow-y:auto;padding:8px}
.dl-pal__row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.dl-pal__row.is-sel,.dl-pal__row:hover{background:var(--dl-hover)}
.dl-pal__row .nm{font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong)}.dl-pal__row .mm{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-pal__row .lic{width:18px;text-align:center}
.dl-pal__empty{padding:24px;text-align:center;color:var(--dl-muted);font-size:calc(14px * var(--dl-font-scale))}
.dl-pal__foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--dl-border);font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);background:var(--dl-surface-alt)}
.dl-backdrop{position:fixed;inset:0;background:var(--dl-overlay-soft);opacity:0;pointer-events:none;transition:opacity .2s;z-index:110}
.dl-backdrop.is-on{opacity:1;pointer-events:auto}
.dl-drawer{position:fixed;top:0;right:0;height:100vh;width:390px;max-width:92vw;background:var(--dl-surface);box-shadow:-12px 0 40px rgba(15,22,45,.2);transform:translateX(100%);transition:transform .22s,visibility .22s;visibility:hidden;z-index:115;display:flex;flex-direction:column}
.dl-drawer.is-on{transform:none;visibility:visible}
.dl-drawer[data-dl-drawer="chat"],.dl-drawer[data-dl-drawer="ai"]{width:min(520px,92vw)}
/* ===== Side Screen (user 2026-10-04): jendela LAYAR PENUH; .is-float = jendela mengambang ala OS Windows (seret kepala, tarik tepi / sudut). ===== */
.dl-ss{position:fixed;inset:0;z-index:120;background:var(--dl-surface);display:none;grid-template-rows:52px 1fr;box-shadow:-12px 0 40px rgba(15,22,45,.22);overflow:hidden;font-family:var(--dl-font)}
.dl-ss.is-on{display:grid}
.dl-ss.is-float{inset:auto;border-radius:14px;border:1px solid var(--dl-border);box-shadow:0 30px 80px rgba(15,22,45,.35)}
.dl-ss.is-moving,.dl-ss.is-resizing{user-select:none}
.dl-ss.is-float .dl-ss__head{cursor:move}
.dl-ss__head{display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;border-bottom:1px solid var(--dl-border);background:var(--dl-surface);min-width:0}
.dl-ss__ico{width:32px;height:32px;border-radius:9px;background:var(--dl-accent-soft);color:var(--dl-accent);display:grid;place-items:center;font-size:15px;flex:none}
.dl-ss__titles{min-width:0}
.dl-ss__title{font-weight:800;color:var(--dl-ink-strong);font-size:calc(15px * var(--dl-font-scale));line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ss__sub{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ss__search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--dl-border);border-radius:20px;padding:5px 12px;width:300px;max-width:34%;color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale));background:var(--dl-surface-alt)}
.dl-ss__search:focus-within{border-color:var(--dl-accent);box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-ss__search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;color:var(--dl-ink)}
.dl-ss__search kbd{font:600 10px/1 var(--dl-font);border:1px solid var(--dl-border);border-radius:4px;padding:3px 5px;color:var(--dl-muted)}
.dl-ss__esc{font-size:10.5px;color:var(--dl-muted)}
.dl-ss__win{display:flex;align-items:center;gap:4px;margin-left:2px;flex:none}
.dl-ss__btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--dl-border);background:var(--dl-surface);display:grid;place-items:center;color:var(--dl-muted);font-size:15px;cursor:pointer;font-family:inherit}
.dl-ss__btn:hover{color:var(--dl-ink-strong);background:var(--dl-hover)}
.dl-ss__body{min-height:0;position:relative;display:flex;flex-direction:column;background:var(--dl-bg)}
.dl-ss__frame{flex:1;min-height:0;width:100%;border:0;background:var(--dl-bg)}
.dl-ss.is-shield .dl-ss__body::after{content:"";position:absolute;inset:0}
.dl-ss__rs{position:absolute;display:none;z-index:2}
.dl-ss.is-float .dl-ss__rs{display:block}
.dl-ss__rs--n,.dl-ss__rs--s{left:10px;right:10px;height:6px;cursor:ns-resize}.dl-ss__rs--n{top:-3px}.dl-ss__rs--s{bottom:-3px}
.dl-ss__rs--e,.dl-ss__rs--w{top:10px;bottom:10px;width:6px;cursor:ew-resize}.dl-ss__rs--e{right:-3px}.dl-ss__rs--w{left:-3px}
.dl-ss__rs--ne,.dl-ss__rs--nw,.dl-ss__rs--se,.dl-ss__rs--sw{width:14px;height:14px}
.dl-ss__rs--ne{top:-4px;right:-4px;cursor:nesw-resize}.dl-ss__rs--sw{bottom:-4px;left:-4px;cursor:nesw-resize}
.dl-ss__rs--nw{top:-4px;left:-4px;cursor:nwse-resize}.dl-ss__rs--se{bottom:-4px;right:-4px;cursor:nwse-resize}
.dl-ss.is-float .dl-ss__rs--se::after{content:"";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid var(--dl-disabled);border-bottom:2px solid var(--dl-disabled);opacity:.6}
.dl-ss__size{position:absolute;right:12px;bottom:12px;z-index:3;background:var(--dl-toast);color:#fff;font-size:11px;border-radius:6px;padding:3px 7px;pointer-events:none}
.dl-ss.is-resizing{outline:2px dashed var(--dl-accent);outline-offset:-2px}
/* Isi Side Screen: rel bagian vertikal kiri + judul bagian lengket + panel; .is-narrow (< 900px) = rel ikon saja. */
.dl-ssl{display:grid;grid-template-columns:216px 1fr;height:100vh;min-height:0;font-family:var(--dl-font);color:var(--dl-ink)}
.dl-ss .dl-ssl{height:auto;flex:1;min-height:0}
.dl-ssl__top{padding:12px 26px 0;display:flex;flex-direction:column;gap:8px}.dl-ssl__top:empty{display:none}
.dl-ssl__rail{border-right:1px solid var(--dl-border);background:var(--dl-surface-alt);padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.dl-ssl__cap{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dl-muted);padding:6px 10px 4px}
.dl-ssl__cap--links{margin-top:14px}
.dl-ssl__nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink);position:relative;border:0;background:none;text-align:left;cursor:pointer;font-family:inherit;text-decoration:none;width:100%}
.dl-ssl__nav:hover{background:var(--dl-hover)}
.dl-ssl__nav i{width:18px;text-align:center;color:var(--dl-muted);font-size:13.5px;flex:none}
.dl-ssl__nav span{flex:1;min-width:0}
.dl-ssl__nav.is-on{background:var(--dl-accent-soft);color:var(--dl-accent);font-weight:700}
.dl-ssl__nav.is-on i{color:var(--dl-accent)}
.dl-ssl__nav.is-on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--dl-accent)}
.dl-ssl__nav.is-dim{opacity:.35}
.dl-ssl__n{margin-left:auto;background:var(--dl-chip);color:var(--dl-ink);font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 7px}
.dl-ssl__n.is-alert{background:var(--dl-badge);color:#fff}
.dl-ssl__body{overflow:auto;background:var(--dl-bg);min-height:0;display:flex;flex-direction:column}
.dl-ssl__sec{position:sticky;top:0;z-index:5;background:var(--dl-bg);padding:14px 26px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--dl-border);flex:none}
.dl-ssl__sec>i{color:var(--dl-accent);font-size:15px;flex:none}
.dl-ssl__sec-text{min-width:0}
.dl-ssl__sec h2{margin:0;font-size:calc(16px * var(--dl-font-scale));font-weight:800;color:var(--dl-ink-strong)}
.dl-ssl__sec p{margin:0;color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-ssl__sec p:empty{display:none}
.dl-ssl__crumb{margin-left:auto;flex:none}
.dl-ssl__panel{display:none;padding:16px 26px 30px;flex:1;flex-direction:column;gap:12px}
.dl-ssl__panel.is-active{display:flex}
.dl-ssl__panel>.dl-card.is-hidden,.dl-ssl__panel [data-ss-item].is-hidden{display:none}
.dl-ssl__foot{position:sticky;bottom:-30px;margin:auto -26px -30px;padding:10px 26px;background:var(--dl-surface);border-top:1px solid var(--dl-border);display:flex;gap:8px;align-items:center;z-index:4}
.dl-ssl__foot-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dl-ssl__foot-hint{margin-left:auto;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-ssl.is-narrow{grid-template-columns:56px 1fr}
.dl-ssl.is-narrow .dl-ssl__cap,.dl-ssl.is-narrow .dl-ssl__nav span,.dl-ssl.is-narrow .dl-ssl__n{display:none}
.dl-ssl.is-narrow .dl-ssl__nav{justify-content:center;padding:10px 0}
.dl-ssl.is-narrow .dl-ssl__crumb{display:none}
.dl-ssl.is-narrow .dl-ssl__panel{padding:12px 14px 24px}
.dl-ssl.is-narrow .dl-ssl__foot{margin:auto -14px -24px;padding:10px 14px}
@media (max-width:900px){.dl-ss__search{display:none}.dl-ss__esc{display:none}}
.dl-dr-head{height:56px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--dl-border);flex-shrink:0}
.dl-dr-ico{color:var(--dl-accent)}.dl-dr-ico--ai{color:var(--dl-violet)}
.dl-dr-title{font-weight:700;color:var(--dl-ink-strong)}
.dl-dr-note{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);margin-left:4px}
/* Laci sempit dengan dua mode (user 2026-10-04): tombol Maximize = laci selebar satu layar penuh, Restore = lebar semula. Chat / AI Assistant / Notifications di Shell dan x-dl::drawer maximize. */
.dl-dr-max{margin-left:auto;font-size:calc(14px * var(--dl-font-scale))}.dl-dr-max+.dl-dr-x{margin-left:6px}
.dl-drawer.is-max,.dl-drawer.is-max[data-dl-drawer]{width:auto;max-width:none;left:0}
.dl-sdrawer__panel.is-max{width:100vw;max-width:100vw}
.dl-drawer.is-max .dl-wa.is-compact{grid-template-columns:320px minmax(0,1fr)}
.dl-drawer.is-max .dl-wa.is-compact .dl-wa__main{display:flex}
.dl-drawer.is-max .dl-wa.is-compact.is-open .dl-wa__side{display:flex}
.dl-drawer.is-max .dl-wa.is-compact .dl-wa__back{display:none}
.dl-drawer.is-max .dl-wa.is-compact .dl-wa__msg{max-width:70%}
.dl-drawer.is-max .dl-ai,.dl-drawer.is-max .dl-ai__in,.dl-drawer.is-max .dl-notif,.dl-drawer.is-max .dl-notif__bar{width:100%;max-width:960px;margin:0 auto;box-sizing:border-box}
.dl-drawer.is-max .dl-ai{flex:1}.dl-drawer.is-max .dl-ai__msg{max-width:78%}
.dl-dr-x{margin-left:auto;background:none;border:none;color:var(--dl-muted);cursor:pointer;font-size:calc(18px * var(--dl-font-scale))}
.dl-chat{flex:1;display:flex;min-height:0}
.dl-cl{padding:11px 10px;cursor:pointer;border-bottom:1px solid var(--dl-border-soft);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-cl:hover{background:var(--dl-hover)}.dl-cl.is-active{background:var(--dl-accent-soft)}
.dl-cl b{color:var(--dl-ink-strong);display:block}.dl-cl span{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-ai__in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--dl-border)}
.dl-ai__in input{flex:1;min-width:0;border:1.5px solid var(--dl-border);border-radius:20px;padding:9px 14px;font-size:calc(13.5px * var(--dl-font-scale));outline:none;font-family:inherit}
.dl-ai__in button{background:var(--dl-accent);color:var(--dl-white);border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;flex-shrink:0}
.dl-ai__in button{background:var(--dl-violet)}
.dl-ai{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.dl-ai__intro{background:var(--dl-violet-soft);border:1px dashed var(--dl-violet-line);border-radius:12px;padding:14px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-violet-ink);line-height:1.5}
.dl-ai__chips{margin-top:10px}
.dl-ai__chip{display:inline-block;background:var(--dl-accent-soft);color:var(--dl-accent);border:none;border-radius:16px;padding:7px 12px;font-size:calc(12.5px * var(--dl-font-scale));cursor:pointer;margin:4px 4px 0 0;font-family:inherit}
.dl-ai__chip:hover{background:var(--dl-accent-soft-2)}
.dl-ai__msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:calc(13.5px * var(--dl-font-scale));line-height:1.45}
.dl-ai__msg--me{background:var(--dl-accent);color:var(--dl-white);align-self:flex-end;border-bottom-right-radius:4px}
.dl-ai__msg--bot{background:var(--dl-violet-msg);color:var(--dl-ink-strong);align-self:flex-start;border-bottom-left-radius:4px}
/* Asisten (jawaban dari server): kartu jawaban + jempol; kotak tanya dengan badge huruf. */
.dl-ai__box{flex:1;min-width:0;display:flex;align-items:center;border:1.5px solid var(--dl-border);border-radius:20px;padding-right:4px;background:var(--dl-surface)}
.dl-ai__in .dl-ai__box input{border:none;border-radius:20px;background:none;color:var(--dl-f-ink)}
.dl-ai__in .dl-ai__box .dl-case{background:none;color:var(--dl-f-muted);width:auto;height:auto;border-radius:0}
.dl-ai__wait{color:var(--dl-violet-ink)}
.dl-ai__card{align-self:flex-start;max-width:94%;background:var(--dl-violet-msg);color:var(--dl-ink-strong);border-radius:12px;border-bottom-left-radius:4px;padding:11px 13px;font-size:calc(13px * var(--dl-font-scale));line-height:1.45}
.dl-ai__card h5{margin:0 0 2px;font-size:calc(12px * var(--dl-font-scale));font-weight:700;color:var(--dl-violet-ink)}
.dl-ai__card.is-denied h5{color:var(--dl-amber-2)}
.dl-ai__card ol{margin:4px 0 0;padding-left:18px}
.dl-ai__card ol li{margin-bottom:3px}
.dl-ai__big{font-size:calc(21px * var(--dl-font-scale));font-weight:800;letter-spacing:-.01em}
.dl-ai__rows{margin:6px 0 2px;border-top:1px solid var(--dl-violet-line)}
.dl-ai__rows > div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--dl-violet-line)}
.dl-ai__rows b{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.dl-ai__rows span + b:empty{display:none}
.dl-ai__note{margin-top:6px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-ai__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dl-ai__acts .dl-btn{white-space:normal;text-align:left}
.dl-ai__fb{align-self:flex-start;display:flex;gap:4px;margin:-5px 0 0 4px}
.dl-ai__fb button{border:none;background:none;color:var(--dl-muted);cursor:pointer;padding:2px 5px;font-size:calc(12px * var(--dl-font-scale))}
.dl-ai__fb button.is-on{color:var(--dl-violet)}
.dl-notif__bar{padding:8px 12px;text-align:right;border-bottom:1px solid var(--dl-border)}
.dl-notif__bar a{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-accent);cursor:pointer;font-weight:600}
.dl-notif__list{flex:1;overflow-y:auto;padding:6px}
.dl-nz{display:flex;gap:11px;padding:11px 12px;border-radius:var(--dl-radius);cursor:pointer}
.dl-nz:hover{background:var(--dl-hover)}
.dl-nz__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;background:var(--dot)}
.dl-nz__dot.is-read{background:var(--dl-switch-off)}
.dl-nz__t{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}.dl-nz__s{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);margin-top:2px}
.dl-mov{position:fixed;inset:0;background:var(--dl-overlay);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
.dl-mov.is-on{display:flex}
.dl-modal{background:var(--dl-surface);width:100%;max-width:430px;border-radius:var(--dl-radius-xl);overflow:hidden;box-shadow:var(--dl-shadow-modal)}
.dl-modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--dl-border)}
.dl-modal__head h3{font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:0}
.dl-modal__x{background:none;border:none;font-size:calc(20px * var(--dl-font-scale));color:var(--dl-muted);cursor:pointer}
.dl-modal__body{padding:20px}
.dl-modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--dl-border);background:var(--dl-surface-alt)}
.dl-mfield{margin-bottom:14px}.dl-mfield label{display:block;font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink);margin-bottom:6px}
.dl-mfield input{width:100%;border:1.5px solid var(--dl-border);border-radius:var(--dl-radius);padding:10px 12px;font-size:calc(14px * var(--dl-font-scale));outline:none;color:var(--dl-ink-strong);font-family:inherit}
.dl-mfield input[readonly]{background:var(--dl-field-ro);color:var(--dl-muted)}
.dl-modal__msg{margin-bottom:14px;padding:10px 12px;border-radius:var(--dl-radius);background:var(--dl-danger-soft);border:1px solid var(--dl-danger-line);color:var(--dl-danger);font-size:calc(13px * var(--dl-font-scale))}
.dl-modal__msg[hidden]{display:none}
.dl-mbtn[disabled]{opacity:.6;cursor:default}
.dl-mbtn{border:none;border-radius:var(--dl-radius);padding:10px 18px;font-size:calc(14px * var(--dl-font-scale));font-weight:600;cursor:pointer;font-family:inherit}
.dl-mbtn--p{background:var(--dl-accent);color:var(--dl-white)}.dl-mbtn--c{background:var(--dl-chip);color:var(--dl-ink)}
.dl-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dl-photo-big{width:60px;height:60px;border-radius:50%;background:var(--dl-avatar-bg);display:flex;align-items:center;justify-content:center}
.dl-photo-big svg{width:34px;height:34px;fill:var(--dl-avatar-ink)}
.dl-ghost{background:var(--dl-accent-soft);color:var(--dl-accent);border:none;border-radius:var(--dl-radius);padding:8px 13px;font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;cursor:pointer;font-family:inherit}
.dl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--dl-toast);color:var(--dl-white);padding:10px 16px;border-radius:var(--dl-radius);font-size:calc(13px * var(--dl-font-scale));z-index:130;transition:opacity .25s;opacity:0;pointer-events:none}
.dl-toast.is-show{opacity:1}


/* ================= HALAMAN BANDING (mockup | komponen) ================= */
.dl-chipbtn{border:1.5px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-ink);border-radius:16px;padding:4px 11px;font-size:calc(12px * var(--dl-font-scale));font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.dl-chipbtn.is-active{border-color:var(--dl-accent);background:var(--dl-accent);color:var(--dl-white)}

/* ================= KODE LAYAR (ikon </>) & HALAMAN DEMO ================= */
.dl-code__btn{position:fixed;right:14px;bottom:14px;z-index:190;width:38px;height:38px;border-radius:50%;border:none;background:var(--dl-dev-bg);color:var(--dl-dev-ink);box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer;font-size:calc(14px * var(--dl-font-scale))}
.dl-code__btn:hover{background:var(--dl-violet)}
.dl-code__modal{max-width:880px;width:94vw;max-height:88vh;display:flex;flex-direction:column}
.dl-code__modal h3 small{font-weight:500;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));margin-left:6px}
.dl-code__tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--dl-border)}
.dl-code__tabs button,.dl-code__tabs a{border:none;background:none;padding:8px 12px;font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);cursor:pointer;border-bottom:2px solid transparent;text-decoration:none;font-family:inherit}
.dl-code__tabs button.is-active{color:var(--dl-accent);border-bottom-color:var(--dl-accent)}
.dl-code__tabs a{margin-left:auto;color:var(--dl-accent)}
.dl-code__pane{display:none;overflow:auto;padding:14px 16px}
.dl-code__pane.is-active{display:block}
.dl-code__file{font:11.5px ui-monospace,Consolas,monospace;color:var(--dl-muted);margin-bottom:6px}
.dl-code__pre{margin:0;background:var(--dl-code-dark);color:var(--dl-code-bg);border-radius:var(--dl-radius);padding:14px;font:12.5px/1.55 ui-monospace,Consolas,monospace;white-space:pre;overflow:auto}
.dl-code__comp{margin-bottom:18px}
.dl-code__pre--sm{font-size:calc(11.5px * var(--dl-font-scale));margin:4px 0 16px}
.dl-code__tag small{font-weight:500;color:var(--dl-muted);font-family:var(--dl-font)}
.dl-code__tag{font:700 13px ui-monospace,Consolas,monospace;color:var(--dl-violet)}
.dl-code__lineage{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);margin:2px 0}
.dl-code__doc{font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink);margin:4px 0 8px}
.dl-code__table{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-code__table th{text-align:left;background:var(--dl-surface-alt);color:var(--dl-muted);font-weight:700;padding:5px 8px;border-bottom:1px solid var(--dl-border)}
.dl-code__table td{padding:5px 8px;border-bottom:1px solid var(--dl-border);font-family:ui-monospace,Consolas,monospace}
body.dl-page-body{overflow:auto;height:auto;min-height:100vh}
.dl-demo{max-width:560px;margin:28px auto;padding:22px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);display:flex;flex-direction:column;gap:14px;font-family:var(--dl-font)}
.dl-demo--row{max-width:none;margin:28px;flex-direction:row;flex-wrap:wrap;align-items:center}
.dl-demo--row .dl-splitbtn{width:220px}
.dl-mockup-full{display:block;width:100%;height:100vh;border:0;background:var(--dl-white)}
.dl-mockup-img{max-width:100%;display:block;margin:0 auto}

/* ================= BASIC: halaman dokumentasi token & pemilih tema ================= */
.dl-doc{max-width:1100px;margin:0 auto;padding:24px;font-family:var(--dl-font);color:var(--dl-ink)}
.dl-doc h1{font-size:calc(22px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:0 0 4px}
.dl-doc h2{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:22px 0 8px}
.dl-doc p{color:var(--dl-muted);font-size:calc(13.5px * var(--dl-font-scale));margin:0 0 14px;line-height:1.55}
.dl-tokens{width:100%;border-collapse:collapse;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-tokens th{text-align:left;background:var(--dl-surface-alt);color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;padding:8px 12px;border-bottom:1px solid var(--dl-border)}
.dl-tokens td{padding:8px 12px;border-bottom:1px solid var(--dl-border-soft);vertical-align:middle}
.dl-tokens code,.dl-tokens__val{font-family:var(--dl-font-mono);font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-tokens__use{color:var(--dl-muted)}
.dl-tokens__swatch{display:inline-block;width:64px;height:24px;border-radius:var(--dl-radius-sm);border:1px solid var(--dl-border)}
.dl-tokens__box{display:inline-block;width:56px;height:34px;background:var(--dl-accent-soft);border:1px solid var(--dl-accent)}
.dl-tokens__box--shadow{background:var(--dl-surface);border-color:var(--dl-border)}
.dl-tokens__bar{display:inline-block;height:10px;background:var(--dl-accent);border-radius:2px}
.dl-themepick{display:flex;flex-direction:column;gap:14px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-themepick__grid{display:grid;grid-template-columns:70px repeat(3,64px);gap:8px;align-items:center}
.dl-themepick__head{font-weight:700;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));text-transform:uppercase}
.dl-themepick__opt{width:64px;height:40px;border-radius:var(--dl-radius);border:2px solid var(--dl-border);cursor:pointer;display:flex;overflow:hidden;padding:0;background:none}
.dl-themepick__opt span:first-child{width:35%;background:var(--s)}.dl-themepick__opt span:last-child{flex:1;background:var(--a)}
.dl-themepick__opt.is-active{border-color:var(--dl-ink-strong);box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-themepick__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-themepick__row b{width:110px;color:var(--dl-ink-strong)}
.dl-sample{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;background:var(--dl-bg);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:16px}
.dl-sample > *{flex:1;min-width:260px}
.dl-sample > div:not(.dl-themepick){display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:14px}
.dl-sample > div:not(.dl-themepick) > .dl-field,.dl-sample > div:not(.dl-themepick) > .dl-alert{align-self:stretch;margin:0}
.dl-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.dl-icons div{display:flex;align-items:center;gap:8px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);padding:8px 10px;font-size:calc(12px * var(--dl-font-scale))}
.dl-icons i{color:var(--dl-accent);width:18px;text-align:center}
.dl-kv{width:100%;border-collapse:collapse;background:var(--dl-surface);border:1px solid var(--dl-border);font-size:calc(13px * var(--dl-font-scale))}
.dl-kv td{padding:8px 12px;border-bottom:1px solid var(--dl-border-soft)}
.dl-kv td:first-child{color:var(--dl-muted);width:40%}
.dl-kv td:last-child{font-family:var(--dl-font-mono);color:var(--dl-ink-strong)}
.dl-chipbtn.is-active{border-color:var(--dl-accent);background:var(--dl-accent);color:var(--dl-white)}

/* ================= SMALL COMPONENTS (Part 2) ================= */
.dl-input--code{font-family:var(--dl-font-mono);letter-spacing:.3px}
.dl-field.is-readonly .dl-field__box,.dl-field.is-readonly .dl-dd__btn{background:var(--dl-f-ro)}
.dl-field.is-readonly .dl-input{color:var(--dl-muted)}
/* lookup: daftar pilihan berkolom */
.dl-lookup__panel{min-width:min(460px,92vw)}
.dl-lookup__table{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-lookup__table th{text-align:left;position:sticky;top:0;background:var(--dl-surface-alt);color:var(--dl-muted);font-weight:700;padding:5px 10px;border-bottom:1px solid var(--dl-border)}
.dl-lookup__table td{padding:6px 10px;border-bottom:1px solid var(--dl-border-soft);color:var(--dl-f-label);white-space:nowrap}
.dl-lookup__table tr.dl-dd__item{display:table-row}
.dl-lookup__table tr.dl-dd__item:hover td{background:var(--dl-accent-soft)}
.dl-lookup__table tr.dl-dd__item.is-active td{background:var(--dl-accent-soft)}
.dl-lookup[data-server-search] .dl-lookup__table td{white-space:normal}
.dl-lookup[data-server-search] .dl-lookup__table td:is(:first-child,:last-child){white-space:nowrap}
.dl-lookup__choice{display:flex;justify-content:flex-end;gap:4px;padding:6px 10px 0}
.dl-lookup__choice button{font-size:calc(11px * var(--dl-font-scale));padding:2px 8px;border:1px solid var(--dl-border);border-radius:var(--dl-radius,6px);background:transparent;color:var(--dl-f-label);cursor:pointer}
.dl-lookup__choice button.is-on{background:var(--dl-accent-soft);border-color:var(--dl-accent);font-weight:700;cursor:default}
.dl-lookup__table tr.dl-lookup__note td{background:var(--dl-surface-alt);white-space:normal;font-weight:700}
.dl-lookup .dl-dd__panel{max-height:260px;overflow:auto}
.dl-field.is-filled .dl-field__box,.dl-field.is-filled .dl-dd__btn{animation:dl-filled 1.2s ease}
@keyframes dl-filled{0%{box-shadow:0 0 0 3px var(--dl-accent-ring);background:var(--dl-accent-soft)}100%{box-shadow:none}}
/* badge */
.dl-badge{display:inline-flex;align-items:center;gap:4px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;padding:2px 8px;border-radius:var(--dl-radius-sm);white-space:nowrap;background:var(--dl-chip);color:var(--dl-ink)}
.dl-badge--pill{border-radius:20px}
.dl-badge--accent{background:var(--dl-accent-soft);color:color-mix(in srgb,var(--dl-accent) 55%,var(--dl-ink-strong))}
.dl-badge--success{background:color-mix(in srgb,var(--dl-green) 16%,var(--dl-surface));color:color-mix(in srgb,var(--dl-green) 45%,var(--dl-ink-strong))}
.dl-badge--warn{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:color-mix(in srgb,var(--dl-amber) 50%,var(--dl-ink-strong))}
.dl-badge--danger{background:var(--dl-danger-soft);color:color-mix(in srgb,var(--dl-danger) 60%,var(--dl-ink-strong))}
.dl-badge--tangerine{background:color-mix(in srgb,var(--dl-tangerine) 20%,var(--dl-surface));color:color-mix(in srgb,var(--dl-tangerine) 70%,var(--dl-ink-strong))}
.dl-badge--yellow{background:color-mix(in srgb,var(--dl-yellow) 32%,var(--dl-surface));color:color-mix(in srgb,var(--dl-yellow) 45%,var(--dl-ink-strong))}
.dl-badge--info{background:var(--dl-info-soft);color:color-mix(in srgb,var(--dl-accent) 55%,var(--dl-ink-strong))}
.dl-badge--violet{background:var(--dl-violet-soft);color:color-mix(in srgb,var(--dl-violet) 55%,var(--dl-ink-strong))}
/* tooltip */
.dl-tooltip{position:relative;display:inline-flex}
.dl-tooltip__text{visibility:hidden;opacity:0;position:absolute;z-index:100;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--dl-f-ink);color:var(--dl-white);font-size:calc(11px * var(--dl-font-scale));padding:4px 8px;border-radius:var(--dl-radius-sm);white-space:nowrap;transition:opacity .15s;pointer-events:none}
.dl-tooltip--bottom .dl-tooltip__text{bottom:auto;top:calc(100% + 6px)}
.dl-tooltip:hover .dl-tooltip__text{visibility:visible;opacity:1}
/* tabs */
.dl-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--dl-border);overflow-x:auto}
.dl-tabs__tab{border:none;background:none;padding:8px 14px;font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap}
.dl-tabs__tab:hover{color:var(--dl-ink-strong)}
.dl-tabs__tab.is-active{color:var(--dl-accent);border-bottom-color:var(--dl-accent)}
.dl-tabs__panel{display:none;padding:12px 2px}
.dl-tabs__panel.is-active{display:block}
/* accordion */
/* pagination */
.dl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--dl-border-soft);font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);background:var(--dl-surface)}
.dl-pager__left,.dl-pager__nav{display:flex;align-items:center;gap:5px}
.dl-pager__goto{width:52px;padding:4px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-sm);text-align:center;background:var(--dl-surface);color:var(--dl-ink)}
.dl-pager button{min-width:30px;height:30px;padding:0 6px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-sm);background:var(--dl-surface);color:var(--dl-ink);cursor:pointer;font-size:inherit;font-family:inherit}
.dl-pager button.is-active{background:var(--dl-navy);border-color:var(--dl-navy);color:var(--dl-white)}
.dl-pager button:disabled{opacity:.45;cursor:not-allowed}
.dl-pager__size{height:24px!important;min-width:32px!important}
/* avatar */
.dl-avatar-id{display:inline-flex;align-items:center;gap:10px}
.dl-avatar-id__pic{width:32px;height:32px;border-radius:var(--dl-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--dl-white);font-size:calc(11px * var(--dl-font-scale));font-weight:700;background:linear-gradient(135deg,hsl(var(--h) 60% 55%),hsl(calc(var(--h) + 40) 55% 42%))}
.dl-avatar-id__pic img{width:100%;height:100%;object-fit:cover}
/* identity 'box': satu persegi panjang berwarna membungkus nama + kode (grid master, tanpa inisial) */
.dl-avatar-id--box{display:inline-flex;min-width:170px;max-width:260px;padding:6px 12px;border-radius:var(--dl-radius);color:var(--dl-white);background:linear-gradient(135deg,hsl(var(--h) 60% 55%),hsl(calc(var(--h) + 40) 55% 42%))}
.dl-avatar-id--box .dl-avatar-id__txt b,.dl-avatar-id--box .dl-avatar-id__txt small{color:var(--dl-white)}
.dl-avatar-id--box .dl-avatar-id__txt small{opacity:.88}
.dl-avatar-id--lg .dl-avatar-id__pic{width:48px;height:48px;border-radius:50%;font-size:calc(15px * var(--dl-font-scale))}
.dl-avatar-id--sm .dl-avatar-id__pic{width:24px;height:24px;font-size:calc(9.5px * var(--dl-font-scale))}
.dl-avatar-id__txt{display:flex;flex-direction:column;line-height:1.2}
.dl-avatar-id__txt b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-avatar-id__txt small{font-family:var(--dl-font-mono);font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
/* lead = kolom utama dua baris: baris 1 lebih besar, baris 2 nama detail dengan huruf normal (teks gelap, bukan kode mono). */
.dl-avatar-id--lead .dl-avatar-id__txt b{font-size:calc(17px * var(--dl-font-scale))}
.dl-avatar-id--lead .dl-avatar-id__txt small{font-family:inherit;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink)}
/* sub = baris kedua kolom identitas (jabatan, departemen): huruf biasa gelap; l1 = nama + kode sebaris. */
.dl-avatar-id__l1{display:flex;align-items:baseline;gap:8px}
.dl-avatar-id__txt small.dl-avatar-id__sub{font-family:inherit;color:var(--dl-ink);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* size lg (opt-in lewat size="lg" di x-dl::grid): grid yang dibaca terus-menerus, teks 15px, judul kolom 13px, foto 38px. */
.dl-grid[data-size="lg"] .dl-grid__table{font-size:calc(15px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-grid__table th{font-size:calc(13px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-avatar-id__txt b{font-size:calc(15px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-avatar-id__txt small{font-size:calc(13px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-grid__thumb img,.dl-grid[data-size="lg"] .dl-grid__noimg{width:38px;height:38px}
.dl-grid[data-size="lg"] .dl-grid__imgcell{width:52px}
.dl-grid[data-size="lg"] .dl-badge{font-size:calc(12.5px * var(--dl-font-scale))}
/* progress */
.dl-progress__label{display:flex;justify-content:space-between;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink);margin-bottom:4px}
.dl-progress__track{height:8px;border-radius:8px;background:var(--dl-chip);overflow:hidden}
.dl-progress__bar{height:100%;border-radius:8px;background:var(--dl-accent);transition:width .4s}
.dl-progress--success .dl-progress__bar{background:var(--dl-green)}
.dl-progress--warn .dl-progress__bar{background:var(--dl-amber-2)}
.dl-progress--danger .dl-progress__bar{background:var(--dl-danger)}
/* stat box */
.dl-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:var(--dl-radius-lg);border:1px solid var(--dl-border);background:var(--dl-surface);text-align:left;font-family:inherit;min-width:150px;border-left:4px solid var(--dl-accent)}
.dl-stat--success{border-left-color:var(--dl-green)}.dl-stat--warn{border-left-color:var(--dl-amber-2)}.dl-stat--danger{border-left-color:var(--dl-danger)}.dl-stat--neutral{border-left-color:var(--dl-disabled)}
.dl-stat__label{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);font-weight:600}
.dl-stat__value{font-size:calc(22px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);font-variant-numeric:tabular-nums}
.dl-stat__sub{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-stat.is-filter{cursor:pointer}
.dl-stat.is-filter:hover{background:var(--dl-hover)}
.dl-stat.is-active{background:var(--dl-accent-soft);box-shadow:0 0 0 2px var(--dl-accent-ring)}
/* breadcrumb */
.dl-crumb{display:flex;align-items:center;gap:8px;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-muted);flex-wrap:wrap}
.dl-crumb i{font-size:calc(9px * var(--dl-font-scale))}
.dl-crumb a{color:var(--dl-accent);text-decoration:none}.dl-crumb a:hover{text-decoration:underline}
.dl-crumb span{color:var(--dl-ink-strong);font-weight:600}
.dl-crumb a.is-current{font-weight:600}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.dl-mockup-attach{position:fixed;left:14px;bottom:14px;z-index:190;box-shadow:var(--dl-shadow-pop)}
.dl-theme-row{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:14px 16px;margin-bottom:12px}
.dl-theme-row__head{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);margin-bottom:10px}
.dl-theme-row__head b{color:var(--dl-ink-strong);font-size:calc(13px * var(--dl-font-scale))}
.dl-theme-row__dot{width:12px;height:12px;border-radius:50%;background:var(--dl-accent)}
.dl-pick__preview{padding:4px 10px 8px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600}

/* ================= SMALL COMPONENTS (lanjutan) ================= */
.dl-choice--single{min-height:28px}
.dl-segment{display:inline-flex;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius);overflow:hidden;background:var(--dl-surface)}
.dl-segment__opt{border:none;background:none;padding:calc(6px * var(--dl-density)) 14px;font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label);cursor:pointer;font-family:inherit}
.dl-segment__opt + .dl-segment__opt{border-left:1px solid var(--dl-f-line)}
.dl-segment__opt:hover{background:var(--dl-hover)}
.dl-segment__opt.is-active{background:var(--dl-accent);color:var(--dl-white)}
.dl-display{min-height:28px;display:flex;align-items:center;padding:0 2px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong);font-weight:600;border-bottom:1px dashed var(--dl-border)}
.dl-display.is-num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.dl-display.is-mono{font-family:var(--dl-font-mono)}
.dl-tags__box{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:30px;padding:3px 6px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface);cursor:text}
.dl-tags__box:focus-within{border-color:var(--dl-accent)}
.dl-tags__chip{display:inline-flex;align-items:center;gap:4px;background:var(--dl-accent-soft);color:var(--dl-accent);border-radius:20px;padding:2px 4px 2px 9px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:600}
.dl-tags__chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 3px}
.dl-tags__input{flex:1;min-width:120px;border:none;outline:none;background:none;font-size:calc(12.5px * var(--dl-font-scale));padding:3px;font-family:inherit;color:var(--dl-f-ink)}
.dl-kvedit__table{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-kvedit__table th{text-align:left;color:var(--dl-muted);font-weight:700;padding:4px 6px}
.dl-kvedit__table td{padding:3px}
.dl-kvedit__table input{width:100%;padding:calc(5px * var(--dl-density)) 8px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);font-size:inherit;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
.dl-kvedit__table td:last-child{width:28px}
.dl-kvedit__table td button{border:none;background:none;color:var(--dl-danger);cursor:pointer;font-size:16px}
.dl-kvedit__add,.dl-lookup__create{margin-top:4px;border:1px dashed var(--dl-f-line);background:none;border-radius:var(--dl-radius-sm);padding:5px 10px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600;cursor:pointer;font-family:inherit}
.dl-lookup__create{display:block;width:calc(100% - 12px);margin:6px;text-align:left}
.dl-lookup__create[hidden]{display:none}
.dl-rich{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface)}
.dl-rich:focus-within{border-color:var(--dl-accent)}
.dl-rich__bar{display:flex;gap:2px;padding:4px;border-bottom:1px solid var(--dl-f-line-soft);background:var(--dl-f-bg-soft)}
.dl-rich__bar button{min-width:28px;height:26px;border:1px solid transparent;border-radius:4px;background:none;cursor:pointer;color:var(--dl-f-label);font-family:inherit}
.dl-rich__bar button:hover{background:var(--dl-surface);border-color:var(--dl-f-line)}
.dl-rich__area{padding:8px 10px;font-size:calc(13px * var(--dl-font-scale));line-height:1.5;outline:none;color:var(--dl-f-ink);overflow:auto}
.dl-rich__area:empty::before{content:attr(data-placeholder);color:var(--dl-muted)}
.dl-upload__files{display:flex;flex-direction:column;gap:4px;text-align:left}
.dl-upload__files:empty{display:none}
.dl-upload__file{display:flex;align-items:center;gap:8px;background:var(--dl-surface);border:1px solid var(--dl-f-line-soft);border-radius:4px;padding:3px 6px}
.dl-upload__file small{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-upload__file button{background:none;border:none;cursor:pointer;color:var(--dl-danger)}
.dl-upload__thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;border:1px solid var(--dl-border)}
.dl-upload.has-file .dl-upload__placeholder{display:flex;opacity:.7;margin-bottom:4px}
.dl-field__affix{padding:0 0 0 8px;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));font-weight:600;white-space:nowrap}
.dl-field__affix--end{padding:0 8px 0 0}
.dl-field__counter{font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted);text-align:right;margin-top:2px}
.dl-field__counter.is-full{color:var(--dl-danger);font-weight:700}
.dl-logo-badge img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:var(--dl-white)}
.dl-iconbtn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dl-radius-sm);border:1px solid var(--dl-f-line);background:var(--dl-surface);color:var(--dl-accent);cursor:pointer;text-decoration:none;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-iconbtn:hover{background:var(--dl-accent-soft)}
.dl-iconbtn--danger{color:var(--dl-danger);border-color:var(--dl-danger-line)}.dl-iconbtn--danger:hover{background:var(--dl-danger-soft)}
.dl-iconbtn--success{color:var(--dl-green)}
.dl-iconbtn--plain{border-color:transparent;background:none}
.dl-back{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;background:var(--dl-navy-2);border-radius:20px;text-decoration:none}
.dl-back span{font-size:calc(11px * var(--dl-font-scale));font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dl-white)}
.dl-back i{width:24px;height:24px;border-radius:50%;background:var(--dl-white);color:var(--dl-navy-2);display:flex;align-items:center;justify-content:center;font-size:12px}
.dl-card{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--dl-border-soft);background:var(--dl-surface-alt)}
.dl-card__head b{font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong);text-transform:uppercase;letter-spacing:.4px}
.dl-card__head i{color:var(--dl-accent)}
.dl-card__head small{display:block;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);text-transform:none;letter-spacing:0;margin-top:2px}
.dl-card__actions{display:flex;gap:6px}
.dl-card__body{padding:14px;display:flex;flex-direction:column;gap:8px}
.dl-card--plain{border:none;background:none}.dl-card--plain .dl-card__head{background:none;padding-left:0;padding-right:0}.dl-card--plain .dl-card__body{padding:10px 0}
.dl-card--accent{border-top:3px solid var(--dl-accent)}
/* ============ ENGINE CATALOG (x-dl::engine-catalog): daftar engine + input / output / cara kerja ============ */
.dl-eng{display:flex;flex-direction:column;gap:14px;font-family:var(--dl-font);color:var(--dl-ink)}
.dl-eng__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-eng__q{flex:1 1 260px;max-width:420px}
.dl-eng__count{min-width:28px;text-align:center;font-weight:700;color:var(--dl-accent);background:var(--dl-accent-soft);border-radius:999px;padding:3px 9px;font-size:calc(12px * var(--dl-font-scale))}
.dl-eng__chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.dl-eng__chip{border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-ink);border-radius:999px;padding:4px 11px;font:inherit;font-size:calc(12px * var(--dl-font-scale));cursor:pointer}
.dl-eng__chip em{font-style:normal;color:var(--dl-muted);margin-left:3px}
.dl-eng__chip.is-active{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}.dl-eng__chip.is-active em{color:inherit;opacity:.8}
.dl-eng__chip:focus-visible,.dl-eng__head:focus-visible{outline:2px solid var(--dl-accent);outline-offset:2px}
.dl-eng__group{display:flex;flex-direction:column;gap:8px}.dl-eng__group[hidden],.dl-eng__item[hidden]{display:none}
.dl-eng__gt{margin:6px 0 0;font-size:calc(12px * var(--dl-font-scale));letter-spacing:.6px;text-transform:uppercase;color:var(--dl-muted)}
.dl-eng__item{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-eng__head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}
.dl-eng__head::-webkit-details-marker{display:none}
.dl-eng__name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-eng__name b{color:var(--dl-ink-strong);font-size:calc(14px * var(--dl-font-scale))}
.dl-eng__name small{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));line-height:1.45}
.dl-eng__chev{color:var(--dl-muted);transition:transform .15s}.dl-eng__item[open] .dl-eng__chev{transform:rotate(180deg)}
.dl-eng__item[open] .dl-eng__head{border-bottom:1px solid var(--dl-border-soft);background:var(--dl-surface-alt)}
.dl-eng__body{padding:14px;display:flex;flex-direction:column;gap:14px}
.dl-eng__sec h4{margin:0 0 6px;font-size:calc(11.5px * var(--dl-font-scale));letter-spacing:.5px;text-transform:uppercase;color:var(--dl-accent)}
.dl-eng__call{display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:var(--dl-radius-sm);background:var(--dl-surface-alt);margin-bottom:5px;overflow-x:auto}
.dl-eng__call code,.dl-eng__meta code{font-family:var(--dl-font-mono,ui-monospace,Consolas,monospace);font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong);white-space:pre-wrap;word-break:break-word}
.dl-eng__call small{color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-eng__io{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.dl-eng__io td:first-child{font-weight:600;color:var(--dl-ink-strong);white-space:nowrap;vertical-align:top}
.dl-eng__steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;line-height:1.5;font-size:calc(13px * var(--dl-font-scale))}
.dl-eng__meta{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:calc(12px * var(--dl-font-scale));border-top:1px solid var(--dl-border-soft);padding-top:12px}
.dl-eng__meta dt{color:var(--dl-muted);text-transform:uppercase;letter-spacing:.4px;font-size:calc(11px * var(--dl-font-scale));padding-top:2px}
.dl-eng__meta dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.dl-eng__meta dd span{background:var(--dl-surface-alt);border-radius:var(--dl-radius-sm);padding:2px 7px}
.dl-eng__none{color:var(--dl-muted);text-align:center;padding:24px}
.dl-actionbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:10px;border-top:1px solid var(--dl-border-soft);margin-top:4px}
.dl-actionbar--end{justify-content:flex-end}.dl-actionbar--between{justify-content:space-between}
.dl-table-wrap{border:1px solid var(--dl-border);border-radius:var(--dl-radius);overflow:auto;background:var(--dl-surface)}
.dl-table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-table th{text-align:left;background:var(--dl-surface-alt);color:var(--dl-muted);font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;padding:calc(8px * var(--dl-density)) 12px;border-bottom:1px solid var(--dl-border);white-space:nowrap}
.dl-table td{padding:calc(8px * var(--dl-density)) 12px;border-bottom:1px solid var(--dl-border-soft);color:var(--dl-ink)}
.dl-table.is-striped tbody tr:nth-child(even) td{background:var(--dl-surface-alt)}
.dl-table tbody tr:hover td{background:var(--dl-hover)}
.dl-table .num{text-align:right;font-variant-numeric:tabular-nums}
.dl-table tfoot td{font-weight:700;color:var(--dl-ink-strong);border-top:2px solid var(--dl-border)}
.dl-table__empty{text-align:center;color:var(--dl-muted);padding:20px!important}
/* halaman kategori DevLib: breadcrumb + daftar komponen */
.dl-cat{max-width:1100px;margin:0 auto;padding:18px 24px 60px;font-family:var(--dl-font)}
/* Layar aplikasi (body.dl-page-wide): isi selebar panel, tepi kiri-kanan hanya 6px (~1,5 mm). Katalog DevLib tetap 1100px. */
body.dl-page-wide .dl-cat{max-width:none;padding-left:6px;padding-right:6px}
.dl-cat__nav{position:sticky;top:0;z-index:50;background:var(--dl-bg);padding:10px 0;border-bottom:1px solid var(--dl-border);margin-bottom:14px}
.dl-cat__nav.has-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dl-cat__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.dl-cat__actions form{display:inline-flex;margin:0}
.dl-cat__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dl-cat__item{scroll-margin-top:110px;margin-bottom:26px}
.dl-cat__item > h2{display:flex;align-items:center;gap:8px;font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:0 0 8px}
.dl-cat__item > h2 code{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-violet);font-weight:600}
.dl-cat__item .dl-demo{margin:0;max-width:none}
.dl-cat__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.dl-cat__head h2{font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:0 6px 0 0}
.dl-cat__obj{display:inline-flex;align-items:baseline;gap:6px}
.dl-cat__obj code{background:var(--dl-ink-strong);color:var(--dl-surface);border-radius:var(--dl-radius-sm);padding:2px 8px;font-family:var(--dl-font-mono);font-size:calc(11.5px * var(--dl-font-scale));font-weight:600}
.dl-cat__obj small{font-family:var(--dl-font-mono);font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-cat__modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.dl-cat__mode{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);border-radius:var(--dl-radius-sm) var(--dl-radius-sm) 0 0;padding:4px 10px;margin-bottom:4px;background:var(--dl-code-bg)}
.dl-cat__mode b{margin-right:4px;color:var(--dl-ink-strong)}
.dl-cat__mode--rw{border-top:3px solid #16a34a}
.dl-cat__mode--ro{border-top:3px solid var(--dl-accent)}
.dl-cat__none{border:1px dashed var(--dl-border);border-radius:var(--dl-radius-lg);padding:22px;color:var(--dl-muted);font-style:italic;text-align:center}
@media (max-width:900px){.dl-cat__modes{grid-template-columns:1fr}}

/* ================= FEEDBACK & STATES (Part 3) ================= */
/* toast */
.dl-toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:min(380px,92vw)}
.dl-toast2{display:flex;align-items:flex-start;gap:10px;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-left:4px solid var(--dl-accent);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:10px 12px;font-size:calc(13px * var(--dl-font-scale));animation:dl-toast-in .2s ease;transition:opacity .25s,transform .25s}
.dl-toast2.is-out{opacity:0;transform:translateX(20px)}
.dl-toast2 > i{margin-top:2px;color:var(--dl-accent)}
.dl-toast2 div{flex:1;display:flex;flex-direction:column;gap:2px}
.dl-toast2 b{color:var(--dl-ink-strong)}
.dl-toast2 button{border:none;background:none;color:var(--dl-muted);cursor:pointer;font-size:16px;line-height:1}
.dl-toast2--success{border-left-color:var(--dl-green)}.dl-toast2--success > i{color:var(--dl-green)}
.dl-toast2--danger{border-left-color:var(--dl-danger)}.dl-toast2--danger > i{color:var(--dl-danger)}
.dl-toast2--warn{border-left-color:var(--dl-amber-2)}.dl-toast2--warn > i{color:var(--dl-amber-2)}
@keyframes dl-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* idle-logout: peringatan non-modal di pojok kanan bawah (gaya toast2 + warn), di atas toast */
.dl-idle{position:fixed;right:18px;bottom:18px;z-index:310;display:flex;align-items:flex-start;gap:12px;width:min(400px,92vw);box-sizing:border-box;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-left:4px solid var(--dl-amber-2);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:calc(12px * var(--dl-density)) 14px;font-size:calc(13px * var(--dl-font-scale));animation:dl-toast-in .2s ease}
.dl-idle[hidden]{display:none}
.dl-idle.is-out{border-left-color:var(--dl-danger)}
.dl-idle__icon{margin-top:2px;color:var(--dl-amber-2);font-size:calc(16px * var(--dl-font-scale))}
.dl-idle.is-out .dl-idle__icon{color:var(--dl-danger)}
.dl-idle__body{flex:1;display:flex;flex-direction:column;gap:calc(4px * var(--dl-density))}
.dl-idle__body b{color:var(--dl-ink-strong)}
.dl-idle__act{display:flex;align-items:center;gap:14px;margin-top:calc(8px * var(--dl-density))}
/* modal: ukuran & konfirmasi */
.dl-modal--sm{max-width:400px}.dl-modal--md{max-width:520px}.dl-modal--lg{max-width:760px}.dl-modal--xl{max-width:1000px}
.dl-modal__head h3 i{color:var(--dl-accent);margin-right:4px}
/* Modal bernada (tone): kepala berwarna mencolok untuk peringatan yang wajib terlihat (popup saat login). */
.dl-modal--tone{border-top:6px solid var(--dl-tone, var(--dl-accent))}
.dl-modal--tone .dl-modal__head{background:color-mix(in srgb, var(--dl-tone, var(--dl-accent)) 14%, transparent)}
.dl-modal--tone .dl-modal__head h3,.dl-modal--tone .dl-modal__head h3 i{color:var(--dl-tone, var(--dl-accent))}
.dl-modal--danger{--dl-tone:var(--dl-danger)}.dl-modal--warn{--dl-tone:var(--dl-amber)}.dl-modal--info{--dl-tone:var(--dl-accent)}.dl-modal--success{--dl-tone:var(--dl-success)}
.dl-mov .dl-modal{max-height:90dvh;display:flex;flex-direction:column}
.dl-mov .dl-modal__body{overflow:auto}
.dl-confirm__body{display:flex;gap:14px;padding:20px}
.dl-confirm__body h3{margin:0 0 6px;font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-confirm__body p{margin:0;font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-ink);line-height:1.5}
.dl-confirm__icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-confirm__icon--danger{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-confirm__icon--warn{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:var(--dl-amber)}
.dl-confirm__icon--success{background:color-mix(in srgb,var(--dl-green) 16%,var(--dl-surface));color:var(--dl-green)}
/* drawer umum */
.dl-sdrawer{position:fixed;inset:0;z-index:150;pointer-events:none}
.dl-sdrawer__backdrop{position:absolute;inset:0;background:var(--dl-overlay-soft);opacity:0;transition:opacity .2s}
.dl-sdrawer__panel{position:absolute;top:0;bottom:0;right:0;width:var(--dl-drawer-w);max-width:92vw;background:var(--dl-surface);box-shadow:-12px 0 40px rgba(15,22,45,.2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s;visibility:hidden}
.dl-sdrawer--left .dl-sdrawer__panel{right:auto;left:0;transform:translateX(-100%)}
.dl-sdrawer.is-on{pointer-events:auto}
.dl-sdrawer.is-on .dl-sdrawer__backdrop{opacity:1}
.dl-sdrawer.is-on .dl-sdrawer__panel{transform:none;visibility:visible}
.dl-sdrawer__body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
/* skeleton */
.dl-skel{display:flex;flex-direction:column;gap:8px}
.dl-skel__bar{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--dl-chip) 25%,var(--dl-border-soft) 50%,var(--dl-chip) 75%);background-size:200% 100%;animation:dl-shimmer 1.3s infinite linear}
.dl-skel__bar.is-head{height:14px;opacity:.8}
.dl-skel__bar.is-input{height:30px;border-radius:var(--dl-radius-sm)}
.dl-skel__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:14px;padding:6px 0;border-bottom:1px solid var(--dl-border-soft)}
.dl-skel__card{display:flex;gap:12px;align-items:center}.dl-skel__card > div{flex:1;display:flex;flex-direction:column;gap:8px}
.dl-skel__circle{width:44px;height:44px;border-radius:50%;background:var(--dl-chip);animation:dl-shimmer 1.3s infinite linear;background:linear-gradient(90deg,var(--dl-chip) 25%,var(--dl-border-soft) 50%,var(--dl-chip) 75%);background-size:200% 100%}
.dl-skel__field{display:flex;flex-direction:column;gap:5px}
@keyframes dl-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* spinner & tombol sibuk */
.dl-spinner{display:inline-flex;align-items:center;gap:10px;color:var(--dl-muted);font-size:calc(13px * var(--dl-font-scale))}
.dl-spinner__ring{width:22px;height:22px;border-radius:50%;border:3px solid var(--dl-accent-soft);border-top-color:var(--dl-accent);animation:dl-spin .8s linear infinite;display:inline-block}
.dl-spinner--sm .dl-spinner__ring{width:14px;height:14px;border-width:2px}.dl-spinner--lg .dl-spinner__ring{width:36px;height:36px;border-width:4px}
.dl-spinner__ring--inline{width:13px;height:13px;border-width:2px;border-color:rgba(255,255,255,.4);border-top-color:#fff;vertical-align:-2px}
.dl-spinner--overlay{position:absolute;inset:0;justify-content:center;background:color-mix(in srgb,var(--dl-surface) 75%,transparent);z-index:5;border-radius:inherit}
.dl-btn.is-busy{opacity:.85;cursor:progress}
@keyframes dl-spin{to{transform:rotate(360deg)}}
/* empty state */
.dl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 16px;color:var(--dl-muted)}
.dl-empty__icon{width:56px;height:56px;border-radius:50%;background:var(--dl-accent-soft);color:var(--dl-accent);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:6px}
.dl-empty__title{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-empty__msg{margin:0;font-size:calc(13px * var(--dl-font-scale));max-width:380px;line-height:1.5}
.dl-empty__actions{margin-top:8px;display:flex;gap:8px}
/* daftar notifikasi (mockup_notification) */
.dl-notif{display:flex;flex-direction:column;gap:6px}
.dl-notif__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dl-notif__head b{font-size:calc(18px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-notif__count{background:var(--dl-green);color:var(--dl-white);font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;padding:3px 10px;border-radius:12px}
.dl-notif__count[hidden],.dl-notif__all[hidden]{display:none}
.dl-notif__all{margin-left:auto;border:none;background:none;color:var(--dl-accent);font-weight:600;font-size:calc(12px * var(--dl-font-scale));cursor:pointer;font-family:inherit}
.dl-notif__item{display:flex;gap:14px;padding:14px 16px;border-radius:var(--dl-radius-lg);cursor:pointer;transition:background .15s}
.dl-notif__item:hover{background:var(--dl-hover)}
.dl-notif__item.is-unread{background:color-mix(in srgb,var(--dl-green) 6%,var(--dl-surface))}
.dl-notif__icon{width:44px;height:44px;border-radius:var(--dl-radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px}
.dl-notif__icon--accent{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-notif__icon--success{background:color-mix(in srgb,var(--dl-green) 15%,var(--dl-surface));color:var(--dl-green)}
.dl-notif__icon--warn{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:var(--dl-amber)}
.dl-notif__icon--danger{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-notif__title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:calc(14.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-notif__dot{width:8px;height:8px;border-radius:50%;background:var(--dl-green)}
.dl-notif__body{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink);margin-top:2px}
.dl-notif__time{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);margin-top:4px}
/* halaman error */
.dl-error{display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--dl-font)}
.dl-error--full{min-height:100vh;min-height:100dvh;background:linear-gradient(160deg,var(--dl-bg),color-mix(in srgb,var(--dl-accent) 8%,var(--dl-bg)))}
.dl-error__card{text-align:center;max-width:460px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-xl);box-shadow:var(--dl-shadow-pop);padding:32px 28px}
.dl-error__icon{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:26px;background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-error__icon--danger{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-error__icon--warn{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:var(--dl-amber)}
.dl-error__code{font-size:calc(46px * var(--dl-font-scale));font-weight:800;color:var(--dl-ink-strong);letter-spacing:2px;margin-top:10px;line-height:1}
.dl-error__title{font-size:calc(19px * var(--dl-font-scale));color:var(--dl-ink-strong);margin:8px 0 6px}
.dl-error__msg{font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-muted);line-height:1.55;margin:0 0 18px}
.dl-error__actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.dl-errors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.dl-errors-grid .dl-error{padding:0}.dl-errors-grid .dl-error__card{max-width:none;box-shadow:none;height:100%}

/* ================= GLOBAL BEHAVIORS (Part 4) ================= */
.dl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);padding:8px 0;border-top:1px dashed var(--dl-border)}
.dl-meta i{margin-right:3px}
.dl-meta b{color:var(--dl-ink)}
.dl-keys{width:100%;border-collapse:collapse;font-size:calc(13px * var(--dl-font-scale))}
.dl-keys td{padding:7px 4px;border-bottom:1px solid var(--dl-border-soft);color:var(--dl-ink)}
.dl-keys td:first-child{white-space:nowrap;width:45%}
.dl-keys kbd,.dl-demo kbd{background:var(--dl-code-bg);border:1px solid var(--dl-border);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:var(--dl-font-mono);font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
form.is-dirty .dl-form__title::after{content:" • belum disimpan";color:var(--dl-amber);font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-note{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink);line-height:1.6;margin:0}

/* ================= GRID (Part 5) ================= */
.dl-grid{display:flex;flex-direction:column;gap:12px;--dl-grid-pad:calc(9px * var(--dl-density))}
.dl-grid[data-density="compact"]{--dl-grid-pad:4px}
.dl-grid[data-density="comfortable"]{--dl-grid-pad:14px}
.dl-grid__stats{display:flex;gap:10px;flex-wrap:wrap}
.dl-grid__stats .dl-stat{flex:1 1 150px}
.dl-grid__panel{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);min-width:0}
.dl-grid__fbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;padding:0 12px;border-bottom:1px solid var(--dl-border)}
.dl-grid__fgroup{display:contents}
.dl-grid__fsep{width:1px;height:18px;background:var(--dl-border-hover)}
.dl-grid__fsep[hidden]{display:none}
.dl-fb{--fb:var(--dl-accent);border:none;background:none;padding:10px 0;font-family:inherit;font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);cursor:pointer;white-space:nowrap}
.dl-fb:hover,.dl-fb.is-active{color:var(--dl-ink-strong)}
.dl-fb--tangerine{--fb:var(--dl-tangerine)}.dl-fb--yellow{--fb:var(--dl-yellow)}
.dl-fb--success{--fb:var(--dl-green)}.dl-fb--warn{--fb:var(--dl-amber-2)}.dl-fb--danger{--fb:var(--dl-danger)}.dl-fb--neutral{--fb:var(--dl-muted)}.dl-fb--violet{--fb:var(--dl-violet)}
.dl-fb--orange{--fb:var(--dl-orange)}.dl-fb--pink{--fb:var(--dl-pink)}.dl-fb--lime{--fb:var(--dl-lime)}
.dl-grid__find{position:absolute;left:0;top:0;width:0;height:3px;border-radius:2px;opacity:0;pointer-events:none;transition:left .28s ease,top .28s ease,width .28s ease,background-color .28s ease,opacity .2s ease}
.dl-grid__tabcount{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--dl-code-bg);color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-fb.is-active .dl-grid__tabcount{color:var(--dl-ink-strong)}
.dl-grid__toolbar{display:flex;align-items:center;gap:6px;padding:10px;flex-wrap:wrap}
.dl-grid__spacer{flex:1}
.dl-grid__search{display:flex;align-items:center;gap:6px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius);padding:0 10px;background:var(--dl-surface);width:260px;max-width:100%;color:var(--dl-muted)}
.dl-grid__search input{border:none;outline:none;background:none;padding:7px 0;flex:1;min-width:0;font-family:inherit;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-grid__search:focus-within{box-shadow:0 0 0 3px var(--dl-accent-ring);border-color:var(--dl-accent)}
.dl-grid__badge{margin-left:5px;background:var(--dl-accent);color:var(--dl-white);border-radius:9px;padding:0 6px;font-size:calc(10.5px * var(--dl-font-scale))}
.dl-pop2{position:relative}
.dl-pop2__panel{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:240px;max-height:360px;overflow:auto;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:12px;flex-direction:column;gap:8px}
.dl-pop2__panel.is-open{display:flex}
.dl-pop2__title{font-size:calc(11px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted)}
.dl-pop2__field{display:flex;flex-direction:column;gap:3px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-f-label);font-weight:600;margin-bottom:6px}
.dl-pop2__field select{padding:6px 8px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface);color:var(--dl-ink);font-family:inherit}
.dl-grid__chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 10px 10px}
.dl-grid__bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 10px 10px;padding:8px 12px;border-radius:var(--dl-radius);background:var(--dl-accent-soft);color:var(--dl-ink);font-size:calc(13px * var(--dl-font-scale))}
.dl-grid__chips[hidden],.dl-grid__bulk[hidden]{display:none}
.dl-grid__wrap{overflow-x:auto;border-top:1px solid var(--dl-border-soft)}
.dl-grid__table{width:100%;border-collapse:collapse;font-size:calc(13px * var(--dl-font-scale))}
.dl-grid__table th{position:sticky;top:0;background:var(--dl-surface-alt);text-align:left;padding:var(--dl-grid-pad) 10px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);white-space:nowrap;border-bottom:1px solid var(--dl-border);user-select:none}
.dl-grid__table th.is-sortable{cursor:pointer}
.dl-grid__table th.is-sortable:hover{color:var(--dl-ink-strong)}
.dl-grid__table th i{opacity:.4;margin-left:3px}
.dl-grid__table th.is-sorted{color:var(--dl-accent)}
.dl-grid__table th.is-sorted i{opacity:1}
.dl-grid__table td{padding:var(--dl-grid-pad) 10px;border-bottom:1px solid var(--dl-border-soft);color:var(--dl-ink);vertical-align:middle}
.dl-grid__txt{max-width:320px}
/* list = kolom daftar: satu isi per baris (teks dipisah baris baru), tiap isi utuh satu baris (tidak terbungkus), lebar kolom mengikuti isi terpanjang. */
.dl-grid .dl-grid__txt.dl-grid__txt--list,.dl-grid.is-clamped .dl-grid__txt.dl-grid__txt--list{display:block;width:max-content;max-width:none;white-space:pre;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;line-clamp:unset}
/* grid dengan kolom daftar tidak melebar ke seluruh lebar: setiap kolom secukup isinya, sisa ruang dibiarkan kosong. */
.dl-grid .dl-grid__table:has(.dl-grid__txt--list){width:max-content;min-width:0}
.dl-grid__date{white-space:nowrap}
.dl-grid__link{color:var(--dl-accent);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.dl-grid__link i{font-size:.75em;opacity:.6}.dl-grid__link:hover{text-decoration:underline} /* tanggal selalu utuh, tidak terpotong jadi "10 Sep..." */
.dl-grid.is-clamped .dl-grid__txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--dl-grid-lines);line-clamp:var(--dl-grid-lines);overflow:hidden}
.dl-grid .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-grid__row{cursor:default}
.dl-grid__row:hover td{background:var(--dl-hover)}
.dl-grid__row.is-selected td{background:var(--dl-accent-soft)}
.dl-grid .dl-grid__row.is-hl td{background:var(--dl-accent-soft)!important;transition:background .6s}
.dl-grid__row.is-inactive td:not(.dl-grid__act){opacity:.55}
/* Baris bertanda (row-tone, user 2026-10-02): warna lembut + garis tegas di bawah baris; muted = huruf abu-abu saja. */
.dl-grid__row--danger{--rt:var(--dl-danger);--rt-bg:var(--dl-pink)}.dl-grid__row--tangerine{--rt:var(--dl-tangerine)}.dl-grid__row--yellow{--rt:var(--dl-yellow)}
.dl-grid__row--success{--rt:var(--dl-green)}.dl-grid__row--accent{--rt:var(--dl-accent)}
.dl-grid__row.is-toned td{background:color-mix(in srgb,var(--rt-bg,var(--rt)) 11%,var(--dl-surface));border-bottom:2px solid var(--rt)}
.dl-grid__row.is-toned:hover td{background:color-mix(in srgb,var(--rt-bg,var(--rt)) 20%,var(--dl-surface))}
/* Grid transaksional (kind="transactional"): polos, baris selang-seling warna lembut agar mudah dibaca; baris bertone / terpilih tidak ditimpa */
.dl-grid--tx .dl-grid__row:nth-child(even):not(.is-toned):not(.is-selected) td{background:var(--dl-surface-alt)}
.dl-grid--tx .dl-grid__row:nth-child(even):not(.is-toned):not(.is-selected):hover td{background:var(--dl-hover)}
.dl-grid__row--muted td{color:var(--dl-muted)}
.dl-grid__chk,.dl-grid__exp{width:34px;text-align:center!important}
.dl-grid__chk input{accent-color:var(--dl-accent);cursor:pointer}
.dl-grid__act{width:1%;white-space:nowrap;text-align:right!important}
.dl-grid__act .dl-iconbtn+.dl-iconbtn{margin-left:4px}
/* Grid Pre-Entry (user 2026-09-30): Aksi di kiri tanpa judul, ikon polos tanpa kotak. */
.dl-grid--entry .dl-grid__act{text-align:left!important;padding-right:2px!important}
.dl-grid--entry .dl-grid__act .dl-iconbtn{width:22px;height:22px;border-color:transparent;background:none;color:var(--dl-muted)}
.dl-grid--entry .dl-grid__act .dl-iconbtn+.dl-iconbtn{margin-left:2px}
.dl-grid--entry .dl-grid__act .dl-iconbtn:hover{color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-grid--entry .dl-grid__act .dl-iconbtn--success{color:var(--dl-green)}
.dl-grid--entry .dl-grid__act .dl-iconbtn--danger{color:var(--dl-danger)}
.dl-grid__chev{border:none;background:none;color:var(--dl-muted);cursor:pointer;padding:4px;transition:transform .15s}
.dl-grid__chev.is-open{transform:rotate(90deg);color:var(--dl-accent)}
.dl-grid__detail td{background:var(--dl-surface-alt)}
.dl-grid__detailbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 18px;padding:6px 44px}
.dl-grid__detailbox small{display:block;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-grid__group td{background:var(--dl-accent-soft);padding:0}
.dl-grid__group button{width:100%;text-align:left;border:none;background:none;padding:var(--dl-grid-pad) 12px;font-family:inherit;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink);cursor:pointer}
.dl-grid__group button span{color:var(--dl-muted);margin-left:6px}
.dl-grid__table tfoot td{background:var(--dl-surface-alt);border-top:2px solid var(--dl-border)}
.dl-grid [data-g-pager] .dl-pager{border-radius:0 0 var(--dl-radius-lg) var(--dl-radius-lg)}
@media (max-width:640px){.dl-grid__search{width:100%}.dl-grid__spacer{display:none}.dl-pop2__panel{right:auto;left:0}}
/* Grid for Reporting (mode=report): rapat, zebra, kepala tetap saat gulir, satu tombol Filter -> pop-up */
.dl-grid--report .dl-grid__table{font-size:calc(12px * var(--dl-font-scale))}
.dl-grid--report .dl-grid__wrap{max-height:70vh;overflow:auto}
.dl-grid--report .dl-grid__table thead{position:sticky;top:0;z-index:2}
.dl-grid--report .dl-grid__table th{position:static}
.dl-grid--report .dl-grid__row:nth-child(even):not(.is-toned):not(.is-selected) td{background:var(--dl-surface-alt)}
.dl-grid--report .dl-grid__row:hover td,.dl-grid--report .dl-grid__row:nth-child(even):not(.is-toned):not(.is-selected):hover td{background:var(--dl-hover)}
.dl-grid--report .dl-grid__txt{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-grid--report .dl-avatar-id__pic{display:none}
.dl-grid__fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 14px;margin-bottom:12px}
.dl-grid__fgrid input{padding:6px 8px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface);color:var(--dl-ink);font-family:inherit}
.dl-grid__count{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));font-variant-numeric:tabular-nums}

/* ================= SMALL COMPONENTS lanjutan (Part 2b) ================= */
.dl-badge--neutral{background:var(--dl-chip);color:var(--dl-ink)}
/* accordion */
.dl-accordion{border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);overflow:hidden}
.dl-accordion + .dl-accordion{margin-top:6px}
.dl-accordion__head{width:100%;display:flex;align-items:center;gap:8px;padding:10px 12px;border:none;background:none;font-family:inherit;font-weight:700;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong);cursor:pointer;text-align:left}
.dl-accordion__head:hover{background:var(--dl-hover)}
.dl-accordion__icon{color:var(--dl-accent);width:16px;text-align:center}
.dl-accordion__title{flex:1}
.dl-accordion.has-summary > .dl-accordion__head .dl-accordion__title{flex:0 0 auto}
.dl-accordion__summary{flex:1;min-width:0;text-align:right;color:var(--dl-muted);font-weight:500;font-size:calc(12.5px * var(--dl-font-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-accordion{transition:box-shadow .2s ease,border-color .2s ease}
.dl-accordion.is-open{border-color:color-mix(in srgb,var(--dl-accent) 35%,var(--dl-border));box-shadow:inset 3px 0 0 var(--dl-accent)}
.dl-accordion.is-open > .dl-accordion__head{background:var(--dl-accent-soft)}
.dl-accordion__head:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-accordion__badge--ok{background:#dcfce7;color:#166534}.dl-accordion__badge--warn{background:#fef3c7;color:#92400e}.dl-accordion__badge--danger{background:#fee2e2;color:#991b1b}
.dl-accordion__head .dl-accordion__badge{font-weight:700;padding:1px 9px}
.dl-accordion__badge{background:var(--dl-accent-soft);color:var(--dl-accent);border-radius:10px;padding:0 7px;font-size:calc(11px * var(--dl-font-scale))}
.dl-accordion__chev{color:var(--dl-muted);transition:transform .2s}
.dl-accordion.is-open > .dl-accordion__head .dl-accordion__chev{transform:rotate(180deg)}
.dl-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.dl-accordion.is-open > .dl-accordion__body{grid-template-rows:1fr}
.dl-accordion__inner{overflow:hidden;min-height:0;min-width:0}
.dl-accordion__pad{padding:0 12px 12px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink);line-height:1.5}
.dl-accgroup--horizontal{display:flex;gap:6px;height:var(--dl-acc-h)}
.dl-accgroup--horizontal > .dl-accordion{margin:0;display:flex;flex:0 0 46px;min-width:0;transition:flex-grow .25s ease}
.dl-accgroup--horizontal > .dl-accordion.is-open{flex:1 1 0}
.dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head{width:46px;flex:0 0 46px;writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 0;justify-content:flex-end;align-items:center}
.dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head .dl-accordion__icon{writing-mode:horizontal-tb;transform:rotate(180deg)}
.dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head .dl-accordion__chev{transform:rotate(90deg)}
.dl-accgroup--horizontal > .dl-accordion.is-open > .dl-accordion__head{background:var(--dl-accent-soft);color:var(--dl-accent);cursor:default}
.dl-accgroup--horizontal > .dl-accordion.is-open > .dl-accordion__head .dl-accordion__chev{transform:rotate(-90deg)}
.dl-accgroup--horizontal > .dl-accordion > .dl-accordion__body{flex:1;grid-template-rows:1fr;grid-template-columns:0fr;transition:grid-template-columns .25s ease}
.dl-accgroup--horizontal > .dl-accordion.is-open > .dl-accordion__body{grid-template-columns:1fr}
.dl-accgroup--horizontal .dl-accordion__pad{padding:14px;min-width:220px;height:100%;overflow:auto}
@media (max-width:640px){
  .dl-accgroup--horizontal{flex-direction:column;height:auto}
  .dl-accgroup--horizontal > .dl-accordion,.dl-accgroup--horizontal > .dl-accordion.is-open{flex:none;flex-direction:column}
  .dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head{width:100%;flex:none;writing-mode:horizontal-tb;transform:none;padding:10px 12px}
  .dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head .dl-accordion__icon,.dl-accgroup--horizontal > .dl-accordion > .dl-accordion__head .dl-accordion__chev{transform:none}
  .dl-accgroup--horizontal > .dl-accordion > .dl-accordion__body{grid-template-columns:1fr;grid-template-rows:0fr;transition:grid-template-rows .22s}
  .dl-accgroup--horizontal > .dl-accordion.is-open > .dl-accordion__body{grid-template-rows:1fr}
  .dl-accgroup--horizontal .dl-accordion__pad{min-width:0;height:auto}
  .dl-accgroup--horizontal > .dl-accordion.is-open > .dl-accordion__head .dl-accordion__chev{transform:rotate(180deg)}
}
/* slider (angka & tanggal) */
.dl-slider{display:flex;flex-direction:column;gap:4px;--a:0;--b:0;--t:18px}
.dl-slider__track{position:relative;height:24px}
.dl-slider__rail{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:var(--dl-f-line)}
.dl-slider__fill{position:absolute;top:0;bottom:0;left:calc(var(--t) / 2 + (100% - var(--t)) * var(--a) / 100);width:calc((100% - var(--t)) * (var(--b) - var(--a)) / 100);background:var(--dl-accent);border-radius:3px}
.dl-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.dl-slider:not(.is-range) .dl-slider__input{pointer-events:auto;cursor:pointer}
.dl-slider__input::-webkit-slider-runnable-track{background:none;border:none}
.dl-slider__input::-moz-range-track{background:none;border:none}
.dl-slider__input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:var(--t);height:var(--t);border-radius:50%;background:var(--dl-surface);border:3px solid var(--dl-accent);box-shadow:0 1px 4px rgba(15,22,45,.3);cursor:grab}
.dl-slider__input::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--dl-surface);border:3px solid var(--dl-accent);box-shadow:0 1px 4px rgba(15,22,45,.3);cursor:grab}
.dl-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--dl-accent-ring)}
.dl-slider__input:disabled::-webkit-slider-thumb{border-color:var(--dl-f-line);cursor:not-allowed}
.dl-slider__ticks{position:relative;height:16px;font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-slider__ticks span{position:absolute;top:2px;left:calc(var(--t) / 2 + (100% - var(--t)) * var(--p) / 100);transform:translateX(-50%);white-space:nowrap}
.dl-slider__ticks span::before{content:"";position:absolute;left:50%;top:-5px;height:4px;border-left:1px solid var(--dl-f-line)}
.dl-slider__ticks span:first-child{transform:none;left:0}
.dl-slider__ticks span:last-child{transform:none;left:auto;right:0}
.dl-slider__ticks span:first-child::before{left:calc(var(--t) / 2)}
.dl-slider__ticks span:last-child::before{left:auto;right:calc(var(--t) / 2)}
.dl-slider__value{font-size:calc(12px * var(--dl-font-scale));font-weight:700;color:var(--dl-accent)}
.dl-slider--vertical{display:grid;grid-template-columns:24px auto;grid-template-rows:var(--dl-slider-h) auto;column-gap:8px;row-gap:6px;width:max-content}
.dl-slider--vertical .dl-slider__track{height:auto;width:24px}
.dl-slider--vertical .dl-slider__rail{left:50%;right:auto;top:0;bottom:0;width:6px;height:auto;margin:0 0 0 -3px}
.dl-slider--vertical .dl-slider__fill{left:0;right:0;width:auto;top:auto;bottom:calc(var(--t) / 2 + (100% - var(--t)) * var(--a) / 100);height:calc((100% - var(--t)) * (var(--b) - var(--a)) / 100)}
.dl-slider--vertical .dl-slider__input{writing-mode:vertical-lr;direction:rtl}
.dl-slider--vertical .dl-slider__ticks{height:auto;width:auto;min-width:34px}
.dl-slider--vertical .dl-slider__ticks span,.dl-slider--vertical .dl-slider__ticks span:first-child,.dl-slider--vertical .dl-slider__ticks span:last-child{top:auto;left:0;right:auto;bottom:calc(var(--t) / 2 + (100% - var(--t)) * var(--p) / 100);transform:translateY(50%)}
.dl-slider--vertical .dl-slider__ticks span::before{display:none}
.dl-slider--vertical .dl-slider__value{grid-column:1 / 3}
/* rating */
.dl-rating__star.is-active{color:var(--dl-star)}
.dl-rating__star.is-half{background:linear-gradient(90deg,var(--dl-star) 50%,var(--dl-f-line) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-rating--lg{height:40px}
.dl-rating--lg .dl-rating__star{font-size:calc(30px * var(--dl-font-scale))}
.dl-rating.is-readonly .dl-rating__star{cursor:default}
/* status card */
.dl-scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.dl-scard{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--dl-radius-lg);border:1px solid var(--dl-border);border-left:4px solid var(--dl-sc,var(--dl-accent));background:var(--dl-surface);text-align:left;font-family:inherit;color:var(--dl-ink);width:100%}
.dl-scard--success{--dl-sc:var(--dl-green)}.dl-scard--warn{--dl-sc:var(--dl-amber-2)}.dl-scard--danger{--dl-sc:var(--dl-danger)}.dl-scard--info{--dl-sc:var(--dl-accent)}.dl-scard--neutral{--dl-sc:var(--dl-muted)}
.dl-scard.is-filter{cursor:pointer}
.dl-scard.is-filter:hover{background:var(--dl-hover)}
.dl-scard.is-active{background:var(--dl-accent-soft);box-shadow:0 0 0 2px var(--dl-accent-ring)}
.dl-scard__icon{flex:0 0 38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--dl-sc,var(--dl-accent)) 14%,var(--dl-surface));color:var(--dl-sc,var(--dl-accent));font-size:16px}
.dl-scard__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dl-scard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px 8px;flex-wrap:wrap}
.dl-scard__title{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong);line-height:1.3}
.dl-scard__top .dl-badge{flex-shrink:0;white-space:nowrap}
.dl-scard__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle}
.dl-scard--success .dl-scard__dot{animation:dl-pulse 1.6s infinite}
@keyframes dl-pulse{50%{opacity:.25}}
.dl-scard__value{font-size:calc(18px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);font-variant-numeric:tabular-nums}
.dl-scard__desc{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-scard__meta{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
/* signature */
.dl-sign__pad{position:relative;height:var(--dl-sign-h);border:1.5px dashed var(--dl-f-line);border-radius:var(--dl-radius);background:var(--dl-surface)}
.dl-sign.is-signed .dl-sign__pad{border-style:solid;border-color:var(--dl-accent)}
.dl-sign__pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:1}
.dl-sign.is-readonly canvas{cursor:default}
.dl-sign__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--dl-muted);font-size:calc(13px * var(--dl-font-scale));pointer-events:none}
.dl-sign__line{position:absolute;left:24px;right:24px;bottom:34px;border-bottom:1px solid var(--dl-f-line);pointer-events:none}
.dl-sign__bar{display:flex;align-items:center;gap:4px;margin-top:4px;flex-wrap:wrap}
.dl-sign__status{flex:1;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);font-weight:600}
.dl-sign.is-signed .dl-sign__status{color:var(--dl-green)}
/* credit card */
.dl-cc{display:flex;flex-direction:column;gap:6px;max-width:340px}
.dl-cc__card{position:relative;aspect-ratio:1.586;border-radius:14px;padding:18px;color:var(--dl-white);background:linear-gradient(135deg,var(--dl-navy),color-mix(in srgb,var(--dl-accent) 70%,var(--dl-navy)));display:flex;flex-direction:column;justify-content:flex-end;gap:12px;box-shadow:var(--dl-shadow-pop);margin-bottom:6px;overflow:hidden}
:root{--dl-cc-visa-a:#1a1f71;--dl-cc-visa-b:#2b54c4;--dl-cc-master-a:#222222;--dl-cc-master-b:#5a3a14;--dl-cc-amex-a:#0b6e8f;--dl-cc-amex-b:#2fa3c7;--dl-cc-jcb-a:#0b5d3a;--dl-cc-jcb-b:#1d7fc2;--dl-cc-chip-a:#e8c77a;--dl-cc-chip-b:#b8913d}
.dl-cc__card[data-brand=visa]{background:linear-gradient(135deg,var(--dl-cc-visa-a),var(--dl-cc-visa-b))}
.dl-cc__card[data-brand=mastercard]{background:linear-gradient(135deg,var(--dl-cc-master-a),var(--dl-cc-master-b))}
.dl-cc__card[data-brand=amex]{background:linear-gradient(135deg,var(--dl-cc-amex-a),var(--dl-cc-amex-b))}
.dl-cc__card[data-brand=jcb]{background:linear-gradient(135deg,var(--dl-cc-jcb-a),var(--dl-cc-jcb-b))}
.dl-cc__chip{position:absolute;left:18px;top:18px;width:40px;height:30px;border-radius:6px;background:linear-gradient(135deg,var(--dl-cc-chip-a),var(--dl-cc-chip-b))}
.dl-cc__logo{position:absolute;right:18px;top:14px;font-size:34px;opacity:.95}
.dl-cc__num{font-family:var(--dl-font-mono);font-size:clamp(15px,4.4vw,20px);letter-spacing:.06em;white-space:nowrap}
.dl-cc__row{display:flex;justify-content:space-between;gap:10px}
.dl-cc__row small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em}
.dl-cc__row b{font-size:12.5px;letter-spacing:.04em;font-family:var(--dl-font-mono)}
.dl-cc__lbl{display:block;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-f-label);font-weight:600;margin-bottom:2px}
.dl-cc__icon{margin-left:8px;font-size:18px;color:var(--dl-accent)}
.dl-cc__brandname{margin-right:8px;font-size:calc(11px * var(--dl-font-scale));font-weight:700;color:var(--dl-accent);white-space:nowrap}
.dl-cc__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl-cc [data-dl-cc-num]{font-family:var(--dl-font-mono);letter-spacing:.04em}
/* phone */
.dl-phone__read{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);margin-top:3px;min-height:14px}

/* ================= LINES / MASTER-DETAIL (Part 5c) ================= */
.dl-lines{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface);margin-top:12px}
.dl-lines__head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--dl-border-soft)}
.dl-lines__head b{font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-lines__count{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);background:var(--dl-chip);border-radius:10px;padding:1px 8px}
.dl-lines__spacer{flex:1}
.dl-lines__wrap{overflow-x:auto}
.dl-lines__table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-lines__table th{background:var(--dl-surface-alt);text-align:left;padding:7px 8px;font-size:calc(11px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);white-space:nowrap;border-bottom:1px solid var(--dl-border)}
.dl-lines__table td{padding:3px 4px;border-bottom:1px solid var(--dl-border-soft);vertical-align:middle}
.dl-lines__table .num{text-align:right}
.dl-lines__no{width:34px;text-align:center!important;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-lines__in{width:100%;min-width:70px;border:1px solid transparent;border-radius:var(--dl-radius-sm);background:none;padding:6px 7px;font-family:inherit;font-size:inherit;color:var(--dl-f-ink)}
.dl-lines__in:hover{border-color:var(--dl-f-line)}
.dl-lines__in:focus{outline:none;border-color:var(--dl-accent);background:var(--dl-surface);box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-lines__num{text-align:right;font-variant-numeric:tabular-nums}
.dl-lines__ro{padding:6px 10px!important;color:var(--dl-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-lines__txt,.dl-lines__lk{position:relative}
.dl-lines__txt .dl-lines__in{padding-right:30px}
.dl-lines__case{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;border-radius:4px;background:var(--dl-f-badge);color:var(--dl-f-badge-ink);font-size:10px;font-weight:700;padding:1px 4px;cursor:pointer;opacity:0}
.dl-lines__txt:focus-within .dl-lines__case,.dl-lines__txt:hover .dl-lines__case{opacity:1}
.dl-lines__lk i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--dl-muted);font-size:11px;pointer-events:none}
.dl-lines__table td.is-invalid .dl-lines__in{border-color:var(--dl-danger);background:var(--dl-danger-soft)}
.dl-lines__act{width:70px;white-space:nowrap;text-align:right}
.dl-lines__table tfoot td{background:var(--dl-surface-alt);padding:7px 10px;border-top:2px solid var(--dl-border)}
.dl-lines__pick{text-align:center;white-space:nowrap}
.dl-lines__empty{text-align:center;color:var(--dl-muted);padding:16px!important}
.dl-lines__pop{position:absolute;z-index:300;max-height:260px;overflow:auto;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop)}
.dl-lines__pop tr[data-key]{cursor:pointer}
.dl-lines__pop tr[data-key]:hover td{background:var(--dl-hover)}
.dl-lines__totals{margin-left:auto;width:min(340px,100%);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-lines__totals > div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dl-lines__totals b{font-variant-numeric:tabular-nums;color:var(--dl-ink-strong)}
.dl-lines__grand{border-top:2px solid var(--dl-border);padding-top:8px;font-size:calc(14.5px * var(--dl-font-scale))}
.dl-lines__grand b{color:var(--dl-accent)}
.dl-lines__table th{padding:6px 8px}.dl-lines__table td{padding:2px 4px}.dl-lines__in{padding:5px 7px}
.dl-lines__table .dl-lines__no{width:48px;min-width:48px;max-width:48px;white-space:nowrap}.dl-lines__table .dl-lines__act{min-width:70px;max-width:70px}
.dl-lines__table :is(th,td):is(.dl-lines__no,.dl-lines__fzl,.dl-lines__fzr,.dl-lines__act){position:sticky;z-index:1;background:var(--dl-surface)}
.dl-lines__table th:is(.dl-lines__no,.dl-lines__fzl,.dl-lines__fzr,.dl-lines__act){background:var(--dl-surface-alt);z-index:2}
.dl-lines__table .dl-lines__no{left:0}.dl-lines__table .dl-lines__fzl{left:48px;box-shadow:inset -1px 0 0 var(--dl-border-soft)}
.dl-lines__table .dl-lines__act{right:0}.dl-lines__table .dl-lines__fzr{right:70px;box-shadow:inset 1px 0 0 var(--dl-border-soft)}
.dl-lines.is-readonly .dl-lines__table .dl-lines__fzr{right:0}
.dl-lines__exp{border:none;background:none;cursor:pointer;color:var(--dl-muted);padding:2px 4px;margin-right:2px;font-size:10px;position:relative;transition:transform .15s}
.dl-lines__exp:hover{color:var(--dl-accent)}.dl-lines__exp.is-open i{transform:rotate(90deg)}.dl-lines__exp i{transition:transform .15s}
.dl-lines__exp.has-val::after{content:"";position:absolute;right:0;top:1px;width:5px;height:5px;border-radius:50%;background:var(--dl-accent)}
.dl-lines__more > td{background:var(--dl-surface-alt)!important;padding:6px 10px 8px!important;border-bottom:1px solid var(--dl-border)}
.dl-lines__moregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 14px;max-width:1100px}
.dl-lines__mf{display:flex;flex-direction:column;gap:1px;min-width:0}
.dl-lines__mf > span{font-size:calc(10.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.03em}
.dl-lines__mt{width:100%;border-collapse:collapse}.dl-lines__mt td{padding:0!important;border:none!important;background:none!important;position:relative}
.dl-lines__mt .dl-lines__in{border-color:var(--dl-f-line);background:var(--dl-surface)}
.dl-lines__footer{display:grid;grid-template-columns:minmax(0,1fr) min(320px,100%);gap:14px;align-items:start;border-top:1px solid var(--dl-border);background:var(--dl-surface-alt);border-radius:0 0 var(--dl-radius-lg) var(--dl-radius-lg);padding:6px 10px 10px}
.dl-lines__adj .dl-tabs__bar{border-bottom-color:var(--dl-border-soft)}
.dl-lines__adj .dl-tabs__panel{padding:8px 0 0}
.dl-lines__adjrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-lines__adjin{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:4px 6px;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
.dl-lines__adjt{width:100%;max-width:520px;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-lines__adjt th{text-align:left;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.03em;padding:2px 4px}
.dl-lines__adjt td{padding:2px 4px}.dl-lines__adjt .num{text-align:right}
.dl-lines__adjt td:first-child{white-space:nowrap}
.dl-lines__adjt .dl-lines__adjin{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.dl-lines__adjt th:nth-child(2),.dl-lines__adjt td:nth-child(2){width:80px}.dl-lines__adjt th:nth-child(3),.dl-lines__adjt td:nth-child(3){width:150px}
.dl-lines__adjt tfoot td{border-top:1px solid var(--dl-border);font-weight:700;padding-top:5px;font-variant-numeric:tabular-nums}
.dl-lines__adjt .dl-lines__chk{width:44px;text-align:center}
.dl-lines__dpp{border-top:1px dashed var(--dl-border);padding-top:4px}
.dl-lines__tools{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.dl-lines__tools .dl-field{min-width:200px;margin:0}
.dl-lines__head{flex-wrap:wrap}
.dl-docfoot{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);margin-top:6px}
.dl-lines__left{display:grid;grid-template-columns:minmax(0,560px) minmax(220px,1fr);gap:8px 16px;align-items:start;min-width:0}
.dl-lines__left > .dl-lines__words{margin-top:38px}
.dl-lines__left > :only-child{grid-column:1/-1;margin-top:0}
@media(max-width:1100px){.dl-lines__left{grid-template-columns:1fr}.dl-lines__left > .dl-lines__words{margin-top:0}}
.dl-lines__words{padding:8px 12px;border:1px dashed var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-lines__words > span{display:block;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dl-muted);margin-bottom:2px}
.dl-lines__words > i{color:var(--dl-ink-strong);font-weight:600}
.dl-lines__sign{display:block;font-size:calc(10px * var(--dl-font-scale));color:var(--dl-muted);font-weight:400}
.dl-lines__hint{margin:6px 0 0;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-lines__footer .dl-lines__totals{margin:0;width:auto;padding:8px 12px;gap:4px;background:var(--dl-surface);border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius-lg)}
.dl-lines__sumh{font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dl-muted)}
.dl-lines__footer > .dl-lines__totals:only-child{grid-column:2}
@media(max-width:700px){.dl-lines__footer{grid-template-columns:1fr}.dl-lines__footer > .dl-lines__totals:only-child{grid-column:1}}
.dl-form__strip{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.dl-form__strip > *{min-width:0}
.dl-form__strip .dl-field{flex:1 1 200px;margin:0;align-self:center}
.dl-strip__kv{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius-lg);background:var(--dl-surface-alt);text-align:right}
.dl-strip__kv > span{font-size:calc(10.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dl-strip__kv > b{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-strip__doc{text-align:left;background:var(--dl-accent-soft);border-color:transparent;box-shadow:inset 3px 0 0 var(--dl-accent)}
.dl-strip__doc > b{font-size:calc(20px * var(--dl-font-scale));font-family:var(--dl-font-mono);color:var(--dl-accent);letter-spacing:.02em}
.dl-strip__gap{flex:1 1 0;min-width:0}
.dl-strip__grand{background:var(--dl-accent);border-color:var(--dl-accent);min-width:190px}
.dl-strip__grand > span{color:color-mix(in srgb,var(--dl-white) 80%,transparent)}
.dl-strip__grand > b{font-size:calc(21px * var(--dl-font-scale));color:var(--dl-white)}
.dl-form__detail{margin-top:6px}.dl-form__detail > .dl-lines{margin-top:0}
.dl-lines__err{color:var(--dl-danger);font-size:calc(12px * var(--dl-font-scale));font-weight:600;padding:0 12px 8px}
.dl-lines__err:empty{display:none}

/* ================= APPROVAL (Part 5d) ================= */
.dl-appr__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dl-appr__head h2{margin:0;font-size:calc(17px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-appr__grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:12px;align-items:start}
.dl-appr__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.dl-appr__log{border-top:1px solid var(--dl-border);padding-top:10px}
.dl-appr__log ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dl-appr__log li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-appr__log small{display:block;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-appr__log q{display:block;color:var(--dl-muted);font-style:italic;font-size:calc(11px * var(--dl-font-scale))}
.dl-appr__list{display:flex;flex-direction:column;gap:6px}
.dl-appr__item{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--dl-border);border-left:4px solid var(--dl-amber-2);border-radius:var(--dl-radius);background:var(--dl-surface);cursor:pointer;font-family:inherit;color:var(--dl-ink)}
.dl-appr__item:hover{background:var(--dl-hover)}
.dl-appr__item.is-active{background:var(--dl-accent-soft);border-color:var(--dl-accent-ring);border-left-color:var(--dl-accent)}
.dl-appr__item.is-held{border-left-color:var(--dl-disabled)}
.dl-appr__item .dl-badge{align-self:flex-start}
.dl-appr__row{display:flex;justify-content:space-between;gap:8px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-appr__sub{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-appr__detail{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:16px;display:flex;flex-direction:column;gap:14px}
.dl-appr__detail.is-empty{display:none}
.dl-appr--single .dl-appr__head,.dl-appr--single .dl-appr__side{display:none}
.dl-appr--single .dl-appr__grid{grid-template-columns:1fr}
.dl-appr__title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.dl-appr__lv{align-self:flex-start;font-size:calc(10.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-amber-2);background:color-mix(in srgb,var(--dl-amber-2) 12%,var(--dl-surface));border-radius:999px;padding:1px 8px}
.dl-appr__level{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dl-appr__meter{display:flex;gap:4px}
.dl-appr__meter i{width:28px;height:6px;border-radius:3px;background:var(--dl-border)}
.dl-appr__meter i.is-done{background:var(--dl-green)}
.dl-appr__meter i.is-current{background:var(--dl-amber-2)}
.dl-appr__meter i.is-rejected{background:var(--dl-danger)}
.dl-appr__lvtag{font-size:calc(10.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.03em}
.dl-appr__held{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:var(--dl-radius);background:color-mix(in srgb,var(--dl-disabled) 12%,var(--dl-surface));border:1px dashed var(--dl-border);font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-appr__held > i{margin-top:2px;color:var(--dl-muted)}
.dl-appr__held small{display:block;color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-appr__open{font-size:.75em;color:var(--dl-accent);margin-left:4px}
.dl-appr__title h3{margin:0;font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-appr__title p{margin:3px 0 0;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-appr__summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;background:var(--dl-surface-alt);border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius);padding:12px}
.dl-appr__summary small{display:block;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-appr__summary b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-appr__lines{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-appr__lines th{text-align:left;padding:6px 8px;background:var(--dl-surface-alt);color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));border-bottom:1px solid var(--dl-border)}
.dl-appr__lines td{padding:6px 8px;border-bottom:1px solid var(--dl-border-soft)}
.dl-appr__lines .num{text-align:right;font-variant-numeric:tabular-nums}
.dl-appr__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl-appr__cap{margin:0 0 8px;font-size:calc(11px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted)}
.dl-appr__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dl-appr__steps li{position:relative;display:grid;grid-template-columns:26px 1fr;column-gap:8px;padding-bottom:14px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-appr__steps li::before{content:"";position:absolute;left:11px;top:22px;bottom:0;border-left:2px solid var(--dl-border)}
.dl-appr__steps li:last-child::before{display:none}
.dl-appr__steps li > :not(.dl-appr__dot){grid-column:2}
.dl-appr__steps small{display:block;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-appr__dot{grid-row:1 / 3;width:22px;height:22px;border-radius:50%;border:2px solid var(--dl-border);background:var(--dl-surface);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dl-white)}
.dl-appr__steps .is-done .dl-appr__dot{background:var(--dl-green);border-color:var(--dl-green)}
.dl-appr__steps .is-done::before{border-color:var(--dl-green)}
.dl-appr__steps .is-current .dl-appr__dot{border-color:var(--dl-amber-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--dl-amber-2) 22%,transparent)}
.dl-appr__steps .is-rejected .dl-appr__dot{background:var(--dl-danger);border-color:var(--dl-danger)}
.dl-appr__hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dl-appr__hist li{display:flex;gap:10px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-appr__hist li > i{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--dl-accent-soft);color:var(--dl-accent);display:flex;align-items:center;justify-content:center;font-size:10px}
.dl-appr__hist small{display:block;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-appr__hist q{display:block;margin-top:3px;font-style:italic;color:var(--dl-ink)}
.dl-appr__action{border-top:1px solid var(--dl-border);padding-top:12px}
.dl-appr__buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
@media (max-width:760px){.dl-appr__grid,.dl-appr__cols{grid-template-columns:1fr}}

/* ================= WIZARD (Part 5e) ================= */
.dl-wizard{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);display:flex;flex-direction:column}
.dl-wizard__title{padding:14px 16px 0;font-size:calc(16px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
.dl-wizard__steps{list-style:none;margin:0;padding:14px 16px;display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--dl-border-soft)}
.dl-wizard__steps li{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;position:relative;padding-right:14px;color:var(--dl-muted);cursor:default}
.dl-wizard__steps li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--dl-border);margin-left:6px;min-width:16px}
.dl-wizard__steps li.is-done::after{background:var(--dl-green)}
.dl-wizard__steps li.is-done,.dl-wizard__steps li.is-reached{cursor:pointer}
.dl-wizard__num{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--dl-border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(12px * var(--dl-font-scale));background:var(--dl-surface)}
.dl-wizard__steps li.is-active .dl-wizard__num{border-color:var(--dl-accent);background:var(--dl-accent);color:var(--dl-white)}
.dl-wizard__steps li.is-done .dl-wizard__num{border-color:var(--dl-green);background:var(--dl-green);color:var(--dl-white)}
.dl-wizard__lbl{display:flex;flex-direction:column;line-height:1.2;font-size:calc(12.5px * var(--dl-font-scale));font-weight:600;white-space:nowrap}
.dl-wizard__lbl small{font-size:calc(10.5px * var(--dl-font-scale));font-weight:500;color:var(--dl-muted)}
.dl-wizard__steps li.is-active .dl-wizard__lbl{color:var(--dl-ink-strong)}
.dl-wizard__body{padding:16px}
.dl-wizard__step[hidden]{display:none}
.dl-wizard__hint{margin:0 0 12px;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-wizard__foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--dl-border-soft)}
.dl-wizard__pos{flex:1;text-align:center;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-wizard__foot [hidden]{display:none}
.dl-wizard__sum{border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius);margin-bottom:10px}
.dl-wizard__sumhead{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--dl-surface-alt);border-bottom:1px solid var(--dl-border-soft)}
.dl-wizard__sum dl{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:6px 14px;margin:0;padding:10px 12px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-wizard__sum dt{color:var(--dl-muted)}
.dl-wizard__sum dd{margin:0;color:var(--dl-ink-strong);font-weight:600;word-break:break-word}
.dl-wizard__none{color:var(--dl-muted);font-weight:400}
@media (max-width:640px){.dl-wizard__lbl{display:none}.dl-wizard__steps li{min-width:0}}

/* ================= KANBAN (Part 5f) ================= */
.dl-kanban{display:flex;flex-direction:column;gap:10px}
.dl-kanban__bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dl-kanban__board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:8px;min-height:320px}
.dl-kcol{flex:0 0 280px;display:flex;flex-direction:column;max-height:calc(100vh - 180px);background:var(--dl-chip);border-radius:var(--dl-radius-lg);border-top:4px solid var(--dl-kc,var(--dl-accent))}
.dl-kcol--success{--dl-kc:var(--dl-green)}.dl-kcol--warn{--dl-kc:var(--dl-amber-2)}.dl-kcol--danger{--dl-kc:var(--dl-danger)}.dl-kcol--neutral{--dl-kc:var(--dl-muted)}.dl-kcol--violet{--dl-kc:var(--dl-violet)}
.dl-kcol.is-target{box-shadow:0 0 0 2px var(--dl-accent-ring);background:var(--dl-accent-soft)}
.dl-kcol.is-denied{box-shadow:0 0 0 2px var(--dl-danger);cursor:not-allowed}
.dl-kcol__head{display:flex;align-items:center;gap:8px;padding:10px 12px}
.dl-kcol__title{flex:1;font-weight:700;font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-ink-strong);border-radius:4px;padding:2px 4px;outline:none}
.dl-kcol__title:focus{background:var(--dl-surface);box-shadow:0 0 0 2px var(--dl-accent-ring)}
.dl-kcol__count{font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;background:var(--dl-surface);color:var(--dl-muted);border-radius:10px;padding:1px 8px}
.dl-kcol.is-over .dl-kcol__count{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-kcol__body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:0 10px 4px;min-height:40px}
.dl-kcol__empty{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);text-align:center;padding:10px;list-style:none}
.dl-kcol__foot{padding:6px 10px 10px}
.dl-kcol__add{width:100%;text-align:left;border:none;background:none;padding:7px 8px;border-radius:var(--dl-radius-sm);color:var(--dl-muted);font-family:inherit;font-weight:600;font-size:calc(12.5px * var(--dl-font-scale));cursor:pointer}
.dl-kcol__add:hover{background:var(--dl-hover);color:var(--dl-ink)}
.dl-kcol__composer{display:flex;flex-direction:column;gap:6px}
.dl-kcol__composer[hidden]{display:none}
.dl-kcol__composer textarea,.dl-kcol__composer input,.dl-kmodal__in,.dl-kmodal__desc{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:6px 8px;font-family:inherit;font-size:calc(12.5px * var(--dl-font-scale));background:var(--dl-surface);color:var(--dl-f-ink);width:100%}
.dl-kcard{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);padding:10px;cursor:grab;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(15,22,45,.06)}
.dl-kcard:hover{border-color:var(--dl-accent-ring)}
.dl-kcard:focus-visible{outline:2px solid var(--dl-accent)}
.dl-kcard{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dl-kcard.is-drag{display:none}
.dl-kcard--ghost{position:fixed;z-index:400;margin:0;pointer-events:none;transform:rotate(4deg);box-shadow:0 12px 28px rgba(15,22,45,.3);cursor:grabbing;opacity:.97}
.dl-kanban.is-dragging,.dl-kanban.is-dragging *{cursor:grabbing!important}
.dl-kcol__body:has(.dl-kcard__ph) .dl-kcol__empty{display:none}
.dl-kanban__undo{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:320;display:flex;align-items:center;gap:14px;background:var(--dl-toast);color:var(--dl-white);padding:10px 16px;border-radius:var(--dl-radius);font-size:calc(13px * var(--dl-font-scale))}
.dl-kanban__undo[hidden]{display:none}
.dl-kanban__undo button{border:none;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px 2px}
.dl-kcard__ph{height:52px;border:2px dashed var(--dl-accent-ring);border-radius:var(--dl-radius);background:var(--dl-accent-soft)}
.dl-kcard__tags{display:flex;gap:4px;flex-wrap:wrap}
.dl-kcard__title{font-weight:600;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-kcard__desc{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dl-kcard__foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-kcard__spacer{flex:1}
.dl-kcard__prio{font-weight:700;border-radius:4px;padding:1px 6px}
.dl-kcard__prio.is-high{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-kcard__prio.is-medium{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:var(--dl-amber)}
.dl-kcard__prio.is-low{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-kcard__due.is-late{color:var(--dl-danger);font-weight:700}
.dl-kcard__ck.is-done{color:var(--dl-green);font-weight:700}
.dl-kcard__av{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--dl-navy);color:var(--dl-white);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.dl-kcard__menu{border:none;background:none;color:var(--dl-muted);cursor:pointer;padding:2px 5px;border-radius:4px}
.dl-kcard__menu:hover{background:var(--dl-hover);color:var(--dl-ink)}
.dl-kanban__addcol{flex:0 0 240px;border:2px dashed var(--dl-border);border-radius:var(--dl-radius-lg);background:none;padding:14px;color:var(--dl-muted);font-family:inherit;font-weight:600;cursor:pointer}
.dl-kanban__addcol:hover{background:var(--dl-hover);color:var(--dl-ink)}
.dl-kanban__menu{position:absolute;z-index:320;min-width:180px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:6px;display:flex;flex-direction:column}
.dl-kanban__menutitle{font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;color:var(--dl-muted);padding:4px 8px}
.dl-kanban__menu button{border:none;background:none;text-align:left;padding:7px 8px;border-radius:4px;font-family:inherit;color:var(--dl-ink);cursor:pointer}
.dl-kanban__menu button:hover:not(:disabled){background:var(--dl-hover)}
.dl-kanban__menu button:disabled{color:var(--dl-disabled);opacity:.5;cursor:not-allowed}
.dl-kmodal__box{max-width:860px;width:calc(100% - 32px)}
.dl-kmodal__titlewrap{flex:1;display:flex;flex-direction:column}
.dl-kmodal__title{border:1px solid transparent;border-radius:4px;font-family:inherit;font-size:calc(16px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);padding:3px 6px;background:none}
.dl-kmodal__title:focus{border-color:var(--dl-accent);outline:none;background:var(--dl-surface)}
.dl-kmodal__titlewrap small{padding-left:6px;color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-kmodal__body{display:grid;grid-template-columns:1fr 280px;gap:16px;padding:14px 18px;max-height:65vh;overflow:auto}
.dl-kmodal__cap{margin:14px 0 6px;font-size:calc(12.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);display:flex;gap:6px;align-items:center}
.dl-kmodal__cap span{margin-left:auto;color:var(--dl-muted);font-weight:600}
.dl-kmodal__desc{resize:vertical}
.dl-kmodal__ck{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.dl-kmodal__ck li{display:flex;justify-content:space-between;align-items:center}
.dl-kmodal__ck .is-done{text-decoration:line-through;color:var(--dl-muted)}
.dl-kmodal__ck button{border:none;background:none;color:var(--dl-muted);cursor:pointer}
.dl-kmodal__act{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:calc(12px * var(--dl-font-scale))}
.dl-kmodal__act li{display:flex;gap:8px}
.dl-kmodal__act small{display:block;color:var(--dl-muted)}
.dl-kmodal__act q{display:block;margin-top:3px;background:var(--dl-surface-alt);border:1px solid var(--dl-border-soft);border-radius:6px;padding:5px 8px;quotes:none}
@media (max-width:760px){.dl-kmodal__body{grid-template-columns:1fr}.dl-kcol{flex-basis:84vw}}

/* ================= TERBILANG ================= */
.dl-words__text{margin-top:4px;padding:5px 8px;border-left:3px solid var(--dl-accent);background:var(--dl-accent-soft);border-radius:0 var(--dl-radius-sm) var(--dl-radius-sm) 0;font-size:calc(12px * var(--dl-font-scale));font-style:italic;color:var(--dl-ink-strong);line-height:1.4}
.dl-words__text.is-empty{display:none}
.dl-words__input{text-align:right;font-variant-numeric:tabular-nums}

/* Kanban popup gaya mockup (bilah aksi + popover) */
.dl-kmodal__head{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 6px}
.dl-kmodal__hicon{color:var(--dl-accent);font-size:20px;margin-top:6px}
.dl-kmodal__actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.dl-kmodal__ag{position:relative}
.dl-kmodal__abtn{border:none;background:var(--dl-chip);color:var(--dl-ink);border-radius:var(--dl-radius-sm);padding:6px 10px;font-family:inherit;font-weight:600;font-size:calc(12.5px * var(--dl-font-scale));cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.dl-kmodal__abtn:hover,.dl-kmodal__abtn.is-on{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-kpop{position:absolute;left:0;top:calc(100% + 4px);z-index:5;width:280px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:10px;display:flex;flex-direction:column;gap:8px}
.dl-kpop__head{display:flex;justify-content:center;position:relative;font-weight:700;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong);padding-bottom:6px;border-bottom:1px solid var(--dl-border-soft)}
.dl-kpop__head button{position:absolute;right:0;top:-3px;border:none;background:none;font-size:18px;color:var(--dl-muted);cursor:pointer}
.dl-kpop__lbl{font-size:calc(11.5px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label)}
.dl-kpop__list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.dl-kpop__row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;cursor:pointer;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-kpop__row:hover{background:var(--dl-hover)}
.dl-kpop__opt{border:none;background:none;text-align:left;padding:6px 8px;border-radius:4px;font-family:inherit;color:var(--dl-ink);cursor:pointer}
.dl-kpop__opt:hover:not(:disabled),.dl-kpop__opt.is-active{background:var(--dl-accent-soft)}
.dl-kpop__opt:disabled{opacity:.45;cursor:not-allowed}
.dl-kmodal__meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px}
.dl-kmodal__meta > div{display:flex;flex-direction:column;gap:4px}
.dl-kmodal__meta > div > span:first-child{font-size:calc(11px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted)}
.dl-kmodal__meta .dl-row{gap:4px}
.dl-kmodal__descview{min-height:60px;padding:10px 12px;border-radius:var(--dl-radius);background:var(--dl-chip);font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink);white-space:pre-wrap;cursor:pointer}
.dl-kmodal__descview.is-empty{color:var(--dl-muted)}
.dl-kmodal__descview:hover{background:var(--dl-hover)}
.dl-kmodal__ckhead{display:flex;justify-content:space-between;align-items:center}
.dl-btn--danger-soft{background:var(--dl-danger-soft);color:var(--dl-danger);border:none}
.dl-kmodal__pct{display:flex;align-items:center;gap:8px;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-kmodal__pct .dl-progress__track{flex:1}
.dl-progress__bar.is-done{background:var(--dl-green)}
.dl-kmodal__additem{border:none;background:var(--dl-chip);border-radius:var(--dl-radius-sm);padding:8px 12px;font-family:inherit;font-weight:600;cursor:pointer;color:var(--dl-ink);text-align:left}
.dl-kmodal__additem:hover{background:var(--dl-hover)}
.dl-kmodal__cmt{display:flex;gap:8px;align-items:flex-start}
.dl-kmodal__meta .dl-kcard__prio{font-size:calc(11.5px * var(--dl-font-scale));align-self:flex-start}

/* ================= GANTT (Part 5g) ================= */
.dl-gantt{display:flex;flex-direction:column;gap:10px;--dl-gantt-res:190px}
.dl-gantt__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-gantt__bar .dl-field{min-width:170px;margin:0}
.dl-gantt__spacer{flex:1}
.dl-gantt__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dl-gantt__stats .dl-stat{min-width:0}
.dl-gantt__legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);align-items:center}
.dl-gantt__legend span{display:inline-flex;align-items:center;gap:5px}
.dl-gantt__lsep{width:1px;height:14px;background:var(--dl-border)}
.dl-gantt__sw{width:12px;height:12px;border-radius:3px;display:inline-block;background:var(--dl-gb);border:1px solid var(--dl-gi)}
.dl-gantt__sw.is-qchold{background:none;border:2px dashed var(--dl-amber-2)}
.dl-gantt__sw.is-hot{background:none;border:2px solid var(--dl-danger)}
.dl-gantt--accent{--dl-gb:color-mix(in srgb,var(--dl-accent) 22%,var(--dl-surface));--dl-gi:var(--dl-accent)}
.dl-gantt--violet{--dl-gb:color-mix(in srgb,var(--dl-violet) 20%,var(--dl-surface));--dl-gi:var(--dl-violet)}
.dl-gantt--warn{--dl-gb:color-mix(in srgb,var(--dl-amber-2) 26%,var(--dl-surface));--dl-gi:var(--dl-amber)}
.dl-gantt--success{--dl-gb:color-mix(in srgb,var(--dl-green) 24%,var(--dl-surface));--dl-gi:var(--dl-green)}
.dl-gantt--info{--dl-gb:color-mix(in srgb,var(--dl-accent) 12%,var(--dl-surface));--dl-gi:var(--dl-accent)}
.dl-gantt--breakdown{--dl-gb:color-mix(in srgb,var(--dl-danger) 30%,var(--dl-surface));--dl-gi:var(--dl-danger)}
.dl-gantt__wrap{overflow-x:auto;border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface)}
.dl-gantt__board{position:relative;min-width:max-content}
.dl-gantt__row{display:flex;border-bottom:1px solid var(--dl-border-soft);min-height:62px}
.dl-gantt__res{position:sticky;left:0;z-index:3;flex:0 0 var(--dl-gantt-res);padding:10px 14px;background:var(--dl-surface);border-right:1px solid var(--dl-border-soft);display:flex;flex-direction:column;justify-content:center;gap:2px}
.dl-gantt__res b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-gantt__res small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-gantt__lane{position:relative;flex:none;background-image:linear-gradient(90deg,var(--dl-border-soft) 1px,transparent 1px)}
.dl-gantt__head{min-height:36px;background:var(--dl-surface-alt)}
.dl-gantt__head .dl-gantt__res{background:var(--dl-surface-alt);font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted)}
.dl-gantt__head .dl-gantt__lane{background:none}
.dl-gantt__head .dl-gantt__lane span{position:absolute;top:10px;transform:translateX(-50%);font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-gantt__head .dl-gantt__lane span:first-child{transform:none;padding-left:4px}
.dl-gantt__sec{padding:7px 14px;background:var(--dl-surface-alt);font-size:calc(11px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);border-bottom:1px solid var(--dl-border-soft);position:sticky;left:0}
.dl-gantt__blk{position:absolute;top:8px;bottom:8px;border-radius:6px;background:var(--dl-gb);border:1px solid var(--dl-gi);padding:4px 8px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;display:flex;flex-direction:column;gap:1px;z-index:1}
.dl-gantt__blk b{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-gantt__blk small{font-size:calc(10px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-gantt__prog{margin-top:auto;height:3px;border-radius:2px;background:color-mix(in srgb,var(--dl-ink) 12%,transparent)}
.dl-gantt__prog span{display:block;height:100%;border-radius:2px;background:var(--dl-ink)}
.dl-gantt__blk.is-hot{box-shadow:0 0 0 2px var(--dl-danger)}
.dl-gantt__blk.is-qchold{border:2px dashed var(--dl-amber-2);cursor:not-allowed}
.dl-gantt__blk.is-conflict{outline:2px solid var(--dl-danger);outline-offset:1px}
.dl-gantt__blk.is-conflict::after{content:"bentrok";position:absolute;right:4px;top:3px;font-size:9px;font-weight:700;color:var(--dl-white);background:var(--dl-danger);border-radius:3px;padding:0 4px}
.dl-gantt__blk.is-changed{border-style:solid;border-width:1px 1px 1px 4px}
.dl-gantt__blk.is-clash{outline:2px solid #dc2626;outline-offset:-1px;box-shadow:0 0 0 2px rgba(220,38,38,.25)}
.dl-gantt__blk.is-clash::after{content:'\26A0';position:absolute;right:3px;top:1px;color:#dc2626;font-size:11px;font-weight:700}
.dl-gantt__blk.is-dim{opacity:.25}
.dl-gantt__blk.is-match{box-shadow:0 0 0 3px var(--dl-amber-2)}
.dl-gantt__rz{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize}
.dl-gantt__rz:hover{background:color-mix(in srgb,var(--dl-ink) 15%,transparent)}
.dl-gantt__idle{position:absolute;top:8px;bottom:8px;border-radius:6px;background:repeating-linear-gradient(135deg,var(--dl-chip) 0 6px,transparent 6px 12px);display:flex;align-items:center;justify-content:center;font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-gantt__now{position:absolute;top:0;bottom:0;width:2px;background:var(--dl-danger);z-index:2;pointer-events:none}
.dl-gantt__now::before{content:"";position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--dl-danger)}
.dl-gantt__help{margin:0;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);line-height:1.5}
.dl-gantt__pop{position:absolute;z-index:310;width:250px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:14px 16px;font-size:calc(12px * var(--dl-font-scale))}
.dl-gantt__pop h3{margin:0 0 8px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-gantt__pop dl{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin:0}
.dl-gantt__pop dt{color:var(--dl-muted)}
.dl-gantt__pop dd{margin:0;text-align:right;font-weight:600;color:var(--dl-ink-strong)}
.dl-gantt__popx{position:absolute;top:6px;right:10px;border:none;background:none;color:var(--dl-muted);font-size:16px;cursor:pointer}
.dl-gantt__edit{display:flex;flex-direction:column;gap:10px}
.dl-gantt__edit label{display:flex;flex-direction:column;gap:3px;font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label)}
.dl-gantt__edit input,.dl-gantt__edit select{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:7px 8px;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
@media (max-width:640px){.dl-gantt{--dl-gantt-res:120px}}

/* ================= CALENDAR (Part 5h) ================= */
.dl-cal2{display:flex;flex-direction:column;border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface);overflow:hidden;height:min(760px,calc(100vh - 140px));min-height:520px}
.dl-cal2__top{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--dl-border);flex-wrap:wrap}
.dl-cal2__title{font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong);margin-left:6px}
.dl-cal2__spacer{flex:1}
.dl-cal2__body{flex:1;display:grid;grid-template-columns:240px 1fr 280px;min-height:0}
.dl-cal2.no-side .dl-cal2__body{grid-template-columns:1fr}
.dl-cal2__left,.dl-cal2__right{padding:14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;background:var(--dl-surface-alt)}
.dl-cal2__left{border-right:1px solid var(--dl-border)}
.dl-cal2__right{border-left:1px solid var(--dl-border)}
.dl-cal2__left .dl-grid__search{width:100%}
.dl-cal2__minihead{display:flex;justify-content:space-between;align-items:center;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-cal2__minihead button{border:1px solid var(--dl-border);background:var(--dl-surface);border-radius:5px;width:24px;height:24px;cursor:pointer;color:var(--dl-ink);margin-left:3px}
.dl-cal2__minigrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:6px;text-align:center}
.dl-cal2__minigrid span{font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted);padding:4px 0}
.dl-cal2__minigrid button{border:none;background:none;aspect-ratio:1;border-radius:50%;font-family:inherit;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink);cursor:pointer;position:relative}
.dl-cal2__minigrid button:hover{background:var(--dl-hover)}
.dl-cal2__minigrid .is-out{color:var(--dl-muted);opacity:.55}
.dl-cal2__minigrid .has-ev::after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--dl-accent)}
.dl-cal2__minigrid .is-sel{background:var(--dl-accent-soft);color:var(--dl-accent);font-weight:700}
.dl-cal2__minigrid .is-today{background:var(--dl-accent);color:var(--dl-white);font-weight:700}
.dl-cal2__hit{display:flex;flex-direction:column;text-align:left;border:none;background:var(--dl-surface);border-radius:var(--dl-radius-sm);padding:6px 8px;margin-bottom:4px;cursor:pointer;font-family:inherit;color:var(--dl-ink);width:100%}
.dl-cal2__hit small{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-cal2__main{min-width:0;min-height:0;display:flex;flex-direction:column}
.dl-cal2--accent{--dl-ce:var(--dl-accent)}.dl-cal2--success{--dl-ce:var(--dl-green)}.dl-cal2--warn{--dl-ce:var(--dl-amber-2)}.dl-cal2--danger{--dl-ce:var(--dl-danger)}.dl-cal2--violet{--dl-ce:var(--dl-violet)}.dl-cal2--neutral{--dl-ce:var(--dl-muted)}
.dl-cal2__ev{font-size:calc(11px * var(--dl-font-scale));padding:2px 6px;border-radius:4px;background:color-mix(in srgb,var(--dl-ce) 16%,var(--dl-surface));border-left:3px solid var(--dl-ce);color:var(--dl-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;margin-top:2px}
.dl-cal2__ev small{color:var(--dl-muted)}
.dl-cal2 .is-dim{opacity:.3}
.dl-cal2 .is-drag{opacity:.4}
.dl-cal2__month{flex:1;display:flex;flex-direction:column;min-height:0}
.dl-cal2__dows{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--dl-border)}
.dl-cal2__dows span{padding:6px;text-align:center;font-size:calc(11px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);text-transform:uppercase}
.dl-cal2__mgrid{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:1fr}
.dl-cal2__cell{border-right:1px solid var(--dl-border-soft);border-bottom:1px solid var(--dl-border-soft);padding:4px;min-height:80px;overflow:hidden;cursor:default}
.dl-cal2__cell.is-out{background:var(--dl-surface-alt)}
.dl-cal2__cell.is-out .dl-cal2__num{color:var(--dl-muted)}
.dl-cal2__cell.is-sel{background:var(--dl-accent-soft)}
.dl-cal2__num{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink)}
.dl-cal2__cell.is-today .dl-cal2__num{background:var(--dl-accent);color:var(--dl-white)}
.dl-cal2__more{border:none;background:none;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600;cursor:pointer;padding:2px 4px}
.dl-cal2 .is-over{box-shadow:inset 0 0 0 2px var(--dl-accent);background:var(--dl-accent-soft)!important}
.dl-cal2__time{flex:1;display:flex;flex-direction:column;min-height:0}
.dl-cal2__thead,.dl-cal2__allday{display:grid;grid-template-columns:56px repeat(var(--dl-cal-cols),minmax(0,1fr));border-bottom:1px solid var(--dl-border)}
.dl-cal2__tz{font-size:calc(10px * var(--dl-font-scale));color:var(--dl-muted);display:flex;align-items:flex-end;justify-content:center;padding:4px;text-align:center;line-height:1.2}
.dl-cal2__dh{border:none;background:none;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-family:inherit;color:var(--dl-muted)}
.dl-cal2__dh small{font-size:calc(11px * var(--dl-font-scale));font-weight:700;text-transform:uppercase}
.dl-cal2__dh b{font-size:calc(20px * var(--dl-font-scale));width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dl-ink-strong)}
.dl-cal2__dh.is-today small{color:var(--dl-accent)}
.dl-cal2__dh.is-today b{background:var(--dl-accent);color:var(--dl-white)}
.dl-cal2__allday > div{border-left:1px solid var(--dl-border-soft);padding:3px;min-height:30px}
.dl-cal2__scroll{flex:1;overflow-y:auto;min-height:0}
.dl-cal2__grid{position:relative;display:grid;grid-template-columns:56px repeat(var(--dl-cal-cols),minmax(0,1fr));background-image:repeating-linear-gradient(to bottom,var(--dl-border-soft) 0 1px,transparent 1px 44px)}
.dl-cal2__hours{position:relative}
.dl-cal2__hours span{position:absolute;right:6px;transform:translateY(-50%);font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-cal2__col{position:relative;border-left:1px solid var(--dl-border-soft)}
.dl-cal2__col.is-today{background:color-mix(in srgb,var(--dl-accent) 4%,transparent)}
.dl-cal2__blk{position:absolute;margin-left:2px;border-radius:5px;padding:3px 6px;background:color-mix(in srgb,var(--dl-ce) 18%,var(--dl-surface));border-left:3px solid var(--dl-ce);overflow:hidden;cursor:grab;display:flex;flex-direction:column;z-index:1}
.dl-cal2__blk b{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-cal2__blk small{font-size:calc(10px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-cal2__now{position:absolute;left:0;right:0;height:2px;background:var(--dl-danger);z-index:2;pointer-events:none}
.dl-cal2__now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--dl-danger)}
.dl-cal2__cap{margin:0 0 6px;font-size:calc(11px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted);display:flex;align-items:center;gap:6px}
.dl-cal2__dot{width:8px;height:8px;border-radius:50%;background:var(--dl-green)}
.dl-cal2__item{background:var(--dl-surface);border:1px solid var(--dl-border-soft);border-left:3px solid var(--dl-ce);border-radius:var(--dl-radius-sm);padding:8px 10px;margin-bottom:6px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.dl-cal2__item b{font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-cal2__item small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-cal2__item p{margin:4px 0 0;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-cal2__selh{margin:8px 0 0;font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-cal2__selc{display:block;color:var(--dl-muted);margin-bottom:8px;font-size:calc(11.5px * var(--dl-font-scale))}
.dl-cal2__none{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);margin:0}
.dl-cal2__tones{display:flex;gap:8px;margin-top:4px}
.dl-cal2__tones button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;background:var(--dl-ce);cursor:pointer}
.dl-cal2__tones button.is-on{box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-ce)}
.dl-cal2{container-type:inline-size}
@container (max-width:1150px){.dl-cal2__body{grid-template-columns:220px 1fr}.dl-cal2__right{display:none}}
@container (max-width:720px){.dl-cal2__body{grid-template-columns:1fr}.dl-cal2__left{display:none}}

/* ================= PRINT OUT (Part 5i) ================= */
/* Kertas cetak selalu putih & tinta tetap (tidak ikut tema layar). */
:root{--dl-pr-warnbg:#fff7ed;--dl-pr-soft:#f8fafc;--dl-pr-head:#eef2f7;--dl-pr-line:#cbd5e1;--dl-pr-line2:#e5e7eb;--dl-pr-ink:#1f2937;--dl-pr-brand:#1f2d4d;--dl-pr-muted:#6b7280;--dl-pr-strong:#111827;--dl-pr-ok:#059669;--dl-pr-violet:#6d28d9;--dl-pr-net:#047857;--dl-pr-warn:#d97706;--dl-pr-sign:#374151;--dl-pr-faint:#9ca3af;--dl-pr-paper:#fff}
.dl-print{--dl-pw:210mm;--dl-ph:297mm;--dl-pad:14mm;display:flex;flex-direction:column;gap:14px}
.dl-print[data-paper="a5"]{--dl-pw:210mm;--dl-ph:148mm;--dl-pad:9mm}
.dl-print__bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--dl-navy);color:var(--dl-white);border-radius:var(--dl-radius-lg)}
.dl-print__doc{font-size:calc(12.5px * var(--dl-font-scale))}
.dl-print__spacer{flex:1}
.dl-print__lbl{font-size:calc(11.5px * var(--dl-font-scale))}
.dl-print__bar .dl-segment{background:var(--dl-surface)}
.dl-print__pages{display:flex;flex-direction:column;align-items:center;gap:16px;overflow-x:auto;padding-bottom:10px}
.dl-print__sheet{width:var(--dl-pw);height:var(--dl-ph);flex:none;background:var(--dl-pr-paper);color:var(--dl-pr-ink);box-shadow:0 4px 18px rgba(15,22,45,.18);font-family:var(--dl-font);font-size:10.5px;line-height:1.35}
.dl-print__inner{height:100%;padding:var(--dl-pad);display:flex;flex-direction:column;overflow:hidden}
[data-p-body]{flex:1;min-height:0}
.dl-print__kop{display:flex;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:2px solid var(--dl-pr-brand);margin-bottom:10px}
.dl-print__co{display:flex;gap:10px;align-items:flex-start}
.dl-print__co[hidden]{display:none}
.dl-print__logo{width:40px;height:40px;border-radius:8px;background:var(--dl-pr-brand);color:var(--dl-pr-paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none;text-transform:uppercase}
.dl-print__brand{display:block;height:26px;width:auto;margin-bottom:3px}
.dl-print__brand.is-bw,.dl-print.is-bw .dl-print__brand:not(.is-bw){display:none}
.dl-print.is-bw .dl-print__brand.is-bw{display:block}
.dl-print__co b{display:block;font-size:14px;color:var(--dl-pr-brand)}
.dl-print__co > div small,.dl-print__co > div span{display:block;color:var(--dl-pr-muted);font-size:9.5px}
.dl-print__npwp{color:var(--dl-pr-brand)!important;font-weight:700}
.dl-print__co.is-side{align-items:center}
.dl-print__co.is-side .dl-print__brand{height:auto;max-height:44px;max-width:120px;margin:0;flex:none}
.dl-print__co > div small.dl-print__legal{font-weight:600}
.dl-print__titlebox{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.dl-print__title{font-size:14px;color:var(--dl-pr-brand);text-transform:uppercase;letter-spacing:.02em}
.dl-print__titlebox small{color:var(--dl-pr-muted);font-size:9.5px}
.dl-print__docno{font-size:12px;font-weight:800;color:var(--dl-pr-strong)}
.dl-print__meta{color:var(--dl-pr-muted);font-size:9.5px}
.dl-print__status{margin-top:3px;border:1.5px solid var(--dl-pr-ok);color:var(--dl-pr-ok);border-radius:4px;padding:1px 8px;font-weight:800;font-size:9.5px;letter-spacing:.05em}
.dl-print__parties{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-bottom:10px}
.dl-print__parties > div{display:grid;grid-template-columns:110px 1fr;gap:6px}
.dl-print__parties span{color:var(--dl-pr-muted)}
.dl-print__parties span::after{content:" :";float:right}
.dl-print__parties small{font-weight:400;color:var(--dl-pr-muted)}
.dl-print__table{width:100%;border-collapse:collapse;margin-bottom:8px}
.dl-print__table th{background:var(--dl-pr-head);border:1px solid var(--dl-pr-line);padding:4px 5px;font-size:9.5px;color:var(--dl-pr-ink);text-align:center}
.dl-print__table td{border:1px solid var(--dl-pr-line);padding:3px 5px;vertical-align:top}
.dl-print__table td.num{text-align:right;white-space:nowrap}
.dl-print__table th{white-space:nowrap}
.dl-print__table th.is-wrap{white-space:normal}
.dl-print__table td small{display:block;color:var(--dl-pr-muted);font-size:8.5px;font-family:var(--dl-font-mono)}
.dl-print__no{width:26px;text-align:center}
td.dl-print__no{text-align:center}
.dl-print__tail{break-inside:avoid}
.dl-print__totals{margin-left:auto;width:260px;display:flex;flex-direction:column;gap:2px}
.dl-print__totals > div{display:flex;justify-content:space-between}
.dl-print__totals span{color:var(--dl-pr-muted)}
.dl-print__totals .is-strong span,.dl-print__totals .is-strong b{color:var(--dl-pr-strong);font-weight:800}
.dl-print__totals .is-muted span{color:var(--dl-pr-muted)}
.dl-print__totals .is-violet span,.dl-print__totals .is-violet b{color:var(--dl-pr-violet)}
.dl-print__totals .is-net{border-top:1px solid var(--dl-pr-line);padding-top:3px}
.dl-print__totals .is-net span,.dl-print__totals .is-net b{color:var(--dl-pr-net);font-weight:800}
.dl-print__words{margin:6px 0 8px;padding:5px 8px;background:var(--dl-pr-soft);border-left:3px solid var(--dl-pr-brand);font-size:10px}
.dl-print__words span{font-weight:700}
.dl-print__notes{border-left:3px solid var(--dl-pr-warn);background:var(--dl-pr-warnbg);padding:6px 10px;margin:6px 0;font-size:9.5px}
.dl-print__sign{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:20px;margin-top:14px;text-align:center}
.dl-print__sign span{color:var(--dl-pr-muted)}
.dl-print__sign i{display:block;height:44px;border-bottom:1px solid var(--dl-pr-sign);margin:0 10px}
.dl-print__sign b{display:block;margin-top:3px;font-weight:500}
.dl-print__sign small{color:var(--dl-pr-muted)}
.dl-print__foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:4px;border-top:1px solid var(--dl-pr-line2);color:var(--dl-pr-faint);font-size:8.5px}
.dl-print.is-bw .dl-print__sheet{filter:grayscale(1)}
.dl-print.is-bw .dl-print__table th,.dl-print.is-bw .dl-print__words,.dl-print.is-bw .dl-print__notes{background:var(--dl-pr-paper)}
[data-p-bw].is-on{outline:2px solid var(--dl-amber-2)}
@media print{
  body *{visibility:hidden}
  .dl-print__pages,.dl-print__pages *{visibility:visible}
  .dl-print__pages{position:absolute;left:0;top:0;gap:0;padding:0;display:block}
  .dl-print__sheet{box-shadow:none;break-after:page;margin:0}
  .dl-print__bar{display:none}
}

/* ================= REPORT (Part 5j) ================= */
.dl-print[data-paper="a4l"]{--dl-pw:297mm;--dl-ph:210mm;--dl-pad:11mm}
.dl-print__criteria{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px 14px;border:1px solid var(--dl-pr-line);border-radius:6px;background:var(--dl-pr-soft);padding:8px 12px;margin-bottom:8px}
.dl-print__criteria small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-pr-muted)}
.dl-print__criteria b{font-size:11px;color:var(--dl-pr-strong)}
.dl-print__kpis{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;margin-bottom:8px}
.dl-print__kpis > div{border:1px solid var(--dl-pr-line);border-radius:6px;padding:5px 8px;text-align:right}
.dl-print__kpis small{display:block;text-align:left;font-size:8.5px;text-transform:uppercase;color:var(--dl-pr-muted)}
.dl-print__kpis b{font-size:13px;color:var(--dl-pr-strong)}
.dl-print .is-pos{color:var(--dl-pr-net)!important}
.dl-print .is-neg{color:var(--dl-pr-neg)!important}
.dl-print .is-zero{color:var(--dl-pr-faint)}
.dl-print .is-b{font-weight:800}
.dl-print__c{text-align:center}
.dl-print__badge{display:inline-block;border-radius:4px;padding:0 5px;font-size:8.5px;font-weight:800;background:var(--dl-pr-head);color:var(--dl-pr-muted)}
.dl-print__badge.is-success{background:var(--dl-pr-okbg);color:var(--dl-pr-ok)}
.dl-print__badge.is-danger{background:var(--dl-pr-negbg);color:var(--dl-pr-neg)}
.dl-print__badge.is-warn{background:var(--dl-pr-warnbg);color:var(--dl-pr-warn)}
.dl-print__badge.is-info{background:var(--dl-pr-head);color:var(--dl-pr-brand)}
.dl-print__badge.is-violet{background:var(--dl-pr-violetbg);color:var(--dl-pr-violet)}
.dl-print__table tr.is-row-danger td{background:var(--dl-pr-negbg)}
.dl-print__table tr.is-row-danger td:first-child{box-shadow:inset 3px 0 0 var(--dl-pr-neg)}
.dl-print__table tr.is-row-warn td{background:var(--dl-pr-warnbg)}
.dl-print__grp td{background:var(--dl-pr-head);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--dl-pr-brand)}
.dl-print__sub td{background:var(--dl-pr-soft);font-weight:700;color:var(--dl-pr-ink)}
.dl-print__grand td{background:var(--dl-pr-brand);color:var(--dl-pr-paper)!important;font-weight:800}
:root{--dl-pr-neg:#b91c1c;--dl-pr-negbg:#fdecec;--dl-pr-okbg:#e7f7ef;--dl-pr-violetbg:#f1eafe}
.dl-print .dl-print__grand td{color:var(--dl-pr-paper)!important}
.dl-print__badge{white-space:nowrap}

/* ================= IMPORT (Part 5k) ================= */
.dl-import{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:14px;display:flex;flex-direction:column;gap:12px}
.dl-import__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-import__head > b{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-import__steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:st;flex-wrap:wrap}
.dl-import__steps li{counter-increment:st;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);display:flex;align-items:center;gap:6px}
.dl-import__steps li::before{content:counter(st);width:20px;height:20px;border-radius:50%;border:2px solid var(--dl-border);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.dl-import__steps li + li::after{order:-1;content:"";width:18px;height:2px;background:var(--dl-border)}
.dl-import__steps li.is-active{color:var(--dl-ink-strong);font-weight:700}
.dl-import__steps li.is-active::before{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}
.dl-import__steps li.is-done::before{background:var(--dl-green);border-color:var(--dl-green);color:var(--dl-white)}
[data-i-step][hidden]{display:none}
[data-i-step]{display:flex;flex-direction:column;gap:10px}
.dl-import__drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px;border:2px dashed var(--dl-f-line);border-radius:var(--dl-radius-lg);background:var(--dl-surface-alt);cursor:pointer;text-align:center;color:var(--dl-muted)}
.dl-import__drop i{font-size:34px;color:var(--dl-accent)}
.dl-import__drop b{color:var(--dl-ink-strong)}
.dl-import__drop.is-over{border-color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-import__hint{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);margin:0}
.dl-import__map{display:flex;flex-direction:column;gap:6px}
.dl-import__mrow{display:grid;grid-template-columns:minmax(160px,220px) 20px minmax(180px,280px) 1fr;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius-sm)}
.dl-import__mrow.is-bad{border-color:var(--dl-danger);background:var(--dl-danger-soft)}
.dl-import__mrow > span small{display:block;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-import__mrow > i{color:var(--dl-muted)}
.dl-import__mrow select{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:6px 8px;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
.dl-import__sample{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-import__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-import__stats{display:flex;gap:6px;flex-wrap:wrap}
.dl-import__wrap{overflow:auto;max-height:420px;border:1px solid var(--dl-border);border-radius:var(--dl-radius)}
.dl-import__table{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-import__table th{position:sticky;top:0;background:var(--dl-surface-alt);text-align:left;padding:6px 8px;border-bottom:1px solid var(--dl-border);white-space:nowrap}
.dl-import__table td{padding:5px 8px;border-bottom:1px solid var(--dl-border-soft);vertical-align:top}
.dl-import__table td.num{color:var(--dl-muted);text-align:right}
.dl-import__table td.is-err{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-import__table td small{display:block;font-size:calc(10.5px * var(--dl-font-scale));font-weight:600}
@media (max-width:640px){.dl-import__mrow{grid-template-columns:1fr}.dl-import__mrow > i{display:none}}

/* ================= ORG CHART (Part 5l) ================= */
.dl-org{display:flex;flex-direction:column;gap:10px}
.dl-org__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-org__spacer{flex:1}
.dl-org__dept{padding:6px 10px;border:1px solid var(--dl-border);border-radius:8px;background:var(--dl-surface);color:var(--dl-ink);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-org__zoom{display:inline-flex;align-items:center;gap:4px}
.dl-org__zoom b{min-width:40px;text-align:center;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-org__tip{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-accent);background:var(--dl-info-soft);border:1px solid var(--dl-info-line);border-radius:var(--dl-radius-sm);padding:5px 10px}
.dl-org__canvas{overflow:auto;border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface-alt);min-height:420px;max-height:calc(100vh - 200px);padding:24px}
.dl-org__tree{transform-origin:top center;width:max-content;min-width:100%;transition:transform .15s}
.dl-org__tree ul{display:flex;justify-content:center;padding:24px 0 0;margin:0;position:relative;list-style:none}
.dl-org__tree > ul{padding-top:0}
.dl-org__tree li{position:relative;padding:24px 8px 0;display:flex;flex-direction:column;align-items:center}
.dl-org__tree > ul > li{padding-top:0}
.dl-org__tree li::before,.dl-org__tree li::after{content:"";position:absolute;top:0;width:50%;height:24px;border-top:2px solid var(--dl-f-line)}
.dl-org__tree li::before{right:50%}
.dl-org__tree li::after{left:50%;border-left:2px solid var(--dl-f-line)}
.dl-org__tree li:only-child::before,.dl-org__tree li:only-child::after{border-top:0}
.dl-org__tree li:only-child::after{left:50%;width:0}
.dl-org__tree li:first-child::before,.dl-org__tree li:last-child::after{border-top:0}
.dl-org__tree li:last-child::before{border-right:2px solid var(--dl-f-line);border-radius:0 6px 0 0}
.dl-org__tree li:first-child::after{border-radius:6px 0 0 0}
.dl-org__tree > ul > li::before,.dl-org__tree > ul > li::after{display:none}
.dl-org__tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:24px;border-left:2px solid var(--dl-f-line)}
.dl-org__card{position:relative;display:flex;align-items:center;gap:8px;min-width:210px;max-width:260px;padding:10px 12px 10px 8px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:0 1px 3px rgba(15,22,45,.06);text-align:left}
.dl-org__card.is-vacant{border-style:dashed;background:var(--dl-surface-alt)}
.dl-org__card.is-hit{box-shadow:0 0 0 3px var(--dl-amber-2)}
.dl-org__card.is-target{box-shadow:0 0 0 3px var(--dl-green);background:color-mix(in srgb,var(--dl-green) 8%,var(--dl-surface))}
.dl-org__card.is-deny{box-shadow:0 0 0 3px var(--dl-danger)}
.dl-org__card.is-drag{opacity:.45}
.dl-org__grip{color:var(--dl-muted);cursor:grab;padding:4px 2px}
.dl-org__who{display:flex;align-items:center;gap:10px;min-width:0}
.dl-org__avs{display:flex;flex-shrink:0}
.dl-org__av{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--dl-white);font-size:12px;font-weight:700;background:linear-gradient(135deg,hsl(var(--h) 55% 55%),hsl(calc(var(--h) + 40) 50% 40%));border:2px solid var(--dl-surface);overflow:hidden}
.dl-org__av + .dl-org__av{margin-left:-12px}
.dl-org__av img{width:100%;height:100%;object-fit:cover}
.dl-org__av.is-empty{background:var(--dl-chip);color:var(--dl-muted)}
.dl-org__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dl-org__txt b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-org__card.is-vacant .dl-org__txt b{color:var(--dl-muted);font-style:italic}
.dl-org__txt small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600}
.dl-org__txt em{font-style:normal;font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-org__fold{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);min-width:22px;height:22px;border-radius:11px;border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-muted);font-size:11px;font-weight:700;cursor:pointer;padding:0 5px;z-index:1}
.dl-org__fold:hover{color:var(--dl-accent);border-color:var(--dl-accent)}

:root{--dl-dl-bg:#1b1f2a;--dl-dl-cut:#ff3b3b;--dl-dl-crease:#00e676;--dl-dl-bleed:#888888;--dl-dl-hole:#4da3ff}


/* ================= CHARTS & INDIKATOR (Part 6) ================= */
:root{--dl-ch-teal:#14b8a6}
.dl-chart--accent{--c:var(--dl-accent)}.dl-chart--success{--c:var(--dl-green)}.dl-chart--warn{--c:var(--dl-amber-2)}.dl-chart--danger{--c:var(--dl-danger)}
.dl-chart--violet{--c:var(--dl-violet)}.dl-chart--info{--c:color-mix(in srgb,var(--dl-accent) 55%,var(--dl-ch-teal))}.dl-chart--neutral{--c:var(--dl-muted)}.dl-chart--teal{--c:var(--dl-ch-teal)}
.dl-chart{margin:0;position:relative;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.dl-chart__head{display:flex;flex-direction:column}
.dl-chart__head b{font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-chart__head small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-chart__plot{height:var(--dl-ch-h)}
.dl-chart__plot svg{width:100%;height:100%;overflow:visible}
.dl-chart__grid{stroke:var(--dl-border-soft);stroke-width:1;fill:none}
.dl-chart__web{stroke:var(--dl-border)}
.dl-chart__ax{font-size:11px;fill:var(--dl-muted)}
.dl-chart__val{font-size:11px;fill:var(--dl-ink);font-weight:600}
.dl-chart__bar,.dl-chart__slice,.dl-chart__sw{fill:var(--c)}
.dl-chart__bar:hover,.dl-chart__slice:hover{opacity:.82}
.dl-chart__slice{stroke:var(--dl-surface);stroke-width:2}
.dl-chart__line{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dl-chart__area{fill:var(--c);opacity:.16;stroke:none}
.dl-chart__radar{stroke:var(--c);stroke-width:2;opacity:.35}
.dl-chart__dot{fill:var(--dl-surface);stroke:var(--c);stroke-width:2.5}
.dl-chart__dot:hover{r:6}
.dl-chart__pct{font-size:12px;font-weight:700;fill:var(--dl-white);pointer-events:none}
.dl-chart__total{font-size:20px;font-weight:800;fill:var(--dl-ink-strong)}
.dl-chart__lt{font-size:12px;fill:var(--dl-ink)}
.dl-chart__pl{cursor:pointer}
.dl-chart__pl.is-off{opacity:.35}
.dl-chart__heat{fill:color-mix(in srgb,var(--dl-accent) calc(var(--k) * 100%),var(--dl-surface))}
.dl-chart__hv{font-size:11px;fill:var(--dl-ink);pointer-events:none}
.dl-chart__hv.is-dark{fill:var(--dl-white)}
.dl-chart__legend{display:flex;flex-wrap:wrap;gap:4px 12px}
.dl-chart__li{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink);padding:2px}
.dl-chart__li i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.dl-chart__li.is-off{opacity:.4;text-decoration:line-through}
.dl-chart__tip{position:absolute;z-index:5;pointer-events:none;background:var(--dl-navy);color:var(--dl-white);border-radius:6px;padding:6px 9px;font-size:12px;display:flex;flex-direction:column;box-shadow:var(--dl-shadow-pop);min-width:120px}
.dl-chart__tip span{font-size:11px}
.dl-chart__tip em{font-style:normal;font-weight:700}
.dl-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
/* KPI */
.dl-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.dl-kpi{background:var(--dl-surface);min-width:0;border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:12px 14px;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--c)}
.dl-kpi--accent{--c:var(--dl-accent)}.dl-kpi--success{--c:var(--dl-green)}.dl-kpi--warn{--c:var(--dl-amber-2)}.dl-kpi--danger{--c:var(--dl-danger)}.dl-kpi--violet{--c:var(--dl-violet)}.dl-kpi--teal{--c:var(--dl-ch-teal)}
.dl-kpi__top{display:flex;align-items:center;gap:8px}
.dl-kpi__icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 14%,var(--dl-surface));color:var(--c);font-size:13px}
.dl-kpi__label{flex:1;font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted)}
.dl-kpi__delta{font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;border-radius:10px;padding:1px 7px}
.dl-kpi__delta.is-good{background:color-mix(in srgb,var(--dl-green) 16%,var(--dl-surface));color:var(--dl-green)}
.dl-kpi__delta.is-bad{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-kpi__row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dl-kpi__value{font-size:calc(24px * var(--dl-font-scale));color:var(--dl-ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-kpi__spark{width:110px;height:34px;flex:0 1 110px;min-width:0}
.dl-kpi__spark polyline{fill:none;stroke:var(--dl-green);stroke-width:2;vector-effect:non-scaling-stroke}
.dl-kpi__spark.is-bad polyline{stroke:var(--dl-danger)}
.dl-kpi__target{height:6px;border-radius:3px;background:var(--dl-chip);overflow:hidden}
.dl-kpi__target span{display:block;height:100%;background:var(--c)}
.dl-kpi__hint{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
/* Gauge, ring, bullet, light */
.dl-gauges{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.dl-gauge{display:flex;flex-direction:column;align-items:center;width:220px}
.dl-gauge svg{width:100%}
.dl-gauge__track{fill:none;stroke:var(--dl-chip);stroke-width:16}
.dl-gauge__band{fill:none;stroke:var(--c);stroke-width:16;opacity:.85}
.dl-gauge__target{stroke:var(--dl-ink-strong);stroke-width:3}
.dl-gauge__needle{stroke:var(--dl-ink-strong);stroke-width:4;stroke-linecap:round}
.dl-gauge__hub{fill:var(--dl-ink-strong)}
.dl-gauge__mm{font-size:10px;fill:var(--dl-muted)}
.dl-gauge__label{font-size:calc(12.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);text-align:center}
.dl-gauge__label small{font-weight:500;color:var(--dl-muted)}
.dl-ring{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.dl-ring svg{width:var(--s);height:var(--s)}
.dl-ring__track{fill:none;stroke:var(--dl-chip);stroke-width:10}
.dl-ring__bar{fill:none;stroke:var(--c);stroke-width:10;stroke-linecap:round}
.dl-ring__val{font-size:20px;font-weight:800;fill:var(--dl-ink-strong)}
.dl-ring__label{font-size:calc(12px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);text-align:center;display:flex;flex-direction:column}
.dl-ring__label small{font-weight:500;color:var(--dl-muted)}
.dl-bullet{display:grid;grid-template-columns:170px 1fr 150px;align-items:center;gap:12px;padding:6px 0}
.dl-bullet__label{display:flex;flex-direction:column;text-align:right}
.dl-bullet__label b{font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-bullet__label small,.dl-bullet__nums small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-bullet__track{position:relative;height:26px;background:var(--dl-chip);border-radius:4px;overflow:hidden}
.dl-bullet__range{position:absolute;left:0;top:0;bottom:0}
.dl-bullet__range.is-r1{background:color-mix(in srgb,var(--dl-disabled) 34%,var(--dl-surface))}
.dl-bullet__range.is-r2{background:color-mix(in srgb,var(--dl-disabled) 22%,var(--dl-surface))}
.dl-bullet__range.is-r3{background:color-mix(in srgb,var(--dl-disabled) 12%,var(--dl-surface))}
.dl-bullet__bar{position:absolute;left:0;top:9px;height:8px;border-radius:2px}
.dl-bullet__bar.is-good{background:var(--dl-green)}.dl-bullet__bar.is-bad{background:var(--dl-ink-strong)}
.dl-bullet__target{position:absolute;top:4px;bottom:4px;width:3px;margin-left:-1px;background:var(--dl-danger)}
.dl-bullet__nums{display:flex;flex-direction:column}
.dl-bullet__nums b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-light{display:inline-flex;align-items:center;gap:10px}
.dl-light__box{display:inline-flex;gap:4px;background:var(--dl-navy);border-radius:12px;padding:4px 6px}
.dl-light__box i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12)}
.dl-light.is-red .is-red{background:var(--dl-danger);box-shadow:0 0 8px var(--dl-danger)}
.dl-light.is-amber .is-amber{background:var(--dl-amber-2);box-shadow:0 0 8px var(--dl-amber-2)}
.dl-light.is-green .is-green{background:var(--dl-green);box-shadow:0 0 8px var(--dl-green)}
.dl-light__txt{display:flex;flex-direction:column;line-height:1.25}
.dl-light__txt b{font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-light__txt small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
@media (max-width:640px){.dl-bullet{grid-template-columns:1fr}.dl-bullet__label{text-align:left}}

.dl-chart__tip[hidden]{display:none}
.dl-gauge__big{font-size:calc(22px * var(--dl-font-scale));font-weight:800;margin-top:-6px}
.dl-gauge__big.is-success{color:var(--dl-green)}.dl-gauge__big.is-warn{color:var(--dl-amber)}.dl-gauge__big.is-danger{color:var(--dl-danger)}.dl-gauge__big.is-accent{color:var(--dl-accent)}

/* ================= QR & BARCODE ================= */
.dl-qrbox{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.dl-qrbox [data-dl-qrcode]{display:block;width:var(--q);height:var(--q);background:#fff;padding:3px;border-radius:4px;box-sizing:content-box}
.dl-qrbox [data-dl-qrcode] img,.dl-qrbox [data-dl-qrcode] canvas{width:100%!important;height:100%!important;display:block}
.dl-qrbox [data-dl-qrcode].is-fallback{font-family:var(--dl-font-mono);font-size:10px;word-break:break-all;color:var(--dl-ink)}
.dl-qrbox figcaption{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-barcode{display:inline-block;background:#fff;padding:6px 8px;border-radius:4px}
.dl-barcode svg{display:block}
.dl-barcode__err{color:var(--dl-danger);font-size:12px}

/* Dieline: garis ukuran (gambar teknik) */
:root{--dl-dl-dim:#e8ecf3;--dl-dl-dimcode:#ffd166}
.dl-dim__l{stroke:var(--dl-dl-dim);stroke-width:.8;vector-effect:non-scaling-stroke}
.dl-dim__e{stroke:var(--dl-dl-dim);stroke-width:.5;opacity:.45;vector-effect:non-scaling-stroke}
.dl-dim__a{fill:var(--dl-dl-dim)}
.dl-dim__t{fill:var(--dl-dl-dim);font-family:var(--dl-font);font-weight:700}
.dl-dim__t.is-code{fill:var(--dl-dl-dimcode)}

.dl-3d__side{fill:var(--dl-3d-side);stroke:var(--dl-dl-cut);stroke-width:1;vector-effect:non-scaling-stroke}
.dl-3d__top{fill:var(--dl-3d-top);stroke:var(--dl-dl-cut);stroke-width:1;vector-effect:non-scaling-stroke}
:root{--dl-3d-front:#e9c9a0;--dl-3d-side:#d4a878;--dl-3d-top:#f6e2c5}




/* ================= GRID varian (BC) ================= */
.dl-grid__imgcell{width:64px}
.dl-grid__thumb{border:none;padding:0;background:none;cursor:zoom-in;display:block}
.dl-grid__thumb img{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--dl-border);display:block}
.dl-grid__noimg{width:48px;height:48px;border-radius:6px;background:var(--dl-chip);display:flex;align-items:center;justify-content:center;color:var(--dl-muted)}
.dl-grid__noimg--ini{border:1px solid var(--dl-border);background:var(--dl-accent-soft);color:var(--dl-accent);font-weight:700;font-size:calc(15px * var(--dl-font-scale))}
.dl-grid__lightbox{display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.dl-grid__lightbox img{max-width:90vw;max-height:86vh;border-radius:10px;box-shadow:var(--dl-shadow-modal)}
.dl-grid__lightbox .dl-modal__x{position:fixed;top:16px;right:20px;color:var(--dl-white);font-size:28px}
.dl-grid__prog{display:inline-block;vertical-align:middle;width:110px;height:8px;border-radius:4px;background:var(--dl-chip);overflow:hidden}
.dl-grid__prog span{display:block;height:100%;background:var(--c);border-radius:4px}
.dl-grid__progv,.dl-grid__stepv{margin-left:6px;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);font-variant-numeric:tabular-nums}
.dl-grid__steps{display:inline-flex;gap:3px;vertical-align:middle}
.dl-grid__steps i{width:16px;height:6px;border-radius:3px;background:var(--dl-chip)}
.dl-grid__steps i.is-done{background:var(--dl-green)}
.dl-grid__steps i.is-now{background:var(--dl-accent);box-shadow:0 0 0 2px var(--dl-accent-ring)}
.dl-switch--sm{transform:scale(.8);transform-origin:left center}
.dl-grid__stars{white-space:nowrap;font-size:11px;color:var(--dl-f-line)}
.dl-grid__stars .is-on{color:var(--dl-star)}
.dl-grid__spark{width:80px;height:24px;display:block}
.dl-grid__spark polyline{fill:none;stroke:var(--dl-green);stroke-width:1.8;vector-effect:non-scaling-stroke}
.dl-grid__spark.is-down polyline{stroke:var(--dl-danger)}
.dl-grid__nest{padding:6px 10px 10px 44px}
.dl-grid__nest > b{display:block;margin-bottom:6px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-grid__nest table{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale));background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:6px;overflow:hidden}
.dl-grid__nest th{background:var(--dl-surface-alt);text-align:left;padding:5px 8px;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-grid__nest td{padding:5px 8px;border-top:1px solid var(--dl-border-soft)}
.dl-grid__nest .num{text-align:right;font-variant-numeric:tabular-nums}
.dl-grid__quick td{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-grid__qa{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dl-grid__qa input{flex:1;min-width:120px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:6px 8px;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
.dl-grid__qa small{color:var(--dl-muted)}
.dl-grid__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:12px}
.dl-grid__cards[hidden],.dl-grid__wrap[hidden]{display:none}
.dl-grid__card{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden;background:var(--dl-surface);cursor:pointer}
.dl-grid__card:hover{box-shadow:var(--dl-shadow-pop)}
.dl-grid__cards:has(.dl-grid__card--band){grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dl-grid__card--band{--bc:hsl(var(--h) 60% 45%)}
.dl-grid__bandhead{display:flex;align-items:center;gap:8px;padding:10px 14px;background:color-mix(in srgb,var(--bc) 16%,var(--dl-surface));color:color-mix(in srgb,var(--bc) 60%,var(--dl-ink-strong))}
.dl-grid__bandhead i{font-size:calc(18px * var(--dl-font-scale))}
.dl-grid__bandhead b{flex:1;font-size:calc(14px * var(--dl-font-scale));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-grid__bandhead small{font-size:calc(11px * var(--dl-font-scale));font-weight:600}
.dl-grid__bandbody{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 14px}
.dl-grid__bandbig strong{display:block;font-size:calc(26px * var(--dl-font-scale));font-weight:600;line-height:1;color:var(--dl-ink-strong)}
.dl-grid__bandbig em{font-style:normal;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-grid__bandmeta{display:flex;flex-direction:column;text-align:right;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-grid__bandmeta b{font-weight:500;color:var(--dl-ink-strong)}
.dl-grid__cardimg{position:relative;height:140px;background:var(--dl-chip);display:flex;align-items:center;justify-content:center;color:var(--dl-muted);font-size:28px}
.dl-grid__cardimg img{width:100%;height:100%;object-fit:cover}
.dl-grid__cardimg .dl-badge{position:absolute;top:8px;right:8px}
.dl-grid__cardbody{padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.dl-grid__cardbody b{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-grid__cardbody small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);font-family:var(--dl-font-mono)}
.dl-grid__cardbody span{display:flex;justify-content:space-between;gap:8px;font-size:calc(12px * var(--dl-font-scale))}
.dl-grid__cardbody em{font-style:normal;color:var(--dl-muted);flex:none}
.dl-grid__cardini{font-size:calc(34px * var(--dl-font-scale));font-weight:700;color:var(--dl-accent)}
.dl-grid[data-size="lg"] .dl-grid__cardbody b{font-size:calc(15px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-grid__cardbody small{font-size:calc(13px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-grid__cardbody span{font-size:calc(14px * var(--dl-font-scale))}
.dl-grid[data-size="lg"] .dl-grid__cardimg{height:120px}

.dl-drill{display:flex;flex-direction:column;gap:10px}
.dl-drill__crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-drill__crumb b{color:var(--dl-ink-strong)}
.dl-drill__crumb small{margin-left:6px}
[data-dd-summary][hidden],[data-dd-detail][hidden]{display:none}
.dl-grid__stars i{color:var(--dl-f-line)}.dl-grid__stars i.is-on{color:var(--dl-star)}

/* ================= PIVOT ================= */
.dl-pivot{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-pivot__bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--dl-border)}
.dl-pivot__title{align-self:center;font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong);margin-right:6px}
.dl-pivot__bar label:not(.dl-choice){display:flex;flex-direction:column;gap:2px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;color:var(--dl-muted)}
.dl-pivot__bar select{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:5px 8px;font-family:inherit;font-size:calc(12.5px * var(--dl-font-scale));background:var(--dl-surface);color:var(--dl-f-ink);min-width:130px}
.dl-pivot__wrap{overflow:auto;max-height:560px}
.dl-pivot__table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-pivot__table th{position:sticky;top:0;background:var(--dl-surface-alt);padding:7px 10px;text-align:left;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);border-bottom:1px solid var(--dl-border);white-space:nowrap;z-index:1}
.dl-pivot__table td{padding:6px 10px;border-bottom:1px solid var(--dl-border-soft);border-right:1px solid var(--dl-border-soft);color:var(--dl-ink)}
.dl-pivot__table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-pivot__cell{cursor:pointer;background:color-mix(in srgb,var(--dl-accent) calc(var(--k,0) * 100%),transparent)}
.dl-pivot__cell:hover,.dl-pivot__table .is-total:hover{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-pivot__table .is-total{font-weight:700;background:var(--dl-surface-alt);cursor:pointer}
.dl-pivot__table tr.is-sub td{background:var(--dl-accent-soft);font-weight:700}
.dl-pivot__grp{font-weight:700;vertical-align:top;background:var(--dl-surface)}
.dl-pivot__table tfoot td{background:var(--dl-navy);color:var(--dl-white);font-weight:800}
.dl-pivot__zero{color:var(--dl-muted)}
.dl-pivot__table tfoot .is-total{background:var(--dl-navy);color:var(--dl-white)}

/* ================= SHEET (spreadsheet) ================= */
.dl-sheet{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-sheet__bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--dl-border)}
.dl-sheet__bar > b{font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong);margin-right:6px}
.dl-sheet__info{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted);margin-left:6px}
.dl-sheet__wrap{overflow:auto;max-height:520px;outline:none}
.dl-sheet__wrap:focus-visible{box-shadow:inset 0 0 0 2px var(--dl-accent-ring)}
.dl-sheet__table{border-collapse:collapse;width:100%;font-size:calc(12.5px * var(--dl-font-scale));user-select:none}
.dl-sheet__table th{position:sticky;top:0;z-index:2;background:var(--dl-sheet-head);border:1px solid var(--dl-border);padding:6px 8px;text-align:left;font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);white-space:nowrap}
.dl-sheet__table td{position:relative;border:1px solid var(--dl-border-soft);padding:5px 8px;height:30px;color:var(--dl-ink);white-space:nowrap;cursor:cell}
.dl-sheet__table .num{text-align:right;font-variant-numeric:tabular-nums}
.dl-sheet__no{width:40px;text-align:center!important;background:var(--dl-sheet-head);color:var(--dl-ink);font-weight:600;font-size:calc(11px * var(--dl-font-scale));cursor:pointer!important;position:sticky;left:0;z-index:1}
.dl-sheet__table td.is-ro{background:var(--dl-sheet-ro);color:var(--dl-ink);cursor:default}
.dl-sheet ::placeholder{color:var(--dl-ink);opacity:1;font-style:italic}
.dl-sheet__bar .dl-btn{font-weight:700}
.dl-sheet__table td.is-sel{background:var(--dl-accent-soft)}
.dl-sheet__table td.is-cur{outline:2px solid var(--dl-accent);outline-offset:-2px;background:var(--dl-surface)}
.dl-sheet__table td.is-dirty::before{content:"";position:absolute;left:0;top:0;border-top:7px solid var(--dl-amber-2);border-right:7px solid transparent}
.dl-sheet__table td.is-bad{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-sheet__table td.is-empty{background:color-mix(in srgb,var(--dl-amber) 12%,var(--dl-surface))}
.dl-sheet__table td.is-filltgt{background:color-mix(in srgb,var(--dl-green) 14%,var(--dl-surface));outline:1px dashed var(--dl-green);outline-offset:-2px}
.dl-sheet__table tr.is-new td:not(.dl-sheet__no){background-image:linear-gradient(90deg,color-mix(in srgb,var(--dl-green) 7%,transparent),transparent)}
.dl-sheet__table tr.is-tone-danger td:not(.dl-sheet__no):not(.is-sel):not(.is-cur):not(.is-bad){background:color-mix(in srgb,var(--dl-danger) 14%,var(--dl-surface))}
.dl-sheet__table tr.is-tone-warn td:not(.dl-sheet__no):not(.is-sel):not(.is-cur):not(.is-bad){background:color-mix(in srgb,var(--dl-amber-2) 16%,var(--dl-surface))}
.dl-sheet__table tr.is-tone-success td:not(.dl-sheet__no):not(.is-sel):not(.is-cur):not(.is-bad){background:color-mix(in srgb,var(--dl-green) 12%,var(--dl-surface))}
.dl-sheet__fill{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--dl-accent);border:1.5px solid var(--dl-surface);cursor:crosshair;z-index:3}
.dl-sheet__in{position:absolute;inset:0;width:100%;height:100%;border:2px solid var(--dl-accent);padding:4px 7px;font-family:inherit;font-size:inherit;background:var(--dl-surface);color:var(--dl-f-ink);outline:none;box-sizing:border-box}
.dl-sheet__in.has-case{padding-right:34px}
.dl-sheet__table td.is-pick,.dl-sheet--lookup .dl-sheet__table td.is-pick{padding-right:30px}
.dl-sheet__cal{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;background:none;padding:0 3px;cursor:pointer;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));line-height:1}
.dl-sheet__cal:hover{color:var(--dl-accent)}
/* sel angka mengikuti objek field: bulat = spinner, desimal / uang = tombol ,00 */
.dl-sheet__spin{position:absolute;right:4px;top:3px;bottom:3px;display:flex;flex-direction:column;width:18px}
.dl-sheet__spin button{flex:1;min-height:0;background:var(--dl-f-bg-soft);border:1px solid var(--dl-f-line);color:var(--dl-f-label);font-size:calc(7px * var(--dl-font-scale));line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dl-sheet__spin button:first-child{border-radius:3px 3px 0 0;border-bottom:none}.dl-sheet__spin button:last-child{border-radius:0 0 3px 3px}
.dl-sheet__spin button:hover{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-sheet__dec{min-width:24px;padding:1px 5px;background:var(--dl-f-badge);border:1px solid var(--dl-f-line);border-radius:4px;color:var(--dl-f-badge-ink);font-size:calc(11px * var(--dl-font-scale));font-weight:700;font-family:var(--dl-font-mono);line-height:1.5;white-space:nowrap}
.dl-sheet__table td.is-dec,.dl-sheet--lookup .dl-sheet__table td.is-dec{padding-right:54px}
.dl-sheet__calpanel{z-index:1000}
.dl-calc{width:196px;padding:6px;outline:none}
.dl-calc__screen{background:var(--dl-surface-alt);border:1px solid var(--dl-border-soft);border-radius:4px;padding:4px 8px;margin-bottom:6px;text-align:right;font-variant-numeric:tabular-nums;min-height:40px}
.dl-calc__expr{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink);word-break:break-all}
.dl-calc__res{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-accent);font-weight:600;min-height:15px}
.dl-calc__keys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dl-calc__keys button{border:1px solid var(--dl-border-soft);background:var(--dl-surface);border-radius:4px;padding:5px 0;cursor:pointer;font-family:inherit;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-calc__keys button:hover{background:var(--dl-surface-alt)}
.dl-calc__keys .is-op{color:var(--dl-accent);font-weight:700}
.dl-calc__keys .is-eq{grid-row:span 2;background:var(--dl-accent);color:var(--dl-white);border-color:var(--dl-accent);font-weight:700}
.dl-calc__keys .is-eq:hover{background:var(--dl-accent)}
.dl-calc__keys .is-zero{grid-column:span 2}
.dl-sheet__case{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:4;cursor:pointer;padding:0 5px;line-height:16px;background:var(--dl-f-badge);border:1px solid var(--dl-f-line);border-radius:4px;color:var(--dl-f-badge-ink);font-family:inherit}
/* Grid Lookup (user 2026-09-30): rapat, saklar Aktif, info perubahan kuning. */
.dl-sheet--lookup .dl-sheet__table td{height:26px;padding:3px 8px}
.dl-sheet--lookup .dl-sheet__table th{padding:4px 8px}
.dl-sheet--lookup .dl-sheet__info.is-warn{color:var(--dl-amber-2);font-weight:600}
.dl-sheet--lookup .dl-sheet__table td.is-dirty:not(.is-cur):not(.is-bad){background:color-mix(in srgb,var(--dl-amber-2) 16%,var(--dl-surface))}
.dl-sheet__sw{display:inline-block;width:28px;height:15px;border-radius:8px;background:var(--dl-switch-off);position:relative;vertical-align:middle}
.dl-sheet__sw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .15s}
.dl-sheet__sw.is-on{background:var(--dl-green)}.dl-sheet__sw.is-on::after{left:15px}
.dl-sheet__help{margin:0;padding:6px 10px;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);border-top:1px solid var(--dl-border-soft)}

/* ================= FORM varian (BC) ================= */
.dl-form--panel{padding:0 10px 10px}
/* Form panel (Single / Master-Detail): pakai lebar layar penuh, margin kiri-kanan minim (user 2026-09-30). */
.dl-cat:has(.dl-form--panel){max-width:none;padding:6px 10px 40px}
.dl-form--panel .dl-tabs__panel{padding:8px 0 4px}
.dl-form--panel .dl-form__row{gap:6px 10px}
.dl-form__panel{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;background:var(--dl-surface);border-bottom:1px solid var(--dl-f-line-soft)}
.dl-form__sep{width:1px;align-self:stretch;margin:2px 2px;background:var(--dl-f-line-soft)}
.dl-form__heading{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dl-form__heading small{font-family:var(--dl-font-mono);font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
/* Master-Detail compact pass (user 2026-09-30): jarak dirapatkan, ukuran huruf isian tetap. */
.dl-form--panel .dl-form__panel{padding:6px 0;gap:6px}
.dl-form--panel .dl-form__strip{margin:6px 0 0;gap:6px}
.dl-form--panel .dl-strip__kv{padding:3px 10px}
.dl-form--panel .dl-strip__doc > b{font-size:calc(18px * var(--dl-font-scale))}
.dl-form--panel .dl-strip__grand > b{font-size:calc(19px * var(--dl-font-scale))}
.dl-form--panel .dl-tabs__panel{padding:6px 0 2px}
.dl-form--panel .dl-lines__head{padding:6px 10px}
.dl-form--panel .dl-lines__footer{padding:2px 10px 8px;gap:10px}
.dl-form--panel .dl-lines__adj .dl-tabs__panel{padding:4px 0 0}
.dl-form--panel .dl-lines__adjt .dl-lines__adjin{padding:3px 6px}
.dl-form--panel .dl-lines__footer .dl-lines__totals{padding:6px 12px;gap:2px}
.dl-form--panel .dl-lines__hint{margin-top:3px}
.dl-confirm__why{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:calc(12px * var(--dl-font-scale))}
.dl-confirm__why textarea{width:100%;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:6px 8px;font-family:inherit;font-size:inherit;background:var(--dl-surface);color:var(--dl-f-ink);resize:vertical}
.dl-confirm__why em{color:var(--dl-danger);font-style:normal;font-size:calc(11px * var(--dl-font-scale))}
.dl-form__logact--approved,.dl-form__logact--approve{background:var(--dl-success-soft, #dcfce7);color:var(--dl-green)}
.dl-form__logact--rejected{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-form__steps{display:inline-flex;align-items:stretch;flex:none;margin-left:4px}
.dl-form__step{position:relative;display:inline-flex;align-items:center;height:22px;padding:0 12px 0 16px;margin-left:-4px;font-size:calc(11px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);background:var(--dl-chip);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%);white-space:nowrap}
.dl-form__step:first-child{margin-left:0;padding-left:11px;border-radius:11px 0 0 11px;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
.dl-form__step.is-done{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-form__step.is-active{background:var(--dl-accent);color:var(--dl-white)}
.dl-form__step.is-hold{background:var(--dl-amber-2);color:var(--dl-white)}
.dl-form__logact--hold{background:var(--dl-amber-soft, #fef3c7);color:var(--dl-amber-2)}
.dl-form__step.is-rejected{background:var(--dl-danger);color:var(--dl-white)}
.dl-form__panel .dl-form__title{font-size:calc(22px * var(--dl-font-scale))}
.dl-form--panel .dl-form__body.dl-tabs{display:block;margin-top:4px}
.dl-form--panel .dl-tabs__panel > * + *{margin-top:6px}
.dl-form__audit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px;max-width:880px}
.dl-form__logwrap{margin-top:10px;border:1px solid var(--dl-border-soft);border-radius:var(--dl-radius-lg);overflow:auto;max-height:240px}
.dl-form__log{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-form__log th{position:sticky;top:0;background:var(--dl-surface-alt);text-align:left;padding:5px 8px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.03em}
.dl-form__log td{padding:5px 8px;border-top:1px solid var(--dl-border-soft);white-space:nowrap}
.dl-form__log td:last-child{white-space:normal;color:var(--dl-muted)}
.dl-form__logact{display:inline-block;padding:0 8px;border-radius:9px;font-size:calc(11px * var(--dl-font-scale));font-weight:600;background:var(--dl-chip);color:var(--dl-ink)}
.dl-form__logact--confirmed,.dl-form__logact--closed{background:var(--dl-success-soft, #dcfce7);color:var(--dl-green)}
.dl-form__logact--cancelled{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-form__logact--back-to-draft{background:var(--dl-amber-soft, #fef3c7);color:var(--dl-amber-2)}
.dl-form__logact--created{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-form__fs{border:0;margin:0;padding:0;min-width:0}
.dl-form__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl-form.is-view .dl-field__box,.dl-form.is-view .dl-dd__btn,.dl-form.is-view .dl-prefix__btn,.dl-form.is-view .dl-input--boxed{border-color:transparent!important;background:transparent!important;box-shadow:none!important}
.dl-form.is-view .dl-input,.dl-form.is-view .dl-dd__btn{color:var(--dl-ink-strong)!important;-webkit-text-fill-color:var(--dl-ink-strong);opacity:1;padding-left:0}
.dl-form.is-view .dl-case,.dl-form.is-view .dl-field__trigger,.dl-form.is-view .dl-dd__btn > span:last-child,.dl-form.is-view .dl-field__hint,.dl-form.is-view .dl-field__req{display:none}
.dl-form.is-view .dl-field__label{color:var(--dl-muted)}
.dl-form.is-view .dl-field{border-bottom:1px dashed var(--dl-border-soft)}
.dl-form.is-view .dl-form__foot [data-dl-split],.dl-form.is-view .dl-form__foot [data-f-cancel]{display:none}
.dl-tabs__err{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;border-radius:9px;background:var(--dl-danger);color:var(--dl-white);font-size:10.5px;font-weight:800}
.dl-forms-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dl-form__body > :is(.dl-tabs,.dl-lines){grid-column:1/-1}
.dl-form.is-view [data-dl-phone-read]{display:none}

.dl-stat--violet{border-left-color:var(--dl-violet)}


/* ================= CHAT (WhatsApp) ================= */
.dl-wa{position:relative;display:grid;grid-template-columns:320px minmax(0,1fr);height:var(--dl-wa-h,560px);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden;background:var(--dl-surface)}
.dl-wa__side{position:relative;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--dl-border)}
.dl-wa__main{display:flex;flex-direction:column;min-height:0;min-width:0}
.dl-wa__bar{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:54px;background:var(--dl-surface-alt);border-bottom:1px solid var(--dl-border)}
.dl-wa__ib{border:none;background:none;width:34px;height:34px;border-radius:50%;color:var(--dl-muted);cursor:pointer;display:grid;place-items:center;flex:none}
.dl-wa__ib:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-wa__search{display:flex;align-items:center;gap:8px;margin:8px 10px;padding:6px 12px;border-radius:var(--dl-radius-lg);background:var(--dl-surface-alt);color:var(--dl-muted)}
.dl-wa__search input{border:none;background:none;outline:none;flex:1;font-family:inherit;color:var(--dl-ink);min-width:0}
.dl-wa__list{flex:1;overflow-y:auto;min-height:0}
.dl-wa__cap{padding:8px 14px 4px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-green)}
.dl-wa__row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;font-family:inherit;color:var(--dl-ink)}
.dl-wa__row:hover{background:var(--dl-hover)}
.dl-wa__row.is-active{background:var(--dl-accent-soft)}
.dl-wa__av{--c:var(--dl-accent);position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--dl-surface));color:var(--c);font-weight:800;font-size:calc(14px * var(--dl-font-scale))}
.dl-wa__av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.dl-wa__bar > .dl-wa__av{width:36px;height:36px}
.dl-wa__dot{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--dl-green);box-shadow:0 0 0 2px var(--dl-surface)}
.dl-wa__rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--dl-border-soft);padding-bottom:8px}
.dl-wa__r1,.dl-wa__r2{display:flex;align-items:center;justify-content:space-between;gap:6px}
.dl-wa__r1 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dl-ink-strong)}
.dl-wa__r1 small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);flex:none}
.dl-wa__r1 small.is-new{color:var(--dl-green);font-weight:700}
.dl-wa__r2 > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-wa__badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--dl-green);color:var(--dl-white);font-size:calc(11px * var(--dl-font-scale));font-weight:800;display:grid;place-items:center}
.dl-wa__tk{font-size:.85em;color:var(--dl-muted)}
.dl-wa__tk.is-read{color:var(--dl-accent)}
.dl-wa__none{padding:14px;color:var(--dl-muted);text-align:center}
.dl-wa__new{position:absolute;inset:0;background:var(--dl-surface);display:flex;flex-direction:column;z-index:2}
.dl-wa__new[hidden]{display:none}
.dl-wa__head{gap:6px}
.dl-wa__who{display:flex;align-items:center;gap:10px;border:none;background:none;cursor:pointer;text-align:left;font-family:inherit;color:var(--dl-ink);min-width:0}
.dl-wa__who > span:last-child{display:flex;flex-direction:column;min-width:0}
.dl-wa__who small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-wa__who small.is-on{color:var(--dl-green)}
.dl-wa__back{display:none}
.dl-wa__msgs{flex:1;overflow-y:auto;padding:14px 6%;display:flex;flex-direction:column;gap:4px;background-color:var(--dl-surface-alt);background-image:radial-gradient(var(--dl-border) 1px,transparent 1px);background-size:18px 18px}
.dl-wa__day{text-align:center;margin:8px 0}
.dl-wa__day span{display:inline-block;padding:4px 10px;border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));box-shadow:0 1px 1px var(--dl-overlay-soft)}
.dl-wa__msg{align-self:flex-start;max-width:min(70%,420px);background:var(--dl-surface);color:var(--dl-ink);padding:6px 8px 4px;border-radius:var(--dl-radius-lg);border-top-left-radius:2px;box-shadow:0 1px 1px var(--dl-overlay-soft);display:flex;flex-direction:column}
.dl-wa__msg.is-me{align-self:flex-end;background:color-mix(in srgb,var(--dl-green) 20%,var(--dl-surface));border-top-left-radius:var(--dl-radius-lg);border-top-right-radius:2px}
.dl-wa__t{white-space:pre-wrap;word-break:break-word;font-size:calc(13px * var(--dl-font-scale))}
.dl-wa__meta{align-self:flex-end;font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted);margin-top:1px;white-space:nowrap}
.dl-wa__img{border:none;padding:0;background:none;cursor:zoom-in;margin-bottom:3px}
.dl-wa__img img{display:block;max-width:240px;max-height:240px;border-radius:var(--dl-radius);object-fit:cover}
.dl-wa__empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--dl-muted);max-width:320px}
.dl-wa__empty > i{font-size:48px;opacity:.5}
.dl-wa__empty b{color:var(--dl-ink-strong);font-size:calc(16px * var(--dl-font-scale))}
.dl-wa__preview{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--dl-border);background:var(--dl-surface)}
.dl-wa__preview[hidden]{display:none}
.dl-wa__preview img{width:56px;height:56px;object-fit:cover;border-radius:var(--dl-radius)}
.dl-wa__preview span{flex:1;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-wa__in{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--dl-surface-alt);border-top:1px solid var(--dl-border)}
.dl-wa__in[hidden]{display:none}
.dl-wa__box{flex:1;min-width:0;display:flex;align-items:center;gap:4px;background:var(--dl-surface);border-radius:var(--dl-radius-lg);padding:4px 6px 4px 12px;border:1px solid var(--dl-border)}
.dl-wa__box input{flex:1;border:none;outline:none;background:none;font-family:inherit;color:var(--dl-f-ink);padding:5px 0;min-width:0}
.dl-wa__box .dl-case{position:static;transform:none}
.dl-wa__send{width:40px;height:40px;border-radius:50%;border:none;background:var(--dl-green);color:var(--dl-white);cursor:pointer;flex:none}
.dl-wa__lb{position:absolute;inset:0;z-index:5;background:var(--dl-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px}
.dl-wa__lb[hidden]{display:none}
.dl-wa__lb img{max-width:100%;max-height:80%;border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-modal)}
.dl-wa__lb .dl-wa__ib{position:absolute;top:10px;right:10px;color:var(--dl-white)}
.dl-wa__lbcap{color:var(--dl-white)}
/* Sedang login = avatar warna penuh + cincin hijau; tidak login = abu-abu (user 2026-10-02: "warna cerah kalau orangnya online"). */
.dl-wa__av.is-on{background:var(--c);color:var(--dl-white);box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-green)}
.dl-wa__av:not(.is-on) img{filter:grayscale(1);opacity:.7}
.dl-wa__row.is-off .dl-wa__r1 b{color:var(--dl-muted);font-weight:600}
.dl-wa__cap.is-off{color:var(--dl-muted)}
.dl-wa__typing{color:var(--dl-green);font-weight:600}
/* Lampiran: kartu file (unduh), garis kemajuan upload, pesan gagal, halaman pesan sebelumnya. */
.dl-wa__file{display:flex;align-items:center;gap:10px;width:240px;max-width:100%;box-sizing:border-box;padding:8px 10px;margin-bottom:3px;border-radius:var(--dl-radius);background:color-mix(in srgb,var(--dl-ink) 7%,transparent);color:var(--dl-ink);text-decoration:none}
a.dl-wa__file[href]:hover{background:color-mix(in srgb,var(--dl-ink) 12%,transparent)}
.dl-wa__file > i:first-child{font-size:26px;color:var(--dl-accent);flex:none}
.dl-wa__file > i:last-child{color:var(--dl-muted);flex:none}
.dl-wa__file span{flex:1;min-width:0;display:flex;flex-direction:column}
.dl-wa__file b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-wa__file small{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-wa__up{display:block;height:3px;border-radius:2px;background:var(--dl-border);overflow:hidden;margin-top:4px}
.dl-wa__up i{display:block;height:100%;background:var(--dl-green);transition:width .2s}
.dl-wa__msg.is-failed{box-shadow:0 0 0 1px var(--dl-danger)}
.dl-wa__tk.is-failed{color:var(--dl-danger)}
.dl-wa__more{align-self:center;flex:none;border:none;margin-bottom:6px;padding:4px 12px;border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-accent);font-family:inherit;font-size:calc(11.5px * var(--dl-font-scale));cursor:pointer;box-shadow:0 1px 1px var(--dl-overlay-soft)}
.dl-wa__pvico{flex:none;width:56px;text-align:center;font-size:34px;color:var(--dl-accent)}
.dl-wa__preview span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dl-wa__preview b{color:var(--dl-ink)}
.dl-wa__lb .dl-wa__lbdl{right:52px;text-decoration:none}
.dl-wa__lb .dl-wa__lbdl[hidden]{display:none}
.dl-wa.is-compact{grid-template-columns:1fr}
.dl-wa.is-compact .dl-wa__msg{max-width:88%}
.dl-wa.is-compact .dl-wa__main{display:none}
.dl-wa.is-compact.is-open .dl-wa__main{display:flex}
.dl-wa.is-compact.is-open .dl-wa__side{display:none}
.dl-wa.is-compact .dl-wa__back{display:grid}
.dl-wa.is-compact .dl-wa__side{border-right:none}
.dl-wa.is-compact .dl-wa__msgs{padding:12px 10px}
@media(max-width:700px){.dl-wa{grid-template-columns:1fr}.dl-wa .dl-wa__main{display:none}.dl-wa.is-open .dl-wa__main{display:flex}.dl-wa.is-open .dl-wa__side{display:none}.dl-wa .dl-wa__back{display:grid}}

.dl-drawer .dl-wa{flex:1;height:auto;min-height:0;border:none;border-radius:0}


/* ================= RIBBON (Excel) ================= */
.dl-rb{--rb:var(--dl-green);position:relative;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);font-size:calc(12px * var(--dl-font-scale));user-select:none}
.dl-rb__title{display:flex;align-items:center;gap:10px;padding:5px 10px;background:var(--rb);color:var(--dl-white);border-radius:var(--dl-radius-lg) var(--dl-radius-lg) 0 0}
.dl-rb__quick{display:flex;gap:2px}
.dl-rb__quick button{border:none;background:none;color:var(--dl-white);width:26px;height:24px;border-radius:var(--dl-radius-sm);cursor:pointer}
.dl-rb__quick button:hover{background:color-mix(in srgb,var(--dl-white) 20%,transparent)}
.dl-rb__doc{flex:1;text-align:center;font-weight:600}
.dl-rb__tell{position:relative;display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--dl-white) 18%,transparent);border-radius:var(--dl-radius);padding:3px 8px;width:220px}
.dl-rb__tell input{border:none;background:none;outline:none;color:var(--dl-white);font-family:inherit;flex:1;min-width:0}
.dl-rb__tell input::placeholder{color:color-mix(in srgb,var(--dl-white) 75%,transparent)}
.dl-rb__found{position:absolute;top:calc(100% + 4px);right:0;width:300px;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);z-index:30;padding:4px}
.dl-rb__found[hidden]{display:none}
.dl-rb__found button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:none;background:none;padding:6px 8px;border-radius:var(--dl-radius-sm);cursor:pointer;font-family:inherit;color:var(--dl-ink)}
.dl-rb__found button:hover{background:var(--dl-hover)}
.dl-rb__found small{color:var(--dl-muted)}
.dl-rb__found p{margin:6px;color:var(--dl-muted)}
.dl-rb__tabs{display:flex;align-items:flex-end;gap:2px;padding:4px 8px 0;border-bottom:1px solid var(--dl-border);background:var(--dl-surface)}
.dl-rb__tab{position:relative;border:none;background:none;padding:6px 12px;font-family:inherit;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink);cursor:pointer;border-radius:var(--dl-radius-sm) var(--dl-radius-sm) 0 0}
.dl-rb__tab:hover{background:var(--dl-hover)}
.dl-rb__tab.is-active{color:var(--rb);font-weight:700;box-shadow:inset 0 -3px 0 var(--rb)}
.dl-rb__tab.is-file{background:var(--rb);color:var(--dl-white);font-weight:700}
.dl-rb__pin{border:none;background:none;color:var(--dl-muted);cursor:pointer;padding:4px 8px;margin-bottom:3px;border-radius:var(--dl-radius-sm)}
.dl-rb__pin:hover{background:var(--dl-hover)}
.dl-rb.is-min .dl-rb__pin i{transform:rotate(180deg)}
.dl-rb__body{position:relative;background:var(--dl-surface-alt);border-radius:0 0 var(--dl-radius-lg) var(--dl-radius-lg)}
.dl-rb.is-min .dl-rb__body{display:none}
.dl-rb.is-min.is-float .dl-rb__body{display:block;position:absolute;left:0;right:0;z-index:25;box-shadow:var(--dl-shadow-pop);border:1px solid var(--dl-border)}
.dl-rb__panel{display:none;align-items:stretch;padding:4px 4px 0;overflow-x:auto}
.dl-rb__panel.is-active{display:flex}
.dl-rb__group{display:flex;flex-direction:column;padding:0 6px;border-right:1px solid var(--dl-border);min-height:96px}
.dl-rb__items{display:flex;align-items:flex-start;gap:2px;flex:1}
.dl-rb__glabel{text-align:center;color:var(--dl-muted);font-size:calc(10.5px * var(--dl-font-scale));padding:2px 0 4px;white-space:nowrap}
.dl-rb__stack{display:flex;flex-direction:column;gap:1px}
.dl-rb__row{display:flex;gap:1px}
.dl-rb__btn{position:relative;display:flex;align-items:center;gap:6px;border:1px solid transparent;background:none;border-radius:var(--dl-radius-sm);cursor:pointer;font-family:inherit;color:var(--dl-ink);white-space:nowrap}
.dl-rb__btn:hover,.dl-rb__arrow:hover{background:var(--dl-hover);border-color:var(--dl-border)}
.dl-rb__btn.is-on{background:color-mix(in srgb,var(--rb) 16%,var(--dl-surface));border-color:color-mix(in srgb,var(--rb) 45%,var(--dl-surface))}
.dl-rb__btn.is-sm{height:24px;padding:0 6px}
.dl-rb__btn.is-icon{width:26px;justify-content:center;padding:0}
.dl-rb__btn.is-sm .dl-rb__ico{width:16px;text-align:center;color:var(--rb)}
.dl-rb__btn.is-lg{flex-direction:column;justify-content:flex-start;gap:3px;width:58px;height:72px;padding:4px 2px;white-space:normal;text-align:center;line-height:1.15}
.dl-rb__btn.is-lg .dl-rb__ico{font-size:24px;color:var(--rb)}
.dl-rb__caret{font-size:.8em;color:var(--dl-muted)}
.dl-rb__drop,.dl-rb__split{position:relative;display:flex}
.dl-rb__split.is-lg{flex-direction:column;width:58px}
.dl-rb__split.is-lg .dl-rb__btn{height:44px;border-radius:var(--dl-radius-sm) var(--dl-radius-sm) 0 0}
.dl-rb__arrow{border:1px solid transparent;background:none;border-radius:var(--dl-radius-sm);cursor:pointer;font-family:inherit;color:var(--dl-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1;padding:0 3px}
.dl-rb__split.is-lg .dl-rb__arrow{height:30px;border-radius:0 0 var(--dl-radius-sm) var(--dl-radius-sm)}
.dl-rb__split:hover .dl-rb__btn,.dl-rb__split:hover .dl-rb__arrow{border-color:var(--dl-border)}
.dl-rb__menu{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:200px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:4px}
.dl-rb__drop.is-open > .dl-rb__menu,.dl-rb__split.is-open > .dl-rb__menu{display:block}
.dl-rb__menu hr{border:none;border-top:1px solid var(--dl-border-soft);margin:4px 2px}
.dl-rb__mi{position:relative}
.dl-rb__mi > button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;padding:6px 8px;border-radius:var(--dl-radius-sm);cursor:pointer;font-family:inherit;color:var(--dl-ink);text-align:left}
.dl-rb__mi > button:hover{background:var(--dl-hover)}
.dl-rb__mi kbd{margin-left:auto;font-family:var(--dl-font-mono);font-size:.85em;color:var(--dl-muted)}
.dl-rb__mico{width:16px;text-align:center;color:var(--rb)}
.dl-rb__chev{margin-left:auto;font-size:.75em;color:var(--dl-muted)}
.dl-rb__mi > .dl-rb__menu{top:-5px;left:100%}
.dl-rb__mi.has-sub:hover > .dl-rb__menu,.dl-rb__mi.is-open > .dl-rb__menu{display:block}
.dl-rb__kt{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:5;min-width:16px;padding:0 4px;border-radius:3px;background:var(--dl-ink-strong);color:var(--dl-white);font-size:10px;font-weight:700;line-height:16px;text-align:center;pointer-events:none}
.dl-rb__stage{position:absolute;inset:0;z-index:40;display:grid;grid-template-columns:180px 1fr;background:var(--dl-surface);border-radius:var(--dl-radius-lg);overflow:hidden;min-height:220px}
.dl-rb__stage[hidden]{display:none}
.dl-rb__stagenav{background:var(--rb);display:flex;flex-direction:column;padding:8px 0}
.dl-rb__stagenav button{border:none;background:none;color:var(--dl-white);text-align:left;padding:9px 16px;cursor:pointer;font-family:inherit;display:flex;gap:10px;align-items:center}
.dl-rb__stagenav button:hover{background:color-mix(in srgb,var(--dl-white) 16%,transparent)}
.dl-rb__stagebody{padding:18px 22px;overflow:auto}

/* ================= MEGA MENU (ScriptCase) ================= */
.dl-mm{--mm:var(--dl-green);position:relative;display:flex;align-items:center;gap:6px;min-height:46px;padding:0 12px;background:var(--mm);color:var(--dl-white);border-radius:var(--dl-radius-lg);font-size:calc(13px * var(--dl-font-scale))}
.dl-mm--navy{--mm:var(--dl-navy)}.dl-mm--accent{--mm:var(--dl-accent)}.dl-mm--violet{--mm:var(--dl-violet)}
.dl-mm__brand{font-weight:800;letter-spacing:.03em;margin-right:10px;white-space:nowrap}
.dl-mm__burger{display:none;border:none;background:none;color:var(--dl-white);font-size:18px;cursor:pointer;padding:6px}
.dl-mm__bar{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;align-self:stretch}
.dl-mm__top{position:relative;display:flex}
.dl-mm__tl{display:flex;align-items:center;gap:7px;padding:0 14px;border:none;background:none;color:var(--dl-white);font-family:inherit;font-size:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.dl-mm__top:hover > .dl-mm__tl,.dl-mm__top.is-open > .dl-mm__tl{background:color-mix(in srgb,var(--dl-ink-strong) 18%,transparent)}
.dl-mm__top.is-current > .dl-mm__tl{box-shadow:inset 0 -3px 0 var(--dl-white)}
.dl-mm__caret{font-size:.8em;opacity:.85}
.dl-mm__end{margin-left:auto;display:flex;align-items:center;gap:8px}
.dl-mm__panel{display:none;position:absolute;top:100%;left:0;z-index:40;min-width:220px;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-radius:0 0 var(--dl-radius-lg) var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:8px}
.dl-mm__top.is-open > .dl-mm__panel{display:block}
.dl-mm__panel.is-mega{display:none;grid-template-columns:repeat(var(--cols),minmax(180px,1fr));gap:4px 18px;padding:14px 16px;width:max-content;max-width:min(92vw,960px)}
.dl-mm__top.is-open > .dl-mm__panel.is-mega{display:grid}
.dl-mm__head{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;margin-bottom:4px;border-bottom:2px solid color-mix(in srgb,var(--mm) 35%,var(--dl-surface));font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-mm__head i{color:var(--mm);font-size:16px}
.dl-mm__list{list-style:none;margin:0;padding:0}
.dl-mm__list li{position:relative}
.dl-mm__li{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:none;background:none;border-radius:var(--dl-radius-sm);color:var(--dl-ink);text-decoration:none;font-family:inherit;font-size:inherit;cursor:pointer;text-align:left}
.dl-mm__li > i:first-child{width:16px;text-align:center;color:var(--dl-muted)}
.dl-mm__li:hover{background:color-mix(in srgb,var(--mm) 12%,var(--dl-surface));color:var(--dl-ink-strong)}
.dl-mm__li:hover > i:first-child{color:var(--mm)}
.dl-mm__chev{margin-left:auto;font-size:.75em;color:var(--dl-muted)}
.dl-mm__badge{margin-left:auto;font-style:normal;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;padding:1px 6px;border-radius:9px;background:var(--dl-danger);color:var(--dl-white)}
.dl-mm__list .dl-mm__list{display:none;position:absolute;top:-8px;left:100%;min-width:200px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius);box-shadow:var(--dl-shadow-pop);padding:6px;z-index:2}
.dl-mm__list li.has-sub:hover > .dl-mm__list,.dl-mm__list li.is-open > .dl-mm__list{display:block}
.dl-mm.is-narrow .dl-mm__burger{display:block}
.dl-mm.is-narrow .dl-mm__bar{display:none}
.dl-mm.is-narrow.is-mobile .dl-mm__bar{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--mm);padding:4px 0;border-radius:0 0 var(--dl-radius-lg) var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop)}
.dl-mm.is-narrow .dl-mm__top{flex-direction:column}
.dl-mm.is-narrow .dl-mm__tl{padding:10px 16px}
.dl-mm.is-narrow .dl-mm__panel,.dl-mm.is-narrow .dl-mm__panel.is-mega{position:static;width:auto;max-width:none;border-radius:0;box-shadow:none;grid-template-columns:1fr}
.dl-mm.is-narrow .dl-mm__list .dl-mm__list{position:static;box-shadow:none;border:none;padding-left:16px}

/* ================= SIDE MENU (kiri / kanan) ================= */
.dl-sm{position:relative;display:flex;flex-direction:column;width:260px;flex:none;background:var(--dl-side);color:var(--dl-side-ink);border-radius:var(--dl-radius-lg);transition:width .18s;font-size:calc(13px * var(--dl-font-scale));min-height:0}
.dl-sm.is-mini{width:60px}
.dl-sm__head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
.dl-sm--right .dl-sm__head{flex-direction:row-reverse}
.dl-sm__title{flex:1;white-space:nowrap;overflow:hidden;color:var(--dl-white)}
.dl-sm__mini{border:none;background:none;color:var(--dl-side-muted);cursor:pointer;width:30px;height:30px;border-radius:var(--dl-radius-sm);flex:none}
.dl-sm__mini:hover{background:var(--dl-side-hover);color:var(--dl-white)}
.dl-sm.is-mini .dl-sm__mini i{transform:rotate(180deg)}
.dl-sm.is-mini .dl-sm__title,.dl-sm.is-mini .dl-sm__search,.dl-sm.is-mini .dl-sm__t,.dl-sm.is-mini .dl-sm__chev,.dl-sm.is-mini .dl-sm__star,.dl-sm.is-mini .dl-sm__cap .dl-sm__t{display:none}
.dl-sm__search{display:flex;align-items:center;gap:6px;margin:0 10px 6px;padding:6px 10px;border-radius:var(--dl-radius);background:var(--dl-side-hover);color:var(--dl-side-muted)}
.dl-sm__search input{border:none;background:none;outline:none;color:var(--dl-white);font-family:inherit;flex:1;min-width:0}
.dl-sm__scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 6px 10px}
.dl-sm__ul{list-style:none;margin:0;padding:0}
.dl-sm__ul .dl-sm__ul{display:none;padding-left:14px;margin-left:12px;border-left:1px solid var(--dl-side-hover)}
.dl-sm__node.is-open > .dl-sm__ul{display:block}
.dl-sm.is-mini [data-sm-tree] .dl-sm__ul .dl-sm__ul{display:none}
.dl-sm__cap{padding:12px 10px 4px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;letter-spacing:.05em;color:var(--dl-side-muted);text-transform:uppercase;display:flex;gap:6px;align-items:center}
.dl-sm.is-mini .dl-sm__cap{justify-content:center}
.dl-sm__leaf{position:relative;display:flex;align-items:center}
.dl-sm__a{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;background:none;border-radius:var(--dl-radius);color:var(--dl-side-ink);text-decoration:none;font-family:inherit;font-size:inherit;cursor:pointer;text-align:left;min-width:0}
.dl-sm__a:hover{background:var(--dl-side-hover);color:var(--dl-white)}
.dl-sm.is-mini .dl-sm__a{justify-content:center;padding:9px 0}
.dl-sm__ico{width:18px;text-align:center;flex:none}
.dl-sm__dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;margin:0 6px;flex:none}
.dl-sm__t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-sm__chev{font-size:.72em;transition:transform .15s;color:var(--dl-side-muted)}
.dl-sm__node.is-open > .dl-sm__a .dl-sm__chev{transform:rotate(90deg)}
.dl-sm__badge{font-style:normal;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;padding:1px 7px;border-radius:9px;background:var(--dl-accent);color:var(--dl-white)}
.dl-sm__badge.is-danger{background:var(--dl-danger)}.dl-sm__badge.is-warn{background:var(--dl-amber-2)}.dl-sm__badge.is-success{background:var(--dl-green)}
.dl-sm.is-mini .dl-sm__badge{position:absolute;top:2px;right:6px;padding:0 4px;font-size:9px}
.dl-sm__leaf.is-active > .dl-sm__a{background:var(--dl-accent);color:var(--dl-white)}
.dl-sm__star{position:absolute;right:4px;border:none;background:none;color:var(--dl-side-muted);cursor:pointer;opacity:0;padding:4px 6px}
.dl-sm__leaf:hover .dl-sm__star,.dl-sm__star.is-on{opacity:1}
.dl-sm__star.is-on{color:var(--dl-star)}
.dl-sm__leaf:has(.dl-sm__star) > .dl-sm__a{padding-right:28px}
.dl-sm li.is-hidden{display:none}
.dl-sm li.is-hit > .dl-sm__a .dl-sm__t{color:var(--dl-white);font-weight:700}
.dl-sm__extra{border-bottom:1px solid var(--dl-side-hover);padding-bottom:6px;margin-bottom:4px}
.dl-sm__extra[hidden]{display:none}
.dl-sm__fly{position:absolute;left:calc(100% + 6px);z-index:30;width:230px;background:var(--dl-surface);color:var(--dl-ink);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:6px}
.dl-sm--right .dl-sm__fly{left:auto;right:calc(100% + 6px)}
.dl-sm__fly[hidden]{display:none}
.dl-sm__flyhead{font-weight:800;padding:6px 10px;border-bottom:1px solid var(--dl-border-soft);margin-bottom:4px;color:var(--dl-ink-strong)}
.dl-sm__fly > .dl-sm__ul{display:block;padding:0;margin:0;border:none}
.dl-sm__fly .dl-sm__a{color:var(--dl-ink)}
.dl-sm__fly .dl-sm__a:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-sm__fly .dl-sm__ul .dl-sm__ul{border-left-color:var(--dl-border)}
.dl-sm__fly .dl-sm__t{display:block!important}
.dl-sm__fly .dl-sm__chev{display:inline!important}
.dl-sm-demo{display:flex;gap:12px;height:560px;align-items:stretch}
.dl-sm-demo__page{flex:1;min-width:0;border:1px dashed var(--dl-border);border-radius:var(--dl-radius-lg);display:grid;place-items:center;color:var(--dl-muted);text-align:center;padding:16px}

.dl-sm.is-mini .dl-sm__leaf > .dl-sm__a{padding:9px 0}
.dl-sm.is-mini li.dl-sm__cap{padding:6px 0;margin:6px 10px;border-top:1px solid var(--dl-side-hover)}
.dl-sm.is-mini [data-sm-tree] .dl-sm__node:has(.dl-sm__leaf.is-active) > .dl-sm__a{background:var(--dl-accent);color:var(--dl-white)}
.dl-sm.is-mini .dl-sm__fly .dl-sm__a{justify-content:flex-start;padding:7px 10px}
.dl-sm.is-mini .dl-sm__fly .dl-sm__badge{position:static;padding:1px 7px;font-size:calc(10.5px * var(--dl-font-scale))}

/* ================= TABS vertikal ================= */
.dl-tabs.is-vertical{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.dl-tabs.is-vertical > .dl-tabs__bar{flex-direction:column;border-bottom:none;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:8px;overflow:visible;position:sticky;top:10px}
.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab{text-align:left;border-bottom:none;border-radius:var(--dl-radius);padding:10px 12px;display:flex;gap:10px;align-items:center}
.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab i{width:18px;text-align:center}
.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab:hover{background:var(--dl-hover)}
.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab.is-active{background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-tabs.is-vertical > .dl-tabs__panel{padding:0}
@media(max-width:820px){.dl-tabs.is-vertical{grid-template-columns:56px minmax(0,1fr)}.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab{font-size:0;justify-content:center}.dl-tabs.is-vertical > .dl-tabs__bar .dl-tabs__tab i{font-size:16px}}

/* ================= AUTH (register / forgot) ================= */
.dl-auth .dl-loginbox__form{max-width:430px}
.dl-auth .dl-loginbox__sub{margin-bottom:12px}
.dl-auth__note{display:flex;gap:9px;background:var(--dl-info-soft);border:1px solid var(--dl-info-line);border-radius:var(--dl-radius);padding:10px 12px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-accent);margin-bottom:14px}
.dl-auth__note i{margin-top:2px}
.dl-auth__with{display:flex;align-items:flex-start;gap:8px}
.dl-auth__with > .dl-field{flex:1;min-width:0}
.dl-auth__with > .dl-btn{margin-top:24px;flex:none}
.dl-auth__with > .dl-btn[hidden],.dl-auth__with[hidden]{display:none}
.dl-auth__two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.dl-auth__two{grid-template-columns:1fr}}
.dl-auth .dl-field.is-valid .dl-field__hint{color:var(--dl-green);font-weight:600}
.dl-auth .dl-field.is-valid .dl-field__box,.dl-auth .dl-field.is-valid .dl-input--boxed{border-color:var(--dl-green)}
.dl-auth__back{margin-top:14px}
.dl-auth__done{text-align:center;padding:12px 0}
.dl-auth__done[hidden],[data-rg-box][hidden],[data-fg-step][hidden]{display:none}
.dl-auth__circle{width:66px;height:66px;border-radius:50%;background:color-mix(in srgb,var(--dl-green) 15%,var(--dl-surface));color:var(--dl-green);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px}
.dl-auth__done h3{font-size:calc(20px * var(--dl-font-scale));color:var(--dl-box-strong,var(--dl-ink-strong));margin:0 0 8px}
.dl-auth__done p{color:var(--dl-box-muted,var(--dl-muted));line-height:1.6;margin:0 auto;max-width:340px}
.dl-auth__ok{background:color-mix(in srgb,var(--dl-green) 12%,var(--dl-surface));color:var(--dl-green);border:1px solid color-mix(in srgb,var(--dl-green) 35%,var(--dl-surface));border-radius:var(--dl-radius);padding:14px;text-align:center}
.dl-auth__steps{display:flex;gap:6px;margin:4px 0 14px}
.dl-auth__steps > span{flex:1;text-align:center;padding:6px;border-radius:var(--dl-radius);background:var(--dl-surface-alt);color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));font-weight:700}
.dl-auth__steps > span.is-active{background:var(--dl-accent);color:var(--dl-white)}
.dl-auth__steps > span.is-done{background:color-mix(in srgb,var(--dl-green) 15%,var(--dl-surface));color:var(--dl-green)}

/* ================= LOCK SCREEN ================= */
.dl-lock{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px;background:color-mix(in srgb,var(--dl-navy) 88%,transparent);backdrop-filter:blur(14px);color:var(--dl-white)}
.dl-lock[hidden]{display:none}
html.dl-locked body{overflow:hidden}
.dl-lock__clock{display:flex;flex-direction:column;align-items:center}
.dl-lock__clock b{font-size:64px;font-weight:300;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1}
.dl-lock__clock span{color:var(--dl-on-dark-muted);text-transform:capitalize;margin-top:6px}
.dl-lock__card{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--dl-surface);color:var(--dl-ink);border-radius:var(--dl-radius-xl);padding:26px 24px;box-shadow:var(--dl-shadow-modal)}
.dl-lock__av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;background:var(--dl-accent-soft);color:var(--dl-accent);overflow:hidden;box-shadow:0 0 0 4px var(--dl-surface),0 0 0 6px var(--dl-accent-ring)}
.dl-lock__av img{width:100%;height:100%;object-fit:cover}
.dl-lock__name{font-size:calc(18px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-lock__sub{color:var(--dl-muted);margin-bottom:6px;text-align:center}
.dl-lock__card .dl-field{width:100%}
.dl-lock__out{margin-top:4px}

/* ================= PERMISSION MATRIX ================= */
.dl-perm{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-perm__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--dl-border)}
.dl-perm__lbl{display:flex;align-items:center;gap:6px;font-weight:600;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-f-label)}
.dl-perm select{border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:5px 8px;font-family:inherit;background:var(--dl-surface);color:var(--dl-f-ink)}
.dl-perm__scroll{max-height:460px;overflow:auto}
.dl-perm__table{width:100%;border-collapse:collapse;font-size:calc(13px * var(--dl-font-scale))}
.dl-perm__table th{position:sticky;top:0;background:var(--dl-surface-alt);text-align:left;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.03em;padding:9px 12px;border-bottom:1px solid var(--dl-border)}
.dl-perm__table td{padding:7px 12px;border-bottom:1px solid var(--dl-border-soft);color:var(--dl-ink-strong)}
.dl-perm__table tr.is-dirty td{background:color-mix(in srgb,var(--dl-amber) 9%,var(--dl-surface))}
.dl-perm__table tr.is-dirty td:first-child{box-shadow:inset 3px 0 0 var(--dl-amber)}
.dl-perm__table td select{width:200px}
.dl-perm__table select.is-l0{color:var(--dl-muted)}
.dl-perm__table select.is-l4{color:var(--dl-green);font-weight:700}
.dl-perm__pill{display:inline-block;font-size:calc(11px * var(--dl-font-scale));font-weight:700;padding:2px 9px;border-radius:12px;background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-perm__pill.is-grid{background:var(--dl-violet-soft);color:var(--dl-violet-ink)}
.dl-perm__none{text-align:center;color:var(--dl-muted);padding:16px!important}
.dl-perm__foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--dl-border);font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-perm.is-dirty [data-pm-dirty]{color:var(--dl-amber-2);font-weight:700}
.dl-sec{display:flex;flex-direction:column;gap:14px}
.dl-sec h2{margin:0;font-size:calc(20px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-sec p.dl-sec__desc{margin:-8px 0 0;color:var(--dl-muted)}


/* ================= FLOW (diagram alur antar modul) ================= */
.dl-flow{display:flex;flex-direction:column;gap:10px}
.dl-flow__title{font-weight:800;color:var(--dl-ink-strong);font-size:calc(15px * var(--dl-font-scale))}
.dl-flow__track{display:flex;flex-wrap:wrap;gap:26px 34px;list-style:none;margin:0;padding:4px 0}
.dl-flow__item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:190px;max-width:240px;flex:1 1 190px}
.dl-flow__item:not(:last-child)::after{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:-24px;top:28px;color:var(--dl-muted);font-size:14px}
.dl-flow.is-vertical .dl-flow__track{flex-direction:column;gap:22px}
.dl-flow.is-vertical .dl-flow__item{max-width:420px}
.dl-flow.is-vertical .dl-flow__item:not(:last-child)::after{content:'\f078';right:auto;left:26px;top:auto;bottom:-20px}
.dl-flow__step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'no no' 'ico txt' 'bdg bdg';gap:6px 10px;padding:10px 12px;border:1px solid var(--dl-border);border-left:4px solid var(--dl-disabled);border-radius:var(--dl-radius-lg);background:var(--dl-surface);color:var(--dl-ink);text-decoration:none;box-shadow:0 1px 2px var(--dl-overlay-soft);transition:transform .12s,box-shadow .12s}
.dl-flow__step:hover{transform:translateY(-2px);box-shadow:var(--dl-shadow-pop)}
.dl-flow__step.is-done{border-left-color:var(--dl-green)}.dl-flow__step.is-review{border-left-color:var(--dl-accent)}.dl-flow__step.is-locked{border-left-color:var(--dl-amber)}
.dl-flow__no{grid-area:no;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;color:var(--dl-muted);letter-spacing:.05em}
.dl-flow__ico{grid-area:ico;width:36px;height:36px;border-radius:var(--dl-radius);display:grid;place-items:center;background:var(--dl-accent-soft);color:var(--dl-accent);font-size:16px}
.dl-flow__txt{grid-area:txt;display:flex;flex-direction:column;min-width:0}
.dl-flow__txt b{color:var(--dl-ink-strong);line-height:1.25}
.dl-flow__txt small{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-flow__step > .dl-badge{grid-area:bdg;justify-self:start}
.dl-flow__branch{list-style:none;margin:0;padding:0 0 0 14px;display:flex;flex-direction:column;gap:4px;border-left:2px dashed var(--dl-border)}
.dl-flow__sub{display:flex;gap:6px;align-items:center;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink);text-decoration:none;padding:3px 6px;border-radius:var(--dl-radius-sm)}
.dl-flow__sub:hover{background:var(--dl-hover)}
.dl-flow__sub i{color:var(--dl-muted);width:14px;text-align:center}
.dl-flow__legend{display:flex;gap:6px;flex-wrap:wrap}
/* ============ LAYER MENU (panel kiri berlapis, x-dl::layer-menu) ============ */
.dl-lm{position:relative;display:flex;flex-direction:column;width:var(--dl-side-w);flex:none;min-height:0;background:var(--dl-side);color:var(--dl-side-ink);border-radius:var(--dl-radius-lg);overflow:hidden;font-size:calc(13.5px * var(--dl-font-scale))}
.dl-lm{--dl-lm-mini:56px}
.dl-lm__head{display:flex;align-items:center;gap:10px;padding:12px 12px 8px 14px}
.dl-lm__head[data-lm-home]{cursor:pointer}
.dl-lm__head[data-lm-home]:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-lm__bar{display:flex;align-items:center;gap:4px;padding:0 10px 10px 14px;border-bottom:1px solid var(--dl-side-hover)}
.dl-lm__gap{flex:1}
.dl-lm__brand{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.25}
.dl-lm__brand .dl-lm__tag{font-size:calc(10px * var(--dl-font-scale));letter-spacing:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-lm__brand b{color:var(--dl-side-hot,var(--dl-white));font-size:calc(15px * var(--dl-font-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-lm__brand small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-side-muted)}
.dl-lm__brand small[hidden]{display:none}
.dl-lm__ib{position:relative;width:30px;height:30px;flex:none;display:grid;place-items:center;border:none;background:none;border-radius:var(--dl-radius-sm);color:var(--dl-side-muted);cursor:pointer;font-size:calc(14px * var(--dl-font-scale))}
.dl-lm__ib:hover{background:var(--dl-side-hover);color:var(--dl-side-hot,var(--dl-white))}
.dl-lm__ib[hidden]{display:none}
.dl-lm__views{display:flex;gap:2px;padding:2px;border-radius:var(--dl-radius);background:var(--dl-side-hover);flex:none}
.dl-lm__views[hidden]{display:none}
.dl-lm__views button{width:26px;height:24px;display:grid;place-items:center;border:none;background:none;border-radius:var(--dl-radius-sm);color:var(--dl-side-muted);cursor:pointer;font-size:calc(12.5px * var(--dl-font-scale));padding:0}
.dl-lm__views button:hover{color:var(--dl-side-hot,var(--dl-white))}
.dl-lm__views button.is-on{background:var(--dl-accent);color:var(--dl-white)}
.dl-lm__views button:focus-visible{outline:2px solid var(--dl-accent);outline-offset:1px}
.dl-lm__dot-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--dl-badge);color:var(--dl-white);font-style:normal;font-size:calc(10px * var(--dl-font-scale));font-weight:800;display:grid;place-items:center}
.dl-lm__dot-badge[hidden],.dl-lm__badge[hidden]{display:none}
.dl-lm__modes{flex:1;min-height:0;position:relative;overflow:hidden}
.dl-lm__vp{height:100%;overflow:hidden}
.dl-lm__track{display:flex;height:100%;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.dl-lm__track.no-anim{transition:none}
.dl-lm__pane{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;padding:8px;box-sizing:border-box}
.dl-lm__pane:has(> .dl-lm__pin){display:flex;flex-direction:column}
.dl-lm__pin{margin-top:auto;padding-top:8px;border-top:1px solid var(--dl-side-2)}
.dl-lm__pane::-webkit-scrollbar{width:8px}.dl-lm__pane::-webkit-scrollbar-thumb{background:var(--dl-side-scroll);border-radius:8px}
.dl-lm__a + .dl-lm__cap,.dl-lm__grp + .dl-lm__cap{margin-top:18px}
.dl-lm__cap{padding:12px 10px 4px;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dl-side-muted)}
.dl-lm__a,.dl-lm__back{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:none;border-radius:var(--dl-radius);color:var(--dl-side-ink);text-decoration:none;font-family:inherit;font-size:inherit;cursor:pointer;text-align:left;min-width:0;transition:background .12s,color .12s}
.dl-lm__a:hover,.dl-lm__back:hover{background:var(--dl-side-hover);color:var(--dl-side-hot,var(--dl-white))}
.dl-lm__a:focus-visible,.dl-lm__back:focus-visible,.dl-lm__ib:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-lm__a.is-active{background:var(--dl-accent);color:var(--dl-white)}
.dl-lm__back{color:var(--dl-side-muted)}
.dl-lm__ico{width:18px;text-align:center;flex:none;color:var(--dl-side-muted)}
.dl-lm__a:hover .dl-lm__ico,.dl-lm__a.is-active .dl-lm__ico{color:inherit}
.dl-lm__t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-lm__n{font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;padding:1px 7px;border-radius:9px;background:var(--dl-side-hover);color:var(--dl-side-ink)}
.dl-lm__chev{font-size:.72em;color:var(--dl-side-muted)}
.dl-lm__badge{font-style:normal;font-size:calc(10.5px * var(--dl-font-scale));font-weight:800;padding:1px 7px;border-radius:9px;background:var(--dl-accent);color:var(--dl-white)}
.dl-lm__badge--icon{background:none!important;padding:0;font-size:calc(15px * var(--dl-font-scale))}
.dl-lm__badge--icon.is-success{color:var(--dl-green)}.dl-lm__badge--icon.is-warn{color:var(--dl-amber-2)}.dl-lm__badge--icon.is-danger{color:var(--dl-danger)}
.dl-lm__badge.is-danger{background:var(--dl-danger)}.dl-lm__badge.is-warn{background:var(--dl-amber-2)}.dl-lm__badge.is-success{background:var(--dl-green)}
.dl-lm__title{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--dl-side-hover);color:var(--dl-side-hot,var(--dl-white));font-size:calc(15px * var(--dl-font-scale))}
.dl-lm__title i{color:var(--dl-accent);font-size:1.1em}
.dl-lm__title b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-lm__sep{height:1px;background:var(--dl-border);margin:4px 2px}
/* Chat & Profile naik dari bawah menutupi menu (lebar panel tetap); isinya permukaan terang seperti layar. */
.dl-lm__ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:var(--dl-surface);color:var(--dl-ink);transform:translateY(100%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
.dl-lm__ov.is-on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
.dl-lm__ov .dl-lm__pane::-webkit-scrollbar-thumb{background:var(--dl-border)}
.dl-lm__ov .dl-lm__a,.dl-lm__ov .dl-lm__back{color:var(--dl-ink)}
.dl-lm__ov .dl-lm__a:hover,.dl-lm__ov .dl-lm__back:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-lm__ov .dl-lm__ico,.dl-lm__ov .dl-lm__back,.dl-lm__ov .dl-lm__chev{color:var(--dl-muted)}
.dl-lm__ov .dl-lm__a.is-danger,.dl-lm__ov .dl-lm__a.is-danger .dl-lm__ico{color:var(--dl-danger)}
.dl-lm__ov .dl-lm__title{color:var(--dl-ink-strong);border-color:var(--dl-border)}
.dl-lm__ov .dl-lm__ib{color:var(--dl-muted)}.dl-lm__ov .dl-lm__ib:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-lm__ovbar{display:flex;justify-content:flex-end}
.dl-lm__me{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 10px 14px;margin-bottom:4px;border-bottom:1px solid var(--dl-border);text-align:center}
.dl-lm__me b{color:var(--dl-ink-strong);font-size:calc(15px * var(--dl-font-scale))}
.dl-lm__me small{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-lm__chathost{flex:1;min-height:0;display:flex}
.dl-lm__chathost .dl-wa,.dl-lm-dock .dl-wa{flex:1;height:auto;min-height:0;border:none;border-radius:0}
/* Menu roda gigi: naik dari bawah, tepat di atas baris pengguna. */
.dl-lm__foot{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-top:1px solid var(--dl-side-hover);position:relative;z-index:3;background:var(--dl-side)}
.dl-lm__avatar{position:relative;width:30px;height:30px;border-radius:50%;background:var(--dl-accent);color:var(--dl-white);display:grid;place-items:center;font-size:calc(11px * var(--dl-font-scale));font-weight:700;flex:none}
.dl-lm__avatar.is-lg{width:56px;height:56px;font-size:calc(18px * var(--dl-font-scale))}
.dl-lm__plist{display:flex;flex-direction:column;margin:0 0 12px}
.dl-lm__userbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.dl-lm__userbtn:hover .dl-lm__user b,.dl-lm__userbtn[aria-expanded="true"] .dl-lm__user b{text-decoration:underline;text-underline-offset:3px}
.dl-lm__userbtn:focus-visible{outline:2px solid var(--dl-accent,#60a5fa);outline-offset:2px}
.dl-lm__user{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dl-lm__user b{color:var(--dl-side-hot,var(--dl-white));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* versi di judul logo (x-dl::env-badge part=version); envbadge.css memuat aturan yang sama untuk halaman login tanpa devlib.css */
.dl-envbadge--version{display:inline;font-size:.75em;font-weight:500;color:inherit;white-space:nowrap;opacity:.65;margin-left:.4em}
.dl-envbadge--loginver{display:block;text-align:center;margin:8px 0 0;font-size:calc(11px * var(--dl-font-scale,1));font-weight:500;color:inherit;opacity:.65}
.dl-envbadge__stage{margin-left:.2em;font-weight:700}
.dl-netline{display:block;min-width:0;font-size:calc(10px * var(--dl-font-scale));line-height:1.3;color:var(--dl-side-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.dl-netline__row{display:block;overflow:hidden;text-overflow:ellipsis;opacity:.65}
.dl-netline__st{display:none;font-weight:600}
.dl-netline[data-state="server"] .dl-netline__row,.dl-netline[data-state="offline"] .dl-netline__row{opacity:1}
.dl-netline[data-state="server"] [data-nl="server"]{color:var(--dl-net-bad);font-weight:700;animation:dl-netline-blink 1s steps(1) infinite}
.dl-netline[data-state="offline"] [data-nl="client"]{color:var(--dl-net-warn);font-weight:700;animation:dl-netline-blink 1s steps(1) infinite}
.dl-netline[data-state="server"] .dl-netline__st{display:block;color:var(--dl-net-bad)}
.dl-netline[data-state="offline"] .dl-netline__st{display:block;color:var(--dl-net-warn)}
@keyframes dl-netline-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dl-netline [data-nl]{animation:none!important}}
.dl-lm__user small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-side-muted)}
[data-lm-pdet] > [data-lm-page]{padding:4px 6px}
/* Dok kanan: wadah di layout (prop dock) atau laci tetap di tepi kanan layar. Lebarnya beranimasi. */
.dl-lm-dock{width:0;flex:none;overflow:hidden;display:flex;flex-direction:column;background:var(--dl-surface);border-radius:var(--dl-radius-lg);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.dl-lm-dock.is-on{width:var(--dl-lm-dock-w,320px);border:1px solid var(--dl-border)}
.dl-lm-dock > *{width:var(--dl-lm-dock-w,320px);box-sizing:border-box}
.dl-lm-dock > .dl-wa{flex:1}
.dl-lm-dock__bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--dl-border);color:var(--dl-ink-strong);flex:none}
.dl-lm-dock__bar > i{color:var(--dl-accent)}
.dl-lm-dock__bar b{flex:1}
.dl-lm-dock__bar .dl-lm__ib{color:var(--dl-muted)}.dl-lm-dock__bar .dl-lm__ib:hover{background:var(--dl-hover);color:var(--dl-ink-strong)}
.dl-lm-dock.is-fixed{position:fixed;top:0;right:0;bottom:0;z-index:40;border-radius:0;box-shadow:var(--dl-shadow-pop)}
@media (prefers-reduced-motion:reduce){.dl-lm__track,.dl-lm__ov,.dl-lm-dock{transition:none}}
.dl-lm-demo{display:flex;gap:12px;height:600px;align-items:stretch}
.dl-lm-dock [data-lm-chatx]{display:none}
/* Mini (ikon kecilkan menu): panel = satu lajur ikon. is-peek = menu lengkap melayang di atas layar, layar tidak bergeser. */
.dl-lm.is-mini{width:var(--dl-lm-mini)}
.dl-lm.is-mini.is-peek{position:absolute;left:0;top:0;bottom:0;height:auto;width:var(--dl-side-w);z-index:60;box-shadow:var(--dl-shadow-pop)}
.dl-lm.is-mini.is-peek + *{margin-left:var(--dl-lm-mini)}
.dl-lm-demo{position:relative}
.dl-lm-demo > .dl-lm.is-mini.is-peek + *{margin-left:calc(var(--dl-lm-mini) + 12px)}
.dl-lm.is-mini:not(.is-peek) :is(.dl-lm__brand,.dl-lm__gap,.dl-lm__t,.dl-lm__badge,.dl-lm__n,.dl-lm__chev,.dl-lm__title b,.dl-lm__back span,.dl-lm__user,[data-lm-swap],[data-lm-dockbtn]){display:none}
.dl-lm.is-mini:not(.is-peek) .dl-lm__head{justify-content:center;padding:12px 0 6px}
.dl-lm.is-mini:not(.is-peek) .dl-lm__bar{flex-direction:column-reverse;padding:0 0 8px}
.dl-lm.is-mini:not(.is-peek) .dl-lm__views{flex-direction:column;margin-top:4px}
.dl-lm.is-mini:not(.is-peek) .dl-lm__pane{padding:8px 6px}
.dl-lm.is-mini:not(.is-peek) :is(.dl-lm__a,.dl-lm__back,.dl-lm__title){justify-content:center;padding:10px 0}
.dl-lm.is-mini:not(.is-peek) .dl-lm__title{padding:6px 0 10px}
/* foldGroups: judul = tombol lipat (accordion); anak menu menggulung ke atas di belakang judul (grid 1fr -> 0fr). Mini: selalu terbuka. */
.dl-lm__cap--fold{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0 2px;padding:9px 10px;border:none;border-radius:var(--dl-radius);background:var(--dl-side-2);font-family:inherit;text-align:left;cursor:pointer;color:var(--dl-side-ink);transition:background .15s,color .15s}
.dl-lm__cap--fold > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-lm__cap--fold:hover{background:var(--dl-side-hover);color:var(--dl-side-hot,var(--dl-white))}
.dl-lm__cap--fold[aria-expanded=true]{background:var(--dl-side-hover);color:var(--dl-side-hot,var(--dl-white));box-shadow:inset 3px 0 0 var(--dl-accent)}
.dl-lm__cap--fold:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-2px}
.dl-lm__cap-n{font-style:normal;font-size:calc(10px * var(--dl-font-scale));font-weight:700;letter-spacing:0;padding:1px 7px;border-radius:9px;background:var(--dl-side);color:var(--dl-side-muted)}
.dl-lm__cap--fold i{font-size:.9em;transition:transform .2s}
.dl-lm__cap--fold[aria-expanded=false] i{transform:rotate(-90deg)}
.dl-lm__grp{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
.dl-lm__grp > div{min-height:0;overflow:hidden;margin:2px 0 0 10px;border-left:2px solid var(--dl-side-hover)}
.dl-lm__grp.is-folded{grid-template-rows:0fr}
.dl-lm__grp.is-folded > div{margin-top:0;border-left-color:transparent}
.dl-lm.is-mini:not(.is-peek) .dl-lm__grp.is-folded{grid-template-rows:1fr}
.dl-lm.is-mini:not(.is-peek) .dl-lm__cap--fold i,.dl-lm.is-mini:not(.is-peek) .dl-lm__cap-n{display:none}
@media (prefers-reduced-motion:reduce){.dl-lm__grp,.dl-lm__cap--fold i,.dl-lm__cap--fold{transition:none}}
.dl-lm.is-mini:not(.is-peek) .dl-lm__cap{height:1px;padding:0;margin:6px 10px;font-size:0;background:var(--dl-side-hover)}
.dl-lm.is-mini:not(.is-peek) .dl-lm__pane > .dl-lm__cap:first-child{display:none}
.dl-lm.is-mini:not(.is-peek) .dl-lm__foot{justify-content:center;padding:10px 0;cursor:pointer}
.dl-shell--layer{position:relative}
.dl-shell__lm{border-radius:0;height:100%}
.dl-shell__dock{border-radius:0}
.dl-shell__dock.is-on{border:none;border-left:1px solid var(--dl-border)}
/* Prose: dokumen pedoman (Markdown -> HTML), mis. v2/pedoman/*. */
.dl-prose{max-width:960px;margin:0 auto;padding:18px 24px 60px;font-family:var(--dl-font);color:var(--dl-ink);font-size:calc(13.5px * var(--dl-font-scale));line-height:1.65}
.dl-prose h1{font-size:1.55em;color:var(--dl-ink-strong);margin:.2em 0 .6em}
.dl-prose h2{font-size:1.2em;color:var(--dl-ink-strong);margin:1.6em 0 .5em;padding-bottom:.3em;border-bottom:1px solid var(--dl-border)}
.dl-prose blockquote{margin:0 0 1em;padding:10px 14px;background:var(--dl-accent-soft);border-left:3px solid var(--dl-accent);border-radius:var(--dl-radius-sm)}
.dl-prose blockquote p{margin:0}
.dl-prose ul,.dl-prose ol{padding-left:1.4em}
.dl-prose li{margin:.25em 0}
.dl-prose code{background:var(--dl-chip);padding:1px 5px;border-radius:4px;font-size:.92em}
.dl-prose pre{background:var(--dl-surface-alt);border:1px solid var(--dl-border);border-radius:var(--dl-radius);padding:12px 14px;overflow-x:auto;line-height:1.45}
.dl-prose pre code{background:none;padding:0}
.dl-prose table{border-collapse:collapse;margin:1em 0}
.dl-prose th,.dl-prose td{border:1px solid var(--dl-border);padding:6px 10px;text-align:left}

/* ===== Technical Guide (halaman devlib.guide) + link judul ke guide (guide-link.js) ===== */
.dl-guide{display:grid;grid-template-columns:300px minmax(0,1fr)}
.dl-guide__nav{height:100vh;overflow:auto;padding:14px 16px;border-right:1px solid var(--dl-border);background:var(--dl-surface)}
.dl-guide__nav h1{font-size:1.1em;margin:0 0 10px;color:var(--dl-ink-strong)}
.dl-guide__find{width:100%;box-sizing:border-box;padding:6px 10px;margin-bottom:10px;border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-ink)}
.dl-guide__nav summary{cursor:pointer;font-weight:600;margin:8px 0 4px}
.dl-guide__nav summary small{color:var(--dl-muted);font-weight:400}
.dl-guide__nav ul{list-style:none;margin:0;padding:0}
.dl-guide__nav li a{display:flex;justify-content:space-between;gap:6px;padding:2px 6px;border-radius:5px;color:var(--dl-ink);text-decoration:none;font-size:.9em}
.dl-guide__nav li a:hover{background:var(--dl-hover)}
.dl-guide__nav li i{color:var(--dl-muted);font-size:.8em;align-self:center}
.dl-guide__main{height:100vh;overflow:auto;padding:0 24px 80px;scroll-behavior:smooth}
.dl-guide__intro{max-width:960px;margin:0 auto;padding:20px 24px 0}
.dl-guide__intro h1{font-size:1.5em;color:var(--dl-ink-strong);margin:0 0 .4em}
.dl-guide__family{max-width:960px;margin:2em auto .2em;padding:0 24px;font-size:1.25em;color:var(--dl-ink-strong)}
.dl-guide__obj{border-bottom:1px solid var(--dl-border);scroll-margin-top:12px}
.dl-guide__obj h3{font-size:1.1em;margin:0 0 .3em;color:var(--dl-ink-strong)}
.dl-guide__obj h4{font-size:1em;margin:1.3em 0 .4em;color:var(--dl-ink-strong)}
.dl-guide__obj:target{background:var(--dl-accent-soft)}
.dl-guide__purpose{margin:.2em 0 .8em}
.dl-guide__meta{display:grid;grid-template-columns:max-content 1fr;gap:2px 14px;margin:0 0 .6em;color:var(--dl-muted);font-size:.92em}
.dl-guide__meta dt{font-weight:600}.dl-guide__meta dd{margin:0;word-break:break-word}
.dl-guide__pending{color:var(--dl-muted)}
.dl-guide-link{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.dl-guide-link:hover{border-bottom-color:currentColor;color:var(--dl-accent)}
.dl-guide-link--icon{margin-right:8px;color:var(--dl-muted);border-bottom:0}
@media print{.dl-guide-link--icon{display:none}}
@media (max-width:800px){.dl-guide{grid-template-columns:1fr}.dl-guide__nav{height:auto;max-height:40vh}.dl-guide__main{height:auto}}

/* ===== DocShare (x-dl::doc-share): Print ▾ + Email ===== */
.dl-docshare{display:inline-flex;gap:8px;align-items:center;position:relative}
.dl-docshare__menu{position:relative;display:inline-flex}
.dl-docshare__caret{margin-left:6px;font-size:.8em;opacity:.7}
.dl-docshare__list{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:60;min-width:230px;padding:6px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.16)}
.dl-docshare.is-open .dl-docshare__list{display:block}
.dl-docshare__list button{display:grid;grid-template-columns:22px 1fr;column-gap:8px;width:100%;padding:8px 10px;border:0;background:none;border-radius:7px;color:var(--dl-ink);text-align:left;cursor:pointer;font:inherit}
.dl-docshare__list button:hover{background:var(--dl-hover)}
.dl-docshare__list button:disabled{opacity:.45;cursor:not-allowed;background:none}
.dl-docshare__list button i{grid-row:span 2;align-self:center;color:var(--dl-accent)}
.dl-docshare__list small{grid-column:2;color:var(--dl-muted);font-size:.78em}
.dl-docshare.is-busy{opacity:.6;cursor:progress}
.dl-docshare__online{display:grid;gap:12px;justify-items:center}
.dl-docshare__online .dl-field{width:100%}
.dl-docshare__qr img{width:180px;height:180px;display:block}
.dl-docshare__mailform{display:grid;gap:10px}
.dl-docshare__contacts{display:grid;gap:6px;padding:10px;border:1px dashed var(--dl-border);border-radius:10px}
.dl-docshare__contacthint{color:var(--dl-muted);font-size:.8em}
.dl-docshare__contactlist{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto}
.dl-docshare__contact{display:grid;padding:5px 10px;border:1px solid var(--dl-border);border-radius:8px;background:var(--dl-surface);color:var(--dl-ink);text-align:left;cursor:pointer;font:inherit;line-height:1.25}
.dl-docshare__contact:hover{background:var(--dl-hover)}
.dl-docshare__contact b{font-size:.9em}
.dl-docshare__contact small{color:var(--dl-muted);font-size:.78em}
.dl-docshare__contact.is-on{border-color:var(--dl-accent);box-shadow:inset 0 0 0 1px var(--dl-accent)}
.dl-docshare__contact.is-on b::before{content:"\2713\00a0";color:var(--dl-accent)}
.dl-docshare__nocontact{color:var(--dl-muted);font-size:.85em}
.dl-docshare__lang{display:flex;align-items:center;gap:4px;padding:4px 6px 8px;margin-bottom:4px;border-bottom:1px solid var(--dl-border);font-size:.82em;color:var(--dl-muted)}
.dl-docshare__lang>span{flex:1}
.dl-docshare__list .dl-docshare__lang button,.dl-docshare__lang button{display:inline-block;width:auto;padding:3px 9px;border:1px solid var(--dl-border);border-radius:6px;background:var(--dl-surface);color:var(--dl-ink);font:inherit;font-weight:600;cursor:pointer}
.dl-docshare__lang button.is-on{background:var(--dl-accent);border-color:var(--dl-accent);color:#fff}
.dl-docshare__stage{position:absolute;left:-20000px;top:0;background:#fff;padding:18px;box-sizing:border-box}
.dl-docshare__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid #1f2937;color:#111827}
.dl-docshare__head b{display:block;font-size:18px}.dl-docshare__head small{color:var(--dl-muted)}
.dl-docshare__head figure{margin:0;text-align:center}.dl-docshare__head figure img{width:96px;height:96px}
.dl-docshare__head figcaption{font-size:9px;color:var(--dl-muted);max-width:180px;word-break:break-all}
/* Halaman dokumen online /d/{token} */
.dl-share-page{background:#eef1f5;margin:0;padding:16px}
.dl-share-page__head{max-width:1100px;margin:0 auto 12px;display:flex;gap:16px;align-items:center;background:#fff;border-radius:10px;padding:12px 16px}
.dl-share-page__head>div:first-child{flex:1;display:grid;gap:2px}.dl-share-page__head small,.dl-share-page__head span{color:var(--dl-muted);font-size:12px}
.dl-share-page__qr img{width:84px;height:84px}
.dl-share-page__doc{max-width:1100px;margin:0 auto;background:#fff;border-radius:10px;padding:16px;overflow-x:auto}
@media print{.dl-share-page{background:#fff;padding:0}.dl-share-page__head button{display:none}.dl-share-page__doc{padding:0;max-width:none}}
@media (max-width:640px){.dl-share-page{padding:8px}.dl-share-page__head{flex-wrap:wrap}}

/* Split: isi utama + panel samping (x-dl::split) */
.dl-split{display:grid;grid-template-columns:minmax(0,1fr) var(--dl-aside,320px);gap:12px;align-items:start}
.dl-split--left{grid-template-columns:var(--dl-aside,320px) minmax(0,1fr)}.dl-split--left .dl-split__aside{order:-1}
.dl-split__main,.dl-split__aside{min-width:0;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.dl-split{grid-template-columns:1fr}}
/* PickMatrix: pilih pemenang per baris (mis. bandingkan penawaran supplier) */
.dl-pick__table th small,.dl-pick__table td small{display:block;font-size:calc(10.5px * var(--dl-font-scale));color:var(--dl-muted);font-weight:400;text-transform:none;letter-spacing:0}
.dl-pick__cell{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-variant-numeric:tabular-nums}
.dl-pick__table td.is-best{background:var(--dl-accent-soft)!important}
.dl-pick__table tr.is-locked td{color:var(--dl-muted)}
.dl-pick__lock{color:var(--dl-green)!important}
.dl-pick__warn{color:var(--dl-amber)!important}
.dl-pick__none{color:var(--dl-muted)}
.dl-pick__sum{margin-top:10px;padding:8px 12px;border-radius:var(--dl-radius);background:var(--dl-accent-soft);color:var(--dl-ink-strong);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-pick__empty{padding:20px;text-align:center;color:var(--dl-muted);border:1px dashed var(--dl-border);border-radius:var(--dl-radius)}
/* YearCalendar (x-dl::year-calendar): 12 bulan, tanggal bertanda diwarnai per tone, hari non-kerja bertulisan merah */
.dl-ycal{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface);padding:14px}
.dl-ycal__legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-ycal__sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.dl-ycal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.dl-ycal__mh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.dl-ycal__mh b{font-size:calc(13.5px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-ycal__n{font-size:calc(11px * var(--dl-font-scale));padding:0 7px;border-radius:999px;background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-ycal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.dl-ycal__h{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);padding-bottom:2px}
.dl-ycal__d{display:block;padding:5px 0;border-radius:var(--dl-radius-sm);font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink);text-decoration:none}
a.dl-ycal__d:hover{background:var(--dl-hover);outline:1px solid var(--dl-accent)}
.dl-ycal__h.is-off,.dl-ycal__d.is-off{color:var(--dl-danger)}
.dl-ycal__d.is-today{outline:2px solid var(--dl-accent);font-weight:600}
.dl-ycal__d--danger{background:var(--dl-danger);color:var(--dl-white)!important}
.dl-ycal__d--warn{background:color-mix(in srgb,var(--dl-amber) 30%,var(--dl-surface));color:color-mix(in srgb,var(--dl-amber) 70%,var(--dl-ink-strong))!important}
.dl-ycal__d--info{background:var(--dl-accent-soft);color:var(--dl-accent)!important}
.dl-ycal__d--success{background:color-mix(in srgb,var(--dl-success) 18%,var(--dl-surface));color:var(--dl-success)!important}
.dl-ycal__d--neutral{background:var(--dl-surface-alt);color:var(--dl-muted)!important}
.dl-ycal__d--off{background:transparent;color:var(--dl-danger)!important;border:1px solid var(--dl-danger-line)}

/* ---- x-dl::code-chain: dropdown saling terkait yang menyusun kode (Material Category -> kode item). Tiap kolom = satu tingkat:
   dropdown, potongan kode (prefix) tingkat itu, tombol Add; baris bawah = kode jadi. */
.dl-chain{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface);padding:14px}
.dl-chain__cols{display:grid;grid-template-columns:repeat(var(--dl-chain-n,5),minmax(0,1fr));gap:10px}
.dl-chain__col{display:flex;flex-direction:column;gap:6px;min-width:0}
.dl-chain__seg{min-height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface-alt);font-family:var(--dl-font-mono);font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink-strong);letter-spacing:.5px}
.dl-chain__add{justify-content:center;text-decoration:none}
.dl-chain__add.is-disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
.dl-chain__code{display:flex;align-items:baseline;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dl-border)}
.dl-chain__codelabel{font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-f-label)}
.dl-chain__code b{font-family:var(--dl-font-mono);font-size:calc(22px * var(--dl-font-scale));font-weight:600;letter-spacing:1px;color:var(--dl-ink-strong)}
.dl-chain__code small{margin-left:auto;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
@media (max-width:900px){.dl-chain__cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* ---- x-dl::print-doc: cetakan dokumen transaksi (Devlib\PrintDoc\Document). A5 landscape (1-5 baris) / A4 portrait.
   Lebar keduanya 210 mm, jadi tata letak identik; semua blok punya posisi dan tinggi tetap. Kertas selalu terang:
   warna di sini sengaja literal (tidak ikut tema layar). Huruf Tahoma regular; tebal hanya judul, nomor, pihak, total. */
.dl-pdoc{display:flex;flex-direction:column;align-items:center;gap:6mm;padding:6mm;background:#8d939c;border-radius:var(--dl-radius-lg);overflow-x:auto}
.dl-pdoc__sheet{width:210mm;flex:none;background:#fff;color:#111;display:flex;flex-direction:column;position:relative;overflow:hidden;box-sizing:border-box;
    box-shadow:0 1mm 4mm rgba(0,0,0,.35);font-family:Tahoma,Verdana,"Segoe UI",sans-serif;font-weight:400;font-size:10pt;line-height:1.2;text-align:left}
.dl-pdoc__sheet *{box-sizing:border-box;margin:0;padding:0}
.dl-pdoc__sheet.is-a5{height:148mm;padding:6mm 9mm 4mm}
.dl-pdoc__sheet.is-a4{height:297mm;padding:10mm 9mm 6mm}
/* 1. Kop: perusahaan kiri, judul tengah, QR kanan */
.dl-pdoc__kop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4mm;height:14.5mm;padding-bottom:1.5mm;border-bottom:.8mm solid #8c8c8c}
.dl-pdoc__co{display:flex;gap:2.5mm;align-items:center}
.dl-pdoc__logo{width:11mm;height:11mm;border-radius:1.6mm;background:#222;color:#fff;font-weight:700;font-size:10pt;display:flex;align-items:center;justify-content:center;flex:none}
.dl-pdoc__brand{display:block;height:5.6mm;width:auto;margin-bottom:.7mm}
.dl-pdoc__co b{display:block;font-size:10.5pt;font-weight:700;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.dl-pdoc__co small{display:block;font-size:6.6pt;color:#333;white-space:nowrap;line-height:1.2}
.dl-pdoc__co.is-side .dl-pdoc__brand{height:auto;max-height:var(--co-logo-h);max-width:var(--co-logo-w);margin:0;flex:none}
.dl-pdoc__co small.dl-pdoc__legal{font-weight:700}
/* Kop bergaya: ukuran ikut kertas lewat variabel. Bawaan = A4 (juga lembar print-sheet); A5 rapat. Rasio nama : baris lain = 1,6 di keduanya.
   Kelebihan baris dipotong (titik-titik), tidak menimpa judul atau garis kop. Kop tanpa style tidak memakai variabel ini. */
.dl-pdoc__co.is-styled{--co-name:12pt;--co-sub:7.5pt;--co-lh:1.05;--co-logo-h:16mm;--co-logo-w:26mm;--co-badge:14mm;--co-max:18.5mm;gap:3.5mm;max-height:var(--co-max);overflow:hidden;min-width:0}
.is-a5 .dl-pdoc__co.is-styled{--co-name:10pt;--co-sub:6pt;--co-logo-h:12mm;--co-logo-w:18mm;--co-badge:11mm;--co-max:13.4mm;gap:2.5mm}
.dl-pdoc__co.is-styled b{font-size:var(--co-name);line-height:1.1}
.dl-pdoc__co.is-styled small{font-size:var(--co-sub);line-height:var(--co-lh)}
.dl-pdoc__co.is-styled .dl-pdoc__logo{width:var(--co-badge);height:var(--co-badge)}
.dl-pdoc__co.is-styled > div{min-width:0}
.dl-pdoc__co.is-styled b,.dl-pdoc__co.is-styled small{overflow:hidden;text-overflow:ellipsis}
/* A4 + kop bergaya: kop 20 mm (+5,5) dibayar 2 mm dari margin atas, jadi lembar tumbuh 3,5 mm; sisa ruang A4 terkecil (infoRows 7, 22 baris) 5,3 mm */
.dl-pdoc__sheet.is-a4:has(.dl-pdoc__co.is-styled){padding-top:8mm}
.is-a4 .dl-pdoc__kop:has(.dl-pdoc__co.is-styled){height:20mm;grid-template-columns:minmax(0,1fr) auto auto} /* kolom perusahaan mengambil sisa lebar, QR sebesar isinya */
.dl-pdoc__kop h1{font-size:15pt;font-weight:700;letter-spacing:.06em;text-align:center;line-height:1;white-space:nowrap;text-transform:uppercase;color:#111}
.dl-pdoc__kop h1 small{display:block;font-size:7.5pt;font-weight:400;letter-spacing:.18em;color:#444;margin-top:1.2mm}
.dl-pdoc__kop h1.is-compact{font-size:12pt;letter-spacing:.04em}
.dl-pdoc__kopr{display:flex;justify-content:flex-end;align-items:center;gap:2mm}
.dl-pdoc__kopr small{font-size:7pt;color:#333;text-align:right;line-height:1.3}
.dl-pdoc__qr{width:12mm;height:12mm;flex:none;display:block;border:.2mm dashed #b5b5b5}
.dl-pdoc__qr.is-on{border:0}
.dl-pdoc__qr img,.dl-pdoc__qr canvas{width:100%!important;height:100%!important;display:block}
/* 2. Blok field: 2 kolom x N baris tetap. Kiri baris 1 = nomor dokumen; kanan baris 1 = tanggal + status. */
.dl-pdoc__info{display:grid;grid-template-columns:1fr 1.12fr;gap:0 8mm;padding:1.5mm 0 1.1mm;border-bottom:.3mm solid #9db7d6}
.dl-pdoc__info>div{display:grid;grid-template-rows:repeat(var(--pd-info-rows,6),4.6mm)}
.dl-pdoc__f{display:grid;grid-template-columns:29mm 3mm 1fr;align-items:center;min-width:0}
.dl-pdoc__f>span{font-size:9pt;color:#333;white-space:nowrap}
.dl-pdoc__f>i{font-style:normal;color:#333}
.dl-pdoc__f>b{font-weight:400;font-size:10pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pdoc__f>b strong{font-weight:700}
.dl-pdoc__f.is-addr>b{font-size:9pt}
.dl-pdoc__f.is-big>b{font-size:13pt;font-weight:700;letter-spacing:.02em}
.dl-pdoc__f.is-st{grid-template-columns:29mm 3mm 1fr auto}
.dl-pdoc__stamp{border:.3mm solid #222;padding:.3mm 2.2mm;font-weight:700;font-size:8.5pt!important;letter-spacing:.1em;color:#111!important;text-transform:uppercase}
.dl-pdoc__stamp:empty{display:none}
.dl-pdoc__wm{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:92pt;font-weight:800;font-style:italic;letter-spacing:.18em;text-transform:uppercase;color:#000;opacity:.09;transform:rotate(-28deg);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dl-pdoc__sheet.is-a5 .dl-pdoc__wm{font-size:68pt}
.dl-pdoc__wm.is-long{font-size:50pt;white-space:nowrap}
.dl-pdoc__sheet.is-a5 .dl-pdoc__wm.is-long{font-size:38pt}
.dl-pdoc__hand{display:block;border-bottom:.15mm dotted #8a8a8a;height:3.4mm}
/* 3. NB / kalimat pembuka */
.dl-pdoc__nb{font-size:9pt;height:5.2mm;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
/* 4. Tabel: No | Nama | Qty | Unit selalu di posisi sama; zona varian di kanan (+ Harga, Subtotal untuk dokumen berharga). */
.dl-pdoc__items{width:100%;border-collapse:collapse;border-top:.5mm solid #222;border-bottom:.5mm solid #8c8c8c;table-layout:fixed}
.dl-pdoc__items th{background:#9a9a9a;color:#fff;font-weight:700;font-size:8pt;height:5mm;padding:0 1mm;text-align:left;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-transform:uppercase}
.dl-pdoc__items td{height:var(--pd-rh,7.6mm);padding:0 1mm;font-size:9.5pt;vertical-align:middle;white-space:nowrap;overflow:hidden}
.dl-pdoc__items tbody tr+tr td{border-top:.15mm dotted #c4c4c4}
.dl-pdoc__items td.is-no{text-align:right;font-size:7.5pt;color:#333}
.dl-pdoc__items .is-num{text-align:right}
.dl-pdoc__items td.is-hand{border-left:.15mm dotted #9a9a9a;border-right:.15mm dotted #9a9a9a}
.dl-pdoc__items td.is-name,.dl-pdoc__items td.is-wrap{white-space:normal}
.dl-pdoc__items td.is-wrap{font-size:8pt;line-height:1.1}
.dl-pdoc__w{max-height:7.2mm;line-height:1.05;overflow:hidden}
.dl-pdoc__n1{font-size:9pt;line-height:1.12;max-height:2.3em;overflow:hidden}
.is-two .dl-pdoc__n1{white-space:nowrap;max-height:1.15em}
.dl-pdoc__n2{font-size:8pt;line-height:1.15;color:#333;white-space:nowrap;overflow:hidden}
.dl-pdoc__n3{font-size:8pt;line-height:1.1;max-height:2.25em;overflow:hidden;margin-top:.3mm}
/* Baris hasil split (Customer Plan Delivery): garis tebal di kiri + tulisan SPLIT tebal */
.dl-pdoc__items tr.is-split td.is-no{border-left:1.1mm solid #222}
.dl-pdoc__items tr.is-split td[data-pd-c=part]{font-weight:700}
/* 5. Zona penutup: catatan kiri, kotak total kanan (tinggi tetap) */
.dl-pdoc__tail{display:grid;grid-template-columns:1fr 62mm;gap:6mm;height:var(--pd-tail,18.5mm);padding-top:1.2mm;overflow:hidden}
.dl-pdoc__notes{font-size:8.5pt;line-height:1.3;height:100%;overflow:hidden}
.dl-pdoc__notes b{font-weight:700}
.dl-pdoc__tot{font-size:9pt}
.dl-pdoc__tot div{display:flex;justify-content:space-between;height:3.7mm;align-items:center}
.dl-pdoc__tot b{font-weight:400}
.dl-pdoc__tot .is-grand{border-top:.3mm solid #222;margin-top:.4mm;height:4.4mm;font-weight:700;font-size:10pt}
.dl-pdoc__tot .is-grand b{font-weight:700}
.dl-pdoc__tot .is-grand span{text-transform:uppercase}
/* 6. Tanda tangan, dari kiri: pihak luar / penerima, Menyetujui, Mengetahui, Pembuat di paling kanan; dibagi rata */
.dl-pdoc__sign{display:grid;gap:3mm;margin-top:auto;text-align:center}
.dl-pdoc__sign span{display:block;font-size:9pt;letter-spacing:.06em;text-transform:uppercase}
.dl-pdoc__sign small{display:block;font-size:7.5pt;color:#444;height:3mm}
.dl-pdoc__sign>div>i{display:block;height:7mm}
.is-a4 .dl-pdoc__sign>div>i{height:14mm}
.dl-pdoc__sign b{display:block;font-weight:400;font-size:9pt;white-space:nowrap}
.dl-pdoc__sign u{display:inline-block;width:27mm;border-bottom:.2mm dotted #333;text-decoration:none;margin:0 .6mm}
.dl-pdoc__sign u.is-name{border-bottom-style:solid;width:auto;min-width:27mm;padding:0 1mm}
/* 7. Kaki */
.dl-pdoc__foot{display:flex;justify-content:space-between;margin-top:1.2mm;padding-top:.8mm;border-top:.15mm solid #bbb;font-size:7pt;color:#444}
.dl-pdoc__items+.dl-pdoc__foot{margin-top:auto}
/* Lembar lampiran: blok facts / table / list / text di bawah kop (Document::appendices). Hitam di atas putih, tanpa abu-abu. */
.dl-pdoc__appx-body{display:flex;flex-direction:column;gap:4mm;padding-top:4mm;flex:1;min-height:0;overflow:hidden}
.dl-pdoc__blk h5{font-size:8.5pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:.3mm solid #222;padding-bottom:.8mm;margin-bottom:1.4mm}
.dl-pdoc__kv{display:grid;grid-template-columns:42mm 1fr;gap:2mm;font-size:9pt;line-height:1.35;border-bottom:.15mm dotted #9a9a9a;padding:.6mm 0}
.dl-pdoc__kv b{font-weight:600}
.dl-pdoc__tbl{width:100%;border-collapse:collapse;font-size:9pt}
.dl-pdoc__tbl th{background:#222;color:#fff;font-size:8pt;font-weight:700;letter-spacing:.04em;text-align:left;padding:1.2mm 2mm;text-transform:uppercase}
.dl-pdoc__tbl td{padding:1mm 2mm;border-bottom:.15mm dotted #9a9a9a}
.dl-pdoc__tbl .is-num{text-align:right;font-variant-numeric:tabular-nums}
.dl-pdoc__ol{margin-left:5mm;font-size:9pt;line-height:1.45}
.dl-pdoc__ol li{padding-left:1mm}
.dl-pdoc__txt{font-size:9pt;line-height:1.45;white-space:pre-line}
.dl-pdoc__cap{font-size:8pt;line-height:1.4;margin-top:1.2mm}
.dl-pdoc__appx-body .dl-card,.dl-pdoc__appx-body .dl-box{break-inside:avoid}
.dl-pdoc__chk{font-size:9pt;line-height:1.5;margin:1mm 0}
.dl-pdoc__blk .dl-pdoc__sign{margin-top:4mm}
/* Cetak langsung dari browser (Ctrl+P) dan halaman dokumen online: lembar saja, tanpa latar abu-abu */
@media print{.dl-pdoc{background:none;padding:0;gap:0;border-radius:0;display:block}.dl-pdoc__sheet{box-shadow:none;break-after:page}}
.dl-share-page__doc .dl-pdoc{background:none;padding:0}

/* ---- Lembar cetak berbagian (x-dl::print-sheet): laporan cetak / formulir lapangan, A4 tumbuh ke bawah ---- */
.dl-psheet{display:flex;flex-direction:column;align-items:center;padding:6mm;background:#8d939c;border-radius:var(--dl-radius-lg);overflow-x:auto}
.dl-psheet__page{width:210mm;min-height:297mm;flex:none;background:#fff;color:#111;display:flex;flex-direction:column;padding:10mm 9mm 6mm;box-sizing:border-box}
.dl-psheet.is-landscape .dl-psheet__page{width:297mm;min-height:210mm}
.dl-psheet__page *{box-sizing:border-box}
.dl-psheet__kop{display:flex;justify-content:space-between;align-items:center;gap:6mm;padding-bottom:2mm;border-bottom:.8mm solid #8c8c8c}
.dl-psheet__title{text-align:right}
.dl-psheet__title h1{font-size:13pt;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;margin:0}
.dl-psheet__title b{display:block;font-size:10pt;font-weight:700;margin-top:1mm}
.dl-psheet__info{margin:2mm 0 1mm;font-size:8.5pt;color:#333;text-align:right}
.dl-psheet__sec{margin-top:3mm}
.dl-psheet__sec h2{display:flex;align-items:center;gap:2mm;font-size:9.5pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0 0 1.5mm;padding-bottom:.6mm;border-bottom:.3mm solid #9db7d6}
.dl-psheet__sec h2 span{display:inline-flex;width:5mm;height:5mm;align-items:center;justify-content:center;background:#2c3e69;color:#fff;border-radius:1mm;font-size:8pt}
.dl-psheet__sec h3{font-size:10pt;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:2.5mm 0 1mm;padding-bottom:.4mm;border-bottom:.2mm solid #999}
.dl-psheet__tbl{width:100%;border-collapse:collapse;font-size:8.5pt;margin-bottom:1mm}
.dl-psheet__tbl th{background:#eceff5;border:.2mm solid #999;padding:.8mm 1.2mm;font-size:7.5pt;text-transform:uppercase;letter-spacing:.03em}
.dl-psheet__tbl td{border:.2mm solid #999;padding:.8mm 1.2mm;vertical-align:top}
.dl-psheet__tbl .is-center{text-align:center}.dl-psheet__tbl .is-right{text-align:right}.dl-psheet__tbl .is-left{text-align:left}
.dl-psheet__tbl .is-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:8pt}
.dl-psheet__tbl td small{display:block;font-size:7pt;color:#555;line-height:1.25}
.dl-psheet__tbl thead{display:table-header-group}.dl-psheet__tbl tr{break-inside:avoid}
.dl-psheet__empty{text-align:center;color:#777;padding:3mm!important}
.dl-psheet__parties{display:grid;gap:0;border:.2mm solid #999;font-size:8.5pt;margin-bottom:1.5mm}
.dl-psheet__parties>div{padding:1.5mm 2mm}.dl-psheet__parties>div+div{border-left:.2mm solid #999}
.dl-psheet__parties small{display:block;font-size:7pt;letter-spacing:.06em;text-transform:uppercase;color:#555;margin-bottom:.6mm}
.dl-psheet__text,.dl-psheet__note{font-size:8pt;color:#444;margin:1mm 0}
.dl-psheet__sign{margin-top:8mm;break-inside:avoid}
.dl-psheet__sign>div>i{height:14mm}
.dl-psheet__foot{margin-top:auto;padding-top:2mm}
@media print{.dl-psheet{background:none;padding:0;border-radius:0;display:block}.dl-psheet__page{min-height:0;padding:0}}

/* ---- Dashboard (opening screen) ---- */
.dl-dash{display:flex;flex-direction:column;gap:14px;text-align:left;max-width:1320px;margin:0 auto;padding:4px 0 24px}
.dl-dash--accent{--c:var(--dl-accent)}.dl-dash--success{--c:var(--dl-green)}.dl-dash--warn{--c:var(--dl-amber-2)}.dl-dash--danger{--c:var(--dl-danger)}.dl-dash--violet{--c:var(--dl-violet)}.dl-dash--teal{--c:var(--dl-ch-teal)}.dl-dash--neutral{--c:var(--dl-muted)}
.dl-progress--violet .dl-progress__bar{background:var(--dl-violet)}.dl-progress--teal .dl-progress__bar{background:var(--dl-ch-teal)}
.dl-dash__hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:22px 24px;border-radius:var(--dl-radius-xl);color:var(--dl-white);
  background:radial-gradient(circle at 78% -30%,rgba(255,214,102,.38),transparent 42%),linear-gradient(120deg,var(--dl-navy) 0%,color-mix(in srgb,var(--dl-navy) 55%,var(--dl-accent)) 60%,var(--dl-accent) 130%)}
.dl-dash__eyebrow{font-size:calc(11px * var(--dl-font-scale));letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--dl-on-dark-muted);margin-bottom:4px}
.dl-dash__pos{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-on-dark)}
.dl-dash__pos span+span::before{content:"•";margin-right:14px;opacity:.5}
.dl-dash__brief{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding:9px 12px;border-radius:var(--dl-radius-lg);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-on-dark)}
.dl-dash__brief b{color:var(--dl-on-dark-warn)}
.dl-dash__docs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dl-dash__docs .dl-btn--ghost{background:rgba(255,255,255,.12);color:var(--dl-white);border:1px solid rgba(255,255,255,.3)}
.dl-dash__count{margin-left:6px;background:rgba(255,255,255,.22);border-radius:10px;padding:0 7px;font-size:calc(11px * var(--dl-font-scale))}
.dl-dash__side{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center;padding-left:20px;border-left:1px solid rgba(255,255,255,.14)}
.dl-dash__side .dl-clock .t{font-size:calc(34px * var(--dl-font-scale));color:var(--dl-white)}
.dl-dash__att{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.dl-dash__att small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-on-dark-muted)}
.dl-dash__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dl-dash__bar h2{margin:0;font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-dash__seg{margin-left:auto;display:inline-flex;flex-wrap:wrap;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:3px}
.dl-dash__seg button{border:none;background:none;font-family:inherit;font-weight:600;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-muted);padding:6px 13px;border-radius:var(--dl-radius);cursor:pointer;white-space:nowrap}
.dl-dash__seg button:hover{color:var(--dl-ink-strong)}
.dl-dash__seg button.is-active{background:var(--dl-navy);color:var(--dl-white)}
.dl-dash__period{display:none;flex-direction:column;gap:14px}
.dl-dash__period.is-active{display:flex}
.dl-dash__kpis{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.dl-dash__row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dl-dash__trend{display:flex;flex-direction:column;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden}
.dl-dash__trend > .dl-chart{border:none;border-radius:0;flex:1}
.dl-dash__sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-top:1px solid var(--dl-border)}
.dl-dash__sum div{padding:10px 14px;border-right:1px solid var(--dl-border)}
.dl-dash__sum div:last-child{border-right:none}
.dl-dash__sum small{display:block;font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--dl-muted)}
.dl-dash__sum b{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-dash__sum b.is-warn{color:var(--dl-amber)}.dl-dash__sum b.is-good{color:var(--dl-success)}.dl-dash__sum b.is-bad{color:var(--dl-danger)}
.dl-dash__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.dl-dash__actbox{border:1px solid var(--dl-border);border-top:3px solid var(--c);border-radius:var(--dl-radius);padding:9px 10px;display:flex;flex-direction:column;gap:4px}
.dl-dash__actbox span{font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink)}
.dl-dash__actbox span i{color:var(--c);margin-right:3px}
.dl-dash__actbox b{font-size:calc(20px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-dash__actbox b small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted);font-weight:500}
.dl-dash__mx{margin-top:10px}
.dl-dash__mx tfoot td{font-weight:700}
.dl-dash__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px}
.dl-dash__act .dl-chart{border:none;padding:8px 0 0}
.dl-dash__fu td{vertical-align:middle}
.dl-dash__who{display:flex;gap:9px;align-items:center}
.dl-dash__who b{display:block;white-space:nowrap;color:var(--dl-ink-strong)}
.dl-dash__who small,.dl-dash__fu td > small{display:block;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-dash__stage{display:flex;gap:3px;margin-bottom:3px}
.dl-dash__stage i{width:16px;height:5px;border-radius:5px;background:var(--dl-chip)}
.dl-dash__stage i.is-on{background:var(--dl-accent)}
.dl-dash__cnt{white-space:nowrap;color:var(--dl-ink)}
.dl-dash__cnt span{margin-right:9px}
.dl-dash__cnt i{color:var(--dl-muted);margin-right:3px;font-size:.85em}
.dl-dash__ag{list-style:none;margin:0;padding:0}
.dl-dash__ag li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:0 0 14px 0;position:relative}
.dl-dash__ag li::before{content:"";position:absolute;left:61px;top:4px;width:10px;height:10px;border-radius:50%;border:3px solid var(--c);background:var(--dl-surface)}
.dl-dash__ag li::after{content:"";position:absolute;left:67px;top:20px;bottom:0;width:2px;background:var(--dl-border)}
.dl-dash__ag li:last-child::after{display:none}
.dl-dash__ag li > div{padding-left:28px}
.dl-dash__ag time{font-weight:700;color:var(--dl-ink-strong);font-variant-numeric:tabular-nums}
.dl-dash__ag time small,.dl-dash__ag li > div small{display:block;font-weight:500;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-dash__ag li > div b{color:var(--dl-ink-strong)}
.dl-dash__ag li.is-done b{text-decoration:line-through;color:var(--dl-muted)}
.dl-dash__quote{display:flex;align-items:center;gap:18px;padding:16px 22px;border-radius:var(--dl-radius-lg);background:linear-gradient(90deg,color-mix(in srgb,var(--dl-amber-2) 12%,var(--dl-surface)),var(--dl-surface) 65%);border:1px solid color-mix(in srgb,var(--dl-amber-2) 30%,var(--dl-border))}
.dl-dash__quote .dl-quote{flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:14px;color:var(--dl-ink-strong)}
.dl-dash__quote .dl-quote .qi{grid-row:span 2;font-size:48px;color:var(--dl-amber-2)}
.dl-dash__quote .dl-quote .q{font-size:calc(15.5px * var(--dl-font-scale));max-width:none;margin:0}
.dl-dash__quote .dl-quote .a{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));margin-top:4px}
.dl-dash__doy{text-align:center;padding-left:18px;border-left:1px solid color-mix(in srgb,var(--dl-amber-2) 30%,var(--dl-border))}
.dl-dash__doy b{display:block;font-size:calc(22px * var(--dl-font-scale));color:var(--dl-amber)}
.dl-dash__doy small{font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.05em;color:var(--dl-muted)}
.dl-dash__doc{font-size:calc(13.5px * var(--dl-font-scale));line-height:1.6;color:var(--dl-ink)}
.dl-dash__doc h3,.dl-dash__doc h4{color:var(--dl-ink-strong);margin:14px 0 6px}
.dl-dash__doc h3:first-child,.dl-dash__doc h4:first-child{margin-top:0}
.dl-dash__doc ul,.dl-dash__doc ol{margin:4px 0 8px;padding-left:20px}
.dl-dash__doc table{border-collapse:collapse;width:100%;margin:6px 0}
.dl-dash__doc th,.dl-dash__doc td{border:1px solid var(--dl-border);padding:5px 8px;text-align:left}
.dl-dash__upd{color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale));margin:0 auto 0 0}
.dl-home--dash{max-width:none;margin:0;text-align:left}
@media (max-width:1100px){.dl-dash__row{grid-template-columns:1fr}}
@media (max-width:760px){.dl-dash__hero{grid-template-columns:1fr}.dl-dash__side{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}.dl-dash__seg{margin-left:0}.dl-dash__quote{flex-direction:column;align-items:flex-start}.dl-dash__doy{border-left:none;padding-left:0}.dl-dash__fu{display:block;overflow-x:auto}}
.dl-dash__doc table.dl-dash__meta{width:auto;margin:0 0 10px}.dl-dash__doc table.dl-dash__meta td{border:none;padding:1px 12px 1px 0}
.dl-dash__row--wide{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.dl-dash__scroll{overflow-x:auto}
.dl-dash__fu td > small{max-width:170px}
.dl-dash__ag li > div b{font-size:calc(13px * var(--dl-font-scale))}
.dl-dash__fu th,.dl-dash__fu td{padding-left:8px;padding-right:8px}
.dl-dash__fu td:last-child{text-align:right}
.dl-home--dash p{font-size:inherit;color:inherit;line-height:inherit;margin:0 0 6px}

@media (max-width:1100px){.dl-dash__row--wide{grid-template-columns:1fr}}
.dl-dash__row--half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dl-dash__targets .dl-card__body{gap:14px}
.dl-dash__tg{display:flex;gap:12px;align-items:flex-start}
.dl-dash__tgicon{width:34px;height:34px;border-radius:var(--dl-radius);display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--dl-surface))}
.dl-dash__tgbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dl-dash__tghead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dl-dash__tghead b{color:var(--dl-ink-strong)}
.dl-dash__tgbody > small{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-dash__rk td{vertical-align:middle}
.dl-dash__rkpct{min-width:110px}
.dl-dash__rkpct small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
@media (max-width:1100px){.dl-dash__row--half{grid-template-columns:1fr}}
.dl-dash__tghead b{font-size:calc(13px * var(--dl-font-scale))}
.dl-dash__rk td.num{white-space:nowrap}
/* ---- Widget board (opening screen yang bisa diatur) ---- */
.dl-wb{display:flex;flex-direction:column;gap:12px}
.dl-wb.is-busy{opacity:.6;pointer-events:none}
.dl-wb__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dl-wb__bar h2{margin:0;font-size:calc(16px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-wb__tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-wb__seg{margin-left:0}
.dl-wb__tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--dl-border)}
.dl-wb__tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-muted);font-family:inherit;font-weight:600;font-size:calc(13px * var(--dl-font-scale));padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.dl-wb__tab:hover{color:var(--dl-ink-strong);border-color:var(--dl-accent)}
.dl-wb__tab.is-active{background:var(--dl-navy);border-color:var(--dl-navy);color:var(--dl-white)}
.dl-wb__group small{font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px;color:var(--dl-accent)}
label.dl-wb__catitem{cursor:pointer}
label.dl-wb__catitem.is-on{border-color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-wb__catitem input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--dl-accent);cursor:pointer}
.dl-wb__cattext{flex:1;min-width:0;display:block}
.dl-wb__cattype{flex:none;font-size:calc(10.5px * var(--dl-font-scale));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dl-muted);border:1px solid var(--dl-border);border-radius:999px;padding:2px 8px}
.dl-wb__catitem[hidden],.dl-wb__group[hidden],.dl-wb__cat[hidden]{display:none}
.dl-wb__pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dl-wb__search{flex:1;min-width:220px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius);padding:8px 12px;font-family:inherit;font-size:calc(13px * var(--dl-font-scale));background:var(--dl-surface);color:var(--dl-ink)}
.dl-wb__addtile{grid-column:span 3;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--dl-border);border-radius:var(--dl-radius-lg);background:none;color:var(--dl-muted);font-family:inherit;font-weight:600;font-size:calc(13px * var(--dl-font-scale));cursor:pointer}
.dl-wb__addtile i{font-size:22px}
.dl-wb__addtile:hover,.dl-wb__addtile.is-over{border-color:var(--dl-accent);color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-wb.is-edit .dl-wb__item{cursor:grab}
.dl-wb__item.is-drag{opacity:.45}
.dl-wb__item.is-over{outline:2px solid var(--dl-accent);outline-offset:4px}
@media (max-width:1100px){.dl-wb__addtile{grid-column:span 6}}
@media (max-width:760px){.dl-wb__addtile{grid-column:span 12}}
.dl-kpi__note{color:var(--dl-ink)}
.dl-wb__hint{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-wb__only-edit{display:none}
.dl-wb.is-edit .dl-wb__only-edit{display:inline-flex}
.dl-wb.is-edit .dl-wb__not-edit{display:none}
.dl-wb__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:stretch}
.dl-wb__item{grid-column:span 4;min-width:0;display:flex;flex-direction:column;gap:6px}
.dl-wb__item[data-size="3"]{grid-column:span 3}.dl-wb__item[data-size="6"]{grid-column:span 6}
.dl-wb__item[data-size="8"]{grid-column:span 8}.dl-wb__item[data-size="12"]{grid-column:span 12}
.dl-wb__item > .dl-kpi,.dl-wb__item > .dl-card,.dl-wb__item > .dl-chart,.dl-wb__item > .dl-dash__quote{flex:1;margin:0}
.dl-wb__edit{display:none;align-items:center;gap:4px;padding:4px 6px;border:1px dashed var(--dl-accent);border-radius:var(--dl-radius);background:var(--dl-accent-soft)}
.dl-wb__edit b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-wb__edit .dl-iconbtn{width:26px;height:26px}
.dl-wb.is-edit .dl-wb__edit{display:flex}
.dl-wb.is-edit .dl-wb__item{outline:1px dashed color-mix(in srgb,var(--dl-accent) 45%,transparent);outline-offset:4px;border-radius:var(--dl-radius-lg)}
.dl-wb__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--dl-border)}
.dl-wb__row:last-child{border-bottom:none}
.dl-wb__text{white-space:pre-line;color:var(--dl-ink);font-size:calc(13px * var(--dl-font-scale));line-height:1.55;max-height:320px;overflow:auto}
.dl-wb__row b{display:block;color:var(--dl-ink-strong);font-size:calc(13px * var(--dl-font-scale))}
.dl-wb__row small{display:block;color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-wb__group{margin:14px 0 6px;font-size:calc(12px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.05em;color:var(--dl-muted)}
.dl-wb__group:first-child{margin-top:0}
.dl-wb__cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dl-wb__catitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface)}
.dl-wb__catitem > div{flex:1;min-width:0}
.dl-wb__catitem b{display:block;color:var(--dl-ink-strong);font-size:calc(13px * var(--dl-font-scale))}
.dl-wb__catitem small{display:block;color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-wb__caticon{width:34px;height:34px;border-radius:var(--dl-radius);display:grid;place-items:center;flex:none;color:var(--dl-accent);background:var(--dl-accent-soft)}
@media (max-width:1100px){.dl-wb__item,.dl-wb__item[data-size="3"]{grid-column:span 6}.dl-wb__item[data-size="6"],.dl-wb__item[data-size="8"]{grid-column:span 12}}
@media (max-width:760px){.dl-wb__item,.dl-wb__item[data-size="3"]{grid-column:span 12}.dl-wb__cat{grid-template-columns:1fr}}

/* ================= WAREHOUSE MAP (x-dl::wh-map) =================
 * Denah gedung dalam meter (SVG, 1 m = 10 satuan). Warna bin: kosong putih, terisi biru, penuh kuning, lebih dari
 * kapasitas oranye, diblokir arsir, DEAD STOCK merah (menang atas warna isi). Warna area = --z per tone. */
.dl-whmap{display:flex;flex-direction:column;gap:8px;container-type:inline-size}
.dl-whmap__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dl-whmap__title{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-whmap__floors{display:inline-flex;background:var(--dl-chip);border-radius:var(--dl-radius);padding:2px}
.dl-whmap__floors button{border:0;background:none;padding:5px 12px;border-radius:var(--dl-radius-sm);font:inherit;font-weight:700;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-tab-ink);cursor:pointer}
.dl-whmap__floors button.is-active{background:var(--dl-surface);color:var(--dl-accent);box-shadow:0 1px 3px var(--dl-accent-ring)}
.dl-whmap__search{display:flex;align-items:center;gap:6px;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius-sm);padding:0 8px;background:var(--dl-surface);min-width:250px;color:var(--dl-muted)}
.dl-whmap__search input{border:0;outline:0;padding:6px 0;font:inherit;font-size:calc(12.5px * var(--dl-font-scale));width:100%;background:none;color:var(--dl-f-ink)}
.dl-whmap__found{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-whmap__spacer{flex:1}
.dl-whmap__legend{display:flex;flex-wrap:wrap;gap:2px 16px;border-bottom:1px solid var(--dl-border);padding-bottom:4px}
.dl-whmap__legend button{border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 1px;margin-bottom:-5px}
.dl-whmap__legend button b{color:var(--dl-muted);font-weight:600}
.dl-whmap__legend button.is-active{border-bottom-color:var(--dl-accent);color:var(--dl-accent)}
.dl-whmap__swatch{width:13px;height:13px;border-radius:3px;border:1px solid var(--dl-border-hover);display:inline-block;background:var(--dl-surface)}
.dl-whmap__swatch--in_use{background:var(--dl-accent-soft-2);border-color:color-mix(in srgb,var(--dl-accent) 60%,var(--dl-surface))}
.dl-whmap__swatch--full{background:color-mix(in srgb,var(--dl-amber-2) 45%,var(--dl-surface));border-color:var(--dl-amber)}
.dl-whmap__swatch--over{background:color-mix(in srgb,var(--dl-tangerine) 50%,var(--dl-surface));border-color:var(--dl-tangerine)}
.dl-whmap__swatch--blocked{background:repeating-linear-gradient(45deg,var(--dl-surface-muted),var(--dl-surface-muted) 3px,var(--dl-grip) 3px,var(--dl-grip) 5px)}
.dl-whmap__swatch--dead{background:color-mix(in srgb,var(--dl-danger) 32%,var(--dl-surface));border-color:var(--dl-danger)}
.dl-whmap__body{display:grid;grid-template-columns:clamp(260px,32%,350px) minmax(0,1fr);gap:10px;align-items:start}
.dl-whmap__canvas{border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface-alt);padding:4px;overflow:auto}
.dl-whmap__svg{display:block;width:100%;height:auto;max-height:74vh;touch-action:none;user-select:none}
.dl-whmap__floor{fill:var(--dl-surface)}
.dl-whmap__gridline{fill:none;stroke:var(--dl-border);stroke-width:.2}
.dl-whmap__wall{fill:none;stroke:var(--dl-ink-strong);stroke-width:1.1;stroke-linejoin:round}
.dl-whmap__dim{font-size:3.2px;fill:var(--dl-muted);font-weight:700}
.dl-whmap__hatchbg{fill:var(--dl-surface-muted)}
.dl-whmap__hatchline{stroke:var(--dl-grip);stroke-width:1.2}
.dl-whmap__zone{--z:var(--dl-accent)}
.dl-whmap__zone[data-tone="violet"]{--z:var(--dl-violet)}
.dl-whmap__zone[data-tone="amber"]{--z:var(--dl-amber-2)}
.dl-whmap__zone[data-tone="lime"]{--z:var(--dl-lime)}
.dl-whmap__zone[data-tone="green"]{--z:var(--dl-green)}
.dl-whmap__zone[data-tone="danger"]{--z:var(--dl-danger)}
.dl-whmap__zone[data-tone="pink"]{--z:var(--dl-pink)}
.dl-whmap__zone[data-tone="orange"]{--z:var(--dl-orange)}
.dl-whmap__zone[data-tone="neutral"]{--z:var(--dl-tab-ink)}
.dl-whmap__zrect{fill:color-mix(in srgb,var(--z) 8%,var(--dl-surface));stroke:var(--z);stroke-width:.55}
.dl-whmap__zname{font-size:3.3px;font-weight:700;fill:color-mix(in srgb,var(--z) 75%,var(--dl-ink-strong))}
.dl-whmap__znote{font-size:2.7px;fill:var(--dl-muted)}
.dl-whmap__cell{cursor:pointer;outline:none}
.dl-whmap__cell rect{fill:var(--dl-surface);stroke:var(--dl-border-hover);stroke-width:.35}
.dl-whmap__cell text{fill:var(--dl-ink);font-weight:600;pointer-events:none;font-family:var(--dl-font)}
.dl-whmap__cell--in_use rect{fill:var(--dl-accent-soft-2);stroke:color-mix(in srgb,var(--dl-accent) 60%,var(--dl-surface))}
.dl-whmap__cell--full rect{fill:color-mix(in srgb,var(--dl-amber-2) 45%,var(--dl-surface));stroke:var(--dl-amber)}
.dl-whmap__cell--over rect{fill:color-mix(in srgb,var(--dl-tangerine) 50%,var(--dl-surface));stroke:var(--dl-tangerine)}
.dl-whmap__cell--blocked rect{stroke:var(--dl-disabled)}
.dl-whmap__cell--blocked text{fill:var(--dl-tab-ink)}
.dl-whmap__cell.is-dead rect{fill:color-mix(in srgb,var(--dl-danger) 32%,var(--dl-surface));stroke:var(--dl-danger);stroke-width:.7}
.dl-whmap__cell.is-dead text{fill:color-mix(in srgb,var(--dl-danger) 75%,var(--dl-ink-strong))}
.dl-whmap__deaddot{fill:var(--dl-danger)}
.dl-whmap__cell text.dl-whmap__lv{font-size:2.2px;fill:var(--dl-tab-ink)}
.dl-whmap__cell:hover rect,.dl-whmap__cell:focus rect{stroke:var(--dl-accent);stroke-width:.8}
.dl-whmap__cell.is-hit rect{stroke-width:.9}
.dl-whmap__cell.is-sel rect{stroke:var(--dl-navy);stroke-width:1.2}
.dl-whmap__cell.is-dim{opacity:.2}
.dl-whmap__grip{fill:var(--z);cursor:nwse-resize;display:none}
.dl-whmap.is-edit .dl-whmap__grip{display:block}
.dl-whmap.is-edit .dl-whmap__zone{cursor:move}
.dl-whmap.is-edit .dl-whmap__zrect{stroke-dasharray:2 1.2}
.dl-whmap.is-edit .dl-whmap__cell{pointer-events:none}
.dl-whmap__zone.is-drag{opacity:.7}
.dl-whmap__panel{order:-1;border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px;position:sticky;top:8px}
.dl-whmap__hint{color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale));margin:0}
.dl-whmap__phead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.dl-whmap__phead small,.dl-whmap__qr small{display:block;font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.5px;color:var(--dl-muted);font-weight:700}
.dl-whmap__phead b{display:block;font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong);word-break:break-all;line-height:1.25}
.dl-whmap__phead div>span{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-whmap__st{white-space:nowrap}
.dl-whmap__st--empty,.dl-whmap__st--blocked{background:var(--dl-chip);color:var(--dl-tab-ink)}
.dl-whmap__st--in_use{background:var(--dl-info-soft);color:var(--dl-accent)}
.dl-whmap__st--full{background:color-mix(in srgb,var(--dl-amber-2) 18%,var(--dl-surface));color:color-mix(in srgb,var(--dl-amber) 50%,var(--dl-ink-strong))}
.dl-whmap__st--over{background:color-mix(in srgb,var(--dl-tangerine) 20%,var(--dl-surface));color:color-mix(in srgb,var(--dl-tangerine) 70%,var(--dl-ink-strong))}
.dl-whmap__st--dead{background:var(--dl-danger);color:var(--dl-white)}
.dl-whmap__levels{display:flex;gap:4px;flex-wrap:wrap}
.dl-whmap__levels button{border:1px solid var(--dl-border-hover);background:var(--dl-surface);border-radius:var(--dl-radius-sm);padding:3px 9px;font:inherit;font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink);cursor:pointer}
.dl-whmap__levels button.is-dead{border-color:var(--dl-danger);color:var(--dl-danger)}
.dl-whmap__levels button.is-active{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}
.dl-whmap__cap{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:baseline;background:var(--dl-surface-alt);border-radius:var(--dl-radius-sm);padding:8px}
.dl-whmap__cap span{font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.5px;color:var(--dl-muted);font-weight:700}
.dl-whmap__cap b{font-size:calc(13px * var(--dl-font-scale));text-align:right;color:var(--dl-ink-strong)}
.dl-whmap__cap i{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--dl-border);overflow:hidden;display:block}
.dl-whmap__fill{display:block;height:100%;background:var(--dl-accent);border-radius:3px}
.dl-whmap__fill--full{background:var(--dl-amber-2)}
.dl-whmap__fill--over{background:var(--dl-tangerine)}
.dl-whmap__fill--dead{background:var(--dl-danger)}
.dl-whmap__cap small{grid-column:1 / -1;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-whmap__tag{display:inline-block;font-style:normal;font-size:calc(9.5px * var(--dl-font-scale));font-weight:800;text-transform:uppercase;letter-spacing:.3px;border-radius:3px;padding:0 5px;margin-right:3px;background:var(--dl-chip);color:var(--dl-tab-ink)}
.dl-whmap__tag--danger{background:var(--dl-danger);color:var(--dl-white)}
.dl-whmap__tag--warn{background:var(--dl-yellow);color:var(--dl-f-ink)}
.dl-whmap__swatch--expiry{background:var(--dl-yellow);border-color:var(--dl-amber)}
.dl-whmap__expdot{fill:var(--dl-yellow);stroke:var(--dl-amber);stroke-width:.3}
.dl-whmap__burdot{fill:var(--dl-tangerine)}
.dl-whmap__remdot{fill:var(--dl-violet)}
.dl-whmap__cell text.dl-whmap__n{font-size:2.4px;font-weight:800;fill:var(--dl-navy)}
.dl-whmap__layer{pointer-events:none}
.dl-whmap__lroute{fill:none;stroke:var(--dl-success);stroke-width:.7;stroke-dasharray:2.4 1.6;stroke-linecap:round}
.dl-whmap__lmark{fill:var(--dl-success);stroke:var(--dl-surface);stroke-width:.6}
.dl-whmap__lmark--put{fill:var(--dl-surface);stroke:var(--dl-violet);stroke-width:.8;stroke-dasharray:1.6 1.2}
.dl-whmap__lnum{font-size:3.6px;font-weight:800;fill:var(--dl-surface)}
.dl-whmap__lmark--put + .dl-whmap__lnum{fill:var(--dl-violet-ink)}
.dl-whmap__lend{font-size:2.6px;font-weight:800;fill:var(--dl-success)}
.dl-whmap__swatch--remnant{background:var(--dl-violet);border-color:var(--dl-violet);border-radius:50%}
.dl-whmap__swatch--buried{background:var(--dl-tangerine);border-color:var(--dl-tangerine);border-radius:50%}
.dl-whmap__tag--info{background:var(--dl-info-soft);color:var(--dl-accent)}
.dl-whmap__tag--violet{background:var(--dl-violet-msg);color:var(--dl-violet-ink)}
.dl-whmap__tag--orange{background:color-mix(in srgb,var(--dl-tangerine) 20%,var(--dl-surface));color:color-mix(in srgb,var(--dl-tangerine) 70%,var(--dl-ink-strong))}
.dl-whmap__stack{display:flex;flex-direction:column;gap:2px}
.dl-whmap__stack>small{font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.5px;color:var(--dl-muted);font-weight:700;margin-bottom:2px}
.dl-whmap__unit{display:flex;align-items:stretch;gap:8px;border:1px solid color-mix(in srgb,var(--dl-accent) 60%,var(--dl-surface));border-radius:var(--dl-radius-sm);background:var(--dl-accent-soft-2);overflow:hidden}
.dl-whmap__unit--pack{border-color:var(--dl-violet-line);background:var(--dl-violet-soft)}
.dl-whmap__unit.is-dead{border-color:var(--dl-danger);background:color-mix(in srgb,var(--dl-danger) 10%,var(--dl-surface))}
.dl-whmap__uno{flex:none;width:26px;display:flex;align-items:center;justify-content:center;background:var(--dl-navy);color:var(--dl-white);font-size:calc(13px * var(--dl-font-scale))}
.dl-whmap__ubody{flex:1;min-width:0;padding:4px 0}
.dl-whmap__ubody b{display:block;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-whmap__ubody small{display:block;font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-whmap__uacts{flex:none;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:3px 5px}
.dl-whmap__swap{border:1px solid var(--dl-border-hover);background:var(--dl-surface);border-radius:var(--dl-radius-sm);width:22px;height:20px;font-size:calc(10px * var(--dl-font-scale));color:var(--dl-navy);cursor:pointer;padding:0}
.dl-whmap__swap:hover{border-color:var(--dl-accent);color:var(--dl-accent)}
.dl-whmap__wood{display:block;height:7px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--dl-amber) 0 44px,var(--dl-surface) 44px 50px);opacity:.8}
.dl-whmap__ground{display:block;height:3px;background:var(--dl-tab-ink);margin-top:1px}
.dl-whmap__note{margin:0;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-whmap__qr{display:flex;gap:10px;align-items:center;border:1px dashed var(--dl-border-hover);border-radius:var(--dl-radius-sm);padding:8px}
.dl-whmap__qr b{display:block;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink-strong);word-break:break-all}
.dl-whmap__qr div>span{font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-whmap__items{width:100%;border-collapse:collapse;font-size:calc(12px * var(--dl-font-scale))}
.dl-whmap__items th{font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;color:var(--dl-muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--dl-border)}
.dl-whmap__items td{padding:5px 6px;border-bottom:1px solid var(--dl-border-soft);vertical-align:top}
.dl-whmap__items td small{display:block;color:var(--dl-muted);font-size:calc(10.5px * var(--dl-font-scale))}
.dl-whmap__items .num{text-align:right;white-space:nowrap}
.dl-whmap__items tr.is-dead td{background:var(--dl-danger-soft)}
.dl-whmap__items tr.is-dead td b{color:var(--dl-danger)}
.dl-whmap__acts{display:flex;gap:6px;flex-wrap:wrap}
.dl-whmap__zone:not(.is-drag) .dl-whmap__zrect{cursor:pointer}
.dl-whmap__zbin{border-top:1px solid var(--dl-border);padding-top:6px}.dl-whmap__zbin>button{all:unset;cursor:pointer;font-weight:700;color:var(--dl-accent)}.dl-whmap__zbin ul{margin:4px 0 0;padding-left:16px}.dl-whmap__zbin li small{display:block;color:var(--dl-text-muted,inherit)}
@container (max-width:640px){.dl-whmap__body{grid-template-columns:1fr}.dl-whmap__panel{position:static}}

/* ================= LABEL (x-dl::label, x-dl::label-sheet) + SCAN (x-dl::scan) =================
 * Label tempel gudang dalam ukuran nyata (mm): QR di kiri, kode besar, keterangan, barcode 1D. Lembar cetak hanya mencetak labelnya. */
.dl-label{--lc:var(--dl-tab-ink);--lt:var(--dl-white);display:inline-flex;flex-direction:column;background:var(--dl-white);color:var(--dl-f-ink);border:1px solid var(--dl-f-ink);border-radius:2mm;width:100mm;height:50mm;vertical-align:top;overflow:hidden;break-inside:avoid;page-break-inside:avoid;font-family:var(--dl-font);box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dl-label[data-color="accent"]{--lc:var(--dl-accent)}
.dl-label[data-color="green"]{--lc:var(--dl-green)}
.dl-label[data-color="tangerine"]{--lc:var(--dl-tangerine)}
.dl-label[data-color="violet"]{--lc:var(--dl-violet)}
.dl-label[data-color="lime"]{--lc:var(--dl-lime)}
.dl-label[data-color="pink"]{--lc:var(--dl-pink)}
.dl-label[data-color="navy"]{--lc:var(--dl-navy)}
.dl-label[data-color="yellow"]{--lc:var(--dl-yellow);--lt:var(--dl-f-ink)}
.dl-label[data-color="teal"]{--lc:var(--dl-doc-4a)}
.dl-label[data-color="orange"]{--lc:var(--dl-orange)}
.dl-label[data-color="amber"]{--lc:var(--dl-amber)}
.dl-label[data-color="danger"]{--lc:var(--dl-danger)}
.dl-label--sm{width:60mm;height:40mm}
.dl-label--lg{width:100mm;height:150mm}
.dl-label--pallet{border-width:2px}
.dl-label--danger{border-left:5mm solid var(--dl-danger)}
.dl-label__band{flex:none;display:flex;align-items:center;gap:2mm;background:var(--lc);color:var(--lt);padding:1mm 3mm;font-size:8pt;line-height:1.2;text-transform:uppercase;letter-spacing:.6px}
.dl-label__band b{font-weight:800}
.dl-label__band span{margin-left:auto;font-weight:700;white-space:nowrap}
.dl-label--sm .dl-label__band{font-size:6.5pt;padding:.6mm 2mm;gap:1.2mm}
.dl-label--lg .dl-label__band{font-size:13pt;padding:2mm 4mm}
.dl-label__main{flex:1;min-height:0;display:flex;gap:3mm;align-items:center;padding:2mm 3mm}
.dl-label--sm .dl-label__main{gap:2mm;padding:1.2mm 2mm}
.dl-label--lg .dl-label__main{flex-direction:column;align-items:stretch;justify-content:space-evenly;text-align:center;padding:3mm 4mm;gap:2.5mm}
.dl-label__qr{flex:none;display:block;line-height:0}
.dl-label--lg .dl-label__qr{align-self:center}
.dl-label__qr img,.dl-label__qr canvas{display:block}
.dl-label__body{display:flex;flex-direction:column;gap:.7mm;min-width:0;flex:1}
.dl-label--lg .dl-label__body{gap:1.6mm;flex:none}
.dl-label__code{font-size:16pt;font-weight:800;line-height:1.05;word-break:break-all}
.dl-label--sm .dl-label__code{font-size:9.5pt}
.dl-label--lg .dl-label__code{font-size:25pt}
.dl-label__name{font-size:8.5pt;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-label--sm .dl-label__name{font-size:6.5pt}
.dl-label--pallet:not(.dl-label--lg) .dl-label__name{-webkit-line-clamp:1}
.dl-label--lg .dl-label__name{font-size:12pt;-webkit-line-clamp:2}
.dl-label__hi{font-size:13.5pt;font-weight:800;line-height:1.05}
.dl-label--sm .dl-label__hi{font-size:8.5pt}
.dl-label--lg .dl-label__hi{font-size:30pt}
.dl-label__lines{margin:0;display:flex;flex-wrap:wrap;gap:.3mm 3.5mm;font-size:8pt;line-height:1.2}
.dl-label--sm .dl-label__lines{font-size:5.8pt;gap:.1mm 2mm}
.dl-label--lg .dl-label__lines{text-align:left;font-size:11pt;gap:.8mm 7mm;justify-content:center}
.dl-label__lines div{display:flex;gap:1.2mm;min-width:0;max-width:100%}
.dl-label__lines dt{color:var(--dl-f-muted);white-space:nowrap}
.dl-label__lines dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.dl-label__tags{display:flex;flex-wrap:wrap;gap:1mm}
.dl-label--lg .dl-label__tags{justify-content:center}
.dl-label__tag{font-style:normal;font-weight:800;font-size:6.8pt;text-transform:uppercase;letter-spacing:.4px;padding:.3mm 1.6mm;border-radius:1mm;border:1px solid var(--dl-f-ink);background:var(--dl-white);color:var(--dl-f-ink);white-space:nowrap}
.dl-label--sm .dl-label__tag{font-size:5.5pt;padding:.1mm 1mm}
.dl-label--lg .dl-label__tag{font-size:13pt;padding:1mm 3mm}
.dl-label__tag--danger{background:var(--dl-danger);border-color:var(--dl-danger);color:var(--dl-white)}
.dl-label__tag--warn{background:var(--dl-yellow);border-color:var(--dl-amber);color:var(--dl-f-ink)}
.dl-label__bar{display:block;line-height:0}
.dl-label__bar svg{max-width:100%;height:auto}
.dl-label--lg .dl-label__bar svg{margin:0 auto}
.dl-label__foot{font-size:6.5pt;color:var(--dl-f-muted)}
.dl-label--sm .dl-label__foot{font-size:5.5pt}
.dl-label--lg .dl-label__foot{font-size:8.5pt}
.dl-labelguide{border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);padding:8px 12px;margin:8px 0;font-size:calc(12.5px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-labelguide summary{cursor:pointer;font-weight:700;color:var(--dl-ink-strong)}
.dl-labelguide summary i{color:var(--dl-accent);margin-right:4px}
.dl-labelguide__table{width:100%;max-width:820px;border-collapse:collapse;margin-top:8px}
.dl-labelguide__table th{font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;color:var(--dl-muted);text-align:left;padding:4px 8px;border-bottom:1px solid var(--dl-border)}
.dl-labelguide__table td{padding:5px 8px;border-bottom:1px solid var(--dl-border)}
.dl-labelguide__table .num{text-align:right}
.dl-labelguide__table tr.is-active td{background:var(--dl-accent-soft)}
.dl-labelguide__tips{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.dl-labelguide__colors{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:8px}
.dl-labelguide__colors b{margin-right:4px;color:var(--dl-ink-strong)}
.dl-labelguide__chip{--lc:var(--dl-tab-ink);--lt:var(--dl-white);background:var(--lc);color:var(--lt);border-radius:var(--dl-radius-sm);padding:2px 9px;font-weight:700;font-size:calc(11.5px * var(--dl-font-scale))}
.dl-labelguide__chip[data-color="accent"]{--lc:var(--dl-accent)}
.dl-labelguide__chip[data-color="green"]{--lc:var(--dl-green)}
.dl-labelguide__chip[data-color="tangerine"]{--lc:var(--dl-tangerine)}
.dl-labelguide__chip[data-color="violet"]{--lc:var(--dl-violet)}
.dl-labelguide__chip[data-color="lime"]{--lc:var(--dl-lime)}
.dl-labelguide__chip[data-color="pink"]{--lc:var(--dl-pink)}
.dl-labelguide__chip[data-color="navy"]{--lc:var(--dl-navy)}
.dl-labelguide__chip[data-color="yellow"]{--lc:var(--dl-yellow);--lt:var(--dl-f-ink)}
.dl-labelguide__chip[data-color="teal"]{--lc:var(--dl-doc-4a)}
.dl-labelguide__chip[data-color="orange"]{--lc:var(--dl-orange)}
.dl-labelguide__chip[data-color="amber"]{--lc:var(--dl-amber)}
.dl-labelguide__chip[data-color="danger"]{--lc:var(--dl-danger)}
.dl-labelsheet__bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dl-labelsheet__bar b{font-size:calc(15px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-labelsheet__bar span{color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-labelsheet__spacer{flex:1}
.dl-labelsheet__labels{display:flex;flex-wrap:wrap;gap:4mm;align-items:flex-start;background:var(--dl-surface-muted);padding:5mm;border-radius:var(--dl-radius)}
@media print{
  body:has(.dl-labelsheet) *{visibility:hidden}
  body:has(.dl-labelsheet) .dl-labelsheet__labels,body:has(.dl-labelsheet) .dl-labelsheet__labels *{visibility:visible}
  body:has(.dl-labelsheet) .dl-labelsheet__labels{position:absolute;left:0;top:0;background:none;padding:0;gap:0;border-radius:0}
  body:has(.dl-labelsheet){height:auto;overflow:visible;margin:0}
  /* gulungan label: satu label = satu halaman seukuran label (ukuran halaman dari x-dl::label-sheet) */
  .dl-labelsheet--roll .dl-labelsheet__labels{display:block}
  .dl-labelsheet--roll .dl-label{display:flex;border-radius:0;border-color:transparent;break-after:page;page-break-after:always}
  .dl-labelsheet--roll .dl-label--danger{border-left-color:var(--dl-danger)}
  .dl-labelsheet--a4 .dl-label{border-radius:0}
}
.dl-scan{display:flex;flex-direction:column;gap:6px;max-width:640px}
.dl-scan__label{font-size:calc(12px * var(--dl-font-scale));font-weight:700;color:var(--dl-f-label)}
.dl-scan__box{display:flex;align-items:center;gap:8px;border:2px solid var(--dl-accent);border-radius:var(--dl-radius);padding:4px 4px 4px 12px;background:var(--dl-surface);color:var(--dl-accent)}
.dl-scan__box input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:calc(16px * var(--dl-font-scale));font-weight:600;padding:8px 0;background:none;color:var(--dl-f-ink)}
.dl-scan__cam{border:0;background:var(--dl-accent-soft);color:var(--dl-accent);width:38px;height:38px;border-radius:var(--dl-radius-sm);cursor:pointer;font-size:16px}
.dl-scan__hint{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-scan__video{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dl-scan__video video{width:100%;max-width:420px;border-radius:var(--dl-radius);background:var(--dl-device-bg)}
/* Build Board (x-dl::build-board): papan Build Progress = StatBox + Card + Progress + Badge. */
.dl-bb{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.dl-bb__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dl-bb__head b{display:block;font-size:calc(18px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-bb__head small,.dl-bb__note{color:var(--dl-muted);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-bb__note{margin:10px 0 0}
.dl-bb__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dl-bb__tiles .dl-stat{min-width:0}
.dl-bb__cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;align-items:start}
.dl-bb__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.dl-bb__wide{min-width:0;overflow-x:auto}
.dl-bb__table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-bb__table th{font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;color:var(--dl-muted);font-weight:600;text-align:right;padding:6px 8px;white-space:nowrap}
.dl-bb__table td{padding:7px 8px;text-align:right;border-top:1px solid var(--dl-border-soft);white-space:nowrap}
.dl-bb__table th:first-child,.dl-bb__table td:first-child,.dl-bb__table .is-left{text-align:left}
.dl-bb__table tfoot td{font-weight:700;border-top:2px solid var(--dl-border)}
.dl-bb__barcol{min-width:160px;text-align:left !important}
.dl-bb__bar{display:flex;height:8px;border-radius:4px;background:var(--dl-border);overflow:hidden;min-width:140px}
.dl-bb__bar i,.dl-bb__legend i{display:block}
.dl-bb .is-v2{background:var(--dl-accent)}.dl-bb .is-v1{background:var(--dl-amber-2)}.dl-bb .is-no{background:var(--dl-border)}
.dl-bb__legend{display:inline-flex;align-items:center;gap:5px;color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-bb__legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-left:8px}
.dl-bb__funnel{display:flex;flex-direction:column;gap:10px}
.dl-bb__nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center}
.dl-bb__nums span{display:flex;flex-direction:column;gap:2px;color:var(--dl-muted);font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.3px}
.dl-bb__nums b{font-size:calc(19px * var(--dl-font-scale));color:var(--dl-ink-strong);text-transform:none}
.dl-bb__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dl-bb__chips:first-child{margin-top:0}
.dl-bb__chips > span{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--dl-accent-soft);color:var(--dl-accent);font-size:calc(11.5px * var(--dl-font-scale));font-weight:500}
.dl-bb__engines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.dl-bb__eg{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--dl-border-soft);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-bb__eg > b{flex:0 0 118px;color:var(--dl-ink-strong)}
.dl-bb__eg em{font-style:normal;font-weight:400;color:var(--dl-muted)}
.dl-bb__eg > span{min-width:0;line-height:1.55}
.dl-bb__eg > span > span:not(:last-child)::after{content:"·";margin:0 6px;color:var(--dl-muted)}
.dl-bb__link{display:inline-block;margin-top:10px;color:var(--dl-accent);font-weight:600;font-size:calc(12px * var(--dl-font-scale));text-decoration:none}
.dl-bb__todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-bb__todo i{color:var(--dl-muted);margin-right:6px}
.dl-bb__todo .is-qc i{color:var(--dl-amber-2)}
@media (max-width:1100px){.dl-bb__cols{grid-template-columns:minmax(0,1fr)}.dl-bb__engines{grid-template-columns:minmax(0,1fr)}}
.dl-bb .is-iwan{background:var(--dl-accent)}.dl-bb .is-jo{background:var(--dl-violet)}.dl-bb .is-other{background:var(--dl-border)}
.dl-bb__days{display:flex;align-items:flex-end;gap:6px;height:142px}
.dl-bb__day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.dl-bb__day small{color:var(--dl-muted);font-size:calc(10px * var(--dl-font-scale))}
.dl-bb__stack{display:flex;flex-direction:column-reverse;width:100%;border-radius:4px 4px 0 0;overflow:hidden;min-height:2px;background:var(--dl-border-soft)}
.dl-bb__stack i{display:block;width:100%}
.dl-bb__agents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dl-bb .dl-bb__agent{border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--dl-surface);border-top:3px solid var(--dl-accent)}
.dl-bb .dl-bb__agent.is-jo{border-top-color:var(--dl-violet)}
.dl-bb__agent header{display:flex;align-items:center;gap:8px}
.dl-bb__agent header i{flex:0 0 32px;height:32px;border-radius:50%;color:var(--dl-on-dark);font-style:normal;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.dl-bb__agent header span{display:flex;flex-direction:column;min-width:0}
.dl-bb__agent header small,.dl-bb__mix,.dl-bb__share small{color:var(--dl-muted);font-size:calc(11px * var(--dl-font-scale))}
.dl-bb__nums--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-bb__share{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.dl-bb__share .dl-bb__bar{height:10px}
/* Rate List (x-dl::rate-list): daftar hasil kerja + bintang yang langsung tersimpan. */
.dl-rl{display:flex;flex-direction:column;gap:10px}
.dl-rl__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dl-rl__q{flex:0 1 240px;border:1px solid var(--dl-border);border-radius:var(--dl-radius);padding:6px 10px;background:var(--dl-surface)}
.dl-rl__chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dl-rl__chips em{font-style:normal;opacity:.6;margin-left:3px}
.dl-rl__chips .is-active{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-on-dark)}
.dl-rl__sep{width:1px;height:18px;background:var(--dl-border);margin:0 4px}
.dl-rl__count{margin-left:auto;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-rl__wrap{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);background:var(--dl-surface)}
.dl-rl__table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-rl__table th{position:sticky;top:0;background:var(--dl-surface-alt);z-index:1;text-align:left;padding:8px 10px;font-size:calc(10.5px * var(--dl-font-scale));text-transform:uppercase;letter-spacing:.4px;color:var(--dl-muted);white-space:nowrap}
.dl-rl__table td{padding:5px 10px;border-top:1px solid var(--dl-border-soft);white-space:nowrap;vertical-align:middle}
.dl-rl__table tr[hidden]{display:none}
.dl-rl__table tr.is-saved td{background:var(--dl-accent-soft)}
.dl-rl__table small{color:var(--dl-muted)}
.dl-rl__agent{display:inline-block;padding:1px 9px;border-radius:999px;font-size:calc(11px * var(--dl-font-scale));font-weight:600;background:var(--dl-border-soft);color:var(--dl-muted)}
.dl-rl__agent.is-iwan{background:var(--dl-accent);color:var(--dl-on-dark)}.dl-rl__agent.is-jo{background:var(--dl-violet);color:var(--dl-on-dark)}
.dl-rl__stars .dl-rating__text{display:none}
.dl-rl__note{min-width:260px;white-space:normal !important}
.dl-rl__note .dl-input{border:1px solid var(--dl-border);border-radius:var(--dl-radius-sm);padding:4px 8px;background:var(--dl-surface);width:100%}
.dl-rl__none{padding:18px;text-align:center;color:var(--dl-muted)}
/* Halaman Executive Summary: kepala + kisi kartu. */
.dl-sum{display:flex;flex-direction:column;gap:14px;padding:20px 24px;box-sizing:border-box}
@media (max-width:640px){.dl-sum{padding:14px 16px}}
.dl-sum__head b{display:block;font-size:calc(18px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-sum__head small{color:var(--dl-muted)}
.dl-sum__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.dl-sum__tiles .dl-stat{min-width:0}
.dl-sum__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.dl-sum__note{border:1px dashed var(--dl-border);border-radius:var(--dl-radius-lg);padding:12px 14px;background:var(--dl-surface-alt);font-size:calc(13px * var(--dl-font-scale))}
.dl-sum__dist{display:flex;flex-direction:column;gap:7px}
.dl-sum__dist div{display:flex;align-items:center;gap:8px}
.dl-sum__dist span{flex:0 0 34px}.dl-sum__dist b{flex:0 0 30px;text-align:right}
.dl-sum__dist i{flex:1;height:8px;border-radius:4px;background:var(--dl-border-soft);overflow:hidden;display:block}
.dl-sum__dist i u{display:block;height:100%;background:var(--dl-star)}
.dl-sum__weeks{display:flex;align-items:flex-end;gap:5px;height:180px}
.dl-sum__weeks .dl-bb__day{height:100%}
@media (max-width:1100px){.dl-sum__cols{grid-template-columns:minmax(0,1fr)}}

/* Blueprint (CAD canvas) - skill devlib-svg-cad */
.dl-bp{--bp-bg:#121824;--bp-minor:#232e44;--bp-major:#2c3a56;--bp-line:#4da3ff;--bp-dim:#ffb347;--bp-cross:#39ff88;position:relative;background:var(--bp-bg);border-radius:8px;overflow:hidden;touch-action:none}
.dl-bp svg{display:block;cursor:crosshair}
.dl-bp__minor{fill:none;stroke:var(--bp-minor);stroke-width:1}
.dl-bp__major{fill:none;stroke:var(--bp-major);stroke-width:1.5}
.dl-bp__cut{fill:none;stroke:var(--bp-line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dl-bp__crease{fill:none;stroke:var(--bp-cross);stroke-width:1.2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.dl-bp__perf{fill:none;stroke:var(--bp-dim);stroke-width:1.2;stroke-dasharray:1 4;vector-effect:non-scaling-stroke}
.dl-bp__dim{stroke:var(--bp-dim);stroke-width:1}
.dl-bp__arrow{fill:var(--bp-dim)}
.dl-bp__label{fill:var(--bp-dim);font:4px monospace;paint-order:stroke;stroke:var(--bp-bg);stroke-width:1.5px}
.dl-bp__cross line{stroke:var(--bp-cross);stroke-width:1;opacity:.5}
.dl-bp__hud{position:absolute;left:8px;bottom:8px;font:12px monospace;color:var(--bp-cross);background:rgba(18,24,36,.8);padding:3px 8px;border-radius:4px}
.dl-bp__tools{position:absolute;right:8px;top:8px;display:flex;gap:4px}
.dl-bp__tools button{font:12px monospace;color:var(--bp-line);background:rgba(18,24,36,.8);border:1px solid var(--bp-major);border-radius:4px;padding:2px 8px;cursor:pointer}

/* Delivery Track: rute skematis gudang -> pelanggan, truk mengikuti tahap Delivery Order */
.dl-track{--t:var(--dl-ch-teal);display:flex;flex-direction:column;gap:10px;max-width:640px}.dl-track--draft{--t:var(--dl-amber-2)}.dl-track--delivered{--t:var(--dl-success)}.dl-track--cancelled,.dl-track--incident{--t:var(--dl-danger)}.dl-track--confirmed{--t:var(--dl-tangerine)}
.dl-track__head{display:flex;gap:10px;align-items:baseline}.dl-track__head span{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-track svg{width:100%;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:12px}
.dl-track__road{fill:none;stroke:var(--dl-chip);stroke-width:12;stroke-linecap:round}
.dl-track__trail{fill:none;stroke:var(--t);stroke-width:4;stroke-linecap:round}
.dl-track__flow{fill:none;stroke:var(--dl-surface);stroke-width:2;stroke-dasharray:2 14;stroke-linecap:round;opacity:0}
.dl-track.is-moving .dl-track__flow{opacity:.9;animation:dl-track-flow 1s linear infinite}
@keyframes dl-track-flow{to{stroke-dashoffset:-16}}
.dl-track__node circle{fill:var(--dl-surface);stroke:var(--dl-disabled);stroke-width:2}.dl-track__node text{font-size:13px;fill:var(--dl-ink)}
.dl-track--delivered .dl-track__node--to circle{fill:var(--dl-success);stroke:var(--dl-success)}
.dl-track__truck circle{fill:var(--t)}.dl-track__truck path{fill:var(--dl-surface)}
.dl-track--draft .dl-track__truck{opacity:.55}
.dl-track__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.dl-track__steps li{display:flex;flex-direction:column;gap:2px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-track__steps li i{display:block;height:4px;border-radius:2px;background:var(--dl-chip)}
.dl-track__steps li.is-done i,.dl-track__steps li.is-current i{background:var(--t)}
.dl-track__steps li.is-done b,.dl-track__steps li.is-current b{color:var(--dl-ink)}.dl-track__steps small{color:var(--dl-muted)}
@media (prefers-reduced-motion:reduce){.dl-track.is-moving .dl-track__flow{animation:none;opacity:0}}
/* Statement (x-dl::statement) */
.dl-stmt{display:flex;flex-direction:column;gap:8px;max-width:760px}
.dl-stmt__head{display:flex;gap:10px;align-items:baseline}.dl-stmt__head span{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-stmt__table{width:100%;border-collapse:collapse;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:12px;overflow:hidden;font-size:calc(13px * var(--dl-font-scale))}
.dl-stmt__table th{padding:8px 12px;text-align:right;color:var(--dl-muted);font-weight:600;border-bottom:1px solid var(--dl-border)}
.dl-stmt__table td{padding:7px 12px;border-bottom:1px solid var(--dl-border);color:var(--dl-ink)}.dl-stmt__table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-stmt__table td.is-neg{color:var(--dl-danger)}
.dl-stmt__row.is-group td{background:var(--dl-chip);font-weight:700;color:var(--dl-ink-strong);letter-spacing:.02em}
.dl-stmt__row.is-line td:first-child{padding-left:26px}
.dl-stmt__row.is-total td{font-weight:700;color:var(--dl-ink-strong);border-top:1px solid var(--dl-ink)}
.dl-stmt__row.is-net td{font-weight:800;color:var(--dl-ink-strong);background:var(--dl-accent-soft);border-top:2px solid var(--dl-ink);border-bottom:3px double var(--dl-ink)}
.dl-stmt__row.is-note td{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));font-style:italic}
/* GeoClock (x-dl::geo-clock) */
.dl-geo{display:flex;flex-direction:column;gap:10px;max-width:420px}
.dl-geo__head{display:flex;gap:10px;align-items:baseline}.dl-geo__head span,.dl-geo small{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-geo__box{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:12px}
.dl-geo__msg{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-muted)}.dl-geo__msg.is-danger{color:var(--dl-danger)}
.dl-geo__dist b{font-size:calc(28px * var(--dl-font-scale));font-variant-numeric:tabular-nums;color:var(--dl-ink-strong)}.dl-geo__dist span{color:var(--dl-muted)}
.dl-geo__bar{height:8px;border-radius:4px;background:var(--dl-chip);overflow:hidden}.dl-geo__bar i{display:block;height:100%;background:var(--dl-success);transition:width .4s}
.dl-geo__bar.is-out i{background:var(--dl-danger)}
.dl-geo__badge{align-self:flex-start;padding:3px 10px;border-radius:999px;font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-geo__badge.is-in{background:var(--dl-success-soft);color:var(--dl-success)}.dl-geo__badge.is-out{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-geo__note{padding:10px 12px;border-radius:10px;font-size:calc(13px * var(--dl-font-scale));background:var(--dl-accent-soft);color:var(--dl-ink)}
.dl-geo__note.is-success{background:var(--dl-success-soft)}.dl-geo__note.is-warn,.dl-geo__note.is-danger{background:var(--dl-danger-soft)}
.dl-geo__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dl-geo__actions .dl-btn{justify-content:center;padding-block:12px}
.dl-geo__history{display:flex;flex-direction:column;gap:6px}
.dl-geo__row{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:8px;font-size:calc(13px * var(--dl-font-scale))}
.dl-geo__row i{font-style:normal;font-size:calc(11px * var(--dl-font-scale));padding:1px 8px;border-radius:999px;background:var(--dl-chip)}
.dl-geo__row i.is-success{background:var(--dl-success-soft);color:var(--dl-success)}.dl-geo__row i.is-warn,.dl-geo__row i.is-danger{background:var(--dl-danger-soft);color:var(--dl-danger)}
.dl-geo__empty{text-align:center;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale));padding:8px}
/* CodeGenerator (x-dl::code-generator) */
.dl-codegen__title{margin:0 0 10px;font-size:calc(15px * var(--dl-font-scale));color:var(--dl-f-ink)}
.dl-codegen__grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(240px,1fr);gap:20px;align-items:start}
.dl-codegen__form{display:flex;flex-direction:column;gap:10px}
.dl-codegen__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.dl-codegen__opts[hidden],.dl-codegen__canvas [hidden],.dl-codegen__actions [hidden]{display:none}
.dl-codegen__note{color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-codegen__result{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dl-codegen__canvas{display:grid;place-items:center;min-width:220px;min-height:160px;padding:14px;background:#fff;border:1px solid var(--dl-f-line);border-radius:var(--dl-radius);max-width:100%;overflow:auto}
.dl-codegen__err{color:var(--dl-danger);font-size:calc(12px * var(--dl-font-scale));font-weight:600}
.dl-codegen__actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:720px){.dl-codegen__grid{grid-template-columns:1fr}}

/* QcBar: bilah QC cepat (Approved / Need improvement), tiga lapis: QC, UAT officer, UAT supervisor */
.dl-qc{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:14px;z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 12px;background:var(--dl-surface,#fff);border:1px solid var(--dl-border,#d8dde6);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:13px}
.dl-qc__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.dl-qc__chip{padding:1px 8px;border-radius:8px;border:1px dashed var(--dl-border,#d8dde6);color:var(--dl-muted,#6b7280);font-size:12px;white-space:nowrap}
.dl-qc__chip.is-approved{border-style:solid;background:var(--dl-success-soft,#e6f4ea);color:var(--dl-success,#1e7e34)}
.dl-qc__chip.is-improve{border-style:solid;background:var(--dl-warn-soft,#fff4e0);color:var(--dl-warn,#a35a00)}
.dl-qc__state{padding:2px 10px;border-radius:8px;border:1px solid var(--dl-border,#d8dde6);white-space:nowrap}
.dl-qc.is-approved .dl-qc__state{background:var(--dl-success-soft,#e6f4ea);color:var(--dl-success,#1e7e34);border-color:currentColor}
.dl-qc.is-improve .dl-qc__state{background:var(--dl-warn-soft,#fff4e0);color:var(--dl-warn,#a35a00);border-color:currentColor}
.dl-qc__meta{color:var(--dl-muted,#6b7280);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-qc__for{margin:0 0 8px;color:var(--dl-muted,#6b7280)}
.dl-qc textarea{width:100%;box-sizing:border-box}
.dl-qc__err{display:block;min-height:18px;color:var(--dl-danger,#c0392b);font-style:normal;font-size:12px;margin-top:4px}
.dl-qc__rel{padding:2px 10px;border-radius:8px;background:var(--dl-accent,#2563eb);color:var(--dl-on-dark,#fff);white-space:nowrap}

.dl-track__head{align-items:center}.dl-track__head .dl-iconbtn{margin-left:auto}
.dl-track--confirmed .dl-track__truck circle{animation:dl-track-ready 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dl-track-ready{50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.dl-track--confirmed .dl-track__truck circle{animation:none}}/* Feed (umpan blog / berita): 3 kolom, kartu bisa dibuka */
.dl-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.dl-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.dl-feed{grid-template-columns:1fr}}
.dl-feed__post{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.dl-feed__post header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dl-feed__post h3{margin:0;font-size:1.05em;color:var(--dl-ink-strong)}
.dl-feed__meta{display:block}
.dl-feed__body.dl-prose{max-width:none;margin:0;padding:6px 0;font-size:calc(12.5px * var(--dl-font-scale));max-height:12em;overflow:hidden;position:relative;overflow-wrap:anywhere}
.dl-feed__body.dl-prose h1,.dl-feed__body.dl-prose h2{font-size:1.05em;margin:.8em 0 .3em}
.dl-feed__body table{display:block;overflow-x:auto}
.dl-feed__body td,.dl-feed__body th{overflow-wrap:normal;word-break:normal;min-width:5em}
.dl-feed__post:not(.is-open) .dl-feed__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(transparent,var(--dl-surface))}
.dl-feed__post.is-open{grid-column:1/-1;padding:28px clamp(18px,4vw,56px)}
.dl-feed__post.is-open h3{font-size:1.7em;line-height:1.25}
.dl-feed__post.is-open .dl-feed__body.dl-prose{max-height:none;max-width:78ch;font-size:calc(15px * var(--dl-font-scale));line-height:1.75;padding:14px 0}
.dl-feed__post.is-open .dl-feed__body table{max-width:100%}
.dl-feed__more{align-self:flex-start}

.dl-track__truck .dl-track__warn{display:none;fill:none;stroke:var(--dl-surface);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dl-track--incident .dl-track__truck .dl-track__body{display:none}.dl-track--incident .dl-track__truck .dl-track__warn{display:block}
.dl-track--incident .dl-track__flow{display:none}.dl-track--incident .dl-track__node--to{opacity:.6}
.dl-track--incident .dl-track__truck circle{animation:dl-track-blink 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dl-track--incident .dl-track__steps li.is-done i{background:var(--dl-success)}
@keyframes dl-track-blink{50%{transform:scale(1.2);opacity:.65}}
@media (prefers-reduced-motion:reduce){.dl-track--incident .dl-track__truck circle{animation:none}}
.dl-flat{display:contents}

/* Coverage: matriks kelengkapan (baris = kelompok, kolom = jenis dokumen, sel = chip status) */
.dl-cov__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0}
.dl-cov__scroll{overflow-x:auto}
.dl-cov__table{width:100%;border-collapse:collapse;font-size:calc(13px * var(--dl-font-scale))}
.dl-cov__table th{text-align:left;font-size:calc(11px * var(--dl-font-scale));text-transform:uppercase;color:var(--dl-muted);background:var(--dl-surface-alt);padding:8px;white-space:nowrap}
.dl-cov__table td{padding:8px;border-top:1px solid var(--dl-border);vertical-align:middle}
.dl-cov__row:hover{background:var(--dl-hover)}
.dl-cov__row[hidden],.dl-cov__detail[hidden]{display:none}
.dl-cov__arrow{width:32px;padding-right:0}
.dl-cov__toggle{border:none;background:none;color:var(--dl-muted);cursor:pointer;transition:transform .15s}
.dl-cov__row.is-open .dl-cov__toggle{transform:rotate(90deg)}
.dl-cov__title b{color:var(--dl-accent);margin-right:4px}
.dl-cov__sub{color:var(--dl-muted)}
.dl-cov__chip{text-decoration:none}.dl-cov__chip:hover{filter:brightness(.95)}
.dl-cov__none{color:var(--dl-muted)}
.dl-cov__detail td{background:var(--dl-surface-alt)}
.dl-cov__groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.dl-cov__group h4{margin:0 0 4px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-cov__group ol{margin:0;padding-left:18px;color:var(--dl-ink)}
.dl-cov__empty{padding:16px;text-align:center;color:var(--dl-muted)}
.dl-cov__group--wide{grid-column:1/-1}.dl-cov__group--wide ol{columns:2 380px;column-gap:24px}.dl-cov__group--wide li{break-inside:avoid;margin-bottom:3px}
/* Gantt · production scheduling board (multi-day axis, lock window, setup, gates, forecast, down bands, eligibility, impact box) */
.dl-gantt__head.is-days{min-height:54px}
.dl-gantt__head.is-days .dl-gantt__lane span{top:32px}
.dl-gantt__day{position:absolute;top:4px;height:20px;box-sizing:border-box;padding:2px 0 0 6px;border-left:1px solid var(--dl-border);font-style:normal;font-weight:700;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-ink-strong);overflow:hidden;white-space:nowrap}
.dl-gantt__dsep{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--dl-border);z-index:0;pointer-events:none}
.dl-gantt__lock{position:absolute;left:0;top:0;bottom:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--dl-ink) 9%,transparent) 0 4px,transparent 4px 9px)}
.dl-gantt__lockline{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--dl-amber-2);z-index:2;pointer-events:none}
.dl-gantt__lockline span{position:absolute;top:3px;left:4px;white-space:nowrap;font-size:calc(10px * var(--dl-font-scale));font-weight:700;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--dl-amber-2) 26%,var(--dl-surface));border:1px solid var(--dl-amber-2);color:var(--dl-ink-strong)}
.dl-gantt__blk>b,.dl-gantt__blk>small{position:relative;z-index:1}
.dl-gantt__blk.has-gates>b{padding-right:36px}
.dl-gantt__blk.is-locked{cursor:default}
.dl-gantt__lk{font-size:9px;color:var(--dl-muted)}
.dl-gantt__setup{position:absolute;left:0;top:0;bottom:0;z-index:0;box-sizing:border-box;display:flex;align-items:flex-end;padding:0 0 2px 4px;font-size:9.5px;font-weight:700;color:var(--dl-ink);border-right:1px solid var(--dl-gi);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--dl-gi) 40%,transparent) 0 3px,transparent 3px 7px)}
.dl-gantt__gates{position:absolute;top:5px;right:6px;display:flex;gap:3px;z-index:1}
.dl-gantt__blk.is-conflict .dl-gantt__gates{right:50px}
.dl-gantt__gates i{width:8px;height:8px;border-radius:50%;background:var(--dl-green);box-shadow:0 0 0 1px var(--dl-surface)}
.dl-gantt__gates i.is-wait{background:var(--dl-amber-2)}
.dl-gantt__gates i.is-block{background:var(--dl-danger)}
.dl-gantt__blk.has-gate-wait{border-color:var(--dl-amber-2);border-width:2px}
.dl-gantt__blk.has-gate-block{border-color:var(--dl-danger);border-width:2px}
.dl-gantt__fc{position:absolute;top:calc(50% - 1px);height:0;border-top:2px dashed var(--dl-danger);z-index:1;pointer-events:none}
.dl-gantt__fc::after{content:"";position:absolute;right:-1px;top:-7px;height:12px;border-right:2px solid var(--dl-danger)}
.dl-gantt__fc em{position:absolute;left:2px;top:-17px;white-space:nowrap;font-style:normal;font-size:calc(10px * var(--dl-font-scale));font-weight:700;color:var(--dl-danger)}
.dl-gantt__down{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;display:flex;align-items:flex-end;border-left:1px solid var(--dl-danger);border-right:1px solid var(--dl-danger);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--dl-danger) 26%,transparent) 0 5px,color-mix(in srgb,var(--dl-danger) 9%,transparent) 5px 10px)}
.dl-gantt__down span{font-size:calc(9.5px * var(--dl-font-scale));font-weight:700;color:var(--dl-danger);padding:0 4px 2px;white-space:nowrap;overflow:hidden}
.dl-gantt__bn{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--dl-white);background:var(--dl-danger);border-radius:3px;padding:1px 5px}
.dl-gantt__load{display:flex;align-items:center;gap:6px}
.dl-gantt__bar2{width:64px;height:5px;border-radius:3px;background:var(--dl-chip);overflow:hidden}
.dl-gantt__bar2 i{display:block;height:100%;background:var(--dl-accent)}
.dl-gantt__bar2.is-warn i{background:var(--dl-amber-2)}
.dl-gantt__bar2.is-bad i{background:var(--dl-danger)}
.dl-gantt__row.is-elig .dl-gantt__lane{background-color:color-mix(in srgb,var(--dl-green) 9%,transparent)}
.dl-gantt__row.is-elig.is-over .dl-gantt__lane{background-color:color-mix(in srgb,var(--dl-green) 22%,transparent)}
.dl-gantt__row.is-nelig .dl-gantt__lane{background-color:color-mix(in srgb,var(--dl-danger) 7%,transparent);cursor:not-allowed}
.dl-gantt__row.is-nelig.is-over .dl-gantt__lane{background-color:color-mix(in srgb,var(--dl-danger) 18%,transparent)}
.dl-gantt__blk.is-checking{opacity:.6;outline:2px dashed var(--dl-accent);outline-offset:1px;pointer-events:none}
.dl-gantt__blk.is-pending{outline:2px solid var(--dl-accent);outline-offset:1px}
.dl-gantt__draft{font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;padding:3px 10px;border-radius:999px;color:var(--dl-ink-strong);background:color-mix(in srgb,var(--dl-amber-2) 26%,var(--dl-surface));border:1px solid var(--dl-amber-2)}
.dl-gantt__imp{position:absolute;z-index:310;width:280px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);box-shadow:var(--dl-shadow-pop);padding:14px 16px;font-size:calc(12px * var(--dl-font-scale))}
.dl-gantt__imp h3{margin:0 0 2px;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-gantt__imp p{margin:0 0 8px;color:var(--dl-muted)}
.dl-gantt__imp ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.dl-gantt__imp li{display:flex;justify-content:space-between;gap:10px}
.dl-gantt__imp li b{color:var(--dl-green)}
.dl-gantt__imp li.is-warn b{color:var(--dl-amber)}
.dl-gantt__imp li.is-bad b{color:var(--dl-danger)}
.dl-gantt__impf{display:flex;justify-content:flex-end;gap:8px}

/* Timer (stopwatch hh:mm:ss) */
.dl-timer{display:inline-flex;align-items:baseline;gap:10px;color:var(--dl-accent)}
.dl-timer__t{font-size:calc(46px * var(--dl-font-scale));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.1}
.dl-timer__l{font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted)}
.dl-timer--warn{color:var(--dl-amber-2)}.dl-timer--success{color:var(--dl-success)}.dl-timer--danger{color:var(--dl-danger)}.dl-timer--muted{color:var(--dl-muted)}
.dl-gantt__reason{width:100%;box-sizing:border-box;margin:8px 0 0;padding:6px 8px;border:1px solid var(--dl-border);border-radius:6px;font:inherit}

/* Queue board (x-dl::queue-board): Process -> Machine dropdowns and a read-only list of what is queued there */
.dl-queue__bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.dl-queue__count{margin-left:auto;color:var(--dl-muted);font-size:calc(12.5px * var(--dl-font-scale))}
.dl-queue tbody tr[hidden]{display:none}
.dl-queue tr.is-mine td{background:var(--dl-accent-soft)}
.dl-queue__pct{display:inline-block;width:84px;height:8px;border-radius:4px;background:var(--dl-surface-muted);vertical-align:middle;overflow:hidden;margin-right:6px}
.dl-queue__pct i{display:block;height:100%;background:var(--dl-accent)}
.dl-queue__st{display:inline-block;padding:1px 9px;border-radius:10px;font-weight:700;font-size:calc(11.5px * var(--dl-font-scale));background:var(--dl-surface-muted);color:var(--dl-muted)}
.dl-queue__st--running{background:#dcfce7;color:#166534}.dl-queue__st--confirmed{background:var(--dl-accent-soft);color:var(--dl-accent)}.dl-queue__st--draft{background:#fef3c7;color:#92400e}

/* Gantt connected preview: operations that would move are outlined; their old place stays as a dashed ghost */
.dl-gantt__blk.is-previewed{outline:2px dashed var(--dl-accent);outline-offset:-1px;opacity:1;z-index:5}
.dl-gantt__ghost{position:absolute;top:6px;bottom:6px;border:1.5px dashed var(--dl-disabled);border-radius:6px;opacity:.55;pointer-events:none}

/* Gantt hierarchy: every not-confirmed bar in full colour; the open Work Order is outlined (is-mine); confirmed / live bars are a firm locked backdrop (is-live) */
.dl-gantt__blk.is-mine{box-shadow:0 0 0 2px var(--dl-ink-strong)}
.dl-gantt__tag{font-style:normal;font-size:10px;font-weight:700;border:1px solid currentColor;border-radius:4px;padding:0 3px;margin-left:4px}
.dl-gantt__blk.is-live{border:2px solid #475569;background-image:repeating-linear-gradient(135deg,rgba(71,85,105,.12) 0 6px,transparent 6px 12px)}

/* Gantt: an officer drag waiting for PROCESS (queued) */
.dl-gantt__blk.is-queued{outline:2px dotted var(--dl-amber-2);outline-offset:-1px}

/* HelpMap: tree + guide detail with filters (x-dl::help-map) */
.dl-hm{display:flex;flex-direction:column;gap:10px;height:100%;min-height:420px}
.dl-hm__top{display:flex;flex-direction:column;gap:8px}
.dl-hm__search{display:flex;align-items:center;gap:8px;border:1px solid var(--dl-border);border-radius:var(--dl-radius);padding:7px 12px;background:var(--dl-surface);color:var(--dl-muted)}
.dl-hm__search:focus-within{border-color:var(--dl-accent);box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-hm__search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;color:var(--dl-ink)}
.dl-hm kbd{font:inherit;font-size:.8em;border:1px solid var(--dl-border);border-radius:4px;padding:0 5px;background:var(--dl-surface-alt);color:var(--dl-muted)}
.dl-hm__filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dl-hm__sel{display:flex;align-items:center;gap:6px;color:var(--dl-muted);font-size:calc(12px * var(--dl-font-scale))}
.dl-hm__sel select{border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-ink);padding:5px 8px;font:inherit}
.dl-hm__chips{display:inline-flex;gap:4px}
.dl-hm__chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-ink);border-radius:16px;padding:4px 11px;font:inherit;font-size:calc(12px * var(--dl-font-scale));cursor:pointer}
.dl-hm__chip b{font-weight:700;color:var(--dl-muted)}
.dl-hm__chip.is-on{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}
.dl-hm__chip.is-on b{color:inherit}
.dl-hm__sum{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-hm__reset,.dl-hm__btn{border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-ink);border-radius:var(--dl-radius);padding:5px 11px;font:inherit;font-size:calc(12px * var(--dl-font-scale));cursor:pointer}
.dl-hm__btn.is-primary{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}
.dl-hm__main{display:grid;grid-template-columns:minmax(240px,34%) 1fr;gap:12px;flex:1;min-height:0}
.dl-hm__tree,.dl-hm__detail{border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);overflow:auto;padding:8px}
.dl-hm__detail{padding:16px 20px}
.dl-hm__bh,.dl-hm__leaf{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:none;color:var(--dl-ink);font:inherit;padding:6px 8px;border-radius:4px;cursor:pointer}
.dl-hm__bh{font-weight:600}
.dl-hm__bh i{font-size:.7em;color:var(--dl-muted);transition:transform .15s}
.dl-hm__br.is-open>.dl-hm__bh i{transform:rotate(90deg)}
.dl-hm__bh b{margin-left:auto;font-weight:600;color:var(--dl-muted);font-size:.85em}
.dl-hm__bb{margin-left:12px;border-left:1px solid var(--dl-border);padding-left:4px}
.dl-hm__lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-hm__leaf:hover,.dl-hm__bh:hover{background:var(--dl-surface-alt)}
.dl-hm__leaf.is-sel{background:var(--dl-accent-soft,var(--dl-surface-alt));border-left-color:var(--dl-accent);font-weight:600}
.dl-hm__leaf:focus-visible,.dl-hm__bh:focus-visible,.dl-hm__btn:focus-visible,.dl-hm__chip:focus-visible,.dl-hm__reset:focus-visible{outline:2px solid var(--dl-accent);outline-offset:1px}
.dl-hm__dot{width:7px;height:7px;border-radius:50%;background:transparent;flex:none}
.dl-hm__dot.is-warn,.dl-hm__leaf.is-missing .dl-hm__dot{background:var(--dl-amber-2,#d99a00)}
.dl-hm__here{font-style:normal;font-size:.75em;border-radius:10px;padding:1px 7px;background:var(--dl-accent);color:var(--dl-white)}
.dl-hm__type{font-size:.72em;font-weight:700;border-radius:4px;padding:1px 6px;background:var(--dl-surface-alt);color:var(--dl-muted)}
.dl-hm__type.is-input{color:var(--dl-accent)}
.dl-hm__crumb{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-hm__title{margin:2px 0 4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dl-hm__route{font-size:.8em;color:var(--dl-muted)}
.dl-hm__detail h4{margin:16px 0 4px;color:var(--dl-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75em}
.dl-hm__steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.dl-hm__fields{display:grid;grid-template-columns:minmax(120px,28%) 1fr;gap:6px 14px;margin:0}
.dl-hm__fields dt{font-weight:600}.dl-hm__fields dd{margin:0}
.dl-hm__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:12px;border-top:1px solid var(--dl-border)}
.dl-hm__spacer{flex:1}
.dl-hm__here-card{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin-bottom:12px;border:1px solid var(--dl-accent);border-radius:var(--dl-radius);background:var(--dl-surface-alt)}
.dl-hm__empty,.dl-hm__none{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;color:var(--dl-muted)}
.dl-hm__empty.is-warn{border:1px dashed var(--dl-amber-2,#d99a00);border-radius:var(--dl-radius);margin-top:12px}
.dl-hm__keys{display:flex;flex-wrap:wrap;gap:14px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
@media (max-width:760px){.dl-hm__main{grid-template-columns:1fr}}

/* Document status in the middle of the breadcrumb bar (Form WO) */
.dl-cat__status{flex:1;display:flex;justify-content:center;align-items:center;min-width:0}

/* Roomy sheet: large, wrapping rows for reading/reviewing long text (Quotes); caps tab labels */
.dl-sheet.dl-sheet--roomy{--dl-font-scale:1.45}
.dl-sheet.dl-sheet--roomy .dl-sheet__wrap{max-height:72vh}
.dl-sheet.dl-sheet--roomy .dl-sheet__table td{height:46px;padding:8px 12px;white-space:normal;line-height:1.35}
.dl-sheet.dl-sheet--roomy .dl-sheet__table th{padding:8px 12px}
.dl-tabs--caps .dl-tabs__tab{text-transform:uppercase;letter-spacing:.06em}

/* Review Feed (x-dl::review-feed): review = membaca lalu memutuskan. Satu kolom, huruf besar ala blog WordPress, teks HITAM,
   tombol keputusan besar. Tanpa abu-abu: warna teks selalu --dl-ink / --dl-ink-strong (abu-abu hanya --dl-disabled). */
.dl-rfeed{max-width:1080px;margin:0 auto;padding:6px 0 60px;color:var(--dl-ink);font-family:var(--dl-font)}
.dl-rfeed__bar{position:sticky;top:47px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;background:var(--dl-bg);border-bottom:1px solid var(--dl-border-hover)}
.dl-rfeed__q{flex:0 1 160px;min-width:0;font-size:calc(16px * var(--dl-font-scale));padding:6px 12px}
.dl-rfeed__chips{display:flex;flex-wrap:wrap;gap:6px}
.dl-rfeed__chip{border:2px solid var(--dl-ink-strong);background:var(--dl-surface);color:var(--dl-ink-strong);border-radius:999px;padding:4px 11px;font:inherit;font-size:calc(14px * var(--dl-font-scale));font-weight:600;cursor:pointer;line-height:1.2}
.dl-rfeed__chip b{margin-left:4px;font-weight:800}
.dl-rfeed__chip:hover{background:var(--dl-accent-soft)}
.dl-rfeed__chip.is-active{background:var(--dl-navy);border-color:var(--dl-navy);color:var(--dl-white)}
.dl-rfeed__chip:focus-visible,.dl-rfeed__btn:focus-visible{outline:3px solid var(--dl-accent);outline-offset:2px}
.dl-rfeed__count{margin-left:auto;font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-rfeed__list{display:flex;flex-direction:column;gap:28px;margin:22px auto 0;max-width:900px}
.dl-rfeed__post{background:var(--dl-surface);border:1px solid var(--dl-border-hover);border-left:6px solid var(--dl-ink-strong);border-radius:var(--dl-radius-lg);padding:30px clamp(18px,4vw,44px);box-shadow:0 1px 3px var(--dl-overlay-soft)}
.dl-rfeed__post[hidden],.dl-rfeed__none[hidden]{display:none}
.dl-rfeed__post.is-decided{border-left-color:var(--dl-success)}
.dl-rfeed__post.is-saving{opacity:.7;pointer-events:none}
.dl-rfeed__post h2{margin:0;font-size:calc(30px * var(--dl-font-scale));line-height:1.25;font-weight:700;color:var(--dl-ink-strong);overflow-wrap:anywhere}
.dl-rfeed__meta{margin:8px 0 0;font-size:calc(17px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-rfeed__prop{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:calc(17px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
.dl-rfeed__summary,.dl-rfeed__text,.dl-rfeed__note{margin:18px 0 0;font-size:calc(21px * var(--dl-font-scale));line-height:1.75;color:var(--dl-ink);overflow-wrap:anywhere}
.dl-rfeed__text{white-space:pre-line}
.dl-rfeed__note{font-size:calc(19px * var(--dl-font-scale));padding:12px 16px;background:var(--dl-accent-soft);border-radius:var(--dl-radius)}
.dl-rfeed__body.dl-prose{max-width:none;margin:18px 0 0;padding:0;font-size:calc(21px * var(--dl-font-scale));line-height:1.75;color:var(--dl-ink)}
.dl-rfeed__body table{display:block;max-width:100%;overflow-x:auto}
.dl-rfeed__body td,.dl-rfeed__body th{overflow-wrap:normal;word-break:normal;min-width:5em}
.dl-rfeed__body pre{max-width:100%;overflow-x:auto}
.dl-rfeed__more{margin:22px 0 0}
.dl-rfeed__readmore{font-size:calc(19px * var(--dl-font-scale));font-weight:700;color:var(--dl-navy);text-decoration:underline;text-underline-offset:4px}
.dl-rfeed__readmore:hover{color:var(--dl-accent)}
.dl-rfeed__readmore:focus-visible{outline:3px solid var(--dl-accent);outline-offset:2px}
.dl-rfeed__post footer{margin-top:26px;padding-top:20px;border-top:1px solid var(--dl-border-hover)}
.dl-rfeed__choose{display:flex;flex-wrap:wrap;gap:12px}
.dl-rfeed__btn{flex:1 1 150px;min-height:58px;padding:10px 22px;border:3px solid var(--dl-ink-strong);border-radius:var(--dl-radius-lg);background:var(--dl-surface);color:var(--dl-ink-strong);font:inherit;font-size:calc(21px * var(--dl-font-scale));font-weight:800;cursor:pointer}
.dl-rfeed__btn:hover{background:var(--dl-accent-soft)}
.dl-rfeed__btn.is-on{color:var(--dl-white);border-color:transparent}
.dl-rfeed__btn--success.is-on{background:var(--dl-success)}
.dl-rfeed__btn--danger.is-on{background:var(--dl-danger)}
.dl-rfeed__btn--warn.is-on{background:color-mix(in srgb,var(--dl-amber) 78%,var(--dl-ink-strong))}
.dl-rfeed__btn--accent.is-on{background:var(--dl-accent)}
.dl-rfeed__btn--neutral.is-on{background:var(--dl-navy)}
.dl-rfeed__state{margin:14px 0 0;font-size:calc(18px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-rfeed__none{margin:0;padding:24px;text-align:center;font-size:calc(20px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-rfeed__prop .dl-badge{font-size:calc(16px * var(--dl-font-scale));padding:4px 12px}
.dl-rfeed__q{border:2px solid var(--dl-ink-strong);border-radius:var(--dl-radius-lg);background:var(--dl-surface)}
.dl-rfeed__q::placeholder{opacity:1}
/* Placeholder: gelap, bukan abu-abu pucat (user 2026-10-13). */
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--dl-ink) 72%,var(--dl-surface));opacity:1}
/* Wizard dalam modal: x-dl::wizard-options / x-dl::wizard-option (garis kiri berwarna lewat --mp-tc dari modifier jenis). */
.dl-wiz{display:flex;flex-direction:column;gap:10px}
.dl-wiz__opt{display:flex;align-items:center;gap:12px;border:1px solid var(--dl-border);border-left:3px solid var(--mp-tc,var(--dl-border));border-radius:var(--dl-radius);padding:12px 14px;background:var(--dl-surface)}
.dl-wiz__opt.is-off{opacity:.6}
.dl-wiz__emoji{font-size:24px;line-height:1}
.dl-wiz__txt{flex:1;min-width:0}
.dl-wiz__txt b{color:var(--dl-ink-strong)}
.dl-wiz__txt p{margin:3px 0 2px;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-wiz__txt small{font-size:calc(11px * var(--dl-font-scale));color:var(--dl-muted)}
/* x-dl::chips / cols / hint / headline (dulu .mp-chips .mp-grid2 .mp-hint .mp-bigname di mockup-parts.css). */
.dl-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.dl-hint--note{margin:0 0 6px;font-size:calc(11.5px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-headline{font-size:22px;font-weight:800;color:var(--dl-ink-strong);margin:10px 0 2px}
.dl-block{border:1px solid var(--dl-border);border-radius:10px;padding:8px 12px 10px;margin:10px 0 0;min-width:0}
.dl-block legend{font-weight:800;font-size:12.5px;color:var(--dl-ink-strong);padding:0 6px}
.dl-block:disabled{opacity:.55;background:var(--dl-surface-alt)}
.dl-block.is-on{border-color:color-mix(in srgb,var(--dl-accent) 45%,transparent);background:color-mix(in srgb,var(--dl-accent) 5%,var(--dl-surface))}
/* REMARK: strip usulan ML (x-dl::suggestion-strip) dan balok bayangan Preview di Gantt (task.ghost). Teks hitam; latar lavender dari token --dl-violet-soft. */
.dl-seqstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;margin:8px 0;border:1px solid var(--dl-violet-line);border-radius:var(--dl-radius);background:var(--dl-violet-soft);color:var(--dl-ink-strong)}
.dl-seqstrip__main{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 420px;min-width:0}
.dl-seqstrip__title{color:var(--dl-ink-strong)}
.dl-seqstrip__sub{color:var(--dl-ink)}
.dl-seqstrip__chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--dl-ink)}
.dl-seqstrip__chip{padding:2px 8px;border:1px solid var(--dl-violet-line);border-radius:var(--dl-radius-sm);background:var(--dl-surface);font-weight:600;color:var(--dl-ink-strong)}
.dl-seqstrip__learn{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:200px}
.dl-seqstrip__learn .dl-progress{flex:1}
.dl-seqstrip__count{font-weight:700;white-space:nowrap}
.dl-seqstrip__note{flex:1 1 100%;margin:0;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-seqstrip__actions{display:flex;gap:6px;margin-left:auto}
.dl-gantt__blk.is-ghost{background:var(--dl-violet-soft);color:var(--dl-ink-strong);border:2px dashed var(--dl-violet);box-shadow:none;opacity:1}


/* ---- MemberList (x-dl::member-list): daftar peserta ber-batas dengan penghitung dan bar; teks hitam, bar teal ---- */
.dl-members{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.dl-members__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl-members__title{text-transform:uppercase;letter-spacing:.05em;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-members__bar{height:8px;border-radius:4px;background:var(--dl-border-soft);overflow:hidden}
.dl-members__bar i{display:block;height:100%;background:var(--dl-teal)}
.dl-members.is-over .dl-members__bar i{background:var(--dl-danger)}
.dl-members__rows{display:flex;flex-direction:column;gap:10px}
.dl-members__row{display:grid;grid-template-columns:2rem 1fr minmax(120px,170px) auto;gap:10px;align-items:center;border-top:1px solid var(--dl-border-soft);padding-top:10px}
.dl-members__no{font-family:var(--dl-font-mono);color:var(--dl-ink)}
.dl-members__who{color:var(--dl-ink-strong);font-weight:600}
.dl-members__add{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid var(--dl-border-soft);padding-top:10px}
.dl-members select{font:inherit;font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink-strong);background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:6px;padding:5px 8px;min-width:0;width:100%}
@media (max-width:560px){.dl-members__row{grid-template-columns:2rem 1fr auto}.dl-members__role{grid-column:2/4}}

/* Kolom teks di grid (satu isi per baris), hint miring, tombol langsung di baris form, nilai tampil polos. */
.dl-grid__link--text{white-space:pre;font-variant-numeric:normal;color:var(--dl-ink-strong);display:block;min-width:2rem}
.dl-hint--italic{font-style:italic}
.dl-form__row > .dl-btn{align-self:end;justify-self:start}
.dl-display--plain,.dl-display--plain .dl-display{border-bottom:0}
.dl-display--lead .dl-display{font-size:calc(20px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
.dl-media-video{display:block;width:100%;max-width:960px;border:1px solid var(--dl-border);border-radius:var(--dl-radius)}
/* ================= LOGIN CARD (kartu login karyawan baru, cetak) ================= */
.dl-logincard{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-lg);overflow:hidden;max-width:380px}
.dl-logincard__head{background:var(--dl-navy);color:var(--dl-white);padding:12px 16px;font-weight:600;font-size:calc(14px * var(--dl-font-scale))}
.dl-logincard__body{padding:18px;display:flex;flex-direction:column;gap:12px}
.dl-logincard__org{text-align:center;color:var(--dl-ink);font-size:calc(12px * var(--dl-font-scale))}
.dl-logincard small{display:block;color:var(--dl-ink);font-size:calc(10px * var(--dl-font-scale));text-transform:uppercase;font-weight:600}
.dl-logincard b{color:var(--dl-ink-strong);font-size:calc(14px * var(--dl-font-scale))}
.dl-logincard__mono{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:calc(20px * var(--dl-font-scale));font-weight:700;letter-spacing:.04em;color:var(--dl-ink-strong)}
.dl-logincard__note{border-top:1px solid var(--dl-border-soft);padding-top:8px;color:var(--dl-ink);font-size:calc(11px * var(--dl-font-scale))}
.dl-logincard__bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media print{
  body:has(.dl-logincard) *{visibility:hidden}
  body:has(.dl-logincard) .dl-logincard,body:has(.dl-logincard) .dl-logincard *{visibility:visible}
  body:has(.dl-logincard) .dl-logincard{position:fixed;left:0;top:0;border-radius:0;max-width:none;width:100%}
  html:has(.dl-logincard),body:has(.dl-logincard){height:100vh;overflow:hidden;margin:0}
  .dl-logincard__bar,.dl-logincard__note{display:none}
}
/* ================= PHOTO BOX (pas foto + crop) ================= */
.dl-photobox{display:inline-block;--pb-w:120px}
.dl-photobox--sm{--pb-w:90px}.dl-photobox--lg{--pb-w:150px}
.dl-photobox__pic{position:relative;width:var(--pb-w);padding:0;border:1px solid var(--dl-border-hover);border-radius:var(--dl-radius);background:var(--dl-accent-soft);color:var(--dl-ink-strong);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;font:inherit}
.dl-photobox__pic:hover{border-color:var(--dl-accent)}
.dl-photobox__pic img{display:none;width:100%;height:100%;object-fit:cover}
.dl-photobox.has-photo .dl-photobox__pic img{display:block}
.dl-photobox.has-photo .dl-photobox__ini{display:none}
.dl-photobox__ini{font-size:calc(30px * var(--dl-font-scale));font-weight:700}
.dl-photobox__cap{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;text-align:center;font-size:calc(10.5px * var(--dl-font-scale));background:var(--dl-navy);color:var(--dl-white)}
.dl-photobox__stage{display:flex;justify-content:center;padding:12px;background:var(--dl-surface-alt)}
.dl-photobox__frame{position:relative;line-height:0}
.dl-photobox__cv{width:240px;height:auto;border:1px solid var(--dl-border-hover);background:var(--dl-surface-muted);touch-action:none;cursor:grab}
.dl-photobox__cv:active{cursor:grabbing}
.dl-photobox__grid{position:absolute;inset:1px;pointer-events:none;background:linear-gradient(90deg,transparent 33%,var(--dl-border-hover) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,var(--dl-border-hover) 66% calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(0deg,transparent 33%,var(--dl-border-hover) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,var(--dl-border-hover) 66% calc(66% + 1px),transparent calc(66% + 1px))}
.dl-photobox__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;line-height:1.4;color:var(--dl-ink);font-size:calc(12px * var(--dl-font-scale))}
.dl-photobox__zoom{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px;color:var(--dl-ink);font-size:calc(12px * var(--dl-font-scale))}
.dl-photobox__hint{margin:0;padding:0 8px;text-align:center;color:var(--dl-ink);font-size:calc(11px * var(--dl-font-scale))}
.dl-photobox__err{margin:4px 0;text-align:center;color:var(--dl-danger);font-size:calc(11.5px * var(--dl-font-scale))}
.dl-photobox__cap--change{display:none}
.dl-photobox.has-photo .dl-photobox__cap--add{display:none}
.dl-photobox.has-photo .dl-photobox__cap--change{display:block}
/* ================= PROFILE BANNER (foto + identitas + chip berkelompok + KPI) ================= */
.dl-pbanner{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:12px;padding:6px 0}
.dl-pbanner__top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.dl-pbanner__photo{flex:none}
.dl-pbanner__id{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:7px}
.dl-pbanner__name{font-size:calc(22px * var(--dl-font-scale));font-weight:700;line-height:1.2;color:var(--dl-ink-strong)}
.dl-pbanner__sub{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-pbanner__grp{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dl-pbanner__gl{flex:none;width:84px;font-size:calc(10px * var(--dl-font-scale));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dl-ink)}
.dl-pbanner__chips{display:flex;gap:6px;flex-wrap:wrap}
.dl-pbanner .dl-badge{font-size:calc(12px * var(--dl-font-scale));padding:4px 11px}
.dl-pbanner__prog{width:170px}
.dl-pbanner__prog .dl-progress{margin:0}
.dl-pbanner__progtxt{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-ink)}
.dl-pbanner__kpis .dl-grid__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.dl-pbanner__notice > .dl-alert{margin-bottom:0}
/* ================= SWITCHER (dropdown menukar panel) ================= */
.dl-switcher__bar{margin-bottom:10px}
.dl-switcher__bar label{display:flex;flex-direction:column;gap:3px;max-width:340px;font-size:calc(11px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink)}
.dl-switcher__bar select{font:inherit;padding:6px 8px;border:1px solid var(--dl-border-hover);border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-ink-strong)}
.dl-switcher__case[hidden]{display:none}

/* Form siklus ketat (:strict, 2026-10-21): cap status pojok kanan atas, Edit/Undo/Save bergantian, isian terkunci berwarna dan bergaya (angka tebal, tanggal miring, terbilang bergaris bawah). */
.dl-form__stamps{display:inline-flex;gap:6px;margin-left:10px;flex-wrap:wrap}
.dl-form__stamp{display:inline-block;padding:3px 12px;border:1.5px solid;border-radius:6px;font-size:calc(14px * var(--dl-font-scale));font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.dl-form__stamp--success{color:var(--dl-success);border-color:var(--dl-success);background:color-mix(in srgb,var(--dl-success) 10%,transparent)}
.dl-form__stamp--warn{color:var(--dl-amber);border-color:var(--dl-amber-2);background:color-mix(in srgb,var(--dl-amber-2) 14%,transparent)}
.dl-form__stamp--danger{color:var(--dl-danger);border-color:var(--dl-danger);background:var(--dl-danger-soft)}
.dl-form__stamp--muted,.dl-form__stamp--neutral{color:var(--dl-muted);border-color:var(--dl-disabled);background:var(--dl-surface-muted)}
.dl-form--strict:not(.is-editing):not(.is-dirty) .is-edit-only{display:none}
.dl-form--strict.is-editing .is-view-only{display:none}
.dl-form--strict.is-view .dl-field--money .dl-input,.dl-form--strict.is-view .dl-field--number .dl-input,.dl-form--strict.is-view .dl-field--decimal .dl-input,.dl-form--strict.is-view .dl-field--number-words .dl-input{font-weight:700;font-size:calc(15px * var(--dl-font-scale))}
.dl-form--strict.is-view .dl-field--date .dl-input,.dl-form--strict.is-view .dl-field--date-time .dl-input,.dl-form--strict.is-view .dl-field--time .dl-input{font-style:italic}
.dl-form--strict.is-view .dl-words__text{text-decoration:underline;text-underline-offset:3px}
.dl-form--tone-success.is-view .dl-input,.dl-form--tone-success.is-view .dl-dd__btn,.dl-form--tone-success.is-view .dl-words__text{color:var(--dl-success)!important;-webkit-text-fill-color:var(--dl-success)}
.dl-form--tone-danger.is-view .dl-input,.dl-form--tone-danger.is-view .dl-dd__btn,.dl-form--tone-danger.is-view .dl-words__text{color:var(--dl-danger)!important;-webkit-text-fill-color:var(--dl-danger)}
.dl-form--tone-muted.is-view .dl-input,.dl-form--tone-muted.is-view .dl-dd__btn,.dl-form--tone-muted.is-view .dl-words__text{color:var(--dl-disabled)!important;-webkit-text-fill-color:var(--dl-disabled)}
.dl-wizard__done{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;text-align:center}
.dl-wizard__done > i{font-size:calc(40px * var(--dl-font-scale));color:var(--dl-success)}
.dl-wizard__donetitle{font-size:calc(20px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
.dl-wizard__done p{margin:0 0 10px;color:var(--dl-muted)}
.dl-wizard__done[hidden],.dl-wizard [hidden]{display:none}
/* Export grid: tombol membuka dua pilihan format (CSV, XLSX) */
.dl-grid__export{position:relative;display:inline-flex}
.dl-grid__export [data-g-export]::after{content:"\25BE";margin-left:6px;font-size:.85em}
.dl-grid__expmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;min-width:110px;padding:4px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.dl-grid__expmenu[hidden]{display:none}
.dl-grid__expmenu button{padding:7px 12px;border:0;background:none;color:var(--dl-ink);font:inherit;text-align:left;border-radius:6px;cursor:pointer}
.dl-grid__expmenu button:hover{background:var(--dl-accent-soft)}
/* Nested Grid: sel yang membuka grid lain (kolom 'url' + 'ref') */
.dl-grid__link--ref{display:inline-block;color:var(--dl-accent);text-decoration:underline;text-underline-offset:2px}
.dl-grid__link--ref::after{content:"\f08e";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:5px;font-size:.7em;opacity:.7}
.dl-grid__link--ref:hover{color:var(--dl-accent-2)}

/* ---- Phone Shell (smartphone potret): bilah atas, isi penuh, bilah tab bawah, lembar Menu; sasaran sentuh >= 44px, isian 16px, tepi aman ---- */
.dl-phone{--dl-phone-pad-b:calc(16px + env(safe-area-inset-bottom));position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--dl-bg);color:var(--dl-ink);font-family:var(--dl-font)}
.dl-phone--contained{height:640px;max-height:80vh}
.dl-phone input,.dl-phone select,.dl-phone textarea{font-size:16px}
/* ikon hamburger MELAYANG: satu-satunya kontrol permanen, di pojok kiri atas; agak transparan sampai disentuh */
/* tombol hamburger MELAYANG: kotak membulat, satu-satunya kontrol di keadaan A; menghilang saat bilah (B / C) tampil */
.dl-phone__burger{position:fixed;z-index:50;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:13px;background:var(--dl-navy);color:var(--dl-side-ink);font-size:20px;opacity:.9;box-shadow:0 2px 10px var(--dl-overlay-soft);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dl-phone--contained .dl-phone__burger{position:absolute}
.dl-phone[data-state="B"] .dl-phone__burger,.dl-phone[data-state="C"] .dl-phone__burger{display:none}
.dl-phone__burger:active{opacity:1}
/* bilah di atas selebar layar (B = aksi layar, C = lima menu utama): menggantikan tombol; item Menu paling kanan, dipisah garis tipis */
.dl-phone__bar{position:absolute;left:0;right:0;top:0;z-index:45;padding-top:env(safe-area-inset-top);background:var(--dl-surface);border-bottom:1px solid var(--dl-border);box-shadow:0 6px 18px var(--dl-overlay-soft);animation:dl-phone-drop .2s ease-out}
.dl-phone__bar[hidden],.dl-phone__items[hidden]{display:none}
.dl-phone__items{display:flex;min-height:62px}
.dl-phone__q{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border:0;background:none;color:var(--dl-ink);font:inherit;font-size:calc(11.5px * var(--dl-font-scale));font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dl-phone__q i{font-size:19px}
.dl-phone__q span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-phone__q--menu{border-left:1px solid var(--dl-border)}
.dl-phone__q.is-active,.dl-phone__q.is-on,.dl-phone__q[aria-expanded="true"]{color:var(--dl-accent)}
.dl-phone__q.is-active i{background:var(--dl-accent-soft);border-radius:12px;padding:3px 12px;box-sizing:content-box}
.dl-phone__q.is-primary{background:var(--dl-accent);color:var(--dl-side-ink)}
.dl-phone__q:disabled{color:var(--dl-disabled)}
.dl-phone__q:active:not(:disabled){background:var(--dl-hover)}
.dl-phone__q.is-primary:active:not(:disabled){background:var(--dl-accent-2)}
.dl-phone__q:focus-visible,.dl-phone__burger:focus-visible,.dl-phone__row:focus-visible,.dl-phone__back:focus-visible{outline:2px solid var(--dl-accent);outline-offset:-3px}
.dl-phone__burger.has-dirty::after,.dl-phone__q--menu.has-dirty::after{content:"";position:absolute;top:5px;right:6px;width:11px;height:11px;border-radius:50%;background:var(--dl-yellow);border:2px solid var(--dl-surface)}
.dl-phone__burger.has-dirty::after{top:-4px;right:-4px}
/* daftar semua modul: terbuka di bawah bilah, latar sedikit digelapkan */
.dl-phone__drop{position:absolute;left:0;right:0;top:calc(62px + env(safe-area-inset-top));bottom:0;z-index:44;display:flex;flex-direction:column}
.dl-phone__drop[hidden]{display:none}
.dl-phone__list{flex:0 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:var(--dl-surface);box-shadow:0 8px 20px var(--dl-overlay-soft);animation:dl-phone-drop .2s ease-out}
.dl-phone__ph{margin:12px 2px 6px;font-size:calc(12px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted)}
.dl-phone__seg{display:flex;gap:6px}
.dl-phone__opt{flex:1 1 0;min-width:0;min-height:44px;padding:6px 8px;border:1px solid var(--dl-border);border-radius:10px;background:var(--dl-surface);color:var(--dl-ink);font:inherit;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dl-phone__opt.is-on{border-color:var(--dl-accent);background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-phone__sel{width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--dl-border);border-radius:10px;background:var(--dl-surface);color:var(--dl-ink);font:inherit;font-size:16px}
.dl-phone__chk{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px}
.dl-phone__chk input{width:20px;height:20px}
.dl-phone__apply{width:100%;min-height:48px;margin-top:14px;border:0;border-radius:12px;background:var(--dl-accent);color:var(--dl-side-ink);font:inherit;font-weight:700;cursor:pointer}
.dl-phone__apply:active{background:var(--dl-accent-2)}
.dl-phone__veil{flex:1 0 28px;background:var(--dl-overlay)}
@keyframes dl-phone-drop{from{opacity:.2;transform:translateY(-100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dl-phone__bar,.dl-phone__list{animation:none}}
.dl-phone__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* baris judul di isi halaman (bukan bilah): ruang kiri untuk ikon melayang */
.dl-phone__head{flex:none;display:flex;align-items:center;gap:4px;min-height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 calc(env(safe-area-inset-left) + 62px);background:var(--dl-surface);border-bottom:1px solid var(--dl-border)}
.dl-phone__back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--dl-ink-strong);text-decoration:none;font-size:18px;border-radius:50%}
.dl-phone__back:active{background:var(--dl-hover)}
.dl-phone__title{flex:1;min-width:0;margin:0 8px 0 4px;font-size:calc(18px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-phone__acts{flex:none;display:flex;align-items:center;gap:4px}
.dl-phone__main{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.dl-phone__main--frame{padding:0 0 env(safe-area-inset-bottom);overflow:hidden}
.dl-phone__body{padding:12px max(12px,env(safe-area-inset-right)) var(--dl-phone-pad-b) max(12px,env(safe-area-inset-left))}
.dl-phone__frame{display:block;width:100%;height:100%;border:0;background:var(--dl-surface)}
.dl-phone__scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dl-phone__body table{max-width:100%}
/* deret menu utama (keadaan C): muncul di bawah baris judul, menimpa isi; tertutup sendiri */
.dl-phone__who{display:flex;flex-direction:column;gap:2px;padding:2px 4px 10px;font-size:calc(15px * var(--dl-font-scale))}
.dl-phone__who span{font-size:calc(13px * var(--dl-font-scale));font-weight:600}
/* baris jaringan x-dl::net-line di lembar Menu HP: latar terang, jadi teks dan warna status memakai token gelap */
.dl-phone__who .dl-netline{font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted);--dl-net-bad:var(--dl-danger);--dl-net-warn:var(--dl-net-warn-ink)}
.dl-phone__who .dl-netline span{font-size:inherit;font-weight:inherit}
.dl-phone__who .dl-netline [data-nl]{font-weight:inherit}
.dl-phone__who--out{position:relative;padding-right:58px}
.dl-phone__who--out form{position:absolute;top:0;right:2px;margin:0}
.dl-phone__poweroff{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--dl-danger);border-radius:12px;background:transparent;color:var(--dl-danger);font-size:calc(18px * var(--dl-font-scale));cursor:pointer;-webkit-tap-highlight-color:transparent}
.dl-phone__poweroff:active{background:var(--dl-danger);color:var(--dl-surface)}
.dl-phone__who .dl-netline[data-state="server"] [data-nl="server"],.dl-phone__who .dl-netline[data-state="offline"] [data-nl="client"],.dl-phone__who .dl-netline__st{font-weight:700}
.dl-phone__grp{margin:0 0 6px}
.dl-phone__gh{margin:10px 4px 2px;font-size:calc(13px * var(--dl-font-scale));font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--dl-ink-strong)}
.dl-phone__row{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 8px;border-radius:10px;color:var(--dl-ink);text-decoration:none;font-size:calc(16px * var(--dl-font-scale))}
.dl-phone__row:active{background:var(--dl-hover)}
button.dl-phone__row{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
button.dl-phone__row:disabled{color:var(--dl-disabled)}
.dl-phone__row i{flex:none;width:22px;text-align:center;color:var(--dl-accent)}
.dl-phone__row span{flex:1;min-width:0}
.dl-phone__row em{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--dl-badge);color:var(--dl-side-ink)}
.dl-phone__dev,.dl-phone__out{display:grid;gap:10px;margin-top:14px}
.dl-phone .dl-btn{min-height:44px}
/* Kartu isi layar HP (daftar jadi kartu, satu barang per kartu, dst.) */
.dl-phone-card{background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);padding:14px;margin:0 0 12px}
/* Pilihan tampilan perangkat (x-dl::device-pick): dua radio besar */
.dl-devpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0;min-width:0}
.dl-devpick__l{grid-column:1/-1;padding:0 0 2px;font-size:calc(13px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
.dl-devpick__o{position:relative;display:flex;min-width:0}
.dl-devpick__o input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.dl-devpick__t{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:6px 8px;border:1.5px solid var(--dl-border);border-radius:var(--dl-radius-md);background:var(--dl-surface);color:var(--dl-ink);font-size:calc(13px * var(--dl-font-scale));font-weight:700;text-align:center}
.dl-devpick__o input:checked+.dl-devpick__t{border-color:var(--dl-accent);background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-devpick__o input:focus-visible+.dl-devpick__t{outline:2px solid var(--dl-accent);outline-offset:2px}
.dl-loginbox__device{margin:4px 0 10px}

/* Phone Offer: popup tawaran tampilan HP, hanya terlihat pada layar yang memenuhi aturan phone (Device::PHONE_MEDIA: lebar < 600, atau HP landscape: tinggi < 480 + sentuh + lebar < 1000); tidak pernah di layar lebar / tablet */
.dl-phoneoffer{display:none}
@media (max-width: 599.98px), (max-height: 479.98px) and (max-width: 999.98px) and (pointer: coarse){
  .dl-phoneoffer{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--dl-overlay)}
  .dl-phoneoffer__box{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:22px 20px 14px;border-radius:16px;background:var(--dl-surface);color:var(--dl-ink);text-align:center;box-shadow:0 12px 36px var(--dl-overlay-soft)}
  .dl-phoneoffer__ic{font-size:34px;color:var(--dl-accent)}
  .dl-phoneoffer__t{margin:0 0 4px;font-size:calc(17px * var(--dl-font-scale));font-weight:700;line-height:1.35}
  .dl-phoneoffer__go{min-height:52px;border:0;border-radius:var(--dl-radius-md);background:var(--dl-accent);color:var(--dl-side-ink);font:inherit;font-size:calc(16px * var(--dl-font-scale));font-weight:700;cursor:pointer;width:100%}
  .dl-phoneoffer__stay{min-height:44px;border:0;background:none;color:var(--dl-accent);font:inherit;font-size:calc(14px * var(--dl-font-scale));font-weight:600;cursor:pointer;width:100%}
}

/* Phone Tile / Tiles / Link / Bar / Login: bagian layar HP yang generik */
.dl-ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
.dl-ptile{display:flex;flex-direction:column;gap:4px;min-height:120px;padding:14px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);color:var(--dl-ink);text-decoration:none}
.dl-ptile i{font-size:20px;color:var(--dl-accent)}
.dl-ptile strong{font-size:calc(30px * var(--dl-font-scale));line-height:1.1;color:var(--dl-ink-strong)}
.dl-ptile span{font-size:calc(14px * var(--dl-font-scale));font-weight:600}
.dl-plink{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px;margin:0 0 12px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);color:var(--dl-ink);text-decoration:none;font-size:calc(17px * var(--dl-font-scale));font-weight:600}
.dl-plink i{flex:none;width:28px;text-align:center;font-size:22px;color:var(--dl-accent)}
.dl-plink span{flex:1;min-width:0}
.dl-plink em{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--dl-badge);color:var(--dl-side-ink)}
.dl-ptile:active,.dl-plink:active{background:var(--dl-hover)}
.dl-ptile--danger,.dl-plink--danger{border-color:var(--dl-danger);background:var(--dl-danger-soft)}
.dl-ptile--warn,.dl-plink--warn{border-color:var(--dl-amber);background:color-mix(in srgb,var(--dl-amber) 12%,var(--dl-surface))}
.dl-ptile--info,.dl-plink--info{border-color:var(--dl-info-line);background:var(--dl-info-soft)}
/* Bilah tombol berurutan di dalam isi (Sebelumnya / Berikutnya): ikut alur halaman, TIDAK menempel di bawah layar */
.dl-pbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin:12px 0 0}
.dl-pbar .dl-btn,.dl-pbar button,.dl-pbar a{min-height:52px;white-space:nowrap}
/* Login HP: satu kolom mengalir 320 sampai ~440 px, tanpa titik patah */
.dl-plogin{box-sizing:border-box;height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;max-width:440px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--dl-bg);color:var(--dl-ink);font-family:var(--dl-font)}
.dl-plogin--contained{height:640px;max-height:80vh}
.dl-plogin .dl-loginbox{width:100%;height:auto;flex:none}
.dl-plogin .dl-input{font-size:16px;min-height:52px}
.dl-plogin .dl-btn{min-height:54px;font-size:17px}
.dl-plogin .dl-loginbox label,.dl-plogin .dl-field__label{font-size:15px}
.dl-plogin .dl-loginbox__sub{font-size:16px}
.dl-plogin .dl-loginbox__forgot{min-height:44px;display:inline-flex;align-items:center;font-size:15px}
.dl-plogin__desk{display:flex;justify-content:center;margin:0}
.dl-plogin__desk button{min-height:44px;padding:0 16px;border:0;background:none;color:var(--dl-accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer}

/* Form: pembungkus tombol panel; di desktop tidak mengubah apa pun (display:contents) */
.dl-form__acts{display:contents}

/* x-dl::screen-info: diagnostik layar (satu kolom di layar sempit, dua kolom mulai 720px); kontrol >= 16px */
.dl-sinfo{box-sizing:border-box;max-width:920px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));color:var(--dl-ink);font-family:var(--dl-font)}
.dl-sinfo__t{margin:0 0 6px;font-size:calc(22px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-sinfo__note{margin:0 0 14px;font-size:calc(16px * var(--dl-font-scale));line-height:1.45}
.dl-sinfo__sum{padding:14px 16px;border:2px solid var(--dl-accent);border-radius:var(--dl-radius-md);background:var(--dl-accent-soft);color:var(--dl-ink-strong);font-size:calc(22px * var(--dl-font-scale));font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.dl-sinfo__copy{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin:12px 0 0;border:0;border-radius:var(--dl-radius-md);background:var(--dl-accent);color:var(--dl-side-ink);font:inherit;font-size:calc(18px * var(--dl-font-scale));font-weight:700;cursor:pointer}
.dl-sinfo__copy:focus-visible{outline:3px solid var(--dl-ink-strong);outline-offset:2px}
.dl-sinfo__st{min-height:1.4em;margin:8px 0 0;font-size:calc(16px * var(--dl-font-scale));font-weight:600;color:var(--dl-success)}
.dl-sinfo__st.is-bad{color:var(--dl-danger)}
.dl-sinfo__groups{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:8px}
@media (min-width:720px){.dl-sinfo__groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dl-sinfo__g{padding:12px 14px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);background:var(--dl-surface)}
.dl-sinfo__g h3{margin:0 0 8px;font-size:calc(13px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted)}
.dl-sinfo__g dl{margin:0}
.dl-sinfo__r{padding:6px 0;border-top:1px solid var(--dl-border)}
.dl-sinfo__r:first-child{border-top:0}
.dl-sinfo__r dt{font-size:calc(13px * var(--dl-font-scale));color:var(--dl-muted)}
.dl-sinfo__r dd{margin:2px 0 0;font-size:calc(16px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink);overflow-wrap:anywhere}
.dl-sinfo__txt{margin-top:12px}
.dl-sinfo__txt summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:calc(16px * var(--dl-font-scale));font-weight:600}
.dl-sinfo__txt textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-sm);background:var(--dl-surface);color:var(--dl-ink);font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:max(16px,1em);line-height:1.4}

/* ==== Antrean pilih (x-dl::pick-queue): chip filter, bilah aksi di ATAS daftar, baris dengan kesiapan; HP = kartu, tanpa kontrol di bawah layar ==== */
.dl-pq{display:flex;flex-direction:column;gap:10px;color:var(--dl-ink)}
.dl-pq__title{margin:0;font-size:calc(18px * var(--dl-font-scale));font-weight:800;color:var(--dl-ink-strong)}
.dl-pq__chips{display:flex;flex-wrap:wrap;gap:8px}
.dl-pq__chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--dl-border);background:var(--dl-surface);color:var(--dl-ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:calc(13px * var(--dl-font-scale));font-weight:600;cursor:pointer}
.dl-pq__chip b{background:var(--dl-chip);border-radius:999px;padding:0 8px;font-size:calc(12px * var(--dl-font-scale))}
.dl-pq__chip:hover{border-color:var(--dl-border-hover)}
.dl-pq__chip.is-active{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-white)}
.dl-pq__chip.is-active b{background:rgba(255,255,255,.22);color:var(--dl-white)}
.dl-pq__bar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;background:var(--dl-accent-soft);border:1px solid var(--dl-accent);border-radius:var(--dl-radius-md);font-size:calc(13px * var(--dl-font-scale))}
.dl-pq__bar[hidden]{display:none}
.dl-pq__sum{font-weight:700}
.dl-pq__note{flex:1;min-width:0}
.dl-pq__note:empty{display:none}
.dl-pq__note.is-bad{color:var(--dl-danger);font-weight:600}
.dl-pq__go{padding:8px 16px;font-size:calc(13px * var(--dl-font-scale));margin-left:auto}
.dl-pq__go:disabled{background:var(--dl-chip);color:var(--dl-disabled);cursor:not-allowed}
.dl-pq__head,.dl-pq__row{display:grid;grid-template-columns:36px minmax(150px,1.3fr) minmax(220px,2fr) minmax(110px,.8fr);align-items:center;gap:14px}
.dl-pq__head{padding:0 14px;font-size:calc(11.5px * var(--dl-font-scale));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dl-muted)}
.dl-pq__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dl-pq__row{padding:12px 14px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);cursor:pointer}
.dl-pq__row[hidden]{display:none}
.dl-pq__row:hover{border-color:var(--dl-border-hover);background:var(--dl-surface-alt)}
.dl-pq__row.is-picked{border-color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-pq__row.is-off{cursor:default;opacity:.62}
.dl-pq__row.is-off:hover{border-color:var(--dl-border);background:var(--dl-surface)}
.dl-pq__pick{position:relative;display:inline-flex;width:22px;height:22px}
.dl-pq__pick input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.dl-pq__pick input:disabled{cursor:not-allowed}
.dl-pq__pick i{width:22px;height:22px;border:2px solid var(--dl-border-hover);border-radius:6px;background:var(--dl-surface);display:grid;place-items:center}
.dl-pq__pick input:checked + i{background:var(--dl-accent);border-color:var(--dl-accent)}
.dl-pq__pick input:checked + i::after{content:"";width:5px;height:10px;border:solid var(--dl-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.dl-pq__pick input:disabled + i{border-style:dashed;background:transparent}
.dl-pq__pick input:focus-visible + i{box-shadow:0 0 0 3px var(--dl-accent-ring)}
.dl-pq__main{display:flex;flex-direction:column;min-width:0}
.dl-pq__main b{font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink-strong)}
.dl-pq__main span{font-size:calc(12.5px * var(--dl-font-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-pq__qty{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.dl-pq__qty .dl-progress{width:100%;max-width:260px}
.dl-pq__nums{font-size:calc(12.5px * var(--dl-font-scale));font-weight:600}
.dl-pq__nums small{font-weight:400;font-size:inherit}
.dl-pq__due{display:flex;flex-direction:column;font-size:calc(13px * var(--dl-font-scale))}
.dl-pq__due small{font-size:calc(12px * var(--dl-font-scale))}
.dl-pq__due.is-late small{color:var(--dl-danger);font-weight:700}
.dl-pq__empty{margin:0;padding:24px;text-align:center;border:1px dashed var(--dl-border-hover);border-radius:var(--dl-radius-md)}
.dl-pq__empty[hidden]{display:none}
@media (max-width:599px),(max-height:479px) and (pointer:coarse) and (max-width:999px){
  .dl-pq__head{display:none}
  .dl-pq__row{grid-template-columns:30px 1fr auto;grid-template-areas:"pick main due" "qty qty qty";gap:8px 10px;padding:12px}
  .dl-pq__pick{grid-area:pick;align-self:start;width:26px;height:26px}
  .dl-pq__pick i{width:26px;height:26px}
  .dl-pq__main{grid-area:main}
  .dl-pq__main span{white-space:normal}
  .dl-pq__qty{grid-area:qty;padding-left:40px}
  .dl-pq__qty .dl-progress{max-width:none}
  .dl-pq__due{grid-area:due;text-align:right}
  .dl-pq__chip{padding:8px 14px;min-height:40px}
  .dl-pq__sum,.dl-pq__note{flex:1 0 100%}
  .dl-pq__go{flex:1 0 100%;min-height:44px;margin-left:0}
}

/* ==== Multi view: aturan per OS pada view phone (skills/devlib/views.md). Semua dibatasi body.dl-on-phone (Device::bodyClass); view desktop tidak mendapat satu pun aturan ini.
   iOS (dl-os-ios): isi sampai tepi layar (viewport-fit=cover) lalu env(safe-area-inset-*) menjaga notch / Dynamic Island / home indicator; teks tidak diperbesar otomatis saat landscape; isian >= 16px (iOS zoom bila lebih kecil).
   Android (dl-os-android): Chrome menaruh viewport di atas bilah navigasi sistem (3 tombol / gestur), jadi jarak bawah cukup env(safe-area-inset-bottom) (0 di browser, terisi pada PWA edge-to-edge); overscroll-behavior-y:contain mematikan pull-to-refresh Chrome agar geser-turun tidak membuang form yang belum disimpan. */
html:has(body.dl-on-phone){-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}
body.dl-on-phone:not(:has(.dl-phone,.dl-plogin)){padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.dl-on-phone :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea){font-size:max(16px,1em)}
body.dl-on-phone :is(.dl-btn,summary){min-height:44px}
/* Layar sentuh yang bukan phone (tablet, laptop sentuh): opt-in lewat class dl-touch di <body>; hanya memperbesar sasaran ketuk, tata letak desktop tidak berubah. */
@media (pointer:coarse){body.dl-touch :is(.dl-btn,summary){min-height:44px}}
/* ==== /Multi view */

/* Galeri gambar acuan (x-dl::image-gallery): kisi gambar kecil + keterangan */
.dl-gallery{margin:0 0 16px}
.dl-gallery__head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:8px;font-size:calc(13px * var(--dl-font-scale))}
.dl-gallery__head span{color:var(--dl-muted)}
.dl-gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--dl-gal-min,150px),1fr));gap:12px}
.dl-gallery__item{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--dl-border);border-radius:var(--dl-radius);background:var(--dl-surface);color:var(--dl-ink);text-decoration:none;font-size:calc(12.5px * var(--dl-font-scale))}
.dl-gallery__item img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--dl-border)}
.dl-gallery__item:hover,.dl-gallery__item:focus-visible{border-color:var(--dl-accent)}
/* ==== x-dl::floor-plan: denah dengan titik objek (persegi ruang atau gambar latar; titik bulat menurut tone, bernomor). Opt-in; hanya token. ==== */
.dl-floorplan{display:block;max-width:920px}
.dl-floorplan__summary,.dl-floorplan__detail{margin:12px 0}
.dl-floorplan__plan{position:relative;width:100%;box-sizing:border-box;overflow:hidden;border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);background:var(--dl-surface)}
.dl-floorplan__img{position:absolute;inset:0;width:100%;height:100%}
.dl-floorplan__room{position:absolute;box-sizing:border-box;padding:2px 5px;overflow:hidden;border:1.5px solid var(--dl-border-hover);border-radius:4px;background:color-mix(in srgb,var(--dl-accent) 7%,var(--dl-surface));color:var(--dl-ink);font-size:calc(11px * var(--dl-font-scale));line-height:1.2}
.dl-floorplan__pin{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;box-sizing:border-box;border:2px solid var(--dl-surface);border-radius:50%;color:var(--dl-white);font-family:inherit;font-size:calc(10px * var(--dl-font-scale));font-weight:700;line-height:1;text-decoration:none;box-shadow:0 1px 4px var(--dl-overlay-soft);cursor:pointer}
.dl-floorplan__pin::after{content:"";position:absolute;inset:-4px}
.dl-floorplan__pin:is(:hover,:focus-visible){transform:scale(1.2);outline:none}
.dl-floorplan__pin:focus-visible{box-shadow:0 0 0 3px var(--dl-accent)}
.dl-floorplan__pin.is-success,.dl-floorplan__key.is-success{background:var(--dl-success)}
.dl-floorplan__pin.is-warn,.dl-floorplan__key.is-warn{background:var(--dl-amber)}
.dl-floorplan__pin.is-danger,.dl-floorplan__key.is-danger{background:var(--dl-danger)}
.dl-floorplan__pin.is-neutral,.dl-floorplan__key.is-neutral{background:var(--dl-muted)}
.dl-floorplan__pin.is-selected{box-shadow:0 0 0 3px var(--dl-ink-strong);z-index:2}
.dl-floorplan.is-readonly .dl-floorplan__pin{cursor:default}
.dl-floorplan__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;padding:0;list-style:none;color:var(--dl-ink);font-size:calc(12px * var(--dl-font-scale))}
.dl-floorplan__legend li{display:inline-flex;align-items:center;gap:6px}
.dl-floorplan__key{display:inline-block;width:12px;height:12px;border-radius:50%}
:is(body.dl-on-phone,.dl-phone) .dl-floorplan__pin::after{inset:-10px}
:is(body.dl-on-phone,.dl-phone) .dl-floorplan__room{font-size:calc(12px * var(--dl-font-scale))}

/* ==== Form di tampilan HP (konteks: body.dl-on-phone untuk halaman desktop di dalam iframe, atau .dl-phone): satu kolom, label di atas, isian 16px / >= 44px, bilah tombol menempel di bawah ====
   Tidak berlaku di desktop: tanpa kelas konteks tidak ada aturan di bawah yang cocok. */
:is(body.dl-on-phone,.dl-phone) .dl-form{padding:10px 12px calc(24px + env(safe-area-inset-bottom));gap:10px}
:is(body.dl-on-phone,.dl-phone) .dl-form__body,
:is(body.dl-on-phone,.dl-phone) .dl-form__row,
:is(body.dl-on-phone,.dl-phone) .dl-form--panel .dl-form__row{grid-template-columns:minmax(0,1fr);gap:10px}
:is(body.dl-on-phone,.dl-phone) .dl-form__col{min-width:0}
:is(body.dl-on-phone,.dl-phone) .dl-form__panel{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:4px 0 8px}
:is(body.dl-on-phone,.dl-phone) .dl-form__panel .dl-print__spacer,
:is(body.dl-on-phone,.dl-phone) .dl-form__panel .dl-form__sep{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-form__panel .dl-form__title{font-size:calc(20px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-field__label{font-size:calc(15px * var(--dl-font-scale));white-space:normal;line-height:1.3}
:is(body.dl-on-phone,.dl-phone) .dl-input,
:is(body.dl-on-phone,.dl-phone) .dl-dd__btn,
:is(body.dl-on-phone,.dl-phone) textarea.dl-input{font-size:16px;min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-field__box{min-height:48px}
:is(body.dl-on-phone,.dl-phone) .dl-field input[type=checkbox],
:is(body.dl-on-phone,.dl-phone) .dl-field input[type=radio]{width:24px;height:24px}
:is(body.dl-on-phone,.dl-phone) .dl-selectadd__btn{min-width:48px;min-height:48px;flex:none}
:is(body.dl-on-phone,.dl-phone) .dl-form__strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:is(body.dl-on-phone,.dl-phone) .dl-form__strip .dl-field{flex:none}
:is(body.dl-on-phone,.dl-phone) .dl-form .dl-tabs__bar{overflow-x:auto}

/* Grid di tampilan HP: daftar kartu (nama + kode, lencana, nilai penting), cari di atas, Filters / Columns / Export sebagai lembar dari bawah; hanya di konteks HP */
:is(body.dl-on-phone,.dl-phone) .dl-grid__toolbar{gap:8px;padding:8px 0}
:is(body.dl-on-phone,.dl-phone) .dl-grid__spacer{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-grid__search{flex:1 1 100%;width:100%;order:-2}
:is(body.dl-on-phone,.dl-phone) .dl-grid__search input{min-height:48px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) [data-g-new]{order:-1;flex:1 1 100%;min-height:48px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-grid__toolbar .dl-btn{min-height:44px}
:is(body.dl-on-phone,.dl-phone) [data-g-view],
:is(body.dl-on-phone,.dl-phone) .dl-pop2:has([data-g-panel="density"]){display:none}
:is(body.dl-on-phone,.dl-phone) .dl-grid__fbar{flex-wrap:nowrap;overflow-x:auto;column-gap:16px;padding:0 4px;-webkit-overflow-scrolling:touch}
:is(body.dl-on-phone,.dl-phone) .dl-grid__fbar > *{flex:none}
:is(body.dl-on-phone,.dl-phone) .dl-pop2__panel{position:fixed;left:0;right:0;bottom:0;top:auto;min-width:0;max-height:70%;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;box-shadow:0 0 0 100vmax var(--dl-overlay);z-index:80}
.dl-phone .dl-pop2__panel{bottom:0}
:is(body.dl-on-phone,.dl-phone) .dl-grid__expmenu{position:fixed;left:0;right:0;bottom:0;top:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;box-shadow:0 0 0 100vmax var(--dl-overlay);z-index:80}
:is(body.dl-on-phone,.dl-phone) .dl-grid__expmenu button{min-height:48px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cards{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 0}
/* Lines (tabel baris item) di tampilan HP: tiap baris = satu kartu, label kolom di atas isiannya (data-label dipasang lines.js), tanpa gulir ke samping; nomor kiri atas, tombol baris kanan atas. Baris jumlah footer (tfoot) disembunyikan; Summary totals tetap. */
:is(body.dl-on-phone,.dl-phone) .dl-lines__wrap{overflow:visible}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table,
:is(body.dl-on-phone,.dl-phone) .dl-lines__table :is(tbody,tr,td){display:block}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table :is(thead,tfoot){display:none}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i]:not(.dl-lines__more){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px;align-items:center;margin:0 0 10px;padding:10px 12px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);background:var(--dl-surface)}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] td{grid-column:span 6;width:auto;min-width:0;max-width:none;padding:0;border:0;position:static;background:none;box-shadow:none;text-align:left!important}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table td[data-label]::before{content:attr(data-label);display:block;margin:0 0 3px;font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted)}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] td.dl-lines__no{grid-column:1 / span 3;grid-row:1;display:flex;align-items:center;gap:6px;font-size:calc(14px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink)}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] td.dl-lines__act{grid-column:4 / span 3;grid-row:1;display:flex;gap:4px;justify-content:flex-end}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] :is(td.num,td.dl-lines__ro){grid-column:span 2}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] :is(td:has(> input[type=date]),td:has(> select)){grid-column:span 3}
:is(body.dl-on-phone,.dl-phone) .dl-lines__in{min-height:44px;font-size:16px;border-color:var(--dl-f-line);background:var(--dl-surface)}
:is(body.dl-on-phone,.dl-phone) .dl-lines__ro{padding:6px 0!important;white-space:normal}
:is(body.dl-on-phone,.dl-phone) .dl-lines__pick .dl-btn{min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table .dl-lines__more > td:first-child{display:none}
/* Report / Print Out di tampilan HP (opt-in prop phone-list): lembar cetak (diperkecil 33%, huruf tak terbaca) diganti DAFTAR BACA berupa kartu dari data yang sama (print.js list()); hanya di layar, saat cetak yang tampil tetap lembar. */
@media screen{:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__pages{display:none}}
@media screen{:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__list{display:grid;gap:10px;padding:10px 0}}
@media print{.dl-print__list{display:none!important}}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lcard{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--dl-border);border-left-width:4px;border-radius:var(--dl-radius-md);background:var(--dl-surface);color:var(--dl-ink)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lcard.is-row-danger{border-left-color:var(--dl-pr-neg);background:var(--dl-pr-negbg)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lcard.is-row-warn{border-left-color:var(--dl-amber-2);background:var(--dl-pr-warnbg)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__ltitle{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;font-size:calc(16px * var(--dl-font-scale));font-weight:700;color:var(--dl-ink-strong)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__ltitle small{flex:1 0 100%;font-size:calc(13px * var(--dl-font-scale));font-weight:400;color:var(--dl-muted)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lkv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lkv small,
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lsum small{display:block;font-size:calc(12px * var(--dl-font-scale));color:var(--dl-muted)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lkv b,
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lsum span b{font-size:calc(15px * var(--dl-font-scale));font-weight:600;font-variant-numeric:tabular-nums}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lgrp{margin:8px 2px 0;font-size:calc(14px * var(--dl-font-scale));font-weight:700;color:var(--dl-muted)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lsum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 14px;border-radius:var(--dl-radius-md);background:var(--dl-surface-alt)}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lsum > b{grid-column:1 / -1}
:is(body.dl-on-phone,.dl-phone) .dl-print[data-phone-list] .dl-print__lsum.is-grand{border:1px solid var(--dl-border);font-weight:700}


:is(body.dl-on-phone,.dl-phone) .dl-grid__card{position:relative;padding:12px 14px;border-left:5px solid var(--dl-border);-webkit-tap-highlight-color:transparent}
:is(body.dl-on-phone,.dl-phone) .dl-grid__card:active{background:var(--dl-hover)}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardimg{position:absolute;top:10px;right:10px;height:auto;width:auto;background:none}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardimg > :not(.dl-badge){display:none}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardimg .dl-badge{position:static}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:0}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody b,
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody small{grid-column:1/-1;padding-right:96px}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody b{font-size:calc(17px * var(--dl-font-scale));line-height:1.25}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody small{font-size:calc(14px * var(--dl-font-scale));color:var(--dl-ink)}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody span{flex-direction:column;justify-content:flex-start;font-size:calc(15px * var(--dl-font-scale));font-weight:600;gap:1px}
:is(body.dl-on-phone,.dl-phone) .dl-grid__cardbody em{font-size:calc(12px * var(--dl-font-scale));font-weight:600;color:var(--dl-ink)}
:is(body.dl-on-phone,.dl-phone) .dl-grid__card[data-tone="danger"]{border-left-color:var(--dl-danger);background:var(--dl-danger-soft)}
:is(body.dl-on-phone,.dl-phone) .dl-grid__card[data-tone="tangerine"],
:is(body.dl-on-phone,.dl-phone) .dl-grid__card[data-tone="yellow"]{border-left-color:var(--dl-amber);background:color-mix(in srgb,var(--dl-amber) 12%,var(--dl-surface))}
:is(body.dl-on-phone,.dl-phone) .dl-grid__card[data-tone="success"]{border-left-color:var(--dl-success)}
:is(body.dl-on-phone,.dl-phone) .dl-grid__card[data-tone="accent"]{border-left-color:var(--dl-accent)}
:is(body.dl-on-phone,.dl-phone) .dl-pop2__field select{font-size:16px;min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-pop2__panel .dl-btn{min-height:44px}

/* ==== Aksi layar di tampilan HP: tombol form, toolbar grid, dan bilah report disembunyikan; aksinya muncul di bilah B milik shell (dijalankan dengan click() pada tombol aslinya); konteks body.dl-phone-shelled atau .dl-phone; desktop tidak cocok ==== */
body.dl-phone-shelled [data-phone-act],
.dl-phone [data-phone-act],
body.dl-phone-shelled .dl-form__acts,
body.dl-phone-shelled .dl-print__bar,
.dl-phone .dl-form__acts,
.dl-phone .dl-print__bar{display:none}
body.dl-phone-shelled .dl-grid__toolbar,
.dl-phone .dl-grid__toolbar{position:fixed;left:-10000px;top:0;width:360px}
body.dl-phone-search .dl-grid__toolbar{left:0;right:0;width:auto;z-index:35;display:flex;padding:8px 12px;background:var(--dl-surface);border-bottom:1px solid var(--dl-border);box-shadow:0 8px 20px var(--dl-overlay-soft)}
body.dl-phone-search .dl-grid__toolbar > :not(.dl-grid__search){display:none}
@media screen{body.dl-phone-shelled .dl-print__pages{zoom:var(--dl-phone-fit,1)}}

/* ==== Form di tampilan HP, pelengkap audit layar formulir master (opt-in konteks phone: body.dl-on-phone / .dl-phone; desktop tidak cocok) ==== */
/* Dropdown / lookup / tab / pesan galat / hint / pilihan radio / dialog dan tabel bertumpuk (prop stack) agar nyaman dengan jempol: teks >= 14-16px, sasaran ketuk >= 44px. */
:is(body.dl-on-phone,.dl-phone) .dl-tabs__tab{min-height:44px;font-size:calc(14px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-field__error{font-size:calc(14px * var(--dl-font-scale));margin-top:3px}
:is(body.dl-on-phone,.dl-phone) .dl-field__hint{font-size:calc(13px * var(--dl-font-scale));line-height:1.35;padding:4px 8px}
:is(body.dl-on-phone,.dl-phone) .dl-form__panel .dl-badge{font-size:calc(12px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-dd__item{display:flex;align-items:center;min-height:44px;padding:8px 12px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-dd__group{padding:8px 12px;font-size:calc(12px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-dd__search input{min-height:44px;padding:6px 10px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table{font-size:15px}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table :is(th,td){padding:10px 12px;white-space:normal}
:is(body.dl-on-phone,.dl-phone) .dl-case{position:relative}
:is(body.dl-on-phone,.dl-phone) .dl-case::after,
:is(body.dl-on-phone,.dl-phone) .dl-numtg::after{content:"";position:absolute;inset:-12px -8px}
:is(body.dl-on-phone,.dl-phone) .dl-prefix:not(.has-numtg) .dl-numtg{position:relative}
:is(body.dl-on-phone,.dl-phone) .dl-field .dl-spin{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-choices{gap:0 20px}
:is(body.dl-on-phone,.dl-phone) .dl-choice{min-height:44px;gap:10px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-upload__placeholder{font-size:calc(14px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-mov{padding:12px}
:is(body.dl-on-phone,.dl-phone) .dl-modal__head{padding:8px 8px 8px 16px}
:is(body.dl-on-phone,.dl-phone) .dl-modal__x{min-width:44px;min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-modal__body{padding:16px}
:is(body.dl-on-phone,.dl-phone) .dl-modal__foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
:is(body.dl-on-phone,.dl-phone) .dl-modal__foot .dl-btn{flex:1;min-height:48px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-mfield label{font-size:calc(14px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-mfield input{min-height:44px;font-size:16px}
/* Tabel kecil di dalam form (x-dl::table :stack): tiap baris = satu kartu, label kolom di kiri nilainya (data-label); tanpa gulir ke samping. */
:is(body.dl-on-phone,.dl-phone) .dl-table--stack{border:0;background:none;overflow:visible}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack :is(.dl-table,tbody,tr){display:block;width:auto}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack thead{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody tr{margin:0 0 10px;padding:8px 12px;border:1px solid var(--dl-border);border-radius:var(--dl-radius-md);background:var(--dl-surface)}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody td{display:flex;width:auto;justify-content:space-between;align-items:center;gap:12px;min-height:36px;padding:4px 0;border:0;background:none;text-align:right!important;font-size:calc(15px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody td[data-label]::before{content:attr(data-label);flex:none;font-size:calc(13px * var(--dl-font-scale));font-weight:600;color:var(--dl-muted);text-align:left}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody td[data-label=""]::before{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody td a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-weight:700}
:is(body.dl-on-phone,.dl-phone) .dl-table--stack tbody td.dl-table__empty{display:block;text-align:left!important}
:is(body.dl-on-phone,.dl-phone) textarea.dl-input{min-height:96px}

/* ==== Sasaran ketuk HP (hasil uji layar satu per satu, 2026-10-28; konteks phone saja, desktop tidak cocok): tombol kalender / pilih >= 44 px lebar, segmen bilah cetak (Kertas, Grup) >= 44 px tinggi, tombol ikon baris dan tombol huruf (aa) di kartu x-dl::lines. ==== */
:is(body.dl-on-phone,.dl-phone) .dl-pick > .dl-field__trigger:not(.dl-case){min-width:44px}
:is(body.dl-on-phone,.dl-phone) .dl-print__bar .dl-segment__opt{min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] td.dl-lines__act .dl-iconbtn{width:44px;height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] .dl-lines__case{min-width:40px;min-height:36px;font-size:12px}

/* ==== Popup hasil pencarian (lookup) di HP (hasil uji interaksi, 2026-10-29; konteks phone saja): selebar layar, hasil bertumpuk sebagai kartu dua baris (nama tebal, lalu kode / satuan / dst.), tanpa membuat halaman melebar. ==== */
:is(body.dl-on-phone,.dl-phone) .dl-lines__pop{left:8px!important;right:8px;width:auto;min-width:0!important;max-width:calc(100vw - 16px)}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table,
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody{display:block}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table thead{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody tr.dl-dd__item{display:block;padding:10px 12px;border-bottom:1px solid var(--dl-border-soft)}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody tr.dl-dd__item td{display:inline;padding:0;border:0;font-size:13px;color:var(--dl-muted);white-space:normal}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody tr.dl-dd__item td:first-child{display:block;margin-bottom:2px;font-size:16px;font-weight:700;color:var(--dl-ink-strong)}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody tr.dl-dd__item td:not(:first-child):not(:last-child)::after{content:" \00b7 "}
:is(body.dl-on-phone,.dl-phone) .dl-lookup__table tbody tr.dl-dd__item td:not(:first-child)[data-label]::before{content:attr(data-label) ": ";opacity:.75}

/* ==== Penomoran halaman, pilihan jumlah baris, chip filter, dan kartu baris tanpa tombol di HP (hasil uji layar Modul / Grup, 2026-10-29; konteks phone saja). ==== */
:is(body.dl-on-phone,.dl-phone) .dl-pager button{min-width:44px;min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-pager__size{min-width:44px;min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-fb{min-height:44px}
:is(body.dl-on-phone,.dl-phone) .dl-lines__table tbody tr[data-i] td.dl-lines__act:not(:has(button)){display:none}

/* ==== Side screen layout di tampilan HP: daftar bagian, lalu satu bagian dengan tombol kembali (data-ss-view = list | detail; diatur side-screen.js) ==== */
:is(body.dl-on-phone,.dl-phone) .dl-ssl{display:block;height:auto;scroll-margin-top:64px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl[data-ss-view=list] .dl-ssl__body{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl[data-ss-view=detail] .dl-ssl__rail{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__rail{border-right:0;background:none;padding:0;gap:0;overflow:visible}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__cap{font-size:calc(12px * var(--dl-font-scale));padding:16px 4px 6px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav{min-height:52px;padding:8px 12px;font-size:16px;background:var(--dl-surface);border:1px solid var(--dl-border);border-radius:0;margin-top:-1px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav i{width:24px;font-size:16px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav::after{content:"";width:8px;height:8px;margin-left:8px;border-top:2px solid var(--dl-muted);border-right:2px solid var(--dl-muted);transform:rotate(45deg);flex:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav.is-on{background:var(--dl-surface);color:inherit;font-weight:inherit}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav.is-on i{color:var(--dl-muted)}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__nav.is-on::before{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__sec{position:static;padding:8px 4px 10px;gap:4px;border-bottom:0}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__sec>i{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__sec h2{font-size:calc(18px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__sec p{font-size:calc(13px * var(--dl-font-scale))}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__crumb{display:none}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__back{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border:0;background:none;color:var(--dl-ink-strong);font-size:18px;flex:none;cursor:pointer}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__panel{padding:4px 0 24px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__top{padding:0}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__foot{position:static;margin:8px 0 0;padding:0;border-top:0;background:none;flex-wrap:wrap}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__foot-acts{width:100%}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__foot-acts .dl-btn{flex:1;min-height:48px}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__foot-hint{margin-left:0;width:100%}
:is(body.dl-on-phone,.dl-phone) .dl-ssl__panel .dl-actionbar .dl-btn{flex:1;min-height:48px}