:root {
    --forest: #183f32;
    --forest-soft: #2c5b49;
    --sage: #7f927c;
    --moss: #a7b59b;
    --sand: #d7c4a3;
    --clay: #a9684c;
    --cream: #f5f2e9;
    --paper: #fffef9;
    --ink: #20302a;
    --muted: #6d7771;
    --line: #e5e2d9;
    --card-border: 1px solid rgba(40, 58, 48, .08);
    --radius-control: 12px;
    --radius-card: 18px;
    --radius-feature: 26px;
    --shadow: 0 12px 32px rgba(38, 52, 44, .08);
    --shadow-soft: 0 7px 20px rgba(38, 52, 44, .065);
    --serif: "Newsreader", Georgia, serif;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--cream); }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% -10%, rgba(215, 196, 163, .22), transparent 30rem),
        var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.site-header {
    position: sticky;
    z-index: 900;
    top: 0;
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: max(12px, env(safe-area-inset-top)) 20px 10px;
    border-bottom: 1px solid rgba(54, 67, 59, .08);
    background: rgba(245, 242, 233, .92);
    backdrop-filter: blur(16px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--paper);
    border-radius: 50%;
    background: var(--forest);
}
.brand-mark svg { width: 23px; height: 23px; stroke-width: 1.6; }
.brand strong { display: block; font-family: var(--serif); font-size: 24px; line-height: .9; letter-spacing: -.3px; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.page-shell { width: 100%; max-width: 1120px; min-height: calc(100vh - 150px); margin: 0 auto; padding: 18px 16px calc(124px + env(safe-area-inset-bottom)); }

.hero {
    position: relative;
    min-height: 255px;
    padding: 32px 26px;
    overflow: hidden;
    color: #f8f5ed;
    border-radius: var(--radius-feature);
    background: linear-gradient(145deg, #173f32, #2b5948);
    box-shadow: var(--shadow);
}
.hero::after {
    position: absolute;
    right: -44px;
    bottom: -70px;
    width: 185px;
    height: 185px;
    content: "";
    opacity: .17;
    border-radius: 52% 48% 34% 66%;
    background: var(--sand);
    transform: rotate(18deg);
}
.hero h1, .page-intro h1, .species-title h1, .profile-hero h1, .not-found h1 {
    margin: 7px 0 10px;
    font-family: var(--serif);
    font-size: clamp(42px, 12vw, 65px);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.04em;
}
.hero p { position: relative; z-index: 1; max-width: 290px; margin: 0; color: rgba(255, 255, 255, .74); }
.eyebrow { color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero .eyebrow { color: #d9c59f; }
.hero-rings { position: absolute; right: -38px; top: -20px; width: 165px; color: rgba(255, 255, 255, .1); stroke-width: 1; }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: -24px 14px 18px; position: relative; z-index: 2; }
.stat-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 18px; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.stat-icon { grid-row: 1 / 3; display: grid; width: 39px; height: 39px; place-items: center; color: var(--forest); border-radius: 13px; background: #e9eee6; }
.stat-icon svg { width: 21px; height: 21px; }
.stat-card strong { font-family: var(--serif); font-size: 27px; line-height: 1; }
.stat-card > span:last-child { margin-top: 4px; color: var(--muted); font-size: 11px; }

.primary-action { display: flex; align-items: center; gap: 13px; margin: 0 2px 32px; padding: 17px; color: white; border-radius: var(--radius-card); background: var(--clay); box-shadow: 0 10px 24px rgba(169, 104, 76, .22); }
.action-plus { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; }
.action-plus svg { width: 20px; height: 20px; }
.primary-action strong, .primary-action small { display: block; }
.primary-action strong { font-size: 14px; }
.primary-action small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 10px; }
.action-arrow { display: grid; width: 30px; height: 30px; margin-left: auto; place-items: center; }
.action-arrow svg { width: 18px; height: 18px; stroke-width: 1.8; }

.content-section { margin-top: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 2px 15px; }
.section-heading h2, .profile-section h2 { margin: 2px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.section-heading > a { color: var(--forest-soft); font-size: 12px; font-weight: 700; }

.observation-list { overflow: hidden; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.observation-row { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.observation-row:last-child { border-bottom: 0; }
.observation-row img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: var(--radius-control); background: #dfe4da; }
.observation-main { min-width: 0; flex: 1; }
.observation-main strong, .observation-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-main strong { font-size: 14px; }
.observation-main small { color: var(--muted); font-size: 11px; }
.observation-row time { max-width: 76px; color: var(--muted); font-size: 10px; text-align: right; }

.empty-state { padding: 35px 22px; text-align: center; border: 1px dashed #cfd2c9; border-radius: var(--radius-card); background: rgba(255,254,249,.55); }
.empty-state h3 { margin: 10px 0 2px; font-family: var(--serif); font-size: 22px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.empty-icon { display: grid; width: 44px; height: 44px; margin: auto; place-items: center; color: var(--forest); border-radius: 50%; background: #e4eae1; }
.empty-icon svg { width: 23px; }

.page-intro { padding: 17px 4px 24px; }
.page-intro h1, .profile-hero h1, .not-found h1 { margin: 4px 0 4px; color: var(--forest); }
.page-intro p { max-width: 460px; margin: 0; color: var(--muted); font-size: 13px; }
.compact-intro h1 { font-size: clamp(37px, 11vw, 54px); }

.segmented-control { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 19px; padding: 4px; border-radius: 15px; background: #e5e4dc; }
.segmented-control a { padding: 10px; color: var(--muted); border-radius: 12px; font-size: 12px; font-weight: 700; text-align: center; }
.segmented-control a.active { color: var(--forest); background: var(--paper); box-shadow: 0 3px 12px rgba(40, 50, 44, .08); }

.animal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.animal-card { min-width: 0; overflow: hidden; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); transition: transform .2s ease, opacity .2s ease; }
.animal-card:active { transform: scale(.98); }
.animal-card.not-seen { opacity: .78; filter: saturate(.7); }
.animal-image { position: relative; height: 102px; overflow: hidden; background: #e1e4db; }
.animal-image img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-media img { opacity: .58; filter: saturate(.55) contrast(.9); }
.animal-card.not-seen .placeholder-media img { opacity: .43; }
.status-pill { position: absolute; top: 9px; left: 9px; display: inline-flex; min-height: 22px; padding: 0 8px; align-items: center; justify-content: center; color: #5f6762; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; background: rgba(244,244,238,.9); backdrop-filter: blur(5px); font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.status-pill.status-seen { color: white; background: rgba(24,63,50,.86); }
.animal-card-body { display: flex; min-height: 126px; padding: 15px 14px 13px; flex-direction: column; }
.animal-card h2 { display: -webkit-box; overflow: hidden; margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.02; letter-spacing: -.015em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.animal-card em { display: block; overflow: hidden; margin-top: 6px; color: var(--muted); font-family: var(--serif); font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.count-label { display: block; margin-top: auto; padding-top: 12px; color: var(--clay); border-top: 1px solid rgba(40,58,48,.07); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .035em; text-transform: uppercase; }

.alert { margin-bottom: 16px; padding: 13px 15px; border-radius: 14px; font-size: 12px; }
.alert-error { color: #773e32; border: 1px solid #e5c3b9; background: #f8e9e4; }
.alert-success { color: #214f3d; border: 1px solid #bad2c5; background: #e5f0e9; }
.setup-card { display: flex; align-items: flex-start; gap: 12px; margin: 0 2px 18px; padding: 14px; color: #6d4936; border: 1px solid #dbc9ae; border-radius: 16px; background: #f5ead6; }
.setup-card p { margin: 2px 0 0; font-size: 11px; }
.setup-icon { display: grid; flex: 0 0 27px; height: 27px; place-items: center; color: white; border-radius: 50%; background: var(--clay); font-weight: 700; line-height: 1; }

.observation-form { display: grid; gap: 16px; }
.photo-drop { position: relative; display: block; overflow: hidden; cursor: pointer; border: 1.5px dashed #aeb6a9; border-radius: var(--radius-card); background: rgba(255,254,249,.6); }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-preview { display: flex; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); background-position: center; background-size: cover; }
.photo-preview.has-image { color: transparent; }
.camera-icon { display: grid; width: 48px; height: 48px; margin-bottom: 9px; place-items: center; color: var(--forest); border-radius: 50%; background: #e2e9df; }
.camera-icon svg { width: 24px; height: 24px; }
.photo-preview strong { color: var(--forest); }
.photo-preview small { margin-top: 3px; font-size: 10px; }
.photo-preview.has-image > * { visibility: hidden; }

.form-card, .location-card { padding: 18px; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.field-label { display: block; margin: 16px 0 6px; color: var(--ink); font-size: 11px; font-weight: 700; }
.field-label:first-child { margin-top: 0; }
.field-label span { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; color: var(--ink); border: 1px solid #d9ddd5; border-radius: 12px; outline: none; background: #fbfaf6; transition: border-color .2s, box-shadow .2s; }
input, select { min-height: 48px; padding: 0 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--forest-soft); box-shadow: 0 0 0 3px rgba(44,91,73,.1); }
.select-wrap { position: relative; }
.select-wrap::after { position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; content: ""; pointer-events: none; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg); }
select { padding-right: 36px; appearance: none; }
.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; left: 13px; top: 14px; width: 19px; color: var(--muted); }
.input-with-icon input { padding-left: 41px; }
.location-card { display: grid; gap: 12px; }
.location-card strong, .location-card small { display: block; }
.location-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.secondary-button { display: inline-flex; min-height: 43px; padding: 0 14px; align-items: center; justify-content: center; color: var(--forest); border: 1px solid #b9c6bb; border-radius: var(--radius-control); background: #edf1ea; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coordinate-grid label { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.coordinate-grid input { min-height: 42px; margin-top: 4px; font-size: 12px; }
.submit-button { display: grid; min-height: 54px; width: 100%; padding: 0 18px; place-items: center; color: white; border: 0; border-radius: var(--radius-control); background: var(--forest); box-shadow: 0 9px 20px rgba(24,63,50,.18); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.submit-button:disabled { opacity: .45; cursor: not-allowed; }
.inline-button { display: inline-grid; width: auto; min-width: 200px; margin-top: 16px; }
.profile-action { width: 100%; }

.detail-page .page-shell { padding-top: 0; }
.species-profile { margin: 0 -16px; }
.species-cover { position: relative; height: clamp(170px, 44vw, 230px); overflow: hidden; background: #dce1d7; }
.species-cover::after { position: absolute; inset: auto 0 0; height: 50%; content: ""; background: linear-gradient(transparent, rgba(15,31,24,.48)); }
.species-cover > img { width: 100%; height: 100%; object-fit: cover; }
.species-cover.placeholder-media > img { opacity: .68; filter: saturate(.5) contrast(.9); }
.back-button { position: absolute; z-index: 2; top: 15px; left: 16px; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: var(--forest); border-radius: 50%; background: rgba(255,254,249,.94); box-shadow: 0 5px 16px rgba(0,0,0,.11); }
.back-button svg { width: 20px; height: 20px; stroke-width: 2; }
.species-title, .species-stats, .field-guide-stack { margin-right: 16px; margin-left: 16px; }
.species-title { padding: 22px 2px 18px; }
.species-identity-meta { display: flex; min-height: 25px; align-items: center; justify-content: space-between; gap: 12px; }
.species-identity-status { display: inline-flex; min-height: 25px; padding: 0 10px; align-items: center; justify-content: center; color: var(--muted); border: 1px solid #d8dcd4; border-radius: 99px; background: rgba(255,254,249,.72); font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .055em; text-transform: uppercase; }
.species-identity-status.is-seen { color: white; border-color: var(--forest); background: var(--forest); }
.species-title h1 { margin: 7px 0 2px; color: var(--forest); }
.species-title em { display: block; color: #7c857f; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.species-english-name { display: block; margin-top: 5px; color: #89918c; font-size: 10px; letter-spacing: .015em; }
.species-stats { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.species-stats article { display: flex; min-height: 68px; padding: 11px 13px; justify-content: center; flex-direction: column; border-bottom: 1px solid var(--line); }
.species-stats article:nth-child(odd) { border-right: 1px solid var(--line); }
.species-stats article:nth-child(n+3) { border-bottom: 0; }
.species-stats strong, .species-stats span { display: block; }
.species-stats strong { color: var(--forest); font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.05; }
.species-stats span { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.15; letter-spacing: .075em; text-transform: uppercase; }
.field-guide-stack { display: grid; gap: 14px; margin-top: 18px; }
.field-guide-card { position: relative; overflow: hidden; padding: 18px; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.field-guide-card h2 { margin: 0; padding-right: 32px; color: var(--forest); font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.field-guide-number { position: absolute; top: 18px; right: 18px; color: #b5a58b; font-family: var(--serif); font-size: 12px; font-weight: 600; }
.field-guide-lead { margin: 11px 0 0; color: #53605a; font-size: 13px; line-height: 1.72; }
.field-guide-meta-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #faf8f1; }
.field-guide-meta-grid article { min-width: 0; padding: 12px; border-bottom: 1px solid var(--line); }
.field-guide-meta-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.field-guide-meta-grid article:nth-child(n+3) { border-bottom: 0; }
.field-guide-meta-grid span, .field-guide-meta-grid strong { display: block; }
.field-guide-meta-grid span { color: var(--clay); font-size: 8px; font-weight: 700; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; }
.field-guide-meta-grid strong { margin-top: 5px; overflow-wrap: anywhere; color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.22; }
.field-guide-copy { margin-top: 16px; }
.field-guide-copy + .field-guide-copy { padding-top: 15px; border-top: 1px solid var(--line); }
.field-guide-copy h3, .journal-gallery h3 { margin: 0; color: var(--clay); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.field-guide-copy p { margin: 6px 0 0; color: #53605a; font-size: 13px; line-height: 1.68; }
.field-guide-copy small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.morphology-list { overflow: hidden; margin-top: 15px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.morphology-list article { display: flex; min-height: 48px; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.morphology-list article:last-child { border-bottom: 0; }
.morphology-list span { color: var(--muted); font-size: 10px; font-weight: 600; }
.morphology-list strong { color: var(--forest); font-family: var(--serif); font-size: 17px; font-weight: 600; text-align: right; }
.identification-chip-list, .short-facts-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.identification-chip-list li { position: relative; padding: 10px 12px 10px 29px; color: #43534a; border: 1px solid #dfe5db; border-radius: var(--radius-control); background: #f1f4ed; font-size: 12px; line-height: 1.45; }
.identification-chip-list li::before { position: absolute; top: 15px; left: 13px; width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--forest-soft); }
.facts-card { background: #e8ede3; }
.short-facts-list li { padding: 11px 12px; color: #43534a; border-left: 2px solid var(--clay); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: rgba(255,254,249,.68); font-size: 12px; line-height: 1.48; }
.field-guide-sources { margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(67,83,74,.14); }
.field-guide-sources span { color: var(--clay); font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.field-guide-sources p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.journal-card .field-guide-number { display: none; }
.journal-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journal-heading h2 { padding-right: 0; }
.journal-empty { margin: 14px 0 0; padding-top: 14px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.journal-gallery { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-section { margin-top: 32px; }
.profile-section > p, .description-block p { margin: 8px 0 0; color: #54615a; font-size: 13px; line-height: 1.75; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; margin-top: 26px; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); }
.fact-grid article { min-width: 0; min-height: 94px; padding: 14px; border-bottom: 1px solid var(--line); }
.fact-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.fact-grid article:nth-child(n+3) { border-bottom: 0; }
.fact-grid span, .fact-grid strong { display: block; }
.fact-grid span { color: var(--clay); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fact-grid strong { margin-top: 6px; overflow-wrap: anywhere; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.25; }
.fact-highlight { display: flex; gap: 13px; padding: 18px; border-radius: var(--radius-card); background: #e5eadf; }
.fact-highlight p { margin: 4px 0 0; color: #536057; font-size: 12px; }
.fact-spark { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; color: white; border-radius: 50%; background: var(--forest); font-family: var(--serif); font-size: 25px; line-height: 1; }
.round-count { display: grid; width: 31px; height: 31px; place-items: center; color: var(--forest); border-radius: 50%; background: #e1e8df; font-size: 11px; font-weight: 700; line-height: 1; }
.detail-observations { margin-top: 15px; box-shadow: none; }
.small-empty { margin-top: 13px; padding: 24px 18px; }
.small-empty a { display: inline-block; margin-top: 8px; color: var(--forest); font-size: 11px; font-weight: 700; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.photo-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-control); }
.not-found { max-width: 600px; margin: 15vh auto 0; text-align: center; }
.not-found p { color: var(--muted); }

.map-intro { display: flex; min-height: 115px; justify-content: center; flex-direction: column; }
.map-card { position: relative; overflow: hidden; height: calc(100vh - 312px); height: calc(100dvh - 312px); min-height: 360px; border: 5px solid var(--paper); border-radius: var(--radius-feature); background: #dfe4da; box-shadow: var(--shadow); }
#observation-map { width: 100%; height: 100%; z-index: 1; }
.map-empty { position: absolute; z-index: 500; top: 50%; left: 50%; display: flex; width: min(260px, 82%); padding: 16px; align-items: center; flex-direction: column; border-radius: 15px; background: rgba(255,254,249,.94); box-shadow: var(--shadow); text-align: center; transform: translate(-50%, -50%); }
.map-empty span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: var(--sans); box-shadow: var(--shadow); }
.map-popup strong, .map-popup span { display: block; }
.map-popup strong { color: var(--forest); font-family: var(--serif); font-size: 17px; }
.map-popup span { margin-top: 2px; color: var(--muted); font-size: 10px; }

.profile-hero { padding: 30px 15px 25px; text-align: center; }
.profile-avatar { display: grid; width: 72px; height: 72px; margin: 0 auto 14px; place-items: center; color: white; border: 5px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--forest); box-shadow: 0 8px 20px rgba(24,63,50,.18); }
.profile-avatar svg { width: 35px; height: 35px; }
.profile-hero h1 { font-size: 45px; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.profile-stats article { padding: 18px 7px; text-align: center; border-right: 1px solid var(--line); }
.profile-stats article:last-child { border: 0; }
.profile-stats strong, .profile-stats span { display: block; }
.profile-stats strong { color: var(--forest); font-family: var(--serif); font-size: 28px; line-height: 1; }
.profile-stats span { margin-top: 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.profile-note { display: flex; gap: 14px; padding: 18px; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); }
.profile-note p { margin: 5px 0 0; font-size: 12px; }
.note-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; color: var(--forest); border-radius: 12px; background: #e4eae1; }
.note-icon svg { width: 21px; height: 21px; }

.diagnostic-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 17px; border-radius: var(--radius-card); }
.diagnostic-ready { color: #214f3d; border: 1px solid #bad2c5; background: #e5f0e9; }
.diagnostic-attention { color: #6d4936; border: 1px solid #dbc9ae; background: #f5ead6; }
.diagnostic-summary-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; color: white; border-radius: 50%; background: var(--forest-soft); font-weight: 700; line-height: 1; }
.diagnostic-attention .diagnostic-summary-icon { background: var(--clay); }
.diagnostic-summary strong, .diagnostic-summary p { display: block; }
.diagnostic-summary p { margin: 2px 0 0; font-size: 11px; }
.diagnostic-list { overflow: hidden; border: var(--card-border); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-soft); }
.diagnostic-row { display: flex; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); }
.diagnostic-row:last-child { border-bottom: 0; }
.diagnostic-row p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.diagnostic-status { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; color: white; border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1; }
.diagnostic-pass .diagnostic-status { background: var(--forest-soft); }
.diagnostic-fail .diagnostic-status { background: var(--clay); }
.diagnostic-actions { margin-top: 18px; text-align: center; }
.diagnostic-actions p { color: var(--muted); font-size: 10px; }

.bottom-nav { position: fixed; z-index: 1000; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 74px; padding: 7px 6px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(40, 57, 47, .09); background: rgba(255,254,249,.97); box-shadow: 0 -8px 26px rgba(43,52,47,.075); backdrop-filter: blur(18px); }
.nav-item { display: flex; min-width: 0; padding: 3px 0; align-items: center; justify-content: center; gap: 5px; flex-direction: column; color: #828a84; font-size: 9px; font-weight: 600; line-height: 1; }
.nav-item > svg { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 1.7; }
.nav-item.active { color: var(--forest); }
.nav-add { transform: translateY(-17px); }
.nav-add-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; color: white; border: 5px solid var(--cream); border-radius: 50%; background: var(--forest); box-shadow: 0 6px 16px rgba(24,63,50,.23); }
.nav-add-icon svg { width: 23px; height: 23px; }
.nav-add > span:last-child { line-height: 1; }

@media (min-width: 700px) {
    .site-header { padding-right: 32px; padding-left: 32px; }
    .page-shell { padding: 28px 28px 120px; }
    .hero { min-height: 300px; padding: 46px 42px; }
    .hero h1 { font-size: 68px; }
    .stats-grid { max-width: 520px; margin-top: -36px; }
    .animal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .species-profile { margin: 0; overflow: hidden; border-radius: 28px; background: rgba(255,254,249,.35); }
    .species-title, .species-stats, .field-guide-stack, .profile-section, .fact-grid { margin-right: 42px; margin-left: 42px; }
    .species-stats { grid-template-columns: repeat(4, 1fr); }
    .species-stats article { border-right: 1px solid var(--line); border-bottom: 0; }
    .species-stats article:last-child { border-right: 0; }
    .field-guide-stack { margin-bottom: 42px; }
    .species-profile .profile-section:last-child { margin-bottom: 42px; }
    .map-card { height: 620px; }
}

@media (min-width: 960px) {
    .site-header { justify-content: center; }
    .page-shell { padding-bottom: 70px; }
    .bottom-nav { top: 50%; right: auto; bottom: auto; left: 18px; width: 76px; min-height: 380px; padding: 13px 6px; grid-template-columns: 1fr; border: 1px solid rgba(40,57,47,.08); border-radius: 24px; box-shadow: var(--shadow); transform: translateY(-50%); }
    .nav-add { transform: none; }
    .nav-add-icon { width: 43px; height: 43px; flex-basis: 43px; border-width: 0; }
    .animal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-dashboard { display: flex; align-items: center; }
    .stats-grid { margin-left: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}