/* ============================================================================
   Starmy CRM, shared component and page styles. Typography:
   Inter (app/layout.tsx). Import order defines the 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
   langganan.css  Langganan (paket dan tagihan)
   ========================================================================== */
/* ============================================================================
   Starmy CRM — Design Tokens (Fase 0: Fondasi Token + Font)
   Sumber: prototipe "CRM Starmy — Jewel Dijinakkan" (27 Okt): kertas hangat + tinta, aksen perunggu/pasir.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Palet Jewel Dijinakkan (prototipe 27 Okt): jewel hanya untuk titik, label kecil, dan grafik.
     --forest = aksen kuat (CTA, teks aksen, item aktif): perunggu di tema terang, pasir di tema gelap.
     --sand = isian tipis (sidebar, menu aktif, pilihan). */
  --gold: #AE914F;
  --teal: #2B6D6D;
  --coral: #B9644C;
  --violet: #645B95;
  --steel: #43647D;
  --forest: #6E5B36;
  --forest2: #5D4C2C;
  --forest-d: #6E5B36;
  --sand: #D9C7A7;
  --lime: #CDDB8B;
  --lime-d: #71803A;

  /* Elevasi & Permukaan (Light Mode) */
  --canvas: #F7F5F0;          /* Putih kertas hangat */
  --surface: #FFFFFF;         /* Kartu putih murni */
  --surface2: #F0EDE3;        /* Permukaan tingkat 2 / hover */
  --surface-2: var(--surface2);
  --surface3: #FFFFFF;
  --queuebg: #F3F0E7;         /* Latar antrean Inbox */
  --border: #E5E0D0;          /* Hairline hangat */
  --border-strong: #D6CFBC;
  --border-subtle: #E5E0D0;

  /* Teks & Kontras */
  --text: #211F1B;
  --muted: #6E6A5E;
  --muted2: #8A8371;          /* 3,8:1 di atas kartu putih (dulu #A29B88, 2,8:1: terlalu pudar untuk teks) */

  /* Status Bisnis */
  --success: #177245;
  --success-subtle: #E6F1EA;
  --online: #177245;
  --warn: #9A6206;
  --warn-bg: #FAF1DC;
  --warning-border: color-mix(in srgb, #9A6206 30%, transparent);
  --danger: #B3261E;
  --danger-bg: #FAECEA;
  --danger-border: color-mix(in srgb, #B3261E 25%, transparent);
  --info: var(--steel);
  --info-subtle: rgba(67, 100, 125, 0.08);

  /* Interaksi & Fokus */
  --ring: rgba(174, 145, 79, 0.4);
  --shadow: 0 1px 2px rgba(32, 31, 28, 0.035), 0 10px 26px -16px rgba(64, 58, 44, 0.13);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-floating: var(--shadow-lg);

  /* Mapping ke token kode produksi */
  --bg-canvas: var(--canvas);
  --bg-surface: var(--surface);
  --bg-muted: var(--surface2);
  --bg-hover: var(--surface2);
  --bg-active: color-mix(in srgb, var(--surface2) 80%, var(--border));
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--muted2);
  --primary: var(--forest);
  --primary-hover: #7B663D;
  --primary-foreground: #FAF8F2;
  --accent: var(--forest);
  --accent-subtle: rgba(110, 91, 54, 0.08);
  --accent-border: var(--forest);
  --bubble-outgoing: #EFE6CF;
  --bubble-incoming: #F2EFE6;
  --warning: var(--warn);
  --warning-subtle: var(--warn-bg);
  --brand-lime: var(--lime);
  --brand-ink: #211F1B;
  --ai-bg: #26241F;
  --ai-fg: var(--lime);
  --chart-accent: var(--forest);
  --chart-neutral: var(--muted2);
  --disabled-bg: var(--surface2);
  --disabled-fg: var(--muted2);
  --toast-bg: #26241F;
  --toast-teks: #FAF8F2;
  --toast-aksi: var(--lime);
  --overlay: rgba(33, 31, 27, 0.45);
  --media-overlay: rgba(33, 31, 27, 0.85);
  --customer-avatar-1: #ECE8DD;
  --customer-avatar-2: #ECE8DD;
  --customer-avatar-3: #ECE8DD;
  --customer-avatar-4: #ECE8DD;
  --on-dark: #FFFFFF;
  --on-dark-muted: #D4D4D8;
  --on-dark-subtle: #A1A1AA;
  --auth-surface: #201913;
  --auth-elevated: #2B241B;
  --auth-bubble: #3A3125;
  --accent-glow: rgba(174, 145, 79, 0.2);
  --light-glow: rgba(255, 255, 255, 0.08);

  /* Pasangan bubble pesan: latar dan teks selalu didefinisikan bersama (prototipe 27 Okt). */
  --bub-in-bg: #F2EFE6; --bub-in-fg: #211F1B;
  --bub-ai-bg: #EFE6CF; --bub-ai-fg: #33302A;
  --bub-out-bg: #26241F; --bub-out-fg: #FAF8F2;
  --bub-note-bg: #FBF2DA; --bub-note-fg: #5C4510; --bub-note-bd: #C9A94F;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Palet Brand & Jewel (Dark Mode di-desaturasi ±15%) */
  --gold: #AE914F;
  --teal: #108B8A;
  --coral: #EA6842;
  --violet: #7162BF;
  --steel: #3C78A6;
  --forest: #E7D9BE;          /* Aksen pasir di tema gelap, teks gelap di atasnya */
  --forest2: #3A3125;
  --forest-d: #D9BE8C;
  --sand: #E7D9BE;
  --lime: #CDDB8B;
  --lime-d: #A9BC62;

  /* Tangga Elevasi ala Linear (Dark Mode) */
  --canvas: #101110;          /* Dasar kanvas terdalam */
  --surface: #171816;         /* Kartu & panel */
  --surface2: #1F201E;        /* Hover / secondary surface */
  --surface-2: var(--surface2);
  --surface3: #262724;        /* Active / elevated card */
  --queuebg: #131412;         /* Latar antrean Inbox */
  --border: #26271F;          /* Hairline putih ±9% */
  --border-strong: #34352C;
  --border-subtle: #26271F;

  /* Teks & Kontras */
  --text: #F4F2EC;
  --muted: #A3A099;
  --muted2: #85837C;          /* 4,7:1 di atas kartu gelap (dulu #6F6E68, 3,5:1) */

  /* Status Bisnis */
  --success: #4ADE80;
  --success-subtle: #1C2B20;
  --online: #4ADE80;
  --warn: #F2C078;
  --warn-bg: #2B2110;
  --warning-border: #665033;
  --danger: #FCA5A5;
  --danger-bg: #2B1616;
  --danger-border: #67353A;
  --info: var(--steel);
  --info-subtle: rgba(60, 120, 166, 0.15);

  /* Interaksi & Fokus */
  --ring: rgba(217, 190, 140, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 34px -14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-floating: var(--shadow-lg);

  /* Mapping ke token kode produksi */
  --bg-canvas: var(--canvas);
  --bg-surface: var(--surface);
  --bg-muted: var(--surface2);
  --bg-hover: var(--surface2);
  --bg-active: var(--surface3);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--muted2);
  --primary: var(--forest);
  --primary-hover: #F0E6D2;
  --primary-foreground: #221D17;
  --accent: var(--forest);
  --accent-subtle: rgba(231, 217, 190, 0.1);
  --accent-border: var(--forest);
  --bubble-outgoing: #2B2618;
  --bubble-incoming: #22231F;
  --warning: var(--warn);
  --warning-subtle: var(--warn-bg);
  --chart-accent: var(--forest);
  --chart-neutral: var(--muted2);
  --disabled-bg: var(--surface2);
  --disabled-fg: var(--muted2);
  --toast-bg: var(--surface3);
  --toast-teks: var(--text);
  --toast-aksi: var(--lime);
  --overlay: rgba(0, 0, 0, 0.65);
  --bub-in-bg: #22231F; --bub-in-fg: #F2F1EC;
  --bub-ai-bg: #2B2618; --bub-ai-fg: #EFE6CE;
  --bub-out-bg: #E8E2D2; --bub-out-fg: #1D1B16;
  --bub-note-bg: #2B2415; --bub-note-fg: #E9CF8F; --bub-note-bd: #8A6F35;
  --customer-avatar-1: #2A2924;
  --customer-avatar-2: #2A2924;
  --customer-avatar-3: #2A2924;
  --customer-avatar-4: #2A2924;
}

/* ============================================================================
   Dimensi, Bentuk (Radius 16px Quiet Premium), & Tipografi
   ========================================================================== */
:root {
  /* Font Stacks */
  --font-geist-sans-stack: var(--font-geist-sans), 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono-stack: var(--font-geist-mono), 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-fraunces-stack: var(--font-fraunces), 'Fraunces', Georgia, serif;

  --huruf: var(--font-geist-sans-stack);
  --font-body: var(--font-geist-sans-stack);
  --font-display: var(--font-fraunces-stack);
  --font-code: var(--font-geist-mono-stack);

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --line-height-xs: 16px;
  --line-height-sm: 18px;
  --line-height-base: 20px;
  --line-height-lg: 24px;
  --line-height-xl: 26px;
  --line-height-2xl: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Aturan bentuk: kartu 16px, hairline 1px, shadow lembut */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card: 16px;
  --radius-full: 999px;
  --r-1: var(--radius-sm);
  --r-2: var(--radius-md);
  --r-3: var(--radius-xl);
  --r-pil: var(--radius-full);
  --radius: var(--radius-xl);

  --control-sm: 28px;
  --control-md: 34px;
  --control-lg: 40px;
  --input-height: 36px;
  --touch-target: 44px;
  --cepat: 120ms;
  --sedang: 180ms;
  --lambat: 200ms;
  --lengkung: ease-out;

  --lebar-rel: 60px;
  --lebar-sidebar: 232px;
  --lebar-ciut: 60px;
  --tinggi-topbar: 60px;
  --lebar-jalur: 360px;
  --inbox-details-width: 350px;
  --worksheet-gap: 16px;
}

/* ============================================================================
   Kelas Utilitas Tipografi Baru (reference/font-tokens.css)
   ========================================================================== */
body {
  font-family: var(--font-geist-sans-stack);
}

.font-display {
  font-family: var(--font-fraunces-stack);
  font-variation-settings: "opsz" 100, "SOFT" 10, "WONK" 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.font-code, .mono {
  font-family: var(--font-geist-mono-stack);
}

.tnum, .angka, .num {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.font-tight {
  letter-spacing: -0.01em;
}

/* ============================================================================
   Compatibility aliases untuk komponen yang masih menggunakan nama alias lama
   Jangan menulis token yang merujuk dirinya sendiri (mis. --text: var(--text)): browser menganggapnya tidak
   valid sehingga warna itu hilang di kedua tema.
   ========================================================================== */
:root, [data-theme=dark] {
  --kanvas: var(--canvas);
  --permukaan: var(--surface);
  --permukaan-2: var(--surface2);
  --sorot: var(--surface2);
  --sorot-kuat: var(--surface3);
  --melayang: var(--surface);
  --garis: var(--border);
  --garis-lembut: var(--border-subtle);
  --garis-kuat: var(--border-strong);
  --garis-input: var(--border);
  --tinta: var(--text);
  --tinta-2: var(--muted);
  --tinta-3: var(--muted2);
  --hutan: var(--forest);
  --hutan-hover: var(--forest2);
  --hutan-teks: var(--forest-d);
  --hutan-lembut: var(--surface2);
  --pada-hutan: #FAF8F2;
  --jalur: var(--surface2);
  --jalur-garis: var(--border);
  --jalur-bintang: var(--border);
  --jalur-angka: var(--text);
  --kunyit: var(--warn);
  --kunyit-lembut: var(--warn-bg);
  --kunyit-garis: var(--warning-border);
  --merah: var(--danger);
  --merah-lembut: var(--danger-bg);
  --merah-garis: var(--danger-border);
  --bahaya: var(--danger);
  --info-lembut: var(--info-subtle);
  --aktif: var(--online);
  --fokus: var(--forest-d);
  --grafik-starmy: var(--forest);
  --grafik-tim: var(--muted2);
  --bayang-1: none;
  --bayang-2: var(--shadow);
  --bayang-3: var(--shadow-lg);
  --latar-modal: var(--overlay);
  --bg: var(--surface);
  --panel: var(--surface);
  --panel2: var(--surface2);
  --panel-2: var(--surface2);
  --panel3: var(--surface3);
  --text-2: var(--muted);
  --faint: var(--muted2);
  --line: var(--border);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --line-q: var(--border);
  --brand: var(--forest);
  --brand-bright: var(--lime);
  --brand-strong: var(--forest);
  --on-brand: #FAF8F2;
  --on-primary: var(--primary-foreground);
  --inverse: var(--text);
  --on-inverse: var(--surface);
  --soft: var(--surface2);
  --soft2: var(--surface3);
  --sage: var(--surface2);
  --sage-text: var(--text);
  --sage-text-2: var(--muted);
  --sage-tag: var(--forest);
  --orange: var(--coral);
  --on-orange: #FFFFFF;
  --orange-soft: var(--warn-bg);
  --orange-ink: var(--warn);
  --pasir: var(--surface2);
  --pasir-tinta: var(--muted);
  --danger-soft: var(--danger-bg);
  --error: var(--danger);
  --error-bg: var(--danger-bg);
  --warning-soft: var(--warn-bg);
  --attn: var(--warn);
  --attn-bg: var(--warn-bg);
  --attn-line: var(--warning-border);
  --info-soft: var(--info-subtle);
  --pending: var(--info);
  --pending-bg: var(--info-subtle);
  --done: var(--muted);
  --done-bg: var(--surface2);
  --offline: var(--muted2);
  --note: var(--muted);
  --note-bg: var(--warn-bg);
  --note-line: var(--warning-border);
  --gelembung: var(--bubble-incoming);
  --gelembung-starmy: var(--bubble-outgoing);
  --gelembung-kakak: var(--bubble-outgoing);
  --bubble-starmy: var(--bubble-outgoing);
  --row-active: var(--surface2);
  --field: var(--surface2);
  --tag-bg: var(--surface2);
  --tag: var(--muted);
  --track: var(--surface3);
  --hero-bg: var(--surface2);
  --head-av: var(--surface2);
  --toggle-off: var(--border-strong);
  --toggle-on: var(--forest);
  --knob: #FFFFFF;
  --chart-starmy: var(--forest);
  --chart-team: var(--muted2);
  --seg-shadow: none;
  --paper: var(--canvas);
  --ink: var(--text);
  --on-forest: #FAF8F2;
  --sidebar-color: color-mix(in srgb, var(--canvas) 92%, #000 4%);
  --krem: var(--canvas);
  --navy: var(--text);
  --malam: var(--text);
  --tosca: var(--teal);
  --tosca-tua: var(--forest);
  --oranye: var(--coral);
  --mint: var(--surface2);
  --rel: var(--canvas);
  --rel-2: var(--surface2);
  --rel-teks: var(--text);
  --rel-redup: var(--muted);
  --rel-garis: var(--border);
  --inbox-soft: var(--queuebg);
  --focus: var(--forest-d);
  --font-display-stack: var(--font-fraunces-stack);
  --font-body-stack: var(--font-geist-sans-stack);
  --f: var(--font-geist-sans-stack);
  --rail: var(--lebar-rel);
  --sidebar: var(--lebar-sidebar);
  --topbar: var(--tinggi-topbar);
}
/* Text on the accent: paper on bronze in the light theme, ink on sand in the dark theme. */
[data-theme="dark"] {
  --pada-hutan: #221D17;
  --on-forest: #221D17;
  --on-brand: #221D17;
  --hutan-hover: #F0E6D2;
}

/* ---------- 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(--bg-canvas);color:var(--text)}
body,button,input,textarea,select{font-family:var(--huruf);font-size:var(--font-size-base);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased}
button,input,textarea,select{color:var(--text)}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;outline-offset:2px}
button,select{touch-action:manipulation}
button{cursor:pointer;font-weight:var(--font-weight-medium)}
button:disabled{cursor:not-allowed;opacity:.6}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1,h2,h3,h4,h5,h6{color:var(--text)}
h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-2xl);letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-lg);letter-spacing:-.01em}
h3{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:var(--line-height-base)}
h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:1.4}
small{font-size:var(--font-size-xs)}
strong,b{font-weight:var(--font-weight-semibold)}
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:var(--radius-sm)}

input,textarea,select{width:100%;min-width:0;min-height:var(--input-height);padding:7px 10px;border:1px solid var(--garis-input);border-radius:var(--radius-md);background:var(--permukaan);font-size:var(--font-size-base);transition:border-color var(--cepat),box-shadow var(--cepat)}
input:hover,textarea:hover,select:hover{border-color:var(--tinta-3)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--accent);box-shadow:none;outline:2px solid var(--accent);outline-offset:2px}
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:var(--font-size-base)}
th{padding:10px 12px;text-align:left;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--tinta-3);background:var(--permukaan-2);border-bottom:1px solid var(--garis);white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:12px;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:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.5;padding:0 6px;border:1px solid var(--garis-kuat);border-radius:var(--radius-sm);background:var(--permukaan-2);color:var(--tinta-2);white-space:nowrap}
code{font-size:var(--font-size-sm);padding:1px 5px;border-radius:var(--radius-sm);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}}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}

/* ---------- 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)}
/* Petunjuk di bawah isian berisi informasi yang perlu dibaca, jadi memakai warna teks sekunder (5,4:1), bukan tersier. */
.hint{font-size:var(--font-size-sm);color:var(--tinta-2)}
.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;font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}
.page-heading .muted{margin-top:8px;font-size:var(--font-size-sm);line-height:var(--line-height-sm);max-width:70ch}
.heading-action{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eyebrow{margin:0 0 4px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);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:var(--font-size-xl)}
.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:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-md);padding:0 16px;border:1px solid transparent;border-radius:var(--radius-md);background:var(--hutan);color:var(--pada-hutan);font-family:var(--huruf);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-base);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:none}
.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:var(--on-dark)}
[data-theme=dark] .btn.danger{color:var(--brand-ink)}
.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:var(--control-sm);padding:0 12px;font-size:var(--font-size-sm);gap:6px;border-radius:var(--radius-md)}
.btn.full{width:100%}
.btn.flat{box-shadow:none}
.btn.icon-only{width:var(--control-md);padding:0}
.btn.icon-only.small{width:var(--control-sm)}
.btn[aria-busy=true]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:putar .7s linear infinite}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--radius-md);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:var(--font-weight-semibold);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(--radius-sm);background:var(--sorot);color:var(--tinta-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap}
.badge.positive,.badge.success{background:var(--success-subtle);color:var(--success)}
.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:var(--radius-full);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:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;line-height:1}
.avatar.round{border-radius:var(--radius-full)}
.avatar.soft{background:var(--hutan-lembut);color:var(--hutan-teks)}
.avatar.warm{background:var(--kunyit-lembut);color:var(--kunyit)}

/* Card (Prototype standard) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card.muted{background:var(--surface2);border:1px solid var(--border);box-shadow:none}
.card h3, .card .cardtitle, .cardhead b{color:var(--text)}

/* Pill (Prototype status & badges) */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;line-height:1.4;white-space:nowrap}
.pill.green{background:#DCFCE7;color:#166534}
.pill.amber{background:#FEF3C7;color:#92400E}
.pill.gray{background:#E4E4E7;color:#3F3F46}
.pill.red{background:#FEE2E2;color:#991B1B}
[data-theme="dark"] .pill.green{background:color-mix(in srgb,#22C55E 18%,var(--surface));color:#86EFAC}
[data-theme="dark"] .pill.amber{background:color-mix(in srgb,#F59E0B 18%,var(--surface));color:#FCD34D}
[data-theme="dark"] .pill.gray{background:color-mix(in srgb,var(--muted) 20%,var(--surface));color:var(--text)}
[data-theme="dark"] .pill.red{background:color-mix(in srgb,#EF4444 18%,var(--surface));color:#FCA5A5}

/* 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:var(--font-size-base);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:var(--radius-full);background:var(--merah);vertical-align:1px}
.notice.success{background:var(--success-subtle);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:var(--font-size-base);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:var(--font-weight-medium)}
.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:var(--font-size-xl)}
.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:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--tinta)}
.field>small{font-size:var(--font-size-xs);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:var(--radius-md);background:transparent;color:var(--tinta-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap}
.segmented button:hover{color:var(--tinta)}
.segmented button[aria-pressed=true]{background:var(--permukaan);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--garis)}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat>span{font-size:var(--font-size-sm);color:var(--tinta-2)}
.stat>strong{font-family:var(--font-geist-sans-stack);font-variation-settings:normal;font-size:32px;font-weight:650;letter-spacing:-.03em;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.stat>strong.na{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);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:8px;padding:36px 20px;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:16px;margin:12px 0}
.empty .tanda-starmy{width:22px;height:22px;margin-bottom:6px}
.empty>img{margin-bottom:6px}
.empty h3{font-size:var(--font-size-xl);line-height:var(--line-height-xl);color:var(--text)}
.empty .muted{max-width:48ch;font-size:var(--font-size-base);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;background:none;border:none;border-radius:0;margin:0}
.empty.compact .tanda-starmy{display:none}
.empty.compact h3{font-size:var(--font-size-base)}
.loading{display:flex;align-items:center;gap:10px;padding:24px 0;color:var(--tinta-2);font-size:var(--font-size-base)}
.spinner{width:16px;height:16px;flex:none;border:2px solid var(--garis-kuat);border-top-color:var(--hutan-teks);border-radius:var(--radius-full);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:var(--font-size-base);font-weight:var(--font-weight-medium);white-space:nowrap}
.tab-garis button:hover{color:var(--tinta)}
.tab-garis button[aria-pressed=true],.tab-garis button[aria-selected=true]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:var(--font-weight-medium)}
.tab-garis button span{min-width:22px;padding:0 7px;border-radius:var(--r-pil);background:var(--sorot);color:var(--tinta-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:20px;text-align:center}
.tab-garis button[aria-pressed=true] span,.tab-garis button[aria-selected=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:1px solid var(--garis);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:var(--font-size-base);font-weight:var(--font-weight-semibold);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:var(--font-size-sm);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)}
.page-heading{margin-bottom:24px;align-items:flex-end}
.page-heading h1{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}
.page-heading .muted{margin-top:6px;font-size:var(--font-size-sm);line-height:var(--line-height-sm)}
.btn{min-height:var(--control-md);border-radius:var(--radius-md);font-size:var(--font-size-base);gap:8px;font-weight:var(--font-weight-medium);line-height:var(--line-height-base)}
.btn.small{min-height:var(--control-sm);border-radius:var(--radius-md);font-size:var(--font-size-sm)}
.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:var(--font-size-xs);line-height:16px;font-weight:var(--font-weight-medium);border-radius:var(--radius-sm)}
.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:var(--font-size-sm);font-weight:var(--font-weight-medium)}.field input{min-height:var(--input-height);border-radius:var(--radius-md);background:var(--permukaan);font-size:var(--font-size-base)}.field select{min-height:var(--input-height);border-radius:var(--radius-md);background:var(--permukaan);font-size:var(--font-size-base)}.field textarea{border-radius:var(--radius-md);font-size:var(--font-size-base);line-height:20px;padding:12px}
.notice{border-radius:var(--radius-lg);font-size:var(--font-size-base);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:var(--font-size-sm);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:var(--radius-full);padding:2px 6px;font-size:var(--font-size-xs)}
.design-card{border:1px solid var(--garis);border-radius:var(--radius-lg);background:var(--permukaan);min-width:0;overflow:hidden}
.design-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{font-size:var(--font-size-lg);line-height:24px;font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:10px}
.design-card-body{padding:20px 24px;line-height:20px}
.starmy-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--ai-bg);color:var(--ai-fg);flex:none}.starmy-mark .tanda-starmy{width:13px;height:13px;fill:var(--ai-fg);stroke:none}
.ck{max-width:none}.ck-filter{margin:0;gap:8px;flex:1 1 380px;min-width:0;justify-content:flex-end}.ck-filter .ck-cari{flex:1 1 200px;max-width:280px}.ck-filter>select{flex:0 1 160px;min-width:120px;font-size:var(--font-size-sm);min-height:36px}.ck-chips{margin:0;gap:8px;flex:none}.ck-chip{font-size:var(--font-size-xs);gap:6px;padding:0 12px;min-height:32px}.ck-chip .angka{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:var(--radius-full);background:var(--sorot);font-size:var(--font-size-xs)}.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:var(--font-size-xs)}.ck-jumlah:has(button){position:static;width:auto;height:auto;clip-path:none;margin-bottom:12px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.modal-header h2{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.modal-header>.icon-btn{margin-right:-8px}.modal{width:min(640px,calc(100vw - 32px));border-radius:var(--radius-xl)}.modal h2{font-size:var(--font-size-xl)}.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:var(--font-size-sm)}.modal-drawer .modal-actions{margin-top:auto}
.starmy-wizard{gap:24px;grid-template-columns:260px minmax(0,1fr)}.starmy-page .panel{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius-xl)}
@media(max-width:760px){.page-heading h1{font-size:var(--font-size-xl)}.page-heading .muted{font-size:var(--font-size-sm)}.btn{min-height:44px}.btn.small{min-height:44px}.field input{min-height:44px}.field select{min-height:44px}.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:var(--font-size-xs)}.ck-tab{margin-top:0}.ck .page-heading .heading-action{width:auto}.ck .heading-action .btn{font-size:var(--font-size-xs)}.ck .page-heading h1{font-size:var(--font-size-xl)}.design-card-head{padding:16px 20px}.design-card-body{padding:16px 20px}.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{padding:20px}.modal>div{padding:20px}.modal-header h2{font-size:var(--font-size-xl)}.modal-actions{gap:8px}
 .starmy-wizard{grid-template-columns:1fr}
}
.modal.guide-modal{width:560px;border-radius:var(--radius-xl)}.guide-modal .guidance-pakai{background:var(--permukaan-2);border:1px solid var(--garis);border-radius:var(--radius-lg);padding:16px}.guide-modal .guidance-pakai-judul{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}.guide-modal .guidance-pakai-isi{font-size:var(--font-size-base);line-height:20px;white-space:pre-wrap;margin:8px 0}.guide-modal .guidance-pakai .hint{font-size:var(--font-size-xs);margin:8px 0 0}.guide-modal .langkah-guide{font-size:var(--font-size-xs);color:var(--tinta-3);padding-left:20px;margin:0}.guide-modal textarea{min-height:90px}.user-table-name{display:flex;gap:12px;align-items:center}.user-table-name .avatar{width:32px;height:32px;font-size:var(--font-size-xs)}.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:var(--radius-md);width:150px;padding:12px}.user-actions summary{list-style:none}
.starmy-stepper small{font-size:var(--font-size-xs);margin-left:auto;color:var(--tinta-3)}.starmy-wizard .starmy-editor{border-radius:var(--radius-xl)}.starmy-wizard .starmy-editor>h2{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--garis);font-size:var(--font-size-xl)}
@media(max-width:760px){.modal.guide-modal{width:calc(100vw - 24px);border-radius:var(--radius-xl)}.guide-modal .langkah-guide{line-height:20px}.modal-actions .btn{min-width:0;flex:1}.ck:not(.show-mobile-tools) .page-heading{display:none}.ck:not(.show-mobile-tools) .ck-tab{display:none}.ck:not(.show-mobile-tools) .ck-filter{display:none}.ck:not(.show-mobile-tools)>.ck-jumlah{display:none}.ck.show-mobile-tools .page-heading{margin:16px}.ck.show-mobile-tools .ck-filter{margin:16px}.ck.show-mobile-tools .ck-jumlah{margin:16px}.ck.show-mobile-tools .ck-tab{margin:16px}.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}}.modal-header h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.starmy-mark .tanda-starmy{fill:var(--ai-fg);stroke:none}
.setup-source-picker{margin:0 0 24px;border:1px solid var(--garis);border-radius:var(--radius-lg);background:var(--permukaan);padding:12px 20px;font-size:var(--font-size-sm)}.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}.starmy-page:has(.setup-source-picker)>.text-link{display:none}.starmy-page:has(.setup-source-picker) .page-heading .eyebrow{display:none}.starmy-page:has(.setup-source-picker) .page-heading{margin-bottom:20px}.starmy-editor form>.notice{margin:16px 0}.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:var(--radius-lg);box-shadow:var(--bayang-2)}
.page-heading h1{margin-top:0;font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}
.tab-garis button{min-height:42px;height:42px;line-height:18px;font-weight:var(--font-weight-medium)}
.tab-garis button[aria-pressed=true],.tab-garis button[aria-selected=true]{font-weight:var(--font-weight-medium)}
.btn{line-height:var(--line-height-base);min-height:var(--control-md);border-radius:var(--radius-md);font-weight:var(--font-weight-medium)}
.page .field>span:first-child{line-height:18px}
.page .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:var(--input-height);min-height:var(--input-height);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}
.modal h2{font-size:var(--font-size-xl);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:var(--input-height);min-height:var(--input-height);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}
 .modal .field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:44px;min-height:44px}
}
.btn>svg{flex-shrink:0}
.icon-btn>svg{flex-shrink:0}
.badge>svg{flex-shrink:0}
.dikelola-platform>svg{flex-shrink:0}
.badge{line-height:16px;border-radius:var(--radius-sm);font-weight:var(--font-weight-medium)}
.modal{overflow:hidden;max-height:calc(100dvh - 48px)}
.modal>form{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;max-height:inherit}
.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{height:100%;max-height:100%}
.modal.modal-drawer>div{height:100%;max-height:100%}
.modal.modal-drawer{max-width:100vw}
.modal.modal-drawer .modal-body{flex:1}
.page>.stat-grid{margin-bottom:24px}
@media(max-width:760px){
 .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}
}
.btn:disabled,.btn.secondary:disabled{background:var(--disabled-bg);color:var(--disabled-fg);border:1px solid var(--border);opacity:1}
.btn.ghost:disabled{background:transparent;color:var(--disabled-fg);border-color:transparent;opacity:.8}
[data-theme="dark"] .btn:disabled,[data-theme="dark"] .btn.primary:disabled,[data-theme="dark"] .btn.secondary:disabled{background:var(--surface3);color:#A3A8A2;border:1px solid var(--border-strong,var(--border));opacity:.9;cursor:not-allowed}
[data-theme="dark"] .btn.ghost:disabled{background:transparent;color:#7E867E;border:1px solid transparent;opacity:.7;cursor:not-allowed}
.btn.large{min-height:var(--control-lg)}
.empty p{font-size:var(--font-size-base);line-height:var(--line-height-base);max-width:54ch}
@media (max-width:760px){
.btn,.icon-btn,input:not([type=checkbox]):not([type=radio]),select{min-height:var(--touch-target)}
.icon-btn{width:var(--touch-target);height:var(--touch-target)}}
.stat strong{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}

/* Kartu Tautan Undangan Resmi */
.invite-card {
  padding: 16px 20px;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--hutan) 40%, var(--garis-kuat));
  background: color-mix(in srgb, var(--hutan) 5%, var(--permukaan));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invite-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.invite-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--hutan-teks, var(--hutan));
}
.invite-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 30%, transparent);
}
.invite-expiry-chip {
  font-size: var(--font-size-xs);
  padding: 3px 9px;
  border-radius: var(--r-pil, 999px);
  background: var(--sorot);
  color: var(--tinta-2);
  font-weight: 500;
}
.invite-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-sm);
}
.invite-summary p { margin: 0; color: var(--tinta); }
.invite-summary small { color: var(--tinta-3); font-size: var(--font-size-xs); }
.invite-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.invite-url-input {
  flex: 1;
  min-width: 240px;
  min-height: var(--control-md, 40px);
  padding: 0 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--garis-kuat);
  background: var(--permukaan);
  color: var(--tinta);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
}
.btn.btn-copied {
  background: #166534;
  color: #fff;
  border-color: #166534;
}
.btn.btn-wa-share {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  font-weight: 600;
  text-decoration: none;
}
.btn.btn-wa-share:hover {
  background: #1eb855;
  border-color: #1eb855;
  color: #fff;
}


/* Status pill (ported screens): neutral by default, with the four tones those screens use. */
.pill{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 9px;border-radius:999px;border:1px solid transparent;background:var(--surface2);color:var(--muted);font-size:11.5px;font-weight:var(--font-weight-semibold);line-height:16px;white-space:nowrap}
.pill.green{background:var(--success-subtle);color:var(--success)}
.pill.amber{background:var(--kunyit-lembut);color:var(--kunyit)}
.pill.red{background:var(--merah-lembut);color:var(--merah)}
.pill.gray{background:var(--surface2);color:var(--muted)}

/* Bentuk tombol Jewel Dijinakkan (prototipe 27 Okt, "kembali ke gaya asal Starmy"): pill penuh dengan bayangan berlapis
   halus, tanpa efek tekan; tombol utama sedikit lebih dalam, tombol ghost dan nonaktif rata. */
.btn,.btn.small{border-radius:var(--radius-full)}
.btn{padding:0 18px;box-shadow:0 1px 2px rgba(32,31,28,.04),0 6px 16px -10px rgba(64,58,44,.18)}
.btn.small{padding:0 13px}
.btn:not(.secondary):not(.ghost):not(.danger){box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px -8px rgba(64,58,44,.35)}
.btn.ghost,.btn.flat,.btn:disabled{box-shadow:none}

/* ============================================================================
   Workspace shell: sidebar (232px -> 60px rail), topbar, status popover,
   account menu, owner assistant, and mobile bottom navigation.
   Sourced from reference/prototype-style.css (Quiet Premium 23 Okt).
   ========================================================================== */

.skip-link{position:fixed;left:12px;top:-80px;z-index:150;padding:10px 14px;border-radius:var(--r-2,10px);background:var(--surface3);color:var(--text);font-weight:600;box-shadow:var(--shadow-lg)}
.skip-link:focus{top:8px}

/* --- Container App & Main --- */
.app{display:flex;min-height:100vh;background:var(--canvas)}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;background:var(--canvas)}

/* --- Sidebar ---
   Jewel Dijinakkan (prototipe 27 Okt): sidebar bertint pasir tipis di atas kanvas, teks tinta; item aktif = tint pasir
   + batang dan ikon perunggu. Warna sidebar diatur lewat variabel --sb-* per tema, bukan warna lepas per rule. */
.sidebar{--sb-bg:color-mix(in srgb,var(--sand) 13%,var(--canvas));--sb-line:rgba(43,33,24,.12);--sb-ink:#2B2118;--sb-text:rgba(43,33,24,.8);--sb-sub:rgba(43,33,24,.7);--sb-label:rgba(43,33,24,.45);--sb-icon:rgba(43,33,24,.52);--sb-faint:rgba(43,33,24,.42);--sb-badge:rgba(43,33,24,.55);--sb-hover:rgba(43,33,24,.05);--sb-active-bg:color-mix(in srgb,var(--sand) 34%,transparent);--sb-active-fg:#2B2118;--sb-active-mark:var(--forest-d);--sb-active-badge:#2B2118;--sb-dot-off:rgba(43,33,24,.3)}
[data-theme="dark"] .sidebar{--sb-bg:color-mix(in srgb,var(--sand) 7%,var(--canvas));--sb-line:rgba(255,255,255,.07);--sb-ink:#F4F2EC;--sb-text:rgba(244,242,236,.78);--sb-sub:rgba(244,242,236,.55);--sb-label:rgba(244,242,236,.36);--sb-icon:rgba(244,242,236,.5);--sb-faint:rgba(244,242,236,.38);--sb-badge:rgba(244,242,236,.5);--sb-hover:rgba(255,255,255,.05);--sb-active-bg:color-mix(in srgb,var(--sand) 20%,transparent);--sb-active-fg:var(--text);--sb-active-mark:var(--forest-d);--sb-active-badge:var(--muted);--sb-dot-off:rgba(255,255,255,.35)}
.sidebar{width:232px;flex:0 0 232px;background:var(--sb-bg);color:var(--sb-ink);border-right:1px solid var(--border);padding:16px 12px 12px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .2s ease,flex-basis .2s ease,padding .2s ease;z-index:35}

/* --- Workspace Header (.biz) --- */
.sidebar .biz{display:flex;gap:10px;align-items:center;width:100%;text-align:left;color:var(--sb-ink);padding:2px 6px 12px;min-height:0;border:0;border-bottom:1px solid var(--sb-line);border-radius:0;background:transparent;cursor:pointer;text-decoration:none;position:relative}
.sidebar .biz:hover{background:var(--sb-hover)}
/* Logo mark: the one place gold shows. */
.sidebar .biz .avatar{width:30px;height:30px;border-radius:8px;background:#201913;color:var(--gold);border:1px solid rgba(174,145,79,.4);font-size:11px;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.sidebar .biz b{font-size:13px;letter-spacing:-.01em;display:block;color:var(--sb-ink)}
.sidebar .biz span{font-size:11px;color:var(--sb-sub);display:block}
.sidebar .biz .chev{margin-left:auto;color:var(--sb-faint);display:grid;place-items:center;flex:0 0 auto}
.sidebar .biz select.biz-select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* --- Nav Labels --- */
.sidebar .navlabel{font-size:9.5px;letter-spacing:.17em;color:var(--sb-label);font-weight:600;margin:18px 0 5px;text-transform:uppercase;padding:0 8px}
.sidebar .navgroup{display:flex;flex-direction:column;gap:2px}

/* --- Nav Items --- */
.sidebar .navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:8px 9px;border-radius:8px;color:var(--sb-text);font-size:13px;min-height:37px;cursor:pointer;position:relative;text-decoration:none;font-family:inherit;line-height:1.4}
.sidebar .navitem:hover{background:var(--sb-hover);color:var(--sb-ink);text-decoration:none}
.sidebar .navitem.active{background:var(--sb-active-bg);color:var(--sb-active-fg);font-weight:600}
.sidebar .navitem.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--sb-active-mark)}

.sidebar .ntile{width:24px;height:24px;display:grid;place-items:center;color:var(--sb-icon);flex:0 0 auto}
.sidebar .ntile svg{stroke-width:1.5}
.sidebar .navitem.active .ntile{background:transparent;color:var(--sb-active-mark)}

.sidebar .navitem .badge{margin-left:auto;background:transparent;color:var(--sb-badge);font-size:11px;font-weight:600;padding:0 1px;font-variant-numeric:tabular-nums}
.sidebar .navitem.active .badge{background:transparent;color:var(--sb-active-badge)}
/* Coming soon (Broadcast) */
.sidebar .navitem .navsoon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;color:var(--sb-badge);border:1px solid var(--sb-line);border-radius:999px;padding:1px 6px}
.app.rail .sidebar .navitem .navsoon{display:none}

/* --- Sidebar Footer --- */
.sidebar .sidefoot{margin-top:auto;border-top:1px solid var(--sb-line);padding:12px 2px 4px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.sidebar .sidecard{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 8px;color:var(--sb-ink);cursor:pointer;font-family:inherit;text-decoration:none}
.sidebar .sidecard:hover{background:var(--sb-hover);text-decoration:none;color:var(--sb-ink)}
.sidebar .sdot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(205,219,139,.22);flex:0 0 auto;display:inline-block}
.sidebar .sdot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 16%,transparent)}
.sidebar .sdot.bahaya{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent)}
.sidebar .sdot.off{background:var(--sb-dot-off);box-shadow:none}
#sideStatusT{font-size:12.5px!important;font-weight:600}
#sideStatusS{font-size:11px;color:var(--sb-sub)}
.sidebar .sideToggle{width:100%;margin-top:6px;display:flex;align-items:center;gap:6px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--sb-sub);font-size:12px;cursor:pointer;opacity:.5;transition:opacity .15s;font-family:inherit}
.sidebar .sideToggle:hover{background:var(--sb-hover);color:var(--sb-ink)}
.sidebar:hover .sideToggle,.sidebar .sideToggle:focus-visible{opacity:1}

/* --- Rail Mode (60px) --- */
.app.rail .sidebar{width:60px;flex-basis:60px;padding:14px 8px;overflow-x:hidden}
.app.rail .sidebar .biz{justify-content:center;padding:8px 6px;min-height:52px}
.app.rail .sidebar .biz>div:not(.avatar),.app.rail .sidebar .biz .chev,.app.rail .sidebar .biz select{display:none}
.app.rail .sidebar .navlabel{display:none}
.app.rail .sidebar .navitem{justify-content:center;padding:10px 0;position:relative;gap:0}
.app.rail .sidebar .navitem>span:not(.badge):not(.ntile){display:none}
.app.rail .sidebar .navitem.active:before{display:none}
.app.rail .sidebar .navitem.active:after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--sb-active-mark);box-shadow:none;pointer-events:none}
.app.rail .sidebar .navitem .badge{position:absolute;top:5px;right:5px;margin:0;width:8px;height:8px;min-width:8px;padding:0;font-size:0;line-height:0;border-radius:50%;background:var(--danger)}
.app.rail .sidebar .navitem.active .badge{background:var(--sb-active-mark)}
.app.rail .sidebar .sidefoot{padding:8px 6px;display:flex;justify-content:center}
.app.rail .sidebar .sidecard{display:none}
.app.rail .sidebar .sidefoot .sideToggle{width:40px;padding:0;justify-content:center}
.app.rail .sidebar .sidefoot .sideToggle .stlbl{display:none}
.app.rail .content{max-width:none}

/* --- Topbar --- */
.topbar{height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.topbar h1{font-size:16px;margin:0;font-weight:700;color:var(--text);letter-spacing:-.01em}
.topbar .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px;min-width:240px;color:var(--muted);min-height:38px;cursor:pointer;text-align:left;font-family:inherit}
.topbar .search:hover{border-color:var(--muted2);background:var(--surface2)}
.topbar .search .lbl{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .search kbd{border:1px solid var(--border);background:var(--surface2);color:var(--muted);padding:1px 6px;border-radius:6px;font-size:11px;font-family:inherit}
.statwrap{position:relative}
.chip.wa{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.chip.wa:hover{background:var(--surface2)}
.pop{position:absolute;top:calc(100% + 8px);right:0;width:264px;background:var(--surface3);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:12px;display:none;z-index:70}
.pop.open{display:block}
.poprow{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:13px;color:var(--text)}
.poprow.muted{color:var(--muted);font-size:12px}
.iconbtn{width:36px;height:36px;min-height:36px;border:1px solid var(--border);background:var(--surface);border-radius:999px;display:grid;place-items:center;color:var(--text);cursor:pointer;padding:0;font-family:inherit}
.iconbtn:hover{background:var(--surface2)}
.menubtn{display:none}
.bottomnav{display:none}

/* --- Account Menu --- */
.acctwrap{position:relative}
.acctwrap .avatar{width:32px;height:32px;border-radius:50%;background:var(--sand);color:#2B2118;display:grid;place-items:center;font-size:12px;font-weight:700;border:0;cursor:pointer}
[data-theme="dark"] .acctwrap .avatar{background:var(--sand);color:#221D17;border:0}
.acctmenu{position:absolute;top:calc(100% + 8px);right:0;width:272px;background:var(--surface3);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:70}
.acctmenu.open{display:block}
.acctmenu button,.acctmenu a,.acctmenu .nav-link{display:flex;gap:9px;align-items:center;width:100%;border:0;background:transparent;padding:9px 10px;border-radius:9px;color:var(--text);font-size:13px;cursor:pointer;text-align:left;text-decoration:none;font-family:inherit}
.acctmenu button:hover,.acctmenu a:hover,.acctmenu .nav-link:hover{background:var(--surface2);text-decoration:none}
.acctmenu .sep{border-top:1px solid var(--border);margin:5px 4px}
.acctmenu .mbadge{margin-left:auto;background:var(--danger);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:0 7px;line-height:1.6}

/* --- Content Canvas --- */
@media(min-width:701px){.content{padding:24px 28px 96px;flex:1;min-width:0}}
.content.flush{padding:0!important}
.content.flush .inbox{height:calc(100dvh - 60px);min-height:480px}

/* --- Owner Assistant FAB & Panel --- */
.fab{position:fixed;right:18px;bottom:18px;z-index:75;display:flex;align-items:center;gap:8px;background:var(--forest);color:var(--pada-hutan);border:1px solid var(--forest2);border-radius:999px;padding:11px 16px;font-weight:700;font-size:13px;box-shadow:var(--shadow-lg);cursor:pointer;font-family:inherit}
.fab:hover{filter:brightness(1.1)}
.assistpanel{position:fixed;right:18px;bottom:76px;width:min(368px,94vw);background:var(--surface3);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:76;overflow:hidden}
.assistpanel.open{display:flex}
.assisthead{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;gap:9px;align-items:center}
.assistmsgs{padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;background:var(--canvas)}
.amsg{max-width:88%;padding:9px 11px;border-radius:13px;font-size:13px;overflow-wrap:anywhere}
.amsg.ai{align-self:flex-start;background:var(--surface2);border-bottom-left-radius:5px;color:var(--text)}
.amsg.me{align-self:flex-end;background:var(--bub-out-bg);color:var(--bub-out-fg);border-bottom-right-radius:5px}
.assistbar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--surface3)}
.assistbar input{flex:1;border:0;background:var(--surface2);border-radius:10px;padding:9px 11px;color:var(--text);min-width:0;outline:0;font-family:inherit;font-size:13px}

/* The bottom tab bar is the phone navigation; wider screens use the sidebar. */
.bottomnav{display:none}

/* --- Mobile Responsiveness --- */
@media(max-width:700px){
 .menubtn{display:grid}
 #sideToggleTop{display:none}
 .sidebar{display:none;position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(280px,84vw);flex:0 0 auto;z-index:60;background:var(--sb-bg);box-shadow:var(--shadow-lg)}
 .sidebar.open{display:flex}
 #scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;display:none}
 #scrim.show{display:block}
 .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--canvas);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));gap:2px}
 .bottomnav button,.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:600;padding:6px 2px;border-radius:10px;min-height:52px;cursor:pointer;position:relative;text-decoration:none;font-family:inherit}
 .bottomnav button.active,.bottomnav a[aria-current=page]{color:var(--forest-d)}
 .bottomnav button .badge,.bottomnav a .badge{position:absolute;top:2px;right:calc(50% - 20px);margin:0;background:color-mix(in srgb,var(--sand) 22%,var(--surface));color:var(--forest-d);border-radius:999px;font-size:10px;font-weight:700;padding:0 5px}
 .content{padding:12px 14px;padding-bottom:88px!important}
 .fab{bottom:86px}
 .assistpanel{bottom:148px}
 .topbar{height:auto;min-height:56px;padding:10px 12px;gap:8px}
 .topbar h1{font-size:15px;white-space:nowrap}
 .topbar .search{min-width:0;width:38px;height:38px;padding:0;justify-content:center;border-radius:999px;flex:0 0 38px;margin-left:auto}
 .topbar .search .lbl,.topbar .search kbd{display:none}
 .topbar .statwrap{display:none}
 .topbar .statwrap.notices{display:block}
 .notices .notice-pop{position:fixed;top:calc(env(safe-area-inset-top,0px) + 62px);left:12px;right:12px;width:auto;max-width:none}
}

/* Team notifications in the top bar (components/TeamNotices.tsx) */
.notices .iconbtn{position:relative}
.notice-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d92d3b;color:#fff;font-size:10px;font-weight:700;line-height:14px;text-align:center;border:2px solid var(--surface)}
.notice-pop{width:340px;max-width:calc(100vw - 24px);padding:0;overflow:hidden}
.notice-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px}
.notice-head .text-link{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer}
.notice-list{list-style:none;margin:0;padding:4px;max-height:min(420px,70vh);overflow-y:auto}
.notice-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:9px 10px;cursor:pointer;font:inherit;color:var(--text)}
.notice-item:hover,.notice-item:focus-visible{background:var(--surface2)}
.notice-item.unread{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.notice-ico{flex:0 0 28px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface2);color:var(--muted)}
.notice-ico.complaint{background:var(--warn-bg);color:var(--warn)}
.notice-body{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px}
.notice-body b{font-size:13px}
.notice-body span{color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.notice-body small{color:var(--muted);font-size:11.5px}
.notice-empty{margin:0;padding:14px}

/* --- Component Helpers from Existing Codebase --- */
.inbox-unread{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:5px;background:#d92d3b;color:#fff;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border,#e4e4e7)}
.setup-modal{width:min(850px,calc(100vw - 32px));max-width:850px}
.setup-modal .field+.field{margin-top:14px}
.emoji-picker{position:relative;display:inline-flex}
.emoji-popover{position:absolute;bottom:calc(100% + 8px);left:0;z-index:60;width:min(296px,calc(100vw - 48px));padding:12px;background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:12px;box-shadow:0 8px 30px #0002;color:var(--text,#202020)}
.emoji-popover>strong{font-size:12px;display:block;margin-bottom:8px}
.emoji-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
.emoji-grid button{min-width:0;padding:0;border:0;background:transparent;font-size:23px;min-height:40px;border-radius:6px;cursor:pointer}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:#edf1e7}
.emoji-popover>.text-link{font-size:12px;margin:10px 12px 0 0}
.message-topline .emoji-popover{top:100%;bottom:auto;left:0}
.message-topline .emoji-picker{margin-right:8px}
.workbar button[aria-pressed=true]{color:var(--forest-d);background:color-mix(in srgb,var(--sand) 26%,var(--surface))}

.message-wrap.has-reaction{margin-bottom:22px}
.message-wrap.has-reaction .message{padding-bottom:12px}
.message-reaction{position:absolute;right:8px;bottom:-20px;z-index:1;display:inline-flex;align-items:center;gap:4px;min-height:27px;min-width:32px;justify-content:center;padding:1px 7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:0 1px 3px #00000014;white-space:nowrap}
.message-reaction>span{font-size:17px;line-height:23px}
.message-reaction small{font-size:9px;color:var(--muted)}
.message-reaction.pending{color:var(--muted)}
.message-reaction-notice{display:flex;gap:8px;flex-wrap:wrap;padding-top:17px;font-size:11px;color:var(--muted)}
.message-reaction-notice button{font-size:11px}
.customer-panel-resize{position:absolute;inset-block:0;width:10px;z-index:35;cursor:col-resize;touch-action:none;user-select:none;outline:none}
.customer-panel-resize:before{content:"";position:absolute;inset:0 4px;background:transparent;transition:background .12s}
.customer-panel-resize:after{content:"";position:absolute;top:50%;left:3px;width:4px;height:36px;border-radius:3px;background:var(--border);transform:translateY(-50%)}
.customer-panel-resize:hover:before,.customer-panel-resize:focus-visible:before,.customer-panel-resize.dragging:before,.customer-panel-resize:hover:after,.customer-panel-resize:focus-visible:after,.customer-panel-resize.dragging:after{background:var(--forest)}
@media(max-width:1023px){.customer-panel-resize{display:none}}

/* Existing route layouts and compatibility selectors, mapped to shared design tokens. */
.display{font-family:var(--font-body-stack)}
.faint{color:var(--faint)}
.num{font-family:var(--font-body-stack);font-weight:var(--font-weight-semibold);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:var(--control-md)}
.btn.icon-only.small{width:var(--control-sm)}
.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:var(--radius-full);flex-shrink:0}

.field>.label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--muted)}
.tiny-dot{background:var(--orange)}
.avatar.lg{width:56px;height:56px;font-size:var(--font-size-xl);border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--panel);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);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)}
/* A chat Starmy handed to the team (Inbox list). */
.chip.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 45%,var(--border));color:var(--warn)}
@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:var(--radius-md);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:var(--radius-lg);font-size:var(--font-size-sm);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:var(--radius-md);padding:6px 12px;font-weight:var(--font-weight-medium)}
.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:var(--font-size-sm)}
.list-row small{display:block;color:var(--muted);margin-top:1px}
.list-row p{font-size:var(--font-size-sm)}
.list-row.link{cursor:pointer;border-radius:var(--radius-md);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:var(--font-size-sm)}
.kv dt{color:var(--muted);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-sm);font-weight:var(--font-weight-medium);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:var(--font-size-sm);cursor:pointer}

.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--font-size-xs);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:var(--font-size-xs);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:var(--radius-lg);background:var(--panel);color:var(--faint);font-family:var(--font-body-stack);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);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:var(--on-dark);background:radial-gradient(90rem 38rem at 82% -6rem,var(--accent-glow),transparent 62%),linear-gradient(180deg,var(--auth-surface) 0%,var(--auth-surface) 46%,var(--auth-elevated) 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%,var(--on-dark) 50%,transparent 51%),radial-gradient(1px 1px at 16% 62%,var(--on-dark) 50%,transparent 51%),radial-gradient(1.6px 1.6px at 27% 9%,var(--on-dark) 50%,transparent 51%),radial-gradient(1px 1px at 38% 33%,var(--on-dark) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 46% 14%,var(--on-dark) 50%,transparent 51%),radial-gradient(1px 1px at 54% 48%,var(--on-dark) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 7%,var(--on-dark) 50%,transparent 51%),radial-gradient(1px 1px at 71% 27%,var(--on-dark) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 93% 41%,var(--on-dark) 50%,transparent 51%);-webkit-mask:linear-gradient(var(--primary) 40%,transparent 78%);mask:linear-gradient(var(--primary) 40%,transparent 78%)}
.login-story h1{font-size:var(--font-size-2xl);line-height:.98;letter-spacing:-.04em;max-width:13ch;font-weight:var(--font-weight-semibold);text-wrap:balance}
.login-story h1 em{display:block;font-style:normal;color:var(--brand-lime);text-shadow:0 0 42px var(--accent-glow)}
.login-story .lede{font-size:var(--font-size-lg);line-height:1.62;max-width:40ch;margin-top:16px;color:var(--on-dark-muted)}
.login-demo{display:flex;flex-direction:column;gap:8px;max-width:400px;margin-top:24px;padding:16px;border-radius:var(--radius);background:var(--auth-elevated);box-shadow:0 0 0 1px var(--light-glow),0 30px 60px -32px var(--media-overlay)}
.login-demo .bubble{background:var(--auth-bubble);color:var(--on-dark);padding:10px 14px;border-radius:var(--radius-sm) var(--radius) var(--radius) var(--radius);font-size:var(--font-size-sm);line-height:1.5;max-width:86%;animation:rise .3s ease-out both}
.login-demo .bubble.starmy{align-self:flex-end;background:var(--accent);border-radius:var(--radius) var(--radius-sm) var(--radius) var(--radius);animation-delay:.25s}
.login-demo .bubble.starmy+.bubble{animation-delay:.5s}
.login-demo .bubble.starmy: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:var(--font-size-sm);color:var(--on-dark-subtle);max-width:34ch;line-height:1.5}
.login-mascot{width:140px;height:140px;flex-shrink:0;filter:drop-shadow(0 22px 28px var(--media-overlay))}
.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:var(--font-size-2xl);letter-spacing:-.03em}
.login-form>p.muted{font-size:var(--font-size-base);margin-top:-6px}
.login-form .btn{margin-top:4px;min-height:48px;font-size:var(--font-size-base)}
.login-help{font-size:var(--font-size-sm);color:var(--muted);line-height:1.5;margin-top:6px}
.login-security{display:inline-flex;gap:8px;align-items:center;font-size:var(--font-size-xs);color:var(--brand);background:var(--soft);padding:9px 12px;border-radius:var(--radius-full);align-self:flex-start}
.login-website{font-size:var(--font-size-sm);color:var(--muted);margin-top:8px}
.login-website a{color:var(--brand);font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:.2em}
.starmy-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}
.starmy-hero::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:var(--radius-full);background:radial-gradient(circle,var(--accent-glow),transparent 68%);z-index:0}
.starmy-hero>*{position:relative;z-index:1}
.starmy-hero img{width:104px;height:104px}
.starmy-hero h1{font-size:var(--font-size-2xl)}
.starmy-hero .muted{font-size:var(--font-size-sm);margin-top:6px;max-width:56ch}
.starmy-hero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.starmy-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:var(--radius-full);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:var(--font-weight-semibold);font-size:var(--font-size-xs);margin-top:1px}
.setup-item.done .setup-mark{background:var(--brand-bright);border-color:var(--brand-bright);color:var(--on-dark)}
.setup-item.pending .setup-mark{border-style:dashed}
.setup-item h3{font-size:var(--font-size-base)}
.setup-item p{font-size:var(--font-size-sm);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:var(--font-size-sm);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.context-section .kv{font-size:var(--font-size-sm)}
.note-card{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:9px 11px;font-size:var(--font-size-sm);margin-bottom:8px}
.note-card p{white-space:pre-wrap;overflow-wrap:anywhere}
.note-card small{display:block;color:var(--faint);font-size:var(--font-size-xs);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:var(--font-size-sm)}
.note-form .button-row{margin-top:8px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--font-size-xs);padding:4px 10px;border-radius:var(--radius-full);background:var(--panel3);color:var(--muted);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-sm)}
.sync-row .status-dot{margin-top:6px}
.sync-row strong{display:block;font-size:var(--font-size-sm)}
.sync-row span{color:var(--muted)}

.config-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.config-nav a{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--muted);padding:6px 11px;border-radius:var(--radius-full);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:var(--radius-lg);background:var(--soft);color:var(--brand);font-size:var(--font-size-sm);margin:8px 0 16px}
.onboard-next svg{flex-shrink:0;margin-top:2px}
.onboard-next a{font-weight:var(--font-weight-semibold);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:var(--font-size-2xl)}
.onboard-intro p{font-size:var(--font-size-sm);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:var(--font-size-base)}
 .login-demo{display:none}
 .login-mascot{width:96px;height:96px}
 .login-form-wrap{padding:28px 20px}
 .starmy-hero{grid-template-columns:auto 1fr}
 .starmy-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:var(--font-size-2xl)}
 .login-story-foot small{display:none}
 .login-form h2{font-size:var(--font-size-xl)}
 .starmy-hero{padding:18px;gap:14px}
 .starmy-hero img{width:72px;height:72px}
 .starmy-hero h1{font-size:var(--font-size-2xl)}
 .onboard-intro img{width:60px;height:60px}
 .setup-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px 14px}
 .setup-item .button-row{grid-column:2;justify-content:flex-start}
 .setup-item .btn{margin-left:0}

 .toolbar>select,.filter-bar>select{width:100%}
 .search-field{min-width:0;width:100%;flex:1 1 100%}


}

.ai-import-sources{font-size:var(--font-size-xs);overflow-wrap:anywhere}
.ai-import-sources ul,.starmy-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)}
.starmy-defaults li{margin:6px 0;font-size:var(--font-size-sm)}
.business-example .business-example-text{white-space:pre-wrap;font-size:var(--font-size-sm);line-height:1.6;padding:12px;border-radius:var(--radius-md);background:var(--panel);max-height:320px;overflow:auto}
.ai-connection>summary{gap:8px;flex-wrap:wrap}


.preset-choice{padding:18px;background:var(--soft);border-radius:var(--radius-lg);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:var(--font-size-2xl)}
 .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:var(--radius-full)}

.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:var(--font-weight-semibold);font-size:var(--font-size-sm);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:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding-top:8px}
.context-section .kv dd{font-family:var(--font-body-stack);font-weight:var(--font-weight-semibold);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:var(--font-weight-semibold);padding:6px 12px}
.connection-pill.on{background:var(--soft);color:var(--brand)}
.connection-pill.warn{background:var(--orange-soft);color:var(--orange-ink)}
.starmy-hero{background:radial-gradient(60rem 26rem at 85% -10rem,var(--accent-glow),transparent 62%),linear-gradient(180deg,var(--auth-surface),var(--auth-surface) 55%,var(--auth-elevated));color:var(--on-dark);border:0;box-shadow:var(--shadow-pop);border-radius:var(--radius)}
.starmy-hero::before{background:radial-gradient(circle,var(--accent-glow),transparent 68%)}
.starmy-hero .eyebrow{color:var(--brand-lime)}
.starmy-hero h1{color:var(--on-dark);text-shadow:0 0 42px var(--accent-glow)}
.starmy-hero .muted,.starmy-hero .hint{color:var(--on-dark-muted)}
.starmy-hero .badge{background:var(--light-glow);color:var(--on-dark);border-color:transparent}
.starmy-hero .badge.positive{background:var(--accent-glow);color:var(--brand-lime)}
.starmy-hero .badge.warm{background:var(--warning-subtle);color:var(--warning)}
.starmy-hero .btn{background:var(--on-dark);color:var(--navy)}
.starmy-hero .btn:hover:not(:disabled){background:var(--on-dark);color:var(--navy)}
.starmy-hero .btn.accent{background:var(--orange);color:var(--on-orange)}
.starmy-hero .btn.secondary{background:transparent;color:var(--on-dark);border-color:var(--on-dark-subtle)}
.starmy-hero .btn.secondary:hover:not(:disabled){background:var(--light-glow);border-color:var(--brand-lime);color:var(--on-dark)}
.starmy-hero .text-link{color:var(--brand-lime)}
.starmy-hero img{filter:drop-shadow(0 16px 20px var(--media-overlay))}

.list-row{border-top:1px dashed var(--border)}
.list-row .avatar{border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm)}
@media(max-width:760px){
 .context-section{margin:10px 10px 0}

 .starmy-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:var(--font-weight-semibold);font-size:var(--font-size-xs);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:var(--radius-full)}
.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:var(--font-size-xs);font-weight:var(--font-weight-semibold);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:var(--radius-full);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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.assist-card p{font-size:var(--font-size-sm);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:var(--radius-full);background:var(--soft);color:var(--brand);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
.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:var(--radius-full);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:var(--font-size-xs)}
.note-card{border-radius:var(--radius-lg)}
.note-card.esc{box-shadow:0 0 0 1px var(--border);background:var(--orange-soft)}
.note-card.esc.resolved{background:var(--panel2)}
.starmy-hero{background:var(--panel);color:var(--text);border:1px solid var(--border);box-shadow:none;border-radius:var(--radius)}
.starmy-hero::before{background:radial-gradient(circle,var(--accent-glow),transparent 68%)}
.starmy-hero .eyebrow{color:var(--brand)}
.starmy-hero h1{color:var(--text);text-shadow:none}
.starmy-hero .muted,.starmy-hero .hint{color:var(--muted)}
.starmy-hero .badge{background:var(--panel3);color:var(--muted)}
.starmy-hero .badge.positive{background:var(--soft);color:var(--brand)}
.starmy-hero .badge.warm{background:var(--orange-soft);color:var(--orange-ink)}
.starmy-hero .badge.info{background:var(--info-soft);color:var(--text)}
.starmy-hero .btn{background:var(--text);color:var(--bg)}
.starmy-hero .btn:hover:not(:disabled){background:var(--brand-strong);color:var(--on-dark)}
.starmy-hero .btn.accent{background:var(--orange);color:var(--on-orange)}
.starmy-hero .btn.secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.starmy-hero .btn.secondary:hover:not(:disabled){background:var(--soft);border-color:var(--brand-bright);color:var(--text)}
.starmy-hero .text-link{color:var(--brand)}
.starmy-hero img{filter:none}
@media(max-width:760px){



 .assist-card{margin:12px 12px 0;padding:12px 14px}


}
.num{font-weight:var(--font-weight-semibold)}

.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:var(--font-weight-semibold);font-size:var(--font-size-2xl);line-height:1.1}
.login-story h1 em{color:var(--lime);text-shadow:none}
.login-story .lede{font-size:var(--font-size-base);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:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}
.login-form-wrap{background:var(--surface)}
.login-story-foot small{color:var(--border-strong)}

@media(max-width:760px){


 .login-story{padding:28px 24px}
 .login-story h1{font-size:var(--font-size-2xl)}
 .login-hero{width:150px;height:150px}
 .login-story .lede{font-size:var(--font-size-sm)}
 .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:var(--font-size-2xl);letter-spacing:-.045em}
.login-form>.muted{font-size:var(--font-size-xs)}
.login-form input{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);min-height:44px;font-size:var(--font-size-xs)}
.login-security{border:0;justify-content:flex-start;padding:0;font-size:var(--font-size-xs)}
.login-help,.login-website{font-size:var(--font-size-xs)}
.login-company{position:absolute;bottom:10px;left:64px;font-size:var(--font-size-xs);color:var(--muted)}
.login-story{grid-column:2;grid-row:1;border-radius:var(--radius-full) var(--radius-full) var(--radius-md) var(--radius-md);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:var(--font-size-2xl);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:var(--font-size-xs);border-radius:0;background:var(--sage);padding:12px 16px}
.handover-summary summary{cursor:pointer;font-weight:var(--font-weight-semibold)}
.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:var(--font-size-2xl)}
 .handover-summary{font-size:var(--font-size-xs)}
}
.step-number{border:1px solid var(--line-strong);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;font-size:var(--font-size-xs)}
.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:var(--font-size-xs);line-height:1.5}

/* Settings pages (Cara melayani, Skill tambahan, Tim & akses) share one width, so their headers and actions line up. */
.service-page{max-width:960px}
/* 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:var(--font-size-sm);color:var(--tinta-2)}
.opsional{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--tinta-3)}
.modal.payment-modal{width:880px;border-radius:var(--radius-xl)}.payment-review-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px}.payment-evidence{border:1px solid var(--garis);border-radius:var(--radius-lg);overflow:hidden;align-self:start}.payment-evidence h3{font-size:var(--font-size-base);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:var(--radius-lg)}.payment-evidence-note p{font-size:var(--font-size-base);line-height:22px;white-space:pre-wrap;margin:0}.payment-evidence-note small{color:var(--tinta-3);font-size:var(--font-size-xs)}.payment-evidence>.hint{padding:0 16px}.payment-evidence>.text-link{display:flex;padding:0 16px 16px;font-size:var(--font-size-sm);align-items:center;gap:8px}
.payment-decisions{padding:0;margin:0;min-width:0}.payment-decisions legend{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 8px}.payment-decisions label{display:flex;align-items:center;gap:8px;border:1px solid var(--garis);border-radius:var(--radius-md);padding:12px;font-size:var(--font-size-base);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:var(--font-size-xs);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:var(--radius-xl)}.users-page th{font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);background:var(--permukaan-2)}.users-page table{font-size:var(--font-size-base);width:100%;border-collapse:collapse}.users-page td{padding:16px}.users-page th{padding:16px}.users-page td .badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.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){text-align:center;width:160px}.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:var(--font-size-xs)}
@media(max-width:760px){.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.payment-modal{width:calc(100vw - 24px);border-radius:var(--radius-xl)}}.payment-decisions{border:0}.payment-decisions input{accent-color:var(--hutan)}.payment-decisions label.selected{border-color:var(--hutan);background:var(--jalur)}.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}
@media(max-width:760px){.page.users-page{max-width:100%}}
.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){width:25%}.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%}}
/* Kenali bisnis: the one business account. Cara melayani shows it read-only. */
.onboard-rekening{margin-top:20px;padding-top:16px;border-top:1px solid var(--garis)}
.onboard-rekening h2{margin:0 0 4px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.onboard-rekening>.hint{margin:0 0 12px}
.config-rekening>strong{font-weight:var(--font-weight-medium);overflow-wrap:anywhere}
/* Bisnis (platform owner): one list of businesses, each opening its own page. */
.business-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.business-list>li{margin:0}
.business-list h2 a{color:inherit;text-decoration:none}
.business-list h2 a:hover{text-decoration:underline}
.business-attention{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--font-size-sm);color:var(--warning)}
.business-attention li{display:flex;align-items:center;gap:6px}
/* Konsol PIC (app/(app)/konsol-pic): requests first, then one row per business with its next step and PIC. */
.pic-console .stat-grid,.business-list-page .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pic-filters{gap:8px;align-items:center;margin:12px 0 4px}
.pic-alert-list{flex-direction:column;gap:8px}
.pic-alert-list li{align-items:flex-start}
.pic-alert-list svg{flex:0 0 auto;margin-top:3px}
.pic-filters .check-row{padding:0 4px}
.pic-business-list{gap:0}
.pic-business-list>.pic-business{border-top:1px solid var(--border);padding:14px 0;min-width:0}
.pic-business-list>.pic-business:first-child{border-top:0}
.pic-business h3{margin:0;font-size:var(--font-size-base);overflow-wrap:anywhere}
.pic-business h3 a{color:inherit;text-decoration:none}
.pic-business h3 a:hover{text-decoration:underline}
.pic-next{margin:6px 0 0;font-size:var(--font-size-sm)}
.pic-owner{align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.pic-select{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm);min-width:0}
.pic-select select{min-width:0;max-width:240px}
.business-page .config-tabs{margin:8px 0 20px}
.business-page .config-tabs .badge{margin-left:6px}
.business-page .danger-zone{border-color:var(--danger-border)}
.onboard-form fieldset{border:0;padding:0;margin:0;min-width:0}

/* 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:var(--font-size-xs);margin:12px 0 20px}
.starmy-page{max-width:1440px}
.starmy-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.starmy-stats>div{padding:20px 24px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.starmy-stats small,.starmy-status-grid small,.starmy-version small,.starmy-review small{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--muted)}
.starmy-stats strong{font-size:var(--font-size-2xl);display:block;margin-top:8px}
.starmy-agent-card{padding:24px;min-width:0}
.starmy-agent-card h2{margin-top:18px}
.starmy-card-facts{margin:18px 0 24px;display:grid;gap:12px}
.starmy-card-facts>div{display:flex;justify-content:space-between;gap:14px;font-size:var(--font-size-sm)}
.starmy-card-facts strong{max-width:65%;text-align:right;overflow-wrap:anywhere}
.starmy-agent-card>.btn{display:flex;justify-content:space-between}
.starmy-bottom-note{display:flex;align-items:center;gap:14px;margin:28px 0;color:var(--muted);font-size:var(--font-size-sm)}
.starmy-wizard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;margin-top:26px}
.starmy-stepper{display:flex;flex-direction:column;gap:10px}
.starmy-stepper>button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;padding:13px;border-radius:var(--radius-lg);color:var(--muted);font:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer}
.starmy-stepper>button>span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:none;border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--font-size-xs)}
.starmy-stepper .current{background:var(--soft);color:var(--brand)}
.starmy-stepper .current>span,.starmy-stepper .complete>span{background:var(--brand);color:white;border-color:var(--brand)}
.starmy-stepper>p{font-size:var(--font-size-xs);line-height:1.8;padding:4px 12px}
.starmy-editor{padding:28px}
.starmy-editor>h2{margin-bottom:24px}
.starmy-form{display:grid;gap:20px}
.starmy-page fieldset{border:0;padding:0;margin:0;min-width:0}
.starmy-page input,.starmy-page select,.starmy-page textarea{min-width:0;max-width:100%}
.starmy-page textarea{resize:vertical;line-height:1.7}
.starmy-form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.starmy-documents{padding:22px;background:var(--bg);border-radius:var(--radius)}
.starmy-documents input[type=file]{font-size:var(--font-size-sm);width:100%}
.starmy-document{border-bottom:1px solid var(--border);padding:16px 0}
.starmy-document summary{cursor:pointer;font-weight:var(--font-weight-semibold);overflow-wrap:anywhere}
.starmy-document summary small{font-weight:var(--font-weight-normal);color:var(--muted);margin-left:10px}
.starmy-document[open] .field{margin-top:14px}
.starmy-check{display:flex;align-items:flex-start;gap:12px;font-size:var(--font-size-base);line-height:1.7}
.starmy-check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--brand)}
.starmy-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.starmy-review-item{padding:18px;background:var(--bg);border-radius:var(--radius-lg);min-width:0;overflow-wrap:anywhere}
.starmy-review-item strong{display:block;font-size:var(--font-size-lg);margin:9px 0}
.starmy-review-item span{font-size:var(--font-size-sm);color:var(--muted);line-height:1.7}
.starmy-review>.notice{grid-column:1/-1}
.starmy-tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 0;margin:18px 0 24px}
.starmy-tabs>button{white-space:nowrap;padding:11px 16px;border-radius:var(--radius-lg);border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:var(--font-size-sm);cursor:pointer}
.starmy-tabs>button.active{background:var(--panel);border-color:var(--border);color:var(--text);font-weight:var(--font-weight-medium)}
.starmy-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.starmy-status-grid>.panel{padding:22px;min-width:0}
.starmy-status-grid small{margin-bottom:15px}
.starmy-status-grid p{font-size:var(--font-size-xs);overflow-wrap:anywhere;margin-top:16px}
.starmy-section{padding:24px;margin-top:22px;min-width:0}
.starmy-section h2{font-size:var(--font-size-xl)}
.starmy-section>.muted{font-size:var(--font-size-sm);line-height:1.8}
.starmy-two-column{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.starmy-section progress{width:100%;height:12px;accent-color:var(--brand);margin:16px 0 4px}
.starmy-pair{display:flex;align-items:center;gap:30px;padding:20px 0}
.starmy-pair img{width:256px;max-width:100%;height:auto;border:12px solid white;border-radius:var(--radius);flex:none}
.starmy-pair p{max-width:440px;line-height:1.8}
.starmy-version{display:flex;align-items:center;gap:30px;margin:24px 0}
.starmy-version strong{font-size:var(--font-size-xl);display:block;margin-top:9px}
.starmy-danger{border-top:1px solid var(--border);margin-top:25px;padding-top:20px}
.starmy-danger summary{color:var(--danger);cursor:pointer}
.starmy-danger p{font-size:var(--font-size-sm);line-height:1.8}
.starmy-preserve{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85}
.starmy-job,.starmy-job-detail{border-top:1px solid var(--border);padding:18px 0}
.starmy-job,.starmy-job-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:18px}
.starmy-job-detail>summary{cursor:pointer;list-style:none}
.starmy-job-detail small{display:block;font-size:var(--font-size-xs);color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
.starmy-events{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.starmy-events li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;font-size:var(--font-size-xs);line-height:1.7}
.starmy-events time{color:var(--muted)}
.starmy-events span{overflow-wrap:anywhere}
.starmy-audit{max-height:460px;overflow:auto}
.starmy-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:var(--font-size-xs);overflow-wrap:anywhere}
.starmy-audit time{color:var(--muted)}
.starmy-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:var(--shadow-floating)}
.starmy-dialog::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
.starmy-dialog .field{margin:18px 0}
.starmy-dialog p{line-height:1.8;font-size:var(--font-size-base)}
.starmy-dialog .btn{min-width:100px}
.starmy-dialog .starmy-check{margin:18px 0}
.starmy-page .badge.danger{color:var(--danger);background:var(--danger-subtle)}
.starmy-page .badge.warning{color:var(--warning);background:var(--warning-subtle)}
.starmy-page .btn.danger{color:white;background:var(--danger);border-color:var(--danger)}
.starmy-page :focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(max-width:1100px){
 .starmy-wizard{grid-template-columns:180px minmax(0,1fr);gap:18px}
 .starmy-two-column{grid-template-columns:1fr}
 .starmy-status-grid{gap:12px}
 .starmy-status-grid>.panel{padding:18px}
}
@media(max-width:760px){
 .starmy-wizard{display:block}
 .starmy-stepper{flex-direction:row;overflow:auto;gap:3px;margin-bottom:18px}
 .starmy-stepper>button{flex-direction:column;gap:7px;font-size:var(--font-size-xs);flex:1;min-width:65px;padding:10px 5px}
 .starmy-stepper>p{display:none}
 .starmy-editor,.starmy-section{padding:20px}
 .starmy-stats{gap:8px}
 .starmy-stats>div{padding:15px 12px;border-radius:var(--radius-xl)}
 .starmy-stats small{font-size:var(--font-size-xs);line-height:1.7}
 .starmy-stats strong{font-size:var(--font-size-2xl)}
 .starmy-status-grid{grid-template-columns:1fr}
 .starmy-status-grid>.panel{display:grid;grid-template-columns:1fr auto;align-items:center}
 .starmy-status-grid small{margin:0}
 .starmy-status-grid p{grid-column:1/-1;margin-bottom:0}
 .starmy-review{grid-template-columns:1fr;gap:12px}
 .starmy-review-item{padding:16px}
 .starmy-tabs{gap:2px}
 .starmy-tabs>button{padding:10px;font-size:var(--font-size-xs)}
 .starmy-pair{flex-direction:column;align-items:flex-start;gap:15px}
 .starmy-pair img{align-self:center}
 .starmy-section>.row.between{flex-wrap:wrap}
 .starmy-events li{grid-template-columns:1fr;gap:2px}
 .starmy-audit>div{grid-template-columns:1fr 1fr;gap:8px}
 .starmy-version{gap:20px}
 .starmy-version strong{font-size:var(--font-size-base)}
 .starmy-dialog{padding:22px}
 .starmy-dialog .starmy-form-actions{gap:8px}
 .starmy-job,.starmy-job-detail>summary{align-items:flex-start;flex-wrap:wrap}
 .starmy-documents{padding:15px}
 .starmy-bottom-note{align-items:flex-start}
 .starmy-bottom-note svg{flex:none;margin-top:15px}
}
@media(max-width:760px){
 .starmy-section .row.between{align-items:flex-start}
}

/* ============================================================================
   Starmy CRM — Inbox Styles
   Source of Truth: reference/prototype-index.html & reference/prototype-style.css
   Frameless, full-bleed 3-panel architecture:
   Queue (350px) • Thread (minmax(0,1fr)) • Context Panel (350px)
   ============================================================================ */

/* --- Frameless full-bleed container --- */
.inbox {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr) 350px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  height: calc(100dvh - 60px);
  min-height: 540px;
  box-shadow: none;
}
.inbox.ctxoff {
  grid-template-columns: 350px minmax(0, 1fr) 44px;
}
/* Email and Instagram threads carry their own customer panel; nothing selected needs no third column either. */
.inbox.noctx {
  grid-template-columns: 350px minmax(0, 1fr);
}
.queue {
  grid-column: 1;
  grid-row: 1;
  width: 350px;
  min-width: 350px;
  max-width: 350px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
  background: var(--surface);
}
.thread {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}
.ctx {
  grid-column: 3;
  grid-row: 1;
  width: 350px;
  min-width: 350px;
  max-width: 350px;
  box-sizing: border-box;
  position: static;
  transform: none;
  box-shadow: none;
  border-left: 1px solid var(--border);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  min-height: 0;
  scrollbar-width: thin;
}
.inbox.ctxoff .ctx {
  display: none !important;
}

/* --- Strip konteks: 44px icon strip when context panel is closed --- */
.ctxstrip {
  display: none;
}
.inbox.ctxoff .ctxstrip {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.ctxstrip button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--cepat, 0.15s), color var(--cepat, 0.15s);
}
.ctxstrip button:hover {
  background: var(--surface2);
  color: var(--forest);
}
[data-theme="dark"] .ctxstrip button:hover {
  color: var(--forest-d);
}
.ctxstrip .sep {
  width: 20px;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* --- View per-nomor: Tab teks tenang + underline 2px aksen --- */
.chantabs {
  display: flex;
  gap: 2px;
  padding: 12px 12px 0;
  border-bottom: 1px solid var(--border);
}
.chantab {
  flex: 0 1 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 8px 8px 0 0;
  padding: 8px 10px 11px;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: color var(--cepat, 0.15s), background-color var(--cepat, 0.15s);
}
.chantab:hover {
  color: var(--text);
  border-color: transparent;
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
}
.chantab.on {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  font-weight: 700;
}
.chantab.on:after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--forest);
}
[data-theme="dark"] .chantab.on:after {
  background: var(--sand);
}
.chantab .ubadge {
  background: transparent;
  color: var(--muted2);
  padding: 0;
  font-size: 11px;
  font-weight: 700;
}
.chantab.on .ubadge {
  background: transparent;
  color: var(--forest);
}
[data-theme="dark"] .chantab.on .ubadge {
  color: var(--forest-d);
}

/* --- Header identitas view tunggal --- */
.chanhead {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 10px 14px 12px;
}
.chanhead .chip {
  background: transparent;
  border-color: transparent;
  padding: 0;
  color: var(--muted);
  font-weight: 600;
}

/* --- Tab jenis percakapan: Chat Pelanggan vs Grup WhatsApp --- */
.inboxtabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

/* --- Search bar --- */
.qhead {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.qsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  min-height: 40px;
  color: var(--muted);
  cursor: text;
}
.qsearch:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--forest);
}
[data-theme="dark"] .qsearch:focus-within {
  border-color: var(--forest-d);
  color: var(--forest-d);
}
.qsearch input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--text);
  min-width: 0;
  font-size: 13.5px;
  font-family: inherit;
}
.qsearch .icon-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* --- Filter chips & numbers --- */
.qchips {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.qchip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  min-height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: all var(--cepat, 0.15s);
}
.qchip:hover {
  border-color: var(--muted2);
  color: var(--text);
}
.qchip.on {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--pada-hutan);
}
[data-theme="dark"] .qchip.on {
  background: var(--sand);
  border-color: var(--forest-d);
  color: #131315;
}
.ubadge {
  background: transparent;
  color: var(--forest);
  padding: 0 1px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ubadge {
  color: var(--forest-d);
}
.qchip.on .ubadge {
  color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .qchip.on .ubadge {
  color: rgba(19, 19, 21, 0.85);
}

/* --- Filter dropdowns --- */
.qfilters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.qsel {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  font-family: inherit;
  cursor: pointer;
}
.qsel:focus-visible {
  border-color: var(--forest);
  outline: none;
}

/* --- Queue List & Rows --- */
.qlist {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}
.qrow {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  position: relative;
  align-items: flex-start;
  font-family: inherit;
  transition: background-color var(--cepat, 0.15s);
  user-select: none;
  -webkit-touch-callout: none;
}
.qrow:hover {
  background: var(--canvas);
}
.qrow.active {
  background: color-mix(in srgb, var(--forest) 7%, var(--surface));
}
.qrow.active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--forest);
}
[data-theme="dark"] .qrow.active:before {
  background: var(--forest-d);
}
.qrow.kbsel {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--forest) 5%, var(--surface));
}
[data-theme="dark"] .qrow.kbsel {
  outline: 2px solid var(--forest-d);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--sand) 5%, var(--surface));
}
.context-section.kbsel {
  outline: 2px solid var(--forest) !important;
  outline-offset: 4px;
  background: color-mix(in srgb, var(--forest) 8%, var(--surface)) !important;
  border-radius: 12px;
  transition: all 0.3s ease;
}
[data-theme="dark"] .context-section.kbsel {
  outline: 2px solid var(--forest-d) !important;
  outline-offset: 4px;
  background: color-mix(in srgb, var(--sand) 10%, var(--surface2)) !important;
}
.qrow:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}
[data-theme="dark"] .qrow:focus-visible {
  outline: 2px solid var(--forest-d);
  outline-offset: -2px;
}
.qrow.cmhl {
  background: color-mix(in srgb, var(--forest) 8%, var(--surface));
}

.qrow-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qrow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.qrow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.qrow-title strong {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qrow-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.qrow-preview {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.qrow-preview .dari {
  font-weight: 600;
  color: var(--muted2);
}
.qrow-preview .dari-internal {
  color: var(--warn);
}
.qrow-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
}
.pinmark {
  color: var(--forest);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
[data-theme="dark"] .pinmark {
  color: var(--forest-d);
}
.miniav {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--muted);
  font-size: 9px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}

/* --- Queue footer (keyboard shortcuts) --- */
.qfoot {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.qfoot kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface2);
  color: var(--text);
}

/* --- Channel Tag & Monitor Bar --- */
.chantag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}
.monitorbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}
.monitorfoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--muted);
}

/* --- Thread Header --- */
.threadhead {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 58px;
}
.threadhead .backbtn {
  display: none;
}
.thread-title-btn {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  flex: 1 1 130px;
  min-width: 110px;
  color: inherit;
  font-family: inherit;
  border-radius: 6px;
}
.thread-title-btn:hover b {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media(max-width: 760px) {
  .threadhead .backbtn {
    display: inline-grid;
  }
}
.hpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
}
.hpill.ai {
  background: color-mix(in srgb, var(--lime) 24%, var(--surface));
  color: var(--forest);
}
.hpill.tim {
  background: var(--warn-bg);
  color: var(--warn);
}
.prespill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px 3px 4px;
}
.prespill .pdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}

/* --- Thread "more" menu: rename a group, delete a conversation --- */
.thread-more {
  position: relative;
}
.thread-more-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.thread-more-pop button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.thread-more-pop button:hover {
  background: var(--surface2);
}
.thread-more-pop button.danger {
  color: var(--danger);
}

/* --- Pinned Messages Banner --- */
.pinbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.pinmain {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}
.pinmain span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Messages Container & Bubbles --- */
.messages {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
  background: var(--canvas);
  min-height: 0;
  scrollbar-width: thin;
}
.datesep {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 999px;
  padding: 3px 11px;
}
.mwrap {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 76%;
  min-width: 0;
  user-select: none;
  -webkit-touch-callout: none;
}
.mwrap.start {
  align-self: flex-start;
  align-items: flex-start;
}
.mwrap.end {
  align-self: flex-end;
  align-items: flex-end;
}
.mwrap.cmhl .msg {
  box-shadow: 0 0 0 2px var(--ring);
}
.bwrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mlabel {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mlabel.ai {
  color: var(--forest-d);
  font-weight: 600;
}
.mlabel.note {
  color: var(--warn);
  font-weight: 600;
}
.rc-mark {
  margin-left: 4px;
  font-weight: 700;
  display: inline-block;
  user-select: none;
}
.rc-mark.sent,
.rc-mark.delivered {
  color: var(--muted);
}
.rc-mark.read {
  color: #0284c7;
}
[data-theme="dark"] .rc-mark.read {
  color: #38bdf8;
}
.msg {
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.45;
}
/* Each message surface is one bg + fg pair (token.css --bub-*), defined together for both themes. */
.msg.cust {
  background: var(--bub-in-bg);
  border: 1px solid transparent;
  border-bottom-left-radius: 6px;
  color: var(--bub-in-fg);
}
.msg.ai {
  background: var(--bub-ai-bg);
  border: 1px solid transparent;
  border-bottom-right-radius: 6px;
  color: var(--bub-ai-fg);
}
.msg.team {
  background: var(--bub-out-bg);
  color: var(--bub-out-fg);
  border-bottom-right-radius: 6px;
}
.msg p {
  margin: 0;
}
.msg p + p {
  margin-top: 6px;
}
.notemsg {
  align-self: stretch;
  background: var(--bub-note-bg);
  border: 1px dashed var(--bub-note-bd);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
  color: var(--bub-note-fg);
}
.notemsg .mlabel {
  display: flex;
  margin-bottom: 5px;
}
.sysmsg {
  align-self: center;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 999px;
  padding: 4px 12px;
  text-align: center;
  overflow-wrap: anywhere;
}
.qblock {
  display: block;
  border-left: 3px solid var(--forest);
  padding: 4px 8px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 4px;
  font-size: 12px;
}
.qblock b {
  display: block;
  font-size: 11.5px;
}
.qblock span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}
button.qblock {
  width: 100%;
  border: 0;
  border-left: 3px solid var(--forest);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.msg:focus-visible,
.msg:focus {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.sysmsg.msgdel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.sysmsg .text-link {
  font-size: 11.5px;
}
.sysmsg.sistem-strike {
  color: var(--warn);
  background: var(--warn-bg);
}
.messages .tolatest {
  position: sticky;
  bottom: 4px;
  align-self: center;
  z-index: 2;
  box-shadow: var(--shadow);
}
.reacts .message-reaction {
  position: static;
  box-shadow: none;
  min-height: 22px;
}
.reacts .message-reaction > span {
  font-size: 14px;
  line-height: 18px;
}
.mwrap .message-reaction-notice {
  padding-top: 4px;
}
.rstatus {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Message Media Attachments & Lightbox Viewer (L4) --- */
.message-media {
  min-width: 0;
  margin: 6px 0 2px;
  max-width: 100%;
}
.image-preview {
  position: relative;
  display: block;
  width: 260px;
  max-width: 100%;
  height: 175px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-align: left;
}
.image-preview:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  border-color: var(--forest);
}
[data-theme="dark"] .image-preview {
  background: #18191b;
  border-color: #2e3034;
}
[data-theme="dark"] .image-preview:hover {
  border-color: var(--forest-d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.image-preview > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(17, 20, 19, 0.78);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  transition: background 0.15s ease;
}
.image-preview:hover > span {
  background: rgba(17, 20, 19, 0.92);
}
.document-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.document-preview:hover {
  border-color: var(--forest);
  background: var(--surface2);
}
[data-theme="dark"] .document-preview {
  background: #18191b;
  border-color: #2e3034;
}
[data-theme="dark"] .document-preview:hover {
  border-color: var(--forest-d);
}
.document-type {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 44px;
  border-radius: 6px;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
[data-theme="dark"] .document-type {
  background: #25282c;
  color: #f4f4f5;
}

/* Lightbox Modal */
.inbox-media-viewer {
  position: fixed;
  inset: 0;
  width: min(1000px, 92vw);
  height: min(840px, 90dvh);
  max-width: 92vw;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  outline: none;
  z-index: 1000;
}
.inbox-media-viewer::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .inbox-media-viewer {
  background: #18191b;
  border-color: #2e3034;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}
.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 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
[data-theme="dark"] .media-viewer-content > header {
  background: #18191b;
  border-bottom-color: #2e3034;
}
.media-viewer-content > header > div {
  flex: 1;
  min-width: 0;
}
.media-viewer-content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.media-viewer-content small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.media-viewer-content .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-viewer-content .icon-btn:hover {
  background: var(--border);
  color: var(--text);
}
[data-theme="dark"] .media-viewer-content .icon-btn {
  background: #25282c;
  border-color: #3f4246;
  color: #f4f4f5;
}
[data-theme="dark"] .media-viewer-content .icon-btn:hover {
  background: #32363b;
}
.media-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0f1110;
}
.media-viewer-body > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.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: #a1a1aa;
}
.media-viewer-body a {
  color: var(--sand);
  text-decoration: underline;
}



/* --- Reaction Pills --- */
.reacts {
  display: inline-flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.rpill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.rpill:hover {
  background: var(--surface2);
}
.rpill.mine {
  background: color-mix(in srgb, var(--sand) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--forest) 40%, var(--border));
}

/* --- Takeover single bar per stage --- */
.takebar {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.takebar .btn {
  flex-shrink: 0;
}

/* --- Composer --- */
.composerwrap {
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  background: var(--surface);
}
.ctabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  align-items: center;
}
.ctab {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: inherit;
  transition: all var(--cepat, 0.15s);
}
.ctab:hover {
  color: var(--text);
  background: var(--canvas);
}
.ctab.on {
  background: var(--surface2);
  color: var(--text);
}
.ctab.on.note {
  background: #FEF3C7;
  color: #92400E;
}
[data-theme="dark"] .ctab.on.note {
  background: #2A2110;
  color: #FCD34D;
}
.ctab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Rephrase on send: the team's reply is rewritten in the Sales style when it is sent (lib/team-rephrase.ts). */
.rephrase {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.rephrase.on {
  color: var(--forest);
  border-color: color-mix(in srgb, var(--forest) 40%, var(--border));
  background: color-mix(in srgb, var(--sand) 18%, var(--surface));
}
[data-theme="dark"] .rephrase.on {
  color: var(--forest-d);
}
.rephrase input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--forest);
}
.rephrase:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.composerwrap {
  container-type: inline-size;
}
.composerwrap .ctabs {
  flex-wrap: wrap;
}
.rephrase .label-pendek {
  display: none;
}
@container (max-width: 520px) {
  .rephrase .label-panjang {
    display: none;
  }
  .rephrase .label-pendek {
    display: inline;
  }
}
.quotebar .qprev {
  display: block;
}
.composer-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 2px 0;
  font-size: 11.5px;
  color: var(--muted);
}
.quotebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--surface2);
  border-left: 3px solid var(--forest);
  border-radius: 6px;
  font-size: 12px;
}
.qprev {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.smartchips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.smartchips .qchip {
  padding: 4px 9px;
  min-height: 28px;
  font-size: 11.5px;
}

.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 11px;
  resize: none;
  background: var(--surface);
  color: var(--text);
  min-width: 0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  min-height: 40px;
  max-height: 140px;
  field-sizing: content;
}
.composerwrap.notemode {
  background: color-mix(in srgb, #FEF3C7 35%, var(--surface));
  border-top: 1px solid #D97706;
}
/* Attach: an icon button over an invisible file input */
.composer-attach {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}
.composer-attach:hover {
  background: var(--surface2);
  color: var(--text);
}
.composer-attach.disabled {
  opacity: 0.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(--forest);
  outline-offset: 2px;
}
}
.composerwrap.notemode .composer textarea {
  background: #FFFBEB;
  border-color: #D97706;
  color: #78350F;
}
.composerwrap.notemode .notelabel {
  color: #B45309;
  font-weight: 700;
}
[data-theme="dark"] .composerwrap.notemode {
  background: #1c1808;
  border-top: 1px solid #b45309;
}
[data-theme="dark"] .composerwrap.notemode .composer textarea {
  background: #271e08;
  border-color: #b45309;
  color: #fef08a;
}
[data-theme="dark"] .composerwrap.notemode .notelabel {
  color: #fef08a;
  font-weight: 700;
}
[data-theme="dark"] .composerwrap.notemode .ctab.on.note {
  background: #3a2909;
  color: #fde047;
  border: 1px solid #854d0e;
}
.composer textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Context Panel Cards --- */
.ctxcard {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface);
}
.ctxcard h4 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
  font-weight: 700;
}
.ctxcard.ai {
  border-color: color-mix(in srgb, var(--forest) 35%, var(--border));
  background: color-mix(in srgb, var(--sand) 8%, var(--surface));
}
.ctxcard.tx {
  border-color: color-mix(in srgb, var(--forest) 35%, var(--border));
  background: color-mix(in srgb, var(--sand) 6%, var(--surface));
}
.ctxcard textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

/* --- Customer details in the context panel (CustomerContext workspace: profile, tabs, sections) --- */
.ctx .customer-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ctx .customer-workspace [hidden] {
  display: none !important;
}
.ctx .customer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 12px;
  min-width: 0;
}
.ctx .customer-profile .avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.ctx .customer-profile strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ctx .customer-profile .profile-name-source {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.ctx .customer-profile .angka {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ctx .customer-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.ctx .customer-tabs 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(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ctx .customer-tabs button:hover {
  color: var(--text);
}
.ctx .customer-tabs button[aria-selected="true"] {
  border-bottom-color: var(--forest);
  color: var(--text);
}
[data-theme="dark"] .ctx .customer-tabs button[aria-selected="true"] {
  border-bottom-color: var(--forest-d);
}
.ctx .customer-tabs button span {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface2);
  font-size: 11px;
  line-height: 20px;
}
.ctx .customer-workspace .context-section {
  margin: 12px 0 0;
}

/* --- Receipt Preview Card --- */
.receipt {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--canvas);
}
.rc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.rc-bank {
  font-weight: 700;
}
.rc-amt {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}
[data-theme="dark"] .rc-amt {
  color: var(--forest-d);
}
.rc-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  color: var(--muted);
}
.rc-row b {
  color: var(--text);
}
.rc-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* --- Context Details Toggle --- */
details.ctxdet summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
details.ctxdet summary::-webkit-details-marker {
  display: none;
}
.ctxchev {
  transition: transform var(--cepat, 0.15s);
  display: grid;
  place-items: center;
}
details.ctxdet[open] .ctxchev {
  transform: rotate(90deg);
}
.ctxbody {
  margin-top: 8px;
}

/* --- Mini Stepper & Order Click --- */
.ordclick {
  cursor: pointer;
  border-radius: 10px;
  padding: 4px;
  transition: background-color var(--cepat, 0.15s);
}
.ordclick:hover {
  background: var(--canvas);
}
.stepper.mini {
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper.mini .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  flex: 0 0 auto;
}
.stepper.mini .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  background: var(--surface);
  font-weight: 700;
  font-size: 10px;
}
.stepper.mini .step.done .dot {
  background: var(--forest);
  color: var(--pada-hutan);
  border-color: var(--forest);
}
.stepper.mini .line {
  height: 2px;
  background: var(--border);
  flex: 1;
  margin-bottom: 14px;
}
.stepper.mini .line.done {
  background: var(--forest);
}

/* --- Context Scrim (Mobile Overlay) --- */
.ctxscrim {
  display: none;
}

/* --- Custom Context Menu (#cmenu) --- */
#cmenu {
  position: fixed;
  z-index: 120;
  min-width: 218px;
  max-width: 280px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  display: none;
  font-family: inherit;
}
#cmenu.open {
  display: block;
}
.cmitem {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: inherit;
  line-height: 1.35;
  user-select: none;
  box-sizing: border-box;
}
.cmitem:hover,
.cmitem.sel {
  background: var(--surface2);
}
.cmitem.dis {
  color: var(--muted2);
  cursor: default;
}
.cmitem.dis:hover,
.cmitem.dis.sel {
  background: transparent;
}
.cmitem.danger {
  color: var(--danger);
}
.cmitem .cmic {
  color: var(--muted);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.cmitem.danger .cmic {
  color: var(--danger);
}
.cmitem .cmdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin: 0 3px;
}
.cmitem .cmcheck {
  margin-left: 2px;
  color: var(--forest);
  display: none;
  place-items: center;
  flex: 0 0 auto;
}
.cmitem.on .cmcheck {
  display: grid;
}
.cmsep {
  height: 1px;
  background: var(--border);
  margin: 5px 6px;
}
.cmreact {
  display: flex;
  gap: 2px;
  padding: 3px 4px 7px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
}
.cmreact button {
  flex: 1;
  height: 34px;
  font-size: 17px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.cmreact button:hover {
  background: var(--surface2);
}
.cmreact button.mine {
  background: color-mix(in srgb, var(--sand) 30%, var(--surface));
}
.cmsub {
  position: absolute;
  left: calc(100% - 4px);
  top: -5px;
  min-width: 198px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  display: none;
  z-index: 3;
}
.cmitem.hassub.subopen > .cmsub {
  display: block;
}
#cmenu.flipx .cmsub {
  left: auto;
  right: calc(100% - 4px);
}
#cmenu.flipy .cmsub {
  top: auto;
  bottom: -5px;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1180px) {
  .inbox,
  .inbox.noctx {
    grid-template-columns: 350px minmax(0, 1fr);
  }
  .inbox.ctxoff {
    grid-template-columns: 350px minmax(0, 1fr) 44px;
  }
  .ctx {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(370px, 88vw);
    min-width: 0;
    max-width: none;
    z-index: 65;
    box-shadow: var(--shadow-lg);
    transform: translateX(106%);
    transition: transform 0.22s ease;
  }
  .inbox.ctxoff .ctx {
    display: flex !important;
  }
  .inbox.ctxshow .ctx {
    transform: none;
  }
  .inbox.ctxshow .ctxscrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 64;
  }
}

@media (max-width: 760px) {
  .inbox {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    height: calc(100dvh - 60px);
  }
  .inbox .thread {
    display: none;
  }
  .inbox.showthread .queue {
    display: none;
  }
  .inbox.showthread .thread {
    display: flex;
    flex: 1;
  }
  .inbox .ctxstrip {
    display: none !important;
  }
}

/* Customer Profile in Context Panel */
.customer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
}
.customer-profile .avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.customer-profile .grow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  justify-content: center;
}
.customer-profile strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-profile .angka {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
}

/* Phones: the tab bar (shell.css) is fixed over the bottom of the page. The queue ends above it; inside a
   conversation the tab bar and the floating assistant step aside so the composer stays reachable. */
@media (max-width: 700px) {
  .content.flush .inbox {
    height: calc(100dvh - 56px - 60px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }
  .content.flush .inbox.showthread {
    height: calc(100dvh - 56px);
  }
  body:has(.inbox.showthread) .bottomnav,
  body:has(.inbox.showthread) .fab {
    display: none;
  }
  .qfoot {
    display: none;
  }
  /* Who replies is in the bar above the composer; the header keeps the name and the panel button on one line. */
  .threadhead .hpill {
    display: none;
  }
}
/* The panel over the thread covers the floating assistant, not the other way round. */
@media (max-width: 1180px) {
  body:has(.inbox.ctxshow) .fab {
    display: none;
  }
}

/* Conversation labels (components/ConversationLabels.tsx): a chip per label, in the Inbox list and the customer panel */
.lblchip{--lbl:#64748b;display:inline-flex;align-items:center;gap:5px;max-width:132px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--lbl);background:color-mix(in srgb,var(--lbl) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--lbl) 30%,transparent)}
.lblchip::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.qrow-footer .lblchip{font-size:10px;line-height:15px;padding:0 6px;max-width:96px}
.lblchip.c-gray{--lbl:#64748b}.lblchip.c-red{--lbl:#dc2626}.lblchip.c-orange{--lbl:#c2410c}.lblchip.c-yellow{--lbl:#a16207}
.lblchip.c-green{--lbl:#15803d}.lblchip.c-teal{--lbl:#0f766e}.lblchip.c-blue{--lbl:#1d4ed8}.lblchip.c-purple{--lbl:#7e22ce}
[data-theme="dark"] .lblchip.c-gray{--lbl:#cbd5e1}[data-theme="dark"] .lblchip.c-red{--lbl:#fca5a5}[data-theme="dark"] .lblchip.c-orange{--lbl:#fdba74}[data-theme="dark"] .lblchip.c-yellow{--lbl:#fde047}
[data-theme="dark"] .lblchip.c-green{--lbl:#86efac}[data-theme="dark"] .lblchip.c-teal{--lbl:#5eead4}[data-theme="dark"] .lblchip.c-blue{--lbl:#93c5fd}[data-theme="dark"] .lblchip.c-purple{--lbl:#d8b4fe}
.lblmore{font-size:10px;font-weight:600;color:var(--muted)}
.labelcard .lblrow{display:flex;flex-wrap:wrap;gap:6px}
.lblpick{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.lblopt{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:28px}
.lblopt input[type=checkbox]{width:16px;height:16px;min-height:0;flex:0 0 16px;margin:0;accent-color:var(--forest)}
.lblmanage{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.lblmanage li,.lblnew{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lblmanage .qsel,.lblnew .qsel{flex:0 0 112px}
.lblmanage .input,.lblnew .input{flex:1 1 140px;min-width: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).
   ========================================================================== */
/* Catatan & kasus is a work page: full width like Inbox, Pelanggan and Pesanan (komponen.css .ck). */
.ck-kosong{padding:24px 0}
.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:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.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:var(--font-weight-semibold)}
.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:var(--font-size-sm);color:var(--tinta-2)}
.ck-jumlah .text-link{font-size:var(--font-size-sm)}
.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:var(--radius-full);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:var(--font-size-lg);font-weight:var(--font-weight-semibold);overflow-wrap:anywhere}
.ck-teks{max-width:72ch;margin-top:6px;font-size:var(--font-size-base);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ck-penyelesaian{max-width:72ch;margin-top:6px;font-size:var(--font-size-base);line-height:1.5;color:var(--tinta-2);overflow-wrap:anywhere}
.ck-penyelesaian strong{color:var(--tinta)}
.ck-meta{margin-top:8px;font-size:var(--font-size-xs);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:var(--font-size-base);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:var(--font-size-lg)}
 .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:var(--font-size-2xl)}
 .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:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--tinta)}
.guidance-pakai-isi{margin:0;white-space:pre-line;font-size:var(--font-size-base);line-height:1.5;color:var(--tinta)}
.langkah-guide{display:grid;gap:4px;margin:0;padding-left:20px;font-size:var(--font-size-sm);line-height:1.45;color:var(--tinta-2)}
.ck-avatar{width:28px;height:28px;font-size:var(--font-size-xs)}
.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:var(--font-size-sm);line-height:1.45;color:var(--tinta)}
.ck-riwayat li strong{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);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:var(--font-weight-semibold)}
.ck-riwayat .kirim-delivered span{color:var(--hutan-teks);font-weight:var(--font-weight-semibold)}
/* 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:var(--font-size-sm);font-weight:var(--font-weight-semibold);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:var(--font-size-xs)}
.kasus-tunggu.lewat{color:var(--merah)}
.conversation-status .case-label{background:var(--kunyit-lembut);border-color:var(--kunyit-garis);color:var(--kunyit)}
.conversation-status .case-assignee{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)}.case-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}.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:var(--radius-lg);box-shadow:var(--bayang-2);padding:12px;display:grid;gap:8px}.case-filter-pop select{width:100%;min-width:0}
.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:var(--radius-xl);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 1px var(--garis-kuat);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-pick:focus-visible{outline-offset:-4px}.case-row-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.case-row-title strong{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.case-assignee-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--garis-input);padding:1px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs);line-height:18px;color:var(--tinta-2);font-weight:var(--font-weight-medium)}.case-assignee-chip.assigned{background:var(--hutan-lembut);border-color:var(--hutan-garis,var(--garis))}.case-row-reason{display:block;font-size:var(--font-size-base);line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}.case-row-meta{display:flex;align-items:center;gap:4px;font-size:var(--font-size-xs);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:var(--font-size-xs);font-weight:var(--font-weight-semibold);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:var(--radius-xl);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:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.case-detail header small{font-size:var(--font-size-xs);color:var(--tinta-3)}.case-detail-body{padding:0}.case-summary{padding:16px 24px}.case-assignment{padding:16px 24px}.case-detail-actions{padding:16px 24px}.case-history{padding:16px 24px}.case-summary{border-bottom:1px solid var(--garis)}.case-full-reason{margin:10px 0 0;font-size:var(--font-size-base);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:var(--font-size-base);color:var(--tinta-3);border-bottom:1px solid var(--garis)}.case-assignment strong{font-size:var(--font-size-xs);justify-self:start}.case-holder{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:var(--radius-full);justify-self:start;grid-column:2/-1;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.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:var(--radius-full);background:var(--ai-bg);padding:2px;fill:var(--ai-fg);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:var(--font-size-sm)}.case-history-title{font-size:var(--font-size-base);margin:0 0 16px}.case-timeline li>svg{color:var(--hutan);border:1px solid currentColor;border-radius:var(--radius-full);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:var(--font-size-sm)}.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:var(--font-size-xs)}.case-timeline p{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}.case-timeline .internal{color:var(--info)}.case-detail-close{display:none}
@media(max-width:1180px) and (min-width:761px){.case-split{grid-template-columns:minmax(0,1fr) 340px;gap:16px}}
@media(max-width:760px){
 .case-split{display:block}.case-index{border:0;border-radius:0;margin:0 -16px}.case-index>li.selected{box-shadow:none;background:var(--permukaan-2)}.case-pick{padding:16px;gap:12px}.case-row-reason{display:none}.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:var(--font-size-base)}.case-row-assign{display:none}.case-detail{display:none}.case-split.detail-open .case-detail{display:block;position:fixed;inset:var(--tinggi-topbar) 0 calc(64px + env(safe-area-inset-bottom,0px));z-index:40;border-radius:0;border:0;overflow:auto}.case-detail-close{display:flex}.case-detail-body{padding:0}.case-summary{padding:16px 20px}.case-assignment{padding:16px 20px}.case-detail-actions{padding:16px 20px}.case-history{padding:16px 20px}.case-detail .case-row-wait{position:static}
}
@media(prefers-reduced-motion:reduce){.case-split{transition:none}}
.case-modal-context{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--garis);background:var(--permukaan-2);border-radius:var(--radius-lg)}.case-modal-context .avatar{flex:none}.case-modal-context p{font-size:var(--font-size-base);line-height:20px;margin:8px 0}.case-modal-context small{color:var(--tinta-3)}
.case-payments{border:1px solid var(--garis);border-radius:var(--radius-lg);padding:12px;margin:16px 0}.case-payments>summary{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer}.case-payments .context-section{padding:12px 0 0;border:0}
@media(max-width:760px){.case-modal-context{padding:12px}}

.case-mobile-tools-toggle{display:none}

.case-mobile-assignee{display:none}
@media(max-width:760px){.ck .case-mobile-tools-toggle{display:flex;position:relative;top:auto;right:auto;z-index:auto;margin:0 0 8px auto;width:var(--touch-target);height:var(--touch-target)}.ck .case-toolbar{display:block;margin:0}.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:var(--font-size-xs);padding:0 6px;height:20px}.ck .case-assignee-chip{display:inline-flex;vertical-align:middle;border:1px solid var(--garis-input);border-radius:var(--radius-full);font-size:var(--font-size-xs);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:var(--font-size-xs)}.ck .case-split.detail-open .case-detail{inset:var(--tinggi-topbar) 0 calc(64px + env(safe-area-inset-bottom,0px))}.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}

.modal .case-modal-context{flex-direction:row}.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}
.case-search-row{gap:8px}
/* Open cases from the legacy two-agent team: read-only, listed apart and not counted. */
.ck-legacy{margin:20px 0 0;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.ck-legacy summary{display:flex;align-items:center;gap:10px;min-height:48px;list-style:none;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--tinta-2);cursor:pointer}
.ck-legacy summary::-webkit-details-marker{display:none}
.ck-legacy summary>svg:last-child{margin-left:auto;transition:transform var(--sedang) var(--lengkung)}
.ck-legacy[open] summary>svg:last-child{transform:rotate(180deg)}
.ck-legacy>.hint{margin:0 0 8px;max-width:70ch}
.ck-legacy-list{margin:0 0 12px;padding:0;list-style:none}
.ck-legacy-list li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 0;border-top:1px solid var(--garis-lembut)}
.ck-legacy-list .grow{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ck-legacy-list small{color:var(--tinta-3)}

/* Customer index with adjacent desktop details and a responsive drawer. */
.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:1px solid var(--garis)}
.pl-tabel{width:100%;border-collapse:collapse}
.pl-tabel th{padding:10px 12px 8px;border-bottom:1px solid var(--garis);background:transparent;font-size:var(--font-size-xs);color:var(--tinta-3)}
.pl-tabel td{padding:12px;border-bottom:1px solid var(--garis);font-size:var(--font-size-base);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:var(--font-weight-normal);text-align:left}
.pl-nama strong{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.pl-nama small{font-size:var(--font-size-sm);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:var(--font-size-base);background:var(--sorot-kuat);color:var(--tinta-2)}
.pl-detail-kepala h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:1.25;overflow-wrap:anywhere}
.pl-detail-kepala .angka{display:block;margin-top:2px;font-size:var(--font-size-sm);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:1px solid var(--garis)}
: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:var(--font-size-base);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:var(--font-size-lg)}
 .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:var(--font-size-sm);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}
}
.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:var(--radius-xl);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:var(--font-size-xs)}.pl-nama>span:not(.avatar){display:flex;flex-direction:column}.pl-nama strong{font-size:var(--font-size-base)}.pl-nama small{font-size:var(--font-size-xs)}.pl-detail{border:1px solid var(--garis);border-radius:var(--radius-xl)}
@media(max-width:760px){
 .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:var(--radius-lg)}.pl-tabel tbody tr{padding:16px}.pl-nama{gap:10px}.pl-tabel .pl-kol-update{display:block;grid-column:1/-1}
}.customer-drawer-subtitle{font-size:var(--font-size-sm);line-height:20px;color:var(--tinta-3);margin-top:-16px}
@media(max-width:760px){.customer-drawer-subtitle{margin-top:-12px}}
.pl-nama>.avatar{display:inline-grid;place-items:center;line-height:1;flex:none}
.modal .customer-drawer-subtitle{margin:0 0 4px;font-size:var(--font-size-sm);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{width:100%}
.modal .customer-stage-row select{width:100%}
@media(max-width:760px){
 .modal .customer-stage-row{gap:12px}
}
/* Akun bisnis (components/BusinessAccounts.tsx): accounts on Pelanggan, one account, and its card next to a chat. */
.acct-blok{margin-bottom:20px}
.acct-blok-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:4px 0 8px}
.acct-blok-judul{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.acct-blok-kepala .text-link{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.acct-tabel-wadah{padding:0;overflow:hidden}
.acct-tabel{margin:0}
.acct-nama{display:inline-flex;align-items:center;gap:10px;text-align:left}
.acct-nama>span:last-child{display:flex;flex-direction:column;min-width:0}
.acct-nama .text-link{padding:0;font-weight:700;color:inherit;text-align:left}
.acct-ikon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--forest) 14%,var(--permukaan));color:var(--forest)}
.acct-sel{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.acct-mini-limit{display:flex;flex-direction:column;gap:4px;min-width:130px}
.capbar.penuh i{background:var(--danger)}
.acct-telat{color:var(--danger);font-weight:600}
.acct-penanda{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:var(--font-size-xs);font-weight:600;color:var(--forest)}
.chip.emas{border-color:color-mix(in srgb,var(--gold) 55%,var(--garis));color:color-mix(in srgb,var(--gold) 82%,var(--tinta))}
.acct-chips{display:flex;flex-wrap:wrap;gap:6px}
.acct-chips .chip,.acct-tabel .chip{padding:2px 9px;font-size:var(--font-size-xs)}
.acct-limit{max-width:480px;margin-top:14px}
.acct-limit-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:6px;font-size:var(--font-size-sm)}
/* One account */
.acct-kembali{margin:0 0 12px;padding-left:4px}
.acct-kepala{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-bottom:16px}
.acct-avatar{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:14px;background:var(--forest);color:var(--pada-hutan)}
.acct-kepala-isi{flex:1 1 280px;min-width:0}
.acct-kepala-isi h1{margin:0 0 2px;font-size:var(--font-size-2xl);line-height:1.2;overflow-wrap:anywhere}
.acct-kepala-isi p{margin:2px 0}
.acct-kepala-isi .acct-chips{margin-top:10px}
.acct-kepala-aksi{display:flex;align-items:center;gap:6px}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start;margin-top:16px}
.acct-kolom{display:flex;flex-direction:column;gap:14px;min-width:0}
.acct-kartu{min-width:0}
.acct-kartu-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.acct-kartu-kepala h3{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--font-size-lg)}
.acct-pic,.acct-tagihan,.acct-lunas,.acct-aturan{margin:0;padding:0;list-style:none}
.acct-pic{display:flex;flex-direction:column;gap:6px}
.acct-pic li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--garis);border-radius:10px}
.acct-pic-inisial{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--permukaan-2);font-weight:700}
.acct-pic-isi{display:flex;flex:1;flex-direction:column;min-width:0}
.acct-pic-isi small{overflow-wrap:anywhere}
.acct-pic-aksi{display:flex;align-items:center;gap:4px}
.acct-catatan{margin:10px 0 0}
.acct-arahan{width:100%;padding:10px;border:1px solid var(--garis);border-radius:10px;background:var(--permukaan);color:var(--tinta);font:inherit;font-size:var(--font-size-sm)}
.acct-arahan-baca{margin:0;white-space:pre-wrap}
.acct-tagihan{display:flex;flex-direction:column;gap:8px}
.acct-tagihan li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--garis);border-radius:10px}
.acct-tagihan li.telat{border-color:color-mix(in srgb,var(--danger) 45%,var(--garis))}
.acct-tagihan-baris{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.acct-tagihan-aksi{margin-top:4px}
.acct-lunas li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px dashed var(--garis);font-size:var(--font-size-sm)}
.acct-lunas li:first-child{border-top:0}
.acct-lunas li>span:last-child{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.acct-aturan{display:flex;flex-direction:column;gap:6px;padding-left:18px;list-style:disc;font-size:var(--font-size-sm);color:var(--tinta-2)}
.acct-harga{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.acct-harga li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--garis);font-size:var(--font-size-sm)}
.acct-harga li:first-child{border-top:0}
.acct-harga-isi{display:flex;flex:1;flex-direction:column;min-width:0}
.acct-harga-isi b{overflow-wrap:anywhere}
.acct-harga li>.angka{white-space:nowrap}
.acct-harga-aksi{display:flex;flex:none;align-items:center;gap:4px}
.acct-harga li.hilang>.angka{color:var(--tinta-2);text-decoration:line-through}
.acct-peringatan{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--gold) 14%,var(--permukaan));color:var(--tinta)}
.acct-pilih{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0}
.acct-pilih label{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--garis);border-radius:10px;cursor:pointer}
.acct-pilih label.dipilih{border-color:var(--forest);background:var(--permukaan-2)}
.acct-pilih label>span{display:flex;flex-direction:column;min-width:0}
/* Next to a chat */
.acctcard-nama{display:block;font-size:var(--font-size-base)}
@media (max-width:760px){
 .acct-kepala-aksi{width:100%}
 .acct-pic li{flex-wrap:wrap}
 .acct-pic-aksi{width:100%;justify-content:flex-end}
 .acct-tagihan-aksi .btn{min-height:40px}
}
/* Phones: the customer and account tables of this page become one card per row, without the column headings. */
@media (max-width:700px){
 .pl .table.ctable,.pl .table.ctable tbody{display:block;width:100%}
 .pl .table.ctable thead{display:none}
 .pl .table.ctable tr{display:block;width:100%;padding:8px 4px;border-bottom:1px solid var(--garis)}
 .pl .table.ctable tr:last-child{border-bottom:0}
 .pl .table.ctable td{width:100%;border:0}
 .pl .acct-mini-limit,.pl .acct-sel{align-items:flex-end;min-width:0}
}

/* ============================================================================
   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:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--tinta-2)}
.sr-pita h1{margin-top:2px;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:1.08;letter-spacing:-.025em}
.sr-lead{max-width:60ch;margin-top:8px;font-size:var(--font-size-base);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:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--tinta-2)}
.sr-ket{margin:0 0 12px;font-size:var(--font-size-base);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:var(--radius-full);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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.sr-langkah-item p{margin-top:2px;font-size:var(--font-size-sm);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:1px solid var(--garis)}
.sr-angka div{padding:12px 0;border-bottom:1px solid var(--garis)}
.sr-angka dt{font-size:var(--font-size-sm);color:var(--tinta-2)}
.sr-angka dd{margin:2px 0 0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:1.1;letter-spacing:-.02em}
.sr-angka .na{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--tinta-3)}
.sr-sinkron{margin:0;padding:0;list-style:none;border-top:1px solid var(--garis)}
.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:var(--font-size-base)}
.sr-sinkron div>span{display:block;margin-top:2px;font-size:var(--font-size-sm);line-height:1.45;color:var(--tinta-2)}
.sr-teknis dl{display:grid;grid-template-columns:150px minmax(0,1fr);margin:0;border-top:1px solid var(--garis);font-size:var(--font-size-base)}
.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:var(--font-weight-semibold);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:var(--font-size-2xl)}
 .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:var(--font-size-2xl)}
 .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:var(--font-weight-medium)}
.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:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.config-isi [role=tabpanel]>h2{margin:24px 0 4px;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.config-block>.row{display:flex;align-items:center;gap:10px;min-height:40px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.config-block .hint{max-width:70ch;margin:2px 0 12px}
.form-section{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--garis)}
.form-section h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.form-section p{margin-top:4px;font-size:var(--font-size-base);color:var(--tinta-2)}
.config-entry{border-bottom:1px solid var(--garis)}
.config-entry:first-of-type{border-top:1px solid var(--garis)}
.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:var(--font-size-base);font-weight:var(--font-weight-semibold);overflow-wrap:anywhere}
.config-entry-meta{flex:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);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:1px solid var(--garis);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.config-bagian>p{max-width:70ch;margin-bottom:10px;font-size:var(--font-size-base);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:var(--font-size-base)}
.config-bagian .sync-row span:not(.status-dot){display:block;margin-top:2px;font-size:var(--font-size-sm);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:var(--font-size-base)}
.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:var(--font-size-base);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:1px solid var(--garis)}
.ai-import .section-title{margin-bottom:10px}
.ai-import h3{display:flex;align-items:center;gap:8px;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-sm);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:1px solid var(--garis);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.sl-rekap>p{max-width:72ch;margin:8px 0;font-size:var(--font-size-base);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:var(--font-size-base);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:1px solid var(--garis)}
.sl-kartu-kepala{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.sl-kartu-kepala h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.sl-ringkas{max-width:72ch;margin-top:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.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 .starmy-check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:var(--font-size-base)}
.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:var(--font-size-base);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:var(--font-size-xl);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)}}
.knowledge-page .pg-isi{max-width:none}.knowledge-page .knowledge-sync{font-size:var(--font-size-xs);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:var(--radius-md)}.product-pick strong{display:block;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.product-pick small{display:block;font-size:var(--font-size-xs);line-height:18px;margin:4px 0 6px;color:var(--tinta-3)}.knowledge-index .design-card-body{font-size:var(--font-size-base);line-height:20px}.knowledge-index .notice{font-size:var(--font-size-xs);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 var(--radius-xl) var(--radius-xl);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}.sr-bagian{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius-xl)}.sr-bagian{padding:20px 24px}.sr-pita{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius-xl);padding:24px}.sr-pita>img{display:none}.sr-pita h1{font-size:var(--font-size-2xl)}.sr-pita .sr-status{font-size:var(--font-size-xs)}.sr .sr-kolom{gap:24px}.sr .sr-langkah{border:0}.sr .bagian-judul{margin:0 0 16px}.sr .bagian-judul h2{font-size:var(--font-size-lg)}
@media(max-width:1180px) and (min-width:761px){.knowledge-split{grid-template-columns:280px minmax(0,1fr)}.knowledge-page .product-tab>.sticky-actions{margin-left:304px}}
@media(max-width:1000px){.knowledge-editor .form-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .knowledge-split{display:flex;flex-direction:column;gap:20px}.knowledge-index{width:100%}.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:var(--radius-xl);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:var(--font-size-xs)}.knowledge-page .knowledge-sync{margin-bottom:16px}.sr .sr-kolom{display:flex;flex-direction:column}.sr-bagian{padding:20px}.sr-pita{padding:20px}.sr-pita h1{font-size:var(--font-size-2xl)}
}
.knowledge-editor .field small{font-size:var(--font-size-xs);line-height:16px}.knowledge-editor .field:has(>input[maxlength='3'])>small{display:none}.knowledge-editor .field:has(>input[maxlength='120'])>small{display:none}.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:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer}.sr-teknis dl{margin-top:16px}
.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:var(--font-size-xs);color:var(--tinta-3)}
@media(max-width:760px){.knowledge-editor .product-prices{grid-template-columns:1fr}}
.knowledge-editor>.item-editor{gap:14px}.knowledge-editor .product-prices{margin-bottom:0}.knowledge-editor>.item-editor>.advanced>summary{min-height:40px;font-size:var(--font-size-base)}.knowledge-editor .item-editor .field textarea{min-height:68px}.knowledge-editor .product-prices>.field:first-child small{line-height:16px}
.price-field>label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:18px}.price-control{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);border:1px solid var(--garis-input);border-radius:var(--radius-lg);background:var(--permukaan)}.price-control>input{border:0;border-radius:0 var(--radius-lg) var(--radius-lg) 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:var(--font-size-base)}.price-currency>summary{height:38px;display:grid;place-items:center;font-size:var(--font-size-sm);cursor:pointer;border-right:1px solid var(--garis);background:var(--permukaan-2);border-radius:var(--radius-lg) 0 0 var(--radius-lg);list-style:none}.price-currency>summary::-webkit-details-marker{display:none}.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:var(--font-size-base)}.product-availability .hint{font-size:var(--font-size-xs);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:var(--radius-full);background:var(--garis-input);pointer-events:none;padding:3px}.product-switch>span:after{content:"";display:block;width:18px;height:18px;border-radius:var(--radius-full);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:var(--radius-full)}.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}}

.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:var(--font-size-xs);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:var(--font-size-base);line-height:20px}.knowledge-index .product-pick small{font-size:var(--font-size-sm);line-height:18px}.knowledge-index .design-card-body .button-row{flex-direction:column;align-items:flex-start;gap:8px}
@media(max-width:1000px){.knowledge-page .knowledge-editor>.sticky-actions{flex-wrap:wrap}.knowledge-editor .sticky-actions .hint{width:100%;margin-left:0}}
@media(max-width:760px){.knowledge-page .knowledge-editor>.sticky-actions{position:sticky;bottom:64px;z-index:10;padding:12px 16px}}.price-field .price-control{margin-top:0}.product-prices>.field input[list]{margin-top:0}.price-field small{margin-top:0}.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:var(--radius-xl)!important}.knowledge-editor .design-card-head>small{margin-right:28px}
@media(max-width:760px){.sr .sr-pita{margin:0 0 20px}}
.price-field>label{line-height:18px}
.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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.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{width:40px}
.product-switch>span{width:40px}
.product-switch input:checked+span:after{margin-left:16px}

@media(max-width:760px){
 .page .knowledge-editor .price-control>input[type=number]{height:42px;min-height:42px}
}
.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{border-top:1px solid var(--garis)}
.sr .sr-sinkron{border-top:1px solid var(--garis)}
.sr .sr-teknis dl{border-top:1px solid var(--garis)}
.sr .sr-bagian+.sr-bagian{margin-top: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:var(--radius-xl);background:var(--permukaan);padding:20px;margin:20px 0}
.config-tabbed-page .sticky-actions{border-top:1px solid var(--garis)}
.config-tabbed-page .config-entry:first-of-type{border-top:1px solid var(--garis)}

/* Owner knowledge: show source tools on demand without discarding their drafts. */
.config-tabbed-page .config-identity-summary{margin:20px 0;padding:0 0 20px}
.config-tabbed-page .config-identity-summary h2{font-size:var(--font-size-lg)}
.config-assist{margin:0 0 24px;border:1px solid var(--garis);border-radius:var(--radius-xl);background:var(--permukaan-2)}
.config-assist-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;flex-wrap:wrap}
.config-assist-label{display:flex;align-items:center;gap:12px;color:var(--tinta)}
.config-assist-label strong,.config-assist-label span{display:block}
.config-assist-label strong{font-size:var(--font-size-base)}
.config-assist-label span{font-size:var(--font-size-xs);color:var(--tinta-3);margin-top:3px}
.config-assist-bar .button-row{margin:0;flex-wrap:wrap;gap:8px}
.config-assist-bar .btn{min-height:40px}
.config-assist-bar .btn[aria-expanded=true]{background:var(--sorot);border-color:var(--fokus)}
.config-import-body{padding:0 20px 20px;border-top:1px solid var(--garis);background:var(--permukaan);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.config-import-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.config-import-toolbar .hint{margin:0}
.config-tabbed-page .config-import-body .ai-import{border:0;border-radius:0;margin:0;padding:0}
.config-import-body .ai-document-import{margin:0}
.config-tabbed-page #pengetahuan .form-section{border:0;padding:0;margin-bottom:16px}
.config-tabbed-page .sticky-actions .btn[hidden]{display:none}
@media(max-width:760px){
 .config-assist-bar{padding:16px;align-items:stretch;flex-direction:column}
 .config-assist-bar .button-row{display:grid;grid-template-columns:1fr 1fr}
 .config-assist-bar .btn{min-height:44px;padding:8px;font-size:var(--font-size-xs)}
 .config-import-body{padding:0 16px 16px}
 .config-tabbed-page .config-identity-summary .section-title{align-items:flex-start;gap:12px;flex-wrap:wrap}
}
@media(max-width:760px){
 .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%}
 .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}
}
/* Pengetahuan: the import card on top and the link to Produk & stok; the same link card on Cara melayani. */
.knowledge-page .pg-impor,.knowledge-page .pg-produk,.config-content-link{margin:0 0 16px}
.knowledge-page .pg-produk{margin-top:16px}
.knowledge-page .pg-impor .design-card-body,.knowledge-page .pg-produk .design-card-body,.config-content-link .design-card-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.knowledge-page .pg-impor h2{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.knowledge-page .pg-impor p,.knowledge-page .pg-produk p,.config-content-link p{margin:2px 0 0;font-size:var(--font-size-sm);color:var(--tinta-2)}
.knowledge-page .pg-impor .grow,.knowledge-page .pg-produk .grow,.config-content-link .grow{flex:1 1 260px;min-width:0}
.knowledge-page .pg-impor>.notice{margin:0 16px 16px;font-size:var(--font-size-xs)}
.knowledge-page .pg-produk .avatar,.config-content-link .avatar{flex:none;width:32px;height:32px;border-radius:var(--radius-md)}
.knowledge-page .sticky-actions{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-top:16px;box-shadow:var(--shadow)}
/* Produk & stok: removing a product is a plain action at the end of its editor. */
.product-remove{justify-self:start;align-self:flex-start;margin-top:4px}
/* Request lists (Permintaan ke tim Starmy and the business's Permintaan tab, components/StarmyRequests.tsx). */
.team-proposals{margin:0 0 16px;padding:16px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan)}
.team-proposals>h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:var(--font-size-base)}
.team-proposals>.hint{margin:4px 0 12px}
.team-proposal-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.team-proposal-item{border-top:1px solid var(--garis);padding-top:12px;min-width:0}
.team-proposal-item:first-child{border-top:0;padding-top:0}
.team-proposal-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.team-proposal-head small{margin-left:auto}
.team-proposal-text{margin:8px 0;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:var(--font-size-sm);padding:10px 12px;border-radius:var(--r-2);background:var(--permukaan-2)}
.team-proposal-item .button-row{flex-wrap:wrap;align-items:center;gap:8px}
.team-proposal-item .button-row .hint{flex-basis:100%;margin:0}

/* Reports: neutral KPI surfaces, subtle grid lines, and one Starmy chart accent. */
.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:1px solid var(--garis);background:var(--bg-surface)}
.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:16px}
.lp-buku-kepala h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.lp-buku-kepala p{font-size:var(--font-size-sm);color:var(--tinta-3)}
.lp-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.lp-angka>div{padding:18px 20px;border:1px solid var(--garis);border-radius:var(--radius-lg);background:var(--permukaan-2);display:flex;flex-direction:column;gap:6px}
.lp-angka dt{font-size:12px;font-weight:600;color:var(--tinta-2);letter-spacing:.01em}
.lp-angka dd{margin:0}
.lp-angka .lp-nilai{margin:2px 0 0;font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.035em;color:var(--tinta)}
.lp-angka .na{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--tinta-3)}
.lp-kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.lp-catat{font-size:12px;color:var(--tinta-3)}
.lp-banding{font-size:11px;font-weight:600;color:var(--hutan-teks);background:var(--permukaan);padding:2px 8px;border-radius:999px;border:1px solid var(--garis)}
.lp-kaki{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:1px solid var(--garis)}
.lp-ket{margin:-2px 0 10px;font-size:var(--font-size-sm);color:var(--tinta-2)}
.lp-na{display:flex;align-items:center;gap:8px;padding:12px 0;font-size:var(--font-size-base);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:var(--font-size-xs);color:var(--tinta-2)}
.lp-legenda li{display:inline-flex;align-items:center;gap:6px}
.lp-k{width:10px;height:10px;border-radius:var(--radius-sm)}
.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:var(--font-size-sm);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:var(--font-size-base);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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.lp-daftar small{color:var(--tinta-3)}
.lp-daftar .truncate{display:block}
.lp-ref{margin-left:8px;font-weight:var(--font-weight-medium);color:var(--tinta-3)}
.lp-kunyit{color:var(--kunyit)}
.lp-dari{font-weight:var(--font-weight-semibold);color:var(--tinta-2)}
.lp-operasi{margin-top:24px}
.lp-operasi.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-base)}
.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:var(--font-size-2xl)}
 .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}
}
.lp .lp-buku{border:1px solid var(--jalur-garis);border-radius:var(--radius-xl);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:var(--radius-xl);padding:24px}
.lp .bagian-judul{border-bottom:1px solid var(--garis);padding-bottom:16px;margin-bottom:16px}
.lp .bagian-judul h2{font-size:var(--font-size-lg);line-height:24px;font-weight:var(--font-weight-semibold)}
.lp .lp-buku-kepala h2{font-size:var(--font-size-lg);line-height:24px;font-weight:var(--font-weight-semibold)}
@media(max-width:760px){
 .lp .lp-kolom>section{padding:20px}
 .lp .lp-buku{padding:20px}
}

/* Daily workspace: compact case list and Starmy activity with neutral surfaces. */
.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:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--tinta-3)}
.hari-ini h1{font-size:var(--font-size-2xl);line-height:1.08;font-weight:var(--font-weight-semibold);letter-spacing:-.025em}
.hari-ini h1:focus{outline:none}
.beres-mode h1{font-size:var(--font-size-2xl)}
.kepala-sub{margin-top:10px;max-width:56ch;font-size:var(--font-size-lg);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:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}
.catatan-batas{margin:-2px 0 10px;font-size:var(--font-size-sm);color:var(--tinta-2)}
.papan{margin:0;padding:0;list-style:none;border-top:1px solid var(--garis)}
.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:var(--font-weight-normal)}
.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:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
.kasus-tunggu .angka{font-size:var(--font-size-2xl);line-height:.95;font-weight:var(--font-weight-semibold);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:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.kasus-alasan{margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:var(--font-size-base);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:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.label-kecil{margin-bottom:8px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);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:var(--radius-lg);font-size:var(--font-size-base);line-height:1.45}
.gelembung.masuk{align-self:flex-start;background:var(--bubble-incoming);border:1px solid var(--garis);border-top-left-radius:var(--radius-sm);border-color:transparent}
.gelembung.dari-starmy{align-self:flex-end;background:var(--bubble-outgoing);border-top-right-radius:var(--radius-sm)}
.gelembung.dari-tim{align-self:flex-end;background:var(--bubble-outgoing);border-top-right-radius:var(--radius-sm)}
.gel-penulis{display:flex;align-items:center;gap:5px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--tinta-2)}
.gel-isi{white-space:pre-wrap;overflow-wrap:anywhere}
.gel-jam{align-self:flex-end;font-size:var(--font-size-xs);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:var(--font-size-xs);line-height:1.5;color:var(--tinta-3)}
.tindak{margin-top:8px}
.daftar-tindak{margin:0;padding:0;list-style:none;border-top:1px solid var(--garis)}
.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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.baris-tindak small{font-size:var(--font-size-sm);color:var(--tinta-3)}
.bt-waktu{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.kosong-kecil{padding:12px 0 0;border-top:1px solid var(--garis);font-size:var(--font-size-base);color:var(--tinta-2)}
.catatan-data{margin-top:28px;font-size:var(--font-size-xs);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:var(--font-size-xl);line-height:1.15;font-weight:var(--font-weight-semibold)}
.js-status{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--font-size-sm);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:var(--font-weight-semibold);color:var(--merah)}
.js-putus p+p{margin:4px 0 12px;font-size:var(--font-size-sm);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:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.js-serah strong{font-size:var(--font-size-2xl);line-height:1;font-weight:var(--font-weight-semibold);color:var(--kunyit)}
.js-bagian{margin-top:28px}
.js-bagian h3{margin-bottom:12px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.js-lead{margin:0 0 16px;max-width:52ch;font-size:var(--font-size-base);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-family:var(--font-geist-sans-stack);font-variation-settings:normal;font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--jalur-angka)}
.buku-besar dt{grid-column:2;font-size:var(--font-size-base);color:var(--tinta-2)}
.selisih{display:block;margin-top:1px;font-size:var(--font-size-xs);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:var(--font-size-2xl)}
.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:var(--font-size-sm);color:var(--tinta-2)}
.bagi-teks strong{font-size:var(--font-size-base);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:var(--radius-full);background:var(--tinta-3)}
.lm-judul{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.lm-ket{margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--font-size-sm);color:var(--tinta-2);overflow-wrap:anywhere}
.linimasa time{font-size:var(--font-size-xs);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:var(--font-size-base);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:var(--font-size-2xl)}
}
@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:var(--font-size-2xl)}
 .kasus-kepala{grid-template-columns:58px minmax(0,1fr);gap:12px}
 .kasus-kepala>svg{display:none}
 .kasus-tunggu .angka{font-size:var(--font-size-2xl)}
 .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:var(--font-size-2xl)}
 .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)}
}
.daily-card{border:1px solid var(--garis);border-radius:var(--radius-xl);background:var(--permukaan);min-width:0;overflow:hidden}
.daily-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--garis)}
.daily-card-head h2{font-size:var(--font-size-lg);line-height:24px;font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:10px}
.daily-card-body{padding:20px 24px;line-height:20px}
.hari-ini.daily-dashboard{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}
.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:var(--font-size-sm);line-height:18px;font-weight:var(--font-weight-semibold);color:var(--tinta-3)}.daily-dashboard h1{margin:0;font-size:var(--font-size-2xl);line-height:36px;font-weight:var(--font-weight-semibold);letter-spacing:-.015em}.daily-dashboard .kepala-sub{font-size:var(--font-size-base);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:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.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:var(--font-size-xs);line-height:16px;color:var(--tinta-3)}.daily-dashboard .kasus-nama{font-size:var(--font-size-base)}.daily-dashboard .kasus-baris .badge{font-size:var(--font-size-xs)}.daily-dashboard .kasus-alasan{display:block!important;font-size:var(--font-size-sm);line-height:18px;margin-top:6px}.daily-wait{position:absolute;top:16px;right:24px;display:inline-flex;gap:4px;align-items:center;font-size:var(--font-size-xs);color:var(--kunyit);font-weight:var(--font-weight-semibold);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:var(--font-size-base)}.daily-dashboard .baris-tindak small{font-size:var(--font-size-xs)}.daily-dashboard .kosong-kecil{border:0;padding:20px 24px}.daily-dashboard .catatan-data{font-size:var(--font-size-xs);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:var(--font-size-sm);line-height:18px;color:var(--tinta-3)}.daily-work-stats dd{font-family:var(--font-geist-sans-stack);font-variation-settings:normal;font-size:32px;line-height:36px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:0}.daily-work .bagi-wadah{margin:0;padding:0 24px 20px}.daily-work .bagi-starmy{background:var(--brand-lime);border:0}.daily-work .bagi{background:var(--hutan)}.daily-work .bagi-teks{font-size:var(--font-size-xs);line-height:18px}.daily-work .bagi-teks strong{font-size:var(--font-size-xs)}.daily-security{display:flex;gap:8px;align-items:center;border-top:1px solid var(--garis);padding:16px 24px;font-size:var(--font-size-xs);color:var(--merah)}.daily-security .text-link{margin-left:auto}
@media(max-width:1180px) and (min-width:761px){.hari-ini.daily-dashboard{grid-template-columns:minmax(0,1fr) 320px;padding:24px;gap:16px}.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:760px){
 .hari-ini.daily-dashboard{display:flex;flex-direction:column;padding:20px 16px 88px;gap:20px}
 .hari-ini.daily-dashboard.beres-mode{display:flex;flex-direction:column;padding:20px 16px 88px;gap:20px}.daily-dashboard .jalur-kamu{width:100%}.daily-side{width:100%}.daily-side{margin:0}.daily-dashboard h1{font-size:var(--font-size-2xl);line-height:30px}.daily-dashboard .kepala-sub{font-size:var(--font-size-sm)}.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:var(--font-size-base)}.daily-dashboard .kasus-nama{font-size:var(--font-size-base)}.daily-dashboard .kasus-alasan{font-size:var(--font-size-xs)}.daily-dashboard .baris-tindak{padding:16px}.daily-dashboard .bt-waktu{font-size:var(--font-size-xs)}.daily-work-stats{padding:20px}.daily-card-head{padding:16px 20px}.daily-card-body{padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){.daily-dashboard{transition:none}}

.daily-stats-source{display:flex;align-items:center;gap:6px;max-width:160px;font-size:var(--font-size-xs);line-height:16px;color:var(--tinta-3)}.daily-stats-source svg{flex:none}.daily-work .daily-card-head h2{font-size:var(--font-size-lg);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:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
@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}}
@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}}.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:200px}
@media(max-width:1000px){.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:24px}}
@media(max-width:760px){.daily-dashboard .kasus.needs-assignment .kasus-kepala{padding-right:16px}}
.daily-card-body{padding:16px 24px}

@media(max-width:760px){
 .daily-card-body{padding:16px}
}
.hari-ini.daily-dashboard{align-content:start}
.daily-dashboard .jalur-kamu>.tindak:first-child{margin-top:0}

/* Mulai di sini on Hari ini: business admins see the next setup step until every step is done. */
.daily-dashboard .daily-setup{margin-bottom:24px}
.daily-setup .daily-setup-count{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--tinta-2)}
.daily-setup .daily-card-body{display:grid;gap:12px}
.daily-setup .daily-card-body p{margin:0;color:var(--tinta-2)}
.daily-setup progress{width:100%;height:7px;border:0;border-radius:var(--radius-full);overflow:hidden;accent-color:var(--accent);background:var(--bg-muted)}
.daily-setup progress::-webkit-progress-bar{background:var(--bg-muted)}
.daily-setup progress::-webkit-progress-value{background:var(--accent);border-radius:var(--radius-full)}
.daily-setup progress::-moz-progress-bar{background:var(--accent);border-radius:var(--radius-full)}

/* Mission Control Telemetry Strip & Live Status Pill */
.kepala-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.daily-live-pill{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;border:1px solid var(--garis);background:var(--permukaan);font-size:11px;font-weight:600;color:var(--tinta-2)}
.daily-live-pill.warn{background:var(--kunyit-lembut);border-color:var(--kunyit-garis);color:var(--kunyit)}
.daily-live-pill.bahaya{background:var(--merah-lembut);border-color:var(--merah-garis);color:var(--merah)}
.daily-telemetry-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:4px}
.telemetry-card{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow)}
.telemetry-card.highlight{background:linear-gradient(135deg,color-mix(in srgb,var(--sand) 14%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--forest) 28%,var(--border))}
.telemetry-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.telemetry-label .tanda-starmy{width:14px;height:14px}
.telemetry-value{font-family:var(--font-geist-sans-stack);font-variation-settings:normal;font-size:36px;line-height:1.05;font-weight:500;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.telemetry-value.warn{color:var(--warn)}
.telemetry-sub{font-size:12px;color:var(--muted2)}
@media(max-width:1100px){.daily-telemetry-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.daily-telemetry-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.telemetry-card{padding:14px 16px}.telemetry-value{font-size:28px}}


/* Account, search, team, and settings layouts. */
/* 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:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.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:var(--font-size-base)}
.pilihan small{font-size:var(--font-size-sm);color:var(--tinta-2)}

/* Pencarian cepat (Ctrl/⌘ K). Satu indikator fokus di sekeliling kolom. */
.cmdk-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:10dvh 20px 20px;background:var(--latar-modal);backdrop-filter:blur(3px)}
.cmdk{width:min(680px,100%);max-height:min(640px,80dvh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--garis);border-radius:18px;background:var(--melayang);color:var(--tinta);box-shadow:var(--bayang-3);animation:muncul-pop var(--sedang) var(--lengkung)}
.cmdk-head{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--garis);flex:none}
.cmdk-input{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0 14px;border:1px solid var(--garis-input);border-radius:10px;color:var(--tinta-3);background:var(--permukaan)}
.cmdk-input>svg{flex:none}
.cmdk-input input,.cmdk-input input:hover,.cmdk-input input:focus,.cmdk-input input:focus-visible{flex:1;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:var(--font-size-base);color:var(--tinta)}
.cmdk-input:focus-within{border-color:var(--fokus);box-shadow:0 0 0 1px var(--fokus)}
.cmdk-close{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--garis);border-radius:10px;background:var(--permukaan);color:var(--tinta-3)}
.cmdk-close:hover{background:var(--sorot);color:var(--tinta)}
.cmdk-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;scroll-padding:12px}
.cmdk-group+.cmdk-group{margin-top:12px;padding-top:12px;border-top:1px solid var(--garis)}
.cmdk-group-title{display:block;padding:6px 12px 10px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:18px;color:var(--tinta-3)}
.cmdk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px;border:0;border-radius:10px;background:transparent;color:var(--tinta);font-weight:var(--font-weight-normal);text-align:left;text-decoration:none;cursor:pointer}
.cmdk-row:hover,.cmdk-row.is-cursor{background:var(--sorot);text-decoration:none}
.cmdk-row:focus-visible{outline-offset:-2px}
.cmdk-mark{width:36px;height:36px;display:grid;place-items:center;flex:none;border:1px solid var(--garis);border-radius:10px;background:var(--permukaan-2);color:var(--tinta-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}
.cmdk-mark.is-person{border-radius:50%}
.cmdk-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:20px}
.cmdk-text>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-text strong{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}
.cmdk-text small{font-size:var(--font-size-sm);color:var(--tinta-3)}
.cmdk-aside{max-width:112px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs);color:var(--tinta-3)}
.cmdk-open{flex:none;width:18px;visibility:hidden;color:var(--tinta-3);font-size:18px;text-align:center}
.cmdk-row.is-cursor .cmdk-open,.cmdk-row:focus-visible .cmdk-open{visibility:visible}
.cmdk mark{padding:0 1px;border-radius:3px;background:var(--jalur-garis);color:inherit}
.cmdk-empty{padding:48px 24px;text-align:center;font-size:var(--font-size-base);color:var(--tinta-2)}
.cmdk-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 20px;border-top:1px solid var(--garis);font-size:var(--font-size-xs);color:var(--tinta-3);background:var(--permukaan-2);flex:none}
.cmdk-shortcuts{display:flex;gap:16px;flex:none}
.cmdk-shortcuts>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cmdk-foot kbd{min-width:20px;line-height:18px;text-align:center;background:var(--permukaan);box-shadow:none}
.cmdk-scope{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.cmdk-backdrop{padding:12px}.cmdk{max-height:calc(100dvh - 24px);border-radius:14px}.cmdk-head{gap:10px;padding:14px}.cmdk-input{gap:8px;padding:0 10px}.cmdk-input input{font-size:16px}.cmdk-close{width:40px;height:40px}.cmdk-body{padding:8px}.cmdk-row{gap:10px;padding:12px 10px}.cmdk-aside,.cmdk-open,.cmdk-shortcuts{display:none}.cmdk-foot{min-height:42px;padding:10px 18px}}

/* Tim & akses */
.tm{max-width:960px}
.tm-daftar li{display:grid;grid-template-columns:40px minmax(0,1fr) auto 80px;align-items:center;gap:12px 16px;padding:14px 0;border-bottom:1px solid var(--garis)}
/* The last column is kept for Kelola, so the badges line up on members this account cannot manage too. */
.tm-daftar li>.btn{justify-self:end}
.tm-daftar .avatar{width:40px;height:40px;background:var(--sorot-kuat)}
.tm-daftar strong{display:block;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);overflow-wrap:anywhere}
.tm-peran{display:block;font-size:var(--font-size-sm);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:var(--font-size-2xl);font-weight:var(--font-weight-semibold);letter-spacing:-.02em}
.halaman-maaf p{max-width:46ch;font-size:var(--font-size-lg);color:var(--tinta-2)}
.halaman-maaf .btn{margin-top:8px;min-height:44px}
/* Cara melayani: two boxes, "Cara membalas" (the business's own choices) and "Diatur tim Starmy" (kept by the team). Each
   row is the label (and what it does) on the left, the choice or the value on the right; a footer says whether the choices
   are saved, or holds the link out. */
.service-page .service-box{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius-xl);overflow:hidden}
.service-page .service-box+.service-box{margin-top:24px}
.service-page .service-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--garis)}
.service-page .service-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--font-size-lg);line-height:24px}
.service-page .service-head h2>svg{color:var(--tinta-2)}
.service-page .service-head p{margin:4px 0 0;max-width:62ch;font-size:var(--font-size-sm);line-height:20px;color:var(--tinta-2)}
.service-page .service-head>.btn{flex:0 0 auto}
.service-page .service-rows{margin:0}
.service-page .service-rows>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px 32px;padding:16px 24px;border-bottom:1px solid var(--garis)}
.service-page .service-rows>div:last-child{border-bottom:0}
.service-page .service-rows dt{font-size:var(--font-size-base);line-height:22px;font-weight:var(--font-weight-semibold);color:var(--tinta)}
.service-page .service-rows dt>small{display:block;margin-top:2px;max-width:60ch;font-size:var(--font-size-sm);line-height:20px;font-weight:var(--font-weight-normal);color:var(--tinta-2)}
.service-page .service-rows dt>small.service-missing{color:var(--warn)}
.service-page .service-rows dd{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--font-size-base);line-height:22px;color:var(--tinta-2)}
.service-page .service-rows dd>strong,.service-page .service-value{color:var(--tinta);font-weight:var(--font-weight-semibold)}
.service-page .service-choices>div{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.service-page .service-choices dd{align-items:flex-end}
.service-page .service-handover{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.service-page .service-handover li,.service-page .service-steps li{display:flex;flex-direction:column;gap:2px}
.service-page .service-handover b,.service-page .service-steps b{color:var(--tinta);font-weight:var(--font-weight-semibold)}
.service-page .service-steps{margin-top:8px}
.service-page .service-steps>summary{width:max-content;cursor:pointer;color:var(--primary);font-weight:var(--font-weight-semibold)}
.service-page .service-steps>ol{margin:12px 0 0;padding-left:20px;display:grid;gap:12px}
.service-page .service-steps li{display:list-item;padding-left:4px}
.service-page .service-steps li>b,.service-page .service-steps li>span{display:block}
.service-page .service-foot{display:flex;flex-direction:column;gap:12px;padding:14px 24px;border-top:1px solid var(--garis);background:var(--permukaan-2)}
.service-page .service-foot>.notice{margin:0}
.service-page .service-save-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:40px}
.service-page .service-save-state{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);line-height:20px;color:var(--tinta-2)}
.service-page .service-save[data-dirty] .service-save-state{color:var(--tinta);font-weight:var(--font-weight-semibold)}
.service-page .service-save .button-row{margin:0}
/* Tim & akses: a member's facts read as one quiet line (they are not buttons); the access table uses the page's words. */
.tm .tm-fakta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--font-size-sm);line-height:20px;color:var(--tinta-2)}
.tm .tm-fakta>span{display:inline-flex;align-items:center;gap:6px}
.tm .tm-fakta>.tm-bisa{color:var(--forest)}
.tm .tm-izin{margin-top:16px;padding:20px 24px}
.tm .tm-izin>h3{margin:0;font-size:var(--font-size-lg);line-height:24px}
.tm .tm-izin>p{margin:4px 0 16px}
.tm .tm-izin table{width:100%;font-size:var(--font-size-sm)}
.tm .tm-izin th:not(:first-child),.tm .tm-izin td:not(:first-child){text-align:center}
.tm .tm-daftar{border:1px solid var(--garis);border-radius:var(--radius-xl);background:var(--permukaan);overflow:hidden}
.tm .tm-daftar>li{padding:16px 24px}
.tm .tm-daftar>li:last-child{border-bottom:0}

@media(max-width:760px){
 .service-page .service-head{flex-direction:column;padding:16px 20px}
 .service-page .service-rows>div{grid-template-columns:minmax(0,1fr);padding:16px 20px}
 .service-page .service-choices>div{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
 .service-page .service-choices>div:has(.segmented){grid-template-columns:minmax(0,1fr)}
 .service-page .service-choices>div:has(.segmented) dd{align-items:flex-start}
 .service-page .service-foot{padding:12px 20px}
 .tm .tm-daftar>li{padding:16px}
}

/* Round 4, R4-C: requests to the Starmy team. "Minta ke tim Starmy" sits next to the text it answers; the list uses the
   team-proposal-* look in starmy.css and adds the Starmy team's answer under a request. */
.minta-starmy{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--font-size-sm);line-height:20px}
.minta-starmy>svg{flex-shrink:0;color:var(--hutan)}
.dikelola-platform .minta-starmy{margin-left:auto;flex-shrink:0}
.tm-owner-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.permintaan-jawaban{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--hutan);border-radius:var(--r-2);background:var(--permukaan-2)}
.permintaan-jawaban>small{color:var(--tinta-2)}
.permintaan-jawaban>p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.permintaan-jawab{margin-top:8px}

/* ============================================================================
   SpaceX / Linear Command Deck Global Polish
   ========================================================================== */
.page-heading .eyebrow{
 display:inline-flex;align-items:center;gap:6px;padding:3px 10px;margin-bottom:8px;
 border-radius:999px;background:color-mix(in srgb,var(--brand,#059669) 12%,transparent);
 color:var(--brand,#059669);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.page-heading h1{font-weight:800;letter-spacing:-.025em}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat-grid>.stat{
 padding:16px 18px;border:1px solid var(--garis);border-radius:16px;
 background:linear-gradient(180deg,var(--permukaan),color-mix(in srgb,var(--permukaan-2) 45%,var(--permukaan)));
 box-shadow:0 2px 10px rgba(15,23,42,.04);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.stat-grid>.stat:hover{transform:translateY(-1px);border-color:var(--garis-kuat);box-shadow:0 8px 22px rgba(15,23,42,.07)}
.stat-grid>.stat>span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.stat-grid>.stat>strong{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.chip{border-radius:999px;font-weight:600;transition:all .12s ease}
.chip[aria-pressed=true]{background:#090D16!important;color:#FFFFFF!important;border-color:#090D16!important;box-shadow:0 2px 8px rgba(9,13,22,.18)}
[data-theme=dark] .chip[aria-pressed=true]{background:#10B981!important;color:#090D16!important;border-color:#10B981!important}
.table-wrap{border-radius:16px;box-shadow:0 2px 10px rgba(15,23,42,.03)}

/* ============================================================================
   Starmy CRM — Data Screens Styles (Fase 3: Pelanggan, Produk & stok, Pesanan)
   Pola: Berbingkai (kartu radius 16, hairline, shadow lembut).
   ========================================================================== */

/* Toggle segmen Tabel | Pipeline atau Grid | List */
.seg {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button, .seg a {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  min-height: 36px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  text-decoration: none;
}
.seg button.on, .seg a.on, .seg button[aria-selected="true"], .seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Toolbars & Search */
.custtool, .otool, .prodtool {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.custtool .osearch {
  flex: 0 1 380px;
}
.prodtool .osearch {
  flex: 0 1 300px;
}
.osearch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 13px;
  min-height: 40px;
  color: var(--muted);
  flex: 0 1 320px;
  min-width: 180px;
}
.osearch:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--forest);
}
.osearch input {
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}
.ochips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 12px 0 2px;
  scrollbar-width: none;
}
.ochips::-webkit-scrollbar {
  display: none;
}
.ochips .qchip {
  flex: 0 0 auto;
}

/* Tabel Hairline & Hover */
.table.ctable, .table.otable, .table.ptable {
  width: 100%;
  border-collapse: collapse;
}
.table.ctable th, .table.otable th, .table.ptable th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table.ctable td, .table.otable td, .table.ptable td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.table.clickable tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.table.clickable tbody tr:hover td {
  background: var(--surface2);
}
.otable .r, .ctable .r {
  text-align: right;
}
.otable .items {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}
.qacts {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.otable tbody tr:hover .qacts, .otable tbody tr:focus-within .qacts {
  opacity: 1;
}
@media (hover: none) {
  .qacts {
    opacity: 1;
  }
}

/* Badges & Marks */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.mark.val {
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  color: color-mix(in srgb, var(--gold) 78%, #000);
}
.mark.risk {
  background: var(--danger-bg);
  color: var(--danger);
}
[data-theme="dark"] .mark.val {
  color: #E3C56A;
}

/* Progress bar kapasitas limit kredit */
.capbar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface2);
  overflow: hidden;
}
.capbar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--forest);
}
[data-theme="dark"] .capbar i {
  background: var(--forest-d);
}

/* Perlu Aksi Sekarang */
.card.perlu {
  margin-top: 14px;
  margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--warn) 38%, var(--border));
  background: color-mix(in srgb, var(--warn-bg) 52%, var(--surface));
  border-radius: 16px;
  padding: 16px 18px;
}
.perlurow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--warn) 22%, var(--border));
  padding: 11px 0 2px;
  margin-top: 11px;
}

/* Strip Statistik Pesanan (Order Segments) */
.osegs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.oseg {
  padding: 2px 18px;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.oseg:first-child {
  padding-left: 2px;
  border-left: 0;
}
.oseg .lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.oseg .num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 2px;
}
.oseg .cap {
  font-size: 12px;
  color: var(--muted);
}
.osync {
  display: flex;
  gap: 12px 28px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}
.livedot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
  flex: 0 0 auto;
}

/* Pipeline Pesanan */
.pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.pipe.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .pipe {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    padding-bottom: 12px;
  }
}
@media (max-width: 1180px) {
  .pipe.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .pipe.four {
    grid-template-columns: minmax(0, 1fr);
  }
}
}
.pcol {
  background: var(--surface2);
  border-radius: 14px;
  padding: 12px;
  min-height: 120px;
}
[data-theme="dark"] .pcol {
  background: #16181A;
}
.pcolhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pcolhead b {
  font-size: 13.5px;
}
.pcoltotal {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.pcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--muted2);
}
.pcard .prow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.pempty {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* Produk: Grid & Tiles */
.prodgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.pcardx {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
/* Product tiles: one neutral sand tint and Geist initials (Jewel Dijinakkan); no per-category colour blocks. */
.ptile {
  height: 100px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  color: var(--forest-d);
  background: color-mix(in srgb, var(--sand) 30%, var(--surface2));
  overflow: hidden;
}
.ptileinit {
  font-family: var(--font-geist-sans-stack);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.92;
}
.ptilesku {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  opacity: 0.85;
}
.ptilestatus {
  position: absolute;
  top: 10px;
  right: 10px;
}
.ptilestatus .pill {
  box-shadow: none;
}
.pbody {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Stepper Penyesuaian Stok */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface2);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}
.stepper button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 0;
}
.stepper button:hover {
  color: var(--forest);
}
.stepper b {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}

/* Modal Pesanan Dua Kolom */
#orderModal {
  width: min(880px, 94vw);
}
.ogrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 12px;
  align-items: start;
}
.ocol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.modalfoot {
  position: sticky;
  bottom: -20px;
  margin: 16px -20px -20px;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 2;
}

/* Modal Stepper Status */
.stepper-order {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.stepper-order .step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.stepper-order .step.done {
  color: var(--forest);
}
.stepper-order .step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
}
.stepper-order .step.done .dot {
  background: var(--forest);
  color: var(--pada-hutan);
  border-color: var(--forest);
}
.stepper-order .line {
  flex: 1;
  height: 2px;
  background: var(--border);
}
.stepper-order .line.done {
  background: var(--forest);
}

/* Timeline aktivitas terpadu */
.tl {
  position: relative;
  margin-top: 4px;
}
.tl:before {
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--border);
}
.tlrow {
  display: flex;
  gap: 12px;
  position: relative;
  padding: 8px 0;
  align-items: flex-start;
}
.tlico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--forest);
  flex: 0 0 auto;
  z-index: 1;
}
.tlico.ai {
  background: color-mix(in srgb, var(--lime) 25%, var(--surface));
  border-color: color-mix(in srgb, var(--forest) 30%, var(--border));
}
.tlico.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: #FDE68A;
}
.tlico.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #FECACA;
}

/* Rowlink & Link Buttons */
.rowlink {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s ease;
}
.rowlink:hover {
  background: var(--surface2);
}

/* Responsive Rules <= 700px */
@media (max-width: 700px) {
  .osegs {
    grid-template-columns: 1fr 1fr;
  }
  .oseg {
    padding: 10px 14px;
  }
  .oseg:nth-child(odd) {
    border-left: 0;
    padding-left: 2px;
  }
  .oseg:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
  .osearch {
    flex: 1 1 100%;
  }
  .pipe {
    grid-template-columns: 1fr;
  }
  .ogrid {
    grid-template-columns: 1fr;
  }
  #orderModal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modalfoot {
    border-radius: 0;
  }
  .otable td, .ctable td, .ptable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 7px 10px;
    text-align: right;
  }
  .otable td::before, .ctable td::before, .ptable td::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    text-align: left;
    flex: 0 0 auto;
  }
  .otable td.nolab, .ctable td.nolab, .ptable td.nolab {
    justify-content: flex-end;
  }
  .otable td.nolab::before, .ctable td.nolab::before, .ptable td.nolab::before {
    display: none;
  }
  .otable .items {
    max-width: 52vw;
  }
  .prodgrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .ptile {
    height: 76px;
  }
  .ptileinit {
    font-size: 26px;
  }
  .custtool .osearch, .prodtool .osearch {
    flex: 1 1 100%;
  }
}

/* Editorial KPI Band (Hari Ini) */
.statband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
/* Hari ini's band only: the shared Stat tiles (components/ui.tsx) keep their own layout. */
.statband .stat {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  padding: 18px 20px 16px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  min-width: 0;
  text-decoration: none;
  transition: background 0.12s ease;
}
.statband .stat:first-child {
  border-left: 0;
}
.statband .stat:hover {
  background: color-mix(in srgb, var(--surface2) 45%, transparent);
}
.statband .stat .lab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.statband .stat .wdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B45309;
  flex: 0 0 auto;
}
.statband .stat .num {
  display: block;
  font-family: var(--font-geist-sans-stack);
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variation-settings: normal;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.statband .stat.warn .num {
  color: #B45309;
}
.statband .stat .sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px;
}
[data-theme="dark"] .statband .stat.warn .num {
  color: #E3A94E;
}
[data-theme="dark"] .statband .stat .wdot {
  background: #E3A94E;
}
@media (max-width: 1024px) {
  .statband {
    grid-template-columns: 1fr 1fr;
  }
  .statband .stat:nth-child(odd) {
    border-left: 0;
  }
  .statband .stat:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 700px) {
  .statband .stat {
    padding: 14px 16px;
  }
  .statband .stat .num {
    font-size: 30px;
  }
}

/* Insights Fraunces KPI Numbers & Funnel */
.kpi-fraunces,
.kpi-num,
.lp-angka .lp-nilai {
  font-family: var(--font-geist-sans-stack);
  font-variation-settings: normal;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.funnel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.fbar {
  height: 14px;
  border-radius: 6px;
  min-width: 8px;
  transition: width 0.3s ease;
}

/* Fase 4: Review Screens (Follow-up, Daily Learning, Notes & Cases) */
.grid.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .grid.cols2 {
    grid-template-columns: 1fr;
  }
}

/* Follow-up card matching prototype */
.followup-proto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.followup-proto-card:hover {
  border-color: var(--muted2);
}
.followup-draf-box {
  margin-top: 10px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.followup-draf-box .draf-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Daily Learning inline proposal row */
.learn-row {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.learn-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.learn-row b {
  font-size: 13.5px;
  color: var(--text);
}
.learn-row .learn-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 3px 0 10px;
}

/* Notes & Cases cards */
.case-proto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.case-proto-card:hover {
  border-color: var(--muted2);
}
.case-proto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.case-proto-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}
.case-proto-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Fase 5: Broadcast Styles */
.bcsteps {
  display: flex;
  gap: 12px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.bcstep {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bcstep.on {
  color: var(--forest);
}
[data-theme="dark"] .bcstep.on {
  color: var(--forest-d);
}
.bcsel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.bcsel:hover {
  border-color: var(--muted2);
}
.bcsel.on {
  border-color: var(--forest);
  background: color-mix(in srgb, var(--forest) 6%, var(--surface));
}
[data-theme="dark"] .bcsel.on {
  border-color: var(--forest-d);
  background: color-mix(in srgb, var(--sand) 8%, var(--surface));
}
.waprev {
  background: color-mix(in srgb, #25D366 8%, var(--surface2));
  border-radius: 14px;
  padding: 14px;
}
.wabub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 10px 12px;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  max-width: 360px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.wabub .wt {
  display: block;
  text-align: right;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
}
.tplvar {
  background: color-mix(in srgb, var(--forest) 12%, transparent);
  color: var(--forest);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}
[data-theme="dark"] .tplvar {
  background: color-mix(in srgb, var(--sand) 15%, transparent);
  color: var(--forest-d);
}
.bcfunnel {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bcfrow {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bcfrow .bl {
  width: 70px;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
}
.bcfbar {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: var(--surface2);
  overflow: hidden;
  min-width: 40px;
}
.bcfbar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.bcfrow .bn {
  width: 140px;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* Pesanan table: order numbers stay on one line and the PIC picker keeps a readable width. */
.otable td[data-label] .mono {
  white-space: nowrap;
}
.otable td select {
  min-width: 132px;
  max-width: 180px;
}

/* Langganan (components/billing/Langganan.tsx): status, the invoice to pay, plan cards and invoice history. */
.lg{display:flex;flex-direction:column;gap:16px;max-width:1180px}
/* The page spaces its sections with gap; panels next to each other keep no extra margin (as in a grid of plans). */
.lg .panel{margin-top:0}
.lg-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.lg-kepala h1{margin:0 0 4px;font-size:var(--font-size-2xl)}
.lg-kepala p{margin:0;max-width:62ch}
.lg-pilih-bisnis{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-sm)}
.lg-pilih-bisnis select{min-width:200px}
.lg-status{display:flex;flex-direction:column;gap:14px}
.lg-status-baris{display:flex;align-items:flex-start;gap:14px}
.lg-ikon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--forest) 14%,var(--permukaan));color:var(--forest)}
.lg-status-isi{flex:1;min-width:0}
.lg-status-judul{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lg-status-judul h2{margin:0;font-size:var(--font-size-xl)}
.lg-status-isi p{margin:4px 0 0;color:var(--tinta-2)}
.lg-pakai{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.lg-pakai li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--garis);border-radius:10px}
.lg-pakai span{font-size:var(--font-size-xs);color:var(--tinta-2)}
.lg-pakai small{color:var(--tinta-2);font-size:var(--font-size-xs)}
/* Conversation quota: the meter turns amber from 80% and red when used up */
.lg-meter{display:block;height:6px;margin-top:4px;border-radius:999px;background:var(--garis);overflow:hidden}
.lg-meter span{display:block;height:100%;border-radius:inherit;background:var(--forest)}
.lg-kuota-pakai.hampir .lg-meter span{background:var(--kunyit)}
.lg-kuota-pakai.habis .lg-meter span{background:var(--danger)}
.lg-kuota-pakai.habis b{color:var(--danger)}
.lg-tagihan{display:flex;flex-direction:column;gap:12px;border-color:color-mix(in srgb,var(--gold) 50%,var(--garis))}
.lg-tagihan-kepala{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.lg-tagihan-kepala h2{margin:2px 0;font-size:var(--font-size-2xl)}
.lg-tagihan-kepala p{margin:0}
.lg-transfer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:12px;border-radius:10px;background:var(--permukaan-2)}
.lg-transfer>div{display:flex;flex-direction:column;min-width:0}
.lg-transfer span{font-size:var(--font-size-xs);color:var(--tinta-2)}
.lg-transfer b{overflow-wrap:anywhere}
.lg-dicek{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--tinta-2)}
.lg-klaim{display:flex;flex-direction:column;gap:8px;max-width:520px}
.lg-paket-blok{display:flex;flex-direction:column;gap:12px}
.lg-paket-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px}
.lg-paket-kepala h2{margin:0 0 2px;font-size:var(--font-size-xl)}
.lg-paket-kepala p{margin:0;max-width:62ch}
.lg-paket{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;align-items:stretch}
.lg-plan{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px}
.lg-plan.saran{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest) inset}
.lg-plan.kini{background:color-mix(in srgb,var(--forest) 6%,var(--permukaan))}
.lg-plan-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.lg-plan-h h3{margin:0;font-size:var(--font-size-lg)}
.lg-plan p{margin:0}
.lg-harga{display:flex;align-items:baseline;gap:4px}
.lg-harga b{font-size:var(--font-size-xl)}
.lg-harga span{color:var(--tinta-2);font-size:var(--font-size-sm)}
.lg-kuota{font-weight:600;color:var(--forest)}
.lg-plan ul{display:flex;flex:1;flex-direction:column;gap:6px;margin:4px 0;padding:0;list-style:none;font-size:var(--font-size-sm)}
.lg-plan li{display:flex;align-items:flex-start;gap:6px}
.lg-plan li svg{flex:none;margin-top:3px;color:var(--forest)}
.lg-total{margin-top:auto}
.lg-plan .btn{width:100%;justify-content:center}
.lg-ganti{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lg-setuju{display:flex;align-items:flex-start;gap:10px;font-size:var(--font-size-sm);line-height:1.5}.lg-setuju input{margin-top:3px;flex:none}.lg-setuju a{color:var(--accent);text-decoration:underline}
.lg-riwayat h2{margin:0 0 10px;font-size:var(--font-size-lg)}
/* A trial coupon from the Starmy team: entered above the plan cards, and the next step once it runs */
.lg-kupon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px;border:1px dashed color-mix(in srgb,var(--forest) 45%,var(--garis));border-radius:10px;background:color-mix(in srgb,var(--forest) 4%,var(--permukaan))}
.lg-kupon>div{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}
.lg-kupon input{flex:1 1 180px;min-width:0;max-width:280px;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-mono,ui-monospace,monospace)}
.lg-kupon input::placeholder{text-transform:none;letter-spacing:0;font-family:var(--font-body-stack,system-ui,sans-serif)}
.lg-lanjut{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:var(--permukaan-2);font-size:var(--font-size-sm)}
.lg-lanjut svg{flex:none;margin-top:3px;color:var(--forest)}
/* The platform owner's panel on a business's page (components/business/BusinessSubscription.tsx). */
.lg-admin-tagihan{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.lg-admin-tagihan li{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--garis);border-radius:10px}
.lg-admin-baris{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.lg-admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px;align-items:end}
.lg-admin-judul{margin:0;font-size:var(--font-size-sm);font-weight:700;color:var(--danger)}
@media (max-width:700px){
 .lg-transfer{grid-template-columns:1fr}
 .lg-transfer .btn{justify-self:start}
 .lg-paket-kepala .segmented{width:100%}
}
/* components/billing/BillingBanner.tsx, above the page */
.lg-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--garis));border-radius:12px;background:color-mix(in srgb,var(--gold) 10%,var(--permukaan))}
.lg-banner p{flex:1 1 260px;margin:0}
.lg-banner.mendesak{border-color:color-mix(in srgb,var(--danger) 45%,var(--garis));background:color-mix(in srgb,var(--danger) 8%,var(--permukaan))}
/* Online payment on the open invoice, and the notice after returning from the gateway's page */
.lg-online{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--garis);border-radius:10px}
.lg-online>div:first-child{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}
.lg-atau{margin:0}
.lg-kembali{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--garis);border-radius:12px;background:var(--permukaan-2)}
.lg-kembali p{flex:1 1 260px;margin:0}
.lg-kembali.menunggu{border-color:color-mix(in srgb,var(--forest) 45%,var(--garis))}


.followup-badge{background:#d92d3b;color:#fff!important;border-radius:5px;min-width:22px;display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:18px}
.header-tabs a{gap:8px}.sl{width:100%;max-width:none;min-width:0}.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:var(--radius-lg);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:var(--font-size-2xl);line-height:1.2}.followup-stat.pending strong{color:var(--danger)}.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:var(--radius-md);cursor:pointer}.followup-filters button.active{background:var(--panel);border-color:var(--line);font-weight:var(--font-weight-medium)}.followup-toolbar .search-field{min-width:230px;flex:0 1 310px}.followup-analysis{margin:12px 0}.followup-analysis summary{cursor:pointer;font-size:var(--font-size-sm);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:var(--radius-lg);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:var(--radius-md);background:var(--panel-2,var(--panel));font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.followup-card-title{flex:1;min-width:0}.followup-card-title h2{font-size:var(--font-size-sm);color:var(--muted);margin:0 0 4px}.followup-card-title p{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0;overflow-wrap:anywhere}.followup-card .sl-ringkas{font-size:var(--font-size-lg);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:var(--font-size-sm);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:var(--font-weight-semibold)}.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:var(--font-weight-semibold)}.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:var(--font-size-base);line-height:1.6}.followup-reason p{margin:5px 0 0}.followup-card textarea{min-height:170px;font-size:var(--font-size-base);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:var(--danger);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:var(--danger)}
@media(max-width:760px){.followup-overview{gap:8px;margin:18px 0}.followup-stat{padding:12px;gap:6px}.followup-stat>span{font-size:var(--font-size-xs)}.followup-stat strong{font-size:var(--font-size-2xl)}.followup-stat small{font-size:var(--font-size-xs)}.followup-toolbar .search-field{flex:1 1 100%;min-width:0}.followup-filters{width:100%;gap:2px}.followup-filters button{padding:8px;font-size:var(--font-size-xs)}.sl-kartu.followup-card{padding:16px}.followup-card .sl-ringkas{font-size:var(--font-size-base)}.followup-actions .btn{flex:1 1 42%;min-height:44px}.thread-delete{min-width:44px;min-height:44px}.followup-card .badge{font-size:var(--font-size-xs)}.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:var(--font-size-xs);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:var(--font-size-sm);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:var(--font-size-sm);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:var(--font-size-xs);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}}
.learning-permission{display:flex;gap:12px;align-items:flex-start}.learning-permission p{font-size:var(--font-size-sm)}.sl-rekap{padding:0;margin:16px 0;border:0;background:none;font-size:var(--font-size-xs)}.sl-rekap h2{font-size:var(--font-size-base)}.sl-rekap>.field{max-width:200px}.sl-rekap>.field input{min-height:32px}.sl-runs{font-size:var(--font-size-xs);margin-bottom:16px}.sl-kartu{border:1px solid var(--garis);border-radius:var(--radius-xl);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{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--tinta);margin:0}.sl-kartu .followup-card-title h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--tinta);margin:0}.sl-kartu .followup-card-title p{font-size:var(--font-size-xs);line-height:18px;color:var(--tinta-3);font-weight:var(--font-weight-normal);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:var(--font-size-xs);min-height:32px;padding:4px 24px;color:var(--tinta-3);font-weight:var(--font-weight-medium)}.sl-kartu .followup-review-body{padding:0 24px 16px;gap:12px}.sl-kartu .followup-actions{border:0;padding:0}.sl-kartu textarea{font-size:var(--font-size-base);line-height:20px;min-height:88px}.sl-halaman{font-size:var(--font-size-xs)}.sl-sumber{border-left:2px solid var(--garis-input);padding:8px 12px;font-size:var(--font-size-sm);line-height:20px}
.followup-workspace{max-width:none}.followup-overview{display:none}.mode-tindak-lanjut{background:var(--info-lembut);border-color:var(--accent-border);color:var(--info);padding:16px;font-size:var(--font-size-sm);line-height:20px}.followup-filters{background:var(--sorot);padding:3px;border-radius:var(--radius-lg)}.followup-filters button{font-size:var(--font-size-sm);min-height:30px}.followup-filters button.active{border-color:transparent;border-radius:var(--radius-md);box-shadow:var(--bayang-1)}.followup-workspace .sl-rekap>h2{display:none}.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:var(--radius-xl);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{grid-column:2}.followup-pick>span:not(.avatar){grid-column:2}.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:var(--radius-xl);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:var(--font-size-base);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:var(--font-size-sm)}.followup-reason{padding:0;border:0;background:none;font-size:var(--font-size-sm)}.followup-card textarea{min-height:126px}
@media(max-width:1000px){.followup-split{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:760px){
 .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{padding:16px}.followup-card .sl-kartu-kepala{padding:16px}.sl-kartu .followup-card-title h2{font-size:var(--font-size-base)}.followup-card>.sl-ringkas{margin-left:16px;margin-right:16px}.followup-card>.followup-meta{margin-left:16px;margin-right:16px}.followup-card .followup-actions .btn{font-size:var(--font-size-xs);flex:1 1 auto}.sl-halaman{flex-wrap:wrap}.learning-permission{font-size:var(--font-size-sm)}
}.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:var(--font-size-base);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:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.followup-due.late{color:var(--merah)}.followup-context-reason{font-size:var(--font-size-sm);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:var(--font-size-sm)}.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){.followup-card .sl-kartu-kepala{flex-wrap:wrap}.followup-card .sl-kartu-kepala>.btn{margin-left:68px}}
@media(max-width:760px){.followup-context-reason{padding-left:16px;padding-right:16px}.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}}.followup-pick>.avatar{display:inline-grid;place-items:center;font-size:var(--font-size-base);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{color:var(--tinta-2);background:var(--sorot)}.followup-filters .followup-badge{color:var(--tinta-2);background:var(--sorot)}.followup-workspace{display:flex;flex-direction:column;flex:1;min-height:0}.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:var(--font-size-sm);padding:0}.followup-card .followup-review-body>.advanced>summary .tanda-starmy{width:16px;height:16px;border-radius:var(--radius-full);background:var(--ai-bg);padding:2px;stroke:none;fill:var(--ai-fg)}.sl:not(.followup-workspace){display:flex;flex-direction:column;flex:1;min-height:0}.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:var(--font-size-base);line-height:20px}.sl:not(.followup-workspace) .learning-schedule{margin:0;font-size:var(--font-size-xs);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:var(--font-size-xs)}.sl:not(.followup-workspace)>.sl-rekap>.followup-analysis{width:100%;margin:0}.learning-completed{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-xs);line-height:20px;border-radius:var(--radius-full);padding:0 8px;background:var(--hutan-lembut);color:var(--hutan-teks)}.learning-permission{border:1px solid var(--accent-border);line-height:18px;padding:12px 16px}.learning-permission p{font-size:var(--font-size-xs);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}
@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}}.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:var(--font-size-sm);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:var(--radius-md)}.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:var(--radius-lg);box-shadow:var(--bayang-2)}.sl:not(.followup-workspace) .learning-analysis-body p+p{margin-top:12px}.sl-kartu:not(.followup-card) .followup-review-body>.starmy-check{margin-top:0}
@media(max-width:760px){.sl:not(.followup-workspace) .learning-analysis-body{position:fixed;left:16px;right:16px;top:112px;width:auto;max-height:calc(100dvh - 192px);overflow:auto}}
.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:var(--font-size-xs);line-height:16px;color:var(--tinta-3)}
.sl-footer .sl-halaman{display:flex;align-items:center;gap:12px;margin:0;padding:0;font-size:var(--font-size-xs);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}

@media(max-width:760px){
 .sl-footer .sl-halaman{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap}
 .sl-footer .sl-result-count{margin-left:0}
}
.learning-permission>svg{flex-shrink:0}
.alasan-gate>svg{flex-shrink:0}
.learning-permission{border:1px solid var(--accent-border);border-radius:var(--radius-lg);padding:12px 16px}
.sl-results{order:3;flex:1;min-height:180px;overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain;scrollbar-gutter:stable}
.sl-results>.empty{flex:1;padding:var(--space-8) var(--space-4)}
.sl-results>.notice{flex:none;margin-top:var(--space-4);margin-bottom:0}
.sl-results>.followup-list:empty{display:none}
.sl-results>.followup-split{min-height:100%;align-items:stretch}
.sl-results .followup-index{align-self:start;top:0}
.sl-results .followup-detail>.sl-kartu{min-height:100%;margin:0}
.sl>.sl-footer{order:5;flex:none}
.sl>.sl-runs{flex:none;max-height:min(32dvh,320px);overflow:auto}
.sl>.page-heading{align-items:flex-start}
.sl>.page-heading,.sl>.notice,.sl>.mode-tindak-lanjut,.sl>.followup-toolbar,.sl>.sl-rekap,.sl>.sl-runtime{flex:none}
.sl .followup-list{gap:24px;align-content:start}
.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}
@media(max-width:760px){
 .learning-shell .sl{flex:1 0 auto;min-height:100%}
 .sl-results{overflow:visible;min-height:240px;scrollbar-gutter:auto}
 .sl-results>.empty{padding:var(--space-6) var(--space-4)}
 .sl-results>.followup-split{min-height:0}
 .sl>.sl-runs{max-height:none;overflow:visible}
 .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}
 .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}
}
/* Usulan follow-up: automatic sending and the hours after the customer's last message. */
.followup-auto{margin:0 0 16px;padding:16px;border:1px solid var(--garis);border-radius:var(--r-2);background:var(--permukaan)}
.followup-auto-head{display:flex;align-items:flex-start;gap:12px}
.followup-auto-head>svg{flex:none;margin-top:2px;color:var(--tinta-3)}
.followup-auto-head strong{display:block;font-size:var(--font-size-base)}
.followup-auto-head p{margin:2px 0 0;font-size:var(--font-size-sm);color:var(--tinta-2)}
.followup-auto-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin-top:12px}
.followup-auto-body .field{max-width:220px}
.followup-auto>.notice{margin:12px 0 0}
.followup-auto>.hint{margin:8px 0 0}
.sl>.followup-auto{flex:none}