:root {
    --atlans-bg: #162020;
    --atlans-panel: #142526;
    --atlans-panel-dark: #101d1e;
    --atlans-line: #20393a;
    --atlans-accent: #1c919d;
    --atlans-accent-soft: #133538;
    --atlans-text: #97b7b7;
    --atlans-muted: #6c8989;
    --atlans-gold: #ffda8a;
    --success: #60d687;
    --danger: #ff9999;
}

* { box-sizing: border-box; }
html { min-width: 0 !important; height: auto; }
body {
    min-height: 100vh;
    height: auto;
    font-family: "Segoe UI", "PT Sans", Arial, sans-serif;
    line-height: 1.55;
}
a, button, input { font: inherit; }
button { cursor: pointer; }

.global-top-bar { padding: 8px 16px; }
.global-top-bar-content {
    width: 100% !important;
    max-width: 1040px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-account { display: flex; align-items: center; }
.inline-form { display: inline; margin: 0; }
.inline-form button {
    border: 0;
    padding: 0;
    color: #999;
    background: transparent;
    text-transform: uppercase;
}
.inline-form button:hover { color: #fff; }

#header {
    position: relative;
    min-height: 365px;
    padding: 72px 0 20px;
}
#header > a { display: inline-block; }
.webengine-mu-logo { width: 290px; max-width: 70vw; }
.header-info-container {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: min(1040px, calc(100% - 32px)) !important;
    transform: translateX(-50%);
}
.header-info-container .header-info {
    width: 340px !important;
    max-width: 100%;
    padding: 16px 18px !important;
}
.header-info-status { display: flex; justify-content: space-between; align-items: center; }
.header-info-status strong { font-size: 17px; letter-spacing: .04em; }
.server-state { font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.server-state.is-online, .text-online { color: var(--success) !important; }
.server-state.is-offline, .text-offline { color: var(--danger) !important; }
.webengine-online-bar-progress { width: 100%; }
.server-state small { margin-left: 4px; color: #b8cbe4; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
#server-online-progress { width: 0; transition: width .35s ease; }
.webengine-online-bar-progress.offline-progress { width: 4%; background: #a33 !important; }
.header-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.header-info-grid span { color: #aaa; font-size: 11px; text-transform: uppercase; }
.header-info-grid b { color: #fff; font-size: 13px; font-weight: 600; }

#navbar { position: relative; z-index: 20; }
#navbar ul li a { position: relative; padding: 20px 25px; }
#navbar ul li a.active { color: #fff !important; }
#navbar ul li a.active::after {
    position: absolute;
    right: 24px;
    bottom: -1px;
    left: 24px;
    height: 3px;
    content: "";
    background: var(--atlans-accent);
}
#navbar ul li a.nav-register { color: #77d8df !important; }
.nav-toggle { display: none; }

#container { width: min(1040px, calc(100% - 32px)); }
#content { padding: 10px 20px 20px; overflow: visible; }
.site-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 25px; }
.main-column, .sidebar { min-width: 0; }
.sidebar-banner { display: block; }
.sidebar-banner img { display: block; width: 100%; }

.panel {
    margin-bottom: 22px;
    color: var(--atlans-muted);
    background: var(--atlans-panel);
}
.panel-heading { padding: 13px 15px; }
.panel-body { padding: 18px; }
.panel-footer { padding: 11px 15px; }
.panel-title { margin: 0; }
.panel-general { border: 1px solid var(--atlans-line); }
.panel-general h2, .panel-general h3 { color: var(--atlans-text); }
.panel-general p { margin-top: 0; }
.panel-sidebar { border: 1px solid rgba(32,57,58,.35); }
.panel-sidebar > .panel-heading { padding: 12px 14px; }
.panel-sidebar > .panel-heading .panel-title { font-size: 16px; }
.panel-sidebar .panel-body { padding: 15px; }

.welcome-panel {
    position: relative;
    min-height: 310px;
    margin-bottom: 28px;
    padding: 40px 38px;
    overflow: hidden;
    border: 1px solid var(--atlans-line);
    background:
        linear-gradient(90deg, rgba(10,25,26,.97) 0%, rgba(10,25,26,.84) 56%, rgba(10,25,26,.2) 100%),
        url("/assets/atlans/img/castle_owner_bg.jpg") center right / cover no-repeat;
}
.welcome-panel::after {
    position: absolute;
    top: -85px;
    right: -70px;
    width: 230px;
    height: 230px;
    content: "";
    border: 1px solid rgba(28,145,157,.2);
    border-radius: 50%;
    box-shadow: 0 0 70px rgba(28,145,157,.15);
}
.eyebrow { margin: 0 0 10px; color: var(--atlans-accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.welcome-panel h1 { position: relative; z-index: 1; max-width: 570px; margin: 0 0 17px; color: #efffff; font-size: clamp(29px, 4.1vw, 46px); line-height: 1.08; }
.welcome-panel h1 span { color: #70c4ca; }
.welcome-panel > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 540px; color: #8eabab; }
.welcome-actions, .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.btn {
    display: inline-block;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 0;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: .15s ease;
}
.btn-primary { color: #55c3cc !important; background: transparent; border-color: var(--atlans-accent); }
.btn-primary:hover, .btn-primary:focus { color: #fff !important; background: var(--atlans-accent); }
.btn-secondary { color: #b3c4c4 !important; background: rgba(255,255,255,.04); border-color: #3b5051; }
.btn-secondary:hover { color: #fff !important; border-color: #7c999a; }

.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 16px; }
.section-title h2 { margin: 0; color: var(--atlans-text); font-size: 22px; }
.section-title span { color: #4e696a; font-size: 11px; text-transform: uppercase; }
.news-heading { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.news-type { padding: 4px 7px; color: #5cb6be; border: 1px solid var(--atlans-accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.panel-news .panel-title { font-size: 21px; }
.panel-news .panel-body p { margin: 0; }

.page-title { margin-top: 0; font-size: 31px; }
.form-intro { margin-bottom: 23px; }
.site-form { display: grid; gap: 16px; }
.site-form label { display: grid; gap: 6px; color: #a7bebe; font-weight: 700; }
.site-form label small { color: #587576; font-size: 11px; font-weight: 400; }
.form-control {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 0;
    outline: none;
}
.form-control:focus { border-color: var(--atlans-accent) !important; box-shadow: 0 0 0 2px rgba(28,145,157,.12); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.short-input { max-width: 180px; }
.checkbox-row { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; }
.checkbox-row input { margin-top: 5px; accent-color: var(--atlans-accent); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.narrow-panel { max-width: 530px; }
.panel-note { margin: 18px 0 0 !important; font-size: 12px; }

.alert { margin-bottom: 20px; padding: 13px 15px; border: 1px solid; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert-success { color: #d5ffd6; background: #244d34; border-color: #4d8c60; }
.alert-error { color: #ffdada; background: #4b2929; border-color: #704747; }
.security-note { margin: 22px 0 0 !important; padding: 12px; color: #8faaaa; border-left: 3px solid var(--atlans-accent); background: #102021; }

.info-table, .sidebar-table { width: 100%; border-collapse: collapse; }
.info-table { margin-top: 22px; }
.info-table td, .sidebar-table td { padding: 10px 7px; border-bottom: 1px solid var(--atlans-line); }
.info-table td:last-child, .sidebar-table td:last-child { color: #bdd0d0; font-weight: 700; text-align: right; }
.info-table tr:last-child td, .sidebar-table tr:last-child td { border-bottom: 0; }
.account-card h2 { margin-top: 0; color: #d6e8e8; }

.download-card { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center; }
.download-card img { width: 100%; border-radius: 4px; }
.download-card h2 { margin-top: 0; }
.download-badge { display: inline-block; margin-bottom: 8px; padding: 5px 9px; color: #77e4eb; background: rgba(37, 178, 190, .12); border: 1px solid rgba(37, 178, 190, .45); border-radius: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.download-badge-secondary { color: #d3bc81; background: rgba(176, 137, 56, .12); border-color: rgba(176, 137, 56, .45); }
.patch-download-card { display: flex; gap: 22px; align-items: center; justify-content: space-between; }
.patch-download-card h2 { margin: 5px 0 8px; }
.patch-download-card p { margin-bottom: 0; }
.patch-download-card .btn { flex: 0 0 auto; }
.downloads-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.downloads-guides .panel { margin-bottom: 18px; }
.downloads-guides h3, .download-help h3 { margin-top: 0; }
.downloads-guides code { overflow-wrap: anywhere; color: #75d8df; }
.download-help p:last-child { margin-bottom: 0; }
.steps-list { margin: 0; padding-left: 22px; }
.steps-list li { margin: 9px 0; padding-left: 4px; }

.table-scroll { overflow-x: auto; }
.rankings-table th { padding: 10px; color: var(--atlans-accent); border-bottom: 2px solid var(--atlans-accent); text-align: center; }
.rankings-table td:nth-child(2) { min-width: 170px; }
.rankings-table td:nth-child(2) img { margin-right: 8px; vertical-align: middle; }
.rankings-table td:nth-child(2) .class-name { vertical-align: middle; font-size: 12px; }
.empty-state { padding: 50px 20px; color: #6f8a8b; text-align: center; }

.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-cards article { padding: 20px; border: 1px solid var(--atlans-line); background: var(--atlans-panel-dark); }
.feature-cards h3 { margin: 0 0 9px; color: var(--atlans-accent); font-size: 16px; }
.feature-cards p { margin: 0; font-size: 12px; }
.rules-list { margin: 0; padding-left: 25px; }
.rules-list li { margin-bottom: 22px; padding-left: 8px; color: var(--atlans-accent); }
.rules-list b { color: #b4caca; }
.rules-list p { margin: 5px 0 0; color: var(--atlans-muted); }

.sidebar-login { display: grid; gap: 10px; }
.sidebar-login .btn { justify-self: start; }
.user-welcome { margin-top: 0; }
.event-list { padding-top: 5px !important; padding-bottom: 5px !important; }
.event-list div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--atlans-line); }
.event-list div:last-child { border-bottom: 0; }
.event-list b { color: #91b1b2; }
.event-list span { color: #b28649; font-size: 11px; }
.mini-ranking { padding: 4px 15px !important; }
.mini-ranking a { display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--atlans-line); }
.mini-ranking a:last-child { border-bottom: 0; }
.mini-ranking a span { color: var(--atlans-accent); font-weight: 800; }
.mini-ranking a b { overflow: hidden; text-overflow: ellipsis; }
.mini-ranking a em { color: #557273; font-size: 10px; }

.footer { width: min(1040px, calc(100% - 32px)); margin-bottom: 70px; }
.footer-container { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.footer-container p { margin: 5px 0 0; }
.footer-links { display: flex; gap: 18px; }
.footer small { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }

@media (max-width: 900px) {
    #header { min-height: 330px; }
    #navbar ul li a { padding: 18px 15px; font-size: 14px; }
    .site-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
    .feature-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    body { background-position: 50% top; }
    .global-top-bar-content > span:first-child { display: none; }
    .global-top-bar-content { justify-content: flex-end; }
    #header { min-height: 290px; padding-top: 52px; }
    .webengine-mu-logo { width: 230px; }
    .header-info-container { text-align: center !important; }
    .header-info-container .header-info { width: min(340px, 100%) !important; }
    #navbar { background: rgba(0,0,0,.88); }
    .nav-toggle { display: block; width: 100%; padding: 15px; color: #c8dddd; border: 0; background: transparent; text-transform: uppercase; }
    #navbar ul { display: none; }
    #navbar.is-open ul { display: block; padding: 5px 0 12px; }
    #navbar ul li { display: block; }
    #navbar ul li a { display: block; padding: 12px 20px; }
    #navbar ul li a.active::after { right: auto; bottom: 5px; left: 20px; width: 32px; }
    #container { width: calc(100% - 20px); padding-top: 10px; }
    #content { padding: 5px 10px 15px; }
    .site-layout { grid-template-columns: 1fr; }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
    .sidebar > * { margin: 0; }
    .sidebar-banner { align-self: stretch; }
    .sidebar-banner img { height: 100%; object-fit: cover; }
    .download-card { grid-template-columns: 1fr; }
    .download-card img { max-width: 320px; }
    .patch-download-card { align-items: flex-start; flex-direction: column; }
    .downloads-guides { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 520px) {
    #header { min-height: 270px; }
    .header-info-container { bottom: 14px; }
    .header-info-container .header-info { padding: 12px 14px !important; }
    .welcome-panel { min-height: 0; padding: 29px 22px; }
    .welcome-actions .btn { width: 100%; }
    .section-title span, .class-name { display: none; }
    .form-grid, .sidebar { grid-template-columns: 1fr; }
    .page-title { font-size: 27px; }
    .panel-body { padding: 15px; }
    .footer-container { grid-template-columns: 1fr; }
    .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* OPENMU.RU palette: visual-only pass, layout and content blocks stay unchanged. */
:root {
    --atlans-bg: #050b16;
    --atlans-panel: #0a1728;
    --atlans-panel-dark: #071223;
    --atlans-line: #1d3d63;
    --atlans-accent: #00d9ff;
    --atlans-accent-soft: #0a3043;
    --atlans-text: #e2efff;
    --atlans-muted: #8ea5c2;
    --atlans-gold: #c69a54;
    --success: #62e49a;
    --danger: #ff687a;
}

body {
    color: var(--atlans-text);
    background:
        radial-gradient(circle at 72% 7%, rgba(42, 86, 180, .2), transparent 33%),
        radial-gradient(circle at 18% 78%, rgba(48, 53, 139, .13), transparent 36%),
        linear-gradient(180deg, #050b16 0%, #081426 48%, #050b16 100%);
}

.global-top-bar {
    border-bottom: 1px solid rgba(73, 128, 196, .22);
    background: rgba(3, 8, 17, .94);
}
.global-top-bar-content { color: #92a8c4; }
.global-top-bar a, .global-top-bar button { color: #d4e4f8; }
.global-top-bar-separator { color: #365274; }

#header {
    border-bottom-color: rgba(0, 217, 255, .18);
    background-color: #071426;
}
.header-info-container .header-info {
    border: 1px solid rgba(74, 133, 204, .34);
    background: linear-gradient(145deg, rgba(7, 24, 45, .94), rgba(3, 11, 24, .96));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .26), 0 0 28px rgba(25, 94, 187, .1);
}
.header-info-status strong, .header-info-grid b { color: #edf6ff; }
.header-info-grid span { color: #8da5c2; }
.webengine-online-bar-progress {
    background: linear-gradient(90deg, #2bcf75 0%, #00d9ff 54%, #5476ff 100%) !important;
    box-shadow: 0 0 14px rgba(0, 217, 255, .38);
}
.webengine-online-bar-progress.offline-progress { background: var(--danger) !important; box-shadow: none; }

#navbar {
    border-top: 1px solid rgba(74, 133, 204, .16);
    border-bottom: 1px solid rgba(74, 133, 204, .2);
    background: rgba(3, 9, 19, .9);
}
#navbar ul li a { color: #9eb3cd !important; }
#navbar ul li a:hover, #navbar ul li a.active { color: #f2f8ff !important; background: rgba(0, 217, 255, .07); }
#navbar ul li a.active::after { background: var(--atlans-accent); box-shadow: 0 0 12px rgba(0, 217, 255, .68); }
#navbar ul li a.nav-register { color: #c69a54 !important; }

#container { color: var(--atlans-text); }
.welcome-panel {
    border-color: rgba(0, 217, 255, .28);
    background:
        linear-gradient(90deg, rgba(4, 12, 26, .98) 0%, rgba(5, 15, 32, .88) 56%, rgba(5, 15, 32, .18) 100%),
        url("/assets/atlans/img/castle_owner_bg.jpg") center right / cover no-repeat;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.welcome-panel::after { border-color: rgba(0, 217, 255, .2); box-shadow: 0 0 70px rgba(0, 145, 255, .18); }
.eyebrow { color: var(--atlans-accent); }
.welcome-panel h1 { color: #f2f7ff; }
.welcome-panel h1 span { color: #62e4ff; }
.welcome-panel > p:not(.eyebrow) { color: #b8cbe2; }

.panel { background: rgba(8, 20, 37, .92); }
.panel-general, .panel-sidebar, .feature-cards article { border-color: rgba(74, 133, 204, .25); }
.panel-general h2, .panel-general h3, .section-title h2 { color: #dceaff; }
.panel-title { color: #e6f1ff; }
.news-type { color: var(--atlans-accent); border-color: rgba(0, 217, 255, .5); background: rgba(0, 217, 255, .05); }
.panel-news .panel-body p, .panel-general p { color: #9bb1cb; }
.site-form label { color: #b8cae0; }
.site-form label small { color: #7088a7; }
.form-control {
    color: #edf6ff !important;
    border-color: rgba(74, 133, 204, .34) !important;
    background: rgba(2, 8, 18, .82) !important;
}
.form-control::placeholder { color: #7088a7; }
.form-control:focus { border-color: var(--atlans-accent) !important; box-shadow: 0 0 0 2px rgba(0, 217, 255, .14); }
.btn-primary { color: var(--atlans-accent) !important; border-color: rgba(0, 217, 255, .58); }
.btn-primary:hover, .btn-primary:focus { color: #04101d !important; background: var(--atlans-accent); }
.btn-secondary { color: #d2b070 !important; background: rgba(198, 154, 84, .06); border-color: rgba(198, 154, 84, .48); }
.btn-secondary:hover { color: #07101d !important; background: #c69a54; border-color: #c69a54; }
.info-table td, .sidebar-table td, .event-list div, .mini-ranking a { border-bottom-color: rgba(74, 133, 204, .18); }
.info-table td:last-child, .sidebar-table td:last-child { color: #c6d8ed; }
.event-list b { color: #a9c0da; }
.event-list span { color: #d2b070; }
.panel-sidebar-events .event-list { max-height: 560px; overflow-y: auto; scrollbar-color: rgba(98, 228, 255, .45) transparent; }
.mini-ranking a span { color: var(--atlans-accent); }
.mini-ranking a em, .section-title span, .empty-state { color: #7189a8; }

.alert-success { color: #d8ffe6; background: #123d31; border-color: #3e9c78; }
.alert-error { color: #ffe0e4; background: #451d2a; border-color: #9b435b; }
.security-note { color: #9bb3cd; border-left-color: var(--atlans-accent); background: #071b2b; }
.download-badge { color: #73edff; background: rgba(0, 217, 255, .08); border-color: rgba(0, 217, 255, .4); }
.download-badge-secondary { color: #d2b070; background: rgba(198, 154, 84, .08); border-color: rgba(198, 154, 84, .4); }
.rankings-table th, .feature-cards h3, .rules-list li { color: var(--atlans-accent); }
.rules-list b { color: #bfd2e8; }

.footer { color: #8ea5c2; }
.footer small { border-top-color: rgba(74, 133, 204, .18); }
.footer-links a { color: #a5bad3; }

/* Hero background from the approved template direction; the existing MU logo remains a live link. */
#header {
    background:
        linear-gradient(90deg, rgba(3, 9, 22, .2), rgba(4, 8, 22, .04) 62%, rgba(4, 8, 20, .2)),
        url("/assets/openmu-hero-template-v1.png") center 38% / cover no-repeat;
}
.webengine-mu-logo { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(0, 174, 255, .22)); }
.webengine-mu-logo { width: min(390px, 70vw); }
@media (max-width: 760px) { .webengine-mu-logo { width: min(280px, 76vw); } }

/* Login sidebar: match the dark translucent reference panel, not the legacy green card. */
.panel-sidebar {
    border-color: rgba(62, 119, 185, .28) !important;
    background: linear-gradient(145deg, rgba(7, 20, 37, .94), rgba(3, 10, 22, .96)) !important;
}
.panel-sidebar > .panel-heading {
    background: rgba(7, 25, 43, .64) !important;
    border-bottom: 1px solid rgba(0, 217, 255, .42) !important;
}
.panel-sidebar > .panel-heading .panel-title { color: var(--atlans-accent) !important; }
.panel-sidebar .panel-body { background: transparent !important; }
.sidebar-login .form-control {
    color: #edf6ff !important;
    border-color: rgba(62, 119, 185, .34) !important;
    background: rgba(2, 8, 18, .82) !important;
}
.sidebar-login .form-control::placeholder { color: #778eac; }
.sidebar-login .btn-primary { color: var(--atlans-accent) !important; border-color: rgba(0, 217, 255, .62); }
.sidebar-login .btn-primary:hover { color: #04101d !important; background: var(--atlans-accent); }

/* Subtle hero motion: magic breathes and flows while the content remains stable. */
#header {
    overflow: hidden;
    isolation: isolate;
    animation: openmu-hero-drift 18s ease-in-out infinite alternate;
}
#header::before,
#header::after {
    position: absolute;
    inset: -8%;
    content: "";
    pointer-events: none;
}
#header::before {
    z-index: 0;
    background:
        radial-gradient(circle at 14% 39%, rgba(0, 229, 255, .48) 0 1.2%, rgba(50, 129, 255, .2) 4%, transparent 14%),
        radial-gradient(circle at 17% 42%, rgba(83, 104, 255, .2), transparent 22%),
        radial-gradient(ellipse at 35% 68%, rgba(0, 193, 255, .12), transparent 24%);
    filter: blur(6px);
    mix-blend-mode: screen;
    opacity: .55;
    animation: openmu-magic-pulse 4.8s ease-in-out infinite;
}
#header::after {
    z-index: 1;
    inset: -30% -15%;
    background:
        repeating-linear-gradient(121deg, transparent 0 58px, rgba(0, 217, 255, .045) 59px 61px, transparent 62px 126px),
        radial-gradient(ellipse at 22% 48%, transparent 0 22%, rgba(0, 217, 255, .13) 23%, transparent 24% 31%, rgba(90, 93, 255, .09) 32%, transparent 33%);
    opacity: .42;
    mix-blend-mode: screen;
    transform: rotate(-4deg) translate3d(-3%, 0, 0);
    animation: openmu-magic-flow 11s linear infinite;
}
#header > a,
#header .header-info-container {
    position: relative;
    z-index: 3;
}
.webengine-mu-logo {
    animation: openmu-logo-breathe 5.5s ease-in-out infinite;
}

@keyframes openmu-hero-drift {
    0% { background-position: center, 49.4% 38%; }
    100% { background-position: center, 50.6% 39%; }
}
@keyframes openmu-magic-pulse {
    0%, 100% { opacity: .38; transform: scale(.98); }
    50% { opacity: .78; transform: scale(1.035); }
}
@keyframes openmu-magic-flow {
    0% { transform: rotate(-4deg) translate3d(-8%, 0, 0); }
    50% { transform: rotate(-4deg) translate3d(3%, -1%, 0); }
    100% { transform: rotate(-4deg) translate3d(11%, 1%, 0); }
}
@keyframes openmu-logo-breathe {
    0%, 100% { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(0, 174, 255, .18)); transform: translateY(0); }
    50% { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .72)) drop-shadow(0 0 28px rgba(0, 198, 255, .34)); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    #header, #header::before, #header::after, .webengine-mu-logo { animation: none !important; }
}

/* Living server-status card: restrained glow, online pulse and a moving energy bar. */
.header-info-container { isolation: isolate; }
.header-info-container::before {
    position: absolute;
    z-index: -1;
    inset: 8% -8%;
    content: "";
    border-radius: 16px;
    background: radial-gradient(ellipse, rgba(0, 217, 255, .26), transparent 68%);
    filter: blur(18px);
    opacity: .46;
    animation: openmu-status-aura 4.2s ease-in-out infinite;
}
.header-info-container .header-info {
    position: relative;
    overflow: hidden;
    animation: openmu-status-card 7s ease-in-out infinite;
}
.header-info-container .header-info::after {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -42%;
    width: 24%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: openmu-status-glint 6.5s ease-in-out infinite;
}
.server-state.is-online {
    text-shadow: 0 0 12px rgba(98, 228, 154, .72);
    animation: openmu-online-pulse 2.8s ease-in-out infinite;
}
.webengine-online-bar-progress {
    background-size: 200% 100% !important;
    animation: openmu-status-bar 4s linear infinite;
}

@keyframes openmu-status-aura {
    0%, 100% { opacity: .28; transform: scale(.94); }
    50% { opacity: .68; transform: scale(1.06); }
}
@keyframes openmu-status-card {
    0%, 100% { box-shadow: 0 14px 40px rgba(0, 0, 0, .26), 0 0 22px rgba(25, 94, 187, .1); }
    50% { box-shadow: 0 17px 44px rgba(0, 0, 0, .3), 0 0 34px rgba(0, 176, 255, .22); }
}
@keyframes openmu-status-glint {
    0%, 55% { left: -42%; opacity: 0; }
    68% { opacity: .7; }
    84%, 100% { left: 128%; opacity: 0; }
}
@keyframes openmu-online-pulse {
    0%, 100% { opacity: .84; }
    50% { opacity: 1; }
}
@keyframes openmu-status-bar {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .header-info-container::before,
    .header-info-container .header-info,
    .header-info-container .header-info::after,
    .server-state.is-online,
    .webengine-online-bar-progress { animation: none !important; }
}

/* A light cold mist travels right-to-left along the bottom edge of the menu. */
#navbar {
    overflow: hidden;
    isolation: isolate;
}
#navbar::before,
#navbar::after {
    position: absolute;
    bottom: -13px;
    z-index: 0;
    content: "";
    width: 66%;
    height: 38px;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
    transform: translate3d(170%, 0, 0);
}
#navbar::before {
    background:
        radial-gradient(ellipse at 50% 55%, rgba(190, 215, 255, .22), transparent 62%),
        radial-gradient(ellipse at 24% 48%, rgba(94, 142, 221, .2), transparent 68%);
    opacity: .7;
    animation: openmu-menu-fog 13s linear infinite;
}
#navbar::after {
    bottom: -18px;
    width: 48%;
    height: 30px;
    background: radial-gradient(ellipse, rgba(213, 230, 255, .16), transparent 66%);
    opacity: .5;
    animation: openmu-menu-fog 17s 3.4s linear infinite;
}
#navbar ul,
#navbar .nav-toggle { position: relative; z-index: 2; }

@keyframes openmu-menu-fog {
    0% { transform: translate3d(170%, 0, 0) scaleX(.8); opacity: 0; }
    15% { opacity: .55; }
    70% { opacity: .38; }
    100% { transform: translate3d(-190%, 0, 0) scaleX(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #navbar::before, #navbar::after { animation: none !important; }
}

/* Central portal core: a restrained pulse and a slow rotating arc behind the logo. */
#header > a {
    position: relative;
    isolation: isolate;
}
#header > a::before,
#header > a::after {
    position: absolute;
    top: 58%;
    left: 50%;
    content: "";
    pointer-events: none;
    transform: translate(-50%, -50%);
}
#header > a::before {
    z-index: 0;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(210, 252, 255, .82) 0 2%, rgba(40, 211, 255, .5) 7%, rgba(23, 109, 255, .22) 26%, transparent 66%),
        radial-gradient(circle, rgba(0, 217, 255, .22), transparent 68%);
    filter: blur(7px);
    mix-blend-mode: screen;
    opacity: .7;
    animation: openmu-portal-pulse 4.2s ease-in-out infinite;
}
#header > a::after {
    z-index: 1;
    width: 208px;
    height: 208px;
    border: 1px solid rgba(90, 218, 255, .54);
    border-right-color: transparent;
    border-bottom-color: rgba(118, 97, 255, .5);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(0, 217, 255, .26), inset 0 0 24px rgba(71, 92, 255, .12);
    opacity: .65;
    animation: openmu-portal-spin 12s linear infinite;
}
#header > a .webengine-mu-logo { position: relative; z-index: 2; }

@keyframes openmu-portal-pulse {
    0%, 100% { opacity: .42; filter: blur(8px); transform: translate(-50%, -50%) scale(.82); }
    48% { opacity: .88; filter: blur(4px); transform: translate(-50%, -50%) scale(1.08); }
    62% { opacity: .64; filter: blur(6px); transform: translate(-50%, -50%) scale(.96); }
}
@keyframes openmu-portal-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #header > a::before, #header > a::after { animation: none !important; }
}

/* Keep the logo locked in place; only the magic behind it remains animated. */
.webengine-mu-logo {
    animation: none !important;
    transform: none !important;
}

/* Keep the server card clear of the central logo. Discord owns its layout in discord-widget.css. */
#header .header-info-container {
    position: absolute !important;
    top: auto;
    bottom: 22px;
    width: min(350px, calc(50% - 220px)) !important;
    margin: 0 !important;
    float: none !important;
    transform: none !important;
}
#header .header-info-container {
    right: clamp(18px, 4vw, 72px) !important;
    left: auto !important;
}
#header .header-info-container .header-info {
    width: 100% !important;
}
@media (max-width: 900px) {
    #header .header-info-container { width: min(310px, calc(50% - 160px)) !important; }
}
@media (max-width: 760px) {
    #header .header-info-container { right: 50%; width: min(340px, calc(100% - 28px)) !important; transform: translateX(50%) !important; }
}

/* Lower realm surface: the same deep translucent treatment as the login card. */
body {
    background:
        linear-gradient(180deg, rgba(3, 9, 19, .72) 0%, rgba(5, 12, 26, .84) 38%, rgba(3, 8, 18, .96) 100%),
        url("/assets/openmu-hero-template-v1.png") center 58% / cover fixed no-repeat,
        #050b16;
}
#content {
    position: relative;
    isolation: isolate;
}
#content::before {
    position: absolute;
    z-index: -1;
    top: -10px;
    right: -4vw;
    bottom: -40px;
    left: -4vw;
    content: "";
    border-top: 1px solid rgba(74, 133, 204, .12);
    border-bottom: 1px solid rgba(74, 133, 204, .12);
    background:
        radial-gradient(ellipse at 12% 18%, rgba(0, 183, 255, .1), transparent 30%),
        radial-gradient(ellipse at 88% 30%, rgba(63, 78, 255, .1), transparent 30%),
        linear-gradient(180deg, rgba(3, 11, 24, .34), rgba(3, 9, 19, .62));
    box-shadow: inset 0 22px 50px rgba(0, 0, 0, .2), inset 0 -30px 70px rgba(0, 0, 0, .28);
    pointer-events: none;
}
#content::before { display: none; }
.panel,
.feature-cards article {
    border: 1px solid rgba(62, 119, 185, .26);
    background: linear-gradient(145deg, rgba(7, 20, 37, .92), rgba(3, 10, 22, .96));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .2), 0 0 22px rgba(25, 94, 187, .06);
}
.panel-heading {
    background: linear-gradient(90deg, rgba(7, 25, 43, .68), rgba(7, 18, 34, .12));
    border-bottom: 1px solid rgba(0, 217, 255, .18);
}
.panel-body { background: transparent; }
.section-title {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(74, 133, 204, .16);
}
.footer {
    position: relative;
    padding: 22px 24px 26px;
    border: 1px solid rgba(62, 119, 185, .2);
    background:
        linear-gradient(145deg, rgba(7, 20, 37, .86), rgba(3, 10, 22, .94)),
        url("/assets/openmu-hero-template-v1.png") center bottom / cover no-repeat;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25), 0 0 24px rgba(25, 94, 187, .08);
}
@media (max-width: 760px) {
    body { background-attachment: scroll; }
    #content::before { right: -10px; left: -10px; }
}

/* Clean lower background: no characters or artwork behind the content columns. */
body {
    background:
        linear-gradient(180deg, rgba(3, 9, 19, .72) 0%, rgba(5, 12, 26, .84) 38%, rgba(3, 8, 18, .96) 100%),
        url("/assets/openmu-background-no-characters-v1.png") center 58% / cover fixed no-repeat,
        #050b16;
}
.footer {
    background:
        linear-gradient(145deg, rgba(7, 20, 37, .86), rgba(3, 10, 22, .94)),
        url("/assets/openmu-background-no-characters-v1.png") center bottom / cover no-repeat;
}

/* Remove the legacy green shell and carry the current navy surface through the page. */
#container {
    background: linear-gradient(180deg, rgba(6, 18, 34, .97), rgba(3, 11, 24, .98)) !important;
    border-left: 1px solid rgba(62, 119, 185, .16);
    border-right: 1px solid rgba(62, 119, 185, .16);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .22), 0 0 30px rgba(25, 94, 187, .06);
}
.panel-news .panel-footer {
    border-top: 1px solid rgba(62, 119, 185, .18);
    background: linear-gradient(180deg, rgba(8, 23, 42, .9), rgba(4, 13, 27, .96)) !important;
    color: #8da5c2;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #edf6ff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(2, 8, 18, .94) inset !important;
    box-shadow: 0 0 0 1000px rgba(2, 8, 18, .94) inset !important;
    caret-color: #edf6ff;
    transition: background-color 9999s ease-in-out 0s;
}
.page-title {
    color: #62e4ff !important;
    text-shadow: 0 0 18px rgba(0, 217, 255, .16);
}