/* =========================================================
   NoctraMU WebEngine Theme
   Cleaned responsive version
   ========================================================= */

:root {
    --noctra-bg: #05000f;
    --noctra-panel: rgba(13, 6, 32, .84);
    --noctra-panel-soft: rgba(20, 9, 48, .64);
    --noctra-line: rgba(168, 85, 247, .28);
    --noctra-line-strong: rgba(196, 140, 255, .54);
    --noctra-text: #d9d5ec;
    --noctra-muted: #9e95bb;
    --noctra-title: #f4ecff;
    --noctra-purple: #a855f7;
    --noctra-purple-2: #6d28d9;
    --noctra-green: #4ade80;

    --noctra-width: min(1480px, calc(100vw - 48px));
    --noctra-left: 280px;
    --noctra-right: 320px;
    --noctra-gap: 24px;
}

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

html, body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body {
    background: var(--noctra-bg) url('../img/noctra/web-bg.jpg') no-repeat top center fixed !important;
    background-size: cover !important;
    color: var(--noctra-text) !important;
    font-family: 'PT Sans', 'Segoe UI', Arial, sans-serif !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 180px, rgba(142,68,255,.24), transparent 420px),
        linear-gradient(180deg, rgba(3,0,12,.18), rgba(3,0,12,.76));
}

img, table, iframe, video, .panel, .panel-news, .module-content, .table-responsive, .rankings-table {
    max-width: 100% !important;
}

a { color: #d7c4ff; }
a:hover, a:focus { color: #fff !important; text-shadow: 0 0 10px rgba(168,85,247,.85); }

/* =========================================================
   Top bar / Navbar
   ========================================================= */

.global-top-bar {
    width: 100% !important;
    background: #101010 !important;
    color: #777 !important;
    padding: 7px 0 2px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border: 0 !important;
    box-shadow: none !important;
}

.global-top-bar-content {
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    color: var(--noctra-muted);
}

.global-top-bar .row { margin: 0 !important; padding: 0 !important; }
.global-top-bar-nopadding { padding: 0 !important; }
.global-top-bar-separator { padding: 0 5px !important; color: rgba(168,85,247,.75); }
.global-top-bar a { color: #999 !important; font-size: 12px !important; font-weight: 700; }
.global-top-bar a:hover { color: #fff !important; }
.global-top-bar a.logout { color: #ff6060 !important; }
.admincp-link { color: #a855f7 !important; text-shadow: 0 0 8px rgba(168,85,247,.55); }
.admincp-link:hover { color: #fff !important; }

#navbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: rgba(18, 8, 31, .72) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(5px) !important;
    overflow: visible !important;
}

#navbar ul {
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none !important;
}

#navbar ul li {
    display: inline-flex !important;
    float: none !important;
    list-style: none !important;
}

#navbar ul li a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 58px !important;
    padding: 0 30px !important;
    color: #ccc !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: all .15s ease, transform .08s ease;
}

#navbar ul li a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 0;
    height: 2px;
    opacity: 0;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #a855f7, #d8b4fe);
    transition: all .25s ease;
}

#navbar ul li a:hover {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(168,85,247,.85) !important;
}

#navbar ul li a:hover::after { width: 60%; opacity: 1; }
#navbar ul li.active a, #navbar ul li a.active { color: #fff !important; text-shadow: 0 0 14px rgba(168,85,247,.9) !important; }
#navbar ul li.active a::after, #navbar ul li a.active::after { width: 70%; opacity: 1; }
#navbar ul li a:active { transform: translateY(2px) scale(.95); filter: brightness(1.15); text-shadow: 0 0 10px rgba(168,85,247,1), 0 0 20px rgba(168,85,247,.8), 0 0 30px rgba(168,85,247,.5) !important; }
#navbar ul li a:focus { outline: none !important; box-shadow: none !important; }

/* =========================================================
   Header / Server info
   ========================================================= */

#header {
    position: relative;
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    height: 470px !important;
    min-height: 470px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#header::before, #header::after { display: none !important; content: none !important; }

#header a {
    position: absolute !important;
    left: 50% !important;
    top: 118px !important;
    transform: translateX(-50%) !important;
    display: block !important;
    z-index: 2 !important;
    background: transparent !important;
}

.webengine-mu-logo {
    width: 330px !important;
    max-height: 230px !important;
    object-fit: contain;
    background: transparent !important;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.70)) drop-shadow(0 0 25px rgba(168,85,247,.55));
}

.header-info-container {
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    height: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 8 !important;
}

.header-info {
    width: var(--noctra-right) !important;
    max-width: calc(100% - 68px) !important;
    min-height: 124px !important;
    margin: -141px 34px 0 auto !important;
    padding: 18px 24px !important;
    box-sizing: border-box !important;
    color: #dad4e8 !important;
    background: linear-gradient(180deg, rgba(24,10,42,.88), rgba(11,4,26,.90)) !important;
    border: 1px solid rgba(196,140,255,.34) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.48), 0 0 24px rgba(168,85,247,.18), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 24px rgba(168,85,247,.055) !important;
    backdrop-filter: blur(5px);
}

.header-info-block { padding: 0 !important; box-sizing: border-box !important; }
.header-info .row { margin-left: 0 !important; margin-right: 0 !important; }
.header-info [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.header-info .col-xs-6:first-child { padding-right: 10px !important; }
.header-info .col-xs-6:last-child { padding-left: 10px !important; text-align: right !important; }
.header-info .online-count, .online-count { color: var(--noctra-green) !important; font-weight: 800 !important; text-align: right !important; text-shadow: 0 0 10px rgba(74,222,128,.5) !important; }

.webengine-online-bar {
    width: 100% !important;
    height: 13px !important;
    margin: 12px 0 16px !important;
    overflow: hidden;
    background: rgba(12,5,35,.9) !important;
    border: 1px solid rgba(168,85,247,.26) !important;
    border-radius: 50px !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,.65);
}

.webengine-online-bar-progress {
    height: 100% !important;
    background: linear-gradient(90deg, #5b21b6, #a855f7, #d8b4fe) !important;
    box-shadow: 0 0 12px rgba(168,85,247,.95);
}

/* =========================================================
   Main layout
   ========================================================= */

#container {
    position: relative !important;
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 30px 34px 36px !important;
    background: linear-gradient(180deg, rgba(13,5,34,.93), rgba(7,2,22,.91)) !important;
    border: 1px solid rgba(168,85,247,.34) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.58), 0 0 42px rgba(120,60,255,.16), inset 0 0 58px rgba(168,85,247,.055) !important;
}

#container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216,180,254,.42), transparent);
    pointer-events: none;
}

#content { min-height: 560px !important; padding: 20px 0 0 !important; color: var(--noctra-text); }
#content > .col-xs-12, #content > .col-xs-8, #content > .col-xs-4 { float: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
#content > .row, .layout-center > .row { margin-left: 0 !important; margin-right: 0 !important; }
#content > .row > [class*="col-"], .layout-center > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

.noctra-page-layout {
    display: grid !important;
    grid-template-columns: var(--noctra-left) minmax(0, 1fr) var(--noctra-right) !important;
    grid-template-areas: "left center right" !important;
    gap: var(--noctra-gap) !important;
    align-items: start !important;
    width: 100% !important;
}

.layout-left { grid-area: left !important; }
.layout-center { grid-area: center !important; min-width: 0 !important; }
.layout-right { grid-area: right !important; }
.layout-left, .layout-right { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
.layout-left .panel, .layout-right .panel, .layout-left .sidebar-banner, .layout-right .sidebar-banner { margin-bottom: 0 !important; }
.layout-center .home-news-block { min-height: 420px !important; }

.footer {
    width: var(--noctra-width) !important;
    max-width: 1480px !important;
    margin: 0 auto 45px !important;
    color: var(--noctra-muted) !important;
    background: rgba(5,0,18,.90) !important;
    border: 1px solid rgba(168,85,247,.24);
    border-top: 0;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

.footer hr { border-top: 1px solid rgba(168,85,247,.18) !important; }

/* =========================================================
   Shared components
   ========================================================= */

.page-title, .noctra-page-title, .panel-news .panel-title, h1, h2, h3, h4 {
    color: var(--noctra-title) !important;
    text-shadow: 0 0 14px rgba(168,85,247,.45);
}

.page-title, .noctra-page-title {
    font-size: 28px !important;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(168,85,247,.25);
}

.noctra-page-subtitle { font-size: 14px; color: var(--noctra-muted); margin: -10px 0 20px; }
.noctra-section-title { margin: 0; color: #f4ecff !important; font-size: 30px; font-weight: 700; font-style: italic; text-shadow: 0 0 18px rgba(168,85,247,.45); }

.panel, .panel-news, .thumbnail, .well, .module-content, .rankings-table, .table-responsive, .usercp-module, .sidebar-module,
.noctra-account-panel, .noctra-usercp-form-panel, .noctra-usercp-table-panel {
    background: var(--noctra-panel-soft) !important;
    border: 1px solid rgba(196,140,255,.32) !important;
    border-radius: 14px !important;
    color: var(--noctra-text) !important;
    box-shadow: 0 0 28px rgba(103,45,210,.20), inset 0 1px 0 rgba(255,255,255,.035), inset 0 0 24px rgba(168,85,247,.05) !important;
}

.panel-news { padding: 6px 10px; }
.panel-heading, .panel-news .panel-heading { background: transparent !important; border-bottom: 1px solid rgba(168,85,247,.22) !important; }
.panel-body, .panel-news .panel-body { color: var(--noctra-text) !important; }
.panel-footer, .panel-news .panel-footer { background: rgba(5,0,18,.42) !important; border-top: 1px solid rgba(168,85,247,.18) !important; color: var(--noctra-muted) !important; }

.table, .rankings-table { color: var(--noctra-text) !important; }
.table > thead > tr > th, .rankings-table tr:first-child td, .rankings-table tr:first-child th { color: #fff !important; background: rgba(168,85,247,.12) !important; border-bottom: 1px solid rgba(168,85,247,.25) !important; }
.table > tbody > tr > td, .table > tbody > tr > th, .rankings-table tr td { border-top: 1px solid rgba(168,85,247,.10) !important; color: var(--noctra-text) !important; }
.table-striped > tbody > tr:nth-of-type(odd), .rankings-table tr:nth-child(odd) { background: rgba(255,255,255,.025) !important; }
.table-hover > tbody > tr:hover, .rankings-table tr:hover { background: rgba(168,85,247,.10) !important; }

.form-control, input[type=text], input[type=password], input[type=number], select, textarea {
    background: rgba(7,2,24,.92) !important;
    border: 1px solid rgba(168,85,247,.32) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,.35) !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: rgba(216,180,254,.76) !important;
    box-shadow: 0 0 14px rgba(168,85,247,.38), inset 0 0 14px rgba(0,0,0,.35) !important;
}

.btn, .btn-primary, .btn-default, .btn-success, .btn-info, .btn-warning, .btn-danger,
input[type="submit"], button[type="submit"], button, input[type="button"] {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 18px !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(208,168,255,.28), rgba(168,85,247,.12) 38%, rgba(72,18,126,.92) 100%) !important;
    border: 1px solid rgba(230,205,255,.72) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 14px rgba(168,85,247,.42), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(76,29,149,.38) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
    transition: all .18s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.btn::before, button::before, input[type="submit"]::before, input[type="button"]::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 2px;
    height: 45%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
    pointer-events: none;
}

.btn:hover, .btn-primary:hover, .btn-default:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover,
input[type="submit"]:hover, button[type="submit"]:hover, button:hover, input[type="button"]:hover {
    color: #fff !important;
    transform: translateY(-1px);
    border-color: rgba(245,225,255,.95) !important;
    box-shadow: 0 0 24px rgba(190,120,255,.72), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 20px rgba(76,29,149,.48) !important;
}

.btn:active, input[type="submit"]:active, button:active, input[type="button"]:active { transform: translateY(1px); box-shadow: 0 0 10px rgba(168,85,247,.35), inset 0 3px 8px rgba(0,0,0,.45) !important; }
.btn-xs, .btn-sm, .panel-heading .btn, .panel-title .btn, button.btn-xs, button.btn-sm { min-height: 22px !important; padding: 3px 10px !important; font-size: 10px !important; border-radius: 999px !important; }
a[href*="forgot"], .account-login a, .panel-login a { border-radius: 999px !important; }

.alert { background: rgba(8,3,26,.9) !important; border-color: rgba(168,85,247,.30) !important; color: var(--noctra-text) !important; border-radius: 12px !important; }
.alert-danger { border-color: rgba(248,113,113,.45) !important; }
.alert-success { border-color: rgba(74,222,128,.45) !important; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08031a; }
::-webkit-scrollbar-thumb { background: linear-gradient(#a855f7, #4c1d95); border-radius: 10px; }

/* =========================================================
   Guides
   ========================================================= */

.noctra-guides-module { width: 100%; min-width: 0; }
.noctra-guides-breadcrumb { margin-bottom: 18px; color: var(--noctra-muted); font-size: 13px; }
.noctra-guides-breadcrumb a { color: #d8b4fe !important; font-weight: 700; }
.noctra-guides-breadcrumb span { padding: 0 8px; color: rgba(216,180,254,.45); }
.noctra-guides-breadcrumb strong { color: #fff; }
.noctra-guides-header { margin-bottom: 24px; padding: 24px 26px; background: rgba(13,6,32,.72); border: 1px solid rgba(168,85,247,.28); border-radius: 16px; box-shadow: 0 0 28px rgba(168,85,247,.14), inset 0 0 25px rgba(168,85,247,.05); }
.noctra-guides-header h1 { margin: 0 0 8px !important; font-size: 30px !important; color: #fff !important; }
.noctra-guides-header p { margin: 0; color: var(--noctra-muted); font-size: 14px; }
.noctra-guide-category-grid, .noctra-guide-subcategory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.noctra-guide-card, .noctra-guide-subcard, .noctra-guide-list-item { position: relative; display: flex; gap: 16px; align-items: center; min-height: 118px; padding: 20px; color: var(--noctra-text) !important; text-decoration: none !important; background: linear-gradient(180deg, rgba(20,9,48,.76), rgba(8,3,26,.88)); border: 1px solid rgba(168,85,247,.28); border-radius: 16px; box-shadow: 0 0 22px rgba(103,45,210,.16), inset 0 0 24px rgba(168,85,247,.04); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.noctra-guide-card::before, .noctra-guide-subcard::before, .noctra-guide-list-item::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,180,254,.75), transparent); opacity: .55; }
.noctra-guide-card:hover, .noctra-guide-subcard:hover, .noctra-guide-list-item:hover { transform: translateY(-2px); border-color: rgba(216,180,254,.62); box-shadow: 0 0 34px rgba(168,85,247,.28), inset 0 0 26px rgba(168,85,247,.07); }
.noctra-guide-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex: 0 0 54px; border-radius: 14px; color: #fff; font-size: 26px; background: radial-gradient(circle at 35% 25%, rgba(216,180,254,.42), rgba(76,29,149,.88)); border: 1px solid rgba(216,180,254,.45); box-shadow: 0 0 18px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.noctra-guide-card h3, .noctra-guide-subcard h3, .noctra-guide-list-item h3 { margin: 0 0 6px !important; color: #fff !important; font-size: 18px !important; }
.noctra-guide-card p, .noctra-guide-subcard p, .noctra-guide-list-item p { margin: 0; color: var(--noctra-muted); font-size: 13px; line-height: 1.45; }
.noctra-guide-card span, .noctra-guide-subcard span, .noctra-guide-list-item span { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 4px 10px; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; border-radius: 999px; background: rgba(168,85,247,.16); border: 1px solid rgba(168,85,247,.30); }
.noctra-guide-subcard, .noctra-guide-list-item { min-height: 92px; justify-content: space-between; }
.noctra-guide-list { display: flex; flex-direction: column; gap: 14px; }
.noctra-guide-article { padding: 26px; background: rgba(13,6,32,.74); border: 1px solid rgba(168,85,247,.28); border-radius: 16px; box-shadow: 0 0 28px rgba(168,85,247,.14), inset 0 0 25px rgba(168,85,247,.05); }
.noctra-guide-article header { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(168,85,247,.18); }
.noctra-guide-article header h1 { margin: 0 0 8px !important; color: #fff !important; font-size: 30px !important; }
.noctra-guide-article header p { margin: 0; color: var(--noctra-muted); }
.noctra-guide-content { max-width: 100%; overflow-x: auto; }
.noctra-guide-content img, .noctra-guide-content table, .noctra-guide-content iframe, .noctra-guide-content video { max-width: 100% !important; }
.noctra-guide-section { margin-bottom: 22px; }
.noctra-guide-section h2 { margin: 0 0 10px !important; color: #f4ecff !important; font-size: 21px !important; }
.noctra-guide-section p, .noctra-guide-section li { color: var(--noctra-text); line-height: 1.65; }
.noctra-guide-note { margin: 22px 0; padding: 14px 16px; color: #f5eaff; background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.28); border-left: 3px solid #a855f7; border-radius: 12px; }
.noctra-guide-back { margin-top: 26px; }

/* =========================================================
   News
   ========================================================= */

.noctra-news-module { width:100%; }
.noctra-news-list { display:flex; flex-direction:column; gap:10px; }
.noctra-news-row { display:grid; grid-template-columns:130px minmax(0,1fr) 110px; align-items:center; gap:16px; padding:10px 0; text-decoration:none !important; color:#dcd3ff !important; border-bottom:1px solid rgba(168,85,247,.10); transition:all .15s ease; }
.noctra-news-row:hover { transform:translateX(6px); color:#fff !important; }
.noctra-news-type { display:inline-flex; justify-content:center; align-items:center; height:26px; padding:0 12px; font-size:11px; font-weight:800; color:#9ad0ff; border:1px solid rgba(100,180,255,.6); background:rgba(10,20,40,.35); border-radius:6px; }
.noctra-news-title { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noctra-news-row:hover .noctra-news-title { text-shadow:0 0 12px rgba(168,85,247,.7); }
.noctra-news-date { text-align:right; font-size:13px; color:#cbbcff; }
.noctra-news-empty { padding:20px; text-align:center; color:#aaa; }
.noctra-news-breadcrumb { margin-bottom:16px; font-size:13px; color:#aaa; }
.noctra-news-breadcrumb a { color:#cbbcff; }
.noctra-news-article { width:100%; max-width:100%; padding:0; overflow:hidden; background:rgba(20,10,50,.60); border:1px solid rgba(168,85,247,.28); border-radius:16px; box-shadow:0 0 28px rgba(103,45,210,.18), inset 0 0 24px rgba(168,85,247,.045); }
.noctra-news-article header { padding:24px 26px 18px 26px; margin:0; border-bottom:1px solid rgba(168,85,247,.22); background:linear-gradient(180deg, rgba(168,85,247,.08), rgba(8,2,26,.12)); }
.noctra-news-titlebar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.noctra-news-article h1 { margin:0; color:#f4ecff !important; font-size:30px; line-height:1.2; text-shadow:0 0 16px rgba(168,85,247,.45); }
.noctra-news-content { padding:24px 26px; color:var(--noctra-text); line-height:1.75; overflow-x:auto; }
.noctra-news-content p { margin:0 0 14px 0; }
.noctra-news-content img, .noctra-news-content table, .noctra-news-content iframe, .noctra-news-content video { max-width:100% !important; }
.noctra-news-article footer { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0; padding:14px 26px; border-top:1px solid rgba(168,85,247,.18); background:rgba(5,0,18,.30); color:var(--noctra-muted); font-size:13px; }
.noctra-page-title { position:relative; padding-right:70px; }
.noctra-home-news-more { position:absolute; right:0; bottom:0; color:#d7c4ff !important; font-size:12px; font-weight:800; text-transform:uppercase; text-decoration:none; }
.noctra-home-news-more:hover { color:#fff !important; text-shadow:0 0 12px rgba(168,85,247,.75); }

/* =========================================================
   UserCP
   ========================================================= */

.noctra-account-panel, .noctra-usercp-form-panel, .noctra-usercp-table-panel { overflow: hidden; }
.noctra-account-panel .panel-body, .noctra-usercp-form-panel .panel-body, .noctra-usercp-table-panel .panel-body { padding: 16px 18px !important; }
.noctra-account-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: center; min-height: 48px; padding: 12px 14px; border-bottom: 1px solid rgba(168,85,247,.14); background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }
.noctra-account-row:last-child { border-bottom: 0; }
.noctra-account-label { color: #d9ccff; font-weight: 800; text-shadow: 0 0 10px rgba(168,85,247,.22); }
.noctra-account-value { color: var(--noctra-text); min-width: 0; overflow-wrap: anywhere; }
.noctra-account-action-value { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

.noctra-character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 18px; }
.noctra-character-card { position: relative; text-align: center; min-height: 188px; padding: 14px 10px 16px; background: rgba(13,5,34,.54); border: 1px solid rgba(168,85,247,.22); border-radius: 14px; box-shadow: inset 0 0 18px rgba(168,85,247,.035); transition: all .18s ease; }
.noctra-character-card:hover { transform: translateY(-2px); border-color: rgba(216,180,254,.48); box-shadow: 0 0 26px rgba(168,85,247,.24), inset 0 0 22px rgba(168,85,247,.06); }
.noctra-character-name, .noctra-character-name a { color: #f4ecff !important; font-weight: 800; text-shadow: 0 0 10px rgba(168,85,247,.35); }
.noctra-character-avatar { position: relative; display: inline-block; margin: 10px 0 8px; }
.noctra-character-avatar img { width: 96px; height: 96px; object-fit: cover; border: 1px solid rgba(168,85,247,.45); border-radius: 8px; box-shadow: 0 0 16px rgba(0,0,0,.45), 0 0 12px rgba(168,85,247,.20); }
.noctra-character-level { position: absolute; right: calc(50% - 46px); top: 102px; min-width: 30px; padding: 2px 6px; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; background: rgba(7,2,18,.88); border: 1px solid rgba(216,180,254,.45); box-shadow: 0 0 10px rgba(168,85,247,.32); }
.noctra-character-location { color: var(--noctra-muted) !important; font-size: 12px; line-height: 1.35; }

.noctra-usercp-list, .noctra-usercp-action-list, .noctra-usercp-vote-list { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.noctra-usercp-card, .noctra-usercp-character-card, .noctra-usercp-vote-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 130px; align-items: center; gap: 22px; width: 100%; min-height: 126px; margin: 0; padding: 24px 28px; background: rgba(10,3,30,.58); border: 1px solid rgba(168,85,247,.34); border-radius: 16px; box-shadow: 0 0 24px rgba(103,45,210,.13), inset 0 0 24px rgba(168,85,247,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.noctra-usercp-card:hover, .noctra-usercp-character-card:hover, .noctra-usercp-vote-card:hover { transform: translateY(-1px); border-color: rgba(216,180,254,.50); box-shadow: 0 0 30px rgba(168,85,247,.20), inset 0 0 24px rgba(168,85,247,.055); }
.noctra-usercp-avatar { width: 96px; text-align: center; }
.noctra-usercp-avatar img, .noctra-usercp-avatar .thumbnail, .noctra-usercp-avatar > * { width: 82px !important; height: 82px !important; object-fit: cover; border-radius: 8px !important; border: 1px solid rgba(168,85,247,.55) !important; box-shadow: 0 0 14px rgba(168,85,247,.30) !important; background: rgba(5,0,18,.55) !important; padding: 0 !important; margin: 0 !important; }
.noctra-usercp-main, .noctra-usercp-card-body, .noctra-usercp-vote-info { min-width: 0; }
.noctra-usercp-name, .noctra-usercp-card-title { color: #f4ecff; font-size: 16px; font-weight: 800; line-height: 1.2; text-shadow: 0 0 12px rgba(168,85,247,.36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noctra-usercp-divider { height: 1px; margin: 12px 0; background: linear-gradient(90deg, rgba(216,180,254,.55), rgba(168,85,247,.18), transparent); }
.noctra-usercp-inline-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; align-items: center; color: var(--noctra-text); }
.noctra-usercp-inline-stats span { display: grid; align-items: baseline; gap: 4px; min-width: 0; padding: 0 18px 0 0; margin: 0; background: transparent !important; border: 0 !important; border-right: 1px solid rgba(168,85,247,.28) !important; box-shadow: none !important; }
.noctra-usercp-inline-stats span:last-child { border-right: 0 !important; }
.noctra-usercp-inline-stats span::before, .noctra-usercp-inline-stats span::after { display: none !important; content: none !important; }
.noctra-usercp-inline-stats em { color: rgba(220,210,255,.62); font-size: 11px; font-style: normal; line-height: 1; white-space: nowrap; }
.noctra-usercp-inline-stats strong { color: #fff; font-size: 13px; font-weight: 800; line-height: 1; text-shadow: 0 0 8px rgba(168,85,247,.28); white-space: nowrap; }
.noctra-usercp-inline-stats-wide { grid-auto-columns: 92px; }
.noctra-usercp-inline-stats-wide span { padding-right: 14px; }
.noctra-usercp-action, .noctra-usercp-card-action { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.noctra-usercp-action .btn, .noctra-usercp-card-action .btn { min-width: 86px; white-space: nowrap; }
.noctra-usercp-requirements { margin-top: 22px; padding: 18px 24px; background: rgba(8,2,26,.58); border: 1px solid rgba(168,85,247,.25); border-radius: 14px; color: rgba(220,210,255,.72); box-shadow: inset 0 0 18px rgba(168,85,247,.035); }
.noctra-usercp-requirements p { margin: 6px 0; color: rgba(220,210,255,.72); }
.noctra-usercp-vote-card { min-height: 108px; }
.noctra-usercp-vote-icon { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(168,85,247,.45); background: radial-gradient(circle at 50% 38%, rgba(216,180,254,.30), transparent 46%), rgba(8,2,26,.72); color: #f4ecff; font-size: 34px; text-shadow: 0 0 18px rgba(168,85,247,.85); box-shadow: 0 0 16px rgba(168,85,247,.22), inset 0 0 20px rgba(168,85,247,.06); }

/* =========================================================
   NOCTRA INFO MODULE
   ========================================================= */

.layout-center .module-info, .layout-center .info-module { width: 100%; }
.layout-center table.info-table, .layout-center .module-info table, .layout-center .info-module table { width: 100% !important; margin-bottom: 22px !important; overflow: hidden; background: rgba(12,5,35,.62) !important; border: 1px solid rgba(168,85,247,.28) !important; border-radius: 14px !important; border-collapse: separate !important; border-spacing: 0 !important; box-shadow: 0 0 24px rgba(103,45,210,.14), inset 0 0 22px rgba(168,85,247,.04) !important; }
.layout-center .module-info table tr, .layout-center .info-module table tr { background: transparent !important; }
.layout-center .module-info table tr:nth-child(even), .layout-center .info-module table tr:nth-child(even) { background: rgba(255,255,255,.025) !important; }
.layout-center .module-info table td, .layout-center .module-info table th, .layout-center .info-module table td, .layout-center .info-module table th { padding: 13px 16px !important; color: var(--noctra-text) !important; border: 0 !important; border-bottom: 1px solid rgba(168,85,247,.12) !important; vertical-align: middle !important; }
.layout-center .module-info table tr:last-child td, .layout-center .module-info table tr:last-child th, .layout-center .info-module table tr:last-child td, .layout-center .info-module table tr:last-child th { border-bottom: 0 !important; }
.layout-center .module-info table td:first-child, .layout-center .module-info table th:first-child, .layout-center .info-module table td:first-child, .layout-center .info-module table th:first-child { color:#f4ecff !important; font-weight:800; background:rgba(168,85,247,.08) !important; text-shadow:0 0 10px rgba(168,85,247,.28); }.layout-center .module-info table td:last-child, .layout-center .info-module table td:last-child { color: #ffffff !important; }
.layout-center .module-info table tr:hover, .layout-center .info-module table tr:hover { background: rgba(168,85,247,.075) !important; }

/* ========================================================= NOCTRA RANKINGS MODULE ========================================================= */
.noctra-rankings-module { width:100%; max-width:100%; min-width:0; }
.noctra-rankings-module .rankings-table, .layout-center .rankings-table.noctra-rankings-table { width:100% !important; margin:18px 0 16px 0 !important; background:rgba(12,5,35,.62) !important; border:1px solid rgba(168,85,247,.28) !important; border-radius:14px !important; border-collapse:separate !important; border-spacing:0 !important; overflow:hidden !important; color:var(--noctra-text) !important; box-shadow:0 0 24px rgba(103,45,210,.14), inset 0 0 22px rgba(168,85,247,.04) !important; table-layout:auto !important; }
.noctra-rankings-module .rankings-table tr:first-child td, .noctra-rankings-module .rankings-table tr:first-child th { padding:13px 14px !important; background:linear-gradient(180deg, rgba(30,12,60,.86), rgba(12,5,35,.86)) !important; color:#fff !important; font-weight:800 !important; text-align:center; border:0 !important; border-bottom:1px solid rgba(168,85,247,.30) !important; text-shadow:0 0 10px rgba(168,85,247,.32); }
.noctra-rankings-module .rankings-table tr:first-child td:first-child, .noctra-rankings-module .rankings-table tr:first-child th:first-child { text-align:center; }
.noctra-rankings-module .rankings-table tr:not(:first-child) { background:rgba(12,5,35,.46) !important; transition:background .15s ease, transform .15s ease; }
.noctra-rankings-module .rankings-table tr:not(:first-child):nth-child(even) { background:rgba(18,8,48,.48) !important; }
.noctra-rankings-module .rankings-table tr:not(:first-child):hover { background:rgba(168,85,247,.09) !important; }
.noctra-rankings-module .rankings-table td, .noctra-rankings-module .rankings-table th { padding:11px 14px !important; color:var(--noctra-text) !important; border:0 !important; border-bottom:1px solid rgba(168,85,247,.11) !important; border-left:1px solid rgba(168,85,247,.055) !important; vertical-align:middle !important; background:transparent !important; }
.noctra-rankings-module .rankings-table td:first-child, .noctra-rankings-module .rankings-table th:first-child { border-left:0 !important; }
.noctra-rankings-module .rankings-table tr:last-child td { border-bottom:0 !important; }
.noctra-rankings-module .rankings-table-place { width:54px; color:#fff !important; font-weight:900 !important; text-align:center !important; background:rgba(168,85,247,.07) !important; text-shadow:0 0 10px rgba(168,85,247,.40); }
.noctra-rankings-module .rankings-class-image, .noctra-rankings-module .rankings-gens-img, .noctra-rankings-module .online-status-indicator { vertical-align:middle; }
.noctra-rankings-module .rankings-class-image { width:38px; height:38px; object-fit:cover; border-radius:7px; border:1px solid rgba(168,85,247,.35); box-shadow:0 0 12px rgba(168,85,247,.18); }
.noctra-rankings-module a { color:#e9e2ff !important; font-weight:800; text-shadow:0 0 8px rgba(168,85,247,.18); }
.noctra-rankings-module a:hover { color:#fff !important; text-shadow:0 0 12px rgba(168,85,247,.75); }
.noctra-rankings-module .rankings-update-time { margin-top:14px; padding:12px 16px; color:rgba(220,210,255,.72); background:rgba(8,2,26,.52); border:1px solid rgba(168,85,247,.22); border-radius:12px; text-align:right; box-shadow:inset 0 0 18px rgba(168,85,247,.035); }
.noctra-rankings-module .rankings-menu, .noctra-rankings-module .rankingsMenu, .noctra-rankings-module .rankings-menu-list, .noctra-rankings-module .rankings-filter-menu { margin:0 0 16px 0; padding:0; }
.noctra-rankings-module ul { max-width:100%; }
.noctra-rankings-module ul li a, .noctra-rankings-module .rankings-menu a, .noctra-rankings-module .rankingsMenu a { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 13px; margin:0 6px 8px 0; color:#fff !important; font-size:12px; font-weight:800; text-transform:uppercase; text-decoration:none !important; border:1px solid rgba(168,85,247,.28); border-radius:999px; background:rgba(168,85,247,.10); box-shadow:inset 0 0 12px rgba(168,85,247,.035); transition:all .16s ease; }
.noctra-rankings-module ul li a:hover, .noctra-rankings-module .rankings-menu a:hover, .noctra-rankings-module .rankingsMenu a:hover { transform:translateY(-1px); border-color:rgba(216,180,254,.55); background:rgba(168,85,247,.18); box-shadow:0 0 18px rgba(168,85,247,.20), inset 0 0 12px rgba(168,85,247,.06); }
.rankings_menu { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0 0 22px 0; padding:14px; text-align:center; background:rgba(12,5,35,.58); border:1px solid rgba(168,85,247,.26); border-radius:14px; box-shadow:0 0 22px rgba(103,45,210,.14), inset 0 0 18px rgba(168,85,247,.035); }.rankings_menu a { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:8px 16px; color:#d9d5ec !important; font-size:12px; font-weight:800; text-transform:uppercase; text-decoration:none !important; border:1px solid rgba(168,85,247,.28); border-radius:999px; background:rgba(8,2,26,.55); transition:all .16s ease; }
.rankings_menu a:hover, .rankings_menu a.active { color:#fff !important; border-color:rgba(216,180,254,.65); background:rgba(168,85,247,.16); text-shadow:0 0 10px rgba(168,85,247,.75); box-shadow:0 0 18px rgba(168,85,247,.26); }
.rankings-class-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 20px 0; padding:12px; list-style:none; background:rgba(12,5,35,.45); border:1px solid rgba(168,85,247,.20); border-radius:14px; }
.rankings-class-filter li { display:inline-flex; margin:0; padding:0; }
.rankings-class-filter a { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0 !important; border:1px solid rgba(168,85,247,.30); border-radius:12px; background:rgba(8,2,26,.65); box-shadow:inset 0 0 14px rgba(168,85,247,.035); transition:all .16s ease; overflow:visible; cursor:pointer; }
.rankings-class-filter a br { display:none !important; }
.rankings-class-filter-image { width:28px !important; height:28px !important; object-fit:contain; margin:0 !important; }
.rankings-class-filter-grayscale { filter:grayscale(1) brightness(.82); opacity:.72; }
.rankings-class-filter a:hover, .rankings-class-filter a.active { transform:translateY(-1px); border-color:rgba(216,180,254,.70); background:rgba(168,85,247,.14); box-shadow:0 0 18px rgba(168,85,247,.32), inset 0 0 16px rgba(168,85,247,.06); filter:none; opacity:1; }
.rankings-class-filter a::after { content:attr(title); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px); padding:5px 9px; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; background:rgba(8,2,26,.96); border:1px solid rgba(216,180,254,.42); border-radius:8px; box-shadow:0 0 14px rgba(168,85,247,.28); opacity:0; pointer-events:none; transition:all .14s ease; z-index:20; }
.rankings-class-filter a:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

/* ========================================================= NOCTRA LEFT RANKING MODULE ========================================================= */
.panel-noctra-top-reset .panel-body { padding:10px 12px !important; }
.noctra-top-reset-list { display:flex; flex-direction:column; gap:9px; }
.noctra-top-reset-row { display:grid; grid-template-columns:30px 34px minmax(0,1fr) 74px; align-items:center; gap:8px; min-height:34px; padding:4px 0; border-bottom:1px solid rgba(168,85,247,.10); }
.noctra-top-reset-row:last-child { border-bottom:0; }
.noctra-top-reset-rank { color:#fff; font-weight:800; font-size:12px; text-align:right; }
.noctra-top-reset-class { position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid rgba(216,180,254,.55); box-shadow:0 0 10px rgba(168,85,247,.30); }
.noctra-top-reset-icon { width:24px !important; height:24px !important; border-radius:50%; object-fit:cover; }
.noctra-top-reset-class::after { content:attr(data-class); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px); padding:5px 9px; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; background:rgba(8,2,26,.96); border:1px solid rgba(216,180,254,.42); border-radius:8px; box-shadow:0 0 14px rgba(168,85,247,.28); opacity:0; pointer-events:none; transition:all .14s ease; z-index:20; }
.noctra-top-reset-class:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.noctra-top-reset-name, .noctra-top-reset-name a { color:#fff !important; font-weight:800; font-size:13px; text-decoration:none !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noctra-top-reset-stats { display:grid; grid-template-columns:42px 18px 14px; align-items:baseline; justify-content:end; column-gap:3px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.noctra-top-reset-stats strong { display:block; text-align:right; font-size:13px; color:#fff; }
.noctra-top-reset-stats .reset { display:block; text-align:right; font-size:10px; color:#ff3333; font-weight:900; }
.noctra-top-reset-stats .gr { display:block; text-align:right; font-size:10px; color:#4ade80; font-weight:900; }

.panel-noctra-top-guilds .panel-body { padding:10px 12px !important; }
.noctra-top-guild-list { display:flex; flex-direction:column; gap:9px; }
.noctra-top-guild-row { display:grid; grid-template-columns:30px minmax(0,1fr) 34px 64px; align-items:center; gap:8px; min-height:34px; padding:4px 0; border-bottom:1px solid rgba(168,85,247,.10); }
.noctra-top-guild-row:last-child { border-bottom:0; }
.noctra-top-guild-rank { color:#fff; font-weight:800; font-size:12px; text-align:right; }
.noctra-top-guild-name, .noctra-top-guild-name a { color:#fff !important; font-weight:800; font-size:13px; text-decoration:none !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noctra-top-guild-logo { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid rgba(216,180,254,.45); background:rgba(8,2,26,.65); box-shadow:0 0 10px rgba(168,85,247,.25); }
.noctra-top-guild-logo img { width:20px !important; height:20px !important; object-fit:contain; }
.noctra-top-guild-score { text-align:right; font-size:13px; font-weight:900; color:#4ade80; font-variant-numeric:tabular-nums; }

/* === TOP 1-3 HIGHLIGHT: RESETS + GUILDS === */
.noctra-top-reset-row, .noctra-top-guild-row { transition:background .16s ease, box-shadow .16s ease, transform .16s ease; }
.noctra-top-reset-row:hover, .noctra-top-guild-row:hover { transform:translateX(2px); background:rgba(168,85,247,.07); box-shadow:inset 2px 0 0 rgba(168,85,247,.45); }
.noctra-top-reset-row:nth-child(1), .noctra-top-guild-row:nth-child(1) { background:linear-gradient(90deg, rgba(255,215,0,.13), transparent 80%); }
.noctra-top-reset-row:nth-child(2), .noctra-top-guild-row:nth-child(2) { background:linear-gradient(90deg, rgba(192,192,192,.11), transparent 80%); }
.noctra-top-reset-row:nth-child(3), .noctra-top-guild-row:nth-child(3) { background:linear-gradient(90deg, rgba(205,127,50,.12), transparent 80%); }
.noctra-top-reset-row:nth-child(1) .noctra-top-reset-rank, .noctra-top-guild-row:nth-child(1) .noctra-top-guild-rank { color:#ffd76a; text-shadow:0 0 10px rgba(255,215,0,.55); }
.noctra-top-reset-row:nth-child(2) .noctra-top-reset-rank, .noctra-top-guild-row:nth-child(2) .noctra-top-guild-rank { color:#d8d8e8; text-shadow:0 0 10px rgba(220,220,255,.42); }
.noctra-top-reset-row:nth-child(3) .noctra-top-reset-rank, .noctra-top-guild-row:nth-child(3) .noctra-top-guild-rank { color:#d69a55; text-shadow:0 0 10px rgba(205,127,50,.45); }
.noctra-top-reset-row:nth-child(1) .noctra-top-reset-class, .noctra-top-guild-row:nth-child(1) .noctra-top-guild-logo { border-color:rgba(255,215,0,.70); box-shadow:0 0 14px rgba(255,215,0,.32); }
.noctra-top-reset-row:nth-child(2) .noctra-top-reset-class, .noctra-top-guild-row:nth-child(2) .noctra-top-guild-logo { border-color:rgba(220,220,255,.62); box-shadow:0 0 14px rgba(220,220,255,.22); }
.noctra-top-reset-row:nth-child(3) .noctra-top-reset-class, .noctra-top-guild-row:nth-child(3) .noctra-top-guild-logo { border-color:rgba(205,127,50,.66); box-shadow:0 0 14px rgba(205,127,50,.24); }

/* ========================================================= NOCTRA CHARACTER PROFILE + EQUIPMENT PREVIEW ========================================================= */
.noctra-character-profile { width:100%; max-width:100%; min-width:0; }
.noctra-profile-hero { display:grid; grid-template-columns:74px minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:22px; padding:20px 22px; background:linear-gradient(180deg, rgba(20,9,48,.72), rgba(8,3,26,.88)); border:1px solid rgba(168,85,247,.30); border-radius:16px; box-shadow:0 0 28px rgba(103,45,210,.18), inset 0 0 24px rgba(168,85,247,.045); }
.noctra-profile-avatar { width:62px; height:62px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(216,180,254,.48); background:rgba(8,2,26,.66); box-shadow:0 0 16px rgba(168,85,247,.26); overflow:hidden; }
.noctra-profile-class-avatar { width:52px !important; height:52px !important; object-fit:contain; }
.noctra-profile-title { min-width:0; }
.noctra-profile-title h1 { margin:0 0 4px 0 !important; color:#f4ecff !important; font-size:30px !important; line-height:1.15; text-shadow:0 0 16px rgba(168,85,247,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noctra-profile-title span { color:rgba(220,210,255,.66); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
.noctra-profile-status { min-width:88px; padding:7px 12px; text-align:center; border-radius:999px; font-size:11px; font-weight:900; text-transform:uppercase; border:1px solid rgba(168,85,247,.30); background:rgba(8,2,26,.64); }
.noctra-profile-status.is-online { color:#4ade80; border-color:rgba(74,222,128,.42); box-shadow:0 0 14px rgba(74,222,128,.18); }
.noctra-profile-status.is-offline { color:#f87171; border-color:rgba(248,113,113,.35); box-shadow:0 0 14px rgba(248,113,113,.12); }
.noctra-profile-layout { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.noctra-profile-panel { background:rgba(15,5,42,.66); border:1px solid rgba(168,85,247,.30); border-radius:16px; box-shadow:0 0 26px rgba(103,45,210,.16), inset 0 0 24px rgba(168,85,247,.045); overflow:visible; }
.noctra-profile-panel-title { padding:14px 18px; color:#f4ecff; font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.35px; border-bottom:1px solid rgba(168,85,247,.20); background:linear-gradient(180deg, rgba(168,85,247,.08), rgba(8,2,26,.14)); text-shadow:0 0 12px rgba(168,85,247,.35); }
.noctra-profile-stats-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:18px; }
.noctra-profile-stats-grid div { min-width:0; padding:13px 14px; background:rgba(8,2,26,.52); border:1px solid rgba(168,85,247,.18); border-radius:12px; box-shadow:inset 0 0 14px rgba(0,0,0,.18); }
.noctra-profile-stats-grid div.wide { grid-column:1 / -1; }
.noctra-profile-stats-grid span { display:block; margin-bottom:5px; color:rgba(220,210,255,.60); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.35px; }
.noctra-profile-stats-grid strong { display:block; color:#fff; font-size:14px; font-weight:900; overflow-wrap:anywhere; text-shadow:0 0 8px rgba(168,85,247,.28); }
.noctra-profile-equipment-panel { overflow:visible; }
.noctra-equipment-wrap{
    padding:14px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:visible;
}
.noctra-equipment-grid{
    position:relative;
    width:560px;
    min-width:560px;
    max-width:none;
    height:520px;
    margin:0 auto;
    display:grid;
    grid-template-columns:120px 54px 120px 54px 120px;
    grid-template-rows:128px 54px 128px 54px 96px;
    gap:8px;
    padding:18px;
    transform-origin:top center;
}
.noctra-equip-slot { position:relative; display:flex; align-items:center; justify-content:center; width:100% !important; height:100% !important; background-repeat:no-repeat; background-position:center; background-size:contain; border:1px solid rgba(168,85,247,.26); border-radius:12px; background-color:rgba(5,0,18,.48); box-shadow:inset 0 0 18px rgba(0,0,0,.35), 0 0 12px rgba(168,85,247,.08); overflow:visible; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.noctra-equip-slot:hover { border-color:rgba(216,180,254,.55); background-color:rgba(20,9,48,.72); box-shadow:0 0 18px rgba(168,85,247,.20), inset 0 0 18px rgba(0,0,0,.35); }
.noctra-equip-slot::before { content:attr(data-slot); position:absolute; left:8px; top:6px; color:rgba(220,210,255,.28); font-size:9px; font-weight:800; text-transform:uppercase; pointer-events:none; opacity:.75; }
.noctra-equip-filled::before { opacity:0; }
.slot-pet { grid-column:1; grid-row:1; background-size:60% !important; }
.slot-helm { grid-column:3; grid-row:1; background-size:72% !important; }
.slot-wings { grid-column:5; grid-row:1; background-size:78% !important; }
.slot-left-hand { grid-column:1; grid-row:3; background-size:contain !important; }
.slot-armor { grid-column:3; grid-row:3; background-size:72% !important; }
.slot-right-hand { grid-column:5; grid-row:3; background-size:contain !important; }
.slot-gloves { grid-column:1; grid-row:5; background-size:72% !important; }
.slot-pants { grid-column:3; grid-row:5; background-size:72% !important; }
.slot-boots { grid-column:5; grid-row:5; background-size:72% !important; }
.slot-pendant { grid-column:2; grid-row:2; border-radius:10px; background-size:72% !important; }
.slot-ring-left { grid-column:2; grid-row:4; border-radius:10px; background-size:72% !important; }
.slot-ring-right { grid-column:4; grid-row:4; border-radius:10px; background-size:72% !important; }
.noctra-item-tooltip { display:none; min-width:220px; max-width:320px; padding:12px 14px; background:linear-gradient(180deg, rgba(18,6,48,.96), rgba(8,2,26,.98)); border:1px solid rgba(168,85,247,.45); border-radius:10px; box-shadow:0 0 25px rgba(168,85,247,.35), 0 12px 30px rgba(0,0,0,.6); color:#ddd; font-size:11px; pointer-events:none; text-align:center; }
.noctra-tt-icon { width:96px; height:96px; margin:0 auto 4px auto; background-repeat:no-repeat; background-position:center; background-size:contain; }
.noctra-tt-name {
	font-size:13px;
	font-weight:900;
	margin-bottom:6px;
	text-align:center;
	text-shadow:0 0 12px rgba(0,255,170,.35);
}
.noctra-tt-line { margin:1px 0; padding:0; font-size:11px; line-height:1.22; text-align:center; color:#e8e0d0; }
.noctra-tt-blue { color:#7ec8ff; }
.noctra-tt-green { color:#00ff9c; text-shadow:0 0 8px rgba(0,255,156,.5); }
.noctra-tt-yellow { color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.4); }
.noctra-tt-white { color:#e9e6ff; }
.noctra-tt-luck { color:#8fd3ff; }
.noctra-tt-exc { color:#00ff9c; }
.noctra-tt-muted { color:#b9aa92; }
.noctra-tt-pink { color:#ff6ad5; }
.noctra-tt-sep { height:6px; }

.noctra-tt-ancient-title{
    display:block;
    padding:4px 6px;
    margin-bottom:6px;
    background: rgba(52, 52, 173, 0.65);
    border-radius: 0;
    box-shadow:
        0 0 6px rgba(0, 120, 255, 0.25);
    color:#00ff9c;
    font-weight:700;
    text-align:center;

    text-shadow:
        0 0 4px rgba(0,255,156,0.8),
        0 0 8px rgba(0,255,156,0.4);
}
.noctra-tt-ancient{color:#9b9b9b;text-align:center;}
.noctra-tt-set-title{
    color:#ffd34d;
    font-weight:800;
    text-align:center;
    text-shadow:0 0 8px rgba(255,211,77,.35);
	
}
.noctra-equip-slot.noctra-rarity-normal{
    border-color:rgba(130,100,210,.45);
}

.noctra-equip-slot.noctra-rarity-luck{
    border-color:rgba(120,170,255,.65);
    box-shadow:0 0 10px rgba(120,170,255,.20);
}

.noctra-equip-slot.noctra-rarity-plus{
    border-color:rgba(255,210,70,.75);
    box-shadow:0 0 12px rgba(255,210,70,.22);
}

.noctra-equip-slot.noctra-rarity-excellent{
    border-color:rgba(0,255,156,.85);
    box-shadow:0 0 14px rgba(0,255,156,.28);
}

.noctra-equip-slot.noctra-rarity-ancient{
    border-color:rgba(52, 52, 173,.95);
    box-shadow:
        0 0 14px rgba(52,52,173,.45),
        0 0 22px rgba(0,255,156,.18),
        inset 0 0 8px rgba(0,255,156,.16);
}
/* ========================================================= NOCTRA Right Event MODULE ========================================================= */
.noctra-event-current-time { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin-bottom:10px; border:1px solid rgba(168,85,247,.25); border-radius:10px; background:rgba(8,2,26,.55); color:#cbbcff; font-size:12px; }
.noctra-event-current-time strong { color:#fff; font-weight:900; font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(168,85,247,.5); }

.noctra-event-list { display:flex; flex-direction:column; gap:8px; }
.noctra-event-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid rgba(168,85,247,.12); background:rgba(10,3,30,.45); transition:all .15s ease; }
.noctra-event-row:hover { background:rgba(168,85,247,.08); box-shadow:inset 2px 0 0 rgba(168,85,247,.45); }

.noctra-event-left { display:flex; flex-direction:column; }
.noctra-event-name { color:#fff; font-size:13px; font-weight:800; }
.noctra-event-label { font-size:11px; color:rgba(200,180,255,.6); }

.noctra-event-right { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.noctra-event-right strong { color:#fff; font-weight:900; font-size:13px; }
.noctra-event-timer { font-size:11px; color:#4ade80; font-weight:700; }

/* =========================================================
   NOCTRA DOWNLOADS MODULE
   ========================================================= */

.noctra-downloads-module{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.noctra-download-panel{
    overflow:hidden;
    background:rgba(15,5,42,.66);
    border:1px solid rgba(168,85,247,.30);
    border-radius:16px;
    box-shadow:
        0 0 26px rgba(103,45,210,.16),
        inset 0 0 24px rgba(168,85,247,.045);
}

.noctra-download-panel-title{
    padding:14px 18px;
    color:#f4ecff;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
    border-bottom:1px solid rgba(168,85,247,.20);
    background:linear-gradient(180deg, rgba(168,85,247,.08), rgba(8,2,26,.14));
    text-shadow:0 0 12px rgba(168,85,247,.35);
}

.noctra-download-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px;
}

.noctra-download-card{
    display:grid;
    grid-template-columns:54px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:16px;
    background:linear-gradient(180deg, rgba(20,9,48,.62), rgba(8,3,26,.86));
    border:1px solid rgba(168,85,247,.24);
    border-radius:14px;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.22),
        0 0 18px rgba(103,45,210,.12);
    transition:all .16s ease;
}

.noctra-download-card:hover{
    transform:translateY(-1px);
    border-color:rgba(216,180,254,.52);
    box-shadow:
        0 0 28px rgba(168,85,247,.22),
        inset 0 0 22px rgba(168,85,247,.055);
}

.noctra-download-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#00ff9c;
    font-size:22px;
    font-weight:900;
    border-radius:12px;
    background:rgba(8,2,26,.72);
    border:1px solid rgba(0,255,156,.35);
    box-shadow:
        0 0 14px rgba(0,255,156,.18),
        inset 0 0 16px rgba(0,255,156,.06);
    text-shadow:0 0 10px rgba(0,255,156,.65);
}

.noctra-download-info{
    min-width:0;
}

.noctra-download-title{
    color:#fff;
    font-size:15px;
    font-weight:900;
    text-shadow:0 0 10px rgba(168,85,247,.35);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.noctra-download-description{
    margin-top:4px;
    color:rgba(220,210,255,.64);
    font-size:13px;
    line-height:1.45;
}

.noctra-download-meta{
    display:flex;
    align-items:center;
    gap:14px;
    white-space:nowrap;
}

.noctra-download-size{
    min-width:78px;
    color:#d8b4fe;
    font-size:12px;
    font-weight:900;
    text-align:right;
    text-shadow:0 0 8px rgba(168,85,247,.28);
}

.noctra-download-btn{
    min-width:92px;
}

/* === NOCTRA LOGIN INPUT === */

.noctra-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.noctra-input{
    padding-left:72px !important;
}

/* ICON */
.noctra-input-icon{
    position:absolute;
    left:14px;
    width:18px;
    height:18px;
    opacity:.8;
    filter:drop-shadow(0 0 6px rgba(168,85,247,.6));
}

/* USER ICON */
.noctra-input-icon.user{
    background:url('../img/noctra/icon-user.png') no-repeat center;
    background-size:contain;
}

/* LOCK ICON */
.noctra-input-icon.lock{
    background:url('../img/noctra/icon-lock.png') no-repeat center;
    background-size:contain;
}

/* SEPARATOR */
.noctra-input-sep{
    position:absolute;
    left:42px;
    color:rgba(216,180,254,.35);
    font-weight:700;
    pointer-events:none;
}

/* INPUT STYLE TUNING */
.noctra-input{
    background:rgba(7,2,24,.95) !important;
    border:1px solid rgba(168,85,247,.32) !important;
    color:#fff !important;
    border-radius:10px !important;
    box-shadow:
        inset 0 0 14px rgba(0,0,0,.45),
        0 0 10px rgba(168,85,247,.05);
}

/* HOVER */
.noctra-input-wrap:hover .noctra-input{
    border-color:rgba(216,180,254,.55) !important;
    box-shadow:
        0 0 12px rgba(168,85,247,.25),
        inset 0 0 14px rgba(0,0,0,.45);
}

/* FOCUS */
.noctra-input:focus{
    border-color:rgba(216,180,254,.85) !important;
    box-shadow:
        0 0 16px rgba(168,85,247,.45),
        inset 0 0 14px rgba(0,0,0,.45);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    :root {
        --noctra-width: calc(100vw - 28px);
        --noctra-left: 1fr;
        --noctra-right: 1fr;
        --noctra-gap: 18px;
    }

    .global-top-bar-content,
    #header,
    .header-info-container,
    #container,
    .footer {
        width: var(--noctra-width) !important;
        max-width: 100% !important;
    }

    #container {
        padding: 24px !important;
        overflow: hidden !important;
    }

    .noctra-page-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "center"
            "right"
            "left" !important;
        gap: 24px !important;
    }

    .layout-center,
    .layout-left,
    .layout-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #navbar ul {
        width: var(--noctra-width) !important;
        max-width: 100% !important;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 12px !important;
    }

    #navbar ul li a {
        min-height: 52px !important;
        padding: 0 18px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    .header-info {
        width: 330px !important;
        max-width: calc(100% - 48px) !important;
        margin-right: 24px !important;
    }

    .noctra-guide-category-grid,
    .noctra-guide-subcategory-grid {
        grid-template-columns: 1fr;
    }

    .noctra-usercp-card,
    .noctra-usercp-character-card {
        grid-template-columns: 82px minmax(0, 1fr) 120px !important;
    }

    .noctra-usercp-main,
    .noctra-usercp-card-body,
    .noctra-usercp-vote-info {
        min-width: 0 !important;
        max-width: 100% !important;
    }
	
	.noctra-profile-layout { grid-template-columns:1fr; }
    .noctra-profile-equipment-panel{
    max-width:100%;
    margin:0 auto;
}
}

@media (max-width: 900px) {
    :root {
        --noctra-width: calc(100vw - 20px);
    }

    #header {
        height: 310px !important;
        min-height: 310px !important;
    }

    #header a {
        top: 72px !important;
    }

    .webengine-mu-logo {
        width: 240px !important;
    }

    .header-info-container {
        height: auto !important;
    }

    .header-info {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: -92px 0 18px auto !important;
    }

    .noctra-news-row {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .noctra-news-date {
        grid-column: 2;
        text-align: left;
        font-size: 12px;
        color: var(--noctra-muted);
    }
}

@media (max-width: 768px) {
    :root {
        --noctra-width: calc(100vw - 16px);
    }

    body {
        background-attachment: scroll !important;
    }

    .global-top-bar-content .col-xs-6 {
        width: 50% !important;
        float: left !important;
    }

    #container {
        padding: 14px !important;
    }

    #content {
        padding-top: 12px !important;
    }

    #navbar ul {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    #navbar ul li a {
        min-height: 48px !important;
        padding: 0 13px !important;
        font-size: 13px !important;
    }

    #header {
        height: 260px !important;
        min-height: 260px !important;
    }

    #header a {
        top: 56px !important;
    }

    .webengine-mu-logo {
        width: 210px !important;
    }

    .header-info {
        margin-top: -76px !important;
        padding: 16px 18px !important;
    }

    .noctra-page-title,
    .page-title,
    .noctra-section-title {
        font-size: 24px !important;
    }

    .noctra-page-title-row {
        align-items: flex-start;
        gap: 10px;
    }

    .noctra-news-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 0;
    }

    .noctra-news-type {
        width: fit-content;
    }

    .noctra-news-title {
        white-space: normal;
    }

    .noctra-news-date {
        grid-column: auto;
        text-align: left;
    }

    .noctra-news-article,
    .noctra-guide-article {
        padding: 18px;
    }

    .noctra-news-article footer {
        flex-direction: column;
    }

    .noctra-account-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 14px 0 !important;
    }

    .noctra-account-label,
    .noctra-account-value,
    .noctra-account-action-value {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .noctra-account-value {
        display: block !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .noctra-account-action-value {
        flex-direction: column;
        align-items: flex-start;
    }

    .noctra-character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .noctra-usercp-card,
    .noctra-usercp-character-card,
    .noctra-usercp-vote-card {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 18px !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .noctra-usercp-avatar {
        width: 72px;
        min-width: 72px;
    }

    .noctra-usercp-avatar img,
    .noctra-usercp-avatar .thumbnail,
    .noctra-usercp-avatar > * {
        width: 64px !important;
        height: 64px !important;
    }

    .noctra-usercp-main,
    .noctra-usercp-card-body,
    .noctra-usercp-vote-info {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .noctra-usercp-name,
    .noctra-usercp-card-title {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .noctra-usercp-action,
    .noctra-usercp-card-action {
        grid-column: 2 !important;
        justify-content: flex-start !important;
        margin-top: 10px !important;
        min-width: 0 !important;
    }

    .noctra-usercp-inline-stats {
        display: grid !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .noctra-usercp-inline-stats span {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        overflow: hidden !important;
    }

    .noctra-usercp-inline-stats em,
    .noctra-usercp-inline-stats strong {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
	
	.noctra-rankings-module { overflow-x:auto; }
    .noctra-rankings-module .rankings-table { min-width:620px; }
    .noctra-rankings-module .rankings-update-time { text-align:left; }
	
	.noctra-profile-hero { grid-template-columns:58px minmax(0,1fr); gap:14px; padding:16px; }
    .noctra-profile-avatar { width:52px; height:52px; }
    .noctra-profile-class-avatar { width:44px !important; height:44px !important; }
    .noctra-profile-title h1 { font-size:24px !important; }
    .noctra-profile-status { grid-column:1 / -1; width:fit-content; }
    .noctra-profile-stats-grid { grid-template-columns:1fr; padding:14px; }
    .noctra-equipment-wrap { padding:14px; transform:scale(.92); transform-origin:top center; margin-bottom:-18px; }
	
	.noctra-profile-layout{
        display:block;
    }

    .noctra-profile-equipment-panel{
        width:100%;
        max-width:100%;
    }

    .noctra-equipment-wrap{
        min-height:445px;
    }

    .noctra-equipment-grid{
        transform:scale(.82);
    }
	
	.noctra-download-card{
        grid-template-columns:46px minmax(0,1fr);
        gap:12px;
    }

    .noctra-download-meta{
        grid-column:1 / -1;
        justify-content:space-between;
        width:100%;
        padding-top:8px;
        border-top:1px solid rgba(168,85,247,.14);
    }

    .noctra-download-title{
        white-space:normal;
    }
}


@media (max-width: 520px) {
    :root {
        --noctra-width: calc(100vw - 10px);
    }

    .global-top-bar {
        font-size: 10px !important;
    }

    .global-top-bar a {
        font-size: 10px !important;
    }

    #navbar ul li a {
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    #header {
        height: 220px !important;
        min-height: 220px !important;
    }

    #header a {
        top: 42px !important;
    }

    .webengine-mu-logo {
        width: 180px !important;
    }

    .header-info {
        margin-top: -58px !important;
    }

    .header-info .col-xs-6 {
        width: 50% !important;
        float: left !important;
    }

    #container {
        padding: 12px !important;
    }

    .noctra-character-grid {
        grid-template-columns: 1fr;
    }

    .noctra-usercp-card,
    .noctra-usercp-character-card,
    .noctra-usercp-vote-card {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .noctra-usercp-avatar {
        width: auto;
        min-width: 0;
        text-align: left;
    }

    .noctra-usercp-action,
    .noctra-usercp-card-action {
        grid-column: 1 !important;
    }

    .noctra-usercp-inline-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
	
	.noctra-equipment-wrap{
        min-height:370px;
    }

    .noctra-equipment-grid{
        transform:scale(.68);
    }
}

@media (max-width:420px) {
    .noctra-equipment-wrap{
        min-height:320px;
    }

    .noctra-equipment-grid{
        transform:scale(.58);
    }
	.noctra-download-list{
        padding:14px;
    }

    .noctra-download-card{
        padding:14px;
    }

    .noctra-download-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .noctra-download-size{
        text-align:left;
    }
}