:root {
  color-scheme: light dark;
  --bg: #f0f3f8;
  --panel: #fff;
  --fg: #172641;
  --subtle: #4f6078;
  --line: #7888a2;
  --primary: #1851a6;
  --focus: #2164c1;
  --error: #a71832;
  font: 16px/1.5 "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111827; --panel: #1b2537; --fg: #edf2fa; --subtle: #b2c0d4;
          --line: #899cb7; --primary: #285fae; --focus: #9ac5ff; --error: #ffbac6; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); }
.layout { width: min(100% - 2rem, 28rem); margin: clamp(2rem, 14vh, 8rem) auto 2rem; }
.brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; font-weight: 700; }
.mark { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: .65rem; background: var(--primary); color: #fff; }
.panel { background: var(--panel); padding: clamp(1.25rem, 5vw, 2.25rem); border-radius: 1.15rem; box-shadow: 0 6px 24px #0d193014; }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 1rem; }
.service, dt { color: var(--subtle); }
.field { margin: .85rem 0; }
label { display: block; margin-bottom: .25rem; font-weight: 600; }
input { width: 100%; border: 1px solid var(--line); border-radius: .5rem; padding: .65rem .75rem; background: var(--panel); color: var(--fg); font: inherit; }
button, .button { display: block; width: 100%; background: var(--primary); color: #fff; border: 0; border-radius: .5rem; padding: .7rem; font: inherit; font-weight: 600; cursor: pointer; margin-top: 1.25rem; text-align: center; text-decoration: none; }
button:disabled { opacity: .65; cursor: wait; }
.back { display: inline-block; color: var(--fg); margin-top: .75rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.error { color: var(--error); }
.profile { margin: 1rem 0; }
dd { margin: 0 0 .7rem; overflow-wrap: anywhere; }