@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ===================== DESIGN TOKENS — LIGHT ===================== */
:root{
  --bg: #F6F7F5;
  --surface: #FFFFFF;
  --surface-2: #FBFBFA;
  --surface-3: #F0F2EE;
  --ink: #16241D;
  --ink-2: #2D3E34;
  --muted: #5B6B62;
  --muted-2: #8A968F;
  --border: #E3E7E1;
  --border-2: #D0D5CD;
  --sidebar-bg: #10231C;
  --sidebar-ink: #CFE0D6;
  --sidebar-ink-dim: #7E9A8B;
  --accent: #1E8F6F;
  --accent-ink: #0E6B51;
  --accent-soft: #E4F3EC;
  --accent-hover: #177A5E;
  --warn: #C98A2A;
  --warn-soft: #FBF0DD;
  --warn-ink: #92610E;
  --danger: #B4483D;
  --danger-soft: #FBE8E5;
  --danger-ink: #922F25;
  --info: #2563EB;
  --info-soft: #DBEAFE;
  --gray-soft: #EEF0ED;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,35,28,.06);
  --shadow-md: 0 6px 20px rgba(16,35,28,.08);
  --shadow-lg: 0 12px 32px rgba(16,35,28,.12);
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --transition: .2s ease;
}

/* ===================== DARK MODE ===================== */
[data-theme="dark"]{
  --bg: #0D1117;
  --surface: #161B22;
  --surface-2: #1C2129;
  --surface-3: #252B35;
  --ink: #E6EDF3;
  --ink-2: #C9D1D9;
  --muted: #8B949E;
  --muted-2: #6E7681;
  --border: #2D333B;
  --border-2: #3D444D;
  --sidebar-bg: #090D12;
  --sidebar-ink: #8B949E;
  --sidebar-ink-dim: #6E7681;
  --accent: #3FB68B;
  --accent-ink: #3FB68B;
  --accent-soft: rgba(63,182,139,.12);
  --accent-hover: #33A07A;
  --warn: #E3B341;
  --warn-soft: rgba(227,179,65,.12);
  --warn-ink: #E3B341;
  --danger: #F85149;
  --danger-soft: rgba(248,81,73,.12);
  --danger-ink: #F85149;
  --info: #58A6FF;
  --info-soft: rgba(88,166,255,.12);
  --gray-soft: #21262D;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0D1117;
    --surface: #161B22;
    --surface-2: #1C2129;
    --surface-3: #252B35;
    --ink: #E6EDF3;
    --ink-2: #C9D1D9;
    --muted: #8B949E;
    --muted-2: #6E7681;
    --border: #2D333B;
    --border-2: #3D444D;
    --sidebar-bg: #090D12;
    --sidebar-ink: #8B949E;
    --sidebar-ink-dim: #6E7681;
    --accent: #3FB68B;
    --accent-ink: #3FB68B;
    --accent-soft: rgba(63,182,139,.12);
    --accent-hover: #33A07A;
    --warn: #E3B341;
    --warn-soft: rgba(227,179,65,.12);
    --warn-ink: #E3B341;
    --danger: #F85149;
    --danger-soft: rgba(248,81,73,.12);
    --danger-ink: #F85149;
    --info: #58A6FF;
    --info-soft: rgba(88,166,255,.12);
    --gray-soft: #21262D;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 6px 20px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}

/* ===================== RESET ===================== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition: background var(--transition), color var(--transition);
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--ink); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:14px; color:var(--ink); }
table{ border-collapse:collapse; width:100%; }
.icon{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background:var(--accent-soft); color:var(--accent-ink); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* ===================== LOGIN ===================== */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, #163229 0%, #10231C 55%, #0B1712 100%);
  padding:24px; position:relative; overflow:hidden;
}
.login-screen::before{
  content:''; position:absolute; width:500px; height:500px;
  background:radial-gradient(circle, rgba(30,143,111,.15) 0%, transparent 70%);
  top:-150px; right:-150px; border-radius:50%;
}
.login-screen::after{
  content:''; position:absolute; width:350px; height:350px;
  background:radial-gradient(circle, rgba(30,143,111,.08) 0%, transparent 70%);
  bottom:-80px; left:-80px; border-radius:50%;
}
.login-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:36px 32px;
  width:100%; max-width:400px; box-shadow:var(--shadow-lg);
  position:relative; z-index:1; border:1px solid var(--border);
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.login-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.5px;
}
.login-brand h1{ font-size:17px; margin:0; }
.login-brand p{ margin:2px 0 0; font-size:12px; color:var(--muted); }
#loginForm label{ display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:14px; }
#loginForm input{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); color:var(--ink);
  transition: border-color var(--transition);
}
#loginForm input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.form-error{
  background:var(--danger-soft); color:var(--danger); padding:8px 10px;
  border-radius:8px; font-size:12.5px; margin-bottom:14px;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:8px; padding:9px 14px;
  font-size:13.5px; font-weight:600; transition:all var(--transition); white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-outline{ background:var(--surface); border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:transparent; color:var(--sidebar-ink-dim); border:1px solid rgba(255,255,255,.12); }
.btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-block{ width:100%; }
.btn-icon{ background:none; border:none; font-size:16px; color:var(--muted); padding:4px; }
.btn-icon:hover{ color:var(--ink); }
.btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:6px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* Ikon SVG pengganti emoji (lihat ICONS/icon() di app.js).
   `currentColor` bikin ikon otomatis ikut warna teks induknya — termasuk saat
   hover, disabled, dan dark mode — tanpa perlu aturan warna terpisah.
   flex:none supaya ikon tidak ikut menyusut di flex container yang sempit. */
.ico{ width:15px; height:15px; flex:none; vertical-align:-2px; }
.btn .ico{ margin-right:1px; }
.btn-sm .ico{ width:13px; height:13px; }
.ico-lg{ width:18px; height:18px; }
/* HANYA ikon loader yang berputar — jangan pakai `.btn:disabled .ico`, itu
   bikin ikon Simpan/Hapus ikut muter tiap kali tombolnya disabled.
   Animasi otomatis mati lewat aturan prefers-reduced-motion global. */
.ico-spin{ animation:ico-spin 1s linear infinite; transform-origin:50% 50%; }
@keyframes ico-spin{ to{ transform:rotate(360deg); } }

/* Target sentuh minimum 44px — HANYA di perangkat sentuh (pointer:coarse).
   Dashboard ini padat data; memaksa 44px di desktop bikin semua tombol
   melar dan tabel jadi boros ruang. Dengan media query ini, mouse tetap
   dapat tampilan rapat, jari tetap dapat target yang layak (Apple HIG 44pt /
   Material 48dp). Padding dipakai (bukan height) supaya tidak merusak
   tombol yang isinya sudah tinggi. */
@media (pointer: coarse) {
  .btn{ min-height:44px; padding-top:11px; padding-bottom:11px; }
  .btn-sm{ min-height:44px; padding-top:9px; padding-bottom:9px; }
  .btn-icon{ min-width:44px; min-height:44px; }
  /* Tombol ikon mungil (mis. hapus gambar 22x22) — perbesar area sentuh
     tanpa mengubah ukuran visualnya, pakai pseudo-element. */
  .tap-target{ position:relative; }
  .tap-target::after{
    content:''; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
}

/* ===================== APP SHELL ===================== */
.app-shell{ display:flex; min-height:100vh; }
.app-shell[hidden]{ display:none !important; }

/* Sidebar */
.sidebar{
  width:220px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh;
  border-right:1px solid rgba(255,255,255,.06); z-index:100;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.brand-text{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:15px; letter-spacing:-.01em; }
.sidebar-nav{
  display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--sidebar-ink-dim) transparent;
}
.nav-group{ margin-bottom:2px; }
.nav-group-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:8px 10px; border:none; border-radius:6px; background:transparent;
  color:rgba(255,255,255,.4); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  cursor:pointer; transition:all var(--transition); text-transform:uppercase;
}
.nav-group-toggle:hover{ color:rgba(255,255,255,.7); background:rgba(255,255,255,.04); }
.nav-chevron{ transition:transform .2s ease; flex-shrink:0; }
.nav-group.open .nav-chevron{ transform:rotate(180deg); }
.nav-group-items{
  overflow:hidden; max-height:0; transition:max-height .25s ease;
  display:flex; flex-direction:column; gap:1px;
}
.nav-group.open .nav-group-items{ max-height:300px; }
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--sidebar-ink-dim); transition:all var(--transition);
  min-height:0;
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background:rgba(30,143,111,.2); color:#fff; font-weight:600; }
.sidebar-nav a.active .icon{ stroke:var(--accent); }
.sidebar-footer{ border-top:1px solid rgba(255,255,255,.08); padding-top:12px; margin-top:12px; }
.user-badge{ font-size:12px; color:var(--sidebar-ink-dim); padding:0 8px 10px; }

/* Main column */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:50;
  transition: background var(--transition), border-color var(--transition);
}
.topbar-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }
.select-product{
  padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink); cursor:pointer;
  transition: border-color var(--transition);
}
.select-product:hover{ border-color:var(--accent); }
.page-content{ padding:24px 26px 60px; flex:1; }

/* Theme toggle */
.theme-toggle{
  background:none; border:1px solid var(--border); border-radius:8px;
  padding:7px 9px; cursor:pointer; color:var(--muted);
  display:inline-flex; align-items:center; transition:all var(--transition); font-size:16px;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* Mobile menu toggle */
.menu-toggle{
  display:none; background:none; border:none;
  color:var(--ink); padding:4px; cursor:pointer; font-size:20px;
}

/* ===================== CARDS / GRID ===================== */
.grid{ display:grid; gap:12px; }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1100px){ .grid-4,.grid-5{ grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:860px){ .grid-4,.grid-5,.grid-3{ grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2,.grid-5{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px; box-shadow:var(--shadow-sm); min-width:0; overflow:hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover{ border-color:var(--border-2); box-shadow:var(--shadow-md); }
.card-title{ font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; white-space:nowrap; }
.card-value{ font-family:var(--font-display); font-size:22px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-sub{ font-size:11px; color:var(--muted-2); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-accent{ border-left:3px solid var(--accent); }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.section-head h3{ font-size:15px; }
.section-head:first-child{ margin-top:0; }

.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.panel-scroll{ overflow-x:auto; }

/* ===================== TABLES ===================== */
table.data{ font-size:13px; }
table.data th{
  text-align:left; padding:10px 14px; background:var(--surface-2); color:var(--muted);
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data td{ padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; font-variant-numeric:tabular-nums; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:var(--surface-2); }

/* ===================== STATUS PILLS (signature) ===================== */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-scale{ background:var(--accent-soft); color:var(--accent-ink); }
.pill-monitor{ background:var(--warn-soft); color:var(--warn); }
.pill-pause{ background:var(--danger-soft); color:var(--danger); }
.pill-na{ background:var(--gray-soft); color:var(--muted); }
.pill-nodata{ background:#e3f2fd; color:#1565c0; }
.pill-hold{ background:var(--warn-soft); color:var(--warn); }
.pill-kill{ background:var(--danger-soft); color:var(--danger); }
.pill-watch{ background:#fff8e1; color:#f9a825; }

/* ===================== FORMS / FILTERS ===================== */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.filter-bar label{ font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.filter-bar input, .filter-bar select{
  padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink);
  transition: border-color var(--transition);
}
.filter-bar input:focus, .filter-bar select:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- Pemilih multi (mis. CEP di Creative Lab) ----
   Sengaja BUKAN <select multiple>: kontrol itu tidak punya "pilih semua",
   menyembunyikan pilihan di balik gulir, dan di sentuh hampir tak terpakai. */
.ms{ position:relative; }
.ms-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:190px; padding:8px 10px; font:inherit; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink);
  transition: border-color var(--transition);
}
.ms-btn:hover{ border-color:var(--border-2); }
.ms-btn:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.ms-caret{ color:var(--muted); transition: transform var(--transition); }
.ms-btn[aria-expanded="true"] .ms-caret{ transform: rotate(180deg); }

.ms-panel{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:100%;
  max-height:280px; overflow-y:auto; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
/* Disengaja `.ms-panel .ms-opt`, bukan `.ms-opt` saja.
   Pemilih ini dipakai DI DALAM `.filter-bar`, dan di sana sudah ada
   `.filter-bar label` (0,1,1) yang mengalahkan `.ms-opt` (0,1,0) — hasilnya
   opsi ikut jadi label filter: display:block, 11,5px, warna redup, tebal.
   Dua kelas (0,2,0) mengalahkannya. Properti yang dipaksakan `.filter-bar
   label` juga dikembalikan eksplisit di bawah, jangan dihapus. */
.ms-panel .ms-opt{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:6px;
  font-size:13px; font-weight:500; color:var(--ink); margin-bottom:0;
  cursor:pointer; white-space:nowrap;
}
.ms-panel .ms-opt:hover{ background:var(--surface-2); }
.ms-panel .ms-opt input{ accent-color:var(--accent); width:15px; height:15px; flex:none; cursor:pointer; margin:0; }
.ms-panel .ms-opt-all{ font-weight:600; }
.ms-sep{ height:1px; background:var(--border); margin:5px 2px; }

@media (pointer: coarse){
  .ms-btn{ min-height:44px; }
  .ms-panel .ms-opt{ min-height:44px; }
  .ms-panel .ms-opt input{ width:18px; height:18px; }
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid label{ font-size:12px; color:var(--muted); font-weight:600; display:block; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; margin-top:5px; padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--ink);
}
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab{ padding:9px 14px; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; transition:color var(--transition); }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--accent-ink); border-color:var(--accent); }

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); display:flex;
  align-items:center; justify-content:center; z-index:50; padding:20px;
  animation:fadeIn .15s ease;
}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); padding:24px;
  width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  animation:slideUp .2s ease;
}
.modal h3{ margin-bottom:16px; font-size:16px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===================== TOAST ===================== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:60; box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}

/* ===================== TOTAL ROW ===================== */
.data tfoot tr.total-row td{ font-weight:700; border-top:2px solid var(--ink); background:var(--surface-2); border-bottom:none; }
.data tfoot tr.total-row td strong{ font-weight:700; }

/* ===================== MISC ===================== */
.empty-state{ text-align:center; padding:40px 20px; color:var(--muted); }
.muted{ color:var(--muted); }
.text-right{ text-align:right; }
.mt-16{ margin-top:16px; }
.chart-box{ height:280px; }
.badge-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.modal-overlay[hidden]{ display:none !important; }
.toast[hidden]{ display:none !important; }

/* ===================== LOADING SKELETON ===================== */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius);
}

/* ===================== RESPONSIVE SIDEBAR ===================== */
@media (max-width:900px){
  .sidebar{
    position:fixed; left:-260px; width:260px;
    transition:left var(--transition); box-shadow:none; z-index:200;
  }
  .sidebar.open{ left:0; box-shadow:var(--shadow-lg); }
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:199; display:none;
  }
  .sidebar-backdrop.show{ display:block; }
  .menu-toggle{ display:flex; align-items:center; }
  .main-col{ width:100%; }
  .topbar{ padding:12px 16px; }
  .page-content{ padding:16px; }
}

/* ===================== LP ANALYSIS CARDS ===================== */
.lp-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lp-card-header strong{ font-size:14px; }
.lp-card-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.lp-stat{ display:flex; flex-direction:column; gap:2px; }
.lp-stat-label{ font-size:10.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.lp-stat-value{ font-family:var(--font-display); font-size:17px; font-weight:700; }
.lp-card-chart{ height:50px; margin-top:4px; }

/* ===================== QUKIS DASHBOARD PARAMETER STYLES ===================== */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-head h1{ margin:0; font-size:22px; }
.page-head .sub{ margin-top:4px; }
.head-art{ display:flex; align-items:center; gap:10px; }
.doc-btn{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 12px; font-size:12.5px; color:var(--muted); cursor:pointer; transition:border-color var(--transition); }
.doc-btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
.doc-btn svg{ width:18px; height:18px; stroke:currentColor; }
.filter-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.filter-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.filter-row .field{ min-width:100px; }
.filter-row .field label{ font-size:11px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.filter-row input, .filter-row select{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box; }
.toolbar{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; position:relative; }
.toolbar-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cols-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; position:absolute; right:16px; top:60px; z-index:5; padding:14px; min-width:210px; box-shadow:var(--shadow-lg); }
.cols-panel label{ display:flex; gap:8px; align-items:center; margin:6px 0; font-size:13px; cursor:pointer; }
.cols-panel label.muted-col{ color:var(--muted); }
.table-wrap{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.report-table{ width:100%; border-collapse:collapse; font-size:13px; }
.report-table th{ text-align:left; padding:10px 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; cursor:help; background:var(--surface-2); }
.report-table td{ padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.report-table tr:hover td{ background:var(--surface-2); }
.report-table tr.total{ font-weight:700; border-top:2px solid var(--ink); background:var(--surface-2); }
.report-table tr.total td{ border-bottom:none; }
.report-table .pct{ font-size:11px; color:var(--muted-2); margin-left:6px; }
.currency{ font-variant-numeric:tabular-nums; }
.empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty svg{ width:36px; height:36px; stroke:currentColor; margin-bottom:10px; }
.empty-title{ font-size:14px; font-weight:600; margin-bottom:4px; }
.pill-count{ background:var(--accent-soft); color:var(--accent-ink); font-size:11px; padding:2px 10px; border-radius:999px; font-weight:600; }
.loading{ text-align:center; padding:40px; color:var(--muted); }

/* ===================== CEP TRACKER SPACING ===================== */
#trkCards{ margin-bottom:20px; }
#trkCards .card{ padding:16px 18px; }

/* ===== Creative preview + inline video ===== */
.creative-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;vertical-align:middle;background:var(--surface-3);cursor:pointer}
.creative-thumb-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:16px}
.btn-play{position:relative;border:none;background:transparent;padding:0;cursor:pointer;line-height:0}
.btn-play .play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:11px;pointer-events:none}
.video-row td{background:var(--surface-3);padding:12px !important}
.video-wrap{max-width:420px;margin:0 auto}
.video-player{width:100%;max-width:420px;aspect-ratio:9/16;border-radius:10px;background:#000;display:block}
.video-loading{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.video-link{display:inline-block;margin-top:6px;font-size:12px;color:var(--accent);text-decoration:none}

/* ===== Structured AI analysis ===== */
.analysis-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.analysis-item{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.analysis-item-head{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px}
.analysis-reason{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.analysis-actions{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55}
.analysis-actions li{margin-bottom:2px}

/* ===== Recon table grouped headers ===== */
.th-group{text-align:center;border-bottom:2px solid var(--border);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
#reconTable td,#reconTable th{font-size:12px;padding:6px 8px;white-space:nowrap}

/* ===== KPI cards row (LP Analysis + reusable) ===== */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-align:center}
.kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.kpi-value{font-size:22px;font-weight:700;color:var(--ink)}
/* Baris kecil di bawah angka utama (mis. persentase Visitor -> Lead). */
.kpi-sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:600}
/* Sama, tapi untuk di dalam sel tabel. */
.cell-sub{font-size:11px;color:var(--muted);font-weight:500}

/* ===== Ad Preview container ===== */
.ad-preview-container{display:flex;justify-content:center;padding:8px 0}
.ad-preview-container iframe{background:var(--surface);border-radius:10px}

/* ===== Creative Lab ===== */
.cl-header{margin-bottom:16px}
.cl-section{margin-bottom:20px}
.cl-section-title{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.cl-text{font-size:13px;line-height:1.65;color:var(--ink)}
.cl-tags{display:flex;flex-wrap:wrap;gap:6px}
.cl-tag{background:var(--accent-soft);color:var(--accent-ink);padding:4px 10px;border-radius:6px;font-size:12px}
.cl-tag-test{background:var(--warn-soft);color:var(--warn)}
.cl-card{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--surface);transition:border-color var(--transition)}
.cl-card:hover{border-color:var(--border-2)}
.cl-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}
.cl-card-num{background:var(--accent-soft);color:var(--accent-ink);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.cl-angle{font-size:12.5px;color:var(--muted-2);margin-bottom:10px;font-style:italic}
.cl-field{margin-bottom:10px}
.cl-field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px;font-weight:600}
.cl-field-val{font-size:13.5px;line-height:1.65;color:var(--ink);white-space:pre-line}
.cl-body{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--ink)}
.cl-brief{background:var(--accent-soft);border:1px dashed var(--accent);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--accent-ink)}
.cl-card-actions{display:flex;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.cl-risk{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--gray-soft)}
.cl-risk-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;flex-shrink:0;letter-spacing:.3px}
.cl-risk-rendah{background:var(--accent-soft);color:var(--accent-ink)}
.cl-risk-sedang{background:var(--warn-soft);color:var(--warn)}
.cl-risk-tinggi{background:var(--danger-soft);color:var(--danger)}
.cl-risk-text{font-size:12.5px;line-height:1.5;color:var(--muted-2)}
.cl-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px}
.cl-tab{padding:10px 20px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition),border-color var(--transition)}
.cl-tab:hover{color:var(--ink)}
.cl-tab-active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.cl-tab-panel-hidden{display:none}
.cl-shot-table{table-layout:fixed;width:100%;min-width:1100px}
.cl-shot-table colgroup{display:table-column-group}
.cl-shot-table th{font-size:12px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.cl-shot-table th:nth-child(1){width:50px}
.cl-shot-table th:nth-child(2){width:80px}
.cl-shot-table th:nth-child(3){width:180px}
.cl-shot-table th:nth-child(4){width:300px}
.cl-shot-table th:nth-child(5){width:280px}
.cl-shot-table th:nth-child(6){width:140px}
.cl-shot-table td{font-size:13px;line-height:1.55;vertical-align:top;word-wrap:break-word;overflow-wrap:break-word;white-space:normal !important}
.cl-shot-script{font-size:13px}
.cl-shot-prompt{font-size:12px;line-height:1.5;color:var(--muted-2)}
.cl-shot-edit{font-size:12px;color:var(--muted-2)}
.cl-send-pipeline{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.cl-send-pipeline:hover{opacity:.9}
.cl-send-pipeline:disabled{opacity:.5;cursor:default}
.cl-copy-shots{font-size:12px}

.vp-group{border:1px solid var(--border);border-radius:12px;margin-bottom:14px;background:var(--surface);overflow:hidden}
.vp-group-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);cursor:default;border-bottom:1px solid var(--border)}
.vp-group-toggle{background:none;border:none;cursor:pointer;padding:4px 6px;font-size:14px;color:var(--muted);line-height:1;transition:color .15s}
.vp-group-toggle:hover{color:var(--ink)}
.vp-chevron{display:inline-block;transition:transform .2s}
.vp-chevron-open{transform:rotate(90deg)}
.vp-group-title{font-size:15px;font-weight:700;color:var(--ink);background:none;border:1px solid transparent;border-radius:6px;padding:4px 8px;flex:1;min-width:0;transition:border-color .15s}
.vp-group-title:hover{border-color:var(--border)}
.vp-group-title:focus{border-color:var(--accent);outline:none}
.vp-group-count{font-size:12px;color:var(--muted);white-space:nowrap}
.vp-group-body{transition:max-height .3s ease}
.vp-group-collapsed{display:none}

/* ===== Tooltip indicator on table headers ===== */
th[title]{cursor:help;border-bottom:1px dashed var(--border-2)}
th[title]:hover{color:var(--accent)}

/* ===== Campaign selection & filter info ===== */
.camp-selection-info{font-size:12px;color:var(--accent);padding:6px 0;min-height:20px}
.camp-filter-info{font-size:12px;color:var(--warn);background:var(--warn-soft);border:1px solid rgba(201,138,42,.2);border-radius:8px;padding:6px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.camp-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}

/* ===== Jurnal Iklan ===== */
.journal-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:60vh}
@media(max-width:900px){.journal-layout{grid-template-columns:1fr}}
.journal-left,.journal-right{display:flex;flex-direction:column}
.journal-write{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.journal-write h4{margin-bottom:10px;font-size:14px}
.journal-write textarea{width:100%;resize:vertical;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--ink);font-size:13px;font-family:inherit;line-height:1.6}
.journal-extract-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.journal-graph{background:var(--surface);border:1px solid var(--border);border-radius:12px;min-height:200px;margin-bottom:12px;overflow:hidden}
.j-entry{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px;transition:border-color var(--transition)}
.j-entry:hover{border-color:var(--border-2)}
.j-entry-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.j-entry-date{font-weight:700;color:var(--accent-ink)}
.j-entry-actions{margin-left:auto;display:flex;gap:2px;opacity:0.4;transition:opacity .2s}
.j-entry:hover .j-entry-actions{opacity:1}
.j-entry-body{font-size:13px;line-height:1.6;color:var(--ink);white-space:pre-line}
.j-entry-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.j-tag{background:var(--accent-soft);color:var(--accent-ink);padding:1px 6px;border-radius:4px;font-size:10px}
.jx-result{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.jx-summary{font-size:13px;line-height:1.65;color:var(--ink);margin-bottom:12px}
.jx-section{margin-bottom:14px}
.jx-title{font-size:13px;font-weight:700;margin-bottom:6px}
.jx-item{margin-bottom:8px;padding:8px 10px;background:var(--gray-soft);border-radius:8px}
.jx-desc{font-size:12px;color:var(--muted-2);margin-top:3px;line-height:1.5}
.jx-hist-item{display:flex;justify-content:space-between;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--accent-ink);transition:background .15s}
.jx-hist-item:hover{background:var(--accent-soft)}

/* ===== Journal AI Reports ===== */
.jai-report-card{transition:border-color var(--transition)}
.jai-report-card:hover{border-color:var(--accent)}
.jai-report-content{white-space:pre-wrap;word-wrap:break-word;font-size:13px;line-height:1.7;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:16px;margin:0;font-family:inherit;max-height:70vh;overflow-y:auto}

/* ===== Profit Calculator ===== */
.profit-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.profit-layout{grid-template-columns:1fr}}
.profit-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profit-form label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.profit-form input,.profit-form textarea,.profit-form select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink);font-size:13px;font-family:inherit}
.profit-form textarea{resize:vertical}
.pf-row{display:contents}
.pf-field{display:contents}
.pf-section{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-ink);margin:8px 0 4px;font-weight:700}
.pc-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pc-kpi{background:var(--gray-soft);border-radius:8px;padding:10px;text-align:center}
.pc-kpi-label{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.3px}
.pc-kpi-val{font-size:20px;font-weight:700;color:var(--ink);margin-top:2px}
.pc-breakdown{border-top:1px solid var(--border);padding-top:10px}
.pc-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
.pc-sub{padding-left:12px;color:var(--muted-2);font-size:12.5px}
.pc-neg{color:var(--danger)}
.pc-total{border-top:1px solid var(--border);padding-top:8px;margin-top:6px;font-weight:700;font-size:15px}
.pc-positive{color:var(--accent)}
.pc-negative{color:var(--danger)}

/* ===================== AI VIDEO PRODUCTION PIPELINE ===================== */
.vp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.vp-header-text h2{font-size:20px;margin:0}
.vp-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-search-wrap{position:relative}
.vp-search{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);width:200px;font-size:13px;color:var(--ink);transition:border-color var(--transition)}
.vp-search:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

.vp-panel{border-radius:var(--radius-lg);overflow:hidden}
.vp-table-scroll{overflow-x:auto;max-height:calc(100vh - 200px);overflow-y:auto}

.vp-table{font-size:13px;border-collapse:separate;border-spacing:0}
.vp-table thead{position:sticky;top:0;z-index:3}
.vp-table th{background:var(--surface-2);padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.vp-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.vp-table tbody tr:hover td{background:var(--surface-2)}
.vp-table tbody tr:last-child td{border-bottom:none}

.vp-th-sticky,.vp-td-sticky{position:sticky;left:0;z-index:2;background:var(--surface-2)}
.vp-td-sticky{background:var(--surface)}
.vp-table tbody tr:hover .vp-td-sticky{background:var(--surface-2)}
.vp-th-no,.vp-td-no{width:46px;min-width:46px;text-align:center;font-weight:700;color:var(--muted)}

.vp-inline-select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-inline-select:focus{border-color:var(--accent);outline:none}
.vp-inline-input{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-inline-input:focus{border-color:var(--accent);outline:none}
.vp-duration{width:90px}
.vp-inline-textarea{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);resize:vertical;line-height:1.5;font-family:inherit;transition:border-color var(--transition)}
.vp-inline-textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.vp-script{min-height:120px}
.vp-prompt{min-height:180px;font-family:'Cascadia Code','Fira Code','SF Mono','Consolas',monospace;font-size:12px;letter-spacing:-.01em}

.vp-prompt-cell{position:relative}
.vp-prompt-cell .vp-copy-btn{position:absolute;top:4px;right:4px;opacity:0;transition:opacity .15s;padding:3px 6px;font-size:11px;z-index:1}
.vp-prompt-cell:hover .vp-copy-btn{opacity:1}

.vp-file-empty{display:flex;flex-direction:column;gap:6px;min-width:160px}
.vp-ai-gen-btn{font-size:12px !important;padding:5px 10px !important;white-space:nowrap}
.vp-final-video{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px}
.vp-final-label{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.vp-final-row{flex:1;max-width:400px}
.vp-final-row .vp-gdrive-input{width:100%}
.vp-gen-all-btn{font-size:11px !important;white-space:nowrap}
.vp-file-or{font-size:11px;color:var(--muted-2);text-align:center}
.vp-gdrive-input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:12px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-gdrive-input:focus{border-color:var(--accent);outline:none}
.vp-gdrive-input::placeholder{color:var(--muted-2)}

.vp-file-attached{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vp-file-icon{font-size:16px;line-height:1}
.vp-file-name{font-size:12px;font-weight:600;color:var(--ink);word-break:break-all;max-width:160px}
.vp-file-actions{display:flex;gap:4px;flex-wrap:wrap}
.vp-file-final .vp-file-name{color:var(--accent-ink)}

.vp-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:transform .15s,box-shadow .15s}
.vp-thumb:hover{transform:scale(1.08);box-shadow:var(--shadow-md)}
.vp-thumb-video{position:relative}

.vp-actions-cell{display:flex;align-items:center;gap:4px;white-space:nowrap}
.vp-drag-handle{cursor:grab;font-size:16px;color:var(--muted-2);user-select:none;padding:2px 4px}
.vp-drag-handle:hover{color:var(--ink)}

.vp-dragging{opacity:.4}
.vp-drag-over{outline:2px dashed var(--accent);outline-offset:-2px}

@media(max-width:900px){
  .vp-header{flex-direction:column}
  .vp-header-actions{width:100%}
  .vp-search{width:100%}
}
@media(max-width:640px){
  .vp-header-actions{flex-direction:column;align-items:stretch}
  .vp-header-actions .btn{width:100%}
}

/* ── AI Report ── */
.pill-keep{background:var(--accent-soft);color:var(--accent-ink)}
.pill-optimize{background:var(--warn-soft);color:var(--warn)}
.air-page{display:flex;flex-direction:column;gap:16px}
.air-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.air-section-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:8px}
.air-summary-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px}
.air-summary-card h3{font-size:14px;margin:0 0 8px;color:var(--accent)}
.air-summary-card p{margin:0;font-size:13px;line-height:1.65;color:var(--ink)}
.air-followup-card{border-radius:10px;padding:14px 18px;margin:0}
.air-followup-card h3{font-size:13px;margin:0 0 6px}
.air-followup-card p{margin:0 0 8px;font-size:13px}
.air-followup-warn{background:var(--danger-soft);border:1px solid var(--danger)}
.air-followup-warn h3{color:var(--danger)}
.air-followup-ok{background:var(--accent-soft);border:1px solid var(--accent)}
.air-followup-ok h3{color:var(--accent-ink)}
.air-waste{font-size:13px;color:var(--danger)}
.air-realloc-card{background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:14px 18px}
.air-realloc-card p{margin:0 0 10px;font-size:13px}
.air-table-wrap{overflow-x:auto}
.air-table{width:100%;border-collapse:collapse;font-size:12px}
.air-table th{text-align:left;padding:8px 10px;background:var(--surface);border-bottom:2px solid var(--border);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);white-space:nowrap}
.air-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.air-table tbody tr:hover{background:var(--hover)}
.air-name{font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.air-reason{max-width:300px;font-size:11px;line-height:1.5}
.air-reason ul{margin:4px 0 0;padding-left:16px}
.air-reason li{margin:2px 0}
.air-danger{color:var(--danger);font-weight:600}
.air-accent{color:var(--accent);font-weight:600}
.air-severity{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.3px}
.air-sev-urgent{background:var(--danger-soft);color:var(--danger)}
.air-sev-warning{background:var(--warn-soft);color:var(--warn)}
.air-sev-healthy{background:var(--accent-soft);color:var(--accent-ink)}
.air-type-badge{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.4px}
.air-type-camp{background:#e3f0ff;color:#1a6dd4}
.air-type-adset{background:#f0e8ff;color:#7c3aed}
.air-type-ad{background:#fff3e0;color:#e65100}
.air-hint{font-size:11px;color:var(--muted);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Kartu ringkasan Report Akuisisi.
   Baris 1 = 4 angka pokok (kartu besar), baris 2 = 6 rasio (kartu kecil).
   Warna dipakai untuk arti, bukan hiasan: hijau = pemasukan/ROAS sehat,
   merah = merugikan (ROAS < 1, diskon), amber = closing rate. */
.ram-cards-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:12px}
.ram-cards-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.ram-c{min-width:0}
.ram-c .card-title{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ram-ico{width:15px;height:15px;flex:none;opacity:.85}
.ram-v{font-size:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ram-v2{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ram-v-budget{color:#1d4ed8}
.ram-v-omset{color:#15803d}
.ram-v-bad{color:#dc2626}
.ram-v-cr{color:#d97706}

/* Badge panah naik/turun vs bulan lalu di tiap kartu ringkasan Report Manual.
   Panah selalu ikut arah angka sesungguhnya. Warna ikut makna baik/buruk per
   jenis metrik (lihat parameter `invert` di ramDeltaHtml, report-akuisisi-
   manual.js): metrik cost (Budget+PPN/CA/CPL/Diskon) dibalik — turun=hijau
   (makin efisien), naik=merah (makin boros); metrik revenue/volume lainnya
   naik=hijau, turun=merah, sesuai permintaan pemilik. */
.ram-delta{font-size:11px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.ram-delta-up{color:#15803d}
.ram-delta-down{color:#dc2626}
.ram-delta-flat{color:var(--muted)}
.ram-delta-label{font-weight:400;color:var(--muted)}

@media (max-width:640px){
  .ram-v{font-size:19px}
}

/* Kolom Anggaran di menu Campaign: angka di atas, satuan periode di bawahnya
   (meniru Ads Manager). Teks "Menggunakan anggaran ..." dibuat kecil supaya
   tidak melebarkan kolom. */
.budget-cell{white-space:nowrap}
.budget-editable{cursor:pointer;display:inline-block;border-radius:6px;padding:2px 6px;margin:-2px -6px;transition:background var(--transition)}
.budget-editable:hover{background:var(--accent-soft,rgba(30,143,111,.1))}
.budget-edit-ico{font-size:11px;color:var(--muted);margin-left:2px}
.budget-editable:hover .budget-edit-ico{color:var(--accent-ink,#1e8f6f)}
.budget-cell .muted{font-size:11px;white-space:normal;display:inline-block;max-width:150px;line-height:1.3}
.budget-note{font-size:10.5px;color:var(--muted);margin-top:1px}

/* dipakai badge "v3" di AI Report (air-type-badge budget-cbo) */
.budget-cbo{background:#e8f5e9;color:#2e7d32}
.status-active{color:#2e7d32;font-weight:600;font-size:11px}
.status-paused{color:#b71c1c;font-weight:600;font-size:11px}
.air-hidden{display:none!important}
.air-hier-table{width:100%;border-collapse:collapse;table-layout:fixed}
.air-hier-table th{text-align:left;padding:8px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);color:var(--muted);white-space:nowrap}
.air-hier-table td{padding:8px 10px;font-size:12px;border-bottom:1px solid var(--border);vertical-align:top}
.air-hier-table col.col-name{width:22%}
.air-hier-table col.col-level{width:6%}
.air-hier-table col.col-verdict{width:10%}
.air-hier-table col.col-num{width:8%}
.air-hier-table col.col-trend{width:7%}
.air-hier-table col.col-reason{width:25%}
.air-camp-row{cursor:pointer;background:var(--surface);border-left:3px solid var(--accent)}
.air-camp-row:hover{background:var(--border)}
.air-camp-row td{font-weight:600;font-size:12px}
.air-camp-row .air-toggle{font-size:10px;color:var(--muted);margin-left:4px;transition:transform .2s}
.air-camp-row.open .air-toggle{transform:rotate(90deg)}
.air-adset-row{background:rgba(0,0,0,.015);border-left:3px solid #7c3aed}
.air-adset-row td{font-size:11.5px}
.air-adset-row td:first-child{padding-left:28px}
.air-ad-row{background:rgba(0,0,0,.03);border-left:3px solid #e65100}
.air-ad-row td{font-size:11px;color:var(--muted)}
.air-ad-row td:first-child{padding-left:44px}
.air-reason-cell{max-width:240px;font-size:11px;line-height:1.4}
.air-reason-cell strong{display:block;margin-bottom:2px}
.air-reason-cell ul{margin:2px 0 0;padding-left:16px;font-size:10.5px}
.air-reason-cell li{margin-bottom:1px}
.air-urgency-banner{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:13px;font-weight:600}
.air-urgency-URGENT{background:#ffebee;color:#c62828;border-left:4px solid #c62828}
.air-urgency-WATCH{background:#fff8e1;color:#f57f17;border-left:4px solid #f57f17}
.air-urgency-HEALTHY{background:#e8f5e9;color:#2e7d32;border-left:4px solid #2e7d32}
@media(max-width:900px){
  .air-name{max-width:120px}
  .air-reason{max-width:180px}
}

/* ── AI Chat ── */
.chat-container{display:flex;flex-direction:column;height:calc(100vh - 120px);max-width:800px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.chat-bubble{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.chat-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.chat-assistant{align-self:flex-start;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-typing{opacity:.6;font-style:italic}
.chat-context-badge{align-self:flex-start;font-size:10px;color:var(--muted);padding:2px 8px;background:var(--surface);border-radius:8px;margin-top:-4px}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;border-top:1px solid var(--border);background:var(--surface)}
.chat-chip{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:6px 12px;font-size:11px;cursor:pointer;color:var(--ink);transition:all .15s}
.chat-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.chat-input-bar{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface)}
.chat-input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink);outline:none}
.chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,197,94,.15)}
.chat-send-btn{padding:10px 20px;border-radius:8px;font-weight:600;white-space:nowrap}
@media(max-width:600px){
  .chat-container{height:calc(100vh - 80px);border-radius:0;border:none}
  .chat-bubble{max-width:92%}
}

/* ── Image Gallery ── */
.img-gallery-page{max-width:1200px}
.img-gallery-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.img-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.img-gallery-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .15s}
.img-gallery-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.img-gallery-thumb{width:100%;height:160px;background-size:cover;background-position:center;cursor:pointer;background-color:var(--border)}
.img-gallery-info{padding:8px 12px 4px}
.img-gallery-name{display:block;font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-gallery-date{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.img-gallery-actions{display:flex;gap:6px;padding:6px 12px 10px;flex-wrap:wrap}
.img-gallery-actions .btn{font-size:10px;padding:3px 8px}