@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-overlay: rgba(8, 7, 5, 0.88);
    --box-bg: rgba(18, 15, 10, 0.9);
    --border-color: #c99b2e;
    --border-dim: #604817;
    --text-primary: #eee9da;
    --text-secondary: #aaa28f;
    --accent: #d4af37;
    --accent-hover: #fff0a6;
    --success: #10b981;
    --danger: #ef4444;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    background-color: #050403;
    background-image:
        linear-gradient(rgba(5, 4, 3, 0.58), rgba(5, 4, 3, 0.84)),
        radial-gradient(circle at 15% 20%, rgba(212, 175, 55, 0.11) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(192, 192, 180, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(120, 83, 20, 0.08) 0%, transparent 60%),
        url("images/background.png");
    background-position: center top, 15% 20%, 85% 80%, 50% 50%, center top;
    background-repeat: no-repeat;
    background-size: cover, auto, auto, auto, cover;
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-hover);
}

.layout-wrapper {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 24px;
}

/* TOP HEADER */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-top: 20px;
}

.header-box {
    width: 240px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.box-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px;
    border-bottom: 1px solid var(--border-dim);
    color: var(--accent);
    text-transform: uppercase;
}

.box-content {
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
}

.status-link {
    display: block;
    padding: 10px;
}

.online-text {
    color: var(--success);
}

.offline-text {
    color: var(--danger);
}

.logo-area {
    margin: 0 20px;
    text-align: center;
}

.logo-area a {
    display: block;
    line-height: 0;
}

.site-logo {
    display: block;
    width: min(520px, 42vw);
    height: 170px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.language-switcher {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, .3);
    border-bottom: 1px solid var(--border-dim);
}

#MainContent .language-switcher a,
.language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 48px;
    padding: 4px 7px;
    color: var(--text-secondary) !important;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: .5px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}

.language-switcher a span { font-size: 16px; line-height: 1; }
.language-switcher a:hover { color: var(--accent-hover) !important; border-color: rgba(202, 166, 79, .45); background: rgba(202, 166, 79, .08); }
.language-switcher a.active { color: var(--accent-hover) !important; border-color: var(--accent); background: rgba(202, 166, 79, .13); box-shadow: inset 0 0 10px rgba(202, 166, 79, .08); }

.boosted-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 8px;
}

.boosted-content img {
    display: block;
    max-width: 48px;
    max-height: 48px;
    margin: 4px auto;
}

.boosted-entry {
    min-width: 0;
    text-align: center;
}

.boosted-entry + .boosted-entry {
    border-left: 1px solid var(--border-dim);
}

.boosted-kind {
    display: block;
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: .8px;
}

.boosted-name {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* MAIN COLUMNS */
.main-columns {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: start;
}

.left-sidebar,
.center-content,
.right-sidebar {
    min-width: 0;
}

/* LEFT SIDEBAR */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.btn-action {
    display: block;
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #352706, #765712);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
    transition: all 0.2s;
}

.btn-action:hover {
    background: linear-gradient(135deg, #5b420d, #a77d1c);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.4);
}

.sidebar-nav {
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.menu-category {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    padding: 12px 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.menu-category > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.menu-category-icon {
    width: 16px;
    color: var(--accent-hover);
    text-align: center;
}

.menu-category:hover {
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer !important;
}

.menu-category.active {
    border-bottom: 1px solid var(--border-dim);
    color: #fff;
}

.menu-list {
    list-style: none;
    margin-bottom: 0;
    padding-bottom: 12px;
}

.menu-list li a {
    display: block;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    border-left: 2px solid transparent;
    cursor: pointer;
}

.menu-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-item-icon {
    flex: 0 0 17px;
    width: 17px;
    color: var(--accent);
    text-align: center;
    transition: color .2s, transform .2s;
}

.menu-list li a:hover .menu-item-icon {
    color: var(--accent-hover);
    transform: translateX(2px);
}

.menu-list li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent);
    cursor: pointer;
}

/* CENTER CONTENT */
.center-content {
    min-width: 0;
    max-width: 100%;
}

#MainContent {
    width: 100%;
    overflow-x: auto;
    font-size: 16px;
    line-height: 1.65;
}

#MainContent p {
    margin: 0 0 1em;
}

#MainContent h1,
#MainContent h2,
#MainContent h3 {
    margin: 0 0 0.75em;
    color: var(--accent-hover);
    line-height: 1.25;
}

/* Keep legacy MyAAC forms inside the center grid column. */
#MainContent form,
#MainContent .TableContainer,
#MainContent .InnerTableContainer,
#MainContent .TableContentAndRightShadow {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#MainContent input[type="text"],
#MainContent input[type="password"],
#MainContent input[type="email"],
#MainContent select,
#MainContent textarea {
    max-width: 100%;
}

#createaccount table {
    table-layout: fixed;
}

#createaccount td {
    overflow-wrap: anywhere;
}

.content-box {
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-height: 500px;
}

.content-box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 700;
    text-align: center;
    padding: 24px;
    color: var(--accent);
    border-bottom: 1px solid var(--border-dim);
    letter-spacing: 2px;
}

.content-title-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--accent);
    background: rgba(212, 175, 55, .09);
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 50%;
    font-size: 17px;
    box-shadow: 0 0 18px rgba(212, 175, 55, .08);
}

.content-box-inner {
    padding: 36px;
}

/* RIGHT SIDEBAR (THEMEBOXES) */
.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Right Sidebar Boxes from tibiacom overrides */
.Themebox,
.serversave,
.discord-box,
.rank-box,
.searchchar-box {
    background: var(--box-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    width: 100% !important;
    height: auto !important;
}

.serversave_header,
.ThemeboxButton,
.box-header {
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
    text-align: center !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--border-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: none !important;
    height: auto !important;
    line-height: normal !important;
}

.serversave_bottom,
.Themebox .Bottom,
.box-bottom {
    display: none !important;
}

.serversave_content,
.Themebox .BoxContent,
.box-content-inner {
    background: none !important;
    padding: 16px !important;
    text-align: center !important;
    width: auto !important;
    height: auto !important;
}

.wiki-themebox-button {
    align-items: center;
    background: linear-gradient(135deg, #352706, #765712);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 0 10px rgba(212, 175, 55, .2);
    color: #fff;
    display: flex;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    letter-spacing: 1px;
    margin: -8px 0 20px;
    padding: 15px;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(212, 175, 55, .45);
    text-transform: uppercase;
    transition: all .2s ease;
}

.wiki-themebox-button:hover {
    background: linear-gradient(135deg, #5b420d, #a77d1c);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 15px rgba(212, 175, 55, .4);
    color: #fff;
    transform: translateY(-2px);
}

/* Specific serversave overrides */
.serversave_countdown {
    border-color: var(--border-dim) !important;
    margin-top: 8px;
}

/* Fix generic MyAAC styles injected in content */
#MainContent .Box,
#MainContent .News,
#MainContent .TableContainer {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
}

.NewsHeadline {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

#MainContent table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

#MainContent th,
#MainContent .LabelH {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--accent-hover) !important;
    font-family: var(--font-heading);
    padding: 12px;
    text-transform: uppercase;
    font-size: 14px;
    border-bottom: 1px solid var(--border-dim);
}

#MainContent td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent !important;
}

#MainContent tr:hover td {
    background: transparent !important;
}

/* Remove old corner images from inner content */
#MainContent img[src*="corner"],
#MainContent img[src*="border"],
#MainContent img[src*="scroll.gif"],
#MainContent img[src*="headline"] {
    display: none !important;
}

#MainContent .BorderTitleText,
#MainContent .Title {
    display: none !important;
}

/* Clean up archaic Tibia nested tables (Create Character etc) */
.CaptionEdgeLeftTop,
.CaptionEdgeRightTop,
.CaptionBorderTop,
.CaptionVerticalLeft,
.CaptionVerticalRight,
.CaptionBorderBottom,
.CaptionEdgeLeftBottom,
.CaptionEdgeRightBottom {
    display: none !important;
}

.CaptionContainer .Text {
    font-family: var(--font-heading) !important;
    color: var(--accent) !important;
    font-size: 19px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border-dim) !important;
    margin-bottom: 16px !important;
}

.TableContent {
    border: 1px solid var(--border-dim) !important;
    background: transparent !important;
}

.InnerTableContainer,
.TableContentContainer {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.Table3,
.TableContent {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Make selection boxes look like modern cards */
.OptionContainer {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    padding: 12px;
    margin: 5px;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
}

.OptionContainer:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--accent);
}

/* Account Management Page fix */
#account-manage {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    padding: 0 !important;
}

div#one {
    width: 100% !important;
    float: none !important;
}

div#two {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

div#two h1 {
    text-align: center;
    color: var(--accent);
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

div#two>p:first-of-type {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.vertical-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
}

.vertical-menu a {
    background: linear-gradient(135deg, #352706, #765712) !important;
    color: #fff !important;
    border: 1px solid var(--accent) !important;
    border-radius: 4px;
    padding: 10px 14px !important;
    font-family: var(--font-heading) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    flex: 1 1 auto;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
}

.vertical-menu a:hover {
    background: linear-gradient(135deg, #5b420d, #a77d1c) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
select,
textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    padding: 11px 13px;
    color: #fff;
    width: 100%;
    min-height: 44px;
    font: inherit;
}

input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
}

img[src*="nok.gif"],
img[src*="ok.gif"] {
    display: none !important;
}

.BigButton,
.BigButtonOver {
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}

input[type="submit"],
input[type="button"],
input[type="image"],
button,
.BigButtonText {
    background: linear-gradient(135deg, #352706, #765712) !important;
    color: #fff !important;
    border: 1px solid var(--accent) !important;
    padding: 11px 20px !important;
    border-radius: 4px !important;
    font-family: var(--font-heading) !important;
    cursor: pointer;
    background-image: none !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.45) !important;
    -webkit-appearance: none;
    appearance: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="image"]:hover,
button:hover,
.BigButtonText:hover {
    background: linear-gradient(135deg, #5b420d, #a77d1c) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

/* Footer */
.footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-dim);
    color: var(--text-secondary);
    font-size: 13px;
}

/* Fix generic overrides */
tr[bgcolor],
td[bgcolor],
table[bgcolor],
div[style*="background-color"] {
    background-color: transparent !important;
}

/* Add custom styles for the login form inputs to be more legible */
#MainContent form table {
    margin-top: 0;
}

/* The old account form is table-based; these rules give it modern spacing. */
#createaccount .TableContainer {
    padding: 24px;
}

#createaccount .TableContent > tbody > tr > td {
    padding: 12px 14px;
    vertical-align: middle;
}

#createaccount .LabelV {
    width: 190px !important;
    color: var(--text-secondary);
    font-weight: 600;
}

#createaccount .FormFieldError,
.red {
    color: #f87171 !important;
}

/* GLOBAL SAAS PAGE POLISH: brings legacy MyAAC pages closer to the Bazaar layout. */
#MainContent > form:not(.direct-sale-form),
#MainContent > .TableContainer,
#MainContent > .Box,
#MainContent > .News,
#MainContent > .SmallBox,
#MainContent > .MessageContainer {
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 9px !important;
    padding: 22px !important;
    margin: 0 0 22px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    overflow: hidden;
}

#MainContent > form:not(.direct-sale-form) > .TableContainer,
#MainContent .SmallBox > .MessageContainer,
#MainContent .MessageContainer > .Message {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#MainContent > form:not(.direct-sale-form) > .TableContainer + .TableContainer {
    margin-top: 22px !important;
}

#MainContent > div[style*="display: flex"],
#MainContent > div[style*="display:flex"] {
    gap: 18px;
    align-items: stretch;
}

#MainContent .CaptionContainer {
    margin: -22px -22px 18px !important;
    padding: 16px 22px !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .035)) !important;
    border-bottom: 1px solid var(--border-dim) !important;
}

#MainContent .CaptionInnerContainer {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#MainContent .CaptionContainer .Text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--accent) !important;
    font-family: var(--font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

#MainContent .CaptionContainer .Text::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(212, 175, 55, .55);
}

#MainContent .CaptionContainer .Text > div {
    height: auto !important;
}

#MainContent .TableContentContainer {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#MainContent .TableContent {
    border: 1px solid rgba(212, 175, 55, .2) !important;
    border-radius: 7px;
    overflow: hidden;
}

#MainContent .TableContent tr td,
#MainContent table:not(.TableContent) tr > td {
    background: transparent !important;
}

#MainContent .LabelV,
#MainContent .LabelV150,
#MainContent td[class*="Label"] {
    color: var(--accent-hover) !important;
    font-weight: 700 !important;
}

#MainContent .GreedyCell {
    width: 100%;
}

#MainContent b,
#MainContent strong {
    color: var(--accent-hover);
}

#MainContent small {
    color: var(--text-secondary);
}

#MainContent hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: var(--border-dim);
}

#MainContent [style*="background-color: #d4c0a1"],
#MainContent [style*="background-color:#d4c0a1"],
#MainContent [style*="box-shadow: 3px 3px 2px"] {
    background: rgba(212, 175, 55, .06) !important;
    border-color: var(--border-dim) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

#MainContent [id^="timerServerSave_"] {
    color: var(--accent-hover) !important;
    line-height: 1.2;
}

#MainContent a:not(.bazaar-sell-link):not(.btn-action) {
    font-weight: 600;
}

#MainContent img[src*="arrow_"] {
    filter: sepia(1) saturate(1.8) brightness(1.25);
}

/* CHAR BAZAAR: compatibility layer for the legacy Tibia markup. */
#MainContent .BoxFrameHorizontal,
#MainContent .BoxFrameEdgeLeftTop,
#MainContent .BoxFrameEdgeRightTop,
#MainContent .BoxFrameEdgeLeftBottom,
#MainContent .BoxFrameEdgeRightBottom,
#MainContent .BoxFrameVerticalLeft,
#MainContent .BoxFrameVerticalRight {
    display: none !important;
}

#MainContent .SmallBox,
#MainContent .MessageContainer,
#MainContent .Message,
#MainContent .HintBox,
#MainContent .CharacterTradeTibiaCoinBalance {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: rgba(212, 175, 55, .06) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 8px;
    padding: 16px !important;
    margin: 0 0 18px !important;
    color: var(--text-primary) !important;
}

#MainContent .MessageContainer .Message,
#MainContent .SmallBox .MessageContainer {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#MainContent .Auction {
    width: 100% !important;
    max-width: 100% !important;
    background: #0d0a06 !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
    color: var(--text-primary) !important;
}

#MainContent .AuctionHeader {
    position: relative;
    min-height: 0 !important;
    padding: 14px 52px 14px 16px !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(212, 175, 55, .04)) !important;
    border-bottom: 1px solid var(--border-dim);
    color: var(--text-secondary) !important;
    line-height: 1.55;
}

#MainContent .AuctionCharacterName {
    float: none !important;
    margin: 0 0 4px !important;
    color: var(--accent) !important;
    font-family: var(--font-heading);
    font-size: 20px !important;
    font-weight: 700;
}

#MainContent .AuctionLinks {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
}

#MainContent .AuctionLinks a::after {
    content: "›";
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--accent-hover);
    font-size: 24px;
}

#MainContent .AuctionLinks img,
#MainContent .AuctionNewIcon,
#MainContent .VSCCoinImages[src=""],
#MainContent img[src*="ribbon-new"],
#MainContent img[src*="button-details"] {
    display: none !important;
}

#MainContent .AuctionBody {
    display: grid !important;
    grid-template-columns: minmax(110px, .75fr) minmax(210px, 1.35fr) minmax(190px, 1fr) minmax(135px, .8fr);
    align-items: stretch;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#MainContent .AuctionBodyBlock {
    position: relative !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 150px;
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-right: 1px solid rgba(212, 175, 55, .18) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

#MainContent .AuctionBodyBlock:last-child {
    border-right: 0 !important;
}

#MainContent .AuctionOutfit {
    display: grid !important;
    place-items: center;
}

#MainContent .AuctionOutfitImage {
    position: static !important;
    display: block;
    max-width: 100px !important;
    max-height: 120px !important;
    object-fit: contain;
}

#MainContent .AuctionItemsViewBox {
    display: grid !important;
    grid-template-columns: repeat(4, 42px);
    align-content: center;
    justify-content: center;
    gap: 5px;
}

#MainContent .CVIcon {
    position: static !important;
    float: none !important;
    display: grid !important;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 2px !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 5px;
    overflow: hidden;
    font-size: 9px;
}

#MainContent .CVIcon img {
    max-width: 36px !important;
    max-height: 36px !important;
}

#MainContent .CVIcon p {
    margin: 0 !important;
    text-align: center;
    line-height: 1.15;
}

#MainContent .ShortAuctionData,
#MainContent .CurrentBid {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

#MainContent .ShortAuctionDataLabel {
    color: var(--text-secondary) !important;
    font-size: 12px;
    text-transform: uppercase;
}

#MainContent .ShortAuctionDataValue {
    color: var(--text-primary) !important;
    margin-bottom: 6px;
}

#MainContent .ShortAuctionDataBidRow {
    background: rgba(212, 175, 55, .08) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 5px;
    padding: 8px !important;
    box-shadow: none !important;
}

#MainContent .CurrentBid .Container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    text-align: center;
}

#MainContent .Steps {
    display: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    gap: 8px;
}

#MainContent .SingleStepContainer {
    position: static !important;
    float: none !important;
    flex: 1 1 0;
    width: auto !important;
    height: auto !important;
    min-height: 64px;
    padding: 10px !important;
    background: rgba(212, 175, 55, .06) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 6px;
}

#MainContent .StepIcon,
#MainContent .StepText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    color: var(--text-primary) !important;
}

#MainContent .StepIcon {
    margin: 0 auto 7px !important;
}

#MainContent .Tube,
#MainContent #TubeLeftEnd,
#MainContent #TubeRightEnd,
#MainContent #BackgroundContainerLeftEnd,
#MainContent #BackgroundContainerRightEnd,
#MainContent [id*="BackgroundContainerCenter"] {
    display: none !important;
}

#MainContent .bazaar-fallback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    color: var(--accent);
    font-size: 18px;
    vertical-align: middle;
}

#MainContent .StepIcon.bazaar-fallback-icon {
    display: flex;
    width: 34px !important;
    height: 34px !important;
    color: var(--accent-hover);
    font-size: 24px;
}

#MainContent .bazaar-icon-success { color: var(--success); }
#MainContent .bazaar-icon-danger { color: var(--danger); }
#MainContent .bazaar-icon-coin { color: var(--accent); }

#MainContent .CharacterDetailsBlock,
#MainContent .CharacterFeatureCategory,
#MainContent .SpecialCharacterFeatures,
#MainContent .BlockPage,
#MainContent .BlockPageObject {
    max-width: 100% !important;
    height: auto !important;
    background: rgba(0, 0, 0, .18) !important;
    border-color: var(--border-dim) !important;
    color: var(--text-primary) !important;
}

#MainContent .PercentageBar {
    background: linear-gradient(90deg, #765712, #d4af37) !important;
}

#MainContent .modal-content {
    background: #120f0a !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

@media screen and (max-width: 1200px) {
    #MainContent .AuctionBody {
        grid-template-columns: minmax(105px, .7fr) minmax(190px, 1.25fr) minmax(175px, 1fr);
    }
    #MainContent .CurrentBid { grid-column: 1 / -1; min-height: 0; }
}

@media screen and (max-width: 700px) {
    #MainContent .AuctionBody { grid-template-columns: 1fr; }
    #MainContent .AuctionBodyBlock {
        min-height: 0;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(212, 175, 55, .18) !important;
    }
    #MainContent .Steps { flex-direction: column; }
}

/* DIRECT CHARACTER SALES */
.bazaar-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 7px;
    font-weight: 600;
}

.bazaar-alert-success {
    color: #86efac;
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .45);
}

.bazaar-alert-error {
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .45);
}

.direct-sale-panel,
.bazaar-toolbar,
.bazaar-empty {
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
}

.direct-sale-panel { padding: 26px; }

.direct-sale-heading,
.bazaar-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.direct-sale-heading {
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-dim);
}

.direct-sale-heading > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(212, 175, 55, .1);
    font-size: 22px;
}

.direct-sale-heading h2,
.bazaar-toolbar h2 {
    margin: 0 0 4px !important;
    color: var(--accent) !important;
}

.direct-sale-heading p,
.bazaar-toolbar p { margin: 0 !important; color: var(--text-secondary); }

.direct-sale-form {
    display: grid;
    gap: 11px;
    max-width: 620px;
    margin: 0 auto;
}

.direct-sale-form label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent-hover);
    font-weight: 700;
}

.direct-sale-form label i {
    color: var(--accent);
}

.direct-sale-summary {
    display: flex;
    justify-content: space-between;
    margin: 7px 0;
    padding: 12px 14px;
    color: var(--text-secondary);
    background: rgba(212, 175, 55, .06);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
}
.direct-sale-summary strong { color: var(--accent-hover); }

.bazaar-toolbar {
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 18px 20px;
}

.bazaar-sell-link,
.direct-listing-action a,
.direct-listing-action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    color: #fff !important;
    background: linear-gradient(135deg, #352706, #765712) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
}

.bazaar-empty {
    padding: 35px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.direct-listings { display: grid; gap: 14px; }

.direct-listing-card {
    display: grid;
    grid-template-columns: 70px minmax(220px, 1fr) minmax(135px, auto) minmax(130px, auto);
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.direct-character-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    color: var(--accent);
    background: rgba(212, 175, 55, .08);
    border: 1px solid var(--border-dim);
    border-radius: 50%;
    font-size: 27px;
}

.direct-character-outfit {
    overflow: hidden;
    border-radius: 9px;
}

.direct-character-outfit img {
    display: block;
    max-width: 58px;
    max-height: 58px;
}

.direct-character-outfit > i,
.direct-character-outfit > svg { display: none; }

.direct-character-info h3 { margin: 0 0 7px !important; color: var(--accent-hover) !important; }
.direct-character-link { color: var(--accent-hover) !important; }
.direct-character-link:hover { color: #fff2a8 !important; }
.direct-character-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-secondary); font-size: 13px; }
.direct-character-stats i { color: var(--accent); }

.direct-listing-price { text-align: right; }
.direct-listing-price small { display: block; color: var(--text-secondary); text-transform: uppercase; }
.direct-listing-price strong { display: block; color: var(--accent-hover); font-size: 20px; white-space: nowrap; }
.direct-listing-price i { color: var(--accent); }
.direct-listing-action { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.direct-listing-action form { margin: 0; }
.own-listing-label { color: var(--text-secondary); font-weight: 700; }

.direct-listing-action .danger-button {
    background: linear-gradient(135deg, #4a1111, #8b1e1e) !important;
    border-color: #ef4444 !important;
}

.bazaar-detail {
    display: grid;
    gap: 18px;
}

.bazaar-detail-topbar {
    display: flex;
    justify-content: flex-start;
}

.bazaar-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-hover) !important;
    font-weight: 700;
}

.bazaar-detail-back-row { margin-top: 18px; }

.bazaar-detail-hero,
.bazaar-detail-section,
.bazaar-detail-purchase {
    padding: 22px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
}

.bazaar-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr);
    gap: 28px;
    align-items: center;
}

.bazaar-detail-character {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.bazaar-detail-outfit {
    display: grid;
    place-items: center;
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    overflow: hidden;
    background: rgba(212, 175, 55, .06);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
}

.bazaar-detail-outfit img {
    max-width: 96px;
    max-height: 96px;
}

.bazaar-detail-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bazaar-detail-character h2 {
    margin: 0 0 10px !important;
    color: var(--accent-hover) !important;
    overflow-wrap: anywhere;
}

.bazaar-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bazaar-detail-tags span {
    padding: 5px 9px;
    color: var(--text-secondary);
    background: rgba(212, 175, 55, .06);
    border: 1px solid var(--border-dim);
    border-radius: 999px;
    font-size: 12px;
}

.bazaar-detail-sale-info {
    padding-left: 24px;
    border-left: 1px solid var(--border-dim);
}

.bazaar-detail h3 {
    margin: 0 0 15px !important;
    color: var(--accent-hover) !important;
}

.bazaar-detail-sale-info dl { margin: 0; }
.bazaar-detail-sale-info dl div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 0;
}
.bazaar-detail-sale-info dt { color: var(--text-secondary); }
.bazaar-detail-sale-info dd { margin: 0; color: var(--text-primary); font-weight: 700; text-align: right; }
.bazaar-detail-sale-info i { color: var(--accent); }

.bazaar-detail-section > h3 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-dim);
}

.bazaar-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bazaar-detail-stats > div {
    min-width: 0;
    padding: 13px 14px;
    background: rgba(212, 175, 55, .045);
    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: 6px;
}

.bazaar-detail-stats span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}

.bazaar-detail-stats strong {
    display: block;
    color: var(--text-primary);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.bazaar-detail-stats-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bazaar-detail-skill-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bazaar-item-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-dim);
}

.bazaar-item-tabs button {
    padding: 9px 12px;
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 700;
    cursor: pointer;
}

.bazaar-item-tabs button.active {
    color: var(--accent-hover) !important;
    border-bottom-color: var(--accent) !important;
}

.bazaar-item-panel[hidden] { display: none; }

.bazaar-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 43px);
    gap: 5px;
}

.bazaar-item {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 43px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(212, 175, 55, .28);
    border-radius: 4px;
}

.bazaar-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.bazaar-item > strong {
    position: absolute;
    right: 2px;
    bottom: 1px;
    max-width: calc(100% - 4px);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
}

.bazaar-item-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    font-size: 9px;
    overflow: hidden;
}

.bazaar-item-empty {
    padding: 25px;
    color: var(--text-secondary);
    text-align: center;
    background: rgba(0, 0, 0, .2);
    border: 1px dashed var(--border-dim);
    border-radius: 6px;
}

.bazaar-detail-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bazaar-detail-purchase h3 { margin-bottom: 5px !important; }
.bazaar-detail-purchase p { margin: 0 !important; color: var(--text-secondary); }

/* Account internal pages */
.page-account .account-inner-panel {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 22px;
    color: var(--text-primary);
    background: linear-gradient(145deg, rgba(20, 17, 10, .96), rgba(8, 8, 7, .98));
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.page-account .account-inner-panel .modern-section-heading {
    margin: -22px -22px 22px;
    padding: 18px 22px;
    background: rgba(212, 175, 55, .055);
    border-bottom: 1px solid var(--border-dim);
}

.page-account .account-modern-form {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.page-account .account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.page-account .account-form-grid > div,
.page-account .account-modern-form > div {
    min-width: 0;
}

.page-account .account-modern-form label:not(.account-option-card) {
    display: block;
    margin-bottom: 7px;
    color: #d8c99c;
    font-weight: 700;
}

.page-account .account-modern-form input[type="text"],
.page-account .account-modern-form input[type="password"],
.page-account .account-modern-form input[type="email"],
.page-account .account-modern-form select {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.page-account .account-form-notice,
.page-account .account-danger-notice {
    margin-bottom: 18px;
    padding: 13px 15px;
    line-height: 1.55;
    background: rgba(212, 175, 55, .07);
    border: 1px solid rgba(212, 175, 55, .28);
    border-left: 3px solid var(--accent);
    border-radius: 5px;
}

.page-account .account-danger-notice {
    color: #ffb4b4;
    background: rgba(180, 35, 35, .12);
    border-color: rgba(255, 85, 85, .35);
    border-left-color: #e34b4b;
}

.page-account .account-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 17px;
    border-top: 1px solid rgba(212, 175, 55, .2);
}

.page-account .account-primary-button,
.page-account .account-secondary-button,
.page-account .account-danger-button,
.page-account .account-form-actions button,
.page-account .account-form-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    color: #171207 !important;
    font-family: Cinzel, serif;
    font-weight: 800;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    background: linear-gradient(#f0cb4f, #b98a08) !important;
    border: 1px solid #f1cf56 !important;
    text-shadow: none !important;
    border-radius: 5px;
    box-sizing: border-box;
}

.page-account .account-secondary-button {
    color: #ead88e !important;
    background: rgba(212, 175, 55, .08) !important;
    border-color: rgba(212, 175, 55, .55) !important;
}

.page-account .account-form-actions a:not(.account-primary-button):not(.account-danger-button) {
    color: #ead88e !important;
    background: rgba(212, 175, 55, .08) !important;
    border-color: rgba(212, 175, 55, .55) !important;
}

.page-account .account-danger-button {
    color: #fff !important;
    background: linear-gradient(#b64040, #741d1d) !important;
    border-color: #d65a5a !important;
}

.page-account .account-form-actions button:hover,
.page-account .account-primary-button:hover {
    color: #0d0a03 !important;
    background: linear-gradient(#ffe17a, #d8a91d) !important;
    box-shadow: 0 0 14px rgba(212, 175, 55, .3) !important;
}

.page-account .account-character-section {
    min-width: 0;
    margin: 0;
    padding: 16px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(212, 175, 55, .24);
    border-radius: 6px;
}

.page-account .account-country-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.page-account .account-country-field img {
    width: 24px;
    height: auto;
}

.page-account .account-character-section legend {
    padding: 0 8px;
    color: var(--accent);
    font-family: Cinzel, serif;
    font-size: 16px;
    font-weight: 800;
}

.page-account .account-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.page-account .account-name-row #character_indicator {
    width: 18px;
    height: 18px;
}

.page-account .account-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}

.page-account .account-option-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    color: #e7ddb9;
    cursor: pointer;
    background: rgba(212, 175, 55, .045);
    border: 1px solid rgba(212, 175, 55, .22);
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color .2s ease, background .2s ease;
}

.page-account .account-option-card:hover,
.page-account .account-option-card:has(input:checked) {
    background: rgba(212, 175, 55, .12);
    border-color: var(--accent);
}

.page-account .account-option-card input {
    accent-color: var(--accent);
}

.page-account .account-world-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    background: rgba(212, 175, 55, .06);
    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: 5px;
}

.page-account .account-world-summary span,
.page-account .account-world-summary strong,
.page-account .required-mark {
    color: var(--accent);
}

.page-account .account-field-feedback {
    display: block;
    min-height: 18px;
    margin-top: 7px;
}

.page-account .account-balance-summary {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.page-account .account-check-card {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 14px;
    cursor: pointer;
    background: rgba(212, 175, 55, .055);
    border: 1px solid rgba(212, 175, 55, .24);
    border-radius: 6px;
}

.page-account .account-check-card input {
    margin-top: 4px;
    accent-color: var(--accent);
}

.page-account .account-check-card span,
.page-account .account-check-card small {
    display: block;
}

.page-account .account-detail-list {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    background: rgba(212, 175, 55, .14);
    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: 6px;
}

.page-account .account-detail-list > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 15px;
    padding: 13px 15px;
    background: rgba(8, 8, 7, .96);
}

.page-account .account-detail-list dt { color: #d8c99c; font-weight: 700; }
.page-account .account-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.page-account .account-state-panel {
    padding-block: 42px;
    text-align: center;
}

.page-account .account-state-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 27px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 50%;
}

.page-account .account-state-panel h2 { margin: 0 0 8px; color: var(--accent); }
.page-account .account-state-panel p { margin: 0 0 22px; color: var(--text-secondary); }

.page-account .account-registration-panel { max-width: 880px; }
.page-account .account-registration-panel .account-character-section { display: grid; gap: 16px; }
.page-account .account-registration-options { display: grid; gap: 9px; }
.page-account .account-registration-options > strong { color: #d8c99c; }
.page-account .account-compact-notice { margin: 0; }
.page-account .account-captcha { display: grid; gap: 8px; overflow: hidden; }
.page-account .account-inline-action { margin-top: 6px; font-size: 12px; }
.page-account .account-inline-action a { color: var(--accent) !important; }
.page-account #SuggestCharacterName { padding: 0; }
.page-account #SuggestCharacterName a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    color: inherit !important;
    text-decoration: none;
}
.page-account .FormFieldError { color: #ff7777 !important; }
.page-account .account-rules-check { margin-top: 2px !important; }

.page-account .account-check-card small {
    margin-top: 4px;
    color: var(--text-secondary);
    font-weight: 400;
}

.page-account .validation-success { color: #71d17d; }
.page-account .validation-error { color: #ff7777; }

@media screen and (max-width: 650px) {
    .page-account .account-inner-panel { padding: 15px; }
    .page-account .account-inner-panel .modern-section-heading { margin: -15px -15px 18px; padding: 15px; }
    .page-account .account-form-grid { grid-template-columns: 1fr; }
    .page-account .account-name-row { grid-template-columns: minmax(0, 1fr) auto; }
    .page-account .account-name-row .account-secondary-button { grid-column: 1 / -1; }
    .page-account .account-form-actions > * { flex: 1 1 100%; }
}

@media screen and (max-width: 800px) {
    .bazaar-toolbar { align-items: flex-start; flex-direction: column; }
    .direct-listing-card { grid-template-columns: 56px 1fr; }
    .direct-character-icon { width: 52px; height: 52px; }
    .direct-listing-price { grid-column: 1 / -1; text-align: left; }
    .direct-listing-action { grid-column: 1 / -1; }
    .direct-listing-action button, .direct-listing-action a { width: 100%; }
    .bazaar-detail-hero { grid-template-columns: 1fr; }
    .bazaar-detail-sale-info { padding: 20px 0 0; border-top: 1px solid var(--border-dim); border-left: 0; }
    .bazaar-detail-stats, .bazaar-detail-stats-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bazaar-detail-purchase { align-items: flex-start; flex-direction: column; }
    .bazaar-detail-purchase .direct-listing-action { width: 100%; }
    .bazaar-item-tabs { overflow-x: auto; }
    .bazaar-item-tabs button { flex: 0 0 auto; }
}

@media screen and (max-width: 500px) {
    .bazaar-detail-hero, .bazaar-detail-section, .bazaar-detail-purchase { padding: 16px; }
    .bazaar-detail-character { align-items: flex-start; }
    .bazaar-detail-outfit { flex-basis: 82px; width: 82px; height: 82px; }
    .bazaar-detail-outfit img { max-width: 76px; max-height: 76px; }
    .bazaar-detail-stats, .bazaar-detail-stats-compact { grid-template-columns: 1fr; }
}

/* MODERN SERVER INFO */
.server-info-hero,
.server-info-section,
.server-info-save {
    margin-bottom: 18px;
    padding: 20px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.server-info-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}

.server-info-hero-icon,
.server-info-section-title > i {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--accent);
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 50%;
    font-size: 21px;
}

.server-info-hero h2,
.server-info-section-title h3,
.server-rate-panel h4 {
    margin: 0 0 4px !important;
    color: var(--accent) !important;
}

.server-info-hero p,
.server-info-section-title p { margin: 0 !important; color: var(--text-secondary); }

.server-info-address {
    margin-left: auto;
    padding: 11px 15px;
    background: rgba(212, 175, 55, .07);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    text-align: right;
}
.server-info-address small { display: block; color: var(--text-secondary); font-size: 10px; letter-spacing: 1px; }
.server-info-address strong { color: var(--accent-hover); font-size: 17px; }
.server-info-address i { color: var(--accent); }

.server-info-quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
#MainContent .server-info-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
}
#MainContent .server-info-quick-links a:hover { color: var(--accent-hover) !important; border-color: var(--accent); }

.server-info-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.server-info-section-title > i { width: 42px; height: 42px; font-size: 18px; }

.server-info-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.server-info-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
.server-info-card > i { grid-row: 1 / 3; color: var(--accent); font-size: 19px; }
.server-info-card small { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.server-info-card strong { color: var(--accent-hover); }

.server-info-save { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.server-info-save .server-info-section-title { margin-bottom: 0; }
.server-save-countdown { display: flex; align-items: center; gap: 8px; }
.server-save-countdown > div {
    min-width: 64px;
    padding: 9px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    text-align: center;
}
.server-save-countdown strong { display: block; color: var(--accent-hover); font-size: 23px; line-height: 1; }
.server-save-countdown small { color: var(--text-secondary); font-size: 9px; text-transform: uppercase; }
.server-save-countdown > span { color: var(--accent); font-size: 20px; }

.server-rate-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.server-rate-summary > div {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    padding: 13px 15px;
    background: rgba(212, 175, 55, .06);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
.server-rate-summary i { color: var(--accent); font-size: 18px; }
.server-rate-summary span { color: var(--text-secondary); }
.server-rate-summary strong { color: var(--accent-hover); font-size: 18px; }
.server-rate-summary-fallback { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.server-rates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.server-rate-panel {
    overflow: hidden;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
}
.server-rate-panel-exp { grid-column: 1 / -1; }
.server-rate-panel header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-dim); }
.server-rate-panel header > i { color: var(--accent); font-size: 20px; }
.server-rate-panel header small { color: var(--text-secondary); }
.server-rate-table-wrap { max-height: 365px; overflow: auto; }
.server-rate-table { width: 100%; border-collapse: collapse; }
.server-rate-table th,
.server-rate-table td { padding: 9px 13px; border-bottom: 1px solid rgba(212, 175, 55, .1); text-align: center; }
.server-rate-table th { position: sticky; top: 0; z-index: 1; color: var(--accent); background: #15130e; text-transform: uppercase; font-size: 10px; }
.server-rate-table td { color: var(--text-secondary); }
.server-rate-table td strong { color: var(--accent-hover); }
.server-rate-table tbody tr:hover { background: rgba(212, 175, 55, .04); }
@media screen and (max-width: 800px) {
    .server-info-hero,
    .server-info-save { align-items: flex-start; flex-direction: column; }
    .server-info-address { width: 100%; margin-left: 0; text-align: left; }
    .server-info-cards,
    .server-rates-grid { grid-template-columns: 1fr; }
    .server-rate-panel-exp { grid-column: auto; }
    .server-rate-summary,
    .server-rate-summary-fallback { grid-template-columns: 1fr; }
    .server-save-countdown { width: 100%; justify-content: center; }
}

@media screen and (max-width: 480px) {
    .server-info-hero,
    .server-info-section,
    .server-info-save { padding: 15px; }
    .server-info-hero-icon { display: none; }
    .server-info-quick-links a { flex: 1 1 100%; justify-content: center; }
    .server-save-countdown { gap: 4px; }
    .server-save-countdown > div { min-width: 57px; }
}

/* WHO IS ONLINE */
.online-section {
    margin-bottom: 18px;
    padding: 20px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.online-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.online-heading-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--accent);
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 50%;
    font-size: 18px;
}

.online-section-heading h2 { margin: 0 0 4px !important; color: var(--accent) !important; }
.online-section-heading p { margin: 0 !important; color: var(--text-secondary); }

.online-vocation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.online-vocation-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 13px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
.online-vocation-card > i { grid-row: 1 / 3; color: var(--accent); font-size: 19px; }
.online-vocation-card small { display: block; color: var(--text-secondary); }
.online-vocation-card strong { display: block; color: var(--accent-hover); font-size: 22px; line-height: 1; }
.online-vocation-card > span { grid-column: 2; color: var(--success); font-size: 9px; text-transform: uppercase; }

.online-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding: 8px 13px;
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: 6px;
}
.online-total strong { color: var(--success); font-size: 23px; }
.online-total small { color: var(--text-secondary); text-transform: uppercase; }

.online-table-wrap { overflow-x: auto; border: 1px solid var(--border-dim); border-radius: 7px; }
.online-player-table { width: 100%; border-collapse: collapse; }
.online-player-table th,
.online-player-table td { padding: 12px 14px; border-bottom: 1px solid rgba(212, 175, 55, .1); text-align: left; }
.online-player-table th { color: var(--accent); background: rgba(212, 175, 55, .07); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.online-player-table td { color: var(--text-secondary); }
.online-player-table tbody tr:last-child td { border-bottom: 0; }
.online-player-table tbody tr:hover { background: rgba(212, 175, 55, .04); }
.online-player-table td strong { color: var(--accent-hover); }
.online-character-name { min-width: 190px; }
.online-character-name > i { margin-right: 7px; color: var(--success); font-size: 7px; }
.online-character-name a { color: var(--accent-hover) !important; font-weight: 700; }
.online-outfit-column { width: 75px; text-align: center !important; }
.online-outfit-column img { display: block; width: 64px; height: 64px; margin: -12px auto; object-fit: contain; }
.online-country-column { width: 65px; text-align: center !important; }

.online-empty {
    padding: 32px 20px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, .18);
    border: 1px dashed var(--border-dim);
    border-radius: 7px;
    text-align: center;
}
.online-empty i { margin-right: 7px; color: var(--accent); }

.online-search-form { max-width: 680px; margin: 0 auto; }
.online-search-form label { display: block; margin-bottom: 7px; color: var(--accent-hover); font-weight: 700; }
.online-search-form > div { display: flex; gap: 9px; }
.online-search-form input {
    min-width: 0;
    flex: 1;
    padding: 11px 13px;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    outline: none;
}
.online-search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212, 175, 55, .08); }
.online-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    color: #fff;
    background: linear-gradient(135deg, #352706, #765712);
    border: 1px solid var(--accent);
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

@media screen and (max-width: 950px) {
    .online-vocation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
    .online-section { padding: 15px; }
    .online-vocation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .online-players-heading { align-items: flex-start; flex-wrap: wrap; }
    .online-total { width: 100%; margin-left: 0; justify-content: center; }
    .online-search-form > div { flex-direction: column; }
    .online-search-form button { width: 100%; }
}

@media screen and (max-width: 390px) {
    .online-vocation-grid { grid-template-columns: 1fr; }
}

/* UNIVERSAL MODERN PAGE SYSTEM */
.page-createaccount #createaccount > .TableContainer,
.page-rules #MainContent > .TableContainer,
.page-downloadclient #MainContent > .TableContainer {
    padding: 20px !important;
    background: rgba(0, 0, 0, .25) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2) !important;
}
.page-createaccount #createaccount .CaptionContainer,
.page-rules #MainContent .CaptionContainer,
.page-downloadclient #MainContent .CaptionContainer { margin: -20px -20px 18px !important; padding: 15px 20px !important; }
.page-createaccount #createaccount .CaptionContainer .Text,
.page-rules #MainContent .CaptionContainer .Text,
.page-downloadclient #MainContent .CaptionContainer .Text { justify-content: flex-start; }
.page-createaccount #createaccount .TableContent { border: 0 !important; }
.page-createaccount #createaccount .LabelV { width: 180px !important; }
.page-createaccount #createaccount .OptionContainer { display: block; margin: 6px 0; }
.page-createaccount #createaccount input[type="radio"] { accent-color: var(--accent); }
.page-rules #MainContent .TableContent td { line-height: 1.7; }
.page-rules #MainContent ol,
.page-rules #MainContent ul { padding-left: 24px; }
.page-rules #MainContent li { margin-bottom: 8px; color: var(--text-secondary); }
.page-downloadclient #MainContent .TableContent { border: 0 !important; }
.page-downloadclient #MainContent .fa-windows { color: var(--accent) !important; filter: drop-shadow(0 0 14px rgba(212, 175, 55, .25)); }
.page-downloadclient #MainContent .TableContent a { display: inline-block; padding: 18px 25px; color: var(--accent-hover) !important; background: rgba(212, 175, 55, .055); border: 1px solid var(--border-dim); border-radius: 8px; }

.bugtracker-login-action { display: flex; justify-content: center; margin-top: 14px; }
#MainContent .bugtracker-login-action a { padding: 10px 18px; color: #fff !important; background: linear-gradient(135deg, #352706, #765712); border: 1px solid var(--accent); border-radius: 5px; }
.page-bugtracker #MainContent > table { overflow: hidden; margin-bottom: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--border-dim); border-radius: 7px; }
.page-bugtracker #MainContent > table td { padding: 11px 13px; }
.page-bugtracker #MainContent > form { padding: 20px !important; background: rgba(0, 0, 0, .22) !important; border: 1px solid var(--border-dim) !important; border-radius: 8px !important; }

.modern-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.modern-section-heading h2 { margin: 0 0 4px !important; color: var(--accent) !important; }
.modern-section-heading p { margin: 0 !important; color: var(--text-secondary); }
.modern-section-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--accent);
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 50%;
    font-size: 18px;
}
.modern-section-count {
    margin-left: auto;
    padding: 7px 11px;
    color: var(--accent-hover);
    background: rgba(212, 175, 55, .07);
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    font-size: 11px;
    text-transform: uppercase;
}
.modern-empty-state {
    padding: 32px 20px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, .18);
    border: 1px dashed var(--border-dim);
    border-radius: 7px;
    text-align: center;
}
.modern-empty-state i { margin-right: 7px; color: var(--accent); }

.modern-news-card,
.news-archive-panel {
    margin-bottom: 18px;
    padding: 20px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.modern-news-card > header { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; border-bottom: 1px solid var(--border-dim); }
.modern-news-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid var(--border-dim);
    border-radius: 50%;
}
.modern-news-icon img { max-width: 32px !important; max-height: 32px; }
.modern-news-heading h2 { margin: 2px 0 0 !important; color: var(--accent-hover) !important; }
.modern-news-heading small,
.modern-news-author { color: var(--text-secondary); }
.modern-news-heading i,
.modern-news-author i { color: var(--accent); }
.modern-news-author { margin-left: auto; }
.modern-news-content { padding: 18px 2px 2px; }
.modern-news-card > footer { display: flex; justify-content: flex-end; padding-top: 13px; border-top: 1px solid var(--border-dim); }

.news-archive-list { display: grid; gap: 9px; }
#MainContent .news-archive-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
#MainContent .news-archive-item:hover { background: rgba(212, 175, 55, .065); border-color: var(--accent); transform: translateY(-1px); }
.news-archive-icon { display: grid; place-items: center; width: 38px; height: 38px; background: rgba(212, 175, 55, .08); border-radius: 50%; }
.news-archive-copy strong { display: block; color: var(--accent-hover); }
.news-archive-copy small { display: block; color: var(--text-secondary); }
.news-archive-copy i,
.news-archive-item > i { color: var(--accent); }

/* ACCOUNT */
.account-auth-panel,
.account-recovery-panel {
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 24px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.account-auth-form { display: grid; gap: 9px; max-width: 480px; margin: 0 auto; }
.account-auth-form > label:not(.account-remember),
.account-recovery-form label { color: var(--accent-hover); font-weight: 700; }
.account-input-icon { position: relative; }
.account-input-icon > i { position: absolute; z-index: 1; left: 14px; top: 50%; color: var(--accent); transform: translateY(-50%); }
.account-input-icon input { padding-left: 42px !important; }
.account-authenticator-reward { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 9px 11px; color: #d8c99c; font-size: 12px; line-height: 1.4; background: rgba(202, 166, 79, .08); border: 1px solid rgba(202, 166, 79, .28); border-radius: 5px; }
.account-authenticator-reward i { color: var(--accent); }
.account-authenticator-reward strong { color: var(--accent-hover); }
.account-remember { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--text-secondary); font-weight: 400 !important; }
.account-remember input { accent-color: var(--accent); }
.account-auth-error { padding: 10px 12px; color: #fca5a5; background: rgba(239, 68, 68, .09); border: 1px solid rgba(239, 68, 68, .35); border-radius: 6px; }
.account-auth-form button { margin-top: 5px; }
.account-auth-links { display: flex; justify-content: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-dim); }
#MainContent .account-auth-links a { padding: 8px 11px; color: var(--text-secondary) !important; border: 1px solid var(--border-dim); border-radius: 5px; }
#MainContent .account-auth-links a:hover { color: var(--accent-hover) !important; border-color: var(--accent); }

#account-manage.account-dashboard { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
#account-manage .account-dashboard-nav { position: static; width: 100% !important; min-width: 0; }
#account-manage .account-action-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#account-manage .account-action-menu a { width: 100%; padding: 9px 11px !important; font-size: 10px !important; }
#account-manage .account-dashboard-content { width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 20px !important; overflow: hidden; background: rgba(0, 0, 0, .22); border: 1px solid var(--border-dim); border-radius: 9px; }
.account-welcome { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--border-dim); }
.account-welcome h1 { margin: 0 0 4px !important; color: var(--accent) !important; }
.account-welcome p { margin: 0 !important; color: var(--text-secondary); }
#account-manage .account-dashboard-content > h2 { margin: 22px 0 10px !important; padding-bottom: 8px; color: var(--accent) !important; border-bottom: 1px solid var(--border-dim); font-size: 18px; }
.account-info-table,
.account-data-table { margin: 0 0 14px !important; overflow: hidden; border: 1px solid var(--border-dim); border-radius: 7px; }
.account-info-table td:first-child { width: 145px !important; color: var(--text-secondary); font-weight: 700; }
.account-status-online { color: var(--success); font-weight: 700; }
.account-status-offline { color: var(--danger); }
.account-status-online i,
.account-status-offline i { font-size: 7px; }
.account-character-actions { margin: 12px 0 0 !important; }
.account-character-actions td { border: 0 !important; text-align: center; }
.page-accountmanagement #MainContent { overflow-x: hidden; }
.account-character-table { display: table; width: 100% !important; table-layout: fixed; }
.account-character-table th,
.account-character-table td { padding: 9px 7px !important; overflow-wrap: anywhere; font-size: 12px; }
.account-character-table th:nth-child(1) { width: 16%; }
.account-character-table th:nth-child(2) { width: 9%; }
.account-character-table th:nth-child(3) { width: 17%; }
.account-character-table th:nth-child(4) { width: 12%; }
.account-character-table th:nth-child(5) { width: 18%; }
.account-character-table th:nth-child(6) { width: 12%; }
.account-character-table th:nth-child(7),
.account-character-table th:nth-child(8) { width: 8%; }

.account-recovery-info { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 12px 14px; color: var(--text-secondary); background: rgba(212, 175, 55, .06); border: 1px solid var(--border-dim); border-radius: 7px; }
.account-recovery-info i { color: var(--accent); font-size: 20px; }
.account-recovery-info p { margin: 0 !important; }
.account-recovery-form { display: grid; gap: 18px; }
.account-recovery-fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.account-recovery-fields label { display: block; margin-bottom: 6px; }
.account-recovery-fields > span { padding-bottom: 11px; color: var(--text-secondary); text-transform: uppercase; }
.account-recovery-options { display: grid; gap: 8px; margin: 0; padding: 14px; border: 1px solid var(--border-dim); border-radius: 7px; }
.account-recovery-options legend { padding: 0 7px; color: var(--accent); font-family: var(--font-heading); }
.account-recovery-options label { display: flex; align-items: center; gap: 10px; padding: 11px; background: rgba(255, 255, 255, .025); border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.account-recovery-options label:hover { border-color: var(--border-dim); }
.account-recovery-options input { accent-color: var(--accent); }
.account-recovery-options label > span { display: grid; grid-template-columns: 25px 1fr; align-items: center; flex: 1; }
.account-recovery-options label i { grid-column: 1; grid-row: 1 / 3; color: var(--accent); }
.account-recovery-options label strong { grid-column: 2; grid-row: 1; }
.account-recovery-options label small { grid-column: 2; grid-row: 2; color: var(--text-secondary); font-weight: 400; }

@media screen and (max-width: 850px) {
    #account-manage .account-action-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-character-table { display: block; overflow-x: auto; table-layout: auto; }
    .account-character-table tbody { min-width: 680px; display: table; width: 100%; }
}

@media screen and (max-width: 600px) {
    .account-auth-panel,
    .account-recovery-panel { padding: 16px; }
    .account-auth-links,
    .account-recovery-fields { grid-template-columns: 1fr; flex-direction: column; }
    .account-auth-links a { width: 100%; text-align: center; }
    .account-recovery-fields { display: grid; }
    .account-recovery-fields > span { padding: 0; text-align: center; }
    #account-manage .account-action-menu { grid-template-columns: 1fr; }
    #account-manage .account-dashboard-content { padding: 14px !important; }
    .account-character-table { display: block; overflow-x: auto; }
}

/* COMMUNITY: CHARACTERS & HIGHSCORES */
.community-panel {
    margin-bottom: 18px;
    padding: 20px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.last-kills-list { display: grid; gap: 9px; }
.last-kill-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-dim); border-radius: 7px; }
.last-kill-rank { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); background: rgba(212, 175, 55, .08); border-radius: 50%; font-weight: 700; }
.last-kill-description { color: var(--text-primary); }
.last-kill-description a { color: var(--accent-hover) !important; }
.last-kill-item time,
.last-kill-item small { color: var(--text-secondary); font-size: 11px; }
.last-kill-item time i { color: var(--accent); }

.guild-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guild-card { position: relative; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 13px; padding: 15px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-dim); border-radius: 8px; }
.guild-card-logo { display: grid; place-items: center; width: 70px; height: 70px; background: rgba(212, 175, 55, .06); border: 1px solid var(--border-dim); border-radius: 7px; }
.guild-card-logo img { object-fit: contain; }
.guild-card-copy h3 { margin: 0 0 5px !important; color: var(--accent-hover) !important; }
.guild-card-copy p { display: -webkit-box; overflow: hidden; margin: 0 !important; color: var(--text-secondary); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#MainContent .guild-view-link { grid-column: 1 / -1; display: flex; justify-content: center; gap: 7px; padding: 8px 11px; color: var(--text-primary) !important; background: rgba(212, 175, 55, .07); border: 1px solid var(--border-dim); border-radius: 5px; }
#MainContent .guild-view-link:hover { color: var(--accent-hover) !important; border-color: var(--accent); }
#MainContent .guild-delete-link { position: absolute; top: 8px; right: 8px; color: var(--danger) !important; }
.guild-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--border-dim); }
.guild-actions form,
.guild-actions p { width: auto !important; margin: 0 !important; }
.guild-actions details { color: var(--text-secondary); }
.guild-actions details[open] { padding: 9px; background: rgba(0, 0, 0, .2); border: 1px solid var(--border-dim); border-radius: 6px; }
.guild-actions details a { display: block; margin-top: 6px; }
#MainContent .guild-login-link { padding: 9px 14px; color: #fff !important; background: linear-gradient(135deg, #352706, #765712); border: 1px solid var(--accent); border-radius: 5px; }

.staff-groups { display: grid; gap: 14px; }
.staff-group { overflow: hidden; background: rgba(0, 0, 0, .18); border: 1px solid var(--border-dim); border-radius: 8px; }
.staff-group > header { display: flex; align-items: center; gap: 9px; padding: 12px 15px; background: rgba(212, 175, 55, .065); border-bottom: 1px solid var(--border-dim); }
.staff-group > header i { color: var(--accent); }
.staff-group > header h3 { margin: 0 !important; color: var(--accent-hover) !important; }
.staff-group > header span { margin-left: auto; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; }
.staff-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.staff-member-card { position: relative; display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; min-height: 92px; padding: 12px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-dim); border-radius: 7px; }
.staff-outfit,
.staff-avatar { display: grid; place-items: center; width: 66px; height: 66px; background: rgba(212, 175, 55, .06); border-radius: 50%; }
.staff-outfit img { max-width: 64px !important; max-height: 64px; object-fit: contain; }
.staff-avatar { color: var(--accent); font-size: 22px; }
.staff-member-copy h4 { margin: 0 0 5px !important; }
.staff-member-copy h4 a { color: var(--accent-hover) !important; }
.staff-member-copy span,
.staff-member-copy small { display: block; color: var(--text-secondary); font-size: 11px; }
.staff-online { color: var(--success) !important; }
.staff-offline { color: var(--danger) !important; }
.staff-online i,
.staff-offline i { font-size: 7px; }
.staff-flag { position: absolute; top: 9px; right: 9px; }

.bans-table-wrap { overflow-x: auto; border: 1px solid var(--border-dim); border-radius: 7px; }
.bans-modern-table { min-width: 720px; margin: 0 !important; border-collapse: collapse; }
.bans-modern-table tr:first-child td { color: var(--accent); background: rgba(212, 175, 55, .075) !important; font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; }
.bans-modern-table td { padding: 12px 13px !important; border-bottom: 1px solid rgba(212, 175, 55, .1) !important; }
.bans-modern-table tr:last-child td { border-bottom: 0 !important; }
.bans-modern-table a { color: var(--accent-hover) !important; }
.bans-pagination { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
#MainContent .bans-pagination a { padding: 8px 11px; color: var(--text-primary) !important; background: rgba(212, 175, 55, .06); border: 1px solid var(--border-dim); border-radius: 5px; }
#MainContent .bans-pagination a:hover { color: var(--accent-hover) !important; border-color: var(--accent); }

/* FORUM */
.forum-panel { margin-bottom: 18px; padding: 20px; background: rgba(0, 0, 0, .25); border: 1px solid var(--border-dim); border-radius: 9px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.forum-panel .modern-section-heading > time { margin-left: auto; color: var(--text-secondary); font-size: 11px; }
.forum-panel .modern-section-heading > time i { color: var(--accent); }
.forum-login-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 11px 13px; color: var(--text-secondary); background: rgba(212, 175, 55, .055); border: 1px solid var(--border-dim); border-radius: 6px; }
.forum-login-notice > i { color: var(--accent); }
#MainContent .forum-login-notice a { margin-left: auto; padding: 6px 10px; color: var(--accent-hover) !important; border: 1px solid var(--border-dim); border-radius: 5px; }
.forum-board-list { display: grid; gap: 10px; }
.forum-board-card { position: relative; display: grid; grid-template-columns: 52px minmax(180px, 1fr) minmax(130px, auto) minmax(150px, auto) 34px; align-items: center; gap: 14px; padding: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-dim); border-radius: 8px; transition: .2s ease; }
.forum-board-card:hover { background: rgba(212, 175, 55, .045); border-color: rgba(212, 175, 55, .42); transform: translateY(-1px); }
.forum-board-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent); background: rgba(212, 175, 55, .08); border-radius: 50%; font-size: 19px; }
.forum-board-copy h3 { margin: 0 0 4px !important; }
.forum-board-copy h3 a { color: var(--accent-hover) !important; }
.forum-board-copy p { margin: 0 !important; color: var(--text-secondary); font-size: 12px; }
.forum-board-stats { display: flex; gap: 12px; }
.forum-board-stats span { color: var(--text-secondary); font-size: 10px; text-transform: uppercase; }
.forum-board-stats strong { display: block; color: var(--accent-hover); font-size: 17px; text-align: center; }
.forum-last-post { padding-left: 13px; border-left: 1px solid var(--border-dim); }
.forum-last-post small,
.forum-last-post strong,
.forum-last-post span { display: block; }
.forum-last-post small,
.forum-last-post span { color: var(--text-secondary); font-size: 10px; }
.forum-last-post strong { color: var(--text-primary); font-size: 11px; }
.forum-enter-board { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent) !important; border: 1px solid var(--border-dim); border-radius: 50%; }
.forum-admin-actions { position: absolute; top: 4px; right: 4px; color: var(--text-secondary); }
.forum-admin-actions summary { cursor: pointer; list-style: none; }
.forum-admin-actions[open] { z-index: 3; padding: 8px; background: #15110a; border: 1px solid var(--border-dim); border-radius: 5px; }
.forum-admin-actions a { display: block; padding: 3px; }

.page-forum #MainContent .ForumBreadCrumbs { margin-bottom: 14px; padding: 10px 13px; color: var(--text-secondary); background: rgba(0, 0, 0, .2); border: 1px solid var(--border-dim); border-radius: 6px; }
.page-forum #MainContent .ForumBreadCrumbs a { color: var(--accent-hover) !important; }
.page-forum #MainContent .ForumBreadCrumbsSeparator { display: none; }
.page-forum #MainContent .ForumPost { height: auto !important; min-height: 0 !important; background: transparent !important; }
.page-forum #MainContent .PostBody { display: grid !important; grid-template-columns: 175px minmax(0, 1fr); min-height: 150px; background: rgba(255, 255, 255, .02) !important; border: 1px solid var(--border-dim); border-radius: 7px 7px 0 0; }
.page-forum #MainContent .PostUpper { display: contents; }
.page-forum #MainContent .PostCharacterText { position: static !important; width: auto !important; padding: 15px !important; color: var(--text-secondary) !important; border-right: 1px solid var(--border-dim); text-align: center; }
.page-forum #MainContent .PostText { position: static !important; width: auto !important; min-height: 140px; padding: 17px !important; color: var(--text-primary) !important; }
.page-forum #MainContent .PostSeparatorV { display: none !important; }
.page-forum #MainContent .PostLower { position: static !important; display: flex; justify-content: space-between; width: 100% !important; height: auto !important; padding: 9px 12px !important; background: rgba(212, 175, 55, .055) !important; border: 1px solid var(--border-dim); border-top: 0; border-radius: 0 0 7px 7px; }
.page-forum #MainContent .PostDetails,
.page-forum #MainContent .PostActions { position: static !important; width: auto !important; color: var(--text-secondary) !important; }
.page-forum #MainContent .TableHeaderRightButton { position: static !important; float: right; }

@media screen and (max-width: 850px) {
    .forum-board-card { grid-template-columns: 48px 1fr 34px; }
    .forum-board-stats,
    .forum-last-post { grid-column: 2; }
    .forum-enter-board { grid-column: 3; grid-row: 1 / 4; }
    .forum-last-post { padding-left: 0; border-left: 0; }
}

@media screen and (max-width: 600px) {
    .forum-panel { padding: 14px; }
    .forum-panel .modern-section-heading > time { width: 100%; margin-left: 0; }
    .forum-board-stats { flex-wrap: wrap; }
    .page-forum #MainContent .PostBody { grid-template-columns: 1fr; }
    .page-forum #MainContent .PostCharacterText { border-right: 0; border-bottom: 1px solid var(--border-dim); }
    .page-forum #MainContent .PostLower { align-items: flex-start; flex-direction: column; gap: 7px; }
}

.page-characters #MainContent > .TableContainer,
.page-highscores #MainContent > .TableContainer {
    padding: 20px !important;
    background: rgba(0, 0, 0, .25) !important;
    border-radius: 9px !important;
}
.page-characters #MainContent .CaptionContainer,
.page-highscores #MainContent .CaptionContainer {
    margin: -20px -20px 18px !important;
    padding: 15px 20px !important;
}
.page-characters #MainContent .CaptionContainer .Text,
.page-highscores #MainContent .CaptionContainer .Text { justify-content: flex-start; }

.page-characters #MainContent .TableContent,
.page-highscores #MainContent .TableContent { border: 0 !important; }
.page-characters #MainContent .TableContent > tbody > tr,
.page-highscores #MainContent .highscores-player-row {
    background: rgba(255, 255, 255, .025) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .1);
}

.highscores-filter-form select { margin: 3px 0; }
.highscores-note { display: flex; align-items: center; gap: 9px; padding: 11px 13px; color: var(--text-secondary); background: rgba(212, 175, 55, .055); border: 1px solid var(--border-dim); border-radius: 6px; }
.highscores-note i { color: var(--accent); }
.highscores-ranking-table { overflow: hidden; border: 1px solid var(--border-dim) !important; border-radius: 7px; }
.highscores-player-row { height: 66px; }
.highscores-rank { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; color: var(--accent-hover); background: rgba(212, 175, 55, .09); border: 1px solid var(--border-dim); border-radius: 50%; font-weight: 700; }
.highscores-player-row:nth-child(2) .highscores-rank { color: #facc15; border-color: rgba(250, 204, 21, .5); }
.highscores-player-row:nth-child(3) .highscores-rank { color: #d1d5db; border-color: rgba(209, 213, 219, .4); }
.highscores-player-row:nth-child(4) .highscores-rank { color: #d97706; border-color: rgba(217, 119, 6, .5); }
.highscores-online,
.highscores-offline { position: relative; padding-left: 13px; color: var(--accent-hover); }
.highscores-online::before,
.highscores-offline::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); }
.highscores-online::before { background: var(--success); box-shadow: 0 0 7px rgba(16, 185, 129, .6); }
.highscores-offline::before { background: var(--danger); }

.page-characters #MainContent form { max-width: 720px; margin-right: auto !important; margin-left: auto !important; }
.page-characters #MainContent form > .TableContainer td { border-bottom: 0; }
.page-characters #MainContent form .LabelV150 { width: 150px; overflow-wrap: normal; white-space: nowrap; }
.page-characters #MainContent .TableContent td:first-child { color: var(--text-secondary); font-weight: 700; }
.page-characters #MainContent .TableContent a { color: var(--accent-hover) !important; }

@media screen and (max-width: 700px) {
    .page-createaccount #createaccount > .TableContainer,
    .page-rules #MainContent > .TableContainer,
    .page-downloadclient #MainContent > .TableContainer { padding: 14px !important; }
    .page-createaccount #createaccount .CaptionContainer,
    .page-rules #MainContent .CaptionContainer,
    .page-downloadclient #MainContent .CaptionContainer { margin: -14px -14px 14px !important; }
    .page-createaccount #createaccount .LabelV { width: auto !important; }
    .community-panel { padding: 14px; }
    .last-kill-item { grid-template-columns: 34px 1fr; }
    .last-kill-item time { grid-column: 2; }
    .guild-card-grid,
    .staff-member-grid { grid-template-columns: 1fr; }
    .guild-actions { align-items: stretch; flex-direction: column; }
    .guild-actions button,
    .guild-login-link { width: 100%; text-align: center; }
    .page-characters #MainContent > .TableContainer,
    .page-highscores #MainContent > .TableContainer { padding: 14px !important; }
    .page-characters #MainContent .CaptionContainer,
    .page-highscores #MainContent .CaptionContainer { margin: -14px -14px 14px !important; }
    .highscores-ranking-panel { overflow-x: auto !important; }
    .highscores-ranking-table { min-width: 650px; }
}

.modern-page #MainContent {
    color: var(--text-primary);
}

.modern-page #MainContent > br:first-child,
.modern-page #MainContent > br:last-child,
.modern-page #MainContent .TableShadowContainer,
.modern-page #MainContent .TableBottomShadow,
.modern-page #MainContent .TableBottomLeftShadow,
.modern-page #MainContent .TableBottomRightShadow {
    display: none !important;
}

.modern-page #MainContent .TableContainer {
    position: relative;
    height: auto !important;
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2) !important;
}

/* Compatibility layer for every public/internal legacy page */
.modern-page,
.modern-page .content-box-inner,
.modern-page #MainContent,
.modern-page #MainContent > *,
.modern-page #MainContent form,
.modern-page #MainContent fieldset {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.modern-page #MainContent table {
    max-width: 100% !important;
    color: var(--text-primary);
}

.modern-page #MainContent td,
.modern-page #MainContent th {
    overflow-wrap: anywhere;
}

.modern-page #MainContent > table:not(.Table1):not(.Table2):not(.Table3),
.modern-page #MainContent > form > table:not(.Table1):not(.Table2):not(.Table3) {
    width: 100% !important;
    overflow: hidden;
    background: rgba(0, 0, 0, .2) !important;
    border: 1px solid var(--border-dim) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px;
}

.modern-page #MainContent > table:not(.Table1):not(.Table2):not(.Table3) > tbody > tr > td,
.modern-page #MainContent > form > table:not(.Table1):not(.Table2):not(.Table3) > tbody > tr > td {
    padding: 11px 13px;
    border-bottom: 1px solid rgba(212, 175, 55, .1);
}

.modern-page #MainContent textarea {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
}

.modern-page #MainContent form + form,
.modern-page #MainContent .TableContainer + .TableContainer {
    margin-top: 16px;
}

.modern-page #MainContent [align="center"] {
    max-width: 100%;
}

.modern-page #MainContent .TableContainer .TableContainer {
    margin: 12px 0 !important;
    padding: 14px !important;
    background: rgba(255, 255, 255, .02) !important;
    box-shadow: none !important;
}

.modern-page #MainContent .Table1,
.modern-page #MainContent .Table2,
.modern-page #MainContent .Table3,
.modern-page #MainContent .Table4,
.modern-page #MainContent .Table5,
.modern-page #MainContent .TableContent {
    height: auto !important;
    margin: 0 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    border-spacing: 0 !important;
}

.modern-page #MainContent .TableContent > tbody > tr,
.modern-page #MainContent .TableContent > thead > tr {
    transition: background .18s ease;
}

.modern-page #MainContent .TableContent > tbody > tr:hover {
    background: rgba(212, 175, 55, .045) !important;
}

.modern-page #MainContent .TableContent td,
.modern-page #MainContent .TableContent th {
    height: auto !important;
    padding: 11px 13px !important;
    border-color: rgba(212, 175, 55, .11) !important;
    vertical-align: middle;
}

.modern-page #MainContent .TableContent th,
.modern-page #MainContent .TableContent .LabelH {
    color: var(--accent) !important;
    background: rgba(212, 175, 55, .075) !important;
    font-size: 11px !important;
    letter-spacing: .65px;
}

.modern-page #MainContent .CaptionContainer {
    border-radius: 8px 8px 0 0;
}

.modern-page #MainContent .CaptionContainer .Text {
    justify-content: flex-start;
    text-align: left !important;
}

.modern-page #MainContent .CaptionContainer .Text::before {
    flex: 0 0 auto;
}

.modern-page #MainContent form:not(.direct-sale-form):not(.online-search-form) {
    color: var(--text-primary);
}

.modern-page #MainContent form label,
.modern-page #MainContent form td:first-child b,
.modern-page #MainContent form td:first-child strong {
    color: var(--accent-hover);
}

.modern-page #MainContent input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.modern-page #MainContent select,
.modern-page #MainContent textarea {
    color: #fff !important;
    background: rgba(0, 0, 0, .38) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}

.modern-page #MainContent input:focus,
.modern-page #MainContent select:focus,
.modern-page #MainContent textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .08) !important;
}

.modern-page #MainContent .ErrorMessage,
.modern-page #MainContent .error,
.modern-page #MainContent .alert-danger {
    padding: 13px 15px !important;
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, .09) !important;
    border: 1px solid rgba(239, 68, 68, .35) !important;
    border-radius: 7px !important;
}

.modern-page #MainContent .SuccessMessage,
.modern-page #MainContent .success,
.modern-page #MainContent .alert-success {
    padding: 13px 15px !important;
    color: #86efac !important;
    background: rgba(16, 185, 129, .09) !important;
    border: 1px solid rgba(16, 185, 129, .35) !important;
    border-radius: 7px !important;
}

.modern-page #MainContent .News,
.modern-page #MainContent .Box {
    border-radius: 9px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.modern-page #MainContent .NewsHeadline {
    align-items: center;
    gap: 12px;
    color: var(--accent-hover);
}

.modern-page #MainContent .NewsHeadlineBackground {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .025)) !important;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
.modern-page #MainContent .NewsHeadlineIcon,
.modern-page #MainContent .NewsHeadlineDate,
.modern-page #MainContent .NewsHeadlineText,
.modern-page #MainContent .NewsHeadlineAuthor { position: static !important; float: none !important; }
.modern-page #MainContent .NewsHeadlineIcon { grid-row: 1 / 3; }
.modern-page #MainContent .NewsHeadlineDate { color: var(--text-secondary); font-size: 11px; }
.modern-page #MainContent .NewsHeadlineText { color: var(--accent-hover); font-family: var(--font-heading); font-size: 17px; }
.modern-page #MainContent .NewsHeadlineAuthor { grid-column: 3; grid-row: 1 / 3; color: var(--text-secondary); }

.modern-page #MainContent .ForumHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
}
.modern-page #MainContent .ForumHead p { margin: 0; }

.modern-page #MainContent .AdditionalTableShadow {
    overflow: hidden;
    background: rgba(0, 0, 0, .18) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: 6px;
    box-shadow: none !important;
}

.modern-page #MainContent .AdditionalTableHeadline td {
    color: var(--accent) !important;
    background: rgba(212, 175, 55, .075) !important;
}

.modern-page #MainContent a > img:not([src*="arrow_"]):not([src*="button"]) {
    transition: transform .2s ease, filter .2s ease;
}
.modern-page #MainContent a:hover > img:not([src*="arrow_"]):not([src*="button"]) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.modern-page #MainContent .PageLink,
.modern-page #MainContent .PageLinkActive,
.modern-page #MainContent .pagination a,
.modern-page #MainContent .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    margin: 3px;
    padding: 5px 9px;
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--border-dim);
    border-radius: 5px;
}

.modern-page #MainContent .PageLinkActive,
.modern-page #MainContent .pagination .active {
    color: #111 !important;
    background: var(--accent) !important;
}

.modern-page #MainContent img {
    max-width: 100%;
}

@media screen and (max-width: 700px) {
    .content-box-title { padding: 18px 14px; font-size: 21px; letter-spacing: 1px; }
    .content-title-icon { width: 36px; height: 36px; font-size: 15px; }
    .modern-page #MainContent .TableContainer { padding: 14px !important; }
    .modern-page #MainContent .CaptionContainer { margin: -14px -14px 14px !important; padding: 13px 14px !important; }
    .modern-page #MainContent .TableContent td,
    .modern-page #MainContent .TableContent th { padding: 9px 10px !important; }
    .modern-page #MainContent .NewsHeadlineBackground { grid-template-columns: auto 1fr; }
    .modern-page #MainContent .NewsHeadlineAuthor { grid-column: 2; grid-row: auto; }
    .modern-page #MainContent .ForumHead { align-items: flex-start; flex-direction: column; }
    .modern-section-heading { align-items: flex-start; flex-wrap: wrap; }
    .modern-section-count { width: 100%; margin-left: 0; text-align: center; }
    .modern-news-card > header { align-items: flex-start; flex-wrap: wrap; }
    .modern-news-author { width: 100%; margin-left: 59px; }
}

@media screen and (max-width: 800px) {
    #MainContent > div[style*="display: flex"],
    #MainContent > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #MainContent > div[style*="display: flex"] > *,
    #MainContent > div[style*="display:flex"] > * {
        width: 100% !important;
        padding-left: 0 !important;
    }
}

/* RESPONSIVE DESIGN (Mobile & Tablets) */
@media screen and (max-width: 1100px) {
    .main-columns {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 14px;
    }

    .right-sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .header-box {
        width: 180px;
    }

    .content-box-inner {
        padding: 20px;
    }
}

@media screen and (max-width: 900px) {
    .main-columns {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .right-sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media screen and (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    .layout-wrapper {
        padding: 10px;
    }

    .top-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
    }

    .logo-area {
        order: -1;
        margin-bottom: 5px;
    }

    .site-logo {
        width: min(520px, 88vw);
        height: 130px;
    }

    .main-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .left-sidebar,
    .right-sidebar {
        grid-column: 1 / -1;
    }

    .left-sidebar {
        margin-bottom: 10px;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .action-buttons .btn-action {
        font-size: 13px;
        padding: 10px 5px;
    }

    .header-box {
        width: 100%;
        max-width: 100%;
    }

    .content-box-inner {
        padding: 15px !important;
    }

    .content-box-title {
        font-size: 20px !important;
        padding: 15px !important;
    }

    #MainContent {
        font-size: 15px;
    }

    #createaccount .TableContainer {
        padding: 12px;
    }

    #createaccount .LabelV {
        width: 130px !important;
    }

    #account-manage {
        flex-direction: column;
    }

    .vertical-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        flex-wrap: nowrap;
    }

    .vertical-menu a {
        width: auto;
        flex: 0 0 auto;
    }

    /* Fix for native MyAAC tables breaking the layout on mobile */
    #MainContent table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #MainContent img {
        max-width: 100%;
        height: auto;
    }
}