/* Sistem desain halaman ClickUp (dashboard + explorer + chat). Awalan `cu-` supaya tidak bentrok dengan style.css / Tailwind.
   Tema: <html data-theme="light|dark"> (sama dengan Web GUI utama, disimpan di localStorage `lga_theme`). Default terang.
   Warna HANYA lewat token di bawah; komponen baru otomatis benar di kedua tema. */
:root, :root[data-theme="light"] {
  --bg: #f3f5fb; --bg-grad: radial-gradient(900px 420px at 8% -8%, rgba(99,102,241,.13), transparent 60%), radial-gradient(800px 380px at 100% 0%, rgba(14,165,233,.11), transparent 55%);
  --surface: #ffffff; --surface-2: #f7f8fc; --surface-3: #eef1f8; --line: #e4e8f1; --line-strong: #cfd6e6;
  --text: #0f1729; --text-2: #3b4660; --muted: #6a7691; --on-brand: #ffffff;
  --brand: #5b4bdb; --brand-2: #7c6cf3; --brand-soft: rgba(91,75,219,.10); --brand-line: rgba(91,75,219,.28);
  --info: #0284c7; --info-soft: rgba(2,132,199,.10); --ok: #15803d; --ok-soft: rgba(21,128,61,.10);
  --warn: #b45309; --warn-soft: rgba(217,119,6,.12); --bad: #dc2626; --bad-soft: rgba(220,38,38,.09);
  --shadow-sm: 0 1px 2px rgba(15,23,41,.05), 0 1px 1px rgba(15,23,41,.03);
  --shadow: 0 1px 2px rgba(15,23,41,.04), 0 8px 24px -10px rgba(15,23,41,.16);
  --shadow-lg: 0 24px 60px -20px rgba(15,23,41,.35);
  --topbar: rgba(255,255,255,.82); --overlay: rgba(15,23,41,.45); --code-bg: #0f1729; --code-text: #e6ebf7;
  --c1: #5b4bdb; --c2: #0ea5e9; --c3: #10b981; --c4: #f59e0b; --c5: #ec4899; --c6: #8b5cf6; --c7: #14b8a6; --c8: #94a3b8;
}
:root[data-theme="dark"] {
  --bg: #0a0f1d; --bg-grad: radial-gradient(900px 420px at 8% -8%, rgba(99,102,241,.22), transparent 60%), radial-gradient(800px 380px at 100% 0%, rgba(14,165,233,.14), transparent 55%);
  --surface: #121a2e; --surface-2: #17213a; --surface-3: #1d2947; --line: #25314f; --line-strong: #34436a;
  --text: #e9edf8; --text-2: #c2cbe0; --muted: #8b97b4; --on-brand: #ffffff;
  --brand: #8f82ff; --brand-2: #a79dff; --brand-soft: rgba(143,130,255,.16); --brand-line: rgba(143,130,255,.38);
  --info: #38bdf8; --info-soft: rgba(56,189,248,.14); --ok: #4ade80; --ok-soft: rgba(74,222,128,.13);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.14); --bad: #f87171; --bad-soft: rgba(248,113,113,.14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.8);
  --topbar: rgba(10,15,29,.82); --overlay: rgba(2,6,16,.62); --code-bg: #060a14; --code-text: #dfe6f5;
  --c1: #8f82ff; --c2: #38bdf8; --c3: #34d399; --c4: #fbbf24; --c5: #f472b6; --c6: #a78bfa; --c7: #2dd4bf; --c8: #94a3b8;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cu { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: var(--bg); background-image: var(--bg-grad); background-repeat: no-repeat; background-attachment: fixed;
  color: var(--text); font: 15px/1.5 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
:where(.cu) a { color: var(--brand); text-decoration: none; } :where(.cu) a:hover { text-decoration: underline; }
:where(.cu) button { font: inherit; color: inherit; cursor: pointer; }
.cu :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.cu .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.cu .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cu .hide { display: none !important; }
.cu svg.i.sm { width: 14px; height: 14px; }
.cu svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Topbar ---------- */
.cu-topbar { position: sticky; top: 0; z-index: 30; background: var(--topbar); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line); }
.cu-topbar-in { max-width: 1400px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 12px; }
.cu-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; }
.cu-brand:hover { text-decoration: none; }
.cu-logo { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #5b4bdb 0%, #8b5cf6 55%, #ec4899 100%); box-shadow: 0 6px 16px -6px rgba(91,75,219,.7); }
.cu-brand h1 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-spacer { flex: 1; }
.cu-actions { display: flex; align-items: center; gap: 8px; }
.cu-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.cu-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cu-pulse 1.8s ease-in-out infinite; }
.cu-live.is-stale { color: var(--warn); background: var(--warn-soft); } .cu-live.is-error { color: var(--bad); background: var(--bad-soft); }
@keyframes cu-pulse { 50% { opacity: .35; transform: scale(.8); } }

/* ---------- Tombol & kontrol ---------- */
.cu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-weight: 650; font-size: 13.5px; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, transform .08s; }
.cu-btn:hover { background: var(--surface-2); border-color: var(--brand-line); text-decoration: none; } .cu-btn:active { transform: translateY(1px); }
.cu-btn[disabled] { opacity: .55; cursor: not-allowed; }
.cu-btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--on-brand); box-shadow: 0 8px 18px -8px var(--brand); }
.cu-btn.primary:hover { filter: brightness(1.06); }
.cu-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; } .cu-btn.ghost:hover { background: var(--surface-3); }
.cu-btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.cu-btn.icon { width: 38px; padding: 0; } .cu-btn.icon.sm { width: 32px; }
.cu-btn.danger { color: var(--bad); }
.cu-input, .cu-select { height: 38px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; padding: 0 12px; min-width: 0; }
.cu-select { padding-right: 30px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7691' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.cu-input:focus, .cu-select:focus, .cu-chat-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.cu-search { position: relative; display: block; min-width: 0; } .cu-search .i { position: absolute; left: 11px; top: 10px; color: var(--muted); pointer-events: none; }
.cu-search .cu-input { width: 100%; padding-left: 36px; }
.cu-menu { position: relative; }
.cu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
.cu-pop button, .cu-pop a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: transparent; border-radius: 9px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); }
.cu-pop button:hover, .cu-pop a:hover { background: var(--surface-3); text-decoration: none; } .cu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.cu-pop .sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ---------- Tata letak ---------- */
.cu-main { max-width: 1400px; margin: 0 auto; padding: 22px 20px 96px; display: flex; flex-direction: column; gap: 20px; }
.cu-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cu-toolbar .grow { flex: 1 1 260px; }
.cu-sync { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cu-sync .cu-select { height: 28px; border: 0; background-color: transparent; font-weight: 700; color: var(--text); padding-left: 4px; }
.cu-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.cu-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.cu-card-h h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .cu-card-h .hint { font-size: 12px; color: var(--muted); font-weight: 600; }
.cu-card-b { padding: 16px 20px 20px; }

/* ---------- KPI ---------- */
.cu-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cu-kpi { position: relative; overflow: hidden; text-align: left; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
button.cu-kpi:hover { transform: translateY(-2px); border-color: var(--tone, var(--brand-line)); }
.cu-kpi::after { content: ''; position: absolute; right: -26px; top: -26px; width: 92px; height: 92px; border-radius: 50%; background: var(--tone-soft, var(--brand-soft)); }
.cu-kpi .ico { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--tone, var(--brand)); background: var(--tone-soft, var(--brand-soft)); }
.cu-kpi .lbl { position: relative; z-index: 1; margin-top: 12px; font-size: 12.5px; color: var(--muted); font-weight: 650; }
.cu-kpi .val { position: relative; z-index: 1; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cu-kpi .sub { position: relative; z-index: 1; margin-top: 3px; font-size: 12px; color: var(--muted); }
.cu-kpi.t-info { --tone: var(--info); --tone-soft: var(--info-soft); } .cu-kpi.t-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.cu-kpi.t-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); } .cu-kpi.t-bad { --tone: var(--bad); --tone-soft: var(--bad-soft); }

/* ---------- Banner risiko ---------- */
.cu-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: linear-gradient(90deg, var(--bad-soft), transparent 80%), var(--surface); }
.cu-alert .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); flex: none; }
.cu-alert b { font-size: 14px; } .cu-alert p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }

/* ---------- Grafik ---------- */
.cu-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; }
.cu-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cu-donut { position: relative; width: 168px; height: 168px; flex: none; border-radius: 50%; }
.cu-donut::after { content: ''; position: absolute; inset: 24px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cu-donut-c { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.cu-donut-c b { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.03em; } .cu-donut-c span { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.cu-legend { flex: 1 1 200px; display: grid; gap: 7px; min-width: 0; }
.cu-legend-i { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; }
.cu-legend-i i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .cu-legend-i span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); text-transform: capitalize; }
.cu-legend-i b { font-variant-numeric: tabular-nums; } .cu-legend-i em { font-style: normal; color: var(--muted); font-size: 12px; width: 42px; text-align: right; }
.cu-bars { display: grid; gap: 14px; }
.cu-bar { display: grid; gap: 6px; text-align: left; width: 100%; background: transparent; border: 0; padding: 0; }
.cu-bar-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 650; } .cu-bar-h span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-bar-h span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cu-track { height: 9px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .cu-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--c2)); min-width: 3px; }
.cu-bar:hover .cu-bar-h span:first-child { color: var(--brand); }

/* ---------- Tab & tabel ---------- */
.cu-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; background: var(--surface-3); border-radius: 14px; width: fit-content; max-width: 100%; }
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cu-tab:hover { color: var(--text); } .cu-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cu-tab .n { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--surface-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cu-tab.is-active .n { background: var(--brand-soft); color: var(--brand); } .cu-tab.risk .n { background: var(--bad-soft); color: var(--bad); }
.cu-tablewrap { overflow-x: auto; }
.cu-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cu-table th { position: sticky; top: 0; text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cu-table th.sortable { cursor: pointer; user-select: none; } .cu-table th.sortable:hover { color: var(--text); }
.cu-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .cu-table tr:last-child td { border-bottom: 0; }
.cu-table tbody tr:hover { background: var(--surface-2); }
.cu-table td.num, .cu-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cu-name { font-weight: 700; } .cu-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.cu-empty { padding: 44px 20px; text-align: center; color: var(--muted); } .cu-empty b { display: block; color: var(--text); margin-bottom: 4px; font-size: 15px; }
.cu-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); white-space: nowrap; text-transform: capitalize; max-width: 100%; }
.cu-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--muted)); flex: none; }
.cu-pill.p-ok { background: var(--ok-soft); color: var(--ok); --dot: var(--ok); } .cu-pill.p-warn { background: var(--warn-soft); color: var(--warn); --dot: var(--warn); }
.cu-pill.p-bad { background: var(--bad-soft); color: var(--bad); --dot: var(--bad); } .cu-pill.p-info { background: var(--info-soft); color: var(--info); --dot: var(--info); }
.cu-pill.plain::before { display: none; }
.cu-mini { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; } .cu-mini .cu-track { flex: 1; height: 6px; } .cu-mini b { font-size: 12px; min-width: 22px; text-align: right; }
.cu-ai-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cu-chip:hover { background: var(--brand); color: var(--on-brand); }

/* ---------- Skeleton, toast ---------- */
.cu-skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: cu-shim 1.3s infinite; border-radius: 10px; }
@keyframes cu-shim { to { background-position: -200% 0; } }
.cu-toasts { position: fixed; z-index: 90; right: 18px; bottom: 90px; display: grid; gap: 10px; max-width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.cu-toast { pointer-events: auto; padding: 12px 14px; border-radius: 14px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 13px; animation: cu-in .25s ease; }
.cu-toast b { display: block; margin-bottom: 1px; } .cu-toast.bad { background: var(--bad); color: #fff; }
@keyframes cu-in { from { transform: translateY(10px); opacity: 0; } }
.cu-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.cu-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--c2), var(--c3)); transition: width .4s ease; }

/* ---------- Chat ---------- */
.cu-fab { position: fixed; right: 20px; bottom: 20px; z-index: 35; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 99px;
  color: var(--on-brand); font-weight: 750; background: linear-gradient(135deg, var(--brand), var(--c6) 60%, var(--c5)); box-shadow: 0 16px 34px -12px var(--brand); }
.cu-fab:hover { filter: brightness(1.07); }
.cu-overlay { position: fixed; inset: 0; z-index: 50; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s; }
.cu-overlay.is-open { opacity: 1; pointer-events: auto; }
.cu-chat { position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.cu-chat.is-open { transform: none; }
.cu-chat-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cu-chat-h .av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(135deg, var(--brand), var(--c5)); }
.cu-chat-h .tt { flex: 1; min-width: 0; } .cu-chat-h b { display: block; font-size: 14px; line-height: 1.2; } .cu-chat-h small { color: var(--muted); font-size: 12px; }
.cu-mode { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-3); }
.cu-mode button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 700; color: var(--muted); }
.cu-mode button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .cu-mode button.is-on.auto { color: var(--warn); }
.cu-chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.cu-welcome { margin: auto 0; text-align: center; padding: 8px 6px; } .cu-welcome .big { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--c5)); }
.cu-welcome h3 { margin: 0 0 4px; font-size: 17px; } .cu-welcome p { margin: 0 auto 14px; max-width: 320px; color: var(--muted); font-size: 13.5px; }
.cu-prompts { display: grid; gap: 8px; text-align: left; } .cu-prompt { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; font-weight: 600; text-align: left; }
.cu-prompt:hover { border-color: var(--brand-line); background: var(--brand-soft); } .cu-prompt .i { color: var(--brand); } .cu-prompt small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.cu-msg-u { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 5px 18px; color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-msg-a { display: flex; gap: 10px; align-items: flex-start; } .cu-msg-a > .av { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--c5)); margin-top: 2px; }
.cu-msg-a > .col { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cu-status { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 650; color: var(--brand); } .cu-status .dots { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-line); border-top-color: var(--brand); animation: cu-spin .8s linear infinite; flex: none; }
.cu-status.done { color: var(--ok); } .cu-status.done .dots { animation: none; border: 0; background: var(--ok); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.cu-status.fail { color: var(--bad); } .cu-status.fail .dots { animation: none; border-color: var(--bad); }
@keyframes cu-spin { to { transform: rotate(360deg); } }
.cu-plan, .cu-steps { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.cu-plan > summary, .cu-steps > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.cu-plan > summary::-webkit-details-marker, .cu-steps > summary::-webkit-details-marker { display: none; }
.cu-plan > summary::after, .cu-steps > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.cu-plan[open] > summary::after, .cu-steps[open] > summary::after { transform: rotate(-135deg); }
.cu-plan ol { margin: 0; padding: 4px 14px 12px 32px; font-size: 12.5px; color: var(--text-2); display: grid; gap: 5px; }
.cu-plan .goal { padding: 0 14px 4px; font-size: 12.5px; color: var(--text); font-weight: 650; }
.cu-step { display: flex; align-items: flex-start; gap: 9px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.cu-step .st { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 1px; border: 2px solid var(--brand-line); border-top-color: var(--brand); animation: cu-spin .8s linear infinite; }
.cu-step.ok .st { animation: none; border: 0; background: var(--ok); } .cu-step.err .st { animation: none; border: 0; background: var(--bad); }
.cu-step .tx { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }
.cu-step details { margin-top: 4px; } .cu-step summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }
.cu-step pre { margin: 6px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--code-bg); color: var(--code-text); font: 11.5px/1.5 'JetBrains Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
.cu-md { font-size: 14px; line-height: 1.62; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.cu-md > :first-child { margin-top: 0; } .cu-md > :last-child { margin-bottom: 0; }
.cu-md p { margin: 0 0 .75em; } .cu-md h1, .cu-md h2, .cu-md h3, .cu-md h4 { margin: 1.1em 0 .45em; line-height: 1.3; letter-spacing: -.01em; } .cu-md h1 { font-size: 1.25em; } .cu-md h2 { font-size: 1.14em; } .cu-md h3, .cu-md h4 { font-size: 1.02em; }
.cu-md ul, .cu-md ol { margin: 0 0 .75em; padding-left: 1.3em; } .cu-md li { margin: .22em 0; } .cu-md li > p { margin: 0; }
.cu-md a { text-decoration: underline; text-underline-offset: 2px; } .cu-md hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.cu-md blockquote { margin: 0 0 .75em; padding: 6px 12px; border-left: 3px solid var(--brand-line); background: var(--brand-soft); border-radius: 0 10px 10px 0; color: var(--text-2); }
.cu-md code { font: .86em 'JetBrains Mono', monospace; background: var(--surface-3); padding: 2px 6px; border-radius: 6px; }
.cu-md pre { margin: 0 0 .8em; padding: 12px 14px; border-radius: 12px; background: var(--code-bg); color: var(--code-text); overflow-x: auto; font-size: 12.5px; } .cu-md pre code { background: none; padding: 0; color: inherit; }
.cu-md .tw { overflow-x: auto; margin: 0 0 .8em; border: 1px solid var(--line); border-radius: 12px; } .cu-md table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cu-md th, .cu-md td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .cu-md th { background: var(--surface-2); font-weight: 700; white-space: nowrap; } .cu-md tr:last-child td { border-bottom: 0; }
.cu-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cu-file { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.cu-file .ft { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--ftc, var(--brand)); }
.cu-file .fn { flex: 1; min-width: 0; } .cu-file b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-file small { color: var(--muted); font-size: 11.5px; }
.cu-approval { padding: 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); display: grid; gap: 10px; }
.cu-approval > b { font-size: 13px; color: var(--warn); display: flex; align-items: center; gap: 7px; }
.cu-approval .call { padding: 9px 11px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; } .cu-approval .call code { display: block; margin-top: 5px; font: 11.5px 'JetBrains Mono', monospace; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 130px; overflow: auto; }
.cu-approval .row { display: flex; gap: 8px; flex-wrap: wrap; } .cu-approval .res { font-size: 12.5px; font-weight: 700; }
.cu-meta { font-size: 11.5px; color: var(--muted); } .cu-meta.err { color: var(--bad); }
.cu-chat-f { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.cu-ctx { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px 6px 11px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 650; }
.cu-ctx span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-ctx button { border: 0; background: transparent; padding: 2px; display: grid; }
.cu-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.cu-chat-input { flex: 1; min-width: 0; resize: none; max-height: 140px; min-height: 44px; padding: 11px 14px; border-radius: 15px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; }
.cu-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 14px; display: grid; place-items: center; color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.cu-send.stop { background: var(--bad); } .cu-send[disabled] { opacity: .5; }
.cu-chat-note { margin: 7px 2px 0; font-size: 11px; color: var(--muted); text-align: center; }

/* ---------- Explorer ---------- */
body.cu-explorer { overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.cu-ex { flex: 1; min-height: 0; display: grid; grid-template-columns: 312px minmax(0, 1fr); gap: 0; max-width: 1600px; width: 100%; margin: 0 auto; }
.cu-tree { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }
.cu-tree-h { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.cu-tree-b { flex: 1; overflow-y: auto; padding: 8px 8px 24px; }
.cu-node-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 13.5px; font-weight: 600; }
.cu-node-row:hover { background: var(--surface-3); } .cu-node-row.is-active { background: var(--brand-soft); color: var(--brand); }
.cu-node-row .chev { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform .15s; } .cu-node-row.is-open .chev { transform: rotate(90deg); }
.cu-node-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-node-row .ct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface-3); padding: 1px 7px; border-radius: 99px; font-weight: 700; }
.cu-node-row .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cu-kids { margin-left: 15px; padding-left: 7px; border-left: 1px solid var(--line); }
.cu-content { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.cu-content.has-detail { grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.05fr); }
.cu-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cu-col-h { padding: 14px 18px 10px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cu-col-b { flex: 1; overflow-y: auto; padding: 14px 18px 40px; overscroll-behavior: contain; }
.cu-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-weight: 600; } .cu-crumb b { color: var(--text); } .cu-crumb .i { width: 13px; height: 13px; }
.cu-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.cu-fchips { display: flex; gap: 6px; flex-wrap: wrap; } .cu-fchip { height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.cu-fchip.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .cu-fchip .d { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cu-task { display: grid; gap: 8px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 10px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .12s, transform .12s; }
.cu-task:hover { border-color: var(--brand-line); transform: translateY(-1px); } .cu-task.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cu-task .t { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .cu-task .m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cu-task .m .i { width: 14px; height: 14px; } .cu-task .m span { display: inline-flex; align-items: center; gap: 5px; } .cu-task .late { color: var(--bad); }
.cu-avs { display: inline-flex; } .cu-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--c1); border: 2px solid var(--surface); margin-left: -6px; } .cu-av:first-child { margin-left: 0; }
.cu-detail { background: var(--surface-2); border-left: 1px solid var(--line); }
.cu-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cu-meta-i { padding: 11px 13px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); } .cu-meta-i small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .cu-meta-i div { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.cu-sec { margin-top: 18px; } .cu-sec > h3 { margin: 0 0 9px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cu-sub-i { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.cu-sub-i span:first-child { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cu-cm { padding: 11px 13px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; } .cu-cm header { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 4px; } .cu-cm header b { font-size: 12.5px; } .cu-cm header span { color: var(--muted); } .cu-cm p { margin: 0; font-size: 13px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-hero { margin: auto; max-width: 420px; text-align: center; padding: 40px 20px; } .cu-hero .big { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5b4bdb, #8b5cf6 55%, #ec4899); box-shadow: 0 16px 34px -14px #5b4bdb; }
.cu-hero h2 { margin: 0 0 6px; } .cu-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.cu-bottomnav { display: none; }
.cu-back { display: none; }
.cu-show-sm { display: none; }
@media (max-width: 860px) { .cu-show-sm { display: inline-flex; } }

/* ---------- Responsif ---------- */
@media (max-width: 1180px) { .cu-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cu-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .cu-content.has-detail { grid-template-columns: minmax(0, 1fr); } .cu-content.has-detail .cu-list-col { display: none; }
  .cu-content.has-detail .cu-detail { border-left: 0; } .cu-back { display: inline-flex; } }
@media (max-width: 860px) {
  .cu-ex { grid-template-columns: minmax(0, 1fr); } .cu-tree { position: fixed; z-index: 52; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-lg); }
  .cu-tree.is-open { transform: none; } .cu-bottomnav { display: grid; }
}
@media (max-width: 720px) {
  .cu-topbar-in { padding: 9px 12px; gap: 8px; flex-wrap: nowrap; } .cu-brand { flex: 1; } .cu-brand h1 { font-size: 15px; } .cu-brand small { font-size: 11.5px; } .cu-live, .cu-spacer { display: none; } .cu-actions { gap: 6px; flex: none; }
  .cu-hide-sm { display: none !important; } .cu-topbar .cu-search-row { order: 9; flex: 1 1 100%; }
  .cu-main { padding: 14px 12px 104px; gap: 14px; } .cu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cu-kpi { padding: 13px 13px 12px; border-radius: 16px; } .cu-kpi .val { font-size: 25px; } .cu-card { border-radius: 16px; } .cu-card-h { padding: 14px 15px 0; } .cu-card-b { padding: 13px 15px 16px; }
  .cu-donut { width: 150px; height: 150px; margin: 0 auto; } .cu-donut::after { inset: 22px; } .cu-donut-wrap { gap: 16px; }
  .cu-toolbar > * { flex: 1 1 auto; } .cu-sync { justify-content: space-between; }
  .cu-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 50px; } .cu-fab span { display: none; } .cu-fab { width: 54px; padding: 0; justify-content: center; }
  .cu-chat { width: 100vw; border-left: 0; } .cu-chat-h { padding: 10px 10px; gap: 8px; } .cu-chat-h small { display: none; } .cu-chat-h .av { width: 30px; height: 30px; } .cu-chat-body { padding: 14px 12px 6px; } .cu-msg-u { max-width: 92%; }
  .cu-toasts { right: 10px; left: 10px; bottom: 84px; max-width: none; }
  /* tabel -> kartu */
  .cu-table thead { display: none; } .cu-table, .cu-table tbody, .cu-table tr, .cu-table td { display: block; width: 100%; }
  .cu-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); } .cu-table tr:last-child { border-bottom: 0; } .cu-table td { padding: 3px 0; border: 0; }
  .cu-table td[data-label] { display: inline-block; width: auto; margin: 2px 14px 2px 0; font-size: 13px; }
  .cu-table td[data-label]::before { content: attr(data-label); display: inline-block; margin-right: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .cu-table td.num { text-align: left; } .cu-table td.main { padding-bottom: 4px; } .cu-table td.main::before { display: none; } .cu-table td:last-child { margin-top: 6px; text-align: left !important; }
  .cu-table .cu-mini { min-width: 0; display: inline-flex; vertical-align: middle; } .cu-table .cu-mini .cu-track { display: none; }
  .cu-col-h { padding: 11px 13px 9px; } .cu-col-b { padding: 12px 13px 96px; } .cu-title { font-size: 17px; } .cu-meta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cu-bottomnav { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(3, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--topbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .cu-bottomnav button { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: transparent; font-size: 11px; font-weight: 700; color: var(--muted); border-radius: 12px; } .cu-bottomnav button.is-on { color: var(--brand); background: var(--brand-soft); }
  body.cu-explorer .cu-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cu *, .cu *::before, .cu *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .cu-topbar, .cu-fab, .cu-chat, .cu-overlay, .cu-toasts, .cu-bottomnav { display: none !important; } body.cu { background: #fff; } }


/* ---------- Kinerja Tim ---------- */
.cu .tone-ok { --tone: var(--ok); } .cu .tone-info { --tone: var(--info); } .cu .tone-warn { --tone: var(--warn); } .cu .tone-bad { --tone: var(--bad); }
.cu-monthnav { display: flex; align-items: center; gap: 4px; } .cu-monthnav .cu-btn[disabled] { opacity: .35; pointer-events: none; }
.cu-formula { font-size: 12.5px; color: var(--muted); font-weight: 600; text-align: right; }
.cu-stack { display: flex; flex-direction: column; gap: 20px; }      /* halaman Kinerja Tim (BUKAN #content: id itu juga dipakai explorer) */
.cu-teamtop { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cu-scatter { width: 100%; height: auto; display: block; max-height: 520px; }
.cu-scatter .frame { fill: none; stroke: var(--line-strong); } .cu-scatter .mid { stroke: var(--line-strong); stroke-dasharray: 4 4; }
.cu-scatter .qa.q-lead { fill: var(--ok-soft); } .cu-scatter .qa.q-risk { fill: var(--bad-soft); }
.cu-scatter .q-t { font: 700 12px 'Plus Jakarta Sans', sans-serif; fill: var(--text); } .cu-scatter .q-s { font: 500 11px 'Plus Jakarta Sans', sans-serif; fill: var(--muted); }
.cu-scatter .tick { font: 500 10.5px 'JetBrains Mono', monospace; fill: var(--muted); } .cu-scatter .axis { font: 600 12px 'Plus Jakarta Sans', sans-serif; fill: var(--text-2); }
.cu-scatter .dot { cursor: pointer; outline: none; } .cu-scatter .dot circle { fill: var(--surface); stroke: var(--tone); stroke-width: 3; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.cu-scatter .dot text { font: 800 11.5px 'Plus Jakarta Sans', sans-serif; fill: var(--tone); pointer-events: none; }
.cu-scatter .dot:hover circle, .cu-scatter .dot:focus-visible circle { transform: scale(1.18); }
.cu-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 470px; overflow-y: auto; }
.cu-rank-i { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px 52px; align-items: center; gap: 12px; padding: 11px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.cu-rank-i:hover { border-color: var(--tone); background: var(--surface); }
.cu-rank li:first-child .cu-rank-i { border-color: var(--tone); }
.cu-rank-i .n { color: var(--muted); font-weight: 700; font-size: 13px; } .cu-rank-i .who { min-width: 0; }
.cu-rank-i .who b, .cu-rank-i .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-rank-i .who small { color: var(--muted); font-size: 12px; }
.cu-rank-i .bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .cu-rank-i .bar i { display: block; height: 100%; background: var(--tone); border-radius: 99px; }
.cu-rank-i .sc { text-align: right; font-weight: 800; font-size: 17px; color: var(--tone); font-variant-numeric: tabular-nums; }
.cu-best { margin: 14px 2px 0; color: var(--text-2); font-size: 14px; }
.cu-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cu-wg-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .cu-wg-h h3 { margin: 0; font-size: 15px; font-weight: 800; } .cu-wg-h > span { font-weight: 800; font-size: 17px; color: var(--tone); }
.cu-wg-i { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .cu-wg-i b { display: block; font-weight: 650; }
.cu-wg-i small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; } .cu-wg-i > span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cu-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } .cu-sec-h h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .cu-sec-h .hint { color: var(--muted); font-size: 12.5px; }
.cu-leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.cu-lead { transition: box-shadow .3s, border-color .3s; } .cu-lead.is-flash { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow); }
.cu-lead-h { display: flex; align-items: center; gap: 12px; } .cu-lead-h .rk { color: var(--muted); font-weight: 800; font-size: 13px; }
.cu-lead-h .who { flex: 1; min-width: 0; } .cu-lead-h .who b { display: block; font-size: 16px; font-weight: 800; } .cu-lead-h .who small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.cu-lead-h .gr { text-align: right; color: var(--tone); } .cu-lead-h .gr b { display: block; font-size: 28px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; } .cu-lead-h .gr small { font-weight: 700; font-size: 11.5px; }
.cu-verdict { margin: 12px 0 14px; font-weight: 700; color: var(--text); font-size: 14.5px; }
.cu-sbars { display: grid; gap: 8px; } .cu-sbar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.cu-sbar .bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .cu-sbar .bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone); } .cu-sbar b { text-align: right; font-variant-numeric: tabular-nums; }
.cu-pc { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--text-2); }
.cu-pc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; } .cu-pc li > span { font-weight: 800; } .cu-pc .pro > span { color: var(--ok); } .cu-pc .con > span { color: var(--bad); }
.cu-lead-pick { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); font-weight: 600; } .cu-lead-pick em { font-style: normal; font-weight: 500; }
.cu-lead-pick .cu-select { width: 100%; }
.cu-sum { cursor: pointer; padding-bottom: 16px; list-style: none; } .cu-sum::-webkit-details-marker { display: none; } #breakdown[open] .cu-sum { border-bottom: 1px solid var(--line); }
#breakdownTable .cu-table th { white-space: normal; min-width: 84px; } #breakdownTable td small.raw { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
#breakdownTable b.tone-ok, #breakdownTable b.tone-info, #breakdownTable b.tone-warn, #breakdownTable b.tone-bad { color: var(--tone); }
#breakdownTable .cu-name small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.cu-note { color: var(--muted); font-size: 12.5px; display: grid; gap: 8px; } .cu-note p { margin: 0; } .cu-note b { color: var(--text-2); }
@media (max-width: 1100px) { .cu-teamtop { grid-template-columns: minmax(0, 1fr); } .cu-weights { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cu-formula { text-align: left; flex-basis: 100%; } .cu-monthnav { flex: 1 1 100%; } .cu-monthnav .cu-select { flex: 1; }
  .cu-rank-i { grid-template-columns: 20px minmax(0, 1fr) 48px; } .cu-rank-i .bar { display: none; }
  .cu-sbar { grid-template-columns: 96px minmax(0, 1fr) 36px; } .cu-leaders { grid-template-columns: minmax(0, 1fr); }
  #breakdownTable .cu-table td { display: inline-block; width: auto; } #breakdownTable .cu-table td:first-child { display: block; width: 100%; padding-bottom: 6px; }
}


/* ---------- Dashboard: filter status proyek ---------- */
.cu-statuschips { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px 4px; }
.cu-statuschips .cu-chip { height: 30px; font-size: 12px; text-transform: capitalize; background: var(--surface); color: var(--text-2); border-color: var(--line-strong); }
.cu-statuschips .cu-chip:hover, .cu-statuschips .cu-chip.is-on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* ---------- Explorer: pohon subtask, checklist, tautan induk ---------- */
.cu-tree-mark { color: var(--muted); margin-right: 6px; font-weight: 700; }
.cu-parent-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 0 8px; padding: 5px 11px 5px 8px; border-radius: 99px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 700; text-align: left; }
.cu-parent-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cu-parent-link:hover { background: var(--brand); color: var(--on-brand); }
.cu-checklist { display: grid; gap: 6px; }
.cu-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.cu-check .bx { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 6px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: var(--on-brand); }
.cu-check.is-done .bx { background: var(--ok); border-color: var(--ok); } .cu-check.is-done > span:last-child { color: var(--muted); text-decoration: line-through; }
.cu-check > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cu-sub-i .cu-pill svg.i { width: 12px; height: 12px; }
.cu-projnote { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--text-2); font-size: 12.5px; }
.cu-projnote b { color: var(--brand); } .cu-projnote svg.i { margin-top: 2px; color: var(--brand); }

/* ---------- Kinerja Tim: PM di bawah leader ---------- */
.cu-pmbox { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.cu-pmbox > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 11px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: 13.5px; }
.cu-pmbox > summary::-webkit-details-marker { display: none; } .cu-pmbox > summary em { flex-basis: 100%; font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
.cu-pmbox[open] > summary { border-bottom: 1px solid var(--line); }
.cu-pmlist { display: grid; gap: 1px; background: var(--line); border-radius: 0 0 13px 13px; overflow: hidden; }
.cu-pm { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 11px 14px; background: var(--surface); }
.cu-pm .who b { display: block; font-size: 14px; overflow-wrap: anywhere; } .cu-pm .who small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; } .cu-pm .bad { color: var(--bad); font-weight: 700; }
.cu-pm .notes { margin: 6px 0 0; padding-left: 16px; color: var(--text-2); font-size: 12.5px; } .cu-pm .notes li { margin: 2px 0; }
.cu-pm .gr { text-align: right; color: var(--tone); } .cu-pm .gr b { display: block; font-size: 20px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; } .cu-pm .gr small { font-size: 11px; font-weight: 700; }

.cu-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cu-progress-row .cu-track { flex: 1; height: 10px; } .cu-progress-row b { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }