/* Header pieces shared by every page (each page keeps its own tokens and layout). */
:root { --discord: #5865f2; --err: #f87171; }
[hidden] { display: none !important; }
header { gap: 16px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font: 500 14px Inter, sans-serif; max-width: calc(100vw - 32px); }
.toast.err { border-color: var(--err); color: var(--err); }
/* Menu: one button on every screen size; drops down under the header. */
header { position: relative; }
.menu-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 10px 0 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: 600 14px Inter, sans-serif; cursor: pointer; }
.menu-btn img, .menu-btn .ini { width: 32px; height: 32px; border-radius: 50%; }
.menu-btn .ini { display: grid; place-items: center; background: var(--discord); color: #fff; font-weight: 700; }
.menu-btn .caret { color: var(--muted); transition: transform .15s; }
header.open .menu-btn .caret { transform: rotate(180deg); }
.menu-btn .dot { position: absolute; top: 2px; left: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--err); border: 2px solid var(--panel-2); }
.login-top { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--discord); color: #fff; text-decoration: none; font: 600 14px Inter, sans-serif; }
@media (max-width: 480px) { .menu-btn .un { display: none; } }
.mmenu { display: none; }
header.open .mmenu { display: block; position: absolute; top: 100%; right: max(24px, calc((100vw - 1280px) / 2 + 24px)); z-index: 50; width: 320px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 4px 16px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: 0 12px 24px rgba(0, 0, 0, .4); }
.mmenu > a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font: 600 15px Inter, sans-serif; }
.mmenu > a.active { color: var(--blue-light); }
.mm-mine { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.mm-h { padding: 12px 0 4px; font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mm-t { display: block; padding: 8px 0; color: var(--text); text-decoration: none; font: 13px Inter, sans-serif; }
.mm-t b { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.mm-t span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.mm-t span.act { color: var(--err); font-weight: 600; }
.mm-t .live { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); }
.mm-t:hover b { color: var(--blue-light); }
@media (max-width: 767px) {
  header.open .mmenu { left: 0; right: 0; width: auto; border-radius: 0; border-width: 0 0 1px; }
}
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px max(24px, calc((100vw - 1280px) / 2 + 24px)); border-top: 1px solid var(--line); color: var(--muted); font: 13px Inter, sans-serif; }
.site-foot a { color: var(--blue-light); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
@media (max-width: 767px) { .site-foot { padding: 20px 16px; } }
/* Keep the footer at the bottom of short pages. */
body { display: flex; flex-direction: column; }
body > main { width: 100%; }
.site-foot { margin-top: auto; }