/* ===========================
   Twibbon PK264 — Clean CSS
   =========================== */

/* Tokens */
:root{
  --primary:#1961AE; --secondary:#E4E6EF;
  --warning:#FFA800; --danger:#F64E60;

  --white:#fff; --gray:#7E8299; --gray-dark:#3F4254;
  --panel-bg:#fff; --panel-border:#e9ecef;
  --shadow-soft:0 8px 24px rgba(0,0,0,.06);
  --radius:14px;

  --bg-body:#F3F6F9; --text-body:var(--gray-dark);
  --header-bg:#fff; --header-text:var(--gray-dark);

  --range-track:#E4E6EF; --range-fill:var(--primary);
  --stage-bg:#000;
}

/* Reset ringan */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-body); color:var(--text-body);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Header */
.twibbon-header{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:1rem 1.25rem; background:var(--header-bg); color:var(--header-text);
  border-bottom:1px solid var(--panel-border); box-shadow:var(--shadow-soft);
}
.twibbon-header h1{margin:0; font-size:1.4rem; font-weight:800}
.twibbon-header p{margin:.25rem 0 0; font-size:.95rem; opacity:.9}

/* Grid 3 kolom */
.twibbon-container-3{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;           /* kiri : tengah : kanan */
  gap:20px; max-width:1400px;
  margin:20px auto 28px; padding:0 16px;
  align-items:stretch;
}
.twibbon-container-3 > *{ min-width:0 }         /* cegah overflow children */

@media (min-width:1200px){
  .twibbon-container-3{ grid-template-columns:500px 1.2fr 1fr }
}
@media (max-width:1100px){
  .twibbon-container-3{ grid-template-columns:1fr 1fr }
  .twibbon-container-3 > .panel:last-child{ grid-column:1 / -1 } /* kolom kanan turun */
}
@media (max-width:768px){
  .twibbon-container-3{ grid-template-columns:1fr }
}

/* Panel & Preview card */
.panel,.twibbon-preview{
  background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:1.25rem; width:100%;
  display:flex; flex-direction:column; height:100%;
}
.small{font-size:.8rem; color:var(--gray); margin-bottom:.25rem}

/* Toolbar (search + filter) */
.toolbar{display:flex; gap:.6rem; align-items:center; margin:.25rem 0 1rem}
.toolbar .searchwrap{position:relative; flex:1}
.toolbar .searchwrap input{
  width:100%; padding:.65rem .9rem .65rem 2.25rem;
  border:1px solid #dcdfe4; border-radius:10px; background:#fff;
  font:inherit; outline:none;
}
.toolbar .searchwrap svg{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.6;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#2b6fff; color:#fff; border:none;
  padding:.6rem .9rem; border-radius:10px; font-weight:700; cursor:pointer;
}

/* Drawer kiri (filter) */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.2s}
.backdrop.show{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:320px; max-width:90vw;
  background:#fff; box-shadow:0 8px 40px rgba(0,0,0,.18);
  transform:translateX(-100%); transition:transform .25s ease;
  border-right:1px solid #e6e9ef; z-index:50; display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0) }
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eef1f6}
.drawer-body{padding:14px 16px;overflow:auto}
.drawer-footer{padding:12px 16px;border-top:1px solid #eef1f6;display:flex;gap:.6rem}
.btn-apply{background:#2b6fff;color:#fff;border:none;border-radius:10px;padding:.55rem .9rem;font-weight:700}
.btn-reset{background:#f2f4f8;border:1px solid #e6e9ef;border-radius:10px;padding:.55rem .9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:.35rem .75rem; border-radius:999px; border:1px solid var(--panel-border);
  background:#f6f8fb; color:var(--gray-dark); font-weight:700; font-size:.85rem; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{ background:#eef2f8 }
.chip[aria-pressed="true"]{ color:#2b6fff; background:#e7efff; border-color:#2b6fff }

/* Form controls */
label{display:block; margin-top:1rem; font-weight:600; font-size:.9rem; color:var(--gray-dark)}
.control{
  width:100%; height:44px; padding:.55rem .8rem; margin-top:.35rem;
  border:1px solid var(--secondary); border-radius:12px; background:var(--panel-bg);
  font-size:.95rem; line-height:1.25; color:var(--text-body);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.control:focus-visible{
  border-color:color-mix(in srgb,var(--primary) 70%,white);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent);
}
/* cross-browser select styling */
.select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%233F4254'><path d='M5 7l5 6 5-6z'/></svg>");
  background-repeat:no-repeat; background-position:right .7rem center; padding-right:2rem;
}
/* opsional: “static look” — non-interaktif tanpa mengubah warna */
.select.is-static{ pointer-events:none; background-image:none; }

/* Settings card */
.settings-card{border:1px solid var(--panel-border); border-radius:16px; background:#fff}
.settings-row{
  display:grid; grid-template-columns:160px 1fr auto; gap:12px; align-items:center;
  padding:14px 16px; border-top:1px solid #eef0f3;
}
.settings-row:first-child{border-top:none}
.settings-row .label{font-weight:600; color:#111827}
.settings-row .value{display:flex; align-items:center; gap:10px; min-height:38px}
.settings-row .hint{grid-column:2/span 2; font-size:.9rem; color:#6b7280; margin-top:-6px}
.inline-input{width:100%}
.edit-btn{
  width:32px;height:32px;border-radius:8px;border:none;background:#1d4ed8;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.edit-btn[hidden]{display:none}
.badge-soft{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#f3f4f6;color:#374151;font-weight:600}
.row-edit{grid-column:2/span 2; padding:0 16px 12px}
.row-edit[hidden]{display:none}
.settings-card .control{height:38px}

/* Name badge — multi-baris (max 2) & status warna */
#rowName .value{justify-content:center; flex-wrap:wrap}
#rowName .hint{ text-align:center; width:100% }
.name-box{
  display:inline-block; padding:4px 10px; border-radius:999px; font-weight:800; line-height:1.2;
  white-space:normal; word-break:break-word; text-align:center; max-width:min(100%,420px);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.name-box.valid{ background:#d1fae5; color:#065f46 }
.name-box.invalid{ background:#fee2e2; color:#991b1b }

/* Preview stage / canvas */
.twibbon-preview{justify-content:flex-start; align-items:stretch}
#stage{
  position:relative; background:var(--stage-bg);
  border-radius:12px; overflow:hidden; width:100%; max-width:560px;
  margin-inline:auto; margin-block:12px; aspect-ratio:1080/1350; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
canvas{display:block; width:100%; height:100%}

/* Range slider */
.range-row{position:relative}
.range-row .badge{
  position:absolute; right:0; top:-2px; font-size:.8rem; font-weight:700;
  background:#f6f8fb; color:#3F4254; padding:4px 8px; border:1px solid var(--panel-border); border-radius:999px;
}
input[type="range"]{ --val:50; --h:10px; --thumb:22px; appearance:none; width:100%; height:var(--thumb); background:transparent; margin:10px 0 18px; cursor:pointer }
input[type="range"]::-webkit-slider-runnable-track{
  height:var(--h); border-radius:999px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary) calc(var(--val)*1%),var(--range-track) calc(var(--val)*1%),var(--range-track) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:var(--thumb); height:var(--thumb); margin-top:calc((var(--h)-var(--thumb))/2);
  border-radius:50%; background:#fff; border:1px solid var(--panel-border);
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 6px 16px rgba(25,97,174,.15);
}
input[type="range"]::-moz-range-track{ height:var(--h); border-radius:999px; background:var(--range-track) }
input[type="range"]::-moz-range-progress{ height:var(--h); border-radius:999px; background:var(--primary) }
input[type="range"]::-moz-range-thumb{
  width:var(--thumb); height:var(--thumb); border-radius:50%;
  background:#fff; border:1px solid var(--panel-border);
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 6px 16px rgba(25,97,174,.15);
}
input[type="range"]:focus-visible{ outline:none; filter:drop-shadow(0 0 0 .9rem color-mix(in srgb,var(--primary) 15%, transparent)) }

/* Switch (Detail Boost & Guides) */
#detailBoost,#showGuides{
  appearance:none; width:48px; height:28px; background:var(--secondary);
  border:1px solid var(--panel-border); border-radius:999px; position:relative; cursor:pointer; margin-right:.5rem;
  transition:background .2s, border-color .2s;
}
#detailBoost::after,#showGuides::after{
  content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .2s;
}
#detailBoost:checked,#showGuides:checked{
  background:linear-gradient(90deg,var(--primary), #7aa7e6);
  border-color:color-mix(in srgb,var(--primary) 60%, white);
}
#detailBoost:checked::after,#showGuides:checked::after{ left:23px }
.switch-label{ font-weight:700; color:var(--gray-dark) }

/* === Uploader (SVG icon) === */
.uploader.compact{ display:flex; flex-direction:column; align-items:stretch; }

.dropzone{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; /* isi penuh kolom */
  min-height:150px; padding:20px;
  border:1.5px dashed var(--secondary, #d7dbe6);
  border-radius:14px; background:#fbfbfd; text-align:center;
  transition:border-color .2s, background .2s, box-shadow .2s;
  cursor:pointer;
}
.drop-input{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index:3 }
.dz-svg{ width:48px; height:48px; display:block; opacity:.95 }
.dz-title{ font-weight:800; color:#1f2a44 }
.dz-browse{ color:var(--primary, #2b6fff); text-decoration:underline }
.dz-sub{ font-size:.9rem; color:#6b7280 }
.dropzone.dragover{
  background:color-mix(in srgb, var(--primary, #2b6fff) 6%, white);
  border-color:var(--primary, #2b6fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary, #2b6fff) 18%, transparent);
}

/* daftar uploads */
.uploads-title{ margin:.9rem 0 .4rem; font-weight:700 }
.uploads-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }

/* Tombol utama */
#downloadBtn{
  width:100%; height:44px; margin-top:1rem; font-size:1rem;
  background:var(--warning); color:#181C32; border:none; border-radius:12px; cursor:pointer;
  transition:background .2s ease, transform .05s ease; font-weight:700; letter-spacing:.2px; outline:none;
}
#downloadBtn:hover{ background:#e09600 }
#downloadBtn:active{ transform:translateY(1px) }
#downloadBtn:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 35%, transparent) }
/* Tombol Reset Foto */
#resetBtn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:10px;
  padding:.55rem 1rem;
  cursor:pointer;
  font-family:"Raleway", sans-serif;
  transition:background .2s ease, transform .05s ease;
}
#resetBtn:hover{ background:#98b5d0 }
#resetBtn:active{ transform:translateY(1px) }
#resetBtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%, transparent);
}

/* Teks tip di bawah reset */
.tip{
  font-size:.85rem;
  color:var(--gray);
  margin-top:.5rem;
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#fff; color:var(--text-body); border:1px solid var(--panel-border);
  box-shadow:var(--shadow-soft); padding:10px 14px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1000;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}
.toast.error{border-color:#ffd1d6; background:#fff5f6; color:#8a1020}
.toast.ok{border-color:#cde8e4; background:#f2fffd; color:#0c5a4e}

/* Helpers */
.hidden{display:none !important}
.text-danger{color:var(--danger)!important}
.text-primary{color:var(--primary)!important}
.text-muted{color:var(--gray)!important}
.flag-round{
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; border:1px solid var(--panel-border,#e6e9ef); background:#fff;
}

/* Paksa kontrol default terang */
:root { color-scheme: light; }

/* Aktifkan dark mode hanya bila html punya class .dark */
html.dark{
  --bg-body:#0e1116; --text-body:#e9eef6;
  --panel-bg:#121723; --panel-border:rgba(255,255,255,.08);
  --header-bg:#0f1420; --header-text:#e9eef6; --stage-bg:#000;
  color-scheme: dark; /* supaya input/slider ikut gelap saat .dark */
}

html.dark .small,
html.dark .hint,
html.dark legend{ color:#a9b4c0 }

html.dark .range-row .badge{
  background:#121723; border-color:rgba(255,255,255,.08); color:#e9eef6;
}

html.dark input[type="range"]::-webkit-slider-thumb,
html.dark input[type="range"]::-moz-range-thumb{
  background:#0f1420; border-color:rgba(255,255,255,.15);
}

html.dark #detailBoost,
html.dark #showGuides{
  background:#1a2236; border-color:rgba(255,255,255,.14);
}

html.dark .dropzone{ background:#101626 }
html.dark .dz-sub{ color:#a9b4c0 }
html.dark .toast{ background:#0f1420; color:#e9eef6 }