:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #251b16;
  background: #f8f2eb;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(238, 138, 82, 0.18), transparent 34rem),
    #f8f2eb;
}

button, input, select { font: inherit; }

.page-shell {
  min-height: 100vh;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  place-items: start center;
}

.card {
  width: min(100%, 720px);
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid #eadfd4;
  border-radius: 24px;
  background: rgba(255, 253, 250, 0.96);
  box-shadow: 0 24px 70px rgba(80, 51, 35, 0.12);
}

.topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand { margin-right: auto; color: #c85522; font-size: 1.3rem; font-weight: 800; text-decoration: none; }
.language-label { font-size: 0.875rem; color: #6e5b50; }
select { max-width: 100%; padding: 8px 10px; border: 1px solid #d8cabe; border-radius: 10px; background: #fff; color: inherit; }

.intro { margin: 38px 0 24px; }
.eyebrow { margin: 0 0 8px; color: #c85522; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
h1 { margin: 0; max-width: 16ch; font-size: clamp(2rem, 8vw, 3.75rem); line-height: 1.02; letter-spacing: -0.045em; }
.lede { max-width: 56ch; margin: 18px 0 0; color: #66544a; font-size: 1.08rem; line-height: 1.65; }
h2 { margin: 0 0 14px; font-size: 1.2rem; }

.notice { margin: 28px 0; padding: 20px; border-radius: 16px; background: #fff3e7; }
.notice ul { margin: 0; padding-left: 1.35rem; }
.notice li { margin: 8px 0; line-height: 1.55; }
.status { margin: 20px 0; padding: 14px 16px; border-radius: 12px; background: #eaf5ef; line-height: 1.45; }
.status.error { color: #8a221f; background: #fdecea; }

form, .provider-actions, .confirm-actions { display: grid; gap: 12px; }
label { font-weight: 650; }
input[type="text"], input[type="password"] { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #cdbdb0; border-radius: 12px; color: inherit; background: #fff; }
button { min-height: 48px; padding: 11px 16px; border-radius: 12px; border: 0; font-weight: 750; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(200, 85, 34, 0.35); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.52; }
.primary { color: #fff; background: #cf5c29; }
.primary:hover:not(:disabled) { background: #ad461b; }
.secondary { color: #352820; border: 1px solid #d8cabe; background: #fff; }
.danger { color: #fff; background: #b72e2a; }
.text-button { color: #6e5b50; background: transparent; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #826f63; }
.divider::before, .divider::after { content: ""; height: 1px; background: #e5d9cf; flex: 1; }
.check-row { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; line-height: 1.5; }
.check-row input { width: 20px; height: 20px; flex: 0 0 auto; }

@media (min-width: 768px) {
  .page-shell { padding-top: max(52px, env(safe-area-inset-top)); padding-bottom: max(52px, env(safe-area-inset-bottom)); }
  .provider-actions, .confirm-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .page-shell { place-items: start center; }
  .intro { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}