.a9-phone-dialog, .a9-phone-panel {
  box-sizing: border-box; width: min(28rem, calc(100% - 2rem)); padding: 1.75rem;
  background: var(--surface-solid, #101a24); color: var(--text, #f4f7f8);
  border: 1px solid var(--border, #34414d); border-radius: 1.25rem;
  font: 1rem/1.55 system-ui, sans-serif; text-align: left;
}
.a9-phone-dialog { margin: auto; max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: 0 1rem 5rem #0006; }
.a9-phone-dialog::backdrop { background: #020710b8; }
.a9-phone-dialog h2, .a9-phone-panel h1 { font: 650 1.55rem/1.25 system-ui, sans-serif; margin: 0 0 1rem; }
.a9-phone-dialog p, .a9-phone-panel p { margin: .75rem 0; }
.a9-phone-dialog button, .a9-phone-panel button, .a9-phone-panel a {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--border, #526170);
  border-radius: .65rem; font: inherit; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.a9-phone-dialog button:focus-visible, .a9-phone-panel :is(button,input,a):focus-visible { outline: 3px solid var(--accent,#e17e47); outline-offset: 3px; }
.a9-phone-dialog button:disabled, .a9-phone-panel button:disabled { opacity: .55; cursor: wait; }
.a9-phone-dialog .a9-phone-primary, .a9-phone-panel button[type=submit] { background: var(--accent,#e17e47); color: #101018; border-color: transparent; }
.a9-phone-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.a9-phone-qr { display: block; width: min(100%, 17rem); height: auto; margin: 1rem auto; border: .65rem solid white; border-radius: .75rem; box-sizing: border-box; }
.a9-phone-code { display: block; font: 650 2rem/1.3 ui-monospace,monospace; letter-spacing: .2em; text-align: center; margin: .75rem 0; }
.a9-phone-muted { font-size: .875rem; color: var(--muted,#b8c6d2); }
.a9-phone-eyebrow { font-size: .75rem; letter-spacing: .12em; color: var(--accent,#e17e47); }
.a9-phone-page { min-height: 100dvh; margin: 0; display: grid; place-items: center; background: var(--bg,#050a10); }
.a9-phone-panel { margin: 1rem auto; }
.a9-phone-panel form { margin-top: 1rem; }
.a9-phone-panel input { display: block; box-sizing: border-box; width: 100%; border: 1px solid var(--border,#526170); border-radius: .65rem; background: transparent; color: inherit; padding: .75rem; font: 1.5rem ui-monospace,monospace; margin-top: .5rem; }
.a9-phone-dialog [hidden], .a9-phone-panel [hidden] { display: none !important; }
@media (max-width: 440px) { .a9-phone-dialog, .a9-phone-panel { padding: 1.25rem; } .a9-phone-actions { flex-direction: column; } }