:root { --navy: #080739; --gold: #FFAC40; --blue: #224AFA; --ink: #14143a; --muted: #5b5d7a; --line: #dcdcea; --paper: #f6f6fb; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100dvh; font: 16px/24px "Outfit", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--paper); }

.bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid var(--line); }
.bar__brand { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; }
.bar__title { flex: 1 1 auto; min-width: 0; display: grid; }
.bar__title b { font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__title small { font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__ai { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.bar__ai[hidden] { display: none; }

.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #b3b5c9; }
.pill.is-on { color: #0f5a37; border-color: #bfe3cf; background: #eefaf3; }
.pill.is-on::before { background: #1f9d5b; }

.btn { font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--paper); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn--primary:hover { background: #ffb95a; }
.btn--ghost { border-color: var(--line); }
.btn[disabled] { opacity: .6; cursor: progress; }

.stage { flex: 1 1 auto; min-height: 0; display: flex; }
.stage iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
.stage__note { margin: auto; padding: 24px; max-width: 520px; text-align: center; color: var(--muted); }
.stage__note b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 20px; line-height: 28px; font-weight: 600; }
.stage__note a { color: var(--blue); }

.sheet { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 16px 48px rgba(8, 7, 57, .28); }
.sheet::backdrop { background: rgba(8, 7, 57, .5); }
.sheet form { display: grid; gap: 12px; padding: 24px; }
.sheet h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.sheet p { margin: 0; }
.sheet ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }
.sheet label { font-size: 13px; line-height: 18px; font-weight: 600; }
.sheet input { font: inherit; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #b9bbd0; border-radius: 10px; background: #fff; color: var(--ink); }
.sheet__error { padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #8a1c1c; font-size: 14px; line-height: 20px; }
.sheet__error[hidden] { display: none; }
.sheet__actions { display: flex; justify-content: flex-end; gap: 8px; }
.sheet__hint { font-size: 13px; line-height: 18px; color: var(--muted); }

@media (max-width: 560px) {
  .bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .bar__title b { font-size: 15px; }
  .bar__title small { font-size: 12px; }
  .pill { display: none; }
  .pill.is-on { display: inline-flex; }
  .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .sheet form { padding: 20px 16px; }
}