:root{--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;--radius:20px;--shadow:0 20px 60px rgba(2,6,16,.55)}
*{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,#34d399,#22d3ee 60%,#818cf8);display:grid;place-items:center;color:#04231c;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:#a7f3d0;background:rgba(6,78,59,.32);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:#34d399;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:#c4d2e5}.field{margin:0 0 14px}.field label{display:flex;align-items:center;gap:6px;color:#b9c7da;font-size:12px;font-weight:600;margin-bottom:7px}
input[type=number],select,.txt{width:100%;background:rgba(2,8,20,.62);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,.32);border-radius:16px;padding:26px 16px;text-align:center;background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(52,211,153,.05)),rgba(2,8,20,.5);cursor:pointer;transition:.22s}
.drop:hover,.drop.drag{border-color:rgba(52,211,153,.7);background:rgba(6,78,59,.24);transform:translateY(-1px)}.drop strong{display:block;font-size:13px;margin:8px 0 3px}.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:#6ee7b7}
.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,#34d399,#22d3ee);color:#04281f;box-shadow:0 10px 24px rgba(52,211,153,.32)}.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.secondary{background:rgba(148,163,184,.1);color:#e2e8f0;border:1px solid var(--line2);backdrop-filter:blur(8px)}.secondary:hover{background:rgba(148,163,184,.18);border-color:rgba(52,211,153,.4)}.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.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:rgba(2,8,20,.5);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,#34d399,#22d3ee,#818cf8);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:rgba(2,8,20,.55);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),#050b16;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:#6ee7b7}.status.err{color:#fda4af}
.empty{padding:60px 15px;text-align:center;color:var(--muted);border:1px dashed rgba(148,163,184,.3);border-radius:16px;background:rgba(2,8,20,.4)}.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:#6ee7b7}.foot{color:#7d8ea6;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:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.3);color:#a7f3d0;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:#fecdd3;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,#101d33,#0a1425);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:#0a1526;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:#050b16;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:rgba(2,8,20,.55);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:#050b16;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:#06251fcc;color:#8fe4c9;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 #34d399;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 #06251f;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:#06251f;color:#8fe4c9;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:#54d6b2}
.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:rgba(2,8,20,.5);padding:9px 11px;margin-bottom:10px}.pvset summary{cursor:pointer;font-size:12px;font-weight:700;color:#dbe7f5;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:rgba(2,8,20,.5);border:1px solid var(--line);border-radius:13px;min-height:118px}
.scell{flex:0 0 auto;width:112px;background:rgba(2,8,20,.6);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:#050b16}
.scell .t{font-size:10px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.scell .ok{color:#6ee7b7}
.toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-16px);background:rgba(4,32,25,.92);border:1px solid rgba(52,211,153,.45);color:#d1fae5;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:0 12px 32px rgba(2,6,16,.6);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}