.account-pagina { max-width: 42rem; margin: 2rem auto; padding: 1.5rem; font-size: calc(1rem * var(--sc-scala, 1)); color: var(--sc-testo); font-family: var(--sc-font); line-height: 1.5; }
.account-pagina form { display: grid; gap: .75rem; margin-block: 1.5rem; }
.account-pagina input, .account-pagina select { width: 100%; box-sizing: border-box; }
.account-pagina section, .account-pagina details { margin-block: 1.5rem; }
.account-pagina button, .account-pagina a { margin-block: .3rem; }
.account-pagina pre, .account-pagina output { white-space: pre-wrap; overflow-wrap: anywhere; }
.account-pagina li { margin-block: 1rem; }
.account-pagina #qr { max-width: 18rem; }
.account-pagina #qr svg { width: 100%; height: auto; background: var(--sc-qr-fondo); fill: var(--sc-qr-segno); }
.account-pagina #messaggio { min-height: 1.5em; }
html.projector .account-pagina { max-width: 56rem; }

body:has(.account-pagina) { background: var(--sc-fondo); }

.account-pagina a:not(.ui-btn) { color: var(--sc-testo); }

.account-pagina [hidden] { display: none !important; }

.account-pagina .ui-btn { white-space: normal; max-width: 100%; text-align: center; }

.online-lingua { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; margin-bottom: 1rem; }
.online-lingua [aria-pressed="true"] { font-weight: 700; border-color: var(--sc-testo); }

/* Il marchio riguarda solo le pagine del coach, mai il tavolo di gioco. */
body.coach-online { --sc-fondo: var(--sc-marchio-pannello); --sc-superficie: var(--sc-marchio-bianco); --sc-superficie-2: var(--sc-marchio-pannello); --sc-testo: var(--sc-marchio-testo); --sc-testo-secondario: var(--sc-marchio-testo-2); --sc-bordo: var(--sc-marchio-testo-a25); --sc-font: var(--sc-font-marchio); --sc-focus-colore: var(--sc-marchio-testo); margin: 0; background: var(--sc-fondo); color: var(--sc-testo); }
.coach-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem max(1.5rem, calc((100vw - 76rem) / 2)); background: var(--sc-marchio-bianco); border-bottom: .3rem solid var(--sc-marchio); font: calc(1rem * var(--sc-scala, 1))/1.4 var(--sc-font-marchio); }
.coach-marchio { display: flex; align-items: center; gap: 1rem; color: var(--sc-marchio-testo); text-decoration: none; font-weight: 800; }
.coach-marchio img { object-fit: contain; }
.coach-online .account-pagina { max-width: 76rem; margin: 1.5rem auto; }
.coach-online .account-pagina > section:not(#account), .coach-online #sicurezza, .coach-online #inviti { max-width: 42rem; }
.coach-online .ui-btn { border-radius: var(--sc-raggio-pillola); padding: .6em 1.1em; background: var(--sc-marchio-bianco); color: var(--sc-marchio-testo); border: 1px solid var(--sc-bordo); font-family: var(--sc-font-marchio); }
.coach-online .ui-btn--primario, .coach-online .profilo-avatar { background: var(--sc-marchio-testo); color: var(--sc-marchio-bianco); }
.coach-online .ui-btn--pericolo { color: var(--sc-tav-rosso); }
.coach-online .ui-field { background: var(--sc-marchio-bianco); color: var(--sc-marchio-testo); border-color: var(--sc-bordo); }
.account-sezioni { display: flex; flex-wrap: wrap; gap: 1.5em; border-bottom: 1px solid var(--sc-bordo); padding-bottom: 1em; }
.account-sezioni [aria-current="page"] { font-weight: 800; text-decoration-thickness: .2em; text-decoration-color: var(--sc-marchio-scuro); }
.account-sale { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); gap: 1.2em; align-items: start; }
.account-pagina .account-sala { padding: 1.4em; border: 1px solid var(--sc-bordo); background: var(--sc-superficie); border-radius: var(--sc-raggio-l); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.account-sala h3 { margin-top: 0; }
.account-sala .sala-stato { font-weight: 700; }
.account-sala details { margin-bottom: 0; }
.account-sala summary { cursor: pointer; }
#nuova-sala { max-width: 36em; }
#nuova-sala[open] { background: var(--sc-superficie); padding: 1em; border-radius: var(--sc-raggio-l); }
#conferma-identita { max-width: min(32rem, calc(100vw - 3rem)); background: var(--sc-superficie); color: var(--sc-testo); }
#conferma-identita::backdrop { background: var(--sc-velo); }
@media (max-width: 600px) { .coach-marchio img { width: 72px; } .coach-marchio { gap: .6rem; } .account-sezioni { gap: 1em; } }