/* IXHA OS — Dashboard Design System
   Sumber kebenaran styling untuk semua halaman dashboard.
   Palet & komponen DIDUPLIKASI dari Genta OS (5. klien/16 - Genta Digital Marketing/dashboard/) atas
   permintaan eksplisit Om Edi ("suka warna dan logika dari Genta") — Navy + Electric Orange + Blue,
   BUKAN palet crimson+gold standar bizai.id. Token/kelas inti dijaga identik dengan Genta OS supaya
   dua sistem gampang dibandingkan/di-maintenance bareng; tambahan komponen khusus IXHA ada di bagian
   paling bawah file ini. */

:root {
  --bg-void: #0A0E1A;
  --bg-surface: #111827;
  --bg-surface-2: #182238;
  --bg-surface-3: #212D48;
  --hairline: rgba(46,158,255,0.22);
  --hairline-strong: rgba(46,158,255,0.4);
  --accent: #FF7A29;
  --accent-bright: #FF9A52;
  --accent-2: #2E9EFF;
  --text-primary: #F5F7FA;
  --text-muted: #A9B4C6;
  --text-dim: #6B7690;
  --ok: #4ADE80;
  --warn: #FBBF24;
  --crit: #FF5C5C;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-void: #F3F6FB; --bg-surface: #FFFFFF; --bg-surface-2: #E8EEF7; --bg-surface-3: #D8E2F0;
    --hairline: rgba(46,158,255,0.18); --hairline-strong: rgba(46,158,255,0.32);
    --accent: #E5620A; --accent-bright: #C94F00; --accent-2: #1D7FDB;
    --text-primary: #101828; --text-muted: #47536B; --text-dim: #6B7690;
    --ok: #16A34A; --warn: #B45309; --crit: #DC2626;
  }
}
:root[data-theme="dark"] {
  --bg-void: #0A0E1A; --bg-surface: #111827; --bg-surface-2: #182238; --bg-surface-3: #212D48;
  --hairline: rgba(46,158,255,0.22); --hairline-strong: rgba(46,158,255,0.4);
  --accent: #FF7A29; --accent-bright: #FF9A52; --accent-2: #2E9EFF;
  --text-primary: #F5F7FA; --text-muted: #A9B4C6; --text-dim: #6B7690;
  --ok: #4ADE80; --warn: #FBBF24; --crit: #FF5C5C;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Shell layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: none; width: 232px;
  background: var(--bg-void);
  border-right: 1px solid var(--hairline);
  padding: 1.6em 1.1em;
  display: flex; flex-direction: column; gap: 2em;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 0.6em; padding: 0 0.5em; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--text-primary); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  padding: 0.65em 1.1em; border-radius: 999px;
  font-size: 0.88rem; color: var(--text-dim); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background: var(--bg-surface-3); color: var(--text-primary); }
.nav-item.active { background: var(--accent); color: var(--bg-void); font-weight: 700; }
.nav-item.active:hover { background: var(--accent-bright); }
.nav-item .badge-count {
  background: var(--crit); color: #fff; font-size: 0.66rem; font-weight: 700;
  padding: 0.1em 0.55em; border-radius: 999px; flex: none;
}
.nav-item.active .badge-count { background: var(--bg-void); color: var(--accent-bright); }
.nav-item-top { margin-bottom: 0.5em; }

/* Grup sidebar collapsible (native <details>, tanpa JS) */
.nav-group { margin-bottom: 1px; }
.nav-group-label {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6em 1.1em; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label::after { content: "\203A"; transition: transform 0.15s ease; font-size: 0.9rem; }
.nav-group[open] .nav-group-label::after { transform: rotate(90deg); }
.nav-group-label:hover { color: var(--text-primary); }
.nav-group-desc { font-size: 0.71rem; color: var(--text-dim); line-height: 1.5; padding: 0 1.1em 0.6em; }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }

.profile {
  margin-top: auto; display: flex; align-items: center; gap: 0.7em;
  padding: 0.7em 0.9em; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--hairline);
}
.profile .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--bg-void); font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.profile .who { font-size: 0.8rem; }
.profile .name { color: var(--text-primary); font-weight: 700; }
.profile .role { color: var(--text-dim); font-size: 0.73rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2em 2em; border-bottom: 1px solid var(--hairline);
  background: var(--bg-surface-2);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title { font-weight: 700; font-size: 1.05rem; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.topbar-range { font-size: 0.8rem; color: var(--text-dim); border: 1px solid var(--hairline-strong); padding: 0.45em 1em; border-radius: 999px; }

.content { flex: 1; padding: 1.8em 2em; }
.app-footer {
  padding: 1.1em 2em; border-top: 1px solid var(--hairline);
  font-size: 0.76rem; color: var(--text-dim);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6em 1.4em;
}

/* ---------- Stat tiles ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden; margin-bottom: 1.6em;
}
.stat-card { background: var(--bg-surface); padding: 1.2em 1.3em; }
.stat-card .label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.stat-card .value { font-size: 1.6rem; font-weight: 700; margin-top: 0.35em; }
.stat-card .delta { font-size: 0.8rem; margin-top: 0.3em; }
.stat-card .delta.up { color: var(--ok); }
.stat-card .delta.down { color: var(--crit); }
.stat-card .delta.flat { color: var(--text-dim); }

/* ---------- Panels ---------- */
.panel { background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 4px; padding: 1.3em 1.4em; }
.panel + .panel { margin-top: 1.4em; }
.panel-title { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1em; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4em; margin-bottom: 1.4em; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Table ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 0.6em 0.7em; border-bottom: 1px solid var(--hairline); }
.data-table td { padding: 0.7em 0.7em; border-bottom: 1px solid var(--hairline); color: var(--text-muted); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:first-child { color: var(--text-primary); font-weight: 600; }

/* ---------- Pills, chips, list rows ---------- */
.pill { font-size: 0.68rem; padding: 0.25em 0.7em; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; display: inline-block; }
.pill.ok { background: rgba(111,207,151,0.15); color: var(--ok); }
.pill.warn { background: rgba(232,163,61,0.15); color: var(--warn); }
.pill.crit { background: rgba(226,104,92,0.15); color: var(--crit); }
.pill.off { background: rgba(156,128,100,0.15); color: var(--text-dim); }

.chip-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1.3em; }
.chip { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; padding: 0.5em 1em; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--hairline); color: var(--text-muted); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.chip.paused .dot { background: var(--text-dim); }
.chip.warn .dot { background: var(--warn); }

.list-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6em 0; font-size: 0.86rem; }
.list-row + .list-row { border-top: 1px solid var(--hairline); }
.list-name { color: var(--text-primary); }
.list-meta { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.15em; }

.breakdown-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0; font-size: 0.87rem; }
.breakdown-row + .breakdown-row { border-top: 1px solid var(--hairline); }
.breakdown-row .k { color: var(--text-muted); }
.breakdown-row .v { color: var(--text-primary); font-weight: 600; }
.breakdown-row.total .k, .breakdown-row.total .v { color: var(--accent); font-weight: 700; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
.kanban-col { background: var(--bg-surface-2); padding: 0.9em; display: flex; flex-direction: column; gap: 0.6em; }
.kanban-head { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); display: flex; justify-content: space-between; }
.kanban-card { background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 0.6em 0.75em; }
.kanban-card .name { font-size: 0.8rem; color: var(--text-primary); font-weight: 600; }
.kanban-card .meta { font-size: 0.71rem; color: var(--text-dim); margin-top: 0.2em; }

/* ---------- Store cards ---------- */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; margin-bottom: 1.4em; }
.store-card { background: var(--bg-surface-2); padding: 1.1em 1.2em; }
.store-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8em; gap: 0.6em; }
.store-card .pname { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.store-card .srow { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.32em 0; color: var(--text-dim); }
.store-card .srow .v { color: var(--text-primary); font-weight: 600; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: 0.9em; align-items: flex-start; background: rgba(232,163,61,0.09); border: 1px solid rgba(232,163,61,0.3); border-radius: 4px; padding: 0.9em 1.1em; margin-top: 1.4em; }
.alert .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-top: 0.4em; flex: none; }
.alert .t { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }
.alert .d { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2em; }

/* ---------- Temp infra badge ---------- */
.temp-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(46,158,255,0.1); border: 1px solid var(--hairline-strong);
  color: var(--text-muted); font-size: 0.78rem; padding: 0.55em 1.1em; border-radius: 999px;
  margin-bottom: 1.4em;
}
.temp-badge b { color: var(--accent-2); }
.temp-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex: none; }

.live-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(74,222,128,0.1); border: 1px solid var(--ok);
  color: var(--text-muted); font-size: 0.78rem; padding: 0.55em 1.1em; border-radius: 999px;
  margin-bottom: 1.4em;
}
.live-badge b { color: var(--ok); }
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; animation: pulse-dot 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-badge .dot { animation: none; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Kang Mas (widget support teknis) SENGAJA belum dipasang di IXHA OS pass ini — butuh webhook n8n
   terpisah, di luar scope "pondasi arsitektur sistem visual". Nyusul kalau IXHA lanjut ke build
   sungguhan (lihat pola di style.css Genta OS + 1. administrasi/SOP-Kang-Mas.md kalau mau nambah). */

/* ---------- Tutorial accordion ---------- */
.tut-intro { max-width: 72ch; color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }
.tut-intro + .tut-intro { margin-top: 1em; }
.tut-flow { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; counter-reset: tut-step; }
.tut-flow-item { display: flex; gap: 0.9em; align-items: flex-start; }
.tut-flow-item::before {
  counter-increment: tut-step; content: counter(tut-step);
  flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--accent); color: var(--bg-void);
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700;
}
.tut-flow-item p { margin: 0; color: var(--text-muted); font-size: 0.88rem; padding-top: 0.15em; }
.tut-flow-item b { color: var(--text-primary); }

.tut-item {
  background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px;
  margin-bottom: 1px;
}
.tut-item summary {
  list-style: none; cursor: pointer; user-select: none; padding: 0.9em 1.1em;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
}
.tut-item summary::-webkit-details-marker { display: none; }
.tut-item summary::after { content: "\203A"; transition: transform 0.15s ease; color: var(--text-dim); font-size: 1rem; flex: none; }
.tut-item[open] summary::after { transform: rotate(90deg); }
.tut-item summary .tname { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.tut-item summary .tleft { display: flex; align-items: center; gap: 0.8em; }
.tut-item-body { padding: 0 1.1em 1.1em; }
.tut-item-body .row { margin-bottom: 0.8em; }
.tut-item-body .row:last-child { margin-bottom: 0; }
.tut-item-body .label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3em; }
.tut-item-body .val { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Laporan Iklan: tab dua-lapis, saldo, event ---------- */
.tab-bar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 1px; }
.tab-bar .tab-btn {
  background: var(--bg-surface); border: 1px solid var(--hairline); border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 0.6em 1.1em; font-size: 0.82rem; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.tab-bar .tab-btn .tab-count {
  background: var(--bg-surface-3); color: var(--text-dim); padding: 0.1em 0.55em; border-radius: 999px;
  font-size: 0.7rem; margin-left: 0.5em;
}
.tab-bar.stage-tab-bar .tab-btn.active { background: var(--accent); color: var(--bg-void); font-weight: 700; border-color: var(--accent); }
.tab-bar.stage-tab-bar .tab-btn.active .tab-count { background: var(--bg-void); color: var(--accent-bright); }
.tab-bar.product-tab-bar .tab-btn.active { background: var(--accent-2); color: #fff; font-weight: 700; border-color: var(--accent-2); }
.tab-bar.product-tab-bar .tab-btn.active .tab-count { background: rgba(0,0,0,0.25); color: #fff; }
.tab-panel { background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 0 4px 4px 4px; padding: 1.3em; margin-bottom: 1.4em; }
.tab-panel[hidden] { display: none; }

.saldo-aman { color: var(--ok); }
.saldo-menipis { color: var(--warn); }
.saldo-kritis { color: var(--crit); }

.event-tag { font-size: 0.7rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: 4px; }
.event-tag.off { background: rgba(255,92,92,0.15); color: var(--crit); }
.event-tag.scale_ok { background: rgba(74,222,128,0.15); color: var(--ok); }
.event-tag.scale_aggressive { background: rgba(251,191,36,0.15); color: var(--warn); }

.chart-wrap { position: relative; height: 260px; margin-bottom: 1.2em; }
.chart-wrap-title { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.6em; }

.sublink-card { display: flex; align-items: center; gap: 1.2em; background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 1.1em 1.3em; margin-bottom: 1.4em; flex-wrap: wrap; }
.sublink-card .sublink-desc h3 { margin: 0 0 0.3em; font-size: 0.92rem; color: var(--text-primary); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.sublink-card .sublink-desc p { margin: 0; font-size: 0.82rem; color: var(--text-dim); max-width: 60ch; }
.sublink-btn { flex: none; background: var(--accent); color: var(--bg-void); font-weight: 700; text-decoration: none; padding: 0.7em 1.3em; border-radius: 4px; font-size: 0.85rem; }

.decision-card { border: 1px solid var(--hairline); border-radius: 4px; padding: 1em 1.2em; margin-bottom: 0.9em; background: var(--bg-surface); }
.decision-card:last-child { margin-bottom: 0; }
.decision-card .dhead { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 0.6em; flex-wrap: wrap; }
.decision-card .dtitle { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.decision-card .ddate { font-size: 0.74rem; color: var(--text-dim); }
.decision-card .drow { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4em; }
.decision-card .drow b { color: var(--text-primary); }

/* ---------- Chart labels (SVG) ---------- */
.chart-label { font-size: 11px; fill: var(--text-primary); }
.chart-label-muted { font-size: 10.5px; fill: var(--text-dim); }

/* ============ Komponen baru khusus IXHA OS ============ */

/* ---------- Progress bar departemen (halaman Klaster) ---------- */
.dept-row { display: flex; align-items: center; gap: 1em; padding: 0.6em 0; font-size: 0.85rem; }
.dept-row + .dept-row { border-top: 1px solid var(--hairline); }
.dept-row .dept-label { width: 190px; flex: none; color: var(--text-muted); }
.dept-track { flex: 1; height: 8px; background: var(--bg-surface-3); border-radius: 999px; overflow: hidden; }
.dept-fill { height: 100%; background: var(--accent-2); border-radius: 999px; }
.dept-fill.done { background: var(--ok); }
.dept-fill.idle { background: var(--text-dim); }
.dept-pct { width: 40px; flex: none; text-align: right; color: var(--text-primary); font-weight: 600; }

/* ---------- Halaman "Ngobrol dengan CEO" — thread + chat shell (belum ada backend) ---------- */
.thread-shell { display: grid; grid-template-columns: 240px 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; min-height: 420px; }
@media (max-width: 900px) { .thread-shell { grid-template-columns: 1fr; } }
.thread-list { background: var(--bg-surface-2); padding: 0.6em; display: flex; flex-direction: column; gap: 2px; }
.thread-item { padding: 0.7em 0.8em; border-radius: 6px; cursor: default; }
.thread-item.active { background: var(--bg-surface-3); }
.thread-item .tname { font-size: 0.83rem; color: var(--text-primary); font-weight: 600; }
.thread-item .tsnippet { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.2em; }
.chat-shell { background: var(--bg-surface); display: flex; flex-direction: column; }
.chat-body { flex: 1; padding: 1.2em; display: flex; flex-direction: column; gap: 0.8em; overflow-y: auto; }
.chat-bubble { max-width: 68%; padding: 0.6em 0.9em; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; }
.chat-bubble.from-ceo { align-self: flex-start; background: var(--bg-surface-3); color: var(--text-primary); border-bottom-left-radius: 3px; }
.chat-bubble.from-user { align-self: flex-end; background: var(--accent); color: var(--bg-void); font-weight: 500; border-bottom-right-radius: 3px; }
.chat-input-bar { border-top: 1px solid var(--hairline); padding: 0.9em; display: flex; gap: 0.6em; }
.chat-input-fake { flex: 1; height: 34px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--hairline-strong); }

/* ---------- Riwayat Sistem Komando Utama ---------- */
.komando-history-card { border: 1px solid var(--hairline); border-radius: 4px; padding: 1em 1.2em; background: var(--bg-surface); }
.komando-history-card .khead { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 0.5em; }
.komando-history-card .ktitle { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.komando-history-card .kdate { font-size: 0.74rem; color: var(--text-dim); }
.komando-history-card .knote { font-size: 0.83rem; color: var(--text-muted); margin-top: 0.4em; }

/* ---------- AI Video Studio (gaya BizAI StoryFlow — produk asli bizai.id, lihat build.py) ---------- */
.studio-hero {
  background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface));
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1.6em 1.8em;
  margin-bottom: 1.6em;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5em; flex-wrap: wrap;
}
.studio-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-bright); background: rgba(255,122,41,0.12); border-radius: 999px;
  padding: 0.35em 0.9em; margin-bottom: 0.8em;
}
.studio-hero h1 { margin: 0 0 0.5em; font-size: 1.7rem; font-family: "Iowan Old Style","Palatino Linotype",Georgia,serif; }
.studio-hero h1 span { color: var(--accent-2); }
.studio-hero p { margin: 0; color: var(--text-muted); font-size: 0.9rem; max-width: 56ch; }
.studio-hero .badge-ready {
  flex: none; font-size: 0.78rem; font-weight: 700; color: var(--accent-bright);
  background: rgba(255,122,41,0.12); border: 1px solid rgba(255,122,41,0.3);
  border-radius: 999px; padding: 0.6em 1.1em; white-space: nowrap;
}

.studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1em; }
.studio-card {
  background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 1.3em 1.4em; display: flex; flex-direction: column; gap: 0.9em; position: relative;
}
.studio-card .shead { display: flex; align-items: flex-start; justify-content: space-between; }
.studio-card .sicon {
  width: 42px; height: 42px; border-radius: 8px; background: var(--bg-surface-3);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none;
}
.studio-card .sbadges { display: flex; align-items: center; gap: 0.5em; }
.studio-card .sno { font-size: 0.72rem; color: var(--text-dim); }
.studio-card .stitle { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.studio-card .sdesc { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; margin: 0; flex: 1; }
.studio-card .sfoot {
  display: flex; align-items: center; justify-content: space-between; padding-top: 0.9em;
  border-top: 1px solid var(--hairline);
}
.studio-card .sfoot a { color: var(--accent-2); font-size: 0.8rem; font-weight: 700; text-decoration: none; letter-spacing: 0.03em; text-transform: uppercase; }
.studio-card .sarrow {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent-2); flex: none;
}

.studio-back-row { display: flex; align-items: center; gap: 0.9em; margin-bottom: 1.4em; flex-wrap: wrap; }
.studio-back-row a { color: var(--text-dim); font-size: 0.83rem; text-decoration: none; }
.studio-back-row a:hover { color: var(--text-primary); }
.studio-back-row .pill { background: var(--bg-surface-3); color: var(--text-muted); }

.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-bottom: 1.4em; }
@media (max-width: 700px) { .upload-row { grid-template-columns: 1fr; } }
.upload-box {
  border: 1.5px dashed var(--hairline-strong); border-radius: 8px; background: var(--bg-surface-2);
  min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6em; text-align: center; padding: 1em;
}
.upload-box.disabled { opacity: 0.4; }
.upload-box .uicon {
  width: 44px; height: 44px; border-radius: 8px; background: var(--bg-surface-3);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent-2);
}
.upload-box .ulabel { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-2); }
.upload-box-mini { border: 1px dashed var(--hairline-strong); border-radius: 8px; background: var(--bg-surface-2); padding: 1em 0.6em; text-align: center; }
.upload-box-mini .uicon { width: 34px; height: 34px; margin: 0 auto 0.5em; border-radius: 7px; background: var(--bg-surface-3); display: flex; align-items: center; justify-content: center; color: var(--accent-2); }
.upload-box-mini .ulabel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-2); }

.field-label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; margin-bottom: 0.6em; display: block; }
.field-input {
  width: 100%; background: var(--bg-surface); border: 1px solid var(--hairline-strong); border-radius: 6px;
  color: var(--text-primary); font-family: inherit; font-size: 0.87rem; padding: 0.75em 1em; margin-bottom: 0.8em;
}
.field-input::placeholder { color: var(--text-dim); }
textarea.field-input { min-height: 70px; resize: vertical; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 1em 1.2em; margin-bottom: 1.4em; }
.toggle-row .trow-t { font-size: 0.87rem; font-weight: 600; color: var(--text-primary); }
.toggle-row .trow-d { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.2em; }
.toggle-switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--bg-surface-3); border: 1px solid var(--hairline-strong); position: relative; cursor: pointer; padding: 0; }
.toggle-switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: left 0.15s ease, background 0.15s ease; }
.toggle-switch.on { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; }
.toggle-switch.on .knob { left: 22px; background: #fff; }

.seg-group { display: flex; gap: 0.5em; flex-wrap: wrap; }
.seg-group.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; }
.seg-btn {
  flex: 1; background: var(--bg-surface); border: 1px solid var(--hairline-strong); border-radius: 6px;
  color: var(--text-muted); font-family: inherit; font-size: 0.85rem; padding: 0.75em 1em; cursor: pointer;
}
.seg-btn.active { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; border-color: transparent; }

.studio-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; margin-bottom: 1.6em; }
@media (max-width: 700px) { .studio-form-grid { grid-template-columns: 1fr; } }

.btn-continue {
  display: block; width: 100%; text-align: center; padding: 1em; border-radius: 8px; border: none;
  background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700;
  font-family: inherit; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
}
.btn-continue.disabled { opacity: 0.4; cursor: not-allowed; }
.btn-confirm {
  background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #fff; border: none; border-radius: 6px;
  padding: 0.7em 1.4em; font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; cursor: pointer;
}

/* ---------- Tools & Studio AI (shortcut eksternal, pola sama Ideku, warna ikut token IXHA OS) ---------- */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
@media (max-width: 700px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card {
  display: block; text-decoration: none; border: 1px solid var(--hairline); border-radius: 8px;
  overflow: hidden; background: var(--bg-surface-2); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.5); border-color: var(--hairline-strong); }
.tool-card.featured { border-color: var(--ok); }
.tool-thumb {
  height: 120px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
  text-align: center; padding: 1em; background-size: cover; background-position: center; position: relative;
}
.tool-thumb .play-ic {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.tool-body { padding: 1em 1.1em 1.1em; }
.tool-body h4 { margin: 0 0 0.4em; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.tool-body p { margin: 0 0 0.7em; font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; }
.tool-link { font-size: 0.8rem; font-weight: 700; color: var(--accent-2); }

/* ---------- Riset Konten — kotak rekomendasi menonjol ---------- */
.reko-box {
  background: rgba(255,122,41,0.1); border: 1px solid rgba(255,122,41,0.3); border-radius: 6px;
  padding: 0.8em 1em; margin-top: 0.6em; font-size: 0.87rem; color: var(--text-primary);
}
.reko-box b { color: var(--accent-bright); }

.card-actions { display: flex; gap: 0.6em; margin-top: 0.8em; padding-top: 0.8em; border-top: 1px solid var(--hairline); }
.btn-sm { font-family: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.4em 0.9em; border-radius: 5px; cursor: pointer; }
.btn-sm.download { background: rgba(46,158,255,0.12); color: var(--accent-2); border: 1px solid var(--hairline-strong); }
.btn-sm.danger { background: transparent; color: var(--crit); border: 1px solid transparent; }
.btn-sm.danger:hover { border-color: var(--crit); }
.textarea-field { width: 100%; background: var(--bg-surface); border: 1px solid var(--hairline-strong); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; padding: 0.6em 0.8em; margin-bottom: 0.7em; min-height: 54px; resize: vertical; }
.riset-empty { color: var(--text-dim); font-size: 0.85rem; padding: 1em 0; }
.saved-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ok); background: rgba(74,222,128,0.12); padding: 0.2em 0.6em; border-radius: 999px; margin-left: 0.6em; }

/* ---------- Sidebar — tombol Keluar (auth guard, hanya render kalau backend_configured) ---------- */
.logout-btn {
  width: 100%; background: transparent; border: 1px solid var(--hairline-strong); color: var(--text-dim);
  padding: 0.6em; border-radius: 999px; font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.logout-btn:hover { background: var(--bg-surface-3); color: var(--text-primary); }

/* ---------- Toast "belum tersambung" — dipakai semua tombol AI yang digerbang BACKEND_READY ---------- */
.ixha-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 500;
  background: var(--bg-surface-3); border: 1px solid var(--hairline-strong); color: var(--text-primary);
  padding: 0.8em 1.2em; border-radius: 8px; font-size: 0.84rem; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.5);
  max-width: 90vw;
}

/* ---------- Riset Bisnis — grid kartu + modal 5-tab (pola sama Bang Jabo bizai.id) ---------- */
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }
.rb-card { border: 1px solid var(--hairline); border-radius: 6px; padding: 1em 1.1em; background: var(--bg-surface); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.rb-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.rb-card .rb-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6em; margin-bottom: 0.5em; }
.rb-card .rb-nama { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; line-height: 1.35; }
.rb-card .rb-field-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-2); margin-top: 0.6em; }
.rb-card .rb-field-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2em; }

.rb-modal-overlay { position: fixed; inset: 0; background: rgba(10,14,26,0.7); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rb-modal { background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 1.6em 1.8em; width: 100%; max-width: 760px; max-height: 90vh; overflow-y: auto; }
.rb-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1em; }
.rb-modal-header h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.rb-modal-close { background: none; border: none; font-size: 1.4rem; color: var(--text-dim); cursor: pointer; line-height: 1; }

.rb-tabs { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 1.2em; }
.rb-tab { padding: 0.5em 1em; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: var(--text-dim); cursor: pointer; background: var(--bg-surface-2); border: 1px solid var(--hairline); }
.rb-tab.active { background: var(--accent); color: var(--bg-void); border-color: var(--accent); }
.rb-tab.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.rb-panel-actions { display: flex; justify-content: flex-end; gap: 0.6em; margin-top: 1.2em; }
.rb-result-block { background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.8em 1em; margin-bottom: 0.7em; }
.rb-result-block .rb-field-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-2); margin-bottom: 0.3em; }
.rb-result-block .rb-field-value { font-size: 0.85rem; color: var(--text-primary); line-height: 1.55; white-space: pre-wrap; }
.rb-nodata { color: var(--text-dim); font-size: 0.84rem; padding: 1em 0; text-align: center; }

.rb-chat-thread { max-height: 300px; overflow-y: auto; border: 1px solid var(--hairline); border-radius: 6px; padding: 0.9em; background: var(--bg-void); margin-bottom: 0.8em; display: flex; flex-direction: column; gap: 0.6em; }
.rb-msg { max-width: 80%; padding: 0.55em 0.85em; border-radius: 12px; font-size: 0.84rem; line-height: 1.5; }
.rb-msg.user { align-self: flex-end; background: var(--accent); color: var(--bg-void); border-bottom-right-radius: 3px; }
.rb-msg.jabo { align-self: flex-start; background: var(--bg-surface-3); color: var(--text-primary); border-bottom-left-radius: 3px; }
.rb-msg .who { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; margin-bottom: 0.2em; }
.rb-chat-input-row { display: flex; gap: 0.6em; }
.rb-chat-input-row textarea { flex: 1; min-height: 46px; }