/* ==========================================================================
   Marketing OS — Ads Data Operating System
   Palet: navy merek #1f2b42, aksen biru #2563eb, aksen merah merek #a32026
   ========================================================================== */

:root {
  --navy: #14203a;
  --navy-700: #1f2b42;
  --navy-600: #27344e;
  --brand-red: #a32026;

  --blue: #2563eb;
  --blue-600: #1d4ed8;
  --blue-50: #eef4ff;
  --blue-100: #dbe7ff;

  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --line: #e6ebf2;
  --line-strong: #d7dfea;

  --text: #0f172a;
  --text-2: #475569;
  --text-3: #8492a6;

  --green: #16a34a;
  --green-bg: #e9f8ef;
  --amber: #d97706;
  --amber-bg: #fdf3e3;
  --red: #dc2626;
  --red-bg: #fdecec;
  --slate-bg: #eef1f6;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 4px 16px rgba(15, 23, 42, .07);
  --sidebar-w: 236px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.icon { width: 18px; height: 18px; flex: none; }
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }

/* ------------------------------- layout ---------------------------------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--navy);
  color: #c7d2e4;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px;
  color: #fff;
}
.sidebar__logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), #60a5fa);
  display: grid; place-items: center; color: #fff;
}
.sidebar__brand strong { font-size: 15px; letter-spacing: -.01em; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: 4px 10px 20px; }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: #2b3a57; border-radius: 3px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 2px;
  border: 0; background: none;
  border-radius: var(--radius-sm);
  color: #aebbd1;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: #1c2941; color: #fff; }
.nav-item.is-active { background: #1d2f4f; color: #fff; font-weight: 600; }
.nav-item.is-active .icon { color: #6ea8fe; }
.nav-item__chev { margin-left: auto; transition: transform .18s; }
.nav-item[aria-expanded="true"] .nav-item__chev { transform: rotate(180deg); }

.nav-sub { margin: 2px 0 6px 21px; border-left: 1px solid #27344e; padding-left: 8px; }
.nav-sub .nav-item { font-size: 13px; padding: 7px 10px; }
.nav-badge {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--blue, #2563eb); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; line-height: 1.5;
}
.nav-sub .nav-badge { min-width: 18px; font-size: 10.5px; }

.sidebar__footer {
  margin: 10px; padding: 12px 14px;
  background: #1b2740; border-radius: var(--radius-sm);
  font-size: 12px; color: #93a3bd;
}
.sidebar__footer strong { display: block; color: #fff; font-size: 13.5px; margin: 2px 0 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: 6px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.search {
  flex: 1 1 0; min-width: 0; max-width: 540px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-3);
}
.search input { flex: 1 1 0; min-width: 0; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--text); }
.search kbd {
  font-family: var(--font); font-size: 11px; color: var(--text-3);
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 5px; background: #fff;
}
.topbar__spacer { flex: 1; }
.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); }
.badge-dot {
  position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}
.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 10px; cursor: pointer; }
.user-chip:hover { background: var(--surface-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; background: var(--blue-50);
  color: var(--blue-600); font-weight: 700; font-size: 12px; display: grid; place-items: center;
}
.user-chip__meta { line-height: 1.25; }
.user-chip__meta b { font-size: 13px; display: block; }
.user-chip__meta span { font-size: 11.5px; color: var(--text-3); }

.page { padding: 22px 26px 56px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
.page-grid > * { min-width: 0; }
.two-col > *, .three-col > *, .req-layout > *, .stat-grid > *, .task-grid > *, .tile-row > * { min-width: 0; }

[hidden] { display: none !important; }
.period-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

/* ----------------------------- primitives -------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head { padding: 16px 18px 0; }
.card__head h3 { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card__head p { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.card__body { padding: 14px 18px 18px; }

.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); background: none; border: 0; cursor: pointer; padding: 0;
  margin-bottom: 14px;
}
.crumb:hover { color: var(--blue); }

.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.page-head__icon {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--navy);
}
.page-head h1 { font-size: 25px; letter-spacing: -.02em; font-weight: 700; }
.page-head p { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }

.section-title { font-size: 15px; font-weight: 650; margin: 22px 0 12px; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 15px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-600); }
.btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--red); color: #fff; }
.btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  background: var(--slate-bg); color: var(--text-2);
}
.pill--red { background: var(--red-bg); color: var(--red); }
.pill--amber { background: var(--amber-bg); color: var(--amber); }
.pill--green { background: var(--green-bg); color: var(--green); }
.pill--blue { background: var(--blue-50); color: var(--blue-600); }

/* --------------------------- platform & task ----------------------------- */

.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile.is-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.tile__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.tile__text { flex: 1; min-width: 0; }
.tile__text b { font-size: 14.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__text span { font-size: 12.5px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .icon--chev { color: var(--text-3); }

.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.task-card {
  display: flex; align-items: center; gap: 10px; min-height: 64px;
  padding: 11px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.task-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.task-card.is-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.task-card__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.task-card__text { flex: 1; min-width: 0; }
.task-card__text b { font-size: 13px; display: block; line-height: 1.25; }
.task-card__text span {
  font-size: 11.5px; color: var(--text-3); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card .icon--chev { color: var(--text-3); }
.task-card__text .chip-list { display: flex; white-space: normal; overflow: visible; }

/* palet ikon lembut */
.tone-blue { background: #e8f0ff; color: #2563eb; }
.tone-green { background: #e6f7ee; color: #16a34a; }
.tone-purple { background: #f1ebfe; color: #7c3aed; }
.tone-orange { background: #fef0e4; color: #ea7317; }
.tone-amber { background: #fdf4e0; color: #d97706; }
.tone-red { background: #fdeaea; color: #dc2626; }
.tone-pink { background: #fdeaf3; color: #db2777; }
.tone-indigo { background: #eaecfd; color: #4f46e5; }
.tone-teal { background: #e3f7f4; color: #0d9488; }
.tone-sky { background: #e4f4fd; color: #0284c7; }
.tone-violet { background: #f0eafe; color: #6d28d9; }
.tone-rose { background: #fdecef; color: #e11d48; }
.tone-cyan { background: #e2f6f9; color: #0891b2; }
.tone-slate { background: #eef1f6; color: #475569; }

/* --------------------------- data requirement ---------------------------- */

.req-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; }

.file-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.file-list__head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 650;
}
.file-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: var(--surface-2); }
.file-row.is-selected { background: var(--blue-50); }
.file-row__check {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; flex: none; margin-top: 1px; background: #fff; color: transparent;
}
.file-row.is-checked .file-row__check { background: var(--blue); border-color: var(--blue); color: #fff; }
.file-row__body { flex: 1; min-width: 0; }
.file-row__body b { font-size: 13px; display: block; }
.file-row__body span { font-size: 11.5px; color: var(--text-3); }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); padding: 0 16px; }
.tab {
  padding: 12px 2px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.is-active { color: var(--blue); border-color: var(--blue); }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-weight: 600; color: var(--text-3); font-size: 11.5px;
  text-transform: none; padding: 9px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.type-tag { font-size: 11px; color: var(--text-3); letter-spacing: .02em; }
.col-name { font-weight: 550; }

.link-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.link-more:hover { background: var(--blue-50); }

.upload-strip {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding: 14px 18px;
  background: linear-gradient(90deg, #eef4ff, #f7faff);
  border: 1px solid var(--blue-100); border-radius: var(--radius);
}
.upload-strip__icon { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--blue); display: grid; place-items: center; }
.upload-strip b { font-size: 13.5px; display: block; }
.upload-strip span { font-size: 12.5px; color: var(--text-2); }

/* ------------------------------ side panel ------------------------------- */

.side-stack { display: grid; gap: 16px; position: sticky; top: 76px; }

.period-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; width: 100%; text-align: left;
}
.period-box:hover { border-color: var(--line-strong); }
.period-range { font-size: 12px; color: var(--text-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

.kv { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv__k { font-size: 12.5px; color: var(--text-3); }
.kv__v { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }

.prio-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.prio-row:last-child { border-bottom: 0; }
.prio-badge {
  width: 30px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; flex: none;
}
.prio-row__text { flex: 1; }
.prio-row__text b { font-size: 13px; display: block; }
.prio-row__text span { font-size: 11.5px; color: var(--text-3); }
.prio-count { font-size: 11.5px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; }

.gate-card {
  border: 1px solid var(--blue-100); background: var(--blue-50);
  border-radius: var(--radius); padding: 15px 16px;
}
.gate-card h4 { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.gate-card p { font-size: 12.5px; color: var(--text-2); margin: 6px 0 9px; }
.gate-card a { color: var(--blue-600); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* ------------------------------- dashboard ------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  padding: 16px 17px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stat__label { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.stat__value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat__foot { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.45; }

/* Metrik yang tidak bisa dihitung: dibedakan supaya tanda "–" tidak
   disangka aplikasi rusak — alasannya ditulis di bawah angkanya. */
.stat--blocked { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .32); }
.stat--blocked .stat__value { color: var(--text-3); }
.stat--blocked .stat__foot { color: var(--amber); }
.icon--xs { width: 13px; height: 13px; vertical-align: -2px; }
.delta { font-weight: 650; }
.delta--up { color: var(--green); }
.delta--down { color: var(--red); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.empty {
  padding: 34px 20px; text-align: center; color: var(--text-3);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
}
.empty .icon { width: 30px; height: 30px; margin-bottom: 10px; color: var(--text-3); }
.empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

/* -------------------------------- upload --------------------------------- */

.drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 26px; text-align: center; background: var(--surface-2); transition: border-color .15s, background .15s;
}
.drop.is-over { border-color: var(--blue); background: var(--blue-50); }
.drop b { display: block; font-size: 14px; margin: 8px 0 3px; }
.drop span { font-size: 12.5px; color: var(--text-3); }

.upload-card { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.upload-card:last-child { border-bottom: 0; }
.upload-card__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.upload-card__body { flex: 1; min-width: 0; }
.upload-card__body b { font-size: 13.5px; display: block; }
.upload-card__meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.upload-card__actions { display: flex; gap: 6px; align-items: center; }

.progress { height: 6px; border-radius: 4px; background: var(--slate-bg); overflow: hidden; margin-top: 9px; }
.progress__bar { height: 100%; background: var(--blue); border-radius: 4px; transition: width .3s; }
.progress__bar--green { background: var(--green); }
.progress__bar--amber { background: var(--amber); }
.progress__bar--red { background: var(--red); }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.chip--ok { background: var(--green-bg); border-color: #cdeeda; color: var(--green); }
.chip--miss { background: var(--red-bg); border-color: #f7d5d5; color: var(--red); }
.chip--warn { background: var(--amber-bg); border-color: #f5e0bd; color: var(--amber); }

/* ------------------------------- data gate ------------------------------- */

.gate-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.gate-row:last-child { border-bottom: 0; }
.gate-status {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
}
.gate-status--pass { background: var(--green-bg); color: var(--green); }
.gate-status--warn { background: var(--amber-bg); color: var(--amber); }
.gate-status--fail { background: var(--red-bg); color: var(--red); }

/* -------------------------------- reports -------------------------------- */

.insight {
  display: flex; gap: 11px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  margin-bottom: 10px;
}
.insight__mark { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.insight b { font-size: 13.5px; display: block; margin-bottom: 2px; }
.insight p { font-size: 12.5px; color: var(--text-2); }

.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 88px; gap: 11px; align-items: center; font-size: 12.5px; }
.bar-track { height: 9px; border-radius: 5px; background: var(--slate-bg); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: var(--blue); }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.funnel-step { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; margin-bottom: 9px; font-size: 12.5px; }
.funnel-bar { height: 30px; border-radius: 8px; background: var(--blue-50); position: relative; overflow: hidden; }
.funnel-bar span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px; font-weight: 600; color: var(--blue-600); z-index: 1; }
.funnel-fill { position: absolute; inset: 0; background: var(--blue-100); }

/* ------------------------------- settings -------------------------------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.field small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* -------------------------------- modal ---------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: grid; place-items: center; z-index: 90; padding: 20px;
}
.modal {
  background: #fff; border-radius: var(--radius); padding: 22px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.modal__text { font-size: 14px; margin-bottom: 18px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 9px; }

#toast-host { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 9px; z-index: 100; }
.toast {
  padding: 11px 15px; border-radius: var(--radius-sm); background: var(--navy); color: #fff;
  font-size: 13px; box-shadow: var(--shadow); max-width: 340px;
  animation: toast-in .2s ease; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: rgba(255, 255, 255, .22);
}
.toast--success { background: #15803d; }
.toast--error { background: #b91c1c; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: .35s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------ responsive ------------------------------- */

@media (max-width: 1380px) {
  .task-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .side-stack { position: static; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .req-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; z-index: 60; }
  .sidebar.is-open { transform: none; }
  .tile-row, .task-grid, .two-col, .three-col { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 16px; }
  .topbar { padding: 10px 14px; }
  .bar-row { grid-template-columns: 110px 1fr 76px; }
  .funnel-step { grid-template-columns: 110px 1fr 90px; }
}
@media (max-width: 640px) {
  .user-chip__meta, .search kbd { display: none; }
  .search { padding: 8px 10px; }
  .page-head h1 { font-size: 21px; }
}
@media (min-width: 901px) { .menu-btn { display: none; } }

/* ==========================================================================
   Akun: layar masuk, menu profil, manajemen user
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg);
}

.auth__brand {
  background: var(--navy);
  color: #cdd8ea;
  padding: 52px 48px;
  display: flex; flex-direction: column; gap: 14px;
}
.auth__logo {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue), #60a5fa); margin-bottom: 10px;
}
.auth__brand h1 { font-size: 30px; color: #fff; letter-spacing: -.02em; }
.auth__brand p { font-size: 14px; max-width: 420px; line-height: 1.6; }
.auth__points { margin-top: 18px; display: grid; gap: 10px; font-size: 13.5px; }
.auth__points li { display: flex; align-items: center; gap: 9px; }
.auth__points .icon { color: #6ee7a8; }
.auth__foot { margin-top: auto; font-size: 12.5px; color: #8494ae; }

.auth__panel { display: grid; place-items: center; padding: 40px 28px; }
.auth__card { width: 100%; max-width: 396px; }
.auth__card h2 { font-size: 23px; letter-spacing: -.02em; margin: 10px 0 4px; }
.auth__card form { margin-top: 20px; }
.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth__note { font-size: 11.5px; color: var(--text-3); margin-top: 18px; line-height: 1.6; }

.auth__error {
  margin-top: 14px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--red-bg); color: var(--red); font-size: 12.5px; border: 1px solid #f7d5d5;
}

.auth__divider {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 14px;
  font-size: 11.5px; color: var(--text-3);
}
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.auth__accounts { display: grid; gap: 8px; }
.auth__account {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.auth__account:hover { border-color: var(--blue); background: var(--blue-50); }
.auth__account b { display: block; font-size: 13px; }

.user-chip-wrap { position: relative; }
.user-chip { border: 0; background: none; cursor: pointer; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(15, 23, 42, .16); overflow: hidden;
}
.user-menu__head { display: flex; gap: 11px; padding: 15px; border-bottom: 1px solid var(--line); }
.user-menu__head b { font-size: 13.5px; }
.user-menu__body { padding: 6px; }
.user-menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: none; border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer; color: var(--text-2);
}
.user-menu__item:hover { background: var(--surface-2); color: var(--text); }
.user-menu__item--danger { color: var(--red); }
.user-menu__item--danger:hover { background: var(--red-bg); }

.role-select {
  padding: 5px 9px; font: inherit; font-size: 12.5px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: #fff; cursor: pointer;
}
.user-actions {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 16px 14px 66px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.modal--form { max-width: 460px; }
.modal__title { font-size: 17px; margin-bottom: 4px; }

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__brand { padding: 30px 24px; }
  .auth__points, .auth__foot { display: none; }
  .user-actions { padding-left: 16px; }
}

/* menu akun — status & pemisah */
.user-menu__status {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 15px; font-size: 11.5px; color: var(--green);
  background: var(--green-bg); border-bottom: 1px solid var(--line);
}
.user-menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
.user-menu__item b { font-weight: 600; color: var(--text); }
.user-chip__chev { transition: transform .18s; color: var(--text-3); }
.user-chip.is-open { background: var(--surface-2); }
.user-chip.is-open .user-chip__chev { transform: rotate(180deg); }
.user-menu__head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__head .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__version { display: block; margin-top: 6px; font-size: 11px; color: #74849e; letter-spacing: .02em; }

/* masuk cepat & opsi tetap masuk */
.auth__known {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin: 18px 0 4px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.auth__known b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth__known .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); margin: -4px 0 14px; cursor: pointer;
}
.auth__remember input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }

.auth__switch {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 14px; padding: 9px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: none;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
.auth__switch:hover { background: var(--surface-2); color: var(--blue); }

/* status brankas data */
.vault-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px; color: var(--text-2);
}
.vault-banner b { color: var(--text); word-break: break-all; }
.vault-banner .btn { margin-left: auto; }
.vault-banner--ok { background: var(--green-bg); border-color: #cdeeda; color: var(--green); }
.vault-banner--warn { background: var(--amber-bg); border-color: #f5e0bd; color: var(--amber); }

/* baris pengaturan template kolom */
.tpl-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 2px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
}
.tpl-bar__text { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 7px; }
.tpl-bar b { color: var(--text); }

.modal--wide { max-width: 940px; width: 100%; }
.tpl__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tpl__bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl__table { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.tpl__table th { position: sticky; top: 0; z-index: 1; }
.tpl__table tr.is-muted .col-name { color: var(--text-3); font-weight: 400; }
.tpl__table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--blue); }

/* tab Masuk / Buat Akun di layar autentikasi */
.auth__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
.auth__tab {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none;
  font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer;
}
.auth__tab:hover { color: var(--text); }
.auth__tab.is-active { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-sm); }

.auth__links { display: grid; gap: 8px; margin-top: 14px; }
.auth__links .auth__switch { margin-top: 0; }

.tpl-prompt {
  padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.tpl-prompt__row { display: flex; gap: 7px; flex-wrap: wrap; }

/* --------------------- katalog dataset: panel buka-tutup ------------------ */
/* Seluruh baris judul bisa diklik; panah berputar mengikuti aria-expanded. */
.ds-card__head {
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; user-select: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.ds-card__head:hover { background: var(--surface-2); }
.ds-card__head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ds-card__chev { display: grid; place-items: center; padding-top: 2px; color: var(--text-3); transition: transform .18s ease; }
.ds-card__head[aria-expanded="true"] .ds-card__chev { transform: rotate(180deg); color: var(--blue); }
.ds-card__head[aria-expanded="true"] { background: var(--surface-2); }

/* ------------------------- pusat notifikasi lonceng ----------------------- */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: 92vw;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 60; overflow: hidden;
}
.notif-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.notif-panel__head b { font-size: 13.5px; }
.btn--xs { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); cursor: default;
}
.notif-item[data-go] { cursor: pointer; }
.notif-item[data-go]:hover { background: var(--surface-2); }
.notif-item.is-new { background: var(--blue-50); }
.notif-item.is-new:hover { background: var(--blue-100); }
.notif-item b { font-size: 13px; display: block; line-height: 1.35; }
.notif-item p { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.notif-item__meta { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 4px; }
.notif-item__icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
}
.notif-empty { padding: 34px 20px; text-align: center; color: var(--text-3); }
.notif-empty p { margin: 10px 0 4px; font-size: 13.5px; color: var(--text-2); }
.tone-violet { background: #f3e8ff; color: #7e22ce; }

/* ------------- Strategic Results, Technical Actions, Agen AI -------------- */
.sr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.sr-grid > * { min-width: 0; display: flex; flex-direction: column; }
.sr-grid > section > .card__body { flex: 1; }
/* Panel "Sedang Dikerjakan" menempati lebar penuh, terpisah dari grid agar
   tidak menabrak kedua panel di bawahnya. */
.card--proses { margin-top: 16px; border-color: var(--blue-300, #93c5fd); background: var(--blue-50); }
.card--proses .kv__k { font-weight: 600; color: var(--text-1); }
.sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.sr-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 10px; }
.sr-card.is-ok { border-left: 3px solid var(--green); }
.sr-card.is-warn { border-left: 3px solid var(--amber); }
.sr-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-card__head b { font-size: 13.5px; }
.sr-card__nums { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.sr-card__now { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sr-card__arrow { color: var(--text-3); }
.sr-card__target { font-size: 13px; color: var(--text-2); }
.sr-card__rec {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 10px;
  padding: 9px 11px; background: var(--blue-50); border-radius: 9px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.trend { margin-left: auto; display: grid; place-items: center; }
.trend--up { color: var(--green); }
.trend--down { color: var(--amber); }

.ta-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 10px; }
.ta-card--red { border-color: rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .04); }
.ta-card--amber { border-color: rgba(217, 119, 6, .3); background: rgba(217, 119, 6, .04); }
.ta-card__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ta-card__head b { font-size: 13.5px; flex: 1; min-width: 0; }
.ta-card__dot { display: grid; place-items: center; color: var(--text-2); }
.ta-card__meta { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.ta-card__meta li { margin-top: 2px; }

.ai-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-ringkas { margin-top: 12px; padding: 12px 14px; background: var(--blue-50); border-radius: var(--radius-sm); }
.ai-ringkas b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ai-ringkas p { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.55; }
.ai-ragu { color: var(--amber) !important; }
.ai-tafsir { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.ai-tafsir > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.ai-tafsir__item { padding: 10px 12px; border-radius: 9px; background: var(--surface-2); margin-bottom: 8px; }
.ai-tafsir__item.is-ragu { background: var(--amber-bg); }
.ai-tafsir__item b { font-size: 13px; }
.ai-tafsir__item p { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.ai-tafsir__rec { color: var(--blue-600) !important; }

.ai-chat { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ai-chat__log { max-height: 340px; overflow-y: auto; padding: 12px; background: var(--surface-2); }
.ai-msg { margin-bottom: 10px; max-width: 86%; }
.ai-msg b { font-size: 11.5px; color: var(--text-3); display: block; margin-bottom: 3px; }
.ai-msg p { font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; }
.ai-msg--bot p { background: #fff; border: 1px solid var(--line); }
.ai-msg--me { margin-left: auto; }
.ai-msg--me p { background: var(--blue); color: #fff; }
.ai-msg--err p { background: var(--red-bg); color: var(--red); border: 1px solid rgba(220, 38, 38, .3); }
.ai-chat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.ai-chat__form input {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 13.5px;
  border: 1px solid var(--line-strong); border-radius: 9px; outline: none;
}
.ai-chat__form input:focus { border-color: var(--blue); }

@media (max-width: 1100px) { .sr-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------- kartu Agen AI (hero) ------------------------- */
/* Ditaruh di atas kedua panel supaya tombolnya langsung terlihat. */
.ai-card { border-color: rgba(124, 58, 237, .28); }
.ai-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px;
  background: linear-gradient(120deg, #f5f0ff 0%, #eef4ff 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}
.ai-hero__badge {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .28);
}
.ai-hero__text { flex: 1 1 320px; min-width: 0; }
.ai-hero__text b { font-size: 15px; letter-spacing: -.01em; }
.ai-hero__text p { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.ai-hero__btns { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.ai-hero__btns .btn--ghost { background: rgba(255, 255, 255, .75); }
@media (max-width: 720px) { .ai-hero__btns { width: 100%; } .ai-hero__btns .btn { flex: 1; } }

/* ------------- Agen AI: tombol mengambang + dok (bukan kolom) ------------- */
.ai-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .38);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124, 58, 237, .46); }
.ai-fab.is-open { transform: rotate(90deg) scale(.94); }
.ai-fab--off { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 8px 24px rgba(71, 85, 105, .3); }
.ai-fab__dot {
  position: absolute; top: 6px; right: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--amber); border: 2px solid #fff;
}

.ai-dock {
  position: fixed; right: 26px; bottom: 94px; z-index: 69;
  width: 420px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(15, 23, 42, .18);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: min(70vh, 640px);
  animation: dock-in .18s ease;
}
@keyframes dock-in { from { opacity: 0; transform: translateY(10px); } }
.ai-dock__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #f5f0ff 0%, #eef4ff 100%);
}
.ai-dock__head b { font-size: 13.5px; display: block; }
.ai-dock__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.ai-dock .ai-ringkas { margin: 10px 14px 0; }
.ai-dock .ai-chat { margin: 10px 0 0; border: 0; border-top: 1px solid var(--line); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-dock .ai-chat__log { flex: 1; max-height: none; }
.ai-dock .ai-tafsir { margin: 0 14px 10px; }
@media (max-width: 560px) {
  .ai-dock { right: 12px; left: 12px; width: auto; bottom: 88px; }
  .ai-fab { right: 16px; bottom: 16px; }
}

/* kolom panduan analisis di Pengaturan */
.field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.6;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); resize: vertical; min-height: 120px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }

/* keterangan di kartu unggah: status warn yang sebenarnya lolos, dan cara ambil file */
.upload-card__note {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 8px;
  padding: 8px 10px; border-radius: 9px; font-size: 12px; line-height: 1.5;
}
.upload-card__note--ok { background: var(--green-bg); color: #15803d; }
.upload-card__how { margin-top: 8px; }
.upload-card__how summary {
  cursor: pointer; font-size: 12px; color: var(--blue-600);
  display: inline-flex; align-items: center; gap: 5px; list-style: none;
}
.upload-card__how summary::-webkit-details-marker { display: none; }
.upload-card__how summary:hover { text-decoration: underline; }
.upload-card__how p {
  margin-top: 6px; padding: 9px 11px; background: var(--surface-2);
  border-radius: 9px; font-size: 12px; color: var(--text-2); line-height: 1.6;
}

/* ===================== v5.0 — persetujuan akun ===================== */

.auth__gate{
  display:flex;gap:9px;align-items:flex-start;
  background:color-mix(in srgb, var(--amber) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius:11px;padding:10px 12px;margin-bottom:14px;
  font-size:12.5px;line-height:1.5;color:var(--text-2);
}
.auth__gate svg{flex:none;margin-top:2px;color:var(--amber)}

.auth__card--center{text-align:center}
.auth__card--center .auth__known,
.auth__card--center .auth__links{text-align:left}

.auth__wait{
  width:58px;height:58px;margin:2px auto 12px;border-radius:19px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--amber) 14%, transparent);
  color:var(--amber);
  animation:waitPulse 2.4s ease-in-out infinite;
}
.auth__wait.is-rejected{
  background:color-mix(in srgb, var(--red) 14%, transparent);
  color:var(--red);animation:none;
}
@keyframes waitPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.8}}
@media (prefers-reduced-motion:reduce){.auth__wait{animation:none}}

.card--wait{border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.card--wait .card__head h3{display:flex;align-items:center;gap:8px}
.stat--warn{border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.stat--warn .stat__value{color:var(--amber)}

.upload-card--wait{
  background:color-mix(in srgb, var(--amber) 6%, transparent);
  border-color:color-mix(in srgb, var(--amber) 28%, var(--line));
}

/* ===================== v5.0 — panduan AI berbentuk berkas ============ */

.field__label{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--text-1);margin-bottom:2px;
}

.ai-drop{
  display:flex;align-items:center;gap:13px;
  padding:16px;border-radius:13px;cursor:pointer;
  border:1.5px dashed var(--line);
  background:var(--surface-2);
  transition:border-color .15s ease, background .15s ease;
}
.ai-drop:hover,.ai-drop.is-over{
  border-color:var(--blue);
  background:color-mix(in srgb, var(--blue) 7%, transparent);
}
.ai-drop__icon{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--blue) 12%, transparent);
  color:var(--blue);
}

.upload-card--slim{padding:9px 11px}
.upload-card__ico{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-3);
}

.modal--wide{max-width:min(720px,92vw)}
.panduan-pratinjau{
  max-height:52vh;overflow:auto;margin:0;
  padding:13px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  color:var(--text-2);
}

/* ===================== v5.0 — kerapian keluaran agen ================= */

.ta-card__rincian{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}

/* ------------------------- halaman "Sedang Dikerjakan" ----------------------- */
.job-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.job-row__status {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
}
.job-row__status.is-proses { background: var(--blue-50); color: var(--blue-600, #2563eb); }
.job-row__status.is-selesai { background: var(--green-50, #ecfdf5); color: var(--green); }
.job-row__aksi { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip--soft{
  background:color-mix(in srgb, var(--blue) 9%, transparent);
  border-color:color-mix(in srgb, var(--blue) 24%, transparent);
  color:var(--text-2);
}

.ai-msg p{margin:0 0 7px}
.ai-msg p:last-child{margin-bottom:0}
.ai-msg ul{margin:4px 0 8px;padding-left:19px}
.ai-msg ul:last-child{margin-bottom:0}
.ai-msg li{margin-bottom:4px;line-height:1.55}
.ai-msg__judul{display:block;margin:9px 0 4px;font-size:12.5px}
.ai-msg__judul:first-child{margin-top:0}

/* ===================== v6.0 — Pustaka Konteks ====================== */

.ctx-kosong{
  text-align:center;padding:34px 22px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.ctx-kosong h3{margin:0}
.ctx-kosong p{max-width:58ch;margin:0;line-height:1.6}
.ctx-kosong__ico{
  width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--violet, #7c3aed) 13%, transparent);
  color:var(--violet, #7c3aed);
}
.ctx-kosong__ico--spin svg{animation:ctxSpin 1.1s linear infinite}
@keyframes ctxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ctx-kosong__ico--spin svg{animation:none}}

.ctx-harap{
  margin-top:8px;padding:14px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  max-width:64ch;text-align:left;
}
.ctx-harap b{display:block;margin-bottom:8px;font-size:12.5px}
.ctx-harap .chip-list{margin-bottom:8px}

.ctx-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
}

.ctx-warn{
  display:flex;gap:9px;align-items:flex-start;margin-bottom:14px;
  padding:11px 13px;border-radius:11px;font-size:12.5px;line-height:1.55;
  background:color-mix(in srgb, var(--amber) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  color:var(--text-2);
}
.ctx-warn svg{flex:none;margin-top:2px;color:var(--amber)}

.ctx-cat{
  padding:13px 15px;border-radius:12px;margin-bottom:9px;
  border:1px solid var(--line);background:var(--surface-2);
}
.ctx-cat.is-empty{opacity:.55}
.ctx-cat.is-always{
  border-color:color-mix(in srgb, var(--red) 40%, var(--line));
  background:color-mix(in srgb, var(--red) 5%, transparent);
}
.ctx-cat.is-other{border-style:dashed}
.ctx-cat__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ctx-cat__head b{font-size:13.5px}
.ctx-cat__count{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.ctx-cat p{margin:0}
.ctx-cat__files{display:flex;flex-direction:column;gap:3px;margin-top:9px}

.ctx-file{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 9px;border-radius:8px;border:0;cursor:pointer;
  background:transparent;color:var(--text-2);
  font-size:12px;font-family:inherit;text-align:left;
}
.ctx-file:hover{background:var(--surface-1)}
.ctx-file svg{flex:none;color:var(--text-3)}
.ctx-file span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-file .muted{flex:none;font-size:11px}

.ctx-rute__baris{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.ctx-rute__baris:last-child{border-bottom:0}
.ctx-rute__baris .pill{flex:none;min-width:84px;text-align:center}

.ctx-uji{border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}
.ctx-uji__form{display:flex;gap:8px;margin-bottom:12px}
.ctx-uji__form input{
  flex:1;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-1);
  color:var(--text-1);font:inherit;font-size:13px;
}
.ctx-uji__ringkas{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.ctx-uji__daftar{display:flex;flex-direction:column;gap:4px}
.ctx-uji__item{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  background:var(--surface-2);font-size:12.5px;
}
.ctx-uji__item.is-wajib{
  background:color-mix(in srgb, var(--red) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 26%, transparent);
}
.ctx-uji__item.is-pucat{opacity:.6}
.ctx-uji__item span:nth-of-type(1){flex:1;min-width:0}
.ctx-uji__item svg{flex:none;color:var(--text-3)}
.ctx-uji__sisa{margin-top:10px}
.ctx-uji__sisa summary{cursor:pointer;font-size:12.5px;color:var(--text-2);padding:5px 0}

/* sumber guideline di dalam dok agen */
.ai-sumber{
  margin:10px 0 0;padding:9px 11px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);
}
.ai-sumber summary{cursor:pointer;font-size:12px;color:var(--text-2);font-weight:500}
.ai-sumber summary svg{vertical-align:-2px;margin-right:4px;color:var(--violet, #7c3aed)}
.ai-sumber__daftar{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.ai-sumber__item{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ai-sumber__item svg{flex:none}

/* ===== Order Ecommerce (meniru AppSheet FAJAR INDAH) ===== */
.oe{max-width:1100px;margin:0 auto;padding:0 0 32px}
.oe__topbar{
  position:sticky;top:0;z-index:5;background:var(--navy-600,#27344e);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;margin:0 -16px 16px;border-radius:0 0 12px 12px;
}
.oe__brand{display:flex;align-items:center;gap:10px;min-width:0}
.oe__logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#a84842;flex:none}
.oe__logo svg{stroke:#fff}
.oe__title{font-size:17px;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oe__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
.oe__body{display:flex;flex-direction:column;gap:18px}

/* FILTER HO */
.oe__filter{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.oe__filter-head{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--text-3)}
.oe__field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oe__field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--text-2)}
.oe__field input,.oe__field select{
  border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:13.5px;
  background:var(--surface-2);color:var(--text)
}
.oe__field input:focus,.oe__field select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.oe__pencarian{display:flex;flex-direction:column;gap:6px}
.oe__label{font-size:12px;font-weight:600;color:var(--text-2)}
.oe__toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;width:fit-content}
.oe__toggle button{border:0;background:transparent;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
.oe__toggle button.is-active{background:var(--navy-600,#27344e);color:#fff}
.oe__cari-row{display:flex;gap:8px}
.oe__q{flex:1;border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:13.5px;background:var(--surface-2);color:var(--text)}
.oe__q:focus{outline:2px solid var(--accent);outline-offset:-1px}
.oe__cari-btn{border:0;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700;background:var(--accent,#2563eb);color:#fff;cursor:pointer}
.oe__cari-btn:hover{background:var(--blue-600,#1d4ed8)}

/* galeri 2 kolom */
.oe__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.oe__card{
  position:relative;border:0;border-radius:14px;padding:16px;min-height:180px;
  background:linear-gradient(160deg,#27344e,#1a2438);color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:transform .15s ease, box-shadow .15s ease
}
.oe__card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,32,58,.28)}
.oe__card-kategori{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.oe__card-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(168,72,66,.9)}
.oe__card-icon svg{stroke:#fff}
.oe__card-badge{
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1a2438;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:4px 10px
}
.oe__badge-dot svg{stroke:#a84842}
.oe__card-label{font-size:26px;font-weight:800;letter-spacing:.04em;margin-top:2px}
.oe__card-ket{font-size:11.5px;color:rgba(255,255,255,.7);line-height:1.4}
.oe__card-n{margin-top:auto;font-size:12px;font-weight:700;color:#ffd9a8;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 12px}

/* tabel */
.oe__table-head{display:flex;align-items:center;gap:10px}
.oe__sub-judul{font-size:15px;font-weight:700;margin:0}
.oe__badge-n{font-size:12px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px;color:var(--text-2)}
.oe__table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.oe__table{width:100%;border-collapse:collapse;font-size:11.5px;white-space:nowrap;table-layout:auto}
.oe__table thead th{
  position:sticky;top:0;background:var(--navy-600,#27344e);color:#fff;text-align:left;
  font-size:10px;font-weight:700;letter-spacing:.04em;padding:8px 8px;z-index:1
}
.oe__table tbody td{padding:7px 8px;border-top:1px solid var(--border);color:var(--text);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe__table tbody td .oe__barang-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.oe__table tbody td .oe__barang-line + .oe__barang-line{margin-top:2px;color:var(--text-2);font-size:11.5px}
.oe__table tbody tr:nth-child(even){background:var(--surface-2)}
.oe__table tbody tr:hover{background:#eef3fb}
.oe__table td.num{text-align:right;font-variant-numeric:tabular-nums}
.oe__status{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px}
.oe__status--ok{background:#e3f6ec;color:#0c7a44}
.oe__status--batal{background:#fdeaea;color:#b91c1c}
.oe__status--proses{background:#fff4e0;color:#9a5b00}

.oe__empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 16px;text-align:center;color:var(--text-2)}
.oe__empty svg{stroke:var(--text-3)}
.oe__hint{font-size:12px;color:var(--text-3);margin:0}
.oe__loading{padding:40px;text-align:center;color:var(--text-3);font-size:13.5px}

@media (max-width:640px){
  .oe__field-row{grid-template-columns:1fr}
  .oe__grid{grid-template-columns:repeat(2,1fr)}
}

/* platform warna logo */
.oe__logo--tiktok{background:#010101}
.oe__logo--shopee{background:#ee4d2d}
.oe__logo--lazada{background:#0f146d}
.oe__logo--store{background:#a84842}

.oe__card--tiktok{background:linear-gradient(160deg,#25272b,#0d0e10)}
.oe__card--shopee{background:linear-gradient(160deg,#c43f22,#8f2d15)}
.oe__card--lazada{background:linear-gradient(160deg,#1a237e,#0d1245)}
.oe__card--tiktok .oe__card-icon{background:rgba(37,244,238,.22)}
.oe__card--shopee .oe__card-icon{background:rgba(255,255,255,.18)}
.oe__card--lazada .oe__card-icon{background:rgba(255,255,255,.16)}

.oe__platform{font-size:11px;font-weight:700;color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);padding:3px 10px;border-radius:999px;white-space:nowrap}

/* form input (SS Form AppSheet) */
.oe__form-head{display:flex;align-items:center;gap:10px}
.oe__form{max-width:560px;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.oe__form .oe__field-row{gap:14px}
.oe__form input,.oe__form textarea{
  border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13.5px;
  background:var(--surface-2);color:var(--text);width:100%
}
.oe__form input:focus,.oe__form textarea:focus{outline:2px solid var(--accent,#2563eb);outline-offset:-1px}
.oe__merk{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.oe__merk-btn{
  border:1px solid var(--border);background:var(--surface);border-radius:9px;
  padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer
}
.oe__merk-btn:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb)}
.oe__merk-btn.is-active{background:var(--navy-600,#27344e);border-color:var(--navy-600,#27344e);color:#fff}
.oe__qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-top:6px;width:fit-content;background:var(--surface)}
.oe__qty input{border:0;border-radius:0;text-align:center;width:64px;background:var(--surface)}
.oe__qty input:focus{outline:none}
.oe__qty-btn{border:0;background:var(--surface-2);width:36px;height:36px;font-size:17px;font-weight:700;color:var(--text-2);cursor:pointer}
.oe__qty-btn:hover{background:var(--blue-100,#dbe7ff);color:var(--blue-600,#1d4ed8)}
.oe__form-aksi{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);padding-top:16px}

.oe__empty-aksi{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.oe__table td.oe__aksi{white-space:nowrap}
.oe__icon-btn{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;margin-right:4px
}
.oe__icon-btn:hover{background:var(--blue-100,#dbe7ff);color:var(--blue-600,#1d4ed8);border-color:var(--blue-600,#1d4ed8)}
.oe__icon-btn--bahaya:hover{background:#fdeaea;color:#b91c1c;border-color:#b91c1c}

.oe__toast{position:fixed;bottom:20px;right:20px;background:#0f146d;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;z-index:60;max-width:320px}
.oe__toast--muncul{opacity:1;transform:translateY(0)}

.oe__status{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.3px}
.oe__status--hijau{background:#dcfce7;color:#16a34a}
.oe__status--merah{background:#fee2e2;color:#ef4444}
.oe__status--netral{background:#f1f5f9;color:#64748b}

/* toolbar rapi: semua tombol sejajar, tinggi sama */
.oe__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.oe__tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--border,#d8dee9);background:#fff;color:#1f2a3d;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s;white-space:nowrap}
.oe__tool:hover{background:#f1f5f9;box-shadow:0 1px 3px rgba(15,20,45,.08)}
.oe__tool--utama{background:var(--accent,#2563eb);border-color:transparent;color:#fff}
.oe__tool--utama:hover{background:#1d4ed8;color:#fff}
.oe__tool--icon{width:36px;padding:0;justify-content:center}
.oe__topbar{align-items:center;flex-wrap:wrap;gap:10px}

/* form multi-produk */
.oe__items-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;padding-bottom:8px;border-bottom:1px dashed #cbd5e1}
.lbl-small{font-size:11px;font-weight:700;letter-spacing:.08em;color:#64748b;text-transform:uppercase}
.oe__item{position:relative;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px 12px;margin-bottom:14px;background:#fbfcfe}
.oe__item-no{font-size:11px;font-weight:800;color:var(--accent,#2563eb);letter-spacing:.06em;margin-bottom:8px}
.oe__item-hapus{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:none;background:#fee2e2;color:#ef4444;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.oe__item-hapus:hover{background:#fecaca}

/* status warna tracking */
.oe__status--biru{background:#dbeafe;color:#2563eb}
.oe__status--kuning{background:#fef9c3;color:#a16207}
.oe__status--merah{background:#fee2e2;color:#ef4444}
.oe__status--hijau{background:#dcfce7;color:#16a34a}
.oe__status--netral{background:#f1f5f9;color:#64748b}

/* tombol pilih status di detail */
.oe__status-group{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.oe__status-btn{border:1px solid var(--border,#d8dee9);background:var(--surface,#fff);border-radius:999px;padding:7px 18px;font-size:12.5px;font-weight:700;color:var(--text-2,#475569);cursor:pointer}
.oe__status-btn.is-active{background:var(--accent,#2563eb);border-color:transparent;color:#fff}
.oe__status-btn--batal.is-active{background:#ef4444}
.oe__status-btn:hover:not(.is-active){background:#f1f5f9}

/* detail order */
.oe__detail{max-width:760px;background:var(--surface,#fff);border:1px solid var(--border,#d8dee9);border-radius:12px;padding:20px}
.oe__detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:2px solid var(--accent,#2563eb);margin-bottom:16px}
.oe__detail-no{font-size:20px;font-weight:800;color:var(--accent,#2563eb)}
.oe__detail-sub{font-size:12px;color:var(--text-3,#94a3b8);margin-top:2px}
.oe__detail-aksi{display:flex;gap:8px;flex-wrap:wrap}
.oe__detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:18px}
.oe__detail-val{font-size:13.5px;font-weight:600;margin-top:2px}
.oe__detail-alamat{font-weight:400;font-size:12.5px;line-height:1.5}
.oe__detail-sec{margin-top:18px}
.oe__table--detail{margin-top:8px}
.oe__table--detail thead th{text-align:center}
.oe__table--detail tbody td{text-align:center}
.oe__table--detail tbody td.num{text-align:center}
.oe__table--detail tbody td.oe__td-nama{text-align:left;padding-left:12px}
.oe__detail-resi{font-family:'Courier New',monospace;font-size:14px;font-weight:700;color:#d11;background:#fff5f5;border:1px dashed #fca5a5;border-radius:8px;padding:10px 12px;margin-top:6px;word-break:break-all}
.oe__ket-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.oe__ket-form{margin-top:6px}
.oe__ket-form textarea{width:100%;box-sizing:border-box;font-family:'Courier New',monospace;font-size:14px;font-weight:700;color:#d11;border:1px solid #fca5a5;border-radius:8px;padding:10px 12px;resize:vertical}
.oe__ket-aksi{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.oe__tracking{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2,#475569)}
.oe__track{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;margin-left:6px}
.oe__track--lewat{background:#fee2e2;color:#ef4444}
.oe__track--hari{background:#fef9c3;color:#a16207}
.oe__track--minggu{background:#dbeafe;color:#2563eb}

/* alert tracking */
.oe__track-alert{max-width:520px;background:var(--surface,#fff);border:1px solid var(--border,#d8dee9);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.oe__track-alert-head{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--text-3,#94a3b8);margin-bottom:10px}
.oe__track-alert-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:9px;margin-bottom:5px;font-size:13px;font-weight:600}
.oe__track-alert-row b{font-size:16px;min-width:28px;text-align:center}
.oe__track-alert-row--lewat{background:#fee2e2;color:#b91c1c}
.oe__track-alert-row--hari{background:#fef9c3;color:#854d0e}
.oe__track-alert-row--minggu{background:#dbeafe;color:#1d4ed8}

/* form 2 kolom + preview surat jalan */
.oe__form-layout{display:flex;gap:24px;align-items:flex-start}
.oe__form{flex:1 1 55%;min-width:0}
.oe__preview{flex:0 0 42%;align-self:flex-start}
.oe__preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.oe__preview-box{background:#fff;border:1px solid var(--border,#d8dee9);border-radius:10px;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.oe__preview-box .sj{font-size:8.5px;line-height:1.35}
.oe__preview-box .sj__brand{font-size:13px}
.oe__preview-box .sj__brand-sub{font-size:7px}
.oe__preview-box .sj__platform{font-size:7px;padding:3px 8px}
.oe__preview-box .sj__judul{font-size:12px;margin:2px 0 8px;letter-spacing:1.5px}
.oe__preview-box .sj__table th{font-size:7px;padding:3px 4px}
.oe__preview-box .sj__table td{font-size:8px;padding:3px 4px}
.oe__preview-box .sj__ket{font-size:11pt;line-height:1.2;margin-top:6px;overflow-wrap:anywhere} /* skala preview dari 18pt cetak */
.oe__preview-box .sj__ttd{margin-top:12px;font-size:7.5px}
.oe__preview-box .sj__cek{margin-top:8px;padding-top:6px}
.oe__preview-box .sj__cek-table th{font-size:6.5px;padding:3px}
.oe__preview-box .sj__cek-jam{font-size:6.5px}
.oe__preview-box .sj__dicetak{font-size:7px;margin-top:8px}
.oe__preview-box .sj__lbl{font-size:6.5px;margin-top:3px}
.oe__preview-box .sj__val{font-size:8.5px}
.oe__badge-lock{font-size:11px;font-weight:700;color:#a16207;background:#fef9c3;border-radius:999px;padding:3px 10px}
.oe__status--ungu{background:#ede9fe;color:#7c3aed}
.oe__status-btn--batal.is-active{background:#ef4444}
.oe__preview-box .sj__kop{gap:8px;padding-bottom:5px;margin-bottom:5px;align-items:center}
.oe__preview-box .sj__no-box{padding:2px 7px;border-width:1.5px}
.oe__preview-box .sj__no-val{font-size:10px}
.oe__preview-box .sj__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0 12px;margin-bottom:8px}
.oe__preview-box .sj{width:100%;min-height:0;padding:8px;position:relative;aspect-ratio:210/148;height:auto}
.oe__preview-box .sj__copy{top:4px;right:4px;font-size:8px;padding:2px 7px}

/* ==================== Content Planner ==================== */
.cp{max-width:100%;padding:0 2px}
.cp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.cp__head h2{margin:0 0 3px;font-size:19px}
.cp__tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:3px}
.cp__tab{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:7px 13px;border-radius:8px;font:600 12.5px system-ui,sans-serif;color:var(--muted-foreground);cursor:pointer}
.cp__tab.is-aktif{background:var(--accent);color:#fff}
.cp__brainstorm{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px}
.cp__bs-head{margin-bottom:10px}
.cp__bs-head b{font-size:14px}
.cp__bs-form{display:flex;gap:8px}
.cp__input{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--background);color:var(--foreground);font:13.5px system-ui,sans-serif}
.cp__input:focus{outline:2px solid var(--accent);outline-offset:1px}
.cp__list-head{margin:6px 0 10px;font-size:13.5px}
.cp__tabel-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.cp__tabel{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.cp__tabel th{text-align:left;padding:8px 10px;background:var(--muted);color:var(--muted-foreground);font-weight:600;border-bottom:1px solid var(--border);position:sticky;top:0}
.cp__tabel td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.cp__tabel tr:last-child td{border-bottom:0}
.cp__judul{min-width:180px;white-space:normal}
.cp__detail-btn{border:0;background:transparent;color:var(--accent);font:600 13px system-ui,sans-serif;text-align:left;cursor:pointer;padding:0}
.cp__detail-btn:hover{text-decoration:underline}
.cp__tgl{white-space:nowrap;color:var(--muted-foreground)}
.cp__ref a{margin:0}
.cp__link{display:inline-flex;align-items:center;gap:3px;color:var(--accent);text-decoration:none;font-size:12px}
.cp__link:hover{text-decoration:underline}
.cp__aksi{display:flex;gap:2px;white-space:nowrap}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.pill--amber{background:#fef3c7;color:#92400e}
.pill--blue{background:#dbeafe;color:#1e40af}
.pill--red{background:#fee2e2;color:#991b1b}
.pill--green{background:#d1fae5;color:#065f46}
.pill--purple{background:#ede9fe;color:#5b21b6}
.pill--slate{background:#e2e8f0;color:#475569}
.cp__hasil{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:14px;margin-bottom:16px}
.cp__hasil-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cp__hasil-aksi{display:flex;gap:6px}
.btn--xs{padding:5px 10px;font-size:12px;border-radius:7px}
.cp__preview h3{margin:6px 0 4px;font-size:16px}
.cp__angle{font-size:13px;color:var(--muted-foreground);background:var(--muted);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.cp__bagian{margin:12px 0}
.cp__bagian b{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-foreground);display:block;margin-bottom:5px}
.cp__scene{display:flex;gap:10px;background:var(--background);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.cp__scene-teks{font-size:13.5px;line-height:1.5}
.cp__scene-visual{font-size:12px;color:var(--muted-foreground);margin-top:3px}
.cp__detik{display:inline-block;background:var(--accent);color:#fff;border-radius:5px;padding:0 6px;font-size:10.5px;font-weight:700;flex-shrink:0;height:fit-content}
.cp__caption{background:var(--background);border:1px solid var(--border);border-radius:8px;padding:10px;font:12.5px/1.6 system-ui,sans-serif;white-space:pre-wrap;margin:0;max-height:220px;overflow:auto}
.cp__hashtag{display:flex;flex-wrap:wrap;gap:5px}
.cp__ide{margin:0;padding-left:18px;font-size:13px;line-height:1.7}
.cp__ref-item{padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px}
.cp__ref-item:last-child{border-bottom:0}
.cp__loading{display:flex;align-items:center;gap:8px;padding:16px;font-size:13.5px;color:var(--muted-foreground)}
.cp__error{display:flex;align-items:center;gap:8px;padding:14px;background:#fee2e2;color:#991b1b;border-radius:9px;font-size:13px}
.cp__form{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0}
.cp__field{display:flex;flex-direction:column;gap:4px}
.cp__field span{font:600 12.5px system-ui,sans-serif;color:var(--foreground)}
.cp__field input,.cp__field select,.cp__field textarea{padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:var(--background);color:var(--foreground);font:13px system-ui,sans-serif}
.cp__field--full{grid-column:1/-1}
.cp__form-judul{grid-column:1/-1;font-size:12.5px!important;margin-top:6px}
.cp__modal{max-width:680px;width:92vw;max-height:86vh;overflow:auto}
.cp__script-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cp__script-info{font-size:12.5px;color:var(--muted-foreground);margin:8px 0;line-height:1.7}
.cp__tabel-report th,.cp__tabel-report td{font-size:11.5px}

/* Content Planner — naskah siap shoot */
.cp__bs-pilihan{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.cp__field--topik{grid-column:1/-1}
.cp__bs-hint{padding:8px 2px 4px;border-top:1px dashed var(--border);margin-top:8px}
.cp__bagian--naskah{margin-top:14px;border-left:3px solid var(--accent);padding-left:10px}
.cp__bagian-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cp__bagian-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;flex:0 0 auto}
.cp__scene--naskah{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.cp__scene-no{font-size:11px;color:var(--muted-foreground);padding-top:2px;font-weight:600}
.cp__pov{font-size:12.5px;color:var(--muted-foreground);margin-bottom:4px}
.cp__vo{font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.cp__label{display:inline-block;min-width:34px;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.cp__seo-tanda{margin-top:6px;font-size:11.5px;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:6px;padding:3px 8px;display:inline-block}

/* badge FYP + alasan skor */
.cp__fyp-badge { font-weight: 700; font-size: 12.5px; }
.cp__fyp-alasan { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--muted); border-radius: 4px; font-size: 12.5px; line-height: 1.5; }

/* layout 2 kolom: konten utama + panel riset kanan */
.cp__layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.cp__riset{position:sticky;top:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;max-height:calc(100vh - 120px);overflow-y:auto}
.cp__riset-head{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cp__riset-bagian{margin-bottom:14px;font-size:13px}
.cp__riset-bagian>b{display:block;margin-bottom:6px;font-size:12.5px}
.cp__kw-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px}
.cp__kw-row>span:first-child{min-width:110px;color:var(--muted-foreground)}
.cp__bar{position:relative;flex:1;height:14px;background:var(--muted);border-radius:4px;overflow:visible}
.cp__bar-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:4px;opacity:.85}

/* diagram garis tren keyword ( 3 hari ) di panel riset kanan */
.cp__grafik{border:1px solid var(--border);border-radius:8px;padding:6px 8px;margin-bottom:8px;background:var(--card)}
.cp__grafik-head{display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:11.5px}
.cp__grafik-kw{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.cp__tren-naik{color:#16a34a;font-weight:700;font-size:10.5px}
.cp__tren-turun{color:#dc2626;font-weight:700;font-size:10.5px}
.cp__grafik-svg{display:block;width:100%;height:34px;margin:2px 0}
.cp__grafik-svg polyline{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.cp__grafik-svg circle{fill:var(--accent)}
.cp__grafik-sumbu{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted-foreground)}
.cp__bar>span{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--foreground)}
.cp__kw-item{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px dashed var(--border);font-size:12px}
.cp__kw-term{color:var(--foreground)}
.cp__kw-naik{font-size:10.5px;font-weight:700;color:#047857;white-space:nowrap}
.cp__kw-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.cp__riset-list{margin:4px 0 8px;padding-left:18px;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
@media (max-width:1100px){.cp__layout{grid-template-columns:1fr}.cp__riset{position:static;max-height:none}}

/* keyword SEO ditandai di dalam VO ( satu kesatuan script ) */
.cp__kw-mark{background:#fef9c3;color:#713f12;padding:0 2px;border-radius:3px;font-weight:600}
.cp__loading-inline{padding:12px;color:var(--muted-foreground);font-size:12.5px}

/* arahan shoot per scene + arahan jenis konten */
.cp__shoot{margin-top:5px;font-size:12px;color:var(--muted-foreground);border-left:2px solid var(--accent);padding-left:8px;line-height:1.5}
.cp__arahan-shoot{border-left:3px solid #7c3aed;background:var(--muted)}
.cp__arahan-list{margin:6px 0 0;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--muted-foreground)}

/* kartu platform connect */
.cp__platform-grid{display:grid;gap:8px;margin-top:6px}
.cp__platform-kartu{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--card)}
.cp__platform-kartu--on{border-color:#10b981;background:#ecfdf5}
.cp__platform-head{display:flex;align-items:center;gap:6px;font-size:12.5px}
.cp__platform-head b{flex:1}
.cp__platform-aksi{display:flex;gap:6px;margin-top:6px}

/* daftar konten viral */
.cp__viral-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cp__viral-item{display:block;border:1px solid var(--border);border-radius:8px;padding:7px 9px;text-decoration:none;color:inherit;background:var(--card)}
.cp__viral-item:hover{border-color:var(--accent)}
.cp__viral-judul{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp__viral-meta{display:flex;gap:6px;align-items:center;margin-top:4px;font-size:11px;color:var(--muted-foreground)}
.cp__viral-meta .pill{font-size:10px;padding:1px 6px}

/* Content Planner — filter & ringkasan per akun ( TikTok 1/2, Instagram 1/2 ) */
.cp__akun-filter{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.cp__akun-chip{border:1px solid var(--line,#d8dee9);background:var(--surface,#fff);color:inherit;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cp__akun-chip:hover{border-color:#94a3b8}
.cp__akun-chip.is-aktif{background:var(--accent,#1f2b42);border-color:var(--accent,#1f2b42);color:#fff}
.cp__akun-n{font-size:11px;opacity:.7;font-weight:700}
.cp__akun-ringkasan{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:4px 0 6px}
.cp__akun-kartu{border:1px solid var(--line,#d8dee9);border-left-width:4px;border-radius:10px;padding:10px 12px;background:var(--surface,#fff)}
.cp__akun-kartu--slate{border-left-color:#475569}
.cp__akun-kartu--purple{border-left-color:#7c3aed}
.cp__akun-kartu--red{border-left-color:#a32026}
.cp__akun-kartu--amber{border-left-color:#d97706}
.cp__akun-kartu-head{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.cp__akun-kartu-isi{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.cp__akun-kartu-isi div{display:flex;flex-direction:column}
.cp__akun-kartu-isi b{font-size:15px}

/* Admin Gudang — hanya lihat & cetak surat jalan */
.oe--hanya-cetak [data-act=tambah],.oe--hanya-cetak [data-act=import],.oe--hanya-cetak [data-act=appsheet],
.oe--hanya-cetak [data-act=hapus],.oe--hanya-cetak [data-act=selesai],.oe--hanya-cetak [data-act=ubah-ket]{display:none!important}

/* Tab Notifikasi ( ikon surat ) */
.nav-badge--notif{background:#dc2626;color:#fff}
.nt{max-width:980px}
.nt__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.nt__judul{display:flex;gap:12px;align-items:center}
.nt__judul h2{margin:0}
.nt__logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent,#2563eb);color:#fff}
.nt__alat{display:flex;flex-wrap:wrap;gap:6px}
.nt__bagian{margin:14px 0 18px}
.nt__bagian-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.nt__kartu{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line,#d8dee9);border-left:4px solid #f59e0b;border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--surface,#fff)}
.nt__kartu--kritis{border-left-color:#dc2626;background:rgba(220,38,38,.06)}
.nt__kartu.is-dibaca{opacity:.72}
.nt__ikon{flex:0 0 auto;color:var(--text-2,#475569);margin-top:2px}
.nt__teks{flex:1;min-width:0}
.nt__kartu-judul{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.nt__titik{width:8px;height:8px;border-radius:50%;background:#dc2626;display:inline-block}
.nt__pesan{font-size:13px;line-height:1.5;margin-bottom:3px}
.nt__aksi{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.nt__kosong{border:1px dashed var(--line,#d8dee9);border-radius:10px;padding:12px 14px}
.nt__aturan{margin-top:18px;border:1px solid var(--line,#d8dee9);border-radius:10px;padding:10px 14px;font-size:13px}
.nt__aturan summary{cursor:pointer;font-weight:600}
.nt__aturan ol{margin:10px 0 0 18px;line-height:1.6}
.nt__peringatan{background:#fef3c7;color:#92400e;border-radius:8px;padding:9px 12px;font-size:13px;margin:8px 0}
@media (max-width:640px){.nt__kartu{flex-wrap:wrap}.nt__aksi{flex-direction:row}}

/* Content Planner — filter tanggal + impor spreadsheet */
.cp__filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:10px 0 2px;padding:10px 12px;border:1px solid var(--line,#d8dee9);border-radius:10px;background:var(--surface-2,#f8fafc)}
.cp__filter-f{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:600;color:var(--text-2,#475569)}
.cp__filter-f input,.cp__filter-f select{height:32px;border:1px solid var(--line,#d8dee9);border-radius:8px;padding:0 8px;font-size:13px;background:var(--surface,#fff);color:inherit}
.cp__filter-cari input{min-width:170px}
.cp__filter-preset{display:flex;flex-wrap:wrap;gap:5px;align-self:flex-end;padding-bottom:2px}
.cp__impor-btn{margin-left:auto;align-self:flex-end}
.cp__filter-ket{margin:2px 0 6px}
.cp__modal-impor{max-width:860px;width:min(860px,96vw)}
.cp__impor{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.cp__impor-sumber{display:grid;grid-template-columns:1fr auto 1.4fr;gap:10px;align-items:end}
.cp__impor-atau{font-size:12px;color:var(--text-3,#94a3b8);padding-bottom:9px}
.cp__impor-link{display:flex;gap:6px}
.cp__impor-link input{flex:1}
.cp__impor-pesan{border-radius:8px;padding:9px 12px;font-size:13px;background:var(--surface-2,#f1f5f9)}
.cp__impor-pesan--error{background:#fee2e2;color:#991b1b}
.cp__impor-pesan--warn{background:#fef3c7;color:#92400e;margin:8px 0}
.cp__impor-ringkas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 10px}
.cp__impor-ringkas div{border:1px solid var(--line,#d8dee9);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
.cp__impor-ringkas b{font-size:18px}
.cp__impor-ringkas span{font-size:11.5px;color:var(--text-3,#64748b)}
.cp__impor-ringkas .is-baik{border-color:#16a34a}
.cp__impor-ringkas .is-baik b{color:#16a34a}
@media (max-width:720px){.cp__impor-sumber{grid-template-columns:1fr}.cp__impor-atau{padding:0}.cp__impor-ringkas{grid-template-columns:repeat(2,1fr)}.cp__impor-btn{margin-left:0}}

/* Content Planner — tombol Tulis ( naskah manual tanpa brainstorm ) */
.cp__bs-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp__btn-tulis{border:1px solid var(--accent,#2563eb);color:var(--accent,#2563eb);background:var(--surface,#fff)}
.cp__btn-tulis:hover{background:var(--accent,#2563eb);color:#fff}

/* Content Planner — ACC banyak sekaligus */
.cp__cek{width:34px;text-align:center}
.cp__cek input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent,#2563eb)}
.cp__bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px 12px;border-radius:10px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.3)}
.cp__bulk[hidden]{display:none}
.cp__bulk b{margin-right:6px}

/* Notifikasi — kabar selesai + pesan pojok kanan bawah ( satu per notif, dengan bunyi ) */
.nt__kartu--selesai{border-left-color:#16a34a;background:rgba(22,163,74,.06)}
.nt-pesan{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.nt-pesan__kartu{pointer-events:auto;position:relative;background:var(--surface,#fff);color:var(--foreground,#0f172a);border:1px solid var(--line,#d8dee9);border-left:4px solid #f59e0b;border-radius:12px;padding:10px 30px 10px 12px;box-shadow:0 10px 30px rgba(15,23,42,.18);font-size:13px;line-height:1.45;animation:ntMasuk .25s ease-out}
.nt-pesan__kartu--kritis{border-left-color:#dc2626}
.nt-pesan__kartu--selesai{border-left-color:#16a34a}
.nt-pesan__info{border-left-color:var(--accent,#2563eb)}
.nt-pesan__kartu b{display:block;margin-bottom:2px}
.nt-pesan__isi{color:var(--text-2,#475569)}
.nt-pesan__aksi{display:flex;align-items:center;gap:8px;margin-top:6px}
.nt-pesan__buka{border:0;border-radius:7px;padding:4px 10px;font-weight:600;font-size:12px;background:var(--accent,#2563eb);color:#fff;cursor:pointer}
.nt-pesan__sisa{font-size:11.5px;color:var(--text-3,#94a3b8)}
.nt-pesan__tutup{position:absolute;top:4px;right:6px;border:0;background:none;font-size:18px;line-height:1;color:var(--text-3,#94a3b8);cursor:pointer}
@keyframes ntMasuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Reporting — pengajuan edit */
.cp__pill-kecil{font-size:10.5px;padding:2px 7px;white-space:nowrap}
.cp__tabel-report .cp__aksi{white-space:nowrap}
.cp__tabel-report .cp__aksi .btn--xs{margin-left:4px}

/* Kirim Notif ( Owner ) */
.kn{max-width:620px}
.kn__isi{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.kn__template{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kn__tujuan{border:1px solid var(--line,#d8dee9);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:6px;margin:0}
.kn__tujuan legend{font-size:12.5px;font-weight:600;padding:0 4px}
.kn__cek{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.kn__cek input{width:16px;height:16px;accent-color:var(--accent,#2563eb)}
.kn__cek--semua{padding-bottom:4px;border-bottom:1px dashed var(--line,#d8dee9)}
.kn__opsi{display:flex;flex-direction:column;gap:6px}
.kn__riwayat{display:flex;flex-direction:column;gap:6px}
.kn__riwayat-baris{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line,#d8dee9);border-radius:8px;padding:6px 10px;font-size:12.5px}
.cp__report-owner{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;padding:10px 12px;border-radius:10px;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.25)}
.nt-pesan__kartu--pesan{border-left-color:var(--accent,#2563eb)}

/* Order — kolom terkunci ( readonly, tetap ikut tersimpan ) */
.oe__field input.oe__terkunci{background:var(--surface-2,#f1f5f9);color:var(--text-2,#475569);cursor:not-allowed}

/* Order — pengajuan edit */
.oe__aju{margin:10px 0 4px;padding:10px 12px;border-radius:10px;border:1px solid var(--line,#d8dee9);background:var(--surface-2,#f8fafc);display:flex;flex-direction:column;gap:6px;font-size:13px}
.oe__aju textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#d8dee9);border-radius:8px;padding:8px 10px;font:inherit;resize:vertical}
.oe__aju-aksi{display:flex;justify-content:flex-end;gap:8px}
.oe__aju--menunggu{border-color:#f59e0b;background:rgba(245,158,11,.08)}
.oe__aju--ditolak{border-color:#dc2626;background:rgba(220,38,38,.06)}
.oe__aju[hidden]{display:none}
.nt__peringatan--ok{background:#dcfce7;color:#166534}

/* Content Planner — kolom terkunci ( akun / acc ) & peringatan tanggal bentrok */
.cp__field input.oe__terkunci{background:var(--surface-2,#f1f5f9);color:var(--text-2,#475569);cursor:not-allowed}
.cp__bentrok{display:block;margin-top:4px;color:#b91c1c;font-size:12px;line-height:1.35}

/* ---- KPI content creator ( Content Planner → KPI ) ---- */
.kpi{display:flex;flex-direction:column;gap:14px}
.kpi__atas{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.kpi__atas .cp__field{min-width:170px}
.kpi__panel{border:1px solid var(--border);border-radius:10px;background:var(--card);padding:10px 14px}
.kpi__panel summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.kpi__pengaturan{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.kpi__pengaturan fieldset{border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.kpi__pengaturan legend{font-weight:600;font-size:12.5px;padding:0 4px}
.kpi__absensi{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kpi__absensi-pilih{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.kpi__unggah{cursor:pointer}
.kpi__kartu{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:14px;display:flex;flex-direction:column;gap:10px}
.kpi__kepala{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kpi__nama{font-weight:700;font-size:15px}
.kpi__nilai{display:flex;flex-direction:column;align-items:flex-end;min-width:120px;padding:6px 12px;border-radius:10px;background:var(--muted)}
.kpi__nilai b{font-size:24px;line-height:1.1}
.kpi__nilai span{font-size:12px;font-weight:600}
.kpi__nilai--green{background:#dcfce7;color:#166534}
.kpi__nilai--blue{background:#dbeafe;color:#1e40af}
.kpi__nilai--amber{background:#fef3c7;color:#92400e}
.kpi__nilai--red{background:#fee2e2;color:#991b1b}
.kpi__tabel{white-space:normal}
.kpi__tabel td:nth-child(n+3){white-space:nowrap}
.kpi__tabel td:nth-child(5){white-space:normal;min-width:180px}
.kpi__bawah{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.kpi__catatan{flex:1 1 380px;display:flex;flex-direction:column;gap:6px}
.kpi__aksi{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* ---- KPI v2 ( desain "Tampilan Tab KPI MOS" ) ---- */
.kpi2{--k-navy:#1f2b42;--k-merah:#a32026;--k-garis:#9aa3b2}
.kpi2__judul{margin:0;font-size:20px;font-weight:800;color:var(--k-navy)}
.kpi2__kontrol{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.kpi2__status{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;background:#fff4dc;color:#6b4300;font-size:12.5px;font-weight:600}
.kpi2__status.is-final{background:#d9efe2;color:#14532d}
.kpi2__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kpi2__kartu{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:14px;display:flex;flex-direction:column;gap:10px}
.kpi2__kartu-atas{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.kpi2__role{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--k-merah)}
.kpi2__nama{font-size:17px;font-weight:800}
.kpi2__grade{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border-radius:10px}
.kpi2__grade b{font-size:28px;line-height:1}
.kpi2__grade span{font-size:11px;font-weight:700;text-align:center;max-width:76px;line-height:1.2}
.kpi2__skor b{font-size:30px;font-weight:800}
.kpi2__skor span{font-size:13px;color:var(--muted-foreground);margin-left:4px}
.kpi2__bagian{display:flex;flex-direction:column;gap:6px}
.kpi2__bar-label{display:flex;justify-content:space-between;font-size:12px}
.kpi2__bar-jalur{height:6px;border-radius:99px;background:var(--muted);overflow:hidden}
.kpi2__bar-jalur i{display:block;height:100%;background:var(--k-navy);border-radius:99px}
.kpi2__catat{font-size:12px;background:#fbe9ea;color:#8a1a20;border-radius:8px;padding:6px 8px}
.kpi2__panel{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:14px;display:flex;flex-direction:column;gap:10px}
.kpi2__panel-judul{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kpi2__panel-judul b{font-size:15px}
.kpi2__tabel{white-space:normal}
.kpi2__tabel th{white-space:nowrap;font-size:11.5px}
.kpi2__angka{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi2__chip{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:normal;min-width:84px;text-align:center;line-height:1.3}
.kpi2__catatan-sel{min-width:240px;font-size:12px}
.kpi2__aksi-sel{white-space:nowrap}
.kpi2__aksi-sel .btn{margin:2px 0}
.kpi2__dua{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:14px;align-items:start}
.kpi2__dua>div{display:flex;flex-direction:column;gap:14px}
@media (max-width:980px){.kpi2__dua{grid-template-columns:1fr}}
.kpi2__matriks td,.kpi2__matriks th{font-size:12px}
.kpi2__absen--ok{background:#fff}
.kpi2__absen--warn{background:#fff4dc;color:#6b4300}
.kpi2__absen--info{background:#e6eefb;color:#1e3a6e}
.kpi2__absen--off{background:#eef0f3;color:#3a4356}
.kpi2__absen--bad{background:#fbe9ea;color:#8a1a20}
.kpi2__talenta{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--border);border-radius:10px;padding:10px}
.kpi2__mohon{border-top:1px solid var(--border);padding-top:8px}
.kpi2__mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi2__mini b{font-size:22px}
/* slip */
.kpi2-slip-wrap{background:#e9ebef;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.kpi2-slip-alat{max-width:1080px;width:100%;margin:0 auto;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kpi2-slip{max-width:1080px;width:100%;margin:0 auto;background:#fff;color:#1a2233;box-shadow:0 1px 3px rgba(20,30,50,.12);font-variant-numeric:tabular-nums}
.kpi2-slip__kop{background:#1f2b42;color:#fff;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.kpi2-slip__kop>div:first-child{display:flex;flex-direction:column;gap:4px}
.kpi2-slip__sub{font-size:12px;letter-spacing:.12em;color:#c9d1e0;text-transform:uppercase}
.kpi2-slip__judul{font-size:26px;font-weight:800;letter-spacing:.02em}
.kpi2-slip__logo{display:flex;align-items:center;gap:10px}
.kpi2-slip__logo span{display:inline-flex;width:40px;height:40px;border-radius:8px;background:#a32026;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.kpi2-slip__logo b{font-size:22px;line-height:1.05}
.kpi2-slip__id{padding:20px 28px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;border-bottom:1px solid #e1e4ea}
.kpi2-slip__id dl{margin:0;display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 12px;font-size:14px;flex:1 1 460px}
.kpi2-slip__id dt{color:#4a5468}
.kpi2-slip__id dd{margin:0;font-weight:700;border-bottom:1px solid #c7ccd6}
.kpi2-slip__tag{font-size:11px;font-weight:600;color:#1e3a6e;background:#e6eefb;padding:2px 6px;border-radius:4px;margin-left:6px}
.kpi2-slip__nilai{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-width:260px}
.kpi2-slip__grade{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px;border-radius:10px}
.kpi2-slip__grade b{font-size:44px;line-height:1}
.kpi2-slip__grade span{display:block;font-size:18px;font-weight:800;letter-spacing:.04em}
.kpi2-slip__grade small{font-size:13px;font-weight:600}
.kpi2-slip__tgl{font-size:18px;font-weight:700;text-align:center}
.kpi2-slip__tgl-lbl{border-top:1px solid #1a2233;padding-top:6px;font-size:11px;font-weight:700;text-align:center;letter-spacing:.04em}
.kpi2-slip__isi{padding:20px 28px}
.kpi2-slip__tabel{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px}
.kpi2-slip__tabel th,.kpi2-slip__tabel td{border:1px solid #9aa3b2;padding:8px;vertical-align:middle}
.kpi2-slip__tabel thead th{background:#eef0f4;font-size:12px}
.kpi2-slip__grup{text-align:left;background:#1f2b42;color:#fff;padding:7px 10px!important;font-size:12px;letter-spacing:.04em}
.kpi2-slip__kpi{text-align:left;vertical-align:top!important;width:170px}
.kpi2-slip__formula{padding:0!important;vertical-align:top!important}
.kpi2-slip__formula div{padding:4px 8px;border-bottom:1px solid #d6dae2;line-height:1.4}
.kpi2-slip__formula div:last-child{border-bottom:0}
.kpi2-slip .c{text-align:center}.kpi2-slip .r{text-align:right}.kpi2-slip .b{font-weight:700}
.kpi2-slip .besar{font-weight:800;font-size:14px}
.kpi2-slip__bawah{padding:0 28px 20px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.kpi2-slip__indeks{flex:0 1 320px;border-collapse:collapse;font-size:12.5px;align-self:flex-start}
.kpi2-slip__indeks caption{text-align:center;font-weight:800;padding:6px;border:1px solid #9aa3b2;border-bottom:0}
.kpi2-slip__indeks th,.kpi2-slip__indeks td{border:1px solid #9aa3b2;padding:6px}
.kpi2-slip__indeks thead th{background:#eef0f4}
.kpi2-slip__indeks tr.is-aktif td{outline:2px solid #1f2b42;outline-offset:-2px}
.kpi2-slip__catatan{flex:999 1 480px;min-width:0;border:1px solid #9aa3b2;display:flex;flex-direction:column}
.kpi2-slip__catatan-isi{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.kpi2-slip__catatan-isi p{margin:0;font-size:13px;line-height:1.6}
.kpi2-slip__catatan-isi textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;border:1px solid #c7ccd6;border-radius:6px;padding:6px 8px}
.kpi2-slip__catatan-kaki{border-top:1px solid #9aa3b2;padding:8px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;letter-spacing:.04em}
.kpi2-slip__lampiran{padding:0 28px 28px;display:flex;flex-direction:column;gap:8px}
.kpi2-slip__lampiran ul{margin:0;padding:0;list-style:none;border:1px solid #9aa3b2}
.kpi2-slip__lampiran li{display:flex;flex-wrap:wrap;gap:12px;padding:7px 10px;border-bottom:1px solid #d6dae2;font-size:12.5px;align-items:baseline}
.kpi2-slip__lampiran li:last-child{border-bottom:0}
.kpi2-slip__lampiran li>span:first-child{min-width:60px}
.kpi2-slip__lampiran li>span:nth-child(2){min-width:100px}
.kpi2-slip__lampiran .t{flex:1 1 320px}
.kpi2-ev--bad{color:#8a1a20}.kpi2-ev--warn{color:#6b4300}.kpi2-ev--info{color:#1e3a6e}

/* teks panjang tidak keluar kolom */
.kpi2__kartu,.kpi2__kartu *{min-width:0;overflow-wrap:anywhere}
.kpi2__tabel td,.kpi2__tabel th{overflow-wrap:anywhere}
.kpi2-slip__tabel td,.kpi2-slip__tabel th{overflow-wrap:anywhere}
.kpi2-slip__id dd{overflow-wrap:anywhere}
.kpi2-slip__grade span{overflow-wrap:anywhere}
.kpi2__absen{min-width:120px}

/* Content Planner — pengajuan planning terlambat ( lewat 15.00 H-1 ) */
.cp__telat{display:flex;flex-direction:column;gap:8px;border:1px solid #f3c77a;background:#fff8e6;border-radius:10px;padding:10px 12px}
.cp__telat-info{font-size:12.5px;line-height:1.45;color:#6b4300}
.cp__telat-status{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:4px}
.cp__btn-ajukan{background:#b45309;border-color:#b45309}

/* ===== v5.26 — revisi planning, terlambat, tugas urgent ===== */
.pill--orange{background:#ffedd5;color:#9a3412}
.cp__rev-n{display:inline-block;margin-left:4px;font-size:10.5px;font-weight:700;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:0 6px;vertical-align:middle}
.cp__revisi{display:flex;flex-direction:column;gap:8px;border:1px solid #fdba74;background:#fff7ed;border-radius:10px;padding:10px 12px}
.cp__revisi-aktif{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#7c2d12}
.cp__revisi-aktif div{white-space:pre-wrap;overflow-wrap:anywhere}
.cp__revisi-riwayat summary{cursor:pointer;font-size:12.5px;color:#7c2d12}
.cp__revisi-riwayat ol{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.cp__revisi-riwayat li div{white-space:pre-wrap;overflow-wrap:anywhere}
.cp__revisi-fix{color:#166534;font-size:12px}
.cp__revisi-baru textarea{border-color:#fdba74}
.cp__telat-pill{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;color:#991b1b;background:#fee2e2;border-radius:999px;padding:1px 7px;white-space:nowrap}
.tu{display:flex;flex-direction:column;gap:14px}
.tu__atas{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.tu__atas>div:first-child{max-width:720px}
.tu__tombol{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tu__filter{display:flex;gap:4px}
.tu__kartu{border:1px solid var(--line,#e2e8f0);border-left:4px solid #6366f1;border-radius:12px;background:var(--panel,#fff);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.tu__kartu--mepet{border-left-color:#f59e0b}
.tu__kartu--lewat{border-left-color:#dc2626}
.tu__kepala{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tu__judul{font-weight:700;font-size:15px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tu__aksi-owner{display:flex;gap:4px}
.tu__brief{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;background:#f8fafc;border-radius:8px;padding:8px 10px}
.tu__merah{color:#b91c1c}
.tu__tabel td{vertical-align:top}
.tu__aksi{display:flex;gap:4px;flex-wrap:wrap}
.tu__hasil{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.tu__thumb img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid #e2e8f0;display:block}
.tu__pdf{font-size:12px;display:inline-block;padding:4px 8px;border:1px solid #e2e8f0;border-radius:8px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tu__revisi-aktif{font-size:12.5px;color:#7c2d12;background:#fff7ed;border:1px solid #fdba74;border-radius:8px;padding:6px 8px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.tu__modal{max-width:640px;width:calc(100vw - 32px)}
.tu__pilih{display:flex;flex-wrap:wrap;gap:6px 14px;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px}
.tu__cek{display:flex;gap:6px;align-items:center;font-size:13px}
.tu__pratinjau{display:flex;flex-direction:column;gap:4px}
.tu__file{display:flex;gap:8px;align-items:center;font-size:12.5px}
.tu__file img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.tu__file--salah{color:#b91c1c}
.tu__riwayat{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;font-size:13px;max-height:60vh;overflow:auto}
.tu__riwayat div{overflow-wrap:anywhere}
@media (max-width:640px){.tu__kepala{flex-direction:column}}

/* ===== v5.27 — Dashboard Sosmed ===== */
.ds{--ds-bg:#2f4468;--ds-panel:#3a5079;--ds-garis:#4d6390;--ds-kuning:#f5b301;--ds-teks:#eef2fb;--ds-redup:#b7c3dd;background:var(--ds-bg);color:var(--ds-teks);border-radius:16px;padding:0 16px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.ds a{color:#ffd45c}
.ds-head{margin:0 -16px;padding:12px 16px 10px;border-bottom:6px solid var(--ds-kuning);text-align:center;background:#283b5c}
.ds-head__judul{font-weight:900;letter-spacing:.06em;font-size:22px;color:#fff}
.ds-head__sub{font-size:12.5px;color:var(--ds-redup);margin-top:2px}
.ds-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ds-filter label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ds-redup)}
.ds-filter select,.ds-urut{background:#24365a;color:#fff;border:1px solid var(--ds-garis);border-radius:8px;padding:6px 8px;font-size:13px;min-width:150px}
.ds-filter__info{font-size:12px;color:var(--ds-redup);margin-left:auto}
.ds-panel{background:var(--ds-panel);border:1px solid var(--ds-garis);border-radius:12px;padding:12px 14px;min-width:0}
.ds-panel__judul{font-weight:700;color:var(--ds-kuning);font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ds-panel__judul--besar{font-size:17px;color:#fff}
.ds-baris1{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:14px}
.ds-ikon-row{display:flex;justify-content:space-around;align-items:center;gap:6px;flex-wrap:wrap}
.ds-ikon{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px}
.ds-ikon svg{width:46px;height:46px}
.ds-ikon--view svg{color:#ff4d6d}.ds-ikon--like svg{color:#ffa94d}.ds-ikon--comment svg{color:#ff6b9a}.ds-ikon--save svg{color:#c77dff}.ds-ikon--share svg{color:#b388ff}
.ds-ikon b{font-size:22px;color:var(--ds-kuning);font-weight:700}
.ds-ikon span{font-size:11.5px;color:var(--ds-redup)}
.ds-ikon em,.ds-delta{font-style:normal;font-size:11px;font-weight:700}
.ds-ikon em.naik,.ds-delta--naik{color:#6ee7a8}.ds-ikon em.turun,.ds-delta--turun{color:#ff8f8f}
.ds-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ds-kpi{background:var(--ds-panel);border:1px solid var(--ds-garis);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:1px}
.ds-kpi__label{font-size:12px;color:#fff}
.ds-kpi__nilai{font-size:26px;font-weight:700;color:var(--ds-kuning);line-height:1.15}
.ds-kpi__sub{font-size:11px;color:var(--ds-redup)}
.ds-baris2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ds-baris2--dua{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.ds-baris3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ds-svg{width:100%;height:auto;display:block}
.ds-grid{stroke:#ffffff22;stroke-width:1}
.ds-sumbu{fill:#c9d4ee;font-size:11px}
.ds-legenda{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--ds-redup);margin:-4px 0 4px}
.ds-legenda i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-left:6px}
.ds-funnel{display:flex;flex-direction:column;gap:8px}
.ds-funnel__baris{display:grid;grid-template-columns:96px 1fr 52px;gap:8px;align-items:center}
.ds-funnel__nama{display:flex;flex-direction:column;text-align:right;font-size:11.5px;line-height:1.15}
.ds-funnel__nama span{color:var(--ds-redup);font-size:10.5px}
.ds-funnel__jalur{height:30px;background:#ffffff10;border-radius:4px;position:relative}
.ds-funnel__bar{height:100%;background:var(--ds-kuning);border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;min-width:34px}
.ds-funnel__bar span{font-size:11px;font-weight:700;color:#3a2a00;white-space:nowrap}
.ds-funnel__rasio{font-size:11px;color:var(--ds-redup)}
.ds-funnel__baris--kosong .ds-funnel__nama b{color:var(--ds-redup)}
.ds-catatan{font-size:11px;color:var(--ds-redup);margin-top:8px}
.ds-tabel-wrap{overflow-x:auto}
.ds-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.ds-tabel th{color:var(--ds-kuning);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--ds-garis);white-space:nowrap}
.ds-tabel td{padding:6px 8px;border-bottom:1px solid #ffffff12;vertical-align:top}
.ds-tabel .r{text-align:right}.ds-tabel .b{font-weight:700}
.ds-tabel__judul{max-width:280px;overflow-wrap:anywhere}
.ds-tabel__sub{font-size:10.5px;color:var(--ds-redup)}
.ds-tabel--grup td{vertical-align:middle}
.ds-minibar{position:relative;height:18px;background:#ffffff10;border-radius:4px;min-width:110px}
.ds-minibar div{height:100%;background:var(--ds-kuning);border-radius:4px;opacity:.85}
.ds-minibar span{position:absolute;left:6px;top:1px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px #0008}
.ds-insight ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5}
.ds-insight b{color:#ffd45c}
.ds-gender__bar{display:flex;height:22px;border-radius:6px;overflow:hidden}
.ds-gender__pria{background:#6ea8fe}.ds-gender__wanita{background:#ff8fb3}.ds-gender__fol{background:#9aa9c9}.ds-gender__nonfol{background:var(--ds-kuning)}
.ds-gender__ket{display:flex;justify-content:space-between;font-size:12px;margin-top:4px;color:var(--ds-redup)}
.ds-gender__ket b{color:#fff}
.ds-redup{color:var(--ds-redup);font-size:12.5px}
.ds-kosong{text-align:center;padding:30px 14px;display:flex;flex-direction:column;gap:6px}
@media (max-width:1200px){.ds-baris1{grid-template-columns:1fr}.ds-baris2,.ds-baris3{grid-template-columns:1fr 1fr}.ds-baris2--dua{grid-template-columns:1fr}}
@media (max-width:760px){.ds-baris2,.ds-baris3{grid-template-columns:1fr}.ds-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-filter__info{margin-left:0}}

/* ===== v5.28 — tata letak mengikuti lebar layar ===== */
/* Order Ecommerce: tidak lagi dikunci 1100px — kartu platform mengisi layar & menyesuaikan zoom */
.oe{max-width:none;width:100%}
.oe__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.oe__card{min-height:clamp(180px,22vh,260px)}
.oe__card-label{font-size:clamp(22px,2.2vw,34px)}
/* KPI: kartu kreator melebar memenuhi baris ( tidak menyisakan area kosong di kanan ) */
.kpi2__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.kpi2__grade{flex:none}
.kpi2__grade,.kpi2__grade *{overflow-wrap:normal;word-break:normal;hyphens:none}
.kpi2__grade span{max-width:none;white-space:nowrap}
/* v5.29 — judul kolom tanggal bisa diklik untuk mengurutkan */
.cp__th-urut{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;font-weight:inherit;color:inherit;white-space:nowrap;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.cp__th-urut span{font-size:10px;opacity:.45}
.cp__th-urut:hover{background:rgba(37,99,235,.08)}
.cp__th-urut.is-aktif span{opacity:1;color:#2563eb}
.cp__th-urut:focus-visible{outline:2px solid #2563eb}
/* v5.31 — judul bagian di sub menu Ads */
.nav-sub__judul{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:10px 10px 3px}
.nav-sub__judul:first-child{padding-top:4px}
/* v5.32 — Penyimpanan Data ringkas */
.dv-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-bottom:16px;font-size:13px}
.dv-status__teks{flex:1;min-width:220px;overflow-wrap:anywhere}
.dv-status__tombol{display:flex;gap:8px;flex-wrap:wrap}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px;align-items:start}
.dv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dv-dot--green{background:#16a34a}.dv-dot--amber{background:#d97706}.dv-dot--red{background:#dc2626}
.dv-tabel-wrap{overflow-x:auto}
.dv-tabel{width:100%;border-collapse:collapse;font-size:13px}
.dv-tabel th{font-size:11.5px;font-weight:600;color:var(--text-3);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.dv-tabel td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.dv-tabel tr:last-child td{border-bottom:0}
.dv-tabel .num{text-align:right;white-space:nowrap}
.dv-tabel td:first-child{width:14px;padding-right:0}
.dv-sub{font-size:11px;color:var(--text-3);max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-hilang{background:rgba(220,38,38,.05)}
.dv-aksi{white-space:nowrap;text-align:right}
.dv-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.dv-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.dv-chip{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--text-2)}
.dv-chip span{font-weight:700;margin-left:2px;opacity:.7}
.dv-chip.is-aktif{background:#27344e;color:#fff;border-color:#27344e}
.dv-cari{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12.5px;min-width:180px;background:var(--card);color:var(--text)}
.dv-daftar{display:flex;flex-direction:column}
.dv-grup{border-bottom:1px solid var(--border)}
.dv-grup:last-child{border-bottom:0}
.dv-grup summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:8px 4px;cursor:pointer;font-size:13px}
.dv-grup summary::-webkit-details-marker{display:none}
.dv-grup summary:hover{background:rgba(37,99,235,.05)}
.dv-grup[open] summary{background:rgba(37,99,235,.06)}
.dv-grup__nama{min-width:0;display:flex;flex-direction:column}
.dv-grup__nama b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-grup__nama small{font-size:11px;color:var(--text-3)}
.dv-grup__versi{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.dv-grup__ukuran{font-size:12px;white-space:nowrap;text-align:right;min-width:60px}
.dv-grup__tgl{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.dv-chip-platform{font-size:11px;min-width:58px;text-align:center}
.dv-versi{width:100%;border-collapse:collapse;font-size:11.5px;margin:0 0 8px}
.dv-versi td{padding:4px 8px;border-top:1px dashed var(--border)}
.dv-versi .num{text-align:right;white-space:nowrap}
.dv-versi .muted{white-space:nowrap}
.dv-nama-file{overflow-wrap:anywhere;color:var(--text-2)}
.dv-info{margin-top:16px}
.dv-info summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:13.5px;display:flex;gap:8px;align-items:center}
@media (max-width:700px){.dv-grup summary{grid-template-columns:auto minmax(0,1fr) auto}.dv-grup__versi,.dv-grup__tgl{display:none}}
.dv-tabel td .dv-chip-platform{min-width:0;margin-right:4px;padding:1px 8px}
.dv-sub{max-width:300px}
.dv-cari{flex:0 1 220px}
.dv-aksi .icon-btn{display:inline-flex;vertical-align:middle}

/* ===== v5.33 — kolom isian tidak flat: judul kolom tegas, kotak isian jelas ===== */
.cp .cp__field>span,.cp__modal .cp__field>span,.tu__modal .cp__field>span,.kpi .cp__field>span,.kpi2 .cp__field>span,.cp__filter-f>span{
  font:700 11px var(--font);letter-spacing:.05em;text-transform:uppercase;color:#334155;display:flex;align-items:center;gap:4px}
.cp .cp__field input,.cp .cp__field select,.cp .cp__field textarea,
.cp__modal .cp__field input,.cp__modal .cp__field select,.cp__modal .cp__field textarea,
.tu__modal .cp__field input,.tu__modal .cp__field select,.tu__modal .cp__field textarea,
.kpi .cp__field input,.kpi .cp__field select,.kpi .cp__field textarea{
  background:#fff;border:1px solid #c5cfdd;border-radius:8px;padding:8px 10px;color:var(--text);
  font:13px var(--font);box-shadow:inset 0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,box-shadow .15s}
.cp .cp__field input::placeholder,.cp__modal .cp__field input::placeholder,.cp .cp__field textarea::placeholder,.cp__modal .cp__field textarea::placeholder,.tu__modal .cp__field textarea::placeholder{color:#94a3b8}
.cp .cp__field input:hover,.cp .cp__field select:hover,.cp .cp__field textarea:hover,.cp__modal .cp__field input:hover,.cp__modal .cp__field select:hover,.cp__modal .cp__field textarea:hover{border-color:#94a3b8}
.cp .cp__field input:focus,.cp .cp__field select:focus,.cp .cp__field textarea:focus,
.cp__modal .cp__field input:focus,.cp__modal .cp__field select:focus,.cp__modal .cp__field textarea:focus,
.tu__modal .cp__field input:focus,.tu__modal .cp__field textarea:focus,.tu__modal .cp__field select:focus,
.kpi .cp__field input:focus,.kpi .cp__field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.cp__field input.oe__terkunci,.cp__modal .cp__field input[readonly]{background:#eef1f6;color:#475569;border-style:dashed;cursor:not-allowed}
/* judul tabel: pita abu-abu supaya beda dengan isinya */
.cp__tabel thead th,.kpi__tabel thead th,.tu__tabel thead th{background:#e9eef6;color:#1e293b;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid #cdd6e3;white-space:nowrap}
.cp__tabel thead th:first-child,.kpi__tabel thead th:first-child,.tu__tabel thead th:first-child{border-top-left-radius:8px}
.cp__tabel thead th:last-child,.kpi__tabel thead th:last-child,.tu__tabel thead th:last-child{border-top-right-radius:8px}
.cp__th-urut{color:inherit;text-transform:inherit;letter-spacing:inherit}

/* ===== v5.33 — Katalog Dataset: grid kartu per platform ===== */
.dc-alat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.dc-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.dc-bagian{margin-bottom:18px}
.dc-bagian__judul{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#334155;margin:0 2px 8px}
.dc-bagian__judul span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3);margin-left:6px}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;align-items:start}
.dc-kartu{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-sm);min-width:0;transition:box-shadow .15s,border-color .15s}
.dc-kartu:hover{border-color:#94a3b8;box-shadow:var(--shadow)}
.dc-kartu.is-buka{grid-column:1/-1;border-color:var(--blue)}
.dc-kartu__kepala{display:flex;gap:12px;align-items:flex-start;padding:14px;cursor:pointer}
.dc-kartu__ikon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;background:#eef1f6;color:#475569}
.dc-ikon--tiktok{background:#111827;color:#5eead4}.dc-ikon--shopee{background:#fde4dc;color:#c2410c}.dc-ikon--lazada{background:#e0e7ff;color:#3730a3}.dc-ikon--shared{background:#e0f2fe;color:#0369a1}
.dc-kartu__teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dc-kartu__teks b{font-size:14px;line-height:1.3}
.dc-kartu__sumber{font-size:12px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-kartu__meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:11.5px;color:#475569}
.dc-kartu__meta>span:not(.pill){background:#eef1f6;border-radius:999px;padding:1px 8px;font-weight:600}
.dc-kartu__isi{padding:0 14px 14px}
.dc-kartu .ds-card__chev{transition:transform .15s;color:var(--text-3)}
.dc-kartu.is-buka .ds-card__chev{transform:rotate(180deg)}
.cp .cp__field input,.cp .cp__field select,.cp .cp__field textarea,.cp__modal .cp__field input,.cp__modal .cp__field select,.cp__modal .cp__field textarea,.tu__modal .cp__field input,.tu__modal .cp__field select,.tu__modal .cp__field textarea{box-sizing:border-box;width:100%;min-width:0}
.cp__form>*{min-width:0}
form.modal.cp__modal,form.modal.tu__modal,div.modal.tu__modal{padding:22px;box-sizing:border-box}
/* v5.34 — Penyimpanan Data: kartu "Isi folder" sejajar tingginya dengan "Data aktif per jenis" ( daftar bergulir di dalam ) */
.dv-grid{align-items:stretch}
.dv-grid>.card{display:flex;flex-direction:column;min-height:0}
.dv-grid>.card>.card__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.dv-grid>.card [data-dv-folder]{flex:1 1 0;min-height:360px;overflow-y:auto;contain:size;padding-right:4px;margin-right:-4px}
@media (max-width:1100px){.dv-grid>.card [data-dv-folder]{min-height:480px}}
/* v5.35 — tombol Brainstorm / Tulis diberi jarak dari kolom Referensi */
.cp__bs-form{margin-top:18px;padding-top:16px;border-top:1px dashed #cdd6e3;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp__bs-hint{margin-top:10px}
/* v5.36 — pembaruan otomatis semua PC */
.pembaruan-pita{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:min(760px,calc(100vw - 32px));padding:12px 16px;border-radius:14px;background:#14203a;color:#fff;box-shadow:0 18px 40px rgba(15,23,42,.35)}
.pembaruan-pita__ikon{font-size:22px;animation:pembaruan-putar 1.6s linear infinite}
.pembaruan-pita__teks{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.pembaruan-pita__teks span{color:#c9d4ee}
.pembaruan-pita .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
@keyframes pembaruan-putar{to{transform:rotate(360deg)}}
.pembaruan-ringkas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pembaruan-ringkas>div{flex:1;min-width:150px;border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.pembaruan-ringkas b{font-size:18px}
.pembaruan-tabel td{vertical-align:top}
.pembaruan-lama{color:var(--red);font-weight:700}
.pembaruan-tombol{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* v5.37 — Notifikasi: penuh selebar layar, bagian berdampingan, kartu ringkas */
.nt{max-width:none}
.nt__ringkas{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:8px 0 14px}
.nt__ringkas>div:not(.nt__ringkas-waktu){display:flex;align-items:baseline;gap:6px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.nt__ringkas b{font-size:20px}
.nt__ringkas span{font-size:12px;color:var(--text-3)}
.nt__ringkas .is-baru b{color:#2563eb}.nt__ringkas .is-desak b{color:#dc2626}
.nt__ringkas-waktu{align-self:center;margin-left:auto}
.nt__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px;align-items:start}
.nt__bagian{margin:0;border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.55);padding:12px;min-width:0}
.nt__bagian-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 2px 10px}
.nt__bagian-head b{font-size:13.5px}
.nt__jumlah{min-width:24px;height:22px;padding:0 8px;border-radius:999px;background:#e2e8f0;color:#334155;font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.nt__jumlah.is-baru{background:#2563eb;color:#fff}
.nt__daftar{display:flex;flex-direction:column;gap:8px;max-height:68vh;overflow-y:auto;padding-right:2px}
.nt__kartu{margin-bottom:0;padding:10px 12px;gap:10px}
.nt__pesan{font-size:12.5px;line-height:1.45}
.nt__aksi{flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:8px}
.nt__aksi .btn--sm{padding:4px 10px;font-size:12px}
.nt__kosong{border:0;padding:6px 4px;color:#16a34a}
.nt__aturan{margin-top:14px}
.pembaruan-pita--lama{background:#7c2d12}
/* v5.39 — foto profil & avatar animasi */
.avatar.avatar--isi{padding:0;overflow:hidden;background:transparent;border-radius:50% !important}
.avatar .av-svg,.avatar .av-foto{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.av-ubah{border:0;cursor:pointer;position:relative}
.av-ubah:hover{outline:2px solid var(--blue);outline-offset:2px}
@keyframes av-kedip{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes av-goyang{0%,100%{transform:rotate(0deg) translateY(0)}25%{transform:rotate(-2.5deg) translateY(-.6px)}75%{transform:rotate(2.5deg) translateY(-.6px)}}
.av-kedip{animation:av-kedip 4.2s infinite}
.av-goyang{animation:av-goyang 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.av-kedip,.av-goyang{animation:none}}
.av-modal{max-width:760px !important;width:calc(100vw - 32px);max-height:90vh;overflow:auto}
.av-tab{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
.av-tab button{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.av-tab button.is-aktif{background:#27344e;color:#fff;border-color:#27344e}
.av-isi{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.av-pratinjau{display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:0}
.av-bulat{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);font-weight:700;box-shadow:0 2px 6px rgba(15,23,42,.15)}
.av-bulat--besar{width:170px;height:170px;font-size:56px;box-shadow:0 12px 30px rgba(15,23,42,.22)}
.av-bulat .av-svg,.av-bulat .av-foto{width:100%;height:100%;object-fit:cover}
.av-pratinjau-kecil{display:flex;align-items:center;gap:8px}
.av-kosong{font-size:13px;color:var(--text-3);text-align:center;padding:10px}
.av-inisial{font-size:inherit}
.av-pilihan{display:flex;flex-direction:column;gap:10px}
.av-baris{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:center}
.av-baris>span{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#334155}
.av-baris>div{display:flex;gap:6px;flex-wrap:wrap}
.av-swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}
.av-swatch.is-aktif{box-shadow:0 0 0 2px #2563eb}
.av-chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer}
.av-chip.is-aktif{background:#2563eb;color:#fff;border-color:#2563eb}
.av-gerak{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:4px}
@media (max-width:640px){.av-isi{grid-template-columns:1fr}.av-baris{grid-template-columns:1fr}}
/* v5.40 — Notifikasi: yang sudah dibaca pindah ke Arsip */
.nt__tab{display:flex;gap:6px;margin:10px 0 4px}
.nt__tab button{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.nt__tab button span{font-weight:700;font-size:11.5px;background:#e2e8f0;border-radius:999px;padding:0 7px}
.nt__tab button.is-aktif{background:#27344e;color:#fff;border-color:#27344e}
.nt__tab button.is-aktif span{background:rgba(255,255,255,.2);color:#fff}
.nt__kosong--arsip{color:#92400e}
.nt__link{border:0;background:none;color:#2563eb;text-decoration:underline;cursor:pointer;padding:0;font:inherit}
.nt__arsip-alat{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.nt__arsip-alat .dv-cari{flex:0 1 360px}
.nt__arsip-hari{margin-bottom:16px}
.nt__arsip-tgl{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#334155;margin:0 2px 6px}
.nt__arsip-item{border:1px solid var(--line-strong);border-left:4px solid #94a3b8;border-radius:10px;background:rgba(255,255,255,.6);padding:8px 12px;margin-bottom:6px}
.nt__arsip-item--kritis{border-left-color:#dc2626}.nt__arsip-item--selesai{border-left-color:#16a34a}.nt__arsip-item--penting{border-left-color:#f59e0b}
.nt__arsip-kepala{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.nt__arsip-status{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.nt__arsip-pesan{font-size:12.5px;color:#475569;margin-top:2px;line-height:1.45}
.nt__arsip-kaki{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--text-3);margin-top:4px}
.nt__arsip-kaki .btn--sm{padding:2px 10px;font-size:11.5px}
/* v5.41 — Tugas Urgent: progress per kreator ( diagram lingkaran ) + riwayat per tanggal */
.tu__progress{border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.6);padding:12px 14px}
.tu__progress-judul{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.tu__progress-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tu__prog{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px}
.tu__prog--utama{border-color:#27344e;box-shadow:0 0 0 1px #27344e inset}
.tu__prog-nama{font-weight:800;font-size:13.5px}
.tu__legenda{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:#475569}
.tu__legenda li{display:flex;align-items:center;gap:6px}
.tu__legenda i{width:9px;height:9px;border-radius:50%;flex:none}
.tu__legenda b{margin-left:auto;color:#0f172a}
.tu__riwayat{display:flex;flex-direction:column}
.tu__riw-hari{margin-bottom:14px}
.tu__riw-tgl{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#334155;margin:0 2px 6px}
.tu__riw-tgl span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3);margin-left:6px}
.tu__riw-hari ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tu__riw{display:grid;grid-template-columns:44px 24px minmax(0,1fr);gap:6px;align-items:start;border:1px solid var(--line-strong);border-left:4px solid #94a3b8;border-radius:10px;background:var(--surface);padding:8px 10px;font-size:13px}
.tu__riw--blue{border-left-color:#2563eb}.tu__riw--amber{border-left-color:#f59e0b}.tu__riw--green{border-left-color:#16a34a}
.tu__riw-jam{font-size:11.5px;color:var(--text-3);padding-top:2px}
.tu__riw-detail{color:#475569;margin-top:2px}
.tu__riw-catatan{background:#fff7ed;border-radius:6px;padding:4px 8px;margin-top:4px;color:#7c2d12;white-space:pre-wrap}
/* v5.43 — aktivitas harian di samping diagram */
.tu__progress-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}
.tu__prog{align-items:stretch}
.tu__prog-nama{text-align:left}
.tu__prog-isi{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.tu__prog-kiri{display:flex;flex-direction:column;align-items:center;gap:6px}
.tu__harian{display:flex;flex-direction:column;gap:8px;min-width:0}
.tu__harian-judul{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#334155}
.tu__harian-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.tu__hari{display:flex;flex-direction:column;align-items:center;justify-content:center;height:38px;border-radius:7px;font-size:11.5px;font-weight:700;color:#334155;background:#f1f5f9;border:1px solid transparent;cursor:default}
.tu__hari i{font-style:normal;font-size:9.5px;font-weight:600;color:#64748b}
.tu__hari--kerja{background:#bbf7d0;color:#14532d}.tu__hari--kerja i{color:#166534}
.tu__hari--acc{background:#16a34a;color:#fff}.tu__hari--acc i{color:#dcfce7}
.tu__hari--revisi{background:#fde68a;color:#78350f}
.tu__hari--kosong{background:#fee2e2;color:#991b1b}.tu__hari--kosong i{color:#b91c1c}
.tu__hari--minggu{background:#f1f5f9;color:#94a3b8}
.tu__hari--libur{background:transparent;border:1px dashed #e2e8f0;color:#cbd5e1}.tu__hari--libur i{color:#cbd5e1}
.tu__hari.is-hari-ini{outline:2px solid #2563eb;outline-offset:1px}
.tu__harian-status{font-size:12px;font-weight:600;border-radius:8px;padding:5px 8px}
.tu__harian-status.is-baik{background:#dcfce7;color:#166534}.tu__harian-status.is-waspada{background:#fef3c7;color:#92400e}.tu__harian-status.is-buruk{background:#fee2e2;color:#991b1b}
.tu__riw--violet{border-left-color:#7c3aed}
@media (max-width:520px){.tu__prog-isi{grid-template-columns:1fr}}
.tu__harian-keterangan{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:#64748b}
.tu__harian-keterangan span{display:inline-flex;align-items:center;gap:4px}
.tu__harian-keterangan b{width:10px;height:10px;border-radius:3px;display:inline-block}
.tu__hari--tunggu{background:#fff;border:1px dashed #94a3b8;color:#475569}
/* v5.44 — daftar harian di panel kanan ( gaya daftar acara ) */
.tu__progress-tata{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:stretch}
.tu__progress-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tu__prog-isi{grid-template-columns:1fr}
.tu__prog-nama{text-align:center}
.tu__prog .tu__harian-status{text-align:center;width:100%;box-sizing:border-box}
.tu__daftar-harian{background:#8c0019;color:#fff;border-radius:12px;display:flex;flex-direction:column;min-height:320px;overflow:hidden}
.tu__dh-tab{display:flex;border-bottom:1px solid rgba(255,255,255,.35)}
.tu__dh-tab button{flex:1;background:none;border:0;color:rgba(255,255,255,.6);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:14px 6px;cursor:pointer}
.tu__dh-tab button.is-aktif{color:#fff}
.tu__dh-isi{flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:420px}
.tu__dh-tgl{font-weight:800;font-style:italic;font-size:13.5px;margin-bottom:4px}
.tu__dh-baris{font-size:12.5px;line-height:1.45;display:flex;gap:6px;margin-bottom:3px}
.tu__dh-baris span{flex:none;width:14px;text-align:center;opacity:.85}
.tu__dh-baris--belum{color:#ffd5d9}
.tu__dh-baris--acc{color:#bbf7d0}
.tu__dh-kosong{font-size:12.5px;opacity:.75}
.tu__dh-nav{display:flex;justify-content:center;gap:60px;padding:10px 0 14px}
.tu__dh-nav button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.28);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.tu__dh-nav button:disabled{opacity:.35;cursor:default}
@media (max-width:1100px){.tu__progress-tata{grid-template-columns:1fr}}
/* v5.45 — panel daftar harian melebar mengisi sisa ruang sampai kartu terakhir, warna biru seperti Dashboard Sosmed */
.tu__progress-tata{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.tu__progress-tata>.tu__progress-grid{display:flex;flex-wrap:wrap;gap:12px;flex:0 1 auto}
.tu__progress-tata>.tu__progress-grid>.tu__prog{width:175px;flex:none}
.tu__daftar-harian{flex:1 1 340px;min-width:320px;background:#2f4468;border:1px solid #4d6390;box-shadow:inset 0 6px 0 #f5b301}
.tu__dh-tab{border-bottom:1px solid #4d6390;padding-top:6px}
.tu__dh-tab button{color:#b7c3dd}
.tu__dh-tab button.is-aktif{color:#f5b301;box-shadow:inset 0 -3px 0 #f5b301}
.tu__dh-tgl{color:#f5b301}
.tu__dh-baris{color:#eef2fb}
.tu__dh-baris--belum{color:#ffb4b4}
.tu__dh-baris--acc{color:#86efac}
.tu__dh-baris--revisi{color:#fde68a}
.tu__dh-nav button{background:#3a5079;border:1px solid #4d6390}

/* v5.51 — Rekam suara pengingat ( suara asli per orang ) */
.modal.rs-modal{width:min(760px,94vw);max-width:760px;max-height:88vh;display:flex;flex-direction:column}
.rs-daftar{overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.rs-orang{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 12px;background:var(--surface,#fff)}
.rs-nama{font-weight:700;margin-bottom:6px}
.rs-baris{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed var(--line,#e2e8f0)}
.rs-baris:first-of-type{border-top:0}
.rs-naskah{font-size:13px;line-height:1.45;min-width:0}
.rs-naskah>div{color:var(--muted,#64748b);font-style:italic}
.rs-tombol{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.rs-status{display:inline-block;margin-left:6px;font-size:11px;padding:1px 8px;border-radius:999px;background:#eef2f7;color:#64748b;font-weight:600}
.rs-status--ok{background:#dcfce7;color:#166534}
.rs-status--draf{background:#fef3c7;color:#92400e}
.rs-status--rekam{background:#fee2e2;color:#b91c1c;animation:rs-kedip 1s infinite}
@keyframes rs-kedip{50%{opacity:.45}}
@media (max-width:640px){.rs-baris{flex-direction:column;align-items:flex-start}.rs-tombol{justify-content:flex-start}}
.rs-orang--umum{border-color:#93c5fd;background:#eff6ff}
.rs-tts{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid #fcd34d;background:#fffbeb;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.rs-tts-isi{display:flex;gap:6px;align-items:center}
.rs-tts-isi .input{min-width:220px;height:32px;padding:4px 10px;border:1px solid var(--line,#cbd5e1);border-radius:8px}
.kpi2-slip__catatan-baca{min-height:40px;padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px;white-space:pre-wrap;font-size:12px;background:#fff}
.nt-pesan__isi,.nt__pesan{white-space:pre-line}
.cp__revisi-alat{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.cp__revisi-alat .btn{padding:1px 8px;font-size:11px;min-height:0}
.cp__revisi-ubah textarea{width:100%;margin:6px 0 4px;padding:6px 8px;border:1px solid #fdba74;border-radius:8px;font:inherit;font-size:12.5px;background:#fff}
.cp__revisi-ubah>div{display:flex;gap:6px}
.pembaruan-pita--desktop{bottom:auto;top:18px;background:#1e3a8a}.pembaruan-pita__ikon--diam{animation:none}

/* v5.67 — pita data belum tersimpan / server tidak merespons */
.oe-tertunda{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:260;max-width:min(760px,calc(100vw - 32px));display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:12px;background:#b91c1c;color:#fff;font-size:13px;box-shadow:0 14px 34px rgba(127,29,29,.35)}
.oe-tertunda b{font-size:14px}
.oe-tertunda--ok{background:#15803d;box-shadow:0 14px 34px rgba(21,128,61,.3)}

/* v5.69 — tugas urgent kedaluwarsa ( gembok ) */
.tu__kunci { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 12.5px; line-height: 1.45; }
.tu__kunci--buka { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.tu__peringatan-kpi { padding: 8px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; }

/* v5.70 — notifikasi DARURAT tugas kedaluwarsa ( layar penuh + sirene ) */
.nt-darurat { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(127, 29, 29, .82); animation: ntDaruratLatar 1.2s ease-in-out infinite alternate; }
@keyframes ntDaruratLatar { from { background: rgba(127, 29, 29, .78); } to { background: rgba(220, 38, 38, .88); } }
.nt-darurat__kotak { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #7f1d1d; border: 4px solid #dc2626; border-radius: 18px; padding: 24px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: ntDaruratGoyang .5s ease-in-out infinite alternate; }
@keyframes ntDaruratGoyang { from { transform: scale(1); } to { transform: scale(1.015); } }
.nt-darurat__ikon { font-size: 46px; line-height: 1; margin-bottom: 8px; }
.nt-darurat__label { display: inline-block; background: #dc2626; color: #fff; font-weight: 800; letter-spacing: .06em; font-size: 12px; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.nt-darurat__item { text-align: left; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; text-transform: uppercase; }
.nt-darurat__item b { display: block; font-size: 16px; color: #991b1b; margin-bottom: 6px; }
.nt-darurat__item p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: #7f1d1d; }
.nt-darurat__buka { margin-top: 8px; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: #dc2626; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .05em; cursor: pointer; }
.nt-darurat__buka:hover { background: #b91c1c; }
.nt-darurat__kaki { margin-top: 8px; font-size: 12px; color: #991b1b; }
@media (prefers-reduced-motion: reduce) { .nt-darurat, .nt-darurat__kotak { animation: none; } }

/* v5.71 — konfirmasi "cek dulu sebelum disimpan" ( Planner & Reporting ) */
.cp-cek { z-index: 10050; }
.cp-cek__kotak { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 18px 12px; }
.cp-cek__kepala { font-weight: 800; letter-spacing: .04em; color: #b45309; font-size: 15px; margin-bottom: 4px; }
.cp-cek__sub { font-size: 13px; color: var(--muted, #475569); margin-bottom: 12px; line-height: 1.5; }
.cp-cek__janggal { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.cp-cek__janggal ul { margin: 6px 0 0; padding-left: 18px; }
.cp-cek__janggal li { margin: 2px 0; }
.cp-cek__tabel { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.cp-cek__tabel th { text-align: left; width: 38%; color: var(--muted, #64748b); font-weight: 600; padding: 6px 8px; vertical-align: top; }
.cp-cek__tabel td { padding: 6px 8px; word-break: break-word; }
.cp-cek__tabel tr { border-bottom: 1px solid var(--line, #e2e8f0); }
.cp-cek__tabel tr.is-penting td { font-weight: 700; color: var(--foreground, #0f172a); background: #fffbeb; }
.cp-cek__centang { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.cp-cek__centang input { margin-top: 2px; width: 16px; height: 16px; flex: none; }

/* =====================================================================
   v5.73 — Tracking Ads ( Ads → Tracking Ads ) & Backup & Data
   ===================================================================== */
.ta-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.ta-spacer { flex: 1 1 auto; }
.ta-bulan { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px; }
.ta-bulan__label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-weight: 650; font-size: 13.5px; cursor: pointer; min-width: 150px; justify-content: center; }
.ta-bulan__label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ta-beda { color: var(--amber); }
.ta-ab-nama { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ta-ab-tabel td:first-child { white-space: nowrap; }
.ta-seg { display: inline-flex; background: var(--slate-bg); border-radius: 10px; padding: 3px; }
.ta-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.ta-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ta-tabs { padding: 0; margin: 4px 0 16px; }
.ta-plat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ta-plat--shopee { background: #fff1ec; color: #d23f1f; }
.ta-plat--tiktok { background: #eef0f3; color: #111827; }
.ta-ab { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: #fff; flex: none; }
.ta-ab--A { background: #2563eb; }
.ta-ab--B { background: #9333ea; }
.ta-merah { color: var(--red); }
.ta-hijau { color: var(--green); }
.ta-warna--atas { color: var(--green); }
.ta-warna--tipis { color: var(--amber); }
.ta-warna--rugi { color: var(--red); }
.ta-warna--kosong { color: var(--text-3); }
.ta-link { background: none; border: 0; padding: 0; color: var(--blue-600); font: inherit; font-weight: 600; cursor: pointer; }
.ta-link:hover { text-decoration: underline; }
.ta-mini { font-size: 10.5px; font-weight: 600; }
.ta-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; margin-left: 4px; }
.ta-ingat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--amber-bg); border: 1px solid #f5e0bd; color: #92400e; font-size: 13px; }
.ta-stat { margin-bottom: 16px; }
.ta-stat--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ta-stat .stat__value { font-size: 21px; }
.ta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ta-kartu { padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 8px; }
.ta-kartu:hover, .ta-kartu:focus-visible { border-color: var(--blue); box-shadow: var(--shadow); outline: none; }
.ta-kartu__atas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ta-kartu__nama { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0 0; }
.ta-kartu__roas { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ta-kartu__angka { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ta-kartu__acuan { text-align: right; color: var(--text-2); line-height: 1.5; }
.ta-kartu__angka-kecil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.ta-kartu__angka-kecil div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ta-kartu__angka-kecil span { font-size: 11px; color: var(--text-3); }
.ta-kartu__angka-kecil b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-kartu__bawah { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ta-bar { position: relative; height: 8px; border-radius: 999px; overflow: visible; background: var(--slate-bg); margin: 2px 0; }
.ta-bar__zona { position: absolute; top: 0; bottom: 0; }
.ta-bar__zona--rugi { left: 0; background: #fecaca; border-radius: 999px 0 0 999px; }
.ta-bar__zona--tipis { background: #fde68a; }
.ta-bar__zona--atas { background: #bbf7d0; border-radius: 0 999px 999px 0; }
.ta-bar__titik { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); }
.ta-bar__titik--atas { background: var(--green); }
.ta-bar__titik--tipis { background: var(--amber); }
.ta-bar__titik--rugi { background: var(--red); }
.ta-spark { width: 100%; height: 48px; display: block; }
.ta-spark--kosong { height: 48px; display: grid; place-items: center; background: var(--surface-2); border-radius: 8px; }
.ta-spark__garis { fill: none; stroke: var(--blue); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.ta-spark__target { stroke: var(--green); stroke-dasharray: 4 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ta-spark__bep { stroke: var(--red); stroke-dasharray: 2 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ta-spark__titik--atas { fill: var(--green); }
.ta-spark__titik--tipis { fill: var(--amber); }
.ta-spark__titik--rugi, .ta-spark__titik--kosong { fill: var(--red); }
.ta-kosong { padding: 36px 20px; }
.ta-kosong__aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

.ta-grup-kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ta-grup-nama { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin: 6px 0 4px; }
.ta-grup-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-progres { height: 6px; border-radius: 999px; background: var(--slate-bg); overflow: hidden; margin: 4px 0 4px; }
.ta-progres span { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #16a34a); border-radius: 999px; }
.ta-progres--kecil { height: 5px; min-width: 60px; }
.ta-panel { overflow: hidden; }
.ta-panel .tabs { overflow-x: auto; scrollbar-width: none; }
.ta-panel .tab { white-space: nowrap; }
.ta-panel__isi { padding: 14px 16px 18px; }
.ta-petunjuk { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--blue-50); color: #1e3a8a; line-height: 1.5; }
.ta-tabel-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.ta-tabel { font-size: 12px; }
.ta-tabel th, .ta-tabel td { padding: 5px 7px !important; white-space: nowrap; }
.ta-tabel thead th { position: sticky; top: 0; z-index: 2; }
.ta-tabel tfoot td { position: sticky; bottom: 0; background: #f1f5f9; border-top: 2px solid var(--line-strong); font-variant-numeric: tabular-nums; }
.ta-tabel td:first-child, .ta-tabel th:first-child { text-align: center; color: var(--text-3); }
.ta-th-isi { background: #fff8db !important; color: #92400e !important; }
.ta-tgl { line-height: 1.25; }
.ta-tabel tr.is-nanti { opacity: .45; }
.ta-tabel tr.is-kemarin td { background: #fff7ed; }
.ta-tabel tr.is-hariini td { background: #f8fafc; }
.ta-tabel tr.is-tersimpan td { animation: taSimpan .9s ease-out; }
@keyframes taSimpan { from { background: #dcfce7; } to { background: transparent; } }
.ta-in { width: 96px; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fffdf2; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: #1e40af; }
.ta-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); background: #fff; }
.ta-in:disabled { background: transparent; border-color: transparent; color: var(--text); }
.ta-in--teks { text-align: left; width: 170px; }
.ta-tabel .ta-in[data-k="pesanan"], .ta-tabel .ta-in[data-k="pesananTeratas"], .ta-tabel .ta-in[data-k="klik"] { width: 64px; }
.ta-sub-judul { font-size: 14px; font-weight: 700; margin: 4px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ta-dua { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.ta-dua--roas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 18px; }
.ta-bahaya tr.is-cek td { background: #fff5f5; }
.ta-bahaya tr.is-peluang td { background: #f0fdf4; }
.ta-saran { color: #7c2d12; margin-top: 3px; }
.ta-roas-kini { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.ta-keputusan { display: grid; gap: 8px; }
.ta-keputusan__baris { border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px; padding: 10px 12px; opacity: .72; }
.ta-keputusan__baris.is-posisi { opacity: 1; box-shadow: var(--shadow); }
.ta-keputusan__baris--atas { border-left-color: var(--green); }
.ta-keputusan__baris--tipis { border-left-color: var(--amber); }
.ta-keputusan__baris--rugi { border-left-color: var(--red); }
.ta-keputusan__kondisi { font-weight: 750; margin-bottom: 3px; display: flex; justify-content: space-between; gap: 8px; }
.ta-keputusan__kondisi span { color: var(--blue-600); font-size: 11.5px; letter-spacing: .03em; }
.ta-saran-setelan { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 12.5px; color: #14532d; line-height: 1.5; }
.ta-asumsi { display: grid; gap: 10px; }
.ta-asumsi__item { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 2px 10px; align-items: center; font-size: 12.5px; font-weight: 600; }
.ta-asumsi__item small { grid-column: 1 / -1; font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.ta-asumsi__in { display: inline-flex; align-items: center; gap: 4px; }
.ta-asumsi__in .ta-in { width: 88px; }
.ta-asumsi__in em { font-style: normal; color: var(--text-3); font-size: 12px; }
.ta-hasil-roas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ta-hasil-roas div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.ta-hasil-roas div.is-utama { border-color: #93c5fd; background: var(--blue-50); }
.ta-hasil-roas span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.ta-hasil-roas b { font-size: 22px; letter-spacing: -.02em; }
.ta-hasil-roas small { font-size: 11px; color: var(--text-2); line-height: 1.4; }
.ta-produk .ta-in { width: 100px; }
.ta-produk .ta-in--teks { width: 210px; }
.ta-jadwal { display: grid; gap: 8px; }
.ta-jadwal__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ta-jadwal__item input { margin-top: 3px; width: 16px; height: 16px; }
.ta-jadwal__item.is-selesai { background: #f0fdf4; border-color: #bbf7d0; }

.ta-ab-pilih { padding: 12px 14px; margin-bottom: 12px; display: grid; gap: 8px; }
.ta-ab-pilih__isi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ta-ab-pilih__isi label { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 280px; }
.ta-ab-pilih__isi select { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }
.ta-ab-vs { font-weight: 800; color: var(--text-3); }
.ta-vonis { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--line); }
.ta-vonis__ikon { font-size: 30px; line-height: 1; }
.ta-vonis--green { background: #f0fdf4; border-color: #bbf7d0; }
.ta-vonis--amber { background: #fffbeb; border-color: #fde68a; }
.ta-vonis--blue { background: var(--blue-50); border-color: #bfdbfe; }
.ta-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.ta-meter .ta-progres { width: 90px; margin: 0; }
.ta-dua--ab { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.ta-ab-tabel { overflow-x: auto; }
.ta-ab-tabel { overflow: hidden; }
.ta-ab-tabel tr.is-utama td { background: var(--blue-50); font-weight: 700; }
.ta-ab-tabel th .ta-ab { width: 17px; height: 17px; font-size: 10.5px; margin-right: 4px; vertical-align: -3px; }
.ta-menang { color: var(--green); font-weight: 750; }
.ta-g { width: 100%; height: auto; display: block; font-size: 10px; fill: var(--text-3); }
.ta-g__grid { stroke: var(--line); }
.ta-g__target { stroke: var(--green); stroke-dasharray: 5 4; }
.ta-g__target-t { fill: var(--green); font-weight: 600; }
.ta-g__a, .ta-g__b { fill: none; stroke-width: 2.6; stroke-linejoin: round; }
.ta-g__a { stroke: #2563eb; }
.ta-g__b { stroke: #9333ea; }
.ta-g__tipis { stroke-width: 1.2; opacity: .45; stroke-dasharray: 3 3; }
.ta-g__legenda { display: flex; align-items: center; gap: 6px; color: var(--text-3); margin-top: 4px; }
.ta-g__k { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.ta-g__k--a { background: #2563eb; }
.ta-g__k--b { background: #9333ea; margin-left: 6px; }
.ta-grafik-kosong { padding: 30px 0; text-align: center; }
.ta-sig { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ta-aturan { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.ta-aturan summary { cursor: pointer; }
.ta-aturan ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }

.ta-modal { max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; }
.ta-modal--lebar { max-width: 860px; }
.ta-modal__kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.ta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.ta-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ta-form input, .ta-form select, .ta-form textarea { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 400; color: var(--text); background: #fff; }
.ta-form__penuh { grid-column: 1 / -1; }
.ta-form__ab { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ta-form__ab legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.ta-unggah { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: 12px; cursor: pointer; margin: 10px 0; }
.ta-unggah:hover { border-color: var(--blue); background: var(--blue-50); }
.ta-unggah input { display: none; }
.ta-impor .ta-in--teks { width: 220px; }
.ta-impor select { padding: 5px; border: 1px solid var(--line-strong); border-radius: 7px; font: inherit; font-size: 12px; }

/* Backup & Data */
.bk-ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bk-ringkas__item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bk-ringkas__item span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.bk-ringkas__item b { font-size: 13px; }
.bk-lokasi { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.bk-bagian { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.bk-bagian label { display: flex; gap: 7px; align-items: center; cursor: pointer; }
.bk-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bk-rentang, .bk-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.bk-rentang label, .bk-filter label:not(.btn) { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.bk-rentang input, .bk-filter input, .bk-filter select { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }
.bk-jenis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.bk-jenis__item { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; }
.bk-jenis__item:has(input:checked) { border-color: #93c5fd; background: var(--blue-50); }
.bk-jenis__item small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.bk-format { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; margin-bottom: 12px; }
.bk-format label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.bk-daftar__kepala { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.bk-unggah { cursor: pointer; }
.bk-aksi { white-space: nowrap; text-align: right; }
.bk-aksi .btn { margin-left: 4px; }
.bk-aksi .icon-btn { display: inline-grid; vertical-align: middle; }
.bk-tabel td.num { white-space: nowrap; }
.bk-modal .bk-bagian label { align-items: flex-start; }
.bk-modal .bk-bagian input { margin-top: 3px; }
.bk-modal { max-width: 520px; }
.bk-peringatan { padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12.5px; line-height: 1.5; margin: 10px 0 12px; }

@media (max-width: 1100px) {
  .ta-stat--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ta-dua, .ta-dua--roas, .ta-dua--ab, .bk-dua { grid-template-columns: minmax(0, 1fr); }
  .bk-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ta-stat--6, .ta-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-grid { grid-template-columns: minmax(0, 1fr); }
  .ta-hasil-roas, .ta-form, .ta-form__ab, .bk-bagian, .bk-jenis, .bk-ringkas { grid-template-columns: minmax(0, 1fr); }
  .ta-kartu__angka-kecil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v5.74 — Tracking Ads: isi cepat semua grup & grup bulan baru otomatis */
.ta-modal--penuh { max-width: min(1280px, calc(100vw - 32px)); }
.ta-cepat__atas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ta-cepat__tgl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.ta-cepat__tgl input { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; }
.ta-cepat__atas .small { flex: 1 1 320px; line-height: 1.5; }
.ta-cepat th, .ta-cepat td { padding: 6px 7px !important; white-space: nowrap; vertical-align: middle !important; }
.ta-cepat .ta-in { width: 100px; }
.ta-cepat .ta-in[data-cepat="pesanan"], .ta-cepat .ta-in[data-cepat="pesananTeratas"], .ta-cepat .ta-in[data-cepat="klik"] { width: 64px; }
.ta-cepat .ta-in--teks { width: 180px; }
.ta-cepat__nama { min-width: 190px; white-space: normal !important; }
.ta-cepat__nama > div { margin-top: 3px; }
.ta-cepat tr.is-isi td { background: #f0fdf4; }
.ta-lanjut { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 10px 14px; margin-bottom: 12px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 13px; line-height: 1.5; }
.ta-lanjut span { flex: 1 1 auto; }
.ta-lanjut .icon-btn { width: 28px; height: 28px; }
/* v5.75 — export Excel template */
.ta-ekspor select { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 12.5px; max-width: 260px; }
.ta-ekspor td { vertical-align: middle !important; }
.ta-grup-aksi + .ta-grup-aksi { margin-left: 0; }
.ta-grup-kepala > div:first-child { flex: 1 1 320px; }

/* v5.78 — tombol Uji alarm ( pilihan ) */
.nt-uji { position: relative; display: inline-block; }
.nt-uji__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 310px; display: flex; flex-direction: column; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.nt-uji__menu[hidden] { display: none; }
.nt-uji__menu button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.nt-uji__menu button:hover { background: var(--blue-50); }

/* v5.79 — alarm Report Bulanan: navy #1f2b4b + ungu ( beda dari alarm merah tugas kedaluwarsa ) */
.nt-darurat--report { background: rgba(31, 43, 75, .86); animation-name: ntDaruratLatarReport; }
@keyframes ntDaruratLatarReport { from { background: rgba(31, 43, 75, .84); } to { background: rgba(91, 33, 182, .78); } }
.nt-darurat--report .nt-darurat__kotak { border-color: #6d28d9; color: #1f2b4b; box-shadow: 0 30px 80px rgba(31, 43, 75, .55), 0 0 0 6px rgba(109, 40, 217, .18); }
.nt-darurat--report .nt-darurat__label { background: linear-gradient(90deg, #1f2b4b, #6d28d9); }
.nt-darurat--report .nt-darurat__item { background: #f3f1fd; border-color: #d9d0fb; }
.nt-darurat--report .nt-darurat__item b { color: #1f2b4b; }
.nt-darurat--report .nt-darurat__item p { color: #3b3270; }
.nt-darurat--report .nt-darurat__buka { background: #1f2b4b; }
.nt-darurat--report .nt-darurat__buka:hover { background: #6d28d9; }
.nt-darurat--report .nt-darurat__kaki { color: #5b21b6; }

/* v5.80 — dibuka dari internet ( aplikasi Android ): pendaftaran akun hanya dari PC kantor */
.mos-jauh [data-mode="signup"] { display: none !important; }

/* ===================== Lembur ( v5.82 ) ===================== */
.lb{display:flex;flex-direction:column;gap:14px}
.lb__atas{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.lb__judul{margin:6px 0 2px;font-size:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb__tab{display:flex;gap:6px;flex-wrap:wrap}
.lb__panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lb__sub{font-weight:700;font-size:14px}
.lb__sub--baris{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lb__filter{display:flex;gap:4px}
.lb .input{height:34px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);font:inherit;font-size:13px;color:var(--text)}
.lb .btn--lg,.lb__mulai .btn{padding:12px 22px;font-size:15px;border-radius:12px}
.lb__kosong{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 8px}
.lb__ikon{font-size:34px}
.lb__hari{display:flex;flex-direction:column;gap:10px}
.lb__hari-kepala{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb__rencana{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lb__rencana>div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
.lb__rencana span{display:block;font-size:11.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.lb__rencana p{margin:0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.lb__rencana a{font-size:12.5px;overflow-wrap:anywhere}
.lb__rencana-akhir{border-color:#bbf7d0!important;background:#f0fdf4!important}
.lb__lampiran{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.lb__pesan{border-radius:10px;padding:9px 12px;font-size:13.5px;background:var(--slate-bg)}
.lb__pesan--kuning{background:var(--amber-bg);color:#92400e}
.lb__pesan--biru{background:var(--blue-50);color:var(--blue-600)}
.lb__pesan--hijau{background:var(--green-bg);color:#166534}
.lb__pesan--merah{background:var(--red-bg);color:#991b1b}
.lb__tombol{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb__catatan{flex:1;min-width:200px}
.lb__mulai{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 0}
.lb__jalan,.lb__live{border-radius:14px;padding:14px 16px;background:linear-gradient(135deg,#1f2b4b,#312e81);color:#fff;display:flex;flex-direction:column;gap:4px}
.lb__jalan .muted,.lb__live .muted{color:#c7d2fe}
.lb__live .btn{align-self:flex-start;margin-top:6px;background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.lb__rec{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;letter-spacing:.06em}
.lb__titik{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:lb-denyut 1.6s infinite;flex:none}
@keyframes lb-denyut{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.lb__waktu{font:800 24px/1.1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.02em}
.lb__mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums}
.lb__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.lb__ajuan{border:1px solid var(--line);border-left:4px solid #f59e0b;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.lb__tabel td{vertical-align:middle;font-size:13px}
.lb__nowrap{white-space:nowrap}
.lb__potong{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__mini{display:inline-block;width:48px;height:6px;border-radius:4px;background:var(--slate-bg);vertical-align:middle;margin-right:6px;overflow:hidden}
.lb__mini i{display:block;height:100%;background:var(--green)}
.lb__mini i.is-waspada{background:#f59e0b}
.lb__mini i.is-buruk{background:var(--red)}
.lb__saring{display:flex;gap:8px;flex-wrap:wrap}
.lb__angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.lb__angka>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.lb__angka span{font-size:11.5px;color:var(--text-3);font-weight:600}
.lb__angka b{font-size:18px}
.lb__angka small{font-size:11.5px;color:var(--text-2)}
.lb__angka .is-buruk{border-color:#fecaca;background:#fef2f2}
.lb__tanda{display:flex;flex-direction:column;gap:6px}
.lb__tanda>div{border-radius:10px;padding:8px 12px;font-size:13.5px}
.lb__tanda-buruk{background:var(--red-bg);color:#991b1b;font-weight:600}
.lb__tanda-waspada{background:var(--amber-bg);color:#92400e}
.lb__tanda-info{background:var(--blue-50);color:var(--blue-600)}
.lb__tanda-baik{background:var(--green-bg);color:#166534}
.lb__garis{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--slate-bg)}
.lb__garis i{display:block;height:100%;flex:none}
.lb__g-aktif{background:#16a34a}
.lb__g-diam{background:#f59e0b}
.lb__g-render{background:#a78bfa}
.lb__g-mati{background:repeating-linear-gradient(45deg,#cbd5e1 0 4px,#e2e8f0 4px 8px)}
.lb__garis-skala{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);font-family:ui-monospace,Consolas,monospace}
.lb__legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.lb__legenda span{display:flex;align-items:center;gap:5px}
.lb__legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.lb__app{display:flex;flex-direction:column;gap:6px}
.lb__app-baris{display:grid;grid-template-columns:minmax(120px,180px) 1fr 80px 110px;gap:10px;align-items:center;font-size:13px}
.lb__app-bar{display:flex;height:10px;border-radius:6px;background:var(--slate-bg);overflow:hidden}
.lb__app-bar i{display:block;height:100%;background:#16a34a}
.lb__app-bar i.is-diam{background:#f59e0b}
.lb__seg-wrap{max-height:460px;overflow:auto}
.lb__seg tr.lb__seg-diam td{background:#fffbeb}
.lb__seg tr.lb__seg-render td{background:#f5f3ff}
.lb__seg tr.lb__seg-mati td{background:#f1f5f9;color:var(--text-3)}
.lb__evaluasi{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lb__evaluasi .input{flex:1;min-width:220px}
.lb__pilih{display:flex;gap:5px;align-items:center;font-size:13.5px}
#lb-indikator{position:fixed;right:12px;bottom:12px;z-index:900;display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #2b3550;border-radius:6px;background:#141a26;color:#e2e8f0;font:inherit;font-size:11.5px;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
#lb-indikator b{font-weight:600;color:#93c5fd}
#lb-indikator .lb__mono{color:#4ade80}
#lb-indikator small{color:#64748b;font-size:10.5px}
#lb-indikator .lb__titik{width:7px;height:7px}
/* panel aktivitas ringkas ( gaya watchlist ) */
.lb__detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.lb__detail--satu{grid-template-columns:minmax(0,1fr)}
.lb__detail-kiri{display:flex;flex-direction:column;gap:14px;min-width:0}
.lw{background:#141a26;color:#e2e8f0;border:1px solid #232c3d;border-radius:8px;font-size:12px;overflow:hidden;position:sticky;top:12px}
.lw--lebar{position:static}
.lw__kepala,.lw__baris{display:grid;grid-template-columns:22px minmax(0,1fr) 64px 62px;gap:8px;align-items:center;padding:0 10px}
.lw__kepala{grid-template-columns:minmax(0,1fr) 64px 62px;padding:6px 10px 6px 40px;color:#64748b;font-size:10.5px;border-bottom:1px solid #232c3d}
.lw__kepala span:not(:first-child),.lw__nilai,.lw__persen{text-align:right}
.lw__judul{padding:7px 10px 3px;color:#94a3b8;font-size:10.5px;font-weight:700;letter-spacing:.06em;background:#10151f;border-top:1px solid #232c3d}
.lw__judul small{font-weight:400;letter-spacing:0;color:#64748b;margin-left:4px}
.lw__baris{min-height:26px;border-top:1px solid #1c2433;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;font:inherit;text-align:left}
.lw__baris--klik{cursor:pointer}
.lw__baris--klik:hover{background:#1b2333}
.lw__ikon{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff;background:#475569}
.lw__ikon--hijau{background:#15803d}.lw__ikon--kuning{background:#b45309}.lw__ikon--merah{background:#b91c1c}.lw__ikon--ungu{background:#6d28d9}
.lw__nama{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f5f9;font-weight:600}
.lw__nama small{font-weight:400;color:#64748b;margin-left:4px}
.lw__nilai{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:#e2e8f0}
.lw__persen{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11.5px;color:#94a3b8}
.lw__hijau{color:#22c55e}.lw__kuning{color:#f59e0b}.lw__merah{color:#ef4444}.lw__ungu{color:#a78bfa}
.lw__gulir{max-height:300px;overflow:auto}
.lw__kosong{padding:10px;color:#64748b}
@media (max-width:900px){.lb__detail{grid-template-columns:minmax(0,1fr)}.lw{position:static}}
@media (max-width:640px){
  .lb__app-baris{grid-template-columns:1fr 70px;}
  .lb__app-baris .lb__app-bar,.lb__app-baris .small{grid-column:1/-1}
  #lb-indikator small{display:none}
  .lb__waktu{font-size:28px}
}
/* pembaruan versi: tanda kecil, tidak menghalangi ( v5.84 ) */
.pembaruan-chip{position:fixed;left:12px;bottom:12px;z-index:900;display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #2b3550;border-radius:6px;background:#141a26;color:#cbd5e1;font:inherit;font-size:11.5px;line-height:1.4;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.pembaruan-chip b{color:#93c5fd;font-weight:600}
.pembaruan-chip:hover{background:#1b2333}

/* v5.85: kotak persetujuan lembur + kepala modal ( tombol ✕ sejajar judul ) */
.lb-setuju{display:flex;gap:10px;align-items:flex-start;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--text-2);cursor:pointer}
.lb-setuju input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--blue)}
.lb-setuju span{display:block;min-width:0}
.lb-setuju b{color:var(--text)}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* klik di luar jendela: kotak bergoyang sebentar ( tanda harus ditutup lewat ✕ / Batal ) */
@keyframes modal-goyang{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.modal--goyang{animation:modal-goyang .22s ease-in-out}

/* ===================== Tampilan HP ( v5.86 ) ===================== */
/* Planner: kolom tidak boleh melebar melebihi layar */
@media (max-width:1100px){.cp__layout{grid-template-columns:minmax(0,1fr)}.cp__utama,.cp__riset{min-width:0}}

@media screen and (max-width:640px){
  /* kerangka */
  .search{display:none}
  .page{padding:12px}
  .main,.page,.app__main,.content{min-width:0;max-width:100vw}
  img,video,canvas,svg{max-width:100%}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head h1{font-size:20px}
  /* formulir: satu kolom */
  .cp__form{grid-template-columns:minmax(0,1fr)}
  .cp__field,.cp__field input,.cp__field select,.cp__field textarea{min-width:0;max-width:100%}
  /* jendela formulir: hampir selebar layar, bisa digulir */
  .modal-backdrop{padding:8px!important;align-items:flex-start!important}
  .modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px);overflow:auto;padding:14px!important;margin:0 auto}
  .modal__foot{position:sticky;bottom:-14px;background:inherit;padding-top:8px}
  /* deretan tombol & filter: turun ke baris berikutnya, tidak melebar */
  .btn-row,.toolbar,.cp__filter,.oe__aksi,.ta-aksi,.lb__tab,.lb__saring,.dc-chips{flex-wrap:wrap}
  .input,select,input[type=text],input[type=search],input[type=date],input[type=month]{max-width:100%}

  /* Tabel → kartu di HP ( kelas hp-kartu & data-label dipasang oleh tabel-hp.js ) */
  .table-wrap,.oe__table-wrap,.ta-tabel-wrap{overflow:visible!important;max-height:none!important;border:0!important;background:none!important}
  table.hp-kartu{display:block;width:100%!important;min-width:0!important;border:0!important;background:none!important}
  table.hp-kartu thead{display:none}
  table.hp-kartu tbody,table.hp-kartu tfoot{display:block}
  table.hp-kartu tr{display:block;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:var(--surface,#fff);box-shadow:0 1px 2px rgba(15,23,42,.05)}
  table.hp-kartu tfoot tr{background:#f1f5f9;font-weight:600}
  /* sel = blok; judul kolom mengambang di kiri, isi rata kanan ( isi berisi beberapa elemen tetap rapi ) */
  table.hp-kartu td{display:block;padding:7px 0!important;border:0!important;border-bottom:1px dashed var(--line,#e2e8f0)!important;text-align:right!important;white-space:normal!important;max-width:none!important;min-width:0!important;width:auto!important;height:auto!important;position:static!important;overflow-wrap:anywhere;overflow:hidden}
  table.hp-kartu td:last-child{border-bottom:0!important}
  table.hp-kartu td::before{content:attr(data-label);float:left;width:38%;padding-right:10px;text-align:left;font-size:11.5px;font-weight:600;line-height:1.5;color:var(--text-3,#64748b);text-transform:none;letter-spacing:0;white-space:normal}
  table.hp-kartu td[data-label=""]::before{display:none}
  table.hp-kartu td[data-label=""]{text-align:left!important}
  table.hp-kartu td>div,table.hp-kartu td>.small{margin-left:auto}
  *:has(> table.hp-kartu){overflow:visible!important;max-height:none!important}
  .cp__tabel-wrap{overflow:visible!important;max-height:none!important}
  .oe__tools{flex:1 1 100%!important;min-width:0}
  .oe__topbar{margin:0 -12px 12px}
  .ta-ab-pilih__isi label{flex:1 1 100%;min-width:0}
  .ta-ab-pilih{grid-template-columns:minmax(0,1fr)}
  .card,.panel{min-width:0}
  .app select{min-width:0;max-width:100%}
  .oe__tool{padding:0 10px}
  table.hp-kartu td:empty{display:none}
  table.hp-kartu td>*{max-width:100%}
  table.hp-kartu td input:not([type=checkbox]):not([type=radio]),table.hp-kartu td select{max-width:60%;min-width:0;display:inline-block}
  table.hp-kartu tr.hp-judul-baris{padding:4px 2px;border:0;background:none;box-shadow:none;font-weight:700}
  table.hp-kartu tr.hp-judul-baris td{border:0!important}
  .lb__potong{max-width:none;white-space:normal}
  /* tabel kecil di panel ringkas lembur tetap ringkas */
  .lw__kepala,.lw__baris{grid-template-columns:22px minmax(0,1fr) 60px 56px}
}