/* Global CSS Variables */
/* Background: #0A0A0A
Panels: #282828
Borders: #484745
Text: #E5E3E4
Accent: #B9B1B2
Brand: #008C8D
Highlight: #F0E6A0 */
:root {
    --bg-primary: #0A0A0A;
    --bg-secondary: #282828;
    --bg-panel: #282828;
    --bg-card: #282828;
    --bg-form: #282828;
    --bg-input: #282828;

    --accent-primary: #B9B1B2;
    --accent-secondary: #F0E6A0;
    --brand-color: #008C8D;

    --text-primary: #E5E3E4;
    --text-secondary: #B9B1B2;
    --text-muted: #F0E6A0;

    --border-primary: #484745;
    --border-secondary: #484745;
    --border-input: #484745;

    --status-online: #00cc00;
    --status-recent: #ffaa00;
    --status-offline: #F0E6A0;
    --status-danger: #ff4444;
    --status-success: #008C8D;

    --shadow-default: 0 2px 10px rgba(0,0,0,0.5);
    --blur-backdrop: blur(10px);

    --border-radius: 4px;
    --border-radius-sm: 3px;
    --border-radius-lg: 6px;

    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 15px;
    --spacing-xxl: 20px;
}

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

/* Body and Typography */
html, body {
    font-family: Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overscroll-behavior-y: auto;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Grid Systems */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: 40px;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .header-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-buttons {
        flex-direction: column;
        width: 100%;
    }
}