:root {
    --sf-primary: #1d6f42;
    --sf-primary-dark: #145331;
    --sf-accent: #f4b942;
    --sf-ink: #17221b;
    --sf-muted: #647067;
    --sf-line: #d9e3dc;
    --sf-soft: #f5f8f1;
}

body {
    color: var(--sf-ink);
    background: #fbfcf8;
}

.bg-primary {
    background-color: var(--sf-primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--sf-primary);
    --bs-btn-border-color: var(--sf-primary);
    --bs-btn-hover-bg: var(--sf-primary-dark);
    --bs-btn-hover-border-color: var(--sf-primary-dark);
}

.btn-warning {
    --bs-btn-bg: var(--sf-accent);
    --bs-btn-border-color: var(--sf-accent);
}

.hero {
    min-height: 72vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(10, 28, 18, .84), rgba(10, 28, 18, .42)),
        url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1800&q=80') center/cover;
    color: #fff;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1;
    letter-spacing: 0;
}

.feature-band {
    background: var(--sf-soft);
}

.app-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: calc(100vh - 56px);
}

.app-sidebar {
    background: #102318;
    padding: 1rem;
}

.side-link {
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78);
    display: flex;
    gap: .75rem;
    margin-bottom: .25rem;
    padding: .72rem .85rem;
    text-decoration: none;
}

.side-link:hover,
.side-link:focus {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.content-area {
    min-width: 0;
    padding: 1.5rem;
}

.stat-card,
.record-card {
    background: #fff;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(20, 60, 35, .05);
}

.stat-card {
    padding: 1rem;
}

.stat-card .value {
    font-size: 1.8rem;
    font-weight: 800;
}

.form-label {
    font-weight: 600;
}

.table {
    vertical-align: middle;
}

.badge-soft {
    background: var(--sf-soft);
    color: var(--sf-primary-dark);
}

.auth-panel {
    max-width: 560px;
}

.category-option {
    display: block;
}

.category-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.category-option span {
    align-items: center;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    display: flex;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem .85rem;
}

.category-option.compact span {
    min-height: 40px;
    padding: .45rem .65rem;
}

.category-option input:checked + span {
    background: var(--sf-soft);
    border-color: var(--sf-primary);
    color: var(--sf-primary-dark);
    font-weight: 700;
}

@media (max-width: 991px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
    }

    .side-link {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .content-area {
        padding: 1rem;
    }

    .app-sidebar {
        grid-template-columns: 1fr;
    }
}