:root {
    --app-bg: #f4f7f5;
    --app-ink: #17231c;
    --app-primary: #26734d;
    --app-primary-dark: #1f5f40;
    --app-border: #dce7df;
}

body {
    background: var(--app-bg);
    color: var(--app-ink);
}

.app-navbar {
    background: linear-gradient(90deg, #173b2c, #26734d);
}

.app-shell {
    min-height: calc(100vh - 56px);
}

.app-page-heading {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 1rem;
}

.app-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(23, 35, 28, 0.06);
    padding: 1.5rem;
}

.login-page {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(23, 59, 44, 0.92), rgba(38, 115, 77, 0.78)),
        url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-panel {
    width: min(100%, 420px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
    padding: 2rem;
}

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