/*
 * Hypelands Theme for NamelessMC
 * Author: Hamzq (hamzq.dev)
 * Licensed under MIT
 */

/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Penumbra Serif';
    src: url('../fonts/PenumbraSerifStd-Regular.woff') format('woff'),
         url('../fonts/PenumbraSerifStd-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Penumbra Serif';
    src: url('../fonts/PenumbraSerifStd-Light.woff') format('woff'),
         url('../fonts/PenumbraSerifStd-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Penumbra Serif';
    src: url('../fonts/PenumbraSerifStd-Semibold.woff') format('woff'),
         url('../fonts/PenumbraSerifStd-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Penumbra Serif';
    src: url('../fonts/PenumbraSerifStd-Bold.woff') format('woff'),
         url('../fonts/PenumbraSerifStd-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* ==================== CSS VARIABLES ==================== */
:root {
    /* Background Colors */
    --hl-bg-primary: var(--hypelands-bg-primary, #0f0f0f);
    --hl-bg-secondary: var(--hypelands-bg-secondary, #0a0a0a);
    --hl-bg-tertiary: var(--hypelands-bg-tertiary, #141414);
    
    /* Text Colors */
    --hl-text-primary: var(--hypelands-text-primary, #c0d6e9);
    --hl-text-secondary: var(--hypelands-text-secondary, #8a9fb3);
    --hl-text-heading: var(--hypelands-text-heading, #ffffff);
    
    /* Accent Colors */
    --hl-accent-primary: var(--hypelands-accent-primary, #01bbff);
    --hl-accent-secondary: var(--hypelands-accent-secondary, #010eff);
    --hl-accent-glow: var(--hypelands-accent-glow, #010eff);
    
    /* Button Gradient */
    --hl-btn-gradient: var(--hypelands-btn-gradient, linear-gradient(345deg, #090915, #14213a 99%, #c0d6e9 100%, #121d33 0, #0091ff));
    
    /* Border Colors */
    --hl-border-primary: var(--hypelands-border-primary, #08109e);
    --hl-border-secondary: var(--hypelands-border-secondary, rgba(192, 214, 233, 0.2));
    
    /* Shadow Colors */
    --hl-shadow-primary: var(--hypelands-shadow-primary, rgba(0, 0, 0, 0.4));
    --hl-shadow-glow: var(--hypelands-shadow-glow, rgba(1, 16, 255, 0.4));
    
    /* Navbar Colors */
    --hl-navbar-bg: var(--hypelands-navbar-bg, #0a0a0a);
    --hl-navbar-text: var(--hypelands-navbar-text, #ffffff);
    --hl-navbar-hover: var(--hypelands-navbar-hover, #01bbff);
    
    /* Footer Colors */
    --hl-footer-bg: var(--hypelands-footer-bg, #0a0a0a);
    --hl-footer-text: var(--hypelands-footer-text, #c0d6e9);
    --hl-footer-link: var(--hypelands-footer-link, #8a9fb3);
    
    /* Hero Section */
    --hl-hero-height: var(--hypelands-hero-height, 650px);
    --hl-hero-overlay: var(--hypelands-hero-overlay, rgba(0, 0, 0, 0.15));
    
    /* Discord CTA */
    --hl-discord-bg: var(--hypelands-discord-bg, rgba(13, 15, 35, 0.6));
    --hl-discord-border: var(--hypelands-discord-border, rgba(88, 101, 242, 0.15));
    --hl-discord-accent: var(--hypelands-discord-accent, #5865F2);
    
    /* Bar Colors */
    --hl-blue-bar: var(--hypelands-blue-bar, linear-gradient(to right, #0a0a0a 0%, #08109e 5%, #08109e 95%, #0a0a0a 100%));
    --hl-gray-bar: var(--hypelands-gray-bar, #1a1a1a);
    
    /* Card Colors */
    --hl-card-bg: var(--hypelands-card-bg, #141414);
    --hl-card-border: var(--hypelands-card-border, rgba(192, 214, 233, 0.1));
}

/* ==================== BASE STYLES ==================== */
html {
    min-height: 100%;
}

body {
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
    background-color: var(--hl-bg-primary) !important;
    color: var(--hl-text-primary) !important;
    min-height: 100vh;
}

/* Wrapper for sticky footer */
.hypelands-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hypelands-content {
    flex: 1 0 auto;
}

.hypelands-footer {
    flex-shrink: 0;
}

/* ==================== MASTER OVERRIDE - FORCE DARK THEME ==================== */
/* Force dark backgrounds on EVERYTHING */
.ui.segment,
.ui.segments .segment,
.ui.segments,
.ui.raised.segment,
.ui.stacked.segment,
.ui.piled.segment,
.ui.vertical.segment,
.ui.horizontal.segment,
.ui.padded.segment,
.ui.compact.segment,
.ui.basic.segment,
.ui.clearing.segment,
.segment {
    background: #141414 !important;
    background-color: #141414 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
    color: #c0d6e9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.ui.inverted.segment {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Cards */
.ui.card,
.ui.cards > .card,
.ui.cards .card,
.card {
    background: #141414 !important;
    background-color: #141414 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    color: #c0d6e9 !important;
}

.ui.card > .content,
.ui.cards > .card > .content,
.card > .content {
    background: transparent !important;
    border-top-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.card > .extra,
.ui.cards > .card > .extra {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(192, 214, 233, 0.1) !important;
}

/* Force light text EVERYWHERE */
.ui.card .header,
.ui.cards > .card .header,
.ui.card .content .header,
.ui.segment .header,
h1, h2, h3, h4, h5, h6,
.ui.header,
.header {
    color: #ffffff !important;
}

.ui.card .meta,
.ui.cards > .card .meta,
.ui.card .description,
.ui.cards > .card .description,
.meta,
.description,
p,
span,
div,
td,
th,
li,
label,
.content {
    color: #c0d6e9 !important;
}

/* ==================== BLUE BARS ==================== */
.blue-bars {
    height: 4px;
    width: 100%;
    background: var(--hl-blue-bar);
}

.gray-bars {
    height: 1px;
    width: 100%;
    background-color: var(--hl-gray-bar);
}

/* ==================== NAVBAR STYLES ==================== */
.hypelands-navbar {
    display: flex;
    align-items: center;
    gap: 24px;
    background-color: var(--hl-navbar-bg);
    padding: 4px 32px;
    position: relative;
    z-index: 1000;
}

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

.hypelands-nav-logo img {
    padding-left: 50px;
    height: 64px;
    width: auto;
    transition: transform 0.2s ease;
}

.hypelands-nav-logo img:hover {
    transform: scale(1.03);
}

/* Hamburger Menu */
.hypelands-hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.hypelands-hamburger span {
    width: 24px;
    height: 2px;
    background-color: var(--hl-navbar-text);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: block;
    position: absolute;
}

.hypelands-hamburger span:nth-child(1) { top: 12px; }
.hypelands-hamburger span:nth-child(2) { top: 19px; }
.hypelands-hamburger span:nth-child(3) { top: 26px; }

.hypelands-hamburger.active span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
}

.hypelands-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.hypelands-hamburger.active span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
}

/* Nav Links */
.hypelands-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    flex: 1;
}

.hypelands-nav-links li a {
    display: block;
    color: var(--hl-navbar-text);
    text-decoration: none;
    padding: 10px 16px;
    font-family: 'Penumbra Serif', serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    border-radius: 3px;
}

.hypelands-nav-links li a:hover,
.hypelands-nav-links li a.active {
    color: var(--hl-navbar-hover);
    text-shadow: 0 0 10px var(--hl-accent-glow), 0 0 20px var(--hl-accent-glow), 0 0 30px var(--hl-accent-glow);
}

/* Nav Auth / Account Dropdown */
.hypelands-nav-auth {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.hypelands-dropdown {
    position: relative;
    display: inline-block;
}

.hypelands-dropbtn {
    padding: 10px 24px;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    border-radius: 7px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    color: var(--hl-text-primary);
    background-image: var(--hl-btn-gradient);
    cursor: pointer;
}

.hypelands-dropbtn:hover {
    color: var(--hl-text-heading);
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.hypelands-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    background-image: var(--hl-btn-gradient);
    min-width: 200px;
    box-shadow: 0 8px 16px var(--hl-shadow-primary);
    z-index: 1001;
    border-radius: 7px;
    border: 1px solid var(--hl-border-secondary);
    animation: dropdownFadeIn 0.3s ease forwards;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Invisible hover bridge to prevent dropdown from closing */
.hypelands-dropdown::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.hypelands-dropdown:hover .hypelands-dropdown-content,
.hypelands-dropdown-content:hover {
    display: block;
}

/* Dropdown item animations like mockup */
@keyframes itemFadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.hypelands-dropdown-content a {
    opacity: 0;
    animation: itemFadeIn 0.3s ease forwards;
}

.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(1) { animation-delay: 0.1s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(2) { animation-delay: 0.15s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(3) { animation-delay: 0.2s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(4) { animation-delay: 0.25s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(5) { animation-delay: 0.3s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(6) { animation-delay: 0.35s; }

.hypelands-dropdown-content a,
.hypelands-dropdown-content .dropdown-item {
    color: var(--hl-text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hypelands-dropdown-content a:first-child { border-radius: 7px 7px 0 0; }
.hypelands-dropdown-content a:last-child { border-radius: 0 0 7px 7px; }

.hypelands-dropdown-content a:hover,
.hypelands-dropdown-content .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--hl-text-heading);
}

.hypelands-dropdown-divider {
    height: 1px;
    background: var(--hl-border-secondary);
    margin: 5px 0;
}

/* Icon-only button styling for notifications */
.hypelands-icon-btn {
    padding: 10px 14px !important;
    min-width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hypelands-icon-btn i {
    margin: 0 !important;
    font-size: 16px;
}

/* User Avatar in Dropdown */
.hypelands-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==================== HERO SECTION ==================== */
.hypelands-hero {
    height: var(--hl-hero-height);
    min-height: 400px;
    padding: 0 45px;
    background-color: #000;
    background-image: var(--hypelands-hero-bg, url('../images/hytale_world_background.jpg'));
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hypelands-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--hl-hero-overlay) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Particles */
.hypelands-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.hypelands-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(1, 187, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle linear forwards;
    box-shadow: 0 0 6px rgba(1, 187, 255, 0.4);
}

.hypelands-particle.white {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

@keyframes float-particle {
    0% { 
        transform: translateY(0) translateX(0); 
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% { 
        transform: translateY(-100vh) translateX(var(--drift, 0px)); 
        opacity: 0;
    }
}

.hypelands-hero-content {
    text-align: center;
    position: relative;
    z-index: 3;
}

.hypelands-welcome-text {
    font-family: 'Penumbra Serif', serif;
    font-size: 36px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hypelands-hero-logo {
    width: 650px;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* ==================== DISCORD CTA SECTION ==================== */
.hypelands-discord-cta {
    background-color: var(--hl-bg-secondary);
    padding: 60px 40px;
}

.hypelands-discord-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    background: linear-gradient(135deg, rgba(13, 15, 35, 0.6) 0%, rgba(20, 25, 45, 0.4) 100%);
    border: 1px solid rgba(88, 101, 242, 0.15);
    border-radius: 8px;
    padding: 50px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.hypelands-discord-container:hover {
    background: linear-gradient(135deg, rgba(13, 15, 35, 0.8) 0%, rgba(20, 25, 45, 0.6) 100%);
    border-color: rgba(88, 101, 242, 0.25);
}

.hypelands-discord-logo svg {
    width: 90px;
    height: auto;
    fill: var(--hl-discord-accent);
    filter: drop-shadow(0 3px 10px rgba(88, 101, 242, 0.4));
}

.hypelands-discord-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hypelands-discord-text {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--hl-text-heading);
    margin: 0;
    font-weight: 400;
}

.hypelands-member-count {
    color: var(--hl-discord-accent);
    font-weight: 600;
}

.hypelands-discord-btn {
    display: inline-block;
    padding: 14px 40px;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--hl-text-heading);
    background: var(--hl-discord-accent);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.hypelands-discord-btn:hover {
    background: #4752C4;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4);
    color: var(--hl-text-heading);
}

/* ==================== CONTENT SECTION ==================== */
.hypelands-content {
    flex: 1 0 auto;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* ==================== FOOTER STYLES ==================== */
.hypelands-footer {
    background-color: var(--hl-footer-bg);
    color: var(--hl-footer-text);
    padding: 60px 80px 0;
    flex-shrink: 0;
    margin-top: auto;
}

.hypelands-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.hypelands-footer-section h3 {
    font-family: 'Penumbra Serif', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    margin: 0 0 30px 0;
    letter-spacing: 1.5px;
}

.hypelands-footer-section p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: var(--hl-footer-link);
    margin: 0;
    font-weight: 300;
}

.hypelands-footer-logo {
    width: 280px;
    height: auto;
    margin-bottom: 25px;
    opacity: 0.95;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hypelands-footer-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}

.hypelands-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hypelands-footer-links li {
    margin-bottom: 16px;
}

.hypelands-footer-links a {
    color: var(--hl-footer-link);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.hypelands-footer-links a:hover {
    color: var(--hl-accent-primary);
    padding-left: 5px;
}

.hypelands-footer-store-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--hl-text-heading);
    background-image: var(--hl-btn-gradient);
    border-radius: 6px;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.hypelands-footer-store-btn:hover {
    filter: brightness(1.3);
    transform: translateY(-2px);
    color: var(--hl-text-heading);
}

.hypelands-footer-bottom {
    margin-top: 50px;
}

.hypelands-footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    max-width: 1400px;
    margin: 0 auto;
    gap: 30px;
}

.hypelands-footer-bottom-content p {
    margin: 0;
    font-size: 13px;
    color: var(--hl-footer-link);
    line-height: 1.5;
}

.hypelands-footer-social-icons {
    display: flex;
    gap: 15px;
}

.hypelands-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--hl-footer-text);
    background-image: var(--hl-btn-gradient);
    border-radius: 50%;
    text-decoration: none;
    transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.hypelands-footer-social:hover {
    color: var(--hl-text-heading);
    filter: brightness(1.2);
    transform: translateY(-3px);
}

.hypelands-footer-social svg {
    width: 20px;
    height: 20px;
}

/* ==================== BUTTONS ==================== */
.hypelands-btn {
    padding: 10px 24px;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    color: var(--hl-text-primary);
    background-image: var(--hl-btn-gradient);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.hypelands-btn:hover {
    color: var(--hl-text-heading);
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.hypelands-btn-primary {
    background: var(--hl-accent-primary);
    color: var(--hl-text-heading);
}

.hypelands-btn-primary:hover {
    box-shadow: 0 5px 15px var(--hl-shadow-glow);
}

/* ==================== SEMANTIC UI OVERRIDES ==================== */
.ui.menu {
    background: var(--hl-bg-secondary) !important;
    border-color: var(--hl-border-secondary) !important;
}

.ui.menu .item {
    color: var(--hl-text-primary) !important;
}

.ui.menu .item:hover {
    color: var(--hl-accent-primary) !important;
}

.ui.menu .active.item {
    color: var(--hl-accent-primary) !important;
    background: rgba(1, 187, 255, 0.1) !important;
}

.ui.button {
    font-family: 'Penumbra Serif', sans-serif !important;
}

.ui.primary.button {
    background: var(--hl-accent-primary) !important;
}

.ui.primary.button:hover {
    background: var(--hl-accent-secondary) !important;
}

/* Forms */
.ui.form input,
.ui.form textarea,
.ui.form select {
    background: var(--hl-bg-tertiary) !important;
    border-color: var(--hl-border-secondary) !important;
    color: var(--hl-text-primary) !important;
}

.ui.form input:focus,
.ui.form textarea:focus {
    border-color: var(--hl-accent-primary) !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6,
.ui.header {
    font-family: 'Penumbra Serif', serif !important;
    color: var(--hl-text-heading) !important;
}

/* Links */
a {
    color: var(--hl-accent-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hl-navbar-hover);
}

/* ==================== NAMELESSMC WIDGET STYLING ==================== */
.ui.fluid.card#news-post {
    background: var(--hl-card-bg) !important;
    border: 1px solid var(--hl-card-border) !important;
}

/* Forum posts */
.forum_post {
    color: var(--hl-text-primary) !important;
}

/* ==================== MOBILE STYLES ==================== */
.hypelands-nav-mobile-account {
    display: none;
}

/* ==================== RESPONSIVE STYLES ==================== */
@media (max-width: 1200px) {
    .hypelands-navbar {
        padding: 8px 20px;
    }
    
    .hypelands-hamburger {
        display: flex;
        margin-left: auto;
    }
    
    .hypelands-nav-logo img {
        padding-left: 10px;
        height: 52px;
    }
    
    .hypelands-nav-auth {
        display: none;
    }
    
    .hypelands-nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 280px;
        max-width: 85vw;
        flex-direction: column;
        background-color: #0d0d0d;
        padding: 80px 0 20px 0;
        gap: 0;
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .hypelands-nav-links.active {
        right: 0;
    }
    
    .hypelands-nav-links li {
        width: 100%;
    }
    
    .hypelands-nav-links li a {
        padding: 15px 30px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        border-left: 3px solid transparent;
        transition: background-color 0.2s ease, border-left-color 0.2s ease, color 0.2s ease;
    }
    
    .hypelands-nav-links li a:hover,
    .hypelands-nav-links li a.active {
        background-color: rgba(1, 16, 255, 0.1);
        border-left-color: var(--hl-accent-secondary);
        text-shadow: none;
    }
    
    .hypelands-nav-mobile-account {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        background-color: #0d0d0d;
        transition: right 0.3s ease;
        z-index: 1000;
        padding: 0;
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .hypelands-nav-links.active ~ .hypelands-nav-mobile-account {
        right: 0;
        top: auto;
        bottom: 0;
        position: fixed;
    }
    
    .hypelands-nav-mobile-account a {
        display: block;
        padding: 15px 30px;
        color: white;
        text-decoration: none;
        font-family: 'Penumbra Serif', serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        border-left: 3px solid transparent;
        transition: background-color 0.2s ease, border-left-color 0.2s ease;
    }
    
    .hypelands-nav-mobile-account a:hover {
        background-color: rgba(1, 16, 255, 0.1);
        border-left-color: var(--hl-accent-secondary);
    }
    
    .hypelands-hero {
        height: 550px;
        min-height: 550px;
        padding: 80px 40px;
    }
    
    .hypelands-welcome-text {
        font-size: 32px;
    }
    
    .hypelands-hero-logo {
        max-width: 500px;
    }
    
    .hypelands-discord-cta {
        padding: 40px 30px;
    }
    
    .hypelands-discord-container {
        flex-direction: column;
        padding: 40px;
        gap: 30px;
        text-align: center;
    }
    
    .hypelands-discord-content {
        flex-direction: column;
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .hypelands-navbar {
        padding: 8px 15px;
    }
    
    .hypelands-nav-logo img {
        padding-left: 0;
        height: 48px;
    }
    
    .hypelands-hero {
        height: 450px;
        padding: 60px 30px;
        min-height: 450px;
    }
    
    .hypelands-welcome-text {
        font-size: 26px;
    }
    
    .hypelands-hero-logo {
        max-width: 350px;
    }
    
    .hypelands-discord-cta {
        padding: 30px 20px;
    }
    
    .hypelands-discord-container {
        padding: 30px 25px;
        gap: 25px;
    }
    
    .hypelands-discord-logo svg {
        width: 70px;
    }
    
    .hypelands-discord-text {
        font-size: 15px;
    }
    
    .hypelands-discord-btn {
        padding: 12px 35px;
        font-size: 11px;
    }
    
    .hypelands-footer {
        padding: 60px 30px 0;
    }
    
    .hypelands-footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hypelands-footer-bottom-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px 0;
    }
}

@media (max-width: 480px) {
    .hypelands-navbar {
        padding: 8px 10px;
    }
    
    .hypelands-nav-logo img {
        height: 42px;
    }
    
    .hypelands-hero {
        height: 450px;
        padding: 40px 20px;
        min-height: 450px;
    }
    
    .hypelands-welcome-text {
        font-size: 22px;
    }
    
    .hypelands-hero-logo {
        max-width: 280px;
    }
    
    .blue-bars {
        height: 3px;
    }
    
    .hypelands-discord-cta {
        padding: 25px 15px;
    }
    
    .hypelands-discord-container {
        padding: 25px 20px;
        gap: 20px;
    }
    
    .hypelands-discord-logo svg {
        width: 60px;
    }
    
    .hypelands-discord-text {
        font-size: 14px;
    }
    
    .hypelands-discord-btn {
        padding: 10px 30px;
        font-size: 10px;
    }
    
    .hypelands-footer {
        padding: 40px 20px 0;
    }
    
    .hypelands-footer-social {
        width: 36px;
        height: 36px;
    }
    
    .hypelands-footer-social svg {
        width: 18px;
        height: 18px;
    }
}

/* ==================== SETTINGS PAGE STYLES ==================== */
.hypelands-settings {
    font-family: 'Inter', sans-serif;
}

.hypelands-settings-nav {
    background: var(--hl-bg-secondary);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--hl-border-secondary);
}

.hypelands-settings-nav .nav-link {
    color: var(--hl-text-secondary);
    padding: 12px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.hypelands-settings-nav .nav-link:hover {
    background: rgba(1, 187, 255, 0.1);
    color: var(--hl-accent-primary);
}

.hypelands-settings-nav .nav-link.active {
    background: var(--hl-btn-gradient);
    color: var(--hl-text-heading);
}

.hypelands-settings-card {
    background: var(--hl-bg-tertiary);
    border: 1px solid var(--hl-border-secondary);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.hypelands-settings-card h3 {
    font-family: 'Penumbra Serif', serif;
    color: var(--hl-text-heading);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--hl-border-secondary);
}

.hypelands-settings-group {
    margin-bottom: 20px;
}

.hypelands-settings-group label {
    display: block;
    color: var(--hl-text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.hypelands-settings-group .input-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.hypelands-settings-group input[type="text"],
.hypelands-settings-group input[type="url"],
.hypelands-settings-group input[type="number"],
.hypelands-settings-group textarea,
.hypelands-settings-group select {
    background: var(--hl-bg-primary);
    border: 1px solid var(--hl-border-secondary);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--hl-text-primary);
    width: 100%;
    transition: border-color 0.2s ease;
}

.hypelands-settings-group input:focus,
.hypelands-settings-group textarea:focus,
.hypelands-settings-group select:focus {
    border-color: var(--hl-accent-primary);
    outline: none;
}

.hypelands-settings-group input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.hypelands-reset-btn {
    background: transparent;
    border: 1px solid var(--hl-border-secondary);
    color: var(--hl-text-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.hypelands-reset-btn:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff4444;
    color: #ff4444;
}

.hypelands-save-btn {
    background: var(--hl-accent-primary);
    color: var(--hl-text-heading);
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-family: 'Penumbra Serif', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hypelands-save-btn:hover {
    background: var(--hl-accent-secondary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--hl-shadow-glow);
}

/* Color picker styling */
.color-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-input-group input[type="color"] {
    flex-shrink: 0;
}

.color-input-group input[type="text"] {
    flex: 1;
}

/* ==================== FIX DARK TEXT ON DARK BACKGROUND ==================== */
/* All text should be light colored */
body,
p,
span,
div,
label,
td,
th,
li {
    color: var(--hl-text-primary);
}

/* Headers always white */
h1, h2, h3, h4, h5, h6,
.ui.header,
.header {
    color: var(--hl-text-heading) !important;
}

/* Fix segment headers */
.ui.segment .header,
.ui.card > .content > .header,
.ui.message .header {
    color: var(--hl-text-heading) !important;
}

/* Fix meta text */
.ui.card .meta,
.ui.card .description,
.meta,
.description {
    color: var(--hl-text-secondary) !important;
}

/* Fix breadcrumb */
.ui.breadcrumb,
.ui.breadcrumb a,
.ui.breadcrumb .section {
    color: var(--hl-text-secondary) !important;
}

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

/* ==================== RANK/GROUP BADGES ==================== */
.badge,
.label,
.ui.label,
.ui.labels .label,
.group-badge,
.rank-badge,
[class*="group-"],
[class*="rank-"] {
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ui.label {
    background: var(--hl-btn-gradient) !important;
    color: var(--hl-text-primary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
}

/* Admin badge */
.ui.label.admin,
.label[style*="background-color: rgb(170, 0, 0)"],
.label[style*="background-color:#aa0000"],
[class*="admin"] .label {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Moderator badge */
.ui.label.moderator,
.ui.label.mod {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #ffffff !important;
    border: 1px solid rgba(5, 150, 105, 0.5) !important;
}

/* Member badge */
.ui.label.member {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

/* ==================== ACCOUNT DROPDOWN FIX ==================== */
.hypelands-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    background: linear-gradient(345deg, #090915 0%, #14213a 50%, #1a2a4a 100%) !important;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 1001;
    border-radius: 7px;
    border: 1px solid rgba(192, 214, 233, 0.15) !important;
    overflow: hidden;
}

.hypelands-dropdown-content a,
.hypelands-dropdown-content .dropdown-item {
    color: #c0d6e9 !important;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Penumbra Serif', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border-left: none;
    background: transparent;
}

.hypelands-dropdown-content a:hover,
.hypelands-dropdown-content .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-left-color: transparent;
}

.hypelands-dropdown-content a i,
.hypelands-dropdown-content .dropdown-item i {
    color: #c0d6e9;
    width: 18px;
}

.hypelands-dropdown-divider {
    height: 1px;
    background: rgba(192, 214, 233, 0.1);
    margin: 5px 0;
}

/* Dropdown animations */
.hypelands-dropdown-content a {
    opacity: 0;
    transform: translateX(-10px);
    animation: itemFadeIn 0.3s ease forwards;
}

.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(1) { animation-delay: 0.05s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(2) { animation-delay: 0.1s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(3) { animation-delay: 0.15s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(4) { animation-delay: 0.2s; }
.hypelands-dropdown:hover .hypelands-dropdown-content a:nth-child(5) { animation-delay: 0.25s; }

@keyframes itemFadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==================== LOGIN/REGISTER PAGE STYLING ==================== */
.ui.form .field > label {
    color: var(--hl-text-primary) !important;
    font-weight: 500;
    margin-bottom: 8px;
}

.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.form select,
.ui.input > input,
.ui.selection.dropdown {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(192, 214, 233, 0.2) !important;
    border-radius: 6px !important;
    color: var(--hl-text-primary) !important;
    padding: 12px 16px !important;
    transition: all 0.2s ease !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input > input:focus,
.ui.selection.dropdown:focus {
    border-color: var(--hl-accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(1, 187, 255, 0.2) !important;
    background: rgba(20, 20, 20, 1) !important;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder {
    color: var(--hl-text-secondary) !important;
    opacity: 0.7;
}

/* Fix checkbox text */
.ui.checkbox label,
.ui.checkbox + label {
    color: var(--hl-text-primary) !important;
}

/* ==================== BUTTON FIXES - Better Readability ==================== */
.ui.button {
    background: var(--hl-btn-gradient) !important;
    color: #c0d6e9 !important;
    border: none !important;
    font-family: 'Penumbra Serif', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

.ui.button:hover {
    color: #ffffff !important;
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.ui.primary.button,
.ui.positive.button,
.ui.green.button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
}

.ui.primary.button:hover,
.ui.positive.button:hover,
.ui.green.button:hover {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    filter: brightness(1.15);
}

.ui.negative.button,
.ui.red.button {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
}

.ui.negative.button:hover,
.ui.red.button:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    filter: brightness(1.15);
}

.ui.secondary.button {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--hl-text-primary) !important;
    border: 1px solid rgba(192, 214, 233, 0.2) !important;
}

/* ==================== COOKIE POPUP STYLING ==================== */
.cc-window,
.cookie-consent,
.cookie-banner,
[class*="cookie"],
.ui.message.cookie {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%) !important;
    border: 1px solid rgba(1, 187, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 20px 25px !important;
}

/* Remove max-width for better cookie popup look */
.cc-window.cc-floating {
    max-width: none !important;
    width: auto !important;
}

/* Cookie message "More Info" link */
.cc-link,
.cc-window a,
.cc-message a {
    color: #c0d6e9 !important;
    text-decoration: underline !important;
}

.cc-link:hover,
.cc-window a:hover,
.cc-message a:hover {
    color: #ffffff !important;
}

.cc-message,
.cookie-consent p,
.cookie-banner p {
    color: var(--hl-text-primary) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.cc-btn,
.cc-allow,
.cc-deny,
.cookie-consent button,
.cookie-banner button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-family: 'Penumbra Serif', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.cc-btn:hover,
.cookie-consent button:hover,
.cookie-banner button:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-1px) !important;
}

/* NamelessMC specific cookie consent */
#cookie-consent-bar {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%) !important;
    border-top: 1px solid rgba(1, 187, 255, 0.2) !important;
    padding: 15px 30px !important;
}

#cookie-consent-bar p {
    color: var(--hl-text-primary) !important;
    margin: 0 !important;
}

#cookie-consent-bar .btn,
#cookie-consent-bar button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    margin-left: 15px !important;
}

/* ==================== MODAL FIXES ==================== */
.ui.modal {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    border-radius: 12px !important;
}

.ui.modal > .header {
    background: var(--hl-bg-secondary) !important;
    color: var(--hl-text-heading) !important;
    border-bottom: 1px solid var(--hl-border-secondary) !important;
}

.ui.modal > .content {
    background: var(--hl-bg-tertiary) !important;
    color: var(--hl-text-primary) !important;
}

.ui.modal > .actions {
    background: var(--hl-bg-secondary) !important;
    border-top: 1px solid var(--hl-border-secondary) !important;
}

/* ==================== TABLE FIXES ==================== */
.ui.table {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    color: var(--hl-text-primary) !important;
}

.ui.table thead th {
    background: var(--hl-bg-secondary) !important;
    color: var(--hl-text-heading) !important;
    border-color: var(--hl-border-secondary) !important;
}

.ui.table tbody tr {
    border-color: var(--hl-border-secondary) !important;
}

.ui.table tbody tr:hover {
    background: rgba(1, 187, 255, 0.05) !important;
}

/* ==================== PAGINATION FIXES ==================== */
.ui.pagination.menu {
    background: var(--hl-bg-secondary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
}

.ui.pagination.menu .item {
    color: var(--hl-text-primary) !important;
    border-color: var(--hl-border-secondary) !important;
}

.ui.pagination.menu .active.item {
    background: var(--hl-accent-primary) !important;
    color: #ffffff !important;
}

/* ==================== DROPDOWN MENU FIXES ==================== */
.ui.dropdown .menu {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
}

.ui.dropdown .menu > .item {
    color: var(--hl-text-primary) !important;
    border-color: var(--hl-border-secondary) !important;
}

.ui.dropdown .menu > .item:hover {
    background: rgba(1, 187, 255, 0.1) !important;
    color: var(--hl-accent-primary) !important;
}

/* ==================== PROFILE PAGE FIXES ==================== */
.profile-header,
.user-profile {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    border-radius: 12px !important;
}

/* ==================== FORUM FIXES ==================== */
.forum-post,
.topic-post {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    color: var(--hl-text-primary) !important;
}

.forum-post .author,
.topic-post .author {
    color: var(--hl-text-secondary) !important;
}

/* ==================== ALERT/MESSAGE BOXES ==================== */
.ui.message {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    color: var(--hl-text-primary) !important;
}

.ui.success.message {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

.ui.error.message,
.ui.negative.message {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.ui.warning.message {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

.ui.info.message {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

/* ==================== USER POPOVER / PROFILE CARD ==================== */
.ui.popup {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    color: var(--hl-text-primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.ui.popup::before {
    background: var(--hl-bg-tertiary) !important;
    border-color: var(--hl-border-secondary) !important;
}

.ui.popup .header {
    color: var(--hl-text-heading) !important;
}

/* User popover specific */
.user-popover,
[data-poload] + .ui.popup {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%) !important;
    border: 1px solid rgba(1, 187, 255, 0.2) !important;
}

/* ==================== INLINE STYLE LABEL OVERRIDES ==================== */
/* Force light text on all labels regardless of inline styles */
.ui.label,
.label,
a.ui.label {
    color: #ffffff !important;
}

/* Specific rank colors based on common patterns */
.ui.label[style*="background"],
.label[style*="background"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ==================== NAMELESSMC SPECIFIC OVERRIDES ==================== */
/* Staff application styles */
.staff-application {
    background: var(--hl-bg-tertiary) !important;
    color: var(--hl-text-primary) !important;
}

/* Avatar styling */
.ui.avatar.image,
.avatar {
    border: 2px solid var(--hl-accent-primary) !important;
    border-radius: 50% !important;
}

/* Username links */
a[data-poload] {
    transition: color 0.2s ease !important;
}

a[data-poload]:hover {
    color: var(--hl-accent-primary) !important;
}

/* ==================== FORUM POST STYLING ==================== */
.forum_post,
.topic-content,
.post-content {
    background: var(--hl-bg-tertiary) !important;
    color: var(--hl-text-primary) !important;
}

.forum_post a,
.topic-content a,
.post-content a {
    color: var(--hl-accent-primary) !important;
}

/* Quote blocks */
blockquote,
.ui.segment.quote {
    background: rgba(0, 0, 0, 0.3) !important;
    border-left: 3px solid var(--hl-accent-primary) !important;
    color: var(--hl-text-secondary) !important;
    padding: 15px 20px !important;
    margin: 15px 0 !important;
}

/* Code blocks */
pre,
code {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--hl-accent-primary) !important;
    border: 1px solid var(--hl-border-secondary) !important;
    border-radius: 4px !important;
}

pre {
    padding: 15px !important;
    overflow-x: auto !important;
}

code {
    padding: 2px 6px !important;
}

/* ==================== EXTRA WIDGET STYLING ==================== */
.widget,
[class*="widget"] {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-card-border) !important;
    border-radius: 8px !important;
    color: var(--hl-text-primary) !important;
}

.widget .header,
[class*="widget"] .header {
    color: var(--hl-text-heading) !important;
}

/* ==================== LEADERBOARDS ==================== */
.leaderboard,
.leaderboards {
    background: var(--hl-bg-tertiary) !important;
    color: var(--hl-text-primary) !important;
}

.leaderboard .rank-1,
.leaderboards .rank-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #000000 !important;
}

.leaderboard .rank-2,
.leaderboards .rank-2 {
    background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
    color: #ffffff !important;
}

.leaderboard .rank-3,
.leaderboards .rank-3 {
    background: linear-gradient(135deg, #cd7f32, #b45309) !important;
    color: #ffffff !important;
}

/* ==================== STAFF LIST ==================== */
.staff-list,
.staff-card {
    background: var(--hl-bg-tertiary) !important;
    border: 1px solid var(--hl-card-border) !important;
    color: var(--hl-text-primary) !important;
}

.staff-card .name {
    color: var(--hl-text-heading) !important;
}

/* ==================== SIDEBAR & COLUMN OVERRIDES ==================== */
.ui.grid > .column:not(.row),
.ui.grid > .row > .column,
.ui.column.grid > .column:not(.row),
.ui[class*="sixteen wide"].column,
.ui[class*="four wide"].column,
.ui[class*="twelve wide"].column,
.ui[class*="eight wide"].column,
.four.wide.column,
.twelve.wide.column,
.sixteen.wide.column,
.column {
    background: transparent !important;
}

/* Sidebar segments specifically */
.ui.grid > .four.wide.column .ui.segment,
.ui.grid > .column .ui.segment.widget,
.sidebar .ui.segment,
.right.column .ui.segment,
.left.column .ui.segment,
aside .ui.segment {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

/* Online Staff widget */
.ui.segment.widget[id*="staff"],
.ui.segment[class*="staff"],
#online-staff,
#staff-widget {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* Online Users widget */
.ui.segment.widget[id*="user"],
.ui.segment[class*="user"],
#online-users,
#users-widget {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* Statistics widget */
.ui.segment.widget[id*="stat"],
.ui.segment[class*="stat"],
#statistics,
#stats-widget {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* ==================== LOADING STATES ==================== */
.ui.loading.segment,
.ui.loading.segment::before,
.ui.loading.segment::after {
    background: #141414 !important;
}

.ui.segment.loading,
.segment.loading {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* Loading text */
.ui.active.dimmer .content,
.ui.dimmer .content,
.dimmer .content,
.loading {
    color: #c0d6e9 !important;
}

/* Loader/Spinner */
.ui.loader,
.ui.loader:before,
.ui.loader:after {
    color: #c0d6e9 !important;
}

.ui.dimmer > .content > .ui.loader,
.ui.active.dimmer .ui.loader {
    color: #c0d6e9 !important;
}

/* ==================== FORUM FIXES ==================== */
/* Forum topic labels */
.ui.label.small,
.ui.label.tiny,
.ui.tiny.label,
.ui.small.label {
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    color: #c0d6e9 !important;
}

/* Author info on forum posts */
.author-info,
.post-author,
.user-info {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

.author-info .role,
.post-author .role,
.user-info .role,
.author-info span,
.post-author span {
    color: #c0d6e9 !important;
}

/* Post metadata */
.post-meta,
.topic-meta,
.meta-info {
    color: #8a9fb3 !important;
}

/* ==================== DROPDOWN FIXES ==================== */
.hypelands-dropdown-content .ui.segment,
.hypelands-dropdown-content .ui.loading {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Alerts/Messages dropdown loading */
#list-alerts,
#list-messages {
    background: #141414 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

#list-alerts .ui.segment,
#list-messages .ui.segment,
#list-alerts .loading,
#list-messages .loading {
    background: transparent !important;
    color: #c0d6e9 !important;
}

/* ==================== PROFILE PAGE FIXES ==================== */
.profile-container,
.profile-content,
.profile-header {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* Profile stats */
.profile-stats,
.user-stats {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #c0d6e9 !important;
}

/* ==================== USER POPOVERS ==================== */
.user-popover,
[class*="popover"] {
    background: #141414 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
    color: #c0d6e9 !important;
}

/* ==================== TEXT EDITOR FIXES ==================== */
iframe body,
.mce-content-body,
.tox-edit-area iframe,
.cke_wysiwyg_frame {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

/* Editor container backgrounds */
.tox-tinymce,
.tox .tox-edit-area,
.tox .tox-statusbar,
.cke_chrome,
.cke_inner,
.cke_reset,
.cke_contents {
    background: #141414 !important;
    background-color: #141414 !important;
}

/* ==================== LIST ITEMS ==================== */
.ui.list > .item,
.ui.relaxed.list > .item,
.ui.divided.list > .item,
.ui.selection.list > .item {
    background: transparent !important;
    color: #c0d6e9 !important;
}

/* User list items */
.ui.list > .item .header,
.ui.list > .item > .content > .header {
    color: #ffffff !important;
}

.ui.list > .item .description,
.ui.list > .item > .content > .description {
    color: #8a9fb3 !important;
}

/* ==================== FINAL OVERRIDES ==================== */
/* Make sure ALL text is readable */
* {
    color: inherit;
}

/* Reset any problematic black text */
.black,
.text-black {
    color: var(--hl-text-primary) !important;
}

/* Nuclear option for any remaining white backgrounds */
html body .ui.segment:not(.inverted),
html body div.ui.segment,
html body section.ui.segment {
    background: #141414 !important;
    background-color: #141414 !important;
}

/* Force all nested elements */
.ui.segment *:not(i):not(svg):not(path) {
    color: inherit;
}

.ui.segment .header,
.ui.segment h1,
.ui.segment h2,
.ui.segment h3,
.ui.segment h4,
.ui.segment h5 {
    color: #ffffff !important;
}

/* Override any inline styles for backgrounds */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: white"],
[style*="background-color: #ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background: white"],
[style*="background: #ffffff"],
[style*="background: #fff"] {
    background: #141414 !important;
    background-color: #141414 !important;
}

/* Override any inline styles for text color */
[style*="color: rgb(0, 0, 0)"],
[style*="color: black"],
[style*="color: #000000"],
[style*="color: #000"] {
    color: #c0d6e9 !important;
}

/* ==================== GROUP/RANK BADGES ==================== */
/* Group labels/badges - styled as actual badges */
.ui.label.small[style],
.ui.label[style*="background"],
.ui.tiny.label[style],
span.badge,
.badge,
.group-badge,
.rank-badge,
.user-groups .ui.label,
.groups .ui.label {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-family: 'Penumbra Serif', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 2px 4px 2px 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* If label has inline background color, force white text */
.ui.label[style*="background-color"],
.ui.label[style*="background:"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Default group badge styling if no inline color */
.ui.label:not([style*="background"]) {
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    color: #c0d6e9 !important;
}

/* Staff page group badges */
#online-staff .ui.label,
.staff-widget .ui.label,
[class*="staff"] .ui.label {
    padding: 4px 10px !important;
    font-size: 9px !important;
}

/* ==================== NOTIFICATION BADGE ==================== */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    box-sizing: border-box;
}

/* ==================== COOKIES PAGE STYLING ==================== */
#cookies {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

#cookies .ui.blue.button {
    background: var(--hl-accent-primary) !important;
    color: #ffffff !important;
}