:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%;
  color: #152522;
  background: #f4f7f5;
  --ink: #152522;
  --muted: #526762;
  --brand: #173f3a;
  --accent: #d0eee4;
  --surface: #ffffff;
  --border: #c8d5d1;
  --warning: #fff4d6;
  --warning-border: #9a6500;
  --focus: #7656d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(160deg, #edf8f3 0, #f7f4fb 55%, #f4f7f5 100%);
}

button, input, select, textarea { font: inherit; }

button, input, select {
  min-height: 44px;
}

button {
  border: 1px solid var(--brand);
  border-radius: 12px;
  padding: .7rem 1rem;
  color: #fff;
  background: var(--brand);
  font-weight: 700;
  cursor: pointer;
}

button.secondary {
  color: var(--brand);
  background: var(--surface);
}

button:disabled { cursor: wait; opacity: .65; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: .5rem;
  left: .5rem;
  min-height: 44px;
  padding: .75rem;
  transform: translateY(-150%);
  color: #fff;
  background: var(--brand);
}

.skip-link:focus { transform: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 92%);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .65rem;
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .04em;
}

.status-pill {
  margin: 0;
  padding: .45rem .75rem;
  border-radius: 999px;
  color: var(--brand);
  background: var(--accent);
  font-size: .875rem;
  font-weight: 700;
}

.shell {
  width: min(100% - 2rem, 44rem);
  margin: 0 auto;
  padding: 1rem 0 calc(2rem + env(safe-area-inset-bottom));
}

.card, .warning {
  margin-bottom: 1rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgb(23 63 58 / 7%);
}

.warning {
  border-color: var(--warning-border);
  background: var(--warning);
}

h1, h2 { line-height: 1.2; }
h1 { font-size: clamp(1.65rem, 7vw, 2.25rem); }
h2 { font-size: 1.2rem; }
p { line-height: 1.55; }
.boundary { color: var(--muted); }

form { display: grid; gap: .65rem; }
label { margin-top: .35rem; font-weight: 700; }

input, select, textarea {
  width: 100%;
  border: 1px solid #7c8e89;
  border-radius: 10px;
  padding: .7rem .8rem;
  color: var(--ink);
  background: #fff;
}

textarea { resize: vertical; }
.form-status { min-height: 1.5em; color: var(--muted); }

.account-row, .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-row h2, .account-row p, .section-heading h2, .section-heading p { margin: .25rem 0; }
.record-list { margin: 1rem 0 0; padding: 0; list-style: none; }

.record-list li {
  padding: .9rem 0;
  border-top: 1px solid var(--border);
}

.record-list strong, .record-list span { display: block; }
.record-list span { margin-top: .25rem; color: var(--muted); font-size: .9rem; }

[hidden] { display: none !important; }

@media (max-width: 420px) {
  .account-row, .section-heading { align-items: stretch; flex-direction: column; }
  .account-row button, .section-heading button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}