/* Editor lembaran — gaya Vercel dipermudah: kertas cerah, garis rambut,
   satu aksen hijau, angka monospace. */
*{box-sizing:border-box}
:root{
  --ink:#171717; --ink2:#4D4D4D; --ink3:#7D7D7D;
  --hair:#EBEBEB; --paper:#FFFFFF; --bg:#FAFAFA; --accent:#297A3A;
  --alert:#D0342C; --kod:#F6F6F5;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Lembaran,system-ui,-apple-system,sans-serif;line-height:1.45;
  -webkit-font-smoothing:antialiased}
.kepala{max-width:1320px;margin:0 auto;padding:26px 18px 0}
.kepala h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.kepala p{margin:7px 0 0;font-size:13px;color:var(--ink2);max-width:70ch}
.kepala a{color:var(--accent);font-weight:600;text-decoration:none}

.susun{max-width:1320px;margin:0 auto;padding:18px;
  display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:1000px){
  .susun{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
  .panel-kawal{order:2;position:sticky;top:18px}
  .panel-lukis{order:1}
}

/* ---- pratonton ---- */
.panel-lukis{background:var(--paper);border:1px solid var(--hair);
  border-radius:10px;overflow:hidden}
.kotak-svg{overflow:auto;-webkit-overflow-scrolling:touch;background:#FCFCFB}
@media(max-width:999px){.kotak-svg{max-height:46vh}}
.kotak-svg svg{display:block;width:100%;height:auto}
.bar-alat{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--hair);background:#fff}
.bar-alat .kiri{flex:1 1 auto;font-size:12.5px;color:var(--ink2);
  font-family:LembaranMono,ui-monospace,monospace}
.btn{appearance:none;border:1px solid var(--hair);background:#fff;
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:7px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.btn:active{background:#F5F5F5;transform:translateY(1px)}
.btn-utama{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-utama:active{background:#226632}
.semak{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--hair);font-size:12.5px;
  font-family:LembaranMono,ui-monospace,monospace}
.titik{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.titik.ok{background:var(--accent)}
.titik.rosak{background:var(--alert)}
.senarai-cacat{margin:8px 0 0;padding-left:16px;font-size:12px;color:var(--alert)}

/* ---- kawalan ---- */
.panel-kawal{background:var(--paper);border:1px solid var(--hair);
  border-radius:10px;padding:14px}
.kumpulan{border-top:1px solid var(--hair);padding:14px 0 4px}
.kumpulan:first-child{border-top:none;padding-top:2px}
.kumpulan h2{margin:0 0 10px;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.baris{display:grid;grid-template-columns:1fr 88px;gap:10px;
  align-items:center;margin-bottom:9px}
.baris label{font-size:13px}
.baris label em{display:block;font-style:normal;font-size:11px;
  color:var(--ink3)}
.baris input{width:100%;font-family:LembaranMono,ui-monospace,monospace;
  font-size:13.5px;text-align:right;padding:8px 10px;color:var(--ink);
  border:1px solid var(--hair);border-radius:6px;background:var(--kod)}
.baris input:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(41,122,58,.12)}
.praetel{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.praetel .btn{padding:7px 11px;font-size:12.5px;flex:1 1 auto}

/* ---- jadual terbitan ---- */
.terbit{margin-top:6px;border-collapse:collapse;width:100%}
.terbit th{font-family:LembaranMono,monospace;font-size:10px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);text-align:left;padding:8px 0 6px;
  border-bottom:1px solid var(--ink)}
.terbit td{font-size:12.5px;padding:7px 0;border-bottom:1px solid #F2F1EF;
  vertical-align:top}
.terbit td:last-child{text-align:right;font-family:LembaranMono,monospace;
  white-space:nowrap;color:var(--ink)}
.terbit tr:last-child td{border-bottom:none}
.terbit tr.jumlah td{font-weight:600;border-top:1px solid var(--ink);
  border-bottom:none;padding-top:9px}
.terbit th{display:table-cell}
.terbit tr.tajuk-2 th{border-bottom:1px solid var(--ink);padding-top:16px;
  border-top:none}
.amaran{margin-top:10px;padding:10px 12px;border-radius:7px;
  background:#FEF7F6;border-left:3px solid var(--alert);font-size:12.5px;
  color:#7A1F1A}
.amaran b{display:block;margin-bottom:3px;color:var(--alert)}
.amaran ul{margin:4px 0 0;padding-left:16px}

.kaki{max-width:1320px;margin:0 auto;padding:0 18px 60px;
  font-size:12px;color:var(--ink3);line-height:1.6}
@media print{body{background:#fff}.panel-kawal,.bar-alat,.kepala,.kaki{display:none}}