/* ===== Video Auto-Processor — Web UI (Neo-Brutalism) ===== */

/* Font bervariasi per area:
   - --font-ui   : teks umum (Urbanist)
   - --font-head : judul/menu sidebar (Syne, lebih tegas)
   - --font-mono : log & angka teknis (JetBrains Mono)
*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700;800&family=Syne:wght@600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #e9e7e0;
  --dot: #c9c6bc;
  --card: #ffffff;
  --card-dark: #141414;
  --ink: #0d0d0d;
  --accent: #b6ff00;
  --accent-dk: #9fe000;
  --danger: #d21f1f;
  --muted: #7a776e;
  --ok: #1a7f37;
  --shadow: 5px;

  --font-ui: 'Urbanist', -apple-system, 'Helvetica Neue', sans-serif;
  --font-head: 'Syne', 'Urbanist', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: var(--bg);
  /* dot-grid */
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  height: 100vh;
  overflow: hidden;
}

/* ===== App shell ===== */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; overflow: hidden; }

/* Kartu Neo-Brutalism: border tebal + solid shadow kanan-bawah */
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}
.card.dark { background: var(--card-dark); border-color: var(--accent); color: #fff; }

/* ===== Sidebar ===== */
.sidebar { padding: 16px 13px 21px 16px; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 10; }
.sidebar .sidebar-card { 
  flex: 1; display: flex; flex-direction: column; overflow: hidden; 
  /* Shadow standar Neo-Brutalism sama dengan card lain */
}
.brand { background: var(--card-dark); padding: 16px; flex-shrink: 0; }
.brand h1 {
  font-family: var(--font-head);
  font-weight: 800; font-size: 20px; letter-spacing: .5px; color: var(--accent);
}
.brand .ver { font-family: var(--font-mono); font-size: 11px; color: #fff; margin-top: 4px; }
.menu { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; min-height: 0; }
.menu button {
  font-family: var(--font-head);
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  text-align: left; padding: 13px 12px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.menu button .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.menu button.active { background: var(--accent); }

/* Sidebar Footer - fixed di bawah */
.sidebar-footer {
  flex-shrink: 0; padding: 12px;
  border-top: 2px solid var(--ink); background: var(--card);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-footer button {
  font-family: var(--font-head);
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  text-align: left; padding: 13px 12px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-footer button .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.sidebar-footer button.active { background: var(--accent); }

.lang-box { position: relative; display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--card);
  padding: 13px 12px; }
.lang-box .lang-globe { width: 18px; height: 18px; flex: 0 0 auto; pointer-events: none; }
.lang-box .lang-chevron { width: 16px; height: 16px; flex: 0 0 auto; margin-left: auto; pointer-events: none; }
.lang-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.lang-select-label { flex: 1; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .3px; color: var(--ink); pointer-events: none; }
.menu button:hover:not(.active) { background: #f3f3ee; }

/* ===== Content ===== */
.content { padding: 16px 21px 21px 8px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.pages { position: relative; overflow: hidden; min-height: 0; flex: 1; }
.page { position: absolute; inset: 0; display: none; overflow: hidden; }
.page.active { display: flex; flex-direction: column; }
/* halaman satu-kolom (AI/Settings): header tetap, isi scroll di dalam */
.page.scroll-col { overflow: hidden; padding: 2px 10px 8px 2px; }
.page.scroll-col > .scroll-area { flex: 1; overflow: auto; scrollbar-gutter: stable; padding: 2px 10px 10px 2px; margin: 0 -8px 0 -2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ===== Buttons ===== */
.btn {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  padding: 9px 14px; cursor: pointer; background: var(--card);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn.accent { background: var(--accent); }
.btn.big { font-size: 15px; padding: 13px 16px; width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

/* ===== Sections / headings ===== */
.section-title { font-family: var(--font-head); font-weight: 800; font-size: 16px; margin: 10px 0 6px; }
.sub { font-weight: 800; font-size: 13px; margin: 12px 0 4px; }
.hint { color: var(--muted); font-size: 12px; margin: 2px 0 6px; line-height: 1.4; }
.warn { color: var(--danger); font-size: 12px; margin: 2px 0 6px; line-height: 1.4; }
label.field { display: block; font-size: 12px; font-weight: 600; margin: 6px 0 2px; }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=time], input[type=email], input[type=url], select, textarea {
  width: 100%; font-family: var(--font-ui); font-size: 13px; padding: 8px 10px;
  border: 2px solid var(--ink); background: #fff; height: 40px; box-sizing: border-box;
  vertical-align: middle; box-shadow: 3px 3px 0 var(--ink);
}
/* Textarea: tinggi mengikuti isi (bukan 40px), tetap ber-shadow. */
textarea { height: auto; min-height: 40px; }
/* Konteks kompak: JANGAN paksa 40px/shadow (tabel, properti canvas, checklist akun repliz,
   editor jadwal per-video) agar tidak terlalu tebal & tetap muat. */
table input, table select, table textarea,
.canvas-props input, .canvas-props select,
.acc-checklist input, .settings-body input, .settings-body select, .settings-body textarea,
.cap-in {
  height: 36px; box-shadow: none; padding: 6px 8px;
}
.canvas-props textarea, .settings-body textarea, table textarea, .cap-in { height: auto; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.row { display: flex; gap: 8px; align-items: center; }
/* Baris checkbox (label yang memuat checkbox): rapat & menyatu dengan UI lain.
   Gap kecil (bukan  ), teks 12px seragam dgn label .field, dan checkbox
   di-align ke baris pertama agar rapi saat label multi-baris (teks panjang). */
label.row:has(> input[type=checkbox]) {
  gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.35;
  font-weight: 600; cursor: pointer;
}
label.row:has(> input[type=checkbox]) > input[type=checkbox] { margin-top: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ===== Video workflow layout (3 kolom: daftar | pengaturan | preview) ===== */
#page-video.active { display: block; overflow: hidden; }
.video-layout { 
  display: grid; grid-template-columns: minmax(0, 1fr) 340px 300px; gap: 16px; 
  height: 100%; min-height: 0; 
  padding: 0 8px 8px 0; /* ruang untuk shadow kanan dan bawah */
}
.col { 
  display: flex; flex-direction: column; gap: 12px; 
  min-height: 0; min-width: 0; max-height: 100%; 
  overflow: visible; /* agar shadow child terlihat */
}
.toolbar { display: flex; gap: 12px; align-items: center; }
.folder-label { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action-card { padding: 12px; }
.preview-tall { height: auto; flex: 1; aspect-ratio: 9/16; max-height: 100%; }

/* panel pengaturan: header FIX (sticky), body scroll di dalam */
.settings-panel { 
  flex: 1; display: flex; flex-direction: column; 
  min-height: 0; overflow: visible; 
}
.settings-head { padding: 10px 12px; border-bottom: 2px solid var(--ink); background: var(--card); }
.tabs { display: flex; gap: 6px; margin-top: 8px; }
.tab { flex: 1; font-family: var(--font-head); font-weight: 700; font-size: 12px; padding: 7px; cursor: pointer; background: var(--card); border: 2px solid var(--ink); }
.tab.active { background: var(--accent); }
.settings-body { flex: 1; overflow: auto; padding: 12px; }
.tabpane { display: none; }
.tabpane.active { display: block; }

/* table daftar video */
.vtable { flex: 1; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: auto; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e0d8; white-space: nowrap; }
/* Kolom teks panjang (Nama File kol-2, Judul kol-5, Template kol-4): lebar mengikuti
   isi, tapi maksimal 500px lalu ellipsis. Kolom lain tetap sesuai isinya. */
#vlist td:nth-child(2), #vlist td:nth-child(4), #vlist td:nth-child(5) {
  max-width: 500px; overflow: hidden; text-overflow: ellipsis; }
.vtable td { cursor: pointer; }
/* Drag-resize kolom: handle di tepi kanan header (semua tabel) */
table th { position: relative; }
table th .col-resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 2; user-select: none; }
table th .col-resize:hover { background: rgba(182,255,0,.5); }
table.resizing { cursor: col-resize; user-select: none; }
table th.col-fixed, table td.col-fixed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Toolbar jadwal: 2 baris */
.sched-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 2px; padding-right: 4px; }
/* Semua kontrol di toolbar jadwal tinggi seragam 36px + shadow tak terpotong */
.sched-toolbar .btn,
.sched-toolbar .icon-btn,
.sched-toolbar input[type=date],
.sched-toolbar input[type=text],
.sched-toolbar select {
  height: 36px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); margin: 0;
}
.sched-toolbar .icon-btn { width: 36px; }
.sched-toolbar .rz-validate-slot { 
  display: flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; white-space: nowrap;
  height: 36px; box-sizing: border-box; padding: 0 10px;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-weight: 600; user-select: none; transition: transform .1s, box-shadow .1s;
}
.sched-toolbar .rz-validate-slot:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.sched-toolbar .rz-validate-slot:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.sched-toolbar .rz-validate-slot input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); }

/* Preview Auto Fill table */
.rz-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rz-preview-table th, .rz-preview-table td { padding: 8px 10px; border: 1px solid var(--ink); text-align: left; }
.rz-preview-table th { background: #f5f5f5; font-weight: 600; }
.rz-preview-table tr:nth-child(even) { background: #fafafa; }
.rz-preview-table .status-ok { color: #4CAF50; }
.rz-preview-table .status-skip { color: #f44336; }
th { font-family: var(--font-head); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--card); }
tbody tr { cursor: pointer; }
tbody tr.sel { background: var(--accent); }
td.unsupported { font-style: italic; color: var(--muted); }

/* progress strip */
.progress-strip { padding: 10px 12px; }
.progress-strip .st { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.bar { height: 20px; border: 2px solid var(--ink); background: var(--bg); position: relative; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
/* Progress bar standar (dipakai di semua fitur): border tebal + shadow + teks di tengah. */
.prog-wrap { position: relative; height: 28px; border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); background: #fff; overflow: hidden; box-sizing: border-box; }
.prog-wrap > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .2s; }
.prog-wrap .prog-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); z-index: 1; }

/* preview: kotak hitam penuh mengisi kartu; video di-contain di dalamnya */
.preview-card { 
  padding: 12px; display: flex; flex-direction: column; gap: 10px; 
  overflow: visible; flex: 1 1 auto; min-height: 0; max-height: 100%; 
}
.preview-frame { flex: 1 1 0; width: 100%; display: grid; place-items: center; overflow: hidden; min-height: 150px;
  background: #000; border: 2px solid var(--ink); }
.preview-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.preview-frame .ph { color: var(--muted); font-size: 12px; text-align: center; }
.preview-size { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }

/* Info Video Panel */
.pv-info-card { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pv-info-row { display: flex; gap: 6px; font-size: 11px; }
.pv-info-label { color: var(--muted); font-weight: 600; }
.pv-info-value { font-family: var(--font-mono); color: var(--ink); }

.pv-actions { display: flex; gap: 6px; }
.pv-actions .btn { flex: 1; justify-content: center; padding: 8px; font-size: 11px; }
.pv-actions .btn .ic { width: 14px; height: 14px; }

/* options panel scroll */
.opt-card { padding: 12px; overflow: auto; }

/* ===== Log Floating Button & Modal ===== */
.log-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--ink); color: var(--accent);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.log-fab:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 rgba(0,0,0,0.4); }
.log-fab .ic { width: 22px; height: 22px; }
.log-fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ff5c5c; color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
}

.log-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center;
  padding: 20px;
}
.log-dialog {
  width: 100%; max-width: 900px; height: 70vh;
  background: var(--ink); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  animation: logFadeIn 0.2s ease-out;
}
@keyframes logFadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.log-head .btn.icon-btn { background: transparent; border: none; box-shadow: none; }
.log-head .btn.icon-btn .ic { color: var(--accent); }
.log-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--ink); min-height: 150px;
}
.log-body div {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  color: var(--accent);
}
.log-body .l-error { color: #ff5c5c; }
.log-body .l-warn { color: #d1a000; }
.log-body .l-ok { color: #7fff7f; }
.log-body .log-detail-link { color: #7ec8e3; text-decoration: underline; cursor: pointer; font-size: 10px; margin-left: 4px; }
.log-body .log-detail-link:hover { color: #fff; }
.log-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 2px solid var(--accent);
}
.log-foot .btn { background: var(--accent); color: var(--ink); }

/* ===== AI clipping candidates ===== */
.cand { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 10px; margin: 0 0 16px 0; background: #fff; }
#ai-results { padding: 2px 8px 6px 2px; }
/* Kartu KANDIDAT HIGHLIGHT: jangan jadi pemotong overflow (biar shadow-nya tampil).
   Overflow scroll dipindah ke #ai-results di dalamnya. */
#page-ai > .card.scroll-area { overflow: visible; display: flex; flex-direction: column; min-height: 0; }
#page-ai > .card.scroll-area > #ai-results { flex: 1; overflow: auto; scrollbar-gutter: stable; min-height: 0; }
.cand .top { display: flex; align-items: center; gap: 8px; }
.badge { background: var(--accent); border: 2px solid var(--ink); font-weight: 800; padding: 1px 8px; font-family: var(--font-mono); }
.cand .time { font-family: var(--font-mono); font-size: 12px; }
.cand .ttl { font-weight: 800; margin-top: 6px; }
.cand .hook { font-size: 13px; margin-top: 2px; }
.cand .why { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ===== color swatch ===== */
.swatch { width: 34px; height: 30px; border: 2px solid var(--ink); display: inline-block; }
input[type=color] { width: 100%; height: 36px; border: 2px solid var(--ink); padding: 2px; background: #fff; cursor: pointer; vertical-align: middle; }

/* ===== inline icon ===== */
.ic { display: inline-flex; width: 18px; height: 18px; vertical-align: middle; }
.ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Canvas editor ===== */
#page-canvas.active { display: flex; flex-direction: column; }

/* ===== CANVAS EDITOR (NEW LAYOUT) ===== */
.canvas-editor-page.active { display: flex; flex-direction: column; padding-right: 6px; }
.canvas-editor-page .card.dark { box-shadow: 4px 4px 0 var(--ink); }
.cv-container {
  display: grid; grid-template-columns: 200px 1fr 260px; gap: 16px;
  flex: 1; min-height: 0; overflow: visible;
  padding-bottom: 6px;
}

/* Panel Kiri: Templates + Layers */
.cv-left-panel {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
}
.cv-list-card, .cv-layers-card {
  display: flex; flex-direction: column;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff;
}
.cv-list-card { flex: 0 0 auto; max-height: 45%; }
.cv-layers-card { flex: 1; min-height: 0; }
.cv-list-card .cv-head, .cv-layers-card .cv-head {
  display: flex; align-items: center; gap: 6px; padding: 10px;
  border-bottom: 2px solid var(--ink);
}
.cv-head .section-title { margin: 0; font-size: 11px; font-weight: 800; flex: 1; }
.cv-head .btn.icon-btn { width: 24px; height: 24px; padding: 2px; }
.cv-head .btn.icon-btn .ic { width: 14px; height: 14px; }
.cv-template-list, .cv-layers {
  flex: 1; overflow-y: auto; padding: 8px; min-height: 0;
}
.cv-template-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 2px solid var(--ink); margin-bottom: 4px; cursor: pointer;
  font-size: 11px; font-weight: 600;
}
.cv-template-item:hover { background: #f0f0f0; }
.cv-template-item.active { background: var(--accent); }

/* Panel Tengah: Canvas */
.cv-canvas-panel {
  display: flex; flex-direction: column; min-height: 0;
}
.cv-canvas-toolbar {
  display: flex; flex-direction: column; padding: 8px 10px; gap: 6px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 12px;
}
.cv-canvas-toolbar .row {
  display: flex; align-items: center;
}
.cv-canvas-toolbar .toolbar-sep {
  width: 1px; height: 20px; background: var(--ink); opacity: 0.2; margin: 0 4px;
}
.cv-canvas-toolbar .btn.icon-btn.active {
  background: var(--accent); color: var(--ink);
}
.cv-canvas-wrapper {
  flex: 1; display: flex; background: #888;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  min-height: 0; position: relative; overflow: hidden;
}
.cv-canvas-viewport {
  flex: 1; display: flex; flex-direction: column; align-items: safe center;
  justify-content: safe center; padding: 16px; min-height: 0; min-width: 0;
  overflow: auto;
}
.cv-canvas-container {
  position: relative; flex: none;
}
#cv-canvas {
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  background: #222; cursor: crosshair;
}
/* Selection overlay - rendered outside canvas so it's not clipped */
.cv-selection-overlay {
  position: absolute;
  top: 2px; left: 2px; /* offset for canvas border */
  pointer-events: none;
  z-index: 1000;
  overflow: visible;
}
.cv-selection-box {
  position: absolute;
  border: 2px dashed var(--accent);
  box-shadow: 0 0 8px var(--accent);
  pointer-events: none;
  box-sizing: border-box;
}
.cv-selection-box .cv-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 1px solid var(--ink);
  pointer-events: auto;
}
.cv-handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.cv-handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.cv-handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.cv-handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.cv-handle.t { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.cv-handle.b { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.cv-handle.l { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.cv-handle.r { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.cv-canvas-info {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; font-size: 10px; color: #fff;
}
.cv-canvas-info-left, .cv-canvas-info-right {
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  color: #666;
  font-family: var(--font-mono);
}
.cv-canvas-info-left { left: 8px; }
.cv-canvas-info-left select {
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid #999;
  background: #fff;
}
.cv-canvas-info-right { right: 8px; }

/* Panel Kanan: Properties */
.cv-props-panel {
  display: flex; flex-direction: column; min-height: 0;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff;
}
.cv-props-head {
  display: flex; align-items: center; padding: 10px;
  border-bottom: 2px solid var(--ink);
}
.cv-props-head .section-title { margin: 0; font-size: 11px; font-weight: 800; flex: 1; }
.cv-tpl-actions { display: flex; gap: 4px; }
.cv-tpl-actions .btn.icon-btn.small { width: 24px; height: 24px; padding: 2px; }
.cv-tpl-actions .btn.icon-btn.small .ic { width: 14px; height: 14px; }
/* svg ikut ukuran kotak .ic (tanpa ini svg tetap 18px → menjorok dari kotak 14px dan ikon tampak turun). */
.icon-btn.small .ic svg { width: 14px; height: 14px; display: block; }
.cv-props-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; padding: 10px;
}
.cv-props-section { margin-bottom: 10px; }
.cv-props-section .sub { margin: 0 0 6px 0; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #666; }
.cv-props-section input, .cv-props-section select {
  width: 100%; padding: 6px 8px; font-size: 12px;
  border: 2px solid var(--ink);
}
.cv-props-section input[type="checkbox"] {
  width: auto; margin: 0;
}
.cv-props-section input[type="color"] {
  width: 100%; padding: 2px; height: 32px;
}
.cv-props-section .field { font-size: 11px; margin-bottom: 4px; display: block; }
.cv-props-section .row {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; margin-top: 8px; cursor: pointer;
}
.cv-props-section .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* Layer row (shared with old style) */
.cv-layers .layer-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 2px solid var(--ink); margin-bottom: 4px; font-size: 11px; cursor: pointer; }
.cv-layers .layer-row.sel { background: var(--accent); }
.cv-layers .layer-row .lname { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cv-layers .layer-row button { border: 1px solid var(--ink); background: #fff; font-size: 10px; cursor: pointer; padding: 1px 4px; }

/* scroll aesthetic: tipis, transparan, overlay — tak mengganggu shadow kartu */
* { scrollbar-width: thin; scrollbar-color: rgba(13,13,13,.28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; border: none; }
::-webkit-scrollbar-thumb {
  background: rgba(13,13,13,.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(13,13,13,.42); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* elemen yang scroll internal: sisakan ruang agar shadow kanan tak tertimpa */
.scrollable { overflow: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ===== Jadwal / Repliz ===== */
#page-schedule.active { display: flex; flex-direction: column; padding: 2px 8px 8px 2px; }
.schedule-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; }
.sched-form { overflow: auto; min-height: 0; scrollbar-gutter: stable; }
.sched-cal { display: flex; flex-direction: column; min-height: 0; }
.schedule-layout textarea { font-family: var(--font-ui); border: 2px solid var(--ink); padding: 8px; height: auto; }

/* Storage Warning di Progress Bar */
.prog-wrap.prog-warning { background: #fff3cd; border-color: #856404; }
.prog-wrap.prog-warning .prog-txt { color: #856404; font-weight: 600; }
.btn.btn-danger { background: #e53935 !important; border-color: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.btn.btn-danger:disabled { background: #e57373 !important; cursor: not-allowed; opacity: 0.8; }

/* ===== Kalender Gabungan (Layout Horizontal Full Height) ===== */
#page-calendar .scroll-area { display: flex; flex-direction: column; }
#page-calendar .card.cal-container { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 20px; padding: 16px; min-height: 0; }
.cal-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.cal-head-spacer { flex: 1 1 auto; }
.cal-title { font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.cal-nav { display: flex; gap: 4px; }
/* Semua kontrol di toolbar kalender tinggi seragam 32px (button + dropdown) */
.cal-head .btn,
.cal-head select {
  height: 32px; min-height: 32px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; box-shadow: 2px 2px 0 var(--ink); line-height: 1;
}
.cal-nav .btn { padding: 0 12px; justify-content: center; }
.cal-legend { display: flex; gap: 12px; margin-bottom: 10px; font-size: 11px; flex: 0 0 auto; align-items: center; flex-wrap: wrap; }
.cal-legend-item { display: flex; align-items: center; gap: 6px; }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 2px; border: 2px solid var(--ink); }
.cal-legend-dot.repliz { background: #2196F3; }
.cal-legend-dot.brightbean { background: #4CAF50; }
.cal-legend-dot.manual { background: #9e9e9e; }
.cal-legend-dot.preview { background: #9e9e9e; }
.cal-legend-divider { color: #999; font-weight: 400; margin: 0 4px; }
.cal-legend-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; font-weight: 800; border-radius: 3px; background: #eee; }
.cal-legend-icon.status-done { background: #fff; border: 3px solid #1b5e20; color: #1b5e20; }
.cal-legend-icon.status-sched { background: #fff; border: 3px solid #f9a825; color: #f9a825; }
.cal-legend-icon.status-fail { background: #fff; border: 3px solid #b71c1c; color: #b71c1c; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; flex: 0 0 auto; }
.cal-dow > div { padding: 8px 4px; background: var(--ink); color: #fff; font-weight: 700; font-size: 11px; text-align: center; text-transform: uppercase; }
.cal-body { flex: 1; grid-auto-rows: 1fr; align-content: stretch; }
.cal-cell { border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; min-height: 60px; }
.cal-cell:hover:not(.empty) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cal-cell.empty { border-style: dashed; box-shadow: none; background: #fafafa; opacity: 0.5; cursor: default; }
.cal-cell.today { background: #f4ffd1; }
.cal-cell.selected { background: var(--accent); }
.cal-cell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #eee; flex: 0 0 auto; }
.cal-day { font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.cal-count { font-size: 9px; background: var(--ink); color: #fff; padding: 1px 5px; border-radius: 8px; }
.cal-count-icons { font-size: 10px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cal-count-icons .ci { display: inline-flex; align-items: center; gap: 1px; padding: 2px 4px; border-radius: 4px; font-weight: 800; border: 1px solid; }
.cal-count-icons .ci-done { background: #c8e6c9; color: #1b5e20; border-color: #1b5e20; }
.cal-count-icons .ci-sched { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
.cal-count-icons .ci-fail { background: #ffebee; color: #b71c1c; border-color: #b71c1c; }
.cal-cell-body { flex: 1; min-height: 0; padding: 6px; overflow: hidden; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.cal-dot { width: 20px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 3px solid; box-sizing: border-box; line-height: 1; }
/* Dot background by source */
.cal-dot.repliz { background: #2196F3; color: #fff; }
.cal-dot.brightbean { background: #4CAF50; color: #fff; }
.cal-dot.manual { background: #9e9e9e; color: #fff; }
/* Dot border by status - langsung border tanpa putih */
.cal-dot.status-published, .cal-dot.status-success, .cal-dot.status-posted { border-color: #1b5e20; }
.cal-dot.status-scheduled, .cal-dot.status-pending, .cal-dot.status-draft { border-color: #f9a825; }
.cal-dot.status-failed, .cal-dot.status-error { border-color: #b71c1c; }
.cal-more { font-size: 9px; color: #666; padding: 1px 3px; }

/* Event di kalender */
.cal-evs { flex: 1; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.cal-ev { font-size: 9px; padding: 2px 4px; border-radius: 2px; background: #e3f2fd; color: #1565c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; gap: 2px; }
.cal-ev:hover { filter: brightness(0.95); }
.cal-ev-manual { background: #fff3e0; color: #e65100; border-left: 3px solid #ff9800; }
.cal-ev-scheduled { background: #e8f5e9; color: #2e7d32; }
.cal-ev-posted, .cal-ev-published { background: #c8e6c9; color: #1b5e20; }
.cal-ev-cancelled, .cal-ev-failed { background: #ffebee; color: #c62828; }
.cal-ev-pending { background: #fff8e1; color: #f57f17; }
.cal-ev-preview { background: #eeeeee; color: #616161; border-left: 3px solid #9e9e9e; font-style: italic; }
/* Source badge di kalender */
.cal-src { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 8px; font-weight: 800; border-radius: 2px; flex-shrink: 0; }
.cal-src-rz { background: #6366f1; color: #fff; }
.cal-src-bb { background: #f59e0b; color: #fff; }
/* Status icon */
.cal-status { font-size: 8px; flex-shrink: 0; }

/* Kalender Preview Modal - Sama dengan submenu Kalender */
.cal-preview-left { display: flex; flex-direction: column; min-height: 0; }
.cal-preview-box { 
  flex: 1; display: flex; flex-direction: column; 
  background: #fff; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); 
  padding: 16px; min-height: 0;
}
.cal-preview-header { 
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex: 0 0 auto;
}
.cal-preview-title { 
  font-family: var(--font-head); font-size: 18px; font-weight: 800; 
}
.cal-preview-dow { 
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; flex: 0 0 auto;
}
.cal-preview-dow span { 
  padding: 8px 4px; background: var(--ink); color: #fff; 
  font-weight: 700; font-size: 11px; text-align: center; text-transform: uppercase;
}
.cal-preview-days { 
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; 
  flex: 1; grid-auto-rows: 1fr;
}
.cal-preview-day { 
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  cursor: pointer; 
  transition: transform 0.1s, box-shadow 0.1s;
  min-height: 80px;
}
.cal-preview-day:hover:not(.empty) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cal-preview-day.empty { border-style: dashed; box-shadow: none; background: #fafafa; opacity: 0.5; cursor: default; }
.cal-preview-day.today { background: #f4ffd1; }
.cal-preview-day.selected { background: var(--accent); }
.cal-preview-day-num { font-weight: 800; font-size: 12px; padding: 4px 6px; }
.cal-preview-day-evs { flex: 1; padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; overflow: hidden; }
.cal-preview-more { font-size: 11px; font-weight: 800; color: #666; align-self: center; padding: 0 2px; }
.cal-preview-day-dot { width: 20px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 3px solid; color: #fff; box-sizing: border-box; line-height: 1; }
/* Source colors */
.cal-preview-day-dot.repliz { background: #2196F3; }
.cal-preview-day-dot.brightbean { background: #4CAF50; }
.cal-preview-day-dot.manual { background: #9e9e9e; }
.cal-preview-day-dot.preview { background: #9c27b0; border-color: #6a1b9a; } /* Ungu untuk preview */
/* Status border - langsung tanpa putih */
.cal-preview-day-dot.status-published, .cal-preview-day-dot.status-success { border-color: #1b5e20; }
.cal-preview-day-dot.status-scheduled, .cal-preview-day-dot.status-pending { border-color: #f9a825; }
.cal-preview-day-dot.status-failed { border-color: #b71c1c; }
.cal-preview-legend { 
  display: flex; flex-wrap: wrap; gap: 16px; 
  margin-top: 12px; font-size: 11px; flex: 0 0 auto;
}
.cal-preview-legend-item { display: flex; align-items: center; gap: 6px; }
.cal-preview-dot { 
  width: 12px; height: 12px; border-radius: 2px;
  border: 2px solid var(--ink); 
}
.cal-preview-dot.repliz { background: #2196F3; }
.cal-preview-dot.brightbean { background: #4CAF50; }
.cal-preview-dot.manual { background: #9e9e9e; }
.cal-preview-dot.preview { background: #9c27b0; }
.cal-preview-status { margin-top: 10px; font-size: 12px; color: #666; flex: 0 0 auto; }

/* Sidebar Detail - Sama dengan kalender utama */
.cal-preview-sidebar { 
  display: flex; flex-direction: column; 
  border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink);
  min-height: 0; 
}
.cal-preview-sidebar-head { 
  padding: 12px; border-bottom: 2px solid var(--ink); background: var(--ink); color: #fff; flex: 0 0 auto;
}
.cal-preview-sidebar-title { font-family: var(--font-head); font-weight: 800; font-size: 14px; }
.cal-preview-sidebar-date { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.cal-preview-sidebar-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.cal-preview-empty { color: #999; font-size: 12px; text-align: center; padding: 20px; }

/* Detail items - Sama dengan .cal-detail-* kalender utama */
.cal-preview-list { display: flex; flex-direction: column; gap: 8px; }
.cal-preview-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 2px solid var(--ink); background: #fafafa; }
.cal-preview-item.preview { background: #f5f5f5; border-style: dashed; }
.cal-preview-item-time { font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex: 0 0 44px; color: var(--ink); }
.cal-preview-item-info { flex: 1; min-width: 0; }
.cal-preview-item-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; margin-bottom: 4px; line-height: 1.3; }
.cal-preview-item-title span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-preview-item-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-preview-badge { padding: 2px 5px; font-weight: 700; text-transform: uppercase; font-size: 8px; border-radius: 2px; }
.cal-preview-badge.repliz { background: #2196F3; color: #fff; }
.cal-preview-badge.brightbean { background: #4CAF50; color: #fff; }
.cal-preview-badge.manual { background: #FF9800; color: #fff; }
.cal-preview-badge.preview { background: #9e9e9e; color: #fff; }
.cal-preview-badge.status-scheduled { background: #FF9800; color: #fff; }
.cal-preview-badge.status-published { background: #4CAF50; color: #fff; }
.cal-preview-badge.status-failed { background: #f44336; color: #fff; }
.cal-preview-badge.status-pending { background: #2196F3; color: #fff; }
.cal-preview-badge.status-draft { background: #9e9e9e; color: #fff; }
.cal-preview-platform { background: #eee; padding: 2px 5px; border-radius: 2px; font-size: 9px; }

.cal-status { margin-top: 10px; font-size: 12px; color: #666; flex: 0 0 auto; }

/* Kalender - Panel Detail (kanan) */
.cal-sidebar { border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; min-height: 0; }
.cal-sidebar-head { padding: 12px; border-bottom: 2px solid var(--ink); background: var(--ink); color: #fff; flex: 0 0 auto; }
.cal-sidebar-title { font-family: var(--font-head); font-weight: 800; font-size: 14px; }
.cal-sidebar-date { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.cal-sidebar-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.cal-sidebar-empty { color: #999; font-size: 12px; text-align: center; padding: 20px; }
.cal-detail-list { display: flex; flex-direction: column; gap: 8px; }
.cal-detail-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 2px solid var(--ink); background: #fafafa; }
.cal-detail-item[data-manual-id] { cursor: pointer; transition: background 0.15s, transform 0.1s; }
.cal-detail-item[data-manual-id]:hover { background: #fff3e0; transform: translateX(2px); }
.cal-detail-item[data-brightbean-id] { cursor: pointer; transition: background 0.15s, transform 0.1s; }
.cal-detail-item[data-brightbean-id]:hover { background: #e8f5e9; transform: translateX(2px); }
.cal-detail-time { font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex: 0 0 44px; color: var(--ink); }
.cal-detail-info { flex: 1; min-width: 0; }
.cal-detail-info-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; margin-bottom: 4px; line-height: 1.3; overflow: hidden; }
.cal-detail-info-title span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-detail-meta { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.cal-detail-badge { padding: 2px 5px; font-weight: 700; text-transform: uppercase; font-size: 8px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.cal-detail-badge.repliz { background: #2196F3; color: #fff; }
.cal-detail-badge.brightbean { background: #4CAF50; color: #fff; }
.cal-detail-badge.manual { background: #9e9e9e; color: #fff; }
.cal-detail-badge.part { background: #9c27b0; color: #fff; }
/* Status badges - Terjadwal kuning untuk semua */
.cal-detail-badge.status-scheduled, .cal-detail-badge.status-pending { background: #f9a825; color: #fff; }
.cal-detail-badge.status-published, .cal-detail-badge.status-success, .cal-detail-badge.status-posted { background: #1b5e20; color: #fff; }
.cal-detail-badge.status-failed, .cal-detail-badge.status-error { background: #b71c1c; color: #fff; }
.cal-detail-badge.status-draft { background: #9e9e9e; color: #fff; }
/* Modal detail row */
.cal-modal-row { display: flex; align-items: center; gap: 12px; }
.cal-modal-row .cal-modal-label { width: 80px; flex-shrink: 0; font-weight: 600; font-size: 12px; color: #666; }
.cal-detail-platform { background: #eee; padding: 2px 5px; border-radius: 2px; font-size: 9px; white-space: nowrap; flex-shrink: 0; }

/* Modal Detail Jadwal (calShowEventDetail) — overlay + kotak solid */
.cal-detail-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.cal-detail-modal .modal-content { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); width: 90%; max-width: 450px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.cal-detail-modal .modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--ink); color: #fff; }
.cal-detail-modal .modal-head .modal-title { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--accent); }
.cal-detail-modal .modal-head .modal-close { margin-left: auto; background: transparent; border-color: #fff; color: #fff; box-shadow: none; }
.cal-detail-modal .modal-body { flex: 1; overflow-y: auto; background: #fff; color: var(--ink); }
.cal-detail-modal .modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 2px solid var(--ink); background: #fafafa; }
/* Baris detail: label kiri + value kanan, font rapi & seragam */
.cal-detail-modal .cal-modal-row { gap: 10px; }
.cal-detail-modal .cal-modal-row > span:not(.cal-modal-label):not(.cal-detail-badge) {
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.cal-detail-modal .cal-modal-label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #999; }

/* Hapus Media Hari Ini — list + hold-to-delete */
.cal-delmedia-modal .modal-body { max-height: 70vh; }
.delmedia-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid var(--ink); background: #fafafa; box-shadow: 2px 2px 0 var(--ink); margin-bottom: 10px; transition: opacity .3s ease, background .3s ease; }
.delmedia-item.fading { opacity: 0; }
.delmedia-thumb { width: 54px; height: 54px; flex: 0 0 auto; border: 2px solid var(--ink); background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.delmedia-thumb img { width: 100%; height: 100%; object-fit: cover; }
.delmedia-thumb .ic svg { width: 22px; height: 22px; stroke: #fff; }
.delmedia-info { flex: 1; min-width: 0; }
.delmedia-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delmedia-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.delmedia-kind { font-size: 10px; font-weight: 700; color: #fff; border-radius: 3px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; }
.delmedia-kind-media { background: #5c6bc0; }
.delmedia-kind-thumb { background: #26a69a; }
.delmedia-link { font-size: 11px; color: #2196F3; text-decoration: underline; }
/* Media yang sudah dihapus dari storage */
.delmedia-item.gone { opacity: 0.6; background: #f0f0f0; }
.delmedia-thumb.broken, .delmedia-item.gone .delmedia-thumb { background: #ddd; }
.delmedia-gone-badge { font-size: 10px; font-weight: 700; color: #1b5e20; background: #e8f5e9; border: 1px solid #1b5e20; border-radius: 3px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; }
.delmedia-gone-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid #1b5e20; background: #e8f5e9; }
.delmedia-gone-icon .ic svg { width: 18px; height: 18px; stroke: #1b5e20; }
/* Tombol hapus per item — klik langsung (ikon trash) */
.delmedia-del { flex: 0 0 auto; border: 2px solid #b71c1c; background: #fff; color: #b71c1c; cursor: pointer; box-shadow: 2px 2px 0 #b71c1c; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
.delmedia-del:hover { background: #b71c1c; }
.delmedia-del:hover .ic svg { stroke: #fff; }
.delmedia-del .ic svg { width: 18px; height: 18px; stroke: #b71c1c; }
.delmedia-del:disabled { opacity: .5; cursor: default; }
/* Tombol BULK "Hapus Semua" — hold-to-delete dengan fill */
.delmedia-bulk { position: relative; overflow: hidden; border: 2px solid #b71c1c; background: #fff; color: #b71c1c; font-weight: 700; font-size: 13px; padding: 9px 14px; cursor: pointer; box-shadow: 3px 3px 0 #b71c1c; user-select: none; }
.delmedia-bulk:disabled { opacity: .8; cursor: default; }
.delmedia-bulk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #b71c1c; z-index: 0; }
.delmedia-bulk.holding { color: #fff; }
.delmedia-bulk-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.delmedia-bulk.holding .delmedia-bulk-label .ic svg { stroke: #fff; }

/* Dropdown filter kalender (Sumber & Status) di toolbar kalender */
.cal-legend #cal-legend-btn { padding: 0 12px; font-size: 12px; gap: 4px; }
.cal-legend #cal-legend-btn .ic svg { width: 14px; height: 14px; }
.cal-head #cal-legend-btn { padding: 0 12px; font-size: 12px; gap: 4px; }
.cal-head #cal-legend-btn .ic svg { width: 14px; height: 14px; }
.cal-filter { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.cal-filter select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: auto; flex: 0 0 auto; padding: 0 26px 0 10px; font-size: 12px; font-weight: 600;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 14px; cursor: pointer;
  border: 2px solid var(--ink); color: var(--ink);
}

/* Indikator status media di header sel kalender — simbol dot (bukan emoji) */
.cal-head-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cal-media-icons { display: inline-flex; gap: 3px; }
.cal-media-icons .mi { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 4px; border: 1px solid; line-height: 1.3; }
.cal-media-icons .mi-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-media-icons .mi-safe { background: #fff3e0; color: #e65100; border-color: #e65100; }
.cal-media-icons .mi-safe .mi-dot { background: #e65100; }
.cal-media-icons .mi-unsafe { background: #f5f5f5; color: #616161; border-color: #9e9e9e; }
.cal-media-icons .mi-unsafe .mi-dot { background: #9e9e9e; }
.cal-media-icons .mi-deleted { background: #e8f5e9; color: #1b5e20; border-color: #1b5e20; }
.cal-media-icons .mi-deleted .mi-dot { background: #2e7d32; }
/* Legend untuk indikator media (dot warna) */
.cal-legend-media-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--ink); }
.cal-legend-media-dot.mi-safe { background: #e65100; }
.cal-legend-media-dot.mi-unsafe { background: #9e9e9e; }
.cal-legend-media-dot.mi-deleted { background: #2e7d32; }

/* Modal Legend Kalender */
.cal-legend-modal .legend-section { margin-bottom: 16px; }
.cal-legend-modal .legend-section:last-child { margin-bottom: 0; }
.cal-legend-modal .legend-section-title { font-family: var(--font-ui); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.cal-legend-modal .legend-grid { display: flex; flex-direction: column; gap: 8px; }
.cal-legend-modal .legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cal-legend-modal .legend-hint { color: #999; font-weight: 400; font-size: 12px; }

@media (max-width: 900px) {
  #page-calendar .card.cal-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cal-sidebar { min-height: 200px; max-height: 300px; }
}

@media (max-width: 900px) {
  .schedule-layout { grid-template-columns: 1fr; }
}

/* ===== Dashboard ===== */
.setup-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.step-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 2px solid var(--ink);
  background: #fff; box-shadow: 3px 3px 0 var(--ink); margin: 0 0 12px 0; }
.step-row.done { background: #f4ffd1; }
.step-badge { width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); }
.step-badge svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 3; }
.step-badge.ok { background: var(--accent); }
.step-badge.no { background: #ffb3b3; }
.step-body { flex: 1; min-width: 0; }
.step-name { font-weight: 700; font-size: 13px; }
.step-opt { color: var(--muted); font-weight: 400; font-size: 11px; }
.step-detail { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-manual { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.step-manual code { font-family: var(--font-mono); font-size: 11px; background: #eee; border: 1px solid var(--ink);
  padding: 1px 5px; word-break: break-all; }
.step-action { flex: 0 0 auto; }
.step-btn { padding: 6px 10px; }
.step-state { font-size: 12px; color: var(--muted); }
.step-state.ok { color: #2a7d18; font-weight: 700; }

.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 0 6px 6px 0; }
.info-card { padding: 12px; }
.info-title { font-family: var(--font-head); font-weight: 800; font-size: 13px; margin-bottom: 8px;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 700; text-align: right; word-break: break-word; }
.kv .v.v-ok { color: #2a7d18; }
.kv .v.v-no { color: #c62828; }

/* ===== Provider AI card ===== */
.provider-head { display: flex; align-items: center; gap: 10px; }
.provider-ic { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--ink); padding: 2px;
  background: var(--accent); }
.provider-ic svg { width: 100%; height: 100%; }
.provider-card { position: relative; }

/* ===== AI clipping: kandidat editable & validasi ===== */
.cand .field { margin-top: 8px; }
.cand input[type=text] { margin-top: 2px; }
.provider-vstatus { font-size: 12px; font-weight: 700; }
#ai-dldir, #s-dldir-eff { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ===== Dashboard: layout baru ===== */
.dash-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 6px 0 2px; align-items: stretch; }
.dash-bottom { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; padding: 12px 6px 12px 2px; align-items: start; }
.dash-ai, .dash-steps-card, .dash-cal-card { padding: 12px; }
.dash-top .dash-ai { display: flex; flex-direction: column; }
/* Tinggi isi tab dashboard dipatok pas dengan konten Provider AI (key/model/status/
   sdk + tombol Cek) ≈ 150px. Tab lain (Repliz akun banyak) scroll di dalam. */
.dash-top .dash-ai .ai-tabpane { flex: 0 0 auto; height: 150px; min-height: 150px; overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dash-top .dash-ai .ai-tabpane > div { min-height: 0; }
/* Provider AI tabs (dipakai juga oleh kartu info Sistem/Transkripsi/Repliz) */
.ai-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ai-tab { font-family: var(--font-ui); font-weight: 700; font-size: 12px; padding: 6px 10px;
  border: 2px solid var(--ink); background: var(--card); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ai-tab.active { background: var(--accent); }
.ai-dot { width: 8px; height: 8px; border: 1px solid var(--ink); display: inline-block; }
.ai-dot.ok { background: #2a7d18; }
.ai-dot.no { background: #c62828; }
.ai-tabpane { border: 2px solid var(--ink); padding: 10px; background: #fff; }
#dash-ai-order { font-size: 11px; font-family: var(--font-mono); text-align: right; }
/* Progress instalasi: tombol refresh + bar tinggi SAMA (34px) */
.dash-steps-card .setup-progress { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.dash-steps-card .icon-btn { width: 34px; height: 34px; }
.dash-steps-card .prog-wrap { flex: 1; height: 34px; }

/* Dashboard Schedule Summary */
.dash-sched-summary { }
.dash-sched-total { text-align: center; margin-bottom: 16px; padding: 12px; background: var(--accent); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.dash-sched-num { font-family: var(--font-head); font-size: 36px; font-weight: 800; }
.dash-sched-label { display: block; font-size: 12px; margin-top: 2px; }
.dash-sched-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dash-sched-day { border: 2px solid var(--ink); padding: 8px; background: #fff; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
.dash-sched-day:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.dash-sched-day-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.dash-sched-day-name { font-weight: 800; font-size: 11px; }
.dash-sched-day-date { font-size: 11px; color: #666; }
.dash-sched-day-count { margin-left: auto; background: var(--ink); color: #fff; padding: 2px 6px; font-size: 10px; font-weight: 700; border-radius: 2px; }
.dash-sched-day-items { display: flex; flex-direction: column; gap: 4px; }
.dash-sched-item { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; }
.dash-sched-time { font-family: var(--font-mono); font-weight: 600; }
.dash-sched-plat { background: #eee; padding: 1px 4px; border-radius: 2px; font-size: 10px; text-transform: lowercase; border: 1px solid #ddd; }
.dash-sched-more { font-size: 10px; color: var(--ink); font-weight: 600; margin-top: 4px; padding-top: 4px; border-top: 1px dashed #ccc; cursor: pointer; }
.dash-sched-more:hover { color: #666; }
.dash-sched-footer { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink); text-align: center; }
.dash-sched-footer .btn { font-size: 11px; }

/* Dashboard Schedule Modal */
.dash-sched-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); }
.dash-sched-modal.active { display: flex; }
.dash-sched-modal-box { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); max-width: 500px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; }
.dash-sched-modal-head { padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--ink); color: #fff; display: flex; align-items: center; }
.dash-sched-modal-head .section-title { margin: 0; color: var(--accent); }
.dash-sched-modal-head .btn { margin-left: auto; background: transparent; border-color: #fff; color: #fff; }
.dash-sched-modal-head .btn:hover { background: rgba(255,255,255,0.1); }
.dash-sched-modal-body { flex: 1; overflow-y: auto; padding: 16px; }
.dash-sched-modal-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 2px solid var(--ink); background: #fafafa; box-shadow: 2px 2px 0 var(--ink); margin-bottom: 10px; }
.dash-sched-modal-item:last-child { margin-bottom: 0; }
.dash-sched-modal-time { font-family: var(--font-mono); font-weight: 700; font-size: 13px; flex: 0 0 50px; }
.dash-sched-modal-info { flex: 1; min-width: 0; }
.dash-sched-modal-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sched-modal-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-sched-modal-badge { padding: 2px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; background: #eee; border: 1px solid #ddd; }

@media (max-width: 900px) { .dash-top, .dash-bottom { grid-template-columns: 1fr; } }

/* ===== Canvas Editor toolbar (aksi di bawah judul, tombol icon-only) ===== */
.cv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cv-actions, .cv-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cv-tpl { margin-left: auto; }
.icon-btn { padding: 8px; width: 36px; height: 34px; display: inline-flex; justify-content: center; align-items: center; }
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn.small { width: 28px; height: 28px; padding: 4px; }
.icon-btn.small .ic { width: 14px; height: 14px; }
/* pemisah visual antar grup */
.cv-actions { padding-right: 10px; border-right: 2px solid rgba(255,255,255,.25); }
.cv-sep { width: 1px; height: 20px; background: rgba(255,255,255,.25); margin: 0 2px; }
.cv-actions .btn.icon-btn.active { background: var(--accent); color: var(--ink); }
/* tombol hapus di baris layer */
.layer-row .lrow-del { color: #c62828; font-weight: 800; }
.layer-row .lrow-del:hover { background: #ffb3b3; }

/* ===== Toast notification (pojok kanan atas) ===== */
#toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex;
  flex-direction: column; gap: 8px; pointer-events: none; max-width: 340px; }
.toast { pointer-events: auto; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 10px 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; display: flex;
  align-items: center; gap: 8px; animation: toast-in .18s ease-out;
  border-left-width: 8px; }
.toast.ok { border-left-color: var(--accent); }
.toast.err { border-left-color: #c62828; }
.toast.info { border-left-color: var(--ink); }
.toast .tmsg { flex: 1; min-width: 0; word-break: break-word; }
.toast.hide { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateX(20px); opacity: 0; } }

/* ===== Video list: badge sumber split + kolom checkbox ===== */
.src-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 0 4px;
  border: 1px solid var(--ink); background: var(--accent); margin-left: 2px; letter-spacing: .3px; }
/* Badge 'override' pada kolom tabel yang memakai nilai per-video (bukan global). */
.ovr-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 0 4px;
  border: 1px solid var(--ink); background: var(--accent); margin-left: 3px; letter-spacing: .3px;
  white-space: nowrap; }
.v-check-cell { text-align: center; }
#vlist .v-check, #v-checkall { cursor: pointer; }

/* ===== Crop sumber: form biasa (atas / kiri-kanan / bawah) ===== */

/* ===== Jadwal batch: kiri tabel + kanan panel edit ===== */
.sched2 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; padding: 2px 8px 8px 2px; }
.sched2-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.sched2-edit { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#rz-list td:nth-child(4) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .sched2 { grid-template-columns: 1fr; } }

/* ===== Grup Jadwal ===== */
.rz-group-row td { background: var(--card); border-top: 2px solid var(--ink); padding: 4px 8px;
  font-size: 12px; display: table-cell; } /* table-cell agar tidak distorsi lebar kolom */
.rz-group-row td > * { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.rz-group-row td { white-space: nowrap; }
.rz-group-row.rz-group-ungrouped td { border-top-style: dashed; background: transparent; }
.rz-group-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; border: 1px solid var(--ink); vertical-align: middle; }
.rz-group-count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.rz-group-act { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 13px; line-height: 1; opacity: .6; }
.rz-group-act:hover { opacity: 1; }
/* Sticky header tabel jadwal */
#rz-table thead th {
  position: sticky;
  top: 0;
  background: var(--ink);
  color: var(--card);
  z-index: 2;
  font-weight: 700;
}
/* Divider hijau di bawah header - pakai pseudo element agar ikut sticky */
#rz-table thead th::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--accent);
}
/* Kolom checkbox — lebar tetap 28px, tidak ikut melar */
#rz-table th:first-child, #rz-list td.v-check-cell { width: 28px; min-width: 28px; max-width: 28px; text-align: center; }
#rz-table thead th:first-child { text-align: center; vertical-align: middle; }
/* Grup di-select highlight */
#rz-list tr.rz-group-row.sel td { background: rgba(182,255,0,.25) !important; }
/* Kolom size — angka kecil mono */
#rz-list td.rz-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Badge storage per-provider di tabel */
#rz-list td.rz-num .acc-src { width: 14px; height: 14px; font-size: 9px; vertical-align: middle; margin-right: 2px; }
.rz-group-storage { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 2px; }
#rz-list tr[style*="border-left"] td:first-child { padding-left: 4px; }
/* Multi-select highlight */
#rz-list tr.rz-msel { background: rgba(182,255,0,.18); outline: 1px solid var(--accent); }
#rz-list tr.rz-msel td { background: rgba(182,255,0,.08); }
/* Drag visual */
#rz-list tr.rz-dragging { opacity: .45; }
#rz-list tr[draggable="true"] { cursor: grab; }
#rz-list tr[draggable="true"]:active { cursor: grabbing; }
/* Drop target highlight */
.rz-group-row.rz-drop-over td { background: rgba(182,255,0,.35) !important; outline: 2px dashed var(--ink); }
.rz-drop-hint { font-size: 10px; color: var(--muted); font-style: italic; margin-left: auto; opacity: 0; transition: opacity .15s; }
.rz-group-row.rz-drop-over .rz-drop-hint,
.card.vtable:has(tr.rz-dragging) .rz-drop-hint { opacity: 1; }
/* Context menu klik kanan */
.rz-ctx { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  min-width: 180px; padding: 4px 0; }
.rz-ctx-title { font-family: var(--font-head); font-weight: 800; font-size: 11px; padding: 4px 10px 2px; color: var(--muted); text-transform: uppercase; }
.rz-ctx-item { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
  padding: 6px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.rz-ctx-item:hover { background: var(--accent); }
.rz-ctx-item.active { font-weight: 700; }
.rz-ctx-remove { color: #c00; margin-top: 2px; border-top: 1px dashed #ddd; }
.rz-ctx-sep { border-top: 1px solid #ddd; margin: 2px 0; }

/* Context menu dan multi-select untuk Video table */
#vlist tr.v-msel { background: rgba(182,255,0,.18); outline: 1px solid var(--accent); }
#vlist tr.v-msel td { background: rgba(182,255,0,.08); }
.v-ctx { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  min-width: 180px; padding: 4px 0; }
.v-ctx-title { font-family: var(--font-head); font-weight: 800; font-size: 11px; padding: 4px 10px 2px; color: var(--muted); text-transform: uppercase; }
.v-ctx-item { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
  padding: 6px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.v-ctx-item:hover { background: var(--accent); }
.v-ctx-sep { border-top: 1px solid #ddd; margin: 2px 0; }

/* Context menu dan multi-select untuk AI Caption table */
#cap-list tr.cap-msel { background: rgba(182,255,0,.18); outline: 1px solid var(--accent); }
#cap-list tr.cap-msel td { background: rgba(182,255,0,.08); }
.cap-ctx { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  min-width: 200px; padding: 4px 0; }
.cap-ctx-title { font-family: var(--font-head); font-weight: 800; font-size: 11px; padding: 4px 10px 2px; color: var(--muted); text-transform: uppercase; }
.cap-ctx-item { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
  padding: 6px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.cap-ctx-item:hover { background: var(--accent); }
.cap-ctx-sep { border-top: 1px solid #ddd; margin: 2px 0; }

/* ===== Dashboard: daftar jadwal mendatang (Repliz) ===== */
.dash-draft-hd { font-family: var(--font-head); font-weight: 800; font-size: 11px; text-transform: uppercase;
  letter-spacing: .3px; margin: 10px 0 4px; border-top: 2px solid var(--ink); padding-top: 8px; }
.draft-item { display: flex; gap: 8px; align-items: center; font-size: 11px; padding: 3px 0; border-bottom: 1px dashed #ddd; }
.draft-when { font-family: var(--font-mono); color: var(--muted); flex: 0 0 auto; }
.draft-acc { font-weight: 700; text-transform: uppercase; font-size: 9px; flex: 0 0 auto; }
.draft-ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Editor prompt AI: textarea lebih tinggi ===== */
#s-prompt-highlight { min-height: 300px; }
#s-prompt-hook { min-height: 200px; }

/* ===== AI Clipping: Tab/Step UI ===== */
#page-ai.active { display: flex; flex-direction: column; }

/* Tab Indicator - Folder Style */
.aic-tabs {
  display: flex; gap: 0; padding: 0 2px; position: relative; z-index: 1;
}
.aic-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; background: #4a4a4a; border: 2px solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: #999;
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  border-bottom: 2px solid var(--ink);
  margin-bottom: -2px; /* overlap dengan container */
  position: relative;
}
.aic-tab:first-child { border-right: none; }
/* Tab tidak aktif: shadow solid di kanan saja */
.aic-tab:not(.active) {
  box-shadow: 4px 0 0 var(--ink);
}
.aic-tab:disabled { opacity: 0.6; cursor: not-allowed; }
.aic-tab.active {
  background: #fff; color: var(--ink);
  box-shadow: none;
  border-bottom-color: #fff; /* menyatu dengan konten */
  z-index: 2;
}
.aic-tab:not(:disabled):not(.active):hover { background: #5a5a5a; color: #ccc; }
.aic-tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #666; color: #ccc;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
  border: 2px solid #888;
}
.aic-tab.active .aic-tab-num { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Step Containers */
.aic-step {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 2px solid var(--ink); border-top: none;
  box-shadow: 4px 4px 0 var(--ink);
  margin: 0 2px 8px 2px;
}

/* ===== Step 1: Centered Card Layout ===== */
.aic-step1-centered {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; flex: 1;
}
.aic-step1-card {
  width: 33%; min-width: 360px; max-width: 460px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}

/* Tombol Pilih Video - full width */
.aic-step1-pickbtn { width: 100%; height: 44px; justify-content: center; font-size: 14px; }

/* Divider "atau" */
.aic-step1-divider {
  display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px;
}
.aic-step1-divider::before, .aic-step1-divider::after {
  content: ''; flex: 1; height: 1px; background: #ddd;
}

/* URL row */
.aic-step1-urlrow { display: flex; gap: 8px; }
.aic-step1-urlrow input { flex: 1; height: 40px; font-size: 13px; }
.aic-step1-urlrow .btn { height: 40px; padding: 0 12px; white-space: nowrap; }

/* Download progress */
.aic-step1-dlprog .prog-wrap { width: 100%; }

/* File card - detail info */
.aic-step1-filecard {
  padding: 12px; background: #f8f8f5; border: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 6px;
}
.aic-step1-filecard-row {
  display: flex; align-items: center; gap: 8px;
}
.aic-step1-filecard-row .ic { width: 20px; height: 20px; opacity: 0.7; flex-shrink: 0; }
.aic-step1-filename { font-weight: 700; font-size: 13px; word-break: break-all; }
.aic-step1-filecard-details {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted);
  padding-left: 28px;
}
.aic-step1-filecard-details b { font-weight: 600; color: var(--ink); }

/* Test mode + Jumlah klip (1 baris) */
.aic-step1-options {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: -4px;
}
.aic-step1-testmode {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.aic-step1-testmode input { 
  margin: 0; width: 28px; height: 28px; 
  appearance: none; -webkit-appearance: none;
  background: #fff; border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer; position: relative;
}
.aic-step1-testmode input:checked {
  background: var(--accent);
}
.aic-step1-testmode input:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--ink);
}

/* Jumlah klip input */
.aic-step1-clipcount {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.aic-step1-clipcount .field { margin: 0; font-weight: 600; white-space: nowrap; }
.aic-step1-clipcount input { width: 50px; height: 28px; text-align: center; font-size: 13px; }

/* Spacer sebelum tombol */
.aic-step1-spacer { height: 8px; }

/* Action button - tidak terlalu tinggi */
.aic-step1-action { width: 100%; height: 44px; font-size: 14px; justify-content: center; }

/* Progress bar - single line dengan teks */
.aic-step1-progress .prog-wrap { width: 100%; }
.aic-step1-progress .prog-txt { font-size: 11px; }

/* Responsive */
@media (max-width: 480px) {
  .aic-step1-card { width: 95%; min-width: auto; padding: 16px; }
}

/* Step 2: 2-column layout */
.aic-step2-layout {
  display: grid; grid-template-columns: 1fr minmax(240px, 320px);
  gap: 12px; flex: 1; min-height: 0; padding: 12px;
  align-items: stretch;
}
.aic-step2-left, .aic-step2-right {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0;
}
.aic-step2-left { overflow: auto; padding: 2px; } /* padding kecil agar shadow tak menempel tepi */
.aic-step2-right { overflow: visible; }

/* Arah shadow per-elemen di Step 2 (menimpa default .card).
   margin di sisi shadow memberi ruang agar tak terpotong overflow kontainer. */
.aic-step2-layout .aic-table-card {
  box-shadow: var(--shadow) 0 0 var(--ink) !important; /* tabel: shadow kanan */
  margin-right: var(--shadow);
}
.aic-step2-layout .aic-panels-row {
  margin-bottom: var(--shadow); /* ruang untuk shadow bawah panel */
}
.aic-step2-layout .aic-panel-third {
  box-shadow: 0 var(--shadow) 0 var(--ink) !important; /* Opsi Global / Aksi: shadow bawah */
}

/* Tabel AI Clipping */
.aic-table-card { flex: 0 0 auto; max-height: 160px; }
.aic-table { width: 100%; }
.aic-table td { cursor: pointer; }
.aic-table tbody tr.sel { background: var(--accent); }
.aic-table th.col-center, .aic-table td.col-center { text-align: center; }

/* 3 Panel baris: Opsi Global | Edit Klip | Action */
.aic-panels-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; flex: 1; min-height: 0;
}
.aic-panel-third {
  min-height: 0; display: flex; flex-direction: column;
}
.aic-panel-third .settings-body {
  flex: 1; min-height: 0; overflow: auto;
}

/* Action panel */
.aic-action-panel { display: flex; flex-direction: column; }
.aic-action-body {
  flex: 1; padding: 10px; display: flex; flex-direction: column;
}
.aic-action-progress {
  margin-top: auto; padding-top: 10px;
}
.aic-action-progress .prog-wrap { width: 100%; }

/* Edit panel dengan lock overlay */
.aic-edit-panel { position: relative; }
.aic-edit-lock {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(80,80,80,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: #fff; font-size: 13px; font-weight: 600; text-align: center;
  border-radius: inherit;
}
.aic-edit-panel.unlocked .aic-edit-lock { display: none; }

/* Preview card AI Clipping - sejajar dengan panel kiri */
.aic-preview-card { flex: 1; display: flex; flex-direction: column; height: 100%; }
.aic-preview-card .preview-frame {
  flex: 1 1 auto;
  border: 2px solid var(--ink); background: #000;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.aic-preview-card .preview-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.aic-preview-hook, .aic-preview-caption {
  position: absolute; left: 0; right: 0; text-align: center;
  color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}
.aic-preview-hook { top: 10%; font-size: 14px; font-weight: 700; }
.aic-preview-caption { bottom: 10%; font-size: 12px; }
.aic-preview-mode {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.7); color: #b6ff00; font-size: 10px;
  padding: 2px 6px; border-radius: 4px; pointer-events: none;
}

/* Spectrum/Waveform - compact */
.aic-spectrum {
  position: relative; height: 40px; background: #141414; border: 2px solid var(--ink);
  overflow: hidden; cursor: pointer; flex: 0 0 auto; margin-top: 8px;
}
.aic-spectrum canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aic-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
  pointer-events: none; z-index: 3;
}
.aic-clip-region {
  position: absolute; top: 0; bottom: 0; background: rgba(182, 255, 0, 0.25);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
  pointer-events: none; z-index: 1;
}

/* Section cards (legacy) */
.aic-section { padding: 12px; }
.aic-section .sub { margin-bottom: 6px; }

/* Collapsible details */
.aic-details { padding: 0; }
.aic-details > summary {
  padding: 12px; cursor: pointer; font-weight: 700; font-size: 13px;
  list-style: none; display: flex; align-items: center;
}
.aic-details > summary::before {
  content: '▶'; margin-right: 8px; font-size: 10px; transition: transform 0.15s;
}
.aic-details[open] > summary::before { transform: rotate(90deg); }
.aic-details-content { padding: 0 12px 12px; }

/* Divider */
.aic-divider {
  display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 12px;
}
.aic-divider::before, .aic-divider::after {
  content: ''; flex: 1; height: 1px; background: #ddd;
}

/* File info */
.aic-file-info { margin-top: 8px; padding: 8px; background: #f3f3ee; border: 1px solid var(--ink); }
.aic-filename { font-weight: 700; font-size: 12px; word-break: break-all; }
.aic-duration { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }

/* URL row */
.aic-url-row { display: flex; gap: 6px; }
.aic-url-row input { flex: 1; height: 36px; }
.aic-url-row .btn { height: 36px; padding: 0 10px; }

/* Test mode switch */
.aic-switch { padding: 4px 0; }
.aic-switch input { margin-right: 4px; }

/* Test mode panel */
.aic-testpanel { background: #fffde7; border-color: #fbc02d; }
.aic-testpanel .sub { color: #f57f17; }

/* Table card */
.aic-table-card { flex: 1 1 auto; min-height: 180px; display: flex; flex-direction: column; }
.aic-table-wrap { flex: 1 1 auto; overflow: auto; min-height: 0; margin-top: 8px; }
.aic-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.aic-table th, .aic-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #ddd; }
.aic-table th { background: #f5f5f5; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.aic-table tbody tr { cursor: pointer; }
.aic-table tbody tr:hover { background: #f9f9f4; }
.aic-table tbody tr.selected { background: rgba(182, 255, 0, 0.2); }
.aic-table .aic-icon { font-size: 14px; text-align: center; }
.aic-table .aic-icon.on { color: #2a7d18; }
.aic-table .aic-icon.off { color: #c62828; }

/* Layout selector submenu */
.aic-layout-selector {
  position: relative;
}
.aic-layout-current {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: #fff; border: 2px solid var(--ink);
  cursor: pointer; font-size: 13px;
}
.aic-layout-current:hover { background: #f5f5f0; }
.aic-layout-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 2px solid var(--ink); border-top: none;
  box-shadow: 4px 4px 0 var(--ink); z-index: 100;
  max-height: 250px; overflow-y: auto;
}
.aic-layout-selector.open .aic-layout-dropdown { display: block; }
.aic-layout-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer; font-size: 13px;
}
.aic-layout-option:hover { background: rgba(182, 255, 0, 0.2); }
.aic-layout-option.selected { background: rgba(182, 255, 0, 0.3); font-weight: 600; }

/* Layout preview icons (mini 9:16 boxes) */
.aic-layout-preview {
  width: 24px; height: 42px; background: #222; border: 1px solid #666;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; overflow: hidden;
}
/* Blur: video di tengah dengan blur bg */
.aic-lp-blur {
  width: 100%; height: 60%; background: linear-gradient(#444, #333);
  position: relative;
}
.aic-lp-blur::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(100,100,100,0.5), rgba(80,80,80,0.5));
}
/* Fitpad: video di tengah dengan black bars */
.aic-lp-fitpad {
  width: 100%; height: 50%; background: #555;
}
/* Split game: atas video, bawah game */
.aic-lp-split-game {
  width: 100%; height: 100%; display: flex; flex-direction: column;
}
.aic-lp-split-game::before {
  content: ''; flex: 1; background: #555;
}
.aic-lp-split-game::after {
  content: ''; flex: 1; background: repeating-linear-gradient(45deg, #333, #333 2px, #444 2px, #444 4px);
}
/* Split podcast: 2 video atas bawah */
.aic-lp-split-podcast {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1px;
}
.aic-lp-split-podcast::before, .aic-lp-split-podcast::after {
  content: ''; flex: 1; background: #555;
}
/* Focus: crop center */
.aic-lp-focus {
  width: 100%; height: 100%; background: #555;
  display: flex; align-items: center; justify-content: center;
}
.aic-lp-focus::before {
  content: ''; width: 60%; height: 60%; border: 2px dashed #888;
}

/* Edit panel */
.aic-edit-panel { max-height: 450px; overflow: auto; }
.aic-edit-divider { height: 1px; background: #ddd; margin: 12px 0; }
.aic-override-fields { padding-left: 8px; border-left: 3px solid var(--accent); margin-top: 8px; }

/* Preview card */
.aic-preview-card { flex: 0 0 auto; }
.aic-preview-box {
  position: relative; width: 100%; aspect-ratio: 9/16; max-height: 360px;
  background: #000; border: 2px solid var(--ink); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.aic-preview-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #666; text-align: center; padding: 20px;
}
.aic-preview-placeholder .ic { width: 48px; height: 48px; }
#aic-preview-img { width: 100%; height: 100%; object-fit: contain; }
.aic-preview-hook {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  max-width: 90%; text-align: center; padding: 4px 8px;
}
.aic-preview-caption {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  color: #fff; background: rgba(0,0,0,0.7); padding: 4px 10px; border-radius: 4px;
  max-width: 90%; text-align: center;
}

/* Style panels (inside details) */
.aic-details .field { margin: 4px 0 2px; }
.aic-color-input { width: 100%; height: 32px; padding: 2px; border: 2px solid var(--ink); cursor: pointer; }
.aic-slider { width: calc(100% - 50px); vertical-align: middle; }
#aic-kar-opacity-val { font-family: var(--font-mono); font-size: 11px; }

/* Actions */
.aic-actions { flex: 0 0 auto; }

/* Responsive: 1 kolom pada layar kecil */
@media (max-width: 800px) {
  .aic-step2-layout { grid-template-columns: 1fr; }
  .aic-step2-left, .aic-step2-right { max-height: none; overflow: visible; }
}

/* Legacy classes (backward compat) */
.aic-layout { display: none; }
.aic-left, .aic-center, .aic-right { display: none; }
.ai-layout { display: none; }
.ai-controls, .ai-candidates { display: none; }
.ai-url-row { display: flex; gap: 6px; align-items: stretch; }
.ai-url-row input { flex: 1; height: 40px; box-sizing: border-box; }
.ai-url-row .btn { height: 40px; box-sizing: border-box; }
.ai-direction { height: 140px; min-height: 140px; }


/* ===== Akun Repliz: baris 1/3 daftar akun + 2/3 statistik, lalu tab bawah ===== */
#page-repliz.active { display: flex; flex-direction: column; padding: 2px 8px 8px 2px; }
#page-brightbean.active { display: flex; flex-direction: column; padding: 2px 8px 8px 2px; }
.rzp-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 12px;
  flex: 0 0 auto; min-height: 200px; max-height: 38vh; }
.rzp-accounts, .rzp-stat { padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.rzp-acc-list { overflow: auto; min-height: 0; margin-top: 8px; flex: 1; }
.rzp-stat #rzp-stat-body { overflow: auto; min-height: 0; margin-top: 8px; flex: 1; }
/* Kartu akun yang bisa diklik */
.rzp-acc { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fff;
  padding: 8px 10px; margin-bottom: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rzp-acc:hover { background: #f3f3ee; }
.rzp-acc.sel { background: var(--accent); }
.rzp-acc .rzp-acc-main { flex: 1; min-width: 0; }
.rzp-acc .rzp-acc-name { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzp-acc .rzp-acc-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzp-acc .rzp-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 800; padding: 1px 6px;
  border: 2px solid var(--ink); background: #fff; text-transform: uppercase; }
/* Grid statistik */
.rzp-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
/* Baris statistik 6 kolom sama lebar (Sisa/Persentase/Total/Sukses/Pending/Beli) — semua ber-shadow. */
.rzp-stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rzp-stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.rzp-stat-cell { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 8px 10px; background: #fff; }
.rzp-stat-cell .n { font-family: var(--font-mono); font-weight: 800; font-size: 18px; }
.rzp-stat-cell .l { font-size: 11px; color: var(--muted); }
/* Sel "Beli storage" (link) di baris statistik: gaya seragam + aksen. */
.rzp-stat-buy { display: block; text-decoration: none; color: var(--ink); background: var(--accent); cursor: pointer; }
.rzp-stat-buy:hover { filter: brightness(.97); }
.rzp-stat-buy .n .ic, .rzp-stat-buy .n .ic svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .rzp-stat-row { grid-template-columns: repeat(2, 1fr); } }
/* Kartu tab bawah - expand penuh */
.rzp-tabs-card { padding: 12px; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rzp-tabs-card .rzp-tabpane { flex: 1; overflow: auto; min-height: 0; border: 2px solid var(--ink); padding: 10px; background: #fff; }
/* Item komentar & konten */
.rzp-item { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fff; padding: 10px; margin-bottom: 10px; }
/* Panel putih besar (kartu) pembungkus daftar komen/konten/report/file — juga
   menampung empty-state agar tetap terlihat sebagai kotak putih ber-shadow. */
.rzp-panel { background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 14px; min-height: 160px; }
.rzp-panel .hint { display: flex; align-items: center; justify-content: center; min-height: 130px; text-align: center; }
/* Kartu item di dalam panel: shadow lebih kecil agar tidak bertumpuk berat. */
.rzp-panel .rzp-item { box-shadow: 3px 3px 0 var(--ink); }

/* Halaman submenu Repliz (komentar/konten/report/storage): expand penuh ke bawah,
   scroll di dalam panel; toolbar tetap di atas. */
#page-rz-comments.active,
#page-rz-content.active,
#page-rz-report.active,
#page-rz-storage.active { display: flex; flex-direction: column; padding: 8px; }
#page-rz-comments .scroll-area,
#page-rz-content .scroll-area,
#page-rz-report .scroll-area,
#page-rz-storage .scroll-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#page-rz-comments .scroll-area > .rzp-panel,
#page-rz-content .scroll-area > .rzp-panel,
#page-rz-report .scroll-area > .rzp-panel { flex: 1 1 auto; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin-bottom: 6px; }
/* Storage: area scroll jadi flex kolom; daftar file mengisi sisa tinggi. */
#page-rz-storage .scroll-area { display: flex; flex-direction: column; overflow: hidden; }
#page-rz-storage #rzp-tab-storage { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#page-rz-storage #rzp-file-list { flex: 1 1 auto; min-height: 120px; overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin-bottom: 6px; }
/* Toolbar Repliz (cari teks/nama file/status): input & select ber-shadow, tinggi
   sama dengan tombol (40px). Tombol di toolbar file dibuat seragam. */
.rzp-file-toolbar, #page-rz-comments .scroll-area > .row {
  align-items: stretch; }
.rzp-file-toolbar input, .rzp-file-toolbar .btn, .rzp-file-toolbar a.btn,
#page-rz-comments .scroll-area > .row input,
#page-rz-comments .scroll-area > .row select,
#page-rz-comments .scroll-area > .row .btn {
  height: 40px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); }
#page-rz-comments .scroll-area > .row select { padding: 8px 10px; }
.rzp-item .top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rzp-item .top .badge { background: var(--accent); border: 2px solid var(--ink); font-weight: 800; padding: 1px 8px; font-family: var(--font-mono); font-size: 11px; }
.rzp-item .top .badge.age-old { background: #ef5350; color: #fff; }
.rzp-item .top .badge.age-mid { background: #ff9800; color: #fff; }
.rzp-item .top .badge.age-new { background: #4caf50; color: #fff; }
.rzp-item .meta { font-size: 11px; color: var(--muted); }
.rzp-item .txt { font-size: 13px; margin: 4px 0; }
.rzp-item .acts { display: flex; gap: 6px; margin-top: 6px; }

/* Comment item - redesigned */
.rzp-cmt-item { padding: 12px; }

/* ===== Chat Layout untuk Komentar ===== */
.rzp-chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
  gap: 0;
  background: #f5f5f5;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.rzp-chat-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 2px solid var(--ink);
  height: 100%;
  overflow: hidden;
}
.rzp-chat-list-title {
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  flex-shrink: 0;
  background: #fff;
}
.rzp-chat-list-header {
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  flex-shrink: 0;
  background: #fff;
}
.rzp-chat-toolbar {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: nowrap;
  align-items: center;
}
.rzp-chat-toolbar select {
  flex: 1;
  height: 32px;
  font-size: 11px;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  background: #fff;
  min-width: 80px;
}
.rzp-chat-toolbar select[multiple] {
  height: auto;
  min-height: 32px;
  max-height: 50px;
}
.rzp-chat-toolbar .btn {
  height: 32px;
  padding: 4px 8px;
  font-size: 11px;
  flex-shrink: 0;
}
/* Pagination di toolbar - tetap di kanan, tidak wrap */
#rzp-cmt-pagination {
  margin-left: auto;
  flex-shrink: 0;
}
.rzp-chat-selectbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 2px solid var(--ink);
  background: #f0f0f0;
  flex-shrink: 0;
}
.rzp-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.rzp-select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.rzp-select-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.rzp-select-actions span {
  font-size: 11px;
  color: var(--muted);
}
.btn-sm {
  height: 26px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
}
/* Action button colors - sama dengan detail chat */
.rzp-action-resolve { background: #90EE90 !important; }
.rzp-action-ignore { background: #2196F3 !important; color: #fff !important; }
.rzp-action-pending { background: #FFD700 !important; }
.rzp-action-delete { background: #ff6b6b !important; color: #fff !important; }
/* Disabled state - abu-abu */
.rzp-select-actions .btn:disabled {
  background: #e0e0e0 !important;
  color: #999 !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.rzp-selected-count {
  font-size: 11px;
  color: var(--muted);
  min-width: 60px;
}
.rzp-chat-item.selected {
  background: #e8f5e9;
}
.rzp-chat-list-header input[type="text"] {
  height: 32px;
  font-size: 12px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
}
.rzp-chat-items {
  flex: 1;
  overflow-y: auto;
}
.rzp-chat-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.15s;
}
.rzp-chat-item:hover { background: #f8f8f8; }
.rzp-chat-item.active { background: var(--accent); }
.rzp-chat-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
}
.rzp-chat-item-avatar .avatar-initial { transition: opacity 0.2s; }
.rzp-chat-item-avatar .avatar-check { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rzp-chat-item-avatar .avatar-check .ic { width: 20px; height: 20px; }
.rzp-chat-item-avatar.checked {
  transform: scaleX(-1);
  background: #4CAF50 !important;
  color: #fff !important;
}
.rzp-chat-item-avatar.checked .avatar-initial { opacity: 0; }
.rzp-chat-item-avatar.checked .avatar-check { 
  opacity: 1;
  transform: scaleX(-1);
}
/* Platform colors */
.rzp-chat-item-avatar.tiktok { background: #000; color: #fff; text-shadow: 2px 0 #ff0050, -2px 0 #00f2ea; }
.rzp-chat-item-avatar.youtube { background: #FF0000; color: #fff; }
.rzp-chat-item-avatar.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; }
.rzp-chat-item-avatar.facebook { background: #1877F2; color: #fff; }
.rzp-chat-item-avatar.threads { background: #000; color: #fff; font-family: 'Georgia', serif; font-style: italic; }
.rzp-chat-item-avatar.linkedin { background: #0A66C2; color: #fff; }
.rzp-chat-item-avatar.twitter { background: #000; color: #fff; font-family: 'Arial Black', sans-serif; font-weight: 900; }
.rzp-chat-item-avatar.x { background: #000; color: #fff; font-family: 'Arial Black', sans-serif; font-weight: 900; }
.rzp-chat-item-avatar.whatsapp { background: #25D366; color: #fff; }
.rzp-chat-item-body { flex: 1; min-width: 0; }
.rzp-chat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.rzp-chat-item-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rzp-chat-item-status {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--accent);
  border-radius: 3px;
  flex-shrink: 0;
}
.rzp-chat-item-status.resolved { background: #90EE90; }
.rzp-chat-item-status.ignored { background: #ddd; }
.rzp-chat-item-text {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rzp-chat-item-meta {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}
/* Detail panel kanan */
.rzp-chat-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fafafa;
}
.rzp-chat-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rzp-chat-header {
  padding: 16px 16px;
  background: #fff;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rzp-chat-header-info { flex: 1; }
.rzp-chat-header-name { font-weight: 700; font-size: 14px; }
.rzp-chat-header-meta { font-size: 11px; color: var(--muted); }
.rzp-chat-header-actions { display: flex; gap: 6px; }
.rzp-chat-header-actions .btn { height: 32px; padding: 4px 10px; font-size: 11px; }
.rzp-chat-header-actions .rzp-status-resolved { background: #90EE90; cursor: default; }
.rzp-chat-header-actions .rzp-status-ignored { background: #ddd; cursor: default; }
.rzp-chat-header-actions .rzp-action-pending { background: #FFD700; }
.rzp-chat-header-actions .rzp-action-delete { background: #ff6b6b; color: #fff; }
.rzp-chat-header-actions .btn:disabled {
  background: #e0e0e0 !important;
  color: #999 !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.rzp-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rzp-chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.rzp-chat-bubble.incoming {
  background: #fff;
  border: 1px solid #ddd;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.rzp-chat-bubble.outgoing {
  background: var(--accent);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.rzp-chat-bubble-time {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}
.rzp-chat-bubble.outgoing .rzp-chat-bubble-time { color: #555; }
.rzp-chat-input {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  gap: 8px;
}
.rzp-chat-input input {
  flex: 1;
  height: 40px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-size: 13px;
}
.rzp-chat-input .btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 4px;
}
.rzp-chat-input .rzp-reply-ai {
  padding: 0 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.rzp-chat-video-info {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0;
  margin-bottom: 12px;
  border-radius: 0;
  font-size: 12px;
  display: flex;
  overflow: hidden;
}
.rzp-video-thumb {
  width: 100px;
  min-height: 80px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rzp-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  padding: 12px;
  text-align: center;
}
.rzp-video-play .ic { width: 28px; height: 28px; }
.rzp-video-play:hover { background: rgba(255,255,255,0.1); }
.rzp-video-meta {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rzp-video-caption {
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}
.rzp-video-caption .label,
.rzp-video-tags .label {
  font-weight: 700;
  color: var(--ink);
}
.rzp-video-tags {
  font-size: 11px;
  color: #2d7a2d;
  font-weight: 600;
}
.rzp-chat-video-info .label { font-weight: 700; color: var(--ink); }
@media (max-width: 768px) {
  .rzp-chat-layout { grid-template-columns: 1fr; }
  .rzp-chat-detail { display: none; }
  .rzp-chat-detail.active { display: flex; position: absolute; inset: 0; z-index: 10; }
}
.rzp-cmt-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rzp-cmt-header .badge { background: var(--accent); border: 2px solid var(--ink); font-weight: 800; padding: 2px 10px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.rzp-cmt-author { font-weight: 700; font-size: 13px; }
.rzp-cmt-meta { font-size: 11px; color: var(--muted); }
.rzp-cmt-text { font-size: 14px; line-height: 1.5; padding: 10px 12px; background: #f8f8f8; border-left: 3px solid var(--accent); margin-bottom: 10px; }
.rzp-cmt-detail { display: none; background: #fffef0; border: 1px solid #e0d890; padding: 10px 12px; margin-bottom: 10px; font-size: 12px; line-height: 1.6; }
.rzp-cmt-detail.open { display: block; }
.rzp-cmt-detail-row { margin-bottom: 6px; }
.rzp-cmt-detail-row:last-child { margin-bottom: 0; }
.rzp-cmt-detail-row .label { font-weight: 700; color: var(--ink); }
.rzp-cmt-actions { display: flex; flex-direction: column; gap: 8px; }
.rzp-cmt-reply-row { display: flex; gap: 6px; }
.rzp-cmt-reply-row input { flex: 1; height: 36px; padding: 6px 10px; border: 2px solid var(--ink); font-size: 13px; }
.rzp-cmt-reply-row .btn { height: 36px; width: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.rzp-cmt-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rzp-cmt-btns .btn { height: 32px; padding: 4px 10px; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.rzp-cmt-btns .btn .ic { width: 14px; height: 14px; }
.rzp-cmt-btns .btn.active { background: var(--accent); }
.rzp-cmt-btns .rzp-resolve-btn,
.rzp-cmt-btns .rzp-ignore-btn,
.rzp-cmt-btns .rzp-del-btn { width: 32px; padding: 0; justify-content: center; }

/* Pagination komentar - inline di toolbar */
.rzp-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rzp-pagination .btn {
  height: 32px;
  width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rzp-page-info {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 4px;
}

/* Replies section */
.rzp-cmt-replies {
  display: none;
  margin: 8px 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  max-height: 200px;
  overflow-y: auto;
}
.rzp-cmt-replies.open { display: block; }
.rzp-reply-item {
  background: #f0f8f0;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 4px;
}
.rzp-reply-item:last-child { margin-bottom: 0; }
.rzp-reply-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.rzp-reply-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.rzp-reply-owner {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
}
.rzp-reply-time {
  font-size: 10px;
  color: var(--muted);
}
.rzp-reply-text {
  font-size: 13px;
  line-height: 1.4;
}
.rzp-upgrade { border: 2px dashed var(--ink); padding: 12px; background: #fffbe6; font-size: 13px; }
@media (max-width: 900px) { .rzp-layout { grid-template-columns: 1fr; max-height: none; } }
/* Halaman Akun Repliz (overview) kini hanya berisi akun + statistik → isi penuh tinggi. */
.rzp-layout-full { flex: 1 1 auto; min-height: 0; max-height: none; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.rzp-layout-full > .rzp-accounts, .rzp-layout-full > .rzp-stat { min-height: 0; overflow: hidden; }


/* ===== Dropdown padding & account picker (Jadwal/Repliz) ===== */
/* Beri padding pada select & option agar tidak mepet. */
select { padding: 8px 10px; }
select option { padding: 6px 10px; }
/* Picker akun global (tombol + panel checkbox) */
.acc-picker { position: relative; display: inline-block; }
.acc-picker > .btn { max-width: 220px; }
.acc-picker #rz-account-all-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.acc-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; max-height: 260px;
  overflow: auto; background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 6px; }
.acc-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; }
.acc-opt:hover { background: #f3f3ee; }
.acc-opt input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.acc-opt.acc-all { border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
/* Source indicator (Repliz/BrightBean) */
.acc-src { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; 
  font-size: 10px; font-weight: 800; border-radius: 3px; flex-shrink: 0; }
.acc-src-repliz { background: #6366f1; color: #fff; }
.acc-src-bb { background: #4CAF50; color: #fff; }
/* Platform status bar (di halaman Jadwal) */
.platform-status { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.platform-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: rgba(255,255,255,0.15); border-radius: 4px; font-size: 11px; color: #fff; }
.platform-badge.valid { background: rgba(0,200,100,0.3); }
.platform-badge.invalid { background: rgba(200,50,50,0.3); opacity: 0.7; }
.platform-badge .status-icon { margin-left: auto; width: 14px; text-align: center; }
.spinner-inline { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
/* Checklist akun override (per video) */
.acc-checklist { border: 2px solid var(--ink); background: #fff; max-height: 160px; overflow: auto; padding: 6px; }
.acc-checklist .acc-opt { padding: 5px 6px; }

/* ===== Note template → hyperlink ke Kanvas ===== */
.tpl-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tpl-note a { color: var(--ink); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ===== Sidebar submenu ===== */
.menu .submenu { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px 14px;
  padding-left: 8px; border-left: 2px solid var(--ink); }
.menu .submenu button { font-size: 12px; padding: 13px 12px; box-shadow: 3px 3px 0 var(--ink); }
.menu .submenu button .ic { width: 16px; height: 16px; }
.menu .submenu button .ic svg { width: 16px; height: 16px; }
/* Caret pada parent tidak lagi dipakai untuk toggle (submenu selalu tampil). */
.menu .has-sub-caret > .ic-caret { display: none; }
/* Level 3 submenu (sub-sub menu) - lebih kecil */
.menu .submenu .submenu { margin: 4px 0 6px 10px; border-left: 2px dashed var(--ink); }
.menu .submenu .submenu button { font-size: 11px; padding: 10px 10px; }

/* ===== BrightBean pages ===== */
.bb-gate { padding: 20px; }
.bb-gate .form-group { margin-bottom: 12px; }
.bb-gate .form-group label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 13px; }
.bb-gate .form-group .hint { font-size: 11px; margin-top: 4px; color: #666; }

/* BrightBean account card */
.bb-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 10px;
  background: #fff;
}
.bb-account-item .bb-acc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid var(--ink);
}
/* Avatar warna per platform */
.bb-acc-avatar.bb-plat-tiktok { background: #000; }
.bb-acc-avatar.bb-plat-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.bb-acc-avatar.bb-plat-youtube { background: #FF0000; }
.bb-acc-avatar.bb-plat-facebook { background: #1877F2; }
.bb-acc-avatar.bb-plat-twitter, .bb-acc-avatar.bb-plat-x { background: #000; }
.bb-acc-avatar.bb-plat-linkedin { background: #0A66C2; }
.bb-acc-avatar.bb-plat-pinterest { background: #E60023; }
.bb-acc-avatar.bb-plat-threads { background: #000; }
.bb-acc-avatar.bb-plat-default { background: var(--accent); color: var(--ink); }

.bb-account-item .bb-acc-info { flex: 1; min-width: 0; }
.bb-account-item .bb-acc-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-account-item .bb-acc-platform { font-size: 11px; color: #666; text-transform: capitalize; margin-top: 2px; }
.bb-account-item .bb-acc-meta { font-size: 10px; color: #888; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.bb-account-item .bb-acc-meta span { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
.bb-account-item .bb-acc-status { font-size: 10px; padding: 4px 8px; font-weight: 600; }
.bb-account-item .bb-acc-status.connected { background: #4CAF50; color: #fff; }
.bb-account-item .bb-acc-status.disconnected { background: #ff6b6b; color: #fff; }

/* BrightBean workspace info */
.bb-workspace-card {
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #f9f9f9;
}
.bb-workspace-card .bb-ws-name { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.bb-workspace-card .bb-ws-org { font-size: 12px; color: #666; }

/* BrightBean permissions list */
.bb-perm-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.bb-perm-item { font-size: 10px; padding: 2px 6px; background: var(--accent); border-radius: 3px; font-weight: 600; }

/* Calendar legend colors */

/* BrightBean Media Grid */
.bb-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.bb-media-item {
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.bb-media-item:hover { box-shadow: 4px 4px 0 var(--ink); }
.bb-media-thumb {
  height: 100px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
  position: relative;
}
.bb-media-video-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.bb-media-name {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 8px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-media-meta {
  font-size: 10px;
  color: #666;
  padding: 0 8px 6px;
}

/* BrightBean Posts List */
.bb-posts-list { display: flex; flex-direction: column; gap: 10px; }
.bb-post-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--ink); background: #fff; }
.bb-post-item:hover { box-shadow: 3px 3px 0 var(--ink); }
.bb-post-status { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; font-weight: 700; border: 2px solid var(--ink); text-transform: uppercase; }
.bb-post-status.draft { background: #f0f0f0; }
.bb-post-status.scheduled { background: #2196F3; color: #fff; }
.bb-post-status.published { background: #4CAF50; color: #fff; }
.bb-post-status.failed { background: #f44336; color: #fff; }
.bb-post-content { flex: 1; min-width: 0; }
.bb-post-caption { font-size: 13px; font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-post-meta { font-size: 11px; color: #666; display: flex; gap: 12px; flex-wrap: wrap; }
.bb-post-platform { background: #eee; padding: 2px 6px; border-radius: 3px; }
.bb-post-sched { color: #2196F3; }
.bb-post-actions { display: flex; gap: 6px; }
.bb-post-actions .btn-sm { padding: 6px 8px; font-size: 11px; }
.bb-post-actions .btn-sm .ic { width: 14px; height: 14px; }

/* BrightBean Modal */
.bb-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.bb-modal-dialog { width: 100%; max-width: 520px; max-height: 90vh; background: #fff; border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); display: flex; flex-direction: column; }
.bb-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 2px solid var(--ink); background: var(--accent); }
.bb-modal-body { flex: 1; overflow-y: auto; padding: 16px; }
.bb-modal-body .form-group { margin-bottom: 16px; }
.bb-modal-body .form-group:last-child { margin-bottom: 0; }
.bb-modal-body label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.bb-modal-body label .required { color: #f44336; }
.bb-modal-body .inp, .bb-modal-body textarea { width: 100%; }
.bb-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 16px; border-top: 2px solid var(--ink); }

/* Account checkboxes */
.bb-post-accounts { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto;
  padding: 8px; border: 2px solid var(--ink); background: #fafafa; }
.bb-post-acc-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer; }
.bb-post-acc-item:hover { background: #f0f0f0; }
.bb-post-acc-item input { flex: 0 0 auto; }
.bb-post-acc-item .bb-acc-avatar { width: 28px; height: 28px; font-size: 12px; }
.bb-post-acc-item .bb-acc-info { flex: 1; min-width: 0; }
.bb-post-acc-item .bb-acc-name { font-size: 12px; font-weight: 600; }
.bb-post-acc-item .bb-acc-platform { font-size: 10px; color: #666; }

/* Radio buttons */
.bb-post-action-select { display: flex; gap: 16px; }
.bb-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.bb-radio input { margin: 0; }

/* Media preview */
.bb-post-media-select { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.bb-post-media-preview { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-post-media-thumb { width: 60px; height: 60px; border: 2px solid var(--ink); background-size: cover;
  background-position: center; position: relative; }
.bb-post-media-thumb .remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  background: #f44336; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }

/* BrightBean Account Platform Colors */
.bb-acc-avatar.bb-plat-tiktok { background: #000; color: #fff; text-shadow: 1px 0 #ff0050, -1px 0 #00f2ea; }
.bb-acc-avatar.bb-plat-youtube { background: #FF0000; color: #fff; }
.bb-acc-avatar.bb-plat-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.bb-acc-avatar.bb-plat-facebook { background: #1877F2; color: #fff; }
.bb-acc-avatar.bb-plat-threads { background: #000; color: #fff; font-style: italic; }
.bb-acc-avatar.bb-plat-twitter, .bb-acc-avatar.bb-plat-x { background: #000; color: #fff; font-weight: 900; }
.bb-acc-avatar.bb-plat-linkedin, .bb-acc-avatar.bb-plat-linkedin_personal, .bb-acc-avatar.bb-plat-linkedin_company { background: #0A66C2; color: #fff; }
.bb-acc-avatar.bb-plat-pinterest { background: #E60023; color: #fff; }
.bb-acc-avatar.bb-plat-bluesky { background: #0085FF; color: #fff; }
.bb-acc-avatar.bb-plat-mastodon { background: #6364FF; color: #fff; }
.bb-acc-avatar.bb-plat-google_business { background: #4285F4; color: #fff; }

/* BrightBean Account Meta */
.bb-acc-meta { font-size: 10px; color: #888; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.bb-acc-meta span { white-space: nowrap; }


/* ===== Repliz storage: progress bar & tautan upgrade ===== */
.rzp-storage-hd { font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.rzp-storage-bar { height: 40px !important; min-height: 40px; }
.rzp-storage-bar .prog-txt { font-size: 12px; line-height: 36px; }
.rzp-upgrade a { color: var(--ink); font-weight: 800; text-decoration: underline; white-space: nowrap; }

/* Toolbar file storage: 1 baris fit */
.rzp-file-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.rzp-file-toolbar input[type="text"] {
  flex: 1 1 auto;
  min-width: 80px;
  height: 38px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 12px;
}
.rzp-file-toolbar select {
  width: 140px;
  height: 38px;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 12px;
  background: #fff;
  flex-shrink: 0;
}
.rzp-file-toolbar .btn {
  height: 38px;
  padding: 4px 8px;
  font-size: 11px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Pagination files */
.rzp-file-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.rzp-file-pagination .btn {
  height: 32px;
  padding: 4px 12px;
  font-size: 11px;
}
.rzp-file-toolbar label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.rzp-file-toolbar label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--ink);
  background: #fff;
  cursor: pointer;
}
.rzp-file-toolbar label input[type="checkbox"]:checked {
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23111' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}
/* Checkbox di list file - sama dengan toolbar */
.rzp-file-cb, .bb-file-cb {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--ink);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.rzp-file-cb:checked, .bb-file-cb:checked {
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23111' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

/* Modal dialog hapus thumbnail */
.rzp-thumb-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rzp-thumb-dialog {
  background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  max-width: 500px; width: 100%; max-height: 80vh; display: flex; flex-direction: column;
}
.rzp-thumb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--accent);
}
.rzp-thumb-body { padding: 16px; overflow-y: auto; flex: 1; }
.rzp-thumb-count { font-weight: 700; margin-bottom: 8px; }
.rzp-thumb-list {
  max-height: 250px; overflow-y: auto; border: 1px solid #ddd; background: #f9f9f9; padding: 8px;
}
.rzp-thumb-item { font-size: 12px; font-family: var(--font-mono); padding: 4px 0; border-bottom: 1px solid #eee; }
.rzp-thumb-item:last-child { border-bottom: none; }
.rzp-thumb-item .meta { color: #888; }
.rzp-thumb-footer {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 12px 16px; border-top: 2px solid var(--ink); background: #f5f5f5;
}
/* Scan deletable list */
.rzp-scan-list { max-height: 300px; overflow-y: auto; border: 1px solid #ddd; background: #f9f9f9; }
.rzp-scan-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px;
  border-bottom: 1px solid #eee; cursor: pointer;
}
.rzp-scan-item:hover { background: #f0f0f0; }
.rzp-scan-item:last-child { border-bottom: none; }
.rzp-scan-item .acc-src { width: 16px; height: 16px; font-size: 10px; flex-shrink: 0; }
.rzp-scan-name { font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzp-scan-meta { color: #888; font-size: 11px; white-space: nowrap; }
.rzp-scan-post { color: #666; font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Preview AI Reply */
.rzp-preview-item {
  padding: 8px 10px;
  border: 1px solid #ddd;
  margin-bottom: 6px;
  background: #fafafa;
}
.rzp-preview-cmt {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.rzp-preview-reply {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rzp-preview-reply input[type="text"] {
  flex: 1;
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--ink);
}
.rzp-preview-reply input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ===== Gate overlay (Repliz/Jadwal terkunci bila kredensial kosong/invalid) ===== */
.rz-gate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(245,245,238,.92); backdrop-filter: blur(2px); padding: 24px; }
.bb-gate-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(245,245,238,.92); backdrop-filter: blur(2px); padding: 24px; }
.rz-gate-box { max-width: 460px; width: 100%; background: #fff; border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); padding: 28px 24px; text-align: center; }
.rz-gate-icon { width: 56px; height: 56px; margin: 0 auto 12px; border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); background: var(--accent); display: grid; place-items: center; }
.rz-gate-icon .ic, .rz-gate-icon .ic svg { width: 30px; height: 30px; }
.rz-gate-title { font-family: var(--font-head); font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.rz-gate-msg { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.rz-gate-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Input form di gate */
.bb-gate-overlay .form-group { text-align: left; }
.bb-gate-overlay .form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.bb-gate-overlay .form-group .inp { width: 100%; }
/* Varian inline (bukan overlay absolute): dipakai untuk pesan upgrade di tab konten/report */
.rz-gate-inline { position: static; inset: auto; background: transparent; backdrop-filter: none;
  min-height: 300px; padding: 20px; }


/* ===== Opsi lanjutan jadwal (additionalInfo per platform) ===== */
.adv-head { margin-top: 12px; padding: 8px 10px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  background: var(--card); font-family: var(--font-head); font-weight: 800; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; }
.adv-head .ic { width: 14px; height: 14px; }
#e-adv-box { border: 2px solid var(--ink); border-top: 0; padding: 10px; background: #fff; }
#e-adv-box .row { margin-top: 4px; }
.adv-sub { font-family: var(--font-head); font-weight: 800; font-size: 12px; margin: 10px 0 4px; }


/* ===== AI Caption page ===== */
#page-caption.active { display: flex; flex-direction: column; }
.caption-page { padding: 2px 8px 8px 2px; }
.cap-toolbar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; }
.cap-toolbar .folder-label { flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
/* Semua kontrol toolbar caption tinggi seragam (40px) + shadow, termasuk dropdown model. */
.cap-toolbar .btn, .cap-toolbar select {
  height: 40px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); }
.cap-toolbar select { padding: 8px 10px; border: 2px solid var(--ink); background: #fff; }
.cap-table-card { flex: 1 1 auto; min-height: 0; }
/* Kontrol aksi di action-card caption: tinggi seragam + shadow (konsisten tema). */
.caption-page .action-card .btn, .caption-page .action-card select {
  height: 38px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); }
.caption-page .action-card select { padding: 8px 10px; border: 2px solid var(--ink); background: #fff; }
#cap-table .cap-in { width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 6px; }
#cap-table textarea.cap-in { resize: vertical; min-height: 36px; }
#cap-table th { position: relative; }
/* Tombol aksi per baris (status badge + copy / download txt) */
.cap-row-acts { display: flex; gap: 4px; align-items: center; }
.cap-row-acts .btn { padding: 4px 6px; box-shadow: 2px 2px 0 var(--ink); }
.cap-row-acts .btn .ic { width: 15px; height: 15px; }
/* Badge status = kotak ikon seragam dengan tombol aksi (default hijau accent + shadow). */
.cap-stat { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: var(--accent); box-sizing: border-box; }
.cap-stat .ic, .cap-stat .ic svg { width: 15px; height: 15px; }
.cap-stat.st-ready { background: var(--accent); }
.cap-stat.st-run { background: #ffe08a; }
.cap-stat.st-ok { background: var(--accent); }
.cap-stat.st-err { background: #ff8a8a; }
/* Baris tautan provider (Ambil API Key + Lihat Kuota) sejajar & tinggi sama. */
.provider-links .btn { height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; }


/* ===== Tabel kuota API (Settings) ===== */
.quota-table { margin-top: 8px; overflow-x: auto; }
.q-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.q-tbl th, .q-tbl td { border: 1px solid var(--ink); padding: 4px 8px; text-align: left; }
.q-tbl th { background: var(--ink); color: #fff; font-family: var(--font-head); }
.q-tbl td:nth-child(2) { font-family: var(--font-mono); font-weight: 800; }
.q-tbl tr.q-hi td:nth-child(2) { color: #2a7d18; }
.q-tbl tr.q-lo td:nth-child(2) { color: #d1a000; }
.q-tbl tr.q-no td:nth-child(2) { color: #c62828; }


/* ===== Pengaturan: layout kiri 1/4 submenu + kanan 3/4 detail ===== */
#page-settings.active { display: flex; flex-direction: column; }
.set2 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 3fr; gap: 16px; }
.set2-menu { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.set2-detail { padding: 16px; overflow: auto; min-height: 0; }
/* Listtile submenu: ikon + nama; aktif = hijau + shadow */
.set-tile { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 11px 12px;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; }
.set-tile:hover:not(.active) { background: #f3f3ee; }
.set-tile.active { background: var(--accent); box-shadow: 3px 3px 0 var(--ink); }
.set-tile .ic { width: 18px; height: 18px; flex: 0 0 auto; }
/* Detail: judul & field */
.set2-detail .provider-head { display: flex; align-items: center; gap: 8px; }
.set2-detail .provider-ic { width: 22px; height: 22px; }
/* Daftar akun (token) — semua kontrol tinggi seragam 40px + shadow */
.acc-item { display: flex; align-items: stretch; gap: 8px; padding: 5px 0; }
.acc-item .acc-badge { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--accent);
  font-family: var(--font-mono); font-weight: 800; font-size: 13px; flex: 0 0 auto; box-sizing: border-box; }
.acc-item .acc-label { width: 130px; height: 40px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); }
.acc-item .acc-token { flex: 1; height: 40px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono); background: #f7f7f2; color: var(--muted); letter-spacing: 1px; }
.acc-item .acc-del { height: 40px; box-sizing: border-box; padding: 0 12px; box-shadow: 3px 3px 0 var(--ink);
  background: #ff5c5c; color: #fff; border-color: var(--ink); }
.acc-item .acc-del:hover { background: #e34848; }
.acc-item .acc-del .ic { width: 16px; height: 16px; }
/* Baris tambah akun: input & tombol tinggi 40px + shadow seragam */
.acc-add-row { align-items: stretch; }
.acc-add-row input, .acc-add-row .btn { height: 40px; box-sizing: border-box; box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 900px) { .set2 { grid-template-columns: 1fr; } }
/* Model per provider (pane AI Clipping) */
.clip-model-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.clip-model-row .clip-model-name { width: 150px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.clip-model-row .clip-model-name .ic { width: 16px; height: 16px; }
.clip-model-row select { flex: 1; box-shadow: 3px 3px 0 var(--ink); }


/* Badge "tersimpan" untuk field kredensial (Repliz) yang sudah terisi */
.saved-badge { display: inline-block; background: var(--accent); border: 2px solid var(--ink);
  font-family: var(--font-mono); font-weight: 800; font-size: 10px; padding: 0 6px; margin-left: 6px;
  vertical-align: middle; }


/* ===== Popup Timeline (modal, gaya editor) ===== */
.tl-modal { position: fixed !important; inset: 0 !important; z-index: 8000 !important; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85) !important; padding: 20px; }
.tl-dialog { width: 100%; max-width: 900px; max-height: 92vh; overflow: auto; background: var(--card);
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; }
.tl-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 2px solid var(--ink); }
.tl-head .tl-scope { font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; border-top: 2px solid var(--ink); }
/* Body editor: kiri 1/3 video, kanan 2/3 timeline/action */
.tl-editor { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; padding: 14px; }
/* Kotak video FIXED: muat semua rasio (aspect-fit) dengan black bar. */
.tl-left { min-width: 0; }
.tl-video-box { width: 100%; height: 360px; max-height: 60vh; background: #000; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* object-fit: contain → video selalu muat (fit) di dalam kotak, apa pun orientasinya:
   horizontal fit lebar, vertikal fit tinggi, tanpa overflow.
   Pakai flexbox (bukan grid) + min-height:0 agar height:100% teratasi ke tinggi kotak
   dan video vertikal TIDAK memakai tinggi intrinsik yang bikin overflow terpotong. */
.tl-video-box video { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }
.tl-right { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Track timeline (waveform + playhead + marker) — kotak, bukan slider tipis. */
.tl-track { position: relative; height: 96px; background: #141414; border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); overflow: hidden; cursor: pointer; user-select: none; }
.tl-track canvas { position: absolute; inset: 0; display: block; }
.tl-region-open, .tl-region-end { position: absolute; top: 0; bottom: 0; background: rgba(13,13,13,.55); pointer-events: none; }
.tl-mark { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; cursor: ew-resize; z-index: 3; }
.tl-mark::after { content: ''; position: absolute; top: 0; left: -4px; width: 11px; height: 12px; }
.tl-mark-open { background: #2a7d18; }
.tl-mark-open::after { background: #2a7d18; }
.tl-mark-end { background: #ff5c5c; }
.tl-mark-end::after { background: #ff5c5c; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; margin-left: -1px; pointer-events: none; z-index: 4; }
.pl-row { display: flex; align-items: center; gap: 8px; }
.pl-time { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.pl-step { display: flex; gap: 4px; margin-left: auto; }
.pl-step .btn { padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; }
.tl-set { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.tl-set-row { display: flex; align-items: center; gap: 8px; }
.tl-set-row .pl-badge { width: 14px; height: 14px; border: 2px solid var(--ink); flex: 0 0 auto; }
.tl-set-row .pl-badge.open { background: #2a7d18; }
.tl-set-row .pl-badge.end { background: #ff5c5c; }
#pl-note { color: #c62828; margin-top: 4px; }
@media (max-width: 760px) { .tl-editor { grid-template-columns: 1fr; } .tl-video-box { height: 240px; } }

/* ===== AI CLIPPING LAYOUT EDITOR ===== */
.ai-layout-page.active { display: flex; flex-direction: column; padding-right: 6px; }
.ai-layout-page .card.dark { box-shadow: 4px 4px 0 var(--ink); }
.ai-layout-container {
  display: grid; grid-template-columns: 200px 1fr 240px; gap: 16px;
  flex: 1; min-height: 0; overflow: visible;
  padding-bottom: 6px; /* ruang untuk shadow */
}

/* Panel Kiri: Layout + Layers */
.ail-left-panel {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
}
.ail-list-card, .ail-layers-card {
  display: flex; flex-direction: column;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff;
}
.ail-list-card { flex: 0 0 auto; max-height: 45%; }
.ail-layers-card { flex: 1; min-height: 0; }
.ail-list-card .ail-head, .ail-layers-card .ail-head {
  display: flex; align-items: center; gap: 6px; padding: 10px;
  border-bottom: 2px solid var(--ink);
}
.ail-head .section-title { margin: 0; font-size: 11px; font-weight: 800; flex: 1; }
.ail-head .btn.icon-btn {
  padding: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ail-head .btn.icon-btn .ic { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }

/* Layout List */
.ail-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
}
.ail-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 2px solid var(--ink); margin-bottom: 4px;
  background: #fff; cursor: pointer; font-size: 11px; font-weight: 600;
}
.ail-item:hover { background: #f0f0f0; }
.ail-item.selected { background: var(--accent); }
.ail-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layers Panel */
.ail-layers {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  padding: 10px;
}
.ail-layer {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  cursor: grab; font-size: 11px; transition: transform 0.1s, opacity 0.1s;
}
.ail-layer:hover { background: #f5f5f0; }
.ail-layer.selected { background: var(--accent); }
.ail-layer.dragging { opacity: 0.5; transform: scale(0.98); cursor: grabbing; }
.ail-layer-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ail-layer-icon .ic { width: 14px; height: 14px; }
.ail-layer-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ail-layer-actions { display: flex; align-items: center; gap: 3px; }
.ail-layer-actions button {
  width: 22px; height: 22px; padding: 0;
  background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ail-layer-actions button:hover { background: var(--accent); }
.ail-layer-actions button .ic { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; }

/* Panel Tengah: Canvas */
.ail-canvas-panel {
  display: flex; flex-direction: column; min-height: 0;
}
.ail-canvas-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 12px; flex-wrap: wrap;
}
.ail-canvas-toolbar .toolbar-sep {
  width: 1px; height: 20px; background: var(--ink); opacity: 0.2; margin: 0 4px;
}
.ail-canvas-toolbar .btn.icon-btn.active {
  background: var(--accent); color: var(--ink);
}
.ail-canvas-toolbar .btn.icon-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.ail-canvas-toolbar .btn.icon-btn.small {
  width: 28px; height: 28px; padding: 4px;
}
.ail-canvas-toolbar .btn.icon-btn.small .ic {
  width: 14px; height: 14px;
}
.ail-canvas-wrapper {
  flex: 1; display: flex; background: #888;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  min-height: 0; position: relative; overflow: hidden;
}
.ail-canvas-viewport {
  flex: 1; display: flex; align-items: safe center; justify-content: safe center;
  padding: 16px; min-height: 0; min-width: 0; overflow: auto;
}
.ail-canvas-container {
  position: relative; flex: none;
}
.ail-canvas {
  width: 270px; height: 480px; /* 9:16 ratio scaled */
  background: #000; border: 2px solid var(--ink); position: relative;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
/* Selection indicator overlay - rendered outside canvas clip */
.ail-selection-overlay {
  position: absolute;
  top: 2px; left: 2px;  /* offset for canvas border */
  width: 270px; height: 480px;
  pointer-events: none;
  z-index: 1000;
}
.ail-selection-box {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 8px var(--accent);
  pointer-events: none;
}
.ail-canvas-bg {
  position: absolute; inset: 0; background: #111;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 19px, #333 19px, #333 20px
  ), repeating-linear-gradient(
    90deg, transparent, transparent 19px, #333 19px, #333 20px
  );
  pointer-events: none;
}
.ail-canvas-info {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 10px; color: #666; font-family: var(--font-mono);
}
.ail-canvas-info-left, .ail-canvas-info-right {
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  color: #666;
  font-family: var(--font-mono);
}
.ail-canvas-info-left { left: 8px; }
.ail-canvas-info-left select {
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid #999;
  background: #fff;
}
.ail-canvas-info-right { right: 8px; }

/* Canvas Elements */
.ail-element {
  position: absolute; border: 2px solid transparent; cursor: move;
  box-sizing: border-box;
}
.ail-element:hover { border-color: rgba(182, 255, 0, 0.5); }
.ail-element.selected { /* selection rendered in overlay */ }
.ail-element.selected.primary { /* selection rendered in overlay */ }
.ail-element.video:not(.blur) { /* color set by JS based on layer order */ }
.ail-element.video.blur { 
  background: rgb(160, 0, 220);
  border: 2px solid rgb(120, 0, 180);
}
.ail-element.video.blur::after {
  content: 'BLUR BG';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgb(100, 0, 150);
  padding: 4px 8px;
  letter-spacing: 1px;
  z-index: 1;
  pointer-events: none;
}
.ail-element.text { background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; }
.ail-element.image { background: rgba(200, 100, 100, 0.3); }
.ail-element.shape { /* styling applied via JS */ }
.ail-element-label {
  position: absolute; top: 2px; left: 2px; font-size: 8px; font-weight: 700;
  background: rgba(0,0,0,0.8); color: #fff; padding: 1px 4px;
  pointer-events: none;
}
/* Resize handles */
.ail-element .ail-handle {
  position: absolute; width: 10px; height: 10px;
  background: var(--accent); border: 1px solid var(--ink);
}
.ail-handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.ail-handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.ail-handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.ail-handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
/* Edge handles */
.ail-handle.t { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ail-handle.b { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ail-handle.l { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ail-handle.r { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* Panel Kanan: Properties */
.ail-props-panel {
  display: flex; flex-direction: column; min-height: 0;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff;
}
.ail-props-head {
  display: flex; align-items: center; padding: 10px;
  border-bottom: 2px solid var(--ink);
}
.ail-props-head .section-title { margin: 0; font-size: 11px; font-weight: 800; }
.ail-props-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; padding: 10px;
}
.ail-props-section { margin-bottom: 10px; }
.ail-props-section .sub {
  font-size: 10px; font-weight: 800; color: var(--ink);
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid var(--ink);
}
.ail-props-section input[type="text"],
.ail-props-section input[type="number"],
.ail-props-section select {
  width: 100%; font-size: 11px; padding: 5px 6px;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: #fff;
}
.ail-props-section input[type="color"] {
  width: 100%; height: 28px; padding: 2px;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.ail-props-section input[type="range"] {
  width: 100%; margin-top: 4px;
}
.ail-props-section input[type="checkbox"] {
  width: 16px; height: 16px; margin-right: 6px;
}
.ail-props-section .field { font-size: 9px; font-weight: 700; margin-bottom: 2px; display: block; }
.ail-props-section .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ail-props-section .btn {
  font-size: 11px; padding: 6px 10px; width: 100%;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.ail-props-section .btn:hover { background: var(--accent); }
.ail-props-section .row { display: flex; align-items: center; }

/* Crop Modal */
.ail-crop-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.ail-crop-dialog {
  background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  width: 90%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column;
}
.ail-crop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--accent); border-bottom: 2px solid var(--ink);
}
.ail-crop-header .section-title { margin: 0; font-size: 13px; font-weight: 800; }
.ail-crop-body {
  flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.ail-crop-canvas-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #1a1a1a; border: 2px solid var(--ink); min-height: 280px;
}
.ail-crop-canvas {
  width: 480px; height: 270px; /* 16:9 source */
  background: #333; position: relative; border: 2px solid #666;
}
}
.ail-crop-bg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #666; font-size: 14px;
}
.ail-crop-region {
  position: absolute; border: 2px dashed var(--accent); background: rgba(182, 255, 0, 0.15);
  cursor: move;
}
.ail-crop-handle {
  position: absolute; bottom: -8px; right: -8px;
  width: 16px; height: 16px; background: var(--accent); border: 2px solid var(--ink);
  cursor: nwse-resize;
}
.ail-crop-info { flex-shrink: 0; }
.ail-crop-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 2px solid #ddd;
}

/* Generic Modal */
.ail-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.ail-modal-dialog {
  background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  width: 90%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column;
}
.ail-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--accent); border-bottom: 2px solid var(--ink);
}
.ail-modal-header .section-title { margin: 0; font-size: 13px; font-weight: 800; }
.ail-modal-body {
  flex: 1; padding: 14px; overflow-y: auto;
}
.ail-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 2px solid var(--ink); background: #f8f8f8;
}

/* Shortcuts Grid */
.shortcuts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
}
.shortcuts-section { margin-bottom: 8px; }
.shortcuts-section h4 {
  margin: 0 0 8px 0; font-size: 12px; font-weight: 800;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;
  padding-bottom: 4px; border-bottom: 2px solid var(--ink);
}
.shortcut-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 11px;
}
.shortcut-row kbd {
  display: inline-block; padding: 2px 6px; font-size: 10px; font-family: monospace;
  background: #f0f0e8; border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: 1px 1px 0 var(--ink); min-width: 18px; text-align: center;
}
.shortcut-row span { margin-left: auto; color: #666; }

/* Snap Guides Visual */
.ail-snap-guide {
  position: absolute; background: #ff6b6b; z-index: 100; pointer-events: none;
}
.ail-snap-guide.vertical {
  width: 1px; top: 0; bottom: 0;
}
.ail-snap-guide.horizontal {
  height: 1px; left: 0; right: 0;
}

/* Selection Box (marquee) */
.ail-selection-box {
  position: absolute; border: 2px dashed var(--accent);
  background: rgba(182, 255, 0, 0.15); pointer-events: none; z-index: 200;
}

/* Grouped element indicator */
.ail-element.grouped { border-style: dashed; }

/* Responsive */
@media (max-width: 1000px) {
  .ai-layout-container { grid-template-columns: 160px 1fr 220px; }
}
@media (max-width: 800px) {
  .ai-layout-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .ail-left-panel { flex-direction: row; max-height: 140px; }
  .ail-list-card, .ail-layers-card { flex: 1; max-height: none; }
  .ail-canvas { width: 180px; height: 320px; }
}

/* ===== Modal Popup ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 90%;
  max-height: 90vh;
  overflow: auto;
}
.modal-head, .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  background: var(--accent);
}
.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid var(--ink);
  background: #fafafa;
}
.modal-title {
  font-weight: 700;
  font-size: 16px;
}
.modal-body {
  padding: 16px;
}
.modal-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.modal-dialog {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 90%;
  max-height: 90vh;
  overflow: auto;
}

/* Slot Time Picker */
.slot-section { margin-bottom: 16px; }
.slot-section:last-child { margin-bottom: 0; }
.slot-section-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.slot-section-hint { font-size: 11px; color: #666; margin-bottom: 8px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.slot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: var(--font-mono);
  border: 2px solid var(--ink); background: #fff; cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s; box-shadow: 2px 2px 0 var(--ink);
}
.slot-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.slot-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.slot-chip.active { background: var(--accent); }
.slot-chip.preset { background: #f5f5f5; border-style: dashed; }
.slot-chip.preset.used { opacity: 0.4; pointer-events: none; }
.slot-empty { font-size: 12px; color: #999; font-style: italic; padding: 8px 0; }
.slot-custom-row { display: flex; gap: 8px; align-items: center; }
.slot-custom-row input[type="time"] { 
  height: 36px; padding: 0 10px; font-size: 14px; font-family: var(--font-mono);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* Slot loading overlay */
.slot-loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
}
.slot-loading-box {
  background: var(--card); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-weight: 700; font-size: 14px;
}
.slot-loading-spinner {
  width: 32px; height: 32px; border: 4px solid var(--ink); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* API Detail Modal pre styles */
.api-detail-pre {
  background: #333; color: #eee; padding: 10px; overflow: auto; max-height: 120px;
  font-size: 10px; margin: 0; border: 2px solid var(--ink);
}
.api-detail-response {
  background: #1a1a2e; color: #0f0; max-height: 200px;
}


/* ============ DOWNLOAD VIDEO PAGE ============ */
#page-download .scroll-area {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.dl-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.dl-input-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: fit-content;
  max-height: 100%;
  overflow-y: auto;
}
#dl-urls {
  min-height: 150px;
  resize: vertical;
  font-size: 12px;
  font-family: monospace;
}
.dl-list-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 0;
  overflow: hidden;
}
.dl-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dl-table th,
.dl-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.dl-table th {
  background: #f5f5f5;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.dl-table tbody tr:hover {
  background: #fafafa;
}
.dl-table tbody tr.dragging {
  opacity: 0.5;
  background: var(--accent);
}
.dl-drag-handle {
  cursor: grab;
  color: var(--muted);
  width: 28px;
  text-align: center;
}
.dl-drag-handle:active {
  cursor: grabbing;
}
.dl-url {
  font-size: 10px;
  color: var(--muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-prefix-col {
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-ep-col,
.dl-part-col {
  text-align: center !important;
  font-size: 11px;
  font-weight: 600;
}
.dl-fix-col {
  text-align: center !important;
}
.dl-actions-col {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}
.dl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.dl-badge.pending {
  background: #eee;
  color: var(--muted);
}
.dl-badge.active {
  background: #e3f2fd;
  color: #1976d2;
}
.dl-badge.ok {
  background: #e8f5e9;
  color: #388e3c;
}
.dl-badge.warn {
  background: #fff3e0;
  color: #f57c00;
}
.dl-badge.error {
  background: #ffebee;
  color: #d32f2f;
}

/* Status badge untuk Video table */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #eee;
  color: var(--muted);
}
.status-badge.success {
  background: #e8f5e9;
  color: #388e3c;
}
.status-badge.error {
  background: #ffebee;
  color: #d32f2f;
}
.status-badge.active {
  background: #e3f2fd;
  color: #1976d2;
}
.status-cell-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.v-status-cell {
  white-space: nowrap;
}

/* Status badge untuk Jadwal table (upload multi-akun) */
.rz-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
}
.rz-status-badge.pending {
  background: #f5f5f5;
  color: var(--muted);
  border: 1px solid #ddd;
}
.rz-status-badge.done {
  background: #e8f5e9;
  color: #388e3c;
  border: 1px solid #a5d6a7;
}
.rz-status-badge.error {
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef9a9a;
}
.rz-status-badge.partial {
  background: #fff8e1;
  color: #f57c00;
  border: 1px solid #ffcc80;
}
.rz-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rz-retry-btn {
  padding: 0 4px;
  font-size: 12px;
  line-height: 18px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  color: var(--fg);
}
.rz-retry-btn:hover {
  background: var(--accent);
  border-color: var(--fg);
}
.rz-other-done {
  display: inline-block;
  padding: 0 4px;
  font-size: 9px;
  line-height: 16px;
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
  border-radius: 3px;
  cursor: default;
}

/* Row dengan jadwal terlewat */
.rz-past {
  opacity: 0.5;
}
.rz-past td {
  color: var(--muted) !important;
}
.rz-past-date {
  color: #d32f2f !important;
  font-weight: 600;
}

/* Input jadwal tidak valid */
.rz-invalid {
  border-color: #d32f2f !important;
  background-color: #ffebee !important;
}

/* Progress row di Jadwal - samakan tinggi */
#rz-prog-row {
  align-items: stretch;
}
#rz-prog-row .prog-wrap {
  height: 38px;
}
#rz-prog-row .btn {
  height: 38px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* Upload Settings Popup */
.rz-settings-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rz-settings-popup-content {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  width: 400px;
  max-width: 90vw;
}
.rz-settings-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  background: var(--accent);
}
.rz-settings-popup-body {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.rz-settings-popup-body .sub {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.rz-settings-popup-body .sub:first-child {
  margin-top: 0;
}
.rz-settings-popup-body .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rz-settings-popup-body .field {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}
.rz-settings-popup-body select,
.rz-settings-popup-body input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  font-size: 13px;
  background: #fff;
}
.rz-settings-popup-body .hint {
  font-size: 11px;
  color: var(--muted);
}
.rz-settings-popup-body .row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.rz-settings-popup-body .row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.rz-settings-popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid var(--ink);
  background: #f9f9f9;
}

.v-retry-btn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  min-width: 22px !important;
}
.v-retry-btn .ic {
  width: 14px;
  height: 14px;
}

.dl-progress-bar {
  width: 100%;
  height: 18px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.dl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #9ccc65);
  transition: width 0.3s ease;
}
.dl-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: #333;
}
.dl-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background: #fafafa;
}
.dl-row.downloading .dl-progress-fill,
.dl-row.converting .dl-progress-fill,
.dl-row.checking .dl-progress-fill,
.dl-row.fixing .dl-progress-fill {
  animation: dl-pulse 1.5s ease-in-out infinite;
}
@keyframes dl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
/* Fix Item */
.dl-fix-item {
  display: flex;
  align-items: center;
  font-size: 12px;
}

@media (max-width: 900px) {
  .dl-layout {
    grid-template-columns: 1fr;
  }
}



/* ===== HTML Preview Modal ===== */
.html-preview-modal .rzp-thumb-dialog {
  display: flex;
  flex-direction: column;
}
.html-preview-modal .rzp-thumb-body {
  background: #fff;
}
.html-preview-iframe {
  background: #fff;
}

/* Menu Direktori (file browser) — tombol aksi ringkas di dalam tabel */
.btn.btn-sm { height: 28px; padding: 2px 8px; }
.btn.btn-sm .ic { width: 15px; height: 15px; }
#fb-table td, #fb-table th { padding: 7px 10px; }
#fb-table a.fb-dir { color: var(--ink); text-decoration: none; font-weight: 700; }
#fb-table a.fb-dir:hover { text-decoration: underline; }
#fb-breadcrumb { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.fb-path { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 38px; box-sizing: border-box; border: 2px solid var(--ink); background: #fafaf6; box-shadow: 3px 3px 0 var(--ink); }
.fb-path .hint, .fb-path code { margin: 0; line-height: 1; font-weight: 700; }
.fb-path code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#fb-table tr.fb-parent td { background: #f4f2ea; font-weight: 700; }
#fb-table tr.fb-parent a { color: var(--ink); text-decoration: none; }

/* ===== Overlay Autentikasi (mode server) ===== */
#auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  /* Latar dot-grid IDENTIK dengan body/dashboard (warna, ukuran titik, jarak). */
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-box {
  width: 100%; max-width: 380px; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  border-radius: 10px; padding: 24px;
}
.auth-brand { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.auth-sub { font-size: 13px; color: #666; margin: 2px 0 18px; }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-label { font-size: 12px; font-weight: 700; margin-top: 8px; }
.auth-input {
  height: 38px; box-sizing: border-box; border: 2px solid var(--ink);
  border-radius: 6px; padding: 0 10px; font-size: 14px; background: #fff;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-submit { height: 42px; margin-top: 16px; font-weight: 800; }
/* Baris dua tombol (mis. Kembali + Aktifkan): margin ada di BARIS, bukan di tombol,
   dan semua tombol sama tinggi. (Margin di salah satu tombol membuat tombol lain
   ikut terentang oleh align-items: stretch → tinggi tak sama.) */
.auth-actions { display: flex; gap: 8px; margin-top: 16px; }
.auth-actions .btn { height: 42px; margin-top: 0; justify-content: center; }
.auth-actions .auth-submit { flex: 1; }
.auth-err { color: #c62828; font-size: 12px; min-height: 16px; margin-top: 6px; }
.auth-enroll-hint { font-size: 12px; color: #555; margin-bottom: 12px; line-height: 1.5; }
.auth-qr { display: flex; justify-content: center; margin: 8px 0; }
.auth-qr svg { width: 200px; height: 200px; border: 2px solid var(--ink); }
.auth-secret { font-size: 11px; color: #777; text-align: center; margin: 8px 0; word-break: break-all; }
.auth-secret code { font-family: var(--font-mono); background: #f0f0f0; padding: 2px 4px; }
.auth-role-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border: 1px solid var(--ink); border-radius: 10px; background: var(--accent); color: var(--ink);
}
/* ===== Pengaturan > Akun (kelola pengguna) ===== */
.akun-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.akun-head-text { flex: 1; min-width: 220px; }
.akun-table-wrap { overflow-x: auto; border: 2px solid var(--ink); background: #fff; }
#akun-table { min-width: 700px; }
#akun-table td, #akun-table th { padding: 8px 6px; }
#akun-table th { font-size: 10px; letter-spacing: 0; }
/* Kolom Aksi menempel di kanan: tombol selalu terlihat walau tabel perlu digulir (layar sempit). */
#akun-table th.akun-th-act, #akun-table td.akun-td-act {
  text-align: right; white-space: nowrap; position: sticky; right: 0; background: #fff;
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .35);
}
.akun-name { font-weight: 800; }
#akun-table td.akun-email { font-family: var(--font-mono); font-size: 10.5px; white-space: normal; word-break: break-all; min-width: 140px; }
/* Tombol aksi berikon. Akar bug "ikon turun ±2px": .icon-btn.small mengecilkan kotak .ic jadi 14px, tetapi
   svg di dalamnya tetap setinggi 18px (aturan .ic svg) → svg 14x18 menjorok ke bawah dari kotaknya dan
   gambar yang dipusatkan di dalamnya ikut turun. Di sini kotak .ic & svg dibuat SAMA BESAR (16px) dan
   tombol dipusatkan tanpa padding. Ditaruh khusus tabel Akun agar tombol lain tidak bergeser. */
#akun-table .akun-act { width: 28px; height: 28px; padding: 0; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--ink); }
#akun-table .akun-act .ic { width: 16px; height: 16px; flex: none; }
#akun-table .akun-act .ic svg { width: 16px; height: 16px; flex: none; display: block; }
/* Gambar pensil & kunci tidak simetris di kotak 24x24-nya (pensil condong kiri-bawah, kunci condong ke atas),
   jadi diimbangi ±0,67px (=1 satuan viewBox pada 16px) agar tampak di tengah. Terukur dari piksel. */
#akun-table .akun-edit .ic svg { transform: translate(.67px, -.67px); }
#akun-table .akun-pw .ic svg { transform: translateY(.67px); }
.akun-act + .akun-act { margin-left: 4px; }
.akun-role-operator { background: #ffe27a; }
.akun-role-viewer { background: #fff; }
.akun-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.akun-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.akun-legend .ic, .akun-legend .ic svg { width: 14px; height: 14px; }
input.akun-readonly { background: #f2f2ee; color: #555; cursor: not-allowed; }
.akun-me { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; background: var(--accent); border: 1px solid var(--ink); }
.akun-last-rel { font-size: 11px; color: var(--muted); }

/* Dialog Tambah Akun (memakai .ail-modal; <form> membungkus body+footer jadi harus ikut flex) */
.akun-dialog { max-width: 460px; }
.akun-step { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.akun-err { min-height: 16px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #c62828; }
.akun-invalid, .akun-invalid:focus { border-color: #c62828 !important; }
.akun-ok { font-weight: 800; color: #1a7f37; margin-bottom: 10px; }
.akun-cred { margin: 0; padding: 12px; background: var(--card-dark); color: var(--accent); border: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ===== Dialog konfirmasi umum ===== */
.cfm-dialog { max-width: 440px; }
.cfm-msg { font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.cfm-detail { margin: 12px 0 0; border: 2px solid var(--ink); background: #fafaf6; }
.cfm-detail > div { display: flex; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #e2e0d8; }
.cfm-detail > div:last-child { border-bottom: 0; }
.cfm-detail dt { flex: 0 0 56px; padding-top: 1px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.cfm-detail dd { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.cfm-danger .ail-modal-header { background: #ffb3b0; }

/* ===== Dialog "Akun Saya" ===== */
.acct-dialog { max-width: 480px; }
.acct-profile { display: flex; align-items: center; gap: 12px; }
.acct-avatar { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.acct-id { flex: 1; min-width: 0; }
.acct-name { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.acct-email { font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.acct-role-desc { margin: 10px 0 0; }
.acct-rows { margin: 12px 0 0; border: 2px solid var(--ink); }
.acct-rows > div { display: flex; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #e2e0d8; }
.acct-rows > div:last-child { border-bottom: 0; }
.acct-rows dt { flex: 0 0 118px; padding-top: 1px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.acct-rows dd { flex: 1; min-width: 0; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.acct-rel { font-size: 11px; color: var(--muted); }
.acct-perm-title { margin: 14px 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.acct-perms { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.acct-perms li { display: flex; gap: 8px; font-size: 13px; }
.acct-mark { flex: 0 0 14px; font-weight: 800; text-align: center; }
.acct-perms li.on .acct-mark { color: #1a7f37; }
.acct-perms li.off { color: var(--muted); }
.acct-perms li.off .acct-mark { color: #b0aea6; }
.acct-footer { flex-wrap: wrap; }
.acct-footer #acct-logout { margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   RESPONSIVE (laptop sempit · tablet · HP)
   Semua aturan di bawah HANYA berlaku di dalam media query, jadi tampilan
   desktop (>1280px) TIDAK berubah.
   Breakpoint:
     ≤1280px : laptop sempit — sidebar & panel samping dirampingkan
     ≤1024px : tablet — sidebar jadi drawer (tombol hamburger), layout
               multi-kolom ditumpuk vertikal, halaman bisa di-scroll
     ≤640px  : HP — padding ringkas, toolbar membungkus, input 16px
   Aturan blok ini sengaja ditaruh PALING AKHIR agar menimpa aturan lama.
   ===================================================================== */
.nav-toggle, .nav-backdrop { display: none; }

@media (max-width: 1280px) {
  .app { grid-template-columns: 216px minmax(0, 1fr); }
  .video-layout { grid-template-columns: minmax(0, 1fr) 300px 260px; gap: 12px; }
  .cv-container { grid-template-columns: 180px minmax(0, 1fr) 230px; gap: 12px; }
  .ai-layout-container { grid-template-columns: 170px minmax(0, 1fr) 220px; }
  .dl-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .schedule-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .sched2 { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 1024px) {
  body, .app { height: 100vh; height: 100dvh; }
  .app { grid-template-columns: minmax(0, 1fr); }

  /* ---- Sidebar → drawer geser dari kiri ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    width: min(300px, 86vw); padding: 10px 12px 10px 10px;
    transform: translateX(-110%); transition: transform .22s ease;
  }
  body.nav-open .sidebar { transform: none; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 200;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    background: var(--accent); color: var(--ink);
    border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  }
  .nav-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .nav-toggle .ic { width: 22px; height: 22px; }
  .content { padding: 64px 10px 12px 10px; }

  /* ---- Halaman multi-kolom: halaman bisa di-scroll, layout ditumpuk ---- */
  .page.active:not(.scroll-col),
  #page-video.active { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

  .video-layout { grid-template-columns: minmax(0, 1fr); height: auto; padding-bottom: 12px; }
  .video-layout .col { max-height: none; }
  .video-layout .vtable.scrollable { flex: none; max-height: 55vh; }
  .settings-panel { flex: none; }
  .preview-tall { flex: none; width: min(100%, 320px); margin-inline: auto; max-height: none; }

  .cv-container, .ai-layout-container, .schedule-layout, .sched2, .dl-layout,
  .aic-step2-layout, .rzp-layout, .set2, .dash-top, .dash-bottom {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
  }
  .cv-container, .ai-layout-container { flex: 0 0 auto; }
  .rzp-chat-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  /* Pengaturan: seluruh halaman yang scroll, jadi daftar tile (termasuk "Akun" di bawah)
     tampil utuh — bukan terpotong di kartu submenu bertinggi terbatas. */
  #page-settings { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #page-settings .set2 { flex: none; }
  #page-settings .set2-menu { overflow: visible; }
  /* Download: seluruh halaman yang scroll (bukan panel kiri yang terjepit) */
  #page-download .scroll-area { overflow-y: auto; display: block; }
  .dl-layout { flex: none; }
  .dl-input-card { max-height: none; overflow: visible; height: auto; }
  .dl-list-card { min-height: 360px; }
  #page-calendar .card.cal-container { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .aic-panels-row { grid-template-columns: minmax(0, 1fr); }
  .ail-left-panel { flex-direction: row; max-height: 160px; }
}

@media (max-width: 640px) {
  .content { padding: 62px 8px 10px 8px; }
  .btn { padding: 9px 12px; }

  /* Cegah auto-zoom iOS saat fokus input (font <16px memicu zoom) */
  input[type=text], input[type=number], input[type=password], input[type=date],
  input[type=time], input[type=email], input[type=url], select, textarea { font-size: 16px; }

  /* Toolbar & header kartu membungkus agar tombol tidak terpotong */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .card.dark > .row, .card.dark .row { flex-wrap: wrap; gap: 8px; }
  /* Baris tombol/field membungkus ke baris berikutnya alih-alih terpotong */
  .row, .dl-actions { flex-wrap: wrap; }
  .dl-actions > .row { flex: 1 1 100% !important; }

  /* Blok judul header halaman: satu baris penuh, tombol aksi turun ke bawahnya */
  .card.dark .row > div[style*="flex:1"] { flex: 1 1 100% !important; }
  .folder-label { flex-basis: 100%; order: 5; }

  .grid2, .pv-info-grid, .cv-props-section .grid2, .ail-props-section .grid2,
  .rz-settings-popup-body .grid2 { grid-template-columns: minmax(0, 1fr); }

  /* Dialog Akun Saya: label di atas nilai agar tidak sesak */
  .acct-rows > div { flex-direction: column; gap: 2px; }
  .acct-rows dt { flex-basis: auto; }

  /* Tabel akun → kartu per akun (kolom Aksi yang menempel terlalu memakan lebar di HP) */
  #akun-table { min-width: 0; }
  #akun-table thead { display: none; }
  #akun-table, #akun-table tbody, #akun-table tr, #akun-table td { display: block; width: 100%; }
  #akun-table tr { padding: 10px 12px; border-bottom: 2px solid var(--ink); }
  #akun-table tr:last-child { border-bottom: 0; }
  #akun-table td { padding: 3px 0; border: 0; white-space: normal; text-align: left; }
  #akun-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 118px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
  #akun-table td[data-label="Nama"]::before, #akun-table td[data-label="Aksi"]::before { display: none; }
  #akun-table td[data-label="Nama"] { font-size: 14px; padding-bottom: 4px; }
  #akun-table td.akun-email, #akun-table td.akun-last { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; min-width: 0; }
  #akun-table td.akun-td-act { position: static; box-shadow: none; text-align: left; margin-top: 8px; background: transparent; }

  #toast-wrap { left: 10px; right: 10px; top: 10px; }
  .log-dialog { height: 82vh; }
  .ail-modal-dialog, .tl-dialog { width: calc(100% - 16px); max-height: 92vh; }
  .auth-box { padding: 18px; }
}

/* ===== Direktori: seleksi, klik baris, menu klik-kanan ===== */
#fb-tbody tr[data-i] { cursor: pointer; user-select: none; }
#fb-tbody tr.fb-parent { cursor: pointer; user-select: none; }
#fb-tbody tr:hover td { background: #f9f9f5; }
#fb-tbody tr.selected td { background: rgba(182, 255, 0, .22); }
#fb-tbody tr.fb-parent:hover td { background: #ecead9; }
.fb-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 2px solid var(--ink); background: rgba(182, 255, 0, .25); }
.fb-bulk b { margin-right: 4px; font-size: 13px; }
.fb-ctx { position: fixed; z-index: 999; }
.fb-ctx .cap-ctx-item[disabled] { opacity: .4; cursor: default; }
.fb-ctx .cap-ctx-item[disabled]:hover { background: none; }

/* Kolom checkbox & ikon dibuat ramping; kolom Nama mengambil sisa lebar. */
#fb-table { table-layout: fixed; }
#fb-table th:nth-child(1), #fb-table td:nth-child(1) { width: 34px; padding-left: 8px; padding-right: 0; text-align: center; }
#fb-table th:nth-child(2), #fb-table td:nth-child(2) { width: 28px; padding-left: 2px; padding-right: 2px; text-align: center; }
#fb-table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
#fb-table td .ic { vertical-align: middle; }
#fb-table th:nth-child(4) { width: 110px; text-align: right; }
#fb-table th:nth-child(5) { width: 160px; }
#fb-table th:nth-child(6) { width: 130px; text-align: right; }

/* ===== Dialog Pilih Folder (server): gaya sama dengan halaman Direktori ===== */
.fbp-dialog { max-width: 620px; width: 94vw; }
.fbp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fbp-toolbar .fb-path { min-width: 140px; }
.fbp-list { max-height: 340px; min-height: 120px; overflow: auto; border: 2px solid var(--ink); background: #fff; }
.fbp-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e2e0d8; cursor: pointer; font-size: 13px; font-weight: 700; user-select: none; }
.fbp-row:last-child { border-bottom: 0; }
.fbp-row:hover, .fbp-row:focus-visible { background: rgba(182, 255, 0, .22); outline: none; }
.fbp-row.parent { background: #f4f2ea; }
.fbp-row.parent:hover { background: #ecead9; }
.fbp-row .ic, .fbp-row .ic svg { width: 16px; height: 16px; flex: none; }
.fbp-row .fbp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 12px; }
.fbp-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbp-footer .hint { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* ===== Monitor suhu (halaman Video, mode server) ===== */
.thermal-card { padding: 12px 14px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.th-head { display: flex; align-items: center; gap: 8px; }
.th-chip { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 10px; border: 2px solid var(--ink); background: #fff; text-transform: uppercase; }
.th-chip.ok { background: var(--accent); }
.th-chip.warm { background: #ffe27a; }
.th-chip.hot { background: #ffb3b0; }
.th-chip.wait { background: #ff9d5c; }
.th-main { display: flex; align-items: center; gap: 14px; }
.th-temp { display: flex; align-items: baseline; gap: 2px; min-width: 84px; font-family: var(--font-head); }
.th-temp b { font-size: 30px; line-height: 1; font-weight: 800; }
.th-temp span { font-size: 14px; font-weight: 800; }
.th-gauge { position: relative; flex: 1; height: 16px; border: 2px solid var(--ink); background: #fff; }
.th-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .4s, background .4s; }
.th-fill.warm { background: #ffe27a; }
.th-fill.hot { background: #ff7a70; }
.th-mark { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed var(--ink); }
.th-mark-high { border-left-style: solid; }
.th-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.th-legend b { color: var(--ink); }
.th-msg { margin: 0; min-height: 16px; }
#th-bypass { align-self: flex-start; }
#th-bypass:disabled { opacity: .45; cursor: not-allowed; }
#th-bypass:not(:disabled) { background: var(--accent); }