/* ==========================================================================
   OLD MYSTERY — modern shell (reference: pg-example / Mythera74)
   Styles the NEW layout skeleton (ms-* classes) written in layout.blade.php.
   Loads AFTER mythera.css and re-declares the shared tokens so both the shell
   and the content overlay use the reference's live theme values.
   ========================================================================== */

:root {
  /* reference live :root tokens */
  --background: #111317;
  --card: #16181d;
  --card-2: #1b1e24;
  --border: #393e46;
  --border-soft: #2a2e35;
  --primary: #b8862f;
  --primary-bright: #d9ab4a;
  --primary-dim: #6e5316;
  --foreground: #e0e0e0;
  --muted-foreground: #8c8c8c;
  --muted-dim: #6b6f76;
  --secondary: #2e3138;
  --accent: #32363e;
  --success: #37ae63;

  --sidebar-width: 280px;

  --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-data: 'Source Code Pro', ui-monospace, monospace;
  --font-display: 'Cinzel', 'Georgia', serif;

  --radius: 8px;
  --radius-sm: 6px;
}

/* HTMX: subtle fade while the swap region is being fetched */
/* #ms-swap now sits BETWEEN .ms-shell (flex row) and .ms-main, so it is the
   flex child that must grow to fill the space next to the sidebar. Without
   flex:1 it shrinks to content width and the page renders narrow/left-aligned
   with the whole right half empty. It also relays the column flex to .ms-main. */
#ms-swap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: opacity .12s ease;
}
#ms-swap > .ms-main { flex: 1; }
#ms-swap.ms-swapping { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #ms-swap { transition: none; }
}

/* ==========================================================================
   1. Page base + fixed dimmed artwork backdrop
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background) !important;
  background-image: none !important;
  color: var(--foreground);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /* sticky footer: em paginas curtas (menu recolhido, pouco conteudo) o
     .ms-shell estica (flex:1) e o rodape assenta no fundo do viewport em vez
     de subir deixando faixa morta abaixo dele. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ms-page-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    linear-gradient(rgba(13,15,18,.90), rgba(13,15,18,.97)),
    var(--ms-artwork, none) center top / cover no-repeat;
}

::selection { background: var(--primary); color: #1a1206; }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #202327; }
body::-webkit-scrollbar-thumb {
  background: #40454f;
  border-radius: 6px;
  border: 2px solid #202327;
}
body::-webkit-scrollbar-thumb:hover { background: var(--primary); }

a { color: var(--primary-bright); }
a:hover { color: var(--foreground); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   2. Signature chrome — OLD MYSTERY arcane gold. Instead of Mythera's burnt
   parchment corners: a hairline of gold across the card top with a centered
   star glint, echoing the golden frame + glowing orb of the game's crest.
   (class name kept as card-medieval so no blade edits are needed)
   ========================================================================== */

.card-medieval {
  border: 1px solid #322c1f;
  background: var(--card);
  position: relative;
  border-radius: var(--radius);
  box-shadow: 0 8px 16px -4px rgba(0,0,0,.4), 0 4px 8px -2px rgba(0,0,0,.3),
              inset 0 1px rgba(255,255,255,.04);
}

.card-medieval::before {
  content: "";
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,161,66,.55) 30%,
    rgba(233,199,116,.95) 50%,
    rgba(201,161,66,.55) 70%,
    transparent);
}

.card-medieval::after {
  content: "\2726";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 2;
  font-size: 13px; line-height: 20px;
  color: #e9c774;
  text-shadow: 0 0 10px rgba(201,161,66,.85), 0 0 3px rgba(233,199,116,.9);
}

.card-medieval > * { position: relative; z-index: 1; }

/* ==========================================================================
   3. Topbar
   ========================================================================== */

.ms-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* altura fixa: o offset sticky do sidebar (.ms-sidebar-col) deriva daqui */
  height: 70px;
  border-bottom: 1px solid var(--border);
  background: rgba(22,24,29,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ms-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  /* header de 70px fixos: flex centraliza o logo (64px) na vertical.
     width+border-box IGUAIS ao .ms-shell — senao os containers de 1400px
     centralizam com 16px de defasagem e o logo desalinha da coluna do menu. */
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ms-topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* mesma largura da coluna do sidebar: o logo centraliza exatamente sobre
     o card lateral logo abaixo. No mobile (drawer) volta ao fluxo normal. */
  width: var(--sidebar-width);
  flex-shrink: 0;
  gap: 10px;
  text-decoration: none;
  transition: opacity .15s ease;
}
@media (max-width: 900px) {
  .ms-topbar-logo { width: auto; justify-content: flex-start; }
}
.ms-topbar-logo:hover { opacity: .85; }
.ms-topbar-logo img {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(240, 190, 60, .25));
}
.ms-topbar-logo .ms-version {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted-foreground);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.ms-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ms-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--secondary);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  text-decoration: none;
  transition: background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.ms-pill:hover { background: rgba(46,49,56,.8); color: var(--foreground); }
.ms-pill img { width: 16px; height: 16px; display: block; }

/* players-online pill: keeps the legacy #playersOnlineInfo/.InfoBarLinks +
   #statusBar contract used by updatePlayersOnline() */
.ms-pill-online { font-weight: 600; }
.ms-pill-online .InfoBarLinks {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--foreground) !important;
  text-decoration: none;
}
.ms-pill-online #statusBar {
  border-collapse: separate;
  border-spacing: 2px;
  background: transparent !important;
  width: auto !important;
  margin: 0 0 0 4px !important;
}
.ms-pill-online #statusBar td {
  width: 9px; height: 6px;
  padding: 0 !important;
  border-radius: 2px;
  background: var(--border-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.5) inset;
  transition: background .4s ease;
  animation: ms-pulse 2.6s ease-in-out infinite;
}

.ms-badge-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 2px solid var(--success);
  background: var(--success);
  color: #fafafa;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  animation: ms-pulse-soft 2s cubic-bezier(.4,0,.6,1) infinite;
}
.ms-badge-online.is-offline {
  border-color: #c0392b;
  background: #c0392b;
  animation: none;
}

@keyframes ms-pulse       { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes ms-pulse-soft  { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

.ms-hamburger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font-size: 18px;
  cursor: pointer;
}
.ms-hamburger:hover { background: var(--accent); }

/* ==========================================================================
   4. Shell row: sidebar + main
   ========================================================================== */

.ms-shell {
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 16px;
  /* empurra o rodape para o fundo do viewport em paginas curtas */
  flex: 1 0 auto;
}

/* sticky lives on the COLUMN, not the card: the card's parent is exactly its
   own height (shell is align-items:flex-start), so a sticky card has zero
   travel room. The column travels within .ms-shell, whose height follows the
   tall main column. Mobile drawer overrides this with position:fixed. */
.ms-sidebar-col {
  flex-shrink: 0;
  width: var(--sidebar-width);
  position: sticky;
  /* 88 = topbar fixo (70px) + 18px de respiro. Se a altura do topbar mudar,
     este offset e o max-height do card mudam juntos. */
  top: 88px;
}

.ms-sidebar {
  display: flex;
  flex-direction: column;
  /* 196 = 88 (offset sticky) + 103 (rodapé ~79 + padding do shell 24) + 5 de
     folga. O card precisa caber em viewport − offset − faixa do rodapé: se
     ocupar mais, o fim do .ms-shell empurra a coluna sticky para cima quando o
     rodapé entra na tela. Excedente rola dentro de .ms-sidebar-scroll. */
  max-height: calc(100dvh - 196px);
  background: rgba(22,24,29,.95);
  backdrop-filter: blur(4px);
  /* keep the card's own rounded corners (.card-medieval sets border-radius:
     var(--radius)); do NOT use `inherit` here — the flex parent has radius 0,
     so inherit would square the card off. */
}

.ms-sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px 10px;
  text-decoration: none;
  transition: opacity .15s ease;
}
.ms-sidebar-logo:hover { opacity: .9; }
.ms-sidebar-logo img {
  max-width: 100%;
  height: auto;
  /* Glow dourado recriado via CSS — o SVG do logo é recortado sem halo,
     então o brilho fica limpo sobre qualquer fundo. */
  filter: drop-shadow(0 0 14px rgba(240, 190, 60, .28));
}
.ms-sidebar-logo .ms-version {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted-foreground);
}

.ms-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* generous side padding + faded ends keep the divider lines from touching
     the card's inner edge. */
  padding: 6px 22px;
  overflow: hidden;
}
.ms-orn .line {
  flex: 1; height: 1px;
  background: linear-gradient(to right,
    transparent 0%, transparent 12%,
    rgba(201,161,66,.5) 50%,
    transparent 88%, transparent 100%);
}
.ms-orn .star { margin: 0 6px; font-size: 10px; line-height: 1; color: rgba(201,161,66,.6); }

.ms-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 4px 0 10px;
}
.ms-sidebar-scroll::-webkit-scrollbar { width: 8px; }
.ms-sidebar-scroll::-webkit-scrollbar-thumb { background: #40454f; border-radius: 6px; }

/* CTA block */
.ms-cta-block { padding: 10px 14px 4px; display: grid; gap: 8px; }

.ms-btn {
  display: block;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, transform .1s ease;
}
.ms-btn:active { transform: translateY(1px); }

.ms-btn-primary {
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  border: 1px solid var(--primary-dim);
  color: #1a1206;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -10px rgba(201,161,66,.55);
}
.ms-btn-primary:hover { filter: brightness(1.12); color: #1a1206; }

.ms-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}
.ms-btn-ghost:hover { background: var(--accent); color: var(--foreground); }

/* nav sections (accordion) */
.ms-section-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(224,224,224,.8);
  transition: color 75ms ease-out;
}
.ms-section-label:hover { color: var(--foreground); }
.ms-section-label .chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: rgba(201,161,66,.85);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.ms-nav-section.collapsed .ms-section-label .chev { transform: rotate(-90deg); }

/* animated collapse: 1fr <-> 0fr grid row, inner wrap clips the content */
.ms-section-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease;
  padding-bottom: 4px;
}
.ms-nav-section.collapsed .ms-section-items {
  grid-template-rows: 0fr;
  padding-bottom: 0;
}
.ms-items-wrap { overflow: hidden; min-height: 0; }

.ms-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 6px;
  padding: 9px 16px;
  border-radius: 3px;
  font-size: 14.5px;
  color: rgba(224,224,224,.8);
  text-decoration: none;
  transition: background 75ms ease-out, color 75ms ease-out;
}
.ms-nav-item:hover { background: rgba(50,54,62,.4); color: var(--foreground); }
.ms-nav-item .ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: rgba(201,161,66,.85);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 75ms ease-out;
}
.ms-nav-item.active {
  background: linear-gradient(180deg, rgba(217,171,74,.95), rgba(184,134,47,.95));
  color: #1a1206;
}
.ms-nav-item.active:hover { background: var(--primary); }
.ms-nav-item.active .ico { stroke: #1a1206; }
@media (prefers-reduced-motion: reduce) {
  .ms-section-items, .ms-section-label .chev { transition: none; }
}

/* sidebar widget cards (server save / streamers / translate) */
.ms-side-card {
  margin: 10px 14px 0;
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ms-side-card h4 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-foreground);
}

/* server-save timer (GSAP digit columns).
   basic_d.css styles the legacy themebox clock with absolute offsets and 10px
   rows behind shifted clip windows (.timer--clock{top:40.5px}, .num{height:10px},
   #PlayNowContainer-era metrics). The selectors below MIRROR its specificity
   and hard-reset everything to a plain 22px-row model that matches the
   adjusted GSAP tween (y = -offsetTop). */
.ms-side-card .timer {
  display: flex !important;
  justify-content: center;
  height: auto !important;
  width: auto !important;
  color: var(--foreground) !important;
}
.ms-side-card .timer .timer--clock {
  position: static !important;
  top: 0 !important;
  height: auto !important;
  margin: 0 !important;
  /* hidden: a digit column caught mid-tween can never poke out of the pill */
  overflow: hidden !important;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-data);
  background: var(--background);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.ms-side-card .timer .clock-display-grp {
  width: auto !important;
  position: static !important;
  display: flex;
  gap: 2px;
}
.ms-side-card .timer .clock-display-grp .number-grp {
  height: 22px !important;
  width: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  position: relative;
}
.ms-side-card .timer .clock-display-grp .number-grp .number-grp-wrp {
  width: 100% !important;
  position: relative !important;
  background: transparent;
  border: 0;
  padding: 0;
}
.ms-side-card .timer .clock-display-grp .number-grp .num {
  height: 22px !important;
  width: 100% !important;
  position: static !important;
}
.ms-side-card .timer .clock-display-grp .number-grp .num p {
  margin: 0 !important;
  display: block !important;
  width: auto !important;
  height: 22px;
  line-height: 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--foreground);
  text-align: center;
}
.ms-side-card .timer .clock-separator {
  float: none !important;
  display: block !important;
}
.ms-side-card .timer .clock-separator p {
  margin: 0 !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--primary-bright);
}

/* boosted monsters pedestal */
/* basic_d.css positions #PedestalAndOnline `absolute; left:-10px; top:-105px`
   (legacy themebox art placement). Inside the new sidebar card that flings the
   boosted-monsters content — and its "No boosted monsters today." empty state —
   up over the Download Client button (the reported top-left artifact). Reset it
   to normal in-flow flex. */
#PedestalAndOnline {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex;
  justify-content: center;
}
#PedestalOutfits { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 40px; }
/* creature slot tile: same vocabulary as the auction-page paperdoll slots.
   The bottom radial glow is the "boosted today" accent. */
#PedestalOutfits .PedestalOutfit {
  /* 64px = exact animoutfit.php canvas size, so sprites fit 1:1 with no
     guess-work margins; bigger canvases scale down via object-fit below */
  width: 64px;
  height: 64px;
  background:
    radial-gradient(ellipse 65% 38% at 50% 90%, rgba(217, 171, 74, .22), transparent 70%),
    var(--background);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#PedestalOutfits .PedestalOutfit a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
}
#PedestalOutfits .PedestalOutfit img {
  image-rendering: pixelated;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: transform .15s ease;
}
#PedestalOutfits .PedestalOutfit:hover { border-color: var(--primary-bright); }
#PedestalOutfits .PedestalOutfit:hover img { transform: translateY(-2px); }
/* fallback when the creature has no sprite: its initial, display serif, dim gold */
.PedestalInitial {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--primary-bright);
  opacity: .55;
  line-height: 1;
  padding-bottom: 12px;
}

/* streamers list */
.ms-side-card #streamerScroll td { border: 0 !important; background: transparent !important; }
.ms-side-card .ms-streamers-scroll { max-height: 140px; overflow-y: auto; }
.ms-side-card .ms-streamers-foot { margin-top: 8px; font-size: 12px; }
.ms-side-card .ms-streamers-foot a { color: var(--muted-foreground); text-decoration: none; }
.ms-side-card .ms-streamers-foot a:hover { color: var(--foreground); }

/* widget empty states (boosted monsters / streamers) */
.ms-side-empty { margin: 0; font-size: 12px; color: var(--muted-dim); }

/* language flags */
.ms-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-flags .languageFlag {
  width: 28px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, border-color .15s ease;
  background: transparent;
}
.ms-flags .languageFlag img { display: block; }
.ms-flags .languageFlag:hover { opacity: 1; border-color: var(--primary-dim); }

/* google translate machinery: keep suppressed */
#google_translate_element { display: none; }
.goog-te-banner-frame { display: none !important; }
.skiptranslate { display: none; }
#goog-gt-tt { display: none !important; }
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { box-shadow: none !important; background: transparent !important; }

/* ==========================================================================
   5. Main column
   ========================================================================== */

.ms-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ms-page-card { padding: 26px 28px; background: rgba(22,24,29,.98); }

.ms-page-title { text-align: center; margin: 0 0 6px; }
.ms-page-title h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--foreground);
}
.ms-page-title .sub { font-size: 15px; color: var(--muted-foreground); margin: 0 0 14px; }
.ms-page-title .sub a { color: var(--primary-bright); font-weight: 600; text-decoration: none; }
.ms-page-title .sub a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* flash messages */
.ms-flash {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
}
.ms-flash-success {
  background: rgba(55,174,99,.1);
  border-color: rgba(55,174,99,.45);
  color: #b5e6c8;
}
.ms-flash-error {
  background: rgba(192,57,43,.12);
  border-color: rgba(192,57,43,.5);
  color: #f0b9b9;
}
.ms-flash b { color: inherit; }

/* launch countdown card */
.ms-countdown { text-align: center; padding: 22px; }
.ms-countdown .headline { font-size: 24px; font-weight: 300; color: var(--foreground); }
.ms-countdown .headline b { font-weight: 700; }
.ms-countdown .digits {
  font-family: var(--font-data);
  font-size: 26px;
  color: var(--primary-bright);
  margin: 10px 0;
}
.ms-countdown hr { border: 0; border-top: 1px solid var(--border-soft); margin: 14px 0; }
.ms-countdown small { color: var(--muted-foreground); }

/* ==========================================================================
   6. Footer
   ========================================================================== */

.ms-footer {
  border-top: 1px solid var(--border);
  background: rgba(22,24,29,.55);
  backdrop-filter: blur(4px);
  margin-top: 28px;
}
.ms-footer-inner {
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}
.ms-footer a { color: var(--muted-foreground); text-decoration: none; }
.ms-footer a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   7. Mobile
   ========================================================================== */

.ms-drawer-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 45;
  background: rgba(0,0,0,.55);
}

@media (max-width: 900px) {
  .ms-hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .ms-pills { display: none; }

  .ms-shell { flex-direction: column; padding: 16px 12px; }

  .ms-sidebar-col {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 50;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform .2s ease-out;
  }
  body.ms-drawer-open .ms-sidebar-col { transform: translateX(0); }
  body.ms-drawer-open .ms-drawer-backdrop { display: block; }

  .ms-sidebar {
    position: static;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    background: var(--background);
    border-right: 1px solid var(--border);
  }

  .ms-page-card { padding: 18px 16px; }
  .ms-page-title h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}