:root {
        --primary-red: #cc0000;
        --secondary-blue: #0080ff;
        --text-dark: #3a3a3a;
        --bg-light: #ffffff;
        --accent-yellow: #fdcb46;
    }
    body { font-family: sans-serif; color: var(--text-dark); background-color: #f4f4f4; margin: 0; line-height: 1.5; }
    .container { max-width: 960px; margin: 0 auto; background: var(--bg-light); padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    header { border-bottom: 3px solid var(--primary-red); padding-bottom: 10px; margin-bottom: 20px; text-align: right; }
    nav { background: #eee; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    nav a { text-decoration: none; color: var(--primary-red); font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; }
    .hero { width: 100%; height: 200px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid #ccc; }
    .main-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
    @media (max-width: 768px) { .main-grid { grid-template-columns: 1fr; } }
    .content-box { border: 1px solid #ccc; padding: 15px; border-radius: 4px; }
    .sidebar img { display: block; margin-bottom: 10px; width: 100%; height: auto; }
    footer { text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid #ccc; font-size: 0.9em; }
    .btn-placeholder { background: var(--secondary-blue); color: white; padding: 5px 10px; display: inline-block; border-radius: 3px; font-size: 12px; }