:root {
    --bg: #f7f7f4;
    --card: #ffffff;
    --panel: #ffffff;
    --panel-alt: #eeeee8;
    --border: #d4d4ca;
    --line: #d4d4ca;
    --text: #171915;
    --muted: #5c6258;
    --accent: #1f6c51;
    --accent-strong: #164b3a;
    --accent-dark: #164b3a;
    --primary: #1f6c51;
    --primary-strong: #164b3a;
    --chip: #eeeee8;
    --chip-border: #d4d4ca;
    --shadow: none;
    --focus: rgba(31, 108, 81, 0.18);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 36px 0 56px;
    color: var(--text);
    background: var(--bg);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.page {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    gap: 18px;
}

.hero,
.page-title-row {
    border-bottom: 1px solid var(--line);
    padding: 10px 0 22px;
}

.eyebrow {
    color: var(--accent);
    letter-spacing: 0.14em;
}

h1,
.page-title {
    color: var(--text);
    font-weight: 760;
}

.lede,
.muted,
p {
    color: var(--muted);
}

.card,
.panel,
.map-panel,
.tools,
.events-collapse,
.search-mode,
.mode-switch,
.entry,
.result-item,
.event-list,
.event-item,
.empty,
.note-editor {
    background: var(--panel);
    border-color: var(--line);
    border-radius: 0;
    box-shadow: none;
}

.card,
.panel,
.map-panel {
    border: 1px solid var(--line);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
select,
textarea,
.text-input,
.event-search-input,
.date-display {
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
.text-input:focus,
.date-input-stack:focus-within .date-display {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--accent);
    box-shadow: none;
}

button,
.button,
.btn,
.link-btn,
.primary-btn,
.ghost-btn,
.danger-btn,
.quick-submit-btn,
.locate-btn,
.mode-btn,
.pill,
.date-picker-btn,
.tiny-btn,
.pagination a,
.pagination span,
.filters-toggle-state,
.events-pill,
.chip,
.outing-label {
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

button,
.button,
.btn,
.link-btn,
.primary-btn,
.quick-submit-btn,
.mode-btn.active,
.pill.active,
.pagination .active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent-dark);
}

button:hover,
.button:hover,
.btn:hover,
.link-btn:hover,
.primary-btn:hover,
.quick-submit-btn:hover,
.mode-btn.active:hover,
.pill.active:hover {
    color: #fff;
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    filter: none;
    transform: none;
}

.ghost-btn,
.btn.secondary,
.btn-ghost,
.tiny-btn,
.date-picker-btn,
.mode-btn,
.pagination a,
.pagination span {
    color: var(--accent-dark);
    background: #fff;
    border-color: var(--line);
}

.ghost-btn:hover,
.btn.secondary:hover,
.btn-ghost:hover,
.tiny-btn:hover,
.date-picker-btn:hover,
.mode-btn:hover,
.pagination a:hover {
    color: var(--accent-dark);
    background: var(--panel-alt);
    border-color: var(--accent);
}

.danger-btn,
.btn-danger,
.remove-row,
.delete-btn {
    color: #8a1f1f;
    background: #fff;
    border-color: #b98f8f;
}

.danger-btn:hover,
.btn-danger:hover,
.remove-row:hover,
.delete-btn:hover {
    color: #fff;
    background: #8a1f1f;
    border-color: #8a1f1f;
}

.btn-note {
    color: var(--accent-dark);
    background: #fff;
    border-color: var(--line);
}

.chip,
.outing-label,
.events-pill,
.filters-toggle-state,
.pill,
.pill.success,
.events-pill.active {
    color: var(--accent-dark);
    background: var(--panel-alt);
    border-color: var(--line);
}

.pill.error,
.error,
.warning {
    color: #8a1f1f;
    background: #f8eeee;
    border-color: #d9bcbc;
}

.autocomplete-list {
    background: #fff;
    border-color: var(--line);
    border-radius: 0;
    box-shadow: none;
}

.autocomplete-item {
    border-radius: 0;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--panel-alt);
}

.table {
    border-collapse: collapse;
}

.table th,
.table td,
table th,
table td {
    border-color: var(--line);
}

.table th,
table th {
    color: var(--muted);
    letter-spacing: 0.08em;
}

.scientific-name,
.result-title,
.event-name,
label,
.filters-summary-title {
    color: var(--text);
}

.result-sub,
.result-date,
.event-date,
.control-note,
.location-status {
    color: var(--muted);
}

#map {
    border-radius: 0;
    border: 1px solid var(--line);
}

.leaflet-marker-icon div {
    background: var(--accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 620px) {
    body {
        padding: 18px 14px 34px;
    }

    .page {
        width: 100%;
    }
}