:root{
  --bg:#101014;
  --panel:#1a1a21;
  --panel-2:#22222c;
  --line:#33333f;
  --text:#f2f2f5;
  --muted:#a7a7b5;
  --banana:#ffd21f;
  --banana-dark:#e0b400;
  --danger:#ff5a5a;
  --ok:#3ddc84;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
a{color:var(--banana)}
.topbar{
  padding:18px 16px 12px;text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#191920,#101014);
}
.brand{font-size:28px;letter-spacing:.2px}
.brand strong{color:var(--banana)}
.brand-emoji{font-size:26px}
.brand-sub{color:var(--muted);font-size:13px;margin-top:2px}
main{max-width:640px;margin:0 auto;padding:14px 12px 40px}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;margin-bottom:14px;
}
.panel h2{margin:0 0 10px;font-size:17px;color:var(--banana)}
.hint{color:var(--muted);font-size:13px;margin:6px 0}
.note{
  background:#2a2410;border:1px solid #574a12;color:#ffe98a;
  border-radius:10px;padding:10px 12px;font-size:13px;margin-top:10px;
}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.field-row{display:flex;gap:10px}
.field-row .field{flex:1}
input[type="password"],input[type="number"],select,textarea{
  width:100%;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:15px;font-family:inherit;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--banana-dark);border-color:var(--banana-dark)}
.key-row{display:flex;gap:8px}
.key-row input{flex:1;min-width:0}
.key-status{font-size:13px;margin:8px 0 2px;color:var(--muted)}
.key-status.ok{color:var(--ok)}
.btn{
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;font-family:inherit;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-main{background:var(--banana);border-color:var(--banana-dark);color:#1c1c10;font-weight:700}
.btn-main:disabled{background:var(--banana)}
.btn-ghost{background:transparent}
.btn-danger{background:#3a1d1d;border-color:#6e2b2b;color:#ffb1b1}
.btn-big{flex:1;padding:13px;font-size:16px}
.run-row{display:flex;gap:10px;align-items:center;margin:10px 0}
.upload-box{
  display:block;text-align:center;border:1.5px dashed var(--line);border-radius:10px;
  padding:14px;color:var(--muted);cursor:pointer;font-size:14px;background:var(--panel-2);
}
.upload-box:active{border-color:var(--banana);color:var(--banana)}
.ref-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ref-item{position:relative;width:72px;height:72px}
.ref-item img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.ref-item button{
  position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:#000;color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0;
}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{
  flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-size:14px;cursor:pointer;font-family:inherit;
}
.tab.active{background:var(--banana);color:#1c1c10;font-weight:700;border-color:var(--banana-dark)}
.estimate{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13.5px;margin:10px 0;
}
.progress-wrap{margin-top:12px}
.progress-bar{height:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
#progressFill{height:100%;width:0%;background:var(--banana);transition:width .3s}
.progress-text{font-size:13px;color:var(--muted);margin:6px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:7px}
.card-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.chip{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.proses{color:#1c1c10;background:var(--banana);border-color:var(--banana-dark);font-weight:700}
.chip.berhasil{color:#0d2b1a;background:var(--ok);border-color:var(--ok);font-weight:700}
.chip.gagal{color:#fff;background:#8c2f2f;border-color:#8c2f2f;font-weight:700}
.card-prompt{font-size:12px;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-img{width:100%;aspect-ratio:1/1;background:#141419;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;overflow:hidden;text-align:center;padding:6px}
.card-img img{width:100%;height:100%;object-fit:contain}
.card-error{font-size:12px;color:#ff9c9c;margin:0;word-break:break-word}
.card .btn{padding:8px;font-size:13px}
footer{color:var(--muted);font-size:12.5px;text-align:center;padding:8px 4px 0}