:root{
  --bg:#0b0f17;
  --panel:#131a2b;
  --panel2:#0e1524;
  --line:#26314e;
  --line2:#35436b;
  --txt:#eceef5;
  --muted:#98a0b5;
  --accent:#6366f1;
  --accent2:#22d3ee;
  --accent3:#a78bfa;
  --r-lg:16px; --r-md:11px; --r-sm:8px;
  --shadow:0 12px 32px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(1000px 520px at 14% -12%, #1a2238 0%, transparent 58%),
    radial-gradient(900px 520px at 92% -4%, #11203c 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  min-height:100vh;
}

/* scrollbar tipis biar panel kanan scroll-nya nyaman */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3550;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3d4d74;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* fokus keyboard tetap keliatan (friendly + accessible) */
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
::selection{background:rgba(99,102,241,.4)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

header{padding:22px 24px 6px; display:flex; gap:14px; align-items:flex-start; animation:fadeUp .4s ease both}
.logo{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 22px rgba(99,102,241,.40), inset 0 1px 0 rgba(255,255,255,.28);
}
header h1{font-size:1.5rem; letter-spacing:.2px; margin:0; line-height:1.15}
header h1 span{
  background:linear-gradient(90deg,var(--accent3),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header p{color:var(--muted); margin:5px 0 0; max-width:820px; font-size:.9rem; line-height:1.55}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:16px;
  padding:14px 24px 28px;
  align-items:start;            /* penting supaya preview-panel bisa sticky */
  animation:fadeUp .45s ease both;
}

/* ---------- PREVIEW (sticky: selalu keliatan saat scroll panel kanan) ---------- */
.preview-panel{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  position:sticky;
  top:14px;
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  padding:2px;                  /* biar shadow/border gak kepotong */
}

.canvas-wrap{
  position:relative;
  /* checkerboard halus: area transparan jadi keliatan, kaya tool gambar pada umumnya */
  background:
    linear-gradient(45deg,#1a2132 25%,transparent 25%),
    linear-gradient(-45deg,#1a2132 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1a2132 75%),
    linear-gradient(-45deg,transparent 75%,#1a2132 75%),
    #10151f;
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; justify-content:center; align-items:center;
  min-height:320px;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.canvas-wrap:hover{border-color:var(--accent); box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.35)}
.canvas-wrap.dragover{border-color:var(--accent2)}
#stage{max-width:100%; max-height:60vh; display:block}

.drop-overlay{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  text-align:center; padding:20px;
  color:#fff; font-weight:600; font-size:1.05rem;
  background:rgba(34,211,238,.18);
  border:3px dashed var(--accent2);
  border-radius:12px;
  pointer-events:none;
}
.canvas-wrap.dragover .drop-overlay{display:flex}

.transport{
  display:flex; align-items:center; gap:10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px;
  flex-wrap:wrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.transport input[type=range]{flex:1; min-width:140px}
#timeLabel{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:.82rem; font-weight:600;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:99px;
  padding:4px 12px;
  min-width:112px; text-align:center;
}

.upload-row{display:flex; gap:10px; flex-wrap:wrap}
.upload-row .btn{flex:1; min-width:170px; justify-content:center; text-align:center}

/* ---------- BUTTONS ---------- */
.btn{
  background:var(--accent);
  color:#fff;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:9px 15px;
  font-size:.87rem; font-weight:650;
  cursor:pointer;
  transition:transform .12s, box-shadow .18s, filter .15s, background .15s;
  box-shadow:0 3px 10px rgba(99,102,241,.30);
}
.btn:hover{filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 7px 18px rgba(99,102,241,.42)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn-sec{
  background:var(--panel2);
  border-color:var(--line);
  color:var(--txt);
  box-shadow:none;
}
.btn-sec:hover{background:#182036; border-color:var(--line2); box-shadow:none}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 16px rgba(99,102,241,.40);
}
.btn-primary:hover{box-shadow:0 10px 26px rgba(34,211,238,.35)}

/* ---------- CONTROLS ---------- */
.controls-panel{display:flex; flex-direction:column; gap:12px; min-width:0}

details{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:0 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s;
}
details:hover{border-color:var(--line2)}
details summary{
  cursor:pointer; user-select:none;
  padding:13px 0;
  font-weight:700; font-size:.95rem;
  list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ "; color:var(--accent2)}
details[open] summary::before{content:"▾ "}
details > *:not(summary){margin-bottom:13px}

select, input[type=number]{
  background:var(--panel2);
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:8px 10px;
  font-size:.85rem;
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
select:hover, input[type=number]:hover{border-color:var(--line2)}
select:focus, input[type=number]:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.20); outline:none}
input[type=color]{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:4px;
  height:38px;
  width:100%;
  cursor:pointer;
  transition:border-color .15s;
}
input[type=color]:hover{border-color:var(--line2)}

.preset-row{display:flex; gap:8px; margin-top:6px}
.preset-row select{flex:1}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
.form-grid label{
  display:flex; flex-direction:column; gap:5px;
  font-size:.78rem; color:var(--muted); font-weight:600;
}

/* ---------- EFFECT CARDS ---------- */
.effect-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:11px 12px;
  margin-top:10px;
  opacity:.55;
  transition:opacity .2s, border-color .2s, box-shadow .2s;
}
.effect-card.active{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(99,102,241,.30), 0 6px 18px rgba(99,102,241,.18);
}
.effect-head{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:.9rem;
  cursor:pointer;
}
.effect-head input{accent-color:var(--accent2); width:16px; height:16px; cursor:pointer}
.effect-desc{color:var(--muted); font-size:.75rem; margin:4px 0 8px}
.effect-params{display:flex; flex-direction:column; gap:8px}
.param{display:flex; flex-direction:column; gap:3px}
.param-label{font-size:.72rem; color:var(--muted); font-weight:600}
.param-row{display:flex; align-items:center; gap:8px}
.param-row select{padding:5px 8px; font-size:.8rem}
.param-row input[type=range]{flex:1}
.param-val{
  font-size:.75rem; min-width:44px; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--txt);
}

/* ---------- RANGE SLIDERS (cross-browser, pure CSS) ---------- */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:99px;
  background:#232d47;
  outline:none; cursor:pointer;
  transition:background .15s;
}
input[type=range]:hover{background:#2c395a}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.50);
  cursor:grab; transition:box-shadow .15s, transform .1s;
}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 0 5px rgba(99,102,241,.25)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12); cursor:grabbing}
input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.50); cursor:grab;
}
input[type=range]::-moz-range-track{height:6px; border-radius:99px; background:transparent}
/* Firefox: bagian yang sudah dilewati dikasih gradien accent */
input[type=range]::-moz-range-progress{height:6px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ---------- REMOVE BG ---------- */
.bg-info{color:var(--muted); font-size:.75rem; line-height:1.45; margin:6px 0 10px}
.bg-row{display:flex; gap:8px; flex-wrap:wrap}
.bg-row .btn{flex:1; min-width:100px; justify-content:center; text-align:center; padding:7px 8px; font-size:.8rem}
.check-row{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--txt); margin-top:12px; cursor:pointer}
.check-row input{accent-color:var(--accent); width:16px; height:16px; cursor:pointer}

/* ---------- BACKGROUND IMAGE ---------- */
.bg-image-row{display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.bg-image-row[hidden]{display:none}   /* atribut hidden harus menang vs display:flex di atas */
.bg-upload-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bg-upload-row .btn{padding:6px 12px; font-size:.8rem}
.bg-filename{color:var(--muted); font-size:.75rem; word-break:break-all}

/* ---------- EXPORT ---------- */
.export-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.export-row .btn{flex:1; min-width:130px; justify-content:center; text-align:center}
.export-status{margin-top:8px; font-size:.8rem; color:var(--muted); min-height:1.2em}

/* ---------- EXPORT MODAL (popup proses export di tengah layar) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(4,6,12,.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .18s ease;
}
.modal-overlay[hidden]{display:none}   /* hidden harus menang vs display:flex */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:100%; max-width:380px;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.62);
  padding:26px 24px 22px;
  text-align:center;
  animation:popIn .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 6px; font-size:1.15rem}
.modal p{margin:0 0 16px; color:var(--muted); font-size:.86rem; min-height:1.3em}

/* spinner ring: ring yang berputar, emoji tetap tegak (counter-spin) */
.modal-spinner{
  position:relative; width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; border:3px solid var(--line2); border-top-color:var(--accent2);
  animation:spin .9s linear infinite;
}
.modal-spinner span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.4rem; animation:spin .9s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}
.modal.done .modal-spinner{animation:none; border-color:#10b981; border-top-color:#34d399}
.modal.error .modal-spinner{animation:none; border-color:#ef4444; border-top-color:#f87171}
.modal.done .modal-spinner span, .modal.error .modal-spinner span{animation:none}

.modal-bar{
  height:8px; border-radius:99px; overflow:hidden;
  background:var(--panel2); border:1px solid var(--line);
  margin-bottom:14px;
}
.modal-bar-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .12s linear;
}
.modal.done .modal-bar-fill{width:100%; background:linear-gradient(90deg,#10b981,#22d3ee)}
.modal-meta{font-size:.74rem; color:var(--muted); margin-bottom:16px; font-variant-numeric:tabular-nums}
.modal .btn{width:100%}

footer{
  padding:0 24px 26px;
  color:var(--muted);
  font-size:.78rem;
  text-align:center;
}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .preview-panel{position:static; max-height:none}
  header{flex-wrap:wrap}
  .upload-row .btn, .export-row .btn{min-width:0}
}