/* ============================================================================
   Starmy CRM, sistem desain "Serah terima" (Arah B), satu keluarga huruf:
   Plus Jakarta Sans (app/layout.tsx). Urutan impor adalah urutan cascade.
   token.css      token terang/gelap + alias nama lama
   dasar.css      elemen HTML
   komponen.css   tombol, label, formulir, panel, modal, toast, kosong/memuat
   shell.css      sidebar, topbar, status Starmy, tab bar HP
   halaman.css    aturan halaman lama yang dibersihkan
   inbox.css      Inbox dan panel detail pelanggan
   catatan.css    Catatan & kasus
   pelanggan.css  Pelanggan
   starmy.css     area Starmy (Ringkasan dan halaman Starmy lain)
   laporan.css    Laporan (buku kerja)
   hari-ini.css   halaman Hari ini (dua jalur)
   penyesuaian.css penyesuaian Arah B untuk halaman lain
   ========================================================================== */
/* ============================================================================
   Starmy CRM, sistem desain "Serah terima" (Arah B).
   Satu sumber token untuk terang dan gelap. Nama baru berbahasa Indonesia;
   nama lama (--panel, --brand, --line, dst.) dipetakan di bagian bawah supaya
   aturan halaman lama ikut berganti tanpa ditulis ulang.
   Aturan warna:
   - hutan  = tindakan utama dan tautan
   - jalur  = milik Starmy (latar lime pucat)
   - lime   = tanda buatan Starmy dan maskot, bukan latar besar
   - kunyit = satu-satunya warna perhatian: sesuatu menunggu manusia
   - merah  = gagal dan terputus
   ========================================================================== */
:root{
 color-scheme:light;
 --huruf:var(--font-body),"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;

 --kanvas:#F5F4EE;--permukaan:#FFFFFF;--permukaan-2:#FAFBF7;--sorot:#EEF1EA;--sorot-kuat:#E4E8DF;--melayang:#FFFFFF;
 --garis:#E3E7DE;--garis-lembut:#EDF0E9;--garis-kuat:#CCD3C8;--garis-input:#8A948D;
 --tinta:#171B19;--tinta-2:#3D4540;--tinta-3:#5F675F;
 --hutan:#304C43;--hutan-hover:#263D35;--hutan-teks:#304C43;--hutan-lembut:#E3ECE5;--pada-hutan:#FFFFFF;
 --lime:#D9F06B;
 --jalur:#EFF5D3;--jalur-garis:#D7E4A0;--jalur-bintang:#E2EDB0;--jalur-angka:#171B19;
 --kunyit:#9C4A00;--kunyit-lembut:#FFF0DC;--kunyit-garis:#EFD2A8;
 --merah:#B3261E;--merah-lembut:#FCE9E7;--merah-garis:#F2B8B2;
 --info:#2F5578;--info-lembut:#E7EEF5;
 --aktif:#1E9E5A;--fokus:#304C43;
 --grafik-starmy:#9DB83A;--grafik-tim:#304C43;
 --toast-bg:#171B19;--toast-teks:#F7F8F3;--toast-aksi:#D9F06B;
 --bayang-1:0 1px 2px rgb(18 29 24/.06);
 --bayang-2:0 12px 32px -12px rgb(18 29 24/.28),0 2px 6px rgb(18 29 24/.06);
 --bayang-3:0 32px 72px -20px rgb(18 29 24/.42);
 --latar-modal:rgb(12 18 15/.45);
}
[data-theme=dark]{
 color-scheme:dark;
 --kanvas:#0D1210;--permukaan:#121815;--permukaan-2:#171E1A;--sorot:#1B231F;--sorot-kuat:#232D28;--melayang:#1A221E;
 --garis:#232C27;--garis-lembut:#1C2420;--garis-kuat:#334039;--garis-input:#6C7871;
 --tinta:#E8EEE9;--tinta-2:#B0BCB4;--tinta-3:#8E9A93;
 --hutan:#D9F06B;--hutan-hover:#CBE458;--hutan-teks:#A9D9BF;--hutan-lembut:#18291F;--pada-hutan:#11170F;
 --lime:#D9F06B;
 --jalur:#132A20;--jalur-garis:#1F3F30;--jalur-bintang:#173426;--jalur-angka:#D9F06B;
 --kunyit:#F4B35E;--kunyit-lembut:#33230E;--kunyit-garis:#5A4020;
 --merah:#F09A8F;--merah-lembut:#3A1D1A;--merah-garis:#6A332D;
 --info:#A3C2E0;--info-lembut:#1D2A36;
 --aktif:#4CC98A;--fokus:#D9F06B;
 --grafik-starmy:#D9F06B;--grafik-tim:#6FA58C;
 --toast-bg:#E8EEE9;--toast-teks:#0D1210;--toast-aksi:#1E4A3B;
 --bayang-1:0 1px 2px rgb(0 0 0/.4);
 --bayang-2:0 16px 40px -12px rgb(0 0 0/.7);
 --bayang-3:0 32px 80px -20px rgb(0 0 0/.8);
 --latar-modal:rgb(0 0 0/.6);
}

/* Ukuran, radius, gerak: sama di kedua tema. */
:root{
 --r-1:6px;--r-2:10px;--r-3:14px;--r-pil:999px;
 --cepat:120ms;--sedang:200ms;--lambat:480ms;--lengkung:cubic-bezier(.2,.8,.2,1);
 --lebar-sidebar:248px;--lebar-ciut:72px;--tinggi-topbar:60px;--lebar-jalur:400px;
}

/* ---------- Alias token lama (dipakai aturan halaman lama dan style inline) ---------- */
:root,[data-theme=dark]{
 --bg:var(--permukaan);--panel:var(--permukaan);--panel2:var(--permukaan-2);--panel3:var(--sorot);
 --surface:var(--permukaan);--surface-2:var(--permukaan-2);--white:#FFFFFF;
 --text:var(--tinta);--text-2:var(--tinta-2);--muted:var(--tinta-3);--faint:var(--tinta-3);
 --border:var(--garis);--border-strong:var(--garis-kuat);--line:var(--garis);--line-soft:var(--garis-lembut);--line-strong:var(--garis-kuat);--line-q:var(--garis);
 --brand:var(--hutan-teks);--brand-bright:var(--hutan-teks);--brand-strong:var(--hutan);--on-brand:var(--pada-hutan);
 --accent:var(--hutan-teks);--primary:var(--hutan);--on-primary:var(--pada-hutan);--inverse:var(--tinta);--on-inverse:var(--permukaan);
 --soft:var(--jalur);--soft2:var(--sorot-kuat);--sage:var(--jalur);--sage-text:var(--tinta);--sage-text-2:var(--tinta-2);--sage-tag:var(--hutan-teks);
 --orange:var(--hutan);--on-orange:var(--pada-hutan);--orange-soft:var(--kunyit-lembut);--orange-ink:var(--kunyit);
 --pasir:var(--sorot);--pasir-tinta:var(--tinta-2);
 --danger:var(--merah);--danger-soft:var(--merah-lembut);--error:var(--merah);--error-bg:var(--merah-lembut);
 --warning:var(--kunyit);--warning-soft:var(--kunyit-lembut);--attn:var(--kunyit);--attn-bg:var(--kunyit-lembut);--attn-line:var(--kunyit-garis);
 --info-soft:var(--info-lembut);--pending:var(--info);--pending-bg:var(--info-lembut);
 --done:var(--tinta-2);--done-bg:var(--sorot);--online:var(--aktif);--offline:var(--kunyit);
 --note:var(--tinta-2);--note-bg:var(--permukaan-2);--note-line:var(--garis-kuat);
 --gelembung:var(--permukaan);--gelembung-omiy:var(--jalur);--gelembung-kakak:var(--hutan-lembut);--bubble-starmy:var(--jalur);
 --row-active:var(--sorot-kuat);--field:var(--sorot);--tag-bg:var(--sorot);--tag:var(--tinta-2);--track:var(--sorot-kuat);
 --hero-bg:var(--jalur);--head-av:var(--hutan-lembut);--toggle-off:var(--garis-kuat);--toggle-on:var(--hutan);--knob:#FFFFFF;
 --chart-starmy:var(--grafik-starmy);--chart-team:var(--grafik-tim);--seg-shadow:var(--bayang-1);
 --paper:var(--kanvas);--ink:var(--tinta);--forest:var(--hutan);--on-forest:var(--pada-hutan);--sidebar-color:var(--kanvas);
 --krem:var(--kanvas);--navy:var(--tinta);--malam:var(--tinta);--tosca:var(--hutan-teks);--tosca-tua:var(--hutan);--oranye:var(--lime);--mint:var(--hutan-lembut);
 --rel:var(--kanvas);--rel-2:var(--sorot);--rel-teks:var(--tinta);--rel-redup:var(--tinta-2);--rel-garis:var(--garis);
 --inbox-soft:var(--permukaan-2);--focus:var(--fokus);
 --shadow:var(--bayang-1);--shadow-pop:var(--bayang-2);
 --radius:var(--r-3);--radius-sm:var(--r-2);--radius-xs:var(--r-1);
 --font-display:var(--font-body);--font-display-stack:var(--huruf);--font-body-stack:var(--huruf);--f:var(--huruf);
 --rail:var(--lebar-sidebar);--sidebar:var(--lebar-sidebar);--topbar:var(--tinggi-topbar);
}

/* ---------- Dasar: elemen HTML ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--tinggi-topbar) + 16px);scroll-padding-bottom:132px}
html,body{margin:0;min-height:100%;background:var(--permukaan);color:var(--tinta)}
body,button,input,textarea,select{font-family:var(--huruf);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{color:var(--tinta)}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;outline-offset:2px}
button,select{touch-action:manipulation}
button{cursor:pointer;font-weight:600}
button:disabled{cursor:not-allowed;opacity:.6}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
h1,h2,h3,h4,p{margin:0}
h1{font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
h3{font-size:15px;font-weight:700;line-height:1.4}
h4{font-size:14px;font-weight:700;line-height:1.4}
small{font-size:12px}
strong,b{font-weight:600}
img,svg{vertical-align:middle}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--garis);margin:16px 0}
::selection{background:var(--jalur-garis);color:var(--tinta)}
:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:4px}

input,textarea,select{width:100%;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--garis-input);border-radius:var(--r-1);background:var(--permukaan);font-size:14px;transition:border-color var(--cepat),box-shadow var(--cepat)}
input:hover,textarea:hover,select:hover{border-color:var(--tinta-3)}
input:focus,textarea:focus,select:focus{border-color:var(--hutan-teks);box-shadow:0 0 0 3px color-mix(in srgb,var(--hutan-teks) 22%,transparent);outline:none}
input:disabled,textarea:disabled,select:disabled{opacity:.7;background:var(--permukaan-2)}
input::placeholder,textarea::placeholder{color:var(--tinta-3);opacity:1}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--hutan-teks);flex-shrink:0}
input[type=file]{min-height:0;padding:8px}
textarea{resize:vertical;min-height:88px;line-height:1.5}
select{padding-right:32px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:10px 14px;text-align:left;font-size:12px;font-weight:600;color:var(--tinta-3);background:var(--permukaan-2);border-bottom:1px solid var(--garis);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--garis-lembut);vertical-align:middle}
td small{display:block;color:var(--tinta-3)}
tbody tr:hover td{background:var(--permukaan-2)}

progress{width:100%;height:8px;border:0;border-radius:var(--r-pil);overflow:hidden;appearance:none;background:var(--sorot-kuat)}
progress::-webkit-progress-bar{background:var(--sorot-kuat)}
progress::-webkit-progress-value{background:var(--hutan-teks);border-radius:var(--r-pil)}
progress::-moz-progress-bar{background:var(--hutan-teks)}
kbd{font-family:var(--huruf);font-size:12px;font-weight:600;line-height:1.5;padding:0 6px;border:1px solid var(--garis-kuat);border-radius:5px;background:var(--permukaan-2);color:var(--tinta-2);white-space:nowrap}
code{font-size:13px;padding:1px 5px;border-radius:5px;background:var(--sorot)}
details>summary{cursor:pointer}

@keyframes putar{to{transform:rotate(360deg)}}
@keyframes denyut{50%{opacity:.5}}
@keyframes naik{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes muncul-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kilau{0%{opacity:0;transform:scale(.3) rotate(-60deg)}60%{opacity:1;transform:scale(1.1) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes angka-naik{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}

/* ---------- Komponen bersama ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow{flex:1;min-width:0}
.muted{color:var(--tinta-2)}
.hint{font-size:13px;color:var(--tinta-3)}
.angka,.num{font-variant-numeric:tabular-nums}
.desktop-only{display:contents}
.mobile-only{display:none}
@media (max-width:760px){.desktop-only{display:none!important}.mobile-only{display:contents}}

/* Tanda bintang Starmy: "ini dikerjakan Starmy". */
.tanda-starmy{width:14px;height:14px;flex:none;fill:var(--lime);stroke:var(--tinta);stroke-width:7;stroke-linejoin:round}
[data-theme=dark] .tanda-starmy{stroke:none}

/* Halaman dan judul */
.page{width:100%;min-width:0}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:28px}
.page-heading>div:first-child{min-width:0;max-width:760px}
.page-heading h1{margin-top:2px}
.page-heading .muted{margin-top:8px;font-size:15px;line-height:1.55;max-width:70ch}
.heading-action{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eyebrow{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--tinta-3)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:12px}
.section-title h2{font-size:18px}
.section-title .hint{margin-top:2px}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:var(--r-pil);background:var(--kunyit-lembut);color:var(--kunyit);font-size:12px;font-weight:700;line-height:1}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-2);background:var(--hutan);color:var(--pada-hutan);font-family:var(--huruf);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--cepat),border-color var(--cepat),color var(--cepat),transform var(--cepat)}
.btn:hover:not(:disabled){background:var(--hutan-hover);text-decoration:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{flex:none}
.btn.accent,.btn.primary{background:var(--hutan);color:var(--pada-hutan)}
.btn.secondary{background:var(--permukaan);border-color:var(--garis-kuat);color:var(--tinta)}
.btn.secondary:hover:not(:disabled){background:var(--sorot);border-color:var(--garis-kuat)}
.btn.ghost{background:transparent;color:var(--tinta-2)}
.btn.ghost:hover:not(:disabled){background:var(--sorot);color:var(--tinta)}
.btn.danger{background:var(--merah);color:#FFFFFF}
[data-theme=dark] .btn.danger{color:#1A0E0C}
.btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--merah) 86%,var(--tinta))}
.btn.secondary.danger,.btn.ghost.danger{background:transparent;color:var(--merah);border-color:var(--merah-garis)}
.btn.small{min-height:34px;padding:0 12px;font-size:13px;gap:6px}
.btn.full{width:100%}
.btn.flat{box-shadow:none}
.btn.icon-only{width:40px;padding:0}
.btn.icon-only.small{width:34px}
.btn[aria-busy=true]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:putar .7s linear infinite}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--r-2);background:transparent;color:var(--tinta-2);cursor:pointer}
.icon-btn:hover{background:var(--sorot);color:var(--tinta)}
.icon-btn.small{width:32px;height:32px}
.text-link{display:inline-flex;align-items:center;gap:4px;color:var(--hutan-teks);font-weight:600;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
.text-link:hover{text-decoration:underline}

/* Label status */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-pil);background:var(--sorot);color:var(--tinta-2);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.badge.positive,.badge.success{background:var(--hutan-lembut);color:var(--hutan-teks)}
.badge.warning,.badge.attention{background:var(--kunyit-lembut);color:var(--kunyit)}
.badge.danger,.badge.error{background:var(--merah-lembut);color:var(--merah)}
.badge.info{background:var(--info-lembut);color:var(--info)}
.badge.starmy{background:var(--jalur);color:var(--tinta)}
.badge.outline{background:transparent;border-color:var(--garis-kuat)}
.status-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--aktif);box-shadow:0 0 0 3px color-mix(in srgb,var(--aktif) 22%,transparent)}
.status-dot.warn{background:var(--kunyit);box-shadow:0 0 0 3px color-mix(in srgb,var(--kunyit) 22%,transparent)}
.status-dot.off{background:var(--tinta-3);box-shadow:none}
.status-dot.bahaya{background:var(--merah);box-shadow:0 0 0 3px color-mix(in srgb,var(--merah) 22%,transparent)}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--r-2);background:var(--sorot-kuat);color:var(--tinta-2);font-size:13px;font-weight:700;text-transform:uppercase;line-height:1}
.avatar.round{border-radius:50%}
.avatar.soft{background:var(--hutan-lembut);color:var(--hutan-teks)}
.avatar.warm{background:var(--kunyit-lembut);color:var(--kunyit)}

/* Umpan balik */
.notice{display:block;margin:0 0 16px;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan-2);color:var(--tinta);font-size:14px;line-height:1.5}
.notice.error{background:var(--merah-lembut);border-color:var(--merah-garis);color:var(--tinta)}
.notice.error::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--merah);vertical-align:1px}
.notice.success{background:var(--hutan-lembut);border-color:transparent}
.notice.warning{background:var(--kunyit-lembut);border-color:var(--kunyit-garis)}
.notice.info{background:var(--info-lembut);border-color:transparent}
.toast-stack{position:fixed;left:50%;bottom:24px;z-index:90;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-radius:var(--r-2);background:var(--toast-bg);color:var(--toast-teks);font-size:14px;line-height:1.4;box-shadow:var(--bayang-2);animation:naik var(--sedang) var(--lengkung)}
.toast>span{flex:1}
.toast.error{background:var(--merah-lembut);color:var(--tinta);border:1px solid var(--merah-garis)}
.toast.success svg{color:var(--toast-aksi)}
.toast button{flex:none;min-height:32px;padding:0 10px;border:0;border-radius:var(--r-1);background:transparent;color:var(--toast-aksi);font-weight:700}
.toast button:hover{background:color-mix(in srgb,var(--toast-teks) 12%,transparent)}
.toast button:focus-visible{outline-color:var(--toast-aksi)}
@media (max-width:760px){.toast-stack{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* Modal (dialog bawaan) */
.modal{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--garis);border-radius:var(--r-3);background:var(--melayang);color:var(--tinta);box-shadow:var(--bayang-3)}
.modal[open]{animation:muncul-pop var(--sedang) var(--lengkung)}
.modal::backdrop{background:var(--latar-modal)}
.modal>form,.modal>div{display:flex;flex-direction:column;gap:16px;padding:24px}
.modal h2{font-size:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}

/* Formulir */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span:first-child{font-size:13px;font-weight:600;color:var(--tinta)}
.field>small{font-size:12px;line-height:1.45;color:var(--tinta-3)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--merah)}
.req{margin-left:3px;color:var(--merah)}
.error-text{color:var(--merah)!important}

/* Permukaan */
.panel{min-width:0;padding:20px 24px;border:1px solid var(--garis);border-radius:var(--r-3);background:var(--permukaan)}
.panel+.panel{margin-top:16px}
.panel.flat{border-color:transparent;background:var(--permukaan-2)}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-2);background:var(--sorot);max-width:100%;overflow-x:auto}
.segmented button{min-height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--tinta-2);font-size:13px;font-weight:600;white-space:nowrap}
.segmented button:hover{color:var(--tinta)}
.segmented button[aria-pressed=true]{background:var(--permukaan);color:var(--tinta);box-shadow:var(--bayang-1),inset 0 0 0 1px var(--garis)}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat>span{font-size:13px;color:var(--tinta-2)}
.stat>strong{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.stat>strong.na{font-size:14px;font-weight:600;color:var(--tinta-3)}
.stat>small{color:var(--tinta-3)}

/* Kosong dan memuat */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px 20px;text-align:center}
.empty .tanda-starmy{width:22px;height:22px;margin-bottom:6px}
.empty>img{margin-bottom:6px}
.empty h3{font-size:16px}
.empty .muted{max-width:48ch;font-size:14px;color:var(--tinta-2)}
.empty>.btn,.empty>a.btn{margin-top:10px}
.empty.compact{align-items:flex-start;padding:14px 0;text-align:left;gap:2px}
.empty.compact .tanda-starmy{display:none}
.empty.compact h3{font-size:14px}
.loading{display:flex;align-items:center;gap:10px;padding:24px 0;color:var(--tinta-2);font-size:14px}
.spinner{width:16px;height:16px;flex:none;border:2px solid var(--garis-kuat);border-top-color:var(--hutan-teks);border-radius:50%;animation:putar .7s linear infinite}
.kerangka{display:block;border-radius:var(--r-1);background:var(--sorot-kuat);animation:denyut 1.4s ease-in-out infinite}

/* Tab bergaris: pilihan daftar di dalam halaman (bukan navigasi). Tombol memakai aria-pressed. */
.tab-garis{display:flex;align-items:stretch;gap:24px;max-width:100%;overflow-x:auto;border-bottom:1px solid var(--garis);scrollbar-width:none}
.tab-garis::-webkit-scrollbar{display:none}
.tab-garis button{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:-1px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--tinta-2);font-size:15px;font-weight:600;white-space:nowrap}
.tab-garis button:hover{color:var(--tinta)}
.tab-garis button[aria-pressed=true]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:700}
.tab-garis button span{min-width:22px;padding:0 7px;border-radius:var(--r-pil);background:var(--sorot);color:var(--tinta-2);font-size:12px;font-weight:700;line-height:20px;text-align:center}
.tab-garis button[aria-pressed=true] span{background:var(--tinta);color:var(--permukaan)}
.tab-garis button:focus-visible{outline-offset:-2px}

/* Formulir panjang: baris tombol simpan menempel di bawah, editor item bergaris (bukan kotak putus-putus). */
.sticky-actions{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--tinta);background:var(--permukaan)}
.sticky-actions .hint{margin-left:auto}
.item-editor{margin:0 0 10px;padding:12px 0 12px 14px;border:0;border-left:3px solid var(--garis-kuat);border-radius:0;background:none}
.item-editor.archived{opacity:.72}
@media (max-width:760px){
 .sticky-actions{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:12px}
 .sticky-actions .hint{margin-left:0;flex-basis:100%}
 .sticky-actions .btn{min-height:44px}
}

/* Detail yang bisa dibuka (details.advanced): garis atas-bawah, bukan kotak. */
.advanced{margin-top:12px;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 0;list-style:none;font-size:15px;font-weight:700;color:var(--tinta)}
.advanced>summary::-webkit-details-marker{display:none}
.advanced>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);transform:rotate(45deg);transition:transform var(--sedang) var(--lengkung)}
.advanced[open]>summary::after{transform:rotate(-135deg)}
.advanced>summary:focus-visible{outline-offset:-2px}
.advanced[open]{padding-bottom:16px}
.advanced>p{margin-bottom:10px;font-size:13px;color:var(--tinta-2)}

/* Target sentuh minimal 44 px di HP (aturan proyek; WCAG 2.2 cukup 24 px). Tautan di dalam kalimat dikecualikan. */
@media (max-width:760px){
 .btn,.btn.small{min-height:44px}
 .btn.icon-only,.btn.icon-only.small{width:44px;min-width:44px}
 .icon-btn,.icon-btn.small{width:44px;height:44px}
 .text-link{min-height:44px;min-width:44px}
 .tab-garis button{min-width:44px}
 input:not([type=checkbox]):not([type=radio]):not([type=file]),select{min-height:44px}
 .segmented button{min-height:44px}
 .segmented{padding:2px}
}

/* Redesign tahap 3: menu Tindakan lain pada produk */
.produk-lain{position:relative;display:inline-block}
.produk-lain>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.produk-lain>summary::-webkit-details-marker{display:none}
.produk-lain-pop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;padding:6px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--melayang);box-shadow:var(--bayang-2)}

/* ---------- Shell: sidebar terang, topbar, tab bar HP ---------- */
.skip-link{position:fixed;left:12px;top:-80px;z-index:100;padding:10px 14px;border-radius:var(--r-2);background:var(--melayang);color:var(--tinta);font-weight:600;box-shadow:var(--bayang-2)}
.skip-link:focus{top:12px}
.app-shell{display:grid;grid-template-columns:var(--lebar-sidebar) minmax(0,1fr);min-height:100dvh;background:var(--permukaan)}
.app-shell.ciut{grid-template-columns:var(--lebar-ciut) minmax(0,1fr)}

/* Sidebar */
.sidebar{position:sticky;top:0;height:100dvh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:16px 12px 12px;background:var(--kanvas);border-right:1px solid var(--garis);z-index:35}
.sidebar-atas{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding-left:8px;margin-bottom:12px}
.sidebar-logo{display:flex;align-items:center;color:var(--tinta)}
.sidebar-logo img{height:24px;width:auto}
.sidebar-logo .logo-gelap,[data-theme=dark] .sidebar-logo .logo-terang{display:none}
[data-theme=dark] .sidebar-logo .logo-gelap{display:block}
.logo-tanda{width:24px;height:24px;fill:var(--tinta);stroke:none}
.sidebar-logo .logo-tanda{display:none}
.bisnis{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-bottom:12px;padding:8px 10px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan);color:var(--tinta);text-align:left;font-weight:400}
button.bisnis:hover,.bisnis.pilih:hover{border-color:var(--garis-kuat)}
.bisnis.pilih:focus-within{outline:2px solid var(--fokus);outline-offset:2px}
.bisnis select{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0;border:0}
.bisnis>svg{color:var(--tinta-3);flex:none}
.bisnis-tanda{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:var(--r-1);background:var(--hutan);color:var(--pada-hutan);font-size:12px;font-weight:700;text-transform:uppercase}
.bisnis-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.bisnis-teks strong{font-size:14px;font-weight:600}
.bisnis-teks small{font-size:12px;color:var(--tinta-3)}
.sidebar-menu{display:flex;flex-direction:column;gap:2px}
.menu-link{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:8px 10px;border-radius:var(--r-2);color:var(--tinta-2);font-size:14px;font-weight:500;text-decoration:none}
.menu-link:hover{background:var(--sorot);color:var(--tinta);text-decoration:none}
.menu-link[aria-current=page]{background:var(--jalur);color:var(--tinta);font-weight:600;box-shadow:inset 3px 0 0 var(--hutan-teks)}
.menu-link svg{flex:none}
.menu-teks{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-badge{min-width:22px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border-radius:var(--r-pil);background:var(--kunyit-lembut);color:var(--kunyit);font-size:12px;font-weight:700;line-height:1}
.sidebar-bawah{margin-top:auto;padding-top:12px;border-top:1px solid var(--garis);display:flex;flex-direction:column;gap:2px}
.akun-wrap{position:relative}
.akun{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 8px;border:0;border-radius:var(--r-2);background:transparent;text-align:left;font-weight:400}
.akun:hover{background:var(--sorot)}
.akun .avatar,.akun-kecil .avatar{width:32px;height:32px;font-size:12px}
.akun-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.akun-teks strong{font-size:13px;font-weight:600}
.akun-teks small{font-size:12px;color:var(--tinta-3)}

/* Sidebar ciut: manual, atau otomatis di layar 761–1180 px */
.app-shell.ciut .menu-teks,.app-shell.ciut .bisnis-teks,.app-shell.ciut .bisnis>svg,.app-shell.ciut .akun-teks,.app-shell.ciut .sidebar-logo img{display:none}
.app-shell.ciut .sidebar-logo .logo-tanda{display:block}
.app-shell.ciut .sidebar-atas{flex-direction:column;padding-left:0;gap:8px}
.app-shell.ciut .bisnis{justify-content:center;padding:8px 0}
.app-shell.ciut .menu-link,.app-shell.ciut .akun{justify-content:center;padding-left:0;padding-right:0}
.app-shell.ciut .menu-badge{position:absolute;top:1px;right:4px;min-width:20px;height:20px;padding:0 5px}

/* Popover */
.popover{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(320px,calc(100vw - 24px));padding:16px;border:1px solid var(--garis);border-radius:var(--r-3);background:var(--melayang);color:var(--tinta);box-shadow:var(--bayang-2);animation:muncul-pop var(--sedang) var(--lengkung)}
/* Sidebar bisa bergulir (overflow), jadi popover akun memakai posisi tetap supaya tidak terpotong. */
.akun-wrap.akun-sidebar .popover{position:fixed;top:auto;bottom:72px;left:12px;right:auto;width:288px}
.pop-judul{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.pop-daftar{margin:12px 0;border-top:1px solid var(--garis)}
.pop-daftar div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--garis);font-size:13px}
.pop-daftar dt{color:var(--tinta-3)}
.pop-daftar dd{margin:0;font-weight:600;text-align:right}
.pop-catatan{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--tinta-3)}
.menu-pop{padding:8px}
.menu-pop-kepala{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--garis)}
.menu-pop-kepala div{display:flex;flex-direction:column;line-height:1.3}
.menu-pop-kepala small{color:var(--tinta-3)}
.nav-link{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:var(--r-1);background:transparent;color:var(--tinta);font-size:14px;font-weight:500;text-align:left;text-decoration:none}
.nav-link:hover{background:var(--sorot);text-decoration:none}
.nav-link svg{color:var(--tinta-3)}
.menu-pilihan{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;font-size:13px;color:var(--tinta-2)}
.menu-pilihan .segmented button{min-height:30px;padding:0 10px}
.menu-tip{padding:6px 10px 2px;font-size:12px;color:var(--tinta-3)}
.menu-pop hr{margin:6px 0}

/* Ruang kerja dan topbar */
.workspace{min-width:0;display:flex;flex-direction:column;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:var(--tinggi-topbar);padding:0 32px;background:var(--permukaan);border-bottom:1px solid var(--garis)}
.topbar-logo,.topbar-judul{display:none}
.topbar-kiri{flex:1;min-width:0;display:flex;align-items:center;height:100%}
.jejak{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--tinta-3)}
.jejak-bisnis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.jejak strong{color:var(--tinta);font-weight:600;white-space:nowrap}
.header-tabs{display:flex;align-items:stretch;gap:24px;height:100%;overflow-x:auto;scrollbar-width:none}
.header-tabs::-webkit-scrollbar{display:none}
.header-tabs a{display:flex;align-items:center;gap:6px;border-bottom:2px solid transparent;color:var(--tinta-2);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none}
.header-tabs a:hover{color:var(--tinta);text-decoration:none}
.header-tabs a[aria-current=page]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:600}
.header-tabs .count{margin-left:0}
.topbar-kanan{display:flex;align-items:center;gap:8px;flex:none}
.status-wrap{position:relative}
.status-starmy{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--garis);border-radius:var(--r-pil);background:var(--permukaan);color:var(--tinta);font-size:13px;font-weight:600;white-space:nowrap}
.status-starmy:hover{border-color:var(--garis-kuat)}
.status-starmy>svg{opacity:.7}
.status-starmy.tertunda{background:var(--kunyit-lembut);border-color:var(--kunyit-garis);color:var(--kunyit)}
.status-starmy.terputus{background:var(--merah-lembut);border-color:var(--merah-garis);color:var(--merah)}
.status-starmy.belum{color:var(--tinta-2)}
.subnav{display:none}
.main-content{flex:1;min-width:0;padding:32px 40px 56px;outline:none}
.penuh-shell .main-content{padding:0;display:flex;flex-direction:column}
.inbox-shell .main-content{padding:0}
.legacy-banner{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px;padding:12px 14px;border:1px solid var(--kunyit-garis);border-radius:var(--r-2);background:var(--kunyit-lembut);color:var(--tinta);font-size:13px;line-height:1.5}
.legacy-banner svg{color:var(--kunyit);flex:none;margin-top:2px}
.legacy-banner a{color:var(--hutan-teks);font-weight:600;text-decoration:underline}
.app-footer{padding:16px 40px 24px;font-size:12px;color:var(--tinta-3)}
.penuh-shell .app-footer,.inbox-shell .app-footer{display:none}
.bottom-tabs{display:none}

@media (max-width:1180px) and (min-width:761px){
 .app-shell,.app-shell.ciut{grid-template-columns:var(--lebar-ciut) minmax(0,1fr)}
 .app-shell .menu-teks,.app-shell .bisnis-teks,.app-shell .bisnis>svg,.app-shell .akun-teks,.app-shell .sidebar-logo img,.sidebar-ciut-btn{display:none}
 .app-shell .sidebar-logo .logo-tanda{display:block}
 .app-shell .sidebar-atas{justify-content:center;padding-left:0}
 .app-shell .bisnis{justify-content:center;padding:8px 0}
 .app-shell .menu-link,.app-shell .akun{justify-content:center;padding-left:0;padding-right:0}
 .app-shell .menu-badge{position:absolute;top:1px;right:4px;min-width:20px;height:20px;padding:0 5px}
 .main-content{padding:28px 28px 48px}
 .topbar{padding:0 24px}
}
@media (max-width:760px){
 .app-shell,.app-shell.ciut{display:block}
 .sidebar{display:none}
 .topbar{padding:0 8px 0 16px;gap:8px}
 .topbar-logo{display:flex;align-items:center;flex:none}
 .topbar-kiri{display:block;height:auto}
 .topbar-kiri .header-tabs,.topbar-kiri .jejak{display:none}
 .topbar-judul{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .status-starmy{height:40px}
 .akun-kecil{width:44px;height:44px}
 .subnav{position:sticky;top:var(--tinggi-topbar);z-index:25;display:flex;gap:4px;padding:8px 12px;overflow-x:auto;background:var(--permukaan);border-bottom:1px solid var(--garis);scrollbar-width:none}
 .subnav::-webkit-scrollbar{display:none}
 .subnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-pil);color:var(--tinta-2);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none}
 .subnav a[aria-current=page]{background:var(--jalur);color:var(--tinta);font-weight:600}
 .main-content{padding:20px 16px calc(96px + env(safe-area-inset-bottom,0px))}
 .penuh-shell .main-content{padding:0 0 calc(80px + env(safe-area-inset-bottom,0px))}
 .inbox-shell .main-content{padding:0 0 calc(68px + env(safe-area-inset-bottom,0px))}
 .inbox-shell:has(.has-selection) .bottom-tabs{display:none!important}
 .inbox-shell:has(.has-selection) .main-content{padding-bottom:0}
 .app-footer{display:none}
 .bottom-tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:2px;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:var(--permukaan);border-top:1px solid var(--garis)}
 .tab-link{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:54px;padding:6px 2px;border-radius:var(--r-2);color:var(--tinta-3);font-size:12px;font-weight:600;text-decoration:none}
 .tab-link:hover{color:var(--tinta);text-decoration:none}
 .tab-link[aria-current=page]{background:var(--jalur);color:var(--tinta)}
 .tab-link .menu-teks{max-width:100%;text-align:center}
 .tab-link .menu-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 5px}
 .popover{position:fixed;left:12px;right:12px;top:calc(var(--tinggi-topbar) + 8px);width:auto}
}
.menu-bisnis{padding:4px 2px 8px}
.menu-bisnis .bisnis{margin-bottom:0}

/* Target sentuh shell di HP */
@media (max-width:760px){
 .topbar-logo{min-width:44px;min-height:44px;justify-content:center}
 .status-starmy{height:44px}
 .subnav a{min-height:44px}
 .skip-link{min-height:44px;display:inline-flex;align-items:center}
}

/* Redesign tahap 2: kelompok menu, tab bar HP dengan "Lainnya" */
.menu-grup{margin:14px 12px 4px;font-size:12px;font-weight:600;line-height:16px;color:var(--tinta-3)}
.sidebar-menu .menu-grup:first-child{margin-top:4px}
.ciut .menu-grup{display:none}
.tab-lainnya{position:relative;flex:1;min-width:0;display:flex}
.tab-lainnya>summary.tab-link{width:100%;list-style:none;cursor:pointer}
.tab-lainnya>summary::-webkit-details-marker{display:none}
.tab-lainnya>.tab-link[aria-current=page]{background:var(--jalur);color:var(--tinta)}
.tab-lainnya:not([open]) .lainnya-pop{display:none}
.lainnya-pop{position:absolute;right:0;left:auto;top:auto;bottom:calc(100% + 8px);z-index:50;min-width:230px;display:grid;gap:2px;padding:6px}
.bottom-tabs .menu-teks{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}

/* Redesign tahap 3: sidebar Ink dengan pill Lime, mengikuti konsep CRM di brand kit. Kontras teks >= 7:1. */
.app-shell .sidebar{background:#171B19;border-right-color:#171B19;color:#E9ECE7}
[data-theme=dark] .app-shell .sidebar{background:#0A0D0B;border-right-color:#232A26}
.app-shell .sidebar .sidebar-logo{color:#F5F4EE}
.app-shell .sidebar .sidebar-logo img{filter:brightness(0) invert(.96)}
.app-shell .sidebar .menu-link{color:#C9CFCA}
.app-shell .sidebar .menu-link:hover{background:#252B28;color:#F5F4EE}
.app-shell .sidebar .menu-link[aria-current=page]{background:#D9F06B;color:#171B19;font-weight:700;box-shadow:none}
.app-shell .sidebar .menu-grup{color:#A8B0A9}
.app-shell .sidebar .menu-badge{background:#F2B36A;color:#171B19}
.app-shell .sidebar .menu-link[aria-current=page] .menu-badge{background:#171B19;color:#D9F06B}
.app-shell .sidebar .bisnis{background:#252B28;border-color:#252B28;color:#E9ECE7}
.app-shell .sidebar .bisnis:hover,.app-shell .sidebar .bisnis.pilih:hover{border-color:#3A423E}
.app-shell .sidebar .bisnis-tanda{background:#D9F06B;color:#171B19}
.app-shell .sidebar .bisnis-teks small,.app-shell .sidebar .bisnis>svg{color:#A8B0A9}
.app-shell .sidebar .sidebar-bawah{border-top-color:#2B332E}
.app-shell .sidebar .akun{color:#E9ECE7}
.app-shell .sidebar .akun small{color:#A8B0A9}
.app-shell .sidebar .akun:hover{background:#252B28}
.app-shell .sidebar .akun .avatar{background:#2F3632;color:#E9ECE7}
.app-shell .sidebar .icon-btn{color:#A8B0A9}
.app-shell .sidebar .icon-btn:hover{background:#252B28;color:#F5F4EE}
.app-shell .sidebar :focus-visible{outline-color:#D9F06B}
.app-shell .sidebar .popover{color:var(--tinta)}
.app-shell .sidebar .popover small{color:var(--tinta-3)}

/* Aturan halaman dari sistem lama (tahap 1-3), dibersihkan otomatis: token lama dipetakan ke token Arah B,
   huruf minimal 12 px, tanpa huruf kapital semua, radius diseragamkan. Aturan shell, Hari ini, dan komponen
   dasar tidak ada di sini karena sudah ditulis ulang di styles/shell.css, hari-ini.css, dan komponen.css. */
.display{font-family:var(--font-body-stack)}
.faint{color:var(--faint)}
.num{font-family:var(--font-body-stack);font-weight:900;font-variant-numeric:tabular-nums}
.row,.button-row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.wrap{flex-wrap:wrap}
.mt{margin-top:14px}
.btn.icon-only{padding:0;width:42px}
.btn.icon-only.small{width:34px}
.button-row{flex-wrap:wrap}
.danger-link{color:var(--danger)}
.badge.outline{background:transparent;border-color:var(--border-strong)}
.tiny-dot{display:inline-block;width:8px;height:8px;background:var(--brand-bright);border-radius:50%;flex-shrink:0}

.field>.label{font-size:12.5px;font-weight:800;color:var(--muted)}
.tiny-dot{background:var(--orange)}
.avatar.lg{width:56px;height:56px;font-size:18px;border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;border:1.5px solid var(--border);background:var(--panel);font-size:12.5px;font-weight:700;color:var(--muted);font-family:var(--font-body-stack)}
.chip.selected,.chip[aria-pressed=true]{background:var(--soft);color:var(--brand);border-color:var(--brand-bright)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.skeleton{background:linear-gradient(90deg,var(--panel3),var(--panel2),var(--panel3));background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px;min-height:14px}
@keyframes shimmer{to{background-position:-200% 0}}
.idle-notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;background:var(--navy);color:var(--krem);padding:12px 18px;border-radius:14px;font-size:13px;box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:14px}
.idle-notice button{background:var(--orange);color:var(--on-orange);border:0;border-radius:9px;padding:6px 12px;font-weight:800}
.page.narrow{max-width:760px}
.panel.tight{padding:14px 16px}
.panel.flat{box-shadow:none}
.panel.tint{background:var(--panel2)}
.panel.mint{background:var(--soft);border-color:transparent}
.divider{height:1px;background:var(--border);margin:14px 0}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.list-row:first-of-type{border-top:0}
.list-row strong{display:block;font-size:13.5px}
.list-row small{display:block;color:var(--muted);margin-top:1px}
.list-row p{font-size:12.5px}
.list-row.link{cursor:pointer;border-radius:10px;padding-left:6px;padding-right:6px;margin:0 -6px}
.list-row.link:hover{background:var(--panel2)}
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel)}
tr.clickable{cursor:pointer}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;overflow-wrap:anywhere}
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--border);margin-bottom:12px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:8px 12px;font-size:13px;font-weight:800;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap}
.tabs button.selected,.tabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand-bright)}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar>select{width:auto;min-width:150px}
.search-field{position:relative;flex:1;min-width:200px}
.search-field>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search-field input{padding-left:38px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-bottom:14px}
.form-grid .span{grid-column:1/-1}

.editor-panel{border-color:var(--brand-bright);animation:rise .18s ease-out}
.check-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;cursor:pointer}

.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;tab-size:2;min-height:200px}

.token-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:12px;flex-wrap:wrap}
.token-row:first-of-type{border-top:0}
.search-trigger{display:flex;align-items:center;gap:10px;width:min(100%,560px);height:38px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--faint);font-family:var(--font-body-stack);font-size:13px;font-weight:500;text-align:left;cursor:text;transition:border-color .15s,box-shadow .15s}
.search-trigger:hover{border-color:var(--brand-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-bright) 16%,transparent)}
.search-trigger-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.login-page{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.login-story{position:relative;isolation:isolate;overflow:hidden;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;color:#F8F1E6;background:radial-gradient(90rem 38rem at 82% -6rem,rgba(18,165,148,.22),transparent 62%),linear-gradient(180deg,#0A1820 0%,#0E1E27 46%,#10262F 100%)}
.login-story::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;inset:0;z-index:-1;opacity:.85;background:radial-gradient(1.4px 1.4px at 7% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 16% 62%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 27% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 38% 33%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 46% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 54% 48%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 7%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 71% 27%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 93% 41%,#fff 50%,transparent 51%);-webkit-mask:linear-gradient(#000 40%,transparent 78%);mask:linear-gradient(#000 40%,transparent 78%)}
.login-story h1{font-size:clamp(34px,4vw,54px);line-height:.98;letter-spacing:-.04em;max-width:13ch;font-weight:900;text-wrap:balance}
.login-story h1 em{display:block;font-style:normal;color:#7FF0D8;text-shadow:0 0 42px rgba(37,208,180,.45)}
.login-story .lede{font-size:16px;line-height:1.62;max-width:40ch;margin-top:16px;color:rgba(248,241,230,.82)}
.login-demo{display:flex;flex-direction:column;gap:8px;max-width:400px;margin-top:24px;padding:16px;border-radius:var(--radius);background:#132834;box-shadow:0 0 0 1px rgba(248,241,230,.08),0 30px 60px -32px rgba(0,0,0,.8)}
.login-demo .bubble{background:#203B47;color:#F8F1E6;padding:10px 14px;border-radius:6px var(--radius) var(--radius) var(--radius);font-size:13.5px;line-height:1.5;max-width:86%;animation:rise .3s ease-out both}
.login-demo .bubble.omiy{align-self:flex-end;background:#0F5A53;border-radius:var(--radius) 6px var(--radius) var(--radius);animation-delay:.25s}
.login-demo .bubble.omiy+.bubble{animation-delay:.5s}
.login-demo .bubble.omiy:nth-child(4){animation-delay:.75s}
.login-story-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.login-story-foot small{font-size:12.5px;color:rgba(248,241,230,.62);max-width:34ch;line-height:1.5}
.login-mascot{width:140px;height:140px;flex-shrink:0;filter:drop-shadow(0 22px 28px rgba(0,0,0,.5))}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:36px 24px;background:var(--bg)}
.login-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login-form .brand-small{display:none}
.login-form h2{font-size:26px;letter-spacing:-.03em}
.login-form>p.muted{font-size:14px;margin-top:-6px}
.login-form .btn{margin-top:4px;min-height:48px;font-size:15px}
.login-help{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.login-security{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--brand);background:var(--soft);padding:9px 12px;border-radius:999px;align-self:flex-start}
.login-website{font-size:12.5px;color:var(--muted);margin-top:8px}
.login-website a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.omiy-hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.omiy-hero::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(18,165,148,.28),transparent 68%);z-index:0}
.omiy-hero>*{position:relative;z-index:1}
.omiy-hero img{width:104px;height:104px}
.omiy-hero h1{font-size:30px}
.omiy-hero .muted{font-size:13.5px;margin-top:6px;max-width:56ch}
.omiy-hero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.omiy-hero .hero-actions{display:flex;flex-direction:column;gap:8px;min-width:190px}
.setup-list{display:flex;flex-direction:column}
.setup-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--border)}
.setup-item:first-child{border-top:0;padding-top:4px}
.setup-item:last-child{padding-bottom:4px}
.setup-mark{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--border-strong);color:var(--faint);font-family:var(--font-body-stack);font-weight:900;font-size:12px;margin-top:1px}
.setup-item.done .setup-mark{background:var(--brand-bright);border-color:var(--brand-bright);color:#fff}
.setup-item.pending .setup-mark{border-style:dashed}
.setup-item h3{font-size:14.5px}
.setup-item p{font-size:12.5px;color:var(--muted);margin-top:2px}
.setup-item .btn{margin-left:auto;align-self:center}
.two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}

.older{align-self:center}

.context-section{padding:14px 16px;border-bottom:1px solid var(--border)}
.context-section h3{font-size:13px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.context-section .kv{font-size:12.5px}
.note-card{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:9px 11px;font-size:12.5px;margin-bottom:8px}
.note-card p{white-space:pre-wrap;overflow-wrap:anywhere}
.note-card small{display:block;color:var(--faint);font-size:12px;margin-top:4px}
.note-card.esc{border-left:3px solid var(--orange)}
.note-card.esc.resolved{border-left-color:var(--brand-bright);opacity:.85}
.note-form textarea{min-height:64px;font-size:13px}
.note-form .button-row{margin-top:8px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:4px 10px;border-radius:99px;background:var(--panel3);color:var(--muted);font-weight:700}
.connection-pill.on{background:var(--soft);color:var(--brand)}
.connection-pill.warn{background:var(--warning-soft);color:var(--warning)}

.sync-card{display:flex;flex-direction:column;gap:10px}
.sync-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px}
.sync-row .status-dot{margin-top:6px}
.sync-row strong{display:block;font-size:13px}
.sync-row span{color:var(--muted)}

.config-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.config-nav a{font-size:12.5px;font-weight:800;color:var(--muted);padding:6px 11px;border-radius:99px;background:var(--panel3);font-family:var(--font-body-stack)}
.config-nav a:hover{color:var(--brand);background:var(--soft)}

.onboard-page{max-width:820px;margin:0 auto}
.onboard-next{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--brand);font-size:13.5px;margin:8px 0 16px}
.onboard-next svg{flex-shrink:0;margin-top:2px}
.onboard-next a{font-weight:800;text-decoration:underline}
.onboard-intro{display:flex;gap:18px;align-items:center;margin-bottom:6px}
.onboard-intro img{width:84px;height:84px;flex-shrink:0}
.onboard-intro h1{font-size:26px}
.onboard-intro p{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:58ch}

.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-bar>select,.filter-bar>input{width:auto;min-width:160px}

@media(max-width:1160px){
 
 
 
 
 
 
 
 .two-col{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:980px){
 .login-page{grid-template-columns:1fr}
 .login-story{padding:28px 24px;gap:22px}
 .login-story .lede{font-size:14.5px}
 .login-demo{display:none}
 .login-mascot{width:96px;height:96px}
 .login-form-wrap{padding:28px 20px}
 .omiy-hero{grid-template-columns:auto 1fr}
 .omiy-hero .hero-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:760px){
 .form-grid{grid-template-columns:1fr}
 
 
 
 
 
 
 
 
 
 
 
 
 .login-story{padding:22px 18px}
 .login-story h1{font-size:28px}
 .login-story-foot small{display:none}
 .login-form h2{font-size:22px}
 .omiy-hero{padding:18px;gap:14px}
 .omiy-hero img{width:72px;height:72px}
 .omiy-hero h1{font-size:24px}
 .onboard-intro img{width:60px;height:60px}
 .setup-item{flex-wrap:wrap}
 .setup-item .btn{margin-left:44px}
 
 .toolbar>select,.filter-bar>select{width:100%}
 .search-field{min-width:0;width:100%;flex:1 1 100%}
 
 
}

.ai-import-sources{font-size:12px;overflow-wrap:anywhere}
.ai-import-sources ul,.omiy-defaults ul{padding-left:20px;margin:8px 0 14px}
.ai-import-sources li{margin:6px 0}
.ai-import-sources a{color:var(--brand);text-decoration:underline}
.ai-import-sources small{display:block;color:var(--muted)}
.omiy-defaults li{margin:6px 0;font-size:13px}
.business-example .business-example-text{white-space:pre-wrap;font-size:13px;line-height:1.6;padding:12px;border-radius:8px;background:var(--panel);max-height:320px;overflow:auto}
.ai-connection>summary{gap:8px;flex-wrap:wrap}

.escalation-nav-icon{position:relative;display:inline-flex;flex-shrink:0;width:22px;height:24px;align-items:center}
.escalation-nav-count{position:absolute;top:-6px;left:10px;min-width:17px;height:17px;padding:0 3px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#c52235;color:#fff;font-size:12px;line-height:1;font-weight:800;border:1px solid var(--panel)}

.preset-choice{padding:18px;background:var(--soft);border-radius:12px;margin-bottom:24px}
.preset-choice .hint{margin-bottom:0}
.card,.report-card{border-radius:var(--radius)}
@media (max-width:900px){
 .login-story h1{font-size:clamp(30px,8vw,40px)}
 .login-story{padding:28px 22px}
 .login-demo{max-width:none}
 .login-mascot{width:96px;height:96px}
}

.older{background:var(--panel);border-color:var(--border-strong);border-radius:999px}

.context-section{background:var(--panel);margin:12px 12px 0;padding:14px 16px;border:0;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--border)}

.context-section h3,.context-section>strong{font-family:var(--font-body-stack);font-weight:800;font-size:13px;color:var(--brand)}
.context-section.hint{background:transparent;box-shadow:none;color:var(--muted)}
.context-section .kv{row-gap:8px}
.context-section .kv>div,.context-section .kv dt+dd{border-top:1.5px dashed var(--border)}
.context-section .kv dt{font-size:12px;font-weight:600;padding-top:8px}
.context-section .kv dd{font-family:var(--font-body-stack);font-weight:700;padding-top:8px}
.note-card{background:var(--panel2);border:0;border-radius:var(--radius-xs);box-shadow:0 0 0 1px var(--border)}
.note-card.esc{box-shadow:0 0 0 1px var(--border),inset 3px 0 0 var(--orange)}
.note-card.esc.resolved{box-shadow:0 0 0 1px var(--border),inset 3px 0 0 var(--brand-bright)}
.note-form textarea{border-radius:var(--radius-sm)}
.connection-pill{background:var(--pasir);color:var(--pasir-tinta);font-family:var(--font-body-stack);font-weight:800;padding:6px 12px}
.connection-pill.on{background:var(--soft);color:var(--brand)}
.connection-pill.warn{background:var(--orange-soft);color:var(--orange-ink)}
.omiy-hero{background:radial-gradient(60rem 26rem at 85% -10rem,rgba(18,165,148,.28),transparent 62%),linear-gradient(180deg,#0A1820,#0E1E27 55%,#10262F);color:#F8F1E6;border:0;box-shadow:var(--shadow-pop);border-radius:var(--radius)}
.omiy-hero::before{background:radial-gradient(circle,rgba(37,208,180,.35),transparent 68%)}
.omiy-hero .eyebrow{color:#9FE9DA}
.omiy-hero h1{color:#F8F1E6;text-shadow:0 0 42px rgba(37,208,180,.25)}
.omiy-hero .muted,.omiy-hero .hint{color:rgba(248,241,230,.78)}
.omiy-hero .badge{background:rgba(248,241,230,.1);color:#F8F1E6;border-color:transparent}
.omiy-hero .badge.positive{background:rgba(18,165,148,.28);color:#9FE9DA}
.omiy-hero .badge.warm{background:rgba(255,138,61,.25);color:#FFC99E}
.omiy-hero .btn{background:#F8F1E6;color:var(--navy)}
.omiy-hero .btn:hover:not(:disabled){background:#fff;color:var(--navy)}
.omiy-hero .btn.accent{background:var(--orange);color:var(--on-orange)}
.omiy-hero .btn.secondary{background:transparent;color:#F8F1E6;border-color:rgba(248,241,230,.35)}
.omiy-hero .btn.secondary:hover:not(:disabled){background:rgba(248,241,230,.1);border-color:#7FF0D8;color:#F8F1E6}
.omiy-hero .text-link{color:#7FF0D8}
.omiy-hero img{filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}

.list-row{border-top:1px dashed var(--border)}
.list-row .avatar{border-radius:12px 12px 12px 4px}
@media(max-width:760px){
 .context-section{margin:10px 10px 0}
 
 .omiy-hero{border-radius:var(--radius)}
}
.context-section h3{flex-wrap:wrap;justify-content:flex-start;row-gap:2px}
.context-section h3>span:not(:first-child),.context-section h3>small{flex-basis:100%;font-family:var(--font-body-stack);font-weight:600;font-size:12px;color:var(--muted)}
.context-section h3>button,.context-section h3>a{margin-left:auto;flex-basis:auto}
.panel.flat{box-shadow:none}
.list-row{border-top:1px solid var(--border)}
.list-row .avatar{border-radius:50%}
.tabs button.selected,.tabs button[aria-selected=true]{color:var(--brand-strong);border-bottom-color:var(--text)}

.conv-reason{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--orange-ink);margin-top:3px;font-family:var(--font-body-stack);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conv-reason.team{color:var(--pasir-tinta)}
.conv-reason.team .tiny-dot{background:var(--pasir-tinta)}

.assist-card{display:flex;gap:14px;padding:14px 18px;margin:16px 20px 0;background:var(--orange-soft);border-radius:var(--radius);align-items:flex-start;flex-shrink:0;animation:rise .18s ease-out}
.assist-icon{width:36px;height:36px;border-radius:50%;background:var(--orange);color:var(--on-orange);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.assist-card strong{display:block;font-family:var(--font-body-stack);font-size:14px;font-weight:800}
.assist-card p{font-size:13px;margin:2px 0 10px;overflow-wrap:anywhere}
.assist-card .button-row{gap:8px}
.assist-card .btn.secondary{background:var(--panel);border-color:transparent}

.file-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;padding:4px 6px 4px 10px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:12px;font-weight:700}
.file-chip small{color:var(--muted);white-space:nowrap}
.file-chip-remove{border:0;background:var(--panel);color:var(--text);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}

.context-section{margin:0;padding:16px 20px;border-radius:0;box-shadow:none;border-bottom:1px solid var(--border);background:transparent}

.context-section h3,.context-section>strong{color:var(--muted);font-size:12px}
.note-card{border-radius:14px}
.note-card.esc{box-shadow:0 0 0 1px var(--border);background:var(--orange-soft)}
.note-card.esc.resolved{background:var(--panel2)}
.omiy-hero{background:var(--panel);color:var(--text);border:1px solid var(--border);box-shadow:none;border-radius:var(--radius)}
.omiy-hero::before{background:radial-gradient(circle,rgba(18,165,148,.2),transparent 68%)}
.omiy-hero .eyebrow{color:var(--brand)}
.omiy-hero h1{color:var(--text);text-shadow:none}
.omiy-hero .muted,.omiy-hero .hint{color:var(--muted)}
.omiy-hero .badge{background:var(--panel3);color:var(--muted)}
.omiy-hero .badge.positive{background:var(--soft);color:var(--brand)}
.omiy-hero .badge.warm{background:var(--orange-soft);color:var(--orange-ink)}
.omiy-hero .badge.info{background:var(--info-soft);color:var(--text)}
.omiy-hero .btn{background:var(--text);color:var(--bg)}
.omiy-hero .btn:hover:not(:disabled){background:var(--brand-strong);color:#fff}
.omiy-hero .btn.accent{background:var(--orange);color:var(--on-orange)}
.omiy-hero .btn.secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.omiy-hero .btn.secondary:hover:not(:disabled){background:var(--soft);border-color:var(--brand-bright);color:var(--text)}
.omiy-hero .text-link{color:var(--brand)}
.omiy-hero img{filter:none}
@media(max-width:760px){
 
 
 
 .assist-card{margin:12px 12px 0;padding:12px 14px}
 
 
}
.num{font-weight:600}

.login-page{background:var(--bg)}
.login-story{background:var(--forest);padding:48px 60px}
.login-story::before{display:none}
.login-story h1{max-width:16ch;font-weight:600;font-size:48px;line-height:1.1}
.login-story h1 em{color:var(--lime);text-shadow:none}
.login-story .lede{font-size:14px;line-height:1.8}
.login-hero{display:block;width:220px;height:220px;object-fit:contain;margin:28px auto 0}
.login-mascot{display:none}
.login-form{max-width:360px}
.login-form h2{font-size:28px;font-weight:600}
.login-form-wrap{background:var(--surface)}
.login-story-foot small{color:#C8D3CB}

@media(max-width:760px){
 
 
 .login-story{padding:28px 24px}
 .login-story h1{font-size:32px}
 .login-hero{width:150px;height:150px}
 .login-story .lede{font-size:13px}
 .login-form-wrap{padding:28px 24px}
}
.login-page{display:grid;grid-template-columns:1fr 1fr;min-height:100dvh;padding:28px;gap:28px}
.login-form-wrap{grid-column:1;grid-row:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px;background:var(--bg)}
.login-brand{position:absolute;top:20px;left:64px}
.login-brand img{width:128px;height:auto}
.login-form{width:100%;max-width:380px;margin:50px 0}
.login-form h2{font-size:32px;letter-spacing:-.045em}
.login-form>.muted{font-size:12px}
.login-form input{background:var(--bg);border:1px solid var(--line);border-radius:6px;min-height:44px;font-size:12px}
.login-security{border:0;justify-content:flex-start;padding:0;font-size:12px}
.login-help,.login-website{font-size:12px}
.login-company{position:absolute;bottom:10px;left:64px;font-size:12px;color:var(--muted)}
.login-story{grid-column:2;grid-row:1;border-radius:240px 240px 10px 10px;background:var(--hero-bg);color:var(--text);padding:32px 42px;gap:12px}
.login-hero{width:100%;height:auto;max-height:58dvh;object-fit:contain;margin:0 auto}
.login-story h1{font-size:40px;max-width:20ch}
.login-story h1 em{color:var(--text)}
.login-story .eyebrow{color:var(--muted);margin-bottom:16px}
.handover-summary{display:block;font-size:12px;border-radius:0;background:var(--sage);padding:12px 16px}
.handover-summary summary{cursor:pointer;font-weight:600}
.handover-summary-content{display:flex;gap:12px;padding-top:12px}
@media(max-width:760px){
 .login-page{display:flex;flex-direction:column;padding:0;gap:0}
 .login-form-wrap{padding:92px 24px 64px;min-height:100dvh}
 .login-brand{left:24px;top:28px}
 .login-company{left:24px;bottom:20px}
 .login-form{margin:0;max-width:none}
 .login-story{display:none}
 .login-form h2{font-size:28px}
 .handover-summary{font-size:12px}
}
.step-number{border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;font-size:12px}
.login-security{background:none;color:var(--muted)}
@media(max-width:760px){
 .login-form-wrap{width:100%}
}
.team-rephrase-option{margin-bottom:10px}
.team-rephrase-option .check-row{padding:0;align-items:center;line-height:1.4}
.team-rephrase-option input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;accent-color:var(--primary)}
.team-rephrase-option>small{display:block;margin:4px 0 0 26px;font-size:12px;line-height:1.5}

.service-page{max-width:1040px}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:32px}
.service-card{padding:24px}
.service-card h2{font-size:16px;color:var(--tinta-2);margin-bottom:12px}
.service-value{font-size:24px;font-weight:700;margin-bottom:12px}
.service-limits h2{font-size:20px;margin-bottom:16px}
.service-limits dl{padding:0 24px;margin-bottom:20px}
.service-limits dl>div{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--garis)}
.service-limits dl>div:last-child{border-bottom:0}
.service-limits dt{font-weight:600}
.service-limits dd{margin:0;color:var(--tinta-2)}
@media(max-width:760px){.service-grid{grid-template-columns:1fr;gap:16px}.service-limits dl>div{grid-template-columns:1fr;gap:8px}}
/* Redesign tahap 4: status hanya-baca di atas, label opsional */
.dikelola-platform{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan-2);font-size:13px;color:var(--tinta-2)}
.opsional{font-size:.8em;font-weight:500;color:var(--tinta-3)}

/* Layar teknis lama (runtime terkelola, tim dua agent, wizard AI). Dibersihkan otomatis ke token Arah B. */
.wizard-page{max-width:960px}
.wizard-messages{display:flex;flex-direction:column;gap:14px;max-height:52dvh;overflow-y:auto;padding:8px 4px 25px}
.wizard-conversation .composer{margin-bottom:15px}
.wizard-page .panel>p{font-size:12px;margin:12px 0 20px}
.omiy-page{max-width:1440px}
.omiy-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.omiy-stats>div{padding:20px 24px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.omiy-stats small,.omiy-status-grid small,.omiy-version small,.omiy-review small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.omiy-stats strong{font-size:32px;display:block;margin-top:8px}
.omiy-agent-card{padding:24px;min-width:0}
.omiy-agent-card h2{margin-top:18px}
.omiy-card-facts{margin:18px 0 24px;display:grid;gap:12px}
.omiy-card-facts>div{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.omiy-card-facts strong{max-width:65%;text-align:right;overflow-wrap:anywhere}
.omiy-agent-card>.btn{display:flex;justify-content:space-between}
.omiy-bottom-note{display:flex;align-items:center;gap:14px;margin:28px 0;color:var(--muted);font-size:13px}
.omiy-wizard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;margin-top:26px}
.omiy-stepper{display:flex;flex-direction:column;gap:10px}
.omiy-stepper>button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;padding:13px;border-radius:14px;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.omiy-stepper>button>span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:none;border:1px solid var(--border);border-radius:50%;font-size:12px}
.omiy-stepper .current{background:var(--soft);color:var(--brand)}
.omiy-stepper .current>span,.omiy-stepper .complete>span{background:var(--brand);color:white;border-color:var(--brand)}
.omiy-stepper>p{font-size:12px;line-height:1.8;padding:4px 12px}
.omiy-editor{padding:28px}
.omiy-editor>h2{margin-bottom:24px}
.omiy-form{display:grid;gap:20px}
.omiy-page fieldset{border:0;padding:0;margin:0;min-width:0}
.omiy-page input,.omiy-page select,.omiy-page textarea{min-width:0;max-width:100%}
.omiy-page textarea{resize:vertical;line-height:1.7}
.omiy-form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.omiy-documents{padding:22px;background:var(--bg);border-radius:var(--radius)}
.omiy-documents input[type=file]{font-size:13px;width:100%}
.omiy-document{border-bottom:1px solid var(--border);padding:16px 0}
.omiy-document summary{cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.omiy-document summary small{font-weight:400;color:var(--muted);margin-left:10px}
.omiy-document[open] .field{margin-top:14px}
.omiy-check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.7}
.omiy-check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--brand)}
.omiy-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.omiy-review-item{padding:18px;background:var(--bg);border-radius:14px;min-width:0;overflow-wrap:anywhere}
.omiy-review-item strong{display:block;font-size:16px;margin:9px 0}
.omiy-review-item span{font-size:13px;color:var(--muted);line-height:1.7}
.omiy-review>.notice{grid-column:1/-1}
.omiy-tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 0;margin:18px 0 24px}
.omiy-tabs>button{white-space:nowrap;padding:11px 16px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.omiy-tabs>button.active{background:var(--panel);border-color:var(--border);color:var(--text);font-weight:600}
.omiy-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.omiy-status-grid>.panel{padding:22px;min-width:0}
.omiy-status-grid small{margin-bottom:15px}
.omiy-status-grid p{font-size:12px;overflow-wrap:anywhere;margin-top:16px}
.omiy-section{padding:24px;margin-top:22px;min-width:0}
.omiy-section h2{font-size:19px}
.omiy-section>.muted{font-size:13px;line-height:1.8}
.omiy-two-column{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.omiy-section progress{width:100%;height:12px;accent-color:var(--brand);margin:16px 0 4px}
.omiy-pair{display:flex;align-items:center;gap:30px;padding:20px 0}
.omiy-pair img{width:256px;max-width:100%;height:auto;border:12px solid white;border-radius:var(--radius);flex:none}
.omiy-pair p{max-width:440px;line-height:1.8}
.omiy-version{display:flex;align-items:center;gap:30px;margin:24px 0}
.omiy-version strong{font-size:19px;display:block;margin-top:9px}
.omiy-danger{border-top:1px solid var(--border);margin-top:25px;padding-top:20px}
.omiy-danger summary{color:var(--danger);cursor:pointer}
.omiy-danger p{font-size:13px;line-height:1.8}
.omiy-preserve{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85}
.omiy-job,.omiy-job-detail{border-top:1px solid var(--border);padding:18px 0}
.omiy-job,.omiy-job-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:18px}
.omiy-job-detail>summary{cursor:pointer;list-style:none}
.omiy-job-detail small{display:block;font-size:12px;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
.omiy-events{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.omiy-events li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;font-size:12px;line-height:1.7}
.omiy-events time{color:var(--muted)}
.omiy-events span{overflow-wrap:anywhere}
.omiy-audit{max-height:460px;overflow:auto}
.omiy-audit>div{display:grid;grid-template-columns:150px 1fr 1.5fr 1fr;gap:12px;border-top:1px solid var(--border);padding:13px 0;font-size:12px;overflow-wrap:anywhere}
.omiy-audit time{color:var(--muted)}
.omiy-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);color:var(--text);padding:28px;box-shadow:0 25px 100px #001c2050}
.omiy-dialog::backdrop{background:#092e3566;backdrop-filter:blur(3px)}
.omiy-dialog .field{margin:18px 0}
.omiy-dialog p{line-height:1.8;font-size:14px}
.omiy-dialog .btn{min-width:100px}
.omiy-dialog .omiy-check{margin:18px 0}
.omiy-page .badge.danger{color:#a63434;background:#fff0ee}
.omiy-page .badge.warning{color:#80620a;background:#fff3cd}
.omiy-page .btn.danger{color:white;background:#a63434;border-color:#a63434}
.omiy-page :focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(max-width:1100px){
 .omiy-wizard{grid-template-columns:180px minmax(0,1fr);gap:18px}
 .omiy-two-column{grid-template-columns:1fr}
 .omiy-status-grid{gap:12px}
 .omiy-status-grid>.panel{padding:18px}
}
@media(max-width:760px){
 .omiy-wizard{display:block}
 .omiy-stepper{flex-direction:row;overflow:auto;gap:3px;margin-bottom:18px}
 .omiy-stepper>button{flex-direction:column;gap:7px;font-size:12px;flex:1;min-width:65px;padding:10px 5px}
 .omiy-stepper>p{display:none}
 .omiy-editor,.omiy-section{padding:20px}
 .omiy-stats{gap:8px}
 .omiy-stats>div{padding:15px 12px;border-radius:15px}
 .omiy-stats small{font-size:12px;line-height:1.7}
 .omiy-stats strong{font-size:25px}
 .omiy-status-grid{grid-template-columns:1fr}
 .omiy-status-grid>.panel{display:grid;grid-template-columns:1fr auto;align-items:center}
 .omiy-status-grid small{margin:0}
 .omiy-status-grid p{grid-column:1/-1;margin-bottom:0}
 .omiy-review{grid-template-columns:1fr;gap:12px}
 .omiy-review-item{padding:16px}
 .omiy-tabs{gap:2px}
 .omiy-tabs>button{padding:10px;font-size:12px}
 .omiy-pair{flex-direction:column;align-items:flex-start;gap:15px}
 .omiy-pair img{align-self:center}
 .omiy-section>.row.between{flex-wrap:wrap}
 .omiy-events li{grid-template-columns:1fr;gap:2px}
 .omiy-audit>div{grid-template-columns:1fr 1fr;gap:8px}
 .omiy-version{gap:20px}
 .omiy-version strong{font-size:15px}
 .omiy-dialog{padding:22px}
 .omiy-dialog .omiy-form-actions{gap:8px}
 .omiy-job,.omiy-job-detail>summary{align-items:flex-start;flex-wrap:wrap}
 .omiy-documents{padding:15px}
 .omiy-bottom-note{align-items:flex-start}
 .omiy-bottom-note svg{flex:none;margin-top:15px}
}
.team-flow{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.team-flow>span{padding:12px 16px;background:var(--soft);border:1px solid var(--border);border-radius:14px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.team-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.team-member-grid>.omiy-section{margin-top:20px}
.team-facts{display:grid;gap:12px;margin:24px 0;font-size:13px}
.team-facts>div{display:flex;justify-content:space-between;gap:16px}
.team-facts dt{color:var(--muted)}
.team-facts dd{margin:0;max-width:65%;overflow-wrap:anywhere;text-align:right}
.team-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.team-item{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-top:1px solid var(--border);padding:20px 0;font-size:14px;overflow-wrap:anywhere;min-width:0}
.team-item>div{min-width:0}
.team-item .muted{font-size:12px;line-height:1.8}
.team-proposal{display:block}
.team-proposal summary{cursor:pointer;line-height:1.9}
.team-proposal small{display:block;font-size:12px;color:var(--muted)}
.team-proposal pre{font-family:inherit;font-size:13px;background:var(--bg);padding:18px;border-radius:14px;max-height:400px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.team-commands{display:flex;flex-direction:column;gap:12px;background:var(--bg);padding:18px;border-radius:14px;margin:18px 0}
.team-commands code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.team-steps{list-style:none;padding:0;margin:0 0 25px;display:grid;gap:20px}
.team-steps li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.6;color:var(--muted)}
.team-steps li[aria-current=step]{color:var(--brand);font-weight:700}
.team-steps span{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center}
.team-steps li[aria-current=step]>span{background:var(--brand);color:white}
.omiy-wizard-aside{padding:22px;align-self:start}
.omiy-wizard-aside h3{font-size:15px;line-height:1.7}
.omiy-wizard-aside p{font-size:12px;line-height:1.9}
.omiy-wizard-main{padding:28px;min-width:0}
.omiy-wizard-main>h2{margin-bottom:25px}
.omiy-wizard-main .omiy-form+.omiy-form{margin-top:25px}
.team-receipts{padding:14px;background:var(--bg);border-radius:12px;overflow-wrap:anywhere}
.team-receipts p{font-size:13px;line-height:1.7}
@media(max-width:760px){
 .team-member-grid{grid-template-columns:1fr;gap:0}
 .team-flow{display:grid;gap:8px}
 .team-flow>span{padding:11px 14px}
 .omiy-wizard-aside{padding:16px;margin-bottom:18px}
 .omiy-wizard-aside h3,.omiy-wizard-aside>p{display:none}
 .team-steps{display:flex;overflow:auto;gap:12px;margin:0;padding-bottom:6px}
 .team-steps li{flex-direction:column;flex:1;min-width:65px;text-align:center;font-size:12px}
 .omiy-wizard-main{padding:20px}
 .team-item{flex-wrap:wrap;gap:10px}
 .team-actions{width:100%;margin-top:12px}
 .team-actions .btn{flex:1}
 .omiy-section .row.between{align-items:flex-start}
 .team-commands code{font-size:12px}
}

/* ============================================================================
   Inbox (Arah B "Serah terima"). Menggantikan inbox-workspace.css lama dan
   aturan Inbox di halaman.css. Pola:
   - pelanggan  = gelembung putih bergaris (kiri)
   - Starmy     = gelembung jalur lime pucat dengan tanda bintang (kanan)
   - tim        = gelembung hutan lembut (kanan)
   - kendali    = panel "serah terima" di bawah percakapan: jalur bila Starmy
                  yang membalas, hutan lembut bila tim yang membalas
   - kunyit hanya untuk kasus yang menunggu manusia
   ========================================================================== */
.inbox-workspace{--tepi:clamp(16px,3.2vw,40px);display:flex;flex-direction:column;height:calc(100dvh - var(--tinggi-topbar));min-height:0;max-width:none}
.inbox-workspace>.notice{flex:none;margin:0;border-width:0 0 1px;border-radius:0;padding:10px 20px}
.inbox-workspace>.loading{padding:32px 40px}
.inbox-kosong{padding:40px}
.inbox-layout{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:var(--inbox-queue-width,320px) minmax(0,1fr);background:var(--permukaan)}

/* ---------- Daftar percakapan ---------- */
.conversation-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--garis);background:var(--permukaan)}
.queue-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 20px 14px}
.queue-heading h1{display:flex;align-items:baseline;gap:8px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.queue-heading h1 .angka{font-size:14px;font-weight:600;letter-spacing:0;color:var(--tinta-3)}
.group-filter{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--garis);border-radius:var(--r-pil);color:var(--tinta-2);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.group-filter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.group-filter:hover{border-color:var(--garis-kuat);color:var(--tinta)}
.group-filter.active{border-color:var(--tinta);background:var(--sorot);color:var(--tinta)}
.group-filter:focus-within{outline:2px solid var(--fokus);outline-offset:2px}
.inbox-search{position:relative;flex:none;width:auto;min-width:0;margin:0 20px 10px}
.inbox-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tinta-3);pointer-events:none}
.inbox-search input{min-height:40px;padding:0 40px 0 38px;border-color:var(--garis-kuat);border-radius:var(--r-2);background:var(--permukaan-2)}
.inbox-search input::-webkit-search-cancel-button{display:none}
.inbox-search .icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.queue-filters{flex:none;display:flex;gap:4px;margin:0 20px;border-bottom:1px solid var(--garis)}
.queue-filters button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin-bottom:-1px;padding:0 4px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--tinta-2);font-size:14px;font-weight:600;white-space:nowrap}
.queue-filters button:hover{color:var(--tinta)}
.queue-filters button[aria-pressed=true]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:700}
.queue-filters button span{min-width:20px;padding:0 6px;border-radius:var(--r-pil);background:var(--sorot);color:var(--tinta-2);font-size:12px;line-height:20px}
.queue-filters button[aria-pressed=true] span{background:var(--tinta);color:var(--permukaan)}
.queue-caption{flex:none;display:flex;justify-content:space-between;gap:8px;margin:0;padding:14px 20px 8px;font-size:13px;color:var(--tinta-2)}
.queue-caption span:first-child{font-weight:700;color:var(--tinta)}
.conversation-panel>.notice{margin:0 20px 10px}
.conversation-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin:0 12px;border-top:2px solid var(--tinta);scrollbar-width:thin}
.conversation-list>.loading{padding:20px 8px}
.conversation-list>.empty{padding:20px 8px}
.conversation-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;width:100%;padding:12px 8px;border:0;border-bottom:1px solid var(--garis);border-radius:0;background:transparent;color:var(--tinta);font:inherit;font-weight:400;text-align:left;cursor:pointer;transition:background-color var(--cepat)}
.conversation-item:hover{background:var(--permukaan-2)}
.conversation-item.selected{background:var(--sorot);box-shadow:inset 3px 0 0 var(--tinta)}
.conversation-item:focus-visible{outline-offset:-2px}
.conversation-item .avatar{width:40px;height:40px;font-size:13px;background:var(--sorot-kuat);color:var(--tinta-2)}
.conversation-item.perlu .avatar{background:var(--kunyit-lembut);color:var(--kunyit)}
.ci-isi{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-baris{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ci-baris strong{font-size:15px;font-weight:700}
.ci-baris time{flex:none;font-size:12px;color:var(--tinta-3)}
.conversation-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45;color:var(--tinta-2);overflow-wrap:anywhere}
.conversation-preview .dari{font-weight:600;color:var(--tinta-3)}
.conversation-status{display:flex;margin-top:4px;font-size:12px;font-weight:600;line-height:1.3}
.conversation-status>span{display:inline-flex;align-items:center;gap:5px}
.conversation-status .tanda-starmy{width:12px;height:12px}
.case-label{color:var(--kunyit)}
.tiny-dot{width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}
.st-tim{color:var(--hutan-teks)}
.st-starmy{color:var(--tinta-3)}
.queue-connection{flex:none;display:flex;align-items:center;gap:8px;margin:0;padding:12px 20px;border-top:1px solid var(--garis);font-size:13px;color:var(--tinta-2)}

/* ---------- Percakapan ---------- */
.thread-panel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--kanvas);container:utas/inline-size}
.thread-panel>.empty{margin:auto}
.thread-header{flex:none;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px var(--tepi);border-bottom:1px solid var(--garis);background:var(--permukaan)}
.tombol-kembali{display:none}
.thread-avatar{width:40px;height:40px;font-size:13px;background:var(--sorot-kuat);color:var(--tinta-2)}
.thread-header h2{font-size:18px;font-weight:800;line-height:1.25}
.thread-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:13px;color:var(--tinta-2)}
.pemilik{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pemilik.tim{color:var(--hutan-teks)}
.pemilik .tanda-starmy{width:13px;height:13px}
.pemilik .spinner{width:12px;height:12px}
.thread-stage{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--garis-kuat);border-radius:var(--r-pil);font-size:12px;font-weight:600;color:var(--tinta-2)}
.context-toggle{flex:none}
.context-toggle.active{border-color:var(--tinta);background:var(--sorot)}
.alias-bar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px var(--tepi);border-bottom:1px solid var(--garis);background:var(--permukaan)}
.alias-bar input{max-width:280px}

/* Kasus terbuka: satu-satunya pita kunyit di layar ini */
.inbox-handover{flex:none;max-height:40%;overflow-y:auto;border-bottom:1px solid var(--kunyit-garis);background:var(--kunyit-lembut);font-size:14px}
.inbox-handover summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px var(--tepi);list-style:none;color:var(--tinta)}
.inbox-handover summary::-webkit-details-marker{display:none}
.inbox-handover summary>svg:first-child{flex:none;color:var(--kunyit)}
.inbox-handover summary strong{flex:none;color:var(--kunyit);font-weight:700}
.inbox-handover summary>svg:last-child{flex:none;margin-left:auto;transition:transform var(--sedang) var(--lengkung)}
.inbox-handover[open] summary>svg:last-child{transform:rotate(180deg)}
.inbox-handover summary:focus-visible{outline-offset:-2px}
.inbox-handover>div{padding:0 var(--tepi) 14px calc(var(--tepi) + 25px);line-height:1.55}
.kasus-sejak{margin-top:4px;font-size:13px;color:var(--tinta-2)}
.inbox-handover .button-row{margin-top:10px}

/* Pesan */
.thread-gulir{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.thread-messages{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:20px var(--tepi);scroll-padding:24px;scrollbar-width:thin}
.thread-messages>.loading{margin:auto}
.thread-messages .older{align-self:center;margin-bottom:8px}
.message-day{display:flex;align-items:center;gap:12px;margin:12px 0 4px;font-size:12px;font-weight:600;color:var(--tinta-3)}
.message-day::before,.message-day::after{content:"";flex:1;height:1px;background:var(--garis)}
.message{align-self:flex-start;max-width:min(74%,640px);min-width:120px;padding:8px 12px 6px;border:1px solid var(--garis-kuat);border-radius:4px 14px 14px 14px;background:var(--permukaan);color:var(--tinta);scroll-margin:24px}
.message.outgoing{align-self:flex-end;border-color:var(--jalur-garis);border-radius:14px 4px 14px 14px;background:var(--jalur)}
.message.outgoing.human{border-color:transparent;background:var(--hutan-lembut)}
[data-theme=dark] .message.outgoing.human{border-color:var(--garis-kuat);background:var(--sorot-kuat)}
.message:focus{outline:2px solid var(--fokus);outline-offset:3px}
.message-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.message-author{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;color:var(--tinta-2)}
.message-author .tanda-starmy{width:13px;height:13px}
.message-author .peran{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-pil);background:var(--permukaan);color:var(--hutan-teks);font-weight:600}
.message p{margin:2px 0 0;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.message-meta{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:12px;color:var(--tinta-3)}
.kirim{font-weight:600;color:var(--tinta-2)}
.kirim-failed{color:var(--merah)}
.kirim-requires_review,.kirim-delivery_unknown,.kirim-held{color:var(--kunyit)}
.quote-action{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:28px;padding:0 8px;border:0;border-radius:var(--r-1);background:transparent;color:var(--tinta-2);font-size:12px;font-weight:600;opacity:0;transition:opacity var(--cepat),background-color var(--cepat)}
.message:hover .quote-action,.message:focus-within .quote-action,.quote-action:focus-visible{opacity:1}
.message:hover .quote-action:disabled{opacity:.55}
.quote-action:hover:not(:disabled){background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--tinta)}
@media (hover:none){.quote-action{opacity:1}.quote-action:disabled{opacity:.55}}
.message-quote{display:block;width:100%;margin:6px 0 2px;padding:6px 10px;border:0;border-left:3px solid var(--garis-kuat);border-radius:var(--r-1);background:color-mix(in srgb,var(--tinta) 5%,transparent);color:inherit;font:inherit;font-weight:400;text-align:left}
.message-quote strong{display:block;font-size:12px;font-weight:700}
.message-quote span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--tinta-2);white-space:pre-wrap;overflow-wrap:anywhere}
.message-sistem{align-self:center;max-width:min(90%,460px);padding:8px 14px;border:1px dashed var(--garis-kuat);border-radius:var(--r-2);font-size:13px;line-height:1.45;color:var(--tinta-2);text-align:center}
.message-sistem strong{display:block;font-size:12px;color:var(--tinta-3)}
.message-sistem small{display:block;margin-top:2px;color:var(--tinta-3)}
.latest-message{position:absolute;left:0;right:0;bottom:12px;z-index:2;width:max-content;margin:0 auto;border-radius:var(--r-pil);box-shadow:var(--bayang-2)}

/* Media dalam pesan */
.message-media{min-width:200px;margin:8px 0 4px}
.image-preview{position:relative;display:block;width:100%;max-width:340px;padding:0;overflow:hidden;border:0;border-radius:var(--r-2);background:color-mix(in srgb,var(--tinta) 6%,transparent);color:#FFFFFF;cursor:zoom-in}
.image-preview img{display:block;width:100%;height:220px;object-fit:contain}
.image-preview>span{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r-1);background:rgb(18 29 24/.82);font-size:12px}
.document-preview{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan);color:inherit;font:inherit;font-weight:400;text-align:left}
.document-preview>span:nth-child(2){flex:1;min-width:0}
.document-preview strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.document-preview small{display:flex;gap:8px;margin-top:2px;color:var(--tinta-2)}
.document-type{display:grid;place-items:center;flex:none;width:40px;height:44px;border-radius:var(--r-1);background:var(--sorot-kuat);font-size:12px;font-weight:700}
.inbox-media-viewer{position:fixed;inset:0;width:min(1100px,94vw);height:min(860px,92dvh);max-width:94vw;max-height:92dvh;margin:auto;padding:0;overflow:hidden;border:1px solid var(--garis);border-radius:var(--r-3);background:var(--melayang);color:var(--tinta);box-shadow:var(--bayang-3)}
.inbox-media-viewer::backdrop{background:var(--latar-modal)}
.media-viewer-content{display:flex;flex-direction:column;height:100%;min-height:0}
.media-viewer-content>header{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--garis)}
.media-viewer-content>header>div{flex:1;min-width:0}
.media-viewer-content strong{display:block;font-size:14px;overflow-wrap:anywhere}
.media-viewer-content small{display:block;margin-top:2px;color:var(--tinta-2)}
.media-viewer-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:var(--permukaan-2)}
.media-viewer-body>img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.media-viewer-body iframe{flex:1;width:100%;min-height:0;border:0;background:#FFFFFF}
.media-viewer-body p{flex:none;margin-top:10px;font-size:13px;color:var(--tinta-2)}
.media-viewer-body a{color:var(--hutan-teks);text-decoration:underline}

/* ---------- Serah terima: siapa yang membalas ---------- */
.composer-wrap{flex:none;display:flex;flex-direction:column;border-top:1px solid var(--garis);background:var(--permukaan)}
.composer-wrap.ai-mode{border-top-color:var(--jalur-garis);background:var(--jalur)}
.serah{display:flex;align-items:center;gap:12px;padding:12px var(--tepi)}
.serah p{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.serah strong{font-size:15px;font-weight:700;color:var(--tinta)}
.serah-ikon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%}
.serah-ikon .spinner{width:14px;height:14px}
.serah-starmy{padding-top:14px;padding-bottom:14px}
.serah-starmy .serah-ikon{border:1px solid var(--jalur-garis);background:var(--permukaan)}
.serah-starmy .serah-ikon .tanda-starmy{width:18px;height:18px}
.serah-starmy .btn{flex:none}
.serah-tim{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--garis);background:var(--hutan-lembut)}
[data-theme=dark] .serah-tim{background:var(--sorot)}
.serah-tim .serah-ikon{width:32px;height:32px;background:var(--permukaan);color:var(--hutan-teks)}
.serah-tim strong{font-size:14px}
.serah-tim .btn{flex:none;background:var(--permukaan)}
.serah-tim .btn .tanda-starmy{width:13px;height:13px}
.serah-baca .serah-ikon{background:var(--permukaan);color:var(--tinta-2)}

/* Penulis balasan */
.composer{display:flex;flex-direction:column;margin:12px var(--tepi) 0;border:1px solid var(--garis-kuat);border-radius:var(--r-3);background:var(--permukaan)}
.composer:focus-within{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.composer-field{display:flex;flex-direction:column;min-width:0}
.composer textarea,.composer textarea:hover,.composer textarea:focus{display:block;width:100%;min-height:56px;max-height:160px;padding:12px 14px 4px;border:0;border-radius:var(--r-3) var(--r-3) 0 0;background:transparent;box-shadow:none;font-size:15px;line-height:1.5;resize:none;field-sizing:content}
.composer textarea:disabled{opacity:.6}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 8px}
.composer-tools,.composer-actions{display:flex;align-items:center;gap:6px;min-width:0}
.composer-attach{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-2);color:var(--tinta-2);cursor:pointer}
.composer-attach:hover{background:var(--sorot);color:var(--tinta)}
.composer-attach.disabled{opacity:.45;cursor:not-allowed}
.composer-attach input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:inherit}
.composer-attach:focus-within{outline:2px solid var(--fokus);outline-offset:2px}
.rephrase-control{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 10px;border:1px solid var(--garis);border-radius:var(--r-pil);color:var(--tinta-2);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.rephrase-control input{width:16px;height:16px;margin:0}
.rephrase-control .tanda-starmy{width:13px;height:13px}
.rephrase-control:hover{border-color:var(--garis-kuat);color:var(--tinta)}
.rephrase-control.enabled{border-color:var(--jalur-garis);background:var(--jalur);color:var(--tinta)}
.label-pendek{display:none}
.keyboard-hint{font-size:12px;color:var(--tinta-3);white-space:nowrap}
.send-button{min-height:40px}
.composer-quote{display:flex;align-items:flex-start;gap:10px;margin:8px 8px 0;padding:8px 10px;border-left:3px solid var(--hutan-teks);border-radius:var(--r-1);background:var(--sorot)}
.composer-quote>svg{flex:none;margin-top:2px;color:var(--hutan-teks)}
.composer-quote>div{flex:1;min-width:0}
.composer-quote strong{font-size:13px}
.composer-quote p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-size:13px;color:var(--tinta-2);overflow-wrap:anywhere}
.file-chip{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;max-width:calc(100% - 16px);margin:8px 8px 0;padding:2px 2px 2px 10px;border:1px solid var(--garis);border-radius:var(--r-pil);background:var(--permukaan-2);font-size:13px}
.file-chip small{flex:none;color:var(--tinta-3)}
.file-chip-remove{display:grid;place-items:center;flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--tinta-2)}
.file-chip-remove:hover{background:var(--sorot);color:var(--tinta)}
.composer-footnote{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:8px var(--tepi) 12px;font-size:12px;color:var(--tinta-3)}
.composer-footnote .putus{font-weight:600;color:var(--tinta-2)}

/* ---------- Detail pelanggan (panel kanan / laci) ---------- */
.context-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;border-left:1px solid var(--garis);background:var(--permukaan);scrollbar-width:thin}
.context-panel[hidden]{display:none!important}
.context-backdrop{display:none}
.customer-panel-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 0 22px}
.customer-panel-heading h2{font-size:13px;font-weight:600;color:var(--tinta-3)}
.customer-profile{display:flex;align-items:center;gap:12px;padding:6px 22px 16px}
.customer-profile .avatar{width:44px;height:44px;font-size:14px;background:var(--sorot-kuat);color:var(--tinta-2)}
.customer-profile strong{display:block;font-size:18px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.customer-profile .angka{display:block;margin-top:2px;font-size:13px;color:var(--tinta-3);overflow-wrap:anywhere}
.customer-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--garis)}
.customer-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;margin-bottom:-1px;padding:0 4px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--tinta-2);font-size:14px;font-weight:600;white-space:nowrap}
.customer-tabs button:hover{color:var(--tinta)}
.customer-tabs button[aria-selected=true]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:700}
.customer-tabs button span{min-width:20px;padding:0 6px;border-radius:var(--r-pil);background:var(--sorot);font-size:12px;line-height:20px}
.customer-workspace [hidden]{display:none!important}

/* Bagian konteks: dipakai panel Inbox dan detail Pelanggan (CustomerContext).
   Dibatasi ke .customer-workspace/.customer-context supaya panel bukti transfer
   di Hari ini (PaymentReviewPanel) tidak ikut berubah. */
:is(.customer-workspace,.customer-context) .context-section{margin:0;padding:18px 22px 6px;border:0;border-radius:0;background:none;box-shadow:none}
:is(.customer-workspace,.customer-context) .context-section h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--tinta);color:var(--tinta);font-size:15px;font-weight:800}
:is(.customer-workspace,.customer-context) .context-section h3 .text-link{font-size:13px}
:is(.customer-workspace,.customer-context) .context-section>.hint{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--tinta-2)}
:is(.customer-workspace,.customer-context) p.context-section.hint{padding-bottom:0;font-size:13px;color:var(--tinta-2)}
:is(.customer-workspace,.customer-context) .kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;font-size:14px}
:is(.customer-workspace,.customer-context) .context-section .kv dt,:is(.customer-workspace,.customer-context) .context-section .kv dd{padding:9px 0;border:0;border-bottom:1px solid var(--garis);line-height:1.4}
:is(.customer-workspace,.customer-context) .kv dt{font-size:14px;font-weight:500;color:var(--tinta-2)}
:is(.customer-workspace,.customer-context) .kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.kartu-daftar{margin:0;padding:0;list-style:none}
:is(.customer-workspace,.customer-context) .note-card{margin:0;padding:10px 0;border:0;border-bottom:1px solid var(--garis);border-radius:0;background:none;box-shadow:none;font-size:14px}
:is(.customer-workspace,.customer-context) .note-card.esc{padding-left:12px;border-left:3px solid var(--kunyit)}
:is(.customer-workspace,.customer-context) .note-card.esc.resolved{border-left-color:var(--garis-kuat);opacity:1}
:is(.customer-workspace,.customer-context) .note-card strong{font-size:14px;font-weight:700}
:is(.customer-workspace,.customer-context) .note-card p{margin-top:2px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
:is(.customer-workspace,.customer-context) .note-card .kartu-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:6px;font-size:12px;line-height:1.45;color:var(--tinta-3);white-space:normal}
:is(.customer-workspace,.customer-context) .note-card .kartu-meta .text-link{font-size:12px}
:is(.customer-workspace,.customer-context) .note-card .button-row{margin-top:8px}
.danger-link{color:var(--merah)!important}
:is(.customer-workspace,.customer-context) .note-form{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
:is(.customer-workspace,.customer-context) .note-form textarea{min-height:88px}
:is(.customer-workspace,.customer-context) .advanced{margin:8px 0 6px;padding:0;border:0;background:none}
:is(.customer-workspace,.customer-context) .advanced summary{display:flex;align-items:center;min-height:44px;padding:0;font-size:13px;font-weight:600;color:var(--tinta-2)}
:is(.customer-workspace,.customer-context) .context-section .field{margin-top:8px}
:is(.customer-workspace,.customer-context) .context-section .button-row{gap:8px}
:is(.customer-workspace,.customer-context) .customer-history-link{padding-top:10px;padding-bottom:22px}
:is(.customer-workspace,.customer-context) .customer-history-link .text-link{font-size:14px}

/* ---------- Ukuran layar ---------- */
/* Kolom percakapan bisa sempit walau layarnya lebar (panel detail terbuka), jadi ikut lebar kolomnya sendiri. */
@container utas (max-width:640px){
 .keyboard-hint{display:none}
 .label-panjang{display:none}
 .label-pendek{display:inline}
 .serah-tim p span{display:none}
 .message{max-width:86%}
}
@container utas (max-width:420px){
 .serah-starmy{flex-wrap:wrap}
 .serah-starmy .btn{flex:1 0 100%}
}
@media (min-width:1440px){
 .inbox-layout.show-context.has-selection{grid-template-columns:var(--inbox-queue-width,320px) minmax(0,1fr) 340px}
}
@media (max-width:1439px){
 .inbox-layout.show-context .context-panel{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(380px,92vw);border-left:1px solid var(--garis);box-shadow:var(--bayang-3)}
 .inbox-layout.show-context .context-backdrop{display:block;position:fixed;inset:0;z-index:60;padding:0;border:0;border-radius:0;background:var(--latar-modal)}
}
@media (max-width:1180px){
 .inbox-layout{grid-template-columns:var(--inbox-queue-width,300px) minmax(0,1fr)}
 .message{max-width:min(84%,640px)}
}
@media (max-width:1024px){
 .thread-avatar{width:34px;height:34px}
 .keyboard-hint{display:none}
}
@media (max-width:760px){
 .inbox-shell .topbar-kanan{gap:4px}
 .inbox-shell .topbar-kanan>a.btn{padding:0 8px;font-size:12px}
 .inbox-shell .status-starmy{width:44px;padding:0;justify-content:center;gap:6px}
 .inbox-shell .status-starmy>span:not(.status-dot){display:none}
 .inbox-workspace{--tepi:16px;height:auto;min-height:calc(100dvh - var(--tinggi-topbar) - 120px)}
 .inbox-workspace:has(.has-selection){height:calc(100dvh - var(--tinggi-topbar));min-height:0}
 .inbox-shell:has(.has-selection) .subnav{display:none}
 .inbox-layout{display:flex;flex-direction:column}
 .inbox-layout .thread-panel{display:none}
 .inbox-layout.has-selection .conversation-panel{display:none}
 .inbox-layout.has-selection .thread-panel{display:flex;flex:1}
 .conversation-panel{border-right:0}
 .queue-heading{padding:18px 16px 12px}
 .queue-heading h1{font-size:24px}
 .group-filter{min-height:44px}
 .inbox-search{margin:0 16px 10px}
 .inbox-search input{min-height:44px;font-size:16px}
 .queue-filters{margin:0 16px}
 .queue-filters button{min-height:44px}
 .queue-caption{padding:12px 16px 8px}
 .conversation-panel>.notice{margin:0 16px 10px}
 .conversation-list{flex:none;overflow:visible;margin:0 8px}
 .queue-connection{padding:12px 16px}
 .thread-header{min-height:64px;gap:4px;padding:8px 8px 8px 4px}
 .tombol-kembali{display:grid;width:44px;height:44px}
 .thread-header h2{font-size:16px}
 .thread-avatar{width:32px;height:32px;font-size:11px;margin-right:4px}
 .thread-sub{font-size:12px}
 .context-toggle{min-height:44px;width:44px;padding:0}
 .context-toggle-teks{display:none}
 .inbox-handover summary{min-height:48px}
 .inbox-handover>div{padding-left:16px}
 .thread-messages{padding:16px 12px}
 .message{max-width:88%;min-width:96px}
 .quote-action{min-height:44px;margin:-10px -8px -10px 0;padding:0 10px}
 .serah{gap:10px}
 .serah-starmy{flex-wrap:wrap}
 .serah-starmy .btn{flex:1 0 100%;min-height:44px}
 .serah-tim p span{display:none}
 .serah-tim .btn{min-height:44px}
 .composer{margin-top:10px}
 .composer textarea,.composer textarea:hover,.composer textarea:focus{font-size:16px;min-height:48px}
 .composer-attach{width:44px;height:44px}
 .rephrase-control{min-height:44px}
 .label-panjang{display:none}
 .label-pendek{display:inline}
 .send-button{min-height:44px}
 .composer-footnote{margin-bottom:max(10px,env(safe-area-inset-bottom,0px))}
 .inbox-layout.show-context .context-panel{width:100%;border-left:0}
 .customer-panel-heading .icon-btn{width:44px;height:44px}
 .customer-tabs button{min-height:48px}
 .message-media{min-width:180px}
 .image-preview img{height:180px}
 .inbox-media-viewer{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0}
 .inbox-kosong{padding:24px 16px}
}
/* Toast di Inbox muncul di atas supaya tidak menutupi panel serah terima dan kotak balasan. */
.inbox-shell .toast-stack{top:calc(var(--tinggi-topbar) + 12px);bottom:auto}
@media (prefers-reduced-motion:reduce){.inbox-workspace *{scroll-behavior:auto}}

/* Pegangan batas panel, dengan dukungan mouse, sentuh, dan keyboard. */
.inbox-resize{position:absolute;z-index:5;top:0;bottom:0;left:var(--inbox-queue-width,320px);width:10px;margin-left:-5px;cursor:col-resize;touch-action:none;outline:none}
.inbox-resize::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent;transition:background .15s}
.inbox-resize:hover::after,.inbox-resize:focus-visible::after,.inbox-resize.dragging::after{background:var(--hutan)}
.inbox-layout.is-resizing{user-select:none;cursor:col-resize}
@media(max-width:1180px){.inbox-resize{left:var(--inbox-queue-width,300px)}}
@media(max-width:760px){.inbox-resize{display:none}}

.message-delete{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:4px;color:var(--tinta-3);background:transparent;border:0;opacity:.5}
.message-delete:hover,.message-delete:focus-visible{opacity:1;color:var(--bahaya)}
.message-deleted{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px;font-size:12px;color:var(--tinta-3)}

/* Redesign tahap 1: holder diblokir, peringatan injection, status internal yang tidak berbentuk pesan */
.pemilik.blokir{color:var(--merah)}
.conversation-status{flex-wrap:wrap;gap:4px 10px}
.st-blokir,.st-strike,.thread-strike{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.st-blokir{color:var(--merah)}
.st-strike,.thread-strike{color:var(--kunyit)}
.thread-strike{font-size:12px}
.serah-blokir{background:var(--merah-lembut);border-top:1px solid var(--merah-garis)}
.serah-blokir .serah-ikon{display:grid;place-items:center;background:var(--permukaan);border:1px solid var(--merah-garis);color:var(--merah)}
.serah-blokir strong{color:var(--merah)}
.serah-blokir .btn{flex:none}
.serah-atas{border-top:0;border-bottom:1px solid var(--merah-garis)}
.message-sistem{border-color:var(--info);background:transparent}
.message-sistem strong{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--info)}
.message-sistem.sistem-strike{border-color:var(--merah-garis)}
.message-sistem.sistem-strike strong{color:var(--merah)}
.message-sistem.sistem-blokir{border-style:solid;border-color:var(--merah-garis);background:var(--merah-lembut)}
.message-sistem.sistem-blokir strong{color:var(--merah)}
.dari-internal{color:var(--info)}
@media (max-width:767px){.serah-blokir{flex-wrap:wrap}.serah-blokir .grow{flex:1 1 calc(100% - 52px)}.serah-blokir .btn{flex:1 1 0}}

/* Redesign tahap 2: menu Tindakan lain, pratinjau Rapikan */
.thread-more{position:relative}
.thread-more>summary{list-style:none;cursor:pointer}
.thread-more>summary::-webkit-details-marker{display:none}
.thread-more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;padding:6px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--melayang);box-shadow:var(--bayang-2)}
.menu-item-bahaya{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--merah);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.menu-item-bahaya:hover{background:var(--merah-lembut)}
button.rephrase-control{background:var(--permukaan);font:inherit;font-size:13px;font-weight:600}
button.rephrase-control:disabled{opacity:.55;cursor:not-allowed}
.rapi-pratinjau{margin:0 0 10px;padding:12px 14px;border:1px solid var(--jalur-garis);border-radius:var(--r-3);background:var(--jalur)}
.rapi-judul{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;color:var(--tinta)}
.rapi-judul .tanda-starmy{width:13px;height:13px}
.rapi-isi{margin:8px 0 10px;white-space:pre-wrap;font-size:15px;line-height:1.5;color:var(--tinta)}
.rapi-pratinjau .button-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rapi-pratinjau .hint{color:var(--tinta-2)}
/* Redesign tahap 4: bar kasus, ambang 24 jam, pesan beruntun */
.inbox-handover summary .kasus-pj{flex:none;padding:1px 8px;border-radius:var(--r-pil);background:var(--hutan-lembut);color:var(--hutan-teks);font-size:12px;font-weight:600}
.inbox-handover summary .kasus-pj.kosong{background:transparent;border:1px solid var(--garis-kuat);color:var(--tinta-2)}
.inbox-handover summary .kasus-lama{flex:none;font-size:12px;font-weight:600;color:var(--kunyit)}
.kasus-lama.lewat,.kasus-lewat{color:var(--merah)}
.message{position:relative}
.message.lanjutan{margin-top:-6px}
.message.lanjutan .message-author{display:none}
@media (hover:hover){.message .message-delete,.message .quote-action{opacity:0;transition:opacity var(--cepat)}.message:hover .message-delete,.message:hover .quote-action,.message:focus-within .message-delete,.message:focus-within .quote-action{opacity:1}.message.lanjutan .message-topline{position:absolute;top:4px;right:8px;margin:0}}

/* ============================================================================
   Catatan & kasus (Arah B). Angka ringkasan ada di tab, bukan kartu.
   Kasus terbuka memakai angka tunggu kunyit seperti antrean Hari ini
   (.kasus-tunggu dan .papan dari hari-ini.css).
   ========================================================================== */
.ck{max-width:1080px}
.ck-kosong{padding:24px 0}
.ck-notif{margin:0 0 20px;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.ck-notif summary{display:flex;align-items:center;gap:10px;min-height:48px;list-style:none;font-size:14px;font-weight:600;color:var(--tinta)}
.ck-notif summary::-webkit-details-marker{display:none}
.ck-notif summary>svg:first-child{color:var(--tinta-2)}
.ck-notif summary>svg:last-child{margin-left:auto;transition:transform var(--sedang) var(--lengkung)}
.ck-notif[open] summary>svg:last-child{transform:rotate(180deg)}
.ck-notif-jumlah{min-width:22px;padding:0 7px;border-radius:var(--r-pil);background:var(--sorot);font-size:12px;line-height:20px;text-align:center;color:var(--tinta-2)}
.ck-notif>.hint{margin:0 0 8px;max-width:70ch}
.ck-notif-daftar{margin:0 0 12px;padding:0;list-style:none}
.ck-notif-daftar li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 0;border-top:1px solid var(--garis-lembut)}
.ck-notif-daftar .grow{display:flex;flex-direction:column;line-height:1.35}
.ck-notif-daftar strong{font-size:14px}
.ck-notif-daftar small{color:var(--tinta-3)}
.ck-tab{margin-top:4px}
.ck-perhatian{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-top:16px;padding:0 6px 0 12px;border:1px solid var(--kunyit-garis);border-radius:var(--r-pil);background:var(--kunyit-lembut);color:var(--kunyit);font-size:13px;font-weight:700}
.ck-perhatian:hover{border-color:var(--kunyit)}
.ck-perhatian.aktif{border-color:var(--kunyit);box-shadow:inset 0 0 0 1px var(--kunyit)}
.ck-perhatian-aksi{padding:2px 8px;border-radius:var(--r-pil);background:var(--permukaan);color:var(--tinta);font-weight:600}
.ck-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.ck-filter .ck-cari{flex:1 1 280px;min-width:0}
.ck-filter .ck-cari input::-webkit-search-cancel-button{display:none}
.ck-filter>select{flex:0 1 250px;width:auto}
.ck-perbarui{flex:none}
.ck-jumlah{display:flex;align-items:baseline;gap:12px;margin:18px 0 8px;font-size:13px;color:var(--tinta-2)}
.ck-jumlah .text-link{font-size:13px}
.ck-daftar{margin-top:0}
.ck-baris-kasus{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:start;gap:8px 16px;padding:18px 0;border-bottom:1px solid var(--garis)}
.ck-baris-kasus .kasus-tunggu{padding-top:2px}
.ck-ikon{display:grid;place-items:center;width:40px;height:40px;margin-top:2px;border-radius:50%;background:var(--sorot-kuat);color:var(--tinta-2)}
.ck-ikon.selesai{background:var(--hutan-lembut);color:var(--hutan-teks)}
.ck-isi{min-width:0}
.ck-judul{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.ck-nama{font-size:17px;font-weight:700;overflow-wrap:anywhere}
.ck-teks{max-width:72ch;margin-top:6px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ck-penyelesaian{max-width:72ch;margin-top:6px;font-size:14px;line-height:1.5;color:var(--tinta-2);overflow-wrap:anywhere}
.ck-penyelesaian strong{color:var(--tinta)}
.ck-meta{margin-top:8px;font-size:12px;line-height:1.5;color:var(--tinta-3)}
.ck-aksi{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ck-baris-kasus.selesai .ck-nama{color:var(--tinta-2)}
.case-modal-context{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-left:3px solid var(--kunyit);border-radius:var(--r-1);background:var(--permukaan-2)}
.case-modal-context p{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.case-modal-context small{color:var(--tinta-3)}
@media (max-width:760px){
 .ck .page-heading .heading-action{width:100%}
 .ck .page-heading .heading-action .btn{flex:1 1 auto;min-height:44px}
 .ck-filter{display:grid;grid-template-columns:minmax(0,1fr)}
 .ck-filter .ck-cari input{min-height:44px;font-size:16px}
 .ck-filter>select{width:100%;min-height:44px}
 .ck-perbarui{justify-self:start;min-height:44px}
 .ck-perhatian{min-height:44px}
 .ck-baris-kasus{grid-template-columns:58px minmax(0,1fr);gap:8px 12px}
 .ck-baris-kasus .kasus-tunggu .angka{font-size:30px}
 .ck-aksi{grid-column:1/-1}
 .ck-aksi .btn{flex:1 1 auto;min-height:44px}
 .ck-aksi .btn.icon-only{flex:none;width:44px}
}

/* Guide Starmy: guidance yang dipakai dan urutan setelah dikirim */
.guidance-pakai{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan-2)}
.guidance-pakai-judul{margin:0;font-size:13px;font-weight:700;color:var(--tinta)}
.guidance-pakai-isi{margin:0;white-space:pre-line;font-size:14px;line-height:1.5;color:var(--tinta)}
.langkah-guide{display:grid;gap:4px;margin:0;padding-left:20px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.ck-avatar{width:28px;height:28px;font-size:11px}
.ck-judul{align-items:center}

/* Redesign tahap 3: riwayat Guide Starmy, instruksi internal dipisah dari balasan pelanggan */
.ck-riwayat{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ck-riwayat li{display:grid;gap:2px;padding:8px 12px;border-radius:var(--r-2);background:var(--permukaan-2);font-size:13px;line-height:1.45;color:var(--tinta)}
.ck-riwayat li strong{font-size:12px;font-weight:700;color:var(--tinta-3)}
.ck-riwayat li.internal{background:transparent;border:1px dashed var(--info)}
.ck-riwayat li.internal strong{color:var(--info)}
.ck-riwayat .kirim-failed span{color:var(--merah);font-weight:600}
.ck-riwayat .kirim-delivered span{color:var(--hutan-teks);font-weight:600}
/* Redesign tahap 4: chip filter, ambang 24 jam */
.ck-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ck-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--garis-kuat);border-radius:var(--r-pil);background:var(--permukaan);font:inherit;font-size:13px;font-weight:600;color:var(--tinta-2);cursor:pointer}
.ck-chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--permukaan)}
.ck-chip .angka{font-size:12px}
.kasus-tunggu.lewat{color:var(--merah)}

/* ============================================================================
   Pelanggan (Arah B). Tabel bergaris tinta; detail pelanggan sebagai panel
   samping (>=1280 px) atau laci (lebih sempit), layar penuh di HP.
   Isi detail memakai pola .customer-context dari inbox.css.
   ========================================================================== */
.pl-kosong{padding:24px 0}
.pl-tata{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px;align-items:start}
.pl-daftar{min-width:0}
.pl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.pl-cari{flex:1 1 320px;min-width:0}
.pl-cari input::-webkit-search-cancel-button{display:none}
.pl-filter>select{flex:0 1 220px;width:auto}
.pl-tabel-wadah{overflow-x:auto;border-top:2px solid var(--tinta)}
.pl-tabel{width:100%;border-collapse:collapse}
.pl-tabel th{padding:10px 12px 8px;border-bottom:1px solid var(--garis);background:transparent;font-size:12px;color:var(--tinta-3)}
.pl-tabel td{padding:12px;border-bottom:1px solid var(--garis);font-size:14px;vertical-align:middle}
.pl-tabel tbody tr{cursor:pointer}
.pl-tabel tbody tr:hover td{background:var(--permukaan-2)}
.pl-tabel tbody tr.terpilih td{background:var(--sorot)}
.pl-tabel tbody tr.terpilih td:first-child{box-shadow:inset 3px 0 0 var(--tinta)}
.pl-nama{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0;border:0;background:none;color:var(--tinta);font:inherit;font-weight:400;text-align:left}
.pl-nama strong{font-size:15px;font-weight:700}
.pl-nama small{font-size:13px;color:var(--tinta-3)}
@media (hover:hover){.pl-nama:hover strong{text-decoration:underline;text-underline-offset:3px}}
.pl-kosong-sel{color:var(--tinta-3)}
.pl-waktu{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.pl-label{display:none}
.pl-kol-aksi{width:1%;white-space:nowrap}
.pl-aksi{display:flex;justify-content:flex-end;gap:6px}
/* Detail */
.pl-latar{display:none}
.pl-detail{min-width:0;background:var(--permukaan)}
.pl-detail-kepala{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:16px 12px 12px 22px;background:var(--permukaan)}
.pl-detail-kepala .avatar{width:44px;height:44px;font-size:14px;background:var(--sorot-kuat);color:var(--tinta-2)}
.pl-detail-kepala h2{font-size:20px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.pl-detail-kepala .angka{display:block;margin-top:2px;font-size:13px;color:var(--tinta-3)}
.pl-detail-aksi{margin:12px 0 6px}
.pl-catatan-tahap{white-space:pre-wrap}
.pl-detail-isi{padding-bottom:24px}
/* Panel pembayaran dan tindak lanjut di dalam detail */
:is(.customer-workspace,.customer-context) .context-section>.row.between{margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--tinta)}
:is(.customer-workspace,.customer-context) .context-section>.row.between>h3{margin:0;padding:0;border:0}
:is(.customer-workspace,.customer-context) .bayar-nominal{display:flex;flex-wrap:wrap;gap:4px 12px}
:is(.customer-workspace,.customer-context) .note-card .row{display:flex;align-items:center;gap:8px}
:is(.customer-workspace,.customer-context) .item-editor{margin:0;padding:10px 0;border:0;border-bottom:1px solid var(--garis);border-radius:0;background:none}
:is(.customer-workspace,.customer-context) .item-editor p{margin-top:4px;font-size:14px;line-height:1.5}
@media (min-width:1280px){
 .pl-tata.ada-pilihan{grid-template-columns:minmax(0,1fr) 400px}
 .pl-tata.ada-pilihan .pl-sekunder{display:none}
 .pl-detail{position:sticky;top:calc(var(--tinggi-topbar) + 16px);max-height:calc(100dvh - var(--tinggi-topbar) - 32px);overflow-y:auto;border-left:1px solid var(--garis);scrollbar-width:thin}
}
@media (max-width:1279px){
 .pl-detail{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(420px,92vw);overflow-y:auto;border-left:1px solid var(--garis);box-shadow:var(--bayang-3)}
 .pl-latar{position:fixed;inset:0;z-index:60;display:block;padding:0;border:0;border-radius:0;background:var(--latar-modal)}
}
@media (max-width:760px){
 .pl .page-heading .heading-action,.pl .page-heading .heading-action .btn{width:100%;min-height:44px}
 .pl-filter{display:grid;grid-template-columns:minmax(0,1fr)}
 .pl-filter>select{width:100%;min-height:44px}
 .pl-cari input{min-height:44px;font-size:16px}
 .pl-tabel thead{display:none}
 .pl-tabel,.pl-tabel tbody{display:block}
 .pl-tabel tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px;padding:14px 4px;border-bottom:1px solid var(--garis)}
 .pl-tabel td{display:block;padding:0;border:0;background:none!important;box-shadow:none!important}
 .pl-tabel tbody tr.terpilih{background:var(--sorot)}
 .pl-kol-nama{grid-column:1}
 .pl-kol-tahap{grid-column:2;grid-row:1}
 .pl-tabel .pl-kol-minat{display:block;grid-column:1/-1;color:var(--tinta-2)}
 .pl-kol-tindak{grid-column:1/-1}
 .pl-label{display:inline;margin-right:8px;font-size:13px;color:var(--tinta-3)}
 .pl-tabel .pl-kol-update{display:none}
 .pl-kol-aksi{grid-column:1/-1;width:auto}
 .pl-aksi{justify-content:flex-start}
 .pl-aksi .btn{min-height:44px}
 .pl-aksi .btn.icon-only{width:44px}
 .pl-nama{min-height:44px;justify-content:center}
 .pl-detail{width:100%;border-left:0}
 .pl-detail-tutup{width:44px;height:44px}
}

/* ============================================================================
   Area Starmy (Arah B). Ringkasan memakai pita jalur di atas: halaman milik
   Starmy, satu-satunya tempat maskot muncul di area ini.
   ========================================================================== */
.sr-pita{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 28px;margin:-32px -40px 36px;padding:28px 40px;border-bottom:1px solid var(--jalur-garis);background:var(--jalur)}
.sr-pita img{width:80px;height:80px}
.sr-untuk{font-size:13px;font-weight:600;color:var(--tinta-2)}
.sr-pita h1{margin-top:2px;font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.025em}
.sr-lead{max-width:60ch;margin-top:8px;font-size:15px;color:var(--tinta-2)}
.sr-status{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;font-weight:600}
.sr-status li{display:inline-flex;align-items:center;gap:8px}
.sr-aksi{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:200px}
.sr-aksi .btn.secondary{background:var(--permukaan)}
.sr-kolom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:40px 48px}
.sr-bagian+.sr-bagian{margin-top:36px}
.sr .bagian-judul{margin:0 0 4px}
.sr-hitung{font-size:13px;font-weight:600;color:var(--tinta-2)}
.sr-ket{margin:0 0 12px;font-size:14px;color:var(--tinta-2)}
.sr-langkah-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--garis)}
.sr-tanda{display:grid;place-items:center;width:28px;height:28px;border:1.5px dashed var(--garis-kuat);border-radius:50%;color:var(--pada-hutan)}
.sr-langkah-item.selesai .sr-tanda{border:0;background:var(--hutan)}
.sr-langkah-item.berikutnya .sr-tanda{border:2px solid var(--kunyit);border-style:solid}
.sr-langkah-item h3{font-size:15px;font-weight:700}
.sr-langkah-item p{margin-top:2px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.sr-angka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0;border-top:2px solid var(--tinta)}
.sr-angka div{padding:12px 0;border-bottom:1px solid var(--garis)}
.sr-angka dt{font-size:13px;color:var(--tinta-2)}
.sr-angka dd{margin:2px 0 0;font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.sr-angka .na{font-size:14px;font-weight:600;letter-spacing:0;color:var(--tinta-3)}
.sr-sinkron{margin:0;padding:0;list-style:none;border-top:2px solid var(--tinta)}
.sr-sinkron li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--garis)}
.sr-sinkron .status-dot{margin-top:6px}
.sr-sinkron strong{display:block;font-size:14px}
.sr-sinkron div>span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.sr-teknis dl{display:grid;grid-template-columns:150px minmax(0,1fr);margin:0;border-top:2px solid var(--tinta);font-size:14px}
.sr-teknis dt,.sr-teknis dd{padding:9px 0;border-bottom:1px solid var(--garis)}
.sr-teknis dt{color:var(--tinta-2)}
.sr-teknis dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media (max-width:1180px){
 .sr-pita{margin:-28px -28px 32px;padding:24px 28px}
 .sr-kolom{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
 .sr-pita{grid-template-columns:auto minmax(0,1fr)}
 .sr-aksi{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:760px){
 .sr-pita{margin:-20px -16px 28px;padding:20px 16px;gap:12px 14px}
 .sr-pita img{width:56px;height:56px}
 .sr-pita h1{font-size:30px}
 .sr-aksi .btn{flex:1 1 auto;min-height:44px}
 .sr-langkah-item{grid-template-columns:28px minmax(0,1fr)}
 .sr-langkah-item .btn{grid-column:2;justify-self:start;min-height:44px}
 .sr-angka dd{font-size:28px}
 .sr-teknis dl{grid-template-columns:120px minmax(0,1fr)}
}

/* ---------- Cara melayani (Konfigurasi): bagian bergaris tinta, tanpa kotak bersarang ---------- */
.config-tabbed-page{max-width:980px}
.config-tabs{margin-bottom:8px}
.config-tabs button[aria-selected=true]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:700}
.config-tabs button[aria-selected=true] span{background:var(--tinta);color:var(--permukaan)}
.config-tabs button:focus-visible{outline-offset:-2px}
.config-isi>.notice{margin-top:16px}
.config-isi>.hint{margin:12px 0}
.config-isi fieldset{min-width:0;margin:0;padding:0;border:0}
.config-identity-summary{margin:20px 0 4px;padding:0 0 12px;border-bottom:1px solid var(--garis)}
.config-identity-summary .section-title{margin:0}
.config-identity-summary h2{font-size:20px;font-weight:800}
.config-isi [role=tabpanel]>h2{margin:24px 0 4px;font-size:20px;font-weight:800}
.config-isi [role=tabpanel]>p.muted{max-width:70ch;margin-bottom:14px}
.config-block{margin-top:24px}
.config-block+.config-block{padding-top:20px;border-top:1px solid var(--garis)}
.config-block h3{margin-bottom:10px;font-size:16px;font-weight:800}
.config-block>.row{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px;font-weight:600}
.config-block .hint{max-width:70ch;margin:2px 0 12px}
.form-section{margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--tinta)}
.form-section h2{font-size:20px;font-weight:800}
.form-section p{margin-top:4px;font-size:14px;color:var(--tinta-2)}
.config-entry{border-bottom:1px solid var(--garis)}
.config-entry:first-of-type{border-top:2px solid var(--tinta)}
.config-entry summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;list-style:none;cursor:pointer}
.config-entry summary::-webkit-details-marker{display:none}
.config-entry-judul{flex:1;min-width:0;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.config-entry-meta{flex:none;font-size:13px;font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.config-entry summary>svg{flex:none;color:var(--tinta-3);transition:transform var(--sedang) var(--lengkung)}
.config-entry[open] summary>svg{transform:rotate(180deg)}
.config-entry summary:focus-visible{outline-offset:-2px}
.config-entry>.item-editor,.config-entry>.product-config-editor{margin:0 0 14px}
.config-isi [role=tabpanel]>.btn{margin-top:14px}
.config-aside{display:flex;flex-direction:column;gap:28px;margin-top:24px}
.config-aside[hidden]{display:none}
.config-bagian h3{margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--tinta);font-size:16px;font-weight:800}
.config-bagian>p{max-width:70ch;margin-bottom:10px;font-size:14px;color:var(--tinta-2)}
.config-bagian .sync-card{display:flex;flex-direction:column}
.config-bagian .sync-row{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--garis)}
.config-bagian .sync-row .status-dot{margin-top:6px}
.config-bagian .sync-row strong{display:block;font-size:14px}
.config-bagian .sync-row span:not(.status-dot){display:block;margin-top:2px;font-size:13px;color:var(--tinta-2)}
.config-tip{position:relative;padding:14px 16px 14px 44px;border-left:3px solid var(--jalur-garis);background:var(--jalur)}
.config-tip>.tanda-starmy{position:absolute;left:16px;top:17px}
.config-tip h3{padding:0;border:0;margin-bottom:4px}
.config-tip p{color:var(--tinta-2);font-size:14px}
.config-tip p+p{margin-top:6px}

/* ---------- Pengetahuan & produk, dan panel impor AI ---------- */
.pg-isi{max-width:980px}
.pg-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:14px 0 18px;font-size:14px;color:var(--tinta-2)}
.pg-isi fieldset{min-width:0;margin:0;padding:0;border:0}
.pg-isi fieldset>.field textarea{min-height:320px}
.pg-tambah{margin-top:14px}
.pg-isi .item-editor .field+.field{margin-top:10px}
.ai-import{margin:20px 0;padding:14px 0 0;border-top:2px solid var(--tinta)}
.ai-import .section-title{margin-bottom:10px}
.ai-import h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.ai-import-preview{margin-top:12px;padding:12px 0 12px 14px;border-left:3px solid var(--jalur-garis)}
.ai-import-preview>h4{margin-bottom:6px}
.ai-import-preview>.hint{margin-bottom:12px}
.ai-import-sources{font-size:13px;overflow-wrap:anywhere}
.ai-import-sources ul{margin:8px 0 14px;padding-left:20px}
.ai-import-sources li{margin:6px 0}
.ai-import-sources a{color:var(--hutan-teks);text-decoration:underline}
.ai-import-sources small{display:block;color:var(--tinta-3)}

/* ---------- Belajar harian & Tindak lanjut (SalesLearning) ---------- */
.sl{max-width:980px}
.sl-rekap{padding-bottom:16px;border-bottom:1px solid var(--garis)}
.sl-rekap h2{margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid var(--tinta);font-size:20px;font-weight:800}
.sl-rekap>p{max-width:72ch;margin:8px 0;font-size:14px;color:var(--tinta-2)}
.sl-rekap .field{max-width:260px;margin-top:4px}
.sl-runtime{margin-top:16px}
.sl-runs{margin-top:16px}
.sl-runs .advanced+.advanced{margin-top:0;border-top:0}
.sl-runs .advanced>summary .badge{margin-left:auto;margin-right:12px}
.sl-teks{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55}
.sl-kartu{padding:20px 0;border-bottom:1px solid var(--garis)}
.sl-kartu:first-of-type{margin-top:20px;border-top:2px solid var(--tinta)}
.sl-kartu-kepala{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.sl-kartu-kepala h2{font-size:17px;font-weight:800}
.sl-ringkas{max-width:72ch;margin-top:6px;font-size:15px;font-weight:600}
.sl-kartu>.hint{margin-top:4px}
.sl-kartu>p{max-width:72ch}
.sl-kartu .field{margin-top:12px}
.sl-kartu .button-row{margin-top:14px}
.sl-kartu .omiy-check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:14px}
.sl-sumber{margin:10px 0;padding:8px 0 8px 12px;border-left:3px solid var(--garis-kuat)}
.sl-sumber small{color:var(--tinta-3)}
.sl-halaman{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:14px;color:var(--tinta-2)}
@media (max-width:760px){
 .sl-kartu .button-row .btn,.sl-halaman .btn{min-height:44px}
 .sl-rekap .field{max-width:none}
}

/* ---------- AI & pemakaian ---------- */
.ai-hal{max-width:980px}
.ai-hal .sr-bagian .bagian-judul{align-items:center}
.ai-teks{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-teks dd{font-size:18px;letter-spacing:0;overflow-wrap:anywhere}
.ai-tiga{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-aksi{margin-top:14px}
.ai-catatan{max-width:72ch;margin-top:10px}
.ai-kuota li{grid-template-columns:14px minmax(0,1fr) auto;align-items:start}
.ai-hal .notice{margin:8px 0 0}
@media (max-width:760px){.ai-teks,.ai-tiga{grid-template-columns:minmax(0,1fr)}}

/* ============================================================================
   Laporan (Arah B): "buku kerja" berlatar jalur seperti jalur Starmy di Hari ini,
   lalu bagian-bagian bergaris tinta. Perbandingan 7 hari sebelumnya hanya untuk
   pesan masuk dan balasan, berlabel perkiraan (rentang bergulir).
   ========================================================================== */
.lp{max-width:1180px}
.lp-kendali{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:20px}
.lp-buku{margin-bottom:36px;padding:22px 24px 18px;border-top:2px solid var(--tinta);background:var(--jalur)}
.lp-buku[aria-busy=true]{opacity:.7}
.lp-buku-kepala{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.lp-buku-kepala h2{font-size:20px;font-weight:800}
.lp-buku-kepala p{font-size:13px;color:var(--tinta-2)}
.lp-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:0}
.lp-angka>div{padding:12px 0 14px;border-bottom:1px solid var(--jalur-garis)}
.lp-angka dt{font-size:14px;font-weight:600;color:var(--tinta-2)}
.lp-angka dd{margin:0}
.lp-angka .lp-nilai{margin:2px 0 0;font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--jalur-angka)}
.lp-angka .na{font-size:15px;font-weight:600;letter-spacing:0;color:var(--tinta-3)}
.lp-catat{margin-top:2px;font-size:13px;color:var(--tinta-2)}
.lp-banding{margin-top:2px;font-size:12px;font-weight:600;color:var(--tinta-3)}
.lp-kaki{max-width:90ch;margin-top:12px;font-size:12px;line-height:1.5;color:var(--tinta-3)}
.lp-kaki:empty{display:none}
.lp-kolom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
.lp .bagian-judul{margin:0 0 8px;padding-bottom:8px;border-bottom:2px solid var(--tinta)}
.lp-ket{margin:-2px 0 10px;font-size:13px;color:var(--tinta-2)}
.lp-na{display:flex;align-items:center;gap:8px;padding:12px 0;font-size:14px;color:var(--tinta-3)}
.lp-legenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 10px;padding:0;list-style:none;font-size:12px;color:var(--tinta-2)}
.lp-legenda li{display:inline-flex;align-items:center;gap:6px}
.lp-k{width:10px;height:10px;border-radius:2px}
.lp-k.masuk,.lp-bar .masuk{background:var(--garis-kuat)}
.lp-k.starmy,.lp-bar .starmy{background:var(--grafik-starmy)}
.lp-k.tim,.lp-bar .tim{background:var(--grafik-tim)}
.lp-batang{margin:0;padding:0;list-style:none}
.lp-batang li{display:grid;grid-template-columns:72px minmax(0,1fr) 48px;align-items:center;gap:12px;padding:5px 0}
.lp-tunggal li{grid-template-columns:110px minmax(0,1fr) 48px}
.lp-tgl{font-size:13px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-bar{display:flex;height:12px;overflow:hidden;border-radius:var(--r-1);background:var(--sorot)}
.lp-bar>span{height:100%}
.lp-batang strong{font-size:14px;text-align:right}
.lp-daftar{margin:0;padding:0;list-style:none}
.lp-daftar li{border-bottom:1px solid var(--garis)}
.lp-daftar a,.lp-baris{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 4px;color:var(--tinta);text-decoration:none}
.lp-daftar a:hover{background:var(--permukaan-2);text-decoration:none}
.lp-daftar .grow{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.lp-daftar strong{font-size:14px;font-weight:700}
.lp-daftar small{color:var(--tinta-3)}
.lp-daftar .truncate{display:block}
.lp-ref{margin-left:8px;font-weight:500;color:var(--tinta-3)}
.lp-kunyit{color:var(--kunyit)}
.lp-dari{font-weight:600;color:var(--tinta-2)}
.lp-operasi{margin-top:36px}
.lp-operasi .bagian-judul{align-items:center}
.lp-ringkas{display:flex;flex-wrap:wrap;gap:4px 24px;margin:8px 0;padding:0;list-style:none;font-size:15px;font-weight:600}
.lp-operasi .list-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--garis)}
.lp-operasi .list-row strong{display:block;font-size:14px}
.lp-operasi .list-row small{display:block;color:var(--tinta-3)}
@media (max-width:1180px){.lp-angka{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-kolom{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
 .lp-buku{margin-left:-16px;margin-right:-16px;padding:18px 16px}
 .lp-angka{gap:0 20px}
 .lp-angka .lp-nilai{font-size:32px}
 .lp-kendali .tab-garis{gap:18px}
 .lp-batang li{grid-template-columns:60px minmax(0,1fr) 40px}
 .lp-tunggal li{grid-template-columns:96px minmax(0,1fr) 40px}
}

/* ---------- Hari ini: dua jalur (Arah B "Serah terima") ---------- */
.hari-ini{flex:1;display:grid;grid-template-columns:calc(100% - var(--lebar-jalur)) var(--lebar-jalur);align-items:stretch;min-height:calc(100dvh - var(--tinggi-topbar));transition:grid-template-columns var(--lambat) var(--lengkung)}
.hari-ini.beres-mode{grid-template-columns:380px calc(100% - 380px)}

/* Jalur kamu */
.jalur-kamu{min-width:0;padding:32px 40px 48px}
.hari-ini .kepala{margin-bottom:8px}
.hari-ini .tanggal{margin-bottom:6px;font-size:13px;font-weight:500;color:var(--tinta-3)}
.hari-ini h1{font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.025em}
.hari-ini h1:focus{outline:none}
.beres-mode h1{font-size:34px}
.kepala-sub{margin-top:10px;max-width:56ch;font-size:16px;color:var(--tinta-2)}
.bagian-judul{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 10px}
.bagian-judul h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
.catatan-batas{margin:-2px 0 10px;font-size:13px;color:var(--tinta-2)}
.papan{margin:0;padding:0;list-style:none;border-top:2px solid var(--tinta)}
.kasus{border-bottom:1px solid var(--garis)}
.kasus-kepala{width:100%;display:grid;grid-template-columns:80px minmax(0,1fr) 18px;align-items:start;gap:16px;padding:16px 4px 16px 0;border:0;background:none;color:inherit;text-align:left;font-weight:400}
.kasus-kepala:hover,.kasus.terbuka .kasus-kepala{background:var(--permukaan-2)}
.kasus-kepala:focus-visible{outline-offset:-2px}
.kasus-kepala>svg{margin-top:6px;color:var(--tinta-3);transition:transform var(--sedang) var(--lengkung)}
.kasus.terbuka .kasus-kepala>svg{transform:rotate(180deg)}
.kasus-tunggu{display:flex;flex-direction:column;align-items:flex-start;padding-left:4px;color:var(--kunyit);font-size:12px;font-weight:700}
.kasus-tunggu .angka{font-size:38px;line-height:.95;font-weight:800;letter-spacing:-.03em}
.kasus-utama{min-width:0;padding-top:2px}
.kasus-baris{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.kasus-nama{font-size:17px;font-weight:700}
.kasus-alasan{margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.kasus-alasan .tanda-starmy{display:inline-block;margin-right:6px;vertical-align:-2px}
.kasus.terbuka .kasus-alasan{display:none}
.kasus-detail{padding:0 4px 20px 96px;background:var(--permukaan-2)}
.kenapa{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-2);background:var(--jalur)}
.kenapa .tanda-starmy{margin-top:3px}
.kenapa-judul{margin-bottom:2px;font-size:13px;font-weight:700}
.label-kecil{margin-bottom:8px;font-size:12px;font-weight:600;color:var(--tinta-3)}
.cuplikan{margin-top:14px}
.cuplikan ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.gelembung{max-width:78%;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.45}
.gelembung.masuk{align-self:flex-start;background:var(--permukaan);border:1px solid var(--garis);border-top-left-radius:4px}
.gelembung.dari-starmy{align-self:flex-end;background:var(--jalur);border-top-right-radius:4px}
.gelembung.dari-tim{align-self:flex-end;background:var(--hutan-lembut);border-top-right-radius:4px}
.gel-penulis{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--tinta-2)}
.gel-isi{white-space:pre-wrap;overflow-wrap:anywhere}
.gel-jam{align-self:flex-end;font-size:12px;color:var(--tinta-3)}
.bukti-bayar{margin-top:16px;padding:14px 16px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan)}
.bukti-bayar h3{margin-bottom:8px}
.kasus-detail .notice{margin:14px 0 0}
.aksi-baris{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kasus-meta{margin-top:10px;font-size:12px;line-height:1.5;color:var(--tinta-3)}
.tindak{margin-top:8px}
.daftar-tindak{margin:0;padding:0;list-style:none;border-top:2px solid var(--tinta)}
.daftar-tindak li{border-bottom:1px solid var(--garis)}
.baris-tindak{display:flex;align-items:center;gap:12px;padding:12px 4px 12px 0;color:var(--tinta);text-decoration:none}
.baris-tindak:hover{background:var(--permukaan-2);text-decoration:none}
.baris-tindak .grow{display:flex;flex-direction:column;line-height:1.35}
.baris-tindak strong{font-size:15px;font-weight:600}
.baris-tindak small{font-size:13px;color:var(--tinta-3)}
.bt-waktu{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px;font-weight:600}
.kosong-kecil{padding:12px 0 0;border-top:2px solid var(--tinta);font-size:14px;color:var(--tinta-2)}
.catatan-data{margin-top:28px;font-size:12px;line-height:1.5;color:var(--tinta-3);max-width:70ch}
.kerangka-kiri{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.k-judul{width:140px;height:20px}
.k-baris{height:64px}

/* Jalur Starmy */
.jalur-starmy{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;padding:28px 28px 40px;background:var(--jalur);border-left:1px solid var(--jalur-garis)}
.jalur-starmy>:not(.jalur-bintang){position:relative}
.jalur-bintang.tanda-starmy{position:absolute;right:-110px;bottom:-130px;width:400px;height:400px;fill:var(--jalur-bintang);stroke:none;pointer-events:none;transition:width var(--lambat) var(--lengkung),height var(--lambat) var(--lengkung),right var(--lambat) var(--lengkung),bottom var(--lambat) var(--lengkung)}
.jalur-starmy.lebar .jalur-bintang.tanda-starmy{width:680px;height:680px;right:-170px;bottom:-240px}
.js-kepala{display:flex;align-items:center;gap:12px}
.js-kepala img{flex:none}
.js-kepala h2{font-size:22px;line-height:1.15;font-weight:800}
.js-status{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--tinta-2)}
.js-putus{margin-top:16px;padding:14px;border:1px solid var(--merah-garis);border-radius:var(--r-2);background:var(--merah-lembut)}
.js-putus-judul{font-weight:700;color:var(--merah)}
.js-putus p+p{margin:4px 0 12px;font-size:13px;color:var(--tinta-2)}
.js-serah{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding:12px 16px;border:1px solid var(--jalur-garis);border-radius:var(--r-2);background:var(--permukaan)}
.js-serah p{font-size:14px;font-weight:600}
.js-serah strong{font-size:28px;line-height:1;font-weight:800;color:var(--kunyit)}
.js-bagian{margin-top:28px}
.js-bagian h3{margin-bottom:12px;font-size:15px;font-weight:800}
.js-lead{margin:0 0 16px;max-width:52ch;font-size:15px;color:var(--tinta-2)}
.buku-besar{margin:0;display:flex;flex-direction:column;gap:6px}
.buku-besar div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline}
.buku-besar dd{grid-column:1;grid-row:1;margin:0;text-align:right;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--jalur-angka)}
.buku-besar dt{grid-column:2;font-size:14px;color:var(--tinta-2)}
.selisih{display:block;margin-top:1px;font-size:12px;color:var(--tinta-3)}
.jalur-starmy.lebar .buku-besar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 48px;max-width:760px}
.jalur-starmy.lebar .buku-besar div{grid-template-columns:128px minmax(0,1fr)}
.jalur-starmy.lebar .buku-besar dd{font-size:64px}
.bagi-wadah{max-width:520px;margin-top:18px}
.bagi{height:8px;display:flex;overflow:hidden;border-radius:var(--r-pil);background:var(--jalur-garis)}
.bagi-starmy{height:100%;background:var(--jalur-angka);border-right:2px solid var(--jalur)}
.bagi-teks{margin-top:8px;font-size:13px;color:var(--tinta-2)}
.bagi-teks strong{font-size:15px;color:var(--tinta)}
.linimasa{margin:0;padding:0;list-style:none}
.linimasa li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--jalur-garis)}
.linimasa li:first-child{border-top:0}
.linimasa .tanda-starmy{margin-top:3px}
.lm-titik{width:8px;height:8px;margin:6px 3px 0;border-radius:50%;background:var(--tinta-3)}
.lm-judul{font-size:13px;font-weight:600}
.lm-ket{margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;color:var(--tinta-2);overflow-wrap:anywhere}
.linimasa time{font-size:12px;color:var(--tinta-3);white-space:nowrap}
.jalur-starmy.lebar .linimasa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.jalur-starmy.lebar .linimasa li:nth-child(2){border-top:0}
.js-ajari{margin-top:28px}
.js-ajari p{max-width:48ch;margin-bottom:10px;font-size:14px;color:var(--tinta-2)}
.js-ajari strong{color:var(--tinta)}
.js-ajari .btn{background:var(--permukaan)}
.jalur-starmy .kerangka{background:color-mix(in srgb,var(--tinta) 9%,transparent);margin-top:20px}
.k-js1{width:60%;height:44px}
.k-js2{height:200px}
.k-js3{height:150px}
.jalur-starmy.muncul .js-kepala img{animation:kilau 900ms var(--lengkung) both}
.jalur-starmy.muncul .buku-besar div{animation:angka-naik 520ms var(--lengkung) both;animation-delay:calc(300ms + var(--i,0)*70ms)}

@media (max-width:1180px){
 .hari-ini{--lebar-jalur:340px}
 .hari-ini.beres-mode{grid-template-columns:320px calc(100% - 320px)}
 .jalur-kamu{padding:28px 28px 40px}
 .hari-ini h1{font-size:36px}
}
@media (max-width:1024px){
 .hari-ini,.hari-ini.beres-mode{grid-template-columns:100%;min-height:0}
 .jalur-starmy{border-left:0;border-top:1px solid var(--jalur-garis)}
 .jalur-starmy.lebar .linimasa{grid-template-columns:minmax(0,1fr)}
 .jalur-starmy.lebar .linimasa li:nth-child(2){border-top:1px solid var(--jalur-garis)}
}
@media (max-width:760px){
 .jalur-kamu{padding:20px 16px 28px}
 .jalur-starmy{padding:20px 16px 32px}
 .hari-ini h1,.beres-mode h1{font-size:30px}
 .kasus-kepala{grid-template-columns:58px minmax(0,1fr);gap:12px}
 .kasus-kepala>svg{display:none}
 .kasus-tunggu .angka{font-size:30px}
 .kasus-alasan{-webkit-line-clamp:2}
 .kasus-detail{padding:0 0 18px}
 .gelembung{max-width:92%}
 .aksi-baris .btn{flex:1 1 auto;min-height:44px}
 .buku-besar dd,.jalur-starmy.lebar .buku-besar dd{font-size:36px}
 .jalur-starmy.lebar .buku-besar{grid-template-columns:minmax(0,1fr)}
 .jalur-starmy.lebar .buku-besar div,.buku-besar div{grid-template-columns:88px minmax(0,1fr)}
}

/* Penyesuaian Arah B untuk halaman lain */
/* Akun & preferensi */
.page.narrow{max-width:720px}
.akun-bagian{display:flex;flex-direction:column;gap:20px}
.akun-bagian-kepala .hint{margin-top:4px}
.pilihan-grup{margin:0;padding:0;border:0;display:grid;gap:8px}
.pilihan-grup legend{margin-bottom:8px;padding:0;font-size:13px;font-weight:600}
.pilihan{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r-2);cursor:pointer}
.pilihan:hover{border-color:var(--garis-kuat)}
.pilihan:has(input:checked){border-color:var(--hutan-teks);background:var(--permukaan-2);box-shadow:inset 0 0 0 1px var(--hutan-teks)}
.pilihan input{margin-top:2px}
.pilihan span{display:flex;flex-direction:column;gap:2px}
.pilihan strong{font-size:14px}
.pilihan small{font-size:13px;color:var(--tinta-2)}

/* Pencarian cepat (Ctrl/⌘ K). Tidak ada kolom cari yang terlihat; palet dibuka lewat keyboard. */
.cmdk-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:var(--latar-modal)}
.cmdk{width:min(640px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--garis);border-radius:var(--r-3);background:var(--melayang);color:var(--tinta);box-shadow:var(--bayang-3);animation:muncul-pop var(--sedang) var(--lengkung)}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--garis);color:var(--tinta-3)}
.cmdk-input input,.cmdk-input input:hover,.cmdk-input input:focus{flex:1;min-height:56px;padding:0;border:0;background:transparent;box-shadow:none;font-size:16px;color:var(--tinta)}
.cmdk-input:focus-within{box-shadow:inset 0 -2px 0 var(--hutan-teks)}
.cmdk-input kbd{cursor:pointer}
.cmdk-body{flex:1;overflow-y:auto;padding:8px}
.cmdk-group+.cmdk-group{margin-top:6px}
.cmdk-group-title{display:block;padding:8px 10px 4px;font-size:12px;font-weight:600;color:var(--tinta-3)}
.cmdk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 10px;border:0;border-radius:var(--r-2);background:transparent;color:var(--tinta);font-weight:400;text-align:left;text-decoration:none;cursor:pointer}
.cmdk-row:hover,.cmdk-row.is-cursor{background:var(--sorot);text-decoration:none}
.cmdk-row .avatar{width:32px;height:32px;font-size:12px}
.cmdk-mark{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:var(--r-2);background:var(--sorot-kuat);color:var(--tinta-2)}
.cmdk-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cmdk-text>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-text strong{font-weight:600}
.cmdk-text small{font-size:13px;color:var(--tinta-3)}
.cmdk-aside{flex:none;font-size:12px;color:var(--tinta-3)}
.cmdk mark{padding:0 1px;border-radius:3px;background:var(--jalur-garis);color:inherit}
.cmdk-empty{padding:32px 16px;text-align:center;font-size:14px;color:var(--tinta-2)}
.cmdk-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid var(--garis);font-size:12px;color:var(--tinta-3)}
.cmdk-foot>span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:760px){.cmdk-backdrop{padding:8px}.cmdk{max-height:calc(100dvh - 16px)}.cmdk-foot>span:not(.grow):not(.muted){display:none}}

/* Tim & akses */
.tm{max-width:880px}
.tm-daftar li{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:12px 16px;padding:14px 0;border-bottom:1px solid var(--garis)}
.tm-daftar .avatar{width:40px;height:40px;background:var(--sorot-kuat)}
.tm-daftar strong{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.tm-peran{display:block;font-size:13px;color:var(--tinta-2)}
.tm-status{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.tm-daftar li.nonaktif strong{color:var(--tinta-3)}
@media (max-width:760px){
 .tm .page-heading .heading-action,.tm .page-heading .heading-action .btn{width:100%;min-height:44px}
 .tm-daftar li{grid-template-columns:40px minmax(0,1fr) auto}
 .tm-status{grid-column:2;justify-content:flex-start}
 .tm-daftar .btn{grid-column:3;grid-row:1;min-height:44px}
}

/* Halaman error dan tidak ditemukan (maskot boleh muncul di sini) */
.halaman-maaf{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:520px;margin:48px auto;padding:0 16px}
.halaman-maaf.penuh{min-height:100dvh;justify-content:center;margin:0 auto}
.halaman-maaf img{width:88px;height:88px}
.halaman-maaf h1{font-size:32px;font-weight:800;letter-spacing:-.02em}
.halaman-maaf p{max-width:46ch;font-size:16px;color:var(--tinta-2)}
.halaman-maaf .btn{margin-top:8px;min-height:44px}


.followup-badge{background:#b3261e!important;color:#fff!important;border-radius:999px;min-width:22px;display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;font-size:12px;font-weight:700;line-height:18px}
.header-tabs a{gap:8px}.followup-workspace{max-width:1100px}.followup-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.followup-stat{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}.followup-stat.selected{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}.followup-stat strong{font-size:34px;line-height:1.2}.followup-stat.pending strong{color:#b3261e}.followup-stat small{color:var(--muted);line-height:1.5}.followup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.followup-filters{display:flex;gap:4px;flex-wrap:wrap}.followup-filters button{display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 12px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:8px;cursor:pointer}.followup-filters button.active{background:var(--panel);border-color:var(--line);font-weight:700}.followup-toolbar .search-field{min-width:230px;flex:0 1 310px}.followup-analysis{margin:12px 0}.followup-analysis summary{cursor:pointer;font-size:13px;color:var(--muted);padding:8px 0}.followup-list{display:grid;gap:16px}.sl-kartu.followup-card{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0}.followup-card .sl-kartu-kepala{display:flex;align-items:flex-start;gap:12px}.followup-number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-2,var(--panel));font-size:18px;font-weight:700}.followup-card-title{flex:1;min-width:0}.followup-card-title h2{font-size:13px;color:var(--muted);margin:0 0 4px}.followup-card-title p{font-size:16px;font-weight:700;margin:0;overflow-wrap:anywhere}.followup-card .sl-ringkas{font-size:16px;line-height:1.65;max-width:82ch;margin:18px 0 12px}.followup-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px}.followup-meta span,.followup-meta a{display:inline-flex;align-items:center;gap:6px}.followup-meta a{color:var(--brand);font-weight:600}.followup-review{border-top:1px solid var(--line)}.followup-review>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;min-height:48px;font-weight:700}.followup-review>summary::-webkit-details-marker{display:none}.followup-review[open]>summary svg{transform:rotate(180deg)}.followup-review-body{display:grid;gap:14px;padding-top:8px}.followup-reason{border-left:3px solid var(--brand);padding:10px 14px;background:var(--panel-2,var(--panel));font-size:14px;line-height:1.6}.followup-reason p{margin:5px 0 0}.followup-card textarea{min-height:170px;font-size:14px;line-height:1.65}.followup-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}.followup-actions .btn{min-height:42px}.thread-delete{color:#b3261e;flex-shrink:0;min-width:36px;min-height:36px}.followup-card .badge{max-width:40%;white-space:normal;text-align:center}.followup-workspace .sl-rekap{margin-bottom:20px}.followup-workspace .sl-halaman{margin-top:22px}
[data-theme="dark"] .followup-stat.pending strong,[data-theme="dark"] .thread-delete{color:#f09a8f}
@media(max-width:760px){.followup-overview{gap:8px;margin:18px 0}.followup-stat{padding:12px;gap:6px}.followup-stat>span{font-size:12px}.followup-stat strong{font-size:28px}.followup-stat small{font-size:11px}.followup-toolbar .search-field{flex:1 1 100%;min-width:0}.followup-filters{width:100%;gap:2px}.followup-filters button{padding:8px;font-size:12px}.sl-kartu.followup-card{padding:16px}.followup-card .sl-ringkas{font-size:15px}.followup-actions .btn{flex:1 1 42%;min-height:44px}.thread-delete{min-width:44px;min-height:44px}.followup-card .badge{font-size:11px}.followup-number{width:34px;height:34px}}

/* Redesign tahap 2: alasan tombol nonaktif, di sampingnya */
.alasan-gate{display:inline-flex;align-items:center;gap:6px;max-width:52ch;font-size:12px;line-height:1.4;color:var(--tinta-3)}
/* Redesign tahap 4: mode dan antrean dua kolom */
.mode-tindak-lanjut{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan-2);font-size:13px;color:var(--tinta-2)}
.followup-split{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:20px;align-items:start}
.followup-index{list-style:none;margin:0;padding:0;display:grid;gap:6px;position:sticky;top:76px}
.followup-pick{display:grid;gap:3px;width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan);text-align:left;font:inherit;color:var(--tinta);cursor:pointer}
.followup-pick span{font-size:13px;line-height:1.4;color:var(--tinta-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.followup-pick small{font-size:12px;color:var(--tinta-3)}
.followup-pick.aktif{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta);background:var(--permukaan-2)}
@media (max-width:900px){.followup-split{grid-template-columns:1fr}.followup-index{position:static}}

/* Layout translated from Starmy-Mockup-Desktop-HP. Only included by v2. */
:root{--lebar-sidebar:240px;--r-1:8px;--r-2:12px;--r-3:16px;--permukaan-2:#FAF9F4;--sorot:#ECEBE3;--garis:#DDE1D6;--garis-input:#868E86;--jalur:#F1F6D8;--jalur-garis:#D3E39A;--kunyit:#8F4300;--kunyit-lembut:#FFF1DE;--kunyit-garis:#EDCB9C}
[data-theme=dark]{--kanvas:#0F1311;--permukaan:#161B18;--permukaan-2:#1B211E;--sorot:#232A26;--garis:#2B332E;--garis-input:#77817A;--tinta:#ECEFEA;--tinta-2:#C4CBC5;--tinta-3:#9EA89F;--jalur:#222B10;--jalur-garis:#3B4A17}
.app-shell,.workspace{background:var(--kanvas)}
.main-content{padding:32px 40px 48px;background:var(--kanvas)}
.main-content>.page{width:100%;max-width:none;min-width:0}
.app-shell.inbox-shell .main-content,.app-shell.penuh-shell .main-content{padding:0}
.app-footer{display:none}
.page-heading{margin-bottom:24px;align-items:flex-end}
.page-heading h1{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.01em}
.page-heading .muted{margin-top:6px;font-size:14px;line-height:20px}
.btn{min-height:40px;border-radius:12px;font-size:14px;gap:8px}
.btn.small{min-height:32px;border-radius:10px;font-size:13px}
.btn.secondary{border-color:var(--garis-input);background:var(--permukaan);color:var(--tinta)}
.badge{height:22px;display:inline-flex;align-items:center;gap:4px;padding:0 8px;font-size:12px;line-height:16px;font-weight:600}
.badge.neutral{background:var(--sorot);border-color:transparent}
.badge.warning{background:var(--kunyit-lembut);border:1px solid var(--kunyit-garis);color:var(--kunyit)}
.field>span{font-size:13px;font-weight:600}.field input,.field select{min-height:40px;border-radius:12px;background:var(--permukaan);font-size:14px}.field textarea{border-radius:12px;font-size:14px;line-height:20px;padding:12px}
.notice{border-radius:12px;font-size:14px;line-height:20px;padding:14px 16px}
.tab-garis{border-bottom:1px solid var(--garis);margin-bottom:20px}.tab-garis{gap:4px;justify-content:flex-start}.tab-garis button{flex:none;font-size:13px;min-height:40px;padding:0 10px}.tab-garis button[aria-pressed=true] .angka{background:var(--sorot);color:var(--tinta-2)}.tab-garis .angka{background:var(--sorot);border-radius:99px;padding:2px 6px;font-size:12px}
.design-card,.daily-card{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);min-width:0;overflow:hidden}
.design-card-head,.daily-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--garis)}
.design-card-head h2,.daily-card-head h2{font-size:16px;line-height:24px;font-weight:700;display:flex;align-items:center;gap:10px}
.design-card-body,.daily-card-body{padding:20px 24px;line-height:20px}
.starmy-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#D9F06B;color:#171B19;flex:none}.starmy-mark .tanda-starmy{width:13px;height:13px}
/* Shell */
body{line-height:20px}
.workspace,.topbar,.sidebar-atas,.bisnis,.sidebar-bawah{flex-shrink:0}
.sidebar-menu{gap:2px}
.sidebar .akun>svg{flex:none}.app-shell.ciut .sidebar .akun>svg{display:none}
.sidebar{background:#171B19;color:#E9ECE7;border:0;gap:2px;padding:16px 12px}
[data-theme=dark] .sidebar{background:#0A0D0B}
.sidebar-atas{min-height:34px;margin-bottom:18px}.sidebar .menu-link{height:40px;min-height:40px;flex-shrink:0;font-weight:500;gap:12px;padding:0 10px 0 12px;color:#E9ECE7}
.sidebar .menu-link[aria-current=page]{box-shadow:none;background:#D9F06B;color:#171B19;font-weight:700}
.sidebar .menu-link:hover:not([aria-current=page]){background:#252B28}
.menu-grup{margin:0;padding:16px 12px 6px;font-size:12px;color:#A8B0A9;font-weight:600;line-height:16px}
.sidebar-menu .menu-grup:first-child{margin-top:2px}
.sidebar .bisnis{min-height:56px;background:#252B28;border:0;margin-bottom:2px;color:#E9ECE7;padding:10px}
.bisnis-tanda{width:32px;height:32px;background:#D9F06B;color:#171B19;border-radius:8px;font-weight:800}
.sidebar .bisnis-teks small,.sidebar .akun-teks small{color:#A8B0A9}
.sidebar-bawah{border-top:0;padding-top:12px;gap:8px}.sidebar-connection{display:grid;grid-template-columns:8px minmax(0,1fr);gap:4px 8px;padding:12px;border-radius:12px;background:#252B28;font-size:13px}.sidebar-connection .status-dot{margin-top:5px}.sidebar-connection small{grid-column:2;color:#A8B0A9;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sidebar .akun{color:#E9ECE7}.sidebar .akun .avatar{background:#2A332D;color:#E9ECE7}
.sidebar .menu-badge{background:#ECEBE3;color:#171B19;min-width:20px;height:20px;padding:0 5px}
.sidebar .menu-link[href='/catatan'] .menu-badge{background:#F2B36A}
.app-shell.ciut .sidebar-connection{display:none}
.topbar{padding:0 24px;background:var(--kanvas)}
.global-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--garis);border-radius:12px;background:var(--permukaan);color:var(--tinta-3);font-size:13px;font-weight:400}.global-search kbd{font-size:11px;line-height:16px;border-radius:6px;border-bottom-width:2px;padding:0 5px}
.inbox-shell .jejak-bisnis,.inbox-shell .jejak>svg{display:none}
.jejak{font-size:14px;color:var(--tinta-2)}
/* Inbox */
.inbox-workspace{--tepi:32px}.queue-heading{padding:16px 16px 12px}.queue-heading h1{font-size:18px;line-height:24px;font-weight:700}.queue-heading h1>.angka{display:none}
.group-filter{border:0;padding:0 4px;min-height:32px}.group-filter.active{background:var(--sorot)}
.inbox-search{margin:0 16px 12px}.inbox-search input{background:var(--permukaan);border-color:var(--garis-input)}
.queue-filters{background:var(--sorot);border:0;border-radius:12px;padding:3px;margin:0 16px 12px;gap:4px}.queue-filters button{min-height:30px;border:0;border-radius:9px;margin:0;font-size:13px}.queue-filters button[aria-pressed=true]{background:var(--permukaan);box-shadow:var(--bayang-1)}.queue-filters button[aria-pressed=true] span{background:var(--sorot);color:var(--tinta-2)}
.queue-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.conversation-list{margin:0;border-top:0}.conversation-item{padding:12px 16px;gap:12px}.conversation-item.selected{background:var(--sorot);box-shadow:none}.conversation-item .avatar,.conversation-item.perlu .avatar{background:var(--sorot-kuat);color:var(--tinta-2)}
.ci-baris strong{font-size:14px}.conversation-preview{font-size:13px;line-height:18px}.conversation-preview .dari{color:var(--tinta);font-weight:700}
.conversation-status{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.conversation-status>span{display:inline-flex;padding:2px 8px;border:1px solid transparent;border-radius:99px;font-size:12px;line-height:16px;font-weight:600}
.conversation-status .st-starmy{background:var(--jalur);border-color:var(--jalur-garis);color:var(--tinta)}.st-starmy .tanda-starmy{background:#D9F06B;border-radius:50%;padding:2px;width:16px;height:16px;color:#171B19}
.conversation-status .st-blokir,.conversation-status .st-strike{background:var(--merah-lembut);border-color:var(--merah-garis);color:var(--merah)}
.conversation-status .case-label{background:var(--kunyit-lembut);border-color:var(--kunyit-garis);color:var(--kunyit)}
.conversation-status .case-assignee,.conversation-status .st-tim{background:var(--hutan-lembut);border-color:var(--garis-kuat);color:var(--tinta)}
.conversation-status .case-wait{background:none;border:0;color:var(--kunyit);padding-left:0}.case-wait.overdue{color:var(--merah)}
.queue-connection{padding:8px 16px;min-height:36px;font-size:12px}
.thread-header{min-height:98px;padding:12px 24px;gap:12px}.thread-header h2{font-size:16px;font-weight:700}.thread-sub{gap:6px;margin-top:3px}.thread-number{font-size:12px;color:var(--tinta-3);margin:4px 0 0}
.pemilik{height:24px;padding:0 8px;border-radius:99px;font-size:12px;border:1px solid transparent}.pemilik.starmy{background:var(--jalur);border-color:var(--jalur-garis);color:var(--tinta)}.pemilik.starmy .tanda-starmy{background:#D9F06B;color:#171B19;border-radius:50%;padding:2px;width:16px;height:16px}.pemilik.tim{background:var(--hutan-lembut)}
.thread-stage{background:var(--sorot);border:0}.thread-header .thread-more{order:5}.context-toggle.active{background:var(--permukaan);border-color:var(--garis-input)}
.thread-messages{gap:4px;padding:24px 32px}.message-day{justify-content:center;margin:12px 0 12px}.message-day:before,.message-day:after{display:none}.message-day span{background:var(--sorot);border-radius:99px;padding:3px 10px;line-height:18px}
.message-wrap{display:flex;flex-direction:column;position:relative;align-self:flex-start;max-width:min(78%,560px);margin-top:0;min-width:0}.message-wrap.outgoing{align-self:flex-end;margin-top:30px}.message-wrap.lanjutan{margin-top:0}
.message-wrap .message{max-width:100%;min-width:100px;position:relative;padding:12px 14px 8px;border-color:var(--garis);border-radius:4px 16px 16px 16px}.message-wrap .message.outgoing{border-color:var(--jalur-garis);border-radius:16px 4px 16px 16px}
.message-wrap .message p{margin:0;font-size:15px;line-height:22px}.message-wrap .message-meta{margin-top:6px;font-size:12px}.message-wrap .message-topline{position:absolute;top:-26px;right:0;min-height:18px;width:100%;gap:4px;justify-content:flex-end}.message-wrap .message-author{font-weight:500}.message-author .tanda-starmy{width:16px;height:16px;padding:2px;border-radius:50%;background:#D9F06B;color:#171B19}
.message-wrap.incoming .message-author{display:none}.message-wrap.incoming .message-topline{top:0;right:2px;transform:translateY(-100%);opacity:0}.message-wrap.incoming:hover .message-topline,.message-wrap.incoming:focus-within .message-topline{opacity:1}.message-wrap.lanjutan .message-author{display:none}
.message-delete,.quote-action{min-height:20px;padding:0 4px}.message-delete{opacity:0}.message-wrap:hover .message-delete,.message-wrap:focus-within .message-delete{opacity:1}
.composer-wrap.ai-mode{background:var(--permukaan);border-top:1px solid var(--garis)}.serah{padding:12px 24px 16px}.serah strong{font-size:14px}.serah p{font-size:13px;line-height:18px}.serah-starmy .serah-ikon{background:#D9F06B;color:#171B19;border:0}.serah .btn{min-height:40px}
.customer-panel-heading{position:absolute;right:16px;top:34px;padding:0;border:0;background:none;z-index:2}.customer-panel-heading h2{display:none}.customer-profile{flex:none;padding:16px 24px 12px;gap:12px}.customer-profile .avatar{width:56px;height:56px}.customer-profile strong{font-size:16px;line-height:22px;font-weight:700}.profile-name-source{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--tinta-3);margin:0}.customer-profile .angka{font-size:13px;line-height:20px;margin-top:2px}
.customer-tabs{padding:0 16px}.customer-tabs{flex:none}.customer-tabs button{font-size:13px;min-height:42px}.customer-tabs button .angka{display:none}
.customer-workspace .context-section{padding:16px 24px;border-bottom:1px solid var(--garis)}.customer-workspace .context-section h3{border:0;padding:0;margin:0 0 14px;font-size:13px;line-height:18px}.customer-workspace .kv{grid-template-columns:104px minmax(0,1fr);font-size:14px;gap:14px 12px}.customer-workspace .kv dt,.customer-workspace .kv dd{border:0;padding:0;align-self:start}.fact-source{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;line-height:16px;color:var(--tinta-3)}.customer-workspace .note-card{border:1px solid var(--garis);border-radius:12px;background:var(--permukaan-2);padding:12px;font-size:14px;line-height:20px}
.customer-history-link{font-size:12px}.customer-security p{display:flex;align-items:center;gap:6px;font-size:12px;line-height:18px}.security-danger{color:var(--merah)}
@media(min-width:1440px){.inbox-layout.show-context.has-selection{grid-template-columns:var(--inbox-queue-width,320px) minmax(0,1fr) 336px}.inbox-layout .context-panel{width:auto}}
/* Selectable cases */
.ck{max-width:none}.case-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}.ck-filter{margin:0;gap:8px;flex:1 1 380px;min-width:0;justify-content:flex-end}.case-filter-more{position:relative;flex:none}.case-filter-more>summary{list-style:none}.case-filter-more>summary::-webkit-details-marker{display:none}.case-filter-pop{position:absolute;top:100%;right:0;z-index:12;width:240px;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;box-shadow:var(--bayang-2);padding:12px;display:grid;gap:8px}.case-filter-pop select{width:100%;min-width:0}.ck-filter .ck-cari{flex:1 1 200px;max-width:280px}.ck-filter>select{flex:0 1 160px;min-width:120px;font-size:13px;min-height:36px}.ck-chips{margin:0;gap:8px;flex:none}.ck-chip{font-size:12px;gap:6px;padding:0 12px;min-height:32px}.ck-chip .angka{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:var(--sorot);font-size:11px}.ck-chip[aria-pressed=true] .angka{background:var(--permukaan);color:var(--tinta)}.ck-jumlah{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;font-size:12px}.ck-jumlah:has(button){position:static;width:auto;height:auto;clip-path:none;margin-bottom:12px}
.case-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}.case-index{margin:0;padding:0;list-style:none;border:1px solid var(--garis);border-radius:16px;overflow:hidden;background:var(--permukaan)}.case-index>li{position:relative;border-bottom:1px solid var(--garis)}.case-index>li:last-child{border-bottom:0}.case-index>li.selected{box-shadow:inset 0 0 0 2px var(--tinta);background:var(--permukaan-2);border-radius:0}
.case-pick{width:100%;display:flex;gap:16px;align-items:flex-start;border:0;background:none;color:var(--tinta);padding:16px 150px 16px 24px;min-height:104px;text-align:left;font:inherit}.case-row-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.case-row-title strong{font-size:15px;font-weight:700}.case-assignee-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--garis-input);padding:1px 8px;border-radius:99px;font-size:12px;line-height:18px;color:var(--tinta-2);font-weight:500}.case-assignee-chip.assigned{background:var(--hutan-lembut);border-color:var(--hutan-garis,var(--garis))}.case-row-reason{display:block;font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}.case-row-meta{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--tinta-3);margin-top:8px}.case-pick>.case-row-wait{position:absolute;right:24px;top:16px}.case-row-wait{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--kunyit);white-space:nowrap}.case-row-wait.overdue{color:var(--merah)}.case-row-assign{position:absolute;right:24px;top:44px;bottom:auto}
.case-detail{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);overflow:hidden;min-width:0;position:sticky;top:84px}.case-detail>header{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:0}.case-detail>header .avatar{width:56px;height:56px}.case-detail h2{font-size:18px;font-weight:700}.case-detail header small{font-size:12px;color:var(--tinta-3)}.case-detail-body{padding:0}.case-summary,.case-assignment,.case-detail-actions,.case-history{padding:16px 24px}.case-summary{border-bottom:1px solid var(--garis)}.case-full-reason{margin:10px 0 0;font-size:14px;line-height:20px;white-space:pre-wrap}.case-assignment{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;margin:0;gap:12px;font-size:14px;color:var(--tinta-3);border-bottom:1px solid var(--garis)}.case-assignment strong{font-size:12px;justify-self:start}.case-holder{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:99px;justify-self:start;grid-column:2/-1;font-size:12px;font-weight:600}.case-holder.starmy{background:var(--jalur);border:1px solid var(--jalur-garis)}.case-holder.team{background:var(--hutan-lembut)}.case-holder .tanda-starmy{width:16px;height:16px;border-radius:50%;background:#D9F06B;padding:2px;fill:#171B19;stroke:none}.case-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0;border-bottom:1px solid var(--garis)}.case-detail-actions .btn{font-size:13px}.case-history-title{font-size:14px;margin:0 0 16px}.case-timeline li>svg{color:var(--hutan);border:1px solid currentColor;border-radius:50%;padding:2px;width:20px;height:20px}.case-timeline{list-style:none;padding:0;margin:0}.case-timeline li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;padding:0 0 20px;line-height:20px;font-size:13px}.case-timeline li:not(:last-child):before{content:'';position:absolute;left:8px;top:22px;bottom:4px;width:1px;background:var(--garis)}.case-timeline small{display:block;color:var(--tinta-3);font-size:12px}.case-timeline p{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}.case-timeline .internal{color:var(--info)}.case-detail-close{display:none}
/* Daily dashboard */
.hari-ini.daily-dashboard,.hari-ini.daily-dashboard.beres-mode{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;padding:32px 40px 48px;min-height:calc(100dvh - 60px);background:var(--kanvas);align-items:start}
.daily-dashboard .jalur-kamu{padding:0;min-width:0}.daily-dashboard .kepala{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;margin:0;padding:0;position:relative;grid-column:1/-1}.daily-dashboard .kepala>*{grid-column:1}.daily-dashboard .kepala .daily-open-cases{grid-column:2;grid-row:2/4;align-self:end;justify-self:end}.daily-dashboard .tanggal{display:block;margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--tinta-3)}.daily-dashboard h1{margin:0;font-size:32px;line-height:36px;font-weight:700;letter-spacing:-.015em}.daily-dashboard .kepala-sub{font-size:14px;line-height:20px;margin-top:0;max-width:70ch}.daily-open-cases{margin-top:0}
.daily-side{display:grid;gap:24px;margin-top:0}.daily-dashboard .bagian-judul{padding:16px 24px;margin:0;border-bottom:1px solid var(--garis);align-items:center}.daily-dashboard .bagian-judul h2{font-size:16px;font-weight:700}.daily-case-filter{display:flex;gap:8px;padding:0;border:0;flex-wrap:wrap}.daily-dashboard .bagian-judul{gap:12px;flex-wrap:wrap}.daily-dashboard .papan{border:0}.daily-dashboard .kasus{position:relative}.daily-dashboard .kasus-kepala{grid-template-columns:40px minmax(0,1fr);gap:16px;padding:16px 150px 16px 24px;min-height:104px}.daily-case-meta{display:block;margin-top:6px;font-size:12px;line-height:16px;color:var(--tinta-3)}.daily-dashboard .kasus-nama{font-size:15px}.daily-dashboard .kasus-baris .badge{font-size:11px}.daily-dashboard .kasus-alasan{display:block!important;font-size:13px;line-height:18px;margin-top:6px}.daily-wait{position:absolute;top:16px;right:24px;display:inline-flex;gap:4px;align-items:center;font-size:12px;color:var(--kunyit);font-weight:600;white-space:nowrap}.daily-case-actions{position:absolute;right:24px;top:44px;display:flex;gap:8px}.daily-dashboard .kasus-detail{padding:16px 24px;border-top:1px solid var(--garis)}.daily-dashboard .tindak{margin-top:24px}.daily-dashboard .daftar-tindak{border:0}.daily-dashboard .baris-tindak{padding:16px 24px}.daily-dashboard .baris-tindak strong{font-size:14px}.daily-dashboard .baris-tindak small{font-size:12px}.daily-dashboard .kosong-kecil{border:0;padding:20px 24px}.daily-dashboard .catatan-data{font-size:11px;line-height:16px}
.daily-work-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:0;padding:24px}.daily-work-stats>div{display:flex;flex-direction:column-reverse;gap:4px}.daily-work-stats dt{font-size:13px;line-height:18px;color:var(--tinta-3)}.daily-work-stats dd{font-size:32px;line-height:36px;font-weight:700;margin:0}.daily-work .bagi-wadah{margin:0;padding:0 24px 20px}.daily-work .bagi-starmy{background:#D9F06B;border:0}.daily-work .bagi{background:var(--hutan)}.daily-work .bagi-teks{font-size:12px;line-height:18px}.daily-work .bagi-teks strong{font-size:12px}.daily-security{display:flex;gap:8px;align-items:center;border-top:1px solid var(--garis);padding:16px 24px;font-size:12px;color:var(--merah)}.daily-security .text-link{margin-left:auto}
/* Knowledge */
.knowledge-page .pg-isi{max-width:none}.knowledge-page .knowledge-sync{font-size:12px;margin:0 0 16px;color:var(--tinta-3)}.knowledge-page .pg-status{margin:8px 0 0;display:flex;gap:10px;align-items:center}.knowledge-split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}.knowledge-index{display:grid;gap:24px}.product-pick{display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px;border:0;border-bottom:1px solid var(--garis);background:none;color:var(--tinta);text-align:left;font:inherit}.product-pick:last-child{border:0}.product-pick[aria-current=true]{background:var(--sorot)}.product-pick .avatar{width:32px;height:32px;border-radius:10px}.product-pick strong{display:block;font-size:14px;font-weight:700}.product-pick small{display:block;font-size:12px;line-height:18px;margin:4px 0 6px;color:var(--tinta-3)}.knowledge-index .design-card-body{font-size:14px;line-height:20px}.knowledge-index .notice{font-size:12px;margin-top:16px}.knowledge-editor>.item-editor{border:0;margin:0;padding:24px;display:grid;gap:16px}.knowledge-editor .item-editor>.field{margin:0}.knowledge-editor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.knowledge-editor .advanced{margin:0}.knowledge-page .product-tab>.sticky-actions{margin-left:364px;background:var(--permukaan);border:1px solid var(--garis);border-radius:0 0 16px 16px;padding:16px 24px;position:static;margin-top:-1px}.knowledge-page .knowledge-editor{border-bottom-left-radius:0;border-bottom-right-radius:0}.knowledge-page .sticky-actions .hint{margin-left:auto}
/* Learning and follow-up */
.sl:not(.followup-workspace){max-width:800px!important}.learning-permission{display:flex;gap:12px;align-items:flex-start}.learning-permission p{font-size:13px}.sl-rekap{padding:0;margin:16px 0;border:0;background:none;font-size:12px}.sl-rekap h2{font-size:14px}.sl-rekap>.field{max-width:200px}.sl-rekap>.field input{min-height:32px}.sl-runs{font-size:12px;margin-bottom:16px}.sl-kartu{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);padding:0;margin:20px 0;overflow:hidden}.sl-kartu-kepala{display:flex;align-items:center;gap:10px;padding:16px 24px;border-bottom:1px solid var(--garis)}.sl-kartu-kepala .avatar{width:32px;height:32px}.sl-kartu h2,.sl-kartu .followup-card-title h2{font-size:16px;font-weight:700;color:var(--tinta);margin:0}.sl-kartu .followup-card-title p{font-size:12px;line-height:18px;color:var(--tinta-3);font-weight:400;margin-top:2px}.sl-kartu:not(.followup-card)>.sl-ringkas{display:none}.sl-kartu:not(.followup-card)>.followup-meta{display:none}.sl-kartu .followup-review{border:0}.sl-kartu .followup-review>summary{font-size:12px;min-height:32px;padding:4px 24px;color:var(--tinta-3);font-weight:500}.sl-kartu .followup-review-body{padding:0 24px 16px;gap:12px}.sl-kartu .followup-actions{border:0;padding:0}.sl-kartu textarea{font-size:14px;line-height:20px;min-height:88px}.sl-halaman{font-size:12px}.sl-sumber{border-left:2px solid var(--garis-input);padding:8px 12px;font-size:13px;line-height:20px}
.followup-workspace{max-width:none}.followup-overview{display:none}.mode-tindak-lanjut{background:var(--info-lembut);border-color:#A9BDD3;color:var(--info);padding:16px;font-size:13px;line-height:20px}.followup-filters{background:var(--sorot);padding:3px;border-radius:12px}.followup-filters button{font-size:13px;min-height:30px}.followup-filters button.active{border-color:transparent;border-radius:9px;box-shadow:var(--bayang-1)}.followup-workspace .sl-rekap>h2,.followup-workspace .sl-rekap>p{display:none}.followup-workspace .sl-rekap{margin:0 0 12px}.followup-analysis{margin:0}.followup-split{grid-template-columns:360px minmax(0,1fr);gap:24px}.followup-index{gap:0;border:1px solid var(--garis);border-radius:16px;overflow:hidden;background:var(--permukaan)}.followup-pick{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;padding:16px;border:0;border-bottom:1px solid var(--garis);border-radius:0}.followup-pick .avatar{grid-row:1/4;width:40px;height:40px}.followup-pick strong,.followup-pick>span:not(.avatar),.followup-pick small{grid-column:2}.followup-pick>.avatar{grid-column:1;grid-row:1/4;align-self:start}.followup-pick{align-items:start;text-align:left}.followup-pick>strong{grid-row:1}.followup-pick>span:not(.avatar){grid-row:2}.followup-pick>small{grid-row:3}.followup-pick.aktif{background:var(--sorot);box-shadow:none}.sl-kartu.followup-card{border-radius:16px;padding:0}.followup-card .sl-kartu-kepala{padding:16px 24px;align-items:center;border:0}.followup-card .sl-kartu-kepala .avatar{width:56px;height:56px}.followup-card>.sl-ringkas{margin:12px 24px 8px;font-size:14px;line-height:20px}.followup-card>.followup-meta{margin:0 24px 8px}.followup-card .followup-review>summary{padding:4px 24px}.followup-card .followup-review-body{padding-top:12px}.followup-card .followup-actions{border-top:1px solid var(--garis);padding-top:16px;margin-top:8px}.followup-card .followup-actions .btn{font-size:13px}.followup-reason{padding:0;border:0;background:none;font-size:13px}.followup-card textarea{min-height:126px}
/* Customer table and native edit drawer */
.pl .customer-view-tabs{display:none}.customer-stage-chips{display:flex;gap:8px;flex-wrap:wrap}.pl-filter{margin:0 0 16px;gap:12px}.pl-cari{flex:0 1 320px}.pl-tabel-wadah{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan)}.pl-tabel th{background:var(--permukaan-2);padding:10px 16px}.pl-tabel td{padding:14px 16px}.pl-nama{flex-direction:row;align-items:center;gap:12px}.pl-nama .avatar{width:32px;height:32px;font-size:12px}.pl-nama>span:not(.avatar){display:flex;flex-direction:column}.pl-nama strong{font-size:14px}.pl-nama small{font-size:12px}.pl-detail{border:1px solid var(--garis);border-radius:16px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.modal-header h2{margin:0;font-size:18px;font-weight:700}.modal-header>.icon-btn{margin-right:-8px}.modal{width:min(640px,calc(100vw - 32px));border-radius:16px}.modal h2{font-size:18px}.modal-actions{border-top:1px solid var(--garis);padding-top:16px;margin-top:8px}.modal-actions .btn.secondary{border:0;background:none}.modal.modal-drawer{inset:0 0 0 auto;margin:0;width:420px;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--garis);border-radius:0}.modal-drawer>form{min-height:100%;gap:20px;padding:24px}.modal-drawer .form-grid{grid-template-columns:1fr}.modal-drawer .field>span{font-size:13px}.modal-drawer .modal-actions{margin-top:auto}.modal-drawer .pl-form .field:has(input[readonly]){display:none}
/* Setup/user tables use the same card and step geometry. */
.omiy-wizard{gap:24px;grid-template-columns:260px minmax(0,1fr)}.omiy-wizard-aside.panel{padding:0;border:0;background:none}.team-steps li{border-radius:12px;min-height:44px;font-size:14px}.team-steps li[aria-current=step]{background:var(--jalur)}.omiy-wizard-main.panel{border-radius:16px;padding:24px}.omiy-page .panel,.sr-bagian{background:var(--permukaan);border:1px solid var(--garis);border-radius:16px}.sr-bagian{padding:20px 24px}.sr-pita{background:var(--permukaan);border:1px solid var(--garis);border-radius:16px;padding:24px}.sr-pita>img{display:none}.sr-pita h1{font-size:28px}.sr-pita .sr-status{font-size:12px}.sr .sr-kolom{gap:24px}.sr .sr-langkah{border:0}.sr .bagian-judul{margin:0 0 16px}.sr .bagian-judul h2{font-size:16px}
/* Responsive layouts follow the HP references; controls retain 44px touch targets. */
@media(max-width:1180px) and (min-width:761px){.main-content{padding:24px}.case-split{grid-template-columns:minmax(0,1fr) 340px;gap:16px}.knowledge-split{grid-template-columns:280px minmax(0,1fr)}.knowledge-page .product-tab>.sticky-actions{margin-left:304px}.hari-ini.daily-dashboard,.hari-ini.daily-dashboard.beres-mode{grid-template-columns:minmax(0,1fr) 320px;padding:24px;gap:16px}.daily-dashboard .kasus-baris .badge{display:none}}
@media(max-width:1000px){.followup-split{grid-template-columns:280px minmax(0,1fr)}.global-search span{display:none}.global-search kbd{display:none}.knowledge-editor .form-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .app-shell{display:block}.sidebar{display:none}.workspace{min-height:100dvh}.main-content{padding:20px 16px 88px}.topbar{padding:0 12px;height:56px;background:var(--permukaan)}.global-search{border:0;padding:0;width:36px;justify-content:center}.topbar-kanan{gap:2px}.topbar-kiri{flex:1}.jejak-bisnis,.jejak>svg{display:none}.jejak strong{font-size:18px;font-weight:700}.topbar-judul{font-size:18px}.page-heading h1{font-size:22px}.page-heading .muted{font-size:13px}.btn,.btn.small{min-height:44px}.field input,.field select{min-height:44px}
 .bottom-tabs{background:var(--permukaan);border-top:1px solid var(--garis);min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.tab-link{font-size:11px;gap:4px}.tab-link[aria-current=page]{background:none;color:var(--tinta);font-weight:600}.tab-link[aria-current=page]>svg{background:#D9F06B;color:#171B19;border-radius:99px;padding:6px;box-sizing:content-box;width:18px;height:18px}.tab-link .menu-badge{min-width:18px;height:18px;font-size:10px;padding:0 5px}
 .inbox-workspace{height:calc(100dvh - 120px);--tepi:16px}.queue-heading{padding:12px 16px}.queue-heading h1{display:none}.group-filter{margin-left:auto;min-height:36px}.inbox-search{margin:0 12px 12px}.queue-filters{margin:0 12px 12px}.queue-filters button{min-height:32px}.conversation-item{padding:12px 16px}.conversation-item.selected{background:var(--permukaan)}.ci-baris strong{font-size:14px}.conversation-status{gap:4px}.conversation-preview{font-size:13px;line-height:18px}.queue-connection{display:none}.inbox-layout.has-selection .thread-panel{height:100%}.thread-header{padding:12px 16px;min-height:80px}.thread-header h2{font-size:16px}.thread-number{font-size:11px}.thread-sub{gap:4px}.thread-stage{font-size:11px}.thread-messages{padding:16px;gap:8px}.message-wrap{max-width:88%}.message-wrap .message{padding:10px 12px 6px}.message-wrap .message p{font-size:14px;line-height:20px}.message-wrap.incoming .message-topline{display:none}.serah{padding:12px 16px;gap:10px;flex-wrap:wrap}.serah .btn{min-height:36px;font-size:12px;padding:0 12px}.serah .serah-ikon{width:28px;height:28px}.serah p{font-size:11px}.serah strong{font-size:13px}.customer-profile{padding:24px 20px 16px}.customer-workspace .context-section{padding:16px 20px}.customer-panel-heading{top:32px}
 .case-split{display:block}.case-index{border:0;border-radius:0;margin:0 -16px}.case-index>li.selected{box-shadow:none;background:var(--permukaan)}.case-pick{padding:16px;gap:12px}.case-row-reason,.case-row-meta:first-of-type{display:none}.case-row-title{display:block}.case-row-title .badge{margin-top:6px}.case-row-meta{margin-top:4px}.case-row-wait{position:absolute;right:16px;top:18px}.case-row-title strong{display:block;margin-right:100px;font-size:14px}.case-row-assign{display:none}.case-detail{display:none}.case-split.detail-open .case-detail{display:block;position:fixed;inset:56px 0 64px;z-index:40;border-radius:0;border:0;overflow:auto}.case-detail-close{display:flex}.case-detail-body{padding:0}.case-summary,.case-assignment,.case-detail-actions,.case-history{padding:16px 20px}.case-detail .case-row-wait{position:static}.ck-filter{display:flex;flex-wrap:wrap}.ck-filter .ck-cari{flex-basis:100%}.ck-filter>select{flex:1 1 120px;min-height:44px}.ck-chips{flex-wrap:nowrap;overflow:auto;margin:0 -16px 12px;padding:0 16px}.ck-chip{min-height:36px;flex:none;font-size:12px}.ck-tab{margin-top:0}.ck .page-heading .heading-action{width:auto}.ck .heading-action .btn{font-size:12px}.ck .page-heading h1{font-size:18px}
 .hari-ini.daily-dashboard,.hari-ini.daily-dashboard.beres-mode{display:flex;flex-direction:column;padding:20px 16px 88px;gap:20px}.daily-dashboard .jalur-kamu,.daily-side{width:100%}.daily-side{margin:0}.daily-dashboard h1{font-size:24px;line-height:30px}.daily-dashboard .kepala-sub{font-size:13px}.daily-dashboard .kasus-kepala{grid-template-columns:32px minmax(0,1fr);padding:16px 16px 58px}.daily-dashboard .kasus-kepala .avatar{width:32px;height:32px}.daily-wait{position:absolute;right:16px;bottom:20px}.daily-case-actions{position:static;margin:-46px 16px 12px;justify-content:flex-start}.daily-dashboard .bagian-judul{padding:16px}.daily-dashboard .bagian-judul h2{font-size:14px}.daily-dashboard .kasus-nama{font-size:14px}.daily-dashboard .kasus-alasan{font-size:12px}.daily-dashboard .baris-tindak{padding:16px}.daily-dashboard .bt-waktu{font-size:12px}.daily-work-stats{padding:20px}.daily-card-head,.design-card-head{padding:16px 20px}.daily-card-body,.design-card-body{padding:16px 20px}
 .knowledge-split{display:flex;flex-direction:column;gap:20px}.knowledge-index,.knowledge-editor{width:100%}.knowledge-index>.design-card:nth-child(2){order:2}.knowledge-editor>.item-editor{padding:20px}.knowledge-editor .form-grid{grid-template-columns:1fr}.knowledge-page .product-tab>.sticky-actions{margin-left:0;padding:16px;margin-top:16px;border-radius:16px;position:sticky;bottom:64px}.knowledge-page .sticky-actions .hint{width:100%;margin-left:0}.knowledge-page .tab-garis{overflow:auto;white-space:nowrap}.knowledge-page .tab-garis button{flex:none;padding:0 12px;font-size:12px}.knowledge-page .knowledge-sync{margin-bottom:16px}
 .followup-split{grid-template-columns:1fr}.followup-index{position:static}.followup-pick{padding:16px}.followup-toolbar{gap:12px}.followup-filters{width:100%;overflow:auto;flex-wrap:nowrap}.followup-filters button{flex:1;min-height:36px}.followup-toolbar .search-field{min-width:0}.sl-kartu .followup-review-body{padding:0 16px 16px}.sl-kartu-kepala,.followup-card .sl-kartu-kepala{padding:16px}.sl-kartu .followup-card-title h2{font-size:14px}.followup-card>.sl-ringkas,.followup-card>.followup-meta{margin-left:16px;margin-right:16px}.followup-card .followup-actions .btn{font-size:12px;flex:1 1 auto}.sl-halaman{flex-wrap:wrap}.learning-permission{font-size:13px}
 .pl-filter{display:flex;gap:12px}.pl-cari{flex:1 1 100%}.customer-stage-chips{flex-wrap:nowrap;overflow:auto;width:100%}.pl-tabel-wadah{border-radius:12px}.pl-tabel tbody tr{padding:16px}.pl-nama{gap:10px}.pl-tabel .pl-kol-update{display:block;grid-column:1/-1}.modal.modal-drawer{width:100%;height:100dvh}.modal-drawer>form{padding:20px}.modal.modal-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.modal>form,.modal>div{padding:20px}.modal-header h2{font-size:18px}.modal-actions{gap:8px}
 .omiy-wizard{grid-template-columns:1fr}.omiy-wizard-aside{display:none}.omiy-wizard-main.panel{padding:20px}.sr .sr-kolom{display:flex;flex-direction:column}.sr-bagian{padding:20px}.sr-pita{padding:20px}.sr-pita h1{font-size:24px}
 .lainnya-pop{position:fixed;inset:0 0 64px;width:100%;max-width:none;border:0;border-radius:0;overflow:auto;box-shadow:none;background:var(--permukaan);padding:16px;z-index:50}.lainnya-pop .menu-grup{color:var(--tinta-3);margin:20px 0 8px}.lainnya-pop .nav-link{min-height:48px;border-radius:0}.mobile-more-title{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700;padding:0 0 12px;border-bottom:1px solid var(--garis)}.mobile-preferences{padding-top:16px;margin-top:12px;border-top:1px solid var(--garis)}.mobile-preferences .menu-pilihan{padding:12px 0}.mobile-account{display:flex;gap:12px;align-items:center;margin:0 8px 12px}.mobile-account small{display:block;font-size:12px;color:var(--tinta-3)}
}
.customer-workspace .context-section .kv>dt,.customer-workspace .context-section .kv>dd{border:0;padding:0;font-weight:400;line-height:20px}
.customer-workspace .context-section .kv{gap:12px}
.message-wrap .message .message-topline .message-author{margin-left:auto}
.message-wrap.lanjutan .message .message-topline{top:4px;right:8px;width:auto}
.inbox-workspace .message-meta .kirim{font-weight:400;color:var(--tinta-3)}
.knowledge-editor .field small{font-size:12px;line-height:16px}.knowledge-editor .field:has(>input[maxlength='3'])>small,.knowledge-editor .field:has(>input[maxlength='120'])>small,.knowledge-editor .field:has(>input[maxlength='160'])>small{display:none}
.knowledge-editor .form-grid{align-items:start}.knowledge-editor .form-grid>.field{gap:8px}.knowledge-editor .item-editor .field:has(textarea){margin:0}.knowledge-editor .item-editor>.form-grid{gap:16px}
.knowledge-page .knowledge-sync{margin-top:16px}.knowledge-page .pg-isi>.knowledge-sync{order:3}
.sr-teknis summary{font-size:14px;font-weight:600;cursor:pointer}.sr-teknis dl{margin-top:16px}
@media(prefers-reduced-motion:reduce){.message-wrap,.case-split,.daily-dashboard{transition:none}}

.app-shell .sidebar .menu-badge{background:#ECEBE3;color:#171B19}.app-shell .sidebar .menu-link[href='/catatan'] .menu-badge{background:#F2B36A}
.knowledge-editor .product-prices{grid-template-columns:1.2fr 1fr 1fr;gap:12px;align-items:start}.knowledge-editor .product-prices>.field:first-child{grid-column:auto}.knowledge-page .knowledge-sync{margin:16px 0 0;font-size:12px;color:var(--tinta-3)}
.case-modal-context{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--garis);background:var(--permukaan-2);border-radius:12px}.case-modal-context .avatar{flex:none}.case-modal-context p{font-size:14px;line-height:20px;margin:8px 0}.case-modal-context small{color:var(--tinta-3)}
.modal.guide-modal{width:560px;border-radius:24px}.guide-modal .guidance-pakai{background:var(--permukaan-2);border:1px solid var(--garis);border-radius:12px;padding:16px}.guide-modal .guidance-pakai-judul{font-size:13px;font-weight:600;margin:0}.guide-modal .guidance-pakai-isi{font-size:14px;line-height:20px;white-space:pre-wrap;margin:8px 0}.guide-modal .guidance-pakai .hint{font-size:12px;margin:8px 0 0}.guide-modal .langkah-guide{font-size:12px;color:var(--tinta-3);padding-left:20px;margin:0}.guide-modal textarea{min-height:90px}
.case-payments{border:1px solid var(--garis);border-radius:12px;padding:12px;margin:16px 0}.case-payments>summary{font-size:14px;font-weight:600;cursor:pointer}.case-payments .context-section{padding:12px 0 0;border:0}
.modal.payment-modal{width:880px;border-radius:24px}.payment-review-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px}.payment-evidence{border:1px solid var(--garis);border-radius:12px;overflow:hidden;align-self:start}.payment-evidence h3{font-size:14px;padding:16px;margin:0;border-bottom:1px solid var(--garis)}.payment-evidence-note{margin:16px;padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--permukaan-2);border:1px solid var(--garis);border-radius:12px}.payment-evidence-note p{font-size:14px;line-height:22px;white-space:pre-wrap;margin:0}.payment-evidence-note small{color:var(--tinta-3);font-size:12px}.payment-evidence>.hint{padding:0 16px}.payment-evidence>.text-link{display:flex;padding:0 16px 16px;font-size:13px;align-items:center;gap:8px}
.payment-decisions{padding:0;margin:0;min-width:0}.payment-decisions legend{font-size:13px;font-weight:600;margin:0 0 8px}.payment-decisions label{display:flex;align-items:center;gap:8px;border:1px solid var(--garis);border-radius:10px;padding:12px;font-size:14px;margin-top:8px;cursor:pointer}.payment-decisions label.selected{background:var(--starmy-pucat);border-color:var(--starmy)}.payment-decisions input{accent-color:var(--aksen)}.payment-review-grid .form-grid{margin:0;gap:12px;grid-template-columns:minmax(0,1fr) 90px}.payment-scope-note{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--tinta-3);margin:20px 0 0;padding-top:16px;border-top:1px solid var(--garis)}
.users-page{max-width:800px;margin-left:0}.users-page>.panel{padding:0;overflow:visible;border-radius:18px}.users-page th{font-size:12px;font-weight:400;background:var(--permukaan-2)}.users-page table{font-size:14px;width:100%;border-collapse:collapse}.users-page td,.users-page th{padding:16px}.user-table-name{display:flex;gap:12px;align-items:center}.user-table-name .avatar{width:32px;height:32px;font-size:12px}.users-page td .badge{font-size:12px;font-weight:400}.user-actions{position:relative}.user-actions>button{position:absolute;right:0;top:38px;z-index:10;background:var(--permukaan);border:1px solid var(--garis);border-radius:10px;width:150px;padding:12px}.user-actions summary{list-style:none}.role-permissions{margin-top:24px}.role-permissions .hint{margin:4px 0 0}.role-permissions .design-card-head{padding:20px 24px}.role-permissions th:not(:first-child),.role-permissions td:not(:first-child){text-align:center;width:160px}.role-permissions td{border-top:1px solid var(--garis)}.role-permissions input{width:18px;height:18px;accent-color:var(--aksen)}.role-permissions-actions{display:flex;gap:12px;padding:16px 24px;border-top:1px solid var(--garis);align-items:center}.role-permissions-actions .hint{margin-left:auto;font-size:12px}
.omiy-stepper small{font-size:12px;margin-left:auto;color:var(--tinta-3)}.omiy-telegram{padding:20px 0;line-height:22px}.omiy-telegram p{margin:16px 0}.omiy-wizard .omiy-editor{border-radius:18px}.omiy-wizard .omiy-editor>h2{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--garis);font-size:18px}
@media(max-width:760px){.knowledge-editor .product-prices{grid-template-columns:1fr}.payment-review-grid{grid-template-columns:1fr;gap:20px}.payment-evidence-note{padding:16px}.users-page table{min-width:640px}.role-permissions-actions{flex-wrap:wrap}.role-permissions-actions .hint{width:100%;margin:0}.modal.guide-modal,.modal.payment-modal{width:calc(100vw - 24px);border-radius:18px}.case-modal-context{padding:12px}.guide-modal .langkah-guide{line-height:20px}.modal-actions .btn{min-width:0;flex:1}}

.case-mobile-tools-toggle,.case-mobile-assignee{display:none}.thread-sub .pemilik{white-space:nowrap}
@media(max-width:760px){
 .app-shell:has(.inbox-layout.has-selection) .topbar{display:none}.app-shell:has(.inbox-layout.has-selection) .inbox-workspace{height:100dvh}.inbox-layout.has-selection .thread-header{min-height:60px;padding:10px 16px;gap:12px}.inbox-layout.has-selection .thread-header h2{font-size:16px;line-height:20px}.inbox-layout.has-selection .thread-avatar{width:32px;height:32px}.inbox-layout.has-selection .thread-number,.inbox-layout.has-selection .thread-stage{display:none}.inbox-layout.has-selection .thread-sub .pemilik{font-size:11px;height:20px;padding:2px 6px;white-space:nowrap}.inbox-layout.has-selection .thread-header .context-toggle{border:0;padding:0;min-height:32px;min-width:24px}.inbox-layout.has-selection .thread-more{margin:0}.inbox-layout.has-selection .thread-sub{margin:0}.inbox-layout.has-selection .serah{flex-wrap:nowrap;align-items:center;gap:10px}.inbox-layout.has-selection .serah .grow{min-width:0}.inbox-layout.has-selection .serah .btn{white-space:nowrap;flex:none}.inbox-layout.has-selection .serah .serah-ikon{width:32px;height:32px;flex:none}.inbox-layout.has-selection .serah strong{font-size:13px}.inbox-layout.has-selection .serah p{font-size:12px;line-height:18px}
 .app-shell:has(.ck) .topbar-kanan,.app-shell:has(.ck) .mobile-brand{display:none}.app-shell:has(.ck) .topbar .truncate{max-width:none}.app-shell:has(.ck) .main-content{padding:0 0 80px;background:var(--permukaan)}.ck .case-mobile-tools-toggle{display:flex;position:fixed;top:10px;right:12px;z-index:30}.ck:not(.show-mobile-tools) .page-heading,.ck:not(.show-mobile-tools) .ck-tab,.ck:not(.show-mobile-tools) .ck-filter,.ck:not(.show-mobile-tools)>.ck-jumlah{display:none}.ck.show-mobile-tools .page-heading,.ck.show-mobile-tools .ck-filter,.ck.show-mobile-tools .ck-jumlah,.ck.show-mobile-tools .ck-tab{margin:16px}.ck .case-toolbar{display:block;margin:0}.ck .ck-chips{margin:0;padding:10px 12px;border-bottom:1px solid var(--garis);gap:8px}.ck .ck-chip{min-height:32px;padding:0 12px}.ck .case-index{margin:0}.ck .case-index>li{border-radius:0}.ck .case-pick{min-height:76px;padding:12px 16px}.ck .case-row-title strong{margin-right:100px;margin-bottom:4px}.ck .case-row-title .badge{margin:0;font-size:11px;padding:0 6px;height:20px}.ck .case-assignee-chip{display:inline-flex;vertical-align:middle;border:1px solid var(--garis-input);border-radius:99px;font-size:11px;padding:1px 6px;line-height:16px;margin-left:6px;color:var(--tinta-2)}.ck .case-row-meta{display:none}.ck .case-row-wait{right:16px;top:14px;font-size:11px}.ck .case-split.detail-open .case-detail{inset:56px 0 64px}.ck .case-split.detail-open .case-detail .case-row-meta{display:flex}
}

.modal .case-modal-context{display:flex}.modal .case-modal-context>div{min-width:0}.payment-decisions{border:0}.payment-decisions input{accent-color:var(--hutan)}.payment-decisions label.selected{border-color:var(--hutan);background:var(--jalur)}.modal-header h2{font-size:20px;font-weight:700}

.modal .case-modal-context{flex-direction:row}.main-content>.page.users-page{max-width:800px}.users-page td{padding:14px 16px}.users-page th{padding:10px 16px}.role-permissions input{accent-color:var(--hutan)}.role-permissions td{padding:14px 16px}.role-permissions table{border:0;border-radius:0}
.st-starmy .tanda-starmy,.pemilik.starmy .tanda-starmy,.message-author .tanda-starmy,.serah-starmy .serah-ikon .tanda-starmy,.starmy-mark .tanda-starmy{fill:#171B19;stroke:none}.serah-starmy .serah-ikon{background:#D9F06B}
.knowledge-editor>.item-editor{gap:14px}.knowledge-editor .product-prices{margin-bottom:0}.knowledge-editor>.item-editor>.advanced>summary{min-height:40px;font-size:14px}.knowledge-editor .item-editor .field textarea{min-height:68px}.knowledge-editor .product-prices>.field:first-child small{line-height:16px}
.setup-source-picker{margin:0 0 24px;border:1px solid var(--garis);border-radius:12px;background:var(--permukaan);padding:12px 20px;font-size:13px}.setup-source-picker>summary{cursor:pointer;color:var(--tinta-3)}.setup-source-picker>summary strong{color:var(--tinta);margin-left:12px}.setup-source-picker .panel{border:0;padding:16px 0 0;margin:0}.omiy-page:has(.setup-source-picker)>.text-link{display:none}.omiy-page:has(.setup-source-picker) .page-heading .eyebrow{display:none}.omiy-page:has(.setup-source-picker) .page-heading{margin-bottom:20px}.omiy-editor form>.notice{margin:16px 0}
@media(max-width:760px){.lainnya-pop{animation:none}.main-content>.page.users-page{max-width:100%}}

[data-theme=dark]{--kunyit:#F2B36A;--kunyit-lembut:#36260F;--kunyit-garis:#5C4220}
.users-page .page-heading{flex-wrap:nowrap}.users-page .page-heading>div:first-child{flex:1;min-width:0}.users-page .heading-action{flex:none}.role-permissions td{padding:12px 16px}.role-permissions table{min-width:0;table-layout:fixed}.role-permissions th:not(:first-child),.role-permissions td:not(:first-child){width:25%}
@media(max-width:760px){.users-page .page-heading{flex-wrap:wrap}.users-page .heading-action{width:100%}}

/* Currency and the numeric editor share the price control. The formatted text is decorative;
   the native numeric input retains decimal validation and stores a number in the catalog. */
.price-field>label{font-size:13px;font-weight:600;line-height:18px}.price-control{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);border:1px solid var(--garis-input);border-radius:12px;background:var(--permukaan)}.price-control>input{border:0;border-radius:0 12px 12px 0;min-width:0;padding:0 12px;background:transparent}.price-control>input:not(:focus){color:transparent}.price-control>input:focus~.price-formatted{display:none}.price-formatted{position:absolute;inset:0 28px 0 56px;display:flex;align-items:center;pointer-events:none;white-space:nowrap;overflow:hidden;font-size:14px}.price-currency>summary{height:38px;display:grid;place-items:center;font-size:13px;cursor:pointer;border-right:1px solid var(--garis);background:var(--permukaan-2);border-radius:11px 0 0 11px;list-style:none}.price-currency>summary::-webkit-details-marker{display:none}.currency-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:12;width:240px;max-width:calc(100vw - 64px);padding:16px;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;box-shadow:var(--bayang-2)}.price-control:focus-within{outline:2px solid var(--fokus);outline-offset:2px}.product-availability{display:flex;align-items:center;gap:12px;padding-top:6px}.product-availability>div:first-child{flex:1;min-width:0}.product-availability strong{font-size:14px}.product-availability .hint{font-size:12px;margin:0}.product-switch{position:relative;flex:none;display:flex;width:38px;height:24px;cursor:pointer}.product-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.product-switch>span{width:38px;height:24px;border-radius:99px;background:var(--garis-input);pointer-events:none;padding:3px}.product-switch>span:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background:var(--permukaan)}.product-switch input:checked+span{background:var(--hutan)}.product-switch input:checked+span:after{margin-left:14px}.product-switch:focus-within{outline:2px solid var(--fokus);outline-offset:2px;border-radius:99px}.product-availability .produk-lain{position:absolute;right:16px;top:16px}.knowledge-editor{position:relative;min-width:0}.product-tab .sticky-actions{flex-wrap:wrap;gap:12px}.product-prices>.field:has(datalist) small{display:none}
@media(max-width:1000px){.knowledge-editor .product-prices{grid-template-columns:1fr 1fr}.knowledge-editor .price-field{grid-column:1/-1}}
@media(max-width:760px){.price-currency>summary{height:42px}.knowledge-editor .product-prices{grid-template-columns:1fr}.product-prices .price-field{grid-column:auto}.product-availability .produk-lain{top:12px;right:8px}}

.daily-stats-source{display:flex;align-items:center;gap:6px;max-width:160px;font-size:12px;line-height:16px;color:var(--tinta-3)}.daily-stats-source svg{flex:none}.daily-work .daily-card-head h2{font-size:16px;line-height:22px}.daily-work .daily-card-head .starmy-mark{display:none}.daily-learning-count{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--tinta);color:var(--permukaan);border-radius:99px;font-size:12px;font-weight:700}.mode-tindak-lanjut{display:flex;align-items:flex-start;gap:12px}.mode-tindak-lanjut>svg{flex:none}.mode-tindak-lanjut strong{display:block;font-size:14px;color:var(--tinta)}.followup-card-title{min-width:0;flex:1}.followup-card-title>p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.followup-due{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}.followup-due.late{color:var(--merah)}.followup-context-reason{font-size:13px;line-height:20px;padding:0 24px}.followup-source-preview{padding:8px 24px 16px;border-bottom:1px solid var(--garis)}.followup-source-preview>.advanced{border:0;margin:0}.followup-source-preview summary{padding:0;font-size:13px}.followup-card>.followup-meta{display:none}.followup-card>.followup-review>summary{display:none}.followup-card .followup-review-body{padding-top:16px}.followup-card .followup-actions>.btn:not(.secondary){order:-1}.followup-card .followup-actions .alasan-gate{width:100%}
@media(max-width:1000px) and (min-width:761px){.daily-dashboard .kepala .daily-open-cases{grid-column:1;grid-row:auto;justify-self:start}.daily-dashboard .kasus-kepala{padding-right:24px;padding-bottom:52px}.daily-wait{top:auto;bottom:18px;left:24px;right:auto}.daily-case-actions{top:auto;bottom:14px}.followup-card .sl-kartu-kepala{flex-wrap:wrap}.followup-card .sl-kartu-kepala>.btn{margin-left:68px}}
@media(max-width:760px){.daily-dashboard .kepala{display:block;width:100%}.daily-dashboard .tanggal{margin-bottom:8px}.daily-dashboard .kepala-sub{margin-top:8px}.daily-dashboard .daily-open-cases{margin-top:16px}.daily-dashboard .kasus-kepala{padding:16px 16px 58px}.daily-wait{top:auto;bottom:20px;right:16px}.daily-stats-source{max-width:130px}.followup-context-reason,.followup-source-preview{padding-left:16px;padding-right:16px}.followup-card .sl-kartu-kepala{flex-wrap:wrap}.followup-card-title{flex-basis:calc(100% - 70px)}.followup-card .sl-kartu-kepala>.btn{margin-left:68px}}

.knowledge-page .knowledge-editor>.sticky-actions{position:static;margin:0;border:0;border-top:1px solid var(--garis);border-radius:0;padding:12px 24px;background:var(--permukaan)}.knowledge-editor .design-card-head small{margin-right:28px}.knowledge-editor>.item-editor>.field:has(textarea)>textarea{min-height:88px}.knowledge-editor .price-field>small{display:block;font-size:12px;line-height:16px;color:var(--tinta-3)}.knowledge-editor .product-prices>.field{align-self:start;justify-content:flex-start}.knowledge-index .product-pick{padding:12px 16px}.knowledge-index .product-pick strong{font-size:14px;line-height:20px}.knowledge-index .product-pick small{font-size:13px;line-height:18px}.knowledge-index .design-card-body .button-row{flex-direction:column;align-items:flex-start;gap:8px}.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:200px}.case-detail-actions .btn{min-height:32px}.case-detail-actions .btn:has(svg[data-icon=check]){background:none;border-color:transparent}.case-index .case-row-title .badge{display:inline-flex;gap:4px}
@media(max-width:1000px){.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:24px}.knowledge-page .knowledge-editor>.sticky-actions{flex-wrap:wrap}.knowledge-editor .sticky-actions .hint{width:100%;margin-left:0}}
@media(max-width:760px){.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:16px}.knowledge-page .knowledge-editor>.sticky-actions{position:sticky;bottom:64px;z-index:10;padding:12px 16px}}

.sidebar .menu-link[aria-current=page] .menu-badge{background:#171B19;color:#D9F06B}.followup-pick>.avatar{display:inline-grid;place-items:center;font-size:14px;line-height:20px;-webkit-line-clamp:unset;-webkit-box-orient:unset}.followup-pick.aktif{border-color:var(--garis)}.followup-filters button{padding:0 10px;min-height:30px}.followup-filters .count,.followup-filters .followup-badge{color:var(--tinta-2);background:var(--sorot)}.followup-workspace{display:flex;flex-direction:column}.followup-workspace>.sl-rekap{order:5}.followup-workspace>.sl-halaman{order:4}.mode-tindak-lanjut{padding:12px 16px;line-height:18px}.mode-tindak-lanjut strong{line-height:20px}.followup-card .followup-review-body>.advanced{padding:0;margin:0;border:0;border-radius:0}.followup-card .followup-review-body>.advanced>summary{justify-content:flex-start;gap:8px;min-height:32px;font-size:13px;padding:0}.followup-card .followup-review-body>.advanced>summary .tanda-starmy{width:16px;height:16px;border-radius:50%;background:#D9F06B;padding:2px;stroke:none;fill:#171B19}.sl:not(.followup-workspace){display:flex;flex-direction:column}.sl:not(.followup-workspace)>.sl-runs{order:6}.sl:not(.followup-workspace)>.sl-halaman{order:5}.sl:not(.followup-workspace)>.sl-rekap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}.sl:not(.followup-workspace)>.sl-rekap h2{border:0;margin:0;padding:0;font-size:14px;line-height:20px}.sl:not(.followup-workspace) .learning-schedule{margin:0;font-size:12px;line-height:16px}.sl:not(.followup-workspace)>.sl-rekap>.field{margin:0;max-width:150px}.sl:not(.followup-workspace)>.sl-rekap>.field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sl:not(.followup-workspace)>.sl-rekap>.field input{min-height:32px;padding:0 8px;font-size:12px}.sl:not(.followup-workspace)>.sl-rekap>.followup-analysis{width:100%;margin:0}.learning-completed{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:20px;border-radius:99px;padding:0 8px;background:var(--hutan-lembut);color:var(--hutan-teks)}.learning-permission{border:1px solid #A9BDD3;line-height:18px;padding:12px 16px}.learning-permission p{font-size:12px;line-height:18px;margin:0}.sl-kartu:not(.followup-card) .followup-review>summary{display:none}.sl-kartu:not(.followup-card) .followup-review-body{padding-top:16px}.sl-kartu:not(.followup-card) .followup-review-body>.field textarea{min-height:88px;height:88px}.sl-kartu:not(.followup-card) .followup-actions .btn.secondary{order:-1}.sl-kartu:not(.followup-card){box-shadow:none}.customer-drawer-subtitle{font-size:13px;line-height:20px;color:var(--tinta-3);margin-top:-16px}.price-field .price-control,.product-prices>.field input[list]{margin-top:0}.price-field small{margin-top:0}
@media(max-width:760px){.followup-filters button{min-height:36px}.sl:not(.followup-workspace)>.sl-rekap{gap:8px}.sl:not(.followup-workspace)>.sl-rekap>.field{width:150px}.customer-drawer-subtitle{margin-top:-12px}}

/* Compact navigation and cards may wrap, but do not extend beyond their workspace. */
.app-shell.ciut .menu-grup{display:none}.sr .sr-pita{margin:0 0 24px;display:flex;flex-wrap:wrap;gap:20px}.sr-pita>.grow{min-width:0;flex:1 1 300px}.sr-pita .button-row{flex-wrap:wrap}.product-prices>.field{margin-top:0}.product-prices .price-field>label{margin:0}.knowledge-editor{border-radius:16px!important}.sl-kartu:first-of-type{border-top:1px solid var(--garis);margin-top:0}.sl-kartu .field{margin-top:0}.sl-kartu:not(.followup-card) .followup-review-body>.advanced{margin:0;border:0;padding:0}.sl-kartu:not(.followup-card) .followup-review-body>.advanced>summary{font-size:13px;padding:0;min-height:24px}.sl-kartu .button-row{margin-top:0}.sl:not(.followup-workspace)>.sl-rekap>.followup-analysis{position:relative;flex:none;width:auto;margin:0}.sl:not(.followup-workspace)>.sl-rekap>.followup-analysis>summary{padding:0;display:grid;place-items:center;list-style:none;width:32px;height:32px;border-radius:8px}.sl:not(.followup-workspace)>.sl-rekap>.followup-analysis>summary::-webkit-details-marker{display:none}.sl:not(.followup-workspace) .learning-analysis-body{position:absolute;right:0;top:100%;z-index:12;width:320px;max-width:calc(100vw - 48px);padding:16px;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;box-shadow:var(--bayang-2)}.sl:not(.followup-workspace) .learning-analysis-body p+p{margin-top:12px}.knowledge-editor .design-card-head>small{margin-right:28px}.sl-kartu:not(.followup-card) .followup-review-body>.omiy-check{margin-top:0}
@media(max-width:1180px) and (min-width:761px){.sidebar .menu-grup{display:none}}
@media(max-width:760px){.sr .sr-pita{margin:0 0 20px}.sl:not(.followup-workspace) .learning-analysis-body{position:fixed;left:16px;right:16px;top:112px;width:auto;max-height:calc(100dvh - 192px);overflow:auto}}
@media(max-width:760px){.inbox-shell:not(:has(.has-selection)) .inbox-workspace{height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px))}.inbox-layout:not(.has-selection) .conversation-panel{flex:1}.inbox-layout:not(.has-selection) .conversation-list{flex:1;min-height:0;overflow-y:auto}}


/* Detail alignment from the supplied Starmy desktop/phone prototype.
   These shared rules are v2 only; layout still adapts to the browser. */
:root{--customer-avatar-1:#E8E3D6;--customer-avatar-2:#DFE8E1;--customer-avatar-3:#E5E1EC;--customer-avatar-4:#DFE6EE}
[data-theme=dark]{--customer-avatar-1:#2A2722;--customer-avatar-2:#212A24;--customer-avatar-3:#27242D;--customer-avatar-4:#212831}
.topbar{gap:16px}
.sidebar-menu .menu-grup:first-child{margin-top:0}
.page-heading h1{margin-top:0}
.tab-garis button{min-height:42px;height:42px;line-height:18px;font-weight:600}
.tab-garis button[aria-pressed=true]{font-weight:600}
.btn{line-height:1}
.page .field>span:first-child,.price-field>label{line-height:18px}
.page .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:40px;min-height:40px;line-height:20px;padding:0 12px}
.page .field textarea{line-height:21px;padding:10px 12px}
.page .form-grid>.field{margin:0;align-self:start;gap:6px}
.knowledge-editor .item-editor>.product-prices{gap:12px}
.knowledge-page .knowledge-editor .design-card-head>small{margin-right:40px}
.knowledge-editor .product-prices>.field{margin:0;gap:6px}
.knowledge-page .knowledge-editor .form-grid>.field{margin:0}
.knowledge-page .knowledge-editor .item-editor>.field{margin:0}
.knowledge-editor .product-prices .price-field>label{margin:0}
.page .knowledge-editor .price-control>input[type=number]{height:38px;min-height:38px;padding:0 12px;line-height:20px}
.price-currency>summary{font-size:14px;font-weight:600}
.product-unit-input{position:relative;display:block;min-width:0}
.page .knowledge-editor .product-unit-input>input{width:100%;padding-right:32px}
.product-unit-input>svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--tinta-3)}
.product-unit-input>input::-webkit-calendar-picker-indicator{opacity:0}
.product-switch,.product-switch>span{width:40px}
.product-switch input:checked+span:after{margin-left:16px}

/* Labels participate in normal flow. Hidden actions never reserve label space. */
.thread-header{padding:10px 24px}
.message-wrap,.message-wrap.outgoing,.message-wrap.lanjutan{margin:0;gap:0}
.message-wrap .message,.message-wrap .message.lanjutan{margin:0;padding:10px 14px 8px;font-size:15px;line-height:22px;border-radius:6px 16px 16px 16px}
.message-wrap .message.outgoing{border-radius:16px 6px 16px 16px}
.message-wrap.lanjutan .message{border-radius:16px}
.message-wrap .message p+p{margin-top:10px}
.message-author-row{display:flex;justify-content:flex-end;align-items:center;margin:12px 4px 8px;min-height:16px}
.message-author-row .message-author{margin:0;gap:6px;line-height:16px;font-weight:600;color:var(--tinta-2)}
.message-author-row .tanda-starmy,.conversation-status .st-starmy .tanda-starmy,.pemilik.starmy .tanda-starmy{padding:3px}
.serah-starmy .serah-ikon .tanda-starmy{width:62%;height:62%;padding:0}
.message-wrap .message-meta{align-items:center;line-height:16px;margin-top:4px;gap:6px}
.message-wrap .message .message-topline,.message-wrap.lanjutan .message .message-topline{position:absolute;top:-16px;left:-8px;right:auto;transform:none;display:flex;width:auto;min-height:32px;gap:2px;padding:2px;border:1px solid var(--garis);border-radius:10px;background:var(--permukaan);box-shadow:var(--bayang-1);opacity:0;pointer-events:none;z-index:1}
.message-wrap.incoming .message .message-topline{left:auto;right:-8px}
.message-wrap .message-topline:empty{display:none}
.message-wrap:hover .message-topline,.message-wrap:focus-within .message-topline{opacity:1;pointer-events:auto}
.message-wrap .message .message-topline button{height:28px;min-height:28px;margin:0;padding:0 8px;opacity:1;line-height:16px}
.message-wrap .message .message-topline button:disabled{opacity:.55}
.message-wrap .message .message-topline .message-delete{width:28px;padding:0;justify-content:center}
.message-wrap .message .message-topline .quote-action{gap:4px}

/* Result counts and analysis share a footer; empty results need no disabled pager. */
.sl-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:12px;border-top:1px solid var(--garis);font-size:12px;line-height:16px;color:var(--tinta-3)}
.sl-footer .sl-halaman{display:flex;align-items:center;gap:12px;margin:0;padding:0;font-size:12px;line-height:16px;color:var(--tinta-3)}
.sl-footer .sl-result-count{margin-left:auto}
.sl-footer .followup-analysis{flex:1 1 auto;margin:0;order:0}
.sl-footer .followup-analysis>summary{padding:0;line-height:16px}
.sl-footer .learning-analysis-body{margin-top:12px;max-width:68ch}
.sl-footer .learning-analysis-body p+p{margin-top:8px}
.sl-kartu-kepala{gap:12px}
.sl-kartu .field textarea{line-height:21px;padding:10px 12px}
.sl-kartu .followup-actions .btn{min-height:40px}
.daily-card-body{padding:16px 24px}
.case-search-row{gap:8px}
.modal h2{font-size:18px;line-height:24px}
.modal .field>span:first-child{line-height:18px}
.modal .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:40px;min-height:40px;line-height:20px;padding:0 12px}
.modal .field textarea{line-height:21px;padding:10px 12px}
.modal .form-grid>.field{margin:0;gap:6px;align-self:start}

@media(max-width:760px){
 .page .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:44px;min-height:44px}
 .page .knowledge-editor .price-control>input[type=number]{height:42px;min-height:42px}
 .thread-header{padding:10px 16px}
 .message-wrap .message{padding:10px 12px 6px;font-size:14px;line-height:20px}
 .message-wrap .message p{font-size:14px;line-height:20px}
 .message-author-row{margin-top:8px;margin-bottom:6px}
 .message-wrap .message .message-topline{display:flex}
 .sl-footer .sl-halaman{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap}
 .sl-footer .sl-result-count{margin-left:0}
 .daily-card-body{padding:16px}
 .modal .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:44px;min-height:44px}
}


/* October 4 visual review: shared controls and actual scrolled states. */
.hari-ini.daily-dashboard{align-content:start}
.daily-dashboard .jalur-kamu>.tindak:first-child{margin-top:0}
.sidebar-menu{gap:0}
.sidebar-menu .menu-grup{padding-bottom:8px}
.sidebar-menu .menu-grup:first-child{padding-bottom:12px}
.app-shell .sidebar .menu-link[aria-current=page] .menu-badge{background:#171B19;color:#D9F06B}
.pl-nama>.avatar{display:inline-grid;place-items:center;line-height:1;flex:none}
.btn>svg,.icon-btn>svg,.badge>svg,.learning-permission>svg,.dikelola-platform>svg,.alasan-gate>svg{flex-shrink:0}
.badge{line-height:16px}
.main-content .learning-permission{border:1px solid #A9BDD3;border-radius:12px;padding:12px 16px}
.sl .followup-list{gap:24px}
.sl .followup-list>.sl-kartu{margin:0}
.followup-card .followup-actions .alasan-gate{order:10;flex-basis:100%;max-width:none;display:flex;align-items:flex-start;gap:6px;line-height:18px}
.followup-card .followup-actions .alasan-gate>svg{margin-top:2px}
.followup-card .followup-card-title .badge{max-width:none;white-space:nowrap}
.followup-filters button{white-space:nowrap;flex-shrink:0}
.followup-card .followup-actions{align-items:center;gap:10px}

/* A dialog scrolls its content, keeping the title, close and actions in view. */
.modal{overflow:hidden;max-height:calc(100dvh - 48px)}
.modal>form,.modal>div{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;max-height:inherit}
.modal .modal-header{flex:none;padding:20px 24px;border-bottom:1px solid var(--garis);background:var(--permukaan);gap:16px}
.modal .modal-header h2{line-height:24px;margin:0;min-width:0}
.modal .modal-header>.icon-btn{flex:none;margin:0;width:32px;height:32px}
.modal .modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:20px;padding:20px 24px 24px;scrollbar-gutter:stable}
.modal .modal-actions{flex:none;justify-content:flex-end;align-items:center;margin:0;padding:16px 24px;border-top:1px solid var(--garis);background:var(--permukaan-2);gap:8px}
.modal.modal-drawer>form,.modal.modal-drawer>div{height:100%;max-height:100%}
.modal.modal-drawer{max-width:100vw}
.modal.modal-drawer .modal-body{flex:1}
.modal .customer-drawer-subtitle{margin:0 0 4px;font-size:13px;line-height:20px}
.modal .customer-stage-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.modal .customer-stage-row>.field{margin:0;gap:6px;align-self:start}
.modal .customer-stage-row input,.modal .customer-stage-row select{width:100%}

/* Settings use the same card edges and hierarchy as the supplied prototype. */
.service-page .dikelola-platform{display:flex;align-items:flex-start;gap:10px;line-height:20px;margin-bottom:24px;padding:14px 16px;background:var(--info-lembut);border:1px solid var(--garis);border-radius:12px}
.service-page .dikelola-platform>svg{margin-top:2px;color:var(--info)}
.service-page .service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.service-page .service-card{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);padding:24px}
.service-page .service-card h2{font-size:14px;line-height:20px;color:var(--tinta-2);margin:0 0 12px;font-weight:600}
.service-page .service-value{font-size:24px;line-height:32px;font-weight:700;margin:0 0 8px}
.service-page .service-card>.muted{font-size:14px;line-height:22px;max-width:60ch}
.service-page .service-limits{margin-top:24px;background:var(--permukaan);border:1px solid var(--garis);border-radius:16px;overflow:hidden}
.service-page .service-limits>h2{padding:20px 24px;margin:0;border-bottom:1px solid var(--garis);font-size:16px;line-height:24px}
.service-page .service-limits>.papan{border:0;padding:0;margin:0}
.service-page .service-limits dl>div{padding:20px 24px;display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:24px;border-bottom:1px solid var(--garis);margin:0}
.service-page .service-limits dl>div:last-child{border-bottom:0}
.service-page .service-limits dt{font-size:14px;line-height:22px;font-weight:600}
.service-page .service-limits dd{margin:0;font-size:14px;line-height:22px;color:var(--tinta-2)}
.tm .tm-daftar{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);overflow:hidden}
.tm .tm-daftar>li{padding:16px 24px}
.tm .tm-daftar>li:last-child{border-bottom:0}
.main-content>.akun-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.akun-page>.page-heading{grid-column:1/-1;margin:0}
.akun-page>.akun-bagian{margin:0}
.sr .sr-pita>.sr-pita-teks{flex:1 1 300px;min-width:0}
.sr .sr-pita>.sr-aksi{margin:0 0 0 auto;flex:0 0 200px}
.sr .sr-angka,.sr .sr-sinkron,.sr .sr-teknis dl{border-top:1px solid var(--garis)}
.sr .sr-bagian+.sr-bagian{margin-top:24px}
.page>.stat-grid{margin-bottom:24px}
.config-tabbed-page .form-section{border-bottom:1px solid var(--garis);padding-bottom:16px;margin-bottom:20px}
.config-tabbed-page .ai-import{border:1px solid var(--garis);border-radius:16px;background:var(--permukaan);padding:20px;margin:20px 0}
.config-tabbed-page .sticky-actions,.config-tabbed-page .config-entry:first-of-type{border-top:1px solid var(--garis)}
.lp .lp-buku{border:1px solid var(--jalur-garis);border-radius:16px;padding:24px;margin-bottom:24px}
.lp .lp-kolom{gap:24px}
.lp .lp-kolom>section{min-width:0;background:var(--permukaan);border:1px solid var(--garis);border-radius:16px;padding:24px}
.lp .bagian-judul{border-bottom:1px solid var(--garis);padding-bottom:16px;margin-bottom:16px}
.lp .bagian-judul h2,.lp .lp-buku-kepala h2{font-size:16px;line-height:24px;font-weight:700}

@media(max-width:1000px){
 .main-content>.akun-page{grid-template-columns:minmax(0,1fr)}
 .service-page .service-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .topbar .topbar-logo{display:none}
 .topbar .topbar-kanan{gap:6px}
 .topbar .status-starmy{width:36px;height:36px;padding:0;justify-content:center;gap:0}
 .topbar .status-starmy>span:not(.status-dot),.topbar .status-starmy>svg{display:none}
 .modal.modal-dialog{max-height:calc(100dvh - 24px)}
 .modal .modal-header{padding:16px;gap:12px}
 .modal .modal-header>.icon-btn{width:36px;height:36px}
 .modal .modal-body{padding:16px;scroll-padding:16px;scrollbar-gutter:auto}
 .modal .modal-actions{padding:12px 16px max(12px,env(safe-area-inset-bottom));gap:8px}
 .modal .modal-actions .btn{flex:0 1 auto;min-height:44px}
 .modal .customer-stage-row{gap:12px}
 .service-page .service-card{padding:20px}
 .service-page .service-limits>h2{padding:16px 20px}
 .service-page .service-limits dl>div{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px}
 .tm .tm-daftar>li{padding:16px}
 .sl .followup-list{gap:16px}
 .sl .learning-permission{gap:10px}
 .sl .learning-permission>svg{margin-top:2px}
 .followup-workspace .followup-toolbar{gap:12px;margin-bottom:16px}
 .app-shell:has(.followup-workspace) .topbar-logo,.app-shell:has(.followup-workspace) .topbar-kanan{display:none}
 .app-shell:has(.followup-workspace) .topbar{padding:0 16px}
 .app-shell:has(.followup-workspace) .topbar-kiri{padding-right:48px}
 .followup-workspace>.page-heading{margin:0}
 .followup-workspace>.page-heading>div:first-child{display:none}
 .followup-workspace>.page-heading .heading-action{position:fixed;top:6px;right:12px;z-index:31;width:44px;height:44px}
 .followup-workspace>.page-heading .heading-action .btn{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;font-size:0;gap:0}
 .followup-workspace>.page-heading .heading-action .btn>svg{width:20px;height:20px}
 .followup-workspace .mode-tindak-lanjut{margin:0 0 16px}
 .followup-workspace .followup-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
 .followup-workspace .followup-filters>button{flex:0 0 auto;min-height:40px;padding:0 12px;white-space:nowrap}
 .followup-workspace .followup-filters .count{flex:none}
 .followup-workspace .followup-split.single-result .followup-index{display:none}
 .followup-workspace .followup-split{gap:16px}
 .followup-card .sl-kartu-kepala{padding:16px;gap:10px}
 .followup-card .sl-kartu-kepala>.avatar{width:40px;height:40px}
 .followup-card .followup-card-title{flex-basis:calc(100% - 50px)}
 .followup-card .sl-kartu-kepala>.btn{margin-left:50px}
 .followup-card .followup-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
 .followup-card .followup-actions>.btn:not(.secondary){grid-column:1/-1;order:-2;width:100%}
 .followup-card .followup-actions .alasan-gate{grid-column:1/-1;order:-1;width:auto}
 .followup-card .followup-actions>.btn.secondary{justify-self:start}
 .knowledge-page .knowledge-index{display:contents}
 .knowledge-page .knowledge-split{display:flex;flex-direction:column;gap:20px}
 .knowledge-page .knowledge-split>*{width:100%}
 .knowledge-page .knowledge-index>.design-card:first-child{order:0;width:100%}
 .knowledge-page .knowledge-editor{order:1;width:100%}
 .knowledge-page .knowledge-index>.design-card:last-child{order:2;width:100%}
 .lp .lp-kolom>section,.lp .lp-buku{padding:20px}
 .sr .sr-pita>.sr-aksi{flex-basis:100%;width:100%;margin:0;display:flex;flex-wrap:wrap}
 .sr .sr-pita>.sr-aksi .btn{flex:1 1 140px}
}