:root {
    --color-canvas: #f5f2ea;
    --color-surface: #fffcf6;
    --color-surface-raised: #fff;
    --color-ink: #24312d;
    --color-muted: #66736e;
    --color-line: #d8d8ce;
    --color-action: #24594b;
    --color-action-hover: #183f35;
    --color-accent: #d97745;
    --color-success: #367a59;
    --color-warning: #b87924;
    --color-danger: #a9473f;
    --radius-control: 0.625rem;
    --radius-panel: 0.875rem;
    --shadow-float: 0 1rem 3rem rgb(36 49 45 / 10%);
    --bs-primary: var(--color-action);
    --bs-primary-rgb: 36, 89, 75;
    --bs-secondary: var(--color-muted);
    --bs-body-color: var(--color-ink);
    --bs-body-bg: var(--color-canvas);
    --bs-border-color: var(--color-line);
    --bs-link-color: var(--color-action);
    --bs-link-hover-color: var(--color-action-hover);
}

html { scroll-behavior: smooth; }

.app-body {
    background: var(--color-canvas);
    color: var(--color-ink);
    line-height: 1.6;
}

.app-skip-link {
    position: fixed;
    z-index: 2000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-control);
    background: var(--color-ink);
    color: #fff;
    transform: translateY(-160%);
}

.app-skip-link:focus { transform: translateY(0); }

.app-topbar {
    min-height: 4.25rem;
    border-bottom: 1px solid var(--color-line);
    background: rgb(255 252 246 / 94%);
    backdrop-filter: blur(14px);
}

.app-brand {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-brand-mark {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 0.7rem;
    background: var(--color-action);
    font-size: 1.15rem;
}

.app-account-button,
.app-icon-button {
    min-height: 2.75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-ink);
    padding: 0.45rem 0.8rem;
}

.app-icon-button { width: 2.75rem; padding: 0.5rem; }
.app-account-button:hover, .app-icon-button:hover { background: #ebe9e1; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgb(217 119 69 / 45%);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-ink);
    font-weight: 700;
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(1.85rem, 3vw, 2.75rem); }
.lead { color: var(--color-muted); font-size: 1.05rem; }

.backend-layout { min-height: calc(100vh - 4.25rem); }
.backend-sidebar {
    top: 0;
    width: 16rem;
    min-width: 16rem;
    height: calc(100vh - 4.25rem);
    border-right: 1px solid var(--color-line);
    background: #eeece4;
}

.backend-sidebar-section { color: #727c77; letter-spacing: 0.11em; }
.backend-nav-link {
    margin: 0.12rem 0.65rem;
    padding: 0.55rem 0.75rem;
    border-left: 0;
    border-radius: 0.55rem;
    color: #46534e;
}
.backend-nav-link:hover { background: rgb(255 252 246 / 72%); color: var(--color-action); }
.backend-nav-link.active,
.backend-nav-sub .backend-nav-link.active {
    border-left: 0;
    background: var(--color-action);
    color: #fff;
}

.backend-content { max-width: 92rem; }

.card {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    box-shadow: none;
}
.card-header, .card-footer {
    border-color: var(--color-line);
    background: transparent;
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

.btn { min-height: 2.65rem; border-radius: var(--radius-control); font-weight: 700; }
.btn-sm { min-height: 2.25rem; }
.btn-primary { border-color: var(--color-action); background: var(--color-action); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--color-action-hover); background: var(--color-action-hover); }
.btn-outline-primary { border-color: #8aa49b; color: var(--color-action); }
.btn-outline-primary:hover { border-color: var(--color-action); background: var(--color-action); }

.form-control, .form-select {
    min-height: 2.75rem;
    border-color: #c7cac1;
    border-radius: var(--radius-control);
    background-color: var(--color-surface-raised);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 0.22rem rgb(36 89 75 / 15%);
}

.alert { border: 0; border-left: 4px solid currentColor; border-radius: 0.5rem; }
.badge { border-radius: 999px; padding: 0.45em 0.7em; }
.dropdown-menu { border-color: var(--color-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-float); }

.dashboard-hero {
    display: flex;
    gap: 1.5rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.dashboard-eyebrow { margin-bottom: 0.3rem; color: var(--color-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dashboard-stat { border: 0; background: #e8ece4; }
.dashboard-stat:nth-child(2) .card { background: #f1e8df; }
.dashboard-stat-value { color: var(--color-action); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1; }
.dashboard-section { margin-top: 2rem; }
.dashboard-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.dashboard-animal-card { transition: border-color 160ms ease, transform 160ms ease; }
.dashboard-animal-card:hover { border-color: #9aac9f; transform: translateY(-2px); }

@media (max-width: 767.98px) {
    .backend-sidebar { display: block; height: 100vh; }
    .dashboard-hero { display: block; }
    .dashboard-hero .btn { margin-top: 1rem; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}