:root {
  --bg-0: #01040a;
  --bg-1: #030a16;
  --bg-2: #071426;
  --surface: rgba(7, 22, 40, .88);
  --surface-strong: rgba(8, 28, 51, .96);
  --surface-soft: rgba(12, 42, 72, .62);
  --surface-hover: rgba(15, 56, 94, .74);
  --line: rgba(125, 199, 242, .18);
  --line-strong: rgba(83, 194, 255, .48);
  --text: #f3f9ff;
  --text-soft: #c4d8ea;
  --muted: #83a0b9;
  --cyan: #5bdcff;
  --blue: #178bff;
  --blue-strong: #0875df;
  --violet: #7c6cff;
  --green: #38dc8a;
  --danger: #ff6175;
  --gold: #eac16b;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, .22);
  --shadow: 0 28px 80px rgba(0, 0, 0, .38);
  --focus: 0 0 0 3px rgba(91, 220, 255, .25);
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #176da9 #030914;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background:
    linear-gradient(180deg, rgba(1, 5, 12, .38) 0, rgba(1, 5, 12, .76) 55%, #01040a 100%),
    url('../img/background-2600.jpg') center top / cover fixed no-repeat,
    var(--bg-0);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: '';
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(39, 124, 221, .17), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(70, 214, 255, .10), transparent 26%),
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 35%, transparent 65%, rgba(0, 0, 0, .18));
}

img { max-width: 100%; }
button, input, select, textarea { font: inherit; }

a {
  color: #8edcff;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease, opacity .2s ease;
}

a:hover { color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0;
  box-shadow: var(--focus);
}

::selection { color: #fff; background: rgba(23, 139, 255, .7); }

.mi-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 8px;
  color: #04101f;
  background: #fff;
  transform: translateY(-150%);
}

.mi-skip-link:focus { transform: translateY(0); }

.mi-page-shell {
  width: min(1380px, calc(100% - 32px));
  min-height: 100vh;
  margin: 24px auto;
  overflow: clip;
  border: 1px solid rgba(121, 205, 255, .16);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(4, 13, 26, .92), rgba(2, 8, 17, .97));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
}

/* Header */
.mi-site-header { position: relative; z-index: 20; }

.mi-topbar {
  position: relative;
  z-index: 30;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 10, 22, .82);
  backdrop-filter: blur(18px);
}

.mi-brand, .mi-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.mi-brand:hover { color: #fff; }

.mi-brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(103, 213, 255, .46);
  border-radius: 13px;
  color: #dff7ff;
  background: linear-gradient(145deg, rgba(34, 145, 236, .78), rgba(16, 54, 106, .84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 24px rgba(28, 153, 255, .2);
  font-size: 18px;
}

.mi-brand-copy { display: grid; line-height: 1.15; }
.mi-brand-copy strong, .mi-footer-brand strong {
  font-family: Cinzel, serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .09em;
}

.mi-brand-copy small, .mi-footer-brand small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mi-topbar-tools { display: flex; align-items: center; gap: 10px; }

.mi-server-pill {
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, .025);
}

.mi-server-pill:hover { border-color: rgba(91, 220, 255, .38); color: #fff; background: rgba(91, 220, 255, .06); }
.mi-server-pill > span:last-child { display: grid; line-height: 1.2; }
.mi-server-pill b { color: #eafff5; font-size: 11px; }
.mi-server-pill small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.mi-status-dot, .mi-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(56, 220, 138, .1), 0 0 15px rgba(56, 220, 138, .62);
  animation: mi-pulse 2.4s ease-out infinite;
}

.mi-status-dot.is-offline {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(255, 97, 117, .1), 0 0 15px rgba(255, 97, 117, .5);
  animation: none;
}

@keyframes mi-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(56, 220, 138, .08), 0 0 12px rgba(56, 220, 138, .45); }
  50% { box-shadow: 0 0 0 7px rgba(56, 220, 138, 0), 0 0 20px rgba(56, 220, 138, .72); }
}

.mi-header-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid rgba(91, 220, 255, .52);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #159eea, #1768db 70%, #4854dc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 26px rgba(15, 116, 219, .24);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.mi-header-cta:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.1); }

.mi-menu-toggle {
  display: none;
  min-width: 46px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: #fff;
  background: rgba(10, 40, 72, .75);
  cursor: pointer;
}

.mi-menu-lines { display: grid; gap: 4px; }
.mi-menu-lines i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.mi-menu-label { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mi-menu-toggle[aria-expanded="true"] .mi-menu-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mi-menu-toggle[aria-expanded="true"] .mi-menu-lines i:nth-child(2) { opacity: 0; }
.mi-menu-toggle[aria-expanded="true"] .mi-menu-lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mi-primary-nav {
  position: relative;
  z-index: 25;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 27, 51, .96), rgba(4, 16, 32, .97));
}

.mi-nav-inner {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  min-height: 66px;
  padding: 0 14px;
}

.mi-nav-link {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 8px 11px;
  color: #9db8ce;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mi-nav-link::after {
  position: absolute;
  right: 24%;
  bottom: -1px;
  left: 24%;
  height: 2px;
  border-radius: 4px 4px 0 0;
  content: '';
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .2s ease, transform .2s ease;
}

.mi-nav-link i { color: #68d7ff; font-size: 15px; }
.mi-nav-link:hover, .mi-nav-link.is-active { color: #fff; background: linear-gradient(180deg, rgba(30, 130, 211, .10), rgba(17, 96, 174, .05)); }
.mi-nav-link:hover::after, .mi-nav-link.is-active::after { opacity: 1; transform: scaleX(1); }

.mi-hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 724;
  overflow: hidden;
  isolation: isolate;
  background: #031024;
}

.mi-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.95) contrast(1.05) brightness(.82);
}

.mi-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 7, 19, .08), rgba(2, 10, 22, .08) 48%, rgba(2, 10, 22, .96) 100%),
    linear-gradient(90deg, rgba(1, 6, 15, .35), transparent 24%, transparent 76%, rgba(1, 6, 15, .35));
}

.mi-hero-meta {
  position: absolute;
  right: 28px;
  bottom: 22px;
  left: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mi-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-hero-chips span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(149, 217, 255, .23);
  border-radius: 999px;
  color: #dcefff;
  background: rgba(2, 12, 26, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.mi-hero-chips i { color: var(--cyan); }
.mi-hero-actions { display: flex; gap: 9px; }

/* Shared controls */
.mi-button {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(91, 220, 255, .46);
  border-radius: 10px;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(24, 148, 232, .96), rgba(17, 92, 197, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 9px 22px rgba(0, 83, 172, .18);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease;
}

.mi-button:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.12); }
.mi-button.full { width: 100%; }
.mi-button-primary { min-width: 132px; background: linear-gradient(135deg, #18aee8, #176ee0 68%, #5b4fdd); }
.mi-button-ghost { border-color: rgba(176, 220, 247, .26); background: rgba(3, 16, 34, .72); backdrop-filter: blur(10px); }

/* Main layout */
.mi-main { padding: 24px; }
.mi-main-home { position: relative; }
.mi-main-module { min-height: 540px; color: var(--text-soft); }

.mi-grid-top {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(330px, .78fr);
  gap: 18px;
  align-items: stretch;
}

.mi-side { display: grid; gap: 14px; align-content: start; }

.mi-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(11, 36, 64, .82), rgba(4, 16, 31, .94)),
    var(--surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.mi-panel::before {
  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;
  height: 1px;
  z-index: 2;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(98, 215, 255, .72), transparent);
  opacity: .65;
}

.mi-panel:hover { border-color: rgba(91, 193, 246, .30); box-shadow: 0 18px 38px rgba(0, 0, 0, .26), 0 0 28px rgba(15, 121, 206, .06); }

.mi-panel-title {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 11px;
  padding: 13px 17px;
  border-bottom: 1px solid rgba(115, 194, 240, .13);
  color: #f6fbff;
  background: linear-gradient(180deg, rgba(25, 75, 119, .24), rgba(7, 27, 50, .08));
  font-family: Cinzel, serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mi-panel-title i {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border: 1px solid rgba(91, 220, 255, .22);
  border-radius: 9px;
  color: #8be6ff;
  background: rgba(22, 136, 215, .11);
  font-size: 13px;
}

.mi-panel-body { position: relative; z-index: 1; padding: 17px; }
.mi-panel-footer { position: relative; z-index: 1; padding: 0 17px 17px; }

/* Discord */
.mi-discord { min-height: 100%; }
.mi-discord .mi-panel-body { height: calc(100% - 52px); min-height: 500px; padding: 0; }
.mi-discord-frame { display: flex; height: 100%; min-height: 500px; flex-direction: column; color: #dce3eb; background: #181b20; }
.mi-discord-head {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: #202329;
}

.mi-discord-head .hash {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #b8c0cb;
  background: rgba(255, 255, 255, .05);
  font-size: 21px;
  font-weight: 800;
}

.mi-discord-head strong { display: block; color: #fff; font-size: 13px; }
.mi-discord-head small { display: block; margin-top: 2px; color: #8d959f; font-size: 10px; }
.mi-discord-message { flex: 1; overflow: auto; padding: 22px; color: #ced3da; background: #1d2025; font-size: 12px; line-height: 1.65; }
.mi-discord-message a { color: #67cfff; }
.mi-discord-message code { padding: 2px 5px; border-radius: 4px; background: #101216; color: #f2f4f7; }
.mi-discord-message h4 { margin: 18px 0 8px; color: #fff; }
.mi-discord-author { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; }
.mi-discord-author b { color: #fff; }
.mi-discord-author small { margin-left: 6px; color: #858d98; }
.mi-discord-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #5865f2, #30368d); object-fit: cover; }
.mi-discord-actions { padding: 13px 17px; border-top: 1px solid rgba(255, 255, 255, .05); background: #202329; }

/* Sidebar and form elements */
.mi-login-form { display: grid; gap: 10px; }
.mi-input-wrap {
  display: flex;
  min-height: 42px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(93, 174, 224, .26);
  border-radius: 10px;
  background: rgba(1, 10, 22, .55);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mi-input-wrap:focus-within { border-color: rgba(91, 220, 255, .65); box-shadow: var(--focus); }
.mi-input-wrap i { width: 40px; color: #74cce9; text-align: center; }
.mi-input-wrap input { min-width: 0; height: 40px; flex: 1; padding: 0 10px 0 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 11px; }
.mi-input-wrap input::placeholder, .mi-search-form input::placeholder { color: #6f8ca4; }
.mi-login-links { color: var(--muted); font-size: 10px; line-height: 1.8; text-align: center; }
.mi-login-links a { color: #9acfee; }
.mi-userbox { display: grid; gap: 8px; text-align: center; }
.mi-userbox strong { margin-bottom: 3px; color: #fff; font-family: Cinzel, serif; font-size: 16px; }

.mi-search-form { display: flex; gap: 8px; }
.mi-search-form input {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  padding: 8px 11px;
  border: 1px solid rgba(93, 174, 224, .26);
  border-radius: 10px;
  outline: 0;
  color: #fff;
  background: rgba(1, 10, 22, .55);
  font-size: 11px;
}

.mi-search-form input:focus { border-color: rgba(91, 220, 255, .65); box-shadow: var(--focus); }
.mi-search-form .mi-button { min-width: 42px; padding: 8px 11px; }
.mi-search-help { margin-top: 9px; color: var(--muted); font-size: 9px; text-align: center; }

.mi-server-card { padding: 13px; border: 1px solid rgba(77, 182, 238, .18); border-radius: 12px; background: rgba(11, 47, 78, .48); }
.mi-server-title { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 12px; font-weight: 800; }
.mi-online-badge { margin-left: auto; padding: 4px 8px; border: 1px solid rgba(63, 230, 145, .3); border-radius: 999px; color: #c9ffe2; background: rgba(31, 158, 92, .18); font-size: 8px; letter-spacing: .08em; }
.mi-server-meta { margin: 9px 0 0 19px; color: #9dbbd0; font-size: 10px; }
.mi-online-link { margin-top: 11px; font-size: 9px; font-weight: 800; text-align: right; text-transform: uppercase; }

.mi-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; font-size: 10px; }
.mi-kv span, .mi-kv b { padding: 7px 0; border-bottom: 1px solid rgba(111, 186, 231, .11); }
.mi-kv span { color: #9eb8cb; }
.mi-kv b { color: #f5fbff; text-align: right; }
.mi-kv span:nth-last-child(-n + 2), .mi-kv b:nth-last-child(-n + 2) { border-bottom: 0; }

/* Rankings and activity */
.mi-ranking-grid, .mi-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

.mi-ranking-grid > .mi-panel, .mi-activity-grid > .mi-panel { display: flex; min-width: 0; height: 100%; flex-direction: column; }
.mi-ranking-grid > .mi-panel > .mi-panel-body, .mi-activity-grid > .mi-panel > .mi-panel-body { min-height: 218px; flex: 1; overflow-x: auto; }
.mi-ranking-grid > .mi-panel > .mi-panel-footer, .mi-activity-grid > .mi-panel > .mi-panel-footer { margin-top: auto; }

.mi-table { width: 100%; border-collapse: collapse; color: var(--text-soft); font-size: 10px; }
.mi-table th, .mi-table td { padding: 9px 7px; border-bottom: 1px solid rgba(116, 187, 229, .11); text-align: left; white-space: nowrap; }
.mi-table th { color: #7899b3; background: rgba(255, 255, 255, .018); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mi-table td { color: #cbe0ee; }
.mi-table tbody tr { transition: background .16s ease; }
.mi-table tbody tr:hover td { background: rgba(40, 134, 199, .075); }
.mi-table tr:last-child td { border-bottom: 0; }
.mi-table td:last-child, .mi-table th:last-child { text-align: right; }
.mi-table a { color: #eff9ff; font-weight: 700; }
.mi-table a:hover { color: var(--cyan); }
.mi-home-class-icon { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; border: 1px solid rgba(91, 220, 255, .24); border-radius: 50%; object-fit: cover; vertical-align: middle; }
.mi-empty { display: grid; min-height: 120px; place-items: center; padding: 22px; color: #7892a8; font-size: 10px; line-height: 1.6; text-align: center; }
.mi-empty > i { color: #689fbf; font-size: 24px; }

.mi-error, .mi-success {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 11px;
}

.mi-error { border-color: rgba(255, 97, 117, .46); color: #ffd4db; background: rgba(255, 72, 88, .10); }
.mi-success { border-color: rgba(38, 206, 124, .46); color: #caffdf; background: rgba(38, 206, 124, .09); }

/* Footer */
.mi-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin: 0 24px 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(4, 15, 29, .74);
}

.mi-footer-brand .mi-brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 14px; }
.mi-footer-brand > div { display: grid; line-height: 1.1; }
.mi-footer-brand strong { font-size: 12px; color: #fff; }
.mi-footer-brand small { font-size: 8px; }
.mi-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.mi-footer-links a { color: #9ab2c7; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mi-footer-links a:hover { color: #fff; }
.mi-footer-socials { display: flex; gap: 8px; }
.mi-footer-socials a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(117, 197, 243, .18); border-radius: 10px; color: #bfeaff; background: rgba(20, 92, 144, .12); }
.mi-footer-socials a:hover { border-color: rgba(91, 220, 255, .48); color: #fff; background: rgba(23, 139, 255, .22); transform: translateY(-2px); }
.mi-footer-copy { grid-column: 1 / -1; margin: 0; padding-top: 15px; border-top: 1px solid rgba(111, 186, 231, .10); color: #687f93; font-size: 9px; text-align: center; }

/* Elyra — asistente flotante */
.mi-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mi-assistant {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 500;
  width: 570px;
  height: 650px;
  max-height: calc(100vh - 24px);
  pointer-events: none;
}

.mi-assistant-character {
  position: absolute;
  bottom: -8px;
  left: -6px;
  z-index: 1;
  width: 245px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(66, 198, 255, .18));
  transform: translateY(28px) scale(.94);
  transform-origin: bottom center;
  transition: opacity .28s ease, transform .32s ease;
}

.mi-chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  z-index: 2;
  display: flex;
  width: 370px;
  max-height: min(570px, calc(100vh - 112px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(102, 205, 255, .35);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(8, 29, 53, .98), rgba(3, 13, 27, .99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), 0 0 32px rgba(16, 129, 217, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .25s ease;
  backdrop-filter: blur(20px);
}

.mi-assistant.is-open .mi-chat-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.mi-assistant.is-open .mi-assistant-character { opacity: 1; transform: translateY(0) scale(1); }

.mi-chat-header {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(113, 197, 242, .15);
  background: linear-gradient(135deg, rgba(25, 110, 177, .34), rgba(19, 62, 107, .14));
}

.mi-chat-avatar, .mi-launcher-avatar {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(117, 220, 255, .5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, #2b77ac, #07192d 72%);
  box-shadow: 0 0 18px rgba(63, 196, 255, .18);
}

.mi-chat-avatar { width: 46px; height: 46px; flex: 0 0 46px; }
.mi-chat-avatar img, .mi-launcher-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 9%; transform: scale(1.85); transform-origin: 50% 12%; }
.mi-chat-identity { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.mi-chat-identity strong { color: #fff; font-family: Cinzel, serif; font-size: 14px; letter-spacing: .04em; }
.mi-chat-identity small { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: #91adc2; font-size: 9px; }
.mi-chat-identity small i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(56, 220, 138, .75); }
.mi-chat-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(112, 195, 241, .17); border-radius: 10px; color: #a9c1d3; background: rgba(255, 255, 255, .025); cursor: pointer; }
.mi-chat-close:hover { color: #fff; border-color: rgba(91, 220, 255, .45); background: rgba(91, 220, 255, .08); }

.mi-chat-messages {
  display: flex;
  min-height: 124px;
  max-height: 250px;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
}

.mi-chat-message {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid rgba(111, 185, 227, .13);
  border-radius: 13px;
  color: #d8e8f4;
  background: rgba(20, 58, 91, .54);
  font-size: 10px;
  line-height: 1.55;
  animation: mi-chat-in .2s ease both;
}

.mi-chat-message.is-bot { align-self: flex-start; border-bottom-left-radius: 4px; }
.mi-chat-message.is-user { align-self: flex-end; border-color: rgba(91, 220, 255, .24); border-bottom-right-radius: 4px; color: #fff; background: linear-gradient(135deg, rgba(21, 144, 224, .78), rgba(37, 91, 194, .78)); }
.mi-chat-message a { display: inline-flex; margin-top: 7px; color: #8ee8ff; font-weight: 800; }

@keyframes mi-chat-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.mi-chat-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 16px 14px;
}

.mi-chat-quick button {
  display: flex;
  min-height: 37px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(96, 181, 230, .18);
  border-radius: 10px;
  color: #bed7e8;
  background: rgba(11, 44, 75, .56);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.mi-chat-quick button i { color: #61d8ff; }
.mi-chat-quick button:hover { border-color: rgba(91, 220, 255, .45); color: #fff; background: rgba(21, 92, 144, .62); }

.mi-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 13px 8px;
  border-top: 1px solid rgba(113, 197, 242, .12);
  background: rgba(1, 9, 20, .36);
}

.mi-chat-form input {
  min-width: 0;
  min-height: 41px;
  flex: 1;
  padding: 9px 12px;
  border: 1px solid rgba(93, 174, 224, .24);
  border-radius: 11px;
  outline: 0;
  color: #fff;
  background: rgba(1, 9, 20, .68);
  font-size: 10px;
}

.mi-chat-form input::placeholder { color: #67869e; }
.mi-chat-form input:focus { border-color: rgba(91, 220, 255, .62); box-shadow: var(--focus); }
.mi-chat-form button { display: grid; width: 41px; height: 41px; flex: 0 0 41px; place-items: center; border: 1px solid rgba(91, 220, 255, .48); border-radius: 11px; color: #fff; background: linear-gradient(135deg, #18a9e8, #1766d9); cursor: pointer; }
.mi-chat-form button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mi-chat-note { margin: 0; padding: 0 14px 10px; color: #567188; background: rgba(1, 9, 20, .36); font-size: 8px; text-align: center; }

.mi-assistant-launcher {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  width: 250px;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(91, 220, 255, .48);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(13, 69, 117, .97), rgba(10, 35, 67, .98));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48), 0 0 24px rgba(26, 151, 237, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .18s ease, transform .2s ease, filter .2s ease;
  backdrop-filter: blur(16px);
}

.mi-assistant-launcher:hover { filter: brightness(1.1); transform: translateY(-2px); }
.mi-assistant.is-open .mi-assistant-launcher { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); }
.mi-launcher-avatar { width: 44px; height: 44px; flex: 0 0 44px; }
.mi-launcher-copy { display: grid; min-width: 0; flex: 1; line-height: 1.15; text-align: left; }
.mi-launcher-copy strong { font-family: Cinzel, serif; font-size: 11px; letter-spacing: .02em; }
.mi-launcher-copy small { margin-top: 4px; color: #8fb2cb; font-size: 8px; }
.mi-launcher-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #16aae9, #2365dd); }

/* Standard WebEngine modules */
.mi-main-module > .page-title, .mi-main-module .page-title, .mi-main-module .blockTitle {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(145deg, rgba(15, 57, 96, .82), rgba(5, 21, 40, .94));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
  font-family: Cinzel, serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
}

.mi-main-module .page-title span { color: #fff; }
.mi-main-module form { max-width: 780px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.mi-main-module .form-group { margin-bottom: 15px; }
.mi-main-module label { display: block; margin: 0 0 6px; color: #d2e7f6; font-size: 11px; font-weight: 700; }

.mi-main-module input[type="text"],
.mi-main-module input[type="password"],
.mi-main-module input[type="email"],
.mi-main-module input[type="number"],
.mi-main-module input[type="search"],
.mi-main-module select,
.mi-main-module textarea,
.mi-main-module .form-control {
  display: block;
  width: 100%;
  max-width: 540px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(93, 174, 224, .3);
  border-radius: 10px;
  outline: 0;
  color: #fff;
  background: rgba(1, 10, 22, .58);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .22);
}

.mi-main-module textarea { min-height: 120px; resize: vertical; }
.mi-main-module input:focus, .mi-main-module select:focus, .mi-main-module textarea:focus, .mi-main-module .form-control:focus { border-color: rgba(91, 220, 255, .7); box-shadow: var(--focus); }
.mi-main-module input[type="checkbox"], .mi-main-module input[type="radio"] { margin-right: 6px; accent-color: var(--blue); }

.mi-main-module button, .mi-main-module input[type="submit"], .mi-main-module input[type="button"], .mi-main-module .btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid rgba(91, 220, 255, .46);
  border-radius: 10px;
  color: #fff !important;
  background: linear-gradient(135deg, #159eea, #1768db);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 8px 20px rgba(0, 83, 172, .16);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.mi-main-module button:hover, .mi-main-module input[type="submit"]:hover, .mi-main-module input[type="button"]:hover, .mi-main-module .btn:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.mi-main-module .btn-xs { min-height: 25px; padding: 3px 8px; font-size: 9px; }
.mi-main-module .btn-sm { min-height: 31px; padding: 5px 10px; font-size: 10px; }

.mi-main-module .panel, .mi-main-module .well, .mi-main-module .card, .mi-main-module .content-box {
  margin: 0 0 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mi-main-module .panel-heading, .mi-main-module .card-header { padding: 12px 15px; border-bottom: 1px solid var(--line); color: #fff; background: rgba(25, 75, 119, .2); }
.mi-main-module .panel-title { margin: 0; color: #fff; font-size: 12px; }
.mi-main-module .panel-body, .mi-main-module .card-body { padding: 17px; }

.mi-main-module table, .mi-main-module .table {
  width: 100%;
  margin: 11px 0 18px;
  border-collapse: collapse;
  color: #dbeaf5;
  background: rgba(3, 15, 29, .74);
  font-size: 11px;
}

.mi-main-module table th, .mi-main-module table td, .mi-main-module .table th, .mi-main-module .table td { padding: 10px; border: 1px solid rgba(87, 164, 210, .14); }
.mi-main-module table th, .mi-main-module .table th { color: #dff5ff; background: rgba(18, 80, 126, .52); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.mi-main-module table tr:nth-child(even) td, .mi-main-module .table tr:nth-child(even) td { background: rgba(18, 81, 127, .09); }
.mi-main-module table tr:hover td, .mi-main-module .table tr:hover td { background: rgba(35, 125, 184, .1); }

.mi-main-module .alert { margin: 11px 0; padding: 12px 14px; border: 1px solid rgba(51, 139, 193, .48); border-radius: 10px; color: #eaf8ff; background: rgba(11, 86, 139, .18); }
.mi-main-module .alert-danger { border-color: rgba(255, 102, 120, .55); color: #ffd4da; background: rgba(255, 72, 88, .10); }
.mi-main-module .alert-success { border-color: rgba(38, 206, 124, .5); color: #caffdf; background: rgba(38, 206, 124, .09); }
.mi-main-module .alert-warning { border-color: rgba(234, 181, 75, .55); color: #ffe9b5; background: rgba(234, 181, 75, .10); }
.mi-main-module .pagination { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; list-style: none; }
.mi-main-module .pagination li a, .mi-main-module .pagination li span { display: block; padding: 6px 10px; border: 1px solid rgba(93, 174, 224, .32); border-radius: 8px; color: #cae9fa; background: rgba(6, 42, 76, .76); }
.mi-main-module .pagination .active a, .mi-main-module .pagination .active span { color: #fff; background: var(--blue); }
.mi-main-module hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.mi-main-module small, .mi-main-module .help-block { color: var(--muted); }
.mi-main-module strong { color: #fff; }
.mi-main-module form input + span, .mi-main-module form input + small { margin-left: 8px; }

/* Bootstrap-like grid used by legacy modules */
.mi-main-module .row { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.mi-main-module [class*="col-xs-"], .mi-main-module [class*="col-sm-"] { position: relative; min-height: 1px; padding: 0 7px; }
.mi-main-module .col-xs-12 { width: 100%; }
.mi-main-module .col-xs-9 { width: 75%; }
.mi-main-module .col-xs-8 { width: 66.666%; }
.mi-main-module .col-xs-6 { width: 50%; }
.mi-main-module .col-xs-4 { width: 33.333%; }
.mi-main-module .col-xs-3 { width: 25%; }
.mi-main-module .text-center { text-align: center; }
.mi-main-module .text-right { text-align: right; }
.mi-main-module .text-left { text-align: left; }
.mi-main-module .pull-right { float: right; }
.mi-main-module .nopadding { padding: 0 !important; }

@media (min-width: 768px) {
  .mi-main-module .col-sm-12 { width: 100%; }
  .mi-main-module .col-sm-10 { width: 83.333%; }
  .mi-main-module .col-sm-8 { width: 66.666%; }
  .mi-main-module .col-sm-7 { width: 58.333%; }
  .mi-main-module .col-sm-5 { width: 41.666%; }
  .mi-main-module .col-sm-4 { width: 33.333%; }
  .mi-main-module .col-sm-offset-4 { margin-left: 33.333%; }
}

/* Rankings, profiles and user panel */
.mi-main-module .rankings-table,
.mi-main-module .general-table-ui,
.mi-main-module .myaccount-table,
.mi-main-module .profiles_player_table,
.mi-main-module .profiles_player_table_info,
.mi-main-module .guild_members_list {
  width: 100%;
  margin: 12px 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mi-main-module .rankings-table td,
.mi-main-module .general-table-ui td,
.mi-main-module .myaccount-table td,
.mi-main-module .profiles_player_table td,
.mi-main-module .profiles_player_table_info td,
.mi-main-module .guild_members_list td { padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(95, 175, 222, .13); color: #d7e9f5; vertical-align: middle; }

.mi-main-module .rankings-table tr:first-child td, .mi-main-module .general-table-ui tr:first-child td {
  border-bottom-color: rgba(91, 220, 255, .22);
  color: #fff;
  background: rgba(21, 91, 141, .48);
  font-family: Cinzel, serif;
  font-size: 10px;
  text-transform: uppercase;
}

.mi-main-module .rankings-table tr:last-child td, .mi-main-module .general-table-ui tr:last-child td { border-bottom: 0; }
.mi-main-module .rankings-table-place { width: 44px; color: #75ddff !important; font-size: 15px; font-weight: 900; text-align: center; }
.mi-main-module .rankings-class-image { width: 36px; height: 36px; border: 1px solid rgba(91, 220, 255, .5); border-radius: 50%; object-fit: cover; box-shadow: 0 0 12px rgba(51, 190, 255, .2); }
.mi-main-module .rankings-update-time { margin-top: -8px; color: var(--muted); font-size: 9px; text-align: right; }

.mi-main-module .rankings_menu, .mi-main-module .rankings-menu { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 15px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 20, 38, .78); }
.mi-main-module .rankings_menu a, .mi-main-module .rankings-menu a { padding: 7px 11px; border: 1px solid rgba(93, 174, 224, .25); border-radius: 8px; color: #d7effc; background: rgba(7, 48, 86, .7); font-size: 9px; font-weight: 700; }
.mi-main-module .rankings_menu a:hover, .mi-main-module .rankings-menu a:hover { color: #fff; background: rgba(23, 139, 255, .36); }

.mi-main-module .profiles_player_card, .mi-main-module .profiles_guild_card {
  position: relative;
  max-width: 980px;
  margin: 0 auto 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0, rgba(22, 104, 171, .34), rgba(4, 18, 34, .94) 62%);
  box-shadow: var(--shadow);
}

.mi-main-module .profiles_player_content { position: relative; z-index: 1; }
.mi-main-module .character-avatar, .mi-main-module .guild_logo { max-width: 100%; border: 1px solid rgba(91, 220, 255, .58); border-radius: 12px; box-shadow: 0 0 20px rgba(43, 187, 255, .2); }
.mi-main-module .character-name, .mi-main-module .guild_name { color: #fff; font-family: Cinzel, serif; font-size: 22px; font-weight: 900; text-shadow: 0 0 14px rgba(72, 194, 255, .3); }
.mi-main-module .guild_members { margin-top: 15px; }
.mi-main-module .myaccount-character-block { margin: 9px 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(9, 41, 73, .72); }
.mi-main-module .myaccount-character-name { color: #fff; font-family: Cinzel, serif; font-weight: 800; }
.mi-main-module .myaccount-character-block-level, .mi-main-module .myaccount-character-block-location { color: #9ebbd0; font-size: 9px; }
.mi-main-module .module-requirements { margin: 12px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; color: #bcd7e9; background: rgba(4, 24, 45, .74); }
.mi-main-module .module-requirements ul { margin: 7px 0; padding-left: 20px; }
.mi-main-module .panel-general, .mi-main-module .panel-addstats { border-color: var(--line-strong) !important; background: var(--surface-strong) !important; }
.mi-main-module .label { display: inline-block; padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 800; }
.mi-main-module .label-success { color: #fff; background: #15945a; }
.mi-main-module .label-danger { color: #fff; background: #b7354a; }
.mi-main-module .label-default { color: #e8f7ff; background: #31536d; }

.admincp-button { position: fixed; right: 16px; bottom: 16px; z-index: 100; }

/* Responsive */
@media (max-width: 1120px) {
  .mi-page-shell { width: min(100% - 20px, 1200px); margin: 10px auto; }
  .mi-grid-top { grid-template-columns: 1fr; }
  .mi-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-discord .mi-panel-body, .mi-discord-frame { min-height: 430px; }
  .mi-ranking-grid, .mi-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-ranking-grid > .mi-panel:last-child, .mi-activity-grid > .mi-panel:last-child { grid-column: 1 / -1; }
  .mi-nav-link { gap: 6px; font-size: 9px; }
}

@media (max-width: 820px) {
  body { background-attachment: scroll; }
  .mi-page-shell { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .mi-topbar { min-height: 68px; padding: 10px 14px; }
  .mi-server-pill { min-width: auto; padding: 9px 10px; }
  .mi-server-pill > span:last-child { display: none; }
  .mi-header-cta span { display: none; }
  .mi-header-cta { width: 42px; padding: 0; }
  .mi-menu-toggle { display: inline-flex; }
  .mi-primary-nav {
    position: absolute;
    top: 68px;
    right: 10px;
    left: 10px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid rgba(92, 190, 246, .25);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(.985);
    transform-origin: top;
    transition: opacity .2s ease, transform .2s ease;
  }

  .mi-primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .mi-nav-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .mi-nav-link { min-height: 54px; justify-content: flex-start; padding: 12px 14px; border-radius: 10px; }
  .mi-nav-link::after { display: none; }
  .mi-nav-link.is-active { background: rgba(23, 139, 255, .16); }
  .mi-hero-meta { right: 16px; bottom: 16px; left: 16px; }
  .mi-main { padding: 16px; }
  .mi-footer { grid-template-columns: 1fr auto; margin: 0 16px 16px; }
  .mi-footer-links { display: none; }
}

@media (max-width: 620px) {
  .mi-brand-mark { width: 39px; height: 39px; flex-basis: 39px; border-radius: 11px; }
  .mi-brand-copy strong { font-size: 13px; }
  .mi-brand-copy small { font-size: 8px; }
  .mi-menu-label { display: none; }
  .mi-menu-toggle { width: 42px; min-width: 42px; padding: 0; }
  .mi-topbar-tools { gap: 7px; }
  .mi-hero-meta { align-items: flex-end; }
  .mi-hero-chips { gap: 5px; }
  .mi-hero-chips span { min-height: 29px; padding: 0 9px; font-size: 8px; }
  .mi-hero-chips span:nth-child(n + 3) { display: none; }
  .mi-hero-actions { flex-direction: column-reverse; }
  .mi-hero-actions .mi-button { min-width: 118px; min-height: 36px; padding: 8px 10px; }
  .mi-hero-actions .mi-button-ghost { display: none; }
  .mi-main { padding: 12px; }
  .mi-side, .mi-ranking-grid, .mi-activity-grid { grid-template-columns: 1fr; gap: 12px; }
  .mi-ranking-grid, .mi-activity-grid { margin-top: 12px; }
  .mi-ranking-grid > .mi-panel:last-child, .mi-activity-grid > .mi-panel:last-child { grid-column: auto; }
  .mi-discord .mi-panel-body, .mi-discord-frame { min-height: 390px; }
  .mi-discord-message { padding: 17px; }
  .mi-panel-title { min-height: 49px; padding: 11px 14px; font-size: 11px; }
  .mi-panel-body { padding: 14px; }
  .mi-panel-footer { padding: 0 14px 14px; }
  .mi-ranking-grid > .mi-panel > .mi-panel-body, .mi-activity-grid > .mi-panel > .mi-panel-body { min-height: auto; }
  .mi-footer { grid-template-columns: 1fr; gap: 16px; margin: 0 12px 12px; padding: 18px; text-align: center; }
  .mi-footer-brand { justify-content: center; }
  .mi-footer-socials { justify-content: center; }
  .mi-main-module form { padding: 14px; }
  .mi-main-module input[type="text"], .mi-main-module input[type="password"], .mi-main-module input[type="email"], .mi-main-module input[type="number"], .mi-main-module input[type="search"], .mi-main-module select, .mi-main-module textarea, .mi-main-module .form-control { max-width: 100%; }
  .mi-main-module table { font-size: 9px; }
  .mi-main-module [class*="col-sm-"] { width: 100%; margin-left: 0; }
  .mi-main-module .profiles_player_card, .mi-main-module .profiles_guild_card { padding: 13px; overflow-x: auto; }
  .mi-assistant { right: 12px; bottom: 10px; width: calc(100% - 24px); height: min(620px, calc(100vh - 20px)); }
  .mi-assistant-character { display: none; }
  .mi-chat-panel { width: 100%; max-height: calc(100vh - 96px); }
  .mi-assistant-launcher { width: 224px; }
}

@media (max-width: 420px) {
  .mi-brand-copy small { display: none; }
  .mi-server-pill { display: none; }
  .mi-hero-meta { display: none; }
  .mi-nav-inner { gap: 2px; }
  .mi-chat-messages { max-height: 200px; }
  .mi-chat-quick { gap: 5px; padding-right: 12px; padding-left: 12px; }
  .mi-chat-quick button { padding: 7px 8px; }
}

/* =====================================================
   Modern inner pages
   ===================================================== */
.mi-main-module {
  position: relative;
  isolation: isolate;
  padding: 26px;
}

.mi-inner-hero {
  position: relative;
  min-height: 190px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(92, 197, 255, .2);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(4, 18, 36, .98), rgba(7, 44, 78, .82) 54%, rgba(5, 20, 44, .96)),
    radial-gradient(circle at 80% 30%, rgba(79, 215, 255, .28), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 22px 54px rgba(0, 0, 0, .24);
}

.mi-inner-hero::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(119, 215, 255, .045) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(119, 215, 255, .035) 50%, transparent 50.3%);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}

.mi-inner-orb {
  position: absolute;
  border-radius: 50%;
  opacity: .48;
  filter: blur(1px);
  animation: mi-inner-float 9s ease-in-out infinite;
}

.mi-inner-orb-one {
  top: -100px;
  right: 8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 34% 34%, rgba(150, 241, 255, .7), rgba(19, 132, 255, .15) 42%, transparent 70%);
}

.mi-inner-orb-two {
  right: 26%;
  bottom: -130px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(99, 90, 255, .3), transparent 69%);
  animation-delay: -4s;
}

@keyframes mi-inner-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(15px, 10px, 0) scale(1.08); }
}

.mi-inner-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 190px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 30px 34px;
}

.mi-inner-icon {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid rgba(122, 225, 255, .52);
  border-radius: 21px;
  color: #e9fbff;
  background: linear-gradient(145deg, rgba(44, 174, 255, .34), rgba(25, 68, 146, .56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 38px rgba(44, 178, 255, .22);
  font-size: 27px;
}

.mi-inner-copy { min-width: 0; }
.mi-inner-kicker, .mi-section-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #6fddff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.mi-inner-copy h1 {
  margin: 0;
  color: #fff;
  font-family: Cinzel, serif;
  font-size: clamp(25px, 3.2vw, 39px);
  line-height: 1.08;
  text-shadow: 0 4px 24px rgba(19, 152, 255, .26);
}

.mi-inner-copy p { max-width: 650px; margin: 8px 0 0; color: #a9c7da; font-size: 13px; }
.mi-breadcrumb { display: flex; align-items: center; gap: 9px; color: #6d91aa; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mi-breadcrumb a { color: #bfeeff; }
.mi-breadcrumb > i { font-size: 7px; }

.mi-module-stage {
  --spot-x: 50%;
  --spot-y: 20%;
  position: relative;
  min-height: 260px;
  padding: clamp(19px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(41, 161, 246, .105), transparent 27%),
    linear-gradient(145deg, rgba(5, 20, 37, .94), rgba(3, 13, 27, .98));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.mi-module-stage::before {
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(109, 222, 255, .62), transparent);
}

.mi-module-stage > .page-title:first-child { display: none; }
.mi-module-stage h2, .mi-module-stage h3, .mi-module-stage p { text-wrap: pretty; }

/* Viewport reveals */
.mi-js [data-mi-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .75, .25, 1), transform .7s cubic-bezier(.2, .75, .25, 1);
}

.mi-js [data-mi-reveal].is-visible { opacity: 1; transform: none; }

/* Authentication */
.mi-auth-layout { display: grid; grid-template-columns: minmax(270px, .88fr) minmax(380px, 1.12fr); gap: 24px; }
.mi-auth-aside, .mi-auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(102, 193, 242, .2);
  border-radius: 20px;
}

.mi-auth-aside {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 46px);
  background:
    linear-gradient(180deg, rgba(5, 38, 69, .42), rgba(3, 17, 33, .94)),
    radial-gradient(circle at 30% 16%, rgba(61, 194, 255, .3), transparent 34%);
}

.mi-auth-aside::before {
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(84, 205, 255, .14);
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 34px rgba(68, 187, 255, .025), 0 0 0 70px rgba(68, 187, 255, .018);
}

.mi-auth-emblem {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 25px;
  place-items: center;
  border: 1px solid rgba(120, 225, 255, .5);
  border-radius: 19px;
  color: #dffaff;
  background: linear-gradient(145deg, rgba(38, 157, 245, .62), rgba(15, 62, 121, .74));
  box-shadow: 0 0 34px rgba(31, 164, 255, .22);
  font-size: 24px;
}

.mi-auth-aside h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: clamp(25px, 3vw, 35px); }
.mi-auth-aside > p { max-width: 430px; margin: 12px 0 26px; color: #a8c2d6; }
.mi-auth-benefits { display: grid; gap: 10px; }
.mi-auth-benefits > div { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid rgba(100, 192, 239, .13); border-radius: 12px; background: rgba(6, 30, 53, .62); }
.mi-auth-benefits > div > i { width: 22px; color: #62d7ff; text-align: center; }
.mi-auth-benefits span { display: grid; }
.mi-auth-benefits b { color: #ecfaff; font-size: 11px; }
.mi-auth-benefits small { color: #7293ab; font-size: 9px; }
.mi-auth-steps { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 30px; }
.mi-auth-steps span { display: flex; flex: 1; align-items: center; gap: 7px; color: #66879e; font-size: 8px; font-weight: 800; }
.mi-auth-steps b { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(99, 174, 220, .24); border-radius: 50%; background: rgba(5, 20, 36, .7); }
.mi-auth-steps .is-active { color: #c9f3ff; }
.mi-auth-steps .is-active b { border-color: rgba(79, 218, 255, .62); color: #fff; background: #147ed0; box-shadow: 0 0 15px rgba(36, 167, 255, .24); }

.mi-auth-card { padding: clamp(25px, 4vw, 46px); background: rgba(5, 18, 34, .78); }
.mi-auth-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.mi-auth-card-head > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(93, 207, 255, .34); border-radius: 14px; color: #79ddff; background: rgba(17, 103, 172, .24); font-size: 18px; }
.mi-auth-card-head h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 20px; }
.mi-auth-card-head p { margin: 3px 0 0; color: #7999b1; font-size: 10px; }

.mi-main-module .mi-modern-form { display: grid; gap: 17px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.mi-modern-field { display: grid; gap: 7px; }
.mi-modern-field > label, .mi-label-row label { color: #dbeefa; font-size: 10px; font-weight: 800; }
.mi-modern-field > small { color: #63859d; font-size: 8px; }
.mi-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mi-label-row a { font-size: 9px; font-weight: 700; }
.mi-modern-control { position: relative; display: flex; min-height: 48px; align-items: center; border: 1px solid rgba(100, 185, 233, .22); border-radius: 12px; background: rgba(1, 11, 23, .7); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.mi-modern-control:focus-within { border-color: rgba(82, 211, 255, .62); background: rgba(3, 23, 42, .9); box-shadow: var(--focus); }
.mi-modern-control > i { width: 46px; color: #5ebce9; text-align: center; }
.mi-main-module .mi-modern-control input[type="text"], .mi-main-module .mi-modern-control input[type="password"], .mi-main-module .mi-modern-control input[type="email"] { width: 100%; max-width: none; min-height: 46px; padding: 0 46px 0 0; border: 0; color: #f0faff; background: transparent; box-shadow: none; }
.mi-main-module .mi-modern-control input:not([type="password"]):not([type="text"]):not([type="email"]) { width: 100%; border: 0; background: transparent; }
.mi-modern-control input::placeholder { color: #506e84; }
.mi-password-toggle { position: absolute; top: 50%; right: 7px; display: grid; width: 35px; height: 35px; padding: 0; place-items: center; border: 0; border-radius: 8px; color: #7595ac; background: transparent; cursor: pointer; transform: translateY(-50%); }
.mi-password-toggle:hover { color: #dffaff; background: rgba(81, 190, 243, .12); }
.mi-form-terms { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border: 1px solid rgba(73, 205, 157, .18); border-radius: 10px; color: #8baabd; background: rgba(24, 106, 80, .1); font-size: 9px; }
.mi-form-terms i { margin-top: 2px; color: #44d795; }
.mi-modern-submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; overflow: hidden; border: 1px solid rgba(117, 224, 255, .36); border-radius: 12px; color: #fff !important; background: linear-gradient(135deg, #138ee7, #0b64c8 60%, #463fc0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 30px rgba(14, 106, 208, .22); font-size: 10px; font-weight: 900; letter-spacing: .35px; text-transform: uppercase; cursor: pointer; }
.mi-modern-submit:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 36px rgba(14, 126, 236, .3); }
.mi-form-switch { margin: 2px 0 0 !important; color: #7897ae; font-size: 9px; text-align: center; }
.mi-form-switch a { font-weight: 800; }
.mi-recaptcha-wrap { max-width: 100%; overflow-x: auto; }

/* Downloads */
.mi-download-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 25px; margin-bottom: 24px; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(81, 206, 255, .24); border-radius: 20px; background: linear-gradient(125deg, rgba(8, 67, 113, .46), rgba(4, 20, 38, .84)); }
.mi-download-feature::after { position: absolute; top: -50%; right: 12%; width: 170px; height: 220%; content: ''; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .045), transparent); transform: rotate(22deg); animation: mi-shimmer 7s ease-in-out infinite; }
@keyframes mi-shimmer { 0%, 65% { transform: translateX(-220px) rotate(22deg); } 100% { transform: translateX(480px) rotate(22deg); } }
.mi-download-feature h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 26px; }
.mi-download-feature p { max-width: 650px; margin: 9px 0 15px; color: #a0bed2; }
.mi-download-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mi-download-tags span { padding: 6px 9px; border: 1px solid rgba(98, 203, 255, .2); border-radius: 999px; color: #b9d9e9; background: rgba(5, 29, 50, .58); font-size: 8px; font-weight: 800; }
.mi-download-tags i { margin-right: 5px; color: #61d7ff; }
.mi-download-feature-art { position: relative; z-index: 1; display: grid; width: 112px; height: 112px; place-items: center; border: 1px solid rgba(106, 218, 255, .35); border-radius: 32px; color: #dff9ff; background: linear-gradient(145deg, rgba(39, 167, 245, .3), rgba(46, 70, 160, .35)); box-shadow: 0 0 50px rgba(27, 159, 255, .2); font-size: 38px; transform: rotate(4deg); }
.mi-download-feature-art span { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 5px; color: #061524; background: #7de4ff; font-size: 8px; font-weight: 900; }
.mi-download-groups { display: grid; gap: 18px; }
.mi-download-group { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(4, 19, 35, .68); }
.mi-download-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--line); background: rgba(13, 54, 87, .42); }
.mi-download-group-head > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(87, 203, 255, .3); border-radius: 12px; color: #70ddff; background: rgba(23, 121, 193, .2); }
.mi-download-group-head h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 15px; }
.mi-download-group-head p { margin: 2px 0 0; color: #7796ab; font-size: 9px; }
.mi-download-group-head > b { padding: 5px 8px; border-radius: 999px; color: #82dfff; background: rgba(38, 153, 222, .13); font-size: 8px; }
.mi-download-list { display: grid; gap: 1px; }
.mi-download-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 17px 20px; border-bottom: 1px solid rgba(100, 183, 230, .1); background: rgba(4, 17, 31, .55); transition: background .2s ease, transform .2s ease; }
.mi-download-card:last-child { border-bottom: 0; }
.mi-download-card:hover { background: rgba(12, 53, 88, .5); }
.mi-download-file-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #8ae5ff; background: linear-gradient(145deg, rgba(26, 136, 214, .28), rgba(20, 53, 106, .35)); }
.mi-download-copy h3 { margin: 0; color: #edfaff; font-size: 12px; }
.mi-download-copy p { margin: 3px 0; color: #7795aa; font-size: 9px; }
.mi-download-copy > span { color: #52748c; font-size: 8px; }
.mi-download-action { display: inline-flex; min-height: 38px; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(91, 208, 255, .28); border-radius: 10px; color: #dff8ff; background: rgba(16, 105, 174, .24); font-size: 9px; font-weight: 800; }
.mi-download-action:hover { color: #fff; background: rgba(20, 133, 216, .42); transform: translateY(-1px); }
.mi-install-guide { margin-top: 24px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(4, 19, 35, .64); }
.mi-install-guide-head h2 { margin: 0 0 18px; color: #fff; font-family: Cinzel, serif; font-size: 18px; }
.mi-install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mi-install-steps article { position: relative; min-height: 165px; padding: 23px 20px; overflow: hidden; border: 1px solid rgba(94, 187, 236, .15); border-radius: 14px; background: linear-gradient(145deg, rgba(9, 42, 70, .66), rgba(4, 18, 33, .8)); }
.mi-install-steps article > b { position: absolute; top: 4px; right: 13px; color: rgba(104, 205, 255, .09); font-family: Cinzel, serif; font-size: 42px; }
.mi-install-steps article > i { margin-bottom: 18px; color: #63d9ff; font-size: 20px; }
.mi-install-steps h3 { margin: 0; color: #fff; font-size: 12px; }
.mi-install-steps p { margin: 6px 0 0; color: #7694a9; font-size: 9px; }
.mi-modern-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(100, 197, 242, .26); border-radius: 17px; color: #7b9aaf; text-align: center; background: rgba(5, 22, 39, .45); }
.mi-modern-empty > i { color: #58cfff; font-size: 30px; }
.mi-modern-empty h3, .mi-modern-empty p { margin: 0; }

/* Ranking hub and legacy ranking subpages */
.mi-ranking-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 25px 27px; border: 1px solid rgba(100, 201, 246, .2); border-radius: 18px; background: linear-gradient(135deg, rgba(9, 57, 93, .55), rgba(5, 22, 40, .72)); }
.mi-ranking-hub-head h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 23px; }
.mi-ranking-hub-head p { margin: 6px 0 0; color: #7e9db2; font-size: 10px; }
.mi-ranking-crown { display: grid; width: 73px; height: 73px; place-items: center; border: 1px solid rgba(239, 194, 105, .32); border-radius: 22px; color: #f0c774; background: rgba(133, 91, 25, .17); box-shadow: 0 0 36px rgba(218, 166, 64, .13); font-size: 27px; }
.mi-ranking-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mi-ranking-options > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 95px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; color: #dceefa; background: linear-gradient(135deg, rgba(7, 38, 65, .72), rgba(4, 18, 34, .84)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.mi-ranking-options > a:hover { border-color: rgba(82, 209, 255, .47); color: #fff; background: linear-gradient(135deg, rgba(11, 68, 111, .78), rgba(6, 30, 55, .9)); transform: translateY(-3px); box-shadow: 0 15px 28px rgba(0, 0, 0, .2); }
.mi-ranking-options > a > span { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 13px; color: #69dcff; background: rgba(24, 130, 204, .18); }
.mi-ranking-options h3 { margin: 0; color: inherit; font-size: 12px; }
.mi-ranking-options p { margin: 4px 0 0; color: #708fa5; font-size: 9px; }
.mi-ranking-options > a > i { color: #517d98; }
.mi-main-module .mi-module-stage .mi-rank-wrap { max-width: none !important; }
.mi-main-module .mi-module-stage .mi-rank-title, .mi-main-module .mi-module-stage .public-online-title { margin-bottom: 20px !important; color: #fff !important; font-family: Cinzel, serif !important; font-size: 21px !important; }
.mi-main-module .mi-module-stage .mi-rank-menu { justify-content: flex-start !important; gap: 7px !important; margin-bottom: 20px !important; padding: 9px !important; border: 1px solid var(--line) !important; border-radius: 13px !important; background: rgba(3, 17, 31, .78) !important; }
.mi-main-module .mi-module-stage .mi-rank-menu a { min-height: 37px !important; padding: 8px 12px !important; border-color: rgba(81, 183, 236, .2) !important; border-radius: 9px !important; color: #bddced !important; background: rgba(11, 56, 91, .5) !important; font-size: 9px !important; }
.mi-main-module .mi-module-stage .mi-rank-menu a:hover { border-color: rgba(77, 213, 255, .46) !important; color: #fff !important; background: rgba(18, 105, 169, .52) !important; }
.mi-main-module .mi-module-stage .mi-rank-card, .mi-main-module .mi-module-stage .public-online-card { border-color: rgba(80, 186, 239, .24) !important; border-radius: 16px !important; background: rgba(3, 17, 31, .86) !important; box-shadow: 0 20px 48px rgba(0, 0, 0, .24) !important; }
.mi-main-module .mi-module-stage .mi-rank-table th, .mi-main-module .mi-module-stage .public-online-table th { padding: 13px 10px !important; border-color: rgba(108, 208, 255, .22) !important; color: #eafbff !important; background: linear-gradient(180deg, #17689f, #0e4b79) !important; font-size: 9px !important; letter-spacing: .45px !important; }
.mi-main-module .mi-module-stage .mi-rank-table td, .mi-main-module .mi-module-stage .public-online-table td { padding: 11px 10px !important; border-color: rgba(73, 150, 197, .14) !important; color: #cce0ec !important; font-size: 10px !important; }
.mi-main-module .mi-module-stage .mi-rank-table tbody tr:hover, .mi-main-module .mi-module-stage .public-online-table tbody tr:hover { background: rgba(29, 126, 187, .18) !important; }
.mi-main-module .mi-module-stage .public-online-wrap { max-width: none !important; }
.mi-main-module .mi-module-stage .public-online-head { margin-bottom: 19px !important; }
.mi-main-module .mi-module-stage .public-online-count { padding: 9px 13px !important; border-color: rgba(82, 206, 255, .28) !important; border-radius: 999px !important; background: rgba(12, 68, 108, .34) !important; }
.mi-main-module .mi-module-stage .public-online-race img { width: 42px !important; height: 42px !important; border-color: rgba(94, 218, 255, .55) !important; box-shadow: 0 0 15px rgba(49, 180, 242, .2) !important; }

/* Account center */
.mi-account-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 24px 26px; border: 1px solid rgba(91, 200, 246, .22); border-radius: 18px; background: linear-gradient(130deg, rgba(10, 62, 103, .5), rgba(5, 23, 42, .8)); }
.mi-account-welcome-copy { display: flex; align-items: center; gap: 16px; }
.mi-account-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border: 1px solid rgba(98, 218, 255, .43); border-radius: 17px; color: #dffaff; background: linear-gradient(145deg, rgba(32, 151, 234, .5), rgba(30, 62, 133, .58)); font-size: 22px; }
.mi-account-welcome h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 21px; }
.mi-account-welcome p { margin: 4px 0 0; color: #7f9eb3; font-size: 9px; }
.mi-account-security { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(67, 214, 147, .2); border-radius: 11px; color: #4ee09a; background: rgba(34, 126, 88, .12); }
.mi-account-security > span { display: grid; }
.mi-account-security b { color: #baf5d6; font-size: 9px; }
.mi-account-security small { color: #64947b; font-size: 8px; }
.mi-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mi-account-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 76px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; color: #e6f6ff; background: rgba(6, 31, 53, .62); }
.mi-account-action:hover { border-color: rgba(81, 207, 255, .44); color: #fff; background: rgba(10, 57, 92, .75); transform: translateY(-2px); }
.mi-account-action-icon { display: grid; width: 45px; height: 45px; place-items: center; overflow: hidden; border: 1px solid rgba(93, 196, 240, .2); border-radius: 12px; background: rgba(13, 74, 119, .28); }
.mi-account-action-icon img { width: 27px; height: 27px; object-fit: contain; }
.mi-account-action-copy { display: grid; }
.mi-account-action-copy strong { font-size: 10px; }
.mi-account-action-copy small { color: #66869e; font-size: 8px; }
.mi-account-action > i { color: #527f9b; font-size: 10px; }

/* Guides */
.mi-guides-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(8, 53, 88, .58), rgba(4, 19, 35, .75)); }
.mi-guides-intro h2, .mi-guide-path h2, .mi-shop-safe h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 21px; }
.mi-guides-intro p, .mi-guide-path header p { margin: 6px 0 0; color: #7e9db2; font-size: 10px; }
.mi-guides-primary { display: grid; min-width: 250px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(81, 214, 255, .34); border-radius: 13px; color: #e8fbff; background: linear-gradient(135deg, rgba(18, 133, 210, .48), rgba(32, 72, 160, .42)); }
.mi-guides-primary:hover { color: #fff; transform: translateY(-2px); }
.mi-guides-primary span { display: grid; font-size: 9px; font-weight: 800; }
.mi-guides-primary small { color: #8eb5c9; font-size: 8px; font-weight: 500; }
.mi-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.mi-guide-card { position: relative; display: grid; min-height: 245px; grid-template-rows: auto 1fr auto; gap: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(7, 38, 65, .74), rgba(4, 17, 32, .9)); }
.mi-guide-card:hover { border-color: rgba(82, 209, 255, .43); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, .22); }
.mi-guide-card.is-featured { background: linear-gradient(145deg, rgba(14, 76, 121, .72), rgba(12, 32, 72, .9)); }
.mi-guide-number { position: absolute; top: -11px; right: 12px; color: rgba(111, 216, 255, .07); font-family: Cinzel, serif; font-size: 76px; font-weight: 900; line-height: 1; }
.mi-guide-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(95, 212, 255, .3); border-radius: 14px; color: #6fdcff; background: rgba(21, 120, 188, .2); font-size: 18px; }
.mi-guide-tag { color: #5acfff; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.mi-guide-card h3 { margin: 5px 0 0; color: #fff; font-family: Cinzel, serif; font-size: 16px; }
.mi-guide-card p { margin: 8px 0 0; color: #7897ad; font-size: 9px; }
.mi-guide-card > a { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(104, 186, 229, .12); color: #aadff1; font-size: 9px; font-weight: 800; }
.mi-guide-path { margin-top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(4, 19, 35, .66); }
.mi-guide-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.mi-guide-path-grid > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(91, 184, 231, .13); border-radius: 12px; color: #deeff8; background: rgba(6, 34, 58, .56); }
.mi-guide-path-grid > a:hover { border-color: rgba(79, 210, 255, .36); color: #fff; background: rgba(11, 58, 94, .65); }
.mi-guide-path-grid > a > i:first-child { width: 25px; color: #64d6ff; text-align: center; }
.mi-guide-path-grid span { display: grid; }
.mi-guide-path-grid b { font-size: 9px; }
.mi-guide-path-grid small { color: #66869d; font-size: 8px; }
.mi-guide-path-grid > a > i:last-child { color: #527991; font-size: 8px; }
.mi-guide-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(114, 101, 255, .24); border-radius: 15px; background: linear-gradient(135deg, rgba(47, 43, 127, .24), rgba(8, 32, 54, .62)); }
.mi-guide-help > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #b6adff; background: rgba(95, 83, 210, .2); }
.mi-guide-help h3 { margin: 0; color: #fff; font-size: 11px; }
.mi-guide-help p { margin: 3px 0 0; color: #758fa6; font-size: 8px; }
.mi-guide-help button { padding: 10px 13px; border: 1px solid rgba(135, 125, 255, .32); border-radius: 10px; color: #e5e0ff; background: rgba(85, 70, 187, .25); font-size: 9px; font-weight: 800; cursor: pointer; }

/* Events */
.mi-events-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(8, 55, 90, .62), rgba(5, 21, 39, .78)); }
.mi-events-overview h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: 23px; }
.mi-events-overview p { margin: 6px 0 0; color: #7a9aaf; font-size: 10px; }
.mi-events-clock { display: grid; min-width: 150px; grid-template-columns: auto 1fr; align-items: center; gap: 0 9px; padding: 11px 14px; border: 1px solid rgba(86, 208, 255, .28); border-radius: 13px; background: rgba(9, 62, 101, .32); }
.mi-events-clock > i { grid-row: 1 / 3; color: #68d9ff; font-size: 19px; }
.mi-events-clock b { color: #eaffff; font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: 1px; }
.mi-events-clock small { color: #6f91a8; font-size: 7px; text-transform: uppercase; }
.mi-events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.mi-event-card { --event-accent: 78, 202, 255; position: relative; display: grid; min-height: 240px; grid-template-columns: 110px minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(var(--event-accent), .22); border-radius: 17px; background: linear-gradient(135deg, rgba(var(--event-accent), .11), rgba(4, 17, 31, .92) 46%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.mi-event-card.is-violet { --event-accent: 137, 115, 255; }
.mi-event-card.is-cyan { --event-accent: 58, 230, 220; }
.mi-event-card.is-red { --event-accent: 255, 92, 112; }
.mi-event-card.is-gold { --event-accent: 240, 187, 84; }
.mi-event-card.is-royal { --event-accent: 189, 111, 255; }
.mi-event-card:hover { border-color: rgba(var(--event-accent), .48); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, .24), 0 0 32px rgba(var(--event-accent), .06); }
.mi-event-art { position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(var(--event-accent), .85); background: radial-gradient(circle at 45% 45%, rgba(var(--event-accent), .24), transparent 58%), rgba(2, 14, 27, .5); font-size: 35px; }
.mi-event-art::after { position: absolute; inset: 18px; border: 1px solid rgba(var(--event-accent), .2); border-radius: 50%; content: ''; box-shadow: 0 0 0 9px rgba(var(--event-accent), .025), 0 0 0 18px rgba(var(--event-accent), .018); }
.mi-event-art span { position: absolute; right: 8px; bottom: 8px; color: rgba(var(--event-accent), .13); font-family: Cinzel, serif; font-size: 32px; font-weight: 900; }
.mi-event-content { display: flex; min-width: 0; flex-direction: column; padding: 20px; }
.mi-event-state { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 999px; color: rgba(var(--event-accent), .9); background: rgba(var(--event-accent), .08); font-size: 7px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.mi-event-state i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--event-accent)); box-shadow: 0 0 8px rgba(var(--event-accent), .8); animation: mi-event-pulse 1.8s ease-in-out infinite; }
@keyframes mi-event-pulse { 50% { opacity: .35; transform: scale(.7); } }
.mi-event-content h3 { margin: 12px 0 0; color: #fff; font-family: Cinzel, serif; font-size: 16px; }
.mi-event-content > p { flex: 1; margin: 7px 0 14px; color: #7593a8; font-size: 9px; }
.mi-event-timing { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(var(--event-accent), .13); }
.mi-event-timing > span { display: grid; }
.mi-event-timing small { color: #58768c; font-size: 7px; font-weight: 800; }
.mi-event-timing b { color: #a8c7d8; font-size: 8px; font-weight: 600; }
.mi-event-timing > strong { color: rgb(var(--event-accent)); font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: .6px; }
.mi-events-note { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(85, 190, 239, .16); border-radius: 13px; color: #66cef8; background: rgba(8, 45, 73, .42); }
.mi-events-note span { display: grid; }
.mi-events-note b { color: #dff6ff; font-size: 9px; }
.mi-events-note small { color: #6e8da3; font-size: 8px; }

/* Official shop */
.mi-shop-hero { position: relative; display: grid; min-height: 360px; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); align-items: center; gap: 30px; padding: clamp(28px, 5vw, 52px); overflow: hidden; border: 1px solid rgba(157, 123, 255, .24); border-radius: 20px; background: linear-gradient(120deg, rgba(25, 28, 82, .78), rgba(6, 30, 53, .9) 62%, rgba(11, 21, 52, .94)); }
.mi-shop-hero::after { position: absolute; top: -120px; right: 9%; width: 330px; height: 330px; border-radius: 50%; content: ''; background: radial-gradient(circle, rgba(108, 86, 255, .24), transparent 68%); }
.mi-shop-hero-copy { position: relative; z-index: 2; }
.mi-shop-hero h2 { margin: 0; color: #fff; font-family: Cinzel, serif; font-size: clamp(29px, 4vw, 43px); text-shadow: 0 6px 30px rgba(111, 83, 255, .3); }
.mi-shop-hero-copy > p { max-width: 620px; margin: 13px 0 23px; color: #a5bbd0; }
.mi-shop-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-shop-actions .mi-modern-submit { min-width: 190px; }
.mi-shop-secondary { display: inline-flex; min-height: 48px; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid rgba(146, 130, 255, .25); border-radius: 12px; color: #d6d1ff; background: rgba(71, 57, 156, .16); font-size: 9px; font-weight: 800; }
.mi-shop-secondary:hover { color: #fff; background: rgba(90, 72, 190, .28); }
.mi-shop-trust { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 23px; color: #718ba2; font-size: 8px; font-weight: 700; }
.mi-shop-trust i { margin-right: 5px; color: #8c80ff; }
.mi-shop-crystal { position: relative; z-index: 2; display: grid; width: 210px; height: 210px; place-items: center; justify-self: center; border: 1px solid rgba(156, 137, 255, .22); border-radius: 50%; color: #c7c1ff; background: radial-gradient(circle, rgba(98, 79, 222, .26), rgba(10, 28, 58, .08) 62%, transparent 63%); box-shadow: 0 0 70px rgba(94, 73, 221, .16), inset 0 0 46px rgba(89, 189, 255, .08); font-size: 69px; animation: mi-crystal-float 5s ease-in-out infinite; }
.mi-shop-crystal::before, .mi-shop-crystal::after { position: absolute; inset: 16px; border: 1px solid rgba(146, 133, 255, .16); border-radius: 45%; content: ''; transform: rotate(25deg); }
.mi-shop-crystal::after { inset: 34px; border-color: rgba(84, 208, 255, .13); transform: rotate(-29deg); }
.mi-shop-crystal > i { filter: drop-shadow(0 0 22px rgba(153, 132, 255, .56)); }
.mi-shop-crystal b { position: absolute; bottom: 27px; color: #64d8ff; font-size: 9px; letter-spacing: 2px; }
@keyframes mi-crystal-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.mi-shop-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mi-shop-features article { display: flex; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: rgba(5, 27, 47, .64); }
.mi-shop-features article > span { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 12px; color: #9288ff; background: rgba(79, 65, 184, .18); }
.mi-shop-features h3 { margin: 1px 0 0; color: #fff; font-size: 11px; }
.mi-shop-features p { margin: 5px 0 0; color: #718da3; font-size: 8px; }
.mi-shop-safe { margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: rgba(4, 19, 35, .64); }
.mi-shop-safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.mi-shop-safe-grid > div { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(93, 180, 226, .12); border-radius: 12px; background: rgba(5, 31, 53, .52); }
.mi-shop-safe-grid b { color: rgba(117, 102, 255, .66); font-family: Cinzel, serif; font-size: 22px; }
.mi-shop-safe-grid span { display: grid; }
.mi-shop-safe-grid strong { color: #deeff8; font-size: 9px; }
.mi-shop-safe-grid small { color: #66859c; font-size: 8px; }
.mi-shop-discord { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin-top: 18px; padding: 18px 20px; border: 1px solid rgba(117, 102, 255, .24); border-radius: 15px; background: linear-gradient(135deg, rgba(67, 55, 161, .22), rgba(8, 33, 56, .66)); }
.mi-shop-discord > i { color: #8f85ff; font-size: 29px; }
.mi-shop-discord h3 { margin: 0; color: #fff; font-size: 11px; }
.mi-shop-discord p { margin: 3px 0 0; color: #768fa5; font-size: 8px; }
.mi-shop-discord a { padding: 10px 13px; border: 1px solid rgba(139, 127, 255, .28); border-radius: 10px; color: #e1ddff; background: rgba(78, 63, 179, .23); font-size: 9px; font-weight: 800; }

@media (max-width: 980px) {
  .mi-auth-layout { grid-template-columns: 1fr; }
  .mi-auth-aside { min-height: auto; }
  .mi-auth-steps { max-width: 620px; }
  .mi-event-card { grid-template-columns: 88px minmax(0, 1fr); }
  .mi-shop-hero { grid-template-columns: minmax(0, 1fr) 210px; }
  .mi-shop-features, .mi-shop-safe-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .mi-main-module { padding: 16px; }
  .mi-inner-hero-content { min-height: 170px; grid-template-columns: auto minmax(0, 1fr); padding: 24px; }
  .mi-breadcrumb { display: none; }
  .mi-download-feature { padding: 24px; }
  .mi-download-feature-art { width: 90px; height: 90px; border-radius: 25px; }
  .mi-events-grid, .mi-ranking-options { grid-template-columns: 1fr; }
  .mi-shop-hero { grid-template-columns: 1fr; }
  .mi-shop-crystal { position: absolute; right: -50px; bottom: -55px; opacity: .45; }
  .mi-shop-hero-copy { max-width: 80%; }
}

@media (max-width: 680px) {
  .mi-main-module { padding: 12px; }
  .mi-inner-hero { min-height: 145px; margin-bottom: 12px; border-radius: 17px; }
  .mi-inner-hero-content { min-height: 145px; gap: 13px; padding: 20px; }
  .mi-inner-icon { width: 52px; height: 52px; border-radius: 15px; font-size: 20px; }
  .mi-inner-copy p { font-size: 10px; }
  .mi-inner-kicker { font-size: 7px; }
  .mi-module-stage { padding: 15px; border-radius: 17px; }
  .mi-auth-card, .mi-auth-aside { padding: 22px; border-radius: 16px; }
  .mi-auth-steps { display: none; }
  .mi-download-feature { grid-template-columns: 1fr; padding: 21px; }
  .mi-download-feature-art { display: none; }
  .mi-download-group-head { grid-template-columns: auto minmax(0, 1fr); }
  .mi-download-group-head > b { display: none; }
  .mi-download-card { grid-template-columns: auto minmax(0, 1fr); }
  .mi-download-action { grid-column: 1 / -1; justify-content: center; }
  .mi-install-steps, .mi-guide-grid, .mi-guide-path-grid, .mi-account-grid { grid-template-columns: 1fr; }
  .mi-guides-intro, .mi-events-overview, .mi-account-welcome { align-items: stretch; flex-direction: column; }
  .mi-guides-primary { min-width: 0; }
  .mi-guide-help, .mi-shop-discord { grid-template-columns: auto minmax(0, 1fr); }
  .mi-guide-help button, .mi-shop-discord a { grid-column: 1 / -1; text-align: center; }
  .mi-events-clock { align-self: flex-start; }
  .mi-event-card { min-height: 260px; grid-template-columns: 72px minmax(0, 1fr); }
  .mi-event-art { font-size: 25px; }
  .mi-event-timing { align-items: flex-start; flex-direction: column; }
  .mi-shop-hero { min-height: 400px; padding: 26px 22px; }
  .mi-shop-hero-copy { max-width: 100%; }
  .mi-shop-actions { align-items: stretch; flex-direction: column; }
  .mi-shop-crystal { opacity: .24; }
  .mi-main-module .mi-module-stage .mi-rank-card, .mi-main-module .mi-module-stage .public-online-card { overflow-x: auto !important; }
  .mi-main-module .mi-module-stage .mi-rank-table { min-width: 670px !important; }
}

@media (max-width: 430px) {
  .mi-inner-icon { display: none; }
  .mi-inner-hero-content { grid-template-columns: 1fr; }
  .mi-auth-benefits > div { padding: 10px; }
  .mi-event-card { grid-template-columns: 1fr; }
  .mi-event-art { min-height: 76px; }
  .mi-event-art::after { inset: 10px 40%; }
  .mi-event-art span { font-size: 24px; }
  .mi-shop-trust { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}