:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-soft: #0d1220;
  --panel: rgba(14, 20, 34, 0.82);
  --panel-strong: rgba(18, 25, 40, 0.96);
  --surface: rgba(255, 255, 255, 0.04);
  --text: #f7f8ff;
  --muted: #b8c2d9;
  --blue: #6db0f3;
  --blue-soft: #beddfb;
  --pink: #fb6ff0;
  --pink-soft: #f2c7fa;
  --lavender: #9ba1f3;
  --accent: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
  --border: rgba(190, 221, 251, 0.14);
  --border-strong: rgba(190, 221, 251, 0.22);
  --shadow: 0 22px 70px rgba(2, 8, 22, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
  background:
    radial-gradient(circle at 12% 0%, rgba(109, 176, 243, 0.26), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(251, 111, 240, 0.24), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(155, 161, 243, 0.14), transparent 32%),
    linear-gradient(180deg, #08101b 0%, var(--bg) 55%, #050811 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0));
}

a { color: inherit; }
code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  padding: .16rem .42rem;
  border-radius: .5rem;
  font-size: .95em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1rem, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--border);
  background: rgba(7, 11, 20, 0.7);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--text);
  text-decoration: none;
}
.brand strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}
.brand-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(109,176,243,.25), rgba(251,111,240,.28));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 24px rgba(109,176,243,.18), 0 10px 24px rgba(251,111,240,.15);
}
nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}
nav a,
.link-button {
  color: var(--muted);
  text-decoration: none;
  padding: .58rem .82rem;
  border-radius: 999px;
  transition: .18s ease;
}
nav a:hover,
.link-button:hover {
  color: var(--text);
  background: rgba(255,255,255,.05);
}
nav form { display: inline; margin: 0; }
.link-button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.container {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background:
    linear-gradient(145deg, rgba(17,24,39,.82), rgba(10,14,24,.94)),
    linear-gradient(135deg, rgba(109,176,243,.08), rgba(251,111,240,.08));
  box-shadow: var(--shadow);
}
.hero-home {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 2rem;
  align-items: center;
}
.hero-copy h1,
.page-intro h1,
.hero-error h1 {
  margin: .4rem 0 1rem;
  font-size: clamp(2.6rem, 6vw, 4.65rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 700;
}
.hero-copy p,
.page-intro p,
.error-copy {
  color: var(--muted);
  font-size: 1.04rem;
  max-width: 62ch;
}
.eyebrow {
  margin: 0;
  font-size: .8rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-soft) !important;
  font-weight: 700;
}
.gradient-text {
  background: linear-gradient(135deg, #dcecff 8%, var(--blue-soft) 26%, var(--pink-soft) 75%, #ffd7f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .88rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0b1020;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  box-shadow: 0 10px 24px rgba(109,176,243,.18), 0 10px 24px rgba(251,111,240,.14);
}
.button:hover { transform: translateY(-1px); }
.button.secondary {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.button.small {
  padding: .72rem .96rem;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
.chip {
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .92rem;
}
.hero-art {
  position: relative;
  min-height: 260px;
}
.bubble-logo {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 40px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}
.bubble-logo::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  opacity: .65;
  filter: blur(10px);
  z-index: -1;
}
.bubble-top {
  top: 18px;
  left: 18px;
  background: linear-gradient(145deg, rgba(109,176,243,.62), rgba(190,221,251,.4));
}
.bubble-top::before { background: rgba(109,176,243,.6); }
.bubble-bottom {
  right: 10px;
  top: 108px;
  background: linear-gradient(145deg, rgba(251,111,240,.62), rgba(242,199,250,.42));
}
.bubble-bottom::before { background: rgba(251,111,240,.58); }

.page-intro {
  margin-bottom: 1.5rem;
}
.page-intro h1 {
  font-size: clamp(2.2rem, 5vw, 3.35rem);
  margin-bottom: .7rem;
}
.page-intro p {
  max-width: 74ch;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.stats-grid .card-wide {
  grid-column: span 2;
}
.card {
  background: linear-gradient(160deg, rgba(17, 24, 39, 0.9), rgba(11, 15, 24, 0.96));
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  padding: 1.35rem;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.stat-label {
  margin: 0 0 .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.metric {
  margin: 0;
  font-size: clamp(1.95rem, 4vw, 2.7rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
}
.card-note {
  margin: .65rem 0 0;
  color: var(--muted);
  font-size: .94rem;
}
.command-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.prose { line-height: 1.75; }
.prose p, .prose li { color: var(--muted); }
.prose h2 {
  margin-top: 1.4rem;
  margin-bottom: .5rem;
}
.compact-copy { margin-bottom: 1rem; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(11,15,24,.98));
  box-shadow: var(--shadow);
}
.elevated-table { margin-top: 1rem; }
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 1rem 1.05rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
th {
  color: var(--blue-soft);
  font-size: .86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
td { color: var(--text); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.02); }

.hero-error {
  max-width: 720px;
}

footer {
  text-align: center;
  color: var(--muted);
  padding: 2rem;
  border-top: 1px solid var(--border);
  background: rgba(7, 11, 20, 0.55);
}

@media (max-width: 900px) {
  .hero-home {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 210px;
  }
}
@media (max-width: 760px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }
  nav {
    width: 100%;
  }
  .container {
    width: min(100% - 1rem, 1180px);
    padding-top: 1.5rem;
  }
  .hero {
    padding: 1.35rem;
    border-radius: 1.4rem;
  }
  .stats-grid .card-wide {
    grid-column: auto;
  }
  .bubble-logo {
    min-width: 210px;
    font-size: 1.35rem;
  }
  .bubble-top {
    left: 0;
  }
  .bubble-bottom {
    right: 0;
  }
}

/* Guild birthdays */
.birthday-public-grid { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:1rem; margin-bottom:2rem; }
.birthday-self-card,.birthday-list-card { padding:1.25rem; }
.birthday-self-card > p { color:var(--muted); }
.birthday-date-form { display:grid; grid-template-columns:110px minmax(0,1fr); gap:.8rem; margin:1rem 0; }
.birthday-date-form label { display:grid; gap:.4rem; font-weight:700; }
.birthday-date-form .button { grid-column:1/-1; }
.birthday-public-list { display:grid; gap:.65rem; max-height:620px; overflow-y:auto; padding-right:.3rem; }
.birthday-person-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.75rem; border:1px solid var(--border); border-radius:.85rem; background:rgba(255,255,255,.02); }
.birthday-person-row.today { border-color:rgba(255,126,174,.55); box-shadow:0 0 22px rgba(255,126,174,.12); }
.birthday-person-row img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.birthday-person-row div { display:grid; gap:.15rem; }
.birthday-person-row span { color:var(--muted); }
.birthday-person-row b,.birthday-count { color:var(--pink-soft); }
@media(max-width:800px){.birthday-public-grid{grid-template-columns:1fr}.birthday-date-form{grid-template-columns:1fr}.birthday-date-form .button{grid-column:auto}}

/* Mousekeeper form controls for signed-in public pages */
.birthday-date-form input,
.birthday-date-form select {
  width: 100%;
  min-height: 48px;
  padding: .8rem .95rem;
  color: var(--text);
  font: inherit;
  border: 1px solid rgba(190, 221, 251, .18);
  border-radius: .88rem;
  outline: none;
  background:
    linear-gradient(180deg, rgba(18, 25, 40, .96), rgba(9, 14, 25, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(1,6,18,.15);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.birthday-date-form input:hover,
.birthday-date-form select:hover { border-color: rgba(109, 176, 243, .36); }
.birthday-date-form input:focus,
.birthday-date-form select:focus {
  border-color: rgba(183, 140, 255, .72);
  background: linear-gradient(180deg, rgba(21, 29, 47, .98), rgba(10, 15, 28, .98));
  box-shadow: 0 0 0 3px rgba(155, 161, 243, .14), 0 0 24px rgba(251,111,240,.08);
}
.birthday-date-form select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #aeb9d1 50%),
    linear-gradient(135deg, #aeb9d1 50%, transparent 50%),
    linear-gradient(180deg, rgba(18, 25, 40, .96), rgba(9, 14, 25, .96));
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}
.birthday-date-form select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, #f2c7fa 50%),
    linear-gradient(135deg, #f2c7fa 50%, transparent 50%),
    linear-gradient(180deg, rgba(21, 29, 47, .98), rgba(10, 15, 28, .98));
}
.birthday-date-form select option { color: var(--text); background: #111827; }
.birthday-self-card {
  background:
    linear-gradient(145deg, rgba(18,25,40,.9), rgba(9,14,25,.94)),
    linear-gradient(135deg, rgba(109,176,243,.05), rgba(251,111,240,.05));
}
@media (max-width: 720px) {
  .birthday-date-form input,
  .birthday-date-form select { font-size: 16px; }
}

/* Native dropdown hotfix for the signed-in birthday page */
.birthday-date-form select {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  color-scheme: dark;
  color: var(--text) !important;
  background: #111827 !important;
  border-color: rgba(190,221,251,.20) !important;
  padding-right: .95rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(1,6,18,.14) !important;
}
.birthday-date-form select:hover {
  background: #131c2d !important;
  border-color: rgba(109,176,243,.38) !important;
}
.birthday-date-form select:focus,
.birthday-date-form select:focus-visible {
  color: var(--text) !important;
  background: #131c2d !important;
  border-color: rgba(109,176,243,.68) !important;
  box-shadow: 0 0 0 3px rgba(109,176,243,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
  outline: none !important;
}
.birthday-date-form select option,
.birthday-date-form select optgroup {
  color: #f4f7ff !important;
  background: #111827 !important;
}
.birthday-date-form select option:checked {
  color: #07101d !important;
  background: #8ec5ff !important;
}


/* Mousekeeper logo branding */
.brand-logo {
  object-fit: cover;
  padding: 0;
  overflow: hidden;
}
.hero-logo-art {
  display: grid;
  place-items: center;
  min-height: 320px;
}
.hero-logo-art img {
  width: min(100%, 360px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 18px 42px rgba(109,176,243,.28)) drop-shadow(0 18px 42px rgba(251,111,240,.24));
}
@media (max-width: 760px) {
  .hero-logo-art { min-height: 240px; }
  .hero-logo-art img { width: min(78vw, 300px); }
}


/* Rank ladder cards */
.rank-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.rank-ladder-card { --rank-colour:#9ba1f3; position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:1rem; align-items:center; min-height:126px; padding:1.15rem 1.25rem; border:1px solid color-mix(in srgb,var(--rank-colour) 42%, transparent); border-radius:1.25rem; background:linear-gradient(145deg,rgba(18,25,40,.94),rgba(8,13,24,.97)); box-shadow:inset 4px 0 0 var(--rank-colour),0 16px 42px rgba(0,0,0,.2); overflow:hidden; }
.rank-ladder-card::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-70px; bottom:-90px; background:var(--rank-colour); opacity:.12; filter:blur(18px); }
.rank-ladder-card.current { border-color:var(--rank-colour); box-shadow:inset 4px 0 0 var(--rank-colour),0 0 0 2px color-mix(in srgb,var(--rank-colour) 22%,transparent),0 18px 50px color-mix(in srgb,var(--rank-colour) 15%,transparent); }
.rank-card-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:1rem; background:color-mix(in srgb,var(--rank-colour) 16%,#0b1321); border:1px solid color-mix(in srgb,var(--rank-colour) 52%,transparent); color:var(--rank-colour); font-size:1.75rem; }
.rank-card-icon img { max-width:42px; max-height:42px; object-fit:contain; }
.rank-card-copy h2 { margin:.12rem 0 .2rem; font-size:1.25rem; color:var(--rank-colour); }
.rank-card-copy p,.rank-level { margin:0; color:var(--muted); }
.rank-level { font-size:.78rem; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.rank-current-badge { position:absolute; top:.8rem; right:.85rem; padding:.28rem .58rem; border-radius:999px; font-size:.72rem; font-weight:800; color:#07101d; background:var(--rank-colour); }

/* Refreshed documentation */
.docs-jump { display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 1.2rem; }
.docs-jump a { padding:.58rem .78rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); text-decoration:none; background:rgba(255,255,255,.035); }
.docs-jump a:hover { color:var(--text); border-color:var(--border-strong); }
.docs-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.docs-feature { padding:1.2rem; }
.docs-feature h2 { margin:.55rem 0 .4rem; font-size:1.08rem; }
.docs-feature p { margin:0; color:var(--muted); font-size:.93rem; }
.docs-icon { font-size:1.65rem; }
.docs-section { margin-top:1rem; }
.docs-command-list { display:grid; gap:.55rem; margin-top:.75rem; }
.docs-command-row { display:grid; grid-template-columns:minmax(180px,.42fr) minmax(0,1fr); gap:1rem; align-items:center; padding:.78rem .85rem; border:1px solid var(--border); border-radius:.85rem; background:rgba(255,255,255,.025); }
.docs-command-row span { color:var(--muted); }
.docs-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.docs-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.docs-tool-grid div { display:grid; gap:.18rem; padding:.85rem; border:1px solid var(--border); border-radius:.85rem; background:rgba(255,255,255,.025); }
.docs-tool-grid strong { color:var(--blue-soft); }
.docs-tool-grid span { color:var(--muted); font-size:.92rem; }
nav a[aria-current="page"] { color:var(--text); background:rgba(109,176,243,.1); border:1px solid rgba(109,176,243,.18); }
@media(max-width:920px){.rank-card-grid,.docs-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.rank-card-grid,.docs-feature-grid,.docs-two-column,.docs-tool-grid{grid-template-columns:1fr}.docs-command-row{grid-template-columns:1fr;gap:.35rem}.rank-current-badge{position:static;justify-self:start;grid-column:1/-1}}

/* Hardcore guild bank */
.bank-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; }
.bank-character { font-size: clamp(1.35rem, 3vw, 2rem); }
.bank-updated { font-size: clamp(1.2rem, 2.6vw, 1.75rem); }
.bank-inventory-card { padding: 1.25rem; }
.bank-search { display: flex; gap: .65rem; align-items: center; margin: 1rem 0; }
.bank-search input { flex: 1; min-width: 0; padding: .82rem .9rem; border: 1px solid var(--border); border-radius: .85rem; color: var(--text); background: #111827; }
.bank-search input:focus { outline: none; border-color: rgba(109,176,243,.7); box-shadow: 0 0 0 3px rgba(109,176,243,.14); }
.bank-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.bank-item-card { --quality:#9ca3af; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.8rem; align-items:center; min-height:72px; padding:.72rem .8rem; border:1px solid color-mix(in srgb,var(--quality) 35%,var(--border)); border-radius:.9rem; background:rgba(255,255,255,.025); box-shadow:inset 3px 0 0 var(--quality); }
.bank-item-main { display:grid; gap:.2rem; min-width:0; }
.bank-item-wowhead-link { display:flex !important; align-items:center; gap:.75rem; min-width:0; color:var(--quality) !important; font-weight:800; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bank-item-wowhead-link .iconlarge { flex:0 0 auto; margin:0 !important; }
.bank-item-wowhead-link .iconlarge ins { border-radius:.65rem !important; box-shadow:0 0 0 1px color-mix(in srgb,var(--quality) 45%,transparent); }
.bank-item-wowhead-link:hover { filter:brightness(1.12); text-decoration:underline; text-underline-offset:.18rem; }
.bank-item-card strong { font-size:1.05rem; }
.quality-0 { --quality:#9ca3af; } .quality-1 { --quality:#f4f7ff; } .quality-2 { --quality:#1eff00; } .quality-3 { --quality:#0070dd; } .quality-4 { --quality:#a335ee; } .quality-5 { --quality:#ff8000; } .quality-6 { --quality:#e6cc80; } .quality-7 { --quality:#00ccff; }
.bank-empty { text-align:center; padding:2rem; }
@media (max-width: 800px) { .bank-summary-grid, .bank-item-grid { grid-template-columns:1fr; } .bank-search { flex-wrap:wrap; } .bank-search input { flex-basis:100%; } }

.bank-item-stats { display: block; margin-top: .2rem; color: #c9d4e8; font-size: .86rem; line-height: 1.35; }

/* Logged-in guild member navigation */
.member-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: 250px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(12,18,38,.98), rgba(20,13,39,.98));
  border-right: 1px solid rgba(154,178,255,.18);
  box-shadow: 18px 0 50px rgba(4,7,19,.3);
}
.member-sidebar-top { display:flex; flex-direction:column; gap:22px; min-height:0; }
.member-sidebar-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; padding:4px 6px; }
.member-sidebar-brand img { width:44px; height:44px; border-radius:14px; object-fit:cover; box-shadow:0 0 24px rgba(218,104,255,.25); }
.member-sidebar-brand span { display:flex; flex-direction:column; line-height:1.15; }
.member-sidebar-brand strong { font-size:1.05rem; }
.member-sidebar-brand small,.member-sidebar-user small { color:var(--muted); }
.member-sidebar-nav { display:flex; flex-direction:column; gap:5px; overflow:auto; padding-right:2px; }
.member-sidebar-link { display:flex; align-items:center; gap:11px; min-height:43px; padding:10px 12px; border-radius:12px; color:#cbd3ed; text-decoration:none; border:1px solid transparent; transition:.18s ease; }
.member-sidebar-link > span { width:23px; text-align:center; }
.member-sidebar-link:hover { color:#fff; background:rgba(112,148,255,.09); }
.member-sidebar-link.active { color:#fff; font-weight:700; background:linear-gradient(90deg, rgba(84,154,255,.22), rgba(230,95,255,.14)); border-color:rgba(132,181,255,.24); box-shadow:inset 3px 0 #6aa9ff; }
.member-sidebar-link.officer-link { margin-top:8px; border-color:rgba(232,111,255,.18); }
.member-sidebar-user { display:grid; grid-template-columns:38px minmax(0,1fr) 32px; align-items:center; gap:9px; padding:11px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); }
.member-sidebar-user img,.member-avatar-fallback { width:38px; height:38px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:linear-gradient(135deg,#5aa6ff,#ee79ef); font-weight:800; }
.member-sidebar-user > div { min-width:0; display:flex; flex-direction:column; }
.member-sidebar-user strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-sidebar-user form { margin:0; }
.member-sidebar-user button { border:0; background:transparent; color:var(--muted); font-size:1.15rem; cursor:pointer; }
.member-menu-button { display:none; }
.member-sidebar-backdrop { position:fixed; inset:0; z-index:110; background:rgba(2,4,13,.72); backdrop-filter:blur(4px); }
body.member-body > .site-header { display:none; }
body.member-body > main.member-main, body.member-body > main.container { margin-left:250px; width:auto; max-width:none; padding-left:clamp(24px,4vw,64px); padding-right:clamp(24px,4vw,64px); }
body.member-body > footer { margin-left:250px; }

/* Retail M+ leaderboard */
.mplus-intro { padding-bottom:18px; }
.mplus-toolbar { display:flex; align-items:end; justify-content:space-between; gap:22px; padding:18px; margin-bottom:20px; }
.mplus-toolbar form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; flex:1; }
.mplus-toolbar label { display:flex; flex-direction:column; gap:7px; min-width:190px; color:var(--muted); font-size:.84rem; font-weight:700; }
.mplus-toolbar input { min-width:280px; }
.mplus-refresh-meta { display:flex; flex-direction:column; text-align:right; }
.mplus-refresh-meta span { color:var(--muted); font-size:.8rem; }
.mplus-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.mplus-podium-card { position:relative; display:grid; justify-items:center; text-align:center; gap:8px; padding:24px 16px 20px; overflow:hidden; }
.mplus-podium-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0,rgba(100,166,255,.16),transparent 58%); pointer-events:none; }
.mplus-podium-card.place-1 { transform:translateY(-8px); border-color:rgba(255,211,92,.28); }
.mplus-podium-card > img,.mplus-avatar-fallback { width:72px; height:72px; border-radius:18px; object-fit:cover; border:2px solid rgba(255,255,255,.16); }
.mplus-avatar-fallback { display:grid; place-items:center; font-size:1.8rem; font-weight:900; background:linear-gradient(135deg,#4e92ff,#d969ec); }
.mplus-place { position:absolute; top:10px; right:12px; font-size:1.35rem; }
.mplus-podium-card h2 { margin:0; font-size:1.15rem; }
.mplus-podium-card p { margin:2px 0 0; color:var(--muted); font-size:.83rem; }
.mplus-score { font-size:1.9rem; line-height:1; }
.mplus-podium-card small { color:var(--muted); }
.mplus-table-card { padding:20px; }
.mplus-table-wrap { overflow:auto; }
.mplus-table { width:100%; border-collapse:collapse; min-width:800px; }
.mplus-table th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.09); }
.mplus-table td { padding:13px 10px; border-bottom:1px solid rgba(255,255,255,.055); vertical-align:middle; }
.mplus-character { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.mplus-character img { width:40px; height:40px; border-radius:10px; object-fit:cover; }
.mplus-character span { display:flex; flex-direction:column; }
.mplus-character small { color:var(--muted); }
.mplus-table-score { font-size:1.15rem; }
.role-pill,.mplus-runs span { display:inline-flex; padding:4px 8px; border-radius:999px; background:rgba(111,150,255,.1); border:1px solid rgba(111,150,255,.16); font-size:.76rem; }
.mplus-runs { display:flex; gap:5px; flex-wrap:wrap; }
.raiderio-attribution { color:#94bfff; text-decoration:none; font-size:.84rem; }
.empty-state-card { padding:28px; text-align:center; }

.wow-class-death-knight{color:#c41e3a}.wow-class-demon-hunter{color:#a330c9}.wow-class-druid{color:#ff7c0a}.wow-class-evoker{color:#33937f}.wow-class-hunter{color:#aad372}.wow-class-mage{color:#3fc7eb}.wow-class-monk{color:#00ff98}.wow-class-paladin{color:#f48cba}.wow-class-priest{color:#fff}.wow-class-rogue{color:#fff468}.wow-class-shaman{color:#0070dd}.wow-class-warlock{color:#8788ee}.wow-class-warrior{color:#c69b6d}

@media (max-width: 900px) {
  .member-sidebar { transform:translateX(-105%); transition:transform .22s ease; }
  .member-sidebar.open { transform:translateX(0); }
  .member-menu-button { display:flex; position:fixed; top:12px; left:12px; z-index:105; align-items:center; gap:7px; min-height:42px; padding:8px 13px; border-radius:12px; color:#fff; background:rgba(18,24,48,.95); border:1px solid rgba(135,174,255,.25); box-shadow:0 8px 28px rgba(0,0,0,.28); }
  body.member-body > main.member-main,body.member-body > main.container { margin-left:0; padding-top:76px; }
  body.member-body > footer { margin-left:0; }
  .mplus-podium { grid-template-columns:1fr; }
  .mplus-podium-card.place-1 { transform:none; }
  .mplus-toolbar { align-items:stretch; flex-direction:column; }
  .mplus-toolbar input { min-width:0; width:100%; }
  .mplus-refresh-meta { text-align:left; }
}

/* Member account dashboard */
.account-page { display:grid; gap:22px; }
.account-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; overflow:hidden; position:relative; }
.account-hero::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-120px; border-radius:50%; background:radial-gradient(circle,rgba(232,97,255,.22),transparent 68%); pointer-events:none; }
.account-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.account-identity img { width:78px; height:78px; border-radius:22px; object-fit:cover; border:2px solid rgba(125,177,255,.35); box-shadow:0 10px 34px rgba(0,0,0,.3); }
.account-identity h2 { margin:.15rem 0 .2rem; font-size:1.55rem; }
.account-identity p:last-child { margin:0; color:var(--muted); }
.account-level-badge { position:relative; z-index:1; min-width:92px; padding:13px 18px; border-radius:18px; text-align:center; background:linear-gradient(145deg,rgba(87,156,255,.2),rgba(230,94,255,.18)); border:1px solid rgba(144,181,255,.25); }
.account-level-badge span { display:block; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; }
.account-level-badge strong { font-size:2rem; line-height:1.05; }
.account-stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.account-rank-name { font-size:1.15rem !important; line-height:1.2; }
.account-birthday { font-size:1.35rem !important; }
.account-progress-card { padding:22px; }
.account-progress-track { height:14px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06); }
.account-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5aa9ff,#9f83ff,#ea6be9); box-shadow:0 0 18px rgba(124,155,255,.4); }
.account-xp-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.account-xp-grid > div { display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.account-xp-grid span { color:var(--muted); font-size:.82rem; }
.account-xp-grid strong { font-size:1.15rem; }
.account-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-link-card { display:flex; align-items:center; gap:15px; padding:18px; color:inherit; text-decoration:none; transition:.18s ease; }
.account-link-card:hover { transform:translateY(-2px); border-color:rgba(128,176,255,.25); }
.account-link-card > span { font-size:1.5rem; }
.account-link-card div { display:flex; flex-direction:column; gap:3px; }
.account-link-card small { color:var(--muted); }

/* Member XP leaderboard */
.member-leaderboard-page { display:grid; gap:22px; }
.member-leaderboard-grid { display:grid; gap:11px; }
.member-leaderboard-card { display:grid; grid-template-columns:64px 54px minmax(0,1fr); align-items:center; gap:14px; padding:15px 18px; border-radius:18px; background:linear-gradient(145deg,rgba(22,29,57,.92),rgba(13,17,38,.94)); border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.member-leaderboard-card.is-you { border-color:rgba(103,174,255,.42); box-shadow:inset 3px 0 #66aaff,0 10px 28px rgba(0,0,0,.2); }
.member-leaderboard-card.top-1 { background:linear-gradient(145deg,rgba(85,67,20,.34),rgba(22,25,45,.96)); border-color:rgba(245,199,79,.25); }
.member-leaderboard-card.top-2 { border-color:rgba(194,211,234,.22); }
.member-leaderboard-card.top-3 { border-color:rgba(213,146,92,.24); }
.member-leaderboard-position { font-size:1.22rem; font-weight:800; text-align:center; }
.member-leaderboard-avatar { width:52px; height:52px; object-fit:cover; border-radius:16px; }
.member-leaderboard-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:center; }
.member-leaderboard-name { display:flex; align-items:center; gap:8px; min-width:0; }
.member-leaderboard-name strong { font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-leaderboard-name span { padding:3px 8px; border-radius:999px; background:rgba(91,164,255,.16); color:#a9ceff; font-size:.7rem; font-weight:800; }
.member-leaderboard-copy p { grid-column:1; margin:.18rem 0 0; color:var(--muted); font-size:.83rem; }
.member-leaderboard-xp { grid-column:2; grid-row:1 / span 2; display:flex; align-items:baseline; gap:5px; }
.member-leaderboard-xp strong { font-size:1.15rem; }
.member-leaderboard-xp span { color:var(--muted); font-size:.72rem; }

@media (max-width:900px) {
  .account-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-xp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .account-hero { align-items:flex-start; }
  .account-identity img { width:62px; height:62px; border-radius:18px; }
  .account-level-badge { min-width:72px; padding:10px 12px; }
  .account-level-badge strong { font-size:1.6rem; }
  .account-stats-grid,.account-quick-links { grid-template-columns:1fr; }
  .member-leaderboard-card { grid-template-columns:42px 48px minmax(0,1fr); gap:10px; padding:12px; }
  .member-leaderboard-avatar { width:46px; height:46px; border-radius:14px; }
  .member-leaderboard-copy { grid-template-columns:1fr; }
  .member-leaderboard-xp { grid-column:1; grid-row:auto; margin-top:5px; }
}

/* ========================================================================== 
   Mousekeeper 2026 UI refresh
   ========================================================================== */
:root {
  --bg: #080a12;
  --bg-soft: #0d111c;
  --panel: rgba(16, 21, 34, .82);
  --panel-strong: rgba(18, 24, 38, .96);
  --surface: rgba(255,255,255,.045);
  --surface-hover: rgba(255,255,255,.07);
  --text: #f6f7fb;
  --muted: #98a3b8;
  --muted-strong: #b7c1d2;
  --blue: #74b8ff;
  --blue-soft: #c5e1ff;
  --pink: #f278e8;
  --pink-soft: #f6c7f2;
  --lavender: #a68cff;
  --success: #55d98b;
  --warning: #f1bd63;
  --danger: #f27888;
  --accent: linear-gradient(135deg, #73b8ff 0%, #a98cff 52%, #ef79e8 100%);
  --border: rgba(176, 194, 224, .12);
  --border-strong: rgba(176, 194, 224, .2);
  --shadow: 0 20px 60px rgba(0, 0, 0, .24);
  --shadow-soft: 0 12px 32px rgba(0,0,0,.16);
}

body {
  background:
    radial-gradient(circle at 14% -5%, rgba(76, 146, 255, .12), transparent 32rem),
    radial-gradient(circle at 96% 3%, rgba(222, 92, 231, .105), transparent 32rem),
    linear-gradient(180deg, #090c14 0%, #080a12 58%, #070910 100%);
}
body::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 54%);
}

.modern-site-header {
  min-height: 74px;
  padding-top: .8rem;
  padding-bottom: .8rem;
  background: rgba(8, 10, 18, .78);
  border-bottom-color: rgba(176,194,224,.09);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.modern-site-header .brand-icon { width: 40px; height: 40px; }
.modern-site-header nav a,
.modern-site-header .link-button { font-size: .9rem; font-weight: 650; }
.modern-site-header nav a:not(.button),
.modern-site-header .link-button { padding: .58rem .75rem; }

.button {
  min-height: 42px;
  border-radius: .82rem;
  padding: .78rem 1.05rem;
  font-weight: 760;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(104, 145, 255, .14); }
.button.secondary {
  background: rgba(255,255,255,.04);
  border-color: rgba(176,194,224,.15);
}
.button.secondary:hover { background: rgba(255,255,255,.065); border-color: rgba(176,194,224,.25); }

.card,
.table-wrap {
  border-color: rgba(176,194,224,.105);
  background: linear-gradient(160deg, rgba(18,23,36,.86), rgba(11,14,23,.94));
  box-shadow: var(--shadow-soft);
}
.card { border-radius: 1.15rem; }
.table-wrap { border-radius: 1.1rem; }
tr:hover td { background: rgba(126, 159, 217, .035); }

.home-page,
.status-page-modern { width: min(1240px, calc(100% - 2rem)); }
.home-page { padding-top: 2.2rem; }
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 560px;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid rgba(176,194,224,.13);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 82% 22%, rgba(162, 103, 255, .14), transparent 28rem),
    radial-gradient(circle at 8% 90%, rgba(79, 163, 255, .1), transparent 24rem),
    linear-gradient(145deg, rgba(18,23,36,.94), rgba(9,12,21,.98));
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 26%, transparent 72%, rgba(255,255,255,.02));
}
.home-hero-copy { position: relative; z-index: 2; }
.home-hero-copy h1 {
  max-width: 790px;
  margin: .72rem 0 1.15rem;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: .93;
  letter-spacing: -.058em;
  font-weight: 820;
}
.home-hero-lead {
  max-width: 680px;
  margin: 0;
  color: #aeb8ca;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.75;
}
.live-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .7rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(176,194,224,.12);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(255,255,255,.035);
  font-size: .8rem;
  font-weight: 720;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-pill.is-online .live-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(85,217,139,.1), 0 0 15px rgba(85,217,139,.55); }
.live-pill.is-offline .live-dot { background: var(--danger); }
.home-hero-actions { margin-top: 1.8rem; }
.home-hero-meta { display:flex; flex-wrap:wrap; gap:.7rem 1.25rem; margin-top:1.45rem; color:var(--muted); font-size:.82rem; }
.home-hero-meta span { display:flex; align-items:center; gap:.35rem; }
.home-hero-meta span + span::before { content:""; width:4px; height:4px; margin-right:.55rem; border-radius:50%; background:rgba(176,194,224,.35); }
.home-hero-meta strong { color:#e4e8f1; font-weight:780; }

.home-hero-visual { position:relative; min-height:420px; display:grid; place-items:center; }
.home-hero-glow { position:absolute; width:320px; height:320px; border-radius:50%; background:conic-gradient(from 210deg, rgba(82,169,255,.34), rgba(169,101,255,.26), rgba(238,104,225,.32), rgba(82,169,255,.34)); filter:blur(64px); opacity:.45; }
.home-logo-wrap {
  position: relative;
  width: min(320px, 72vw);
  aspect-ratio: 1;
  display:grid;
  place-items:center;
  padding: 14px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 28px 70px rgba(0,0,0,.3);
  transform: rotate(2deg);
}
.home-logo-wrap::before { content:""; position:absolute; inset:8px; border:1px solid rgba(176,194,224,.08); border-radius:31px; }
.home-logo-wrap img { width:100%; height:100%; object-fit:cover; border-radius:28px; transform:rotate(-2deg); }
.floating-status {
  position:absolute;
  display:flex;
  align-items:center;
  gap:.68rem;
  min-width: 180px;
  padding:.72rem .82rem;
  border:1px solid rgba(176,194,224,.14);
  border-radius:1rem;
  background:rgba(11,15,25,.78);
  box-shadow:0 14px 36px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
}
.floating-status-top { top:40px; right:-12px; }
.floating-status-bottom { bottom:42px; left:-18px; }
.floating-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:.7rem; background:rgba(255,255,255,.055); }
.floating-status > span:last-child { display:grid; gap:.03rem; }
.floating-status small { color:var(--muted); font-size:.7rem; }
.floating-status strong { font-size:.84rem; }

.home-section { margin-top:4.5rem; }
.home-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.home-section-heading h2 { margin:.32rem 0 0; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.08; letter-spacing:-.04em; }
.text-link { display:inline-flex; align-items:center; gap:.45rem; color:#b8c8e6; text-decoration:none; font-size:.88rem; font-weight:700; }
.text-link span { transition:transform .16s ease; }
.text-link:hover { color:#fff; }
.text-link:hover span { transform:translateX(3px); }

.home-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.home-stat-card {
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1.05rem;
  min-height:96px;
  border:1px solid rgba(176,194,224,.105);
  border-radius:1.05rem;
  background:linear-gradient(155deg, rgba(20,25,39,.75), rgba(12,15,25,.86));
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.home-stat-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border:1px solid rgba(176,194,224,.1); border-radius:.82rem; background:linear-gradient(145deg,rgba(116,184,255,.09),rgba(242,120,232,.08)); }
.home-stat-card div { display:grid; gap:.08rem; }
.home-stat-card p { margin:0; color:var(--muted); font-size:.76rem; }
.home-stat-card strong { font-size:1.12rem; letter-spacing:-.02em; }
.status-text-good { color:#89ebb0; }
.status-text-bad { color:#ffa0aa; }

.feature-grid-modern { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.feature-card-modern {
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:.9rem;
  align-items:start;
  min-height:160px;
  padding:1.2rem;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(176,194,224,.1);
  border-radius:1.15rem;
  background:linear-gradient(155deg,rgba(18,23,36,.72),rgba(10,13,22,.9));
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.feature-card-modern::before { content:""; position:absolute; inset:auto -50px -80px auto; width:160px; height:160px; border-radius:50%; background:rgba(135,101,255,.08); filter:blur(15px); }
.feature-card-modern:hover { transform:translateY(-3px); border-color:rgba(171,157,255,.25); background:linear-gradient(155deg,rgba(21,27,43,.88),rgba(12,15,26,.96)); box-shadow:0 18px 44px rgba(0,0,0,.18); }
.feature-icon-modern { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(176,194,224,.11); border-radius:.9rem; background:rgba(255,255,255,.04); font-size:1.2rem; }
.feature-card-modern h3 { margin:.08rem 0 .45rem; font-size:1rem; letter-spacing:-.02em; }
.feature-card-modern p { margin:0; color:var(--muted); font-size:.87rem; line-height:1.55; }
.feature-arrow { color:#728099; transition:transform .18s ease,color .18s ease; }
.feature-card-modern:hover .feature-arrow { color:#d9e2f3; transform:translateX(3px); }

.home-cta-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin:4.5rem 0 1rem;
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid rgba(176,194,224,.13);
  border-radius:1.5rem;
  background:
    radial-gradient(circle at 90% 0%,rgba(234,111,224,.12),transparent 23rem),
    linear-gradient(140deg,rgba(20,27,43,.88),rgba(12,15,25,.94));
}
.home-cta-card h2 { margin:.35rem 0 .5rem; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.035em; }
.home-cta-card p:not(.eyebrow) { margin:0; max-width:680px; color:var(--muted); }
.modern-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem 1.25rem; border-top-color:rgba(176,194,224,.08); font-size:.82rem; }
.modern-footer span:first-child { color:#e8ebf2; font-weight:750; }
.modern-footer a { color:var(--muted); text-decoration:none; }
.modern-footer a:hover { color:#fff; }

/* Status page */
.status-page-modern { padding-top:2.2rem; }
.status-hero {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1.25rem;
  padding:1.7rem;
  border:1px solid rgba(176,194,224,.12);
  border-radius:1.5rem;
  background:linear-gradient(145deg,rgba(18,23,36,.9),rgba(10,13,22,.96));
  box-shadow:var(--shadow-soft);
}
.status-hero.healthy { border-color:rgba(85,217,139,.18); }
.status-hero.attention { border-color:rgba(241,189,99,.24); }
.status-hero-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:1.1rem; background:rgba(255,255,255,.035); border:1px solid rgba(176,194,224,.1); }
.status-hero-icon span { width:16px; height:16px; border-radius:50%; }
.status-hero.healthy .status-hero-icon span { background:var(--success); box-shadow:0 0 0 8px rgba(85,217,139,.08),0 0 24px rgba(85,217,139,.48); }
.status-hero.attention .status-hero-icon span { background:var(--warning); box-shadow:0 0 0 8px rgba(241,189,99,.08),0 0 24px rgba(241,189,99,.4); }
.status-hero-copy h1 { margin:.28rem 0 .35rem; font-size:clamp(1.7rem,4vw,2.65rem); letter-spacing:-.045em; }
.status-hero-copy p:not(.eyebrow) { margin:0; color:var(--muted); }
.status-hero-meta { display:grid; justify-items:end; gap:.1rem; min-width:110px; }
.status-hero-meta span { color:var(--muted); font-size:.74rem; }
.status-hero-meta strong { font-size:1.05rem; }
.status-section { margin-top:3.3rem; }
.status-updated { color:var(--muted); font-size:.78rem; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.service-card { min-height:190px; padding:1.15rem; border:1px solid rgba(176,194,224,.1); border-radius:1.1rem; background:linear-gradient(155deg,rgba(18,23,36,.74),rgba(10,13,22,.9)); }
.service-card-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.service-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:.72rem; background:rgba(255,255,255,.04); border:1px solid rgba(176,194,224,.09); }
.service-state { display:inline-flex; align-items:center; gap:.38rem; font-size:.68rem; font-weight:760; color:var(--muted-strong); }
.service-state i { width:7px; height:7px; border-radius:50%; background:#7d8799; }
.service-good .service-state i { background:var(--success); box-shadow:0 0 10px rgba(85,217,139,.4); }
.service-warn .service-state i { background:var(--warning); }
.service-bad .service-state i { background:var(--danger); }
.service-neutral .service-state i { background:#7b86a0; }
.service-card h3 { margin:1rem 0 .4rem; font-size:1rem; }
.service-card p { min-height:42px; margin:0 0 .85rem; color:var(--muted); font-size:.82rem; line-height:1.5; }
.service-card small { display:block; padding-top:.75rem; border-top:1px solid rgba(176,194,224,.075); color:#7f8ba2; font-size:.71rem; line-height:1.45; word-break:break-word; }
.service-good { border-color:rgba(85,217,139,.105); }
.service-warn { border-color:rgba(241,189,99,.15); }
.service-bad { border-color:rgba(242,120,136,.17); }
.diagnostic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid rgba(176,194,224,.1); border-radius:1.15rem; background:rgba(12,15,25,.72); }
.diagnostic-grid article { min-height:120px; padding:1.15rem; border-right:1px solid rgba(176,194,224,.075); border-bottom:1px solid rgba(176,194,224,.075); }
.diagnostic-grid article:nth-child(3n) { border-right:0; }
.diagnostic-grid article:nth-last-child(-n+3) { border-bottom:0; }
.diagnostic-grid span,.diagnostic-grid small { display:block; color:var(--muted); }
.diagnostic-grid span { margin-bottom:.45rem; font-size:.72rem; }
.diagnostic-grid strong { display:block; margin-bottom:.26rem; font-size:1.3rem; letter-spacing:-.03em; }
.diagnostic-grid small { font-size:.72rem; }

/* Refined member navigation */
.member-sidebar {
  background:
    radial-gradient(circle at 0 0, rgba(87,147,255,.1), transparent 19rem),
    linear-gradient(180deg,rgba(10,13,22,.985),rgba(9,11,19,.985));
  border-right-color:rgba(176,194,224,.09);
  box-shadow:18px 0 55px rgba(0,0,0,.18);
}
.member-sidebar-brand img { border-radius:13px; box-shadow:0 12px 30px rgba(132,101,255,.16); }
.member-sidebar-link { min-height:44px; border-radius:.82rem; color:#aeb8c9; font-size:.88rem; font-weight:650; }
.member-sidebar-link > span { width:30px; height:30px; display:grid; place-items:center; border-radius:.62rem; background:rgba(255,255,255,.025); font-size:.9rem; }
.member-sidebar-link:hover { background:rgba(255,255,255,.035); }
.member-sidebar-link.active { background:linear-gradient(100deg,rgba(81,148,255,.12),rgba(214,95,236,.09)); border-color:rgba(158,164,255,.18); box-shadow:none; }
.member-sidebar-link.active > span { background:linear-gradient(135deg,rgba(101,170,255,.16),rgba(226,112,238,.14)); }
.member-sidebar-user { border-color:rgba(176,194,224,.1); border-radius:1rem; background:rgba(255,255,255,.025); }

@media (max-width: 1080px) {
  .home-hero { grid-template-columns:1fr; min-height:0; }
  .home-hero-visual { min-height:390px; }
  .home-logo-wrap { width:min(290px,65vw); }
  .floating-status-top { right:8%; }
  .floating-status-bottom { left:8%; }
  .feature-grid-modern { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .modern-site-header nav { gap:.2rem; }
  .home-page,.status-page-modern { width:min(100% - 1rem,1240px); }
  .home-hero { padding:1.35rem; border-radius:1.35rem; }
  .home-hero-copy h1 { font-size:clamp(2.65rem,14vw,4.1rem); }
  .home-hero-meta span + span::before { display:none; }
  .home-hero-visual { min-height:330px; }
  .home-logo-wrap { width:min(245px,70vw); border-radius:30px; }
  .home-logo-wrap img { border-radius:22px; }
  .floating-status { min-width:155px; padding:.6rem; }
  .floating-status-top { top:22px; right:0; }
  .floating-status-bottom { bottom:18px; left:0; }
  .home-section { margin-top:3rem; }
  .home-section-heading { align-items:flex-start; flex-direction:column; }
  .home-stat-grid,.feature-grid-modern,.service-grid { grid-template-columns:1fr; }
  .home-cta-card { align-items:flex-start; flex-direction:column; margin-top:3rem; }
  .status-hero { grid-template-columns:auto minmax(0,1fr); align-items:start; padding:1.2rem; }
  .status-hero-meta { grid-column:2; justify-items:start; }
  .diagnostic-grid { grid-template-columns:1fr; }
  .diagnostic-grid article,.diagnostic-grid article:nth-child(3n),.diagnostic-grid article:nth-last-child(-n+3) { border-right:0; border-bottom:1px solid rgba(176,194,224,.075); }
  .diagnostic-grid article:last-child { border-bottom:0; }
}

/* ========================================================================== 
   Mousekeeper achievements + member profile
   ========================================================================== */
.account-page-modern { padding-top:2rem; }
.account-page-intro,.achievement-page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem; }
.account-profile-hero {
  padding:1.45rem;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(360px,.8fr);
  gap:1.25rem;
  background:
    radial-gradient(circle at 92% 0,rgba(220,92,232,.12),transparent 23rem),
    radial-gradient(circle at 18% 100%,rgba(76,151,255,.1),transparent 25rem),
    linear-gradient(145deg,rgba(18,23,36,.88),rgba(10,13,22,.96));
  border-color:rgba(162,155,255,.15);
}
.account-profile-main { display:flex; align-items:center; gap:1.2rem; min-width:0; }
.account-avatar-wrap { position:relative; flex:0 0 auto; }
.account-avatar-wrap img { width:112px; height:112px; object-fit:cover; border-radius:1.45rem; border:1px solid rgba(199,183,255,.2); box-shadow:0 18px 45px rgba(0,0,0,.28); }
.account-level-orb { position:absolute; right:-8px; bottom:-8px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:850; font-size:.82rem; background:linear-gradient(135deg,#638fff,#c35ee0); border:4px solid #0d111c; box-shadow:0 8px 20px rgba(98,112,255,.25); }
.account-profile-copy { min-width:0; }
.account-profile-copy h2 { margin:.2rem 0 .28rem; font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.05em; }
.account-profile-subtitle { margin:0 0 .85rem; color:var(--muted); }
.account-profile-subtitle strong { color:#e8eef9; }
.account-progress-track-hero { max-width:620px; height:9px; }
.account-progress-caption { margin:.45rem 0 0; color:#8997ad; font-size:.73rem; }
.account-hero-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.account-hero-metrics > div { display:grid; align-content:center; min-height:92px; padding:.85rem; border:1px solid rgba(176,194,224,.09); border-radius:.95rem; background:rgba(255,255,255,.025); }
.account-hero-metrics span,.account-hero-metrics small { color:var(--muted); font-size:.68rem; }
.account-hero-metrics strong { margin:.14rem 0; font-size:1.28rem; letter-spacing:-.035em; }
.account-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:2.4rem 0 .8rem; }
.account-section-heading h2 { margin:.2rem 0 .18rem; font-size:1.35rem; letter-spacing:-.035em; }
.account-section-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.82rem; }
.account-section-heading > a { color:#aabcf5; text-decoration:none; font-size:.78rem; font-weight:700; }
.account-section-heading > a:hover { color:#fff; }
.achievement-featured-grid,.achievement-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.achievement-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.achievement-card { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:.8rem; min-height:150px; padding:1rem; border:1px solid rgba(176,194,224,.1); border-radius:1.05rem; background:linear-gradient(150deg,rgba(18,23,36,.72),rgba(10,13,22,.9)); overflow:hidden; }
.achievement-card::after { content:""; position:absolute; inset:auto -42px -52px auto; width:150px; height:150px; border-radius:50%; opacity:.08; filter:blur(2px); pointer-events:none; }
.achievement-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:.9rem; font-size:1.55rem; background:rgba(255,255,255,.035); border:1px solid rgba(176,194,224,.09); }
.achievement-card-copy { min-width:0; }
.achievement-card-copy h3 { margin:.28rem 0 .3rem; font-size:1rem; letter-spacing:-.02em; }
.achievement-card-copy p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.48; }
.achievement-card-topline { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.achievement-rarity { display:inline-flex; width:max-content; text-transform:uppercase; letter-spacing:.1em; font-size:.58rem; font-weight:850; color:#8e9bad; }
.achievement-rule { color:#68768c; font-size:.64rem; }
.achievement-earned-mark,.achievement-lock { position:absolute; top:.72rem; right:.72rem; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-size:.72rem; }
.achievement-earned-mark { color:#c7ffe1; background:rgba(65,199,126,.12); border:1px solid rgba(85,217,139,.2); }
.achievement-lock { opacity:.48; }
.achievement-common { border-color:rgba(148,163,184,.13); }
.achievement-common::after { background:#94a3b8; }
.achievement-rare { border-color:rgba(84,159,255,.19); }
.achievement-rare::after { background:#4d9cff; }
.achievement-rare .achievement-rarity { color:#73aaff; }
.achievement-epic { border-color:rgba(190,95,245,.21); }
.achievement-epic::after { background:#b85cf1; }
.achievement-epic .achievement-rarity { color:#ca85f6; }
.achievement-legendary { border-color:rgba(245,176,65,.24); background:linear-gradient(150deg,rgba(40,30,18,.72),rgba(14,13,18,.92)); }
.achievement-legendary::after { background:#f3ad3d; opacity:.11; }
.achievement-legendary .achievement-rarity { color:#f3bb60; }
.achievement-locked { opacity:.64; filter:saturate(.65); }
.achievement-earned-date,.achievement-manual-note { display:block; margin-top:.7rem; color:#7f8ca0; font-size:.66rem; }
.achievement-progress { margin-top:.75rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.55rem; }
.achievement-progress > div { height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); }
.achievement-progress > div span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5797ff,#b76ee8); }
.achievement-progress small { color:#7b879b; font-size:.63rem; white-space:nowrap; }
.achievement-empty-featured { display:flex; align-items:center; gap:1rem; padding:1.15rem; }
.achievement-empty-featured > span { font-size:1.8rem; }
.achievement-empty-featured div { flex:1; }
.achievement-empty-featured p { margin:.25rem 0 0; color:var(--muted); font-size:.8rem; }
.achievement-summary-pill { display:flex; align-items:baseline; gap:.45rem; padding:.7rem .9rem; border:1px solid rgba(176,194,224,.1); border-radius:.9rem; background:rgba(255,255,255,.025); }
.achievement-summary-pill strong { font-size:1.3rem; }
.achievement-summary-pill span { color:var(--muted); font-size:.72rem; }
.achievement-stat-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:1rem 0; overflow:hidden; border:1px solid rgba(176,194,224,.1); border-radius:1rem; background:rgba(12,15,25,.72); }
.achievement-stat-strip > div { padding:.85rem 1rem; border-right:1px solid rgba(176,194,224,.075); }
.achievement-stat-strip > div:last-child { border-right:0; }
.achievement-stat-strip span { display:block; color:var(--muted); font-size:.67rem; }
.achievement-stat-strip strong { display:block; margin-top:.12rem; font-size:1.12rem; }
.achievement-feature-manager { margin-top:1rem; }
.achievement-feature-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.achievement-feature-choice { position:relative; display:flex; align-items:center; gap:.7rem; min-height:76px; padding:.72rem; border:1px solid rgba(176,194,224,.09); border-radius:.9rem; background:rgba(255,255,255,.018); cursor:pointer; }
.achievement-feature-choice input { position:absolute; top:.65rem; right:.65rem; width:auto; }
.achievement-feature-choice .achievement-icon { width:42px; height:42px; flex:0 0 42px; font-size:1.2rem; }
.achievement-feature-choice > span:last-child { display:grid; min-width:0; }
.achievement-feature-choice strong { font-size:.8rem; }
.achievement-feature-choice small { color:var(--muted); text-transform:capitalize; font-size:.63rem; }
.achievement-feature-choice:has(input:checked) { background:linear-gradient(100deg,rgba(78,146,255,.08),rgba(201,91,232,.06)); box-shadow:inset 0 0 0 1px rgba(167,147,255,.12); }
.achievement-feature-actions { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.achievement-feature-actions small { color:var(--muted); font-size:.69rem; }
.achievement-gallery-heading { margin-top:2.8rem; }
.account-stats-modern { grid-template-columns:repeat(5,minmax(0,1fr)); }

@media (max-width:1100px) {
  .account-profile-hero { grid-template-columns:1fr; }
  .achievement-featured-grid,.achievement-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .achievement-feature-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .achievement-stat-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .achievement-stat-strip > div { border-bottom:1px solid rgba(176,194,224,.075); }
  .account-stats-modern { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .account-page-intro,.achievement-page-intro,.account-section-heading { align-items:flex-start; flex-direction:column; }
  .account-profile-main { align-items:flex-start; flex-direction:column; }
  .account-avatar-wrap img { width:92px; height:92px; }
  .account-hero-metrics,.achievement-featured-grid,.achievement-gallery-grid,.achievement-feature-picker,.achievement-stat-strip,.account-stats-modern { grid-template-columns:1fr; }
  .achievement-stat-strip > div { border-right:0; }
  .achievement-feature-actions { align-items:flex-start; flex-direction:column; }
  .achievement-card { min-height:135px; }
}

/* Event attendance */
.event-history-list { display:grid; gap:.55rem; margin-top:.5rem; }
.event-history-list article { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border:1px solid rgba(176,194,224,.09); border-radius:.85rem; background:rgba(255,255,255,.018); }
.event-history-list article div { display:grid; gap:.18rem; }
.event-history-list article small { color:var(--muted); }
.event-history-list article b { color:#8ef0b8; white-space:nowrap; }
@media(max-width:600px){.event-history-list article{align-items:flex-start;flex-direction:column}.event-history-list article b{white-space:normal}}