[hidden] { display: none !important; }
.account-ui { font-family: 'Fredoka', system-ui, sans-serif; color: #f4f9fc; }
.account-ui button, .account-ui input, .account-ui select { font: inherit; }
.account-ui button { cursor: pointer; border: 1px solid #6594aa; border-radius: 12px; padding: 12px 16px; background: #23485d; color: #fff; }
.account-ui button:hover { background: #32667e; }
.account-ui button:focus-visible, .account-ui input:focus-visible, .account-ui select:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; }
.account-ui button:disabled { cursor: wait; opacity: .55; }
.account-ui .primary { background: #ffd25a; border-color: #ffd25a; color: #38280d; }
.account-ui .primary:hover { background: #ffe491; }
#account-dialog { box-sizing: border-box; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 1px solid #537388; border-radius: 20px; background: linear-gradient(150deg, #203e50, #0a1d2b); box-shadow: 0 25px 90px #000a; }
#account-dialog::backdrop { background: #06101cbd; backdrop-filter: blur(5px); }
#account-dialog h1 { font-size: clamp(22px, 3.6vw, 26px); line-height: 1.15; margin: 6px 0 10px; color: #ffe27a; }
#account-dialog p { line-height: 1.35; margin: 8px 0; color: #c6dce8; overflow-wrap: anywhere; }
#account-dialog .eyebrow { color: #ffd25a; font-size: 13px; letter-spacing: 2px; margin: 0; }
#account-dialog label { display: block; margin: 12px 0 6px; }
#account-dialog input, #account-dialog select { box-sizing: border-box; width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid #648699; background: #091c2a; color: white; padding: 9px 12px; }
#account-dialog button { min-height: 40px; padding: 8px 12px; }
#account-dialog form button { width: 100%; margin-top: 10px; }
#account-message { color: #ffcf92 !important; overflow-wrap: anywhere; }
#account-message:empty, #account-history:empty { display: none; }
#account-dialog .small { font-size: 14px; }
#account-intro { font-size: 14px; }
#account-dialog .account-actions { display: flex; gap: 8px; margin-top: 10px; }
#account-dialog .account-actions button { flex: 1; min-width: 0; font-size: 14px; }
#account-dialog [data-account-text='guestHint'] { font-size: 12px; }
#account-bar { position: fixed; z-index: 2; left: 12px; top: 10px; max-width: calc(100vw - 24px); border: 1px solid #486779; border-radius: 14px; background: #0b2033e8; display: flex; align-items: center; gap: 10px; padding: 5px 7px 5px 12px; font-size: 14px; }
#account-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
#account-bar button { padding: 7px 12px; font-size: 13px; }
#reward-status { position: fixed; z-index: 2; left: max(12px, calc((100vw - 1280px) / 2 + 15px)); top: 24%; width: min(16vw, 210px); padding: 12px; box-sizing: border-box; border: 1px solid #778057; border-radius: 16px; background: #122736ee; font-size: clamp(11px, 1.35vw, 17px); line-height: 1.5; }
#reward-status strong { display: block; color: #ffe27a; margin-bottom: 7px; }
#reward-status button { padding: 7px; width: 100%; margin-top: 8px; }
#account-history { padding-left: 20px; margin: 8px 0; font-size: 13px; line-height: 1.4; max-height: 56px; overflow: auto; }
@media (max-width: 650px) { #account-dialog { padding: 16px; } #account-bar span { max-width: 145px; } #reward-status { top: 11%; left: 10px; width: 29vw; font-size: 11px; padding: 8px; } }
@media (max-height: 560px) {
  #account-dialog { padding: 14px 18px; }
  #account-dialog h1 { font-size: 22px; margin-bottom: 6px; }
  #account-dialog p { margin: 6px 0; }
  #account-dialog label { margin-top: 8px; }
  #account-dialog .account-actions, #account-dialog form button { margin-top: 8px; }
}
@media (max-width: 380px) {
  #account-dialog { padding: 12px; }
  #account-dialog .account-actions button { font-size: 12px; padding-inline: 6px; }
  #account-dialog .small { font-size: 13px; }
}