:root {
  font: 16px Tahoma, Verdana, Arial, sans-serif;
  color: #243746;
  background: #e9eef1;
}

* { box-sizing: border-box; }
.donate-link { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid #9ab0bf; border-radius: 4px; white-space: nowrap; text-decoration: none; background: #f4f8fa; font-size: 14px; }
body { margin: 0; min-width: 0; }
a { color: #1d557e; }
a:hover { color: #123c5b; }
.site-header, main, footer { width: min(100% - 32px, 1180px); margin: 0 auto; }
.site-header { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; border-bottom: 1px solid #9ab0bf; }
.brand { color: #173a55; font-size: 24px; font-weight: bold; line-height: 28px; letter-spacing: .04em; text-decoration: none; }
.server-badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 3px 8px; border: 1px solid #b6c7d1; border-radius: 4px; color: #526977; background: #f4f8fa; font-size: 13px; line-height: 20px; }
.market-sync { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%; color: #617583; font-size: 12px; line-height: 20px; }
.market-sync-age { white-space: nowrap; }
.market-sync-unavailable { color: #75848d; }
.activity-stats { display: flex; align-items: center; gap: 16px; color: #536977; font-size: 13px; line-height: 20px; }
.activity-stats:has(.activity-unavailable:not([hidden])) { flex-wrap: wrap; }
.activity-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.activity-stat strong { color: #243e50; font: inherit; font-weight: bold; font-variant-numeric: tabular-nums; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #39825b; }
.activity-unavailable { color: #536977; }
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; }
  .market-sync { order: 3; flex-basis: 100%; }
  .activity-stats { order: 4; flex-basis: 100%; justify-content: flex-end; gap: 16px; }
}
.site-header nav { display: flex; gap: 16px; }
.site-header nav a[aria-current="page"] { font-weight: bold; text-decoration: underline; }
.account-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.account-nav span { color: #536876; font-size: 14px; line-height: 20px; }
.account-nav form { display: flex; align-items: center; margin: 0; }
.account-nav button, .account-nav .discord-sign-in-action { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-height: 28px; padding: 4px 8px; font-size: 13px; line-height: 18px; }
main { min-height: calc(100vh - 130px); padding: 28px 0 54px; }
footer { padding: 18px 0 28px; color: #526977; font-size: 13px; }
.footer-rights { display: block; max-width: 780px; margin-top: 10px; line-height: 1.6; font-size: 12px; }
.footer-about { display: inline-block; margin-left: 18px; color: #526977; text-underline-offset: 4px; }
.about-page { max-width: 640px; margin: 32px auto; }
.about-page h1 { font-size: 32px; }
.about-lead { font-size: 20px; color: #526977; margin: 14px 0 22px; }
.about-back { display: inline-block; margin-top: 12px; text-underline-offset: 4px; }
.information-page { max-width: 780px; line-height: 1.65; }
.information-page h2 { margin-top: 28px; }
main > nav { margin: 12px 0 20px; line-height: 1.7; }
h1, h2, h3 { color: #1e3545; }
h1 { margin: 4px 0 0; font-size: 26px; }
h2 { margin-top: 0; font-size: 20px; }
h3 { font-size: 16px; }
button, input, select { font: inherit; }
button, input[type="submit"] { cursor: pointer; }
button, input[type="submit"] { padding: 9px 13px; color: #183c55; border: 1px solid #7c9aae; border-radius: 3px; background: #f7fafb; }
button:hover, input[type="submit"]:hover { background: #e2edf3; }
input, select { max-width: 100%; padding: 9px; color: inherit; border: 1px solid #8da5b4; border-radius: 3px; background: #fff; }
label { display: block; }
.notification-stack { position: fixed; z-index: 100; top: 16px; right: 16px; width: min(420px, calc(100% - 32px)); display: grid; gap: 8px; }
.flash { display: flex; align-items: start; gap: 12px; width: 100%; margin: 0; padding: 14px; border: 1px solid #8ca8bb; border-radius: 5px; background: #f1f7fa; box-shadow: 0 6px 22px rgb(30 53 69 / 16%); line-height: 1.45; }
.flash span { flex: 1; min-width: 0; }
.flash button { flex: none; padding: 0 5px; border: 0; background: transparent; font-size: 20px; line-height: 1.2; }
.flash.alert { border-color: #b66d59; background: #fff1ed; }
.hint, .catalog-note, .item-id { color: #536977; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #0b80cd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 600px) {
  .site-header, main, footer { width: min(100% - 24px, 1180px); }
  .site-header { align-items: center; flex-wrap: wrap; gap: 10px; }
  .account-nav { margin-left: auto; gap: 6px; }
  .activity-stats { justify-content: space-between; gap: 8px; padding-top: 4px; font-size: 12px; }
  main { padding-top: 20px; }
  h1 { font-size: 23px; }
}


[data-install-app][hidden] { display: none; }
.install-app-floating { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; padding: 7px 12px; font-size: 13px; line-height: 18px; box-shadow: 0 2px 8px rgb(30 53 69 / 12%); }
.site-like-button { gap: 7px; white-space: nowrap; }
.site-like-count { font-variant-numeric: tabular-nums; padding-left: 7px; border-left: 1px solid #b6c7d1; }
.site-like-button:disabled { cursor: default; color: #526977; border-color: #b6c7d1; background: #edf3f6; }
body:has(dialog[open]) .install-app-floating { visibility: hidden; }

.account-menu { position: relative; margin-left: 2px; }
.account-menu summary { cursor: pointer; color: #183c55; padding: 4px 8px; border: 1px solid #7c9aae; border-radius: 3px; background: #f7fafb; font-size: 13px; line-height: 18px; max-width: 180px; overflow-wrap: anywhere; }
.account-menu-panel { position: absolute; z-index: 110; right: 0; top: calc(100% + 6px); width: 170px; padding: 6px; border: 1px solid #9ab0bf; border-radius: 5px; background: #f7fafb; box-shadow: 0 6px 22px rgb(30 53 69 / 16%); }
.account-menu:not([open]) .account-menu-panel { display: none; }
.account-menu-panel a, .account-menu-panel button { display: block; width: 100%; padding: 8px; text-align: left; text-decoration: none; border: 0; background: transparent; font-size: 13px; }
.account-menu-panel a:hover, .account-menu-panel button:hover { background: #e2edf3; }
.account-nav .donate-link { height: 28px; padding: 4px 8px; font-size: 13px; line-height: 18px; }

/* Installed desktop apps use the navbar as their draggable title area. */
@media (display-mode: window-controls-overlay) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    margin: 0;
    background: #e9eef1;
    min-height: max(48px, env(titlebar-area-height, 32px));
    padding: 8px calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + max(12px, (env(titlebar-area-width, 100vw) - 1180px) / 2)) 8px calc(env(titlebar-area-x, 0px) + max(12px, (env(titlebar-area-width, 100vw) - 1180px) / 2));
    flex-wrap: wrap;
    -webkit-app-region: drag;
    app-region: drag;
  }
  .site-header a, .site-header button, .site-header .account-nav,
  .site-header .market-sync, .site-header .activity-stats {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}
[data-daily-estimate-dialog] {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 24px;
  color: #243746;
  border: 1px solid #b6c7d1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgb(23 58 85 / 22%);
  line-height: 1.6;
}
[data-daily-estimate-dialog]::backdrop { background: rgb(23 58 85 / 30%); }
[data-daily-estimate-dialog] h2 { margin: 0 0 16px; line-height: 1.3; }
[data-daily-estimate-dialog] p { margin: 12px 0; }
[data-daily-estimate-dialog] [data-daily-estimate-state] {
  padding: 12px; border-radius: 6px; background: #edf4f7;
}
[data-daily-estimate-dialog] button { margin: 4px 4px 4px 0; }
[data-daily-estimate-dialog] [data-daily-estimate-close] { background: transparent; }
@media (max-width: 560px) {
  [data-daily-estimate-dialog] { padding: 20px; }
  [data-daily-estimate-dialog] button { width: 100%; margin: 5px 0; }
}