/* ========================================
   DARKMODE CSS - OPTIMIZED VERSION
   ZnoteAAC Dark Theme Override
   ======================================== */

/* === CSS VARIABLES === */
:root {
    /* Color palette */
    --dm-bg-primary: #1e1e1e;
    --dm-bg-secondary: #2a2a2a;
    --dm-bg-tertiary: #252525;
    --dm-bg-dark: #121212;
    --dm-surface: #2a2a2a;
    
    /* Text colors */
    --dm-text: #f0f0f0;
    --dm-text-dimmed: #cccccc;
    --dm-text-muted: #999999;
    
    /* Accent colors */
    --dm-accent: #7ab0ff;
    --dm-accent-hover: #ffcc66;
    --dm-accent-h: #ffcc66;
    
    /* Borders */
    --dm-border: #444;
    --dm-border-light: #555;
    
    /* Wiki sidebar positioning */
    --wiki-aside-top: 255px;
    --wiki-aside-right: -16px;
    --wiki-aside-width: 285px;
    --wiki-container-max: 1140px;
}

/* === PAGE TRANSITION === */
body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

body.fade-in {
    opacity: 1;
}

/* === GLOBAL RESETS === */
* {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* === BASE LAYOUT & BACKGROUNDS === */
body,
.container,
.main,
.content,
.panel,
.panel-body,
.panel-heading,
.card,
.card-body,
.well,
.box,
.sidebar,
.footer,
.footer-container,
.loginContainer,
.centralizeContent,
.feedContainer,
.leftPane,
.rightPane,
.topPane,
.header,
.body,
.postHolder,
div.news,
div.content,
.ak-main-container,
.ak-main-content,
.ak-main-page,
.ak-container,
.ak-panel,
.ak-panel-content,
.ak-panel-stack,
.ak-page-menu,
.ak-category-infos,
.ak-payments-process-choice,
.ak-block-shop,
.ak-title-container,
.ak-intro,
.news-item,
.news-box,
.news-block,
.news-content,
.news-text,
.news-article,
.news-body,
.inner-box,
.box-content,
.character-box,
.character-info,
.character-content,
.ak-responsivetable-wrapper,
.character-outfit,
.panel-main,
.ak-item-list,
.ak-list-paginated {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text) !important;
}

/* Specific background variations */
.ak-item,
.ak-item-list .ak-item,
.ak-item-list .ak-column,
.ak-item-list .ak-content,
.ak-item-list .ak-panel,
.ak-item-list .ak-card,
.ak-item-list .panel,
.ak-item-list .item-box,
.ak-item-list .item,
.item-box,
.item-card {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 6px;
    padding: 10px;
}

.ak-item-mid {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text) !important;
    border-radius: 6px;
    padding: 10px;
}

.ak-panel-content,
.donation-panel {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text) !important;
    border-radius: 6px;
    padding: 10px;
}

/* Item descriptions */
.item-box .description,
.item-card .description,
.item-card p,
.item-box p {
    color: var(--dm-text-dimmed) !important;
}

.item-box small,
.item-box .footer,
.item-card small {
    color: var(--dm-text-muted) !important;
}

/* === NAVIGATION === */
.ak-idbar,
.navbar.navbar-default {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.mobile-nav-toggle {
    position: relative;
    z-index: 9999;
}

/* Navigation links */
.navbar-nav > .dropdown.sep > a.dropdown-toggle {
    color: #fff !important;
    padding: 10px 15px !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: background 0.3s ease, color 0.3s ease;
}

.navbar-nav > .dropdown.sep > a.dropdown-toggle:hover {
    background: linear-gradient(to bottom, #1d4c7b, #0e2e4d) !important;
    color: var(--dm-accent-hover) !important;
    border-radius: 4px !important;
}

/* Dropdown menus */
.navbar-default .navbar-nav .dropdown-menu li a {
    color: #fff !important;
    transition: background 0.3s ease;
}

.navbar-default .navbar-nav .dropdown-menu li a.gold {
    color: #f3c969 !important;
}

.navbar-default .navbar-nav .dropdown-menu li a:hover {
    background: linear-gradient(to bottom, #1d4c7b, #0e2e4d) !important;
    border: 1px solid #222 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease-in-out;
}

.navbar-default .navbar-nav .dropdown-menu li a.gold:hover {
    color: #f3c969 !important;
}

/* Navigation active state */
.ak-nav-links li.active a {
    border-bottom: 3px solid #2b76ff !important;
    color: #ffffff !important;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
p, span, td, th, li,
.panel-title,
.ak-title,
.character-title,
.section-title,
.card-title,
.ak-panel-title,
.sidebar .header,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .character-name,
.sidebar .account-name,
.rightPane .well .header,
.header, .header h1 {
    color: var(--dm-text) !important;
    text-shadow: none !important;
}

/* User names in sidebar */
.sidebar .account-name,
.sidebar .character-name,
.sidebar .name,
.account-name,
.character-name {
    color: var(--dm-text) !important;
    text-shadow: none !important;
    font-weight: bold;
}

/* === LINKS === */
a,
a:visited,
.ak-page-menu a {
    color: var(--dm-accent) !important;
    text-decoration: none;
}

a:hover,
.ak-page-menu a:hover {
    color: var(--dm-accent-hover) !important;
}

/* === FORMS & INPUTS === */
input,
textarea,
select,
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
input[type="button"] {
    background-color: var(--dm-bg-secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--dm-border-light) !important;
}

input::placeholder {
    color: #bbb !important;
}

/* === LOGIN COMPONENTS === */
#loginBox,
.login-box,
.login-container,
#login,
.login {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
}

.loginBtn,
button[type="submit"] {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
}

.loginBtn:hover,
button[type="submit"]:hover {
    background-color: #444 !important;
}

/* === BUTTONS === */
.btn,
button,
input[type="submit"] {
    background-color: #333 !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border-light) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #444 !important;
    color: #fff !important;
}

.btn-info {
    background-color: #333 !important;
    border-color: var(--dm-border-light) !important;
    color: #ddd !important;
}

/* === TABLES === */
table,
table tr,
table td,
table th,
.ak-table,
.ak-ladder,
.ak-table tr,
.ak-table td,
.ak-table th,
table.ak-responsivetable,
.auction-overlay {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Zebra striping */
.ak-table tr:nth-child(odd),
.ak-ladder tr:nth-child(odd),
table.ak-responsivetable tr:nth-child(odd) {
    background-color: #262626 !important;
}

/* === NEWS SECTIONS === */
.news-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    background: linear-gradient(-45deg, #1b4d8b, #071c39, #2c3e50, #1b4d8b) !important;
    background-size: 400% 400%;
    animation: animatedGradient 8s ease infinite;
}

.news-header .ak-icon-big.ak-news {
    background: url('images/icons/news.png') no-repeat center center;
    background-size: contain;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: 12px;
}

.news-title {
    text-align: left;
    padding-left: 20px;
    margin: 0;
}

.news-title,
.news-title a {
    color: var(--dm-accent) !important;
}

/* News items */
.ak-item-elt,
.ak-item-elt-content,
.ak-item-elt-inner,
.ak-item-elt-desc,
.ak-item-elt-desc p {
    background-color: #181818 !important;
    color: var(--dm-text) !important;
    border: 1px solid #333 !important;
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 25px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
}

/* Alternating news item colors */
.ak-item-list .col-sm-12:nth-child(even) .ak-item-elt {
    background-color: #111c2a !important;
    border: 1px solid #204060 !important;
}

.ak-item-list .col-sm-12:nth-child(odd) .ak-item-elt {
    background-color: var(--dm-bg-primary) !important;
    border: 1px solid #5c4033 !important;
}

/* News title styling */
.ak-item-elt-title a {
    color: #6ea0ff !important;
    font-size: 21px;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}

.ak-publication span {
    color: #ccc !important;
    font-size: 14px;
    font-style: italic;
}

/* News description */
.ak-item-elt-desc p,
.ak-news-content {
    color: #e0e0e0 !important;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* News images */
.ak-item-elt-desc img,
.ak-news-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 10px auto;
}

/* Read more button */
.ak-more,
.read-more-btn {
    background: linear-gradient(to right, #071d3a, #0d2b56) !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    border: 1px solid #5fa8d3 !important;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.ak-more:hover,
.read-more-btn:hover {
    background: linear-gradient(to right, #0a1f3c, #122a5c) !important;
    color: var(--dm-accent-hover) !important;
    border-color: var(--dm-accent-hover) !important;
    text-shadow: 0 0 5px var(--dm-accent-hover) !important;
}

/* Expandable news content */
.news-full-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transform: scaleY(0.95);
    transform-origin: top;
}

.news-full-content.show {
    max-height: 3000px;
    opacity: 1;
    transform: scaleY(1);
}

/* Dark mode news content */
body.darkmode .news-content,
body.darkmode .news-content * {
    color: #dddddd !important;
    background-color: transparent !important;
}

body.darkmode .newsTitle,
body.darkmode .newsTitle a {
    color: var(--dm-accent) !important;
}

body.darkmode .newsBox,
body.darkmode .newsBody,
body.darkmode .newsAuthor {
    background-color: var(--dm-bg-secondary) !important;
    color: #dddddd !important;
}

/* === WIKI & DOCUMENTATION === */
#wiki-header {
    background: linear-gradient(-45deg, #1e3c72, #2a5298, #1b4d8b, #0f3057) !important;
    background-size: 400% 400% !important;
    animation: animateTitleBG 8s ease infinite;
    padding: 10px 20px !important;
    color: #fff !important;
    font-size: 38px !important;
    font-weight: bold !important;
    border-bottom: 2px solid #ccc !important;
    justify-content: center;
    text-shadow: 3px 5px 3px rgba(1, 1, 0, 0.5) !important;
    display: flex;
    align-items: center;
    gap: 50px;
    box-shadow: inset 0 -1px 0 #555, 0 0 12px rgba(0, 153, 255, 0.3) !important;
    margin-bottom: 50px !important;
    border-radius: 2px !important;
    transition: all 0.3s ease;
}

#wiki-header:hover {
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.5) !important;
}

/* Wiki icon */
h1 > .ak-icon-big.ak-polls,
#wiki-header > .ak-icon-big.ak-polls {
    display: inline-block;
    font-size: 32px;
    margin-right: 12px;
    vertical-align: middle;
    line-height: 1;
}

/* Wiki sidebar - responsive positioning */
@media (min-width: 1200px) {
    .wiki-aside {
        position: absolute;
        top: var(--wiki-aside-top);
        right: calc((100vw - var(--wiki-container-max)) / 2 + var(--wiki-aside-right));
        width: var(--wiki-aside-width);
        z-index: 600;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wiki-aside {
        position: absolute;
        top: var(--wiki-aside-top);
        right: 0;
        width: 260px;
        z-index: 600;
    }
}

@media (max-width: 991.98px) {
    .wiki-aside {
        position: static;
        width: 100%;
        margin-top: 32px;
    }
}

/* Wiki login panel */
.ak-login-panel,
.ak-login-panel label,
.ak-login-panel .checkbox label,
.ak-login-panel .form-control::placeholder {
    color: #d7d7d7 !important;
}

.ak-login-panel label.control-label {
    font-weight: 600 !important;
    color: #e6e6e6 !important;
}

.ak-login-panel a {
    color: #4ac2ff !important;
}

/* Map viewer button */
.mapviewer-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 25px auto 15px;
    padding: 12px 40px;
    font-size: 20px;
    font-weight: 600;
    color: #ffd36b !important;
    text-decoration: none;
    background: linear-gradient(to right, #1b4d8b, #071c39) !important;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: 0.2s;
}

.mapviewer-btn:hover {
    transform: translateY(-2px);
}

.mapviewer-btn:active {
    transform: none;
}

/* === BREADCRUMBS === */
.ak-pagetop {
    background: transparent !important;
}

.ak-pagetop-child {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #666 !important;
    box-sizing: border-box;
}

.breadcrumb {
    background-color: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 0 !important;
    color: #ccc !important;
}

.breadcrumb a {
    color: var(--dm-accent) !important;
}

.breadcrumb a:hover {
    color: var(--dm-accent-hover) !important;
}

/* === PLAY PAGE === */
.ak-page-play,
.ak-form-subscription,
.ak-dl-game,
.ak-first-links,
.ak-main-container {
    background: linear-gradient(to bottom, #0b1d39, #122f56, #0b1d39) !important;
}

.ak-first-links-container {
    background: linear-gradient(to bottom, #0c1e3c, #0b1d39) !important;
}

/* Remove white borders on play page */
.ak-content-block,
.ak-content-block-content,
.ak-inner-block,
.ak-title-block,
.ak-header-block {
    background-color: var(--dm-bg-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.ak-title-block,
.ak-title-text {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

.ak-registerform-container {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
}

/* Compact spacing */
.ak-main-container,
.ak-page-play,
.ak-form-subscription,
.ak-first-links-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ak-form-subscription {
    margin-bottom: 20px !important;
}

.ak-dl-game,
.ak-first-links {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ak-header-block {
    margin-bottom: 10px !important;
}

.ak-dl-game .ak-content-block-content {
    min-height: auto !important;
}

.ak-main-content {
    padding-top: 0 !important;
}

/* === SHOP / DONATIONS === */
.ak-mosaic-item,
.ak-mosaic-item-detail,
.ak-item-bottom {
    background-color: #2b2b2b !important;
    color: var(--dm-text) !important;
    border-radius: 2px !important;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    transition: color 0.3s ease-in-out;
}

.ak-mosaic-item-name {
    font-weight: bold !important;
    font-size: 16px !important;
    margin-top: 10px !important;
    color: #e0e0e0 !important;
}

.ak-price,
.ak-mosaic-item-name span {
    color: var(--dm-accent-hover) !important;
}

.ak-mosaic-item:hover .ak-mosaic-item-name span,
.ak-mosaic-item:hover .ak-price {
    color: #4aa3ff !important;
    transition: color 0.3s ease-in-out;
}

/* === USER ACCOUNT BAR === */
.ak-idbar-box.ak-box-logged {
    background: linear-gradient(-45deg, #142b47, #1c3b5f, #183459, #0d223e) !important;
    background-size: 400% 400% !important;
    animation: animatedHeaderBG 10s ease infinite;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(30, 100, 200, 0.3) !important;
    padding: 15px !important;
    font-family: Arial, sans-serif;
}

.ak-idbar-box.ak-box-logged * {
    color: #fff !important;
}

.ak-account-infos,
.ak-infos-logged,
.ak-infos-row {
    padding-top: 10px !important;
}

.ak-infos-logged-link,
.btn.btn-default,
.ak-infos-nickname,
.ak-subscribe-link {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    padding: 6px 12px !important;
    margin: 5px 4px !important;
    border-radius: 2px !important;
    color: #fff !important;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.ak-infos-logged-link:hover,
.btn.btn-default:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.ak-infos-row.ak-account-manage {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin-top: 10px !important;
}

.ak-infos-nickname {
    display: inline-block;
    margin-left: 10px !important;
}

.ak-infos-dofus {
    padding-left: 10px !important;
}

.ak-infos-logged-link:hover,
.btn.btn-default:hover,
.ak-infos-nickname:hover,
.ak-subscribe-link:hover {
    color: #ffd700 !important;
}

/* === ANIMATED HEADERS === */
body h1:not(.no-style),
body h2:not(.no-style),
body .ak-title-container:not(.no-style) h1 {
    background: linear-gradient(-45deg, #142b47, #1c3b5f, #183459, #0d223e) !important;
    background-size: 400% 400% !important;
    animation: animatedHeaderBG 10s ease infinite;
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
    padding: 12px 25px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px rgba(30, 100, 200, 0.15) !important;
    margin-bottom: 30px !important;
    transition: box-shadow 0.3s ease;
    text-align: center;
    font-size: 32px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

body h1:hover,
body h2:hover,
body .ak-title-container:hover {
    box-shadow: 0 0 12px rgba(30, 100, 200, 0.4) !important;
}

.ak-title-container {
    background: none !important;
    padding: 10px 20px !important;
    border-radius: 3px !important;
}

/* === HIGHSCORES TABLE === */
.ak-ladder {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: none !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2) inset !important;
    border-radius: 4px !important;
    overflow: visible;
    position: relative;
    z-index: 1;
    table-layout: auto;
    transition: all 0.4s ease;
}

aside .ak-ladder {
    z-index: 2;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Table headers */
.ak-ladder thead tr {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
    border-bottom: none !important;
}

.ak-ladder thead th {
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 10px !important;
    border: none !important;
    position: relative;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.ak-ladder thead th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #4a90e2 20%, #6bb3ff 50%, #4a90e2 80%, transparent 100%);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.6);
}

/* Table rows */
.ak-ladder tbody tr {
    border: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.ak-ladder tbody tr.ak-bg-odd {
    background: rgba(30, 30, 30, 0.6) !important;
}

.ak-ladder tbody tr.ak-bg-even {
    background: rgba(40, 40, 40, 0.6) !important;
}

.ak-ladder tbody tr.ak-first-ladder {
    background: rgba(255, 215, 0, 0.1) !important;
}

.ak-ladder tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.3) 15%, rgba(107, 179, 255, 0.5) 50%, rgba(74, 144, 226, 0.3) 85%, transparent 100%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Hover effects - main content */
.main .ak-ladder tbody tr:hover {
    background: linear-gradient(90deg, rgba(74, 144, 226, 0.2) 0%, rgba(74, 144, 226, 0.1) 100%) !important;
    box-shadow: -3px 0 0 0 #4a90e2 inset !important;
}

.main .ak-ladder tbody tr:hover::after {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.6) 10%, rgba(107, 179, 255, 0.8) 50%, rgba(74, 144, 226, 0.6) 90%, transparent 100%);
    opacity: 1;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.4);
}

/* Hover effects - sidebar */
aside .ak-ladder tbody tr:hover {
    background: rgba(74, 144, 226, 0.15) !important;
}

aside .ak-ladder tbody tr:hover::after {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.6) 10%, rgba(107, 179, 255, 0.8) 50%, rgba(74, 144, 226, 0.6) 90%, transparent 100%);
    opacity: 1;
}

/* Table cells */
.ak-ladder td {
    border: none !important;
    padding: 12px 10px !important;
    vertical-align: middle;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.ak-rank {
    font-weight: bold !important;
    padding-left: 15px !important;
}

/* Position icons for top 3 */
.ak-icon-position {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    min-width: 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ak-icon-position.ak-position-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3) !important;
    animation: goldPulse 2s ease-in-out infinite;
}

.ak-icon-position.ak-position-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%) !important;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.5) !important;
}

.ak-icon-position.ak-position-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #d4a574 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.5) !important;
}

.ak-icon-position:hover {
    transform: scale(1.1);
}

/* Name links */
.ak-name a {
    color: #4a90e2 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.ak-name a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #4a90e2;
    transition: width 0.3s ease;
}

.ak-name a:hover {
    color: #6bb3ff !important;
}

.ak-name a:hover::after {
    width: 100%;
}

/* Vocation, Level, Points */
.ak-vocation,
.ak-level,
.ak-points {
    color: #ccc !important;
    font-weight: 500 !important;
}

/* Outfit images */
.ak-outfit img {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ak-ladder tbody tr:hover .ak-outfit img {
    transform: scale(1.1);
}

aside .ak-ladder tbody tr:hover .ak-outfit img {
    transform: scale(1.05);
}

/* Dropdown selectors */
.ak-ladder select.form-control {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    color: #fff !important;
    border: 2px solid #3a3a3a !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ak-ladder select.form-control:hover {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3) !important;
}

.ak-ladder select.form-control:focus {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.5) !important;
    outline: none !important;
}

/* View button */
.ak-ladder .btn-primary {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4) !important;
    transition: all 0.3s ease;
}

.ak-ladder .btn-primary:hover {
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%) !important;
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6) !important;
    transform: translateY(-2px);
}

.ak-ladder .btn-primary:active {
    transform: translateY(0);
}

/* Toggle level button */
#toggleLevelBtn {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 15px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4) !important;
    transition: all 0.3s ease;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#toggleLevelBtn:hover {
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%) !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.6) !important;
    transform: translateY(-1px);
}

#toggleLevelBtn:active {
    transform: translateY(0);
}

/* Level column */
aside .ak-ladder .level-column {
    color: #4a90e2 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-size: 15px !important;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    white-space: nowrap;
}

aside .ak-ladder tbody tr:hover .level-column {
    color: #6bb3ff !important;
    text-shadow: 0 0 12px rgba(107, 179, 255, 0.8) !important;
}

/* === OVERRIDE INLINE STYLES === */
div[style*="background:#f7f7f7"],
div[style*="background-color:#f7f7f7"],
div[style*="background:#fff"],
div[style*="background-color:#fff"],
div[style*="background:#ffffff"],
div[style*="background-color:#ffffff"] {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text) !important;
}

*:not([style*="background-image"])[style*="background:#fff"],
*:not([style*="background-image"])[style*="background: #fff"],
*:not([style*="background-image"])[style*="background-color:#fff"],
*:not([style*="background-image"])[style*="background-color: #fff"] {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* === PRESERVE BACKGROUND IMAGES === */
*[style*="background-image"],
[class*="bg-image"],
.ak-panel-blue {
    background-color: transparent !important;
    background-image: inherit !important;
}

/* === MODALS === */
.modal-content,
.well {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text) !important;
}

/* === UTILITY CLASSES === */
.bg-dark-1 {
    background-color: var(--dm-bg-primary) !important;
}

.bg-dark-2 {
    background-color: var(--dm-bg-tertiary) !important;
}

.bg-dark-3 {
    background-color: #2e2e2e !important;
}

.text-light {
    color: var(--dm-text) !important;
}

.text-dimmed {
    color: var(--dm-text-dimmed) !important;
}

.text-muted {
    color: var(--dm-text-muted) !important;
}

.border-light {
    border: 1px solid var(--dm-border) !important;
}

/* === TOP RANKS === */
.toprank-1 {
    color: #7CFC00 !important;
}

.toprank-2 {
    color: #C0C0C0 !important;
}

.toprank-3 {
    color: #CD7F32 !important;
}

/* === COUNTDOWN TIMER === */
#countDownTimer {
    color: #e0e0e0 !important;
}

/* === SOCIAL MEDIA ICONS === */
.smedia i {
    color: #ccc !important;
    font-size: 20px;
}

.smedia i:hover {
    color: var(--dm-accent-hover) !important;
}

/* === CENTER ALIGNMENT === */
.ak-center {
    text-align: center;
}

/* === EMPTY STATE === */
.ak-ladder tbody td[colspan] {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #888 !important;
    font-size: 16px !important;
    font-style: italic !important;
}

/* === FADE IN ANIMATION === */
.fade-in {
    animation: fadeSlideUp 0.4s ease-in-out;
}

/* === KEYFRAME ANIMATIONS === */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animatedGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animateTitleBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animatedHeaderBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.5);
    }
}

/* === NAVIGATION === */
.ak-idbar,
.navbar.navbar-default {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.mobile-nav-toggle {
    position: relative;
    z-index: 9999;
}

/* Navigation links */
.navbar-nav > .dropdown.sep > a.dropdown-toggle {
    color: #fff !important;
    padding: 10px 15px !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

.navbar-nav > .dropdown.sep > a.dropdown-toggle:hover {
    background: linear-gradient(to bottom, #1d4c7b, #0e2e4d) !important;
    color: var(--dm-accent-hover) !important;
    border-radius: 4px !important;
}

/* Dropdown menus */
.navbar-default .navbar-nav .dropdown-menu li a {
    color: #fff !important;
    transition: background 0.3s ease !important;
}

.navbar-default .navbar-nav .dropdown-menu li a.gold {
    color: #f3c969 !important;
}

.navbar-default .navbar-nav .dropdown-menu li a:hover {
    background: linear-gradient(to bottom, #1d4c7b, #0e2e4d);
    border: 1px solid #222;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}

.navbar-default .navbar-nav .dropdown-menu li a.gold:hover {
    color: #f3c969;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
p, span, td, th, li,
.panel-title,
.ak-title,
.character-title,
.section-title,
.card-title,
.ak-panel-title,
.sidebar .header,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .character-name,
.sidebar .account-name {
    color: var(--dm-text) !important;
    text-shadow: none !important;
}

/* User names in sidebar */
.sidebar .account-name,
.sidebar .character-name,
.sidebar .name,
.account-name,
.character-name {
    color: var(--dm-text) !important;
    text-shadow: none !important;
    font-weight: bold;
}

/* === LINKS === */
a,
a:visited {
    color: var(--dm-accent) !important;
    text-decoration: none;
}

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

/* === FORMS & INPUTS === */
input,
textarea,
select,
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
input[type="button"] {
    background-color: var(--dm-bg-secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--dm-border-light) !important;
}

input::placeholder {
    color: #bbb !important;
}

/* === LOGIN COMPONENTS === */
#loginBox,
.login-box,
.login-container,
#login,
.login {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
}

.loginBtn,
button[type="submit"] {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
}

.loginBtn:hover,
button[type="submit"]:hover {
    background-color: #444 !important;
}

/* === BUTTONS === */
.btn,
button,
input[type="submit"] {
    background-color: #333 !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border-light) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #444 !important;
    color: #fff !important;
}

.btn-info {
    background-color: #333 !important;
    border-color: var(--dm-border-light) !important;
    color: #ddd !important;
}

/* === TABLES === */
table,
table tr,
table td,
table th,
.ak-table,
.ak-ladder,
.ak-table tr,
.ak-table td,
.ak-table th {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Zebra striping */
.ak-table tr:nth-child(odd),
.ak-ladder tr:nth-child(odd),
table.ak-responsivetable tr:nth-child(odd) {
    background-color: #262626 !important;
}

/* === NEWS SECTIONS === */
.news-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: linear-gradient(-45deg, #1b4d8b, #071c39, #2c3e50, #1b4d8b);
    background-size: 400% 400%;
    animation: animatedGradient 8s ease infinite;
}

.news-title {
    text-align: left;
    padding-left: 20px;
    margin: 0;
}

.news-title a {
    color: var(--dm-accent) !important;
}

/* News items */
.ak-item-elt {
    background-color: #181818 !important;
    color: var(--dm-text) !important;
    border: 1px solid #333 !important;
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 25px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
}

/* Alternating news item colors */
.ak-item-list .col-sm-12:nth-child(even) .ak-item-elt {
    background-color: #111c2a !important;
    border: 1px solid #204060 !important;
}

.ak-item-list .col-sm-12:nth-child(odd) .ak-item-elt {
    background-color: var(--dm-bg-primary) !important;
    border: 1px solid #5c4033 !important;
}

/* News title styling */
.ak-item-elt-title a {
    color: #6ea0ff !important;
    font-size: 21px;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}

.ak-publication span {
    color: #ccc !important;
    font-size: 14px;
    font-style: italic;
}

/* News description */
.ak-item-elt-desc p,
.ak-news-content {
    color: #e0e0e0 !important;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* News images */
.ak-item-elt-desc img,
.ak-news-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 10px auto;
}

/* Read more button */
.ak-more,
.read-more-btn {
    background: linear-gradient(to right, #071d3a, #0d2b56);
    color: #ffffff !important;
    padding: 8px 14px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #5fa8d3;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.ak-more:hover,
.read-more-btn:hover {
    background: linear-gradient(to right, #0a1f3c, #122a5c);
    color: var(--dm-accent-hover) !important;
    border-color: var(--dm-accent-hover);
    text-shadow: 0 0 5px var(--dm-accent-hover);
}

/* Expandable news content */
.news-full-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transform: scaleY(0.95);
    transform-origin: top;
}

.news-full-content.show {
    max-height: 3000px;
    opacity: 1;
    transform: scaleY(1);
}

/* === WIKI & DOCUMENTATION === */
#wiki-header {
    background: linear-gradient(-45deg, #1e3c72, #2a5298, #1b4d8b, #0f3057);
    background-size: 400% 400%;
    animation: animateTitleBG 8s ease infinite;
    padding: 10px 20px;
    color: #fff;
    font-size: 38px;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    justify-content: center;
    text-shadow: 3px 5px 3px rgba(1, 1, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 50px;
    box-shadow: inset 0 -1px 0 #555, 0 0 12px rgba(0, 153, 255, 0.3);
    margin-bottom: 50px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

#wiki-header:hover {
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.5);
}

/* Wiki icon */
h1 > .ak-icon-big.ak-polls,
#wiki-header > .ak-icon-big.ak-polls {
    display: inline-block;
    font-size: 32px;
    margin-right: 12px;
    vertical-align: middle;
    line-height: 1;
}

/* Wiki sidebar - responsive positioning */
@media (min-width: 1200px) {
    .wiki-aside {
        position: absolute;
        top: var(--wiki-aside-top);
        right: calc((100vw - var(--wiki-container-max)) / 2 + var(--wiki-aside-right));
        width: var(--wiki-aside-width);
        z-index: 600;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wiki-aside {
        position: absolute;
        top: var(--wiki-aside-top);
        right: 0;
        width: 260px;
        z-index: 600;
    }
}

@media (max-width: 991.98px) {
    .wiki-aside {
        position: static;
        width: 100%;
        margin-top: 32px;
    }
}

/* Wiki login panel */
.ak-login-panel,
.ak-login-panel label,
.ak-login-panel .checkbox label,
.ak-login-panel .form-control::placeholder {
    color: #d7d7d7 !important;
}

.ak-login-panel label.control-label {
    font-weight: 600;
    color: #e6e6e6 !important;
}

.ak-login-panel a {
    color: #4ac2ff;
}

/* Map viewer button */
.mapviewer-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 25px auto 15px;
    padding: 12px 40px;
    font-size: 20px;
    font-weight: 600;
    color: #ffd36b;
    text-decoration: none;
    background: linear-gradient(to right, #1b4d8b, #071c39);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: 0.2s;
}

.mapviewer-btn:hover {
    transform: translateY(-2px);
}

.mapviewer-btn:active {
    transform: none;
}

/* === BREADCRUMBS === */
.ak-pagetop {
    background: transparent !important;
}

.ak-pagetop-child {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #666;
    box-sizing: border-box;
}

.breadcrumb {
    background-color: transparent !important;
    border-radius: 0;
    margin-bottom: 0;
    padding: 10px 0;
    color: #ccc !important;
}

.breadcrumb a {
    color: var(--dm-accent) !important;
}

.breadcrumb a:hover {
    color: var(--dm-accent-hover) !important;
}

/* === PLAY PAGE === */
.ak-page-play,
.ak-form-subscription,
.ak-dl-game,
.ak-first-links,
.ak-main-container {
    background: linear-gradient(to bottom, #0b1d39, #122f56, #0b1d39) !important;
}

.ak-first-links-container {
    background: linear-gradient(to bottom, #0c1e3c, #0b1d39) !important;
}

/* Remove white borders on play page */
.ak-content-block,
.ak-content-block-content,
.ak-inner-block,
.ak-form-subscription,
.ak-first-links,
.ak-dl-game,
.ak-title-block,
.ak-header-block {
    background-color: var(--dm-bg-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.ak-title-block,
.ak-title-text {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

.ak-registerform-container {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 6px;
}

/* Compact spacing */
.ak-main-container,
.ak-page-play,
.ak-form-subscription,
.ak-first-links-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ak-form-subscription {
    margin-bottom: 20px !important;
}

.ak-dl-game,
.ak-first-links {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ak-header-block {
    margin-bottom: 10px !important;
}

.ak-dl-game .ak-content-block-content {
    min-height: auto !important;
}

.ak-main-content {
    padding-top: 0 !important;
}

/* === SHOP / DONATIONS === */
.donation-panel {
    background-color: #2b2b2b;
    border-radius: 3px;
    padding: 20px;
}

.ak-mosaic-item,
.ak-mosaic-item-detail,
.ak-item-bottom {
    background-color: #2b2b2b !important;
    color: var(--dm-text) !important;
    border-radius: 2px;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    transition: color 0.3s ease-in-out;
}

.ak-mosaic-item-name {
    font-weight: bold;
    font-size: 16px;
    margin-top: 10px;
    color: #e0e0e0 !important;
}

.ak-price,
.ak-mosaic-item-name span {
    color: var(--dm-accent-hover) !important;
}

.ak-mosaic-item:hover .ak-mosaic-item-name span,
.ak-mosaic-item:hover .ak-price {
    color: #4aa3ff !important;
    transition: color 0.3s ease-in-out;
}

/* === USER ACCOUNT BAR === */
.ak-idbar-box.ak-box-logged {
    background: linear-gradient(-45deg, #142b47, #1c3b5f, #183459, #0d223e);
    background-size: 400% 400%;
    animation: animatedHeaderBG 10s ease infinite;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(30, 100, 200, 0.3);
    padding: 15px;
    font-family: Arial, sans-serif;
}

.ak-idbar-box.ak-box-logged * {
    color: #fff !important;
}

.ak-account-infos,
.ak-infos-logged,
.ak-infos-row {
    padding-top: 10px;
}

.ak-infos-logged-link,
.btn.btn-default {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 6px 12px;
    margin: 5px 4px;
    border-radius: 2px;
    color: #fff !important;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.ak-infos-logged-link:hover,
.btn.btn-default:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.ak-infos-row.ak-account-manage {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
}

.ak-infos-nickname {
    display: inline-block;
    margin-left: 10px;
}

.ak-infos-dofus {
    padding-left: 10px;
}

.ak-infos-logged-link:hover,
.btn.btn-default:hover,
.ak-infos-nickname:hover,
.ak-subscribe-link:hover {
    color: #ffd700 !important;
}

/* === ANIMATED HEADERS === */
body h1:not(.no-style),
body h2:not(.no-style),
body .ak-title-container:not(.no-style) h1 {
    background: linear-gradient(-45deg, #142b47, #1c3b5f, #183459, #0d223e);
    background-size: 400% 400%;
    animation: animatedHeaderBG 10s ease infinite;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    padding: 12px 25px;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(30, 100, 200, 0.15);
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
    text-align: center;
    font-size: 32px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

body h1:hover,
body h2:hover,
body .ak-title-container:hover {
    box-shadow: 0 0 12px rgba(30, 100, 200, 0.4);
}

/* === HIGHSCORES TABLE === */
.ak-ladder {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: none !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2) inset;
    border-radius: 4px;
    overflow: visible;
    position: relative;
    z-index: 1;
    table-layout: auto;
    transition: all 0.4s ease;
}

aside .ak-ladder {
    z-index: 2;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Table headers */
.ak-ladder thead tr {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-bottom: none;
}

.ak-ladder thead th {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 10px !important;
    border: none !important;
    position: relative;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.ak-ladder thead th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #4a90e2 20%, #6bb3ff 50%, #4a90e2 80%, transparent 100%);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.6);
}

/* Table rows */
.ak-ladder tbody tr {
    border: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.ak-ladder tbody tr.ak-bg-odd {
    background: rgba(30, 30, 30, 0.6);
}

.ak-ladder tbody tr.ak-bg-even {
    background: rgba(40, 40, 40, 0.6);
}

.ak-ladder tbody tr.ak-first-ladder {
    background: rgba(255, 215, 0, 0.1);
}

.ak-ladder tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.3) 15%, rgba(107, 179, 255, 0.5) 50%, rgba(74, 144, 226, 0.3) 85%, transparent 100%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Hover effects - main content */
.main .ak-ladder tbody tr:hover {
    background: linear-gradient(90deg, rgba(74, 144, 226, 0.2) 0%, rgba(74, 144, 226, 0.1) 100%) !important;
    box-shadow: -3px 0 0 0 #4a90e2 inset;
}

.main .ak-ladder tbody tr:hover::after {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.6) 10%, rgba(107, 179, 255, 0.8) 50%, rgba(74, 144, 226, 0.6) 90%, transparent 100%);
    opacity: 1;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.4);
}

/* Hover effects - sidebar */
aside .ak-ladder tbody tr:hover {
    background: rgba(74, 144, 226, 0.15) !important;
}

aside .ak-ladder tbody tr:hover::after {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.6) 10%, rgba(107, 179, 255, 0.8) 50%, rgba(74, 144, 226, 0.6) 90%, transparent 100%);
    opacity: 1;
}

/* Table cells */
.ak-ladder td {
    border: none !important;
    padding: 12px 10px !important;
    vertical-align: middle;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.ak-rank {
    font-weight: bold;
    padding-left: 15px !important;
}

/* Position icons for top 3 */
.ak-icon-position {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    min-width: 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ak-icon-position.ak-position-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    animation: goldPulse 2s ease-in-out infinite;
}

.ak-icon-position.ak-position-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    color: #000;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.5);
}

.ak-icon-position.ak-position-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #d4a574 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.5);
}

.ak-icon-position:hover {
    transform: scale(1.1);
}

/* Name links */
.ak-name a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.ak-name a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #4a90e2;
    transition: width 0.3s ease;
}

.ak-name a:hover {
    color: #6bb3ff;
}

.ak-name a:hover::after {
    width: 100%;
}

/* Outfit images */
.ak-outfit img {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ak-ladder tbody tr:hover .ak-outfit img {
    transform: scale(1.1);
}

aside .ak-ladder tbody tr:hover .ak-outfit img {
    transform: scale(1.05);
}

/* Dropdown selectors */
.ak-ladder select.form-control {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #fff;
    border: 2px solid #3a3a3a;
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ak-ladder select.form-control:hover {
    border-color: #4a90e2;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

.ak-ladder select.form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
    outline: none;
}

/* View button */
.ak-ladder .btn-primary {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    transition: all 0.3s ease;
}

.ak-ladder .btn-primary:hover {
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6);
    transform: translateY(-2px);
}

.ak-ladder .btn-primary:active {
    transform: translateY(0);
}

/* Toggle level button */
#toggleLevelBtn {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border: none;
    border-radius: 4px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#toggleLevelBtn:hover {
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.6);
    transform: translateY(-1px);
}

#toggleLevelBtn:active {
    transform: translateY(0);
}

/* Level column */
aside .ak-ladder .level-column {
    color: #4a90e2 !important;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 15px;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    white-space: nowrap;
}

aside .ak-ladder tbody tr:hover .level-column {
    color: #6bb3ff !important;
    text-shadow: 0 0 12px rgba(107, 179, 255, 0.8);
}

/* === OVERRIDE INLINE STYLES === */
div[style*="background:#f7f7f7"],
div[style*="background-color:#f7f7f7"],
div[style*="background:#fff"],
div[style*="background-color:#fff"],
div[style*="background:#ffffff"],
div[style*="background-color:#ffffff"] {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text) !important;
}

*:not([style*="background-image"])[style*="background:#fff"],
*:not([style*="background-image"])[style*="background: #fff"],
*:not([style*="background-image"])[style*="background-color:#fff"],
*:not([style*="background-image"])[style*="background-color: #fff"] {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* === PRESERVE BACKGROUND IMAGES === */
*[style*="background-image"],
[class*="bg-image"],
.ak-panel-blue {
    background-color: transparent !important;
    background-image: inherit !important;
}

/* === MODALS === */
.modal-content,
.well {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text) !important;
}

/* === UTILITY CLASSES === */
.bg-dark-1 {
    background-color: var(--dm-bg-primary) !important;
}

.bg-dark-2 {
    background-color: var(--dm-bg-tertiary) !important;
}

.bg-dark-3 {
    background-color: #2e2e2e !important;
}

.text-light {
    color: var(--dm-text) !important;
}

.text-dimmed {
    color: var(--dm-text-dimmed) !important;
}

.text-muted {
    color: var(--dm-text-muted) !important;
}

.border-light {
    border: 1px solid var(--dm-border) !important;
}

/* === TOP RANKS === */
.toprank-1 {
    color: #7CFC00 !important;
}

.toprank-2 {
    color: #C0C0C0 !important;
}

.toprank-3 {
    color: #CD7F32 !important;
}

/* === NAVIGATION ACTIVE STATE === */
.ak-nav-links li.active a {
    border-bottom: 3px solid #2b76ff;
    color: #ffffff;
}

/* === ITEM LISTS === */
.ak-item-list .ak-item,
.ak-item-list .ak-column,
.ak-item-list .ak-content,
.ak-item-list .ak-panel,
.ak-item-list .ak-card,
.ak-item-list .panel,
.ak-item-list .item-box,
.ak-item-list .item {
    background-color: var(--dm-bg-secondary) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.item-box .description,
.item-card .description,
.item-card p,
.item-box p {
    color: var(--dm-text-dimmed) !important;
}

.item-box small,
.item-box .footer,
.item-card small {
    color: var(--dm-text-muted) !important;
}

/* === DARK MODE CONTENT === */
body.darkmode .news-content,
body.darkmode .news-content * {
    color: #dddddd !important;
    background-color: transparent !important;
}

body.darkmode .newsTitle,
body.darkmode .newsTitle a {
    color: var(--dm-accent) !important;
}

body.darkmode .newsBox,
body.darkmode .newsBody,
body.darkmode .newsAuthor {
    background-color: var(--dm-bg-secondary) !important;
    color: #dddddd !important;
}

/* === FADE IN ANIMATION === */
.fade-in {
    animation: fadeSlideUp 0.4s ease-in-out;
}

/* === KEYFRAME ANIMATIONS === */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animatedGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animateTitleBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animatedHeaderBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.5);
    }
}

/* === COUNTDOWN TIMER === */
#countDownTimer {
    color: #e0e0e0 !important;
}

/* === SOCIAL MEDIA ICONS === */
.smedia i {
    color: #ccc !important;
    font-size: 20px;
}

.smedia i:hover {
    color: var(--dm-accent-hover) !important;
}

/* === AUCTION OVERLAY === */
.auction-overlay {
    border: 1px solid var(--dm-border) !important;
}

/* === VOCATION, LEVEL, POINTS === */
.ak-vocation,
.ak-level,
.ak-points {
    color: #ccc;
    font-weight: 500;
}

/* === CENTER ALIGNMENT === */
.ak-center {
    text-align: center;
}

/* === EMPTY STATE === */
.ak-ladder tbody td[colspan] {
    text-align: center;
    padding: 40px 20px !important;
    color: #888;
    font-size: 16px;
    font-style: italic;
}

/* =====================================================
   REGISTER PAGE STYLING
   Optimized external CSS for register.php
   ===================================================== */

/* ========================================
   SUCCESS PANEL
   ======================================== */

.ak-success-panel {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(43, 170, 255, 0.35);
  background: linear-gradient(180deg, #0c1630 0%, #0a1328 100%);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: #0b5ea8;
  margin: 14px 0 22px;
}

.ak-success-panel .ak-success-icon {
  flex: 0 0 44px;
  height: 44px;
  width: 44px;
  border-radius: 10%;
  background: radial-gradient(ellipse at center, rgba(43, 170, 255, 0.25), rgba(43, 170, 255, 0.05));
  display: grid;
  place-items: center;
  border: 1px solid rgba(43, 170, 255, 0.45);
}

.ak-success-panel h4 {
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #eaf2ff;
}

.ak-success-panel p {
  margin: 0;
  color: #c6d7ff;
}

/* ========================================
   ERROR PANEL
   ======================================== */

.ak-error-panel {
  padding: 16px 20px;
  border: 1px solid rgba(231, 76, 60, 0.4);
  background: linear-gradient(180deg, #2c1a1a 0%, #1f1010 100%);
  border-radius: 3px;
  margin: 14px 0 22px;
}

.ak-error-panel ul {
  margin: 0;
  padding: 0 0 0 20px;
  color: #ff6b6b;
}

.ak-error-panel li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.ak-error-panel li:last-child {
  margin-bottom: 0;
}

/* ========================================
   LOGIN BUTTON (in success panel)
   ======================================== */

.ak-btn-login {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 22px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid #c69e00;
  background: linear-gradient(180deg, #ffe373 0%, #ffc20a 100%);
  color: #111111 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 0 #b98c00, 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ak-btn-login:hover {
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #b98c00, 0 12px 24px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.ak-btn-login:active {
  color: #222222 !important;
  transform: translateY(1px);
  box-shadow: 0 2px 0 #b98c00, 0 8px 16px rgba(0, 0, 0, 0.2);
}

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

@media (max-width: 480px) {
  .ak-success-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .ak-success-panel .ak-success-icon {
    width: 40px;
    height: 40px;
  }
  
  .ak-btn-login {
    width: 100%;
    text-align: center;
  }
}

/* =====================================================
   NUCLEAR FIX: Remove ALL ::before from table details
   ===================================================== */

/* Remove arrow with maximum specificity */
table.ak-ladder.ak-container.ak-table.ak-responsivetable .ak-responsivetable-row-detail-inner > div > strong:before,
.ak-ladder .ak-responsivetable-row-detail-inner > div > strong:before,
.ak-responsivetable .ak-responsivetable-row-detail-inner > div > strong:before,
.ak-main-container .ak-responsivetable .ak-responsivetable-row-detail-inner > div > strong:before,
.ak-main-container .ak-admin-text .ak-responsivetable .ak-responsivetable-row-detail-inner > div > strong:before,
.ak-main-container .ak-panel-stack .ak-admin-text .ak-responsivetable .ak-responsivetable-row-detail-inner > div > strong:before {
    content: "" !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style Level text - cyan color */
.ak-responsivetable-row-detail-inner strong,
.ak-responsivetable-row-detail strong,
.ak-ladder .ak-responsivetable-row-detail-inner strong {
    color: #7ab0ff !important;
    text-shadow: 0 0 6px rgba(122, 176, 255, 0.4) !important;
}

.ak-responsivetable-row-detail-inner,
.ak-responsivetable-row-detail-inner > div,
.ak-responsivetable-row-detail-inner > div > strong,
.ak-responsivetable-row-detail-inner strong,
.ak-responsivetable-row-detail-inner span,
.ak-responsivetable-row-detail strong,
.ak-ladder .ak-responsivetable-row-detail-inner,
.ak-ladder .ak-responsivetable-row-detail-inner strong,
.ak-ladder .ak-responsivetable-row-detail-inner span {
    color: #7ab0ff !important;
    text-shadow: 0 0 6px rgba(122, 176, 255, 0.4) !important;
}

/* Also style the entire text content */
.ak-responsivetable-row-detail-inner * {
    color: #7ab0ff !important;
}