:root {
    --cm-green: #689873;
    --cm-green-dark: #4f7658;
    --cm-green-soft: #eef6f0;
    --cm-white: #ffffff;
    --cm-bg: #fbfdfb;
    --cm-text: #1f1f1f;
    --cm-muted: #65736a;
    --cm-border: #e3ebe5;
    --cm-shadow: 0 10px 28px rgba(31, 31, 31, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 !important;
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    line-height: 1.55;
}

.topbar {
    background: var(--cm-white) !important;
    color: var(--cm-text) !important;
    padding: 1.4rem 5vw !important;
    min-height: 86px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    box-shadow: 0 1px 0 rgba(104, 152, 115, 0.18) !important;
}

.topbar h1 {
    margin: 0 !important;
    color: var(--cm-green) !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

.topbar a {
    color: var(--cm-text) !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-left: 1.4rem !important;
    padding: 0.45rem 0.7rem !important;
    border-radius: 999px !important;
}

.topbar a:hover {
    color: var(--cm-green-dark) !important;
    background: var(--cm-green-soft) !important;
}

.topbar a:last-child {
    background: var(--cm-green) !important;
    color: var(--cm-white) !important;
    padding: 0.8rem 1.6rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.container {
    max-width: 1040px !important;
    margin: 3rem auto !important;
    padding: 0 1.4rem 3rem !important;
}

.card {
    background: var(--cm-white) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--cm-shadow) !important;
    padding: clamp(1.4rem, 3vw, 2.2rem) !important;
    margin-bottom: 1.6rem !important;
}

.card .card {
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1px solid #edf3ee !important;
}

h2 {
    color: var(--cm-green-dark) !important;
    font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
    font-weight: 650 !important;
    margin: 0 0 1.3rem !important;
}

h3 {
    color: var(--cm-green-dark) !important;
    font-size: 1.4rem !important;
    margin-top: 0 !important;
}

h4 {
    color: var(--cm-text) !important;
    font-size: 1.05rem !important;
    margin-top: 1.5rem !important;
}

p,
li,
td,
th,
label {
    color: var(--cm-text) !important;
}

label {
    font-weight: 650 !important;
    margin-top: 0.4rem !important;
}

form {
    gap: 0.85rem !important;
}

input,
textarea,
select {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 14px !important;
    color: var(--cm-text) !important;
    padding: 0.82rem 0.95rem !important;
    font-size: 1rem !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid rgba(104, 152, 115, 0.18) !important;
    border-color: var(--cm-green) !important;
}

button,
input[type="submit"] {
    background: var(--cm-green) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0.85rem 1.35rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(104, 152, 115, 0.22) !important;
}

button:hover,
input[type="submit"]:hover {
    background: var(--cm-green-dark) !important;
}

a {
    color: var(--cm-green-dark) !important;
    font-weight: 600;
}

table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-top: 1rem !important;
}

th {
    background: var(--cm-green-soft) !important;
    color: var(--cm-green-dark) !important;
    font-weight: 750 !important;
}

th,
td {
    border: 0 !important;
    border-bottom: 1px solid var(--cm-border) !important;
    padding: 0.85rem 0.9rem !important;
    text-align: left !important;
}

tr:last-child td {
    border-bottom: 0 !important;
}

tr:nth-child(even) td {
    background: #fbfdfb !important;
}

.alert {
    border-radius: 16px !important;
    border: 1px solid var(--cm-border) !important;
    border-left: 5px solid var(--cm-green) !important;
    padding: 1rem !important;
    background: var(--cm-green-soft) !important;
}

.alert.success {
    background: #edf7ef !important;
}

.alert.error {
    background: #faefef !important;
    border-left-color: #b05a5a !important;
}

img {
    max-width: 100%;
}

.card img {
    border-radius: 18px !important;
}

ul {
    padding-left: 1.25rem;
}

@media (max-width: 768px) {
    .topbar {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 1.2rem !important;
    }

    .topbar a {
        margin-left: 0 !important;
        margin-right: 0.4rem !important;
        display: inline-block !important;
    }

    .container {
        margin-top: 1.5rem !important;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}