:root{color-scheme:dark;--bg:#060b16;--panel:rgba(13,23,40,.78);--panel2:rgba(20,34,55,.72);--line:rgba(148,163,184,.14);--line2:rgba(148,163,184,.22);--text:#f1f5f9;--muted:#8ea0b8;--accent:#34d399;--accent2:#22d3ee;--accent-ink:#052e22;--accent-soft:rgba(52,211,153,.14);--accent-text:#a7f3d0;--accent-glow:rgba(52,211,153,.3);--input:rgba(2,8,20,.62);--canvas:#050b16;--card:rgba(2,8,20,.55);--inset:rgba(2,8,20,.5);--heading:#c4d2e5;--label:#b9c7da;--btn-text:#e2e8f0;--ok:#6ee7b7;--err:#fda4af;--foot:#7d8ea6;--btn-bg:rgba(148,163,184,.1);--btn-bg-hover:rgba(148,163,184,.18);--drop-bg:rgba(2,8,20,.5);--drop-bg-hover:rgba(6,78,59,.24);--empty-bg:rgba(2,8,20,.4);--toast-bg:rgba(4,32,25,.92);--toast-border:rgba(52,211,153,.45);--radius:20px;--shadow:0 20px 60px rgba(2,6,16,.55)}
[data-theme=light]{color-scheme:light;--bg:#eef3f8;--panel:rgba(255,255,255,.94);--panel2:rgba(255,255,255,.98);--line:rgba(15,40,70,.16);--line2:rgba(15,40,70,.28);--text:#0b1728;--muted:#465b73;--accent:#0b8a5f;--accent2:#0277b6;--accent-ink:#ffffff;--accent-soft:rgba(13,157,108,.14);--accent-text:#095c41;--accent-glow:rgba(13,157,108,.32);--input:#ffffff;--canvas:#dfe7f0;--card:#ffffff;--inset:#f2f6fb;--heading:#2b3f55;--label:#3c5068;--btn-text:#14263b;--ok:#0b8a5f;--err:#c81e3a;--foot:#5a6f85;--btn-bg:rgba(15,40,70,.07);--btn-bg-hover:rgba(15,40,70,.13);--drop-bg:rgba(255,255,255,.85);--drop-bg-hover:rgba(13,157,108,.1);--empty-bg:rgba(255,255,255,.85);--toast-bg:rgba(255,255,255,.97);--toast-border:rgba(13,157,108,.4);--shadow:0 18px 45px rgba(15,40,70,.14)}
*{box-sizing:border-box}button,input,select,textarea{font-family:inherit}body{margin:0;color:var(--text);font:14px/1.55 "Plus Jakarta Sans",Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:radial-gradient(900px 420px at 12% -8%,rgba(34,211,238,.14),transparent 60%),radial-gradient(760px 380px at 88% 0%,rgba(52,211,153,.13),transparent 62%),radial-gradient(700px 500px at 50% 110%,rgba(99,102,241,.12),transparent 60%),var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:auto;padding:32px 22px 56px}.top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:14px}.logo{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2) 60%,var(--accent2));display:grid;place-items:center;color:var(--accent-ink);box-shadow:0 10px 28px rgba(52,211,153,.35),inset 0 1px 0 rgba(255,255,255,.5)}.logo svg{width:24px;height:24px}
h1{font-size:22px;margin:0;letter-spacing:-.6px;font-weight:800}.sub{color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:.1px}.local{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(52,211,153,.28);color:var(--accent-text);background:var(--accent-soft);padding:8px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.4px}.local .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.layout{display:grid;grid-template-columns:360px 1fr;gap:18px}.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
h2{font-size:12px;margin:0 0 16px;letter-spacing:1.6px;text-transform:uppercase;color:var(--heading)}.field{margin:0 0 14px}.field label{display:flex;align-items:center;gap:6px;color:var(--label);font-size:12px;font-weight:600;margin-bottom:7px}
input[type=number],select,.txt{width:100%;background:var(--input);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:10px 12px;outline:none;transition:border .18s,box-shadow .18s}
input:focus,select:focus{border-color:rgba(52,211,153,.65);box-shadow:0 0 0 3px rgba(52,211,153,.16)}.dims{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint{color:var(--muted);font-size:11px;margin-top:6px}
.drop{border:1.5px dashed rgba(148,163,184,.38);border-radius:16px;padding:26px 16px;text-align:center;background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(52,211,153,.05)),var(--drop-bg);cursor:pointer;transition:.22s}
.drop:hover,.drop.drag{border-color:var(--accent);background:var(--drop-bg-hover);transform:translateY(-1px)}.drop strong{display:block;font-size:13px;margin:8px 0 3px;color:var(--text)}.drop span{color:var(--muted);font-size:11px}
.drop .dzicon{width:42px;height:42px;margin:0 auto;border-radius:13px;display:grid;place-items:center;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.28)}.drop .dzicon svg{width:22px;height:22px;stroke:var(--ok)}
.btn{border:0;border-radius:12px;padding:11px 14px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:.18s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn svg{width:16px;height:16px;flex:0 0 auto}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);box-shadow:0 10px 24px rgba(52,211,153,.32)}.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.secondary{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--line2);backdrop-filter:blur(8px)}.secondary:hover{background:var(--btn-bg-hover);border-color:var(--accent)}.btn:disabled{opacity:1;cursor:not-allowed;transform:none;box-shadow:none}.secondary:disabled{background:rgba(148,163,184,.25);color:var(--muted);border-color:var(--line2)}.primary:disabled{background:rgba(100,116,139,.45);color:#fff}
[data-theme=light] .secondary{background:#eef3f8;color:#14263b;border-color:#b9c6d4}
[data-theme=light] .secondary:hover{background:#e1eaf4;border-color:var(--accent)}
[data-theme=light] .secondary:disabled{background:#d9e2ec;color:#3c5068;border-color:#aebfcf}
[data-theme=light] .secondary:disabled svg{opacity:.9}
[data-theme=light] .primary{background:linear-gradient(135deg,#0b8a5f,#0277b6);color:#fff}
[data-theme=light] .primary:disabled{background:#7ba79a;color:#fff}
[data-theme=light] .btn:disabled svg{opacity:.85}
.iconbtn{padding:8px 10px;font-size:15px;line-height:1;min-width:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center}.iconbtn svg{width:17px;height:17px;transform-origin:center;display:block}.iconbtn.spin svg{animation:spin .6s linear}@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.actions .btn{flex:1 1 90px;min-width:0;padding:9px 8px;font-size:12px;line-height:1.35;font-weight:700;white-space:normal;word-break:break-word;overflow-wrap:anywhere;text-align:center;text-overflow:clip;overflow:visible}.wide{width:100%}
@media(max-width:480px){.actions .btn{flex:1 1 100%}}
.stats{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.stat{flex:1;min-width:104px;background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.stat b{display:flex;align-items:center;gap:7px;font-size:19px}.stat b svg{width:16px;height:16px}.stat span{color:var(--muted);font-size:10px;letter-spacing:.4px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.toolbar h2{margin:0}.progress{height:8px;background:rgba(148,163,184,.14);border-radius:999px;overflow:hidden;margin:12px 0 4px}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent2));transition:width .25s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:560px;overflow:auto;padding:2px}
.photo{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;min-width:0;transition:.2s}.photo:hover{border-color:rgba(52,211,153,.55);transform:translateY(-1px)}.thumb{height:128px;display:grid;place-items:center;background:radial-gradient(220px 120px at 50% 20%,rgba(52,211,153,.1),transparent),var(--canvas);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}.meta{padding:9px 10px}.fname{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{font-size:10px;color:var(--muted);margin-top:3px}.status.ok{color:var(--ok)}.status.err{color:var(--err)}
.empty{padding:60px 15px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:16px;background:var(--empty-bg)}.empty .eicon{width:52px;height:52px;margin:0 auto 10px;border-radius:16px;display:grid;place-items:center;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25)}.empty .eicon svg{width:26px;height:26px;stroke:var(--ok)}.foot{color:var(--foot);font-size:11px;text-align:center;margin-top:18px}
@media(max-width:820px){.layout{grid-template-columns:1fr}.wrap{padding:20px 13px}.top{align-items:flex-start}.local{display:none}}
.photo{cursor:pointer}.photo:hover{border-color:var(--accent)}.photo.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.zoomtag{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-glow);color:var(--accent-text);font-size:10px;font-weight:700}.zoomtag svg{flex:0 0 auto}
.pvbtn{margin-top:5px;width:100%;font-size:10px;font-weight:600;line-height:1.3;padding:4px 6px;border-radius:7px;letter-spacing:.1px;display:inline-flex;align-items:center;justify-content:center;gap:5px}.pvbtn.danger{color:var(--err);border-color:rgba(244,114,182,.3)}.pvbtn.danger:hover{border-color:rgba(244,114,182,.6);background:rgba(244,114,182,.1)}
.modal{position:fixed;inset:0;background:rgba(2,6,16,.72);backdrop-filter:blur(8px);display:none;place-items:center;z-index:50;padding:12px}.modal.open{display:grid}
.sheet{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:18px;max-width:780px;width:100%;max-height:90vh;overflow:auto;padding:16px;box-shadow:var(--shadow)}
.zmodal{position:fixed;inset:0;background:rgba(2,6,16,.85);backdrop-filter:blur(10px);display:none;place-items:center;z-index:80;padding:16px}.zmodal.open{display:grid}
.zsheet{background:var(--panel);border:1px solid var(--line2);border-radius:16px;max-width:94vw;max-height:94vh;overflow:auto;padding:12px;text-align:center}
.zsheet canvas{max-width:90vw;max-height:82vh;width:auto;height:auto;margin:auto;display:block;background:var(--canvas);border-radius:10px;cursor:zoom-out}
.zsheet .cap{font-size:11px;color:var(--muted);margin-bottom:8px}
.zsheet .hint{font-size:11px;color:var(--muted);margin-top:8px}
.sheet h3{margin:0 0 2px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sheet .sub2{color:var(--muted);font-size:11px;margin-bottom:8px}
.pvgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:560px){.pvgrid{grid-template-columns:1fr}}
.pvbox{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}.pvbox .cap{font-size:10px;color:var(--muted);padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
.pvbox canvas{width:100%;height:auto;max-height:280px;object-fit:contain;display:block;background:var(--canvas);cursor:zoom-in;margin:auto}
.pvbox canvas.grab{cursor:grab}
.pvwrap{position:relative;display:inline-block;width:100%;line-height:0}.pvwrap canvas{line-height:normal}
#pvSrc{cursor:crosshair}
.pvwrap::after{content:'+ seret untuk crop bebas';position:absolute;left:8px;bottom:8px;background:rgba(2,6,16,.8);color:#d1fae5;font-size:10px;padding:3px 8px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .15s}
.pvwrap:hover::after,.pvwrap.armed::after{opacity:1}
.pvwrap.armed #pvSrc{cursor:crosshair}
#pvSrc{touch-action:none;user-select:none;-webkit-user-select:none}
#cropBox{position:absolute;border:2px solid var(--accent);background:rgba(52,211,153,.14);box-shadow:0 0 0 1px rgba(2,6,16,.7),0 0 22px rgba(52,211,153,.3);cursor:move;touch-action:none;display:none;line-height:normal;border-radius:4px}
#cropBox.on{display:block}
#cropBox .hd{position:absolute;width:14px;height:14px;background:var(--accent);border:2px solid var(--accent-ink);border-radius:4px;cursor:nwse-resize}
#cropBox .hd.se{right:-8px;bottom:-8px;cursor:nwse-resize}
#cropBox .hd.nw{left:-8px;top:-8px;cursor:nwse-resize}
#cropBox .hd.ne{right:-8px;top:-8px;cursor:nesw-resize}
#cropBox .hd.sw{left:-8px;bottom:-8px;cursor:nesw-resize}
#cropBox .hd.n{left:50%;top:-8px;margin-left:-7px;cursor:ns-resize}
#cropBox .hd.s{left:50%;bottom:-8px;margin-left:-7px;cursor:ns-resize}
#cropBox .hd.e{right:-8px;top:50%;margin-top:-7px;cursor:ew-resize}
#cropBox .hd.w{left:-8px;top:50%;margin-top:-7px;cursor:ew-resize}
#cropBox .tag{position:absolute;top:-20px;left:0;background:var(--accent-ink);color:var(--accent-text);border:1px solid var(--accent-glow);font-size:10px;padding:1px 6px;border-radius:10px;white-space:nowrap}
.croptools{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.croptools .btn{padding:6px 8px;font-size:11px}.croptools label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}
.ctlrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.ctlrow .field{flex:1;min-width:120px;margin:0 0 8px}.ctlrow label{font-size:11px}
input[type=range]{width:100%;accent-color:var(--accent)}
select option{color:#0e1b2c;background:#fff}[data-theme=light] select option{color:#0e1b2c}
.sheetfoot{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.sheetfoot .btn{flex:1 1 auto;min-width:0;padding:7px 8px;font-size:11px;font-weight:600;line-height:1.3;border-radius:8px;white-space:nowrap}
.pvnav{display:flex;align-items:center;gap:8px;margin-top:8px}.pvnav .btn{padding:6px 8px;font-size:11px;font-weight:600;border-radius:8px}
.iconbtn{padding:7px 10px;font-size:15px;line-height:1;min-width:36px;display:inline-flex;align-items:center;justify-content:center}.iconbtn svg{width:17px;height:17px;transform-origin:center;display:block}.iconbtn.spin svg{animation:spin .6s linear}@keyframes spin{to{transform:rotate(360deg)}}
.pvset{border:1px solid var(--line);border-radius:12px;background:var(--inset);padding:9px 11px;margin-bottom:10px}.pvset summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--text);list-style:none}.pvset summary::-webkit-details-marker{display:none}
.setgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}.setgrid .field{margin:0}.setgrid label{font-size:10px}
.setgrid input,.setgrid select{padding:8px 9px;font-size:12px;border-radius:10px}
.setgrid .span2{grid-column:span 2}@media(max-width:640px){.setgrid{grid-template-columns:repeat(3,1fr)}.setgrid .span2{grid-column:span 3}}
.strip{display:flex;gap:8px;overflow-x:auto;padding:9px;background:var(--inset);border:1px solid var(--line);border-radius:13px;min-height:118px}
.scell{flex:0 0 auto;width:112px;background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;transition:.18s}.scell:hover{border-color:rgba(52,211,153,.5)}.scell.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.scell canvas{width:112px;height:74px;object-fit:contain;display:block;background:var(--canvas)}
.scell .t{font-size:10px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.scell .ok{color:var(--ok)}
.toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-16px);background:var(--toast-bg);border:1px solid var(--toast-border);color:var(--text);font-size:12px;font-weight:600;padding:9px 16px;border-radius:999px;z-index:200;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast{display:inline-flex;align-items:center;gap:8px}.toast svg{width:15px;height:15px;flex:0 0 auto}