: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; }
}