:root {
  --bg: #FAF7F5;
  --surface: #FFFFFF;
  --surface-2: #F5F0EE;
  --ink: #1F120F;
  --ink-muted: #6f5d5d;
  --line: #E8DEDC;

  --crimson-start: #1A0000;
  --crimson-mid: #4A0700;
  --crimson: #8B0000;
  --crimson-soft: #FBEAE8;
  --crimson-ink: #8B0000;

  --gold: #FFC400;
  --gold-deep: #D99A00;
  --gold-soft: #FFF3D6;
  --gold-ink: #D99A00;

  --stat-default: #8B0000;
  --stat-warning: #E8720C;
  --stat-urgent: #C0392B;
  --stat-ready: #1F9D55;

  --st-konsep-bg: #F0F0F0;                 --st-konsep-ink: #6f5d5d;
  --st-mockup-bg: #F3E8FE;                 --st-mockup-ink: #7B2FBE;
  --st-proses-bg: #FFF3E6;                 --st-proses-ink: #E8720C;
  --st-done-bg: #E7F6EC;                   --st-done-ink: #1F9D55;
  --st-trialadmin-bg: #E3F2FD;             --st-trialadmin-ink: #1565C0;
  --st-trialklien-bg: rgba(255,196,0,.18); --st-trialklien-ink: #D99A00;
  --st-revisi-bg: #FBEAE8;                 --st-revisi-ink: #8B0000;
  --st-finished-bg: #1F9D55;               --st-finished-ink: #FFFFFF;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
}

.banner {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.progress-stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--stat-default);
  border-radius: 10px;
  padding: 14px 16px;
}
.progress-stat-tile .num { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--stat-default); }
.progress-stat-tile .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin-top: 2px; }
.progress-stat-tile.warning { border-left-color: var(--stat-warning); }
.progress-stat-tile.warning .num { color: var(--stat-warning); }
.progress-stat-tile.urgent { border-left-color: var(--stat-urgent); }
.progress-stat-tile.urgent .num { color: var(--stat-urgent); }
.progress-stat-tile.ready { border-left-color: var(--stat-ready); }
.progress-stat-tile.ready .num { color: var(--stat-ready); }

.klaster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.klaster-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.klaster-card:hover { border-color: var(--gold); box-shadow: 0 2px 10px rgba(139,0,0,0.08); }
.klaster-card .kc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.klaster-card .kc-title { font-weight: 800; font-size: 14px; color: var(--ink); }
.klaster-card .kc-desc { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 10px; }
.klaster-card .kc-cta { font-size: 11px; font-weight: 700; color: var(--crimson); margin-top: 8px; }

.manager-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold);
  white-space: nowrap;
}

.chart-bar-track { background: var(--surface-2); border-radius: 6px; height: 9px; overflow: hidden; margin: 7px 0 6px; }
.chart-bar-fill { height: 100%; border-radius: 6px; background: var(--gold); }
.chart-bar-fill.crimson { background: var(--crimson); }

.klaster-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 20px;
}
.klaster-panel .kp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.klaster-panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; }
.klaster-panel .kp-sub { font-size: 12px; color: var(--ink-muted); max-width: 60ch; }
.back-link { font-size: 12px; color: var(--crimson); text-decoration: none; font-weight: 700; display: inline-block; margin-bottom: 14px; }
.back-link:hover { text-decoration: underline; }

.item-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item-row:last-child { border-bottom: none; }
.item-row .ir-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-row .ir-name { font-size: 13px; font-weight: 600; }

.plan-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-konsep { background: var(--st-konsep-bg); color: var(--st-konsep-ink); }
.status-mockup { background: var(--st-mockup-bg); color: var(--st-mockup-ink); }
.status-proses_sistem { background: var(--st-proses-bg); color: var(--st-proses-ink); }
.status-done { background: var(--st-done-bg); color: var(--st-done-ink); }
.status-trial_admin { background: var(--st-trialadmin-bg); color: var(--st-trialadmin-ink); }
.status-trial_klien { background: var(--st-trialklien-bg); color: var(--st-trialklien-ink); }
.status-revisi { background: var(--st-revisi-bg); color: var(--st-revisi-ink); }
.status-finished { background: var(--st-finished-bg); color: var(--st-finished-ink); }

.chart-bar-note-input {
  width: 100%; font-size: 11.5px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: inherit;
}
.chart-bar-note-input.has-note { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.chart-bar-note-input::placeholder { color: var(--ink-muted); }

.note { font-size: 11px; color: var(--ink-muted); font-style: italic; margin-top: 18px; }

.table-scroll { overflow-x: auto; }
.mon-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.mon-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.mon-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mon-table tr:last-child td { border-bottom: none; }
.mon-table td .chart-bar-track { min-width: 90px; margin: 2px 0 6px; }

.jabo-thread { display: flex; flex-direction: column; gap: 12px; }
.jabo-entry { border-left: 3px solid var(--crimson); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 11px 14px; }
.jabo-entry .je-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.jabo-entry .je-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.jabo-entry .je-note { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.jabo-entry .je-date { font-size: 10.5px; color: var(--ink-muted); margin-top: 6px; }

.tab-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.tab-btn .count { background: var(--surface-2); color: var(--ink-muted); padding: 1px 7px; border-radius: 999px; font-size: 10px; margin-left: 6px; }
.tab-btn.active { background: var(--crimson); border-color: var(--crimson-mid); color: #fff; }
.tab-btn.active .count { background: rgba(255,255,255,0.25); color: #fff; }

.cs-layout { display: flex; gap: 16px; }
.cs-list { width: 300px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; overflow-y: auto; max-height: 520px; background: var(--surface); }
.cs-contact { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cs-contact:last-child { border-bottom: none; }
.cs-contact:hover { background: var(--surface-2); }
.cs-contact.selected { background: var(--gold-soft); }
.cs-contact .cn-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs-contact .cn-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cs-contact .cn-preview { font-size: 11px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-contact .cn-time { font-size: 9.5px; color: var(--ink-muted); margin-top: 3px; }

.cs-thread { flex: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 520px; }
.chat-bubble { max-width: 75%; padding: 9px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; }
.chat-bubble.masuk { background: var(--surface-2); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 3px; }
.chat-bubble.keluar { background: var(--crimson-soft); color: var(--crimson-ink); align-self: flex-end; border-bottom-right-radius: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--ink-muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch-dot { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid; flex-shrink: 0; }

.suhu-cold { background: var(--st-trialadmin-bg); color: var(--st-trialadmin-ink); }
.suhu-warm { background: var(--gold-soft); color: var(--gold-ink); }
.suhu-hot { background: #FFE3CC; color: #C2540A; }
.suhu-very_hot { background: var(--crimson-soft); color: var(--crimson-ink); }
.suhu-donatur_rutin { background: var(--st-done-bg); color: var(--st-done-ink); }

.date-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.date-group-head {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 16px;
  background: var(--surface-2); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.date-group-head .dg-arrow { transition: transform .15s; color: var(--ink-muted); font-size: 11px; }
.date-group.collapsed .dg-arrow { transform: rotate(-90deg); }
.date-group.collapsed .date-group-body { display: none; }
.date-group-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.date-group-body th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--ink-muted); padding: 7px 16px; border-bottom: 1px solid var(--line); }
.date-group-body td { padding: 9px 16px; border-bottom: 1px solid var(--line); }
.date-group-body tr:last-child td { border-bottom: none; }

.cs-empty-state { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--ink-muted); font-size: 12.5px; text-align: center; padding: 20px; }

.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.ok { background: var(--st-done-bg); color: var(--st-done-ink); }
.status-pill.ok::before { background: var(--st-done-ink); }
.status-pill.kosong { background: var(--st-konsep-bg); color: var(--st-konsep-ink); }
.status-pill.kosong::before { background: var(--ink-muted); }
.status-pill.revisi { background: var(--st-revisi-bg); color: var(--st-revisi-ink); }
.status-pill.revisi::before { background: var(--st-revisi-ink); }

.settings-group { margin-bottom: 22px; }
.settings-group h3 { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--crimson); margin: 0 0 12px; }
.settings-field { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-field:last-child { border-bottom: none; }
.settings-field label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.settings-field input {
  width: 100%; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: inherit;
}
.settings-field input::placeholder { color: var(--ink-muted); font-family: monospace; }
.settings-field select {
  width: 100%; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: inherit;
}
.settings-field textarea {
  width: 100%; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: inherit; resize: vertical; min-height: 56px;
}
.settings-hint { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px; font-family: monospace; }

.btn-primary {
  background: var(--crimson); color: #fff; border: none; padding: 10px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--crimson-mid); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.settings-toast { font-size: 12.5px; padding: 9px 14px; border-radius: 8px; margin-top: 12px; display: none; }
.settings-toast.show { display: block; }
.settings-toast.success { background: var(--st-done-bg); color: var(--st-done-ink); }
.settings-toast.error { background: var(--st-revisi-bg); color: var(--st-revisi-ink); }

.webhook-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.webhook-row:last-child { border-bottom: none; }
.webhook-row code { font-size: 11.5px; background: var(--surface-2); padding: 4px 9px; border-radius: 6px; color: var(--ink); }

.diagram-wrap { overflow-x: auto; margin-bottom: 8px; }
.diagram-wrap svg { display: block; width: 100%; max-width: 620px; min-width: 480px; height: auto; margin: 0 auto; }