/* ============================================================================
   Atlas — Framework stylesheet
   All colours come from CSS custom properties injected by the theme
   (see ThemeRenderer::cssVariables). Edit presets/*.php, not hard-coded colours.
   ========================================================================== */

:root {
    --mtl-radius: 16px;
    --mtl-radius-sm: 10px;
    --mtl-gap: 24px;
    --mtl-maxw: 1180px;
    --mtl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mtl-font-head: 'Outfit', 'Inter', sans-serif;
    --mtl-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    --mtl-trans: .25s cubic-bezier(.4, 0, .2, 1);
    --mtl-navh: 110px;           /* navbar height, used for hero overlap */
    --mtl-hero-logo-scale: 1;    /* overridden by the admin "Hero logo size" slider */
}

/* ----------------------------------------------------------------- Base */
body.mtl-theme {
    background: var(--mtl-bg);
    background-image:
        radial-gradient(1200px 600px at 80% -10%, var(--mtl-glow), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, var(--mtl-surface), transparent 55%);
    background-attachment: fixed;
    color: var(--mtl-text);
    font-family: var(--mtl-font-body);
    -webkit-font-smoothing: antialiased;
    /* Clip the symmetric ±sb/2 overflow of full-bleed sections without creating a
       scroll container — keeps the sticky navbar working (unlike overflow:hidden). */
    overflow-x: clip;
}

body.mtl-theme h1, body.mtl-theme h2, body.mtl-theme h3,
body.mtl-theme h4, body.mtl-theme .mtl-section-title {
    font-family: var(--mtl-font-head);
    color: var(--mtl-heading);
    letter-spacing: -.01em;
}

.mtl-theme a { color: var(--mtl-secondary); }
.mtl-theme .mtl-muted { color: var(--mtl-text-muted); }

/* Full-bleed (deterministic, no JS): the classic left:50% + margin:-50vw technique.
   The box is symmetric around the viewport centre, so its CONTENT is perfectly
   centred at every width with NO scrollbar-compensation variable. The ±sb/2 overflow
   on each side is clipped by `overflow-x: clip` on the body (sticky-navbar safe). */
.mtl-fullbleed {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* --------------------------------------------------------------- Navbar */
.mtl-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: rgba(10, 10, 15, .2);                  /* fallback (ultra transparent) */
    background: var(--mtl-nav-bg, rgba(10, 10, 15, .2));
    border-bottom: 1px solid var(--mtl-nav-border, transparent);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; /* RC39: don't transition backdrop-filter (re-blurs every frame) */
}
/* On scroll: slightly more solid + stronger blur (set by framework.js) */
.mtl-navbar.mtl-nav-scrolled {
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    background: var(--mtl-nav-bg-scrolled, rgba(10, 10, 15, .65));
    border-bottom-color: rgba(255, 255, 255, .10);
    box-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
/* RC37 — Transparent hero header (HOMEPAGE ONLY): fully transparent at the top so the
   hero shows through (header + hero feel as one), turning to glass on scroll. The base
   .mtl-navbar transition (.3s) makes the change smooth. Other pages are unaffected. */
.mtl-navbar.mtl-nav-transparent { background: var(--mtl-navt-top, transparent); }
.mtl-navbar.mtl-nav-transparent:not(.mtl-nav-scrolled) {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: transparent; box-shadow: none;
}
.mtl-navbar.mtl-nav-transparent.mtl-nav-scrolled {
    background: var(--mtl-navt-scrolled, rgba(10, 10, 15, .85));
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, .10);
    box-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
/* Homepage: let the hero show THROUGH the glass navbar (premium overlap).
   Only pull up when a hero is actually present; degrades safely without :has(). */
body#page-index .mtl-content.ui.container:has(.mtl-home > .mtl-hblock:first-child .mtl-hero) { margin-top: calc(var(--mtl-navh) * -1); position: relative; }
.mtl-navbar .ui.container { max-width: var(--mtl-maxw) !important; }
.mtl-menu.ui.menu {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: var(--mtl-navh, 110px);
    align-items: center;
}
/* Top-level nav links: premium heading typography + animated underline */
.mtl-menu.ui.menu > .item {
    font-family: var(--mtl-font-head);
    font-weight: var(--mtl-navbar-link-weight, 700);
    font-size: var(--mtl-navbar-link-size, 22px);
    letter-spacing: .2px;
    padding: 14px 26px !important;
    position: relative;
    transition: color var(--mtl-trans), background var(--mtl-trans);
}
/* Nav text colour applies to all items EXCEPT the Store CTA (which has its own colour chain). */
.mtl-menu.ui.menu > .item:not(.mtl-nav-primary) {
    color: var(--mtl-nav-text, var(--mtl-text)) !important;
}
/* Subtle premium hover wash behind links (the underline stays the main indicator) */
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):not(.mtl-hslot):not(.mtl-nav-primary) { border-radius: 12px; }
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):not(.mtl-hslot):not(.mtl-nav-primary):hover { background: color-mix(in srgb, var(--mtl-text) 7%, transparent); }
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc) { text-decoration: none !important; }
/* Active / hover: luminous accent bar anchored strictly UNDER the text line box
   (top:50% + ~0.8em puts it just below the glyphs — never a strike through the text). */
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc)::after {
    content: ""; position: absolute; left: 26px; right: 26px; top: calc(50% + 0.8em); height: 3px;
    border-radius: 3px; background: var(--mtl-nav-underline, linear-gradient(90deg, var(--mtl-primary), var(--mtl-secondary)));
    box-shadow: 0 0 12px var(--mtl-glow);
    transform: scaleX(0); transform-origin: center; transition: transform var(--mtl-trans);
    pointer-events: none;
}
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):hover,
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):focus,
.mtl-menu.ui.menu > .active.item { color: var(--mtl-nav-hover-text, var(--mtl-heading)) !important; }
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):hover::after,
.mtl-menu.ui.menu > .item:not(.mtl-brand):not(.toc):focus::after,
.mtl-menu.ui.menu > .active.item::after { transform: scaleX(1); }
.mtl-menu.ui.menu .ui.dropdown .menu .item { font-family: var(--mtl-font-body); }
.mtl-brand { display: inline-flex !important; align-items: center; gap: 12px; }
/* Navbar logo: height-driven, width auto → aspect ratio always preserved, never cropped/squared */
.mtl-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.mtl-brand-text { font-family: var(--mtl-font-head); font-weight: 900; font-size: 1.5rem; letter-spacing: -.01em; color: var(--mtl-heading); }
.mtl-sidebar-logo { max-height: 34px; }

/* ---- Sidebar guest auth (Login / Register) ---- */
.mtl-sidebar-auth { padding: 12px 16px 20px; }
.mtl-sidebar-auth-sep { height: 1px; background: rgba(255,255,255,.12); margin-bottom: 14px; }
.mtl-sidebar-auth-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 16px; margin-bottom: 8px;
    border-radius: 10px; font-family: var(--mtl-font-body);
    font-size: .9rem; font-weight: 700; text-decoration: none !important;
    transition: transform .15s, box-shadow .15s;
}
.mtl-sidebar-auth-btn:hover { transform: translateY(-1px); }
.mtl-sidebar-auth-register {
    background: var(--mtl-primary);
    color: #fff !important;
    box-shadow: 0 6px 18px var(--mtl-glow);
}
.mtl-sidebar-auth-register:hover { box-shadow: 0 10px 26px var(--mtl-glow); color: #fff !important; }
.mtl-sidebar-auth-login {
    background: transparent;
    border: 1.5px solid var(--mtl-primary);
    color: var(--mtl-primary) !important;
}
.mtl-sidebar-auth-login:hover { background: color-mix(in srgb, var(--mtl-primary) 12%, transparent); color: var(--mtl-primary) !important; }

.mtl-menu .ui.dropdown .menu {
    background: var(--mtl-surface-solid);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-sm);
}
.mtl-menu .ui.dropdown .menu > .item { color: var(--mtl-text) !important; }

.mtl-online-dot { color: #2ecc71; font-size: .55em; vertical-align: middle; animation: mtl-pulse 2s infinite; }
@keyframes mtl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.mtl-ip-pill {
    border: 1px solid var(--mtl-border) !important;
    border-radius: 999px !important;
    background: var(--mtl-surface) !important;
    gap: 8px;
    padding: 8px 14px !important;
    font-size: .82rem !important;       /* understated: must not overpower the nav links */
    font-weight: 600 !important;        /* RC39: 600 (already loaded) — drops the Inter-500 font download */
    color: var(--mtl-text-muted) !important;
    opacity: .9;
    transition: opacity var(--mtl-trans), border-color var(--mtl-trans);
}
.mtl-ip-pill:hover { opacity: 1; border-color: color-mix(in srgb, var(--mtl-primary) 45%, transparent) !important; }
.mtl-ip-pill .mtl-ip-text { color: var(--mtl-text); }
.mtl-burger { display: none !important; }

/* ---- Header V3: icons toggle, premium user menu, More dropdown, polish ---- */
/* Hide per-link FontAwesome icons when "Show navbar icons" is off (keep dropdown carets) */
.mtl-no-nav-icons .mtl-menu > .item > i:not(.dropdown),
.mtl-no-nav-icons .mtl-menu > .item > .icon:not(.dropdown) { display: none !important; }

/* Right group: IP · social · user — kept together, aligned right */
.mtl-menu .right.menu { display: flex; align-items: center; gap: 12px; }
.mtl-nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* CENTERED NAVIGATION (desktop): the right group is taken out of flow so the
   navigation links centre in the full navbar width, independent of IP/social/user. */
@media (min-width: 992px) {
    .mtl-menu.ui.menu { position: relative; justify-content: center; }
    .mtl-nav-right { position: absolute; right: 0; top: 0; bottom: 0; margin-left: 0; }
    /* Keep the FIRST link's left padding symmetric when the nav is centred — the
       flush-left "brand hidden" tweak (padding-left:0) would otherwise make the
       group asymmetric and shift its optical centre. The CTA width can't move the
       centre because justify-content:center centres the whole group as one block. */
    .mtl-menu.mtl-no-brand > .item:first-of-type { padding-left: 26px !important; }
}

/* Premium user menu button — primary entry point: bigger avatar, soft hover, glow */
.mtl-user-btn.ui.label {
    display: inline-flex !important; align-items: center; gap: 11px;
    background: var(--mtl-surface) !important; border: 1px solid var(--mtl-border) !important;
    border-radius: 999px !important; padding: 5px 18px 5px 5px !important; color: var(--mtl-text) !important;
    transition: border-color var(--mtl-trans), background var(--mtl-trans), box-shadow var(--mtl-trans), transform var(--mtl-trans);
}
.mtl-user-btn.ui.label:hover {
    border-color: color-mix(in srgb, var(--mtl-primary) 55%, transparent) !important;
    background: var(--mtl-surface-solid) !important;
    box-shadow: 0 8px 24px -10px var(--mtl-glow), 0 0 0 1px color-mix(in srgb, var(--mtl-primary) 28%, transparent);
    transform: translateY(-1px);
}
.mtl-user-btn img { border-radius: 50% !important; width: 48px !important; height: 48px !important; object-fit: cover; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mtl-primary) 38%, transparent); }
.mtl-user-name { font-family: var(--mtl-font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: .1px; color: var(--mtl-heading); }
.mtl-user-caret { display: inline-flex; align-items: center; opacity: .6; font-size: .9rem; margin: 0 0 0 1px !important; }

/* Auto "More" dropdown (built by framework.js) */
.mtl-menu .mtl-more.ui.dropdown.item { font-family: var(--mtl-font-head); font-weight: var(--mtl-navbar-link-weight, 700); font-size: var(--mtl-navbar-link-size, 22px); color: var(--mtl-nav-text, var(--mtl-text)) !important; }
.mtl-menu .mtl-more .menu { background: var(--mtl-surface-solid) !important; border: 1px solid var(--mtl-border) !important; border-radius: var(--mtl-radius-sm) !important; }
/* Dropdown text colour (More ▾ + nav dropdowns + user menu) — reuses the nav text colour */
.mtl-menu .mtl-more .menu > .item,
.mtl-menu.ui.menu .ui.dropdown .menu .item,
body.mtl-theme .ui.popup .link.list .item { color: var(--mtl-nav-text, var(--mtl-text)) !important; }

/* ---- Header Builder: reorder blocks via flex order (saved as JSON) ---- */
.mtl-menu > .mtl-brand { order: var(--mtl-ord-logo, 10); }
.mtl-menu > .item:not(.mtl-brand):not(.toc):not(.mtl-nav-right) { order: var(--mtl-ord-nav, 20); }
.mtl-menu > .mtl-nav-right { order: 90; }
/* Internal order of the right group (Header Builder) */
.mtl-nav-right > .mtl-hslot-ip { order: var(--mtl-ord-ip, 30); }
.mtl-nav-right > .mtl-hslot-discord { order: var(--mtl-ord-discord, 40); }
.mtl-nav-right > .mtl-hslot-social { order: var(--mtl-ord-social, 50); }
.mtl-nav-right > .right.menu { order: var(--mtl-ord-user, 90); }
.mtl-nav-right > .toc.item { order: 95; }
.mtl-hslot-social { display: inline-flex; align-items: center; gap: 6px; }
.mtl-hslot-social a { color: var(--mtl-text); }
.mtl-hslot-social a:hover { color: var(--mtl-primary); }
.mtl-hslot-discord i { color: #5865F2; }

/* --------------------------------------------------------------- Buttons */
.mtl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: var(--mtl-font-head);
    font-weight: 700; font-size: .9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--mtl-trans), box-shadow var(--mtl-trans), background var(--mtl-trans);
    text-decoration: none;
}
.mtl-btn:hover { transform: translateY(-2px); }
.mtl-btn-lg { padding: 14px 30px; font-size: 1rem; }
.mtl-btn-sm { padding: 7px 14px; font-size: .8rem; }
/* Filled CTAs: ALWAYS white text + white icons + weight 800, on every preset
   (only the background colour changes — text never blends into the button). */
.mtl-btn-primary { background: var(--mtl-primary) !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 8px 24px var(--mtl-glow); }
.mtl-btn-primary:hover { background: var(--mtl-primary) !important; box-shadow: 0 12px 32px var(--mtl-glow); color: #fff !important; }
.mtl-btn-accent { background: var(--mtl-accent); color: #fff !important; font-weight: 800 !important; }
.mtl-btn-primary i, .mtl-btn-accent i { color: #fff !important; }
.mtl-btn-ghost { background: var(--mtl-surface) !important; border-color: var(--mtl-border) !important; color: var(--mtl-text) !important; }
/* Outline guest button — inherits active preset's primary colour automatically */
.mtl-btn-outline { background: transparent !important; border: 1.5px solid var(--mtl-primary) !important; color: var(--mtl-primary) !important; }
.mtl-btn-outline:hover { background: color-mix(in srgb, var(--mtl-primary) 12%, transparent) !important; box-shadow: 0 4px 16px var(--mtl-glow); color: var(--mtl-primary) !important; }
.mtl-btn-outline i { color: var(--mtl-primary) !important; }
/* Visual separator between Store CTA and Login/Register group */
.mtl-auth-divider { display: inline-block; width: 1px; height: 20px; background: var(--mtl-border); margin: 0 14px 0 10px; vertical-align: middle; align-self: center; }

/* ----------------------------------------------------------------- Hero */
.mtl-hero {
    position: relative;
    min-height: 540px;
    display: flex; align-items: center;
    background-size: cover; background-position: center;
    background-color: var(--mtl-bg-alt);
    overflow: hidden;
}
.mtl-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent, var(--mtl-bg) 96%),
        var(--mtl-hero-overlay);
}
.mtl-hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 80px 20px; }
.mtl-hero-title {
    font-size: clamp(2rem, 8vw, var(--mtl-hero-title-size, 4.5rem));
    line-height: 1.05; margin: 0 0 18px;
    background: linear-gradient(120deg, var(--mtl-heading), var(--mtl-secondary));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mtl-hero-subtitle { font-size: clamp(1rem, 2.5vw, var(--mtl-hero-subtitle-size, 1.3rem)); color: var(--mtl-text-muted); margin: 0 0 32px; }
.mtl-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Breathing room between the IP copy pill and the quick links / CTA row */
.mtl-hero-ip + .mtl-hero-actions:has(*) { margin-top: 36px; }
.mtl-hero-meta { margin-top: 22px; color: var(--mtl-text-muted); font-size: .9rem; }

/* ------------------------------------------------------------- Sections */
.mtl-home { padding-bottom: 60px; display: flex; flex-wrap: wrap; column-gap: var(--mtl-gap); align-items: flex-start; }
.mtl-home > .mtl-hblock { flex: 0 0 100%; min-width: 0; }
.mtl-home > .mtl-hblock.mtl-w-half { flex: 1 1 calc(50% - var(--mtl-gap)); min-width: 320px; }
/* Width options actually differ: contained = narrower, full = full content width */
.mtl-home > .mtl-hblock.mtl-w-contained > .mtl-section { max-width: 940px; }
.mtl-home > .mtl-hblock.mtl-w-full > .mtl-section { max-width: var(--mtl-maxw); }
.mtl-widgets-zone { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--mtl-gap); }
@media (max-width: 767px) { .mtl-home > .mtl-hblock.mtl-w-half { flex: 0 0 100%; } }
.mtl-section { max-width: var(--mtl-maxw); margin: 0 auto; padding: var(--mtl-section-pad, 56px) 20px 0; }
.mtl-section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); text-align: center; margin: 0 0 36px; }
@media (max-width: 767px) {
    .mtl-section { padding-top: 40px; }
    .mtl-section-title { margin-bottom: 24px; }
    .mtl-card { padding: 22px; }
}
.mtl-grid { display: grid; gap: var(--mtl-gap); }
.mtl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mtl-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------------ Card */
.mtl-card {
    background: var(--mtl-card-bg, var(--mtl-surface));
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    padding: 28px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--mtl-trans), border-color var(--mtl-trans), box-shadow var(--mtl-trans);
}
a.mtl-card:hover, .mtl-feature:hover, .mtl-staff:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--mtl-primary) 55%, transparent);
    box-shadow: var(--mtl-shadow);
}

/* --------------------------------------------------------------- Features */
.mtl-features .mtl-section-title { font-size: clamp(2rem, 5vw, var(--mtl-feature-section-title-size, 56px)); }
.mtl-feature { text-align: center; padding: 40px; max-width: var(--mtl-feature-card-width, 400px); margin-left: auto; margin-right: auto; }
.mtl-feature-icon {
    width: calc(var(--mtl-feature-icon-size, 110px) + 40px);
    height: calc(var(--mtl-feature-icon-size, 110px) + 40px);
    min-width: 150px; min-height: 150px;
    margin: 0 auto 24px;
    display: grid; place-items: center;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--mtl-primary), var(--mtl-secondary));
    box-shadow: 0 10px 30px var(--mtl-glow);
}
/* FontAwesome icons scale proportionally with the size setting */
.mtl-feature-icon i { font-size: calc(var(--mtl-feature-icon-size, 110px) * 0.62); line-height: 1; }
.mtl-feature h3 { margin: 0 0 16px; font-size: clamp(1.2rem, 2vw, var(--mtl-feature-card-title-size, 28px)); }
.mtl-feature p { color: var(--mtl-text-muted); margin: 0; font-size: clamp(.95rem, 1.5vw, var(--mtl-feature-description-size, 18px)); line-height: 1.6; }
.mtl-feature-link { text-decoration: none; }
/* Custom uploaded icon (PNG/WebP) instead of the FontAwesome gradient badge */
.mtl-feature-icon-img { background: var(--mtl-surface) !important; box-shadow: none !important; }
.mtl-feature-icon-img img { width: var(--mtl-feature-icon-size, 110px); height: var(--mtl-feature-icon-size, 110px); object-fit: contain; }


/* Latest Updates — premium Minecraft announcement cards. Every colour derives from
   the active preset (primary / secondary / accent / glow / border); no hardcoded hue.
   A transparent PNG illustration FLOATS above each card (no banner/frame/thumbnail).
   PNGs keep their own colours (only a neutral drop-shadow); everything else is preset-driven. */
.mtl-updates { margin-top: 40px; }
.mtl-section:has(.mtl-updates) { padding-bottom: 56px; }
.mtl-section:has(.mtl-updates) .mtl-section-title { padding-bottom: 48px; }
.mtl-update {
    position: relative; display: flex; flex-direction: column;
    padding: 0 24px 26px !important; margin-top: 68px; overflow: visible;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.mtl-update:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--mtl-primary) 45%, var(--mtl-border));
    box-shadow: 0 26px 56px -20px var(--mtl-glow), 0 0 0 1px color-mix(in srgb, var(--mtl-primary) 30%, transparent);
}
/* Floating transparent PNG — larger than the card, overflows the top, never recoloured */
.mtl-update-media { height: 150px; margin-top: -56px; display: flex; align-items: flex-end; justify-content: center; }
.mtl-update-art {
    max-height: 220px; max-width: 92%; width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,.45));
    transition: transform .3s ease;
}
.mtl-update:hover .mtl-update-art { transform: translateY(-6px) scale(1.04); } /* RC39: lift on hover only (no permanent animation) */
/* Category badge — preset-coloured, white text */
.mtl-update-badge {
    align-self: flex-start; margin-top: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-family: var(--mtl-font-head); font-weight: 800; font-size: .7rem;
    letter-spacing: .07em; text-transform: uppercase; color: #fff;
    background: color-mix(in srgb, var(--mtl-primary) 30%, rgba(0,0,0,.35));
    border: 1px solid color-mix(in srgb, var(--mtl-primary) 70%, transparent);
    box-shadow: 0 4px 14px -5px var(--mtl-glow);
}
.mtl-update-body { display: flex; flex-direction: column; flex: 1; padding-top: 30px; } /* breathing room between the floating PNG and the content */
.mtl-update-date { font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--mtl-text-muted); margin-top: 8px; }
.mtl-update-title { margin: 4px 0 0; font-family: var(--mtl-font-head); font-size: 1.35rem; color: var(--mtl-heading); }
.mtl-update-text { margin: 6px 0 0; color: var(--mtl-text-muted); line-height: 1.55; flex: 1; }
.mtl-update-btn { align-self: flex-start; margin-top: 16px; }

/* ------------------------------------------------------------------ Staff */
.mtl-staff { text-align: center; text-decoration: none; }
.mtl-staff-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mtl-border); }
.mtl-staff-name { margin-top: 12px; font-weight: 700; }

/* Premium empty state (e.g. no staff online) — looks intentional, not broken */
.mtl-empty-state {
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-card-bg, var(--mtl-surface));
}
.mtl-empty-icon { font-size: 2rem; color: var(--mtl-primary); opacity: .85; margin-bottom: 12px; display: inline-block; }
.mtl-empty-text { color: var(--mtl-text-muted); max-width: 460px; margin: 0 auto; line-height: 1.6; }

/* ---------------------------------------------------------------- Discord */
.mtl-discord-frame { border-radius: var(--mtl-radius-sm); display: block; }
.mtl-discord-cta { text-align: center; padding: 16px 0 4px; }
.mtl-discord-bigicon { font-size: 3rem; color: #5865F2; display: block; margin-bottom: 16px; }

/* ------------------------------------------------------------------- News */
.mtl-news-layout { display: grid; grid-template-columns: 280px 1fr 280px; gap: var(--mtl-gap); align-items: start; }
.mtl-news-layout.mtl-news-full { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.mtl-news-main { display: flex; flex-direction: column; gap: var(--mtl-gap); }
.mtl-news-post { padding: 24px; }
.mtl-news-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mtl-news-title { font-family: var(--mtl-font-head); font-weight: 800; font-size: 1.25rem; color: var(--mtl-heading); }
.mtl-news-date { color: var(--mtl-text-muted); font-size: .82rem; margin-left: auto; }
.mtl-news-body { color: var(--mtl-text); line-height: 1.6; }
.mtl-news-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mtl-border); }
.mtl-news-author { display: inline-flex; align-items: center; gap: 8px; }
.mtl-news-author img { width: 28px; height: 28px; border-radius: 50%; }

/* --------------------------------------------------------------- CTA bands */
.mtl-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 36px; background: linear-gradient(120deg, var(--mtl-surface-solid), var(--mtl-surface)); }
.mtl-cta-band h2 { margin: 0 0 6px; }
.mtl-cta-band p { margin: 0; color: var(--mtl-text-muted); }
.mtl-cta-accent { border-color: color-mix(in srgb, var(--mtl-accent) 40%, transparent); }

/* ------------------------------------------------------------------- FAQ */
.mtl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mtl-faq-item { padding: 0; overflow: hidden; }
.mtl-faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; font-family: var(--mtl-font-head); display: flex; justify-content: space-between; align-items: center; }
.mtl-faq-item summary::-webkit-details-marker { display: none; }
.mtl-faq-item summary i { transition: transform var(--mtl-trans); color: var(--mtl-primary); }
.mtl-faq-item[open] summary i { transform: rotate(180deg); }
.mtl-faq-answer { padding: 0 24px 22px; color: var(--mtl-text-muted); line-height: 1.6; }

/* -------------------------------------------------------------- Partners */
.mtl-partners { display: flex; flex-wrap: wrap; gap: var(--mtl-gap); justify-content: center; align-items: center; }
.mtl-partner { opacity: .65; transition: opacity var(--mtl-trans), transform var(--mtl-trans); }
.mtl-partner:hover { opacity: 1; transform: scale(1.05); }
.mtl-partner img { max-height: 60px; max-width: 160px; object-fit: contain; }

/* ---------------------------------------------------------- Inner pages */
.mtl-pagehead { border-bottom: 1px solid var(--mtl-border); background: var(--mtl-bg-alt); padding: 40px 0; margin-bottom: 28px; }
.mtl-pagehead .ui.container { max-width: var(--mtl-maxw) !important; }
.mtl-pagehead-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.mtl-content.ui.container { max-width: var(--mtl-maxw) !important; padding-bottom: 60px; }

/* ---------------------------------------------------------------- Footer */
.mtl-footer { background: var(--mtl-footer-bg, var(--mtl-bg-alt)); border-top: 1px solid var(--mtl-border); padding: 56px 0 28px; margin-top: 40px; }
.mtl-footer .ui.container { max-width: var(--mtl-maxw) !important; }
.mtl-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.mtl-footer-col h4, .mtl-footer-col h5 { color: var(--mtl-heading); margin: 0 0 16px; font-family: var(--mtl-font-head); }
.mtl-footer-logo { max-height: 44px; margin-bottom: 14px; }
.mtl-footer-slogan { color: var(--mtl-text-muted); max-width: 360px; }
.mtl-footer-links { display: flex; flex-direction: column; gap: 10px; }
.mtl-footer-links a, .mtl-footer-meta { color: var(--mtl-text-muted); text-decoration: none; transition: color var(--mtl-trans); }
.mtl-footer-links a:hover { color: var(--mtl-primary); }
.mtl-social { display: flex; gap: 12px; margin-top: 18px; }
.mtl-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--mtl-surface); border: 1px solid var(--mtl-border); color: var(--mtl-text); transition: all var(--mtl-trans); }
.mtl-social a:hover { background: var(--mtl-primary); color: #fff; transform: translateY(-3px); }
.mtl-footer-store-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; }
.mtl-footer-bottom { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--mtl-border); color: var(--mtl-text-muted); font-size: .85rem; }

/* ------------------------------------------------------------ Animations */
.mtl-section, .mtl-hero-inner > * { opacity: 1; }
.mtl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.mtl-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .mtl-reveal { opacity: 1; transform: none; transition: none; }
    .mtl-btn:hover, a.mtl-card:hover { transform: none; }
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 991px) {
    .mtl-grid-3, .mtl-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .mtl-news-layout { grid-template-columns: 1fr; }
    .mtl-news-side { order: 2; }
}
@media (max-width: 767px) {
    .mtl-menu.ui.menu .ui.dropdown.item,
    .mtl-menu.ui.menu > a.item:not(.mtl-brand):not(.toc) { display: none !important; }
    .mtl-burger { display: inline-flex !important; }
    .mtl-grid-3, .mtl-grid-4 { grid-template-columns: 1fr; }
    .mtl-ip-text { display: none; }
    .mtl-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .mtl-cta-band { flex-direction: column; text-align: center; }
    /* Header: keep the user menu compact (avatar-only) so the bar never crowds */
    .mtl-menu > .right.menu { margin-left: auto; }
    .mtl-user-name, .mtl-user-caret { display: none; }
    .mtl-user-btn.ui.label { padding: 4px !important; gap: 0; }
    .mtl-user-btn img { width: 42px !important; height: 42px !important; }
}

/* ==========================================================================
   V2 — PREMIUM ADDITIONS
   ========================================================================== */

/* ---------------------------------------------------- Hero v2: video + sizing */
.mtl-hero-medium { min-height: 420px; }
.mtl-hero-tall   { min-height: 600px; }
.mtl-hero-full   { min-height: 100vh; }

.mtl-hero-video {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.mtl-hero-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;          /* 16:9 */
    min-height: 100%; min-width: 177.77vh;  /* cover */
    transform: translate(-50%, -50%);
    border: 0;
}
.mtl-hero > .mtl-hero-overlay, .mtl-hero > .mtl-hero-inner,
.mtl-hero > .mtl-hero-glow, .mtl-hero > .mtl-hero-fade { z-index: 2; }
.mtl-hero-inner { position: relative; }

/* Overlay strengths */
.mtl-overlay-light  { background: linear-gradient(180deg, transparent, var(--mtl-bg) 98%), rgba(0,0,0,.30); }
.mtl-overlay-medium { background: linear-gradient(180deg, transparent, var(--mtl-bg) 96%), rgba(0,0,0,.50); }
.mtl-overlay-dark   { background: linear-gradient(180deg, transparent, var(--mtl-bg) 94%), rgba(0,0,0,.66); }
.mtl-overlay-darker { background: linear-gradient(180deg, transparent, var(--mtl-bg) 90%), rgba(0,0,0,.80); }

/* Bottom fade into page */
.mtl-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, transparent, var(--mtl-bg)); z-index: 2; pointer-events: none; }

/* Animated glow */
.mtl-hero-glow {
    /* Ambient glow only in the TOP half — never wash out the lower hero (logo/counters/IP).
       Strongly reduced opacity + dimmed colours so the background keeps depth, never grey/white. */
    position: absolute; inset: -10% -10% 35%; z-index: 1; pointer-events: none;
    background:
        radial-gradient(38% 38% at 22% 26%, color-mix(in srgb, var(--mtl-glow) 45%, transparent), transparent 72%),
        radial-gradient(32% 32% at 78% 30%, color-mix(in srgb, var(--mtl-secondary) 22%, transparent), transparent 72%);
    filter: blur(60px); opacity: .26;
    animation: mtl-float 14s ease-in-out infinite alternate;
}
@keyframes mtl-float { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.mtl-hero-glow-static { animation: none; }

/* Hero entrance */
.mtl-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 20px;
    border-radius: 999px; font-size: .8rem; font-weight: 600;
    color: var(--mtl-heading);
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid var(--mtl-border); backdrop-filter: blur(6px);
}
.mtl-hero-inner > * { animation: mtl-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.mtl-hero-inner > *:nth-child(2) { animation-delay: .08s; }
.mtl-hero-inner > *:nth-child(3) { animation-delay: .16s; }
.mtl-hero-inner > *:nth-child(4) { animation-delay: .24s; }
.mtl-hero-inner > *:nth-child(5) { animation-delay: .32s; }
@keyframes mtl-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.mtl-hero-ip {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
    padding: 12px 22px; border-radius: 999px; cursor: pointer; font-weight: 700;
    color: var(--mtl-heading); font-family: var(--mtl-font-head);
    background: color-mix(in srgb, #fff 7%, transparent);
    border: 1px solid var(--mtl-border); backdrop-filter: blur(8px);
    transition: transform var(--mtl-trans), background var(--mtl-trans);
}
.mtl-hero-ip:hover { transform: translateY(-2px); background: color-mix(in srgb, #fff 12%, transparent); }
.mtl-hero-ip-players { color: var(--mtl-text-muted); font-weight: 600; }

/* ------------------------------------------------- Logo Hero (giant logo) */
.mtl-hero-logo-img {
    display: block;
    width: auto;
    max-width: min(1200px, 90vw);
    max-height: 46vh;
    height: auto;
    /* NO horizontal auto-margin: when the logo is wider than the 760px content
       column, `margin:auto` collapses to 0 and left-aligns it (overflowing right →
       the off-centre bug). The stage is flex `align-items:center`, which DOES centre
       an over-wide child symmetrically — so we let flex own the horizontal centring. */
    margin: 0 0 8px;
    transform: translateX(var(--mtl-hero-offset-x, 0px)) scale(var(--mtl-hero-logo-scale, 1));
    transform-origin: center;
    filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px var(--mtl-glow));
    animation: mtl-logo-in 1s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mtl-logo-in {
    from { opacity: 0; transform: translateX(var(--mtl-hero-offset-x, 0px)) scale(calc(var(--mtl-hero-logo-scale, 1) * .82)); filter: drop-shadow(0 0 0 transparent); }
    to   { opacity: 1; transform: translateX(var(--mtl-hero-offset-x, 0px)) scale(var(--mtl-hero-logo-scale, 1)); }
}
/* Secondary title under a logo hero is smaller, not the dominant element */
.mtl-hero-title-sub { font-size: clamp(1.2rem, 2.6vw, 1.9rem) !important; margin: 6px 0 0 !important; -webkit-text-fill-color: initial; background: none; color: var(--mtl-heading); }

@media (max-width: 991px) { .mtl-hero-logo-img { max-width: min(900px, 90vw); } }
@media (max-width: 767px) { .mtl-hero-logo-img { max-width: 90vw; max-height: 38vh; } }

/* ------------------------------------------------------- Status dot */
.mtl-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #888; }
.mtl-status-online  { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.18); animation: mtl-pulse 2s infinite; }
.mtl-status-offline { background: #e74c3c; box-shadow: 0 0 0 4px rgba(231,76,60,.18); }
.mtl-status-loading { background: #f1c40f; animation: mtl-pulse 1s infinite; }

/* ------------------------------------------------- Live server status block */
.mtl-serverstatus { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
.mtl-ss-icon { position: relative; width: 72px; height: 72px; }
.mtl-ss-icon img { width: 72px; height: 72px; border-radius: 14px; image-rendering: pixelated; background: var(--mtl-bg); object-fit: cover; }
.mtl-ss-icon .mtl-status-dot { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border: 2px solid var(--mtl-surface-solid); }
.mtl-ss-line1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mtl-ss-state { font-family: var(--mtl-font-head); font-weight: 800; font-size: 1.2rem; color: var(--mtl-heading); }
.mtl-ss-version { color: var(--mtl-text-muted); font-size: .85rem; }
.mtl-ss-motd { color: var(--mtl-text-muted); margin: 6px 0 10px; font-size: .92rem; min-height: 1.2em; }
.mtl-ss-ip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mtl-ss-ip code { background: var(--mtl-bg); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--mtl-border); color: var(--mtl-text); }
.mtl-ss-players { text-align: center; min-width: 150px; }
.mtl-ss-count { font-family: var(--mtl-font-head); font-weight: 900; font-size: 2rem; color: var(--mtl-primary); }
.mtl-ss-count small { color: var(--mtl-text-muted); font-size: 1rem; font-weight: 600; }
.mtl-ss-bar { height: 8px; border-radius: 999px; background: var(--mtl-bg); overflow: hidden; margin: 8px 0 6px; border: 1px solid var(--mtl-border); }
.mtl-ss-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mtl-primary), var(--mtl-secondary)); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.mtl-ss-label { color: var(--mtl-text-muted); font-size: .8rem; }
.mtl-ss-software { color: var(--mtl-text-muted); font-size: .8rem; padding: 2px 8px; border: 1px solid var(--mtl-border); border-radius: 999px; }
.mtl-ss-ping { color: #2ecc71; font-size: .8rem; font-weight: 600; }
.mtl-ss-heads { margin-top: 14px; }
.mtl-ss-heads-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mtl-text-muted); margin-bottom: 8px; }
.mtl-ss-heads-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mtl-ss-heads-list img { width: 30px; height: 30px; border-radius: 6px; image-rendering: pixelated; border: 1px solid var(--mtl-border); background: var(--mtl-bg); transition: transform var(--mtl-trans); }
.mtl-ss-heads-list img:hover { transform: translateY(-3px) scale(1.1); }
.mtl-ss-heads-more { align-self: center; color: var(--mtl-text-muted); font-size: .8rem; font-weight: 600; padding-left: 4px; }

/* ----------------------------------------------------------- Gallery */
.mtl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mtl-shot { position: relative; margin: 0; border-radius: var(--mtl-radius-sm); overflow: hidden; cursor: pointer; aspect-ratio: 16/10; border: 1px solid var(--mtl-border); }
.mtl-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--mtl-trans); display: block; }
.mtl-shot:hover img { transform: scale(1.08); }
.mtl-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; font-size: .85rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.mtl-shot-zoom { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity var(--mtl-trans); }
.mtl-shot:hover .mtl-shot-zoom { opacity: 1; }

.mtl-lightbox { position: fixed; inset: 0; z-index: 9998; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.88); padding: 30px; }
.mtl-lightbox.is-open { display: flex; }
.mtl-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.mtl-lightbox-cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #fff; }
.mtl-lightbox-close { position: absolute; top: 18px; right: 24px; font-size: 2rem; color: #fff; cursor: pointer; background: none; border: 0; }

/* ----------------------------------------------------- Discord modern */
.mtl-discord { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, #5865F2 14%, var(--mtl-surface-solid)), var(--mtl-surface)); }
.mtl-discord-glyph { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: #5865F2; box-shadow: 0 10px 30px rgba(88,101,242,.4); }
.mtl-discord-presence { display: flex; align-items: center; gap: 8px; font-family: var(--mtl-font-head); font-size: 1.15rem; }
.mtl-discord-presence strong { color: var(--mtl-heading); }
.mtl-discord-text { color: var(--mtl-text-muted); margin: 6px 0 0; }

/* ===================================================================
   FORUM + MEMBERS REFONTE — restyle NamelessMC DOM with the MTL system
   (no template rewrites needed; group colours are preserved inline)
   =================================================================== */
body.mtl-theme.dark .ui.segment,
body.mtl-theme.dark .ui.card,
body.mtl-theme.dark .ui.attached.segment,
body.mtl-theme.dark .ui.comments .comment .text {
    background: var(--mtl-surface) !important;
    border: 1px solid var(--mtl-border) !important;
    border-radius: var(--mtl-radius-sm) !important;
    color: var(--mtl-text) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
}
body.mtl-theme.dark .ui.header,
body.mtl-theme.dark h1, body.mtl-theme.dark h2,
body.mtl-theme.dark h3, body.mtl-theme.dark h4 { color: var(--mtl-heading) !important; }

/* Forum index / node rows */
body.mtl-theme.dark #forum-node,
body.mtl-theme.dark .forum-category {
    background: var(--mtl-surface) !important;
    border: 1px solid var(--mtl-border) !important;
    border-radius: var(--mtl-radius) !important;
    overflow: hidden;
}
body.mtl-theme.dark #forum-node .row,
body.mtl-theme.dark #forum-node .item { border-color: var(--mtl-border) !important; transition: background var(--mtl-trans); }
body.mtl-theme.dark #forum-node .row:hover { background: var(--mtl-surface-solid) !important; }

/* Thread tables */
body.mtl-theme.dark #sticky-threads, body.mtl-theme.dark #normal-threads,
body.mtl-theme.dark table.ui.table { background: transparent !important; border-color: var(--mtl-border) !important; }
body.mtl-theme.dark table.ui.table thead th { background: var(--mtl-surface-solid) !important; color: var(--mtl-text-muted) !important; border-color: var(--mtl-border) !important; }
body.mtl-theme.dark table.ui.table tbody tr { transition: background var(--mtl-trans); }
body.mtl-theme.dark table.ui.table tbody tr:hover { background: var(--mtl-surface) !important; }
body.mtl-theme.dark table.ui.table td { border-color: var(--mtl-border) !important; }

/* Topic view */
body.mtl-theme.dark #topic-post, body.mtl-theme.dark #topic-reply {
    background: var(--mtl-surface) !important; border: 1px solid var(--mtl-border) !important;
    border-radius: var(--mtl-radius) !important;
}
body.mtl-theme.dark #post-sidebar, body.mtl-theme.dark #reply-sidebar { border-right: 1px solid var(--mtl-border) !important; }

/* Inputs */
body.mtl-theme.dark .ui.form input:not([type=submit]):not(.button),
body.mtl-theme.dark .ui.form textarea,
body.mtl-theme.dark .ui.selection.dropdown,
body.mtl-theme.dark .ui.input input {
    background: var(--mtl-bg) !important; color: var(--mtl-text) !important; border: 1px solid var(--mtl-border) !important; border-radius: 10px !important;
}

/* Members page cards */
body.mtl-theme.dark #members .card,
body.mtl-theme.dark .member-card,
body.mtl-theme.dark #members .ui.segment {
    background: var(--mtl-surface) !important; border: 1px solid var(--mtl-border) !important; border-radius: var(--mtl-radius) !important;
    transition: transform var(--mtl-trans), border-color var(--mtl-trans);
}
body.mtl-theme.dark #members .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--mtl-primary) 50%, transparent) !important; }

/* Profile header */
body.mtl-theme.dark #profile-header.ui.segment {
    background: linear-gradient(120deg, var(--mtl-surface-solid), var(--mtl-surface)) !important;
    border: 1px solid var(--mtl-border) !important; border-radius: var(--mtl-radius) !important;
}

/* Pagination + secondary buttons */
body.mtl-theme.dark .ui.pagination.menu { background: var(--mtl-surface) !important; border: 1px solid var(--mtl-border) !important; }
body.mtl-theme.dark .ui.pagination.menu .item { color: var(--mtl-text) !important; }
body.mtl-theme.dark .ui.pagination.menu .active.item { background: var(--mtl-primary) !important; color: #fff !important; }

/* Group colours: keep NamelessMC inline styles authoritative.
   We only add a subtle pill around group labels, never override their colour. */
body.mtl-theme.dark .ui.label[style*="color"],
body.mtl-theme.dark .user-group,
body.mtl-theme.dark span[style*="color"].rank,
body.mtl-theme.dark .groups .label {
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important;
    border-radius: 999px !important; padding: 2px 10px !important; font-weight: 700;
}

/* ----------------------------------------------------- Count-up + reveal stagger */
.mtl-home .mtl-section.mtl-reveal:nth-child(even) { transition-delay: .05s; }

/* ------------------------------------------------------------- Responsive v2 */
@media (max-width: 991px) {
    .mtl-gallery { grid-template-columns: repeat(2, 1fr); }
    .mtl-serverstatus { grid-template-columns: auto 1fr; }
    .mtl-ss-players { grid-column: 1 / -1; }
    .mtl-discord { grid-template-columns: auto 1fr; }
    .mtl-discord-action { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .mtl-gallery { grid-template-columns: 1fr 1fr; }
    .mtl-serverstatus, .mtl-discord { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .mtl-hero-full { min-height: 88vh; }
}

/* ==========================================================================
   V2.3 — hero quick links + native pages (Vote / Rules / Wiki)
   ========================================================================== */

/* Hero quick links (replace the old CTA) */
.mtl-hero-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.mtl-hero-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    font-family: var(--mtl-font-head); font-weight: 700; font-size: .85rem; text-decoration: none;
    color: var(--mtl-heading); background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid var(--mtl-border); backdrop-filter: blur(8px); transition: transform var(--mtl-trans), background var(--mtl-trans);
}
.mtl-hero-link:hover { transform: translateY(-2px); background: var(--mtl-primary); color: #fff; }

/* Logo hero: dominant logo, 70–80% on desktop */
.mtl-hero-logo-img { max-width: min(1100px, 80vw); }
@media (max-width: 991px) { .mtl-hero-logo-img { max-width: min(820px, 88vw); } }
@media (max-width: 767px) { .mtl-hero-logo-img { max-width: 90vw; } }

/* Compact page hero (shared by Vote / Rules / Wiki) */
.mtl-pagehero { position: relative; padding: calc(40px + var(--mtl-navh)) 20px 48px; text-align: center; background: linear-gradient(180deg, var(--mtl-bg-alt), var(--mtl-bg)); overflow: hidden; }
.mtl-pagehero::before { content: ""; position: absolute; inset: -30% 0 auto 0; height: 280px; background: radial-gradient(50% 80% at 50% 0, var(--mtl-glow), transparent 70%); opacity: .6; }
.mtl-pagehero-inner { position: relative; max-width: 760px; }
.mtl-pagehero-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 20px; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--mtl-primary), var(--mtl-secondary)); box-shadow: 0 10px 30px var(--mtl-glow); }
.mtl-pagehero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 10px; }
.mtl-pagehero p { color: var(--mtl-text-muted); font-size: 1.05rem; margin: 0 auto; max-width: 620px; }

/* Vote cards */
.mtl-vote-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mtl-vote-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; font-size: 1.5rem; color: var(--mtl-primary); background: var(--mtl-surface); border: 1px solid var(--mtl-border); }
.mtl-vote-card h3 { margin: 0; }
.mtl-vote-reward { color: var(--mtl-text-muted); font-size: .9rem; }
.mtl-vote-card .mtl-btn { margin-top: auto; }

/* Rules accordion */
.mtl-rules { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mtl-rules-cat { padding: 0; }
.mtl-rules-cat summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.mtl-rules-cat summary::-webkit-details-marker { display: none; }
.mtl-rules-cat-title { font-family: var(--mtl-font-head); font-weight: 800; font-size: 1.1rem; color: var(--mtl-heading); display: inline-flex; align-items: center; gap: 10px; }
.mtl-rules-cat-title i { color: var(--mtl-primary); }
.mtl-rules-chev { color: var(--mtl-text-muted); transition: transform var(--mtl-trans); }
.mtl-rules-cat[open] .mtl-rules-chev { transform: rotate(180deg); }
.mtl-rules-list { margin: 0; padding: 0 24px 20px 44px; color: var(--mtl-text); }
.mtl-rules-list li { margin: 8px 0; line-height: 1.5; }


/* ==========================================================================
   V2.4 — MODULE COMPATIBILITY (Vote / Rules — styled module front pages)
   ========================================================================== */

/* Shared module-page layout (content + optional widget sidebars) */
.mtl-modpage { padding-top: var(--mtl-section-pad, 56px); }
.mtl-modlayout { display: grid; grid-template-columns: 1fr 280px; gap: var(--mtl-gap); align-items: start; }
.mtl-modlayout:has(.mtl-modside:first-child) { grid-template-columns: 280px 1fr; }
.mtl-modlayout.mtl-modlayout-full { grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; }
.mtl-modmain { min-width: 0; }
.mtl-modside { display: flex; flex-direction: column; gap: var(--mtl-gap); }

/* --- Vote --- */
.mtl-vote-message { margin-bottom: var(--mtl-gap); color: var(--mtl-text); }
.mtl-vote-grid { }
.mtl-vote-site {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    padding: 20px 22px; font-family: var(--mtl-font-head); font-weight: 700;
}
.mtl-vote-site-icon {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px;
    font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--mtl-primary), var(--mtl-secondary));
    box-shadow: 0 8px 22px var(--mtl-glow);
}
.mtl-vote-site-name { color: var(--mtl-heading); flex: 1; }
.mtl-vote-site-go { color: var(--mtl-text-muted); font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; transition: color var(--mtl-trans), transform var(--mtl-trans); }
.mtl-vote-site:hover .mtl-vote-site-go { color: var(--mtl-primary); transform: translateX(3px); }

/* --- Rules (keeps Fomantic tabs, restyled) --- */
.mtl-rules-card { padding: 0; overflow: hidden; }
.mtl-rules-tabs.ui.tabular.menu { border: none !important; background: var(--mtl-bg-alt) !important; margin: 0 !important; padding: 8px 8px 0; flex-wrap: wrap; }
.mtl-rules-tabs.ui.tabular.menu .item {
    color: var(--mtl-text-muted) !important; border: 1px solid transparent !important; border-radius: 10px 10px 0 0 !important;
    font-family: var(--mtl-font-head); font-weight: 700; margin: 0 2px -1px !important;
}
.mtl-rules-tabs.ui.tabular.menu .item.active {
    background: var(--mtl-surface-solid) !important; color: var(--mtl-heading) !important;
    border-color: var(--mtl-border) !important; border-bottom-color: var(--mtl-surface-solid) !important;
}
.mtl-rules-pane.ui.segment {
    background: var(--mtl-surface-solid) !important; border: 1px solid var(--mtl-border) !important;
    border-radius: 0 !important; color: var(--mtl-text) !important; box-shadow: none !important; margin: 0 !important;
}
.mtl-rules-content { line-height: 1.7; }
.mtl-rules-content :is(h1,h2,h3,h4) { color: var(--mtl-heading); }
.mtl-rules-content a { color: var(--mtl-secondary); }
.mtl-rules-buttons { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 991px) {
    .mtl-modlayout, .mtl-modlayout:has(.mtl-modside:first-child) { grid-template-columns: 1fr; }
    .mtl-modside { order: 2; }
}
@media (max-width: 767px) {
    .mtl-vote-grid.mtl-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V2.4 (Vague 2) — Tebex / Store / Core widgets  (Fomantic kept, restyled)
   Scoped to body.mtl-theme.dark so the admin panel is never affected.
   ========================================================================== */

/* Store/Tebex page wrappers (segments holding the menu + products) */
body.mtl-theme.dark .ui.padded.segment,
body.mtl-theme.dark .ui.attached.segment,
body.mtl-theme.dark .ui.top.attached.menu,
body.mtl-theme.dark .ui.bottom.attached.segment {
    background: var(--mtl-surface) !important;
    border-color: var(--mtl-border) !important;
    color: var(--mtl-text) !important;
}
body.mtl-theme.dark .ui.top.attached.menu .item { color: var(--mtl-text-muted) !important; }
body.mtl-theme.dark .ui.top.attached.menu .active.item { color: var(--mtl-primary) !important; }
body.mtl-theme.dark .ui.menu .ui.dropdown .menu { background: var(--mtl-surface-solid) !important; border: 1px solid var(--mtl-border) !important; }

/* Product cards (Tebex packages + Store products + Featured widgets) */
body.mtl-theme.dark .ui.card {
    transition: transform var(--mtl-trans), border-color var(--mtl-trans), box-shadow var(--mtl-trans);
}
body.mtl-theme.dark .ui.card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--mtl-primary) 55%, transparent) !important;
    box-shadow: var(--mtl-shadow) !important;
}
body.mtl-theme.dark .ui.card .header,
body.mtl-theme.dark .ui.card .content > .header { color: var(--mtl-heading) !important; }

/* "Buy" / primary action buttons → MTL gradient */
body.mtl-theme.dark .ui.button.blue,
body.mtl-theme.dark .ui.button.primary,
body.mtl-theme.dark .ui.bottom.attached.button:not(.red):not(.green),
body.mtl-theme.dark .ui.positive.button {
    background: linear-gradient(135deg, var(--mtl-primary), var(--mtl-secondary)) !important;
    color: #fff !important;
}
body.mtl-theme.dark .ui.button.blue:hover,
body.mtl-theme.dark .ui.bottom.attached.button:not(.red):not(.green):hover { filter: brightness(1.08); }

/* SALE ribbon → accent colour */
body.mtl-theme.dark .ui.ribbon.label,
body.mtl-theme.dark .ui.red.ribbon.label {
    background: var(--mtl-accent) !important; color: #07121a !important; border-color: transparent !important;
}

/* Store navbar (cart + categories bar) */
body.mtl-theme.dark .ui.buttons .ui.button { border-radius: 10px !important; }

/* ------------------------------------------------- Core widgets (sidebar) */
body.mtl-theme.dark [id^="widget-"].ui.card,
body.mtl-theme.dark .ui.fluid.card[id^="widget-"] {
    background: var(--mtl-surface) !important;
    border: 1px solid var(--mtl-border) !important;
    border-radius: var(--mtl-radius) !important;
    backdrop-filter: blur(10px);
}
body.mtl-theme.dark [id^="widget-"] .ui.header,
body.mtl-theme.dark [id^="widget-"] h4 { color: var(--mtl-heading) !important; }
body.mtl-theme.dark [id^="widget-"] .ui.list .item,
body.mtl-theme.dark [id^="widget-"] .ui.relaxed.list .item { color: var(--mtl-text) !important; }
body.mtl-theme.dark [id^="widget-"] .ui.divider { border-color: var(--mtl-border) !important; }
body.mtl-theme.dark [id^="widget-"] img.ui.image,
body.mtl-theme.dark [id^="widget-"] .ui.avatar.image,
body.mtl-theme.dark [id^="widget-"] .ui.circular.image { border: 1px solid var(--mtl-border); }
/* Online status dots inside Server Status / Online widgets keep their colours */
body.mtl-theme.dark #widget-online-staff .ui.list .item .content .badge,
body.mtl-theme.dark #widget-online-users .ui.image.label { background: var(--mtl-surface-solid) !important; }

/* Discord widget container (Core Discord widget renders an iframe/card) */
body.mtl-theme.dark #widget-discord .ui.card,
body.mtl-theme.dark iframe[src*="discord.com/widget"] { border-radius: var(--mtl-radius-sm) !important; }

/* ==========================================================================
   V3 HERO — giant floating logo + side counters
   ========================================================================== */
.mtl-hero-v3-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mtl-hero-stage { display: flex; flex-direction: column; align-items: center; }

/* Floating logo animation (keeps the admin scale slider value) */
@keyframes mtl-hero-float {
    0%, 100% { transform: translateX(var(--mtl-hero-offset-x, 0px)) translateY(0) scale(var(--mtl-hero-logo-scale, 1)); }
    50%      { transform: translateX(var(--mtl-hero-offset-x, 0px)) translateY(-14px) scale(var(--mtl-hero-logo-scale, 1)); }
}
.mtl-hero-logo-img.mtl-hero-floating {
    animation: mtl-logo-in 1s cubic-bezier(.2, .8, .2, 1) both,
               mtl-hero-float 4.5s ease-in-out 1.1s infinite;
}

/* Side counters — readable on any background (darker glass + text shadow) */
.mtl-hero-counter {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 18px 26px; min-width: 150px; border-radius: var(--mtl-radius);
    background: color-mix(in srgb, var(--mtl-bg) 62%, transparent);
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 14px 38px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.mtl-hero-counter-num {
    font-family: var(--mtl-font-head); font-weight: 900; font-size: 2.1rem;
    color: #fff; display: inline-flex; align-items: center; gap: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 14px var(--mtl-glow);
    line-height: 1;
}
.mtl-hero-counter-right .mtl-hero-counter-num i { color: #8b94ff; }
.mtl-hero-counter-label {
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.82); text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* IP pill under the logo (copy) */
.mtl-hero-ip .mtl-hero-ip-copy { color: var(--mtl-text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mtl-hero-ip:hover .mtl-hero-ip-copy { color: var(--mtl-primary); }

@media (prefers-reduced-motion: reduce) {
    .mtl-hero-logo-img.mtl-hero-floating { animation: mtl-logo-in 1s ease both; }
}

/* Mobile/tablet: normal flow — logo first, counters stacked below.
   The homepage navbar overlap needs top clearance here (desktop centres optically). */
@media (max-width: 991px) {
    .mtl-hero-counter { min-width: 120px; padding: 12px 18px; }
    .mtl-hero-stage { order: 1; }
    .mtl-hero-counter-left  { order: 2; }
    .mtl-hero-counter-right { order: 3; }
    body#page-index .mtl-hero .mtl-hero-inner { padding-top: calc(48px + var(--mtl-navh)); }
}

/* Desktop: OPTICAL centering.
   The stage (logo + title + IP + CTA) is absolutely centred to the hero width;
   counters float independently on each side and never influence the centre —
   the logo stays strictly centred with 0, 1 or 2 counters. */
@media (min-width: 992px) {
    /* The hero (full viewport width) centres its content via flexbox. The inner
       is NOT a positioning context, so the counters anchor to .mtl-hero (the full
       hero) and float at the viewport edges — they can't shift the centre. */
    .mtl-hero { justify-content: center; }
    .mtl-hero-v3-inner {
        position: static;
        display: block;
        width: 100%; max-width: 760px !important;   /* content column, centred by the hero flex */
        margin: 0 auto !important; padding: 0 20px;
    }
    .mtl-hero-stage { position: static; transform: none; width: 100%; }
    .mtl-hero-counter { position: absolute; top: 50%; transform: translateY(-50%); }
    .mtl-hero-counter-left  { left: clamp(24px, 5vw, 140px); }
    .mtl-hero-counter-right { right: clamp(24px, 5vw, 140px); }
}

/* RC25 — a more dominant, less "zoomed-out" hero on desktop (visual only, ≥992px;
   mobile/tablet untouched). Logo ~+35%, IP pill ~+20%, CTA ~+20%, tighter vertical rhythm. */
@media (min-width: 992px) {
    .mtl-hero-v3 .mtl-hero-logo-img { max-width: min(1500px, 90vw); max-height: 60vh; }
    .mtl-hero-v3 .mtl-hero-v3-inner { gap: 12px; }
    .mtl-hero-v3 .mtl-hero-ip { margin-top: 18px; padding: 15px 30px; font-size: 1.15rem; gap: 12px; }
    .mtl-hero-v3 .mtl-hero-ip + .mtl-hero-actions:has(*) { margin-top: 24px; }
    .mtl-hero-v3 .mtl-btn.mtl-btn-lg { padding: 17px 40px; font-size: 1.2rem; }
    .mtl-hero-v3 .mtl-hero-link { padding: 12px 22px; font-size: 1.02rem; }
}

/* ==========================================================================
   RC17 — Navbar primary item (CTA) + brand-hidden + header polish
   ========================================================================== */
/* Store CTA — an independent commercial button moved into the RIGHT group (by JS).
   ONE colour drives everything: background = Store CTA colour (→ accent → primary);
   border, glow and hover are all DERIVED from it. Descendant selector so it styles
   correctly wherever it lives (right group, or centre as a graceful fallback). */
.mtl-menu a.item.mtl-nav-primary {
    --cta: var(--mtl-navcta-bg, var(--mtl-accent, var(--mtl-primary)));
    background: var(--cta) !important;
    color: var(--mtl-navcta-text, #fff) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    border: 1px solid var(--cta) !important;
    border-radius: 999px;
    padding: 10px 22px !important;
    margin: 0 !important;
    font-family: var(--mtl-font-head);
    font-size: var(--mtl-navbar-link-size, 22px);
    font-weight: 800 !important;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--cta) 48%, transparent) !important;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.mtl-menu a.item.mtl-nav-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--cta) 60%, transparent) !important;
}
.mtl-menu a.item.mtl-nav-primary i { color: var(--mtl-navcta-text, #fff) !important; }
/* custom.css dark-mode rule `body.dark .ui.secondary.menu .item:not(.active)` has specificity
   (0,6,1) and overrides the rule above (0,3,1). Beat it with (0,6,2) to enforce the setting. */
body.dark .ui.secondary.menu a.item.mtl-nav-primary {
    color: var(--mtl-navcta-text, #fff) !important;
}
body.dark .ui.secondary.menu a.item.mtl-nav-primary i {
    color: var(--mtl-navcta-text, #fff) !important;
}
.mtl-menu a.item.mtl-nav-primary::after { display: none !important; } /* pill, no underline */
.mtl-more .menu a.item.mtl-nav-primary { /* if it ever lands in More, render flat */
    background: transparent !important; color: var(--mtl-accent, var(--mtl-primary)) !important; box-shadow: none; border: 0 !important; border-radius: 0; padding: 10px 16px !important;
}
/* Keep the right-group Store CTA off mobile (it remains reachable in the burger menu). */
@media (max-width: 767px) { .mtl-nav-right > .mtl-nav-primary { display: none !important; } }

/* Brand hidden: first nav link aligns flush-left, no orphan gap. */
.mtl-menu.mtl-no-brand > .item:first-of-type { padding-left: 0; }

/* Header polish: consistent slot rhythm + icon sizing for IP/Discord/Social/User. */
.mtl-menu .mtl-hslot i { line-height: 1; }
.mtl-menu .mtl-hslot-social a + a { margin-left: 10px; }
.mtl-menu .mtl-hslot-discord,
.mtl-menu .mtl-hslot-social a { font-size: 1.05rem; opacity: .85; transition: opacity .2s ease, color .2s ease; }
.mtl-menu .mtl-hslot-discord:hover,
.mtl-menu .mtl-hslot-social a:hover { opacity: 1; color: var(--mtl-primary); }

/* ----------------------------------------------------- Footer premium accent */
.mtl-footer { position: relative; }
.mtl-footer::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--mtl-primary), var(--mtl-secondary), var(--mtl-accent));
    opacity: .9;
}