:root {
            --primary: #003366;
            --secondary: #065a66;
            --accent: #db9929;
            --text: #333;
            --light: #f4f4f4;
        }

        body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: var(--text); margin: 0; padding: 0; background: #fff; }
        #wrapper { max-width: 1000px; margin: 0 auto; padding: 20px; }
        
        #header { display: flex; flex-direction: column; border-bottom: 3px solid var(--primary); padding-bottom: 20px; }
        #logo img { max-width: 300px; height: auto; }
        
        #nav ul { list-style: none; padding: 0; display: flex; gap: 20px; background: var(--primary); padding: 10px; }
        #nav a { color: white; text-decoration: none; font-weight: bold; }
        
        #content-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 30px; margin-top: 30px; }
        
        #sidebar { background: var(--light); padding: 20px; border-radius: 5px; }
        h1 { color: var(--primary); }
        
        .login-box { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; background: #fafafa; }
        .login-button { background: var(--primary); color: white; border: none; padding: 10px 20px; cursor: pointer; }

        #footer { margin-top: 40px; padding: 20px; border-top: 1px solid #ccc; text-align: center; }
        #footer img { margin: 0 10px; }

        @media (max-width: 768px) {
            #content-wrapper { grid-template-columns: 1fr; }
            #nav ul { flex-direction: column; }
        }