/* ===== ROMEDIA 2005 STYLE CSS ===== */
:root {
    --bg-main: #111821;
    --widget-bg: #0b1016;
    --header-blue: #0050a0;
    --accent-blue: #00A0FF;
    --border-color: #1a2330;
    --font-stack: 'Tahoma', 'Arial', sans-serif;
}

body {
    background-color: var(--bg-main);
    color: white;
    font-family: var(--font-stack);
    font-size: 11px;
    margin: 0;
}

/* --- FULL WIDTH CONTAINERS --- */

.hero-banner {
    width: calc(100% - 20px);
    max-width: none;
    height: 130px;
    margin: 0 10px 15px 10px;
    
    display: grid;
    grid-template-columns: 280px 1fr 220px; 
    align-items: center;
    gap: 15px;
    
    background: #06101f;
    border: 3px solid #c4c4c4;
    border-radius: 13px;
    padding: 0 10px;
    box-sizing: border-box;
}
.navbar {
    width: calc(100% - 20px);
    max-width: none;
    margin: 0 10px 15px 10px;
    background: linear-gradient(to bottom, #06101f 0%, #0b2347 15%, #114b9c 50%, #0b2c5d 75%, #030a14 100%);
    border: 1px solid #173f78;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
    overflow: hidden;
}

.main-grid {
    display: grid;
    grid-template-columns: 240px 1fr 280px; 
    gap: 15px;
    width: calc(100% - 20px);
    max-width: none;
    margin: 0 10px;
    padding: 0;
}

/* --- COMPONENTS --- */

.logo-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-box img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    width: 300px;
}

.visualizer-bg {
    /* 1. Increase height slightly so it doesn't look squashed */
    height: 30px; 
    width: 100%;
    border: 1px solid #1a4a80;
    
    /* 2. Set the image */
    background-image: url('../media/hq.png');
    background-repeat: no-repeat;
    background-position: center;
    
    /* 3. THIS IS THE FIX: 
       'auto' = keep the bar width natural
       '100%' = stretch the height to fill the container without distorting the bars */
    background-size: auto 100%;
}

.status-box {
    text-align: right;
    font-family: Tahoma, Arial, sans-serif;
    color: #fff;
    font-size: 11px;
}

.status-online {
    color: #4cd964;
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
}

.top-bar {
    width: 100%;
    background: #030a14;
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #888;
    border-bottom: 1px solid #101d2e;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.auth-links a { color: #cccccc; text-decoration: none; padding: 0 5px; }
.auth-links a:hover { color: #ffffff; text-decoration: underline; }
.welcome-text { color: #ffffff; }
.welcome-text .brand { color: #ffd34d; font-weight: bold; }

.widget { border: 1px solid var(--border-color); margin-bottom: 10px; background-color: var(--widget-bg); }
.widget-header { background: linear-gradient(to bottom, #0050a0, #002040); color: white; padding: 5px 10px; font-weight: bold; border-bottom: 1px solid var(--accent-blue); }
.widget-content { padding: 10px; }

.navbar ul { display: flex; list-style: none; margin: 0; padding: 0; width: 100%; }
.navbar li { flex: 1; position: relative; border-right: 1px solid #04101f; border-left: 1px solid #2d6fc4; }
.navbar li:first-child { border-left: none; }
.navbar li:last-child { border-right: none; }
.navbar li a {
    height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #f2f2f2; text-decoration: none; font-family: Tahoma, Arial, sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase;
    background: linear-gradient(to bottom, #173f78 0%, #1357b2 45%, #0b3d80 55%, #072247 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.7);
    transition: all 0.2s ease;
}
.navbar li a:hover { background: linear-gradient(to bottom, #2258a3 0%, #1f6bdd 45%, #1450a7 55%, #0b2e63 100%); color: #ffd34d; text-shadow: 0 0 4px rgba(255,255,255,0.6); }
.navbar img { width: 18px; height: 18px; }