:root {
  --latar: #ffffff;
  --teks: #000000;
  --aksen: #c8102e;
  --garis: #d9d9d9;
  --kotak: #f6f6f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #000000;
    --teks: #ffffff;
    --garis: #3a3a3a;
    --kotak: #161616;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: system-ui, "Segoe UI", sans-serif;
  line-height: 1.5;
}
header {
  padding: 24px 20px 16px;
  max-width: 560px;
  margin: 0 auto;
  border-bottom: 4px solid var(--aksen);
}
header h1 { margin: 8px 0 0; font-size: 2rem; }
header p { margin: 0; opacity: .75; }
.balik { color: var(--aksen); text-decoration: none; font-weight: 600; }
main { max-width: 560px; margin: 0 auto; padding: 20px; }
h2 { margin-top: 0; }
label { display: block; margin: 14px 0 4px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--teks);
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, .balik:focus-visible {
  outline: 3px solid var(--aksen);
  outline-offset: 1px;
}
fieldset {
  margin: 18px 0 0;
  padding: 4px 14px 14px;
  border: 1px solid var(--garis);
  border-radius: 6px;
}
legend { padding: 0 6px; font-weight: 700; color: var(--aksen); }
.kadar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px;
  background: var(--kotak);
  border-left: 4px solid var(--aksen);
}
.kadar strong { font-size: 1.25rem; text-align: right; }
button {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--aksen);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
.ralat { color: var(--aksen); font-weight: 600; margin: 14px 0 0; }
.berjaya { padding: 20px; background: var(--kotak); border-left: 4px solid var(--aksen); }
.nombor { font-size: 1.8rem; font-weight: 800; letter-spacing: .04em; margin: 4px 0 12px; }
.pautan { color: var(--aksen); font-weight: 600; }
[hidden] { display: none !important; }