/* TOKENS */
:root{
  --primary:#4361ee; --primary-600:#3f37c9; --accent:#4895ef;
  --ink:#222; --ink-2:#444; --ink-3:#666;
  --g50:#f8fafc; --g100:#f3f5f9; --g200:#e7ebf3; --g300:#d7dce5;
  --ok:#22c55e; --err:#ef4444;
  --radius:12px; --shadow:0 10px 24px rgba(16,24,40,.06);
  --t:all .2s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font:400 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--ink); background:var(--g50);
}
.app{max-width:1100px;margin:0 auto;padding:20px}

/* HEADER */
.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.brand h1{font-size:26px;color:var(--primary);line-height:1.2}
.subtitle{color:var(--ink-3);font-size:13px;margin-top:6px}
.quick-actions{display:flex;gap:10px}
.ghost-btn{
  display:inline-flex;gap:8px;align-items:center;padding:8px 12px;background:#fff;
  border:1px solid var(--g200);border-radius:10px;cursor:pointer;color:var(--ink-2);transition:var(--t)
}
.ghost-btn:hover{background:var(--g100)}

/* TABS */
.tabs{display:flex;gap:10px;justify-content:center;margin:14px 0 16px}
.tab-btn{
  padding:9px 14px;background:#fff;border:1.5px solid var(--g200);border-radius:12px;
  color:var(--ink-2);font-weight:700;display:flex;align-items:center;gap:8px
}
.tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.tab-content{display:none}
.tab-content.active{display:block}

/* UPLOAD */
.upload-card{background:#fff;border:1px solid var(--g200);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.upload-area{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:26px;border:2px dashed var(--g300);border-radius:14px;background:#fff;transition:var(--t);cursor:pointer
}
.upload-area:hover{border-color:var(--primary)}
.upload-area.dragover{background:#f2f5ff;border-color:var(--primary)}
.upload-area i{font-size:36px;color:var(--ink-3);margin-bottom:6px}
.upload-area span{font-size:12px;color:var(--ink-3)}
.selected-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.file-item{position:relative;width:100px;height:100px;border-radius:10px;overflow:hidden;border:1px solid var(--g200)}
.file-item img,.file-item video{width:100%;height:100%;object-fit:cover}
.file-remove{
  position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:999px;
  width:22px;height:22px;display:grid;place-items:center;font-size:11px;cursor:pointer
}

/* SELECTIONS */
.selection-container{background:var(--g100);border:1px solid var(--g200);border-radius:12px;padding:12px;margin:12px 0}
.selection-container h4{font-size:13px;margin-bottom:8px;color:#111827}
.selection-row{display:flex;gap:10px;flex-wrap:wrap}
.selection-group{flex:1 min(320px,100%)}
.selection-group label{display:block;font-size:12px;margin-bottom:6px;color:#475569}
.selection-group select, .form-group input, .form-group textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--g200);border-radius:10px;background:#fff;font-size:14px;outline:none
}
.selection-group select:focus, .form-group input:focus, .form-group textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.12)
}

/* BUTTONS */
.primary-btn,.secondary-btn,.tertiary-btn,.success-btn,.accent-btn{
  display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;cursor:pointer;transition:var(--t);font-weight:700
}
.primary-btn{background:var(--primary);color:#fff;padding:11px 14px}
.primary-btn:hover{background:var(--primary-600)}
.secondary-btn{background:#e9eefc;color:#2b3b8f;padding:10px 14px}
.tertiary-btn{background:#eef2f7;color:#334155;padding:10px 14px}
.success-btn{background:var(--ok);color:#fff;padding:10px 14px}
.accent-btn{background:var(--accent);color:#fff;padding:11px 14px}
.w-full{width:100%}

/* RESULTS CONTAINER */
.result-container{background:#fff;border:1px solid var(--g200);border-radius:14px;padding:14px;box-shadow:var(--shadow);margin-top:14px}
.result-container h2{font-size:17px;color:var(--primary);text-align:center;margin-bottom:8px}
.loading{text-align:center;padding:16px}
.spinner{width:36px;height:36px;border:4px solid #eaeef5;border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

.result-navigation{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 10px}
.nav-btn{
  background:var(--accent);color:#fff;border:0;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer
}
.nav-btn:disabled{background:#c7d1ea;cursor:not-allowed}
#result-counter{font-weight:700;color:#2b3b8f}

/* PROGRESS LOG */
.progress-log{
  background:#f8fafc;border:1px solid var(--g200);border-radius:12px;padding:12px;margin-top:16px;display:none
}
.progress-log h4{
  font-size:14px;color:var(--primary);margin-bottom:8px;display:flex;align-items:center;gap:6px
}
.progress-log h4::before{
  content:'📊';font-size:16px
}
.progress-log.show{
  display:block
}
.progress-list{display:flex;flex-direction:column;gap:6px}
.progress-item{
  background:#fff;border:1px solid var(--g200);border-radius:8px;padding:8px 10px;transition:var(--t);animation:slideIn 0.3s ease-out
}
@keyframes slideIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.progress-status{
  display:flex;align-items:center;gap:8px;font-size:13px
}
.progress-status i{font-size:14px}
.progress-status.success{color:var(--ok)}
.progress-status.error{color:var(--err)}
.progress-status i.fa-spinner{color:var(--accent)}
.retry-btn{
  background:var(--accent);color:#fff;border:0;border-radius:6px;padding:4px 8px;margin-left:8px;cursor:pointer;font-size:12px;transition:var(--t)
}
.retry-btn:hover{background:var(--primary-600)}

/* ADS BLOCKS (super compact) */
.ads-group{margin-bottom:10px}
.ads-section{padding:8px 10px;border:1px dashed var(--g200);border-radius:10px;background:#fbfdff}
.ads-row{display:flex;gap:8px;align-items:flex-start}
.ads-number{font-weight:700;color:var(--accent);min-width:18px;user-select:none}
.ads-title,.ads-body{flex:1}

/* Box judul & isi yang tingginya pas */
.ads-title-box, .ads-body-box{
  border:1px solid var(--g200);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
}
.ads-title-box h3, .ads-title-box h4{
  margin:0;font-size:14px;line-height:1.25;color:#0f1c5a;cursor:pointer;word-wrap:break-word;
}
.ads-body-box p{
  margin:0;font-size:13px;line-height:1.35;color:#1f2937;cursor:pointer;white-space:pre-wrap;word-wrap:break-word;
}

/* jarak antar variasi minimal */
.ads-section + .ads-section{margin-top:8px}

/* VIDEO LIST */
.video-results{display:flex;flex-direction:column;gap:8px}
.video-item{border:1px dashed var(--g200);border-radius:10px;padding:8px 10px;background:#fbfdff}

/* MANAGEMENT */
.management-container{display:grid;gap:14px}
.management-section{background:#fff;border:1px solid var(--g200);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.management-section h3{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.management-form{margin-bottom:10px}
.items-list h4{margin-bottom:8px}
.item-card{background:#fbfdff;border:1px dashed var(--g200);border-radius:10px;padding:10px;margin-bottom:8px}
.item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.delete-btn{background:var(--err);color:#fff;border:0;border-radius:8px;padding:6px 10px;cursor:pointer}
.delete-btn:hover{filter:brightness(.95)}
.loading-items{text-align:center;color:#6b7280;padding:8px}

/* TOASTS & ERROR */
.copy-success{
  position:fixed;top:18px;right:18px;background:var(--ok);color:#fff;padding:9px 12px;border-radius:10px;box-shadow:var(--shadow);z-index:1000;font-weight:700
}
.error-message{
  background:#fff3f3;border:2px solid #ffcdd2;border-radius:12px;padding:16px;text-align:center;margin:10px 0
}
.error-message i{font-size:32px;color:var(--err);margin-bottom:6px}

/* UTIL */
.stack{display:flex;flex-direction:column}
.gap-12{gap:12px}
.app-footer{text-align:center;margin:20px 0 8px;color:#6b7280}

/* TRANSCRIPT textarea rapi + focus */
#transcript-editor{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1.5px solid var(--g200);
  border-radius: 10px;
  background: #fff;
}
#transcript-editor:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67,97,238,.12);
}

/* RESPONSIVE */
@media (max-width:768px){
  .app{padding:14px}
  .app-header{flex-direction:column;align-items:flex-start}
  .tabs{flex-wrap:wrap}
}