/* ═══════════════════════════════════════════════════════════════════
   EVOSPEAR — Dark Gaming Portal  v3
   Fonts : Rajdhani (headings) · Nunito Sans (body)
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&family=Rajdhani:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;600&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
    /* backgrounds */
    --bg:        #0c0b10;
    --bg-card:   #12111a;
    --bg-raised: #1a1825;
    --bg-nav:    #0d0c14;
    --bg-header: #09080f;
    --bg-input:  #0f0e18;

    /* accent */
    --red:       #a31515;
    --red-lt:    #c0392b;
    --red-glow:  rgba(163,21,21,.35);
    --gold:      #c89430;
    --gold-lt:   #e8b040;
    --gold-dk:   #7a5a18;
    --gold-dim:  rgba(200,148,48,.15);

    /* text */
    --txt:       #a8a0c0;
    --txt-lt:    #d0c8e0;
    --txt-dim:   #50486a;
    --txt-head:  #d8c890;

    /* borders */
    --bdr:       #201e2e;
    --bdr-lt:    #2e2a40;
    --bdr-gold:  #3a3020;

    /* shadows */
    --shadow-lg: 0 8px 48px rgba(0,0,0,.85);
    --shadow-md: 0 4px 20px rgba(0,0,0,.7);
    --shadow-sm: 0 2px  8px rgba(0,0,0,.5);
}

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body, ul, ol           { margin: 0; padding: 0; }
li                     { list-style: none; }
img                    { max-width: 100%; display: block; }

/* ── BASE ─────────────────────────────────────────────────────── */
body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--txt);
    background-color: var(--bg);
    /* new background — backgroun11d.png instead of old background.png */
    background-image:
        linear-gradient(180deg, rgba(12,11,16,.96) 0%, rgba(12,11,16,.80) 50%, rgba(12,11,16,.98) 100%),
        url(../img/backgroun11d.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
}

a { text-decoration: none; color: var(--gold); }

/* ── GLOBAL WRAPPER ───────────────────────────────────────────── */
.g-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ══════════════════════════════════════════════════════════════
   BRAND HEADER
══════════════════════════════════════════════════════════════ */
.brand-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--bdr);
}

.brand-header__inner {
    display: flex;
    align-items: center;
    height: 60px;
    gap: 24px;
}

/* Logo */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
}

.brand-logo__sword {
    font-size: 22px;
    color: var(--red-lt);
    line-height: 1;
}

.brand-logo__name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--txt-lt);
}

.brand-logo__name strong {
    color: #e02020;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(220,30,30,.5);
}

.brand-logo__dot {
    color: var(--bdr-lt);
    font-size: 18px;
}

.brand-logo__sub {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--txt-dim);
    text-transform: uppercase;
    align-self: flex-end;
    margin-bottom: 4px;
}

/* Server stats */
.brand-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    padding-left: 24px;
    border-left: 1px solid var(--bdr);
}

.bstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 18px;
}

.bstat--up   { flex-direction: row; gap: 6px; align-items: center; }
.bstat--up i { color: #4caf50; font-size: 8px; }
.bstat--up span { font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 2px; color: #4caf50; }

.bstat--down   { flex-direction: row; gap: 6px; align-items: center; }
.bstat--down i { color: var(--red-lt); font-size: 8px; }
.bstat--down span { font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--red-lt); }

.bstat__num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt-lt);
    line-height: 1;
}

.bstat__lbl {
    font-family: 'Rajdhani', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-dim);
}

.bstat-sep {
    width: 1px;
    height: 28px;
    background: var(--bdr);
}

/* Auth buttons */
.brand-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.auth-link {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt-dim);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .18s;
}

.auth-link:hover { color: var(--txt-lt); }

.auth-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 18px;
    background: var(--red);
    border: 1px solid var(--red-lt);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s;
}

.auth-btn:hover { background: var(--red-lt); color: #fff; }

.auth-btn--ghost {
    background: transparent;
    border-color: var(--bdr-lt);
    color: var(--txt-dim);
}

.auth-btn--ghost:hover { background: var(--bg-raised); color: var(--txt-lt); }

/* ══════════════════════════════════════════════════════════════
   MAIN NAV  (sticky · with hover)
══════════════════════════════════════════════════════════════ */
.main-nav {
    background: var(--bg-nav);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: var(--shadow-lg), 0 2px 0 0 var(--bdr-gold);
}

.main-nav__inner {
    display: flex;
    align-items: stretch;
}

/* Nav list */
.nav-list {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.nav-list > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Top-level link */
.nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    height: 50px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-dim);
    border-bottom: 3px solid transparent;
    border-right: 1px solid var(--bdr);
    /* hover transition for nav ONLY */
    transition: color .18s, border-color .18s, background .18s;
}

.nav-list > li:first-child > a { border-left: 1px solid var(--bdr); }

/* ★ NAV HOVER ★ */
.nav-list > li:hover > a {
    color: var(--gold-lt);
    background: rgba(200,148,48,.06);
    border-bottom-color: var(--gold);
}

/* Active item (current page via URL can be set server-side with a class) */
.nav-list > li.active > a {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Dropdown */
.nav-list > li > ul {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--bdr-lt);
    border-top: 2px solid var(--gold);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.nav-list > li:hover > ul { display: block; }

.nav-list > li > ul > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--txt-dim);
    border-bottom: 1px solid var(--bdr);
    transition: color .14s, background .14s, padding-left .14s;
}

.nav-list > li > ul > li:hover > a {
    color: var(--gold-lt);
    background: var(--bg-raised);
    padding-left: 22px;
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-bottom: 2px solid var(--bdr-gold);
}

.hero__img {
    position: absolute;
    inset: 0;
    /* use 1header.png — different from old header.png */
    background-image: url('../img/2header.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(12,11,16,.75) 0%,
        rgba(163,21,21,.12) 50%,
        rgba(12,11,16,.85) 100%
    );
}

.hero__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(to top, rgba(12,11,16,.95) 0%, transparent 100%);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 24px;
    background: var(--red);
    border: 1px solid var(--red-lt);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background .18s;
}

.hero-cta:hover { background: var(--red-lt); color: #fff; }

.hero-cta--ghost {
    background: rgba(255,255,255,.06);
    border-color: var(--bdr-lt);
    color: var(--txt);
}

.hero-cta--ghost:hover { background: rgba(255,255,255,.1); color: var(--txt-lt); }

/* ══════════════════════════════════════════════════════════════
   PAGE BODY  (main + sidebar)
══════════════════════════════════════════════════════════════ */
.page-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Main content ─────────────────────────────────────────── */
.page-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--bdr);
    min-height: 500px;
}

.page-main__inner {
    padding: 22px 24px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.page-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-card);
}

/* ══════════════════════════════════════════════════════════════
   WIDGET  (sidebar cards)
══════════════════════════════════════════════════════════════ */
.widget,
.well.widget {
    border-bottom: 1px solid var(--bdr);
    background: transparent;
}

/* Widget / section header */
.header,
.widget .header,
div.header {
    background: var(--bg-raised);
    border-bottom: 1px solid var(--bdr-lt);
    padding: 10px 14px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    width: auto;
}

.header a,
.widget .header a,
div.header a { color: inherit; }

.body { padding: 14px; }
.well { padding: 12px 14px; }

/* ══════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════ */
table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    padding: 9px 12px;
    font-size: 13px;
    color: var(--txt);
    border-bottom: 1px solid rgba(32,30,46,.6);
    vertical-align: middle;
}

th {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--bdr-lt);
    padding: 10px 12px;
}

tr:nth-child(odd)  { background: rgba(255,255,255,.018); }
tr:nth-child(even) { background: transparent; }
tr[bgcolor]        { background: transparent !important; }

.table-100 { width: 100%; }

/* .white — twig/PHP header rows */
.white, td.white, th.white {
    color: var(--gold) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    background: var(--bg-raised) !important;
    border-bottom: 1px solid var(--bdr-lt) !important;
}

/* ══════════════════════════════════════════════════════════════
   INPUTS & FORMS  (fixed)
══════════════════════════════════════════════════════════════ */
input,
select,
textarea {
    display: block;
    width: 100%;
    background: var(--bg-input);
    color: var(--txt-lt);
    border: 1px solid var(--bdr-lt);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search] {
    height: 42px;
    padding: 0 14px;
    line-height: 42px;
}

select {
    height: 42px;
    padding: 0 14px;
    cursor: pointer;
}

textarea {
    padding: 12px 14px;
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--gold-dk);
    background: #11102a;
}

input::placeholder,
textarea::placeholder { color: var(--txt-dim); }

/* Checkboxes / radios — don't override size */
input[type=radio],
input[type=checkbox] {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

label {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-dim);
    margin-bottom: 5px;
    margin-top: 12px;
}

label:first-child { margin-top: 0; }

button,
input[type=submit] {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 14px;
    padding: 0 18px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red-lt);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s;
}

button:hover,
input[type=submit]:hover { background: var(--red-lt); }

.loginForm { display: flex; flex-direction: column; }
.searchForm { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
    color: var(--txt-lt);
}

h1 {
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-head);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bdr-lt);
    margin-bottom: 16px;
}

h2 { font-size: 17px; color: var(--gold); margin: 16px 0 8px; }
h3 { font-size: 15px; color: var(--txt-lt); margin: 12px 0 6px; }

p   { margin-bottom: 10px; line-height: 1.7; }
b, strong { color: var(--txt-lt); font-weight: 600; }
ul li, ol li { line-height: 2; }

/* ══════════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════════ */
.alert-box {
    padding: 11px 16px;
    margin-bottom: 12px;
    border: 1px solid;
    font-size: 13px;
    border-left-width: 3px;
}

.alert-default { background: rgba(255,255,255,.02); color: var(--txt-dim); border-color: var(--bdr); }
.alert-info    { background: #020a16; color: #60b0d8; border-color: #0a2538; }
.alert-success { background: #020e06; color: #5aaa6a; border-color: #072012; }
.alert-warning { background: #140e02; color: #d0981a; border-color: #2a1e06; }
.alert-danger  { background: #160204; color: #d05050; border-color: #300a08; }
.alert-collapse { display: inline-block; }
.alert-size1 { font-size: 11px; }
.alert-size2 { font-size: 14px; }
.alert-size3 { font-size: 17px; }
.alert-size4 { font-size: 20px; }

/* ══════════════════════════════════════════════════════════════
   NEWS HEADLINES
══════════════════════════════════════════════════════════════ */
.NewsHeadlineBackground {
    background: var(--bg-raised);
    border-left: 3px solid var(--red);
    padding: 11px 16px;
    margin-bottom: 2px;
    overflow: hidden;
}

.NewsHeadlineDate {
    display: inline;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-dim);
}

.NewsHeadlineText {
    display: inline;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--txt-lt);
}

.NewsHeadlineIcon { float: left; margin-right: 12px; }

.NewsHeadlineAuthor {
    font-size: 11px;
    color: var(--txt-dim);
    margin-top: 4px;
}

.NewsHeadline {
    margin-bottom: 16px;
}

/* news content row */
.NewsHeadline + table td { padding: 12px 16px; line-height: 1.8; }

/* ══════════════════════════════════════════════════════════════
   ACCOUNT — VERTICAL MENU
══════════════════════════════════════════════════════════════ */
#account-manage { width: initial !important; }

.vertical-menu a {
    background: var(--bg-raised) !important;
    color: var(--txt-dim) !important;
    border-bottom: 1px solid var(--bdr) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 11px 16px !important;
    display: block !important;
    text-decoration: none !important;
    transition: color .15s, background .15s !important;
}

.vertical-menu a:hover {
    color: var(--txt-lt) !important;
    background: rgba(255,255,255,.04) !important;
    border-left: 3px solid var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   MISC UTILS
══════════════════════════════════════════════════════════════ */
.pull-left  { float: left; }
.pull-right { float: right; }
.centralizeContent, center { text-align: center; }
.ellipsis   { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.content    { padding: 14px 16px; }
.topPane    { padding: 10px 16px; border-bottom: 1px solid var(--bdr); }
.smedia     { font-size: 1.5em; }
.smedia a   { display: inline-block; padding: 8px; color: var(--txt-dim); }
#countDownTimer { color: #5390a8; }
#loginContainer li { text-align: right; }

/* online/offline colours from inline styles */
span[style*="color: green"],
p[style*="color: #1ebc30"]   { color: #5aaa6a !important; }
span[style*="color: red"]    { color: #c05050 !important; }

/* Equipment grid neutralise */
table[style*="background: #808080"] { background: var(--bdr) !important; }
table[style*="background: #292929"] { background: var(--bg-raised) !important; }
td[style*="border:1px solid #808080"] { border-color: var(--bdr-lt) !important; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--bg-header);
    border-top: 2px solid var(--bdr-gold);
    margin-top: 0;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 20px;
}

.site-footer__brand {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--bdr-gold);
    text-transform: uppercase;
}

.site-footer__copy {
    font-size: 12px;
    color: var(--txt-dim);
    text-align: center;
    flex: 1;
}

.site-footer__copy a { color: var(--txt-dim); }

.site-footer__links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.site-footer__links a    { color: var(--txt-dim); }
.site-footer__links span { color: var(--bdr-lt); }

/* ══════════════════════════════════════════════════════════════
   PAGE FORMS FIX  (createaccount · account/manage)
══════════════════════════════════════════════════════════════ */

/* ── outer wrappers: transparent, no decoration ── */
.TableContainer,
.Table5,
.InnerTableContainer,
.TableShadowContainer,
.TableContentAndRightShadow,
.TableContentContainer {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ── kill the 120% inline width on the outer table ── */
.InnerTableContainer > table { width: 100% !important; }

/* ── caption decorative spans: hide ── */
.CaptionEdgeLeftTop, .CaptionEdgeRightTop,
.CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionBorderTop, .CaptionBorderBottom,
.CaptionVerticalLeft, .CaptionVerticalRight,
.TableShadowContainerRightTop, .TableShadowRightTop,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow {
    display: none !important;
}

/* ── caption title ── */
.CaptionContainer { background: transparent !important; background-image: none !important; }
.CaptionInnerContainer { background: transparent !important; background-image: none !important; padding: 0 !important; }
.CaptionInnerContainer > .Text {
    display: block !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--bdr-lt);
    margin-bottom: 14px;
}

/* ── account-manage: fix 170% inline width ── */
#account-manage { width: 100% !important; max-width: 100% !important; }

/* ── text inputs/selects inside TABLE forms: fixed width, not 100% ── */
.TableContent input[type=text],
.TableContent input[type=password],
.TableContent input[type=email],
.TableContent input[type=number],
.TableContent input[type=search],
.TableContent input:not([type]),
.TableContent select {
    display: inline-block !important;
    width: 260px !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    background: var(--bg-input) !important;
    color: var(--txt-lt) !important;
    border: 1px solid var(--bdr-lt) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

/* ── CHECKBOX & RADIO: never block, never full-width ── */
input[type=checkbox],
input[type=radio] {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    background: var(--bg-raised) !important;
    border: 1px solid var(--bdr-lt) !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    flex: none !important;
}

/* ── label beside checkbox/radio: inline, normal text ── */
input[type=checkbox] + label,
input[type=radio]    + label {
    display: inline !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--txt) !important;
    margin-top: 0 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* ── LabelV — left column label cell ── */
td.LabelV {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt-dim);
    vertical-align: middle;
    padding: 8px 14px 8px 0;
    white-space: nowrap;
    width: 160px;
}

/* ── form span text & errors ── */
.TableContent span { font-size: 13px; color: var(--txt); }
.TableContent span a { color: var(--gold); }
.FormFieldError { color: #d05050 !important; font-size: 12px !important; display: block !important; }

/* ── indicator images (nok/ok gif): stay beside input at natural size ── */
.TableContent td img,
.TableContent td > img {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin-left: 6px !important;
}

/* ── country flag images: scale up from 16×11 to readable size ── */
img[src*="images/flags/"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
    max-width: none !important;
    image-rendering: pixelated;
    margin: 0 4px 0 0 !important;
}

/* ── country select: same size as text inputs ── */
.TableContent select {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 8px !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ── submit inside page forms: auto size ── */
.TableContainer input[type=submit],
.TableContent   input[type=submit],
.page-main__inner input[type=submit] {
    display: inline-block !important;
    width: auto !important;
    min-width: 140px !important;
    height: 40px !important;
    padding: 0 28px !important;
    margin-top: 10px !important;
    background: var(--red) !important;
    color: #fff !important;
    border: 1px solid var(--red-lt) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════════════════
   TEMPLATE IMPROVEMENTS
══════════════════════════════════════════════════════════════ */

/* Better news content spacing */
.page-main__inner > .NewsHeadline { margin-top: 4px; }

/* Tickers / announcements */
.page-main__inner > p:first-child { margin-top: 0; }

/* Page section title (h1 inside content) */
.page-main__inner h1 {
    font-size: 18px;
    padding: 14px 0 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--bdr-lt);
}

/* In-page tables: add some visual separation */
.page-main__inner > table,
.page-main__inner .TableContent {
    margin-bottom: 16px;
}

/* Forum, guild, character page tables */
.page-main__inner table td { font-size: 13px; }

/* Sidebar widget links */
.page-sidebar a { color: var(--gold); }
.page-sidebar .widget table td { font-size: 12px; padding: 6px 10px; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bdr-lt); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════
   SELECTION
══════════════════════════════════════════════════════════════ */
::selection { background: rgba(163,21,21,.35); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1100px) {
    .nav-list > li > a { padding: 0 14px; font-size: 12px; }
    .brand-logo__name  { font-size: 18px; }
}

@media screen and (max-width: 860px) {
    .page-body      { flex-direction: column; }
    .page-main      { border-right: none; border-bottom: 2px solid var(--bdr-gold); }
    .page-sidebar   { width: 100%; }
    .hero           { height: 180px; }
    .brand-header__inner { flex-wrap: wrap; height: auto; padding: 10px 20px; }
    .brand-stats    { flex-wrap: wrap; padding-left: 12px; }
    .brand-auth     { padding: 6px 0; }
    .site-footer__inner { flex-direction: column; text-align: center; }
}

@media screen and (max-width: 600px) {
    .nav-list > li > a { padding: 0 10px; font-size: 11px; letter-spacing: 1px; }
    .g-wrap { padding: 0 12px; }
    .page-main__inner { padding: 14px 16px; }
}