:root {
  color: #17243a;
  background: #f3f7fa;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page-shell {
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #082b67;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 44px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: white;
  background: #082b67;
  border-right: 8px solid #00afaf;
}

.card {
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 2rem);
  background: white;
  border: 1px solid #d9e3ea;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgb(8 43 103 / 8%);
}

h1, h2, p { margin-top: 0; }
h1 { color: #082b67; font-size: clamp(1.75rem, 5vw, 2.35rem); }
h2 { font-size: 1.1rem; }
.eyebrow { color: #067a7a; font-weight: 750; margin-bottom: .4rem; }

fieldset, .field, .review, .privacy, .deletion-result {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
}

legend, .field > label { font-weight: 720; margin-bottom: .65rem; }
.field > label { display: block; }
label span { font-weight: 450; color: #526173; }

.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.options-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.options label, .consent {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1px solid #b9c8d5;
  border-radius: 10px;
  cursor: pointer;
}

.options label:has(input:checked) {
  border-color: #082b67;
  outline: 2px solid #082b67;
  outline-offset: 1px;
}

input[type="radio"], input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 .6rem 0 0;
  accent-color: #082b67;
  flex: none;
}

textarea, input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: .75rem;
  border: 1px solid #9fb0bf;
  border-radius: 10px;
  color: inherit;
  background: white;
  font: inherit;
}

textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #00afaf;
  outline-offset: 3px;
}

.error { min-height: 1.15rem; margin: .35rem 0 0; color: #a11a2b; font-size: .9rem; }
.review { padding: 1rem; background: #eef8f8; border-left: 4px solid #00afaf; }
.privacy { padding: 1rem; background: #fff8e8; border-left: 4px solid #d28a00; }
.privacy-warning { margin: 0 0 .55rem; color: #713e00; }
.deletion-result { padding: 1rem; background: #eef8f8; border: 2px solid #067a7a; border-radius: 10px; }
.deletion-result output { display: block; padding: .75rem; overflow-wrap: anywhere; background: white; border: 1px solid #9fb0bf; border-radius: 8px; font-family: ui-monospace, monospace; font-weight: 700; }
.delete-card { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #d9e3ea; }
.delete-card label { display: block; margin-bottom: .65rem; font-weight: 720; }
.delete-card > form > button, .action-button { min-height: 48px; margin-top: .75rem; padding: .7rem 1rem; border: 1px solid #738496; border-radius: 10px; font: inherit; font-weight: 720; cursor: pointer; }
.confirmation { margin-top: 1rem; padding: 1rem; background: #fff3f3; border-left: 4px solid #a11a2b; }
.review p:last-child { margin-bottom: 0; }
.summary { color: #31455d; font-weight: 650; }

.actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.actions a, .actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 720;
  text-decoration: none;
}

.actions button { border: 1px solid #082b67; color: white; background: #082b67; cursor: pointer; }
.actions button:disabled { opacity: .65; cursor: wait; }
.secondary { border: 1px solid #738496; color: #263a50; background: white; }
.status { min-height: 1.5rem; margin: 1rem 0 0; font-weight: 650; }

@media (max-width: 599px) {
  .page-shell { width: min(100% - 1rem, 760px); padding-top: .5rem; }
  .card { border-radius: 12px; }
  .options, .options-five { grid-template-columns: 1fr; }
  .actions { flex-direction: column-reverse; }
  .actions a, .actions button { width: 100%; }
}