/* POrigins Color Palette */
    :root {
        --po-black: #000000;
        --po-drab-dark-brown: #433602;
        --po-satin-sheen-gold: #C5A100;
        --po-white: #FFFFFF;
        
        /* Derived colors for better contrast and usability */
        --po-gold-light: #E6C547;
        --po-gold-dark: #8B7600;
        --po-brown-light: #5A4703;
        --po-gray-light: #F8F9FA;
        --po-gray-medium: #6C757D;
        
        /* Alert and Status Colors - High Contrast */
        --po-success: #198754;      /* Green for success */
        --po-success-light: #D1E7DD;
        --po-success-dark: #146C43;
        
        --po-warning: #FD7E14;      /* Orange for warnings */
        --po-warning-light: #FFF3CD;
        --po-warning-dark: #E55D0E;
        
        --po-danger: #DC3545;       /* Red for errors/danger */
        --po-danger-light: #F8D7DA;
        --po-danger-dark: #B02A37;
        
        --po-info: #0DCAF0;         /* Cyan for information */
        --po-info-light: #D1ECF1;
        --po-info-dark: #0A9FB8;
        
        /* Gradients */
        --po-gradient-primary: linear-gradient(135deg, var(--po-satin-sheen-gold) 0%, var(--po-gold-dark) 100%);
        --po-gradient-secondary: linear-gradient(135deg, var(--po-drab-dark-brown) 0%, var(--po-brown-light) 100%);
        --po-gradient-accent: linear-gradient(45deg, var(--po-gold-light) 0%, var(--po-satin-sheen-gold) 100%);
        --po-gradient-featured: linear-gradient(135deg, var(--po-satin-sheen-gold) 0%, #DAA520 50%, var(--po-gold-dark) 100%);
        --po-gradient-changelog: linear-gradient(135deg, var(--po-drab-dark-brown) 0%, #6B5404 50%, var(--po-brown-light) 100%);
    }

    /* Override Bootstrap primary colors */
    .btn-primary {
        background: var(--po-gradient-primary);
        border-color: var(--po-satin-sheen-gold);
        color: var(--po-white);
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(197, 161, 0, 0.3);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: var(--po-gradient-accent);
        border-color: var(--po-gold-light);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(197, 161, 0, 0.4);
    }

    .btn-outline-primary {
        border-color: var(--po-satin-sheen-gold);
        color: var(--po-satin-sheen-gold);
        font-weight: 600;
    }

    .btn-outline-primary:hover {
        background-color: var(--po-satin-sheen-gold);
        border-color: var(--po-satin-sheen-gold);
        color: var(--po-white);
    }

    /* Alert and Status Styles */
    .alert-success {
        background-color: var(--po-success-light);
        border-color: var(--po-success);
        color: var(--po-success-dark);
    }

    .alert-warning {
        background-color: var(--po-warning-light);
        border-color: var(--po-warning);
        color: var(--po-warning-dark);
    }

    .alert-danger {
        background-color: var(--po-danger-light);
        border-color: var(--po-danger);
        color: var(--po-danger-dark);
    }

    .alert-info {
        background-color: var(--po-info-light);
        border-color: var(--po-info);
        color: var(--po-info-dark);
    }

    /* Status colors override */
    .text-success {
        color: var(--po-success) !important;
    }

    .text-warning {
        color: var(--po-warning) !important;
    }

    .text-danger {
        color: var(--po-danger) !important;
    }

    .text-info {
        color: var(--po-info) !important;
    }

    .bg-success {
        background-color: var(--po-success) !important;
    }

    .bg-warning {
        background-color: var(--po-warning) !important;
    }

    .bg-danger {
        background-color: var(--po-danger) !important;
    }

    .bg-info {
        background-color: var(--po-info) !important;
    }

    /* Badge improvements */
    .badge.bg-success {
        background-color: var(--po-success) !important;
        color: var(--po-white);
    }

    .badge.bg-warning {
        background-color: var(--po-warning) !important;
        color: var(--po-white);
    }

    .badge.bg-danger {
        background-color: var(--po-danger) !important;
        color: var(--po-white);
    }

    .badge.bg-info {
        background-color: var(--po-info) !important;
        color: var(--po-white);
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, var(--po-drab-dark-brown) 0%, var(--po-brown-light) 100%);
        color: var(--po-white);
    }

    .hero-section h1 {
        color: var(--po-gold-light);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero-section .lead {
        color: var(--po-gray-light);
    }

    /* Server Status Cards */
    .server-status-card {
        border: 1px solid rgba(197, 161, 0, 0.2);
        transition: all 0.3s ease;
        background: var(--po-white);
    }

    .server-status-card:hover {
        border-color: var(--po-satin-sheen-gold);
        box-shadow: 0 8px 25px rgba(197, 161, 0, 0.15);
        transform: translateY(-5px);
    }

    .server-status-card .status-badge {
        background: var(--po-gradient-primary) !important;
    }

    /* News Cards */
    .news-card {
        border: 1px solid rgba(67, 54, 2, 0.1);
        transition: all 0.3s ease;
        background: var(--po-white);
    }

    .news-card:hover {
        border-color: var(--po-satin-sheen-gold);
        box-shadow: 0 10px 30px rgba(197, 161, 0, 0.15);
        transform: translateY(-5px);
    }

    .news-card .card-title {
        color: var(--po-drab-dark-brown);
    }

    .news-card .badge {
        background: var(--po-gradient-primary) !important;
        color: var(--po-white);
    }

    /* Featured Server Card */
    .featured-server-card {
        border: 2px solid var(--po-satin-sheen-gold);
        box-shadow: 0 8px 25px rgba(197, 161, 0, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        background: var(--po-white);
    }

    .featured-server-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(197, 161, 0, 0.3);
    }

    .featured-server-card .card-header {
        background: var(--po-gradient-featured);
        color: var(--po-white);
        border-bottom: none;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .featured-server-card .badge {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: var(--po-white);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 600;
    }

    /* Changelog Card */
    .changelog-card {
        border: 1px solid rgba(67, 54, 2, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        background: var(--po-white);
    }

    .changelog-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(67, 54, 2, 0.15);
    }

    .changelog-card .card-header {
        background: var(--po-gradient-changelog);
        color: var(--po-white);
        border-bottom: none;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .changelog-card .card-header .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--po-white);
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        font-weight: 600;
        text-shadow: none;
    }

    .changelog-card .card-header .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: var(--po-white);
        color: var(--po-white);
    }

    .changelog-item {
        border-left: 3px solid var(--po-satin-sheen-gold);
        padding-left: 1rem;
    }

    /* Text Colors */
    .text-primary {
        color: var(--po-satin-sheen-gold) !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--po-drab-dark-brown);
    }

    /* Navigation improvements */
    .navbar-brand {
        color: var(--po-satin-sheen-gold) !important;
        font-weight: 700;
    }

    .navbar-brand:hover {
        color: var(--po-gold-light) !important;
    }

    /* Auto-refresh indicator */
    .auto-refresh-indicator {
        animation: pulse 2s infinite;
        color: var(--po-info) !important;
    }

    /* Background sections */
    .bg-light {
        background: linear-gradient(135deg, var(--po-gray-light) 0%, #FAFBFC 100%) !important;
    }

    /* Utility classes */
    .border-gold {
        border-color: var(--po-satin-sheen-gold) !important;
    }

    .bg-gold {
        background-color: var(--po-satin-sheen-gold) !important;
        color: var(--po-white) !important;
    }

    .text-gold {
        color: var(--po-satin-sheen-gold) !important;
    }
    
    /* Shadow for text on banner image */
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .hero-section {
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="stars" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.3)"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>');
        opacity: 0.1;
    }

    .server-status-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .server-status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    .news-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .news-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    .stat-item {
        padding: 1rem 0;
    }

    .changelog-item {
        border-left: 3px solid var(--bs-primary);
        padding-left: 1rem;
    }

    .changelog-card {
        border: 1px solid var(--bs-border-color);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .changelog-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .changelog-card .card-header {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-bottom: none;
    }

    .changelog-card .card-header .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.3);
        color: white;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .changelog-card .card-header .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: white;
        color: white;
    }

    .featured-server-card {
        border: 2px solid var(--primary-color);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .featured-server-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(59, 130, 246, 0.25);
    }

    .featured-server-card .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-bottom: none;
    }

    .auto-refresh-indicator {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }