*{-webkit-tap-highlight-color:transparent}
button{outline:none;user-select:none}
button:focus-visible{outline:2px solid #1E6FD9;outline-offset:2px}
:root{--g:#0B7A55;--p:#1E3A8A;--pd:#172554;--gd:#065F46;--b:#1E6FD9;--r:#E11D48;--bg:#EEF2F8;--t:#16202E}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t);font:15px 'Plus Jakarta Sans',sans-serif;padding-bottom:40px}
h1,h2,h3,.mono,.save{font-family:'Noto Sans Mono',monospace}
header{background:var(--pd);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 16px;position:sticky;top:0;z-index:5}
header img{width:34px;height:34px}h1{font-size:17px;margin:0;flex:1}
#out{background:#ffffff22;color:#fff;border:0;border-radius:8px;padding:6px 10px;font:inherit;cursor:pointer}
main{max-width:720px;margin:0 auto;padding:16px}
main{max-width:960px}#hist{margin-top:14px}
.card{background:#fff;border-radius:22px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px #0001}
h2,h3{margin:0 0 12px;font-size:18px}
.dt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dt label{font-weight:600;width:100%}
input{font:inherit;padding:11px 12px;border:1px solid #cfd8d4;border-radius:12px;width:100%;margin-bottom:10px}
.dt input{width:auto;margin:0}#mode{font-size:13px;font-weight:600;color:var(--b)}
.all{width:100%;background:#fff;color:var(--p);border:0;font:600 15px 'Plus Jakarta Sans';padding:10px;margin-bottom:12px;border-radius:14px;box-shadow:0 2px 8px #0002;cursor:pointer}
.nm{font-weight:600;font-size:16px;margin:20px 0 8px}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.row button{border:0;border-radius:14px;padding:13px 0;font:600 14px 'Plus Jakarta Sans';color:#6b7873;background:#EDF1F0;box-shadow:inset 2px 2px 5px #fff,inset -2px -2px 5px #0001;cursor:pointer}
.row button.on{color:#fff;box-shadow:none}
.row .H.on{background:var(--g)}.row .I.on,.row .S.on{background:var(--b)}.row .G.on{background:var(--r)}
.save{width:100%;background:var(--p);color:#fff;border:0;border-radius:20px;padding:17px;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #1E3A8A55}
.err{color:var(--r);margin:8px 0 0}
#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--t);color:#fff;padding:10px 18px;border-radius:12px;opacity:0;transition:.3s;pointer-events:none;z-index:9}
#toast.s{opacity:1}
.mo{display:flex;align-items:center;justify-content:space-between}
.mo button{border:0;background:#EDF1F0;border-radius:12px;width:42px;height:42px;font-size:22px;cursor:pointer}
.sc{overflow-x:auto}table{border-collapse:collapse;width:100%}
th,td{padding:7px 8px;text-align:center;white-space:nowrap;border-bottom:1px solid #eef1f0}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:#fff;font-weight:600}
th small{display:block;font-weight:400;color:#7a8782}
th button{border:0;background:none;cursor:pointer;font-size:14px;padding:2px}
td b{font-weight:800}.H{color:var(--g)}.I,.S{color:var(--b)}.G{color:var(--r)}td.x{color:#c5cdc9}
.leg{font-size:13px;color:#52605a}.leg i{font-style:normal;font-weight:800;margin-left:8px}
@media(min-width:800px){.row button:hover:not(.on){background:#e2e9e6}}

.save.alt{margin-top:14px;background:#fff;color:var(--p);box-shadow:0 2px 8px #0002}

.all svg{vertical-align:-3px;margin-right:4px}
.ic{border:0;background:#EDF1F0;width:32px;height:32px;border-radius:10px;color:var(--b);cursor:pointer;margin:0 2px;display:inline-grid;place-items:center}
.ic.d{color:var(--r)}.ic:hover{filter:brightness(.94)}
tr.ac td{border-bottom:0;padding-top:10px;color:#52605a}
@media(min-width:1000px){
  main{max-width:1600px;padding:12px 20px}
  #cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
  #cards .card{margin:0;padding:12px 14px}
  #cards h3{font-size:16px;margin-bottom:8px}
  .all{padding:7px;margin-bottom:4px;font-size:13px}
  .nm{font-size:13.5px;margin:15px 0 7px}
  .row{gap:5px}
  .row button{font-size:12.5px;border-radius:10px;padding:0;height:clamp(24px,calc((100vh - 255px)/9 - 42px),34px)}
  .dt{padding:8px 14px;margin-bottom:12px;flex-direction:row}.dt label{width:auto;margin-right:6px}
  .save{padding:13px}
}

header{flex-wrap:wrap;row-gap:8px}
#hd{display:flex;align-items:center;gap:8px;order:2}
#out{order:3}
#hd[hidden]{display:none}
#tgl{width:auto;margin:0;padding:6px 10px;font-size:13px;border:0;border-radius:10px;background:#fff;color:var(--t)}
#mode{font-size:12px;font-weight:600;color:#fff;background:#ffffff26;padding:4px 10px;border-radius:999px;white-space:nowrap}
#mode:empty{display:none}
@media(max-width:600px){h1{font-size:15px}#hd{order:4;width:100%}#out{margin-left:auto}header{padding:8px 12px}}
@media(min-width:1000px){header{padding:8px 20px}main{padding-top:12px}}

footer{text-align:center;font-size:12.5px;color:#5b6676;max-width:640px;margin:8px auto 0;padding:0 20px 24px;line-height:1.6}
#cards .card .nm:first-of-type{margin-top:12px}

/* ===== Mode gelap (mengikuti pengaturan perangkat) ===== */
@media(prefers-color-scheme:dark){
  :root{color-scheme:dark;--bg:#0D1320;--t:#E6EBF5;--pd:#101B45}
  .card{background:#171F33;box-shadow:0 2px 12px #0006}
  input{background:#1F293F;border-color:#334058;color:var(--t)}
  #tgl{background:#1F293F;color:var(--t)}
  .all,.save.alt{background:#1F293F;color:#9DB8FF;box-shadow:0 2px 8px #0005}
  .row button{background:#222C44;color:#9AA6BC;box-shadow:inset 2px 2px 5px #ffffff0d,inset -2px -2px 6px #0006}
  .row button.on{color:#fff;box-shadow:none}
  .mo button,.ic{background:#222C44}
  .ic{color:#5B9BFF}.ic.d{color:#FF5C7D}
  th,td{border-bottom-color:#232D45}
  th:first-child,td:first-child{background:#171F33}
  th small{color:#8895AD}
  td.x{color:#3A455C}
  .H{color:#1FB887}.I,.S{color:#5B9BFF}.G{color:#FF5C7D}
  .leg,tr.ac td,footer{color:#8895AD}
  #toast{background:#2A344D}
  .err{color:#FF5C7D}
  @media(min-width:800px){.row button:hover:not(.on){background:#2B3652}}
}