[hidden] { display: none !important; }
.pairing-code { font: bold 2rem monospace; letter-spacing: .15em; text-align: center; color: var(--orange-accent); user-select: all; }
.app-page { overflow: auto; padding: 1rem; min-height: 100vh; }
.app-card { max-width: 48rem; margin: 1rem auto; padding: 1.5rem; background: #211235; border-radius: 1rem; }
.app-page h1,.profile-dialog h2 { color: var(--orange-accent); }
.app-page a { color: var(--orange-accent); }
.app-page label,.profile-dialog label { display: block; margin: 1rem 0; }
.app-page input,.app-page textarea,.profile-dialog input,.profile-dialog textarea { display: block; width: 100%; padding: .75rem; border: 1px solid #a28ab8; border-radius: .4rem; background: #160d23; color: #fff; font: inherit; }
.app-page textarea { min-height: 8rem; }
.app-page button,.profile-dialog button { min-height: 44px; margin: .35rem; font-family: inherit; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--orange-accent); outline-offset: 3px; }
.profile-backdrop { position: fixed; inset: 0; z-index: 10000; background: #10051bd9; display: flex; align-items: center; justify-content: center; padding: max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom)); }
.profile-dialog { position: relative; width: 100%; max-width: 36rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; border: 1px solid #887199; border-radius: 1rem; background: #2a1845; color: #f5f0f8; }
.profile-dialog-header { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; min-height: 44px; margin-bottom: 1.25rem; }
.profile-dialog h2 { grid-column: 2; margin: 0; color: var(--orange-accent); font-size: clamp(1.4rem,4vw,2rem); line-height: 1.15; text-align: center; }
.profile-dialog .profile-header-button { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,.2); border-radius: .5rem; background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.profile-dialog .profile-header-button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }
.profile-dialog .profile-back { grid-column: 1; }
.profile-dialog .profile-close { grid-column: 3; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 0; }
.profile-dialog .profile-actions button { flex: 0 1 auto; margin: 0; }
.profile-sign-in-actions { justify-content: center; }
.profile-menu-actions { justify-content: center; }
.profile-dialog .profile-sign-in-actions button { padding: .65rem .7rem; white-space: nowrap; }
.profile-dialog input[type=checkbox] { display: inline-block; width: auto; margin-right: .5rem; }
.profile-dialog input[type=color] { height: 44px; padding: .2rem; }
.profile-dialog canvas { width: min(100%,256px); height: auto; display: block; margin: auto; border: 2px solid var(--orange-accent); }
.request-card { border: 1px solid #857292; border-radius: .5rem; padding: 1rem; margin: 1rem 0; overflow-wrap: anywhere; }
.request-card p { white-space: pre-wrap; }
/* Compact glass panels echo the original landing-page dialogs. */
.profile-backdrop { background: transparent; overflow: hidden; }
.profile-backdrop::before { content: ''; position: absolute; inset: 0; background: hsla(270,47%,26%,.75); opacity: 0; transition: opacity 1s ease; }
.profile-backdrop.is-visible::before { opacity: 1; }
.profile-dialog { z-index: 1; max-width: 26rem; padding: .5rem 1.5rem 1.5rem; border: 2px solid rgba(255,255,255,.2); border-radius: .75rem; background: rgba(40,22,65,.88); transform: translateY(-100vh); transition: transform 1s ease; scrollbar-width: none; }
.profile-dialog::-webkit-scrollbar { display: none; }
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .profile-dialog { background: radial-gradient(ellipse 100% 15vh at 50% 0%,rgba(255,255,255,.1),transparent),rgba(26,15,46,.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.profile-backdrop.is-visible .profile-dialog { transform: translateY(0); }
.profile-dialog-header { grid-template-columns: 44px minmax(0,1fr) 44px; margin-bottom: .75rem; gap: .4rem; }
.profile-dialog h2 { font: 600 1.25rem/1.25 system-ui,sans-serif; color: var(--orange-accent); }
.profile-progress { grid-column: 1; grid-row: 1; font: 600 1.25rem/1.25 system-ui,sans-serif; opacity: .45; }
.profile-dialog .profile-back { grid-row: 1; }
.profile-dialog-header.has-step-back { grid-template-columns: 44px 2rem minmax(0,1fr) 2rem 44px; }
.has-step-back .profile-progress { grid-column: 2; text-align: center; }
.profile-dialog .has-step-back h2 { grid-column: 3; }
.profile-dialog .has-step-back .profile-close { grid-column: 5; }
.profile-dialog .profile-close { grid-row: 1; }
.profile-dialog h2 { grid-row: 1; }
.profile-dialog .profile-header-button { background: transparent; font-size: 1.3rem; font-weight: 700; color: rgba(255,255,255,.45); }
.profile-dialog .profile-header-button:hover { color: var(--orange-accent); border-color: var(--orange-accent); background: transparent; }
.profile-dialog .profile-header-button { transition: color .15s ease, border-color .15s ease; }
.profile-progress { transition: opacity .15s ease; }
.profile-dialog-header:hover .profile-progress { opacity: 1; }
.profile-dialog p { font-size: .95rem; line-height: 1.4; margin: .5rem 0 1rem; }
.profile-dialog .pairing-code { font: 700 2rem/1.4 monospace; letter-spacing: .15em; }
.profile-dialog p:empty { display: none; }
.profile-dialog:focus-visible { outline: none; }
.profile-dialog .avatar-save { background: var(--orange-accent); border-color: var(--orange-accent); color: #251529; }
.profile-dialog label { font-size: .9rem; margin: .75rem 0; }
.profile-dialog input,.profile-dialog textarea { padding: .5rem .65rem; background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.25); }
.profile-dialog button { margin: .25rem; }
.profile-actions-spread { justify-content: space-between; }
.profile-actions-end { justify-content: flex-end; }
.profile-actions-center { justify-content: center; }
.profile-welcome { text-align: center; }
.profile-welcome .profile-avatar { width: clamp(7rem,30vmin,13rem); height: clamp(7rem,30vmin,13rem); }
.profile-welcome .profile-avatar__initials { font-size: clamp(3rem,7vmin,5rem); }
.profile-dialog .profile-welcome-display { font: 400 clamp(1.8rem,8vmin,3rem)/1.12 Georgia,serif; overflow-wrap: anywhere; }
.profile-person-name { display: flex; gap: .5rem; align-items: center; }
.profile-person-name input:first-child { flex: 1; min-width: 0; }
.profile-dialog .profile-person-name input:last-child { flex: 0 0 3rem; width: 3rem; text-align: center; }
.profile-name-field { position: relative; }
.profile-dialog .profile-name-field input { padding-right: 96px; min-height: 48px; }
.profile-name-tools { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; }
.profile-dialog .profile-name-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: .4rem; color: #e8e0f0; background: transparent; cursor: pointer; }
.profile-name-icon svg { width: 22px; height: 22px; pointer-events: none; }
.profile-dialog .profile-name-icon:hover { color: var(--orange-accent); background: rgba(255,255,255,.08); }
.profile-dialog .profile-name-icon:disabled { opacity: .3; cursor: default; }
.avatar-stage { position: relative; width: 256px; max-width: 100%; aspect-ratio: 1; margin: 1rem auto; border: 8px solid rgba(255,255,255,.2); border-radius: .75rem; overflow: hidden; }
.profile-dialog .avatar-stage canvas { width: 100%; border: 0; margin: 0; }
.avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 6rem/1 Georgia,serif; pointer-events: none; }
.avatar-tools { position: absolute; inset: .35rem; display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: 44px 1fr 44px; pointer-events: none; }
.profile-dialog .avatar-tools button { pointer-events: auto; margin: 0; padding: 0; min-width: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: .55rem; background: rgba(0,0,0,.35); color: white; }
.avatar-tools button:nth-child(2),.avatar-tools button:nth-child(7) { justify-self: center; }
.avatar-tools button:nth-child(4),.avatar-tools button:nth-child(5) { align-self: center; }
.avatar-tools button:nth-child(5) { grid-column: 3; }
.avatar-tools button:nth-child(n+6) { grid-row: 3; }
.avatar-options { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: center; }
.profile-dialog .avatar-options label { display: flex; align-items: center; gap: .35rem; margin: 0; }
.profile-dialog .avatar-options input[type=color] { width: 3rem; height: 32px; }
.profile-dialog .avatar-options input[type=number] { width: 4rem; }
.profile-dialog .avatar-caption { font-size: .75rem; opacity: .8; margin-top: .75rem; }
@media (prefers-reduced-motion: reduce) { .profile-backdrop::before,.profile-dialog { transition: none; } }

.app-page select { width: 100%; min-height: 44px; padding: .5rem; font: inherit; color: #fff; background: #160d23; border: 1px solid #a28ab8; border-radius: .4rem; }
.app-card { overflow-wrap: anywhere; }
#prayer-tools { display: flex; flex-wrap: wrap; gap: 1rem; }