:root{--bg:#f6f3ee;--card:#fff;--ink:#1d2a26;--muted:#7a857f;--line:#e4ddd2;--acc:#0f6b55;--acc2:#c08a2e;--r:12px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;gap:12px;align-items:center}.brand h1{font:600 18px Lora,serif;margin:0}.brand small{color:var(--muted)}
.logo{width:38px;height:38px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font:28px Amiri,serif;padding-bottom:6px}
nav button{border:0;background:none;padding:8px 14px;border-radius:8px;font-weight:500;color:var(--muted)}nav button.on{background:#e8f1ed;color:var(--acc)}
.tab{display:none}.tab.on{display:grid}
#work{grid-template-columns:1fr 1fr;gap:18px;padding:18px 24px;height:calc(100vh - 64px)}
#rules{gap:18px;padding:18px 24px;max-width:1300px;margin:auto}
.pane,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;min-height:0}
.card.two{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}.bar h3{margin:0;font-size:14px}.bar.foot{margin:10px 0 0}
.doc{flex:1;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:18px 22px;font:16px/1.75 Lora,Georgia,serif;outline:none;background:#fffdf9;min-height:120px;white-space:pre-wrap}
.doc:empty:before{content:attr(data-ph);color:var(--muted);font-family:Inter}
.doc p{margin:0 0 .7em}.doc h2{font:600 22px Lora,serif;text-align:center;margin:.2em 0 .8em}
.doc em{font-style:italic;font-synthesis:style}.doc em.tr{color:#6b4b12}
mark.dv{background:#ffe9a8;border-bottom:2px dotted #c08a2e;border-radius:3px;padding:0 2px;cursor:pointer;color:inherit}
mark.dv:hover{background:#ffd666}
mark.dv.ok{background:#dff3e8;border-bottom-color:#0f6b55}mark.dv.ok:hover{background:#bfe8d1}.pending .okc{color:var(--acc)}
.pending{font-size:12px;color:#8a5a00;margin-top:8px;min-height:1em}
#padanan{position:absolute;z-index:50;display:none;width:250px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0002;padding:10px}
#padanan.on{display:block}#padanan .pt{font-size:12px;color:var(--muted);margin-bottom:6px}
#padanan button{margin:0 4px 6px 0;padding:5px 9px}#padanan input{width:100%;margin:2px 0 6px}#padanan .row{display:flex;gap:4px}
.doc .ar,.doc [dir=rtl]{font:24px/2 Amiri,serif;text-align:right}.doc em.tr{color:#6b4b12}
.doc.small{flex:none;min-height:90px;font-size:14px;margin:10px 0 16px}
button,.btn{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:8px;font:500 13px Inter;cursor:pointer;color:var(--ink)}
button:hover,.btn:hover{border-color:var(--acc)}button.primary{background:var(--acc);border-color:var(--acc);color:#fff}button.ghost,.btn.ghost{background:none}
button:disabled{opacity:.5;cursor:wait}
select,input,textarea{font:13px Inter;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#fff;color:var(--ink)}
textarea{width:100%;font:13px/1.55 ui-monospace,Menlo,monospace;resize:vertical}
.muted{color:var(--muted);font-size:12px}.actions{display:flex;gap:6px;flex-wrap:wrap}
details{margin-top:10px;font-size:13px}summary{cursor:pointer;color:var(--muted)}#log{margin:6px 0 0;padding-left:18px;max-height:160px;overflow:auto}#log .w{color:#b4441c}
table{width:100%;border-collapse:collapse}th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:6px}
td{padding:3px 4px;border-top:1px solid var(--line);vertical-align:middle}td input[type=text]{width:100%}td code{font-size:12px}
tr.off td input[type=text]{color:var(--muted)}tbody tr:hover{background:#faf8f4}
td.x button{border:0;color:#b4441c;padding:2px 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px 22px}
.grid label{display:flex;gap:8px;align-items:center;font-size:13px}.grid label input[type=text]{flex:1}
.hint{margin:10px 0 0}.ex{border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px}.ex textarea{margin:4px 0}
#busy{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(246,243,238,.72);backdrop-filter:blur(2px);touch-action:none}
#busy.on{display:flex}#busy .spin{width:54px;height:54px;border-radius:50%;border:5px solid #d6e7df;border-top-color:var(--acc);animation:spin .8s linear infinite}
#busy .bt{font:500 14px Inter;color:var(--acc)}@keyframes spin{to{transform:rotate(360deg)}}
body.busy-lock{overflow:hidden}
#padanan button.keep{display:block;width:100%;text-align:left;background:#f3efe6;margin-bottom:8px}#padanan button.keep small{color:var(--muted)}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:9px;opacity:0;transition:.25s;pointer-events:none}#toast.on{opacity:1}
dialog{border:0;border-radius:var(--r);max-width:640px;width:90%}dialog li{margin:6px 0}
@media(max-width:900px){#work,.card.two{grid-template-columns:1fr;height:auto}#work .doc{min-height:40vh}}

.savestate{position:sticky;top:64px;z-index:4;justify-self:end;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;background:#e8f1ed;color:var(--acc);box-shadow:0 1px 4px #0001}
.savestate.warn{background:#fff4dc;color:#8a5a00}.savestate.err{background:#fde7e1;color:#b4441c}
.doc.busy{position:relative;opacity:.75}.doc.busy:after{content:"✨ AI sedang menyempurnakan…";position:sticky;bottom:0;float:right;font:500 12px Inter;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--acc)}