@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
[hidden]{display:none!important}
:root{--ink:#1d1a16;--paper:#f3ecdf;--muted:#7b7266;--accent:#b5462f;--glass:rgba(250,246,238,.86);--line:rgba(29,26,22,.12);--ok:#3d6b4f;--nav:0px}
body.malam{--ink:#e9e4f2;--paper:#11131d;--muted:#8d89a3;--accent:#e0503f;--glass:rgba(16,18,30,.82);--line:rgba(233,228,242,.13)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#cfd6d0;-webkit-tap-highlight-color:transparent}
body{overflow:hidden}
button{font:inherit;color:inherit}
.serif{font-family:"Instrument Serif",serif;font-weight:400}
.mono{font-family:"JetBrains Mono",monospace}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.12)}
.panel h4,.h4{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 16px;background:var(--ink);color:var(--paper);font:600 14px Inter;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ig{background:linear-gradient(45deg,#f9a63a,#e1306c 50%,#833ab4);color:#fff}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:10px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:none;border-radius:99px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sw{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper);background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.dot.on{box-shadow:0 0 0 2px var(--accent)}
.ed-row{padding:10px 0;border-top:1px solid var(--line)}
.ed-row:first-child{border-top:0}
.ed-l{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=date],textarea,select{width:100%;font:500 15px Inter;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink)}
body.malam input,body.malam textarea,body.malam select{background:rgba(255,255,255,.06)}
input[type=range]{width:100%;accent-color:var(--accent)}
.muted{color:var(--muted)}
.err{color:var(--accent);font-size:13px;margin-top:8px}
.tag{position:absolute;transform:translate(-50%,-100%);font:600 10.5px Inter;padding:2px 7px;border-radius:99px;background:var(--glass);border:1px solid var(--line);white-space:nowrap;backdrop-filter:blur(6px);pointer-events:none}
.tag.me{background:var(--accent);color:#fff;border:none}
.tag.v:after{content:" ✓";color:#3b82f6}
.toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:90vw}