/* Room entry keeps the same readable palette in the site and Telegram. */
#together-room, #together-room[data-state=online], #together-room[data-state=offline]{background:var(--surface);border-color:var(--stroke-strong);color:var(--text)}
#together-room .room-symbol{background:var(--surface-2);color:var(--accent)}
#together-room .presence-chip{background:var(--surface-2);color:var(--text);border-color:var(--stroke-strong)}
.room-link-entry{flex:1 0 100%;min-width:0;border-top:1px solid var(--stroke-strong);padding-top:22px;margin-top:6px}
.room-link-entry h3{font:650 17px/1.8 var(--font-body);margin:0 0 4px;color:var(--text)}
.room-link-entry p{color:var(--soft);font-size:14px;line-height:1.9;margin:0 0 14px}
#room-link-form label{display:block;font-size:14px;color:var(--text);margin:0 0 8px}
.room-link-controls{display:flex;align-items:stretch;gap:10px}
.room-link-controls input{flex:1;min-width:0;width:100%;margin:0;background:var(--surface-2);color:var(--text);border:1px solid var(--stroke-strong);border-radius:10px;padding:12px 14px;font:400 16px/1.6 var(--font-body);text-align:left}
.room-link-controls .button{font-size:15px;min-height:48px;white-space:nowrap;border-radius:10px}
#room-entry-status{margin:10px 0 0;overflow-wrap:anywhere;color:var(--text)}
#room-entry-status:empty{display:none}
#room-entry-status[data-error=true]{color:var(--accent)}
#room-invite-input[aria-invalid=true]{border-color:var(--accent)}
:is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog){box-sizing:border-box;width:min(520px,calc(100vw - 32px));padding:28px;background:var(--surface);color:var(--text);border:1px solid var(--stroke-strong);border-radius:20px}
:is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog) .dialog-head{margin-bottom:20px;display:flex;justify-content:space-between;gap:16px}
:is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog) h2{font:650 22px/1.7 var(--font-body);margin:0;color:var(--text)}
:is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog) p{font-size:15px;line-height:2;color:var(--soft)}
:is(#room-ready-dialog,#join-dialog,#account-dialog) label{display:block;color:var(--text);font-size:15px;line-height:1.8;margin:18px 0 8px}
:is(#room-ready-dialog,#join-dialog,#account-dialog) :is(input,select){display:block;width:100%;box-sizing:border-box;min-height:50px;background:var(--surface-2);color:var(--text);font-size:16px;border:1px solid var(--stroke-strong);border-radius:10px;padding:11px 14px;margin-top:8px}
:is(#room-ready-dialog,#join-dialog,#account-dialog) .submit{width:100%;min-height:50px;font-size:16px;margin-top:20px;border-radius:10px}
#join-dialog .text-button{display:block;width:100%;font-size:14px;margin-top:14px;min-height:44px;color:var(--text)}
.room-ready-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--stroke-strong);background:var(--surface-2);color:var(--accent);border-radius:16px;font-size:28px;margin-bottom:16px}
#ready-invite-link{font-family:ui-monospace,monospace;font-size:14px;text-align:left}
.room-ready-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.room-ready-actions button{min-height:50px;border-radius:10px;font-size:15px}
#room-ready-dialog .room-private-note{font-size:13px;border-top:1px solid var(--stroke-strong);padding-top:16px;margin-bottom:0}
#ready-copy-status{margin:10px 0 0;min-height:0}
#ready-copy-status:empty{display:none}
#help-dialog{width:min(620px,calc(100vw - 32px))}
#help-dialog .onboarding-steps{padding:0;list-style:none;counter-reset:steps}
#help-dialog .onboarding-steps li{position:relative;counter-increment:steps;padding:16px 54px 16px 16px;margin:12px 0;border:1px solid var(--stroke-strong);border-radius:12px;background:var(--surface-2);color:var(--text)}
#help-dialog .onboarding-steps li::before{content:counter(steps,persian);position:absolute;right:16px;top:18px;font-size:18px;color:var(--accent)}
#help-dialog .onboarding-steps strong{font-size:16px;color:var(--text)}
#help-dialog details summary{color:var(--text);font-size:15px;line-height:1.9}
#account-dialog .account-tabs{display:flex;gap:8px;margin:0 0 22px}
#account-dialog .account-tabs button{font-size:14px;min-height:44px}
#account-dialog #auth-error{color:var(--accent)}
:is(#room-link-form,#room-ready-dialog,#join-dialog,#help-dialog,#account-dialog) :is(input,select,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:540px){
 .room-link-controls{flex-direction:column}
 :is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog){width:calc(100vw - 24px);padding:22px;max-height:calc(100dvh - 24px)}
 :is(#room-ready-dialog,#join-dialog,#account-dialog,#help-dialog) h2{font-size:20px}
 .room-ready-actions{grid-template-columns:1fr}
}