/* Minimal, self-contained theme — no build-time CSS framework. Tokens loosely mirror the main
   app's palette (platform/apps/web/src/index.css) for brand consistency, but this page reacts to
   the OS-level prefers-color-scheme rather than an in-app toggle: it's a single-purpose page on
   its own origin, with no shared localStorage/toggle to read from the main app. */
:root {
  --canvas: 246 247 249;
  --surface: 255 255 255;
  --surface-2: 241 243 245;
  --fg: 15 23 42;
  --fg-muted: 100 116 139;
  --border: 15 23 42;
  --accent: 37 99 235;
  --accent-strong: 29 78 216;
  --green: 22 163 74;
  --amber: 217 119 6;
  --rose: 220 38 38;
  --btn-fg: 255 255 255;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: 5 8 19;
    --surface: 12 17 30;
    --surface-2: 17 25 43;
    --fg: 235 238 245;
    --fg-muted: 139 149 173;
    --border: 255 255 255;
    --accent: 109 152 240;
    --accent-strong: 148 178 245;
    --green: 91 214 160;
    --amber: 231 196 106;
    --rose: 231 138 168;
    --btn-fg: 12 17 30;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: rgb(var(--canvas));
  color: rgb(var(--fg));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(var(--border), 0.1);
}
.brand { font-weight: 700; font-size: 1rem; }
.brand-sub { font-size: 0.8rem; color: rgb(var(--fg-muted)); }

.content {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.footer {
  text-align: center;
  font-size: 0.75rem;
  color: rgb(var(--fg-muted));
  padding: 1.25rem;
}

.card {
  background: rgb(var(--surface));
  border: 1px solid rgba(var(--border), 0.1);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.card + .card { margin-top: 1rem; }

.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 40vh; gap: 0.75rem; }

.doc-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.25rem; line-height: 1.3; }
.doc-meta { font-size: 0.85rem; color: rgb(var(--fg-muted)); margin: 0 0 1rem; }
.doc-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.notice {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(var(--accent), 0.08);
  border: 1px solid rgba(var(--accent), 0.25);
  font-size: 0.85rem;
  color: rgb(var(--fg));
}

.field { margin-bottom: 1rem; }
.label { display: block; font-size: 0.8rem; font-weight: 600; color: rgb(var(--fg-muted)); margin-bottom: 0.35rem; }
.input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(var(--border), 0.18);
  background: rgb(var(--surface-2));
  color: rgb(var(--fg));
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
}
.input:focus { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgba(var(--accent), 0.25); }

.consent-row {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--border), 0.12);
  background: rgb(var(--surface-2));
  font-size: 0.85rem;
  color: rgb(var(--fg-muted));
  margin-bottom: 1rem;
}
.consent-row input { margin-top: 0.2rem; width: 16px; height: 16px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: none; border-radius: 10px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: rgb(var(--accent)); color: rgb(var(--btn-fg)); }
.btn-primary:not(:disabled):hover { background: rgb(var(--accent-strong)); }

.error-text {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: rgb(var(--rose));
}

.spinner {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border: 2px solid rgba(var(--fg-muted), 0.3);
  border-top-color: rgb(var(--fg-muted));
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.success-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(var(--green), 0.15);
  color: rgb(var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

.card-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.9rem; }

.receipt {
  text-align: left;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgb(var(--fg-muted));
}
.receipt dt { font-weight: 600; color: rgb(var(--fg-muted)); margin-top: 0.5rem; }
.receipt dd { margin: 0.15rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; color: rgb(var(--fg)); }

.hint { font-size: 0.8rem; color: rgb(var(--fg-muted)); margin-top: 0.35rem; }