/* Account dialog: explicit cloud actions, a scrollable body and always-visible close action. */
.title-conn { flex-wrap: wrap; }
.title-account { flex: none; }
@media (pointer: coarse) {
  .lobby-account { min-width: 40px; min-height: 40px; }
}
/* Keep the title's existing 44px touch areas on one row; wrapping tiny controls made fullscreen cover Account. */
@media (max-height: 600px) and (pointer: coarse), (max-height: 600px) and (any-pointer: coarse) {
  .sp-coarse .title-login { width: min(9.4rem, calc(100vw - 32px)); }
  .sp-coarse .title-conn { gap: 8px; font-size: max(11px, calc(.14 * var(--t))); }
  .sp-coarse .title-conn > button { min-height: 44px; min-width: 44px; }
  .sp-coarse .title-conn > .btn { font-size: max(11px, calc(.15 * var(--t))); }
}
.account-veil {
  top: var(--account-viewport-top, 0px);
  bottom: auto;
  height: var(--account-viewport-height, 100dvh);
  padding: max(10px, .18rem);
  box-sizing: border-box;
}
.account-modal {
  width: min(7.8rem, calc(100vw - 24px));
  max-height: min(8.8rem, calc(var(--account-viewport-height, 100dvh) - 24px));
  min-height: 0;
}
.account-modal .modal__head, .account-modal .modal__actions { flex: none; }
.account-modal .modal__body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.account-modal .modal__actions { align-items: center; flex-wrap: wrap; gap: .12rem; }
.account-content { display: flex; flex-direction: column; gap: .16rem; font-size: max(12px, calc(.16 * var(--t))); }
.account-modal .modal__title, .account-confirm .modal__title { font-size: max(18px, calc(.26 * var(--t))); }
.account-modal .micro, .account-confirm .micro { font-size: max(10px, calc(.12 * var(--t))); }
.account-modal .btn, .account-confirm .btn { font-size: max(12px, calc(.15 * var(--t))); min-height: 34px; }
.account-confirm .modal__text { font-size: max(13px, calc(.18 * var(--t))); }
.account-content p { margin: 0; line-height: 1.65; }
.account-intro { color: var(--text-md); }
.account-hint, .account-cloud__meta, .account-local-name { color: var(--text-lo); font-size: max(11px, calc(.14 * var(--t))); }
.account-actions__note { margin-right: auto; color: var(--text-lo); font-size: max(11px, calc(.13 * var(--t))); }
.account-message { padding: .12rem .15rem; border: 1px solid var(--line-2); background: var(--bg-1); overflow-wrap: anywhere; }
.account-message--error { color: var(--red-premium); border-color: rgba(255, 84, 84, .4); }
.account-message--success { color: var(--mint-400); border-color: var(--mint-800); }
.account-message--setup { color: var(--amber); border-color: rgba(246, 163, 41, .35); }
.account-modes { display: flex; flex-wrap: wrap; gap: .1rem; }
.account-form { display: flex; flex-direction: column; gap: .16rem; }
.account-field { display: flex; flex-direction: column; gap: .07rem; min-width: 0; }
.account-field > span { color: var(--text-md); font-size: max(12px, calc(.14 * var(--t))); }
.account-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: max(38px, .45rem);
  border: 1px solid var(--line-3);
  border-radius: 0;
  padding: .1rem .12rem;
  background: var(--bg-0);
  color: var(--text-hi);
  font: inherit;
  font-size: max(16px, calc(.17 * var(--t)));
  outline: none;
  scroll-margin-block: .18rem;
}
.account-field input:focus { border-color: var(--mint-500); box-shadow: 0 0 0 1px var(--mint-800); }
.account-field input:disabled { opacity: .5; }
.account-field input::placeholder { color: var(--text-dim); }
.account-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .12rem; align-items: end; }
.account-code-row > .btn { min-height: max(38px, .45rem); }
.account-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; padding: .14rem; border: 1px solid var(--mint-800); background: var(--mint-a10); }
.account-identity strong { min-width: 0; overflow-wrap: anywhere; color: var(--text-hi); }
.account-identity > .btn { margin-left: auto; }
.account-badge { color: var(--mint-400); font-size: max(11px, calc(.13 * var(--t))); white-space: nowrap; }
.account-cloud { display: flex; flex-direction: column; gap: .13rem; border-top: 1px solid var(--line-2); padding-top: .16rem; }
.account-cloud__head { display: flex; align-items: center; justify-content: space-between; gap: .12rem; }
.account-cloud__head h3 { margin: 0; color: var(--text-hi); font-size: max(16px, calc(.2 * var(--t))); }
.account-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .08rem; margin: 0; }
.account-summary > div { display: flex; flex-direction: column; gap: .04rem; padding: .11rem .13rem; background: var(--bg-2); border-left: 2px solid var(--mint-800); }
.account-summary dt { color: var(--text-md); font-size: max(12px, calc(.14 * var(--t))); }
.account-summary dd { margin: 0; color: var(--text-hi); font-size: max(13px, calc(.16 * var(--t))); overflow-wrap: anywhere; }
.account-empty { padding: .16rem; color: var(--text-lo); background: var(--bg-2); }
.account-cloud__actions { display: flex; flex-wrap: wrap; gap: .12rem; }
.account-cloud__actions > .btn { flex: 1 1 auto; }
@media (pointer: coarse), (any-pointer: coarse) {
  .account-modal .btn, .account-confirm .btn { min-height: 44px; }
}
@media (max-width: 520px) {
  .account-modal .modal__head { padding: .16rem .2rem .04rem; }
  .account-modal .modal__body { padding: .12rem .2rem .18rem; }
  .account-modal .modal__actions { padding: .12rem .2rem; }
  .account-actions__note { flex: 1 1 55%; }
}
@media (max-height: 480px) {
  .account-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(var(--account-viewport-height, 100dvh) - 16px); }
  .account-veil { padding: 8px; }
  .account-modal .modal__head { padding-top: .12rem; }
  .account-modal .modal__actions { padding-block: .1rem; }
  .account-content { gap: .12rem; }
}