:root {
    --color-primary: #0f78aa;
        --color-accent: #decf77;
        --color-background: #edf2fa;
        --color-text: #000000;
        --color-white: #ffffff;
    }
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: var(--color-background);
            color: var(--color-text);
                line-height: 1.6;
                }
    header {
        background-color: var(--color-primary);
            color: var(--color-white);
                padding: 1.5rem 2rem;
                }
    nav {
        background-color: var(--color-text);
            padding: 0.75rem 2rem;
            }
    nav a {
        color: var(--color-accent);
            text-decoration: none;
            margin-right: 1.25rem;
            font-weight: bold;
            }
    nav a:hover,        nav a:focus {
        color: var(--color-white);
            }
    main {
        max-width: 1100px;
        margin: 2rem auto;
        padding: 0 1rem;
    }
    section,    .card {
        background-color: var(--color-white);
            border-left: 6px solid var(--color-primary);
                padding: 1.5rem;
                margin-bottom: 1.5rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                }
    h1,    h2,    h3,    h4 {
        color: var(--color-primary);
            margin-top: 0;
            }
    p {
        margin-bottom: 1rem;
    }
    a {
        color: var(--color-primary);
            }
    a:hover,        a:focus {
        color: var(--color-text);
            }
    button,    .btn {
        display: inline-block;
        background-color: var(--color-accent);
            color: var(--color-text);
                border: 2px solid var(--color-text);
                    padding: 0.75rem 1.25rem;
                    font-size: 1rem;
                    font-weight: bold;
                    cursor: pointer;
                    text-decoration: none;
                    transition: all 0.2s ease-in-out;
                    }
    button:hover,        .btn:hover,        button:focus,        .btn:focus {
        background-color: var(--color-primary);
            color: var(--color-white);
                border-color: var(--color-primary);
                    }
    input,    textarea,    select {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid var(--color-primary);
            background-color: var(--color-white);
                color: var(--color-text);
                    margin-bottom: 1rem;
                    }
    input:focus,        textarea:focus,        select:focus {
        outline: none;
        border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(222, 207, 119, 0.35);
            }
    table {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--color-white);
            }
    th {
        background-color: var(--color-primary);
            color: var(--color-white);
                text-align: left;
                }
    th,    td {
        padding: 0.9rem;
        border: 1px solid var(--color-background);
            }
    tr:nth-child(even) {
        background-color: var(--color-background);
            }
    footer {
        background-color: var(--color-text);
            color: var(--color-accent);
                text-align: center;
                padding: 1rem;
                margin-top: 2rem;
                }