:root{
  --bg0:#0B0B0C; --bg1:#161618; --card:#1C1C1E; --fill:#2C2C2E;
  --line:rgba(255,255,255,.09); --hi:rgba(255,255,255,.07);
  --txt:#F5F5F7; --mut:#8E8E93;
  --acc:#0A84FF; --acc-ink:#fff; --ok:#32D74B; --err:#FF453A; --warn:#FF9F0A;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32);
  border:3px solid transparent;background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
body{margin:0;font:15px/1.55 var(--font);color:var(--txt);
  background:var(--bg0) radial-gradient(1200px 600px at 70% -10%,#1a1a1e 0%,var(--bg0) 60%);
  min-height:100vh}
a{color:var(--acc);text-decoration:none}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:20px 0 8px}
.wrap{max-width:720px;margin:0 auto;padding:24px}
/* kartu + material */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin:12px 0;box-shadow:inset 0 1px 0 var(--hi),var(--shadow)}
/* tombol: satu aksen menyala, sisanya monokrom */
.btn{display:inline-block;background:var(--acc);color:var(--acc-ink);border:0;border-radius:12px;
  padding:9px 18px;font:600 14px var(--font);cursor:pointer;
  box-shadow:0 0 20px rgba(10,132,255,.35)}
.btn:hover{filter:brightness(1.1)}
button{font:500 14px var(--font);background:var(--fill);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 14px;cursor:pointer}
button:disabled{opacity:.35;cursor:default}
button.danger{color:var(--err)}
form .btn{margin-top:16px}
/* input gelap */
label{display:block;font-weight:600;margin:12px 0 4px;font-size:14px}
input,textarea,select{width:100%;padding:10px 12px;background:var(--fill);color:var(--txt);
  border:1px solid transparent;border-radius:var(--r-sm);font:400 14px var(--font)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
input[type=checkbox]{width:auto}
input[type=color]{padding:2px;height:40px}
/* pesan + teks */
.msg{padding:12px 16px;border-radius:var(--r-md);margin:12px 0;font-size:14px}
.msg.ok{background:rgba(50,215,75,.12);color:var(--ok)}
.msg.err{background:rgba(255,69,58,.12);color:var(--err)}
.muted{color:var(--mut);font-size:13px}
.badge{display:inline-block;background:rgba(10,132,255,.15);color:var(--acc);border-radius:999px;
  padding:4px 12px;font-size:13px;font-weight:600}
/* pill status save: satu-satunya elemen menyala */
.savepill{display:inline-block;border-radius:999px;padding:4px 14px;font-size:13px;font-weight:600;
  background:var(--fill);color:var(--mut)}
.savepill.busy{background:rgba(10,132,255,.18);color:var(--acc);box-shadow:0 0 16px rgba(10,132,255,.45)}
.savepill.done{background:rgba(50,215,75,.14);color:var(--ok)}
.savepill.fail{background:rgba(255,69,58,.14);color:var(--err)}
/* toolbar kaca */
.toolbar{position:sticky;top:0;z-index:10;display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;
  padding:12px 20px;background:rgba(22,22,24,.75);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line)}
.toolbar .doctitle-wrap{flex:1;display:flex;flex-direction:column;min-width:160px}
.toolbar .doctitle{font-size:20px;font-weight:700;background:transparent;
  border:0;text-align:center}
.toolbar .doctitle:focus{border-color:var(--acc)}
.toolbar .docdesc{background:transparent;border:0;color:var(--mut);
  font-size:13px;text-align:center;padding:2px 12px}
.toolbar .docdesc:focus{border-color:var(--acc);color:var(--txt)}
.toolbar .tool-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* workbench builder */
.workbench{display:grid;grid-template-columns:300px minmax(480px,1fr) 320px;gap:16px;
  padding:16px 20px;max-width:1440px;margin:0 auto;align-items:start}
.rail,.inspector{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;
  max-height:calc(100vh - 150px);overflow-y:auto}
.rail h3:first-child,.inspector h3:first-child{margin-top:0}
.rail h3,.inspector h3{position:sticky;top:-16px;background:var(--bg1);padding:12px 0 8px;z-index:1}
.canvas{background:radial-gradient(600px 300px at 50% 0%,#1e1e22 0%,var(--bg0) 70%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;min-height:60vh;
  max-height:calc(100vh - 150px);overflow-y:auto}
.canvas h3{margin-top:0}
@media(max-width:1020px){
  .workbench{grid-template-columns:1fr}
  .rail,.inspector,.canvas{max-height:none;overflow:visible}
  .canvas{order:-1;min-height:auto}
  .rail h3,.inspector h3{position:static}
}
/* penomoran rail: urutan field = informasi, bukan dekorasi */
#flist{counter-reset:fld}
#flist .fld{position:relative;padding-left:52px;border-radius:var(--r-md)}
.fld-label{font-weight:700;font-size:14px;line-height:1.35}
.fld .muted{font-size:12px}
#flist .fld::before{counter-increment:fld;content:counter(fld,decimal-leading-zero);
  position:absolute;left:14px;top:14px;font:600 12px var(--mono);color:var(--mut)}
/* field rail */
.fld{cursor:move;margin:8px 0;padding:12px 14px}
.fld:hover{border-color:rgba(10,132,255,.5)}
.fld.sel{border-color:var(--acc);background:rgba(10,132,255,.1)}
.fld.over{outline:2px dashed var(--acc)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btnrow select{width:auto}
#editor .btnrow{margin-top:12px}
/* sheet: form publik/preview tetap terang di atas chrome gelap */
.sheet{background:#fff;color:#111827;border-radius:var(--r-lg);padding:28px;max-width:560px;
  margin:0 auto;box-shadow:var(--shadow)}
.sheet h1{color:#111827}
.sheet .muted{color:#6b7280}
.sheet a{color:#0071e3}
.sheet label{color:#111827}
.sheet input,.sheet textarea,.sheet select{background:#f5f5f7;color:#111827;border:1px solid #e5e7eb}
.sheet input[type=radio],.sheet input[type=checkbox]{width:auto;margin-right:8px;accent-color:#0071e3}
.sheet input[type=color]{width:64px;height:36px;padding:2px}
.sheet .btn{color:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);text-align:left;padding:8px}
td{padding:10px 8px;border-top:1px solid var(--line)}