:root{
  --coklat:#5b3a1e; --coklat-2:#7a5230; --coklat-3:#a0703c; --emas:#d99a1e;
  --krem:#f6f1e8; --kertas:#fffdf9; --garis:#e4d9c6; --teks:#2b2118; --redup:#7d6d5c;
  --hijau:#2f7a4a; --merah:#b33a2b; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--krem);color:var(--teks);font-size:15px;line-height:1.5}
a{color:var(--coklat-2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.main{padding-top:24px;padding-bottom:32px;min-height:70vh}
h1,h2,h3{color:var(--coklat);line-height:1.25;margin:0 0 .5em}
h1{font-size:1.55rem}h2{font-size:1.2rem}h3{font-size:1.05rem}
.muted{color:var(--redup)} .small{font-size:.85rem}

/* Topbar */
.topbar{background:var(--coklat);color:#fff;border-bottom:4px solid var(--emas);position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-right:auto}
.brand img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:50%;padding:2px}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand small{opacity:.8;font-size:.78rem}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#f4e7d3;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.92rem}
.nav a:hover{background:rgba(255,255,255,.1)}
.nav a.on{background:var(--emas);color:var(--coklat);font-weight:600}
.nav .logout{opacity:.8}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:1.2rem;border-radius:8px;padding:4px 10px;cursor:pointer}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--coklat);flex-direction:column;padding:8px 16px 16px}
  .nav-open .nav{display:flex}
}

/* Card / grid */
.card{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2,.card-head h1{margin:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stat{background:var(--kertas);border:1px solid var(--garis);border-left:5px solid var(--emas);border-radius:var(--radius);padding:16px}
.stat b{display:block;font-size:1.8rem;color:var(--coklat)}
.stat span{color:var(--redup);font-size:.88rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:var(--coklat);color:#fff;padding:9px 16px;border-radius:8px;font-size:.92rem;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap}
.btn:hover{background:var(--coklat-2)}
.btn-emas{background:var(--emas);color:var(--coklat);font-weight:600}.btn-emas:hover{background:#c88a12}
.btn-line{background:transparent;color:var(--coklat);border-color:var(--garis)}.btn-line:hover{background:#efe6d6}
.btn-merah{background:var(--merah)}.btn-merah:hover{background:#952d20}
.btn-hijau{background:var(--hijau)}.btn-hijau:hover{background:#246039}
.btn-sm{padding:6px 10px;font-size:.84rem}
.btn-block{width:100%;justify-content:center;padding:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

/* Forms */
label{display:block;font-weight:600;margin-bottom:5px;font-size:.92rem}
.req{color:var(--merah)}
.input,select.input,textarea.input{width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:8px;background:#fff;font:inherit;color:inherit}
.input:focus{outline:2px solid var(--emas);border-color:var(--emas)}
textarea.input{min-height:84px;resize:vertical}
.fg{margin-bottom:14px}
.hint{font-size:.82rem;color:var(--redup);margin-top:4px}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.radio-group{display:flex;flex-wrap:wrap;gap:8px}
.radio-group label{font-weight:500;border:1px solid var(--garis);border-radius:8px;padding:8px 12px;background:#fff;cursor:pointer;margin:0;display:flex;gap:6px;align-items:center}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:middle;font-size:.9rem}
.tbl th{background:#efe6d6;color:var(--coklat);font-weight:600;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl img.ttd{height:40px;max-width:120px;object-fit:contain}
.empty{padding:28px;text-align:center;color:var(--redup)}

.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:600}
.badge-buka{background:#dff0e4;color:var(--hijau)}
.badge-tutup{background:#f3dcd8;color:var(--merah)}

.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;border:1px solid}
.alert-success{background:#e5f3e9;border-color:#b9dcc4;color:#1f5a35}
.alert-error{background:#f8e3df;border-color:#e8b9b0;color:#7c2418}
.alert-info{background:#fdf3dc;border-color:#ecd59b;color:#6a4b0b}

/* Field builder */
.fb-row{display:grid;grid-template-columns:28px 1.6fr 1fr 1.4fr auto auto 34px;gap:8px;align-items:start;padding:10px;border:1px solid var(--garis);border-radius:8px;background:#fff;margin-bottom:8px}
.fb-row .handle{cursor:grab;color:var(--redup);text-align:center;padding-top:9px;user-select:none}
.fb-row .check{font-size:.82rem;padding-top:9px;white-space:nowrap}
.fb-row textarea.input{min-height:40px;height:40px}
.fb-del{background:none;border:0;color:var(--merah);font-size:1.3rem;cursor:pointer;padding-top:4px}
.fb-head{display:grid;grid-template-columns:28px 1.6fr 1fr 1.4fr auto auto 34px;gap:8px;font-size:.78rem;color:var(--redup);padding:0 10px 4px;font-weight:600}
.preset{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
@media (max-width:760px){
  .fb-row{grid-template-columns:1fr 1fr}
  .fb-row .handle{display:none}
  .fb-row>*:nth-child(2){grid-column:1/-1}
  .fb-row>*:nth-child(4){grid-column:1/-1}
  .fb-head{display:none}
}

/* Signature */
.sig-box{border:2px dashed var(--coklat-3);border-radius:var(--radius);background:#fff;position:relative;touch-action:none}
.sig-box canvas{display:block;width:100%;height:200px;cursor:crosshair}
.sig-box .sig-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c9b9a2;pointer-events:none;font-size:.95rem}
.sig-box.signed .sig-ph{display:none}
.sig-tools{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.ttd-preview{background:#fff;border:1px solid var(--garis);border-radius:8px;padding:8px;max-width:260px}
.ttd-preview img{max-width:100%;height:90px;object-fit:contain;display:block}

/* Public */
body.public{background:linear-gradient(180deg,var(--coklat) 0 210px,var(--krem) 210px)}
.public .main{max-width:640px;padding-top:28px}
.public-head{color:#fff;text-align:center;margin-bottom:18px}
.public-head img{width:64px;height:64px;background:#fff;border-radius:50%;padding:4px;object-fit:contain}
.public-head h1{color:#fff;font-size:1.35rem;margin:8px 0 2px}
.public-head p{margin:0;opacity:.85;font-size:.9rem}
.info-list{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.9rem;margin:0}
.info-list dt{color:var(--redup)} .info-list dd{margin:0;font-weight:500}
.foot{color:var(--redup);font-size:.8rem;text-align:center;padding:18px 16px 28px}

/* Login */
.login-box{max-width:380px;margin:40px auto}
.qr-box{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:12px;display:inline-block}
.qr-box svg{display:block}
.copy-row{display:flex;gap:6px}
.copy-row .input{font-size:.85rem}
.verif-ok{border-left:6px solid var(--hijau)} .verif-bad{border-left:6px solid var(--merah)}
@media print{.topbar,.foot,.no-print{display:none!important}}