:root {
    --lord-bg: #120b05;
    --lord-panel: #1c1108;
    --lord-panel-2: #241608;
    --lord-gold: #d4af37;
    --lord-gold-dark: #8a6a1f;
    --lord-gold-bright: #f4c430;
    --lord-cream: #f3e6c8;
    --lord-muted: rgba(243, 230, 200, 0.68);
    --lord-line: rgba(212, 175, 55, 0.34);
    --lord-shadow: rgba(0, 0, 0, 0.55);
    --lord-cut: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
    color-scheme: dark;
}

* {
    scrollbar-color: var(--lord-gold-dark) var(--lord-bg);
}

html {
    background: var(--lord-bg);
}

body {
    font-family: 'Manrope', 'Inter', Arial, Tahoma, 'Segoe UI', sans-serif !important;
    color: var(--lord-cream) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.08), transparent 28rem),
        radial-gradient(circle at 82% 82%, rgba(138, 106, 31, 0.12), transparent 32rem),
        linear-gradient(135deg, #120b05 0%, #180f08 52%, #0c0704 100%) !important;
    overflow-x: hidden !important;
}

body::before,
body::after {
    animation: none !important;
    background:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(212, 175, 55, 0.045) calc(100% - 1px)),
        linear-gradient(0deg, transparent 0, transparent calc(100% - 1px), rgba(212, 175, 55, 0.035) calc(100% - 1px)) !important;
    background-size: 74px 74px !important;
    opacity: 0.45 !important;
    transform: none !important;
}

a {
    color: var(--lord-gold-bright);
}

.lord-ash-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.floating-element,
.particle {
    display: none !important;
}

.container,
.login-wrapper,
.page-wrapper {
    position: relative !important;
    z-index: 2 !important;
}

.container {
    max-width: 1180px !important;
    width: min(1180px, 100%) !important;
    aspect-ratio: auto !important;
}

.login-wrapper,
.page-wrapper {
    max-width: 680px !important;
}

.login-card,
.page-card,
.content,
.servers-section,
.admin-section,
.server-card,
.admin-card,
.player-info,
#bank-form,
#card-form,
.qr-section,
.stats-panel,
.history-section,
.info-section,
.social-bar,
.player-banner {
    background:
        linear-gradient(180deg, rgba(36, 22, 8, 0.94), rgba(28, 17, 8, 0.96)) !important;
    border: 1px solid var(--lord-line) !important;
    border-radius: 0 !important;
    box-shadow:
        0 22px 60px var(--lord-shadow),
        inset 0 0 0 1px rgba(244, 196, 48, 0.04) !important;
    backdrop-filter: blur(14px) saturate(112%) !important;
}

.login-card,
.page-card,
.content,
.servers-section,
.admin-section {
    clip-path: var(--lord-cut) !important;
}

.login-card::before,
.page-card::before,
.content::before,
.servers-section::before,
.admin-section::before {
    background: linear-gradient(90deg, transparent, var(--lord-gold-dark), var(--lord-gold-bright), var(--lord-gold-dark), transparent) !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.28) !important;
    animation: none !important;
}

.nav-bar,
.top-bar {
    position: sticky !important;
    top: 14px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(28, 17, 8, 0.88) !important;
    border: 1px solid var(--lord-line) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34) !important;
    margin-bottom: 28px !important;
    padding: 10px 12px !important;
    backdrop-filter: blur(16px) !important;
}

.top-bar {
    justify-content: flex-end !important;
}

.nav-bar > div:first-child,
.top-bar::before {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
    color: var(--lord-cream) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.top-bar::before {
    content: 'I / Cổng nạp';
    margin-right: auto;
    font-size: 0.82rem;
}

.nav-link,
.btn-logout,
.btn-enter,
.btn,
.social-btn,
.copy-btn,
.admin-link,
.type-card,
.facebook-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--lord-cream) !important;
    background: rgba(36, 22, 8, 0.86) !important;
    border: 1px solid var(--lord-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    font-family: 'Manrope', 'Inter', Arial, Tahoma, 'Segoe UI', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease !important;
}

.nav-bar::before,
.nav-link::before,
.btn::before,
.btn-enter::before,
.social-btn::before,
.copy-btn::before,
.admin-link::before,
.type-card::before,
.server-card::before,
.admin-card::before,
.server-logo::before,
.footer::before,
#navLogout::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.btn-enter,
.btn,
.btn-bank,
.btn-card {
    min-height: 54px !important;
    width: 100% !important;
    color: #120b05 !important;
    background: var(--lord-gold) !important;
    border-color: var(--lord-gold-bright) !important;
}

.nav-link:hover,
.btn-logout:hover,
.btn-enter:hover,
.btn:hover,
.social-btn:hover,
.copy-btn:hover,
.admin-link:hover,
.type-card:hover,
.facebook-link:hover {
    color: var(--lord-gold-bright) !important;
    border-color: rgba(244, 196, 48, 0.8) !important;
    background: rgba(50, 31, 12, 0.94) !important;
    transform: translateY(-2px) !important;
}

.btn-enter:hover,
.btn:hover {
    color: #120b05 !important;
    background: var(--lord-gold-bright) !important;
}

.header,
.logo-section,
.section-heading {
    text-align: center !important;
    position: relative !important;
}

.header::after,
.divider,
.section-heading::after {
    content: '' !important;
    display: block !important;
    width: 138px !important;
    height: 18px !important;
    margin: 22px auto 0 !important;
    border-top: 1px solid var(--lord-line) !important;
    border-bottom: 1px solid var(--lord-line) !important;
    background:
        linear-gradient(45deg, transparent 42%, var(--lord-gold) 44%, var(--lord-gold) 56%, transparent 58%) center / 18px 18px no-repeat !important;
    box-shadow: none !important;
}

.brand-name,
.header h1,
.section-title,
.section-heading h2,
.form-section h2,
.type-name,
.server-name,
.admin-name,
.info-title {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
    color: var(--lord-gold-bright) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 2px 18px rgba(212, 175, 55, 0.14) !important;
    filter: none !important;
    animation: none !important;
    letter-spacing: 0.08em !important;
}

.brand-tagline,
.header p,
.tagline,
.section-heading p,
.form-section p,
.type-desc,
.footer,
.footer-text,
.player-server,
.stat-label,
.server-info,
.info-list,
.history-empty {
    color: var(--lord-muted) !important;
    text-shadow: none !important;
}

.server-logo,
.player-avatar,
.admin-avatar,
.server-icon,
.type-icon {
    background: rgba(18, 11, 5, 0.72) !important;
    border: 1px solid var(--lord-line) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
    box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.08) !important;
}

.type-icon,
.server-icon,
.admin-avatar {
    color: var(--lord-gold-bright) !important;
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
    font-weight: 800 !important;
}

.type-icon {
    font-size: 0 !important;
}

.type-card:nth-child(1) .type-icon::before { content: 'I'; font-size: 2rem; }
.type-card:nth-child(2) .type-icon::before { content: 'II'; font-size: 2rem; }
.server-card:nth-child(1) .server-icon::before,
.admin-card:nth-child(1) .admin-avatar::before { content: 'I'; }
.server-card:nth-child(2) .server-icon::before,
.admin-card:nth-child(2) .admin-avatar::before { content: 'II'; }
.server-card:nth-child(3) .server-icon::before,
.admin-card:nth-child(3) .admin-avatar::before { content: 'III'; }
.server-card:nth-child(4) .server-icon::before { content: 'IV'; }
.server-card:nth-child(5) .server-icon::before { content: 'V'; }

.form-section h2::before,
.section-title::before,
.info-title::before {
    content: '◆';
    display: inline-block;
    margin-right: 10px;
    color: var(--lord-gold-dark);
    font-size: 0.7em;
    transform: translateY(-1px);
}

.info-list li::before {
    content: none !important;
}

.input-group,
.form-group {
    position: relative !important;
}

.input-group .input-icon {
    display: none !important;
}

.input-group input,
.form-control,
.server-select-group select {
    min-height: 50px !important;
    padding: 13px 16px !important;
    color: var(--lord-cream) !important;
    background: rgba(18, 11, 5, 0.82) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
    box-shadow: none !important;
    font-family: 'Manrope', 'Inter', Arial, Tahoma, 'Segoe UI', sans-serif !important;
}

.input-group input {
    padding-left: 16px !important;
}

.input-group input:focus,
.form-control:focus,
.server-select-group select:focus {
    outline: none !important;
    border-color: var(--lord-gold-bright) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12) !important;
    transform: none !important;
}

.form-label,
.server-select-group label {
    color: var(--lord-gold) !important;
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
    letter-spacing: 0.05em !important;
}

.form-label::before {
    background: var(--lord-gold-dark) !important;
    border-radius: 0 !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

.type-grid,
.servers-grid,
.admin-grid,
.stats-panel {
    display: grid !important;
    gap: 18px !important;
}

.type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.servers-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.admin-grid,
.stats-panel {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.type-card,
.server-card,
.admin-card,
.stat-card {
    padding: 22px !important;
}

.player-name,
.stat-value,
.ip-address,
.qr-amount,
.history-table td:nth-child(3),
.server-info-item span,
.amount-select,
#bankAmount,
#cardAmount {
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    color: var(--lord-gold-bright) !important;
}

.history-table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: var(--lord-cream) !important;
}

.history-table th {
    color: var(--lord-gold) !important;
    background: rgba(18, 11, 5, 0.76) !important;
    border-bottom: 1px solid var(--lord-line) !important;
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
}

.history-table td {
    border-bottom: 1px solid rgba(212, 175, 55, 0.14) !important;
}

.message {
    border-radius: 0 !important;
    border: 1px solid var(--lord-line) !important;
    background: rgba(36, 22, 8, 0.92) !important;
    color: var(--lord-cream) !important;
}

.error-msg {
    background: rgba(90, 35, 20, 0.72) !important;
    border: 1px solid rgba(244, 196, 48, 0.28) !important;
    color: #ffd8b0 !important;
}

.social-row {
    gap: 10px !important;
}

.social-link {
    min-width: 90px !important;
    min-height: 44px !important;
    font-size: 0 !important;
    background: rgba(36, 22, 8, 0.86) !important;
    border: 1px solid var(--lord-line) !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}

.social-link:nth-child(1)::before { content: 'Discord'; }
.social-link:nth-child(2)::before { content: 'Facebook'; }
.social-link:nth-child(3)::before { content: 'TikTok'; }

.social-link::before {
    font-size: 0.78rem;
    color: var(--lord-cream);
    font-family: 'Manrope', 'Inter', Arial, Tahoma, 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qr-code {
    background: #f7efe0 !important;
    border: 1px solid var(--lord-gold) !important;
    border-radius: 0 !important;
}

.spinner {
    border-color: rgba(18, 11, 5, 0.28) !important;
    border-top-color: #120b05 !important;
}

@media (max-width: 700px) {
    body {
        padding: 14px !important;
    }

    .container {
        padding: 0 !important;
    }

    .login-card,
    .page-card,
    .content,
    .servers-section,
    .admin-section {
        padding: 26px 18px !important;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
    }

    .header h1,
    .brand-name {
        font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
    }

    .nav-bar {
        flex-wrap: wrap !important;
    }

    .nav-link,
    .btn-logout,
    .social-btn,
    .copy-btn {
        flex: 1 1 auto !important;
        padding-inline: 12px !important;
        font-size: 0.78rem !important;
    }

    .type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .type-card {
        padding: 16px 10px !important;
    }

    .social-bar {
        grid-template-columns: 1fr !important;
    }

    .history-section {
        overflow-x: auto !important;
    }

    .history-table {
        min-width: 520px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}