*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial;
  background:#0e1116;
  color:#eaeaea;
  height:100vh;
  overflow:hidden;
}

a{color:#ff9f1a;text-decoration:none}

.app{
  display:grid;
  grid-template-columns:320px 1fr;
  height:100vh;
}

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:68px;
  background:linear-gradient(180deg,#0f141d,#0b0e13);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid #1f2633;
  box-shadow:0 8px 18px rgba(0,0,0,.6);
  z-index:10;
}


.header-left{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* logo bebas */
.header-logo{
  position:absolute;
  left:0;
  top:-20px;
  height:125px;
  width:auto;
  pointer-events:none;
}

/* teks */
.header-title{
  padding-left:140px;
  font-weight:800;
  font-size:15px;
  color:#ffb347;
  line-height:1.1;
}

.header-progress{
  margin-left:140px;
  width:220px;
  height:6px;
  background:#1b2230;
  border-radius:6px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #2a3242;
}

.header-right{
  display:flex;
  align-items:center;
  gap:8px;
}


.status-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.status-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  background:#1b2230;
  box-shadow:inset 0 0 0 1px #2a3242;
  font-weight:800;
  white-space:nowrap;
}

.status-pill.idle{color:#5dade2; animation:pulse 1.6s infinite}
.status-pill.total{color:#f1c40f}
.status-pill.danger{color:#ff6b6b}
.status-pill.success{color:#2ecc71}
.btn-secondary.small{color:#ffb347}

@keyframes pulse{
  0%{opacity:.6}
  50%{opacity:1}
  100%{opacity:.6}
}

.panel{
  background:
    radial-gradient(1200px 300px at top, rgba(255,159,26,.06), transparent),
    linear-gradient(180deg,#141923,#0f131a);
  border-radius:14px;
  padding:12px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.6),
    inset 0 0 0 1px #1f2633;
}

.panel.left{
  margin:8px 0 10px 10px;
  height:calc(100vh - 20px);
  border-radius:14px;
  z-index:150;
}

.left{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  padding:10px;
}

.left-scroll{
  flex:1;
  overflow-y:auto;
  padding-right:8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.panel.left ::-webkit-scrollbar{width:5px}
.panel.left ::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.panel.left ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.25);
  border-radius:10px;
}

.panel.right{
  margin-top:65px;
  margin-left:10px;
  height: calc(100vh - 90px);
  max-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-header{
  flex: 0 0 auto;
}

.table-wrap{
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* WAJIB */
.table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky header */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 20;

  background: #1e1e1e;
  box-shadow: 0 2px 0 rgba(255,255,255,0.05);
}

.right-wrap{
  display:flex;
  flex-direction:column;
  height:100vh;
}

.right-wrap header{
  flex:0 0 48px;
}

.main-right{
  flex:1;
  padding:12px;
  overflow:hidden;
}

.panel.right table{
  flex:0 0 auto;
}

.panel.right thead th{
  background:linear-gradient(180deg,#0f141d,#0b0e13);
  border-bottom:1px solid #2a3242;
  font-weight:700;
  font-size:13px;
}

.panel.right ::-webkit-scrollbar{
  width:6px;
}

.panel.right ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:6px;
}

.panel.right ::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.35);
}

.drop{
  border:1px dashed #2a3242;
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  background:#0f141d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.drop:hover{border-color:#ff9f1a}

#drop .drop-title{
  font-size:15px;
  font-weight:700;
}

#drop .drop-sub{
  font-size:13px;
  margin-top:2px;
  opacity:.85;
}

.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  box-shadow:inset 0 0 0 1px #1f2633;
}

.filter-group > label,
.group-title{
  text-align:center;
  font-weight:700;
  font-size:12px;
  color:#e6eaf2;
  margin-bottom:4px;
}

.filter-group > label,
.filter-group .fg > label{
  font-size:12px;
  font-weight:600;
  color:#cfd6e4;
  margin-bottom:2px;
}

.panel.left input{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  background:#0d1118;
  border:1px solid #232b3b;
  color:#fff;
}

.panel.left input:focus{
  outline:none;
  border-color:#ff9f1a;
  box-shadow:0 0 0 2px rgba(255,159,26,.2);
}

#bankProdukGroup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

#bankProdukGroup label{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  column-gap:8px;
  height:42px;
  padding:6px 10px;
  border-radius:10px;
  background:#0f141d;
  border:1px solid #1f2633;
  font-size:12px;
  color:#cfd6e4;
}

#bankProdukGroup input{
  margin:0;
  accent-color:#cfd6e4;
}

.perf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.perf-grid .fg{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.perf-grid .fg:not(.half){
  grid-column:1 / -1;
}

.preset-row{
  display:flex;
  gap:8px;
}

.preset-row button{
  width:42px;
  background:#1b2230;
  border-radius:10px;
}

.preset-row select{
  flex:1;
  background:#0d1118;
  border:1px solid #232b3b;
  color:#fff;
  border-radius:10px;
  padding:8px;
}

.action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:4px;
}

button{
  padding:10px;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}

button:hover{transform:translateY(-1px)}

.btn-main{
  grid-column:1/3;
  background:#ff9f1a;
  color:#000;
}

.btn-danger{background:#2a1313;color:#ff8a8a}

.btn-secondary{
  grid-column:1/3;
  background:#151b26;
  color:#ddd;
}

.export-menu{
  display:none;
  position:absolute;
  background:#1b2230;
  border:1px solid #2a3242;
  border-radius:10px;
  overflow:hidden;
  margin-top:6px;
  width:160px;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  z-index:50;
}

.export-menu div{
  padding:10px 14px;
  cursor:pointer;
  font-size:13px;
}

.export-menu div:hover{
  background:#ff9f1a;
  color:#000;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:10px;
  border-bottom:1px solid #1f2633;
}

th{
  cursor:pointer;
  color:#ffb347;
  position:sticky;
  top:0;
  background:#0b0e13;
}

td:nth-child(n+3){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

th:nth-child(2), td:nth-child(2){
  max-width:320px;
  width:320px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

tbody tr:not(.will-delete):nth-child(even){
  background:rgba(255,255,255,.015);
}

tbody tr:hover{background:#1b2230}

tr.will-delete{
  background:linear-gradient(
    90deg,
    rgba(255,80,80,.25),
    rgba(255,80,80,.08)
  );
  box-shadow:inset 4px 0 0 #ff5555;
}

.render-info{
  margin-top:8px;
  font-size:11px;
  color:#7f8a99;
  text-align:right;
  opacity:.85;
}
.header-left{
  margin-left:100x;  
}
header{
  padding-left:10px; 
}

.header-left{
  margin-left:320px;
}

.header-left{
  display:flex;
  align-items:center;
  gap:px;            
}


.header-logo{
  position:absolute;
  left:0;
  top:-20px;
  height:125px;   
  width:auto;
  pointer-events:none;
}

.header-title{
  position: relative;   
  left: -75px;            
  top: -2px;            

  padding-left:-10px;   
  font-weight:1000;
  font-size:19px;
  color:#ffb347;
  line-height:1.1;
}

.header-title{
  text-shadow: 0 0 6px rgba(255,179,71,0.35);
}


/* PROGRESS — PANJANG IKUT TEKS */
.header-progress{
  margin-left:-18px;    /* sejajar teks */
  width:185px;          
  height:6px;
  background:#1b2230;
  border-radius:6px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #2a3242;
}
.progress-bar {
  width: 0%;
}

#bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ffb347,#ff9f1a);
  transition:width .15s ease;
}

.header-logo{
  position:absolute;
  height:122px;

  top: -42px;  
  left: -50px;
}

/* icon kiri (download) */
.btn-icon{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #888;
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: .55;
}

.btn-icon:hover{
  opacity: 1;
  color: #ffb020;
}

/* ===== MODAL OVERLAY ===== */
#appModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#appModal[data-open="true"]{
  opacity: 1;
  pointer-events: auto;
}

/* ===== MODAL BOX (LEBIH BESAR & RAPI) ===== */
#appModal .modal-box{
  background:
    radial-gradient(700px 240px at top, rgba(255,159,26,.10), transparent),
    linear-gradient(180deg,#151b26,#0f131a);

  border-radius: 16px;
  padding: 26px 28px;        /* ⬅️ tambah napas */

  width: clamp(360px, 40vw, 520px);
  max-width: 90vw;

  min-height: 200px;         /* ⬅️ KUNCI UTAMA */
  max-height: 80vh;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 25px 70px rgba(0,0,0,.75),
    inset 0 0 0 1px #1f2633;

  transform: scale(.92);
  opacity: 0;
  transition: .25s ease;
}


#appModal[data-open="true"] .modal-box{
  transform: scale(1);
  opacity: 1;
}

/* ===== TEXT ===== */
#appModalText{
  font-size: 15px;
  line-height: 1.5;
  color: #eaeaea;

  flex: 1;                 /* ⬅️ ambil ruang sisa */
  overflow-y: auto;        /* aman kalau teks panjang */
  margin-bottom: 18px;
}

/* ===== BUTTON LAYOUT ===== */
#appModalBtns{
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: auto;        /* ⬅️ KUNCI UTAMA */
}

/* ===== DOWNLOAD (KIRI) ===== */
#appModalBtns .btn-icon{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #888;
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: .6;
}

#appModalBtns .btn-icon:hover{
  opacity: 1;
  color: #ffb020;
}

/* ===== GROUP KANAN ===== */
#appModalBtns .btn-group-right{
  display: flex;
  gap: 10px;
}

/* ===== BATAL ===== */
#appModalBtns .btn-secondary{
  background: #1b2230;
  color: #ddd;
  padding: 8px 14px;
}

/* ===== HAPUS (UTAMA) ===== */
#appModalBtns .btn-main{
  background: #ffb347;
  color: #000;
  font-weight: 700;
  padding: 8px 16px;
}