/* --- Global Reset & Box Model --- */
* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-image: url('/assets/bg.png');
    background-size: cover;
    background-attachment: fixed;
    display: flex; flex-direction: column;
}

/* --- Header and Footer: Locked --- */
#main-header { 
    width: 100%; height: 200px; 
    background: url('/assets/header.png') no-repeat center; 
    background-size: contain; flex-shrink: 0; 
}
#main-footer { 
    width: 100%; height: 80px; 
    background: url('/assets/footer.png') no-repeat center; 
    background-size: contain; flex-shrink: 0; 
}

/* --- Grid System --- */
.grid-container {
    flex: 1; display: flex; flex-direction: column; width: 100%; overflow: hidden;
}

#divider-bar {
    width: 100%; height: 40px; 
    background: url('/assets/divider.png') repeat-x center; 
    background-size: contain; flex-shrink: 0;
}

/* --- Row Layout Enforcement --- */
.frames-container {
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.frame-one {
    flex: 0 0 20% !important;
    width: 20% !important;
    border: none; height: 100%; overflow-y: auto; overflow-x: hidden;
}

.frame-two {
    flex: 1 !important;
    width: 80% !important;
    border: none; height: 100%; overflow-y: auto; overflow-x: hidden;
}

/* --- Content Constraints --- */
body { margin: 0; padding: 15px; line-height: 1.5; color: #333; font-family: sans-serif; }
img { max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; }
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-thumb { background: #a0a0a0; border-radius: 4px; }