:root {
  --orange: #f04b1e;   /* sampled from Logo.jpg */
  --orange-deep: #c43a12;
  --orange-soft: #ffe3d1;
  --cream: #fff7f0;
  --ink: #3a2a20;
  --muted: #8a776a;
  --ok: #2e9d57;
  --bad: #d93025;
  --card: #ffffff;
  --line: #f0dccd;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Kanit", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--bad); min-height: 1.4em; }

.btn {
  font: inherit; font-weight: 600;
  border: 0; border-radius: 14px;
  padding: 12px 20px;
  background: var(--orange); color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--orange-deep);
  transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-deep); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--line); border: 1px solid var(--line); }
.btn.dark { background: var(--ink); box-shadow: 0 4px 0 #000; }
.btn.red { background: var(--bad); box-shadow: 0 4px 0 #8f1d15; }
.btn:disabled { opacity: .45; cursor: default; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px;
  opacity: 0; transition: .25s; pointer-events: none; z-index: 99; max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }