.account-tool { cursor: pointer; white-space: nowrap; }
.account-tool__icon { display: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (max-width: 420px) {
  .masthead { gap: 4px; }
  .masthead__tools { gap: 0; }
  #btnCategory { white-space: nowrap; gap: 4px; padding: 0 4px; }
  .account-tool { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
  .account-tool__label { display: none; }
  .account-tool__icon { display: block; }
}
.account-sheet { border: 1px solid #ded9ce; border-radius: 18px; padding: 0; width: min(92vw, 440px); max-height: 85vh; max-height: 85dvh; overflow: auto; color: #242d3a; background: #fffcf6; box-shadow: 0 16px 55px #1217222b; }
.account-sheet::backdrop { background: #17223266; }
.account-panel { padding: 24px; font: 15px/1.6 system-ui, sans-serif; }
.account-panel h2 { margin: 0 0 12px; font-size: 20px; }
.account-panel p { margin: 10px 0; }
.account-panel [hidden] { display: none !important; }
.account-panel button, .account-panel input, .account-panel a { font: inherit; }
.account-panel button, .account-panel a.account-link { display: inline-block; border: 1px solid #c9d4da; border-radius: 9px; padding: 8px 14px; background: #e9f2f7; color: #205b81; cursor: pointer; text-decoration: none; }
.account-panel button:disabled { opacity: .55; cursor: default; }
.account-panel input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #c9d4da; border-radius: 9px; margin: 7px 0; }
.account-panel .account-message { min-height: 1.6em; color: #7d4a45; overflow-wrap: anywhere; }
.account-panel .account-message:empty { display: none; }
.account-panel .account-id { overflow-wrap: anywhere; }
.account-panel .account-close { float: right; min-width: 44px; min-height: 44px; padding: 2px 8px; background: transparent; }
.account-panel .account-login, .account-panel .account-redeem button { min-height: 44px; background: #205b81; border-color: #205b81; color: #fff; }
.account-panel .account-login { display: inline-flex; align-items: center; gap: 8px; }
.account-panel .account-login img { width: 16px; height: 16px; flex: none; }
.account-admin { max-width: 960px; margin: 30px auto; }
.account-admin-body { background: #fffcf6; color: #242d3a; }
.account-admin table { width: 100%; border-collapse: collapse; font-size: 14px; }
.account-admin td, .account-admin th { text-align: left; border-bottom: 1px solid #ded9ce; padding: 7px; overflow-wrap: anywhere; }
.account-admin pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) { .account-admin { margin: 8px; } .account-admin table { display: block; overflow-x: auto; } }
html[data-theme="dark"] .account-sheet { color: #f1f3f4; background: #1e2632; border-color: #516171; }
html[data-theme="dark"] .account-admin-body { color: #f1f3f4; background: #1e2632; }
html[data-theme="dark"] .account-panel button, html[data-theme="dark"] .account-panel a.account-link { color: #d5eaf5; background: #334a5b; }
html[data-theme="dark"] .account-panel .account-login, html[data-theme="dark"] .account-panel .account-redeem button { background: #367398; color: #fff; }
html[data-theme="dark"] .account-panel .account-message { color: #f3b9a7; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .account-sheet { color: #f1f3f4; background: #1e2632; border-color: #516171; }
  html:not([data-theme="light"]) .account-admin-body { color: #f1f3f4; background: #1e2632; }
  html:not([data-theme="light"]) .account-panel button, html:not([data-theme="light"]) .account-panel a.account-link { color: #d5eaf5; background: #334a5b; }
  html:not([data-theme="light"]) .account-panel .account-login, html:not([data-theme="light"]) .account-panel .account-redeem button { background: #367398; color: #fff; }
  html:not([data-theme="light"]) .account-panel .account-message { color: #f3b9a7; }
}