:root {
  --bg: #f4f1ea;
  --fg: #1c1c1c;
  --brand: #1f3a5f;
  --muted: #666;
  --provisional: #8a4b08;
  --final: #1d6b3a;
}
* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, "Noto Sans TC", sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
header {
  background: var(--brand);
  color: #fff;
  padding: 16px max(16px, env(safe-area-inset-left));
}
header h1 { margin: 0; font-size: 1.4rem; }
.lede { margin: 2px 0 8px; opacity: .85; font-size: .9rem; }
nav { display: flex; gap: 8px; }
.tab, .action, select, input {
  min-height: 44px;
  font: inherit;
}
.tab {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 8px 12px;
}
.tab[aria-current="page"] { background: #fff; color: var(--brand); }
main { padding: 16px; max-width: 960px; margin: 0 auto; }
.note { color: var(--muted); }
.field { display: block; margin: 12px 0; }
.field select, .field input, .action { width: 100%; }
.action {
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 10px 12px;
}
.action.secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.status { font-weight: 700; }
.status.provisional { color: var(--provisional); }
.status.final { color: var(--final); }
.list { list-style: none; padding: 0; margin: 12px 0; }
.list li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}
.switch {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
  white-space: nowrap;
  min-height: 44px;
}
.name { flex: 1; min-width: 0; }
.meta { color: var(--muted); font-size: .9rem; }
.group { font-weight: 700; }
@media (max-width: 360px) {
  main, header { padding-left: 12px; padding-right: 12px; }
}