/* Diseño compartido por todas las vistas internas del portal MuBest. */
:root {
  --page-gold: #f1c568;
  --page-gold-bright: #ffd978;
  --page-blue: #2698ff;
  --page-cyan: #52c9ff;
  --page-panel: rgba(2, 15, 30, .93);
  --page-panel-soft: rgba(5, 24, 43, .88);
  --page-line: rgba(87, 145, 197, .45);
  --page-text: #eef5ff;
  --page-muted: rgba(199, 216, 236, .76);
}

body { background: #020914; }

.pageHero {
  min-height: calc(100svh - 94px);
  padding-top: 80px;
  background: #020914;
}
.pageHero .hero__bgMedia,
.pageHero .hero__bg,
.pageHero .hero__shade {
  position: fixed;
  inset: 80px 0 0;
}
.pageHero .hero__bgMedia { z-index: 0; background: #020914; }
.pageHero .hero__bgImage { display: none !important; }
.pageHero .hero__bgVideo {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: saturate(1.12) contrast(1.08) brightness(.7);
}
.pageHero .hero__bg {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(1,7,15,.73), rgba(2,9,19,.34) 48%, rgba(1,7,15,.62)),
    linear-gradient(180deg, rgba(1,7,15,.08), rgba(1,8,18,.62) 74%, #020914);
  transform: none;
  filter: none;
}
.pageHero .hero__shade {
  z-index: 1;
  background:
    radial-gradient(900px 480px at 50% 10%, rgba(34,117,219,.14), transparent 70%),
    linear-gradient(180deg, transparent 45%, rgba(0,6,14,.58));
}
.pageHero .hero__inner {
  align-content: start;
  min-height: calc(100svh - 80px);
  padding: 46px 0 68px;
}

.pageShell { width: 100%; gap: 20px; }
.pageShell__head {
  position: relative;
  width: min(1180px, 100%);
  min-height: 180px;
  margin: 0 auto;
  padding: 30px 36px 28px 116px;
  place-content: center start;
  text-align: left;
  overflow: hidden;
  border: 1px solid rgba(217,165,67,.66);
  border-radius: 5px;
  background:
    linear-gradient(100deg, rgba(2,15,30,.97), rgba(5,31,57,.88) 58%, rgba(20,28,45,.84));
  box-shadow: 0 22px 55px rgba(0,0,0,.48), inset 0 0 0 4px rgba(231,183,90,.045);
}
.pageShell__head::before {
  content: "✦";
  position: absolute;
  left: 36px;
  top: 50%;
  display: grid;
  width: 60px;
  height: 66px;
  place-items: center;
  transform: translateY(-50%);
  clip-path: polygon(50% 0,100% 18%,90% 78%,50% 100%,10% 78%,0 18%);
  border: 1px solid rgba(229,180,82,.52);
  background: rgba(3,20,38,.9);
  color: var(--page-gold-bright);
  font: 700 31px Georgia,serif;
  text-shadow: 0 0 18px rgba(255,177,42,.52);
}
.pageShell__head::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -100px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(51,147,236,.2);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(27,118,230,.14);
}
.pageShell__eyebrow {
  color: var(--page-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .28em;
}
.pageShell__title {
  color: #f4dca5;
  font: 900 clamp(38px,5vw,60px)/.95 Georgia,"Times New Roman",serif;
  text-shadow: 0 3px 18px rgba(0,0,0,.65);
}
.pageShell__subtitle {
  width: min(720px,100%);
  margin: 0;
  color: var(--page-muted);
  font-size: 15px;
  line-height: 1.55;
}

.pageShell__frame,
.modal {
  position: relative;
  border: 1px solid rgba(213,164,70,.65);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(16,49,75,.22), transparent 40%),
    var(--page-panel);
  box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 0 0 4px rgba(218,168,73,.04);
  backdrop-filter: blur(16px);
}
.pageShell__frame::before,
.modal::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(83,137,181,.2);
}
.pageShell__body { position: relative; z-index: 1; padding: 24px; gap: 16px; color: var(--page-text); }
.pageShell__frame--wide { width: min(1420px,100%); }

.modalOverlay { background: rgba(0,7,17,.82); }
.modal__top { position: relative; z-index: 1; background: rgba(8,31,54,.88); border-bottom-color: rgba(217,166,70,.34); }
.modal__body { position: relative; z-index: 1; color: var(--page-text); }
.modal__close { border-color: var(--page-line); background: rgba(8,34,59,.9); color: #eaf5ff; }

.modal__card,
.formCard,
.serverInfo__panel,
.marketPanel,
.marketCard,
.marketMiniCard,
.marketCharacterCard,
.marketBoardPanel,
.accountHeader,
.charCard {
  border: 1px solid var(--page-line);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(12,45,72,.48), rgba(2,15,29,.9));
  box-shadow: inset 0 0 24px rgba(26,93,162,.05);
}
.modal__cardTitle,
.formCard__title,
.serverInfo__panelTitle,
.marketPanel__title,
.marketCard__title,
.marketMiniCard__title,
.marketCharacterCard__title,
.accountName,
.charName { color: #f4dfad; font-family: Georgia,"Times New Roman",serif; }
.text-muted,
.formCard__subtitle,
.marketPanel__sub,
.marketMiniCard__sub,
.marketCharacterCard__meta,
.accountSub { color: var(--page-muted); }

.btn--primary,
.pageHero .btn--primary {
  border-color: #ffe083;
  background: linear-gradient(90deg,#ed9b1d,#ffdb6c 50%,#e9951b);
  color: #201303;
  box-shadow: 0 0 24px rgba(255,169,35,.24), inset 0 0 12px rgba(255,255,255,.24);
}
.btn--secondary,
.pageHero .btn--secondary,
.pageHero .btn--ghost {
  border-color: #2d8ee8;
  background: linear-gradient(180deg,rgba(16,63,112,.96),rgba(3,24,47,.96));
  color: #f1f7ff;
  box-shadow: inset 0 0 18px rgba(56,139,230,.1);
}

.formCard { padding: 24px; }
.formGroup { gap: 8px; }
.formLabel { color: #a9c9ea; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.formInput,
.marketSelect,
.marketTinyInput {
  border: 1px solid rgba(81,142,196,.52);
  border-radius: 5px;
  background: rgba(3,18,34,.88);
  color: #eef6ff;
  box-shadow: inset 0 0 14px rgba(28,94,157,.08);
}
.formInput:focus,
.marketSelect:focus,
.marketTinyInput:focus { border-color: #43b6ff; box-shadow: 0 0 0 3px rgba(41,151,241,.13); }
.formFooter { color: var(--page-muted); }
.formMsg { border-radius: 4px; }
.captchaPrompt { color: #f4d898; background: rgba(15,43,66,.74); border-color: rgba(216,168,74,.38); }

.serverInfo__header,
.marketHero {
  border: 1px solid rgba(215,166,71,.54);
  border-radius: 5px;
  background:
    linear-gradient(100deg,rgba(5,27,49,.96),rgba(8,42,73,.82));
  box-shadow: inset 0 0 0 3px rgba(239,193,101,.035);
}
.serverInfo__eyebrow,
.marketHero__eyebrow,
.marketPanel__eyebrow { color: var(--page-cyan); }
.serverInfo__title,
.marketHero__title { color: #f5dfa9; font-family: Georgia,"Times New Roman",serif; }
.serverInfo__subtitle,
.marketHero__subtitle { color: var(--page-muted); }
.serverInfo__metaItem,
.marketHero__pill,
.marketBadge {
  border-color: rgba(77,144,202,.46);
  background: rgba(3,22,40,.8);
  color: #dcecff;
}
.serverInfo__row,
.serverInfo__table th,
.serverInfo__table td { border-bottom-color: rgba(82,135,180,.2); }
.serverInfo__row span,
.serverInfo__table th { color: #9fc3e7; }
.serverInfo__row strong,
.serverInfo__table td { color: #edf5ff; }

.rankTabs,
.marketTabs,
.marketCategoryTabs {
  padding: 7px;
  border: 1px solid rgba(73,135,190,.42);
  border-radius: 5px;
  background: rgba(2,18,34,.9);
}
.rankTab,
.marketTabBtn,
.marketCategoryBtn {
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a9c4df;
  background: transparent;
}
.rankTab:hover,
.marketTabBtn:hover,
.marketCategoryBtn:hover { color: #fff; background: rgba(20,67,108,.54); }
.rankTab.is-active,
.marketTabBtn.is-active,
.marketCategoryBtn.is-active {
  border-color: rgba(240,188,83,.7);
  background: linear-gradient(180deg,rgba(104,63,12,.86),rgba(47,31,9,.86));
  color: #ffe3a0;
  box-shadow: 0 0 18px rgba(255,171,37,.14);
}
.rankTableWrap,
.marketTable,
.marketBoardShell,
.marketFilterShell,
.marketVaultShell {
  border: 1px solid var(--page-line);
  border-radius: 5px;
  background: rgba(2,16,30,.88);
}
.rankTable th,
.marketTable__head { background: rgba(9,39,65,.9); color: #9fc5eb; }
.rankTable th,
.rankTable td { border-bottom-color: rgba(73,126,171,.22); }
.rankTable td { color: #dce9f7; }
.rankTable tr:hover td { background: rgba(21,65,103,.34); }
.rank-gold td { background: rgba(156,105,17,.15); }
.rankPts,
.rank-gold .rankPos { color: #ffd25f; }

.marketPage { gap: 18px; }
.marketPanel,
.marketBoardPanel { padding: 18px; }
.marketStats,
.marketBalanceGrid,
.marketCharacterGrid { gap: 10px; }
.marketStat,
.marketBalanceCell,
.marketBoardAction,
.marketHistoryItem {
  border: 1px solid rgba(76,136,189,.38);
  border-radius: 4px;
  background: rgba(4,24,43,.78);
}
.marketStat strong,
.marketBalanceCell strong,
.marketCard__price,
.marketHistoryItem__amount { color: #ffd36b; }
.marketCard__media,
.marketMiniCard__media,
.marketBoardItem__frame { background-color: rgba(2,12,24,.92); border-color: rgba(82,143,197,.42); }
.marketCard__overlay { background: linear-gradient(180deg,transparent,rgba(2,11,22,.92)); }
.marketTable__head,
.marketTable__body { border-color: rgba(76,134,184,.3); }
.marketTable__cell { border-bottom-color: rgba(76,134,184,.18); color: #d8e7f7; }
.marketTableLink { color: #69c8ff; }
.marketNote,
.marketFlowNote,
.marketVaultNotice,
.marketActionNote { border-color: rgba(218,171,77,.35); background: rgba(70,47,10,.25); color: #e8d39c; }

.accountHeader { padding: 22px; }
.accountAvatar { border-color: rgba(231,181,79,.68); background: linear-gradient(145deg,#144b7d,#071d36); color: #ffe1a0; }
.charStats { border-top-color: rgba(77,137,189,.25); }
.charClass { color: var(--page-cyan); }

.emptyState,
.loadingRow {
  border-color: rgba(78,140,194,.36);
  background: rgba(4,23,41,.72);
  color: #a9c8e7;
}

.referenceFooter { position: relative; z-index: 3; }

@media (max-width: 760px) {
  .pageHero { padding-top: 68px; }
  .pageHero .hero__bgMedia,
  .pageHero .hero__bg,
  .pageHero .hero__shade { inset: 68px 0 0; }
  .pageHero .hero__bgVideo { object-position: 58% center; }
  .pageHero .hero__inner { min-height: calc(100svh - 68px); padding: 22px 0 42px; }
  .pageShell__head { min-height: 150px; padding: 24px 18px 24px 78px; }
  .pageShell__head::before { left: 18px; width: 48px; height: 54px; font-size: 24px; }
  .pageShell__title { font-size: 34px; }
  .pageShell__subtitle { font-size: 13px; }
  .pageShell__body { padding: 14px; }
  .serverInfo__grid,
  .modal__grid,
  .marketDashboardGrid,
  .marketCharacterGrid { grid-template-columns: 1fr; }
  .serverInfo__header { padding: 18px 14px; }
  .serverInfo__meta { align-items: stretch; }
  .serverInfo__metaItem { flex: 1 1 calc(50% - 10px); text-align: center; }
  .rankTabs,
  .marketTabs,
  .marketCategoryTabs { overflow-x: auto; flex-wrap: nowrap; }
  .rankTab,
  .marketTabBtn,
  .marketCategoryBtn { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 430px) {
  .pageShell__head { padding-left: 22px; padding-top: 70px; }
  .pageShell__head::before { left: 22px; top: 32px; width: 36px; height: 40px; transform: none; font-size: 19px; }
  .pageShell__title { font-size: 30px; }
  .pageShell__subtitle { font-size: 12px; }
  .serverInfo__metaItem { flex-basis: 100%; }
  .formCard { padding: 16px; }
}