:root {
    /* Color Palette entirely stolen from the dark vibe of 50570.jpg */
    --bg-black: #050505;
    --panel-black: #0a0a0a;
    --inner-box: #120203;
    
    --vamp-red-dark: #3a0003;
    --vamp-red-bright: #8a0007;
    --border-red: #5e0005;
    
    --text-main: #ffffff;
    --text-muted: #b0b0b0;
    --text-accent: #ff3b46;

    /* Added a global rounding variable for consistency */
    --radius-main: 8px;
    --radius-small: 4px;
}

body {
    margin: 0;
    padding: 10px; /* Reduced padding slightly so it looks better on tiny screens */
    background-color: var(--bg-black);
    color: var(--text-main);
    font-family: 'Courier New', Courier, monospace; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Ensure all elements calculate width properly */
*, *:before, *:after {
    box-sizing: inherit;
}

/* The outer bordered box enclosing the layout */
.site-frame {
    width: 100%;
    max-width: 1000px;
    background-color: var(--panel-black);
    /* Changed to double border for a cleaner cyber-ui aesthetic */
    border: 4px double var(--border-red); 
    border-radius: var(--radius-main);
    box-shadow: 0 0 20px rgba(138, 0, 7, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Keeps the headers/footers clipped to the rounded corners */
}

/* Header styled with the deep red gradients */
.site-header {
    background: linear-gradient(to bottom, var(--vamp-red-bright), var(--vamp-red-dark));
    border-bottom: 3px solid var(--border-red);
    padding: 15px;
    text-align: center;
}

.header-title {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 10px;
    color: var(--text-main);
}

.top-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.nav-btn {
    background: #000;
    color: var(--text-main);
    padding: 5px 15px;
    text-decoration: none;
    border: 1px solid var(--border-red);
    border-radius: var(--radius-small);
    font-size: 14px;
    font-weight: bold;
}

.nav-btn:hover {
    background: var(--vamp-red-bright);
    color: #fff;
}

/* 3-Column Layout structure */
.main-layout {
    display: flex;
    padding: 15px;
    gap: 15px;
    background-color: var(--panel-black);
}

.sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-red);
    border-radius: var(--radius-small);
    overflow: hidden;
}

.center-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-red);
    border-radius: var(--radius-small);
    overflow: hidden;
}

/* Panel Header styling using the dark media player red */
.panel-header {
    background: linear-gradient(to right, var(--vamp-red-dark), var(--panel-black));
    padding: 8px;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid var(--border-red);
    color: var(--text-accent);
}

.panel-content {
    padding: 12px;
    background-color: #000;
    height: 100%;
    font-size: 14px;
    line-height: 1.4;
}

/* Sidebar Link Lists */
.side-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-links li {
    margin-bottom: 8px;
}

.side-links a {
    color: var(--text-main);
    text-decoration: none;
}

.side-links a:hover {
    color: var(--text-accent);
    text-decoration: underline;
}

/* Inner Text Box for updates or logs */
.inner-textbox {
    margin-top: 15px;
    background-color: var(--inner-box);
    border: 1px dashed var(--text-accent);
    border-radius: var(--radius-small);
    padding: 10px;
    color: var(--text-muted);
}

.bold {
    font-weight: bold;
    color: var(--text-accent);
}

/* Stats Styling */
.stat-title {
    font-weight: bold;
    color: var(--text-accent);
    margin: 10px 0 2px 0;
}

.stat-val {
    margin: 0 0 10px 0;
    color: var(--text-main);
}

/* Footer Section */
.footer {
    background-color: #000;
    border-top: 2px solid var(--border-red);
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}





/* ==========================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================== */
@media (max-width: 768px) {
    body {
        padding: 5px;
        align-items: flex-start; /* Prevents layout from being awkwardly cut off vertically */
    }

    .main-layout {
        flex-direction: column; /* Stacks sidebars vertically instead of side-by-side */
        padding: 10px;
        gap: 10px;
    }

    /* Reorders content slightly so the main content stays at the top on mobile, 
       while sidebars stack underneath it */
    .center-content {
        order: 1;
    }
    
    .left-sidebar {
        order: 2;
    }

    .right-sidebar {
        order: 3;
    }
}